@diagrammo/dgmo 0.95.0 → 0.97.0

package/dist/{chunk-P5XA627W.js → chunk-2FMOLWX4.js}

@@ -6,130 +6,131 @@ import {
   parseHeatmap,
   parseSankey,
   parseScatter
-} from "./chunk-H6BT45SN.js";
+} from "./chunk-WPYJAHRP.js";
+import {
+  MAP_DIAGNOSTICS
+} from "./chunk-EOYPX6SF.js";
+import {
+  parseTechRadar
+} from "./chunk-DKMZ4VMV.js";
 import {
   parsePyramid
-} from "./chunk-3PP746YM.js";
+} from "./chunk-CGP7RGLJ.js";
 import {
   parseRing
-} from "./chunk-NM5V5EKY.js";
+} from "./chunk-QLIZ7SB7.js";
 import {
   TREEMAP_DIAGNOSTICS,
   parseTreemap
-} from "./chunk-3KVUFHUJ.js";
+} from "./chunk-NBISN6FH.js";
 import {
-  MAP_DIAGNOSTICS
-} from "./chunk-EOYPX6SF.js";
+  SWOT_DIAGNOSTICS,
+  parseSwot
+} from "./chunk-KNKZGRRB.js";
 import {
   VERSION_CONTROL_DIAGNOSTICS,
   parseVersionControl
-} from "./chunk-2ZW4NBYX.js";
+} from "./chunk-R4SXMBGF.js";
 import {
   parseMap
-} from "./chunk-AULZD45V.js";
-import {
-  parseSketch
-} from "./chunk-WZBZXZ6T.js";
-import {
-  SKETCH_DIAGNOSTICS
-} from "./chunk-NWSPPGIE.js";
+} from "./chunk-IUFTAFGN.js";
 import {
   WHITEBOARD_DIAGNOSTICS,
   parseWhiteboard
-} from "./chunk-U6VS3T2M.js";
+} from "./chunk-AULFF7L2.js";
 import {
   SWIMLANE_DIAGNOSTICS,
   parseSwimlane
-} from "./chunk-J7Q4AB23.js";
+} from "./chunk-PZ5LAAO3.js";
 import {
   parseMindmap
-} from "./chunk-XIUGSUE4.js";
-import {
-  parseTechRadar
-} from "./chunk-EBVVMUAA.js";
+} from "./chunk-KTGJQJB3.js";
 import {
   parseKanban
-} from "./chunk-LKZCUFOW.js";
+} from "./chunk-B7ZH5EQ2.js";
 import {
   parseInfra
-} from "./chunk-UXNA2H2V.js";
+} from "./chunk-3C4OXVZJ.js";
 import {
   parseJourneyMap
-} from "./chunk-PGSGJLUR.js";
+} from "./chunk-TMB4YY3J.js";
+import {
+  parseGantt
+} from "./chunk-VQWLASDC.js";
 import {
   parseGoal
-} from "./chunk-7PJBJ2DU.js";
+} from "./chunk-ZMVMGZAJ.js";
 import {
   EVENT_LINE_DIAGNOSTICS,
   parseEventLine
-} from "./chunk-3GUEYQGL.js";
+} from "./chunk-L3K5O3Z5.js";
 import {
   parseTimelineEventLine
-} from "./chunk-BQO24BDM.js";
+} from "./chunk-O3HRF25Z.js";
 import {
   FAMILY_DIAGNOSTICS,
   parseFamily
-} from "./chunk-R6EGUTIV.js";
-import {
-  parseGantt
-} from "./chunk-PVWIBKV2.js";
+} from "./chunk-J467QBZF.js";
 import {
   parseClock
-} from "./chunk-NXU4N5WT.js";
+} from "./chunk-6OUMYNAJ.js";
 import {
   parseCountdown
-} from "./chunk-KBEWVCK3.js";
+} from "./chunk-EBJLT7PH.js";
 import {
   parseCycle
-} from "./chunk-NPDVWFAQ.js";
+} from "./chunk-PLQZJZ2K.js";
 import {
   parseBracket
-} from "./chunk-2WQ3YZMN.js";
+} from "./chunk-3IUMSK72.js";
 import {
   parseC4
-} from "./chunk-IXHWS2HI.js";
+} from "./chunk-5WZYJC2P.js";
 import {
   parseBlock
-} from "./chunk-BRGRIZQB.js";
+} from "./chunk-RC6PISCK.js";
 import {
   BODY_DIAGNOSTICS,
   parseBody
-} from "./chunk-JXGSTBW6.js";
+} from "./chunk-FK6HZYGK.js";
 import {
   parseBoxesAndLines
-} from "./chunk-4UVCTLRH.js";
+} from "./chunk-SNDCXT5R.js";
 import {
   parseDgmoChartType
-} from "./chunk-BTP2BMWN.js";
+} from "./chunk-XEMCNQQW.js";
 import {
   parseRaci
-} from "./chunk-KRPLP5LP.js";
+} from "./chunk-6PUBFB6D.js";
+import {
+  parseSitemap
+} from "./chunk-KMB754DO.js";
+import {
+  PERT_DIAGNOSTICS,
+  parsePert
+} from "./chunk-CUTEHGXO.js";
 import {
   parseLiveLink
-} from "./chunk-KBDMEOLI.js";
+} from "./chunk-65JFUANT.js";
 import {
   SEQUENCE_DIAGNOSTICS,
   parseSequenceDgmo
-} from "./chunk-VSAKEMDD.js";
+} from "./chunk-ROH4LYBL.js";
 import {
   parseOrg
-} from "./chunk-5OTA2PUH.js";
+} from "./chunk-YCIBBVI2.js";
 import {
-  parseSitemap
-} from "./chunk-ZECJ7Q6C.js";
-import {
-  PERT_DIAGNOSTICS,
-  parsePert
-} from "./chunk-CDM6XMOT.js";
+  parseState
+} from "./chunk-WXGFB2O2.js";
 import {
   parseFlowchart
-} from "./chunk-IY62DXT2.js";
+} from "./chunk-IAM3IDL4.js";
 import {
   GRAPH_DIAGNOSTICS
 } from "./chunk-TIVMAITN.js";
 import {
-  parseState
-} from "./chunk-LJGE43SG.js";
+  parseERDiagram
+} from "./chunk-PSNRB75I.js";
 import {
   makeYearContext,
   parseDateToken,
@@ -139,18 +140,15 @@ import {
 import {
   extractPaletteDirective
 } from "./chunk-CYTFO2LF.js";
-import {
-  parseERDiagram
-} from "./chunk-S4SJ4LLY.js";
 import {
   parseClassDiagram
-} from "./chunk-5XBYLYYI.js";
+} from "./chunk-H7DZYHQF.js";
 import {
   ARROW_DIAGNOSTIC_CODES
 } from "./chunk-N7VMGZCU.js";
 import {
   parseWireframe
-} from "./chunk-GI5R5B3S.js";
+} from "./chunk-VVZDBUHA.js";
 import {
   RACI_DIAGNOSTICS
 } from "./chunk-4WW3SGMH.js";
@@ -160,9 +158,10 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   ALIAS_DIAGNOSTICS,
+  RETIRED_CHART_TYPES,
   TIMELINE_REGISTRY,
   chartTypes,
   collectIndentedValues,
@@ -171,10 +170,11 @@ import {
   measureIndent,
   normalizeNumericToken,
   parseFirstLine,
+  peelTrailingCollapsedFlag,
   peelTrailingColorName,
   splitNameAndMeta,
   withTagAliases
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-3J7O3CU6.js";
@@ -415,7 +415,9 @@ function parseVisualizationFull(content, palette) {
       const tlGroupMatch = line.match(/^\[(.+?)\]\s*(.*?)\s*$/);
       if (tlGroupMatch) {
         const name = tlGroupMatch[1].trim();
-        const trailing = tlGroupMatch[2] ?? "";
+        const lanePeel = peelTrailingCollapsedFlag(tlGroupMatch[2] ?? "");
+        const trailing = lanePeel.rest;
+        let collapsed = lanePeel.collapsed;
         let color = null;
         let groupMeta = {};
         if (trailing) {
@@ -462,11 +464,16 @@ function parseVisualizationFull(content, palette) {
             }
           }
         }
+        if (groupMeta["collapsed"] !== void 0) {
+          if (groupMeta["collapsed"].toLowerCase() === "true") collapsed = true;
+          delete groupMeta["collapsed"];
+        }
         result.timelineGroups.push({
           name,
           color,
           metadata: groupMeta,
-          lineNumber
+          lineNumber,
+          ...collapsed && { collapsed: true }
         });
         currentTimelineGroup = name;
         currentTimelineGroupMeta = groupMeta;
@@ -1181,7 +1188,8 @@ function parseVisualizationFull(content, palette) {
   if (!result.type) {
     const firstNonEmpty = lines.find((l) => l.trim() && !l.trim().startsWith("//"))?.trim() ?? "";
     const word = firstNonEmpty.split(/\s/)[0];
-    const hint = suggest(word.toLowerCase(), allChartTypeIds);
+    const successor = RETIRED_CHART_TYPES[word.toLowerCase()];
+    const hint = successor ? `Did you mean '${successor}'?` : suggest(word.toLowerCase(), allChartTypeIds);
     let msg = `'${word}' is not a chart type`;
     msg += hint ? `. ${hint}` : ` \u2014 line 1 names the chart type, e.g. \`bar Sales\` or \`flowchart Deploy\`.`;
     const diag = makeDgmoError(1, msg);
@@ -1633,6 +1641,7 @@ var REGISTRY = [
   ...UNIVERSAL_DIAGNOSTICS,
   ...SWIMLANE_DIAGNOSTICS,
   ...RACI_DIAGNOSTICS,
+  ...SWOT_DIAGNOSTICS,
   ...TREEMAP_DIAGNOSTICS,
   ...EVENT_LINE_DIAGNOSTICS,
   ...BODY_DIAGNOSTICS,
@@ -1643,7 +1652,6 @@ var REGISTRY = [
   ...GRAPH_DIAGNOSTICS,
   ...COLOR_DIAGNOSTICS,
   ...SEQUENCE_DIAGNOSTICS,
-  ...SKETCH_DIAGNOSTICS,
   ...WHITEBOARD_DIAGNOSTICS,
   ...FAMILY_DIAGNOSTICS,
   ...ALIAS_DIAGNOSTICS
@@ -1708,7 +1716,6 @@ var REGISTRY2 = {
   gantt: { category: "diagram", parse: parseGantt },
   pert: { category: "diagram", parse: parsePert },
   "boxes-and-lines": { category: "diagram", parse: parseBoxesAndLines },
-  sketch: { category: "diagram", parse: parseSketch },
   whiteboard: { category: "diagram", parse: parseWhiteboard },
   swimlane: { category: "diagram", parse: parseSwimlane },
   family: { category: "diagram", parse: parseFamily },
@@ -1717,6 +1724,7 @@ var REGISTRY2 = {
   wireframe: { category: "diagram", parse: parseWireframe },
   "journey-map": { category: "diagram", parse: parseJourneyMap },
   raci: { category: "diagram", parse: parseRaci },
+  swot: { category: "diagram", parse: parseSwot },
   // ── Standard ECharts charts (parseChart) ──────────────────
   bar: { category: "data-chart", parse: parseChart },
   line: { category: "data-chart", parse: parseChart },
@@ -1855,7 +1863,7 @@ function detectMistypedChartType(content, resolved) {
     if (!match) return null;
     const word = match[1];
     if (ALL_KNOWN_TYPES.has(word)) return null;
-    const alias = MERMAID_FIRST_WORDS[word];
+    const alias = MERMAID_FIRST_WORDS[word] ?? RETIRED_CHART_TYPES[word];
     const suggestion = alias ? `Did you mean '${alias}'?` : suggest(word, [...ALL_KNOWN_TYPES]);
     if (!suggestion) return null;
     return emit(MISTYPED_CHART_TYPE_DX, i + 1, { word, resolved, suggestion });

package/dist/{chunk-MLY5ALOV.js → chunk-2SZILMQT.js}

@@ -1,17 +1,20 @@
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   NODE_STROKE_WIDTH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   allTasks
-} from "./chunk-KRPLP5LP.js";
+} from "./chunk-6PUBFB6D.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
@@ -21,12 +24,12 @@ import {
 import {
   fillModeFromOptions,
   legendSuppressed
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   measureText,
   truncateText,
   wrapTextToWidth
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   mix,
@@ -35,6 +38,18 @@ import {
 
 // src/raci/renderer.ts
 import * as d3Selection from "d3-selection";
+
+// src/raci/collapse.ts
+function collapsedRaciPhasesFromSource(parsed, interactiveLines) {
+  const lines = new Set(interactiveLines ?? []);
+  const ids = /* @__PURE__ */ new Set();
+  for (const phase of parsed.phases) {
+    if (phase.collapsed || lines.has(phase.lineNumber)) ids.add(phase.id);
+  }
+  return ids;
+}
+
+// src/raci/renderer.ts
 function groupDiagnosticsByTask(parsed) {
   const map = /* @__PURE__ */ new Map();
   if (parsed.diagnostics.length === 0) return map;
@@ -429,7 +444,8 @@ function renderRaci(container, parsed, palette, isDark, handlers, exportDims) {
         sPhaseHeight,
         sPhaseFont,
         sColumnInset,
-        sNodeRadius
+        sNodeRadius,
+        ctx
       );
     } else {
       renderTaskRow(
@@ -570,11 +586,25 @@ function renderLegend(svg, markers, variant, x, y, mode, chipW, palette, surface
     );
   });
 }
-function renderRaciForExport(container, parsed, palette, isDark, exportDims) {
-  renderRaci(container, parsed, palette, isDark, {}, exportDims);
+function renderRaciForExport(container, parsed, palette, isDark, exportDims, interactiveCollapsedLines) {
+  const collapsedPhases = collapsedRaciPhasesFromSource(
+    parsed,
+    interactiveCollapsedLines
+  );
+  renderRaci(
+    container,
+    parsed,
+    palette,
+    isDark,
+    { collapsedPhases },
+    exportDims
+  );
 }
-function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor, roles, roleX, roleColW, variant, surfaceBg, fillMode, showSummary, sPhaseHeight, sPhaseFont, sColumnInset, sNodeRadius) {
-  const phaseG = svg.append("g").attr("class", "raci-phase").attr("data-section", `phase-${phase.id}`).attr("data-section-toggle", "").attr("data-line-number", String(phase.lineNumber)).attr("data-phase-id", phase.id).attr("data-collapsed", collapsed ? "1" : "0").style("cursor", "pointer");
+function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor, roles, roleX, roleColW, variant, surfaceBg, fillMode, showSummary, sPhaseHeight, sPhaseFont, sColumnInset, sNodeRadius, scale) {
+  const phaseG = svg.append("g").attr("class", "raci-phase").attr("data-section", `phase-${phase.id}`).attr("data-line-number", String(phase.lineNumber)).attr("data-phase-id", phase.id).attr("data-collapsed", collapsed ? "1" : "0").style("cursor", "pointer");
+  if (phase.tasks.length > 0) {
+    phaseG.attr("data-group-toggle", phase.id).attr("aria-expanded", String(!collapsed)).attr("role", "button").attr("aria-label", phase.displayName);
+  }
   const phaseColor = phase.color ?? autoColor;
   const phaseRect = phaseG.append("rect").attr("x", x).attr("y", y + 4).attr("width", width).attr("height", sPhaseHeight - 8).attr(
     "fill",
@@ -583,17 +613,28 @@ function renderPhaseBar(svg, phase, x, y, width, palette, collapsed, autoColor,
   if (fillMode === "outline") {
     phaseRect.attr("stroke", phaseColor).attr("stroke-width", 1.25);
   }
-  const chevX = x + 12;
-  const chevY = y + sPhaseHeight / 2;
-  phaseG.append("text").attr("x", chevX).attr("y", chevY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", 9).attr("fill", palette.text).attr("opacity", 0.6).text(collapsed ? "\u25B6" : "\u25BC");
-  phaseG.append("text").attr("x", x + 26).attr("y", y + (sPhaseHeight - 4) / 2 + 2).attr("dominant-baseline", "central").attr("font-size", sPhaseFont).attr("font-weight", "bold").attr("fill", palette.text).text(phase.displayName);
+  if (phase.tasks.length > 0) {
+    renderCollapseBar(phaseG, {
+      expanded: !collapsed,
+      x,
+      y: y + 4,
+      width,
+      height: sPhaseHeight - 8,
+      rx: 4,
+      fill: phaseColor,
+      clipId: `raci-phase-clip-${phase.id.replace(/[^A-Za-z0-9_-]/g, "_")}`,
+      prefix: "raci",
+      scale
+    });
+  }
+  phaseG.append("text").attr("x", x + 12).attr("y", y + (sPhaseHeight - 4) / 2 + 2).attr("dominant-baseline", "central").attr("font-size", sPhaseFont).attr("font-weight", "bold").attr("fill", palette.text).text(phase.displayName);
   if (collapsed) {
     const taskCount = phase.tasks.length;
     if (taskCount > 0) {
       const labelTextWidth = measureText(phase.displayName, sPhaseFont, {
         bold: true
       });
-      phaseG.append("text").attr("x", x + 26 + labelTextWidth + 10).attr("y", y + (sPhaseHeight - 4) / 2 + 2).attr("dominant-baseline", "central").attr("font-size", sPhaseFont - 1).attr("font-weight", "normal").attr("fill", palette.textMuted).text(`${taskCount} ${taskCount === 1 ? "task" : "tasks"}`);
+      phaseG.append("text").attr("x", x + 12 + labelTextWidth + 10).attr("y", y + (sPhaseHeight - 4) / 2 + 2).attr("dominant-baseline", "central").attr("font-size", sPhaseFont - 1).attr("font-weight", "normal").attr("fill", palette.textMuted).text(`${taskCount} ${taskCount === 1 ? "task" : "tasks"}`);
     }
     if (!showSummary) return;
     const alphabet = VARIANTS[variant].alphabet;
@@ -855,6 +896,7 @@ function parseQuotedSegments(message) {
 }
 
 export {
+  collapsedRaciPhasesFromSource,
   MARKER_LABELS,
   renderRaci,
   renderRaciForExport

package/dist/chunk-35A3J4Z5.js

@@ -0,0 +1,14 @@
+// src/mindmap/title-root.ts
+var TITLE_ROOT = /* @__PURE__ */ Symbol("mindmap.titleRoot");
+function markTitleRoot(node) {
+  node[TITLE_ROOT] = true;
+  return node;
+}
+function isTitleRoot(node) {
+  return node[TITLE_ROOT] === true;
+}
+
+export {
+  markTitleRoot,
+  isTitleRoot
+};

package/dist/{chunk-UXNA2H2V.js → chunk-3C4OXVZJ.js}

@@ -17,7 +17,7 @@ import {
   stripDefaultModifier,
   tagAttrKey,
   validateTagGroupNames
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   AliasRegistry,
   INFRA_BEHAVIOR_KEY_SET,
@@ -31,7 +31,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-TIIZIAGS.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   isRecognizedColorName
 } from "./chunk-3J7O3CU6.js";

package/dist/{chunk-IZHGT5HD.js → chunk-3HL6NSSQ.js}

@@ -3,34 +3,37 @@ import {
   capLabelColumn,
   computeTimeTicks,
   showFullOnHover
-} from "./chunk-NERQSSYD.js";
+} from "./chunk-D67YE4LR.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-LRTSTDJ6.js";
 import {
   INLINE_HEADER_PAD,
   layoutInlineHeader
-} from "./chunk-UIEKW4SG.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   EDGE_DASH,
   GRID_DASH,
   HAIRLINE_DASH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   keepSwimlaneToggleFocus,
   renderIntegratedLegend,
   wireSwimlaneToggle
-} from "./chunk-NMS5XSLX.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   controlsGroupCapsuleWidth,
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -42,7 +45,7 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-4SACN2C5.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -57,12 +60,12 @@ import {
   LEGEND_PILL_PAD,
   measureLegendText,
   truncateLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   CHAR_WIDTH_RATIO,
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   getEraColors,
@@ -116,7 +119,7 @@ function computeBarLabel(label, x1, barWidth, innerWidth, textColor, onFillColor
 var BAND_ACCENT_W = 4;
 var BAND_RADIUS = 4;
 var bandClipCounter = 0;
-function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, fillMode, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W) {
+function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix, dataAttr, fillMode, barH = BAR_H, bandRadius = BAND_RADIUS, bandAccentW = BAND_ACCENT_W, collapsed = false, scale) {
   const bandX = 5;
   const bandW = leftMargin - 7;
   const bandY = y - barH / 2;
@@ -128,6 +131,45 @@ function renderLabelBand(svg, y, leftMargin, color, palette, isDark, cssPrefix,
     tint.attr(dataAttr.key, dataAttr.value);
     accent.attr(dataAttr.key, dataAttr.value);
   }
+  if (collapsed) {
+    renderCollapseBar(svg, {
+      x: bandX,
+      y: bandY,
+      width: bandW,
+      height: barH,
+      rx: bandRadius,
+      fill: color,
+      clipId: `${clipId}-bar`,
+      prefix: "gantt",
+      ...scale && { scale }
+    }).style("pointer-events", "none");
+  }
+  return {
+    x: bandX,
+    y: bandY,
+    width: bandW,
+    height: barH,
+    rx: bandRadius,
+    color,
+    clipId
+  };
+}
+function renderBandToggleTarget(toggle, band, collapsed, scale) {
+  toggle.append("rect").attr("class", "gantt-group-label-hit").attr("x", band.x).attr("y", band.y).attr("width", band.width).attr("height", band.height).attr("rx", band.rx).attr("fill", "transparent");
+  if (!collapsed) {
+    renderCollapseBar(toggle, {
+      expanded: true,
+      x: band.x,
+      y: band.y,
+      width: band.width,
+      height: band.height,
+      rx: band.rx,
+      fill: band.color,
+      clipId: `${band.clipId}-bar`,
+      prefix: "gantt",
+      ...scale && { scale }
+    });
+  }
 }
 function appendTaskIcon(textEl, label, isMilestone, iconColor, textColor) {
   const icon = isMilestone ? "\u25C6" : "\u25CF";
@@ -453,7 +495,6 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
   for (const row of rows) {
     if (row.type === "lane-header") {
       const laneColor = row.laneColor === UNTAGGED_TAG_COLOR ? palette.textMuted : row.laneColor;
-      const toggleIcon = row.isCollapsed ? "\u25B6" : "\u25BC";
       const labelX = 10;
       let lx1 = 0;
       let lx2 = innerWidth;
@@ -480,7 +521,9 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         fillMode,
         sBarH,
         sBandRadius,
-        sBandAccentW
+        sBandAccentW,
+        row.isCollapsed,
+        ctx
       );
       const labelG = svg.append("g").attr("class", "gantt-lane-header").attr(`data-tag-${tagAttrKey(row.tagKey)}`, row.laneName.toLowerCase()).attr("data-lane", row.laneName).style("cursor", onToggleLane ? "pointer" : "default").on("click", () => {
         if (onToggleLane) onToggleLane(row.laneName);
@@ -500,7 +543,7 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         restoreHighlight();
         hideGanttDateIndicators(g);
       });
-      const laneFullText = toggleIcon + " " + row.laneName + (row.aggregateProgress !== null ? ` ${Math.round(row.aggregateProgress)}%` : "");
+      const laneFullText = row.laneName + (row.aggregateProgress !== null ? ` ${Math.round(row.aggregateProgress)}%` : "");
       const laneText = labelG.append("text").attr("x", labelX).attr("y", sMarginTop + yOffset + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", sFont11).attr("font-weight", "bold").attr("fill", laneColor);
       showFullOnHover(
         labelG,
@@ -541,7 +584,6 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
     } else if (row.type === "group") {
       const group = row.group;
       const isCollapsed = collapsedGroups?.has(group.name) ?? false;
-      const toggleIcon = isCollapsed ? "\u25B6" : "\u25BC";
       const tagColor = resolveTagColor(
         group.metadata,
         resolved.tagGroups,
@@ -549,7 +591,7 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         true
       );
       const groupColor = tagColor && tagColor !== UNTAGGED_TAG_COLOR ? tagColor : group.color ?? palette.textMuted;
-      renderLabelBand(
+      const groupBand = renderLabelBand(
         svg,
         sMarginTop + yOffset + sBarH / 2,
         leftMargin,
@@ -561,9 +603,11 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         fillMode,
         sBarH,
         sBandRadius,
-        sBandAccentW
+        sBandAccentW,
+        isCollapsed,
+        ctx
       );
-      const labelG = svg.append("g").attr("class", "gantt-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).style("cursor", onToggleGroup ? "pointer" : "default").on("click", () => {
+      const labelG = svg.append("g").attr("class", "gantt-group-label").attr("data-group", group.name).attr("data-line-number", String(group.lineNumber)).attr("data-group-toggle", group.name).attr("role", "button").attr("aria-expanded", String(!isCollapsed)).attr("aria-label", group.name).style("cursor", "pointer").on("click", () => {
         if (onToggleGroup) onToggleGroup(group.name);
       }).on("mouseenter", () => {
         highlightGroup(g, svg, group.name);
@@ -579,9 +623,10 @@ function drawGantt(container, resolved, palette, isDark, options, exportDims) {
         resetHighlight(g, svg);
         hideGanttDateIndicators(g);
       });
+      renderBandToggleTarget(labelG, groupBand, isCollapsed, ctx);
       const groupIndent = group.depth <= 2 ? group.depth * 14 : 2 * 14 + (group.depth - 2) * 8;
       const labelX = 10 + groupIndent;
-      const groupFullText = toggleIcon + " " + group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
+      const groupFullText = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : "");
       const groupText = labelG.append("text").attr("x", labelX).attr("y", sMarginTop + yOffset + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("font-size", sFont11).attr("font-weight", "bold").attr("fill", palette.text);
       showFullOnHover(
         labelG,