@diagrammo/dgmo 0.25.5 → 0.27.0

package/src/graph/state-renderer.ts

@@ -3,7 +3,8 @@
 // ============================================================
 
 import * as d3Selection from 'd3-selection';
-import * as d3Shape from 'd3-shape';
+import { appendArrowheadMarkers } from '../utils/arrow-markers';
+import { fitDiagramToCanvas } from '../utils/fit-canvas';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { contrastText, mix, shapeFill } from '../palettes/color-utils';
@@ -11,12 +12,21 @@ import type { ParsedGraph } from './types';
 import type { LayoutResult, LayoutNode } from './layout';
 import { parseState } from './state-parser';
 import { layoutGraph } from './layout';
+import { edgeSplinePath } from './edge-spline';
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
   TITLE_Y,
 } from '../utils/title-constants';
 import { ScaleContext } from '../utils/scaling';
+import { measureText } from '../utils/text-measure';
+import {
+  renderNoteBox,
+  renderNoteConnector,
+  renderNoteBadge,
+  noteConnectorPoints,
+  NOTE_BADGE_RADIUS,
+} from '../utils/note-box';
 
 // ============================================================
 // Constants
@@ -64,16 +74,6 @@ function stateStroke(
   return nodeColor ?? stateDefaultColor(palette, colorOff);
 }
 
-// ============================================================
-// Edge path generator
-// ============================================================
-
-const lineGenerator = d3Shape
-  .line<{ x: number; y: number }>()
-  .x((d) => d.x)
-  .y((d) => d.y)
-  .curve(d3Shape.curveBasis);
-
 // ============================================================
 // Self-loop path
 // ============================================================
@@ -130,21 +130,23 @@ export function renderState(
 
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
-  const scaleX = (width - sDiagramPadding * 2) / diagramW;
-  const scaleY = (availH - sDiagramPadding * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
-
-  const scaledW = diagramW * scale;
-  const offsetX = (width - scaledW) / 2;
-  const offsetY = titleHeight + sDiagramPadding;
+  const { scale, offsetX, offsetY, canvasHeight } = fitDiagramToCanvas({
+    width,
+    height,
+    diagramW,
+    diagramH,
+    padding: sDiagramPadding,
+    titleHeight,
+    maxScale: MAX_SCALE,
+    exportMode: !!exportDims,
+  });
 
   const svg = d3Selection
     .select(container)
     .append('svg')
     .attr('width', width)
-    .attr('height', height)
-    .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('height', canvasHeight)
+    .attr('viewBox', `0 0 ${width} ${canvasHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('font-family', FONT_FAMILY);
 
@@ -154,35 +156,14 @@ export function renderState(
 
   const defs = svg.append('defs');
 
-  defs
-    .append('marker')
-    .attr('id', 'st-arrow')
-    .attr('viewBox', `0 0 ${sArrowheadW} ${sArrowheadH}`)
-    .attr('refX', sArrowheadW)
-    .attr('refY', sArrowheadH / 2)
-    .attr('markerWidth', sArrowheadW)
-    .attr('markerHeight', sArrowheadH)
-    .attr('orient', 'auto')
-    .append('polygon')
-    .attr('points', `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`)
-    .attr('fill', palette.textMuted);
-
   const edgeColors = new Set<string>();
-  for (const color of edgeColors) {
-    const id = `st-arrow-${color.replace('#', '')}`;
-    defs
-      .append('marker')
-      .attr('id', id)
-      .attr('viewBox', `0 0 ${sArrowheadW} ${sArrowheadH}`)
-      .attr('refX', sArrowheadW)
-      .attr('refY', sArrowheadH / 2)
-      .attr('markerWidth', sArrowheadW)
-      .attr('markerHeight', sArrowheadH)
-      .attr('orient', 'auto')
-      .append('polygon')
-      .attr('points', `0,0 ${sArrowheadW},${sArrowheadH / 2} 0,${sArrowheadH}`)
-      .attr('fill', color);
-  }
+  appendArrowheadMarkers(defs, {
+    idPrefix: 'st',
+    width: sArrowheadW,
+    height: sArrowheadH,
+    baseFill: palette.textMuted,
+    colors: edgeColors,
+  });
 
   if (showTitle) {
     const titleEl = svg
@@ -281,7 +262,6 @@ export function renderState(
     nodePositionMap.set(node.id, node);
   }
 
-  const LABEL_CHAR_W = 7;
   const LABEL_PAD = 8;
   const LABEL_H = 16;
   const PERP_OFFSET = 10;
@@ -298,7 +278,7 @@ export function renderState(
   for (let ei = 0; ei < layout.edges.length; ei++) {
     const edge = layout.edges[ei]!;
     if (!edge.label) continue;
-    const bgW = edge.label.length * LABEL_CHAR_W + LABEL_PAD;
+    const bgW = measureText(edge.label, sEdgeLabelFontSize) + LABEL_PAD;
     let lx: number, ly: number;
 
     if (edge.source === edge.target) {
@@ -389,7 +369,7 @@ export function renderState(
         }
       }
     } else if (edge.points.length >= 2) {
-      const pathD = lineGenerator(edge.points);
+      const pathD = edgeSplinePath(edge.points);
       if (pathD) {
         edgeG
           .append('path')
@@ -433,6 +413,7 @@ export function renderState(
 
   const colorOff = graph.options?.['color'] === 'off';
   const solid = graph.options?.['solid-fill'] === 'on';
+  const noNotes = graph.options?.['no-notes'] === 'on';
   for (const node of layout.nodes) {
     const isCollapsedGroup = collapsedGroupIds.has(node.id);
 
@@ -459,6 +440,10 @@ export function renderState(
       });
     }
 
+    // The shape draws at its dagre position — a note never moves it, so
+    // its edges stay connected. The note floats beside it.
+    const hasNote = !!node.note && !noNotes;
+
     if (node.shape === 'pseudostate') {
       nodeG
         .append('circle')
@@ -562,6 +547,49 @@ export function renderState(
         .attr('font-size', sNodeFontSize)
         .text(node.label);
     }
+
+    if (hasNote && node.note) {
+      if (node.note.collapsed) {
+        // Collapsed → comment-bubble badge in the node's top-right corner.
+        renderNoteBadge(
+          nodeG,
+          {
+            x: node.width / 2 - NOTE_BADGE_RADIUS - 3,
+            y: -node.height / 2 + NOTE_BADGE_RADIUS + 3,
+          },
+          palette,
+          {
+            isDark,
+            ...(node.note.color && { color: node.note.color }),
+            lineNumber: node.note.lineNumber,
+            endLineNumber: node.note.endLineNumber,
+          }
+        );
+      } else {
+        // Solid tether from the shape edge to the floated note, on whichever
+        // side the collision-aware placement chose.
+        const [cx1, cy1, cx2, cy2] = noteConnectorPoints(node, node.note);
+        renderNoteConnector(nodeG, cx1, cy1, cx2, cy2, palette);
+        renderNoteBox(
+          nodeG,
+          {
+            x: node.note.x,
+            y: node.note.y,
+            width: node.note.width,
+            height: node.note.height,
+          },
+          node.note.lines,
+          palette,
+          {
+            isDark,
+            ...(node.note.color && { color: node.note.color }),
+            lineNumber: node.note.lineNumber,
+            endLineNumber: node.note.endLineNumber,
+            interactive: true,
+          }
+        );
+      }
+    }
   }
 }
 

package/src/graph/types.ts

@@ -35,6 +35,18 @@ export interface GraphGroup {
   readonly lineNumber: number;
 }
 
+/**
+ * A generic note as authored — anchors to a node by `ref` (the
+ * author-typed id/label) and carries a multi-line `body`. Resolution
+ * to a concrete node happens at end-of-parse via `resolveNotes`; this
+ * model is intentionally a top-level list (ADR-1), not a field on
+ * `GraphNode`, so the placement pass sees the whole set at once.
+ */
+// The graph note is now the chart-neutral `DiagramNote`; kept as a named
+// alias so existing `graph/` imports of `GraphNote` stay valid.
+import type { DiagramNote } from '../utils/notes/model';
+export type GraphNote = DiagramNote;
+
 import type { DgmoError } from '../diagnostics';
 
 export interface ParsedGraph {
@@ -45,6 +57,7 @@ export interface ParsedGraph {
   readonly nodes: readonly GraphNode[];
   readonly edges: readonly GraphEdge[];
   readonly groups?: readonly GraphGroup[];
+  readonly notes?: readonly GraphNote[];
   readonly options: Readonly<Record<string, string>>;
   readonly diagnostics: readonly DgmoError[];
   readonly error: string | null;

package/src/index.ts

@@ -68,7 +68,7 @@ export async function render(
   text: string,
   options?: RenderOptions
 ): Promise<RenderResult> {
-  const palette = options?.palette ?? palettes.nord;
+  const palette = options?.palette ?? palettes.slate;
   const onError = options?.onError ?? 'svg';
 
   const result = await renderInternal(text, {

package/src/infra/layout.ts

@@ -8,6 +8,11 @@
 import dagre from '@dagrejs/dagre';
 import type { Writable } from '../utils/brand';
 import type { ComputedInfraModel, ComputedInfraNode } from './types';
+import {
+  measureText,
+  truncateText,
+  CHAR_WIDTH_RATIO,
+} from '../utils/text-measure';
 
 // ============================================================
 // Layout types
@@ -86,8 +91,11 @@ const NODE_SEPARATOR_GAP = 4;
 const NODE_PAD_BOTTOM = 10;
 const ROLE_DOT_ROW = 12;
 const COLLAPSE_BAR_HEIGHT = 6;
-const CHAR_WIDTH = 7;
-const META_CHAR_WIDTH = 6;
+// Font sizes used when sizing nodes from text — must match renderer.ts
+// (NODE_FONT_SIZE / META_FONT_SIZE) so measured widths agree.
+const NODE_FONT_SIZE = 13;
+const META_FONT_SIZE = 10;
+const EDGE_LABEL_FONT_SIZE = 11;
 const PADDING_X = 24;
 const GROUP_PADDING = 20;
 const GROUP_HEADER_HEIGHT = 24;
@@ -201,8 +209,15 @@ function computeNodeWidth(
     node.computedConcurrentInvocations === 0 && node.computedInstances > 1
       ? node.computedInstances
       : 0;
-  const badgeLen = badgeVal > 0 ? `${badgeVal}x`.length + 2 : 0;
-  const labelWidth = (node.label.length + badgeLen) * CHAR_WIDTH + PADDING_X;
+  // Badge ("3x") renders at META_FONT_SIZE at the header's right edge; reserve
+  // its width plus a small gap alongside the bold label at NODE_FONT_SIZE.
+  const badgeWidth =
+    badgeVal > 0
+      ? measureText(`${badgeVal}x`, META_FONT_SIZE) +
+        2 * CHAR_WIDTH_RATIO * NODE_FONT_SIZE
+      : 0;
+  const labelWidth =
+    measureText(node.label, NODE_FONT_SIZE) + badgeWidth + PADDING_X;
 
   // Collect all key names (including "RPS" and computed rows) to compute aligned value column
   const allKeys: string[] = [];
@@ -269,8 +284,12 @@ function computeNodeWidth(
   }
   if (allKeys.length === 0) return Math.max(MIN_NODE_WIDTH, labelWidth);
 
-  const maxKeyLen = Math.max(...allKeys.map((k) => k.length));
-  // key + ": " + value
+  // Width of the aligned key column ("key: "), measured in pixels at the meta
+  // font size — mirrors renderer.ts's valueX = x + 10 + measureText("key: ").
+  const keyColWidth = Math.max(
+    ...allKeys.map((k) => measureText(`${k}: `, META_FONT_SIZE))
+  );
+  // keyColWidth + measured value width
   let maxRowWidth = 0;
   if (node.computedRps > 0) {
     // RPS row may show "29.3k / 50k" when an effective cap exists
@@ -296,7 +315,7 @@ function computeNodeWidth(
         : formatRps(node.computedRps);
     maxRowWidth = Math.max(
       maxRowWidth,
-      (maxKeyLen + 2 + rpsVal.length) * META_CHAR_WIDTH
+      keyColWidth + measureText(rpsVal, META_FONT_SIZE)
     );
   }
   // Declared property value widths only when expanded
@@ -314,20 +333,20 @@ function computeNodeWidth(
         'uptime',
         'cb-error-threshold',
       ];
-      const valLen =
+      const valStr =
         p.key === 'max-rps' || p.key === 'ratelimit-rps'
-          ? formatRpsShort(numVal).length
+          ? formatRpsShort(numVal)
           : p.key === 'latency-ms' ||
               p.key === 'cb-latency-threshold-ms' ||
               p.key === 'duration-ms' ||
               p.key === 'cold-start-ms'
-            ? formatMs(numVal).length
+            ? formatMs(numVal)
             : PCT_KEYS.includes(p.key)
-              ? `${numVal}%`.length
-              : String(p.value).length;
+              ? `${numVal}%`
+              : String(p.value);
       maxRowWidth = Math.max(
         maxRowWidth,
-        (maxKeyLen + 2 + valLen) * META_CHAR_WIDTH
+        keyColWidth + measureText(valStr, META_FONT_SIZE)
       );
     }
   }
@@ -337,10 +356,9 @@ function computeNodeWidth(
     const msValues = expanded ? [perc.p50, perc.p90, perc.p99] : [perc.p90];
     for (const ms of msValues) {
       if (ms > 0) {
-        const valLen = formatMs(ms).length;
         maxRowWidth = Math.max(
           maxRowWidth,
-          (maxKeyLen + 2 + valLen) * META_CHAR_WIDTH
+          keyColWidth + measureText(formatMs(ms), META_FONT_SIZE)
         );
       }
     }
@@ -358,43 +376,44 @@ function computeNodeWidth(
         const combinedVal = `${formatMs(perc.p90)} / ${formatMs(threshold)}`;
         maxRowWidth = Math.max(
           maxRowWidth,
-          (maxKeyLen + 2 + combinedVal.length) * META_CHAR_WIDTH
+          keyColWidth + measureText(combinedVal, META_FONT_SIZE)
         );
       }
     }
     if (node.computedUptime < 1) {
-      const valLen = formatUptime(node.computedUptime).length;
       maxRowWidth = Math.max(
         maxRowWidth,
-        (maxKeyLen + 2 + valLen) * META_CHAR_WIDTH
+        keyColWidth +
+          measureText(formatUptime(node.computedUptime), META_FONT_SIZE)
       );
     }
     if (node.computedAvailability < 1) {
-      const valLen = formatUptime(node.computedAvailability).length;
       maxRowWidth = Math.max(
         maxRowWidth,
-        (maxKeyLen + 2 + valLen) * META_CHAR_WIDTH
+        keyColWidth +
+          measureText(formatUptime(node.computedAvailability), META_FONT_SIZE)
       );
     }
     // CB state row ("CB: OPEN") — inverted pill, use full text width
     if (node.computedCbState === 'open') {
       maxRowWidth = Math.max(
         maxRowWidth,
-        'CB: OPEN'.length * META_CHAR_WIDTH + 8
+        measureText('CB: OPEN', META_FONT_SIZE) + 8
       );
     }
   }
 
-  const DESC_MAX_CHARS = 120;
+  // Pixel-width cap for description lines, derived from the legacy 120-char cap
+  // at META_FONT_SIZE — must match renderer.ts's DESC_MAX_WIDTH.
+  const DESC_MAX_WIDTH = 120 * CHAR_WIDTH_RATIO * META_FONT_SIZE;
   const descLines =
     expanded && node.description && !node.isEdge ? node.description : [];
   let descWidth = 0;
   for (const dl of descLines) {
-    const truncated =
-      dl.length > DESC_MAX_CHARS ? dl.slice(0, DESC_MAX_CHARS - 1) + '…' : dl;
+    const truncated = truncateText(dl, META_FONT_SIZE, DESC_MAX_WIDTH);
     descWidth = Math.max(
       descWidth,
-      truncated.length * META_CHAR_WIDTH + PADDING_X
+      measureText(truncated, META_FONT_SIZE) + PADDING_X
     );
   }
   return Math.max(MIN_NODE_WIDTH, labelWidth, maxRowWidth + 20, descWidth);
@@ -828,7 +847,8 @@ export function layoutInfra(
       const midIdx = Math.floor(edge.points.length / 2);
       const midPt = edge.points[midIdx];
       if (midPt) {
-        const halfWidth = (edge.label.length * 6.5 + 8) / 2;
+        const halfWidth =
+          (measureText(edge.label, EDGE_LABEL_FONT_SIZE) + 8) / 2;
         if (midPt.x - halfWidth < minX) minX = midPt.x - halfWidth;
         if (midPt.x + halfWidth > maxX) maxX = midPt.x + halfWidth;
       }

package/src/infra/parser.ts

@@ -1159,5 +1159,5 @@ export function extractSymbols(docText: string): DiagramSymbols {
       }
     }
   }
-  return { kind: 'infra', entities, keywords: [] };
+  return { kind: 'infra', entities };
 }

package/src/infra/renderer.ts

@@ -11,6 +11,11 @@ import type { InfraTagGroup } from './types';
 import { resolveColor } from '../colors';
 import { renderInlineText } from '../utils/inline-markdown';
 import { preprocessDescriptionLine } from '../utils/description-helpers';
+import {
+  measureText,
+  truncateText,
+  CHAR_WIDTH_RATIO,
+} from '../utils/text-measure';
 import type {
   InfraLayoutResult,
   InfraLayoutNode,
@@ -706,11 +711,12 @@ const PROP_DISPLAY: Record<string, string> = {
 };
 
 const DESC_MAX_CHARS = 120;
+/** Pixel-width cap for description lines, derived from the legacy char cap at META_FONT_SIZE. */
+const DESC_MAX_WIDTH = DESC_MAX_CHARS * CHAR_WIDTH_RATIO * META_FONT_SIZE;
 
-/** Truncate description text to DESC_MAX_CHARS. */
+/** Truncate description text to fit DESC_MAX_WIDTH at META_FONT_SIZE. */
 function truncateDesc(text: string): string {
-  if (text.length <= DESC_MAX_CHARS) return text;
-  return text.slice(0, DESC_MAX_CHARS - 1) + '…';
+  return truncateText(text, META_FONT_SIZE, DESC_MAX_WIDTH);
 }
 
 /** Keys whose values are RPS counts and should be formatted like RPS. */
@@ -1338,7 +1344,7 @@ function renderEdgeLabels(
 
     const g = svg.append('g').attr('class', animate ? 'infra-edge-label' : '');
 
-    const textWidth = labelText.length * 6.5 + 8;
+    const textWidth = measureText(labelText, EDGE_LABEL_FONT_SIZE) + 8;
     g.append('rect')
       .attr('x', midPt.x - textWidth / 2)
       .attr('y', midPt.y - 8)
@@ -1687,9 +1693,12 @@ function renderNodes(
 
         const rows = [...computedSection, ...declaredSection];
 
-        // Compute max key width so values align vertically
-        const maxKeyLen = Math.max(...rows.map((r) => r.key.length));
-        const valueX = x + 10 + (maxKeyLen + 2) * (sc.sMetaFontSize * 0.6);
+        // Compute max key width (pixels) so values align vertically.
+        // Keys are drawn as "${key}: ", so measure that exact string.
+        const maxKeyWidth = Math.max(
+          ...rows.map((r) => measureText(`${r.key}: `, sc.sMetaFontSize))
+        );
+        const valueX = x + 10 + maxKeyWidth;
 
         let rowY = sepY + NODE_SEPARATOR_GAP + sc.sMetaFontSize;
         const needsSectionSep =

package/src/journey-map/layout.ts

@@ -1,5 +1,6 @@
 import type { PaletteColors } from '../palettes';
 import { mix, shapeFill } from '../palettes/color-utils';
+import { measureText, wrapTextToWidth } from '../utils/text-measure';
 import type {
   ParsedJourneyMap,
   JourneyMapPhase,
@@ -61,8 +62,6 @@ const TITLE_HEIGHT = 36;
 const PERSONA_HEIGHT = 48;
 // Must match renderer.ts persona panel width
 const PERSONA_PANEL_WIDTH = 280;
-// Approx char width for FONT_SIZE_TITLE 18px bold (Inter)
-const TITLE_HEADER_CHAR_WIDTH = 10;
 const HEADER_GAP = 24;
 const CURVE_AREA_HEIGHT = 260;
 const CARD_GAP = 8;
@@ -89,6 +88,21 @@ export function scoreToColor(score: number, palette: PaletteColors): string {
   return mix(palette.colors.red, palette.colors.green, t);
 }
 
+// Vertical headroom reserved at the top of the curve area (px). Keep faces
+// off the very edge while still using the full height.
+const CURVE_TOP_RESERVE = 20;
+
+// Map an emotion score (1-5) to a y coordinate within the curve area. Shared
+// by the curve points, the grid lines, and the left-edge score-label faces so
+// all three stay on the same scale (else the labels bunch at the bottom).
+export function scoreToCurveY(score: number, curveAreaBottom: number): number {
+  return (
+    curveAreaBottom -
+    ((score - 1) / 4) * (CURVE_AREA_HEIGHT - CURVE_TOP_RESERVE) -
+    10
+  );
+}
+
 // ============================================================
 // Layout Engine
 // ============================================================
@@ -127,35 +141,41 @@ export function layoutJourneyMap(
     : parsed.steps;
 
   // Compute step card heights based on content (matches kanban card sizing).
-  // Char-width constants MUST match the renderer's wrapText() in renderer.ts
-  // (`fontSize * 0.6`) and the title wrap (`TITLE_CHAR_WIDTH`) — otherwise the
-  // layout reserves too little vertical space and rendered text overflows.
+  // Line counts route through the same `wrapTextToWidth` the renderer uses,
+  // at the same font sizes, so reserved height always matches rendered text.
   const annoIconIndent = ANNO_ICON_SIZE + ANNO_ICON_GAP;
   const annoTextW = STEP_CARD_WIDTH - CARD_PADDING_X * 2 - annoIconIndent;
   const descTextWidth = STEP_CARD_WIDTH - CARD_PADDING_X * 2;
-  const FONT_SIZE_META = 10;
-  const charWidth = FONT_SIZE_META * 0.6; // matches renderer wrapText()
+  const FONT_SIZE_META = 10; // renderer FONT_SIZE_META (desc/anno)
+  const FONT_SIZE_STEP = 12; // renderer FONT_SIZE_STEP (title)
 
   const titleTextWidth = STEP_CARD_WIDTH - CARD_PADDING_X * 2;
-  const titleCharWidth = 6.5; // matches renderer TITLE_CHAR_WIDTH (FONT_SIZE_STEP 12px)
   const TITLE_LINE_HEIGHT = 16;
 
   const stepHeights = allSteps.map((step) => {
-    const titleLines = wrapLineCount(
+    const titleLines = wrapTextToWidth(
       step.title,
-      titleTextWidth,
-      titleCharWidth
-    );
+      FONT_SIZE_STEP,
+      titleTextWidth
+    ).length;
     let h = CARD_PADDING_Y + titleLines * TITLE_LINE_HEIGHT + CARD_PADDING_Y;
     const cardAnnos = step.annotations;
     let contentLines = 0;
     // Description may wrap
     if (step.description) {
-      contentLines += wrapLineCount(step.description, descTextWidth, charWidth);
+      contentLines += wrapTextToWidth(
+        step.description,
+        FONT_SIZE_META,
+        descTextWidth
+      ).length;
     }
     // Annotations: all lines indented past icon
     for (const anno of cardAnnos) {
-      contentLines += wrapLineCount(anno.text, annoTextW, charWidth);
+      contentLines += wrapTextToWidth(
+        anno.text,
+        FONT_SIZE_META,
+        annoTextW
+      ).length;
     }
     if (contentLines > 0) {
       h += contentLines * CARD_META_LINE_HEIGHT + 4; // 4px bottom padding
@@ -217,10 +237,7 @@ export function layoutJourneyMap(
           // Curve point
           if (step.score !== undefined) {
             const curveX = stepX + STEP_CARD_WIDTH / 2;
-            const curveY =
-              curveAreaBottom -
-              ((step.score - 1) / 4) * (CURVE_AREA_HEIGHT - 120) -
-              10;
+            const curveY = scoreToCurveY(step.score, curveAreaBottom);
             curvePoints.push({
               x: curveX,
               y: curveY,
@@ -248,10 +265,7 @@ export function layoutJourneyMap(
               stepCount === 1
                 ? phaseX + phaseWidth / 2
                 : phaseX + padX + (si / (stepCount - 1)) * availW;
-            const curveY =
-              curveAreaBottom -
-              ((step.score - 1) / 4) * (CURVE_AREA_HEIGHT - 120) -
-              10;
+            const curveY = scoreToCurveY(step.score, curveAreaBottom);
             curvePoints.push({
               x: curveX,
               y: curveY,
@@ -328,10 +342,7 @@ export function layoutJourneyMap(
 
       if (step.score !== undefined) {
         const curveX = stepX + STEP_CARD_WIDTH / 2;
-        const curveY =
-          curveAreaBottom -
-          ((step.score - 1) / 4) * (CURVE_AREA_HEIGHT - 20) -
-          10;
+        const curveY = scoreToCurveY(step.score, curveAreaBottom);
         curvePoints.push({
           x: curveX,
           y: curveY,
@@ -373,7 +384,7 @@ export function layoutJourneyMap(
   // this, a single-step journey produces a totalWidth that's narrower than
   // the title + persona row, and the persona panel overlaps the title.
   const headerTitleWidth = hasTitle
-    ? parsed.title!.length * TITLE_HEADER_CHAR_WIDTH
+    ? measureText(parsed.title!, 18) // FONT_SIZE_TITLE (18px bold)
     : 0;
   const personaPanelWidth = parsed.persona ? PERSONA_PANEL_WIDTH : 0;
   const headerWidth =
@@ -402,25 +413,3 @@ export function layoutJourneyMap(
     hasThoughts,
   };
 }
-
-/** Count how many visual lines a text string will occupy when wrapped. */
-function wrapLineCount(
-  text: string,
-  maxWidth: number,
-  charWidth: number
-): number {
-  const maxChars = Math.max(1, Math.floor(maxWidth / charWidth));
-  const words = text.split(/\s+/);
-  let lines = 1;
-  let currentLen = 0;
-  for (const word of words) {
-    const needed = currentLen > 0 ? word.length + 1 : word.length;
-    if (currentLen + needed > maxChars && currentLen > 0) {
-      lines++;
-      currentLen = word.length;
-    } else {
-      currentLen += needed;
-    }
-  }
-  return lines;
-}