@diagrammo/dgmo 0.23.0 → 0.24.0

package/dist/internal.js

@@ -26649,7 +26649,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const VALUE_NAME = hasRamp ? parsed.boxMetric?.trim() || "Value" : null;
   const matchColorGroup = (v) => {
     const lv = v.trim().toLowerCase();
-    if (lv === "none") return null;
+    if (lv === "" || lv === "none") return null;
     const tg = parsed.tagGroups.find((g) => g.name.toLowerCase() === lv);
     if (tg) return tg.name;
     if (lv === VALUE_NAME?.toLowerCase()) return VALUE_NAME;
@@ -26990,6 +26990,22 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         const tooltipText = fullText.length > 200 ? fullText.slice(0, 199) + "\u2026" : fullText;
         nodeG.append("title").text(tooltipText);
       }
+    } else if (parsed.showValues && node.value !== void 0) {
+      const valueLabel = parsed.boxMetric ? `${parsed.boxMetric}: ${node.value}` : String(node.value);
+      const headerH = ln.height / 2;
+      const sepY = -ln.height / 2 + headerH;
+      const fitted = fitLabelToHeader(node.label, ln.width, 2);
+      const labelLineH = fitted.fontSize * 1.3;
+      const labelTotalH = fitted.lines.length * labelLineH;
+      const headerCenterY = -ln.height / 2 + headerH / 2;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        nodeG.append("text").attr("x", 0).attr(
+          "y",
+          headerCenterY - labelTotalH / 2 + labelLineH / 2 + li * labelLineH
+        ).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", colors.text).text(fitted.lines[li]);
+      }
+      nodeG.append("line").attr("x1", -ln.width / 2).attr("y1", sepY).attr("x2", ln.width / 2).attr("y2", sepY).attr("stroke", colors.stroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", (sepY + ln.height / 2) / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("fill", colors.text).attr("opacity", 0.85).text(valueLabel);
     } else {
       const maxLabelLines = Math.max(
         2,
@@ -27002,21 +27018,16 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         nodeG.append("text").attr("x", 0).attr("y", -totalH / 2 + lineH / 2 + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", colors.text).text(fitted.lines[li]);
       }
     }
-    if (parsed.showValues && node.value !== void 0) {
+    if (parsed.showValues && node.value !== void 0 && desc && desc.length > 0 && !hideDescriptions) {
       const valueText = String(node.value);
-      const descShown = !!(desc && desc.length > 0 && !hideDescriptions);
-      if (descShown) {
-        const padX = 6;
-        const padY = 5;
-        const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO2 + 8;
-        const bh = VALUE_FONT_SIZE + 4;
-        const bx = ln.width / 2 - bw - 4;
-        const by = -ln.height / 2 + 4;
-        nodeG.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85);
-        nodeG.append("text").attr("class", "bl-node-value").attr("x", bx + bw - padX).attr("y", by + padY).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", palette.textMuted).text(valueText);
-      } else {
-        nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", ln.height / 2 - VALUE_FONT_SIZE).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).attr("opacity", 0.8).text(valueText);
-      }
+      const padX = 6;
+      const padY = 5;
+      const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO2 + 8;
+      const bh = VALUE_FONT_SIZE + 4;
+      const bx = Math.max(-ln.width / 2 + 4, ln.width / 2 - bw - 4);
+      const by = -ln.height / 2 + 4;
+      nodeG.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85);
+      nodeG.append("text").attr("class", "bl-node-value").attr("x", bx + bw - padX).attr("y", by + padY).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", palette.textMuted).text(valueText);
     }
   }
   const hasDescriptions = parsed.nodes.some(
@@ -27110,7 +27121,7 @@ var init_renderer6 = __esm({
     init_wrapped_desc();
     init_scaling();
     DIAGRAM_PADDING6 = 20;
-    NODE_FONT_SIZE = 13;
+    NODE_FONT_SIZE = 11;
     MIN_NODE_FONT_SIZE = 9;
     EDGE_LABEL_FONT_SIZE4 = 11;
     EDGE_STROKE_WIDTH5 = 1.5;
@@ -47070,7 +47081,11 @@ function resolveMap(parsed, data) {
       if (bb && !isWholeSphere(bb)) containerBoxes.push(bb);
     }
     const containerUnion = unionExtent(containerBoxes, points);
-    if (containerUnion) extent2 = pad(containerUnion, PAD_FRACTION);
+    if (containerUnion)
+      extent2 = pad(
+        clampContainerToCluster(containerUnion, points),
+        PAD_FRACTION
+      );
   }
   if (isPoiOnly) {
     const cx = (extent2[0][0] + extent2[1][0]) / 2;
@@ -47151,6 +47166,22 @@ function mostCommonCountry(regions, poiCountries) {
   }
   return best;
 }
+function clampContainerToCluster(container, points) {
+  const poi = unionExtent([], points);
+  if (!poi) return container;
+  let [[west, south], [east, north]] = container;
+  const [[pWest, pSouth], [pEast, pNorth]] = poi;
+  south = Math.max(south, pSouth - CONTAINER_OVERSHOOT_DEG);
+  north = Math.min(north, pNorth + CONTAINER_OVERSHOOT_DEG);
+  if (east <= 180 && pEast <= 180) {
+    west = Math.max(west, pWest - CONTAINER_OVERSHOOT_DEG);
+    east = Math.min(east, pEast + CONTAINER_OVERSHOOT_DEG);
+  }
+  return [
+    [west, south],
+    [east, north]
+  ];
+}
 function pad(e, frac) {
   const dLon = (e[1][0] - e[0][0]) * frac || 1;
   const dLat = (e[1][1] - e[0][1]) * frac || 1;
@@ -47163,7 +47194,7 @@ function firstError(diags) {
   const e = diags.find((d) => d.severity === "error");
   return e ? formatDgmoError(e) : null;
 }
-var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, US_NATIONAL_LON_SPAN, REGION_ALIASES, US_STATE_POSTAL;
+var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, CONTAINER_OVERSHOOT_DEG, US_NATIONAL_LON_SPAN, REGION_ALIASES, US_STATE_POSTAL;
 var init_resolver2 = __esm({
   "src/map/resolver.ts"() {
     "use strict";
@@ -47176,6 +47207,7 @@ var init_resolver2 = __esm({
     WORLD_LAT_SOUTH = -58;
     WORLD_LAT_NORTH = 78;
     POI_ZOOM_FLOOR_DEG = 7;
+    CONTAINER_OVERSHOOT_DEG = 8;
     US_NATIONAL_LON_SPAN = 48;
     REGION_ALIASES = {
       // Common everyday names → the Natural-Earth display name actually shipped.
@@ -47254,6 +47286,55 @@ var init_resolver2 = __esm({
   }
 });
 
+// src/map/legend-band.ts
+function mapLegendGroups(legend) {
+  const ramp = legend.ramp;
+  const scoreGroup = ramp ? {
+    name: ramp.metric?.trim() || "Value",
+    entries: [],
+    gradient: {
+      min: ramp.min,
+      max: ramp.max,
+      hue: ramp.hue,
+      base: ramp.base
+    }
+  } : null;
+  const tagGroups = legend.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({ name: g.name, entries: [...g.entries] }));
+  return [...scoreGroup ? [scoreGroup] : [], ...tagGroups];
+}
+function mapLegendConfig(groups, mode) {
+  return {
+    groups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode,
+    showEmptyGroups: false,
+    showInactivePills: true
+  };
+}
+function mapLegendTop(hasTitle, hasSubtitle) {
+  return (hasTitle ? TITLE_Y + TITLE_FONT_SIZE : 0) + (hasSubtitle ? TITLE_FONT_SIZE : 0) + LEGEND_TOP_GAP2;
+}
+function mapLegendBand(legend, opts) {
+  if (!legend) return 0;
+  const groups = mapLegendGroups(legend);
+  if (groups.length === 0) return 0;
+  const config = mapLegendConfig(groups, opts.mode);
+  const state = { activeGroup: legend.activeGroup };
+  const { height } = computeLegendLayout(config, state, opts.width);
+  if (height <= 0) return 0;
+  return mapLegendTop(opts.hasTitle, opts.hasSubtitle) + height + LEGEND_BOTTOM_GAP2;
+}
+var LEGEND_TOP_GAP2, LEGEND_BOTTOM_GAP2;
+var init_legend_band = __esm({
+  "src/map/legend-band.ts"() {
+    "use strict";
+    init_legend_layout();
+    init_title_constants();
+    LEGEND_TOP_GAP2 = 8;
+    LEGEND_BOTTOM_GAP2 = 10;
+  }
+});
+
 // src/map/colorize.ts
 function assignColors(isos, adjacency) {
   const sorted = [...isos].sort();
@@ -47845,12 +47926,43 @@ function layoutMap(resolved, data, size, opts) {
     return tagFill(r.tags, activeGroup) ?? neutralFill;
   };
   const regionById = new Map(resolved.regions.map((r) => [r.iso, r]));
+  let legend = null;
+  if (!resolved.directives.noLegend) {
+    const legendTagGroups = resolved.tagGroups.map((g) => ({
+      name: g.name,
+      entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+    }));
+    if (legendTagGroups.length > 0 || hasRamp) {
+      legend = {
+        tagGroups: legendTagGroups,
+        activeGroup,
+        ...hasRamp && {
+          ramp: {
+            ...resolved.directives.regionMetric !== void 0 && {
+              metric: resolved.directives.regionMetric
+            },
+            min: rampMin,
+            max: rampMax,
+            hue: rampHue,
+            base: rampBase
+          }
+        }
+      };
+    }
+  }
   const TITLE_GAP2 = 16;
   let topPad = FIT_PAD;
   if (resolved.title && resolved.pois.length > 0) {
     const bannerBottom = (resolved.subtitle ? TITLE_Y + TITLE_FONT_SIZE : TITLE_Y) + TITLE_FONT_SIZE / 2;
     topPad = Math.max(FIT_PAD, bannerBottom + TITLE_GAP2);
   }
+  const legendBand = mapLegendBand(legend, {
+    width,
+    mode: opts.legendMode ?? "preview",
+    hasTitle: Boolean(resolved.title),
+    hasSubtitle: Boolean(resolved.subtitle)
+  });
+  if (legendBand > topPad) topPad = legendBand;
   const fitBox = [
     [FIT_PAD, topPad],
     [
@@ -47868,7 +47980,7 @@ function layoutMap(resolved, data, size, opts) {
     const by0 = cb[0][1];
     const cw = cb[1][0] - bx0;
     const ch = cb[1][1] - by0;
-    const topReserve = resolved.title && resolved.pois.length > 0 ? topPad : 0;
+    const topReserve = resolved.title && resolved.pois.length > 0 || legendBand > 0 ? topPad : 0;
     const ox = 0;
     const oy = topReserve;
     const sx = cw > 0 ? width / cw : 1;
@@ -48932,30 +49044,6 @@ function layoutMap(resolved, data, size, opts) {
     });
     labels.push(...contextLabels);
   }
-  let legend = null;
-  if (!resolved.directives.noLegend) {
-    const tagGroups = resolved.tagGroups.map((g) => ({
-      name: g.name,
-      entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
-    }));
-    if (tagGroups.length > 0 || hasRamp) {
-      legend = {
-        tagGroups,
-        activeGroup,
-        ...hasRamp && {
-          ramp: {
-            ...resolved.directives.regionMetric !== void 0 && {
-              metric: resolved.directives.regionMetric
-            },
-            min: rampMin,
-            max: rampMax,
-            hue: rampHue,
-            base: rampBase
-          }
-        }
-      };
-    }
-  }
   return {
     width,
     height,
@@ -48991,6 +49079,7 @@ var init_layout15 = __esm({
     init_label_layout();
     init_legend_constants();
     init_title_constants();
+    init_legend_band();
     init_context_labels();
     FIT_PAD = 24;
     RAMP_FLOOR2 = 15;
@@ -49191,6 +49280,9 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       // stretch-distorting. The in-app preview pane passes no exportDims → unset →
       // keeps the global stretch-fill.
       preferContain: exportDims?.preferContain ?? false,
+      // Reserve the legend band for the mode actually drawn below (export shows
+      // only the active group; preview keeps the inactive pills).
+      legendMode: exportDims ? "export" : "preview",
       ...activeGroupOverride !== void 0 && {
         activeGroup: activeGroupOverride
       }
@@ -49482,30 +49574,12 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   if (layout.legend) {
     const legendY = (layout.title ? TITLE_Y + TITLE_FONT_SIZE : 0) + (layout.subtitle ? TITLE_FONT_SIZE : 0) + 8;
     const legendG = svg.append("g").attr("class", "dgmo-map-legend").attr("transform", `translate(0, ${legendY})`);
-    const ramp = layout.legend.ramp;
-    const scoreGroup = ramp ? {
-      name: ramp.metric?.trim() || "Value",
-      entries: [],
-      gradient: {
-        min: ramp.min,
-        max: ramp.max,
-        hue: ramp.hue,
-        base: ramp.base
-      }
-    } : null;
-    const tagGroups = layout.legend.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({ name: g.name, entries: [...g.entries] }));
-    const groups = [...scoreGroup ? [scoreGroup] : [], ...tagGroups];
+    const groups = mapLegendGroups(layout.legend);
     if (groups.length > 0) {
-      const config = {
+      const config = mapLegendConfig(
         groups,
-        position: { placement: "top-center", titleRelation: "below-title" },
-        mode: exportDims ? "export" : "preview",
-        showEmptyGroups: false,
-        // Keep inactive siblings visible as pills so the user can click to flip
-        // the active colouring dimension (preview only — export shows just the
-        // active group).
-        showInactivePills: true
-      };
+        exportDims ? "export" : "preview"
+      );
       const state = { activeGroup: layout.legend.activeGroup };
       renderLegendD3(legendG, config, state, palette, isDark, void 0, width);
     }
@@ -49549,6 +49623,7 @@ var init_renderer16 = __esm({
     init_title_constants();
     init_color_utils();
     init_legend_d3();
+    init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
   }
@@ -49570,9 +49645,10 @@ function mapContentAspect(resolved, data, ref = REF) {
   const aspect = w / h;
   return Number.isFinite(aspect) && aspect > 0 ? aspect : FALLBACK_ASPECT;
 }
-function mapExportDimensions(resolved, data, baseWidth = 1200) {
-  const raw = mapContentAspect(resolved, data);
-  const clamped = Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
+function mapExportDimensions(resolved, data, baseWidth = 1200, aspectOverride) {
+  const useOverride = aspectOverride !== void 0 && Number.isFinite(aspectOverride) && aspectOverride > 0;
+  const raw = useOverride ? aspectOverride : mapContentAspect(resolved, data);
+  const clamped = useOverride ? raw : Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
   const width = baseWidth;
   let height = Math.round(width / clamped);
   let chromeReserve = 0;
@@ -49585,7 +49661,7 @@ function mapExportDimensions(resolved, data, baseWidth = 1200) {
     height = Math.round(chromeReserve + MIN_MAP_BAND);
     floored = true;
   }
-  const preferContain = clamped !== raw || floored;
+  const preferContain = useOverride ? floored : clamped !== raw || floored;
   return { width, height, preferContain };
 }
 var FIT_PAD2, TITLE_GAP, ASPECT_MAX, ASPECT_MIN, MIN_MAP_BAND, FALLBACK_ASPECT, REF;
@@ -55295,7 +55371,6 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
 function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, _exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
   const {
     width,
-    height,
     tooltip,
     solid,
     textColor,
@@ -55344,8 +55419,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
   const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
   const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
   const innerWidth = width - margin.left - margin.right;
-  const availInnerHeight = height - margin.top - margin.bottom;
-  const rowH = Math.min(ctx.structural(28), availInnerHeight / sorted.length);
+  const rowH = ctx.structural(28);
   const innerHeight = rowH * sorted.length;
   const usedHeight = margin.top + innerHeight + margin.bottom;
   const xScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
@@ -57926,7 +58000,12 @@ async function renderForExport(content, theme, palette, viewState, options) {
       }
     }
     const mapResolved = resolveMap2(mapParsed, mapData);
-    const dims2 = mapExportDimensions2(mapResolved, mapData, EXPORT_WIDTH);
+    const dims2 = mapExportDimensions2(
+      mapResolved,
+      mapData,
+      EXPORT_WIDTH,
+      options?.mapAspect
+    );
     const container2 = createExportContainer(dims2.width, dims2.height);
     renderMapForExport2(
       container2,

package/docs/language-reference.md

@@ -2786,7 +2786,8 @@ route Miami style: arc
 - Title is the declaration line; `caption` (data-source attribution, travels with the exported PNG) is the only chrome directive. There is no `subtitle`.
 - Legend auto-composes below the title: the value ramp + `region-metric` and each tag group are **selectable colouring groups** (collapse/activate to flip the fill); POI size (`poi-metric`) and edge thickness (`flow-metric`) are self-evident from scale and carry no legend key in v1. `no-legend` suppresses all of it.
 - **Region and POI labels are on by default.** Region labels auto-fit **full → abbrev → hide** (a US-state 2-letter abbreviation is tried when the full name doesn't fit; other regions degrade full → hide); POI labels are collision-managed. Labels render **on the map** (export-safe), escalating inline → leader line → numbered pin in dense clusters; markers never move. A wide map in a narrow column (< ~480px) prefers abbreviations and drops reference relief, as if zoomed out.
-- **Cosmetic features are on by default**; the only switches are bare `no-*` opt-outs (no positive opt-in flag): `no-coastline`, `no-relief`, `no-context-labels`, `no-region-labels`, `no-poi-labels`, `no-legend`. A plain look = the four basemap flags together.
+- **Cosmetic features are on by default**; the only switches are bare `no-*` opt-outs (no positive opt-in flag): `no-coastline`, `no-relief`, `no-context-labels`, `no-region-labels`, `no-poi-labels`, `no-legend`, `no-colorize`. A plain look = the four basemap flags together (`no-colorize` is **not** one of the four — it toggles region *fill style*, not a basemap backdrop layer).
+- **Colorize (distinct political fills) is the default for any map without region data.** Unless a region carries data (a `value:` or a tag), every region drawn at the resolved extent is filled a **distinct light pastel** such that no two bordering regions share a hue — the conventional "colour the countries/states so neighbours separate" look, with zero config. It applies to named-region maps, POI/route-only maps, and even a bare `map` (the whole world colours as the backdrop). The fills are **non-semantic** (no legend entry) and **extent-independent** (a region's colour is the same at any width and in an inset). A direct trailing colour (`Texas red`) paints on top as a highlight and does not suppress colorize; adding any `value:`/tag flips the map to the data dress (colorize auto-suppressed, no error). `no-colorize` forces the plain green-land + blue-water dress — useful when many POIs/routes should pop against a calm map.
 
 ### Name resolution
 
@@ -2802,7 +2803,7 @@ route Miami style: arc
 
 ### Directives & reserved keys
 
-The directive set is **12, all colon-free**: six naming intent the renderer can't infer — `region-metric`, `poi-metric`, `flow-metric`, `locale`, `active-tag`, `caption` — and six `no-*` cosmetic opt-outs — `no-legend`, `no-coastline`, `no-relief`, `no-context-labels`, `no-region-labels`, `no-poi-labels`. There is **no** `projection`, `scale`, `subtitle`, `surface`, `region`, or label-enum directive, and cosmetics have no positive opt-in form. Reserved metadata keys (need colons): `value`, `label`, `style` (`value` = the one numeric channel: region shade / POI size / edge thickness); `surface:` is no longer recognized. A bare US state postal code resolves to that state (`poi Portland OR` → Oregon; `CA` = California). Coordinates are positional (no `at:` key). Projection is inferred from extent + whether the map carries data (US → albers-usa; world data → Equal Earth; world reference → natural-earth; regional → mercator) and cannot be overridden.
+The directive set is **13, all colon-free**: six naming intent the renderer can't infer — `region-metric`, `poi-metric`, `flow-metric`, `locale`, `active-tag`, `caption` — and seven `no-*` cosmetic opt-outs — `no-legend`, `no-coastline`, `no-relief`, `no-context-labels`, `no-region-labels`, `no-poi-labels`, `no-colorize`. There is **no** `projection`, `scale`, `subtitle`, `surface`, `region`, or label-enum directive, and cosmetics have no positive opt-in form. Reserved metadata keys (need colons): `value`, `label`, `style` (`value` = the one numeric channel: region shade / POI size / edge thickness); `surface:` is no longer recognized. A bare US state postal code resolves to that state (`poi Portland OR` → Oregon; `CA` = California). Coordinates are positional (no `at:` key). Projection is inferred from extent + whether the map carries data (US → albers-usa; world data → Equal Earth; world reference → natural-earth; regional → mercator) and cannot be overridden.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {

package/src/boxes-and-lines/renderer.ts

@@ -35,7 +35,9 @@ import { ScaleContext } from '../utils/scaling';
 
 // ── Constants (aligned with infra pattern) ─────────────────
 const DIAGRAM_PADDING = 20;
-const NODE_FONT_SIZE = 13;
+// Box labels run smaller than the 13px org/infra use — boxes-and-lines nodes are
+// narrower (~97px), so a smaller label fits more text per line before wrapping.
+const NODE_FONT_SIZE = 11;
 const MIN_NODE_FONT_SIZE = 9;
 const EDGE_LABEL_FONT_SIZE = 11;
 const EDGE_STROKE_WIDTH = 1.5;
@@ -429,7 +431,7 @@ export function renderBoxesAndLines(
   // between a tag group and the metric label, the tag group wins (AC9).
   const matchColorGroup = (v: string): string | null => {
     const lv = v.trim().toLowerCase();
-    if (lv === 'none') return null;
+    if (lv === '' || lv === 'none') return null;
     const tg = parsed.tagGroups.find((g) => g.name.toLowerCase() === lv);
     if (tg) return tg.name;
     if (lv === VALUE_NAME?.toLowerCase()) return VALUE_NAME;
@@ -1087,6 +1089,61 @@ export function renderBoxesAndLines(
           fullText.length > 200 ? fullText.slice(0, 199) + '\u2026' : fullText;
         nodeG.append('title').text(tooltipText);
       }
+    } else if (parsed.showValues && node.value !== undefined) {
+      // Plain node with show-values: label header + thin divider + a
+      // "Metric: value" line below (org/infra card style), instead of a
+      // vertically-centered label with a floating number.
+      const valueLabel = parsed.boxMetric
+        ? `${parsed.boxMetric}: ${node.value}`
+        : String(node.value);
+      // Fixed header zone (not label-height-driven) so the divider sits at a
+      // UNIFORM Y across every box, regardless of label line count (infra/org
+      // both anchor the separator to a constant header height).
+      const headerH = ln.height / 2;
+      const sepY = -ln.height / 2 + headerH;
+      const fitted = fitLabelToHeader(node.label, ln.width, 2);
+      const labelLineH = fitted.fontSize * 1.3;
+      const labelTotalH = fitted.lines.length * labelLineH;
+      const headerCenterY = -ln.height / 2 + headerH / 2;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        nodeG
+          .append('text')
+          .attr('x', 0)
+          .attr(
+            'y',
+            headerCenterY - labelTotalH / 2 + labelLineH / 2 + li * labelLineH
+          )
+          .attr('text-anchor', 'middle')
+          .attr('dominant-baseline', 'central')
+          .attr('font-size', fitted.fontSize)
+          .attr('font-weight', '600')
+          .attr('fill', colors.text)
+          // In-bounds by loop guard.
+          .text(fitted.lines[li]!);
+      }
+      // Thin divider under the title — a tint of the box's own stroke colour
+      // (matches org / infra card separators), not a neutral text line.
+      nodeG
+        .append('line')
+        .attr('x1', -ln.width / 2)
+        .attr('y1', sepY)
+        .attr('x2', ln.width / 2)
+        .attr('y2', sepY)
+        .attr('stroke', colors.stroke)
+        .attr('stroke-opacity', 0.3)
+        .attr('stroke-width', 1);
+      // "Metric: value" centered in the space below the divider.
+      nodeG
+        .append('text')
+        .attr('class', 'bl-node-value')
+        .attr('x', 0)
+        .attr('y', (sepY + ln.height / 2) / 2)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('font-size', VALUE_FONT_SIZE)
+        .attr('fill', colors.text)
+        .attr('opacity', 0.85)
+        .text(valueLabel);
     } else {
       const maxLabelLines = Math.max(
         2,
@@ -1110,56 +1167,46 @@ export function renderBoxesAndLines(
       }
     }
 
-    // ── show-values: print the numeric value as text (opt-in) ──
-    // Independent of the active dimension (a user may want the numbers printed
-    // while a tag group tints). Plain nodes: centered below the label. Described
-    // nodes: a top-right corner badge so it never overflows the full body (R2-6).
-    if (parsed.showValues && node.value !== undefined) {
+    // ── show-values on a DESCRIBED node ── the body is already full, so the
+    // value rides in a top-right corner badge (plain nodes are handled in the
+    // header/divider branch above; a described node with descriptions hidden
+    // also falls through to that plain branch).
+    if (
+      parsed.showValues &&
+      node.value !== undefined &&
+      desc &&
+      desc.length > 0 &&
+      !hideDescriptions
+    ) {
       const valueText = String(node.value);
-      const descShown = !!(desc && desc.length > 0 && !hideDescriptions);
-      if (descShown) {
-        // Corner badge — pill behind the number so it reads over the header.
-        const padX = 6;
-        const padY = 5;
-        const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO + 8;
-        const bh = VALUE_FONT_SIZE + 4;
-        const bx = ln.width / 2 - bw - 4;
-        const by = -ln.height / 2 + 4;
-        nodeG
-          .append('rect')
-          .attr('x', bx)
-          .attr('y', by)
-          .attr('width', bw)
-          .attr('height', bh)
-          .attr('rx', 3)
-          .attr('fill', palette.bg)
-          .attr('opacity', 0.85);
-        nodeG
-          .append('text')
-          .attr('class', 'bl-node-value')
-          .attr('x', bx + bw - padX)
-          .attr('y', by + padY)
-          .attr('text-anchor', 'end')
-          .attr('dominant-baseline', 'central')
-          .attr('font-size', VALUE_FONT_SIZE)
-          .attr('font-weight', '600')
-          .attr('fill', palette.textMuted)
-          .text(valueText);
-      } else {
-        // Plain node: value centered just above the bottom edge.
-        nodeG
-          .append('text')
-          .attr('class', 'bl-node-value')
-          .attr('x', 0)
-          .attr('y', ln.height / 2 - VALUE_FONT_SIZE)
-          .attr('text-anchor', 'middle')
-          .attr('dominant-baseline', 'central')
-          .attr('font-size', VALUE_FONT_SIZE)
-          .attr('font-weight', '600')
-          .attr('fill', colors.text)
-          .attr('opacity', 0.8)
-          .text(valueText);
-      }
+      const padX = 6;
+      const padY = 5;
+      const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO + 8;
+      const bh = VALUE_FONT_SIZE + 4;
+      // Clamp to the left padding so a long value on a narrow node never
+      // slides past the box edge / over the label (R2-6 / AC23).
+      const bx = Math.max(-ln.width / 2 + 4, ln.width / 2 - bw - 4);
+      const by = -ln.height / 2 + 4;
+      nodeG
+        .append('rect')
+        .attr('x', bx)
+        .attr('y', by)
+        .attr('width', bw)
+        .attr('height', bh)
+        .attr('rx', 3)
+        .attr('fill', palette.bg)
+        .attr('opacity', 0.85);
+      nodeG
+        .append('text')
+        .attr('class', 'bl-node-value')
+        .attr('x', bx + bw - padX)
+        .attr('y', by + padY)
+        .attr('text-anchor', 'end')
+        .attr('dominant-baseline', 'central')
+        .attr('font-size', VALUE_FONT_SIZE)
+        .attr('font-weight', '600')
+        .attr('fill', palette.textMuted)
+        .text(valueText);
     }
   }
 

package/src/d3.ts

@@ -4238,7 +4238,6 @@ function renderTimelineHorizontalTimeSort(
 ): void {
   const {
     width,
-    height,
     tooltip,
     solid,
     textColor,
@@ -4301,14 +4300,18 @@ function renderTimelineHorizontalTimeSort(
     ? -(topScaleH + markerReserve + ERA_ROW_H / 2)
     : 0;
   const innerWidth = width - margin.left - margin.right;
-  const availInnerHeight = height - margin.top - margin.bottom;
-  const rowH = Math.min(ctx.structural(28), availInnerHeight / sorted.length);
-  // Each event needs only `rowH` of vertical space. When the container is
-  // taller than the rows require (rowH hits its 28px cap), draw the era
-  // bands and time axis to the content height instead of the full container
-  // so the axis sits just below the last event rather than leaving a large
-  // vertical gap. The SVG itself shrinks to match (top-aligned via
-  // preserveAspectRatio) so callers don't reserve dead space below the chart.
+  // Each event gets a fixed comfortable row. The old behaviour compressed rowH
+  // to fit the container height (`min(28, avail / n)`), but that only ever
+  // shrank rows BELOW the 22px bar height — cramming events into overlap when
+  // the host surface was shorter than the content required (e.g. the app's
+  // fixed-height embedded-diagram surface). A constant rowH never overlaps:
+  // when the container is taller than needed the SVG shrinks to the content
+  // (top-aligned via preserveAspectRatio); when shorter, the SVG grows past it
+  // and the host collapses/expands to the rendered height. This also makes the
+  // interactive preview match the exported image, which already used rowH=28.
+  const rowH = ctx.structural(28);
+  // Draw the era bands and time axis to the content height (not the full
+  // container) so the axis sits just below the last event.
   const innerHeight = rowH * sorted.length;
   const usedHeight = margin.top + innerHeight + margin.bottom;
 
@@ -7751,6 +7754,10 @@ export async function renderForExport(
     // here — the Node fs `loadMapData()` seam can't run in a browser. CLI/SSR
     // omit this and fall back to the fs loader.
     mapData?: import('./map/resolved-types').MapData;
+    // WYSIWYG map export: the live preview pane's displayed aspect (w/h). When
+    // set, the map canvas adopts it + stretch-fills so the PNG matches the
+    // on-screen map. The app passes this; headless consumers omit it.
+    mapAspect?: number;
   }
 ): Promise<string> {
   const exportMode = options?.exportMode ?? false;
@@ -8491,7 +8498,12 @@ export async function renderForExport(
     // aspect (world ~2.3:1, a region taller, etc.) instead of the fixed 800, so the
     // export matches the content's natural shape — no vertical stretch, no
     // letterbox bands. `preferContain` rides along to the renderer.
-    const dims = mapExportDimensions(mapResolved, mapData, EXPORT_WIDTH);
+    const dims = mapExportDimensions(
+      mapResolved,
+      mapData,
+      EXPORT_WIDTH,
+      options?.mapAspect
+    );
     const container = createExportContainer(dims.width, dims.height);
     renderMapForExport(
       container,