@diagrammo/dgmo 0.39.0 → 0.41.0

package/dist/advanced.js

@@ -103,7 +103,7 @@ function vennAliasKeywordRemovedMessage(args) {
   return `Venn 'alias' keyword was removed. Use 'as' instead \u2014 '${args.name} as ${args.alias}'.`;
 }
 function pipeOperatorRemovedMessage() {
-  return `'|' removed \u2014 'Node | c: red' \u2192 'Node c: red'`;
+  return `'|' is no longer metadata syntax \u2014 write metadata inline as 'key: value' (e.g. "Name color: red"), or remove the '|'.`;
 }
 function ganttBarePercentRemovedMessage(percent) {
   return `Bare-percent progress shorthand '| ${percent}' was removed. Use 'progress: ${percent.replace(/%$/, "")}' (integer 0\u2013100, no '%').`;
@@ -13678,7 +13678,8 @@ function buildScatterOption(parsed, palette, isDark, textColor, axisLineColor, g
             solid: parsed.solidFill === true
           }),
           borderColor: catColor,
-          borderWidth: CHART_BORDER_WIDTH
+          borderWidth: CHART_BORDER_WIDTH,
+          opacity: SCATTER_FILL_OPACITY
         },
         label: labelConfig,
         emphasis: emphasisConfig,
@@ -13705,6 +13706,7 @@ function buildScatterOption(parsed, palette, isDark, textColor, axisLineColor, g
       {
         type: "scatter",
         data,
+        itemStyle: { opacity: SCATTER_FILL_OPACITY },
         label: labelConfig,
         emphasis: emphasisConfig,
         blur: blurConfig
@@ -15010,7 +15012,7 @@ async function renderExtendedChartForExport(content, theme, palette) {
     chart.dispose();
   }
 }
-var EMPHASIS_SELF, EMPHASIS_SERIES, BLUR_DIM, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, EXTENDED_CHART_DOORS, FIT_PADDING, OFFSCREEN, fitStackedLabelToSegment, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
+var EMPHASIS_SELF, EMPHASIS_SERIES, BLUR_DIM, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, SCATTER_FILL_OPACITY, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, EXTENDED_CHART_DOORS, FIT_PADDING, OFFSCREEN, fitStackedLabelToSegment, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -15064,6 +15066,7 @@ var init_echarts = __esm({
       tooltip: { show: false }
     };
     CHART_BORDER_WIDTH = 2;
+    SCATTER_FILL_OPACITY = 0.65;
     VALID_EXTENDED_TYPES = /* @__PURE__ */ new Set([
       "sankey",
       "chord",
@@ -15161,6 +15164,8 @@ function parseEventLine(content, palette) {
   let currentTagGroup = null;
   let currentEvent = null;
   let currentEra = null;
+  let eraIndent = -1;
+  let currentEventIndent = 0;
   const aliasMap = /* @__PURE__ */ new Map();
   for (let i = 0; i < lines.length; i++) {
     const line11 = lines[i];
@@ -15235,52 +15240,15 @@ function parseEventLine(content, palette) {
       });
       continue;
     }
-    if (indent > 0) {
-      if (!currentEvent) {
-        pushWarning(
-          lineNumber,
-          `Indented description "${trimmed}" has no event above it \u2014 add an event line first. (\xA728)`
-        );
-        continue;
-      }
+    if (currentEvent && indent > currentEventIndent) {
       const descLine = trimmed.startsWith("- ") ? `\u2022 ${trimmed.substring(2)}` : trimmed;
       currentEvent.description.push(descLine);
       continue;
     }
-    currentTagGroup = null;
-    if (trimmed.toLowerCase() === "no-scale") {
-      options.scale = false;
-      continue;
-    }
-    const sideMatch = trimmed.match(SIDE_RE);
-    if (sideMatch) {
-      options.side = sideMatch[1].toLowerCase();
-      continue;
-    }
-    if (trimmed.toLowerCase() === "no-box") {
-      options.noBox = true;
-      continue;
-    }
-    if (trimmed.toLowerCase() === "no-legend") {
-      options.noLegend = true;
-      continue;
-    }
-    const dirMatch = trimmed.match(DIRECTION_RE);
-    if (dirMatch) {
-      const dir = dirMatch[1].toUpperCase();
-      if (dir !== "LR") {
-        pushWarning(
-          lineNumber,
-          `event-line is horizontal-only in v1; \`direction ${dir}\` (vertical orientation) is a fast-follow.`,
-          EVENT_LINE_DIAGNOSTIC_CODES.UNSUPPORTED
-        );
-      }
-      continue;
-    }
-    if (tryParseSharedOption(trimmed, sharedOptions)) continue;
     const eraMatch = trimmed.match(ERA_RE);
     if (eraMatch) {
       contentStarted = true;
+      currentTagGroup = null;
       currentEvent = null;
       const name = eraMatch[1].trim();
       let rest = (eraMatch[2] ?? "").trim();
@@ -15304,16 +15272,52 @@ function parseEventLine(content, palette) {
       const era = { name, color, collapsed, lineNumber };
       result.eras.push(era);
       currentEra = name;
+      eraIndent = indent;
       continue;
     }
-    if (SECTION_SEAM_RE.test(trimmed)) {
-      pushWarning(
-        lineNumber,
-        "Group events with `[Name]` era brackets (\xA728.6a), not `section`.",
-        EVENT_LINE_DIAGNOSTIC_CODES.UNSUPPORTED
-      );
-      continue;
+    if (indent === 0) {
+      currentTagGroup = null;
+      if (trimmed.toLowerCase() === "no-scale") {
+        options.scale = false;
+        continue;
+      }
+      const sideMatch = trimmed.match(SIDE_RE);
+      if (sideMatch) {
+        options.side = sideMatch[1].toLowerCase();
+        continue;
+      }
+      if (trimmed.toLowerCase() === "no-box") {
+        options.noBox = true;
+        continue;
+      }
+      if (trimmed.toLowerCase() === "no-legend") {
+        options.noLegend = true;
+        continue;
+      }
+      const dirMatch = trimmed.match(DIRECTION_RE);
+      if (dirMatch) {
+        const dir = dirMatch[1].toUpperCase();
+        if (dir !== "LR") {
+          pushWarning(
+            lineNumber,
+            `event-line is horizontal-only in v1; \`direction ${dir}\` (vertical orientation) is a fast-follow.`,
+            EVENT_LINE_DIAGNOSTIC_CODES.UNSUPPORTED
+          );
+        }
+        continue;
+      }
+      if (tryParseSharedOption(trimmed, sharedOptions)) continue;
+      if (SECTION_SEAM_RE.test(trimmed)) {
+        pushWarning(
+          lineNumber,
+          "Group events with `[Name]` era brackets (\xA728.6a), not `section`.",
+          EVENT_LINE_DIAGNOSTIC_CODES.UNSUPPORTED
+        );
+        continue;
+      }
     }
+    const inEra = currentEra !== null && indent > eraIndent;
+    if (!inEra) currentEra = null;
     contentStarted = true;
     const event = parseEventHeader(
       trimmed,
@@ -15325,6 +15329,7 @@ function parseEventLine(content, palette) {
     );
     result.events.push(event);
     currentEvent = event;
+    currentEventIndent = indent;
   }
   options.noTitle = sharedOptions["no-title"] === "on";
   finalizeAutoTagColors(result.tagGroups, palette);
@@ -15339,8 +15344,61 @@ function parseEventLine(content, palette) {
       EVENT_LINE_DIAGNOSTIC_CODES.NO_EVENTS
     );
   }
+  if (options.scale) {
+    validateEraDateOrder(result.events, result.eras, pushWarning);
+  }
   return result;
 }
+function validateEraDateOrder(events, eras, pushWarning) {
+  if (eras.length < 2) return;
+  const order = new Map(eras.map((e, i) => [e.name, i]));
+  const dated = events.filter(
+    (e) => e.dateValue !== null && e.era !== null && order.has(e.era)
+  );
+  if (dated.length === 0) return;
+  const perEra = /* @__PURE__ */ new Map();
+  for (const ev of dated) {
+    const idx = order.get(ev.era);
+    const cur = perEra.get(idx);
+    if (!cur) {
+      perEra.set(idx, { min: ev, max: ev });
+    } else {
+      if (ev.dateValue < cur.min.dateValue) cur.min = ev;
+      if (ev.dateValue > cur.max.dateValue) cur.max = ev;
+    }
+  }
+  const n = eras.length;
+  const prefixMax = new Array(n).fill(null);
+  const suffixMin = new Array(n).fill(null);
+  for (let k = 1; k < n; k++) {
+    const prev = perEra.get(k - 1)?.max ?? null;
+    const carried = prefixMax[k - 1] ?? null;
+    prefixMax[k] = prev && (!carried || prev.dateValue > carried.dateValue) ? prev : carried;
+  }
+  for (let k = n - 2; k >= 0; k--) {
+    const next = perEra.get(k + 1)?.min ?? null;
+    const carried = suffixMin[k + 1] ?? null;
+    suffixMin[k] = next && (!carried || next.dateValue < carried.dateValue) ? next : carried;
+  }
+  for (const ev of dated) {
+    const k = order.get(ev.era);
+    const ahead = suffixMin[k];
+    const behind = prefixMax[k];
+    if (ahead && ev.dateValue > ahead.dateValue) {
+      pushWarning(
+        ev.lineNumber,
+        `"${ev.label}" (${ev.date}) is in era "${ev.era}" but dated after era "${ahead.era}" begins (${ahead.date}). event-line eras run left-to-right by date \u2014 fix the date or move it to the right era, or their brackets will overlap.`,
+        EVENT_LINE_DIAGNOSTIC_CODES.ERA_DATE_ORDER
+      );
+    } else if (behind && ev.dateValue < behind.dateValue) {
+      pushWarning(
+        ev.lineNumber,
+        `"${ev.label}" (${ev.date}) is in era "${ev.era}" but dated before era "${behind.era}" ends (${behind.date}). event-line eras run left-to-right by date \u2014 fix the date or move it to the right era, or their brackets will overlap.`,
+        EVENT_LINE_DIAGNOSTIC_CODES.ERA_DATE_ORDER
+      );
+    }
+  }
+}
 function parseEventHeader(trimmed, lineNumber, era, aliasMap, diagnostics, pushWarning) {
   let date = null;
   let dateValue = null;
@@ -15407,7 +15465,8 @@ var init_parser13 = __esm({
     EVENT_LINE_DIAGNOSTIC_CODES = {
       NO_EVENTS: "E_EVENT_LINE_NO_EVENTS",
       BAD_DATE: "E_EVENT_LINE_BAD_DATE",
-      UNSUPPORTED: "E_EVENT_LINE_UNSUPPORTED"
+      UNSUPPORTED: "E_EVENT_LINE_UNSUPPORTED",
+      ERA_DATE_ORDER: "E_EVENT_LINE_ERA_DATE_ORDER"
     };
     NON_ISO_DATE_RE = /^\d{1,4}[/.]\d/;
     SIDE_RE = /^side\s+(above|below|alternate)\b/i;
@@ -26344,9 +26403,6 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   const hasExpandedEra = parsed.events.some(
     (e) => e.era && eraByName.has(e.era) && !collapsedSet.has(e.era)
   );
-  const anyCollapsed = parsed.events.some(
-    (e) => e.era && collapsedSet.has(e.era)
-  );
   const sideOpt = parsed.options.side;
   const alternate = sideOpt === "alternate";
   const eraSide = alternate ? "below" : sideOpt === "above" ? "below" : "above";
@@ -26413,7 +26469,8 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
         x: 0,
         side,
         lane: 0,
-        left: 0
+        left: 0,
+        spanHalf: 0
       };
     }
     const era = slot.era;
@@ -26426,19 +26483,19 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       palette.textOnFillLight,
       palette.textOnFillDark
     );
-    const overflow = slot.members.length > ERA_MEMBER_MAX;
-    const shown = overflow ? slot.members.slice(0, ERA_MEMBER_MAX - 1) : slot.members;
-    const memberStrs = shown.map(
+    let spanLo = null;
+    let spanHi = null;
+    for (const m of slot.members) {
+      if (m.dateValue === null) continue;
+      if (spanLo === null || m.dateValue < spanLo) spanLo = m.dateValue;
+      if (spanHi === null || m.dateValue > spanHi) spanHi = m.dateValue;
+    }
+    const repDateValue = spanLo !== null && spanHi !== null ? (spanLo + spanHi) / 2 : null;
+    const memberStrs = slot.members.map(
       (m) => `\u2022 ${m.date ? `${m.date}  ` : ""}${m.label}`
     );
-    const bulletColors = shown.map(eventColor);
+    const bulletColors = slot.members.map(eventColor);
     const lines = wrapDescription(memberStrs, charsPerLine);
-    if (overflow) {
-      lines.push({
-        text: `+${slot.members.length - (ERA_MEMBER_MAX - 1)} more`,
-        kind: "plain"
-      });
-    }
     return {
       kind: "era",
       event: null,
@@ -26446,7 +26503,7 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       members: slot.members,
       label: era.name,
       date: null,
-      dateValue: null,
+      dateValue: repDateValue,
       lineNumber: era.lineNumber,
       eraName: era.name,
       color: solid,
@@ -26458,87 +26515,189 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       x: 0,
       side,
       lane: 0,
-      left: 0
+      left: 0,
+      spanHalf: 0
     };
   });
-  const scaled = parsed.options.scale && !anyCollapsed && placed.every((p) => p.dateValue !== null);
+  const scaled = parsed.options.scale && placed.every((p) => p.dateValue !== null);
   const innerW = width - H_MARGIN * 2;
-  if (scaled) {
-    const vals = placed.map((p) => p.dateValue);
-    const lo = Math.min(...vals);
-    const hi = Math.max(...vals);
-    placed.forEach((p) => {
-      p.x = H_MARGIN + (hi > lo ? (p.dateValue - lo) / (hi - lo) * innerW : innerW / 2);
+  const MIN_DOT_GAP = 16;
+  const STRETCH_CAP = 8;
+  const COLLAPSE_W = 64;
+  const SEG_GAP = 16;
+  const segments = [];
+  let run = [];
+  const flushRun = () => {
+    if (!run.length) return;
+    const ds = run.map((e) => e.dateValue);
+    segments.push({
+      kind: "run",
+      events: run,
+      lo: Math.min(...ds),
+      hi: Math.max(...ds)
     });
-    const MIN_DOT_GAP = 16;
-    let prevX = -Infinity;
-    let prevVal = null;
-    for (const p of [...placed].sort((a, b) => a.x - b.x)) {
-      if (p.dateValue === prevVal) {
-        p.x = prevX;
-        continue;
+    run = [];
+  };
+  for (const p of placed) {
+    if (p.kind === "era") {
+      flushRun();
+      segments.push({ kind: "capsule", p });
+    } else {
+      run.push(p);
+    }
+  }
+  flushRun();
+  const totalRunTime = segments.reduce(
+    (s, seg) => s + (seg.kind === "run" ? seg.hi - seg.lo : 0),
+    0
+  );
+  const place = (stretch) => {
+    if (scaled) {
+      const pxPerUnit = totalRunTime > 0 ? innerW * stretch / totalRunTime : 0;
+      let cursor = H_MARGIN;
+      for (const seg of segments) {
+        if (seg.kind === "capsule") {
+          seg.p.x = cursor + COLLAPSE_W / 2;
+          seg.p.spanHalf = COLLAPSE_W / 2;
+          cursor += COLLAPSE_W + SEG_GAP;
+        } else {
+          for (const e of seg.events) {
+            e.x = cursor + (e.dateValue - seg.lo) * pxPerUnit;
+            e.spanHalf = 0;
+          }
+          cursor += (seg.hi - seg.lo) * pxPerUnit + SEG_GAP;
+        }
+      }
+      let prevX = -Infinity;
+      let prevVal = null;
+      for (const p of [...placed].sort((a, b) => a.x - b.x)) {
+        if (p.kind === "era") {
+          prevX = p.x + p.spanHalf;
+          prevVal = null;
+          continue;
+        }
+        if (p.dateValue === prevVal) {
+          p.x = prevX;
+          continue;
+        }
+        if (p.x < prevX + MIN_DOT_GAP) p.x = prevX + MIN_DOT_GAP;
+        prevX = p.x;
+        prevVal = p.dateValue;
+      }
+    } else {
+      placed.forEach((p) => {
+        p.spanHalf = 0;
+      });
+      const n = placed.length;
+      const spacing = n > 1 ? Math.max(MIN_SPACING, innerW / (n - 1)) : 0;
+      placed.forEach((p, i) => {
+        p.x = H_MARGIN + i * spacing;
+      });
+    }
+    for (const side of ["above", "below"]) {
+      const arr = placed.filter((p) => p.side === side).sort((a, b) => a.x - b.x);
+      const laneRight = [];
+      for (let i = 0; i < arr.length; i++) {
+        const p = arr[i];
+        const next = arr[i + 1];
+        const crowdedRight = !!next && next.x - p.x < CARD_W + FAN_GAP;
+        const preferred = crowdedRight ? p.x - CARD_W + CARD_INSET : p.x - CARD_W / 2;
+        const maxLeft = p.x - CARD_INSET;
+        const minLeft = p.x - CARD_W + CARD_INSET;
+        let lane = laneRight.length;
+        let left = Math.max(preferred, minLeft);
+        for (let l = 0; l < laneRight.length; l++) {
+          const want = Math.max(preferred, laneRight[l] + FAN_GAP, minLeft);
+          if (want <= maxLeft) {
+            lane = l;
+            left = want;
+            break;
+          }
+        }
+        p.lane = lane;
+        p.left = Math.max(6, left);
+        laneRight[lane] = p.left + CARD_W;
       }
-      if (p.x < prevX + MIN_DOT_GAP) p.x = prevX + MIN_DOT_GAP;
-      prevX = p.x;
-      prevVal = p.dateValue;
     }
+  };
+  const derive = () => {
+    const contentW2 = Math.max(
+      width,
+      Math.max(...placed.map((p) => p.x + p.spanHalf)) + H_MARGIN,
+      Math.max(...placed.map((p) => p.left + CARD_W)) + 6
+    );
+    const laneOffset = { above: [], below: [] };
+    for (const side of ["above", "below"]) {
+      const laneH = [];
+      for (const p of placed) {
+        if (p.side !== side) continue;
+        laneH[p.lane] = Math.max(laneH[p.lane] ?? 0, p.cardH);
+      }
+      const off = [];
+      let acc = 0;
+      for (let l = 0; l < laneH.length; l++) {
+        off[l] = acc;
+        acc += (laneH[l] ?? 0) + LANE_GAP;
+      }
+      laneOffset[side] = off;
+    }
+    const laneNear2 = (p) => (p.side === "above" ? LEADER_ABOVE : LEADER_BELOW) + (laneOffset[p.side][p.lane] ?? 0);
+    const ext = (side) => Math.max(
+      0,
+      ...placed.filter((p) => p.side === side).map((p) => laneNear2(p) + p.cardH)
+    );
+    const dateAbove = placed.some((p) => p.side === "below" && p.date);
+    const dateBelow = placed.some((p) => p.side === "above" && p.date);
+    const contentAbove = Math.max(
+      ext("above"),
+      dateAbove ? DATE_OFFSET + 10 : 0
+    );
+    const contentBelow = Math.max(
+      ext("below"),
+      dateBelow ? DATE_OFFSET + 10 : 0
+    );
+    const aboveExt = contentAbove + (hasExpandedEra && eraSide === "above" ? ERA_BLOCK : 0);
+    const belowExt = contentBelow + (hasExpandedEra && eraSide === "below" ? ERA_BLOCK : 0);
+    const TOP_PAD = 14;
+    const BOT_PAD = 14;
+    const spineY2 = topUsed + TOP_PAD + aboveExt;
+    const eraBaseY2 = eraSide === "above" ? spineY2 - (contentAbove + 14) : spineY2 + (contentBelow + 14);
+    const contentH = spineY2 + belowExt + BOT_PAD;
+    const totalH2 = Math.max(heightHint, contentH);
+    return { contentW: contentW2, contentH, totalH: totalH2, spineY: spineY2, eraBaseY: eraBaseY2, laneNear: laneNear2 };
+  };
+  const envStretch = Number(
+    globalThis.process?.env?.["DGMO_EVT_STRETCH"]
+  );
+  let layout;
+  if (Number.isFinite(envStretch) && envStretch > 0) {
+    place(envStretch);
+    layout = derive();
   } else {
-    const n = placed.length;
-    const spacing = n > 1 ? Math.max(MIN_SPACING, innerW / (n - 1)) : 0;
-    placed.forEach((p, i) => {
-      p.x = H_MARGIN + i * spacing;
-    });
-  }
-  for (const side of ["above", "below"]) {
-    const arr = placed.filter((p) => p.side === side).sort((a, b) => a.x - b.x);
-    const laneRight = [];
-    for (let i = 0; i < arr.length; i++) {
-      const p = arr[i];
-      const next = arr[i + 1];
-      const crowdedRight = !!next && next.x - p.x < CARD_W + FAN_GAP;
-      const preferred = crowdedRight ? p.x - CARD_W + CARD_INSET : p.x - CARD_W / 2;
-      const maxLeft = p.x - CARD_INSET;
-      const minLeft = p.x - CARD_W + CARD_INSET;
-      let lane = laneRight.length;
-      let left = Math.max(preferred, minLeft);
-      for (let l = 0; l < laneRight.length; l++) {
-        const want = Math.max(preferred, laneRight[l] + FAN_GAP, minLeft);
-        if (want <= maxLeft) {
-          lane = l;
-          left = want;
-          break;
+    place(1);
+    layout = derive();
+    const panelAspect = width / heightHint;
+    const aspectOf = (l) => l.contentW / l.contentH;
+    if (scaled && layout.contentH > heightHint && aspectOf(layout) < panelAspect) {
+      place(STRETCH_CAP);
+      const capped = derive();
+      if (aspectOf(capped) <= panelAspect) {
+        layout = capped;
+      } else {
+        let loF = 1;
+        let hiF = STRETCH_CAP;
+        for (let it = 0; it < 8; it++) {
+          const mid = (loF + hiF) / 2;
+          place(mid);
+          if (aspectOf(derive()) >= panelAspect) hiF = mid;
+          else loF = mid;
         }
+        place(hiF);
+        layout = derive();
       }
-      p.lane = lane;
-      p.left = Math.max(6, left);
-      laneRight[lane] = p.left + CARD_W;
     }
   }
-  const contentW = Math.max(
-    width,
-    Math.max(...placed.map((p) => p.x)) + H_MARGIN,
-    Math.max(...placed.map((p) => p.left + CARD_W)) + 6
-  );
-  const rowGap = (side) => Math.max(0, ...placed.filter((p) => p.side === side).map((p) => p.cardH)) + LANE_GAP;
-  const rowGapA = rowGap("above");
-  const rowGapB = rowGap("below");
-  const ext = (side) => Math.max(
-    0,
-    ...placed.filter((p) => p.side === side).map(
-      (p) => (side === "above" ? LEADER_ABOVE : LEADER_BELOW) + p.lane * (side === "above" ? rowGapA : rowGapB) + p.cardH
-    )
-  );
-  const dateAbove = placed.some((p) => p.side === "below" && p.date);
-  const dateBelow = placed.some((p) => p.side === "above" && p.date);
-  const contentAbove = Math.max(ext("above"), dateAbove ? DATE_OFFSET + 10 : 0);
-  const contentBelow = Math.max(ext("below"), dateBelow ? DATE_OFFSET + 10 : 0);
-  const aboveExt = contentAbove + (hasExpandedEra && eraSide === "above" ? ERA_BLOCK : 0);
-  const belowExt = contentBelow + (hasExpandedEra && eraSide === "below" ? ERA_BLOCK : 0);
-  const TOP_PAD = 14;
-  const BOT_PAD = 14;
-  const spineY = topUsed + TOP_PAD + aboveExt;
-  const eraBaseY = eraSide === "above" ? spineY - (contentAbove + 14) : spineY + (contentBelow + 14);
-  const totalH = Math.max(heightHint, spineY + belowExt + BOT_PAD);
+  const { contentW, totalH, spineY, eraBaseY, laneNear } = layout;
   const svg = d3Selection6.select(container).append("svg").attr("width", contentW).attr("height", totalH).attr("viewBox", `0 0 ${contentW} ${totalH}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
   svg.append("rect").attr("width", contentW).attr("height", totalH).attr("fill", palette.bg);
   if (showTitle) {
@@ -26566,12 +26725,11 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       activeGroup
     });
   }
-  const xs = placed.map((p) => p.x);
-  const x0 = Math.min(...xs);
-  const x1 = Math.max(...xs);
+  const x0 = Math.min(...placed.map((p) => p.x - p.spanHalf));
+  const x1 = Math.max(...placed.map((p) => p.x + p.spanHalf));
   svg.append("line").attr("x1", x0 - 20).attr("y1", spineY).attr("x2", x1 + 20).attr("y2", spineY).attr("stroke", palette.text).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
   const geo = placed.map((p) => {
-    const near = p.side === "above" ? spineY - LEADER_ABOVE - p.lane * rowGapA : spineY + LEADER_BELOW + p.lane * rowGapB;
+    const near = p.side === "above" ? spineY - laneNear(p) : spineY + laneNear(p);
     const top = p.side === "above" ? near - p.cardH : near;
     return { p, near, top };
   });
@@ -26683,7 +26841,7 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   for (const p of placed) {
     if (p.kind === "era") {
       const col = p.color;
-      const half = Math.min(46, 16 + (p.members.length - 1) * 9);
+      const half = Math.max(16, p.spanHalf);
       const spineLeft = x0 - 20;
       const spineRight = x1 + 20;
       const bx0 = Math.max(spineLeft, p.x - half);
@@ -26694,6 +26852,11 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
         "d",
         `M${bx0},${spineY} L${bx0},${barY} L${bx1},${barY} L${bx1},${spineY}`
       ).attr("fill", "none").attr("stroke", col).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+      const breakCx = (bx0 + bx1) / 2;
+      eg.append("line").attr("x1", breakCx - BREAK_GAP / 2).attr("y1", spineY).attr("x2", breakCx + BREAK_GAP / 2).attr("y2", spineY).attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linecap", "butt");
+      for (const d of axisBreakPaths(breakCx, spineY)) {
+        eg.append("path").attr("d", d).attr("fill", "none").attr("stroke", col).attr("stroke-width", 1.25).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("stroke-opacity", 0.85);
+      }
       if (onClickItem) {
         const ln = p.lineNumber;
         eg.style("cursor", "pointer").on("click", () => onClickItem(ln));
@@ -26727,13 +26890,23 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
     }
     const clampX = (v) => Math.max(4, Math.min(contentW - 4, v));
     const cap = eraSide === "above" ? 1 : -1;
-    for (const r of runs) {
-      if (r.collapsed) continue;
+    const drawn = runs.filter((r) => !r.collapsed).map((r) => ({
+      run: r,
+      x0: clampX(r.firstX - ERA_BRACKET_PAD),
+      x1: clampX(r.lastX + ERA_BRACKET_PAD)
+    })).sort((a, b) => a.run.firstX - b.run.firstX);
+    for (let i = 1; i < drawn.length; i++) {
+      const prev = drawn[i - 1];
+      const cur = drawn[i];
+      if (prev.x1 <= cur.x0) continue;
+      const mid = (prev.run.lastX + cur.run.firstX) / 2;
+      prev.x1 = Math.max(prev.run.lastX, Math.min(prev.x1, mid - ERA_SEAM_GAP));
+      cur.x0 = Math.min(cur.run.firstX, Math.max(cur.x0, mid + ERA_SEAM_GAP));
+    }
+    for (const { run: r, x0: x02, x1: x12 } of drawn) {
       const neutral = !r.era.color;
       const col = neutral ? palette.text : resolveColor(r.era.color, palette) ?? palette.text;
       const op = neutral ? 0.5 : 0.85;
-      const x02 = clampX(r.firstX - 14);
-      const x12 = clampX(r.lastX + 14);
       const y = eraBaseY;
       const eg = svg.append("g").attr("data-era", r.era.name).attr("data-era-collapsed", String(r.collapsed)).attr("data-line-number", r.era.lineNumber);
       eg.append("path").attr(
@@ -26759,6 +26932,22 @@ function renderEventLineForExport(container, parsed, palette, isDark, exportDims
     tagOverride
   );
 }
+function axisBreakPaths(cx, cy) {
+  const HUMPS = 2;
+  const STEPS = 14;
+  const wave = (x0) => {
+    let d = "";
+    for (let i = 0; i <= STEPS; i++) {
+      const t = i / STEPS;
+      const y = cy - BREAK_HALF_H + t * 2 * BREAK_HALF_H;
+      const x = x0 + BREAK_AMP * Math.sin(t * Math.PI * HUMPS);
+      d += `${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`;
+      if (i < STEPS) d += " ";
+    }
+    return d;
+  };
+  return [wave(cx - BREAK_GAP / 2), wave(cx + BREAK_GAP / 2)];
+}
 function wrapDescription(lines, charsPerLine) {
   const out = [];
   for (const line11 of lines) {
@@ -26788,7 +26977,7 @@ function renderBody(cardG, lines, bodyColor, palette, startBaseline = CARD_BODY_
     y += DESC_LINE_H;
   }
 }
-var CARD_W, H_MARGIN, TITLE_AREA, LEGEND_BAND, LEADER_ABOVE, LEADER_BELOW, DESC_FONT, DESC_LINE_H, CARD_PAD, CARD_BODY_TOP, DOT_R, MIN_SPACING, LANE_GAP, NEUTRAL_TAG, CARD_INSET, FAN_GAP, DATE_OFFSET, ERA_BLOCK, ERA_BRACKET_CAP, ERA_LEG, ERA_LABEL_FONT, ERA_MEMBER_MAX;
+var CARD_W, H_MARGIN, TITLE_AREA, LEGEND_BAND, LEADER_ABOVE, LEADER_BELOW, DESC_FONT, DESC_LINE_H, CARD_PAD, CARD_BODY_TOP, DOT_R, MIN_SPACING, LANE_GAP, NEUTRAL_TAG, CARD_INSET, FAN_GAP, DATE_OFFSET, ERA_BLOCK, ERA_BRACKET_CAP, ERA_BRACKET_PAD, ERA_SEAM_GAP, BREAK_HALF_H, BREAK_AMP, BREAK_GAP, ERA_LEG, ERA_LABEL_FONT;
 var init_renderer = __esm({
   "src/event-line/renderer.ts"() {
     "use strict";
@@ -26822,9 +27011,13 @@ var init_renderer = __esm({
     DATE_OFFSET = 28;
     ERA_BLOCK = 30;
     ERA_BRACKET_CAP = 8;
+    ERA_BRACKET_PAD = 14;
+    ERA_SEAM_GAP = 3;
+    BREAK_HALF_H = 6;
+    BREAK_AMP = 2.2;
+    BREAK_GAP = 5;
     ERA_LEG = 13;
     ERA_LABEL_FONT = 11.5;
-    ERA_MEMBER_MAX = 6;
   }
 });
 
@@ -53297,6 +53490,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       y,
       score,
       palette,
+      isDark,
       SCORE_LABEL_R
     );
     if (!exportDims) {
@@ -53328,7 +53522,14 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const allSteps = parsed.phases.length > 0 ? parsed.phases.flatMap((p) => p.steps) : parsed.steps;
     for (const pt of layout.curvePoints) {
       const step = allSteps[pt.stepIndex];
-      const faceG = renderScoreFace(curveG, pt.x, pt.y, pt.score, palette);
+      const faceG = renderScoreFace(
+        curveG,
+        pt.x,
+        pt.y,
+        pt.score,
+        palette,
+        isDark
+      );
       addEmotionLabel(faceG, pt, palette);
       if (step) {
         faceG.attr("data-line-number", step.lineNumber);
@@ -53354,7 +53555,14 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     const pt = layout.curvePoints[0];
     const allSteps = parsed.phases.length > 0 ? parsed.phases.flatMap((p) => p.steps) : parsed.steps;
     const step = allSteps[pt.stepIndex];
-    const faceG = renderScoreFace(curveG, pt.x, pt.y, pt.score, palette);
+    const faceG = renderScoreFace(
+      curveG,
+      pt.x,
+      pt.y,
+      pt.score,
+      palette,
+      isDark
+    );
     addEmotionLabel(faceG, pt, palette);
     if (step) {
       faceG.attr("data-line-number", step.lineNumber);
@@ -53451,6 +53659,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
               faceCy,
               step.score,
               palette,
+              isDark,
               COLLAPSED_FACE_R
             );
             faceG.attr("data-line-number", step.lineNumber);
@@ -53554,7 +53763,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
           const fcy = parseFloat(el.attr("data-cy") ?? "0");
           el.attr(
             "transform",
-            `translate(${fcx},${fcy}) scale(1.5) translate(${-fcx},${-fcy})`
+            `translate(${fcx},${fcy}) scale(${FACE_HOVER_SCALE}) translate(${-fcx},${-fcy})`
           );
         } else {
           el.attr("transform", null);
@@ -53600,12 +53809,12 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         PADDING2,
         Math.min(fcx - bw / 2, layout.totalWidth - PADDING2 - bw)
       );
-      const by = Math.max(PADDING2, fcy - FACE_RADIUS - THOUGHT_GAP - bh);
+      const by = Math.max(PADDING2, fcy - FACE_HOVER_R - THOUGHT_GAP - bh);
       const scoreColor = scoreToColor(score, palette);
       const tintedBg = mix(scoreColor, palette.surface, 20);
       const g = overlayG.append("g").attr("class", "journey-thought-hover");
       g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
-      g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_RADIUS - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
+      g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_HOVER_R - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH2);
       const centerX = bx + bw / 2;
       for (let i = 0; i < lines.length; i++) {
         g.append("text").attr("x", centerX).attr("y", by + THOUGHT_PAD_Y + (i + 1) * THOUGHT_LINE_H - 2).attr("text-anchor", "middle").attr("font-size", THOUGHT_FONT).attr("font-style", "italic").attr("fill", palette.textMuted).text(lines[i]);
@@ -53848,24 +54057,23 @@ function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
     `M ${cx} ${cy - 12 * s} C ${cx + 10 * s} ${cy - 12 * s}, ${cx + 9 * s} ${cy + 2 * s}, ${cx + 6 * s} ${cy + 6 * s} Q ${cx} ${cy + 9 * s}, ${cx - 6 * s} ${cy + 6 * s} C ${cx - 9 * s} ${cy + 2 * s}, ${cx - 10 * s} ${cy - 12 * s}, ${cx} ${cy - 12 * s} Z`
   ).attr("fill", fill2).attr("stroke", stroke2).attr("stroke-width", 1.2);
 }
-function renderScoreFace(parent, cx, cy, score, palette, radius) {
+function renderScoreFace(parent, cx, cy, score, palette, isDark, radius) {
   const r = radius ?? FACE_RADIUS;
   const color = scoreToColor(score, palette);
   const g = parent.append("g").attr("class", "journey-face").attr("data-cx", cx).attr("data-cy", cy);
-  g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", color).attr("stroke", palette.bg).attr("stroke-width", 1.5);
-  const eyeColor = contrastText(
-    color,
-    palette.textOnFillLight,
-    palette.textOnFillDark
-  );
+  const faceFill = shapeFill(palette, color, isDark);
+  g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r + 1).attr("fill", palette.bg);
+  g.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", faceFill).attr("stroke", color).attr("stroke-width", 2);
+  const eyeColor = color;
   const eyeY = cy - r * 0.15;
   const eyeSpacing = r * 0.32;
   const eyeR = r * 0.12;
   g.append("circle").attr("cx", cx - eyeSpacing).attr("cy", eyeY).attr("r", eyeR).attr("fill", eyeColor);
   g.append("circle").attr("cx", cx + eyeSpacing).attr("cy", eyeY).attr("r", eyeR).attr("fill", eyeColor);
-  const mouthY = cy + r * 0.25;
-  const mouthW = r * 0.45;
-  const curve = (score - 3) / 2 * r * 0.35;
+  const mouthW = r * 0.46;
+  const curve = (score - 3) / 2 * r * 0.42;
+  const apexY = cy + r * 0.32;
+  const mouthY = apexY - curve / 2;
   g.append("path").attr(
     "d",
     `M ${cx - mouthW} ${mouthY} Q ${cx} ${mouthY + curve} ${cx + mouthW} ${mouthY}`
@@ -53936,7 +54144,7 @@ function renderJourneyMapForExport(content, theme, palette) {
   }
   return svgEl.outerHTML;
 }
-var DIAGRAM_PADDING13, PADDING2, CARD_PADDING_X3, CARD_PADDING_Y3, CARD_HEADER_HEIGHT3, CARD_STROKE_WIDTH2, CARD_META_LINE_HEIGHT3, CARD_GAP_INTERNAL, COLUMN_RADIUS2, COLUMN_HEADER_HEIGHT2, COLUMN_PADDING3, FONT_SIZE_TITLE, FONT_SIZE_PHASE, FONT_SIZE_STEP, FONT_SIZE_META, GRID_LINE_OPACITY, CURVE_STROKE_WIDTH, FACE_RADIUS, DIM_HOVER, TITLE_LINE_HEIGHT, EMOTION_LABEL_MAX_WIDTH, EMOTION_LABEL_FONT_SIZE, ICON_THUMBS_DOWN, ICON_THUMBS_UP, ICON_THOUGHT;
+var DIAGRAM_PADDING13, PADDING2, CARD_PADDING_X3, CARD_PADDING_Y3, CARD_HEADER_HEIGHT3, CARD_STROKE_WIDTH2, CARD_META_LINE_HEIGHT3, CARD_GAP_INTERNAL, COLUMN_RADIUS2, COLUMN_HEADER_HEIGHT2, COLUMN_PADDING3, FONT_SIZE_TITLE, FONT_SIZE_PHASE, FONT_SIZE_STEP, FONT_SIZE_META, GRID_LINE_OPACITY, CURVE_STROKE_WIDTH, FACE_RADIUS, FACE_HOVER_SCALE, FACE_HOVER_R, DIM_HOVER, TITLE_LINE_HEIGHT, EMOTION_LABEL_MAX_WIDTH, EMOTION_LABEL_FONT_SIZE, ICON_THUMBS_DOWN, ICON_THUMBS_UP, ICON_THOUGHT;
 var init_renderer17 = __esm({
   "src/journey-map/renderer.ts"() {
     "use strict";
@@ -53970,6 +54178,8 @@ var init_renderer17 = __esm({
     GRID_LINE_OPACITY = 0.15;
     CURVE_STROKE_WIDTH = 2.5;
     FACE_RADIUS = 14;
+    FACE_HOVER_SCALE = 1.5;
+    FACE_HOVER_R = (FACE_RADIUS + 1) * FACE_HOVER_SCALE;
     DIM_HOVER = 0.25;
     TITLE_LINE_HEIGHT = 16;
     EMOTION_LABEL_MAX_WIDTH = 180;