hs-uix 2.1.0 → 2.2.0

package/dist/common-components.mjs

@@ -246,6 +246,7 @@ var HS_TEXT_COLOR = "#33475b";
 var HS_SUBTLE_BG = "#F5F8FA";
 var HS_MUTED_TEXT = "#7C98B6";
 var HS_NEUTRAL_CHIP = "#CBD6E2";
+var SKELETON_FILL = "#DFE3EB";
 var HS_TAG_SUBTLE_BORDER = "#7C98B6";
 var HS_TAG_TEXT_COLOR = HS_TEXT_COLOR;
 var HS_TAG_FONT_SIZE = 12;
@@ -404,10 +405,169 @@ import React9, { useState as useState2, useMemo, useEffect as useEffect2, useCal
 
 // src/utils/query.js
 import Fuse from "fuse.js";
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  if (Object.prototype.hasOwnProperty.call(filter, "emptyValue")) return filter.emptyValue;
+  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);
+  if (value == null) return false;
+  if (Object.prototype.hasOwnProperty.call(filter, "emptyValue")) return value !== filter.emptyValue;
+  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 getEmptyFilterValues = (filters, options = {}) => {
+  const out = {};
+  for (const filter of filters || []) {
+    out[filter.name] = typeof options.getEmptyValue === "function" ? options.getEmptyValue(filter) : getEmptyFilterValue(filter);
+  }
+  return out;
+};
+var resetFilterValues = (filters, values = {}, key = "all", options = {}) => {
+  if (key === "all") return getEmptyFilterValues(filters, options);
+  const filter = (filters || []).find((item) => item.name === key);
+  const emptyValue = filter ? typeof options.getEmptyValue === "function" ? options.getEmptyValue(filter) : getEmptyFilterValue(filter) : options.fallbackEmptyValue ?? "";
+  return { ...values || {}, [key]: emptyValue };
+};
+var findOptionLabel = (filter, value) => {
+  var _a;
+  return ((_a = (filter.options || []).find((option) => option.value === value)) == null ? void 0 : _a.label) || value;
+};
+var buildActiveFilterChips = (filters, values = {}, options = {}) => {
+  const chips = [];
+  const isActive = options.isFilterActive || isFilterActive;
+  const dateFormatter = options.formatDate || formatDateChip;
+  const dateJoiner = options.dateJoiner ?? " ";
+  for (const filter of filters || []) {
+    const value = values == null ? void 0 : values[filter.name];
+    if (!isActive(filter, value)) continue;
+    const type = filter.type || "select";
+    const prefix = filter.chipLabel || filter.placeholder || filter.label || filter.name;
+    if (type === "multiselect") {
+      const labels = (Array.isArray(value) ? value : []).map((item) => findOptionLabel(filter, item)).join(", ");
+      chips.push({ key: filter.name, label: `${prefix}: ${labels}` });
+    } else if (type === "dateRange") {
+      const parts = [];
+      if (value == null ? void 0 : value.from) parts.push(`${options.dateFromPrefix ?? "from "}${dateFormatter(value.from)}`);
+      if (value == null ? void 0 : value.to) parts.push(`${options.dateToPrefix ?? "to "}${dateFormatter(value.to)}`);
+      chips.push({ key: filter.name, label: `${prefix}: ${parts.join(dateJoiner)}` });
+    } else {
+      chips.push({ key: filter.name, label: `${prefix}: ${findOptionLabel(filter, value)}` });
+    }
+  }
+  return chips;
+};
+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 Fuse(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
 import { useRef, useEffect, useCallback } from "react";
 import { useDebounce } from "@hubspot/ui-extensions";
+var useDebouncedDispatch = (value, debounceMs, dispatch) => {
+  const debounced = useDebounce(value, debounceMs > 0 ? debounceMs : 300);
+  const pendingRef = useRef(null);
+  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 useCallback(
+    (next) => {
+      if (debounceMs > 0) {
+        pendingRef.current = next;
+      } else {
+        pendingRef.current = null;
+        dispatch(next);
+      }
+    },
+    [debounceMs, dispatch]
+  );
+};
+var useSelectionReset = ({ resetKey, enabled, isControlled, clearSelection }) => {
+  const ref = useRef("");
+  useEffect(() => {
+    if (!enabled || isControlled) {
+      ref.current = resetKey;
+      return;
+    }
+    if (ref.current && ref.current !== resetKey) {
+      clearSelection();
+    }
+    ref.current = resetKey;
+  }, [resetKey, enabled, isControlled, clearSelection]);
+};
 
 // src/common-components/CollectionCount.js
 import React5 from "react";
@@ -717,7 +877,7 @@ var GENERATED_ICONS = {
   "ZoomOut": { "viewBox": "0 0 32 32", "paths": ["M14.42 26.75c2.85 0 5.47-.97 7.56-2.6l-.03.02 5.28 5.34a1.619 1.619 0 0 0 2.76-1.15c0-.45-.18-.85-.47-1.14l-5.33-5.33c1.59-2.06 2.55-4.68 2.55-7.52C26.74 7.54 21.2 2 14.37 2S2 7.55 2 14.38s5.54 12.37 12.37 12.37h.05m0-21.55c5.06 0 9.16 4.1 9.16 9.16s-4.1 9.16-9.16 9.16-9.16-4.1-9.16-9.16c.01-5.05 4.11-9.14 9.16-9.15Zm-4.31 10.78h8.62c.89 0 1.62-.72 1.62-1.62s-.72-1.62-1.62-1.62h-8.62c-.89 0-1.62.72-1.62 1.62s.72 1.62 1.62 1.62"] }
 };
 
-// src/common-components/Icon.js
+// src/common-components/nativeIconNames.js
 var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "add",
   "appointment",
@@ -729,12 +889,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -763,13 +923,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -910,6 +1070,8 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "zoomIn",
   "zoomOut"
 ]);
+
+// src/common-components/Icon.js
 var NATIVE_COLORS = /* @__PURE__ */ new Set(["inherit", "alert", "warning", "success"]);
 var NATIVE_SIZE_TOKENS = {
   sm: "sm",
@@ -1151,6 +1313,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h3(DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -1159,6 +1322,7 @@ var CollectionFilterControl = ({
       h3(Icon, { name: "right", size: "sm" }),
       h3(DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1291,6 +1455,51 @@ var CollectionToolbar = ({
   );
 };
 
+// src/datatable/editValidation.js
+var editValidationError = (result) => {
+  if (result === true || result === void 0 || result === null) return null;
+  return typeof result === "string" ? result : "Invalid value";
+};
+
+// src/datatable/rowExpansion.js
+var extractRowId = (row, rowIdField = "id", fallback = void 0) => {
+  const id = row == null ? void 0 : row[rowIdField];
+  return id != null ? id : fallback;
+};
+var normalizeExpandedIds = (ids) => {
+  if (ids == null) return /* @__PURE__ */ new Set();
+  const list = ids instanceof Set ? [...ids] : Array.isArray(ids) ? ids : [ids];
+  return new Set(list.filter((id) => id != null));
+};
+var expandRowId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  if (expandSingle) return /* @__PURE__ */ new Set([rowId]);
+  const next = new Set(expandedIds);
+  next.add(rowId);
+  return next;
+};
+var collapseRowId = (expandedIds, rowId) => {
+  if (rowId == null || !expandedIds.has(rowId)) return expandedIds;
+  const next = new Set(expandedIds);
+  next.delete(rowId);
+  return next;
+};
+var toggleExpandedId = (expandedIds, rowId, expandSingle = false) => {
+  if (rowId == null) return expandedIds;
+  return expandedIds.has(rowId) ? collapseRowId(expandedIds, rowId) : expandRowId(expandedIds, rowId, expandSingle);
+};
+var withDetailRows = (items, expandedIds, rowIdField = "id") => {
+  if (!expandedIds || expandedIds.size === 0) return items;
+  const out = [];
+  items.forEach((item) => {
+    out.push(item);
+    if (item.type === "data" && expandedIds.has(extractRowId(item.row, rowIdField))) {
+      out.push({ type: "detail", row: item.row });
+    }
+  });
+  return out;
+};
+
 // src/datatable/DataTable.jsx
 import {
   Box as Box2,
@@ -1321,10 +1530,1123 @@ import {
   Toggle,
   Tooltip
 } from "@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
+  toolbarLeftFlex = 3,
+  // left toolbar column flex weight (search/filters/chips)
+  toolbarRightFlex = 1,
+  // right toolbar column flex weight (count/actions)
+  // 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)
+  clientTotalCount,
+  // optional client-mode total when data is lazy-loaded
+  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
+  // -----------------------------------------------------------------------
+  // Row expansion (detail rows)
+  // -----------------------------------------------------------------------
+  renderExpandedRow,
+  // (row) => ReactNode — providing this enables the feature
+  expandedRowIds: externalExpandedRowIds,
+  // controlled — array of expanded row IDs
+  defaultExpandedRowIds,
+  // uncontrolled — initially expanded row IDs
+  onExpandedRowsChange,
+  // (expandedRowIds[]) => void
+  expandOn = "icon",
+  // "icon" (chevron toggle column) | "row" (click row content)
+  expandSingle = false,
+  // accordion mode — expanding a row collapses the others
+  // -----------------------------------------------------------------------
+  // 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 = useMemo(() => {
+    return normalizeSortState(columns, defaultSort);
+  }, [columns, defaultSort]);
+  const [internalSearchTerm, setInternalSearchTerm] = useState2(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
+  const [internalFilterValues, setInternalFilterValues] = useState2(() => getEmptyFilterValues(filters));
+  const [internalSortState, setInternalSortState] = useState2(initialSortState);
+  const [currentPage, setCurrentPage] = useState2(1);
+  const lastAppliedSearchRef = useRef2(
+    serverSide && searchValue != null ? searchValue : ""
+  );
+  const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  useEffect2(() => {
+    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 = useMemo(
+    () => normalizeSortState(columns, externalSort),
+    [columns, externalSort]
+  );
+  const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
+  const activePage = serverSide && externalPage != null ? externalPage : currentPage;
+  useEffect2(() => {
+    if (!serverSide) setCurrentPage(1);
+  }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
+  const fireSearchCallback = useCallback2((term) => {
+    if (serverSide && onSearchChange) onSearchChange(term);
+  }, [serverSide, onSearchChange]);
+  const fireParamsChange = useCallback2((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 = useCallback2(() => {
+    if (resetPageOnChange) {
+      setCurrentPage(1);
+      if (serverSide && onPageChange) onPageChange(1);
+    }
+  }, [resetPageOnChange, serverSide, onPageChange]);
+  const dispatchSearchChange = useCallback2((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 = useCallback2((term) => {
+    setInternalSearchTerm(term);
+    resetPage();
+    dispatchSearchDebounced(term);
+  }, [dispatchSearchDebounced, resetPage]);
+  const handleFilterChange = useCallback2((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 = useCallback2((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 = useCallback2((page) => {
+    setCurrentPage(page);
+    if (serverSide && onPageChange) onPageChange(page);
+    fireParamsChange({ page });
+  }, [serverSide, onPageChange, fireParamsChange]);
+  const filteredData = 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 = 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 = 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] = useState2(() => {
+    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();
+  });
+  useEffect2(() => {
+    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 = useCallback2((key) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const datasetRows = useMemo(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const resolvedTotalCount = typeof totalCount === "number" ? totalCount : void 0;
+  const resolvedClientTotalCount = typeof clientTotalCount === "number" ? clientTotalCount : void 0;
+  const totalItems = serverSide ? resolvedTotalCount || data.length : Math.max(datasetRows.length, resolvedClientTotalCount || 0);
+  const pageCount = Math.ceil(totalItems / pageSize);
+  const paginatedRows = useMemo(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
+      (activePage - 1) * pageSize,
+      activePage * pageSize
+    );
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = 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 expandable = typeof renderExpandedRow === "function";
+  const showExpandColumn = expandable && expandOn === "icon";
+  const [internalExpandedRowIds, setInternalExpandedRowIds] = useState2(
+    () => normalizeExpandedIds(defaultExpandedRowIds)
+  );
+  const expandedRowIds = useMemo(
+    () => externalExpandedRowIds != null ? normalizeExpandedIds(externalExpandedRowIds) : internalExpandedRowIds,
+    [externalExpandedRowIds, internalExpandedRowIds]
+  );
+  const toggleRowExpanded = useCallback2((rowId) => {
+    if (rowId == null) return;
+    const next = toggleExpandedId(expandedRowIds, rowId, expandSingle);
+    if (externalExpandedRowIds == null) setInternalExpandedRowIds(next);
+    if (onExpandedRowsChange) onExpandedRowsChange([...next]);
+  }, [expandedRowIds, expandSingle, externalExpandedRowIds, onExpandedRowsChange]);
+  const renderedRows = useMemo(() => {
+    if (!expandable) return displayRows;
+    return withDetailRows(displayRows, expandedRowIds, rowIdField);
+  }, [expandable, displayRows, expandedRowIds, rowIdField]);
+  const footerData = serverSide ? data : filteredData;
+  const activeChips = useMemo(
+    () => buildActiveFilterChips(filters, filterValues),
+    [filterValues, filters]
+  );
+  const handleFilterRemove = useCallback2((key) => {
+    const next = resetFilterValues(filters, filterValues, key);
+    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 ? resolvedTotalCount || data.length : Math.max(filteredData.length, resolvedClientTotalCount || 0);
+  const totalDataCount = serverSide ? resolvedTotalCount || data.length : Math.max(data.length, resolvedClientTotalCount || 0);
+  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] = useState2(/* @__PURE__ */ new Set());
+  useEffect2(() => {
+    if (externalSelectedIds != null) {
+      setInternalSelectedIds(new Set(externalSelectedIds));
+    }
+  }, [externalSelectedIds]);
+  const selectionQueryKey = useMemo(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: searchTerm,
+      filters: filterValues,
+      sort: serializeSortState(sortState)
+    });
+  }, [searchTerm, filterValues, sortState, resetSelectionOnQueryChange]);
+  const combinedSelectionResetKey = useMemo(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  const clearSelection = useCallback2(() => 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 = useCallback2((nextSet) => {
+    if (externalSelectedIds == null) {
+      setInternalSelectedIds(nextSet);
+    }
+    if (onSelectionChange) onSelectionChange([...nextSet]);
+  }, [externalSelectedIds, onSelectionChange]);
+  const pageRowIds = 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 = useMemo(
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
+  );
+  const handleSelectRow = useCallback2((rowId, checked) => {
+    const next = new Set(selectedIds);
+    if (checked) next.add(rowId);
+    else next.delete(rowId);
+    applySelection(next);
+  }, [selectedIds, applySelection]);
+  const handleSelectAll = useCallback2((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 = useMemo(() => {
+    return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
+  }, [pageRowIds, selectedIds]);
+  const handleSelectAllRows = useCallback2(() => {
+    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 = useCallback2(() => {
+    applySelection(/* @__PURE__ */ new Set());
+  }, [applySelection]);
+  const [editingCell, setEditingCell] = useState2(null);
+  const [editValue, setEditValue] = useState2(null);
+  const [editError, setEditError] = useState2(null);
+  const startEditing = useCallback2((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 = useCallback2((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 inputLabel = typeof col.label === "string" ? col.label : 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__ */ React9.createElement(TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "number":
+        return /* @__PURE__ */ React9.createElement(NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "currency":
+        return /* @__PURE__ */ React9.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "stepper":
+        return /* @__PURE__ */ React9.createElement(StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "select":
+        return /* @__PURE__ */ React9.createElement(Select2, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React9.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React9.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
+      case "time":
+        return /* @__PURE__ */ React9.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
+      case "datetime":
+        return /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React9.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, 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__ */ React9.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, 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__ */ React9.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
+      case "checkbox":
+        return /* @__PURE__ */ React9.createElement(Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
+      default:
+        return /* @__PURE__ */ React9.createElement(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 || expandable || !renderRow;
+  const totalColumnCount = columns.length + (selectable ? 1 : 0) + (showExpandColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
+  const autoWidths = 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] = useState2({});
+  const renderInlineControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `inline-${rowId}-${col.field}`;
+    const inputLabel = typeof col.label === "string" ? col.label : 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__ */ React9.createElement(TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+      case "number":
+        return /* @__PURE__ */ React9.createElement(NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "currency":
+        return /* @__PURE__ */ React9.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "stepper":
+        return /* @__PURE__ */ React9.createElement(StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "select":
+        return /* @__PURE__ */ React9.createElement(Select2, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React9.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React9.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
+      case "time":
+        return /* @__PURE__ */ React9.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
+      case "datetime":
+        return /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React9.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: value == null ? void 0 : value.date, onChange: (val) => {
+          fire({ ...value, date: val });
+        } }), /* @__PURE__ */ React9.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: value == null ? void 0 : value.time, onChange: (val) => {
+          fire({ ...value, time: val });
+        } }));
+      case "toggle":
+        return /* @__PURE__ */ React9.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
+      case "checkbox":
+        return /* @__PURE__ */ React9.createElement(Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
+      default:
+        return /* @__PURE__ */ React9.createElement(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);
+    if (resolvedEditMode === "discrete" && col.editable && (col.editType === "select" || col.editType === "multiselect")) {
+      const extra = col.editProps || {};
+      const fieldName = `edit-${rowId}-${col.field}`;
+      const value = row[col.field];
+      const commit = (val) => commitEdit(row, col.field, val);
+      const options = resolveEditOptions(col, data);
+      const placeholder = extra.placeholder ?? "Select";
+      return col.editType === "select" ? /* @__PURE__ */ React9.createElement(Select2, { variant: "transparent", placeholder, ...extra, name: fieldName, label: "", value, onChange: commit, options }) : /* @__PURE__ */ React9.createElement(MultiSelect2, { placeholder, ...extra, name: fieldName, label: "", value: value || [], onChange: commit, options });
+    }
+    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__ */ React9.createElement(Link2, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+          }
+          return content2;
+        }
+        if (col.editable) {
+          return /* @__PURE__ */ React9.createElement(Text2, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ React9.createElement(Link2, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
+        }
+        return /* @__PURE__ */ React9.createElement(Text2, { 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__ */ React9.createElement(Link2, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+        }
+        return col.renderCell ? content2 : /* @__PURE__ */ React9.createElement(Text2, { truncate: { tooltipText: rawStr } }, content2 || "--");
+      }
+    }
+    const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
+    const isEmpty = content == null || content === "";
+    if (col.editable) {
+      return /* @__PURE__ */ React9.createElement(
+        Link2,
+        {
+          variant: "dark",
+          onClick: () => startEditing(rowId, col.field, rawValue)
+        },
+        isEmpty ? "--" : content
+      );
+    }
+    return isEmpty ? "--" : content;
+  };
+  const toolbarCount = countInToolbar ? /* @__PURE__ */ React9.createElement(CollectionCount, { text: recordCountLabel, bold: rowCountBold }) : null;
+  return /* @__PURE__ */ React9.createElement(Flex4, { direction: "column", gap: "xs" }, title && /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", align: "center", justify: "between", gap: "sm" }, /* @__PURE__ */ React9.createElement(Text2, { format: { fontWeight: "demibold" } }, title), countInTitleRow && /* @__PURE__ */ React9.createElement(CollectionCount, { text: recordCountLabel, bold: rowCountBold })), hasToolbarContent && /* @__PURE__ */ React9.createElement(
+    CollectionToolbar,
+    {
+      search: {
+        visible: showSearch && searchFields.length > 0,
+        name: "datatable-search",
+        placeholder: searchPlaceholder,
+        value: internalSearchTerm,
+        onChange: handleSearchChange
+      },
+      filters: {
+        items: filters,
+        values: filterValues,
+        inlineLimit: filterInlineLimit,
+        namePrefix: "datatable-filter",
+        onChange: handleFilterChange,
+        filtersButtonLabel: resolvedFiltersButtonLabel,
+        labels: {
+          all: "All",
+          dateFrom: resolvedDateFromLabel,
+          dateTo: resolvedDateToLabel
+        }
+      },
+      chips: {
+        items: activeChips,
+        showBadges: showFilterBadges,
+        showClearAll: resolvedShowClearFiltersButton,
+        clearAllLabel: resolvedClearAllLabel,
+        onRemove: handleFilterRemove
+      },
+      right: toolbarCount,
+      leftFlex: toolbarLeftFlex,
+      rightFlex: toolbarRightFlex
+    }
+  ), 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__ */ React9.createElement(Flex4, { direction: "row", gap: "sm" }, /* @__PURE__ */ React9.createElement(Box2, { flex: 3 }, /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React9.createElement(Text2, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), selectedIds.size < (serverSide ? totalCount || data.length : allRowIds.length) && /* @__PURE__ */ React9.createElement(Button3, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ React9.createElement(Button3, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ React9.createElement(
+    Button3,
+    {
+      key: i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon && /* @__PURE__ */ React9.createElement(Icon, { name: action.icon, size: "sm" }),
+    " ",
+    action.label
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ React9.createElement(Box2, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", justify: "end" }, /* @__PURE__ */ React9.createElement(CollectionCount, { text: recordCountLabel, bold: rowCountBold }))))), 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__ */ React9.createElement(Tile, null, /* @__PURE__ */ React9.createElement(Flex4, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React9.createElement(EmptyState, { title: resolvedLoadingLabel, imageName: "building", layout: "vertical" }, /* @__PURE__ */ React9.createElement(Text2, null, resolvedLoadingMessage))))
+  ) : error ? renderErrorState ? renderErrorState({
+    error,
+    title: typeof error === "string" ? error : resolvedErrorTitle,
+    message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
+  }) : /* @__PURE__ */ React9.createElement(ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ React9.createElement(Text2, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ React9.createElement(Tile, null, /* @__PURE__ */ React9.createElement(Flex4, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React9.createElement(EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ React9.createElement(Text2, null, resolvedEmptyMessage)))) : /* @__PURE__ */ React9.createElement(
+    Table,
+    {
+      bordered,
+      flush,
+      paginated: pageCount > 1,
+      page: activePage,
+      pageCount,
+      onPageChange: handlePageChange,
+      showFirstLastButtons: showFirstLastButtons != null ? showFirstLastButtons : pageCount > 5,
+      showButtonLabels,
+      ...maxVisiblePageButtons != null ? { maxVisiblePageButtons } : {}
+    },
+    /* @__PURE__ */ React9.createElement(TableHead, null, /* @__PURE__ */ React9.createElement(TableRow, null, selectable && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" }, /* @__PURE__ */ React9.createElement(
+      Checkbox,
+      {
+        name: "datatable-select-all",
+        "aria-label": "Select all rows",
+        checked: allVisibleSelected,
+        onChange: handleSelectAll
+      }
+    )), showExpandColumn && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+      const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
+      return /* @__PURE__ */ React9.createElement(
+        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__ */ React9.createElement(React9.Fragment, null, col.label, "\xA0", /* @__PURE__ */ React9.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React9.createElement(Tooltip, null, col.description) }, /* @__PURE__ */ React9.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
+      );
+    }), showRowActionsColumn && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" }))),
+    /* @__PURE__ */ React9.createElement(TableBody, null, renderedRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React9.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React9.createElement(TableCell, { width: "min" }), showExpandColumn && /* @__PURE__ */ React9.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ React9.createElement(TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ React9.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React9.createElement(
+          Icon,
+          {
+            name: expandedGroups.has(item.group.key) ? "Down" : "Right",
+            onClick: () => toggleGroup(item.group.key),
+            screenReaderText: expandedGroups.has(item.group.key) ? "Collapse group" : "Expand group"
+          }
+        ), /* @__PURE__ */ React9.createElement(
+          Link2,
+          {
+            variant: "dark",
+            onClick: () => toggleGroup(item.group.key)
+          },
+          /* @__PURE__ */ React9.createElement(Text2, { 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__ */ React9.createElement(TableCell, { width: "min" })) : item.type === "detail" ? /* @__PURE__ */ React9.createElement(TableRow, { key: `detail-${item.row[rowIdField] ?? idx}` }, /* @__PURE__ */ React9.createElement(TableCell, { colSpan: totalColumnCount }, renderExpandedRow(item.row))) : useColumnRendering ? /* @__PURE__ */ React9.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React9.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React9.createElement(
+        Checkbox,
+        {
+          name: `select-${item.row[rowIdField]}`,
+          "aria-label": "Select row",
+          checked: selectedIds.has(item.row[rowIdField]),
+          onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
+        }
+      )), showExpandColumn && /* @__PURE__ */ React9.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React9.createElement(
+        Icon,
+        {
+          name: expandedRowIds.has(item.row[rowIdField]) ? "upCarat" : "downCarat",
+          onClick: () => toggleRowExpanded(item.row[rowIdField]),
+          screenReaderText: expandedRowIds.has(item.row[rowIdField]) ? "Collapse row" : "Expand row"
+        }
+      )), 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;
+        const cellContent = renderCellContent(item.row, col);
+        const wrapInRowToggle = expandable && expandOn === "row" && !col.editable && !isShowingInput;
+        return /* @__PURE__ */ React9.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, wrapInRowToggle ? /* @__PURE__ */ React9.createElement(Link2, { variant: "dark", onClick: () => toggleRowExpanded(rowId) }, cellContent) : cellContent);
+      }), showRowActionsColumn && /* @__PURE__ */ React9.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React9.createElement(Flex4, { 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__ */ React9.createElement(
+          Button3,
+          {
+            key: i,
+            variant: action.variant || "transparent",
+            size: "extra-small",
+            onClick: () => action.onClick(item.row)
+          },
+          action.icon && /* @__PURE__ */ React9.createElement(Icon, { name: action.icon, size: "sm" }),
+          action.label && ` ${action.label}`
+        ));
+      })()))) : renderRow(item.row)
+    )),
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React9.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React9.createElement(TableRow, null, selectable && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" }), showExpandColumn && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+      const footerDef = col.footer;
+      const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
+      return /* @__PURE__ */ React9.createElement(TableHeader, { key: col.field, align: col.align }, content);
+    }), showRowActionsColumn && /* @__PURE__ */ React9.createElement(TableHeader, { width: "min" })))
+  ));
+};
+DataTable.displayName = "DataTable";
 
 // src/kanban/Kanban.jsx
 import React12, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
 
+// src/kanban/kanbanLanes.js
+var UNASSIGNED_LANE_KEY = "__unassigned";
+var UNKNOWN_STAGE_KEY = "__unknown";
+var getLaneKey = (row, swimlaneBy) => {
+  const raw = typeof swimlaneBy === "function" ? swimlaneBy(row) : row == null ? void 0 : row[swimlaneBy];
+  if (raw == null || raw === "") return UNASSIGNED_LANE_KEY;
+  return String(raw);
+};
+var orderLaneKeys = (seenKeys, swimlaneOrder) => {
+  const seen = Array.isArray(seenKeys) ? seenKeys : [];
+  if (!Array.isArray(swimlaneOrder) || swimlaneOrder.length === 0) return [...seen];
+  const explicit = [];
+  for (const key of swimlaneOrder) {
+    const normalized = String(key);
+    if (!explicit.includes(normalized)) explicit.push(normalized);
+  }
+  const rest = seen.filter((key) => !explicit.includes(key));
+  return [...explicit, ...rest];
+};
+var partitionLanes = (rows, { swimlaneBy, swimlaneOrder } = {}) => {
+  const rowsByLane = {};
+  const firstSeen = [];
+  for (const row of rows || []) {
+    const key = getLaneKey(row, swimlaneBy);
+    if (!rowsByLane[key]) {
+      rowsByLane[key] = [];
+      firstSeen.push(key);
+    }
+    rowsByLane[key].push(row);
+  }
+  const laneKeys = orderLaneKeys(firstSeen, swimlaneOrder);
+  for (const key of laneKeys) {
+    if (!rowsByLane[key]) rowsByLane[key] = [];
+  }
+  return { laneKeys, rowsByLane };
+};
+var resolveLaneLabel = (laneKey, swimlaneLabels, rows, unassignedLabel) => {
+  if (typeof swimlaneLabels === "function") {
+    const out = swimlaneLabels(laneKey, rows || []);
+    if (out != null) return out;
+  } else if (swimlaneLabels && typeof swimlaneLabels === "object") {
+    const out = swimlaneLabels[laneKey];
+    if (out != null) return out;
+  }
+  if (laneKey === UNASSIGNED_LANE_KEY) return unassignedLabel || "Unassigned";
+  return String(laneKey);
+};
+var bucketRowsByStage = (rows, stages, getStage) => {
+  const map = {};
+  for (const stage of stages || []) map[stage.value] = [];
+  for (const row of rows || []) {
+    const key = getStage(row);
+    if (map[key]) {
+      map[key].push(row);
+    } else if ((stages || []).length > 0) {
+      if (!map[UNKNOWN_STAGE_KEY]) map[UNKNOWN_STAGE_KEY] = [];
+      map[UNKNOWN_STAGE_KEY].push(row);
+    }
+  }
+  return map;
+};
+var sortBuckets = (buckets, comparator) => {
+  if (!comparator) return buckets;
+  const out = {};
+  for (const key of Object.keys(buckets || {})) {
+    out[key] = [...buckets[key]].sort(comparator);
+  }
+  return out;
+};
+var resolveWipLimit = (stage, wipLimits) => {
+  const override = wipLimits ? wipLimits[stage == null ? void 0 : stage.value] : void 0;
+  const limit = override != null ? override : stage == null ? void 0 : stage.wipLimit;
+  if (typeof limit !== "number" || !Number.isFinite(limit) || limit < 0) return null;
+  return limit;
+};
+var computeStageCounts = (stages, buckets, stageMeta) => {
+  const counts = {};
+  for (const stage of stages || []) {
+    const meta = stageMeta ? stageMeta[stage.value] : void 0;
+    counts[stage.value] = meta && meta.totalCount != null ? meta.totalCount : ((buckets == null ? void 0 : buckets[stage.value]) || []).length;
+  }
+  return counts;
+};
+var evaluateWip = (stages, counts, wipLimits) => {
+  const out = {};
+  for (const stage of stages || []) {
+    const limit = resolveWipLimit(stage, wipLimits);
+    const count = (counts == null ? void 0 : counts[stage.value]) || 0;
+    out[stage.value] = { count, limit, exceeded: limit != null && count > limit };
+  }
+  return out;
+};
+var findNewlyExceededWip = (prev, next) => {
+  const events = [];
+  for (const stageId of Object.keys(next || {})) {
+    const entry = next[stageId];
+    if (!entry || !entry.exceeded) continue;
+    if (prev && prev[stageId] && prev[stageId].exceeded) continue;
+    events.push({ stageId, count: entry.count, limit: entry.limit });
+  }
+  return events;
+};
+
 // src/common-components/CollectionSortSelect.js
 import React10, { useId as useId2 } from "react";
 import { Select as Select3 } from "@hubspot/ui-extensions";
@@ -1596,7 +2918,7 @@ var StyledText = ({
     const nativeVariant = NATIVE_TAG_VARIANT_ALIASES[background == null ? void 0 : background.variant] ?? (background == null ? void 0 : background.variant) ?? "default";
     return React11.createElement(Tag3, { variant: nativeVariant }, resolvedText);
   }
-  const { src, width: w, height: h6 } = makeStyledTextDataUri(resolvedText, {
+  const { src, width: w, height: h7 } = makeStyledTextDataUri(resolvedText, {
     variant,
     format,
     orientation,
@@ -1612,7 +2934,7 @@ var StyledText = ({
   return React11.createElement(Image3, {
     src,
     width: w,
-    height: h6,
+    height: h7,
     alt: alt ?? String(resolvedText)
   });
 };
@@ -1638,75 +2960,1048 @@ import {
   Statistics,
   StatisticsItem,
   StatisticsTrend,
+  StatusTag as StatusTag2,
   Tag as Tag4,
   Text as Text3,
   Tile as Tile2
 } from "@hubspot/ui-extensions";
-
-// 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);
+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";
 };
-
-// src/utils/crmSearchAdapters.js
-var EMPTY_ARRAY = [];
-var EMPTY_OBJECT = {};
-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 DEFAULT_LABELS3 = {
+  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),
+  // "5 / 4" — count vs WIP limit in the stage header. The slash format is the
+  // standard kanban convention; override for tighter ("5/4") or verbose forms.
+  wipCount: (count, limit) => `${count} / ${limit}`,
+  overWip: "Over WIP",
+  laneCount: (n) => String(n),
+  unassignedLane: "Unassigned",
+  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 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 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 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 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 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;
-    }
+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 {
-    ...flattenProperties ? flattened : EMPTY_OBJECT,
-    ...record,
-    [idField]: objectId,
-    [objectIdField]: objectId,
-    [propertiesKey]: properties
-  };
+  return buckets;
 };
-var normalizeCrmSearchRows = (response, options = EMPTY_OBJECT) => {
-  const records = pickArray(response);
-  return records.map((record) => normalizeCrmSearchRecord(record, options));
+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 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 resolveHref = (href, row) => {
+  if (!href) return null;
+  if (typeof href === "function") return href(row);
+  return href;
 };
-var buildCrmSearchConfig = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
+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__ */ React12.createElement(Link3, { href: titleHref }, titleValue) : /* @__PURE__ */ React12.createElement(Text3, { format: { fontWeight: "demibold" } }, titleValue);
+  const metaNodes = fields.meta.filter((f) => !f.visible || f.visible(row)).map((f) => {
+    const val = resolveFieldValue(f, row);
+    return /* @__PURE__ */ React12.createElement(Text3, { 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__ */ React12.createElement(React12.Fragment, { key }, rendered);
+  };
+  const stageControlNode = stageControl === "none" ? null : /* @__PURE__ */ React12.createElement(
+    StageControl,
+    {
+      row,
+      rowId,
+      currentStage: stage,
+      stages,
+      canMove,
+      isChanging,
+      mode: stageControl,
+      onStageChangeRequest,
+      labels
+    }
+  );
+  const titleRow = /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React12.createElement(Box3, { flex: 1 }, titleNode), selectable ? /* @__PURE__ */ React12.createElement(
+    Checkbox2,
+    {
+      name: `kanban-select-${rowId}`,
+      checked: selected,
+      onChange: () => onToggleSelect(rowId)
+    }
+  ) : null);
+  const metaRow = metaNodes.length === 0 ? null : /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", justify: "end", align: "center", gap: "xs" }, metaNodes);
+  const bodyRow = bodyFields.length === 0 ? null : bodyAs === "descriptionList" ? /* @__PURE__ */ React12.createElement(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__ */ React12.createElement(DescriptionListItem, { key, label: f.label || "" }, rendered);
+  })) : /* @__PURE__ */ React12.createElement(Flex5, { 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__ */ React12.createElement(Text3, { key, variant: "microcopy" }, f.label ? /* @__PURE__ */ React12.createElement(Text3, { inline: true, variant: "microcopy" }, `${f.label}: `) : null, rendered);
+  }));
+  const footerAlertsNode = footerAlerts.length === 0 ? null : /* @__PURE__ */ React12.createElement(Flex5, { 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__ */ React12.createElement(Flex5, { direction: "row", justify: "between", align: "start", gap: "sm" }, inlineStageControl ? /* @__PURE__ */ React12.createElement(Box3, { alignSelf: "center" }, inlineStageControl) : /* @__PURE__ */ React12.createElement(Box3, null), footerActionsNode ? /* @__PURE__ */ React12.createElement(Box3, { flex: 1 }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", justify: "end", align: "start" }, footerActionsNode)) : null) : null;
+  const footerRow = !footerAlertsNode && !footerMainRow ? null : /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: "xs" }, footerAlertsNode, footerMainRow);
+  return /* @__PURE__ */ React12.createElement(Tile2, { compact: density === "compact" }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: density === "compact" ? "xs" : "sm" }, titleRow, dividers.afterTitle && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React12.createElement(Divider, null) : null, subtitleNode ? /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy" }, subtitleNode) : null, dividers.afterSubtitle && subtitleNode && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React12.createElement(Divider, null) : null, metaRow, bodyRow, dividers.afterBody && bodyRow && (footerRow || separateRowStageControl) ? /* @__PURE__ */ React12.createElement(Divider, null) : null, footerRow, dividers.afterFooter && footerRow && separateRowStageControl ? /* @__PURE__ */ React12.createElement(Divider, null) : null, separateRowStageControl));
+};
+var StageControl = ({
+  row,
+  rowId,
+  currentStage,
+  stages,
+  canMove,
+  isChanging,
+  mode,
+  onStageChangeRequest,
+  labels
+}) => {
+  if (isChanging) {
+    return /* @__PURE__ */ React12.createElement(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__ */ React12.createElement(Button4, { variant: "transparent", size: "extra-small", disabled: true }, labels.moveTo);
+    }
+    return /* @__PURE__ */ React12.createElement(
+      Dropdown,
+      {
+        variant: "transparent",
+        buttonText: labels.moveTo,
+        buttonSize: "xs"
+      },
+      targetStages.map((stage) => /* @__PURE__ */ React12.createElement(
+        Dropdown.ButtonItem,
+        {
+          key: stage.value,
+          onClick: () => onStageChangeRequest(row, stage.value, currentStage.value)
+        },
+        stage.shortLabel || stage.label
+      ))
+    );
+  }
+  return /* @__PURE__ */ React12.createElement(
+    Select4,
+    {
+      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,
+  wip,
+  compactEmpty,
+  labels,
+  children
+}) => {
+  const hasWipLimit = wip != null && wip.limit != null;
+  const countLabel = hasWipLimit ? labels.wipCount(wip.count, wip.limit) : labels.cardCount(totalCount != null ? totalCount : bucketCount);
+  const overWipNode = wip && wip.exceeded ? /* @__PURE__ */ React12.createElement(StatusTag2, { variant: "warning" }, labels.overWip) : null;
+  const countNode = countDisplay === "text" ? /* @__PURE__ */ React12.createElement(Text3, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React12.createElement(Tag4, { variant: "default" }, countLabel);
+  if (collapsed) {
+    const rotated = makeRotatedLabelDataUri(stage.label);
+    const rotatedCount = countDisplay === "none" ? null : makeRotatedTagDataUri(countLabel);
+    const stageIdentifier = stage.icon ? /* @__PURE__ */ React12.createElement(Icon, { name: stage.icon, size: "sm", screenReaderText: stage.label }) : /* @__PURE__ */ React12.createElement(
+      Image4,
+      {
+        src: rotated.src,
+        width: rotated.width,
+        height: rotated.height,
+        alt: stage.label
+      }
+    );
+    return /* @__PURE__ */ React12.createElement(Tile2, { compact: true }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: "xs", align: "center" }, /* @__PURE__ */ React12.createElement(
+      Button4,
+      {
+        variant: "transparent",
+        size: "sm",
+        onClick: onToggleCollapsed,
+        tooltip: `Expand ${stage.label}`
+      },
+      /* @__PURE__ */ React12.createElement(Icon, { name: "right", size: "sm", screenReaderText: `Expand ${stage.label}` })
+    ), stageIdentifier, rotatedCount ? /* @__PURE__ */ React12.createElement(
+      Image4,
+      {
+        src: rotatedCount.src,
+        width: rotatedCount.width,
+        height: rotatedCount.height,
+        alt: `${bucketCount} items`
+      }
+    ) : null));
+  }
+  if (compactEmpty && !loading && rows.length === 0 && bucketCount === 0) {
+    return /* @__PURE__ */ React12.createElement(Tile2, { compact: true }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy", format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn)));
+  }
+  const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
+  return /* @__PURE__ */ React12.createElement(Tile2, { compact: true }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: "xs" }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React12.createElement(Text3, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, overWipNode, loading ? /* @__PURE__ */ React12.createElement(LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ React12.createElement(Button4, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React12.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React12.createElement(Divider, null), children, error ? /* @__PURE__ */ React12.createElement(Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React12.createElement(Button4, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", justify: "center" }, /* @__PURE__ */ React12.createElement(Link3, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React12.createElement(LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", justify: "center" }, /* @__PURE__ */ React12.createElement(Link3, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React12.createElement(Text3, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+};
+var renderMetricsPanel = (metrics) => {
+  if (!metrics) return null;
+  if (!Array.isArray(metrics)) return metrics;
+  if (metrics.length === 0) return null;
+  return /* @__PURE__ */ React12.createElement(Statistics, null, metrics.map((m, i) => /* @__PURE__ */ React12.createElement(
+    StatisticsItem,
+    {
+      key: m.id || m.label || i,
+      label: m.label,
+      number: m.number != null ? String(m.number) : ""
+    },
+    m.trend ? /* @__PURE__ */ React12.createElement(
+      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,
+  showMetricsButton,
+  metricsPanel,
+  onToggleMetrics,
+  labels,
+  toolbarLeftFlex,
+  toolbarRightFlex
+}) => {
+  const rightControls = (sortOptions == null ? void 0 : sortOptions.length) > 0 || showMetricsButton ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React12.createElement(
+    CollectionSortSelect,
+    {
+      name: "kanban-sort",
+      value: sortValue,
+      placeholder: labels.sortButton,
+      options: sortOptions,
+      onChange: onSortChange
+    }
+  ) : null, showMetricsButton ? /* @__PURE__ */ React12.createElement(Button4, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React12.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
+  return /* @__PURE__ */ React12.createElement(
+    CollectionToolbar,
+    {
+      search: {
+        visible: showSearch,
+        name: "kanban-search",
+        placeholder: searchPlaceholder,
+        value: searchValue,
+        onChange: onSearchChange
+      },
+      filters: {
+        items: filters,
+        values: filterValues,
+        inlineLimit: filterInlineLimit,
+        namePrefix: "kanban-filter",
+        onChange: onFilterChange,
+        labels
+      },
+      chips: {
+        items: activeChips,
+        showBadges: showFilterBadges,
+        showClearAll: showClearFiltersButton,
+        clearAllLabel: labels.clearAll,
+        onRemove: onFilterRemove
+      },
+      right: rightControls,
+      footer: metricsPanel,
+      labels,
+      leftFlex: toolbarLeftFlex,
+      rightFlex: toolbarRightFlex
+    }
+  );
+};
+var DefaultSelectionBar = ({
+  selectedIds,
+  selectedCount,
+  displayCount,
+  countLabel,
+  allSelected,
+  onSelectAll,
+  onDeselectAll,
+  selectionActions,
+  labels
+}) => {
+  const pluralForCount = (n) => countLabel(n);
+  return /* @__PURE__ */ React12.createElement(Tile2, { compact: true }, /* @__PURE__ */ React12.createElement(Inline, { align: "center", justify: "between", gap: "small" }, /* @__PURE__ */ React12.createElement(Inline, { align: "center", gap: "small" }, /* @__PURE__ */ React12.createElement(Text3, { inline: true, format: { fontWeight: "demibold" } }, typeof labels.selected === "function" ? labels.selected(selectedCount, pluralForCount(selectedCount)) : `${selectedCount} selected`), !allSelected ? /* @__PURE__ */ React12.createElement(Button4, { variant: "transparent", size: "extra-small", onClick: onSelectAll }, typeof labels.selectAll === "function" ? labels.selectAll(displayCount, pluralForCount(displayCount)) : labels.selectAll) : null, /* @__PURE__ */ React12.createElement(Button4, { variant: "transparent", size: "extra-small", onClick: onDeselectAll }, labels.deselectAll)), (selectionActions || []).length > 0 ? /* @__PURE__ */ React12.createElement(Inline, { align: "center", gap: "extra-small" }, selectionActions.map((action, i) => /* @__PURE__ */ React12.createElement(
+    Button4,
+    {
+      key: action.key || action.label || i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon ? /* @__PURE__ */ React12.createElement(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,
+  // --- WIP limits ---
+  wipLimits,
+  onWipExceeded,
+  // --- Swimlanes ---
+  swimlaneBy,
+  swimlaneLabels,
+  swimlaneOrder,
+  collapseLanes = true,
+  collapsedLanes,
+  defaultCollapsedLanes,
+  onCollapsedLanesChange,
+  metricsPerLane = false,
+  // --- 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,
+  toolbarLeftFlex = 3,
+  toolbarRightFlex = 1,
+  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 = useMemo2(() => ({ ...DEFAULT_LABELS3, ...labelsProp || {} }), [labelsProp]);
+  const [internalSearch, setInternalSearch] = useState3(searchValue != null ? searchValue : "");
+  const [internalFilters, setInternalFilters] = useState3(() => getEmptyFilterValues(filters));
+  const [internalSort, setInternalSort] = useState3(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
+  const [internalCollapsed, setInternalCollapsed] = useState3([]);
+  const [internalCollapsedLanes, setInternalCollapsedLanes] = useState3(
+    () => defaultCollapsedLanes || []
+  );
+  const [internalExpanded, setInternalExpanded] = useState3([]);
+  const [internalSelection, setInternalSelection] = useState3([]);
+  const [internalShowMetrics, setInternalShowMetrics] = useState3(false);
+  const [transitionPrompts, setTransitionPrompts] = useState3({});
+  const resolvedShowMetrics = controlledShowMetrics != null ? controlledShowMetrics : internalShowMetrics;
+  const toggleMetrics = useCallback3(() => {
+    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 resolvedCollapsedLanes = collapsedLanes != null ? collapsedLanes : internalCollapsedLanes;
+  const resolvedExpanded = expandedStages != null ? expandedStages : internalExpanded;
+  const resolvedSelection = selectedIds != null ? selectedIds : internalSelection;
+  const searchEnabled = showSearch && Array.isArray(searchFields) && searchFields.length > 0;
+  const stagesByValue = useMemo2(() => {
+    const map = {};
+    for (const stage of stages || []) {
+      map[stage.value] = stage;
+    }
+    return map;
+  }, [stages]);
+  const fireParamsChange = useCallback3((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,
+      collapsedLanes: overrides.collapsedLanes != null ? overrides.collapsedLanes : resolvedCollapsedLanes
+    });
+  }, [onParamsChange, resolvedCollapsed, resolvedCollapsedLanes, resolvedFilters, resolvedSearch, resolvedSort]);
+  const lastAppliedSearchRef = useRef3(searchValue != null ? searchValue : "");
+  useEffect3(() => {
+    if (searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearch(searchValue);
+  }, [searchValue]);
+  const dispatchSearch = useCallback3(
+    (val) => {
+      lastAppliedSearchRef.current = val;
+      if (onSearchChange) onSearchChange(val);
+      fireParamsChange({ search: val });
+    },
+    [fireParamsChange, onSearchChange]
+  );
+  const dispatchSearchDebounced = useDebouncedDispatch(internalSearch, searchDebounce, dispatchSearch);
+  const handleSearch = useCallback3(
+    (val) => {
+      setInternalSearch(val);
+      dispatchSearchDebounced(val);
+    },
+    [dispatchSearchDebounced]
+  );
+  const handleFilter = useCallback3(
+    (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 = useCallback3(
+    (key) => {
+      const next = resetFilterValues(filters, resolvedFilters, key);
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [filters, filterValues, fireParamsChange, onFilterChange, resolvedFilters]
+  );
+  const handleSort = useCallback3(
+    (val) => {
+      if (onSortChange) onSortChange(val);
+      if (sort == null) setInternalSort(val);
+      fireParamsChange({ sort: val });
+    },
+    [fireParamsChange, onSortChange, sort]
+  );
+  const handleCollapsed = useCallback3(
+    (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 handleLaneCollapsed = useCallback3(
+    (laneKey) => {
+      const next = resolvedCollapsedLanes.includes(laneKey) ? resolvedCollapsedLanes.filter((k) => k !== laneKey) : [...resolvedCollapsedLanes, laneKey];
+      if (onCollapsedLanesChange) onCollapsedLanesChange(next);
+      if (collapsedLanes == null) setInternalCollapsedLanes(next);
+      fireParamsChange({ collapsedLanes: next });
+    },
+    [fireParamsChange, resolvedCollapsedLanes, collapsedLanes, onCollapsedLanesChange]
+  );
+  const handleExpanded = useCallback3(
+    (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 = useCallback3(
+    (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 = useCallback3((rowId) => {
+    setTransitionPrompts((prev) => {
+      if (!Object.prototype.hasOwnProperty.call(prev, rowId)) return prev;
+      const next = { ...prev };
+      delete next[rowId];
+      return next;
+    });
+  }, []);
+  const commitStageChange = useCallback3(
+    (row, newStage, oldStage, result) => {
+      clearTransitionPrompt(row[rowIdField]);
+      if (onStageChange) onStageChange(row, newStage, oldStage, result);
+    },
+    [clearTransitionPrompt, onStageChange, rowIdField]
+  );
+  const selectionQueryKey = useMemo2(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: resolvedSearch,
+      filters: resolvedFilters,
+      sort: resolvedSort || null
+    });
+  }, [resetSelectionOnQueryChange, resolvedFilters, resolvedSearch, resolvedSort]);
+  const combinedSelectionResetKey = useMemo2(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  const clearSelection = useCallback3(() => setInternalSelection([]), []);
+  useSelectionReset({
+    resetKey: combinedSelectionResetKey,
+    enabled: selectable,
+    isControlled: selectedIds != null,
+    clearSelection
+  });
+  const getStageFor = useCallback3(
+    (row) => {
+      if (typeof groupBy === "function") return groupBy(row);
+      return row[groupBy];
+    },
+    [groupBy]
+  );
+  const filteredData = useMemo2(() => {
+    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 = useMemo2(
+    () => bucketRowsByStage(filteredData, stages, getStageFor),
+    [filteredData, stages, getStageFor]
+  );
+  const sortComparator = useMemo2(() => {
+    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 = useMemo2(() => sortBuckets(buckets, sortComparator), [buckets, sortComparator]);
+  const hasLanes = swimlaneBy != null;
+  const laneData = useMemo2(() => {
+    if (!hasLanes) return null;
+    return partitionLanes(filteredData, { swimlaneBy, swimlaneOrder });
+  }, [hasLanes, filteredData, swimlaneBy, swimlaneOrder]);
+  const laneBuckets = useMemo2(() => {
+    if (!laneData) return null;
+    const out = {};
+    for (const laneKey of laneData.laneKeys) {
+      out[laneKey] = sortBuckets(
+        bucketRowsByStage(laneData.rowsByLane[laneKey] || [], stages, getStageFor),
+        sortComparator
+      );
+    }
+    return out;
+  }, [laneData, stages, getStageFor, sortComparator]);
+  const wipByStage = useMemo2(
+    () => evaluateWip(stages, computeStageCounts(stages, buckets, stageMeta), wipLimits),
+    [stages, buckets, stageMeta, wipLimits]
+  );
+  const prevWipRef = useRef3({});
+  useEffect3(() => {
+    const newlyExceeded = findNewlyExceededWip(prevWipRef.current, wipByStage);
+    prevWipRef.current = wipByStage;
+    if (!onWipExceeded) return;
+    for (const event of newlyExceeded) {
+      onWipExceeded(event.stageId, event.count, event.limit);
+    }
+  }, [wipByStage, onWipExceeded]);
+  const activeChips = useMemo2(
+    () => buildActiveFilterChips(filters, resolvedFilters),
+    [filters, resolvedFilters]
+  );
+  const partitioned = useMemo2(() => partitionFields(cardFields || []), [cardFields]);
+  const dividers = useMemo2(() => 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 = useCallback3(
+    (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 = useCallback3(
+    (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__ */ React12.createElement(Tile2, { 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__ */ React12.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 metricsProvided = metrics != null && (!Array.isArray(metrics) || metrics.length > 0);
+  const perLaneMetricsActive = hasLanes && metricsPerLane && typeof metrics === "function";
+  const globalMetricsContent = metricsProvided && !perLaneMetricsActive ? typeof metrics === "function" ? metrics(filteredData, null) : metrics : null;
+  const renderStageColumns = (bucketMap, laneKey) => {
+    const inLane = laneKey != null;
+    return /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
+      const stageRows = bucketMap[stage.value] || [];
+      const meta = inLane ? void 0 : 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);
+      const stageWip = wipByStage[stage.value];
+      const wip = inLane ? (stageWip == null ? void 0 : stageWip.exceeded) ? { count: stageWip.count, limit: null, exceeded: true } : null : stageWip;
+      return /* @__PURE__ */ React12.createElement(
+        AutoGrid,
+        {
+          key: inLane ? `${laneKey}::${stage.value}` : stage.value,
+          columnWidth: isCollapsed ? 72 : effectiveColumnWidth
+        },
+        /* @__PURE__ */ React12.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: inLane ? void 0 : onLoadMore,
+            expanded: isExpanded,
+            onToggleExpanded: () => handleExpanded(stage.value),
+            collapsed: isCollapsed,
+            onToggleCollapsed: () => handleCollapsed(stage.value),
+            columnFooter,
+            countDisplay,
+            wip,
+            compactEmpty: inLane,
+            labels
+          },
+          visibleRows.map((row) => renderCardNode(row, stage))
+        )
+      );
+    }));
+  };
+  const mainContent = error ? renderErrorState ? renderErrorState({
+    error,
+    title: labels.errorTitle,
+    message: typeof error === "string" ? error : labels.errorMessage
+  }) : /* @__PURE__ */ React12.createElement(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__ */ React12.createElement(Tile2, null, /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React12.createElement(EmptyState2, { title: labels.loading, imageName: "building", layout: "vertical" }, /* @__PURE__ */ React12.createElement(Text3, null, labels.loadingMessage))))
+  ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
+    title: labels.emptyTitle,
+    message: labels.emptyMessage
+  }) : /* @__PURE__ */ React12.createElement(Tile2, null, /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React12.createElement(EmptyState2, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React12.createElement(Text3, null, labels.emptyMessage)))) : hasLanes ? /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: "md" }, ((laneData == null ? void 0 : laneData.laneKeys) || []).map((laneKey, laneIndex) => {
+    const laneRows = laneData.rowsByLane[laneKey] || [];
+    const laneLabel = resolveLaneLabel(laneKey, swimlaneLabels, laneRows, labels.unassignedLane);
+    const laneLabelText = typeof laneLabel === "string" ? laneLabel : String(laneKey);
+    const isLaneCollapsed = collapseLanes && resolvedCollapsedLanes.includes(laneKey);
+    const laneCountLabel = labels.laneCount(laneRows.length);
+    const laneCountNode = countDisplay === "none" ? null : countDisplay === "text" ? /* @__PURE__ */ React12.createElement(Text3, { format: { fontWeight: "demibold" } }, laneCountLabel) : /* @__PURE__ */ React12.createElement(Tag4, { variant: "default" }, laneCountLabel);
+    const laneMetricsNode = !isLaneCollapsed && perLaneMetricsActive && resolvedShowMetrics ? renderMetricsPanel(metrics(laneRows, laneKey)) : null;
+    return /* @__PURE__ */ React12.createElement(Flex5, { key: laneKey, direction: "column", gap: "xs" }, laneIndex > 0 ? /* @__PURE__ */ React12.createElement(Divider, null) : null, /* @__PURE__ */ React12.createElement(Flex5, { direction: "row", align: "center", gap: "xs" }, collapseLanes ? /* @__PURE__ */ React12.createElement(
+      Button4,
+      {
+        variant: "transparent",
+        size: "sm",
+        onClick: () => handleLaneCollapsed(laneKey),
+        tooltip: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
+      },
+      /* @__PURE__ */ React12.createElement(
+        Icon,
+        {
+          name: isLaneCollapsed ? "right" : "down",
+          size: "sm",
+          screenReaderText: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
+        }
+      )
+    ) : null, /* @__PURE__ */ React12.createElement(Text3, { format: { fontWeight: "demibold" } }, laneLabel), laneCountNode), laneMetricsNode, !isLaneCollapsed ? renderStageColumns((laneBuckets == null ? void 0 : laneBuckets[laneKey]) || {}, laneKey) : null);
+  })) : renderStageColumns(sortedBuckets, null);
+  const resolvedShowClearFiltersButton = showClearFiltersButton ?? showFilterBadges;
+  return /* @__PURE__ */ React12.createElement(Flex5, { direction: "column", gap: "sm" }, /* @__PURE__ */ React12.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,
+      showMetricsButton: metricsProvided,
+      metricsPanel: resolvedShowMetrics && globalMetricsContent ? renderMetricsPanel(globalMetricsContent) : null,
+      onToggleMetrics: toggleMetrics,
+      labels,
+      toolbarLeftFlex,
+      toolbarRightFlex
+    }
+  ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ React12.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
+};
+Kanban.displayName = "Kanban";
+
+// 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,
@@ -1810,7 +4105,393 @@ var CRM_OBJECT_TYPES = {
   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 stableStringify = (value) => {
+  const normalize = (item) => {
+    if (Array.isArray(item)) return item.map(normalize);
+    if (isPlainObject(item)) {
+      return Object.keys(item).sort().reduce((acc, key) => {
+        acc[key] = normalize(item[key]);
+        return acc;
+      }, {});
+    }
+    if (typeof item === "function") return item.name || "[function]";
+    return item;
+  };
+  try {
+    return JSON.stringify(normalize(value));
+  } catch {
+    return String(value);
+  }
+};
+var appendUniqueRows = (previousRows, nextRows, rowIdField) => {
+  if (!previousRows.length) return nextRows || EMPTY_ARRAY;
+  if (!(nextRows == null ? void 0 : nextRows.length)) return previousRows;
+  const seen = new Set(previousRows.map((row) => getByPath(row, rowIdField) ?? (row == null ? void 0 : row.objectId) ?? (row == null ? void 0 : row.id)));
+  const additions = nextRows.filter((row) => {
+    const id = getByPath(row, rowIdField) ?? (row == null ? void 0 : row.objectId) ?? (row == null ? void 0 : row.id);
+    if (id == null) return true;
+    if (seen.has(id)) return false;
+    seen.add(id);
+    return true;
+  });
+  return additions.length ? [...previousRows, ...additions] : previousRows;
+};
+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 stays
+  // client-side over the fetched batch; `serverSide` forces 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, _b;
+  const [params, setParams] = useState4({ search: "", filters: {}, sort: null });
+  const resolvedProperties = useMemo3(() => properties, [properties]);
+  const resolvedColumns = useMemo3(
+    () => columns || inferCrmColumns(resolvedProperties),
+    [columns, resolvedProperties]
+  );
+  const resolvedSearchFields = searchFields || resolvedProperties;
+  const autoFilterFields = useMemo3(
+    () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
+    [autoFilters, resolvedProperties]
+  );
+  const autoFilterLabelsRef = useRef4({});
+  const defaultPropertyMap = useMemo3(
+    () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
+    [resolvedProperties]
+  );
+  const effectivePropertyMap = propertyMap || defaultPropertyMap;
+  const resolvedSortMap = useMemo3(
+    () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
+    [sortMap, effectivePropertyMap]
+  );
+  const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
+  const dataSourceOptions = useMemo3(
+    () => ({
+      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] = useState4(!!serverSide);
+  const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
+  const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
+  const queryKey = useMemo3(
+    () => stableStringify({ effectiveParams, objectType, properties: resolvedProperties, pageLength }),
+    [effectiveParams, objectType, resolvedProperties, pageLength]
+  );
+  const [accumulatedRows, setAccumulatedRows] = useState4(EMPTY_ARRAY);
+  const [requestedPage, setRequestedPage] = useState4(1);
+  const lastQueryKeyRef = useRef4(queryKey);
+  const loadedRows = accumulatedRows.length ? accumulatedRows : dataSource.data;
+  useEffect4(() => {
+    var _a2;
+    if (lastQueryKeyRef.current !== queryKey) {
+      lastQueryKeyRef.current = queryKey;
+      setAccumulatedRows(dataSource.data);
+      return;
+    }
+    const currentPage = ((_a2 = dataSource.pagination) == null ? void 0 : _a2.currentPage) || 1;
+    setAccumulatedRows((prev) => currentPage <= 1 ? dataSource.data : appendUniqueRows(prev, dataSource.data, rowIdField));
+  }, [queryKey, dataSource.data, (_a = dataSource.pagination) == null ? void 0 : _a.currentPage, rowIdField]);
+  useEffect4(() => {
+    if (!serverQuerying && typeof dataSource.totalCount === "number" && dataSource.totalCount > loadedRows.length) {
+      setServerQuerying(true);
+    }
+  }, [serverQuerying, dataSource.totalCount, loadedRows.length]);
+  const ensurePageLoaded = useCallback4((page) => {
+    var _a2, _b2, _c;
+    const pageNumber = Number(page) || 1;
+    const requiredRows = pageNumber * pageSize;
+    if (requiredRows <= loadedRows.length) return;
+    if (!dataSource.hasMore || dataSource.loading || ((_a2 = dataSource.response) == null ? void 0 : _a2.isRefetching)) return;
+    (_c = (_b2 = dataSource.pagination) == null ? void 0 : _b2.nextPage) == null ? void 0 : _c.call(_b2);
+  }, [pageSize, loadedRows.length, dataSource.hasMore, dataSource.loading, dataSource.response, dataSource.pagination]);
+  useEffect4(() => {
+    ensurePageLoaded(requestedPage);
+  }, [requestedPage, ensurePageLoaded]);
+  const generatedFilters = useMemo3(
+    () => buildAutoFiltersFromRows({
+      rows: loadedRows,
+      fields: autoFilterFields,
+      labelsRef: autoFilterLabelsRef,
+      maxOptions: autoFilterMaxOptions
+    }),
+    [loadedRows, autoFilterFields, autoFilterMaxOptions]
+  );
+  const resolvedFilters = filters || generatedFilters;
+  const table = React13.createElement(DataTable, {
+    title: title || `${prettifyPropertyName(objectType)} records`,
+    data: loadedRows,
+    loading: dataSource.loading || ((_b = dataSource.response) == null ? void 0 : _b.isRefetching),
+    error: dataSource.error,
+    columns: resolvedColumns,
+    rowIdField,
+    pageSize,
+    clientTotalCount: dataSource.totalCount,
+    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 }));
+      setRequestedPage(next.page || 1);
+      ensurePageLoaded(next.page);
+    },
+    ...dataTableProps,
+    ...props
+  });
+  const total = dataSource.totalCount;
+  const capped = typeof total === "number" && total > loadedRows.length;
+  if (!capped) return table;
+  return React13.createElement(
+    Flex6,
+    { direction: "column", gap: "xs" },
+    React13.createElement(
+      Text4,
+      { variant: "microcopy" },
+      dataSource.hasMore ? `Loaded ${loadedRows.length} of ${total} matching. Use the table pagination to load more CRM results.` : `Showing ${loadedRows.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",
+  stageMeta,
+  onLoadMore,
+  kanbanProps = EMPTY_OBJECT,
+  ...props
+}) => {
+  var _a, _b;
+  const [params, setParams] = useState4(EMPTY_CRM_PARAMS);
+  const resolvedProperties = useMemo3(() => properties, [properties]);
+  const resolvedSearchFields = searchFields || resolvedProperties;
+  const autoFilterFields = useMemo3(
+    () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
+    [autoFilters, resolvedProperties]
+  );
+  const autoFilterLabelsRef = useRef4({});
+  const defaultPropertyMap = useMemo3(
+    () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
+    [resolvedProperties]
+  );
+  const effectivePropertyMap = propertyMap || defaultPropertyMap;
+  const resolvedSortMap = useMemo3(
+    () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
+    [sortMap, effectivePropertyMap]
+  );
+  const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
+  const dataSourceOptions = useMemo3(
+    () => ({
+      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] = useState4(!!serverSide);
+  const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
+  const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
+  const queryKey = useMemo3(
+    () => stableStringify({ effectiveParams, objectType, properties: resolvedProperties, pageLength }),
+    [effectiveParams, objectType, resolvedProperties, pageLength]
+  );
+  const [accumulatedRows, setAccumulatedRows] = useState4(EMPTY_ARRAY);
+  const lastQueryKeyRef = useRef4(queryKey);
+  const loadedRows = accumulatedRows.length ? accumulatedRows : dataSource.data;
+  useEffect4(() => {
+    var _a2;
+    if (lastQueryKeyRef.current !== queryKey) {
+      lastQueryKeyRef.current = queryKey;
+      setAccumulatedRows(dataSource.data);
+      return;
+    }
+    const currentPage = ((_a2 = dataSource.pagination) == null ? void 0 : _a2.currentPage) || 1;
+    setAccumulatedRows((prev) => currentPage <= 1 ? dataSource.data : appendUniqueRows(prev, dataSource.data, rowIdField));
+  }, [queryKey, dataSource.data, (_a = dataSource.pagination) == null ? void 0 : _a.currentPage, rowIdField]);
+  useEffect4(() => {
+    if (!serverQuerying && typeof dataSource.totalCount === "number" && dataSource.totalCount > loadedRows.length) {
+      setServerQuerying(true);
+    }
+  }, [serverQuerying, dataSource.totalCount, loadedRows.length]);
+  const handleLoadMore = useCallback4((stage) => {
+    var _a2, _b2, _c;
+    if (onLoadMore) {
+      onLoadMore(stage);
+      return;
+    }
+    if (!dataSource.hasMore || dataSource.loading || ((_a2 = dataSource.response) == null ? void 0 : _a2.isRefetching)) return;
+    (_c = (_b2 = dataSource.pagination) == null ? void 0 : _b2.nextPage) == null ? void 0 : _c.call(_b2);
+  }, [onLoadMore, dataSource.hasMore, dataSource.loading, dataSource.response, dataSource.pagination]);
+  const generatedFilters = useMemo3(
+    () => buildAutoFiltersFromRows({
+      rows: loadedRows,
+      fields: autoFilterFields,
+      labelsRef: autoFilterLabelsRef,
+      maxOptions: autoFilterMaxOptions
+    }),
+    [loadedRows, autoFilterFields, autoFilterMaxOptions]
+  );
+  const resolvedFilters = filters || generatedFilters;
+  const resolvedStages = useMemo3(() => {
+    if (stages) return stages;
+    const seen = [];
+    for (const row of loadedRows) {
+      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, loadedRows, groupBy]);
+  const resolvedStageMeta = useMemo3(() => {
+    if (stageMeta || !dataSource.hasMore) return stageMeta;
+    return Object.fromEntries(resolvedStages.map((stage) => {
+      var _a2;
+      return [
+        stage.value,
+        {
+          hasMore: true,
+          loading: dataSource.loading || ((_a2 = dataSource.response) == null ? void 0 : _a2.isRefetching),
+          totalCount: dataSource.totalCount
+        }
+      ];
+    }));
+  }, [stageMeta, dataSource.hasMore, dataSource.loading, dataSource.response, dataSource.totalCount, resolvedStages]);
+  const board = React13.createElement(Kanban, {
+    title: title || `${prettifyPropertyName(objectType)} board`,
+    data: loadedRows,
+    loading: dataSource.loading || ((_b = dataSource.response) == null ? void 0 : _b.isRefetching),
+    error: dataSource.error,
+    rowIdField,
+    groupBy,
+    stages: resolvedStages,
+    stageMeta: resolvedStageMeta,
+    onLoadMore: dataSource.hasMore || onLoadMore ? handleLoadMore : void 0,
+    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 > loadedRows.length;
+  if (!capped) return board;
+  return React13.createElement(
+    Flex6,
+    { direction: "column", gap: "xs" },
+    React13.createElement(
+      Text4,
+      { variant: "microcopy" },
+      dataSource.hasMore ? `Loaded ${loadedRows.length} of ${total} matching. Use Load more to fetch more CRM results.` : `Showing ${loadedRows.length} of ${total} matching. Refine your search or filters to narrow the results.`
+    ),
+    board
+  );
+};
+CrmDataTable.displayName = "CrmDataTable";
+CrmKanban.displayName = "CrmKanban";
 
 // src/common-components/CrmLookupSelect.js
 var EMPTY_ARRAY2 = [];
@@ -1928,6 +4609,280 @@ var CrmLookupSelect = ({
   return React14.createElement(multiple ? MultiSelect3 : Select5, commonProps);
 };
 
+// src/common-components/CrmRecordPicker.js
+import React15, { useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+import { Flex as Flex7, MultiSelect as MultiSelect4, SearchInput as SearchInput2, Select as Select6, useDebounce as useDebounce3 } from "@hubspot/ui-extensions";
+
+// src/common-components/recordPickerCore.js
+var EMPTY_ARRAY3 = [];
+var CREATE_OPTION_VALUE = "__create__";
+var isRecordLike = (value) => value != null && typeof value === "object" && !Array.isArray(value);
+var getRecordId = (record) => {
+  if (!isRecordLike(record)) return void 0;
+  const id = record.objectId ?? record.id ?? record.hs_object_id ?? getByPath(record, "properties.hs_object_id");
+  return id == null ? void 0 : String(id);
+};
+var toList = (value) => Array.isArray(value) ? value : value == null || value === "" ? EMPTY_ARRAY3 : [value];
+var normalizeRecordSelection = (value) => {
+  const ids = [];
+  const records = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const entry of toList(value)) {
+    const rawId = isRecordLike(entry) ? getRecordId(entry) : entry;
+    const id = rawId == null || rawId === "" ? rawId : String(rawId);
+    if (id == null || id === "" || seen.has(id)) continue;
+    seen.add(id);
+    ids.push(id);
+    if (isRecordLike(entry)) records.push(entry);
+  }
+  return { ids, records };
+};
+var recordToPickerOption = (record, config = {}) => {
+  const { labelField, descriptionField, fallbackLabel = "Untitled record" } = config;
+  const label = (labelField ? getByPath(record, labelField) : void 0) ?? (record == null ? void 0 : record.name) ?? getByPath(record, "properties.name") ?? fallbackLabel;
+  const option = { label, value: getRecordId(record) };
+  const description = descriptionField ? getByPath(record, descriptionField) : void 0;
+  if (description != null && description !== "") option.description = description;
+  return option;
+};
+var mergePickerOptions = (options, selectedOptions) => {
+  const base = Array.isArray(options) ? options : EMPTY_ARRAY3;
+  const selected = toList(selectedOptions);
+  if (!selected.length) return base;
+  const existing = new Set(base.map((option) => option == null ? void 0 : option.value));
+  const missing = selected.filter((option) => option && !existing.has(option.value));
+  return missing.length ? [...missing, ...base] : base;
+};
+var enforceSelectionMax = (ids, max) => {
+  const list = toList(ids);
+  if (!Number.isFinite(max) || max <= 0 || list.length <= max) return list;
+  return list.slice(0, max);
+};
+var shouldShowCreateOption = ({
+  allowCreate,
+  searchTerm,
+  options,
+  searching = false,
+  createPending = false,
+  atMax = false
+} = {}) => {
+  if (!allowCreate || typeof allowCreate.onCreate !== "function") return false;
+  if (createPending || searching || atMax) return false;
+  const term = String(searchTerm ?? "").trim();
+  if (!term) return false;
+  const lower = term.toLowerCase();
+  return !(options || EMPTY_ARRAY3).some(
+    (option) => String((option == null ? void 0 : option.label) ?? "").trim().toLowerCase() === lower
+  );
+};
+var makeCreateOption = (term, label) => ({
+  label: typeof label === "function" ? label(term) : label || `Create "${term}"`,
+  value: CREATE_OPTION_VALUE
+});
+var splitCreateSelection = (next) => {
+  const list = toList(next);
+  const ids = list.filter((value) => value !== CREATE_OPTION_VALUE);
+  return { ids, create: ids.length !== list.length };
+};
+var mapIdsToRecords = (ids, recordsById) => {
+  const lookup = recordsById instanceof Map ? (id) => recordsById.get(id) : (id) => recordsById ? recordsById[id] : void 0;
+  return toList(ids).map((id) => lookup(id) ?? { objectId: id });
+};
+var upsertRecords = (records, additions) => {
+  const incoming = toList(additions).filter((record) => getRecordId(record) != null);
+  if (!incoming.length) return Array.isArray(records) ? records : EMPTY_ARRAY3;
+  const byId = new Map(toList(records).map((record) => [getRecordId(record), record]));
+  for (const record of incoming) byId.set(getRecordId(record), record);
+  return [...byId.values()];
+};
+
+// src/common-components/CrmRecordPicker.js
+var EMPTY_ARRAY4 = [];
+var defaultMapRecord = (record) => ({ objectId: record.objectId, ...record.properties });
+var CrmRecordPicker = ({
+  objectType,
+  properties = EMPTY_ARRAY4,
+  labelField,
+  descriptionField,
+  value,
+  defaultValue,
+  onChange,
+  multi = true,
+  max,
+  placeholder,
+  label,
+  name,
+  required,
+  readOnly,
+  error,
+  validationMessage,
+  description,
+  tooltip,
+  variant,
+  pageLength = 20,
+  debounce = 300,
+  minSearchLength = 0,
+  filterMap,
+  allowCreate = false,
+  fallbackLabel = "Untitled record",
+  format,
+  baseConfig,
+  onSearchChange,
+  ...rest
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState6(defaultValue);
+  const effectiveValue = isControlled ? value : internalValue;
+  const selection = useMemo5(() => normalizeRecordSelection(effectiveValue), [effectiveValue]);
+  const [inputValue, setInputValue] = useState6("");
+  const [seenRecords, setSeenRecords] = useState6(EMPTY_ARRAY4);
+  const [createPending, setCreatePending] = useState6(false);
+  const [createError, setCreateError] = useState6(null);
+  const createPendingRef = useRef5(false);
+  const debouncedInput = useDebounce3(inputValue, debounce > 0 ? debounce : 1);
+  const search = debounce > 0 ? debouncedInput : inputValue;
+  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
+  const optionConfig = useMemo5(
+    () => ({ labelField, descriptionField, fallbackLabel }),
+    [labelField, descriptionField, fallbackLabel]
+  );
+  const searchParams = useMemo5(() => ({ search: effectiveSearch }), [effectiveSearch]);
+  const dataSourceOptions = useMemo5(
+    () => ({
+      objectType: resolveCrmObjectType(objectType),
+      properties,
+      pageLength,
+      format,
+      filterMap,
+      baseConfig,
+      row: { mapRecord: defaultMapRecord },
+      option: { mapOption: (row) => recordToPickerOption(row, optionConfig) }
+    }),
+    [objectType, properties, pageLength, format, filterMap, baseConfig, optionConfig]
+  );
+  const dataSource = useCrmSearchOptions(searchParams, dataSourceOptions);
+  const recordsById = useMemo5(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const record of selection.records) map.set(getRecordId(record), record);
+    for (const record of seenRecords) map.set(getRecordId(record), record);
+    for (const row of dataSource.rows || EMPTY_ARRAY4) {
+      const id = getRecordId(row);
+      if (id != null) map.set(id, row);
+    }
+    return map;
+  }, [selection.records, seenRecords, dataSource.rows]);
+  const selectedOptions = useMemo5(
+    () => selection.ids.map((id) => {
+      const record = recordsById.get(id);
+      return record ? recordToPickerOption(record, optionConfig) : { label: String(id), value: id };
+    }),
+    [selection.ids, recordsById, optionConfig]
+  );
+  const isSearching = dataSource.loading || inputValue.trim() !== (search || "").trim();
+  const atMax = multi && Number.isFinite(max) && max > 0 && selection.ids.length >= max;
+  const options = useMemo5(() => {
+    const merged = mergePickerOptions(dataSource.options || EMPTY_ARRAY4, selectedOptions);
+    const showCreate = shouldShowCreateOption({
+      allowCreate,
+      searchTerm: effectiveSearch,
+      options: merged,
+      searching: isSearching,
+      createPending,
+      atMax
+    });
+    if (!showCreate) return merged;
+    return [...merged, makeCreateOption(effectiveSearch.trim(), allowCreate == null ? void 0 : allowCreate.label)];
+  }, [dataSource.options, selectedOptions, allowCreate, effectiveSearch, isSearching, createPending, atMax]);
+  const commitChange = (ids, extraRecords) => {
+    let map = recordsById;
+    if (extraRecords && extraRecords.length) {
+      map = new Map(recordsById);
+      for (const record of extraRecords) {
+        const id = getRecordId(record);
+        if (id != null) map.set(id, record);
+      }
+    }
+    const trimmed = multi ? enforceSelectionMax(ids, max) : ids.slice(0, 1);
+    const records = mapIdsToRecords(trimmed, map);
+    if (!isControlled) setInternalValue(multi ? trimmed : trimmed[0] ?? null);
+    if (onChange) {
+      if (multi) onChange(trimmed, records);
+      else onChange(trimmed[0] ?? null, records[0] ?? null);
+    }
+  };
+  const startCreate = (term, baseIds) => {
+    const onCreate = allowCreate && typeof allowCreate.onCreate === "function" ? allowCreate.onCreate : null;
+    if (!onCreate || createPendingRef.current) return;
+    createPendingRef.current = true;
+    setCreatePending(true);
+    setCreateError(null);
+    Promise.resolve(onCreate(term)).then((created) => {
+      const record = isRecordLike(created) ? created : created != null && created !== "" ? { objectId: created, name: term } : null;
+      const id = getRecordId(record);
+      if (id == null) return;
+      setSeenRecords((prev) => upsertRecords(prev, [record]));
+      const nextIds = multi ? [...baseIds.filter((v) => v !== id), id] : [id];
+      commitChange(nextIds, [record]);
+    }).catch((err) => {
+      setCreateError((err == null ? void 0 : err.message) || "Could not create the record.");
+    }).finally(() => {
+      createPendingRef.current = false;
+      setCreatePending(false);
+    });
+  };
+  const handleChange = (next) => {
+    if (createError) setCreateError(null);
+    const { ids, create } = splitCreateSelection(next);
+    const picked = ids.map((id) => recordsById.get(id)).filter(Boolean);
+    if (picked.length) setSeenRecords((prev) => upsertRecords(prev, picked));
+    if (create) {
+      startCreate(effectiveSearch.trim(), ids);
+      if (multi) commitChange(ids);
+      return;
+    }
+    commitChange(ids);
+  };
+  const handleSearchInput = (next) => {
+    setInputValue(next || "");
+    if (onSearchChange) onSearchChange(next || "");
+  };
+  const commonProps = {
+    name,
+    label,
+    value: multi ? selection.ids : selection.ids[0],
+    options,
+    placeholder: placeholder || (createPending ? "Creating record..." : dataSource.loading ? "Searching CRM..." : "Search CRM records..."),
+    description,
+    tooltip,
+    required,
+    readOnly: readOnly || createPending,
+    error: error || !!createError || !!dataSource.error,
+    validationMessage: validationMessage || createError || (typeof dataSource.error === "string" ? dataSource.error : void 0),
+    variant,
+    onChange: handleChange,
+    ...rest
+  };
+  if (!multi) {
+    return React15.createElement(Select6, { ...commonProps, onInput: handleSearchInput });
+  }
+  return React15.createElement(
+    Flex7,
+    { direction: "column", gap: "xs" },
+    React15.createElement(SearchInput2, {
+      name: name ? `${name}-search` : void 0,
+      label: "",
+      placeholder: "Search CRM records...",
+      value: inputValue,
+      readOnly: readOnly || createPending,
+      onInput: handleSearchInput,
+      // The clear "x" emits onChange (not onInput) — wire both so clearing
+      // resets the term (same pattern as CollectionToolbar).
+      onChange: handleSearchInput
+    }),
+    React15.createElement(MultiSelect4, commonProps)
+  );
+};
+
 // src/common-components/datePresets.js
 var HS_DATE_PRESETS = [
   { label: "Today", value: "today" },
@@ -1950,12 +4905,480 @@ var HS_DATE_DIRECTION_LABELS = {
   desc: "Descending"
 };
 
+// src/common-components/dateRangePresets.js
+var DATE_RANGE_CUSTOM_VALUE = "custom";
+var DATE_FILTER_OPERATORS = [
+  { label: "is", value: "InRollingDateRange" },
+  { label: "is equal to", value: "Equal" },
+  { label: "is before", value: "BeforeDateStaticOrDynamic" },
+  { label: "is after", value: "AfterDateStaticOrDynamic" },
+  { label: "is between", value: "InRange" },
+  { label: "is more than", value: "GreaterRolling" },
+  { label: "is less than", value: "LessRolling" },
+  { label: "is known", value: "Known" },
+  { label: "is unknown", value: "NotKnown" }
+];
+var DATE_ROLLING_UNIT_OPTIONS = [
+  { label: "day ago", value: "day:backward" },
+  { label: "days from now", value: "day:forward" },
+  { label: "week ago", value: "week:backward" },
+  { label: "weeks from now", value: "week:forward" },
+  { label: "month ago", value: "month:backward" },
+  { label: "months from now", value: "month:forward" },
+  { label: "year ago", value: "year:backward" },
+  { label: "years from now", value: "year:forward" }
+];
+var toHsDateValue = (date) => {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return null;
+  return { year: date.getFullYear(), month: date.getMonth(), date: date.getDate() };
+};
+var compareHsDateValues = (a, b) => {
+  if (!a || !b) return 0;
+  return a.year - b.year || a.month - b.month || a.date - b.date;
+};
+var isValidDateRange = (range) => {
+  if (!range) return true;
+  return compareHsDateValues(range.from, range.to) <= 0;
+};
+var dayAt = (now, offset = 0) => toHsDateValue(new Date(now.getFullYear(), now.getMonth(), now.getDate() + offset));
+var monthStart = (now, monthOffset = 0) => toHsDateValue(new Date(now.getFullYear(), now.getMonth() + monthOffset, 1));
+var monthEnd = (now, monthOffset = 0) => toHsDateValue(new Date(now.getFullYear(), now.getMonth() + monthOffset + 1, 0));
+var quarterStartMonth = (now, quarterOffset = 0) => Math.floor(now.getMonth() / 3) * 3 + quarterOffset * 3;
+var presetToRange = (presetKey, now = /* @__PURE__ */ new Date()) => {
+  if (!presetKey || presetKey === DATE_RANGE_CUSTOM_VALUE) return null;
+  if (!(now instanceof Date) || Number.isNaN(now.getTime())) return null;
+  const dow = now.getDay();
+  const year = now.getFullYear();
+  const qm = quarterStartMonth(now);
+  switch (presetKey) {
+    case "today":
+      return { from: dayAt(now, 0), to: dayAt(now, 0) };
+    case "yesterday":
+      return { from: dayAt(now, -1), to: dayAt(now, -1) };
+    case "tomorrow":
+      return { from: dayAt(now, 1), to: dayAt(now, 1) };
+    case "this_week":
+      return { from: dayAt(now, -dow), to: dayAt(now, 6 - dow) };
+    case "last_week":
+      return { from: dayAt(now, -dow - 7), to: dayAt(now, -dow - 1) };
+    case "7d":
+      return { from: dayAt(now, -6), to: dayAt(now, 0) };
+    case "30d":
+      return { from: dayAt(now, -29), to: dayAt(now, 0) };
+    case "90d":
+      return { from: dayAt(now, -89), to: dayAt(now, 0) };
+    case "this_month":
+      return { from: monthStart(now, 0), to: monthEnd(now, 0) };
+    case "last_month":
+      return { from: monthStart(now, -1), to: monthEnd(now, -1) };
+    case "this_quarter":
+      return {
+        from: toHsDateValue(new Date(year, qm, 1)),
+        to: toHsDateValue(new Date(year, qm + 3, 0))
+      };
+    case "last_quarter":
+      return {
+        from: toHsDateValue(new Date(year, qm - 3, 1)),
+        to: toHsDateValue(new Date(year, qm, 0))
+      };
+    case "this_year":
+      return { from: { year, month: 0, date: 1 }, to: { year, month: 11, date: 31 } };
+    case "last_year":
+      return {
+        from: { year: year - 1, month: 0, date: 1 },
+        to: { year: year - 1, month: 11, date: 31 }
+      };
+    default:
+      return null;
+  }
+};
+
+// src/common-components/DateRangePicker.js
+import React16, { useState as useState7 } from "react";
+import {
+  AutoGrid as AutoGrid2,
+  Box as Box4,
+  DateInput as DateInput3,
+  Flex as Flex8,
+  Link as Link4,
+  NumberInput as NumberInput2,
+  Select as Select7,
+  Text as Text5
+} from "@hubspot/ui-extensions";
+var h6 = React16.createElement;
+var IN_ROLLING = "InRollingDateRange";
+var EQUAL = "Equal";
+var BEFORE = "BeforeDateStaticOrDynamic";
+var AFTER = "AfterDateStaticOrDynamic";
+var GREATER_ROLLING = "GreaterRolling";
+var LESS_ROLLING = "LessRolling";
+var IN_RANGE = "InRange";
+var KNOWN = "Known";
+var NOT_KNOWN = "NotKnown";
+var EMPTY_RANGE = { from: null, to: null };
+var EMPTY_DATE = { date: null };
+var COMPACT_LABEL = "";
+var STATIC_DATE_OPERATORS = /* @__PURE__ */ new Set([EQUAL, BEFORE, AFTER]);
+var ROLLING_OPERATORS = /* @__PURE__ */ new Set([GREATER_ROLLING, LESS_ROLLING]);
+var PRESENCE_OPERATORS = /* @__PURE__ */ new Set([KNOWN, NOT_KNOWN]);
+var keyOfDate = (v) => v ? `${v.year}-${v.month}-${v.date}` : "";
+var keyOfRange = (r) => `${keyOfDate(r == null ? void 0 : r.from)}|${keyOfDate(r == null ? void 0 : r.to)}`;
+var isRangeLike = (value) => value && typeof value === "object" && ("from" in value || "to" in value) && !("operator" in value);
+var normalizeValue = (value) => {
+  if (isRangeLike(value)) {
+    return { operator: IN_RANGE, from: value.from ?? null, to: value.to ?? null };
+  }
+  if (!value || typeof value !== "object") {
+    return { operator: IN_ROLLING, preset: "today" };
+  }
+  const operator = value.operator || IN_ROLLING;
+  if (operator === IN_RANGE) {
+    return { operator, from: value.from ?? null, to: value.to ?? null };
+  }
+  if (STATIC_DATE_OPERATORS.has(operator)) {
+    return { operator, date: value.date ?? null };
+  }
+  if (ROLLING_OPERATORS.has(operator)) {
+    return {
+      operator,
+      amount: Number.isFinite(Number(value.amount)) ? Number(value.amount) : 1,
+      unit: value.unit || "day",
+      direction: value.direction || "backward"
+    };
+  }
+  if (PRESENCE_OPERATORS.has(operator)) {
+    return { operator };
+  }
+  return { operator: IN_ROLLING, preset: value.preset || value.value || "today" };
+};
+var rangeFromValue = (value) => ({
+  from: (value == null ? void 0 : value.from) ?? null,
+  to: (value == null ? void 0 : value.to) ?? null
+});
+var getPresetOptions = (presets, customPresetLabel) => {
+  const presetList = presets === true ? HS_DATE_PRESETS : Array.isArray(presets) ? presets : null;
+  if (!presetList) return null;
+  return [
+    ...presetList.map((p) => ({ label: p.label, value: p.value })),
+    ...presetList.some((p) => p.value === DATE_RANGE_CUSTOM_VALUE) ? [] : [{ label: customPresetLabel, value: DATE_RANGE_CUSTOM_VALUE }]
+  ];
+};
+var DateRangePicker = ({
+  value,
+  defaultValue,
+  onChange,
+  label,
+  name = "date-range",
+  field,
+  defaultField,
+  onFieldChange,
+  showFieldSelect = false,
+  fieldOptions = [],
+  operator,
+  defaultOperator = IN_ROLLING,
+  onOperatorChange,
+  showOperatorSelect = true,
+  operatorOptions = DATE_FILTER_OPERATORS,
+  presets = true,
+  rollingUnitOptions = DATE_ROLLING_UNIT_OPTIONS,
+  direction = "row",
+  clearable = false,
+  min,
+  max,
+  fromLabel = "Start date",
+  toLabel = "End date",
+  dateLabel = "Date",
+  showDateLabels = false,
+  format = "medium",
+  presetPlaceholder = "Enter value",
+  customPresetLabel = "Custom",
+  clearLabel = "Clear",
+  invalidRangeMessage = "Start date must be on or before end date",
+  readOnly = false,
+  gap,
+  gridColumnWidth = 260
+}) => {
+  const isControlled = value !== void 0;
+  const controlledValue = normalizeValue(value);
+  const [internalValue, setInternalValue] = useState7(
+    () => normalizeValue(defaultValue ?? { operator: defaultOperator })
+  );
+  const [internalField, setInternalField] = useState7(
+    () => {
+      var _a;
+      return defaultField ?? ((_a = fieldOptions == null ? void 0 : fieldOptions[0]) == null ? void 0 : _a.value) ?? "";
+    }
+  );
+  const current = normalizeValue(isControlled ? controlledValue : internalValue);
+  const currentOperator = operator || current.operator || defaultOperator;
+  const currentField = field !== void 0 ? field : internalField;
+  const resolvedCurrent = normalizeValue({ ...current, operator: currentOperator });
+  const [pending, setPending] = useState7(null);
+  const [lastPreset, setLastPreset] = useState7({
+    key: resolvedCurrent.preset || "",
+    rangeKey: null
+  });
+  const isColumn = direction === "column";
+  const presetOptions = getPresetOptions(presets, customPresetLabel);
+  const showClear = clearable && !readOnly && (resolvedCurrent.preset || resolvedCurrent.date || resolvedCurrent.amount || resolvedCurrent.from || resolvedCurrent.to || pending);
+  const emit = (next, meta = {}) => {
+    const normalized = normalizeValue(next);
+    if (!isControlled) setInternalValue(normalized);
+    if (normalized.operator !== currentOperator) {
+      onOperatorChange == null ? void 0 : onOperatorChange(normalized.operator);
+    }
+    onChange == null ? void 0 : onChange(normalized, {
+      operator: normalized.operator,
+      field: currentField || null,
+      preset: normalized.operator === IN_ROLLING ? normalized.preset ?? null : null,
+      ...meta
+    });
+  };
+  const handleFieldChange = (nextField) => {
+    if (field === void 0) setInternalField(nextField);
+    onFieldChange == null ? void 0 : onFieldChange(nextField);
+    onChange == null ? void 0 : onChange(resolvedCurrent, {
+      operator: resolvedCurrent.operator,
+      field: nextField || null,
+      preset: resolvedCurrent.operator === IN_ROLLING ? resolvedCurrent.preset ?? null : null
+    });
+  };
+  const handleOperatorChange = (nextOperator) => {
+    setPending(null);
+    if (nextOperator === IN_RANGE) {
+      emit({ operator: IN_RANGE, ...EMPTY_RANGE }, { previousOperator: currentOperator });
+    } else if (STATIC_DATE_OPERATORS.has(nextOperator)) {
+      emit({ operator: nextOperator, ...EMPTY_DATE }, { previousOperator: currentOperator });
+    } else if (ROLLING_OPERATORS.has(nextOperator)) {
+      emit(
+        { operator: nextOperator, amount: 1, unit: "day", direction: "backward" },
+        { previousOperator: currentOperator }
+      );
+    } else if (PRESENCE_OPERATORS.has(nextOperator)) {
+      emit({ operator: nextOperator }, { previousOperator: currentOperator });
+    } else {
+      emit({ operator: IN_ROLLING, preset: "today" }, { previousOperator: currentOperator });
+    }
+  };
+  const handlePresetChange = (preset) => {
+    if (!preset || preset === DATE_RANGE_CUSTOM_VALUE) {
+      emit({ operator: IN_ROLLING, preset: DATE_RANGE_CUSTOM_VALUE });
+      return;
+    }
+    const option = presets === true ? HS_DATE_PRESETS.find((p) => p.value === preset) : Array.isArray(presets) ? presets.find((p) => p.value === preset) : null;
+    const range = option && typeof option.getRange === "function" ? option.getRange(/* @__PURE__ */ new Date()) : presetToRange(preset);
+    setLastPreset({ key: preset, rangeKey: range ? keyOfRange(range) : null });
+    emit({ operator: IN_ROLLING, preset }, { range });
+  };
+  const handleRollingUnitChange = (compound) => {
+    const [unit, unitDirection] = String(compound || "day:backward").split(":");
+    emit({
+      operator: currentOperator,
+      amount: resolvedCurrent.amount || 1,
+      unit,
+      direction: unitDirection || "backward"
+    });
+  };
+  const handleDateChange = (side, next) => {
+    const displayRange = {
+      ...rangeFromValue(resolvedCurrent),
+      ...pending ? { [pending.side]: pending.value } : {}
+    };
+    const candidate = { ...displayRange, [side]: next ?? null };
+    if (isValidDateRange(candidate)) {
+      setPending(null);
+      setLastPreset({ key: "", rangeKey: null });
+      emit({ operator: IN_RANGE, ...candidate });
+    } else {
+      setPending({ side, value: next ?? null });
+    }
+  };
+  const handleStaticDateChange = (next) => {
+    emit({ operator: currentOperator, date: next ?? null });
+  };
+  const handleClear = () => {
+    setPending(null);
+    setLastPreset({ key: "", rangeKey: null });
+    if (currentOperator === IN_RANGE) {
+      emit({ operator: IN_RANGE, ...EMPTY_RANGE });
+    } else if (STATIC_DATE_OPERATORS.has(currentOperator)) {
+      emit({ operator: currentOperator, ...EMPTY_DATE });
+    } else if (ROLLING_OPERATORS.has(currentOperator)) {
+      emit({ operator: currentOperator, amount: 1, unit: "day", direction: "backward" });
+    } else if (PRESENCE_OPERATORS.has(currentOperator)) {
+      emit({ operator: currentOperator });
+    } else {
+      emit({ operator: IN_ROLLING, preset: "" });
+    }
+  };
+  const operatorSelect = showOperatorSelect ? h6(Select7, {
+    key: "operator",
+    name: `${name}-operator`,
+    label: COMPACT_LABEL,
+    options: operatorOptions,
+    value: currentOperator,
+    onChange: handleOperatorChange,
+    readOnly
+  }) : null;
+  const fieldSelect = showFieldSelect ? h6(Select7, {
+    key: "field",
+    name: `${name}-field`,
+    label: "",
+    options: fieldOptions,
+    value: currentField,
+    onChange: handleFieldChange,
+    readOnly
+  }) : null;
+  let valueInput = null;
+  const fromInputLabel = showDateLabels ? fromLabel : COMPACT_LABEL;
+  const toInputLabel = showDateLabels ? toLabel : COMPACT_LABEL;
+  const singleDateInputLabel = showDateLabels ? dateLabel : COMPACT_LABEL;
+  if (currentOperator === IN_RANGE) {
+    const committed = rangeFromValue(resolvedCurrent);
+    const display = {
+      ...committed,
+      ...pending ? { [pending.side]: pending.value } : {}
+    };
+    const invalidSide = pending ? pending.side : null;
+    valueInput = [
+      h6(DateInput3, {
+        key: "from",
+        name: `${name}-from`,
+        label: fromInputLabel,
+        format,
+        value: display.from ?? null,
+        onChange: (next) => handleDateChange("from", next),
+        min,
+        max,
+        readOnly,
+        error: invalidSide === "from",
+        validationMessage: invalidSide === "from" ? invalidRangeMessage : void 0
+      }),
+      isColumn ? null : h6(Text5, { key: "to" }, "to"),
+      h6(DateInput3, {
+        key: "toDate",
+        name: `${name}-to`,
+        label: toInputLabel,
+        format,
+        value: display.to ?? null,
+        onChange: (next) => handleDateChange("to", next),
+        min,
+        max,
+        readOnly,
+        error: invalidSide === "to",
+        validationMessage: invalidSide === "to" ? invalidRangeMessage : void 0
+      })
+    ];
+  } else if (STATIC_DATE_OPERATORS.has(currentOperator)) {
+    valueInput = h6(DateInput3, {
+      key: "date",
+      name: `${name}-date`,
+      label: singleDateInputLabel,
+      format,
+      value: resolvedCurrent.date ?? null,
+      onChange: handleStaticDateChange,
+      min,
+      max,
+      readOnly
+    });
+  } else if (ROLLING_OPERATORS.has(currentOperator)) {
+    const compound = `${resolvedCurrent.unit || "day"}:${resolvedCurrent.direction || "backward"}`;
+    valueInput = [
+      h6(NumberInput2, {
+        key: "amount",
+        name: `${name}-amount`,
+        label: COMPACT_LABEL,
+        min: 0,
+        value: resolvedCurrent.amount ?? 1,
+        onChange: (amount) => emit({
+          operator: currentOperator,
+          amount: Number.isFinite(Number(amount)) ? Number(amount) : 0,
+          unit: resolvedCurrent.unit || "day",
+          direction: resolvedCurrent.direction || "backward"
+        }),
+        readOnly
+      }),
+      h6(Select7, {
+        key: "unit",
+        name: `${name}-rolling-unit`,
+        label: COMPACT_LABEL,
+        options: rollingUnitOptions,
+        value: compound,
+        onChange: handleRollingUnitChange,
+        readOnly
+      })
+    ];
+  } else if (PRESENCE_OPERATORS.has(currentOperator)) {
+    valueInput = null;
+  } else {
+    const range = presetToRange(resolvedCurrent.preset);
+    const presetValue = resolvedCurrent.preset || (lastPreset.rangeKey && range && lastPreset.rangeKey === keyOfRange(range) ? lastPreset.key : "");
+    valueInput = h6(Select7, {
+      key: "preset",
+      name: `${name}-preset`,
+      label: COMPACT_LABEL,
+      placeholder: presetPlaceholder,
+      options: presetOptions || [],
+      value: presetValue,
+      onChange: handlePresetChange,
+      readOnly
+    });
+  }
+  const valueChildren = [
+    ...Array.isArray(valueInput) ? valueInput : valueInput ? [valueInput] : [],
+    showClear ? h6(Link4, { key: "clear", onClick: handleClear }, clearLabel) : null
+  ];
+  const children = [operatorSelect, ...valueChildren];
+  if (fieldSelect) {
+    const rowChildren = [
+      h6(Box4, { key: "field-box", flex: "auto", alignSelf: "stretch" }, fieldSelect),
+      operatorSelect ? h6(Box4, { key: "operator-box", flex: "auto", alignSelf: "stretch" }, operatorSelect) : null,
+      ...valueChildren.map(
+        (child, index) => (child == null ? void 0 : child.type) === Text5 || (child == null ? void 0 : child.type) === Link4 ? child : h6(Box4, { key: `value-box-${index}`, flex: "auto", alignSelf: "stretch" }, child)
+      )
+    ].filter(Boolean);
+    const fieldControl = h6(
+      AutoGrid2,
+      {
+        columnWidth: gridColumnWidth,
+        flexible: true,
+        gap: gap ?? "xs"
+      },
+      ...rowChildren
+    );
+    if (!label) return fieldControl;
+    return h6(
+      Flex8,
+      { direction: "column", gap: "xs" },
+      h6(Text5, { format: { fontWeight: "demibold" } }, label),
+      fieldControl
+    );
+  }
+  const control = h6(
+    Flex8,
+    {
+      direction: isColumn ? "column" : "row",
+      align: isColumn ? "stretch" : "center",
+      gap: gap ?? (isColumn ? "sm" : "xs"),
+      wrap: isColumn ? void 0 : "wrap"
+    },
+    ...children
+  );
+  if (!label) return control;
+  return h6(
+    Flex8,
+    { direction: "column", gap: "xs" },
+    h6(Text5, { format: { fontWeight: "demibold" } }, label),
+    control
+  );
+};
+
 // src/common-components/KeyValueList.js
-import React15 from "react";
-import { DescriptionList as DescriptionList2, DescriptionListItem as DescriptionListItem2, Flex as Flex7 } from "@hubspot/ui-extensions";
+import React17 from "react";
+import { DescriptionList as DescriptionList2, DescriptionListItem as DescriptionListItem2, Flex as Flex9 } from "@hubspot/ui-extensions";
 var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
   const rows = items.map(
-    (item, index) => React15.createElement(
+    (item, index) => React17.createElement(
       DescriptionListItem2,
       {
         key: item.key ?? item.label ?? `kv-${index}`,
@@ -1964,16 +5387,17 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
       item.value
     )
   );
-  return React15.createElement(
-    Flex7,
+  return React17.createElement(
+    Flex9,
     { direction: "column", gap },
-    React15.createElement(DescriptionList2, { direction }, ...rows)
+    React17.createElement(DescriptionList2, { direction }, ...rows)
   );
 };
+KeyValueList.displayName = "KeyValueList";
 
 // src/common-components/SectionHeader.js
-import React16 from "react";
-import { Flex as Flex8, Heading, Text as Text5 } from "@hubspot/ui-extensions";
+import React18 from "react";
+import { Flex as Flex10, Heading, Text as Text6 } from "@hubspot/ui-extensions";
 var SectionHeader = ({
   title,
   description,
@@ -1984,12 +5408,12 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(React16.createElement(Heading, { key: "title", as: titleAs }, title));
+    body.push(React18.createElement(Heading, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(
-      React16.createElement(
-        Text5,
+      React18.createElement(
+        Text6,
         { key: "description", variant: "microcopy" },
         description
       )
@@ -1998,10 +5422,10 @@ var SectionHeader = ({
   if (children != null) {
     body.push(children);
   }
-  const content = React16.createElement(Flex8, { direction: "column", gap }, ...body);
+  const content = React18.createElement(Flex10, { direction: "column", gap }, ...body);
   if (actions == null) return content;
-  return React16.createElement(
-    Flex8,
+  return React18.createElement(
+    Flex10,
     { direction: "row", justify: "between", align: "start", gap: "sm" },
     content,
     actions
@@ -2009,8 +5433,8 @@ var SectionHeader = ({
 };
 
 // src/common-components/Spinner.js
-import React17, { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
-import { Text as Text6 } from "@hubspot/ui-extensions";
+import React19, { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
+import { Text as Text7 } from "@hubspot/ui-extensions";
 
 // src/common-components/spinners.js
 var BRAILLE_DOT_MAP = [
@@ -2350,8 +5774,8 @@ var Spinner = ({
   const preset = SPINNERS[name] || SPINNERS[DEFAULT_NAME];
   const resolvedFrames = Array.isArray(frames) && frames.length > 0 ? frames : preset.frames;
   const resolvedInterval = Number.isFinite(interval) ? interval : preset.interval;
-  const [index, setIndex] = useState6(0);
-  const indexRef = useRef5(0);
+  const [index, setIndex] = useState8(0);
+  const indexRef = useRef6(0);
   indexRef.current = index;
   useEffect5(() => {
     if (paused || resolvedFrames.length <= 1) return void 0;
@@ -2368,10 +5792,10 @@ var Spinner = ({
   const frame = resolvedFrames[index % resolvedFrames.length];
   const suffix = children != null ? children : label;
   if (suffix == null || suffix === "") {
-    return React17.createElement(Text6, rest, frame);
+    return React19.createElement(Text7, rest, frame);
   }
-  return React17.createElement(
-    Text6,
+  return React19.createElement(
+    Text7,
     rest,
     frame,
     gap,
@@ -2383,12 +5807,18 @@ export {
   AutoStatusTag,
   AutoTag,
   AvatarStack,
+  CREATE_OPTION_VALUE,
   CollectionCount,
   CollectionFilterControl,
   CollectionSortSelect,
   CollectionToolbar,
   CrmLookupSelect,
+  CrmRecordPicker,
+  DATE_FILTER_OPERATORS,
+  DATE_RANGE_CUSTOM_VALUE,
+  DATE_ROLLING_UNIT_OPTIONS,
   DEFAULT_SVG_FONT_WEIGHT,
+  DateRangePicker,
   HS_DATE_DIRECTION_LABELS,
   HS_DATE_PRESETS,
   HS_FONT_FAMILY,
@@ -2409,16 +5839,32 @@ export {
   Icon,
   KeyValueList,
   NATIVE_ICON_NAME_LIST,
+  SKELETON_FILL,
   SPINNERS,
   SPINNER_NAMES,
   SectionHeader,
   Spinner,
   StyledText,
+  compareHsDateValues,
+  enforceSelectionMax,
   formatCollectionCount,
+  getRecordId,
   gridToBraille,
+  isRecordLike,
+  isValidDateRange,
   makeAvatarStackDataUri,
+  makeCreateOption,
   makeGrid,
   makeIconDataUri,
   makeStyledTextDataUri,
-  svgToIconEntry
+  mapIdsToRecords,
+  mergePickerOptions,
+  normalizeRecordSelection,
+  presetToRange,
+  recordToPickerOption,
+  shouldShowCreateOption,
+  splitCreateSelection,
+  svgToIconEntry,
+  toHsDateValue,
+  upsertRecords
 };