@diagrammo/dgmo 0.71.0 → 0.73.0

package/dist/{chunk-UVAOL2EO.js → chunk-H454ZVAS.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";
@@ -16,36 +16,36 @@ import {
 } from "./chunk-A4GOY3PE.js";
 import {
   renderIntegratedLegend
-} from "./chunk-6S53NO3M.js";
+} from "./chunk-O7ZKDUDX.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-MTPKBSTR.js";
+} from "./chunk-4SXHMFFP.js";
 import {
   FONT_FAMILY
 } from "./chunk-UTCPNJND.js";
 import {
   LEGEND_HEIGHT,
   measureLegendText
-} from "./chunk-QX53GOI7.js";
+} from "./chunk-YT5ICQ4R.js";
 import {
   measureText
 } from "./chunk-MTGGOCND.js";
 import {
   parseKanban
-} from "./chunk-MKNWMFZU.js";
+} from "./chunk-7VMUKH2Z.js";
 import {
   tagAttrKey
-} from "./chunk-DPGI742S.js";
+} from "./chunk-4FKEI4MF.js";
 import {
   fillModeFromOptions,
   legendSuppressed
-} from "./chunk-ZJJWON5O.js";
+} from "./chunk-MK55PZVB.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-KWRW6BLG.js";
+} from "./chunk-GLREDNBA.js";
 
 // src/kanban/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -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-H454ZVAS.js.map

package/dist/{chunk-VMXV2CL5.js → chunk-HQ34V2XV.js}

@@ -1,7 +1,7 @@
 import {
   extractDatePrefix,
   parseTimelineDate
-} from "./chunk-NNMNHE3J.js";
+} from "./chunk-VQEW7XMN.js";
 import {
   makeYearContext,
   parseDateToken,
@@ -16,7 +16,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-DPGI742S.js";
+} from "./chunk-4FKEI4MF.js";
 import {
   EVENT_LINE_REGISTRY,
   extractColor,
@@ -27,14 +27,14 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-ZJJWON5O.js";
+} from "./chunk-MK55PZVB.js";
 import {
   emit,
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-OLMWTJVU.js";
+} from "./chunk-5SI6T5A5.js";
 
 // src/event-line/diagnostics.ts
 var EVENT_LINE_DX = {
@@ -686,4 +686,4 @@ export {
   EVENT_LINE_DIAGNOSTICS,
   parseEventLine
 };
-//# sourceMappingURL=chunk-VMXV2CL5.js.map
+//# sourceMappingURL=chunk-HQ34V2XV.js.map

package/dist/{chunk-YG35ZCNW.js → chunk-I4YT5KL6.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-C3Z4DX3V.js";
 import {
   parseInArrowLabel
-} from "./chunk-RRX4Z4TH.js";
+} from "./chunk-IHOFUR74.js";
 import {
   tryStripDescriptionKeyword
 } from "./chunk-IYULMRBE.js";
@@ -18,8 +18,9 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-DPGI742S.js";
+} from "./chunk-4FKEI4MF.js";
 import {
+  AliasRegistry,
   C4_REGISTRY,
   OPTION_NOCOLON_RE,
   extractColor,
@@ -29,13 +30,13 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-ZJJWON5O.js";
+} from "./chunk-MK55PZVB.js";
 import {
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-OLMWTJVU.js";
+} from "./chunk-5SI6T5A5.js";
 
 // src/c4/parser.ts
 var CONTAINER_RE = /^\[([^\]]+)\](?:\s+(collapsed)|\s+collapsed:\s*(\S+))?$/;
@@ -182,10 +183,10 @@ function parseC4(content, palette) {
   let inDeployment = false;
   let currentTagGroup = null;
   const metaAliasMap = /* @__PURE__ */ new Map();
-  const nameAliasMap = /* @__PURE__ */ new Map();
+  const nameAliasMap = new AliasRegistry();
   function resolveNameRef(rawName) {
     const trimmed = rawName.trim();
-    return nameAliasMap.get(trimmed) ?? peelQuotedName(trimmed);
+    return nameAliasMap.resolve(trimmed) ?? peelQuotedName(trimmed);
   }
   const knownNames = /* @__PURE__ */ new Map();
   const elementMetadata = /* @__PURE__ */ new WeakMap();
@@ -195,6 +196,7 @@ function parseC4(content, palette) {
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const lineNumber = i + 1;
+    nameAliasMap.at(lineNumber);
     const trimmed = line.trim();
     if (!trimmed) {
       if (currentTagGroup) currentTagGroup = null;
@@ -245,6 +247,30 @@ function parseC4(content, palette) {
       result.tagGroups.push(currentTagGroup);
       continue;
     }
+    if (currentTagGroup && !contentStarted) {
+      const indent2 = measureIndent(line);
+      if (indent2 > 0) {
+        const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
+        if (isDefault) {
+          currentTagGroup.defaultValue = label;
+        } else if (currentTagGroup.entries.length === 0) {
+          currentTagGroup.defaultValue = label;
+        }
+        currentTagGroup.entries.push({
+          value: label,
+          color: color ?? AUTO_TAG_COLOR_SENTINEL,
+          lineNumber
+        });
+        continue;
+      }
+      currentTagGroup = null;
+    }
     if (!contentStarted && !currentTagGroup && measureIndent(line) === 0) {
       if (KNOWN_C4_BOOLEANS.has(trimmed.toLowerCase())) {
         const boolKey = trimmed.toLowerCase();
@@ -272,30 +298,6 @@ function parseC4(content, palette) {
         }
       }
     }
-    if (currentTagGroup && !contentStarted) {
-      const indent2 = measureIndent(line);
-      if (indent2 > 0) {
-        const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(
-          cleanEntry,
-          palette,
-          result.diagnostics,
-          lineNumber
-        );
-        if (isDefault) {
-          currentTagGroup.defaultValue = label;
-        } else if (currentTagGroup.entries.length === 0) {
-          currentTagGroup.defaultValue = label;
-        }
-        currentTagGroup.entries.push({
-          value: label,
-          color: color ?? AUTO_TAG_COLOR_SENTINEL,
-          lineNumber
-        });
-        continue;
-      }
-      currentTagGroup = null;
-    }
     contentStarted = true;
     currentTagGroup = null;
     if (!sawChartType) {
@@ -528,7 +530,8 @@ function parseC4(content, palette) {
       }
       namePart = peelQuotedName(namePart);
       if (declaredAlias !== void 0)
-        nameAliasMap.set(declaredAlias, namePart);
+        nameAliasMap.declare(declaredAlias, namePart, lineNumber);
+      nameAliasMap.noteCanonical(namePart, lineNumber);
       let elementType;
       let explicitShape = null;
       if (rawType === "external") {
@@ -750,6 +753,7 @@ function parseC4(content, palette) {
       "W_ACTIVE_TAG_NO_MATCH"
     );
   }
+  result.diagnostics.push(...nameAliasMap.finish());
   return result;
 }
 function findParentElement(indent, stack) {
@@ -845,4 +849,4 @@ function validateDeploymentRefs(result, knownNames, pushWarning) {
 export {
   parseC4
 };
-//# sourceMappingURL=chunk-YG35ZCNW.js.map
+//# sourceMappingURL=chunk-I4YT5KL6.js.map