@diagrammo/dgmo 0.96.0 → 0.98.0

package/dist/{chunk-RIK6WUMO.js → chunk-XCYGOCMS.js}

@@ -1,26 +1,27 @@
+import {
+  computeQuadrantPointLabels,
+  rectCircleOverlap,
+  rectsOverlap
+} from "./chunk-YSDSFXQD.js";
 import {
   getExtendedChartLegendGroups,
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-P2GNNEMN.js";
-import {
-  computeQuadrantPointLabels,
-  rectCircleOverlap,
-  rectsOverlap
-} from "./chunk-KMU65FYM.js";
+} from "./chunk-WPYJAHRP.js";
 import {
   MIN_CANVAS_WIDTH
-} from "./chunk-EPDBWATV.js";
+} from "./chunk-K7RRXZHS.js";
 import {
   EXPORT_HEIGHT,
   EXPORT_WIDTH,
   createExportContainer,
+  drawnTitleExtraHeight,
   finalizeSvgExport,
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-6XLMTAEX.js";
+} from "./chunk-YIHRLY55.js";
 import {
   EMPHASIS_DIM_OPACITY,
   EMPHASIS_DIM_TEXT_OPACITY,
@@ -28,33 +29,33 @@ import {
 } from "./chunk-2CW5ZTNH.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_OFFSET,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   computeLegendLayout
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
   LEGEND_HEIGHT,
   LEGEND_PILL_FONT_SIZE,
   legendChromeColors
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText,
   truncateText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastText,
   getSegmentColors,
@@ -321,10 +322,12 @@ function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width, inlin
       inlineTitle.title,
       inlineTitle.titleLineNumber,
       width,
-      inlineTitle.textColor
+      inlineTitle.textColor,
+      void 0,
+      2
     );
   }
-  const titleH = hasTitle ? 40 : 0;
+  const titleH = hasTitle ? 40 + drawnTitleExtraHeight(svg) : 0;
   if (groups.length === 0) return hasTitle ? titleH + 12 : 24;
   const legendY = 8 + titleH;
   const { svg: legendSvg, height: legendH } = renderLegendSvg(groups, {
@@ -2262,8 +2265,15 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   if (std && !std.error && std.data.length > 0 && STANDARD.has(std.type)) {
     const hasTitle2 = !std.noTitle && !!std.title;
     const inlineTitle2 = inlineTitleFor(std, hasTitle2, textColor);
-    if (hasTitle2 && !inlineTitle2)
-      renderChartTitle(s, std.title, std.titleLineNumber, width, textColor);
+    const titleExtra2 = hasTitle2 && !inlineTitle2 ? renderChartTitle(
+      s,
+      std.title,
+      std.titleLineNumber,
+      width,
+      textColor,
+      void 0,
+      2
+    ) : 0;
     switch (std.type) {
       case "bar":
         renderBar(
@@ -2305,7 +2315,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           palette,
           isDark,
           textColor,
-          hasTitle2 ? 52 : 24
+          (hasTitle2 ? 52 : 24) + titleExtra2
         );
         return true;
       case "radar": {
@@ -2342,7 +2352,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           palette,
           isDark,
           textColor,
-          hasTitle2 ? 52 : 24
+          (hasTitle2 ? 52 : 24) + titleExtra2
         );
         return true;
     }
@@ -2352,8 +2362,15 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   const seriesColors = getSeriesColors(palette);
   const hasTitle = !ext.noTitle && !!ext.title;
   const inlineTitle = inlineTitleFor(ext, hasTitle, textColor);
-  if (hasTitle && !inlineTitle)
-    renderChartTitle(s, ext.title, ext.titleLineNumber, width, textColor);
+  const titleExtra = hasTitle && !inlineTitle ? renderChartTitle(
+    s,
+    ext.title,
+    ext.titleLineNumber,
+    width,
+    textColor,
+    void 0,
+    2
+  ) : 0;
   switch (ext.type) {
     case "funnel":
       renderFunnel(
@@ -2364,7 +2381,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors,
         palette,
         isDark,
-        hasTitle ? 52 : 24
+        (hasTitle ? 52 : 24) + titleExtra
       );
       return true;
     case "heatmap":
@@ -2377,7 +2394,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         isDark,
         textColor,
         bgColor,
-        hasTitle ? 52 : 24
+        (hasTitle ? 52 : 24) + titleExtra
       );
       return true;
     case "scatter": {
@@ -2414,7 +2431,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors,
         bgColor,
         textColor,
-        hasTitle ? 52 : 24
+        (hasTitle ? 52 : 24) + titleExtra
       );
       return true;
     case "chord":
@@ -2427,7 +2444,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         palette,
         isDark,
         textColor,
-        hasTitle ? 52 : 24
+        (hasTitle ? 52 : 24) + titleExtra
       );
       return true;
     case "function": {

package/dist/{chunk-PWZEJNO6.js → chunk-XMUFXJI2.js}

@@ -7,25 +7,25 @@ import {
   mutedFill,
   resolveCellColor,
   resolveColorMode
-} from "./chunk-5LG526X7.js";
+} from "./chunk-5TGZBHEJ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   contrastRatio,
   contrastText,

package/dist/{chunk-5G4DOOX2.js → chunk-XPOEE2RW.js}

@@ -1,10 +1,10 @@
 import {
   clipEndpointsToNodes,
   groupedTierCandidates
-} from "./chunk-VGAMBOOC.js";
+} from "./chunk-C6ME2L4T.js";
 import {
   computeNodeSize
-} from "./chunk-THTYCJGF.js";
+} from "./chunk-BWVJTYTJ.js";
 import {
   NODE_HEIGHT,
   NODE_WIDTH
@@ -12,7 +12,7 @@ import {
 import {
   EDGE_LABEL_FONT_SIZE,
   measureEdgeLabel
-} from "./chunk-IN7XI6NO.js";
+} from "./chunk-4NMRS6HW.js";
 
 // src/boxes-and-lines/layout-search.ts
 import dagre from "@dagrejs/dagre";
@@ -774,7 +774,9 @@ function tryStableCollapseLayout(input) {
     const r = shift(rects.get(gid(label)));
     groups.push({
       label,
-      lineNumber: 0,
+      // The `[Group]` header line, so the folded pill's toggle points at the
+      // line the `collapsed` marker belongs on (#1741).
+      lineNumber: collapseInfo.originalGroups.find((og) => og.label === label)?.lineNumber ?? 0,
       x: r.x,
       y: r.y,
       width: r.width,
@@ -1747,7 +1749,9 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
       const p = g.node(gid2(label));
       groups.push({
         label,
-        lineNumber: 0,
+        // The `[Group]` header line, so the folded pill's toggle points at the
+        // line the `collapsed` marker belongs on (#1741).
+        lineNumber: collapseInfo?.originalGroups.find((og) => og.label === label)?.lineNumber ?? 0,
         x: p.x,
         y: p.y,
         width: p.width,

package/dist/{chunk-EMGNCG5C.js → chunk-XZGXVN4T.js}

@@ -8,21 +8,21 @@ import {
   rectCircleOverlap,
   rectsOverlap,
   segmentRectOverlap
-} from "./chunk-KMU65FYM.js";
+} from "./chunk-YSDSFXQD.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   compactNumber,
   computeLegendLayout
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   measureLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   contrastRatio,
   mix,

package/dist/{chunk-BUVLLK3D.js → chunk-Y24QPREP.js}

@@ -1,7 +1,7 @@
 import {
   computeNodeText,
   layoutMindmap
-} from "./chunk-WGNP5ND2.js";
+} from "./chunk-J3YM6RA5.js";
 import {
   FULL_TEXT_ATTR,
   fullNodeText,
@@ -9,35 +9,37 @@ import {
 } from "./chunk-B5DHFFZP.js";
 import {
   parseMindmap
-} from "./chunk-SIABEREK.js";
+} from "./chunk-KTGJQJB3.js";
 import {
   extractExportSvg,
   runInExportContainer
-} from "./chunk-TOHTKLKE.js";
+} from "./chunk-Q5Q5JLRT.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-42AZPI2W.js";
 import {
   layoutInlineHeader
-} from "./chunk-R5L5E3TC.js";
+} from "./chunk-REKLKGR6.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   CARD_RADIUS,
-  COLLAPSE_BAR_HEIGHT,
   EDGE_STROKE_WIDTH,
   HEADER_HEIGHT,
   NODE_STROKE_WIDTH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   renderIntegratedLegend
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-JILEYZ2V.js";
+} from "./chunk-VVL2KKG4.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
@@ -49,15 +51,15 @@ import {
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-FUYEXLAN.js";
+} from "./chunk-RFGQDIOI.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   contrastText,
   shapeFill
@@ -378,11 +380,19 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
         }
       }
     }
-    if (!isExport && node.hiddenCount != null && node.hiddenCount > 0) {
-      const clipId = `collapse-clip-${node.id}`;
-      const defs = mainG.append("defs");
-      defs.append("clipPath").attr("id", clipId).append("rect").attr("x", node.x).attr("y", node.y).attr("width", node.width).attr("height", node.height).attr("rx", CARD_RADIUS).attr("ry", CARD_RADIUS);
-      nodeG.append("rect").attr("class", "collapse-bar").attr("x", node.x).attr("y", node.y + node.height - COLLAPSE_BAR_HEIGHT).attr("width", node.width).attr("height", COLLAPSE_BAR_HEIGHT).attr("fill", stroke).attr("clip-path", `url(#${clipId})`);
+    if (node.hasChildren) {
+      renderCollapseBar(nodeG, {
+        expanded: !(node.hiddenCount != null && node.hiddenCount > 0),
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height,
+        rx: CARD_RADIUS,
+        fill: stroke,
+        clipId: `collapse-clip-${node.id}`,
+        prefix: "mindmap",
+        scale: ctx
+      });
     }
     if (onClickItem) {
       nodeG.style("cursor", "pointer").on("click", (event) => {

package/dist/{chunk-GEHK4UD5.js → chunk-YCIOLYWL.js}

@@ -1,31 +1,35 @@
 import {
   createTooltip,
+  drawnTitleExtraHeight,
   hideTooltip,
   renderChartTitle,
   showTooltip
-} from "./chunk-6XLMTAEX.js";
+} from "./chunk-YIHRLY55.js";
 import {
   MONTH_ABBR,
   capLabelColumn,
   computeTimeTicks,
   showFullOnHover
-} from "./chunk-NERQSSYD.js";
+} from "./chunk-D67YE4LR.js";
 import {
   parseTimelineDate
-} from "./chunk-AUXUNV73.js";
+} from "./chunk-O3HRF25Z.js";
 import {
   ScaleContext
 } from "./chunk-24YPR5EH.js";
+import {
+  renderCollapseBar
+} from "./chunk-42AZPI2W.js";
 import {
   EDGE_DASH,
   GRID_DASH,
   scaleDash
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   keepSwimlaneToggleFocus,
   renderIntegratedLegend,
   wireSwimlaneToggle
-} from "./chunk-PGD6CNWO.js";
+} from "./chunk-DFEVFLEG.js";
 import {
   DEFAULT_PALETTE_ID,
   getPalette
@@ -36,7 +40,7 @@ import {
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-LGUFJ7Y2.js";
+} from "./chunk-KW3CC7SB.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,
@@ -49,10 +53,10 @@ import {
   legendChromeColors,
   measureLegendText,
   truncateLegendText
-} from "./chunk-UOCWYLYT.js";
+} from "./chunk-OZXKW5NA.js";
 import {
   measureText
-} from "./chunk-KAO7JL4I.js";
+} from "./chunk-PU5X3P3T.js";
 import {
   getEraColors,
   getSeriesColors,
@@ -81,6 +85,19 @@ import * as d3Scale from "d3-scale";
 import * as d3Selection from "d3-selection";
 var MIN_TOP_SCALE_BAND = 26;
 var MIN_BOTTOM_BAND = 30;
+function wrappedTitleExtra(title, width) {
+  if (!title) return 0;
+  const probe = d3Selection.create("svg");
+  return renderChartTitle(
+    probe,
+    title,
+    null,
+    width,
+    "currentColor",
+    void 0,
+    2
+  );
+}
 function renderEras(g, eras, scale, isVertical, innerWidth, innerHeight, onEnter, onLeave, hasScale = false, _tooltip = null, palette, reservedLabelY, fillMode, outlineBg) {
   const eraColors = getEraColors(
     palette ?? getPalette(DEFAULT_PALETTE_ID).light
@@ -752,7 +769,7 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
       });
     };
     var drawSwimlaneIcon = drawSwimlaneIcon2, relayout = relayout2, drawLegend = drawLegend2, recolorEvents = recolorEvents2;
-    const legendY = title ? 50 : 10;
+    const legendY = title ? 50 + drawnTitleExtraHeight(mainSvg) : 10;
     const legendGroups = parsed.timelineTagGroups.map((g) => {
       const pillW = measureLegendText(g.name, LG_PILL_FONT_SIZE) + LG_PILL_PAD;
       const iconSpace = viewMode ? 8 : LG_ICON_W + 4;
@@ -821,7 +838,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
   const topScaleH = timelineScale ? Math.max(ctx.structural(40), MIN_TOP_SCALE_BAND) : 0;
   const hasGroupLegend = timelineGroups.length > 0 && !parsed.noLegend;
   const margin = {
-    top: 50 + (hasGroupLegend ? 54 : ctx.aesthetic(54)) + topScaleH + eraReserve + markerReserve + tagLegendReserve,
+    top: 50 + wrappedTitleExtra(title, width) + (hasGroupLegend ? 54 : ctx.aesthetic(54)) + topScaleH + eraReserve + markerReserve + tagLegendReserve,
     right: ctx.aesthetic(40),
     bottom: Math.max(ctx.aesthetic(40), MIN_BOTTOM_BAND) + scaleMargin,
     left: ctx.aesthetic(60)
@@ -846,7 +863,8 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
     parsed.titleLineNumber,
     width,
     textColor,
-    onClickItem
+    onClickItem,
+    2
   );
   renderEras(
     g,
@@ -1044,6 +1062,9 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
       )
     }));
   }
+  const laneLineNumber = new Map(
+    tagLanes ? [] : timelineGroups.map((gr) => [gr.name, String(gr.lineNumber)])
+  );
   const totalRows = lanes.reduce((s, l) => {
     if (collapsedGroups.has(l.name)) return s + 1;
     return s + l.events.length + 1;
@@ -1066,7 +1087,7 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     ctx.aesthetic(140)
   );
   const dynamicLeftMargin = labelColumn.width;
-  const baseTopMargin = title ? 50 : ctx.aesthetic(20);
+  const baseTopMargin = title ? 50 + wrappedTitleExtra(title, width) : ctx.aesthetic(20);
   const margin = {
     top: baseTopMargin + topScaleH + eraReserve + markerReserve + tagLegendReserve,
     right: ctx.aesthetic(40),
@@ -1094,7 +1115,8 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     parsed.titleLineNumber,
     width,
     textColor,
-    onClickItem
+    onClickItem,
+    2
   );
   renderEras(
     g,
@@ -1146,7 +1168,6 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
   for (const lane of lanes) {
     const laneColor = groupColorMap.get(lane.name) ?? textColor;
     const isCollapsed = collapsedGroups.has(lane.name);
-    const toggleIcon = isCollapsed ? "\u25B6" : "\u25BC";
     const bandX = -margin.left + 5;
     const bandW = margin.left - 7;
     const bandY = curY;
@@ -1157,9 +1178,43 @@ function renderTimelineHorizontalGrouped(container, parsed, palette, isDark, set
     g.append("clipPath").attr("id", clipId).append("rect").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx);
     g.append("rect").attr("class", "tl-group-header-bg").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("rx", sBandRx).attr("fill", shapeFill(palette, laneColor, isDark, { mode: fillMode })).style("pointer-events", "none");
     g.append("rect").attr("class", "tl-group-header-accent").attr("data-group", lane.name).attr("x", bandX).attr("y", bandY).attr("width", sBandAccentW).attr("height", bandH).attr("fill", laneColor).attr("clip-path", `url(#${clipId})`).style("pointer-events", "none");
+    if (isCollapsed) {
+      renderCollapseBar(g, {
+        x: bandX,
+        y: bandY,
+        width: bandW,
+        height: bandH,
+        rx: sBandRx,
+        fill: laneColor,
+        clipId: `${clipId}-bar`,
+        prefix: "tl",
+        scale: ctx
+      }).style("pointer-events", "none");
+    }
     const headerG = g.append("g").attr("class", "tl-group-header").attr("data-group", lane.name).style("cursor", "pointer").on("mouseenter", () => fadeToGroup(g, lane.name)).on("mouseleave", () => fadeReset(g)).on("click", () => toggleGroup(lane.name));
+    if (lane.events.length > 0) {
+      const headerLine = laneLineNumber.get(lane.name);
+      if (headerLine !== void 0) {
+        headerG.attr("data-group-toggle", lane.name).attr("data-line-number", headerLine).attr("role", "button").attr("aria-expanded", isCollapsed ? "false" : "true").attr("aria-label", lane.name);
+      }
+      headerG.append("rect").attr("class", "tl-group-header-hit").attr("x", bandX).attr("y", bandY).attr("width", bandW).attr("height", bandH).attr("fill", "transparent");
+      if (!isCollapsed && headerLine !== void 0) {
+        renderCollapseBar(headerG, {
+          expanded: true,
+          x: bandX,
+          y: bandY,
+          width: bandW,
+          height: bandH,
+          rx: sBandRx,
+          fill: laneColor,
+          clipId: `${clipId}-bar`,
+          prefix: "tl",
+          scale: ctx
+        });
+      }
+    }
     const headerText = headerG.append("text").attr("x", bandX + 5).attr("y", curY + sBarH / 2).attr("dy", "0.35em").attr("text-anchor", "start").attr("fill", textColor).attr("font-size", sLaneHeaderFont).attr("font-weight", "bold");
-    const headerFull = `${toggleIcon} ${lane.name}`;
+    const headerFull = lane.name;
     showFullOnHover(
       headerG,
       headerText,
@@ -1344,7 +1399,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     const scaleMargin = timelineScale ? ctx.aesthetic(40) : 0;
     const markerMargin = timelineMarkers.length > 0 ? ctx.aesthetic(30) : 0;
     const margin = {
-      top: ctx.aesthetic(104) + markerMargin + tagLegendReserve,
+      top: ctx.aesthetic(104) + wrappedTitleExtra(title, width) + markerMargin + tagLegendReserve,
       right: ctx.aesthetic(40) + scaleMargin,
       bottom: ctx.aesthetic(40),
       left: ctx.aesthetic(60) + scaleMargin
@@ -1361,7 +1416,8 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       parsed.titleLineNumber,
       width,
       textColor,
-      onClickItem
+      onClickItem,
+      2
     );
     renderEras(
       g,
@@ -1485,7 +1541,7 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
     const scaleMargin = timelineScale ? ctx.aesthetic(40) : 0;
     const markerMargin = timelineMarkers.length > 0 ? ctx.aesthetic(30) : 0;
     const margin = {
-      top: ctx.aesthetic(104) + markerMargin + tagLegendReserve,
+      top: ctx.aesthetic(104) + wrappedTitleExtra(title, width) + markerMargin + tagLegendReserve,
       right: ctx.aesthetic(200),
       bottom: ctx.aesthetic(40),
       left: ctx.aesthetic(60) + scaleMargin
@@ -1503,7 +1559,8 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
       parsed.titleLineNumber,
       width,
       textColor,
-      onClickItem
+      onClickItem,
+      2
     );
     renderEras(
       g,
@@ -1628,6 +1685,11 @@ function renderTimelineVertical(container, parsed, palette, isDark, setup, hover
   }
 }
 var timelineCollapseState = /* @__PURE__ */ new WeakMap();
+function collapsedTimelineGroupsFromSource(parsed) {
+  return new Set(
+    parsed.timelineGroups.filter((g) => g.collapsed).map((g) => g.name)
+  );
+}
 var tlBandClipCounter = 0;
 function renderTimeline(container, parsed, palette, isDark, onClickItem, exportDims, activeTagGroup, swimlaneTagGroup, onTagStateChange, viewMode, exportMode) {
   keepSwimlaneToggleFocus(
@@ -1661,11 +1723,18 @@ function drawTimeline(container, parsed, palette, isDark, onClickItem, exportDim
   swimlaneTagGroup = setup.swimlaneTagGroup;
   const { isVertical, tagLanes } = setup;
   const hovers = makeTimelineHoverHelpers();
-  let collapsedGroups = timelineCollapseState.get(container);
-  if (!collapsedGroups) {
-    collapsedGroups = /* @__PURE__ */ new Set();
-    timelineCollapseState.set(container, collapsedGroups);
+  let foldState = timelineCollapseState.get(container);
+  if (!foldState) {
+    foldState = { collapsed: /* @__PURE__ */ new Set(), markers: /* @__PURE__ */ new Set() };
+    timelineCollapseState.set(container, foldState);
   }
+  const markers = collapsedTimelineGroupsFromSource(parsed);
+  for (const m of markers)
+    if (!foldState.markers.has(m)) foldState.collapsed.add(m);
+  for (const m of foldState.markers)
+    if (!markers.has(m)) foldState.collapsed.delete(m);
+  foldState.markers = markers;
+  const collapsedGroups = foldState.collapsed;
   function toggleGroup(name) {
     if (collapsedGroups.has(name)) collapsedGroups.delete(name);
     else collapsedGroups.add(name);

package/dist/{chunk-V2NQV7VL.js → chunk-YFIDR7JH.js}

@@ -2,11 +2,11 @@ import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
-} from "./chunk-VLC6WNRD.js";
+} from "./chunk-GULGSH2Z.js";
 import {
   EDGE_DASH,
   HAIRLINE_DASH
-} from "./chunk-XCKNFFKM.js";
+} from "./chunk-WH6E6SHC.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";