@diagrammo/dgmo 0.2.20 → 0.2.22

package/dist/index.cjs

@@ -3977,16 +3977,15 @@ function buildFunnelOption(parsed, textColor, colors, titleConfig, tooltipTheme)
         const val = p.value;
         const prev = prevValueMap.get(p.name) ?? val;
         const isFirst = p.dataIndex === 0;
-        let html = `<strong>${p.name}</strong>: ${val}`;
-        if (!isFirst) {
-          const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-          html += `<br/>Step drop-off: ${stepDrop}%`;
-        }
-        if (!isFirst && topValue > 0) {
+        if (isFirst) return "";
+        const parts = [];
+        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
+        parts.push(`Step drop-off: ${stepDrop}%`);
+        if (topValue > 0) {
           const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          html += `<br/>Overall drop-off: ${totalDrop}%`;
+          parts.push(`Overall drop-off: ${totalDrop}%`);
         }
-        return html;
+        return parts.join("<br/>");
       }
     },
     series: [
@@ -4543,6 +4542,7 @@ var init_echarts = __esm({
 // src/org/parser.ts
 var parser_exports4 = {};
 __export(parser_exports4, {
+  looksLikeOrg: () => looksLikeOrg,
   parseOrg: () => parseOrg
 });
 function measureIndent5(line5) {
@@ -4563,6 +4563,14 @@ function extractColor2(label, palette) {
     color: resolveColor(colorName, palette)
   };
 }
+function looksLikeOrg(content) {
+  for (const line5 of content.split("\n")) {
+    const trimmed = line5.trim();
+    if (!trimmed || trimmed.startsWith("//")) continue;
+    if (GROUP_HEADING_RE2.test(trimmed)) return true;
+  }
+  return false;
+}
 function parseOrg(content, palette) {
   const result = {
     title: null,
@@ -4721,7 +4729,7 @@ function parseOrg(content, palette) {
       attachNode(node, indent, indentStack, result);
     }
   }
-  if (result.roots.length === 0 && !result.error) {
+  if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
     const diag = makeDgmoError(1, "No nodes found in org chart");
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
@@ -4802,6 +4810,289 @@ var init_parser4 = __esm({
   }
 });
 
+// src/kanban/parser.ts
+var parser_exports5 = {};
+__export(parser_exports5, {
+  parseKanban: () => parseKanban
+});
+function measureIndent6(line5) {
+  let indent = 0;
+  for (const ch of line5) {
+    if (ch === " ") indent++;
+    else if (ch === "	") indent += 4;
+    else break;
+  }
+  return indent;
+}
+function extractColor3(label, palette) {
+  const m = label.match(COLOR_SUFFIX_RE3);
+  if (!m) return { label };
+  const colorName = m[1].trim();
+  return {
+    label: label.substring(0, m.index).trim(),
+    color: resolveColor(colorName, palette)
+  };
+}
+function parseKanban(content, palette) {
+  const result = {
+    type: "kanban",
+    columns: [],
+    tagGroups: [],
+    options: {},
+    diagnostics: []
+  };
+  const fail = (line5, message) => {
+    const diag = makeDgmoError(line5, message);
+    result.diagnostics.push(diag);
+    result.error = formatDgmoError(diag);
+    return result;
+  };
+  const warn = (line5, message) => {
+    result.diagnostics.push(makeDgmoError(line5, message, "warning"));
+  };
+  if (!content || !content.trim()) {
+    return fail(0, "No content provided");
+  }
+  const lines = content.split("\n");
+  let contentStarted = false;
+  let currentTagGroup = null;
+  let currentColumn = null;
+  let currentCard = null;
+  let columnCounter = 0;
+  let cardCounter = 0;
+  const aliasMap = /* @__PURE__ */ new Map();
+  const tagValueSets = /* @__PURE__ */ new Map();
+  for (let i = 0; i < lines.length; i++) {
+    const line5 = lines[i];
+    const lineNumber = i + 1;
+    const trimmed = line5.trim();
+    if (!trimmed) {
+      if (currentTagGroup) currentTagGroup = null;
+      continue;
+    }
+    if (trimmed.startsWith("//")) continue;
+    if (!contentStarted && !currentTagGroup) {
+      const chartMatch = trimmed.match(CHART_TYPE_RE2);
+      if (chartMatch) {
+        const chartType = chartMatch[1].trim().toLowerCase();
+        if (chartType !== "kanban") {
+          const allTypes = [
+            "kanban",
+            "org",
+            "class",
+            "flowchart",
+            "sequence",
+            "er",
+            "bar",
+            "line",
+            "pie"
+          ];
+          let msg = `Expected chart type "kanban", got "${chartType}"`;
+          const hint = suggest(chartType, allTypes);
+          if (hint) msg += `. ${hint}`;
+          return fail(lineNumber, msg);
+        }
+        continue;
+      }
+    }
+    if (!contentStarted && !currentTagGroup) {
+      const titleMatch = trimmed.match(TITLE_RE2);
+      if (titleMatch) {
+        result.title = titleMatch[1].trim();
+        result.titleLineNumber = lineNumber;
+        continue;
+      }
+    }
+    if (!contentStarted && !currentTagGroup && measureIndent6(line5) === 0) {
+      const optMatch = trimmed.match(OPTION_RE2);
+      if (optMatch && !trimmed.startsWith("##") && !COLUMN_RE2.test(trimmed)) {
+        const key = optMatch[1].trim().toLowerCase();
+        if (key !== "chart" && key !== "title") {
+          result.options[key] = optMatch[2].trim();
+          continue;
+        }
+      }
+    }
+    const groupMatch = trimmed.match(GROUP_HEADING_RE3);
+    if (groupMatch && !contentStarted) {
+      const groupName = groupMatch[1].trim();
+      const alias = groupMatch[2] || void 0;
+      currentTagGroup = {
+        name: groupName,
+        alias,
+        entries: [],
+        lineNumber
+      };
+      if (alias) {
+        aliasMap.set(alias.toLowerCase(), groupName.toLowerCase());
+      }
+      result.tagGroups.push(currentTagGroup);
+      continue;
+    }
+    if (currentTagGroup && !contentStarted) {
+      const indent2 = measureIndent6(line5);
+      if (indent2 > 0) {
+        const isDefault = /\bdefault\s*$/.test(trimmed);
+        const entryText = isDefault ? trimmed.replace(/\s+default\s*$/, "").trim() : trimmed;
+        const { label, color } = extractColor3(entryText, palette);
+        if (!color) {
+          warn(
+            lineNumber,
+            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+          );
+          continue;
+        }
+        if (isDefault) {
+          currentTagGroup.defaultValue = label;
+        }
+        currentTagGroup.entries.push({
+          value: label,
+          color,
+          lineNumber
+        });
+        continue;
+      }
+      currentTagGroup = null;
+    }
+    const columnMatch = trimmed.match(COLUMN_RE2);
+    if (columnMatch) {
+      contentStarted = true;
+      currentTagGroup = null;
+      if (currentCard) {
+        currentCard.endLineNumber = lineNumber - 1;
+        while (currentCard.endLineNumber > currentCard.lineNumber && !lines[currentCard.endLineNumber - 1].trim()) {
+          currentCard.endLineNumber--;
+        }
+      }
+      currentCard = null;
+      columnCounter++;
+      const rawColName = columnMatch[1].trim();
+      const wipStr = columnMatch[2];
+      const { label: colName, color: colColor } = extractColor3(
+        rawColName,
+        palette
+      );
+      currentColumn = {
+        id: `col-${columnCounter}`,
+        name: colName,
+        wipLimit: wipStr ? parseInt(wipStr, 10) : void 0,
+        color: colColor,
+        cards: [],
+        lineNumber
+      };
+      result.columns.push(currentColumn);
+      continue;
+    }
+    if (!contentStarted) {
+      continue;
+    }
+    if (!currentColumn) {
+      warn(lineNumber, "Card line found before any column");
+      continue;
+    }
+    const indent = measureIndent6(line5);
+    if (indent > 0 && currentCard) {
+      currentCard.details.push(trimmed);
+      currentCard.endLineNumber = lineNumber;
+      continue;
+    }
+    if (currentCard) {
+    }
+    cardCounter++;
+    const card = parseCardLine(
+      trimmed,
+      lineNumber,
+      cardCounter,
+      aliasMap,
+      palette
+    );
+    currentCard = card;
+    currentColumn.cards.push(card);
+  }
+  if (currentCard) {
+  }
+  for (const group of result.tagGroups) {
+    const values = new Set(group.entries.map((e) => e.value.toLowerCase()));
+    tagValueSets.set(group.name.toLowerCase(), values);
+  }
+  for (const col of result.columns) {
+    if (col.wipLimit != null && col.cards.length > col.wipLimit) {
+      warn(
+        col.lineNumber,
+        `Column "${col.name}" has ${col.cards.length} cards but WIP limit is ${col.wipLimit}`
+      );
+    }
+  }
+  for (const col of result.columns) {
+    for (const card of col.cards) {
+      for (const [tagKey, tagValue] of Object.entries(card.tags)) {
+        const groupKey = aliasMap.get(tagKey.toLowerCase()) ?? tagKey.toLowerCase();
+        const validValues = tagValueSets.get(groupKey);
+        if (validValues && !validValues.has(tagValue.toLowerCase())) {
+          const entries = result.tagGroups.find((g) => g.name.toLowerCase() === groupKey)?.entries.map((e) => e.value);
+          let msg = `Unknown tag value "${tagValue}" for group "${groupKey}"`;
+          if (entries) {
+            const hint = suggest(tagValue, entries);
+            if (hint) msg += `. ${hint}`;
+          }
+          warn(card.lineNumber, msg);
+        }
+      }
+    }
+  }
+  if (result.columns.length === 0 && !result.error) {
+    return fail(1, "No columns found. Use == Column Name == to define columns");
+  }
+  return result;
+}
+function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette) {
+  const pipeIdx = trimmed.indexOf("|");
+  let rawTitle;
+  let tagsStr = null;
+  if (pipeIdx >= 0) {
+    rawTitle = trimmed.substring(0, pipeIdx).trim();
+    tagsStr = trimmed.substring(pipeIdx + 1).trim();
+  } else {
+    rawTitle = trimmed;
+  }
+  const { label: title, color } = extractColor3(rawTitle, palette);
+  const tags = {};
+  if (tagsStr) {
+    for (const part of tagsStr.split(",")) {
+      const colonIdx = part.indexOf(":");
+      if (colonIdx > 0) {
+        const rawKey = part.substring(0, colonIdx).trim().toLowerCase();
+        const key = aliasMap.get(rawKey) ?? rawKey;
+        const value = part.substring(colonIdx + 1).trim();
+        tags[key] = value;
+      }
+    }
+  }
+  return {
+    id: `card-${counter}`,
+    title,
+    tags,
+    details: [],
+    lineNumber,
+    endLineNumber: lineNumber,
+    color
+  };
+}
+var CHART_TYPE_RE2, TITLE_RE2, OPTION_RE2, GROUP_HEADING_RE3, COLUMN_RE2, COLOR_SUFFIX_RE3;
+var init_parser5 = __esm({
+  "src/kanban/parser.ts"() {
+    "use strict";
+    init_colors();
+    init_diagnostics();
+    CHART_TYPE_RE2 = /^chart\s*:\s*(.+)/i;
+    TITLE_RE2 = /^title\s*:\s*(.+)/i;
+    OPTION_RE2 = /^([a-z][a-z0-9-]*)\s*:\s*(.+)$/i;
+    GROUP_HEADING_RE3 = /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
+    COLUMN_RE2 = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
+    COLOR_SUFFIX_RE3 = /\(([^)]+)\)\s*$/;
+  }
+});
+
 // src/dgmo-router.ts
 var dgmo_router_exports = {};
 __export(dgmo_router_exports, {
@@ -4826,6 +5117,7 @@ function parseDgmoChartType(content) {
   if (looksLikeFlowchart(content)) return "flowchart";
   if (looksLikeClassDiagram(content)) return "class";
   if (looksLikeERDiagram(content)) return "er";
+  if (looksLikeOrg(content)) return "org";
   return null;
 }
 function parseDgmo(content) {
@@ -4854,6 +5146,10 @@ function parseDgmo(content) {
     const parsed2 = parseOrg(content);
     return { diagnostics: parsed2.diagnostics };
   }
+  if (chartType === "kanban") {
+    const parsed2 = parseKanban(content);
+    return { diagnostics: parsed2.diagnostics };
+  }
   if (STANDARD_CHART_TYPES2.has(chartType)) {
     const parsed2 = parseChart(content);
     return { diagnostics: parsed2.diagnostics };
@@ -4877,6 +5173,7 @@ var init_dgmo_router = __esm({
     init_echarts();
     init_d3();
     init_parser4();
+    init_parser5();
     DGMO_CHART_TYPE_MAP = {
       // Standard charts (via ECharts)
       bar: "echart",
@@ -4906,7 +5203,8 @@ var init_dgmo_router = __esm({
       flowchart: "d3",
       class: "d3",
       er: "d3",
-      org: "d3"
+      org: "d3",
+      kanban: "d3"
     };
     STANDARD_CHART_TYPES2 = /* @__PURE__ */ new Set([
       "bar",
@@ -5028,39 +5326,34 @@ function centerHeavyChildren(node) {
   }
   node.children = result;
 }
-function computeLegendGroups(tagGroups, showEyeIcons) {
+function computeLegendGroups(tagGroups, _showEyeIcons) {
   const groups = [];
   for (const group of tagGroups) {
     if (group.entries.length === 0) continue;
-    const entryWidths = group.entries.map(
-      (e) => LEGEND_DOT_R * 2 + LEGEND_DOT_TEXT_GAP + e.value.length * CHAR_WIDTH
-    );
-    const numRows = Math.ceil(entryWidths.length / LEGEND_MAX_PER_ROW);
-    const colWidths = [];
-    for (let col = 0; col < LEGEND_MAX_PER_ROW; col++) {
-      let maxW = 0;
-      for (let row = 0; row < numRows; row++) {
-        const idx = row * LEGEND_MAX_PER_ROW + col;
-        if (idx < entryWidths.length && entryWidths[idx] > maxW) {
-          maxW = entryWidths[idx];
-        }
-      }
-      if (maxW > 0) colWidths.push(maxW);
-    }
-    const eyeExtra = showEyeIcons ? EYE_ICON_GAP + EYE_ICON_WIDTH : 0;
-    const headerWidth = group.name.length * CHAR_WIDTH + eyeExtra;
-    const totalColumnsWidth = colWidths.reduce((s, w) => s + w, 0) + (colWidths.length - 1) * LEGEND_ENTRY_GAP;
-    const maxRowWidth = Math.max(headerWidth, totalColumnsWidth);
-    const minifiedWidth = group.name.length * CHAR_WIDTH + LEGEND_PAD * 2;
+    const pillLabel = group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const minPillWidth = group.name.length * LEGEND_PILL_FONT_W + LEGEND_PILL_PAD;
+    const isDefaultValue = group.defaultValue?.toLowerCase();
+    let entriesWidth = 0;
+    for (const entry of group.entries) {
+      const entryLabel = isDefaultValue === entry.value.toLowerCase() ? `${entry.value} (default)` : entry.value;
+      entriesWidth += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + entryLabel.length * LEGEND_ENTRY_FONT_W + LEGEND_ENTRY_TRAIL;
+    }
+    const capsuleWidth = LEGEND_CAPSULE_PAD * 2 + pillWidth + 4 + entriesWidth;
     groups.push({
       name: group.name,
-      entries: group.entries.map((e) => ({ value: e.value, color: e.color })),
+      alias: group.alias,
+      entries: group.entries.map((e) => ({
+        value: e.value,
+        color: e.color,
+        isDefault: group.defaultValue?.toLowerCase() === e.value.toLowerCase() || void 0
+      })),
       x: 0,
       y: 0,
-      width: maxRowWidth + LEGEND_PAD * 2,
-      height: LEGEND_HEADER_H + numRows * LEGEND_ENTRY_H + LEGEND_PAD,
-      minifiedWidth,
-      minifiedHeight: LEGEND_HEADER_H + LEGEND_PAD
+      width: capsuleWidth,
+      height: LEGEND_HEIGHT,
+      minifiedWidth: minPillWidth,
+      minifiedHeight: LEGEND_HEIGHT
     });
   }
   return groups;
@@ -5087,7 +5380,27 @@ function injectDefaultMetadata(roots, tagGroups) {
 }
 function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
   if (parsed.roots.length === 0) {
-    return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    const showEyeIcons2 = hiddenAttributes !== void 0;
+    const legendGroups2 = computeLegendGroups(parsed.tagGroups, showEyeIcons2);
+    if (legendGroups2.length === 0) {
+      return { nodes: [], edges: [], containers: [], legend: [], width: 0, height: 0 };
+    }
+    let cy = MARGIN;
+    let maxWidth2 = 0;
+    for (const g of legendGroups2) {
+      g.x = MARGIN;
+      g.y = cy;
+      cy += LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      if (g.width > maxWidth2) maxWidth2 = g.width;
+    }
+    return {
+      nodes: [],
+      edges: [],
+      containers: [],
+      legend: legendGroups2,
+      width: maxWidth2 + MARGIN * 2,
+      height: cy - LEGEND_GROUP_GAP + MARGIN
+    };
   }
   injectDefaultMetadata(parsed.roots, parsed.tagGroups);
   const subNodeLabel = parsed.options["sub-node-label"] ?? void 0;
@@ -5595,13 +5908,13 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
   const legendGroups = computeLegendGroups(parsed.tagGroups, showEyeIcons);
   let finalWidth = totalWidth;
   let finalHeight = totalHeight;
-  const legendPosition = parsed.options?.["legend-position"] ?? "bottom";
+  const legendPosition = parsed.options?.["legend-position"] ?? "top";
   const visibleGroups = activeTagGroup != null ? legendGroups.filter((g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()) : legendGroups;
   const effectiveW = (g) => activeTagGroup != null ? g.width : g.minifiedWidth;
   const effectiveH = (g) => activeTagGroup != null ? g.height : g.minifiedHeight;
   if (visibleGroups.length > 0) {
     if (legendPosition === "bottom") {
-      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * H_GAP;
+      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
       const neededWidth = totalGroupsWidth + MARGIN * 2;
       if (neededWidth > totalWidth) {
         finalWidth = neededWidth;
@@ -5616,31 +5929,30 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
       const legendY = contentBottom + LEGEND_GAP;
       const startX = (finalWidth - totalGroupsWidth) / 2;
       let cx = startX;
-      let maxH = 0;
       for (const g of visibleGroups) {
         g.x = cx;
         g.y = legendY;
-        cx += effectiveW(g) + H_GAP;
-        const h2 = effectiveH(g);
-        if (h2 > maxH) maxH = h2;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
-      finalHeight = totalHeight + LEGEND_GAP + maxH;
+      finalHeight = totalHeight + LEGEND_GAP + LEGEND_HEIGHT;
     } else {
-      const maxLegendWidth = Math.max(...visibleGroups.map((g) => effectiveW(g)));
-      const legendStartX = totalWidth - MARGIN + LEGEND_GAP;
-      let legendY = MARGIN;
+      const legendShift = LEGEND_HEIGHT + LEGEND_GROUP_GAP;
+      for (const n of layoutNodes) n.y += legendShift;
+      for (const c of containers) c.y += legendShift;
+      for (const e of layoutEdges) {
+        for (const p of e.points) p.y += legendShift;
+      }
+      const totalGroupsWidth = visibleGroups.reduce((s, g) => s + effectiveW(g), 0) + (visibleGroups.length - 1) * LEGEND_GROUP_GAP;
+      let cx = MARGIN;
       for (const g of visibleGroups) {
-        g.x = legendStartX;
-        g.y = legendY;
-        legendY += effectiveH(g) + LEGEND_V_GAP;
-      }
-      const legendRight = legendStartX + maxLegendWidth + MARGIN;
-      if (legendRight > finalWidth) {
-        finalWidth = legendRight;
+        g.x = cx;
+        g.y = MARGIN;
+        cx += effectiveW(g) + LEGEND_GROUP_GAP;
       }
-      const legendBottom = legendY - LEGEND_V_GAP + MARGIN;
-      if (legendBottom > finalHeight) {
-        finalHeight = legendBottom;
+      finalHeight += legendShift;
+      const neededWidth = totalGroupsWidth + MARGIN * 2;
+      if (neededWidth > finalWidth) {
+        finalWidth = neededWidth;
       }
     }
   }
@@ -5653,7 +5965,7 @@ function layoutOrg(parsed, hiddenCounts, activeTagGroup, hiddenAttributes) {
     height: finalHeight
   };
 }
-var import_d3_hierarchy, CHAR_WIDTH, META_LINE_HEIGHT, HEADER_HEIGHT, SEPARATOR_GAP, CARD_H_PAD, CARD_V_PAD, MIN_CARD_WIDTH, H_GAP, V_GAP, MARGIN, CONTAINER_PAD_X, CONTAINER_PAD_BOTTOM, CONTAINER_LABEL_HEIGHT, CONTAINER_META_LINE_HEIGHT, STACK_V_GAP, LEGEND_GAP, LEGEND_DOT_R, LEGEND_DOT_TEXT_GAP, LEGEND_ENTRY_GAP, LEGEND_PAD, LEGEND_HEADER_H, LEGEND_ENTRY_H, LEGEND_MAX_PER_ROW, LEGEND_V_GAP, EYE_ICON_WIDTH, EYE_ICON_GAP;
+var import_d3_hierarchy, CHAR_WIDTH, META_LINE_HEIGHT, HEADER_HEIGHT, SEPARATOR_GAP, CARD_H_PAD, CARD_V_PAD, MIN_CARD_WIDTH, H_GAP, V_GAP, MARGIN, CONTAINER_PAD_X, CONTAINER_PAD_BOTTOM, CONTAINER_LABEL_HEIGHT, CONTAINER_META_LINE_HEIGHT, STACK_V_GAP, LEGEND_GAP, LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_W, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_W, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP;
 var init_layout = __esm({
   "src/org/layout.ts"() {
     "use strict";
@@ -5674,16 +5986,15 @@ var init_layout = __esm({
     CONTAINER_META_LINE_HEIGHT = 16;
     STACK_V_GAP = 20;
     LEGEND_GAP = 30;
-    LEGEND_DOT_R = 5;
-    LEGEND_DOT_TEXT_GAP = 6;
-    LEGEND_ENTRY_GAP = 12;
-    LEGEND_PAD = 10;
-    LEGEND_HEADER_H = 20;
-    LEGEND_ENTRY_H = 18;
-    LEGEND_MAX_PER_ROW = 3;
-    LEGEND_V_GAP = 12;
-    EYE_ICON_WIDTH = 16;
-    EYE_ICON_GAP = 6;
+    LEGEND_HEIGHT = 28;
+    LEGEND_PILL_PAD = 16;
+    LEGEND_PILL_FONT_W = 11 * 0.6;
+    LEGEND_CAPSULE_PAD = 4;
+    LEGEND_DOT_R = 4;
+    LEGEND_ENTRY_FONT_W = 10 * 0.6;
+    LEGEND_ENTRY_DOT_GAP = 4;
+    LEGEND_ENTRY_TRAIL = 8;
+    LEGEND_GROUP_GAP = 12;
   }
 });
 
@@ -5917,69 +6228,40 @@ function renderOrg(container, parsed, layout, palette, isDark, onClickItem, expo
       nodeG.append("rect").attr("x", COLLAPSE_BAR_INSET).attr("y", node.height - COLLAPSE_BAR_HEIGHT).attr("width", node.width - COLLAPSE_BAR_INSET * 2).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", nodeStroke(palette, colorOff ? void 0 : node.color)).attr("clip-path", `url(#${clipId})`).attr("class", "org-collapse-bar");
     }
   }
-  if (!exportDims) for (const group of layout.legend) {
-    const isActive = activeTagGroup != null && group.name.toLowerCase() === activeTagGroup.toLowerCase();
-    if (activeTagGroup != null && !isActive) continue;
-    const isMinified = activeTagGroup == null;
-    const renderW = isMinified ? group.minifiedWidth : group.width;
-    const renderH = isMinified ? group.minifiedHeight : group.height;
-    const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "org-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", "pointer");
-    const legendFill = mix(palette.surface, palette.bg, 40);
-    const bgRect = gEl.append("rect").attr("x", 0).attr("y", 0).attr("width", renderW).attr("height", renderH).attr("rx", LEGEND_RADIUS).attr("fill", legendFill);
+  const legendOnly = layout.nodes.length === 0;
+  if (!exportDims || legendOnly) for (const group of layout.legend) {
+    const isActive = legendOnly || activeTagGroup != null && group.name.toLowerCase() === activeTagGroup.toLowerCase();
+    if (!legendOnly && activeTagGroup != null && !isActive) continue;
+    const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+    const pillLabel = isActive && group.alias ? `${group.name} (${group.alias})` : group.name;
+    const pillWidth = pillLabel.length * LEGEND_PILL_FONT_W2 + LEGEND_PILL_PAD2;
+    const gEl = contentG.append("g").attr("transform", `translate(${group.x}, ${group.y})`).attr("class", "org-legend-group").attr("data-legend-group", group.name.toLowerCase()).style("cursor", legendOnly ? "default" : "pointer");
     if (isActive) {
-      bgRect.attr("stroke", palette.primary).attr("stroke-opacity", 0.8).attr("stroke-width", 2);
-    } else {
-      bgRect.attr("stroke", palette.textMuted).attr("stroke-opacity", 0.35).attr("stroke-width", NODE_STROKE_WIDTH);
-    }
-    gEl.append("text").attr("x", LEGEND_PAD2).attr("y", LEGEND_HEADER_H2 / 2 + LEGEND_FONT_SIZE / 2 - 2).attr("fill", isMinified ? palette.textMuted : palette.text).attr("font-size", LEGEND_FONT_SIZE).attr("font-weight", "bold").text(group.name);
-    if (isMinified) continue;
-    if (hiddenAttributes !== void 0 && !exportDims) {
-      const groupKey = group.name.toLowerCase();
-      const isHidden = hiddenAttributes.has(groupKey);
-      const eyeX = LEGEND_PAD2 + group.name.length * LEGEND_CHAR_WIDTH + EYE_ICON_GAP2;
-      const eyeY = (LEGEND_HEADER_H2 - EYE_ICON_SIZE) / 2;
-      const eyeG = gEl.append("g").attr("class", "org-legend-eye").attr("data-legend-visibility", groupKey).attr("transform", `translate(${eyeX}, ${eyeY})`);
-      eyeG.append("rect").attr("x", -4).attr("y", -4).attr("width", EYE_ICON_SIZE + 8).attr("height", EYE_ICON_SIZE + 8).attr("fill", "transparent");
-      eyeG.append("path").attr("d", EYE_OPEN_PATH).attr("fill", isHidden ? "none" : palette.textMuted).attr("fill-opacity", isHidden ? 0 : 0.15).attr("stroke", palette.textMuted).attr("stroke-width", 1.2).attr("opacity", isHidden ? 0.5 : 0.7);
-      if (!isHidden) {
-        eyeG.append("circle").attr("cx", EYE_PUPIL_CX).attr("cy", EYE_PUPIL_CY).attr("r", EYE_PUPIL_R).attr("fill", palette.textMuted).attr("opacity", 0.7);
-      } else {
-        eyeG.append("line").attr("x1", 2).attr("y1", 2).attr("x2", 10).attr("y2", 10).attr("stroke", palette.textMuted).attr("stroke-width", 1.5).attr("opacity", 0.5);
-      }
+      gEl.append("rect").attr("width", group.width).attr("height", LEGEND_HEIGHT2).attr("rx", LEGEND_HEIGHT2 / 2).attr("fill", groupBg);
     }
-    const entryWidths = group.entries.map(
-      (e) => LEGEND_DOT_R2 * 2 + LEGEND_DOT_TEXT_GAP2 + e.value.length * LEGEND_CHAR_WIDTH
-    );
-    const numRows = Math.ceil(group.entries.length / LEGEND_MAX_PER_ROW2);
-    const colWidths = [];
-    for (let col = 0; col < LEGEND_MAX_PER_ROW2; col++) {
-      let maxW = 0;
-      for (let r = 0; r < numRows; r++) {
-        const idx = r * LEGEND_MAX_PER_ROW2 + col;
-        if (idx < entryWidths.length && entryWidths[idx] > maxW) {
-          maxW = entryWidths[idx];
-        }
-      }
-      if (maxW > 0) colWidths.push(maxW);
-    }
-    const colX = [LEGEND_PAD2];
-    for (let c = 1; c < colWidths.length; c++) {
-      colX.push(colX[c - 1] + colWidths[c - 1] + LEGEND_ENTRY_GAP2);
+    const pillX = isActive ? LEGEND_CAPSULE_PAD2 : 0;
+    const pillY = isActive ? LEGEND_CAPSULE_PAD2 : 0;
+    const pillH = LEGEND_HEIGHT2 - (isActive ? LEGEND_CAPSULE_PAD2 * 2 : 0);
+    gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
+    if (isActive) {
+      gEl.append("rect").attr("x", pillX).attr("y", pillY).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
     }
-    for (let i = 0; i < group.entries.length; i++) {
-      const entry = group.entries[i];
-      const row = Math.floor(i / LEGEND_MAX_PER_ROW2);
-      const col = i % LEGEND_MAX_PER_ROW2;
-      const entryX = colX[col];
-      const entryY = LEGEND_HEADER_H2 + row * LEGEND_ENTRY_H2 + LEGEND_ENTRY_H2 / 2;
-      gEl.append("circle").attr("cx", entryX + LEGEND_DOT_R2).attr("cy", entryY).attr("r", LEGEND_DOT_R2).attr("fill", entry.color);
-      gEl.append("text").attr("x", entryX + LEGEND_DOT_R2 * 2 + LEGEND_DOT_TEXT_GAP2).attr("y", entryY + LEGEND_FONT_SIZE / 2 - 2).attr("fill", palette.text).attr("font-size", LEGEND_FONT_SIZE).text(entry.value);
+    gEl.append("text").attr("x", pillX + pillWidth / 2).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
+    if (isActive) {
+      let entryX = pillX + pillWidth + 4;
+      for (const entry of group.entries) {
+        gEl.append("circle").attr("cx", entryX + LEGEND_DOT_R2).attr("cy", LEGEND_HEIGHT2 / 2).attr("r", LEGEND_DOT_R2).attr("fill", entry.color);
+        const textX = entryX + LEGEND_DOT_R2 * 2 + LEGEND_ENTRY_DOT_GAP2;
+        const entryLabel = entry.isDefault ? `${entry.value} (default)` : entry.value;
+        gEl.append("text").attr("x", textX).attr("y", LEGEND_HEIGHT2 / 2 + LEGEND_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).text(entryLabel);
+        entryX = textX + entryLabel.length * LEGEND_ENTRY_FONT_W2 + LEGEND_ENTRY_TRAIL2;
+      }
     }
   }
 }
 function renderOrgForExport(content, theme, palette) {
   const parsed = parseOrg(content, palette);
-  if (parsed.error || parsed.roots.length === 0) return "";
+  if (parsed.error) return "";
   const hideOption = parsed.options?.["hide"];
   const exportHidden = hideOption ? new Set(hideOption.split(",").map((s) => s.trim().toLowerCase())) : void 0;
   const layout = layoutOrg(parsed, void 0, void 0, exportHidden);
@@ -6010,7 +6292,7 @@ function renderOrgForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, TITLE_FONT_SIZE, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_RADIUS, LEGEND_DOT_R2, LEGEND_DOT_TEXT_GAP2, LEGEND_ENTRY_GAP2, LEGEND_PAD2, LEGEND_HEADER_H2, LEGEND_ENTRY_H2, LEGEND_FONT_SIZE, LEGEND_MAX_PER_ROW2, LEGEND_CHAR_WIDTH, EYE_ICON_SIZE, EYE_ICON_GAP2, EYE_OPEN_PATH, EYE_PUPIL_CX, EYE_PUPIL_CY, EYE_PUPIL_R;
+var d3Selection, DIAGRAM_PADDING, MAX_SCALE, TITLE_HEIGHT, TITLE_FONT_SIZE, LABEL_FONT_SIZE, META_FONT_SIZE, META_LINE_HEIGHT2, HEADER_HEIGHT2, SEPARATOR_GAP2, EDGE_STROKE_WIDTH, NODE_STROKE_WIDTH, CARD_RADIUS, CONTAINER_RADIUS, CONTAINER_LABEL_FONT_SIZE, CONTAINER_META_FONT_SIZE, CONTAINER_META_LINE_HEIGHT2, CONTAINER_HEADER_HEIGHT, COLLAPSE_BAR_HEIGHT, COLLAPSE_BAR_INSET, LEGEND_HEIGHT2, LEGEND_PILL_PAD2, LEGEND_PILL_FONT_SIZE, LEGEND_PILL_FONT_W2, LEGEND_CAPSULE_PAD2, LEGEND_DOT_R2, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_FONT_W2, LEGEND_ENTRY_DOT_GAP2, LEGEND_ENTRY_TRAIL2;
 var init_renderer = __esm({
   "src/org/renderer.ts"() {
     "use strict";
@@ -6037,22 +6319,393 @@ var init_renderer = __esm({
     CONTAINER_HEADER_HEIGHT = 28;
     COLLAPSE_BAR_HEIGHT = 6;
     COLLAPSE_BAR_INSET = 0;
-    LEGEND_RADIUS = 6;
-    LEGEND_DOT_R2 = 5;
-    LEGEND_DOT_TEXT_GAP2 = 6;
-    LEGEND_ENTRY_GAP2 = 12;
-    LEGEND_PAD2 = 10;
-    LEGEND_HEADER_H2 = 20;
-    LEGEND_ENTRY_H2 = 18;
+    LEGEND_HEIGHT2 = 28;
+    LEGEND_PILL_PAD2 = 16;
+    LEGEND_PILL_FONT_SIZE = 11;
+    LEGEND_PILL_FONT_W2 = LEGEND_PILL_FONT_SIZE * 0.6;
+    LEGEND_CAPSULE_PAD2 = 4;
+    LEGEND_DOT_R2 = 4;
+    LEGEND_ENTRY_FONT_SIZE = 10;
+    LEGEND_ENTRY_FONT_W2 = LEGEND_ENTRY_FONT_SIZE * 0.6;
+    LEGEND_ENTRY_DOT_GAP2 = 4;
+    LEGEND_ENTRY_TRAIL2 = 8;
+  }
+});
+
+// src/kanban/mutations.ts
+function computeCardMove(content, parsed, cardId, targetColumnId, targetIndex) {
+  let sourceCard = null;
+  let sourceColumn = null;
+  for (const col of parsed.columns) {
+    for (const card of col.cards) {
+      if (card.id === cardId) {
+        sourceCard = card;
+        sourceColumn = col;
+        break;
+      }
+    }
+    if (sourceCard) break;
+  }
+  if (!sourceCard || !sourceColumn) return null;
+  const targetColumn = parsed.columns.find((c) => c.id === targetColumnId);
+  if (!targetColumn) return null;
+  const lines = content.split("\n");
+  const startIdx = sourceCard.lineNumber - 1;
+  const endIdx = sourceCard.endLineNumber - 1;
+  const cardLines = lines.slice(startIdx, endIdx + 1);
+  const withoutCard = [
+    ...lines.slice(0, startIdx),
+    ...lines.slice(endIdx + 1)
+  ];
+  let insertIdx;
+  const removedCount = endIdx - startIdx + 1;
+  const adjustLine = (ln) => {
+    if (ln > endIdx + 1) return ln - removedCount;
+    return ln;
+  };
+  if (targetIndex === 0) {
+    const adjColLine = adjustLine(targetColumn.lineNumber);
+    insertIdx = adjColLine;
+  } else {
+    const targetCards = targetColumn.cards.filter((c) => c.id !== cardId);
+    const clampedIdx = Math.min(targetIndex, targetCards.length);
+    const precedingCard = targetCards[clampedIdx - 1];
+    if (!precedingCard) {
+      const adjColLine = adjustLine(targetColumn.lineNumber);
+      insertIdx = adjColLine;
+    } else {
+      const adjEndLine = adjustLine(precedingCard.endLineNumber);
+      insertIdx = adjEndLine;
+    }
+  }
+  const result = [
+    ...withoutCard.slice(0, insertIdx),
+    ...cardLines,
+    ...withoutCard.slice(insertIdx)
+  ];
+  return result.join("\n");
+}
+function computeCardArchive(content, parsed, cardId) {
+  let sourceCard = null;
+  for (const col of parsed.columns) {
+    for (const card of col.cards) {
+      if (card.id === cardId) {
+        sourceCard = card;
+        break;
+      }
+    }
+    if (sourceCard) break;
+  }
+  if (!sourceCard) return null;
+  const lines = content.split("\n");
+  const startIdx = sourceCard.lineNumber - 1;
+  const endIdx = sourceCard.endLineNumber - 1;
+  const cardLines = lines.slice(startIdx, endIdx + 1);
+  const withoutCard = [
+    ...lines.slice(0, startIdx),
+    ...lines.slice(endIdx + 1)
+  ];
+  const archiveCol = parsed.columns.find(
+    (c) => c.name.toLowerCase() === ARCHIVE_COLUMN_NAME
+  );
+  if (archiveCol) {
+    const removedCount = endIdx - startIdx + 1;
+    let archiveEndLine = archiveCol.lineNumber;
+    if (archiveCol.cards.length > 0) {
+      const lastCard = archiveCol.cards[archiveCol.cards.length - 1];
+      archiveEndLine = lastCard.endLineNumber;
+    }
+    if (archiveEndLine > endIdx + 1) {
+      archiveEndLine -= removedCount;
+    }
+    const insertIdx = archiveEndLine;
+    return [
+      ...withoutCard.slice(0, insertIdx),
+      ...cardLines,
+      ...withoutCard.slice(insertIdx)
+    ].join("\n");
+  } else {
+    const trimmedEnd = withoutCard.length > 0 && withoutCard[withoutCard.length - 1].trim() === "" ? withoutCard : [...withoutCard, ""];
+    return [
+      ...trimmedEnd,
+      "== Archive ==",
+      ...cardLines
+    ].join("\n");
+  }
+}
+function isArchiveColumn(name) {
+  return name.toLowerCase() === ARCHIVE_COLUMN_NAME;
+}
+var ARCHIVE_COLUMN_NAME;
+var init_mutations = __esm({
+  "src/kanban/mutations.ts"() {
+    "use strict";
+    ARCHIVE_COLUMN_NAME = "archive";
+  }
+});
+
+// src/kanban/renderer.ts
+var renderer_exports2 = {};
+__export(renderer_exports2, {
+  renderKanban: () => renderKanban,
+  renderKanbanForExport: () => renderKanbanForExport
+});
+function mix2(a, b, pct) {
+  const parse = (h) => {
+    const r = h.replace("#", "");
+    const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
+    return [
+      parseInt(f.substring(0, 2), 16),
+      parseInt(f.substring(2, 4), 16),
+      parseInt(f.substring(4, 6), 16)
+    ];
+  };
+  const [ar, ag, ab] = parse(a);
+  const [br, bg, bb] = parse(b);
+  const t = pct / 100;
+  const c = (x, y) => Math.round(x * t + y * (1 - t)).toString(16).padStart(2, "0");
+  return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
+}
+function resolveCardTagMeta(card, tagGroups) {
+  const meta = [];
+  for (const group of tagGroups) {
+    const tagValue = card.tags[group.name.toLowerCase()];
+    const value = tagValue ?? group.defaultValue;
+    if (!value) continue;
+    const entry = group.entries.find(
+      (e) => e.value.toLowerCase() === value.toLowerCase()
+    );
+    meta.push({ label: group.name, value, color: entry?.color });
+  }
+  return meta;
+}
+function resolveCardTagColor(card, tagGroups, activeTagGroup) {
+  if (!activeTagGroup) return card.color;
+  const group = tagGroups.find(
+    (g) => g.name.toLowerCase() === activeTagGroup.toLowerCase()
+  );
+  if (!group) return card.color;
+  const tagValue = card.tags[group.name.toLowerCase()];
+  const value = tagValue ?? group.defaultValue;
+  if (!value) return void 0;
+  const entry = group.entries.find(
+    (e) => e.value.toLowerCase() === value.toLowerCase()
+  );
+  return entry?.color;
+}
+function computeLayout(parsed, _palette) {
+  const hasHeader = !!parsed.title || parsed.tagGroups.length > 0;
+  const headerHeight = hasHeader ? Math.max(TITLE_HEIGHT2, LEGEND_HEIGHT3) + 8 : 0;
+  const startY = DIAGRAM_PADDING2 + headerHeight;
+  const charWidth = CARD_TITLE_FONT_SIZE * 0.6;
+  const columnLayouts = [];
+  let maxColumnHeight = 0;
+  const visibleColumns = parsed.columns.filter((c) => !isArchiveColumn(c.name));
+  for (const col of visibleColumns) {
+    let maxCardTextWidth = col.name.length * (COLUMN_HEADER_FONT_SIZE * 0.65);
+    const cardLayouts = [];
+    let cardY = COLUMN_HEADER_HEIGHT + COLUMN_PADDING;
+    for (const card of col.cards) {
+      const titleWidth = card.title.length * charWidth;
+      maxCardTextWidth = Math.max(
+        maxCardTextWidth,
+        titleWidth + CARD_PADDING_X * 2
+      );
+      const tagMeta = resolveCardTagMeta(card, parsed.tagGroups);
+      const metaCount = tagMeta.length + card.details.length;
+      const metaHeight = metaCount > 0 ? CARD_SEPARATOR_GAP + 1 + CARD_PADDING_Y + metaCount * CARD_META_LINE_HEIGHT : 0;
+      const cardHeight = CARD_HEADER_HEIGHT + CARD_PADDING_Y + metaHeight;
+      for (const m of tagMeta) {
+        const metaW = (m.label.length + 2 + m.value.length) * CARD_META_FONT_SIZE * 0.6 + CARD_PADDING_X * 2;
+        maxCardTextWidth = Math.max(maxCardTextWidth, metaW);
+      }
+      cardLayouts.push({
+        x: COLUMN_PADDING,
+        y: cardY,
+        width: 0,
+        // set after column width computed
+        height: cardHeight,
+        card
+      });
+      cardY += cardHeight + CARD_GAP;
+    }
+    const colWidth = Math.max(COLUMN_MIN_WIDTH, maxCardTextWidth + COLUMN_PADDING * 2);
+    for (const cl of cardLayouts) {
+      cl.width = colWidth - COLUMN_PADDING * 2;
+    }
+    const colHeight = cardY + COLUMN_PADDING;
+    maxColumnHeight = Math.max(maxColumnHeight, colHeight);
+    columnLayouts.push({
+      x: 0,
+      // set below
+      y: startY,
+      width: colWidth,
+      height: colHeight,
+      column: col,
+      cardLayouts
+    });
+  }
+  let currentX = DIAGRAM_PADDING2;
+  for (const cl of columnLayouts) {
+    cl.x = currentX;
+    cl.height = maxColumnHeight;
+    currentX += cl.width + COLUMN_GAP;
+  }
+  const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING2;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING2;
+  return { columns: columnLayouts, totalWidth, totalHeight };
+}
+function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
+  const layout = computeLayout(parsed, palette);
+  const width = exportDims?.width ?? layout.totalWidth;
+  const height = exportDims?.height ?? layout.totalHeight;
+  container.innerHTML = "";
+  const svg = d3Selection2.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr("width", width).attr("height", height).attr("font-family", FONT_FAMILY).style("background", palette.bg);
+  if (parsed.title) {
+    svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", DIAGRAM_PADDING2).attr("y", DIAGRAM_PADDING2 + TITLE_FONT_SIZE2).attr("font-size", TITLE_FONT_SIZE2).attr("font-weight", "bold").attr("fill", palette.text).text(parsed.title);
+  }
+  if (parsed.tagGroups.length > 0) {
+    const legendY = DIAGRAM_PADDING2;
+    const titleTextWidth = parsed.title ? parsed.title.length * TITLE_FONT_SIZE2 * 0.6 + 16 : 0;
+    let legendX = DIAGRAM_PADDING2 + titleTextWidth;
+    const groupBg = isDark ? mix2(palette.surface, palette.bg, 50) : mix2(palette.surface, palette.bg, 30);
+    const capsulePad = 4;
+    for (const group of parsed.tagGroups) {
+      const isActive = activeTagGroup?.toLowerCase() === group.name.toLowerCase();
+      if (activeTagGroup != null && !isActive) continue;
+      const pillTextWidth = group.name.length * LEGEND_FONT_SIZE * 0.6;
+      const pillWidth = pillTextWidth + 16;
+      let capsuleContentWidth = pillWidth;
+      if (isActive) {
+        capsuleContentWidth += 4;
+        for (const entry of group.entries) {
+          capsuleContentWidth += LEGEND_DOT_R3 * 2 + 4 + entry.value.length * LEGEND_ENTRY_FONT_SIZE2 * 0.6 + 8;
+        }
+      }
+      const capsuleWidth = capsuleContentWidth + capsulePad * 2;
+      if (isActive) {
+        svg.append("rect").attr("x", legendX).attr("y", legendY).attr("width", capsuleWidth).attr("height", LEGEND_HEIGHT3).attr("rx", LEGEND_HEIGHT3 / 2).attr("fill", groupBg);
+      }
+      const pillX = legendX + (isActive ? capsulePad : 0);
+      const pillBg = isActive ? palette.bg : groupBg;
+      svg.append("rect").attr("x", pillX).attr("y", legendY + (isActive ? capsulePad : 0)).attr("width", pillWidth).attr("height", LEGEND_HEIGHT3 - (isActive ? capsulePad * 2 : 0)).attr("rx", (LEGEND_HEIGHT3 - (isActive ? capsulePad * 2 : 0)) / 2).attr("fill", pillBg).attr("class", "kanban-legend-group").attr("data-legend-group", group.name.toLowerCase());
+      if (isActive) {
+        svg.append("rect").attr("x", pillX).attr("y", legendY + capsulePad).attr("width", pillWidth).attr("height", LEGEND_HEIGHT3 - capsulePad * 2).attr("rx", (LEGEND_HEIGHT3 - capsulePad * 2) / 2).attr("fill", "none").attr("stroke", mix2(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
+      }
+      svg.append("text").attr("x", pillX + pillWidth / 2).attr("y", legendY + LEGEND_HEIGHT3 / 2 + LEGEND_FONT_SIZE / 2 - 2).attr("font-size", LEGEND_FONT_SIZE).attr("font-weight", "500").attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(group.name);
+      if (isActive) {
+        let entryX = pillX + pillWidth + 4;
+        for (const entry of group.entries) {
+          svg.append("circle").attr("cx", entryX + LEGEND_DOT_R3).attr("cy", legendY + LEGEND_HEIGHT3 / 2).attr("r", LEGEND_DOT_R3).attr("fill", entry.color);
+          const entryTextX = entryX + LEGEND_DOT_R3 * 2 + 4;
+          svg.append("text").attr("x", entryTextX).attr("y", legendY + LEGEND_HEIGHT3 / 2 + LEGEND_ENTRY_FONT_SIZE2 / 2 - 1).attr("font-size", LEGEND_ENTRY_FONT_SIZE2).attr("fill", palette.textMuted).text(entry.value);
+          entryX = entryTextX + entry.value.length * LEGEND_ENTRY_FONT_SIZE2 * 0.6 + 8;
+        }
+        legendX += capsuleWidth + 12;
+      } else {
+        legendX += pillWidth + 12;
+      }
+    }
+  }
+  const defaultColBg = isDark ? mix2(palette.surface, palette.bg, 50) : mix2(palette.surface, palette.bg, 30);
+  const defaultColHeaderBg = isDark ? mix2(palette.surface, palette.bg, 70) : mix2(palette.surface, palette.bg, 50);
+  const cardBaseBg = isDark ? palette.surface : palette.bg;
+  for (const colLayout of layout.columns) {
+    const col = colLayout.column;
+    const g = svg.append("g").attr("class", "kanban-column").attr("data-column-id", col.id).attr("data-line-number", col.lineNumber);
+    const thisColBg = defaultColBg;
+    const thisColHeaderBg = col.color ? mix2(col.color, palette.bg, 25) : defaultColHeaderBg;
+    g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", colLayout.height).attr("rx", COLUMN_RADIUS).attr("fill", thisColBg);
+    g.append("rect").attr("x", colLayout.x).attr("y", colLayout.y).attr("width", colLayout.width).attr("height", COLUMN_HEADER_HEIGHT).attr("rx", COLUMN_HEADER_RADIUS).attr("fill", thisColHeaderBg);
+    g.append("text").attr("x", colLayout.x + COLUMN_PADDING).attr(
+      "y",
+      colLayout.y + COLUMN_HEADER_HEIGHT / 2 + COLUMN_HEADER_FONT_SIZE / 2 - 2
+    ).attr("font-size", COLUMN_HEADER_FONT_SIZE).attr("font-weight", "bold").attr("fill", palette.text).text(col.name);
+    if (col.wipLimit != null) {
+      const wipExceeded = col.cards.length > col.wipLimit;
+      const badgeText = `${col.cards.length}/${col.wipLimit}`;
+      const nameWidth = col.name.length * COLUMN_HEADER_FONT_SIZE * 0.65;
+      g.append("text").attr("x", colLayout.x + COLUMN_PADDING + nameWidth + 8).attr(
+        "y",
+        colLayout.y + COLUMN_HEADER_HEIGHT / 2 + WIP_FONT_SIZE / 2 - 1
+      ).attr("font-size", WIP_FONT_SIZE).attr("fill", wipExceeded ? palette.colors.red : palette.textMuted).attr("font-weight", wipExceeded ? "bold" : "normal").text(badgeText);
+    }
+    for (const cardLayout of colLayout.cardLayouts) {
+      const card = cardLayout.card;
+      const resolvedColor = resolveCardTagColor(card, parsed.tagGroups, activeTagGroup ?? null);
+      const tagMeta = resolveCardTagMeta(card, parsed.tagGroups);
+      const hasMeta = tagMeta.length > 0 || card.details.length > 0;
+      const cardFill = resolvedColor ? mix2(resolvedColor, cardBaseBg, 15) : mix2(palette.primary, cardBaseBg, 15);
+      const cardStroke = resolvedColor ?? palette.textMuted;
+      const cg = g.append("g").attr("class", "kanban-card").attr("data-card-id", card.id).attr("data-line-number", card.lineNumber);
+      const cx = colLayout.x + cardLayout.x;
+      const cy = colLayout.y + cardLayout.y;
+      cg.append("rect").attr("x", cx).attr("y", cy).attr("width", cardLayout.width).attr("height", cardLayout.height).attr("rx", CARD_RADIUS2).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", CARD_STROKE_WIDTH);
+      cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", cy + CARD_PADDING_Y + CARD_TITLE_FONT_SIZE).attr("font-size", CARD_TITLE_FONT_SIZE).attr("font-weight", "500").attr("fill", palette.text).text(card.title);
+      if (hasMeta) {
+        const separatorY = cy + CARD_HEADER_HEIGHT;
+        cg.append("line").attr("x1", cx).attr("y1", separatorY).attr("x2", cx + cardLayout.width).attr("y2", separatorY).attr("stroke", cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+        let metaY = separatorY + CARD_SEPARATOR_GAP + CARD_META_FONT_SIZE;
+        for (const meta of tagMeta) {
+          cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.textMuted).text(`${meta.label}: `);
+          const labelWidth = (meta.label.length + 2) * CARD_META_FONT_SIZE * 0.6;
+          cg.append("text").attr("x", cx + CARD_PADDING_X + labelWidth).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.text).text(meta.value);
+          metaY += CARD_META_LINE_HEIGHT;
+        }
+        for (const detail of card.details) {
+          cg.append("text").attr("x", cx + CARD_PADDING_X).attr("y", metaY).attr("font-size", CARD_META_FONT_SIZE).attr("fill", palette.textMuted).text(detail);
+          metaY += CARD_META_LINE_HEIGHT;
+        }
+      }
+    }
+  }
+}
+function renderKanbanForExport(content, theme, palette) {
+  const parsed = parseKanban(content, palette);
+  if (parsed.error || parsed.columns.length === 0) return "";
+  const isDark = theme === "dark";
+  const layout = computeLayout(parsed, palette);
+  const container = document.createElement("div");
+  renderKanban(container, parsed, palette, isDark, void 0, {
+    width: layout.totalWidth,
+    height: layout.totalHeight
+  });
+  const svgEl = container.querySelector("svg");
+  return svgEl?.outerHTML ?? "";
+}
+var d3Selection2, DIAGRAM_PADDING2, COLUMN_GAP, COLUMN_HEADER_HEIGHT, COLUMN_PADDING, COLUMN_MIN_WIDTH, CARD_HEADER_HEIGHT, CARD_META_LINE_HEIGHT, CARD_SEPARATOR_GAP, CARD_GAP, CARD_RADIUS2, CARD_PADDING_X, CARD_PADDING_Y, CARD_STROKE_WIDTH, TITLE_HEIGHT2, TITLE_FONT_SIZE2, COLUMN_HEADER_FONT_SIZE, CARD_TITLE_FONT_SIZE, CARD_META_FONT_SIZE, WIP_FONT_SIZE, COLUMN_RADIUS, COLUMN_HEADER_RADIUS, LEGEND_HEIGHT3, LEGEND_FONT_SIZE, LEGEND_DOT_R3, LEGEND_ENTRY_FONT_SIZE2;
+var init_renderer2 = __esm({
+  "src/kanban/renderer.ts"() {
+    "use strict";
+    d3Selection2 = __toESM(require("d3-selection"), 1);
+    init_fonts();
+    init_parser5();
+    init_mutations();
+    DIAGRAM_PADDING2 = 20;
+    COLUMN_GAP = 16;
+    COLUMN_HEADER_HEIGHT = 36;
+    COLUMN_PADDING = 12;
+    COLUMN_MIN_WIDTH = 200;
+    CARD_HEADER_HEIGHT = 24;
+    CARD_META_LINE_HEIGHT = 14;
+    CARD_SEPARATOR_GAP = 4;
+    CARD_GAP = 8;
+    CARD_RADIUS2 = 6;
+    CARD_PADDING_X = 10;
+    CARD_PADDING_Y = 6;
+    CARD_STROKE_WIDTH = 1.5;
+    TITLE_HEIGHT2 = 30;
+    TITLE_FONT_SIZE2 = 18;
+    COLUMN_HEADER_FONT_SIZE = 13;
+    CARD_TITLE_FONT_SIZE = 12;
+    CARD_META_FONT_SIZE = 10;
+    WIP_FONT_SIZE = 10;
+    COLUMN_RADIUS = 8;
+    COLUMN_HEADER_RADIUS = 8;
+    LEGEND_HEIGHT3 = 28;
     LEGEND_FONT_SIZE = 11;
-    LEGEND_MAX_PER_ROW2 = 3;
-    LEGEND_CHAR_WIDTH = 7.5;
-    EYE_ICON_SIZE = 12;
-    EYE_ICON_GAP2 = 6;
-    EYE_OPEN_PATH = "M1 6C1 6 3 2 6 2C9 2 11 6 11 6C11 6 9 10 6 10C3 10 1 6 1 6Z";
-    EYE_PUPIL_CX = 6;
-    EYE_PUPIL_CY = 6;
-    EYE_PUPIL_R = 1.8;
+    LEGEND_DOT_R3 = 4;
+    LEGEND_ENTRY_FONT_SIZE2 = 10;
   }
 });
 
@@ -6185,12 +6838,12 @@ var init_layout2 = __esm({
 });
 
 // src/class/renderer.ts
-var renderer_exports2 = {};
-__export(renderer_exports2, {
+var renderer_exports3 = {};
+__export(renderer_exports3, {
   renderClassDiagram: () => renderClassDiagram,
   renderClassDiagramForExport: () => renderClassDiagramForExport
 });
-function mix2(a, b, pct) {
+function mix3(a, b, pct) {
   const parse = (h) => {
     const r = h.replace("#", "");
     const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
@@ -6215,7 +6868,7 @@ function modifierColor(modifier, palette, colorOff) {
 }
 function nodeFill2(palette, isDark, modifier, nodeColor, colorOff) {
   const color = nodeColor ?? modifierColor(modifier, palette, colorOff);
-  return mix2(color, isDark ? palette.surface : palette.bg, 20);
+  return mix3(color, isDark ? palette.surface : palette.bg, 20);
 }
 function nodeStroke2(palette, modifier, nodeColor, colorOff) {
   return nodeColor ?? modifierColor(modifier, palette, colorOff);
@@ -6253,7 +6906,7 @@ function isSourceMarker(type) {
   return type === "composes" || type === "aggregates";
 }
 function renderClassDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims) {
-  d3Selection2.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
@@ -6261,14 +6914,14 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   const diagramW = layout.width;
   const diagramH = layout.height;
   const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING2 * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING2 * 2) / diagramH;
+  const scaleX = (width - DIAGRAM_PADDING3 * 2) / diagramW;
+  const scaleY = (availH - DIAGRAM_PADDING3 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE2, scaleX, scaleY);
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + (availH - scaledH) / 2;
-  const svg = d3Selection2.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
+  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   const AW = 12;
   const AH = 8;
@@ -6286,9 +6939,9 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection2.select(this).attr("opacity", 0.7);
+          d3Selection3.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection2.select(this).attr("opacity", 1);
+          d3Selection3.select(this).attr("opacity", 1);
         });
       }
     }
@@ -6399,8 +7052,8 @@ function renderClassDiagramForExport(content, theme, palette) {
   const layout = layoutClassDiagram(parsed);
   const isDark = theme === "dark";
   const container = document.createElement("div");
-  const exportWidth = layout.width + DIAGRAM_PADDING2 * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING2 * 2 + (parsed.title ? 40 : 0);
+  const exportWidth = layout.width + DIAGRAM_PADDING3 * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING3 * 2 + (parsed.title ? 40 : 0);
   container.style.width = `${exportWidth}px`;
   container.style.height = `${exportHeight}px`;
   container.style.position = "absolute";
@@ -6428,16 +7081,16 @@ function renderClassDiagramForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection2, d3Shape, DIAGRAM_PADDING2, MAX_SCALE2, CLASS_FONT_SIZE, MEMBER_FONT_SIZE, EDGE_LABEL_FONT_SIZE, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, MEMBER_LINE_HEIGHT2, COMPARTMENT_PADDING_Y2, MEMBER_PADDING_X, lineGenerator;
-var init_renderer2 = __esm({
+var d3Selection3, d3Shape, DIAGRAM_PADDING3, MAX_SCALE2, CLASS_FONT_SIZE, MEMBER_FONT_SIZE, EDGE_LABEL_FONT_SIZE, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, MEMBER_LINE_HEIGHT2, COMPARTMENT_PADDING_Y2, MEMBER_PADDING_X, lineGenerator;
+var init_renderer3 = __esm({
   "src/class/renderer.ts"() {
     "use strict";
-    d3Selection2 = __toESM(require("d3-selection"), 1);
+    d3Selection3 = __toESM(require("d3-selection"), 1);
     d3Shape = __toESM(require("d3-shape"), 1);
     init_fonts();
     init_parser2();
     init_layout2();
-    DIAGRAM_PADDING2 = 20;
+    DIAGRAM_PADDING3 = 20;
     MAX_SCALE2 = 3;
     CLASS_FONT_SIZE = 13;
     MEMBER_FONT_SIZE = 11;
@@ -6592,12 +7245,12 @@ var init_layout3 = __esm({
 });
 
 // src/er/renderer.ts
-var renderer_exports3 = {};
-__export(renderer_exports3, {
+var renderer_exports4 = {};
+__export(renderer_exports4, {
   renderERDiagram: () => renderERDiagram,
   renderERDiagramForExport: () => renderERDiagramForExport
 });
-function mix3(a, b, pct) {
+function mix4(a, b, pct) {
   const parse = (h) => {
     const r = h.replace("#", "");
     const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
@@ -6668,7 +7321,7 @@ function drawCardinality(g, point, prevPoint, cardinality, color, useLabels) {
   }
 }
 function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims) {
-  d3Selection3.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection4.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
@@ -6676,23 +7329,23 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   const diagramW = layout.width;
   const diagramH = layout.height;
   const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING3 * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING3 * 2) / diagramH;
+  const scaleX = (width - DIAGRAM_PADDING4 * 2) / diagramW;
+  const scaleY = (availH - DIAGRAM_PADDING4 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE3, scaleX, scaleY);
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + (availH - scaledH) / 2;
-  const svg = d3Selection3.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
+  const svg = d3Selection4.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
   if (parsed.title) {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(parsed.title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection3.select(this).attr("opacity", 0.7);
+          d3Selection4.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection3.select(this).attr("opacity", 1);
+          d3Selection4.select(this).attr("opacity", 1);
         });
       }
     }
@@ -6746,7 +7399,7 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
     }
     const w = node.width;
     const h = node.height;
-    const fill2 = mix3(nodeColor, isDark ? palette.surface : palette.bg, 20);
+    const fill2 = mix4(nodeColor, isDark ? palette.surface : palette.bg, 20);
     const stroke2 = nodeColor;
     nodeG.append("rect").attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h).attr("rx", 3).attr("ry", 3).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", NODE_STROKE_WIDTH3);
     let yPos = -h / 2;
@@ -6777,8 +7430,8 @@ function renderERDiagramForExport(content, theme, palette) {
   const layout = layoutERDiagram(parsed);
   const isDark = theme === "dark";
   const container = document.createElement("div");
-  const exportWidth = layout.width + DIAGRAM_PADDING3 * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING3 * 2 + (parsed.title ? 40 : 0);
+  const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0);
   container.style.width = `${exportWidth}px`;
   container.style.height = `${exportHeight}px`;
   container.style.position = "absolute";
@@ -6806,17 +7459,17 @@ function renderERDiagramForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection3, d3Shape2, DIAGRAM_PADDING3, MAX_SCALE3, TABLE_FONT_SIZE, COLUMN_FONT_SIZE, EDGE_LABEL_FONT_SIZE2, EDGE_STROKE_WIDTH3, NODE_STROKE_WIDTH3, MEMBER_LINE_HEIGHT4, COMPARTMENT_PADDING_Y4, MEMBER_PADDING_X2, lineGenerator2;
-var init_renderer3 = __esm({
+var d3Selection4, d3Shape2, DIAGRAM_PADDING4, MAX_SCALE3, TABLE_FONT_SIZE, COLUMN_FONT_SIZE, EDGE_LABEL_FONT_SIZE2, EDGE_STROKE_WIDTH3, NODE_STROKE_WIDTH3, MEMBER_LINE_HEIGHT4, COMPARTMENT_PADDING_Y4, MEMBER_PADDING_X2, lineGenerator2;
+var init_renderer4 = __esm({
   "src/er/renderer.ts"() {
     "use strict";
-    d3Selection3 = __toESM(require("d3-selection"), 1);
+    d3Selection4 = __toESM(require("d3-selection"), 1);
     d3Shape2 = __toESM(require("d3-shape"), 1);
     init_fonts();
     init_palettes();
     init_parser3();
     init_layout3();
-    DIAGRAM_PADDING3 = 20;
+    DIAGRAM_PADDING4 = 20;
     MAX_SCALE3 = 3;
     TABLE_FONT_SIZE = 13;
     COLUMN_FONT_SIZE = 11;
@@ -6991,7 +7644,7 @@ __export(flowchart_renderer_exports, {
   renderFlowchart: () => renderFlowchart,
   renderFlowchartForExport: () => renderFlowchartForExport
 });
-function mix4(a, b, pct) {
+function mix5(a, b, pct) {
   const parse = (h) => {
     const r = h.replace("#", "");
     const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
@@ -7020,7 +7673,7 @@ function shapeDefaultColor(shape, palette, isEndTerminal, colorOff) {
 }
 function nodeFill3(palette, isDark, shape, nodeColor, isEndTerminal, colorOff) {
   const color = nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
-  return mix4(color, isDark ? palette.surface : palette.bg, 25);
+  return mix5(color, isDark ? palette.surface : palette.bg, 25);
 }
 function nodeStroke3(palette, shape, nodeColor, isEndTerminal, colorOff) {
   return nodeColor ?? shapeDefaultColor(shape, palette, isEndTerminal, colorOff);
@@ -7115,7 +7768,7 @@ function renderNodeShape(g, node, palette, isDark, endTerminalIds, colorOff) {
   }
 }
 function renderFlowchart(container, graph, layout, palette, isDark, onClickItem, exportDims) {
-  d3Selection4.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
@@ -7123,14 +7776,14 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
   const diagramW = layout.width;
   const diagramH = layout.height;
   const availH = height - titleHeight;
-  const scaleX = (width - DIAGRAM_PADDING4 * 2) / diagramW;
-  const scaleY = (availH - DIAGRAM_PADDING4 * 2) / diagramH;
+  const scaleX = (width - DIAGRAM_PADDING5 * 2) / diagramW;
+  const scaleY = (availH - DIAGRAM_PADDING5 * 2) / diagramH;
   const scale = Math.min(MAX_SCALE4, scaleX, scaleY);
   const scaledW = diagramW * scale;
   const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + (availH - scaledH) / 2;
-  const svg = d3Selection4.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
+  const svg = d3Selection5.select(container).append("svg").attr("width", width).attr("height", height).style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "fc-arrow").attr("viewBox", `0 0 ${ARROWHEAD_W} ${ARROWHEAD_H}`).attr("refX", ARROWHEAD_W).attr("refY", ARROWHEAD_H / 2).attr("markerWidth", ARROWHEAD_W).attr("markerHeight", ARROWHEAD_H).attr("orient", "auto").append("polygon").attr("points", `0,0 ${ARROWHEAD_W},${ARROWHEAD_H / 2} 0,${ARROWHEAD_H}`).attr("fill", palette.textMuted);
   const edgeColors = /* @__PURE__ */ new Set();
@@ -7147,9 +7800,9 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
       titleEl.attr("data-line-number", graph.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(graph.titleLineNumber)).on("mouseenter", function() {
-          d3Selection4.select(this).attr("opacity", 0.7);
+          d3Selection5.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection4.select(this).attr("opacity", 1);
+          d3Selection5.select(this).attr("opacity", 1);
         });
       }
     }
@@ -7161,7 +7814,7 @@ function renderFlowchart(container, graph, layout, palette, isDark, onClickItem,
     const gy = group.y - GROUP_EXTRA_PADDING - GROUP_LABEL_FONT_SIZE - 4;
     const gw = group.width + GROUP_EXTRA_PADDING * 2;
     const gh = group.height + GROUP_EXTRA_PADDING * 2 + GROUP_LABEL_FONT_SIZE + 4;
-    const fillColor = group.color ? mix4(group.color, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : mix4(palette.border, palette.bg, 30);
+    const fillColor = group.color ? mix5(group.color, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : mix5(palette.border, palette.bg, 30);
     const strokeColor = group.color ?? palette.textMuted;
     contentG.append("rect").attr("x", gx).attr("y", gy).attr("width", gw).attr("height", gh).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "fc-group");
     contentG.append("text").attr("x", gx + 8).attr("y", gy + GROUP_LABEL_FONT_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_FONT_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "fc-group-label").text(group.label);
@@ -7211,13 +7864,13 @@ function renderFlowchartForExport(content, theme, palette) {
   const layout = layoutGraph(parsed);
   const isDark = theme === "dark";
   const container = document.createElement("div");
-  container.style.width = `${layout.width + DIAGRAM_PADDING4 * 2}px`;
-  container.style.height = `${layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0)}px`;
+  container.style.width = `${layout.width + DIAGRAM_PADDING5 * 2}px`;
+  container.style.height = `${layout.height + DIAGRAM_PADDING5 * 2 + (parsed.title ? 40 : 0)}px`;
   container.style.position = "absolute";
   container.style.left = "-9999px";
   document.body.appendChild(container);
-  const exportWidth = layout.width + DIAGRAM_PADDING4 * 2;
-  const exportHeight = layout.height + DIAGRAM_PADDING4 * 2 + (parsed.title ? 40 : 0);
+  const exportWidth = layout.width + DIAGRAM_PADDING5 * 2;
+  const exportHeight = layout.height + DIAGRAM_PADDING5 * 2 + (parsed.title ? 40 : 0);
   try {
     renderFlowchart(
       container,
@@ -7240,16 +7893,16 @@ function renderFlowchartForExport(content, theme, palette) {
     document.body.removeChild(container);
   }
 }
-var d3Selection4, d3Shape3, DIAGRAM_PADDING4, MAX_SCALE4, NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE3, GROUP_LABEL_FONT_SIZE, EDGE_STROKE_WIDTH4, NODE_STROKE_WIDTH4, ARROWHEAD_W, ARROWHEAD_H, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT, GROUP_EXTRA_PADDING, lineGenerator3;
+var d3Selection5, d3Shape3, DIAGRAM_PADDING5, MAX_SCALE4, NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE3, GROUP_LABEL_FONT_SIZE, EDGE_STROKE_WIDTH4, NODE_STROKE_WIDTH4, ARROWHEAD_W, ARROWHEAD_H, IO_SKEW, SUBROUTINE_INSET, DOC_WAVE_HEIGHT, GROUP_EXTRA_PADDING, lineGenerator3;
 var init_flowchart_renderer = __esm({
   "src/graph/flowchart-renderer.ts"() {
     "use strict";
-    d3Selection4 = __toESM(require("d3-selection"), 1);
+    d3Selection5 = __toESM(require("d3-selection"), 1);
     d3Shape3 = __toESM(require("d3-shape"), 1);
     init_fonts();
     init_flowchart_parser();
     init_layout4();
-    DIAGRAM_PADDING4 = 20;
+    DIAGRAM_PADDING5 = 20;
     MAX_SCALE4 = 3;
     NODE_FONT_SIZE = 13;
     EDGE_LABEL_FONT_SIZE3 = 11;
@@ -7267,8 +7920,8 @@ var init_flowchart_renderer = __esm({
 });
 
 // src/sequence/renderer.ts
-var renderer_exports4 = {};
-__export(renderer_exports4, {
+var renderer_exports5 = {};
+__export(renderer_exports5, {
   applyGroupOrdering: () => applyGroupOrdering,
   applyPositionOverrides: () => applyPositionOverrides,
   buildNoteMessageMap: () => buildNoteMessageMap,
@@ -7344,7 +7997,7 @@ function wrapTextLines(text, maxChars) {
   }
   return wrapped;
 }
-function mix5(a, b, pct) {
+function mix6(a, b, pct) {
   const parse = (h) => {
     const r = h.replace("#", "");
     const f = r.length === 3 ? r[0] + r[0] + r[1] + r[1] + r[2] + r[2] : r;
@@ -7628,7 +8281,7 @@ function applyGroupOrdering(participants, groups) {
   return result;
 }
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
-  d3Selection5.select(container).selectAll("*").remove();
+  d3Selection6.select(container).selectAll("*").remove();
   const { title, messages, elements, groups, options: parsedOptions } = parsed;
   const collapsedSections = options?.collapsedSections;
   const expandedNoteLines = options?.expandedNoteLines;
@@ -7668,7 +8321,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
     msgToLastStep.set(step.messageIndex, si);
   });
-  const findAssociatedFirstStep = (note) => {
+  const findAssociatedLastStep = (note) => {
     let closestMsgIndex = -1;
     let closestLine = -1;
     for (let mi = 0; mi < messages.length; mi++) {
@@ -7681,7 +8334,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       return -1;
     }
     if (closestMsgIndex < 0) return -1;
-    return msgToFirstStep.get(closestMsgIndex) ?? -1;
+    return msgToLastStep.get(closestMsgIndex) ?? -1;
   };
   const findFirstMsgIndex = (els) => {
     for (const el of els) {
@@ -7888,7 +8541,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const GROUP_PADDING_TOP = 22;
   const GROUP_PADDING_BOTTOM = 8;
   const GROUP_LABEL_SIZE = 11;
-  const titleOffset = title ? TITLE_HEIGHT2 : 0;
+  const titleOffset = title ? TITLE_HEIGHT3 : 0;
   const groupOffset = groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY = TOP_MARGIN + titleOffset + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
@@ -7931,7 +8584,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       for (let i = 0; i < els.length; i++) {
         const el = els[i];
         if (isSequenceNote(el)) {
-          const si = findAssociatedFirstStep(el);
+          const si = findAssociatedLastStep(el);
           if (si < 0) continue;
           const prevNote = i > 0 && isSequenceNote(els[i - 1]) ? els[i - 1] : null;
           const prevNoteY = prevNote ? noteYMap.get(prevNote) : void 0;
@@ -7981,7 +8634,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   participants.forEach((p, i) => {
     participantX.set(p.id, offsetX + i * PARTICIPANT_GAP);
   });
-  const svg = d3Selection5.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
+  const svg = d3Selection6.select(container).append("svg").attr("width", "100%").attr("height", totalHeight).attr("viewBox", `0 0 ${svgWidth} ${totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("class", "sequence-diagram").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   defs.append("marker").attr("id", "seq-arrowhead").attr("viewBox", `0 0 ${ARROWHEAD_SIZE} ${ARROWHEAD_SIZE}`).attr("refX", ARROWHEAD_SIZE).attr("refY", ARROWHEAD_SIZE / 2).attr("markerWidth", ARROWHEAD_SIZE).attr("markerHeight", ARROWHEAD_SIZE).attr("orient", "auto").append("polygon").attr(
     "points",
@@ -8010,7 +8663,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const boxY = participantStartY - GROUP_PADDING_TOP;
     const boxH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
     const resolvedGroupColor = group.color ? resolveColor(group.color, palette) : void 0;
-    const fillColor = resolvedGroupColor ? mix5(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
+    const fillColor = resolvedGroupColor ? mix6(resolvedGroupColor, isDark ? palette.surface : palette.bg, 10) : isDark ? palette.surface : palette.bg;
     const strokeColor = resolvedGroupColor || palette.textMuted;
     svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
     svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
@@ -8180,7 +8833,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       if (msg) coveredLines.push(msg.lineNumber);
     }
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", isDark ? palette.surface : palette.bg);
-    const actFill = mix5(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
+    const actFill = mix6(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     svg.append("rect").attr("x", x).attr("y", y1).attr("width", ACTIVATION_WIDTH).attr("height", y2 - y1).attr("fill", actFill).attr("stroke", palette.primary).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("data-participant-id", act.participantId).attr("data-msg-lines", coveredLines.join(",")).attr("data-line-number", coveredLines[0] ?? "").attr("class", "activation");
   });
   for (const ln of deferredLines) {
@@ -8309,8 +8962,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       }
     }
   });
-  const noteFill = isDark ? mix5(palette.surface, palette.bg, 50) : mix5(palette.bg, palette.surface, 15);
-  const collapsedNoteFill = mix5(palette.textMuted, palette.bg, 15);
+  const noteFill = isDark ? mix6(palette.surface, palette.bg, 50) : mix6(palette.bg, palette.surface, 15);
+  const collapsedNoteFill = mix6(palette.textMuted, palette.bg, 15);
   const renderNoteElements = (els) => {
     for (const el of els) {
       if (isSequenceNote(el)) {
@@ -8466,11 +9119,11 @@ function renderParticipant(svg, participant, cx, cy, palette, isDark) {
     isActor ? PARTICIPANT_BOX_HEIGHT + 14 : PARTICIPANT_BOX_HEIGHT / 2 + 5
   ).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", 13).attr("font-weight", 500).text(participant.label);
 }
-var d3Selection5, PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT2, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, BARE_URL_MAX_DISPLAY, fill, stroke, SW, W, H;
-var init_renderer4 = __esm({
+var d3Selection6, PARTICIPANT_GAP, PARTICIPANT_BOX_WIDTH, PARTICIPANT_BOX_HEIGHT, TOP_MARGIN, TITLE_HEIGHT3, PARTICIPANT_Y_OFFSET, SERVICE_BORDER_RADIUS, MESSAGE_START_OFFSET, LIFELINE_TAIL, ARROWHEAD_SIZE, NOTE_MAX_W, NOTE_FOLD, NOTE_PAD_H, NOTE_PAD_V, NOTE_FONT_SIZE, NOTE_LINE_H, NOTE_GAP, NOTE_CHAR_W, NOTE_CHARS_PER_LINE, COLLAPSED_NOTE_H, COLLAPSED_NOTE_W, BARE_URL_MAX_DISPLAY, fill, stroke, SW, W, H;
+var init_renderer5 = __esm({
   "src/sequence/renderer.ts"() {
     "use strict";
-    d3Selection5 = __toESM(require("d3-selection"), 1);
+    d3Selection6 = __toESM(require("d3-selection"), 1);
     init_colors();
     init_fonts();
     init_parser();
@@ -8478,7 +9131,7 @@ var init_renderer4 = __esm({
     PARTICIPANT_BOX_WIDTH = 120;
     PARTICIPANT_BOX_HEIGHT = 50;
     TOP_MARGIN = 20;
-    TITLE_HEIGHT2 = 30;
+    TITLE_HEIGHT3 = 30;
     PARTICIPANT_Y_OFFSET = 10;
     SERVICE_BORDER_RADIUS = 10;
     MESSAGE_START_OFFSET = 30;
@@ -8496,7 +9149,7 @@ var init_renderer4 = __esm({
     COLLAPSED_NOTE_H = 20;
     COLLAPSED_NOTE_W = 40;
     BARE_URL_MAX_DISPLAY = 35;
-    fill = (palette, isDark) => mix5(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
+    fill = (palette, isDark) => mix6(palette.primary, isDark ? palette.surface : palette.bg, isDark ? 15 : 30);
     stroke = (palette) => palette.textMuted;
     SW = 1.5;
     W = PARTICIPANT_BOX_WIDTH;
@@ -9052,7 +9705,7 @@ function tokenizeFreeformText(text) {
   return Array.from(counts.entries()).map(([text2, count]) => ({ text: text2, weight: count, lineNumber: 0 })).sort((a, b) => b.weight - a.weight);
 }
 function renderSlopeChart(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { periods, data, title } = parsed;
   if (data.length === 0 || periods.length < 2) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -9079,7 +9732,7 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
   const valuePadding = (maxVal - minVal) * 0.1 || 1;
   const yScale = d3Scale.scaleLinear().domain([minVal - valuePadding, maxVal + valuePadding]).range([innerHeight, 0]);
   const xScale = d3Scale.scalePoint().domain(periods).range([0, innerWidth]).padding(0);
-  const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${SLOPE_MARGIN.left},${SLOPE_MARGIN.top})`);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
@@ -9088,9 +9741,9 @@ function renderSlopeChart(container, parsed, palette, isDark, onClickItem, expor
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       }
     }
@@ -9264,7 +9917,7 @@ function orderArcNodes(links, order, groups) {
   return allNodes;
 }
 function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { links, title, orientation, arcOrder, arcNodeGroups } = parsed;
   if (links.length === 0) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -9301,7 +9954,7 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   const values = links.map((l) => l.value);
   const [minVal, maxVal] = d3Array.extent(values);
   const strokeScale = d3Scale.scaleLinear().domain([minVal, maxVal]).range([1.5, 6]);
-  const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
   if (title) {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -9309,9 +9962,9 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       }
     }
@@ -9326,14 +9979,14 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
   function handleMouseEnter(hovered) {
     const connected = neighbors.get(hovered);
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const src = el.attr("data-source");
       const tgt = el.attr("data-target");
       const isRelated = src === hovered || tgt === hovered;
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const name = el.attr("data-node");
       const isRelated = name === hovered || connected.has(name);
       el.attr("opacity", isRelated ? 1 : FADE_OPACITY);
@@ -9358,23 +10011,23 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
     const members = groupNodeSets.get(groupName);
     if (!members) return;
     g.selectAll(".arc-link").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const isRelated = members.has(el.attr("data-source")) || members.has(el.attr("data-target"));
       el.attr("stroke-opacity", isRelated ? 0.85 : FADE_OPACITY);
     });
     g.selectAll(".arc-node").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       el.attr("opacity", members.has(el.attr("data-node")) ? 1 : FADE_OPACITY);
     });
     g.selectAll(".arc-group-band").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       el.attr(
         "fill-opacity",
         el.attr("data-group") === groupName ? 0.18 : 0.03
       );
     });
     g.selectAll(".arc-group-label").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       el.attr("fill-opacity", el.attr("data-group") === groupName ? 1 : 0.2);
     });
   }
@@ -9670,7 +10323,7 @@ function showEventDatesOnScale(g, scale, startDate, endDate, innerHeight, accent
 function hideEventDatesOnScale(g) {
   g.selectAll(".tl-event-date").remove();
   g.selectAll(".tl-scale-tick").each(function() {
-    const el = d3Selection6.select(this);
+    const el = d3Selection7.select(this);
     const isDashed = el.attr("stroke-dasharray");
     el.attr("opacity", isDashed ? 0.15 : 0.4);
   });
@@ -9728,7 +10381,7 @@ function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
 function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
     timelineGroups,
@@ -9780,13 +10433,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   const FADE_OPACITY = 0.1;
   function fadeToGroup(g, groupName) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const evGroup = el.attr("data-group");
       el.attr("opacity", evGroup === groupName ? 1 : FADE_OPACITY);
     });
     g.selectAll(".tl-legend-item, .tl-lane-header").each(
       function() {
-        const el = d3Selection6.select(this);
+        const el = d3Selection7.select(this);
         const name = el.attr("data-group");
         el.attr("opacity", name === groupName ? 1 : FADE_OPACITY);
       }
@@ -9798,7 +10451,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   function fadeToEra(g, eraStart, eraEnd) {
     g.selectAll(".tl-event").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const date = parseFloat(el.attr("data-date"));
       const endDate = el.attr("data-end-date");
       const evEnd = endDate ? parseFloat(endDate) : date;
@@ -9810,14 +10463,14 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       FADE_OPACITY
     );
     g.selectAll(".tl-era").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const s = parseFloat(el.attr("data-era-start"));
       const e = parseFloat(el.attr("data-era-end"));
       const isSelf = s === eraStart && e === eraEnd;
       el.attr("opacity", isSelf ? 1 : FADE_OPACITY);
     });
     g.selectAll(".tl-marker").each(function() {
-      const el = d3Selection6.select(this);
+      const el = d3Selection7.select(this);
       const date = parseFloat(el.attr("data-marker-date"));
       const inside = date >= eraStart && date <= eraEnd;
       el.attr("opacity", inside ? 1 : FADE_OPACITY);
@@ -9849,7 +10502,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const innerHeight = height - margin.top - margin.bottom;
       const laneWidth = innerWidth / laneCount;
       const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
-      const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+      const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
         const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -9857,9 +10510,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           titleEl.attr("data-line-number", parsed.titleLineNumber);
           if (onClickItem) {
             titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-              d3Selection6.select(this).attr("opacity", 0.7);
+              d3Selection7.select(this).attr("opacity", 0.7);
             }).on("mouseleave", function() {
-              d3Selection6.select(this).attr("opacity", 1);
+              d3Selection7.select(this).attr("opacity", 1);
             });
           }
         }
@@ -9935,7 +10588,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const defs = svg.select("defs").node() || svg.append("defs").node();
-              d3Selection6.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+              d3Selection7.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
                 { offset: "0%", opacity: 1 },
                 { offset: "80%", opacity: 1 },
                 { offset: "100%", opacity: 0 }
@@ -9964,7 +10617,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const axisX = 20;
       const yScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerHeight]);
       const sorted = timelineEvents.slice().sort((a, b) => parseTimelineDate(a.date) - parseTimelineDate(b.date));
-      const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+      const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
       const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
       if (title) {
         const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -9972,9 +10625,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           titleEl.attr("data-line-number", parsed.titleLineNumber);
           if (onClickItem) {
             titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-              d3Selection6.select(this).attr("opacity", 0.7);
+              d3Selection7.select(this).attr("opacity", 0.7);
             }).on("mouseleave", function() {
-              d3Selection6.select(this).attr("opacity", 1);
+              d3Selection7.select(this).attr("opacity", 1);
             });
           }
         }
@@ -10053,7 +10706,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
-            d3Selection6.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
+            d3Selection7.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
@@ -10108,7 +10761,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const totalGaps = (lanes.length - 1) * GROUP_GAP;
     const rowH = Math.min(28, (innerHeight - totalGaps) / totalEventRows);
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
       const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -10116,9 +10769,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         titleEl.attr("data-line-number", parsed.titleLineNumber);
         if (onClickItem) {
           titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-            d3Selection6.select(this).attr("opacity", 0.7);
+            d3Selection7.select(this).attr("opacity", 0.7);
           }).on("mouseleave", function() {
-            d3Selection6.select(this).attr("opacity", 1);
+            d3Selection7.select(this).attr("opacity", 1);
           });
         }
       }
@@ -10222,7 +10875,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           if (ev.uncertain) {
             const gradientId = `uncertain-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
-            d3Selection6.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+            d3Selection7.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
@@ -10263,7 +10916,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const innerHeight = height - margin.top - margin.bottom;
     const rowH = Math.min(28, innerHeight / sorted.length);
     const xScale = d3Scale.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
-    const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
     if (title) {
       const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -10271,9 +10924,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         titleEl.attr("data-line-number", parsed.titleLineNumber);
         if (onClickItem) {
           titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-            d3Selection6.select(this).attr("opacity", 0.7);
+            d3Selection7.select(this).attr("opacity", 0.7);
           }).on("mouseleave", function() {
-            d3Selection6.select(this).attr("opacity", 1);
+            d3Selection7.select(this).attr("opacity", 1);
           });
         }
       }
@@ -10371,7 +11024,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         if (ev.uncertain) {
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
           const defs = svg.select("defs").node() || svg.append("defs").node();
-          d3Selection6.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
+          d3Selection7.select(defs).append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("y1", "0%").attr("x2", "100%").attr("y2", "0%").selectAll("stop").data([
             { offset: "0%", opacity: 1 },
             { offset: "80%", opacity: 1 },
             { offset: "100%", opacity: 0 }
@@ -10404,7 +11057,7 @@ function getRotateFn(mode) {
   return () => 0;
 }
 function renderWordCloud(container, parsed, palette, _isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { words, title, cloudOptions } = parsed;
   if (words.length === 0) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -10425,16 +11078,16 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
     return minSize + t * (maxSize - minSize);
   };
   const rotateFn = getRotateFn(cloudOptions.rotate);
-  const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   if (title) {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       }
     }
@@ -10461,7 +11114,7 @@ function renderWordCloud(container, parsed, palette, _isDark, onClickItem, expor
 }
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
   return new Promise((resolve) => {
-    d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+    d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
     const { words, title, cloudOptions } = parsed;
     if (words.length === 0) {
       resolve();
@@ -10488,7 +11141,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
       return minSize + t * (maxSize - minSize);
     };
     const rotateFn = getRotateFn(cloudOptions.rotate);
-    const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+    const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
     if (title) {
       const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").text(title);
       if (parsed.titleLineNumber) {
@@ -10625,7 +11278,7 @@ function regionCentroid(circles, inside) {
   return { x: sx / count, y: sy / count };
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const { vennSets, vennOverlaps, vennShowValues, title } = parsed;
   if (vennSets.length < 2) return;
   const width = exportDims?.width ?? container.clientWidth;
@@ -10712,7 +11365,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     marginTop,
     marginBottom
   ).map((c) => ({ ...c, y: c.y + titleHeight }));
-  const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
     const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style("cursor", onClickItem && parsed.titleLineNumber ? "pointer" : "default").text(title);
@@ -10720,9 +11373,9 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
         titleEl.on("click", () => onClickItem(parsed.titleLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       }
     }
@@ -10870,7 +11523,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   });
 }
 function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportDims) {
-  d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  d3Selection7.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     title,
     quadrantLabels,
@@ -10902,7 +11555,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const chartHeight = height - margin.top - margin.bottom;
   const xScale = d3Scale.scaleLinear().domain([0, 1]).range([0, chartWidth]);
   const yScale = d3Scale.scaleLinear().domain([0, 1]).range([chartHeight, 0]);
-  const svg = d3Selection6.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
+  const svg = d3Selection7.select(container).append("svg").attr("width", width).attr("height", height).style("background", bgColor);
   const tooltip = createTooltip(container, palette, isDark);
   if (title) {
     const titleText = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", 30).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "20px").attr("font-weight", "700").style(
@@ -10914,9 +11567,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     }
     if (onClickItem && quadrantTitleLineNumber) {
       titleText.on("click", () => onClickItem(quadrantTitleLineNumber)).on("mouseenter", function() {
-        d3Selection6.select(this).attr("opacity", 0.7);
+        d3Selection7.select(this).attr("opacity", 0.7);
       }).on("mouseleave", function() {
-        d3Selection6.select(this).attr("opacity", 1);
+        d3Selection7.select(this).attr("opacity", 1);
       });
     }
   }
@@ -11052,7 +11705,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     (d) => onClickItem && d.label?.lineNumber ? "pointer" : "default"
   ).each(function(d) {
     const layout = labelLayouts.get(d.label.text);
-    const el = d3Selection6.select(this);
+    const el = d3Selection7.select(this);
     if (layout.lines.length === 1) {
       el.text(layout.lines[0]);
     } else {
@@ -11068,9 +11721,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     quadrantLabelTexts.on("click", (_, d) => {
       if (d.label?.lineNumber) onClickItem(d.label.lineNumber);
     }).on("mouseenter", function() {
-      d3Selection6.select(this).attr("opacity", 0.7);
+      d3Selection7.select(this).attr("opacity", 0.7);
     }).on("mouseleave", function() {
-      d3Selection6.select(this).attr("opacity", 1);
+      d3Selection7.select(this).attr("opacity", 1);
     });
   }
   if (quadrantXAxis) {
@@ -11085,9 +11738,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantXAxisLineNumber) {
       [xLowLabel, xHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantXAxisLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       });
     }
@@ -11106,9 +11759,9 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (onClickItem && quadrantYAxisLineNumber) {
       [yLowLabel, yHighLabel].forEach((label) => {
         label.on("click", () => onClickItem(quadrantYAxisLineNumber)).on("mouseenter", function() {
-          d3Selection6.select(this).attr("opacity", 0.7);
+          d3Selection7.select(this).attr("opacity", 0.7);
         }).on("mouseleave", function() {
-          d3Selection6.select(this).attr("opacity", 1);
+          d3Selection7.select(this).attr("opacity", 1);
         });
       });
     }
@@ -11156,7 +11809,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     pointsG.selectAll("g.point-group").each(function(_2, i) {
       const pt = quadrantPoints[i];
       const ptQuad = getPointQuadrant(pt.x, pt.y);
-      d3Selection6.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
+      d3Selection7.select(this).attr("opacity", ptQuad === d.position ? 1 : 0.2);
     });
   }).on("mouseleave", () => {
     quadrantRects.attr("opacity", 1);
@@ -11180,7 +11833,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
     const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
     const orgParsed = parseOrg2(content, effectivePalette2);
-    if (orgParsed.error || orgParsed.roots.length === 0) return "";
+    if (orgParsed.error) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
     const activeTagGroup = orgExportState?.activeTagGroup ?? null;
     const hiddenAttributes = orgExportState?.hiddenAttributes;
@@ -11232,10 +11885,43 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
       document.body.removeChild(container2);
     }
   }
+  if (detectedType === "kanban") {
+    const { parseKanban: parseKanban2 } = await Promise.resolve().then(() => (init_parser5(), parser_exports5));
+    const { renderKanban: renderKanban2 } = await Promise.resolve().then(() => (init_renderer2(), renderer_exports2));
+    const isDark2 = theme === "dark";
+    const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
+    const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
+    const kanbanParsed = parseKanban2(content, effectivePalette2);
+    if (kanbanParsed.error || kanbanParsed.columns.length === 0) return "";
+    const container2 = document.createElement("div");
+    container2.style.position = "absolute";
+    container2.style.left = "-9999px";
+    document.body.appendChild(container2);
+    try {
+      renderKanban2(container2, kanbanParsed, effectivePalette2, isDark2);
+      const svgEl = container2.querySelector("svg");
+      if (!svgEl) return "";
+      if (theme === "transparent") {
+        svgEl.style.background = "none";
+      } else if (!svgEl.style.background) {
+        svgEl.style.background = effectivePalette2.bg;
+      }
+      svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svgEl.style.fontFamily = FONT_FAMILY;
+      const svgHtml = svgEl.outerHTML;
+      if (options?.branding !== false) {
+        const brandColor = theme === "transparent" ? "#888" : effectivePalette2.textMuted;
+        return injectBranding(svgHtml, brandColor);
+      }
+      return svgHtml;
+    } finally {
+      document.body.removeChild(container2);
+    }
+  }
   if (detectedType === "class") {
     const { parseClassDiagram: parseClassDiagram2 } = await Promise.resolve().then(() => (init_parser2(), parser_exports2));
     const { layoutClassDiagram: layoutClassDiagram2 } = await Promise.resolve().then(() => (init_layout2(), layout_exports2));
-    const { renderClassDiagram: renderClassDiagram2 } = await Promise.resolve().then(() => (init_renderer2(), renderer_exports2));
+    const { renderClassDiagram: renderClassDiagram2 } = await Promise.resolve().then(() => (init_renderer3(), renderer_exports3));
     const isDark2 = theme === "dark";
     const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
     const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
@@ -11284,7 +11970,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
   if (detectedType === "er") {
     const { parseERDiagram: parseERDiagram2 } = await Promise.resolve().then(() => (init_parser3(), parser_exports3));
     const { layoutERDiagram: layoutERDiagram2 } = await Promise.resolve().then(() => (init_layout3(), layout_exports3));
-    const { renderERDiagram: renderERDiagram2 } = await Promise.resolve().then(() => (init_renderer3(), renderer_exports3));
+    const { renderERDiagram: renderERDiagram2 } = await Promise.resolve().then(() => (init_renderer4(), renderer_exports4));
     const isDark2 = theme === "dark";
     const { getPalette: getPalette3 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
     const effectivePalette2 = palette ?? (isDark2 ? getPalette3("nord").dark : getPalette3("nord").light);
@@ -11397,7 +12083,7 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
   try {
     if (parsed.type === "sequence") {
       const { parseSequenceDgmo: parseSequenceDgmo2 } = await Promise.resolve().then(() => (init_parser(), parser_exports));
-      const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer4(), renderer_exports4));
+      const { renderSequenceDiagram: renderSequenceDiagram2 } = await Promise.resolve().then(() => (init_renderer5(), renderer_exports5));
       const seqParsed = parseSequenceDgmo2(content);
       if (seqParsed.error || seqParsed.participants.length === 0) return "";
       renderSequenceDiagram2(container, seqParsed, effectivePalette, isDark, void 0, {
@@ -11435,12 +12121,12 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
     document.body.removeChild(container);
   }
 }
-var d3Scale, d3Selection6, d3Shape4, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, MONTH_ABBR, EXPORT_WIDTH, EXPORT_HEIGHT;
+var d3Scale, d3Selection7, d3Shape4, d3Array, import_d3_cloud, DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, MONTH_ABBR, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
     d3Scale = __toESM(require("d3-scale"), 1);
-    d3Selection6 = __toESM(require("d3-selection"), 1);
+    d3Selection7 = __toESM(require("d3-selection"), 1);
     d3Shape4 = __toESM(require("d3-shape"), 1);
     d3Array = __toESM(require("d3-array"), 1);
     import_d3_cloud = __toESM(require("d3-cloud"), 1);
@@ -11609,6 +12295,8 @@ __export(index_exports, {
   collapseOrgTree: () => collapseOrgTree,
   colorNames: () => colorNames,
   computeActivations: () => computeActivations,
+  computeCardArchive: () => computeCardArchive,
+  computeCardMove: () => computeCardMove,
   computeTimeTicks: () => computeTimeTicks,
   contrastText: () => contrastText,
   decodeDiagramUrl: () => decodeDiagramUrl,
@@ -11626,6 +12314,7 @@ __export(index_exports, {
   hslToHex: () => hslToHex,
   inferParticipantType: () => inferParticipantType,
   injectBranding: () => injectBranding,
+  isArchiveColumn: () => isArchiveColumn,
   isSequenceBlock: () => isSequenceBlock,
   isSequenceNote: () => isSequenceNote,
   isValidHex: () => isValidHex,
@@ -11651,6 +12340,7 @@ __export(index_exports, {
   parseEChart: () => parseEChart,
   parseERDiagram: () => parseERDiagram,
   parseFlowchart: () => parseFlowchart,
+  parseKanban: () => parseKanban,
   parseOrg: () => parseOrg,
   parseQuadrant: () => parseQuadrant,
   parseSequenceDgmo: () => parseSequenceDgmo,
@@ -11666,6 +12356,8 @@ __export(index_exports, {
   renderERDiagramForExport: () => renderERDiagramForExport,
   renderFlowchart: () => renderFlowchart,
   renderFlowchartForExport: () => renderFlowchartForExport,
+  renderKanban: () => renderKanban,
+  renderKanbanForExport: () => renderKanbanForExport,
   renderOrg: () => renderOrg,
   renderOrgForExport: () => renderOrgForExport,
   renderQuadrant: () => renderQuadrant,
@@ -11883,13 +12575,16 @@ function buildMermaidQuadrant(parsed, options = {}) {
 init_flowchart_parser();
 init_parser2();
 init_layout2();
-init_renderer2();
+init_renderer3();
 init_parser3();
 init_layout3();
-init_renderer3();
+init_renderer4();
 init_parser4();
 init_layout();
 init_renderer();
+init_parser5();
+init_mutations();
+init_renderer2();
 init_collapse();
 
 // src/org/resolver.ts
@@ -11898,8 +12593,8 @@ var MAX_DEPTH = 10;
 var IMPORT_RE = /^(\s+)import:\s+(.+\.dgmo)\s*$/i;
 var TAGS_RE = /^tags:\s+(.+\.dgmo)\s*$/i;
 var HEADER_RE = /^(chart|title)\s*:/i;
-var OPTION_RE2 = /^[a-z][a-z0-9-]*\s*:/i;
-var GROUP_HEADING_RE3 = /^##\s+/;
+var OPTION_RE3 = /^[a-z][a-z0-9-]*\s*:/i;
+var GROUP_HEADING_RE4 = /^##\s+/;
 function dirname(filePath) {
   const last = filePath.lastIndexOf("/");
   return last > 0 ? filePath.substring(0, last) : "/";
@@ -11920,7 +12615,7 @@ function extractTagGroups(lines) {
   let current = null;
   for (const line5 of lines) {
     const trimmed = line5.trim();
-    if (GROUP_HEADING_RE3.test(trimmed)) {
+    if (GROUP_HEADING_RE4.test(trimmed)) {
       const nameMatch = trimmed.match(/^##\s+(.+?)(?:\s+alias\s+\w+)?(?:\s*\([^)]+\))?\s*$/);
       const name = nameMatch ? nameMatch[1].trim().toLowerCase() : trimmed.substring(3).trim().toLowerCase();
       current = { name, lines: [line5] };
@@ -11964,7 +12659,7 @@ function parseFileHeader(lines) {
         tagsDirective = tagsMatch[1].trim();
         continue;
       }
-      if (OPTION_RE2.test(trimmed) && !trimmed.startsWith("##") && !lines[i].match(/^\s/)) {
+      if (OPTION_RE3.test(trimmed) && !trimmed.startsWith("##") && !lines[i].match(/^\s/)) {
         const key = trimmed.split(":")[0].trim().toLowerCase();
         if (key !== "chart" && key !== "title" && !trimmed.includes("|")) {
           continue;
@@ -11993,7 +12688,7 @@ async function resolveFile(content, filePath, readFileFn, diagnostics, ancestorC
       headerLines.push(lines[i]);
       continue;
     }
-    if (GROUP_HEADING_RE3.test(trimmed)) continue;
+    if (GROUP_HEADING_RE4.test(trimmed)) continue;
     if (lines[i] !== trimmed) continue;
     const tagsMatch = trimmed.match(TAGS_RE);
     if (tagsMatch) {
@@ -12024,7 +12719,7 @@ async function resolveFile(content, filePath, readFileFn, diagnostics, ancestorC
     const importMatch = line5.match(IMPORT_RE);
     if (!importMatch) {
       const trimmed = line5.trim();
-      if (GROUP_HEADING_RE3.test(trimmed) || inlineTagGroups.length > 0 && isTagGroupEntry(line5, bodyLines, i)) {
+      if (GROUP_HEADING_RE4.test(trimmed) || inlineTagGroups.length > 0 && isTagGroupEntry(line5, bodyLines, i)) {
         continue;
       }
       resolvedBodyLines.push(line5);
@@ -12119,7 +12814,7 @@ function findBodyStart(lines) {
       if (inTagGroup) inTagGroup = false;
       continue;
     }
-    if (GROUP_HEADING_RE3.test(trimmed)) {
+    if (GROUP_HEADING_RE4.test(trimmed)) {
       inTagGroup = true;
       continue;
     }
@@ -12131,7 +12826,7 @@ function findBodyStart(lines) {
     }
     if (HEADER_RE.test(trimmed)) continue;
     if (TAGS_RE.test(trimmed)) continue;
-    if (OPTION_RE2.test(trimmed) && !lines[i].match(/^\s/) && !trimmed.includes("|")) {
+    if (OPTION_RE3.test(trimmed) && !lines[i].match(/^\s/) && !trimmed.includes("|")) {
       const key = trimmed.split(":")[0].trim().toLowerCase();
       if (key !== "chart" && key !== "title") {
         continue;
@@ -12146,7 +12841,7 @@ function isTagGroupEntry(line5, allLines, index) {
   for (let i = index - 1; i >= 0; i--) {
     const prev = allLines[i].trim();
     if (prev === "" || prev.startsWith("//")) continue;
-    if (GROUP_HEADING_RE3.test(prev)) return true;
+    if (GROUP_HEADING_RE4.test(prev)) return true;
     if (allLines[i].match(/^\s+/)) continue;
     return false;
   }
@@ -12175,7 +12870,7 @@ init_layout4();
 init_flowchart_renderer();
 init_echarts();
 init_d3();
-init_renderer4();
+init_renderer5();
 init_colors();
 init_palettes();
 
@@ -12248,6 +12943,8 @@ init_branding();
   collapseOrgTree,
   colorNames,
   computeActivations,
+  computeCardArchive,
+  computeCardMove,
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
@@ -12265,6 +12962,7 @@ init_branding();
   hslToHex,
   inferParticipantType,
   injectBranding,
+  isArchiveColumn,
   isSequenceBlock,
   isSequenceNote,
   isValidHex,
@@ -12290,6 +12988,7 @@ init_branding();
   parseEChart,
   parseERDiagram,
   parseFlowchart,
+  parseKanban,
   parseOrg,
   parseQuadrant,
   parseSequenceDgmo,
@@ -12305,6 +13004,8 @@ init_branding();
   renderERDiagramForExport,
   renderFlowchart,
   renderFlowchartForExport,
+  renderKanban,
+  renderKanbanForExport,
   renderOrg,
   renderOrgForExport,
   renderQuadrant,