@diagrammo/dgmo 0.8.10 → 0.8.12

package/dist/index.cjs

@@ -144,6 +144,183 @@ var init_branding = __esm({
   }
 });
 
+// src/label-layout.ts
+function rectsOverlap(a, b) {
+  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function rectCircleOverlap(rect, circle) {
+  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
+  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
+  const dx = nearestX - circle.cx;
+  const dy = nearestY - circle.cy;
+  return dx * dx + dy * dy < circle.r * circle.r;
+}
+function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius, fontSize) {
+  const labelHeight = fontSize + 4;
+  const stepSize = labelHeight + 2;
+  const minGap = pointRadius + 4;
+  const pointCircles = points.map((p) => ({
+    cx: p.cx,
+    cy: p.cy,
+    r: pointRadius
+  }));
+  const placedLabels = [];
+  const results = [];
+  for (let i = 0; i < points.length; i++) {
+    const pt = points[i];
+    const labelWidth = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
+    let best = null;
+    const directions = [
+      {
+        // Above
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy - offset - labelHeight;
+          if (ly < chartBounds.top || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Below
+        gen: (offset) => {
+          const lx = pt.cx - labelWidth / 2;
+          const ly = pt.cy + offset;
+          if (ly + labelHeight > chartBounds.bottom || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: pt.cx,
+            textY: ly + labelHeight / 2,
+            anchor: "middle"
+          };
+        }
+      },
+      {
+        // Right
+        gen: (offset) => {
+          const lx = pt.cx + offset;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx + labelWidth > chartBounds.right || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx,
+            textY: pt.cy,
+            anchor: "start"
+          };
+        }
+      },
+      {
+        // Left
+        gen: (offset) => {
+          const lx = pt.cx - offset - labelWidth;
+          const ly = pt.cy - labelHeight / 2;
+          if (lx < chartBounds.left || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+            return null;
+          return {
+            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            textX: lx + labelWidth,
+            textY: pt.cy,
+            anchor: "end"
+          };
+        }
+      }
+    ];
+    for (const { gen } of directions) {
+      for (let offset = minGap; ; offset += stepSize) {
+        const cand = gen(offset);
+        if (!cand) break;
+        let collision = false;
+        for (const pl of placedLabels) {
+          if (rectsOverlap(cand.rect, pl)) {
+            collision = true;
+            break;
+          }
+        }
+        if (!collision) {
+          for (const circle of pointCircles) {
+            if (rectCircleOverlap(cand.rect, circle)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          for (const obs of obstacles) {
+            if (rectsOverlap(cand.rect, obs)) {
+              collision = true;
+              break;
+            }
+          }
+        }
+        if (!collision) {
+          const dist = offset;
+          if (!best || dist < best.dist) {
+            best = {
+              rect: cand.rect,
+              textX: cand.textX,
+              textY: cand.textY,
+              anchor: cand.anchor,
+              dist
+            };
+          }
+          break;
+        }
+      }
+    }
+    if (!best) {
+      const lx = pt.cx - labelWidth / 2;
+      const ly = pt.cy - minGap - labelHeight;
+      best = {
+        rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+        textX: pt.cx,
+        textY: ly + labelHeight / 2,
+        anchor: "middle",
+        dist: minGap
+      };
+    }
+    placedLabels.push(best.rect);
+    let connectorLine;
+    if (best.dist > minGap + stepSize) {
+      const dx = best.textX - pt.cx;
+      const dy = best.textY - pt.cy;
+      const angle = Math.atan2(dy, dx);
+      const x1 = pt.cx + Math.cos(angle) * pointRadius;
+      const y1 = pt.cy + Math.sin(angle) * pointRadius;
+      const x2 = Math.max(
+        best.rect.x,
+        Math.min(pt.cx, best.rect.x + best.rect.w)
+      );
+      const y2 = Math.max(
+        best.rect.y,
+        Math.min(pt.cy, best.rect.y + best.rect.h)
+      );
+      connectorLine = { x1, y1, x2, y2 };
+    }
+    results.push({
+      label: pt.label,
+      x: best.textX,
+      y: best.textY,
+      anchor: best.anchor,
+      connectorLine
+    });
+  }
+  return results;
+}
+var CHAR_WIDTH_RATIO;
+var init_label_layout = __esm({
+  "src/label-layout.ts"() {
+    "use strict";
+    CHAR_WIDTH_RATIO = 0.6;
+  }
+});
+
 // src/colors.ts
 function resolveColor(color, palette) {
   if (color.startsWith("#")) return null;
@@ -1774,6 +1951,16 @@ function validateTagValues(entities, tagGroups, pushWarning, suggestFn) {
     }
   }
 }
+function validateTagGroupNames(tagGroups, pushWarning) {
+  for (const group of tagGroups) {
+    if (group.name.toLowerCase() === "none") {
+      pushWarning(
+        group.lineNumber,
+        `'none' is a reserved keyword and cannot be used as a tag group name`
+      );
+    }
+  }
+}
 function injectDefaultTagMetadata(entities, tagGroups, skip) {
   const defaults = [];
   for (const group of tagGroups) {
@@ -1794,6 +1981,19 @@ function injectDefaultTagMetadata(entities, tagGroups, skip) {
     }
   }
 }
+function resolveActiveTagGroup(tagGroups, explicitActiveTag, programmaticOverride) {
+  if (programmaticOverride !== void 0) {
+    if (!programmaticOverride) return null;
+    if (programmaticOverride.toLowerCase() === "none") return null;
+    return programmaticOverride;
+  }
+  if (explicitActiveTag) {
+    if (explicitActiveTag.toLowerCase() === "none") return null;
+    return explicitActiveTag;
+  }
+  if (tagGroups.length > 0) return tagGroups[0].name;
+  return null;
+}
 function matchTagBlockHeading(trimmed) {
   return parseTagDeclaration(trimmed);
 }
@@ -1814,7 +2014,7 @@ function measureLegendText(text, fontSize) {
   }
   return w;
 }
-var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
+var LEGEND_HEIGHT, LEGEND_PILL_PAD, LEGEND_PILL_FONT_SIZE, LEGEND_CAPSULE_PAD, LEGEND_DOT_R, LEGEND_ENTRY_FONT_SIZE, LEGEND_ENTRY_DOT_GAP, LEGEND_ENTRY_TRAIL, LEGEND_GROUP_GAP, LEGEND_EYE_SIZE, LEGEND_EYE_GAP, LEGEND_ICON_W, LEGEND_MAX_ENTRY_ROWS, CHAR_W, DEFAULT_W, EYE_OPEN_PATH, EYE_CLOSED_PATH;
 var init_legend_constants = __esm({
   "src/utils/legend-constants.ts"() {
     "use strict";
@@ -1830,6 +2030,7 @@ var init_legend_constants = __esm({
     LEGEND_EYE_SIZE = 14;
     LEGEND_EYE_GAP = 6;
     LEGEND_ICON_W = 20;
+    LEGEND_MAX_ENTRY_ROWS = 3;
     CHAR_W = {
       " ": 0.28,
       "!": 0.28,
@@ -2096,13 +2297,15 @@ function computeLegendLayout(config, state, containerWidth) {
       });
     }
   }
+  const alignLeft = config.position.titleRelation === "inline-with-title";
   const rows = layoutRows(
     activeCapsule,
     pills,
     controlLayouts,
     groupAvailW,
     containerWidth,
-    totalControlsW
+    totalControlsW,
+    alignLeft
   );
   const height = rows.length * LEGEND_HEIGHT;
   const width = containerWidth;
@@ -2176,7 +2379,7 @@ function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
     addonX: addonWidth > 0 ? LEGEND_CAPSULE_PAD + pw + 4 : void 0
   };
 }
-function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW) {
+function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW, alignLeft = false) {
   const rows = [];
   const groupItems = [];
   if (activeCapsule) groupItems.push(activeCapsule);
@@ -2187,7 +2390,8 @@ function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth,
   for (const item of groupItems) {
     const itemW = item.width + LEGEND_GROUP_GAP;
     if (currentRowW + item.width > groupAvailW && currentRowItems.length > 0) {
-      centerRowItems(currentRowItems, containerWidth, totalControlsW);
+      if (!alignLeft)
+        centerRowItems(currentRowItems, containerWidth, totalControlsW);
       rows.push({ y: rowY, items: currentRowItems });
       rowY += LEGEND_HEIGHT;
       currentRowItems = [];
@@ -2239,12 +2443,11 @@ function getLegendReservedHeight(config, state, containerWidth) {
   const layout = computeLegendLayout(config, state, containerWidth);
   return layout.height;
 }
-var LEGEND_MAX_ENTRY_ROWS, CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
+var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
 var init_legend_layout = __esm({
   "src/utils/legend-layout.ts"() {
     "use strict";
     init_legend_constants();
-    LEGEND_MAX_ENTRY_ROWS = 3;
     CONTROL_PILL_PAD = 16;
     CONTROL_FONT_SIZE = 11;
     CONTROL_ICON_GAP = 4;
@@ -3455,7 +3658,8 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           const branch = {
             label: elseIfMatch[1].trim(),
-            children: []
+            children: [],
+            lineNumber
           };
           if (!top.block.elseIfBranches) top.block.elseIfBranches = [];
           top.block.elseIfBranches.push(branch);
@@ -3478,6 +3682,7 @@ function parseSequenceDgmo(content) {
         if (top.block.type === "if") {
           top.inElse = true;
           top.activeElseIfBranch = void 0;
+          top.block.elseLineNumber = lineNumber;
         }
       }
       continue;
@@ -3590,6 +3795,7 @@ function parseSequenceDgmo(content) {
         entities.push({ metadata: g.metadata, lineNumber: g.lineNumber });
     }
     validateTagValues(entities, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
   return result;
 }
@@ -4866,6 +5072,10 @@ function parseERDiagram(content, palette) {
       (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning")),
       suggest
     );
+    validateTagGroupNames(
+      result.tagGroups,
+      (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning"))
+    );
     for (const group of result.tagGroups) {
       if (!group.defaultValue) continue;
       const key = group.name.toLowerCase();
@@ -4961,7 +5171,7 @@ var init_parser3 = __esm({
       unique: "unique",
       nullable: "nullable"
     };
-    KNOWN_OPTIONS = /* @__PURE__ */ new Set(["notation"]);
+    KNOWN_OPTIONS = /* @__PURE__ */ new Set(["notation", "active-tag"]);
     REL_SYMBOLIC_RE = /^([a-zA-Z_]\w*)\s+([1*?])\s*-{1,2}\s*([1*?])\s+([a-zA-Z_]\w*)(?:\s+(.+))?$/;
     REL_KEYWORD_RE = /^([a-zA-Z_]\w*)\s+(one|many|zero)[- ]to[- ](one|many|zero)\s+([a-zA-Z_]\w*)(?:\s+(.+))?$/i;
     KEYWORD_TO_SYMBOL = {
@@ -5870,7 +6080,8 @@ function buildExtendedChartOption(parsed, palette, isDark) {
   }
   const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
-    return buildSankeyOption(parsed, textColor, colors, titleConfig);
+    const bg = isDark ? palette.surface : palette.bg;
+    return buildSankeyOption(parsed, textColor, colors, bg, titleConfig);
   }
   if (parsed.type === "chord") {
     const bg = isDark ? palette.surface : palette.bg;
@@ -5913,7 +6124,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     titleConfig
   );
 }
-function buildSankeyOption(parsed, textColor, colors, titleConfig) {
+function buildSankeyOption(parsed, textColor, colors, bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5921,12 +6132,15 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
       nodeSet.add(link.target);
     }
   }
-  const nodes = Array.from(nodeSet).map((name, index) => ({
-    name,
-    itemStyle: {
-      color: parsed.nodeColors?.[name] ?? colors[index % colors.length]
-    }
-  }));
+  const tintNode = (c) => mix(c, bg, 75);
+  const tintLink = (c) => mix(c, bg, 45);
+  const nodeColorMap = /* @__PURE__ */ new Map();
+  const nodes = Array.from(nodeSet).map((name, index) => {
+    const raw = parsed.nodeColors?.[name] ?? colors[index % colors.length];
+    const tinted = tintNode(raw);
+    nodeColorMap.set(name, tintLink(raw));
+    return { name, itemStyle: { color: tinted } };
+  });
   return {
     ...CHART_BASE,
     title: titleConfig,
@@ -5949,11 +6163,13 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig) {
           source: link.source,
           target: link.target,
           value: link.value,
-          ...link.color && { lineStyle: { color: link.color } }
+          lineStyle: {
+            color: link.color ? tintLink(link.color) : nodeColorMap.get(link.source)
+          }
         })),
         lineStyle: {
-          color: "gradient",
-          curveness: 0.5
+          curveness: 0.5,
+          opacity: 0.6
         },
         label: {
           color: textColor,
@@ -6048,7 +6264,7 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig) {
             };
           });
         })(),
-        roam: true,
+        roam: false,
         label: {
           position: "right",
           formatter: "{b}"
@@ -6210,16 +6426,6 @@ function getExtendedChartLegendGroups(parsed, colors) {
   }
   return [];
 }
-function rectsOverlap(a, b) {
-  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
-}
-function rectCircleOverlap(rect, circle) {
-  const nearestX = Math.max(rect.x, Math.min(circle.cx, rect.x + rect.w));
-  const nearestY = Math.max(rect.y, Math.min(circle.cy, rect.y + rect.h));
-  const dx = nearestX - circle.cx;
-  const dy = nearestY - circle.cy;
-  return dx * dx + dy * dy < circle.r * circle.r;
-}
 function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize, bg) {
   const labelHeight = fontSize + 4;
   const stepSize = labelHeight + 2;
@@ -6596,12 +6802,17 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       maxValue = Math.max(maxValue, value);
     });
   });
+  const CHAR_WIDTH7 = 7;
+  const ESTIMATED_CHART_WIDTH = 900;
+  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const slotWidth = columns.length > 0 ? ESTIMATED_CHART_WIDTH / columns.length : Infinity;
+  const needsRotation = longestCol * CHAR_WIDTH7 > slotWidth * 0.85;
   return {
     ...CHART_BASE,
     title: titleConfig,
     grid: {
       left: "3%",
-      right: "10%",
+      right: "3%",
       bottom: "3%",
       top: parsed.title ? "15%" : "5%",
       containLabel: true
@@ -6609,6 +6820,7 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
     xAxis: {
       type: "category",
       data: columns,
+      position: "top",
       splitArea: {
         show: true
       },
@@ -6617,12 +6829,19 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0,
+        ...needsRotation && {
+          rotate: -45,
+          width: 200,
+          overflow: "none"
+        }
       }
     },
     yAxis: {
       type: "category",
       data: rowLabels,
+      inverse: true,
       splitArea: {
         show: true
       },
@@ -6631,16 +6850,14 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
       },
       axisLabel: {
         color: textColor,
-        fontSize: 16
+        fontSize: 12,
+        interval: 0
       }
     },
     visualMap: {
+      show: false,
       min: minValue,
       max: maxValue,
-      calculable: true,
-      orient: "vertical",
-      right: "2%",
-      top: "center",
       inRange: {
         color: [
           mix(palette.primary, bg, 30),
@@ -6648,9 +6865,6 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           mix(palette.colors.yellow, bg, 30),
           mix(palette.colors.orange, bg, 30)
         ]
-      },
-      textStyle: {
-        color: textColor
       }
     },
     series: [
@@ -6668,9 +6882,8 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           fontWeight: "bold"
         },
         emphasis: {
-          ...EMPHASIS_SELF
-        },
-        blur: BLUR_DIM
+          disabled: true
+        }
       }
     ]
   };
@@ -7525,6 +7738,7 @@ var init_echarts = __esm({
     init_fonts();
     init_branding();
     init_legend_svg();
+    init_label_layout();
     init_palettes();
     init_color_utils();
     init_chart();
@@ -7806,6 +8020,7 @@ function parseOrg(content, palette) {
     };
     collectAll(result.roots);
     validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
   if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
     const diag = makeDgmoError(1, "No nodes found in org chart");
@@ -7872,7 +8087,8 @@ var init_parser4 = __esm({
     KNOWN_OPTIONS3 = /* @__PURE__ */ new Set([
       "sub-node-label",
       "hide",
-      "show-sub-node-count"
+      "show-sub-node-count",
+      "active-tag"
     ]);
     KNOWN_BOOLEANS2 = /* @__PURE__ */ new Set(["show-sub-node-count", "direction-tb"]);
   }
@@ -8133,6 +8349,7 @@ function parseKanban(content, palette) {
   if (result.columns.length === 0 && !result.error) {
     return fail(1, "No columns found. Use [Column Name] to define columns");
   }
+  validateTagGroupNames(result.tagGroups, warn);
   return result;
 }
 function parseCardLine(trimmed, lineNumber, counter, aliasMap, palette) {
@@ -8178,7 +8395,7 @@ var init_parser5 = __esm({
     init_parsing();
     COLUMN_RE = /^\[(.+?)\](?:\s*\(([^)]+)\))?\s*(?:\|\s*(.+))?$/;
     LEGACY_COLUMN_RE = /^==\s+(.+?)\s*(?:\[wip:\s*(\d+)\])?\s*==$/;
-    KNOWN_OPTIONS4 = /* @__PURE__ */ new Set(["hide"]);
+    KNOWN_OPTIONS4 = /* @__PURE__ */ new Set(["hide", "active-tag"]);
     KNOWN_BOOLEANS3 = /* @__PURE__ */ new Set(["no-auto-color"]);
   }
 });
@@ -8721,6 +8938,10 @@ function parseC4(content, palette) {
   }
   validateRelationshipTargets(result, knownNames, pushError);
   validateDeploymentRefs(result, knownNames, pushError);
+  validateTagGroupNames(
+    result.tagGroups,
+    (line10, msg) => pushError(line10, msg, "warning")
+  );
   return result;
 }
 function findParentElement(indent, stack) {
@@ -8847,7 +9068,7 @@ var init_parser6 = __esm({
       "cloud",
       "external"
     ]);
-    KNOWN_C4_OPTIONS = /* @__PURE__ */ new Set(["layout"]);
+    KNOWN_C4_OPTIONS = /* @__PURE__ */ new Set(["layout", "active-tag"]);
     KNOWN_C4_BOOLEANS = /* @__PURE__ */ new Set(["direction-tb"]);
     ALL_CHART_TYPES2 = [
       "c4",
@@ -9185,6 +9406,7 @@ function parseSitemap(content, palette) {
     };
     collectAll(result.roots);
     validateTagValues(allNodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
   if (result.roots.length === 0 && result.tagGroups.length === 0 && !result.error) {
     const diag = makeDgmoError(1, "No pages found in sitemap");
@@ -9785,6 +10007,7 @@ function parseInfra(content) {
       }
     }
   }
+  validateTagGroupNames(result.tagGroups, warn);
   return result;
 }
 function extractSymbols4(docText) {
@@ -9863,7 +10086,8 @@ var init_parser8 = __esm({
       "slo-warning-margin",
       "default-latency-ms",
       "default-uptime",
-      "default-rps"
+      "default-rps",
+      "active-tag"
     ]);
     UNPARSED_SPLIT_RE = /\bsplit\s+(\d+)%/;
   }
@@ -10061,6 +10285,7 @@ function parseGantt(content, palette) {
       dependencies: true,
       sort: "default",
       defaultSwimlaneGroup: null,
+      activeTag: null,
       optionLineNumbers: {},
       holidaysLineNumber: null
     },
@@ -10475,6 +10700,9 @@ function parseGantt(content, palette) {
             );
           }
           break;
+        case "active-tag":
+          result.options.activeTag = value;
+          break;
       }
       continue;
     }
@@ -10654,6 +10882,7 @@ function parseGantt(content, palette) {
     warn(0, "sort tag has no effect \u2014 no tag groups defined.");
     result.options.sort = "default";
   }
+  validateTagGroupNames(result.tagGroups, warn);
   return result;
   function makeTask(labelRaw, duration, uncertain, ln, explicitStart) {
     const segments = labelRaw.split("|");
@@ -10816,7 +11045,8 @@ var init_parser9 = __esm({
       "critical-path",
       "dependencies",
       "chart",
-      "sort"
+      "sort",
+      "active-tag"
     ]);
     KNOWN_BOOLEANS4 = /* @__PURE__ */ new Set([
       "critical-path",
@@ -11236,6 +11466,7 @@ function parseBoxesAndLines(content) {
   if (result.tagGroups.length > 0) {
     injectDefaultTagMetadata(result.nodes, result.tagGroups);
     validateTagValues(result.nodes, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
   return result;
 }
@@ -14092,8 +14323,7 @@ function computeLayout(parsed, _palette) {
     currentX += cl.width + COLUMN_GAP;
   }
   const totalWidth = currentX - COLUMN_GAP + DIAGRAM_PADDING3;
-  const legendSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT : 0;
-  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3 + legendSpace;
+  const totalHeight = startY + maxColumnHeight + DIAGRAM_PADDING3;
   return { columns: columnLayouts, totalWidth, totalHeight };
 }
 function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exportDims, activeTagGroup) {
@@ -14106,14 +14336,16 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     svg.append("text").attr("class", "chart-title").attr("data-line-number", parsed.titleLineNumber ?? 0).attr("x", DIAGRAM_PADDING3).attr("y", DIAGRAM_PADDING3 + TITLE_FONT_SIZE).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   if (parsed.tagGroups.length > 0) {
-    const legendY = height - LEGEND_HEIGHT;
+    const titleTextWidth = parsed.title ? measureLegendText(parsed.title, TITLE_FONT_SIZE) + 16 : 0;
+    const legendX = DIAGRAM_PADDING3 + titleTextWidth;
+    const legendY = DIAGRAM_PADDING3 + (TITLE_FONT_SIZE - LEGEND_HEIGHT) / 2;
     const legendConfig = {
       groups: parsed.tagGroups,
-      position: { placement: "top-center", titleRelation: "below-title" },
+      position: { placement: "top-center", titleRelation: "inline-with-title" },
       mode: exportDims ? "inline" : "fixed"
     };
     const legendState = { activeGroup: activeTagGroup ?? null };
-    const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${DIAGRAM_PADDING3},${legendY})`);
+    const legendG = svg.append("g").attr("class", "kanban-legend").attr("transform", `translate(${legendX},${legendY})`);
     renderLegendD3(
       legendG,
       legendConfig,
@@ -14121,7 +14353,7 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
       palette,
       isDark,
       void 0,
-      width - DIAGRAM_PADDING3 * 2
+      width - legendX - DIAGRAM_PADDING3
     );
   }
   const defaultColBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
@@ -15662,7 +15894,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
   const maxTextWidth = nodeWidth - NODE_TEXT_PADDING * 2;
   const lineHeight = 1.3;
   for (let fontSize = NODE_FONT_SIZE; fontSize >= MIN_NODE_FONT_SIZE; fontSize--) {
-    const charWidth2 = fontSize * CHAR_WIDTH_RATIO;
+    const charWidth2 = fontSize * CHAR_WIDTH_RATIO2;
     const maxCharsPerLine = Math.floor(maxTextWidth / charWidth2);
     const maxLines = Math.floor((nodeHeight - 8) / (fontSize * lineHeight));
     if (maxCharsPerLine < 2 || maxLines < 1) continue;
@@ -15714,7 +15946,7 @@ function fitTextToNode(label, nodeWidth, nodeHeight) {
     }
     if (hardLines.length <= maxLines) return { lines: hardLines, fontSize };
   }
-  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO;
+  const charWidth = MIN_NODE_FONT_SIZE * CHAR_WIDTH_RATIO2;
   const maxChars = Math.floor((nodeWidth - NODE_TEXT_PADDING * 2) / charWidth);
   const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "\u2026" : label;
   return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
@@ -15791,7 +16023,11 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const width = exportDims?.width ?? container.clientWidth;
   const height = exportDims?.height ?? container.clientHeight;
   if (width <= 0 || height <= 0) return;
-  const activeGroup = activeTagGroup ?? parsed.options["active-tag"] ?? null;
+  const activeGroup = resolveActiveTagGroup(
+    parsed.tagGroups,
+    parsed.options["active-tag"],
+    activeTagGroup
+  );
   const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
   const nodeMap = /* @__PURE__ */ new Map();
   for (const node of parsed.nodes) nodeMap.set(node.label, node);
@@ -15873,7 +16109,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       path.attr("marker-start", `url(#${revId})`);
     }
     if (le.label && le.labelX != null && le.labelY != null) {
-      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO;
+      const lw = le.label.length * EDGE_LABEL_FONT_SIZE4 * CHAR_WIDTH_RATIO2;
       labelPositions.push({
         x: le.labelX,
         y: le.labelY + le.yOffset,
@@ -15931,7 +16167,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       const descY = labelY + lineH / 2 + gap + META_FONT_SIZE3 / 2;
       nodeG.append("text").attr("x", 0).attr("y", labelY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", NODE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).text(node.label);
       const maxChars = Math.floor(
-        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO)
+        (ln.width - NODE_TEXT_PADDING * 2) / (META_FONT_SIZE3 * CHAR_WIDTH_RATIO2)
       );
       const desc = node.description.length > maxChars ? node.description.slice(0, maxChars - 1) + "\u2026" : node.description;
       const descEl = nodeG.append("text").attr("x", 0).attr("y", descY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", META_FONT_SIZE3).attr("fill", palette.textMuted).text(desc);
@@ -15969,10 +16205,11 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
 }
 function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark, options) {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
-    exportDims: options?.exportDims
+    exportDims: options?.exportDims,
+    activeTagGroup: options?.activeTagGroup
   });
 }
-var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
+var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, META_FONT_SIZE3, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, lineGeneratorLR, lineGeneratorTB, lineGeneratorLinear2;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -15995,7 +16232,7 @@ var init_renderer6 = __esm({
     COLLAPSE_BAR_HEIGHT3 = 4;
     ARROWHEAD_W2 = 5;
     ARROWHEAD_H2 = 4;
-    CHAR_WIDTH_RATIO = 0.6;
+    CHAR_WIDTH_RATIO2 = 0.6;
     NODE_TEXT_PADDING = 12;
     GROUP_RX = 8;
     GROUP_LABEL_FONT_SIZE = 14;
@@ -16066,7 +16303,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const nodeGeometry = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (pos)
       nodeGeometry.set(name, {
         y: pos.y,
@@ -16076,14 +16313,14 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   const rankMap = /* @__PURE__ */ new Map();
   for (const name of g.nodes()) {
-    const pos = g.node(name);
+    const pos = gNode(g, name);
     if (!pos) continue;
     const rankY = Math.round(pos.y);
     if (!rankMap.has(rankY)) rankMap.set(rankY, []);
     rankMap.get(rankY).push(name);
   }
   for (const [, rankNodes] of rankMap) {
-    rankNodes.sort((a, b) => g.node(a).x - g.node(b).x);
+    rankNodes.sort((a, b) => gNode(g, a).x - gNode(g, b).x);
   }
   let anyMoved = false;
   for (const [, rankNodes] of rankMap) {
@@ -16110,10 +16347,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
     }
     for (const partition of partitions) {
       if (partition.length < 2) continue;
-      const xSlots = partition.map((name) => g.node(name).x).sort((a, b) => a - b);
+      const xSlots = partition.map((name) => gNode(g, name).x).sort((a, b) => a - b);
       const basePositions = /* @__PURE__ */ new Map();
       for (const name of g.nodes()) {
-        const pos = g.node(name);
+        const pos = gNode(g, name);
         if (pos) basePositions.set(name, pos.x);
       }
       const currentPenalty = computeEdgePenalty(
@@ -16191,7 +16428,7 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
       }
       if (bestPerm.some((name, i) => name !== partition[i])) {
         for (let i = 0; i < bestPerm.length; i++) {
-          g.node(bestPerm[i]).x = xSlots[i];
+          gNode(g, bestPerm[i]).x = xSlots[i];
           const rankIdx = rankNodes.indexOf(partition[i]);
           if (rankIdx >= 0) rankNodes[rankIdx] = bestPerm[i];
         }
@@ -16201,10 +16438,10 @@ function reduceCrossings(g, edgeList, nodeGroupMap) {
   }
   if (anyMoved) {
     for (const edge of edgeList) {
-      const edgeData = g.edge(edge.source, edge.target);
+      const edgeData = gEdge(g, edge.source, edge.target);
       if (!edgeData) continue;
-      const srcPos = g.node(edge.source);
-      const tgtPos = g.node(edge.target);
+      const srcPos = gNode(g, edge.source);
+      const tgtPos = gNode(g, edge.target);
       if (!srcPos || !tgtPos) continue;
       const srcBottom = { x: srcPos.x, y: srcPos.y + srcPos.height / 2 };
       const tgtTop = { x: tgtPos.x, y: tgtPos.y - tgtPos.height / 2 };
@@ -17648,12 +17885,14 @@ function layoutC4Deployment(parsed, activeTagGroup) {
     height: totalHeight
   };
 }
-var import_dagre5, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
+var import_dagre5, gNode, gEdge, CHAR_WIDTH5, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TYPE_LABEL_HEIGHT, DIVIDER_GAP, NAME_HEIGHT, DESC_LINE_HEIGHT, DESC_CHAR_WIDTH, CARD_V_PAD3, CARD_H_PAD3, META_LINE_HEIGHT5, META_CHAR_WIDTH, MARGIN4, BOUNDARY_PAD, GROUP_BOUNDARY_PAD, LEGEND_HEIGHT4, LEGEND_PILL_PAD4, LEGEND_DOT_R4, LEGEND_ENTRY_DOT_GAP4, LEGEND_ENTRY_TRAIL4, LEGEND_CAPSULE_PAD4, EDGE_NODE_COLLISION_WEIGHT, META_EXCLUDE_KEYS;
 var init_layout6 = __esm({
   "src/c4/layout.ts"() {
     "use strict";
     import_dagre5 = __toESM(require("@dagrejs/dagre"), 1);
     init_legend_constants();
+    gNode = (g, name) => g.node(name);
+    gEdge = (g, v, w) => g.edge(v, w);
     CHAR_WIDTH5 = 8;
     MIN_NODE_WIDTH = 160;
     MAX_NODE_WIDTH = 260;
@@ -22583,7 +22822,11 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const collapsedLanes = options?.collapsedLanes;
   const onToggleLane = options?.onToggleLane;
   const seriesColors2 = getSeriesColors(palette);
-  let currentActiveGroup = options?.currentActiveGroup !== void 0 ? options.currentActiveGroup : resolved.tagGroups.length > 0 ? resolved.tagGroups[0].name : null;
+  let currentActiveGroup = resolveActiveTagGroup(
+    resolved.tagGroups,
+    resolved.options.activeTag ?? void 0,
+    options?.currentActiveGroup
+  );
   let criticalPathActive = false;
   const tagRows = currentSwimlaneGroup ? buildTagLaneRowList(resolved, currentSwimlaneGroup, collapsedLanes) : null;
   const rows = tagRows ?? buildRowList(resolved, collapsedGroups);
@@ -24942,7 +25185,11 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   );
   if (participants.length === 0) return;
   const activationsOff = parsedOptions.activations?.toLowerCase() === "off";
-  const activeTagGroup = options?.activeTagGroup !== void 0 ? options.activeTagGroup || void 0 : parsedOptions["active-tag"] || void 0;
+  const activeTagGroup = resolveActiveTagGroup(
+    parsed.tagGroups,
+    parsedOptions["active-tag"],
+    options?.activeTagGroup
+  ) ?? void 0;
   let tagMap;
   const tagValueToColor = /* @__PURE__ */ new Map();
   if (activeTagGroup) {
@@ -25456,7 +25703,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         for (const branch of el.elseIfBranches) {
           elseIfBranchData.push({
             label: branch.label,
-            indices: collectMsgIndices(branch.children)
+            indices: collectMsgIndices(branch.children),
+            lineNumber: branch.lineNumber
           });
         }
       }
@@ -25517,14 +25765,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
               x1: frameX,
               y1: dividerY,
               x2: frameX + frameW,
-              y2: dividerY
+              y2: dividerY,
+              blockLine: branchData.lineNumber
             });
             deferredLabels.push({
               x: frameX + 6,
               y: dividerY + 14,
               text: `else if ${branchData.label}`,
               bold: false,
-              italic: true
+              italic: true,
+              blockLine: branchData.lineNumber
             });
           }
         }
@@ -25542,14 +25792,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             x1: frameX,
             y1: dividerY,
             x2: frameX + frameW,
-            y2: dividerY
+            y2: dividerY,
+            blockLine: el.elseLineNumber
           });
           deferredLabels.push({
             x: frameX + 6,
             y: dividerY + 14,
             text: "else",
             bold: false,
-            italic: true
+            italic: true,
+            blockLine: el.elseLineNumber
           });
         }
       }
@@ -25595,7 +25847,9 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   });
   for (const ln of deferredLines) {
-    svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3");
+    const line10 = svg.append("line").attr("x1", ln.x1).attr("y1", ln.y1).attr("x2", ln.x2).attr("y2", ln.y2).attr("stroke", palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("class", "block-divider");
+    if (ln.blockLine !== void 0)
+      line10.attr("data-block-line", String(ln.blockLine));
   }
   for (const lbl of deferredLabels) {
     const t = svg.append("text").attr("x", lbl.x).attr("y", lbl.y).attr("fill", palette.text).attr("font-size", 11).attr("class", "block-label").text(lbl.text);
@@ -25938,6 +26192,7 @@ var init_renderer10 = __esm({
     init_colors();
     init_parser();
     init_tag_resolution();
+    init_tag_groups();
     init_legend_constants();
     init_legend_d3();
     init_title_constants();
@@ -26893,6 +27148,10 @@ function parseVisualization(content, palette) {
         (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning")),
         suggest
       );
+      validateTagGroupNames(
+        result.timelineTagGroups,
+        (line10, msg) => result.diagnostics.push(makeDgmoError(line10, msg, "warning"))
+      );
       for (const group of result.timelineTagGroups) {
         if (!group.defaultValue) continue;
         const key = group.name.toLowerCase();
@@ -27789,6 +28048,26 @@ function buildEventTooltipHtml(ev) {
 function buildEraTooltipHtml(era) {
   return `<strong>${era.label}</strong><br>${formatDateLabel(era.startDate)} \u2192 ${formatDateLabel(era.endDate)}`;
 }
+function renderTimelineGroupLegend(g, groups, groupColorMap, textColor, palette, isDark, legendY, onHover, onLeave) {
+  const PILL_H = 22;
+  const DOT_R = 4;
+  const DOT_GAP = 4;
+  const PAD_X = 10;
+  const FONT_SIZE = 11;
+  const GAP = 8;
+  const pillBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+  let legendX = 0;
+  for (const grp of groups) {
+    const color = groupColorMap.get(grp.name) ?? textColor;
+    const textW = measureLegendText(grp.name, FONT_SIZE);
+    const pillW = PAD_X + DOT_R * 2 + DOT_GAP + textW + PAD_X;
+    const itemG = g.append("g").attr("class", "tl-legend-item").attr("data-group", grp.name).style("cursor", "pointer").on("mouseenter", () => onHover(grp.name)).on("mouseleave", () => onLeave());
+    itemG.append("rect").attr("x", legendX).attr("y", legendY - PILL_H / 2).attr("width", pillW).attr("height", PILL_H).attr("rx", PILL_H / 2).attr("fill", pillBg);
+    itemG.append("circle").attr("cx", legendX + PAD_X + DOT_R).attr("cy", legendY).attr("r", DOT_R).attr("fill", color);
+    itemG.append("text").attr("x", legendX + PAD_X + DOT_R * 2 + DOT_GAP).attr("y", legendY).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", `${FONT_SIZE}px`).attr("font-family", FONT_FAMILY).text(grp.name);
+    legendX += pillW + GAP;
+  }
+}
 function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode) {
   d3Selection13.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const {
@@ -28180,15 +28459,17 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         );
       }
       if (timelineGroups.length > 0) {
-        let legendX = 0;
-        const legendY = -55;
-        for (const grp of timelineGroups) {
-          const color = groupColorMap.get(grp.name) ?? textColor;
-          const itemG = g.append("g").attr("class", "tl-legend-item").attr("data-group", grp.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, grp.name)).on("mouseleave", () => fadeReset(g));
-          itemG.append("circle").attr("cx", legendX).attr("cy", legendY).attr("r", 5).attr("fill", color);
-          itemG.append("text").attr("x", legendX + 10).attr("y", legendY).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(grp.name);
-          legendX += grp.name.length * 7 + 30;
-        }
+        renderTimelineGroupLegend(
+          g,
+          timelineGroups,
+          groupColorMap,
+          textColor,
+          palette,
+          isDark,
+          -55,
+          (name) => fadeToGroup(g, name),
+          () => fadeReset(g)
+        );
       }
       g.append("line").attr("x1", axisX).attr("y1", 0).attr("x2", axisX).attr("y2", innerHeight).attr("stroke", mutedColor).attr("stroke-width", 1).attr("stroke-dasharray", "4,4");
       for (const ev of sorted) {
@@ -28415,7 +28696,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
           }
           evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
           if (labelFitsInside) {
-            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+            evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
           } else {
             const wouldFlipLeft = x + rectW > innerWidth * 0.6;
             const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -28496,15 +28777,18 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
       );
     }
     if (timelineGroups.length > 0) {
-      let legendX = 0;
       const legendY = timelineScale ? -75 : -55;
-      for (const grp of timelineGroups) {
-        const color = groupColorMap.get(grp.name) ?? textColor;
-        const itemG = g.append("g").attr("class", "tl-legend-item").attr("data-group", grp.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, grp.name)).on("mouseleave", () => fadeReset(g));
-        itemG.append("circle").attr("cx", legendX).attr("cy", legendY).attr("r", 5).attr("fill", color);
-        itemG.append("text").attr("x", legendX + 10).attr("y", legendY).attr("dy", "0.35em").attr("fill", textColor).attr("font-size", "11px").text(grp.name);
-        legendX += grp.name.length * 7 + 30;
-      }
+      renderTimelineGroupLegend(
+        g,
+        timelineGroups,
+        groupColorMap,
+        textColor,
+        palette,
+        isDark,
+        legendY,
+        (name) => fadeToGroup(g, name),
+        () => fadeReset(g)
+      );
     }
     sorted.forEach((ev, i) => {
       const y = markerMargin + i * rowH + rowH / 2;
@@ -28569,7 +28853,7 @@ function renderTimeline(container, parsed, palette, isDark, onClickItem, exportD
         }
         evG.append("rect").attr("x", x).attr("y", y - BAR_H2 / 2).attr("width", rectW).attr("height", BAR_H2).attr("rx", 4).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 2);
         if (labelFitsInside) {
-          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "14px").attr("font-weight", "700").text(ev.label);
+          evG.append("text").attr("x", x + 8).attr("y", y).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", "13px").text(ev.label);
         } else {
           const wouldFlipLeft = x + rectW > innerWidth * 0.6;
           const labelFitsLeft = x - 6 - estLabelWidth > 0;
@@ -28937,7 +29221,7 @@ function regionCentroid(circles, inside) {
 }
 function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims) {
   const { vennSets, vennOverlaps, title } = parsed;
-  if (vennSets.length < 2) return;
+  if (vennSets.length < 2 || vennSets.length > 3) return;
   const init2 = initD3Chart(container, palette, exportDims);
   if (!init2) return;
   const { svg, width, height, textColor, colors } = init2;
@@ -28993,7 +29277,9 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     marginBottom
   ).map((c) => ({ ...c, y: c.y + titleHeight }));
   const scaledR = circles[0].r;
-  svg.append("style").text("circle:focus, circle:focus-visible { outline: none !important; }");
+  svg.append("style").text(
+    "circle:focus, circle:focus-visible { outline-solid: none !important; }"
+  );
   renderChartTitle(
     svg,
     title,
@@ -29175,7 +29461,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
   }
   const hoverGroup = svg.append("g");
   circles.forEach((c, i) => {
-    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", c.x).attr("cy", c.y).attr("r", c.r).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", String(vennSets[i].lineNumber)).style("cursor", onClickItem ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay([i]);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -29213,7 +29499,7 @@ function renderVenn(container, parsed, palette, isDark, onClickItem, exportDims)
     const declaredOv = vennOverlaps.find(
       (ov) => ov.sets.length === sets.length && ov.sets.every((s, k) => s === sets[k])
     );
-    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline", "none").on("mouseenter", () => {
+    hoverGroup.append("circle").attr("cx", centroid.x).attr("cy", centroid.y).attr("r", overlayR).attr("fill", "transparent").attr("stroke", "none").attr("class", "venn-hit-target").attr("data-line-number", declaredOv ? String(declaredOv.lineNumber) : "").style("cursor", onClickItem && declaredOv ? "pointer" : "default").style("outline-solid", "none").on("mouseenter", () => {
       showRegionOverlay(idxs);
     }).on("mouseleave", () => {
       hideAllOverlays();
@@ -29347,8 +29633,8 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
   const LABEL_MAX_FONT = 48;
   const LABEL_MIN_FONT = 14;
   const LABEL_PAD2 = 40;
-  const CHAR_WIDTH_RATIO2 = 0.6;
-  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO2;
+  const CHAR_WIDTH_RATIO3 = 0.6;
+  const estTextWidth = (text, fontSize) => text.length * fontSize * CHAR_WIDTH_RATIO3;
   const quadrantLabelLayout = (text, qw2, qh2) => {
     const availW = qw2 - LABEL_PAD2;
     const availH = qh2 - LABEL_PAD2;
@@ -29492,16 +29778,45 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
     if (x < 0.5 && y < 0.5) return "bottom-left";
     return "bottom-right";
   };
+  const POINT_RADIUS = 6;
+  const POINT_LABEL_FONT_SIZE = 12;
+  const quadrantLabelObstacles = quadrantDefsWithLabel.map((d) => {
+    const layout = labelLayouts.get(d.label.text);
+    const totalW = Math.max(...layout.lines.map((l) => l.length)) * layout.fontSize * CHAR_WIDTH_RATIO3;
+    const totalH = layout.lines.length * layout.fontSize * 1.2;
+    return {
+      x: d.labelX - totalW / 2,
+      y: d.labelY - totalH / 2,
+      w: totalW,
+      h: totalH
+    };
+  });
+  const pointPixels = quadrantPoints.map((point) => ({
+    label: point.label,
+    cx: xScale(point.x),
+    cy: yScale(point.y)
+  }));
+  const placedPointLabels = computeQuadrantPointLabels(
+    pointPixels,
+    { left: 0, top: 0, right: chartWidth, bottom: chartHeight },
+    quadrantLabelObstacles,
+    POINT_RADIUS,
+    POINT_LABEL_FONT_SIZE
+  );
   const pointsG = chartG.append("g").attr("class", "points");
-  quadrantPoints.forEach((point) => {
+  quadrantPoints.forEach((point, i) => {
     const cx = xScale(point.x);
     const cy = yScale(point.y);
     const quadrant = getPointQuadrant(point.x, point.y);
     const quadDef = quadrantDefs.find((d) => d.position === quadrant);
     const pointColor = quadDef?.label?.color ?? defaultColors[quadDef?.colorIdx ?? 0];
+    const placed = placedPointLabels[i];
     const pointG = pointsG.append("g").attr("class", "point-group").attr("data-line-number", String(point.lineNumber));
-    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 6).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
-    pointG.append("text").attr("x", cx).attr("y", cy - 10).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", "12px").attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
+    if (placed.connectorLine) {
+      pointG.append("line").attr("x1", placed.connectorLine.x1).attr("y1", placed.connectorLine.y1).attr("x2", placed.connectorLine.x2).attr("y2", placed.connectorLine.y2).attr("stroke", pointColor).attr("stroke-width", 1).attr("opacity", 0.5);
+    }
+    pointG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", POINT_RADIUS).attr("fill", "#ffffff").attr("stroke", pointColor).attr("stroke-width", 2);
+    pointG.append("text").attr("x", placed.x).attr("y", placed.y).attr("text-anchor", placed.anchor).attr("dominant-baseline", "central").attr("fill", textColor).attr("font-size", `${POINT_LABEL_FONT_SIZE}px`).attr("font-weight", "700").style("text-shadow", `0 1px 2px ${shadowColor}`).text(point.label);
     const tipHtml = `<strong>${point.label}</strong><br>x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`;
     pointG.style("cursor", onClickItem ? "pointer" : "default").on("mouseenter", (event) => {
       showTooltip(tooltip, tipHtml, event);
@@ -29510,7 +29825,7 @@ function renderQuadrant(container, parsed, palette, isDark, onClickItem, exportD
       showTooltip(tooltip, tipHtml, event);
     }).on("mouseleave", () => {
       hideTooltip(tooltip);
-      pointG.select("circle").attr("r", 6);
+      pointG.select("circle").attr("r", POINT_RADIUS);
     }).on("click", () => {
       if (onClickItem && point.lineNumber) onClickItem(point.lineNumber);
     });
@@ -29585,7 +29900,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const orgParsed = parseOrg2(content, effectivePalette2);
     if (orgParsed.error) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      orgParsed.tagGroups,
+      orgParsed.options["active-tag"],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
     const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseOrgTree2(orgParsed, collapsedNodes) : { parsed: orgParsed, hiddenCounts: /* @__PURE__ */ new Map() };
     const orgLayout = layoutOrg2(
@@ -29624,7 +29943,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     const sitemapParsed = parseSitemap2(content, effectivePalette2);
     if (sitemapParsed.error || sitemapParsed.roots.length === 0) return "";
     const collapsedNodes = orgExportState?.collapsedNodes;
-    const activeTagGroup = orgExportState?.activeTagGroup ?? options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      sitemapParsed.tagGroups,
+      sitemapParsed.options["active-tag"],
+      orgExportState?.activeTagGroup ?? options?.tagGroup
+    );
     const hiddenAttributes = orgExportState?.hiddenAttributes;
     const { parsed: effectiveParsed, hiddenCounts } = collapsedNodes && collapsedNodes.size > 0 ? collapseSitemapTree2(sitemapParsed, collapsedNodes) : { parsed: sitemapParsed, hiddenCounts: /* @__PURE__ */ new Map() };
     const sitemapLayout = layoutSitemap2(
@@ -29669,7 +29992,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       theme === "dark",
       void 0,
       void 0,
-      options?.tagGroup
+      resolveActiveTagGroup(
+        kanbanParsed.tagGroups,
+        kanbanParsed.options["active-tag"],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
@@ -29718,7 +30045,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       theme === "dark",
       void 0,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        erParsed.tagGroups,
+        erParsed.options["active-tag"],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
@@ -29741,7 +30072,10 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       blLayout,
       effectivePalette2,
       theme === "dark",
-      { exportDims: { width: exportWidth, height: exportHeight } }
+      {
+        exportDims: { width: exportWidth, height: exportHeight },
+        activeTagGroup: options?.tagGroup
+      }
     );
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
@@ -29776,7 +30110,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       theme === "dark",
       void 0,
       { width: exportWidth, height: exportHeight },
-      options?.tagGroup
+      resolveActiveTagGroup(
+        c4Parsed.tagGroups,
+        c4Parsed.options["active-tag"],
+        options?.tagGroup
+      )
     );
     return finalizeSvgExport(container2, theme, effectivePalette2, options);
   }
@@ -29810,7 +30148,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
     if (infraParsed.error || infraParsed.nodes.length === 0) return "";
     const infraComputed = computeInfra2(infraParsed);
     const infraLayout = layoutInfra2(infraComputed);
-    const activeTagGroup = options?.tagGroup ?? null;
+    const activeTagGroup = resolveActiveTagGroup(
+      infraParsed.tagGroups,
+      infraParsed.options["active-tag"],
+      options?.tagGroup
+    );
     const titleOffset = infraParsed.title ? 40 : 0;
     const legendGroups = computeInfraLegendGroups2(
       infraLayout.nodes,
@@ -29945,7 +30287,11 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       isDark,
       void 0,
       dims,
-      orgExportState?.activeTagGroup ?? options?.tagGroup,
+      resolveActiveTagGroup(
+        parsed.timelineTagGroups,
+        void 0,
+        orgExportState?.activeTagGroup ?? options?.tagGroup
+      ),
       orgExportState?.swimlaneTagGroup
     );
   } else if (parsed.type === "venn") {
@@ -29982,6 +30328,7 @@ var init_d3 = __esm({
     import_d3_cloud = __toESM(require("d3-cloud"), 1);
     init_fonts();
     init_branding();
+    init_label_layout();
     init_colors();
     init_palettes();
     init_color_utils();
@@ -30173,6 +30520,7 @@ __export(index_exports, {
   computeTimeTicks: () => computeTimeTicks,
   contrastText: () => contrastText,
   decodeDiagramUrl: () => decodeDiagramUrl,
+  draculaPalette: () => draculaPalette,
   encodeDiagramUrl: () => encodeDiagramUrl,
   extractDiagramSymbols: () => extractDiagramSymbols,
   extractTagDeclarations: () => extractTagDeclarations,
@@ -30216,6 +30564,7 @@ __export(index_exports, {
   looksLikeSitemap: () => looksLikeSitemap,
   looksLikeState: () => looksLikeState,
   makeDgmoError: () => makeDgmoError,
+  monokaiPalette: () => monokaiPalette,
   mute: () => mute,
   nord: () => nord,
   nordPalette: () => nordPalette,
@@ -31081,7 +31430,7 @@ init_palettes();
 
 // src/sharing.ts
 var import_lz_string = require("lz-string");
-var DEFAULT_BASE_URL = "https://diagrammo.app/view";
+var DEFAULT_BASE_URL = "https://online.diagrammo.app";
 var COMPRESSED_SIZE_LIMIT = 8192;
 function encodeDiagramUrl(dsl, options) {
   const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
@@ -31353,21 +31702,33 @@ var COMPLETION_REGISTRY = /* @__PURE__ */ new Map([
       }
     })
   ],
-  ["er", withGlobals()],
+  [
+    "er",
+    withGlobals({
+      "active-tag": { description: "Active tag group name" }
+    })
+  ],
   [
     "org",
     withGlobals({
       "sub-node-label": { description: "Label for sub-nodes" },
-      "show-sub-node-count": { description: "Show sub-node counts" }
+      "show-sub-node-count": { description: "Show sub-node counts" },
+      "active-tag": { description: "Active tag group name" }
     })
   ],
   [
     "kanban",
     withGlobals({
-      "no-auto-color": { description: "Disable automatic card coloring" }
+      "no-auto-color": { description: "Disable automatic card coloring" },
+      "active-tag": { description: "Active tag group name" }
+    })
+  ],
+  [
+    "c4",
+    withGlobals({
+      "active-tag": { description: "Active tag group name" }
     })
   ],
-  ["c4", withGlobals()],
   [
     "state",
     withGlobals({
@@ -31378,7 +31739,8 @@ var COMPLETION_REGISTRY = /* @__PURE__ */ new Map([
   [
     "sitemap",
     withGlobals({
-      "direction-tb": { description: "Switch to top-to-bottom layout" }
+      "direction-tb": { description: "Switch to top-to-bottom layout" },
+      "active-tag": { description: "Active tag group name" }
     })
   ],
   [
@@ -31392,7 +31754,8 @@ var COMPLETION_REGISTRY = /* @__PURE__ */ new Map([
       "default-rps": { description: "Default RPS capacity for all nodes" },
       "slo-availability": { description: "SLO availability target (0-1)" },
       "slo-p90-latency-ms": { description: "SLO p90 latency target in ms" },
-      "slo-warning-margin": { description: "SLO warning margin percentage" }
+      "slo-warning-margin": { description: "SLO warning margin percentage" },
+      "active-tag": { description: "Active tag group name" }
     })
   ],
   [
@@ -31404,7 +31767,8 @@ var COMPLETION_REGISTRY = /* @__PURE__ */ new Map([
       },
       sort: { description: "Sort order", values: ["time", "group", "tag"] },
       "critical-path": { description: "Show critical path" },
-      dependencies: { description: "Show dependencies" }
+      dependencies: { description: "Show dependencies" },
+      "active-tag": { description: "Active tag group name" }
     })
   ],
   [
@@ -31923,6 +32287,7 @@ init_branding();
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
+  draculaPalette,
   encodeDiagramUrl,
   extractDiagramSymbols,
   extractTagDeclarations,
@@ -31966,6 +32331,7 @@ init_branding();
   looksLikeSitemap,
   looksLikeState,
   makeDgmoError,
+  monokaiPalette,
   mute,
   nord,
   nordPalette,