hs-uix 2.1.0 → 2.2.0

package/dist/utils.js

@@ -31,6 +31,7 @@ var utils_exports = {};
 __export(utils_exports, {
   CrmDataTable: () => CrmDataTable,
   CrmKanban: () => CrmKanban,
+  applyPatches: () => applyPatches,
   buildActiveFilterChips: () => buildActiveFilterChips,
   buildCrmSearchConfig: () => buildCrmSearchConfig,
   buildOptions: () => buildOptions,
@@ -69,6 +70,130 @@ __export(utils_exports, {
 });
 module.exports = __toCommonJS(utils_exports);
 
+// 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, deepClone(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 deepClone(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];
@@ -597,7 +722,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",
@@ -609,12 +734,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -643,13 +768,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -790,6 +915,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",
@@ -1002,6 +1129,7 @@ var CollectionFilterControl = ({
       { key: name, direction: "row", align: "center", gap: "xs" },
       h3(import_ui_extensions5.DateInput, {
         name: `${controlName}-from`,
+        label: filter.fromLabel ?? labels.dateFrom,
         placeholder: filter.fromLabel ?? labels.dateFrom,
         format: "medium",
         value: rangeValue.from ?? null,
@@ -1010,6 +1138,7 @@ var CollectionFilterControl = ({
       h3(Icon, { name: "right", size: "sm" }),
       h3(import_ui_extensions5.DateInput, {
         name: `${controlName}-to`,
+        label: filter.toLabel ?? labels.dateTo,
         placeholder: filter.toLabel ?? labels.dateTo,
         format: "medium",
         value: rangeValue.to ?? null,
@@ -1148,6 +1277,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
 var import_ui_extensions7 = require("@hubspot/ui-extensions");
 var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
@@ -1359,6 +1527,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,
@@ -1603,6 +1786,25 @@ var DataTable = ({
     });
     return rows;
   }, [groupedData, paginatedRows, expandedGroups]);
+  const expandable = typeof renderExpandedRow === "function";
+  const showExpandColumn = expandable && expandOn === "icon";
+  const [internalExpandedRowIds, setInternalExpandedRowIds] = (0, import_react7.useState)(
+    () => normalizeExpandedIds(defaultExpandedRowIds)
+  );
+  const expandedRowIds = (0, import_react7.useMemo)(
+    () => externalExpandedRowIds != null ? normalizeExpandedIds(externalExpandedRowIds) : internalExpandedRowIds,
+    [externalExpandedRowIds, internalExpandedRowIds]
+  );
+  const toggleRowExpanded = (0, import_react7.useCallback)((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 = (0, import_react7.useMemo)(() => {
+    if (!expandable) return displayRows;
+    return withDetailRows(displayRows, expandedRowIds, rowIdField);
+  }, [expandable, displayRows, expandedRowIds, rowIdField]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = (0, import_react7.useMemo)(
     () => buildActiveFilterChips(filters, filterValues),
@@ -1754,6 +1956,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;
@@ -1794,15 +1997,15 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "time":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: inputLabel, value: editValue, onChange: commit });
       case "datetime":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...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__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.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 });
@@ -1816,7 +2019,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 = (0, import_react7.useMemo)(
     () => autoWidth ? computeAutoWidths(columns, data) : {},
     [columns, data, autoWidth]
@@ -1835,6 +2039,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;
@@ -1883,13 +2088,13 @@ var DataTable = ({
       case "multiselect":
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
       case "date":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "time":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra, name: fieldName, label: inputLabel, value, onChange: fire });
       case "datetime":
-        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+        return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.DateInput, { ...extra, name: `${fieldName}-date`, label: `${inputLabel} date`, value: value == null ? void 0 : value.date, onChange: (val) => {
           fire({ ...value, date: val });
-        } }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+        } }), /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: `${inputLabel} time`, value: value == null ? void 0 : value.time, onChange: (val) => {
           fire({ ...value, time: val });
         } }));
       case "toggle":
@@ -2043,7 +2248,7 @@ var DataTable = ({
         checked: allVisibleSelected,
         onChange: handleSelectAll
       }
-    )), columns.map((col) => {
+    )), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
       const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
       return /* @__PURE__ */ import_react7.default.createElement(
         import_ui_extensions7.TableHeader,
@@ -2057,8 +2262,8 @@ var DataTable = ({
         col.description ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, col.label, "\xA0", /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Tooltip, null, col.description) }, /* @__PURE__ */ import_react7.default.createElement(Icon, { name: "info", screenReaderText: typeof col.description === "string" ? col.description : void 0 }))) : col.label
       );
     }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }))),
-    /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableBody, null, displayRows.map(
-      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), columns.map((col, colIdx) => {
+    /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableBody, null, renderedRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }), columns.map((col, colIdx) => {
         var _a, _b, _c;
         return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react7.default.createElement(
           Icon,
@@ -2075,7 +2280,7 @@ var DataTable = ({
           },
           /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Text, { format: { fontWeight: "demibold" } }, item.group.label)
         )) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
-      }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(
+      }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" })) : item.type === "detail" ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: `detail-${item.row[rowIdField] ?? idx}` }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { colSpan: totalColumnCount }, renderExpandedRow(item.row))) : useColumnRendering ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(
         import_ui_extensions7.Checkbox,
         {
           name: `select-${item.row[rowIdField]}`,
@@ -2083,13 +2288,22 @@ var DataTable = ({
           checked: selectedIds.has(item.row[rowIdField]),
           onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
         }
+      )), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_ui_extensions7.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__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, wrapInRowToggle ? /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Link, { variant: "dark", onClick: () => toggleRowExpanded(rowId) }, cellContent) : cellContent);
       }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableCell, { width: "min" }, /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
         const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
         const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
@@ -2106,17 +2320,121 @@ var DataTable = ({
         ));
       })()))) : renderRow(item.row)
     )),
-    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, null, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableRow, null, selectable && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), showExpandColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" }), columns.map((col) => {
       const footerDef = col.footer;
       const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
       return /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { key: col.field, align: col.align }, content);
     }), showRowActionsColumn && /* @__PURE__ */ import_react7.default.createElement(import_ui_extensions7.TableHeader, { width: "min" })))
   ));
 };
+DataTable.displayName = "DataTable";
 
 // src/kanban/Kanban.jsx
 var import_react10 = __toESM(require("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
 var import_react8 = __toESM(require("react"));
 var import_ui_extensions8 = require("@hubspot/ui-extensions");
@@ -2363,6 +2681,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}`,
@@ -2589,10 +2913,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__ */ import_react10.default.createElement(import_ui_extensions10.StatusTag, { variant: "warning" }, labels.overWip) : null;
   const countNode = countDisplay === "text" ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tag, { variant: "default" }, countLabel);
   if (collapsed) {
     const rotated = makeRotatedLabelDataUri(stage.label);
@@ -2625,8 +2953,11 @@ var KanbanColumn = ({
       }
     ) : null));
   }
+  if (compactEmpty && !loading && rows.length === 0 && bucketCount === 0) {
+    return /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tile, { compact: true }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy", format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn)));
+  }
   const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
-  return /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tile, { compact: true }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ import_react10.default.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Divider, null), children, error ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Link, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Link, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+  return /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tile, { compact: true }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, overWipNode, loading ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ import_react10.default.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Divider, null), children, error ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Link, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Link, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
 };
 var renderMetricsPanel = (metrics) => {
   if (!metrics) return null;
@@ -2665,14 +2996,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__ */ import_react10.default.createElement(import_react10.default.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ import_react10.default.createElement(
+  const rightControls = (sortOptions == null ? void 0 : sortOptions.length) > 0 || showMetricsButton ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ import_react10.default.createElement(
     CollectionSortSelect,
     {
       name: "kanban-sort",
@@ -2681,7 +3012,7 @@ var KanbanToolbar = ({
       options: sortOptions,
       onChange: onSortChange
     }
-  ) : null, metrics ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ import_react10.default.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
+  ) : null, showMetricsButton ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Button, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ import_react10.default.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
   return /* @__PURE__ */ import_react10.default.createElement(
     CollectionToolbar,
     {
@@ -2708,7 +3039,7 @@ var KanbanToolbar = ({
         onRemove: onFilterRemove
       },
       right: rightControls,
-      footer: showMetrics && metrics ? renderMetricsPanel(metrics) : null,
+      footer: metricsPanel,
       labels,
       leftFlex: toolbarLeftFlex,
       rightFlex: toolbarRightFlex
@@ -2760,6 +3091,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,
@@ -2824,6 +3167,9 @@ var Kanban = ({
   const [internalFilters, setInternalFilters] = (0, import_react10.useState)(() => getEmptyFilterValues(filters));
   const [internalSort, setInternalSort] = (0, import_react10.useState)(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
   const [internalCollapsed, setInternalCollapsed] = (0, import_react10.useState)([]);
+  const [internalCollapsedLanes, setInternalCollapsedLanes] = (0, import_react10.useState)(
+    () => defaultCollapsedLanes || []
+  );
   const [internalExpanded, setInternalExpanded] = (0, import_react10.useState)([]);
   const [internalSelection, setInternalSelection] = (0, import_react10.useState)([]);
   const [internalShowMetrics, setInternalShowMetrics] = (0, import_react10.useState)(false);
@@ -2840,6 +3186,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;
@@ -2856,9 +3203,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 = (0, import_react10.useRef)(searchValue != null ? searchValue : "");
   (0, import_react10.useEffect)(() => {
     if (searchValue == null) return;
@@ -2917,6 +3265,15 @@ var Kanban = ({
     },
     [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
   );
+  const handleLaneCollapsed = (0, import_react10.useCallback)(
+    (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 = (0, import_react10.useCallback)(
     (stageValue) => {
       const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
@@ -2985,33 +3342,45 @@ var Kanban = ({
     }
     return result;
   }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
-  const buckets = (0, import_react10.useMemo)(() => {
-    const map = {};
-    for (const stage of stages) map[stage.value] = [];
-    for (const row of filteredData) {
-      const key = getStageFor(row);
-      if (map[key]) {
-        map[key].push(row);
-      } else if (stages.length > 0) {
-        if (!map.__unknown) map.__unknown = [];
-        map.__unknown.push(row);
-      }
-    }
-    return map;
-  }, [filteredData, stages, getStageFor]);
+  const buckets = (0, import_react10.useMemo)(
+    () => bucketRowsByStage(filteredData, stages, getStageFor),
+    [filteredData, stages, getStageFor]
+  );
   const sortComparator = (0, import_react10.useMemo)(() => {
     if (!sortOptions || !resolvedSort) return null;
     const opt = sortOptions.find((s) => s.value === resolvedSort);
     return (opt == null ? void 0 : opt.comparator) || null;
   }, [sortOptions, resolvedSort]);
-  const sortedBuckets = (0, import_react10.useMemo)(() => {
-    if (!sortComparator) return buckets;
+  const sortedBuckets = (0, import_react10.useMemo)(() => sortBuckets(buckets, sortComparator), [buckets, sortComparator]);
+  const hasLanes = swimlaneBy != null;
+  const laneData = (0, import_react10.useMemo)(() => {
+    if (!hasLanes) return null;
+    return partitionLanes(filteredData, { swimlaneBy, swimlaneOrder });
+  }, [hasLanes, filteredData, swimlaneBy, swimlaneOrder]);
+  const laneBuckets = (0, import_react10.useMemo)(() => {
+    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 = (0, import_react10.useMemo)(
+    () => evaluateWip(stages, computeStageCounts(stages, buckets, stageMeta), wipLimits),
+    [stages, buckets, stageMeta, wipLimits]
+  );
+  const prevWipRef = (0, import_react10.useRef)({});
+  (0, import_react10.useEffect)(() => {
+    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 = (0, import_react10.useMemo)(
     () => buildActiveFilterChips(filters, resolvedFilters),
     [filters, resolvedFilters]
@@ -3138,6 +3507,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__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { 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__ */ import_react10.default.createElement(
+        import_ui_extensions10.AutoGrid,
+        {
+          key: inLane ? `${laneKey}::${stage.value}` : stage.value,
+          columnWidth: isCollapsed ? 72 : effectiveColumnWidth
+        },
+        /* @__PURE__ */ import_react10.default.createElement(
+          KanbanColumn,
+          {
+            stage,
+            rows: visibleRows,
+            bucketCount: stageRows.length,
+            totalCount: meta == null ? void 0 : meta.totalCount,
+            hasMore: meta == null ? void 0 : meta.hasMore,
+            loading: meta == null ? void 0 : meta.loading,
+            error: meta == null ? void 0 : meta.error,
+            onLoadMore: 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,
@@ -3149,35 +3564,32 @@ var Kanban = ({
   ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
     title: labels.emptyTitle,
     message: labels.emptyMessage
-  }) : /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tile, null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, null, labels.emptyMessage)))) : /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", gap: "sm", wrap: "nowrap" }, stages.map((stage) => {
-    const stageRows = sortedBuckets[stage.value] || [];
-    const meta = stageMeta == null ? void 0 : stageMeta[stage.value];
-    const isExpanded = resolvedExpanded.includes(stage.value);
-    const clamp = isExpanded ? maxCardsExpanded : maxCardsPerColumn;
-    const visibleRows = stageRows.slice(0, clamp);
-    const isCollapsed = resolvedCollapsed.includes(stage.value);
-    return /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.AutoGrid, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ import_react10.default.createElement(
-      KanbanColumn,
+  }) : /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tile, null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, null, labels.emptyMessage)))) : hasLanes ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { 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__ */ import_react10.default.createElement(import_ui_extensions10.Text, { format: { fontWeight: "demibold" } }, laneCountLabel) : /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Tag, { variant: "default" }, laneCountLabel);
+    const laneMetricsNode = !isLaneCollapsed && perLaneMetricsActive && resolvedShowMetrics ? renderMetricsPanel(metrics(laneRows, laneKey)) : null;
+    return /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { key: laneKey, direction: "column", gap: "xs" }, laneIndex > 0 ? /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Divider, null) : null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "row", align: "center", gap: "xs" }, collapseLanes ? /* @__PURE__ */ import_react10.default.createElement(
+      import_ui_extensions10.Button,
       {
-        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__ */ import_react10.default.createElement(
+        Icon,
+        {
+          name: isLaneCollapsed ? "right" : "down",
+          size: "sm",
+          screenReaderText: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
+        }
+      )
+    ) : null, /* @__PURE__ */ import_react10.default.createElement(import_ui_extensions10.Text, { 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__ */ import_react10.default.createElement(import_ui_extensions10.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react10.default.createElement(
     KanbanToolbar,
@@ -3197,8 +3609,8 @@ var Kanban = ({
       sortOptions,
       sortValue: resolvedSort,
       onSortChange: handleSort,
-      metrics,
-      showMetrics: resolvedShowMetrics,
+      showMetricsButton: metricsProvided,
+      metricsPanel: resolvedShowMetrics && globalMetricsContent ? renderMetricsPanel(globalMetricsContent) : null,
       onToggleMetrics: toggleMetrics,
       labels,
       toolbarLeftFlex,
@@ -3206,6 +3618,7 @@ var Kanban = ({
     }
   ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ import_react10.default.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
 };
+Kanban.displayName = "Kanban";
 
 // src/utils/objectPath.js
 var getByPath = (obj, path) => {
@@ -3772,6 +4185,8 @@ var CrmKanban = ({
     board
   );
 };
+CrmDataTable.displayName = "CrmDataTable";
+CrmKanban.displayName = "CrmKanban";
 
 // src/utils/formatters.js
 var DEFAULT_LOCALE = "en-US";
@@ -4083,6 +4498,7 @@ var deriveCardFieldsFromColumns = (columns, opts = {}) => {
 0 && (module.exports = {
   CrmDataTable,
   CrmKanban,
+  applyPatches,
   buildActiveFilterChips,
   buildCrmSearchConfig,
   buildOptions,