@diagrammo/dgmo 0.4.4 → 0.5.1

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*==$/;
   }
 });
 
@@ -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;
@@ -17989,6 +18121,7 @@ function parseD3(content, palette) {
     timelineGroups: [],
     timelineEras: [],
     timelineMarkers: [],
+    timelineTagGroups: [],
     timelineSort: "time",
     timelineScale: true,
     timelineSwimlanes: false,
@@ -18023,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;
     }
@@ -18113,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
         });
@@ -18127,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] === "?"
         });
@@ -18141,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;
@@ -18286,9 +18478,18 @@ function parseD3(content, palette) {
         continue;
       }
       if (key === "sort") {
-        const v = line10.substring(colonIndex + 1).trim().toLowerCase();
-        if (v === "time" || v === "group") {
-          result.timelineSort = v;
+        const v = line10.substring(colonIndex + 1).trim();
+        const vLower = v.toLowerCase();
+        if (vLower === "time" || vLower === "group") {
+          result.timelineSort = vLower;
+        } else if (vLower === "tag" || vLower.startsWith("tag:")) {
+          result.timelineSort = "tag";
+          if (vLower.startsWith("tag:")) {
+            const groupRef = v.substring(4).trim();
+            if (groupRef) {
+              result.timelineDefaultSwimlaneTG = groupRef;
+            }
+          }
         }
         continue;
       }
@@ -18408,7 +18609,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") {
@@ -18421,6 +18622,42 @@ 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;
+          }
+        }
+      }
+    }
+    if (result.timelineSort === "tag") {
+      if (result.timelineTagGroups.length === 0) {
+        warn(1, '"sort: tag" requires at least one tag group definition');
+        result.timelineSort = "time";
+      } else if (result.timelineDefaultSwimlaneTG) {
+        const ref = result.timelineDefaultSwimlaneTG.toLowerCase();
+        const match = result.timelineTagGroups.find(
+          (g) => g.name.toLowerCase() === ref || g.alias?.toLowerCase() === ref
+        );
+        if (match) {
+          result.timelineDefaultSwimlaneTG = match.name;
+        } else {
+          warn(1, `"sort: tag:${result.timelineDefaultSwimlaneTG}" \u2014 no tag group matches "${result.timelineDefaultSwimlaneTG}"`);
+          result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
+        }
+      } else {
+        result.timelineDefaultSwimlaneTG = result.timelineTagGroups[0].name;
+      }
+    }
     return result;
   }
   if (result.type === "venn") {
@@ -19179,7 +19416,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, swimlaneTagGroup, onTagStateChange) {
   d3Selection12.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
     timelineEvents,
@@ -19193,6 +19430,9 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
     orientation
   } = parsed;
   if (timelineEvents.length === 0) return;
+  if (swimlaneTagGroup == null && timelineSort === "tag" && parsed.timelineDefaultSwimlaneTG) {
+    swimlaneTagGroup = parsed.timelineDefaultSwimlaneTG;
+  }
   const tooltip = createTooltip(container, palette, isDark);
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
@@ -19206,7 +19446,49 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   timelineGroups.forEach((grp, i) => {
     groupColorMap.set(grp.name, grp.color ?? colors[i % colors.length]);
   });
+  let tagLanes = null;
+  if (swimlaneTagGroup) {
+    const tagKey = swimlaneTagGroup.toLowerCase();
+    const tagGroup = parsed.timelineTagGroups.find(
+      (g) => g.name.toLowerCase() === tagKey
+    );
+    if (tagGroup) {
+      const buckets = /* @__PURE__ */ new Map();
+      const otherEvents = [];
+      for (const ev of timelineEvents) {
+        const val = ev.metadata[tagKey];
+        if (val) {
+          const list = buckets.get(val) ?? [];
+          list.push(ev);
+          buckets.set(val, list);
+        } else {
+          otherEvents.push(ev);
+        }
+      }
+      const laneEntries = [...buckets.entries()].sort((a, b) => {
+        const aMin = Math.min(
+          ...a[1].map((e) => parseTimelineDate(e.date))
+        );
+        const bMin = Math.min(
+          ...b[1].map((e) => parseTimelineDate(e.date))
+        );
+        return aMin - bMin;
+      });
+      tagLanes = laneEntries.map(([name, events]) => ({ name, events }));
+      if (otherEvents.length > 0) {
+        tagLanes.push({ name: "(Other)", events: otherEvents });
+      }
+      for (const entry of tagGroup.entries) {
+        groupColorMap.set(entry.value, entry.color);
+      }
+    }
+  }
+  const effectiveColorTG = activeTagGroup ?? swimlaneTagGroup ?? null;
   function eventColor(ev) {
+    if (effectiveColorTG) {
+      const tagColor = resolveTagColor(ev.metadata, parsed.timelineTagGroups, effectiveColorTG);
+      if (tagColor) return tagColor;
+    }
     if (ev.group && groupColorMap.has(ev.group)) {
       return groupColorMap.get(ev.group);
     }
@@ -19277,22 +19559,64 @@ 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);
-      const ungroupedEvents = timelineEvents.filter(
-        (ev) => ev.group === null || !groupNames.includes(ev.group)
-      );
-      const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+    const useGroupedVertical = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+    if (useGroupedVertical) {
+      let laneNames;
+      let laneEventsByName;
+      if (tagLanes) {
+        laneNames = tagLanes.map((l) => l.name);
+        laneEventsByName = new Map(tagLanes.map((l) => [l.name, l.events]));
+      } else {
+        const groupNames = timelineGroups.map((gr) => gr.name);
+        const ungroupedEvents = timelineEvents.filter(
+          (ev) => ev.group === null || !groupNames.includes(ev.group)
+        );
+        laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+        laneEventsByName = new Map(
+          laneNames.map((name) => [
+            name,
+            timelineEvents.filter(
+              (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+            )
+          ])
+        );
+      }
       const laneCount = laneNames.length;
       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
@@ -19342,6 +19666,13 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           formatDateLabel(latestEndDateStr)
         );
       }
+      if (timelineSwimlanes || tagLanes) {
+        laneNames.forEach((laneName, laneIdx) => {
+          const laneX = laneIdx * laneWidth;
+          const fillColor = laneIdx % 2 === 0 ? textColor : "transparent";
+          g.append("rect").attr("class", "tl-swimlane").attr("data-group", laneName).attr("x", laneX).attr("y", 0).attr("width", laneWidth).attr("height", innerHeight).attr("fill", fillColor).attr("opacity", 0.06);
+        });
+      }
       laneNames.forEach((laneName, laneIdx) => {
         const laneX = laneIdx * laneWidth;
         const laneColor = groupColorMap.get(laneName) ?? textColor;
@@ -19349,9 +19680,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         const headerG = g.append("g").attr("class", "tl-lane-header").attr("data-group", laneName).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, laneName)).on("mouseleave", () => fadeReset(g));
         headerG.append("text").attr("x", laneCenter).attr("y", -15).attr("text-anchor", "middle").attr("fill", laneColor).attr("font-size", "12px").attr("font-weight", "600").text(laneName);
         g.append("line").attr("x1", laneCenter).attr("y1", 0).attr("x2", laneCenter).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
-        const laneEvents = timelineEvents.filter(
-          (ev) => laneName === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === laneName
-        );
+        const laneEvents = laneEventsByName.get(laneName) ?? [];
         for (const ev of laneEvents) {
           const y = yScale(parseTimelineDate(ev.date));
           const evG = g.append("g").attr("class", "tl-event").attr("data-group", laneName).attr("data-line-number", String(ev.lineNumber)).attr("data-date", String(parseTimelineDate(ev.date))).attr(
@@ -19368,10 +19697,12 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }).on("click", () => {
             if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
           });
+          setTagAttrs(evG, ev);
+          const evColor = eventColor(ev);
           if (ev.endDate) {
             const y2 = yScale(parseTimelineDate(ev.endDate));
             const rectH = Math.max(y2 - y, 4);
-            let fill2 = laneColor;
+            let fill2 = evColor;
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -19385,7 +19716,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
             evG.append("rect").attr("x", laneCenter - 6).attr("y", y).attr("width", 12).attr("height", rectH).attr("rx", 4).attr("fill", fill2);
             evG.append("text").attr("x", laneCenter + 14).attr("y", y + rectH / 2).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
           } else {
-            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", laneColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+            evG.append("circle").attr("cx", laneCenter).attr("cy", y).attr("r", 4).attr("fill", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
             evG.append("text").attr("x", laneCenter + 10).attr("y", y).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "10px").text(ev.label);
           }
         }
@@ -19394,7 +19725,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
@@ -19474,6 +19805,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);
@@ -19507,18 +19839,24 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
   }
   const BAR_H = 22;
   const GROUP_GAP = 12;
-  if (timelineSort === "group" && timelineGroups.length > 0) {
-    const groupNames = timelineGroups.map((gr) => gr.name);
-    const ungroupedEvents = timelineEvents.filter(
-      (ev) => ev.group === null || !groupNames.includes(ev.group)
-    );
-    const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
-    const lanes = laneNames.map((name) => ({
-      name,
-      events: timelineEvents.filter(
-        (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
-      )
-    }));
+  const useGroupedHorizontal = tagLanes != null || timelineSort === "group" && timelineGroups.length > 0;
+  if (useGroupedHorizontal) {
+    let lanes;
+    if (tagLanes) {
+      lanes = tagLanes;
+    } else {
+      const groupNames = timelineGroups.map((gr) => gr.name);
+      const ungroupedEvents = timelineEvents.filter(
+        (ev) => ev.group === null || !groupNames.includes(ev.group)
+      );
+      const laneNames = ungroupedEvents.length > 0 ? [...groupNames, "(Other)"] : groupNames;
+      lanes = laneNames.map((name) => ({
+        name,
+        events: timelineEvents.filter(
+          (ev) => name === "(Other)" ? ev.group === null || !groupNames.includes(ev.group) : ev.group === name
+        )
+      }));
+    }
     const totalEventRows = lanes.reduce((s, l) => s + l.events.length, 0);
     const scaleMargin = timelineScale ? 24 : 0;
     const markerMargin = timelineMarkers.length > 0 ? 30 : 0;
@@ -19526,7 +19864,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
@@ -19578,7 +19916,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       );
     }
     let curY = markerMargin;
-    if (timelineSwimlanes) {
+    if (timelineSwimlanes || tagLanes) {
       let swimY = markerMargin;
       lanes.forEach((lane, idx) => {
         const laneSpan = lane.events.length * rowH;
@@ -19629,12 +19967,14 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }).on("click", () => {
           if (onClickItem && ev.lineNumber) onClickItem(ev.lineNumber);
         });
+        setTagAttrs(evG, ev);
+        const evColor = eventColor(ev);
         if (ev.endDate) {
           const x2 = xScale(parseTimelineDate(ev.endDate));
           const rectW = Math.max(x2 - x, 4);
           const estLabelWidth = ev.label.length * 7 + 16;
           const labelFitsInside = rectW >= estLabelWidth;
-          let fill2 = laneColor;
+          let fill2 = evColor;
           if (ev.uncertain) {
             const gradientId = `uncertain-${ev.lineNumber}`;
             const defs = svg.select("defs").node() || svg.append("defs").node();
@@ -19642,7 +19982,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
               { offset: "0%", opacity: 1 },
               { offset: "80%", opacity: 1 },
               { offset: "100%", opacity: 0 }
-            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", laneColor).attr("stop-opacity", (d) => d.opacity);
+            ]).enter().append("stop").attr("offset", (d) => d.offset).attr("stop-color", evColor).attr("stop-opacity", (d) => d.opacity);
             fill2 = `url(#${gradientId})`;
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H / 2).attr("width", rectW).attr("height", BAR_H).attr("rx", 4).attr("fill", fill2);
@@ -19659,7 +19999,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           const wouldFlipLeft = x > innerWidth * 0.6;
           const labelFitsLeft = x - 10 - estLabelWidth > 0;
           const flipLeft = wouldFlipLeft && labelFitsLeft;
-          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", laneColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
+          evG.append("circle").attr("cx", x).attr("cy", y).attr("r", 5).attr("fill", evColor).attr("stroke", bgColor).attr("stroke-width", 1.5);
           evG.append("text").attr("x", flipLeft ? x - 10 : x + 10).attr("y", y).attr("dy", "0.35em").attr("text-anchor", flipLeft ? "end" : "start").attr("fill", textColor).attr("font-size", "12px").text(ev.label);
         }
       });
@@ -19670,7 +20010,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
@@ -19766,6 +20106,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);
@@ -19801,6 +20142,163 @@ 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 LG_ICON_W = 20;
+    const mainSvg = d3Selection12.select(container).select("svg");
+    const mainG = mainSvg.select("g");
+    if (!mainSvg.empty() && !mainG.empty()) {
+      let drawSwimlaneIcon2 = function(parent, x, y, isSwimActive) {
+        const iconG = parent.append("g").attr("class", "tl-swimlane-icon").attr("transform", `translate(${x}, ${y})`).style("cursor", "pointer");
+        const barColor = isSwimActive ? palette.primary : palette.textMuted;
+        const barOpacity = isSwimActive ? 1 : 0.35;
+        const bars = [
+          { y: 0, w: 8 },
+          { y: 4, w: 12 },
+          { y: 8, w: 6 }
+        ];
+        for (const bar of bars) {
+          iconG.append("rect").attr("x", 0).attr("y", bar.y).attr("width", bar.w).attr("height", 2).attr("rx", 1).attr("fill", barColor).attr("opacity", barOpacity);
+        }
+        return iconG;
+      }, relayout2 = function() {
+        renderTimeline(
+          container,
+          parsed,
+          palette,
+          isDark,
+          onClickItem,
+          exportDims,
+          currentActiveGroup,
+          currentSwimlaneGroup,
+          onTagStateChange
+        );
+      }, 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 groupKey = lg.group.name.toLowerCase();
+          const isActive = currentActiveGroup != null && currentActiveGroup.toLowerCase() === groupKey;
+          const isSwimActive = currentSwimlaneGroup != null && currentSwimlaneGroup.toLowerCase() === groupKey;
+          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", groupKey).attr("data-tag-group", groupKey).attr("data-legend-entry", "__group__").style("cursor", "pointer").on("click", () => {
+            currentActiveGroup = currentActiveGroup === groupKey ? null : groupKey;
+            drawLegend2();
+            recolorEvents2();
+            onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+          });
+          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) {
+            const iconX = pillXOff + pillWidth + 5;
+            const iconY = (LG_HEIGHT - 10) / 2;
+            const iconEl = drawSwimlaneIcon2(gEl, iconX, iconY, isSwimActive);
+            iconEl.attr("data-swimlane-toggle", groupKey).on("click", (event) => {
+              event.stopPropagation();
+              currentSwimlaneGroup = currentSwimlaneGroup === groupKey ? null : groupKey;
+              onTagStateChange?.(currentActiveGroup, currentSwimlaneGroup);
+              relayout2();
+            });
+            let entryX = pillXOff + pillWidth + LG_ICON_W + 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() {
+        const colorTG = currentActiveGroup ?? swimlaneTagGroup ?? null;
+        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 (colorTG) {
+            const tagColor = resolveTagColor(
+              ev.metadata,
+              parsed.timelineTagGroups,
+              colorTG
+            );
+            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 drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, 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 + LG_ICON_W + 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;
+      let currentSwimlaneGroup = swimlaneTagGroup ?? 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;
@@ -20768,7 +21266,16 @@ async function renderD3ForExport(content, theme, palette, orgExportState, option
   } else if (parsed.type === "arc") {
     renderArcDiagram(container, parsed, effectivePalette, isDark, void 0, dims);
   } else if (parsed.type === "timeline") {
-    renderTimeline(container, parsed, effectivePalette, isDark, void 0, dims);
+    renderTimeline(
+      container,
+      parsed,
+      effectivePalette,
+      isDark,
+      void 0,
+      dims,
+      orgExportState?.activeTagGroup,
+      orgExportState?.swimlaneTagGroup
+    );
   } else if (parsed.type === "venn") {
     renderVenn(container, parsed, effectivePalette, isDark, void 0, dims);
   } else if (parsed.type === "quadrant") {
@@ -20786,8 +21293,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,
@@ -21649,6 +22158,9 @@ function encodeDiagramUrl(dsl, options) {
   if (options?.viewState?.collapsedGroups?.length) {
     hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(","))}`;
   }
+  if (options?.viewState?.swimlaneTagGroup) {
+    hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
+  }
   return { url: `${baseUrl}?${hash}#${hash}` };
 }
 function decodeDiagramUrl(hash) {
@@ -21672,6 +22184,9 @@ function decodeDiagramUrl(hash) {
     if (key === "cg" && val) {
       viewState.collapsedGroups = val.split(",").filter(Boolean);
     }
+    if (key === "swim" && val) {
+      viewState.swimlaneTagGroup = val;
+    }
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);