@diagrammo/dgmo 0.39.0 → 0.41.0

package/dist/index.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 '%').`;
@@ -13629,7 +13629,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,
@@ -13656,6 +13657,7 @@ function buildScatterOption(parsed, palette, isDark, textColor, axisLineColor, g
       {
         type: "scatter",
         data,
+        itemStyle: { opacity: SCATTER_FILL_OPACITY },
         label: labelConfig,
         emphasis: emphasisConfig,
         blur: blurConfig
@@ -14961,7 +14963,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";
@@ -15015,6 +15017,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",
@@ -15112,6 +15115,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];
@@ -15186,52 +15191,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();
@@ -15255,16 +15223,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,
@@ -15276,6 +15280,7 @@ function parseEventLine(content, palette) {
     );
     result.events.push(event);
     currentEvent = event;
+    currentEventIndent = indent;
   }
   options.noTitle = sharedOptions["no-title"] === "on";
   finalizeAutoTagColors(result.tagGroups, palette);
@@ -15290,8 +15295,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;
@@ -15358,7 +15416,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;
@@ -26295,9 +26354,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";
@@ -26364,7 +26420,8 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
         x: 0,
         side,
         lane: 0,
-        left: 0
+        left: 0,
+        spanHalf: 0
       };
     }
     const era = slot.era;
@@ -26377,19 +26434,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,
@@ -26397,7 +26454,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,
@@ -26409,87 +26466,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;
       }
-      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;
+      }
+    }
+  };
+  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) {
@@ -26517,12 +26676,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 };
   });
@@ -26634,7 +26792,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);
@@ -26645,6 +26803,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));
@@ -26678,13 +26841,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(
@@ -26710,6 +26883,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) {
@@ -26739,7 +26928,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";
@@ -26773,9 +26962,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;
   }
 });
 
@@ -26918,13 +27111,13 @@ function renderVersionControl(container, parsed, palette, isDark, onClickItem, e
   }
   const showTitle = !!parsed.title;
   const titleH = showTitle ? TITLE_AREA2 : 0;
-  const W2 = Math.round(contentW);
+  const W3 = Math.round(contentW);
   const H2 = Math.round(contentH + titleH);
   const exportMode = !!exportDims;
-  const svg = d3Selection7.select(container).append("svg").attr("width", W2).attr("height", H2).attr("viewBox", `0 0 ${W2} ${H2}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
-  svg.append("rect").attr("width", W2).attr("height", H2).attr("fill", palette.bg);
+  const svg = d3Selection7.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);
+  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", W2 / 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", 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);
     if (onClickItem && parsed.titleLineNumber && !exportMode) {
       const ln = parsed.titleLineNumber;
       t.style("cursor", "pointer").on("click", () => onClickItem(ln));
@@ -32705,7 +32898,7 @@ function findClearPosition(w, h, points, obstacles) {
 }
 function resolveLabelOverlaps(boxes) {
   const MAX_PASSES = 8;
-  const PAD = 4;
+  const PAD2 = 4;
   for (let pass = 0; pass < MAX_PASSES; pass++) {
     let moved = false;
     for (let i = 0; i < boxes.length; i++) {
@@ -32714,8 +32907,8 @@ function resolveLabelOverlaps(boxes) {
         const b = boxes[j];
         const dx = Math.abs(a.cx - b.cx);
         const dy = Math.abs(a.cy - b.cy);
-        const overlapX = (a.w + b.w) / 2 + PAD - dx;
-        const overlapY = (a.h + b.h) / 2 + PAD - dy;
+        const overlapX = (a.w + b.w) / 2 + PAD2 - dx;
+        const overlapY = (a.h + b.h) / 2 + PAD2 - dy;
         if (overlapX > 0 && overlapY > 0) {
           const shift = overlapY / 2 + 1;
           if (a.cy < b.cy) {
@@ -43096,7 +43289,7 @@ function buildPathD(pts, direction) {
 function computePortPts(edges, nodeMap, direction) {
   const srcPts = /* @__PURE__ */ new Map();
   const tgtPts = /* @__PURE__ */ new Map();
-  const PAD = 0.1;
+  const PAD2 = 0.1;
   const activeEdges = edges.filter((e) => e.points.length > 0);
   const bySource = /* @__PURE__ */ new Map();
   for (const e of activeEdges) {
@@ -43112,7 +43305,7 @@ function computePortPts(edges, nodeMap, direction) {
     ).sort((a, b) => direction === "LR" ? a.t.y - b.t.y : a.t.x - b.t.x);
     const n = sorted.length;
     for (let i = 0; i < n; i++) {
-      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const frac = n === 1 ? 0.5 : PAD2 + (1 - 2 * PAD2) * i / (n - 1);
       const { e, t } = sorted[i];
       const isBackward = direction === "LR" ? t.x < source.x : t.y < source.y;
       if (direction === "LR") {
@@ -43142,7 +43335,7 @@ function computePortPts(edges, nodeMap, direction) {
     ).sort((a, b) => direction === "LR" ? a.s.y - b.s.y : a.s.x - b.s.x);
     const n = sorted.length;
     for (let i = 0; i < n; i++) {
-      const frac = n === 1 ? 0.5 : PAD + (1 - 2 * PAD) * i / (n - 1);
+      const frac = n === 1 ? 0.5 : PAD2 + (1 - 2 * PAD2) * i / (n - 1);
       const { e, s } = sorted[i];
       const isBackward = direction === "LR" ? target.x < s.x : target.y < s.y;
       if (direction === "LR") {
@@ -52935,6 +53128,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       y,
       score,
       palette,
+      isDark,
       SCORE_LABEL_R
     );
     if (!exportDims) {
@@ -52966,7 +53160,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);
@@ -52992,7 +53193,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);
@@ -53089,6 +53297,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
               faceCy,
               step.score,
               palette,
+              isDark,
               COLLAPSED_FACE_R
             );
             faceG.attr("data-line-number", step.lineNumber);
@@ -53192,7 +53401,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);
@@ -53238,12 +53447,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]);
@@ -53486,24 +53695,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}`
@@ -53574,7 +53782,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";
@@ -53608,6 +53816,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;
@@ -56657,7 +56867,7 @@ function layoutMap(resolvedIn, data, size, opts) {
   const akRef = resolved.regions.some((r) => r.iso === "US-AK") || resolved.pois.some((p) => inAlaska(p.lon, p.lat));
   const hiRef = resolved.regions.some((r) => r.iso === "US-HI") || resolved.pois.some((p) => inHawaii(p.lon, p.lat));
   if (resolved.projection === "albers-usa" && usLayer && (akRef || hiRef)) {
-    const PAD = 8;
+    const PAD2 = 8;
     const GAP = 12;
     const yB = height - FIT_PAD;
     const BW = 8;
@@ -56700,22 +56910,22 @@ function layoutMap(resolvedIn, data, size, opts) {
       const f = usLayer.get(iso);
       if (!f) return boxX;
       const x0 = boxX;
-      const iw = Math.min(iwReq, width - FIT_PAD - x0 - 2 * PAD);
+      const iw = Math.min(iwReq, width - FIT_PAD - x0 - 2 * PAD2);
       if (iw < 24) return boxX;
-      const xr = x0 + iw + 2 * PAD;
+      const xr = x0 + iw + 2 * PAD2;
       const floor = coastFloor(x0, xr);
       const topGuess = floor > -Infinity ? floor + GAP : yB - height * 0.42;
       proj.fitWidth(iw, f);
       const bb = geoPath(proj).bounds(f);
       const sh = Number.isFinite(bb[0][0]) ? bb[1][1] - bb[0][1] : iw;
-      const needH = sh + 2 * PAD;
+      const needH = sh + 2 * PAD2;
       let topFit = topGuess;
       const bottom = Math.min(topFit + needH, yB);
       if (bottom - topFit < needH) topFit = bottom - needH;
       proj.fitExtent(
         [
-          [x0 + PAD, topFit + PAD],
-          [xr - PAD, bottom - PAD]
+          [x0 + PAD2, topFit + PAD2],
+          [xr - PAD2, bottom - PAD2]
         ],
         f
       );
@@ -58239,15 +58449,15 @@ function layoutMap(resolvedIn, data, size, opts) {
     }
   }
   if (regionLabelGuards.length > 0) {
-    const PAD = 2;
+    const PAD2 = 2;
     const poiRects = labels.filter((l) => l.poiId !== void 0 && l.hidden !== true).map((l) => {
       const w = measureLegendText(l.text, FONT2);
       const x = l.anchor === "start" ? l.x : l.anchor === "end" ? l.x - w : l.x - w / 2;
       return {
-        x: x - PAD,
+        x: x - PAD2,
         y: l.y - FONT2,
-        w: w + 2 * PAD,
-        h: FONT2 * 1.4 + 2 * PAD
+        w: w + 2 * PAD2,
+        h: FONT2 * 1.4 + 2 * PAD2
       };
     });
     for (const g of regionLabelGuards) {
@@ -58871,7 +59081,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   if (poiLabels.length) {
     const patchBlurId = nid("dgmo-map-label-patch-blur");
     defs.append("filter").attr("id", patchBlurId).attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%").append("feGaussianBlur").attr("in", "SourceGraphic").attr("stdDeviation", 2.5);
-    const PAD = 8;
+    const PAD2 = 8;
     const buildPatch = (labels, maskId, decoCluster) => {
       if (!labels.length) return;
       const patchMask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
@@ -58887,10 +59097,10 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         const h = th + 6;
         blobs.append("rect").attr("x", cx - w / 2).attr("y", cy - h / 2).attr("width", w).attr("height", h).attr("rx", h / 2).attr("fill", "white");
         blobRects.push({
-          x0: cx - w / 2 - PAD,
-          y0: cy - h / 2 - PAD,
-          x1: cx + w / 2 + PAD,
-          y1: cy + h / 2 + PAD
+          x0: cx - w / 2 - PAD2,
+          y0: cy - h / 2 - PAD2,
+          x1: cx + w / 2 + PAD2,
+          y1: cy + h / 2 + PAD2
         });
       }
       const gPatch = svg.append("g").attr("class", "dgmo-map-label-patch").attr("mask", `url(#${maskId})`).style("pointer-events", "none");
@@ -60311,13 +60521,13 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
         g.append("text").attr("class", "dgmo-treemap-header-value").attr("x", w - ICON_RESERVE - 4).attr("y", 13).attr("text-anchor", "end").attr("font-size", 10.5).attr("fill", ink).attr("opacity", 0.75).text(valStr);
       }
     }
-    const PAD = Math.max(4, Math.min(14, Math.floor(Math.min(w, h) / 5)));
+    const PAD2 = Math.max(4, Math.min(14, Math.floor(Math.min(w, h) / 5)));
     const MIN_FS = 7;
-    if (!cell.isContainer && w >= 2 * PAD + 8 && h >= 2 * PAD + 8) {
-      const maxW = w - 2 * PAD;
+    if (!cell.isContainer && w >= 2 * PAD2 + 8 && h >= 2 * PAD2 + 8) {
+      const maxW = w - 2 * PAD2;
       const horizMinW = measureText(cell.label, MIN_FS) * 1.06;
-      if (horizMinW > maxW && h > w * 1.25 && h - 2 * PAD > maxW) {
-        drawVerticalLabel(g, cell.label, w, h, PAD, ink);
+      if (horizMinW > maxW && h > w * 1.25 && h - 2 * PAD2 > maxW) {
+        drawVerticalLabel(g, cell.label, w, h, PAD2, ink);
         if (drillable && w > 30 && h > 22) drawFocusIcon(g, w, ink, 9);
         continue;
       }
@@ -60328,8 +60538,8 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const nameOpacity = 0.95 - tg * 0.5;
       const vfs = clamp3(Math.round(fs * 0.42), 11, 28);
       const valOpacity = Math.max(0.45, nameOpacity - 0.1);
-      let y = PAD + Math.round(fs * 0.78);
-      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD).attr("y", y).attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
+      let y = PAD2 + Math.round(fs * 0.78);
+      g.append("text").attr("class", "dgmo-treemap-label").attr("x", PAD2).attr("y", y).attr("font-size", fs).attr("font-weight", 600).attr("fill", ink).attr("opacity", nameOpacity).text(clipLabel(cell.label, maxW, fs));
       const valParts = [
         opts.noValues ? "" : compactNumber2(cell.value),
         opts.noPercent ? "" : formatPct(cell.pctOfRoot)
@@ -60337,12 +60547,12 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
       const combined = valParts.join(" \xB7 ");
       const nameBaseY = y;
       const addLineAt = (text, yy, size, opacity) => {
-        g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD).attr("y", yy).attr("font-size", size).attr("fill", ink).attr("opacity", opacity).text(text);
+        g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD2).attr("y", yy).attr("font-size", size).attr("fill", ink).attr("opacity", opacity).text(text);
       };
       if (combined) {
         const fitsW = measureText(combined, vfs) <= maxW;
         const valY = y + lineDrop(fs, vfs);
-        const roomBelow = valY + descent(vfs) <= h - PAD;
+        const roomBelow = valY + descent(vfs) <= h - PAD2;
         if (fitsW && roomBelow) {
           addLineAt(combined, valY, vfs, valOpacity);
         } else if (fitsW) {
@@ -60350,24 +60560,24 @@ function renderTreemap(container, parsed, palette, isDark, exportDims, options =
           const rendered = clipLabel(cell.label, maxW, fs);
           const nW = measureText(rendered, fs) * 1.12;
           const gap = Math.max(12, Math.round(fs * 0.25));
-          if (PAD + nW + gap + measureText(combined, ivfs) <= w - PAD) {
-            g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD + nW + gap).attr("y", nameBaseY).attr("font-size", ivfs).attr("fill", ink).attr("opacity", valOpacity).text(combined);
+          if (PAD2 + nW + gap + measureText(combined, ivfs) <= w - PAD2) {
+            g.append("text").attr("class", "dgmo-treemap-value").attr("x", PAD2 + nW + gap).attr("y", nameBaseY).attr("font-size", ivfs).attr("fill", ink).attr("opacity", valOpacity).text(combined);
           }
         } else if (valParts.length === 2) {
           const d1 = lineDrop(fs, vfs);
-          if (y + d1 + descent(vfs) <= h - PAD) {
+          if (y + d1 + descent(vfs) <= h - PAD2) {
             y += d1;
             addLineAt(valParts[0], y, vfs, valOpacity);
           }
           const pfs = Math.max(10, Math.round(vfs * 0.9));
           const d2 = lineDrop(vfs, pfs);
-          if (y + d2 + descent(pfs) <= h - PAD) {
+          if (y + d2 + descent(pfs) <= h - PAD2) {
             y += d2;
             addLineAt(valParts[1], y, pfs, valOpacity);
           }
         } else {
           const onlyY = y + lineDrop(fs, vfs);
-          if (onlyY + descent(vfs) <= h - PAD) {
+          if (onlyY + descent(vfs) <= h - PAD2) {
             addLineAt(combined, onlyY, vfs, valOpacity);
           }
         }
@@ -68490,6 +68700,144 @@ function decodeDiagramUrl(hash) {
 init_dgmo_router();
 init_palettes();
 init_diagnostics();
+
+// src/error-card.ts
+init_text_measure();
+init_fonts();
+var MONO_FAMILY = "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+var W2 = 660;
+var PAD = 24;
+var CONTENT_W = W2 - PAD * 2;
+var MAX_ERRORS = 4;
+var MONO_CH = 0.6;
+var CODE_FS = 12.5;
+function renderErrorCard(errors, source, palette, theme) {
+  const c = palette[theme === "dark" ? "dark" : "light"];
+  const isTransparent = theme === "transparent";
+  const card = c.surface;
+  const codeBg = c.bg;
+  const border = c.border;
+  const danger = c.destructive ?? c.colors.red;
+  const text = c.text;
+  const muted = c.textMuted;
+  const srcLines = source.split("\n");
+  const shown = errors.slice(0, MAX_ERRORS);
+  const overflow = errors.length - shown.length;
+  const parts = [];
+  let y = PAD + 8;
+  parts.push(frownMark(PAD + 14, y + 12, danger));
+  parts.push(
+    `<text x="${PAD + 38}" y="${y + 11}" fill="${text}" font-family="${FONT_FAMILY}" font-size="16" font-weight="700">Couldn't render this diagram</text>`,
+    `<text x="${W2 - PAD}" y="${y + 10}" text-anchor="end" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12" font-weight="600" letter-spacing="0.5">dgmo</text>`
+  );
+  y += 24;
+  const errLabel = errors.length === 1 ? "1 error" : `${errors.length} errors`;
+  parts.push(
+    `<text x="${PAD + 38}" y="${y + 4}" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12.5">${errLabel} \u2014 fix the lines below and re-render</text>`
+  );
+  y += 22;
+  parts.push(
+    `<line x1="${PAD}" y1="${y}" x2="${W2 - PAD}" y2="${y}" stroke="${border}" stroke-width="1"/>`
+  );
+  y += 24;
+  for (const e of shown) {
+    const hasLine = e.line > 0;
+    let msgX = PAD;
+    if (hasLine) {
+      const label = e.column ? `Line ${e.line}:${e.column}` : `Line ${e.line}`;
+      const badgeW = 14 + label.length * 7;
+      parts.push(
+        `<rect x="${PAD}" y="${y - 13}" width="${badgeW}" height="19" rx="4" fill="${danger}"/>`,
+        `<text x="${PAD + badgeW / 2}" y="${y + 1}" text-anchor="middle" fill="${c.bg}" font-family="${FONT_FAMILY}" font-size="11.5" font-weight="700">${escapeXml(label)}</text>`
+      );
+      msgX = PAD + badgeW + 12;
+    }
+    const lines = wrapMessage(e.message, CONTENT_W - (msgX - PAD), CONTENT_W);
+    lines.forEach((line11, i) => {
+      parts.push(
+        `<text x="${i === 0 ? msgX : PAD}" y="${y + 1}" fill="${text}" font-family="${FONT_FAMILY}" font-size="13">${escapeXml(line11)}</text>`
+      );
+      if (i < lines.length - 1) y += 18;
+    });
+    y += 24;
+    const raw = hasLine ? srcLines[e.line - 1] : void 0;
+    if (raw !== void 0 && raw.trim().length > 0) {
+      const gutter = `${e.line}`;
+      const gutterW = gutter.length * CODE_FS * MONO_CH + 16;
+      const codeX = PAD + gutterW;
+      const codeMaxW = CONTENT_W - gutterW - 12;
+      const codeText = truncateText(
+        raw.replace(/\t/g, "  "),
+        CODE_FS,
+        codeMaxW
+      );
+      const hasCaret = e.column !== void 0 && e.column > 0;
+      const blockH = hasCaret ? 40 : 26;
+      parts.push(
+        `<rect x="${PAD}" y="${y - 14}" width="${CONTENT_W}" height="${blockH}" rx="5" fill="${codeBg}" stroke="${border}" stroke-width="1"/>`,
+        `<line x1="${codeX - 8}" y1="${y - 14}" x2="${codeX - 8}" y2="${y - 14 + blockH}" stroke="${border}" stroke-width="1"/>`,
+        `<text x="${PAD + 8}" y="${y + 3}" fill="${muted}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}">${escapeXml(gutter)}</text>`,
+        `<text x="${codeX}" y="${y + 3}" fill="${text}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}" xml:space="preserve">${escapeXml(codeText)}</text>`
+      );
+      if (hasCaret) {
+        const caretX = codeX + (e.column - 1) * CODE_FS * MONO_CH;
+        parts.push(
+          `<text x="${caretX}" y="${y + 17}" fill="${danger}" font-family="${MONO_FAMILY}" font-size="${CODE_FS}" font-weight="700">^</text>`
+        );
+        y += 14;
+      }
+      y += 24;
+    }
+    y += 14;
+  }
+  if (overflow > 0) {
+    parts.push(
+      `<text x="${PAD}" y="${y}" fill="${muted}" font-family="${FONT_FAMILY}" font-size="12.5" font-style="italic">+ ${overflow} more error${overflow === 1 ? "" : "s"}</text>`
+    );
+    y += 22;
+  }
+  const height = Math.round(y + PAD - 14);
+  const pageBg = isTransparent ? "" : `<rect width="100%" height="100%" fill="${c.bg}"/>`;
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${W2}" height="${height}" viewBox="0 0 ${W2} ${height}" font-family="${FONT_FAMILY}">`,
+    pageBg,
+    `<rect x="0.5" y="0.5" width="${W2 - 1}" height="${height - 1}" rx="10" fill="${card}" stroke="${border}" stroke-width="1"/>`,
+    parts.join(""),
+    `</svg>`
+  ].join("");
+}
+function wrapMessage(message, firstWidth, fullWidth) {
+  const words = message.split(/\s+/).filter(Boolean);
+  if (words.length === 0) return [""];
+  const lines = [];
+  let cur = "";
+  for (const word of words) {
+    const limit = lines.length === 0 ? firstWidth : fullWidth;
+    const test = cur ? `${cur} ${word}` : word;
+    if (measureText(test, 13) <= limit || !cur) {
+      cur = test;
+    } else {
+      lines.push(cur);
+      cur = word;
+    }
+  }
+  if (cur) lines.push(cur);
+  return lines;
+}
+function frownMark(cx, cy, color) {
+  const r = 12;
+  return [
+    `<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${color}" stroke-width="2"/>`,
+    `<circle cx="${cx - 4.5}" cy="${cy - 3}" r="1.6" fill="${color}"/>`,
+    `<circle cx="${cx + 4.5}" cy="${cy - 3}" r="1.6" fill="${color}"/>`,
+    `<path d="M ${cx - 5} ${cy + 6} Q ${cx} ${cy + 1} ${cx + 5} ${cy + 6}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
+  ].join("");
+}
+function escapeXml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/index.ts
 init_palettes();
 
 // src/themes.ts
@@ -68829,25 +69177,10 @@ async function render2(text, options) {
     return result;
   }
   return {
-    svg: result.svg || renderErrorSvg(errors, palette, options?.theme),
+    svg: renderErrorCard(errors, text, palette, options?.theme),
     diagnostics: result.diagnostics
   };
 }
-function renderErrorSvg(errors, palette, theme) {
-  const colors = palette[theme === "dark" ? "dark" : "light"];
-  const bg = theme === "transparent" ? "transparent" : colors.bg;
-  const fg = colors.destructive ?? colors.text;
-  const muted = colors.textMuted ?? colors.text;
-  const lines = errors.slice(0, 5).map((e) => formatDgmoError(e));
-  const height = 60 + lines.length * 20;
-  const body = lines.map(
-    (line11, i) => `<text x="20" y="${60 + i * 20}" fill="${fg}" font-family="ui-monospace, monospace" font-size="12">${escapeXml(line11)}</text>`
-  ).join("");
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="${height}" viewBox="0 0 640 ${height}"><rect width="100%" height="100%" fill="${bg}"/><text x="20" y="34" fill="${muted}" font-family="system-ui, sans-serif" font-size="13" font-weight="600">DGMO parse error</text>${body}</svg>`;
-}
-function escapeXml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
 function encodeDiagramUrl2(text, options) {
   const internalTheme = options?.theme === "light" || options?.theme === "dark" ? options.theme : void 0;
   const result = encodeDiagramUrl(text, {