@diagrammo/dgmo 0.8.18 → 0.8.19

package/dist/index.js

@@ -2100,7 +2100,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, LEGEND_MAX_ENTRY_ROWS, 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, CONTROLS_ICON_PATH, LEGEND_TOGGLE_DOT_R, LEGEND_TOGGLE_OFF_OPACITY, LEGEND_GEAR_PILL_W;
 var init_legend_constants = __esm({
   "src/utils/legend-constants.ts"() {
     "use strict";
@@ -2207,6 +2207,10 @@ var init_legend_constants = __esm({
     DEFAULT_W = 0.56;
     EYE_OPEN_PATH = "M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z";
     EYE_CLOSED_PATH = "M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1";
+    CONTROLS_ICON_PATH = "M5.6 1.7L8.4 1.7L7.9 3.6L9.5 4.5L10.9 3.1L12.3 5.6L10.4 6.1L10.4 7.9L12.3 8.4L10.9 10.9L9.5 9.5L7.9 10.4L8.4 12.3L5.6 12.3L6.1 10.4L4.5 9.5L3.1 10.9L1.7 8.4L3.6 7.9L3.6 6.1L1.7 5.6L3.1 3.1L4.5 4.5L6.1 3.6ZM5 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0Z";
+    LEGEND_TOGGLE_DOT_R = LEGEND_DOT_R;
+    LEGEND_TOGGLE_OFF_OPACITY = 0.4;
+    LEGEND_GEAR_PILL_W = 14 + LEGEND_PILL_PAD;
   }
 });
 
@@ -2280,6 +2284,63 @@ function capsuleWidth(name, entries, containerWidth, addonWidth = 0) {
     visibleEntries: entries.length
   };
 }
+function controlsGroupCapsuleWidth(toggles) {
+  let w = LEGEND_CAPSULE_PAD * 2 + LEGEND_GEAR_PILL_W + 4;
+  for (const t of toggles) {
+    w += LEGEND_TOGGLE_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(t.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+  }
+  return w;
+}
+function buildControlsGroupLayout(config, state) {
+  const cg = config.controlsGroup;
+  if (!cg || cg.toggles.length === 0) return void 0;
+  const expanded = !!state.controlsExpanded;
+  const pillH = LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2;
+  if (!expanded) {
+    return {
+      x: 0,
+      y: 0,
+      width: LEGEND_GEAR_PILL_W,
+      height: LEGEND_HEIGHT,
+      expanded: false,
+      pill: { x: 0, y: 0, width: LEGEND_GEAR_PILL_W, height: LEGEND_HEIGHT },
+      toggles: []
+    };
+  }
+  const capsuleW = controlsGroupCapsuleWidth(cg.toggles);
+  const toggleLayouts = [];
+  let tx = LEGEND_CAPSULE_PAD + LEGEND_GEAR_PILL_W + 4;
+  for (const toggle of cg.toggles) {
+    const dotCx = tx + LEGEND_TOGGLE_DOT_R;
+    const dotCy = LEGEND_HEIGHT / 2;
+    const textX = tx + LEGEND_TOGGLE_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP;
+    const textY = LEGEND_HEIGHT / 2;
+    toggleLayouts.push({
+      id: toggle.id,
+      label: toggle.label,
+      active: toggle.active,
+      dotCx,
+      dotCy,
+      textX,
+      textY
+    });
+    tx += LEGEND_TOGGLE_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + measureLegendText(toggle.label, LEGEND_ENTRY_FONT_SIZE) + LEGEND_ENTRY_TRAIL;
+  }
+  return {
+    x: 0,
+    y: 0,
+    width: capsuleW,
+    height: LEGEND_HEIGHT,
+    expanded: true,
+    pill: {
+      x: LEGEND_CAPSULE_PAD,
+      y: LEGEND_CAPSULE_PAD,
+      width: LEGEND_GEAR_PILL_W - LEGEND_CAPSULE_PAD * 2,
+      height: pillH
+    },
+    toggles: toggleLayouts
+  };
+}
 function computeLegendLayout(config, state, containerWidth) {
   const { groups, controls: configControls, mode } = config;
   const isExport = mode === "inline";
@@ -2294,8 +2355,9 @@ function computeLegendLayout(config, state, containerWidth) {
       activeCapsule: void 0
     };
   }
+  const controlsGroupLayout = isExport ? void 0 : buildControlsGroupLayout(config, state);
   const visibleGroups = config.showEmptyGroups ? groups : groups.filter((g) => g.entries.length > 0);
-  if (visibleGroups.length === 0 && (!configControls || configControls.length === 0)) {
+  if (visibleGroups.length === 0 && (!configControls || configControls.length === 0) && !controlsGroupLayout) {
     return {
       height: 0,
       width: 0,
@@ -2359,7 +2421,8 @@ function computeLegendLayout(config, state, containerWidth) {
     if (totalControlsW > 0) totalControlsW -= CONTROL_GAP;
   }
   const controlsSpace = totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0;
-  const groupAvailW = containerWidth - controlsSpace;
+  const gearSpace = controlsGroupLayout ? controlsGroupLayout.width + LEGEND_GROUP_GAP : 0;
+  const groupAvailW = containerWidth - controlsSpace - gearSpace;
   const pills = [];
   let activeCapsule;
   for (const g of visibleGroups) {
@@ -2368,7 +2431,7 @@ function computeLegendLayout(config, state, containerWidth) {
     if (isActive) {
       activeCapsule = buildCapsuleLayout(
         g,
-        containerWidth,
+        groupAvailW,
         config.capsulePillAddonWidth ?? 0
       );
     } else {
@@ -2391,7 +2454,8 @@ function computeLegendLayout(config, state, containerWidth) {
     groupAvailW,
     containerWidth,
     totalControlsW,
-    alignLeft
+    alignLeft,
+    controlsGroupLayout
   );
   const height = rows.length * LEGEND_HEIGHT;
   const width = containerWidth;
@@ -2401,7 +2465,8 @@ function computeLegendLayout(config, state, containerWidth) {
     rows,
     activeCapsule,
     controls: controlLayouts,
-    pills
+    pills,
+    controlsGroup: controlsGroupLayout
   };
 }
 function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
@@ -2465,19 +2530,27 @@ function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
     addonX: addonWidth > 0 ? LEGEND_CAPSULE_PAD + pw + 4 : void 0
   };
 }
-function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW, alignLeft = false) {
+function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth, totalControlsW, alignLeft = false, controlsGroup) {
   const rows = [];
   const groupItems = [];
   if (activeCapsule) groupItems.push(activeCapsule);
   groupItems.push(...pills);
+  const gearW = controlsGroup ? controlsGroup.width + LEGEND_GROUP_GAP : 0;
   let currentRowItems = [];
   let currentRowW = 0;
   let rowY = 0;
   for (const item of groupItems) {
     const itemW = item.width + LEGEND_GROUP_GAP;
     if (currentRowW + item.width > groupAvailW && currentRowItems.length > 0) {
-      if (!alignLeft)
-        centerRowItems(currentRowItems, containerWidth, totalControlsW);
+      if (!alignLeft) {
+        const rowGearW = rows.length === 0 ? gearW : 0;
+        centerRowItems(
+          currentRowItems,
+          containerWidth,
+          totalControlsW,
+          rowGearW
+        );
+      }
       rows.push({ y: rowY, items: currentRowItems });
       rowY += LEGEND_HEIGHT;
       currentRowItems = [];
@@ -2505,19 +2578,32 @@ function layoutRows(activeCapsule, pills, controls, groupAvailW, containerWidth,
     }
   }
   if (currentRowItems.length > 0) {
-    centerRowItems(currentRowItems, containerWidth, totalControlsW);
+    centerRowItems(currentRowItems, containerWidth, totalControlsW, gearW);
     rows.push({ y: rowY, items: currentRowItems });
   }
+  if (controlsGroup) {
+    const row0Items = rows[0]?.items ?? [];
+    const groupItemsInRow0 = row0Items.filter(
+      (it) => "groupName" in it
+    );
+    if (groupItemsInRow0.length > 0) {
+      const last = groupItemsInRow0[groupItemsInRow0.length - 1];
+      controlsGroup.x = last.x + last.width + LEGEND_GROUP_GAP;
+    } else {
+      controlsGroup.x = 0;
+    }
+    controlsGroup.y = 0;
+  }
   if (rows.length === 0) {
     rows.push({ y: 0, items: [] });
   }
   return rows;
 }
-function centerRowItems(items, containerWidth, totalControlsW) {
+function centerRowItems(items, containerWidth, totalControlsW, controlsGroupW = 0) {
   const groupItems = items.filter((it) => "groupName" in it);
   if (groupItems.length === 0) return;
   const totalGroupW = groupItems.reduce((s, it) => s + it.width, 0) + (groupItems.length - 1) * LEGEND_GROUP_GAP;
-  const availW = containerWidth - (totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0);
+  const availW = containerWidth - (totalControlsW > 0 ? totalControlsW + LEGEND_GROUP_GAP * 2 : 0) - controlsGroupW;
   const offset = Math.max(0, (availW - totalGroupW) / 2);
   let x = offset;
   for (const item of groupItems) {
@@ -2575,6 +2661,17 @@ function renderLegendD3(container, config, state, palette, isDark, callbacks, co
     for (const pill of currentLayout.pills) {
       renderPill(legendG, pill, palette, groupBg, callbacks);
     }
+    if (currentLayout.controlsGroup) {
+      renderControlsGroup(
+        legendG,
+        currentLayout.controlsGroup,
+        palette,
+        groupBg,
+        pillBorder,
+        callbacks,
+        config
+      );
+    }
     for (const ctrl of currentLayout.controls) {
       renderControl(
         legendG,
@@ -2689,6 +2786,57 @@ function renderControl(parent, ctrl, palette, _groupBg, pillBorder, _isDark, con
     g.on("click", () => onClick());
   }
 }
+function renderControlsGroup(parent, layout, palette, groupBg, pillBorder, callbacks, config) {
+  const g = parent.append("g").attr("transform", `translate(${layout.x},${layout.y})`).attr("data-legend-controls", layout.expanded ? "expanded" : "collapsed").attr("data-export-ignore", "true").style("cursor", "pointer");
+  if (!layout.expanded) {
+    g.append("rect").attr("width", layout.width).attr("height", layout.height).attr("rx", layout.height / 2).attr("fill", groupBg);
+    const iconSize = 14;
+    const iconX = (layout.width - iconSize) / 2;
+    const iconY = (layout.height - iconSize) / 2;
+    g.append("path").attr("d", CONTROLS_ICON_PATH).attr("transform", `translate(${iconX},${iconY})`).attr("fill", palette.textMuted).attr("fill-rule", "evenodd").attr("pointer-events", "none");
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      g.on("click", () => cb());
+    }
+  } else {
+    const pill = layout.pill;
+    g.append("rect").attr("width", layout.width).attr("height", layout.height).attr("rx", LEGEND_HEIGHT / 2).attr("fill", groupBg);
+    const pillG = g.append("g").attr("class", "controls-gear-pill").style("cursor", "pointer");
+    pillG.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
+    pillG.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
+    const iconSize = 14;
+    const iconX = pill.x + (pill.width - iconSize) / 2;
+    const iconY = pill.y + (pill.height - iconSize) / 2;
+    pillG.append("path").attr("d", CONTROLS_ICON_PATH).attr("transform", `translate(${iconX},${iconY})`).attr("fill", palette.text).attr("fill-rule", "evenodd").attr("pointer-events", "none");
+    if (callbacks?.onControlsExpand) {
+      const cb = callbacks.onControlsExpand;
+      pillG.on("click", (event) => {
+        event.stopPropagation();
+        cb();
+      });
+    }
+    const toggles = config?.controlsGroup?.toggles ?? [];
+    for (const tl of layout.toggles) {
+      const toggle = toggles.find((t) => t.id === tl.id);
+      const entryG = g.append("g").attr("data-controls-toggle", tl.id).style("cursor", "pointer");
+      if (tl.active) {
+        entryG.append("circle").attr("cx", tl.dotCx).attr("cy", tl.dotCy).attr("r", LEGEND_TOGGLE_DOT_R).attr("fill", palette.primary ?? palette.text);
+      } else {
+        entryG.append("circle").attr("cx", tl.dotCx).attr("cy", tl.dotCy).attr("r", LEGEND_TOGGLE_DOT_R).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1);
+      }
+      entryG.append("text").attr("x", tl.textX).attr("y", tl.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("opacity", tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY).attr("font-family", FONT_FAMILY).text(tl.label);
+      if (callbacks?.onControlsToggle && toggle) {
+        const cb = callbacks.onControlsToggle;
+        const id = tl.id;
+        const newActive = !tl.active;
+        entryG.on("click", (event) => {
+          event.stopPropagation();
+          cb(id, newActive);
+        });
+      }
+    }
+  }
+}
 var init_legend_d3 = __esm({
   "src/utils/legend-d3.ts"() {
     "use strict";
@@ -3242,7 +3390,13 @@ function parseSequenceDgmo(content) {
       const groupName = groupMatch[1].trim();
       const groupColor = groupMatch[2]?.trim();
       let groupMeta;
-      const afterBracket = groupMatch[3]?.trim() || "";
+      let afterBracket = groupMatch[3]?.trim() || "";
+      let isCollapsed = false;
+      const collapseMatch = afterBracket.match(/^collapse\b/i);
+      if (collapseMatch) {
+        isCollapsed = true;
+        afterBracket = afterBracket.slice(collapseMatch[0].length).trim();
+      }
       if (afterBracket.startsWith("|")) {
         const segments = afterBracket.split("|");
         const meta = parsePipeMetadata(
@@ -3263,7 +3417,8 @@ function parseSequenceDgmo(content) {
         name: groupName,
         participantIds: [],
         lineNumber,
-        ...groupMeta ? { metadata: groupMeta } : {}
+        ...groupMeta ? { metadata: groupMeta } : {},
+        ...isCollapsed ? { collapsed: true } : {}
       };
       result.groups.push(activeGroup);
       continue;
@@ -23449,6 +23604,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
     options?.currentActiveGroup
   );
   let criticalPathActive = false;
+  let dependenciesActive = !!resolved.options.dependencies;
+  let controlsExpanded = false;
   const tagRows = currentSwimlaneGroup ? buildTagLaneRowList(resolved, currentSwimlaneGroup, collapsedLanes) : null;
   const rows = tagRows ?? buildRowList(resolved, collapsedGroups);
   const isTagMode = tagRows !== null;
@@ -23465,9 +23622,11 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const maxLabelLen = Math.max(...allLabels.map((l) => l.length), 10);
   const leftMargin = Math.max(MIN_LEFT_MARGIN, maxLabelLen * 7 + 30);
   const totalRows = rows.length;
+  const hasCriticalPath = resolved.options.criticalPath && resolved.tasks.some((t) => t.isCriticalPath);
+  const hasDependencies = resolved.options.dependencies && resolved.tasks.some((t) => t.task.dependencies.length > 0);
   const title = resolved.options.title;
   const titleHeight = title ? 50 : 20;
-  const tagLegendReserve = resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
+  const tagLegendReserve = resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies ? LEGEND_HEIGHT + 8 : 0;
   const topDateLabelReserve = 22;
   const hasOverheadLabels = resolved.markers.length > 0 || resolved.eras.length > 0;
   const markerLabelReserve = hasOverheadLabels ? 28 : 0;
@@ -23485,10 +23644,9 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   if (title) {
     svg.append("text").attr("x", containerWidth / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
   }
-  const hasCriticalPath = resolved.options.criticalPath && resolved.tasks.some((t) => t.isCriticalPath);
   function drawLegend() {
     svg.selectAll(".gantt-tag-legend-container").remove();
-    if (resolved.tagGroups.length > 0 || hasCriticalPath) {
+    if (resolved.tagGroups.length > 0 || hasCriticalPath || hasDependencies) {
       const legendY = titleHeight;
       renderTagLegend(
         svg,
@@ -23510,16 +23668,38 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           recolorBars();
         },
         () => {
-          criticalPathActive = !criticalPathActive;
+          controlsExpanded = !controlsExpanded;
           drawLegend();
         },
         currentSwimlaneGroup,
         onSwimlaneChange,
         viewMode,
-        resolved.tasks
+        resolved.tasks,
+        controlsExpanded,
+        hasDependencies,
+        dependenciesActive,
+        (toggleId, active) => {
+          if (toggleId === "critical-path") {
+            criticalPathActive = active;
+          } else if (toggleId === "dependencies") {
+            dependenciesActive = active;
+            g.selectAll(
+              ".gantt-dep-arrow, .gantt-dep-arrowhead, .gantt-dep-label"
+            ).attr("display", active ? null : "none");
+          }
+          drawLegend();
+        }
       );
     }
   }
+  function restoreHighlight() {
+    if (criticalPathActive) {
+      applyCriticalPathHighlight(svg, g);
+    } else {
+      svg.attr("data-critical-path-active", null);
+      resetHighlight(g, svg);
+    }
+  }
   function recolorBars() {
     g.selectAll(".gantt-task").each(function() {
       const el = d3Selection10.select(this);
@@ -23645,7 +23825,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           );
         }
       }).on("mouseleave", () => {
-        resetHighlight(g, svg);
+        restoreHighlight();
         hideGanttDateIndicators(g);
       });
       labelG.append("text").attr("x", labelX).attr("y", marginTop + yOffset + BAR_H / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", "11px").attr("font-weight", "bold").attr("fill", laneColor).text(
@@ -23850,7 +24030,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           );
           g.append("text").attr("class", "gantt-milestone-hover-label").attr("x", mx - MILESTONE_SIZE - 4).attr("y", my).attr("dy", "0.35em").attr("text-anchor", "end").attr("font-size", "10px").attr("fill", barColor).attr("font-weight", "600").text(task.label);
         }).on("mouseleave", () => {
-          resetHighlight(g, svg);
+          restoreHighlight();
           hideGanttDateIndicators(g);
           g.selectAll(".gantt-milestone-hover-label").remove();
         });
@@ -23879,11 +24059,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           );
         }).on("mouseleave", () => {
           if (resolved.options.dependencies) {
-            if (criticalPathActive) {
-              applyCriticalPathHighlight(svg, g);
-            } else {
-              resetHighlight(g, svg);
-            }
+            restoreHighlight();
           }
           resetTaskLabels(svg);
           hideGanttDateIndicators(g);
@@ -24198,6 +24374,7 @@ function arrowheadPoints(x, y, size, angle) {
   return `${x},${y} ${x + size * Math.cos(a1)},${y + size * Math.sin(a1)} ${x + size * Math.cos(a2)},${y + size * Math.sin(a2)}`;
 }
 function applyCriticalPathHighlight(svg, chartG) {
+  svg.attr("data-critical-path-active", "true");
   chartG.selectAll(".gantt-task").each(function() {
     const el = d3Selection10.select(this);
     el.attr(
@@ -24250,8 +24427,31 @@ function drawSwimlaneIcon2(parent, x, y, isActive, palette) {
   }
   return iconG;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, optionLineNumbers, onToggle, onToggleCriticalPath, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks) {
-  const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependencies, dependenciesActive) {
+  const toggles = [];
+  if (hasCriticalPath) {
+    toggles.push({
+      id: "critical-path",
+      type: "toggle",
+      label: "Critical Path",
+      active: criticalPathActive,
+      onToggle: () => {
+      }
+    });
+  }
+  if (hasDependencies) {
+    toggles.push({
+      id: "dependencies",
+      type: "toggle",
+      label: "Dependencies",
+      active: dependenciesActive,
+      onToggle: () => {
+      }
+    });
+  }
+  return toggles;
+}
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -24312,16 +24512,17 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     totalW += groupW;
   }
   totalW += Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
-  const cpLabel = "Critical Path";
-  const cpPillW = measureLegendText(cpLabel, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-  if (hasCriticalPath) {
+  const hasControls = hasCriticalPath || hasDependencies;
+  const controlsToggleLabels = [];
+  if (hasCriticalPath) controlsToggleLabels.push({ label: "Critical Path" });
+  if (hasDependencies) controlsToggleLabels.push({ label: "Dependencies" });
+  if (hasControls) {
     if (visibleGroups.length > 0) totalW += LEGEND_GROUP_GAP;
-    totalW += cpPillW;
+    totalW += controlsExpanded ? controlsGroupCapsuleWidth(controlsToggleLabels) : LEGEND_GEAR_PILL_W;
   }
   const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
   const legendX = (containerWidth - totalW) / 2;
   const legendRow = svg.append("g").attr("class", "gantt-tag-legend-container").attr("transform", `translate(${legendX}, ${legendY})`);
-  let cursorX = 0;
   if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
     const iconReserve = showIcon ? LEGEND_ICON_W : 0;
@@ -24333,6 +24534,12 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         entries: entries.map((e) => ({ value: e.value, color: e.color }))
       };
     });
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
     const legendConfig = {
       groups: legendGroups,
       position: {
@@ -24340,13 +24547,23 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
         titleRelation: "below-title"
       },
       mode: "fixed",
-      capsulePillAddonWidth: iconReserve
+      capsulePillAddonWidth: iconReserve,
+      controlsGroup: controlsToggles.length > 0 ? { toggles: controlsToggles } : void 0
     };
-    const legendState = { activeGroup: activeGroupName };
-    const tagGroupsW = visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) + Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    const legendState = {
+      activeGroup: activeGroupName,
+      controlsExpanded
+    };
+    let tagGroupsW = visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) + Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    if (hasControls) {
+      if (visibleGroups.length > 0) tagGroupsW += LEGEND_GROUP_GAP;
+      tagGroupsW += controlsExpanded ? controlsGroupCapsuleWidth(controlsToggleLabels) : LEGEND_GEAR_PILL_W;
+    }
     const tagGroupG = legendRow.append("g");
     const legendCallbacks = {
       onGroupToggle: onToggle,
+      onControlsExpand: onToggleControlsExpand,
+      onControlsToggle,
       onEntryHover: (groupName, entryValue) => {
         const tagKey = groupName.toLowerCase();
         if (entryValue) {
@@ -24423,31 +24640,38 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
       legendCallbacks,
       tagGroupsW
     );
-    for (let i = 0; i < visibleGroups.length; i++) {
-      cursorX += groupWidths[i] + LEGEND_GROUP_GAP;
-    }
+  } else if (hasControls) {
+    const controlsToggles = buildControlsToggles(
+      hasCriticalPath,
+      criticalPathActive,
+      hasDependencies,
+      dependenciesActive
+    );
+    const legendConfig = {
+      groups: [],
+      position: {
+        placement: "top-center",
+        titleRelation: "below-title"
+      },
+      mode: "fixed",
+      controlsGroup: { toggles: controlsToggles }
+    };
+    const tagGroupG = legendRow.append("g");
+    renderLegendD3(
+      tagGroupG,
+      legendConfig,
+      { activeGroup: null, controlsExpanded },
+      palette,
+      isDark,
+      {
+        onControlsExpand: onToggleControlsExpand,
+        onControlsToggle
+      },
+      totalW
+    );
   }
-  if (hasCriticalPath) {
-    const cpLineNum = optionLineNumbers["critical-path"];
-    const cpG = legendRow.append("g").attr("transform", `translate(${cursorX}, 0)`).attr("class", "gantt-legend-critical-path").style("cursor", "pointer").on("click", () => {
-      if (onToggleCriticalPath) onToggleCriticalPath();
-    });
-    if (cpLineNum) cpG.attr("data-line-number", String(cpLineNum));
-    cpG.append("rect").attr("width", cpPillW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", criticalPathActive ? palette.bg : groupBg);
-    if (criticalPathActive) {
-      cpG.append("rect").attr("width", cpPillW).attr("height", LEGEND_HEIGHT).attr("rx", LEGEND_HEIGHT / 2).attr("fill", "none").attr("stroke", mix(palette.textMuted, palette.bg, 50)).attr("stroke-width", 0.75);
-    }
-    cpG.append("text").attr("x", cpPillW / 2).attr("y", LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2).attr("text-anchor", "middle").attr("font-size", `${LEGEND_PILL_FONT_SIZE}px`).attr("font-weight", "500").attr("fill", criticalPathActive ? palette.text : palette.textMuted).text(cpLabel);
-    if (criticalPathActive) {
-      applyCriticalPathHighlight(svg, chartG);
-    }
-    cpG.on("mouseenter", () => {
-      applyCriticalPathHighlight(svg, chartG);
-    }).on("mouseleave", () => {
-      if (!criticalPathActive) {
-        resetHighlightAll(svg, chartG);
-      }
-    });
+  if (criticalPathActive) {
+    applyCriticalPathHighlight(svg, chartG);
   }
 }
 function renderErasAndMarkers(g, svg, resolved, xScale, innerHeight, palette) {
@@ -24915,6 +25139,10 @@ function resetTaskLabels(svg) {
   svg.selectAll(".gantt-task-label").attr("opacity", 1);
 }
 function resetHighlight(g, svg) {
+  if (svg.attr("data-critical-path-active") === "true") {
+    applyCriticalPathHighlight(svg, g);
+    return;
+  }
   g.selectAll(".gantt-task, .gantt-milestone").attr(
     "opacity",
     1
@@ -25186,6 +25414,7 @@ var init_renderer9 = __esm({
     init_d3();
     init_legend_constants();
     init_legend_d3();
+    init_legend_layout();
     init_title_constants();
     BAR_H = 22;
     ROW_GAP = 6;
@@ -25479,6 +25708,109 @@ var init_state_renderer = __esm({
   }
 });
 
+// src/sequence/collapse.ts
+function applyCollapseProjection(parsed, collapsedGroups) {
+  if (collapsedGroups.size === 0) {
+    return {
+      participants: parsed.participants,
+      messages: parsed.messages,
+      elements: parsed.elements,
+      groups: parsed.groups,
+      collapsedGroupIds: /* @__PURE__ */ new Map()
+    };
+  }
+  const memberToGroup = /* @__PURE__ */ new Map();
+  const collapsedGroupNames = /* @__PURE__ */ new Set();
+  for (const group of parsed.groups) {
+    if (collapsedGroups.has(group.lineNumber)) {
+      collapsedGroupNames.add(group.name);
+      for (const memberId of group.participantIds) {
+        memberToGroup.set(memberId, group.name);
+      }
+    }
+  }
+  const participants = [];
+  const insertedGroups = /* @__PURE__ */ new Set();
+  for (const p of parsed.participants) {
+    const groupName = memberToGroup.get(p.id);
+    if (groupName) {
+      if (!insertedGroups.has(groupName)) {
+        insertedGroups.add(groupName);
+        const group = parsed.groups.find(
+          (g) => g.name === groupName && collapsedGroups.has(g.lineNumber)
+        );
+        participants.push({
+          id: groupName,
+          label: groupName,
+          type: "default",
+          lineNumber: group.lineNumber
+        });
+      }
+    } else if (collapsedGroupNames.has(p.id)) {
+    } else {
+      participants.push(p);
+    }
+  }
+  const remap = (id) => memberToGroup.get(id) ?? id;
+  const messages = parsed.messages.map((msg) => ({
+    ...msg,
+    from: remap(msg.from),
+    to: remap(msg.to)
+  }));
+  const elements = remapElements(parsed.elements, memberToGroup);
+  const groups = parsed.groups.filter(
+    (g) => !collapsedGroups.has(g.lineNumber)
+  );
+  return {
+    participants,
+    messages,
+    elements,
+    groups,
+    collapsedGroupIds: memberToGroup
+  };
+}
+function remapElements(elements, memberToGroup) {
+  const remap = (id) => memberToGroup.get(id) ?? id;
+  const result = [];
+  for (const el of elements) {
+    if (isSequenceSection(el)) {
+      result.push(el);
+    } else if (isSequenceNote(el)) {
+      result.push({
+        ...el,
+        participantId: remap(el.participantId)
+      });
+    } else if (isSequenceBlock(el)) {
+      result.push({
+        ...el,
+        children: remapElements(el.children, memberToGroup),
+        elseChildren: remapElements(el.elseChildren, memberToGroup),
+        ...el.elseIfBranches ? {
+          elseIfBranches: el.elseIfBranches.map((branch) => ({
+            ...branch,
+            children: remapElements(branch.children, memberToGroup)
+          }))
+        } : {}
+      });
+    } else {
+      const msg = el;
+      const from = remap(msg.from);
+      const to = remap(msg.to);
+      if (from === to && from !== msg.from && !msg.label) {
+        continue;
+      }
+      result.push({ ...msg, from, to });
+    }
+  }
+  return result;
+}
+var init_collapse3 = __esm({
+  "src/sequence/collapse.ts"() {
+    "use strict";
+    init_parser();
+  }
+});
+
 // src/sequence/tag-resolution.ts
 function propagateGroupTags(participantMeta, groups) {
   for (const group of groups) {
@@ -25934,13 +26266,32 @@ function applyGroupOrdering(participants, groups, messages = []) {
 }
 function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateToLine, options) {
   d3Selection12.select(container).selectAll("*").remove();
-  const { title, messages, elements, groups, options: parsedOptions } = parsed;
+  const { title, options: parsedOptions } = parsed;
+  const effectiveCollapsedGroups = /* @__PURE__ */ new Set();
+  for (const group of parsed.groups) {
+    if (group.collapsed) effectiveCollapsedGroups.add(group.lineNumber);
+  }
+  if (options?.collapsedGroups) {
+    for (const ln of options.collapsedGroups) {
+      if (effectiveCollapsedGroups.has(ln)) {
+        effectiveCollapsedGroups.delete(ln);
+      } else {
+        effectiveCollapsedGroups.add(ln);
+      }
+    }
+  }
+  const collapsed = effectiveCollapsedGroups.size > 0 ? applyCollapseProjection(parsed, effectiveCollapsedGroups) : null;
+  const messages = collapsed ? collapsed.messages : parsed.messages;
+  const elements = collapsed ? collapsed.elements : parsed.elements;
+  const groups = collapsed ? collapsed.groups : parsed.groups;
+  const collapsedGroupIds = collapsed?.collapsedGroupIds ?? /* @__PURE__ */ new Map();
   const collapsedSections = options?.collapsedSections;
   const expandedNoteLines = options?.expandedNoteLines;
   const collapseNotesDisabled = parsedOptions["collapse-notes"]?.toLowerCase() === "no";
   const isNoteExpanded = (note) => expandedNoteLines === void 0 || collapseNotesDisabled || expandedNoteLines.has(note.lineNumber);
+  const sourceParticipants = collapsed ? collapsed.participants : parsed.participants;
   const participants = applyPositionOverrides(
-    applyGroupOrdering(parsed.participants, groups, messages)
+    applyGroupOrdering(sourceParticipants, groups, messages)
   );
   if (participants.length === 0) return;
   const activationsOff = parsedOptions.activations?.toLowerCase() === "off";
@@ -26111,13 +26462,16 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const preSectionMsgIndices = [];
   const sectionRegions = [];
   {
+    const msgLineToIndex = /* @__PURE__ */ new Map();
+    messages.forEach((m, i) => msgLineToIndex.set(m.lineNumber, i));
+    const findMsgIndex = (child) => msgLineToIndex.get(child.lineNumber) ?? -1;
     const collectMsgIndicesFromBlock = (block) => {
       const indices = [];
       for (const child of block.children) {
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
         } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-          const idx = messages.indexOf(child);
+          const idx = findMsgIndex(child);
           if (idx >= 0) indices.push(idx);
         }
       }
@@ -26127,7 +26481,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
             if (isSequenceBlock(child)) {
               indices.push(...collectMsgIndicesFromBlock(child));
             } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-              const idx = messages.indexOf(child);
+              const idx = findMsgIndex(child);
               if (idx >= 0) indices.push(idx);
             }
           }
@@ -26137,7 +26491,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
         } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-          const idx = messages.indexOf(child);
+          const idx = findMsgIndex(child);
           if (idx >= 0) indices.push(idx);
         }
       }
@@ -26152,7 +26506,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       } else if (isSequenceBlock(el)) {
         currentTarget.push(...collectMsgIndicesFromBlock(el));
       } else {
-        const idx = messages.indexOf(el);
+        const idx = findMsgIndex(el);
         if (idx >= 0) currentTarget.push(idx);
       }
     }
@@ -26214,7 +26568,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const titleOffset = title ? TITLE_HEIGHT5 : 0;
   const LEGEND_FIXED_GAP4 = 8;
   const legendTopSpace = parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + LEGEND_FIXED_GAP4 : 0;
-  const groupOffset = groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
+  const groupOffset = parsed.groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY = TOP_MARGIN + titleOffset + legendTopSpace + PARTICIPANT_Y_OFFSET + groupOffset;
   const lifelineStartY0 = participantStartY + PARTICIPANT_BOX_HEIGHT;
   const hasActors = participants.some((p) => p.type === "actor");
@@ -26384,6 +26738,17 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       svgWidth
     );
   }
+  const collapsedGroupNames = /* @__PURE__ */ new Set();
+  const collapsedGroupMeta = /* @__PURE__ */ new Map();
+  for (const group of parsed.groups) {
+    if (effectiveCollapsedGroups.has(group.lineNumber)) {
+      collapsedGroupNames.add(group.name);
+      collapsedGroupMeta.set(group.name, {
+        lineNumber: group.lineNumber,
+        metadata: group.metadata
+      });
+    }
+  }
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
     const memberXs = group.participantIds.map((id) => participantX.get(id)).filter((x) => x !== void 0);
@@ -26400,8 +26765,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       isDark ? 15 : 20
     ) : isDark ? palette.surface : palette.bg;
     const strokeColor = groupTagColor || palette.textMuted;
-    svg.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box").attr("data-group-line", String(group.lineNumber));
-    svg.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").attr("data-group-line", String(group.lineNumber)).text(group.name);
+    const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("cursor", "pointer");
+    groupG.append("title").text("Click to collapse");
+    groupG.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", boxH).attr("rx", 6).attr("fill", fillColor).attr("stroke", strokeColor).attr("stroke-width", 1).attr("stroke-opacity", 0.5).attr("class", "group-box");
+    groupG.append("text").attr("x", minX + 8).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("class", "group-label").text(group.name);
   }
   const lifelineStartY = lifelineStartY0;
   participants.forEach((participant, index) => {
@@ -26410,6 +26777,14 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const pTagValue = tagMap?.participants.get(participant.id);
     const pTagColor = getTagColor(pTagValue);
     const pTagAttr = tagKey && pTagValue ? { key: tagKey, value: pTagValue.toLowerCase() } : void 0;
+    const isCollapsedGroup = collapsedGroupNames.has(participant.id);
+    let effectiveTagColor = pTagColor;
+    if (isCollapsedGroup && !effectiveTagColor) {
+      const meta = collapsedGroupMeta.get(participant.id);
+      if (meta?.metadata && tagKey) {
+        effectiveTagColor = getTagColor(meta.metadata[tagKey]);
+      }
+    }
     renderParticipant(
       svg,
       participant,
@@ -26417,10 +26792,35 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       cy,
       palette,
       isDark,
-      pTagColor,
+      effectiveTagColor,
       pTagAttr
     );
-    const lifelineEl = svg.append("line").attr("x1", cx).attr("y1", lifelineStartY).attr("x2", cx).attr("y2", lifelineStartY + lifelineLength).attr("stroke", pTagColor || palette.textMuted).attr("stroke-width", 1).attr("stroke-dasharray", "6 4").attr("class", "lifeline").attr("data-participant-id", participant.id);
+    if (isCollapsedGroup) {
+      const meta = collapsedGroupMeta.get(participant.id);
+      const drillColor = effectiveTagColor || palette.textMuted;
+      const drillBarH = 6;
+      const boxW = PARTICIPANT_BOX_WIDTH;
+      const fullH = PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
+      const clipId = `clip-drill-group-${participant.id.replace(/[^a-zA-Z0-9-]/g, "-")}`;
+      const participantG = svg.select(
+        `.participant[data-participant-id="${participant.id}"]`
+      );
+      participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("cursor", "pointer");
+      participantG.append("title").text("Click to expand");
+      const pFill = effectiveTagColor ? mix(
+        effectiveTagColor,
+        isDark ? palette.surface : palette.bg,
+        isDark ? 30 : 40
+      ) : isDark ? mix(palette.overlay, palette.surface, 50) : mix(palette.bg, palette.surface, 50);
+      const pStroke = effectiveTagColor || palette.border;
+      participantG.append("rect").attr("x", -boxW / 2).attr("y", -GROUP_PADDING_TOP).attr("width", boxW).attr("height", fullH).attr("rx", 6).attr("fill", pFill).attr("stroke", pStroke).attr("stroke-width", 1.5);
+      participantG.append("text").attr("x", 0).attr("y", -GROUP_PADDING_TOP + fullH / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", 13).attr("font-weight", 500).text(participant.label);
+      participantG.append("clipPath").attr("id", clipId).append("rect").attr("x", -boxW / 2).attr("y", -GROUP_PADDING_TOP).attr("width", boxW).attr("height", fullH).attr("rx", 6);
+      participantG.append("rect").attr("class", "sequence-drill-bar").attr("x", -boxW / 2).attr("y", -GROUP_PADDING_TOP + fullH - drillBarH).attr("width", boxW).attr("height", drillBarH).attr("fill", drillColor).attr("clip-path", `url(#${clipId})`);
+    }
+    const llY = isCollapsedGroup ? lifelineStartY + GROUP_PADDING_BOTTOM : lifelineStartY;
+    const llColor = isCollapsedGroup ? effectiveTagColor || palette.textMuted : pTagColor || palette.textMuted;
+    const lifelineEl = svg.append("line").attr("x1", cx).attr("y1", llY).attr("x2", cx).attr("y2", lifelineStartY + lifelineLength).attr("stroke", llColor).attr("stroke-width", 1).attr("stroke-dasharray", "6 4").attr("class", "lifeline").attr("data-participant-id", participant.id);
     if (tagKey && pTagValue) {
       lifelineEl.attr(`data-tag-${tagKey}`, pTagValue.toLowerCase());
     }
@@ -26648,23 +27048,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     sectionG.append("rect").attr("x", bandX).attr("y", secY - BAND_HEIGHT / 2).attr("width", bandWidth).attr("height", BAND_HEIGHT).attr("fill", lineColor).attr("opacity", bandOpacity).attr("rx", 2).attr("class", "section-divider");
     const msgCount = sectionMsgCounts.get(sec.lineNumber) ?? 0;
     const labelText = isCollapsed ? `${sec.label} (${msgCount} ${msgCount === 1 ? "message" : "messages"})` : sec.label;
-    const labelColor = isCollapsed ? "#ffffff" : lineColor;
-    const chevronSpace = 14;
     const labelX = (sectionLineX1 + sectionLineX2) / 2;
-    const chevronX = labelX - (labelText.length * 3.5 + 8 + chevronSpace / 2);
-    const chevronY = secY;
-    if (isCollapsed) {
-      sectionG.append("path").attr(
-        "d",
-        `M ${chevronX} ${chevronY - 4} L ${chevronX + 6} ${chevronY} L ${chevronX} ${chevronY + 4} Z`
-      ).attr("fill", labelColor).attr("class", "section-chevron");
-    } else {
-      sectionG.append("path").attr(
-        "d",
-        `M ${chevronX - 1} ${chevronY - 3} L ${chevronX + 7} ${chevronY - 3} L ${chevronX + 3} ${chevronY + 3} Z`
-      ).attr("fill", labelColor).attr("class", "section-chevron");
-    }
-    sectionG.append("text").attr("x", labelX + chevronSpace / 2).attr("y", secY + 4).attr("text-anchor", "middle").attr("fill", labelColor).attr("font-size", 11).attr("font-weight", "bold").attr("class", "section-label").text(labelText);
+    sectionG.append("text").attr("x", labelX).attr("y", secY + 4).attr("text-anchor", "middle").attr("fill", lineColor).attr("font-size", 11).attr("font-weight", "bold").attr("class", "section-label").text(labelText);
   }
   const SELF_CALL_WIDTH = 30;
   const SELF_CALL_HEIGHT = 25;
@@ -26945,6 +27330,7 @@ var init_renderer10 = __esm({
     init_inline_markdown();
     init_fonts();
     init_parser();
+    init_collapse3();
     init_tag_resolution();
     init_tag_groups();
     init_legend_constants();
@@ -32507,6 +32893,7 @@ init_legend_d3();
 init_legend_layout();
 init_d3();
 init_renderer10();
+init_collapse3();
 init_colors();
 init_palettes();
 
@@ -32514,6 +32901,24 @@ init_palettes();
 var import_lz_string = __toESM(require_lz_string(), 1);
 var DEFAULT_BASE_URL = "https://online.diagrammo.app";
 var COMPRESSED_SIZE_LIMIT = 8192;
+function encodeViewState(state) {
+  const keys = Object.keys(state);
+  if (keys.length === 0) return "";
+  return (0, import_lz_string.compressToEncodedURIComponent)(JSON.stringify(state));
+}
+function decodeViewState(encoded) {
+  if (!encoded) return {};
+  try {
+    const json = (0, import_lz_string.decompressFromEncodedURIComponent)(encoded);
+    if (!json) return {};
+    const parsed = JSON.parse(json);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+      return {};
+    return parsed;
+  } catch {
+    return {};
+  }
+}
 function encodeDiagramUrl(dsl, options) {
   const baseUrl = options?.baseUrl ?? DEFAULT_BASE_URL;
   const compressed = (0, import_lz_string.compressToEncodedURIComponent)(dsl);
@@ -32526,23 +32931,17 @@ function encodeDiagramUrl(dsl, options) {
     };
   }
   let hash = `dgmo=${compressed}`;
-  if (options?.viewState?.activeTagGroup) {
-    hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
-  }
-  if (options?.viewState?.collapsedGroups?.length) {
-    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(","))}`;
-  }
-  if (options?.viewState?.swimlaneTagGroup) {
-    hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
-  }
-  if (options?.viewState?.collapsedLanes?.length) {
-    hash += `&cl=${encodeURIComponent(options.viewState.collapsedLanes.join(","))}`;
+  if (options?.viewState) {
+    const vsEncoded = encodeViewState(options.viewState);
+    if (vsEncoded) {
+      hash += `&vs=${vsEncoded}`;
+    }
   }
-  if (options?.viewState?.palette && options.viewState.palette !== "nord") {
-    hash += `&pal=${encodeURIComponent(options.viewState.palette)}`;
+  if (options?.palette && options.palette !== "nord") {
+    hash += `&pal=${encodeURIComponent(options.palette)}`;
   }
-  if (options?.viewState?.theme && options.viewState.theme !== "dark") {
-    hash += `&th=${encodeURIComponent(options.viewState.theme)}`;
+  if (options?.theme && options.theme !== "dark") {
+    hash += `&th=${encodeURIComponent(options.theme)}`;
   }
   if (options?.filename) {
     hash += `&fn=${encodeURIComponent(options.filename)}`;
@@ -32552,6 +32951,8 @@ function encodeDiagramUrl(dsl, options) {
 function decodeDiagramUrl(hash) {
   const empty = { dsl: "", viewState: {} };
   let filename;
+  let palette;
+  let theme;
   if (!hash) return empty;
   let raw = hash;
   if (raw.startsWith("#") || raw.startsWith("?")) {
@@ -32559,38 +32960,31 @@ function decodeDiagramUrl(hash) {
   }
   const parts = raw.split("&");
   let payload = parts[0];
-  const viewState = {};
+  let viewState = {};
   for (let i = 1; i < parts.length; i++) {
     const eq = parts[i].indexOf("=");
     if (eq === -1) continue;
     const key = parts[i].slice(0, eq);
-    const val = decodeURIComponent(parts[i].slice(eq + 1));
-    if (key === "tag" && val) {
-      viewState.activeTagGroup = val;
-    }
-    if (key === "cg" && val) {
-      viewState.collapsedGroups = val.split(",").filter(Boolean);
-    }
-    if (key === "swim" && val) {
-      viewState.swimlaneTagGroup = val;
+    const val = parts[i].slice(eq + 1);
+    if (key === "vs" && val) {
+      viewState = decodeViewState(val);
     }
-    if (key === "cl" && val) {
-      viewState.collapsedLanes = val.split(",").filter(Boolean);
+    if (key === "pal" && val) palette = decodeURIComponent(val);
+    if (key === "th") {
+      const decoded = decodeURIComponent(val);
+      if (decoded === "light" || decoded === "dark") theme = decoded;
     }
-    if (key === "pal" && val) viewState.palette = val;
-    if (key === "th" && (val === "light" || val === "dark"))
-      viewState.theme = val;
-    if (key === "fn" && val) filename = val;
+    if (key === "fn" && val) filename = decodeURIComponent(val);
   }
   if (payload.startsWith("dgmo=")) {
     payload = payload.slice(5);
   }
-  if (!payload) return { dsl: "", viewState, filename };
+  if (!payload) return { dsl: "", viewState, palette, theme, filename };
   try {
     const result = (0, import_lz_string.decompressFromEncodedURIComponent)(payload);
-    return { dsl: result ?? "", viewState, filename };
+    return { dsl: result ?? "", viewState, palette, theme, filename };
   } catch {
-    return { dsl: "", viewState, filename };
+    return { dsl: "", viewState, palette, theme, filename };
   }
 }
 
@@ -33350,6 +33744,7 @@ export {
   RECOGNIZED_COLOR_NAMES,
   RULE_COUNT,
   addDurationToDate,
+  applyCollapseProjection,
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
@@ -33379,8 +33774,10 @@ export {
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
+  decodeViewState,
   draculaPalette,
   encodeDiagramUrl,
+  encodeViewState,
   extractDiagramSymbols,
   extractTagDeclarations,
   formatDateLabel,