@diagrammo/dgmo 0.69.0 → 0.71.0

package/dist/{chunk-GJ42T24G.js → chunk-TGGKBY22.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-A4GOY3PE.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QP773H5T.js";
+} from "./chunk-6S53NO3M.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
@@ -36,16 +36,16 @@ import {
   isSequenceBlock,
   isSequenceNote,
   isSequenceSection
-} from "./chunk-TDKWKVN3.js";
+} from "./chunk-FFD6A3B2.js";
 import {
   resolveActiveTagGroup,
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   contrastText,
   mix,
@@ -415,24 +415,40 @@ var SECTION_LABEL_CLEARANCE_ABOVE = 12;
 var SECTION_LABEL_CLEARANCE_BELOW = 5;
 function summarizeSectionParticipation(messages, msgIndices) {
   const summary = /* @__PURE__ */ new Map();
-  const bump = (id, key) => {
-    const entry = summary.get(id) ?? { sends: 0, receives: 0 };
+  const bump = (id, key, lineNumber) => {
+    const entry = summary.get(id) ?? {
+      sends: 0,
+      receives: 0,
+      firstLine: lineNumber
+    };
     entry[key] += 1;
     summary.set(id, entry);
   };
   for (const idx of msgIndices) {
     const msg = messages[idx];
     if (!msg) continue;
-    bump(msg.from, "sends");
-    bump(msg.to, "receives");
+    bump(msg.from, "sends", msg.lineNumber);
+    bump(msg.to, "receives", msg.lineNumber);
   }
   return summary;
 }
+function collapsedGroupMemberLine(labels, maxWidth, fontSize) {
+  if (labels.length === 0) return "";
+  const full = labels.join(" \xB7 ");
+  if (measureText(full, fontSize) <= maxWidth) return full;
+  for (let keep = labels.length - 1; keep >= 1; keep--) {
+    const line = `${labels.slice(0, keep).join(" \xB7 ")} +${labels.length - keep}`;
+    if (measureText(line, fontSize) <= maxWidth) return line;
+  }
+  const count = labels.length === 1 ? "1 member" : `${labels.length} members`;
+  return measureText(count, fontSize) <= maxWidth ? count : "";
+}
 function sectionMarkRadius(touches) {
   if (touches >= 4) return 6;
   if (touches >= 2) return 4.5;
   return 3.5;
 }
+var SECTION_MARK_HIT_RADIUS = 9;
 function buildRenderSequence(messages) {
   const steps = [];
   const stack = [];
@@ -1036,6 +1052,12 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   const GROUP_PADDING_TOP = 22;
   const GROUP_PADDING_BOTTOM = 8;
   const GROUP_LABEL_SIZE = 11;
+  const sGroupLabelSize = ctx.text(GROUP_LABEL_SIZE);
+  const GROUP_LABEL_WEIGHT = "bold";
+  const GROUP_MEMBER_SIZE = 9;
+  const sGroupMemberSize = ctx.text(GROUP_MEMBER_SIZE);
+  const GROUP_MEMBER_GAP = 3;
+  const GROUP_MEMBER_PADDING_X = 6;
   const showTitle = !!title && parsedOptions["no-title"] !== "on";
   const titleOffset = showTitle ? sTitleHeight : 0;
   const LEGEND_FIXED_GAP = 8;
@@ -1363,10 +1385,18 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       collapsedGroupNames.add(group.name);
       collapsedGroupMeta.set(group.name, {
         lineNumber: group.lineNumber,
+        participantIds: group.participantIds,
         ...group.metadata !== void 0 && { metadata: group.metadata }
       });
     }
   }
+  const participantLabels = new Map(
+    parsed.participants.map((p) => [String(p.id), p.label])
+  );
+  const groupToggleName = (groupName, memberIds) => {
+    const labels = memberIds.map((id) => participantLabels.get(id) ?? id);
+    return labels.length > 0 ? `${groupName}, ${labels.join(", ")}` : groupName;
+  };
   const participantTagColor = (id) => {
     const direct = getTagColor(tagMap?.participants.get(id));
     if (direct) return direct;
@@ -1386,11 +1416,10 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const groupTagColor = getTagColor(groupTagValue || void 0);
     const fillColor = groupTagColor ? mix(groupTagColor, themeBaseBg(palette, isDark), isDark ? 15 : 20) : isDark ? palette.surface : palette.bg;
     const strokeColor = groupTagColor || palette.textMuted;
-    const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("cursor", "pointer");
-    groupG.append("title").text("Click to collapse");
+    const groupG = svg.append("g").attr("class", "group-box-wrapper").attr("data-group-toggle", "").attr("data-group-line", String(group.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "true").attr("aria-label", groupToggleName(group.name, group.participantIds)).attr("cursor", "pointer");
     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("pointer-events", "none").attr("class", "group-box");
     groupG.append("rect").attr("x", minX).attr("y", boxY).attr("width", maxX - minX).attr("height", participantStartY - boxY).attr("fill", "transparent").attr("class", "group-label-hit");
-    groupG.append("text").attr("x", (minX + maxX) / 2).attr("y", boxY + GROUP_LABEL_SIZE + 4).attr("text-anchor", "middle").attr("fill", strokeColor).attr("font-size", GROUP_LABEL_SIZE).attr("font-weight", "bold").attr("opacity", 0.7).attr("pointer-events", "none").attr("class", "group-label").text(group.name);
+    groupG.append("text").attr("x", (minX + maxX) / 2).attr("y", boxY + sGroupLabelSize + 4).attr("text-anchor", "middle").attr("fill", strokeColor).attr("font-size", sGroupLabelSize).attr("font-weight", GROUP_LABEL_WEIGHT).attr("opacity", 0.7).attr("pointer-events", "none").attr("class", "group-label").text(group.name);
   }
   const bandLeftmostX = Math.min(...Array.from(participantX.values()));
   const bandRightmostX = Math.max(...Array.from(participantX.values()));
@@ -1461,12 +1490,24 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       const participantG = svg.select(
         `.participant[data-participant-id="${participant.id}"]`
       );
-      participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr("cursor", "pointer");
-      participantG.append("title").text("Click to expand");
+      participantG.attr("data-group-toggle", "").attr("data-group-line", String(meta.lineNumber)).attr("tabindex", "0").attr("role", "button").attr("aria-expanded", "false").attr(
+        "aria-label",
+        groupToggleName(participant.id, meta.participantIds)
+      ).attr("cursor", "pointer");
       const pFill = effectiveTagColor ? mix(effectiveTagColor, themeBaseBg(palette, isDark), 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", ctx.text(13)).attr("font-weight", 500).text(participant.label);
+      const memberLine = collapsedGroupMemberLine(
+        meta.participantIds.map((id) => participantLabels.get(id) ?? id),
+        boxW - GROUP_MEMBER_PADDING_X * 2,
+        sGroupMemberSize
+      );
+      const boxMidY = -GROUP_PADDING_TOP + fullH / 2;
+      const nameY = memberLine ? boxMidY - (sGroupMemberSize + GROUP_MEMBER_GAP) / 2 : boxMidY;
+      participantG.append("text").attr("x", 0).attr("y", nameY).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.text).attr("font-size", sGroupLabelSize).attr("font-weight", GROUP_LABEL_WEIGHT).attr("class", "collapsed-group-label").text(participant.label);
+      if (memberLine) {
+        participantG.append("text").attr("x", 0).attr("y", boxMidY + (sGroupLabelSize + GROUP_MEMBER_GAP) / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("fill", palette.textMuted).attr("font-size", sGroupMemberSize).attr("class", "collapsed-group-members").text(memberLine);
+      }
       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})`);
     }
@@ -1752,6 +1793,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
       }
       const markColor = participantTagColor(participant.id) ?? palette.text;
       const radius = sectionMarkRadius(part.sends + part.receives);
+      sectionG.append("circle").attr("cx", markX).attr("cy", markY).attr("r", Math.max(radius, SECTION_MARK_HIT_RADIUS)).attr("fill", "transparent").attr("class", "section-mark-hit").attr("data-participant-id", participant.id).attr("data-section-mark-line", String(part.firstLine)).attr("cursor", "pointer");
       if (part.sends === 0) {
         mark.attr("r", radius).attr("fill", bandFill).attr("stroke", markColor).attr("stroke-width", 1.6).attr("class", "section-mark section-mark-receives");
       } else {
@@ -2015,6 +2057,7 @@ export {
   applyCollapseProjection,
   groupMessagesBySection,
   summarizeSectionParticipation,
+  collapsedGroupMemberLine,
   buildRenderSequence,
   computeActivations,
   applyPositionOverrides,
@@ -2022,4 +2065,4 @@ export {
   renderSequenceDiagram,
   buildNoteMessageMap
 };
-//# sourceMappingURL=chunk-GJ42T24G.js.map
+//# sourceMappingURL=chunk-TGGKBY22.js.map

package/dist/{chunk-F7SKUWWS.js → chunk-UIBPFSIT.js}

@@ -1,7 +1,7 @@
 import {
   computeNodeText,
   layoutMindmap
-} from "./chunk-42FSJTZB.js";
+} from "./chunk-6EDBUKC7.js";
 import {
   extractExportSvg,
   runInExportContainer
@@ -26,7 +26,7 @@ import {
 } from "./chunk-A4GOY3PE.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QP773H5T.js";
+} from "./chunk-6S53NO3M.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
@@ -39,18 +39,18 @@ import {
 } from "./chunk-QX53GOI7.js";
 import {
   parseMindmap
-} from "./chunk-CJGSCQNP.js";
+} from "./chunk-QAJFIXJE.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   contrastText,
   shapeFill
@@ -426,4 +426,4 @@ export {
   renderMindmap,
   renderMindmapForExport
 };
-//# sourceMappingURL=chunk-F7SKUWWS.js.map
+//# sourceMappingURL=chunk-UIBPFSIT.js.map

package/dist/{chunk-5J42K7HM.js → chunk-UNM2PX5D.js}

@@ -9,13 +9,13 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   extractColor,
   fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   emit
 } from "./chunk-OLMWTJVU.js";
@@ -264,4 +264,4 @@ export {
   parseBody,
   extractSymbols
 };
-//# sourceMappingURL=chunk-5J42K7HM.js.map
+//# sourceMappingURL=chunk-UNM2PX5D.js.map

package/dist/{chunk-JR6H5MEF.js → chunk-UNTFANSM.js}

@@ -1,6 +1,6 @@
 import {
   tryCollectNote
-} from "./chunk-HK3JTWG3.js";
+} from "./chunk-MX3BYU7V.js";
 import {
   resolveNotes
 } from "./chunk-7NK42OIB.js";
@@ -16,7 +16,7 @@ import {
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   resolveColorWithDiagnostic
 } from "./chunk-EXNKNJ65.js";
@@ -445,4 +445,4 @@ export {
   looksLikeClassDiagram,
   extractSymbols
 };
-//# sourceMappingURL=chunk-JR6H5MEF.js.map
+//# sourceMappingURL=chunk-UNTFANSM.js.map

package/dist/{chunk-IPMHIKVA.js → chunk-UTVKOGFF.js}

@@ -4,7 +4,7 @@ import {
 import {
   isTagBlockHeading,
   matchTagBlockHeading
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   makeDgmoError
 } from "./chunk-OLMWTJVU.js";
@@ -402,4 +402,4 @@ export {
   normalizePertSourceForShare,
   resolveOrgImports
 };
-//# sourceMappingURL=chunk-IPMHIKVA.js.map
+//# sourceMappingURL=chunk-UTVKOGFF.js.map

package/dist/{chunk-XRDRIUUB.js → chunk-UVAOL2EO.js}

@@ -16,7 +16,7 @@ import {
 } from "./chunk-A4GOY3PE.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QP773H5T.js";
+} from "./chunk-6S53NO3M.js";
 import {
   getMaxLegendReservedHeight
 } from "./chunk-MTPKBSTR.js";
@@ -32,14 +32,14 @@ import {
 } from "./chunk-MTGGOCND.js";
 import {
   parseKanban
-} from "./chunk-SICO5DVQ.js";
+} from "./chunk-MKNWMFZU.js";
 import {
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   fillModeFromOptions,
   legendSuppressed
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   contrastText,
   mix,
@@ -892,4 +892,4 @@ export {
   renderKanban,
   renderKanbanForExport
 };
-//# sourceMappingURL=chunk-XRDRIUUB.js.map
+//# sourceMappingURL=chunk-UVAOL2EO.js.map

package/dist/{chunk-MGAWLZQE.js → chunk-UY77QQWU.js}

@@ -12,7 +12,7 @@ import {
   normalizeNumericToken,
   parseFirstLine,
   parseSeriesNames
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColorWithDiagnostic
@@ -1204,4 +1204,4 @@ export {
   getSimpleChartLegendGroups,
   getExtendedChartLegendGroups
 };
-//# sourceMappingURL=chunk-MGAWLZQE.js.map
+//# sourceMappingURL=chunk-UY77QQWU.js.map

package/dist/{chunk-DR43UCVQ.js → chunk-VE7PPEU3.js}

@@ -42,7 +42,7 @@ import {
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-MGAWLZQE.js";
+} from "./chunk-UY77QQWU.js";
 import {
   EMPHASIS_DIM_OPACITY,
   EMPHASIS_DIM_TEXT_OPACITY,
@@ -50,7 +50,7 @@ import {
 } from "./chunk-2CW5ZTNH.js";
 import {
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   contrastText,
   getSegmentColors,
@@ -282,6 +282,70 @@ function tagDatum(sel, o) {
 function drawValueLabel(svg, text, x, y, color, anchor = "middle") {
   svg.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("fill", color).attr("font-size", VALUE_FONT).attr("font-family", FONT_FAMILY).text(text);
 }
+var LABEL_ROTATE_DEG = 40;
+var LABEL_GAP = 8;
+var LABEL_LINE_HEIGHT = 1.25;
+function spreadIndices(total, count) {
+  if (total <= 0) return /* @__PURE__ */ new Set();
+  if (total === 1 || count <= 1) return /* @__PURE__ */ new Set([0]);
+  const n = Math.min(count, total);
+  const keep = /* @__PURE__ */ new Set();
+  for (let k = 0; k < n; k++) {
+    keep.add(Math.round(k * (total - 1) / (n - 1)));
+  }
+  return keep;
+}
+function planCategoryLabels(labels, slot, font = TICK_FONT) {
+  const n = labels.length;
+  if (n === 0) {
+    return { rotate: false, stride: 1, height: 18, keep: /* @__PURE__ */ new Set() };
+  }
+  const widest = Math.max(...labels.map((t) => measureText(t, font)));
+  const flatNeeds = widest + LABEL_GAP;
+  const flatHeight = Math.round(font * LABEL_LINE_HEIGHT) + 6;
+  const all = (stride2) => (
+    // How many labels fit at this spacing, both ends included.
+    spreadIndices(n, Math.floor((n - 1) / stride2) + 1)
+  );
+  if (slot <= 0 || flatNeeds <= slot) {
+    return {
+      rotate: false,
+      stride: 1,
+      height: flatHeight,
+      keep: spreadIndices(n, n)
+    };
+  }
+  const flatStride = Math.ceil(flatNeeds / slot);
+  if (flatStride <= 2) {
+    return { rotate: false, stride: 2, height: flatHeight, keep: all(2) };
+  }
+  const rad = LABEL_ROTATE_DEG * Math.PI / 180;
+  const rotNeeds = font * LABEL_LINE_HEIGHT / Math.sin(rad);
+  const stride = Math.max(1, Math.ceil(rotNeeds / slot));
+  return {
+    rotate: true,
+    stride,
+    height: Math.round(widest * Math.sin(rad)) + 12,
+    keep: all(stride)
+  };
+}
+function labelSurvives(plan, i) {
+  return plan.keep.has(i);
+}
+function drawCategoryLabels(svg, labels, plan, xFor, baseline, textColor, font = TICK_FONT) {
+  labels.forEach((label, i) => {
+    if (!labelSurvives(plan, i)) return;
+    const t = svg.append("text").attr("class", "dgmo-tick").attr("fill", textColor).attr("font-size", font).attr("font-family", FONT_FAMILY).text(label);
+    if (plan.rotate) {
+      t.attr(
+        "transform",
+        `translate(${xFor(i)},${baseline + font}) rotate(-${LABEL_ROTATE_DEG})`
+      ).attr("text-anchor", "end");
+    } else {
+      t.attr("x", xFor(i)).attr("y", baseline + font + 6).attr("text-anchor", "middle");
+    }
+  });
+}
 
 // src/charts-d3/bar.ts
 import { scaleBand, scaleLinear } from "d3-scale";
@@ -332,13 +396,18 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   const loVal = Math.min(0, minVal);
   const niceMax = hiVal === 0 && loVal === 0 ? 1 : hiVal;
   const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2), fmtNum(loVal), fmtNum(loVal / 2)];
+  const mLeft = computeLeftMargin(chart.ylabel, leftLabels);
+  const plotW = width - mLeft - 32;
+  const labelPlan = planCategoryLabels(
+    data.map((d) => d.label),
+    horizontal || data.length === 0 ? Infinity : plotW / data.length
+  );
   const m = {
     top: top + 8,
     right: 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, leftLabels)
+    bottom: horizontal ? 64 : Math.max(64, labelPlan.height + (chart.xlabel ? 40 : 18)),
+    left: mLeft
   };
-  const plotW = width - m.left - m.right;
   const plotH = height - m.top - m.bottom;
   const horiz = horizontal;
   const catRange = horiz ? [m.top, m.top + plotH] : [m.left, m.left + plotW];
@@ -356,13 +425,20 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
       svg.append("text").attr("x", m.left - 10).attr("y", y + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
     }
   }
-  for (const d of data) {
-    const c = (cat(d.label) ?? 0) + cat.bandwidth() / 2;
-    if (horiz) {
+  if (horiz) {
+    for (const d of data) {
+      const c = (cat(d.label) ?? 0) + cat.bandwidth() / 2;
       svg.append("text").attr("x", m.left - 10).attr("y", c + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
-    } else {
-      svg.append("text").attr("x", c).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
     }
+  } else {
+    drawCategoryLabels(
+      svg,
+      data.map((d) => d.label),
+      labelPlan,
+      (i) => (cat(data[i].label) ?? 0) + cat.bandwidth() / 2,
+      m.top + plotH,
+      textColor
+    );
   }
   const zero = val(0);
   const inner = stacked ? null : scaleBand().domain(seriesNames.map((_, i) => i)).range([0, cat.bandwidth()]).padding(0.12);
@@ -554,13 +630,19 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
   };
   const [loL, hiL] = extentFor("left");
   const [loR, hiR] = dual ? extentFor("right") : [0, 1];
+  const mLeft = computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)]);
+  const mRight = dual ? computeLeftMargin(chart.yrlabel, [fmtNum(hiR), fmtNum(loR)]) : 32;
+  const plotW = width - mLeft - mRight;
+  const labelPlan = planCategoryLabels(
+    data.map((d) => d.label),
+    data.length > 0 ? plotW / data.length : plotW
+  );
   const m = {
     top: top + 8,
-    right: dual ? computeLeftMargin(chart.yrlabel, [fmtNum(hiR), fmtNum(loR)]) : 32,
-    bottom: 64,
-    left: computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)])
+    right: mRight,
+    bottom: Math.max(64, labelPlan.height + (chart.xlabel ? 40 : 18)),
+    left: mLeft
   };
-  const plotW = width - m.left - m.right;
   const plotH = height - m.top - m.bottom;
   const x = scalePoint().domain(data.map((d) => d.label)).range([m.left, m.left + plotW]).padding(0.5);
   const yL = scaleLinear2().domain([loL, hiL]).nice().range([m.top + plotH, m.top]);
@@ -588,9 +670,14 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
       svg.append("text").attr("class", "dgmo-tick").attr("x", m.left + plotW + 10).attr("y", yR(t) + 4).attr("text-anchor", "start").attr("fill", rightTint ?? textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
     }
   }
-  for (const d of data) {
-    svg.append("text").attr("class", "dgmo-tick").attr("x", x(d.label) ?? 0).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
-  }
+  drawCategoryLabels(
+    svg,
+    data.map((d) => d.label),
+    labelPlan,
+    (i) => x(data[i].label) ?? 0,
+    m.top + plotH,
+    textColor
+  );
   svg.append("rect").attr("class", "dgmo-plot-rect").attr("x", m.left).attr("y", m.top).attr("width", plotW).attr("height", plotH).attr("fill", "transparent");
   for (let s = 0; s < seriesCount; s++) {
     const color = seriesColor(s);
@@ -2064,4 +2151,4 @@ export {
   supportsD3DataChart,
   renderDataChartD3
 };
-//# sourceMappingURL=chunk-DR43UCVQ.js.map
+//# sourceMappingURL=chunk-VE7PPEU3.js.map

package/dist/{chunk-MZBEPHFY.js → chunk-VGLSKDDI.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-NOTA6TEI.js";
 import {
   peelQuotedName
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   makeDgmoError
 } from "./chunk-OLMWTJVU.js";
@@ -787,4 +787,4 @@ export {
   resolveTaskName,
   calculateSchedule
 };
-//# sourceMappingURL=chunk-MZBEPHFY.js.map
+//# sourceMappingURL=chunk-VGLSKDDI.js.map

package/dist/{chunk-LPMYDZSO.js → chunk-VMXV2CL5.js}

@@ -1,7 +1,7 @@
 import {
   extractDatePrefix,
   parseTimelineDate
-} from "./chunk-D62K46CW.js";
+} from "./chunk-NNMNHE3J.js";
 import {
   makeYearContext,
   parseDateToken,
@@ -16,7 +16,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   EVENT_LINE_REGISTRY,
   extractColor,
@@ -27,7 +27,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   emit,
   formatDgmoError,
@@ -358,13 +358,28 @@ function parseEventLine(content, palette) {
       {
         const nowMatch = trimmed.match(NOW_RE);
         if (nowMatch) {
-          const rest = nowMatch[1].trim();
+          let rest = nowMatch[1].trim();
+          let color = null;
+          if (rest) {
+            const token = rest.split(/\s+/).pop();
+            const ex = extractColor(
+              `x ${token}`,
+              palette,
+              result.diagnostics,
+              lineNumber
+            );
+            if (ex.color !== void 0) {
+              color = token;
+              rest = rest.slice(0, rest.length - token.length).trim();
+            }
+          }
           if (!rest) {
             result.now = {
               computed: true,
               date: null,
               dateValue: null,
               label: null,
+              color,
               lineNumber
             };
           } else {
@@ -376,6 +391,7 @@ function parseEventLine(content, palette) {
                 date: prefix.startDate,
                 dateValue: parseTimelineDate(prefix.startDate),
                 label,
+                color,
                 lineNumber
               };
             } else {
@@ -670,4 +686,4 @@ export {
   EVENT_LINE_DIAGNOSTICS,
   parseEventLine
 };
-//# sourceMappingURL=chunk-LPMYDZSO.js.map
+//# sourceMappingURL=chunk-VMXV2CL5.js.map

package/dist/{chunk-5ZADM7W2.js → chunk-W27BULCB.js}

@@ -22,7 +22,7 @@ import {
 } from "./chunk-A4GOY3PE.js";
 import {
   renderIntegratedLegend
-} from "./chunk-QP773H5T.js";
+} from "./chunk-6S53NO3M.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
@@ -42,12 +42,12 @@ import {
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   fillModeFromOptions,
   legendInlineRequested,
   legendSuppressed
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 import {
   contrastText,
   mix,
@@ -317,4 +317,4 @@ export {
   renderFamilyForExport,
   renderFamily
 };
-//# sourceMappingURL=chunk-5ZADM7W2.js.map
+//# sourceMappingURL=chunk-W27BULCB.js.map

package/dist/{chunk-U4UKJPTE.js → chunk-W7SZKJR6.js}

@@ -15,10 +15,10 @@ import {
 } from "./chunk-MTGGOCND.js";
 import {
   tagAttrKey
-} from "./chunk-WKOQQDQO.js";
+} from "./chunk-DPGI742S.js";
 import {
   legendSuppressed
-} from "./chunk-M2QQQWM3.js";
+} from "./chunk-ZJJWON5O.js";
 
 // src/c4/layout.ts
 import dagre from "@dagrejs/dagre";
@@ -1718,4 +1718,4 @@ export {
   layoutC4Components,
   layoutC4Deployment
 };
-//# sourceMappingURL=chunk-U4UKJPTE.js.map
+//# sourceMappingURL=chunk-W7SZKJR6.js.map