@diagrammo/dgmo 0.25.5 → 0.27.0

package/src/map/resolver.ts

@@ -78,6 +78,36 @@ const CONTAINER_OVERSHOOT_DEG = 8;
 // albers-usa composite (CONUS conic + AK/HI insets) instead of regional Mercator.
 // CONUS spans ≈58° lon; 48° is "most of the country". Tunable.
 const US_NATIONAL_LON_SPAN = 48;
+// Sub-national US auto-zoom (map-us-subnational-zoom). A US region/choropleth map
+// whose authored data occupies a geographically COMPACT slice of the country
+// zooms to that slice (conic-equal-area, like every non-US regional view) instead
+// of always framing the whole nation on albers-usa. "Compact" = the raw data bbox
+// covers less than US_SUBNATIONAL_AREA_FRACTION of the CONUS bbox AREA. Area (not
+// lon-span) is used so a near-national diagonal (e.g. WA+FL) stays national while
+// a tight cluster (the Northeast) or a tall corridor zooms. CONUS_BBOX ≈ the
+// contiguous 48 (≈1416 deg²); the fraction bisects the empty gap between a
+// regional cluster (≲0.15) and a national map (≳0.9). Tunable.
+const CONUS_BBOX: GeoExtent = [
+  [-125, 25],
+  [-66, 49],
+];
+const US_SUBNATIONAL_AREA_FRACTION = 0.4;
+
+/** Rectangular (lon×lat) area of a bbox in deg² — NOT d3 `geoArea` (spherical).
+ *  The gate frames with a lon/lat bbox anyway, so a planar ratio is the honest
+ *  measure of "how much of the country does this occupy". */
+function bboxArea(b: GeoExtent): number {
+  return (b[1][0] - b[0][0]) * (b[1][1] - b[0][1]);
+}
+
+/** True when a US data extent is compact enough to zoom to (sub-national) rather
+ *  than frame the whole nation. Pure + side-effect-free (unit-tested in isolation
+ *  with no fixtures/render). Pass the RAW unpadded data-union bbox, not the padded
+ *  framing extent — the fraction is calibrated on raw data bboxes. */
+export function isSubNationalUsExtent(bbox: GeoExtent | null): boolean {
+  if (!bbox) return false;
+  return bboxArea(bbox) / bboxArea(CONUS_BBOX) < US_SUBNATIONAL_AREA_FRACTION;
+}
 
 // Long-form (or common-alias) country name → the folded Natural-Earth display
 // name actually shipped in world-coarse (#6). The NE coarse layer abbreviates a
@@ -216,6 +246,9 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
   const warn = (line: number, message: string, code?: string): void => {
     diagnostics.push(makeDgmoError(line, message, 'warning', code));
   };
+  // Folded tokens already flagged as "city shadows an airport code" — emit the
+  // W_MAP_AIRPORT_SHADOWED_BY_CITY hint at most once per code (ADR-2, F9).
+  const shadowedAirports = new Set<string>();
 
   const result: Writable<ResolvedMap> = {
     title: parsed.title,
@@ -286,6 +319,12 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
   const regions: ResolvedRegion[] = [];
   const seenRegion = new Map<string, number>(); // iso → index in regions
   let usSubdivisionReferenced = false;
+  // AK/HI national guard (map-us-subnational-zoom): a choropleth that colors
+  // Alaska or Hawaii is inherently a national composite map (the insets only make
+  // sense on albers-usa), so it never sub-national auto-zooms. Tracked ISO-based
+  // here because `referencedRegionIds` is not in scope at the projection block.
+  let hasAlaskaRef = false;
+  let hasHawaiiRef = false;
   const referencedRegionIds: { topo: 'us'; id: string }[] = [];
   for (const r of parsed.regions) {
     const f = fold(r.name);
@@ -356,6 +395,8 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
     }
     if (chosen.layer === 'us-state') {
       usSubdivisionReferenced = true;
+      if (chosen.id === 'US-AK') hasAlaskaRef = true;
+      if (chosen.id === 'US-HI') hasHawaiiRef = true;
       referencedRegionIds.push({ topo: 'us', id: chosen.id });
     }
     const resolved: ResolvedRegion = {
@@ -428,6 +469,28 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
       if (aliasIdx !== undefined) idxs = [aliasIdx];
     }
     if (!idxs?.length) {
+      // Airports are the LOWEST-precedence identifier tier (ADR-2): consulted
+      // only after city `byName` + `alt` miss, so a real city always wins a
+      // shared token. Exact folded-code match — never defers. Returns just
+      // {lat,lon,iso} like a city; the POI renders the user's typed token ("JFK")
+      // as its label, so there is no airport-specific label work.
+      const airIdx = data.airports?.airportIata?.[f];
+      if (airIdx !== undefined) {
+        const a = data.airports!.airports[airIdx];
+        if (a) return { kind: 'ok', lat: a[0], lon: a[1], iso: a[2] };
+      }
+      // A 3-letter token that resolved to neither a city nor a bundled airport is
+      // almost always an airport code the set doesn't cover — give the targeted
+      // hint (with the `as XXX` coords escape hatch) instead of the generic miss.
+      if (/^[A-Za-z]{3}$/.test(name)) {
+        const code = name.toUpperCase();
+        err(
+          line,
+          `Unknown airport code "${code}" — not in the bundled airport set (large hubs + US commercial). Use coordinates with \`as ${code}\` if you need it.`,
+          'E_MAP_UNKNOWN_AIRPORT_CODE'
+        );
+        return { kind: 'miss' };
+      }
       const cityNames = data.gazetteer.cities.map((c) => c[4]);
       const hint = suggest(name, cityNames);
       err(
@@ -469,6 +532,22 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
         );
     }
     const c = cands[0]!;
+    // Shadow hint (ADR-2/F9): the token resolved to a city but is ALSO a bundled
+    // IATA code (e.g. `Ufa` city vs UFA airport). Non-blocking, once per code, and
+    // only for the `byName` overlap set (an `alt`-alias hit whose key differs from
+    // the IATA fold is not flagged — a documented limit).
+    if (
+      data.airports?.airportIata?.[f] !== undefined &&
+      !shadowedAirports.has(f)
+    ) {
+      shadowedAirports.add(f);
+      const code = name.toUpperCase();
+      warn(
+        line,
+        `"${name}" resolved to the city; "${code}" is also an airport code. Use coordinates with \`as ${code}\` for the airport.`,
+        'W_MAP_AIRPORT_SHADOWED_BY_CITY'
+      );
+    }
     return { kind: 'ok', lat: c[0], lon: c[1], iso: c[2] };
   };
 
@@ -614,6 +693,7 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
       directed: e.directed,
       style: e.style,
       meta: e.meta,
+      tags: e.tags,
       lineNumber: e.lineNumber,
     });
   }
@@ -698,7 +778,7 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
         leg.dest,
         leg.destAlias,
         leg.destLabel,
-        leg.destTags,
+        {}, // a leg tag colours the LINE (§24B.6), not the destination stop
         undefined, // a leg's `value:` is leg thickness, not the dest's size
         leg.lineNumber
       );
@@ -709,6 +789,7 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
         ...(leg.label !== undefined && { label: leg.label }),
         style: leg.style,
         ...(leg.value !== undefined && { value: leg.value }),
+        tags: leg.tags,
         lineNumber: leg.lineNumber,
       });
       if (!stopIds.includes(destId)) stopIds.push(destId); // unique markers (loop-close dedupe)
@@ -767,6 +848,14 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
   }
   const points: Array<[number, number]> = pois.map((p) => [p.lon, p.lat]);
   const unioned = unionExtent(regionBoxes, points);
+  // Sub-national US auto-zoom gate (map-us-subnational-zoom). Computed from the
+  // RAW unpadded union (NOT the padded `extent` below, which inflates area ~1.5×).
+  // `usSubNational` decides WHETHER to zoom; the projection-family picker below
+  // still keys off span as before. `localeUsForced` = `locale US` with no
+  // subdivision → the author asked for the whole-country frame, so stay national
+  // even on compact data.
+  const usSubNational = isSubNationalUsExtent(unioned);
+  const localeUsForced = localeCountry === 'US' && !localeSubdivision;
   const DEFAULT_EXTENT: GeoExtent = [
     [-180, -85],
     [180, 85],
@@ -821,7 +910,14 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
   // symmetrically about its centroid until the longer axis reaches
   // POI_ZOOM_FLOOR_DEG so recognizable land always frames the dots. Uniform scale
   // preserves the aspect; the layout's fitExtent letterboxes to canvas.
-  if (isPoiOnly) {
+  // Also applies to a sub-national US region map (map-us-subnational-zoom) so a
+  // single tiny state (e.g. Rhode Island) keeps neighbour context instead of
+  // over-zooming into near-blank land. `usSubNational` is derived from the raw
+  // union above, so flooring the framing `extent` here doesn't feed back into it.
+  // Gated on `usOriented` — `usSubNational` is a pure area-vs-CONUS ratio, true
+  // for ANY small bbox, so without this guard a compact non-US region (e.g. a
+  // single small European country) would be floored too, regressing AC10.
+  if (isPoiOnly || (usSubNational && usOriented)) {
     const cx = (extent[0][0] + extent[1][0]) / 2;
     const cy = (extent[0][1] + extent[1][1]) / 2;
     const lon = extent[1][0] - extent[0][0];
@@ -850,15 +946,34 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
   // intentionally snaps a POI-only US city map to the national frame ("show all
   // states") rather than fit-zooming to the cluster on a geographic projection.
   // (§24B.2 — projection is inferred, never configured.)
+  // A compact US region/choropleth that should zoom rather than frame the nation
+  // (map-us-subnational-zoom): US-oriented, area-compact, not a POI map, and not
+  // forced national by an AK/HI inset or `locale US`.
+  const usSubNationalZoom =
+    usOriented &&
+    usSubNational &&
+    !isPoiOnly &&
+    !hasAlaskaRef &&
+    !hasHawaiiRef &&
+    !localeUsForced;
   let projection: ProjectionFamily;
-  if (isPoiOnly && usOriented && lonSpan < US_NATIONAL_LON_SPAN) {
-    // Sub-national US POI cluster: regional Mercator (familiar shapes), fit to
-    // the floored extent above. The us-states mesh is still drawn (subdivisions
-    // pushed via usOriented), so the home state + neighbours frame the dots.
-    // albers-usa is reserved for genuinely national-span content below — a local
-    // cluster no longer snaps to the whole-nation composite (#13, §24B.2).
+  if (
+    usOriented &&
+    lonSpan < US_NATIONAL_LON_SPAN &&
+    (isPoiOnly || usSubNationalZoom)
+  ) {
+    // Sub-national US, zoomed: regional Mercator. North is straight up everywhere
+    // (vertical meridians) — a conic equal-area fans its meridians toward the pole
+    // so an off-centre region visibly tilts, which reads wrong for a "zoom into the
+    // US" view. Area distortion across a sub-national frame is negligible, and the
+    // POI-cluster path already uses Mercator here. Covers both a POI cluster (fit
+    // to the floored extent) and a compact region/choropleth. The us-states mesh
+    // is still drawn (subdivisions via usOriented), so neighbours frame the data.
     projection = 'mercator';
   } else if (usOriented) {
+    // National US frame: spread-out region data, a wide corridor (lonSpan ≥ the
+    // national threshold), a POI map that spans the country, an AK/HI composite,
+    // or an explicit `locale US` whole-country request. (§24B.2 — albers-usa.)
     projection = 'albers-usa';
   } else if (span > WORLD_SPAN || maxAbsLat > MERCATOR_MAX_LAT) {
     // World/multi-continent scale (or a polar-reaching frame). Every world map —
@@ -868,10 +983,15 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
     // consistent rectangular look over Equal Earth's area honesty.)
     projection = 'equirectangular';
   } else {
-    // Tight clusters AND single-continent regional views: Mercator gives every
-    // mid-latitude landmass its familiar conventional shape (a world projection
-    // squashes a continent like Europe horizontally).
-    projection = 'mercator';
+    // Tight clusters AND single-continent regional views: a conic equal-area
+    // (Albers) projection, parameterized per-extent in the layout. This is the
+    // conventional atlas projection for a single mid-latitude continent — it
+    // keeps familiar country shapes (no world-projection horizontal squash) and,
+    // unlike Mercator, does NOT vertically inflate high-latitude land. That
+    // inflation is what pushed a Europe choropleth's colored mass into the bottom
+    // ~30% of the frame (Scandinavia's stretch wasted the upper half on empty
+    // ocean); equal-area framing re-centers the data and scales the land larger.
+    projection = 'conic-equal-area';
   }
 
   // World-scale framing (R10): a multi-continent spread frames most cleanly as

package/src/map/types.ts

@@ -19,9 +19,13 @@ export type PoiPos =
 export interface MapDirectives {
   /** Legend label for the region value ramp (`region-metric <label>`). */
   regionMetric?: string;
-  /** Recognized color NAME for the choropleth ramp hue, peeled off the
+  /** Recognized color NAME for the choropleth ramp HIGH endpoint, peeled off the
    *  `region-metric` trailing token (§24B.3). Defaults to red when absent. */
   regionMetricColor?: string;
+  /** Recognized color NAME for the choropleth ramp LOW endpoint (the second,
+   *  left-of-two trailing colors on `region-metric`, §24B.3). Absent ⇒ the low
+   *  end is the implied floored neutral (today's single-colour behaviour). */
+  regionMetricLowColor?: string;
   /** Legend label for the POI value (marker size) channel (`poi-metric`). */
   poiMetric?: string;
   /** Legend label for the edge/leg value (thickness) channel (`flow-metric`). */
@@ -49,12 +53,20 @@ export interface MapDirectives {
   noContextLabels?: boolean;
   /** `no-region-labels` — suppress region labels (default-on, full→abbrev→hide). */
   noRegionLabels?: boolean;
+  /** `no-region-value` — suppress the metric VALUE shown under each data region's
+   *  name on a `region-metric` choropleth (default-on). The region NAME still
+   *  renders (governed by `no-region-labels`); only the numeric value line goes. */
+  noRegionValue?: boolean;
   /** `no-poi-labels` — suppress POI labels (default-on, collision-managed auto). */
   noPoiLabels?: boolean;
   /** `no-colorize` — force the plain green-land reference dress even when regions
    *  are referenced (regions are auto-coloured by default; §24B colorize). A
    *  no-op under data — the basemap is already gray there. */
   noColorize?: boolean;
+  /** `no-cities` — suppress the subtle gazetteer city dots scattered across the
+   *  basemap for geographic orientation (default-on; population-ranked, spacing-
+   *  thinned so density adapts to zoom). Explicit POIs always draw regardless. */
+  noCities?: boolean;
   /** `no-cluster-pois` — never collapse coincident POI markers into a count badge
    *  (clustering/spiderfy is default-on in the interactive preview). With this set
    *  the markers always render fanned out with their legs — the same as a static
@@ -99,8 +111,8 @@ export interface MapPoi {
 
 /** One leg of a route (§24B.6): an edge from the previous stop to `dest`. Reuses
  *  the edge arrow idiom — in-arrow text = leg label, `value:` = leg thickness,
- *  `->`/`~>` (or the header `style: arc`) = shape. Stop-targeted keys on the leg
- *  line (`tag`, `label:`) decorate the DESTINATION point. */
+ *  `->`/`~>` (or the header `style: arc`) = shape. A tag on the leg line colours
+ *  the LINE (§24B.6); `label:`/`as` still name the DESTINATION stop. */
 export interface MapRouteLeg {
   readonly label?: string; // in-arrow leg label
   readonly style: 'straight' | 'arc';
@@ -108,7 +120,9 @@ export interface MapRouteLeg {
   readonly dest: PoiPos;
   readonly destAlias?: string;
   readonly destLabel?: string;
-  readonly destTags: Readonly<Record<string, string>>;
+  /** Tag(s) on the leg line → colour the LINE itself. To categorise a STOP,
+   *  tag its own `poi` line. */
+  readonly tags: Readonly<Record<string, string>>;
   readonly lineNumber: number;
 }
 
@@ -127,7 +141,9 @@ export interface MapRoute {
 }
 
 /** A connector (§24B.6). Endpoints are RAW identifier strings (name or alias);
- *  binding to POIs/regions is the resolver's job. `~>`→arc; `--`→directed:false. */
+ *  binding to POIs/regions is the resolver's job. Token = arrowhead iff it ends
+ *  in `>`, arc iff it starts with `~`: `->` straight, `~>` arc, `--`/`-label-`
+ *  undirected straight, `~~`/`~label~` undirected arc. */
 export interface MapEdge {
   readonly from: string;
   readonly to: string;
@@ -135,6 +151,8 @@ export interface MapEdge {
   readonly directed: boolean;
   readonly style: 'straight' | 'arc';
   readonly meta: Readonly<Record<string, string>>;
+  /** Tag(s) on the edge line → colour the LINE itself (§24B.6). */
+  readonly tags: Readonly<Record<string, string>>;
   readonly lineNumber: number;
 }
 
@@ -166,8 +184,10 @@ export interface MapLayoutLegend {
     metric?: string;
     min: number;
     max: number;
-    hue: string;
-    /** Low end of the ramp gradient (the land colour the fills blend from). */
-    base: string;
+    /** Resolved hex of the LOW (t=0) endpoint — the explicit low colour, or the
+     *  floored neutral the single-colour fills blend up from. */
+    low: string;
+    /** Resolved hex of the HIGH (t=1) endpoint (the named ramp hue). */
+    high: string;
   };
 }

package/src/migrate/embedded.ts

@@ -12,17 +12,19 @@
 import { readFileSync, writeFileSync, existsSync } from 'node:fs';
 
 import { parseDgmo } from '../dgmo-router';
+import { METADATA_DIAGNOSTIC_CODES } from '../diagnostics';
 import { migrateContent } from './index';
 
 // Diagnostic codes the migration tool itself is repairing — these
 // MUST NOT count as "block fails to parse" reasons, otherwise every
-// legacy block would be skipped.
-const MIGRATION_TARGET_CODES = new Set([
-  'E_PIPE_OPERATOR_REMOVED',
-  'E_GANTT_BARE_PERCENT_REMOVED',
-  'E_JOURNEY_BARE_SCORE_REMOVED',
-  'E_PYRAMID_BARE_DESCRIPTION_REMOVED',
-  'E_RING_BARE_DESCRIPTION_REMOVED',
+// legacy block would be skipped. Derived from the canonical registry
+// so a code rename can't silently desync the migrator.
+const MIGRATION_TARGET_CODES = new Set<string>([
+  METADATA_DIAGNOSTIC_CODES.PIPE_OPERATOR_REMOVED,
+  METADATA_DIAGNOSTIC_CODES.GANTT_BARE_PERCENT_REMOVED,
+  METADATA_DIAGNOSTIC_CODES.JOURNEY_BARE_SCORE_REMOVED,
+  METADATA_DIAGNOSTIC_CODES.PYRAMID_BARE_DESCRIPTION_REMOVED,
+  METADATA_DIAGNOSTIC_CODES.RING_BARE_DESCRIPTION_REMOVED,
 ]);
 
 const FENCE_RE = /^(\s*)(```+|~~~+)\s*(dgmo|diagrammo)\b([^\n]*)$/i;

package/src/mindmap/text-wrap.ts

@@ -7,8 +7,8 @@
 // (for drawing). Ensures both agree on line breaks and font size.
 
 import { preprocessDescriptionLine } from '../utils/description-helpers';
+import { measureText, truncateText } from '../utils/text-measure';
 
-const CHAR_WIDTH_RATIO = 0.58; // avg char width / fontSize for Helvetica
 const H_PAD = 16; // 8px padding each side
 const MAX_LABEL_LINES = 3;
 const MAX_DESC_LINES = 2;
@@ -38,8 +38,6 @@ function tryWrap(
   maxLines: number
 ): string[] | null {
   const availWidth = maxWidth - H_PAD;
-  const charWidth = fontSize * CHAR_WIDTH_RATIO;
-  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
 
   const lines: string[] = [];
   let currentLine = '';
@@ -49,7 +47,7 @@ function tryWrap(
     const sep = currentLine && !currentLine.endsWith('-') ? ' ' : '';
     const candidate = currentLine + sep + token;
 
-    if (candidate.length <= maxChars) {
+    if (measureText(candidate, fontSize) <= availWidth) {
       currentLine = candidate;
     } else if (!currentLine) {
       // Single token exceeds line — force it onto this line (will be truncated later if needed)
@@ -72,21 +70,19 @@ function tryWrap(
   return lines;
 }
 
-/** Truncate the last line of a lines array with ellipsis to fit maxChars. */
+/** Truncate the last line of a lines array with ellipsis to fit maxWidth. */
 function truncateLastLine(
   lines: string[],
   maxWidth: number,
   fontSize: number
 ): string[] {
   const availWidth = maxWidth - H_PAD;
-  const charWidth = fontSize * CHAR_WIDTH_RATIO;
-  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
 
   const result = [...lines];
   // In-bounds: caller passes non-empty lines; tryWrap returns at least one line.
   const last = result[result.length - 1]!;
-  if (last.length > maxChars) {
-    result[result.length - 1] = last.substring(0, maxChars - 1) + '\u2026';
+  if (measureText(last, fontSize) > availWidth) {
+    result[result.length - 1] = truncateText(last, fontSize, availWidth);
   }
   return result;
 }
@@ -132,11 +128,14 @@ export function wrapText(
     const last = truncated[truncated.length - 1]!;
     if (!last.endsWith('\u2026')) {
       const availWidth = maxWidth - H_PAD;
-      const charWidth = minFontSize * CHAR_WIDTH_RATIO;
-      const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
-      if (last.length >= maxChars - 1) {
-        truncated[truncated.length - 1] =
-          last.substring(0, maxChars - 1) + '\u2026';
+      // If appending an ellipsis would overflow, truncate to fit; otherwise
+      // just append it to signal that lines were dropped.
+      if (measureText(last + '\u2026', minFontSize) > availWidth) {
+        truncated[truncated.length - 1] = truncateText(
+          last,
+          minFontSize,
+          availWidth
+        );
       } else {
         truncated[truncated.length - 1] = last + '\u2026';
       }

package/src/org/layout.ts

@@ -10,8 +10,18 @@ import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
 import {
   LEGEND_PILL_FONT_SIZE,
   LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_PAD,
+  LEGEND_CAPSULE_PAD,
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_DOT_GAP,
+  LEGEND_ENTRY_TRAIL,
+  LEGEND_GROUP_GAP,
+  LEGEND_EYE_SIZE,
+  LEGEND_EYE_GAP,
   measureLegendText,
 } from '../utils/legend-constants';
+import { measureText } from '../utils/text-measure';
 
 // ============================================================
 // Types
@@ -91,7 +101,10 @@ export interface OrgLayoutResult {
 // Constants
 // ============================================================
 
-const CHAR_WIDTH = 7.5;
+// Card text font sizes — MUST match the renderer (LABEL_FONT_SIZE / META_FONT_SIZE)
+// so node sizing measures text at the exact size it is drawn.
+const LABEL_FONT_SIZE = 13;
+const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
 const HEADER_HEIGHT = 28;
 const SEPARATOR_GAP = 6;
@@ -108,15 +121,6 @@ const CONTAINER_META_LINE_HEIGHT = 16;
 const STACK_V_GAP = 20;
 
 // Legend (kanban-style pills)
-const LEGEND_HEIGHT = 28;
-const LEGEND_PILL_PAD = 16;
-const LEGEND_CAPSULE_PAD = 4;
-const LEGEND_DOT_R = 4;
-const LEGEND_ENTRY_DOT_GAP = 4;
-const LEGEND_ENTRY_TRAIL = 8;
-const LEGEND_GROUP_GAP = 12;
-const LEGEND_EYE_SIZE = 14;
-const LEGEND_EYE_GAP = 6;
 
 // ============================================================
 // Helpers
@@ -156,17 +160,15 @@ function filterMetadata(
 }
 
 function computeCardWidth(label: string, meta: Record<string, string>): number {
-  let maxChars = label.length;
+  // Label is drawn bold at LABEL_FONT_SIZE; meta rows at META_FONT_SIZE.
+  let maxTextWidth = measureText(label, LABEL_FONT_SIZE);
 
   for (const [key, value] of Object.entries(meta)) {
-    const lineChars = key.length + 2 + value.length; // "key: value"
-    if (lineChars > maxChars) maxChars = lineChars;
+    const lineWidth = measureText(`${key}: ${value}`, META_FONT_SIZE);
+    if (lineWidth > maxTextWidth) maxTextWidth = lineWidth;
   }
 
-  return Math.max(
-    MIN_CARD_WIDTH,
-    Math.ceil(maxChars * CHAR_WIDTH) + CARD_H_PAD * 2
-  );
+  return Math.max(MIN_CARD_WIDTH, Math.ceil(maxTextWidth) + CARD_H_PAD * 2);
 }
 
 function computeCardHeight(meta: Record<string, string>): number {

package/src/org/renderer.ts

@@ -26,6 +26,7 @@ import {
   EYE_CLOSED_PATH,
 } from '../utils/legend-constants';
 import { renderLegendD3 } from '../utils/legend-d3';
+import { measureText } from '../utils/text-measure';
 import { getMaxLegendReservedHeight } from '../utils/legend-layout';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
 
@@ -329,8 +330,12 @@ export function renderOrg(
       const metaDisplayKeys = metaEntries.map(
         ([k]) => displayNames.get(k) ?? k
       );
-      const maxKeyLen = Math.max(...metaDisplayKeys.map((k) => k.length));
-      const valueX = 10 + (maxKeyLen + 2) * (sContainerMetaFontSize * 0.6);
+      const maxKeyWidth = Math.max(
+        ...metaDisplayKeys.map((k) =>
+          measureText(`${k}: `, sContainerMetaFontSize)
+        )
+      );
+      const valueX = 10 + maxKeyWidth;
 
       const metaStartY = sContainerHeaderHeight + sContainerMetaFontSize - 2;
       for (let i = 0; i < metaEntries.length; i++) {
@@ -529,8 +534,10 @@ export function renderOrg(
       const metaDisplayKeys = metaEntries.map(
         ([k]) => displayNames.get(k) ?? k
       );
-      const maxKeyLen = Math.max(...metaDisplayKeys.map((k) => k.length));
-      const valueX = 10 + (maxKeyLen + 2) * (sMetaFontSize * 0.6);
+      const maxKeyWidth = Math.max(
+        ...metaDisplayKeys.map((k) => measureText(`${k}: `, sMetaFontSize))
+      );
+      const valueX = 10 + maxKeyWidth;
 
       const metaStartY = sHeaderHeight + sSeparatorGap + sMetaFontSize;
       for (let i = 0; i < metaEntries.length; i++) {