@diagrammo/dgmo 0.71.0 → 0.72.0

package/dist/{chunk-UVAOL2EO.js → chunk-UKOOGXRF.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-FJ57274M.js";
 import {
   ScaleContext
-} from "./chunk-YYVTBZZC.js";
+} from "./chunk-24YPR5EH.js";
 import {
   serializeSvg
 } from "./chunk-RU2HHHYA.js";
@@ -168,6 +168,14 @@ var COLUMN_RADIUS = 8;
 var COLUMN_HEADER_RADIUS = 8;
 var COLLAPSED_COLUMN_WIDTH = 40;
 var COLLAPSED_LANE_HEIGHT = 26;
+var COLLAPSED_CHIP_HEIGHT = 16;
+var COLLAPSED_CHIP_GAP = 4;
+var COLLAPSED_CHIP_INSET = 6;
+var COLLAPSED_CHIP_RADIUS = 5;
+var COLLAPSED_NAME_GAP = 10;
+var COLLAPSED_CHIP_MAX_SLOTS = 4;
+var COLLAPSED_CHIP_MIN_WIDTH = 22;
+var COLLAPSED_CHIP_LABEL_PADDING = 10;
 function resolveCardTagMeta(card, tagGroups, hiddenMetaGroups) {
   const meta = [];
   for (const group of tagGroups) {
@@ -200,7 +208,38 @@ function resolveCardTagColor(card, tagGroups, activeTagGroup) {
   );
   return entry?.color;
 }
-function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardGap = CARD_GAP, sColumnMinWidth = COLUMN_MIN_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH) {
+function collapsedChips(cards, group) {
+  if (!group) return [];
+  const legendOrder = new Map(
+    group.entries.map((entry, index) => [entry.value.toLowerCase(), index])
+  );
+  const tagKey = tagAttrKey(group.name);
+  const byValue = /* @__PURE__ */ new Map();
+  for (const card of cards) {
+    const raw = card.tags[tagKey] ?? group.defaultValue;
+    if (!raw) continue;
+    const key = raw.toLowerCase();
+    const seen = byValue.get(key);
+    if (seen) {
+      seen.count++;
+      continue;
+    }
+    const entry = group.entries.find((e) => e.value.toLowerCase() === key);
+    byValue.set(key, {
+      value: entry?.value ?? raw,
+      count: 1,
+      ...entry?.color !== void 0 && { color: entry.color }
+    });
+  }
+  const rank = (key) => legendOrder.get(key) ?? Number.MAX_SAFE_INTEGER;
+  return [...byValue.entries()].sort(
+    ([aKey, a], [bKey, b]) => b.count - a.count || rank(aKey) - rank(bKey) || aKey.localeCompare(bKey)
+  ).map(([, entry]) => entry);
+}
+function collapsedLaneLabel(laneName, total) {
+  return `${laneName} (${total})`;
+}
+function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardPaddingX = CARD_PADDING_X, sCardPaddingY = CARD_PADDING_Y, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardMetaFontSize = CARD_META_FONT_SIZE, sCardGap = CARD_GAP, sColumnMinWidth = COLUMN_MIN_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, activeTagGroup = null, sCollapsedChipHeight = COLLAPSED_CHIP_HEIGHT, sCollapsedChipGap = COLLAPSED_CHIP_GAP, sCollapsedNameGap = COLLAPSED_NAME_GAP) {
   const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
   const headerHeight = showTitle ? sTitleHeight + 8 : 0;
   const startY = sDiagramPadding + headerHeight;
@@ -270,6 +309,31 @@ function computeLayout(parsed, _palette, collapsedColumns, hiddenMetaGroups, sDi
       cardLayouts
     });
   }
+  const layoutActiveGroup = activeTagGroup ? parsed.tagGroups.find(
+    (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
+  ) : void 0;
+  if (layoutActiveGroup) {
+    let nameExtent = 0;
+    let mostChips = 0;
+    for (const col of visibleColumns) {
+      if (!(collapsedColumns?.has(col.id) ?? false)) continue;
+      nameExtent = Math.max(
+        nameExtent,
+        measureText(col.name, sCardTitleFontSize, { bold: true })
+      );
+      mostChips = Math.max(
+        mostChips,
+        collapsedChips(col.cards, layoutActiveGroup).length
+      );
+    }
+    const slots = Math.min(mostChips, COLLAPSED_CHIP_MAX_SLOTS);
+    if (slots > 0) {
+      maxColumnHeight = Math.max(
+        maxColumnHeight,
+        sColumnHeaderHeight + sColumnPadding + nameExtent + sCollapsedNameGap + slots * sCollapsedChipHeight + (slots - 1) * sCollapsedChipGap + sColumnPadding
+      );
+    }
+  }
   let currentX = sDiagramPadding;
   for (const cl of columnLayouts) {
     cl.x = currentX;
@@ -327,6 +391,11 @@ function renderKanban(container, parsed, palette, isDark, options) {
   const sColumnHeaderRadius = ctx.structural(COLUMN_HEADER_RADIUS);
   const sCollapsedColumnWidth = ctx.structural(COLLAPSED_COLUMN_WIDTH);
   const sCollapsedLaneHeight = ctx.structural(COLLAPSED_LANE_HEIGHT);
+  const sCollapsedChipHeight = ctx.structural(COLLAPSED_CHIP_HEIGHT);
+  const sCollapsedChipGap = ctx.aesthetic(COLLAPSED_CHIP_GAP);
+  const sCollapsedChipInset = ctx.aesthetic(COLLAPSED_CHIP_INSET);
+  const sCollapsedChipRadius = ctx.structural(COLLAPSED_CHIP_RADIUS);
+  const sCollapsedNameGap = ctx.aesthetic(COLLAPSED_NAME_GAP);
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sLaneHeaderWidth = ctx.structural(LANE_HEADER_WIDTH);
   const sLaneGap = ctx.aesthetic(LANE_GAP);
@@ -350,7 +419,11 @@ function renderKanban(container, parsed, palette, isDark, options) {
     sCardGap,
     sColumnMinWidth,
     sColumnGap,
-    sCollapsedColumnWidth
+    sCollapsedColumnWidth,
+    activeTagGroup,
+    sCollapsedChipHeight,
+    sCollapsedChipGap,
+    sCollapsedNameGap
   );
   const width = exportDims?.width ?? layout.totalWidth;
   const height = exportDims?.height ?? layout.totalHeight;
@@ -441,12 +514,31 @@ function renderKanban(container, parsed, palette, isDark, options) {
       sCardPaddingX,
       sCardStrokeWidth,
       sCardTitleFontSize,
-      sCardMetaFontSize
+      sCardMetaFontSize,
+      {
+        height: sCollapsedChipHeight,
+        gap: sCollapsedChipGap,
+        inset: sCollapsedChipInset,
+        radius: sCollapsedChipRadius,
+        nameGap: sCollapsedNameGap,
+        fontSize: sCardMetaFontSize
+      }
     );
     return;
   }
   const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
   const defaultColHeaderBg = isDark ? mix(palette.surface, palette.bg, 70) : mix(palette.surface, palette.bg, 50);
+  const activeGroup = activeTagGroup ? parsed.tagGroups.find(
+    (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
+  ) : void 0;
+  const collapsedNameExtent = layout.columns.reduce(
+    (max, cl) => collapsedColumns?.has(cl.column.id) ?? false ? Math.max(
+      max,
+      measureText(cl.column.name, sCardTitleFontSize, { bold: true })
+    ) : max,
+    0
+  );
+  const collapsedChipTop = sColumnHeaderHeight + sColumnPadding + collapsedNameExtent + sCollapsedNameGap;
   for (const colLayout of layout.columns) {
     const col = colLayout.column;
     const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
@@ -466,6 +558,53 @@ function renderKanban(container, parsed, palette, isDark, options) {
       g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", sCollapsedColumnWidth).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", thisColHeaderBg);
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight / 2).attr("dominant-baseline", "central").attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", col.color ? onHeaderText : palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
       g.append("text").attr("x", colLayout.x + sCollapsedColumnWidth / 2).attr("y", colLayout.y + sColumnHeaderHeight + sColumnPadding).attr("font-size", sCardTitleFontSize).attr("font-weight", "bold").attr("fill", palette.text).attr("text-anchor", "middle").attr("writing-mode", "tb").text(col.name);
+      const chips = collapsedChips(col.cards, activeGroup);
+      if (chips.length > 0) {
+        const chipX = colLayout.x + sCollapsedChipInset;
+        const chipW = sCollapsedColumnWidth - sCollapsedChipInset * 2;
+        const step = sCollapsedChipHeight + sCollapsedChipGap;
+        const room = colLayout.height - collapsedChipTop - sColumnPadding;
+        const slots = Math.max(
+          0,
+          Math.floor((room + sCollapsedChipGap) / step)
+        );
+        const shown = chips.length > slots ? Math.max(0, slots - 1) : chips.length;
+        const hidden = chips.length - shown;
+        const cg = g.append("g").attr("class", "kanban-collapsed-chips");
+        const drawChip = (index, fill, stroke, label, title) => {
+          const y = colLayout.y + collapsedChipTop + index * step;
+          const chip = cg.append("g").attr("class", "kanban-collapsed-chip").attr("data-tag-value", title);
+          chip.append("rect").attr("x", chipX).attr("y", y).attr("width", chipW).attr("height", sCollapsedChipHeight).attr("rx", sCollapsedChipRadius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1);
+          chip.append("text").attr("x", chipX + chipW / 2).attr("y", y + sCollapsedChipHeight / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("font-size", sCardMetaFontSize).attr("font-weight", "bold").attr(
+            "fill",
+            contrastText(
+              fill,
+              palette.textOnFillLight,
+              palette.textOnFillDark
+            )
+          ).text(label);
+        };
+        for (let i = 0; i < shown; i++) {
+          const chip = chips[i];
+          const intent = chip.color ?? palette.textMuted;
+          drawChip(
+            i,
+            shapeFill(palette, intent, isDark, { mode: fillMode }),
+            intent,
+            String(chip.count),
+            chip.value
+          );
+        }
+        if (hidden > 0 && shown < slots) {
+          drawChip(
+            shown,
+            fillMode === "outline" ? baseBg : defaultColHeaderBg,
+            palette.textMuted,
+            `+${hidden}`,
+            `${hidden} more`
+          );
+        }
+      }
       continue;
     }
     g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", colLayout.height).attr("rx", sColumnRadius).attr("fill", fillMode === "outline" ? baseBg : thisColBg).call((sel) => {
@@ -558,6 +697,12 @@ function renderKanbanForExport(content, theme, palette) {
 }
 var LANE_HEADER_WIDTH = 140;
 var LANE_GAP = 14;
+var LANE_HEADER_TRIM = 8;
+var LANE_LABEL_X = 10;
+var LANE_DOT_ADVANCE = 14;
+var LANE_LABEL_BASELINE = 20;
+var COLLAPSED_LANE_FONT_SIZE = 10;
+var LANE_FONT_SIZE = 12;
 function drawSwimlaneIcon(parent, x, y, isActive, palette) {
   const iconG = parent.append("g").attr("class", "kanban-swimlane-icon").attr("transform", `translate(${x}, ${y})`);
   iconG.append("rect").attr("x", -5).attr("y", -5).attr("width", 22).attr("height", 18).attr("fill", "transparent");
@@ -611,11 +756,66 @@ function computeCardHeight(card, tagGroups, hiddenMetaGroups, sCardSeparatorGap
   const metaHeight = metaCount > 0 ? sCardSeparatorGap + 1 + sCardPaddingY + metaCount * sCardMetaLineHeight : 0;
   return sCardHeaderHeight + sCardPaddingY + metaHeight;
 }
-function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT) {
+function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, activeGroup, chipStyle) {
   const headerHeight = parsed.title && parsed.options["no-title"] !== "on" ? sTitleHeight + 8 : 0;
   const startY = sDiagramPadding + headerHeight;
+  const laneChipsByLane = /* @__PURE__ */ new Map();
+  let chipStartX = 0;
+  let chipWidth = 0;
+  let chipSlots = 0;
+  if (activeGroup && chipStyle) {
+    let widestLabel = 0;
+    for (const bucket of buckets) {
+      if (!(collapsedLanes?.has(bucket.laneName) ?? false)) continue;
+      const cards = Object.values(bucket.cellsByColumn).flat();
+      const chips = collapsedChips(cards, activeGroup);
+      if (chips.length === 0) continue;
+      laneChipsByLane.set(bucket.laneName, chips);
+      chipSlots = Math.max(chipSlots, chips.length);
+      widestLabel = Math.max(
+        widestLabel,
+        LANE_LABEL_X + (bucket.laneColor ? LANE_DOT_ADVANCE : 0) + measureText(
+          collapsedLaneLabel(bucket.laneName, cards.length),
+          COLLAPSED_LANE_FONT_SIZE
+        )
+      );
+    }
+    chipSlots = Math.min(chipSlots, COLLAPSED_CHIP_MAX_SLOTS);
+    if (chipSlots > 0) {
+      let widestChipLabel = 0;
+      for (const chips of laneChipsByLane.values()) {
+        const shown = chips.length > chipSlots ? chipSlots - 1 : chips.length;
+        for (let i = 0; i < shown; i++) {
+          widestChipLabel = Math.max(
+            widestChipLabel,
+            measureText(String(chips[i].count), chipStyle.fontSize, {
+              bold: true
+            })
+          );
+        }
+        if (chips.length > shown) {
+          widestChipLabel = Math.max(
+            widestChipLabel,
+            measureText(`+${chips.length - shown}`, chipStyle.fontSize, {
+              bold: true
+            })
+          );
+        }
+      }
+      chipWidth = Math.max(
+        COLLAPSED_CHIP_MIN_WIDTH,
+        widestChipLabel + COLLAPSED_CHIP_LABEL_PADDING
+      );
+      chipStartX = widestLabel + chipStyle.nameGap;
+    }
+  }
+  const ribbonWidth = chipSlots > 0 ? chipSlots * chipWidth + (chipSlots - 1) * (chipStyle?.gap ?? 0) : 0;
+  const laneHeaderWidth = ribbonWidth > 0 ? Math.max(
+    sLaneHeaderWidth,
+    chipStartX + ribbonWidth + (chipStyle?.inset ?? 0) + LANE_HEADER_TRIM
+  ) : sLaneHeaderWidth;
   const columnXs = [];
-  let currentX = sDiagramPadding + sLaneHeaderWidth;
+  let currentX = sDiagramPadding + laneHeaderWidth;
   for (const col of baseLayout.columns) {
     const isColCollapsed = collapsedColumns?.has(col.column.id) ?? false;
     const w = isColCollapsed ? sCollapsedColumnWidth : col.width;
@@ -634,7 +834,13 @@ function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, coll
         cards: bucket.cellsByColumn[colInfo.column.id] ?? [],
         cardLayouts: []
       }));
-      lanes.push({ bucket, y: laneY, height: sCollapsedLaneHeight, cells: cells2 });
+      lanes.push({
+        bucket,
+        y: laneY,
+        height: sCollapsedLaneHeight,
+        cells: cells2,
+        chips: laneChipsByLane.get(bucket.laneName) ?? []
+      });
       laneY += sCollapsedLaneHeight + sLaneGap;
       continue;
     }
@@ -693,15 +899,35 @@ function computeSwimlaneLayout(parsed, buckets, baseLayout, collapsedLanes, coll
       }
       return { column: tmp.column, cards: tmp.cards, cardLayouts };
     });
-    lanes.push({ bucket, y: laneY, height: laneHeight, cells });
+    lanes.push({ bucket, y: laneY, height: laneHeight, cells, chips: [] });
     laneY += laneHeight + sLaneGap;
   }
   const totalHeight = laneY - sLaneGap + sColumnPadding + sDiagramPadding;
-  return { columnXs, lanes, totalWidth, totalHeight, startY };
+  return {
+    columnXs,
+    lanes,
+    totalWidth,
+    totalHeight,
+    startY,
+    laneHeaderWidth,
+    laneChips: { startX: chipStartX, chipWidth, slots: chipSlots }
+  };
 }
-function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnRadius = COLUMN_RADIUS, sColumnHeaderRadius = COLUMN_HEADER_RADIUS, sWipFontSize = WIP_FONT_SIZE, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE) {
+function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, isDark, activeTagGroup, collapsedLanes, collapsedColumns, hiddenMetaGroups, sDiagramPadding = DIAGRAM_PADDING, sTitleHeight = TITLE_HEIGHT, sLaneHeaderWidth = LANE_HEADER_WIDTH, sColumnGap = COLUMN_GAP, sCollapsedColumnWidth = COLLAPSED_COLUMN_WIDTH, sColumnHeaderHeight = COLUMN_HEADER_HEIGHT, sColumnPadding = COLUMN_PADDING, sCardHeaderHeight = CARD_HEADER_HEIGHT, sCardPaddingY = CARD_PADDING_Y, sCardGap = CARD_GAP, sCollapsedLaneHeight = COLLAPSED_LANE_HEIGHT, sLaneGap = LANE_GAP, sCardSeparatorGap = CARD_SEPARATOR_GAP, sCardMetaLineHeight = CARD_META_LINE_HEIGHT, sColumnHeaderFontSize = COLUMN_HEADER_FONT_SIZE, sColumnRadius = COLUMN_RADIUS, sColumnHeaderRadius = COLUMN_HEADER_RADIUS, sWipFontSize = WIP_FONT_SIZE, sCardRadius = CARD_RADIUS, sCardPaddingX = CARD_PADDING_X, sCardStrokeWidth = CARD_STROKE_WIDTH, sCardTitleFontSize = CARD_TITLE_FONT_SIZE, sCardMetaFontSize = CARD_META_FONT_SIZE, chipStyle = {
+  height: COLLAPSED_CHIP_HEIGHT,
+  gap: COLLAPSED_CHIP_GAP,
+  inset: COLLAPSED_CHIP_INSET,
+  radius: COLLAPSED_CHIP_RADIUS,
+  nameGap: COLLAPSED_NAME_GAP,
+  fontSize: CARD_META_FONT_SIZE
+}) {
   const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
   const buckets = bucketCardsBySwimlane(visibleColumns, swimlaneGroup);
+  const fillMode = fillModeFromOptions(parsed.options);
+  const baseBg = themeBaseBg(palette, isDark);
+  const activeGroup = activeTagGroup && activeTagGroup.toLowerCase() !== swimlaneGroup.name.toLowerCase() ? parsed.tagGroups.find(
+    (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
+  ) : void 0;
   const grid = computeSwimlaneLayout(
     parsed,
     buckets,
@@ -722,7 +948,9 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
     sCollapsedLaneHeight,
     sLaneGap,
     sCardSeparatorGap,
-    sCardMetaLineHeight
+    sCardMetaLineHeight,
+    activeGroup,
+    chipStyle
   );
   const currentW = parseFloat(svg.attr("width") || "0");
   const currentH = parseFloat(svg.attr("height") || "0");
@@ -746,9 +974,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
     const col = colInfo.column;
     const isColCollapsed = collapsedColumns?.has(col.id) ?? false;
     const headerG = svg.append("g").attr("class", "kanban-column kanban-column-header").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
-    const colHeaderBg = col.color ? shapeFill(palette, col.color, isDark, {
-      mode: fillModeFromOptions(parsed.options)
-    }) : defaultColHeaderBg;
+    const colHeaderBg = col.color ? shapeFill(palette, col.color, isDark, { mode: fillMode }) : defaultColHeaderBg;
     headerG.append("rect").attr("x", colInfo.x).attr("y", grid.startY).attr("width", colInfo.width).attr("height", sColumnHeaderHeight).attr("rx", sColumnHeaderRadius).attr("fill", colHeaderBg);
     if (isColCollapsed) {
       headerG.append("text").attr("x", colInfo.x + colInfo.width / 2).attr("y", grid.startY + sColumnHeaderHeight / 2).attr("dominant-baseline", "central").attr("font-size", sWipFontSize).attr("font-weight", "bold").attr("fill", palette.textMuted).attr("text-anchor", "middle").text(String(col.cards.length));
@@ -766,17 +992,53 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
       "transform",
       `translate(${sDiagramPadding}, ${lane.y - sColumnPadding})`
     );
-    headerG.append("rect").attr("x", 0).attr("y", 0).attr("width", sLaneHeaderWidth - 8).attr("height", lane.height + sColumnPadding * 2).attr("rx", sColumnRadius).attr("fill", defaultColBg);
-    let labelX = 10;
+    headerG.append("rect").attr("x", 0).attr("y", 0).attr("width", grid.laneHeaderWidth - LANE_HEADER_TRIM).attr("height", lane.height + sColumnPadding * 2).attr("rx", sColumnRadius).attr("fill", defaultColBg);
+    let labelX = LANE_LABEL_X;
     const totalCards = lane.cells.reduce((s, c) => s + c.cards.length, 0);
     if (lane.bucket.laneColor) {
       headerG.append("circle").attr("cx", labelX + 4).attr("cy", 16).attr("r", 4).attr("fill", lane.bucket.laneColor);
-      labelX += 14;
+      labelX += LANE_DOT_ADVANCE;
     }
     if (isLaneCollapsed) {
-      headerG.append("text").attr("x", labelX).attr("y", 20).attr("font-size", 10).attr("fill", palette.textMuted).text(`${lane.bucket.laneName} (${totalCards})`);
+      headerG.append("text").attr("x", labelX).attr("y", LANE_LABEL_BASELINE).attr("font-size", COLLAPSED_LANE_FONT_SIZE).attr("fill", palette.textMuted).text(collapsedLaneLabel(lane.bucket.laneName, totalCards));
     } else {
-      headerG.append("text").attr("x", labelX).attr("y", 20).attr("font-size", 12).attr("font-weight", "bold").attr("fill", lane.bucket.isFallback ? palette.textMuted : palette.text).text(lane.bucket.laneName);
+      headerG.append("text").attr("x", labelX).attr("y", LANE_LABEL_BASELINE).attr("font-size", LANE_FONT_SIZE).attr("font-weight", "bold").attr("fill", lane.bucket.isFallback ? palette.textMuted : palette.text).text(lane.bucket.laneName);
+    }
+    if (isLaneCollapsed && lane.chips.length > 0 && grid.laneChips.slots > 0) {
+      const { startX, chipWidth, slots } = grid.laneChips;
+      const shown = lane.chips.length > slots ? Math.max(0, slots - 1) : lane.chips.length;
+      const hidden = lane.chips.length - shown;
+      const step = chipWidth + chipStyle.gap;
+      const chipY = LANE_LABEL_BASELINE - chipStyle.height / 2 - 4;
+      const cg = headerG.append("g").attr("class", "kanban-collapsed-chips");
+      const drawChip = (index, fill, stroke, label, title) => {
+        const chip = cg.append("g").attr("class", "kanban-collapsed-chip").attr("data-tag-value", title);
+        chip.append("rect").attr("x", startX + index * step).attr("y", chipY).attr("width", chipWidth).attr("height", chipStyle.height).attr("rx", chipStyle.radius).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1);
+        chip.append("text").attr("x", startX + index * step + chipWidth / 2).attr("y", chipY + chipStyle.height / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("font-size", chipStyle.fontSize).attr("font-weight", "bold").attr(
+          "fill",
+          contrastText(fill, palette.textOnFillLight, palette.textOnFillDark)
+        ).text(label);
+      };
+      for (let i = 0; i < shown; i++) {
+        const chip = lane.chips[i];
+        const intent = chip.color ?? palette.textMuted;
+        drawChip(
+          i,
+          shapeFill(palette, intent, isDark, { mode: fillMode }),
+          intent,
+          String(chip.count),
+          chip.value
+        );
+      }
+      if (hidden > 0 && shown < slots) {
+        drawChip(
+          shown,
+          fillMode === "outline" ? baseBg : defaultColHeaderBg,
+          palette.textMuted,
+          `+${hidden}`,
+          `${hidden} more`
+        );
+      }
     }
     if (isLaneCollapsed) {
       for (const cell of lane.cells) {
@@ -796,7 +1058,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
         }
       }
     }
-    laneG.append("line").attr("x1", sDiagramPadding + sLaneHeaderWidth).attr("x2", grid.totalWidth - sDiagramPadding).attr("y1", lane.y + lane.height + sColumnPadding).attr("y2", lane.y + lane.height + sColumnPadding).attr("stroke", palette.border ?? palette.textMuted).attr("stroke-opacity", 0.4).attr("stroke-width", 1);
+    laneG.append("line").attr("x1", sDiagramPadding + grid.laneHeaderWidth).attr("x2", grid.totalWidth - sDiagramPadding).attr("y1", lane.y + lane.height + sColumnPadding).attr("y2", lane.y + lane.height + sColumnPadding).attr("stroke", palette.border ?? palette.textMuted).attr("stroke-opacity", 0.4).attr("stroke-width", 1);
     if (!isLaneCollapsed) {
       for (const cell of lane.cells) {
         const isColCollapsed = collapsedColumns?.has(cell.column.id) ?? false;
@@ -820,7 +1082,7 @@ function renderSwimlaneBoard(svg, parsed, baseLayout, swimlaneGroup, palette, is
             palette,
             isDark,
             hiddenMetaGroups,
-            fillModeFromOptions(parsed.options),
+            fillMode,
             sCardRadius,
             sCardPaddingX,
             sCardPaddingY,
@@ -892,4 +1154,4 @@ export {
   renderKanban,
   renderKanbanForExport
 };
-//# sourceMappingURL=chunk-UVAOL2EO.js.map
+//# sourceMappingURL=chunk-UKOOGXRF.js.map

package/dist/{chunk-ZNHPCITV.js → chunk-VLXYWPPE.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-YRYKTYMQ.js";
 import {
   ScaleContext
-} from "./chunk-YYVTBZZC.js";
+} from "./chunk-24YPR5EH.js";
 import {
   createTooltip,
   hideTooltip,
@@ -1672,4 +1672,4 @@ export {
   formatDateLabel,
   renderTimeline
 };
-//# sourceMappingURL=chunk-ZNHPCITV.js.map
+//# sourceMappingURL=chunk-VLXYWPPE.js.map

package/dist/{chunk-IQ4W4Q2R.js → chunk-WRWUZ2C4.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-WGC42WJU.js";
 import {
   ScaleContext
-} from "./chunk-YYVTBZZC.js";
+} from "./chunk-24YPR5EH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -428,4 +428,4 @@ export {
   renderPyramid,
   renderPyramidForExport
 };
-//# sourceMappingURL=chunk-IQ4W4Q2R.js.map
+//# sourceMappingURL=chunk-WRWUZ2C4.js.map

package/dist/{dgmo-router-J6OWNMEJ.js → dgmo-router-O55I5UXN.js}

@@ -9,7 +9,7 @@ import {
   looksLikeGantt,
   parseDgmo,
   parseDgmoChartType
-} from "./chunk-PLSTP7P4.js";
+} from "./chunk-HZQCKXPB.js";
 import "./chunk-NEC7R2CB.js";
 import "./chunk-A2RUBBVT.js";
 import "./chunk-MC2H32SM.js";
@@ -86,4 +86,4 @@ export {
   parseDgmo,
   parseDgmoChartType
 };
-//# sourceMappingURL=dgmo-router-J6OWNMEJ.js.map
+//# sourceMappingURL=dgmo-router-O55I5UXN.js.map

package/dist/{flowchart-renderer-HB277GNE.js → flowchart-renderer-JMGOCLTQ.js}

@@ -1,7 +1,7 @@
 import {
   renderFlowchart,
   renderFlowchartForExport
-} from "./chunk-5GTYY2XV.js";
+} from "./chunk-P6RPHRX7.js";
 import "./chunk-PDKUANDZ.js";
 import "./chunk-IKHV5IJB.js";
 import "./chunk-LP7EC4MI.js";
@@ -12,7 +12,7 @@ import "./chunk-5DH3KYFH.js";
 import "./chunk-NCT22MOD.js";
 import "./chunk-WGC42WJU.js";
 import "./chunk-FJ57274M.js";
-import "./chunk-YYVTBZZC.js";
+import "./chunk-24YPR5EH.js";
 import "./chunk-RU2HHHYA.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-UTCPNJND.js";
@@ -33,4 +33,4 @@ export {
   renderFlowchart,
   renderFlowchartForExport
 };
-//# sourceMappingURL=flowchart-renderer-HB277GNE.js.map
+//# sourceMappingURL=flowchart-renderer-JMGOCLTQ.js.map

package/dist/index.js

@@ -11,10 +11,10 @@ import {
 } from "./chunk-SQAG3UXH.js";
 import {
   render
-} from "./chunk-XJZSN42P.js";
+} from "./chunk-7RAWNJI5.js";
 import {
   renderErrorCard
-} from "./chunk-HTGYAMOK.js";
+} from "./chunk-6OAKQTXQ.js";
 import {
   MAP_DIAGNOSTICS
 } from "./chunk-EOYPX6SF.js";
@@ -24,9 +24,9 @@ import {
   supportsD3DataChart
 } from "./chunk-VE7PPEU3.js";
 import "./chunk-L65WI4HO.js";
-import "./chunk-ZNHPCITV.js";
+import "./chunk-VLXYWPPE.js";
 import "./chunk-YRYKTYMQ.js";
-import "./chunk-YYVTBZZC.js";
+import "./chunk-24YPR5EH.js";
 import "./chunk-SPA7DCB3.js";
 import "./chunk-6CLC26GU.js";
 import "./chunk-RU2HHHYA.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk-U7VO6JAA.js";
 import {
   parseDgmo
-} from "./chunk-PLSTP7P4.js";
+} from "./chunk-HZQCKXPB.js";
 import "./chunk-NEC7R2CB.js";
 import "./chunk-A2RUBBVT.js";
 import "./chunk-MC2H32SM.js";
@@ -791,6 +791,10 @@ var UNIVERSAL_DIAGNOSTICS = [
     title: "Active tag group not found",
     message: "`active-tag` names a group the diagram does not declare, so nothing is coloured.",
     hint: "Check the spelling against the declared `tag` groups, or use `active-tag none` to colour nothing on purpose.",
+    // The group name in this example is misspelled on purpose — showing a name
+    // that matches no declared group is the example's whole job. Ignored for
+    // this file rather than added to cspell.json, which would excuse the same
+    // typo anywhere in the library. cspell:ignore Rnak
     example: "org Crew\nactive-tag Rnak\n\ntag Rank as r\n  Captain red\n\nBlackbeard r: Captain\n"
   },
   {

package/dist/{layout-BNR6ZDB6.js → layout-4D5JRUHX.js}

@@ -1,6 +1,6 @@
 import {
   layoutOrg
-} from "./chunk-CH4WODSG.js";
+} from "./chunk-FTPNAYL2.js";
 import "./chunk-QX53GOI7.js";
 import "./chunk-MTGGOCND.js";
 import "./chunk-DPGI742S.js";
@@ -12,4 +12,4 @@ import "./chunk-5WRI5ZAA.js";
 export {
   layoutOrg
 };
-//# sourceMappingURL=layout-BNR6ZDB6.js.map
+//# sourceMappingURL=layout-4D5JRUHX.js.map

package/dist/{layout-N6ZOOAYT.js → layout-VMDNULKS.js}

@@ -1,7 +1,7 @@
 import {
   layoutMindmap
-} from "./chunk-6EDBUKC7.js";
-import "./chunk-YYVTBZZC.js";
+} from "./chunk-IXVK7XCN.js";
+import "./chunk-24YPR5EH.js";
 import "./chunk-MTGGOCND.js";
 import "./chunk-IYULMRBE.js";
 import "./chunk-DPGI742S.js";
@@ -12,4 +12,4 @@ import "./chunk-5WRI5ZAA.js";
 export {
   layoutMindmap
 };
-//# sourceMappingURL=layout-N6ZOOAYT.js.map
+//# sourceMappingURL=layout-VMDNULKS.js.map

package/dist/{layout-PBB2RQJ4.js → layout-VVTXA3W2.js}

@@ -1,6 +1,6 @@
 import {
   layoutSitemap
-} from "./chunk-CR5WIA6I.js";
+} from "./chunk-N34OTOGH.js";
 import "./chunk-QX53GOI7.js";
 import "./chunk-MTGGOCND.js";
 import "./chunk-DPGI742S.js";
@@ -12,4 +12,4 @@ import "./chunk-5WRI5ZAA.js";
 export {
   layoutSitemap
 };
-//# sourceMappingURL=layout-PBB2RQJ4.js.map
+//# sourceMappingURL=layout-VVTXA3W2.js.map

package/dist/{renderer-7VPABTMS.js → renderer-2T2RAFWX.js}

@@ -3,14 +3,14 @@ import {
   focusEventLine,
   renderEventLine,
   renderEventLineForExport
-} from "./chunk-2JY7KE7C.js";
+} from "./chunk-66VHK7PP.js";
 import "./chunk-NCT22MOD.js";
 import "./chunk-5GM6BZO7.js";
 import "./chunk-WGC42WJU.js";
 import "./chunk-FJ57274M.js";
-import "./chunk-ZNHPCITV.js";
+import "./chunk-VLXYWPPE.js";
 import "./chunk-YRYKTYMQ.js";
-import "./chunk-YYVTBZZC.js";
+import "./chunk-24YPR5EH.js";
 import "./chunk-SPA7DCB3.js";
 import "./chunk-6CLC26GU.js";
 import "./chunk-RU2HHHYA.js";
@@ -35,4 +35,4 @@ export {
   renderEventLine,
   renderEventLineForExport
 };
-//# sourceMappingURL=renderer-7VPABTMS.js.map
+//# sourceMappingURL=renderer-2T2RAFWX.js.map

package/dist/{renderer-35HBBPIQ.js → renderer-4DFEFP4X.js}

@@ -1,9 +1,9 @@
 import {
   buildTagLaneRowList,
   renderGantt
-} from "./chunk-RNSGPTOZ.js";
+} from "./chunk-O4OVVK6J.js";
 import "./chunk-YRYKTYMQ.js";
-import "./chunk-YYVTBZZC.js";
+import "./chunk-24YPR5EH.js";
 import "./chunk-6CLC26GU.js";
 import "./chunk-A4GOY3PE.js";
 import "./chunk-6S53NO3M.js";
@@ -23,4 +23,4 @@ export {
   buildTagLaneRowList,
   renderGantt
 };
-//# sourceMappingURL=renderer-35HBBPIQ.js.map
+//# sourceMappingURL=renderer-4DFEFP4X.js.map