@diagrammo/dgmo 0.64.0 → 0.65.0

package/dist/{chunk-KPX2OWZR.js → chunk-YKWHUPBP.js}

@@ -1,28 +1,28 @@
 import {
   renderCollapseBar,
   renderNodeCard
-} from "./chunk-H3HFC3SQ.js";
+} from "./chunk-5GM6BZO7.js";
 import {
   CARD_RADIUS,
   CONTAINER_RADIUS
-} from "./chunk-3CIOJ5YJ.js";
+} from "./chunk-FJ57274M.js";
 import {
   layoutInlineHeader
-} from "./chunk-6VJCURWU.js";
+} from "./chunk-J2EXBAPZ.js";
 import {
   renderIntegratedLegend
-} from "./chunk-RBAW7VUG.js";
+} from "./chunk-2EPV7CLY.js";
 import {
   getLegendExtent,
   getMaxLegendReservedHeight
-} from "./chunk-ES66QH6J.js";
+} from "./chunk-FG24NXKN.js";
 import {
   FONT_FAMILY
-} from "./chunk-Z5ID35YP.js";
+} from "./chunk-UTCPNJND.js";
 import {
   measureText,
   wrapTextToWidth
-} from "./chunk-4ASYQ347.js";
+} from "./chunk-MTGGOCND.js";
 import {
   resolveActiveTagGroup,
   resolveTagColor,
@@ -39,14 +39,12 @@ import {
 import * as d3 from "d3-selection";
 
 // src/sketch/markdown-card.ts
-var BOLD_WIDTH_FACTOR = 1.06;
 var INDENT_PX = 12;
 var BULLET_HANG_PX = 12;
 var ELLIPSIS = "\u2026";
 var BULLET = "\u2022";
 function segWidth(seg, fontSize) {
-  const w = measureText(seg.text, fontSize);
-  return seg.bold ? w * BOLD_WIDTH_FACTOR : w;
+  return measureText(seg.text, fontSize, { bold: seg.bold });
 }
 function parseInline(text) {
   const segments = [];
@@ -287,15 +285,16 @@ var CARD_LABEL_MIN = 11;
 var CARD_META_FONT = 12;
 var CARD_TITLE_MAX = 30;
 function fitWrapped(label, maxWidth, maxFont = CARD_LABEL_MAX, minFont = CARD_LABEL_MIN, maxLines = 2) {
+  const BOLD = { hardBreak: true, bold: true };
   for (let fs = maxFont; fs >= minFont; fs--) {
-    const lines2 = wrapTextToWidth(label, fs, maxWidth, { hardBreak: true });
+    const lines2 = wrapTextToWidth(label, fs, maxWidth, BOLD);
     if (lines2.length <= maxLines) return { lines: lines2, fontSize: fs };
   }
-  const lines = wrapTextToWidth(label, minFont, maxWidth, { hardBreak: true });
+  const lines = wrapTextToWidth(label, minFont, maxWidth, BOLD);
   if (lines.length <= maxLines) return { lines, fontSize: minFont };
   const kept = lines.slice(0, maxLines);
   let last = kept[maxLines - 1];
-  while (last.length > 1 && measureText(`${last}\u2026`, minFont) > maxWidth)
+  while (last.length > 1 && measureText(`${last}\u2026`, minFont, { bold: true }) > maxWidth)
     last = last.slice(0, -1);
   kept[maxLines - 1] = `${last}\u2026`;
   return { lines: kept, fontSize: minFont };
@@ -1128,4 +1127,4 @@ export {
   sketchEdgeGeometry,
   renderSketchForExport
 };
-//# sourceMappingURL=chunk-KPX2OWZR.js.map
+//# sourceMappingURL=chunk-YKWHUPBP.js.map

package/dist/{chunk-FRC4LDTQ.js → chunk-YMYPFX4O.js}

@@ -3,10 +3,10 @@ import {
   layoutJourneyMap,
   scoreToColor,
   scoreToCurveY
-} from "./chunk-KRTO7NRK.js";
+} from "./chunk-D2WHS23S.js";
 import {
   wrapNoteBody
-} from "./chunk-VJARCVMH.js";
+} from "./chunk-MU3CJPJF.js";
 import {
   NOTE_BULLET_INDENT
 } from "./chunk-5DH3KYFH.js";
@@ -15,7 +15,7 @@ import {
 } from "./chunk-WGC42WJU.js";
 import {
   CARD_RADIUS
-} from "./chunk-3CIOJ5YJ.js";
+} from "./chunk-FJ57274M.js";
 import {
   ScaleContext
 } from "./chunk-YYVTBZZC.js";
@@ -24,15 +24,15 @@ import {
 } from "./chunk-RU2HHHYA.js";
 import {
   renderIntegratedLegend
-} from "./chunk-RBAW7VUG.js";
+} from "./chunk-2EPV7CLY.js";
 import {
   FONT_FAMILY
-} from "./chunk-Z5ID35YP.js";
+} from "./chunk-UTCPNJND.js";
 import {
   measureText,
   truncateText,
   wrapTextToWidth
-} from "./chunk-4ASYQ347.js";
+} from "./chunk-MTGGOCND.js";
 import {
   parseJourneyMap
 } from "./chunk-NSJK7F2V.js";
@@ -65,6 +65,7 @@ var COLUMN_RADIUS = 8;
 var COLUMN_HEADER_HEIGHT = 36;
 var COLUMN_PADDING = 12;
 var FONT_SIZE_TITLE = 18;
+var PERSONA_PANEL_WIDTH = 280;
 var FONT_SIZE_PHASE = 13;
 var FONT_SIZE_STEP = 12;
 var FONT_SIZE_META = 10;
@@ -115,7 +116,16 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     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);
+    const personaPanelX = parsed.persona ? layout.totalWidth - PADDING - PERSONA_PANEL_WIDTH : layout.totalWidth;
+    const titleMaxW = Math.max(
+      0,
+      Math.min(personaPanelX - PADDING, layout.totalWidth - PADDING) - PADDING
+    );
+    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(
+      truncateText(parsed.title, FONT_SIZE_TITLE, titleMaxW, {
+        bold: true
+      })
+    );
     if (onNavigateToLine && parsed.titleLineNumber) {
       titleG.style("cursor", "pointer").on("click", () => {
         onNavigateToLine(parsed.titleLineNumber);
@@ -127,7 +137,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
     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 panelWidth = PERSONA_PANEL_WIDTH;
     const textAreaWidth = panelWidth - silhouetteZone - CARD_PADDING_X;
     const descLineH = 14;
     const descLines = parsed.persona.description ? wrapNoteBody(parsed.persona.description, textAreaWidth, FONT_SIZE_META) : [];
@@ -164,7 +174,9 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       fillMode
     );
     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);
+    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(
+      truncateText(parsed.persona.name, FONT_SIZE_STEP, textAreaWidth)
+    );
     for (let li = 0; li < descLines.length; li++) {
       const line2 = descLines[li];
       const indent = line2.kind === "plain" ? 0 : NOTE_BULLET_INDENT;
@@ -372,11 +384,11 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
         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(
+      phaseG.append("text").attr("x", pl.x + COLUMN_PADDING).attr("y", pl.y + COLUMN_HEADER_HEIGHT / 2).attr("dominant-baseline", "central").attr("font-size", FONT_SIZE_PHASE).attr("font-weight", "bold").attr("fill", onHeaderText).text(
+        isCollapsed ? truncateText(
           pl.phase.name,
-          pl.width - COLUMN_PADDING * 2,
-          FONT_SIZE_PHASE
+          FONT_SIZE_PHASE,
+          pl.width - COLUMN_PADDING * 2
         ) : pl.phase.name
       );
       if (onPhaseToggle) {
@@ -445,7 +457,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
           }
           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));
+          itemG.append("text").attr("x", textX).attr("y", itemY + COLLAPSED_CARD_H / 2).attr("dominant-baseline", "central").attr("font-size", FONT_SIZE_META).attr("fill", palette.text).text(truncateText(step.title, FONT_SIZE_META, maxTextW));
           if (onNavigateToLine) {
             itemG.style("cursor", "pointer").on("click", (event) => {
               event.stopPropagation();
@@ -540,7 +552,7 @@ function renderJourneyMap(container, parsed, palette, isDark, options) {
       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 lines = wrapTextToWidth(thoughtText, THOUGHT_FONT, THOUGHT_MAX_W);
       const textW = Math.min(
         THOUGHT_MAX_W,
         Math.max(...lines.map((l) => measureText(l, THOUGHT_FONT)))
@@ -690,10 +702,10 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
   }
   let metaY = cy + titleBlockH + CARD_META_LINE_HEIGHT;
   if (sl.step.description) {
-    const descLines = wrapText(
+    const descLines = wrapTextToWidth(
       sl.step.description,
-      sl.width - CARD_PADDING_X * 2,
-      FONT_SIZE_META
+      FONT_SIZE_META,
+      sl.width - CARD_PADDING_X * 2
     );
     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);
@@ -707,7 +719,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
   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 annoLines = wrapTextToWidth(anno.text, FONT_SIZE_META, annoTextW);
     const iconColor = fillMode === "solid" ? onCardText : annoColor;
     renderAnnotationIcon(
       stepG,
@@ -741,7 +753,7 @@ function renderStepCard(parent, sl, palette, isDark, activeGroup, tagGroups, onN
       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);
+    stepG.append("text").attr("x", cx + sl.width / 2).attr("y", stripY + TAG_STRIP_HEIGHT / 2).attr("dominant-baseline", "central").attr("text-anchor", "middle").attr("font-size", FONT_SIZE_META).attr("fill", stripTextColor).text(value);
   }
   if (onNavigateToLine) {
     stepG.style("cursor", "pointer").on("click", (event) => {
@@ -791,20 +803,14 @@ 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(
+  const text = truncateText(
     pt.emotionLabel,
-    EMOTION_LABEL_MAX_WIDTH,
-    EMOTION_LABEL_FONT_SIZE
+    EMOTION_LABEL_FONT_SIZE,
+    EMOTION_LABEL_MAX_WIDTH
   );
   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":
@@ -871,4 +877,4 @@ export {
   renderJourneyMap,
   renderJourneyMapForExport
 };
-//# sourceMappingURL=chunk-FRC4LDTQ.js.map
+//# sourceMappingURL=chunk-YMYPFX4O.js.map