@diagrammo/dgmo 0.45.0 → 0.47.0

package/dist/chunk-ZJEL4H2R.js

@@ -0,0 +1,851 @@
+import {
+  TAG_STRIP_HEIGHT,
+  layoutJourneyMap,
+  scoreToColor,
+  scoreToCurveY
+} from "./chunk-3JLKYGBQ.js";
+import {
+  wrapNoteBody
+} from "./chunk-TYS6CSS5.js";
+import {
+  NOTE_BULLET_INDENT
+} from "./chunk-5DH3KYFH.js";
+import {
+  renderInlineText
+} from "./chunk-3HDBAXF5.js";
+import {
+  CARD_RADIUS
+} from "./chunk-3CIOJ5YJ.js";
+import {
+  renderIntegratedLegend
+} from "./chunk-PWIHZ6NJ.js";
+import {
+  ScaleContext
+} from "./chunk-YYVTBZZC.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  measureText,
+  truncateText,
+  wrapTextToWidth
+} from "./chunk-WCT3NYCV.js";
+import {
+  parseJourneyMap
+} from "./chunk-44CM72SQ.js";
+import {
+  contrastText,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  resolveActiveTagGroup,
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/journey-map/renderer.ts
+import * as d3 from "d3-selection";
+import * as d3Shape from "d3-shape";
+var DIAGRAM_PADDING = 20;
+var PADDING = DIAGRAM_PADDING;
+var CARD_PADDING_X = 10;
+var CARD_PADDING_Y = 6;
+var CARD_HEADER_HEIGHT = 24;
+var CARD_STROKE_WIDTH = 1.5;
+var CARD_META_LINE_HEIGHT = 14;
+var CARD_GAP_INTERNAL = 8;
+var COLUMN_RADIUS = 8;
+var COLUMN_HEADER_HEIGHT = 36;
+var COLUMN_PADDING = 12;
+var FONT_SIZE_TITLE = 18;
+var FONT_SIZE_PHASE = 13;
+var FONT_SIZE_STEP = 12;
+var FONT_SIZE_META = 10;
+var GRID_LINE_OPACITY = 0.15;
+var CURVE_STROKE_WIDTH = 2.5;
+var FACE_RADIUS = 14;
+var CURVE_AREA_BOTTOM_GAP = 28;
+var FACE_HOVER_SCALE = 1.5;
+var FACE_HOVER_R = (FACE_RADIUS + 1) * FACE_HOVER_SCALE;
+var DIM_HOVER = 0.25;
+var TITLE_LINE_HEIGHT = 16;
+function renderJourneyMap(container, parsed, palette, isDark, options) {
+  const exportDims = options?.exportDims;
+  const onNavigateToLine = options?.onNavigateToLine;
+  const activeTagGroup = options?.activeTagGroup ?? null;
+  const onActiveTagGroupChange = options?.onActiveTagGroupChange;
+  const collapsedPhases = options?.collapsedPhases ?? /* @__PURE__ */ new Set();
+  const onPhaseToggle = options?.onPhaseToggle;
+  const solid = parsed.options["solid-fill"] === "on";
+  const layout = layoutJourneyMap(parsed, palette, {
+    collapsedPhases,
+    ...exportDims !== void 0 && { exportDims },
+    isDark
+  });
+  container.innerHTML = "";
+  const containerW = exportDims?.width ?? container.clientWidth;
+  const containerH = exportDims?.height ?? container.clientHeight;
+  const useContainerFit = !exportDims && containerW > 0 && containerH > 0;
+  const sctx = exportDims ? ScaleContext.identity() : ScaleContext.from(containerW, layout.totalWidth);
+  const svg = d3.select(container).append("svg").attr("xmlns", "http://www.w3.org/2000/svg").attr(
+    "width",
+    useContainerFit ? containerW : exportDims?.width ?? layout.totalWidth
+  ).attr(
+    "height",
+    useContainerFit ? containerH : exportDims?.height ?? layout.totalHeight
+  ).attr("viewBox", `0 0 ${layout.totalWidth} ${layout.totalHeight}`).attr("preserveAspectRatio", "xMidYMin meet").attr("font-family", FONT_FAMILY);
+  if (sctx.isBelowFloor) {
+    svg.attr("width", "100%");
+  }
+  svg.append("rect").attr("width", layout.totalWidth).attr("height", layout.totalHeight).attr("fill", palette.bg);
+  const defs = svg.append("defs");
+  const curveGradient = defs.append("linearGradient").attr("id", "journey-curve-gradient").attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1");
+  curveGradient.append("stop").attr("offset", "0%").attr("stop-color", palette.colors.green).attr("stop-opacity", 0.3);
+  curveGradient.append("stop").attr("offset", "100%").attr("stop-color", palette.colors.red).attr("stop-opacity", 0.3);
+  const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
+  if (showTitle) {
+    const titleG = svg.append("g").attr("class", "chart-title");
+    if (parsed.titleLineNumber) {
+      titleG.attr("data-line-number", parsed.titleLineNumber);
+    }
+    titleG.append("text").attr("x", PADDING).attr("y", PADDING + FONT_SIZE_TITLE).attr("font-size", FONT_SIZE_TITLE).attr("font-weight", "bold").attr("fill", palette.text).text(parsed.title);
+    if (onNavigateToLine && parsed.titleLineNumber) {
+      titleG.style("cursor", "pointer").on("click", () => {
+        onNavigateToLine(parsed.titleLineNumber);
+      });
+    }
+  }
+  if (parsed.persona) {
+    const personaColor = parsed.persona.color ?? palette.textMuted;
+    const personaG = svg.append("g").attr("class", "journey-persona").attr("data-line-number", parsed.persona.lineNumber);
+    const titleRowH = CARD_HEADER_HEIGHT;
+    const silhouetteZone = 60;
+    const panelWidth = 280;
+    const textAreaWidth = panelWidth - silhouetteZone - CARD_PADDING_X;
+    const descLineH = 14;
+    const descLines = parsed.persona.description ? wrapNoteBody(parsed.persona.description, textAreaWidth, FONT_SIZE_META) : [];
+    const descRowH = descLines.length > 0 ? descLines.length * descLineH + 8 : 0;
+    const panelHeight = titleRowH + descRowH;
+    const panelX = layout.totalWidth - PADDING - panelWidth;
+    const panelY = PADDING;
+    const textX = panelX + CARD_PADDING_X;
+    const clipId = "persona-clip";
+    defs.append("clipPath").attr("id", clipId).append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS);
+    const personaFill = shapeFill(palette, personaColor, isDark, { solid });
+    const onPersonaText = contrastText(
+      personaFill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", personaFill);
+    if (descLines.length > 0) {
+      personaG.append("line").attr("x1", panelX + 1).attr("x2", panelX + panelWidth - silhouetteZone).attr("y1", panelY + titleRowH).attr("y2", panelY + titleRowH).attr("stroke", solid ? onPersonaText : personaColor).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+    }
+    const silX = panelX + panelWidth - 32;
+    const silY = panelY + panelHeight / 2 - 6;
+    const silClip = personaG.append("g").attr("clip-path", `url(#${clipId})`);
+    renderPersonaSilhouette(silClip, silX, silY, personaColor, palette, 1.2);
+    personaG.append("rect").attr("x", panelX).attr("y", panelY).attr("width", panelWidth).attr("height", panelHeight).attr("rx", CARD_RADIUS).attr("fill", "none").attr("stroke", personaColor).attr("stroke-width", CARD_STROKE_WIDTH);
+    personaG.append("text").attr("x", textX).attr("y", panelY + CARD_PADDING_Y + FONT_SIZE_STEP).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onPersonaText).text(parsed.persona.name);
+    for (let li = 0; li < descLines.length; li++) {
+      const line2 = descLines[li];
+      const indent = line2.kind === "plain" ? 0 : NOTE_BULLET_INDENT;
+      const lineY = panelY + titleRowH + descLineH * (li + 1);
+      if (line2.kind === "bullet-first") {
+        personaG.append("text").attr("x", textX).attr("y", lineY).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText).text("\u2022");
+      }
+      const lineEl = personaG.append("text").attr("x", textX + indent).attr("y", lineY).attr("font-size", FONT_SIZE_META).attr("fill", onPersonaText);
+      renderInlineText(lineEl, line2.text, palette, FONT_SIZE_META);
+    }
+    if (onNavigateToLine) {
+      personaG.style("cursor", "pointer").on("click", () => {
+        onNavigateToLine(parsed.persona.lineNumber);
+      });
+    }
+  }
+  const scoreGroup = {
+    name: "Score",
+    entries: [1, 2, 3, 4, 5].map((s) => ({
+      value: String(s),
+      color: scoreToColor(s, palette),
+      lineNumber: 0
+    })),
+    lineNumber: 0
+  };
+  const allLegendGroups = [...parsed.tagGroups, scoreGroup];
+  const effectiveActiveGroup = activeTagGroup ?? resolveActiveTagGroup(allLegendGroups, parsed.options["active-tag"]);
+  if (parsed.options["no-legend"] !== "on") {
+    const legendX = PADDING;
+    const legendY = PADDING + (showTitle ? FONT_SIZE_TITLE + 8 : 0);
+    const legendG = svg.append("g").attr("class", "journey-legend").attr("transform", `translate(${legendX},${legendY})`);
+    const legendCallbacks = {
+      ...onActiveTagGroupChange ? {
+        onGroupToggle: (groupName) => {
+          const isDeactivating = effectiveActiveGroup?.toLowerCase() === groupName.toLowerCase();
+          onActiveTagGroupChange(isDeactivating ? null : groupName);
+        }
+      } : {},
+      ...!exportDims ? {
+        onEntryHover: (groupName, entryValue) => {
+          if (!entryValue) {
+            svg.selectAll(".journey-step").style("opacity", null);
+            svg.selectAll(".journey-face").style("opacity", null);
+            svg.selectAll(".journey-face-icon").attr("transform", null);
+            svg.selectAll(".journey-thought").style("opacity", null);
+            return;
+          }
+          const isScore = groupName === "Score";
+          const attrName = isScore ? "data-score" : `data-tag-${tagAttrKey(groupName)}`;
+          const matches = (el) => el.getAttribute(attrName) === entryValue;
+          svg.selectAll(".journey-step").each(function() {
+            const hit = matches(this);
+            d3.select(this).style(
+              "opacity",
+              hit ? "1" : String(DIM_HOVER)
+            );
+          });
+          svg.selectAll(".journey-face").each(function() {
+            const hit = matches(this);
+            const sel = d3.select(this);
+            sel.style("opacity", hit ? "1" : String(DIM_HOVER));
+            const icon = sel.select(".journey-face-icon");
+            if (hit) {
+              const fcx = parseFloat(sel.attr("data-cx") ?? "0");
+              const fcy = parseFloat(sel.attr("data-cy") ?? "0");
+              icon.attr(
+                "transform",
+                `translate(${fcx},${fcy}) scale(1.3) translate(${-fcx},${-fcy})`
+              );
+            } else {
+              icon.attr("transform", null);
+            }
+          });
+          svg.selectAll(".journey-thought").style("opacity", String(DIM_HOVER));
+        }
+      } : {}
+    };
+    renderIntegratedLegend(legendG, {
+      groups: parsed.tagGroups,
+      activeGroup: effectiveActiveGroup,
+      mode: options?.exportMode ? "export" : "preview",
+      position: { placement: "top-center", titleRelation: "inline-with-title" },
+      titleWidth: 0,
+      callbacks: legendCallbacks,
+      palette,
+      isDark,
+      // Reduce available width if persona card exists to avoid collision
+      width: parsed.persona ? layout.totalWidth - legendX - PADDING - 280 - PADDING : layout.totalWidth - legendX - PADDING
+    });
+  }
+  const curveG = svg.append("g").attr("class", "journey-curve-area");
+  for (let score = 1; score <= 5; score++) {
+    const y = scoreToCurveY(score, layout.curveAreaBottom);
+    curveG.append("line").attr("x1", PADDING).attr("x2", layout.totalWidth - PADDING).attr("y1", y).attr("y2", y).attr("stroke", palette.textMuted).attr("stroke-opacity", GRID_LINE_OPACITY).attr("stroke-dasharray", "4,4");
+  }
+  if (layout.curvePoints.length >= 2) {
+    const first = layout.curvePoints[0];
+    const last = layout.curvePoints[layout.curvePoints.length - 1];
+    const extendedPoints = [
+      {
+        x: PADDING,
+        y: first.y,
+        score: first.score,
+        stepIndex: first.stepIndex
+      },
+      ...layout.curvePoints,
+      {
+        x: layout.totalWidth - PADDING,
+        y: last.y,
+        score: last.score,
+        stepIndex: last.stepIndex
+      }
+    ];
+    const areaBottomY = layout.curveAreaBottom + CURVE_AREA_BOTTOM_GAP;
+    const areaGen = d3Shape.area().x((d) => d.x).y0(areaBottomY).y1((d) => d.y).curve(d3Shape.curveMonotoneX);
+    curveG.append("path").attr("d", areaGen(extendedPoints) ?? "").attr("fill", "url(#journey-curve-gradient)").attr("stroke", "none");
+    const leftX = PADDING;
+    const rightX = layout.totalWidth - PADDING;
+    curveG.append("path").attr(
+      "d",
+      `M${leftX},${first.y} L${leftX},${areaBottomY} L${rightX},${areaBottomY} L${rightX},${last.y}`
+    ).attr("fill", "none").attr("stroke", palette.primary).attr("stroke-width", CURVE_STROKE_WIDTH).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+    const lineGen = d3Shape.line().x((d) => d.x).y((d) => d.y).curve(d3Shape.curveMonotoneX);
+    curveG.append("path").attr("d", lineGen(extendedPoints) ?? "").attr("fill", "none").attr("stroke", palette.primary).attr("stroke-width", CURVE_STROKE_WIDTH).attr("stroke-linecap", "round");
+    const allSteps = parsed.phases.length > 0 ? parsed.phases.flatMap((p) => p.steps) : parsed.steps;
+    for (const pt of layout.curvePoints) {
+      const step = allSteps[pt.stepIndex];
+      const faceG = renderScoreFace(
+        curveG,
+        pt.x,
+        pt.y,
+        pt.score,
+        palette,
+        isDark
+      );
+      addEmotionLabel(faceG, pt, palette);
+      if (step) {
+        faceG.attr("data-line-number", step.lineNumber);
+        faceG.attr("data-score", pt.score);
+        for (const [key, value] of Object.entries(step.tags)) {
+          faceG.attr(`data-tag-${key.toLowerCase()}`, value);
+        }
+        const thoughts = step.annotations.filter((a) => a.type === "thought");
+        if (thoughts.length > 0) {
+          faceG.attr(
+            "data-thought",
+            thoughts.map((t) => t.text).join(" \u2022 ")
+          );
+        }
+        if (onNavigateToLine) {
+          faceG.style("cursor", "pointer").on("click", () => {
+            onNavigateToLine(step.lineNumber);
+          });
+        }
+      }
+    }
+  } else if (layout.curvePoints.length === 1) {
+    const pt = layout.curvePoints[0];
+    const allSteps = parsed.phases.length > 0 ? parsed.phases.flatMap((p) => p.steps) : parsed.steps;
+    const step = allSteps[pt.stepIndex];
+    const faceG = renderScoreFace(
+      curveG,
+      pt.x,
+      pt.y,
+      pt.score,
+      palette,
+      isDark
+    );
+    addEmotionLabel(faceG, pt, palette);
+    if (step) {
+      faceG.attr("data-line-number", step.lineNumber);
+      faceG.attr("data-score", pt.score);
+      for (const [key, value] of Object.entries(step.tags)) {
+        faceG.attr(`data-tag-${key.toLowerCase()}`, value);
+      }
+      const thoughts = step.annotations.filter((a) => a.type === "thought");
+      if (thoughts.length > 0) {
+        faceG.attr(
+          "data-thought",
+          thoughts.map((t) => t.text).join(" \u2022 ")
+        );
+      }
+      if (onNavigateToLine) {
+        faceG.style("cursor", "pointer").on("click", () => {
+          onNavigateToLine(step.lineNumber);
+        });
+      }
+    }
+  }
+  const phasesG = svg.append("g").attr("class", "journey-phases");
+  if (layout.phases.length > 0) {
+    for (const pl of layout.phases) {
+      const isCollapsed = collapsedPhases.has(pl.phase.name);
+      const phaseG = phasesG.append("g").attr("class", "journey-phase").attr("data-line-number", pl.phase.lineNumber);
+      const colBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+      phaseG.append("rect").attr("x", pl.x).attr("y", pl.y).attr("width", pl.width).attr("height", pl.height).attr("rx", COLUMN_RADIUS).attr("fill", colBg);
+      phaseG.append("rect").attr("x", pl.x).attr("y", pl.y).attr("width", pl.width).attr("height", COLUMN_HEADER_HEIGHT).attr("rx", COLUMN_RADIUS).attr("fill", pl.headerColor);
+      phaseG.append("rect").attr("x", pl.x).attr("y", pl.y + COLUMN_HEADER_HEIGHT - COLUMN_RADIUS).attr("width", pl.width).attr("height", COLUMN_RADIUS).attr("fill", pl.headerColor);
+      const onHeaderText = contrastText(
+        pl.headerColor,
+        palette.textOnFillLight,
+        palette.textOnFillDark
+      );
+      phaseG.append("text").attr("x", pl.x + COLUMN_PADDING).attr("y", pl.y + COLUMN_HEADER_HEIGHT / 2 + FONT_SIZE_PHASE / 2 - 2).attr("font-size", FONT_SIZE_PHASE).attr("font-weight", "bold").attr("fill", onHeaderText).text(
+        isCollapsed ? truncateText2(
+          pl.phase.name,
+          pl.width - COLUMN_PADDING * 2,
+          FONT_SIZE_PHASE
+        ) : pl.phase.name
+      );
+      if (onPhaseToggle) {
+        phaseG.style("cursor", "pointer").on("click", (event) => {
+          const target = event.target;
+          if (!target.closest(".journey-step") && !target.closest(".journey-face")) {
+            onPhaseToggle(pl.phase.name);
+          }
+        });
+      } else if (onNavigateToLine) {
+        phaseG.style("cursor", "pointer").on("click", (event) => {
+          const target = event.target;
+          if (!target.closest(".journey-step")) {
+            onNavigateToLine(pl.phase.lineNumber);
+          }
+        });
+      }
+      if (isCollapsed) {
+        const COLLAPSED_CARD_H = 26;
+        const COLLAPSED_GAP = 6;
+        const COLLAPSED_FACE_R = 7;
+        const listX = pl.x + COLUMN_PADDING;
+        const cardW = pl.width - COLUMN_PADDING * 2;
+        let itemY = pl.y + COLUMN_HEADER_HEIGHT + CARD_GAP_INTERNAL + 4;
+        for (const step of pl.phase.steps) {
+          const itemG = phaseG.append("g").attr("class", "journey-step").attr("data-line-number", step.lineNumber);
+          if (step.score !== void 0) {
+            itemG.attr("data-score", step.score);
+          }
+          for (const [key, value] of Object.entries(step.tags)) {
+            itemG.attr(`data-tag-${key.toLowerCase()}`, value);
+          }
+          const stepColor = resolveStepColor(
+            step,
+            step.score !== void 0 ? scoreToColor(step.score, palette) : palette.surface,
+            effectiveActiveGroup,
+            parsed.tagGroups,
+            palette
+          );
+          const rowFill = shapeFill(
+            palette,
+            stepColor ?? palette.primary,
+            isDark,
+            { solid }
+          );
+          const rowStroke = stepColor ?? palette.textMuted;
+          itemG.append("rect").attr("x", listX).attr("y", itemY).attr("width", cardW).attr("height", COLLAPSED_CARD_H).attr("rx", CARD_RADIUS).attr("fill", rowFill).attr("stroke", rowStroke).attr("stroke-width", CARD_STROKE_WIDTH);
+          const faceCx = listX + CARD_PADDING_X + COLLAPSED_FACE_R;
+          const faceCy = itemY + COLLAPSED_CARD_H / 2;
+          if (step.score !== void 0) {
+            const faceG = renderScoreFace(
+              itemG,
+              faceCx,
+              faceCy,
+              step.score,
+              palette,
+              isDark,
+              COLLAPSED_FACE_R
+            );
+            faceG.attr("data-line-number", step.lineNumber);
+            faceG.attr("data-score", step.score);
+            for (const [key, value] of Object.entries(step.tags)) {
+              faceG.attr(`data-tag-${key.toLowerCase()}`, value);
+            }
+          }
+          const textX = listX + CARD_PADDING_X + COLLAPSED_FACE_R * 2 + 6;
+          const maxTextW = cardW - CARD_PADDING_X * 2 - COLLAPSED_FACE_R * 2 - 6;
+          itemG.append("text").attr("x", textX).attr("y", itemY + COLLAPSED_CARD_H / 2 + FONT_SIZE_META / 2 - 1).attr("font-size", FONT_SIZE_META).attr("fill", palette.text).text(truncateText2(step.title, maxTextW, FONT_SIZE_META));
+          if (onNavigateToLine) {
+            itemG.style("cursor", "pointer").on("click", (event) => {
+              event.stopPropagation();
+              onNavigateToLine(step.lineNumber);
+            });
+          }
+          itemY += COLLAPSED_CARD_H + COLLAPSED_GAP;
+        }
+      } else {
+        for (const sl of pl.stepLayouts) {
+          renderStepCard(
+            phaseG,
+            sl,
+            palette,
+            isDark,
+            effectiveActiveGroup,
+            parsed.tagGroups,
+            onNavigateToLine,
+            solid
+          );
+        }
+      }
+    }
+  } else {
+    for (const sl of layout.flatStepLayouts) {
+      renderStepCard(
+        phasesG,
+        sl,
+        palette,
+        isDark,
+        effectiveActiveGroup,
+        parsed.tagGroups,
+        onNavigateToLine,
+        solid
+      );
+    }
+  }
+  const overlayG = svg.append("g").attr("class", "journey-overlay");
+  if (!exportDims) {
+    const DIM_OPACITY = 0.35;
+    let lockedLine = null;
+    const applyDimming = (activeLine) => {
+      svg.selectAll(".journey-step").each(function() {
+        const el = d3.select(this);
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        el.style("opacity", ln === activeLine ? "1" : String(DIM_OPACITY));
+      });
+      svg.selectAll(".journey-face").each(function() {
+        const el = d3.select(this);
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        const isActive = ln === activeLine;
+        el.style("opacity", isActive ? "1" : String(DIM_OPACITY));
+        const icon = el.select(".journey-face-icon");
+        if (isActive) {
+          const fcx = parseFloat(el.attr("data-cx") ?? "0");
+          const fcy = parseFloat(el.attr("data-cy") ?? "0");
+          icon.attr(
+            "transform",
+            `translate(${fcx},${fcy}) scale(${FACE_HOVER_SCALE}) translate(${-fcx},${-fcy})`
+          );
+        } else {
+          icon.attr("transform", null);
+        }
+      });
+      svg.selectAll(".journey-phase").each(function() {
+        const el = d3.select(this);
+        const hasActive = el.select(
+          `.journey-step[data-line-number="${activeLine}"]`
+        );
+        if (!hasActive.node()) {
+          el.style("opacity", String(DIM_OPACITY + 0.3));
+        }
+      });
+    };
+    const clearDimming = () => {
+      svg.selectAll(".journey-step").style("opacity", null);
+      svg.selectAll(".journey-face").style("opacity", null);
+      svg.selectAll(".journey-face-icon").attr("transform", null);
+      svg.selectAll(".journey-phase").style("opacity", null);
+      overlayG.selectAll(".journey-thought-hover").remove();
+    };
+    const THOUGHT_FONT = 11;
+    const THOUGHT_PAD_X = 10;
+    const THOUGHT_PAD_Y = 6;
+    const THOUGHT_MAX_W = 200;
+    const THOUGHT_LINE_H = 14;
+    const THOUGHT_GAP = 10;
+    const showThoughtBubble = (faceEl) => {
+      overlayG.selectAll(".journey-thought-hover").remove();
+      const thoughtText = faceEl.attr("data-thought");
+      if (!thoughtText || !layout.hasThoughts) return;
+      const fcx = parseFloat(faceEl.attr("data-cx") ?? "0");
+      const fcy = parseFloat(faceEl.attr("data-cy") ?? "0");
+      const score = parseInt(faceEl.attr("data-score") ?? "3", 10);
+      const lines = wrapText(thoughtText, THOUGHT_MAX_W, THOUGHT_FONT);
+      const textW = Math.min(
+        THOUGHT_MAX_W,
+        Math.max(...lines.map((l) => measureText(l, THOUGHT_FONT)))
+      );
+      const bw = textW + THOUGHT_PAD_X * 2;
+      const bh = lines.length * THOUGHT_LINE_H + THOUGHT_PAD_Y * 2;
+      const bx = Math.max(
+        PADDING,
+        Math.min(fcx - bw / 2, layout.totalWidth - PADDING - bw)
+      );
+      const by = Math.max(PADDING, fcy - FACE_HOVER_R - THOUGHT_GAP - bh);
+      const scoreColor = scoreToColor(score, palette);
+      const tintedBg = mix(scoreColor, palette.surface, 20);
+      const g = overlayG.append("g").attr("class", "journey-thought-hover");
+      g.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", CARD_RADIUS).attr("fill", tintedBg).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
+      g.append("line").attr("x1", fcx).attr("y1", by + bh).attr("x2", fcx).attr("y2", fcy - FACE_HOVER_R - 1).attr("stroke", scoreColor).attr("stroke-width", CARD_STROKE_WIDTH);
+      const centerX = bx + bw / 2;
+      for (let i = 0; i < lines.length; i++) {
+        g.append("text").attr("x", centerX).attr("y", by + THOUGHT_PAD_Y + (i + 1) * THOUGHT_LINE_H - 2).attr("text-anchor", "middle").attr("font-size", THOUGHT_FONT).attr("font-style", "italic").attr("fill", palette.textMuted).text(lines[i]);
+      }
+    };
+    svg.on("click", (event) => {
+      const target = event.target;
+      if (!target.closest(".journey-face") && !target.closest(".journey-step") && !target.closest(".journey-phase")) {
+        lockedLine = null;
+        clearDimming();
+      }
+    });
+    const showThoughtForLine = (ln) => {
+      svg.selectAll(".journey-curve-area .journey-face").each(function() {
+        const face = d3.select(this);
+        if (parseInt(face.attr("data-line-number") ?? "0", 10) === ln) {
+          showThoughtBubble(face);
+        }
+      });
+    };
+    svg.selectAll(".journey-face").each(function() {
+      const el = d3.select(this);
+      el.on("mouseenter", () => {
+        if (lockedLine !== null) return;
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        if (ln) {
+          applyDimming(ln);
+          showThoughtForLine(ln);
+        }
+      }).on("mouseleave", () => {
+        if (lockedLine !== null) return;
+        clearDimming();
+      }).on("click", (event) => {
+        event.stopPropagation();
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        if (lockedLine === ln) {
+          lockedLine = null;
+          clearDimming();
+        } else {
+          lockedLine = ln;
+          applyDimming(ln);
+          showThoughtForLine(ln);
+          if (onNavigateToLine && ln) onNavigateToLine(ln);
+        }
+      });
+    });
+    svg.selectAll(".journey-step").each(function() {
+      const el = d3.select(this);
+      el.on("mouseenter", () => {
+        if (lockedLine !== null) return;
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        if (ln) {
+          applyDimming(ln);
+          showThoughtForLine(ln);
+        }
+      }).on("mouseleave", () => {
+        if (lockedLine !== null) return;
+        clearDimming();
+      }).on("click", (event) => {
+        event.stopPropagation();
+        const ln = parseInt(el.attr("data-line-number") ?? "0", 10);
+        if (lockedLine === ln) {
+          lockedLine = null;
+          clearDimming();
+        } else {
+          lockedLine = ln;
+          applyDimming(ln);
+          showThoughtForLine(ln);
+          if (onNavigateToLine && ln) onNavigateToLine(ln);
+        }
+      });
+    });
+  }
+}
+function resolveStepColor(step, scoreColor, activeGroup, tagGroups, _palette) {
+  if (!activeGroup) return void 0;
+  if (activeGroup.toLowerCase() === "score") {
+    return step.score !== void 0 ? scoreColor : void 0;
+  }
+  const group = tagGroups.find(
+    (g) => g.name.toLowerCase() === activeGroup.toLowerCase()
+  );
+  if (!group) return void 0;
+  const tagValue = step.tags[tagAttrKey(group.name)];
+  if (!tagValue) return void 0;
+  const entry = group.entries.find(
+    (e) => e.value.toLowerCase() === tagValue.toLowerCase()
+  );
+  return entry?.color;
+}
+function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onNavigateToLine, solid) {
+  const stepG = parent.append("g").attr("class", "journey-step").attr("data-line-number", sl.step.lineNumber);
+  if (sl.step.score !== void 0) {
+    stepG.attr("data-score", sl.step.score);
+  }
+  for (const [key, value] of Object.entries(sl.step.tags)) {
+    stepG.attr(`data-tag-${key.toLowerCase()}`, value);
+  }
+  const cx = sl.x;
+  const cy = sl.y;
+  const resolvedColor = resolveStepColor(
+    sl.step,
+    sl.color,
+    activeGroup,
+    tagGroups,
+    palette
+  );
+  const cardFill = shapeFill(
+    palette,
+    resolvedColor ?? palette.primary,
+    isDark,
+    { ...solid !== void 0 && { solid } }
+  );
+  const cardStroke = resolvedColor ?? palette.textMuted;
+  const onCardText = contrastText(
+    cardFill,
+    palette.textOnFillLight,
+    palette.textOnFillDark
+  );
+  stepG.append("rect").attr("x", cx).attr("y", cy).attr("width", sl.width).attr("height", sl.height).attr("rx", CARD_RADIUS).attr("fill", cardFill).attr("stroke", cardStroke).attr("stroke-width", CARD_STROKE_WIDTH);
+  const titleMaxW = sl.width - CARD_PADDING_X * 2;
+  const titleLines = wrapTextToWidth(sl.step.title, FONT_SIZE_STEP, titleMaxW);
+  for (let i = 0; i < titleLines.length; i++) {
+    stepG.append("text").attr("x", cx + CARD_PADDING_X).attr("y", cy + CARD_PADDING_Y + FONT_SIZE_STEP + i * TITLE_LINE_HEIGHT).attr("font-size", FONT_SIZE_STEP).attr("font-weight", "500").attr("fill", onCardText).text(titleLines[i]);
+  }
+  const titleBlockH = CARD_PADDING_Y + titleLines.length * TITLE_LINE_HEIGHT + CARD_PADDING_Y;
+  const cardAnnotations = sl.step.annotations;
+  const hasContent = sl.step.description || cardAnnotations.length > 0;
+  if (hasContent) {
+    stepG.append("line").attr("x1", cx).attr("y1", cy + titleBlockH).attr("x2", cx + sl.width).attr("y2", cy + titleBlockH).attr("stroke", solid ? onCardText : cardStroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+  }
+  let metaY = cy + titleBlockH + CARD_META_LINE_HEIGHT;
+  if (sl.step.description) {
+    const descLines = wrapText(
+      sl.step.description,
+      sl.width - CARD_PADDING_X * 2,
+      FONT_SIZE_META
+    );
+    for (const line2 of descLines) {
+      stepG.append("text").attr("x", cx + CARD_PADDING_X).attr("y", metaY).attr("font-size", FONT_SIZE_META).attr("fill", onCardText).text(line2);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+  }
+  const ANNO_ICON_SIZE = 10;
+  const ANNO_ICON_GAP = 4;
+  const annoIconIndent = ANNO_ICON_SIZE + ANNO_ICON_GAP;
+  const annoTextW = sl.width - CARD_PADDING_X * 2 - annoIconIndent;
+  for (const anno of cardAnnotations) {
+    const annoColor = annotationColor(anno.type, palette);
+    const iconPaths = annotationIconPaths(anno.type);
+    const annoLines = wrapText(anno.text, annoTextW, FONT_SIZE_META);
+    const iconColor = solid ? onCardText : annoColor;
+    renderAnnotationIcon(
+      stepG,
+      cx + CARD_PADDING_X,
+      metaY - ANNO_ICON_SIZE + 1,
+      ANNO_ICON_SIZE,
+      iconPaths,
+      iconColor
+    );
+    for (let li = 0; li < annoLines.length; li++) {
+      stepG.append("text").attr("x", cx + CARD_PADDING_X + annoIconIndent).attr("y", metaY).attr("font-size", FONT_SIZE_META).attr("fill", onCardText).text(annoLines[li]);
+      metaY += CARD_META_LINE_HEIGHT;
+    }
+  }
+  for (const [key, value] of Object.entries(sl.step.tags)) {
+    const group = tagGroups.find(
+      (g) => g.name.toLowerCase() === key.toLowerCase()
+    );
+    const entry = group?.entries.find(
+      (e) => e.value.toLowerCase() === value.toLowerCase()
+    );
+    const stripColor = entry?.color ?? palette.textMuted;
+    const TAG_GAP = 6;
+    const stripY = cy - TAG_STRIP_HEIGHT - TAG_GAP;
+    const stripFill = shapeFill(palette, stripColor, isDark, {
+      ...solid !== void 0 && { solid }
+    });
+    stepG.append("rect").attr("x", cx).attr("y", stripY).attr("width", sl.width).attr("height", TAG_STRIP_HEIGHT).attr("rx", CARD_RADIUS).attr("fill", stripFill).attr("stroke", stripColor).attr("stroke-width", CARD_STROKE_WIDTH);
+    const stripTextColor = contrastText(
+      stripFill,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    stepG.append("text").attr("x", cx + sl.width / 2).attr("y", stripY + TAG_STRIP_HEIGHT / 2 + FONT_SIZE_META / 2 - 1).attr("text-anchor", "middle").attr("font-size", FONT_SIZE_META).attr("fill", stripTextColor).text(value);
+  }
+  if (onNavigateToLine) {
+    stepG.style("cursor", "pointer").on("click", (event) => {
+      event.stopPropagation();
+      onNavigateToLine(sl.step.lineNumber);
+    });
+  }
+}
+function renderPersonaSilhouette(parent, cx, cy, color, palette, scale = 1) {
+  const fill = mix(color, palette.bg, 70);
+  const stroke = color;
+  const s = scale;
+  parent.append("path").attr(
+    "d",
+    `M ${cx - 5 * s} ${cy + 6 * s} L ${cx - 5 * s} ${cy + 11 * s} L ${cx - 8 * s} ${cy + 11 * s} Q ${cx - 20 * s} ${cy + 12 * s}, ${cx - 20 * s} ${cy + 22 * s} L ${cx - 20 * s} ${cy + 36 * s} L ${cx + 20 * s} ${cy + 36 * s} L ${cx + 20 * s} ${cy + 22 * s} Q ${cx + 20 * s} ${cy + 12 * s}, ${cx + 8 * s} ${cy + 11 * s} L ${cx + 5 * s} ${cy + 11 * s} L ${cx + 5 * s} ${cy + 6 * s} Z`
+  ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.2);
+  parent.append("path").attr(
+    "d",
+    `M ${cx} ${cy - 12 * s} C ${cx + 10 * s} ${cy - 12 * s}, ${cx + 9 * s} ${cy + 2 * s}, ${cx + 6 * s} ${cy + 6 * s} Q ${cx} ${cy + 9 * s}, ${cx - 6 * s} ${cy + 6 * s} C ${cx - 9 * s} ${cy + 2 * s}, ${cx - 10 * s} ${cy - 12 * s}, ${cx} ${cy - 12 * s} Z`
+  ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.2);
+}
+function renderScoreFace(parent, cx, cy, score, palette, isDark, radius) {
+  const r = radius ?? FACE_RADIUS;
+  const color = scoreToColor(score, palette);
+  const g = parent.append("g").attr("class", "journey-face").attr("data-cx", cx).attr("data-cy", cy);
+  const iconG = g.append("g").attr("class", "journey-face-icon");
+  const faceFill = shapeFill(palette, color, isDark);
+  iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r + 1).attr("fill", palette.bg);
+  iconG.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", faceFill).attr("stroke", color).attr("stroke-width", 2);
+  const eyeColor = color;
+  const eyeY = cy - r * 0.15;
+  const eyeSpacing = r * 0.32;
+  const eyeR = r * 0.12;
+  iconG.append("circle").attr("cx", cx - eyeSpacing).attr("cy", eyeY).attr("r", eyeR).attr("fill", eyeColor);
+  iconG.append("circle").attr("cx", cx + eyeSpacing).attr("cy", eyeY).attr("r", eyeR).attr("fill", eyeColor);
+  const mouthW = r * 0.46;
+  const curve = (score - 3) / 2 * r * 0.42;
+  const apexY = cy + r * 0.32;
+  const mouthY = apexY - curve / 2;
+  iconG.append("path").attr(
+    "d",
+    `M ${cx - mouthW} ${mouthY} Q ${cx} ${mouthY + curve} ${cx + mouthW} ${mouthY}`
+  ).attr("fill", "none").attr("stroke", eyeColor).attr("stroke-width", 1.2).attr("stroke-linecap", "round");
+  return g;
+}
+var EMOTION_LABEL_MAX_WIDTH = 180;
+var EMOTION_LABEL_FONT_SIZE = FONT_SIZE_META;
+function addEmotionLabel(faceG, pt, palette) {
+  if (!pt.emotionLabel) return;
+  const text = truncateText2(
+    pt.emotionLabel,
+    EMOTION_LABEL_MAX_WIDTH,
+    EMOTION_LABEL_FONT_SIZE
+  );
+  const y = pt.y + FACE_RADIUS + 5 + EMOTION_LABEL_FONT_SIZE;
+  faceG.append("text").attr("class", "journey-emotion-label").attr("x", pt.x).attr("y", y).attr("text-anchor", "middle").attr("font-family", FONT_FAMILY).attr("font-size", EMOTION_LABEL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.text).attr("stroke", palette.bg).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.8).attr("paint-order", "stroke").attr("pointer-events", "none").text(text);
+}
+function wrapText(text, maxWidth, fontSize) {
+  return wrapTextToWidth(text, fontSize, maxWidth);
+}
+function truncateText2(text, maxWidth, fontSize) {
+  return truncateText(text, fontSize, maxWidth);
+}
+function annotationColor(type, palette) {
+  switch (type) {
+    case "pain":
+      return palette.colors.red;
+    case "opportunity":
+      return palette.colors.green;
+    case "thought":
+      return palette.textMuted;
+  }
+}
+var ICON_THUMBS_DOWN = [
+  "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z",
+  "M17 14V2"
+];
+var ICON_THUMBS_UP = [
+  "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z",
+  "M7 10v12"
+];
+var ICON_THOUGHT = [
+  "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
+  "M9 18h6",
+  "M10 22h4"
+];
+function annotationIconPaths(type) {
+  switch (type) {
+    case "pain":
+      return ICON_THUMBS_DOWN;
+    case "opportunity":
+      return ICON_THUMBS_UP;
+    case "thought":
+      return ICON_THOUGHT;
+  }
+}
+function renderAnnotationIcon(parent, x, y, size, paths, color) {
+  const g = parent.append("g").attr("transform", `translate(${x}, ${y})`);
+  const scale = size / 24;
+  const inner = g.append("g").attr("transform", `scale(${scale})`);
+  for (const d of paths) {
+    inner.append("path").attr("d", d).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+  }
+}
+function renderJourneyMapForExport(content, theme, palette) {
+  const parsed = parseJourneyMap(content, palette);
+  if (parsed.error || parsed.phases.length === 0 && parsed.steps.length === 0) {
+    return "";
+  }
+  const isDark = theme === "dark";
+  const layout = layoutJourneyMap(parsed, palette, { isDark });
+  const container = document.createElement("div");
+  renderJourneyMap(container, parsed, palette, isDark, {
+    exportDims: { width: layout.totalWidth, height: layout.totalHeight },
+    exportMode: true
+  });
+  const svgEl = container.querySelector("svg");
+  if (!svgEl) return "";
+  if (theme === "transparent") {
+    const bgRect = svgEl.querySelector("rect:first-child");
+    if (bgRect) bgRect.remove();
+  }
+  return svgEl.outerHTML;
+}
+
+export {
+  renderJourneyMap,
+  renderJourneyMapForExport
+};
+//# sourceMappingURL=chunk-ZJEL4H2R.js.map