hs-uix 1.6.5 → 2.0.0

package/dist/utils.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,13 +16,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/utils/index.js
 var utils_exports = {};
 __export(utils_exports, {
+  CrmDataTable: () => CrmDataTable,
+  CrmKanban: () => CrmKanban,
+  buildCrmSearchConfig: () => buildCrmSearchConfig,
   buildOptions: () => buildOptions,
   createStatusTagSortComparator: () => createStatusTagSortComparator,
+  crmSearchResultToOption: () => crmSearchResultToOption,
   deriveCardFieldsFromColumns: () => deriveCardFieldsFromColumns,
   findOptionLabel: () => findOptionLabel,
   formatCurrency: () => formatCurrency,
@@ -34,7 +48,14 @@ __export(utils_exports, {
   isDateTimeValueObject: () => isDateTimeValueObject,
   isDateValueObject: () => isDateValueObject,
   isTimeValueObject: () => isTimeValueObject,
-  sumBy: () => sumBy
+  makeCrmSearchMultiSelectField: () => makeCrmSearchMultiSelectField,
+  makeCrmSearchSelectField: () => makeCrmSearchSelectField,
+  normalizeCrmSearchRecord: () => normalizeCrmSearchRecord,
+  normalizeCrmSearchRows: () => normalizeCrmSearchRows,
+  resolveCrmObjectType: () => resolveCrmObjectType,
+  sumBy: () => sumBy,
+  useCrmSearchDataSource: () => useCrmSearchDataSource,
+  useCrmSearchOptions: () => useCrmSearchOptions
 });
 module.exports = __toCommonJS(utils_exports);
 
@@ -44,6 +65,2878 @@ var sumBy = (items, keyOrFn) => (items || []).reduce((total, item) => {
   return total + Number(value || 0);
 }, 0);
 
+// src/utils/crmSearchAdapters.js
+var import_react5 = __toESM(require("react"));
+var import_ui_extensions5 = require("@hubspot/ui-extensions");
+
+// packages/datatable/src/DataTable.jsx
+var import_react2 = __toESM(require("react"));
+
+// src/utils/query.js
+var import_fuse = __toESM(require("fuse.js"));
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var isFilterActive = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
+var formatDateChip = (dateObj) => {
+  if (!dateObj) return "";
+  const { year, month, date } = dateObj;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+var dateToTimestamp = (dateObj) => {
+  if (!dateObj) return null;
+  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+};
+var toStableKey = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var filterRows = (rows, filters, values) => {
+  let result = rows;
+  for (const filter of filters || []) {
+    const value = values[filter.name];
+    if (!isFilterActive(filter, value)) continue;
+    const type = filter.type || "select";
+    if (filter.filterFn) {
+      result = result.filter((row) => filter.filterFn(row, value));
+    } else if (type === "multiselect") {
+      result = result.filter((row) => value.includes(row[filter.name]));
+    } else if (type === "dateRange") {
+      const fromTs = dateToTimestamp(value.from);
+      const toTs = value.to ? dateToTimestamp(value.to) + 864e5 - 1 : null;
+      result = result.filter((row) => {
+        const rowTs = new Date(row[filter.name]).getTime();
+        if (Number.isNaN(rowTs)) return false;
+        if (fromTs && rowTs < fromTs) return false;
+        if (toTs && rowTs > toTs) return false;
+        return true;
+      });
+    } else {
+      result = result.filter((row) => row[filter.name] === value);
+    }
+  }
+  return result;
+};
+var searchRows = (rows, term, fields, opts = {}) => {
+  const { fuzzy = false, fuzzyOptions } = opts;
+  const t = String(term ?? "").toLowerCase();
+  if (!t || !fields || fields.length === 0) return rows;
+  if (fuzzy) {
+    const fuse = new import_fuse.default(rows, {
+      keys: fields,
+      threshold: 0.4,
+      distance: 100,
+      ignoreLocation: true,
+      ...fuzzyOptions
+    });
+    return fuse.search(t).map((r) => r.item);
+  }
+  return rows.filter(
+    (row) => fields.some((field) => {
+      const val = row[field];
+      return val && String(val).toLowerCase().includes(t);
+    })
+  );
+};
+
+// src/utils/interactionHooks.js
+var import_react = require("react");
+var import_ui_extensions = require("@hubspot/ui-extensions");
+var useDebouncedDispatch = (value, debounceMs, dispatch) => {
+  const debounced = (0, import_ui_extensions.useDebounce)(value, debounceMs > 0 ? debounceMs : 300);
+  const pendingRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (debounceMs <= 0) return;
+    if (pendingRef.current == null) return;
+    if (debounced !== pendingRef.current) return;
+    const next = pendingRef.current;
+    pendingRef.current = null;
+    dispatch(next);
+  }, [debounceMs, debounced, dispatch]);
+  return (0, import_react.useCallback)(
+    (next) => {
+      if (debounceMs > 0) {
+        pendingRef.current = next;
+      } else {
+        pendingRef.current = null;
+        dispatch(next);
+      }
+    },
+    [debounceMs, dispatch]
+  );
+};
+var useSelectionReset = ({ resetKey, enabled, isControlled, clearSelection }) => {
+  const ref = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    if (!enabled || isControlled) {
+      ref.current = resetKey;
+      return;
+    }
+    if (ref.current && ref.current !== resetKey) {
+      clearSelection();
+    }
+    ref.current = resetKey;
+  }, [resetKey, enabled, isControlled, clearSelection]);
+};
+
+// packages/datatable/src/editValidation.js
+var editValidationError = (result) => {
+  if (result === true || result === void 0 || result === null) return null;
+  return typeof result === "string" ? result : "Invalid value";
+};
+
+// packages/datatable/src/DataTable.jsx
+var import_ui_extensions2 = require("@hubspot/ui-extensions");
+var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
+var DATE_PATTERN = /^\d{4}[-/]\d{2}[-/]\d{2}/;
+var BOOL_VALUES = /* @__PURE__ */ new Set(["true", "false", "yes", "no", "0", "1"]);
+var SORT_DIRECTIONS = /* @__PURE__ */ new Set(["ascending", "descending", "none"]);
+var normalizeSortState = (columns, sort) => {
+  const normalized = {};
+  columns.forEach((col) => {
+    if (col.sortable) normalized[col.field] = "none";
+  });
+  if (!sort) return normalized;
+  if (sort.field && SORT_DIRECTIONS.has(sort.direction) && sort.field in normalized) {
+    normalized[sort.field] = sort.direction;
+    return normalized;
+  }
+  Object.keys(normalized).forEach((field) => {
+    const direction = sort[field];
+    if (SORT_DIRECTIONS.has(direction)) normalized[field] = direction;
+  });
+  return normalized;
+};
+var serializeSortState = (sortState) => {
+  const activeField = Object.keys(sortState).find((field) => sortState[field] !== "none");
+  if (!activeField) return null;
+  return { field: activeField, direction: sortState[activeField] };
+};
+var computeAutoWidths = (columns, data) => {
+  if (!data || data.length === 0) return {};
+  const sample = data.slice(0, 50);
+  const results = {};
+  columns.forEach((col) => {
+    if (col.width && col.cellWidth) return;
+    const values = sample.map((row) => row[col.field]).filter((v) => v != null);
+    const strings = values.map((v) => {
+      const s = String(v);
+      const truncLen = typeof col.truncate === "number" ? col.truncate : col.truncate && typeof col.truncate === "object" ? col.truncate.maxLength : null;
+      return truncLen && s.length > truncLen ? s.slice(0, truncLen) : s;
+    });
+    let widthHint = null;
+    let cellWidthHint = null;
+    if (col.editable && col.editType && NARROW_EDIT_TYPES.has(col.editType)) {
+      cellWidthHint = "min";
+    }
+    if (col.truncate === true) {
+      cellWidthHint = cellWidthHint || "min";
+    }
+    if (strings.length > 0) {
+      const lengths = strings.map((s) => s.length);
+      const maxLen = Math.max(...lengths);
+      const uniqueCount = new Set(strings).size;
+      if (values.every((v) => typeof v === "boolean") || strings.every((s) => BOOL_VALUES.has(s.toLowerCase()))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "min";
+      } else if (strings.every((s) => DATE_PATTERN.test(s))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (values.every((v) => typeof v === "number")) {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (uniqueCount <= 5 && maxLen <= 15) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      }
+    }
+    if (col.editable && !NARROW_EDIT_TYPES.has(col.editType) && widthHint === "min") {
+      widthHint = "auto";
+    }
+    results[col.field] = {
+      width: widthHint || "auto",
+      cellWidth: cellWidthHint || "auto"
+    };
+  });
+  return results;
+};
+var BOOLEAN_SELECT_OPTIONS = [
+  { label: "Yes", value: true },
+  { label: "No", value: false }
+];
+var resolveEditOptions = (col, data) => {
+  if (col.editOptions && col.editOptions.length > 0) return col.editOptions;
+  const sample = data.find((row) => row[col.field] != null);
+  if (sample && typeof sample[col.field] === "boolean") return BOOLEAN_SELECT_OPTIONS;
+  return [];
+};
+var DataTable = ({
+  // Data
+  data,
+  columns,
+  renderRow,
+  // Search
+  searchFields = [],
+  searchPlaceholder = "Search...",
+  fuzzySearch = false,
+  // enable fuzzy matching via Fuse.js
+  fuzzyOptions,
+  // custom Fuse.js options (threshold, distance, etc.)
+  showSearch = true,
+  // show the SearchInput in the toolbar
+  // Filters
+  filters = [],
+  showFilterBadges = true,
+  // show active filter chips/badges
+  showClearFiltersButton,
+  // show "Clear all" reset button; defaults to showFilterBadges when omitted
+  filterInlineLimit = 2,
+  // number of filters shown inline before overflow
+  // Pagination
+  pageSize = 10,
+  maxVisiblePageButtons,
+  // max page number buttons to show
+  showButtonLabels = true,
+  // show First/Prev/Next/Last text labels
+  showFirstLastButtons,
+  // show First/Last page buttons (default: auto when pageCount > 5)
+  // Row count
+  title,
+  // optional title shown as demibold text above the table toolbar
+  showRowCount = true,
+  // show "X records" / "X of Y records" text
+  rowCountBold = false,
+  // bold the row count text
+  rowCountText,
+  // custom formatter: (shownOnPage, totalMatching) => string
+  // Table appearance
+  bordered = true,
+  // show table borders
+  flush = true,
+  // remove bottom margin
+  scrollable = false,
+  // allow horizontal overflow with scrollbar
+  // Sorting
+  defaultSort = {},
+  // Grouping
+  groupBy,
+  // Footer
+  footer,
+  // Empty state
+  emptyTitle,
+  emptyMessage,
+  // -----------------------------------------------------------------------
+  // Server-side mode
+  // -----------------------------------------------------------------------
+  serverSide = false,
+  loading = false,
+  // show loading spinner over the table
+  error,
+  // error message string or boolean — shows ErrorState
+  totalCount,
+  // server total (server-side only)
+  page: externalPage,
+  // controlled page (server-side only)
+  searchValue,
+  // controlled search term (server-side only)
+  filterValues: externalFilterValues,
+  // controlled filter values (server-side only)
+  sort: externalSort,
+  // controlled sort state, e.g. { field: "ascending" }
+  searchDebounce = 0,
+  // ms to debounce onSearchChange callback
+  resetPageOnChange = true,
+  // auto-reset to page 1 on search/filter/sort change
+  onSearchChange,
+  // (searchTerm) => void
+  onFilterChange,
+  // (filterValues) => void
+  onSortChange,
+  // (field, direction) => void
+  onPageChange,
+  // (page) => void
+  onParamsChange,
+  // ({ search, filters, sort, page }) => void
+  // -----------------------------------------------------------------------
+  // Row selection
+  // -----------------------------------------------------------------------
+  selectable = false,
+  rowIdField = "id",
+  // field name used as unique row identifier
+  selectedIds: externalSelectedIds,
+  // controlled selection — array of row IDs
+  onSelectionChange,
+  // (selectedIds[]) => void
+  onSelectAllRequest,
+  // server-side: ({ selectedIds, pageIds, totalCount }) => void
+  selectionActions = [],
+  // [{ label, onClick(selectedIds[]), icon?, variant? }]
+  selectionResetKey,
+  // optional key to force clear uncontrolled selection memory
+  resetSelectionOnQueryChange = true,
+  // clear uncontrolled selection on search/filter/sort changes
+  showSelectionBar = true,
+  // show the selection action bar when rows are selected
+  recordLabel,
+  // { singular: "Contact", plural: "Contacts" } — defaults to Record/Records
+  // -----------------------------------------------------------------------
+  // Row actions
+  // -----------------------------------------------------------------------
+  rowActions,
+  // [{ label, onClick(row), icon?, variant? }] or (row) => actions[]
+  hideRowActionsWhenSelectionActive = false,
+  // hide row action column while selected-row action bar is visible
+  // -----------------------------------------------------------------------
+  // Inline editing
+  // -----------------------------------------------------------------------
+  editMode,
+  // "discrete" (click-to-edit) | "inline" (always show inputs)
+  editingRowId,
+  // controlled — row ID currently in full-row edit mode
+  onRowEdit,
+  // (row, field, newValue) => void
+  onRowEditInput,
+  // optional live-input callback: (row, field, inputValue) => void
+  onEditStart,
+  // (row, field, currentValue) => void — fires when editing begins
+  onEditCancel,
+  // (row, field) => void — fires when editing is cancelled without commit
+  // -----------------------------------------------------------------------
+  // Auto-width
+  // -----------------------------------------------------------------------
+  autoWidth = true,
+  // auto-compute column widths from content analysis
+  // -----------------------------------------------------------------------
+  // Labels / i18n
+  // -----------------------------------------------------------------------
+  labels,
+  // override hardcoded UI strings for i18n
+  // -----------------------------------------------------------------------
+  // Render overrides (Phase 3 — full replacement escape hatches)
+  // -----------------------------------------------------------------------
+  renderSelectionBar,
+  // ({ selectedIds, selectedCount, displayCount, countLabel, onSelectAll, onDeselectAll, selectionActions }) => ReactNode
+  renderEmptyState,
+  // ({ title, message }) => ReactNode
+  renderLoadingState,
+  // ({ label }) => ReactNode
+  renderErrorState
+  // ({ error, title, message }) => ReactNode
+}) => {
+  const initialSortState = (0, import_react2.useMemo)(() => {
+    return normalizeSortState(columns, defaultSort);
+  }, [columns, defaultSort]);
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react2.useState)(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
+  const [internalFilterValues, setInternalFilterValues] = (0, import_react2.useState)(() => {
+    const init = {};
+    filters.forEach((f) => {
+      init[f.name] = getEmptyFilterValue(f);
+    });
+    return init;
+  });
+  const [internalSortState, setInternalSortState] = (0, import_react2.useState)(initialSortState);
+  const [currentPage, setCurrentPage] = (0, import_react2.useState)(1);
+  const [showMoreFilters, setShowMoreFilters] = (0, import_react2.useState)(false);
+  const lastAppliedSearchRef = (0, import_react2.useRef)(
+    serverSide && searchValue != null ? searchValue : ""
+  );
+  const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  (0, import_react2.useEffect)(() => {
+    if (!serverSide || searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearchTerm(searchValue);
+  }, [serverSide, searchValue]);
+  const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
+  const externalSortState = (0, import_react2.useMemo)(
+    () => normalizeSortState(columns, externalSort),
+    [columns, externalSort]
+  );
+  const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
+  const activePage = serverSide && externalPage != null ? externalPage : currentPage;
+  (0, import_react2.useEffect)(() => {
+    if (!serverSide) setCurrentPage(1);
+  }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
+  const fireSearchCallback = (0, import_react2.useCallback)((term) => {
+    if (serverSide && onSearchChange) onSearchChange(term);
+  }, [serverSide, onSearchChange]);
+  const fireParamsChange = (0, import_react2.useCallback)((overrides) => {
+    if (!onParamsChange) return;
+    const nextSortState = overrides.sort != null ? normalizeSortState(columns, overrides.sort) : sortState;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : searchTerm,
+      filters: overrides.filters != null ? overrides.filters : filterValues,
+      sort: serializeSortState(nextSortState),
+      page: overrides.page != null ? overrides.page : activePage
+    });
+  }, [onParamsChange, columns, searchTerm, filterValues, sortState, activePage]);
+  const resetPage = (0, import_react2.useCallback)(() => {
+    if (resetPageOnChange) {
+      setCurrentPage(1);
+      if (serverSide && onPageChange) onPageChange(1);
+    }
+  }, [resetPageOnChange, serverSide, onPageChange]);
+  const dispatchSearchChange = (0, import_react2.useCallback)((term) => {
+    lastAppliedSearchRef.current = term;
+    fireSearchCallback(term);
+    fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+  }, [fireSearchCallback, fireParamsChange, resetPageOnChange]);
+  const dispatchSearchDebounced = useDebouncedDispatch(
+    internalSearchTerm,
+    searchDebounce,
+    dispatchSearchChange
+  );
+  const handleSearchChange = (0, import_react2.useCallback)((term) => {
+    setInternalSearchTerm(term);
+    resetPage();
+    dispatchSearchDebounced(term);
+  }, [dispatchSearchDebounced, resetPage]);
+  const handleFilterChange = (0, import_react2.useCallback)((name, value) => {
+    const next = { ...filterValues, [name]: value };
+    setInternalFilterValues(next);
+    if (serverSide && onFilterChange) onFilterChange(next);
+    resetPage();
+    fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [filterValues, serverSide, onFilterChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handleSortChange = (0, import_react2.useCallback)((field) => {
+    const current = sortState[field] || "none";
+    const nextDirection = current === "none" ? "ascending" : current === "ascending" ? "descending" : "none";
+    const reset = {};
+    columns.forEach((col) => {
+      if (col.sortable) reset[col.field] = "none";
+    });
+    const next = nextDirection === "none" ? reset : { ...reset, [field]: nextDirection };
+    setInternalSortState(next);
+    if (serverSide && onSortChange) onSortChange(field, nextDirection);
+    resetPage();
+    fireParamsChange({ sort: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [sortState, columns, serverSide, onSortChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handlePageChange = (0, import_react2.useCallback)((page) => {
+    setCurrentPage(page);
+    if (serverSide && onPageChange) onPageChange(page);
+    fireParamsChange({ page });
+  }, [serverSide, onPageChange, fireParamsChange]);
+  const filteredData = (0, import_react2.useMemo)(() => {
+    if (serverSide) return data;
+    let result = filterRows(data, filters, filterValues);
+    if (searchTerm && searchFields.length > 0) {
+      result = searchRows(result, searchTerm, searchFields, {
+        fuzzy: fuzzySearch,
+        fuzzyOptions
+      });
+    }
+    return result;
+  }, [data, filterValues, searchTerm, filters, searchFields, serverSide, fuzzySearch, fuzzyOptions]);
+  const sortedData = (0, import_react2.useMemo)(() => {
+    if (serverSide) return filteredData;
+    const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
+    if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
+    return [...filteredData].sort((a, b) => {
+      const dir = sortState[activeField] === "ascending" ? 1 : -1;
+      const aVal = a[activeField];
+      const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      if (aVal < bVal) return -dir;
+      if (aVal > bVal) return dir;
+      return 0;
+    });
+  }, [filteredData, sortState, serverSide, columns]);
+  const groupedData = (0, import_react2.useMemo)(() => {
+    if (!groupBy) return null;
+    const source = serverSide ? data : sortedData;
+    const groups = {};
+    source.forEach((row) => {
+      const key = row[groupBy.field] ?? "--";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(row);
+    });
+    let groupKeys = Object.keys(groups);
+    if (groupBy.sort) {
+      if (typeof groupBy.sort === "function") {
+        groupKeys.sort(groupBy.sort);
+      } else {
+        const dir = groupBy.sort === "desc" ? -1 : 1;
+        groupKeys.sort((a, b) => a < b ? -dir : a > b ? dir : 0);
+      }
+    }
+    return groupKeys.map((key) => ({
+      key,
+      label: groupBy.label ? groupBy.label(key, groups[key]) : key,
+      rows: groups[key]
+    }));
+  }, [sortedData, data, groupBy, serverSide]);
+  const [expandedGroups, setExpandedGroups] = (0, import_react2.useState)(() => {
+    if (!groupBy) return /* @__PURE__ */ new Set();
+    const defaultExpanded = groupBy.defaultExpanded !== false;
+    if (defaultExpanded && groupedData) {
+      return new Set(groupedData.map((g) => g.key));
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  (0, import_react2.useEffect)(() => {
+    if (!groupedData) return;
+    const defaultExpanded = (groupBy == null ? void 0 : groupBy.defaultExpanded) !== false;
+    if (defaultExpanded) {
+      setExpandedGroups((prev) => {
+        const next = new Set(prev);
+        groupedData.forEach((g) => next.add(g.key));
+        return next;
+      });
+    }
+  }, [groupedData, groupBy]);
+  const toggleGroup = (0, import_react2.useCallback)((key) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const datasetRows = (0, import_react2.useMemo)(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
+  const pageCount = Math.ceil(totalItems / pageSize);
+  const paginatedRows = (0, import_react2.useMemo)(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
+      (activePage - 1) * pageSize,
+      activePage * pageSize
+    );
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = (0, import_react2.useMemo)(() => {
+    if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
+    const pageRows = new Set(paginatedRows);
+    const rows = [];
+    groupedData.forEach((group) => {
+      const groupPageRows = group.rows.filter((row) => pageRows.has(row));
+      if (groupPageRows.length === 0) return;
+      rows.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        groupPageRows.forEach((row) => rows.push({ type: "data", row }));
+      }
+    });
+    return rows;
+  }, [groupedData, paginatedRows, expandedGroups]);
+  const footerData = serverSide ? data : filteredData;
+  const activeChips = (0, import_react2.useMemo)(() => {
+    const chips = [];
+    filters.forEach((filter) => {
+      const value = filterValues[filter.name];
+      if (!isFilterActive(filter, value)) return;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labels2 = value.map((v) => {
+          var _a;
+          return ((_a = filter.options.find((o) => o.value === v)) == null ? void 0 : _a.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labels2}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (value.from) parts.push(`from ${formatDateChip(value.from)}`);
+        if (value.to) parts.push(`to ${formatDateChip(value.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const option = filter.options.find((o) => o.value === value);
+        chips.push({ key: filter.name, label: `${prefix}: ${(option == null ? void 0 : option.label) || value}` });
+      }
+    });
+    return chips;
+  }, [filterValues, filters]);
+  const handleFilterRemove = (0, import_react2.useCallback)((key) => {
+    if (key === "all") {
+      const cleared = {};
+      filters.forEach((f) => {
+        cleared[f.name] = getEmptyFilterValue(f);
+      });
+      setInternalFilterValues(cleared);
+      if (serverSide && onFilterChange) onFilterChange(cleared);
+      resetPage();
+      fireParamsChange({ filters: cleared, page: resetPageOnChange ? 1 : void 0 });
+    } else {
+      const filter = filters.find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue(filter) : "";
+      const next = { ...filterValues, [key]: emptyVal };
+      setInternalFilterValues(next);
+      if (serverSide && onFilterChange) onFilterChange(next);
+      resetPage();
+      fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+    }
+  }, [filters, filterValues, serverSide, onFilterChange, resetPage, fireParamsChange, resetPageOnChange]);
+  const displayCount = serverSide ? totalCount || data.length : filteredData.length;
+  const totalDataCount = serverSide ? totalCount || data.length : data.length;
+  const shownOnPageCount = displayRows.filter((item) => item.type === "data").length;
+  const pluralLabel = ((recordLabel == null ? void 0 : recordLabel.plural) || "records").toLowerCase();
+  const singularLabel = ((recordLabel == null ? void 0 : recordLabel.singular) || "record").toLowerCase();
+  const countLabel = (n) => n === 1 ? singularLabel : pluralLabel;
+  const resolvedEmptyTitle = emptyTitle || "No results found";
+  const resolvedEmptyMessage = emptyMessage || `No ${pluralLabel} match your search or filter criteria.`;
+  const resolvedSelectedLabel = (labels == null ? void 0 : labels.selected) || ((count, label) => `${count}\xA0${label}\xA0selected`);
+  const resolvedSelectAllLabel = (labels == null ? void 0 : labels.selectAll) || ((count, label) => `Select all ${count} ${label}`);
+  const resolvedDeselectAllLabel = (labels == null ? void 0 : labels.deselectAll) || "Deselect all";
+  const resolvedFiltersButtonLabel = (labels == null ? void 0 : labels.filtersButton) || "Filters";
+  const resolvedClearAllLabel = (labels == null ? void 0 : labels.clearAll) || "Clear all";
+  const resolvedDateFromLabel = (labels == null ? void 0 : labels.dateFrom) || "From";
+  const resolvedDateToLabel = (labels == null ? void 0 : labels.dateTo) || "To";
+  const resolvedLoadingLabel = (labels == null ? void 0 : labels.loading) || `Loading ${pluralLabel}...`;
+  const resolvedLoadingMessage = (labels == null ? void 0 : labels.loadingMessage) || "This should only take a moment.";
+  const resolvedErrorTitle = (labels == null ? void 0 : labels.errorTitle) || "Something went wrong.";
+  const resolvedErrorMessage = (labels == null ? void 0 : labels.errorMessage) || "An error occurred while loading data.";
+  const resolvedRetryMessage = (labels == null ? void 0 : labels.retryMessage) || "Please try again.";
+  const resolvedShowClearFiltersButton = showClearFiltersButton ?? showFilterBadges;
+  const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
+  const [internalSelectedIds, setInternalSelectedIds] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  (0, import_react2.useEffect)(() => {
+    if (externalSelectedIds != null) {
+      setInternalSelectedIds(new Set(externalSelectedIds));
+    }
+  }, [externalSelectedIds]);
+  const selectionQueryKey = (0, import_react2.useMemo)(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: searchTerm,
+      filters: filterValues,
+      sort: serializeSortState(sortState)
+    });
+  }, [searchTerm, filterValues, sortState, resetSelectionOnQueryChange]);
+  const combinedSelectionResetKey = (0, import_react2.useMemo)(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  const clearSelection = (0, import_react2.useCallback)(() => setInternalSelectedIds(/* @__PURE__ */ new Set()), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: externalSelectedIds != null,
+    clearSelection
+  });
+  const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showToolbarCount = showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0);
+  const hasToolbarLeft = showSearch && searchFields.length > 0 || filters.length > 0 || activeChips.length > 0 && (showFilterBadges || resolvedShowClearFiltersButton);
+  const countInTitleRow = !!title && showToolbarCount && !hasToolbarLeft;
+  const countInToolbar = showToolbarCount && !countInTitleRow;
+  const hasToolbarContent = hasToolbarLeft || countInToolbar;
+  const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
+  const applySelection = (0, import_react2.useCallback)((nextSet) => {
+    if (externalSelectedIds == null) {
+      setInternalSelectedIds(nextSet);
+    }
+    if (onSelectionChange) onSelectionChange([...nextSet]);
+  }, [externalSelectedIds, onSelectionChange]);
+  const pageRowIds = (0, import_react2.useMemo)(() => {
+    if (serverSide) {
+      return data.map((row) => row[rowIdField]).filter((id) => id != null);
+    }
+    return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
+  }, [serverSide, data, displayRows, rowIdField]);
+  const allRowIds = (0, import_react2.useMemo)(
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
+  );
+  const handleSelectRow = (0, import_react2.useCallback)((rowId, checked) => {
+    const next = new Set(selectedIds);
+    if (checked) next.add(rowId);
+    else next.delete(rowId);
+    applySelection(next);
+  }, [selectedIds, applySelection]);
+  const handleSelectAll = (0, import_react2.useCallback)((checked) => {
+    const next = new Set(selectedIds);
+    pageRowIds.forEach((id) => {
+      if (checked) next.add(id);
+      else next.delete(id);
+    });
+    applySelection(next);
+  }, [selectedIds, pageRowIds, applySelection]);
+  const allVisibleSelected = (0, import_react2.useMemo)(() => {
+    return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
+  }, [pageRowIds, selectedIds]);
+  const handleSelectAllRows = (0, import_react2.useCallback)(() => {
+    const idsToAdd = serverSide ? pageRowIds : allRowIds;
+    const next = new Set(selectedIds);
+    idsToAdd.forEach((id) => next.add(id));
+    applySelection(next);
+    if (serverSide && onSelectAllRequest) {
+      onSelectAllRequest({
+        selectedIds: [...next],
+        pageIds: pageRowIds,
+        totalCount: totalCount || data.length
+      });
+    }
+  }, [serverSide, pageRowIds, allRowIds, selectedIds, applySelection, onSelectAllRequest, totalCount, data.length]);
+  const handleDeselectAll = (0, import_react2.useCallback)(() => {
+    applySelection(/* @__PURE__ */ new Set());
+  }, [applySelection]);
+  const [editingCell, setEditingCell] = (0, import_react2.useState)(null);
+  const [editValue, setEditValue] = (0, import_react2.useState)(null);
+  const [editError, setEditError] = (0, import_react2.useState)(null);
+  const startEditing = (0, import_react2.useCallback)((rowId, field, currentValue) => {
+    setEditingCell({ rowId, field });
+    setEditValue(currentValue);
+    setEditError(null);
+    if (onEditStart) {
+      const row = data.find((r) => r[rowIdField] === rowId);
+      if (row) onEditStart(row, field, currentValue);
+    }
+  }, [onEditStart, data, rowIdField]);
+  const commitEdit = (0, import_react2.useCallback)((row, field, value, options = {}) => {
+    const { keepEditing = false } = options;
+    const col = columns.find((c) => c.field === field);
+    if (col == null ? void 0 : col.editValidate) {
+      const err = editValidationError(col.editValidate(value, row));
+      if (err) {
+        setEditError(err);
+        return false;
+      }
+    }
+    if (onRowEdit) onRowEdit(row, field, value);
+    if (!keepEditing) {
+      setEditingCell(null);
+      setEditValue(null);
+    } else {
+      setEditValue(value);
+    }
+    setEditError(null);
+    return true;
+  }, [onRowEdit, columns]);
+  const renderEditControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `edit-${rowId}-${col.field}`;
+    const commit = (val) => commitEdit(row, col.field, val);
+    const exitEdit = () => {
+      if (editError) return;
+      if (onEditCancel) onEditCancel(row, col.field);
+      setEditingCell(null);
+      setEditValue(null);
+    };
+    const extra = col.editProps || {};
+    const validate = col.editValidate;
+    const validationProps = validate && editError ? { error: true, validationMessage: editError } : {};
+    const onInputValidate = validate ? (val) => setEditError(editValidationError(validate(val, row))) : void 0;
+    const handleInput = (val) => {
+      setEditValue(val);
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    const maybeExitDatetimeEdit = () => {
+      if (typeof document === "undefined") return;
+      setTimeout(() => {
+        var _a, _b;
+        const activeName = (_b = (_a = document.activeElement) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "name");
+        if (activeName !== `${fieldName}-date` && activeName !== `${fieldName}-time`) {
+          exitEdit();
+        }
+      }, 0);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "number":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "currency":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "stepper":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "select":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Select, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "time":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "datetime":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+          const next = { ...editValue, date: val };
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+          const next = { ...editValue, time: val };
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
+        }, onBlur: maybeExitDatetimeEdit }));
+      case "toggle":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
+      case "checkbox":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
+      default:
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Input, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+    }
+  };
+  const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
+  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  const autoWidths = (0, import_react2.useMemo)(
+    () => autoWidth ? computeAutoWidths(columns, data) : {},
+    [columns, data, autoWidth]
+  );
+  const defaultWidth = scrollable ? "min" : "auto";
+  const getHeaderWidth = (col) => {
+    var _a;
+    return col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.width) || defaultWidth;
+  };
+  const getCellWidth = (col) => {
+    var _a;
+    return col.cellWidth || col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.cellWidth) || defaultWidth;
+  };
+  const [inlineErrors, setInlineErrors] = (0, import_react2.useState)({});
+  const renderInlineControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `inline-${rowId}-${col.field}`;
+    const cellKey = `${rowId}-${col.field}`;
+    const value = row[col.field];
+    const validate = col.editValidate;
+    const fire = (val) => {
+      if (validate) {
+        const err = editValidationError(validate(val, row));
+        if (err) {
+          setInlineErrors((prev) => ({ ...prev, [cellKey]: err }));
+          return;
+        }
+        setInlineErrors((prev) => {
+          const next = { ...prev };
+          delete next[cellKey];
+          return next;
+        });
+      }
+      if (onRowEdit) onRowEdit(row, col.field, val);
+    };
+    const extra = col.editProps || {};
+    const cellError = inlineErrors[cellKey];
+    const validationProps = cellError ? { error: true, validationMessage: cellError } : {};
+    const onInputValidate = validate ? (val) => {
+      const err = editValidationError(validate(val, row));
+      setInlineErrors((prev) => {
+        if (err) return { ...prev, [cellKey]: err };
+        const next = { ...prev };
+        delete next[cellKey];
+        return next;
+      });
+    } : void 0;
+    const emitInput = (val) => {
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+      case "number":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "currency":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "stepper":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "select":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Select, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "time":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "datetime":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+          fire({ ...value, date: val });
+        } }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+          fire({ ...value, time: val });
+        } }));
+      case "toggle":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
+      case "checkbox":
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
+      default:
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Input, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+    }
+  };
+  const renderCellContent = (row, col) => {
+    const rowId = row[rowIdField];
+    if (resolvedEditMode === "inline" && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    if (editingRowId != null && rowId === editingRowId && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    const isEditing = (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+    if (isEditing && col.editable) return renderEditControl(col, row);
+    const rawValue = row[col.field];
+    const rawStr = String(rawValue ?? "");
+    if (col.truncate && rawStr.length > 0) {
+      if (col.truncate === true) {
+        if (col.renderCell) {
+          const content2 = col.renderCell(rawValue, row);
+          if (col.editable) {
+            return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+          }
+          return content2;
+        }
+        if (col.editable) {
+          return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
+        }
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, rawStr);
+      }
+      const maxLen = typeof col.truncate === "number" ? col.truncate : col.truncate.maxLength || 100;
+      if (rawStr.length > maxLen) {
+        const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
+        const content2 = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
+        if (col.editable) {
+          return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+        }
+        return col.renderCell ? content2 : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { truncate: { tooltipText: rawStr } }, content2 || "--");
+      }
+    }
+    const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
+    const isEmpty = content == null || content === "";
+    if (col.editable) {
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.Link,
+        {
+          variant: "dark",
+          onClick: () => startEditing(rowId, col.field, rawValue)
+        },
+        isEmpty ? "--" : content
+      );
+    }
+    return isEmpty ? "--" : content;
+  };
+  const renderFilterControl2 = (filter) => {
+    const type = filter.type || "select";
+    if (type === "multiselect") {
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.MultiSelect,
+        {
+          key: filter.name,
+          name: `filter-${filter.name}`,
+          label: "",
+          placeholder: filter.placeholder || "All",
+          value: filterValues[filter.name] || [],
+          onChange: (val) => handleFilterChange(filter.name, val),
+          options: filter.options
+        }
+      );
+    }
+    if (type === "dateRange") {
+      const rangeVal = filterValues[filter.name] || { from: null, to: null };
+      return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.DateInput,
+        {
+          name: `filter-${filter.name}-from`,
+          label: "",
+          placeholder: resolvedDateFromLabel,
+          format: "medium",
+          value: rangeVal.from,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
+        }
+      ), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.DateInput,
+        {
+          size: "sm",
+          name: `filter-${filter.name}-to`,
+          label: "",
+          placeholder: resolvedDateToLabel,
+          format: "medium",
+          value: rangeVal.to,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, to: val })
+        }
+      ));
+    }
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_ui_extensions2.Select,
+      {
+        key: filter.name,
+        name: `filter-${filter.name}`,
+        variant: "transparent",
+        placeholder: filter.placeholder || "All",
+        value: filterValues[filter.name],
+        onChange: (val) => handleFilterChange(filter.name, val),
+        options: [
+          { label: filter.placeholder || "All", value: "" },
+          ...filter.options
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, title), countInTitleRow && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)), hasToolbarContent && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 3 }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.SearchInput,
+    {
+      name: "datatable-search",
+      placeholder: searchPlaceholder,
+      value: internalSearchTerm,
+      onChange: handleSearchChange
+    }
+  ), filters.slice(0, filterInlineLimit).map(renderFilterControl2), filters.length > filterInlineLimit && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "filter", size: "sm" }),
+    " ",
+    resolvedFiltersButtonLabel
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl2)), activeChips.length > 0 && (showFilterBadges || resolvedShowClearFiltersButton) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), resolvedShowClearFiltersButton && /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => handleFilterRemove("all")
+    },
+    resolvedClearAllLabel
+  )))), countInToolbar && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+    selectedIds,
+    selectedCount: selectedIds.size,
+    displayCount,
+    countLabel,
+    allSelected: selectedIds.size >= (serverSide ? totalCount || data.length : allRowIds.length),
+    onSelectAll: handleSelectAllRows,
+    onDeselectAll: handleDeselectAll,
+    selectionActions
+  }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 3 }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), selectedIds.size < (serverSide ? totalCount || data.length : allRowIds.length) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Button,
+    {
+      key: i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: action.icon, size: "sm" }),
+    " ",
+    action.label
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : (
+    // Same EmptyState layout as the empty state, just the "building" image
+    // + a loading message — so loading and empty match with no layout shift.
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.EmptyState, { title: resolvedLoadingLabel, imageName: "building", layout: "vertical" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, resolvedLoadingMessage))))
+  ) : error ? renderErrorState ? renderErrorState({
+    error,
+    title: typeof error === "string" ? error : resolvedErrorTitle,
+    message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
+  }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, null, resolvedEmptyMessage)))) : /* @__PURE__ */ import_react2.default.createElement(
+    import_ui_extensions2.Table,
+    {
+      bordered,
+      flush,
+      paginated: pageCount > 1,
+      page: activePage,
+      pageCount,
+      onPageChange: handlePageChange,
+      showFirstLastButtons: showFirstLastButtons != null ? showFirstLastButtons : pageCount > 5,
+      showButtonLabels,
+      ...maxVisiblePageButtons != null ? { maxVisiblePageButtons } : {}
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHead, null, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, null, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(
+      import_ui_extensions2.Checkbox,
+      {
+        name: "datatable-select-all",
+        "aria-label": "Select all rows",
+        checked: allVisibleSelected,
+        onChange: handleSelectAll
+      }
+    )), columns.map((col) => {
+      const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
+      return /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.TableHeader,
+        {
+          key: col.field,
+          width: getHeaderWidth(col),
+          align: headerAlign,
+          sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
+          onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
+        },
+        col.description ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, col.label, "\xA0", /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tooltip, null, col.description) }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
+      );
+    }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }))),
+    /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableBody, null, displayRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }), columns.map((col, colIdx) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Link,
+          {
+            variant: "dark",
+            onClick: () => toggleGroup(item.group.key)
+          },
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: expandedGroups.has(item.group.key) ? "downCarat" : "right" }), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, item.group.label))
+        ) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
+      }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(
+        import_ui_extensions2.Checkbox,
+        {
+          name: `select-${item.row[rowIdField]}`,
+          "aria-label": "Select row",
+          checked: selectedIds.has(item.row[rowIdField]),
+          onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
+        }
+      )), columns.map((col) => {
+        const rowId = item.row[rowIdField];
+        const isDiscreteEditing = resolvedEditMode === "discrete" && (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+        const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
+        const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
+        const cellAlign = isShowingInput ? void 0 : col.align;
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+      }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableCell, { width: "min" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
+        const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
+        const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
+        return actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Button,
+          {
+            key: i,
+            variant: action.variant || "transparent",
+            size: "extra-small",
+            onClick: () => action.onClick(item.row)
+          },
+          action.icon && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: action.icon, size: "sm" }),
+          action.label && ` ${action.label}`
+        ));
+      })()))) : renderRow(item.row)
+    )),
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableRow, null, selectable && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" }), columns.map((col) => {
+      const footerDef = col.footer;
+      const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
+      return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { key: col.field, align: col.align }, content);
+    }), showRowActionsColumn && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.TableHeader, { width: "min" })))
+  ));
+};
+
+// packages/kanban/src/Kanban.jsx
+var import_react4 = __toESM(require("react"));
+
+// src/common-components/StyledText.js
+var import_react3 = __toESM(require("react"));
+var import_ui_extensions3 = require("@hubspot/ui-extensions");
+
+// src/common-components/svgDefaults.js
+var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
+var HS_TEXT_COLOR = "#33475b";
+var HS_SUBTLE_BG = "#F5F8FA";
+var HS_TAG_SUBTLE_BORDER = "#7C98B6";
+var HS_TAG_TEXT_COLOR = HS_TEXT_COLOR;
+var HS_TAG_FONT_SIZE = 12;
+var HS_TAG_LINE_HEIGHT = 22;
+var HS_TAG_PADDING_X = 8;
+var HS_TAG_PADDING_Y = 0;
+var HS_TAG_BORDER_RADIUS = 0;
+var HS_TAG_BORDER_WIDTH = 1;
+
+// src/common-components/StyledText.js
+var VARIANT_PRESETS = {
+  bodytext: { fontSize: 14, lineHeight: 24, fontWeight: 400 },
+  microcopy: { fontSize: 12, lineHeight: 18, fontWeight: 400 }
+};
+var WEIGHT_ALIASES = {
+  bold: 700,
+  demibold: 600,
+  regular: 400
+};
+var LINE_DECORATION = {
+  strikethrough: "line-through",
+  underline: "underline"
+};
+var ORIENTATION_ROTATION = {
+  horizontal: 0,
+  "vertical-up": -90,
+  "vertical-down": 90
+};
+var BACKGROUND_PRESETS = {
+  tag: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    borderWidth: HS_TAG_BORDER_WIDTH,
+    radius: HS_TAG_BORDER_RADIUS,
+    paddingX: HS_TAG_PADDING_X,
+    paddingY: HS_TAG_PADDING_Y,
+    height: HS_TAG_LINE_HEIGHT,
+    textColor: HS_TAG_TEXT_COLOR,
+    fontSize: HS_TAG_FONT_SIZE,
+    canvasPaddingX: 0,
+    canvasPaddingY: 0
+  }
+};
+var TAG_VARIANTS = {
+  default: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    textColor: HS_TAG_TEXT_COLOR
+  },
+  success: {
+    color: "#E5F8F6",
+    borderColor: "#00BDA5",
+    textColor: "#00BDA5"
+  },
+  warning: {
+    color: "#FEF8F0",
+    borderColor: "#F5C26B",
+    textColor: "#D39913"
+  },
+  error: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  danger: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  info: {
+    color: "#E5F5F8",
+    borderColor: "#00A4BD",
+    textColor: "#00A4BD"
+  }
+};
+var escapeSvgText = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var applyTextTransform = (text, transform) => {
+  if (!transform || transform === "none") return String(text);
+  const s = String(text);
+  switch (transform) {
+    case "uppercase":
+      return s.toUpperCase();
+    case "lowercase":
+      return s.toLowerCase();
+    case "capitalize":
+      return s.replace(/\b\w/g, (c) => c.toUpperCase());
+    case "sentenceCase":
+      return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+    default:
+      return s;
+  }
+};
+var estimateTextWidth = (text, fontSize) => Math.max(fontSize, Math.round(String(text).length * fontSize * 0.58));
+var resolveBackground = (background) => {
+  if (!background) return null;
+  const preset = background.preset ? BACKGROUND_PRESETS[background.preset] : null;
+  const variant = background.preset === "tag" && background.variant ? TAG_VARIANTS[background.variant] || null : null;
+  return {
+    ...preset || {},
+    ...variant || {},
+    ...background
+  };
+};
+var buildBackgroundRect = ({ background, x, y, width, height }) => {
+  const radius = (background == null ? void 0 : background.radius) ?? 3;
+  const fill = (background == null ? void 0 : background.color) ?? "transparent";
+  const borderWidth = (background == null ? void 0 : background.borderWidth) ?? 0;
+  const borderColor = background == null ? void 0 : background.borderColor;
+  if (!borderColor || borderWidth <= 0) {
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  }
+  const isTagPreset = (background == null ? void 0 : background.preset) === "tag";
+  const fillRect = `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  const strokeInset = borderWidth / 2;
+  const strokeX = x + strokeInset;
+  const strokeY = y + strokeInset;
+  const strokeW = Math.max(0, width - borderWidth);
+  const strokeH = Math.max(0, height - borderWidth);
+  return fillRect + `<rect x="${strokeX}" y="${strokeY}" width="${strokeW}" height="${strokeH}" rx="${Math.max(
+    0,
+    radius - strokeInset
+  )}" fill="none" stroke="${borderColor}" stroke-width="${borderWidth}"${isTagPreset ? ` shape-rendering="crispEdges"` : ""} />`;
+};
+var makeStyledTextDataUri = (text, opts = {}) => {
+  const {
+    variant = "bodytext",
+    format = {},
+    orientation = "horizontal",
+    color: colorProp = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY,
+    background: backgroundProp = null,
+    paddingX: paddingXProp = 4,
+    paddingY: paddingYProp = 2,
+    width: widthOverride,
+    height: heightOverride,
+    fontSize: fontSizeOverride
+  } = opts;
+  const preset = VARIANT_PRESETS[variant] || VARIANT_PRESETS.bodytext;
+  const background = resolveBackground(backgroundProp);
+  const fontSize = fontSizeOverride ?? (background == null ? void 0 : background.fontSize) ?? preset.fontSize;
+  const rawWeight = format.fontWeight;
+  const fontWeight = rawWeight ? WEIGHT_ALIASES[rawWeight] ?? rawWeight : preset.fontWeight;
+  const fontStyle = format.italic ? "italic" : "normal";
+  const textDecoration = LINE_DECORATION[format.lineDecoration] || "none";
+  const transformed = applyTextTransform(text, format.textTransform);
+  const lineHeight = (background == null ? void 0 : background.height) ?? preset.lineHeight ?? fontSize;
+  const color = (background == null ? void 0 : background.textColor) ?? colorProp;
+  const paddingX = (background == null ? void 0 : background.canvasPaddingX) ?? paddingXProp;
+  const paddingY = (background == null ? void 0 : background.canvasPaddingY) ?? paddingYProp;
+  const rotate = typeof orientation === "number" ? orientation : ORIENTATION_ROTATION[orientation] ?? 0;
+  const textW = estimateTextWidth(transformed, fontSize);
+  let pillW = 0;
+  let pillH = 0;
+  if (background) {
+    const bgPadX = background.paddingX ?? 6;
+    const bgPadY = background.paddingY ?? 3;
+    pillW = textW + bgPadX * 2;
+    pillH = background.height ?? Math.max(lineHeight, fontSize + bgPadY * 2);
+  }
+  const intrinsicW = (background ? pillW : textW) + paddingX * 2;
+  const intrinsicH = (background ? pillH : lineHeight) + paddingY * 2;
+  const isOrthoRotation = rotate === 90 || rotate === -90 || rotate === 270;
+  const canvasW = widthOverride ?? (isOrthoRotation ? intrinsicH : intrinsicW);
+  const canvasH = heightOverride ?? (isOrthoRotation ? intrinsicW : intrinsicH);
+  const cx = canvasW / 2;
+  const cy = canvasH / 2;
+  const rectX = cx - pillW / 2;
+  const rectY = cy - pillH / 2;
+  const group = (background ? buildBackgroundRect({
+    background,
+    x: rectX,
+    y: rectY,
+    width: pillW,
+    height: pillH
+  }) : "") + `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamily.replace(/"/g, "&quot;")}" font-size="${fontSize}" font-weight="${fontWeight}" font-style="${fontStyle}" text-decoration="${textDecoration}" fill="${color}">${escapeSvgText(transformed)}</text>`;
+  const wrapped = rotate ? `<g transform="rotate(${rotate} ${cx} ${cy})">${group}</g>` : group;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvasW}" height="${canvasH}">` + wrapped + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width: canvasW,
+    height: canvasH
+  };
+};
+
+// packages/kanban/src/Kanban.jsx
+var import_ui_extensions4 = require("@hubspot/ui-extensions");
+var DEFAULT_DENSITY = "compact";
+var DEFAULT_MAX_CARDS = 10;
+var DEFAULT_MAX_EXPANDED = 50;
+var DEFAULT_COLUMN_WIDTH = 350;
+var MIN_COLUMN_WIDTH = 350;
+var DEFAULT_FILTER_INLINE_LIMIT = 4;
+var DEFAULT_SEARCH_DEBOUNCE = 250;
+var DEFAULT_TITLE_TRUNCATE = 60;
+var applyTruncate = (value, truncate, fallback) => {
+  if (truncate === false) return value;
+  if (typeof value !== "string") return value;
+  const limit = typeof truncate === "number" ? truncate : truncate === true ? fallback || DEFAULT_TITLE_TRUNCATE : fallback || DEFAULT_TITLE_TRUNCATE;
+  if (value.length <= limit) return value;
+  return value.slice(0, limit).trimEnd() + "\u2026";
+};
+var DEFAULT_LABELS = {
+  search: "Search cards...",
+  // Only the total is surfaced — callers asked for a single headline number
+  // rather than a "loaded / total" fraction. Fall back to the bare label when
+  // no total is known.
+  showMore: (_shown, total) => total ? `Show more (${total})` : "Show more",
+  showLess: "Show less",
+  loadMore: (_loaded, total) => total ? `Load more (${total})` : "Load more",
+  loadingMore: "Loading...",
+  retryLoadMore: "Retry",
+  emptyColumn: "\u2014",
+  emptyTitle: "No cards",
+  emptyMessage: "Nothing matches the current filters.",
+  loading: "Loading board...",
+  loadingMessage: "This should only take a moment.",
+  errorTitle: "Something went wrong.",
+  errorMessage: "An error occurred while loading data.",
+  cardCount: (n) => String(n),
+  moveTo: "Move",
+  clearAll: "Clear all",
+  selectAll: (count, label) => `Select all ${count} ${label}`,
+  deselectAll: "Deselect all",
+  selected: (count, label) => `${count}\xA0${label}\xA0selected`,
+  filtersButton: "Filters",
+  dateFrom: "From",
+  dateTo: "To",
+  sortButton: "Sort",
+  sortAscending: "Ascending",
+  sortDescending: "Descending",
+  metricsButton: "Metrics"
+};
+var makeRotatedTagDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "microcopy",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down",
+  background: { preset: "tag" }
+});
+var makeRotatedLabelDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "bodytext",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down"
+});
+var canStageReceiveRow = (stage, row, canMove) => {
+  if (!stage) return false;
+  if (typeof canMove === "function" && !canMove(row, stage.value)) return false;
+  if (typeof stage.canEnter === "function" && !stage.canEnter(row)) return false;
+  return true;
+};
+var isFieldDirectionSortOption = (option) => !!(option && option.field && (option.direction === "asc" || option.direction === "desc"));
+var resolveDividers = (cardDividers, density) => {
+  if (cardDividers === true) {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  if (cardDividers === false) {
+    return { afterTitle: false, afterSubtitle: false, afterBody: false, afterFooter: false };
+  }
+  if (cardDividers && typeof cardDividers === "object") {
+    return {
+      afterTitle: cardDividers.afterTitle ?? false,
+      afterSubtitle: cardDividers.afterSubtitle ?? false,
+      afterBody: cardDividers.afterBody ?? false,
+      afterFooter: cardDividers.afterFooter ?? false
+    };
+  }
+  if (density === "comfortable") {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  return { afterTitle: false, afterSubtitle: false, afterBody: true, afterFooter: false };
+};
+var partitionFields = (cardFields) => {
+  const buckets = { title: null, subtitle: null, meta: [], body: [], footer: [] };
+  for (const field of cardFields || []) {
+    const placement = field.placement || "body";
+    if (placement === "title" && !buckets.title) buckets.title = field;
+    else if (placement === "subtitle" && !buckets.subtitle) buckets.subtitle = field;
+    else if (placement === "meta") buckets.meta.push(field);
+    else if (placement === "footer") buckets.footer.push(field);
+    else buckets.body.push(field);
+  }
+  return buckets;
+};
+var resolveFieldValue = (field, row) => {
+  if (!field) return void 0;
+  if (field.field && row && Object.prototype.hasOwnProperty.call(row, field.field)) {
+    return row[field.field];
+  }
+  return void 0;
+};
+var resolveHref = (href, row) => {
+  if (!href) return null;
+  if (typeof href === "function") return href(row);
+  return href;
+};
+var KanbanCard = ({
+  row,
+  rowId,
+  stage,
+  stages,
+  fields,
+  density,
+  dividers,
+  bodyAs,
+  maxBodyLines,
+  stageControl,
+  stageControlPlacement,
+  canMove,
+  onStageChangeRequest,
+  isChanging,
+  selectable,
+  selected,
+  onToggleSelect,
+  labels
+}) => {
+  const titleHref = fields.title ? resolveHref(fields.title.href, row) : null;
+  const rawTitleValue = fields.title ? fields.title.render ? fields.title.render(resolveFieldValue(fields.title, row), row) : resolveFieldValue(fields.title, row) : null;
+  const titleValue = fields.title && typeof rawTitleValue === "string" ? applyTruncate(rawTitleValue, fields.title.truncate, DEFAULT_TITLE_TRUNCATE) : rawTitleValue;
+  const titleNode = titleHref ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Link, { href: titleHref }, titleValue) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { format: { fontWeight: "demibold" } }, titleValue);
+  const metaNodes = fields.meta.filter((f) => !f.visible || f.visible(row)).map((f) => {
+    const val = resolveFieldValue(f, row);
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { key: f.field || f.label, variant: "microcopy" }, f.render ? f.render(val, row) : val);
+  });
+  const showSubtitle = density === "comfortable" && fields.subtitle;
+  const subtitleNode = showSubtitle ? fields.subtitle.render ? fields.subtitle.render(resolveFieldValue(fields.subtitle, row), row) : resolveFieldValue(fields.subtitle, row) : null;
+  const bodyFields = fields.body.filter((f) => !f.visible || f.visible(row)).slice(0, maxBodyLines);
+  const footerFields = fields.footer.filter((f) => !f.visible || f.visible(row));
+  const footerAlerts = footerFields.slice(0, -1);
+  const footerActionsField = footerFields.length > 0 ? footerFields[footerFields.length - 1] : null;
+  const renderFooterField = (f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val;
+    const key = f.key || f.field || f.label || `footer-${idx}`;
+    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, { key }, rendered);
+  };
+  const stageControlNode = stageControl === "none" ? null : /* @__PURE__ */ import_react4.default.createElement(
+    StageControl,
+    {
+      row,
+      rowId,
+      currentStage: stage,
+      stages,
+      canMove,
+      isChanging,
+      mode: stageControl,
+      onStageChangeRequest,
+      labels
+    }
+  );
+  const titleRow = /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, { flex: 1 }, titleNode), selectable ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Checkbox,
+    {
+      name: `kanban-select-${rowId}`,
+      checked: selected,
+      onChange: () => onToggleSelect(rowId)
+    }
+  ) : null);
+  const metaRow = metaNodes.length === 0 ? null : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "end", align: "center", gap: "xs" }, metaNodes);
+  const bodyRow = bodyFields.length === 0 ? null : bodyAs === "descriptionList" ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.DescriptionList, { direction: "row" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.DescriptionListItem, { key, label: f.label || "" }, rendered);
+  })) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "flush" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { key, variant: "microcopy" }, f.label ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { inline: true, variant: "microcopy" }, `${f.label}: `) : null, rendered);
+  }));
+  const footerAlertsNode = footerAlerts.length === 0 ? null : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs" }, footerAlerts.map((f, idx) => renderFooterField(f, idx)));
+  const footerActionsNode = footerActionsField ? renderFooterField(footerActionsField, footerFields.length - 1) : null;
+  const inlineStageControl = stageControlPlacement === "inline" ? stageControlNode : null;
+  const separateRowStageControl = stageControlPlacement === "separateRow" ? stageControlNode : null;
+  const footerMainRow = inlineStageControl || footerActionsNode ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "between", align: "start", gap: "sm" }, inlineStageControl ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, { alignSelf: "center" }, inlineStageControl) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, null), footerActionsNode ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, { flex: 1 }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "end", align: "start" }, footerActionsNode)) : null) : null;
+  const footerRow = !footerAlertsNode && !footerMainRow ? null : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs" }, footerAlertsNode, footerMainRow);
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, { compact: density === "compact" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: density === "compact" ? "xs" : "sm" }, titleRow, dividers.afterTitle && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Divider, null) : null, subtitleNode ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { variant: "microcopy" }, subtitleNode) : null, dividers.afterSubtitle && subtitleNode && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Divider, null) : null, metaRow, bodyRow, dividers.afterBody && bodyRow && (footerRow || separateRowStageControl) ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Divider, null) : null, footerRow, dividers.afterFooter && footerRow && separateRowStageControl ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Divider, null) : null, separateRowStageControl));
+};
+var StageControl = ({
+  row,
+  rowId,
+  currentStage,
+  stages,
+  canMove,
+  isChanging,
+  mode,
+  onStageChangeRequest,
+  labels
+}) => {
+  if (isChanging) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.LoadingSpinner, { size: "xs" });
+  }
+  const availableStages = (stages || []).filter(
+    (stage) => stage.value === currentStage.value || canStageReceiveRow(stage, row, canMove)
+  );
+  if (mode === "menu") {
+    const targetStages = availableStages.filter((stage) => stage.value !== currentStage.value);
+    if (targetStages.length === 0) {
+      return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "transparent", size: "extra-small", disabled: true }, labels.moveTo);
+    }
+    return /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.Dropdown,
+      {
+        variant: "transparent",
+        buttonText: labels.moveTo,
+        buttonSize: "xs"
+      },
+      targetStages.map((stage) => /* @__PURE__ */ import_react4.default.createElement(
+        import_ui_extensions4.Dropdown.ButtonItem,
+        {
+          key: stage.value,
+          onClick: () => onStageChangeRequest(row, stage.value, currentStage.value)
+        },
+        stage.shortLabel || stage.label
+      ))
+    );
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Select,
+    {
+      name: `stage-${rowId}`,
+      label: "",
+      value: currentStage.value,
+      onChange: (val) => {
+        if (val !== currentStage.value) onStageChangeRequest(row, val, currentStage.value);
+      },
+      options: availableStages.map((stage) => ({
+        label: stage.shortLabel || stage.label,
+        value: stage.value
+      }))
+    }
+  );
+};
+var KanbanColumn = ({
+  stage,
+  rows,
+  bucketCount,
+  totalCount,
+  hasMore,
+  loading,
+  error,
+  onLoadMore,
+  expanded,
+  onToggleExpanded,
+  collapsed,
+  onToggleCollapsed,
+  columnFooter,
+  countDisplay,
+  labels,
+  children
+}) => {
+  const countLabel = labels.cardCount(totalCount != null ? totalCount : bucketCount);
+  const countNode = countDisplay === "text" ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tag, { variant: "default" }, countLabel);
+  if (collapsed) {
+    const rotated = makeRotatedLabelDataUri(stage.label);
+    const rotatedCount = countDisplay === "none" ? null : makeRotatedTagDataUri(countLabel);
+    const stageIdentifier = stage.icon ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: stage.icon, size: "sm", screenReaderText: stage.label }) : /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.Image,
+      {
+        src: rotated.src,
+        width: rotated.width,
+        height: rotated.height,
+        alt: stage.label
+      }
+    );
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, { compact: true }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs", align: "center" }, /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.Button,
+      {
+        variant: "transparent",
+        size: "sm",
+        onClick: onToggleCollapsed,
+        tooltip: `Expand ${stage.label}`
+      },
+      /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "right", size: "sm", screenReaderText: `Expand ${stage.label}` })
+    ), stageIdentifier, rotatedCount ? /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.Image,
+      {
+        src: rotatedCount.src,
+        width: rotatedCount.width,
+        height: rotatedCount.height,
+        alt: `${bucketCount} items`
+      }
+    ) : null));
+  }
+  const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, { compact: true }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Divider, null), children, error ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Link, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Link, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+};
+var SortModalBody = ({ sortOptions, sortValue, onSortChange, labels }) => {
+  const hasFieldDirection = Array.isArray(sortOptions) && sortOptions.length > 0 && sortOptions.every(isFieldDirectionSortOption);
+  if (!hasFieldDirection) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs" }, sortOptions.map((opt) => /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.Button,
+      {
+        key: opt.value,
+        variant: sortValue === opt.value ? "primary" : "secondary",
+        onClick: () => onSortChange(opt.value)
+      },
+      opt.label
+    )));
+  }
+  const currentOption = sortOptions.find((o) => o.value === sortValue) || sortOptions[0];
+  const currentField = currentOption.field;
+  const currentDirection = currentOption.direction;
+  const uniqueFields = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of sortOptions) {
+    if (!seen.has(opt.field)) {
+      seen.add(opt.field);
+      uniqueFields.push({ value: opt.field, label: opt.fieldLabel || opt.field });
+    }
+  }
+  const fieldOpts = sortOptions.filter((o) => o.field === currentField);
+  const ascOption = fieldOpts.find((o) => o.direction === "asc");
+  const descOption = fieldOpts.find((o) => o.direction === "desc");
+  const handleFieldChange = (newField) => {
+    const next = sortOptions.find((o) => o.field === newField && o.direction === currentDirection) || sortOptions.find((o) => o.field === newField && o.direction === "desc") || sortOptions.find((o) => o.field === newField);
+    if (next) onSortChange(next.value);
+  };
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Inline, { align: "center", gap: "small" }, /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Select,
+    {
+      name: "kanban-sort-field",
+      label: "",
+      value: currentField,
+      onChange: handleFieldChange,
+      options: uniqueFields
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Inline, { align: "center", gap: "flush" }, descOption ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      variant: currentDirection === "desc" ? "primary" : "secondary",
+      onClick: () => onSortChange(descOption.value)
+    },
+    labels.sortDescending
+  ) : null, ascOption ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      variant: currentDirection === "asc" ? "primary" : "secondary",
+      onClick: () => onSortChange(ascOption.value)
+    },
+    labels.sortAscending
+  ) : null));
+};
+var renderFilterControl = ({ filter, value, onChange, labels }) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") {
+    return /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.MultiSelect,
+      {
+        key: filter.name,
+        name: `kanban-filter-${filter.name}`,
+        label: "",
+        placeholder: filter.placeholder || "All",
+        value: value || [],
+        onChange: (val) => onChange(filter.name, val),
+        options: filter.options
+      }
+    );
+  }
+  if (type === "dateRange") {
+    const rangeVal = value || { from: null, to: null };
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.DateInput,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-from`,
+        label: "",
+        placeholder: labels.dateFrom,
+        format: "medium",
+        value: rangeVal.from,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, from: val })
+      }
+    ), /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.DateInput,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-to`,
+        label: "",
+        placeholder: labels.dateTo,
+        format: "medium",
+        value: rangeVal.to,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, to: val })
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Select,
+    {
+      key: filter.name,
+      name: `kanban-filter-${filter.name}`,
+      variant: "transparent",
+      placeholder: filter.placeholder || "All",
+      value,
+      onChange: (val) => onChange(filter.name, val),
+      options: [
+        { label: filter.placeholder || "All", value: "" },
+        ...filter.options
+      ]
+    }
+  );
+};
+var renderMetricsPanel = (metrics) => {
+  if (!metrics) return null;
+  if (!Array.isArray(metrics)) return metrics;
+  if (metrics.length === 0) return null;
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Statistics, null, metrics.map((m, i) => /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.StatisticsItem,
+    {
+      key: m.id || m.label || i,
+      label: m.label,
+      number: m.number != null ? String(m.number) : ""
+    },
+    m.trend ? /* @__PURE__ */ import_react4.default.createElement(
+      import_ui_extensions4.StatisticsTrend,
+      {
+        direction: m.trend.direction || "increase",
+        value: m.trend.value,
+        color: m.trend.color
+      }
+    ) : null
+  )));
+};
+var KanbanToolbar = ({
+  showSearch,
+  searchValue,
+  searchPlaceholder,
+  onSearchChange,
+  filters,
+  filterValues,
+  onFilterChange,
+  filterInlineLimit,
+  showFilterBadges,
+  showClearFiltersButton,
+  activeChips,
+  onFilterRemove,
+  sortOptions,
+  sortValue,
+  onSortChange,
+  metrics,
+  showMetrics,
+  onToggleMetrics,
+  labels
+}) => {
+  const [showMoreFilters, setShowMoreFilters] = (0, import_react4.useState)(false);
+  const inlineFilters = (filters || []).slice(0, filterInlineLimit);
+  const overflowFilters = (filters || []).slice(filterInlineLimit);
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, { flex: 3 }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.SearchInput,
+    {
+      name: "kanban-search",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: onSearchChange
+    }
+  ) : null, inlineFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  ), overflowFilters.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "filter", size: "sm" }),
+    " ",
+    labels.filtersButton
+  ) : null), showMoreFilters && overflowFilters.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, overflowFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  )) : null, activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges ? activeChips.map((chip) => /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Tag,
+    {
+      key: chip.key,
+      variant: "default",
+      onDelete: () => onFilterRemove(chip.key)
+    },
+    chip.label
+  )) : null, showClearFiltersButton ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => onFilterRemove("all")
+    },
+    labels.clearAll
+  ) : null) : null)), (sortOptions == null ? void 0 : sortOptions.length) > 0 || metrics ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Box, { flex: 1, alignSelf: "start" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", align: "center", gap: "sm", justify: "end" }, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      variant: "secondary",
+      size: "small",
+      overlay: /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Modal, { id: "kanban-sort-modal", title: labels.sortButton }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.ModalBody, null, /* @__PURE__ */ import_react4.default.createElement(
+        SortModalBody,
+        {
+          sortOptions,
+          sortValue,
+          onSortChange,
+          labels
+        }
+      )))
+    },
+    /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "sortAmtDesc", size: "sm" }),
+    " ",
+    labels.sortButton
+  ) : null, metrics ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: "reports", size: "sm" }), " ", labels.metricsButton) : null)) : null), showMetrics && metrics ? renderMetricsPanel(metrics) : null);
+};
+var DefaultSelectionBar = ({
+  selectedIds,
+  selectedCount,
+  displayCount,
+  countLabel,
+  allSelected,
+  onSelectAll,
+  onDeselectAll,
+  selectionActions,
+  labels
+}) => {
+  const pluralForCount = (n) => countLabel(n);
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, { compact: true }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Inline, { align: "center", justify: "between", gap: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Inline, { align: "center", gap: "small" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof labels.selected === "function" ? labels.selected(selectedCount, pluralForCount(selectedCount)) : `${selectedCount} selected`), !allSelected ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "transparent", size: "extra-small", onClick: onSelectAll }, typeof labels.selectAll === "function" ? labels.selectAll(displayCount, pluralForCount(displayCount)) : labels.selectAll) : null, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Button, { variant: "transparent", size: "extra-small", onClick: onDeselectAll }, labels.deselectAll)), (selectionActions || []).length > 0 ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Inline, { align: "center", gap: "extra-small" }, selectionActions.map((action, i) => /* @__PURE__ */ import_react4.default.createElement(
+    import_ui_extensions4.Button,
+    {
+      key: action.key || action.label || i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon ? /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Icon, { name: action.icon, size: "sm" }) : null,
+    " ",
+    action.label
+  ))) : null));
+};
+var Kanban = ({
+  // --- Data ---
+  data = [],
+  stages = [],
+  groupBy = "status",
+  rowIdField = "id",
+  // --- Card rendering ---
+  renderCard,
+  cardFields,
+  cardDensity = DEFAULT_DENSITY,
+  cardDividers,
+  cardBodyAs = "descriptionList",
+  maxBodyLines,
+  maxCardsPerColumn = DEFAULT_MAX_CARDS,
+  maxCardsExpanded = DEFAULT_MAX_EXPANDED,
+  expandedStages,
+  onExpandedStagesChange,
+  // --- Per-stage pagination ---
+  stageMeta,
+  onLoadMore,
+  // --- Selection ---
+  selectable = false,
+  selectedIds,
+  onSelectionChange,
+  selectionActions,
+  recordLabel,
+  selectionResetKey,
+  resetSelectionOnQueryChange = true,
+  showSelectionBar = true,
+  renderSelectionBar,
+  // --- Stage transitions ---
+  stageControl,
+  stageControlPlacement,
+  onStageChange,
+  isStageChanging,
+  canMove,
+  // --- Toolbar ---
+  showSearch = true,
+  searchFields,
+  searchPlaceholder,
+  searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
+  fuzzySearch = false,
+  fuzzyOptions,
+  filters,
+  filterInlineLimit = DEFAULT_FILTER_INLINE_LIMIT,
+  showFilterBadges = true,
+  showClearFiltersButton,
+  sortOptions,
+  defaultSort,
+  sort,
+  onSortChange,
+  // --- Column level ---
+  columnFooter,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  countDisplay = "tag",
+  collapsedStages,
+  onCollapsedStagesChange,
+  // --- Metrics panel ---
+  metrics,
+  // Array of stat items or a ReactNode for full override
+  showMetrics: controlledShowMetrics,
+  onMetricsToggle,
+  // --- State (controlled) ---
+  searchValue,
+  onSearchChange,
+  filterValues,
+  onFilterChange,
+  onParamsChange,
+  loading = false,
+  error,
+  // --- Labels ---
+  labels: labelsProp,
+  renderEmptyState,
+  renderLoadingState,
+  renderErrorState
+}) => {
+  var _a;
+  const labels = (0, import_react4.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelsProp || {} }), [labelsProp]);
+  const [internalSearch, setInternalSearch] = (0, import_react4.useState)(searchValue != null ? searchValue : "");
+  const [internalFilters, setInternalFilters] = (0, import_react4.useState)(() => {
+    const init = {};
+    (filters || []).forEach((f) => {
+      init[f.name] = getEmptyFilterValue(f);
+    });
+    return init;
+  });
+  const [internalSort, setInternalSort] = (0, import_react4.useState)(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react4.useState)([]);
+  const [internalExpanded, setInternalExpanded] = (0, import_react4.useState)([]);
+  const [internalSelection, setInternalSelection] = (0, import_react4.useState)([]);
+  const [internalShowMetrics, setInternalShowMetrics] = (0, import_react4.useState)(false);
+  const [transitionPrompts, setTransitionPrompts] = (0, import_react4.useState)({});
+  const resolvedShowMetrics = controlledShowMetrics != null ? controlledShowMetrics : internalShowMetrics;
+  const toggleMetrics = (0, import_react4.useCallback)(() => {
+    const next = !resolvedShowMetrics;
+    if (onMetricsToggle) onMetricsToggle(next);
+    if (controlledShowMetrics == null) setInternalShowMetrics(next);
+  }, [resolvedShowMetrics, onMetricsToggle, controlledShowMetrics]);
+  const effectiveColumnWidth = Math.max(MIN_COLUMN_WIDTH, columnWidth || DEFAULT_COLUMN_WIDTH);
+  const resolvedSearch = searchValue != null ? searchValue : internalSearch;
+  const searchInputValue = searchDebounce > 0 ? internalSearch : resolvedSearch;
+  const resolvedFilters = filterValues != null ? filterValues : internalFilters;
+  const resolvedSort = sort != null ? sort : internalSort;
+  const resolvedCollapsed = collapsedStages != null ? collapsedStages : internalCollapsed;
+  const resolvedExpanded = expandedStages != null ? expandedStages : internalExpanded;
+  const resolvedSelection = selectedIds != null ? selectedIds : internalSelection;
+  const searchEnabled = showSearch && Array.isArray(searchFields) && searchFields.length > 0;
+  const stagesByValue = (0, import_react4.useMemo)(() => {
+    const map = {};
+    for (const stage of stages || []) {
+      map[stage.value] = stage;
+    }
+    return map;
+  }, [stages]);
+  const fireParamsChange = (0, import_react4.useCallback)((overrides = {}) => {
+    if (!onParamsChange) return;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : resolvedSearch,
+      filters: overrides.filters != null ? overrides.filters : resolvedFilters,
+      sort: overrides.sort != null ? overrides.sort : resolvedSort || null,
+      collapsedStages: overrides.collapsedStages != null ? overrides.collapsedStages : resolvedCollapsed
+    });
+  }, [onParamsChange, resolvedCollapsed, resolvedFilters, resolvedSearch, resolvedSort]);
+  const lastAppliedSearchRef = (0, import_react4.useRef)(searchValue != null ? searchValue : "");
+  (0, import_react4.useEffect)(() => {
+    if (searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearch(searchValue);
+  }, [searchValue]);
+  const dispatchSearch = (0, import_react4.useCallback)(
+    (val) => {
+      lastAppliedSearchRef.current = val;
+      if (onSearchChange) onSearchChange(val);
+      fireParamsChange({ search: val });
+    },
+    [fireParamsChange, onSearchChange]
+  );
+  const dispatchSearchDebounced = useDebouncedDispatch(internalSearch, searchDebounce, dispatchSearch);
+  const handleSearch = (0, import_react4.useCallback)(
+    (val) => {
+      setInternalSearch(val);
+      dispatchSearchDebounced(val);
+    },
+    [dispatchSearchDebounced]
+  );
+  const handleFilter = (0, import_react4.useCallback)(
+    (name, val) => {
+      const next = { ...resolvedFilters, [name]: val };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [fireParamsChange, onFilterChange, filterValues, resolvedFilters]
+  );
+  const handleFilterRemove = (0, import_react4.useCallback)(
+    (key) => {
+      if (key === "all") {
+        const cleared = {};
+        (filters || []).forEach((f) => {
+          cleared[f.name] = getEmptyFilterValue(f);
+        });
+        if (filterValues == null) setInternalFilters(cleared);
+        if (onFilterChange) onFilterChange(cleared);
+        fireParamsChange({ filters: cleared });
+        return;
+      }
+      const filter = (filters || []).find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue(filter) : "";
+      const next = { ...resolvedFilters, [key]: emptyVal };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [filters, filterValues, fireParamsChange, onFilterChange, resolvedFilters]
+  );
+  const handleSort = (0, import_react4.useCallback)(
+    (val) => {
+      if (onSortChange) onSortChange(val);
+      if (sort == null) setInternalSort(val);
+      fireParamsChange({ sort: val });
+    },
+    [fireParamsChange, onSortChange, sort]
+  );
+  const handleCollapsed = (0, import_react4.useCallback)(
+    (stageValue) => {
+      const next = resolvedCollapsed.includes(stageValue) ? resolvedCollapsed.filter((v) => v !== stageValue) : [...resolvedCollapsed, stageValue];
+      if (onCollapsedStagesChange) onCollapsedStagesChange(next);
+      if (collapsedStages == null) setInternalCollapsed(next);
+      fireParamsChange({ collapsedStages: next });
+    },
+    [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
+  );
+  const handleExpanded = (0, import_react4.useCallback)(
+    (stageValue) => {
+      const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
+      if (onExpandedStagesChange) onExpandedStagesChange(next);
+      if (expandedStages == null) setInternalExpanded(next);
+    },
+    [resolvedExpanded, expandedStages, onExpandedStagesChange]
+  );
+  const handleToggleSelect = (0, import_react4.useCallback)(
+    (rowId) => {
+      const next = resolvedSelection.includes(rowId) ? resolvedSelection.filter((id) => id !== rowId) : [...resolvedSelection, rowId];
+      if (onSelectionChange) onSelectionChange(next);
+      if (selectedIds == null) setInternalSelection(next);
+    },
+    [resolvedSelection, selectedIds, onSelectionChange]
+  );
+  const clearTransitionPrompt = (0, import_react4.useCallback)((rowId) => {
+    setTransitionPrompts((prev) => {
+      if (!Object.prototype.hasOwnProperty.call(prev, rowId)) return prev;
+      const next = { ...prev };
+      delete next[rowId];
+      return next;
+    });
+  }, []);
+  const commitStageChange = (0, import_react4.useCallback)(
+    (row, newStage, oldStage, result) => {
+      clearTransitionPrompt(row[rowIdField]);
+      if (onStageChange) onStageChange(row, newStage, oldStage, result);
+    },
+    [clearTransitionPrompt, onStageChange, rowIdField]
+  );
+  const selectionQueryKey = (0, import_react4.useMemo)(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: resolvedSearch,
+      filters: resolvedFilters,
+      sort: resolvedSort || null
+    });
+  }, [resetSelectionOnQueryChange, resolvedFilters, resolvedSearch, resolvedSort]);
+  const combinedSelectionResetKey = (0, import_react4.useMemo)(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  const clearSelection = (0, import_react4.useCallback)(() => setInternalSelection([]), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: selectedIds != null,
+    clearSelection
+  });
+  const getStageFor = (0, import_react4.useCallback)(
+    (row) => {
+      if (typeof groupBy === "function") return groupBy(row);
+      return row[groupBy];
+    },
+    [groupBy]
+  );
+  const filteredData = (0, import_react4.useMemo)(() => {
+    let result = filterRows(data, filters, resolvedFilters);
+    const searchLower = (resolvedSearch || "").toLowerCase().trim();
+    if (searchEnabled && searchLower) {
+      result = searchRows(result, searchLower, searchFields, {
+        fuzzy: fuzzySearch,
+        fuzzyOptions
+      });
+    }
+    return result;
+  }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
+  const buckets = (0, import_react4.useMemo)(() => {
+    const map = {};
+    for (const stage of stages) map[stage.value] = [];
+    for (const row of filteredData) {
+      const key = getStageFor(row);
+      if (map[key]) {
+        map[key].push(row);
+      } else if (stages.length > 0) {
+        if (!map.__unknown) map.__unknown = [];
+        map.__unknown.push(row);
+      }
+    }
+    return map;
+  }, [filteredData, stages, getStageFor]);
+  const sortComparator = (0, import_react4.useMemo)(() => {
+    if (!sortOptions || !resolvedSort) return null;
+    const opt = sortOptions.find((s) => s.value === resolvedSort);
+    return (opt == null ? void 0 : opt.comparator) || null;
+  }, [sortOptions, resolvedSort]);
+  const sortedBuckets = (0, import_react4.useMemo)(() => {
+    if (!sortComparator) return buckets;
+    const out = {};
+    for (const key of Object.keys(buckets)) {
+      out[key] = [...buckets[key]].sort(sortComparator);
+    }
+    return out;
+  }, [buckets, sortComparator]);
+  const activeChips = (0, import_react4.useMemo)(() => {
+    const chips = [];
+    for (const filter of filters || []) {
+      const val = resolvedFilters[filter.name];
+      if (!isFilterActive(filter, val)) continue;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labelList = val.map((v) => {
+          var _a2;
+          return ((_a2 = filter.options.find((o) => o.value === v)) == null ? void 0 : _a2.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labelList}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (val.from) parts.push(`from ${formatDateChip(val.from)}`);
+        if (val.to) parts.push(`to ${formatDateChip(val.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const opt = filter.options.find((o) => o.value === val);
+        chips.push({ key: filter.name, label: `${prefix}: ${(opt == null ? void 0 : opt.label) || val}` });
+      }
+    }
+    return chips;
+  }, [filters, resolvedFilters]);
+  const partitioned = (0, import_react4.useMemo)(() => partitionFields(cardFields || []), [cardFields]);
+  const dividers = (0, import_react4.useMemo)(() => resolveDividers(cardDividers, cardDensity), [cardDividers, cardDensity]);
+  const resolvedMaxBody = maxBodyLines || (cardDensity === "comfortable" ? 5 : 3);
+  const resolvedStageControl = stageControl || (cardDensity === "comfortable" ? "select" : "menu");
+  const resolvedStageControlPlacement = stageControlPlacement || (resolvedStageControl === "menu" ? "inline" : "separateRow");
+  const handleStageChangeRequest = (0, import_react4.useCallback)(
+    (row, newStage, oldStage) => {
+      var _a2;
+      if (!newStage || newStage === oldStage) return;
+      const targetStage = stagesByValue[newStage];
+      if (!targetStage || !canStageReceiveRow(targetStage, row, canMove)) return;
+      const rowId = row[rowIdField];
+      if ((_a2 = targetStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        setTransitionPrompts((prev) => ({
+          ...prev,
+          [rowId]: {
+            row,
+            fromStage: oldStage,
+            toStage: newStage
+          }
+        }));
+        return;
+      }
+      commitStageChange(row, newStage, oldStage);
+    },
+    [canMove, commitStageChange, rowIdField, stagesByValue]
+  );
+  const renderCardNode = (0, import_react4.useCallback)(
+    (row, stage) => {
+      var _a2;
+      const rowId = row[rowIdField];
+      const activePrompt = transitionPrompts[rowId];
+      const promptStage = activePrompt ? stagesByValue[activePrompt.toStage] : null;
+      if ((_a2 = promptStage == null ? void 0 : promptStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, { key: rowId, compact: cardDensity === "compact" }, promptStage.onEnterRequired.render({
+          row: activePrompt.row,
+          fromStage: activePrompt.fromStage,
+          toStage: activePrompt.toStage,
+          onConfirm: (result) => commitStageChange(activePrompt.row, activePrompt.toStage, activePrompt.fromStage, result),
+          onCancel: () => clearTransitionPrompt(rowId)
+        }));
+      }
+      if (renderCard) {
+        return renderCard(row, {
+          stage,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          density: cardDensity,
+          onStageChange: (newStage) => handleStageChangeRequest(row, newStage, stage.value)
+        });
+      }
+      return /* @__PURE__ */ import_react4.default.createElement(
+        KanbanCard,
+        {
+          key: rowId,
+          row,
+          rowId,
+          stage,
+          stages,
+          fields: partitioned,
+          density: cardDensity,
+          dividers,
+          bodyAs: cardBodyAs,
+          maxBodyLines: resolvedMaxBody,
+          stageControl: resolvedStageControl,
+          stageControlPlacement: resolvedStageControlPlacement,
+          canMove,
+          onStageChangeRequest: handleStageChangeRequest,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          selectable,
+          selected: resolvedSelection.includes(rowId),
+          onToggleSelect: handleToggleSelect,
+          labels
+        }
+      );
+    },
+    [
+      clearTransitionPrompt,
+      commitStageChange,
+      renderCard,
+      rowIdField,
+      partitioned,
+      cardDensity,
+      dividers,
+      resolvedMaxBody,
+      resolvedStageControl,
+      resolvedStageControlPlacement,
+      canMove,
+      isStageChanging,
+      selectable,
+      resolvedSelection,
+      handleStageChangeRequest,
+      handleToggleSelect,
+      labels,
+      stages,
+      stagesByValue,
+      transitionPrompts
+    ]
+  );
+  const totalMatching = filteredData.length;
+  const selectedCount = resolvedSelection.length;
+  const singular = ((recordLabel == null ? void 0 : recordLabel.singular) || "card").toLowerCase();
+  const plural = ((recordLabel == null ? void 0 : recordLabel.plural) || "cards").toLowerCase();
+  const countLabel = (n) => n === 1 ? singular : plural;
+  const resolvedSearchPlaceholder = searchPlaceholder ?? ((recordLabel == null ? void 0 : recordLabel.plural) ? `Search ${plural}...` : labels.search);
+  const selectionBarProps = {
+    selectedIds: resolvedSelection,
+    selectedCount,
+    displayCount: totalMatching,
+    countLabel,
+    allSelected: selectedCount >= totalMatching && totalMatching > 0,
+    onSelectAll: () => {
+      const allIds = filteredData.map((r) => r[rowIdField]);
+      if (onSelectionChange) onSelectionChange(allIds);
+      if (selectedIds == null) setInternalSelection(allIds);
+    },
+    onDeselectAll: () => {
+      if (onSelectionChange) onSelectionChange([]);
+      if (selectedIds == null) setInternalSelection([]);
+    },
+    selectionActions: selectionActions || [],
+    labels
+  };
+  const mainContent = error ? renderErrorState ? renderErrorState({
+    error,
+    title: labels.errorTitle,
+    message: typeof error === "string" ? error : labels.errorMessage
+  }) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Alert, { variant: "danger", title: labels.errorTitle }, typeof error === "string" ? error : labels.errorMessage) : loading && data.length === 0 ? renderLoadingState ? renderLoadingState({ label: labels.loading }) : (
+    // Same EmptyState layout as the empty state (just the "building" image +
+    // a loading message) so loading and empty match with no layout shift.
+    /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, null, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.EmptyState, { title: labels.loading, imageName: "building", layout: "vertical" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, null, labels.loadingMessage))))
+  ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
+    title: labels.emptyTitle,
+    message: labels.emptyMessage
+  }) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Tile, null, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Text, null, labels.emptyMessage)))) : /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
+    const stageRows = sortedBuckets[stage.value] || [];
+    const meta = stageMeta == null ? void 0 : stageMeta[stage.value];
+    const isExpanded = resolvedExpanded.includes(stage.value);
+    const clamp = isExpanded ? maxCardsExpanded : maxCardsPerColumn;
+    const visibleRows = stageRows.slice(0, clamp);
+    const isCollapsed = resolvedCollapsed.includes(stage.value);
+    return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.AutoGrid, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ import_react4.default.createElement(
+      KanbanColumn,
+      {
+        stage,
+        rows: visibleRows,
+        bucketCount: stageRows.length,
+        totalCount: meta == null ? void 0 : meta.totalCount,
+        hasMore: meta == null ? void 0 : meta.hasMore,
+        loading: meta == null ? void 0 : meta.loading,
+        error: meta == null ? void 0 : meta.error,
+        onLoadMore,
+        expanded: isExpanded,
+        onToggleExpanded: () => handleExpanded(stage.value),
+        collapsed: isCollapsed,
+        onToggleCollapsed: () => handleCollapsed(stage.value),
+        columnFooter,
+        countDisplay,
+        labels
+      },
+      visibleRows.map((row) => renderCardNode(row, stage))
+    ));
+  }));
+  const resolvedShowClearFiltersButton = showClearFiltersButton ?? showFilterBadges;
+  return /* @__PURE__ */ import_react4.default.createElement(import_ui_extensions4.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react4.default.createElement(
+    KanbanToolbar,
+    {
+      showSearch: searchEnabled,
+      searchValue: searchInputValue,
+      searchPlaceholder: resolvedSearchPlaceholder,
+      onSearchChange: handleSearch,
+      filters,
+      filterValues: resolvedFilters,
+      onFilterChange: handleFilter,
+      filterInlineLimit,
+      showFilterBadges,
+      showClearFiltersButton: resolvedShowClearFiltersButton,
+      activeChips,
+      onFilterRemove: handleFilterRemove,
+      sortOptions,
+      sortValue: resolvedSort,
+      onSortChange: handleSort,
+      metrics,
+      showMetrics: resolvedShowMetrics,
+      onToggleMetrics: toggleMetrics,
+      labels
+    }
+  ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ import_react4.default.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
+};
+
+// src/utils/objectPath.js
+var getByPath = (obj, path) => {
+  if (!path) return void 0;
+  if (typeof path === "function") return path(obj);
+  return String(path).split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
+};
+
+// src/utils/crmSearchAdapters.js
+var EMPTY_ARRAY = [];
+var EMPTY_OBJECT = {};
+var EMPTY_CRM_PARAMS = { search: "", filters: {}, sort: null };
+var isPlainObject = (value) => value != null && Object.prototype.toString.call(value) === "[object Object]";
+var coerceError = (error) => {
+  if (!error) return false;
+  if (typeof error === "string") return error;
+  if (error.message) return error.message;
+  return true;
+};
+var pickArray = (response) => {
+  if (Array.isArray(response)) return response;
+  if (!response) return EMPTY_ARRAY;
+  return response.results || response.data || response.items || response.records || response.objects || EMPTY_ARRAY;
+};
+var pickTotal = (response, fallbackLength) => {
+  var _a;
+  if (!response || Array.isArray(response)) return fallbackLength;
+  return response.total ?? response.totalCount ?? response.totalResults ?? ((_a = response.paging) == null ? void 0 : _a.total) ?? fallbackLength;
+};
+var normalizeCrmSearchRecord = (record, options = EMPTY_OBJECT) => {
+  const {
+    idField = "id",
+    objectIdField = "objectId",
+    propertiesKey = "properties",
+    flattenProperties = true,
+    propertyValueKey,
+    mapRecord
+  } = options;
+  if (mapRecord) return mapRecord(record);
+  const objectId = (record == null ? void 0 : record.objectId) ?? (record == null ? void 0 : record.id) ?? (record == null ? void 0 : record.hs_object_id) ?? getByPath(record, `${propertiesKey}.hs_object_id`);
+  const properties = (record == null ? void 0 : record[propertiesKey]) || EMPTY_OBJECT;
+  const flattened = {};
+  if (flattenProperties && isPlainObject(properties)) {
+    for (const [key, value] of Object.entries(properties)) {
+      flattened[key] = propertyValueKey && isPlainObject(value) ? value[propertyValueKey] : value;
+    }
+  }
+  return {
+    ...flattenProperties ? flattened : EMPTY_OBJECT,
+    ...record,
+    [idField]: objectId,
+    [objectIdField]: objectId,
+    [propertiesKey]: properties
+  };
+};
+var normalizeCrmSearchRows = (response, options = EMPTY_OBJECT) => {
+  const records = pickArray(response);
+  return records.map((record) => normalizeCrmSearchRecord(record, options));
+};
+var STABLE_SORT_TIEBREAKER = { propertyName: "hs_object_id", direction: "ASCENDING" };
+var withStableSort = (sorts) => {
+  const base = Array.isArray(sorts) ? sorts : [];
+  if (base.some((s) => s && s.propertyName === STABLE_SORT_TIEBREAKER.propertyName)) return base;
+  return [...base, STABLE_SORT_TIEBREAKER];
+};
+var buildCrmSearchConfig = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const {
+    objectType,
+    properties = EMPTY_ARRAY,
+    query,
+    filterGroups,
+    sorts,
+    pageLength,
+    propertyMap = EMPTY_OBJECT,
+    filterMap,
+    sortMap,
+    baseConfig = EMPTY_OBJECT
+  } = options;
+  const mappedFilters = filterMap ? filterMap(params.filters || EMPTY_OBJECT, params) : filterGroups;
+  const mappedSorts = sortMap ? sortMap(params.sort || EMPTY_OBJECT, params) : sorts;
+  const config = {
+    ...baseConfig,
+    objectType: objectType || baseConfig.objectType,
+    properties: properties.length ? properties : baseConfig.properties,
+    query: query ?? params.search ?? baseConfig.query,
+    filterGroups: mappedFilters ?? baseConfig.filterGroups,
+    sorts: withStableSort(mappedSorts ?? baseConfig.sorts),
+    pageLength: pageLength ?? params.pageLength ?? baseConfig.pageLength
+  };
+  if (propertyMap && Object.keys(propertyMap).length && params.filters) {
+    const filters = Object.entries(params.filters).filter(([, value]) => value !== void 0 && value !== null && value !== "" && !(Array.isArray(value) && value.length === 0)).map(([name, value]) => {
+      const propertyName = propertyMap[name] || name;
+      if (Array.isArray(value)) return { propertyName, operator: "IN", values: value };
+      if (isPlainObject(value) && (value.from || value.to)) {
+        const rangeFilters = [];
+        if (value.from) rangeFilters.push({ propertyName, operator: "GTE", value: value.from });
+        if (value.to) rangeFilters.push({ propertyName, operator: "LTE", value: value.to });
+        return rangeFilters;
+      }
+      return { propertyName, operator: "EQ", value };
+    }).flat();
+    if (filters.length) config.filterGroups = [{ filters }];
+  }
+  Object.keys(config).forEach((key) => config[key] === void 0 && delete config[key]);
+  return config;
+};
+var useCrmSearchDataSource = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const {
+    format,
+    row,
+    rowIdField = "id",
+    totalCount,
+    loading,
+    error,
+    mapResponse
+  } = options;
+  const config = (0, import_react5.useMemo)(() => buildCrmSearchConfig(params, options), [params, options]);
+  const response = (0, import_ui_extensions5.useCrmSearch)(config, format);
+  return (0, import_react5.useMemo)(() => {
+    const rows = mapResponse ? mapResponse(response) : normalizeCrmSearchRows(response, { idField: rowIdField, ...row || EMPTY_OBJECT });
+    const resolvedTotal = typeof totalCount === "function" ? totalCount(response) : totalCount ?? pickTotal(response, rows.length);
+    return {
+      data: rows,
+      rows,
+      response,
+      loading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
+      isLoading: typeof loading === "function" ? loading(response) : loading ?? !!(response == null ? void 0 : response.isLoading),
+      error: typeof error === "function" ? error(response) : error ?? coerceError(response == null ? void 0 : response.error),
+      totalCount: resolvedTotal,
+      rowIdField
+    };
+  }, [response, mapResponse, row, rowIdField, totalCount, loading, error]);
+};
+var crmSearchResultToOption = (row, options = EMPTY_OBJECT) => {
+  const {
+    label = "name",
+    value = "objectId",
+    description,
+    fallbackLabel = "Untitled record",
+    mapOption
+  } = options;
+  if (mapOption) return mapOption(row);
+  const option = {
+    label: getByPath(row, label) ?? getByPath(row, "properties.name") ?? fallbackLabel,
+    value: getByPath(row, value) ?? getByPath(row, "id") ?? getByPath(row, "objectId")
+  };
+  const desc = getByPath(row, description);
+  if (desc != null && desc !== "") option.description = desc;
+  return option;
+};
+var useCrmSearchOptions = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+  const dataSource = useCrmSearchDataSource(params, options);
+  const optionConfig = options.option || options;
+  return (0, import_react5.useMemo)(() => ({
+    ...dataSource,
+    options: dataSource.rows.map((row) => crmSearchResultToOption(row, optionConfig))
+  }), [dataSource, optionConfig]);
+};
+var makeCrmSearchSelectField = (field, searchOptions) => ({
+  type: "select",
+  ...field,
+  options: searchOptions.options || EMPTY_ARRAY,
+  loading: searchOptions.loading || searchOptions.isLoading || (field == null ? void 0 : field.loading)
+});
+var makeCrmSearchMultiSelectField = (field, searchOptions) => ({
+  type: "multiselect",
+  ...field,
+  options: searchOptions.options || EMPTY_ARRAY,
+  loading: searchOptions.loading || searchOptions.isLoading || (field == null ? void 0 : field.loading)
+});
+var CRM_OBJECT_TYPES = {
+  contact: "0-1",
+  contacts: "0-1",
+  company: "0-2",
+  companies: "0-2",
+  deal: "0-3",
+  deals: "0-3"
+};
+var prettifyPropertyName = (name) => String(name || "").replace(/^hs_/, "").replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+var inferCrmColumns = (properties = EMPTY_ARRAY) => properties.map((property) => ({
+  field: property,
+  label: prettifyPropertyName(property),
+  sortable: true
+}));
+var normalizeAutoFilterFields = (autoFilters, properties = EMPTY_ARRAY) => {
+  if (!autoFilters) return EMPTY_ARRAY;
+  if (Array.isArray(autoFilters)) return autoFilters;
+  if (typeof autoFilters === "object" && Array.isArray(autoFilters.fields)) return autoFilters.fields;
+  return properties.filter((property) => !["id", "objectId", "hs_object_id", "email", "firstname", "lastname", "name", "domain"].includes(property));
+};
+var buildAutoFiltersFromRows = ({ rows, fields, labelsRef, maxOptions = 25 }) => {
+  if (!fields.length) return EMPTY_ARRAY;
+  for (const row of rows || EMPTY_ARRAY) {
+    for (const field of fields) {
+      const value = getByPath(row, field);
+      if (value == null || value === "" || Array.isArray(value) || isPlainObject(value)) continue;
+      if (!labelsRef.current[field]) labelsRef.current[field] = /* @__PURE__ */ new Map();
+      const map = labelsRef.current[field];
+      if (map.size < maxOptions || map.has(value)) map.set(value, String(value));
+    }
+  }
+  return fields.map((field) => {
+    const map = labelsRef.current[field];
+    if (!map || map.size === 0 || map.size > maxOptions) return null;
+    return {
+      name: field,
+      label: prettifyPropertyName(field),
+      placeholder: `Any ${prettifyPropertyName(field).toLowerCase()}`,
+      options: Array.from(map.entries()).map(([value, label]) => ({ value, label }))
+    };
+  }).filter(Boolean);
+};
+var resolveCrmObjectType = (objectType) => CRM_OBJECT_TYPES[objectType] || objectType;
+var DEFAULT_CRM_FORMAT = { propertiesToFormat: "all" };
+var defaultCrmMapRecord = (record) => ({ objectId: record.objectId, ...record.properties });
+var crmSortsFromState = (sort, propertyMap) => {
+  if (!sort || !sort.field || !sort.direction) return void 0;
+  const propertyName = propertyMap && propertyMap[sort.field] || sort.field;
+  return [{ propertyName, direction: sort.direction === "descending" ? "DESCENDING" : "ASCENDING" }];
+};
+var CrmDataTable = ({
+  objectType,
+  properties = EMPTY_ARRAY,
+  columns,
+  title,
+  pageLength = 100,
+  // CRM batch fetched per request (CRM search max)
+  pageSize = 10,
+  // client-side page size
+  // Hybrid model: fetch ONE batch and do everything client-side while the whole
+  // result set fits in the batch (no refetch). Once a fetch comes back capped
+  // (more matches than the batch), search / filter / sort start refetching a
+  // fresh batch server-side so they reach the whole dataset — pagination always
+  // stays client-side (the broken useCrmSearch cursor is never used). Set
+  // `serverSide` to force server-side querying from the first render.
+  serverSide = false,
+  filters,
+  autoFilters = false,
+  autoFilterMaxOptions = 25,
+  filterMap,
+  propertyMap,
+  sortMap,
+  searchFields,
+  searchPlaceholder,
+  format = DEFAULT_CRM_FORMAT,
+  mapRecord,
+  rowIdField = "objectId",
+  dataTableProps = EMPTY_OBJECT,
+  ...props
+}) => {
+  var _a;
+  const [params, setParams] = (0, import_react5.useState)({ search: "", filters: {}, sort: null });
+  const resolvedProperties = (0, import_react5.useMemo)(() => properties, [properties]);
+  const resolvedColumns = (0, import_react5.useMemo)(
+    () => columns || inferCrmColumns(resolvedProperties),
+    [columns, resolvedProperties]
+  );
+  const resolvedSearchFields = searchFields || resolvedProperties;
+  const autoFilterFields = (0, import_react5.useMemo)(
+    () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
+    [autoFilters, resolvedProperties]
+  );
+  const autoFilterLabelsRef = (0, import_react5.useRef)({});
+  const defaultPropertyMap = (0, import_react5.useMemo)(
+    () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
+    [resolvedProperties]
+  );
+  const effectivePropertyMap = propertyMap || defaultPropertyMap;
+  const resolvedSortMap = (0, import_react5.useMemo)(
+    () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
+    [sortMap, effectivePropertyMap]
+  );
+  const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
+  const dataSourceOptions = (0, import_react5.useMemo)(
+    () => ({
+      objectType: resolveCrmObjectType(objectType),
+      properties: resolvedProperties,
+      pageLength,
+      format,
+      filterMap,
+      propertyMap: effectivePropertyMap,
+      sortMap: resolvedSortMap,
+      rowIdField,
+      row: { idField: rowIdField, mapRecord: resolvedMapRecord }
+    }),
+    [objectType, resolvedProperties, pageLength, format, filterMap, effectivePropertyMap, resolvedSortMap, rowIdField, resolvedMapRecord]
+  );
+  const [serverQuerying, setServerQuerying] = (0, import_react5.useState)(!!serverSide);
+  const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
+  const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
+  (0, import_react5.useEffect)(() => {
+    if (!serverQuerying && typeof dataSource.totalCount === "number" && dataSource.totalCount > dataSource.data.length) {
+      setServerQuerying(true);
+    }
+  }, [serverQuerying, dataSource.totalCount, dataSource.data.length]);
+  const generatedFilters = (0, import_react5.useMemo)(
+    () => buildAutoFiltersFromRows({
+      rows: dataSource.data,
+      fields: autoFilterFields,
+      labelsRef: autoFilterLabelsRef,
+      maxOptions: autoFilterMaxOptions
+    }),
+    [dataSource.data, autoFilterFields, autoFilterMaxOptions]
+  );
+  const resolvedFilters = filters || generatedFilters;
+  const table = import_react5.default.createElement(DataTable, {
+    title: title || `${prettifyPropertyName(objectType)} records`,
+    data: dataSource.data,
+    loading: dataSource.loading || ((_a = dataSource.response) == null ? void 0 : _a.isRefetching),
+    error: dataSource.error,
+    columns: resolvedColumns,
+    rowIdField,
+    pageSize,
+    filters: resolvedFilters,
+    searchFields: resolvedSearchFields,
+    searchPlaceholder: searchPlaceholder || `Search ${prettifyPropertyName(objectType).toLowerCase()}...`,
+    searchDebounce: 300,
+    onParamsChange: (next) => {
+      setParams((prev) => ({ ...prev, search: next.search, filters: next.filters, sort: next.sort }));
+    },
+    ...dataTableProps,
+    ...props
+  });
+  const total = dataSource.totalCount;
+  const capped = typeof total === "number" && total > dataSource.data.length;
+  if (!capped) return table;
+  return import_react5.default.createElement(
+    import_ui_extensions5.Flex,
+    { direction: "column", gap: "xs" },
+    import_react5.default.createElement(
+      import_ui_extensions5.Text,
+      { variant: "microcopy" },
+      `Showing the first ${dataSource.data.length} of ${total} matching. Refine your search or filters to narrow the results.`
+    ),
+    table
+  );
+};
+var CrmKanban = ({
+  objectType,
+  properties = EMPTY_ARRAY,
+  groupBy,
+  stages,
+  stageLabels,
+  // object { value: label } or (value) => label
+  title,
+  pageLength = 100,
+  serverSide = false,
+  filters,
+  autoFilters = false,
+  autoFilterMaxOptions = 25,
+  filterMap,
+  propertyMap,
+  sortMap,
+  searchFields,
+  searchPlaceholder,
+  format = DEFAULT_CRM_FORMAT,
+  mapRecord,
+  rowIdField = "objectId",
+  kanbanProps = EMPTY_OBJECT,
+  ...props
+}) => {
+  var _a;
+  const [params, setParams] = (0, import_react5.useState)(EMPTY_CRM_PARAMS);
+  const resolvedProperties = (0, import_react5.useMemo)(() => properties, [properties]);
+  const resolvedSearchFields = searchFields || resolvedProperties;
+  const autoFilterFields = (0, import_react5.useMemo)(
+    () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
+    [autoFilters, resolvedProperties]
+  );
+  const autoFilterLabelsRef = (0, import_react5.useRef)({});
+  const defaultPropertyMap = (0, import_react5.useMemo)(
+    () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
+    [resolvedProperties]
+  );
+  const effectivePropertyMap = propertyMap || defaultPropertyMap;
+  const resolvedSortMap = (0, import_react5.useMemo)(
+    () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
+    [sortMap, effectivePropertyMap]
+  );
+  const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
+  const dataSourceOptions = (0, import_react5.useMemo)(
+    () => ({
+      objectType: resolveCrmObjectType(objectType),
+      properties: resolvedProperties,
+      pageLength,
+      format,
+      filterMap,
+      propertyMap: effectivePropertyMap,
+      sortMap: resolvedSortMap,
+      rowIdField,
+      row: { idField: rowIdField, mapRecord: resolvedMapRecord }
+    }),
+    [objectType, resolvedProperties, pageLength, format, filterMap, effectivePropertyMap, resolvedSortMap, rowIdField, resolvedMapRecord]
+  );
+  const [serverQuerying, setServerQuerying] = (0, import_react5.useState)(!!serverSide);
+  const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
+  const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
+  (0, import_react5.useEffect)(() => {
+    if (!serverQuerying && typeof dataSource.totalCount === "number" && dataSource.totalCount > dataSource.data.length) {
+      setServerQuerying(true);
+    }
+  }, [serverQuerying, dataSource.totalCount, dataSource.data.length]);
+  const generatedFilters = (0, import_react5.useMemo)(
+    () => buildAutoFiltersFromRows({
+      rows: dataSource.data,
+      fields: autoFilterFields,
+      labelsRef: autoFilterLabelsRef,
+      maxOptions: autoFilterMaxOptions
+    }),
+    [dataSource.data, autoFilterFields, autoFilterMaxOptions]
+  );
+  const resolvedFilters = filters || generatedFilters;
+  const resolvedStages = (0, import_react5.useMemo)(() => {
+    if (stages) return stages;
+    const seen = [];
+    for (const row of dataSource.data) {
+      const value = typeof groupBy === "function" ? groupBy(row) : row[groupBy];
+      if (value != null && value !== "" && !seen.includes(value)) seen.push(value);
+    }
+    return seen.map((value) => ({
+      value,
+      label: typeof stageLabels === "function" ? stageLabels(value) : stageLabels && stageLabels[value] || prettifyPropertyName(String(value))
+    }));
+  }, [stages, stageLabels, dataSource.data, groupBy]);
+  const board = import_react5.default.createElement(Kanban, {
+    title: title || `${prettifyPropertyName(objectType)} board`,
+    data: dataSource.data,
+    loading: dataSource.loading || ((_a = dataSource.response) == null ? void 0 : _a.isRefetching),
+    error: dataSource.error,
+    rowIdField,
+    groupBy,
+    stages: resolvedStages,
+    filters: resolvedFilters,
+    searchFields: resolvedSearchFields,
+    searchPlaceholder: searchPlaceholder || `Search ${prettifyPropertyName(objectType).toLowerCase()}...`,
+    searchDebounce: 300,
+    onParamsChange: (next) => {
+      setParams((prev) => ({ ...prev, search: next.search, filters: next.filters }));
+    },
+    ...kanbanProps,
+    ...props
+  });
+  const total = dataSource.totalCount;
+  const capped = typeof total === "number" && total > dataSource.data.length;
+  if (!capped) return board;
+  return import_react5.default.createElement(
+    import_ui_extensions5.Flex,
+    { direction: "column", gap: "xs" },
+    import_react5.default.createElement(
+      import_ui_extensions5.Text,
+      { variant: "microcopy" },
+      `Showing the first ${dataSource.data.length} of ${total} matching. Refine your search or filters to narrow the results.`
+    ),
+    board
+  );
+};
+
 // src/utils/formatters.js
 var DEFAULT_LOCALE = "en-US";
 var formatCurrency = (value, { locale = DEFAULT_LOCALE, currency = "USD", maximumFractionDigits = 0, ...options } = {}) => new Intl.NumberFormat(locale, {
@@ -352,8 +3245,12 @@ var deriveCardFieldsFromColumns = (columns, opts = {}) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CrmDataTable,
+  CrmKanban,
+  buildCrmSearchConfig,
   buildOptions,
   createStatusTagSortComparator,
+  crmSearchResultToOption,
   deriveCardFieldsFromColumns,
   findOptionLabel,
   formatCurrency,
@@ -367,5 +3264,12 @@ var deriveCardFieldsFromColumns = (columns, opts = {}) => {
   isDateTimeValueObject,
   isDateValueObject,
   isTimeValueObject,
-  sumBy
+  makeCrmSearchMultiSelectField,
+  makeCrmSearchSelectField,
+  normalizeCrmSearchRecord,
+  normalizeCrmSearchRows,
+  resolveCrmObjectType,
+  sumBy,
+  useCrmSearchDataSource,
+  useCrmSearchOptions
 });