@diagrammo/dgmo 0.93.0 → 0.95.0

package/dist/{chunk-IIV4SMJL.js → chunk-6EFCOES2.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-R2K5L4UA.js";
 import {
   formatDateLabel
-} from "./chunk-3GCASUWA.js";
+} from "./chunk-TASRGDYP.js";
 import {
   parseTimelineDate
 } from "./chunk-BQO24BDM.js";
 import {
   layoutInlineHeader
-} from "./chunk-42UJ23H3.js";
+} from "./chunk-UIEKW4SG.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -31,10 +31,10 @@ import {
 } from "./chunk-JILEYZ2V.js";
 import {
   wrapDescriptionLines
-} from "./chunk-MB2SQF7N.js";
+} from "./chunk-7WEYXYLC.js";
 import {
   renderInlineText
-} from "./chunk-65GPEV5V.js";
+} from "./chunk-QKPOIJBT.js";
 import {
   FONT_FAMILY
 } from "./chunk-ICLB27PZ.js";
@@ -61,91 +61,34 @@ import {
 
 // src/event-line/renderer.ts
 import * as d3Selection from "d3-selection";
+
+// src/event-line/layout.ts
 var CARD_W = 210;
 var H_MARGIN = 58;
-var TITLE_AREA = 48;
-var LEGEND_BAND = 34;
 var LEADER_ABOVE = 46;
 var LEADER_BELOW = 46;
 var DESC_FONT = 11.5;
 var DESC_LINE_H = 16;
 var CARD_PAD = 9;
-var CARD_BODY_TOP = HEADER_HEIGHT + SEPARATOR_GAP;
 var TITLE_LINE_H = 16;
 var TITLE_MAX_W = (CARD_W - CARD_PAD * 2) * 0.93;
-var DOT_R = 5.5;
 var MIN_SPACING = 96;
 var LANE_GAP = 16;
 var NEUTRAL_TAG = UNTAGGED_TAG_COLOR;
 var CARD_INSET = 18;
 var FAN_GAP = 6;
 var DATE_SUBTITLE_H = 15;
-var DATE_SUBTITLE_FONT = 10;
-var SHELF_TINT = 13;
-var SHELF_EDGE = 4;
-var SHELF_EDGE_STYLE = "spine";
-var SHELF_LIP = 2;
 var ERA_BLOCK = 30;
-var ERA_BRACKET_CAP = 8;
+var DOT_R = 5.5;
 var ERA_BRACKET_PAD = 14;
 var ERA_SEAM_GAP = 3;
-var BREAK_HALF_H = 6;
-var BREAK_AMP = 2.6;
-var BREAK_GAP = 5;
 var ERA_LEG = 13;
-var ERA_LABEL_FONT = 11.5;
-var HL = "dgmo-evt-hl";
-var DIM = "dgmo-evt-dim";
-var ERA_HL = "dgmo-evt-era-hl";
-var COLLAPSED = "dgmo-evt-collapsed";
-var OFF = "dgmo-evt-off";
-var HIDDEN_ATTR = "data-evt-hidden";
-var HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
-function renderEventLine(container, parsed, palette, isDark, onClickItem, exportDims, tagOverride, nowDate) {
-  if (parsed.events.length === 0) return;
-  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
-  const width = exportDims?.width ?? container.clientWidth;
-  const heightHint = exportDims?.height ?? container.clientHeight;
-  if (width <= 0 || heightHint <= 0) return;
-  const exportMode = !!exportDims;
-  const hiddenSet = exportMode ? /* @__PURE__ */ new Set() : readHidden(container);
+function layoutEventLine(parsed, palette, isDark, opts) {
+  const { width, heightHint, exportMode, hiddenSet, activeGroup, nowDate } = opts;
+  const header = layoutHeader(parsed, activeGroup, width, exportMode);
+  const { topUsed } = header;
   const seriesColors = getSeriesColors(palette);
   const accent = seriesColors[0];
-  const activeGroup = resolveActiveTagGroup(
-    parsed.tagGroups,
-    void 0,
-    tagOverride
-  );
-  const showTitle = !!parsed.title && !parsed.options.noTitle;
-  const hasLegend = parsed.tagGroups.length > 0 && activeGroup !== null && !parsed.options.noLegend;
-  const titleH = showTitle ? TITLE_AREA : 0;
-  const legendH = hasLegend ? LEGEND_BAND : 0;
-  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)
@@ -447,10 +390,10 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
     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 contentH2 = spineY2 + belowExt + BOT_PAD;
-    const totalH2 = exportMode ? contentH2 : Math.max(heightHint, contentH2);
-    return { contentW: contentW2, contentH: contentH2, totalH: totalH2, spineY: spineY2, eraBaseY: eraBaseY2, laneNear: laneNear2 };
+    const eraBaseY = eraSide === "above" ? spineY2 - (contentAbove + 14) : spineY2 + (contentBelow + 14);
+    const contentH = spineY2 + belowExt + BOT_PAD;
+    const totalH2 = exportMode ? contentH : Math.max(heightHint, contentH);
+    return { contentW: contentW2, contentH, totalH: totalH2, spineY: spineY2, eraBaseY, laneNear: laneNear2 };
   };
   const envStretch = Number(
     globalThis.process?.env?.["DGMO_EVT_STRETCH"]
@@ -483,7 +426,307 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       }
     }
   }
-  const { contentW, contentH, totalH, spineY, eraBaseY, laneNear } = layout;
+  const { contentW, totalH, spineY, laneNear } = layout;
+  const spine = layoutSpine(placed, scaled);
+  const cards = layoutCards(placed, spineY, laneNear, spine);
+  return {
+    header,
+    placed,
+    scaled,
+    hasEras,
+    eraSide,
+    eraByName,
+    ...layout,
+    cards,
+    spine,
+    eraBrackets: hasEras ? layoutEraBrackets(placed, eraByName, contentW) : [],
+    now: parsed.now && scaled ? layoutNowMarker(parsed, placed, cards, {
+      spineY,
+      contentW,
+      totalH,
+      topUsed,
+      nowDate
+    }) : null
+  };
+}
+var TITLE_AREA = 48;
+var LEGEND_BAND = 34;
+function layoutHeader(parsed, activeGroup, width, exportMode) {
+  const showTitle = !!parsed.title && !parsed.options.noTitle;
+  const hasLegend = parsed.tagGroups.length > 0 && activeGroup !== null && !parsed.options.noLegend;
+  const titleH = showTitle ? TITLE_AREA : 0;
+  const legendH = hasLegend ? LEGEND_BAND : 0;
+  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 placement = 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 = placement.inline ? titleH : titleH + legendH;
+  return { showTitle, hasLegend, titleH, topUsed, placement };
+}
+function eventTagHidden(metadata, hidden) {
+  if (hidden.size === 0) return false;
+  for (const [k, v] of Object.entries(metadata)) {
+    if (hidden.has(`${k.toLowerCase()}:${String(v).toLowerCase()}`))
+      return true;
+  }
+  return false;
+}
+function wrapDescription(lines, charsPerLine) {
+  return wrapDescriptionLines([...lines], charsPerLine);
+}
+function layoutSpine(placed, scaled) {
+  const x0 = Math.min(...placed.map((p) => p.x - p.spanHalf));
+  const x1 = Math.max(...placed.map((p) => p.x + p.spanHalf));
+  const left = x0 - 20;
+  const right = x1 + 20;
+  const dashed = scaled && placed.some((p) => p.future && !p.futureSpan);
+  const realRightX = placed.length ? Math.max(
+    left,
+    ...placed.filter((p) => !p.future).map((p) => p.x + p.spanHalf)
+  ) : right;
+  return { left, right, solidRight: dashed ? realRightX : right, dashed };
+}
+function layoutCards(placed, spineY, laneNear, spine) {
+  const boxes = placed.map((p) => {
+    const near = p.side === "above" ? spineY - laneNear(p) : spineY + laneNear(p);
+    const top = p.side === "above" ? near - p.cardH : near;
+    return { p, near, top };
+  });
+  const leaderCrossesBox = (owner, near) => {
+    const lo = Math.min(spineY, near);
+    const hi = Math.max(spineY, near);
+    return boxes.some(
+      (g) => g.p !== owner && owner.x > g.p.left && owner.x < g.p.left + CARD_W && hi > g.top && lo < g.top + g.p.cardH
+    );
+  };
+  const eraBarY = (p) => spineY + ERA_LEG * (p.side === "above" ? -1 : 1);
+  return boxes.map(({ p, near, top }) => {
+    let eraBar = null;
+    if (p.kind === "era") {
+      const half = Math.max(16, p.spanHalf);
+      eraBar = {
+        x0: Math.max(spine.left, p.x - half),
+        x1: Math.min(spine.right, p.x + half),
+        y: eraBarY(p)
+      };
+    }
+    return {
+      p,
+      near,
+      top,
+      leaderFrom: p.kind === "era" ? eraBarY(p) : spineY,
+      leaderCrossesCard: leaderCrossesBox(p, near),
+      eraBar
+    };
+  });
+}
+function layoutEraBrackets(placed, eraByName, contentW) {
+  const runs = [];
+  let prevName = null;
+  for (const p of placed) {
+    const name = p.eraName;
+    if (name && eraByName.has(name)) {
+      if (prevName === name && runs.length > 0) {
+        const r = runs[runs.length - 1];
+        r.firstX = Math.min(r.firstX, p.x);
+        r.lastX = Math.max(r.lastX, p.x);
+      } else {
+        runs.push({
+          era: eraByName.get(name),
+          collapsed: p.kind === "era",
+          firstX: p.x,
+          lastX: p.x
+        });
+      }
+      prevName = name;
+    } else {
+      prevName = null;
+    }
+  }
+  const clampX = (v) => Math.max(4, Math.min(contentW - 4, v));
+  const drawn = runs.filter((r) => !r.collapsed).map((r) => ({
+    era: r.era,
+    firstX: r.firstX,
+    lastX: r.lastX,
+    x0: clampX(r.firstX - ERA_BRACKET_PAD),
+    x1: clampX(r.lastX + ERA_BRACKET_PAD)
+  })).sort((a, b) => a.firstX - b.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.lastX + cur.firstX) / 2;
+    prev.x1 = Math.max(prev.lastX, Math.min(prev.x1, mid - ERA_SEAM_GAP));
+    cur.x0 = Math.min(cur.firstX, Math.max(cur.x0, mid + ERA_SEAM_GAP));
+  }
+  return drawn;
+}
+function layoutNowMarker(parsed, placed, cards, frame) {
+  const now = parsed.now;
+  const { spineY, contentW, totalH, topUsed } = frame;
+  let nowValue = now.dateValue;
+  let nowIso = now.date;
+  if (now.computed) {
+    const d = frame.nowDate ?? /* @__PURE__ */ new Date();
+    const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    nowIso = iso;
+    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) return null;
+  const label = now.label ?? (nowIso ? formatDateLabel(nowIso) : "now");
+  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 = cards.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;
+  return {
+    x: nowX,
+    label,
+    pillW,
+    pillH,
+    pillCX: Math.max(pillW / 2 + 2, Math.min(nowX, contentW - pillW / 2 - 2)),
+    y0: slot.y0,
+    y1: slot.y1,
+    stemFrom: above ? spineY - DOT_R : spineY + DOT_R,
+    stemTo: above ? slot.y1 : slot.y0
+  };
+}
+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;
+}
+
+// src/event-line/renderer.ts
+var CARD_BODY_TOP = HEADER_HEIGHT + SEPARATOR_GAP;
+var DATE_SUBTITLE_FONT = 10;
+var SHELF_TINT = 13;
+var SHELF_EDGE = 4;
+var SHELF_EDGE_STYLE = "spine";
+var SHELF_LIP = 2;
+var ERA_BRACKET_CAP = 8;
+var BREAK_HALF_H = 6;
+var BREAK_AMP = 2.6;
+var BREAK_GAP = 5;
+var ERA_LABEL_FONT = 11.5;
+var HL = "dgmo-evt-hl";
+var DIM = "dgmo-evt-dim";
+var ERA_HL = "dgmo-evt-era-hl";
+var COLLAPSED = "dgmo-evt-collapsed";
+var OFF = "dgmo-evt-off";
+var HIDDEN_ATTR = "data-evt-hidden";
+var HOVER_CSS = `.dgmo-event-dot{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era{transition:opacity .12s ease,filter .12s ease}.dgmo-event-dot,.dgmo-event-card,.dgmo-event-era{cursor:default}[data-legend-entry]{cursor:pointer}.${DIM}{opacity:.2}.dgmo-event-dot.${HL}{transform:scale(1.55)}.dgmo-event-leader.${HL}{stroke-opacity:1;stroke-width:2.5}.dgmo-event-card.${HL}{filter:drop-shadow(0 2px 5px rgba(0,0,0,.22))}.dgmo-event-era.${ERA_HL}{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.dgmo-event-card.${COLLAPSED},.dgmo-event-leader.${COLLAPSED}{opacity:0;pointer-events:none}.dgmo-event-card.${COLLAPSED}.${HL},.dgmo-event-leader.${COLLAPSED}.${HL}{opacity:1;pointer-events:auto}[data-legend-entry].${OFF} text{opacity:.5}`;
+function renderEventLine(container, parsed, palette, isDark, onClickItem, exportDims, tagOverride, nowDate) {
+  if (parsed.events.length === 0) return;
+  d3Selection.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const width = exportDims?.width ?? container.clientWidth;
+  const heightHint = exportDims?.height ?? container.clientHeight;
+  if (width <= 0 || heightHint <= 0) return;
+  const exportMode = !!exportDims;
+  const hiddenSet = exportMode ? /* @__PURE__ */ new Set() : readHidden(container);
+  const activeGroup = resolveActiveTagGroup(
+    parsed.tagGroups,
+    void 0,
+    tagOverride
+  );
+  const {
+    header: band,
+    hasEras,
+    eraSide,
+    contentW,
+    contentH,
+    totalH,
+    spineY,
+    eraBaseY,
+    cards,
+    spine,
+    eraBrackets,
+    now
+  } = layoutEventLine(parsed, palette, isDark, {
+    width,
+    heightHint,
+    exportMode,
+    hiddenSet,
+    activeGroup,
+    nowDate
+  });
+  const { showTitle, hasLegend, titleH, topUsed, placement: header } = band;
   const svg = d3Selection.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);
   if (!exportMode && totalH > contentH) {
     svg.attr("data-content-height", Math.ceil(contentH));
@@ -525,43 +768,16 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
     });
     if (!exportMode) addLegendEntryHitAreas(legendG);
   }
-  const x0 = Math.min(...placed.map((p) => p.x - p.spanHalf));
-  const x1 = Math.max(...placed.map((p) => p.x + p.spanHalf));
-  const spineLeft = x0 - 20;
-  const spineRight = x1 + 20;
-  const hasTrailingFuture = scaled && placed.some((p) => p.future && !p.futureSpan);
-  const realRightX = placed.length ? Math.max(
-    spineLeft,
-    ...placed.filter((p) => !p.future).map((p) => p.x + p.spanHalf)
-  ) : spineRight;
-  const solidRight = hasTrailingFuture ? realRightX : spineRight;
-  svg.append("line").attr("x1", spineLeft).attr("y1", spineY).attr("x2", solidRight).attr("y2", spineY).attr("stroke", palette.text).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
-  if (hasTrailingFuture) {
-    svg.append("line").attr("x1", solidRight).attr("y1", spineY).attr("x2", spineRight).attr("y2", spineY).attr("stroke", palette.text).attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("stroke-opacity", 0.45).attr("stroke-dasharray", HAIRLINE_DASH);
+  svg.append("line").attr("x1", spine.left).attr("y1", spineY).attr("x2", spine.solidRight).attr("y2", spineY).attr("stroke", palette.text).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+  if (spine.dashed) {
+    svg.append("line").attr("x1", spine.solidRight).attr("y1", spineY).attr("x2", spine.right).attr("y2", spineY).attr("stroke", palette.text).attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("stroke-opacity", 0.45).attr("stroke-dasharray", HAIRLINE_DASH);
   }
-  const geo = placed.map((p) => {
-    const near = p.side === "above" ? spineY - laneNear(p) : spineY + laneNear(p);
-    const top = p.side === "above" ? near - p.cardH : near;
-    return { p, near, top };
-  });
-  const leaderCrossesBox = (owner, near) => {
-    const lo = Math.min(spineY, near);
-    const hi = Math.max(spineY, near);
-    return geo.some(
-      (g) => g.p !== owner && owner.x > g.p.left && owner.x < g.p.left + CARD_W && hi > g.top && lo < g.top + g.p.cardH
-    );
-  };
-  const eraBarY = (p) => spineY + ERA_LEG * (p.side === "above" ? -1 : 1);
-  for (const { p, near } of geo) {
-    const spineEnd = p.kind === "era" ? eraBarY(p) : spineY;
-    const leader = svg.append("line").attr("class", "dgmo-event-leader").attr("x1", p.x).attr("y1", spineEnd).attr("x2", p.x).attr("y2", near).attr("stroke", p.color).attr("stroke-width", 1.5).attr(
-      "stroke-opacity",
-      leaderCrossesBox(p, near) ? 0.18 : p.future ? 0.4 : 0.65
-    );
+  for (const { p, near, leaderFrom, leaderCrossesCard } of cards) {
+    const leader = svg.append("line").attr("class", "dgmo-event-leader").attr("x1", p.x).attr("y1", leaderFrom).attr("x2", p.x).attr("y2", near).attr("stroke", p.color).attr("stroke-width", 1.5).attr("stroke-opacity", leaderCrossesCard ? 0.18 : p.future ? 0.4 : 0.65);
     applyHoverHooks(leader, p);
   }
   let shelfClipSeq = 0;
-  for (const { p, top } of geo) {
+  for (const { p, top } of cards) {
     const left = p.left;
     const cardG = svg.append("g").attr("class", "dgmo-event-card").attr("transform", `translate(${left}, ${top})`).attr("data-line-number", p.lineNumber);
     applyHoverHooks(cardG, p);
@@ -659,15 +875,10 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       }
     }
   }
-  for (const p of placed) {
-    if (p.kind === "era") {
+  for (const { p, eraBar } of cards) {
+    if (eraBar) {
       const col = p.color;
-      const half = Math.max(16, p.spanHalf);
-      const spineLeft2 = x0 - 20;
-      const spineRight2 = x1 + 20;
-      const bx0 = Math.max(spineLeft2, p.x - half);
-      const bx1 = Math.min(spineRight2, p.x + half);
-      const barY = eraBarY(p);
+      const { x0: bx0, x1: bx1, y: barY } = eraBar;
       const eg = svg.append("g").attr("class", "dgmo-event-era").attr("data-era", p.era.name).attr("data-era-collapsed", "true").attr("data-line-number", p.lineNumber);
       if (onClickItem) {
         const hy0 = Math.min(barY, spineY) - 4;
@@ -693,52 +904,17 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
     applyHoverHooks(dot, p);
   }
   if (hasEras) {
-    const runs = [];
-    let prevName = null;
-    for (const p of placed) {
-      const name = p.eraName;
-      if (name && eraByName.has(name)) {
-        if (prevName === name && runs.length > 0) {
-          const r = runs[runs.length - 1];
-          r.firstX = Math.min(r.firstX, p.x);
-          r.lastX = Math.max(r.lastX, p.x);
-        } else {
-          runs.push({
-            era: eraByName.get(name),
-            collapsed: p.kind === "era",
-            firstX: p.x,
-            lastX: p.x
-          });
-        }
-        prevName = name;
-      } else {
-        prevName = null;
-      }
-    }
-    const clampX = (v) => Math.max(4, Math.min(contentW - 4, v));
     const cap = eraSide === "above" ? 1 : -1;
-    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) {
+    for (const r of eraBrackets) {
+      const { x0, x1 } = r;
       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 y = eraBaseY;
-      const eg = svg.append("g").attr("class", "dgmo-event-era").attr("data-era", r.era.name).attr("data-era-collapsed", String(r.collapsed)).attr("data-line-number", r.era.lineNumber);
+      const eg = svg.append("g").attr("class", "dgmo-event-era").attr("data-era", r.era.name).attr("data-era-collapsed", "false").attr("data-line-number", r.era.lineNumber);
       eg.append("path").attr(
         "d",
-        `M${x02},${y + ERA_BRACKET_CAP * cap} L${x02},${y} L${x12},${y} L${x12},${y + ERA_BRACKET_CAP * cap}`
+        `M${x0},${y + ERA_BRACKET_CAP * cap} L${x0},${y} L${x1},${y} L${x1},${y + ERA_BRACKET_CAP * cap}`
       ).attr("fill", "none").attr("stroke", col).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("stroke-opacity", op);
       eg.append("text").attr("x", (r.firstX + r.lastX) / 2).attr("y", eraSide === "above" ? y - 6 : y + ERA_LABEL_FONT + 4).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", ERA_LABEL_FONT).attr("font-weight", "bold").attr("fill", col).attr("fill-opacity", neutral ? 0.85 : 1).text(r.era.name);
       if (onClickItem) {
@@ -747,110 +923,47 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       }
     }
   }
-  if (parsed.now && scaled) {
-    let nowValue = parsed.now.dateValue;
-    let nowIso = parsed.now.date;
-    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")}`;
-      nowIso = iso;
-      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 = parsed.now.color ? resolveColor(parsed.now.color, palette) ?? palette.destructive : 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 ?? (nowIso ? formatDateLabel(nowIso) : "now");
-      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", HAIRLINE_DASH).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", "bold").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", HAIRLINE_DASH).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 (parsed.now && now) {
+    const nowX = now.x;
+    const base = themeBaseBg(palette, isDark);
+    const nowColor = parsed.now.color ? resolveColor(parsed.now.color, palette) ?? palette.destructive : 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, pillW, pillH, pillCX, y0, stemFrom, stemTo } = now;
+    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", HAIRLINE_DASH).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", 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", y0 + pillH / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("font-weight", "bold").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", HAIRLINE_DASH).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)
+        );
       }
     }
   }
@@ -972,14 +1085,6 @@ function addLegendEntryHitAreas(legendG) {
     d3Selection.select(this).insert("rect", ":first-child").attr("x", bb.x - PAD_X).attr("y", bb.y - PAD_Y).attr("width", bb.width + PAD_X * 2).attr("height", bb.height + PAD_Y * 2).attr("fill", "transparent").attr("data-legend-hit", "");
   });
 }
-function eventTagHidden(metadata, hidden) {
-  if (hidden.size === 0) return false;
-  for (const [k, v] of Object.entries(metadata)) {
-    if (hidden.has(`${k.toLowerCase()}:${String(v).toLowerCase()}`))
-      return true;
-  }
-  return false;
-}
 function applyEvtHidden(container, root) {
   const hidden = readHidden(container);
   const isHidden = (el) => {
@@ -1092,23 +1197,6 @@ function renderEventLineForExport(container, parsed, palette, isDark, exportDims
     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;
@@ -1125,9 +1213,6 @@ function axisBreakPaths(cx, cy) {
   };
   return [wave(cx - BREAK_GAP / 2), wave(cx + BREAK_GAP / 2)];
 }
-function wrapDescription(lines, charsPerLine) {
-  return wrapDescriptionLines([...lines], charsPerLine);
-}
 function renderBody(cardG, lines, bodyColor, palette, startBaseline = CARD_BODY_TOP + DESC_FONT, bulletColors = [], bulletMeta = []) {
   let y = startBaseline;
   let bulletIdx = 0;