@diagrammo/dgmo 0.89.0 → 0.90.0

package/dist/{chunk-3AQJNY65.js → chunk-EEYQFJVK.js}

@@ -11,7 +11,7 @@ import {
   getSimpleChartLegendGroups,
   parseChart,
   parseExtendedChart
-} from "./chunk-7UDAIP6W.js";
+} from "./chunk-WHRIN7N3.js";
 import {
   EMPHASIS_DIM_OPACITY,
   EMPHASIS_DIM_TEXT_OPACITY,
@@ -25,25 +25,25 @@ import {
   initD3Chart,
   renderChartTitle,
   resolveExportPalette
-} from "./chunk-UKJLPA7R.js";
+} from "./chunk-X6IZP2BD.js";
 import {
   layoutInlineHeader
 } from "./chunk-CNUN5GO6.js";
+import {
+  computeLegendLayout
+} from "./chunk-NS7L7YKH.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_OFFSET,
   TITLE_Y
 } from "./chunk-VLC6WNRD.js";
-import {
-  computeLegendLayout
-} from "./chunk-NS7L7YKH.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   tagAttrKey
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   LEGEND_DOT_R,
   LEGEND_ENTRY_FONT_SIZE,
@@ -52,7 +52,8 @@ import {
   legendChromeColors
 } from "./chunk-I6GGMCTV.js";
 import {
-  measureText
+  measureText,
+  truncateText
 } from "./chunk-KAO7JL4I.js";
 import {
   contrastText,
@@ -418,6 +419,27 @@ function planCategoryLabels(labels, slot, font = TICK_FONT) {
     keep: all(stride)
   };
 }
+function rotatedLeftReach(first, plan, font) {
+  if (!plan.rotate || first === void 0) return 0;
+  const rad = LABEL_ROTATE_DEG * Math.PI / 180;
+  return measureText(first, font) * Math.cos(rad) + font * 0.8 * Math.sin(rad);
+}
+function planLabelsFitLeft(labels, mLeft0, plotWFor, slotFor, firstOffset, font = TICK_FONT) {
+  const EDGE = 4;
+  let mLeft = mLeft0;
+  let plotW = plotWFor(mLeft);
+  let plan = planCategoryLabels(labels, slotFor(plotW), font);
+  for (let i = 0; i < 6; i++) {
+    const reach = rotatedLeftReach(labels[0], plan, font);
+    const need = Math.ceil(reach + EDGE - firstOffset(plotW));
+    const next = Math.max(mLeft0, need);
+    if (next === mLeft) break;
+    mLeft = next;
+    plotW = plotWFor(mLeft);
+    plan = planCategoryLabels(labels, slotFor(plotW), font);
+  }
+  return { mLeft, plotW, plan };
+}
 function labelSurvives(plan, i) {
   return plan.keep.has(i);
 }
@@ -485,12 +507,19 @@ 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 mLeft0 = computeLeftMargin(chart.ylabel, leftLabels);
+  const catLabels = data.map((d) => d.label);
+  const fit = horizontal ? null : planLabelsFitLeft(
+    catLabels,
+    mLeft0,
+    (ml) => width - ml - 32,
+    (pw) => data.length === 0 ? Infinity : pw / data.length,
+    // scaleBand padding 0.3: first centre sits 0.65 steps in
+    (pw) => pw / (data.length + 0.3) * 0.65
   );
+  const mLeft = fit ? fit.mLeft : mLeft0;
+  const plotW = fit ? fit.plotW : width - mLeft - 32;
+  const labelPlan = fit?.plan ?? planCategoryLabels(catLabels, Infinity);
   const m = {
     top: top + 8,
     right: 32,
@@ -719,13 +748,18 @@ 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(
+  const mLeft0 = computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)]);
+  const fit = planLabelsFitLeft(
     data.map((d) => d.label),
-    data.length > 0 ? plotW / data.length : plotW
+    mLeft0,
+    (ml) => width - ml - mRight,
+    (pw) => data.length > 0 ? pw / data.length : pw,
+    (pw) => (data.length > 0 ? pw / data.length : pw) * 0.5
   );
+  const mLeft = fit.mLeft;
+  const plotW = fit.plotW;
+  const labelPlan = fit.plan;
   const m = {
     top: top + 8,
     right: mRight,
@@ -1481,6 +1515,11 @@ function renderScatter(svg, chart, width, height, colors, palette, isDark, textC
 // src/charts-d3/sankey.ts
 var NODE_W = 20;
 var NODE_GAP = 14;
+var LOOP_GAP = 8;
+var LOOP_BEND = 1.25;
+var LABEL_FONT3 = 13;
+var LABEL_PAD = 6;
+var MAX_LABEL_MARGIN = 0.4;
 var RIBBON_FILL_OPACITY = 0.6;
 function renderSankey(svg, chart, width, height, colors, bgColor, textColor, topInset) {
   const links = chart.links ?? [];
@@ -1519,9 +1558,31 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
       raw: chart.nodeColors?.[name] ?? colors[i % colors.length]
     })
   );
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const l of links) {
+    const list = outgoing.get(l.source) ?? [];
+    list.push(l);
+    outgoing.set(l.source, list);
+  }
+  const backEdges = /* @__PURE__ */ new Set();
+  const visitState = /* @__PURE__ */ new Map();
+  const visit = (name) => {
+    visitState.set(name, "open");
+    for (const l of outgoing.get(name) ?? []) {
+      const st = visitState.get(l.target);
+      if (st === "open") backEdges.add(l);
+      else if (st === void 0) visit(l.target);
+    }
+    visitState.set(name, "done");
+  };
+  const hasIncoming = new Set(links.map((l) => l.target));
+  for (const name of names) if (!hasIncoming.has(name)) visit(name);
+  for (const name of names) if (!visitState.has(name)) visit(name);
+  const forwardLinks = links.filter((l) => !backEdges.has(l));
+  const backLinks = links.filter((l) => backEdges.has(l));
   for (let pass = 0; pass < names.length; pass++) {
     let changed = false;
-    for (const l of links) {
+    for (const l of forwardLinks) {
       const s = node.get(l.source);
       const t = node.get(l.target);
       if (t.rank < s.rank + 1) {
@@ -1539,17 +1600,44 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
   const maxRank = Math.max(...[...node.values()].map((n) => n.rank));
   const layers = Array.from({ length: maxRank + 1 }, () => []);
   for (const n of node.values()) layers[n.rank].push(n);
-  const plotLeft = 16;
+  let plotLeft = 16;
   const top = topInset + 8;
-  const plotW = width - plotLeft - 16 - measureText("M", 14);
-  const plotH = height - top - 24;
-  let valueScale = Infinity;
-  for (const layer of layers) {
-    const tot = layer.reduce((a, n) => a + n.value, 0);
-    const avail = plotH - (layer.length - 1) * NODE_GAP;
-    if (tot > 0) valueScale = Math.min(valueScale, avail / tot);
-  }
-  if (!isFinite(valueScale)) valueScale = 1;
+  const rightPad = 16;
+  let plotH = height - top - 24;
+  const fitScale = (h) => {
+    let scale = Infinity;
+    for (const layer of layers) {
+      const tot = layer.reduce((a, n) => a + n.value, 0);
+      const avail = h - (layer.length - 1) * NODE_GAP;
+      if (tot > 0) scale = Math.min(scale, avail / tot);
+    }
+    return isFinite(scale) && scale > 0 ? scale : 1;
+  };
+  let valueScale = fitScale(plotH);
+  if (backLinks.length > 0) {
+    const backTotal = backLinks.reduce((a, l) => a + l.value, 0);
+    const reserve = backTotal * valueScale + LOOP_GAP * (backLinks.length + 1);
+    plotH = Math.max(plotH * 0.5, plotH - reserve);
+    valueScale = fitScale(plotH);
+  }
+  const bend = /* @__PURE__ */ new Map();
+  let leftBend = 0;
+  for (const l of backLinks) {
+    const over = l.value * valueScale * LOOP_BEND;
+    bend.set(l.source, Math.max(bend.get(l.source) ?? 0, over));
+    if (node.get(l.target).rank === 0) leftBend = Math.max(leftBend, over);
+  }
+  plotLeft += leftBend;
+  const labelOffset = (n) => NODE_W + (bend.get(n.name) ?? 0) + LABEL_PAD;
+  let labelMargin = 0;
+  for (const n of layers[maxRank]) {
+    labelMargin = Math.max(
+      labelMargin,
+      labelOffset(n) - NODE_W + measureText(n.name, LABEL_FONT3)
+    );
+  }
+  labelMargin = Math.min(labelMargin, width * MAX_LABEL_MARGIN);
+  const plotW = Math.max(NODE_W, width - plotLeft - rightPad - labelMargin);
   const layerX = (r) => plotLeft + (maxRank === 0 ? 0 : r * (plotW - NODE_W) / maxRank);
   const placeLayer = (layer) => {
     layer.sort((a, b) => a.order - b.order);
@@ -1569,7 +1657,7 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
     const order = forward ? [...layers.keys()] : [...layers.keys()].reverse();
     for (const r of order) {
       for (const n of layers[r]) {
-        const neigh = forward ? links.filter((l) => l.target === n.name).map((l) => node.get(l.source)) : links.filter((l) => l.source === n.name).map((l) => node.get(l.target));
+        const neigh = forward ? forwardLinks.filter((l) => l.target === n.name).map((l) => node.get(l.source)) : forwardLinks.filter((l) => l.source === n.name).map((l) => node.get(l.target));
         n.order = neigh.length ? neigh.reduce((a, m) => a + center(m), 0) / neigh.length : center(n);
       }
       placeLayer(layers[r]);
@@ -1581,12 +1669,16 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
     outOff.set(n.name, n.y);
     inOff.set(n.name, n.y);
   }
-  const ordered = [...links].sort((a, b) => {
-    const sa = node.get(a.source);
-    const sb = node.get(b.source);
-    if (sa.y !== sb.y) return sa.y - sb.y;
-    return node.get(a.target).y - node.get(b.target).y;
-  });
+  const ordered = [
+    ...[...forwardLinks].sort((a, b) => {
+      const sa = node.get(a.source);
+      const sb = node.get(b.source);
+      if (sa.y !== sb.y) return sa.y - sb.y;
+      return node.get(a.target).y - node.get(b.target).y;
+    }),
+    ...backLinks
+  ];
+  let laneY = top + plotH + LOOP_GAP;
   for (const l of ordered) {
     const s = node.get(l.source);
     const t = node.get(l.target);
@@ -1600,13 +1692,24 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
     const cx0 = sx + (tx - sx) * 0.5;
     const raw = l.color ?? s.raw;
     const color = solid ? raw : mix(raw, bgColor, 45);
-    const ribbon = svg.append("path").attr(
-      "d",
-      `M${sx},${sy} C${cx0},${sy} ${cx0},${ty} ${tx},${ty} L${tx},${ty + th} C${cx0},${ty + th} ${cx0},${sy + th} ${sx},${sy + th} Z`
-    ).attr("fill", color).attr(
-      "fill-opacity",
-      linkDimmed(l) ? RIBBON_FILL_OPACITY * EMPHASIS_DIM_OPACITY : RIBBON_FILL_OPACITY
-    );
+    const opacity = linkDimmed(l) ? RIBBON_FILL_OPACITY * EMPHASIS_DIM_OPACITY : RIBBON_FILL_OPACITY;
+    let ribbon;
+    if (backEdges.has(l)) {
+      const lane = laneY + th / 2;
+      laneY += th + LOOP_GAP;
+      const k = th;
+      const y1 = sy + th / 2;
+      const y2 = ty + th / 2;
+      ribbon = svg.append("path").attr(
+        "d",
+        `M${sx},${y1} C${sx + k},${y1} ${sx + k},${lane} ${sx},${lane} L${tx},${lane} C${tx - k},${lane} ${tx - k},${y2} ${tx},${y2}`
+      ).attr("fill", "none").attr("stroke", color).attr("stroke-width", th).attr("stroke-opacity", opacity);
+    } else {
+      ribbon = svg.append("path").attr(
+        "d",
+        `M${sx},${sy} C${cx0},${sy} ${cx0},${ty} ${tx},${ty} L${tx},${ty + th} C${cx0},${ty + th} ${cx0},${sy + th} ${sx},${sy + th} Z`
+      ).attr("fill", color).attr("fill-opacity", opacity);
+    }
     tagDatum(ribbon, {
       line: l.lineNumber,
       // U+241F (symbol-for-unit-separator) — collision-proof AND XML-legal;
@@ -1631,8 +1734,11 @@ function renderSankey(svg, chart, width, height, colors, bgColor, textColor, top
       value: String(n.value),
       color: n.raw
     });
-    const lastLayer = n.rank === maxRank;
-    const label = svg.append("text").attr("x", lastLayer ? n.x - 6 : n.x + NODE_W + 6).attr("y", n.y + n.h / 2 + 4).attr("text-anchor", lastLayer ? "end" : "start").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(n.name);
+    const labelX = n.x + labelOffset(n);
+    const room = (n.rank === maxRank ? width - rightPad / 2 : layerX(n.rank + 1)) - LABEL_PAD - labelX;
+    const shown = truncateText(n.name, LABEL_FONT3, room);
+    const label = svg.append("text").attr("x", labelX).attr("y", n.y + n.h / 2 + 4).attr("text-anchor", "start").attr("fill", textColor).attr("font-size", LABEL_FONT3).attr("font-family", FONT_FAMILY).text(shown);
+    if (shown !== n.name) label.append("title").text(n.name);
     if (nodeDim) label.attr("opacity", EMPHASIS_DIM_TEXT_OPACITY);
   }
 }

package/dist/{chunk-SLQT3JP3.js → chunk-EK7JYFCL.js}

@@ -4,7 +4,7 @@ import {
 import {
   isTagBlockHeading,
   matchTagBlockHeading
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   makeDgmoError
 } from "./chunk-BYU54C3S.js";

package/dist/{chunk-3C2FWS2J.js → chunk-EWERNTOX.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-44GP7PD5.js";
+} from "./chunk-MPJQMMBZ.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColor

package/dist/{chunk-4AJKOUBO.js → chunk-FDRHBQUG.js}

@@ -1,17 +1,22 @@
 import {
+  appendArrowheadMarkers,
+  appendReverseArrowheadMarkers
+} from "./chunk-XBJJP2HN.js";
+import {
+  CYLINDER_RY,
+  QUEUE_CAP,
   collectCardMetadata,
   layoutC4Components,
   layoutC4Containers,
   layoutC4Context,
   layoutC4Deployment
-} from "./chunk-LYLNMN77.js";
-import {
-  appendArrowheadMarkers,
-  appendReverseArrowheadMarkers
-} from "./chunk-XBJJP2HN.js";
+} from "./chunk-VCHYS3RD.js";
 import {
   renderInlineText
 } from "./chunk-S7W75MIM.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-NJYA4QSN.js";
 import {
   ARROWHEAD_HEIGHT,
   ARROWHEAD_WIDTH,
@@ -33,25 +38,22 @@ import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
 } from "./chunk-VLC6WNRD.js";
-import {
-  renderIntegratedLegend
-} from "./chunk-7SX4IY6T.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
 import {
   parseC4
-} from "./chunk-GSYZZFI5.js";
+} from "./chunk-LC5LY5V2.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
 import {
   resolveGroupTagColor,
   tagAttrKey
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   fillModeFromOptions
-} from "./chunk-44GP7PD5.js";
+} from "./chunk-MPJQMMBZ.js";
 import {
   LEGEND_HEIGHT
 } from "./chunk-I6GGMCTV.js";
@@ -81,9 +83,7 @@ var TYPE_LABEL_HEIGHT = 18;
 var DIVIDER_GAP = 6;
 var NAME_HEIGHT = 20;
 var BOUNDARY_LABEL_FONT_SIZE = 12;
-var CYLINDER_RY = 8;
 var CLOUD_BUMP = 7;
-var QUEUE_CAP = 16;
 var PERSON_HEAD_R = 4;
 var PERSON_ARM_SPAN = 10;
 var PERSON_LEG_SPAN = 7;
@@ -232,7 +232,7 @@ function renderC4Context(container, parsed, layout, palette, isDark, onClickItem
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
       } else {
         const tagGroup = parsed.tagGroups.find(
-          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+          (g) => tagAttrKey(g.name) === tagKey || g.alias?.toLowerCase() === tagKey
         );
         if (tagGroup?.defaultValue) {
           nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
@@ -863,7 +863,7 @@ function renderC4Containers(container, parsed, layout, palette, isDark, onClickI
         nodeG.attr(`data-tag-${tagKey}`, tagValue.toLowerCase());
       } else {
         const tagGroup = parsed.tagGroups.find(
-          (g) => g.name.toLowerCase() === tagKey || g.alias?.toLowerCase() === tagKey
+          (g) => tagAttrKey(g.name) === tagKey || g.alias?.toLowerCase() === tagKey
         );
         if (tagGroup?.defaultValue) {
           nodeG.attr(`data-tag-${tagKey}`, tagGroup.defaultValue.toLowerCase());
@@ -1128,6 +1128,8 @@ function renderC4DeploymentForExport(content, theme, palette) {
 export {
   renderC4Context,
   renderC4ContextForExport,
+  drawCylinderCard,
+  drawQueueCard,
   renderC4Containers,
   renderC4ContainersForExport,
   renderC4ComponentsForExport,

package/dist/{chunk-FJNXXGTR.js → chunk-FS2LZBHG.js}

@@ -11,7 +11,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   AliasRegistry,
   OPTION_NOCOLON_RE,
@@ -23,7 +23,7 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-44GP7PD5.js";
+} from "./chunk-MPJQMMBZ.js";
 import {
   formatDgmoError,
   makeDgmoError,

package/dist/{chunk-LPYYZCSI.js → chunk-G5BGW4BX.js}

@@ -1,6 +1,6 @@
 import {
   compactNumber
-} from "./chunk-HUNDJTTH.js";
+} from "./chunk-A5EE66RQ.js";
 import {
   parseInlineMarkdown
 } from "./chunk-S7W75MIM.js";

package/dist/{chunk-IQ6P3HDE.js → chunk-GQVXYRPC.js}

@@ -9,10 +9,10 @@ import {
   injectDefaultTagMetadata,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   legendSuppressed
-} from "./chunk-44GP7PD5.js";
+} from "./chunk-MPJQMMBZ.js";
 import {
   LEGEND_CAPSULE_PAD,
   LEGEND_DOT_R,

package/dist/{chunk-MHAYUS65.js → chunk-GXP344YZ.js}

@@ -1,6 +1,6 @@
 import {
   tryCollectNote
-} from "./chunk-J64NZ6NF.js";
+} from "./chunk-KSZHIAI2.js";
 import {
   resolveNotes
 } from "./chunk-O753JUEZ.js";
@@ -20,7 +20,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-L5AFONQU.js";
+} from "./chunk-HX2KJEPD.js";
 import {
   AliasRegistry,
   BOXES_AND_LINES_REGISTRY,
@@ -33,7 +33,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-44GP7PD5.js";
+} from "./chunk-MPJQMMBZ.js";
 import {
   makeDgmoError,
   suggest

package/dist/{chunk-HAMF4F3P.js → chunk-GYBKG4Z6.js}

@@ -6,10 +6,10 @@ import {
   mapLegendConfig,
   mapLegendGroups,
   parsePathRings
-} from "./chunk-LR6RRDWN.js";
+} from "./chunk-QRIW46LR.js";
 import {
   parseClock
-} from "./chunk-WP2RLGDI.js";
+} from "./chunk-TCX5PMEY.js";
 import {
   fixedParts,
   formatTime,
@@ -17,14 +17,14 @@ import {
   workStatus,
   zoneParts
 } from "./chunk-A2RUBBVT.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-NJYA4QSN.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y
 } from "./chunk-VLC6WNRD.js";
-import {
-  renderIntegratedLegend
-} from "./chunk-7SX4IY6T.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";