@diagrammo/dgmo 0.53.0 → 0.55.0

package/dist/{chunk-7JDTNFAK.js → chunk-EFUQENO5.js}

@@ -7,7 +7,8 @@ import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
 import {
-  getSeriesColors
+  getSeriesColors,
+  mix
 } from "./chunk-JYDMBWRP.js";
 import {
   resolveColor
@@ -15,13 +16,19 @@ import {
 
 // src/version-control/renderer.ts
 import * as d3Selection from "d3-selection";
-var LINE = 5.5;
-var DOT = 8;
-var CORNER = 13;
-var ANG = 32;
+var LINE = 3;
+var DOT = 5.5;
+var CORNER = 10;
 var STACK = 19;
 var CIRCLED = "\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468";
 var TITLE_AREA = 40;
+var SHELF_TINT = 13;
+var SHELF_EDGE = 4;
+var SHELF_LIP = 2;
+var SHELF_PAD = 8;
+var SHELF_H = 21;
+var LEADER_GAP = 22;
+var ROW_GAP = 7;
 function clip(s, max) {
   return s.length > max ? s.slice(0, max - 1) + "\u2026" : s;
 }
@@ -94,12 +101,9 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   const pos = /* @__PURE__ */ new Map();
   const placements = [];
   let contentW, contentH, gutter, cross0, captionY = 0;
-  const cos = Math.cos(ANG * Math.PI / 180);
-  const sin = Math.sin(ANG * Math.PI / 180);
   if (!TB) {
-    const maxName = Math.max(4, ...parsed.branches.map((b) => b.name.length));
-    gutter = maxName * 7.5 + 18;
-    const along0 = gutter + 34, step = 86, laneGap = 54;
+    gutter = 14;
+    const along0 = gutter + 20, step = 88, laneGap = 50;
     cross0 = 16 + maxStack * STACK + 14;
     for (const n of nodes)
       pos.set(n.key, {
@@ -107,17 +111,34 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
         y: cross0 + n.lane * laneGap
       });
     const lanesBottom = cross0 + (laneCount - 1) * laneGap;
-    const bandY = lanesBottom + 26;
-    for (const n of nodes) {
+    const bandTop = lanesBottom + LEADER_GAP;
+    const shelfGap = 6;
+    const rowRight = [];
+    const sorted = [...nodes].sort(
+      (a, b) => pos.get(a.key).x - pos.get(b.key).x
+    );
+    for (const n of sorted) {
       const p = pos.get(n.key);
+      const w = label.get(n.key).lw + SHELF_PAD * 2;
+      const left = p.x - w / 2;
+      let row = rowRight.length;
+      for (let l = 0; l < rowRight.length; l++)
+        if (rowRight[l] + shelfGap <= left) {
+          row = l;
+          break;
+        }
+      const top = bandTop + row * (SHELF_H + ROW_GAP);
+      rowRight[row] = left + w;
       placements.push({
         node: n,
         kind: "msg",
-        diag: true,
         x: p.x,
-        y: bandY,
+        y: top,
         anchor: "start",
-        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: bandY - 3 }
+        shelfLeft: Math.max(4, left),
+        shelfTop: top,
+        shelfW: w,
+        leader: { x1: p.x, y1: p.y + DOT, x2: p.x, y2: top }
       });
       const stack = above.get(n.key) ?? [];
       stack.forEach(
@@ -133,6 +154,7 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
         })
       );
     }
+    const rowCount = rowRight.length;
     for (const b of parsed.branches) {
       if (!b.ab || b.ab.ahead + b.ab.behind === 0 || b.tip == null) continue;
       const tip = pos.get(b.tip);
@@ -146,10 +168,12 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
       });
     }
     contentW = Math.max(
-      along0 + (K - 1) * step + DOT + 70,
-      ...[...pos.entries()].map(([k, p]) => p.x + label.get(k).lw * cos)
-    ) + 18;
-    contentH = bandY + maxLW * sin + 12 * cos + 16;
+      along0 + (K - 1) * step + DOT + 40,
+      ...[...pos.entries()].map(
+        ([k, p]) => p.x + label.get(k).lw / 2 + SHELF_PAD + 8
+      )
+    ) + 8;
+    contentH = bandTop + rowCount * (SHELF_H + ROW_GAP) + 8;
     if (parsed.notes.length) {
       captionY = contentH + 4;
       contentH += 8 + parsed.notes.length * 16 + 8;
@@ -169,7 +193,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
       placements.push({
         node: n,
         kind: "msg",
-        diag: false,
         x: bandX,
         y: p.y,
         anchor: "start",
@@ -194,10 +217,16 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   }
   const showTitle = !!parsed.title;
   const titleH = showTitle ? TITLE_AREA : 0;
-  const W = Math.round(contentW);
-  const H = Math.round(contentH + titleH);
+  const baseW = contentW;
+  const baseH = contentH + titleH;
   const exportMode = !!exportDims;
-  const svg = d3Selection.select(container).append("svg").attr("width", W).attr("height", H).attr("viewBox", `0 0 ${W} ${H}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  const paneW = exportMode ? 0 : container.clientWidth || 0;
+  const paneH = exportMode ? 0 : container.clientHeight || 0;
+  const W = Math.round(Math.max(baseW, paneW));
+  const H = Math.round(Math.max(baseH, paneH));
+  const vw = exportMode ? W : paneW || W;
+  const vh = exportMode ? H : paneH || H;
+  const svg = d3Selection.select(container).append("svg").attr("width", vw).attr("height", vh).attr("viewBox", `0 0 ${W} ${H}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
   svg.append("rect").attr("width", W).attr("height", H).attr("fill", palette.bg);
   if (showTitle) {
     const t = svg.append("text").attr("class", "chart-title").attr("x", W / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
@@ -217,7 +246,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
     label,
     colorOf,
     byKey,
-    gutter,
     cross0,
     captionY,
     onClickItem && !exportMode ? onClickItem : void 0
@@ -229,7 +257,7 @@ function abText(ab) {
   if (ab.behind) a.push("\u2193" + ab.behind);
   return a.join(" ");
 }
-function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKey, gutter, cross0, captionY, onClickItem) {
+function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKey, cross0, captionY, onClickItem) {
   const nodes = parsed.nodes;
   const P = (k) => pos.get(k);
   const branchCorner = (par, n) => TB ? { x: P(n.key).x, y: P(par.key).y } : { x: P(par.key).x, y: P(n.key).y };
@@ -253,17 +281,17 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
     const N = P(n.key);
     if (n.prev != null) {
       const a = P(n.prev);
-      const e = g.append("line").attr("x1", a.x).attr("y1", a.y).attr("x2", N.x).attr("y2", N.y).attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", o);
+      const e = g.append("line").attr("x1", a.x).attr("y1", a.y).attr("x2", N.x).attr("y2", N.y).attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", o);
       if (n.ghost) e.attr("stroke-dasharray", "5 5");
     }
     if (n.parent != null) {
       const par = byKey(n.parent), cc = branchCorner(par, n), pp = P(par.key);
-      const e = g.append("path").attr("d", roundedL(pp.x, pp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", o);
+      const e = g.append("path").attr("d", roundedL(pp.x, pp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", c).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", o);
       if (n.ghost) e.attr("stroke-dasharray", "5 5");
     }
     if (n.mergeFrom != null) {
       const s = byKey(n.mergeFrom), cc = mergeCorner(s, n), sp = P(s.key);
-      g.append("path").attr("d", roundedL(sp.x, sp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", colorOf(s)).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("opacity", 0.92 * o);
+      g.append("path").attr("d", roundedL(sp.x, sp.y, cc.x, cc.y, N.x, N.y, CORNER)).attr("fill", "none").attr("stroke", colorOf(s)).attr("stroke-width", LINE).attr("stroke-linecap", "round").attr("data-branch", s.branch).attr("opacity", 0.92 * o);
     }
     if (n.cherryFrom != null)
       dlink(byKey(n.cherryFrom), n, colorOf(byKey(n.cherryFrom)), false);
@@ -284,7 +312,7 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
       if (TB) {
         g.append("text").attr("x", fp.x).attr("y", 14).attr("text-anchor", "middle").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).text(b.name);
       } else {
-        g.append("text").attr("x", gutter).attr("y", fp.y + 4).attr("text-anchor", "end").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).text(b.name);
+        g.append("text").attr("x", fp.x - DOT - 1).attr("y", fp.y - DOT - 7).attr("text-anchor", "start").attr("font-size", 12.5).attr("font-weight", 800).attr("fill", col).attr("data-branch", b.name).text(b.name);
       }
     }
   }
@@ -338,11 +366,12 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
     }
     g.append("text").attr("x", cx).attr("y", cy + 4).attr("text-anchor", "middle").attr("font-size", 10.5).attr("font-weight", weight).attr("fill", textColor).text(text);
   };
+  let shelfSeq = 0;
   for (const pl of placements) {
     const n = pl.node;
     const c = colorOf(n);
     if (pl.leader) {
-      g.append("line").attr("x1", pl.leader.x1).attr("y1", pl.leader.y1).attr("x2", pl.leader.x2).attr("y2", pl.leader.y2).attr("stroke", c).attr("stroke-width", 1).attr("opacity", 0.34 * gop(n));
+      g.append("line").attr("x1", pl.leader.x1).attr("y1", pl.leader.y1).attr("x2", pl.leader.x2).attr("y2", pl.leader.y2).attr("stroke", c).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("data-branch", n.branch).attr("opacity", 0.55 * gop(n));
     }
     if (pl.kind === "tag") pill(pl.x, pl.y, pl.w, pl.label, c, palette.bg);
     else if (pl.kind === "head")
@@ -368,7 +397,22 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf, byKe
       const L = label.get(n.key);
       const gh = n.ghost;
       const mfill = gh ? palette.textMuted : c;
-      const t = pl.diag ? g.append("text").attr("transform", `translate(${pl.x},${pl.y}) rotate(${ANG})`).attr("font-size", 12).attr("opacity", gh ? 0.55 : 1) : g.append("text").attr("x", pl.x).attr("y", pl.y + 4).attr("text-anchor", pl.anchor).attr("font-size", 12).attr("opacity", gh ? 0.55 : 1);
+      let tx = pl.x;
+      let ty = pl.y + 4;
+      let anchor = pl.anchor;
+      if (pl.shelfW != null) {
+        const left = pl.shelfLeft;
+        const top = pl.shelfTop;
+        const w = pl.shelfW;
+        const clipId = `dgmo-vc-shelf-${shelfSeq++}`;
+        g.append("clipPath").attr("id", clipId).append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE);
+        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE).attr("fill", gh ? palette.bg : mix(c, palette.bg, SHELF_TINT)).attr("data-branch", n.branch).attr("opacity", gh ? 0.5 : 1);
+        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_LIP).attr("clip-path", `url(#${clipId})`).attr("fill", c).attr("data-branch", n.branch).attr("opacity", gh ? 0.4 : 1);
+        tx = left + SHELF_PAD;
+        ty = top + SHELF_H / 2 + 4;
+        anchor = "start";
+      }
+      const t = g.append("text").attr("x", tx).attr("y", ty).attr("text-anchor", anchor).attr("font-size", 12).attr("data-branch", n.branch).attr("opacity", gh ? 0.6 : 1);
       if (L.sha)
         t.append("tspan").attr("font-family", "ui-monospace, monospace").attr("font-size", 11).attr("fill", palette.textMuted).text(L.sha + " ");
       t.append("tspan").attr("fill", mfill).attr("font-weight", n.kind === "cherry" ? 400 : 700).attr("font-style", n.kind === "cherry" ? "italic" : "normal").text(L.msg);
@@ -399,4 +443,4 @@ export {
   renderVersionControl,
   renderVersionControlForExport
 };
-//# sourceMappingURL=chunk-7JDTNFAK.js.map
+//# sourceMappingURL=chunk-EFUQENO5.js.map

package/dist/{chunk-BULHGPHK.js → chunk-EMSOFHEN.js}

@@ -14,7 +14,7 @@ import {
   formatOffsetLabel,
   isValidZone,
   parseFixedOffset
-} from "./chunk-APKUAJ2L.js";
+} from "./chunk-A2RUBBVT.js";
 import {
   emit,
   formatDgmoError,
@@ -775,4 +775,4 @@ export {
   isSubNationalUsExtent,
   resolveMap
 };
-//# sourceMappingURL=chunk-BULHGPHK.js.map
+//# sourceMappingURL=chunk-EMSOFHEN.js.map

package/dist/{chunk-3BEKKRH5.js → chunk-ETTDF3S2.js}

@@ -6,30 +6,34 @@ import {
   CARD_RADIUS,
   CONTAINER_RADIUS
 } from "./chunk-3CIOJ5YJ.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-774C2FF3.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
+import {
+  measureText,
+  wrapTextToWidth
+} from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
 } from "./chunk-JYDMBWRP.js";
-import {
-  measureText,
-  wrapTextToWidth
-} from "./chunk-4ASYQ347.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 
 // src/sketch/renderer.ts
 import * as d3 from "d3-selection";
@@ -377,7 +381,34 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     },
     width
   ) : 0;
-  const contentTop = titleOffset + legendHeight + DIAGRAM_PADDING + extraTop;
+  const hasLegend = legendGroups.length > 0;
+  const inlineRequested = parsed.options.legendInline === true;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      showInactivePills: true
+    },
+    { activeGroup: activeName },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleOffset,
+    legendReserve: legendHeight,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const contentTop = titleOffset + (header.inline ? 0 : legendHeight) + DIAGRAM_PADDING + extraTop;
   const height = Math.max(
     contentTop + maxY + DIAGRAM_PADDING,
     options.exportDims?.height ?? 0
@@ -403,15 +434,22 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     ).attr("fill", color);
   }
   if (showTitle) {
-    svg.append("text").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", 700).attr("fill", palette.text).text(parsed.title);
+    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", 700).attr("fill", palette.text).text(parsed.title);
   }
   if (legendGroups.length > 0) {
-    const legendG = svg.append("g").attr("transform", `translate(0,${titleOffset + 4})`);
+    const legendG = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${titleOffset + 4})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legendGroups,
       ...activeName !== null && { activeGroup: activeName },
       mode: exportMode ? "export" : "preview",
       showInactivePills: true,
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width
@@ -1059,4 +1097,4 @@ export {
   sketchEdgeGeometry,
   renderSketchForExport
 };
-//# sourceMappingURL=chunk-3BEKKRH5.js.map
+//# sourceMappingURL=chunk-ETTDF3S2.js.map

package/dist/{chunk-JHOAH4TI.js → chunk-ETYF5QZR.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   makeDgmoError,
   makeFail
@@ -127,4 +127,4 @@ function parsePyramid(content) {
 export {
   parsePyramid
 };
-//# sourceMappingURL=chunk-JHOAH4TI.js.map
+//# sourceMappingURL=chunk-ETYF5QZR.js.map

package/dist/{chunk-AHXIMHDQ.js → chunk-F5ZNUMSY.js}

@@ -22,12 +22,16 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-W5KMNC5U.js";
+} from "./chunk-ASPS5O6F.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-774C2FF3.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -38,25 +42,26 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseState
-} from "./chunk-AN2DQB3G.js";
+} from "./chunk-MEH4TJEX.js";
+import {
+  measureText
+} from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   mix,
   shapeFill,
   themeBaseBg
 } from "./chunk-JYDMBWRP.js";
-import {
-  measureText
-} from "./chunk-4ASYQ347.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/graph/state-renderer.ts
 import * as d3Selection from "d3-selection";
@@ -129,6 +134,32 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
       width
     )
   ) + 8 : 0;
+  const inlineRequested = legendInlineRequested(graph.options);
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportDims ? "export" : "preview",
+      showInactivePills: true
+    },
+    { activeGroup: activeTagGroup },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: graph.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleHeight,
+    legendReserve: legendH,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const diagramW = layout.width;
   const diagramH = layout.height;
   const { scale, offsetX, offsetY, canvasHeight } = fitDiagramToCanvas({
@@ -137,9 +168,8 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     diagramW,
     diagramH,
     padding: sDiagramPadding,
-    // The legend band sits directly under the title, so it reserves the same
-    // top strip fitDiagramToCanvas already offsets the diagram by.
-    titleHeight: titleHeight + legendH,
+    // Inline → one band (title only); stacked → title + legend band.
+    titleHeight: header.inline ? titleHeight : titleHeight + legendH,
     maxScale: MAX_SCALE,
     exportMode: !!exportDims
   });
@@ -157,7 +187,7 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     colors: edgeColors
   });
   if (showTitle) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", width / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).style(
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).style(
       "cursor",
       onClickItem && graph.titleLineNumber ? "pointer" : "default"
     ).text(graph.title);
@@ -173,7 +203,10 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
     }
   }
   if (hasLegend) {
-    const legendG = svg.append("g").attr("transform", `translate(0, ${titleHeight + 4})`);
+    const legendG = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleHeight + 4})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legendGroups,
       activeGroup: activeTagGroup,
@@ -181,6 +214,12 @@ function renderState(container, graph, layout, palette, isDark, onClickItem, exp
       // Inactive sibling groups stay visible as collapsed pills so the user
       // can click one to flip the active colouring dimension (as in b&l).
       showInactivePills: true,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the chart's right edge; stacked → centered below the title.
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width
@@ -439,4 +478,4 @@ export {
   renderState,
   renderStateForExport
 };
-//# sourceMappingURL=chunk-AHXIMHDQ.js.map
+//# sourceMappingURL=chunk-F5ZNUMSY.js.map

package/dist/{chunk-I64ECJX3.js → chunk-FBP33UM6.js}

@@ -4,13 +4,13 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-CMVZWP32.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   FILL_FAMILY_TOKENS,
   extractColor,
   measureIndent,
   parseFirstLine
-} from "./chunk-YJVA3QUU.js";
+} from "./chunk-A2ARDILY.js";
 import {
   emit
 } from "./chunk-4W2PE66Q.js";
@@ -692,4 +692,4 @@ export {
   SWIMLANE_DIAGNOSTICS,
   parseSwimlane
 };
-//# sourceMappingURL=chunk-I64ECJX3.js.map
+//# sourceMappingURL=chunk-FBP33UM6.js.map