@diagrammo/dgmo 0.25.5 → 0.27.0

package/src/cycle/renderer.ts

@@ -31,6 +31,7 @@ import {
 } from './types';
 import { computeCycleLayout, wrapEdgeLabelText } from './layout';
 import { ScaleContext } from '../utils/scaling';
+import { measureText } from '../utils/text-measure';
 
 // ── Constants ────────────────────────────────────────────────
 const NODE_FONT_SIZE = 13;
@@ -502,12 +503,16 @@ export function renderCycle(
     const anchor = isRight ? 'start' : isLeft ? 'end' : 'middle';
 
     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);
-
-    const edgeCharW = Math.max(4, 7 * layout.scale);
-    const bgW = maxCharLen * edgeCharW + 12;
+    // Measure the widest rendered line in pixels at the scaled edge-label font
+    // so the background box matches the actual ink (same measurer the layout
+    // uses to size + place the label).
+    let maxLineW = 0;
+    for (const l of labelLines)
+      maxLineW = Math.max(maxLineW, measureText(l, scaledEdgeLabelFont));
+    for (const l of descLines)
+      maxLineW = Math.max(maxLineW, measureText(l, scaledDescFont));
+
+    const bgW = maxLineW + 12;
     const bgH = lineCount * scaledEdgeLineH + 6;
     const bgX = isRight
       ? le.labelX - 4

package/src/d3.ts

@@ -6,6 +6,7 @@ import cloud from 'd3-cloud';
 import { FONT_FAMILY } from './fonts';
 import { computeQuadrantPointLabels, type LabelRect } from './label-layout';
 import { MONTH_ABBR, computeTimeTicks } from './utils/time-ticks';
+import { measureText, wrapTextToWidth } from './utils/text-measure';
 import type { D3ExportDimensions } from './utils/d3-types';
 import { ScaleContext } from './utils/scaling';
 
@@ -140,6 +141,8 @@ export interface ParsedVisualization {
   timelineDefaultSwimlaneTG?: string;
   timelineScale: boolean;
   timelineSwimlanes: boolean;
+  /** Authored `active-tag <group|none|metric>` directive (§15.6); resolved at render. */
+  timelineActiveTag?: string;
   vennSets: VennSet[];
   vennOverlaps: VennOverlap[];
   // Quadrant chart fields
@@ -181,6 +184,7 @@ import {
 import {
   collectIndentedValues,
   extractColor,
+  measureIndent,
   normalizeNumericToken,
   parseFirstLine,
   peelTrailingColorName,
@@ -396,7 +400,7 @@ export function parseVisualization(
     // In-bounds by loop guard.
     const rawLine = lines[i]!;
     const line = rawLine.trim();
-    const indent = rawLine.length - rawLine.trimStart().length;
+    const indent = measureIndent(rawLine);
     const lineNumber = i + 1;
 
     // Skip empty lines
@@ -800,6 +804,27 @@ export function parseVisualization(
       }
     }
 
+    // Timeline display directives (§15.6, space-separated, no colon):
+    //   no-scale         — drop the date axis/scale
+    //   swimlanes        — force lane backgrounds
+    //   active-tag <X>   — authored active tag group / `none` / value-ramp label
+    if (result.type === 'timeline') {
+      const lower = line.toLowerCase();
+      if (lower === 'no-scale') {
+        result.timelineScale = false;
+        continue;
+      }
+      if (lower === 'swimlanes') {
+        result.timelineSwimlanes = true;
+        continue;
+      }
+      const activeTagMatch = line.match(/^active-tag\s+(.+)$/i);
+      if (activeTagMatch) {
+        result.timelineActiveTag = activeTagMatch[1]!.trim();
+        continue;
+      }
+    }
+
     // Timeline event lines: date-first syntax
     if (result.type === 'timeline') {
       const tlRegistry = withTagAliases(
@@ -1821,7 +1846,6 @@ export function resolveVerticalCollisions(
 
 const SLOPE_MARGIN = { top: 80, bottom: 40, left: 80 };
 const SLOPE_LABEL_FONT_SIZE = 14;
-const SLOPE_CHAR_WIDTH = 8; // approximate px per character at 14px
 
 /**
  * Renders a slope chart into the given container using D3.
@@ -1850,7 +1874,6 @@ export function renderSlopeChart(
   const sMarginTop = ctx.aesthetic(SLOPE_MARGIN.top);
   const sMarginBottom = ctx.aesthetic(SLOPE_MARGIN.bottom);
   const sMarginLeft = ctx.aesthetic(SLOPE_MARGIN.left);
-  const sCharWidth = ctx.structural(SLOPE_CHAR_WIDTH);
   const sLabelFontSize = ctx.text(SLOPE_LABEL_FONT_SIZE);
   const sPeriodFont = ctx.text(18);
   const sValueFont = ctx.text(16);
@@ -1873,7 +1896,7 @@ export function renderSlopeChart(
     const text = `${item.values[item.values.length - 1]} — ${item.label}`;
     return text.length > longest.length ? text : longest;
   }, '');
-  const estimatedLabelWidth = maxLabelText.length * sCharWidth;
+  const estimatedLabelWidth = measureText(maxLabelText, sLabelFontSize);
   const maxRightMargin = Math.floor(width * 0.35);
   const rightMargin = Math.min(
     Math.max(estimatedLabelWidth + ctx.aesthetic(30), ctx.aesthetic(120)),
@@ -1965,24 +1988,11 @@ export function renderSlopeChart(
     const lastX = xScale(periods[periods.length - 1]!)!;
     const labelText = `${lastVal} — ${item.label}`;
     const availableWidth = rightMargin - ctx.aesthetic(15);
-    const maxChars = Math.floor(availableWidth / sCharWidth);
 
     let labelLineCount = 1;
     let wrappedLines: string[] | null = null;
-    if (labelText.length > maxChars) {
-      const words = labelText.split(/\s+/);
-      const lines: string[] = [];
-      let current = '';
-      for (const word of words) {
-        const test = current ? `${current} ${word}` : word;
-        if (test.length > maxChars && current) {
-          lines.push(current);
-          current = word;
-        } else {
-          current = test;
-        }
-      }
-      if (current) lines.push(current);
+    if (measureText(labelText, sLabelFontSize) > availableWidth) {
+      const lines = wrapTextToWidth(labelText, sLabelFontSize, availableWidth);
       labelLineCount = lines.length;
       wrappedLines = lines;
     }
@@ -1999,7 +2009,6 @@ export function renderSlopeChart(
       tipHtml,
       lastX,
       labelText,
-      maxChars,
       wrappedLines,
       labelHeight,
     };
@@ -2790,7 +2799,7 @@ function renderEras(
 ): void {
   const eraColors = palette
     ? getEraColors(palette)
-    : ['#5e81ac', '#a3be8c', '#ebcb8b', '#d08770', '#b48ead'];
+    : ['#3b6ea5', '#5b9357', '#c9a227', '#cc7a33', '#7d5ba6'];
   eras.forEach((era, i) => {
     const startVal = parseTimelineDate(era.startDate);
     const endVal = parseTimelineDate(era.endDate);
@@ -2907,7 +2916,7 @@ function renderMarkers(
   reservedLabelY?: number
 ): void {
   // Default marker color - bright orange/red that "pops"
-  const defaultColor = palette?.accent || '#d08770';
+  const defaultColor = palette?.accent || '#3a9188';
 
   // Pre-compute marker positions so each can size its label based on the
   // distance to its nearest neighbor (or chart edge).
@@ -3995,6 +4004,15 @@ function renderTimelineTagLegendOverlay(
         .attr('transform', `translate(${x}, ${y})`)
         .style('cursor', 'pointer');
 
+      // Transparent hit area so the whole icon (not just the 2px bars) is clickable
+      iconG
+        .append('rect')
+        .attr('x', -5)
+        .attr('y', -5)
+        .attr('width', 22)
+        .attr('height', 20)
+        .attr('fill', 'transparent');
+
       const barColor = isSwimActive ? palette.primary : palette.textMuted;
       const barOpacity = isSwimActive ? 1 : 0.35;
       const bars = [
@@ -5789,12 +5807,8 @@ function hasCanvas2d(): boolean {
   }
 }
 
-/** Average glyph advance for Inter as a fraction of the font size. Slightly
- * generous so estimated boxes err toward not overlapping. */
-const WORDCLOUD_GLYPH_ADVANCE = 0.62;
-
 function estimateWordWidth(text: string, size: number): number {
-  return text.length * size * WORDCLOUD_GLYPH_ADVANCE;
+  return measureText(text, size);
 }
 
 type PlacedCloudWord = WordCloudWord & {
@@ -6290,12 +6304,15 @@ export function renderVenn(
   const edgePad = ctx.aesthetic(8);
   const labelTextPad = ctx.aesthetic(4);
 
-  const sCharW = ctx.structural(8.5);
+  const sSetLabelFont = ctx.text(14);
 
   for (let i = 0; i < n; i++) {
     // In-bounds by loop guard (n === vennSets.length === rawCircles.length).
     const estimatedWidth =
-      vennSets[i]!.name.length * sCharW + stubLen + edgePad + labelTextPad;
+      measureText(vennSets[i]!.name, sSetLabelFont) +
+      stubLen +
+      edgePad +
+      labelTextPad;
     const dx = rawCircles[i]!.x - clusterCx;
     const dy = rawCircles[i]!.y - clusterCy;
     if (Math.abs(dx) >= Math.abs(dy)) {
@@ -6313,7 +6330,6 @@ export function renderVenn(
   // to leave readable space outside for leader+text. Wrap target scales
   // with the canvas so labels stay narrow on small windows.
   const OVERLAP_FONT = ctx.text(13);
-  const OVERLAP_CH_W = ctx.structural(7);
   const OVERLAP_LINE_H = ctx.structural(16);
   const OVERLAP_LEADER_PAD = ctx.structural(18);
   const OVERLAP_TEXT_GAP = ctx.aesthetic(6);
@@ -6322,27 +6338,6 @@ export function renderVenn(
     ctx.structural(80),
     Math.min(ctx.structural(170), width * 0.18)
   );
-  const MAX_WRAP_CHARS = Math.max(
-    8,
-    Math.floor(OVERLAP_WRAP_TARGET_W / OVERLAP_CH_W)
-  );
-
-  function wrapLabel(text: string, maxChars: number): string[] {
-    const words = text.split(/\s+/).filter(Boolean);
-    const lines: string[] = [];
-    let cur = '';
-    for (const w of words) {
-      const cand = cur ? cur + ' ' + w : w;
-      if (cand.length > maxChars && cur) {
-        lines.push(cur);
-        cur = w;
-      } else {
-        cur = cand;
-      }
-    }
-    if (cur) lines.push(cur);
-    return lines.length ? lines : [text];
-  }
 
   function predictOverlapDirRaw(idxs: number[]): { x: number; y: number } {
     const excluded = rawCircles
@@ -6381,12 +6376,18 @@ export function renderVenn(
     if (!ov.label) continue;
     const idxs = ov.sets.map((s) => vennSets.findIndex((vs) => vs.name === s));
     if (idxs.some((idx) => idx < 0)) continue;
-    const lines = wrapLabel(ov.label, MAX_WRAP_CHARS);
+    const lines = wrapTextToWidth(
+      ov.label,
+      OVERLAP_FONT,
+      OVERLAP_WRAP_TARGET_W
+    );
     wrappedOverlapLabels.set(ov, lines);
 
     const dir = predictOverlapDirRaw(idxs);
-    const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
-    const labelW = longest * OVERLAP_CH_W;
+    const labelW = lines.reduce(
+      (m, l) => Math.max(m, measureText(l, OVERLAP_FONT)),
+      0
+    );
     const labelH = lines.length * OVERLAP_LINE_H;
     const baseLeader =
       OVERLAP_LEADER_PAD + OVERLAP_TEXT_GAP + OVERLAP_MARGIN_PAD;
@@ -6651,7 +6652,6 @@ export function renderVenn(
     return Math.max(0, right - left);
   }
 
-  const CH_RATIO = 0.6;
   const MIN_FONT = ctx.text(10);
   const MAX_FONT = ctx.text(22);
   const INTERNAL_PAD = ctx.aesthetic(12);
@@ -6671,11 +6671,13 @@ export function renderVenn(
     const centroid = regionCentroid(circles, inside);
 
     const availW = exclusiveHSpan(centroid.x, centroid.y, i);
+    // Width of `text` at fontSize 1; scale to solve for the largest fitting font.
+    const textWidthPerPx = measureText(text, 1);
     const fitFont = Math.min(
       MAX_FONT,
-      Math.max(MIN_FONT, (availW - INTERNAL_PAD * 2) / (text.length * CH_RATIO))
+      Math.max(MIN_FONT, (availW - INTERNAL_PAD * 2) / textWidthPerPx)
     );
-    const estTextW = text.length * CH_RATIO * fitFont;
+    const estTextW = measureText(text, fitFont);
 
     const fitsInside =
       estTextW + INTERNAL_PAD * 2 < availW &&
@@ -6739,8 +6741,7 @@ export function renderVenn(
       const textAnchor = isRight ? 'start' : 'end';
       let textX = stubEndX + (isRight ? labelTextPad : -labelTextPad);
       const textY = stubEndY;
-      const sSetLabelFont = ctx.text(14);
-      const estW = text.length * sCharW;
+      const estW = measureText(text, sSetLabelFont);
       if (isRight) textX = Math.min(textX, width - estW - 4);
       else textX = Math.max(textX, estW + 4);
 
@@ -6758,7 +6759,7 @@ export function renderVenn(
         .attr('font-size', `${sSetLabelFont}px`)
         .attr('font-weight', 'bold')
         .text(text);
-      const externalEstW = text.length * sCharW;
+      const externalEstW = measureText(text, sSetLabelFont);
       setLabelBBoxes[i] = {
         x: isRight ? textX : textX - externalEstW,
         y: renderedTextY - sSetLabelFont / 2,
@@ -6968,8 +6969,10 @@ export function renderVenn(
       textY = stubEndY + sign * OVERLAP_TEXT_GAP;
     }
 
-    const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
-    const blockW = longest * OVERLAP_CH_W;
+    const blockW = lines.reduce(
+      (m, l) => Math.max(m, measureText(l, OVERLAP_FONT)),
+      0
+    );
     const blockH = lines.length * OVERLAP_LINE_H;
 
     if (textAnchor === 'start') textX = Math.min(textX, width - blockW - 4);
@@ -7238,29 +7241,6 @@ export function renderQuadrant(
     .append('g')
     .attr('transform', `translate(${margin.left}, ${margin.top})`);
 
-  // Mix two hex colors: pct=100 → all `a`, pct=0 → all `b`
-  const mixHex = (a: string, b: string, pct: number): string => {
-    const parse = (h: string): [number, number, number] => {
-      const r = h.replace('#', '');
-      // In-bounds: 3-char path indexes [0],[1],[2].
-      const f =
-        r.length === 3 ? r[0]! + r[0]! + r[1]! + r[1]! + r[2]! + r[2]! : r;
-      return [
-        parseInt(f.substring(0, 2), 16),
-        parseInt(f.substring(2, 4), 16),
-        parseInt(f.substring(4, 6), 16),
-      ];
-    };
-    const [ar, ag, ab] = parse(a),
-      [br, bg, bb] = parse(b),
-      t = pct / 100;
-    const c = (x: number, y: number) =>
-      Math.round(x * t + y * (1 - t))
-        .toString(16)
-        .padStart(2, '0');
-    return `#${c(ar, br)}${c(ag, bg)}${c(ab, bb)}`;
-  };
-
   const bg = isDark ? palette.surface : palette.bg;
 
   // Full palette color for a quadrant (used for border and label tinting)
@@ -7277,7 +7257,7 @@ export function renderQuadrant(
     label: QuadrantLabel | null,
     defaultIdx: number
   ): string => {
-    return mixHex(getQuadrantColor(label, defaultIdx), bg, 30);
+    return mix(getQuadrantColor(label, defaultIdx), bg, 30);
   };
 
   // Quadrant definitions: position, rect bounds, label position
@@ -7357,16 +7337,12 @@ export function renderQuadrant(
   const shadowColor = 'rgba(0,0,0,0.4)';
 
   // Single muted shade of textColor — watermark-style, readable against any quadrant fill
-  const quadrantLabelColor = mixHex(textColor, bg, 35);
+  const quadrantLabelColor = mix(textColor, bg, 35);
 
   // Scale label font size to fit within quadrant bounds, wrapping into multiple lines if needed
   const LABEL_MAX_FONT = ctx.text(48);
   const LABEL_MIN_FONT = ctx.text(14);
   const LABEL_PAD = ctx.aesthetic(40);
-  const CHAR_WIDTH_RATIO = 0.6;
-
-  const estTextWidth = (text: string, fontSize: number): number =>
-    text.length * fontSize * CHAR_WIDTH_RATIO;
 
   interface QuadrantLabelLayout {
     lines: string[];
@@ -7380,10 +7356,9 @@ export function renderQuadrant(
   ): QuadrantLabelLayout => {
     const availW = qw - LABEL_PAD;
     const availH = qh - LABEL_PAD;
-    const words = text.split(/\s+/);
 
     // Try single line first
-    if (estTextWidth(text, LABEL_MAX_FONT) <= availW) {
+    if (measureText(text, LABEL_MAX_FONT) <= availW) {
       const fs = Math.min(LABEL_MAX_FONT, availH);
       return {
         lines: [text],
@@ -7392,21 +7367,8 @@ export function renderQuadrant(
     }
 
     // Try wrapping into 2+ lines: greedily pack words so each line fits availW
-    const wrapLines = (fs: number): string[] => {
-      const result: string[] = [];
-      let cur = '';
-      for (const w of words) {
-        const trial = cur ? `${cur} ${w}` : w;
-        if (estTextWidth(trial, fs) > availW && cur) {
-          result.push(cur);
-          cur = w;
-        } else {
-          cur = trial;
-        }
-      }
-      if (cur) result.push(cur);
-      return result;
-    };
+    const wrapLines = (fs: number): string[] =>
+      wrapTextToWidth(text, fs, availW);
 
     // Binary-search for largest font size where wrapped text fits both width and height
     let lo = LABEL_MIN_FONT;
@@ -7417,7 +7379,7 @@ export function renderQuadrant(
       const mid = Math.round((lo + hi) / 2);
       const lines = wrapLines(mid);
       const totalH = lines.length * mid * 1.2; // line height ~1.2em
-      const maxLineW = Math.max(...lines.map((l) => estTextWidth(l, mid)));
+      const maxLineW = Math.max(...lines.map((l) => measureText(l, mid)));
       if (maxLineW <= availW && totalH <= availH) {
         bestFs = mid;
         bestLines = lines;
@@ -7649,10 +7611,9 @@ export function renderQuadrant(
   const POINT_LABEL_FONT_SIZE = ctx.text(12);
   const quadrantLabelObstacles: LabelRect[] = quadrantDefsWithLabel.map((d) => {
     const layout = labelLayouts.get(d.label!.text)!;
-    const totalW =
-      Math.max(...layout.lines.map((l) => l.length)) *
-      layout.fontSize *
-      CHAR_WIDTH_RATIO;
+    const totalW = Math.max(
+      ...layout.lines.map((l) => measureText(l, layout.fontSize))
+    );
     const totalH = layout.lines.length * layout.fontSize * 1.2;
     return {
       x: d.labelX - totalW / 2,
@@ -8117,7 +8078,7 @@ export async function renderForExport(
   if (detectedType === 'boxes-and-lines') {
     const { parseBoxesAndLines } = await import('./boxes-and-lines/parser');
     const effectivePalette = await resolveExportPalette(theme, palette);
-    const blParsed = parseBoxesAndLines(content);
+    const blParsed = parseBoxesAndLines(content, effectivePalette);
     if (blParsed.error || blParsed.nodes.length === 0) return '';
 
     // Convert viewState.htv (Record<string, string[]>) to Map<string, Set<string>>
@@ -8611,7 +8572,7 @@ export async function renderForExport(
     const { mapExportDimensions } = await import('./map/dimensions');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
-    const mapParsed = parseMap(content);
+    const mapParsed = parseMap(content, effectivePalette);
     // Always render — an empty or partially-resolved map still draws the
     // inferred base map (§24B.10 / layout AC23); diagnostics surface separately.
     // Prefer injected `mapData` (browser bundles it; the fs loader can't run
@@ -8741,7 +8702,7 @@ export async function renderForExport(
   if (parsed.type === 'sequence') {
     const { parseSequenceDgmo } = await import('./sequence/parser');
     const { renderSequenceDiagram } = await import('./sequence/renderer');
-    const seqParsed = parseSequenceDgmo(content);
+    const seqParsed = parseSequenceDgmo(content, effectivePalette);
     if (seqParsed.error || seqParsed.participants.length === 0) return '';
     // Apply interactive view state from share links (read from unified viewState).
     // Sequences key both sections and groups by source line number; `cg` is the
@@ -8793,7 +8754,7 @@ export async function renderForExport(
       dims,
       resolveActiveTagGroup(
         parsed.timelineTagGroups,
-        undefined,
+        parsed.timelineActiveTag,
         viewState?.tag ?? options?.tagGroup
       ),
       viewState?.swim,

package/src/diagnostics.ts

@@ -277,6 +277,12 @@ export const METADATA_DIAGNOSTIC_CODES = {
    * after a layer name. Replaced by the `description: <text>` key.
    */
   RING_BARE_DESCRIPTION_REMOVED: 'E_RING_BARE_DESCRIPTION_REMOVED',
+  /**
+   * Error: legacy sequence bare-keyword `position N` participant
+   * ordering shorthand. Replaced by the colon-keyed `position: <N>`
+   * metadata form, consistent with §1.4 same-line metadata.
+   */
+  SEQUENCE_BARE_POSITION_REMOVED: 'E_SEQUENCE_BARE_POSITION_REMOVED',
   /**
    * Error: a `tag` declaration appears after the first non-tag
    * content line. The reserved-key registry is finalized before
@@ -347,6 +353,16 @@ export function bareDescriptionRemovedMessage(args: {
   return `'|' description shorthand removed in ${args.chartType} — use 'description: ${quoted}'`;
 }
 
+/**
+ * Canonical message for `E_SEQUENCE_BARE_POSITION_REMOVED`. Emitted
+ * when a sequence participant uses the legacy bare-keyword
+ * `position N` ordering shorthand instead of the colon-keyed
+ * `position: N` metadata form.
+ */
+export function sequenceBarePositionRemovedMessage(n: string): string {
+  return `Bare 'position ${n}' removed — use 'position: ${n}' (colon required, per §1.4 metadata)`;
+}
+
 /**
  * Canonical message for `W_EMPTY_METADATA_VALUE`. Emitted when a
  * `key:` token has no value following the colon.

package/src/echarts.ts

@@ -52,6 +52,7 @@ import {
   rectCircleOverlap,
 } from './label-layout';
 import { ScaleContext } from './utils/scaling';
+import { measureText, wrapTextToWidth } from './utils/text-measure';
 
 // ============================================================
 // Types
@@ -1458,7 +1459,7 @@ export function computeScatterLabelGraphics(
     const pt = points[i]!;
     const ptSize = pt.size ?? symbolSize;
     const minGap = ptSize / 2 + 4;
-    const labelWidth = pt.name.length * fontSize * 0.6 + 8;
+    const labelWidth = measureText(pt.name, fontSize) + 8;
     const labelX = pt.px - labelWidth / 2; // centered horizontally
 
     // Try both directions, pick whichever keeps the label closest to the point
@@ -2037,15 +2038,18 @@ function buildHeatmapOption(
   });
 
   // Rotate column labels only when they'd overlap at the default font size.
-  // Estimate: each char ~7px at 12px font; rotate if longest label exceeds
-  // an even share of a ~900px-wide chart.
-  const CHAR_WIDTH = 7;
+  // Measure the widest label at the actual 12px axis font; rotate if it
+  // exceeds an even share of a ~900px-wide chart.
   const ESTIMATED_CHART_WIDTH = 900;
   const scaledChartWidth = sc.structural(ESTIMATED_CHART_WIDTH);
-  const longestCol = Math.max(...columns.map((c) => c.length), 0);
+  const colLabelFontSize = sc.text(12);
+  const longestColWidth = Math.max(
+    0,
+    ...columns.map((c) => measureText(c, colLabelFontSize))
+  );
   const slotWidth =
     columns.length > 0 ? scaledChartWidth / columns.length : Infinity;
-  const needsRotation = longestCol * CHAR_WIDTH > slotWidth * 0.85;
+  const needsRotation = longestColWidth > slotWidth * 0.85;
 
   const ESTIMATED_PLOT_W = 770;
   const ESTIMATED_PLOT_H = 380;
@@ -2054,11 +2058,15 @@ function buildHeatmapOption(
   const cellW = columns.length > 0 ? scaledPlotW / columns.length : scaledPlotW;
   const cellH =
     heatmapRows.length > 0 ? scaledPlotH / heatmapRows.length : scaledPlotH;
-  const maxValueChars = Math.max(
-    1,
-    ...heatmapRows.flatMap((r) => r.values.map((v) => String(v).length))
+  // Width (in fontSize units) of the widest cell value string, measured with
+  // accurate glyph widths so the fitted font size matches what renders.
+  const maxValueWidthPerUnit = Math.max(
+    measureText('0', 1),
+    ...heatmapRows.flatMap((r) =>
+      r.values.map((v) => measureText(String(v), 1))
+    )
   );
-  const fontFromWidth = (cellW * 0.75) / (maxValueChars * 0.55);
+  const fontFromWidth = (cellW * 0.75) / maxValueWidthPerUnit;
   const fontFromHeight = (cellH * 0.75) / 0.72;
   const cellFontFloor = sc.text(16);
   const labelFontSize = Math.max(
@@ -2540,21 +2548,9 @@ function makeChartGrid(options: {
   };
 }
 
-/** Wrap a label string at word boundaries to fit within `maxChars` per line. */
-function wrapLabel(text: string, maxChars: number): string {
-  const words = text.split(' ');
-  const lines: string[] = [];
-  let current = '';
-  for (const word of words) {
-    if (current && current.length + 1 + word.length > maxChars) {
-      lines.push(current);
-      current = word;
-    } else {
-      current = current ? current + ' ' + word : word;
-    }
-  }
-  if (current) lines.push(current);
-  return lines.join('\n');
+/** Wrap a label string at word boundaries to fit within `maxWidthPx` per line. */
+function wrapLabel(text: string, fontSize: number, maxWidthPx: number): string {
+  return wrapTextToWidth(text, fontSize, maxWidthPx).join('\n');
 }
 
 // ── Bar ──────────────────────────────────────────────────────
@@ -2592,15 +2588,26 @@ function buildBarOption(
   });
 
   // For horizontal bars, wrap long category labels at word boundaries so they
-  // don't consume too much horizontal space on the y-axis.
-  const catLabels = isHorizontal ? labels.map((l) => wrapLabel(l, 12)) : labels;
-
-  // Compute the max visible line width after wrapping for nameGap calculation.
-  const maxVisibleLen = Math.max(
-    ...catLabels.map((l) => Math.max(...l.split('\n').map((seg) => seg.length)))
+  // don't consume too much horizontal space on the y-axis. The wrap budget is
+  // a ~12-char line measured at the actual category-label font (16px) so
+  // narrow/wide glyphs wrap by real rendered width, not raw char count.
+  const catLabelFontSize = (sc ?? ScaleContext.identity()).text(16);
+  const catWrapWidth = measureText('0'.repeat(12), catLabelFontSize);
+  const catLabels = isHorizontal
+    ? labels.map((l) => wrapLabel(l, catLabelFontSize, catWrapWidth))
+    : labels;
+
+  // Compute the max visible line width (px) after wrapping for nameGap.
+  const maxVisibleWidth = Math.max(
+    0,
+    ...catLabels.map((l) =>
+      Math.max(
+        ...l.split('\n').map((seg) => measureText(seg, catLabelFontSize))
+      )
+    )
   );
   const hCatGap =
-    isHorizontal && yLabel ? Math.max(40, maxVisibleLen * 8 + 16) : undefined;
+    isHorizontal && yLabel ? Math.max(40, maxVisibleWidth + 16) : undefined;
   const categoryAxis = makeGridAxis(
     'category',
     textColor,
@@ -3309,9 +3316,15 @@ function buildBarStackedOption(
     };
   });
 
+  const stackCatLabelFontSize = s.text(16);
   const hCatGap =
     isHorizontal && yLabel
-      ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
+      ? Math.max(
+          40,
+          Math.max(
+            ...labels.map((l) => measureText(l, stackCatLabelFontSize))
+          ) + 16
+        )
       : undefined;
   const categoryAxis = makeGridAxis(
     'category',

package/src/editor/keywords.ts

@@ -164,8 +164,10 @@ export const DIRECTIVE_KEYWORDS = new Set([
   'no-relief',
   'no-context-labels',
   'no-region-labels',
+  'no-region-value',
   'no-poi-labels',
   'no-colorize',
+  'no-cities',
   'no-cluster-pois',
   'poi',
   'route',
@@ -207,6 +209,8 @@ export const DIRECTIVE_KEYWORDS = new Set([
   'color',
   // Title suppression (cross-chart-type)
   'no-title',
+  // Note suppression (cross-chart-type — graph notes)
+  'no-notes',
   // Flowchart layout
   'orientation-vertical',
   // RACI