@diagrammo/dgmo 0.26.0 → 0.27.0

package/src/palettes/color-utils.ts

@@ -155,6 +155,54 @@ export function mix(a: string, b: string, pct: number): string {
   return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
 }
 
+// ============================================================
+// Value Ramp (the shared `<metric> <low?> <high?>` coloring convention)
+// ============================================================
+//
+// Single source of truth for value-ramp fills across chart types (map
+// `region-metric`, boxes-and-lines `box-metric`, and any future ramp). Callers
+// resolve the two endpoint NAMES to palette hex, then ask for the fill at a
+// normalized position `t∈[0,1]`. The helper owns ONLY the low→high blend; each
+// caller keeps its own RAMP_FLOOR / base remap of `t`.
+//
+// The blend is a straight sRGB fade between the two true palette endpoints — no
+// invented intermediate hue. `t=0` is exactly `low`, `t=1` is exactly `high`,
+// and everything between is a direct interpolation of those two palette colours.
+// (resvg has no `color-mix()`; `mix()` pre-computes the hex.)
+
+/**
+ * Value-ramp fill at normalized position `t`. PURE and order-respecting:
+ * `t=0` → exactly `low`, `t=1` → exactly `high`, no sorting or intent
+ * correction. `low`/`high` are resolved hex (the caller maps colour names →
+ * palette hex). A straight sRGB fade between the two palette colours — no
+ * synthetic midpoint hue. `_opts` is retained for call-site/theme compat.
+ */
+export function valueRampColor(
+  low: string,
+  high: string,
+  t: number,
+  _opts: { isDark: boolean }
+): string {
+  const tc = Math.max(0, Math.min(1, t));
+  return mix(high, low, tc * 100);
+}
+
+/**
+ * Gradient stops that reproduce `valueRampColor` for a legend
+ * `<linearGradient>`. A direct two-endpoint fade needs only the two stops; the
+ * gradient itself interpolates between the palette colours.
+ */
+export function valueRampStops(
+  low: string,
+  high: string,
+  _opts: { isDark: boolean }
+): ReadonlyArray<{ offset: number; color: string }> {
+  return [
+    { offset: 0, color: low },
+    { offset: 1, color: high },
+  ];
+}
+
 // ============================================================
 // Contrast / Accessibility
 // ============================================================
@@ -204,7 +252,7 @@ export function contrastRatio(a: string, b: string): number {
  *     tokyo-night green `#9ece6a` min 106, ratio 11.4:1 all correctly pick dark).
  *  3. **Saturated fill (min RGB < 100, luminance ≤ 0.55)** → `lightText`. At least
  *     one channel near zero signals true saturation — gruvbox dark green
- *     `#b8bb26` (min 38), one-dark blue `#4078f2` (min 64), bold red/blue
+ *     `#b8bb26` (min 38), blueprint blue `#1f5e8c` (min 31), bold red/blue
  *     (min 0), solarized blue `#268bd2` (min 38). The user consistently
  *     prefers light text on these for visual punch.
  *
@@ -280,33 +328,46 @@ export function getSeriesColors(palette: PaletteColors): string[] {
  * Generate `count` visually distinct colors for segment-based charts
  * (pie, doughnut, polar-area).
  *
- * Problem: several palettes have duplicate hex values for different named
- * colors (e.g. Solarized teal===cyan, One Dark orange===yellow), and the
- * 8-color modulo cycle repeats when there are more than 8 segments.
+ * Stays ON-PALETTE: the first pass is the palette's own series hues at full
+ * strength. When a chart needs more segments than the palette has distinct
+ * hues, additional passes reuse the SAME hues at shifted lightness — each a
+ * tint (mixed toward `bg`) or shade (mixed toward `text`) of a true palette
+ * colour. Hue is never rotated or invented; extra segments read as lighter /
+ * darker variants of the palette, not as wheel-generated colours.
  *
- * Solution: generate evenly-spaced hues using the palette's characteristic
- * saturation and lightness, guaranteeing every segment gets a unique,
- * perceptually distinct color regardless of segment count.
+ * (Several palettes have duplicate hex for different named colours — e.g.
+ * teal===cyan — so the first pass is deduped before the lightness bands kick in.)
  */
 export function getSegmentColors(
   palette: PaletteColors,
   count: number
 ): string[] {
-  const base = getSeriesColors(palette);
-  const unique = [...new Set(base)];
-  const hsls = unique.map(hexToHSL);
-
-  const avgS = Math.round(hsls.reduce((s, c) => s + c.s, 0) / hsls.length);
-  const avgL = Math.round(hsls.reduce((s, c) => s + c.l, 0) / hsls.length);
-
-  // Start from the palette's blue hue (first in series) for consistency.
-  // hsls has at least 1 entry because getSeriesColors always returns 8.
-  const startHue = hsls[0]?.h ?? 0;
-  const step = 360 / count;
+  if (count <= 0) return [];
+  const base = [...new Set(getSeriesColors(palette))];
+  if (count <= base.length) return base.slice(0, count);
+
+  // Lightness bands of the SAME hues — alternating tint/shade, progressively
+  // stronger. Mixing toward the neutral bg/text keeps hue, varying only
+  // lightness/saturation (a tint/fade). Symmetric across light & dark themes:
+  // `bg` is light/dark and `text` is its inverse, so the two directions always
+  // diverge.
+  const { bg, text } = palette;
+  const variants: ReadonlyArray<(c: string) => string> = [
+    (c) => mix(c, bg, 55), // lighter
+    (c) => mix(c, text, 55), // darker
+    (c) => mix(c, bg, 35),
+    (c) => mix(c, text, 35),
+  ];
 
-  return Array.from({ length: count }, (_, i) =>
-    hslToHex(Math.round((startHue + i * step) % 360), avgS, avgL)
-  );
+  const out = [...base];
+  for (let w = 0; out.length < count; w++) {
+    const variant = variants[w % variants.length]!;
+    for (const c of base) {
+      if (out.length >= count) break;
+      out.push(variant(c));
+    }
+  }
+  return out.slice(0, count);
 }
 
 // ============================================================

package/src/palettes/index.ts

@@ -26,18 +26,11 @@ export {
 export { atlasPalette } from './atlas';
 export { blueprintPalette } from './blueprint';
 export { catppuccinPalette } from './catppuccin';
-export { gruvboxPalette } from './gruvbox';
 export { nordPalette } from './nord';
-export { oneDarkPalette } from './one-dark';
-export { rosePinePalette } from './rose-pine';
 export { slatePalette } from './slate';
-export { solarizedPalette } from './solarized';
 export { tidewaterPalette } from './tidewater';
 export { tokyoNightPalette } from './tokyo-night';
 
-export { draculaPalette } from './dracula';
-export { monokaiPalette } from './monokai';
-
 // ============================================================
 // Public namespace — `palettes` for use with render()
 // ============================================================
@@ -45,14 +38,8 @@ export { monokaiPalette } from './monokai';
 import { atlasPalette } from './atlas';
 import { blueprintPalette } from './blueprint';
 import { catppuccinPalette } from './catppuccin';
-import { draculaPalette } from './dracula';
-import { gruvboxPalette } from './gruvbox';
-import { monokaiPalette } from './monokai';
 import { nordPalette } from './nord';
-import { oneDarkPalette } from './one-dark';
-import { rosePinePalette } from './rose-pine';
 import { slatePalette } from './slate';
-import { solarizedPalette } from './solarized';
 import { tidewaterPalette } from './tidewater';
 import { tokyoNightPalette } from './tokyo-night';
 
@@ -74,11 +61,5 @@ export const palettes = {
   tidewater: tidewaterPalette,
   nord: nordPalette,
   catppuccin: catppuccinPalette,
-  solarized: solarizedPalette,
-  gruvbox: gruvboxPalette,
   tokyoNight: tokyoNightPalette,
-  oneDark: oneDarkPalette,
-  rosePine: rosePinePalette,
-  dracula: draculaPalette,
-  monokai: monokaiPalette,
 } as const satisfies Record<string, PaletteConfig>;

package/src/palettes/registry.ts

@@ -5,7 +5,7 @@ import type { PaletteConfig, PaletteColors } from './types';
 // ============================================================
 
 const PALETTE_REGISTRY = new Map<string, PaletteConfig>();
-const DEFAULT_PALETTE_ID = 'nord';
+const DEFAULT_PALETTE_ID = 'slate';
 
 // ============================================================
 // Validation

package/src/palettes/types.ts

@@ -77,9 +77,9 @@ export interface PaletteColors {
  * hands out the same frozen-shape object on every `getPalette(id)`.
  */
 export interface PaletteConfig {
-  /** Registry key: 'nord', 'solarized', 'catppuccin' */
+  /** Registry key: 'nord', 'slate', 'catppuccin' */
   readonly id: string;
-  /** Display name: 'Nord', 'Solarized', 'Catppuccin' */
+  /** Display name: 'Nord', 'Slate', 'Catppuccin' */
   readonly name: string;
   /** Light mode color definitions */
   readonly light: PaletteColors;

package/src/pert/layout.ts

@@ -20,6 +20,7 @@ import {
   formatSprintCell,
   formatSlackValue,
 } from './internal';
+import { measureText } from '../utils/text-measure';
 
 // Textbook 3×3 PERT/CPM box: top row [ES | dur | EF], middle row
 // [name spanning all three columns], bottom row [LS | slack | LF].
@@ -46,9 +47,8 @@ const SWIMLANE_GAP = 24;
 // Cell-sizing constants — see `computeNodeSizing` below.
 const NODE_CELL_FONT_SIZE = 11;
 const NODE_NAME_FONT_SIZE = 13;
-// Average char width for Inter at sans-serif weights. Conservative;
-// produces a small over-estimate which prevents text from clipping.
-const CELL_CHAR_WIDTH_RATIO = 0.55;
+// Milestone name renders at 12pt with a leading `◆ ` glyph (see renderer).
+const MILESTONE_NAME_FONT_SIZE = 12;
 const CELL_PAD_X = 8;
 const NAME_PAD_X = 6;
 // Anchor icon + gap (renderer reserves space to the left of the name
@@ -88,8 +88,6 @@ export function computeNodeSizing(resolved: ResolvedPert): NodeSizing {
   const sprintMode = resolved.options.sprintMode;
   const sprintNumber = resolved.options.sprintNumber ?? 1;
   const projectStart = resolved.projectStart;
-  const cellCharW = NODE_CELL_FONT_SIZE * CELL_CHAR_WIDTH_RATIO;
-  const nameCharW = NODE_NAME_FONT_SIZE * CELL_CHAR_WIDTH_RATIO;
 
   const fmtSchedule = (v: number | null, isTbd: boolean): string =>
     sprintMode
@@ -100,12 +98,15 @@ export function computeNodeSizing(resolved: ResolvedPert): NodeSizing {
   const fmtDur = (v: number | null, isTbd: boolean): string =>
     formatDuration(v, unit, isTbd ? '?' : null);
 
-  let maxOuterChars = 1;
-  let maxMidChars = 1;
-  let maxNameChars = 1;
-  let maxMilestoneTopChars = 1;
-  let maxMilestoneSlackChars = 0;
-  let maxMilestoneNameChars = 1;
+  // Track the widest rendered pixel width per cell category — measured at
+  // the exact font sizes the renderer draws with so reserved width
+  // matches drawn text.
+  let maxOuterW = 0;
+  let maxMidW = 0;
+  let maxNameW = 0;
+  let maxMilestoneTopW = 0;
+  let maxMilestoneSlackW = 0;
+  let maxMilestoneNameW = 0;
 
   for (const r of resolved.activities) {
     const isTbd = r.es === null;
@@ -113,17 +114,20 @@ export function computeNodeSizing(resolved: ResolvedPert): NodeSizing {
       const dateStr = fmtSchedule(r.es, isTbd);
       const slackStr = fmtSlack(r.slack, isTbd);
       const slackHidden = !isTbd && /^0[a-z]?$/.test(slackStr);
-      maxMilestoneTopChars = Math.max(maxMilestoneTopChars, dateStr.length);
+      maxMilestoneTopW = Math.max(
+        maxMilestoneTopW,
+        measureText(dateStr, NODE_CELL_FONT_SIZE)
+      );
       if (!slackHidden) {
-        maxMilestoneSlackChars = Math.max(
-          maxMilestoneSlackChars,
-          slackStr.length
+        maxMilestoneSlackW = Math.max(
+          maxMilestoneSlackW,
+          measureText(slackStr, NODE_CELL_FONT_SIZE)
         );
       }
-      // The milestone glyph prefix `◆ ` (2 chars worth of width).
-      maxMilestoneNameChars = Math.max(
-        maxMilestoneNameChars,
-        r.activity.name.length + 2
+      // The milestone glyph prefix `◆ ` precedes the name.
+      maxMilestoneNameW = Math.max(
+        maxMilestoneNameW,
+        measureText(`◆ ${r.activity.name}`, MILESTONE_NAME_FONT_SIZE)
       );
       continue;
     }
@@ -133,33 +137,43 @@ export function computeNodeSizing(resolved: ResolvedPert): NodeSizing {
     const lfStr = fmtSchedule(r.lf, isTbd);
     const durStr = fmtDur(r.mu, isTbd);
     const slackStr = fmtSlack(r.slack, isTbd);
-    maxOuterChars = Math.max(
-      maxOuterChars,
-      esStr.length,
-      efStr.length,
-      lsStr.length,
-      lfStr.length
+    maxOuterW = Math.max(
+      maxOuterW,
+      measureText(esStr, NODE_CELL_FONT_SIZE),
+      measureText(efStr, NODE_CELL_FONT_SIZE),
+      measureText(lsStr, NODE_CELL_FONT_SIZE),
+      measureText(lfStr, NODE_CELL_FONT_SIZE)
+    );
+    maxMidW = Math.max(
+      maxMidW,
+      measureText(durStr, NODE_CELL_FONT_SIZE),
+      measureText(slackStr, NODE_CELL_FONT_SIZE)
+    );
+    maxNameW = Math.max(
+      maxNameW,
+      measureText(r.activity.name, NODE_NAME_FONT_SIZE)
     );
-    maxMidChars = Math.max(maxMidChars, durStr.length, slackStr.length);
-    maxNameChars = Math.max(maxNameChars, r.activity.name.length);
   }
 
   // Also account for any collapsed-group rolled-up label width — the
   // renderer draws those with the same textbook-card chrome, so their
   // name needs to fit in the shared `activityWidth`.
   for (const rg of resolved.groups) {
-    maxNameChars = Math.max(maxNameChars, rg.group.name.length);
+    maxNameW = Math.max(
+      maxNameW,
+      measureText(rg.group.name, NODE_NAME_FONT_SIZE)
+    );
   }
 
-  const outerCell = Math.ceil(maxOuterChars * cellCharW) + 2 * CELL_PAD_X;
-  const midCell = Math.ceil(maxMidChars * cellCharW) + 2 * CELL_PAD_X;
+  const outerCell = Math.ceil(maxOuterW) + 2 * CELL_PAD_X;
+  const midCell = Math.ceil(maxMidW) + 2 * CELL_PAD_X;
   const outerNeeded = Math.max(MIN_CELL_WIDTH, outerCell);
   const midNeeded = Math.max(MIN_CELL_WIDTH, midCell);
   const cellsTotalW = 2 * outerNeeded + midNeeded;
 
   // The name dictates a lower bound too — anchor-pinned cards reserve
   // a NAME_PIN_WIDTH on the left, so size for the worst case.
-  const nameTextW = Math.ceil(maxNameChars * nameCharW);
+  const nameTextW = Math.ceil(maxNameW);
   const nameTotalW = nameTextW + NAME_PIN_WIDTH + 2 * NAME_PAD_X;
 
   const activityWidth = Math.max(
@@ -183,17 +197,11 @@ export function computeNodeSizing(resolved: ResolvedPert): NodeSizing {
 
   // Milestones are independent: a one-cell-tall date row, a name row,
   // and (optionally) a slack row. Width should fit whichever is widest.
-  const mTop = Math.ceil(maxMilestoneTopChars * cellCharW) + 2 * CELL_PAD_X;
+  const mTop = Math.ceil(maxMilestoneTopW) + 2 * CELL_PAD_X;
   const mSlack =
-    maxMilestoneSlackChars > 0
-      ? Math.ceil(maxMilestoneSlackChars * cellCharW) + 2 * CELL_PAD_X
-      : 0;
+    maxMilestoneSlackW > 0 ? Math.ceil(maxMilestoneSlackW) + 2 * CELL_PAD_X : 0;
   // Milestone name renders at 12pt with anchor-pin reserve.
-  const mNameCharW = 12 * CELL_CHAR_WIDTH_RATIO;
-  const mName =
-    Math.ceil(maxMilestoneNameChars * mNameCharW) +
-    NAME_PIN_WIDTH +
-    2 * NAME_PAD_X;
+  const mName = Math.ceil(maxMilestoneNameW) + NAME_PIN_WIDTH + 2 * NAME_PAD_X;
   const milestoneWidth = Math.max(
     MIN_MILESTONE_WIDTH,
     Math.min(MAX_MILESTONE_WIDTH, Math.max(mTop, mSlack, mName))

package/src/pert/renderer.ts

@@ -35,6 +35,11 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { contrastText, mix, shapeFill } from '../palettes/color-utils';
 import { ScaleContext } from '../utils/scaling';
+import {
+  measureText,
+  truncateText,
+  wrapTextToWidth,
+} from '../utils/text-measure';
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -164,21 +169,23 @@ function fieldLegendRowHeight(maxDescLines: number): number {
     maxDescLines * FIELD_LEGEND_DESC_LINE_HEIGHT
   );
 }
-// Chars-per-line the description text wraps at for the given column
-// width. 0.55× char-width estimator; floors at 10 so a long single
-// word doesn't run off.
-function fieldLegendWrapChars(colW: number): number {
-  const charW = FIELD_LEGEND_DESC_FONT_SIZE * 0.55;
-  return Math.max(10, Math.floor((colW - 8) / charW));
+// Pixel width the description text wraps within for the given column
+// width (column minus 8px of horizontal padding).
+function fieldLegendDescWidth(colW: number): number {
+  return colW - 8;
 }
 // Total height the field-legend block needs at the given outer width.
 // Accounts for the worst-case description wrap across all 6 cells.
 function fieldLegendHeightFor(width: number): number {
   const colW = width / 3;
-  const wrapChars = fieldLegendWrapChars(colW);
+  const wrapW = fieldLegendDescWidth(colW);
   let maxLines = 1;
   for (const cell of FIELD_LEGEND_CELLS) {
-    const n = wrapTextByChars(cell.desc, wrapChars).length;
+    const n = wrapTextToWidth(
+      cell.desc,
+      FIELD_LEGEND_DESC_FONT_SIZE,
+      wrapW
+    ).length;
     if (n > maxLines) maxLines = n;
   }
   return (
@@ -223,24 +230,6 @@ const FIELD_LEGEND_CELLS: readonly { label: string; desc: string }[] = [
   },
 ];
 
-function wrapTextByChars(text: string, maxChars: number): string[] {
-  const words = text.split(/\s+/);
-  const lines: string[] = [];
-  let line = '';
-  for (const word of words) {
-    if (line.length === 0) {
-      line = word;
-    } else if (line.length + 1 + word.length <= maxChars) {
-      line += ` ${word}`;
-    } else {
-      lines.push(line);
-      line = word;
-    }
-  }
-  if (line) lines.push(line);
-  return lines;
-}
-
 interface ScaledNodeConstants {
   nodeRadius?: number;
   nodeStrokeWidth?: number;
@@ -2172,14 +2161,9 @@ function drawTextbookCard(g: AnySel, a: TextbookCardArgs): void {
   const midCenterY = midRowTop + midRowH / 2;
   const NAME_PAD_X = 6;
   const NAME_PIN_GAP = 4;
-  const charW = sNFS * 0.62;
   const pinReserve = a.pinned ? sPIW + NAME_PIN_GAP : 0;
   const availTextW = Math.max(0, w - 2 * NAME_PAD_X - pinReserve);
-  const maxChars = Math.max(1, Math.floor(availTextW / charW));
-  const displayName =
-    a.name.length > maxChars
-      ? a.name.slice(0, Math.max(1, maxChars - 1)) + '…'
-      : a.name;
+  const displayName = truncateText(a.name, sNFS, availTextW);
   const nameColor = a.midBandLabelColor ?? a.labelColor;
   if (a.pinned) {
     drawAnchorPin(g, x + NAME_PAD_X, midCenterY, nameColor, sPIW, sPIH);
@@ -2342,7 +2326,6 @@ function drawMilestonePill(g: AnySel, a: MilestonePillArgs): void {
   const NAME_PAD_X = 6;
   const NAME_PIN_GAP = 4;
   const NAME_LINE_HEIGHT = 14;
-  const charW = nameSize * 0.62;
 
   let textAreaLeft = x + NAME_PAD_X;
   const textAreaRight = x + w - NAME_PAD_X;
@@ -2352,20 +2335,20 @@ function drawMilestonePill(g: AnySel, a: MilestonePillArgs): void {
   }
   const textCx = (textAreaLeft + textAreaRight) / 2;
   const availW = textAreaRight - textAreaLeft;
-  const maxChars = Math.max(1, Math.floor(availW / charW));
-  const lines = wrapTextByChars(a.name, maxChars).map((line) =>
-    line.length > maxChars
-      ? line.slice(0, Math.max(1, maxChars - 1)) + '…'
-      : line
-  );
+  // Hard-break over-long words so a single long token still fits the
+  // narrow milestone pill rather than overflowing.
+  const lines = wrapTextToWidth(a.name, nameSize, availW, { hardBreak: true });
   const maxLines = Math.max(1, Math.floor(midRowH / NAME_LINE_HEIGHT));
   const visibleLines = lines.slice(0, maxLines);
   if (lines.length > maxLines && visibleLines.length > 0) {
+    // More lines than fit — force a trailing ellipsis on the last
+    // visible line to signal the truncation, fitting it to the text area.
     const last = visibleLines[visibleLines.length - 1]!;
+    const withEllipsis = `${last}…`;
     visibleLines[visibleLines.length - 1] =
-      last.length > maxChars - 1
-        ? last.slice(0, Math.max(1, maxChars - 1)) + '…'
-        : last + '…';
+      measureText(withEllipsis, nameSize) <= availW
+        ? withEllipsis
+        : truncateText(last, nameSize, availW);
   }
   const startCy =
     midCenterY - ((visibleLines.length - 1) * NAME_LINE_HEIGHT) / 2;
@@ -2853,7 +2836,11 @@ function renderFieldLegendBlock(
       .attr('fill-opacity', 0)
       .attr('pointer-events', 'all');
 
-    const descLines = wrapTextByChars(cell.desc, fieldLegendWrapChars(colW));
+    const descLines = wrapTextToWidth(
+      cell.desc,
+      FIELD_LEGEND_DESC_FONT_SIZE,
+      fieldLegendDescWidth(colW)
+    );
     const descBlockHeight =
       FIELD_LEGEND_DESC_FONT_SIZE +
       Math.max(descLines.length - 1, 0) * FIELD_LEGEND_DESC_LINE_HEIGHT;

package/src/pyramid/renderer.ts

@@ -16,6 +16,7 @@ import {
 } from '../palettes/color-utils';
 import { resolveColor } from '../colors';
 import { renderInlineText } from '../utils/inline-markdown';
+import { CHAR_WIDTH_RATIO, measureText } from '../utils/text-measure';
 import {
   wrapDescriptionLines,
   type WrappedDescLine,
@@ -45,8 +46,6 @@ const DESC_GAP = 28;
 const DESC_ACCENT_WIDTH = 3;
 /** Gap between accent bar and description text. */
 const DESC_ACCENT_GAP = 12;
-/** Approximate ratio of average glyph width to font size (sans-serif). */
-const CHAR_WIDTH_RATIO = 0.55;
 /** Pixel offset between bullet glyph column and body-text column. */
 const BULLET_BODY_INDENT = 10;
 
@@ -250,7 +249,8 @@ export function renderPyramid(
     // portion stays readable. Only when needed — wide segments don't need
     // the visual noise of a stroke.
     const labelFitsInside =
-      Math.min(topHalf, botHalf) * 2 > layout.labelFont * 4;
+      Math.min(topHalf, botHalf) * 2 >
+      measureText(layer.label, layout.labelFont);
     const haloColor =
       textColor === palette.textOnFillLight
         ? palette.textOnFillDark
@@ -496,11 +496,10 @@ function renderLayerDescriptions(
   const bulletColRightEdge = layout.leftAccentX - DESC_ACCENT_GAP;
   const computeBulletColLeftX = (lines: WrappedDescLine[]): number => {
     if (side === 'right') return layout.rightTextX;
-    const charW = descFont * CHAR_WIDTH_RATIO;
     let maxBodyW = 0;
     for (const l of lines) {
       if (l.kind === 'bullet-first' || l.kind === 'bullet-cont') {
-        maxBodyW = Math.max(maxBodyW, l.text.length * charW);
+        maxBodyW = Math.max(maxBodyW, measureText(l.text, descFont));
       }
     }
     return bulletColRightEdge - maxBodyW - BULLET_BODY_INDENT;