@diagrammo/dgmo 0.54.0 → 0.56.0

package/dist/{chunk-IYNKLCAZ.js → chunk-3R67RRPC.js}

@@ -6,12 +6,16 @@ import {
   CARD_RADIUS,
   CONTAINER_RADIUS
 } from "./chunk-3CIOJ5YJ.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -24,12 +28,12 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/sketch/renderer.ts
 import * as d3 from "d3-selection";
@@ -209,7 +213,7 @@ function drawMarkdownBlock(container, text, opts) {
     const textEl = container.append("text").attr("x", line.x).attr("y", y).attr("font-size", fontSize);
     let cursorX = line.x;
     const segs = line.segments.slice();
-    if (clamped && isLast) {
+    if (clamped && isLast && !opts.noEllipsis) {
       segs.push({ text: ELLIPSIS, bold: false });
     }
     for (const seg of segs) {
@@ -223,7 +227,11 @@ function drawMarkdownBlock(container, text, opts) {
       cursorX += w;
     }
   }
-  return shown.length * lineHeight;
+  return {
+    height: shown.length * lineHeight,
+    shown: shown.length,
+    total: visualLines.length
+  };
 }
 
 // src/sketch/renderer.ts
@@ -233,8 +241,8 @@ var TITLE_FONT_SIZE = 18;
 var NODE_STROKE_WIDTH = 2;
 var EDGE_STROKE_WIDTH = 2;
 var EDGE_HIT_WIDTH = 18;
-var ARROWHEAD_W = 12;
-var ARROWHEAD_H = 8;
+var ARROWHEAD_W = 18;
+var ARROWHEAD_H = 12;
 var DASH = "6 3";
 var BAND_LABEL_FONT_SIZE = 19;
 var BAND_LABEL_OPACITY = 0.55;
@@ -273,14 +281,6 @@ function drawTypeBadge(g, kind, color, bx, by) {
       return;
   }
 }
-function metaRows(metadata, tagGroups) {
-  const rows = [];
-  for (const grp of tagGroups) {
-    const v = metadata[tagAttrKey(grp.name)];
-    if (v !== void 0) rows.push([grp.name, v]);
-  }
-  return rows;
-}
 var CARD_HEADER_H = 34;
 var CARD_LABEL_MAX = 15;
 var CARD_LABEL_MIN = 11;
@@ -304,7 +304,8 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
   const {
     activeTagGroup,
     exportMode = false,
-    hideDescriptions = false
+    hideDescriptions = false,
+    splitCardIds
   } = options;
   const hideDesc = hideDescriptions || parsed.options.noDescriptions;
   const neutralFill = parsed.options.fillMode === "outline" ? themeBaseBg(palette, isDark) : mix(palette.textMuted, palette.bg, 12);
@@ -377,7 +378,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 +431,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
@@ -535,7 +570,7 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
       colorsFor(node.metadata),
       palette,
       isDark,
-      hideDesc ? [] : tagGroups
+      !hideDesc && (splitCardIds?.includes(node.id) ?? false)
     );
   }
   const labelLayer = root.append("g").attr("class", "sk-edge-labels");
@@ -562,7 +597,7 @@ function drawBoxFrame(layer, box, colors, palette) {
     g.append("text").attr("x", box.x + box.w / 2).attr("y", startY + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fit.fontSize).attr("font-weight", 800).attr("fill", palette.text).attr("opacity", BAND_LABEL_OPACITY).text(fit.lines[li]);
   }
 }
-function drawNode(layer, node, colors, palette, isDark, tagGroups) {
+function drawNode(layer, node, colors, palette, isDark, splitCard) {
   void isDark;
   const g = layer.append("g").attr("class", node.isCollapsedBox ? "sk-node sk-box-collapsed" : "sk-node").attr("transform", `translate(${node.x},${node.y})`).attr("data-node-id", node.id).attr("data-line-number", node.lineNumber);
   for (const [k, v] of Object.entries(node.metadata)) {
@@ -579,12 +614,11 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
       g.append("text").attr("x", 10).attr("y", 20 + i * lineHeight).attr("font-size", NOTE_FONT_SIZE).attr("fill", colors.text).text(line);
     });
   } else {
-    const rows = node.isCollapsedBox ? [] : metaRows(node.metadata, tagGroups);
     const badge = node.shape !== "rectangle";
     const labelInset = badge ? 22 : 0;
     const solidLike = colors.stroke === colors.fill;
     const ruleColor = solidLike ? colors.text : colors.stroke;
-    if (node.description && !node.isCollapsedBox) {
+    if (!node.isCollapsedBox && (node.description || splitCard)) {
       const fitH = fitWrapped(
         node.label,
         node.w - 24 - labelInset,
@@ -605,33 +639,37 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
         headerHeight: CARD_HEADER_H
       });
       g.append("line").attr("x1", 0).attr("y1", CARD_HEADER_H).attr("x2", node.w).attr("y2", CARD_HEADER_H).attr("stroke", ruleColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
-      const inset = 12;
-      const bodyGap = 8;
-      const lh = CARD_META_FONT + 4;
-      const avail = node.h - CARD_HEADER_H - bodyGap - 8;
-      const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${CARD_HEADER_H + bodyGap})`);
-      drawMarkdownBlock(body, node.description, {
-        width: node.w - inset * 2,
-        fontSize: CARD_META_FONT,
-        lineHeight: lh,
-        color: colors.text,
-        // match the header label (contrast-aware in solid)
-        linkColor: colors.text,
-        maxLines: Math.max(1, Math.floor(avail / lh))
-      });
+      if (node.description) {
+        const inset = 12;
+        const bodyGap = 8;
+        const lh = CARD_META_FONT + 4;
+        const avail = node.h - CARD_HEADER_H - bodyGap - 8;
+        const body = g.append("g").attr("class", "sk-desc").attr("transform", `translate(${inset} ${CARD_HEADER_H + bodyGap})`);
+        const block = drawMarkdownBlock(body, node.description, {
+          width: node.w - inset * 2,
+          fontSize: CARD_META_FONT,
+          lineHeight: lh,
+          color: colors.text,
+          // match the header label (contrast-aware in solid)
+          linkColor: colors.text,
+          maxLines: Math.max(1, Math.floor(avail / lh)),
+          noEllipsis: true
+        });
+        if (block.total > block.shown) {
+          g.append("text").attr("class", "sk-desc-more").attr("x", node.w - 8).attr("y", node.h - 5).attr("text-anchor", "end").attr("font-size", 9).attr("fill", palette.textMuted).attr("data-line-number", node.lineNumber).style("cursor", "pointer").text(`+${block.total - block.shown} more in source`);
+        }
+      }
       if (badge) {
         drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
       }
       return;
     }
-    const headerH = rows.length ? CARD_HEADER_H : node.h;
-    const fillTitle = rows.length === 0;
     const fit = fitWrapped(
       node.label,
       node.w - 24 - labelInset,
-      fillTitle ? CARD_TITLE_MAX : CARD_LABEL_MAX,
+      CARD_TITLE_MAX,
       CARD_LABEL_MIN,
-      fillTitle ? 3 : 2
+      3
     );
     renderNodeCard(g, {
       width: node.w,
@@ -644,18 +682,7 @@ function drawNode(layer, node, colors, palette, isDark, tagGroups) {
       labelLines: fit.lines,
       labelColor: colors.text,
       labelFontSize: fit.fontSize,
-      headerHeight: headerH,
-      ...rows.length ? {
-        meta: {
-          rows,
-          fontSize: CARD_META_FONT,
-          lineHeight: CARD_META_FONT + 5,
-          separatorGap: 8,
-          separatorColor: ruleColor,
-          textColor: solidLike ? colors.text : palette.text,
-          keyX: 12
-        }
-      } : {}
+      headerHeight: node.h
     });
     if (badge) {
       drawTypeBadge(g, node.shape, colors.text, 10, (CARD_HEADER_H - 16) / 2);
@@ -913,6 +940,8 @@ function sketchEdgeGeometry(layout, offsets) {
     const n = normalOf(side);
     return 1 - (n.x * dx + n.y * dy) / len;
   };
+  const W_BACK = 2.6;
+  const backFacingCost = (from, to, side) => W_BACK * Math.max(0, facingCost(from, to, side) - 1);
   const ctx = layout.edges.map((edge) => {
     const source = rectById.get(edge.sourceId);
     const target = rectById.get(edge.targetId);
@@ -947,6 +976,7 @@ function sketchEdgeGeometry(layout, offsets) {
   const W_NODE = 100;
   const W_EDGE = 8;
   const W_PORT = 1.5;
+  const W_PORT_SAME = 0.6;
   const isBox = (id) => portsById.has(id);
   const portClashCount = (self, s, t) => {
     const e = layout.edges[self];
@@ -964,6 +994,44 @@ function sketchEdgeGeometry(layout, offsets) {
     }
     return n;
   };
+  const portStackCount = (self, _s, t) => {
+    const e = layout.edges[self];
+    if (isBox(e.targetId)) return 0;
+    let n = 0;
+    for (let j = 0; j < layout.edges.length; j++) {
+      if (j === self) continue;
+      const ej = layout.edges[j];
+      if (ej.targetId === e.targetId && ej.sourceId !== e.sourceId && // not reciprocal
+      chosen[j].t === t)
+        n++;
+    }
+    return n;
+  };
+  const W_TURN = 0.55;
+  const W_SCURVE = 1.8;
+  const CURVE_STRAIGHT = 0.35;
+  const curveCostPoly = (pts) => {
+    let totalTurn = 0;
+    let inflections = 0;
+    let prevSign = 0;
+    for (let i = 1; i < pts.length - 1; i++) {
+      const ax = pts[i].x - pts[i - 1].x;
+      const ay = pts[i].y - pts[i - 1].y;
+      const bx = pts[i + 1].x - pts[i].x;
+      const by = pts[i + 1].y - pts[i].y;
+      const cross = ax * by - ay * bx;
+      const dot = ax * bx + ay * by;
+      if (ax === 0 && ay === 0) continue;
+      if (bx === 0 && by === 0) continue;
+      totalTurn += Math.abs(Math.atan2(cross, dot));
+      const sign = cross > 1e-6 ? 1 : cross < -1e-6 ? -1 : 0;
+      if (sign !== 0) {
+        if (prevSign !== 0 && sign !== prevSign) inflections++;
+        prevSign = sign;
+      }
+    }
+    return totalTurn * W_TURN + inflections * W_SCURVE;
+  };
   const scoreOf = (c, g, poly, self, polys2, s, t) => {
     let edgeCross = 0;
     for (let j = 0; j < polys2.length; j++) {
@@ -971,7 +1039,7 @@ function sketchEdgeGeometry(layout, offsets) {
       const pj = polys2[j];
       if (pj) edgeCross += polyCrossings(poly, pj);
     }
-    return pathCrossings(g, c.obstacleRects) * W_NODE + edgeCross * W_EDGE + portClashCount(self, s, t) * W_PORT + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t);
+    return pathCrossings(g, c.obstacleRects) * W_NODE + edgeCross * W_EDGE + portClashCount(self, s, t) * W_PORT + portStackCount(self, s, t) * W_PORT_SAME + curveCostPoly(poly) + facingCost(c.source, c.target, s) + facingCost(c.target, c.source, t) + backFacingCost(c.source, c.target, s) + backFacingCost(c.target, c.source, t);
   };
   const chosen = layout.edges.map(
     (_, i) => sides[i] ?? { s: "R", t: "L" }
@@ -996,7 +1064,8 @@ function sketchEdgeGeometry(layout, offsets) {
       if (!c || !g || !p) continue;
       const cur = chosen[i];
       const curScore = scoreOf(c, g, p, i, polys, cur.s, cur.t);
-      if (curScore < W_EDGE && portClashCount(i, cur.s, cur.t) === 0) continue;
+      if (curScore < W_EDGE && portClashCount(i, cur.s, cur.t) === 0 && portStackCount(i, cur.s, cur.t) === 0 && curveCostPoly(p) < CURVE_STRAIGHT && backFacingCost(c.source, c.target, cur.s) === 0 && backFacingCost(c.target, c.source, cur.t) === 0)
+        continue;
       let bestScore = curScore;
       let bestG = g;
       let bestP = p;
@@ -1059,4 +1128,4 @@ export {
   sketchEdgeGeometry,
   renderSketchForExport
 };
-//# sourceMappingURL=chunk-IYNKLCAZ.js.map
+//# sourceMappingURL=chunk-3R67RRPC.js.map

package/dist/{chunk-JYDMBWRP.js → chunk-42IT4BG2.js}

@@ -1,6 +1,6 @@
 import {
   CATEGORICAL_COLOR_ORDER
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/palettes/color-utils.ts
 var HEX_TO_HSL_CACHE = /* @__PURE__ */ new Map();
@@ -241,4 +241,4 @@ export {
   getSegmentColors,
   politicalTints
 };
-//# sourceMappingURL=chunk-JYDMBWRP.js.map
+//# sourceMappingURL=chunk-42IT4BG2.js.map

package/dist/{chunk-O576GYAP.js → chunk-4MB4UOT5.js}

@@ -5,11 +5,11 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   makeDgmoError,
   makeFail
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/cycle/parser.ts
 var BARE_EDGE_RE = /^->\s*(.*)?$/;
@@ -274,4 +274,4 @@ function parseCycle(content) {
 export {
   parseCycle
 };
-//# sourceMappingURL=chunk-O576GYAP.js.map
+//# sourceMappingURL=chunk-4MB4UOT5.js.map

package/dist/{chunk-3KHJJP3J.js → chunk-4MJOBVY7.js}

@@ -7,10 +7,10 @@ import {
   splitNameAndMeta,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   makeDgmoError
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/timeline/parser.ts
 var TIMELINE_DURATION_RE = /^(\d+(?:\.\d{1,2})?)(min|[dwmyhs])(\?)?$/;
@@ -314,4 +314,4 @@ export {
   parseTimelineDate,
   parseTimelineEventLine
 };
-//# sourceMappingURL=chunk-3KHJJP3J.js.map
+//# sourceMappingURL=chunk-4MJOBVY7.js.map

package/dist/{chunk-3SEEP2JM.js → chunk-5J2RQGFG.js}

@@ -1,6 +1,6 @@
 import {
   isBlockNode
-} from "./chunk-NR5HCAUD.js";
+} from "./chunk-XSVWUOUZ.js";
 import {
   AUTO_TAG_COLOR_SENTINEL,
   finalizeAutoTagColors,
@@ -9,19 +9,19 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   extractColor,
   fillModeFromToken,
   measureIndent,
   parseFirstLine
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/block/parser.ts
 function parseBlock(content, palette) {
@@ -133,6 +133,10 @@ function parseBlock(content, palette) {
           options.noLegend = true;
           continue;
         }
+        if (/^legend-inline\s*$/i.test(trimmed)) {
+          options.legendInline = true;
+          continue;
+        }
         const fm = fillModeFromToken(trimmed);
         if (fm !== null) {
           if (fm === "tint") delete options.fillMode;
@@ -338,4 +342,4 @@ function parseBlockTail(tail, aliasMap) {
 export {
   parseBlock
 };
-//# sourceMappingURL=chunk-3SEEP2JM.js.map
+//# sourceMappingURL=chunk-5J2RQGFG.js.map

package/dist/{chunk-EAI6XJ7D.js → chunk-5VLUAAAE.js}

@@ -4,16 +4,16 @@ import {
   matchTagBlockHeading,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   FILL_FAMILY_TOKENS,
   extractColor,
   measureIndent,
   parseFirstLine
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   emit
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/swimlane/diagnostics.ts
 var SWIMLANE_DX = {
@@ -692,4 +692,4 @@ export {
   SWIMLANE_DIAGNOSTICS,
   parseSwimlane
 };
-//# sourceMappingURL=chunk-EAI6XJ7D.js.map
+//# sourceMappingURL=chunk-5VLUAAAE.js.map

package/dist/{chunk-FVMKCZHF.js → chunk-5XMDSXZT.js}

@@ -5,11 +5,11 @@ import {
   normalizeNumericToken,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   makeDgmoError,
   makeFail
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/goal/parser.ts
 function parseGoalNumber(token) {
@@ -158,4 +158,4 @@ function parseGoal(content, palette) {
 export {
   parseGoal
 };
-//# sourceMappingURL=chunk-FVMKCZHF.js.map
+//# sourceMappingURL=chunk-5XMDSXZT.js.map

package/dist/{chunk-LPJ6H5X4.js → chunk-5ZDHXS5N.js}

@@ -1,6 +1,6 @@
 import {
   analyzePert
-} from "./chunk-HO3RCNF6.js";
+} from "./chunk-CGLBK5Q4.js";
 import {
   computeNodeSizing,
   layoutPert
@@ -16,9 +16,19 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  INLINE_HEADER_PAD,
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
+import {
+  getLegendExtent
+} from "./chunk-ES66QH6J.js";
 import {
   CAPTION_BOX_PADDING_X,
   CAPTION_BOX_PADDING_Y,
@@ -35,7 +45,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parsePert
-} from "./chunk-RRGKMJYL.js";
+} from "./chunk-DIKIHU52.js";
 import {
   addCalendarDays,
   formatDuration,
@@ -45,7 +55,7 @@ import {
 } from "./chunk-3TYUXC7D.js";
 import {
   LEGEND_HEIGHT
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText,
   truncateText,
@@ -56,11 +66,11 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 
 // src/pert/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -229,25 +239,54 @@ function renderPert(container, resolved, layout, palette, isDark, options = {})
   const scaledHeight = layout.height + sDiagramPad * 2 + sTitleHeight + sLegendBlockHeight + analysisBlockHeight + fieldLegendBlockHeight;
   const svgW = ctx.isBelowFloor ? exportWidth : scaledWidth;
   const svgH = ctx.isBelowFloor ? exportHeight : scaledHeight;
+  const inlineRequested = resolved.options.legendInline === true && showTagLegend;
+  const legendExtent = inlineRequested ? getLegendExtent(
+    {
+      groups: resolved.tagGroups.map((g) => ({
+        name: g.name,
+        entries: g.entries
+      })),
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: options.exportMode ? "export" : "preview"
+    },
+    { activeGroup: tagLegendActive },
+    svgW
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: effectiveTitle ?? "",
+    hasLegend: showTagLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: svgW,
+    titleBandHeight: sTitleHeight,
+    legendReserve: sLegendBlockHeight,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const svg = d3Selection.select(container).append("svg").attr("width", ctx.isBelowFloor ? "100%" : svgW).attr("height", svgH).attr("viewBox", `0 0 ${svgW} ${svgH}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   const defs = svg.append("defs");
   buildArrowheads(defs, palette, sArrowheadW, sArrowheadH);
   if (effectiveTitle) {
-    svg.append("text").attr("class", "pert-title chart-title").attr("x", svgW / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).text(effectiveTitle);
+    svg.append("text").attr("class", "pert-title 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).text(effectiveTitle);
   }
   if (effectiveSubtitle) {
     const subtitleY = effectiveTitle ? sTitleY + ctx.aesthetic(26) : sTitleY;
     svg.append("text").attr("class", "pert-subtitle").attr("x", svgW / 2).attr("y", subtitleY).attr("text-anchor", "middle").attr("fill", palette.textMuted).attr("font-size", sSubtitleFontSize).attr("font-weight", 400).text(effectiveSubtitle);
   }
   const offsetX = Math.max(sDiagramPad, (svgW - layout.width) / 2);
-  const offsetY = sDiagramPad + sTitleHeight + sLegendBlockHeight;
+  const offsetY = sDiagramPad + sTitleHeight + (header.inline ? 0 : sLegendBlockHeight);
   if (showTagLegend) {
     const tagLegendY = sDiagramPad + sTitleHeight + sLegendTopGap;
     renderTagLegendRow(svg, resolved, palette, isDark, {
-      x: 0,
-      y: tagLegendY,
-      width: svgW,
+      x: header.inline ? svgW - INLINE_HEADER_PAD - legendExtent.width : 0,
+      y: header.inline ? header.legendY : tagLegendY,
+      width: header.inline ? legendExtent.width : svgW,
       activeGroup: tagLegendActive,
+      inline: header.inline,
       ...options.exportMode !== void 0 && {
         exportMode: options.exportMode
       }
@@ -348,7 +387,7 @@ function renderPertForExport(content, theme, palette, now) {
     else svgEl.style.background = palette.bg;
     svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     svgEl.style.fontFamily = FONT_FAMILY;
-    return svgEl.outerHTML;
+    return serializeSvg(svgEl);
   } finally {
     document.body.removeChild(container);
   }
@@ -1337,7 +1376,7 @@ function renderCaptionBlock(svg, bullets, args) {
 }
 function renderTagLegendRow(svg, resolved, palette, isDark, args) {
   if (resolved.tagGroups.length === 0) return;
-  const { x, y, width, activeGroup, exportMode } = args;
+  const { x, y, width, activeGroup, exportMode, inline } = args;
   const groups = resolved.tagGroups.map((g) => ({
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
@@ -1349,7 +1388,13 @@ function renderTagLegendRow(svg, resolved, palette, isDark, args) {
     palette,
     isDark,
     width,
-    activeGroup
+    activeGroup,
+    ...inline && {
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      }
+    }
   });
 }
 function renderFieldLegendBlock(svg, args) {
@@ -1823,4 +1868,4 @@ export {
   measurePertAnalysisBlock,
   renderPertAnalysisBlock
 };
-//# sourceMappingURL=chunk-LPJ6H5X4.js.map
+//# sourceMappingURL=chunk-5ZDHXS5N.js.map