@flanksource/clicky-ui 0.2.2 → 0.2.3

package/dist/data/DataTable.cjs

@@ -0,0 +1,1735 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const useSort = require("../hooks/use-sort.cjs");
+const useDensity = require("../hooks/use-density.cjs");
+const useTheme = require("../hooks/use-theme.cjs");
+const utils = require("../lib/utils.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const FilterBar = require("../components/FilterBar.cjs");
+const Icon = require("./Icon.cjs");
+const SortableHeader = require("./SortableHeader.cjs");
+const Timestamp = require("./cells/Timestamp.cjs");
+const TagList = require("./cells/TagList.cjs");
+const StatusDot = require("./cells/StatusDot.cjs");
+const statusMapping = require("./cells/status-mapping.cjs");
+const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
+const UiFilter = require("../icons/components/UiFilter.cjs");
+const UiEyeClosed = require("../icons/components/UiEyeClosed.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
+const UiResizeVertical = require("../icons/components/UiResizeVertical.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+const UiRows = require("../icons/components/UiRows.cjs");
+const UiListFlat = require("../icons/components/UiListFlat.cjs");
+const UiListDashes = require("../icons/components/UiListDashes.cjs");
+const UiDesktop = require("../icons/components/UiDesktop.cjs");
+const UiSun = require("../icons/components/UiSun.cjs");
+const UiMoon = require("../icons/components/UiMoon.cjs");
+const DEFAULT_COLUMN_MIN_WIDTH = 64;
+const DEFAULT_COLUMN_WIDTH = 160;
+const DEFAULT_GROW_COLUMN_WIDTH = 224;
+const DEFAULT_SHRINK_COLUMN_WIDTH = 96;
+const COLUMN_WIDTH_STORAGE_PREFIX = "clicky-ui-data-table-column-widths";
+const COLUMN_VISIBILITY_STORAGE_PREFIX = "clicky-ui-data-table-column-visibility";
+const DENSITY_STORAGE_PREFIX = "clicky-ui-data-table-density";
+const DENSITY_OPTIONS = [
+  { value: "compact", icon: UiRows.UiRows, label: "Compact" },
+  { value: "comfortable", icon: UiListFlat.UiListFlat, label: "Comfortable" },
+  { value: "spacious", icon: UiListDashes.UiListDashes, label: "Spacious" }
+];
+const DATA_TABLE_HEADER_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-1 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
+const DATA_TABLE_CELL_DENSITY_CLASS = "px-2.5 py-1.5 density-compact:px-2 density-compact:py-0.5 density-comfortable:px-2.5 density-comfortable:py-1.5 density-spacious:px-4 density-spacious:py-3";
+const TIMESTAMP_RANGE_PRESETS = [
+  { label: "Last 5 minutes", from: "now-5m", to: "now" },
+  { label: "Last 15 minutes", from: "now-15m", to: "now" },
+  { label: "Last 1 hour", from: "now-1h", to: "now" },
+  { label: "Last 6 hours", from: "now-6h", to: "now" },
+  { label: "Last 24 hours", from: "now-24h", to: "now" },
+  { label: "Last 7 days", from: "now-7d", to: "now" },
+  { label: "Last 30 days", from: "now-30d", to: "now" }
+];
+function DataTableInner({
+  data,
+  columns: columnsInput,
+  loading = false,
+  loadingMessage = "Loading results…",
+  loadingRowCount = 8,
+  emptyMessage: _emptyMessage = "No data",
+  className,
+  autoFilter = false,
+  showGlobalFilter = true,
+  globalFilter,
+  onGlobalFilterChange,
+  globalFilterPlaceholder = "Search all columns…",
+  defaultSort,
+  filterBarProps,
+  externalSearch,
+  externalTimeRange,
+  externalFilters,
+  pagination,
+  getRowId,
+  onRowClick,
+  isRowClickable,
+  getRowHref,
+  renderExpandedRow,
+  detailStyle = "row",
+  detailDialogTitle,
+  detailDialogSize = "lg",
+  resizableColumns = true,
+  persistColumnWidths = true,
+  columnResizeStorageKey,
+  hideableColumns = true,
+  persistColumnVisibility = true,
+  columnVisibilityStorageKey,
+  density,
+  defaultDensity,
+  onDensityChange,
+  persistDensity = true,
+  densityStorageKey,
+  showDensityControl,
+  themeMenuValue,
+  onThemeChange,
+  showThemeControl = false,
+  showHeaderFilters = true
+}) {
+  const columns = react.useMemo(
+    () => columnsInput.map(
+      (column) => typeof column === "string" ? { key: column, label: column } : column
+    ),
+    [columnsInput]
+  );
+  const columnKeysSignature = react.useMemo(
+    () => columns.map((column) => column.key).join("|"),
+    [columns]
+  );
+  const resolvedColumnResizeStorageKey = columnResizeStorageKey ?? `${COLUMN_WIDTH_STORAGE_PREFIX}:${columnKeysSignature}`;
+  const resolvedColumnVisibilityStorageKey = columnVisibilityStorageKey ?? `${COLUMN_VISIBILITY_STORAGE_PREFIX}:${columnKeysSignature}`;
+  const resolvedDensityStorageKey = densityStorageKey ?? `${DENSITY_STORAGE_PREFIX}:${columnKeysSignature}`;
+  const [columnWidths, setColumnWidths] = react.useState(
+    () => persistColumnWidths ? readStoredColumnWidths(resolvedColumnResizeStorageKey, columns) : {}
+  );
+  const [hiddenColumns, setHiddenColumns] = react.useState(
+    () => persistColumnVisibility ? readStoredHiddenColumns(resolvedColumnVisibilityStorageKey, columns) : {}
+  );
+  const densityControlled = density !== void 0;
+  const [localDensityOverride, setLocalDensityOverride] = react.useState(() => {
+    if (densityControlled) return density;
+    if (persistDensity)
+      return readStoredDensityOverride(resolvedDensityStorageKey) ?? defaultDensity;
+    return defaultDensity;
+  });
+  const [columnMenu, setColumnMenu] = react.useState(null);
+  const [headerFilterMenu, setHeaderFilterMenu] = react.useState(null);
+  const [textFilters, setTextFilters] = react.useState({});
+  const [multiFilters, setMultiFilters] = react.useState({});
+  const [numberFilters, setNumberFilters] = react.useState({});
+  const [expandedRows, setExpandedRows] = react.useState({});
+  const [detailRow, setDetailRow] = react.useState(null);
+  const [localGlobalFilter, setLocalGlobalFilter] = react.useState("");
+  const [timeRangeFilter, setTimeRangeFilter] = react.useState(() => {
+    var _a, _b, _c, _d;
+    const seed = columns.find(
+      (column) => {
+        var _a2;
+        return column.kind === "timestamp" && ((_a2 = column.timestamp) == null ? void 0 : _a2.defaultRange);
+      }
+    );
+    return {
+      from: ((_b = (_a = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _a.defaultRange) == null ? void 0 : _b.from) ?? "",
+      to: ((_d = (_c = seed == null ? void 0 : seed.timestamp) == null ? void 0 : _c.defaultRange) == null ? void 0 : _d.to) ?? ""
+    };
+  });
+  react.useEffect(() => {
+    setColumnWidths((current) => {
+      const stored = persistColumnWidths ? readStoredColumnWidths(resolvedColumnResizeStorageKey, columns) : {};
+      const next = pruneColumnWidths({ ...stored, ...current }, columns);
+      return sameColumnWidths(current, next) ? current : next;
+    });
+  }, [columnKeysSignature, persistColumnWidths, resolvedColumnResizeStorageKey]);
+  react.useEffect(() => {
+    if (!persistColumnWidths) return;
+    writeStoredColumnWidths(resolvedColumnResizeStorageKey, columnWidths);
+  }, [columnWidths, persistColumnWidths, resolvedColumnResizeStorageKey]);
+  react.useEffect(() => {
+    setHiddenColumns((current) => {
+      const stored = persistColumnVisibility ? readStoredHiddenColumns(resolvedColumnVisibilityStorageKey, columns) : {};
+      const next = pruneHiddenColumns({ ...stored, ...current }, columns);
+      return sameHiddenColumns(current, next) ? current : next;
+    });
+  }, [columnKeysSignature, persistColumnVisibility, resolvedColumnVisibilityStorageKey]);
+  react.useEffect(() => {
+    if (!persistColumnVisibility) return;
+    writeStoredHiddenColumns(resolvedColumnVisibilityStorageKey, hiddenColumns);
+  }, [hiddenColumns, persistColumnVisibility, resolvedColumnVisibilityStorageKey]);
+  react.useEffect(() => {
+    if (densityControlled) return;
+    setLocalDensityOverride(
+      persistDensity ? readStoredDensityOverride(resolvedDensityStorageKey) ?? defaultDensity : defaultDensity
+    );
+  }, [defaultDensity, densityControlled, persistDensity, resolvedDensityStorageKey]);
+  react.useEffect(() => {
+    if (densityControlled || !persistDensity) return;
+    writeStoredDensityOverride(resolvedDensityStorageKey, localDensityOverride);
+  }, [densityControlled, localDensityOverride, persistDensity, resolvedDensityStorageKey]);
+  react.useEffect(() => {
+    if (!columnMenu && !headerFilterMenu) return;
+    const close = () => {
+      setColumnMenu(null);
+      setHeaderFilterMenu(null);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("click", close);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("click", close);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [columnMenu, headerFilterMenu]);
+  const rows = react.useMemo(
+    () => data.map((row, index) => ({
+      id: (getRowId == null ? void 0 : getRowId(row, index)) ?? String(index),
+      row
+    })),
+    [data, getRowId]
+  );
+  const timestampFormats = react.useMemo(() => {
+    var _a;
+    const out = {};
+    for (const column of columns) {
+      if (column.kind !== "timestamp") continue;
+      const dates = [];
+      for (const row of data) {
+        const raw = resolvePath(row, column.key);
+        const parsed = Timestamp.parseTimestamp(raw);
+        if (parsed) dates.push(parsed);
+      }
+      const dataFormat = Timestamp.chooseTimestampFormat(dates);
+      out[column.key] = Timestamp.modeToFormat(((_a = column.timestamp) == null ? void 0 : _a.mode) ?? "auto", dataFormat);
+    }
+    return out;
+  }, [columns, data]);
+  const effectiveColumns = react.useMemo(
+    () => columns.map((column) => applyKindDefaults(column, timestampFormats[column.key])),
+    [columns, timestampFormats]
+  );
+  const visibleColumns = react.useMemo(() => {
+    if (!hideableColumns) return effectiveColumns;
+    const next = effectiveColumns.filter((column) => !hiddenColumns[column.key]);
+    return next.length > 0 ? next : effectiveColumns;
+  }, [effectiveColumns, hiddenColumns, hideableColumns]);
+  const hideableColumnCount = react.useMemo(
+    () => effectiveColumns.filter(isColumnHideable).length,
+    [effectiveColumns]
+  );
+  const visibleHideableColumnCount = react.useMemo(
+    () => visibleColumns.filter(isColumnHideable).length,
+    [visibleColumns]
+  );
+  const showColumnVisibilityControl = hideableColumns && hideableColumnCount > 1;
+  const resolvedShowDensityControl = showDensityControl ?? showColumnVisibilityControl;
+  const showTablePreferencesControl = showColumnVisibilityControl || resolvedShowDensityControl || showThemeControl;
+  const densityOverride = densityControlled ? density : localDensityOverride;
+  const tagActionsByColumn = react.useMemo(() => {
+    const out = {};
+    for (const column of visibleColumns) {
+      if (column.kind !== "tags") continue;
+      const columnKey = column.key;
+      const current = multiFilters[columnKey] ?? {};
+      const handler = (next) => setMultiFilters((state) => updateFilterRecord(state, columnKey, next));
+      out[columnKey] = TagList.tagActionsFromRecord(current, handler);
+    }
+    return out;
+  }, [multiFilters, visibleColumns]);
+  const timeRangeColumn = react.useMemo(() => {
+    if (filterBarProps == null ? void 0 : filterBarProps.timeRange) return null;
+    return visibleColumns.find(
+      (column) => {
+        var _a;
+        return column.kind === "timestamp" && column.filterable !== false && ((_a = column.timestamp) == null ? void 0 : _a.autoRangeFilter) !== false;
+      }
+    ) ?? null;
+  }, [filterBarProps == null ? void 0 : filterBarProps.timeRange, visibleColumns]);
+  const filterableColumns = react.useMemo(
+    () => visibleColumns.filter((column) => {
+      if (column.filterable === false) return false;
+      if (column.kind === "timestamp") return false;
+      return true;
+    }),
+    [visibleColumns]
+  );
+  const generatedFilters = react.useMemo(() => {
+    if (!autoFilter || loading) return [];
+    return filterableColumns.map((column) => {
+      var _a;
+      const numberBounds = getNumericFilterBounds(rows, column);
+      if (numberBounds) {
+        return {
+          column,
+          kind: "number",
+          options: [],
+          numberBounds
+        };
+      }
+      const values = /* @__PURE__ */ new Set();
+      for (const record of rows) {
+        for (const token of getFilterTokens(record.row, column)) {
+          if (token) values.add(token);
+        }
+      }
+      const options = Array.from(values).sort((left, right) => left.localeCompare(right, void 0, { numeric: true })).map((value) => ({ value, label: value }));
+      const multiCap = column.kind === "tags" ? 50 : 20;
+      const fitsMulti = options.length >= 2 && options.length <= multiCap;
+      if (column.kind === "tags" && fitsMulti) {
+        const separator = ((_a = column.tags) == null ? void 0 : _a.separator) ?? "=";
+        const groups = groupTagOptions(options, separator);
+        if (groups.length >= 2) {
+          return {
+            column,
+            kind: "nested-multi",
+            options,
+            groups
+          };
+        }
+      }
+      return {
+        column,
+        kind: fitsMulti ? "multi" : "text",
+        options
+      };
+    });
+  }, [autoFilter, filterableColumns, loading, rows]);
+  react.useEffect(() => {
+    setTextFilters((current) => pruneTextFilterState(current, generatedFilters));
+    setMultiFilters((current) => pruneMultiFilterState(current, generatedFilters));
+    setNumberFilters((current) => pruneNumberFilterState(current, generatedFilters));
+  }, [generatedFilters]);
+  const globalFilterControlled = globalFilter !== void 0;
+  const effectiveGlobalFilter = globalFilterControlled ? globalFilter : localGlobalFilter;
+  const setEffectiveGlobalFilter = globalFilterControlled ? onGlobalFilterChange ?? (() => {
+  }) : setLocalGlobalFilter;
+  const nativeFilters = react.useMemo(
+    () => generatedFilters.map((filter) => {
+      var _a, _b, _c;
+      const columnKey = filter.column.key;
+      if (filter.kind === "multi") {
+        return {
+          key: columnKey,
+          kind: "multi",
+          label: labelText(filter.column),
+          value: multiFilters[columnKey] ?? {},
+          onChange: (next) => setMultiFilters((current) => updateFilterRecord(current, columnKey, next)),
+          options: filter.options
+        };
+      }
+      if (filter.kind === "nested-multi") {
+        return {
+          key: columnKey,
+          kind: "nested-multi",
+          label: labelText(filter.column),
+          value: multiFilters[columnKey] ?? {},
+          onChange: (next) => setMultiFilters((current) => updateFilterRecord(current, columnKey, next)),
+          groups: filter.groups ?? []
+        };
+      }
+      if (filter.kind === "number") {
+        const numberFilter = {
+          key: columnKey,
+          kind: "number",
+          label: labelText(filter.column),
+          value: numberFilters[columnKey] ?? {},
+          onChange: (next) => setNumberFilters((current) => updateNumberFilterValue(current, columnKey, next))
+        };
+        if (((_a = filter.numberBounds) == null ? void 0 : _a.min) !== void 0) {
+          numberFilter.domainMin = filter.numberBounds.min;
+        }
+        if (((_b = filter.numberBounds) == null ? void 0 : _b.max) !== void 0) {
+          numberFilter.domainMax = filter.numberBounds.max;
+        }
+        if (((_c = filter.numberBounds) == null ? void 0 : _c.step) !== void 0) {
+          numberFilter.step = filter.numberBounds.step;
+        }
+        return numberFilter;
+      }
+      return {
+        key: columnKey,
+        kind: "text",
+        label: labelText(filter.column),
+        value: textFilters[columnKey] ?? "",
+        onChange: (next) => setTextFilters((current) => updateFilterValue(current, columnKey, next))
+      };
+    }),
+    [generatedFilters, multiFilters, numberFilters, textFilters]
+  );
+  const nativeFilterByColumn = react.useMemo(
+    () => new Map(nativeFilters.map((filter) => [filter.key, filter])),
+    [nativeFilters]
+  );
+  const hasCustomFilterBarContent = Boolean(
+    (filterBarProps == null ? void 0 : filterBarProps.leading) || (filterBarProps == null ? void 0 : filterBarProps.children) || (filterBarProps == null ? void 0 : filterBarProps.trailing) || (filterBarProps == null ? void 0 : filterBarProps.timeRange) || (filterBarProps == null ? void 0 : filterBarProps.dateRange)
+  );
+  const autoTimeRange = react.useMemo(() => {
+    var _a, _b, _c, _d;
+    if (!autoFilter || !timeRangeColumn) return null;
+    const next = {
+      from: timeRangeFilter.from,
+      to: timeRangeFilter.to,
+      onApply: (from, to) => setTimeRangeFilter({ from, to }),
+      presets: ((_a = timeRangeColumn.timestamp) == null ? void 0 : _a.rangePresets) ?? TIMESTAMP_RANGE_PRESETS,
+      fromPlaceholder: "now-24h",
+      toPlaceholder: "now",
+      emptyLabel: "Any time"
+    };
+    if (((_b = timeRangeColumn.timestamp) == null ? void 0 : _b.timeEnabled) !== void 0) {
+      next.timeEnabled = timeRangeColumn.timestamp.timeEnabled;
+    }
+    if ((_c = timeRangeColumn.timestamp) == null ? void 0 : _c.timeZone) {
+      next.timeZone = timeRangeColumn.timestamp.timeZone;
+    }
+    if ((_d = timeRangeColumn.timestamp) == null ? void 0 : _d.timeZones) {
+      next.timeZones = timeRangeColumn.timestamp.timeZones;
+    }
+    return next;
+  }, [autoFilter, timeRangeColumn, timeRangeFilter.from, timeRangeFilter.to]);
+  const showFilterBar = autoFilter && (showGlobalFilter || nativeFilters.length > 0 || !!autoTimeRange) || !!externalSearch || !!externalTimeRange || externalFilters && externalFilters.length > 0 || hasCustomFilterBarContent || showTablePreferencesControl;
+  const setDensityOverride = (next) => {
+    if (!densityControlled) setLocalDensityOverride(next);
+    onDensityChange == null ? void 0 : onDensityChange(next);
+  };
+  const filterBarTrailing = showTablePreferencesControl ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    filterBarProps == null ? void 0 : filterBarProps.trailing,
+    /* @__PURE__ */ jsxRuntime.jsx(ColumnVisibilityTrigger, { onOpen: (event) => setColumnMenu(menuStateFromTrigger(event)) })
+  ] }) : filterBarProps == null ? void 0 : filterBarProps.trailing;
+  const showHeaderFilterControls = autoFilter && showHeaderFilters;
+  const filteredRows = react.useMemo(() => {
+    const globalNeedle = effectiveGlobalFilter.trim().toLowerCase();
+    const now = /* @__PURE__ */ new Date();
+    const rangeFromDate = timeRangeColumn ? Timestamp.resolveDateMath(timeRangeFilter.from, now) : null;
+    const rangeToDate = timeRangeColumn ? Timestamp.resolveDateMath(timeRangeFilter.to, now) : null;
+    const rangeColumnKey = timeRangeColumn == null ? void 0 : timeRangeColumn.key;
+    return rows.filter(({ row }) => {
+      if (rangeColumnKey && (rangeFromDate || rangeToDate)) {
+        const raw = resolvePath(row, rangeColumnKey);
+        const ts = Timestamp.parseTimestamp(raw);
+        if (!ts) return false;
+        if (rangeFromDate && ts.getTime() < rangeFromDate.getTime()) return false;
+        if (rangeToDate && ts.getTime() > rangeToDate.getTime()) return false;
+      }
+      if (globalNeedle) {
+        const haystack = filterableColumns.flatMap((column) => getFilterTokens(row, column)).join(" ").toLowerCase();
+        if (!haystack.includes(globalNeedle)) {
+          return false;
+        }
+      }
+      for (const filter of generatedFilters) {
+        const tokens = getFilterTokens(row, filter.column);
+        if (filter.kind === "text") {
+          const needle = (textFilters[filter.column.key] ?? "").trim().toLowerCase();
+          if (needle && !tokens.some((token) => token.toLowerCase().includes(needle))) {
+            return false;
+          }
+        } else if (filter.kind === "number") {
+          const range = numberFilters[filter.column.key] ?? {};
+          const min = parseNumberInput(range.min);
+          const max = parseNumberInput(range.max);
+          const hasMin = String(range.min ?? "").trim() !== "";
+          const hasMax = String(range.max ?? "").trim() !== "";
+          if (hasMin || hasMax) {
+            const values = getFilterNumbers(row, filter.column);
+            const matches = values.some(
+              (value) => (min == null || value >= min) && (max == null || value <= max)
+            );
+            if (!matches) {
+              return false;
+            }
+          }
+        } else {
+          const selected = multiFilters[filter.column.key] ?? {};
+          const include = Object.entries(selected).filter(([, mode]) => mode === "include").map(([value]) => value);
+          const exclude = Object.entries(selected).filter(([, mode]) => mode === "exclude").map(([value]) => value);
+          if (include.length > 0 && !tokens.some((token) => include.includes(token))) {
+            return false;
+          }
+          if (exclude.length > 0 && tokens.some((token) => exclude.includes(token))) {
+            return false;
+          }
+        }
+      }
+      return true;
+    });
+  }, [
+    effectiveGlobalFilter,
+    filterableColumns,
+    generatedFilters,
+    multiFilters,
+    numberFilters,
+    rows,
+    textFilters,
+    timeRangeColumn,
+    timeRangeFilter.from,
+    timeRangeFilter.to
+  ]);
+  const sortResolvers = react.useMemo(
+    () => Object.fromEntries(
+      effectiveColumns.map((column) => [
+        column.key,
+        (record) => getSortValue(record.row, column)
+      ])
+    ),
+    [effectiveColumns]
+  );
+  const { sorted, sort, toggle } = useSort.useSort(filteredRows, {
+    defaultDir: (defaultSort == null ? void 0 : defaultSort.dir) ?? "asc",
+    resolvers: sortResolvers,
+    ...(defaultSort == null ? void 0 : defaultSort.key) ? { defaultKey: defaultSort.key } : {}
+  });
+  const startColumnResize = (event, column) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const header = event.currentTarget.closest("th");
+    const measuredWidth = (header == null ? void 0 : header.getBoundingClientRect().width) ?? 0;
+    const startWidth = measuredWidth || columnWidths[column.key] || defaultColumnWidth(column);
+    const onMove = (moveEvent) => {
+      const nextWidth = clampColumnWidth(column, startWidth + moveEvent.clientX - startX);
+      setColumnWidths((current) => ({
+        ...current,
+        [column.key]: nextWidth
+      }));
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  };
+  const autoFitColumn = (event, column) => {
+    var _a;
+    event.preventDefault();
+    event.stopPropagation();
+    const header = event.currentTarget.closest("th");
+    const table = event.currentTarget.closest("table");
+    if (!header || !table) return;
+    const columnIndex = Array.from(((_a = header.parentElement) == null ? void 0 : _a.children) ?? []).indexOf(header);
+    if (columnIndex < 0) return;
+    const width = measureColumnContentWidth(table, columnIndex, column);
+    setColumnWidths((current) => ({
+      ...current,
+      [column.key]: width
+    }));
+  };
+  const toggleColumnVisibility = (column) => {
+    if (!isColumnHideable(column)) return;
+    setHiddenColumns((current) => {
+      const hidden = current[column.key] === true;
+      if (!hidden && visibleHideableColumnCount <= 1) return current;
+      const next = { ...current };
+      if (hidden) {
+        delete next[column.key];
+      } else {
+        next[column.key] = true;
+      }
+      return pruneHiddenColumns(next, columns);
+    });
+  };
+  const showAllColumns = () => setHiddenColumns({});
+  const openHeaderColumnMenu = (event, column) => {
+    if (!showColumnVisibilityControl) return;
+    event.preventDefault();
+    setColumnMenu(menuStateFromPointer(event, column.key));
+  };
+  const openHeaderFilterMenu = (event, columnKey) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setHeaderFilterMenu(menuStateFromTrigger(event, columnKey));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(useDensity.DensityValueProvider, { density: densityOverride ?? "comfortable", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex min-h-0 flex-col gap-3", className), "data-density": densityOverride, children: [
+    showFilterBar && /* @__PURE__ */ jsxRuntime.jsx(
+      FilterBar.FilterBar,
+      {
+        ...filterBarProps,
+        ...externalSearch ? { search: externalSearch } : autoFilter && showGlobalFilter ? {
+          search: {
+            value: effectiveGlobalFilter,
+            onChange: setEffectiveGlobalFilter,
+            placeholder: globalFilterPlaceholder
+          }
+        } : {},
+        ...externalTimeRange ? { timeRange: externalTimeRange } : autoTimeRange ? { timeRange: autoTimeRange } : {},
+        trailing: filterBarTrailing,
+        filters: externalFilters && externalFilters.length > 0 ? [...externalFilters, ...nativeFilters] : nativeFilters
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "min-h-0 flex-1 overflow-auto rounded-md border border-border",
+        "aria-busy": loading || void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-max table-auto text-left text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
+            "col",
+            {
+              style: columnStyle(column, columnWidths),
+              className: column.shrink && !column.grow ? "w-px" : void 0
+            },
+            column.key
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_var(--tw-shadow-color)] shadow-border", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border text-xs text-muted-foreground", children: visibleColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "th",
+            {
+              className: utils.cn(
+                "group/header relative whitespace-nowrap font-medium",
+                DATA_TABLE_HEADER_DENSITY_CLASS,
+                alignmentClass(column.align),
+                resizableColumns && column.resizable !== false && "select-none",
+                column.headerClassName
+              ),
+              onContextMenu: (event) => openHeaderColumnMenu(event, column),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: utils.cn(
+                      "flex min-w-0 items-center gap-1",
+                      headerAlignmentClass(column.align),
+                      resizableColumns && column.resizable !== false && "pr-2"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: column.sortable === false ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: column.label }) : /* @__PURE__ */ jsxRuntime.jsx(
+                        SortableHeader.SortableHeader,
+                        {
+                          active: (sort == null ? void 0 : sort.key) === column.key,
+                          ...(sort == null ? void 0 : sort.key) === column.key ? { dir: sort.dir } : {},
+                          ...column.align ? { align: column.align } : {},
+                          onClick: () => toggle(column.key),
+                          children: column.label
+                        }
+                      ) }),
+                      showHeaderFilterControls && (nativeFilterByColumn.has(column.key) || autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === column.key) && /* @__PURE__ */ jsxRuntime.jsx(
+                        HeaderFilterButton,
+                        {
+                          column,
+                          active: nativeFilterByColumn.has(column.key) ? FilterBar.isFilterBarFilterActive(nativeFilterByColumn.get(column.key)) : Boolean(timeRangeFilter.from || timeRangeFilter.to),
+                          onOpen: (event) => openHeaderFilterMenu(event, column.key)
+                        }
+                      )
+                    ]
+                  }
+                ),
+                resizableColumns && column.resizable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    role: "separator",
+                    "aria-label": `Resize ${labelText(column)} column`,
+                    "aria-orientation": "vertical",
+                    className: "absolute right-0 top-0 flex h-full w-3 cursor-col-resize touch-none items-center justify-center border-r border-border/70 bg-gradient-to-l from-border/30 to-transparent transition-colors hover:border-primary hover:from-primary/20",
+                    onClick: (event) => {
+                      event.preventDefault();
+                      event.stopPropagation();
+                    },
+                    onDoubleClick: (event) => autoFitColumn(event, column),
+                    onMouseDown: (event) => startColumnResize(event, column),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "h-4 w-0.5 rounded-full bg-border transition-colors group-hover/header:bg-primary/70"
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            column.key
+          )) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
+            DataTableLoadingRows,
+            {
+              columns: visibleColumns,
+              rowCount: loadingRowCount,
+              message: loadingMessage
+            }
+          ) : sorted.map((record) => {
+            const href = getRowHref == null ? void 0 : getRowHref(record.row);
+            const expanded = expandedRows[record.id] ?? false;
+            const expandedContent = (renderExpandedRow == null ? void 0 : renderExpandedRow(record.row, {
+              columns: effectiveColumns,
+              visibleColumns,
+              tagActionsByColumn
+            })) ?? null;
+            const expandable = expandedContent !== null;
+            const expandsInline = expandable && detailStyle === "row";
+            const opensDialog = expandable && detailStyle === "dialog";
+            const rowClickEnabled = (isRowClickable == null ? void 0 : isRowClickable(record.row)) ?? !!onRowClick;
+            const clickable = !!href || rowClickEnabled || expandable;
+            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "tr",
+                {
+                  className: utils.cn(
+                    "border-b border-border/60 align-top",
+                    clickable && "cursor-pointer hover:bg-accent/40"
+                  ),
+                  onClick: () => {
+                    if (expandsInline) {
+                      setExpandedRows((current) => ({
+                        ...current,
+                        [record.id]: !current[record.id]
+                      }));
+                    }
+                    if (opensDialog) {
+                      setDetailRow(record);
+                    }
+                    if (rowClickEnabled) {
+                      onRowClick == null ? void 0 : onRowClick(record.row);
+                    }
+                  },
+                  children: visibleColumns.map((column, index) => {
+                    const rawValue = resolvePath(record.row, column.key);
+                    let content = column.render ? column.render(rawValue, record.row) : formatCell(rawValue);
+                    if (column.kind === "tags" && tagActionsByColumn[column.key]) {
+                      content = /* @__PURE__ */ jsxRuntime.jsx(TagList.TagActionsProvider, { value: tagActionsByColumn[column.key], children: content });
+                    }
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      "td",
+                      {
+                        className: utils.cn(
+                          DATA_TABLE_CELL_DENSITY_CLASS,
+                          alignmentClass(column.align),
+                          column.cellClassName
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          CellContent,
+                          {
+                            column,
+                            ...columnWidths[column.key] !== void 0 ? { width: columnWidths[column.key] } : {},
+                            children: href && index === 0 ? /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: "hover:underline", children: content }) : content
+                          }
+                        )
+                      },
+                      column.key
+                    );
+                  })
+                }
+              ),
+              expandsInline && expanded && expandedContent && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: visibleColumns.length, className: "bg-muted/40 p-density-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border border-border bg-background p-density-3", children: expandedContent }) }) })
+            ] }, record.id);
+          }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 text-xs text-muted-foreground", children: loading ? loadingMessage : `${sorted.length} of ${data.length} row${data.length === 1 ? "" : "s"}` }),
+    pagination && /* @__PURE__ */ jsxRuntime.jsx(DataTablePaginationFooter, { pagination }),
+    detailStyle === "dialog" && renderExpandedRow && /* @__PURE__ */ jsxRuntime.jsx(
+      Modal.Modal,
+      {
+        open: detailRow !== null,
+        onClose: () => setDetailRow(null),
+        size: detailDialogSize,
+        ...detailRow ? {
+          title: typeof detailDialogTitle === "function" ? detailDialogTitle(detailRow.row) : detailDialogTitle
+        } : {},
+        children: detailRow ? renderExpandedRow(detailRow.row, {
+          columns: effectiveColumns,
+          visibleColumns,
+          tagActionsByColumn
+        }) : null
+      }
+    ),
+    columnMenu && showTablePreferencesControl && /* @__PURE__ */ jsxRuntime.jsx(
+      ColumnVisibilityMenu,
+      {
+        columns: effectiveColumns,
+        hiddenColumns,
+        anchor: columnMenu,
+        showColumnVisibilityControl,
+        showDensityControl: resolvedShowDensityControl,
+        showThemeControl,
+        themeMenuValue,
+        densityOverride,
+        visibleHideableColumnCount,
+        onToggle: toggleColumnVisibility,
+        onShowAll: showAllColumns,
+        onDensityChange: setDensityOverride,
+        ...onThemeChange ? { onThemeChange } : {},
+        onClose: () => setColumnMenu(null)
+      }
+    ),
+    headerFilterMenu && /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderFilterMenu,
+      {
+        filter: nativeFilterByColumn.get(headerFilterMenu.columnKey ?? ""),
+        ...autoTimeRange && (timeRangeColumn == null ? void 0 : timeRangeColumn.key) === headerFilterMenu.columnKey ? { timeRange: autoTimeRange } : {},
+        anchor: headerFilterMenu,
+        onClose: () => setHeaderFilterMenu(null)
+      }
+    )
+  ] }) });
+}
+const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+function DataTablePaginationFooter({ pagination }) {
+  const { page, pageSize, total, onPageChange, onPageSizeChange } = pagination;
+  const options = pagination.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+  const safePage = Math.max(0, page);
+  const totalPages = total != null && pageSize > 0 ? Math.max(1, Math.ceil(total / pageSize)) : void 0;
+  const atFirst = safePage === 0;
+  const atLast = totalPages != null ? safePage >= totalPages - 1 : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 px-1 text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          className: "rounded border border-border bg-background px-1 py-0.5 text-foreground",
+          value: pageSize,
+          onChange: (event) => onPageSizeChange(Number(event.target.value)),
+          children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          disabled: atFirst,
+          onClick: () => onPageChange(Math.max(0, safePage - 1)),
+          children: "Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Page ",
+        safePage + 1,
+        totalPages != null ? ` of ${totalPages}` : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "rounded border border-border px-2 py-0.5 disabled:opacity-50",
+          disabled: atLast,
+          onClick: () => onPageChange(safePage + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function DataTableLoadingRows({
+  columns,
+  rowCount,
+  message
+}) {
+  const safeRowCount = Math.max(1, rowCount);
+  const safeColumnCount = Math.max(1, columns.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60 bg-muted/20", children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: safeColumnCount, className: utils.cn(DATA_TABLE_CELL_DENSITY_CLASS, "p-0"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-1/2 animate-pulse rounded-full bg-primary/70" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "h-3 w-3 animate-spin rounded-full border-2 border-primary/30 border-t-primary"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: message })
+      ] })
+    ] }) }),
+    Array.from({ length: safeRowCount }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "border-b border-border/60", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        className: utils.cn(
+          DATA_TABLE_CELL_DENSITY_CLASS,
+          alignmentClass(column.align),
+          column.cellClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(CellContent, { column, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: utils.cn(
+              "block h-3 animate-pulse rounded-full bg-muted",
+              loadingSkeletonWidth(columnIndex)
+            )
+          }
+        ) })
+      },
+      column.key
+    )) }, rowIndex))
+  ] });
+}
+function HeaderFilterButton({
+  column,
+  active,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Open ${labelText(column)} column filter`,
+      "aria-haspopup": "dialog",
+      "aria-pressed": active,
+      className: utils.cn(
+        "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        active && "bg-accent text-foreground"
+      ),
+      onClick: onOpen,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-filter-icon-state": active ? "filled" : "outline", className: "inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: active ? UiFilter.UiFilterFilled : UiFilter.UiFilter, className: "text-xs" }) })
+    }
+  );
+}
+function HeaderFilterMenu({
+  filter,
+  timeRange,
+  anchor,
+  onClose
+}) {
+  if (!filter && !timeRange) return null;
+  const label = (filter == null ? void 0 : filter.label) ?? "Time range";
+  const timeRangeActive = Boolean((timeRange == null ? void 0 : timeRange.from) || (timeRange == null ? void 0 : timeRange.to));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": `${label} column filter`,
+      className: "fixed z-50 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+      style: { left: anchor.x, top: anchor.y },
+      onClick: (event) => event.stopPropagation(),
+      onContextMenu: (event) => event.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            filter && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+                onClick: () => FilterBar.clearFilterBarFilter(filter),
+                disabled: !FilterBar.isFilterBarFilterActive(filter),
+                children: "Clear all"
+              }
+            ),
+            timeRange && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded px-1.5 py-0.5 text-xs text-primary transition-colors hover:bg-accent focus:bg-accent focus:outline-none disabled:text-muted-foreground",
+                onClick: () => timeRange.onApply("", ""),
+                disabled: !timeRangeActive,
+                children: "Clear all"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Close column filter",
+                title: "Close",
+                className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                onClick: onClose,
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-sm" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          filter && /* @__PURE__ */ jsxRuntime.jsx(FilterBar.FilterBarFilterPanel, { filter, chrome: "embedded" }),
+          timeRange && /* @__PURE__ */ jsxRuntime.jsx(FilterBar.FilterBarRangePanel, { kind: "time", label: "Time range", ...timeRange })
+        ] })
+      ]
+    }
+  );
+}
+function ColumnVisibilityTrigger({
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Open column menu",
+      "aria-haspopup": "menu",
+      className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      onClick: (event) => {
+        event.stopPropagation();
+        onOpen(event);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiEllipsis.UiEllipsis, className: "text-sm" })
+    }
+  );
+}
+function ColumnVisibilityMenu({
+  columns,
+  hiddenColumns,
+  anchor,
+  showColumnVisibilityControl,
+  showDensityControl,
+  showThemeControl,
+  themeMenuValue,
+  densityOverride,
+  visibleHideableColumnCount,
+  onToggle,
+  onShowAll,
+  onDensityChange,
+  onThemeChange,
+  onClose
+}) {
+  const activeColumn = anchor.columnKey ? columns.find((column) => column.key === anchor.columnKey) : void 0;
+  const canHideActiveColumn = activeColumn && isColumnHideable(activeColumn) && visibleHideableColumnCount > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "menu",
+      "aria-label": "Column menu",
+      className: "fixed z-50 min-w-[16rem] rounded-md border border-border bg-popover p-1.5 text-popover-foreground shadow-lg shadow-black/5",
+      style: { left: anchor.x, top: anchor.y },
+      onClick: (event) => event.stopPropagation(),
+      onContextMenu: (event) => event.preventDefault(),
+      children: [
+        showColumnVisibilityControl && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Columns" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "rounded px-1.5 py-0.5 text-xs text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                onClick: onShowAll,
+                children: "Show all"
+              }
+            )
+          ] }),
+          activeColumn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                disabled: !canHideActiveColumn,
+                className: utils.cn(
+                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+                  !canHideActiveColumn && "cursor-not-allowed opacity-50"
+                ),
+                onClick: () => {
+                  if (!canHideActiveColumn) return;
+                  onToggle(activeColumn);
+                  onClose();
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiEyeClosed.UiEyeClosed, className: "text-sm text-muted-foreground" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    "Hide ",
+                    labelText(activeColumn)
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px bg-border" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-72 overflow-auto", children: columns.map((column) => {
+            const hideable = isColumnHideable(column);
+            const visible = hiddenColumns[column.key] !== true;
+            const disabled = !hideable || visible && visibleHideableColumnCount <= 1;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                className: utils.cn(
+                  "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground",
+                  disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      className: "h-4 w-4 rounded border-border",
+                      checked: visible,
+                      disabled,
+                      onChange: () => onToggle(column)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: labelText(column) })
+                ]
+              },
+              column.key
+            );
+          }) })
+        ] }),
+        showDensityControl && /* @__PURE__ */ jsxRuntime.jsx(
+          DensityMenuSection,
+          {
+            densityOverride,
+            separated: showColumnVisibilityControl,
+            onDensityChange
+          }
+        ),
+        showThemeControl && onThemeChange && /* @__PURE__ */ jsxRuntime.jsx(
+          ThemeMenuSection,
+          {
+            value: themeMenuValue ?? "system",
+            separated: showColumnVisibilityControl || showDensityControl,
+            onChange: onThemeChange
+          }
+        )
+      ]
+    }
+  );
+}
+function DensityMenuSection({
+  densityOverride,
+  separated,
+  onDensityChange
+}) {
+  const current = densityOverride ?? "inherit";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Density" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": current === "inherit",
+        className: densityMenuItemClassName(current === "inherit"),
+        onClick: () => onDensityChange(void 0),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiResizeVertical.UiResizeVertical, className: "text-sm text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: "Use page density" }),
+          current === "inherit" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+        ]
+      }
+    ),
+    DENSITY_OPTIONS.map((option) => {
+      const active = current === option.value;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active),
+          onClick: () => onDensityChange(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+function densityMenuItemClassName(active) {
+  return utils.cn(
+    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none",
+    active && "text-foreground"
+  );
+}
+const THEME_MENU_OPTIONS = [
+  { value: "system", icon: UiDesktop.UiDesktop, label: "Use system theme" },
+  { value: "light", icon: UiSun.UiSun, label: "Light" },
+  { value: "dark", icon: UiMoon.UiMoon, label: "Dark" }
+];
+function ThemeMenuSection({
+  value,
+  separated,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn(separated && "mt-1 border-t border-border pt-1"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: "Theme" }),
+    THEME_MENU_OPTIONS.map((option) => {
+      const active = value === option.value;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "menuitemradio",
+          "aria-checked": active,
+          className: densityMenuItemClassName(active),
+          onClick: () => onChange(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: option.icon, className: "text-sm text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }),
+            active ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-sm text-foreground" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block h-4 w-4", "aria-hidden": true })
+          ]
+        },
+        option.value
+      );
+    })
+  ] });
+}
+function CellContent({
+  column,
+  width,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(cellContentClassName(column, width), alignmentClass(column.align)),
+      style: cellContentStyle(width),
+      children
+    }
+  );
+}
+function getSortValue(row, column) {
+  const rawValue = resolvePath(row, column.key);
+  return column.sortValue ? column.sortValue(rawValue, row) : rawValue;
+}
+function getFilterCandidate(row, column) {
+  const rawValue = resolvePath(row, column.key);
+  return column.filterValue ? column.filterValue(rawValue, row) : rawValue;
+}
+function getFilterTokens(row, column) {
+  return normalizeTokens(getFilterCandidate(row, column));
+}
+function getFilterNumbers(row, column) {
+  return normalizeNumbers(getFilterCandidate(row, column));
+}
+function normalizeTokens(value) {
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => normalizeTokens(item)).filter(Boolean);
+  }
+  if (value == null) return [];
+  if (typeof value === "object") return [JSON.stringify(value)];
+  const token = String(value).trim();
+  return token ? [token] : [];
+}
+function normalizeNumbers(value) {
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => normalizeNumbers(item));
+  }
+  const parsed = parseNumberInput(value);
+  return parsed == null ? [] : [parsed];
+}
+function updateFilterValue(state, key, nextValue) {
+  const next = { ...state };
+  if (nextValue.trim()) {
+    next[key] = nextValue;
+  } else {
+    delete next[key];
+  }
+  return next;
+}
+function updateFilterRecord(state, key, nextValue) {
+  const next = { ...state };
+  if (Object.keys(nextValue).length > 0) {
+    next[key] = nextValue;
+  } else {
+    delete next[key];
+  }
+  return next;
+}
+function updateNumberFilterValue(state, key, nextValue) {
+  const next = { ...state };
+  const hasMin = String(nextValue.min ?? "").trim() !== "";
+  const hasMax = String(nextValue.max ?? "").trim() !== "";
+  if (hasMin || hasMax) {
+    next[key] = nextValue;
+  } else {
+    delete next[key];
+  }
+  return next;
+}
+function pruneTextFilterState(state, filters) {
+  return pruneFilterState(state, filters, "text", (value) => !String(value ?? "").trim());
+}
+function pruneMultiFilterState(state, filters) {
+  const allowed = new Set(
+    filters.filter((filter) => filter.kind === "multi" || filter.kind === "nested-multi").map((filter) => filter.column.key)
+  );
+  return Object.fromEntries(
+    Object.entries(state).filter(
+      ([key, value]) => allowed.has(key) && Object.keys(value).length > 0
+    )
+  );
+}
+function pruneNumberFilterState(state, filters) {
+  return pruneFilterState(
+    state,
+    filters,
+    "number",
+    (value) => !String(value.min ?? "").trim() && !String(value.max ?? "").trim()
+  );
+}
+function pruneFilterState(state, filters, kind, isEmpty) {
+  const allowed = new Set(
+    filters.filter((filter) => filter.kind === kind).map((filter) => filter.column.key)
+  );
+  return Object.fromEntries(
+    Object.entries(state).filter(([key, value]) => allowed.has(key) && !isEmpty(value))
+  );
+}
+function resolvePath(obj, path) {
+  return path.split(".").reduce((current, key) => {
+    if (current && typeof current === "object") {
+      return current[key];
+    }
+    return void 0;
+  }, obj);
+}
+function formatCell(value) {
+  if (value == null || value === "") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
+  }
+  if (typeof value === "boolean") return value ? "True" : "False";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function groupTagOptions(options, separator) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const { key } = TagList.splitTagToken(option.value, separator);
+    const list = byKey.get(key) ?? [];
+    list.push(option);
+    byKey.set(key, list);
+  }
+  return Array.from(byKey.entries()).sort(([a], [b]) => {
+    if (a === "" && b !== "") return 1;
+    if (b === "" && a !== "") return -1;
+    return a.localeCompare(b);
+  }).map(([groupKey, groupOptions]) => ({
+    groupKey,
+    label: groupKey === "" ? "Other" : groupKey,
+    options: groupOptions
+  }));
+}
+function applyKindDefaults(column, timestampFormat) {
+  if (!column.kind) return column;
+  if (column.kind === "timestamp") {
+    const format = timestampFormat ?? "iso";
+    return {
+      ...column,
+      render: column.render ?? ((value) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Timestamp.Timestamp,
+          {
+            value,
+            format,
+            showTitleOnHover: ((_a = column.timestamp) == null ? void 0 : _a.alwaysShowFullOnHover) !== false
+          }
+        );
+      }),
+      sortValue: column.sortValue ?? ((value) => {
+        var _a;
+        return ((_a = Timestamp.parseTimestamp(value)) == null ? void 0 : _a.getTime()) ?? null;
+      }),
+      filterValue: column.filterValue ?? ((value) => {
+        const parsed = Timestamp.parseTimestamp(value);
+        return parsed ? parsed.toISOString() : "";
+      })
+    };
+  }
+  if (column.kind === "tags") {
+    const opts = column.tags;
+    const separator = (opts == null ? void 0 : opts.separator) ?? "=";
+    return {
+      ...column,
+      render: column.render ?? ((value) => /* @__PURE__ */ jsxRuntime.jsx(
+        TagList.TagList,
+        {
+          tags: TagList.normalizeTags(value, separator),
+          maxVisible: (opts == null ? void 0 : opts.maxVisible) ?? 3
+        }
+      )),
+      filterValue: column.filterValue ?? ((value) => TagList.tagFilterTokens(value, separator)),
+      sortValue: column.sortValue ?? ((value) => TagList.tagFilterTokens(value, separator).length)
+    };
+  }
+  if (column.kind === "status") {
+    const opts = column.status;
+    const map = (opts == null ? void 0 : opts.map) ?? ((raw) => statusMapping.normalizeStatus(raw));
+    return {
+      ...column,
+      render: column.render ?? ((value, row) => {
+        var _a;
+        const status = map(value, row);
+        if (!status) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
+        const label = (opts == null ? void 0 : opts.showLabel) ? typeof value === "string" ? value : status : void 0;
+        const title = ((_a = opts == null ? void 0 : opts.title) == null ? void 0 : _a.call(opts, value, row)) ?? (typeof value === "string" ? value : void 0);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          StatusDot.StatusDot,
+          {
+            status,
+            ...label ? { label } : {},
+            ...title ? { title } : {}
+          }
+        );
+      }),
+      filterValue: column.filterValue ?? ((value, row) => {
+        const status = map(value, row);
+        return status ?? "";
+      }),
+      sortValue: column.sortValue ?? ((value, row) => map(value, row) ?? "")
+    };
+  }
+  return column;
+}
+function prettifyKey(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (value) => value.toUpperCase()).trim();
+}
+function labelText(column) {
+  if (typeof column.label === "string") return column.label;
+  return prettifyKey(column.key.split(".").at(-1) ?? column.key);
+}
+function isColumnHideable(column) {
+  return column.hideable !== false;
+}
+function menuStateFromPointer(event, columnKey) {
+  const padding = 8;
+  const width = 256;
+  const height = 320;
+  const viewportWidth = typeof window === "undefined" ? event.clientX + width : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? event.clientY + height : window.innerHeight;
+  const position = {
+    x: Math.max(padding, Math.min(event.clientX, viewportWidth - width - padding)),
+    y: Math.max(padding, Math.min(event.clientY, viewportHeight - height - padding))
+  };
+  return columnKey ? { ...position, columnKey } : position;
+}
+function menuStateFromTrigger(event, columnKey) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const padding = 8;
+  const width = 256;
+  const height = 320;
+  const viewportWidth = typeof window === "undefined" ? rect.right + width : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? rect.bottom + height : window.innerHeight;
+  const position = {
+    x: Math.max(padding, Math.min(rect.right - width, viewportWidth - width - padding)),
+    y: Math.max(padding, Math.min(rect.bottom + 6, viewportHeight - height - padding))
+  };
+  return columnKey ? { ...position, columnKey } : position;
+}
+function columnStyle(column, widths) {
+  const width = widths[column.key];
+  return width ? { width: `${width}px` } : void 0;
+}
+function measureColumnContentWidth(table, columnIndex, column) {
+  const cells = Array.from(table.querySelectorAll("th, td")).filter(
+    (cell) => cell instanceof HTMLTableCellElement && cell.cellIndex === columnIndex && cell.colSpan === 1
+  );
+  const measured = cells.reduce((current, cell) => {
+    const horizontalPadding = getHorizontalPadding(cell);
+    const contentWidths = Array.from(cell.children).map(
+      (child) => child instanceof HTMLElement ? child.scrollWidth + horizontalPadding : 0
+    );
+    return Math.max(current, cell.scrollWidth, ...contentWidths);
+  }, 0);
+  return clampColumnWidth(column, measured || defaultColumnWidth(column));
+}
+function getHorizontalPadding(element) {
+  if (typeof window === "undefined") return 0;
+  const styles = window.getComputedStyle(element);
+  return parseCssPixelValue(styles.paddingLeft) + parseCssPixelValue(styles.paddingRight);
+}
+function parseCssPixelValue(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function readStoredColumnWidths(storageKey, columns) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    return pruneColumnWidths(parsed, columns);
+  } catch {
+    return {};
+  }
+}
+function writeStoredColumnWidths(storageKey, widths) {
+  if (typeof window === "undefined") return;
+  try {
+    if (Object.keys(widths).length === 0) {
+      window.localStorage.removeItem(storageKey);
+    } else {
+      window.localStorage.setItem(storageKey, JSON.stringify(widths));
+    }
+  } catch {
+  }
+}
+function readStoredHiddenColumns(storageKey, columns) {
+  if (typeof window === "undefined") return {};
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    return pruneHiddenColumns(parsed, columns);
+  } catch {
+    return {};
+  }
+}
+function writeStoredHiddenColumns(storageKey, hiddenColumns) {
+  if (typeof window === "undefined") return;
+  try {
+    if (Object.keys(hiddenColumns).length === 0) {
+      window.localStorage.removeItem(storageKey);
+    } else {
+      window.localStorage.setItem(storageKey, JSON.stringify(hiddenColumns));
+    }
+  } catch {
+  }
+}
+function readStoredDensityOverride(storageKey) {
+  if (typeof window === "undefined") return void 0;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    return isDensity(raw) ? raw : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStoredDensityOverride(storageKey, density) {
+  if (typeof window === "undefined") return;
+  try {
+    if (density) {
+      window.localStorage.setItem(storageKey, density);
+    } else {
+      window.localStorage.removeItem(storageKey);
+    }
+  } catch {
+  }
+}
+function isDensity(value) {
+  return value === "compact" || value === "comfortable" || value === "spacious";
+}
+function pruneColumnWidths(widths, columns) {
+  const byKey = new Map(columns.map((column) => [column.key, column]));
+  const next = {};
+  for (const [key, width] of Object.entries(widths)) {
+    const column = byKey.get(key);
+    if (!column || typeof width !== "number" || !Number.isFinite(width)) continue;
+    next[key] = clampColumnWidth(column, width);
+  }
+  return next;
+}
+function pruneHiddenColumns(hiddenColumns, columns) {
+  const byKey = new Map(columns.map((column) => [column.key, column]));
+  const next = {};
+  for (const [key, hidden] of Object.entries(hiddenColumns)) {
+    const column = byKey.get(key);
+    if (!column || hidden !== true || !isColumnHideable(column)) continue;
+    next[key] = true;
+  }
+  const hideable = columns.filter(isColumnHideable);
+  const visibleHideableCount = hideable.filter((column) => next[column.key] !== true).length;
+  if (hideable.length > 0 && visibleHideableCount === 0) {
+    delete next[hideable[0].key];
+  }
+  return next;
+}
+function sameColumnWidths(left, right) {
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every(
+    (key) => Object.prototype.hasOwnProperty.call(right, key) && left[key] === right[key]
+  );
+}
+function sameHiddenColumns(left, right) {
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every(
+    (key) => Object.prototype.hasOwnProperty.call(right, key) && left[key] === right[key]
+  );
+}
+function defaultColumnWidth(column) {
+  if (column.grow) return DEFAULT_GROW_COLUMN_WIDTH;
+  if (column.shrink) return DEFAULT_SHRINK_COLUMN_WIDTH;
+  return DEFAULT_COLUMN_WIDTH;
+}
+function clampColumnWidth(column, width) {
+  const minWidth = column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH;
+  const maxWidth = column.maxWidth;
+  const minimum = Number.isFinite(minWidth) ? Math.max(1, minWidth) : DEFAULT_COLUMN_MIN_WIDTH;
+  const maximum = maxWidth != null && Number.isFinite(maxWidth) ? Math.max(minimum, maxWidth) : Infinity;
+  return Math.round(Math.max(minimum, Math.min(maximum, width)));
+}
+function getNumericFilterBounds(rows, column) {
+  const values = rows.flatMap(
+    (record) => collectFilterValues(getFilterCandidate(record.row, column))
+  );
+  const populated = values.filter(hasFilterValue);
+  const numericValues = populated.map((value) => parseNumberInput(value)).filter((value) => value != null);
+  if (populated.length === 0 || numericValues.length !== populated.length) {
+    return null;
+  }
+  return {
+    min: Math.min(...numericValues),
+    max: Math.max(...numericValues),
+    step: inferNumericStep(numericValues)
+  };
+}
+function collectFilterValues(value) {
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => collectFilterValues(item));
+  }
+  return [value];
+}
+function hasFilterValue(value) {
+  return value != null && !(typeof value === "string" && value.trim() === "");
+}
+function parseNumberInput(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  const parsed = Number(trimmed);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function inferNumericStep(values) {
+  if (values.every(Number.isInteger)) {
+    return 1;
+  }
+  const maxFractionDigits = values.reduce((current, value) => {
+    const [, fraction = ""] = String(value).split(".");
+    return Math.max(current, fraction.length);
+  }, 0);
+  return 10 ** -Math.min(maxFractionDigits || 2, 6);
+}
+function alignmentClass(align) {
+  if (align === "right") return "text-right";
+  if (align === "center") return "text-center";
+  return "text-left";
+}
+function headerAlignmentClass(align) {
+  if (align === "right") return "justify-end";
+  if (align === "center") return "justify-center";
+  return "justify-start";
+}
+function loadingSkeletonWidth(index) {
+  return ["w-24", "w-40", "w-28", "w-56", "w-32", "w-48"][index % 6];
+}
+function cellContentStyle(width) {
+  return width ? { maxWidth: `${width}px` } : void 0;
+}
+function cellContentClassName(column, width) {
+  const resized = width !== void 0;
+  const base = "w-full truncate";
+  if (column.grow) return utils.cn(base, resized ? "min-w-0" : "min-w-56 max-w-[36rem]");
+  if (column.shrink) return utils.cn(base, "min-w-0 whitespace-nowrap", !resized && "max-w-[16rem]");
+  return utils.cn(base, "min-w-0", !resized && "max-w-[18rem]");
+}
+function inferColumns(data) {
+  if (data.length === 0) return [];
+  const keys = /* @__PURE__ */ new Set();
+  for (const row of data.slice(0, 20)) {
+    Object.keys(row).filter((key) => !key.startsWith("_")).forEach((key) => keys.add(key));
+  }
+  return Array.from(keys).map((key) => ({
+    key,
+    label: prettifyKey(key),
+    sortable: true,
+    filterable: true
+  }));
+}
+function DataTable({
+  theme: themeProp = "system",
+  onThemeChange,
+  showThemeControl = false,
+  showFullscreenControl = false,
+  fullscreenTitle = "Table",
+  fullscreenButtonLabel = "Open table full screen",
+  className,
+  filterBarProps,
+  ...inner
+}) {
+  const themeControlled = onThemeChange !== void 0;
+  const [internalTheme, setInternalTheme] = react.useState(themeProp);
+  const themeValue = themeControlled ? themeProp : internalTheme;
+  const resolvedTheme = useTheme.useResolvedTheme(themeValue);
+  const handleThemeChange = (next) => {
+    if (!themeControlled) setInternalTheme(next);
+    onThemeChange == null ? void 0 : onThemeChange(next);
+  };
+  const [fullscreenOpen, setFullscreenOpen] = react.useState(false);
+  const renderTable = ({ inFullscreen }) => {
+    const showFullscreenButton = showFullscreenControl && !inFullscreen;
+    const callerTrailing = filterBarProps == null ? void 0 : filterBarProps.trailing;
+    const mergedFilterBarProps = showFullscreenButton ? {
+      ...filterBarProps,
+      trailing: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        callerTrailing,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FullscreenButton,
+          {
+            label: fullscreenButtonLabel,
+            onClick: () => setFullscreenOpen(true)
+          }
+        )
+      ] })
+    } : filterBarProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DataTableInner,
+      {
+        ...inner,
+        ...mergedFilterBarProps ? { filterBarProps: mergedFilterBarProps } : {},
+        themeMenuValue: themeValue,
+        showThemeControl,
+        onThemeChange: handleThemeChange
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-theme": resolvedTheme,
+      className: utils.cn("flex min-h-0 flex-col text-foreground", className),
+      children: [
+        renderTable({ inFullscreen: false }),
+        showFullscreenControl && /* @__PURE__ */ jsxRuntime.jsx(
+          Modal.Modal,
+          {
+            open: fullscreenOpen,
+            onClose: () => setFullscreenOpen(false),
+            title: fullscreenTitle,
+            size: "full",
+            className: "h-[95vh]",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-theme": resolvedTheme,
+                className: "flex h-full min-h-0 flex-col bg-background text-foreground",
+                children: renderTable({ inFullscreen: true })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FullscreenButton({ label, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      className: "inline-flex h-8 w-8 items-center justify-center rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFullscreen.UiFullscreen, className: "text-sm" })
+    }
+  );
+}
+exports.DataTable = DataTable;
+exports.inferColumns = inferColumns;
+//# sourceMappingURL=DataTable.cjs.map