@diagrammo/dgmo 0.54.0 → 0.55.0

package/dist/{chunk-LPJ6H5X4.js → chunk-32HUNA33.js}

@@ -16,9 +16,16 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  INLINE_HEADER_PAD,
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
+import {
+  getLegendExtent
+} from "./chunk-GRXPFBYC.js";
 import {
   CAPTION_BOX_PADDING_X,
   CAPTION_BOX_PADDING_Y,
@@ -35,7 +42,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parsePert
-} from "./chunk-RRGKMJYL.js";
+} from "./chunk-5K5XBEXT.js";
 import {
   addCalendarDays,
   formatDuration,
@@ -60,7 +67,7 @@ import {
 import {
   resolveActiveTagGroup,
   resolveTagColor
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 
 // src/pert/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -229,25 +236,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
       }
@@ -1337,7 +1373,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 +1385,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 +1865,4 @@ export {
   measurePertAnalysisBlock,
   renderPertAnalysisBlock
 };
-//# sourceMappingURL=chunk-LPJ6H5X4.js.map
+//# sourceMappingURL=chunk-32HUNA33.js.map

package/dist/{chunk-UIT7E6UF.js → chunk-3BFXELBL.js}

@@ -1,7 +1,7 @@
 import {
   extractDatePrefix,
   parseTimelineDate
-} from "./chunk-3KHJJP3J.js";
+} from "./chunk-ITXL2KU5.js";
 import {
   makeYearContext,
   parseDateToken,
@@ -16,7 +16,7 @@ import {
   tagAttrKey,
   validateTagGroupNames,
   validateTagValues
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   EVENT_LINE_REGISTRY,
   extractColor,
@@ -27,7 +27,7 @@ import {
   tryParseSharedOption,
   warnUnknownMetaKeys,
   withTagAliases
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 import {
   emit,
   formatDgmoError,
@@ -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-3BFXELBL.js.map

package/dist/{chunk-C2UORMIA.js → chunk-3BZJ5KD5.js}

@@ -8,14 +8,14 @@ import {
   resolveActiveTagGroup,
   stripDefaultModifier,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   extractColor,
   fillModeFromToken,
   measureIndent,
   parseFirstLine,
   splitNameAndMeta
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 import {
   makeDgmoError,
   makeFail
@@ -214,6 +214,10 @@ function parseBracket(content, palette) {
       else result.mode = lower;
       continue;
     }
+    if (lower === "legend-inline") {
+      result.legendInline = true;
+      continue;
+    }
     if (lower === "no-legend") {
       result.noLegend = true;
       continue;
@@ -388,4 +392,4 @@ function parseBracket(content, palette) {
 export {
   parseBracket
 };
-//# sourceMappingURL=chunk-C2UORMIA.js.map
+//# sourceMappingURL=chunk-3BZJ5KD5.js.map

package/dist/{chunk-A3BDLDYG.js → chunk-3FUTFYSP.js}

@@ -19,9 +19,15 @@ import {
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
+import {
+  getLegendExtent
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -32,7 +38,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseClassDiagram
-} from "./chunk-M24VXUFG.js";
+} from "./chunk-IIUYKQ5J.js";
 import {
   LEGEND_HEIGHT
 } from "./chunk-Q5IHQ4NW.js";
@@ -45,8 +51,9 @@ import {
 } from "./chunk-JYDMBWRP.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/class/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -159,15 +166,50 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   const LEGEND_FIXED_GAP = 8;
   const sLegendFixedGap = ctx.aesthetic(LEGEND_FIXED_GAP);
   const legendReserve = hasLegend ? sLegendHeight + sLegendFixedGap : 0;
+  const isLegendExpanded = legendActive !== false;
+  const legendGroups = [
+    {
+      name: LEGEND_GROUP_NAME,
+      entries: legendEntries.map((entry) => ({
+        value: entry.label,
+        color: palette.colors[entry.colorKey]
+      }))
+    }
+  ];
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleHeight,
+    legendReserve,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight - legendReserve;
+  const availH = height - titleHeight - (header.inline ? 0 : legendReserve);
   const scaleX = (width - sDiagramPadding * 2) / diagramW;
   const scaleY = (availH - sDiagramPadding * 2) / diagramH;
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + legendReserve + sDiagramPadding;
+  const offsetY = titleHeight + (header.inline ? 0 : legendReserve) + sDiagramPadding;
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
   if (ctx.isBelowFloor) {
     svg.attr("width", "100%");
@@ -184,7 +226,7 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   defs.append("marker").attr("id", "cd-arrow-depend").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
   defs.append("marker").attr("id", "cd-arrow-assoc").attr("viewBox", `0 0 ${AW} ${AH}`).attr("refX", AW).attr("refY", AH / 2).attr("markerWidth", AW).attr("markerHeight", AH).attr("orient", "auto").append("polyline").attr("points", `0,0 ${AW},${AH / 2} 0,${AH}`).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1.5);
   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 && parsed.titleLineNumber ? "pointer" : "default"
     ).text(parsed.title);
@@ -199,22 +241,19 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
       }
     }
   }
-  const isLegendExpanded = legendActive !== false;
   if (hasLegend) {
-    const legendGroups = [
-      {
-        name: LEGEND_GROUP_NAME,
-        entries: legendEntries.map((entry) => ({
-          value: entry.label,
-          color: palette.colors[entry.colorKey]
-        }))
-      }
-    ];
-    const legendG = svg.append("g").attr("class", "cd-legend").attr("transform", `translate(0,${titleHeight})`);
+    const legendG = svg.append("g").attr("class", "cd-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${titleHeight})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legendGroups,
       activeGroup: isLegendExpanded ? LEGEND_GROUP_NAME : null,
       mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width
@@ -409,4 +448,4 @@ export {
   renderClassDiagram,
   renderClassDiagramForExport
 };
-//# sourceMappingURL=chunk-A3BDLDYG.js.map
+//# sourceMappingURL=chunk-3FUTFYSP.js.map

package/dist/{chunk-DPGQ5UMO.js → chunk-4MZCJV4M.js}

@@ -4,7 +4,7 @@ import {
   layoutC4Containers,
   layoutC4Context,
   layoutC4Deployment
-} from "./chunk-LRSW4JLE.js";
+} from "./chunk-AKE6C2D7.js";
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
@@ -17,7 +17,7 @@ import {
 } from "./chunk-3CIOJ5YJ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT
@@ -27,7 +27,7 @@ import {
 } from "./chunk-6KFWC4CO.js";
 import {
   parseC4
-} from "./chunk-2NYXI35Z.js";
+} from "./chunk-YXKNXIWA.js";
 import {
   preprocessDescriptionLine
 } from "./chunk-IYULMRBE.js";
@@ -45,10 +45,10 @@ import {
 } from "./chunk-JYDMBWRP.js";
 import {
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 
 // src/c4/renderer.ts
 import * as d3Selection from "d3-selection";
@@ -1036,4 +1036,4 @@ export {
   renderC4Deployment,
   renderC4DeploymentForExport
 };
-//# sourceMappingURL=chunk-DPGQ5UMO.js.map
+//# sourceMappingURL=chunk-4MZCJV4M.js.map

package/dist/{chunk-WWHECSYZ.js → chunk-4R5KIPNX.js}

@@ -1,7 +1,7 @@
 import {
   extractColor,
   measureIndent
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 import {
   makeDgmoError
 } from "./chunk-4W2PE66Q.js";
@@ -73,4 +73,4 @@ function tryCollectNote(lines, index, indent, palette, diagnostics) {
 export {
   tryCollectNote
 };
-//# sourceMappingURL=chunk-WWHECSYZ.js.map
+//# sourceMappingURL=chunk-4R5KIPNX.js.map

package/dist/{chunk-47JNEKJA.js → chunk-5D5VHDJM.js}

@@ -1,12 +1,16 @@
 import {
   renderInlineText
 } from "./chunk-3HDBAXF5.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -31,7 +35,7 @@ import {
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   resolveColor
 } from "./chunk-ZKPPI6BF.js";
@@ -707,16 +711,41 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     { groups: legendGroups, position: LEGEND_POSITION, mode: "preview" },
     width
   ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = parsed.legendInline === true;
+  const legendExtent = inlineRequested && legendGroups.length > 0 ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup?.name ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: legendGroups.length > 0,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
   const svg = d3Selection.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").attr("class", "dgmo-bracket").attr("role", "img").attr(
     "aria-label",
     `Tournament bracket${parsed.title ? ` \u2014 ${parsed.title}` : ""}${layout.champion ? `, champion ${layout.champion}` : ""}`
   ).style("font-family", FONT_FAMILY);
   if (showTitle) {
-    const t = svg.append("text").attr("class", "chart-title").attr("x", width / 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).text(parsed.title);
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(parsed.title);
     if (parsed.titleLineNumber !== null)
       t.attr("data-line-number", parsed.titleLineNumber);
   }
-  const areaY = titleH + legendReserve + PADDING;
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING;
   const areaX = PADDING;
   const areaW = Math.max(1, width - PADDING * 2);
   const areaH = Math.max(1, height - areaY - PADDING);
@@ -725,7 +754,10 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
   const offsetY = areaY;
   const root = svg.append("g").attr("class", "dgmo-bracket-body").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
   if (legendGroups.length > 0) {
-    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr("class", "dgmo-bracket-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legendGroups,
       palette: {
@@ -738,7 +770,10 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       isDark,
       width,
       mode: exportMode ? "export" : "preview",
-      position: LEGEND_POSITION,
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       activeGroup: activeGroup?.name ?? null
     });
   }
@@ -959,4 +994,4 @@ export {
   renderBracket,
   renderBracketForExport
 };
-//# sourceMappingURL=chunk-47JNEKJA.js.map
+//# sourceMappingURL=chunk-5D5VHDJM.js.map