@diagrammo/dgmo 0.8.18 → 0.8.20

package/dist/index.js

@@ -32,8 +32,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 
 // src/diagnostics.ts
-function makeDgmoError(line10, message, severity = "error") {
-  return { line: line10, message, severity };
+function makeDgmoError(line10, message, severity = "error", code) {
+  return code !== void 0 ? { line: line10, message, severity, code } : { line: line10, message, severity };
 }
 function formatDgmoError(err) {
   return err.line > 0 ? `Line ${err.line}: ${err.message}` : err.message;
@@ -74,74 +74,227 @@ var init_diagnostics = __esm({
   }
 });
 
-// src/fonts.ts
-var FONT_FAMILY;
-var init_fonts = __esm({
-  "src/fonts.ts"() {
+// src/colors.ts
+function isRecognizedColorName(name) {
+  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
+}
+function resolveColor(color, palette) {
+  if (!color) return null;
+  if (color.startsWith("#")) return null;
+  const lower = color.toLowerCase();
+  if (!isRecognizedColorName(lower)) return null;
+  if (palette) {
+    const named = palette.colors[lower];
+    if (named) return named;
+  }
+  return colorNames[lower];
+}
+function resolveColorWithDiagnostic(color, line10, diagnostics, palette) {
+  const resolved = resolveColor(color, palette);
+  if (resolved !== null) return resolved;
+  const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
+  const suggestion = hint ? ` ${hint}` : "";
+  diagnostics.push(
+    makeDgmoError(
+      line10,
+      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
+      "warning"
+    )
+  );
+  return void 0;
+}
+var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
+var init_colors = __esm({
+  "src/colors.ts"() {
     "use strict";
-    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
+    init_diagnostics();
+    nord = {
+      // Polar Night (dark)
+      nord0: "#2e3440",
+      nord1: "#3b4252",
+      nord2: "#434c5e",
+      nord3: "#4c566a",
+      // Snow Storm (light)
+      nord4: "#d8dee9",
+      nord5: "#e5e9f0",
+      nord6: "#eceff4",
+      // Frost (accent blues)
+      nord7: "#8fbcbb",
+      nord8: "#88c0d0",
+      nord9: "#81a1c1",
+      nord10: "#5e81ac",
+      // Aurora (colors)
+      nord11: "#bf616a",
+      // red
+      nord12: "#d08770",
+      // orange
+      nord13: "#ebcb8b",
+      // yellow
+      nord14: "#a3be8c",
+      // green
+      nord15: "#b48ead"
+      // purple
+    };
+    colorNames = {
+      red: nord.nord11,
+      orange: nord.nord12,
+      yellow: nord.nord13,
+      green: nord.nord14,
+      blue: nord.nord10,
+      purple: nord.nord15,
+      teal: nord.nord7,
+      cyan: nord.nord8,
+      gray: nord.nord3,
+      black: nord.nord0,
+      white: nord.nord6
+    };
+    RECOGNIZED_COLOR_NAMES = Object.freeze([
+      "red",
+      "orange",
+      "yellow",
+      "green",
+      "blue",
+      "purple",
+      "teal",
+      "cyan",
+      "gray",
+      "black",
+      "white"
+    ]);
+    seriesColors = [
+      nord.nord10,
+      // blue
+      nord.nord14,
+      // green
+      nord.nord13,
+      // yellow
+      nord.nord12,
+      // orange
+      nord.nord15,
+      // purple
+      nord.nord11,
+      // red
+      nord.nord7,
+      // teal
+      nord.nord8
+      // light blue
+    ];
   }
 });
 
-// src/branding.ts
-var branding_exports = {};
-__export(branding_exports, {
-  injectBranding: () => injectBranding
-});
-function injectBranding(svgHtml, mutedColor) {
-  if (!svgHtml) return svgHtml;
-  const brandingText = `<text x="0" y="0" font-size="10" font-family="${FONT_FAMILY}" fill="${mutedColor}" opacity="0.5" text-anchor="end">diagrammo.app</text>`;
-  const vbMatch = svgHtml.match(/viewBox="([^"]+)"/);
-  const heightAttrMatch = svgHtml.match(/height="([^"]+)"/);
-  if (vbMatch) {
-    const parts = vbMatch[1].split(/\s+/).map(Number);
-    if (parts.length === 4) {
-      const [vx, vy, vw, vh] = parts;
-      const newVh = vh + BRANDING_HEIGHT;
-      const textX = vx + vw - 4;
-      const textY = vy + vh + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-      let result = svgHtml.replace(
-        /viewBox="[^"]+"/,
-        `viewBox="${vx} ${vy} ${vw} ${newVh}"`
-      );
-      if (heightAttrMatch) {
-        const oldH = parseFloat(heightAttrMatch[1]);
-        if (!isNaN(oldH)) {
-          result = result.replace(
-            `height="${heightAttrMatch[1]}"`,
-            `height="${oldH + BRANDING_HEIGHT}"`
-          );
-        }
-      }
-      result = result.replace("</svg>", `${positioned}</svg>`);
-      return result;
-    }
+// src/utils/arrows.ts
+function validateLabelCharacters(label, lineNumber) {
+  const out = [];
+  if (label.includes("->") || label.includes("~>")) {
+    out.push(
+      makeDgmoError(
+        lineNumber,
+        'Arrow symbols (-> or ~>) are not allowed inside a label. Move the label after the arrow: "A -> B: uses -> to chain". See "In-Arrow Message Labels" \u2192 Forbidden.',
+        "error",
+        ARROW_DIAGNOSTIC_CODES.ARROW_SUBSTRING_IN_LABEL
+      )
+    );
   }
-  if (heightAttrMatch) {
-    const widthMatch = svgHtml.match(/width="([^"]+)"/);
-    const w = widthMatch ? parseFloat(widthMatch[1]) : 800;
-    const h = parseFloat(heightAttrMatch[1]);
-    if (!isNaN(h) && !isNaN(w)) {
-      const textX = w - 4;
-      const textY = h + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-      let result = svgHtml.replace(
-        `height="${heightAttrMatch[1]}"`,
-        `height="${h + BRANDING_HEIGHT}"`
+  for (const ch of label) {
+    const cp = ch.codePointAt(0);
+    const isC0 = cp >= 0 && cp <= 31 && cp !== 9;
+    const isDel = cp === 127;
+    if (isC0 || isDel) {
+      const hex = cp.toString(16).toUpperCase().padStart(4, "0");
+      out.push(
+        makeDgmoError(
+          lineNumber,
+          `Label contains a control character (U+${hex}). Remove it and use plain text.`,
+          "error",
+          ARROW_DIAGNOSTIC_CODES.CONTROL_CHAR_IN_LABEL
+        )
       );
-      result = result.replace("</svg>", `${positioned}</svg>`);
-      return result;
+      break;
     }
   }
-  return svgHtml;
+  return out;
+}
+function parseInArrowLabel(rawLabel, lineNumber) {
+  const trimmed = rawLabel.trim();
+  if (trimmed.length === 0) {
+    return { label: void 0, diagnostics: [] };
+  }
+  const diagnostics = validateLabelCharacters(trimmed, lineNumber);
+  return { label: trimmed, diagnostics };
+}
+function matchColorParens(content) {
+  const m = content.match(/^\(([A-Za-z]+)\)$/);
+  if (!m) return null;
+  const candidate = m[1].toLowerCase();
+  if (RECOGNIZED_COLOR_NAMES.includes(candidate)) {
+    return candidate;
+  }
+  return null;
+}
+function parseArrow(line10) {
+  if (BIDI_SYNC_RE.test(line10) || BIDI_ASYNC_RE.test(line10)) {
+    return {
+      error: "Bidirectional arrows are no longer supported. Use two separate lines: 'A -msg-> B' and 'B -msg-> A'"
+    };
+  }
+  if (RETURN_SYNC_LABELED_RE.test(line10) || RETURN_ASYNC_LABELED_RE.test(line10)) {
+    const m = line10.match(RETURN_SYNC_LABELED_RE) ?? line10.match(RETURN_ASYNC_LABELED_RE);
+    const from = m[3];
+    const to = m[1];
+    const label = m[2].trim();
+    return {
+      error: `Left-pointing arrows are no longer supported. Write '${from} -${label}-> ${to}' instead`
+    };
+  }
+  const patterns = [
+    { re: SYNC_LABELED_RE, async: false },
+    { re: ASYNC_LABELED_RE, async: true }
+  ];
+  for (const { re, async: isAsync } of patterns) {
+    const m = line10.match(re);
+    if (!m) continue;
+    const label = m[2].trim();
+    if (!label) return null;
+    return {
+      from: m[1],
+      to: m[3],
+      label,
+      async: isAsync
+    };
+  }
+  return null;
 }
-var BRANDING_HEIGHT;
-var init_branding = __esm({
-  "src/branding.ts"() {
+var ARROW_DIAGNOSTIC_CODES, SYNC_LABELED_RE, ASYNC_LABELED_RE, RETURN_SYNC_LABELED_RE, RETURN_ASYNC_LABELED_RE, BIDI_SYNC_RE, BIDI_ASYNC_RE;
+var init_arrows = __esm({
+  "src/utils/arrows.ts"() {
     "use strict";
-    init_fonts();
-    BRANDING_HEIGHT = 20;
+    init_diagnostics();
+    init_colors();
+    ARROW_DIAGNOSTIC_CODES = {
+      /** Active: label contains `->` or `~>` substring (TD-13). */
+      ARROW_SUBSTRING_IN_LABEL: "E_ARROW_SUBSTRING_IN_LABEL",
+      /** Active: label contains a forbidden control character (TD-14). */
+      CONTROL_CHAR_IN_LABEL: "E_CONTROL_CHAR_IN_LABEL",
+      /** Reserved: not currently emitted by any parser. See JSDoc above. */
+      TRAILING_ARROW_TEXT: "E_TRAILING_ARROW_TEXT",
+      /** Reserved: not currently emitted by any parser. See JSDoc above. */
+      MIXED_ARROW_DELIMITERS: "E_MIXED_ARROW_DELIMITERS"
+    };
+    SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
+    ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;
+    RETURN_SYNC_LABELED_RE = /^(.+?)\s*<-(.+)-\s*(.+)$/;
+    RETURN_ASYNC_LABELED_RE = /^(.+?)\s*<~(.+)~\s*(.+)$/;
+    BIDI_SYNC_RE = /^(.+?)\s*<-(.+)->\s*(.+)$/;
+    BIDI_ASYNC_RE = /^(.+?)\s*<~(.+)~>\s*(.+)$/;
+  }
+});
+
+// src/fonts.ts
+var FONT_FAMILY;
+var init_fonts = __esm({
+  "src/fonts.ts"() {
+    "use strict";
+    FONT_FAMILY = "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
   }
 });
 
@@ -322,110 +475,158 @@ var init_label_layout = __esm({
   }
 });
 
-// src/colors.ts
-function isRecognizedColorName(name) {
-  return Object.prototype.hasOwnProperty.call(colorNames, name.toLowerCase());
+// src/utils/time-ticks.ts
+function fractionalYearToDate(frac) {
+  const year = Math.floor(frac);
+  const remainder = frac - year;
+  const monthFrac = remainder * 12;
+  const month = Math.floor(monthFrac);
+  const monthRemainder = remainder - month / 12;
+  const dayFrac = monthRemainder * 365;
+  const day = Math.floor(dayFrac) + 1;
+  const dayRemainder = dayFrac - Math.floor(dayFrac);
+  const hourFrac = dayRemainder * 24;
+  const hour = Math.floor(hourFrac);
+  const minute = Math.round((hourFrac - hour) * 60);
+  return new Date(year, month, day, hour, minute);
 }
-function resolveColor(color, palette) {
-  if (!color) return null;
-  if (color.startsWith("#")) return null;
-  const lower = color.toLowerCase();
-  if (!isRecognizedColorName(lower)) return null;
-  if (palette) {
-    const named = palette.colors[lower];
-    if (named) return named;
-  }
-  return colorNames[lower];
+function dateToFractionalYear(d) {
+  return d.getFullYear() + d.getMonth() / 12 + (d.getDate() - 1) / 365 + d.getHours() / 8760 + d.getMinutes() / 525600;
 }
-function resolveColorWithDiagnostic(color, line10, diagnostics, palette) {
-  const resolved = resolveColor(color, palette);
-  if (resolved !== null) return resolved;
-  const hint = suggest(color, RECOGNIZED_COLOR_NAMES);
-  const suggestion = hint ? ` ${hint}` : "";
-  diagnostics.push(
-    makeDgmoError(
-      line10,
-      `Unknown color "${color}". Allowed: ${RECOGNIZED_COLOR_NAMES.join(", ")}.${suggestion}`,
-      "warning"
-    )
-  );
-  return void 0;
+function computeTimeTicks(domainMin, domainMax, scale, boundaryStart, boundaryEnd, boundaryStartLabel, boundaryEndLabel) {
+  const minYear = Math.floor(domainMin);
+  const maxYear = Math.floor(domainMax);
+  const span = domainMax - domainMin;
+  let ticks = [];
+  const firstYear = Math.ceil(domainMin);
+  const lastYear = Math.floor(domainMax);
+  if (lastYear >= firstYear + 1) {
+    const yearSpan = lastYear - firstYear;
+    let step = 1;
+    if (yearSpan > 80) step = 20;
+    else if (yearSpan > 40) step = 10;
+    else if (yearSpan > 20) step = 5;
+    else if (yearSpan > 10) step = 2;
+    const alignedFirst = Math.ceil(firstYear / step) * step;
+    for (let y = alignedFirst; y <= lastYear; y += step) {
+      ticks.push({ pos: scale(y), label: String(y) });
+    }
+  } else if (span > 0.25) {
+    const crossesYear = maxYear > minYear;
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        const val = y + (m - 1) / 12;
+        if (val > domainMax) break;
+        if (val >= domainMin) {
+          ticks.push({
+            pos: scale(val),
+            label: crossesYear ? `${MONTH_ABBR[m - 1]} '${String(y).slice(-2)}` : MONTH_ABBR[m - 1]
+          });
+        }
+      }
+    }
+  } else if (span <= 685e-6) {
+    let stepMin = 5;
+    const spanHours = span * 8760;
+    if (spanHours > 3) stepMin = 30;
+    else if (spanHours > 1) stepMin = 15;
+    else if (spanHours > 0.5) stepMin = 10;
+    const startDate = fractionalYearToDate(domainMin);
+    startDate.setMinutes(
+      Math.floor(startDate.getMinutes() / stepMin) * stepMin,
+      0,
+      0
+    );
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, "0");
+        const mm = String(startDate.getMinutes()).padStart(2, "0");
+        ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+      }
+      startDate.setMinutes(startDate.getMinutes() + stepMin);
+    }
+  } else if (span <= 822e-5) {
+    let stepHour = 1;
+    const spanHours = span * 8760;
+    if (spanHours > 48) stepHour = 6;
+    else if (spanHours > 24) stepHour = 3;
+    else if (spanHours > 12) stepHour = 2;
+    const singleDay = spanHours <= 24;
+    const startDate = fractionalYearToDate(domainMin);
+    startDate.setHours(
+      Math.floor(startDate.getHours() / stepHour) * stepHour,
+      0,
+      0,
+      0
+    );
+    while (true) {
+      const val = dateToFractionalYear(startDate);
+      if (val > domainMax) break;
+      if (val >= domainMin) {
+        const hh = String(startDate.getHours()).padStart(2, "0");
+        const mm = String(startDate.getMinutes()).padStart(2, "0");
+        if (singleDay) {
+          ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
+        } else {
+          const mon = MONTH_ABBR[startDate.getMonth()];
+          const d = startDate.getDate();
+          ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
+        }
+      }
+      startDate.setHours(startDate.getHours() + stepHour);
+    }
+  } else {
+    for (let y = minYear; y <= maxYear + 1; y++) {
+      for (let m = 1; m <= 12; m++) {
+        for (const d of [1, 8, 15, 22]) {
+          const val = y + (m - 1) / 12 + (d - 1) / 365;
+          if (val > domainMax) break;
+          if (val >= domainMin) {
+            ticks.push({
+              pos: scale(val),
+              label: `${MONTH_ABBR[m - 1]} ${d}`
+            });
+          }
+        }
+      }
+    }
+  }
+  const collisionThreshold = 40;
+  if (boundaryStart !== void 0 && boundaryStartLabel) {
+    const boundaryPos = scale(boundaryStart);
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.unshift({ pos: boundaryPos, label: boundaryStartLabel });
+  }
+  if (boundaryEnd !== void 0 && boundaryEndLabel) {
+    const boundaryPos = scale(boundaryEnd);
+    ticks = ticks.filter(
+      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
+    );
+    ticks.push({ pos: boundaryPos, label: boundaryEndLabel });
+  }
+  return ticks;
 }
-var nord, colorNames, RECOGNIZED_COLOR_NAMES, seriesColors;
-var init_colors = __esm({
-  "src/colors.ts"() {
+var MONTH_ABBR;
+var init_time_ticks = __esm({
+  "src/utils/time-ticks.ts"() {
     "use strict";
-    init_diagnostics();
-    nord = {
-      // Polar Night (dark)
-      nord0: "#2e3440",
-      nord1: "#3b4252",
-      nord2: "#434c5e",
-      nord3: "#4c566a",
-      // Snow Storm (light)
-      nord4: "#d8dee9",
-      nord5: "#e5e9f0",
-      nord6: "#eceff4",
-      // Frost (accent blues)
-      nord7: "#8fbcbb",
-      nord8: "#88c0d0",
-      nord9: "#81a1c1",
-      nord10: "#5e81ac",
-      // Aurora (colors)
-      nord11: "#bf616a",
-      // red
-      nord12: "#d08770",
-      // orange
-      nord13: "#ebcb8b",
-      // yellow
-      nord14: "#a3be8c",
-      // green
-      nord15: "#b48ead"
-      // purple
-    };
-    colorNames = {
-      red: nord.nord11,
-      orange: nord.nord12,
-      yellow: nord.nord13,
-      green: nord.nord14,
-      blue: nord.nord10,
-      purple: nord.nord15,
-      teal: nord.nord7,
-      cyan: nord.nord8,
-      gray: nord.nord3,
-      black: nord.nord0,
-      white: nord.nord6
-    };
-    RECOGNIZED_COLOR_NAMES = Object.freeze([
-      "red",
-      "orange",
-      "yellow",
-      "green",
-      "blue",
-      "purple",
-      "teal",
-      "cyan",
-      "gray",
-      "black",
-      "white"
-    ]);
-    seriesColors = [
-      nord.nord10,
-      // blue
-      nord.nord14,
-      // green
-      nord.nord13,
-      // yellow
-      nord.nord12,
-      // orange
-      nord.nord15,
-      // purple
-      nord.nord11,
-      // red
-      nord.nord7,
-      // teal
-      nord.nord8
-      // light blue
+    MONTH_ABBR = [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
     ];
   }
 });
@@ -554,10 +755,6 @@ function hexToHSLString(hex) {
   const { h, s, l } = hexToHSL(hex);
   return `${h} ${s}% ${l}%`;
 }
-function mute(hex) {
-  const { h, s, l } = hexToHSL(hex);
-  return hslToHex(h, Math.min(s, 35), Math.min(l, 36));
-}
 function tint(hex, amount) {
   const raw = hex.replace("#", "");
   const full = raw.length === 3 ? raw[0] + raw[0] + raw[1] + raw[1] + raw[2] + raw[2] : raw;
@@ -1499,177 +1696,10 @@ var init_monokai = __esm({
   }
 });
 
-// src/palettes/mermaid-bridge.ts
-function buildMermaidThemeVars(colors, isDark) {
-  const c = colors.colors;
-  const accentOrder = [
-    c.blue,
-    c.red,
-    c.green,
-    c.yellow,
-    c.purple,
-    c.orange,
-    c.teal,
-    c.cyan,
-    colors.secondary
-  ];
-  const fills = isDark ? accentOrder.map(mute) : accentOrder;
-  return {
-    // ── Backgrounds ──
-    background: isDark ? colors.overlay : colors.border,
-    mainBkg: colors.surface,
-    // ── Primary/Secondary/Tertiary nodes ──
-    primaryColor: isDark ? colors.primary : colors.surface,
-    primaryTextColor: colors.text,
-    primaryBorderColor: isDark ? colors.secondary : colors.border,
-    secondaryColor: colors.secondary,
-    secondaryTextColor: contrastText(colors.secondary, colors.text, colors.bg),
-    secondaryBorderColor: colors.primary,
-    tertiaryColor: colors.accent,
-    tertiaryTextColor: contrastText(colors.accent, colors.text, colors.bg),
-    tertiaryBorderColor: colors.border,
-    // ── Lines & text ──
-    lineColor: colors.textMuted,
-    textColor: colors.text,
-    // ── Clusters ──
-    clusterBkg: colors.bg,
-    clusterBorder: isDark ? colors.border : colors.textMuted,
-    titleColor: colors.text,
-    // ── Labels ──
-    edgeLabelBackground: "transparent",
-    // ── Notes (sequence diagrams) ──
-    noteBkgColor: colors.bg,
-    noteTextColor: colors.text,
-    noteBorderColor: isDark ? colors.border : colors.textMuted,
-    // ── Actors (sequence diagrams) ──
-    actorBkg: colors.surface,
-    actorTextColor: colors.text,
-    actorBorder: isDark ? colors.border : colors.textMuted,
-    actorLineColor: colors.textMuted,
-    // ── Signals (sequence diagrams) ──
-    signalColor: colors.textMuted,
-    signalTextColor: colors.text,
-    // ── Labels ──
-    labelColor: colors.text,
-    labelTextColor: colors.text,
-    labelBoxBkgColor: colors.surface,
-    labelBoxBorderColor: isDark ? colors.border : colors.textMuted,
-    // ── Loop boxes ──
-    loopTextColor: colors.text,
-    // ── Activation (sequence diagrams) ──
-    activationBkgColor: isDark ? colors.overlay : colors.border,
-    activationBorderColor: isDark ? colors.border : colors.textMuted,
-    // ── Sequence numbers ──
-    sequenceNumberColor: isDark ? colors.text : colors.bg,
-    // ── State diagrams ──
-    labelBackgroundColor: colors.surface,
-    // ── Pie chart (9 slices) ──
-    // Dark mode: use muted fills so light pieSectionTextColor stays readable
-    ...Object.fromEntries(
-      (isDark ? fills : accentOrder).map((col, i) => [`pie${i + 1}`, col])
-    ),
-    pieTitleTextColor: colors.text,
-    pieSectionTextColor: isDark ? colors.text : colors.bg,
-    pieLegendTextColor: colors.text,
-    pieStrokeColor: "transparent",
-    pieOuterStrokeWidth: "0px",
-    pieOuterStrokeColor: "transparent",
-    // ── cScale (9 tiers) — muted in dark mode ──
-    ...Object.fromEntries(fills.map((f, i) => [`cScale${i}`, f])),
-    ...Object.fromEntries(
-      fills.map((_, i) => [
-        `cScaleLabel${i}`,
-        isDark ? colors.text : i < 2 || i > 6 ? colors.bg : colors.text
-      ])
-    ),
-    // ── fillType (8 slots) ──
-    ...Object.fromEntries(
-      [0, 1, 2, 3, 4, 5, 6, 7].map((i) => [
-        `fillType${i}`,
-        fills[i % fills.length]
-      ])
-    ),
-    // ── Journey actors (6 slots) ──
-    ...Object.fromEntries(
-      [c.red, c.green, c.yellow, c.purple, c.orange, c.teal].map((color, i) => [
-        `actor${i}`,
-        color
-      ])
-    ),
-    // ── Flowchart ──
-    nodeBorder: isDark ? colors.border : colors.textMuted,
-    nodeTextColor: colors.text,
-    // ── Gantt ──
-    gridColor: isDark ? colors.textMuted : colors.border,
-    doneTaskBkgColor: c.green,
-    doneTaskBorderColor: isDark ? colors.border : colors.textMuted,
-    activeTaskBkgColor: colors.secondary,
-    activeTaskBorderColor: colors.primary,
-    critBkgColor: c.orange,
-    critBorderColor: c.red,
-    taskBkgColor: colors.surface,
-    taskBorderColor: isDark ? colors.border : colors.textMuted,
-    taskTextColor: contrastText(colors.surface, colors.text, colors.bg),
-    taskTextDarkColor: colors.bg,
-    taskTextLightColor: colors.text,
-    taskTextOutsideColor: colors.text,
-    doneTaskTextColor: contrastText(c.green, colors.text, colors.bg),
-    activeTaskTextColor: contrastText(colors.secondary, colors.text, colors.bg),
-    critTaskTextColor: contrastText(c.orange, colors.text, colors.bg),
-    sectionBkgColor: isDark ? shade(colors.primary, colors.bg, 0.6) : tint(colors.primary, 0.6),
-    altSectionBkgColor: colors.bg,
-    sectionBkgColor2: isDark ? shade(colors.primary, colors.bg, 0.6) : tint(colors.primary, 0.6),
-    todayLineColor: c.yellow,
-    // ── Quadrant ──
-    quadrant1Fill: isDark ? shade(c.green, colors.bg, 0.75) : tint(c.green, 0.75),
-    quadrant2Fill: isDark ? shade(c.blue, colors.bg, 0.75) : tint(c.blue, 0.75),
-    quadrant3Fill: isDark ? shade(c.red, colors.bg, 0.75) : tint(c.red, 0.75),
-    quadrant4Fill: isDark ? shade(c.yellow, colors.bg, 0.75) : tint(c.yellow, 0.75),
-    quadrant1TextFill: colors.text,
-    quadrant2TextFill: colors.text,
-    quadrant3TextFill: colors.text,
-    quadrant4TextFill: colors.text,
-    quadrantPointFill: isDark ? c.cyan : c.blue,
-    quadrantPointTextFill: colors.text,
-    quadrantXAxisTextFill: colors.text,
-    quadrantYAxisTextFill: colors.text,
-    quadrantTitleFill: colors.text,
-    quadrantInternalBorderStrokeFill: colors.border,
-    quadrantExternalBorderStrokeFill: colors.border
-  };
-}
-function buildThemeCSS(palette, isDark) {
-  const base = `
-  .branchLabelBkg { fill: transparent !important; stroke: transparent !important; }
-  .commit-label-bkg { fill: transparent !important; stroke: transparent !important; }
-  .tag-label-bkg { fill: transparent !important; stroke: transparent !important; }
-
-  /* GitGraph: ensure commit and branch label text matches palette */
-  .commit-label { fill: ${palette.text} !important; }
-  .branch-label { fill: ${palette.text} !important; }
-  .tag-label { fill: ${palette.text} !important; }
-`;
-  if (!isDark) return base;
-  return base + `
-  /* Flowchart: ensure node and edge label text is readable */
-  .nodeLabel, .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
-  .edgeLabel { color: ${palette.text} !important; fill: ${palette.text} !important; }
-  .edgeLabel .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
-`;
-}
-var init_mermaid_bridge = __esm({
-  "src/palettes/mermaid-bridge.ts"() {
-    "use strict";
-    init_color_utils();
-  }
-});
-
 // src/palettes/index.ts
 var palettes_exports = {};
 __export(palettes_exports, {
   boldPalette: () => boldPalette,
-  buildMermaidThemeVars: () => buildMermaidThemeVars,
-  buildThemeCSS: () => buildThemeCSS,
   catppuccinPalette: () => catppuccinPalette,
   contrastText: () => contrastText,
   draculaPalette: () => draculaPalette,
@@ -1683,7 +1713,6 @@ __export(palettes_exports, {
   hslToHex: () => hslToHex,
   isValidHex: () => isValidHex,
   monokaiPalette: () => monokaiPalette,
-  mute: () => mute,
   nordPalette: () => nordPalette,
   oneDarkPalette: () => oneDarkPalette,
   registerPalette: () => registerPalette,
@@ -1708,7 +1737,6 @@ var init_palettes = __esm({
     init_tokyo_night();
     init_dracula();
     init_monokai();
-    init_mermaid_bridge();
   }
 });
 
@@ -2100,7 +2128,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 +2235,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 +2312,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 +2383,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 +2449,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 +2459,7 @@ function computeLegendLayout(config, state, containerWidth) {
     if (isActive) {
       activeCapsule = buildCapsuleLayout(
         g,
-        containerWidth,
+        groupAvailW,
         config.capsulePillAddonWidth ?? 0
       );
     } else {
@@ -2391,7 +2482,8 @@ function computeLegendLayout(config, state, containerWidth) {
     groupAvailW,
     containerWidth,
     totalControlsW,
-    alignLeft
+    alignLeft,
+    controlsGroupLayout
   );
   const height = rows.length * LEGEND_HEIGHT;
   const width = containerWidth;
@@ -2401,7 +2493,8 @@ function computeLegendLayout(config, state, containerWidth) {
     rows,
     activeCapsule,
     controls: controlLayouts,
-    pills
+    pills,
+    controlsGroup: controlsGroupLayout
   };
 }
 function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
@@ -2465,19 +2558,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 +2606,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 +2689,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 +2814,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";
@@ -2985,61 +3161,6 @@ var init_participant_inference = __esm({
   }
 });
 
-// src/utils/arrows.ts
-function parseArrow(line10) {
-  if (BIDI_SYNC_RE.test(line10) || BIDI_ASYNC_RE.test(line10)) {
-    return {
-      error: "Bidirectional arrows are no longer supported. Use two separate lines: 'A -msg-> B' and 'B -msg-> A'"
-    };
-  }
-  if (RETURN_SYNC_LABELED_RE.test(line10) || RETURN_ASYNC_LABELED_RE.test(line10)) {
-    const m = line10.match(RETURN_SYNC_LABELED_RE) ?? line10.match(RETURN_ASYNC_LABELED_RE);
-    const from = m[3];
-    const to = m[1];
-    const label = m[2].trim();
-    return {
-      error: `Left-pointing arrows are no longer supported. Write '${from} -${label}-> ${to}' instead`
-    };
-  }
-  const patterns = [
-    { re: SYNC_LABELED_RE, async: false },
-    { re: ASYNC_LABELED_RE, async: true }
-  ];
-  for (const { re, async: isAsync } of patterns) {
-    const m = line10.match(re);
-    if (!m) continue;
-    const label = m[2].trim();
-    if (!label) return null;
-    for (const arrow of ARROW_CHARS) {
-      if (label.includes(arrow)) {
-        return {
-          error: "Arrow characters (->, ~>) are not allowed inside labels"
-        };
-      }
-    }
-    return {
-      from: m[1],
-      to: m[3],
-      label,
-      async: isAsync
-    };
-  }
-  return null;
-}
-var SYNC_LABELED_RE, ASYNC_LABELED_RE, RETURN_SYNC_LABELED_RE, RETURN_ASYNC_LABELED_RE, BIDI_SYNC_RE, BIDI_ASYNC_RE, ARROW_CHARS;
-var init_arrows = __esm({
-  "src/utils/arrows.ts"() {
-    "use strict";
-    SYNC_LABELED_RE = /^(.+?)\s*-(.+)->\s*(.+)$/;
-    ASYNC_LABELED_RE = /^(.+?)\s*~(.+)~>\s*(.+)$/;
-    RETURN_SYNC_LABELED_RE = /^(.+?)\s*<-(.+)-\s*(.+)$/;
-    RETURN_ASYNC_LABELED_RE = /^(.+?)\s*<~(.+)~\s*(.+)$/;
-    BIDI_SYNC_RE = /^(.+?)\s*<-(.+)->\s*(.+)$/;
-    BIDI_ASYNC_RE = /^(.+?)\s*<~(.+)~>\s*(.+)$/;
-    ARROW_CHARS = ["->", "~>"];
-  }
-});
-
 // src/sequence/parser.ts
 var parser_exports = {};
 __export(parser_exports, {
@@ -3242,7 +3363,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 +3390,8 @@ function parseSequenceDgmo(content) {
         name: groupName,
         participantIds: [],
         lineNumber,
-        ...groupMeta ? { metadata: groupMeta } : {}
+        ...groupMeta ? { metadata: groupMeta } : {},
+        ...isCollapsed ? { collapsed: true } : {}
       };
       result.groups.push(activeGroup);
       continue;
@@ -3585,8 +3713,11 @@ function parseSequenceDgmo(content) {
     }
     if (labeledArrow) {
       contentStarted = true;
-      const { from, to, label, async: isAsync } = labeledArrow;
+      const { from, to, label: rawLabel, async: isAsync } = labeledArrow;
       lastMsgFrom = from;
+      const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+      labelResult.diagnostics.forEach((d) => result.diagnostics.push(d));
+      const label = labelResult.label ?? rawLabel;
       const msg = {
         from,
         to,
@@ -3986,42 +4117,52 @@ function parseNodeRef(text, palette) {
 }
 function splitArrows(line10) {
   const segments = [];
-  let lastIndex = 0;
   const arrowPositions = [];
   let searchFrom = 0;
+  let scanFloor = 0;
   while (searchFrom < line10.length) {
     const idx = line10.indexOf("->", searchFrom);
     if (idx === -1) break;
-    let arrowStart = idx;
+    let runStart = idx;
+    while (runStart > scanFloor && line10[runStart - 1] === "-") runStart--;
+    const arrowEnd = idx + 2;
+    let arrowStart;
     let label;
     let color;
-    if (idx > 0 && line10[idx - 1] !== " " && line10[idx - 1] !== "	") {
-      let scanBack = idx - 1;
-      while (scanBack > 0 && line10[scanBack] !== "-") {
-        scanBack--;
-      }
-      if (line10[scanBack] === "-" && (scanBack === 0 || /\s/.test(line10[scanBack - 1]))) {
-        let arrowContent = line10.substring(scanBack + 1, idx);
-        if (arrowContent.endsWith("-"))
-          arrowContent = arrowContent.slice(0, -1);
-        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          color = colorMatch[1].trim();
-          const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-          if (labelPart) label = labelPart;
-        } else {
-          const labelPart = arrowContent.trim();
-          if (labelPart) label = labelPart;
-        }
-        arrowStart = scanBack;
+    let openingStart = -1;
+    for (let i = scanFloor; i < runStart; i++) {
+      if (line10[i] !== "-") continue;
+      const prevIsWsOrFloor = i === 0 || i === scanFloor || /\s/.test(line10[i - 1]);
+      if (prevIsWsOrFloor) {
+        openingStart = i;
+        break;
       }
     }
-    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
-    searchFrom = idx + 2;
+    if (openingStart !== -1) {
+      let openingEnd = openingStart;
+      while (openingEnd < runStart && line10[openingEnd] === "-") openingEnd++;
+      const arrowContent = line10.substring(openingEnd, runStart);
+      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        color = colorMatch[1].trim();
+        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
+        if (labelPart) label = labelPart;
+      } else {
+        const labelPart = arrowContent.trim();
+        if (labelPart) label = labelPart;
+      }
+      arrowStart = openingStart;
+    } else {
+      arrowStart = runStart;
+    }
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    searchFrom = arrowEnd;
+    scanFloor = arrowEnd;
   }
   if (arrowPositions.length === 0) {
     return [line10];
   }
+  let lastIndex = 0;
   for (let i = 0; i < arrowPositions.length; i++) {
     const arrow = arrowPositions[i];
     const beforeText = line10.substring(lastIndex, arrow.start).trim();
@@ -4044,20 +4185,26 @@ function splitArrows(line10) {
 }
 function parseArrowToken(token, palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
-  if (colorOnly) {
-    return {
-      color: resolveColorWithDiagnostic(
-        colorOnly[1].trim(),
-        lineNumber,
-        diagnostics,
-        palette
-      )
-    };
+  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
+  if (bareParen) {
+    const colorName = matchColorParens(bareParen[1]);
+    if (colorName) {
+      return {
+        color: resolveColorWithDiagnostic(
+          colorName,
+          lineNumber,
+          diagnostics,
+          palette
+        )
+      };
+    }
   }
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
-    const label = m[1]?.trim() || void 0;
+    const rawLabel = m[1] ?? "";
+    const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let color = m[2] ? resolveColorWithDiagnostic(
       m[2].trim(),
       lineNumber,
@@ -4285,6 +4432,7 @@ var init_flowchart_parser = __esm({
     "use strict";
     init_colors();
     init_diagnostics();
+    init_arrows();
     init_parsing();
     NODE_ID_RE = /^([a-zA-Z_][\w-]*)[\s([</{]/;
   }
@@ -4300,35 +4448,45 @@ function splitArrows2(line10) {
   const segments = [];
   const arrowPositions = [];
   let searchFrom = 0;
+  let scanFloor = 0;
   while (searchFrom < line10.length) {
     const idx = line10.indexOf("->", searchFrom);
     if (idx === -1) break;
-    let arrowStart = idx;
+    let runStart = idx;
+    while (runStart > scanFloor && line10[runStart - 1] === "-") runStart--;
+    const arrowEnd = idx + 2;
+    let arrowStart;
     let label;
     let color;
-    if (idx > 0 && line10[idx - 1] !== " " && line10[idx - 1] !== "	") {
-      let scanBack = idx - 1;
-      while (scanBack > 0 && line10[scanBack] !== "-") {
-        scanBack--;
-      }
-      if (line10[scanBack] === "-" && (scanBack === 0 || /\s/.test(line10[scanBack - 1]))) {
-        let arrowContent = line10.substring(scanBack + 1, idx);
-        if (arrowContent.endsWith("-"))
-          arrowContent = arrowContent.slice(0, -1);
-        const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
-        if (colorMatch) {
-          color = colorMatch[1].trim();
-          const labelPart = arrowContent.substring(0, colorMatch.index).trim();
-          if (labelPart) label = labelPart;
-        } else {
-          const labelPart = arrowContent.trim();
-          if (labelPart) label = labelPart;
-        }
-        arrowStart = scanBack;
+    let openingStart = -1;
+    for (let i = scanFloor; i < runStart; i++) {
+      if (line10[i] !== "-") continue;
+      const prevIsWsOrFloor = i === 0 || i === scanFloor || /\s/.test(line10[i - 1]);
+      if (prevIsWsOrFloor) {
+        openingStart = i;
+        break;
       }
     }
-    arrowPositions.push({ start: arrowStart, end: idx + 2, label, color });
-    searchFrom = idx + 2;
+    if (openingStart !== -1) {
+      let openingEnd = openingStart;
+      while (openingEnd < runStart && line10[openingEnd] === "-") openingEnd++;
+      const arrowContent = line10.substring(openingEnd, runStart);
+      const colorMatch = arrowContent.match(/\(([^)]+)\)\s*$/);
+      if (colorMatch) {
+        color = colorMatch[1].trim();
+        const labelPart = arrowContent.substring(0, colorMatch.index).trim();
+        if (labelPart) label = labelPart;
+      } else {
+        const labelPart = arrowContent.trim();
+        if (labelPart) label = labelPart;
+      }
+      arrowStart = openingStart;
+    } else {
+      arrowStart = runStart;
+    }
+    arrowPositions.push({ start: arrowStart, end: arrowEnd, label, color });
+    searchFrom = arrowEnd;
+    scanFloor = arrowEnd;
   }
   if (arrowPositions.length === 0) return [line10];
   let lastIndex = 0;
@@ -4350,19 +4508,26 @@ function splitArrows2(line10) {
 }
 function parseArrowToken2(token, palette, lineNumber, diagnostics) {
   if (token === "->") return {};
-  const colorOnly = token.match(/^-\(([^)]+)\)->$/);
-  if (colorOnly)
-    return {
-      color: resolveColorWithDiagnostic(
-        colorOnly[1].trim(),
-        lineNumber,
-        diagnostics,
-        palette
-      )
-    };
+  const bareParen = token.match(/^-(\([A-Za-z]+\))->$/);
+  if (bareParen) {
+    const colorName = matchColorParens(bareParen[1]);
+    if (colorName) {
+      return {
+        color: resolveColorWithDiagnostic(
+          colorName,
+          lineNumber,
+          diagnostics,
+          palette
+        )
+      };
+    }
+  }
   const m = token.match(/^-(.+?)(?:\(([^)]+)\))?->$/);
   if (m) {
-    const label = m[1]?.trim() || void 0;
+    const rawLabel = m[1] ?? "";
+    const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     const color = m[2] ? resolveColorWithDiagnostic(
       m[2].trim(),
       lineNumber,
@@ -4603,6 +4768,7 @@ var init_state_parser = __esm({
     "use strict";
     init_colors();
     init_diagnostics();
+    init_arrows();
     init_parsing();
     PSEUDOSTATE_ID = "pseudostate:[*]";
     PSEUDOSTATE_LABEL = "[*]";
@@ -4759,6 +4925,11 @@ function parseClassDiagram(content, palette) {
         const targetName = indentRel[2];
         const label = indentRel[3]?.trim();
         getOrCreateClass(targetName, lineNumber);
+        if (label) {
+          result.diagnostics.push(
+            ...validateLabelCharacters(label, lineNumber)
+          );
+        }
         result.relationships.push({
           source: currentClass.id,
           target: classId(targetName),
@@ -4933,6 +5104,7 @@ var init_parser2 = __esm({
     "use strict";
     init_colors();
     init_diagnostics();
+    init_arrows();
     init_parsing();
     CLASS_DECL_RE = /^(?:(abstract|interface|enum)\s+)?([A-Z][A-Za-z0-9_]*)(?:\s+(extends|implements)\s+([A-Z][A-Za-z0-9_]*))?(?:\s+\[(abstract|interface|enum)\])?(?:\s+\(([^)]+)\))?\s*$/;
     INDENT_REL_ARROW_RE = /^(--\|>|\.\.\|>|\*--|o--|\.\.>|->)\s*([A-Z][A-Za-z0-9_]*)(?:\s+:?\s*(.+))?$/;
@@ -4972,12 +5144,18 @@ function parseRelationship(trimmed, lineNumber, pushError) {
     const fromCard = parseCardSide(sym[2]);
     const toCard = parseCardSide(sym[3]);
     if (fromCard && toCard) {
+      const label = sym[5]?.trim();
+      if (label) {
+        validateLabelCharacters(label, lineNumber).forEach(
+          (d) => pushError(d.line, d.message)
+        );
+      }
       return {
         source: sym[1],
         target: sym[4],
         from: fromCard,
         to: toCard,
-        label: sym[5]?.trim()
+        label
       };
     }
   }
@@ -5140,11 +5318,17 @@ function parseERDiagram(content, palette) {
         if (fromCard && toCard) {
           const targetName = indentRel[4];
           getOrCreateTable(targetName, lineNumber);
+          const rawLabel = indentRel[2]?.trim();
+          if (rawLabel) {
+            result.diagnostics.push(
+              ...validateLabelCharacters(rawLabel, lineNumber)
+            );
+          }
           result.relationships.push({
             source: currentTable.id,
             target: tableId(targetName),
             cardinality: { from: fromCard, to: toCard },
-            ...indentRel[2]?.trim() && { label: indentRel[2].trim() },
+            ...rawLabel && { label: rawLabel },
             lineNumber
           });
         }
@@ -5308,6 +5492,7 @@ var init_parser3 = __esm({
     "use strict";
     init_colors();
     init_diagnostics();
+    init_arrows();
     init_parsing();
     init_tag_groups();
     TABLE_DECL_RE = /^([a-zA-Z_]\w*)(?:\s*\(([^)]+)\))?(?:\s*\|(.+))?$/;
@@ -5810,7 +5995,28 @@ var init_legend_svg = __esm({
 });
 
 // src/echarts.ts
-import * as echarts from "echarts";
+import * as echarts from "echarts/core";
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  RadarChart,
+  SankeyChart,
+  GraphChart,
+  HeatmapChart,
+  FunnelChart
+} from "echarts/charts";
+import {
+  GridComponent,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  RadarComponent,
+  VisualMapComponent,
+  GraphicComponent
+} from "echarts/components";
+import { SVGRenderer } from "echarts/renderers";
 function parseScatterRow(line10, palette, currentCategory, lineNumber) {
   const dataRow = parseDataRowValues(line10, { multiValue: true });
   if (!dataRow || dataRow.values.length < 2) return null;
@@ -7829,7 +8035,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
     series
   };
 }
-async function renderExtendedChartForExport(content, theme, palette, options) {
+async function renderExtendedChartForExport(content, theme, palette) {
   const isDark = theme === "dark";
   const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
   const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
@@ -7900,10 +8106,6 @@ async function renderExtendedChartForExport(content, theme, palette, options) {
         `$1<g transform="translate(0,${legendY})">${legendSvgStr}</g>`
       );
     }
-    if (options?.branding !== false) {
-      const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
-      result = injectBranding(result, brandColor);
-    }
     return result;
   } finally {
     chart.dispose();
@@ -7914,7 +8116,6 @@ var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
     init_fonts();
-    init_branding();
     init_legend_svg();
     init_label_layout();
     init_palettes();
@@ -7924,6 +8125,25 @@ var init_echarts = __esm({
     init_colors();
     init_parsing();
     init_chart();
+    echarts.use([
+      BarChart,
+      LineChart,
+      PieChart,
+      ScatterChart,
+      RadarChart,
+      SankeyChart,
+      GraphChart,
+      HeatmapChart,
+      FunnelChart,
+      GridComponent,
+      TitleComponent,
+      TooltipComponent,
+      LegendComponent,
+      RadarComponent,
+      VisualMapComponent,
+      GraphicComponent,
+      SVGRenderer
+    ]);
     EMPHASIS_SELF = {
       focus: "self",
       blurScope: "global",
@@ -8886,13 +9106,10 @@ function parseC4(content, palette) {
           labeledHandled = true;
           break;
         }
-        let label = rawLabel;
+        const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+        labelResult.diagnostics.forEach((d) => result.diagnostics.push(d));
+        const label = labelResult.label;
         let technology;
-        const techMatch = rawLabel.match(/\[([^\]]+)\]\s*$/);
-        if (techMatch) {
-          label = rawLabel.substring(0, techMatch.index).trim() || void 0;
-          technology = techMatch[1].trim();
-        }
         let target = targetBody;
         const pipeIdx = targetBody.indexOf("|");
         if (pipeIdx !== -1) {
@@ -9228,6 +9445,7 @@ var init_parser6 = __esm({
   "src/c4/parser.ts"() {
     "use strict";
     init_diagnostics();
+    init_arrows();
     init_tag_groups();
     init_participant_inference();
     init_parsing();
@@ -10028,7 +10246,10 @@ function parseInfra(content) {
       }
       const asyncConnMatch = trimmed.match(ASYNC_CONNECTION_RE);
       if (asyncConnMatch) {
-        const label = asyncConnMatch[1]?.trim() || "";
+        const rawLabel = asyncConnMatch[1] ?? "";
+        const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+        result.diagnostics.push(...labelResult.diagnostics);
+        const label = labelResult.label ?? "";
         const targetRaw = asyncConnMatch[2].trim();
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
@@ -10088,7 +10309,10 @@ function parseInfra(content) {
       }
       const connMatch = trimmed.match(CONNECTION_RE);
       if (connMatch) {
-        const label = connMatch[1]?.trim() || "";
+        const rawLabel = connMatch[1] ?? "";
+        const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+        result.diagnostics.push(...labelResult.diagnostics);
+        const label = labelResult.label ?? "";
         const targetRaw = connMatch[2].trim();
         const pipeMeta = extractPipeMetadata(targetRaw);
         const targetName = pipeMeta.clean || targetRaw;
@@ -10287,6 +10511,7 @@ var init_parser8 = __esm({
     "use strict";
     init_diagnostics();
     init_colors();
+    init_arrows();
     init_parsing();
     init_tag_groups();
     init_types();
@@ -11818,7 +12043,9 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   const biLabeledMatch = trimmed.match(/^(.+?)\s*<-(.+)->\s*(.+)$/);
   if (biLabeledMatch) {
     const source2 = resolveEndpoint(biLabeledMatch[1].trim());
-    const label = biLabeledMatch[2].trim();
+    const labelResult = parseInArrowLabel(biLabeledMatch[2], lineNum);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let rest2 = biLabeledMatch[3].trim();
     let metadata2 = {};
     const pipeIdx2 = rest2.indexOf("|");
@@ -11839,7 +12066,7 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
     return {
       source: source2,
       target: resolveEndpoint(rest2),
-      label: label || void 0,
+      label,
       bidirectional: true,
       lineNumber: lineNum,
       metadata: metadata2
@@ -11876,7 +12103,9 @@ function parseEdgeLine(trimmed, lineNum, aliasMap, diagnostics) {
   const labeledMatch = trimmed.match(/^(.+?)\s+-(.+)->\s*(.+)$/);
   if (labeledMatch) {
     const source2 = resolveEndpoint(labeledMatch[1].trim());
-    const label = labeledMatch[2].trim();
+    const labelResult = parseInArrowLabel(labeledMatch[2], lineNum);
+    diagnostics.push(...labelResult.diagnostics);
+    const label = labelResult.label;
     let rest2 = labeledMatch[3].trim();
     if (label) {
       let metadata2 = {};
@@ -11939,6 +12168,7 @@ var init_parser10 = __esm({
   "src/boxes-and-lines/parser.ts"() {
     "use strict";
     init_diagnostics();
+    init_arrows();
     init_tag_groups();
     init_parsing();
     MAX_GROUP_DEPTH = 1;
@@ -12014,19 +12244,78 @@ function getAllChartTypes() {
 function parseDgmo(content) {
   const chartType = parseDgmoChartType(content);
   if (!chartType) {
+    const colonDiag = detectColonChartType(content);
+    if (colonDiag) {
+      const fallback = parseVisualization(content).diagnostics;
+      return { diagnostics: [colonDiag, ...fallback] };
+    }
     return { diagnostics: parseVisualization(content).diagnostics };
   }
   const directParser = PARSE_DISPATCH.get(chartType);
-  if (directParser) return { diagnostics: directParser(content).diagnostics };
+  if (directParser) {
+    const result2 = directParser(content);
+    return {
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+    };
+  }
   if (STANDARD_CHART_TYPES2.has(chartType)) {
-    return { diagnostics: parseChart(content).diagnostics };
+    const result2 = parseChart(content);
+    return {
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+    };
   }
   if (ECHART_TYPES.has(chartType)) {
-    return { diagnostics: parseExtendedChart(content).diagnostics };
+    const result2 = parseExtendedChart(content);
+    return {
+      diagnostics: [...result2.diagnostics, ...detectEmptyContent(content)]
+    };
+  }
+  const result = parseVisualization(content);
+  return {
+    diagnostics: [...result.diagnostics, ...detectEmptyContent(content)]
+  };
+}
+function detectColonChartType(content) {
+  const lines = content.split("\n");
+  for (let i = 0; i < lines.length; i++) {
+    const trimmed = lines[i].trim();
+    if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("//"))
+      continue;
+    const match = trimmed.match(/^(\w[\w-]*)\s*:\s*(.*)$/);
+    if (!match) return null;
+    const word = match[1].toLowerCase();
+    const rest = match[2].trim();
+    if (ALL_KNOWN_TYPES.has(word)) {
+      const example = rest ? `${word} ${rest}` : word;
+      return makeDgmoError(
+        i + 1,
+        `Remove the colon \u2014 use '${example}' instead of '${trimmed}'. DGMO chart types don't use colons.`
+      );
+    }
+    const hint = suggest(word, [...ALL_KNOWN_TYPES]);
+    if (hint) {
+      return makeDgmoError(
+        i + 1,
+        `Unknown chart type: ${word}. ${hint} Also, DGMO chart types don't use colons.`
+      );
+    }
+    return null;
+  }
+  return null;
+}
+function detectEmptyContent(content) {
+  const lines = content.split("\n");
+  const nonEmpty = lines.filter(
+    (l) => l.trim() && !l.trim().startsWith("#") && !l.trim().startsWith("//")
+  );
+  if (nonEmpty.length <= 1) {
+    return [
+      makeDgmoError(1, "No content after chart type declaration.", "warning")
+    ];
   }
-  return { diagnostics: parseVisualization(content).diagnostics };
+  return [];
 }
-var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH;
+var GANTT_DURATION_RE, GANTT_DATE_RE, C4_TYPE_RE, DATA_CHART_TYPES, VISUALIZATION_TYPES, DIAGRAM_TYPES, EXTENDED_CHART_TYPES, STANDARD_CHART_TYPES2, ECHART_TYPES, PARSE_DISPATCH, ALL_KNOWN_TYPES;
 var init_dgmo_router = __esm({
   "src/dgmo-router.ts"() {
     "use strict";
@@ -12046,6 +12335,7 @@ var init_dgmo_router = __esm({
     init_parser9();
     init_parser10();
     init_parsing();
+    init_diagnostics();
     GANTT_DURATION_RE = /^\d+(?:\.\d+)?(?:min|bd|d|w|m|q|y|h)(?:\?)?\s+/;
     GANTT_DATE_RE = /^\d{4}-\d{2}-\d{2}(?:\s\d{2}:\d{2})?\s+/;
     C4_TYPE_RE = /\bis\s+an?\s+(person|system|container|component)\b/i;
@@ -12129,6 +12419,11 @@ var init_dgmo_router = __esm({
       ["gantt", (c) => parseGantt(c)],
       ["boxes-and-lines", (c) => parseBoxesAndLines(c)]
     ]);
+    ALL_KNOWN_TYPES = /* @__PURE__ */ new Set([
+      ...DATA_CHART_TYPES,
+      ...VISUALIZATION_TYPES,
+      ...DIAGRAM_TYPES
+    ]);
   }
 });
 
@@ -14303,7 +14598,6 @@ async function renderSitemapForExport(content, theme, palette) {
   const { parseSitemap: parseSitemap2 } = await Promise.resolve().then(() => (init_parser7(), parser_exports7));
   const { layoutSitemap: layoutSitemap2 } = await Promise.resolve().then(() => (init_layout2(), layout_exports2));
   const { getPalette: getPalette2 } = await Promise.resolve().then(() => (init_palettes(), palettes_exports));
-  const { injectBranding: injectBranding2 } = await Promise.resolve().then(() => (init_branding(), branding_exports));
   const isDark = theme === "dark";
   const effectivePalette = palette ?? (isDark ? getPalette2("nord").dark : getPalette2("nord").light);
   const parsed = parseSitemap2(content, effectivePalette);
@@ -14345,8 +14639,7 @@ async function renderSitemapForExport(content, theme, palette) {
   svgEl.style.fontFamily = FONT_FAMILY;
   const svgHtml = svgEl.outerHTML;
   document.body.removeChild(container);
-  const brandColor = theme === "transparent" ? "#888" : effectivePalette.textMuted;
-  return injectBranding2(svgHtml, brandColor);
+  return svgHtml;
 }
 var DIAGRAM_PADDING2, MAX_SCALE2, TITLE_HEIGHT2, LABEL_FONT_SIZE2, META_FONT_SIZE2, META_LINE_HEIGHT4, HEADER_HEIGHT4, SEPARATOR_GAP4, EDGE_STROKE_WIDTH2, NODE_STROKE_WIDTH2, CARD_RADIUS2, CONTAINER_RADIUS2, CONTAINER_LABEL_FONT_SIZE2, CONTAINER_META_FONT_SIZE2, CONTAINER_META_LINE_HEIGHT4, CONTAINER_HEADER_HEIGHT2, ARROWHEAD_W, ARROWHEAD_H, EDGE_LABEL_FONT_SIZE, COLLAPSE_BAR_HEIGHT2, LEGEND_FIXED_GAP2, lineGenerator, lineGeneratorLinear;
 var init_renderer2 = __esm({
@@ -14550,7 +14843,6 @@ var init_mutations = __esm({
 // src/kanban/renderer.ts
 var renderer_exports3 = {};
 __export(renderer_exports3, {
-  bucketCardsBySwimlane: () => bucketCardsBySwimlane,
   renderKanban: () => renderKanban,
   renderKanbanForExport: () => renderKanbanForExport
 });
@@ -23449,6 +23741,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 +23759,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 +23781,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 +23805,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);
@@ -23538,8 +23855,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
     });
   }
   drawLegend();
-  const startTime = dateToFractionalYear(resolved.startDate);
-  const endTime = dateToFractionalYear(resolved.endDate);
+  const startTime = dateToFractionalYear2(resolved.startDate);
+  const endTime = dateToFractionalYear2(resolved.endDate);
   const domainPad = Math.max((endTime - startTime) * 0.02, 0.01);
   const domainMin = startTime - domainPad;
   const domainMax = endTime + domainPad;
@@ -23570,7 +23887,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
     } else {
       todayDate = /* @__PURE__ */ new Date(resolved.options.todayMarker + "T00:00:00");
     }
-    todayX = xScale(dateToFractionalYear(todayDate));
+    todayX = xScale(dateToFractionalYear2(todayDate));
     if (todayX >= 0 && todayX <= innerWidth) {
       const todayLine = g.append("line").attr("class", "gantt-today").attr("x1", todayX).attr("y1", 0).attr("x2", todayX).attr("y2", innerHeight + 10).attr("stroke", todayColor).attr("stroke-width", 2).attr("stroke-dasharray", "6 4").attr("opacity", 0.7).attr("pointer-events", "none");
       if (todayMarkerLineNum)
@@ -23612,8 +23929,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
       let lx2 = innerWidth;
       let laneBarWidth = innerWidth;
       if (row.laneStartDate && row.laneEndDate) {
-        lx1 = xScale(dateToFractionalYear(row.laneStartDate));
-        lx2 = xScale(dateToFractionalYear(row.laneEndDate));
+        lx1 = xScale(dateToFractionalYear2(row.laneStartDate));
+        lx2 = xScale(dateToFractionalYear2(row.laneEndDate));
         laneBarWidth = Math.max(lx2 - lx1, 2);
       }
       lanePositions.set(row.laneName, {
@@ -23645,7 +23962,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(
@@ -23719,8 +24036,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
       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", palette.text).text(
         toggleIcon + " " + group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "")
       );
-      const gStart = dateToFractionalYear(group.startDate);
-      const gEnd = dateToFractionalYear(group.endDate);
+      const gStart = dateToFractionalYear2(group.startDate);
+      const gEnd = dateToFractionalYear2(group.endDate);
       const gx1 = xScale(gStart);
       const gx2 = xScale(gEnd);
       if (gx2 > gx1) {
@@ -23834,7 +24151,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
         taskLabel.attr("data-critical-path", "true");
       }
       if (rt.isMilestone) {
-        const mx = xScale(dateToFractionalYear(rt.startDate));
+        const mx = xScale(dateToFractionalYear2(rt.startDate));
         const my = yOffset + BAR_H / 2;
         g.append("polygon").attr("class", "gantt-milestone").attr("points", diamondPoints(mx, my, MILESTONE_SIZE)).attr("fill", barColor).attr("stroke", barColor).attr("stroke-width", 1.5).attr("data-line-number", String(task.lineNumber)).attr("data-task-name", task.label).attr("data-task-id", task.id).attr("data-group", topGroup).style("cursor", onClickItem ? "pointer" : "default").on("click", () => {
           if (onClickItem) onClickItem(task.lineNumber);
@@ -23850,14 +24167,14 @@ 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();
         });
         taskPositions.set(task.id, { x1: mx, x2: mx, y: my });
       } else {
-        const tStart = dateToFractionalYear(rt.startDate);
-        const tEnd = dateToFractionalYear(rt.endDate);
+        const tStart = dateToFractionalYear2(rt.startDate);
+        const tEnd = dateToFractionalYear2(rt.endDate);
         const x1 = xScale(tStart);
         const x2 = xScale(tEnd);
         const barWidth = Math.max(x2 - x1, 2);
@@ -23879,11 +24196,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);
@@ -24096,14 +24409,14 @@ function renderHolidayBands(g, svg, resolved, xScale, innerHeight, palette, isDa
   }
 }
 function drawBand(g, xScale, start, end, height, palette, _isDark, className, opacity) {
-  const x1 = xScale(dateToFractionalYear(start));
-  const x2 = xScale(dateToFractionalYear(end));
+  const x1 = xScale(dateToFractionalYear2(start));
+  const x2 = xScale(dateToFractionalYear2(end));
   if (x2 <= x1) return;
   g.append("rect").attr("class", className).attr("x", x1).attr("y", 0).attr("width", x2 - x1).attr("height", height).attr("fill", palette.text).attr("opacity", opacity).attr("pointer-events", "none");
 }
 function drawHolidayBand(g, svg, xScale, start, end, height, palette, _isDark, label, lineNumber, headerY, chartLeftMargin, onClickItem) {
-  const x1 = xScale(dateToFractionalYear(start));
-  const x2 = xScale(dateToFractionalYear(end));
+  const x1 = xScale(dateToFractionalYear2(start));
+  const x2 = xScale(dateToFractionalYear2(end));
   if (x2 <= x1) return;
   const bandW = Math.max(x2 - x1, 4);
   const baseOpacity = 0.08;
@@ -24198,6 +24511,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 +24564,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 +24649,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 +24671,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 +24684,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,
+      controlsExpanded
     };
-    const legendState = { activeGroup: activeGroupName };
-    const tagGroupsW = visibleGroups.reduce((s, _, i) => s + groupWidths[i], 0) + Math.max(0, (visibleGroups.length - 1) * LEGEND_GROUP_GAP);
+    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 +24777,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) {
@@ -24577,8 +24938,8 @@ function renderSprintBands(g, svg, resolved, xScale, innerHeight, palette) {
   const chartMinX = 0;
   for (let i = 0; i < resolved.sprints.length; i++) {
     const sprint = resolved.sprints[i];
-    const rawSx = xScale(dateToFractionalYear(sprint.startDate));
-    const rawEx = xScale(dateToFractionalYear(sprint.endDate));
+    const rawSx = xScale(dateToFractionalYear2(sprint.startDate));
+    const rawEx = xScale(dateToFractionalYear2(sprint.endDate));
     if (rawEx <= rawSx) continue;
     const sx = Math.max(rawSx, chartMinX);
     const ex = rawEx;
@@ -24700,7 +25061,7 @@ function renderSprintBands(g, svg, resolved, xScale, innerHeight, palette) {
     });
   }
   const lastSprint = resolved.sprints[resolved.sprints.length - 1];
-  const lastEx = xScale(dateToFractionalYear(lastSprint.endDate));
+  const lastEx = xScale(dateToFractionalYear2(lastSprint.endDate));
   g.append("line").attr("class", "gantt-sprint-boundary").attr("x1", lastEx).attr("y1", -6).attr("x2", lastEx).attr("y2", innerHeight).attr("stroke", bandColor).attr("stroke-width", 1).attr("stroke-dasharray", "3 3").attr("opacity", SPRINT_BOUNDARY_OPACITY);
 }
 function parseDateStringToDate(s) {
@@ -24711,7 +25072,7 @@ function parseDateStringToDate(s) {
   return new Date(year, month, day);
 }
 function parseDateToFractionalYear(s) {
-  return dateToFractionalYear(parseDateStringToDate(s));
+  return dateToFractionalYear2(parseDateStringToDate(s));
 }
 function highlightDeps(g, svg, taskId, resolved) {
   const related = /* @__PURE__ */ new Set([taskId]);
@@ -24915,6 +25276,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
@@ -25074,7 +25439,7 @@ function durationWeightedProgress(tasks) {
   }
   return hasProgress && totalDuration > 0 ? totalProgress / totalDuration : null;
 }
-function dateToFractionalYear(d) {
+function dateToFractionalYear2(d) {
   const y = d.getFullYear();
   const startOfYear = new Date(y, 0, 1);
   const endOfYear = new Date(y + 1, 0, 1);
@@ -25086,7 +25451,7 @@ function diamondPoints(cx, cy, size) {
   return `${cx},${cy - half} ${cx + half},${cy} ${cx},${cy + half} ${cx - half},${cy}`;
 }
 function formatGanttDate(d) {
-  const base = `${MONTH_ABBR[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+  const base = `${MONTH_ABBR2[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
   if (d.getHours() === 0 && d.getMinutes() === 0) return base;
   const hh = String(d.getHours()).padStart(2, "0");
   const mm = String(d.getMinutes()).padStart(2, "0");
@@ -25097,7 +25462,7 @@ function showGanttDateIndicators(g, xScale, startDate, endDate, innerHeight, col
   g.selectAll(".gantt-today").attr("opacity", 0.05);
   const hg = g.append("g").attr("class", "gantt-hover-date").attr("pointer-events", "none");
   const tickLen = 6;
-  const startPos = xScale(dateToFractionalYear(startDate));
+  const startPos = xScale(dateToFractionalYear2(startDate));
   const startLabel = formatGanttDate(startDate);
   if (!options?.skipStartLine) {
     hg.append("line").attr("class", "gantt-hover-date").attr("x1", startPos).attr("y1", -tickLen).attr("x2", startPos).attr("y2", innerHeight).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 4").attr("opacity", 0.6);
@@ -25105,7 +25470,7 @@ function showGanttDateIndicators(g, xScale, startDate, endDate, innerHeight, col
   hg.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", -tickLen - 4).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
   hg.append("text").attr("class", "gantt-hover-date").attr("x", startPos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("fill", color).attr("font-size", "10px").attr("font-weight", "600").text(startLabel);
   if (endDate && endDate.getTime() !== startDate.getTime()) {
-    const endPos = xScale(dateToFractionalYear(endDate));
+    const endPos = xScale(dateToFractionalYear2(endDate));
     const endLabel = formatGanttDate(endDate);
     const minLabelGap = 90;
     const gap = endPos - startPos;
@@ -25175,7 +25540,7 @@ function renderTimeScaleHorizontal(g, scale, innerWidth, innerHeight, textColor)
     g.append("text").attr("class", "gantt-scale-tick").attr("x", tick.pos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", textColor).attr("opacity", opacity).text(tick.label);
   }
 }
-var BAR_H, ROW_GAP, GROUP_GAP2, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, CHAR_W2, LABEL_PAD, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY, MONTH_ABBR;
+var BAR_H, ROW_GAP, GROUP_GAP2, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, CHAR_W2, LABEL_PAD, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY, MONTH_ABBR2;
 var init_renderer9 = __esm({
   "src/gantt/renderer.ts"() {
     "use strict";
@@ -25183,9 +25548,10 @@ var init_renderer9 = __esm({
     init_palettes();
     init_color_utils();
     init_tag_groups();
-    init_d3();
+    init_time_ticks();
     init_legend_constants();
     init_legend_d3();
+    init_legend_layout();
     init_title_constants();
     BAR_H = 22;
     ROW_GAP = 6;
@@ -25214,7 +25580,7 @@ var init_renderer9 = __esm({
     SPRINT_HOVER_OPACITY = 0.12;
     SPRINT_BOUNDARY_OPACITY = 0.3;
     FADE_OPACITY = 0.1;
-    MONTH_ABBR = [
+    MONTH_ABBR2 = [
       "Jan",
       "Feb",
       "Mar",
@@ -25479,6 +25845,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 +26403,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 +26599,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 +26618,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 +26628,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 +26643,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 +26705,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 +26875,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 +26902,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 +26914,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 +26929,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 +27185,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;
@@ -26703,7 +27225,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          renderInlineText(labelEl, step.label, palette);
+          labelEl.text(step.label);
         }
       } else {
         const goingRight = fromX < toX;
@@ -26730,7 +27252,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
           if (tagKey && msgTagValue) {
             labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
           }
-          renderInlineText(labelEl, step.label, palette);
+          labelEl.text(step.label);
         }
       }
     } else {
@@ -26761,7 +27283,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
         if (tagKey && msgTagValue) {
           labelEl.attr(`data-tag-${tagKey}`, msgTagValue.toLowerCase());
         }
-        renderInlineText(labelEl, step.label, palette);
+        labelEl.text(step.label);
       }
     }
   });
@@ -26945,6 +27467,7 @@ var init_renderer10 = __esm({
     init_inline_markdown();
     init_fonts();
     init_parser();
+    init_collapse3();
     init_tag_resolution();
     init_tag_groups();
     init_legend_constants();
@@ -27037,23 +27560,6 @@ function parseTimelineDate(s) {
   const day = parts.length >= 3 ? parts[2] : 1;
   return year + (month - 1) / 12 + (day - 1) / 365 + hour / 8760 + minute / 525600;
 }
-function fractionalYearToDate(frac) {
-  const year = Math.floor(frac);
-  const remainder = frac - year;
-  const monthFrac = remainder * 12;
-  const month = Math.floor(monthFrac);
-  const monthRemainder = remainder - month / 12;
-  const dayFrac = monthRemainder * 365;
-  const day = Math.floor(dayFrac) + 1;
-  const dayRemainder = dayFrac - Math.floor(dayFrac);
-  const hourFrac = dayRemainder * 24;
-  const hour = Math.floor(hourFrac);
-  const minute = Math.round((hourFrac - hour) * 60);
-  return new Date(year, month, day, hour, minute);
-}
-function dateToFractionalYear2(d) {
-  return d.getFullYear() + d.getMonth() / 12 + (d.getDate() - 1) / 365 + d.getHours() / 8760 + d.getMinutes() / 525600;
-}
 function addDurationToDate(startDate, amount, unit) {
   const spaceIdx = startDate.indexOf(" ");
   let datePart = startDate;
@@ -28608,7 +29114,7 @@ function formatDateLabel(dateStr) {
   const parts = datePart.split("-");
   const year = parts[0];
   if (parts.length === 1) return year + timeSuffix;
-  const month = MONTH_ABBR2[parseInt(parts[1], 10) - 1];
+  const month = MONTH_ABBR[parseInt(parts[1], 10) - 1];
   if (parts.length === 2) return `${month} ${year}${timeSuffix}`;
   const day = parseInt(parts[2], 10);
   return `${month} ${day}, ${year}${timeSuffix}`;
@@ -28625,123 +29131,6 @@ function formatBoundaryLabel(dateStr, otherDateStr) {
   }
   return formatDateLabel(dateStr);
 }
-function computeTimeTicks(domainMin, domainMax, scale, boundaryStart, boundaryEnd, boundaryStartLabel, boundaryEndLabel) {
-  const minYear = Math.floor(domainMin);
-  const maxYear = Math.floor(domainMax);
-  const span = domainMax - domainMin;
-  let ticks = [];
-  const firstYear = Math.ceil(domainMin);
-  const lastYear = Math.floor(domainMax);
-  if (lastYear >= firstYear + 1) {
-    const yearSpan = lastYear - firstYear;
-    let step = 1;
-    if (yearSpan > 80) step = 20;
-    else if (yearSpan > 40) step = 10;
-    else if (yearSpan > 20) step = 5;
-    else if (yearSpan > 10) step = 2;
-    const alignedFirst = Math.ceil(firstYear / step) * step;
-    for (let y = alignedFirst; y <= lastYear; y += step) {
-      ticks.push({ pos: scale(y), label: String(y) });
-    }
-  } else if (span > 0.25) {
-    const crossesYear = maxYear > minYear;
-    for (let y = minYear; y <= maxYear + 1; y++) {
-      for (let m = 1; m <= 12; m++) {
-        const val = y + (m - 1) / 12;
-        if (val > domainMax) break;
-        if (val >= domainMin) {
-          ticks.push({
-            pos: scale(val),
-            label: crossesYear ? `${MONTH_ABBR2[m - 1]} '${String(y).slice(-2)}` : MONTH_ABBR2[m - 1]
-          });
-        }
-      }
-    }
-  } else if (span <= 685e-6) {
-    let stepMin = 5;
-    const spanHours = span * 8760;
-    if (spanHours > 3) stepMin = 30;
-    else if (spanHours > 1) stepMin = 15;
-    else if (spanHours > 0.5) stepMin = 10;
-    const startDate = fractionalYearToDate(domainMin);
-    startDate.setMinutes(
-      Math.floor(startDate.getMinutes() / stepMin) * stepMin,
-      0,
-      0
-    );
-    while (true) {
-      const val = dateToFractionalYear2(startDate);
-      if (val > domainMax) break;
-      if (val >= domainMin) {
-        const hh = String(startDate.getHours()).padStart(2, "0");
-        const mm = String(startDate.getMinutes()).padStart(2, "0");
-        ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
-      }
-      startDate.setMinutes(startDate.getMinutes() + stepMin);
-    }
-  } else if (span <= 822e-5) {
-    let stepHour = 1;
-    const spanHours = span * 8760;
-    if (spanHours > 48) stepHour = 6;
-    else if (spanHours > 24) stepHour = 3;
-    else if (spanHours > 12) stepHour = 2;
-    const singleDay = spanHours <= 24;
-    const startDate = fractionalYearToDate(domainMin);
-    startDate.setHours(
-      Math.floor(startDate.getHours() / stepHour) * stepHour,
-      0,
-      0,
-      0
-    );
-    while (true) {
-      const val = dateToFractionalYear2(startDate);
-      if (val > domainMax) break;
-      if (val >= domainMin) {
-        const hh = String(startDate.getHours()).padStart(2, "0");
-        const mm = String(startDate.getMinutes()).padStart(2, "0");
-        if (singleDay) {
-          ticks.push({ pos: scale(val), label: `${hh}:${mm}` });
-        } else {
-          const mon = MONTH_ABBR2[startDate.getMonth()];
-          const d = startDate.getDate();
-          ticks.push({ pos: scale(val), label: `${mon} ${d} ${hh}:${mm}` });
-        }
-      }
-      startDate.setHours(startDate.getHours() + stepHour);
-    }
-  } else {
-    for (let y = minYear; y <= maxYear + 1; y++) {
-      for (let m = 1; m <= 12; m++) {
-        for (const d of [1, 8, 15, 22]) {
-          const val = y + (m - 1) / 12 + (d - 1) / 365;
-          if (val > domainMax) break;
-          if (val >= domainMin) {
-            ticks.push({
-              pos: scale(val),
-              label: `${MONTH_ABBR2[m - 1]} ${d}`
-            });
-          }
-        }
-      }
-    }
-  }
-  const collisionThreshold = 40;
-  if (boundaryStart !== void 0 && boundaryStartLabel) {
-    const boundaryPos = scale(boundaryStart);
-    ticks = ticks.filter(
-      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
-    );
-    ticks.unshift({ pos: boundaryPos, label: boundaryStartLabel });
-  }
-  if (boundaryEnd !== void 0 && boundaryEndLabel) {
-    const boundaryPos = scale(boundaryEnd);
-    ticks = ticks.filter(
-      (t) => Math.abs(t.pos - boundaryPos) >= collisionThreshold
-    );
-    ticks.push({ pos: boundaryPos, label: boundaryEndLabel });
-  }
-  return ticks;
-}
 function renderTimeScale(g, scale, isVertical, innerWidth, innerHeight, textColor, boundaryStart, boundaryEnd, boundaryStartLabel, boundaryEndLabel) {
   const [domainMin, domainMax] = scale.domain();
   const ticks = computeTimeTicks(
@@ -30669,7 +31058,7 @@ function createExportContainer(width, height) {
   document.body.appendChild(container);
   return container;
 }
-function finalizeSvgExport(container, theme, palette, options) {
+function finalizeSvgExport(container, theme, palette) {
   const svgEl = container.querySelector("svg");
   if (!svgEl) return "";
   if (theme === "transparent") {
@@ -30682,10 +31071,6 @@ function finalizeSvgExport(container, theme, palette, options) {
   svgEl.querySelectorAll("[data-export-ignore]").forEach((el) => el.remove());
   const svgHtml = svgEl.outerHTML;
   document.body.removeChild(container);
-  if (options?.branding !== false) {
-    const brandColor = theme === "transparent" ? "#888" : palette.textMuted;
-    return injectBranding(svgHtml, brandColor);
-  }
   return svgHtml;
 }
 async function renderForExport(content, theme, palette, orgExportState, options) {
@@ -30732,7 +31117,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       activeTagGroup,
       hiddenAttributes
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "sitemap") {
     const { parseSitemap: parseSitemap2 } = await Promise.resolve().then(() => (init_parser7(), parser_exports7));
@@ -30774,7 +31159,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       activeTagGroup,
       hiddenAttributes
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "kanban") {
     const { parseKanban: parseKanban2 } = await Promise.resolve().then(() => (init_parser5(), parser_exports5));
@@ -30793,7 +31178,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
         options?.tagGroup
       )
     });
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "class") {
     const { parseClassDiagram: parseClassDiagram2 } = await Promise.resolve().then(() => (init_parser2(), parser_exports2));
@@ -30817,7 +31202,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       void 0,
       { width: exportWidth, height: exportHeight }
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "er") {
     const { parseERDiagram: parseERDiagram2 } = await Promise.resolve().then(() => (init_parser3(), parser_exports3));
@@ -30846,7 +31231,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
         options?.tagGroup
       )
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "boxes-and-lines") {
     const { parseBoxesAndLines: parseBoxesAndLines2 } = await Promise.resolve().then(() => (init_parser10(), parser_exports10));
@@ -30872,7 +31257,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
         activeTagGroup: options?.tagGroup
       }
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "c4") {
     const { parseC4: parseC42 } = await Promise.resolve().then(() => (init_parser6(), parser_exports6));
@@ -30911,7 +31296,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
         options?.tagGroup
       )
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "flowchart") {
     const { parseFlowchart: parseFlowchart2 } = await Promise.resolve().then(() => (init_flowchart_parser(), flowchart_parser_exports));
@@ -30931,7 +31316,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       void 0,
       { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "infra") {
     const { parseInfra: parseInfra2 } = await Promise.resolve().then(() => (init_parser8(), parser_exports8));
@@ -30977,7 +31362,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       infraSvg.setAttribute("width", String(exportWidth));
       infraSvg.setAttribute("height", String(exportHeight));
     }
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "gantt") {
     const { parseGantt: parseGantt2 } = await Promise.resolve().then(() => (init_parser9(), parser_exports9));
@@ -30998,7 +31383,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       void 0,
       { width: EXPORT_W, height: EXPORT_H }
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   if (detectedType === "state") {
     const { parseState: parseState2 } = await Promise.resolve().then(() => (init_state_parser(), state_parser_exports));
@@ -31018,7 +31403,7 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       void 0,
       { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
     );
-    return finalizeSvgExport(container2, theme, effectivePalette2, options);
+    return finalizeSvgExport(container2, theme, effectivePalette2);
   }
   const parsed = parseVisualization(content, palette);
   if (parsed.error && parsed.type !== "sequence") {
@@ -31110,15 +31495,15 @@ async function renderForExport(content, theme, palette, orgExportState, options)
       dims
     );
   }
-  return finalizeSvgExport(container, theme, effectivePalette, options);
+  return finalizeSvgExport(container, theme, effectivePalette);
 }
-var DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, MONTH_ABBR2, EXPORT_WIDTH, EXPORT_HEIGHT;
+var DEFAULT_CLOUD_OPTIONS, STOP_WORDS, SLOPE_MARGIN, SLOPE_LABEL_FONT_SIZE, SLOPE_CHAR_WIDTH, ARC_MARGIN, EXPORT_WIDTH, EXPORT_HEIGHT;
 var init_d3 = __esm({
   "src/d3.ts"() {
     "use strict";
     init_fonts();
-    init_branding();
     init_label_layout();
+    init_time_ticks();
     init_colors();
     init_palettes();
     init_color_utils();
@@ -31249,20 +31634,6 @@ var init_d3 = __esm({
     SLOPE_LABEL_FONT_SIZE = 14;
     SLOPE_CHAR_WIDTH = 8;
     ARC_MARGIN = { top: 60, right: 40, bottom: 60, left: 40 };
-    MONTH_ABBR2 = [
-      "Jan",
-      "Feb",
-      "Mar",
-      "Apr",
-      "May",
-      "Jun",
-      "Jul",
-      "Aug",
-      "Sep",
-      "Oct",
-      "Nov",
-      "Dec"
-    ];
     EXPORT_WIDTH = 1200;
     EXPORT_HEIGHT = 800;
   }
@@ -31727,6 +32098,7 @@ var require_lz_string = __commonJS({
 
 // src/index.ts
 init_diagnostics();
+init_arrows();
 
 // src/render.ts
 init_d3();
@@ -31762,8 +32134,8 @@ async function ensureDom() {
 async function render(content, options) {
   const theme = options?.theme ?? "light";
   const paletteName = options?.palette ?? "nord";
-  const branding = options?.branding ?? false;
   const paletteColors = getPalette(paletteName)[theme === "dark" ? "dark" : "light"];
+  const { diagnostics } = parseDgmo(content);
   const chartType = parseDgmoChartType(content);
   const category = chartType ? getRenderCategory(chartType) : null;
   const legendExportState = options?.legendState ? {
@@ -31771,18 +32143,27 @@ async function render(content, options) {
     hiddenAttributes: options.legendState.hiddenAttributes ? new Set(options.legendState.hiddenAttributes) : void 0
   } : void 0;
   if (category === "data-chart") {
-    return renderExtendedChartForExport(content, theme, paletteColors, {
-      branding
-    });
+    const svg2 = await renderExtendedChartForExport(
+      content,
+      theme,
+      paletteColors
+    );
+    return { svg: svg2, diagnostics };
   }
   await ensureDom();
-  return renderForExport(content, theme, paletteColors, legendExportState, {
-    branding,
-    c4Level: options?.c4Level,
-    c4System: options?.c4System,
-    c4Container: options?.c4Container,
-    tagGroup: options?.tagGroup
-  });
+  const svg = await renderForExport(
+    content,
+    theme,
+    paletteColors,
+    legendExportState,
+    {
+      c4Level: options?.c4Level,
+      c4System: options?.c4System,
+      c4Container: options?.c4Container,
+      tagGroup: options?.tagGroup
+    }
+  );
+  return { svg, diagnostics };
 }
 
 // src/index.ts
@@ -31790,172 +32171,9 @@ init_dgmo_router();
 init_chart();
 init_echarts();
 init_d3();
+init_time_ticks();
 init_parser();
 init_participant_inference();
-
-// src/dgmo-mermaid.ts
-init_colors();
-init_diagnostics();
-var QUADRANT_LABEL_RE = /^(.+?)(?:\s*\(([^)]+)\))?\s*$/;
-var DATA_POINT_RE = /^(.+?)\s+([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/;
-var QUADRANT_POSITIONS = /* @__PURE__ */ new Set([
-  "top-right",
-  "top-left",
-  "bottom-left",
-  "bottom-right"
-]);
-function parseQuadrant(content) {
-  const result = {
-    title: null,
-    titleLineNumber: null,
-    xAxis: null,
-    xAxisLineNumber: null,
-    yAxis: null,
-    yAxisLineNumber: null,
-    quadrants: {
-      topRight: null,
-      topLeft: null,
-      bottomLeft: null,
-      bottomRight: null
-    },
-    points: [],
-    diagnostics: [],
-    error: null
-  };
-  const lines = content.split("\n");
-  for (let i = 0; i < lines.length; i++) {
-    const line10 = lines[i].trim();
-    const lineNumber = i + 1;
-    if (!line10 || line10.startsWith("//")) continue;
-    if (/^chart\s*:/i.test(line10)) continue;
-    const titleMatch = line10.match(/^title\s+(.+)/i);
-    if (titleMatch) {
-      result.title = titleMatch[1].trim();
-      result.titleLineNumber = lineNumber;
-      continue;
-    }
-    const xMatch = line10.match(/^x-label\s+(.+)/i);
-    if (xMatch) {
-      const parts = xMatch[1].split(",").map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.xAxis = [parts[0], parts[1]];
-        result.xAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-    const yMatch = line10.match(/^y-label\s+(.+)/i);
-    if (yMatch) {
-      const parts = yMatch[1].split(",").map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.yAxis = [parts[0], parts[1]];
-        result.yAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-    const posMatch = line10.match(
-      /^(top-right|top-left|bottom-left|bottom-right)\s+(.+)/i
-    );
-    if (posMatch) {
-      const position = posMatch[1].toLowerCase();
-      const labelMatch = posMatch[2].match(QUADRANT_LABEL_RE);
-      if (labelMatch) {
-        const label = {
-          text: labelMatch[1].trim(),
-          color: labelMatch[2] ? resolveColorWithDiagnostic(
-            labelMatch[2].trim(),
-            lineNumber,
-            result.diagnostics
-          ) ?? null : null,
-          lineNumber
-        };
-        if (position === "top-right") result.quadrants.topRight = label;
-        else if (position === "top-left") result.quadrants.topLeft = label;
-        else if (position === "bottom-left")
-          result.quadrants.bottomLeft = label;
-        else if (position === "bottom-right")
-          result.quadrants.bottomRight = label;
-      }
-      continue;
-    }
-    const pointMatch = line10.match(DATA_POINT_RE);
-    if (pointMatch) {
-      const key = pointMatch[1].trim().toLowerCase();
-      if (!QUADRANT_POSITIONS.has(key)) {
-        result.points.push({
-          label: pointMatch[1].trim(),
-          x: parseFloat(pointMatch[2]),
-          y: parseFloat(pointMatch[3]),
-          lineNumber
-        });
-      }
-      continue;
-    }
-  }
-  if (result.points.length === 0) {
-    const diag = makeDgmoError(
-      1,
-      "No data points found. Add lines like: Label 0.5, 0.7"
-    );
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-  }
-  return result;
-}
-function buildMermaidQuadrant(parsed, options = {}) {
-  const { isDark = false, textColor, mutedTextColor } = options;
-  const lines = [];
-  const fillAlpha = isDark ? "30" : "55";
-  const primaryText = textColor ?? (isDark ? "#d0d0d0" : "#333333");
-  const quadrantLabelText = mutedTextColor ?? (isDark ? "#888888" : "#666666");
-  const colorMap = {};
-  if (parsed.quadrants.topRight?.color)
-    colorMap.quadrant1Fill = parsed.quadrants.topRight.color + fillAlpha;
-  if (parsed.quadrants.topLeft?.color)
-    colorMap.quadrant2Fill = parsed.quadrants.topLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomLeft?.color)
-    colorMap.quadrant3Fill = parsed.quadrants.bottomLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomRight?.color)
-    colorMap.quadrant4Fill = parsed.quadrants.bottomRight.color + fillAlpha;
-  colorMap.quadrant1TextFill = quadrantLabelText;
-  colorMap.quadrant2TextFill = quadrantLabelText;
-  colorMap.quadrant3TextFill = quadrantLabelText;
-  colorMap.quadrant4TextFill = quadrantLabelText;
-  colorMap.quadrantPointTextFill = primaryText;
-  colorMap.quadrantXAxisTextFill = primaryText;
-  colorMap.quadrantYAxisTextFill = primaryText;
-  colorMap.quadrantTitleFill = primaryText;
-  const vars = JSON.stringify(colorMap);
-  lines.push(`%%{init: {"themeVariables": ${vars}}}%%`);
-  lines.push("quadrantChart");
-  if (parsed.title) {
-    lines.push(`    title ${parsed.title}`);
-  }
-  if (parsed.xAxis) {
-    lines.push(`    x-axis ${parsed.xAxis[0]} --> ${parsed.xAxis[1]}`);
-  }
-  if (parsed.yAxis) {
-    lines.push(`    y-axis ${parsed.yAxis[0]} --> ${parsed.yAxis[1]}`);
-  }
-  const quote = (s) => /[\s,:[\]]/.test(s) ? `"${s}"` : s;
-  if (parsed.quadrants.topRight) {
-    lines.push(`    quadrant-1 ${quote(parsed.quadrants.topRight.text)}`);
-  }
-  if (parsed.quadrants.topLeft) {
-    lines.push(`    quadrant-2 ${quote(parsed.quadrants.topLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomLeft) {
-    lines.push(`    quadrant-3 ${quote(parsed.quadrants.bottomLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomRight) {
-    lines.push(`    quadrant-4 ${quote(parsed.quadrants.bottomRight.text)}`);
-  }
-  for (const point of parsed.points) {
-    lines.push(`    ${quote(point.label)}: [${point.x}, ${point.y}]`);
-  }
-  return lines.join("\n");
-}
-
-// src/index.ts
 init_flowchart_parser();
 init_state_parser();
 init_state_renderer();
@@ -32507,6 +32725,7 @@ init_legend_d3();
 init_legend_layout();
 init_d3();
 init_renderer10();
+init_collapse3();
 init_colors();
 init_palettes();
 
@@ -32514,6 +32733,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 +32763,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 +32783,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 +32792,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 };
   }
 }
 
@@ -33337,9 +33563,9 @@ registerExtractor("boxes-and-lines", extractBoxesAndLinesSymbols);
 
 // src/index.ts
 init_parsing();
-init_branding();
 export {
   ALL_CHART_TYPES,
+  ARROW_DIAGNOSTIC_CODES,
   CHART_TYPES,
   COMPLETION_REGISTRY,
   ENTITY_TYPES,
@@ -33350,17 +33576,15 @@ export {
   RECOGNIZED_COLOR_NAMES,
   RULE_COUNT,
   addDurationToDate,
+  applyCollapseProjection,
   applyGroupOrdering,
   applyPositionOverrides,
   boldPalette,
   buildExtendedChartOption,
-  buildMermaidQuadrant,
-  buildMermaidThemeVars,
   buildNoteMessageMap,
   buildRenderSequence,
   buildSimpleChartOption,
   buildTagLaneRowList,
-  buildThemeCSS,
   calculateSchedule,
   catppuccinPalette,
   collapseBoxesAndLines,
@@ -33379,8 +33603,10 @@ export {
   computeTimeTicks,
   contrastText,
   decodeDiagramUrl,
+  decodeViewState,
   draculaPalette,
   encodeDiagramUrl,
+  encodeViewState,
   extractDiagramSymbols,
   extractTagDeclarations,
   formatDateLabel,
@@ -33399,7 +33625,6 @@ export {
   hslToHex,
   inferParticipantType,
   inferRoles,
-  injectBranding,
   isArchiveColumn,
   isExtendedChartType,
   isRecognizedColorName,
@@ -33424,8 +33649,8 @@ export {
   looksLikeSitemap,
   looksLikeState,
   makeDgmoError,
+  matchColorParens,
   monokaiPalette,
-  mute,
   nord,
   nordPalette,
   oneDarkPalette,
@@ -33443,11 +33668,11 @@ export {
   parseFirstLine,
   parseFlowchart,
   parseGantt,
+  parseInArrowLabel,
   parseInfra,
   parseInlineMarkdown,
   parseKanban,
   parseOrg,
-  parseQuadrant,
   parseSequenceDgmo,
   parseSitemap,
   parseState,
@@ -33506,6 +33731,7 @@ export {
   tokyoNightPalette,
   truncateBareUrl,
   validateComputed,
-  validateInfra
+  validateInfra,
+  validateLabelCharacters
 };
 //# sourceMappingURL=index.js.map