hs-uix 1.5.1 → 1.6.1

package/dist/kanban.mjs

@@ -0,0 +1,1408 @@
+// packages/kanban/src/Kanban.jsx
+import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Fuse from "fuse.js";
+
+// src/common-components/StyledText.js
+import React from "react";
+import { Image, Tag } from "@hubspot/ui-extensions";
+
+// src/common-components/svgDefaults.js
+var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
+var HS_TEXT_COLOR = "#33475b";
+var HS_SUBTLE_BG = "#F5F8FA";
+var HS_TAG_SUBTLE_BORDER = "#7C98B6";
+var HS_TAG_TEXT_COLOR = HS_TEXT_COLOR;
+var HS_TAG_FONT_SIZE = 12;
+var HS_TAG_LINE_HEIGHT = 22;
+var HS_TAG_PADDING_X = 8;
+var HS_TAG_PADDING_Y = 0;
+var HS_TAG_BORDER_RADIUS = 0;
+var HS_TAG_BORDER_WIDTH = 1;
+
+// src/common-components/StyledText.js
+var VARIANT_PRESETS = {
+  bodytext: { fontSize: 14, lineHeight: 24, fontWeight: 400 },
+  microcopy: { fontSize: 12, lineHeight: 18, fontWeight: 400 }
+};
+var WEIGHT_ALIASES = {
+  bold: 700,
+  demibold: 600,
+  regular: 400
+};
+var LINE_DECORATION = {
+  strikethrough: "line-through",
+  underline: "underline"
+};
+var ORIENTATION_ROTATION = {
+  horizontal: 0,
+  "vertical-up": -90,
+  "vertical-down": 90
+};
+var BACKGROUND_PRESETS = {
+  tag: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    borderWidth: HS_TAG_BORDER_WIDTH,
+    radius: HS_TAG_BORDER_RADIUS,
+    paddingX: HS_TAG_PADDING_X,
+    paddingY: HS_TAG_PADDING_Y,
+    height: HS_TAG_LINE_HEIGHT,
+    textColor: HS_TAG_TEXT_COLOR,
+    fontSize: HS_TAG_FONT_SIZE,
+    canvasPaddingX: 0,
+    canvasPaddingY: 0
+  }
+};
+var TAG_VARIANTS = {
+  default: {
+    color: HS_SUBTLE_BG,
+    borderColor: HS_TAG_SUBTLE_BORDER,
+    textColor: HS_TAG_TEXT_COLOR
+  },
+  success: {
+    color: "#E5F8F6",
+    borderColor: "#00BDA5",
+    textColor: "#00BDA5"
+  },
+  warning: {
+    color: "#FEF8F0",
+    borderColor: "#F5C26B",
+    textColor: "#D39913"
+  },
+  error: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  danger: {
+    color: "#FDEDEE",
+    borderColor: "#F2545B",
+    textColor: "#F2545B"
+  },
+  info: {
+    color: "#E5F5F8",
+    borderColor: "#00A4BD",
+    textColor: "#00A4BD"
+  }
+};
+var escapeSvgText = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var applyTextTransform = (text, transform) => {
+  if (!transform || transform === "none") return String(text);
+  const s = String(text);
+  switch (transform) {
+    case "uppercase":
+      return s.toUpperCase();
+    case "lowercase":
+      return s.toLowerCase();
+    case "capitalize":
+      return s.replace(/\b\w/g, (c) => c.toUpperCase());
+    case "sentenceCase":
+      return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
+    default:
+      return s;
+  }
+};
+var estimateTextWidth = (text, fontSize) => Math.max(fontSize, Math.round(String(text).length * fontSize * 0.58));
+var resolveBackground = (background) => {
+  if (!background) return null;
+  const preset = background.preset ? BACKGROUND_PRESETS[background.preset] : null;
+  const variant = background.preset === "tag" && background.variant ? TAG_VARIANTS[background.variant] || null : null;
+  return {
+    ...preset || {},
+    ...variant || {},
+    ...background
+  };
+};
+var buildBackgroundRect = ({ background, x, y, width, height }) => {
+  const radius = (background == null ? void 0 : background.radius) ?? 3;
+  const fill = (background == null ? void 0 : background.color) ?? "transparent";
+  const borderWidth = (background == null ? void 0 : background.borderWidth) ?? 0;
+  const borderColor = background == null ? void 0 : background.borderColor;
+  if (!borderColor || borderWidth <= 0) {
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  }
+  const isTagPreset = (background == null ? void 0 : background.preset) === "tag";
+  const fillRect = `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" fill="${fill}" />`;
+  const strokeInset = borderWidth / 2;
+  const strokeX = x + strokeInset;
+  const strokeY = y + strokeInset;
+  const strokeW = Math.max(0, width - borderWidth);
+  const strokeH = Math.max(0, height - borderWidth);
+  return fillRect + `<rect x="${strokeX}" y="${strokeY}" width="${strokeW}" height="${strokeH}" rx="${Math.max(
+    0,
+    radius - strokeInset
+  )}" fill="none" stroke="${borderColor}" stroke-width="${borderWidth}"${isTagPreset ? ` shape-rendering="crispEdges"` : ""} />`;
+};
+var makeStyledTextDataUri = (text, opts = {}) => {
+  const {
+    variant = "bodytext",
+    format = {},
+    orientation = "horizontal",
+    color: colorProp = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY,
+    background: backgroundProp = null,
+    paddingX: paddingXProp = 4,
+    paddingY: paddingYProp = 2,
+    width: widthOverride,
+    height: heightOverride,
+    fontSize: fontSizeOverride
+  } = opts;
+  const preset = VARIANT_PRESETS[variant] || VARIANT_PRESETS.bodytext;
+  const background = resolveBackground(backgroundProp);
+  const fontSize = fontSizeOverride ?? (background == null ? void 0 : background.fontSize) ?? preset.fontSize;
+  const rawWeight = format.fontWeight;
+  const fontWeight = rawWeight ? WEIGHT_ALIASES[rawWeight] ?? rawWeight : preset.fontWeight;
+  const fontStyle = format.italic ? "italic" : "normal";
+  const textDecoration = LINE_DECORATION[format.lineDecoration] || "none";
+  const transformed = applyTextTransform(text, format.textTransform);
+  const lineHeight = (background == null ? void 0 : background.height) ?? preset.lineHeight ?? fontSize;
+  const color = (background == null ? void 0 : background.textColor) ?? colorProp;
+  const paddingX = (background == null ? void 0 : background.canvasPaddingX) ?? paddingXProp;
+  const paddingY = (background == null ? void 0 : background.canvasPaddingY) ?? paddingYProp;
+  const rotate = typeof orientation === "number" ? orientation : ORIENTATION_ROTATION[orientation] ?? 0;
+  const textW = estimateTextWidth(transformed, fontSize);
+  let pillW = 0;
+  let pillH = 0;
+  if (background) {
+    const bgPadX = background.paddingX ?? 6;
+    const bgPadY = background.paddingY ?? 3;
+    pillW = textW + bgPadX * 2;
+    pillH = background.height ?? Math.max(lineHeight, fontSize + bgPadY * 2);
+  }
+  const intrinsicW = (background ? pillW : textW) + paddingX * 2;
+  const intrinsicH = (background ? pillH : lineHeight) + paddingY * 2;
+  const isOrthoRotation = rotate === 90 || rotate === -90 || rotate === 270;
+  const canvasW = widthOverride ?? (isOrthoRotation ? intrinsicH : intrinsicW);
+  const canvasH = heightOverride ?? (isOrthoRotation ? intrinsicW : intrinsicH);
+  const cx = canvasW / 2;
+  const cy = canvasH / 2;
+  const rectX = cx - pillW / 2;
+  const rectY = cy - pillH / 2;
+  const group = (background ? buildBackgroundRect({
+    background,
+    x: rectX,
+    y: rectY,
+    width: pillW,
+    height: pillH
+  }) : "") + `<text x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamily.replace(/"/g, "&quot;")}" font-size="${fontSize}" font-weight="${fontWeight}" font-style="${fontStyle}" text-decoration="${textDecoration}" fill="${color}">${escapeSvgText(transformed)}</text>`;
+  const wrapped = rotate ? `<g transform="rotate(${rotate} ${cx} ${cy})">${group}</g>` : group;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvasW}" height="${canvasH}">` + wrapped + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width: canvasW,
+    height: canvasH
+  };
+};
+
+// packages/kanban/src/Kanban.jsx
+import {
+  Alert,
+  AutoGrid,
+  Box,
+  Button,
+  Checkbox,
+  DateInput,
+  DescriptionList,
+  DescriptionListItem,
+  Divider,
+  Dropdown,
+  EmptyState,
+  Flex,
+  Icon,
+  Image as Image2,
+  Inline,
+  Link,
+  LoadingSpinner,
+  Modal,
+  ModalBody,
+  MultiSelect,
+  SearchInput,
+  Select,
+  Statistics,
+  StatisticsItem,
+  StatisticsTrend,
+  Tag as Tag2,
+  Text,
+  Tile
+} from "@hubspot/ui-extensions";
+var DEFAULT_DENSITY = "compact";
+var DEFAULT_MAX_CARDS = 10;
+var DEFAULT_MAX_EXPANDED = 50;
+var DEFAULT_COLUMN_WIDTH = 350;
+var MIN_COLUMN_WIDTH = 350;
+var DEFAULT_FILTER_INLINE_LIMIT = 4;
+var DEFAULT_SEARCH_DEBOUNCE = 250;
+var DEFAULT_TITLE_TRUNCATE = 60;
+var applyTruncate = (value, truncate, fallback) => {
+  if (truncate === false) return value;
+  if (typeof value !== "string") return value;
+  const limit = typeof truncate === "number" ? truncate : truncate === true ? fallback || DEFAULT_TITLE_TRUNCATE : fallback || DEFAULT_TITLE_TRUNCATE;
+  if (value.length <= limit) return value;
+  return value.slice(0, limit).trimEnd() + "\u2026";
+};
+var DEFAULT_LABELS = {
+  search: "Search cards...",
+  // Only the total is surfaced — callers asked for a single headline number
+  // rather than a "loaded / total" fraction. Fall back to the bare label when
+  // no total is known.
+  showMore: (_shown, total) => total ? `Show more (${total})` : "Show more",
+  showLess: "Show less",
+  loadMore: (_loaded, total) => total ? `Load more (${total})` : "Load more",
+  loadingMore: "Loading...",
+  retryLoadMore: "Retry",
+  emptyColumn: "\u2014",
+  emptyTitle: "No cards",
+  emptyMessage: "Nothing matches the current filters.",
+  loading: "Loading board...",
+  errorTitle: "Something went wrong.",
+  errorMessage: "An error occurred while loading data.",
+  cardCount: (n) => String(n),
+  moveTo: "Move",
+  clearAll: "Clear all",
+  selectAll: (count, label) => `Select all ${count} ${label}`,
+  deselectAll: "Deselect all",
+  selected: (count, label) => `${count}\xA0${label}\xA0selected`,
+  filtersButton: "Filters",
+  dateFrom: "From",
+  dateTo: "To",
+  sortButton: "Sort",
+  sortAscending: "Ascending",
+  sortDescending: "Descending",
+  metricsButton: "Metrics"
+};
+var makeRotatedTagDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "microcopy",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down",
+  background: { preset: "tag" }
+});
+var makeRotatedLabelDataUri = (label) => makeStyledTextDataUri(label, {
+  variant: "bodytext",
+  format: { fontWeight: "demibold" },
+  orientation: "vertical-down"
+});
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var isFilterActive = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
+var formatDateChip = (dateObj) => {
+  if (!dateObj) return "";
+  const { year, month, date } = dateObj;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+var dateToTimestamp = (dateObj) => {
+  if (!dateObj) return null;
+  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+};
+var toStableKey = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var canStageReceiveRow = (stage, row, canMove) => {
+  if (!stage) return false;
+  if (typeof canMove === "function" && !canMove(row, stage.value)) return false;
+  if (typeof stage.canEnter === "function" && !stage.canEnter(row)) return false;
+  return true;
+};
+var isFieldDirectionSortOption = (option) => !!(option && option.field && (option.direction === "asc" || option.direction === "desc"));
+var resolveDividers = (cardDividers, density) => {
+  if (cardDividers === true) {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  if (cardDividers === false) {
+    return { afterTitle: false, afterSubtitle: false, afterBody: false, afterFooter: false };
+  }
+  if (cardDividers && typeof cardDividers === "object") {
+    return {
+      afterTitle: cardDividers.afterTitle ?? false,
+      afterSubtitle: cardDividers.afterSubtitle ?? false,
+      afterBody: cardDividers.afterBody ?? false,
+      afterFooter: cardDividers.afterFooter ?? false
+    };
+  }
+  if (density === "comfortable") {
+    return { afterTitle: true, afterSubtitle: true, afterBody: true, afterFooter: true };
+  }
+  return { afterTitle: false, afterSubtitle: false, afterBody: true, afterFooter: false };
+};
+var partitionFields = (cardFields) => {
+  const buckets = { title: null, subtitle: null, meta: [], body: [], footer: [] };
+  for (const field of cardFields || []) {
+    const placement = field.placement || "body";
+    if (placement === "title" && !buckets.title) buckets.title = field;
+    else if (placement === "subtitle" && !buckets.subtitle) buckets.subtitle = field;
+    else if (placement === "meta") buckets.meta.push(field);
+    else if (placement === "footer") buckets.footer.push(field);
+    else buckets.body.push(field);
+  }
+  return buckets;
+};
+var resolveFieldValue = (field, row) => {
+  if (!field) return void 0;
+  if (field.field && row && Object.prototype.hasOwnProperty.call(row, field.field)) {
+    return row[field.field];
+  }
+  return void 0;
+};
+var resolveHref = (href, row) => {
+  if (!href) return null;
+  if (typeof href === "function") return href(row);
+  return href;
+};
+var KanbanCard = ({
+  row,
+  rowId,
+  stage,
+  stages,
+  fields,
+  density,
+  dividers,
+  bodyAs,
+  maxBodyLines,
+  stageControl,
+  stageControlPlacement,
+  canMove,
+  onStageChangeRequest,
+  isChanging,
+  selectable,
+  selected,
+  onToggleSelect,
+  labels
+}) => {
+  const titleHref = fields.title ? resolveHref(fields.title.href, row) : null;
+  const rawTitleValue = fields.title ? fields.title.render ? fields.title.render(resolveFieldValue(fields.title, row), row) : resolveFieldValue(fields.title, row) : null;
+  const titleValue = fields.title && typeof rawTitleValue === "string" ? applyTruncate(rawTitleValue, fields.title.truncate, DEFAULT_TITLE_TRUNCATE) : rawTitleValue;
+  const titleNode = titleHref ? /* @__PURE__ */ React2.createElement(Link, { href: titleHref }, titleValue) : /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, titleValue);
+  const metaNodes = fields.meta.filter((f) => !f.visible || f.visible(row)).map((f) => {
+    const val = resolveFieldValue(f, row);
+    return /* @__PURE__ */ React2.createElement(Text, { key: f.field || f.label, variant: "microcopy" }, f.render ? f.render(val, row) : val);
+  });
+  const showSubtitle = density === "comfortable" && fields.subtitle;
+  const subtitleNode = showSubtitle ? fields.subtitle.render ? fields.subtitle.render(resolveFieldValue(fields.subtitle, row), row) : resolveFieldValue(fields.subtitle, row) : null;
+  const bodyFields = fields.body.filter((f) => !f.visible || f.visible(row)).slice(0, maxBodyLines);
+  const footerFields = fields.footer.filter((f) => !f.visible || f.visible(row));
+  const footerAlerts = footerFields.slice(0, -1);
+  const footerActionsField = footerFields.length > 0 ? footerFields[footerFields.length - 1] : null;
+  const renderFooterField = (f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val;
+    const key = f.key || f.field || f.label || `footer-${idx}`;
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, { key }, rendered);
+  };
+  const stageControlNode = stageControl === "none" ? null : /* @__PURE__ */ React2.createElement(
+    StageControl,
+    {
+      row,
+      rowId,
+      currentStage: stage,
+      stages,
+      canMove,
+      isChanging,
+      mode: stageControl,
+      onStageChangeRequest,
+      labels
+    }
+  );
+  const titleRow = /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", align: "center", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box, { flex: 1 }, titleNode), selectable ? /* @__PURE__ */ React2.createElement(
+    Checkbox,
+    {
+      name: `kanban-select-${rowId}`,
+      checked: selected,
+      onChange: () => onToggleSelect(rowId)
+    }
+  ) : null);
+  const metaRow = metaNodes.length === 0 ? null : /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "end", align: "center", gap: "xs" }, metaNodes);
+  const bodyRow = bodyFields.length === 0 ? null : bodyAs === "descriptionList" ? /* @__PURE__ */ React2.createElement(DescriptionList, { direction: "row" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ React2.createElement(DescriptionListItem, { key, label: f.label || "" }, rendered);
+  })) : /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "flush" }, bodyFields.map((f, idx) => {
+    const val = resolveFieldValue(f, row);
+    const rendered = f.render ? f.render(val, row) : val ?? "\u2014";
+    const key = f.key || f.field || f.label || `body-${idx}`;
+    return /* @__PURE__ */ React2.createElement(Text, { key, variant: "microcopy" }, f.label ? /* @__PURE__ */ React2.createElement(Text, { inline: true, variant: "microcopy" }, `${f.label}: `) : null, rendered);
+  }));
+  const footerAlertsNode = footerAlerts.length === 0 ? null : /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, footerAlerts.map((f, idx) => renderFooterField(f, idx)));
+  const footerActionsNode = footerActionsField ? renderFooterField(footerActionsField, footerFields.length - 1) : null;
+  const inlineStageControl = stageControlPlacement === "inline" ? stageControlNode : null;
+  const separateRowStageControl = stageControlPlacement === "separateRow" ? stageControlNode : null;
+  const footerMainRow = inlineStageControl || footerActionsNode ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", align: "start", gap: "sm" }, inlineStageControl ? /* @__PURE__ */ React2.createElement(Box, { alignSelf: "center" }, inlineStageControl) : /* @__PURE__ */ React2.createElement(Box, null), footerActionsNode ? /* @__PURE__ */ React2.createElement(Box, { flex: 1 }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "end", align: "start" }, footerActionsNode)) : null) : null;
+  const footerRow = !footerAlertsNode && !footerMainRow ? null : /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, footerAlertsNode, footerMainRow);
+  return /* @__PURE__ */ React2.createElement(Tile, { compact: density === "compact" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: density === "compact" ? "xs" : "sm" }, titleRow, dividers.afterTitle && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React2.createElement(Divider, null) : null, subtitleNode ? /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, subtitleNode) : null, dividers.afterSubtitle && subtitleNode && (metaRow || bodyRow || footerRow || separateRowStageControl) ? /* @__PURE__ */ React2.createElement(Divider, null) : null, metaRow, bodyRow, dividers.afterBody && bodyRow && (footerRow || separateRowStageControl) ? /* @__PURE__ */ React2.createElement(Divider, null) : null, footerRow, dividers.afterFooter && footerRow && separateRowStageControl ? /* @__PURE__ */ React2.createElement(Divider, null) : null, separateRowStageControl));
+};
+var StageControl = ({
+  row,
+  rowId,
+  currentStage,
+  stages,
+  canMove,
+  isChanging,
+  mode,
+  onStageChangeRequest,
+  labels
+}) => {
+  if (isChanging) {
+    return /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "xs" });
+  }
+  const availableStages = (stages || []).filter(
+    (stage) => stage.value === currentStage.value || canStageReceiveRow(stage, row, canMove)
+  );
+  if (mode === "menu") {
+    const targetStages = availableStages.filter((stage) => stage.value !== currentStage.value);
+    if (targetStages.length === 0) {
+      return /* @__PURE__ */ React2.createElement(Button, { variant: "transparent", size: "extra-small", disabled: true }, labels.moveTo);
+    }
+    return /* @__PURE__ */ React2.createElement(
+      Dropdown,
+      {
+        variant: "transparent",
+        buttonText: labels.moveTo,
+        buttonSize: "xs"
+      },
+      targetStages.map((stage) => /* @__PURE__ */ React2.createElement(
+        Dropdown.ButtonItem,
+        {
+          key: stage.value,
+          onClick: () => onStageChangeRequest(row, stage.value, currentStage.value)
+        },
+        stage.shortLabel || stage.label
+      ))
+    );
+  }
+  return /* @__PURE__ */ React2.createElement(
+    Select,
+    {
+      name: `stage-${rowId}`,
+      label: "",
+      value: currentStage.value,
+      onChange: (val) => {
+        if (val !== currentStage.value) onStageChangeRequest(row, val, currentStage.value);
+      },
+      options: availableStages.map((stage) => ({
+        label: stage.shortLabel || stage.label,
+        value: stage.value
+      }))
+    }
+  );
+};
+var KanbanColumn = ({
+  stage,
+  rows,
+  bucketCount,
+  totalCount,
+  hasMore,
+  loading,
+  error,
+  onLoadMore,
+  expanded,
+  onToggleExpanded,
+  collapsed,
+  onToggleCollapsed,
+  columnFooter,
+  countDisplay,
+  labels,
+  children
+}) => {
+  const countLabel = labels.cardCount(totalCount != null ? totalCount : bucketCount);
+  const countNode = countDisplay === "text" ? /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, countLabel) : countDisplay === "none" ? null : /* @__PURE__ */ React2.createElement(Tag2, { variant: "subtle" }, countLabel);
+  if (collapsed) {
+    const rotated = makeRotatedLabelDataUri(stage.label);
+    const rotatedCount = countDisplay === "none" ? null : makeRotatedTagDataUri(countLabel);
+    const stageIdentifier = stage.icon ? /* @__PURE__ */ React2.createElement(Icon, { name: stage.icon, size: "sm", screenReaderText: stage.label }) : /* @__PURE__ */ React2.createElement(
+      Image2,
+      {
+        src: rotated.src,
+        width: rotated.width,
+        height: rotated.height,
+        alt: stage.label
+      }
+    );
+    return /* @__PURE__ */ React2.createElement(Tile, { compact: true }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs", align: "center" }, /* @__PURE__ */ React2.createElement(
+      Button,
+      {
+        variant: "transparent",
+        size: "sm",
+        onClick: onToggleCollapsed,
+        tooltip: `Expand ${stage.label}`
+      },
+      /* @__PURE__ */ React2.createElement(Icon, { name: "right", size: "sm", screenReaderText: `Expand ${stage.label}` })
+    ), stageIdentifier, rotatedCount ? /* @__PURE__ */ React2.createElement(
+      Image2,
+      {
+        src: rotatedCount.src,
+        width: rotatedCount.width,
+        height: rotatedCount.height,
+        alt: `${bucketCount} items`
+      }
+    ) : null));
+  }
+  const footerContent = stage.footer ? stage.footer(rows) : columnFooter ? columnFooter(rows, stage) : null;
+  return /* @__PURE__ */ React2.createElement(Tile, { compact: true }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", justify: "between", gap: "xs" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, stage.shortLabel || stage.label), countNode, loading ? /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "xs" }) : null), /* @__PURE__ */ React2.createElement(Button, { variant: "transparent", size: "sm", onClick: onToggleCollapsed, tooltip: "Collapse" }, /* @__PURE__ */ React2.createElement(Icon, { name: "left", size: "sm", screenReaderText: `Collapse ${stage.label}` }))), footerContent ? /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, footerContent) : null, /* @__PURE__ */ React2.createElement(Divider, null), children, error ? /* @__PURE__ */ React2.createElement(Alert, { variant: "danger", title: labels.errorTitle }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "xs", align: "center" }, /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, error), onLoadMore ? /* @__PURE__ */ React2.createElement(Button, { variant: "transparent", size: "xs", onClick: () => onLoadMore(stage.value) }, labels.retryLoadMore) : null)) : null, !error && hasMore && onLoadMore && !loading && bucketCount > 0 ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ React2.createElement(Link, { onClick: () => onLoadMore(stage.value) }, labels.loadMore(bucketCount, totalCount))) : null, !error && loading && hasMore ? /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "sm", layout: "centered", label: labels.loadingMore }) : null, !error && !hasMore && bucketCount > rows.length ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "center" }, /* @__PURE__ */ React2.createElement(Link, { onClick: onToggleExpanded }, expanded ? labels.showLess : labels.showMore(rows.length, bucketCount))) : null, rows.length === 0 && bucketCount === 0 && !loading ? /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy", format: { italic: true } }, labels.emptyColumn) : null));
+};
+var SortModalBody = ({ sortOptions, sortValue, onSortChange, labels }) => {
+  const hasFieldDirection = Array.isArray(sortOptions) && sortOptions.length > 0 && sortOptions.every(isFieldDirectionSortOption);
+  if (!hasFieldDirection) {
+    return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, sortOptions.map((opt) => /* @__PURE__ */ React2.createElement(
+      Button,
+      {
+        key: opt.value,
+        variant: sortValue === opt.value ? "primary" : "secondary",
+        onClick: () => onSortChange(opt.value)
+      },
+      opt.label
+    )));
+  }
+  const currentOption = sortOptions.find((o) => o.value === sortValue) || sortOptions[0];
+  const currentField = currentOption.field;
+  const currentDirection = currentOption.direction;
+  const uniqueFields = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const opt of sortOptions) {
+    if (!seen.has(opt.field)) {
+      seen.add(opt.field);
+      uniqueFields.push({ value: opt.field, label: opt.fieldLabel || opt.field });
+    }
+  }
+  const fieldOpts = sortOptions.filter((o) => o.field === currentField);
+  const ascOption = fieldOpts.find((o) => o.direction === "asc");
+  const descOption = fieldOpts.find((o) => o.direction === "desc");
+  const handleFieldChange = (newField) => {
+    const next = sortOptions.find((o) => o.field === newField && o.direction === currentDirection) || sortOptions.find((o) => o.field === newField && o.direction === "desc") || sortOptions.find((o) => o.field === newField);
+    if (next) onSortChange(next.value);
+  };
+  return /* @__PURE__ */ React2.createElement(Inline, { align: "center", gap: "small" }, /* @__PURE__ */ React2.createElement(
+    Select,
+    {
+      name: "kanban-sort-field",
+      label: "",
+      value: currentField,
+      onChange: handleFieldChange,
+      options: uniqueFields
+    }
+  ), /* @__PURE__ */ React2.createElement(Inline, { align: "center", gap: "flush" }, descOption ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: currentDirection === "desc" ? "primary" : "secondary",
+      onClick: () => onSortChange(descOption.value)
+    },
+    labels.sortDescending
+  ) : null, ascOption ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: currentDirection === "asc" ? "primary" : "secondary",
+      onClick: () => onSortChange(ascOption.value)
+    },
+    labels.sortAscending
+  ) : null));
+};
+var renderFilterControl = ({ filter, value, onChange, labels }) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") {
+    return /* @__PURE__ */ React2.createElement(
+      MultiSelect,
+      {
+        key: filter.name,
+        name: `kanban-filter-${filter.name}`,
+        label: "",
+        placeholder: filter.placeholder || "All",
+        value: value || [],
+        onChange: (val) => onChange(filter.name, val),
+        options: filter.options
+      }
+    );
+  }
+  if (type === "dateRange") {
+    const rangeVal = value || { from: null, to: null };
+    return /* @__PURE__ */ React2.createElement(Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(
+      DateInput,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-from`,
+        label: "",
+        placeholder: labels.dateFrom,
+        format: "medium",
+        value: rangeVal.from,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, from: val })
+      }
+    ), /* @__PURE__ */ React2.createElement(Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ React2.createElement(
+      DateInput,
+      {
+        size: "sm",
+        name: `kanban-filter-${filter.name}-to`,
+        label: "",
+        placeholder: labels.dateTo,
+        format: "medium",
+        value: rangeVal.to,
+        onChange: (val) => onChange(filter.name, { ...rangeVal, to: val })
+      }
+    ));
+  }
+  return /* @__PURE__ */ React2.createElement(
+    Select,
+    {
+      key: filter.name,
+      name: `kanban-filter-${filter.name}`,
+      variant: "transparent",
+      placeholder: filter.placeholder || "All",
+      value,
+      onChange: (val) => onChange(filter.name, val),
+      options: [
+        { label: filter.placeholder || "All", value: "" },
+        ...filter.options
+      ]
+    }
+  );
+};
+var renderMetricsPanel = (metrics) => {
+  if (!metrics) return null;
+  if (!Array.isArray(metrics)) return metrics;
+  if (metrics.length === 0) return null;
+  return /* @__PURE__ */ React2.createElement(Statistics, null, metrics.map((m, i) => /* @__PURE__ */ React2.createElement(
+    StatisticsItem,
+    {
+      key: m.id || m.label || i,
+      label: m.label,
+      number: m.number != null ? String(m.number) : ""
+    },
+    m.trend ? /* @__PURE__ */ React2.createElement(
+      StatisticsTrend,
+      {
+        direction: m.trend.direction || "increase",
+        value: m.trend.value,
+        color: m.trend.color
+      }
+    ) : null
+  )));
+};
+var KanbanToolbar = ({
+  showSearch,
+  searchValue,
+  searchPlaceholder,
+  onSearchChange,
+  filters,
+  filterValues,
+  onFilterChange,
+  filterInlineLimit,
+  showFilterBadges,
+  showClearFiltersButton,
+  activeChips,
+  onFilterRemove,
+  sortOptions,
+  sortValue,
+  onSortChange,
+  metrics,
+  showMetrics,
+  onToggleMetrics,
+  labels
+}) => {
+  const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const inlineFilters = (filters || []).slice(0, filterInlineLimit);
+  const overflowFilters = (filters || []).slice(filterInlineLimit);
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box, { flex: 3 }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch ? /* @__PURE__ */ React2.createElement(
+    SearchInput,
+    {
+      name: "kanban-search",
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChange: onSearchChange
+    }
+  ) : null, inlineFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  ), overflowFilters.length > 0 ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ React2.createElement(Icon, { name: "filter", size: "sm" }),
+    " ",
+    labels.filtersButton
+  ) : null), showMoreFilters && overflowFilters.length > 0 ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, overflowFilters.map(
+    (filter) => renderFilterControl({
+      filter,
+      value: filterValues[filter.name],
+      onChange: onFilterChange,
+      labels
+    })
+  )) : null, activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges ? activeChips.map((chip) => /* @__PURE__ */ React2.createElement(
+    Tag2,
+    {
+      key: chip.key,
+      variant: "default",
+      onDelete: () => onFilterRemove(chip.key)
+    },
+    chip.label
+  )) : null, showClearFiltersButton ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => onFilterRemove("all")
+    },
+    labels.clearAll
+  ) : null) : null)), (sortOptions == null ? void 0 : sortOptions.length) > 0 || metrics ? /* @__PURE__ */ React2.createElement(Box, { flex: 1, alignSelf: "start" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", justify: "end" }, sortOptions && sortOptions.length > 0 ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "secondary",
+      size: "small",
+      overlay: /* @__PURE__ */ React2.createElement(Modal, { id: "kanban-sort-modal", title: labels.sortButton }, /* @__PURE__ */ React2.createElement(ModalBody, null, /* @__PURE__ */ React2.createElement(
+        SortModalBody,
+        {
+          sortOptions,
+          sortValue,
+          onSortChange,
+          labels
+        }
+      )))
+    },
+    /* @__PURE__ */ React2.createElement(Icon, { name: "sortAmtDesc", size: "sm" }),
+    " ",
+    labels.sortButton
+  ) : null, metrics ? /* @__PURE__ */ React2.createElement(Button, { variant: "secondary", size: "small", onClick: onToggleMetrics }, /* @__PURE__ */ React2.createElement(Icon, { name: "reports", size: "sm" }), " ", labels.metricsButton) : null)) : null), showMetrics && metrics ? renderMetricsPanel(metrics) : null);
+};
+var DefaultSelectionBar = ({
+  selectedIds,
+  selectedCount,
+  displayCount,
+  countLabel,
+  allSelected,
+  onSelectAll,
+  onDeselectAll,
+  selectionActions,
+  labels
+}) => {
+  const pluralForCount = (n) => countLabel(n);
+  return /* @__PURE__ */ React2.createElement(Tile, { compact: true }, /* @__PURE__ */ React2.createElement(Inline, { align: "center", justify: "between", gap: "small" }, /* @__PURE__ */ React2.createElement(Inline, { align: "center", gap: "small" }, /* @__PURE__ */ React2.createElement(Text, { inline: true, format: { fontWeight: "demibold" } }, typeof labels.selected === "function" ? labels.selected(selectedCount, pluralForCount(selectedCount)) : `${selectedCount} selected`), !allSelected ? /* @__PURE__ */ React2.createElement(Button, { variant: "transparent", size: "extra-small", onClick: onSelectAll }, typeof labels.selectAll === "function" ? labels.selectAll(displayCount, pluralForCount(displayCount)) : labels.selectAll) : null, /* @__PURE__ */ React2.createElement(Button, { variant: "transparent", size: "extra-small", onClick: onDeselectAll }, labels.deselectAll)), (selectionActions || []).length > 0 ? /* @__PURE__ */ React2.createElement(Inline, { align: "center", gap: "extra-small" }, selectionActions.map((action, i) => /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      key: action.key || action.label || i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon ? /* @__PURE__ */ React2.createElement(Icon, { name: action.icon, size: "sm" }) : null,
+    " ",
+    action.label
+  ))) : null));
+};
+var Kanban = ({
+  // --- Data ---
+  data = [],
+  stages = [],
+  groupBy = "status",
+  rowIdField = "id",
+  // --- Card rendering ---
+  renderCard,
+  cardFields,
+  cardDensity = DEFAULT_DENSITY,
+  cardDividers,
+  cardBodyAs = "descriptionList",
+  maxBodyLines,
+  maxCardsPerColumn = DEFAULT_MAX_CARDS,
+  maxCardsExpanded = DEFAULT_MAX_EXPANDED,
+  expandedStages,
+  onExpandedStagesChange,
+  // --- Per-stage pagination ---
+  stageMeta,
+  onLoadMore,
+  // --- Selection ---
+  selectable = false,
+  selectedIds,
+  onSelectionChange,
+  selectionActions,
+  recordLabel,
+  selectionResetKey,
+  resetSelectionOnQueryChange = true,
+  showSelectionBar = true,
+  renderSelectionBar,
+  // --- Stage transitions ---
+  stageControl,
+  stageControlPlacement,
+  onStageChange,
+  isStageChanging,
+  canMove,
+  // --- Toolbar ---
+  showSearch = true,
+  searchFields,
+  searchPlaceholder,
+  searchDebounce = DEFAULT_SEARCH_DEBOUNCE,
+  fuzzySearch = false,
+  fuzzyOptions,
+  filters,
+  filterInlineLimit = DEFAULT_FILTER_INLINE_LIMIT,
+  showFilterBadges = true,
+  showClearFiltersButton = true,
+  sortOptions,
+  defaultSort,
+  sort,
+  onSortChange,
+  // --- Column level ---
+  columnFooter,
+  columnWidth = DEFAULT_COLUMN_WIDTH,
+  countDisplay = "tag",
+  collapsedStages,
+  onCollapsedStagesChange,
+  // --- Metrics panel ---
+  metrics,
+  // Array of stat items or a ReactNode for full override
+  showMetrics: controlledShowMetrics,
+  onMetricsToggle,
+  // --- State (controlled) ---
+  searchValue,
+  onSearchChange,
+  filterValues,
+  onFilterChange,
+  onParamsChange,
+  loading = false,
+  error,
+  // --- Labels ---
+  labels: labelsProp,
+  renderEmptyState,
+  renderLoadingState,
+  renderErrorState
+}) => {
+  var _a;
+  const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelsProp || {} }), [labelsProp]);
+  const [internalSearch, setInternalSearch] = useState(searchValue != null ? searchValue : "");
+  const [internalFilters, setInternalFilters] = useState(() => {
+    const init = {};
+    (filters || []).forEach((f) => {
+      init[f.name] = getEmptyFilterValue(f);
+    });
+    return init;
+  });
+  const [internalSort, setInternalSort] = useState(defaultSort || (((_a = sortOptions == null ? void 0 : sortOptions[0]) == null ? void 0 : _a.value) ?? ""));
+  const [internalCollapsed, setInternalCollapsed] = useState([]);
+  const [internalExpanded, setInternalExpanded] = useState([]);
+  const [internalSelection, setInternalSelection] = useState([]);
+  const [internalShowMetrics, setInternalShowMetrics] = useState(false);
+  const [transitionPrompts, setTransitionPrompts] = useState({});
+  const selectionResetRef = useRef("");
+  const resolvedShowMetrics = controlledShowMetrics != null ? controlledShowMetrics : internalShowMetrics;
+  const toggleMetrics = useCallback(() => {
+    const next = !resolvedShowMetrics;
+    if (onMetricsToggle) onMetricsToggle(next);
+    if (controlledShowMetrics == null) setInternalShowMetrics(next);
+  }, [resolvedShowMetrics, onMetricsToggle, controlledShowMetrics]);
+  const effectiveColumnWidth = Math.max(MIN_COLUMN_WIDTH, columnWidth || DEFAULT_COLUMN_WIDTH);
+  const resolvedSearch = searchValue != null ? searchValue : internalSearch;
+  const resolvedFilters = filterValues != null ? filterValues : internalFilters;
+  const resolvedSort = sort != null ? sort : internalSort;
+  const resolvedCollapsed = collapsedStages != null ? collapsedStages : internalCollapsed;
+  const resolvedExpanded = expandedStages != null ? expandedStages : internalExpanded;
+  const resolvedSelection = selectedIds != null ? selectedIds : internalSelection;
+  const searchEnabled = showSearch && Array.isArray(searchFields) && searchFields.length > 0;
+  const stagesByValue = useMemo(() => {
+    const map = {};
+    for (const stage of stages || []) {
+      map[stage.value] = stage;
+    }
+    return map;
+  }, [stages]);
+  const fireParamsChange = useCallback((overrides = {}) => {
+    if (!onParamsChange) return;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : resolvedSearch,
+      filters: overrides.filters != null ? overrides.filters : resolvedFilters,
+      sort: overrides.sort != null ? overrides.sort : resolvedSort || null,
+      collapsedStages: overrides.collapsedStages != null ? overrides.collapsedStages : resolvedCollapsed
+    });
+  }, [onParamsChange, resolvedCollapsed, resolvedFilters, resolvedSearch, resolvedSort]);
+  const debounceRef = useRef(null);
+  useEffect(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  const handleSearch = useCallback(
+    (val) => {
+      if (searchValue == null) setInternalSearch(val);
+      const dispatch = () => {
+        if (onSearchChange) onSearchChange(val);
+        fireParamsChange({ search: val });
+      };
+      if (searchDebounce > 0) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(dispatch, searchDebounce);
+      } else {
+        dispatch();
+      }
+    },
+    [fireParamsChange, onSearchChange, searchValue, searchDebounce]
+  );
+  const handleFilter = useCallback(
+    (name, val) => {
+      const next = { ...resolvedFilters, [name]: val };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [fireParamsChange, onFilterChange, filterValues, resolvedFilters]
+  );
+  const handleFilterRemove = useCallback(
+    (key) => {
+      if (key === "all") {
+        const cleared = {};
+        (filters || []).forEach((f) => {
+          cleared[f.name] = getEmptyFilterValue(f);
+        });
+        if (filterValues == null) setInternalFilters(cleared);
+        if (onFilterChange) onFilterChange(cleared);
+        fireParamsChange({ filters: cleared });
+        return;
+      }
+      const filter = (filters || []).find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue(filter) : "";
+      const next = { ...resolvedFilters, [key]: emptyVal };
+      if (filterValues == null) setInternalFilters(next);
+      if (onFilterChange) onFilterChange(next);
+      fireParamsChange({ filters: next });
+    },
+    [filters, filterValues, fireParamsChange, onFilterChange, resolvedFilters]
+  );
+  const handleSort = useCallback(
+    (val) => {
+      if (onSortChange) onSortChange(val);
+      if (sort == null) setInternalSort(val);
+      fireParamsChange({ sort: val });
+    },
+    [fireParamsChange, onSortChange, sort]
+  );
+  const handleCollapsed = useCallback(
+    (stageValue) => {
+      const next = resolvedCollapsed.includes(stageValue) ? resolvedCollapsed.filter((v) => v !== stageValue) : [...resolvedCollapsed, stageValue];
+      if (onCollapsedStagesChange) onCollapsedStagesChange(next);
+      if (collapsedStages == null) setInternalCollapsed(next);
+      fireParamsChange({ collapsedStages: next });
+    },
+    [fireParamsChange, resolvedCollapsed, collapsedStages, onCollapsedStagesChange]
+  );
+  const handleExpanded = useCallback(
+    (stageValue) => {
+      const next = resolvedExpanded.includes(stageValue) ? resolvedExpanded.filter((v) => v !== stageValue) : [...resolvedExpanded, stageValue];
+      if (onExpandedStagesChange) onExpandedStagesChange(next);
+      if (expandedStages == null) setInternalExpanded(next);
+    },
+    [resolvedExpanded, expandedStages, onExpandedStagesChange]
+  );
+  const handleToggleSelect = useCallback(
+    (rowId) => {
+      const next = resolvedSelection.includes(rowId) ? resolvedSelection.filter((id) => id !== rowId) : [...resolvedSelection, rowId];
+      if (onSelectionChange) onSelectionChange(next);
+      if (selectedIds == null) setInternalSelection(next);
+    },
+    [resolvedSelection, selectedIds, onSelectionChange]
+  );
+  const clearTransitionPrompt = useCallback((rowId) => {
+    setTransitionPrompts((prev) => {
+      if (!Object.prototype.hasOwnProperty.call(prev, rowId)) return prev;
+      const next = { ...prev };
+      delete next[rowId];
+      return next;
+    });
+  }, []);
+  const commitStageChange = useCallback(
+    (row, newStage, oldStage, result) => {
+      clearTransitionPrompt(row[rowIdField]);
+      if (onStageChange) onStageChange(row, newStage, oldStage, result);
+    },
+    [clearTransitionPrompt, onStageChange, rowIdField]
+  );
+  const selectionQueryKey = useMemo(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: resolvedSearch,
+      filters: resolvedFilters,
+      sort: resolvedSort || null
+    });
+  }, [resetSelectionOnQueryChange, resolvedFilters, resolvedSearch, resolvedSort]);
+  const combinedSelectionResetKey = useMemo(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  useEffect(() => {
+    if (!selectable || selectedIds != null) {
+      selectionResetRef.current = combinedSelectionResetKey;
+      return;
+    }
+    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
+      setInternalSelection([]);
+    }
+    selectionResetRef.current = combinedSelectionResetKey;
+  }, [combinedSelectionResetKey, selectable, selectedIds]);
+  const getStageFor = useCallback(
+    (row) => {
+      if (typeof groupBy === "function") return groupBy(row);
+      return row[groupBy];
+    },
+    [groupBy]
+  );
+  const filteredData = useMemo(() => {
+    let result = data;
+    for (const filter of filters || []) {
+      const val = resolvedFilters[filter.name];
+      if (!isFilterActive(filter, val)) continue;
+      const type = filter.type || "select";
+      if (filter.filterFn) {
+        result = result.filter((row) => filter.filterFn(row, val));
+      } else if (type === "multiselect") {
+        result = result.filter((row) => val.includes(row[filter.name]));
+      } else if (type === "dateRange") {
+        const fromTs = dateToTimestamp(val.from);
+        const toTs = val.to ? dateToTimestamp(val.to) + 864e5 - 1 : null;
+        result = result.filter((row) => {
+          const rowTs = new Date(row[filter.name]).getTime();
+          if (Number.isNaN(rowTs)) return false;
+          if (fromTs && rowTs < fromTs) return false;
+          if (toTs && rowTs > toTs) return false;
+          return true;
+        });
+      } else {
+        result = result.filter((row) => row[filter.name] === val);
+      }
+    }
+    const searchLower = (resolvedSearch || "").toLowerCase().trim();
+    if (searchEnabled && searchLower) {
+      if (fuzzySearch) {
+        const fuse = new Fuse(result, {
+          keys: searchFields,
+          threshold: 0.4,
+          distance: 100,
+          ignoreLocation: true,
+          ...fuzzyOptions
+        });
+        result = fuse.search(searchLower).map((r) => r.item);
+      } else {
+        result = result.filter(
+          (row) => searchFields.some(
+            (f) => String(row[f] || "").toLowerCase().includes(searchLower)
+          )
+        );
+      }
+    }
+    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 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 out = {};
+    for (const key of Object.keys(buckets)) {
+      out[key] = [...buckets[key]].sort(sortComparator);
+    }
+    return out;
+  }, [buckets, sortComparator]);
+  const activeChips = useMemo(() => {
+    const chips = [];
+    for (const filter of filters || []) {
+      const val = resolvedFilters[filter.name];
+      if (!isFilterActive(filter, val)) continue;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labelList = val.map((v) => {
+          var _a2;
+          return ((_a2 = filter.options.find((o) => o.value === v)) == null ? void 0 : _a2.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labelList}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (val.from) parts.push(`from ${formatDateChip(val.from)}`);
+        if (val.to) parts.push(`to ${formatDateChip(val.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const opt = filter.options.find((o) => o.value === val);
+        chips.push({ key: filter.name, label: `${prefix}: ${(opt == null ? void 0 : opt.label) || val}` });
+      }
+    }
+    return chips;
+  }, [filters, resolvedFilters]);
+  const partitioned = useMemo(() => partitionFields(cardFields || []), [cardFields]);
+  const dividers = useMemo(() => resolveDividers(cardDividers, cardDensity), [cardDividers, cardDensity]);
+  const resolvedMaxBody = maxBodyLines || (cardDensity === "comfortable" ? 5 : 3);
+  const resolvedStageControl = stageControl || (cardDensity === "comfortable" ? "select" : "menu");
+  const resolvedStageControlPlacement = stageControlPlacement || (resolvedStageControl === "menu" ? "inline" : "separateRow");
+  const handleStageChangeRequest = useCallback(
+    (row, newStage, oldStage) => {
+      var _a2;
+      if (!newStage || newStage === oldStage) return;
+      const targetStage = stagesByValue[newStage];
+      if (!targetStage || !canStageReceiveRow(targetStage, row, canMove)) return;
+      const rowId = row[rowIdField];
+      if ((_a2 = targetStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        setTransitionPrompts((prev) => ({
+          ...prev,
+          [rowId]: {
+            row,
+            fromStage: oldStage,
+            toStage: newStage
+          }
+        }));
+        return;
+      }
+      commitStageChange(row, newStage, oldStage);
+    },
+    [canMove, commitStageChange, rowIdField, stagesByValue]
+  );
+  const renderCardNode = useCallback(
+    (row, stage) => {
+      var _a2;
+      const rowId = row[rowIdField];
+      const activePrompt = transitionPrompts[rowId];
+      const promptStage = activePrompt ? stagesByValue[activePrompt.toStage] : null;
+      if ((_a2 = promptStage == null ? void 0 : promptStage.onEnterRequired) == null ? void 0 : _a2.render) {
+        return /* @__PURE__ */ React2.createElement(Tile, { key: rowId, compact: cardDensity === "compact" }, promptStage.onEnterRequired.render({
+          row: activePrompt.row,
+          fromStage: activePrompt.fromStage,
+          toStage: activePrompt.toStage,
+          onConfirm: (result) => commitStageChange(activePrompt.row, activePrompt.toStage, activePrompt.fromStage, result),
+          onCancel: () => clearTransitionPrompt(rowId)
+        }));
+      }
+      if (renderCard) {
+        return renderCard(row, {
+          stage,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          density: cardDensity,
+          onStageChange: (newStage) => handleStageChangeRequest(row, newStage, stage.value)
+        });
+      }
+      return /* @__PURE__ */ React2.createElement(
+        KanbanCard,
+        {
+          key: rowId,
+          row,
+          rowId,
+          stage,
+          stages,
+          fields: partitioned,
+          density: cardDensity,
+          dividers,
+          bodyAs: cardBodyAs,
+          maxBodyLines: resolvedMaxBody,
+          stageControl: resolvedStageControl,
+          stageControlPlacement: resolvedStageControlPlacement,
+          canMove,
+          onStageChangeRequest: handleStageChangeRequest,
+          isChanging: isStageChanging ? isStageChanging(row) : false,
+          selectable,
+          selected: resolvedSelection.includes(rowId),
+          onToggleSelect: handleToggleSelect,
+          labels
+        }
+      );
+    },
+    [
+      clearTransitionPrompt,
+      commitStageChange,
+      renderCard,
+      rowIdField,
+      partitioned,
+      cardDensity,
+      dividers,
+      resolvedMaxBody,
+      resolvedStageControl,
+      resolvedStageControlPlacement,
+      canMove,
+      isStageChanging,
+      selectable,
+      resolvedSelection,
+      handleStageChangeRequest,
+      handleToggleSelect,
+      labels,
+      stages,
+      stagesByValue,
+      transitionPrompts
+    ]
+  );
+  const totalMatching = filteredData.length;
+  const selectedCount = resolvedSelection.length;
+  const singular = ((recordLabel == null ? void 0 : recordLabel.singular) || "card").toLowerCase();
+  const plural = ((recordLabel == null ? void 0 : recordLabel.plural) || "cards").toLowerCase();
+  const countLabel = (n) => n === 1 ? singular : plural;
+  const resolvedSearchPlaceholder = searchPlaceholder ?? ((recordLabel == null ? void 0 : recordLabel.plural) ? `Search ${plural}...` : labels.search);
+  const selectionBarProps = {
+    selectedIds: resolvedSelection,
+    selectedCount,
+    displayCount: totalMatching,
+    countLabel,
+    allSelected: selectedCount >= totalMatching && totalMatching > 0,
+    onSelectAll: () => {
+      const allIds = filteredData.map((r) => r[rowIdField]);
+      if (onSelectionChange) onSelectionChange(allIds);
+      if (selectedIds == null) setInternalSelection(allIds);
+    },
+    onDeselectAll: () => {
+      if (onSelectionChange) onSelectionChange([]);
+      if (selectedIds == null) setInternalSelection([]);
+    },
+    selectionActions: selectionActions || [],
+    labels
+  };
+  const mainContent = error ? renderErrorState ? renderErrorState({
+    error,
+    title: labels.errorTitle,
+    message: typeof error === "string" ? error : labels.errorMessage
+  }) : /* @__PURE__ */ React2.createElement(Alert, { variant: "danger", title: labels.errorTitle }, typeof error === "string" ? error : labels.errorMessage) : loading && data.length === 0 ? renderLoadingState ? renderLoadingState({ label: labels.loading }) : /* @__PURE__ */ React2.createElement(LoadingSpinner, { size: "md", layout: "centered", label: labels.loading }) : filteredData.length === 0 ? renderEmptyState ? renderEmptyState({
+    title: labels.emptyTitle,
+    message: labels.emptyMessage
+  }) : /* @__PURE__ */ React2.createElement(Tile, null, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical", reverseOrder: true }, /* @__PURE__ */ React2.createElement(Text, null, labels.emptyMessage))) : /* @__PURE__ */ React2.createElement(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__ */ React2.createElement(AutoGrid, { key: stage.value, columnWidth: isCollapsed ? 72 : effectiveColumnWidth }, /* @__PURE__ */ React2.createElement(
+      KanbanColumn,
+      {
+        stage,
+        rows: visibleRows,
+        bucketCount: stageRows.length,
+        totalCount: meta == null ? void 0 : meta.totalCount,
+        hasMore: meta == null ? void 0 : meta.hasMore,
+        loading: meta == null ? void 0 : meta.loading,
+        error: meta == null ? void 0 : meta.error,
+        onLoadMore,
+        expanded: isExpanded,
+        onToggleExpanded: () => handleExpanded(stage.value),
+        collapsed: isCollapsed,
+        onToggleCollapsed: () => handleCollapsed(stage.value),
+        columnFooter,
+        countDisplay,
+        labels
+      },
+      visibleRows.map((row) => renderCardNode(row, stage))
+    ));
+  }));
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React2.createElement(
+    KanbanToolbar,
+    {
+      showSearch: searchEnabled,
+      searchValue: resolvedSearch,
+      searchPlaceholder: resolvedSearchPlaceholder,
+      onSearchChange: handleSearch,
+      filters,
+      filterValues: resolvedFilters,
+      onFilterChange: handleFilter,
+      filterInlineLimit,
+      showFilterBadges,
+      showClearFiltersButton,
+      activeChips,
+      onFilterRemove: handleFilterRemove,
+      sortOptions,
+      sortValue: resolvedSort,
+      onSortChange: handleSort,
+      metrics,
+      showMetrics: resolvedShowMetrics,
+      onToggleMetrics: toggleMetrics,
+      labels
+    }
+  ), showSelectionBar && selectable && selectedCount > 0 ? renderSelectionBar ? renderSelectionBar(selectionBarProps) : /* @__PURE__ */ React2.createElement(DefaultSelectionBar, { ...selectionBarProps }) : null, mainContent);
+};
+
+// packages/kanban/src/KanbanCardActions.jsx
+import React3 from "react";
+import {
+  Button as Button2,
+  Dropdown as Dropdown2,
+  Flex as Flex2,
+  Icon as Icon2,
+  Text as Text2
+} from "@hubspot/ui-extensions";
+var renderButton = (action, display, size) => {
+  const { key, label, icon, tooltip, variant = "transparent", disabled, onClick, href } = action;
+  const buttonProps = {
+    key: key || label,
+    variant,
+    size,
+    disabled,
+    tooltip: tooltip || label
+  };
+  if (href) buttonProps.href = typeof href === "string" ? href : href;
+  if (onClick) buttonProps.onClick = onClick;
+  if (display === "icon") {
+    return /* @__PURE__ */ React3.createElement(Button2, { ...buttonProps }, icon ? /* @__PURE__ */ React3.createElement(Icon2, { name: icon, size: "sm", screenReaderText: label }) : label);
+  }
+  if (display === "label") {
+    return /* @__PURE__ */ React3.createElement(Button2, { ...buttonProps }, label);
+  }
+  return /* @__PURE__ */ React3.createElement(Button2, { ...buttonProps }, /* @__PURE__ */ React3.createElement(Flex2, { direction: "row", align: "center", gap: "xs" }, icon ? /* @__PURE__ */ React3.createElement(Icon2, { name: icon, size: "sm", screenReaderText: label }) : null, /* @__PURE__ */ React3.createElement(Text2, { variant: "microcopy" }, label)));
+};
+var KanbanCardActions = ({
+  actions = [],
+  display = "icon",
+  // Default to xs — the Button's own padding at sm visibly pushes icons away
+  // from Tile edges. Icon glyph inside stays pinned to size="sm" in renderButton
+  // so the icon itself doesn't shrink, only the hit-target/button padding does.
+  size = "xs",
+  align = "end",
+  gap = "flush",
+  separator = "none",
+  overflowAfter,
+  overflowLabel = "More"
+}) => {
+  const visible = actions.filter((a) => a.visible !== false);
+  if (visible.length === 0) return null;
+  const cutoff = typeof overflowAfter === "number" ? Math.max(0, overflowAfter) : visible.length;
+  const primary = visible.slice(0, cutoff);
+  const overflow = visible.slice(cutoff);
+  const renderedPrimary = primary.map((action, idx) => {
+    const button = renderButton(action, display, size);
+    if (separator === "pipe" && idx > 0) {
+      return /* @__PURE__ */ React3.createElement(React3.Fragment, { key: `${action.key || action.label}-sep` }, /* @__PURE__ */ React3.createElement(Text2, { variant: "microcopy" }, "|"), button);
+    }
+    return button;
+  });
+  const renderedOverflow = overflow.length > 0 ? /* @__PURE__ */ React3.createElement(Dropdown2, { variant: "transparent", buttonText: overflowLabel, buttonSize: size, key: "overflow" }, overflow.map((action) => /* @__PURE__ */ React3.createElement(
+    Dropdown2.ButtonItem,
+    {
+      key: action.key || action.label,
+      onClick: action.onClick
+    },
+    action.label
+  ))) : null;
+  const justify = align === "end" ? "end" : align === "between" ? "between" : "start";
+  return /* @__PURE__ */ React3.createElement(Flex2, { direction: "row", align: "end", justify, gap }, renderedPrimary, renderedOverflow);
+};
+export {
+  Kanban,
+  KanbanCardActions
+};