@diagrammo/dgmo 0.54.0 → 0.55.0

package/dist/{chunk-TJN2OIVG.js → chunk-PKUWYPI5.js}

@@ -16,10 +16,16 @@ import {
 } from "./chunk-BMR4CIEO.js";
 import {
   formatDateLabel
-} from "./chunk-4ZIKWVSQ.js";
+} from "./chunk-ZP265ICS.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
+import {
+  getLegendExtent
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -28,6 +34,9 @@ import {
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
+import {
+  parseTimelineDate
+} from "./chunk-ITXL2KU5.js";
 import {
   CHAR_WIDTH_RATIO,
   wrapTextToWidth
@@ -42,7 +51,7 @@ import {
 import {
   resolveActiveTagGroup,
   resolveTagColor
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   resolveColor
 } from "./chunk-ZKPPI6BF.js";
@@ -89,7 +98,7 @@ 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) {
+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;
@@ -108,7 +117,32 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   const hasLegend = parsed.tagGroups.length > 0 && activeGroup !== null && !parsed.options.noLegend;
   const titleH = showTitle ? TITLE_AREA : 0;
   const legendH = hasLegend ? LEGEND_BAND : 0;
-  const topUsed = titleH + legendH;
+  const inlineRequested = parsed.options.legendInline === true;
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: parsed.tagGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: exportMode ? "export" : "preview"
+    },
+    { activeGroup: activeGroup ?? null },
+    width
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: width,
+    titleBandHeight: titleH,
+    legendReserve: legendH,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const topUsed = header.inline ? titleH : titleH + legendH;
   const eraByName = new Map(parsed.eras.map((e) => [e.name, e]));
   const collapsedSet = new Set(
     parsed.eras.filter((e) => e.collapsed).map((e) => e.name)
@@ -451,14 +485,17 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
   }
   if (!exportMode) svg.append("style").text(HOVER_CSS);
   if (showTitle) {
-    const t = svg.append("text").attr("class", "chart-title").attr("x", contentW / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
+    const t = svg.append("text").attr("class", "chart-title").attr("x", header.inline ? header.titleX : contentW / 2).attr("y", TITLE_Y).attr("text-anchor", header.inline ? header.titleAnchor : "middle").attr("fill", palette.text).attr("font-family", FONT_FAMILY).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("data-line-number", parsed.titleLineNumber ?? 1).text(parsed.title);
     if (onClickItem && parsed.titleLineNumber) {
       const ln = parsed.titleLineNumber;
       t.style("cursor", "pointer").on("click", () => onClickItem(ln));
     }
   }
   if (hasLegend) {
-    const legendG = svg.append("g").attr("transform", `translate(0, ${titleH})`);
+    const legendG = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleH})`
+    );
     const groups = parsed.tagGroups.map((g) => ({
       name: g.name,
       entries: g.entries.map((e) => ({
@@ -472,7 +509,14 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       isDark,
       width: contentW,
       mode: exportMode ? "export" : "preview",
-      activeGroup
+      activeGroup,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the header's right edge; stacked → centered below the title
+      // (== DEFAULT_POSITION, so the stacked output is byte-identical).
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      }
     });
     if (!exportMode) addLegendEntryHitAreas(legendG);
   }
@@ -698,6 +742,111 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
       }
     }
   }
+  if (parsed.now && scaled) {
+    let nowValue = parsed.now.dateValue;
+    if (parsed.now.computed) {
+      const d = nowDate ?? /* @__PURE__ */ new Date();
+      const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+      const v = parseTimelineDate(iso);
+      nowValue = Number.isFinite(v) ? v : null;
+    }
+    const dated = placed.filter((p) => p.kind !== "era" && !p.future && p.dateValue !== null).sort((a, b) => a.dateValue - b.dateValue);
+    let nowX = nowValue === null ? null : valueToSpineX(nowValue, dated);
+    const lastReal = dated[dated.length - 1];
+    if (nowX !== null && nowValue !== null && lastReal && nowValue > lastReal.dateValue) {
+      const trailing = placed.filter((p) => p.future && !p.futureSpan).map((p) => p.x);
+      if (trailing.length) nowX = Math.min(...trailing);
+    }
+    if (nowX !== null) {
+      const base = themeBaseBg(palette, isDark);
+      const nowColor = palette.destructive;
+      const fillMode = parsed.options.fillMode;
+      const pillFill = shapeFill(palette, nowColor, isDark, { mode: fillMode });
+      const pillStroke = fillMode === "solid" ? "none" : fillMode === "outline" ? nowColor : mix(nowColor, base, 55);
+      const pillStrokeW = fillMode === "solid" ? 0 : fillMode === "outline" ? 1.3 : 1;
+      const pillText = fillMode === "solid" ? contrastText(
+        pillFill,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      ) : nowColor;
+      const label = parsed.now.label;
+      const pillH = 18;
+      const pillW = Math.max(28, label.length * 6.6 + 16);
+      const PIN_GAP = 6;
+      const xHalf = pillW / 2 + 4;
+      const xLo = nowX - xHalf;
+      const xHi = nowX + xHalf;
+      const boxes = geo.map((g) => ({
+        side: g.p.side,
+        top: g.top,
+        bot: g.top + g.p.cardH,
+        left: g.p.left,
+        right: g.p.left + CARD_W
+      }));
+      const overlapsX = (b) => b.left < xHi && b.right > xLo;
+      const cands = [];
+      const addAbove = (pillBottom) => {
+        const y0 = pillBottom - pillH;
+        if (y0 > topUsed + 1)
+          cands.push({ y0, y1: pillBottom, stem: spineY - pillBottom });
+      };
+      const addBelow = (pillTop) => {
+        const y1 = pillTop + pillH;
+        if (y1 < totalH - 1)
+          cands.push({ y0: pillTop, y1, stem: pillTop - spineY });
+      };
+      addAbove(spineY - LEADER_ABOVE / 2 + pillH / 2);
+      addBelow(spineY + LEADER_BELOW / 2 - pillH / 2);
+      for (const b of boxes) {
+        if (!overlapsX(b)) continue;
+        if (b.side === "above") addAbove(b.top - PIN_GAP);
+        else addBelow(b.bot + PIN_GAP);
+      }
+      const isClear = (c) => !boxes.some((b) => overlapsX(b) && b.bot > c.y0 && b.top < c.y1);
+      const byStem = (a, b) => a.stem - b.stem;
+      const slot = cands.filter(isClear).sort(byStem)[0] ?? cands.sort(byStem)[0] ?? {
+        y0: spineY - PIN_GAP - pillH,
+        y1: spineY - PIN_GAP,
+        stem: PIN_GAP + pillH
+      };
+      const above = slot.y1 <= spineY;
+      const stemFrom = above ? spineY - DOT_R : spineY + DOT_R;
+      const stemTo = above ? slot.y1 : slot.y0;
+      const pillCX = Math.max(
+        pillW / 2 + 2,
+        Math.min(nowX, contentW - pillW / 2 - 2)
+      );
+      const nowG = svg.append("g").attr("class", "evt-now").attr("data-now-x", nowX.toFixed(2));
+      const FADE_SPAN = Math.min(LEADER_ABOVE, LEADER_BELOW);
+      const ruleTop = spineY - FADE_SPAN;
+      const ruleBot = spineY + FADE_SPAN;
+      const gradId = `evt-now-fade-${nowX.toFixed(0)}`;
+      const grad = nowG.append("defs").append("linearGradient").attr("id", gradId).attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", ruleTop).attr("x2", 0).attr("y2", ruleBot);
+      grad.append("stop").attr("offset", "0%").attr("stop-color", nowColor).attr("stop-opacity", 0);
+      grad.append("stop").attr("offset", "50%").attr("stop-color", nowColor).attr("stop-opacity", 0.9);
+      grad.append("stop").attr("offset", "100%").attr("stop-color", nowColor).attr("stop-opacity", 0);
+      nowG.append("line").attr("x1", nowX).attr("y1", ruleTop).attr("x2", nowX).attr("y2", ruleBot).attr("stroke", `url(#${gradId})`).attr("stroke-width", 1.6).attr("stroke-dasharray", "1 4").attr("stroke-linecap", "round");
+      nowG.append("path").attr("d", `M${nowX} ${spineY - 5} l5 5 l-5 5 l-5 -5 z`).attr("fill", nowColor);
+      nowG.append("line").attr("x1", nowX).attr("y1", stemFrom).attr("x2", nowX).attr("y2", stemTo).attr("stroke", nowColor).attr("stroke-width", 1.6);
+      nowG.append("rect").attr("x", pillCX - pillW / 2).attr("y", slot.y0).attr("width", pillW).attr("height", pillH).attr("rx", pillH / 2).attr("fill", pillFill).attr("stroke", pillStroke).attr("stroke-width", pillStrokeW);
+      nowG.append("text").attr("x", pillCX).attr("y", slot.y0 + pillH / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-family", FONT_FAMILY).attr("font-size", 10.5).attr("font-weight", 600).attr("fill", pillText).text(label);
+      if (!exportMode) {
+        const hoverRule = nowG.append("line").attr("class", "evt-now-rule-full").attr("x1", nowX).attr("y1", Math.max(topUsed, 2)).attr("x2", nowX).attr("y2", totalH - 2).attr("stroke", nowColor).attr("stroke-width", 1.4).attr("stroke-dasharray", "1 4").attr("stroke-linecap", "round").attr("opacity", 0).style("transition", "opacity 120ms ease").style("pointer-events", "none");
+        hoverRule.lower();
+        const nowNode = nowG.node();
+        if (nowNode) {
+          nowNode.addEventListener(
+            "mouseenter",
+            () => hoverRule.attr("opacity", 0.5)
+          );
+          nowNode.addEventListener(
+            "mouseleave",
+            () => hoverRule.attr("opacity", 0)
+          );
+        }
+      }
+    }
+  }
   if (!exportMode) {
     const root = svg.node();
     wireEventLineHover(root);
@@ -712,7 +861,8 @@ function renderEventLine(container, parsed, palette, isDark, onClickItem, export
           isDark,
           onClickItem,
           exportDims,
-          tagOverride
+          tagOverride,
+          nowDate
         )
       );
       applyEvtHidden(container, root);
@@ -922,7 +1072,7 @@ function wireEventLineHover(root) {
     if (!to || !root.contains(to)) applyEvtFocus(root, readPin(root));
   });
 }
-function renderEventLineForExport(container, parsed, palette, isDark, exportDims, tagOverride) {
+function renderEventLineForExport(container, parsed, palette, isDark, exportDims, tagOverride, nowDate) {
   renderEventLine(
     container,
     parsed,
@@ -930,9 +1080,27 @@ function renderEventLineForExport(container, parsed, palette, isDark, exportDims
     isDark,
     void 0,
     exportDims,
-    tagOverride
+    tagOverride,
+    nowDate
   );
 }
+function valueToSpineX(v, dated) {
+  if (!dated.length) return null;
+  const first = dated[0];
+  const last = dated[dated.length - 1];
+  if (v <= first.dateValue) return first.x;
+  if (v >= last.dateValue) return last.x;
+  for (let i = 0; i < dated.length - 1; i++) {
+    const a = dated[i];
+    const b = dated[i + 1];
+    if (v >= a.dateValue && v <= b.dateValue) {
+      const span = b.dateValue - a.dateValue;
+      if (span <= 0) return a.x;
+      return a.x + (v - a.dateValue) / span * (b.x - a.x);
+    }
+  }
+  return last.x;
+}
 function axisBreakPaths(cx, cy) {
   const HUMPS = 2;
   const STEPS = 48;
@@ -997,4 +1165,4 @@ export {
   focusEventLine,
   renderEventLineForExport
 };
-//# sourceMappingURL=chunk-TJN2OIVG.js.map
+//# sourceMappingURL=chunk-PKUWYPI5.js.map

package/dist/{chunk-W6PCFRPL.js → chunk-PSIDVCBA.js}

@@ -5,7 +5,7 @@ import {
   splitNameAndMeta,
   tryParseSharedOption,
   warnUnknownMetaKeys
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 import {
   RECOGNIZED_COLOR_NAMES,
   resolveColor
@@ -165,4 +165,4 @@ function parseRing(content) {
 export {
   parseRing
 };
-//# sourceMappingURL=chunk-W6PCFRPL.js.map
+//# sourceMappingURL=chunk-PSIDVCBA.js.map

package/dist/{chunk-RIEAN4D5.js → chunk-PV7ND5WL.js}

@@ -12,12 +12,16 @@ import {
   NODE_STROKE_WIDTH,
   SEPARATOR_GAP
 } from "./chunk-3CIOJ5YJ.js";
+import {
+  layoutInlineHeader
+} from "./chunk-US3P2DQO.js";
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
 import {
+  getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-J7HQPVYH.js";
+} from "./chunk-GRXPFBYC.js";
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -44,11 +48,12 @@ import {
 import {
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   fillModeFromOptions,
+  legendInlineRequested,
   legendSuppressed
-} from "./chunk-3FRO35WW.js";
+} from "./chunk-A2ARDILY.js";
 import {
   resolveColor
 } from "./chunk-ZKPPI6BF.js";
@@ -116,7 +121,33 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
   const contentH = layout.height;
   const W = opts.fit?.width ?? opts.exportDims?.width ?? contentW + PAD * 2;
   const legendReserve = hasLegend ? getMaxLegendReservedHeight(legendConfig, W) + LEGEND_GROUP_GAP : 0;
-  const chrome = titleReserve + legendReserve;
+  const inlineRequested = legendInlineRequested(parsed.options);
+  const legendExtent = inlineRequested && hasLegend ? getLegendExtent(
+    {
+      groups: legendGroups,
+      position: {
+        placement: "top-center",
+        titleRelation: "inline-with-title"
+      },
+      mode: opts.exportMode ? "export" : "preview",
+      showInactivePills: true
+    },
+    { activeGroup: activeTagGroup },
+    W
+  ) : { width: 0, height: 0 };
+  const header = layoutInlineHeader({
+    requested: inlineRequested,
+    title: parsed.title ?? "",
+    hasLegend,
+    legendWidth: legendExtent.width,
+    legendHeight: legendExtent.height,
+    containerWidth: W,
+    titleBandHeight: titleReserve,
+    legendReserve,
+    titleBaselineY: TITLE_Y,
+    titleFontSize: TITLE_FONT_SIZE
+  });
+  const chrome = titleReserve + (header.inline ? 0 : legendReserve);
   let scale = 1;
   let H;
   if (opts.fit) {
@@ -133,12 +164,21 @@ function renderFamilyForExport(container, parsed, layout, palette, isDark, opts
     ".family-focus-icon{opacity:0;transition:opacity .15s ease;pointer-events:none}.family-card:hover .family-focus-icon{opacity:.6;pointer-events:all}.family-focus-icon:hover{opacity:1}"
   );
   if (parsed.title) {
-    svg.append("text").attr("x", W / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
+    svg.append("text").attr("class", "chart-title").attr("x", header.titleX).attr("y", TITLE_Y).attr("text-anchor", header.titleAnchor).attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).text(parsed.title);
   }
   if (hasLegend) {
-    const legendParent = svg.append("g").attr("transform", `translate(0, ${titleReserve})`);
+    const legendParent = svg.append("g").attr(
+      "transform",
+      header.inline ? `translate(${header.legendX}, ${header.legendY})` : `translate(0, ${titleReserve})`
+    );
     renderIntegratedLegend(legendParent, {
       ...legendConfig,
+      // Inline → left-origin so the wrapper's right-flush translate lands the
+      // legend at the chart's right edge; stacked → centered below the title.
+      position: {
+        placement: "top-center",
+        titleRelation: header.inline ? "inline-with-title" : "below-title"
+      },
       palette,
       isDark,
       width: W,
@@ -277,4 +317,4 @@ export {
   renderFamilyForExport,
   renderFamily
 };
-//# sourceMappingURL=chunk-RIEAN4D5.js.map
+//# sourceMappingURL=chunk-PV7ND5WL.js.map

package/dist/{chunk-7K6NDSXH.js → chunk-Q5CMQVWF.js}

@@ -1,6 +1,6 @@
 import {
   renderIntegratedLegend
-} from "./chunk-2NZOHEP4.js";
+} from "./chunk-ASPS5O6F.js";
 import {
   FONT_FAMILY
 } from "./chunk-6KFWC4CO.js";
@@ -18,7 +18,7 @@ import {
   resolveActiveTagGroup,
   resolveTagColor,
   tagAttrKey
-} from "./chunk-AHTTKERF.js";
+} from "./chunk-JR7Q6GHE.js";
 import {
   resolveColor
 } from "./chunk-ZKPPI6BF.js";
@@ -334,4 +334,4 @@ export {
   renderBody,
   renderBodyForExport
 };
-//# sourceMappingURL=chunk-7K6NDSXH.js.map
+//# sourceMappingURL=chunk-Q5CMQVWF.js.map