@diagrammo/dgmo 0.4.3 → 0.5.0

package/dist/index.js

@@ -1357,6 +1357,94 @@ var init_parsing = __esm({
   }
 });
 
+// src/utils/tag-groups.ts
+function isTagBlockHeading(trimmed) {
+  return TAG_BLOCK_RE.test(trimmed) || GROUP_HEADING_RE.test(trimmed);
+}
+function resolveTagColor(metadata, tagGroups, activeGroupName, isContainer) {
+  if (!activeGroupName) return void 0;
+  const group = tagGroups.find(
+    (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
+  );
+  if (!group) return void 0;
+  const metaValue = metadata[group.name.toLowerCase()] ?? (isContainer ? void 0 : group.defaultValue);
+  if (!metaValue) return "#999999";
+  return group.entries.find(
+    (e) => e.value.toLowerCase() === metaValue.toLowerCase()
+  )?.color ?? "#999999";
+}
+function validateTagValues(entities, tagGroups, pushWarning, suggestFn) {
+  if (tagGroups.length === 0) return;
+  const groupMap = /* @__PURE__ */ new Map();
+  for (const g of tagGroups) groupMap.set(g.name.toLowerCase(), g);
+  for (const entity of entities) {
+    for (const [key, value] of Object.entries(entity.metadata)) {
+      const group = groupMap.get(key);
+      if (!group) continue;
+      const match = group.entries.some(
+        (e) => e.value.toLowerCase() === value.toLowerCase()
+      );
+      if (!match) {
+        const defined = group.entries.map((e) => e.value);
+        let msg = `Unknown value '${value}' for tag group '${group.name}'`;
+        const hint = suggestFn?.(value, defined);
+        if (hint) {
+          msg += `. ${hint}`;
+        } else {
+          msg += ` \u2014 defined values: ${defined.join(", ")}`;
+        }
+        pushWarning(entity.lineNumber, msg);
+      }
+    }
+  }
+}
+function injectDefaultTagMetadata(entities, tagGroups, skip) {
+  const defaults = [];
+  for (const group of tagGroups) {
+    if (group.defaultValue) {
+      defaults.push({ key: group.name.toLowerCase(), value: group.defaultValue });
+    }
+  }
+  if (defaults.length === 0) return;
+  for (const entity of entities) {
+    if (skip?.(entity)) continue;
+    for (const { key, value } of defaults) {
+      if (!(key in entity.metadata)) {
+        entity.metadata[key] = value;
+      }
+    }
+  }
+}
+function matchTagBlockHeading(trimmed) {
+  const tagMatch = trimmed.match(TAG_BLOCK_RE);
+  if (tagMatch) {
+    return {
+      name: tagMatch[1].trim(),
+      alias: tagMatch[2] || void 0,
+      colorHint: tagMatch[3] || void 0,
+      deprecated: false
+    };
+  }
+  const groupMatch = trimmed.match(GROUP_HEADING_RE);
+  if (groupMatch) {
+    return {
+      name: groupMatch[1].trim(),
+      alias: groupMatch[2] || void 0,
+      colorHint: groupMatch[3] || void 0,
+      deprecated: true
+    };
+  }
+  return null;
+}
+var TAG_BLOCK_RE, GROUP_HEADING_RE;
+var init_tag_groups = __esm({
+  "src/utils/tag-groups.ts"() {
+    "use strict";
+    TAG_BLOCK_RE = /^tag:\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/i;
+    GROUP_HEADING_RE = /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
+  }
+});
+
 // src/sequence/participant-inference.ts
 function inferParticipantType(name) {
   for (const rule of PARTICIPANT_RULES) {
@@ -1686,94 +1774,6 @@ var init_arrows = __esm({
   }
 });
 
-// src/utils/tag-groups.ts
-function isTagBlockHeading(trimmed) {
-  return TAG_BLOCK_RE.test(trimmed) || GROUP_HEADING_RE.test(trimmed);
-}
-function resolveTagColor(metadata, tagGroups, activeGroupName, isContainer) {
-  if (!activeGroupName) return void 0;
-  const group = tagGroups.find(
-    (g) => g.name.toLowerCase() === activeGroupName.toLowerCase()
-  );
-  if (!group) return void 0;
-  const metaValue = metadata[group.name.toLowerCase()] ?? (isContainer ? void 0 : group.defaultValue);
-  if (!metaValue) return "#999999";
-  return group.entries.find(
-    (e) => e.value.toLowerCase() === metaValue.toLowerCase()
-  )?.color ?? "#999999";
-}
-function validateTagValues(entities, tagGroups, pushWarning, suggestFn) {
-  if (tagGroups.length === 0) return;
-  const groupMap = /* @__PURE__ */ new Map();
-  for (const g of tagGroups) groupMap.set(g.name.toLowerCase(), g);
-  for (const entity of entities) {
-    for (const [key, value] of Object.entries(entity.metadata)) {
-      const group = groupMap.get(key);
-      if (!group) continue;
-      const match = group.entries.some(
-        (e) => e.value.toLowerCase() === value.toLowerCase()
-      );
-      if (!match) {
-        const defined = group.entries.map((e) => e.value);
-        let msg = `Unknown value '${value}' for tag group '${group.name}'`;
-        const hint = suggestFn?.(value, defined);
-        if (hint) {
-          msg += `. ${hint}`;
-        } else {
-          msg += ` \u2014 defined values: ${defined.join(", ")}`;
-        }
-        pushWarning(entity.lineNumber, msg);
-      }
-    }
-  }
-}
-function injectDefaultTagMetadata(entities, tagGroups, skip) {
-  const defaults = [];
-  for (const group of tagGroups) {
-    if (group.defaultValue) {
-      defaults.push({ key: group.name.toLowerCase(), value: group.defaultValue });
-    }
-  }
-  if (defaults.length === 0) return;
-  for (const entity of entities) {
-    if (skip?.(entity)) continue;
-    for (const { key, value } of defaults) {
-      if (!(key in entity.metadata)) {
-        entity.metadata[key] = value;
-      }
-    }
-  }
-}
-function matchTagBlockHeading(trimmed) {
-  const tagMatch = trimmed.match(TAG_BLOCK_RE);
-  if (tagMatch) {
-    return {
-      name: tagMatch[1].trim(),
-      alias: tagMatch[2] || void 0,
-      colorHint: tagMatch[3] || void 0,
-      deprecated: false
-    };
-  }
-  const groupMatch = trimmed.match(GROUP_HEADING_RE);
-  if (groupMatch) {
-    return {
-      name: groupMatch[1].trim(),
-      alias: groupMatch[2] || void 0,
-      colorHint: groupMatch[3] || void 0,
-      deprecated: true
-    };
-  }
-  return null;
-}
-var TAG_BLOCK_RE, GROUP_HEADING_RE;
-var init_tag_groups = __esm({
-  "src/utils/tag-groups.ts"() {
-    "use strict";
-    TAG_BLOCK_RE = /^tag:\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/i;
-    GROUP_HEADING_RE = /^##\s+(.+?)(?:\s+alias\s+(\w+))?(?:\s*\(([^)]+)\))?\s*$/;
-  }
-});
-
 // src/sequence/parser.ts
 var parser_exports = {};
 __export(parser_exports, {
@@ -3361,6 +3361,7 @@ function parseERDiagram(content, palette) {
     options: {},
     tables: [],
     relationships: [],
+    tagGroups: [],
     diagnostics: [],
     error: null
   };
@@ -3378,6 +3379,8 @@ function parseERDiagram(content, palette) {
   const tableMap = /* @__PURE__ */ new Map();
   let currentTable = null;
   let contentStarted = false;
+  let currentTagGroup = null;
+  const aliasMap = /* @__PURE__ */ new Map();
   function getOrCreateTable(name, lineNumber) {
     const id = tableId(name);
     const existing = tableMap.get(id);
@@ -3386,6 +3389,7 @@ function parseERDiagram(content, palette) {
       id,
       name,
       columns: [],
+      metadata: {},
       lineNumber
     };
     tableMap.set(id, table);
@@ -3402,6 +3406,50 @@ function parseERDiagram(content, palette) {
       continue;
     }
     if (trimmed.startsWith("//")) continue;
+    if (!contentStarted && indent === 0) {
+      const tagBlockMatch = matchTagBlockHeading(trimmed);
+      if (tagBlockMatch) {
+        if (tagBlockMatch.deprecated) {
+          result.diagnostics.push(makeDgmoError(
+            lineNumber,
+            `'## ${tagBlockMatch.name}' is deprecated for tag groups \u2014 use 'tag: ${tagBlockMatch.name}' instead`,
+            "warning"
+          ));
+        }
+        currentTagGroup = {
+          name: tagBlockMatch.name,
+          alias: tagBlockMatch.alias,
+          entries: [],
+          lineNumber
+        };
+        if (tagBlockMatch.alias) {
+          aliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
+        }
+        result.tagGroups.push(currentTagGroup);
+        continue;
+      }
+    }
+    if (currentTagGroup && !contentStarted && indent > 0) {
+      const isDefault = /\bdefault\s*$/.test(trimmed);
+      const entryText = isDefault ? trimmed.replace(/\s+default\s*$/, "").trim() : trimmed;
+      const { label, color } = extractColor(entryText, palette);
+      if (!color) {
+        result.diagnostics.push(makeDgmoError(
+          lineNumber,
+          `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`,
+          "warning"
+        ));
+        continue;
+      }
+      if (isDefault) {
+        currentTagGroup.defaultValue = label;
+      }
+      currentTagGroup.entries.push({ value: label, color, lineNumber });
+      continue;
+    }
+    if (currentTagGroup && indent === 0) {
+      currentTagGroup = null;
+    }
     if (!contentStarted && indent === 0 && /^[a-z][a-z0-9-]*\s*:/i.test(trimmed)) {
       const colonIdx = trimmed.indexOf(":");
       const key = trimmed.substring(0, colonIdx).trim().toLowerCase();
@@ -3483,6 +3531,11 @@ function parseERDiagram(content, palette) {
       const table = getOrCreateTable(name, lineNumber);
       if (color) table.color = color;
       table.lineNumber = lineNumber;
+      const pipeStr = tableDecl[3]?.trim();
+      if (pipeStr) {
+        const meta = parsePipeMetadata(["", pipeStr], aliasMap);
+        Object.assign(table.metadata, meta);
+      }
       currentTable = table;
       continue;
     }
@@ -3492,6 +3545,27 @@ function parseERDiagram(content, palette) {
     result.diagnostics.push(diag);
     result.error = formatDgmoError(diag);
   }
+  if (result.tagGroups.length > 0) {
+    const tagEntities = result.tables.map((t) => ({
+      metadata: t.metadata,
+      lineNumber: t.lineNumber
+    }));
+    validateTagValues(
+      tagEntities,
+      result.tagGroups,
+      (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning")),
+      suggest
+    );
+    for (const group of result.tagGroups) {
+      if (!group.defaultValue) continue;
+      const key = group.name.toLowerCase();
+      for (const table of result.tables) {
+        if (!table.metadata[key]) {
+          table.metadata[key] = group.defaultValue;
+        }
+      }
+    }
+  }
   if (result.tables.length >= 2 && result.relationships.length >= 1 && !result.error) {
     const connectedIds = /* @__PURE__ */ new Set();
     for (const rel of result.relationships) {
@@ -3543,7 +3617,8 @@ var init_parser3 = __esm({
     init_colors();
     init_diagnostics();
     init_parsing();
-    TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s+\(([^)]+)\))?\s*$/;
+    init_tag_groups();
+    TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
     COLUMN_RE = /^(\w+)(?:\s*:\s*(\w[\w()]*(?:\s*\[\])?))?(?:\s+\[([^\]]+)\])?\s*$/;
     INDENT_REL_RE = /^([1*?])-(?:(.+)-)?([1*?])\s+([a-zA-Z_]\w*)\s*$/;
     CONSTRAINT_MAP = {
@@ -3581,7 +3656,10 @@ function parseChart(content, palette) {
     const trimmed = lines[i].trim();
     const lineNumber = i + 1;
     if (!trimmed) continue;
-    if (/^#{2,}\s+/.test(trimmed)) continue;
+    if (/^#{2,}\s+/.test(trimmed)) {
+      result.diagnostics.push(makeDgmoError(lineNumber, `'${trimmed}' \u2014 ## syntax is no longer supported. Use [Group] containers instead`));
+      continue;
+    }
     if (trimmed.startsWith("//")) continue;
     const colonIndex = trimmed.indexOf(":");
     if (colonIndex === -1) continue;
@@ -3729,9 +3807,16 @@ function parseEChart(content, palette) {
     const trimmed = lines[i].trim();
     const lineNumber = i + 1;
     if (!trimmed) continue;
-    const mdCategoryMatch = trimmed.match(/^#{2,}\s+(.+)$/);
-    if (mdCategoryMatch) {
-      const { label: catName, color: catColor } = extractColor(mdCategoryMatch[1].trim(), palette);
+    if (/^#{2,}\s+/.test(trimmed)) {
+      const name = trimmed.replace(/^#{2,}\s+/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
+      result.diagnostics.push(makeDgmoError(lineNumber, `'## ${name}' is no longer supported. Use '[${name}]' instead`));
+      continue;
+    }
+    if (trimmed.startsWith("//")) continue;
+    const categoryMatch = trimmed.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    if (categoryMatch) {
+      const catName = categoryMatch[1].trim();
+      const catColor = categoryMatch[2] ? resolveColor(categoryMatch[2].trim(), palette) : null;
       if (catColor) {
         if (!result.categoryColors) result.categoryColors = {};
         result.categoryColors[catName] = catColor;
@@ -3739,12 +3824,6 @@ function parseEChart(content, palette) {
       currentCategory = catName;
       continue;
     }
-    if (trimmed.startsWith("//")) continue;
-    const categoryMatch = trimmed.match(/^\[(.+)\]$/);
-    if (categoryMatch) {
-      currentCategory = categoryMatch[1].trim();
-      continue;
-    }
     const colonIndex = trimmed.indexOf(":");
     if (result.type === "sankey" && colonIndex === -1) {
       const indent = measureIndent(lines[i]);
@@ -5375,6 +5454,7 @@ function parseKanban(content, palette) {
   let currentTagGroup = null;
   let currentColumn = null;
   let currentCard = null;
+  let cardBaseIndent = 0;
   let columnCounter = 0;
   let cardCounter = 0;
   const aliasMap = /* @__PURE__ */ new Map();
@@ -5474,7 +5554,14 @@ function parseKanban(content, palette) {
       }
       currentTagGroup = null;
     }
-    const columnMatch = trimmed.match(COLUMN_RE2);
+    const indent = measureIndent(line10);
+    if (LEGACY_COLUMN_RE.test(trimmed)) {
+      const legacyMatch = trimmed.match(LEGACY_COLUMN_RE);
+      const name = legacyMatch[1].replace(/\s*\(.*\)\s*$/, "").trim();
+      warn(lineNumber, `'== ${name} ==' is no longer supported. Use '[${name}]' instead`);
+      continue;
+    }
+    const columnMatch = indent === 0 ? trimmed.match(COLUMN_RE2) : null;
     if (columnMatch) {
       contentStarted = true;
       currentTagGroup = null;
@@ -5486,16 +5573,20 @@ function parseKanban(content, palette) {
       }
       currentCard = null;
       columnCounter++;
-      const rawColName = columnMatch[1].trim();
-      const wipStr = columnMatch[2];
-      const { label: colName, color: colColor } = extractColor(
-        rawColName,
-        palette
-      );
+      const colName = columnMatch[1].trim();
+      const colColor = columnMatch[2] ? resolveColor(columnMatch[2].trim(), palette) : void 0;
+      let wipLimit;
+      const pipeStr = columnMatch[3];
+      if (pipeStr) {
+        const wipMatch = pipeStr.match(/\bwip\s*:\s*(\d+)\b/i);
+        if (wipMatch) {
+          wipLimit = parseInt(wipMatch[1], 10);
+        }
+      }
       currentColumn = {
         id: `col-${columnCounter}`,
         name: colName,
-        wipLimit: wipStr ? parseInt(wipStr, 10) : void 0,
+        wipLimit,
         color: colColor,
         cards: [],
         lineNumber
@@ -5510,24 +5601,25 @@ function parseKanban(content, palette) {
       warn(lineNumber, "Card line found before any column");
       continue;
     }
-    const indent = measureIndent(line10);
-    if (indent > 0 && currentCard) {
+    if (currentCard && indent > cardBaseIndent) {
       currentCard.details.push(trimmed);
       currentCard.endLineNumber = lineNumber;
       continue;
     }
-    if (currentCard) {
+    if (indent > 0) {
+      cardCounter++;
+      const card = parseCardLine(
+        trimmed,
+        lineNumber,
+        cardCounter,
+        aliasMap,
+        palette
+      );
+      cardBaseIndent = indent;
+      currentCard = card;
+      currentColumn.cards.push(card);
+      continue;
     }
-    cardCounter++;
-    const card = parseCardLine(
-      trimmed,
-      lineNumber,
-      cardCounter,
-      aliasMap,
-      palette
-    );
-    currentCard = card;
-    currentColumn.cards.push(card);
   }
   if (currentCard) {
   }
@@ -5561,7 +5653,7 @@ function parseKanban(content, palette) {
     }
   }
   if (result.columns.length === 0 && !result.error) {
-    return fail(1, "No columns found. Use == Column Name == to define columns");
+    return fail(1, "No columns found. Use [Column Name] to define columns");
   }
   return result;
 }
@@ -5598,14 +5690,16 @@ function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette) {
     color
   };
 }
-var COLUMN_RE2;
+var COLUMN_RE2, LEGACY_COLUMN_RE;
 var init_parser5 = __esm({
   "src/kanban/parser.ts"() {
     "use strict";
     init_diagnostics();
+    init_colors();
     init_tag_groups();
     init_parsing();
-    COLUMN_RE2 = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
+    COLUMN_RE2 = /^\[(.+?)\](?:\s*\(([^)]+)\))?\s*(?:\|\s*(.+))?$/;
+    LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
   }
 });
 
@@ -7190,7 +7284,7 @@ var init_parser9 = __esm({
     TAG_GROUP_RE = /^tag\s*:\s*(\w[\w\s]*?)(?:\s+alias\s+(\w+))?\s*$/;
     TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?(\s+default)?\s*$/;
     COMPONENT_RE = /^([a-zA-Z_][\w]*)(.*)$/;
-    PIPE_META_RE = /\|\s*(\w+)\s*:\s*([^|]+)/g;
+    PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
     PROPERTY_RE = /^([\w-]+)\s*:\s*(.+)$/;
     PERCENT_RE = /^([\d.]+)%$/;
     RANGE_RE = /^(\d+)-(\d+)$/;
@@ -9556,7 +9650,7 @@ function computeCardArchive(content, parsed, cardId) {
     const trimmedEnd = withoutCard.length > 0 && withoutCard[withoutCard.length - 1].trim() === "" ? withoutCard : [...withoutCard, ""];
     return [
       ...trimmedEnd,
-      "== Archive ==",
+      "[Archive]",
       ...cardLines
     ].join("\n");
   }
@@ -10437,7 +10531,7 @@ function drawCardinality(g, point, prevPoint, cardinality, color, useLabels) {
     g.append("line").attr("x1", bx + px * spread).attr("y1", by + py * spread).attr("x2", bx - px * spread).attr("y2", by - py * spread).attr("stroke", color).attr("stroke-width", sw);
   }
 }
-function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims) {
+function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem, exportDims, activeTagGroup) {
   d3Selection5.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -10507,8 +10601,16 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   for (let ni = 0; ni < layout.nodes.length; ni++) {
     const node = layout.nodes[ni];
-    const nodeColor2 = node.color ?? seriesColors2[ni % seriesColors2.length];
+    const tagColor = resolveTagColor(node.metadata, parsed.tagGroups, activeTagGroup ?? null);
+    const nodeColor2 = node.color ?? tagColor ?? seriesColors2[ni % seriesColors2.length];
     const nodeG = contentG.append("g").attr("transform", `translate(${node.x}, ${node.y})`).attr("class", "er-table").attr("data-line-number", String(node.lineNumber)).attr("data-node-id", node.id);
+    if (activeTagGroup) {
+      const tagKey = activeTagGroup.toLowerCase();
+      const tagValue = node.metadata[tagKey];
+      if (tagValue) {
+        nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
+      }
+    }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", () => {
         onClickItem(node.lineNumber);
@@ -10540,6 +10642,35 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
       }
     }
   }
+  if (parsed.tagGroups.length > 0) {
+    const LEGEND_Y_PAD = 16;
+    const LEGEND_PILL_H = 22;
+    const LEGEND_PILL_RX = 11;
+    const LEGEND_PILL_PAD9 = 10;
+    const LEGEND_GAP2 = 8;
+    const LEGEND_FONT_SIZE2 = 11;
+    const LEGEND_GROUP_GAP7 = 16;
+    const legendG = svg.append("g").attr("class", "er-tag-legend");
+    let legendX = DIAGRAM_PADDING5;
+    let legendY = height - DIAGRAM_PADDING5;
+    for (const group of parsed.tagGroups) {
+      const groupG = legendG.append("g").attr("data-legend-group", group.name.toLowerCase());
+      const labelText = groupG.append("text").attr("x", legendX).attr("y", legendY + LEGEND_PILL_H / 2).attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-size", LEGEND_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(`${group.name}:`);
+      const labelWidth = (labelText.node()?.getComputedTextLength?.() ?? group.name.length * 7) + 6;
+      legendX += labelWidth;
+      for (const entry of group.entries) {
+        const pillG = groupG.append("g").attr("data-legend-entry", entry.value.toLowerCase()).style("cursor", "pointer");
+        const tmpText = legendG.append("text").attr("font-size", LEGEND_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(entry.value);
+        const textW = tmpText.node()?.getComputedTextLength?.() ?? entry.value.length * 7;
+        tmpText.remove();
+        const pillW = textW + LEGEND_PILL_PAD9 * 2;
+        pillG.append("rect").attr("x", legendX).attr("y", legendY).attr("width", pillW).attr("height", LEGEND_PILL_H).attr("rx", LEGEND_PILL_RX).attr("ry", LEGEND_PILL_RX).attr("fill", mix(entry.color, isDark ? palette.surface : palette.bg, 25)).attr("stroke", entry.color).attr("stroke-width", 1);
+        pillG.append("text").attr("x", legendX + pillW / 2).attr("y", legendY + LEGEND_PILL_H / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", LEGEND_FONT_SIZE2).attr("font-family", FONT_FAMILY).text(entry.value);
+        legendX += pillW + LEGEND_GAP2;
+      }
+      legendX += LEGEND_GROUP_GAP7;
+    }
+  }
 }
 function renderERDiagramForExport(content, theme, palette) {
   const parsed = parseERDiagram(content, palette);
@@ -10583,6 +10714,7 @@ var init_renderer5 = __esm({
     init_fonts();
     init_color_utils();
     init_palettes();
+    init_tag_groups();
     init_parser3();
     init_layout4();
     DIAGRAM_PADDING5 = 20;
@@ -15015,7 +15147,7 @@ function formatUptime(fraction) {
   if (pct >= 99) return `${pct.toFixed(1)}%`;
   return `${pct.toFixed(1)}%`;
 }
-function layoutInfra(computed, selectedNodeId) {
+function layoutInfra(computed, selectedNodeId, collapsedNodes) {
   if (computed.nodes.length === 0) {
     return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
   }
@@ -15036,9 +15168,10 @@ function layoutInfra(computed, selectedNodeId) {
   const widthMap = /* @__PURE__ */ new Map();
   const heightMap = /* @__PURE__ */ new Map();
   for (const node of computed.nodes) {
-    const expanded = node.id === selectedNodeId;
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    const expanded = !isNodeCollapsed && node.id === selectedNodeId;
     const width = computeNodeWidth2(node, expanded, computed.options);
-    const height = computeNodeHeight2(node, expanded, computed.options);
+    const height = isNodeCollapsed ? NODE_HEADER_HEIGHT + NODE_PAD_BOTTOM : computeNodeHeight2(node, expanded, computed.options);
     widthMap.set(node.id, width);
     heightMap.set(node.id, height);
     const inGroup = groupedNodeIds.has(node.id);
@@ -15612,10 +15745,27 @@ function renderEdgeLabels(svg, edges, palette, isDark, animate) {
     }
   }
 }
-function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activeGroup, diagramOptions) {
+function resolveActiveTagStroke(node, activeGroup, tagGroups, palette) {
+  const tg = tagGroups.find((t) => t.name.toLowerCase() === activeGroup.toLowerCase());
+  if (!tg) return null;
+  const tagKey = (tg.alias ?? tg.name).toLowerCase();
+  const tagVal = node.tags[tagKey];
+  if (!tagVal) return null;
+  const tv = tg.values.find((v) => v.name.toLowerCase() === tagVal.toLowerCase());
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activeGroup, diagramOptions, collapsedNodes, tagGroups) {
   const mutedColor = palette.textMuted;
   for (const node of nodes) {
-    const { fill: fill2, stroke: stroke2, textFill } = nodeColor(node, palette, isDark);
+    let { fill: fill2, stroke: stroke2, textFill } = nodeColor(node, palette, isDark);
+    if (activeGroup && tagGroups && !node.isEdge) {
+      const tagStroke = resolveActiveTagStroke(node, activeGroup, tagGroups, palette);
+      if (tagStroke) {
+        stroke2 = tagStroke;
+        fill2 = mix(palette.bg, tagStroke, isDark ? 88 : 94);
+      }
+    }
     let cls = "infra-node";
     if (animate && node.isEdge) {
       cls += " infra-node-edge-throb";
@@ -15625,9 +15775,9 @@ function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activ
       else if (severity === "overloaded") cls += " infra-node-overload";
       else if (severity === "warning") cls += " infra-node-warning";
     }
-    const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id);
+    const g = svg.append("g").attr("class", cls).attr("data-line-number", node.lineNumber).attr("data-infra-node", node.id).attr("data-node-collapse", node.id).style("cursor", "pointer");
     if (node.id.startsWith("[")) {
-      g.attr("data-node-toggle", node.id).style("cursor", "pointer");
+      g.attr("data-node-toggle", node.id);
     }
     for (const [tagKey, tagVal] of Object.entries(node.tags)) {
       g.attr(`data-tag-${tagKey.toLowerCase()}`, tagVal.toLowerCase());
@@ -15645,7 +15795,12 @@ function renderNodes(svg, nodes, palette, isDark, animate, selectedNodeId, activ
     g.append("rect").attr("x", x).attr("y", y).attr("width", node.width).attr("height", node.height).attr("rx", NODE_BORDER_RADIUS).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", strokeWidth);
     const headerCenterY = y + NODE_HEADER_HEIGHT2 / 2 + NODE_FONT_SIZE3 * 0.35;
     g.append("text").attr("x", node.x).attr("y", headerCenterY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", NODE_FONT_SIZE3).attr("font-weight", "600").attr("fill", textFill).text(node.label);
-    {
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    if (isNodeCollapsed) {
+      const chevronY = y + node.height - 6;
+      g.append("text").attr("x", node.x).attr("y", chevronY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", 8).attr("fill", textFill).attr("opacity", 0.5).text("\u25BC");
+    }
+    if (!isNodeCollapsed) {
       const expanded = node.id === selectedNodeId;
       const displayProps = !node.isEdge && expanded ? getDisplayProps(node, expanded, diagramOptions) : [];
       const computedRows = getComputedRows(node, expanded);
@@ -15968,7 +16123,7 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
     cursorX += fullW + LEGEND_GROUP_GAP5;
   }
 }
-function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, selectedNodeId, exportMode) {
+function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, selectedNodeId, exportMode, collapsedNodes) {
   d3Selection9.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const legendGroups = computeInfraLegendGroups(layout.nodes, tagGroups ?? [], palette);
   const hasLegend = legendGroups.length > 0 || !!playback;
@@ -16027,7 +16182,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   }
   renderGroups(svg, layout.groups, palette, isDark);
   renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
-  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options);
+  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options, collapsedNodes, tagGroups ?? []);
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }
@@ -17966,6 +18121,7 @@ function parseD3(content, palette) {
     timelineGroups: [],
     timelineEras: [],
     timelineMarkers: [],
+    timelineTagGroups: [],
     timelineSort: "time",
     timelineScale: true,
     timelineSwimlanes: false,
@@ -18000,25 +18156,75 @@ function parseD3(content, palette) {
   const freeformLines = [];
   let currentArcGroup = null;
   let currentTimelineGroup = null;
+  let currentTimelineTagGroup = null;
+  const timelineAliasMap = /* @__PURE__ */ new Map();
   for (let i = 0; i < lines.length; i++) {
-    const line10 = lines[i].trim();
+    const rawLine = lines[i];
+    const line10 = rawLine.trim();
+    const indent = rawLine.length - rawLine.trimStart().length;
     const lineNumber = i + 1;
     if (!line10) continue;
-    const sectionMatch = line10.match(/^#{2,}\s+(.+?)(?:\s*\(([^)]+)\))?\s*$/);
-    if (sectionMatch) {
+    if (result.type === "timeline" && indent === 0) {
+      const tagBlockMatch = matchTagBlockHeading(line10);
+      if (tagBlockMatch) {
+        if (tagBlockMatch.deprecated) {
+          result.diagnostics.push(makeDgmoError(
+            lineNumber,
+            `'## ${tagBlockMatch.name}' is deprecated for tag groups \u2014 use 'tag: ${tagBlockMatch.name}' instead`,
+            "warning"
+          ));
+        }
+        currentTimelineTagGroup = {
+          name: tagBlockMatch.name,
+          alias: tagBlockMatch.alias,
+          entries: [],
+          lineNumber
+        };
+        if (tagBlockMatch.alias) {
+          timelineAliasMap.set(tagBlockMatch.alias.toLowerCase(), tagBlockMatch.name.toLowerCase());
+        }
+        result.timelineTagGroups.push(currentTimelineTagGroup);
+        continue;
+      }
+    }
+    if (currentTimelineTagGroup && indent > 0) {
+      const trimmedEntry = line10;
+      const isDefault = /\bdefault\s*$/.test(trimmedEntry);
+      const entryText = isDefault ? trimmedEntry.replace(/\s+default\s*$/, "").trim() : trimmedEntry;
+      const { label, color } = extractColor(entryText, palette);
+      if (color) {
+        if (isDefault) currentTimelineTagGroup.defaultValue = label;
+        currentTimelineTagGroup.entries.push({ value: label, color, lineNumber });
+        continue;
+      }
+    }
+    if (currentTimelineTagGroup && indent === 0) {
+      currentTimelineTagGroup = null;
+    }
+    const groupMatch = line10.match(/^\[(.+?)\](?:\s*\(([^)]+)\))?\s*$/);
+    if (groupMatch) {
       if (result.type === "arc") {
-        const name = sectionMatch[1].trim();
-        const color = sectionMatch[2] ? resolveColor(sectionMatch[2].trim(), palette) : null;
+        const name = groupMatch[1].trim();
+        const color = groupMatch[2] ? resolveColor(groupMatch[2].trim(), palette) : null;
         result.arcNodeGroups.push({ name, nodes: [], color, lineNumber });
         currentArcGroup = name;
       } else if (result.type === "timeline") {
-        const name = sectionMatch[1].trim();
-        const color = sectionMatch[2] ? resolveColor(sectionMatch[2].trim(), palette) : null;
+        const name = groupMatch[1].trim();
+        const color = groupMatch[2] ? resolveColor(groupMatch[2].trim(), palette) : null;
         result.timelineGroups.push({ name, color, lineNumber });
         currentTimelineGroup = name;
       }
       continue;
     }
+    if (/^#{2,}\s+/.test(line10) && (result.type === "arc" || result.type === "timeline")) {
+      const name = line10.replace(/^#{2,}\s+/, "").replace(/\s*\([^)]*\)\s*$/, "").trim();
+      result.diagnostics.push(makeDgmoError(lineNumber, `'## ${name}' is no longer supported. Use '[${name}]' instead`, "warning"));
+      continue;
+    }
+    if (indent === 0) {
+      currentArcGroup = null;
+      currentTimelineGroup = null;
+    }
     if (line10.startsWith("//")) {
       continue;
     }
@@ -18090,11 +18296,14 @@ function parseD3(content, palette) {
         const amount = parseFloat(durationMatch[2]);
         const unit = durationMatch[3];
         const endDate = addDurationToDate(startDate, amount, unit);
+        const segments = durationMatch[5].split("|");
+        const metadata = segments.length > 1 ? parsePipeMetadata(["", ...segments.slice(1)], timelineAliasMap) : {};
         result.timelineEvents.push({
           date: startDate,
           endDate,
-          label: durationMatch[5].trim(),
+          label: segments[0].trim(),
           group: currentTimelineGroup,
+          metadata,
           lineNumber,
           uncertain
         });
@@ -18104,11 +18313,14 @@ function parseD3(content, palette) {
         /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*->\s*(\d{4}(?:-\d{2})?(?:-\d{2})?)(\?)?\s*:\s*(.+)$/
       );
       if (rangeMatch) {
+        const segments = rangeMatch[4].split("|");
+        const metadata = segments.length > 1 ? parsePipeMetadata(["", ...segments.slice(1)], timelineAliasMap) : {};
         result.timelineEvents.push({
           date: rangeMatch[1],
           endDate: rangeMatch[2],
-          label: rangeMatch[4].trim(),
+          label: segments[0].trim(),
           group: currentTimelineGroup,
+          metadata,
           lineNumber,
           uncertain: rangeMatch[3] === "?"
         });
@@ -18118,11 +18330,14 @@ function parseD3(content, palette) {
         /^(\d{4}(?:-\d{2})?(?:-\d{2})?)\s*:\s*(.+)$/
       );
       if (pointMatch) {
+        const segments = pointMatch[2].split("|");
+        const metadata = segments.length > 1 ? parsePipeMetadata(["", ...segments.slice(1)], timelineAliasMap) : {};
         result.timelineEvents.push({
           date: pointMatch[1],
           endDate: null,
-          label: pointMatch[2].trim(),
+          label: segments[0].trim(),
           group: currentTimelineGroup,
+          metadata,
           lineNumber
         });
         continue;
@@ -18385,7 +18600,7 @@ function parseD3(content, palette) {
     }
     if (result.arcNodeGroups.length > 0) {
       if (result.arcOrder === "name" || result.arcOrder === "degree") {
-        warn(1, `Cannot use "order: ${result.arcOrder}" with ## section headers. Use "order: group" or remove section headers.`);
+        warn(1, `Cannot use "order: ${result.arcOrder}" with [Group] headers. Use "order: group" or remove group headers.`);
         result.arcOrder = "group";
       }
       if (result.arcOrder === "appearance") {
@@ -18398,6 +18613,23 @@ function parseD3(content, palette) {
     if (result.timelineEvents.length === 0) {
       warn(1, 'No events found. Add events as "YYYY: description" or "YYYY->YYYY: description"');
     }
+    if (result.timelineTagGroups.length > 0) {
+      validateTagValues(
+        result.timelineEvents,
+        result.timelineTagGroups,
+        (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning")),
+        suggest
+      );
+      for (const group of result.timelineTagGroups) {
+        if (!group.defaultValue) continue;
+        const key = group.name.toLowerCase();
+        for (const event of result.timelineEvents) {
+          if (!event.metadata[key]) {
+            event.metadata[key] = group.defaultValue;
+          }
+        }
+      }
+    }
     return result;
   }
   if (result.type === "venn") {
@@ -19156,7 +19388,7 @@ function buildEventTooltipHtml(ev) {
 function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
-function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims) {
+function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup) {
   d3Selection12.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
@@ -19184,6 +19416,10 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     groupColorMap.set(grp.name, grp.color ?? colors[i % colors.length]);
   });
   function eventColor(ev) {
+    if (activeTagGroup) {
+      const tagColor = resolveTagColor(ev.metadata, parsed.timelineTagGroups, activeTagGroup);
+      if (tagColor) return tagColor;
+    }
     if (ev.group && groupColorMap.has(ev.group)) {
       return groupColorMap.get(ev.group);
     }
@@ -19254,10 +19490,36 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   function fadeReset(g) {
     g.selectAll(
-      ".tl-event, .tl-legend-item, .tl-lane-header, .tl-marker"
+      ".tl-event, .tl-legend-item, .tl-lane-header, .tl-marker, .tl-tag-legend-entry"
     ).attr("opacity", 1);
     g.selectAll(".tl-era").attr("opacity", 1);
   }
+  function fadeToTagValue(g, tagKey, tagValue) {
+    const attrName = `data-tag-${tagKey}`;
+    g.selectAll(".tl-event").each(function() {
+      const el = d3Selection12.select(this);
+      const val = el.attr(attrName);
+      el.attr("opacity", val === tagValue ? 1 : FADE_OPACITY);
+    });
+    g.selectAll(".tl-legend-item, .tl-lane-header").attr(
+      "opacity",
+      FADE_OPACITY
+    );
+    g.selectAll(".tl-marker").attr("opacity", FADE_OPACITY);
+    g.selectAll(".tl-tag-legend-entry").each(function() {
+      const el = d3Selection12.select(this);
+      const entryValue = el.attr("data-legend-entry");
+      if (entryValue === "__group__") return;
+      const entryGroup = el.attr("data-tag-group");
+      el.attr("opacity", entryGroup === tagKey && entryValue === tagValue ? 1 : FADE_OPACITY);
+    });
+  }
+  function setTagAttrs(evG, ev) {
+    for (const [key, value] of Object.entries(ev.metadata)) {
+      evG.attr(`data-tag-${key}`, value.toLowerCase());
+    }
+  }
+  const tagLegendReserve = parsed.timelineTagGroups.length > 0 ? 36 : 0;
   if (isVertical) {
     if (timelineSort === "group" && timelineGroups.length > 0) {
       const groupNames = timelineGroups.map((gr) => gr.name);
@@ -19269,7 +19531,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 40 + scaleMargin,
         bottom: 40,
         left: 60 + scaleMargin
@@ -19345,6 +19607,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }).on("click", () => {
             if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
           });
+          setTagAttrs(evG, ev);
           if (ev.endDate) {
             const y2 = yScale(parseTimelineDate(ev.endDate));
             const rectH = Math.max(y2 - y, 4);
@@ -19371,7 +19634,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       const scaleMargin = timelineScale ? 40 : 0;
       const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
       const margin = {
-        top: 104 + markerMargin,
+        top: 104 + markerMargin + tagLegendReserve,
         right: 200,
         bottom: 40,
         left: 60 + scaleMargin
@@ -19451,6 +19714,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }).on("click", () => {
           if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
         });
+        setTagAttrs(evG, ev);
         if (ev.endDate) {
           const y2 = yScale(parseTimelineDate(ev.endDate));
           const rectH = Math.max(y2 - y, 4);
@@ -19503,7 +19767,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const dynamicLeftMargin = Math.max(120, maxGroupNameLen * 7 + 30);
     const baseTopMargin = title ? 50 : 20;
     const margin = {
-      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin,
+      top: baseTopMargin + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
       bottom: 40 + scaleMargin,
       left: dynamicLeftMargin
@@ -19606,6 +19870,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }).on("click", () => {
           if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
         });
+        setTagAttrs(evG, ev);
         if (ev.endDate) {
           const x2 = xScale(parseTimelineDate(ev.endDate));
           const rectW = Math.max(x2 - x, 4);
@@ -19647,7 +19912,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
     const margin = {
-      top: 104 + (timelineScale ? 40 : 0) + markerMargin,
+      top: 104 + (timelineScale ? 40 : 0) + markerMargin + tagLegendReserve,
       right: 40,
       bottom: 40 + scaleMargin,
       left: 60
@@ -19743,6 +20008,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       }).on("click", () => {
         if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
       });
+      setTagAttrs(evG, ev);
       if (ev.endDate) {
         const x2 = xScale(parseTimelineDate(ev.endDate));
         const rectW = Math.max(x2 - x, 4);
@@ -19778,6 +20044,124 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       }
     });
   }
+  if (parsed.timelineTagGroups.length > 0) {
+    const LG_HEIGHT = 28;
+    const LG_PILL_PAD = 16;
+    const LG_PILL_FONT_SIZE = 11;
+    const LG_PILL_FONT_W = LG_PILL_FONT_SIZE * 0.6;
+    const LG_CAPSULE_PAD = 4;
+    const LG_DOT_R = 4;
+    const LG_ENTRY_FONT_SIZE = 10;
+    const LG_ENTRY_FONT_W = LG_ENTRY_FONT_SIZE * 0.6;
+    const LG_ENTRY_DOT_GAP = 4;
+    const LG_ENTRY_TRAIL = 8;
+    const LG_GROUP_GAP = 12;
+    const mainSvg = d3Selection12.select(container).select("svg");
+    const mainG = mainSvg.select("g");
+    if (!mainSvg.empty() && !mainG.empty()) {
+      let drawLegend2 = function() {
+        mainSvg.selectAll(".tl-tag-legend-group").remove();
+        const totalW = legendGroups.reduce((s, lg) => {
+          const isActive = currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
+          return s + (isActive ? lg.expandedWidth : lg.minifiedWidth);
+        }, 0) + (legendGroups.length - 1) * LG_GROUP_GAP;
+        let cx = (width - totalW) / 2;
+        for (const lg of legendGroups) {
+          const isActive = currentActiveGroup != null && lg.group.name.toLowerCase() === currentActiveGroup.toLowerCase();
+          const pillLabel = lg.group.name;
+          const pillWidth = pillLabel.length * LG_PILL_FONT_W + LG_PILL_PAD;
+          const gEl = mainSvg.append("g").attr("transform", `translate(${cx}, ${legendY})`).attr("class", "tl-tag-legend-group tl-tag-legend-entry").attr("data-legend-group", lg.group.name.toLowerCase()).attr("data-tag-group", lg.group.name.toLowerCase()).attr("data-legend-entry", "__group__").style("cursor", "pointer").on("click", () => {
+            const groupKey = lg.group.name.toLowerCase();
+            currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
+            drawLegend2();
+            recolorEvents2();
+          });
+          if (isActive) {
+            gEl.append("rect").attr("width", lg.expandedWidth).attr("height", LG_HEIGHT).attr("rx", LG_HEIGHT / 2).attr("fill", groupBg);
+          }
+          const pillXOff = isActive ? LG_CAPSULE_PAD : 0;
+          const pillYOff = isActive ? LG_CAPSULE_PAD : 0;
+          const pillH = LG_HEIGHT - (isActive ? LG_CAPSULE_PAD * 2 : 0);
+          gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).attr("width", pillWidth).attr("height", pillH).attr("rx", pillH / 2).attr("fill", isActive ? palette.bg : groupBg);
+          if (isActive) {
+            gEl.append("rect").attr("x", pillXOff).attr("y", pillYOff).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);
+          }
+          gEl.append("text").attr("x", pillXOff + pillWidth / 2).attr("y", LG_HEIGHT / 2 + LG_PILL_FONT_SIZE / 2 - 2).attr("font-size", LG_PILL_FONT_SIZE).attr("font-weight", "500").attr("font-family", FONT_FAMILY).attr("fill", isActive ? palette.text : palette.textMuted).attr("text-anchor", "middle").text(pillLabel);
+          if (isActive) {
+            let entryX = pillXOff + pillWidth + 4;
+            for (const entry of lg.group.entries) {
+              const tagKey = lg.group.name.toLowerCase();
+              const tagVal = entry.value.toLowerCase();
+              const entryG = gEl.append("g").attr("class", "tl-tag-legend-entry").attr("data-tag-group", tagKey).attr("data-legend-entry", tagVal).style("cursor", "pointer").on("mouseenter", (event) => {
+                event.stopPropagation();
+                fadeToTagValue(mainG, tagKey, tagVal);
+                mainSvg.selectAll(".tl-tag-legend-entry").each(function() {
+                  const el = d3Selection12.select(this);
+                  const ev = el.attr("data-legend-entry");
+                  if (ev === "__group__") return;
+                  const eg = el.attr("data-tag-group");
+                  el.attr("opacity", eg === tagKey && ev === tagVal ? 1 : FADE_OPACITY);
+                });
+              }).on("mouseleave", (event) => {
+                event.stopPropagation();
+                fadeReset(mainG);
+                mainSvg.selectAll(".tl-tag-legend-entry").attr("opacity", 1);
+              }).on("click", (event) => {
+                event.stopPropagation();
+              });
+              entryG.append("circle").attr("cx", entryX + LG_DOT_R).attr("cy", LG_HEIGHT / 2).attr("r", LG_DOT_R).attr("fill", entry.color);
+              const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
+              entryG.append("text").attr("x", textX).attr("y", LG_HEIGHT / 2 + LG_ENTRY_FONT_SIZE / 2 - 1).attr("font-size", LG_ENTRY_FONT_SIZE).attr("font-family", FONT_FAMILY).attr("fill", palette.textMuted).text(entry.value);
+              entryX = textX + entry.value.length * LG_ENTRY_FONT_W + LG_ENTRY_TRAIL;
+            }
+          }
+          cx += (isActive ? lg.expandedWidth : lg.minifiedWidth) + LG_GROUP_GAP;
+        }
+      }, recolorEvents2 = function() {
+        mainG.selectAll(".tl-event").each(function() {
+          const el = d3Selection12.select(this);
+          const lineNum = el.attr("data-line-number");
+          const ev = lineNum ? eventByLine.get(lineNum) : void 0;
+          if (!ev) return;
+          let color;
+          if (currentActiveGroup) {
+            const tagColor = resolveTagColor(
+              ev.metadata,
+              parsed.timelineTagGroups,
+              currentActiveGroup
+            );
+            color = tagColor ?? (ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor);
+          } else {
+            color = ev.group && groupColorMap.has(ev.group) ? groupColorMap.get(ev.group) : textColor;
+          }
+          el.selectAll("rect").attr("fill", color);
+          el.selectAll("circle:not(.tl-event-point-outline)").attr("fill", color);
+        });
+      };
+      var drawLegend = drawLegend2, recolorEvents = recolorEvents2;
+      const legendY = title ? 50 : 10;
+      const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+      const legendGroups = parsed.timelineTagGroups.map((g) => {
+        const pillW = g.name.length * LG_PILL_FONT_W + LG_PILL_PAD;
+        let entryX = LG_CAPSULE_PAD + pillW + 4;
+        for (const entry of g.entries) {
+          const textX = entryX + LG_DOT_R * 2 + LG_ENTRY_DOT_GAP;
+          entryX = textX + entry.value.length * LG_ENTRY_FONT_W + LG_ENTRY_TRAIL;
+        }
+        return {
+          group: g,
+          minifiedWidth: pillW,
+          expandedWidth: entryX + LG_CAPSULE_PAD
+        };
+      });
+      let currentActiveGroup = activeTagGroup ?? null;
+      const eventByLine = /* @__PURE__ */ new Map();
+      for (const ev of timelineEvents) {
+        eventByLine.set(String(ev.lineNumber), ev);
+      }
+      drawLegend2();
+    }
+  }
 }
 function getRotateFn(mode) {
   if (mode === "mixed") return () => Math.random() > 0.5 ? 0 : 90;
@@ -20763,8 +21147,10 @@ var init_d3 = __esm({
     init_branding();
     init_colors();
     init_palettes();
+    init_color_utils();
     init_diagnostics();
     init_parsing();
+    init_tag_groups();
     DEFAULT_CLOUD_OPTIONS = {
       rotate: "none",
       max: 0,
@@ -21623,6 +22009,9 @@ function encodeDiagramUrl(dsl, options) {
   if (options?.viewState?.activeTagGroup) {
     hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
   }
+  if (options?.viewState?.collapsedGroups?.length) {
+    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(","))}`;
+  }
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 function decodeDiagramUrl(hash) {
@@ -21643,6 +22032,9 @@ function decodeDiagramUrl(hash) {
     if (key === "tag" && val) {
       viewState.activeTagGroup = val;
     }
+    if (key === "cg" && val) {
+      viewState.collapsedGroups = val.split(",").filter(Boolean);
+    }
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);