@diagrammo/dgmo 0.54.0 → 0.55.0

package/dist/element.mjs

@@ -568,6 +568,15 @@ var init_directives_registry = __esm({
       // most types via GLOBAL_BOOLEANS in utils/parsing; gantt derives its boolean
       // Set from here, and map from `map: true`.
       { token: "no-legend", category: "directive", gantt: ["boolean"], map: true },
+      // `legend-inline`: universal §1.9 boolean (decision #50) — the top-center-
+      // legend data charts (bar/line/radar/scatter/function) render the title and
+      // legend on one line; every other chart accepts it as a harmless no-op.
+      {
+        token: "legend-inline",
+        category: "directive",
+        gantt: ["boolean"],
+        map: true
+      },
       // ══════════════════════════════════════════════════════════
       // Highlight-only vocab (no extractable parser Set).
       // ══════════════════════════════════════════════════════════
@@ -706,7 +715,7 @@ var init_directives_registry = __esm({
       { token: "persona", category: "directive" },
       // ── Function ─────────────────────────────────────────────
       { token: "x", category: "directive" },
-      { token: "shade", category: "directive" },
+      { token: "fill", category: "directive" },
       // ── Wordcloud ────────────────────────────────────────────
       { token: "max", category: "directive" },
       { token: "size", category: "directive" },
@@ -1038,6 +1047,9 @@ function extractColor(label, palette, diagnostics, line11) {
 function legendSuppressed(options) {
   return options["no-legend"] === "on";
 }
+function legendInlineRequested(options) {
+  return options["legend-inline"] === "on";
+}
 function fillModeFromToken(token) {
   switch (token.trim().toLowerCase()) {
     case "fill-solid":
@@ -1516,7 +1528,8 @@ var init_parsing = __esm({
       "fill-outline",
       "no-title",
       "no-notes",
-      "no-legend"
+      "no-legend",
+      "legend-inline"
     ]);
     FILL_FAMILY_TOKENS = /* @__PURE__ */ new Set([
       "fill-tint",
@@ -5917,6 +5930,26 @@ function getMaxLegendReservedHeight(config, containerWidth) {
   }
   return max;
 }
+function getLegendExtent(config, state, containerWidth) {
+  const layout = computeLegendLayout(config, state, containerWidth);
+  let left = Infinity;
+  let right = 0;
+  let bottom = 0;
+  const track = (x, y, w, h) => {
+    left = Math.min(left, x);
+    right = Math.max(right, x + w);
+    bottom = Math.max(bottom, y + h);
+  };
+  if (layout.activeCapsule) {
+    const c = layout.activeCapsule;
+    track(c.x, c.y, c.width, c.height);
+  }
+  for (const pill of layout.pills) track(pill.x, pill.y, pill.width, pill.height);
+  return {
+    width: right - (left === Infinity ? 0 : left),
+    height: bottom || LEGEND_HEIGHT
+  };
+}
 var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP, RAMP_LEGEND_W, RAMP_LEGEND_H, RAMP_LABEL_GAP;
 var init_legend_layout = __esm({
   "src/utils/legend-layout.ts"() {
@@ -9333,7 +9366,8 @@ var init_parser7 = __esm({
       "fill-solid",
       "fill-outline",
       "no-title",
-      "no-legend"
+      "no-legend",
+      "legend-inline"
     ]);
     NO_PREFIX_ONLY_BOOLEANS = /* @__PURE__ */ new Set(["activations"]);
     VALID_PARTICIPANT_TYPES = /* @__PURE__ */ new Set([
@@ -14044,6 +14078,10 @@ function applyDirective(key, value, lineNumber, options, error, warn, dateCfg) {
       options.noLegend = true;
       return;
     }
+    case "legend-inline": {
+      options.legendInline = true;
+      return;
+    }
     case "fill-solid": {
       options.fillMode = "solid";
       return;
@@ -14314,6 +14352,7 @@ var init_parser12 = __esm({
       "end-date",
       "no-title",
       "no-legend",
+      "legend-inline",
       "fill-tint",
       "fill-solid",
       "fill-outline",
@@ -14746,6 +14785,8 @@ function parseChart(content, palette) {
         result.noTitle = true;
       } else if (firstToken === "no-legend") {
         result.noLegend = true;
+      } else if (firstToken === "legend-inline") {
+        result.legendInline = true;
       } else if (firstToken === "no-auto-y") {
         result.noAutoY = true;
       } else if (firstToken === "fill") {
@@ -15092,6 +15133,7 @@ var init_chart = __esm({
       "fill-outline",
       "no-title",
       "no-legend",
+      "legend-inline",
       "no-auto-y",
       "fill",
       "hole"
@@ -15399,7 +15441,7 @@ function parseExtendedChartFull(content, palette) {
       const spaceIdx2 = trimmed.indexOf(" ");
       const lastTok = trimmed.substring(trimmed.lastIndexOf(" ") + 1);
       const hasNumericSuffix = spaceIdx2 >= 0 && !isNaN(parseFloat(normalizeNumericToken(lastTok) ?? lastTok));
-      const isBareKeywordOption = spaceIdx2 < 0 && /^(fill-tint|fill-solid|fill-outline|no-name|no-value|no-percent|shade|no-title)$/i.test(
+      const isBareKeywordOption = spaceIdx2 < 0 && /^(fill|fill-tint|fill-solid|fill-outline|no-name|no-value|no-percent|no-title)$/i.test(
         trimmed
       );
       const leadToken = spaceIdx2 >= 0 ? trimmed.substring(0, spaceIdx2).toLowerCase() : "";
@@ -15531,8 +15573,8 @@ function parseExtendedChartFull(content, palette) {
       result.noPercent = true;
       continue;
     }
-    if (firstToken === "shade") {
-      result.shade = true;
+    if (firstToken === "fill" && spaceIdx < 0) {
+      result.fill = true;
       continue;
     }
     const fillFamily = fillModeFromToken(firstToken);
@@ -15549,6 +15591,10 @@ function parseExtendedChartFull(content, palette) {
       result.noLegend = true;
       continue;
     }
+    if (firstToken === "legend-inline" && spaceIdx < 0) {
+      result.legendInline = true;
+      continue;
+    }
     if (firstToken.startsWith("no-") && spaceIdx < 0) {
       continue;
     }
@@ -15911,6 +15957,7 @@ function parseEventLine(content, palette) {
     titleLineNumber: null,
     events: [],
     eras: [],
+    now: null,
     tagGroups: [],
     options,
     diagnostics: [],
@@ -16105,6 +16152,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) {
@@ -16180,6 +16265,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) {
@@ -16374,7 +16466,7 @@ function parseEventHeader(trimmed, lineNumber, era, aliasMap, diagnostics, pushW
     era
   };
 }
-var NON_ISO_DATE_RE, TBD_RE, SIDE_RE, ERA_RE2, ERA_COLLAPSED_RE, SECTION_SEAM_RE, DIRECTION_RE;
+var NON_ISO_DATE_RE, TBD_RE, SIDE_RE, ERA_RE2, ERA_COLLAPSED_RE, NOW_RE, SECTION_SEAM_RE, DIRECTION_RE;
 var init_parser13 = __esm({
   "src/event-line/parser.ts"() {
     "use strict";
@@ -16390,6 +16482,7 @@ var init_parser13 = __esm({
     SIDE_RE = /^side\s+(above|below|alternate)\b/i;
     ERA_RE2 = /^\[([^\]]+)\]\s*(.*)$/;
     ERA_COLLAPSED_RE = /\bcollapsed:\s*(true|false)\b/i;
+    NOW_RE = /^now\b\s*(.*)$/i;
     SECTION_SEAM_RE = /^section\b/i;
     DIRECTION_RE = /^direction\s+(\w+)/i;
   }
@@ -18054,7 +18147,8 @@ var init_parser16 = __esm({
       "fill-solid",
       "fill-outline",
       "no-title",
-      "no-legend"
+      "no-legend",
+      "legend-inline"
     ]);
     ALL_CHART_TYPES2 = [
       "c4",
@@ -19758,6 +19852,9 @@ function parseGantt(content, palette) {
         case "no-legend":
           result.options.noLegend = true;
           break;
+        case "legend-inline":
+          result.options.legendInline = true;
+          break;
       }
       continue;
     }
@@ -20563,6 +20660,10 @@ function parseMap(content, palette) {
       case "no-legend":
         d.noLegend = true;
         break;
+      // §1.9 universal — accepted so it doesn't parse as a region; map renders no
+      // one-line header, so render.ts emits the "not supported" warning.
+      case "legend-inline":
+        break;
       case "no-coastline":
         d.noCoastline = true;
         break;
@@ -21853,6 +21954,7 @@ __export(parser_exports15, {
 function parseSketch(content, palette) {
   const options = {
     noLegend: false,
+    legendInline: false,
     fillMode: void 0,
     noDescriptions: false
   };
@@ -22233,6 +22335,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;
@@ -25837,7 +25943,8 @@ var init_parser28 = __esm({
       "fill-solid",
       "fill-outline",
       "no-title",
-      "no-legend"
+      "no-legend",
+      "legend-inline"
     ]);
   }
 });
@@ -26425,6 +26532,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) {
@@ -26676,6 +26787,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;
@@ -28227,6 +28342,18 @@ function formatTime(h, m, s, hours12) {
   }
   return { main: `${pad22(h)}:${pad22(m)}`, sec, ap: "" };
 }
+function fixedTimeCells(s, x0, fs) {
+  const digit = fs * 0.6;
+  const colon = fs * 0.32;
+  const cells = [];
+  let x = x0;
+  for (const ch of s) {
+    const cw = ch === ":" ? colon : digit;
+    cells.push({ ch, x: x + cw / 2 });
+    x += cw;
+  }
+  return { cells, width: x - x0 };
+}
 function fmtDelta(ms) {
   const m = Math.max(0, Math.round(ms / 6e4));
   if (m < 90) return `${m}m`;
@@ -28654,6 +28781,8 @@ function parseClock(content, palette) {
         case "no-title":
           result.noTitle = true;
           break;
+        case "legend-inline":
+          break;
         case "fill-tint":
         case "fill-solid":
         case "fill-outline": {
@@ -28829,6 +28958,7 @@ var init_parser35 = __esm({
       "no-sun",
       "time-24",
       "no-title",
+      "legend-inline",
       // Canonical direction booleans (§1.9); key+value `direction <lr|tb>` (and
       // its `columns` value alias) stays parse-accepted legacy. These MUST be in
       // this set — otherwise a bare `direction-lr` line parses as a zone entry.
@@ -29035,6 +29165,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;
@@ -33492,7 +33626,10 @@ function renderLegendSvg(groups, options) {
   const wrapWidth = containerWidth > 0 ? containerWidth : 1200;
   const config = {
     groups,
-    position: { placement: "top-center", titleRelation: "below-title" },
+    position: {
+      placement: "top-center",
+      titleRelation: options.align === "left" ? "inline-with-title" : "below-title"
+    },
     mode: "preview"
   };
   const state = { activeGroup: activeGroup ?? null };
@@ -33538,13 +33675,132 @@ var init_legend_svg = __esm({
   }
 });
 
+// src/utils/inline-header.ts
+function legendInlineSupported(type) {
+  return LEGEND_INLINE_SUPPORTED.has(type.toLowerCase());
+}
+function measureTitleWidth(title, fontSize = TITLE_FONT_SIZE) {
+  return measureText(title, fontSize) * BOLD_WIDTH_FACTOR;
+}
+function layoutInlineHeader(input) {
+  const pad3 = input.pad ?? INLINE_HEADER_PAD;
+  const gap = input.gap ?? INLINE_HEADER_GAP;
+  const fontSize = input.titleFontSize ?? TITLE_FONT_SIZE;
+  const baselineY = input.titleBaselineY ?? TITLE_Y;
+  const stacked = {
+    inline: false,
+    titleX: input.containerWidth / 2,
+    titleAnchor: "middle",
+    legendX: 0,
+    legendY: input.titleBandHeight,
+    headerHeight: input.titleBandHeight + (input.hasLegend ? input.legendReserve : 0)
+  };
+  if (!input.requested || !input.hasLegend) return stacked;
+  const titleW = measureTitleWidth(input.title, fontSize);
+  const titleRight = pad3 + titleW + gap;
+  const avail = input.containerWidth - titleRight - pad3;
+  const fits = avail >= MIN_INLINE_LEGEND_W && input.legendHeight <= LEGEND_HEIGHT + 1 && input.legendWidth <= avail + 0.5;
+  if (!fits) return stacked;
+  return {
+    inline: true,
+    titleX: pad3,
+    titleAnchor: "start",
+    // Flush to the right edge; the fit test guarantees this clears the title.
+    legendX: input.containerWidth - pad3 - input.legendWidth,
+    // Center the legend row on the title's visual middle (cap-center ≈ baseline
+    // − 0.36·fontSize).
+    legendY: baselineY - fontSize * 0.36 - input.legendHeight / 2,
+    headerHeight: input.titleBandHeight
+  };
+}
+var LEGEND_INLINE_SUPPORTED, INLINE_HEADER_PAD, INLINE_HEADER_GAP, BOLD_WIDTH_FACTOR, MIN_INLINE_LEGEND_W;
+var init_inline_header = __esm({
+  "src/utils/inline-header.ts"() {
+    "use strict";
+    init_legend_constants();
+    init_text_measure();
+    init_title_constants();
+    LEGEND_INLINE_SUPPORTED = /* @__PURE__ */ new Set([
+      // data charts
+      "bar",
+      "line",
+      "radar",
+      "scatter",
+      "function",
+      // structured
+      "state",
+      "treemap",
+      "block",
+      "event-line",
+      "boxes-and-lines",
+      "er",
+      "class",
+      "family",
+      "infra",
+      "sequence",
+      "sketch",
+      "bracket",
+      "gantt",
+      "pert",
+      "sitemap",
+      "mindmap",
+      "kanban",
+      "journey-map"
+    ]);
+    INLINE_HEADER_PAD = 8;
+    INLINE_HEADER_GAP = 16;
+    BOLD_WIDTH_FACTOR = 1.06;
+    MIN_INLINE_LEGEND_W = 48;
+  }
+});
+
 // src/charts-d3/shared.ts
 function fmtNum(n) {
   if (!isFinite(n)) return "";
   if (Math.abs(n) >= 1e3) return n.toLocaleString("en-US");
   return String(Math.round(n * 100) / 100);
 }
-function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
+function renderInlineHeader(svg, groups, palette, isDark, width, info) {
+  const {
+    svg: legendSvg,
+    height: legendH,
+    width: legendW
+  } = renderLegendSvg(groups, {
+    palette,
+    isDark,
+    containerWidth: width,
+    activeGroup: groups[0].name,
+    className: "chart-legend",
+    align: "left"
+  });
+  if (!legendSvg) return null;
+  const geom = layoutInlineHeader({
+    requested: true,
+    title: info.title,
+    hasLegend: true,
+    legendWidth: legendW,
+    legendHeight: legendH,
+    containerWidth: width,
+    titleBandHeight: TITLE_OFFSET,
+    legendReserve: 0,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  if (!geom.inline) return null;
+  const titleEl = svg.append("text").attr("class", "chart-title").attr("x", geom.titleX).attr("y", TITLE_Y).attr("fill", info.textColor).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).text(info.title);
+  if (info.titleLineNumber) {
+    titleEl.attr("data-line-number", info.titleLineNumber);
+  }
+  const node = svg.node();
+  if (node) {
+    node.insertAdjacentHTML(
+      "beforeend",
+      `<g transform="translate(${geom.legendX},${geom.legendY})">${legendSvg}</g>`
+    );
+  }
+  return TITLE_OFFSET + 12;
+}
+function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width, inlineTitle) {
   return injectLegendGroups(
     svg,
     // `no-legend` (#48) → pass no groups; injectLegendGroups then returns the
@@ -33553,10 +33809,31 @@ function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
 }
-function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width) {
+function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width, inlineTitle) {
+  if (inlineTitle && groups.length > 0) {
+    const inset = renderInlineHeader(
+      svg,
+      groups,
+      palette,
+      isDark,
+      width,
+      inlineTitle
+    );
+    if (inset !== null) return inset;
+  }
+  if (inlineTitle) {
+    renderChartTitle(
+      svg,
+      inlineTitle.title,
+      inlineTitle.titleLineNumber,
+      width,
+      inlineTitle.textColor
+    );
+  }
   const titleH = hasTitle ? 40 : 0;
   if (groups.length === 0) return hasTitle ? titleH + 12 : 24;
   const legendY = 8 + titleH;
@@ -33599,6 +33876,7 @@ function tagDatum(sel, o) {
   if (o.name != null) sel.attr("data-name", o.name);
   if (o.value != null) sel.attr("data-value", String(o.value));
   if (o.color != null) sel.attr("data-color", o.color);
+  if (o.seriesName != null) sel.attr("data-series-name", o.seriesName);
   return sel;
 }
 function drawValueLabel(svg, text, x, y, color, anchor = "middle") {
@@ -33612,6 +33890,9 @@ var init_shared = __esm({
     init_text_measure();
     init_data_chart_parser();
     init_legend_svg();
+    init_d3_helpers();
+    init_inline_header();
+    init_title_constants();
     AXIS_LABEL_FONT = 13;
     TICK_FONT = 12;
     VALUE_FONT = 12;
@@ -33626,7 +33907,7 @@ function seriesValues(pt, seriesCount) {
   for (let s = 1; s < seriesCount; s++) out.push(pt.extraValues?.[s - 1] ?? 0);
   return out;
 }
-function renderBar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, hasTitle) {
+function renderBar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, hasTitle, inlineTitle) {
   const data = chart.data;
   const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
   const stacked = chart.barLayout === "stack";
@@ -33641,7 +33922,7 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
   const fillMode = chart.fillMode;
   const colorFor = (seriesIdx, catIdx, override) => {
     if (override) return override;
-    return multiSeries ? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
+    return multiSeries ? chart.seriesNameColors?.[seriesIdx] ?? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
   };
   const fillOf = (c) => shapeFill(palette, c, isDark, { mode: fillMode });
   const top = reserveHeader(
@@ -33651,7 +33932,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
   const perCat = data.map((d) => seriesValues(d, seriesCount));
   const maxVal = stacked ? d3max(perCat, (vals) => vals.reduce((a, b) => a + b, 0)) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
@@ -33704,7 +33986,8 @@ function renderBar(svg, chart, width, height, colors, palette, isDark, textColor
         key: multiSeries ? sName : d.label,
         name: multiSeries ? `${d.label} \xB7 ${sName}` : d.label,
         value: v,
-        color: stroke2
+        color: stroke2,
+        seriesName: multiSeries ? sName : void 0
       };
       if (stacked) {
         if (horiz) {
@@ -33825,7 +34108,7 @@ import { line as d3line, area as d3area } from "d3-shape";
 function seriesValue(pt, s) {
   return s === 0 ? pt.value : pt.extraValues?.[s - 1] ?? 0;
 }
-function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
+function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle, inlineTitle) {
   const data = chart.data;
   const isArea = chart.fill === true;
   const solid = chart.fillMode === "solid";
@@ -33851,7 +34134,8 @@ function renderLine(svg, chart, width, height, colors, palette, isDark, textColo
     palette,
     isDark,
     hasTitle,
-    width
+    width,
+    inlineTitle
   );
   const extentFor = (side) => {
     let lo = Infinity;
@@ -34010,7 +34294,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const MARGIN11 = 6;
   const halfW = width / 2 - MARGIN11;
   const rH = availH / 2 - availH * 0.06;
-  const labelExtent = 1.268 + 0.0428 * maxLabelLen;
+  const labelExtent = 1.27 + 0.06 * maxLabelLen;
   const rLabeled = Math.min(rH, halfW / labelExtent);
   const showLabels = maxLabelLen > 0 && rLabeled >= 45;
   const rPlain = Math.min(rH, halfW * 0.94);
@@ -34024,6 +34308,7 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
   const arcs = d3pie().sort(null).value((d) => d.value)(data.map((d) => ({ value: d.value })));
   const arcGen = d3arc().innerRadius(hasHole ? radius * holeRatio : 0).outerRadius(radius);
   const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
+  const labelInfos = [];
   arcs.forEach((a, i) => {
     const stroke2 = strokeFor(i, data[i].color);
     const fill2 = shapeFill(palette, stroke2, isDark, { mode: fillMode });
@@ -34037,32 +34322,65 @@ function renderPie(svg, chart, width, height, palette, isDark, textColor, topIns
       color: stroke2
     });
     if (!showLabels) return;
+    const label = labels[i];
+    if (!label) return;
     const mid = (a.startAngle + a.endAngle) / 2 - Math.PI / 2;
     const rightSide = Math.cos(mid) >= 0;
-    const x0 = Math.cos(mid) * radius;
-    const y0 = Math.sin(mid) * radius;
-    const x1 = Math.cos(mid) * (radius + elbowOut);
-    const y1 = Math.sin(mid) * (radius + elbowOut);
-    const x2 = x1 + (rightSide ? elbowRun : -elbowRun);
-    const label = labels[i];
-    if (label) {
-      const tag = {
+    labelInfos.push({
+      rightSide,
+      x0: Math.cos(mid) * radius,
+      y0: Math.sin(mid) * radius,
+      // Radial stub end — meets the arc at 90° to the circle edge.
+      x1: Math.cos(mid) * (radius + elbowOut),
+      y1: Math.sin(mid) * (radius + elbowOut),
+      idealY: Math.sin(mid) * (radius + elbowOut),
+      y: 0,
+      label,
+      stroke: stroke2,
+      // Tag the leader-line + label with the same emph-key as the wedge so
+      // hover (baked-CSS :has() and the app's JS dim) emphasizes all three
+      // together; colour the label text to match its segment.
+      tag: {
         line: data[i].lineNumber,
         key: data[i].label,
         name: data[i].label,
         value: `${fmtNum(data[i].value)} (${pct}%)`,
         color: stroke2
-      };
-      tagDatum(
-        g.append("polyline").attr("points", `${x0},${y0} ${x1},${y1} ${x2},${y1}`).attr("fill", "none").attr("stroke", stroke2).attr("stroke-width", 1),
-        tag
-      );
-      tagDatum(
-        g.append("text").attr("x", x2 + (rightSide ? font * 0.3 : -font * 0.3)).attr("y", y1 + font * 0.3).attr("text-anchor", rightSide ? "start" : "end").attr("fill", stroke2).attr("font-size", font).attr("font-family", FONT_FAMILY).text(label),
-        tag
-      );
-    }
+      }
+    });
   });
+  if (showLabels && labelInfos.length > 0) {
+    const labelX = radius + elbowOut + elbowRun;
+    const minGap = font * 1.18;
+    const bound = availH / 2 - font;
+    for (const side of [true, false]) {
+      const group = labelInfos.filter((l) => l.rightSide === side);
+      if (group.length === 0) continue;
+      const topHalf = group.filter((l) => l.idealY < 0).sort((a, b) => b.idealY - a.idealY);
+      const botHalf = group.filter((l) => l.idealY >= 0).sort((a, b) => a.idealY - b.idealY);
+      topHalf.forEach((l, i) => {
+        l.y = i === 0 ? l.idealY : Math.min(l.idealY, topHalf[i - 1].y - minGap);
+        l.y = Math.max(l.y, -bound);
+      });
+      botHalf.forEach((l, i) => {
+        l.y = i === 0 ? l.idealY : Math.max(l.idealY, botHalf[i - 1].y + minGap);
+        l.y = Math.min(l.y, bound);
+      });
+      const sx = side ? 1 : -1;
+      const tx = sx * labelX;
+      for (const l of group) {
+        const xr = Math.abs(l.y0) < 1e-3 ? l.x1 : l.y * l.x0 / l.y0;
+        tagDatum(
+          g.append("polyline").attr("points", `${l.x0},${l.y0} ${xr},${l.y} ${tx},${l.y}`).attr("fill", "none").attr("stroke", l.stroke).attr("stroke-width", 1),
+          l.tag
+        );
+        tagDatum(
+          g.append("text").attr("x", tx + sx * font * 0.3).attr("y", l.y + font * 0.3).attr("text-anchor", side ? "start" : "end").attr("fill", l.stroke).attr("font-size", font).attr("font-family", FONT_FAMILY).text(l.label),
+          l.tag
+        );
+      }
+    }
+  }
   if (hasHole && !chart.noCenterTotal) {
     g.append("text").attr("text-anchor", "middle").attr("y", Math.max(4, 8 * labelScale)).attr("fill", textColor).attr("font-size", Math.max(11, 26 * labelScale)).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
   }
@@ -34908,25 +35226,179 @@ var init_chord = __esm({
 });
 
 // src/utils/expr-eval.ts
+function tokenize(expr) {
+  const tokens = [];
+  let i = 0;
+  const n = expr.length;
+  while (i < n) {
+    const c = expr.charAt(i);
+    if (c === " " || c === "	") {
+      i++;
+      continue;
+    }
+    if (c >= "0" && c <= "9" || c === ".") {
+      let j = i + 1;
+      while (/[0-9.]/.test(expr.charAt(j))) j++;
+      const exp = expr.charAt(j);
+      if (exp === "e" || exp === "E") {
+        let k = j + 1;
+        const sign = expr.charAt(k);
+        if (sign === "+" || sign === "-") k++;
+        if (/[0-9]/.test(expr.charAt(k))) {
+          while (/[0-9]/.test(expr.charAt(k))) k++;
+          j = k;
+        }
+      }
+      const num = Number(expr.slice(i, j));
+      if (!isFinite(num)) throw new Error("bad number");
+      tokens.push({ t: "num", v: num });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z]/.test(c)) {
+      let j = i + 1;
+      while (/[a-zA-Z0-9]/.test(expr.charAt(j))) j++;
+      tokens.push({ t: "id", v: expr.slice(i, j).toLowerCase() });
+      i = j;
+      continue;
+    }
+    if ("+-*/^()".includes(c)) {
+      tokens.push({ t: "op", v: c });
+      i++;
+      continue;
+    }
+    throw new Error(`unexpected char: ${c}`);
+  }
+  return tokens;
+}
 function evaluateExpression(expr, x) {
   try {
-    const processed = expr.replace(/\bpi\b/gi, String(Math.PI)).replace(/\be\b/g, String(Math.E)).replace(/\bsin\s*\(/gi, "Math.sin(").replace(/\bcos\s*\(/gi, "Math.cos(").replace(/\btan\s*\(/gi, "Math.tan(").replace(/\bln\s*\(/gi, "Math.log(").replace(/\blog\s*\(/gi, "Math.log10(").replace(/\bexp\s*\(/gi, "Math.exp(").replace(/\bsqrt\s*\(/gi, "Math.sqrt(").replace(/\babs\s*\(/gi, "Math.abs(").replace(/\bx\b/gi, `(${x})`).replace(/\^/g, "**");
-    const result = new Function(`return ${processed}`)();
+    const result = new Parser(tokenize(expr), x).evaluate();
     return typeof result === "number" && isFinite(result) ? result : NaN;
   } catch {
     return NaN;
   }
 }
+var FUNCS, Parser;
 var init_expr_eval = __esm({
   "src/utils/expr-eval.ts"() {
     "use strict";
+    FUNCS = {
+      sin: Math.sin,
+      cos: Math.cos,
+      tan: Math.tan,
+      ln: Math.log,
+      log: Math.log10,
+      exp: Math.exp,
+      sqrt: Math.sqrt,
+      abs: Math.abs
+    };
+    Parser = class {
+      constructor(tokens, x) {
+        this.tokens = tokens;
+        this.x = x;
+      }
+      tokens;
+      x;
+      pos = 0;
+      peek() {
+        return this.tokens[this.pos];
+      }
+      eatOp(v) {
+        const tk = this.peek();
+        if (tk?.t !== "op" || tk.v !== v) throw new Error(`expected ${v}`);
+        this.pos++;
+      }
+      evaluate() {
+        const value = this.parseExpr();
+        if (this.pos !== this.tokens.length) throw new Error("trailing input");
+        return value;
+      }
+      // expr = term (('+' | '-') term)*
+      parseExpr() {
+        let value = this.parseTerm();
+        for (; ; ) {
+          const tk = this.peek();
+          if (tk?.t === "op" && (tk.v === "+" || tk.v === "-")) {
+            this.pos++;
+            const rhs = this.parseTerm();
+            value = tk.v === "+" ? value + rhs : value - rhs;
+          } else break;
+        }
+        return value;
+      }
+      // term = factor (('*' | '/') factor)*
+      parseTerm() {
+        let value = this.parseFactor();
+        for (; ; ) {
+          const tk = this.peek();
+          if (tk?.t === "op" && (tk.v === "*" || tk.v === "/")) {
+            this.pos++;
+            const rhs = this.parseFactor();
+            value = tk.v === "*" ? value * rhs : value / rhs;
+          } else break;
+        }
+        return value;
+      }
+      // factor = ('+' | '-') factor | power
+      parseFactor() {
+        const tk = this.peek();
+        if (tk?.t === "op" && (tk.v === "+" || tk.v === "-")) {
+          this.pos++;
+          const operand = this.parseFactor();
+          return tk.v === "-" ? -operand : operand;
+        }
+        return this.parsePower();
+      }
+      // power = primary ('^' factor)?  — right-associative
+      parsePower() {
+        const base = this.parsePrimary();
+        const tk = this.peek();
+        if (tk?.t === "op" && tk.v === "^") {
+          this.pos++;
+          const exponent = this.parseFactor();
+          return base ** exponent;
+        }
+        return base;
+      }
+      // primary = number | const | 'x' | func '(' expr ')' | '(' expr ')'
+      parsePrimary() {
+        const tk = this.peek();
+        if (!tk) throw new Error("unexpected end");
+        if (tk.t === "num") {
+          this.pos++;
+          return tk.v;
+        }
+        if (tk.t === "op" && tk.v === "(") {
+          this.pos++;
+          const value = this.parseExpr();
+          this.eatOp(")");
+          return value;
+        }
+        if (tk.t === "id") {
+          this.pos++;
+          if (tk.v === "x") return this.x;
+          if (tk.v === "pi") return Math.PI;
+          if (tk.v === "e") return Math.E;
+          const fn = FUNCS[tk.v];
+          if (fn) {
+            this.eatOp("(");
+            const arg = this.parseExpr();
+            this.eatOp(")");
+            return fn(arg);
+          }
+          throw new Error(`unknown identifier: ${tk.v}`);
+        }
+        throw new Error("unexpected token");
+      }
+    };
   }
 });
 
 // src/charts-d3/function.ts
 import { scaleLinear as scaleLinear8 } from "d3-scale";
-import { line as d3line2 } from "d3-shape";
-function renderFunction(svg, chart, width, height, colors, textColor, mutedColor, topInset) {
+import { line as d3line2, area as d3area2 } from "d3-shape";
+function renderFunction(svg, chart, width, height, colors, textColor, mutedColor, topInset, palette, isDark) {
   const fns = chart.functions ?? [];
   if (fns.length === 0) return;
   const xr = chart.xRange ?? { min: -10, max: 10 };
@@ -34974,7 +35446,15 @@ function renderFunction(svg, chart, width, height, colors, textColor, mutedColor
     svg.append("line").attr("x1", xx).attr("x2", xx).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.2);
     svg.append("text").attr("class", "dgmo-tick").attr("x", xx).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
   }
-  const gen = d3line2().defined((p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1).x((p) => x(p[0])).y((p) => y(p[1]));
+  const inRange = (p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1;
+  if (chart.fill === true) {
+    const solid = chart.fillMode === "solid";
+    const areaGen = d3area2().defined(inRange).x((p) => x(p[0])).y0(y(Math.max(y.domain()[0], 0))).y1((p) => y(p[1]));
+    for (const c of curves) {
+      svg.append("path").attr("class", "dgmo-series-area").attr("d", areaGen(c.pts) ?? "").attr("fill", solid ? c.color : shapeFill(palette, c.color, isDark)).attr("stroke", "none").attr("data-series-name", c.name);
+    }
+  }
+  const gen = d3line2().defined(inRange).x((p) => x(p[0])).y((p) => y(p[1]));
   for (const c of curves) {
     const path = svg.append("path").attr("d", gen(c.pts) ?? "").attr("fill", "none").attr("stroke", c.color).attr("stroke-width", 1.75).attr("stroke-linejoin", "round").attr("data-series-name", c.name);
     tagDatum(path, { line: c.line, key: c.name, name: c.name, color: c.color });
@@ -34992,6 +35472,7 @@ var SAMPLES;
 var init_function = __esm({
   "src/charts-d3/function.ts"() {
     "use strict";
+    init_color_utils();
     init_fonts();
     init_expr_eval();
     init_shared();
@@ -35009,6 +35490,18 @@ __export(charts_d3_exports, {
 function supportsD3DataChart(type) {
   return D3_DATA_CHART_TYPES.has(type);
 }
+function inlineTitleFor(chart, hasTitle, textColor) {
+  if (!hasTitle || !chart.legendInline || chart.noLegend || !INLINE_LEGEND_TYPES.has(chart.type)) {
+    return void 0;
+  }
+  return {
+    title: chart.title,
+    ...chart.titleLineNumber !== void 0 && {
+      titleLineNumber: chart.titleLineNumber
+    },
+    textColor
+  };
+}
 function firstNonCommentToken(content) {
   for (const raw of content.split("\n")) {
     const l = raw.trim();
@@ -35056,7 +35549,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   const std = forceExtended ? null : parseChart(content, palette);
   if (std && !std.error && std.data.length > 0 && STANDARD.has(std.type)) {
     const hasTitle2 = !std.noTitle && !!std.title;
-    if (hasTitle2)
+    const inlineTitle2 = inlineTitleFor(std, hasTitle2, textColor);
+    if (hasTitle2 && !inlineTitle2)
       renderChartTitle(s, std.title, std.titleLineNumber, width, textColor);
     switch (std.type) {
       case "bar":
@@ -35070,7 +35564,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           isDark,
           textColor,
           mutedColor,
-          hasTitle2
+          hasTitle2,
+          inlineTitle2
         );
         return true;
       case "line":
@@ -35085,7 +35580,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           textColor,
           mutedColor,
           bgColor,
-          hasTitle2
+          hasTitle2,
+          inlineTitle2
         );
         return true;
       case "pie":
@@ -35108,7 +35604,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
           palette,
           isDark,
           hasTitle2,
-          width
+          width,
+          inlineTitle2
         );
         renderRadar(
           s,
@@ -35142,7 +35639,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
   if (ext.error || !EXTENDED.has(ext.type)) return false;
   const seriesColors2 = getSeriesColors(palette);
   const hasTitle = !ext.noTitle && !!ext.title;
-  if (hasTitle)
+  const inlineTitle = inlineTitleFor(ext, hasTitle, textColor);
+  if (hasTitle && !inlineTitle)
     renderChartTitle(s, ext.title, ext.titleLineNumber, width, textColor);
   switch (ext.type) {
     case "funnel":
@@ -35178,7 +35676,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         palette,
         isDark,
         hasTitle,
-        width
+        width,
+        inlineTitle
       );
       renderScatter(
         s,
@@ -35227,7 +35726,8 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         palette,
         isDark,
         hasTitle,
-        width
+        width,
+        inlineTitle
       );
       renderFunction(
         s,
@@ -35237,7 +35737,9 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
         seriesColors2,
         textColor,
         mutedColor,
-        top
+        top,
+        palette,
+        isDark
       );
       return true;
     }
@@ -35245,7 +35747,7 @@ function renderInto(s, content, palette, isDark, width, height, textColor, muted
       return false;
   }
 }
-var STANDARD, EXTENDED, D3_DATA_CHART_TYPES;
+var STANDARD, EXTENDED, D3_DATA_CHART_TYPES, INLINE_LEGEND_TYPES;
 var init_charts_d3 = __esm({
   "src/charts-d3/index.ts"() {
     "use strict";
@@ -35276,6 +35778,13 @@ var init_charts_d3 = __esm({
       "function"
     ]);
     D3_DATA_CHART_TYPES = /* @__PURE__ */ new Set([...STANDARD, ...EXTENDED]);
+    INLINE_LEGEND_TYPES = /* @__PURE__ */ new Set([
+      "bar",
+      "line",
+      "radar",
+      "scatter",
+      "function"
+    ]);
   }
 });
 
@@ -35355,7 +35864,7 @@ __export(renderer_exports, {
   renderEventLineForExport: () => renderEventLineForExport
 });
 import * as d3Selection6 from "d3-selection";
-function renderEventLine(container, parsed, palette, isDark, onClickItem, exportDims, tagOverride) {
+function renderEventLine(container, parsed, palette, isDark, onClickItem, exportDims, tagOverride, nowDate) {
   if (parsed.events.length === 0) return;
   d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -35374,7 +35883,32 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   const hasLegend = parsed.tagGroups.length > 0 && activeGroup !== null && !parsed.options.noLegend;
   const titleH = showTitle ? TITLE_AREA : 0;
   const legendH = hasLegend ? LEGEND_BAND : 0;
-  const topUsed = titleH + legendH;
+  const inlineRequested = parsed.options.legendInline === true;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve: legendH,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const topUsed = header.inline ? titleH : titleH + legendH;
   const eraByName = new Map(parsed.eras.map((e) => [e.name, e]));
   const collapsedSet = new Set(
     parsed.eras.filter((e) => e.collapsed).map((e) => e.name)
@@ -35717,14 +36251,17 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   }
   if (!exportMode) svg.append("style").text(HOVER_CSS);
   if (showTitle) {
-    const t = svg.append("text").attr("class", "chart-title").attr("x", contentW / 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);
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : contentW / 2).attr("y", TITLE_Y).attr("text-anchor", header.inline ? header.titleAnchor : "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);
     if (onClickItem && parsed.titleLineNumber) {
       const ln = parsed.titleLineNumber;
       t.style("cursor", "pointer").on("click", () => onClickItem(ln));
     }
   }
   if (hasLegend) {
-    const legendG = svg.append("g").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     const groups = parsed.tagGroups.map((g) => ({
       name: g.name,
       entries: g.entries.map((e) => ({
@@ -35738,7 +36275,14 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       isDark,
       width: contentW,
       mode: exportMode ? "export" : "preview",
-      activeGroup
+      activeGroup,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the header's right edge; stacked → centered below the title
+      // (== DEFAULT_POSITION, so the stacked output is byte-identical).
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      }
     });
     if (!exportMode) addLegendEntryHitAreas(legendG);
   }
@@ -35964,6 +36508,111 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       }
     }
   }
+  if (parsed.now && scaled) {
+    let nowValue = parsed.now.dateValue;
+    if (parsed.now.computed) {
+      const d = nowDate ?? /* @__PURE__ */ new Date();
+      const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+      const v = parseTimelineDate(iso);
+      nowValue = Number.isFinite(v) ? v : null;
+    }
+    const dated = placed.filter((p) => p.kind !== "era" && !p.future && p.dateValue !== null).sort((a, b) => a.dateValue - b.dateValue);
+    let nowX = nowValue === null ? null : valueToSpineX(nowValue, dated);
+    const lastReal = dated[dated.length - 1];
+    if (nowX !== null && nowValue !== null && lastReal && nowValue > lastReal.dateValue) {
+      const trailing = placed.filter((p) => p.future && !p.futureSpan).map((p) => p.x);
+      if (trailing.length) nowX = Math.min(...trailing);
+    }
+    if (nowX !== null) {
+      const base = themeBaseBg(palette, isDark);
+      const nowColor = palette.destructive;
+      const fillMode = parsed.options.fillMode;
+      const pillFill = shapeFill(palette, nowColor, isDark, { mode: fillMode });
+      const pillStroke = fillMode === "solid" ? "none" : fillMode === "outline" ? nowColor : mix(nowColor, base, 55);
+      const pillStrokeW = fillMode === "solid" ? 0 : fillMode === "outline" ? 1.3 : 1;
+      const pillText = fillMode === "solid" ? contrastText(
+        pillFill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      ) : nowColor;
+      const label = parsed.now.label;
+      const pillH = 18;
+      const pillW = Math.max(28, label.length * 6.6 + 16);
+      const PIN_GAP = 6;
+      const xHalf = pillW / 2 + 4;
+      const xLo = nowX - xHalf;
+      const xHi = nowX + xHalf;
+      const boxes = geo.map((g) => ({
+        side: g.p.side,
+        top: g.top,
+        bot: g.top + g.p.cardH,
+        left: g.p.left,
+        right: g.p.left + CARD_W
+      }));
+      const overlapsX = (b) => b.left < xHi && b.right > xLo;
+      const cands = [];
+      const addAbove = (pillBottom) => {
+        const y0 = pillBottom - pillH;
+        if (y0 > topUsed + 1)
+          cands.push({ y0, y1: pillBottom, stem: spineY - pillBottom });
+      };
+      const addBelow = (pillTop) => {
+        const y1 = pillTop + pillH;
+        if (y1 < totalH - 1)
+          cands.push({ y0: pillTop, y1, stem: pillTop - spineY });
+      };
+      addAbove(spineY - LEADER_ABOVE / 2 + pillH / 2);
+      addBelow(spineY + LEADER_BELOW / 2 - pillH / 2);
+      for (const b of boxes) {
+        if (!overlapsX(b)) continue;
+        if (b.side === "above") addAbove(b.top - PIN_GAP);
+        else addBelow(b.bot + PIN_GAP);
+      }
+      const isClear = (c) => !boxes.some((b) => overlapsX(b) && b.bot > c.y0 && b.top < c.y1);
+      const byStem = (a, b) => a.stem - b.stem;
+      const slot = cands.filter(isClear).sort(byStem)[0] ?? cands.sort(byStem)[0] ?? {
+        y0: spineY - PIN_GAP - pillH,
+        y1: spineY - PIN_GAP,
+        stem: PIN_GAP + pillH
+      };
+      const above = slot.y1 <= spineY;
+      const stemFrom = above ? spineY - DOT_R : spineY + DOT_R;
+      const stemTo = above ? slot.y1 : slot.y0;
+      const pillCX = Math.max(
+        pillW / 2 + 2,
+        Math.min(nowX, contentW - pillW / 2 - 2)
+      );
+      const nowG = svg.append("g").attr("class", "evt-now").attr("data-now-x", nowX.toFixed(2));
+      const FADE_SPAN = Math.min(LEADER_ABOVE, LEADER_BELOW);
+      const ruleTop = spineY - FADE_SPAN;
+      const ruleBot = spineY + FADE_SPAN;
+      const gradId = `evt-now-fade-${nowX.toFixed(0)}`;
+      const grad = nowG.append("defs").append("linearGradient").attr("id", gradId).attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", ruleTop).attr("x2", 0).attr("y2", ruleBot);
+      grad.append("stop").attr("offset", "0%").attr("stop-color", nowColor).attr("stop-opacity", 0);
+      grad.append("stop").attr("offset", "50%").attr("stop-color", nowColor).attr("stop-opacity", 0.9);
+      grad.append("stop").attr("offset", "100%").attr("stop-color", nowColor).attr("stop-opacity", 0);
+      nowG.append("line").attr("x1", nowX).attr("y1", ruleTop).attr("x2", nowX).attr("y2", ruleBot).attr("stroke", `url(#${gradId})`).attr("stroke-width", 1.6).attr("stroke-dasharray", "1 4").attr("stroke-linecap", "round");
+      nowG.append("path").attr("d", `M${nowX} ${spineY - 5} l5 5 l-5 5 l-5 -5 z`).attr("fill", nowColor);
+      nowG.append("line").attr("x1", nowX).attr("y1", stemFrom).attr("x2", nowX).attr("y2", stemTo).attr("stroke", nowColor).attr("stroke-width", 1.6);
+      nowG.append("rect").attr("x", pillCX - pillW / 2).attr("y", slot.y0).attr("width", pillW).attr("height", pillH).attr("rx", pillH / 2).attr("fill", pillFill).attr("stroke", pillStroke).attr("stroke-width", pillStrokeW);
+      nowG.append("text").attr("x", pillCX).attr("y", slot.y0 + pillH / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("font-weight", 600).attr("fill", pillText).text(label);
+      if (!exportMode) {
+        const hoverRule = nowG.append("line").attr("class", "evt-now-rule-full").attr("x1", nowX).attr("y1", Math.max(topUsed, 2)).attr("x2", nowX).attr("y2", totalH - 2).attr("stroke", nowColor).attr("stroke-width", 1.4).attr("stroke-dasharray", "1 4").attr("stroke-linecap", "round").attr("opacity", 0).style("transition", "opacity 120ms ease").style("pointer-events", "none");
+        hoverRule.lower();
+        const nowNode = nowG.node();
+        if (nowNode) {
+          nowNode.addEventListener(
+            "mouseenter",
+            () => hoverRule.attr("opacity", 0.5)
+          );
+          nowNode.addEventListener(
+            "mouseleave",
+            () => hoverRule.attr("opacity", 0)
+          );
+        }
+      }
+    }
+  }
   if (!exportMode) {
     const root = svg.node();
     wireEventLineHover(root);
@@ -35978,7 +36627,8 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
           isDark,
           onClickItem,
           exportDims,
-          tagOverride
+          tagOverride,
+          nowDate
         )
       );
       applyEvtHidden(container, root);
@@ -36186,7 +36836,7 @@ function wireEventLineHover(root) {
     if (!to || !root.contains(to)) applyEvtFocus(root, readPin(root));
   });
 }
-function renderEventLineForExport(container, parsed, palette, isDark, exportDims, tagOverride) {
+function renderEventLineForExport(container, parsed, palette, isDark, exportDims, tagOverride, nowDate) {
   renderEventLine(
     container,
     parsed,
@@ -36194,9 +36844,27 @@ function renderEventLineForExport(container, parsed, palette, isDark, exportDims
     isDark,
     void 0,
     exportDims,
-    tagOverride
+    tagOverride,
+    nowDate
   );
 }
+function valueToSpineX(v, dated) {
+  if (!dated.length) return null;
+  const first = dated[0];
+  const last = dated[dated.length - 1];
+  if (v <= first.dateValue) return first.x;
+  if (v >= last.dateValue) return last.x;
+  for (let i = 0; i < dated.length - 1; i++) {
+    const a = dated[i];
+    const b = dated[i + 1];
+    if (v >= a.dateValue && v <= b.dateValue) {
+      const span = b.dateValue - a.dateValue;
+      if (span <= 0) return a.x;
+      return a.x + (v - a.dateValue) / span * (b.x - a.x);
+    }
+  }
+  return last.x;
+}
 function axisBreakPaths(cx, cy) {
   const HUMPS = 2;
   const STEPS = 48;
@@ -36268,7 +36936,10 @@ var init_renderer2 = __esm({
     init_text_measure();
     init_wrapped_desc();
     init_legend_integration();
+    init_legend_layout();
+    init_inline_header();
     init_renderer();
+    init_parser();
     init_tag_groups();
     CARD_W = 210;
     H_MARGIN = 58;
@@ -36718,12 +37389,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, {
@@ -36731,17 +37399,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(
@@ -36757,6 +37442,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);
@@ -36770,10 +37456,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;
@@ -36793,7 +37481,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
       placements.push({
         node: n,
         kind: "msg",
-        diag: false,
         x: bandX,
         y: p.y,
         anchor: "start",
@@ -36818,10 +37505,16 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   }
   const showTitle = !!parsed.title;
   const titleH = showTitle ? TITLE_AREA2 : 0;
-  const W3 = Math.round(contentW);
-  const H2 = Math.round(contentH + titleH);
+  const baseW = contentW;
+  const baseH = contentH + titleH;
   const exportMode = !!exportDims;
-  const svg = d3Selection8.select(container).append("svg").attr("width", W3).attr("height", H2).attr("viewBox", `0 0 ${W3} ${H2}`).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 W3 = Math.round(Math.max(baseW, paneW));
+  const H2 = Math.round(Math.max(baseH, paneH));
+  const vw = exportMode ? W3 : paneW || W3;
+  const vh = exportMode ? H2 : paneH || H2;
+  const svg = d3Selection8.select(container).append("svg").attr("width", vw).attr("height", vh).attr("viewBox", `0 0 ${W3} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
   svg.append("rect").attr("width", W3).attr("height", H2).attr("fill", palette.bg);
   if (showTitle) {
     const t = svg.append("text").attr("class", "chart-title").attr("x", W3 / 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);
@@ -36841,7 +37534,6 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
     label,
     colorOf2,
     byKey,
-    gutter,
     cross0,
     captionY,
     onClickItem && !exportMode ? onClickItem : void 0
@@ -36853,7 +37545,7 @@ function abText(ab) {
   if (ab.behind) a.push("\u2193" + ab.behind);
   return a.join(" ");
 }
-function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byKey, gutter, cross0, captionY, onClickItem) {
+function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, 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 };
@@ -36877,17 +37569,17 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byK
     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", colorOf2(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", colorOf2(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, colorOf2(byKey(n.cherryFrom)), false);
@@ -36908,7 +37600,7 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byK
       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);
       }
     }
   }
@@ -36962,11 +37654,12 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byK
     }
     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 = colorOf2(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")
@@ -36992,7 +37685,22 @@ function drawGraph(g, parsed, palette, TB, pos, placements, label, colorOf2, byK
       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_EDGE2);
+        g.append("rect").attr("x", left).attr("y", top).attr("width", w).attr("height", SHELF_H).attr("rx", SHELF_EDGE2).attr("fill", gh ? palette.bg : mix(c, palette.bg, SHELF_TINT2)).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_LIP2).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);
@@ -37018,7 +37726,7 @@ function renderVersionControlForExport(container, parsed, palette, isDark, expor
     exportDims
   );
 }
-var LINE, DOT, CORNER, ANG, STACK, CIRCLED, TITLE_AREA2;
+var LINE, DOT, CORNER, STACK, CIRCLED, TITLE_AREA2, SHELF_TINT2, SHELF_EDGE2, SHELF_LIP2, SHELF_PAD, SHELF_H, LEADER_GAP, ROW_GAP;
 var init_renderer4 = __esm({
   "src/version-control/renderer.ts"() {
     "use strict";
@@ -37026,13 +37734,19 @@ var init_renderer4 = __esm({
     init_title_constants();
     init_color_utils();
     init_colors();
-    LINE = 5.5;
-    DOT = 8;
-    CORNER = 13;
-    ANG = 32;
+    LINE = 3;
+    DOT = 5.5;
+    CORNER = 10;
     STACK = 19;
     CIRCLED = "\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468";
     TITLE_AREA2 = 40;
+    SHELF_TINT2 = 13;
+    SHELF_EDGE2 = 4;
+    SHELF_LIP2 = 2;
+    SHELF_PAD = 8;
+    SHELF_H = 21;
+    LEADER_GAP = 22;
+    ROW_GAP = 7;
   }
 });
 
@@ -39319,7 +40033,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;
@@ -39521,7 +40261,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) {
@@ -39531,7 +40271,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));
     }
@@ -39543,11 +40286,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,
@@ -39563,6 +40307,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,
@@ -39640,6 +40388,7 @@ var init_renderer6 = __esm({
     "use strict";
     init_tag_groups();
     init_parsing();
+    init_inline_header();
     init_fonts();
     init_color_utils();
     init_inline_markdown();
@@ -40744,15 +41493,50 @@ function renderClassDiagram(container, parsed, layout, palette, isDark, onClickI
   const LEGEND_FIXED_GAP4 = 8;
   const sLegendFixedGap = ctx.aesthetic(LEGEND_FIXED_GAP4);
   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_SCALE3, 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 = d3Selection12.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%");
@@ -40769,7 +41553,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);
@@ -40784,22 +41568,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
@@ -40998,6 +41779,8 @@ var init_renderer8 = __esm({
     init_export_container();
     init_legend_constants();
     init_legend_integration();
+    init_legend_layout();
+    init_inline_header();
     init_title_constants();
     init_color_utils();
     init_parser8();
@@ -41575,7 +42358,55 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   const sTitleFontSize = ctx.text(TITLE_FONT_SIZE);
   const sTitleY = ctx.structural(TITLE_Y);
   const naturalW = diagramW + sDiagramPadding * 2;
-  const naturalH = diagramH + titleHeight + legendReserveH + sDiagramPadding * 2;
+  const semanticRoles = useSemanticColors ? classifyEREntities([...parsed.tables], [...parsed.relationships]) : null;
+  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
+  const presentRoles = semanticRoles ? ROLE_ORDER.filter((role) => {
+    for (const r of semanticRoles.values()) {
+      if (r === role) return true;
+    }
+    return false;
+  }) : [];
+  const semanticGroups = presentRoles.length > 0 ? [
+    {
+      name: "Role",
+      entries: presentRoles.map((role) => ({
+        value: ROLE_LABELS[role],
+        color: palette.colors[ROLE_COLORS[role]]
+      }))
+    }
+  ] : [];
+  const showSemanticLegend = semanticRoles !== null && !noLegend && presentRoles.length > 0;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const hasLegend = hasTagLegend || showSemanticLegend;
+  const inlineLegendGroups = hasTagLegend ? parsed.tagGroups : semanticGroups;
+  const inlineActiveGroup = hasTagLegend ? activeTagGroup ?? null : semanticActive ? "Role" : null;
+  const inlineContainerW = exportDims?.width ?? naturalW;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: inlineLegendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: inlineActiveGroup },
+    inlineContainerW
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: inlineContainerW,
+    titleBandHeight: titleHeight,
+    legendReserve: legendReserveH,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
+  const effectiveReserveH = header.inline ? 0 : legendReserveH;
+  const naturalH = diagramH + titleHeight + effectiveReserveH + sDiagramPadding * 2;
   let viewW;
   let viewH;
   let scale;
@@ -41584,24 +42415,24 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   if (exportDims) {
     viewW = exportDims.width ?? naturalW;
     viewH = exportDims.height ?? naturalH;
-    const availH = viewH - titleHeight - legendReserveH;
+    const availH = viewH - titleHeight - effectiveReserveH;
     const scaleX = (viewW - sDiagramPadding * 2) / diagramW;
     const scaleY = (availH - sDiagramPadding * 2) / diagramH;
     scale = Math.min(MAX_SCALE4, scaleX, scaleY);
     const scaledW = diagramW * scale;
     offsetX = (viewW - scaledW) / 2;
-    offsetY = titleHeight + legendReserveH + sDiagramPadding;
+    offsetY = titleHeight + effectiveReserveH + sDiagramPadding;
   } else {
     viewW = naturalW;
     viewH = naturalH;
     scale = 1;
     offsetX = sDiagramPadding;
-    offsetY = titleHeight + legendReserveH + sDiagramPadding;
+    offsetY = titleHeight + effectiveReserveH + sDiagramPadding;
   }
   if (viewW <= 0 || viewH <= 0) return;
   const svg = d3Selection13.select(container).append("svg").attr("width", exportDims ? viewW : "100%").attr("height", exportDims ? viewH : "100%").attr("viewBox", `0 0 ${viewW} ${viewH}`).attr("preserveAspectRatio", "xMidYMid meet").style("font-family", FONT_FAMILY);
   if (showTitle) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", viewW / 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);
@@ -41618,8 +42449,6 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   const contentG = svg.append("g").attr("transform", `translate(${offsetX}, ${offsetY}) scale(${scale})`);
   const seriesColors2 = getSeriesColors(palette);
-  const semanticRoles = useSemanticColors ? classifyEREntities([...parsed.tables], [...parsed.relationships]) : null;
-  const semanticActive = semanticRoles !== null && (semanticColorsActive ?? true);
   const useLabels = parsed.options["notation"] === "labels";
   for (const edge of layout.edges) {
     if (edge.points.length < 2) continue;
@@ -41763,46 +42592,43 @@ function renderERDiagram(container, parsed, layout, palette, isDark, onClickItem
   }
   if (hasTagLegend) {
     const legendY = sDiagramPadding + titleHeight;
-    const legendG = svg.append("g").attr("class", "er-tag-legend").attr("transform", `translate(0,${legendY})`);
+    const legendG = svg.append("g").attr("class", "er-tag-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
     renderIntegratedLegend(legendG, {
       groups: parsed.tagGroups,
       activeGroup: activeTagGroup ?? null,
       mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width: viewW
     });
     legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
   }
-  if (semanticRoles && !noLegend) {
-    const presentRoles = ROLE_ORDER.filter((role) => {
-      for (const r of semanticRoles.values()) {
-        if (r === role) return true;
-      }
-      return false;
+  if (showSemanticLegend) {
+    const legendY = sDiagramPadding + titleHeight;
+    const legendG = svg.append("g").attr("class", "er-semantic-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
+    renderIntegratedLegend(legendG, {
+      groups: semanticGroups,
+      activeGroup: semanticActive ? "Role" : null,
+      mode: exportMode ? "export" : "preview",
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
+      palette,
+      isDark,
+      width: viewW
     });
-    if (presentRoles.length > 0) {
-      const legendY = sDiagramPadding + titleHeight;
-      const semanticGroups = [
-        {
-          name: "Role",
-          entries: presentRoles.map((role) => ({
-            value: ROLE_LABELS[role],
-            color: palette.colors[ROLE_COLORS[role]]
-          }))
-        }
-      ];
-      const legendG = svg.append("g").attr("class", "er-semantic-legend").attr("transform", `translate(0,${legendY})`);
-      renderIntegratedLegend(legendG, {
-        groups: semanticGroups,
-        activeGroup: semanticActive ? "Role" : null,
-        mode: exportMode ? "export" : "preview",
-        palette,
-        isDark,
-        width: viewW
-      });
-      legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
-    }
+    legendG.selectAll("[data-legend-group]").classed("er-legend-group", true);
   }
 }
 function renderERDiagramForExport(content, theme, palette) {
@@ -41857,6 +42683,8 @@ var init_renderer9 = __esm({
     init_palettes();
     init_tag_groups();
     init_legend_constants();
+    init_legend_layout();
+    init_inline_header();
     init_legend_integration();
     init_title_constants();
     init_scaling();
@@ -42333,7 +43161,7 @@ var init_layout5 = __esm({
 // src/sketch/markdown-card.ts
 function segWidth(seg, fontSize) {
   const w = measureText(seg.text, fontSize);
-  return seg.bold ? w * BOLD_WIDTH_FACTOR : w;
+  return seg.bold ? w * BOLD_WIDTH_FACTOR2 : w;
 }
 function parseInline(text) {
   const segments = [];
@@ -42516,12 +43344,12 @@ function drawMarkdownBlock(container, text, opts) {
   }
   return shown.length * lineHeight;
 }
-var BOLD_WIDTH_FACTOR, INDENT_PX, BULLET_HANG_PX, ELLIPSIS, BULLET;
+var BOLD_WIDTH_FACTOR2, INDENT_PX, BULLET_HANG_PX, ELLIPSIS, BULLET;
 var init_markdown_card = __esm({
   "src/sketch/markdown-card.ts"() {
     "use strict";
     init_text_measure();
-    BOLD_WIDTH_FACTOR = 1.06;
+    BOLD_WIDTH_FACTOR2 = 1.06;
     INDENT_PX = 12;
     BULLET_HANG_PX = 12;
     ELLIPSIS = "\u2026";
@@ -42666,7 +43494,34 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     },
     width
   ) : 0;
-  const contentTop = titleOffset + legendHeight + DIAGRAM_PADDING6 + 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_Y2,
+    titleFontSize: TITLE_FONT_SIZE2
+  });
+  const contentTop = titleOffset + (header.inline ? 0 : legendHeight) + DIAGRAM_PADDING6 + extraTop;
   const height = Math.max(
     contentTop + maxY + DIAGRAM_PADDING6,
     options.exportDims?.height ?? 0
@@ -42692,15 +43547,22 @@ function renderSketch(container, parsed, layout, palette, isDark, options = {})
     ).attr("fill", color);
   }
   if (showTitle) {
-    svg.append("text").attr("x", width / 2).attr("y", TITLE_Y2).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE2).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_Y2).attr("text-anchor", header.titleAnchor).attr("font-size", TITLE_FONT_SIZE2).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
@@ -43347,6 +44209,7 @@ var init_renderer10 = __esm({
     init_markdown_card();
     init_legend_layout();
     init_legend_integration();
+    init_inline_header();
     init_tag_groups();
     init_text_measure();
     init_visual_conventions();
@@ -43624,6 +44487,32 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   );
   const needsLegend = (legendGroups.length > 0 || hasAnyDescriptions && !!onToggleDescriptions) && !noLegend;
   const legendH = needsLegend ? sLegendHeight + 8 : 0;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && needsLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      showInactivePills: true
+    },
+    { activeGroup },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: needsLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleOffset,
+    legendReserve: legendH,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
   let labelZoneExtension = 0;
   for (const group of parsed.groups) {
@@ -43632,19 +44521,20 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     }
   }
   const contentW = layout.width;
-  const contentH = layout.height + titleOffset + legendH + labelZoneExtension;
+  const vOverhead = titleOffset + (header.inline ? 0 : legendH) + labelZoneExtension;
+  const availH = Math.max(1, height - vOverhead - sDiagramPadding * 2);
   const scaleX = width / (contentW + sDiagramPadding * 2);
-  const scaleY = height / (contentH + sDiagramPadding * 2);
+  const scaleY = availH / layout.height;
   const scale = Math.min(scaleX, scaleY, 3);
   const offsetX = (width - contentW * scale) / 2;
-  const offsetY = sDiagramPadding + titleOffset + legendH;
+  const offsetY = sDiagramPadding + titleOffset + (header.inline ? 0 : legendH);
   const svg = d3Selection14.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).style("background", palette.bg);
   if (sctx.isBelowFloor) {
     svg.attr("width", "100%");
   }
   const defs = svg.append("defs");
   if (showTitle) {
-    svg.append("text").attr("x", width / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("font-size", sTitleFontSize).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", sTitleY).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   const diagramG = svg.append("g").attr("transform", `translate(${offsetX},${offsetY}) scale(${scale})`);
   const arrowColors = /* @__PURE__ */ new Set();
@@ -44019,11 +44909,20 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         }
       }
     };
-    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,
       activeGroup,
       mode: exportMode ? "export" : "preview",
+      // 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"
+      },
       // Keep inactive sibling tag groups visible as collapsed pills so the user
       // can click one to flip the active colouring dimension (preview only).
       showInactivePills: true,
@@ -44068,6 +44967,7 @@ var init_renderer11 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
     init_parsing();
+    init_inline_header();
     init_note_box();
     init_fonts();
     init_legend_integration();
@@ -46420,9 +47320,11 @@ async function layoutBoxesAndLinesSearch(parsed, collapseInfo, opts) {
   if (!pool.length)
     return place({ ranker: "network-simplex", nodesep: 50, ranksep: 60 });
   let layered = [];
-  try {
-    layered = layeredCandidates(parsed, sizes);
-  } catch {
+  if (collapsedGroupLabels.size === 0) {
+    try {
+      layered = layeredCandidates(parsed, sizes);
+    } catch {
+    }
   }
   if (parsed.groups.length > 0 && collapsedGroupLabels.size === 0) {
     try {
@@ -47885,7 +48787,7 @@ function layoutFamily(parsed, focusId) {
     let acc = MARGIN8 + ANCESTOR_BAND;
     for (let r = 0; r <= maxRow; r++) {
       rowY.set(r, acc);
-      acc += (rowHeight.get(r) ?? 0) + ROW_GAP;
+      acc += (rowHeight.get(r) ?? 0) + ROW_GAP2;
     }
   }
   const centerX = /* @__PURE__ */ new Map();
@@ -48108,7 +49010,7 @@ function layoutFamily(parsed, focusId) {
     height
   };
 }
-var MARGIN8, MIN_CARD_W, CARD_H_PAD3, CARD_TEXT_PAD, H_GAP2, ROW_GAP, KEY_VALUE_GAP, KEY_X, GUTTER_WIDTH;
+var MARGIN8, MIN_CARD_W, CARD_H_PAD3, CARD_TEXT_PAD, H_GAP2, ROW_GAP2, KEY_VALUE_GAP, KEY_X, GUTTER_WIDTH;
 var init_layout8 = __esm({
   "src/family/layout.ts"() {
     "use strict";
@@ -48121,7 +49023,7 @@ var init_layout8 = __esm({
     CARD_H_PAD3 = 12;
     CARD_TEXT_PAD = 12;
     H_GAP2 = 60;
-    ROW_GAP = 74;
+    ROW_GAP2 = 74;
     KEY_VALUE_GAP = 6;
     KEY_X = 10;
     GUTTER_WIDTH = 72;
@@ -48184,7 +49086,33 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   const contentH = layout.height;
   const W3 = opts.fit?.width ?? opts.exportDims?.width ?? contentW + PAD3 * 2;
   const legendReserve = hasLegend ? getMaxLegendReservedHeight(legendConfig, W3) + 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 },
+    W3
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: W3,
+    titleBandHeight: titleReserve,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const chrome = titleReserve + (header.inline ? 0 : legendReserve);
   let scale = 1;
   let H2;
   if (opts.fit) {
@@ -48201,12 +49129,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", W3 / 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: W3,
@@ -48345,6 +49282,7 @@ var init_renderer13 = __esm({
   "src/family/renderer.ts"() {
     "use strict";
     init_parsing();
+    init_inline_header();
     init_fonts();
     init_title_constants();
     init_color_utils();
@@ -48373,7 +49311,7 @@ var init_renderer13 = __esm({
 });
 
 // src/mindmap/text-wrap.ts
-function tokenize(text) {
+function tokenize2(text) {
   const tokens = [];
   const parts = text.split(/(\s+)/);
   for (const part of parts) {
@@ -48419,7 +49357,7 @@ function truncateLastLine(lines, maxWidth, fontSize) {
 }
 function wrapText(text, maxWidth, baseFontSize, minFontSize, maxLines = MAX_LABEL_LINES3) {
   if (!text) return { lines: [""], fontSize: baseFontSize };
-  const tokens = tokenize(text);
+  const tokens = tokenize2(text);
   for (let fs = baseFontSize; fs >= minFontSize; fs--) {
     const lines = tryWrap(tokens, maxWidth, fs, maxLines);
     if (lines) {
@@ -49008,8 +49946,33 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
   const fixedTitle = !isExport && showTitle;
   const titleReserve = fixedTitle ? TITLE_HEIGHT4 : 0;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && fixedLegend ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: isExport ? "export" : "preview"
+    },
+    { activeGroup: activeTagGroup ?? null },
+    containerWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: fixedLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth,
+    titleBandHeight: titleReserve,
+    legendReserve,
+    titleBaselineY: DIAGRAM_PADDING8 + TITLE_FONT_SIZE,
+    titleFontSize: TITLE_FONT_SIZE
+  });
   const availWidth = containerWidth;
-  const availHeight = containerHeight - DIAGRAM_PADDING8 * 2 - legendReserve - titleReserve;
+  const availHeight = containerHeight - DIAGRAM_PADDING8 * 2 - (header.inline ? 0 : legendReserve) - titleReserve;
   let ctx = isExport ? ScaleContext.identity() : ScaleContext.fromBox(
     availWidth,
     layout.width,
@@ -49050,7 +50013,7 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const scaledWidth = renderLayout.width * fitScale;
   const scaledHeight = renderLayout.height * fitScale;
   const offsetX = Math.max(0, (availWidth - scaledWidth) / 2);
-  const offsetY = DIAGRAM_PADDING8 + legendReserve + titleReserve + Math.max(0, (availHeight - scaledHeight) / 2);
+  const offsetY = DIAGRAM_PADDING8 + (header.inline ? 0 : legendReserve) + titleReserve + Math.max(0, (availHeight - scaledHeight) / 2);
   const mainG = svg.append("g").attr(
     "transform",
     `translate(${offsetX}, ${offsetY})${fitScale < 1 ? ` scale(${fitScale})` : ""}`
@@ -49060,9 +50023,9 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   }
   if (showTitle) {
     const titleParent = fixedTitle ? svg : mainG;
-    const titleX = fixedTitle ? containerWidth / 2 : renderLayout.width / 2;
+    const titleX = fixedTitle ? header.titleX : renderLayout.width / 2;
     const titleY = fixedTitle ? DIAGRAM_PADDING8 + TITLE_FONT_SIZE : TITLE_FONT_SIZE;
-    const titleText = titleParent.append("text").attr("x", titleX).attr("y", titleY).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("class", "chart-title").text(parsed.title);
+    const titleText = titleParent.append("text").attr("x", titleX).attr("y", titleY).attr("text-anchor", fixedTitle ? header.titleAnchor : "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("class", "chart-title").text(parsed.title);
     if (parsed.titleLineNumber) {
       titleText.attr("data-line-number", parsed.titleLineNumber);
     }
@@ -49071,7 +50034,10 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
     }
   }
   if (fixedLegend) {
-    const legendG = svg.append("g").attr("class", "mindmap-legend-fixed").attr("transform", `translate(0, ${DIAGRAM_PADDING8 + titleReserve})`);
+    const legendG = svg.append("g").attr("class", "mindmap-legend-fixed").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${DIAGRAM_PADDING8 + titleReserve})`
+    );
     const usedValues = /* @__PURE__ */ new Map();
     for (const node of renderLayout.nodes) {
       for (const tg of parsed.tagGroups) {
@@ -49112,7 +50078,10 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
           entries: tg.entries.filter((e) => used?.has(e.value.toLowerCase())).map((e) => ({ value: e.value, color: e.color }))
         };
       }),
-      position: { placement: "top-center", titleRelation: "below-title" },
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       mode: options?.exportMode ? "export" : "preview",
       ...controlsToggles !== void 0 && { controlsGroup: controlsToggles },
       ...options?.controlsHost !== void 0 && {
@@ -49305,6 +50274,7 @@ var init_renderer14 = __esm({
     init_legend_integration();
     init_legend_constants();
     init_legend_layout();
+    init_inline_header();
     init_title_constants();
     init_scaling();
     init_visual_conventions();
@@ -56490,10 +57460,10 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
   }
   return groups;
 }
-function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false, controlsHost) {
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false, controlsHost, legendX = 0, inlineHeader = false) {
   if (legendGroups.length === 0 && !playback) return;
   const appHostedPlayback = controlsHost === "app" && !!playback;
-  const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
+  const legendG = rootSvg.append("g").attr("transform", `translate(${legendX}, ${legendY})`);
   if (activeGroup) {
     legendG.attr("data-legend-active", tagAttrKey(activeGroup));
   }
@@ -56509,6 +57479,12 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
     activeGroup,
     mode: exportMode ? "export" : "preview",
     showEmptyGroups: true,
+    ...inlineHeader && {
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      }
+    },
     ...appHostedPlayback && {
       controlsHost: "app",
       controlsGroup: {
@@ -56592,7 +57568,39 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
   const legendOffset = hasLegend && !fixedLegend ? legendDynamicH : 0;
   const titleOffset = title ? TITLE_OFFSET : 0;
   const totalWidth = layout.width;
-  const totalHeight = layout.height + titleOffset + legendOffset;
+  const inlineRequested = legendInlineRequested(layout.options) && !fixedLegend;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups.map((g) => ({
+        name: g.name,
+        entries: g.entries.map((e) => ({
+          value: e.value,
+          color: e.color
+        }))
+      })),
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      showEmptyGroups: true
+    },
+    { activeGroup: activeGroup ?? null },
+    totalWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: totalWidth,
+    titleBandHeight: titleOffset,
+    legendReserve: legendOffset,
+    titleBaselineY: sc.sTitleY,
+    titleFontSize: sc.sTitleFontSize
+  });
+  const totalHeight = layout.height + titleOffset + (header.inline ? 0 : legendOffset);
   const shouldAnimate = animate !== false;
   const fixedTitleH = fixedLegend && title ? TITLE_OFFSET : 0;
   const diagramViewHeight = fixedLegend ? layout.height + (title && !fixedTitleH ? titleOffset : 0) + legendOffset : totalHeight;
@@ -56652,9 +57660,12 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
     `);
   }
   const contentTitleOffset = fixedTitleH ? 0 : titleOffset;
-  const svg = rootSvg.append("g").attr("transform", `translate(0, ${contentTitleOffset + legendOffset})`);
+  const svg = rootSvg.append("g").attr(
+    "transform",
+    `translate(0, ${contentTitleOffset + (header.inline ? 0 : legendOffset)})`
+  );
   if (title && !fixedTitleH) {
-    rootSvg.append("text").attr("class", "chart-title").attr("x", totalWidth / 2).attr("y", sc.sTitleY).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", sc.sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
+    rootSvg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sc.sTitleY).attr("text-anchor", header.titleAnchor).attr("font-family", FONT_FAMILY).attr("font-size", sc.sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("data-line-number", titleLineNumber != null ? titleLineNumber : "").text(title);
   }
   renderGroups(svg, layout.groups, palette, isDark, sc);
   const speedMultiplier = playback?.speed ?? 1;
@@ -56731,13 +57742,15 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         rootSvg,
         legendGroups,
         totalWidth,
-        titleOffset,
+        header.inline ? header.legendY : titleOffset,
         palette,
         isDark,
         activeGroup ?? null,
         playback ?? void 0,
         exportMode,
-        controlsHost
+        controlsHost,
+        header.inline ? header.legendX : 0,
+        header.inline
       );
     }
   }
@@ -56767,6 +57780,7 @@ var init_renderer17 = __esm({
     init_legend_constants();
     init_legend_integration();
     init_legend_layout();
+    init_inline_header();
     init_title_constants();
     init_scaling();
     init_parsing();
@@ -58643,25 +59657,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 = d3Selection22.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
       }
@@ -59731,7 +60774,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 }))
@@ -59743,7 +60786,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) {
@@ -60186,6 +61235,8 @@ var init_renderer18 = __esm({
     init_legend_constants();
     init_tag_groups();
     init_legend_integration();
+    init_legend_layout();
+    init_inline_header();
     init_parser12();
     init_analyzer();
     init_layout14();
@@ -61223,7 +62274,7 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const idealWidth = leftMargin + totalRows * 20 + RIGHT_MARGIN + 200;
   const ctx = exportDims ? ScaleContext.identity() : ScaleContext.from(containerWidth, idealWidth);
   const sBarH = ctx.structural(BAR_H);
-  const sRowGap = ctx.structural(ROW_GAP2);
+  const sRowGap = ctx.structural(ROW_GAP3);
   const sGroupGap = ctx.structural(GROUP_GAP3);
   const sMilestoneSize = ctx.structural(MILESTONE_SIZE);
   const sBottomMargin = ctx.aesthetic(BOTTOM_MARGIN);
@@ -61240,12 +62291,38 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const sSprintLabelReserve = ctx.structural(sprintLabelReserve);
   const sTitleHeight = ctx.aesthetic(titleHeight);
   const sTagLegendReserve = ctx.structural(tagLegendReserve);
+  const inlineRequested = resolved.options.legendInline === true && resolved.tagGroups.length > 0;
+  const legendExtent = inlineRequested ? getLegendExtent(
+    {
+      groups: resolved.tagGroups.map((tg) => ({
+        name: tg.name,
+        entries: tg.entries
+      })),
+      position: { placement: "top-center", titleRelation: "inline-with-title" },
+      mode: "preview",
+      capsulePillAddonWidth: LEGEND_ICON_W
+    },
+    { activeGroup: currentActiveGroup },
+    containerWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: title ?? "",
+    hasLegend: hasTagLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth,
+    titleBandHeight: sTitleHeight,
+    legendReserve: sTagLegendReserve,
+    titleBaselineY: sTitleY,
+    titleFontSize: sTitleFontSize
+  });
   const sEraReserve = ctx.structural(eraReserve);
   const sMarkerReserve = ctx.structural(markerReserve);
   const sTodayReserve = ctx.structural(todayReserve);
   const sFont10 = ctx.text(10);
   const sFont11 = ctx.text(11);
-  const sMarginTop = sTitleHeight + sTagLegendReserve + sEraReserve + sMarkerReserve + sTodayReserve + sTopDateLabelReserve + sSprintLabelReserve;
+  const sMarginTop = sTitleHeight + (header.inline ? 0 : sTagLegendReserve) + sEraReserve + sMarkerReserve + sTodayReserve + sTopDateLabelReserve + sSprintLabelReserve;
   const sTodayLabelY = sTodayReserve ? -(sTopDateLabelReserve + sHeaderRowH / 2) : 0;
   const sMarkerLabelY = sMarkerReserve ? -(sTopDateLabelReserve + sTodayReserve + sHeaderRowH / 2) : 0;
   const sEraLabelY = sEraReserve ? -(sTopDateLabelReserve + sTodayReserve + sMarkerReserve + sHeaderRowH / 2) : 0;
@@ -61257,12 +62334,12 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
   const svg = d3Selection23.select(container).append("svg").attr("viewBox", `0 0 ${containerWidth} ${sOuterHeight}`).attr("width", exportDims ? containerWidth : "100%").attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY).style("overflow", "visible");
   const g = svg.append("g").attr("transform", `translate(${leftMargin}, ${sMarginTop})`);
   if (showTitle) {
-    svg.append("text").attr("class", "chart-title").attr("x", containerWidth / 2).attr("y", sTitleY).attr("text-anchor", "middle").attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
+    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", sTitleY).attr("text-anchor", header.titleAnchor).attr("font-size", sTitleFontSize).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(title);
   }
   function drawLegend() {
     svg.selectAll(".gantt-tag-legend-container").remove();
     if (hasTagLegend) {
-      const legendY = sTitleHeight;
+      const legendY = header.inline ? header.legendY : sTitleHeight;
       renderTagLegend(
         svg,
         g,
@@ -61311,7 +62388,8 @@ function renderGantt(container, resolved, palette, isDark, options, exportDims)
           drawLegend();
         },
         options?.exportMode ?? false,
-        controlsHost
+        controlsHost,
+        header.inline
       );
     }
   }
@@ -62130,7 +63208,7 @@ function buildControlsToggles(hasCriticalPath, criticalPathActive, hasDependenci
   }
   return toggles;
 }
-function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false, controlsHost = "inline") {
+function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargin, chartInnerWidth, legendY, palette, isDark, hasCriticalPath, criticalPathActive, _optionLineNumbers, onToggle, onToggleControlsExpand, currentSwimlaneGroup, onSwimlaneChange, legendViewMode, resolvedTasks, controlsExpanded = false, hasDependencies = false, dependenciesActive = false, onControlsToggle, exportMode = false, controlsHost = "inline", inlineHeader = false) {
   let visibleGroups;
   if (activeGroupName) {
     const activeGroup = tagGroups.filter(
@@ -62200,7 +63278,7 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
     totalW += controlsExpanded ? controlsGroupCapsuleWidth(controlsToggleLabels) : LEGEND_GEAR_PILL_W;
   }
   const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
-  const legendX = (containerWidth - totalW) / 2;
+  const legendX = inlineHeader ? containerWidth - INLINE_HEADER_PAD - totalW : (containerWidth - totalW) / 2;
   const legendRow = svg.append("g").attr("class", "gantt-tag-legend-container").attr("transform", `translate(${legendX}, ${legendY})`);
   if (visibleGroups.length > 0) {
     const showIcon = !legendViewMode && tagGroups.length > 0;
@@ -62308,6 +63386,12 @@ function renderTagLegend(svg, chartG, tagGroups, activeGroupName, chartLeftMargi
       width: tagGroupsW,
       mode: exportMode ? "export" : "preview",
       capsulePillAddonWidth: iconReserve,
+      ...inlineHeader && {
+        position: {
+          placement: "top-center",
+          titleRelation: "inline-with-title"
+        }
+      },
       ...controlsToggles.length > 0 && {
         controlsGroup: { toggles: controlsToggles }
       },
@@ -63109,7 +64193,7 @@ function renderTimeScaleHorizontal(g, scale, _innerWidth, innerHeight, textColor
     g.append("text").attr("class", "gantt-scale-tick").attr("x", tick.pos).attr("y", innerHeight + tickLen + 12).attr("text-anchor", "middle").attr("font-size", "10px").attr("fill", textColor).attr("opacity", opacity).text(tick.label);
   }
 }
-var BAR_H, ROW_GAP2, GROUP_GAP3, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, LABEL_PAD2, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY;
+var BAR_H, ROW_GAP3, GROUP_GAP3, MILESTONE_SIZE, MIN_LEFT_MARGIN, BOTTOM_MARGIN, RIGHT_MARGIN, LABEL_PAD2, LABEL_GAP, BAND_ACCENT_W, BAND_RADIUS, bandClipCounter, JS_DAY_TO_WEEKDAY2, ERA_COLORS, SPRINT_BAND_OPACITY, SPRINT_HOVER_OPACITY, SPRINT_BOUNDARY_OPACITY, FADE_OPACITY;
 var init_renderer19 = __esm({
   "src/gantt/renderer.ts"() {
     "use strict";
@@ -63125,9 +64209,10 @@ var init_renderer19 = __esm({
     init_legend_constants();
     init_legend_integration();
     init_legend_layout();
+    init_inline_header();
     init_title_constants();
     BAR_H = 22;
-    ROW_GAP2 = 6;
+    ROW_GAP3 = 6;
     GROUP_GAP3 = 14;
     MILESTONE_SIZE = 10;
     MIN_LEFT_MARGIN = 120;
@@ -63221,6 +64306,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({
@@ -63229,9 +64340,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_SCALE7,
     exportMode: !!exportDims
   });
@@ -63249,7 +64359,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);
@@ -63265,7 +64375,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,
@@ -63273,6 +64386,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
@@ -63531,6 +64650,7 @@ var init_state_renderer = __esm({
   "src/graph/state-renderer.ts"() {
     "use strict";
     init_parsing();
+    init_inline_header();
     init_arrow_markers();
     init_fit_canvas();
     init_fonts();
@@ -70958,8 +72078,8 @@ function layoutMap(resolvedIn, data, size, opts) {
       if (near) near.push(p);
       else groups2.push([p]);
     }
-    const ROW_GAP3 = 3;
-    const step = poiLabH + ROW_GAP3;
+    const ROW_GAP4 = 3;
+    const step = poiLabH + ROW_GAP4;
     const COL_GAP2 = 16;
     const makeItems = (group) => group.map((p) => ({ p, ...labelInfo(p) })).sort((a, b) => a.p.cy - b.p.cy || (a.text < b.text ? -1 : 1));
     const columnRows = (items, side) => {
@@ -73876,9 +74996,36 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
     { groups: legend.groups, position: LEGEND_POSITION2, mode: "preview" },
     width
   ) + LEGEND_GROUP_GAP : 0;
+  const inlineRequested = parsed.options.legendInline === true;
+  const legendExtent = inlineRequested && legend ? getLegendExtent(
+    {
+      groups: legend.groups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview",
+      showInactivePills: !exportMode,
+      showEmptyGroups: !exportMode
+    },
+    { activeGroup: legend.activeGroup },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: !!legend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
   const headerH = opts.noHeaders ? 0 : HEADER_H;
   const areaX = PADDING4;
-  const areaY = titleH + legendReserve + PADDING4;
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING4;
   const areaW = Math.max(1, width - PADDING4 * 2);
   const areaH = Math.max(1, height - areaY - PADDING4);
   const layout = layoutTreemap(parsed.roots, {
@@ -73893,7 +75040,7 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
   );
   svg.append("rect").attr("width", width).attr("height", height).attr("fill", palette.bg);
   if (showTitle) {
-    const title = 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 title = 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) {
       title.attr("data-line-number", parsed.titleLineNumber);
     }
@@ -74023,7 +75170,10 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
     }
   }
   if (legend) {
-    const legendG = svg.append("g").attr("class", "dgmo-treemap-legend").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr("class", "dgmo-treemap-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legend.groups,
       palette: {
@@ -74036,7 +75186,12 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       isDark,
       width,
       mode: exportMode ? "export" : "preview",
-      position: LEGEND_POSITION2,
+      // 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"
+      },
       activeGroup: legend.activeGroup,
       // The color-mode switcher is the legend itself: each applicable mode is a
       // group pill; the active one is the open capsule, the rest are clickable
@@ -74104,6 +75259,7 @@ var init_renderer26 = __esm({
     init_text_measure();
     init_legend_integration();
     init_legend_layout();
+    init_inline_header();
     init_legend_constants();
     init_title_constants();
     init_layout19();
@@ -74289,7 +75445,32 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
     { groups: legend.groups, position: LEGEND_POSITION3, mode: "preview" },
     width
   ) + LEGEND_GROUP_GAP : 0;
-  const areaY = titleH + legendReserve + PADDING5;
+  const inlineRequested = opts.legendInline === true;
+  const legendExtent = inlineRequested && legend ? getLegendExtent(
+    {
+      groups: legend.groups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: options.exportMode ? "export" : "preview"
+    },
+    { activeGroup: legend.activeGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend: !!legend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING5;
   if (options.exportMode) {
     height = areaY + layout.height + PADDING5;
   } else {
@@ -74304,7 +75485,7 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
   const offsetY = areaY;
   const svg = d3Selection33.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-block").style("font-family", FONT_FAMILY);
   if (showTitle) {
-    const title = 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 title = 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) {
       title.attr("data-line-number", parsed.titleLineNumber);
     }
@@ -74323,7 +75504,10 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
     onToggle: options.onToggle
   });
   if (legend) {
-    const legendG = svg.append("g").attr("class", "dgmo-block-legend").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr("class", "dgmo-block-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     renderIntegratedLegend(legendG, {
       groups: legend.groups,
       palette: {
@@ -74336,7 +75520,10 @@ function renderBlock(container, parsed, palette, isDark, exportDims, options = {
       isDark,
       width,
       mode: options.exportMode ? "export" : "preview",
-      position: LEGEND_POSITION3,
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       activeGroup: legend.activeGroup
     });
   }
@@ -74454,6 +75641,7 @@ var init_renderer27 = __esm({
     init_fonts();
     init_color_utils();
     init_tag_groups();
+    init_inline_header();
     init_legend_integration();
     init_legend_layout();
     init_legend_constants();
@@ -76116,12 +77304,12 @@ function drawRow(svg, entry, index, parsed, now, rowTop, rowH, geom, col) {
     const baseY = center + 16;
     const capTop = baseY - mainFont * 0.7;
     const sf = 20;
-    const mainW = [...ts.main].reduce(
-      (w, c) => w + mainFont * (c === ":" ? 0.334 : 0.6),
-      0
-    );
-    const stackX = contentLeft + mainW + 5;
-    g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", contentLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
+    const gap = 5;
+    const { cells, width: mainW } = fixedTimeCells(ts.main, contentLeft, mainFont);
+    const stackX = contentLeft + mainW + gap;
+    const mainText = g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("y", baseY).attr("text-anchor", "middle").attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", mainFont).attr("font-weight", 600).attr("data-dgmo-clock-x0", contentLeft).attr("data-dgmo-clock-fs", mainFont).attr("data-dgmo-clock-gap", gap);
+    for (const c of cells)
+      mainText.append("tspan").attr("x", c.x).text(c.ch);
     g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", capTop + sf * 0.72).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).style("font-variant-numeric", "tabular-nums").text(`:${ts.sec}`);
     if (ts.ap)
       g.append("text").attr("data-dgmo-clock-digital-part", "ap").attr("x", stackX).attr("y", baseY).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 600).text(ts.ap);
@@ -76280,14 +77468,13 @@ function drawColumns(body, parsed, now, top, geom, col) {
       const gap = 11;
       const cap = 0.7;
       const tf = fitFont(ts.main, 54, innerW - 30 - gap, 20);
-      const mainW = [...ts.main].reduce(
-        (w, c) => w + tf * (c === ":" ? 0.334 : 0.6),
-        0
-      );
+      const mainW = fixedTimeCells(ts.main, 0, tf).width;
       const stackW = Math.max(estWidth(`:${ts.sec}`, sf), estWidth(ts.ap, sf));
       const gLeft = cx - (mainW + gap + stackW) / 2;
       const baseY = cy + tf * 0.34;
-      g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("x", gLeft).attr("y", baseY).attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).attr("textLength", mainW).attr("lengthAdjust", "spacing").style("font-variant-numeric", "tabular-nums").text(ts.main);
+      const mainText = g.append("text").attr("data-dgmo-clock-digital", "").attr("data-dgmo-clock-digital-part", "main").attr("y", baseY).attr("text-anchor", "middle").attr("fill", timeColor).attr("font-family", FONT_FAMILY).attr("font-size", tf).attr("font-weight", 600).attr("data-dgmo-clock-x0", gLeft).attr("data-dgmo-clock-fs", tf).attr("data-dgmo-clock-gap", gap);
+      for (const c of fixedTimeCells(ts.main, gLeft, tf).cells)
+        mainText.append("tspan").attr("x", c.x).text(c.ch);
       const stackX = gLeft + mainW + gap;
       g.append("text").attr("data-dgmo-clock-digital-part", "sec").attr("x", stackX).attr("y", baseY - tf * cap + sf * cap).attr("fill", muted).attr("font-family", FONT_FAMILY).attr("font-size", sf).attr("font-weight", 500).text(`:${ts.sec}`);
       if (ts.ap)
@@ -77057,16 +78244,41 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
     { groups: legendGroups, position: LEGEND_POSITION4, 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 = d3Selection37.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 + PADDING6;
+  const areaY = (header.inline ? titleH : titleH + legendReserve) + PADDING6;
   const areaX = PADDING6;
   const areaW = Math.max(1, width - PADDING6 * 2);
   const areaH = Math.max(1, height - areaY - PADDING6);
@@ -77075,7 +78287,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: {
@@ -77088,7 +78303,10 @@ function renderBracket(container, parsed, palette, isDark, exportDims) {
       isDark,
       width,
       mode: exportMode ? "export" : "preview",
-      position: LEGEND_POSITION4,
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       activeGroup: activeGroup?.name ?? null
     });
   }
@@ -77315,6 +78533,7 @@ var init_renderer31 = __esm({
     init_tag_groups();
     init_legend_integration();
     init_legend_layout();
+    init_inline_header();
     init_legend_constants();
     init_layout21();
     PADDING6 = 16;
@@ -78587,7 +79806,6 @@ function applyPositionOverrides(participants) {
   return result;
 }
 function applyGroupOrdering(participants, groups, messages = []) {
-  if (groups.length === 0) return [...participants];
   const idToGroup = /* @__PURE__ */ new Map();
   for (const group of groups) {
     for (const id of group.participantIds) {
@@ -79055,8 +80273,33 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   };
   const noLegend = legendSuppressed(parsedOptions);
   const legendTopSpace = parsed.tagGroups.length > 0 && !noLegend ? getMaxLegendReservedHeight(legendConfig, containerWidth) + LEGEND_FIXED_GAP4 : 0;
+  const inlineRequested = legendInlineRequested(parsedOptions);
+  const hasLegendForHeader = parsed.tagGroups.length > 0 && !noLegend;
+  const legendExtent = inlineRequested && hasLegendForHeader ? getLegendExtent(
+    {
+      ...legendConfig,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      }
+    },
+    { activeGroup: activeTagGroup ?? null },
+    containerWidth
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: title ?? "",
+    hasLegend: hasLegendForHeader,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth,
+    titleBandHeight: titleOffset,
+    legendReserve: legendTopSpace,
+    titleBaselineY: ctx.structural(TITLE_Y),
+    titleFontSize: ctx.text(TITLE_FONT_SIZE)
+  });
   const groupOffset = parsed.groups.length > 0 ? GROUP_PADDING_TOP2 + GROUP_LABEL_SIZE : 0;
-  const participantStartY = sTopMargin + titleOffset + legendTopSpace + sParticipantYOffset + groupOffset;
+  const participantStartY = sTopMargin + titleOffset + (header.inline ? 0 : legendTopSpace) + sParticipantYOffset + groupOffset;
   const lifelineStartY0 = participantStartY + sBoxH;
   const hasActors = participants.some((p) => p.type === "actor");
   const messageStartOffset = sMsgStartOffset + (hasActors ? 20 : 0) + (parsed.groups.length > 0 ? GROUP_PADDING_BOTTOM2 : 0);
@@ -79221,56 +80464,63 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     });
   };
   buildParticipantX();
-  let contentLeft = 0;
-  let contentRight = svgWidth;
-  for (const step of renderSteps) {
-    if (!step.label) continue;
-    const labelW = measureText(step.label, 12);
-    if (step.from === step.to) {
-      const px = participantX.get(step.from);
-      if (px !== void 0) {
-        const loopRight = px + sActivationWidth / 2 + sSelfCallWidth + 5 + labelW;
-        contentRight = Math.max(contentRight, loopRight);
-      }
-    } else {
-      const fromX = participantX.get(step.from);
-      const toX = participantX.get(step.to);
-      if (fromX !== void 0 && toX !== void 0) {
-        const midX = (fromX + toX) / 2;
-        contentLeft = Math.min(contentLeft, midX - labelW / 2);
-        contentRight = Math.max(contentRight, midX + labelW / 2);
+  const labelSafety = sActivationWidth / 2 + 2;
+  const scanNotes = (els, acc) => {
+    for (const el of els) {
+      if (isSequenceNote(el)) {
+        const note = el;
+        const pos = effectiveNotePosition(note);
+        if (pos === "right") {
+          const px = participantX.get(note.participantId);
+          if (px !== void 0) {
+            const sc = isNoteAfterSelfCall(note);
+            const rOff = sc ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
+            const maxW = noteEffectiveMaxW(note.participantId, pos, sc);
+            acc.right = Math.max(acc.right, px + rOff + maxW);
+          }
+        }
+      } else if (isSequenceBlock(el)) {
+        scanNotes(el.children, acc);
+        scanNotes(el.elseChildren, acc);
+        if (el.elseIfBranches) {
+          for (const b of el.elseIfBranches) scanNotes(b.children, acc);
+        }
       }
     }
-  }
-  if (elements) {
-    const scanNotes = (els) => {
-      for (const el of els) {
-        if (isSequenceNote(el)) {
-          const note = el;
-          const pos = effectiveNotePosition(note);
-          if (pos === "right") {
-            const px = participantX.get(note.participantId);
-            if (px !== void 0) {
-              const sc = isNoteAfterSelfCall(note);
-              const rOff = sc ? sActivationWidth / 2 + sSelfCallWidth + sNoteGap : sActivationWidth + sNoteGap;
-              const maxW = noteEffectiveMaxW(note.participantId, pos, sc);
-              contentRight = Math.max(contentRight, px + rOff + maxW);
-            }
-          }
-        } else if (isSequenceBlock(el)) {
-          scanNotes(el.children);
-          scanNotes(el.elseChildren);
-          if (el.elseIfBranches) {
-            for (const b of el.elseIfBranches) scanNotes(b.children);
-          }
+  };
+  for (let pass = 0; pass < 4; pass++) {
+    let contentLeft = 0;
+    let contentRight = svgWidth;
+    for (const step of renderSteps) {
+      if (!step.label) continue;
+      const labelW = measureText(step.label, 12);
+      if (step.from === step.to) {
+        const px = participantX.get(step.from);
+        if (px !== void 0) {
+          const loopRight = px + sActivationWidth / 2 + sSelfCallWidth + 5 + labelW + labelSafety;
+          contentRight = Math.max(contentRight, loopRight);
+        }
+      } else {
+        const fromX = participantX.get(step.from);
+        const toX = participantX.get(step.to);
+        if (fromX !== void 0 && toX !== void 0) {
+          const midX = (fromX + toX) / 2;
+          contentLeft = Math.min(contentLeft, midX - labelW / 2 - labelSafety);
+          contentRight = Math.max(
+            contentRight,
+            midX + labelW / 2 + labelSafety
+          );
         }
       }
-    };
-    scanNotes(elements);
-  }
-  const neededLeftPad = Math.max(0, -contentLeft);
-  const neededRightPad = Math.max(0, contentRight - svgWidth);
-  if (neededLeftPad > 0 || neededRightPad > 0) {
+    }
+    if (elements) {
+      const acc = { right: contentRight };
+      scanNotes(elements, acc);
+      contentRight = acc.right;
+    }
+    const neededLeftPad = Math.max(0, -contentLeft);
+    const neededRightPad = Math.max(0, contentRight - svgWidth);
+    if (neededLeftPad <= 0.5 && neededRightPad <= 0.5) break;
     leftMargin += neededLeftPad;
     rightMargin += neededRightPad;
     totalWidth = Math.max(leftMargin + diagramWidth + rightMargin, sBoxW + 40);
@@ -79321,7 +80571,7 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     }
   };
   if (showTitle) {
-    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", svgWidth / 2).attr("y", ctx.structural(TITLE_Y)).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-size", ctx.text(TITLE_FONT_SIZE)).attr("font-weight", TITLE_FONT_WEIGHT).text(title);
+    const titleEl = svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : svgWidth / 2).attr("y", ctx.structural(TITLE_Y)).attr("text-anchor", header.inline ? header.titleAnchor : "middle").attr("fill", palette.text).attr("font-size", ctx.text(TITLE_FONT_SIZE)).attr("font-weight", TITLE_FONT_WEIGHT).text(title);
     if (parsed.titleLineNumber) {
       titleEl.attr("data-line-number", parsed.titleLineNumber);
     }
@@ -79807,9 +81057,19 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
   if (hasTagGroups) {
     const legendY = sTopMargin + titleOffset;
     const legendCallbacks = {};
-    const legendG = svg.append("g").attr("class", "sequence-legend").attr("transform", `translate(0,${legendY})`);
+    const legendG = svg.append("g").attr("class", "sequence-legend").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0,${legendY})`
+    );
     renderIntegratedLegend(legendG, {
       ...legendConfig,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the header's right edge; stacked → centered below the title
+      // (identical to legendConfig.position, so the stacked path is unchanged).
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width: svgWidth,
@@ -79917,6 +81177,7 @@ var init_renderer33 = __esm({
     init_tag_groups();
     init_legend_layout();
     init_parsing();
+    init_inline_header();
     init_legend_integration();
     init_title_constants();
     init_scaling();
@@ -82296,7 +83557,8 @@ async function exportEventLine(ctx) {
     effectivePalette,
     ctx.isDark,
     { width: EXPORT_WIDTH, height: EXPORT_HEIGHT },
-    ctxTagOverride(ctx)
+    ctxTagOverride(ctx),
+    /* @__PURE__ */ new Date()
   );
   return finalizeSvgExport(container, theme, effectivePalette);
 }
@@ -83859,6 +85121,8 @@ function injectHoverStyles(svg, chartType, opts) {
 
 // src/render.ts
 init_dgmo_router();
+init_diagnostics();
+init_inline_header();
 init_registry();
 var DOM_GLOBALS = [
   "document",
@@ -83938,6 +85202,18 @@ async function render(content, options) {
   const renderContent = acOverride?.content ?? content;
   const chartType = acOverride?.type ?? parsed.chartType;
   const category = acOverride ? "data-chart" : chartType ? getRenderCategory(chartType) : null;
+  const legendInlineWarning = (() => {
+    if (!chartType || legendInlineSupported(chartType)) return null;
+    const idx = renderContent.split("\n").findIndex((l) => l.trim().toLowerCase() === "legend-inline");
+    if (idx < 0) return null;
+    return makeDgmoError(
+      idx + 1,
+      `'legend-inline' isn't supported for ${chartType} charts \u2014 the title and legend render stacked.`,
+      "warning",
+      "W_LEGEND_INLINE_UNSUPPORTED"
+    );
+  })();
+  const withLegendInlineWarning = (ds) => legendInlineWarning ? [...ds, legendInlineWarning] : ds;
   const viewState = options?.viewState ?? (options?.legendState ? {
     ...options.legendState.activeGroup !== void 0 && {
       tag: options.legendState.activeGroup
@@ -83951,7 +85227,7 @@ async function render(content, options) {
     try {
       const raw = await renderDataChartD3(renderContent, theme, paletteColors);
       const svg2 = injectHoverStyles(raw, chartType, { bakeHover });
-      return { svg: svg2, diagnostics, chartType: chartType ?? void 0 };
+      return { svg: svg2, diagnostics: withLegendInlineWarning(diagnostics), chartType: chartType ?? void 0 };
     } finally {
       releaseDom();
     }
@@ -83985,7 +85261,7 @@ async function render(content, options) {
   if (chartType === "map" && mapDiag.current) {
     diagnostics = [...mapDiag.current];
   }
-  return { svg, diagnostics, chartType: chartType ?? void 0 };
+  return { svg, diagnostics: withLegendInlineWarning(diagnostics), chartType: chartType ?? void 0 };
 }
 
 // src/countdown/ticker.ts
@@ -84215,6 +85491,27 @@ function setPart(group, sel, textContent) {
   const el = group.querySelector(sel);
   if (el && el.textContent !== textContent) el.textContent = textContent;
 }
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+function setDigits(group, main) {
+  const el = group.querySelector('[data-dgmo-clock-digital-part="main"]');
+  if (!el || el.textContent === main) return;
+  const x0 = parseFloat(el.getAttribute("data-dgmo-clock-x0") ?? "0");
+  const fs = parseFloat(el.getAttribute("data-dgmo-clock-fs") ?? "0");
+  const gap = parseFloat(el.getAttribute("data-dgmo-clock-gap") ?? "0");
+  const { cells, width } = fixedTimeCells(main, x0, fs);
+  while (el.firstChild) el.removeChild(el.firstChild);
+  for (const c of cells) {
+    const t = document.createElementNS(SVG_NS2, "tspan");
+    t.setAttribute("x", String(c.x));
+    t.textContent = c.ch;
+    el.appendChild(t);
+  }
+  const stackX = String(x0 + width + gap);
+  for (const part of ["sec", "ap"]) {
+    const s = group.querySelector(`[data-dgmo-clock-digital-part="${part}"]`);
+    if (s) s.setAttribute("x", stackX);
+  }
+}
 function updateRow(group, now) {
   const zone = group.getAttribute("data-dgmo-clock-zone");
   if (!zone) return;
@@ -84254,7 +85551,7 @@ function updateRow(group, now) {
     const secondHand = group.querySelector('[data-dgmo-clock-hand="s"]');
     if (secondHand) secondHand.setAttribute("stroke", handColor);
   }
-  setPart(group, '[data-dgmo-clock-digital-part="main"]', ts.main);
+  setDigits(group, ts.main);
   setPart(group, '[data-dgmo-clock-digital-part="sec"]', `:${ts.sec}`);
   setPart(group, '[data-dgmo-clock-digital-part="ap"]', ts.ap);
   setPart(group, "[data-dgmo-clock-ampm]", ts.ap.toUpperCase());
@@ -85405,7 +86702,7 @@ var CSS = AUTO_BASE_CSS + "\n" + BLOCK_CSS + "\n" + darkScopedBlockCss(BLOCK_CSS
 
 // src/auto/shared.ts
 init_safe_href();
-var VERSION = "0.54.0";
+var VERSION = "0.55.0";
 var ARIA_LABEL_MAX = 200;
 var COPIED_INTERACTION_MS = 1500;
 var LOG_PREFIX = "[dgmo]";