hs-uix 2.1.1 → 2.2.0

package/dist/index.mjs

@@ -267,6 +267,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;
@@ -529,7 +530,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",
@@ -541,12 +542,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -575,13 +576,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -722,6 +723,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",
@@ -963,6 +966,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,
@@ -971,6 +975,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,
@@ -1109,6 +1114,45 @@ var editValidationError = (result) => {
   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,
@@ -1348,6 +1392,21 @@ var DataTable = ({
   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,
@@ -1592,6 +1651,25 @@ var DataTable = ({
     });
     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),
@@ -1743,6 +1821,7 @@ var DataTable = ({
     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;
@@ -1783,15 +1862,15 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ React6.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "time":
-        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "datetime":
-        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.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__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React6.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 });
@@ -1805,7 +1884,8 @@ var DataTable = ({
     }
   };
   const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
-  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  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]
@@ -1824,6 +1904,7 @@ var DataTable = ({
     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;
@@ -1872,13 +1953,13 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ React6.createElement(MultiSelect2, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "time":
-        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ React6.createElement(TimeInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "datetime":
-        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+        return /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(DateInput2, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: value == null ? void 0 : value.date, onChange: (val) => {
           fire({ ...value, date: val });
-        } }), /* @__PURE__ */ React6.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+        } }), /* @__PURE__ */ React6.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":
@@ -2032,7 +2113,7 @@ var DataTable = ({
         checked: allVisibleSelected,
         onChange: handleSelectAll
       }
-    )), columns.map((col) => {
+    )), showExpandColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
       const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
       return /* @__PURE__ */ React6.createElement(
         TableHeader,
@@ -2046,8 +2127,8 @@ var DataTable = ({
         col.description ? /* @__PURE__ */ React6.createElement(React6.Fragment, null, col.label, "\xA0", /* @__PURE__ */ React6.createElement(Link2, { inline: true, variant: "dark", overlay: /* @__PURE__ */ React6.createElement(Tooltip, null, col.description) }, /* @__PURE__ */ React6.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }))),
-    /* @__PURE__ */ React6.createElement(TableBody, null, displayRows.map(
-      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
+    /* @__PURE__ */ React6.createElement(TableBody, null, renderedRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), showExpandColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
         var _a, _b, _c;
         return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ React6.createElement(Flex4, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React6.createElement(
           Icon,
@@ -2064,7 +2145,7 @@ var DataTable = ({
           },
           /* @__PURE__ */ React6.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__ */ React6.createElement(TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ React6.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(
+      }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" })) : item.type === "detail" ? /* @__PURE__ */ React6.createElement(TableRow, { key: `detail-${item.row[rowIdField] ?? idx}` }, /* @__PURE__ */ React6.createElement(TableCell, { colSpan: totalColumnCount }, renderExpandedRow(item.row))) : useColumnRendering ? /* @__PURE__ */ React6.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.createElement(
         Checkbox,
         {
           name: `select-${item.row[rowIdField]}`,
@@ -2072,13 +2153,22 @@ var DataTable = ({
           checked: selectedIds.has(item.row[rowIdField]),
           onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
         }
+      )), showExpandColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.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;
-        return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+        const cellContent = renderCellContent(item.row, col);
+        const wrapInRowToggle = expandable && expandOn === "row" && !col.editable && !isShowingInput;
+        return /* @__PURE__ */ React6.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, wrapInRowToggle ? /* @__PURE__ */ React6.createElement(Link2, { variant: "dark", onClick: () => toggleRowExpanded(rowId) }, cellContent) : cellContent);
       }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React6.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 : [];
@@ -2095,13 +2185,14 @@ var DataTable = ({
         ));
       })()))) : renderRow(item.row)
     )),
-    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React6.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React6.createElement(TableRow, null, selectable && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React6.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React6.createElement(TableRow, null, selectable && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), showExpandColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" }), columns.map((col) => {
       const footerDef = col.footer;
       const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
       return /* @__PURE__ */ React6.createElement(TableHeader, { key: col.field, align: col.align }, content);
     }), showRowActionsColumn && /* @__PURE__ */ React6.createElement(TableHeader, { width: "min" })))
   ));
 };
+DataTable.displayName = "DataTable";
 
 // src/form/FormBuilder.jsx
 import React7, {
@@ -2140,7 +2231,12 @@ import {
   TimeInput as TimeInput2,
   Toggle as Toggle2,
   Checkbox as Checkbox2,
-  ToggleGroup
+  ToggleGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  LoadingSpinner,
+  useExtensionActions
 } from "@hubspot/ui-extensions";
 import {
   CrmPropertyList,
@@ -2467,8 +2563,25 @@ var resolveDependentCascade = ({ name, value, fields, values, getEmptyValueForFi
   return { newValues, changedDependents };
 };
 
+// src/form/formDirty.js
+var isFormDirty = (values, initialValues) => !deepEqual(values || {}, initialValues || {});
+var getDirtyFields = (values, initialValues) => {
+  const current = values || {};
+  const baseline = initialValues || {};
+  const names = [...Object.keys(current)];
+  for (const name of Object.keys(baseline)) {
+    if (!Object.prototype.hasOwnProperty.call(current, name)) names.push(name);
+  }
+  return names.filter((name) => !deepEqual(current[name], baseline[name]));
+};
+
 // src/form/FormBuilder.jsx
 var getRepeaterErrorKey = (fieldName, rowIdx, subFieldName) => `${fieldName}[${rowIdx}].${subFieldName}`;
+var withFieldLoadingSpinner = (element, loading) => {
+  if (!loading) return element;
+  return /* @__PURE__ */ React7.createElement(Flex5, { direction: "row", gap: "xs", align: "end" }, /* @__PURE__ */ React7.createElement(Box3, { flex: 1 }, element), /* @__PURE__ */ React7.createElement(LoadingSpinner, { size: "xs", layout: "inline" }));
+};
+var formBuilderInstanceCounter = 0;
 var fieldSetHasErrors = (errors, fields) => {
   if (!errors || !fields || fields.length === 0) return false;
   const names = new Set(fields.map((field) => field.name));
@@ -2568,8 +2681,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // controlled loading state
     disabled = false,
     // disable entire form
-    renderButtons: renderButtonsProp
+    renderButtons: renderButtonsProp,
     // custom action row renderer
+    confirmDiscard
+    // true | { title, message, confirmLabel, cancelLabel } — confirm before the built-in Cancel discards dirty changes
   } = props;
   const {
     columns = 1,
@@ -2688,6 +2803,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       "readOnly",
       "alwaysEditable",
       "disabled",
+      "loading",
       "defaultValue",
       "fieldProps",
       "colSpan",
@@ -2944,7 +3060,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     syncDirtyBaseline(values);
   }, [values, syncDirtyBaseline]);
   const isDirty = useMemo2(() => {
-    return !deepEqual(formValues, initialSnapshot.current);
+    return isFormDirty(formValues, initialSnapshot.current);
   }, [formValues]);
   const prevDirtyRef = useRef3(false);
   useEffect3(() => {
@@ -2953,6 +3069,27 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (onDirtyChange) onDirtyChange(isDirty);
     }
   }, [isDirty, onDirtyChange]);
+  let hostActions = null;
+  try {
+    hostActions = useExtensionActions();
+  } catch (err) {
+    hostActions = null;
+  }
+  const discardModalIdRef = useRef3(null);
+  if (discardModalIdRef.current === null) {
+    formBuilderInstanceCounter += 1;
+    discardModalIdRef.current = `hs-uix-form-discard-${formBuilderInstanceCounter}`;
+  }
+  const discardConfig = confirmDiscard ? confirmDiscard === true ? {} : confirmDiscard : null;
+  const discardTitle = discardConfig && discardConfig.title || "Discard changes?";
+  const discardMessage = discardConfig && discardConfig.message || "You have unsaved changes. If you discard now, they will be lost.";
+  const discardConfirmLabel = discardConfig && discardConfig.confirmLabel || "Discard changes";
+  const discardCancelLabel = discardConfig && discardConfig.cancelLabel || "Keep editing";
+  const closeDiscardModal = useCallback3(() => {
+    if (hostActions && typeof hostActions.closeOverlay === "function") {
+      hostActions.closeOverlay(discardModalIdRef.current);
+    }
+  }, [hostActions]);
   const autoSaveTimerRef = useRef3(null);
   const autoSaveRef = useRef3(autoSave);
   autoSaveRef.current = autoSave;
@@ -3591,6 +3728,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     },
     getValues: () => formValues,
     isDirty: () => isDirty,
+    getDirtyFields: () => getDirtyFields(formValuesRef.current, initialSnapshot.current),
     setFieldValue: (name, value) => handleFieldChange(name, value),
     setFieldError: (name, message) => updateErrors({ [name]: message }),
     setErrors: (errors) => {
@@ -3610,7 +3748,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const isRequired = showRequiredIndicator && resolveRequired(field, formValues);
     const fieldFormReadOnly = field.alwaysEditable ? false : formReadOnly;
     const isReadOnly = field.readOnly || fieldFormReadOnly;
-    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly;
+    const isFieldLoading = !!field.loading;
+    const isDisabled = disabled || resolveDisabled(field, formValues) || fieldFormReadOnly || isFieldLoading;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display" || field.type === "slot") {
       if (field.render) {
@@ -3794,7 +3933,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       disabled: isDisabled,
       error: hasError,
       validationMessage: renderFieldError ? void 0 : fieldError || void 0,
-      ...field.loading || validatingFields[field.name] ? { loading: true } : {},
+      ...validatingFields[field.name] ? { loading: true } : {},
       ...field.fieldProps || {}
     };
     const options = resolveOptions(field, formValues);
@@ -3952,25 +4091,31 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         )));
       }
       case "select":
-        return /* @__PURE__ */ React7.createElement(
-          Select3,
-          {
-            ...commonProps,
-            value: fieldValue,
-            options,
-            variant: field.variant,
-            onChange: fieldOnChange
-          }
+        return withFieldLoadingSpinner(
+          /* @__PURE__ */ React7.createElement(
+            Select3,
+            {
+              ...commonProps,
+              value: fieldValue,
+              options,
+              variant: field.variant,
+              onChange: fieldOnChange
+            }
+          ),
+          isFieldLoading
         );
       case "multiselect":
-        return /* @__PURE__ */ React7.createElement(
-          MultiSelect3,
-          {
-            ...commonProps,
-            value: fieldValue || [],
-            options,
-            onChange: fieldOnChange
-          }
+        return withFieldLoadingSpinner(
+          /* @__PURE__ */ React7.createElement(
+            MultiSelect3,
+            {
+              ...commonProps,
+              value: fieldValue || [],
+              options,
+              onChange: fieldOnChange
+            }
+          ),
+          isFieldLoading
         );
       case "toggle":
         return /* @__PURE__ */ React7.createElement(
@@ -4491,6 +4636,30 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     if (layout) return renderExplicitLayout();
     return renderFieldSubset(visibleFields);
   };
+  const renderCancelButton = () => {
+    if (discardConfig && isDirty) {
+      return /* @__PURE__ */ React7.createElement(
+        Button4,
+        {
+          variant: "secondary",
+          disabled,
+          overlay: /* @__PURE__ */ React7.createElement(Modal, { id: discardModalIdRef.current, title: discardTitle, width: "small" }, /* @__PURE__ */ React7.createElement(ModalBody, null, /* @__PURE__ */ React7.createElement(Text3, null, discardMessage)), /* @__PURE__ */ React7.createElement(ModalFooter, null, /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: closeDiscardModal }, discardCancelLabel), /* @__PURE__ */ React7.createElement(
+            Button4,
+            {
+              variant: "destructive",
+              onClick: () => {
+                closeDiscardModal();
+                if (onCancel) onCancel();
+              }
+            },
+            discardConfirmLabel
+          )))
+        },
+        cancelButtonLabel
+      );
+    }
+    return /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel);
+  };
   const renderButtons = () => {
     if (submitPosition === "none" || formReadOnly) return null;
     const isLastStep = !isMultiStep || currentStep === steps.length - 1;
@@ -4504,6 +4673,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       totalSteps: isMultiStep ? steps.length : 1,
       disabled,
       loading: isLoading,
+      isDirty,
       labels: {
         submit: submitButtonLabel,
         cancel: cancelButtonLabel,
@@ -4519,7 +4689,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       return renderButtonsProp(buttonContext);
     }
     if (isMultiStep) {
-      return /* @__PURE__ */ React7.createElement(Flex5, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: handleBack, disabled }, backButtonLabel) : showCancel ? /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel) : /* @__PURE__ */ React7.createElement(Text3, null, " "), /* @__PURE__ */ React7.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React7.createElement(Text3, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React7.createElement(Flex5, { direction: "row", justify: "between", align: "center" }, !isFirstStep ? /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: handleBack, disabled }, backButtonLabel) : showCancel ? renderCancelButton() : /* @__PURE__ */ React7.createElement(Text3, null, " "), /* @__PURE__ */ React7.createElement(Inline, { gap: "small" }, /* @__PURE__ */ React7.createElement(Text3, { variant: "microcopy" }, "Step ", currentStep + 1, " of ", steps.length), isLastStep ? /* @__PURE__ */ React7.createElement(
         LoadingButton,
         {
           variant: submitVariant,
@@ -4530,7 +4700,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         submitButtonLabel
       ) : /* @__PURE__ */ React7.createElement(Button4, { variant: "primary", onClick: handleNext, disabled }, nextButtonLabel)));
     }
-    return /* @__PURE__ */ React7.createElement(Flex5, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && /* @__PURE__ */ React7.createElement(Button4, { variant: "secondary", onClick: onCancel, disabled }, cancelButtonLabel), /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React7.createElement(Flex5, { direction: "row", justify: singleStepJustify, gap: "sm" }, showCancel && renderCancelButton(), /* @__PURE__ */ React7.createElement(
       LoadingButton,
       {
         variant: submitVariant,
@@ -4570,10 +4740,231 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     formContent
   );
 });
+FormBuilder.displayName = "FormBuilder";
+
+// src/form/hubspotSchema.js
+var coerceBool = (value) => value === true || value === "true" || value === "Yes" || value === "yes" || value === "1";
+var coerceNumber = (value) => {
+  if (value === null || value === void 0 || value === "") return void 0;
+  if (typeof value === "number") return value;
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+};
+var mapPropertyOptions = (options) => {
+  if (!Array.isArray(options)) return void 0;
+  const mapped = options.filter((opt) => opt && opt.hidden !== true).map((opt) => {
+    const result = { label: opt.label != null ? opt.label : String(opt.value), value: opt.value };
+    if (opt.description != null && opt.description !== "") result.description = opt.description;
+    return result;
+  });
+  return mapped;
+};
+var resolveFieldType = (property) => {
+  const { type, fieldType } = property;
+  if (type === "datetime") return "datetime";
+  if (type === "date" || fieldType === "date") return "date";
+  switch (fieldType) {
+    case "select":
+      return "select";
+    // FormBuilder's radio rendering is the "radioGroup" type (native
+    // ToggleGroup with toggleType="radioButtonList").
+    case "radio":
+      return "radioGroup";
+    // HubSpot "checkbox" = multiple checkboxes over an enumeration → multiselect.
+    case "checkbox":
+      return "multiselect";
+    case "booleancheckbox":
+      return "toggle";
+    case "number":
+      return "number";
+    case "textarea":
+      return "textarea";
+    case "text":
+    case "phonenumber":
+      return "text";
+    default:
+      break;
+  }
+  switch (type) {
+    case "enumeration":
+      return "select";
+    case "number":
+      return "number";
+    case "bool":
+      return "toggle";
+    default:
+      return "text";
+  }
+};
+var isPropertyReadOnly = (property) => property.calculated === true || property.modificationMetadata && property.modificationMetadata.readOnlyValue === true;
+var resolveRequiredOverride = (requiredOverrides, name) => {
+  if (!requiredOverrides) return void 0;
+  if (Array.isArray(requiredOverrides)) {
+    return requiredOverrides.includes(name) ? true : void 0;
+  }
+  if (Object.prototype.hasOwnProperty.call(requiredOverrides, name)) {
+    return !!requiredOverrides[name];
+  }
+  return void 0;
+};
+var fieldsFromHubSpotProperties = (properties, options = {}) => {
+  if (!Array.isArray(properties)) return [];
+  const {
+    include,
+    exclude,
+    overrides,
+    requiredOverrides,
+    includeDescriptions = false
+  } = options;
+  const includeSet = Array.isArray(include) ? new Set(include) : null;
+  const excludeSet = Array.isArray(exclude) ? new Set(exclude) : null;
+  let selected = properties.filter((property) => {
+    if (!property || !property.name) return false;
+    if (includeSet && !includeSet.has(property.name)) return false;
+    if (excludeSet && excludeSet.has(property.name)) return false;
+    if (property.hidden === true && !includeSet) return false;
+    return true;
+  });
+  if (includeSet) {
+    const order = new Map(include.map((name, idx) => [name, idx]));
+    selected = [...selected].sort((a, b) => order.get(a.name) - order.get(b.name));
+  }
+  return selected.map((property) => {
+    const type = resolveFieldType(property);
+    const field = {
+      name: property.name,
+      type,
+      label: property.label || property.name
+    };
+    if (includeDescriptions && property.description) {
+      field.description = property.description;
+    }
+    if (type === "select" || type === "multiselect" || type === "radioGroup") {
+      field.options = mapPropertyOptions(property.options) || [];
+    }
+    if (type === "toggle") {
+      field.transformIn = coerceBool;
+      field.transformOut = (value) => !!value;
+    }
+    if (type === "number") {
+      field.transformIn = coerceNumber;
+    }
+    if (isPropertyReadOnly(property)) {
+      field.readOnly = true;
+    }
+    const required = resolveRequiredOverride(requiredOverrides, property.name);
+    if (required !== void 0) field.required = required;
+    const override = overrides && overrides[property.name];
+    return override ? { ...field, ...override } : field;
+  });
+};
 
 // src/kanban/Kanban.jsx
 import React10, { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } 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 React8, { useId as useId2 } from "react";
 import { Select as Select4 } from "@hubspot/ui-extensions";
@@ -4845,7 +5236,7 @@ var StyledText = ({
     const nativeVariant = NATIVE_TAG_VARIANT_ALIASES[background == null ? void 0 : background.variant] ?? (background == null ? void 0 : background.variant) ?? "default";
     return React9.createElement(Tag2, { variant: nativeVariant }, resolvedText);
   }
-  const { src, width: w, height: h6 } = makeStyledTextDataUri(resolvedText, {
+  const { src, width: w, height: h7 } = makeStyledTextDataUri(resolvedText, {
     variant,
     format,
     orientation,
@@ -4861,7 +5252,7 @@ var StyledText = ({
   return React9.createElement(Image2, {
     src,
     width: w,
-    height: h6,
+    height: h7,
     alt: alt ?? String(resolvedText)
   });
 };
@@ -4882,11 +5273,12 @@ import {
   Image as Image3,
   Inline as Inline2,
   Link as Link4,
-  LoadingSpinner,
+  LoadingSpinner as LoadingSpinner2,
   Select as Select5,
   Statistics,
   StatisticsItem,
   StatisticsTrend,
+  StatusTag,
   Tag as Tag3,
   Text as Text4,
   Tile as Tile3
@@ -4924,6 +5316,12 @@ var DEFAULT_LABELS3 = {
   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}`,
@@ -5092,7 +5490,7 @@ var StageControl = ({
   labels
 }) => {
   if (isChanging) {
-    return /* @__PURE__ */ React10.createElement(LoadingSpinner, { size: "xs" });
+    return /* @__PURE__ */ React10.createElement(LoadingSpinner2, { size: "xs" });
   }
   const availableStages = (stages || []).filter(
     (stage) => stage.value === currentStage.value || canStageReceiveRow(stage, row, canMove)
@@ -5150,10 +5548,14 @@ var KanbanColumn = ({
   onToggleCollapsed,
   columnFooter,
   countDisplay,
+  wip,
+  compactEmpty,
   labels,
   children
 }) => {
-  const countLabel = labels.cardCount(totalCount != null ? totalCount : bucketCount);
+  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__ */ React10.createElement(StatusTag, { variant: "warning" }, labels.overWip) : null;
   const countNode = countDisplay === "text" ? /* @__PURE__ */ React10.createElement(Text4, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React10.createElement(Tag3, { variant: "default" }, countLabel);
   if (collapsed) {
     const rotated = makeRotatedLabelDataUri(stage.label);
@@ -5186,8 +5588,11 @@ var KanbanColumn = ({
       }
     ) : null));
   }
+  if (compactEmpty && !loading && rows.length === 0 && bucketCount === 0) {
+    return /* @__PURE__ */ React10.createElement(Tile3, { compact: true }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy", format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn)));
+  }
   const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
-  return /* @__PURE__ */ React10.createElement(Tile3, { compact: true }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "column", gap: "xs" }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React10.createElement(Text4, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ React10.createElement(LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ React10.createElement(Button5, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React10.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React10.createElement(Divider2, null), children, error ? /* @__PURE__ */ React10.createElement(Alert2, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React10.createElement(Button5, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", justify: "center" }, /* @__PURE__ */ React10.createElement(Link4, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React10.createElement(LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", justify: "center" }, /* @__PURE__ */ React10.createElement(Link4, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+  return /* @__PURE__ */ React10.createElement(Tile3, { compact: true }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "column", gap: "xs" }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React10.createElement(Text4, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, overWipNode, loading ? /* @__PURE__ */ React10.createElement(LoadingSpinner2, { size: "xs" }) : null), /* @__PURE__ */ React10.createElement(Button5, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React10.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React10.createElement(Divider2, null), children, error ? /* @__PURE__ */ React10.createElement(Alert2, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React10.createElement(Button5, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", justify: "center" }, /* @__PURE__ */ React10.createElement(Link4, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React10.createElement(LoadingSpinner2, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", justify: "center" }, /* @__PURE__ */ React10.createElement(Link4, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React10.createElement(Text4, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
 };
 var renderMetricsPanel = (metrics) => {
   if (!metrics) return null;
@@ -5226,14 +5631,14 @@ var KanbanToolbar = ({
   sortOptions,
   sortValue,
   onSortChange,
-  metrics,
-  showMetrics,
+  showMetricsButton,
+  metricsPanel,
   onToggleMetrics,
   labels,
   toolbarLeftFlex,
   toolbarRightFlex
 }) => {
-  const rightControls = (sortOptions == null ? void 0 : sortOptions.length) > 0 || metrics ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React10.createElement(
+  const rightControls = (sortOptions == null ? void 0 : sortOptions.length) > 0 || showMetricsButton ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React10.createElement(
     CollectionSortSelect,
     {
       name: "kanban-sort",
@@ -5242,7 +5647,7 @@ var KanbanToolbar = ({
       options: sortOptions,
       onChange: onSortChange
     }
-  ) : null, metrics ? /* @__PURE__ */ React10.createElement(Button5, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React10.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
+  ) : null, showMetricsButton ? /* @__PURE__ */ React10.createElement(Button5, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React10.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
   return /* @__PURE__ */ React10.createElement(
     CollectionToolbar,
     {
@@ -5269,7 +5674,7 @@ var KanbanToolbar = ({
         onRemove: onFilterRemove
       },
       right: rightControls,
-      footer: showMetrics && metrics ? renderMetricsPanel(metrics) : null,
+      footer: metricsPanel,
       labels,
       leftFlex: toolbarLeftFlex,
       rightFlex: toolbarRightFlex
@@ -5321,6 +5726,18 @@ var Kanban = ({
   // --- Per-stage pagination ---
   stageMeta,
   onLoadMore,
+  // --- WIP limits ---
+  wipLimits,
+  onWipExceeded,
+  // --- Swimlanes ---
+  swimlaneBy,
+  swimlaneLabels,
+  swimlaneOrder,
+  collapseLanes = true,
+  collapsedLanes,
+  defaultCollapsedLanes,
+  onCollapsedLanesChange,
+  metricsPerLane = false,
   // --- Selection ---
   selectable = false,
   selectedIds,
@@ -5385,6 +5802,9 @@ var Kanban = ({
   const [internalFilters, setInternalFilters] = useState4(() => getEmptyFilterValues(filters));
   const [internalSort, setInternalSort] = useState4(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
   const [internalCollapsed, setInternalCollapsed] = useState4([]);
+  const [internalCollapsedLanes, setInternalCollapsedLanes] = useState4(
+    () => defaultCollapsedLanes || []
+  );
   const [internalExpanded, setInternalExpanded] = useState4([]);
   const [internalSelection, setInternalSelection] = useState4([]);
   const [internalShowMetrics, setInternalShowMetrics] = useState4(false);
@@ -5401,6 +5821,7 @@ var Kanban = ({
   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;
@@ -5417,9 +5838,10 @@ var Kanban = ({
       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
+      collapsedStages: overrides.collapsedStages != null ? overrides.collapsedStages : resolvedCollapsed,
+      collapsedLanes: overrides.collapsedLanes != null ? overrides.collapsedLanes : resolvedCollapsedLanes
     });
-  }, [onParamsChange, resolvedCollapsed, resolvedFilters, resolvedSearch, resolvedSort]);
+  }, [onParamsChange, resolvedCollapsed, resolvedCollapsedLanes, resolvedFilters, resolvedSearch, resolvedSort]);
   const lastAppliedSearchRef = useRef4(searchValue != null ? searchValue : "");
   useEffect4(() => {
     if (searchValue == null) return;
@@ -5478,6 +5900,15 @@ var Kanban = ({
     },
     [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
   );
+  const handleLaneCollapsed = useCallback4(
+    (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 = useCallback4(
     (stageValue) => {
       const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
@@ -5546,33 +5977,45 @@ var Kanban = ({
     }
     return result;
   }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
-  const buckets = useMemo3(() => {
-    const map = {};
-    for (const stage of stages) map[stage.value] = [];
-    for (const row of filteredData) {
-      const key = getStageFor(row);
-      if (map[key]) {
-        map[key].push(row);
-      } else if (stages.length > 0) {
-        if (!map.__unknown) map.__unknown = [];
-        map.__unknown.push(row);
-      }
-    }
-    return map;
-  }, [filteredData, stages, getStageFor]);
+  const buckets = useMemo3(
+    () => bucketRowsByStage(filteredData, stages, getStageFor),
+    [filteredData, stages, getStageFor]
+  );
   const sortComparator = useMemo3(() => {
     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 = useMemo3(() => {
-    if (!sortComparator) return buckets;
+  const sortedBuckets = useMemo3(() => sortBuckets(buckets, sortComparator), [buckets, sortComparator]);
+  const hasLanes = swimlaneBy != null;
+  const laneData = useMemo3(() => {
+    if (!hasLanes) return null;
+    return partitionLanes(filteredData, { swimlaneBy, swimlaneOrder });
+  }, [hasLanes, filteredData, swimlaneBy, swimlaneOrder]);
+  const laneBuckets = useMemo3(() => {
+    if (!laneData) return null;
     const out = {};
-    for (const key of Object.keys(buckets)) {
-      out[key] = [...buckets[key]].sort(sortComparator);
+    for (const laneKey of laneData.laneKeys) {
+      out[laneKey] = sortBuckets(
+        bucketRowsByStage(laneData.rowsByLane[laneKey] || [], stages, getStageFor),
+        sortComparator
+      );
     }
     return out;
-  }, [buckets, sortComparator]);
+  }, [laneData, stages, getStageFor, sortComparator]);
+  const wipByStage = useMemo3(
+    () => evaluateWip(stages, computeStageCounts(stages, buckets, stageMeta), wipLimits),
+    [stages, buckets, stageMeta, wipLimits]
+  );
+  const prevWipRef = useRef4({});
+  useEffect4(() => {
+    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 = useMemo3(
     () => buildActiveFilterChips(filters, resolvedFilters),
     [filters, resolvedFilters]
@@ -5699,6 +6142,52 @@ var Kanban = ({
     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__ */ React10.createElement(Flex6, { 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__ */ React10.createElement(
+        AutoGrid2,
+        {
+          key: inLane ? `${laneKey}::${stage.value}` : stage.value,
+          columnWidth: isCollapsed ? 72 : effectiveColumnWidth
+        },
+        /* @__PURE__ */ React10.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,
@@ -5710,35 +6199,32 @@ var Kanban = ({
   ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
     title: labels.emptyTitle,
     message: labels.emptyMessage
-  }) : /* @__PURE__ */ React10.createElement(Tile3, null, /* @__PURE__ */ React10.createElement(Flex6, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React10.createElement(EmptyState2, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React10.createElement(Text4, null, labels.emptyMessage)))) : /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
-    const stageRows = sortedBuckets[stage.value] || [];
-    const meta = stageMeta == null ? void 0 : stageMeta[stage.value];
-    const isExpanded = resolvedExpanded.includes(stage.value);
-    const clamp = isExpanded ? maxCardsExpanded : maxCardsPerColumn;
-    const visibleRows = stageRows.slice(0, clamp);
-    const isCollapsed = resolvedCollapsed.includes(stage.value);
-    return /* @__PURE__ */ React10.createElement(AutoGrid2, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ React10.createElement(
-      KanbanColumn,
+  }) : /* @__PURE__ */ React10.createElement(Tile3, null, /* @__PURE__ */ React10.createElement(Flex6, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React10.createElement(EmptyState2, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React10.createElement(Text4, null, labels.emptyMessage)))) : hasLanes ? /* @__PURE__ */ React10.createElement(Flex6, { 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__ */ React10.createElement(Text4, { format: { fontWeight: "demibold" } }, laneCountLabel) : /* @__PURE__ */ React10.createElement(Tag3, { variant: "default" }, laneCountLabel);
+    const laneMetricsNode = !isLaneCollapsed && perLaneMetricsActive && resolvedShowMetrics ? renderMetricsPanel(metrics(laneRows, laneKey)) : null;
+    return /* @__PURE__ */ React10.createElement(Flex6, { key: laneKey, direction: "column", gap: "xs" }, laneIndex > 0 ? /* @__PURE__ */ React10.createElement(Divider2, null) : null, /* @__PURE__ */ React10.createElement(Flex6, { direction: "row", align: "center", gap: "xs" }, collapseLanes ? /* @__PURE__ */ React10.createElement(
+      Button5,
       {
-        stage,
-        rows: visibleRows,
-        bucketCount: stageRows.length,
-        totalCount: meta == null ? void 0 : meta.totalCount,
-        hasMore: meta == null ? void 0 : meta.hasMore,
-        loading: meta == null ? void 0 : meta.loading,
-        error: meta == null ? void 0 : meta.error,
-        onLoadMore,
-        expanded: isExpanded,
-        onToggleExpanded: () => handleExpanded(stage.value),
-        collapsed: isCollapsed,
-        onToggleCollapsed: () => handleCollapsed(stage.value),
-        columnFooter,
-        countDisplay,
-        labels
+        variant: "transparent",
+        size: "sm",
+        onClick: () => handleLaneCollapsed(laneKey),
+        tooltip: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
       },
-      visibleRows.map((row) => renderCardNode(row, stage))
-    ));
-  }));
+      /* @__PURE__ */ React10.createElement(
+        Icon,
+        {
+          name: isLaneCollapsed ? "right" : "down",
+          size: "sm",
+          screenReaderText: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
+        }
+      )
+    ) : null, /* @__PURE__ */ React10.createElement(Text4, { 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__ */ React10.createElement(Flex6, { direction: "column", gap: "sm" }, /* @__PURE__ */ React10.createElement(
     KanbanToolbar,
@@ -5758,8 +6244,8 @@ var Kanban = ({
       sortOptions,
       sortValue: resolvedSort,
       onSortChange: handleSort,
-      metrics,
-      showMetrics: resolvedShowMetrics,
+      showMetricsButton: metricsProvided,
+      metricsPanel: resolvedShowMetrics && globalMetricsContent ? renderMetricsPanel(globalMetricsContent) : null,
       onToggleMetrics: toggleMetrics,
       labels,
       toolbarLeftFlex,
@@ -5767,6 +6253,7 @@ var Kanban = ({
     }
   ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ React10.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
 };
+Kanban.displayName = "Kanban";
 
 // src/kanban/KanbanCardActions.jsx
 import React11 from "react";
@@ -5847,7 +6334,7 @@ import {
   Inline as Inline3,
   Link as Link5,
   List,
-  StatusTag,
+  StatusTag as StatusTag2,
   Tab,
   Tabs,
   Tag as Tag4,
@@ -5992,6 +6479,110 @@ var AvatarStack = ({
   });
 };
 
+// src/feed/feedLiveBuffer.js
+var isDateValueObject2 = (v) => v != null && typeof v === "object" && typeof v.year === "number" && typeof v.month === "number" && typeof v.date === "number";
+var toTimestampMs = (value) => {
+  if (value == null || value === "") return null;
+  if (value instanceof Date) {
+    const time2 = value.getTime();
+    return Number.isNaN(time2) ? null : time2;
+  }
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (isDateValueObject2(value)) {
+    return new Date(value.year, value.month, value.date, value.hour || 0, value.minute || 0).getTime();
+  }
+  const parsed = new Date(value);
+  const time = parsed.getTime();
+  return Number.isNaN(time) ? null : time;
+};
+var defaultGetId = (item, index) => (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item.key) ?? index;
+var partitionNewItems = (prevNewestTs, items, getTs, options = {}) => {
+  const { knownIds = null, getId = defaultGetId } = options;
+  const safeItems = Array.isArray(items) ? items : [];
+  const firstLoad = prevNewestTs == null;
+  const visible = [];
+  const visibleIds = [];
+  const buffered = [];
+  const bufferedIds = [];
+  let newestTs = typeof prevNewestTs === "number" ? prevNewestTs : null;
+  safeItems.forEach((item, index) => {
+    const id = getId(item, index);
+    const ts = toTimestampMs(typeof getTs === "function" ? getTs(item) : void 0);
+    const isKnown = knownIds != null && id !== void 0 && knownIds.has(id);
+    const isNewArrival = !firstLoad && !isKnown && ts != null && ts > prevNewestTs;
+    if (isNewArrival) {
+      buffered.push(item);
+      bufferedIds.push(id);
+      return;
+    }
+    visible.push(item);
+    visibleIds.push(id);
+    if (ts != null && (newestTs == null || ts > newestTs)) newestTs = ts;
+  });
+  return { visible, buffered, visibleIds, bufferedIds, newestTs };
+};
+var flushBuffer = (visible, buffered, getTs) => {
+  const safeVisible = Array.isArray(visible) ? visible : [];
+  const safeBuffered = Array.isArray(buffered) ? buffered : [];
+  const items = [...safeBuffered, ...safeVisible];
+  let newestTs = null;
+  items.forEach((item) => {
+    const ts = toTimestampMs(typeof getTs === "function" ? getTs(item) : void 0);
+    if (ts != null && (newestTs == null || ts > newestTs)) newestTs = ts;
+  });
+  return { items, flushed: safeBuffered, newestTs };
+};
+
+// src/feed/feedTypePresets.js
+var hasValue = (value) => value != null && value !== false && value !== "";
+var DEFAULT_FEED_TYPE_PRESETS = {
+  call: { icon: "calling", label: "Call" },
+  email: { icon: "email", label: "Email" },
+  incoming_email: { icon: "inbox", label: "Incoming email" },
+  forwarded_email: { icon: "forward", label: "Forwarded email" },
+  meeting: { icon: "appointment", label: "Meeting" },
+  note: { icon: "comment", label: "Note" },
+  task: { icon: "tasks", label: "Task" },
+  sms: { icon: "messages", label: "SMS" },
+  whatsapp: { icon: "messages", label: "WhatsApp" },
+  linkedin_message: { icon: "linkedin", label: "LinkedIn message" },
+  postal_mail: { icon: "send", label: "Postal mail" },
+  conversation: { icon: "questionAnswer", label: "Conversation" }
+};
+var lookupTypePreset = (type, presets) => {
+  if (!presets || typeof presets !== "object") return null;
+  if (type == null || type === "") return null;
+  if (Object.prototype.hasOwnProperty.call(presets, type)) return presets[type];
+  const lower = String(type).toLowerCase();
+  if (Object.prototype.hasOwnProperty.call(presets, lower)) return presets[lower];
+  const snake = lower.replace(/[\s-]+/g, "_");
+  if (Object.prototype.hasOwnProperty.call(presets, snake)) return presets[snake];
+  return null;
+};
+var applyTypePreset = (item, typePresets) => {
+  if (item == null || typeof item !== "object") return item;
+  const preset = lookupTypePreset(item.type, typePresets);
+  if (!preset || typeof preset !== "object") return item;
+  let next = null;
+  const fill = (key, value) => {
+    if (next === null) next = { ...item };
+    next[key] = value;
+  };
+  if (!hasValue(item.icon) && !hasValue(item.iconName) && hasValue(preset.icon)) {
+    fill("iconName", preset.icon);
+  }
+  if (!hasValue(item.iconColor) && hasValue(preset.color)) {
+    fill("iconColor", preset.color);
+  }
+  if (!hasValue(item.typeLabel) && hasValue(preset.label)) {
+    fill("typeLabel", preset.label);
+  }
+  if (item.statusVariant == null && item.outcomeVariant == null && item.severityVariant == null && hasValue(preset.statusVariant)) {
+    fill("statusVariant", preset.statusVariant);
+  }
+  return next ?? item;
+};
+
 // src/feed/Feed.jsx
 var DEFAULT_LABELS4 = {
   search: "Search activity...",
@@ -6005,6 +6596,8 @@ var DEFAULT_LABELS4 = {
   loadingMessage: "This should only take a moment.",
   loadingMore: "Loading...",
   loadMore: "View more",
+  newItems: (count) => count === 1 ? "Show 1 new item" : `Show ${count} new items`,
+  newItemTag: "New",
   collapseAll: "Collapse all",
   expandAll: "Expand all",
   emptyTitle: "No activity yet",
@@ -6017,7 +6610,15 @@ var DEFAULT_LABELS4 = {
 var DEFAULT_RECORD_LABEL = { singular: "item", plural: "items" };
 var DEFAULT_SEARCH_FIELDS = ["title", "subject", "body", "description", "content", "preview", "type", "typeLabel", "actorName", "author"];
 var DEFAULT_PAGE_SIZE = 5;
-var hasValue = (value) => value != null && value !== false && value !== "";
+var EMPTY_ITEMS = [];
+var INITIAL_LIVE_STATE = {
+  source: null,
+  watermark: null,
+  bufferedKeys: EMPTY_ITEMS,
+  knownKeys: EMPTY_ITEMS,
+  newKeys: EMPTY_ITEMS
+};
+var hasValue2 = (value) => value != null && value !== false && value !== "";
 var keepWordsTogether = (value) => typeof value === "string" ? value.replace(/\s+/g, "\xA0") : value;
 var getItemKey = (item, index, getKey) => {
   if (typeof getKey === "function") return getKey(item, index);
@@ -6044,11 +6645,11 @@ var pickHeaderActions = (item) => item == null ? void 0 : item.headerActions;
 var itemHasExpandableContent = (item, fields) => {
   if ((item == null ? void 0 : item.collapsible) === false) return false;
   if ((item == null ? void 0 : item.collapsible) === true) return true;
-  if (hasValue(pickBody(item))) return true;
-  if (hasValue(pickActor(item))) return true;
-  if (hasValue(item == null ? void 0 : item.actions)) return true;
-  if (hasValue(item == null ? void 0 : item.footer)) return true;
-  if (hasValue(item == null ? void 0 : item.meta) || hasValue(item == null ? void 0 : item.metadata)) return true;
+  if (hasValue2(pickBody(item))) return true;
+  if (hasValue2(pickActor(item))) return true;
+  if (hasValue2(item == null ? void 0 : item.actions)) return true;
+  if (hasValue2(item == null ? void 0 : item.footer)) return true;
+  if (hasValue2(item == null ? void 0 : item.meta) || hasValue2(item == null ? void 0 : item.metadata)) return true;
   if (Array.isArray(fields)) {
     if (fields.some((f) => ["body", "footer"].includes(f.placement ?? "body"))) return true;
   }
@@ -6130,7 +6731,7 @@ var getRecordLabel = (recordLabel, count) => {
 var FeedActorAvatar = ({ item, avatarSize }) => {
   const actor = pickActor(item);
   const avatar = (item == null ? void 0 : item.avatar) ?? pickActorAvatar(actor);
-  if (!hasValue(avatar)) return null;
+  if (!hasValue2(avatar)) return null;
   return /* @__PURE__ */ React13.createElement(
     AvatarStack,
     {
@@ -6142,10 +6743,10 @@ var FeedActorAvatar = ({ item, avatarSize }) => {
   );
 };
 var FeedTypeIcon = ({ item, iconSize }) => {
-  if (hasValue(item == null ? void 0 : item.icon) && typeof item.icon !== "string") return item.icon;
+  if (hasValue2(item == null ? void 0 : item.icon) && typeof item.icon !== "string") return item.icon;
   const iconName = typeof (item == null ? void 0 : item.icon) === "string" ? item.icon : item == null ? void 0 : item.iconName;
-  if (!hasValue(iconName)) return null;
-  return /* @__PURE__ */ React13.createElement(Icon, { name: iconName, size: iconSize, purpose: "decorative" });
+  if (!hasValue2(iconName)) return null;
+  return /* @__PURE__ */ React13.createElement(Icon, { name: iconName, size: iconSize, color: item == null ? void 0 : item.iconColor, purpose: "decorative" });
 };
 var FeedActions = ({ actions }) => {
   if (!Array.isArray(actions) || actions.length === 0) return actions || null;
@@ -6168,14 +6769,14 @@ var FeedField = ({ field, item, index }) => {
   if (field.visible && !field.visible(item)) return null;
   const value = getValue(item, field.field);
   const rendered = field.render ? field.render(value, item, index) : value;
-  if (!hasValue(rendered)) return null;
+  if (!hasValue2(rendered)) return null;
   if (field.href) {
     const href = typeof field.href === "function" ? field.href(item) : field.href;
     return /* @__PURE__ */ React13.createElement(Link5, { href }, rendered);
   }
   if (field.type === "status") {
     const variant = typeof field.variant === "function" ? field.variant(value, item) : field.variant;
-    return /* @__PURE__ */ React13.createElement(StatusTag, { variant: variant ?? "default" }, rendered);
+    return /* @__PURE__ */ React13.createElement(StatusTag2, { variant: variant ?? "default" }, rendered);
   }
   if (field.type === "tag") {
     const variant = typeof field.variant === "function" ? field.variant(value, item) : field.variant;
@@ -6205,7 +6806,7 @@ var renderPlacedFields = ({ fields, placement, item, index, inline = false }) =>
   return /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: "xs" }, nodes);
 };
 var renderHeaderActions = (headerActions) => {
-  if (!hasValue(headerActions)) return null;
+  if (!hasValue2(headerActions)) return null;
   if (!Array.isArray(headerActions)) return headerActions;
   return /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, headerActions.filter(Boolean).map((action, index) => /* @__PURE__ */ React13.createElement(
     Link5,
@@ -6227,6 +6828,8 @@ var DefaultFeedItem = ({
   collapsible,
   expanded,
   onToggleExpanded,
+  isNew,
+  newItemTagLabel,
   renderActor,
   renderTimestamp,
   renderMeta,
@@ -6246,7 +6849,7 @@ var DefaultFeedItem = ({
   const body = pickBody(item);
   const avatar = /* @__PURE__ */ React13.createElement(FeedActorAvatar, { item, avatarSize });
   const typeIcon = /* @__PURE__ */ React13.createElement(FeedTypeIcon, { item, iconSize });
-  const hasAvatarNode = hasValue(item == null ? void 0 : item.avatar) || hasValue(pickActorAvatar(rawActor));
+  const hasAvatarNode = hasValue2(item == null ? void 0 : item.avatar) || hasValue2(pickActorAvatar(rawActor));
   const titleFields = fieldsForPlacement(fields, "title");
   const titleField = titleFields.length > 0 ? /* @__PURE__ */ React13.createElement(FeedField, { field: titleFields[0], item, index }) : null;
   const subtitleFields = renderPlacedFields({ fields, placement: "subtitle", item, index, inline: true });
@@ -6254,8 +6857,8 @@ var DefaultFeedItem = ({
   const bodyFields = renderPlacedFields({ fields, placement: "body", item, index });
   const footerFields = renderPlacedFields({ fields, placement: "footer", item, index, inline: true });
   const titleContent = titleField ?? (item == null ? void 0 : item.title) ?? (item == null ? void 0 : item.subject);
-  const title = hasValue(item == null ? void 0 : item.href) ? /* @__PURE__ */ React13.createElement(Link5, { href: item.href }, titleContent) : titleContent;
-  const titleText = hasValue(title) ? /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" }, truncate: true }, title) : null;
+  const title = hasValue2(item == null ? void 0 : item.href) ? /* @__PURE__ */ React13.createElement(Link5, { href: item.href }, titleContent) : titleContent;
+  const titleText = hasValue2(title) ? /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" }, truncate: true }, title) : null;
   const headerLeft = /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, collapsible ? /* @__PURE__ */ React13.createElement(Box5, { flex: "none", alignSelf: "center" }, /* @__PURE__ */ React13.createElement(Link5, { variant: "dark", onClick: onToggleExpanded }, /* @__PURE__ */ React13.createElement(
     Icon,
     {
@@ -6263,10 +6866,10 @@ var DefaultFeedItem = ({
       size: "md",
       screenReaderText: expanded ? "Collapse" : "Expand"
     }
-  ))) : null, typeIcon, titleText);
-  const headerRight = hasValue(headerActions) || hasValue(timestamp) || hasValue(type) ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, renderHeaderActions(headerActions), hasValue(type) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, type), hasValue(timestamp) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, formatTimestamp(timestamp))) : null;
+  ))) : null, typeIcon, titleText, isNew ? /* @__PURE__ */ React13.createElement(Box5, { flex: "none" }, /* @__PURE__ */ React13.createElement(Tag4, { variant: "info" }, newItemTagLabel ?? "New")) : null);
+  const headerRight = hasValue2(headerActions) || hasValue2(timestamp) || hasValue2(type) ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, renderHeaderActions(headerActions), hasValue2(type) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, type), hasValue2(timestamp) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, formatTimestamp(timestamp))) : null;
   const showBody = !collapsible || expanded;
-  return /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: compact ? "xs" : "sm" }, /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", justify: "between", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React13.createElement(Box5, { flex: 1 }, headerLeft), headerRight), showBody ? /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: compact ? "xs" : "sm" }, (hasAvatarNode || hasValue(actor) || hasValue(subtitleFields) || hasValue(status)) && /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", align: "center", gap: "xs", wrap: "wrap" }, hasAvatarNode ? avatar : null, hasValue(actor) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, actor), subtitleFields, hasValue(status) && /* @__PURE__ */ React13.createElement(StatusTag, { variant: statusVariant, hollow: true }, status)), hasValue(body) && /* @__PURE__ */ React13.createElement(Text6, null, body), bodyFields, Array.isArray(meta) ? meta.length > 0 ? /* @__PURE__ */ React13.createElement(List, { variant: "inline-divided" }, meta) : metaFields : hasValue(meta) ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "xs" }, meta) : metaFields ? metaFields : null, hasValue(actions) && /* @__PURE__ */ React13.createElement(FeedActions, { actions }), (hasValue(footer) || hasValue(footerFields)) && /* @__PURE__ */ React13.createElement(Inline3, { gap: "xs", align: "center" }, footerFields, footer)) : null);
+  return /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: compact ? "xs" : "sm" }, /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", justify: "between", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React13.createElement(Box5, { flex: 1 }, headerLeft), headerRight), showBody ? /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: compact ? "xs" : "sm" }, (hasAvatarNode || hasValue2(actor) || hasValue2(subtitleFields) || hasValue2(status)) && /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", align: "center", gap: "xs", wrap: "wrap" }, hasAvatarNode ? avatar : null, hasValue2(actor) && /* @__PURE__ */ React13.createElement(Text6, { variant: "microcopy" }, actor), subtitleFields, hasValue2(status) && /* @__PURE__ */ React13.createElement(StatusTag2, { variant: statusVariant, hollow: true }, status)), hasValue2(body) && /* @__PURE__ */ React13.createElement(Text6, null, body), bodyFields, Array.isArray(meta) ? meta.length > 0 ? /* @__PURE__ */ React13.createElement(List, { variant: "inline-divided" }, meta) : metaFields : hasValue2(meta) ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "xs" }, meta) : metaFields ? metaFields : null, hasValue2(actions) && /* @__PURE__ */ React13.createElement(FeedActions, { actions }), (hasValue2(footer) || hasValue2(footerFields)) && /* @__PURE__ */ React13.createElement(Inline3, { gap: "xs", align: "center" }, footerFields, footer)) : null);
 };
 var applyTab = (items, activeTab, tabField) => {
   if (!activeTab || activeTab === "all") return items;
@@ -6490,10 +7093,19 @@ var Feed = ({
   collapsedIds,
   onCollapsedIdsChange,
   showCollapseToggle = true,
-  alignToolbarWithGroups = "auto"
+  alignToolbarWithGroups = "auto",
+  newItemsBehavior = "immediate",
+  onNewItemsFlush,
+  highlightNew = false,
+  typePresets
 }) => {
-  const labels = { ...DEFAULT_LABELS4, ...labelOverrides || {} };
-  const safeItems = Array.isArray(items) ? items : [];
+  const labels = useMemo4(() => ({ ...DEFAULT_LABELS4, ...labelOverrides || {} }), [labelOverrides]);
+  const safeItems = Array.isArray(items) ? items : EMPTY_ITEMS;
+  const resolvedTypePresets = typePresets === true ? DEFAULT_FEED_TYPE_PRESETS : typePresets;
+  const presetItems = useMemo4(
+    () => resolvedTypePresets ? safeItems.map((item) => applyTypePreset(item, resolvedTypePresets)) : safeItems,
+    [safeItems, resolvedTypePresets]
+  );
   const [internalTab, setInternalTab] = useState5(tabValue ?? defaultTab ?? "all");
   const [internalSearch, setInternalSearch] = useState5(searchValue ?? "");
   const [internalFilters, setInternalFilters] = useState5(filterValues ?? defaultFilterValues);
@@ -6506,6 +7118,47 @@ var Feed = ({
     return [];
   };
   const [internalCollapsedIds, setInternalCollapsedIds] = useState5(computeInitialCollapsed);
+  const bufferNewItems = newItemsBehavior === "pill";
+  const highlightMs = typeof highlightNew === "number" && highlightNew > 0 ? highlightNew : 0;
+  const trackNewItems = bufferNewItems || highlightMs > 0;
+  const [liveState, setLiveState] = useState5(INITIAL_LIVE_STATE);
+  const liveKeyOf = (item, index) => getItemKey(item, index, getKey);
+  if (trackNewItems && liveState.source !== presetItems) {
+    const firstLoad = liveState.source === null;
+    const partition = partitionNewItems(liveState.watermark, presetItems, pickTimestamp, {
+      knownIds: new Set(liveState.knownKeys),
+      getId: liveKeyOf
+    });
+    const now = Date.now();
+    const keptNewKeys = highlightMs > 0 ? liveState.newKeys.filter((entry) => now - entry.at < highlightMs) : EMPTY_ITEMS;
+    if (bufferNewItems) {
+      setLiveState({
+        source: presetItems,
+        watermark: partition.newestTs,
+        bufferedKeys: partition.bufferedIds,
+        knownKeys: partition.visibleIds,
+        newKeys: keptNewKeys
+      });
+    } else {
+      const { newestTs } = flushBuffer(partition.visible, partition.buffered, pickTimestamp);
+      setLiveState({
+        source: presetItems,
+        watermark: newestTs ?? partition.newestTs,
+        bufferedKeys: EMPTY_ITEMS,
+        knownKeys: [...partition.visibleIds, ...partition.bufferedIds],
+        newKeys: highlightMs > 0 && !firstLoad ? [...keptNewKeys, ...partition.bufferedIds.map((key) => ({ key, at: now }))] : keptNewKeys
+      });
+    }
+  }
+  const bufferedKeySet = useMemo4(() => new Set(liveState.bufferedKeys), [liveState.bufferedKeys]);
+  const newKeySet = useMemo4(
+    () => new Set(liveState.newKeys.map((entry) => entry.key)),
+    [liveState.newKeys]
+  );
+  const sourceItems = useMemo4(() => {
+    if (!bufferNewItems || bufferedKeySet.size === 0) return presetItems;
+    return presetItems.filter((item, index) => !bufferedKeySet.has(getItemKey(item, index, getKey)));
+  }, [presetItems, bufferNewItems, bufferedKeySet, getKey]);
   const activeTab = tabValue !== void 0 ? tabValue : internalTab;
   const activeSearch = searchValue !== void 0 ? searchValue : internalSearch;
   const activeFilters = filterValues !== void 0 ? filterValues : internalFilters;
@@ -6528,6 +7181,17 @@ var Feed = ({
   useEffect5(() => {
     if (Array.isArray(collapsedIds)) setInternalCollapsedIds(collapsedIds);
   }, [collapsedIds]);
+  useEffect5(() => {
+    if (!highlightMs || liveState.newKeys.length === 0) return void 0;
+    const earliestAt = Math.min(...liveState.newKeys.map((entry) => entry.at));
+    const timer = setTimeout(() => {
+      setLiveState((prev) => ({
+        ...prev,
+        newKeys: prev.newKeys.filter((entry) => Date.now() - entry.at < highlightMs)
+      }));
+    }, Math.max(16, earliestAt + highlightMs - Date.now()));
+    return () => clearTimeout(timer);
+  }, [highlightMs, liveState.newKeys]);
   const emitParamsChange = (next) => {
     if (typeof onParamsChange === "function") {
       onParamsChange({ tab: activeTab, search: activeSearch, filters: activeFilters, sort: activeSort, ...next });
@@ -6581,13 +7245,40 @@ var Feed = ({
     setCollapsedIds(collapsibleKeys);
   };
   const handleExpandAll = () => setCollapsedIds([]);
+  const handleFlushNewItems = () => {
+    const flushedItems = [];
+    const flushedKeys = [];
+    const keptItems = [];
+    presetItems.forEach((item, index) => {
+      const key = getItemKey(item, index, getKey);
+      if (bufferedKeySet.has(key)) {
+        flushedItems.push(item);
+        flushedKeys.push(key);
+      } else {
+        keptItems.push(item);
+      }
+    });
+    const { newestTs } = flushBuffer(keptItems, flushedItems, pickTimestamp);
+    const now = Date.now();
+    setLiveState((prev) => ({
+      source: presetItems,
+      watermark: newestTs ?? prev.watermark,
+      bufferedKeys: EMPTY_ITEMS,
+      knownKeys: presetItems.map((item, index) => getItemKey(item, index, getKey)),
+      newKeys: highlightMs > 0 ? [
+        ...prev.newKeys.filter((entry) => now - entry.at < highlightMs),
+        ...flushedKeys.map((key) => ({ key, at: now }))
+      ] : prev.newKeys
+    }));
+    onNewItemsFlush == null ? void 0 : onNewItemsFlush(flushedItems);
+  };
   const processedItems = useMemo4(() => {
-    if (serverSide) return safeItems;
-    const tabbed = applyTab(safeItems, activeTab, tabField);
+    if (serverSide) return sourceItems;
+    const tabbed = applyTab(sourceItems, activeTab, tabField);
     const searched = applySearch(tabbed, activeSearch, searchFields);
     const filtered = applyFilters(searched, filters, activeFilters);
     return applySort(filtered, activeSort, sortOptions);
-  }, [safeItems, activeTab, tabField, activeSearch, searchFields, filters, activeFilters, activeSort, sortOptions, serverSide]);
+  }, [sourceItems, activeTab, tabField, activeSearch, searchFields, filters, activeFilters, activeSort, sortOptions, serverSide]);
   const visibleItems = useMemo4(
     () => processedItems.slice(0, Math.max(0, resolvedMaxItems)),
     [processedItems, resolvedMaxItems]
@@ -6614,8 +7305,8 @@ var Feed = ({
   const canViewMore = visibleItems.length < processedItems.length;
   const shouldShowExternalLoadMore = hasMore && onLoadMore;
   const normalizedTabs = useMemo4(
-    () => normalizeTabs(tabs, safeItems, tabField, labels),
-    [tabs, safeItems, tabField, labels]
+    () => normalizeTabs(tabs, presetItems, tabField, labels),
+    [tabs, presetItems, tabField, labels]
   );
   const resolvedShowTabs = showTabs ?? normalizedTabs.length > 1;
   const sortControl = Array.isArray(sortOptions) && sortOptions.length > 0 ? /* @__PURE__ */ React13.createElement(
@@ -6630,7 +7321,7 @@ var Feed = ({
   ) : null;
   const countControl = showItemCount ? /* @__PURE__ */ React13.createElement(CollectionCount, { text: itemCountLabel }) : null;
   const toolbarRight = sortControl || countControl ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, sortControl, countControl) : null;
-  const firstGroupHasLabel = groups.length > 0 && hasValue(groups[0].label);
+  const firstGroupHasLabel = groups.length > 0 && hasValue2(groups[0].label);
   const hasLeftToolbarControls = resolvedShowSearch || Array.isArray(filters) && filters.length > 0 || activeChips.length > 0;
   const alignControlsWithFirstGroup = !renderToolbar && showToolbar && !loading && !error && processedItems.length > 0 && !hasLeftToolbarControls && !!toolbarRight && firstGroupHasLabel && (alignToolbarWithGroups === true || alignToolbarWithGroups === "auto" && (groupByDate || !!groupBy));
   const toolbarNode = renderToolbar ? renderToolbar({
@@ -6680,15 +7371,21 @@ var Feed = ({
     return activeCollapsedIds.includes(getItemKey(item, i >= 0 ? i : idx, getKey));
   });
   const collapseToggle = showCollapseToggle && collapsibleVisibleItems.length > 1 && !loading && !error ? /* @__PURE__ */ React13.createElement(Link5, { onClick: allCollapsed ? handleExpandAll : handleCollapseAll }, keepWordsTogether(allCollapsed ? labels.expandAll : labels.collapseAll)) : null;
-  if (hasValue(title) || hasValue(description) || hasValue(actions) || hasValue(children) || collapseToggle) {
-    const headerBody = /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: "xs" }, hasValue(title) && /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, title), hasValue(description) && /* @__PURE__ */ React13.createElement(Text6, null, description), children);
-    const headerRight = hasValue(actions) || collapseToggle ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, actions, collapseToggle) : null;
+  if (hasValue2(title) || hasValue2(description) || hasValue2(actions) || hasValue2(children) || collapseToggle) {
+    const headerBody = /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", gap: "xs" }, hasValue2(title) && /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, title), hasValue2(description) && /* @__PURE__ */ React13.createElement(Text6, null, description), children);
+    const headerRight = hasValue2(actions) || collapseToggle ? /* @__PURE__ */ React13.createElement(Inline3, { gap: "sm", align: "center" }, actions, collapseToggle) : null;
     content.push(
       /* @__PURE__ */ React13.createElement(Flex8, { key: "header", direction: "row", justify: "between", align: "start", gap: "sm" }, headerBody, headerRight)
     );
   }
   const bodyContent = [];
   if (toolbarNode) bodyContent.push(/* @__PURE__ */ React13.createElement(React13.Fragment, { key: "toolbar" }, toolbarNode));
+  const pendingNewCount = bufferNewItems ? liveState.bufferedKeys.length : 0;
+  if (pendingNewCount > 0 && !loading && !error) {
+    bodyContent.push(
+      /* @__PURE__ */ React13.createElement(Flex8, { key: "new-items-pill", direction: "row", justify: "center" }, /* @__PURE__ */ React13.createElement(Button7, { variant: "secondary", size: "small", onClick: handleFlushNewItems }, typeof labels.newItems === "function" ? labels.newItems(pendingNewCount) : labels.newItems))
+    );
+  }
   if (loading) {
     bodyContent.push(
       renderLoadingState ? renderLoadingState({ label: labels.loading }) : (
@@ -6705,14 +7402,14 @@ var Feed = ({
         message: labels.errorMessage
       }) : /* @__PURE__ */ React13.createElement(Alert3, { key: "error", variant: "danger", title: typeof error === "string" ? error : labels.errorTitle }, /* @__PURE__ */ React13.createElement(Text6, null, labels.errorMessage))
     );
-  } else if (processedItems.length === 0) {
+  } else if (processedItems.length === 0 && pendingNewCount === 0) {
     bodyContent.push(
       renderEmptyState ? renderEmptyState({ title: labels.emptyTitle, message: labels.emptyMessage }) : /* @__PURE__ */ React13.createElement(Tile4, { key: "empty" }, /* @__PURE__ */ React13.createElement(Flex8, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React13.createElement(EmptyState3, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React13.createElement(Text6, null, labels.emptyMessage))))
     );
   } else {
     bodyContent.push(
-      /* @__PURE__ */ React13.createElement(Flex8, { key: "items", direction: "column", gap: compact ? "xs" : gap }, groups.map((group, groupIndex) => /* @__PURE__ */ React13.createElement(Flex8, { key: group.key, direction: "column", gap: compact ? "xs" : gap }, hasValue(group.label) && (alignControlsWithFirstGroup && groupIndex === 0 ? /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, group.label), toolbarRight) : /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, group.label)), group.items.map((item, index) => {
-        const globalIndex = safeItems.indexOf(item);
+      /* @__PURE__ */ React13.createElement(Flex8, { key: "items", direction: "column", gap: compact ? "xs" : gap }, groups.map((group, groupIndex) => /* @__PURE__ */ React13.createElement(Flex8, { key: group.key, direction: "column", gap: compact ? "xs" : gap }, hasValue2(group.label) && (alignControlsWithFirstGroup && groupIndex === 0 ? /* @__PURE__ */ React13.createElement(Flex8, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, group.label), toolbarRight) : /* @__PURE__ */ React13.createElement(Text6, { format: { fontWeight: "demibold" } }, group.label)), group.items.map((item, index) => {
+        const globalIndex = presetItems.indexOf(item);
         const itemIndex = globalIndex >= 0 ? globalIndex : index;
         const key = getItemKey(item, itemIndex, getKey);
         const node = renderItem ? renderItem(item, itemIndex) : /* @__PURE__ */ React13.createElement(
@@ -6727,6 +7424,8 @@ var Feed = ({
             collapsible: collapsible !== false && itemHasExpandableContent(item, fields),
             expanded: !activeCollapsedIds.includes(key),
             onToggleExpanded: () => toggleItemExpanded(key),
+            isNew: highlightMs > 0 && newKeySet.has(key),
+            newItemTagLabel: labels.newItemTag,
             renderActor,
             renderTimestamp,
             renderMeta,
@@ -6773,6 +7472,7 @@ var Feed = ({
   if (container === "card" || container === "tile") return /* @__PURE__ */ React13.createElement(Tile4, { compact: true }, feed);
   return feed;
 };
+Feed.displayName = "Feed";
 
 // src/calendar/Calendar.jsx
 import React14, { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState6 } from "react";
@@ -6781,6 +7481,7 @@ import {
   AutoGrid as AutoGrid3,
   Box as Box6,
   Button as Button8,
+  DateInput as DateInput4,
   Divider as Divider4,
   EmptyState as EmptyState4,
   Flex as Flex9,
@@ -6788,9 +7489,9 @@ import {
   Image as Image5,
   Inline as Inline4,
   Link as Link6,
-  LoadingSpinner as LoadingSpinner2,
-  Modal,
-  ModalBody,
+  LoadingSpinner as LoadingSpinner3,
+  Modal as Modal2,
+  ModalBody as ModalBody2,
   Panel,
   PanelBody,
   Select as Select6,
@@ -6800,7 +7501,7 @@ import {
   TableHead as TableHead2,
   TableHeader as TableHeader2,
   TableRow as TableRow2,
-  StatusTag as StatusTag2,
+  StatusTag as StatusTag3,
   Tag as Tag5,
   Text as Text7,
   Tile as Tile5
@@ -6809,7 +7510,7 @@ import { Popover } from "@hubspot/ui-extensions/experimental";
 
 // src/calendar/dateUtils.js
 var MS_PER_DAY = 864e5;
-var isDateValueObject2 = (v) => v != null && typeof v === "object" && typeof v.year === "number" && typeof v.month === "number" && typeof v.date === "number";
+var isDateValueObject3 = (v) => v != null && typeof v === "object" && typeof v.year === "number" && typeof v.month === "number" && typeof v.date === "number";
 var fromEpoch = (ms) => {
   const d = new Date(ms);
   if (Number.isNaN(d.getTime())) return null;
@@ -6819,7 +7520,7 @@ var fromEpoch = (ms) => {
 var toDate2 = (value) => {
   if (value == null || value === "") return null;
   if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
-  if (isDateValueObject2(value)) {
+  if (isDateValueObject3(value)) {
     return new Date(
       value.year,
       value.month,
@@ -6914,7 +7615,7 @@ var buildHours = (startHour = 8, endHour = 20) => {
   let e = Math.max(0, Math.min(23, Math.round(endHour)));
   if (s > e) [s, e] = [e, s];
   const hours = [];
-  for (let h6 = s; h6 <= e; h6 += 1) hours.push(h6);
+  for (let h7 = s; h7 <= e; h7 += 1) hours.push(h7);
   return hours;
 };
 var WEEKDAY_LONG = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
@@ -7029,9 +7730,172 @@ var makeSpacerDataUri = (height = 24, width = 4) => {
   return { src: toDataUri(svg), width, height };
 };
 
+// src/calendar/rescheduleUtils.js
+var shiftDate = (date, shift) => {
+  const d = toDate2(date);
+  if (!d) return null;
+  if (!shift || typeof shift !== "object") return new Date(d);
+  const days = (shift.days || 0) + (shift.weeks || 0) * 7;
+  let next = days ? addDays(d, days) : new Date(d);
+  const ms = (shift.hours || 0) * 36e5 + (shift.minutes || 0) * 6e4;
+  if (ms) next = new Date(next.getTime() + ms);
+  return next;
+};
+var shiftEvent = (range, shift) => {
+  const start = toDate2(range && range.start);
+  if (!start) return null;
+  const end = toDate2(range && range.end) || start;
+  return { start: shiftDate(start, shift), end: shiftDate(end, shift) };
+};
+var calendarDayDelta = (a, b) => Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / MS_PER_DAY);
+var msIntoDay = (d) => ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
+var rescheduleToStart = (range, newStart) => {
+  const start = toDate2(range && range.start);
+  const target = toDate2(newStart);
+  if (!start || !target) return null;
+  const end = toDate2(range && range.end) || start;
+  const dayDelta = calendarDayDelta(start, target);
+  const timeDelta = msIntoDay(target) - msIntoDay(start);
+  const endOnDay = addDays(end, dayDelta);
+  if (!timeDelta) return { start: target, end: endOnDay };
+  return {
+    start: target,
+    end: new Date(
+      endOnDay.getFullYear(),
+      endOnDay.getMonth(),
+      endOnDay.getDate(),
+      0,
+      0,
+      0,
+      msIntoDay(endOnDay) + timeDelta
+    )
+  };
+};
+var applyDatePick = (start, value) => {
+  if (!isDateValueObject3(value)) return null;
+  const s = toDate2(start);
+  return new Date(
+    value.year,
+    value.month,
+    value.date,
+    s ? s.getHours() : 0,
+    s ? s.getMinutes() : 0,
+    s ? s.getSeconds() : 0,
+    s ? s.getMilliseconds() : 0
+  );
+};
+var DEFAULT_RESCHEDULE_PRESETS = [
+  { label: "+1 hour", shift: { hours: 1 } },
+  { label: "+1 day", shift: { days: 1 } },
+  { label: "Next week", shift: { weeks: 1 } }
+];
+var normalizeRescheduleOptions = (options) => {
+  if (!options) return [];
+  if (options === true) return DEFAULT_RESCHEDULE_PRESETS;
+  if (!Array.isArray(options)) return [];
+  const out = [];
+  for (const opt of options) {
+    if (typeof opt === "function") {
+      out.push({ label: opt.label || opt.name || "Reschedule", getStart: opt });
+    } else if (opt && typeof opt === "object" && opt.label != null) {
+      if (typeof opt.shift === "function") {
+        out.push({ label: opt.label, getStart: opt.shift });
+      } else if (typeof opt.getStart === "function") {
+        out.push({ label: opt.label, getStart: opt.getStart });
+      } else if (opt.shift && typeof opt.shift === "object") {
+        out.push({ label: opt.label, shift: opt.shift });
+      }
+    }
+  }
+  return out;
+};
+var resolveRescheduleTarget = (range, option, fnArg) => {
+  if (!range || !toDate2(range.start) || !option) return null;
+  if (typeof option.getStart === "function") {
+    const next = toDate2(option.getStart(fnArg !== void 0 ? fnArg : range));
+    return next ? rescheduleToStart(range, next) : null;
+  }
+  if (option.shift && typeof option.shift === "object") {
+    return shiftEvent(range, option.shift);
+  }
+  return null;
+};
+
+// src/calendar/resourceLanes.js
+var resolveResourceId = (record, spec) => {
+  if (record == null || spec == null) return null;
+  const value = typeof spec === "function" ? spec(record) : record[spec];
+  if (value == null || value === "") return null;
+  return value;
+};
+var buildResourceLanes = (events, options = {}) => {
+  const {
+    resources,
+    resourceLabels,
+    getId,
+    showUnassignedLane = true,
+    unassignedLabel = "Unassigned"
+  } = options;
+  const labelFor = (id) => {
+    if (resourceLabels && resourceLabels[id] != null) return resourceLabels[id];
+    return String(id);
+  };
+  const lanes = [];
+  const byKey = /* @__PURE__ */ new Map();
+  const addLane = (id, label, declared) => {
+    const key = String(id);
+    if (byKey.has(key)) return byKey.get(key);
+    const lane = { id, key, label, events: [], unassigned: false, declared };
+    byKey.set(key, lane);
+    lanes.push(lane);
+    return lane;
+  };
+  (resources || []).forEach((resource) => {
+    if (resource == null) return;
+    if (typeof resource === "object") {
+      addLane(resource.id, resource.label != null ? resource.label : labelFor(resource.id), true);
+    } else {
+      addLane(resource, labelFor(resource), true);
+    }
+  });
+  const unassigned = {
+    id: null,
+    key: "__unassigned__",
+    label: unassignedLabel,
+    events: [],
+    unassigned: true,
+    declared: false
+  };
+  (events || []).forEach((event) => {
+    const id = getId ? getId(event) : null;
+    if (id == null || id === "") {
+      unassigned.events.push(event);
+      return;
+    }
+    const lane = byKey.get(String(id)) || addLane(id, labelFor(id), false);
+    lane.events.push(event);
+  });
+  if (showUnassignedLane && unassigned.events.length > 0) lanes.push(unassigned);
+  return lanes;
+};
+var eventsIntersectingRange = (events, rangeStart, rangeEnd) => {
+  const rs = rangeStart.getTime();
+  const re = rangeEnd.getTime();
+  return (events || []).filter((event) => {
+    if (!event || !event.start) return false;
+    const es = event.start.getTime();
+    const ee = (event.end || event.start).getTime();
+    return es <= re && ee >= rs;
+  });
+};
+var laneEventsForDay = (events, day) => eventsIntersectingRange(events, startOfDay(day), endOfDay(day)).sort(
+  (a, b) => a.start.getTime() - b.start.getTime()
+);
+
 // src/calendar/Calendar.jsx
 var DEFAULT_MAX_EVENTS_PER_DAY = 3;
 var ALL_VIEWS = ["month", "week", "day", "agenda"];
+var ALL_VIEWS_WITH_RESOURCE = ["month", "week", "day", "resource", "agenda"];
 var DEFAULT_DAY_START_HOUR = 8;
 var DEFAULT_DAY_END_HOUR = 20;
 var DEFAULT_TIME_ZONES = [
@@ -7067,7 +7931,8 @@ var VIEW_LABELS = {
   month: "Month",
   week: "Week",
   day: "Day",
-  agenda: "Agenda"
+  agenda: "Agenda",
+  resource: "Resource"
 };
 var DEFAULT_LABELS5 = {
   today: "Today",
@@ -7084,7 +7949,11 @@ var DEFAULT_LABELS5 = {
   errorMessage: "An error occurred while loading events.",
   dayDetailTitle: (label) => label,
   open: "Open",
-  allDay: "All day"
+  allDay: "All day",
+  reschedule: "Reschedule",
+  pickDate: "Pick date",
+  unassigned: "Unassigned",
+  resource: "Resource"
 };
 var DEFAULT_EVENT_FIELDS = {
   id: "id",
@@ -7140,8 +8009,9 @@ var truncateMonthLabel = (value, max) => {
 var MONTH_COL_WIDTH = 160;
 var TIMEGRID_DAY_COL = 150;
 var TIMEGRID_DAY_COL_SINGLE = 560;
+var RESOURCE_LABEL_COL_WIDTH = "min";
 var HOUR_SLOT_HEIGHT = 64;
-var EventDetail = ({ event, labels }) => {
+var EventDetail = ({ event, labels, reschedule, idSuffix = "" }) => {
   const { start, end, title, subtitle, href } = event;
   let when = "";
   if (start) {
@@ -7155,31 +8025,47 @@ var EventDetail = ({ event, labels }) => {
       when = `${formatDayTitle(start)} \u2013 ${formatDayTitle(end)}`;
     }
   }
-  return /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" }, truncate: true }, title || "--"), when ? /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", truncate: true }, when) : null, subtitle ? /* @__PURE__ */ React14.createElement(Text7, { truncate: true }, subtitle) : null, href ? /* @__PURE__ */ React14.createElement(Link6, { href: href.url, external: href.external }, labels.open) : null);
+  return /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" }, truncate: true }, title || "--"), when ? /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", truncate: true }, when) : null, subtitle ? /* @__PURE__ */ React14.createElement(Text7, { truncate: true }, subtitle) : null, href ? /* @__PURE__ */ React14.createElement(Link6, { href: href.url, external: href.external }, labels.open) : null, reschedule ? /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Divider4, null), /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", format: { fontWeight: "demibold" } }, labels.reschedule), reschedule.options.length > 0 ? /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", gap: "xs", wrap: "wrap" }, reschedule.options.map((option, i) => /* @__PURE__ */ React14.createElement(
+    Button8,
+    {
+      key: `${option.label}-${i}`,
+      size: "xs",
+      variant: "secondary",
+      onClick: () => reschedule.onPreset(event, option)
+    },
+    option.label
+  ))) : null, /* @__PURE__ */ React14.createElement(
+    DateInput4,
+    {
+      name: `cal-resched-${event.key}${idSuffix}`,
+      label: labels.pickDate,
+      onChange: (value) => reschedule.onPick(event, value)
+    }
+  )) : null);
 };
-var buildOverlay = (event, mode, renderEventDetail, labels, idSuffix = "") => {
+var buildOverlay = (event, mode, renderEventDetail, labels, idSuffix = "", reschedule = null) => {
   if (mode === "none") return void 0;
-  const body = renderEventDetail ? renderEventDetail(event) : /* @__PURE__ */ React14.createElement(EventDetail, { event, labels });
+  const body = renderEventDetail ? renderEventDetail(event) : /* @__PURE__ */ React14.createElement(EventDetail, { event, labels, reschedule, idSuffix });
   const id = `cal-evt-${event.key}${idSuffix}`;
   if (mode === "modal") {
-    return /* @__PURE__ */ React14.createElement(Modal, { id, title: event.title || labels.open, width: "small" }, /* @__PURE__ */ React14.createElement(ModalBody, null, body));
+    return /* @__PURE__ */ React14.createElement(Modal2, { id, title: event.title || labels.open, width: "small" }, /* @__PURE__ */ React14.createElement(ModalBody2, null, body));
   }
   if (mode === "panel") {
     return /* @__PURE__ */ React14.createElement(Panel, { id, title: event.title || labels.open, width: "small", variant: "modal" }, /* @__PURE__ */ React14.createElement(PanelBody, null, body));
   }
   return /* @__PURE__ */ React14.createElement(Popover, { id, placement: "bottom", variant: "longform" }, /* @__PURE__ */ React14.createElement(Tile5, { compact: true }, body));
 };
-var AgendaEventRow = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels }) => {
+var AgendaEventRow = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, reschedule }) => {
   const variant = VALID_VARIANTS.has(event.color) ? event.color : "default";
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-ag${day.getTime()}` : "");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-ag${day.getTime()}` : "", reschedule);
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
   const timeLabel = isAllDayEvent(event) ? labels.allDay : formatTime(event.start);
   return /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center", gap: "sm" }, /* @__PURE__ */ React14.createElement(Box6, { flex: 2 }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center" }, /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", format: { fontWeight: "demibold" } }, timeLabel))), /* @__PURE__ */ React14.createElement(Box6, { flex: 11 }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React14.createElement(ColorDot, { variant }), /* @__PURE__ */ React14.createElement(Text7, { truncate: true }, /* @__PURE__ */ React14.createElement(Link6, { overlay, onClick: handleClick }, event.title || "--")))), event.subtitle ? /* @__PURE__ */ React14.createElement(Box6, { flex: 4 }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center" }, /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", truncate: true }, event.subtitle))) : null);
 };
 var MONTH_SLOT_HEIGHT = 24;
-var MonthChip = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, monthEventStyle, monthEventMaxChars }) => {
+var MonthChip = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, monthEventStyle, monthEventMaxChars, reschedule, idScope = "" }) => {
   const isStartDay = !day || !event.start || isSameDay(event.start, day);
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-m${day.getTime()}` : "");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-m${idScope}${day.getTime()}` : "", reschedule);
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
   const variant = VALID_VARIANTS.has(event.color) ? event.color : "default";
   const startHasTime = event.start && (event.start.getHours() !== 0 || event.start.getMinutes() !== 0);
@@ -7190,11 +8076,11 @@ var MonthChip = ({ event, day, overlayMode, renderEventDetail, onEventClick, lab
   if (monthEventStyle === "tag") {
     return /* @__PURE__ */ React14.createElement(Tag5, { variant: TAG_VARIANT[variant] || "default", overlay, onClick: handleClick }, label);
   }
-  return /* @__PURE__ */ React14.createElement(Link6, { overlay, onClick: handleClick }, /* @__PURE__ */ React14.createElement(StatusTag2, { variant: STATUS_VARIANT[variant] || "default" }, label));
+  return /* @__PURE__ */ React14.createElement(Link6, { overlay, onClick: handleClick }, /* @__PURE__ */ React14.createElement(StatusTag3, { variant: STATUS_VARIANT[variant] || "default" }, label));
 };
-var DayListItem = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels }) => {
+var DayListItem = ({ event, day, overlayMode, renderEventDetail, onEventClick, labels, reschedule, idScope = "" }) => {
   const handleClick = onEventClick ? () => onEventClick(event.raw, event) : void 0;
-  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-more${day.getTime()}` : "-more");
+  const overlay = buildOverlay(event, overlayMode, renderEventDetail, labels, day ? `-more${idScope}${day.getTime()}` : "-more", reschedule);
   const href = event.href;
   return /* @__PURE__ */ React14.createElement(Button8, { variant: "transparent", size: "sm", href: href ? href.url : void 0, overlay, onClick: handleClick }, event.title || "--");
 };
@@ -7259,6 +8145,40 @@ var Toolbar = ({
     }
   ));
 };
+var DayChipStack = ({ day, events, maxEventsPerDay, chipProps, labels, idScope = "" }) => {
+  const slotSpacer = makeSpacerDataUri(MONTH_SLOT_HEIGHT, 1);
+  const shown = events.slice(0, maxEventsPerDay);
+  const hasOverflow = events.length > maxEventsPerDay;
+  const heightSpacer = /* @__PURE__ */ React14.createElement(Image5, { src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" });
+  const slotRow = (key, content) => /* @__PURE__ */ React14.createElement(Flex9, { key, direction: "row", align: "center", gap: "flush" }, heightSpacer, content);
+  const slots = [];
+  for (let i = 0; i < maxEventsPerDay; i++) {
+    if (i < shown.length) {
+      slots.push(slotRow(shown[i].key, /* @__PURE__ */ React14.createElement(MonthChip, { event: shown[i], day, idScope, ...chipProps })));
+    } else {
+      slots.push(/* @__PURE__ */ React14.createElement(Image5, { key: `sp-${i}`, src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" }));
+    }
+  }
+  if (hasOverflow) {
+    slots.push(
+      slotRow(
+        "more",
+        /* @__PURE__ */ React14.createElement(
+          Link6,
+          {
+            overlay: /* @__PURE__ */ React14.createElement(Popover, { id: `cal-day-${idScope}${day.getTime()}`, placement: "top", variant: "longform" }, /* @__PURE__ */ React14.createElement(Tile5, { compact: true }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "sm" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", justify: "center", align: "center", gap: "xs" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "bold" } }, String(events.length)), /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" } }, labels.onThisDate)), /* @__PURE__ */ React14.createElement(Divider4, null), events.map((event, i) => /* @__PURE__ */ React14.createElement(React14.Fragment, { key: event.key }, /* @__PURE__ */ React14.createElement(DayListItem, { event, day, idScope, ...chipProps }), i < events.length - 1 ? /* @__PURE__ */ React14.createElement(Divider4, null) : null)))))
+          },
+          labels.more(events.length - maxEventsPerDay)
+        )
+      )
+    );
+  } else {
+    slots.push(
+      /* @__PURE__ */ React14.createElement(Image5, { key: "more-sp", src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" })
+    );
+  }
+  return /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, slots);
+};
 var MonthView = ({
   refDate,
   now,
@@ -7273,45 +8193,23 @@ var MonthView = ({
 }) => {
   const headers = weekdayLabels(weekStartsOn, hideWeekends, true);
   const today = now || /* @__PURE__ */ new Date();
-  const slotSpacer = makeSpacerDataUri(MONTH_SLOT_HEIGHT, 1);
   const renderCell = (day) => {
     const dayEvents = eventsForDay(day);
     const inMonth = isSameMonth(day, refDate);
     const isToday = isSameDay(day, today);
     if (renderDayCell) return renderDayCell(day, dayEvents);
-    const shown = dayEvents.slice(0, maxEventsPerDay);
-    const hasOverflow = dayEvents.length > maxEventsPerDay;
-    const heightSpacer = /* @__PURE__ */ React14.createElement(Image5, { src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" });
-    const slotRow = (key, content) => /* @__PURE__ */ React14.createElement(Flex9, { key, direction: "row", align: "center", gap: "flush" }, heightSpacer, content);
-    const slots = [];
-    for (let i = 0; i < maxEventsPerDay; i++) {
-      if (i < shown.length) {
-        slots.push(slotRow(shown[i].key, /* @__PURE__ */ React14.createElement(MonthChip, { event: shown[i], day, ...chipProps })));
-      } else {
-        slots.push(/* @__PURE__ */ React14.createElement(Image5, { key: `sp-${i}`, src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" }));
+    return /* @__PURE__ */ React14.createElement(AutoGrid3, { columnWidth: MONTH_COL_WIDTH, gap: "flush" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center", gap: "xs" }, isToday ? /* @__PURE__ */ React14.createElement(ColorDot, { variant: "info" }) : null, /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", format: { fontWeight: inMonth ? "demibold" : "regular" } }, String(day.getDate()))), /* @__PURE__ */ React14.createElement(
+      DayChipStack,
+      {
+        day,
+        events: dayEvents,
+        maxEventsPerDay,
+        chipProps,
+        labels
       }
-    }
-    if (hasOverflow) {
-      slots.push(
-        slotRow(
-          "more",
-          /* @__PURE__ */ React14.createElement(
-            Link6,
-            {
-              overlay: /* @__PURE__ */ React14.createElement(Popover, { id: `cal-day-${day.getTime()}`, placement: "top", variant: "longform" }, /* @__PURE__ */ React14.createElement(Tile5, { compact: true }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "sm" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", justify: "center", align: "center", gap: "xs" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "bold" } }, String(dayEvents.length)), /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" } }, labels.onThisDate)), /* @__PURE__ */ React14.createElement(Divider4, null), dayEvents.map((event, i) => /* @__PURE__ */ React14.createElement(React14.Fragment, { key: event.key }, /* @__PURE__ */ React14.createElement(DayListItem, { event, day, ...chipProps }), i < dayEvents.length - 1 ? /* @__PURE__ */ React14.createElement(Divider4, null) : null)))))
-            },
-            labels.more(dayEvents.length - maxEventsPerDay)
-          )
-        )
-      );
-    } else {
-      slots.push(
-        /* @__PURE__ */ React14.createElement(Image5, { key: "more-sp", src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" })
-      );
-    }
-    return /* @__PURE__ */ React14.createElement(AutoGrid3, { columnWidth: MONTH_COL_WIDTH, gap: "flush" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center", gap: "xs" }, isToday ? /* @__PURE__ */ React14.createElement(ColorDot, { variant: "info" }) : null, /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy", format: { fontWeight: inMonth ? "demibold" : "regular" } }, String(day.getDate()))), slots));
+    )));
   };
-  return /* @__PURE__ */ React14.createElement(Table2, { bordered: true, flush: true }, /* @__PURE__ */ React14.createElement(TableHead2, null, /* @__PURE__ */ React14.createElement(TableRow2, null, headers.map((h6) => /* @__PURE__ */ React14.createElement(TableHeader2, { key: h6, width: "min", align: "center" }, h6.toUpperCase())))), /* @__PURE__ */ React14.createElement(TableBody2, null, weeks.map((week, wi) => {
+  return /* @__PURE__ */ React14.createElement(Table2, { bordered: true, flush: true }, /* @__PURE__ */ React14.createElement(TableHead2, null, /* @__PURE__ */ React14.createElement(TableRow2, null, headers.map((h7) => /* @__PURE__ */ React14.createElement(TableHeader2, { key: h7, width: "min", align: "center" }, h7.toUpperCase())))), /* @__PURE__ */ React14.createElement(TableBody2, null, weeks.map((week, wi) => {
     const days = hideWeekends ? week.filter((d) => d.getDay() !== 0 && d.getDay() !== 6) : week;
     return /* @__PURE__ */ React14.createElement(TableRow2, { key: wi }, days.map((day) => /* @__PURE__ */ React14.createElement(TableCell2, { key: day.getTime(), width: "min" }, renderCell(day))));
   })));
@@ -7331,13 +8229,40 @@ var AgendaView = ({ rangeStart, rangeEnd, eventsForDay, chipProps, labels, rende
   }
   return /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "lg" }, days.map(({ day, events }) => /* @__PURE__ */ React14.createElement(Flex9, { key: day.getTime(), direction: "column", gap: "sm" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", justify: "between", align: "end" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" } }, formatDayTitle(day)), /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy" }, `${events.length} ${events.length === 1 ? "event" : "events"}`)), /* @__PURE__ */ React14.createElement(Divider4, null), events.map((event) => /* @__PURE__ */ React14.createElement(AgendaEventRow, { key: event.key, event, day, ...chipProps })))));
 };
+var ResourceView = ({ days, now, lanes, maxEventsPerDay, chipProps, labels, renderEmptyState }) => {
+  const today = now || /* @__PURE__ */ new Date();
+  if (!lanes || lanes.length === 0) {
+    if (renderEmptyState) return renderEmptyState({});
+    return /* @__PURE__ */ React14.createElement(EmptyState4, { title: labels.noEventsTitle }, /* @__PURE__ */ React14.createElement(Text7, null, labels.noEventsMessage));
+  }
+  const rangeStart = startOfDay(days[0]);
+  const rangeEnd = endOfDay(days[days.length - 1]);
+  return /* @__PURE__ */ React14.createElement(Table2, { bordered: true, flush: true }, /* @__PURE__ */ React14.createElement(TableHead2, null, /* @__PURE__ */ React14.createElement(TableRow2, null, /* @__PURE__ */ React14.createElement(TableHeader2, { width: RESOURCE_LABEL_COL_WIDTH }, String(labels.resource).toUpperCase()), days.map((day) => {
+    const isToday = isSameDay(day, today);
+    const label = `${formatWeekdayShort(day)} ${formatMonthShort(day)} ${day.getDate()}`;
+    return /* @__PURE__ */ React14.createElement(TableHeader2, { key: day.getTime(), width: "min", align: "center" }, isToday ? `${label} \xB7 Today` : label);
+  }))), /* @__PURE__ */ React14.createElement(TableBody2, null, lanes.map((lane, laneIndex) => {
+    const visible = eventsIntersectingRange(lane.events, rangeStart, rangeEnd);
+    return /* @__PURE__ */ React14.createElement(TableRow2, { key: lane.key }, /* @__PURE__ */ React14.createElement(TableCell2, { width: RESOURCE_LABEL_COL_WIDTH }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "flush" }, /* @__PURE__ */ React14.createElement(Text7, { format: { fontWeight: "demibold" } }, lane.label), /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy" }, `${visible.length} ${visible.length === 1 ? "event" : "events"}`))), days.map((day) => /* @__PURE__ */ React14.createElement(TableCell2, { key: day.getTime(), width: "min" }, /* @__PURE__ */ React14.createElement(AutoGrid3, { columnWidth: MONTH_COL_WIDTH, gap: "flush" }, /* @__PURE__ */ React14.createElement(
+      DayChipStack,
+      {
+        day,
+        events: laneEventsForDay(visible, day),
+        maxEventsPerDay,
+        chipProps,
+        labels,
+        idScope: `r${laneIndex}-`
+      }
+    )))));
+  })));
+};
 var formatTimedDuration = (start, end) => {
   const mins = Math.max(0, Math.round(((end || start).getTime() - start.getTime()) / 6e4));
-  const h6 = Math.floor(mins / 60);
+  const h7 = Math.floor(mins / 60);
   const m = mins % 60;
-  if (h6 === 0) return `${m} min`;
-  if (m === 0) return `${h6} hr`;
-  return `${h6} hr ${m} min`;
+  if (h7 === 0) return `${m} min`;
+  if (m === 0) return `${h7} hr`;
+  return `${h7} hr ${m} min`;
 };
 var hourSpan = (event) => {
   const start = event.start;
@@ -7378,7 +8303,8 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
       chipProps.overlayMode,
       chipProps.renderEventDetail,
       chipProps.labels,
-      `-tg${mode}${hour}-${dayMs}`
+      `-tg${mode}${hour}-${dayMs}`,
+      chipProps.reschedule
     );
     const handleClick = chipProps.onEventClick ? () => chipProps.onEventClick(e.raw, e) : void 0;
     const variant = VALID_VARIANTS.has(e.color) ? e.color : "default";
@@ -7398,7 +8324,7 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
       sub = `\u2191 cont. through ${endLabel}`;
     }
     const titleLabel = centerDays ? e.title || "--" : truncateMonthLabel(e.title || "--", weekTitleMaxChars);
-    return /* @__PURE__ */ React14.createElement(Flex9, { key: `${e.key}-${mode}-${hour}`, direction: "column", gap: "flush" }, /* @__PURE__ */ React14.createElement(Link6, { overlay, onClick: handleClick }, /* @__PURE__ */ React14.createElement(StatusTag2, { variant: STATUS_VARIANT[variant] || "default" }, titleLabel)), sub ? /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy" }, sub) : null);
+    return /* @__PURE__ */ React14.createElement(Flex9, { key: `${e.key}-${mode}-${hour}`, direction: "column", gap: "flush" }, /* @__PURE__ */ React14.createElement(Link6, { overlay, onClick: handleClick }, /* @__PURE__ */ React14.createElement(StatusTag3, { variant: STATUS_VARIANT[variant] || "default" }, titleLabel)), sub ? /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy" }, sub) : null);
   };
   const dayCell = (key, content) => /* @__PURE__ */ React14.createElement(TableCell2, { key, width: centerDays ? "max" : "min", align: "left" }, centerDays ? /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, content) : /* @__PURE__ */ React14.createElement(AutoGrid3, { columnWidth: dayColWidth, gap: "flush" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "xs" }, content)));
   const slotSpacer = makeSpacerDataUri(HOUR_SLOT_HEIGHT, 1);
@@ -7417,7 +8343,7 @@ var TimeGridView = ({ days, now, hours, dayStartHour, dayEndHour, eventsForDay,
     return /* @__PURE__ */ React14.createElement(TableRow2, { key: hour }, /* @__PURE__ */ React14.createElement(TableCell2, { width: "min" }, /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React14.createElement(Image5, { src: slotSpacer.src, width: slotSpacer.width, height: slotSpacer.height, alt: "" }), isNow ? (
       // Trailing nbsp pads the chip's right edge so the final letter
       // ("M" in "11 AM") isn't clipped by the min-width TIME column.
-      /* @__PURE__ */ React14.createElement(StatusTag2, { variant: "info" }, `${formatHourLabel(hour)}\xA0`)
+      /* @__PURE__ */ React14.createElement(StatusTag3, { variant: "info" }, `${formatHourLabel(hour)}\xA0`)
     ) : /* @__PURE__ */ React14.createElement(Text7, { variant: "microcopy" }, formatHourLabel(hour)))), dayData.map(({ day, timed }) => {
       const occupying = timed.map((t) => {
         let visStart = Math.max(t.sHour, dayStartHour);
@@ -7463,6 +8389,14 @@ var Calendar = (props) => {
     // time grid (week / day)
     dayStartHour = DEFAULT_DAY_START_HOUR,
     dayEndHour = DEFAULT_DAY_END_HOUR,
+    // resource / lane view (rows = resources, columns = the focused week's days)
+    resources,
+    resourceField,
+    resourceLabels,
+    showUnassignedLane = true,
+    // drag-free reschedule (presets + date picker in the event-detail overlay)
+    rescheduleOptions,
+    onEventReschedule,
     // timezone
     timeZone: controlledTimeZone,
     defaultTimeZone,
@@ -7501,10 +8435,12 @@ var Calendar = (props) => {
   const fields = useMemo5(() => ({ ...DEFAULT_EVENT_FIELDS, ...eventFields || {} }), [eventFields]);
   const [internalView, setInternalView] = useState6(defaultView);
   const view = controlledView != null ? controlledView : internalView;
+  const resourceEnabled = resources && resources.length > 0 || resourceField != null;
   const enabledViews = useMemo5(() => {
-    const base = viewsProp && viewsProp.length > 0 ? viewsProp : ALL_VIEWS;
-    return base.filter((v) => ALL_VIEWS.includes(v));
-  }, [viewsProp]);
+    const all = resourceEnabled ? ALL_VIEWS_WITH_RESOURCE : ALL_VIEWS;
+    const base = viewsProp && viewsProp.length > 0 ? viewsProp : all;
+    return base.filter((v) => all.includes(v));
+  }, [viewsProp, resourceEnabled]);
   const setView = useCallback5(
     (next) => {
       if (controlledView == null) setInternalView(next);
@@ -7529,7 +8465,9 @@ var Calendar = (props) => {
   const focusedDate = (controlledFocusedDate != null ? toDate2(controlledFocusedDate) : internalDate) || startOfDay(nowWall);
   const stepFor = useCallback5(
     (dir) => {
-      if (view === "week" || view === "agenda") return addDays(focusedDate, dir * 7);
+      if (view === "week" || view === "agenda" || view === "resource") {
+        return addDays(focusedDate, dir * 7);
+      }
       if (view === "day") return addDays(focusedDate, dir);
       return addMonths(focusedDate, dir);
     },
@@ -7556,7 +8494,7 @@ var Calendar = (props) => {
         rangeEnd: endOfDay(flat[flat.length - 1])
       };
     }
-    if (view === "week") {
+    if (view === "week" || view === "resource") {
       const days = buildWeekDays(focusedDate, weekStartsOn, hideWeekends);
       return {
         weeks: null,
@@ -7629,14 +8567,18 @@ var Calendar = (props) => {
   );
   const normalized = useMemo5(
     () => (events || []).map((raw, index) => {
-      const start = toWallClock(toDate2(resolveField(raw, fields.start)), timeZone);
-      const endRaw = toWallClock(toDate2(resolveField(raw, fields.end)), timeZone);
+      const sourceStart = toDate2(resolveField(raw, fields.start));
+      const sourceEnd = toDate2(resolveField(raw, fields.end));
+      const start = toWallClock(sourceStart, timeZone);
+      const endRaw = toWallClock(sourceEnd, timeZone);
       const id = resolveField(raw, fields.id);
       return {
         key: id != null ? String(id) : `evt-${index}`,
         id,
         start,
         end: endRaw || start,
+        sourceStart,
+        sourceEnd: sourceEnd || sourceStart,
         title: resolveField(raw, fields.title),
         subtitle: resolveField(raw, fields.subtitle),
         color: resolveField(raw, fields.color),
@@ -7673,12 +8615,40 @@ var Calendar = (props) => {
   }, [rangeKey]);
   const title = useMemo5(() => {
     if (view === "day") return formatDayTitle(focusedDate);
-    if (view === "week" || view === "agenda") {
-      const days = buildWeekDays(focusedDate, weekStartsOn, view === "week" && hideWeekends);
+    if (view === "week" || view === "agenda" || view === "resource") {
+      const days = buildWeekDays(focusedDate, weekStartsOn, view !== "agenda" && hideWeekends);
       return formatRangeTitle(days[0], days[days.length - 1]);
     }
     return formatMonthTitle(focusedDate);
   }, [view, focusedDate, weekStartsOn, hideWeekends]);
+  const handleReschedulePreset = useCallback5(
+    (event, option) => {
+      const target = resolveRescheduleTarget(
+        { start: event.sourceStart, end: event.sourceEnd },
+        option,
+        event
+      );
+      if (target && onEventReschedule) onEventReschedule(event.raw, target, event);
+    },
+    [onEventReschedule]
+  );
+  const handleReschedulePick = useCallback5(
+    (event, value) => {
+      const newStart = applyDatePick(event.sourceStart, value);
+      if (!newStart) return;
+      const target = rescheduleToStart({ start: event.sourceStart, end: event.sourceEnd }, newStart);
+      if (target && onEventReschedule) onEventReschedule(event.raw, target, event);
+    },
+    [onEventReschedule]
+  );
+  const reschedule = useMemo5(() => {
+    if (!rescheduleOptions) return null;
+    return {
+      options: normalizeRescheduleOptions(rescheduleOptions),
+      onPreset: handleReschedulePreset,
+      onPick: handleReschedulePick
+    };
+  }, [rescheduleOptions, handleReschedulePreset, handleReschedulePick]);
   const safeMonthEventStyle = MONTH_EVENT_STYLES.has(monthEventStyle) ? monthEventStyle : "statusTag";
   const chipProps = {
     overlayMode,
@@ -7686,8 +8656,19 @@ var Calendar = (props) => {
     onEventClick,
     labels,
     monthEventStyle: safeMonthEventStyle,
-    monthEventMaxChars
+    monthEventMaxChars,
+    reschedule
   };
+  const resourceLaneData = useMemo5(() => {
+    if (view !== "resource") return null;
+    return buildResourceLanes(queried, {
+      resources,
+      resourceLabels,
+      getId: (e) => resolveResourceId(e.raw, resourceField),
+      showUnassignedLane,
+      unassignedLabel: labels.unassigned
+    });
+  }, [view, queried, resources, resourceLabels, resourceField, showUnassignedLane, labels]);
   const timeZoneOptions = useMemo5(() => {
     if (!showTimeZoneSelect) return null;
     const base = (timeZoneOptionsProp && timeZoneOptionsProp.length ? timeZoneOptionsProp : DEFAULT_TIME_ZONES).map(
@@ -7729,7 +8710,7 @@ var Calendar = (props) => {
   );
   let body;
   if (loading) {
-    body = renderLoadingState ? renderLoadingState({}) : /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", justify: "center" }, /* @__PURE__ */ React14.createElement(LoadingSpinner2, { label: labels.loading }));
+    body = renderLoadingState ? renderLoadingState({}) : /* @__PURE__ */ React14.createElement(Flex9, { direction: "row", justify: "center" }, /* @__PURE__ */ React14.createElement(LoadingSpinner3, { label: labels.loading }));
   } else if (error) {
     body = renderErrorState ? renderErrorState({ error }) : /* @__PURE__ */ React14.createElement(Alert4, { title: labels.errorTitle, variant: "error" }, typeof error === "string" ? error : labels.errorMessage);
   } else if (view === "month") {
@@ -7748,6 +8729,19 @@ var Calendar = (props) => {
         labels
       }
     );
+  } else if (view === "resource") {
+    body = /* @__PURE__ */ React14.createElement(
+      ResourceView,
+      {
+        days: gridDays,
+        now: nowWall,
+        lanes: resourceLaneData,
+        maxEventsPerDay,
+        chipProps,
+        labels,
+        renderEmptyState
+      }
+    );
   } else if (view === "week" || view === "day") {
     body = /* @__PURE__ */ React14.createElement(
       TimeGridView,
@@ -7777,9 +8771,696 @@ var Calendar = (props) => {
   }
   return /* @__PURE__ */ React14.createElement(Flex9, { direction: "column", gap: "sm" }, toolbar, body);
 };
+Calendar.displayName = "Calendar";
+
+// src/filter/FilterBuilder.jsx
+import React15, { useMemo as useMemo6, useState as useState7 } from "react";
+import {
+  Box as Box7,
+  Button as Button9,
+  DateInput as DateInput5,
+  Flex as Flex10,
+  Input as Input3,
+  MultiSelect as MultiSelect4,
+  NumberInput as NumberInput3,
+  Select as Select7,
+  Text as Text8,
+  Tile as Tile6
+} from "@hubspot/ui-extensions";
+
+// src/filter/filterTree.js
+var NUMERIC_OPERATORS = ["EQ", "NEQ", "GT", "GTE", "LT", "LTE", "BETWEEN", "HAS_PROPERTY", "NOT_HAS_PROPERTY"];
+var FILTER_OPERATORS = {
+  string: ["EQ", "NEQ", "CONTAINS_TOKEN", "NOT_CONTAINS_TOKEN", "HAS_PROPERTY", "NOT_HAS_PROPERTY"],
+  number: NUMERIC_OPERATORS,
+  date: NUMERIC_OPERATORS,
+  datetime: NUMERIC_OPERATORS,
+  enum: ["IN", "NOT_IN", "HAS_PROPERTY", "NOT_HAS_PROPERTY"],
+  bool: ["EQ"]
+};
+var ALL_OPERATORS = [...new Set(Object.values(FILTER_OPERATORS).flat())];
+var BASE_OPERATOR_LABELS = {
+  EQ: "is equal to",
+  NEQ: "is not equal to",
+  CONTAINS_TOKEN: "contains",
+  NOT_CONTAINS_TOKEN: "doesn't contain",
+  GT: "is greater than",
+  GTE: "is greater than or equal to",
+  LT: "is less than",
+  LTE: "is less than or equal to",
+  BETWEEN: "is between",
+  IN: "is any of",
+  NOT_IN: "is none of",
+  HAS_PROPERTY: "is known",
+  NOT_HAS_PROPERTY: "is unknown"
+};
+var DATE_OPERATOR_LABELS = {
+  EQ: "is",
+  NEQ: "is not",
+  GT: "is after",
+  GTE: "is on or after",
+  LT: "is before",
+  LTE: "is on or before"
+};
+var getOperatorOptions = (type, labelOverrides) => {
+  const operators = FILTER_OPERATORS[type] || [];
+  const dateLabels = type === "date" || type === "datetime" ? DATE_OPERATOR_LABELS : null;
+  return operators.map((operator) => ({
+    label: (labelOverrides == null ? void 0 : labelOverrides[operator]) ?? (dateLabels == null ? void 0 : dateLabels[operator]) ?? BASE_OPERATOR_LABELS[operator] ?? operator,
+    value: operator
+  }));
+};
+var operatorExpectsValue = (operator) => operator !== "HAS_PROPERTY" && operator !== "NOT_HAS_PROPERTY";
+var operatorExpectsHighValue = (operator) => operator === "BETWEEN";
+var operatorExpectsValues = (operator) => operator === "IN" || operator === "NOT_IN";
+var isGroupNode = (node) => node != null && node.type === "group";
+var isConditionNode = (node) => node != null && node.type === "condition";
+var createCondition = (property = "", operator = "", value, highValue) => {
+  const node = { type: "condition", property, operator };
+  if (value !== void 0) node.value = value;
+  if (highValue !== void 0) node.highValue = highValue;
+  return node;
+};
+var createGroup = (operator = "AND", filters = []) => ({
+  type: "group",
+  operator,
+  filters
+});
+var getNodeAtPath = (tree, path) => {
+  let node = tree;
+  for (const index of path || []) {
+    if (!isGroupNode(node) || !Array.isArray(node.filters)) return void 0;
+    node = node.filters[index];
+    if (node === void 0) return void 0;
+  }
+  return node;
+};
+var updateNodeAtPath = (node, path, fn) => {
+  if (!path || path.length === 0) return fn(node);
+  if (!isGroupNode(node) || !Array.isArray(node.filters)) {
+    throw new Error("filterTree: path descends into a non-group node");
+  }
+  const [index, ...rest] = path;
+  if (typeof index !== "number" || index < 0 || index >= node.filters.length) {
+    throw new Error(`filterTree: no filter at index ${index} (group has ${node.filters.length})`);
+  }
+  const filters = node.filters.slice();
+  filters[index] = updateNodeAtPath(filters[index], rest, fn);
+  return { ...node, filters };
+};
+var addFilter = (tree, path, node) => updateNodeAtPath(tree, path, (group) => {
+  if (!isGroupNode(group)) {
+    throw new Error("filterTree: addFilter path must point at a group node");
+  }
+  return { ...group, filters: [...group.filters || [], node] };
+});
+var updateFilter = (tree, path, patch) => updateNodeAtPath(
+  tree,
+  path,
+  (node) => typeof patch === "function" ? patch(node) : { ...node, ...patch }
+);
+var removeFilter = (tree, path, options = {}) => {
+  if (!path || path.length === 0) {
+    throw new Error("filterTree: cannot remove the root group");
+  }
+  const doRemove = (currentTree, targetPath) => {
+    const parentPath = targetPath.slice(0, -1);
+    const index = targetPath[targetPath.length - 1];
+    return updateNodeAtPath(currentTree, parentPath, (group) => {
+      if (!isGroupNode(group)) {
+        throw new Error("filterTree: removeFilter parent is not a group node");
+      }
+      if (typeof index !== "number" || index < 0 || index >= group.filters.length) {
+        throw new Error(`filterTree: no filter at index ${index} (group has ${group.filters.length})`);
+      }
+      return { ...group, filters: group.filters.filter((_, i) => i !== index) };
+    });
+  };
+  let next = doRemove(tree, path);
+  if (options.pruneEmptyGroups) {
+    let parentPath = path.slice(0, -1);
+    while (parentPath.length > 0) {
+      const parent = getNodeAtPath(next, parentPath);
+      if (!isGroupNode(parent) || parent.filters.length > 0) break;
+      next = doRemove(next, parentPath);
+      parentPath = parentPath.slice(0, -1);
+    }
+  }
+  return next;
+};
+var cloneNode = (node) => {
+  if (Array.isArray(node)) return node.map(cloneNode);
+  if (node !== null && typeof node === "object") {
+    const copy = {};
+    for (const key of Object.keys(node)) copy[key] = cloneNode(node[key]);
+    return copy;
+  }
+  return node;
+};
+var duplicateFilter = (tree, path) => {
+  if (!path || path.length === 0) {
+    throw new Error("filterTree: cannot duplicate the root group");
+  }
+  const parentPath = path.slice(0, -1);
+  const index = path[path.length - 1];
+  return updateNodeAtPath(tree, parentPath, (group) => {
+    if (!isGroupNode(group)) {
+      throw new Error("filterTree: duplicateFilter parent is not a group node");
+    }
+    if (typeof index !== "number" || index < 0 || index >= group.filters.length) {
+      throw new Error(`filterTree: no filter at index ${index} (group has ${group.filters.length})`);
+    }
+    const filters = group.filters.slice();
+    filters.splice(index + 1, 0, cloneNode(group.filters[index]));
+    return { ...group, filters };
+  });
+};
+var countConditions = (node) => {
+  if (isConditionNode(node)) return 1;
+  if (!isGroupNode(node) || !Array.isArray(node.filters)) return 0;
+  return node.filters.reduce((sum, child) => sum + countConditions(child), 0);
+};
+var changeConditionProperty = (condition, property) => {
+  const name = typeof property === "string" ? property : (property == null ? void 0 : property.name) ?? "";
+  const type = typeof property === "object" && property !== null ? property.type : void 0;
+  const operators = FILTER_OPERATORS[type] || [];
+  const operator = operators.includes(condition == null ? void 0 : condition.operator) ? condition.operator : operators[0] ?? "";
+  const next = { type: "condition", property: name, operator };
+  if (operatorExpectsValues(operator)) next.value = [];
+  return next;
+};
+var changeConditionOperator = (condition, operator) => {
+  const next = { type: "condition", property: (condition == null ? void 0 : condition.property) ?? "", operator };
+  if (!operatorExpectsValue(operator)) return next;
+  if (operatorExpectsValues(operator)) {
+    next.value = Array.isArray(condition == null ? void 0 : condition.value) ? condition.value : [];
+    return next;
+  }
+  if ((condition == null ? void 0 : condition.value) !== void 0 && !Array.isArray(condition.value)) {
+    next.value = condition.value;
+  }
+  if (operatorExpectsHighValue(operator) && (condition == null ? void 0 : condition.highValue) !== void 0) {
+    next.highValue = condition.highValue;
+  }
+  return next;
+};
+var isMissing = (value) => value == null || value === "";
+var validateTree = (tree, properties) => {
+  const errors = [];
+  const byName = Array.isArray(properties) ? new Map(properties.map((property) => [property.name, property])) : null;
+  if (!isGroupNode(tree)) {
+    return { valid: false, errors: [{ path: [], message: "Root must be a group node." }] };
+  }
+  const visitCondition = (node, path) => {
+    if (!node.property) {
+      errors.push({ path, message: "Condition is missing a property." });
+      return;
+    }
+    let type;
+    if (byName) {
+      const def = byName.get(node.property);
+      if (!def) {
+        errors.push({ path, message: `Unknown property "${node.property}".` });
+        return;
+      }
+      type = def.type;
+    }
+    const allowed = type !== void 0 ? FILTER_OPERATORS[type] || [] : ALL_OPERATORS;
+    if (!node.operator) {
+      errors.push({ path, message: "Condition is missing an operator." });
+      return;
+    }
+    if (!allowed.includes(node.operator)) {
+      errors.push({
+        path,
+        message: type !== void 0 ? `Operator "${node.operator}" is not valid for type "${type}".` : `Unknown operator "${node.operator}".`
+      });
+      return;
+    }
+    if (!operatorExpectsValue(node.operator)) return;
+    if (operatorExpectsValues(node.operator)) {
+      if (!Array.isArray(node.value) || node.value.length === 0) {
+        errors.push({ path, message: `Operator "${node.operator}" requires at least one value.` });
+      }
+      return;
+    }
+    if (isMissing(node.value)) {
+      errors.push({ path, message: `Operator "${node.operator}" requires a value.` });
+    }
+    if (operatorExpectsHighValue(node.operator) && isMissing(node.highValue)) {
+      errors.push({ path, message: 'Operator "BETWEEN" requires an upper bound (highValue).' });
+    }
+  };
+  const visit = (node, path) => {
+    if (node == null || typeof node !== "object") {
+      errors.push({ path, message: "Filter node must be an object." });
+      return;
+    }
+    if (node.type === "group") {
+      if (node.operator !== "AND" && node.operator !== "OR") {
+        errors.push({ path, message: `Group operator must be "AND" or "OR" (got "${node.operator}").` });
+      }
+      if (!Array.isArray(node.filters)) {
+        errors.push({ path, message: "Group filters must be an array." });
+        return;
+      }
+      if (node.filters.length === 0 && path.length > 0) {
+        errors.push({ path, message: "Group has no filters." });
+      }
+      node.filters.forEach((child, index) => visit(child, [...path, index]));
+      return;
+    }
+    if (node.type === "condition") {
+      visitCondition(node, path);
+      return;
+    }
+    errors.push({ path, message: `Unknown node type "${node.type}".` });
+  };
+  visit(tree, []);
+  return { valid: errors.length === 0, errors };
+};
+var isDateValueObject4 = (value) => value != null && typeof value === "object" && typeof value.year === "number" && typeof value.month === "number" && typeof value.date === "number";
+var dateValueToTimestamp = (dateObj) => new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+var coerceCrmValue = (value) => {
+  if (isDateValueObject4(value)) return dateValueToTimestamp(value);
+  if (typeof value === "boolean") return String(value);
+  return value;
+};
+var conditionToCrmFilter = (condition, options = {}) => {
+  const { coerceValues = true } = options;
+  if (!isConditionNode(condition)) {
+    throw new Error("filterTree: conditionToCrmFilter expects a condition node");
+  }
+  if (!condition.property) {
+    throw new Error("filterTree: condition is missing a property");
+  }
+  if (!condition.operator) {
+    throw new Error(`filterTree: condition on "${condition.property}" is missing an operator`);
+  }
+  const coerce = coerceValues ? coerceCrmValue : (value) => value;
+  const filter = { propertyName: condition.property, operator: condition.operator };
+  if (!operatorExpectsValue(condition.operator)) return filter;
+  if (operatorExpectsValues(condition.operator)) {
+    const values = Array.isArray(condition.value) ? condition.value : condition.value == null ? [] : [condition.value];
+    filter.values = values.map(coerce);
+    return filter;
+  }
+  filter.value = coerce(condition.value);
+  if (operatorExpectsHighValue(condition.operator)) {
+    filter.highValue = coerce(condition.highValue);
+  }
+  return filter;
+};
+var nodeToDnf = (node, path, options) => {
+  if (isConditionNode(node)) {
+    return [[conditionToCrmFilter(node, options)]];
+  }
+  if (!isGroupNode(node)) {
+    throw new Error(`filterTree: unknown node type "${node == null ? void 0 : node.type}" at [${path.join(", ")}]`);
+  }
+  if (!Array.isArray(node.filters) || node.filters.length === 0) {
+    throw new Error(
+      `filterTree: empty group at [${path.join(", ")}] cannot be converted \u2014 remove it or add a condition (run validateTree first)`
+    );
+  }
+  const childDnfs = node.filters.map((child, index) => nodeToDnf(child, [...path, index], options));
+  if (node.operator === "OR") {
+    return childDnfs.flat();
+  }
+  return childDnfs.reduce(
+    (acc, childDnf) => {
+      const out = [];
+      for (const left of acc) {
+        for (const right of childDnf) out.push([...left, ...right]);
+      }
+      return out;
+    },
+    [[]]
+  );
+};
+var toCrmSearchFilterGroups = (tree, options = {}) => {
+  const {
+    maxGroups = 5,
+    maxFiltersPerGroup = 6,
+    maxTotalFilters = 18,
+    enforceLimits = true,
+    coerceValues = true
+  } = options;
+  if (!isGroupNode(tree)) {
+    throw new Error("filterTree: toCrmSearchFilterGroups expects a group node at the root");
+  }
+  if (!Array.isArray(tree.filters) || tree.filters.length === 0) {
+    return { filterGroups: [] };
+  }
+  const conjunctions = nodeToDnf(tree, [], { coerceValues });
+  if (enforceLimits) {
+    if (conjunctions.length > maxGroups) {
+      throw new Error(
+        `filterTree: tree expands to ${conjunctions.length} filterGroups; HubSpot CRM search allows at most ${maxGroups}. Reduce OR branches (each OR nested under an AND multiplies groups).`
+      );
+    }
+    const oversized = conjunctions.findIndex((filters) => filters.length > maxFiltersPerGroup);
+    if (oversized !== -1) {
+      throw new Error(
+        `filterTree: filterGroup ${oversized} has ${conjunctions[oversized].length} filters; HubSpot CRM search allows at most ${maxFiltersPerGroup} per group.`
+      );
+    }
+    const total = conjunctions.reduce((sum, filters) => sum + filters.length, 0);
+    if (total > maxTotalFilters) {
+      throw new Error(
+        `filterTree: tree expands to ${total} total filters; HubSpot CRM search allows at most ${maxTotalFilters}.`
+      );
+    }
+  }
+  return { filterGroups: conjunctions.map((filters) => ({ filters })) };
+};
+
+// src/filter/FilterBuilder.jsx
+var DEFAULT_LABELS6 = {
+  addFilter: "Add filter",
+  addGroup: "Add filter group",
+  remove: "Remove filter",
+  removeGroup: "Delete group",
+  cloneGroup: "Clone group",
+  group: "Group",
+  and: "AND",
+  or: "OR",
+  property: "Select a property",
+  operator: "Select an operator",
+  value: "Enter a value",
+  values: "Select values",
+  between: "and",
+  empty: "No filters yet.",
+  true: "True",
+  false: "False"
+};
+var GROUP_OPERATOR_OPTIONS = (labels) => [
+  { label: labels.and, value: "AND" },
+  { label: labels.or, value: "OR" }
+];
+var normalizeTree = (tree) => isGroupNode(tree) ? tree : createGroup("AND", []);
+var pathName = (prefix, path, suffix) => `${prefix}-${path.length ? path.join("-") : "root"}-${suffix}`;
+var ValueEditor = ({ condition, propertyDef, path, namePrefix, labels, readOnly, onPatch }) => {
+  const { operator } = condition;
+  if (!operator || !operatorExpectsValue(operator)) return null;
+  const type = (propertyDef == null ? void 0 : propertyDef.type) || "string";
+  const setValue = (value) => onPatch(path, { value });
+  const setHighValue = (highValue) => onPatch(path, { highValue });
+  if (operatorExpectsValues(operator)) {
+    return /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      MultiSelect4,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "value"),
+        placeholder: labels.values,
+        options: (propertyDef == null ? void 0 : propertyDef.options) || [],
+        value: Array.isArray(condition.value) ? condition.value : [],
+        readOnly,
+        onChange: setValue
+      }
+    ));
+  }
+  if (type === "bool") {
+    return /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      Select7,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "value"),
+        placeholder: labels.value,
+        options: [
+          { label: labels.true, value: "true" },
+          { label: labels.false, value: "false" }
+        ],
+        value: condition.value,
+        readOnly,
+        onChange: setValue
+      }
+    ));
+  }
+  if (type === "enum") {
+    return /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      Select7,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "value"),
+        placeholder: labels.value,
+        options: (propertyDef == null ? void 0 : propertyDef.options) || [],
+        value: condition.value,
+        readOnly,
+        onChange: setValue
+      }
+    ));
+  }
+  const isBetween = operatorExpectsHighValue(operator);
+  if (type === "number") {
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      NumberInput3,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "value"),
+        placeholder: labels.value,
+        value: condition.value ?? "",
+        readOnly,
+        onChange: setValue
+      }
+    )), isBetween && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Text8, { variant: "microcopy" }, labels.between), /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      NumberInput3,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "high-value"),
+        placeholder: labels.value,
+        value: condition.highValue ?? "",
+        readOnly,
+        onChange: setHighValue
+      }
+    ))));
+  }
+  if (type === "date" || type === "datetime") {
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      DateInput5,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "value"),
+        format: "medium",
+        value: condition.value ?? null,
+        readOnly,
+        onChange: setValue
+      }
+    )), isBetween && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Text8, { variant: "microcopy" }, labels.between), /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+      DateInput5,
+      {
+        label: "",
+        name: pathName(namePrefix, path, "high-value"),
+        format: "medium",
+        value: condition.highValue ?? null,
+        readOnly,
+        onChange: setHighValue
+      }
+    ))));
+  }
+  return /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+    Input3,
+    {
+      label: "",
+      name: pathName(namePrefix, path, "value"),
+      placeholder: labels.value,
+      value: condition.value ?? "",
+      readOnly,
+      onChange: setValue
+    }
+  ));
+};
+var IconButton = ({ icon, label, onClick, size }) => /* @__PURE__ */ React15.createElement(Button9, { size: "extra-small", variant: "transparent", onClick }, /* @__PURE__ */ React15.createElement(Icon, { name: icon, screenReaderText: label, ...size ? { size } : {} }));
+var ConditionRow = ({
+  condition,
+  path,
+  properties,
+  propertyOptions,
+  namePrefix,
+  labels,
+  operatorLabels,
+  readOnly,
+  onPropertyChange,
+  onOperatorChange,
+  onPatch,
+  onRemove
+}) => {
+  const propertyDef = properties.find((property) => property.name === condition.property);
+  const operatorOptions = getOperatorOptions(propertyDef == null ? void 0 : propertyDef.type, operatorLabels);
+  return /* @__PURE__ */ React15.createElement(Flex10, { direction: "row", gap: "xs", align: "center", wrap: "wrap" }, /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+    Select7,
+    {
+      label: "",
+      name: pathName(namePrefix, path, "property"),
+      placeholder: labels.property,
+      options: propertyOptions,
+      value: condition.property || void 0,
+      readOnly,
+      onChange: (name) => onPropertyChange(path, name)
+    }
+  )), /* @__PURE__ */ React15.createElement(Box7, { flex: 1 }, /* @__PURE__ */ React15.createElement(
+    Select7,
+    {
+      label: "",
+      name: pathName(namePrefix, path, "operator"),
+      placeholder: labels.operator,
+      options: operatorOptions,
+      value: condition.operator || void 0,
+      readOnly: readOnly || !condition.property,
+      onChange: (operator) => onOperatorChange(path, operator)
+    }
+  )), /* @__PURE__ */ React15.createElement(
+    ValueEditor,
+    {
+      condition,
+      propertyDef,
+      path,
+      namePrefix,
+      labels,
+      readOnly,
+      onPatch
+    }
+  ), !readOnly && /* @__PURE__ */ React15.createElement(IconButton, { icon: "remove", label: labels.remove, onClick: () => onRemove(path) }));
+};
+var GroupOperatorSeparator = ({ group, path, namePrefix, labels, readOnly, index, onGroupOperatorChange }) => {
+  if (readOnly) {
+    return /* @__PURE__ */ React15.createElement(Text8, { variant: "microcopy", format: { fontWeight: "demibold" } }, group.operator === "OR" ? labels.or : labels.and);
+  }
+  return /* @__PURE__ */ React15.createElement(Box7, { alignSelf: "start" }, /* @__PURE__ */ React15.createElement(
+    Select7,
+    {
+      label: "",
+      name: pathName(namePrefix, path, `separator-${index}`),
+      variant: "transparent",
+      options: GROUP_OPERATOR_OPTIONS(labels),
+      value: group.operator,
+      onChange: (operator) => onGroupOperatorChange(path, operator)
+    }
+  ));
+};
+var GroupEditor = ({ group, path, depth, ctx }) => {
+  const { labels, maxDepth, readOnly, namePrefix, handlers } = ctx;
+  const isRoot = path.length === 0;
+  const filters = Array.isArray(group.filters) ? group.filters : [];
+  let groupNumber = 0;
+  const children = filters.map((child, index) => {
+    const childPath = [...path, index];
+    if (isGroupNode(child)) groupNumber += 1;
+    const row = isGroupNode(child) ? /* @__PURE__ */ React15.createElement(Tile6, { compact: true }, /* @__PURE__ */ React15.createElement(Flex10, { direction: "column", gap: "xs" }, /* @__PURE__ */ React15.createElement(Flex10, { direction: "row", justify: "between", align: "center" }, /* @__PURE__ */ React15.createElement(Text8, { format: { fontWeight: "demibold" } }, `${labels.group}\xA0${groupNumber}`), !readOnly && /* @__PURE__ */ React15.createElement(Flex10, { direction: "row", gap: "xs", justify: "end" }, /* @__PURE__ */ React15.createElement(
+      IconButton,
+      {
+        icon: "copy",
+        label: labels.cloneGroup,
+        size: "sm",
+        onClick: () => handlers.onDuplicate(childPath)
+      }
+    ), /* @__PURE__ */ React15.createElement(
+      IconButton,
+      {
+        icon: "delete",
+        label: labels.removeGroup,
+        size: "sm",
+        onClick: () => handlers.onRemove(childPath)
+      }
+    ))), /* @__PURE__ */ React15.createElement(GroupEditor, { group: child, path: childPath, depth: depth + 1, ctx }))) : /* @__PURE__ */ React15.createElement(
+      ConditionRow,
+      {
+        condition: child,
+        path: childPath,
+        properties: ctx.properties,
+        propertyOptions: ctx.propertyOptions,
+        namePrefix,
+        labels,
+        operatorLabels: ctx.operatorLabels,
+        readOnly,
+        onPropertyChange: handlers.onPropertyChange,
+        onOperatorChange: handlers.onOperatorChange,
+        onPatch: handlers.onPatch,
+        onRemove: handlers.onRemove
+      }
+    );
+    return /* @__PURE__ */ React15.createElement(React15.Fragment, { key: childPath.join("-") }, index > 0 && /* @__PURE__ */ React15.createElement(
+      GroupOperatorSeparator,
+      {
+        group,
+        path,
+        namePrefix,
+        labels,
+        readOnly,
+        index,
+        onGroupOperatorChange: handlers.onGroupOperatorChange
+      }
+    ), row);
+  });
+  return (
+    // Nested groups pack tight (row / AND-OR / row reads as one unit, like
+    // HubSpot's builder); the root keeps more air between its sections.
+    /* @__PURE__ */ React15.createElement(Flex10, { direction: "column", gap: isRoot ? "sm" : "xs" }, isRoot && filters.length === 0 && /* @__PURE__ */ React15.createElement(Text8, { variant: "microcopy" }, labels.empty), children, !readOnly && /* @__PURE__ */ React15.createElement(Flex10, { direction: "row", gap: "md", align: "center" }, /* @__PURE__ */ React15.createElement(
+      Button9,
+      {
+        size: "extra-small",
+        variant: "transparent",
+        onClick: () => handlers.onAddCondition(path)
+      },
+      /* @__PURE__ */ React15.createElement(Icon, { name: "add" }),
+      " ",
+      labels.addFilter
+    ), depth < maxDepth && /* @__PURE__ */ React15.createElement(
+      Button9,
+      {
+        size: "extra-small",
+        variant: "transparent",
+        onClick: () => handlers.onAddGroup(path)
+      },
+      /* @__PURE__ */ React15.createElement(Icon, { name: "add" }),
+      " ",
+      labels.addGroup
+    )))
+  );
+};
+var FilterBuilder = ({
+  properties = [],
+  value,
+  defaultValue,
+  onChange,
+  maxDepth = 2,
+  labels: labelOverrides,
+  operatorLabels,
+  readOnly = false,
+  namePrefix = "filter-builder",
+  ...rest
+}) => {
+  const labels = useMemo6(() => ({ ...DEFAULT_LABELS6, ...labelOverrides || {} }), [labelOverrides]);
+  const [internalTree, setInternalTree] = useState7(() => normalizeTree(defaultValue));
+  const isControlled = value !== void 0;
+  const tree = isControlled ? normalizeTree(value) : internalTree;
+  const propertyOptions = useMemo6(
+    () => properties.map((property) => ({ label: property.label ?? property.name, value: property.name })),
+    [properties]
+  );
+  const commit = (next) => {
+    if (!isControlled) setInternalTree(next);
+    onChange == null ? void 0 : onChange(next);
+  };
+  const handlers = {
+    onAddCondition: (groupPath) => commit(addFilter(tree, groupPath, createCondition())),
+    onAddGroup: (groupPath) => commit(addFilter(tree, groupPath, createGroup("AND", [createCondition()]))),
+    onRemove: (path) => commit(removeFilter(tree, path, { pruneEmptyGroups: true })),
+    onDuplicate: (path) => commit(duplicateFilter(tree, path)),
+    onGroupOperatorChange: (groupPath, operator) => commit(updateFilter(tree, groupPath, { operator })),
+    onPropertyChange: (path, name) => {
+      const def = properties.find((property) => property.name === name);
+      commit(updateFilter(tree, path, (node) => changeConditionProperty(node, def ?? name)));
+    },
+    onOperatorChange: (path, operator) => commit(updateFilter(tree, path, (node) => changeConditionOperator(node, operator))),
+    onPatch: (path, patch) => commit(updateFilter(tree, path, patch))
+  };
+  const ctx = { properties, propertyOptions, labels, operatorLabels, maxDepth, readOnly, namePrefix, handlers };
+  return /* @__PURE__ */ React15.createElement(Flex10, { direction: "column", gap: "sm", ...rest }, /* @__PURE__ */ React15.createElement(GroupEditor, { group: tree, path: [], depth: 1, ctx }));
+};
 
 // src/common-components/AutoTag.js
-import React15 from "react";
+import React16 from "react";
 import { Tag as Tag6 } from "@hubspot/ui-extensions";
 
 // src/utils/tagVariants.js
@@ -7978,7 +9659,7 @@ var AutoTag = ({
     overrides,
     fallback
   });
-  return React15.createElement(
+  return React16.createElement(
     Tag6,
     { variant: resolvedVariant, ...props },
     displayValue
@@ -7986,8 +9667,8 @@ var AutoTag = ({
 };
 
 // src/common-components/AutoStatusTag.js
-import React16 from "react";
-import { StatusTag as StatusTag3 } from "@hubspot/ui-extensions";
+import React17 from "react";
+import { StatusTag as StatusTag4 } from "@hubspot/ui-extensions";
 var AutoStatusTag = ({
   value,
   status,
@@ -8003,20 +9684,20 @@ var AutoStatusTag = ({
     overrides,
     fallback
   });
-  return React16.createElement(
-    StatusTag3,
+  return React17.createElement(
+    StatusTag4,
     { variant: resolvedVariant, ...props },
     displayValue
   );
 };
 
 // src/common-components/CrmLookupSelect.js
-import React18, { useMemo as useMemo7, useState as useState8 } from "react";
-import { MultiSelect as MultiSelect4, Select as Select7, useDebounce as useDebounce2 } from "@hubspot/ui-extensions";
+import React19, { useMemo as useMemo8, useState as useState9 } from "react";
+import { MultiSelect as MultiSelect5, Select as Select8, useDebounce as useDebounce2 } from "@hubspot/ui-extensions";
 
 // src/utils/crmSearchAdapters.js
-import React17, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo6, useRef as useRef5, useState as useState7 } from "react";
-import { useCrmSearch, Flex as Flex10, Text as Text8 } from "@hubspot/ui-extensions";
+import React18, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef5, useState as useState8 } from "react";
+import { useCrmSearch, Flex as Flex11, Text as Text9 } from "@hubspot/ui-extensions";
 
 // src/utils/objectPath.js
 var getByPath = (obj, path) => {
@@ -8133,9 +9814,9 @@ var useCrmSearchDataSource = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) =>
     error,
     mapResponse
   } = options;
-  const config = useMemo6(() => buildCrmSearchConfig(params, options), [params, options]);
+  const config = useMemo7(() => buildCrmSearchConfig(params, options), [params, options]);
   const response = useCrmSearch(config, format);
-  return useMemo6(() => {
+  return useMemo7(() => {
     var _a;
     const rows = mapResponse ? mapResponse(response) : normalizeCrmSearchRows(response, { idField: rowIdField, ...row || EMPTY_OBJECT });
     const resolvedTotal = typeof totalCount === "function" ? totalCount(response) : totalCount ?? pickTotal(response, rows.length);
@@ -8173,7 +9854,7 @@ var crmSearchResultToOption = (row, options = EMPTY_OBJECT) => {
 var useCrmSearchOptions = (params = EMPTY_OBJECT, options = EMPTY_OBJECT) => {
   const dataSource = useCrmSearchDataSource(params, options);
   const optionConfig = options.option || options;
-  return useMemo6(() => ({
+  return useMemo7(() => ({
     ...dataSource,
     options: dataSource.rows.map((row) => crmSearchResultToOption(row, optionConfig))
   }), [dataSource, optionConfig]);
@@ -8302,29 +9983,29 @@ var CrmDataTable = ({
   ...props
 }) => {
   var _a, _b;
-  const [params, setParams] = useState7({ search: "", filters: {}, sort: null });
-  const resolvedProperties = useMemo6(() => properties, [properties]);
-  const resolvedColumns = useMemo6(
+  const [params, setParams] = useState8({ search: "", filters: {}, sort: null });
+  const resolvedProperties = useMemo7(() => properties, [properties]);
+  const resolvedColumns = useMemo7(
     () => columns || inferCrmColumns(resolvedProperties),
     [columns, resolvedProperties]
   );
   const resolvedSearchFields = searchFields || resolvedProperties;
-  const autoFilterFields = useMemo6(
+  const autoFilterFields = useMemo7(
     () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
     [autoFilters, resolvedProperties]
   );
   const autoFilterLabelsRef = useRef5({});
-  const defaultPropertyMap = useMemo6(
+  const defaultPropertyMap = useMemo7(
     () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
     [resolvedProperties]
   );
   const effectivePropertyMap = propertyMap || defaultPropertyMap;
-  const resolvedSortMap = useMemo6(
+  const resolvedSortMap = useMemo7(
     () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
     [sortMap, effectivePropertyMap]
   );
   const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
-  const dataSourceOptions = useMemo6(
+  const dataSourceOptions = useMemo7(
     () => ({
       objectType: resolveCrmObjectType(objectType),
       properties: resolvedProperties,
@@ -8338,15 +10019,15 @@ var CrmDataTable = ({
     }),
     [objectType, resolvedProperties, pageLength, format, filterMap, effectivePropertyMap, resolvedSortMap, rowIdField, resolvedMapRecord]
   );
-  const [serverQuerying, setServerQuerying] = useState7(!!serverSide);
+  const [serverQuerying, setServerQuerying] = useState8(!!serverSide);
   const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
   const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
-  const queryKey = useMemo6(
+  const queryKey = useMemo7(
     () => stableStringify({ effectiveParams, objectType, properties: resolvedProperties, pageLength }),
     [effectiveParams, objectType, resolvedProperties, pageLength]
   );
-  const [accumulatedRows, setAccumulatedRows] = useState7(EMPTY_ARRAY);
-  const [requestedPage, setRequestedPage] = useState7(1);
+  const [accumulatedRows, setAccumulatedRows] = useState8(EMPTY_ARRAY);
+  const [requestedPage, setRequestedPage] = useState8(1);
   const lastQueryKeyRef = useRef5(queryKey);
   const loadedRows = accumulatedRows.length ? accumulatedRows : dataSource.data;
   useEffect7(() => {
@@ -8375,7 +10056,7 @@ var CrmDataTable = ({
   useEffect7(() => {
     ensurePageLoaded(requestedPage);
   }, [requestedPage, ensurePageLoaded]);
-  const generatedFilters = useMemo6(
+  const generatedFilters = useMemo7(
     () => buildAutoFiltersFromRows({
       rows: loadedRows,
       fields: autoFilterFields,
@@ -8385,7 +10066,7 @@ var CrmDataTable = ({
     [loadedRows, autoFilterFields, autoFilterMaxOptions]
   );
   const resolvedFilters = filters || generatedFilters;
-  const table = React17.createElement(DataTable, {
+  const table = React18.createElement(DataTable, {
     title: title || `${prettifyPropertyName(objectType)} records`,
     data: loadedRows,
     loading: dataSource.loading || ((_b = dataSource.response) == null ? void 0 : _b.isRefetching),
@@ -8409,11 +10090,11 @@ var CrmDataTable = ({
   const total = dataSource.totalCount;
   const capped = typeof total === "number" && total > loadedRows.length;
   if (!capped) return table;
-  return React17.createElement(
-    Flex10,
+  return React18.createElement(
+    Flex11,
     { direction: "column", gap: "xs" },
-    React17.createElement(
-      Text8,
+    React18.createElement(
+      Text9,
       { 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.`
     ),
@@ -8447,25 +10128,25 @@ var CrmKanban = ({
   ...props
 }) => {
   var _a, _b;
-  const [params, setParams] = useState7(EMPTY_CRM_PARAMS);
-  const resolvedProperties = useMemo6(() => properties, [properties]);
+  const [params, setParams] = useState8(EMPTY_CRM_PARAMS);
+  const resolvedProperties = useMemo7(() => properties, [properties]);
   const resolvedSearchFields = searchFields || resolvedProperties;
-  const autoFilterFields = useMemo6(
+  const autoFilterFields = useMemo7(
     () => normalizeAutoFilterFields(autoFilters, resolvedProperties),
     [autoFilters, resolvedProperties]
   );
   const autoFilterLabelsRef = useRef5({});
-  const defaultPropertyMap = useMemo6(
+  const defaultPropertyMap = useMemo7(
     () => Object.fromEntries(resolvedProperties.map((property) => [property, property])),
     [resolvedProperties]
   );
   const effectivePropertyMap = propertyMap || defaultPropertyMap;
-  const resolvedSortMap = useMemo6(
+  const resolvedSortMap = useMemo7(
     () => sortMap || ((sort) => crmSortsFromState(sort, effectivePropertyMap)),
     [sortMap, effectivePropertyMap]
   );
   const resolvedMapRecord = mapRecord || defaultCrmMapRecord;
-  const dataSourceOptions = useMemo6(
+  const dataSourceOptions = useMemo7(
     () => ({
       objectType: resolveCrmObjectType(objectType),
       properties: resolvedProperties,
@@ -8479,14 +10160,14 @@ var CrmKanban = ({
     }),
     [objectType, resolvedProperties, pageLength, format, filterMap, effectivePropertyMap, resolvedSortMap, rowIdField, resolvedMapRecord]
   );
-  const [serverQuerying, setServerQuerying] = useState7(!!serverSide);
+  const [serverQuerying, setServerQuerying] = useState8(!!serverSide);
   const effectiveParams = serverQuerying ? params : EMPTY_CRM_PARAMS;
   const dataSource = useCrmSearchDataSource(effectiveParams, dataSourceOptions);
-  const queryKey = useMemo6(
+  const queryKey = useMemo7(
     () => stableStringify({ effectiveParams, objectType, properties: resolvedProperties, pageLength }),
     [effectiveParams, objectType, resolvedProperties, pageLength]
   );
-  const [accumulatedRows, setAccumulatedRows] = useState7(EMPTY_ARRAY);
+  const [accumulatedRows, setAccumulatedRows] = useState8(EMPTY_ARRAY);
   const lastQueryKeyRef = useRef5(queryKey);
   const loadedRows = accumulatedRows.length ? accumulatedRows : dataSource.data;
   useEffect7(() => {
@@ -8513,7 +10194,7 @@ var CrmKanban = ({
     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 = useMemo6(
+  const generatedFilters = useMemo7(
     () => buildAutoFiltersFromRows({
       rows: loadedRows,
       fields: autoFilterFields,
@@ -8523,7 +10204,7 @@ var CrmKanban = ({
     [loadedRows, autoFilterFields, autoFilterMaxOptions]
   );
   const resolvedFilters = filters || generatedFilters;
-  const resolvedStages = useMemo6(() => {
+  const resolvedStages = useMemo7(() => {
     if (stages) return stages;
     const seen = [];
     for (const row of loadedRows) {
@@ -8535,7 +10216,7 @@ var CrmKanban = ({
       label: typeof stageLabels === "function" ? stageLabels(value) : stageLabels && stageLabels[value] || prettifyPropertyName(String(value))
     }));
   }, [stages, stageLabels, loadedRows, groupBy]);
-  const resolvedStageMeta = useMemo6(() => {
+  const resolvedStageMeta = useMemo7(() => {
     if (stageMeta || !dataSource.hasMore) return stageMeta;
     return Object.fromEntries(resolvedStages.map((stage) => {
       var _a2;
@@ -8549,7 +10230,7 @@ var CrmKanban = ({
       ];
     }));
   }, [stageMeta, dataSource.hasMore, dataSource.loading, dataSource.response, dataSource.totalCount, resolvedStages]);
-  const board = React17.createElement(Kanban, {
+  const board = React18.createElement(Kanban, {
     title: title || `${prettifyPropertyName(objectType)} board`,
     data: loadedRows,
     loading: dataSource.loading || ((_b = dataSource.response) == null ? void 0 : _b.isRefetching),
@@ -8572,17 +10253,19 @@ var CrmKanban = ({
   const total = dataSource.totalCount;
   const capped = typeof total === "number" && total > loadedRows.length;
   if (!capped) return board;
-  return React17.createElement(
-    Flex10,
+  return React18.createElement(
+    Flex11,
     { direction: "column", gap: "xs" },
-    React17.createElement(
-      Text8,
+    React18.createElement(
+      Text9,
       { 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 = [];
@@ -8635,12 +10318,12 @@ var CrmLookupSelect = ({
   loadingOption,
   selectProps = EMPTY_OBJECT2
 }) => {
-  const [inputValue, setInputValue] = useState8(query || "");
-  const [pickedOptions, setPickedOptions] = useState8(EMPTY_ARRAY2);
+  const [inputValue, setInputValue] = useState9(query || "");
+  const [pickedOptions, setPickedOptions] = useState9(EMPTY_ARRAY2);
   const debouncedInput = useDebounce2(inputValue, debounce > 0 ? debounce : 1);
   const search = debounce > 0 ? debouncedInput : inputValue;
   const effectiveSearch = search && search.length >= minSearchLength ? search : "";
-  const optionConfig = useMemo7(
+  const optionConfig = useMemo8(
     () => makeOptionConfig({ option, labelProperty, valueProperty, descriptionProperty }),
     [option, labelProperty, valueProperty, descriptionProperty]
   );
@@ -8658,7 +10341,7 @@ var CrmLookupSelect = ({
   );
   const isSearching = dataSource.loading || inputValue.trim() !== (search || "").trim();
   const hasQuery = effectiveSearch.length > 0;
-  const options = useMemo7(() => {
+  const options = useMemo8(() => {
     const remembered = [...selectedOptions || EMPTY_ARRAY2, ...pickedOptions];
     const baseOptions = mergeSelectedOptions(dataSource.options || EMPTY_ARRAY2, remembered, value);
     if (isSearching && loadingOption) return [loadingOption, ...baseOptions];
@@ -8697,7 +10380,281 @@ var CrmLookupSelect = ({
     },
     ...selectProps
   };
-  return React18.createElement(multiple ? MultiSelect4 : Select7, commonProps);
+  return React19.createElement(multiple ? MultiSelect5 : Select8, commonProps);
+};
+
+// src/common-components/CrmRecordPicker.js
+import React20, { useMemo as useMemo9, useRef as useRef6, useState as useState10 } from "react";
+import { Flex as Flex12, MultiSelect as MultiSelect6, SearchInput as SearchInput2, Select as Select9, 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] = useState10(defaultValue);
+  const effectiveValue = isControlled ? value : internalValue;
+  const selection = useMemo9(() => normalizeRecordSelection(effectiveValue), [effectiveValue]);
+  const [inputValue, setInputValue] = useState10("");
+  const [seenRecords, setSeenRecords] = useState10(EMPTY_ARRAY4);
+  const [createPending, setCreatePending] = useState10(false);
+  const [createError, setCreateError] = useState10(null);
+  const createPendingRef = useRef6(false);
+  const debouncedInput = useDebounce3(inputValue, debounce > 0 ? debounce : 1);
+  const search = debounce > 0 ? debouncedInput : inputValue;
+  const effectiveSearch = search && search.length >= minSearchLength ? search : "";
+  const optionConfig = useMemo9(
+    () => ({ labelField, descriptionField, fallbackLabel }),
+    [labelField, descriptionField, fallbackLabel]
+  );
+  const searchParams = useMemo9(() => ({ search: effectiveSearch }), [effectiveSearch]);
+  const dataSourceOptions = useMemo9(
+    () => ({
+      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 = useMemo9(() => {
+    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 = useMemo9(
+    () => 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 = useMemo9(() => {
+    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 React20.createElement(Select9, { ...commonProps, onInput: handleSearchInput });
+  }
+  return React20.createElement(
+    Flex12,
+    { direction: "column", gap: "xs" },
+    React20.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
+    }),
+    React20.createElement(MultiSelect6, commonProps)
+  );
 };
 
 // src/common-components/datePresets.js
@@ -8722,12 +10679,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 React21, { useState as useState11 } from "react";
+import {
+  AutoGrid as AutoGrid4,
+  Box as Box8,
+  DateInput as DateInput6,
+  Flex as Flex13,
+  Link as Link7,
+  NumberInput as NumberInput4,
+  Select as Select10,
+  Text as Text10
+} from "@hubspot/ui-extensions";
+var h6 = React21.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] = useState11(
+    () => normalizeValue(defaultValue ?? { operator: defaultOperator })
+  );
+  const [internalField, setInternalField] = useState11(
+    () => {
+      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] = useState11(null);
+  const [lastPreset, setLastPreset] = useState11({
+    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(Select10, {
+    key: "operator",
+    name: `${name}-operator`,
+    label: COMPACT_LABEL,
+    options: operatorOptions,
+    value: currentOperator,
+    onChange: handleOperatorChange,
+    readOnly
+  }) : null;
+  const fieldSelect = showFieldSelect ? h6(Select10, {
+    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(DateInput6, {
+        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(Text10, { key: "to" }, "to"),
+      h6(DateInput6, {
+        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(DateInput6, {
+      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(NumberInput4, {
+        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(Select10, {
+        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(Select10, {
+      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(Link7, { key: "clear", onClick: handleClear }, clearLabel) : null
+  ];
+  const children = [operatorSelect, ...valueChildren];
+  if (fieldSelect) {
+    const rowChildren = [
+      h6(Box8, { key: "field-box", flex: "auto", alignSelf: "stretch" }, fieldSelect),
+      operatorSelect ? h6(Box8, { key: "operator-box", flex: "auto", alignSelf: "stretch" }, operatorSelect) : null,
+      ...valueChildren.map(
+        (child, index) => (child == null ? void 0 : child.type) === Text10 || (child == null ? void 0 : child.type) === Link7 ? child : h6(Box8, { key: `value-box-${index}`, flex: "auto", alignSelf: "stretch" }, child)
+      )
+    ].filter(Boolean);
+    const fieldControl = h6(
+      AutoGrid4,
+      {
+        columnWidth: gridColumnWidth,
+        flexible: true,
+        gap: gap ?? "xs"
+      },
+      ...rowChildren
+    );
+    if (!label) return fieldControl;
+    return h6(
+      Flex13,
+      { direction: "column", gap: "xs" },
+      h6(Text10, { format: { fontWeight: "demibold" } }, label),
+      fieldControl
+    );
+  }
+  const control = h6(
+    Flex13,
+    {
+      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(
+    Flex13,
+    { direction: "column", gap: "xs" },
+    h6(Text10, { format: { fontWeight: "demibold" } }, label),
+    control
+  );
+};
+
 // src/common-components/KeyValueList.js
-import React19 from "react";
-import { DescriptionList as DescriptionList3, DescriptionListItem as DescriptionListItem3, Flex as Flex11 } from "@hubspot/ui-extensions";
+import React22 from "react";
+import { DescriptionList as DescriptionList3, DescriptionListItem as DescriptionListItem3, Flex as Flex14 } from "@hubspot/ui-extensions";
 var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
   const rows = items.map(
-    (item, index) => React19.createElement(
+    (item, index) => React22.createElement(
       DescriptionListItem3,
       {
         key: item.key ?? item.label ?? `kv-${index}`,
@@ -8736,16 +11161,17 @@ var KeyValueList = ({ items = [], direction = "row", gap = "sm" }) => {
       item.value
     )
   );
-  return React19.createElement(
-    Flex11,
+  return React22.createElement(
+    Flex14,
     { direction: "column", gap },
-    React19.createElement(DescriptionList3, { direction }, ...rows)
+    React22.createElement(DescriptionList3, { direction }, ...rows)
   );
 };
+KeyValueList.displayName = "KeyValueList";
 
 // src/common-components/SectionHeader.js
-import React20 from "react";
-import { Flex as Flex12, Heading as Heading2, Text as Text9 } from "@hubspot/ui-extensions";
+import React23 from "react";
+import { Flex as Flex15, Heading as Heading2, Text as Text11 } from "@hubspot/ui-extensions";
 var SectionHeader = ({
   title,
   description,
@@ -8756,12 +11182,12 @@ var SectionHeader = ({
 }) => {
   const body = [];
   if (title != null) {
-    body.push(React20.createElement(Heading2, { key: "title", as: titleAs }, title));
+    body.push(React23.createElement(Heading2, { key: "title", as: titleAs }, title));
   }
   if (description != null) {
     body.push(
-      React20.createElement(
-        Text9,
+      React23.createElement(
+        Text11,
         { key: "description", variant: "microcopy" },
         description
       )
@@ -8770,10 +11196,10 @@ var SectionHeader = ({
   if (children != null) {
     body.push(children);
   }
-  const content = React20.createElement(Flex12, { direction: "column", gap }, ...body);
+  const content = React23.createElement(Flex15, { direction: "column", gap }, ...body);
   if (actions == null) return content;
-  return React20.createElement(
-    Flex12,
+  return React23.createElement(
+    Flex15,
     { direction: "row", justify: "between", align: "start", gap: "sm" },
     content,
     actions
@@ -8781,8 +11207,8 @@ var SectionHeader = ({
 };
 
 // src/common-components/Spinner.js
-import React21, { useEffect as useEffect8, useRef as useRef6, useState as useState9 } from "react";
-import { Text as Text10 } from "@hubspot/ui-extensions";
+import React24, { useEffect as useEffect8, useRef as useRef7, useState as useState12 } from "react";
+import { Text as Text12 } from "@hubspot/ui-extensions";
 
 // src/common-components/spinners.js
 var BRAILLE_DOT_MAP = [
@@ -9122,8 +11548,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] = useState9(0);
-  const indexRef = useRef6(0);
+  const [index, setIndex] = useState12(0);
+  const indexRef = useRef7(0);
   indexRef.current = index;
   useEffect8(() => {
     if (paused || resolvedFrames.length <= 1) return void 0;
@@ -9140,10 +11566,10 @@ var Spinner = ({
   const frame = resolvedFrames[index % resolvedFrames.length];
   const suffix = children != null ? children : label;
   if (suffix == null || suffix === "") {
-    return React21.createElement(Text10, rest, frame);
+    return React24.createElement(Text12, rest, frame);
   }
-  return React21.createElement(
-    Text10,
+  return React24.createElement(
+    Text12,
     rest,
     frame,
     gap,
@@ -9151,6 +11577,378 @@ var Spinner = ({
   );
 };
 
+// src/safe/catalogs.js
+var ICON_NAME_ALIASES2 = {
+  alert: "warning",
+  // "alert" is a color, not an icon
+  check: "success",
+  checkmark: "success",
+  danger: "xCircle",
+  // "danger" is a StatusTag variant
+  duplicate: "copy",
+  error: "xCircle",
+  // "error" is a Tag variant, not an icon
+  trash: "delete",
+  pencil: "edit",
+  arrowLeft: "left",
+  arrowRight: "right",
+  arrowUp: "upCarat",
+  arrowDown: "downCarat",
+  cog: "settings",
+  gear: "settings",
+  close: "xCircle",
+  plus: "add",
+  minus: "remove",
+  ok: "success"
+};
+var EMPTY_STATE_IMAGES = /* @__PURE__ */ new Set([
+  "addOnReporting",
+  "announcement",
+  "api",
+  "automatedTesting",
+  "beta",
+  "building",
+  "callingSetUp",
+  "companies",
+  "components",
+  "cone",
+  "contacts",
+  "contentStrategy",
+  "customObjects",
+  "customerExperience",
+  "customerSupport",
+  "deals",
+  "developerSecurityUpdate",
+  "electronicSignature",
+  "electronicSignatureEmptyState",
+  "emailConfirmation",
+  "emptyStateCharts",
+  "idea",
+  "integrations",
+  "leads",
+  "lock",
+  "missedGoal",
+  "multipleObjects",
+  "object",
+  "productsShoppingCart",
+  "registration",
+  "sandboxAddOn",
+  "social",
+  "store",
+  "storeDisabled",
+  "successfullyConnectedEmail",
+  "target",
+  "task",
+  "voteAndSearch",
+  "meetings",
+  "tickets"
+]);
+var EMPTY_STATE_IMAGE_ALIASES = {
+  "new-project": "components",
+  newProject: "components",
+  empty: "components",
+  default: "components"
+};
+var TREND_DIRECTIONS = /* @__PURE__ */ new Set(["increase", "decrease"]);
+var TREND_DIRECTION_ALIASES = {
+  increasing: "increase",
+  decreasing: "decrease",
+  up: "increase",
+  down: "decrease",
+  positive: "increase",
+  negative: "decrease"
+};
+var SAFE_ARRAY_PROPS = {
+  // native @hubspot/ui-extensions
+  Select: ["options"],
+  MultiSelect: ["options"],
+  ToggleGroup: ["options"],
+  StepIndicator: ["stepNames"],
+  // hs-uix
+  DataTable: ["data", "columns", "searchFields", "filters", "selectionActions"],
+  Kanban: ["data", "stages"],
+  FormBuilder: ["fields"],
+  AvatarStack: ["items"],
+  KeyValueList: ["items"],
+  Feed: ["items", "fields"],
+  Calendar: ["events"],
+  CrmKanban: ["cardFields"]
+};
+var SAFE_DERIVE_PROPS = {
+  CrmDataTable: ["columns"],
+  CrmKanban: ["stages"]
+};
+
+// src/safe/warnings.js
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message) {
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(message);
+}
+function resetSafeWarnings() {
+  warned.clear();
+}
+
+// src/safe/withSafeArrayProps.js
+import React25 from "react";
+var arrayProp = (value, componentName, propName) => {
+  if (Array.isArray(value)) return value;
+  if (value == null) return [];
+  warnOnce(
+    `${componentName}-${propName}-not-array`,
+    `[hs-uix/safe] ${componentName}.${propName} must be an array \u2014 received ${typeof value}; using [].`
+  );
+  return [];
+};
+function withSafeArrayProps(Component, componentName, propNames, derivePropNames = []) {
+  if (!Component) return void 0;
+  const SafeComponent = React25.forwardRef((props, ref) => {
+    const next = { ...props || {} };
+    for (const propName of propNames) {
+      next[propName] = arrayProp(next[propName], componentName, propName);
+    }
+    for (const propName of derivePropNames) {
+      const value = next[propName];
+      if (value == null || Array.isArray(value)) continue;
+      warnOnce(
+        `${componentName}-${propName}-not-array`,
+        `[hs-uix/safe] ${componentName}.${propName} must be an array \u2014 received ${typeof value}; omitting it so ${componentName} derives it automatically.`
+      );
+      delete next[propName];
+    }
+    return React25.createElement(Component, ref != null ? { ...next, ref } : next);
+  });
+  SafeComponent.displayName = `Safe${componentName}`;
+  return SafeComponent;
+}
+
+// src/safe/SafeIcon.js
+import React26 from "react";
+import { Icon as Icon2 } from "@hubspot/ui-extensions";
+var SafeIcon = (props) => {
+  const { name, ...rest } = props || {};
+  if (typeof name === "string" && NATIVE_ICON_NAMES.has(name)) {
+    return React26.createElement(Icon2, { name, ...rest });
+  }
+  const alias = ICON_NAME_ALIASES2[name];
+  if (alias && NATIVE_ICON_NAMES.has(alias)) {
+    warnOnce(
+      `icon-alias-${name}`,
+      `[hs-uix/safe] Icon name "${name}" is not in the catalog \u2014 auto-repaired to "${alias}".`
+    );
+    return React26.createElement(Icon2, { name: alias, ...rest });
+  }
+  warnOnce(
+    `icon-invalid-${name}`,
+    `[hs-uix/safe] Icon name "${name}" is not in the catalog. Rendering a red xCircle placeholder. See NATIVE_ICON_NAMES for the valid list.`
+  );
+  return React26.createElement(Icon2, {
+    ...rest,
+    name: "xCircle",
+    color: "alert",
+    screenReaderText: `Invalid icon: ${name ?? "(missing)"}`
+  });
+};
+SafeIcon.displayName = "SafeIcon";
+
+// src/safe/SafeEmptyState.js
+import React27 from "react";
+import { EmptyState as EmptyState5 } from "@hubspot/ui-extensions";
+var SafeEmptyState = (props) => {
+  const { imageName, ...rest } = props || {};
+  if (imageName == null || EMPTY_STATE_IMAGES.has(imageName)) {
+    return React27.createElement(EmptyState5, { imageName, ...rest });
+  }
+  const alias = EMPTY_STATE_IMAGE_ALIASES[imageName];
+  const fallback = alias && EMPTY_STATE_IMAGES.has(alias) ? alias : "components";
+  warnOnce(
+    `emptystate-image-${imageName}`,
+    `[hs-uix/safe] EmptyState imageName "${imageName}" is not valid \u2014 using "${fallback}". See EMPTY_STATE_IMAGES for the valid list.`
+  );
+  return React27.createElement(EmptyState5, { imageName: fallback, ...rest });
+};
+SafeEmptyState.displayName = "SafeEmptyState";
+
+// src/safe/SafeStatisticsTrend.js
+import React28 from "react";
+import { StatisticsTrend as StatisticsTrend2 } from "@hubspot/ui-extensions";
+var SafeStatisticsTrend = (props) => {
+  const { direction, ...rest } = props || {};
+  if (typeof direction !== "string" || TREND_DIRECTIONS.has(direction)) {
+    return React28.createElement(StatisticsTrend2, { direction, ...rest });
+  }
+  const alias = TREND_DIRECTION_ALIASES[direction];
+  if (alias && TREND_DIRECTIONS.has(alias)) {
+    warnOnce(
+      `trend-alias-${direction}`,
+      `[hs-uix/safe] StatisticsTrend direction "${direction}" \u2192 "${alias}". Valid values: increase, decrease.`
+    );
+    return React28.createElement(StatisticsTrend2, { direction: alias, ...rest });
+  }
+  warnOnce(
+    `trend-invalid-${direction}`,
+    `[hs-uix/safe] StatisticsTrend direction "${direction}" is not valid \u2014 defaulting to "increase".`
+  );
+  return React28.createElement(StatisticsTrend2, { ...rest, direction: "increase" });
+};
+SafeStatisticsTrend.displayName = "SafeStatisticsTrend";
+
+// src/safe/SafePopover.js
+import React29 from "react";
+import { Tile as Tile7 } from "@hubspot/ui-extensions";
+import { Popover as Popover2 } from "@hubspot/ui-extensions/experimental";
+var SafePopover = (props) => {
+  const { children, ...rest } = props || {};
+  return React29.createElement(
+    Popover2,
+    rest,
+    React29.createElement(Tile7, { compact: true }, children)
+  );
+};
+SafePopover.displayName = "SafePopover";
+
+// src/safe/safeComponents.js
+import { MultiSelect as MultiSelect7, Select as Select11, StepIndicator as StepIndicator2, ToggleGroup as ToggleGroup2 } from "@hubspot/ui-extensions";
+var wrap = (Component, name) => withSafeArrayProps(Component, name, SAFE_ARRAY_PROPS[name] ?? [], SAFE_DERIVE_PROPS[name] ?? []);
+var SafeSelect = wrap(Select11, "Select");
+var SafeMultiSelect = wrap(MultiSelect7, "MultiSelect");
+var SafeToggleGroup = wrap(ToggleGroup2, "ToggleGroup");
+var SafeStepIndicator = wrap(StepIndicator2, "StepIndicator");
+var SafeDataTable = wrap(DataTable, "DataTable");
+var SafeKanban = wrap(Kanban, "Kanban");
+var SafeFormBuilder = wrap(FormBuilder, "FormBuilder");
+var SafeAvatarStack = wrap(AvatarStack, "AvatarStack");
+var SafeKeyValueList = wrap(KeyValueList, "KeyValueList");
+var SafeFeed = wrap(Feed, "Feed");
+var SafeCalendar = wrap(Calendar, "Calendar");
+var SafeCrmDataTable = wrap(CrmDataTable, "CrmDataTable");
+var SafeCrmKanban = wrap(CrmKanban, "CrmKanban");
+
+// src/utils/applyPatches.js
+function applyPatches(doc, patches) {
+  if (!patches || patches.length === 0) return doc;
+  let out = doc ?? {};
+  for (const op of patches) {
+    out = applyOne(out, op);
+  }
+  return out;
+}
+function applyOne(doc, op) {
+  const path = parsePointer(op.path);
+  switch (op.op) {
+    case "add":
+      return setAt(doc, path, op.value, true);
+    case "replace":
+      return setAt(doc, path, op.value, false);
+    case "remove":
+      return removeAt(doc, path);
+    case "move": {
+      const from = parsePointer(op.from);
+      const value = getAt(doc, from);
+      const removed = removeAt(doc, from);
+      return setAt(removed, path, value, true);
+    }
+    case "copy": {
+      const from = parsePointer(op.from);
+      const value = getAt(doc, from);
+      return setAt(doc, path, deepClone2(value), true);
+    }
+    default:
+      console.warn("[hs-uix] applyPatches: ignoring unsupported op:", op.op);
+      return doc;
+  }
+}
+function parsePointer(pointer) {
+  if (!pointer || pointer === "/") return [];
+  if (pointer[0] !== "/") {
+    throw new Error(`invalid JSON Pointer (must start with /): ${pointer}`);
+  }
+  return pointer.slice(1).split("/").map((seg) => seg.replace(/~1/g, "/").replace(/~0/g, "~"));
+}
+function getAt(obj, segs) {
+  let cur = obj;
+  for (const seg of segs) {
+    if (cur == null) return void 0;
+    if (Array.isArray(cur)) {
+      cur = cur[Number(seg)];
+    } else if (typeof cur === "object") {
+      cur = Object.prototype.hasOwnProperty.call(cur, seg) ? cur[seg] : void 0;
+    } else {
+      return void 0;
+    }
+  }
+  return cur;
+}
+function setAt(obj, segs, value, insert) {
+  if (segs.length === 0) return value;
+  const [head, ...rest] = segs;
+  if (Array.isArray(obj)) {
+    const next = obj.slice();
+    const idx = head === "-" ? next.length : Number(head);
+    if (rest.length === 0) {
+      if (head === "-") {
+        next.push(value);
+      } else if (insert && Number.isInteger(idx) && idx >= 0 && idx <= next.length) {
+        next.splice(idx, 0, value);
+      } else {
+        next[idx] = value;
+      }
+      return next;
+    }
+    const existing2 = idx >= 0 && idx < next.length ? next[idx] : void 0;
+    next[idx] = setAt(
+      existing2 ?? (looksLikeArrayIndex(rest[0]) ? [] : {}),
+      rest,
+      value,
+      insert
+    );
+    return next;
+  }
+  const base = obj && typeof obj === "object" ? obj : {};
+  if (rest.length === 0) {
+    return { ...base, [head]: value };
+  }
+  const existing = base[head];
+  const child = setAt(
+    existing ?? (looksLikeArrayIndex(rest[0]) ? [] : {}),
+    rest,
+    value,
+    insert
+  );
+  return { ...base, [head]: child };
+}
+function removeAt(obj, segs) {
+  if (segs.length === 0) return void 0;
+  const [head, ...rest] = segs;
+  if (Array.isArray(obj)) {
+    const idx = Number(head);
+    if (!Number.isInteger(idx) || idx < 0 || idx >= obj.length) return obj;
+    const next = obj.slice();
+    if (rest.length === 0) {
+      next.splice(idx, 1);
+    } else {
+      next[idx] = removeAt(next[idx], rest);
+    }
+    return next;
+  }
+  if (!obj || typeof obj !== "object") return obj;
+  if (rest.length === 0) {
+    const next = { ...obj };
+    delete next[head];
+    return next;
+  }
+  if (!(head in obj)) return obj;
+  return { ...obj, [head]: removeAt(obj[head], rest) };
+}
+function looksLikeArrayIndex(seg) {
+  return seg === "-" || /^\d+$/.test(seg);
+}
+function deepClone2(v) {
+  const json = v === void 0 ? void 0 : JSON.stringify(v);
+  return json === void 0 ? void 0 : JSON.parse(json);
+}
+
 // src/utils/collections.js
 var sumBy = (items, keyOrFn) => (items || []).reduce((total, item) => {
   const value = typeof keyOrFn === "function" ? keyOrFn(item) : item == null ? void 0 : item[keyOrFn];
@@ -9238,9 +12036,19 @@ export {
   CrmDataTable,
   CrmKanban,
   CrmLookupSelect,
+  CrmRecordPicker,
+  DATE_FILTER_OPERATORS,
+  DATE_RANGE_CUSTOM_VALUE,
+  DATE_ROLLING_UNIT_OPTIONS,
+  DEFAULT_FEED_TYPE_PRESETS,
   DEFAULT_SVG_FONT_WEIGHT,
   DataTable,
+  DateRangePicker,
+  EMPTY_STATE_IMAGES,
+  EMPTY_STATE_IMAGE_ALIASES,
+  FILTER_OPERATORS,
   Feed,
+  FilterBuilder,
   FormBuilder,
   HS_DATE_DIRECTION_LABELS,
   HS_DATE_PRESETS,
@@ -9259,21 +12067,61 @@ export {
   HS_TEXT_COLOR,
   ICONS,
   ICON_NAMES,
+  ICON_NAME_ALIASES2 as ICON_NAME_ALIASES,
   Icon,
   Kanban,
   KanbanCardActions,
   KeyValueList,
+  NATIVE_ICON_NAMES,
   NATIVE_ICON_NAME_LIST,
+  SAFE_ARRAY_PROPS,
+  SAFE_DERIVE_PROPS,
+  SKELETON_FILL,
   SPINNERS,
   SPINNER_NAMES,
+  SafeAvatarStack,
+  SafeCalendar,
+  SafeCrmDataTable,
+  SafeCrmKanban,
+  SafeDataTable,
+  SafeEmptyState,
+  SafeFeed,
+  SafeFormBuilder,
+  SafeIcon,
+  SafeKanban,
+  SafeKeyValueList,
+  SafeMultiSelect,
+  SafePopover,
+  SafeSelect,
+  SafeStatisticsTrend,
+  SafeStepIndicator,
+  SafeToggleGroup,
   SectionHeader,
   Spinner,
   StyledText,
+  TREND_DIRECTIONS,
+  TREND_DIRECTION_ALIASES,
+  UNASSIGNED_LANE_KEY,
+  addFilter,
+  applyPatches,
+  applyTypePreset,
   buildCrmSearchConfig,
   buildOptions,
+  changeConditionOperator,
+  changeConditionProperty,
+  compareHsDateValues,
+  computeStageCounts,
+  conditionToCrmFilter,
+  countConditions,
+  createCondition,
+  createGroup,
   createStatusTagSortComparator,
   crmSearchResultToOption,
+  evaluateWip,
+  fieldsFromHubSpotProperties,
+  findNewlyExceededWip,
   findOptionLabel2 as findOptionLabel,
+  flushBuffer,
   formatCurrency,
   formatCurrencyCompact,
   formatDate,
@@ -9281,7 +12129,14 @@ export {
   formatPercentage,
   getAutoStatusTagVariant,
   getAutoTagVariant,
+  getLaneKey,
+  getNodeAtPath,
+  getOperatorOptions,
   gridToBraille,
+  isConditionNode,
+  isGroupNode,
+  isValidDateRange,
+  lookupTypePreset,
   makeAvatarStackDataUri,
   makeCrmSearchMultiSelectField,
   makeCrmSearchSelectField,
@@ -9290,10 +12145,28 @@ export {
   makeStyledTextDataUri,
   normalizeCrmSearchRecord,
   normalizeCrmSearchRows,
+  operatorExpectsHighValue,
+  operatorExpectsValue,
+  operatorExpectsValues,
+  orderLaneKeys,
+  partitionLanes,
+  partitionNewItems,
+  presetToRange,
+  removeFilter,
+  resetSafeWarnings,
   resolveCrmObjectType,
+  resolveLaneLabel,
+  resolveWipLimit,
   sumBy,
   svgToIconEntry,
+  toCrmSearchFilterGroups,
+  toHsDateValue,
+  toTimestampMs,
+  updateFilter,
   useCrmSearchDataSource,
   useCrmSearchOptions,
-  useFormPrefill
+  useFormPrefill,
+  validateTree,
+  warnOnce,
+  withSafeArrayProps
 };