@diagrammo/dgmo 0.8.11 → 0.8.13

package/dist/index.d.cts

@@ -1751,6 +1751,7 @@ declare function renderBoxesAndLinesForExport(container: HTMLDivElement, parsed:
         width: number;
         height: number;
     };
+    activeTagGroup?: string | null;
 }): void;
 
 interface BLCollapseResult {
@@ -2266,6 +2267,7 @@ interface GanttOptions {
     dependencies: boolean;
     sort: 'default' | 'tag';
     defaultSwimlaneGroup: string | null;
+    activeTag: string | null;
     /** Line numbers for option/block keywords — maps key to source line */
     optionLineNumbers: Record<string, number>;
     holidaysLineNumber: number | null;

package/dist/index.d.ts

@@ -1751,6 +1751,7 @@ declare function renderBoxesAndLinesForExport(container: HTMLDivElement, parsed:
         width: number;
         height: number;
     };
+    activeTagGroup?: string | null;
 }): void;
 
 interface BLCollapseResult {
@@ -2266,6 +2267,7 @@ interface GanttOptions {
     dependencies: boolean;
     sort: 'default' | 'tag';
     defaultSwimlaneGroup: string | null;
+    activeTag: string | null;
     /** Line numbers for option/block keywords — maps key to source line */
     optionLineNumbers: Record<string, number>;
     holidaysLineNumber: number | null;

package/dist/index.js

@@ -1929,6 +1929,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) {
@@ -1949,6 +1959,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);
 }
@@ -2252,13 +2275,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;
@@ -2332,7 +2357,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);
@@ -2343,7 +2368,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 = [];
@@ -3747,6 +3773,7 @@ function parseSequenceDgmo(content) {
         entities.push({ metadata: g.metadata, lineNumber: g.lineNumber });
     }
     validateTagValues(entities, result.tagGroups, pushWarning, suggest);
+    validateTagGroupNames(result.tagGroups, pushWarning);
   }
   return result;
 }
@@ -5023,6 +5050,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();
@@ -5118,7 +5149,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 = {
@@ -6212,7 +6243,7 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig) {
             };
           });
         })(),
-        roam: true,
+        roam: false,
         label: {
           position: "right",
           formatter: "{b}"
@@ -7967,6 +7998,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");
@@ -8033,7 +8065,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"]);
   }
@@ -8294,6 +8327,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) {
@@ -8339,7 +8373,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"]);
   }
 });
@@ -8882,6 +8916,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) {
@@ -9008,7 +9046,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",
@@ -9346,6 +9384,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");
@@ -9946,6 +9985,7 @@ function parseInfra(content) {
       }
     }
   }
+  validateTagGroupNames(result.tagGroups, warn);
   return result;
 }
 function extractSymbols4(docText) {
@@ -10024,7 +10064,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+)%/;
   }
@@ -10222,6 +10263,7 @@ function parseGantt(content, palette) {
       dependencies: true,
       sort: "default",
       defaultSwimlaneGroup: null,
+      activeTag: null,
       optionLineNumbers: {},
       holidaysLineNumber: null
     },
@@ -10636,6 +10678,9 @@ function parseGantt(content, palette) {
             );
           }
           break;
+        case "active-tag":
+          result.options.activeTag = value;
+          break;
       }
       continue;
     }
@@ -10815,6 +10860,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("|");
@@ -10977,7 +11023,8 @@ var init_parser9 = __esm({
       "critical-path",
       "dependencies",
       "chart",
-      "sort"
+      "sort",
+      "active-tag"
     ]);
     KNOWN_BOOLEANS4 = /* @__PURE__ */ new Set([
       "critical-path",
@@ -11397,6 +11444,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;
 }
@@ -14272,7 +14320,7 @@ function renderKanban(container, parsed, palette, isDark, _onNavigateToLine, exp
     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 };
@@ -15955,7 +16003,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);
@@ -16133,7 +16185,8 @@ 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 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;
@@ -22749,7 +22802,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);
@@ -25107,7 +25164,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) {
@@ -26109,6 +26170,7 @@ var init_renderer10 = __esm({
     init_colors();
     init_parser();
     init_tag_resolution();
+    init_tag_groups();
     init_legend_constants();
     init_legend_d3();
     init_title_constants();
@@ -27069,6 +27131,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();
@@ -27965,6 +28031,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 {
@@ -28356,15 +28442,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) {
@@ -28672,15 +28760,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;
@@ -29792,7 +29883,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(
@@ -29831,7 +29926,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(
@@ -29876,7 +29975,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);
   }
@@ -29925,7 +30028,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);
   }
@@ -29948,7 +30055,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);
   }
@@ -29983,7 +30093,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);
   }
@@ -30017,7 +30131,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,
@@ -30152,7 +30270,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") {
@@ -31116,18 +31238,20 @@ init_colors();
 init_palettes();
 
 // src/sharing.ts
-import {
-  compressToEncodedURIComponent,
-  decompressFromEncodedURIComponent
-} from "lz-string";
-var DEFAULT_BASE_URL = "https://diagrammo.app/view";
+import lzString from "lz-string";
+var { compressToEncodedURIComponent, decompressFromEncodedURIComponent } = lzString;
+var DEFAULT_BASE_URL = "https://online.diagrammo.app";
 var COMPRESSED_SIZE_LIMIT = 8192;
 function encodeDiagramUrl(dsl, options) {
   const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
   const compressed = compressToEncodedURIComponent(dsl);
   const byteSize = new TextEncoder().encode(compressed).byteLength;
   if (byteSize > COMPRESSED_SIZE_LIMIT) {
-    return { error: "too-large", compressedSize: byteSize, limit: COMPRESSED_SIZE_LIMIT };
+    return {
+      error: "too-large",
+      compressedSize: byteSize,
+      limit: COMPRESSED_SIZE_LIMIT
+    };
   }
   let hash = `dgmo=${compressed}`;
   if (options?.viewState?.activeTagGroup) {
@@ -31178,7 +31302,8 @@ function decodeDiagramUrl(hash) {
       viewState.collapsedLanes = val.split(",").filter(Boolean);
     }
     if (key === "pal" && val) viewState.palette = val;
-    if (key === "th" && (val === "light" || val === "dark")) viewState.theme = val;
+    if (key === "th" && (val === "light" || val === "dark"))
+      viewState.theme = val;
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);
@@ -31392,21 +31517,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({
@@ -31417,7 +31554,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" }
     })
   ],
   [
@@ -31431,7 +31569,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" }
     })
   ],
   [
@@ -31443,7 +31582,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" }
     })
   ],
   [