hs-uix 2.1.0 → 2.2.0

package/dist/kanban.mjs

@@ -167,6 +167,109 @@ var useSelectionReset = ({ resetKey, enabled, isControlled, clearSelection }) =>
   }, [resetKey, enabled, isControlled, clearSelection]);
 };
 
+// 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 React, { useId } from "react";
 import { Select } from "@hubspot/ui-extensions";
@@ -526,7 +629,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",
@@ -538,12 +641,12 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "block",
   "book",
   "bulb",
+  "callTranscript",
   "calling",
   "callingHangup",
   "callingMade",
   "callingMissed",
   "callingVoicemail",
-  "callTranscript",
   "campaigns",
   "cap",
   "checkCircle",
@@ -572,13 +675,13 @@ var NATIVE_ICON_NAMES = /* @__PURE__ */ new Set([
   "enroll",
   "exclamation",
   "exclamationCircle",
-  "facebook",
   "faceHappy",
   "faceHappyFilled",
   "faceNeutral",
   "faceNeutralFilled",
   "faceSad",
   "faceSadFilled",
+  "facebook",
   "favoriteHollow",
   "file",
   "filledXCircleIcon",
@@ -719,6 +822,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",
@@ -931,6 +1036,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,
@@ -939,6 +1045,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,
@@ -1269,6 +1376,7 @@ import {
   Statistics,
   StatisticsItem,
   StatisticsTrend,
+  StatusTag,
   Tag as Tag3,
   Text,
   Tile
@@ -1306,6 +1414,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}`,
@@ -1532,10 +1646,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__ */ React7.createElement(StatusTag, { variant: "warning" }, labels.overWip) : null;
   const countNode = countDisplay === "text" ? /* @__PURE__ */ React7.createElement(Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React7.createElement(Tag3, { variant: "default" }, countLabel);
   if (collapsed) {
     const rotated = makeRotatedLabelDataUri(stage.label);
@@ -1568,8 +1686,11 @@ var KanbanColumn = ({
       }
     ) : null));
   }
+  if (compactEmpty && !loading && rows.length === 0 && bucketCount === 0) {
+    return /* @__PURE__ */ React7.createElement(Tile, { compact: true }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy", format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn)));
+  }
   const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
-  return /* @__PURE__ */ React7.createElement(Tile, { compact: true }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React7.createElement(Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ React7.createElement(LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ React7.createElement(Button3, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React7.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React7.createElement(Divider, null), children, error ? /* @__PURE__ */ React7.createElement(Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React7.createElement(Button3, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", justify: "center" }, /* @__PURE__ */ React7.createElement(Link2, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React7.createElement(LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", justify: "center" }, /* @__PURE__ */ React7.createElement(Link2, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+  return /* @__PURE__ */ React7.createElement(Tile, { compact: true }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "column", gap: "xs" }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React7.createElement(Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, overWipNode, loading ? /* @__PURE__ */ React7.createElement(LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ React7.createElement(Button3, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React7.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React7.createElement(Divider, null), children, error ? /* @__PURE__ */ React7.createElement(Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React7.createElement(Button3, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", justify: "center" }, /* @__PURE__ */ React7.createElement(Link2, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React7.createElement(LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", justify: "center" }, /* @__PURE__ */ React7.createElement(Link2, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React7.createElement(Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
 };
 var renderMetricsPanel = (metrics) => {
   if (!metrics) return null;
@@ -1608,14 +1729,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__ */ React7.createElement(React7.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React7.createElement(
+  const rightControls = (sortOptions == null ? void 0 : sortOptions.length) > 0 || showMetricsButton ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React7.createElement(
     CollectionSortSelect,
     {
       name: "kanban-sort",
@@ -1624,7 +1745,7 @@ var KanbanToolbar = ({
       options: sortOptions,
       onChange: onSortChange
     }
-  ) : null, metrics ? /* @__PURE__ */ React7.createElement(Button3, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React7.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
+  ) : null, showMetricsButton ? /* @__PURE__ */ React7.createElement(Button3, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React7.createElement(Icon, { name: "gauge", size: "sm" }), " ", labels.metricsButton) : null) : null;
   return /* @__PURE__ */ React7.createElement(
     CollectionToolbar,
     {
@@ -1651,7 +1772,7 @@ var KanbanToolbar = ({
         onRemove: onFilterRemove
       },
       right: rightControls,
-      footer: showMetrics && metrics ? renderMetricsPanel(metrics) : null,
+      footer: metricsPanel,
       labels,
       leftFlex: toolbarLeftFlex,
       rightFlex: toolbarRightFlex
@@ -1703,6 +1824,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,
@@ -1767,6 +1900,9 @@ var Kanban = ({
   const [internalFilters, setInternalFilters] = useState2(() => getEmptyFilterValues(filters));
   const [internalSort, setInternalSort] = useState2(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
   const [internalCollapsed, setInternalCollapsed] = useState2([]);
+  const [internalCollapsedLanes, setInternalCollapsedLanes] = useState2(
+    () => defaultCollapsedLanes || []
+  );
   const [internalExpanded, setInternalExpanded] = useState2([]);
   const [internalSelection, setInternalSelection] = useState2([]);
   const [internalShowMetrics, setInternalShowMetrics] = useState2(false);
@@ -1783,6 +1919,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;
@@ -1799,9 +1936,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 = useRef2(searchValue != null ? searchValue : "");
   useEffect2(() => {
     if (searchValue == null) return;
@@ -1860,6 +1998,15 @@ var Kanban = ({
     },
     [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
   );
+  const handleLaneCollapsed = useCallback2(
+    (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 = useCallback2(
     (stageValue) => {
       const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
@@ -1928,33 +2075,45 @@ var Kanban = ({
     }
     return result;
   }, [data, resolvedSearch, resolvedFilters, filters, searchEnabled, searchFields, fuzzySearch, fuzzyOptions]);
-  const buckets = 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 = useMemo(
+    () => bucketRowsByStage(filteredData, stages, getStageFor),
+    [filteredData, stages, getStageFor]
+  );
   const sortComparator = 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 = useMemo(() => {
-    if (!sortComparator) return buckets;
+  const sortedBuckets = useMemo(() => sortBuckets(buckets, sortComparator), [buckets, sortComparator]);
+  const hasLanes = swimlaneBy != null;
+  const laneData = useMemo(() => {
+    if (!hasLanes) return null;
+    return partitionLanes(filteredData, { swimlaneBy, swimlaneOrder });
+  }, [hasLanes, filteredData, swimlaneBy, swimlaneOrder]);
+  const laneBuckets = 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 = useMemo(
+    () => evaluateWip(stages, computeStageCounts(stages, buckets, stageMeta), wipLimits),
+    [stages, buckets, stageMeta, wipLimits]
+  );
+  const prevWipRef = useRef2({});
+  useEffect2(() => {
+    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 = useMemo(
     () => buildActiveFilterChips(filters, resolvedFilters),
     [filters, resolvedFilters]
@@ -2081,6 +2240,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__ */ React7.createElement(Flex4, { 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__ */ React7.createElement(
+        AutoGrid,
+        {
+          key: inLane ? `${laneKey}::${stage.value}` : stage.value,
+          columnWidth: isCollapsed ? 72 : effectiveColumnWidth
+        },
+        /* @__PURE__ */ React7.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,
@@ -2092,35 +2297,32 @@ var Kanban = ({
   ) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
     title: labels.emptyTitle,
     message: labels.emptyMessage
-  }) : /* @__PURE__ */ React7.createElement(Tile, null, /* @__PURE__ */ React7.createElement(Flex4, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React7.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React7.createElement(Text, null, labels.emptyMessage)))) : /* @__PURE__ */ React7.createElement(Flex4, { 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__ */ React7.createElement(AutoGrid, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ React7.createElement(
-      KanbanColumn,
+  }) : /* @__PURE__ */ React7.createElement(Tile, null, /* @__PURE__ */ React7.createElement(Flex4, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React7.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React7.createElement(Text, null, labels.emptyMessage)))) : hasLanes ? /* @__PURE__ */ React7.createElement(Flex4, { 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__ */ React7.createElement(Text, { format: { fontWeight: "demibold" } }, laneCountLabel) : /* @__PURE__ */ React7.createElement(Tag3, { variant: "default" }, laneCountLabel);
+    const laneMetricsNode = !isLaneCollapsed && perLaneMetricsActive && resolvedShowMetrics ? renderMetricsPanel(metrics(laneRows, laneKey)) : null;
+    return /* @__PURE__ */ React7.createElement(Flex4, { key: laneKey, direction: "column", gap: "xs" }, laneIndex > 0 ? /* @__PURE__ */ React7.createElement(Divider, null) : null, /* @__PURE__ */ React7.createElement(Flex4, { direction: "row", align: "center", gap: "xs" }, collapseLanes ? /* @__PURE__ */ React7.createElement(
+      Button3,
       {
-        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__ */ React7.createElement(
+        Icon,
+        {
+          name: isLaneCollapsed ? "right" : "down",
+          size: "sm",
+          screenReaderText: isLaneCollapsed ? `Expand ${laneLabelText}` : `Collapse ${laneLabelText}`
+        }
+      )
+    ) : null, /* @__PURE__ */ React7.createElement(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__ */ React7.createElement(Flex4, { direction: "column", gap: "sm" }, /* @__PURE__ */ React7.createElement(
     KanbanToolbar,
@@ -2140,8 +2342,8 @@ var Kanban = ({
       sortOptions,
       sortValue: resolvedSort,
       onSortChange: handleSort,
-      metrics,
-      showMetrics: resolvedShowMetrics,
+      showMetricsButton: metricsProvided,
+      metricsPanel: resolvedShowMetrics && globalMetricsContent ? renderMetricsPanel(globalMetricsContent) : null,
       onToggleMetrics: toggleMetrics,
       labels,
       toolbarLeftFlex,
@@ -2149,6 +2351,7 @@ var Kanban = ({
     }
   ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ React7.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
 };
+Kanban.displayName = "Kanban";
 
 // src/kanban/KanbanCardActions.jsx
 import React8 from "react";
@@ -2215,5 +2418,14 @@ var KanbanCardActions = ({
 };
 export {
   Kanban,
-  KanbanCardActions
+  KanbanCardActions,
+  UNASSIGNED_LANE_KEY,
+  computeStageCounts,
+  evaluateWip,
+  findNewlyExceededWip,
+  getLaneKey,
+  orderLaneKeys,
+  partitionLanes,
+  resolveLaneLabel,
+  resolveWipLimit
 };