@diagrammo/dgmo 0.22.0 → 0.24.0

package/dist/auto.cjs

@@ -820,9 +820,7 @@ var init_reserved_key_registry = __esm({
     BOXES_AND_LINES_REGISTRY = staticRegistry([
       "color",
       "description",
-      "width",
-      "split",
-      "fanout"
+      "value"
     ]);
     TIMELINE_REGISTRY = staticRegistry([
       "color",
@@ -16824,6 +16822,21 @@ function parseBoxesAndLines(content) {
         }
         continue;
       }
+      if (!contentStarted) {
+        const metricMatch = trimmed.match(/^box-metric\s+(.+)$/i);
+        if (metricMatch) {
+          const { label, colorName } = peelTrailingColorName(
+            metricMatch[1].trim()
+          );
+          result.boxMetric = label;
+          if (colorName !== void 0) result.boxMetricColor = colorName;
+          continue;
+        }
+        if (/^show-values$/i.test(trimmed)) {
+          result.showValues = true;
+          continue;
+        }
+      }
       if (!contentStarted) {
         const optMatch = trimmed.match(OPTION_NOCOLON_RE);
         if (optMatch) {
@@ -17202,6 +17215,19 @@ function parseNodeLine(trimmed, lineNum, metaAliasMap, diagnostics, nameAliasMap
     description = [metadata["description"]];
     delete metadata["description"];
   }
+  let value;
+  if (metadata["value"] !== void 0) {
+    const raw = metadata["value"];
+    const num = Number(raw);
+    if (Number.isFinite(num)) {
+      value = num;
+    } else {
+      diagnostics.push(
+        makeDgmoError(lineNum, `value must be a number (got "${raw}")`, "error")
+      );
+    }
+    delete metadata["value"];
+  }
   if (split.alias) {
     nameAliasMap?.set(normalizeName(split.alias), label);
   }
@@ -17210,7 +17236,8 @@ function parseNodeLine(trimmed, lineNum, metaAliasMap, diagnostics, nameAliasMap
     label,
     lineNumber: lineNum,
     metadata,
-    ...description !== void 0 && { description }
+    ...description !== void 0 && { description },
+    ...value !== void 0 && { value }
   };
 }
 function splitTargetAndMeta(rest, metaAliasMap) {
@@ -26330,7 +26357,18 @@ function fitLabelToHeader(label, nodeWidth, maxLines) {
   const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "\u2026" : label;
   return { lines: [truncated], fontSize: MIN_NODE_FONT_SIZE };
 }
-function nodeColors(node, tagGroups, activeGroupName, palette, isDark, solid) {
+function nodeColors(node, tagGroups, activeGroupName, palette, isDark, value, solid) {
+  const neutralFill = mix(palette.bg, palette.text, isDark ? 90 : 95);
+  if (value.active) {
+    const fill3 = node.value !== void 0 ? value.fillForValue(node.value) : neutralFill;
+    const stroke3 = value.hue;
+    const text2 = contrastText(
+      fill3,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    return { fill: fill3, stroke: stroke3, text: text2 };
+  }
   const tagColor = resolveTagColor(
     node.metadata,
     [...tagGroups],
@@ -26439,25 +26477,65 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const sGroupLabelZone = sctx.structural(GROUP_LABEL_ZONE);
   const sTitleFontSize = sctx.text(TITLE_FONT_SIZE);
   const sTitleY = sctx.structural(TITLE_Y);
+  const nodeValues = parsed.nodes.filter((n) => n.value !== void 0).map((n) => n.value);
+  const hasRamp = nodeValues.length > 0;
+  const allNonNegative = hasRamp && nodeValues.every((v) => v >= 0);
+  const rampMin = allNonNegative ? 0 : Math.min(...nodeValues);
+  const rampMax = Math.max(...nodeValues);
+  const rampHue = resolveColor(parsed.boxMetricColor ?? "", palette) ?? palette.primary;
+  const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
+  const fillForValue = (v) => {
+    const t = rampMax > rampMin ? (v - rampMin) / (rampMax - rampMin) : 1;
+    const pct = RAMP_FLOOR + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR);
+    return mix(rampHue, rampBase, pct);
+  };
+  const VALUE_NAME = hasRamp ? parsed.boxMetric?.trim() || "Value" : null;
+  const matchColorGroup = (v) => {
+    const lv = v.trim().toLowerCase();
+    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;
+    return v;
+  };
+  const override = activeTagGroup;
+  let activeGroup;
+  if (override !== void 0) {
+    activeGroup = override === null ? null : matchColorGroup(override);
+  } else if (parsed.options["active-tag"] !== void 0) {
+    activeGroup = matchColorGroup(parsed.options["active-tag"]);
+  } else {
+    activeGroup = VALUE_NAME ?? (parsed.tagGroups.length > 0 ? parsed.tagGroups[0].name : null);
+  }
+  const activeIsValue = VALUE_NAME !== null && activeGroup === VALUE_NAME;
+  const valueGroup = VALUE_NAME !== null ? {
+    name: VALUE_NAME,
+    entries: [],
+    gradient: {
+      min: rampMin,
+      max: rampMax,
+      hue: rampHue,
+      base: rampBase
+    }
+  } : null;
+  const legendGroups = [
+    ...valueGroup ? [valueGroup] : [],
+    ...parsed.tagGroups
+  ];
   const reserveHasDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0
   );
-  const willRenderLegend = parsed.tagGroups.length > 0 || reserveHasDescriptions && controlsHost !== "app";
+  const willRenderLegend = legendGroups.length > 0 || reserveHasDescriptions && controlsHost !== "app";
   const sLegendHeight = willRenderLegend ? sctx.structural(
     getMaxLegendReservedHeight(
       {
-        groups: parsed.tagGroups,
+        groups: legendGroups,
         position: { placement: "top-center", titleRelation: "below-title" },
         mode: exportMode ? "export" : "preview"
       },
       width
     )
   ) : 0;
-  const activeGroup = resolveActiveTagGroup(
-    parsed.tagGroups,
-    parsed.options["active-tag"],
-    activeTagGroup
-  );
   const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
   const nodeMap = /* @__PURE__ */ new Map();
   for (const node of parsed.nodes) nodeMap.set(node.label, node);
@@ -26468,7 +26546,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const hasAnyDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0
   );
-  const needsLegend = parsed.tagGroups.length > 0 || hasAnyDescriptions && onToggleDescriptions;
+  const needsLegend = legendGroups.length > 0 || hasAnyDescriptions && onToggleDescriptions;
   const legendH = needsLegend ? sLegendHeight + 8 : 0;
   const groupLabelsSet = new Set(layout.groups.map((g) => g.label));
   let labelZoneExtension = 0;
@@ -26674,12 +26752,16 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       activeGroup,
       palette,
       isDark,
+      { active: activeIsValue, hue: rampHue, fillForValue },
       parsed.options["solid-fill"] === "on"
     );
     const nodeG = diagramG.append("g").attr("class", "bl-node").attr("transform", `translate(${ln.x},${ln.y})`).attr("data-line-number", node.lineNumber).attr("data-node-id", node.label).style("cursor", onClickItem ? "pointer" : "default").style("--bl-node-stroke", colors.stroke);
     for (const [key, val] of Object.entries(node.metadata)) {
       nodeG.attr(`data-tag-${key.toLowerCase()}`, val.toLowerCase());
     }
+    if (node.value !== void 0) {
+      nodeG.attr("data-value", node.value);
+    }
     if (onClickItem) {
       nodeG.on("click", (event) => {
         const target = event.target;
@@ -26751,6 +26833,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,
@@ -26763,11 +26861,22 @@ 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 && desc && desc.length > 0 && !hideDescriptions) {
+      const valueText = String(node.value);
+      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(
     (n) => n.description && n.description.length > 0
   );
-  const hasLegend = parsed.tagGroups.length > 0 || hasDescriptions && controlsHost !== "app";
+  const hasLegend = legendGroups.length > 0 || hasDescriptions && controlsHost !== "app";
   if (hasLegend) {
     let controlsGroup;
     if (hasDescriptions && (onToggleDescriptions || controlsHost === "app")) {
@@ -26785,7 +26894,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
       };
     }
     const legendConfig = {
-      groups: parsed.tagGroups,
+      groups: legendGroups,
       position: { placement: "top-center", titleRelation: "below-title" },
       mode: exportMode ? "export" : "preview",
       // Keep inactive sibling tag groups visible as collapsed pills so the user
@@ -26840,7 +26949,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     }
   });
 }
-var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, lineGeneratorLR, lineGeneratorTB;
+var d3Selection6, d3Shape4, DIAGRAM_PADDING6, NODE_FONT_SIZE, MIN_NODE_FONT_SIZE, EDGE_LABEL_FONT_SIZE4, EDGE_STROKE_WIDTH5, NODE_STROKE_WIDTH5, NODE_RX, COLLAPSE_BAR_HEIGHT3, ARROWHEAD_W2, ARROWHEAD_H2, DESC_FONT_SIZE, DESC_LINE_HEIGHT, MAX_DESC_LINES, CHAR_WIDTH_RATIO2, NODE_TEXT_PADDING, GROUP_RX, GROUP_LABEL_FONT_SIZE, GROUP_LABEL_ZONE, RAMP_FLOOR, VALUE_FONT_SIZE, lineGeneratorLR, lineGeneratorTB;
 var init_renderer6 = __esm({
   "src/boxes-and-lines/renderer.ts"() {
     "use strict";
@@ -26851,12 +26960,13 @@ var init_renderer6 = __esm({
     init_legend_layout();
     init_title_constants();
     init_color_utils();
+    init_colors();
     init_tag_groups();
     init_inline_markdown();
     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;
@@ -26873,6 +26983,8 @@ var init_renderer6 = __esm({
     GROUP_RX = 8;
     GROUP_LABEL_FONT_SIZE = 14;
     GROUP_LABEL_ZONE = 32;
+    RAMP_FLOOR = 15;
+    VALUE_FONT_SIZE = 11;
     lineGeneratorLR = d3Shape4.line().x((d) => d.x).y((d) => d.y).curve(d3Shape4.curveBasis);
     lineGeneratorTB = d3Shape4.line().x((d) => d.x).y((d) => d.y).curve(d3Shape4.curveBasis);
   }
@@ -46591,7 +46703,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;
@@ -46672,6 +46788,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;
@@ -46684,7 +46816,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";
@@ -46697,6 +46829,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.
@@ -46775,6 +46908,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();
@@ -47204,6 +47386,38 @@ function parsePathRings(d) {
   if (cur.length) rings.push(cur);
   return rings;
 }
+function dropAntimeridianWrapSlivers(d, width, height) {
+  const rings = parsePathRings(d);
+  if (rings.length <= 1) return d;
+  const eps = 0.75;
+  const minArea = 3e-3 * width * height;
+  const ringArea = (r) => {
+    let s = 0;
+    for (let i = 0; i < r.length; i++) {
+      const a = r[i];
+      const b = r[(i + 1) % r.length];
+      s += a[0] * b[1] - b[0] * a[1];
+    }
+    return Math.abs(s) / 2;
+  };
+  const areas = rings.map(ringArea);
+  const maxArea = Math.max(...areas);
+  const onVEdge = (a, b) => Math.abs(a[0]) <= eps && Math.abs(b[0]) <= eps || Math.abs(a[0] - width) <= eps && Math.abs(b[0] - width) <= eps;
+  let dropped = false;
+  const kept = rings.filter((r, idx) => {
+    if (areas[idx] >= maxArea || areas[idx] >= minArea) return true;
+    const touches = r.some((p, i) => onVEdge(p, r[(i + 1) % r.length]));
+    if (touches) {
+      dropped = true;
+      return false;
+    }
+    return true;
+  });
+  if (!dropped) return d;
+  return kept.map(
+    (r) => r.map((p, i) => (i ? "L" : "M") + p[0] + "," + p[1]).join("") + "Z"
+  ).join("");
+}
 function layoutMap(resolved, data, size, opts) {
   const { palette, isDark } = opts;
   const { width, height } = size;
@@ -47287,7 +47501,7 @@ function layoutMap(resolved, data, size, opts) {
   const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
   const fillForValue = (s) => {
     const t = rampMax > rampMin ? (s - rampMin) / (rampMax - rampMin) : 1;
-    const pct = RAMP_FLOOR + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR);
+    const pct = RAMP_FLOOR2 + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR2);
     return mix(rampHue, rampBase, pct);
   };
   const tagFill = (tags, groupName) => {
@@ -47323,12 +47537,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],
     [
@@ -47346,10 +47591,11 @@ function layoutMap(resolved, data, size, opts) {
     const by0 = cb[0][1];
     const cw = cb[1][0] - bx0;
     const ch = cb[1][1] - by0;
-    const ox = fitBox[0][0];
-    const oy = fitBox[0][1];
-    const sx = cw > 0 ? (fitBox[1][0] - ox) / cw : 1;
-    const sy = ch > 0 ? (fitBox[1][1] - oy) / ch : 1;
+    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;
+    const sy = ch > 0 ? (height - topReserve) / ch : 1;
     stretchParams = { sx, sy, ox, oy, bx0, by0 };
     const stretch = (x, y) => [
       ox + (x - bx0) * sx,
@@ -47622,7 +47868,8 @@ function layoutMap(resolved, data, size, opts) {
       const r = regionById.get(iso);
       const viewF = shouldCull ? cullFeatureToView(f) : dropFrameFillers(f);
       if (!viewF) continue;
-      const d = path(viewF) ?? "";
+      const raw = path(viewF) ?? "";
+      const d = fitIsGlobal ? dropAntimeridianWrapSlivers(raw, width, height) : raw;
       if (!d) continue;
       const isThisLayer = r?.layer === layerKind;
       const isForeign = layerKind === "country" && usContext && iso !== "US";
@@ -47639,6 +47886,9 @@ function layoutMap(resolved, data, size, opts) {
       } else {
         label = f.properties?.name;
       }
+      const labelAnchor = WORLD_LABEL_ANCHORS[iso];
+      const c = labelAnchor ? project(labelAnchor[0], labelAnchor[1]) : path.centroid(viewF);
+      const hasCentroid = c != null && Number.isFinite(c[0]) && Number.isFinite(c[1]);
       regions.push({
         id: iso,
         d,
@@ -47647,6 +47897,7 @@ function layoutMap(resolved, data, size, opts) {
         lineNumber,
         layer,
         ...label !== void 0 && { label },
+        ...hasCentroid && { labelX: c[0], labelY: c[1] },
         ...isThisLayer && r.value !== void 0 && { value: r.value },
         ...isThisLayer && Object.keys(r.tags).length > 0 && { tags: r.tags }
       });
@@ -48087,10 +48338,6 @@ function layoutMap(resolved, data, size, opts) {
       lineNumber
     });
   };
-  const WORLD_LABEL_ANCHORS = {
-    US: [-98.5, 39.5]
-    // CONUS geographic centre (near Lebanon, Kansas)
-  };
   const REGION_LABEL_GAP = 2;
   const regionLabelRect = (cx, cy, text) => {
     const w = measureLegendText(text, FONT2) + 2 * REGION_LABEL_GAP;
@@ -48408,30 +48655,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,
@@ -48456,7 +48679,7 @@ function layoutMap(resolved, data, size, opts) {
     diagnostics: []
   };
 }
-var import_d3_geo2, import_topojson_client2, FIT_PAD, RAMP_FLOOR, R_DEFAULT, R_MIN, R_MAX, W_MIN, W_MAX, FONT2, MAX_CLUSTER_EXTENT_FACTOR, MAX_COLUMN_ROWS, REGION_LABEL_HALO_RATIO, LAND_TINT_LIGHT, LAND_TINT_DARK, TAG_TINT_LIGHT, TAG_TINT_DARK, WATER_TINT_LIGHT, WATER_TINT_DARK, RIVER_WIDTH, COMPACT_WIDTH_PX, RELIEF_MIN_AREA, RELIEF_MIN_DIM, RELIEF_HATCH_SPACING, RELIEF_HATCH_WIDTH, RELIEF_HATCH_STRENGTH, COASTLINE_RING_COUNT, COASTLINE_D0, COASTLINE_STEP, COASTLINE_THICKNESS, COASTLINE_OPACITY_NEAR, COASTLINE_OPACITY_FAR, COASTLINE_MIN_EXTENT, COASTLINE_MIN_EXTENT_GLOBAL, COASTLINE_STROKE_MIX, FOREIGN_TINT_LIGHT, FOREIGN_TINT_DARK, MUTED_FOREIGN_LIGHT, MUTED_FOREIGN_DARK, COLO_R, GOLDEN_ANGLE, STACK_OVERLAP, STACK_RING_MAX, STACK_RING_GAP, FAN_STEP, ARC_CURVE_FRAC, decodeCache, usConusProjection, alaskaProjection, hawaiiProjection, INSET_STATES, inAlaska, inHawaii, FOREIGN_BORDER, US_NON_CONUS;
+var import_d3_geo2, import_topojson_client2, FIT_PAD, RAMP_FLOOR2, R_DEFAULT, R_MIN, R_MAX, W_MIN, W_MAX, FONT2, WORLD_LABEL_ANCHORS, MAX_CLUSTER_EXTENT_FACTOR, MAX_COLUMN_ROWS, REGION_LABEL_HALO_RATIO, LAND_TINT_LIGHT, LAND_TINT_DARK, TAG_TINT_LIGHT, TAG_TINT_DARK, WATER_TINT_LIGHT, WATER_TINT_DARK, RIVER_WIDTH, COMPACT_WIDTH_PX, RELIEF_MIN_AREA, RELIEF_MIN_DIM, RELIEF_HATCH_SPACING, RELIEF_HATCH_WIDTH, RELIEF_HATCH_STRENGTH, COASTLINE_RING_COUNT, COASTLINE_D0, COASTLINE_STEP, COASTLINE_THICKNESS, COASTLINE_OPACITY_NEAR, COASTLINE_OPACITY_FAR, COASTLINE_MIN_EXTENT, COASTLINE_MIN_EXTENT_GLOBAL, COASTLINE_STROKE_MIX, FOREIGN_TINT_LIGHT, FOREIGN_TINT_DARK, MUTED_FOREIGN_LIGHT, MUTED_FOREIGN_DARK, COLO_R, GOLDEN_ANGLE, STACK_OVERLAP, STACK_RING_MAX, STACK_RING_GAP, FAN_STEP, ARC_CURVE_FRAC, decodeCache, usConusProjection, alaskaProjection, hawaiiProjection, INSET_STATES, inAlaska, inHawaii, FOREIGN_BORDER, US_NON_CONUS;
 var init_layout15 = __esm({
   "src/map/layout.ts"() {
     "use strict";
@@ -48469,15 +48692,20 @@ var init_layout15 = __esm({
     init_label_layout();
     init_legend_constants();
     init_title_constants();
+    init_legend_band();
     init_context_labels();
     FIT_PAD = 24;
-    RAMP_FLOOR = 15;
+    RAMP_FLOOR2 = 15;
     R_DEFAULT = 6;
     R_MIN = 4;
     R_MAX = 22;
     W_MIN = 1.25;
     W_MAX = 8;
     FONT2 = 11;
+    WORLD_LABEL_ANCHORS = {
+      US: [-98.5, 39.5]
+      // CONUS geographic centre (near Lebanon, Kansas)
+    };
     MAX_CLUSTER_EXTENT_FACTOR = 0.18;
     MAX_COLUMN_ROWS = 7;
     REGION_LABEL_HALO_RATIO = 4.5;
@@ -48491,9 +48719,9 @@ var init_layout15 = __esm({
     COMPACT_WIDTH_PX = 480;
     RELIEF_MIN_AREA = 12;
     RELIEF_MIN_DIM = 2;
-    RELIEF_HATCH_SPACING = 2;
-    RELIEF_HATCH_WIDTH = 0.15;
-    RELIEF_HATCH_STRENGTH = 32;
+    RELIEF_HATCH_SPACING = 1.5;
+    RELIEF_HATCH_WIDTH = 0.2;
+    RELIEF_HATCH_STRENGTH = 26;
     COASTLINE_RING_COUNT = 5;
     COASTLINE_D0 = 16e-4;
     COASTLINE_STEP = 28e-4;
@@ -48571,7 +48799,47 @@ function ringToPath(ring) {
     d += (i ? "L" : "M") + ring[i][0] + "," + ring[i][1];
   return d + "Z";
 }
-function coastlineOuterRings(regions, minExtent) {
+function polylineToPath(pts) {
+  let d = "";
+  for (let i = 0; i < pts.length; i++)
+    d += (i ? "L" : "M") + pts[i][0] + "," + pts[i][1];
+  return d;
+}
+function ringToCoastPaths(ring, frame) {
+  if (!frame) return [ringToPath(ring)];
+  const n = ring.length;
+  const eps = 0.75;
+  const onL = (x) => Math.abs(x) <= eps;
+  const onR = (x) => Math.abs(x - frame.w) <= eps;
+  const onT = (y) => Math.abs(y) <= eps;
+  const onB = (y) => Math.abs(y - frame.h) <= eps;
+  const isFrameEdge = (a, b) => onL(a[0]) && onL(b[0]) || onR(a[0]) && onR(b[0]) || onT(a[1]) && onT(b[1]) || onB(a[1]) && onB(b[1]);
+  let firstBreak = -1;
+  for (let i = 0; i < n; i++)
+    if (isFrameEdge(ring[i], ring[(i + 1) % n])) {
+      firstBreak = i;
+      break;
+    }
+  if (firstBreak === -1) return [ringToPath(ring)];
+  const paths = [];
+  let cur = [];
+  const start = (firstBreak + 1) % n;
+  for (let k = 0; k < n; k++) {
+    const i = (start + k) % n;
+    const a = ring[i];
+    const b = ring[(i + 1) % n];
+    if (isFrameEdge(a, b)) {
+      if (cur.length >= 2) paths.push(polylineToPath(cur));
+      cur = [];
+      continue;
+    }
+    if (cur.length === 0) cur.push(a);
+    cur.push(b);
+  }
+  if (cur.length >= 2) paths.push(polylineToPath(cur));
+  return paths;
+}
+function coastlineOuterRings(regions, minExtent, frame) {
   const paths = [];
   for (const r of regions) {
     const rings = parsePathRings(r.d);
@@ -48594,7 +48862,7 @@ function coastlineOuterRings(regions, minExtent) {
       for (let j = 0; j < rings.length; j++)
         if (j !== i && pointInRing2(fx, fy, rings[j])) depth++;
       if (depth % 2 === 1) continue;
-      paths.push(ringToPath(ring));
+      paths.push(...ringToCoastPaths(ring, frame));
     }
   }
   return paths;
@@ -48624,6 +48892,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
       }
@@ -48638,6 +48909,10 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   const drawRegion = (g, r, strokeWidth) => {
     const p = g.append("path").attr("d", r.d).attr("fill", r.fill).attr("stroke", r.stroke).attr("stroke-width", strokeWidth);
     if (r.label) p.attr("data-region-name", r.label);
+    if (r.id && r.id !== "lake") p.attr("data-iso", r.id);
+    if (r.labelX !== void 0 && r.labelY !== void 0) {
+      p.attr("data-label-x", r.labelX).attr("data-label-y", r.labelY);
+    }
     if (r.layer !== "base") {
       p.classed("dgmo-map-region", true).attr("data-region", r.id);
       if (r.value !== void 0) p.attr("data-value", r.value);
@@ -48667,7 +48942,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     const landClip = defs.append("clipPath").attr("id", landClipId);
     for (const r of layout.regions)
       if (r.id !== "lake") landClip.append("path").attr("d", r.d);
-    const gRelief = svg.append("g").attr("clip-path", `url(#${landClipId})`).append("g").attr("class", "dgmo-map-relief").attr("clip-path", `url(#${rangeClipId})`).attr("stroke", h.color).attr("stroke-width", h.width).attr("vector-effect", "non-scaling-stroke");
+    const gRelief = svg.append("g").attr("clip-path", `url(#${landClipId})`).style("pointer-events", "none").append("g").attr("class", "dgmo-map-relief").attr("clip-path", `url(#${rangeClipId})`).attr("stroke", h.color).attr("stroke-width", h.width).attr("vector-effect", "non-scaling-stroke");
     for (let y = h.spacing; y < height; y += h.spacing) {
       gRelief.append("line").attr("x1", 0).attr("y1", y).attr("x2", width).attr("y2", y);
     }
@@ -48688,10 +48963,16 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         mask.append("path").attr("d", d).attr("fill", "black").attr("stroke", "black").attr("stroke-width", 2 * reach).attr("stroke-linejoin", "round");
       }
     }
-    const gWater = svg.append("g").attr("class", "dgmo-map-water-lines").attr("fill", "none").attr("mask", `url(#${maskId})`);
+    const gWater = svg.append("g").attr("class", "dgmo-map-water-lines").attr("fill", "none").style("pointer-events", "none").attr("mask", `url(#${maskId})`);
     appendWaterLines(
       gWater,
-      coastlineOuterRings(layout.regions, cs.minExtent),
+      // Pass the canvas frame so edges collinear with it (the antimeridian on a
+      // world map, regional clipExtent cuts) don't get ringed as fake coast —
+      // land runs cleanly to the render-area edge.
+      coastlineOuterRings(layout.regions, cs.minExtent, {
+        w: width,
+        h: height
+      }),
       cs,
       layout.background
     );
@@ -48705,7 +48986,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       gWater.append("path").attr("d", ds.join(" ")).attr("stroke", stroke2).attr("stroke-width", 0.5).attr("stroke-linejoin", "round");
   }
   if (layout.rivers.length) {
-    const gRivers = svg.append("g").attr("class", "dgmo-map-rivers").attr("fill", "none");
+    const gRivers = svg.append("g").attr("class", "dgmo-map-rivers").attr("fill", "none").style("pointer-events", "none");
     for (const r of layout.rivers) {
       gRivers.append("path").attr("d", r.d).attr("stroke", r.color).attr("stroke-width", r.width).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
     }
@@ -48746,7 +49027,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
         clip.append("path").attr("d", d);
       }
-      const gInsetWater = insetG.append("g").attr("clip-path", `url(#${clipId})`).append("g").attr("class", "dgmo-map-inset-water-lines").attr("fill", "none").attr("mask", `url(#${maskId})`);
+      const gInsetWater = insetG.append("g").attr("clip-path", `url(#${clipId})`).append("g").attr("class", "dgmo-map-inset-water-lines").attr("fill", "none").style("pointer-events", "none").attr("mask", `url(#${maskId})`);
       appendWaterLines(
         gInsetWater,
         coastlineOuterRings(layout.insetRegions, cs.minExtent),
@@ -48905,30 +49186,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);
     }
@@ -48973,6 +49236,7 @@ var init_renderer16 = __esm({
     init_title_constants();
     init_color_utils();
     init_legend_d3();
+    init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
   }
@@ -48993,9 +49257,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;
@@ -49008,7 +49273,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 import_d3_geo3, FIT_PAD2, TITLE_GAP, ASPECT_MAX, ASPECT_MIN, MIN_MAP_BAND, FALLBACK_ASPECT, REF;
@@ -54715,7 +54980,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,
@@ -54764,10 +55028,11 @@ 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 innerHeight = height - margin.top - margin.bottom;
-  const rowH = Math.min(ctx.structural(28), innerHeight / 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]);
-  const svg = d3Selection23.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
+  const svg = d3Selection23.select(container).append("svg").attr("width", width).attr("height", usedHeight).attr("viewBox", `0 0 ${width} ${usedHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("background", bgColor);
   if (ctx.isBelowFloor) {
     svg.attr("width", "100%");
   }
@@ -57288,7 +57553,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,
@@ -58298,6 +58568,9 @@ var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([
   "hide",
   "mode",
   "direction",
+  // Boxes-and-lines
+  "box-metric",
+  "show-values",
   // ER
   "notation",
   // Class
@@ -59020,7 +59293,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.22.0";
+var VERSION = "0.24.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "nord",