@diagrammo/dgmo 0.54.0 → 0.56.0

package/dist/{chunk-YENNFS5F.js → chunk-USFZQPJ2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-RT7ACF77.js";
 import {
   parseInArrowLabel
-} from "./chunk-WF64MW5G.js";
+} from "./chunk-RRX4Z4TH.js";
 import {
   normalizeName
 } from "./chunk-NOTA6TEI.js";
@@ -16,7 +16,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   SKETCH_REGISTRY,
   extractColor,
@@ -27,7 +27,7 @@ import {
   stripQuotes,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   NAME_DIAGNOSTIC_CODES,
   formatDgmoError,
@@ -35,7 +35,7 @@ import {
   makeFail,
   nameMergedMessage,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/sketch/types.ts
 var SKETCH_SHAPE_KINDS = [
@@ -74,6 +74,7 @@ var SKETCH_AT_MAX = 2e3;
 function parseSketch(content, palette) {
   const options = {
     noLegend: false,
+    legendInline: false,
     fillMode: void 0,
     noDescriptions: false
   };
@@ -454,6 +455,10 @@ function parseSketch(content, palette) {
       continue;
     }
     currentTagGroup = null;
+    if (indent === 0 && /^legend-inline\s*$/i.test(trimmed)) {
+      options.legendInline = true;
+      continue;
+    }
     if (indent === 0 && /^no-legend\s*$/i.test(trimmed)) {
       options.noLegend = true;
       continue;
@@ -627,4 +632,4 @@ export {
   isSketchShapeKind,
   parseSketch
 };
-//# sourceMappingURL=chunk-YENNFS5F.js.map
+//# sourceMappingURL=chunk-USFZQPJ2.js.map

package/dist/{chunk-OR3R27CU.js → chunk-UZ6L5VQJ.js}

@@ -1,6 +1,6 @@
 import {
   compactNumber
-} from "./chunk-6OYDOQ2Q.js";
+} from "./chunk-2UZVMWSQ.js";
 import {
   parseInlineMarkdown
 } from "./chunk-3HDBAXF5.js";
@@ -15,10 +15,10 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/goal/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -361,4 +361,4 @@ export {
   renderGoal,
   renderGoalForExport
 };
-//# sourceMappingURL=chunk-OR3R27CU.js.map
+//# sourceMappingURL=chunk-UZ6L5VQJ.js.map

package/dist/{chunk-ADCHLNWT.js → chunk-VKN7YW4Q.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-PDKUANDZ.js";
 import {
   layoutGraph
-} from "./chunk-3B2GXZCX.js";
+} from "./chunk-SK7PCW4F.js";
 import {
   appendArrowheadMarkers
 } from "./chunk-LP7EC4MI.js";
@@ -14,7 +14,7 @@ import {
   renderNoteBadge,
   renderNoteBox,
   renderNoteConnector
-} from "./chunk-3IUHKMJI.js";
+} from "./chunk-U2BKSEKU.js";
 import {
   EDGE_STROKE_WIDTH,
   NODE_STROKE_WIDTH
@@ -22,6 +22,9 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -32,17 +35,17 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseFlowchart
-} from "./chunk-DLU643TF.js";
+} from "./chunk-LV5BFA24.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
 import {
   contrastText,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   fillModeFromOptions
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/graph/flowchart-renderer.ts
 import * as d3Selection from "d3-selection";
@@ -572,7 +575,7 @@ function renderFlowchartForExport(content, theme, palette) {
     }
     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);
   }
@@ -582,4 +585,4 @@ export {
   renderFlowchart,
   renderFlowchartForExport
 };
-//# sourceMappingURL=chunk-ADCHLNWT.js.map
+//# sourceMappingURL=chunk-VKN7YW4Q.js.map

package/dist/{chunk-XWODFBHJ.js → chunk-VSFAJUEF.js}

@@ -7,7 +7,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   TREEMAP_REGISTRY,
   extractColor,
@@ -20,14 +20,14 @@ import {
   stripQuotes,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   emit,
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/treemap/diagnostics.ts
 var TREEMAP_DX = {
@@ -317,6 +317,10 @@ function handleDirective(trimmed, options, result, pushWarning, lineNumber) {
     else if (key === "legend") options.noLegend = true;
     return true;
   }
+  if (/^legend-inline\s*$/i.test(trimmed)) {
+    options.legendInline = true;
+    return true;
+  }
   {
     const fm = fillModeFromToken(trimmed);
     if (fm !== null) {
@@ -436,4 +440,4 @@ export {
   TREEMAP_DIAGNOSTICS,
   parseTreemap
 };
-//# sourceMappingURL=chunk-XWODFBHJ.js.map
+//# sourceMappingURL=chunk-VSFAJUEF.js.map

package/dist/{chunk-HFEOOQ46.js → chunk-VU3DOZ6C.js}

@@ -5,10 +5,10 @@ import {
 import {
   mix,
   shapeFill
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   fillModeFromOptions
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/journey-map/layout.ts
 var PADDING = 24;
@@ -290,4 +290,4 @@ export {
   scoreToCurveY,
   layoutJourneyMap
 };
-//# sourceMappingURL=chunk-HFEOOQ46.js.map
+//# sourceMappingURL=chunk-VU3DOZ6C.js.map

package/dist/{chunk-M24VXUFG.js → chunk-VYEQPPS6.js}

@@ -1,12 +1,12 @@
 import {
   tryCollectNote
-} from "./chunk-WWHECSYZ.js";
+} from "./chunk-ST3ZNEUQ.js";
 import {
   resolveNotes
-} from "./chunk-QZAW5SFH.js";
+} from "./chunk-7NK42OIB.js";
 import {
   validateLabelCharacters
-} from "./chunk-WF64MW5G.js";
+} from "./chunk-RRX4Z4TH.js";
 import {
   displayName,
   normalizeName
@@ -16,16 +16,16 @@ import {
   measureIndent,
   parseFirstLine,
   tryParseSharedOption
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   resolveColorWithDiagnostic
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 import {
   NAME_DIAGNOSTIC_CODES,
   formatDgmoError,
   makeDgmoError,
   nameMergedMessage
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/class/parser.ts
 function classId(name) {
@@ -445,4 +445,4 @@ export {
   looksLikeClassDiagram,
   extractSymbols
 };
-//# sourceMappingURL=chunk-M24VXUFG.js.map
+//# sourceMappingURL=chunk-VYEQPPS6.js.map

package/dist/{chunk-5XSNLXU5.js → chunk-W2I2EXSC.js}

@@ -23,12 +23,19 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-6VJCURWU.js";
+import {
+  serializeSvg
+} from "./chunk-NZ5QVASG.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-QDOYT6UW.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-ES66QH6J.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -46,7 +53,7 @@ import {
   LEGEND_EYE_SIZE,
   LEGEND_GROUP_GAP,
   LEGEND_HEIGHT
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -55,14 +62,15 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 
 // src/sitemap/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -138,7 +146,33 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     ) : LEGEND_HEIGHT
   );
   const legendReserveH = fixedLegend ? sLegendHeight + sLegendFixedGap : 0;
-  const fixedReserveTop = fixedTitleH + legendReserveH;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && fixedTitle ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      capsulePillAddonWidth: LEGEND_EYE_SIZE + LEGEND_EYE_GAP
+    },
+    { activeGroup: activeTagGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: fixedTitle,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: fixedTitleH,
+    legendReserve: legendReserveH,
+    titleBaselineY: sDiagramPadding + sTitleFontSize,
+    titleFontSize: sTitleFontSize
+  });
+  const fixedReserveTop = header.inline ? fixedTitleH : fixedTitleH + legendReserveH;
   const fixedReserveBottom = 0;
   const titleOffset = !fixedTitle && showTitle ? sTitleHeight : 0;
   const diagramW = layout.width;
@@ -340,7 +374,7 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     );
   }
   if (fixedTitle) {
-    const titleEl = svg.append("text").attr("x", width / 2).attr("y", sDiagramPadding + sTitleFontSize).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("class", "sitemap-title chart-title").style("font-family", FONT_FAMILY);
+    const titleEl = svg.append("text").attr("x", header.titleX).attr("y", sDiagramPadding + sTitleFontSize).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("class", "sitemap-title chart-title").style("font-family", FONT_FAMILY);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
       if (onClickItem) {
@@ -350,7 +384,10 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
     titleEl.text(parsed.title);
   }
   if (fixedLegend) {
-    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr("transform", `translate(0, ${sDiagramPadding + fixedTitleH})`);
+    const legendParent = svg.append("g").attr("class", "sitemap-legend-fixed").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${sDiagramPadding + fixedTitleH})`
+    );
     if (activeTagGroup) {
       legendParent.attr("data-legend-active", tagAttrKey(activeTagGroup));
     }
@@ -362,11 +399,12 @@ function renderSitemap(container, parsed, layout, palette, isDark, onClickItem,
       activeTagGroup,
       width,
       hiddenAttributes,
-      exportMode
+      exportMode,
+      header.inline
     );
   }
 }
-function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode) {
+function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fixedWidth, hiddenAttributes, exportMode, inlineHeader) {
   if (legendGroups.length === 0) return;
   const groups = legendGroups.map((g) => ({
     name: g.name,
@@ -382,6 +420,10 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
     groups,
     activeGroup: activeTagGroup ?? null,
     mode: exportMode ? "export" : "preview",
+    position: {
+      placement: "top-center",
+      titleRelation: inlineHeader ? "inline-with-title" : "below-title"
+    },
     capsulePillAddonWidth: eyeAddonWidth,
     palette,
     isDark,
@@ -407,9 +449,9 @@ function renderLegend(parent, legendGroups, palette, isDark, activeTagGroup, fix
   }
 }
 async function renderSitemapForExport(content, theme, palette) {
-  const { parseSitemap } = await import("./parser-CCNJKDDA.js");
-  const { layoutSitemap } = await import("./layout-4SPLI4HG.js");
-  const { getPalette } = await import("./palettes-FGTNFARW.js");
+  const { parseSitemap } = await import("./parser-5UZWYSIV.js");
+  const { layoutSitemap } = await import("./layout-A5UVXINF.js");
+  const { getPalette } = await import("./palettes-WO3VA6NU.js");
   const isDark = theme === "dark";
   const effectivePalette = palette ?? (isDark ? getPalette("nord").dark : getPalette("nord").light);
   const parsed = parseSitemap(content, effectivePalette);
@@ -449,7 +491,7 @@ async function renderSitemapForExport(content, theme, palette) {
   }
   svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgEl.style.fontFamily = FONT_FAMILY;
-  const svgHtml = svgEl.outerHTML;
+  const svgHtml = serializeSvg(svgEl);
   document.body.removeChild(container);
   return svgHtml;
 }
@@ -458,4 +500,4 @@ export {
   renderSitemap,
   renderSitemapForExport
 };
-//# sourceMappingURL=chunk-5XSNLXU5.js.map
+//# sourceMappingURL=chunk-W2I2EXSC.js.map

package/dist/{chunk-7U4OR7CD.js → chunk-W4EKQ2P6.js}

@@ -1,7 +1,7 @@
 import {
   NODE_HEIGHT,
   NODE_WIDTH
-} from "./chunk-I47VHSPS.js";
+} from "./chunk-WTTIODDV.js";
 
 // src/boxes-and-lines/layout-grouped.ts
 var NODESEP = 50;
@@ -689,4 +689,4 @@ export {
   acyclicOrient,
   groupedTierCandidates
 };
-//# sourceMappingURL=chunk-7U4OR7CD.js.map
+//# sourceMappingURL=chunk-W4EKQ2P6.js.map

package/dist/{chunk-UIT7E6UF.js → chunk-WFX6AUQO.js}

@@ -1,7 +1,7 @@
 import {
   extractDatePrefix,
   parseTimelineDate
-} from "./chunk-3KHJJP3J.js";
+} from "./chunk-4MJOBVY7.js";
 import {
   makeYearContext,
   parseDateToken,
@@ -16,7 +16,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   EVENT_LINE_REGISTRY,
   extractColor,
@@ -27,14 +27,14 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   emit,
   formatDgmoError,
   makeDgmoError,
   makeFail,
   suggest
-} from "./chunk-4W2PE66Q.js";
+} from "./chunk-OLMWTJVU.js";
 
 // src/event-line/diagnostics.ts
 var EVENT_LINE_DX = {
@@ -133,6 +133,7 @@ var TBD_RE = /^TBD\b/i;
 var SIDE_RE = /^side\s+(above|below|alternate)\b/i;
 var ERA_RE = /^\[([^\]]+)\]\s*(.*)$/;
 var ERA_COLLAPSED_RE = /\bcollapsed:\s*(true|false)\b/i;
+var NOW_RE = /^now\b\s*(.*)$/i;
 var SECTION_SEAM_RE = /^section\b/i;
 var DIRECTION_RE = /^direction\s+(\w+)/i;
 function parseEventLine(content, palette) {
@@ -150,6 +151,7 @@ function parseEventLine(content, palette) {
     titleLineNumber: null,
     events: [],
     eras: [],
+    now: null,
     tagGroups: [],
     options,
     diagnostics: [],
@@ -344,6 +346,44 @@ function parseEventLine(content, palette) {
         options.noLegend = true;
         continue;
       }
+      if (trimmed.toLowerCase() === "legend-inline") {
+        options.legendInline = true;
+        continue;
+      }
+      {
+        const nowMatch = trimmed.match(NOW_RE);
+        if (nowMatch) {
+          const rest = nowMatch[1].trim();
+          if (!rest) {
+            result.now = {
+              computed: true,
+              date: null,
+              dateValue: null,
+              label: "now",
+              lineNumber
+            };
+          } else {
+            const prefix = extractDatePrefix(rest, dateCtx);
+            if (prefix) {
+              const label = prefix.remainder?.trim() || "now";
+              result.now = {
+                computed: false,
+                date: prefix.startDate,
+                dateValue: parseTimelineDate(prefix.startDate),
+                label,
+                lineNumber
+              };
+            } else {
+              result.diagnostics.push(
+                emit(EVENT_LINE_DX.BAD_DATE, lineNumber, {
+                  token: rest.split(/\s+/)[0]
+                })
+              );
+            }
+          }
+          continue;
+        }
+      }
       {
         const fm = fillModeFromToken(trimmed);
         if (fm !== null) {
@@ -419,6 +459,13 @@ function parseEventLine(content, palette) {
     });
   }
   validateEventDateOrder(result.events, eraFlaggedLines, result.diagnostics);
+  if (result.now && !options.scale) {
+    result.diagnostics.push(
+      emit(EVENT_LINE_DX.UNSUPPORTED, result.now.lineNumber, {
+        reason: "the `now` marker needs a to-scale axis; it is ignored under `no-scale`."
+      })
+    );
+  }
   return result;
 }
 function resolveFutureEvents(events) {
@@ -618,4 +665,4 @@ export {
   EVENT_LINE_DIAGNOSTICS,
   parseEventLine
 };
-//# sourceMappingURL=chunk-UIT7E6UF.js.map
+//# sourceMappingURL=chunk-WFX6AUQO.js.map

package/dist/{chunk-RIEAN4D5.js → chunk-WK3UFCZC.js}

@@ -12,12 +12,16 @@ import {
   NODE_STROKE_WIDTH,
   SEPARATOR_GAP
 } 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 {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -31,7 +35,7 @@ import {
 } from "./chunk-2CW5ZTNH.js";
 import {
   LEGEND_GROUP_GAP
-} from "./chunk-Q5IHQ4NW.js";
+} from "./chunk-SCJ7CAJF.js";
 import {
   measureText
 } from "./chunk-4ASYQ347.js";
@@ -40,18 +44,19 @@ import {
   mix,
   shapeFill,
   themeBaseBg
-} from "./chunk-JYDMBWRP.js";
+} from "./chunk-42IT4BG2.js";
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-D5FANMSG.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-3KOPPSUQ.js";
 import {
   resolveColor
-} from "./chunk-ZKPPI6BF.js";
+} from "./chunk-EXNKNJ65.js";
 
 // src/family/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -116,7 +121,33 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   const contentH = layout.height;
   const W = opts.fit?.width ?? opts.exportDims?.width ?? contentW + PAD * 2;
   const legendReserve = hasLegend ? getMaxLegendReservedHeight(legendConfig, W) + LEGEND_GROUP_GAP : 0;
-  const chrome = titleReserve + legendReserve;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: opts.exportMode ? "export" : "preview",
+      showInactivePills: true
+    },
+    { activeGroup: activeTagGroup },
+    W
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: W,
+    titleBandHeight: titleReserve,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const chrome = titleReserve + (header.inline ? 0 : legendReserve);
   let scale = 1;
   let H;
   if (opts.fit) {
@@ -133,12 +164,21 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
     ".family-focus-icon{opacity:0;transition:opacity .15s ease;pointer-events:none}.family-card:hover .family-focus-icon{opacity:.6;pointer-events:all}.family-focus-icon:hover{opacity:1}"
   );
   if (parsed.title) {
-    svg.append("text").attr("x", W / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).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", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   if (hasLegend) {
-    const legendParent = svg.append("g").attr("transform", `translate(0, ${titleReserve})`);
+    const legendParent = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleReserve})`
+    );
     renderIntegratedLegend(legendParent, {
       ...legendConfig,
+      // 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: W,
@@ -277,4 +317,4 @@ export {
   renderFamilyForExport,
   renderFamily
 };
-//# sourceMappingURL=chunk-RIEAN4D5.js.map
+//# sourceMappingURL=chunk-WK3UFCZC.js.map