@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-EHMQQHYR.js

@@ -0,0 +1,1652 @@
+import { Menu } from './chunk-FBZAKNSX.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
+import { Modal } from './chunk-2EOKFKHX.js';
+import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { Checkbox } from './chunk-2PRH365R.js';
+import { useClipboard } from './chunk-V663QU4R.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DataTable-ITNACQ2X.css';
+import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
+import { createPortal } from 'react-dom';
+import { CheckGlyph, ErrorGlyph, ContentCopyGlyph, KeyboardDoubleArrowLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, KeyboardDoubleArrowRightGlyph, SettingsGlyph, DragIndicatorGlyph, KeyboardArrowUpGlyph, KeyboardArrowDownGlyph, DeleteGlyph, ArrowUpwardGlyph, ArrowDownwardGlyph, UnfoldMoreGlyph, SettingsBackupRestoreGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CopyableCell = ({
+  value,
+  children,
+  ariaLabel,
+  copiedLabel = "Copied",
+  failedLabel = "Copy failed"
+}) => {
+  const text = value === void 0 || value === null ? "" : String(value);
+  const clipboard = useClipboard();
+  const onCopy = (event) => {
+    event.stopPropagation();
+    if (!text) return;
+    void clipboard.copy(text);
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__copy-cell", children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__copy-cell-value", children }),
+    text && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `crewlet-data-table__copy-cell-button${clipboard.state === "copied" ? " is-copied" : ""}${clipboard.state === "failed" ? " is-failed" : ""}`,
+          onClick: onCopy,
+          "aria-label": ariaLabel || "Copy to clipboard",
+          title: ariaLabel || "Copy to clipboard",
+          children: clipboard.state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : clipboard.state === "failed" ? /* @__PURE__ */ jsx(ErrorGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ContentCopyGlyph, { size: "sm" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: clipboard.state === "copied" ? copiedLabel : clipboard.state === "failed" ? failedLabel : "" }) })
+    ] })
+  ] });
+};
+function entriesFor(action, index) {
+  const key = `${index}:${action.label}`;
+  const item = {
+    key,
+    label: action.label,
+    icon: action.icon,
+    // An action with nothing to do still draws, because `disabled` is what
+    // says why it cannot be pressed; an empty handler is never called.
+    onSelect: action.onClick ?? (() => {
+    }),
+    disabled: action.disabled,
+    danger: action.danger,
+    description: action.description
+  };
+  return [
+    ...action.divider === "before" ? [{ kind: "separator", key: `${key}:before` }] : [],
+    item,
+    ...action.divider === "after" ? [{ kind: "separator", key: `${key}:after` }] : []
+  ];
+}
+var RowActionsMenu = ({ actions, label = "Row actions" }) => {
+  const items = (actions || []).filter((action) => !!action && action.visible !== false).flatMap(entriesFor);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(Menu, { label, items, align: "end", className: "crewlet-data-table__row-actions" });
+};
+function cellValue(row, key) {
+  return row?.[key];
+}
+function readStored(storageKey, name) {
+  if (!storageKey) return null;
+  try {
+    return globalThis.localStorage?.getItem(`${storageKey}_${name}`) ?? null;
+  } catch {
+    return null;
+  }
+}
+function writeStored(storageKey, name, value) {
+  if (!storageKey) return;
+  try {
+    globalThis.localStorage?.setItem(`${storageKey}_${name}`, value);
+  } catch {
+  }
+}
+function removeStored(storageKey, name) {
+  if (!storageKey) return;
+  try {
+    globalThis.localStorage?.removeItem(`${storageKey}_${name}`);
+  } catch {
+  }
+}
+function readStoredJson(storageKey, name, valid) {
+  const raw = readStored(storageKey, name);
+  if (raw === null) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    return valid(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function isNumberRecord(value) {
+  return isPlainObject(value) && Object.values(value).every((entry) => typeof entry === "number");
+}
+function isBooleanRecord(value) {
+  return isPlainObject(value) && Object.values(value).every((entry) => typeof entry === "boolean");
+}
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((entry) => typeof entry === "string");
+}
+function isAbsent(value) {
+  return value === null || value === void 0 || typeof value === "number" && Number.isNaN(value);
+}
+function compareValues(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a < b ? -1 : a > b ? 1 : 0;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
+}
+function reconcileOrder(current, declared) {
+  const known = new Set(declared);
+  const kept = current.filter((key) => known.has(key));
+  if (kept.length === declared.length) return kept;
+  const out = [...kept];
+  declared.forEach((key, index) => {
+    if (out.includes(key)) return;
+    let at = 0;
+    for (let earlier = index - 1; earlier >= 0; earlier -= 1) {
+      const where = out.indexOf(declared[earlier]);
+      if (where >= 0) {
+        at = where + 1;
+        break;
+      }
+    }
+    out.splice(at, 0, key);
+  });
+  return out;
+}
+var ALL_ITEMS = "all";
+var DATA_TABLE_LABELS = {
+  settings: "Table settings",
+  /*
+   * THE WORDS THE PRODUCT ALREADY SHIPS. The frame's title, its column
+   * section, that section's hint and the reset button are the four strings an
+   * operator reads on every table in the product today, so they are spelt here
+   * exactly as they are spelt there. `Reset to Default` is also the more
+   * accurate of the two: the button puts the page size, the wrapping, the sort
+   * and the widths back as well as the columns, which `Reset columns` says
+   * less than half of.
+   */
+  resetColumns: "Reset to Default",
+  resetConfirmed: "Settings reset to default",
+  cancel: "Cancel",
+  apply: "Apply",
+  settingsTitle: "Table Settings",
+  itemsPerPage: "Items per page",
+  allItems: "All",
+  allItemsCount: (rows) => `${rows.toLocaleString()} rows`,
+  wrapLines: "Wrap lines",
+  wrapLinesHint: "Wrap the content of a cell instead of truncating it.",
+  columnsSection: "Column Order & Visibility",
+  /*
+   * THE HINT IS THE POINTER'S, AND THE KEYBOARD'S PATH IS ON THE CONTROLS
+   * THEMSELVES. Naming Move up and Move down here read as the only way in for
+   * somebody who could see the row, and said nothing to a reader who cannot:
+   * a paragraph above a list is not where a screen reader looks for what a
+   * control does. The handle's own name and `reorderHint` carry it now, so
+   * the keyboard path arrives at the control it belongs to.
+   */
+  columnsHint: "Drag to reorder, check/uncheck to show/hide",
+  moveUp: (column) => `Move ${column} up`,
+  moveDown: (column) => `Move ${column} down`,
+  atTop: (column) => `${column} is already first`,
+  atBottom: (column) => `${column} is already last`,
+  reorder: (column) => `Reorder ${column}`,
+  reorderHint: "Press the up or down arrow key to move this column.",
+  columnMoved: (column, position, of) => `${column} moved to position ${position} of ${of}`,
+  columnAlwaysShown: "This column is always shown.",
+  columnLastShown: "At least one column stays shown.",
+  pagination: "Pagination",
+  firstPage: "First page",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  lastPage: "Last page",
+  page: (page, of) => `Page ${page} of ${of}`,
+  pageRange: (from, to, total) => `Rows ${from} to ${to} of ${total}`,
+  expandRow: "Expand row",
+  collapseRow: "Collapse row",
+  expandAll: "Expand all rows",
+  collapseAll: "Collapse all rows",
+  resize: (column) => `Resize ${column}`,
+  resizeWidth: (pixels) => `${pixels} pixels`,
+  copyCell: (column) => `Copy ${column}`,
+  rowActions: "Row actions",
+  actions: "Actions",
+  archivedRow: (label) => `This row is ${label}`,
+  absent: "Not reported",
+  loading: "Loading rows",
+  tone: { info: "Active", warning: "Needs attention", danger: "Failed" }
+};
+var DataTable = ({
+  data = [],
+  columns = {},
+  storageKey,
+  defaultColumnOrder = null,
+  columnOrder: columnOrderProp,
+  onColumnOrderChange,
+  defaultItemsPerPage = 10,
+  itemsPerPage: itemsPerPageProp,
+  onItemsPerPageChange,
+  page: pageProp,
+  onPageChange,
+  pageCount,
+  minColumnWidth = 80,
+  resizable = true,
+  itemsPerPageOptions = [5, 10, 20, 50, 100],
+  onRowAction = null,
+  actionLabel = "Delete",
+  actionIcon = /* @__PURE__ */ jsx(DeleteGlyph, { size: "md" }),
+  getRowKey,
+  rowKey,
+  emptyMessage = "No data available",
+  endMessage,
+  showActions = true,
+  className = "",
+  variant = "default",
+  density = "compact",
+  maxBodyHeight,
+  sort: sortProp,
+  onSortChange,
+  defaultSort = null,
+  sortCycle = "asc-desc-none",
+  stableOrder = false,
+  rowActions,
+  archivedPredicate,
+  archivedLabel = "archived",
+  loading = false,
+  skeletonRows = 5,
+  error = null,
+  paginated = true,
+  showSettings = true,
+  onRowClick,
+  getRowHref,
+  rowTone,
+  isSelected,
+  renderAccessoryRow,
+  renderToolbar,
+  renderFilterBar,
+  onClearFilters,
+  filtersActive = false,
+  clearFiltersLabel = "Clear filters",
+  filterKey,
+  visibleColumns: visibleColumnsProp,
+  onVisibleColumnsChange,
+  renderExpandedRow,
+  defaultExpandedKey = null,
+  hasMore = false,
+  onLoadMore,
+  loadingMore = false,
+  loadMoreLabel = "Load more",
+  title,
+  description,
+  icon,
+  defaultWrapLines,
+  labels: labelOverrides
+}) => {
+  const labels = labelOverrides ? { ...DATA_TABLE_LABELS, ...labelOverrides, tone: { ...DATA_TABLE_LABELS.tone, ...labelOverrides.tone } } : DATA_TABLE_LABELS;
+  const effectiveDefaultWrapLines = defaultWrapLines ?? true;
+  const resolveRowKey = (row) => {
+    if (getRowKey) return getRowKey(row);
+    if (rowKey) return cellValue(row, rowKey);
+    return cellValue(row, "id");
+  };
+  const isCompact = variant === "compact";
+  const hasActionColumn = !!rowActions || showActions && !!onRowAction;
+  const expandable = !!renderExpandedRow;
+  const settingsEnabled = showSettings;
+  const paginationEnabled = paginated;
+  const settingsInHeader = settingsEnabled && !isCompact;
+  const hasChromeColumn = hasActionColumn || settingsInHeader;
+  const generateDefaultColumnWidths = () => {
+    const widths = {};
+    Object.keys(columns).forEach((key) => {
+      const col = columns[key];
+      const rawExplicit = col?.width ?? col?.defaultWidth;
+      let px = null;
+      if (rawExplicit != null) {
+        const parsed = typeof rawExplicit === "number" ? rawExplicit : parseInt(String(rawExplicit), 10);
+        if (Number.isFinite(parsed)) px = parsed;
+      }
+      if (px == null) {
+        const labelStr = typeof col?.label === "string" ? col.label : key;
+        const estimated = Math.ceil(labelStr.length * 7.5) + 56;
+        px = Math.max(120, estimated);
+      }
+      widths[key] = Math.max(minColumnWidth, px);
+    });
+    if (showActions) {
+      widths.__actions = 60;
+    }
+    return widths;
+  };
+  const generateDefaultVisibleColumns = () => {
+    const visible = {};
+    Object.keys(columns).forEach((key) => {
+      visible[key] = columns[key]?.defaultVisible !== false;
+    });
+    return visible;
+  };
+  const generateDefaultColumnOrder = () => {
+    return defaultColumnOrder || Object.keys(columns);
+  };
+  const defaultColumnWidths = generateDefaultColumnWidths();
+  const defaultVisibleColumns = generateDefaultVisibleColumns();
+  const defaultOrder = generateDefaultColumnOrder();
+  const readResizedColumns = () => {
+    const saved = readStoredJson(storageKey, "resizedColumns", isNumberRecord);
+    if (!saved) return {};
+    const kept = {};
+    Object.entries(saved).forEach(([key, px]) => {
+      if (!Number.isFinite(px)) return;
+      const col = columns[key];
+      if (!col || col.width != null) return;
+      kept[key] = Math.max(minColumnWidth, px);
+    });
+    return kept;
+  };
+  const [columnWidths, setColumnWidths] = useState(
+    () => ({ ...defaultColumnWidths, ...readResizedColumns() })
+  );
+  const [resizedColumns, setResizedColumns] = useState(
+    () => Object.fromEntries(Object.keys(readResizedColumns()).map((key) => [key, true]))
+  );
+  const markResized = useCallback((columnKey) => {
+    setResizedColumns((was) => was[columnKey] ? was : { ...was, [columnKey]: true });
+  }, []);
+  const [ownItemsPerPage, setOwnItemsPerPage] = useState(() => {
+    if (itemsPerPageProp !== void 0) return defaultItemsPerPage;
+    const saved = readStored(storageKey, "itemsPerPage");
+    if (saved === ALL_ITEMS) return ALL_ITEMS;
+    const count = Number.parseInt(saved ?? "", 10);
+    return Number.isFinite(count) && count > 0 ? count : defaultItemsPerPage;
+  });
+  const itemsPerPage = itemsPerPageProp ?? ownItemsPerPage;
+  const commitItemsPerPage = (next) => {
+    if (itemsPerPageProp === void 0) setOwnItemsPerPage(next);
+    onItemsPerPageChange?.(next);
+  };
+  const [ownVisibleColumns, setOwnVisibleColumns] = useState(() => {
+    const saved = visibleColumnsProp === void 0 ? readStoredJson(storageKey, "visibleColumns", isBooleanRecord) : null;
+    if (!saved) return defaultVisibleColumns;
+    const valid = {};
+    Object.keys(columns).forEach((key) => {
+      valid[key] = Object.prototype.hasOwnProperty.call(saved, key) ? saved[key] : columns[key]?.defaultVisible !== false;
+    });
+    return valid;
+  });
+  const visibleColumns = visibleColumnsProp ?? ownVisibleColumns;
+  const isColumnVisible = (key) => visibleColumns[key] !== false;
+  const commitVisibleColumns = (next) => {
+    if (visibleColumnsProp === void 0) setOwnVisibleColumns(next);
+    onVisibleColumnsChange?.(next);
+  };
+  const [ownColumnOrder, setOwnColumnOrder] = useState(() => {
+    const saved = columnOrderProp === void 0 ? readStoredJson(storageKey, "columnOrder", isStringArray) : null;
+    if (!saved) return defaultOrder;
+    const validOrder = saved.filter((key) => Object.prototype.hasOwnProperty.call(columns, key));
+    const newColumns = defaultOrder.filter((key) => !validOrder.includes(key));
+    return validOrder.length > 0 ? [...validOrder, ...newColumns] : defaultOrder;
+  });
+  const declaredOrder = defaultOrder.join("\0");
+  const arrangedOrder = columnOrderProp ?? ownColumnOrder;
+  const columnOrder = useMemo(
+    () => reconcileOrder(arrangedOrder, declaredOrder === "" ? [] : declaredOrder.split("\0")),
+    [arrangedOrder, declaredOrder]
+  );
+  const commitColumnOrder = (next) => {
+    if (columnOrderProp === void 0) setOwnColumnOrder(next);
+    onColumnOrderChange?.(next);
+  };
+  const [sortConfig, setSortConfig] = useState(
+    () => ({ key: defaultSort?.key ?? null, direction: defaultSort?.direction ?? null })
+  );
+  const [tableSettingsOpen, setTableSettingsOpen] = useState(false);
+  const [wrapLines, setWrapLines] = useState(() => {
+    if (!storageKey) return effectiveDefaultWrapLines;
+    const saved = readStored(storageKey, "wrapLines");
+    return saved == null ? effectiveDefaultWrapLines : saved === "true";
+  });
+  const [draftItemsPerPage, setDraftItemsPerPage] = useState(0);
+  const [draftWrapLines, setDraftWrapLines] = useState(effectiveDefaultWrapLines);
+  const [draftColumnWidths, setDraftColumnWidths] = useState({});
+  const [draftVisibleColumns, setDraftVisibleColumns] = useState({});
+  const [draftColumnOrder, setDraftColumnOrder] = useState([]);
+  const [draftSortConfig, setDraftSortConfig] = useState(
+    { key: null, direction: null }
+  );
+  const [resetConfirmed, setResetConfirmed] = useState(false);
+  const resetConfirmTimer = useRef(null);
+  const pendingFitOnApplyRef = useRef(false);
+  const [expandedKeys, setExpandedKeys] = useState(
+    () => defaultExpandedKey != null ? /* @__PURE__ */ new Set([defaultExpandedKey]) : /* @__PURE__ */ new Set()
+  );
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+  const [draggedColumn, setDraggedColumn] = useState(null);
+  const [resizingColumn, setResizingColumn] = useState(null);
+  const [startX, setStartX] = useState(0);
+  const [startWidth, setStartWidth] = useState(0);
+  const dragTimeoutRef = useRef(null);
+  const settingsButtonRef = useRef(null);
+  const scrollRef = useRef(null);
+  const [fitRequests, setFitRequests] = useState(0);
+  const requestFit = useCallback(() => setFitRequests((n) => n + 1), []);
+  const emptyCellRef = useRef(null);
+  const [emptySaid, setEmptySaid] = useState("");
+  const resetToDefault = () => {
+    const newDefaultWidths = generateDefaultColumnWidths();
+    const newDefaultVisible = generateDefaultVisibleColumns();
+    const newDefaultOrder = generateDefaultColumnOrder();
+    setColumnWidths(newDefaultWidths);
+    setResizedColumns({});
+    commitVisibleColumns(newDefaultVisible);
+    commitColumnOrder(newDefaultOrder);
+    commitItemsPerPage(defaultItemsPerPage);
+    setSortConfig({ key: defaultSort?.key ?? null, direction: defaultSort?.direction ?? null });
+    requestFit();
+    for (const name of ["resizedColumns", "visibleColumns", "columnOrder", "itemsPerPage"]) {
+      removeStored(storageKey, name);
+    }
+  };
+  const fitInputs = useRef({
+    columns,
+    columnOrder,
+    visibleColumns,
+    columnWidths,
+    resizedColumns,
+    expandable,
+    hasChromeColumn,
+    isCompact,
+    minColumnWidth
+  });
+  fitInputs.current = {
+    columns,
+    columnOrder,
+    visibleColumns,
+    columnWidths,
+    resizedColumns,
+    expandable,
+    hasChromeColumn,
+    isCompact,
+    minColumnWidth
+  };
+  useLayoutEffect(() => {
+    const { columns: columns2, columnOrder: columnOrder2, visibleColumns: visibleColumns2, columnWidths: columnWidths2, resizedColumns: resizedColumns2, expandable: expandable2, hasChromeColumn: hasChromeColumn2, isCompact: isCompact2, minColumnWidth: minColumnWidth2 } = fitInputs.current;
+    const el = scrollRef.current;
+    if (!el) return;
+    const box = el.getBoundingClientRect();
+    const edges = Math.max(0, el.offsetWidth - el.clientWidth);
+    const measured = box.width - edges;
+    const containerWidth = measured > 0 ? Math.floor(measured) : el.clientWidth;
+    if (containerWidth <= 0) return;
+    const visibleAllKeys = columnOrder2.filter((key) => visibleColumns2[key] !== false);
+    const isFixedWidthColumn = (key) => {
+      const col = columns2[key];
+      if (!col) return false;
+      if (col.sticky === "right") return false;
+      return col.width != null || resizedColumns2[key] === true;
+    };
+    const visibleStickyKeys = visibleAllKeys.filter((key) => columns2[key]?.sticky === "right");
+    const visibleFixedKeys = visibleAllKeys.filter((key) => isFixedWidthColumn(key));
+    const visibleDataKeys = visibleAllKeys.filter(
+      (key) => columns2[key]?.sticky !== "right" && !isFixedWidthColumn(key)
+    );
+    if (visibleDataKeys.length === 0) return;
+    let chromeWidth = 0;
+    if (expandable2) chromeWidth += 32;
+    if (hasChromeColumn2) chromeWidth += isCompact2 ? 48 : columnWidths2.__actions ?? 60;
+    chromeWidth += visibleStickyKeys.reduce(
+      (sum, key) => sum + (columnWidths2[key] ?? minColumnWidth2),
+      0
+    );
+    chromeWidth += visibleFixedKeys.reduce(
+      (sum, key) => sum + (columnWidths2[key] ?? minColumnWidth2),
+      0
+    );
+    if (visibleStickyKeys.length > 0) {
+      const spacer = el.querySelector(".crewlet-data-table__th--spacer");
+      const drawn = spacer ? spacer.getBoundingClientRect().width : 0;
+      chromeWidth += drawn > 0 ? drawn : 24;
+    }
+    const dataTotal = visibleDataKeys.reduce(
+      (sum, key) => sum + (columnWidths2[key] ?? minColumnWidth2),
+      0
+    );
+    const available = containerWidth - chromeWidth;
+    const leftover = available - dataTotal;
+    if (leftover >= 0 && leftover <= 1) return;
+    const next = { ...columnWidths2 };
+    const widthOf = (key) => next[key] ?? minColumnWidth2;
+    visibleDataKeys.forEach((key) => {
+      next[key] = widthOf(key);
+    });
+    let outstanding = leftover;
+    let pool = visibleDataKeys;
+    while (pool.length > 0 && outstanding !== 0) {
+      const poolTotal = pool.reduce((sum, key) => sum + widthOf(key), 0);
+      if (poolTotal <= 0) break;
+      const roomLeft = [];
+      let moved = 0;
+      pool.forEach((key, idx) => {
+        const current = widthOf(key);
+        const rawShare = idx === pool.length - 1 ? outstanding - moved : Math.round(outstanding * (current / poolTotal));
+        const clamped = Math.max(minColumnWidth2, current + rawShare);
+        moved += clamped - current;
+        next[key] = clamped;
+        if (clamped > minColumnWidth2) roomLeft.push(key);
+      });
+      if (moved === 0) break;
+      outstanding -= moved;
+      pool = roomLeft;
+    }
+    setColumnWidths(next);
+  }, [fitRequests]);
+  const fittedColumnKeys = columnOrder.filter((key) => visibleColumns[key] !== false).join(",");
+  const fittedColumnKeysRef = useRef(fittedColumnKeys);
+  useLayoutEffect(() => {
+    if (fittedColumnKeysRef.current === fittedColumnKeys) return;
+    fittedColumnKeysRef.current = fittedColumnKeys;
+    requestFit();
+  }, [fittedColumnKeys, requestFit]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    let lastWidth = el.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const w = el.clientWidth;
+      if (w > 0 && w !== lastWidth) {
+        lastWidth = w;
+        requestFit();
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [requestFit]);
+  useEffect(() => {
+    const chosen = Object.keys(resizedColumns);
+    if (chosen.length === 0) {
+      removeStored(storageKey, "resizedColumns");
+      return;
+    }
+    writeStored(storageKey, "resizedColumns", JSON.stringify(
+      Object.fromEntries(chosen.map((key) => [key, columnWidths[key] ?? minColumnWidth]))
+    ));
+  }, [columnWidths, resizedColumns, storageKey, minColumnWidth]);
+  useEffect(() => {
+    removeStored(storageKey, "columnWidths");
+  }, [storageKey]);
+  useEffect(() => {
+    if (itemsPerPageProp === void 0) {
+      writeStored(storageKey, "itemsPerPage", String(ownItemsPerPage));
+    }
+  }, [ownItemsPerPage, storageKey, itemsPerPageProp]);
+  useEffect(() => {
+    if (visibleColumnsProp === void 0) {
+      writeStored(storageKey, "visibleColumns", JSON.stringify(ownVisibleColumns));
+    }
+  }, [ownVisibleColumns, storageKey, visibleColumnsProp]);
+  useEffect(() => {
+    if (columnOrderProp === void 0) {
+      writeStored(storageKey, "columnOrder", JSON.stringify(columnOrder));
+    }
+  }, [columnOrder, storageKey, columnOrderProp]);
+  useEffect(() => {
+    writeStored(storageKey, "wrapLines", String(wrapLines));
+  }, [wrapLines, storageKey]);
+  const handleMouseDownResize = (e, columnKey) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizingColumn(columnKey);
+    setStartX(e.clientX);
+    setStartWidth(columnWidths[columnKey] ?? minColumnWidth);
+  };
+  const KEYBOARD_RESIZE_STEP = 16;
+  const resizerState = (columnKey) => {
+    const width = Math.round(columnWidths[columnKey] ?? minColumnWidth);
+    return {
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": labels.resize(columnName(columnKey)),
+      "aria-valuenow": width,
+      "aria-valuemin": minColumnWidth,
+      "aria-valuetext": labels.resizeWidth(width)
+    };
+  };
+  const nudgeColumnWidth = (e, columnKey) => {
+    const step = e.key === "ArrowLeft" ? -KEYBOARD_RESIZE_STEP : e.key === "ArrowRight" ? KEYBOARD_RESIZE_STEP : 0;
+    if (step === 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setColumnWidths((was) => ({
+      ...was,
+      [columnKey]: Math.max(minColumnWidth, (was[columnKey] ?? minColumnWidth) + step)
+    }));
+    markResized(columnKey);
+  };
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (resizingColumn) {
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(minColumnWidth, startWidth + diff);
+        setColumnWidths((prev) => ({
+          ...prev,
+          [resizingColumn]: newWidth
+        }));
+        markResized(resizingColumn);
+      }
+    };
+    const handleMouseUp = () => {
+      if (resizingColumn) {
+        setResizingColumn(null);
+      }
+    };
+    if (resizingColumn) {
+      document.body.classList.add("crewlet-data-table-resizing");
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        document.body.classList.remove("crewlet-data-table-resizing");
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+    return void 0;
+  }, [resizingColumn, startX, startWidth, minColumnWidth, markResized]);
+  const controlledSort = sortProp !== void 0;
+  const effectiveSort = controlledSort ? sortProp ? { key: sortProp.key, direction: sortProp.direction } : { key: null, direction: null } : sortConfig;
+  const handleSort = (columnKey) => {
+    const column = columns[columnKey];
+    if (column?.sortable === false) return;
+    const first = column?.firstDirection ?? "asc";
+    const other = first === "asc" ? "desc" : "asc";
+    let next;
+    if (effectiveSort.key !== columnKey || effectiveSort.direction === null) {
+      next = { key: columnKey, direction: first };
+    } else if (effectiveSort.direction === first) {
+      next = { key: columnKey, direction: other };
+    } else {
+      next = sortCycle === "asc-desc" ? { key: columnKey, direction: first } : null;
+    }
+    if (controlledSort) {
+      onSortChange?.(next);
+    } else {
+      setSortConfig({ key: next?.key ?? null, direction: next?.direction ?? null });
+    }
+  };
+  const heldOrder = useRef(null);
+  const getSortedData = () => {
+    const sortKey = effectiveSort.key;
+    const direction = effectiveSort.direction;
+    if (!sortKey || !direction) {
+      heldOrder.current = null;
+      return [...data];
+    }
+    const column = columns[sortKey];
+    const accessor = column?.sortValue ?? ((row) => cellValue(row, sortKey));
+    const sorted = data.map((row, index) => ({ row, index })).sort((left, right) => {
+      const a = accessor(left.row);
+      const b = accessor(right.row);
+      const aAbsent = isAbsent(a);
+      const bAbsent = isAbsent(b);
+      if (aAbsent || bAbsent) {
+        if (aAbsent && bAbsent) return left.index - right.index;
+        return aAbsent ? 1 : -1;
+      }
+      const difference = compareValues(a, b);
+      if (difference !== 0) return direction === "asc" ? difference : -difference;
+      return left.index - right.index;
+    }).map((decorated) => decorated.row);
+    if (!stableOrder) {
+      heldOrder.current = null;
+      return sorted;
+    }
+    const signature = `${sortKey}:${direction}`;
+    const held = heldOrder.current;
+    if (!held || held.signature !== signature) {
+      heldOrder.current = {
+        signature,
+        rank: new Map(sorted.map((row, index) => [resolveRowKey(row), index]))
+      };
+      return sorted;
+    }
+    const { rank } = held;
+    return sorted.map((row, index) => ({ row, index })).sort((left, right) => {
+      const a = rank.get(resolveRowKey(left.row));
+      const b = rank.get(resolveRowKey(right.row));
+      if (a === void 0 && b === void 0) return left.index - right.index;
+      if (a === void 0) return 1;
+      if (b === void 0) return -1;
+      return a - b;
+    }).map((decorated) => decorated.row);
+  };
+  const [ownPage, setOwnPage] = useState(1);
+  const currentPage = pageProp ?? ownPage;
+  const goToPage = (next) => {
+    if (pageProp === void 0) setOwnPage(next);
+    onPageChange?.(next);
+  };
+  const sortedDataMemo = getSortedData();
+  const totalPages = paginationEnabled ? itemsPerPage === ALL_ITEMS ? 1 : Math.max(1, Math.ceil(sortedDataMemo.length / Math.max(1, itemsPerPage))) : Math.max(1, pageCount ?? 1);
+  const pageBoundKnown = paginationEnabled || pageCount !== void 0;
+  useEffect(() => {
+    if (!pageBoundKnown) return;
+    if (currentPage > totalPages) goToPage(totalPages);
+    else if (currentPage < 1) goToPage(1);
+  }, [totalPages, currentPage, pageBoundKnown]);
+  const pagedFrom = useRef(null);
+  useEffect(() => {
+    const signature = `${effectiveSort.key}:${effectiveSort.direction}:${String(filterKey)}:${filtersActive}`;
+    const was = pagedFrom.current;
+    pagedFrom.current = signature;
+    if (was === null || was === signature) return;
+    if (currentPage !== 1) goToPage(1);
+  }, [effectiveSort.key, effectiveSort.direction, filterKey, filtersActive]);
+  const getDisplayedData = () => {
+    if (!paginationEnabled || itemsPerPage === ALL_ITEMS) return sortedDataMemo;
+    const start = (currentPage - 1) * itemsPerPage;
+    return sortedDataMemo.slice(start, start + itemsPerPage);
+  };
+  const columnName = (columnKey) => {
+    const label = columns[columnKey]?.label;
+    return typeof label === "string" && label.trim() !== "" ? label : columnKey;
+  };
+  const whyFixed = (columnKey, shown) => {
+    if (columns[columnKey]?.hideable === false) return labels.columnAlwaysShown;
+    const others = Object.keys(columns).filter((key) => key !== columnKey && shown[key] !== false);
+    return others.length === 0 ? labels.columnLastShown : null;
+  };
+  const [settingsSaid, setSettingsSaid] = useState("");
+  const instanceId = useId();
+  const reorderHintId = `${instanceId}-reorder`;
+  const columnLabelId = (columnKey) => (
+    // Whitespace out of the key: `aria-labelledby` is a SPACE-SEPARATED list
+    // of ids, so a column keyed "created at" would point the cell at two ids
+    // that do not exist and leave the header with no name at all.
+    `${instanceId}-col-${columnKey.replace(/\s+/g, "_")}`
+  );
+  const handleToggleColumn = (columnKey) => {
+    if (whyFixed(columnKey, draftVisibleColumns) !== null && draftVisibleColumns[columnKey] !== false) return;
+    setDraftVisibleColumns((prev) => ({ ...prev, [columnKey]: !prev[columnKey] }));
+  };
+  const moveColumn = (columnKey, by) => {
+    const at = draftColumnOrder.indexOf(columnKey);
+    const to = at + by;
+    if (at < 0 || to < 0 || to >= draftColumnOrder.length) return;
+    const next = [...draftColumnOrder];
+    next.splice(at, 1);
+    next.splice(to, 0, columnKey);
+    setDraftColumnOrder(next);
+    setSettingsSaid(labels.columnMoved(columnName(columnKey), to + 1, next.length));
+  };
+  const handleItemsPerPageChange = (value) => {
+    setDraftItemsPerPage(value);
+  };
+  const handleResetTableSettings = () => {
+    setDraftColumnWidths(generateDefaultColumnWidths());
+    setDraftItemsPerPage(defaultItemsPerPage);
+    setDraftVisibleColumns(generateDefaultVisibleColumns());
+    setDraftColumnOrder(generateDefaultColumnOrder());
+    setDraftWrapLines(effectiveDefaultWrapLines);
+    setDraftSortConfig({ key: defaultSort?.key ?? null, direction: defaultSort?.direction ?? null });
+    pendingFitOnApplyRef.current = true;
+    setResetConfirmed(true);
+    setSettingsSaid(labels.resetConfirmed);
+    if (resetConfirmTimer.current) clearTimeout(resetConfirmTimer.current);
+    resetConfirmTimer.current = setTimeout(() => setResetConfirmed(false), 1500);
+  };
+  const openTableSettings = () => {
+    setDraftColumnWidths({ ...columnWidths });
+    setDraftItemsPerPage(itemsPerPage);
+    setDraftVisibleColumns({ ...visibleColumns });
+    setDraftColumnOrder([...columnOrder]);
+    setDraftWrapLines(wrapLines);
+    setDraftSortConfig({ key: effectiveSort.key, direction: effectiveSort.direction });
+    setResetConfirmed(false);
+    setSettingsSaid("");
+    pendingFitOnApplyRef.current = false;
+    if (resetConfirmTimer.current) {
+      clearTimeout(resetConfirmTimer.current);
+      resetConfirmTimer.current = null;
+    }
+    setTableSettingsOpen(true);
+  };
+  const applyTableSettings = () => {
+    setColumnWidths(draftColumnWidths);
+    commitItemsPerPage(draftItemsPerPage);
+    commitVisibleColumns(draftVisibleColumns);
+    commitColumnOrder(draftColumnOrder);
+    setWrapLines(draftWrapLines);
+    if (controlledSort) {
+      onSortChange?.(
+        draftSortConfig.key && draftSortConfig.direction ? { key: draftSortConfig.key, direction: draftSortConfig.direction } : null
+      );
+    } else {
+      setSortConfig(draftSortConfig);
+    }
+    if (pendingFitOnApplyRef.current) {
+      pendingFitOnApplyRef.current = false;
+      setResizedColumns({});
+      requestFit();
+    }
+    setTableSettingsOpen(false);
+  };
+  const cancelTableSettings = () => {
+    pendingFitOnApplyRef.current = false;
+    setTableSettingsOpen(false);
+  };
+  const handleDragStart = (e, columnKey) => {
+    setDraggedColumn(columnKey);
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, columnKey) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (columnKey && draggedColumn && draggedColumn !== columnKey) {
+      if (dragTimeoutRef.current) {
+        clearTimeout(dragTimeoutRef.current);
+      }
+      dragTimeoutRef.current = setTimeout(() => {
+        setDraftColumnOrder((prev) => {
+          const newOrder = [...prev];
+          const draggedIndex = newOrder.indexOf(draggedColumn);
+          const targetIndex = newOrder.indexOf(columnKey);
+          if (draggedIndex === -1 || targetIndex === -1 || draggedIndex === targetIndex) {
+            return prev;
+          }
+          newOrder.splice(draggedIndex, 1);
+          newOrder.splice(targetIndex, 0, draggedColumn);
+          return newOrder;
+        });
+      }, 5);
+    }
+  };
+  const handleDrop = (e, _targetColumnKey) => {
+    e.preventDefault();
+    setDraggedColumn(null);
+  };
+  const handleDragEnd = () => {
+    if (dragTimeoutRef.current) {
+      clearTimeout(dragTimeoutRef.current);
+    }
+    setDraggedColumn(null);
+  };
+  const renderCellContent = (row, columnKey) => {
+    const column = columns[columnKey];
+    const value = cellValue(row, columnKey);
+    if (column?.render) {
+      return column.render(row, value);
+    }
+    return value !== null && value !== void 0 ? value : /* @__PURE__ */ jsx(EmptyValue, { label: labels.absent });
+  };
+  const columnClasses = (column) => cx(
+    column.align === "right" && "crewlet-data-table__cell--right",
+    column.align === "center" && "crewlet-data-table__cell--center",
+    column.shrink && "crewlet-data-table__cell--shrink"
+  );
+  const renderBodyCell = (row, columnKey, lead = {}) => {
+    const column = columns[columnKey];
+    if (!column) return null;
+    const style = {};
+    if (isCompact) {
+      if (columnWidths[columnKey] != null) {
+        style.width = `${columnWidths[columnKey]}px`;
+      }
+    } else {
+      style.width = `${columnWidths[columnKey]}px`;
+    }
+    const rendered = renderCellContent(row, columnKey);
+    let content = rendered;
+    if (lead.href) {
+      content = /* @__PURE__ */ jsx("a", { className: "crewlet-data-table__row-link", href: lead.href, children: content });
+    }
+    if (isCompact && column.copyable) {
+      const raw = column.copyValue ? column.copyValue(row) : cellValue(row, columnKey);
+      const copyText = raw !== void 0 && raw !== null ? String(raw) : "";
+      content = /* @__PURE__ */ jsx(CopyableCell, { value: copyText, ariaLabel: labels.copyCell(columnName(columnKey)), children: rendered });
+    }
+    const tdClassName = cx(
+      columnClasses(column),
+      column.mono && "crewlet-data-table__cell--mono",
+      isCompact && column.sticky === "right" && "crewlet-data-table__td--sticky-right"
+    );
+    return /* @__PURE__ */ jsxs("td", { style, className: tdClassName || void 0, children: [
+      lead.tone,
+      content
+    ] }, columnKey);
+  };
+  const renderHeaderCell = (columnKey) => {
+    if (!isColumnVisible(columnKey)) return null;
+    const column = columns[columnKey];
+    if (!column) return null;
+    const isSortable = column.sortable !== false;
+    const isActive = effectiveSort.key === columnKey && effectiveSort.direction !== null;
+    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(UnfoldMoreGlyph, { size: "sm" });
+    const ariaSort = isActive ? effectiveSort.direction === "asc" ? "ascending" : "descending" : void 0;
+    const isSticky = column.sticky === "right";
+    if (isCompact) {
+      const style = {};
+      if (columnWidths[columnKey] != null) {
+        style.width = `${columnWidths[columnKey]}px`;
+      }
+      const visibleStickyExists = columnOrder.some(
+        (k) => columns[k]?.sticky === "right" && isColumnVisible(k)
+      );
+      const suppressResizer = !resizable || isSticky || visibleStickyExists;
+      const resizer = suppressResizer ? null : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "crewlet-data-table__resizer",
+          ...resizerState(columnKey),
+          onMouseDown: (e) => {
+            e.stopPropagation();
+            handleMouseDownResize(e, columnKey);
+          },
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => nudgeColumnWidth(e, columnKey)
+        }
+      );
+      const thClass = cx(
+        columnClasses(column),
+        isSortable && "crewlet-data-table__th--sortable",
+        isSortable && isActive && "is-active",
+        isSticky && "crewlet-data-table__th--sticky-right"
+      );
+      return /* @__PURE__ */ jsxs(
+        "th",
+        {
+          scope: "col",
+          style,
+          "aria-sort": ariaSort,
+          "aria-labelledby": columnLabelId(columnKey),
+          className: thClass || void 0,
+          children: [
+            isSortable ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-data-table__sort-button",
+                onClick: () => handleSort(columnKey),
+                children: [
+                  /* @__PURE__ */ jsx("span", { id: columnLabelId(columnKey), children: column.label }),
+                  arrow
+                ]
+              }
+            ) : /* @__PURE__ */ jsx("span", { id: columnLabelId(columnKey), children: column.label }),
+            resizer
+          ]
+        },
+        columnKey
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "th",
+      {
+        scope: "col",
+        style: { width: `${columnWidths[columnKey]}px` },
+        "aria-sort": ariaSort,
+        "aria-labelledby": columnLabelId(columnKey),
+        className: cx(columnClasses(column), isSortable && "crewlet-data-table__th--sortable") || void 0,
+        children: [
+          isSortable ? /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-data-table__sort-button crewlet-data-table__header-content",
+              onClick: () => handleSort(columnKey),
+              children: [
+                /* @__PURE__ */ jsx("span", { id: columnLabelId(columnKey), children: column.label }),
+                /* @__PURE__ */ jsx("span", { className: cx("crewlet-data-table__sort-icon", isActive && "is-active"), children: arrow })
+              ]
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__header-content", children: /* @__PURE__ */ jsx("span", { id: columnLabelId(columnKey), children: column.label }) }),
+          resizable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-data-table__column-resizer",
+              ...resizerState(columnKey),
+              onMouseDown: (e) => handleMouseDownResize(e, columnKey),
+              onClick: (e) => e.stopPropagation(),
+              onKeyDown: (e) => nudgeColumnWidth(e, columnKey)
+            }
+          )
+        ]
+      },
+      columnKey
+    );
+  };
+  const renderActionsHeader = () => {
+    if (!hasChromeColumn) return null;
+    if (!settingsInHeader) {
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          className: "crewlet-data-table__th--chrome crewlet-data-table__th--actions",
+          style: { width: 1 },
+          children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.actions })
+        },
+        "__actions"
+      );
+    }
+    return (
+      /*
+       * NO POSITION HERE. The two buttons above hang off this cell, so it has
+       * to be their containing block, and it used to say so inline. The header
+       * cells are `sticky` now, which is a positioned value and is already
+       * that containing block; the inline `relative` merely OUTRANKED it, so
+       * on a bounded table every column name stayed put while this one column
+       * scrolled its heading away.
+       */
+      /* @__PURE__ */ jsxs("th", { scope: "col", style: { width: `${columnWidths.__actions}px` }, children: [
+        labels.actions,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-data-table__header-btn crewlet-data-table__header-btn--reset",
+            onClick: (e) => {
+              e.stopPropagation();
+              resetToDefault();
+            },
+            "aria-label": labels.resetColumns,
+            title: labels.resetColumns,
+            children: /* @__PURE__ */ jsx(SettingsBackupRestoreGlyph, { size: "md" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            ref: settingsButtonRef,
+            className: "crewlet-data-table__header-btn crewlet-data-table__header-btn--settings",
+            onClick: (e) => {
+              e.stopPropagation();
+              openTableSettings();
+            },
+            "aria-label": labels.settings,
+            title: labels.settings,
+            children: /* @__PURE__ */ jsx(SettingsGlyph, { size: "md" })
+          }
+        )
+      ] }, "__actions")
+    );
+  };
+  const renderActionsCell = (row) => {
+    if (!hasChromeColumn) return null;
+    if (!hasActionColumn) {
+      return /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--actions" }, "__actions");
+    }
+    if (rowActions) {
+      const actions = rowActions(row);
+      return /* @__PURE__ */ jsx(
+        "td",
+        {
+          className: "crewlet-data-table__td--actions",
+          style: { textAlign: "right", width: 1 },
+          children: /* @__PURE__ */ jsx(RowActionsMenu, { actions, label: labels.rowActions })
+        },
+        "__actions"
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        className: "crewlet-data-table__td--actions",
+        style: { width: `${columnWidths.__actions}px`, textAlign: "center" },
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            className: "crewlet-data-table__action-btn",
+            onClick: () => onRowAction(row),
+            label: actionLabel,
+            title: actionLabel,
+            icon: actionIcon
+          }
+        )
+      },
+      "__actions"
+    );
+  };
+  const displayedData = getDisplayedData();
+  const bodyHoldsRows = loading && displayedData.length === 0 || !error && displayedData.length > 0;
+  const visibleColumnKeys = columnOrder.filter(isColumnVisible);
+  const firstVisibleKey = columnOrder.find(
+    (key) => columns[key]?.sticky !== "right" && isColumnVisible(key)
+  );
+  const spacerCols = isCompact ? 1 : 0;
+  const colSpan = visibleColumnKeys.length + (hasChromeColumn ? 1 : 0) + spacerCols;
+  const wrapLinesClass = wrapLines ? " crewlet-data-table--wrap-lines" : "";
+  const boundedBody = maxBodyHeight !== void 0;
+  const stickyHeadClass = boundedBody ? " crewlet-data-table--sticky-head" : "";
+  const rootClass = isCompact ? `crewlet-data-table crewlet-data-table--compact crewlet-data-table--density-${density}${wrapLinesClass}${stickyHeadClass} ${className}`.trim() : `crewlet-data-table crewlet-data-table--default${wrapLinesClass}${stickyHeadClass} ${className}`.trim();
+  const expandColSpan = colSpan + (expandable ? 1 : 0);
+  const visibleRowKeys = displayedData.map((row) => resolveRowKey(row));
+  const allExpanded = expandable && visibleRowKeys.length > 0 && visibleRowKeys.every((k) => expandedKeys.has(k));
+  const toggleExpandAll = () => {
+    setExpandedKeys(() => allExpanded ? /* @__PURE__ */ new Set() : new Set(visibleRowKeys));
+  };
+  const renderExpandHeader = () => {
+    if (!expandable) return null;
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        className: "crewlet-data-table__expand-header",
+        style: { width: 32 },
+        children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-data-table__expand-all-btn",
+            onClick: toggleExpandAll,
+            "aria-label": allExpanded ? labels.collapseAll : labels.expandAll,
+            "aria-expanded": allExpanded,
+            title: allExpanded ? labels.collapseAll : labels.expandAll,
+            children: /* @__PURE__ */ jsx(
+              ChevronRightGlyph,
+              {
+                className: `crewlet-data-table__chevron${allExpanded ? " is-open" : ""}`,
+                size: "md"
+              }
+            )
+          }
+        )
+      },
+      "__expand"
+    );
+  };
+  const renderExpandCell = (rowIsOpen, canExpand, onToggle) => {
+    if (!expandable) return null;
+    return /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__expand-cell", style: { width: 32 }, children: canExpand && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-data-table__expand-btn",
+        "aria-expanded": rowIsOpen,
+        "aria-label": rowIsOpen ? labels.collapseRow : labels.expandRow,
+        onClick: (event) => {
+          event.stopPropagation();
+          onToggle();
+        },
+        children: /* @__PURE__ */ jsx(ChevronRightGlyph, { className: cx("crewlet-data-table__chevron", rowIsOpen && "is-open"), size: "md" })
+      }
+    ) }, "__expand");
+  };
+  const callerPages = onPageChange !== void 0 && pageCount !== void 0;
+  const pagerVisible = paginationEnabled || callerPages;
+  const pageSizeOffered = paginationEnabled || onItemsPerPageChange !== void 0;
+  const pageRange = (() => {
+    const total = sortedDataMemo.length;
+    if (total === 0) return { from: 0, to: 0, total: 0 };
+    const sliced = paginationEnabled && itemsPerPage !== ALL_ITEMS;
+    const from = sliced ? (currentPage - 1) * itemsPerPage + 1 : 1;
+    return { from, to: Math.min(total, from + displayedData.length - 1), total };
+  })();
+  useEffect(() => {
+    setEmptySaid(emptyCellRef.current?.textContent ?? "");
+  }, [emptyMessage, loading, error, displayedData.length]);
+  const cogInChromeRow = settingsEnabled && isCompact;
+  const topControlsVisible = pagerVisible || cogInChromeRow;
+  const headerVisible = title != null || description != null || icon != null;
+  const cardHeader = useCardHeaderSlot(topControlsVisible && !headerVisible);
+  const renderTopControls = topControlsVisible ? /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__chrome", children: [
+    pagerVisible && /*
+     * A NAMED GROUP, because `aria-label` on a plain div names nothing: a
+     * generic element has no role for a name to attach to, so the label
+     * this cluster has always carried was read by nobody.
+     *
+     * A GROUP AND NOT A LANDMARK. `<nav aria-label="Pagination">` is the
+     * shape a page-level pager takes, and it comes with a rule this
+     * component cannot keep: where there is more than one of them on a
+     * page, each needs a name of its own. A table does not know how many
+     * tables it is on screen with, and the engine draws three on a single
+     * route, so a landmark here fills a reader's landmark list with
+     * identical entries for chrome that belongs inside a table rather than
+     * to the document. A group carries the name and adds nothing to that
+     * list.
+     */
+    /* @__PURE__ */ jsxs("div", { role: "group", className: "crewlet-data-table__pagination", "aria-label": labels.pagination, children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          className: "crewlet-data-table__page-btn",
+          onClick: () => goToPage(1),
+          disabled: currentPage <= 1,
+          label: labels.firstPage,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftGlyph, { size: "md" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          className: "crewlet-data-table__page-btn",
+          onClick: () => goToPage(Math.max(1, currentPage - 1)),
+          disabled: currentPage <= 1,
+          label: labels.previousPage,
+          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, { size: "md" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__page-number", "aria-live": "polite", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: currentPage }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: `${labels.page(currentPage, totalPages)}. ${labels.pageRange(
+          pageRange.from,
+          pageRange.to,
+          pageRange.total
+        )}` })
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          className: "crewlet-data-table__page-btn",
+          onClick: () => goToPage(Math.min(totalPages, currentPage + 1)),
+          disabled: currentPage >= totalPages,
+          label: labels.nextPage,
+          icon: /* @__PURE__ */ jsx(ChevronRightGlyph, { size: "md" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          className: "crewlet-data-table__page-btn",
+          onClick: () => goToPage(totalPages),
+          disabled: currentPage >= totalPages,
+          label: labels.lastPage,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowRightGlyph, { size: "md" })
+        }
+      )
+    ] }),
+    cogInChromeRow && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        ref: settingsButtonRef,
+        className: "crewlet-data-table__settings-btn",
+        onClick: openTableSettings,
+        label: labels.settings,
+        title: labels.settings,
+        icon: /* @__PURE__ */ jsx(SettingsGlyph, { size: "md" })
+      }
+    )
+  ] }) : null;
+  const chromeInOwnBar = topControlsVisible && !headerVisible && !cardHeader.hosted;
+  const toolbarVisible = renderToolbar != null || chromeInOwnBar;
+  return /* @__PURE__ */ jsxs("div", { className: rootClass, children: [
+    cardHeader.hosted && cardHeader.node !== null ? createPortal(renderTopControls, cardHeader.node) : null,
+    headerVisible && /* @__PURE__ */ jsxs("header", { className: "crewlet-data-table__header", children: [
+      icon != null && /* @__PURE__ */ jsx("span", { className: "crewlet-data-table__header-icon", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__header-text", children: [
+        title != null && /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__title", children: title }),
+        description != null && /* @__PURE__ */ jsx("p", { className: "crewlet-data-table__description", children: description })
+      ] }),
+      renderTopControls
+    ] }),
+    toolbarVisible && /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__toolbar", children: [
+      renderToolbar != null && /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__toolbar-start", children: renderToolbar }),
+      onClearFilters != null && filtersActive && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "crewlet-data-table__clear-filters",
+          onClick: onClearFilters,
+          children: clearFiltersLabel
+        }
+      ),
+      chromeInOwnBar && renderTopControls
+    ] }),
+    renderFilterBar != null && /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__filter-bar", children: renderFilterBar }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "crewlet-data-table__rail",
+          /*
+           * When the table carries a sticky-right action column the
+           * row is treated as a frozen, screen-fitting surface: the
+           * fit pass redistributes regular columns to consume only
+           * the room left after the sticky pane and the gutter, the
+           * resize handles are suppressed, and the scroll container
+           * locks horizontal overflow. The modifier class flips that
+           * behaviour on so the CSS can also drop the scrollbar mask
+           * that would otherwise float over rows when no scrollbar
+           * is present.
+           */
+          isCompact && columnOrder.some(
+            (k) => columns[k]?.sticky === "right" && isColumnVisible(k)
+          ) ? "crewlet-data-table__rail--frozen" : void 0
+        ].filter(Boolean).join(" "),
+        style: isCompact ? {
+          "--crewlet-data-table-sticky-pane-width": `${columnOrder.filter((key) => columns[key]?.sticky === "right" && isColumnVisible(key)).reduce((sum, key) => sum + (columnWidths[key] ?? minColumnWidth), 0)}px`
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: loading ? labels.loading : emptySaid }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "crewlet-data-table__scroll",
+              ref: scrollRef,
+              style: boundedBody ? { maxHeight: maxBodyHeight } : void 0,
+              children: /* @__PURE__ */ jsxs(
+                "table",
+                {
+                  className: cx(
+                    "crewlet-data-table__table",
+                    !bodyHoldsRows && "crewlet-data-table__table--rowless"
+                  ),
+                  "aria-busy": loading || void 0,
+                  children: [
+                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                      renderExpandHeader(),
+                      columnOrder.filter((key) => columns[key]?.sticky !== "right").map((columnKey) => renderHeaderCell(columnKey)),
+                      isCompact && /* @__PURE__ */ jsx(
+                        "th",
+                        {
+                          className: "crewlet-data-table__th--chrome crewlet-data-table__th--spacer",
+                          "aria-hidden": true
+                        },
+                        "__spacer"
+                      ),
+                      columnOrder.filter((key) => columns[key]?.sticky === "right").map((columnKey) => renderHeaderCell(columnKey)),
+                      renderActionsHeader()
+                    ] }) }),
+                    /* @__PURE__ */ jsx("tbody", { children: loading && displayedData.length === 0 ? (
+                      /*
+                       * Skeleton rows live inside the real <tbody> and reuse the
+                       * live column set + widths, so the shimmer lines up exactly
+                       * with the data that replaces it. Bar widths cycle a fixed
+                       * pattern (not Math.random) so re-renders never reshuffle
+                       * the shimmer.
+                       */
+                      Array.from({ length: Math.max(1, skeletonRows) }, (_, rowIdx) => {
+                        const widths = [72, 46, 84, 58, 64];
+                        const visibleKeys = columnOrder.filter(
+                          (key) => columns[key]?.sticky !== "right" && isColumnVisible(key)
+                        );
+                        return /* @__PURE__ */ jsxs("tr", { className: "crewlet-data-table__skeleton-row", "aria-hidden": true, children: [
+                          expandable && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__expand-cell", style: { width: 32 } }, "__expand"),
+                          visibleKeys.map((columnKey, colIdx) => /* @__PURE__ */ jsx(
+                            "td",
+                            {
+                              style: columnWidths[columnKey] != null ? { width: `${columnWidths[columnKey]}px` } : void 0,
+                              children: /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "crewlet-data-table__skeleton-bar",
+                                  style: {
+                                    width: `${widths[(rowIdx + colIdx) % widths.length]}%`,
+                                    animationDelay: `${rowIdx * 0.1}s`
+                                  }
+                                }
+                              )
+                            },
+                            columnKey
+                          )),
+                          isCompact && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--spacer", "aria-hidden": true }, "__spacer"),
+                          columnOrder.filter((key) => columns[key]?.sticky === "right" && isColumnVisible(key)).map((columnKey) => /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--sticky-right" }, columnKey)),
+                          hasChromeColumn && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--actions" }, "__actions")
+                        ] }, `__skeleton_${rowIdx}`);
+                      })
+                    ) : error ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        colSpan: expandColSpan,
+                        className: "crewlet-data-table__empty",
+                        children: error
+                      }
+                    ) }) : displayedData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        ref: emptyCellRef,
+                        colSpan: expandColSpan,
+                        className: "crewlet-data-table__empty",
+                        children: emptyMessage
+                      }
+                    ) }) : displayedData.map((row) => {
+                      const trKey = resolveRowKey(row);
+                      const isArchived = archivedPredicate ? archivedPredicate(row) : false;
+                      const expanded = expandable ? expandedKeys.has(trKey) : false;
+                      const expandedContent = expandable ? renderExpandedRow(row) : null;
+                      const canExpand = expandable && expandedContent != null;
+                      const href = getRowHref ? getRowHref(row) : null;
+                      const tone = rowTone ? rowTone(row) : null;
+                      const selected = isSelected ? isSelected(row) : void 0;
+                      const isClickable = !!onRowClick || canExpand || !!href;
+                      const trClass = cx(
+                        isArchived && "crewlet-data-table__row--archived",
+                        isClickable && "crewlet-data-table__row--clickable",
+                        canExpand && "crewlet-data-table__row--expandable",
+                        expanded && "is-expanded",
+                        selected && "crewlet-data-table__row--selected",
+                        tone && `crewlet-data-table__row--tone-${tone}`
+                      );
+                      const accessory = renderAccessoryRow ? renderAccessoryRow(row) : null;
+                      const onRowSurfaceClick = canExpand ? () => toggleExpanded(trKey) : onRowClick ? () => onRowClick(row) : void 0;
+                      const onSurface = onRowSurfaceClick ? (event) => {
+                        const from = event.target;
+                        if (from?.closest?.('a,button,input,select,textarea,label,[role="button"],[role="link"],[role="menuitem"]')) {
+                          return;
+                        }
+                        onRowSurfaceClick();
+                      } : void 0;
+                      const rowLead = {
+                        tone: tone ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.tone[tone] }) : null,
+                        href
+                      };
+                      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                        /* @__PURE__ */ jsxs(
+                          "tr",
+                          {
+                            className: trClass || void 0,
+                            title: isArchived ? labels.archivedRow(archivedLabel) : void 0,
+                            onClick: onSurface,
+                            tabIndex: onRowClick && !href && !canExpand ? 0 : void 0,
+                            "aria-selected": selected,
+                            onKeyDown: onRowClick && !href && !canExpand ? (e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onRowClick(row);
+                              }
+                            } : void 0,
+                            children: [
+                              renderExpandCell(expanded, canExpand, () => toggleExpanded(trKey)),
+                              columnOrder.filter((columnKey) => columns[columnKey]?.sticky !== "right").map((columnKey) => {
+                                if (!isColumnVisible(columnKey)) return null;
+                                return renderBodyCell(row, columnKey, columnKey === firstVisibleKey ? rowLead : {});
+                              }),
+                              isCompact && /* @__PURE__ */ jsx("td", { className: "crewlet-data-table__td--spacer", "aria-hidden": true }, "__spacer"),
+                              columnOrder.filter((columnKey) => columns[columnKey]?.sticky === "right").map((columnKey) => {
+                                if (!isColumnVisible(columnKey)) return null;
+                                return renderBodyCell(row, columnKey);
+                              }),
+                              renderActionsCell(row)
+                            ]
+                          }
+                        ),
+                        expanded && expandedContent != null && /* @__PURE__ */ jsx(
+                          "tr",
+                          {
+                            className: [
+                              "crewlet-data-table__expanded-row",
+                              isArchived ? "crewlet-data-table__row--archived" : void 0
+                            ].filter(Boolean).join(" "),
+                            children: /* @__PURE__ */ jsx("td", { colSpan: expandColSpan, className: "crewlet-data-table__expanded-cell", children: expandedContent })
+                          }
+                        ),
+                        accessory != null && /* @__PURE__ */ jsx(
+                          "tr",
+                          {
+                            className: [
+                              "crewlet-data-table__accessory-row",
+                              isArchived ? "crewlet-data-table__row--archived" : void 0
+                            ].filter(Boolean).join(" "),
+                            children: /* @__PURE__ */ jsx("td", { colSpan, className: "crewlet-data-table__accessory-cell", children: accessory })
+                          }
+                        )
+                      ] }, trKey ?? JSON.stringify(row));
+                    }) })
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    hasMore && onLoadMore && /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__load-more", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "small",
+        onClick: onLoadMore,
+        loading: loadingMore,
+        children: loadMoreLabel
+      }
+    ) }),
+    !hasMore && endMessage != null && displayedData.length > 0 && !loading && /* @__PURE__ */ jsx("p", { className: "crewlet-data-table__end", children: endMessage }),
+    /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        open: tableSettingsOpen,
+        onClose: cancelTableSettings,
+        title: labels.settingsTitle,
+        size: "lg",
+        footerStart: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: handleResetTableSettings,
+              leadingIcon: resetConfirmed ? /* @__PURE__ */ jsx(CheckGlyph, { className: "crewlet-data-table__reset-confirm-icon", size: "sm" }) : void 0,
+              children: labels.resetColumns
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: settingsSaid }) })
+        ] }),
+        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: cancelTableSettings, children: labels.cancel }),
+          /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: applyTableSettings, children: labels.apply })
+        ] }),
+        children: [
+          pageSizeOffered ? /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-section", children: [
+            /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__settings-section-title", children: labels.itemsPerPage }),
+            /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__items-per-page-options", children: [
+              itemsPerPageOptions.map((value) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cx("crewlet-data-table__items-per-page-btn", draftItemsPerPage === value && "is-active"),
+                  "aria-pressed": draftItemsPerPage === value,
+                  onClick: () => handleItemsPerPageChange(value),
+                  children: value
+                },
+                value
+              )),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: cx("crewlet-data-table__items-per-page-btn", draftItemsPerPage === ALL_ITEMS && "is-active"),
+                  "aria-pressed": draftItemsPerPage === ALL_ITEMS,
+                  onClick: () => handleItemsPerPageChange(ALL_ITEMS),
+                  children: [
+                    labels.allItems,
+                    /* @__PURE__ */ jsx(VisuallyHidden, { children: ` ${labels.allItemsCount(sortedDataMemo.length)}` })
+                  ]
+                }
+              )
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsx("div", { className: "crewlet-data-table__settings-section", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              label: labels.wrapLines,
+              description: labels.wrapLinesHint,
+              checked: draftWrapLines,
+              onChange: (e) => setDraftWrapLines(e.target.checked)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-data-table__settings-section", children: [
+            /* @__PURE__ */ jsx("h3", { className: "crewlet-data-table__settings-section-title", children: labels.columnsSection }),
+            /* @__PURE__ */ jsx("p", { className: "crewlet-data-table__settings-section-hint", children: labels.columnsHint }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { id: reorderHintId, children: labels.reorderHint }),
+            /* @__PURE__ */ jsx("ul", { className: "crewlet-data-table__column-toggles", children: draftColumnOrder.map((key, index) => {
+              const name = columnName(key);
+              const fixed = whyFixed(key, draftVisibleColumns);
+              const shown = draftVisibleColumns[key] !== false;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: cx("crewlet-data-table__column-toggle-item", draggedColumn === key && "is-dragging"),
+                  onDragOver: (e) => handleDragOver(e, key),
+                  onDrop: (e) => handleDrop(e),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "sm",
+                        className: "crewlet-data-table__column-drag-handle",
+                        label: labels.reorder(name),
+                        icon: /* @__PURE__ */ jsx(DragIndicatorGlyph, { size: "md" }),
+                        "aria-describedby": reorderHintId,
+                        draggable: true,
+                        onDragStart: (e) => handleDragStart(e, key),
+                        onDragEnd: handleDragEnd,
+                        onKeyDown: (e) => {
+                          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+                          e.preventDefault();
+                          moveColumn(key, e.key === "ArrowUp" ? -1 : 1);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        className: cx(
+                          "crewlet-data-table__column-toggle",
+                          fixed !== null && shown && "is-fixed"
+                        ),
+                        label: name,
+                        ...fixed !== null && shown ? { description: fixed, "aria-disabled": true } : {},
+                        checked: shown,
+                        onChange: () => handleToggleColumn(key)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("span", { className: "crewlet-data-table__column-toggle-actions", children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          size: "sm",
+                          label: labels.moveUp(name),
+                          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, { size: "sm" }),
+                          ...index === 0 ? { disabledReason: labels.atTop(name) } : {},
+                          onClick: () => moveColumn(key, -1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          size: "sm",
+                          label: labels.moveDown(name),
+                          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }),
+                          ...index === draftColumnOrder.length - 1 ? { disabledReason: labels.atBottom(name) } : {},
+                          onClick: () => moveColumn(key, 1)
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                key
+              );
+            }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu };