@diagrammo/dgmo 0.46.0 → 0.48.0

package/dist/chunk-ZGR7ULFJ.js

@@ -0,0 +1,978 @@
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  wrapDescriptionLines
+} from "./chunk-BMR4CIEO.js";
+import {
+  renderNodeCard
+} from "./chunk-VOKGH627.js";
+import {
+  CARD_RADIUS,
+  HEADER_HEIGHT,
+  LABEL_FONT_SIZE,
+  NODE_STROKE_WIDTH,
+  SEPARATOR_GAP
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  formatDateLabel
+} from "./chunk-UWN33VNX.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  TITLE_Y
+} from "./chunk-A4GOY3PE.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  CHAR_WIDTH_RATIO
+} from "./chunk-WCT3NYCV.js";
+import {
+  contrastText,
+  getSeriesColors,
+  mix,
+  shapeFill,
+  themeBaseBg
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveActiveTagGroup,
+  resolveTagColor
+} from "./chunk-QLCCJEJI.js";
+import {
+  resolveColor
+} from "./chunk-TLVIHFRO.js";
+
+// src/event-line/renderer.ts
+import * as d3Selection from "d3-selection";
+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 DOT_R = 5.5;
+var MIN_SPACING = 96;
+var LANE_GAP = 16;
+var NEUTRAL_TAG = "#999999";
+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 ERA_BLOCK = 30;
+var ERA_BRACKET_CAP = 8;
+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) {
+  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 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 topUsed = 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)
+  );
+  const hasEras = parsed.events.some((e) => e.era && eraByName.has(e.era));
+  const hasExpandedEra = parsed.events.some(
+    (e) => e.era && eraByName.has(e.era) && !collapsedSet.has(e.era)
+  );
+  const sideOpt = parsed.options.side;
+  const alternate = sideOpt === "alternate";
+  const eraSide = alternate ? "below" : sideOpt === "above" ? "below" : "above";
+  const slots = [];
+  const emitted = /* @__PURE__ */ new Set();
+  for (const event of parsed.events) {
+    const name = event.era;
+    if (name && collapsedSet.has(name)) {
+      if (!emitted.has(name)) {
+        emitted.add(name);
+        slots.push({
+          kind: "era",
+          era: eraByName.get(name),
+          members: parsed.events.filter((e) => e.era === name)
+        });
+      }
+    } else {
+      slots.push({ kind: "event", event });
+    }
+  }
+  const charsPerLine = Math.max(
+    8,
+    Math.floor((CARD_W - CARD_PAD * 2) / (DESC_FONT * CHAR_WIDTH_RATIO))
+  );
+  const cardHeight = (lines, hasDate) => HEADER_HEIGHT + (hasDate ? DATE_SUBTITLE_H : 0) + (lines.length > 0 ? SEPARATOR_GAP + lines.length * DESC_LINE_H : 0) + (lines.length > 0 ? CARD_PAD : 6);
+  const eventColor = (ev) => {
+    if (!activeGroup) return accent;
+    const tc = resolveTagColor(
+      ev.metadata,
+      parsed.tagGroups,
+      activeGroup
+    );
+    return tc && tc !== NEUTRAL_TAG ? resolveColor(tc, palette) ?? tc : accent;
+  };
+  let evIdx = 0;
+  const placed = slots.map((slot) => {
+    const side = alternate ? evIdx++ % 2 === 0 ? "above" : "below" : sideOpt;
+    if (slot.kind === "event") {
+      const event = slot.event;
+      const solid2 = eventColor(event);
+      const cardFill2 = shapeFill(palette, solid2, isDark, { solid: false });
+      const titleColor2 = contrastText(
+        cardFill2,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      );
+      const lines2 = wrapDescription(event.description, charsPerLine);
+      return {
+        kind: "event",
+        event,
+        era: null,
+        members: [],
+        label: event.label,
+        date: event.date,
+        dateValue: event.dateValue,
+        future: event.future,
+        futureSpan: event.futureSpan,
+        lineNumber: event.lineNumber,
+        eraName: event.era,
+        color: solid2,
+        cardFill: cardFill2,
+        titleColor: titleColor2,
+        lines: lines2,
+        bulletColors: [],
+        bulletMeta: [],
+        cardH: cardHeight(lines2, !!event.date),
+        x: 0,
+        side,
+        lane: 0,
+        left: 0,
+        spanHalf: 0
+      };
+    }
+    const era = slot.era;
+    const memberColors = slot.members.map(eventColor);
+    const uniformTag = activeGroup != null && memberColors.length > 0 && memberColors.every((c) => c === memberColors[0]) && memberColors[0] !== accent;
+    const solid = era.color ? resolveColor(era.color, palette) ?? palette.text : uniformTag ? memberColors[0] : palette.text;
+    const cardFill = mix(solid, themeBaseBg(palette, isDark), 10);
+    const titleColor = contrastText(
+      cardFill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    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 visibleMembers = slot.members.filter(
+      (m) => !eventTagHidden(m.metadata, hiddenSet)
+    );
+    const memberStrs = visibleMembers.map(
+      (m) => `\u2022 ${m.date ? `${m.future ? "TBD" : formatDateLabel(m.date)}  ` : ""}${m.label}`
+    );
+    const bulletColors = visibleMembers.map(eventColor);
+    const bulletMeta = visibleMembers.map((m) => m.metadata);
+    const lines = wrapDescription(memberStrs, charsPerLine);
+    return {
+      kind: "era",
+      event: null,
+      era,
+      members: slot.members,
+      label: era.name,
+      date: null,
+      dateValue: repDateValue,
+      future: false,
+      futureSpan: null,
+      lineNumber: era.lineNumber,
+      eraName: era.name,
+      color: solid,
+      cardFill,
+      titleColor,
+      lines,
+      bulletColors,
+      bulletMeta,
+      cardH: cardHeight(lines, false),
+      x: 0,
+      side,
+      lane: 0,
+      left: 0,
+      spanHalf: 0
+    };
+  });
+  const scaled = parsed.options.scale && placed.every((p) => p.dateValue !== null);
+  const innerW = width - H_MARGIN * 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)
+    });
+    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;
+      const eraCardRight = {
+        above: -Infinity,
+        below: -Infinity
+      };
+      let cursor = H_MARGIN;
+      for (const seg of segments) {
+        if (seg.kind === "capsule") {
+          let x = cursor + COLLAPSE_W / 2;
+          const minX = Math.max(
+            CARD_W / 2 + 6,
+            // keep the centered card on-canvas (left ≥ 6)
+            eraCardRight[seg.p.side] + FAN_GAP + CARD_W / 2
+            // clear prior same-side card
+          );
+          if (x < minX) {
+            cursor += minX - x;
+            x = minX;
+          }
+          seg.p.x = x;
+          seg.p.spanHalf = COLLAPSE_W / 2;
+          eraCardRight[seg.p.side] = x + CARD_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;
+      });
+    }
+    if (scaled) {
+      const SPREAD = CARD_W + FAN_GAP;
+      for (let iter = 0; iter < 8; iter++) {
+        let moved = false;
+        for (const side of ["above", "below"]) {
+          const obs = placed.filter((p) => p.side === side).sort((a, b) => a.x - b.x);
+          for (let i = 1; i < obs.length; i++) {
+            const p = obs[i];
+            if (p.kind !== "event") continue;
+            const prev = obs[i - 1];
+            if (prev.kind === "event" && p.dateValue === prev.dateValue)
+              continue;
+            const need = prev.x + SPREAD;
+            if (need <= p.x) continue;
+            const nxt = obs[i + 1];
+            const cap = nxt?.kind === "era" ? nxt.x - SPREAD : Infinity;
+            const target = Math.min(need, cap);
+            if (target > p.x + 0.5) {
+              p.x = target;
+              moved = true;
+            }
+          }
+        }
+        if (!moved) break;
+      }
+    }
+    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 = p.kind !== "era" && !!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 contentAbove = ext("above");
+    const contentBelow = ext("below");
+    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 = exportMode ? contentH : 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 {
+    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();
+      }
+    }
+  }
+  const { contentW, totalH, spineY, eraBaseY, laneNear } = layout;
+  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) svg.append("style").text(HOVER_CSS);
+  if (showTitle) {
+    const t = svg.append("text").attr("class", "chart-title").attr("x", contentW / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
+    if (onClickItem && parsed.titleLineNumber) {
+      const ln = parsed.titleLineNumber;
+      t.style("cursor", "pointer").on("click", () => onClickItem(ln));
+    }
+  }
+  if (hasLegend) {
+    const legendG = svg.append("g").attr("transform", `translate(0, ${titleH})`);
+    const groups = parsed.tagGroups.map((g) => ({
+      name: g.name,
+      entries: g.entries.map((e) => ({
+        value: e.value,
+        color: resolveColor(e.color, palette) ?? e.color
+      }))
+    }));
+    renderIntegratedLegend(legendG, {
+      groups,
+      palette,
+      isDark,
+      width: contentW,
+      mode: exportMode ? "export" : "preview",
+      activeGroup
+    });
+    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", "2 6");
+  }
+  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
+    );
+    applyHoverHooks(leader, p);
+  }
+  let shelfClipSeq = 0;
+  for (const { p, top } of geo) {
+    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);
+    if (p.kind === "era") {
+      cardG.attr("data-era", p.era.name).attr("data-era-collapsed", "true");
+    }
+    if (onClickItem) {
+      const ln = p.lineNumber;
+      cardG.style("cursor", "pointer").on("click", () => onClickItem(ln));
+      cardG.append("rect").attr("x", 0).attr("y", 0).attr("width", CARD_W).attr("height", p.cardH).attr("fill", "transparent").attr("pointer-events", "all");
+    }
+    const dateStr = p.kind === "event" && p.date ? p.future ? "TBD" : formatDateLabel(p.date) : null;
+    const dateH = dateStr ? DATE_SUBTITLE_H : 0;
+    if (parsed.options.noBox) {
+      const titleNearTop = p.side === "below";
+      const headBandTop = titleNearTop ? 0 : p.cardH - HEADER_HEIGHT;
+      const shelfTop = titleNearTop ? 0 : p.cardH - HEADER_HEIGHT - dateH;
+      const shelfH = HEADER_HEIGHT + dateH;
+      const clipId = `dgmo-evt-shelf-${shelfClipSeq++}`;
+      cardG.append("clipPath").attr("id", clipId).append("rect").attr("x", 0).attr("y", shelfTop).attr("width", CARD_W).attr("height", shelfH).attr("rx", SHELF_EDGE);
+      cardG.append("rect").attr("x", 0).attr("y", shelfTop).attr("width", CARD_W).attr("height", shelfH).attr("clip-path", `url(#${clipId})`).attr("fill", mix(p.color, themeBaseBg(palette, isDark), SHELF_TINT));
+      const edgeY = titleNearTop ? shelfTop : shelfTop + shelfH - SHELF_EDGE;
+      cardG.append("rect").attr("x", 0).attr("y", edgeY).attr("width", CARD_W).attr("height", SHELF_EDGE).attr("clip-path", `url(#${clipId})`).attr("fill", p.color).attr("fill-opacity", p.future ? 0.4 : 1);
+      cardG.append("text").attr("x", CARD_PAD).attr("y", headBandTop + HEADER_HEIGHT / 2 + LABEL_FONT_SIZE / 2 - 2).attr("fill", p.color).attr("font-family", FONT_FAMILY).attr("font-size", LABEL_FONT_SIZE).attr("font-weight", 700).text(p.label);
+      if (dateStr) {
+        cardG.append("text").attr("x", CARD_PAD).attr(
+          "y",
+          (titleNearTop ? HEADER_HEIGHT : headBandTop - dateH) + DATE_SUBTITLE_FONT + 2
+        ).attr("fill", mix(palette.text, palette.bg, 55)).attr("font-family", FONT_FAMILY).attr("font-size", DATE_SUBTITLE_FONT).attr("font-weight", 600).text(dateStr);
+      }
+      if (p.lines.length > 0) {
+        const startBaseline = titleNearTop ? CARD_BODY_TOP + dateH + DESC_FONT : CARD_PAD + DESC_FONT;
+        renderBody(
+          cardG,
+          p.lines,
+          palette.text,
+          palette,
+          startBaseline,
+          p.bulletColors,
+          p.bulletMeta
+        );
+      }
+    } else {
+      renderNodeCard(cardG, {
+        width: CARD_W,
+        height: p.cardH,
+        rx: CARD_RADIUS,
+        fill: p.cardFill,
+        stroke: p.color,
+        strokeWidth: NODE_STROKE_WIDTH,
+        label: p.label,
+        labelColor: p.titleColor,
+        labelFontSize: LABEL_FONT_SIZE,
+        headerHeight: HEADER_HEIGHT
+      });
+      if (dateStr) {
+        cardG.append("text").attr("x", CARD_W / 2).attr("y", HEADER_HEIGHT + DATE_SUBTITLE_FONT + 1).attr("text-anchor", "middle").attr("fill", mix(p.titleColor, p.cardFill, 60)).attr("font-family", FONT_FAMILY).attr("font-size", DATE_SUBTITLE_FONT).attr("font-weight", 600).text(dateStr);
+      }
+      if (p.lines.length > 0) {
+        cardG.append("line").attr("x1", 0).attr("y1", HEADER_HEIGHT + dateH).attr("x2", CARD_W).attr("y2", HEADER_HEIGHT + dateH).attr("stroke", p.titleColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+        renderBody(
+          cardG,
+          p.lines,
+          p.titleColor,
+          palette,
+          CARD_BODY_TOP + dateH + DESC_FONT,
+          p.bulletColors,
+          p.bulletMeta
+        );
+      }
+    }
+  }
+  for (const p of placed) {
+    if (p.kind === "era") {
+      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 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;
+        const hy1 = Math.max(barY, spineY) + 8;
+        eg.append("rect").attr("x", bx0).attr("y", hy0).attr("width", bx1 - bx0).attr("height", hy1 - hy0).attr("fill", "transparent").attr("pointer-events", "all");
+      }
+      eg.append("path").attr(
+        "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", 5).attr("stroke-linecap", "butt");
+      for (const d of axisBreakPaths(breakCx, spineY)) {
+        eg.append("path").attr("d", d).attr("fill", "none").attr("stroke", palette.text).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+      }
+      if (onClickItem) {
+        const ln = p.lineNumber;
+        eg.style("cursor", "pointer").on("click", () => onClickItem(ln));
+      }
+      continue;
+    }
+    const dot = svg.append("circle").attr("class", "dgmo-event-dot").attr("cx", p.x).attr("cy", spineY).attr("r", DOT_R).attr("fill", p.future ? palette.bg : p.color).attr("stroke", p.future ? p.color : palette.bg).attr("stroke-width", 2).attr("data-line-number", p.lineNumber);
+    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) {
+      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);
+      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}`
+      ).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", 700).attr("fill", col).attr("fill-opacity", neutral ? 0.85 : 1).text(r.era.name);
+      if (onClickItem) {
+        const ln = r.era.lineNumber;
+        eg.style("cursor", "pointer").on("click", () => onClickItem(ln));
+      }
+    }
+  }
+  if (!exportMode) {
+    const root = svg.node();
+    wireEventLineHover(root);
+    if (root) {
+      wireLegendToggle(
+        container,
+        root,
+        () => renderEventLine(
+          container,
+          parsed,
+          palette,
+          isDark,
+          onClickItem,
+          exportDims,
+          tagOverride
+        )
+      );
+      applyEvtHidden(container, root);
+    }
+  }
+}
+function applyHoverHooks(sel, p) {
+  sel.attr("data-evt", p.lineNumber);
+  if (p.eraName) sel.attr("data-evt-era", p.eraName);
+  if (p.event) {
+    for (const [k, v] of Object.entries(p.event.metadata)) {
+      sel.attr(`data-tag-${k.toLowerCase()}`, String(v).toLowerCase());
+    }
+  }
+}
+var DIMMABLE_SEL = ".dgmo-event-dot,.dgmo-event-leader,.dgmo-event-card,.dgmo-event-era";
+var PIN_ATTR = "data-evt-pin";
+function clearEvtFocus(root) {
+  root.querySelectorAll(`.${HL},.${DIM},.${ERA_HL}`).forEach((el) => el.classList.remove(HL, DIM, ERA_HL));
+}
+function applyEvtFocus(root, spec) {
+  clearEvtFocus(root);
+  if (!spec) return;
+  const els = [...root.querySelectorAll(DIMMABLE_SEL)];
+  if (spec.kind === "event") {
+    const keep = (el) => el.getAttribute("data-evt") === spec.id;
+    if (!els.some(keep)) return;
+    els.forEach((el) => el.classList.add(keep(el) ? HL : DIM));
+    return;
+  }
+  if (spec.kind === "era") {
+    const keep = (el) => el.getAttribute("data-evt-era") === spec.name || el.classList.contains("dgmo-event-era") && el.getAttribute("data-era") === spec.name;
+    if (!els.some(keep)) return;
+    els.forEach((el) => {
+      if (!keep(el)) el.classList.add(DIM);
+      else if (el.classList.contains("dgmo-event-era"))
+        el.classList.add(ERA_HL);
+    });
+    return;
+  }
+  const attr = `data-tag-${spec.group}`;
+  const matches = (el) => el.getAttribute(attr) === spec.value;
+  const bullets = [...root.querySelectorAll(".dgmo-evt-bullet")];
+  const litEras = /* @__PURE__ */ new Set();
+  for (const b of bullets) {
+    if (!matches(b)) continue;
+    const card = b.closest(".dgmo-event-card");
+    const era = card?.getAttribute("data-era") ?? card?.getAttribute("data-evt-era");
+    if (era) litEras.add(era);
+  }
+  if (!els.some(matches) && litEras.size === 0) return;
+  const inLitEra = (el) => {
+    const era = el.getAttribute("data-era") ?? el.getAttribute("data-evt-era");
+    return !!era && litEras.has(era);
+  };
+  els.forEach((el) => {
+    if (!matches(el) && !inLitEra(el)) el.classList.add(DIM);
+  });
+  for (const b of bullets) if (!matches(b)) b.classList.add(DIM);
+}
+function readPin(root) {
+  const raw = root.getAttribute(PIN_ATTR);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function clearEventLineMuted(container) {
+  container.removeAttribute(HIDDEN_ATTR);
+}
+function focusEventLine(container, spec) {
+  const root = container.querySelector("svg");
+  if (!root) return;
+  if (spec) root.setAttribute(PIN_ATTR, JSON.stringify(spec));
+  else root.removeAttribute(PIN_ATTR);
+  applyEvtFocus(root, spec);
+}
+function readHidden(el) {
+  const raw = el.getAttribute(HIDDEN_ATTR);
+  if (!raw) return /* @__PURE__ */ new Set();
+  try {
+    return new Set(JSON.parse(raw));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function addLegendEntryHitAreas(legendG) {
+  const PAD_X = 6;
+  const PAD_Y = 7;
+  legendG.selectAll("[data-legend-entry]").each(function() {
+    let bb;
+    try {
+      bb = this.getBBox();
+    } catch {
+      return;
+    }
+    if (!bb.width || !bb.height) return;
+    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) => {
+    for (const key of hidden) {
+      const sep = key.indexOf(":");
+      if (sep < 0) continue;
+      const group = key.slice(0, sep);
+      const value = key.slice(sep + 1);
+      if (el.getAttribute(`data-tag-${group}`) === value) return true;
+    }
+    return false;
+  };
+  root.querySelectorAll(".dgmo-event-card,.dgmo-event-leader").forEach((el) => el.classList.toggle(COLLAPSED, isHidden(el)));
+  root.querySelectorAll("[data-legend-entry]").forEach((entry) => {
+    const group = entry.closest("[data-legend-group]")?.getAttribute("data-legend-group");
+    const value = entry.getAttribute("data-legend-entry");
+    setLegendEntryOff(entry, !!group && hidden.has(`${group}:${value}`));
+  });
+}
+function setLegendEntryOff(entry, off) {
+  entry.classList.toggle(OFF, off);
+  const c = entry.querySelector("circle");
+  if (!c) return;
+  if (off) {
+    if (!c.hasAttribute("data-fill0"))
+      c.setAttribute("data-fill0", c.getAttribute("fill") ?? "");
+    c.setAttribute("fill", "none");
+    c.setAttribute("stroke", c.getAttribute("data-fill0") || "currentColor");
+    c.setAttribute("stroke-width", "1.5");
+  } else {
+    const fill0 = c.getAttribute("data-fill0");
+    if (fill0 !== null) c.setAttribute("fill", fill0);
+    c.removeAttribute("stroke");
+    c.removeAttribute("stroke-width");
+  }
+}
+function toggleHidden(container, group, value) {
+  const hidden = readHidden(container);
+  const key = `${group}:${value}`;
+  if (hidden.has(key)) hidden.delete(key);
+  else hidden.add(key);
+  container.setAttribute(HIDDEN_ATTR, JSON.stringify([...hidden]));
+}
+function wireLegendToggle(container, root, rerender) {
+  root.addEventListener("click", (e) => {
+    const t = e.target;
+    if (!t || typeof t.closest !== "function") return;
+    const entry = t.closest("[data-legend-entry]");
+    if (!entry) return;
+    const value = entry.getAttribute("data-legend-entry");
+    const group = entry.closest("[data-legend-group]")?.getAttribute("data-legend-group");
+    if (!group || !value) return;
+    toggleHidden(container, group, value);
+    const pin = readPin(root);
+    rerender();
+    if (pin) focusEventLine(container, pin);
+    if (typeof CustomEvent !== "undefined")
+      container.dispatchEvent(new CustomEvent("dgmo-event-line-rerender"));
+  });
+}
+function wireEventLineHover(root) {
+  if (!root) return;
+  root.addEventListener("mouseover", (e) => {
+    const t = e.target;
+    if (!t || typeof t.closest !== "function") return;
+    const entry = t.closest("[data-legend-entry]");
+    if (entry) {
+      const value = entry.getAttribute("data-legend-entry");
+      const group = entry.closest("[data-legend-group]")?.getAttribute("data-legend-group");
+      applyEvtFocus(
+        root,
+        group && value ? { kind: "tag", group, value } : readPin(root)
+      );
+      return;
+    }
+    const era = t.closest(".dgmo-event-era");
+    if (era) {
+      applyEvtFocus(root, {
+        kind: "era",
+        name: era.getAttribute("data-era") ?? ""
+      });
+      return;
+    }
+    const evt = t.closest("[data-evt]");
+    if (evt) {
+      const eraName = evt.getAttribute("data-era");
+      applyEvtFocus(
+        root,
+        eraName ? { kind: "era", name: eraName } : { kind: "event", id: evt.getAttribute("data-evt") ?? "" }
+      );
+      return;
+    }
+    applyEvtFocus(root, readPin(root));
+  });
+  root.addEventListener("mouseout", (e) => {
+    const to = e.relatedTarget;
+    if (!to || !root.contains(to)) applyEvtFocus(root, readPin(root));
+  });
+}
+function renderEventLineForExport(container, parsed, palette, isDark, exportDims, tagOverride) {
+  renderEventLine(
+    container,
+    parsed,
+    palette,
+    isDark,
+    void 0,
+    exportDims,
+    tagOverride
+  );
+}
+function axisBreakPaths(cx, cy) {
+  const HUMPS = 2;
+  const STEPS = 48;
+  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 line of lines) {
+    if (line === "") {
+      out.push({ text: "", kind: "plain" });
+      continue;
+    }
+    out.push(...wrapDescriptionLines([line], charsPerLine));
+  }
+  return out;
+}
+function renderBody(cardG, lines, bodyColor, palette, startBaseline = CARD_BODY_TOP + DESC_FONT, bulletColors = [], bulletMeta = []) {
+  let y = startBaseline;
+  let bulletIdx = 0;
+  let lineColor = bodyColor;
+  let lineMeta = null;
+  const tagBullet = (el) => {
+    if (!lineMeta) return;
+    el.attr("class", "dgmo-evt-bullet");
+    for (const [k, v] of Object.entries(lineMeta))
+      el.attr(`data-tag-${k.toLowerCase()}`, String(v).toLowerCase());
+  };
+  for (const line of lines) {
+    const isBullet = line.kind === "bullet-first" || line.kind === "bullet-cont";
+    const bodyX = CARD_PAD + (isBullet ? 12 : 0);
+    if (line.kind === "bullet-first") {
+      lineColor = bulletColors[bulletIdx] ?? bodyColor;
+      lineMeta = bulletMeta[bulletIdx] ?? null;
+      bulletIdx++;
+      const marker = cardG.append("text").attr("x", CARD_PAD).attr("y", y).attr("text-anchor", "start").attr("fill", lineColor).attr("font-family", FONT_FAMILY).attr("font-size", DESC_FONT).attr("font-weight", 700).text("\u2022");
+      tagBullet(marker);
+    } else if (!isBullet) {
+      lineColor = bodyColor;
+      lineMeta = null;
+    }
+    const t = cardG.append("text").attr("x", bodyX).attr("y", y).attr("text-anchor", "start").attr("fill", isBullet ? lineColor : bodyColor).attr("font-family", FONT_FAMILY).attr("font-size", DESC_FONT);
+    if (isBullet) tagBullet(t);
+    renderInlineText(t, line.text, palette);
+    y += DESC_LINE_H;
+  }
+}
+
+export {
+  renderEventLine,
+  clearEventLineMuted,
+  focusEventLine,
+  renderEventLineForExport
+};
+//# sourceMappingURL=chunk-ZGR7ULFJ.js.map