@diagrammo/dgmo 0.25.5 → 0.27.0

package/src/cli.ts

@@ -136,7 +136,7 @@ Key options:
 - \`-o <file>\` — output file; format inferred from extension (\`.svg\` → SVG, else PNG)
 - \`-o url\` — output a shareable diagrammo.app URL
 - \`--theme <theme>\` — \`light\` (default), \`dark\`, \`transparent\`
-- \`--palette <name>\` — \`nord\` (default), \`atlas\`, \`blueprint\`, \`slate\`, \`tidewater\`, \`solarized\`, \`catppuccin\`, \`rose-pine\`, \`gruvbox\`, \`tokyo-night\`, \`one-dark\`, \`dracula\`, \`monokai\`
+- \`--palette <name>\` — \`slate\` (default), \`atlas\`, \`blueprint\`, \`nord\`, \`tidewater\`, \`catppuccin\`, \`tokyo-night\`
 - \`--copy\` — copy the URL to clipboard (use with \`-o url\`)
 - \`--chart-types\` — list all supported chart types
 
@@ -309,7 +309,7 @@ end                ❌  not needed — indentation closes blocks in sequence dia
 
 ## Tips
 
-- Default theme: \`light\`, default palette: \`nord\` — ask the user their preference before a final export.
+- Default theme: \`light\`, default palette: \`slate\` — ask the user their preference before a final export.
 - Stdin mode for quick renders: \`echo "..." | dgmo -o out.png\`
 - For C4, \`--c4-level\` drills from context → containers → components → deployment.
 - When auto-detection picks the wrong chart type, add an explicit \`chart:\` directive.
@@ -477,7 +477,7 @@ Options:
                        Use -o url to output a shareable diagrammo.app URL
                        With stdin and no -o, PNG is written to stdout
   --theme <theme>      Theme: ${THEMES.join(', ')} (default: light)
-  --palette <name>     Palette: ${PALETTES.join(', ')} (default: nord)
+  --palette <name>     Palette: ${PALETTES.join(', ')} (default: slate)
   --copy               Copy URL to clipboard (only with -o url)
   --json               Output structured JSON to stdout
   --chart-types        List all supported chart types
@@ -528,7 +528,7 @@ function parseArgs(argv: string[]): {
     input: undefined as string | undefined,
     output: undefined as string | undefined,
     theme: 'light' as (typeof THEMES)[number],
-    palette: 'nord',
+    palette: 'slate',
     help: false,
     version: false,
     copy: false,

package/src/completion-types.ts

@@ -15,7 +15,6 @@ export type ChartType = string;
 export interface DiagramSymbols {
   kind: ChartType;
   entities: string[]; // table names, node IDs, class names, etc.
-  keywords: string[]; // diagram-specific reserved words
   /**
    * Map of alias-literal → canonical entity name, collected from
    * `Name as <alias>` declarations in the document. Editor surfaces

package/src/completion.ts

@@ -16,7 +16,11 @@ import { extractSymbols as extractFlowchartSymbols } from './graph/flowchart-par
 import { extractSymbols as extractInfraSymbols } from './infra/parser';
 import { extractSymbols as extractClassSymbols } from './class/parser';
 import { extractPertSymbols } from './pert/parser';
-import { parseFirstLine, ALL_CHART_TYPES } from './utils/parsing';
+import {
+  parseFirstLine,
+  ALL_CHART_TYPES,
+  measureIndent,
+} from './utils/parsing';
 import { RECOGNIZED_COLOR_NAMES } from './colors';
 
 const RECOGNIZED_COLOR_SET: ReadonlySet<string> = new Set(
@@ -92,14 +96,8 @@ const GLOBAL_DIRECTIVES: Record<string, DirectiveValueSpec> = {
     description: 'Color palette name',
     values: [
       'nord',
-      'solarized',
       'catppuccin',
-      'rose-pine',
-      'gruvbox',
       'tokyo-night',
-      'one-dark',
-      'dracula',
-      'monokai',
       'atlas',
       'blueprint',
       'slate',
@@ -289,12 +287,13 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
   ],
   [
     'flowchart',
-    // Spec §5 §4.6: direction-lr, orientation-vertical, solid-fill
+    // Spec §5 §4.6: direction-lr, orientation-vertical, solid-fill, no-notes
     withGlobals({
       'direction-lr': { description: 'Switch to left-to-right layout' },
       'orientation-vertical': {
         description: 'Use vertical orientation for ranks',
       },
+      'no-notes': { description: 'Suppress all node note boxes' },
     }),
   ],
   ['class', withGlobals({})],
@@ -363,9 +362,10 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
   ],
   [
     'state',
-    // Spec §6 §5.5: direction-tb, solid-fill.
+    // Spec §6 §5.6: direction-tb, solid-fill, no-notes.
     withGlobals({
       'direction-tb': { description: 'Switch to top-to-bottom layout' },
+      'no-notes': { description: 'Suppress all state note boxes' },
     }),
   ],
   [
@@ -447,7 +447,10 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       direction: { description: 'Layout direction', values: ['LR', 'TB'] },
       'active-tag': { description: 'Active tag group name' },
       hide: { description: 'Hide tag:value pairs' },
-      'box-metric': { description: 'Metric label for the value ramp' },
+      'box-metric': {
+        description:
+          'Metric label for the value ramp, with an optional trailing [low] [high] color pair',
+      },
       'show-values': { description: 'Print box values as text' },
     }),
   ],
@@ -519,7 +522,10 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
     // content keywords, not directives; metadata keys (value/label/style) live
     // in the reserved-key registry.
     withGlobals({
-      'region-metric': { description: 'Label for the region value ramp' },
+      'region-metric': {
+        description:
+          'Label for the region value ramp, with an optional trailing [low] [high] color pair',
+      },
       'poi-metric': {
         description: 'Label for the POI value (marker size) channel',
       },
@@ -548,11 +554,19 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       'no-region-labels': {
         description: 'Turn off subdivision name labels (on by default)',
       },
+      'no-region-value': {
+        description:
+          'Turn off the metric value shown under each region (on by default)',
+      },
       'no-poi-labels': { description: 'Turn off POI labels (on by default)' },
       'no-colorize': {
         description:
           'Force plain green-land reference dress (regions are auto-coloured by default)',
       },
+      'no-cities': {
+        description:
+          'Turn off the subtle city dots scattered across the basemap (on by default)',
+      },
       'no-cluster-pois': {
         description:
           'Always fan out coincident POI markers instead of collapsing them into a count badge',
@@ -648,6 +662,69 @@ export const ENTITY_TYPES = new Map<string, string[]>([
   ],
 ]);
 
+// ============================================================
+// Structural keywords for line-leading completion
+// ============================================================
+
+/**
+ * Chart-type-specific structural keywords offered on an empty/start-of-line in
+ * the data zone (block openers like `loop`, section headers like `containers`,
+ * the `tag` block declaration, etc.). This is the single source of truth for
+ * the editor's structural-keyword popup — every entry MUST be a token the
+ * corresponding parser actually recognizes (validated by the
+ * completion-conformance suite). Do NOT add removed/diagnostic-only tokens
+ * (e.g. cycle's `no-descriptions`) or tokens the parser ignores.
+ *
+ * Chart types not listed here have no structural keywords (most data charts).
+ */
+export const STRUCTURAL_KEYWORDS = new Map<string, string[]>([
+  ['sequence', ['if', 'else', 'loop', 'parallel', 'note', 'tag']],
+  ['gantt', ['era', 'marker', 'holiday', 'workweek', 'parallel', 'tag']],
+  ['c4', ['containers', 'components', 'deployment', 'tag']],
+  ['timeline', ['era', 'marker', 'tag']],
+  ['org', ['tag']],
+  ['kanban', ['tag']],
+  ['sitemap', ['tag']],
+  ['infra', ['tag']],
+  ['pert', ['tag']],
+  ['mindmap', ['tag']],
+  ['boxes-and-lines', ['tag']],
+  ['er', ['tag']],
+  ['cycle', ['direction-counterclockwise', 'circle-nodes']],
+  ['journey-map', ['persona', 'tag']],
+  ['raci', ['roles']],
+  ['tech-radar', ['rings']],
+  [
+    'wireframe',
+    [
+      'nav',
+      'tabs',
+      'table',
+      'image',
+      'modal',
+      'skeleton',
+      'alert',
+      'progress',
+      'chart',
+      'mobile',
+      'tag',
+    ],
+  ],
+  ['class', ['abstract', 'interface', 'enum', 'extends', 'implements']],
+]);
+
+/**
+ * Chart types that support `tag` block declarations (and thus the
+ * `alias`/`default` sub-keywords inside a tag block). Derived from
+ * STRUCTURAL_KEYWORDS so the two can never drift — a chart supports tag blocks
+ * iff it offers the `tag` keyword.
+ */
+export const TAG_SUPPORTING_TYPES: ReadonlySet<string> = new Set(
+  [...STRUCTURAL_KEYWORDS]
+    .filter(([, kws]) => kws.includes('tag'))
+    .map(([type]) => type)
+);
+
 // ============================================================
 // Pipe metadata for inline `| key value` on data lines
 // ============================================================
@@ -992,7 +1069,6 @@ function extractSequenceSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'sequence',
     entities,
-    keywords: ['if', 'else', 'loop', 'parallel', 'note'],
   };
 }
 
@@ -1031,7 +1107,7 @@ function extractStateSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'state', entities, keywords: [] };
+  return { kind: 'state', entities };
 }
 
 // ============================================================
@@ -1247,7 +1323,7 @@ function extractSitemapSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'sitemap', entities, keywords: [] };
+  return { kind: 'sitemap', entities };
 }
 
 // ============================================================
@@ -1326,7 +1402,6 @@ function extractC4Symbols(docText: string): DiagramSymbols {
   return {
     kind: 'c4',
     entities,
-    keywords: ['containers', 'components', 'deployment'],
   };
 }
 
@@ -1429,7 +1504,7 @@ function extractGanttSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'gantt', entities, keywords: [] };
+  return { kind: 'gantt', entities };
 }
 
 // ============================================================
@@ -1487,7 +1562,7 @@ function extractBoxesAndLinesSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'boxes-and-lines', entities, keywords: [] };
+  return { kind: 'boxes-and-lines', entities };
 }
 
 // ============================================================
@@ -1540,7 +1615,7 @@ function extractOrgSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'org', entities, keywords: [] };
+  return { kind: 'org', entities };
 }
 
 // ============================================================
@@ -1592,7 +1667,7 @@ function extractKanbanSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'kanban', entities, keywords: [] };
+  return { kind: 'kanban', entities };
 }
 
 // ============================================================
@@ -1635,7 +1710,7 @@ function extractMindmapSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'mindmap', entities, keywords: [] };
+  return { kind: 'mindmap', entities };
 }
 
 // ============================================================
@@ -1668,7 +1743,7 @@ function extractPyramidSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'pyramid', entities, keywords: ['inverted'] };
+  return { kind: 'pyramid', entities };
 }
 
 // ============================================================
@@ -1701,7 +1776,7 @@ function extractRingSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'ring', entities, keywords: [] };
+  return { kind: 'ring', entities };
 }
 
 // ============================================================
@@ -1736,7 +1811,7 @@ function extractArcSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'arc', entities, keywords: [] };
+  return { kind: 'arc', entities };
 }
 
 // ============================================================
@@ -1775,7 +1850,7 @@ function extractSankeySymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'sankey', entities, keywords: [] };
+  return { kind: 'sankey', entities };
 }
 
 // ============================================================
@@ -1835,7 +1910,7 @@ function extractTimelineSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'timeline', entities, keywords: ['era', 'marker'] };
+  return { kind: 'timeline', entities };
 }
 
 // ============================================================
@@ -1867,7 +1942,7 @@ function extractVennSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'venn', entities, keywords: [] };
+  return { kind: 'venn', entities };
 }
 
 // ============================================================
@@ -1901,7 +1976,7 @@ function extractQuadrantSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'quadrant', entities, keywords: [] };
+  return { kind: 'quadrant', entities };
 }
 
 // ============================================================
@@ -1936,7 +2011,7 @@ function extractSlopeSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'slope', entities, keywords: ['period'] };
+  return { kind: 'slope', entities };
 }
 
 // ============================================================
@@ -1983,7 +2058,7 @@ function extractDataChartSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: chartType, entities, keywords: [] };
+  return { kind: chartType, entities };
 }
 
 // ============================================================
@@ -2034,23 +2109,6 @@ registerExtractor('chord', extractDataChartSymbols);
 
 function extractTechRadarSymbols(docText: string): DiagramSymbols {
   const entities: string[] = [];
-  const keywords: string[] = [
-    'rings',
-    'quadrant',
-    'ring',
-    'trend',
-    'new',
-    'up',
-    'down',
-    'stable',
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-    'alias',
-    'aka',
-    'color',
-  ];
 
   // Extract ring names and aliases from the rings block
   const lines = docText.split('\n');
@@ -2078,7 +2136,7 @@ function extractTechRadarSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'tech-radar', entities, keywords };
+  return { kind: 'tech-radar', entities };
 }
 
 // ============================================================
@@ -2121,7 +2179,6 @@ function extractCycleSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'cycle',
     entities,
-    keywords: ['direction-counterclockwise', 'circle-nodes'],
   };
 }
 
@@ -2169,7 +2226,7 @@ function extractRaciSymbols(docText: string): DiagramSymbols {
       continue;
     }
 
-    const indent = line.length - line.trimStart().length;
+    const indent = measureIndent(line);
 
     // Header directives
     if (indent === 0) {
@@ -2218,7 +2275,6 @@ function extractRaciSymbols(docText: string): DiagramSymbols {
   return {
     kind: chartType,
     entities,
-    keywords: ['variant', 'roles'],
   };
 }
 
@@ -2271,6 +2327,5 @@ function extractJourneyMapSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'journey-map',
     entities,
-    keywords: ['persona', 'pain', 'opportunity', 'thought', 'description'],
   };
 }

package/src/cycle/layout.ts

@@ -16,23 +16,18 @@ import {
   wrapDescriptionLines,
   type WrappedDescLine,
 } from '../utils/wrapped-desc';
+import { measureText, wrapTextToWidth } from '../utils/text-measure';
 
 /** Minimum arc angle in radians (~15°) to keep arcs readable. */
 const MIN_ARC_ANGLE = (15 * Math.PI) / 180;
 
-/** Estimated character width at 13px label font. */
-const LABEL_CHAR_W = 8;
-
-/** Estimated character width at 16px circle label font. */
-const CIRCLE_LABEL_CHAR_W = 10;
-
-/**
- * Estimated character width at 11px description font (Inter).
- * Average glyph width is ~5.5–6.0 px for typical English text — using 6.0
- * gives us a small margin of safety for wide glyphs (m, w) without leaving
- * obvious dead space on the right side of the rectangle.
- */
-const DESC_CHAR_W = 6.0;
+// ── Font sizes (must match cycle/renderer.ts) ──
+// Layout sizes nodes/labels from text; the renderer draws them. Both measure
+// the same string at the same font size so reserved space matches ink.
+const LABEL_FONT_SIZE = 13;
+const CIRCLE_LABEL_FONT_SIZE = 16;
+const DESC_FONT_SIZE = 11;
+const EDGE_LABEL_FONT_SIZE = 11;
 
 /** Minimum node width. */
 const MIN_NODE_WIDTH = 70;
@@ -105,7 +100,7 @@ export function computeCycleLayout(
     const hasDesc = !hideDescriptions && node.description.length > 0;
     const labelWidth = Math.max(
       MIN_NODE_WIDTH,
-      node.label.length * LABEL_CHAR_W + NODE_PAD_X * 2
+      measureText(node.label, LABEL_FONT_SIZE) + NODE_PAD_X * 2
     );
 
     if (circleNodes) {
@@ -422,9 +417,13 @@ function wrapDescForWidth(
   description: readonly string[],
   nodeWidth: number
 ): WrappedDescLine[] {
-  const textWidth = nodeWidth - NODE_PAD_X * 2;
-  const charsPerLine = Math.max(8, Math.floor(textWidth / DESC_CHAR_W));
-  return wrapDescriptionLines([...description], charsPerLine);
+  // Wrap to a real pixel budget. `wrapDescriptionLines` is bullet-aware (it
+  // emits bullet-first/cont kinds the renderer relies on), so feed it a pixel
+  // `lengthFn` + pixel limit instead of a character count.
+  const textWidth = Math.max(40, nodeWidth - NODE_PAD_X * 2);
+  return wrapDescriptionLines([...description], textWidth, (s) =>
+    measureText(s, DESC_FONT_SIZE)
+  );
 }
 
 // ── Renderer-aligned font/line-height clamps ──
@@ -463,11 +462,12 @@ function renderedDescNodeHeight(numLines: number, scale: number): number {
 // ── Edge-label wrapping (shared with renderer) ──
 
 /**
- * Maximum characters per line for edge labels and edge descriptions.
+ * Maximum pixel width per line for edge labels and edge descriptions.
  * Long single-line text gets wrapped to multiple lines so it doesn't
- * shoot off-canvas when positioned at a cycle quadrant.
+ * shoot off-canvas when positioned at a cycle quadrant. ~197px ≈ the old
+ * 32-char budget at the 11px edge-label font.
  */
-export const EDGE_LABEL_MAX_CHARS = 32;
+export const EDGE_LABEL_MAX_WIDTH = 197;
 
 /**
  * Wrap an edge label string + description lines into rendered lines.
@@ -478,37 +478,18 @@ export const EDGE_LABEL_MAX_CHARS = 32;
 export function wrapEdgeLabelText(
   label: string | undefined,
   description: readonly string[],
-  maxChars: number = EDGE_LABEL_MAX_CHARS
+  maxWidth: number = EDGE_LABEL_MAX_WIDTH
 ): { labelLines: string[]; descLines: string[] } {
-  const labelLines = label ? wrapLines([label], maxChars) : [];
+  const labelLines = label
+    ? wrapTextToWidth(label, EDGE_LABEL_FONT_SIZE, maxWidth)
+    : [];
   const descLines: string[] = [];
   for (const d of description) {
-    descLines.push(...wrapLines([d], maxChars));
+    descLines.push(...wrapTextToWidth(d, EDGE_LABEL_FONT_SIZE, maxWidth));
   }
   return { labelLines, descLines };
 }
 
-// ── Helper: word-wrap lines ──
-
-function wrapLines(lines: readonly string[], charsPerLine: number): string[] {
-  const result: string[] = [];
-  for (const line of lines) {
-    const words = line.split(/\s+/);
-    let current = '';
-    for (const word of words) {
-      const test = current ? `${current} ${word}` : word;
-      if (test.length > charsPerLine && current) {
-        result.push(current);
-        current = word;
-      } else {
-        current = test;
-      }
-    }
-    if (current) result.push(current);
-  }
-  return result;
-}
-
 // ── Helper: circle node dimensions ──
 
 function computeCircleNodeDims(
@@ -516,7 +497,7 @@ function computeCircleNodeDims(
   hasDesc: boolean
 ): { width: number; height: number; wrappedDesc: WrappedDescLine[] } {
   if (!hasDesc) {
-    const textW = node.label.length * CIRCLE_LABEL_CHAR_W;
+    const textW = measureText(node.label, CIRCLE_LABEL_FONT_SIZE);
     const r = Math.max(MIN_CIRCLE_RADIUS, textW / 2 + CIRCLE_PAD);
     return { width: r * 2, height: r * 2, wrappedDesc: [] };
   }
@@ -529,7 +510,7 @@ function computeCircleNodeDims(
     const textBlockH = totalLines * DESC_LINE_HEIGHT + CIRCLE_PAD;
 
     if (textBlockH / 2 <= r * 0.85) {
-      const labelW = node.label.length * CIRCLE_LABEL_CHAR_W;
+      const labelW = measureText(node.label, CIRCLE_LABEL_FONT_SIZE);
       const labelY = -textBlockH / 2 + DESC_LINE_HEIGHT;
       const availW = 2 * Math.sqrt(Math.max(0, r * r - labelY * labelY));
       if (labelW <= availW - CIRCLE_PAD) {
@@ -563,29 +544,32 @@ function wrapLinesForCircle(
   descriptions: readonly string[],
   radius: number
 ): string[] {
-  // First pass: wrap with center-width to estimate line count
+  // First pass: wrap to the center pixel-width to estimate line count.
   const centerWidth = radius * 2 * 0.75;
-  const centerChars = Math.max(8, Math.floor(centerWidth / DESC_CHAR_W));
-  const roughWrapped = wrapLines(descriptions, centerChars);
+  const roughWrapped = descriptions.flatMap((d) =>
+    wrapTextToWidth(d, DESC_FONT_SIZE, centerWidth)
+  );
   const totalLines = 1 + roughWrapped.length; // +1 for label line
   const blockH = totalLines * DESC_LINE_HEIGHT;
 
-  // Second pass: re-wrap each source line with position-aware width
+  // Second pass: re-wrap each source line with a position-aware pixel width —
+  // wider near the circle's vertical center, narrower toward the edges.
   const result: string[] = [];
   let lineIdx = 1; // start after label line
   for (const srcLine of descriptions) {
-    const words = srcLine.split(/\s+/);
+    const words = srcLine.split(/\s+/).filter((w) => w.length > 0);
     let current = '';
     for (const word of words) {
-      // Compute available width at this line's y position
+      // Compute available pixel width at this line's y position.
       const y = -blockH / 2 + (lineIdx + 0.5) * DESC_LINE_HEIGHT;
       const rSq = radius * radius;
-      const availPx =
-        y * y < rSq ? 2 * Math.sqrt(rSq - y * y) - CIRCLE_PAD * 2 : centerWidth;
-      const maxChars = Math.max(6, Math.floor(availPx / DESC_CHAR_W));
+      const availPx = Math.max(
+        20,
+        y * y < rSq ? 2 * Math.sqrt(rSq - y * y) - CIRCLE_PAD * 2 : centerWidth
+      );
 
       const test = current ? `${current} ${word}` : word;
-      if (test.length > maxChars && current) {
+      if (measureText(test, DESC_FONT_SIZE) > availPx && current) {
         result.push(current);
         lineIdx++;
         current = word;
@@ -725,16 +709,18 @@ function computeEdgePaths(
       edge.description
     );
     const lineCount = labelLines.length + descLines.length;
-    let maxCharLen = 0;
-    for (const l of labelLines) maxCharLen = Math.max(maxCharLen, l.length);
-    for (const l of descLines) maxCharLen = Math.max(maxCharLen, l.length);
+    let labelPxW = 0;
+    for (const l of labelLines)
+      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE));
+    for (const l of descLines)
+      labelPxW = Math.max(labelPxW, measureText(l, EDGE_LABEL_FONT_SIZE));
     const { labelX, labelY, labelAngle } = computeEdgeLabelPosition(
       midAngle,
       radius,
       cx,
       cy,
       lineCount,
-      maxCharLen,
+      labelPxW,
       layoutNodes
     );
     const layoutEdge: CycleLayoutEdge = {
@@ -769,10 +755,10 @@ function computeEdgeLabelPosition(
   cx: number,
   cy: number,
   lineCount: number,
-  maxCharLen: number,
+  labelPxW: number,
   layoutNodes: CycleLayoutNode[]
 ): { labelX: number; labelY: number; labelAngle: number } {
-  if (lineCount === 0 || maxCharLen === 0) {
+  if (lineCount === 0 || labelPxW === 0) {
     return {
       labelX: cx + radius * Math.cos(midAngle),
       labelY: cy + radius * Math.sin(midAngle),
@@ -781,7 +767,7 @@ function computeEdgeLabelPosition(
   }
 
   const EDGE_LABEL_CORNER_OFFSET = 10;
-  const labelW = maxCharLen * EDGE_LABEL_CHAR_W;
+  const labelW = labelPxW;
   const labelH = lineCount * 15;
   const cosT = Math.cos(midAngle);
   const sinT = Math.sin(midAngle);
@@ -867,9 +853,6 @@ function computeEdgeLabelPosition(
   };
 }
 
-/** Estimated character width at 11px edge label font. */
-const EDGE_LABEL_CHAR_W = 7;
-
 /**
  * Check if edge labels overflow the canvas and return a reduced radius if needed.
  * Returns null if everything fits.
@@ -910,12 +893,12 @@ function fitToCanvas(
       le.label,
       edge.description
     );
-    let maxLineLen = 0;
-    for (const l of labelLines) maxLineLen = Math.max(maxLineLen, l.length);
-    for (const l of descLines) maxLineLen = Math.max(maxLineLen, l.length);
-    if (maxLineLen === 0) continue;
-
-    const textWidth = maxLineLen * EDGE_LABEL_CHAR_W;
+    let textWidth = 0;
+    for (const l of labelLines)
+      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE));
+    for (const l of descLines)
+      textWidth = Math.max(textWidth, measureText(l, EDGE_LABEL_FONT_SIZE));
+    if (textWidth === 0) continue;
 
     // Determine text-anchor direction from label angle (mirrors renderer logic)
     const normAngle =