@diagrammo/dgmo 0.21.1 → 0.23.0

package/dist/auto.mjs

@@ -91,18 +91,18 @@ function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius,
   const results = [];
   for (let i = 0; i < points.length; i++) {
     const pt = points[i];
-    const labelWidth = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
+    const labelWidth2 = pt.label.length * fontSize * CHAR_WIDTH_RATIO + 8;
     let best = null;
     const directions = [
       {
         // Above
         gen: (offset) => {
-          const lx = pt.cx - labelWidth / 2;
+          const lx = pt.cx - labelWidth2 / 2;
           const ly = pt.cy - offset - labelHeight;
-          if (ly < chartBounds.top || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+          if (ly < chartBounds.top || lx < chartBounds.left || lx + labelWidth2 > chartBounds.right)
             return null;
           return {
-            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            rect: { x: lx, y: ly, w: labelWidth2, h: labelHeight },
             textX: pt.cx,
             textY: ly + labelHeight / 2,
             anchor: "middle"
@@ -112,12 +112,12 @@ function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius,
       {
         // Below
         gen: (offset) => {
-          const lx = pt.cx - labelWidth / 2;
+          const lx = pt.cx - labelWidth2 / 2;
           const ly = pt.cy + offset;
-          if (ly + labelHeight > chartBounds.bottom || lx < chartBounds.left || lx + labelWidth > chartBounds.right)
+          if (ly + labelHeight > chartBounds.bottom || lx < chartBounds.left || lx + labelWidth2 > chartBounds.right)
             return null;
           return {
-            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            rect: { x: lx, y: ly, w: labelWidth2, h: labelHeight },
             textX: pt.cx,
             textY: ly + labelHeight / 2,
             anchor: "middle"
@@ -129,10 +129,10 @@ function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius,
         gen: (offset) => {
           const lx = pt.cx + offset;
           const ly = pt.cy - labelHeight / 2;
-          if (lx + labelWidth > chartBounds.right || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
+          if (lx + labelWidth2 > chartBounds.right || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
             return null;
           return {
-            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+            rect: { x: lx, y: ly, w: labelWidth2, h: labelHeight },
             textX: lx,
             textY: pt.cy,
             anchor: "start"
@@ -142,13 +142,13 @@ function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius,
       {
         // Left
         gen: (offset) => {
-          const lx = pt.cx - offset - labelWidth;
+          const lx = pt.cx - offset - labelWidth2;
           const ly = pt.cy - labelHeight / 2;
           if (lx < chartBounds.left || ly < chartBounds.top || ly + labelHeight > chartBounds.bottom)
             return null;
           return {
-            rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
-            textX: lx + labelWidth,
+            rect: { x: lx, y: ly, w: labelWidth2, h: labelHeight },
+            textX: lx + labelWidth2,
             textY: pt.cy,
             anchor: "end"
           };
@@ -198,10 +198,10 @@ function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius,
       }
     }
     if (!best) {
-      const lx = pt.cx - labelWidth / 2;
+      const lx = pt.cx - labelWidth2 / 2;
       const ly = pt.cy - minGap - labelHeight;
       best = {
-        rect: { x: lx, y: ly, w: labelWidth, h: labelHeight },
+        rect: { x: lx, y: ly, w: labelWidth2, h: labelHeight },
         textX: pt.cx,
         textY: ly + labelHeight / 2,
         anchor: "middle",
@@ -761,6 +761,9 @@ var init_reserved_key_registry = __esm({
       "value",
       "label",
       "style"
+      // `surface:` was removed in the 2026-06-02 defaults-on review — it is no longer
+      // a recognized metadata key (the route/edge surface feature was cut; §24B.7).
+      // A stray `surface: water` is no longer captured as a reserved key.
     ]);
     ORG_REGISTRY = staticRegistry([
       "color",
@@ -815,9 +818,7 @@ var init_reserved_key_registry = __esm({
     BOXES_AND_LINES_REGISTRY = staticRegistry([
       "color",
       "description",
-      "width",
-      "split",
-      "fanout"
+      "value"
     ]);
     TIMELINE_REGISTRY = staticRegistry([
       "color",
@@ -1823,77 +1824,266 @@ function getSegmentColors(palette, count) {
     (_, i) => hslToHex(Math.round((startHue + i * step) % 360), avgS, avgL)
   );
 }
+function politicalTints(palette, count, isDark) {
+  if (count <= 0) return [];
+  const base = isDark ? palette.surface : palette.bg;
+  const c = palette.colors;
+  const swatches = [
+    .../* @__PURE__ */ new Set([
+      c.green,
+      c.yellow,
+      c.orange,
+      c.purple,
+      c.red,
+      c.teal,
+      c.cyan,
+      c.blue
+    ])
+  ];
+  const bands = isDark ? POLITICAL_TINT_BANDS.dark : POLITICAL_TINT_BANDS.light;
+  const out = [];
+  for (const pct of bands) {
+    if (out.length >= count) break;
+    for (const s of swatches) out.push(mix(s, base, pct));
+  }
+  return out.slice(0, count);
+}
+var POLITICAL_TINT_BANDS;
 var init_color_utils = __esm({
   "src/palettes/color-utils.ts"() {
     "use strict";
+    POLITICAL_TINT_BANDS = {
+      light: [32, 48, 64, 80],
+      dark: [44, 58, 72, 86]
+    };
   }
 });
 
-// src/palettes/bold.ts
-var boldPalette;
-var init_bold = __esm({
-  "src/palettes/bold.ts"() {
+// src/palettes/atlas.ts
+var atlasPalette;
+var init_atlas = __esm({
+  "src/palettes/atlas.ts"() {
     "use strict";
     init_registry();
-    boldPalette = {
-      id: "bold",
-      name: "Bold",
+    atlasPalette = {
+      id: "atlas",
+      name: "Atlas",
       light: {
-        bg: "#ffffff",
-        surface: "#f0f0f0",
-        overlay: "#f0f0f0",
-        border: "#cccccc",
-        text: "#000000",
-        textMuted: "#666666",
-        textOnFillLight: "#ffffff",
-        textOnFillDark: "#000000",
-        primary: "#0000ff",
-        secondary: "#ff00ff",
-        accent: "#00cccc",
-        destructive: "#ff0000",
+        bg: "#f3ead3",
+        // warm manila / parchment
+        surface: "#ece0c0",
+        // deeper paper (cards, panels)
+        overlay: "#e8dab8",
+        // popovers, dropdowns
+        border: "#bcaa86",
+        // muted sepia rule line
+        text: "#463a26",
+        // aged sepia-brown ink
+        textMuted: "#7a6a4f",
+        // faded annotation ink
+        textOnFillLight: "#f7f1de",
+        // parchment (light text on dark fills)
+        textOnFillDark: "#3a2e1c",
+        // deep ink (dark text on light fills)
+        primary: "#5b7a99",
+        // pull-down map ocean (steel-blue)
+        secondary: "#7e9a6f",
+        // lowland sage / celadon
+        accent: "#b07f7c",
+        // dusty rose
+        destructive: "#b25a45",
+        // brick / terracotta
         colors: {
-          red: "#ff0000",
-          orange: "#ff8000",
-          yellow: "#ffcc00",
-          green: "#00cc00",
-          blue: "#0000ff",
-          purple: "#cc00cc",
-          teal: "#008080",
-          cyan: "#00cccc",
-          gray: "#808080",
-          black: "#000000",
-          white: "#f0f0f0"
+          red: "#bf6a52",
+          // terracotta brick
+          orange: "#cf9a5c",
+          // map tan / ochre
+          yellow: "#cdb35e",
+          // straw / muted lemon
+          green: "#7e9a6f",
+          // sage / celadon lowland
+          blue: "#5b7a99",
+          // steel-blue ocean
+          purple: "#9a7fa6",
+          // dusty lilac / mauve
+          teal: "#6fa094",
+          // muted seafoam
+          cyan: "#79a7b5",
+          // shallow-water blue
+          gray: "#8a7d68",
+          // warm taupe
+          black: "#463a26",
+          // ink
+          white: "#ece0c0"
+          // paper
         }
       },
       dark: {
-        bg: "#000000",
-        surface: "#111111",
-        overlay: "#1a1a1a",
-        border: "#333333",
-        text: "#ffffff",
-        textMuted: "#aaaaaa",
-        textOnFillLight: "#ffffff",
-        textOnFillDark: "#000000",
-        primary: "#00ccff",
-        secondary: "#ff00ff",
-        accent: "#ffff00",
-        destructive: "#ff0000",
+        bg: "#1e2a33",
+        // deep map ocean (night globe)
+        surface: "#27353f",
+        // raised ocean
+        overlay: "#2e3d48",
+        // popovers, dropdowns
+        border: "#3d4f5c",
+        // depth-contour line
+        text: "#e8dcc0",
+        // parchment ink, inverted
+        textMuted: "#a89a7d",
+        // faded label
+        textOnFillLight: "#f7f1de",
+        // parchment
+        textOnFillDark: "#1a242c",
+        // deep ocean ink
+        primary: "#7ba0bf",
+        // brighter ocean
+        secondary: "#9bb588",
+        // sage, lifted
+        accent: "#cf9a96",
+        // dusty rose, lifted
+        destructive: "#c9745c",
+        // brick, lifted
         colors: {
-          red: "#ff0000",
-          orange: "#ff8000",
-          yellow: "#ffff00",
-          green: "#00ff00",
-          blue: "#0066ff",
-          purple: "#ff00ff",
-          teal: "#00cccc",
-          cyan: "#00ffff",
-          gray: "#808080",
-          black: "#111111",
-          white: "#ffffff"
+          red: "#cf7a60",
+          // terracotta
+          orange: "#d9a96a",
+          // tan / ochre
+          yellow: "#d8c074",
+          // straw
+          green: "#9bb588",
+          // sage lowland
+          blue: "#7ba0bf",
+          // ocean
+          purple: "#b59ac0",
+          // lilac / mauve
+          teal: "#85b3a6",
+          // seafoam
+          cyan: "#92bccb",
+          // shallow-water blue
+          gray: "#9a8d76",
+          // warm taupe
+          black: "#27353f",
+          // raised ocean
+          white: "#e8dcc0"
+          // parchment
         }
       }
     };
-    registerPalette(boldPalette);
+    registerPalette(atlasPalette);
+  }
+});
+
+// src/palettes/blueprint.ts
+var blueprintPalette;
+var init_blueprint = __esm({
+  "src/palettes/blueprint.ts"() {
+    "use strict";
+    init_registry();
+    blueprintPalette = {
+      id: "blueprint",
+      name: "Blueprint",
+      light: {
+        bg: "#f4f8fb",
+        // pale drafting white (faint cyan)
+        surface: "#e6eef4",
+        // drafting panel
+        overlay: "#dde9f1",
+        // popovers, dropdowns
+        border: "#aac3d6",
+        // pale blue grid line
+        text: "#123a5e",
+        // blueprint navy ink
+        textMuted: "#4f7390",
+        // faint draft note
+        textOnFillLight: "#f4f8fb",
+        // drafting white
+        textOnFillDark: "#0c2f4d",
+        // deep blueprint navy
+        primary: "#1f5e8c",
+        // blueprint blue
+        secondary: "#5b7d96",
+        // steel
+        accent: "#b08a3e",
+        // draftsman's ochre highlight
+        destructive: "#c0504d",
+        // correction red
+        colors: {
+          red: "#c25a4e",
+          // correction red
+          orange: "#c2823e",
+          // ochre
+          yellow: "#c2a843",
+          // pencil gold
+          green: "#4f8a6b",
+          // drafting green
+          blue: "#1f5e8c",
+          // blueprint blue
+          purple: "#6f5e96",
+          // indigo pencil
+          teal: "#3a8a8a",
+          // teal
+          cyan: "#3f8fb5",
+          // cyan
+          gray: "#7e8e98",
+          // graphite
+          black: "#123a5e",
+          // navy ink
+          white: "#e6eef4"
+          // panel
+        }
+      },
+      dark: {
+        bg: "#103a5e",
+        // deep blueprint blue (cyanotype ground)
+        surface: "#16466e",
+        // raised sheet
+        overlay: "#1c5180",
+        // popovers, dropdowns
+        border: "#3a6f96",
+        // grid line
+        text: "#eaf2f8",
+        // chalk white
+        textMuted: "#9fc0d6",
+        // faint chalk note
+        textOnFillLight: "#eaf2f8",
+        // chalk white
+        textOnFillDark: "#0c2f4d",
+        // deep blueprint navy
+        primary: "#7fb8d8",
+        // chalk cyan
+        secondary: "#9fb8c8",
+        // pale steel
+        accent: "#d8c27a",
+        // chalk amber
+        destructive: "#e08a7a",
+        // chalk correction red
+        colors: {
+          red: "#e0907e",
+          // chalk red
+          orange: "#e0ab78",
+          // chalk amber
+          yellow: "#e3d089",
+          // chalk gold
+          green: "#93c79e",
+          // chalk green
+          blue: "#8ec3e0",
+          // chalk cyan-blue
+          purple: "#b6a6d8",
+          // chalk indigo
+          teal: "#84c7c2",
+          // chalk teal
+          cyan: "#9fd6e0",
+          // chalk cyan
+          gray: "#aebecb",
+          // chalk graphite
+          black: "#16466e",
+          // raised sheet
+          white: "#eaf2f8"
+          // chalk white
+        }
+      }
+    };
+    registerPalette(blueprintPalette);
   }
 });
 
@@ -2390,6 +2580,120 @@ var init_rose_pine = __esm({
   }
 });
 
+// src/palettes/slate.ts
+var slatePalette;
+var init_slate = __esm({
+  "src/palettes/slate.ts"() {
+    "use strict";
+    init_registry();
+    slatePalette = {
+      id: "slate",
+      name: "Slate",
+      light: {
+        bg: "#ffffff",
+        // clean slide white
+        surface: "#f3f5f8",
+        // light cool-gray panel
+        overlay: "#eaeef3",
+        // popovers, dropdowns
+        border: "#d4dae1",
+        // hairline rule
+        text: "#1f2933",
+        // near-black slate (softer than pure black)
+        textMuted: "#5b6672",
+        // secondary label
+        textOnFillLight: "#ffffff",
+        // light text on dark fills
+        textOnFillDark: "#1f2933",
+        // dark text on light fills
+        primary: "#3b6ea5",
+        // confident corporate blue
+        secondary: "#5b6672",
+        // slate gray
+        accent: "#3a9188",
+        // muted teal accent
+        destructive: "#c0504d",
+        // brick red
+        colors: {
+          red: "#c0504d",
+          // brick
+          orange: "#cc7a33",
+          // muted amber
+          yellow: "#c9a227",
+          // gold (not neon)
+          green: "#5b9357",
+          // forest / sage
+          blue: "#3b6ea5",
+          // corporate blue
+          purple: "#7d5ba6",
+          // muted violet
+          teal: "#3a9188",
+          // teal
+          cyan: "#4f96c4",
+          // steel cyan
+          gray: "#7e8a97",
+          // cool gray
+          black: "#1f2933",
+          // slate ink
+          white: "#f3f5f8"
+          // panel
+        }
+      },
+      dark: {
+        bg: "#161b22",
+        // deep slate (keynote dark)
+        surface: "#202833",
+        // raised panel
+        overlay: "#29323e",
+        // popovers, dropdowns
+        border: "#38424f",
+        // divider
+        text: "#e6eaef",
+        // off-white
+        textMuted: "#9aa5b1",
+        // secondary label
+        textOnFillLight: "#ffffff",
+        // light text on dark fills
+        textOnFillDark: "#161b22",
+        // dark text on light fills
+        primary: "#5b9bd5",
+        // lifted corporate blue
+        secondary: "#8593a3",
+        // slate gray, lifted
+        accent: "#45b3a3",
+        // teal, lifted
+        destructive: "#e07b6e",
+        // brick, lifted
+        colors: {
+          red: "#e07b6e",
+          // brick
+          orange: "#e0975a",
+          // amber
+          yellow: "#d9bd5a",
+          // gold
+          green: "#74b56e",
+          // forest / sage
+          blue: "#5b9bd5",
+          // corporate blue
+          purple: "#a585c9",
+          // violet
+          teal: "#45b3a3",
+          // teal
+          cyan: "#62b0d9",
+          // steel cyan
+          gray: "#95a1ae",
+          // cool gray
+          black: "#202833",
+          // raised panel
+          white: "#e6eaef"
+          // off-white
+        }
+      }
+    };
+    registerPalette(slatePalette);
+  }
+});
+
 // src/palettes/solarized.ts
 var solarizedPalette;
 var init_solarized = __esm({
@@ -2485,6 +2789,120 @@ var init_solarized = __esm({
   }
 });
 
+// src/palettes/tidewater.ts
+var tidewaterPalette;
+var init_tidewater = __esm({
+  "src/palettes/tidewater.ts"() {
+    "use strict";
+    init_registry();
+    tidewaterPalette = {
+      id: "tidewater",
+      name: "Tidewater",
+      light: {
+        bg: "#eceff0",
+        // weathered sea-mist paper
+        surface: "#e0e4e3",
+        // worn deck panel
+        overlay: "#dadfdf",
+        // popovers, dropdowns
+        border: "#a9b2b3",
+        // muted slate rule
+        text: "#18313f",
+        // ship's-log navy ink
+        textMuted: "#51636b",
+        // faded log entry
+        textOnFillLight: "#f3f5f3",
+        // weathered white
+        textOnFillDark: "#162c38",
+        // deep navy
+        primary: "#1f4e6b",
+        // deep-sea navy
+        secondary: "#b08a4f",
+        // rope / manila tan
+        accent: "#c69a3e",
+        // brass
+        destructive: "#c1433a",
+        // signal-flag red
+        colors: {
+          red: "#c1433a",
+          // signal-flag red
+          orange: "#cc7a38",
+          // weathered amber
+          yellow: "#d6bf5a",
+          // brass gold
+          green: "#4f8a6b",
+          // sea-glass green
+          blue: "#1f4e6b",
+          // deep-sea navy
+          purple: "#6a5a8c",
+          // twilight harbor
+          teal: "#3d8c8c",
+          // sea-glass teal
+          cyan: "#4f9bb5",
+          // shallow water
+          gray: "#8a8d86",
+          // driftwood gray
+          black: "#18313f",
+          // navy ink
+          white: "#e0e4e3"
+          // deck panel
+        }
+      },
+      dark: {
+        bg: "#0f2230",
+        // night-harbor deep sea
+        surface: "#16303f",
+        // raised hull
+        overlay: "#1d3a4a",
+        // popovers, dropdowns
+        border: "#2c4856",
+        // rigging line
+        text: "#e6ebe8",
+        // weathered white
+        textMuted: "#9aaab0",
+        // faded label
+        textOnFillLight: "#f3f5f3",
+        // weathered white
+        textOnFillDark: "#0f2230",
+        // deep sea
+        primary: "#4f9bc4",
+        // lifted sea blue
+        secondary: "#c9a46a",
+        // rope tan, lifted
+        accent: "#d9b25a",
+        // brass, lifted
+        destructive: "#e06a5e",
+        // signal red, lifted
+        colors: {
+          red: "#e06a5e",
+          // signal-flag red
+          orange: "#df9a52",
+          // amber
+          yellow: "#e0c662",
+          // brass gold
+          green: "#6fb58c",
+          // sea-glass green
+          blue: "#4f9bc4",
+          // sea blue
+          purple: "#9486bf",
+          // twilight harbor
+          teal: "#5cb0ac",
+          // sea-glass teal
+          cyan: "#62b4cf",
+          // shallow water
+          gray: "#9aa39c",
+          // driftwood gray
+          black: "#16303f",
+          // raised hull
+          white: "#e6ebe8"
+          // weathered white
+        }
+      }
+    };
+    registerPalette(tidewaterPalette);
+  }
+});
+
 // src/palettes/tokyo-night.ts
 var tokyoNightPalette;
 var init_tokyo_night = __esm({
@@ -2760,7 +3178,8 @@ var init_monokai = __esm({
 // src/palettes/index.ts
 var palettes_exports = {};
 __export(palettes_exports, {
-  boldPalette: () => boldPalette,
+  atlasPalette: () => atlasPalette,
+  blueprintPalette: () => blueprintPalette,
   catppuccinPalette: () => catppuccinPalette,
   contrastText: () => contrastText,
   draculaPalette: () => draculaPalette,
@@ -2781,7 +3200,9 @@ __export(palettes_exports, {
   rosePinePalette: () => rosePinePalette,
   shade: () => shade,
   shapeFill: () => shapeFill,
+  slatePalette: () => slatePalette,
   solarizedPalette: () => solarizedPalette,
+  tidewaterPalette: () => tidewaterPalette,
   tint: () => tint,
   tokyoNightPalette: () => tokyoNightPalette
 });
@@ -2791,17 +3212,21 @@ var init_palettes = __esm({
     "use strict";
     init_registry();
     init_color_utils();
-    init_bold();
+    init_atlas();
+    init_blueprint();
     init_catppuccin();
     init_gruvbox();
     init_nord();
     init_one_dark();
     init_rose_pine();
+    init_slate();
     init_solarized();
+    init_tidewater();
     init_tokyo_night();
     init_dracula();
     init_monokai();
-    init_bold();
+    init_atlas();
+    init_blueprint();
     init_catppuccin();
     init_dracula();
     init_gruvbox();
@@ -2809,9 +3234,15 @@ var init_palettes = __esm({
     init_nord();
     init_one_dark();
     init_rose_pine();
+    init_slate();
     init_solarized();
+    init_tidewater();
     init_tokyo_night();
     palettes = {
+      atlas: atlasPalette,
+      blueprint: blueprintPalette,
+      slate: slatePalette,
+      tidewater: tidewaterPalette,
       nord: nordPalette,
       catppuccin: catppuccinPalette,
       solarized: solarizedPalette,
@@ -2820,8 +3251,7 @@ var init_palettes = __esm({
       oneDark: oneDarkPalette,
       rosePine: rosePinePalette,
       dracula: draculaPalette,
-      monokai: monokaiPalette,
-      bold: boldPalette
+      monokai: monokaiPalette
     };
   }
 });
@@ -3331,6 +3761,9 @@ function controlsGroupCapsuleWidth(toggles) {
   }
   return w;
 }
+function isAppHostedControls(config, isExport) {
+  return !isExport && config.controlsHost === "app" && !!config.controlsGroup && config.controlsGroup.toggles.length > 0;
+}
 function buildControlsGroupLayout(config, state) {
   const cg = config.controlsGroup;
   if (!cg || cg.toggles.length === 0) return void 0;
@@ -3384,6 +3817,7 @@ function buildControlsGroupLayout(config, state) {
 function computeLegendLayout(config, state, containerWidth) {
   const { groups, controls: configControls, mode } = config;
   const isExport = mode === "export";
+  const gated = isAppHostedControls(config, isExport);
   const activeGroupName = state.activeGroup?.toLowerCase() ?? null;
   if (isExport && !activeGroupName) {
     return {
@@ -3394,7 +3828,7 @@ function computeLegendLayout(config, state, containerWidth) {
       pills: []
     };
   }
-  const controlsGroupLayout = isExport ? void 0 : buildControlsGroupLayout(config, state);
+  const controlsGroupLayout = isExport || gated ? void 0 : buildControlsGroupLayout(config, state);
   const visibleGroups = config.showEmptyGroups ? groups : groups.filter((g) => g.entries.length > 0 || !!g.gradient);
   if (visibleGroups.length === 0 && (!configControls || configControls.length === 0) && !controlsGroupLayout) {
     return {
@@ -8296,8 +8730,8 @@ function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize,
     const pt = points[i];
     const ptSize = pt.size ?? symbolSize;
     const minGap = ptSize / 2 + 4;
-    const labelWidth = pt.name.length * fontSize * 0.6 + 8;
-    const labelX = pt.px - labelWidth / 2;
+    const labelWidth2 = pt.name.length * fontSize * 0.6 + 8;
+    const labelX = pt.px - labelWidth2 / 2;
     let bestLabelY = 0;
     let bestOffset = Infinity;
     let placed = false;
@@ -8309,7 +8743,7 @@ function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize,
         const candidate = {
           x: labelX,
           y: labelY,
-          w: labelWidth,
+          w: labelWidth2,
           h: labelHeight
         };
         let collision = false;
@@ -8351,7 +8785,7 @@ function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize,
     const labelRect = {
       x: labelX,
       y: bestLabelY,
-      w: labelWidth,
+      w: labelWidth2,
       h: labelHeight
     };
     placedLabels.push(labelRect);
@@ -8387,7 +8821,7 @@ function computeScatterLabelGraphics(points, chartBounds, fontSize, symbolSize,
         shape: {
           x: labelX - bgPad,
           y: bestLabelY - bgPad,
-          width: labelWidth + bgPad * 2,
+          width: labelWidth2 + bgPad * 2,
           height: labelHeight + bgPad * 2
         },
         style: { fill: bg },
@@ -15823,10 +16257,6 @@ function parseMap(content) {
       handleTag(trimmed, lineNumber);
       continue;
     }
-    if ((firstWord === "muted" || firstWord === "natural") && trimmed === firstWord) {
-      handleDirective(firstWord, "", lineNumber);
-      continue;
-    }
     if (DIRECTIVE_SET.has(firstWord) && !trimmed.slice(firstWord.length).trimStart().startsWith(":")) {
       handleDirective(
         firstWord,
@@ -15873,24 +16303,6 @@ function parseMap(content) {
         pushWarning(line12, `Duplicate directive "${key}" \u2014 last value wins.`);
     };
     switch (key) {
-      case "region":
-        dup(d.region);
-        d.region = value;
-        break;
-      case "projection":
-        dup(d.projection);
-        if (value && ![
-          "equirectangular",
-          "natural-earth",
-          "albers-usa",
-          "mercator"
-        ].includes(value))
-          pushWarning(
-            line12,
-            `Unknown projection "${value}" (expected equirectangular | natural-earth | albers-usa | mercator).`
-          );
-        d.projection = value;
-        break;
       case "region-metric": {
         dup(d.regionMetric);
         const { label: rmLabel, colorName: rmColor } = peelTrailingColorName(value);
@@ -15906,91 +16318,43 @@ function parseMap(content) {
         dup(d.flowMetric);
         d.flowMetric = value;
         break;
-      case "scale":
-        dup(d.scale);
-        {
-          const s = parseScale(value, line12);
-          if (s) d.scale = s;
-        }
-        break;
-      case "region-labels":
-        dup(d.regionLabels);
-        if (value && !["full", "abbrev", "off"].includes(value))
-          pushWarning(
-            line12,
-            `Unknown region-labels "${value}" (expected full | abbrev | off).`
-          );
-        d.regionLabels = value;
-        break;
-      case "poi-labels":
-        dup(d.poiLabels);
-        if (value && !["off", "auto", "all"].includes(value))
-          pushWarning(
-            line12,
-            `Unknown poi-labels "${value}" (expected off | auto | all).`
-          );
-        d.poiLabels = value;
-        break;
-      case "default-country":
-        dup(d.defaultCountry);
-        d.defaultCountry = value;
-        break;
-      case "default-state":
-        dup(d.defaultState);
-        d.defaultState = value;
+      case "locale":
+        dup(d.locale);
+        d.locale = value;
         break;
       case "active-tag":
         dup(d.activeTag);
         d.activeTag = value;
         break;
+      case "caption":
+        dup(d.caption);
+        d.caption = value;
+        break;
+      // ── Cosmetic `no-*` opt-outs: bare flags, idempotent (mirror `no-legend`,
+      //    no dup warning); each defaults the feature ON when absent. ──
       case "no-legend":
         d.noLegend = true;
         break;
-      case "no-insets":
-        d.noInsets = true;
+      case "no-coastline":
+        d.noCoastline = true;
         break;
-      case "relief":
-        d.relief = true;
+      case "no-relief":
+        d.noRelief = true;
         break;
-      case "muted":
-      case "natural":
-        if (d.basemapStyle !== void 0 && d.basemapStyle !== key)
-          pushWarning(
-            line12,
-            `Conflicting basemap dress \u2014 "${d.basemapStyle}" then "${key}"; last wins.`
-          );
-        d.basemapStyle = key;
+      case "no-context-labels":
+        d.noContextLabels = true;
         break;
-      case "subtitle":
-        dup(d.subtitle);
-        d.subtitle = value;
+      case "no-region-labels":
+        d.noRegionLabels = true;
         break;
-      case "caption":
-        dup(d.caption);
-        d.caption = value;
+      case "no-poi-labels":
+        d.noPoiLabels = true;
+        break;
+      case "no-colorize":
+        d.noColorize = true;
         break;
     }
   }
-  function parseScale(value, line12) {
-    const toks = value.split(/\s+/).filter(Boolean);
-    const min = Number(toks[0]);
-    const max = Number(toks[1]);
-    if (!Number.isFinite(min) || !Number.isFinite(max)) {
-      pushError(line12, `scale requires numeric <min> <max> (got "${value}").`);
-      return null;
-    }
-    const scale = { min, max };
-    if (toks[2] === "center") {
-      const c = Number(toks[3]);
-      if (Number.isFinite(c)) scale.center = c;
-      else
-        pushError(
-          line12,
-          `scale center requires a number (got "${toks[3] ?? ""}").`
-        );
-    }
-    return scale;
-  }
   function handleTag(trimmed, line12) {
     const m = matchTagBlockHeading(trimmed);
     if (!m) {
@@ -16190,13 +16554,15 @@ function parseMap(content) {
         pushError(line12, `Edge has an empty endpoint: "${trimmed}".`);
         continue;
       }
-      const meta = k === links.length - 1 ? lastSplit.meta : {};
+      const isLast = k === links.length - 1;
+      const meta = isLast ? lastSplit.meta : {};
+      const style = links[k].style === "arc" ? "arc" : "straight";
       edges.push({
         from,
         to,
         ...links[k].label !== void 0 && { label: links[k].label },
         directed: links[k].directed,
-        style: links[k].style,
+        style,
         meta,
         lineNumber: line12
       });
@@ -16282,22 +16648,19 @@ var init_parser12 = __esm({
     LEG_ARROW_RE = /^(-[^>]*?->|->|~[^>]*?~>|~>|--)\s+(.+)$/;
     AT_RE = /(^|[\s,])at\s*:/i;
     DIRECTIVE_SET = /* @__PURE__ */ new Set([
-      "region",
-      "projection",
       "region-metric",
       "poi-metric",
       "flow-metric",
-      "scale",
-      "region-labels",
-      "poi-labels",
-      "default-country",
-      "default-state",
+      "locale",
       "active-tag",
+      "caption",
       "no-legend",
-      "no-insets",
-      "relief",
-      "subtitle",
-      "caption"
+      "no-coastline",
+      "no-relief",
+      "no-context-labels",
+      "no-region-labels",
+      "no-poi-labels",
+      "no-colorize"
     ]);
   }
 });
@@ -16475,6 +16838,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) {
@@ -16853,6 +17231,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);
   }
@@ -16861,7 +17252,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) {
@@ -24219,8 +24611,8 @@ function renderKanban(container, parsed, palette, isDark, options) {
         let metaY = separatorY + sCardSeparatorGap + sCardMetaFontSize;
         for (const meta of tagMeta) {
           cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(`${meta.label}: `);
-          const labelWidth = (meta.label.length + 2) * sCardMetaFontSize * 0.6;
-          cg.append("text").attr("x", cx + sCardPaddingX + labelWidth).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
+          const labelWidth2 = (meta.label.length + 2) * sCardMetaFontSize * 0.6;
+          cg.append("text").attr("x", cx + sCardPaddingX + labelWidth2).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
           metaY += sCardMetaLineHeight;
         }
         for (const detail of card.details) {
@@ -24564,8 +24956,8 @@ function renderSwimlaneCard(parent, cardLayout, tagGroups, activeTagGroup, palet
     let metaY = separatorY + sCardSeparatorGap + sCardMetaFontSize;
     for (const meta of tagMeta) {
       cg.append("text").attr("x", cx + sCardPaddingX).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", palette.textMuted).text(`${meta.label}: `);
-      const labelWidth = (meta.label.length + 2) * sCardMetaFontSize * 0.6;
-      cg.append("text").attr("x", cx + sCardPaddingX + labelWidth).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
+      const labelWidth2 = (meta.label.length + 2) * sCardMetaFontSize * 0.6;
+      cg.append("text").attr("x", cx + sCardPaddingX + labelWidth2).attr("y", metaY).attr("font-size", sCardMetaFontSize).attr("fill", onCardText).text(meta.value);
       metaY += sCardMetaLineHeight;
     }
     for (const detail of card.details) {
@@ -25399,8 +25791,8 @@ function classifyEREntities(tables, relationships) {
     }
   }
   const mmParticipants = /* @__PURE__ */ new Set();
-  for (const [id, neighbors] of tableStarNeighbors) {
-    if (neighbors.size >= 2) mmParticipants.add(id);
+  for (const [id, neighbors2] of tableStarNeighbors) {
+    if (neighbors2.size >= 2) mmParticipants.add(id);
   }
   const indegreeValues = Object.values(indegreeMap);
   const mean = indegreeValues.reduce((a, b) => a + b, 0) / indegreeValues.length;
@@ -25983,7 +26375,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],
@@ -26073,7 +26476,8 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
     controlsExpanded,
     onToggleDescriptions,
     onToggleControlsExpand,
-    exportMode = false
+    exportMode = false,
+    controlsHost
   } = options ?? {};
   d3Selection6.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -26091,21 +26495,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 sLegendHeight = sctx.structural(
+  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 === "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 = 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
     )
-  );
-  const activeGroup = resolveActiveTagGroup(
-    parsed.tagGroups,
-    parsed.options["active-tag"],
-    activeTagGroup
-  );
+  ) : 0;
   const hidden = hiddenTagValues ?? parsed.initialHiddenTagValues;
   const nodeMap = /* @__PURE__ */ new Map();
   for (const node of parsed.nodes) nodeMap.set(node.label, node);
@@ -26116,7 +26564,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;
@@ -26322,12 +26770,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;
@@ -26411,14 +26863,30 @@ 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) {
+      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 hasDescriptions = parsed.nodes.some(
     (n) => n.description && n.description.length > 0
   );
-  const hasLegend = parsed.tagGroups.length > 0 || hasDescriptions;
+  const hasLegend = legendGroups.length > 0 || hasDescriptions && controlsHost !== "app";
   if (hasLegend) {
     let controlsGroup;
-    if (hasDescriptions && onToggleDescriptions) {
+    if (hasDescriptions && (onToggleDescriptions || controlsHost === "app")) {
       controlsGroup = {
         toggles: [
           {
@@ -26433,10 +26901,17 @@ 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",
-      ...controlsGroup !== void 0 && { controlsGroup }
+      // Keep inactive sibling tag groups visible as collapsed pills so the user
+      // can click one to flip the active colouring dimension (preview only —
+      // export shows just the active group). Without this, declaring a second
+      // tag group (e.g. Team) leaves it invisible whenever another group is
+      // active. The app's BoxesAndLinesPreview already wires pill clicks.
+      showInactivePills: true,
+      ...controlsGroup !== void 0 && { controlsGroup },
+      ...controlsHost !== void 0 && { controlsHost }
     };
     const legendState = {
       activeGroup,
@@ -26481,7 +26956,7 @@ function renderBoxesAndLinesForExport(container, parsed, layout, palette, isDark
     }
   });
 }
-var 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 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";
@@ -26490,6 +26965,7 @@ var init_renderer6 = __esm({
     init_legend_layout();
     init_title_constants();
     init_color_utils();
+    init_colors();
     init_tag_groups();
     init_inline_markdown();
     init_wrapped_desc();
@@ -26512,6 +26988,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);
   }
@@ -27683,8 +28161,9 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
   const containerHeight = exportDims?.height ?? (container.getBoundingClientRect().height || 600);
   d3Selection7.select(container).selectAll("*").remove();
   const svg = d3Selection7.select(container).append("svg").attr("width", containerWidth).attr("height", containerHeight).attr("viewBox", `0 0 ${containerWidth} ${containerHeight}`).attr("preserveAspectRatio", "xMidYMin meet").style("font-family", FONT_FAMILY);
+  const appHosted = options?.controlsHost === "app";
   const hasControls = !!options?.onToggleColorByDepth || !!options?.onToggleDescriptions;
-  const hasLegend = parsed.tagGroups.length > 0 || hasControls;
+  const hasLegend = parsed.tagGroups.length > 0 || hasControls && !appHosted;
   const fixedLegend = !isExport && hasLegend;
   const legendReserve = fixedLegend ? getMaxLegendReservedHeight(
     {
@@ -27778,7 +28257,10 @@ function renderMindmap(container, parsed, layout, palette, isDark, onClickItem,
       }),
       position: { placement: "top-center", titleRelation: "below-title" },
       mode: options?.exportMode ? "export" : "preview",
-      ...controlsToggles !== void 0 && { controlsGroup: controlsToggles }
+      ...controlsToggles !== void 0 && { controlsGroup: controlsToggles },
+      ...options?.controlsHost !== void 0 && {
+        controlsHost: options.controlsHost
+      }
     };
     const legendState = {
       activeGroup: options?.colorByDepth ? null : activeTagGroup !== void 0 ? activeTagGroup : parsed.options["active-tag"] ?? null,
@@ -28221,8 +28703,8 @@ function computeFieldAlignX(children) {
   for (const child of children) {
     if (child.metadata["_labelField"] === "true" && child.children.length >= 2) {
       const labelEl = child.children[0];
-      const labelWidth = labelEl.label.length * CHAR_WIDTH5;
-      maxLabelWidth = Math.max(maxLabelWidth, labelWidth);
+      const labelWidth2 = labelEl.label.length * CHAR_WIDTH5;
+      maxLabelWidth = Math.max(maxLabelWidth, labelWidth2);
       labelFieldCount++;
     }
   }
@@ -33187,7 +33669,7 @@ function hasRoles(node) {
 function computeNodeWidth2(node, expanded, options) {
   const badgeVal = node.computedConcurrentInvocations === 0 && node.computedInstances > 1 ? node.computedInstances : 0;
   const badgeLen = badgeVal > 0 ? `${badgeVal}x`.length + 2 : 0;
-  const labelWidth = (node.label.length + badgeLen) * CHAR_WIDTH7 + PADDING_X3;
+  const labelWidth2 = (node.label.length + badgeLen) * CHAR_WIDTH7 + PADDING_X3;
   const allKeys = [];
   if (node.computedRps > 0) allKeys.push("RPS");
   if (expanded) {
@@ -33231,7 +33713,7 @@ function computeNodeWidth2(node, expanded, options) {
         allKeys.push("overflow");
     }
   }
-  if (allKeys.length === 0) return Math.max(MIN_NODE_WIDTH2, labelWidth);
+  if (allKeys.length === 0) return Math.max(MIN_NODE_WIDTH2, labelWidth2);
   const maxKeyLen = Math.max(...allKeys.map((k) => k.length));
   let maxRowWidth = 0;
   if (node.computedRps > 0) {
@@ -33319,7 +33801,7 @@ function computeNodeWidth2(node, expanded, options) {
       truncated.length * META_CHAR_WIDTH3 + PADDING_X3
     );
   }
-  return Math.max(MIN_NODE_WIDTH2, labelWidth, maxRowWidth + 20, descWidth);
+  return Math.max(MIN_NODE_WIDTH2, labelWidth2, maxRowWidth + 20, descWidth);
 }
 function computeNodeHeight2(node, expanded, options) {
   const propCount = countDisplayProps(node, expanded, options);
@@ -34869,8 +35351,9 @@ function computeInfraLegendGroups(nodes, tagGroups, palette, edges) {
   }
   return groups;
 }
-function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false) {
+function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDark, activeGroup, playback, exportMode = false, controlsHost) {
   if (legendGroups.length === 0 && !playback) return;
+  const appHostedPlayback = controlsHost === "app" && !!playback;
   const legendG = rootSvg.append("g").attr("transform", `translate(0, ${legendY})`);
   if (activeGroup) {
     legendG.attr("data-legend-active", activeGroup.toLowerCase());
@@ -34879,14 +35362,29 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
   }));
-  if (playback) {
+  if (playback && !appHostedPlayback) {
     allGroups.push({ name: "Playback", entries: [] });
   }
   const legendConfig = {
     groups: allGroups,
     position: { placement: "top-center", titleRelation: "below-title" },
     mode: exportMode ? "export" : "preview",
-    showEmptyGroups: true
+    showEmptyGroups: true,
+    ...appHostedPlayback && {
+      controlsHost: "app",
+      controlsGroup: {
+        toggles: [
+          {
+            id: "playback",
+            type: "toggle",
+            label: "Playback",
+            active: true,
+            onToggle: () => {
+            }
+          }
+        ]
+      }
+    }
   };
   const legendState = { activeGroup };
   renderLegendD3(
@@ -34937,8 +35435,9 @@ function renderLegend3(rootSvg, legendGroups, totalWidth, legendY, palette, isDa
     }
   }
 }
-function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, expandedNodeIds, exportMode, collapsedNodes) {
+function renderInfra(container, layout, palette, isDark, title, titleLineNumber, tagGroups, activeGroup, animate, playback, expandedNodeIds, exportMode, collapsedNodes, controlsHost) {
   d3Selection11.select(container).selectAll(":not([data-d3-tooltip])").remove();
+  const appHostedPlayback = controlsHost === "app" && !!playback;
   const ctx = ScaleContext.identity();
   const sc = buildScaledConstants(ctx);
   const legendGroups = computeInfraLegendGroups(
@@ -34947,7 +35446,7 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
     palette,
     layout.edges
   );
-  const hasLegend = legendGroups.length > 0 || !!playback;
+  const hasLegend = legendGroups.length > 0 || !!playback && !appHostedPlayback;
   const fixedLegend = !exportMode && hasLegend;
   const legendDynamicH = hasLegend ? getMaxLegendReservedHeight(
     {
@@ -35091,7 +35590,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         isDark,
         activeGroup ?? null,
         playback ?? void 0,
-        exportMode
+        exportMode,
+        controlsHost
       );
       legendSvg.selectAll(".infra-legend-group").style("pointer-events", "auto");
     } else {
@@ -35104,7 +35604,8 @@ function renderInfra(container, layout, palette, isDark, title, titleLineNumber,
         isDark,
         activeGroup ?? null,
         playback ?? void 0,
-        exportMode
+        exportMode,
+        controlsHost
       );
     }
   }
@@ -42738,6 +43239,9 @@ function renderTechRadar(container, parsed, palette, isDark, onClickItem, export
             onToggle: (active) => options.onToggleListing(active)
           }
         ]
+      },
+      ...options.controlsHost !== void 0 && {
+        controlsHost: options.controlsHost
       }
     };
     const legendState = {
@@ -44560,7 +45064,7 @@ function computeCycleLayout(parsed, options) {
   const circleNodes = parsed.options["circle-nodes"] === "true";
   const nodeDims = parsed.nodes.map((node) => {
     const hasDesc = !hideDescriptions && node.description.length > 0;
-    const labelWidth = Math.max(
+    const labelWidth2 = Math.max(
       MIN_NODE_WIDTH4,
       node.label.length * LABEL_CHAR_W + NODE_PAD_X * 2
     );
@@ -44569,12 +45073,12 @@ function computeCycleLayout(parsed, options) {
     }
     if (!hasDesc) {
       return {
-        width: Math.min(MAX_NODE_WIDTH3, labelWidth),
+        width: Math.min(MAX_NODE_WIDTH3, labelWidth2),
         height: PLAIN_NODE_HEIGHT,
         wrappedDesc: []
       };
     }
-    return chooseDescribedRectDims(node.description, labelWidth);
+    return chooseDescribedRectDims(node.description, labelWidth2);
   });
   if (circleNodes) {
     const maxDiam = Math.max(...nodeDims.map((d) => d.width));
@@ -44770,10 +45274,10 @@ function computeCycleLayout(parsed, options) {
     scale
   };
 }
-function chooseDescribedRectDims(description, labelWidth) {
+function chooseDescribedRectDims(description, labelWidth2) {
   const minW = Math.min(
     MAX_NODE_WIDTH3,
-    Math.max(MIN_NODE_WIDTH4, labelWidth, DESC_MIN_WIDTH)
+    Math.max(MIN_NODE_WIDTH4, labelWidth2, DESC_MIN_WIDTH)
   );
   let best = null;
   let bestScore = Infinity;
@@ -45202,7 +45706,8 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
   const hideDescriptions = (renderOptions?.hideDescriptions ?? false) || parsed.options["no-descriptions"] === "true" || viewState?.hd === true;
   const showDescriptions = !hideDescriptions;
   const hasDescriptions = parsed.nodes.some((n) => n.description.length > 0) || parsed.edges.some((e) => e.description.length > 0);
-  const hasLegend = hasDescriptions && !!renderOptions?.onToggleDescriptions;
+  const appHostedControls = renderOptions?.controlsHost === "app";
+  const hasLegend = !appHostedControls && hasDescriptions && !!renderOptions?.onToggleDescriptions;
   const showTitle = !!parsed.title && parsed.options["no-title"] !== "on";
   const legendOffset = hasLegend ? sLegendHeight : 0;
   const layoutHeight = height - (showTitle ? sTitleAreaHeight : 0) - legendOffset;
@@ -45239,7 +45744,10 @@ function renderCycle(container, parsed, palette, isDark, onClickItem, exportDims
       groups: [],
       position: { placement: "top-center", titleRelation: "below-title" },
       mode: renderOptions?.exportMode ? "export" : "preview",
-      controlsGroup
+      controlsGroup,
+      ...renderOptions?.controlsHost !== void 0 && {
+        controlsHost: renderOptions.controlsHost
+      }
     };
     const legendState = {
       activeGroup: null,
@@ -45493,7 +46001,7 @@ var init_renderer15 = __esm({
 });
 
 // src/map/geo.ts
-import { feature } from "topojson-client";
+import { feature, neighbors } from "topojson-client";
 import { geoBounds, geoArea } from "d3-geo";
 function geomObject(topo) {
   const key = Object.keys(topo.objects)[0];
@@ -45511,6 +46019,107 @@ function featureIndex(topo) {
   }
   return idx;
 }
+function buildAdjacency(topo) {
+  const cached = adjacencyCache.get(topo);
+  if (cached) return cached;
+  const geometries = geomObject(topo).geometries;
+  const nb = neighbors(geometries);
+  const sets = /* @__PURE__ */ new Map();
+  geometries.forEach((g, i) => {
+    if (!g.type || g.type === "null") return;
+    let set = sets.get(g.id);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      sets.set(g.id, set);
+    }
+    for (const j of nb[i] ?? []) {
+      const nid = geometries[j]?.id;
+      if (nid && nid !== g.id) set.add(nid);
+    }
+  });
+  const out = /* @__PURE__ */ new Map();
+  for (const [iso, set] of sets) out.set(iso, [...set].sort());
+  adjacencyCache.set(topo, out);
+  return out;
+}
+function decodeFeatures(topo) {
+  return geomObject(topo).geometries.map((g) => {
+    const f = feature(topo, g);
+    return {
+      type: "Feature",
+      id: g.id,
+      properties: g.properties,
+      geometry: f.geometry
+    };
+  });
+}
+function pointInRing(lon, lat, ring) {
+  let inside = false;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const xi = ring[i][0];
+    const yi = ring[i][1];
+    const xj = ring[j][0];
+    const yj = ring[j][1];
+    const intersect = yi > lat !== yj > lat && lon < (xj - xi) * (lat - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function pointOnRingEdge(lon, lat, ring) {
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const xi = ring[i][0];
+    const yi = ring[i][1];
+    const xj = ring[j][0];
+    const yj = ring[j][1];
+    if (lon < Math.min(xi, xj) - EDGE_EPS || lon > Math.max(xi, xj) + EDGE_EPS)
+      continue;
+    if (lat < Math.min(yi, yj) - EDGE_EPS || lat > Math.max(yi, yj) + EDGE_EPS)
+      continue;
+    const cross = (xj - xi) * (lat - yi) - (yj - yi) * (lon - xi);
+    if (Math.abs(cross) <= EDGE_EPS) return true;
+  }
+  return false;
+}
+function pointInGeometry(geometry, lon, lat) {
+  const g = geometry;
+  if (!g) return false;
+  const polys = g.type === "Polygon" ? [g.coordinates] : g.type === "MultiPolygon" ? g.coordinates : [];
+  for (const rings of polys) {
+    if (!rings.length) continue;
+    if (pointOnRingEdge(lon, lat, rings[0])) return true;
+    if (!pointInRing(lon, lat, rings[0])) continue;
+    let inHole = false;
+    for (let h = 1; h < rings.length; h++) {
+      if (pointInRing(lon, lat, rings[h]) && !pointOnRingEdge(lon, lat, rings[h])) {
+        inHole = true;
+        break;
+      }
+    }
+    if (!inHole) return true;
+  }
+  return false;
+}
+function regionAt(lonLat, countries, states) {
+  const lon = lonLat[0];
+  const lat = lonLat[1];
+  let country = null;
+  for (const f of countries) {
+    if (pointInGeometry(f.geometry, lon, lat)) {
+      country = { iso: f.id, name: f.properties.name };
+      break;
+    }
+  }
+  let state = null;
+  if (country?.iso === "US" && states) {
+    for (const f of states) {
+      if (pointInGeometry(f.geometry, lon, lat)) {
+        state = { iso: f.id, name: f.properties.name };
+        break;
+      }
+    }
+  }
+  return { country, state };
+}
 function featureBbox(topo, geomId) {
   const geom = geomObject(topo).geometries.find((g) => g.id === geomId);
   if (!geom) return null;
@@ -45628,11 +46237,13 @@ function unionLongitudes(lons) {
   }
   return { west: pts[gapIdx], east: pts[gapIdx - 1] + 360 };
 }
-var fold, DETACH_GAP_DEG, DETACH_AREA_FRAC;
+var fold, adjacencyCache, EDGE_EPS, DETACH_GAP_DEG, DETACH_AREA_FRAC;
 var init_geo = __esm({
   "src/map/geo.ts"() {
     "use strict";
     fold = (s) => s.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase().trim();
+    adjacencyCache = /* @__PURE__ */ new WeakMap();
+    EDGE_EPS = 1e-9;
     DETACH_GAP_DEG = 10;
     DETACH_AREA_FRAC = 0.25;
   }
@@ -45652,6 +46263,12 @@ function looksUS(lat, lon) {
   if (lat < 15 || lat > 72) return false;
   return lon >= -180 && lon <= -64 || lon >= 172;
 }
+function looksNorthAmericaNeighbor(lat, lon) {
+  return lat >= 14 && lat <= 72 && lon >= -141 && lon <= -52;
+}
+function isWholeSphere(bb) {
+  return bb[0][0] <= -179 && bb[1][0] >= 179 && bb[0][1] <= -89 && bb[1][1] >= 89;
+}
 function resolveMap(parsed, data) {
   const diagnostics = [...parsed.diagnostics];
   const err = (line12, message, code) => {
@@ -45662,9 +46279,6 @@ function resolveMap(parsed, data) {
   };
   const result = {
     title: parsed.title,
-    ...parsed.directives.subtitle !== void 0 && {
-      subtitle: parsed.directives.subtitle
-    },
     ...parsed.directives.caption !== void 0 && {
       caption: parsed.directives.caption
     },
@@ -45674,7 +46288,7 @@ function resolveMap(parsed, data) {
     // renderer's job (step 4) — the resolver only carries `tags` + `tagGroups`
     // through; it never resolves a tag value to a palette color (#10).
     directives: { ...parsed.directives },
-    basemaps: { world: "coarse", subdivisions: [] },
+    basemaps: { world: "detail", subdivisions: [] },
     regions: [],
     pois: [],
     edges: [],
@@ -45683,7 +46297,8 @@ function resolveMap(parsed, data) {
       [-180, -85],
       [180, 85]
     ],
-    projection: "natural-earth",
+    projection: "equirectangular",
+    poiFrameContainers: [],
     diagnostics,
     error: parsed.error
   };
@@ -45693,7 +46308,10 @@ function resolveMap(parsed, data) {
     ...[...countryIndex.values()].map((v) => v.name),
     ...[...usStateIndex.values()].map((v) => v.name)
   ];
-  const usScoped = parsed.directives.region === "us-states" || parsed.directives.defaultCountry?.toUpperCase() === "US" || parsed.regions.some((r) => {
+  const localeRaw = parsed.directives.locale?.toUpperCase();
+  const localeCountry = localeRaw ? localeRaw.split("-")[0] : void 0;
+  const localeSubdivision = localeRaw && /^[A-Z]{2}-/.test(localeRaw) ? localeRaw : void 0;
+  const usScoped = localeCountry === "US" || parsed.regions.some((r) => {
     const f = fold(r.name);
     return usStateIndex.has(f) && !countryIndex.has(f);
   }) || parsed.regions.some(
@@ -45844,7 +46462,7 @@ function resolveMap(parsed, data) {
       if (!scope)
         warn2(
           line12,
-          `"${name}" is ambiguous \u2014 resolved to the most-populous match.`,
+          `"${name}" is ambiguous \u2014 resolved to the most-populous match. Set a default with \`locale <ISO>\` (e.g. \`locale US\` / \`locale US-GA\`) to steer it.`,
           "W_MAP_AMBIGUOUS_NAME"
         );
     }
@@ -45857,17 +46475,21 @@ function resolveMap(parsed, data) {
     return fold(pos.name);
   };
   const poiCountries = [];
-  let anyNonUsPoi = false;
+  let anyUsPoi = false;
+  let anyNonNaPoi = false;
   const noteCountry = (iso) => {
     if (iso) {
       poiCountries.push(iso);
-      if (iso !== "US") anyNonUsPoi = true;
+      if (iso === "US") anyUsPoi = true;
+      if (iso !== "US" && iso !== "CA" && iso !== "MX") anyNonNaPoi = true;
     }
   };
   const deferred = [];
   for (const p of parsed.pois) {
     if (p.pos.kind === "coords") {
-      if (!looksUS(p.pos.lat, p.pos.lon)) anyNonUsPoi = true;
+      if (looksUS(p.pos.lat, p.pos.lon)) anyUsPoi = true;
+      else if (!looksNorthAmericaNeighbor(p.pos.lat, p.pos.lon))
+        anyNonNaPoi = true;
       addResolvedPoi(p.pos.lat, p.pos.lon, p);
       continue;
     }
@@ -45885,14 +46507,15 @@ function resolveMap(parsed, data) {
       deferred.push(p);
     }
   }
-  const inferredCountry = parsed.directives.defaultCountry?.toUpperCase() ?? mostCommonCountry(regions, poiCountries) ?? void 0;
+  const inferredCountry = localeCountry ?? mostCommonCountry(regions, poiCountries) ?? void 0;
+  const inferredScope = localeSubdivision ?? inferredCountry;
   for (const p of deferred) {
     if (p.pos.kind !== "name") continue;
     const got = lookupName(
       p.pos.name,
       p.pos.scope,
       p.lineNumber,
-      inferredCountry,
+      inferredScope,
       true
     );
     if (got.kind === "ok") {
@@ -45962,7 +46585,8 @@ function resolveMap(parsed, data) {
     const meta = sizeValue !== void 0 ? { value: sizeValue } : {};
     if (pos.kind === "coords") {
       const id = alias ? fold(alias) : `@${pos.lat},${pos.lon}`;
-      if (!looksUS(pos.lat, pos.lon)) anyNonUsPoi = true;
+      if (looksUS(pos.lat, pos.lon)) anyUsPoi = true;
+      else if (!looksNorthAmericaNeighbor(pos.lat, pos.lon)) anyNonNaPoi = true;
       if (!registry.has(id)) {
         registerPoi(
           id,
@@ -45985,7 +46609,7 @@ function resolveMap(parsed, data) {
     if (registry.has(f)) return f;
     const aliased = declaredByName.get(f);
     if (aliased) return aliased;
-    const got = lookupName(pos.name, pos.scope, line12, inferredCountry, true);
+    const got = lookupName(pos.name, pos.scope, line12, inferredScope, true);
     if (got.kind !== "ok") return null;
     noteCountry(got.iso);
     registerPoi(
@@ -46042,9 +46666,12 @@ function resolveMap(parsed, data) {
     }
     routes.push({ stopIds, legs, lineNumber: rt.lineNumber });
   }
+  const hasUsContent = usSubdivisionReferenced || anyUsPoi || localeCountry === "US";
+  const usOriented = !anyNonNaPoi && !regions.some(
+    (r) => r.layer === "country" && !["US", "CA", "MX"].includes(r.iso)
+  ) && hasUsContent;
   const subdivisions = [];
-  if (usSubdivisionReferenced || parsed.directives.region === "us-states")
-    subdivisions.push("us-states");
+  if (usSubdivisionReferenced || usOriented) subdivisions.push("us-states");
   const regionBoxes = [];
   for (const ref of referencedRegionIds) {
     const bb = featureBbox(data.usStates, ref.id);
@@ -46062,17 +46689,51 @@ function resolveMap(parsed, data) {
     [-180, -85],
     [180, 85]
   ];
-  let extent2 = unioned ? pad(unioned, PAD_FRACTION) : DEFAULT_EXTENT;
+  const basePad = regions.length > 0 ? REGION_PAD_FRACTION : PAD_FRACTION;
+  let extent2 = unioned ? pad(unioned, basePad) : DEFAULT_EXTENT;
+  const isPoiOnly = pois.length > 0 && regions.length === 0;
+  const containerRegionIds = [];
+  if (isPoiOnly) {
+    const countries = decodeFeatures(data.worldDetail);
+    const states = decodeFeatures(data.usStates);
+    const seen = /* @__PURE__ */ new Set();
+    const containerBoxes = [];
+    for (const p of pois) {
+      const { country, state } = regionAt([p.lon, p.lat], countries, states);
+      const id = state?.iso ?? country?.iso;
+      if (!id || seen.has(id)) continue;
+      seen.add(id);
+      containerRegionIds.push(id);
+      const bb = state ? featureBbox(data.usStates, id) : featureBboxPrimary(data.worldCoarse, id);
+      if (bb && !isWholeSphere(bb)) containerBoxes.push(bb);
+    }
+    const containerUnion = unionExtent(containerBoxes, points);
+    if (containerUnion) extent2 = pad(containerUnion, PAD_FRACTION);
+  }
+  if (isPoiOnly) {
+    const cx = (extent2[0][0] + extent2[1][0]) / 2;
+    const cy = (extent2[0][1] + extent2[1][1]) / 2;
+    const lon = extent2[1][0] - extent2[0][0];
+    const lat = extent2[1][1] - extent2[0][1];
+    const longer = Math.max(lon, lat);
+    if (longer > 0 && longer < POI_ZOOM_FLOOR_DEG) {
+      const k = POI_ZOOM_FLOOR_DEG / longer;
+      const halfLon = lon * k / 2;
+      const halfLat = lat * k / 2;
+      extent2 = [
+        [cx - halfLon, cy - halfLat],
+        [cx + halfLon, cy + halfLat]
+      ];
+    }
+  }
   const lonSpan = extent2[1][0] - extent2[0][0];
   const latSpan = extent2[1][1] - extent2[0][1];
   const span = Math.max(lonSpan, latSpan);
   const maxAbsLat = Math.max(Math.abs(extent2[0][1]), Math.abs(extent2[1][1]));
-  const usDominant = (subdivisions.includes("us-states") || regions.some((r) => r.layer === "us-state")) && !regions.some((r) => r.layer === "country" && r.iso !== "US") && !anyNonUsPoi;
   let projection;
-  const override = parsed.directives.projection;
-  if (override === "equirectangular" || override === "natural-earth" || override === "albers-usa" || override === "mercator") {
-    projection = override;
-  } else if (usDominant) {
+  if (isPoiOnly && usOriented && lonSpan < US_NATIONAL_LON_SPAN) {
+    projection = "mercator";
+  } else if (usOriented) {
     projection = "albers-usa";
   } else if (span > WORLD_SPAN || maxAbsLat > MERCATOR_MAX_LAT) {
     projection = "equirectangular";
@@ -46090,11 +46751,20 @@ function resolveMap(parsed, data) {
   result.edges = edges;
   result.routes = routes;
   result.basemaps = {
-    world: span > WORLD_SPAN ? "coarse" : "detail",
+    // Tier is intentionally pinned to detail (50m) at ALL scales. Diagrammo maps
+    // are presentational (palette tints, relief hachures, POI hubs), not
+    // survey-grade — recognizability > generalization: 110m coarse drops the
+    // Italian boot to a stump at world scale. `WORLD_SPAN` lives on only for the
+    // projection decision (the `usOriented`/`span > WORLD_SPAN` chain above); it
+    // no longer gates basemap resolution.
+    // `worldCoarse` is still loaded — it's the authoritative name/bbox index
+    // (featureIndex, featureBboxPrimary), not dead code.
+    world: "detail",
     subdivisions
   };
   result.extent = extent2;
   result.projection = projection;
+  result.poiFrameContainers = containerRegionIds;
   result.error = parsed.error ?? firstError(diagnostics);
   return result;
 }
@@ -46131,7 +46801,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, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, 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, US_NATIONAL_LON_SPAN, REGION_ALIASES, US_STATE_POSTAL;
 var init_resolver2 = __esm({
   "src/map/resolver.ts"() {
     "use strict";
@@ -46140,8 +46810,11 @@ var init_resolver2 = __esm({
     WORLD_SPAN = 90;
     MERCATOR_MAX_LAT = 80;
     PAD_FRACTION = 0.05;
+    REGION_PAD_FRACTION = 0.12;
     WORLD_LAT_SOUTH = -58;
     WORLD_LAT_NORTH = 78;
+    POI_ZOOM_FLOOR_DEG = 7;
+    US_NATIONAL_LON_SPAN = 48;
     REGION_ALIASES = {
       // Common everyday names → the Natural-Earth display name actually shipped.
       "united states": "united states of america",
@@ -46219,10 +46892,277 @@ var init_resolver2 = __esm({
   }
 });
 
+// src/map/colorize.ts
+function assignColors(isos, adjacency) {
+  const sorted = [...isos].sort();
+  const byIso = /* @__PURE__ */ new Map();
+  let maxIndex = -1;
+  for (const iso of sorted) {
+    const taken = /* @__PURE__ */ new Set();
+    for (const n of adjacency.get(iso) ?? []) {
+      const c = byIso.get(n);
+      if (c !== void 0) taken.add(c);
+    }
+    let h = 0;
+    while (taken.has(h)) h++;
+    byIso.set(iso, h);
+    if (h > maxIndex) maxIndex = h;
+  }
+  return { byIso, huesNeeded: maxIndex + 1 };
+}
+var init_colorize = __esm({
+  "src/map/colorize.ts"() {
+    "use strict";
+  }
+});
+
+// src/map/context-labels.ts
+function tierBand(maxSpanDeg) {
+  if (maxSpanDeg >= 90) return "world";
+  if (maxSpanDeg >= 20) return "continental";
+  if (maxSpanDeg >= 5) return "regional";
+  return "local";
+}
+function labelBudget(width, height, band) {
+  const bandCap = {
+    world: 6,
+    continental: 5,
+    regional: 4,
+    local: 3
+  };
+  const area2 = Math.floor(Math.sqrt(Math.max(0, width * height)) / 150);
+  return Math.max(0, Math.min(area2, bandCap[band]));
+}
+function waterEligible(tier, kind, band) {
+  switch (band) {
+    case "world":
+      return tier <= 1 && (kind === "ocean" || kind === "sea");
+    case "continental":
+      return tier <= 2;
+    case "regional":
+      return tier <= 3;
+    case "local":
+      return tier <= 4;
+  }
+}
+function insideViewport(p, width, height) {
+  return !!p && Number.isFinite(p[0]) && Number.isFinite(p[1]) && p[0] >= 0 && p[0] <= width && p[1] >= 0 && p[1] <= height;
+}
+function labelWidth(text, letterSpacing) {
+  const spacing = letterSpacing > 0 ? Math.max(0, text.length - 1) * letterSpacing : 0;
+  return measureLegendText(text, FONT) + spacing + 2 * PADX;
+}
+function wrapLabel2(text, letterSpacing) {
+  const words = text.split(/\s+/).filter(Boolean);
+  if (words.length <= 1) return [text];
+  const maxLines = words.length >= 4 ? 3 : 2;
+  const n = words.length;
+  let best = null;
+  for (let mask = 0; mask < 1 << n - 1; mask++) {
+    const lines = [];
+    let cur = [words[0]];
+    for (let i = 1; i < n; i++) {
+      if (mask & 1 << i - 1) {
+        lines.push(cur.join(" "));
+        cur = [words[i]];
+      } else cur.push(words[i]);
+    }
+    lines.push(cur.join(" "));
+    if (lines.length > maxLines) continue;
+    const cost = Math.round(
+      Math.max(...lines.map((l) => labelWidth(l, letterSpacing)))
+    );
+    const head = labelWidth(lines[0], letterSpacing);
+    if (!best || cost < best.cost || cost === best.cost && lines.length < best.lines.length || cost === best.cost && lines.length === best.lines.length && head > best.head)
+      best = { lines, cost, head };
+  }
+  return best?.lines ?? [text];
+}
+function rectAround(cx, cy, lines, letterSpacing) {
+  const w = Math.max(...lines.map((l) => labelWidth(l, letterSpacing)));
+  const h = (lines.length - 1) * LINE_HEIGHT + FONT + 2 * PADY;
+  return { x: cx - w / 2, y: cy - h / 2, w, h };
+}
+function rectFits(r, width, height) {
+  return r.x >= 0 && r.y >= 0 && r.x + r.w <= width && r.y + r.h <= height;
+}
+function overlapsPadded(a, b, pad2) {
+  return a.x - pad2 < b.x + b.w && a.x + a.w + pad2 > b.x && a.y - pad2 < b.y + b.h && a.y + a.h + pad2 > b.y;
+}
+function placeContextLabels(args) {
+  const {
+    projection,
+    dLonSpan,
+    dLatSpan,
+    width,
+    height,
+    waterBodies,
+    countries,
+    palette,
+    project,
+    collides,
+    overLand
+  } = args;
+  void projection;
+  const band = tierBand(Math.max(dLonSpan, dLatSpan));
+  const budget = labelBudget(width, height, band);
+  if (budget <= 0) return [];
+  const waterColor = mix(palette.colors.blue, palette.textMuted, 50);
+  const countryColor = palette.textMuted;
+  const haloColor = palette.bg;
+  const candidates = [];
+  const center = [width / 2, height / 2];
+  for (const e of waterBodies?.entries ?? []) {
+    const [lat, lon, name, tier, kind, alt] = e;
+    if (!waterEligible(tier, kind, band)) continue;
+    const wlines = wrapLabel2(name, WATER_LETTER_SPACING);
+    const anchorsLngLat = [[lon, lat]];
+    for (const a of alt ?? []) anchorsLngLat.push([a[1], a[0]]);
+    let best = null;
+    let bestD = Infinity;
+    let nearestProj = null;
+    let nearestProjD = Infinity;
+    for (const [aLon, aLat] of anchorsLngLat) {
+      const p = project(aLon, aLat);
+      if (!p || !Number.isFinite(p[0]) || !Number.isFinite(p[1])) continue;
+      const d = (p[0] - center[0]) ** 2 + (p[1] - center[1]) ** 2;
+      if (d < nearestProjD) {
+        nearestProjD = d;
+        nearestProj = p;
+      }
+      if (!insideViewport(p, width, height)) continue;
+      if (d < bestD) {
+        bestD = d;
+        best = p;
+      }
+    }
+    if (!best && tier === 0 && nearestProj) {
+      const overX = Math.max(0, -nearestProj[0], nearestProj[0] - width);
+      const overY = Math.max(0, -nearestProj[1], nearestProj[1] - height);
+      if (overX <= width * EDGE_CLAMP_OVERSHOOT && overY <= height * EDGE_CLAMP_OVERSHOOT) {
+        const halfW = Math.max(...wlines.map((l) => labelWidth(l, WATER_LETTER_SPACING))) / 2;
+        const halfH = ((wlines.length - 1) * LINE_HEIGHT + FONT + 2 * PADY) / 2;
+        const m = EDGE_CLAMP_MARGIN;
+        best = [
+          Math.min(Math.max(nearestProj[0], halfW + m), width - halfW - m),
+          Math.min(Math.max(nearestProj[1], halfH + m), height - halfH - m)
+        ];
+      }
+    }
+    if (!best) continue;
+    candidates.push({
+      text: name,
+      lines: wlines,
+      cx: best[0],
+      cy: best[1],
+      italic: true,
+      letterSpacing: WATER_LETTER_SPACING,
+      color: waterColor,
+      // Water before any country (×1000), then by tier, then kind, then name.
+      sort: tier * 10 + KIND_ORDER[kind]
+    });
+  }
+  const ranked = countries.map((c) => {
+    const [x0, y0, x1, y1] = c.bbox;
+    const w = x1 - x0;
+    const h = y1 - y0;
+    return { c, w, h, area: w * h };
+  }).filter((r) => Number.isFinite(r.area) && r.area > 0).sort((a, b) => b.area - a.area);
+  let ci = 0;
+  for (const r of ranked) {
+    const { c, w, h } = r;
+    if (w > width * 0.66 || h > height * 0.66) continue;
+    if (!insideViewport(c.anchor, width, height)) continue;
+    const text = c.name;
+    const tw = labelWidth(text, 0);
+    if (tw > w || FONT + 2 * PADY > h) continue;
+    candidates.push({
+      text,
+      lines: [text],
+      cx: c.anchor[0],
+      cy: c.anchor[1],
+      italic: false,
+      letterSpacing: 0,
+      color: countryColor,
+      // Always after every water body (+1e6); larger area = earlier.
+      sort: 1e6 + ci++
+    });
+  }
+  candidates.sort((a, b) => a.sort - b.sort);
+  const placed = [];
+  const placedRects = [];
+  for (const cand of candidates) {
+    if (placed.length >= budget) break;
+    const rect = rectAround(cand.cx, cand.cy, cand.lines, cand.letterSpacing);
+    if (!rectFits(rect, width, height)) continue;
+    if (cand.italic && overLand) {
+      const inset = 2;
+      const top = cand.cy - (cand.lines.length - 1) / 2 * LINE_HEIGHT;
+      const touchesLand = cand.lines.some((line12, li) => {
+        const lw = labelWidth(line12, cand.letterSpacing);
+        const x0 = cand.cx - lw / 2 + inset;
+        const x1 = cand.cx + lw / 2 - inset;
+        const xs = [x0, (x0 + cand.cx) / 2, cand.cx, (cand.cx + x1) / 2, x1];
+        const base = top + li * LINE_HEIGHT;
+        return [base, base - FONT * 0.4, base - FONT * 0.8].some(
+          (y) => xs.some((x) => overLand(x, y))
+        );
+      });
+      if (touchesLand) continue;
+    }
+    if (collides(rect)) continue;
+    if (placedRects.some((r) => overlapsPadded(rect, r, CONTEXT_PAD))) continue;
+    placedRects.push(rect);
+    placed.push({
+      x: cand.cx,
+      y: cand.cy,
+      text: cand.text,
+      anchor: "middle",
+      color: cand.color,
+      // No halo: the bg-coloured outline reads as a ghost box behind the text
+      // over the tinted water/land. Context labels are muted enough to sit
+      // cleanly on the basemap without one.
+      halo: false,
+      haloColor,
+      italic: cand.italic,
+      letterSpacing: cand.letterSpacing,
+      ...cand.lines.length > 1 ? { lines: cand.lines } : {},
+      lineNumber: 0
+    });
+  }
+  return placed;
+}
+var FONT, LINE_HEIGHT, PADX, PADY, WATER_LETTER_SPACING, CONTEXT_PAD, EDGE_CLAMP_MARGIN, EDGE_CLAMP_OVERSHOOT, KIND_ORDER;
+var init_context_labels = __esm({
+  "src/map/context-labels.ts"() {
+    "use strict";
+    init_color_utils();
+    init_legend_constants();
+    FONT = 11;
+    LINE_HEIGHT = FONT + 2;
+    PADX = 4;
+    PADY = 3;
+    WATER_LETTER_SPACING = 1.5;
+    CONTEXT_PAD = 4;
+    EDGE_CLAMP_MARGIN = 8;
+    EDGE_CLAMP_OVERSHOOT = 0.35;
+    KIND_ORDER = {
+      ocean: 0,
+      sea: 1,
+      gulf: 2,
+      bay: 3,
+      strait: 4,
+      channel: 5,
+      sound: 6
+    };
+  }
+});
+
 // src/map/layout.ts
 import {
   geoPath,
   geoNaturalEarth1,
+  geoEqualEarth,
   geoEquirectangular,
   geoConicEqualArea,
   geoMercator,
@@ -46234,12 +47174,34 @@ function geomObject2(topo) {
   const key = Object.keys(topo.objects)[0];
   return topo.objects[key];
 }
+function mergeFeatures(a, b) {
+  const polysOf = (f) => {
+    const g = f.geometry;
+    if (!g) return null;
+    if (g.type === "Polygon") return [g.coordinates];
+    if (g.type === "MultiPolygon") return g.coordinates;
+    return null;
+  };
+  const pa = polysOf(a);
+  const pb = polysOf(b);
+  if (!pa || !pb) return a;
+  return {
+    ...a,
+    geometry: { type: "MultiPolygon", coordinates: [...pa, ...pb] }
+  };
+}
 function decodeLayer(topo) {
+  const cached = decodeCache.get(topo);
+  if (cached) return cached;
   const out = /* @__PURE__ */ new Map();
   for (const g of geomObject2(topo).geometries) {
     const f = feature2(topo, g);
-    out.set(g.id, { ...f, id: g.id });
+    if (!f.geometry) continue;
+    const tagged = { ...f, id: g.id };
+    const existing = out.get(g.id);
+    out.set(g.id, existing ? mergeFeatures(existing, tagged) : tagged);
   }
+  decodeCache.set(topo, out);
   return out;
 }
 function projectionFor(family) {
@@ -46248,9 +47210,12 @@ function projectionFor(family) {
       return usConusProjection();
     case "mercator":
       return geoMercator();
+    case "equal-earth":
+      return geoEqualEarth();
+    case "equirectangular":
+      return geoEquirectangular();
     case "natural-earth":
       return geoNaturalEarth1();
-    case "equirectangular":
     default:
       return geoEquirectangular();
   }
@@ -46269,13 +47234,11 @@ function mapNeutralLandColor(palette, isDark, _dataActive = false) {
     isDark ? LAND_TINT_DARK : LAND_TINT_LIGHT
   );
 }
-function layoutMap(resolved, data, size, opts) {
-  const { palette, isDark } = opts;
-  const { width, height } = size;
+function buildMapProjection(resolved, data) {
   const wantsUsStates = resolved.basemaps.subdivisions.includes("us-states");
-  const usCrisp = resolved.projection === "albers-usa" && wantsUsStates && !!data.naLand;
+  const usCrisp = (resolved.projection === "albers-usa" || resolved.projection === "mercator") && wantsUsStates && !!data.naLand;
   const worldTopo = usCrisp ? data.worldDetail : resolved.basemaps.world === "detail" ? data.worldDetail : data.worldCoarse;
-  const worldLayer = decodeLayer(worldTopo);
+  const worldLayer = new Map(decodeLayer(worldTopo));
   if (usCrisp && data.naLand) {
     const [nbW, nbS, nbE, nbN] = [-140, 10, -52, 66];
     const crisp = decodeLayer(data.naLand);
@@ -46284,16 +47247,141 @@ function layoutMap(resolved, data, size, opts) {
       if (!base) continue;
       const [[bw, bs], [be, bn]] = geoBounds2(base);
       if (bw >= nbW && be <= nbE && bs >= nbS && bn <= nbN)
-        worldLayer.set(iso, cf);
+        worldLayer.set(iso, { ...cf, properties: base.properties });
     }
   }
   const usLayer = wantsUsStates ? decodeLayer(data.usStates) : null;
+  const extentOutline = () => {
+    const [[w, s], [e, n]] = resolved.extent;
+    const N = 16;
+    const coords = [];
+    for (let i = 0; i <= N; i++) {
+      const t = i / N;
+      const lon = w + (e - w) * t;
+      const lat = s + (n - s) * t;
+      coords.push([lon, s], [lon, n], [w, lat], [e, lat]);
+    }
+    return {
+      type: "Feature",
+      properties: {},
+      geometry: { type: "MultiPoint", coordinates: coords }
+    };
+  };
+  let fitFeatures;
+  if (resolved.projection === "albers-usa" && usLayer) {
+    fitFeatures = [...usLayer.entries()].filter(([iso]) => !US_NON_CONUS.has(iso)).map(([, f]) => f);
+    const neighborPoints = resolved.pois.filter((p) => !inAlaska(p.lon, p.lat) && !inHawaii(p.lon, p.lat)).map((p) => [p.lon, p.lat]);
+    if (neighborPoints.length > 0) {
+      fitFeatures.push({
+        type: "Feature",
+        properties: {},
+        geometry: { type: "MultiPoint", coordinates: neighborPoints }
+      });
+    }
+    for (const r of resolved.regions) {
+      if (r.layer === "country" && (r.iso === "CA" || r.iso === "MX")) {
+        const cf = worldLayer.get(r.iso);
+        if (cf) fitFeatures.push(cf);
+      }
+    }
+  } else {
+    fitFeatures = [extentOutline()];
+  }
+  const fitTarget = { type: "FeatureCollection", features: fitFeatures };
+  const projection = projectionFor(resolved.projection);
+  if (resolved.projection !== "albers-usa") {
+    let centerLon = (resolved.extent[0][0] + resolved.extent[1][0]) / 2;
+    if (centerLon > 180) centerLon -= 360;
+    projection.rotate([-centerLon, 0]);
+  }
+  const fitGB = geoBounds2(fitTarget);
+  const fitIsGlobal = fitGB[1][0] - fitGB[0][0] >= 270 || fitGB[1][1] - fitGB[0][1] >= 130;
+  return {
+    projection,
+    fitTarget,
+    fitIsGlobal,
+    worldLayer,
+    usLayer,
+    usCrisp,
+    wantsUsStates,
+    worldTopo
+  };
+}
+function parsePathRings(d) {
+  const rings = [];
+  let cur = [];
+  const re = /([MLZ])([^MLZ]*)/g;
+  let m;
+  while (m = re.exec(d)) {
+    if (m[1] === "Z") {
+      if (cur.length) rings.push(cur);
+      cur = [];
+      continue;
+    }
+    if (m[1] === "M" && cur.length) {
+      rings.push(cur);
+      cur = [];
+    }
+    const nums = m[2].split(/[ ,]+/).map(Number);
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      const x = nums[i];
+      const y = nums[i + 1];
+      if (Number.isFinite(x) && Number.isFinite(y)) cur.push([x, y]);
+    }
+  }
+  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;
+  const {
+    projection,
+    fitTarget,
+    fitIsGlobal,
+    worldLayer,
+    usLayer,
+    usCrisp,
+    worldTopo
+  } = buildMapProjection(resolved, data);
   const usContext = usLayer !== null;
   const regionStroke = isDark ? mix(palette.bg, palette.text, 78) : mix(palette.text, palette.bg, 78);
   const values = resolved.regions.filter((r) => r.value !== void 0).map((r) => r.value);
-  const scaleOverride = resolved.directives.scale;
-  const rampMin = scaleOverride ? scaleOverride.min : Math.min(...values);
-  const rampMax = scaleOverride ? scaleOverride.max : Math.max(...values);
+  const allNonNegative = values.length > 0 && values.every((v) => v >= 0);
+  const rampMin = allNonNegative ? 0 : Math.min(...values);
+  const rampMax = Math.max(...values);
   const rampHue = resolveColor(resolved.directives.regionMetricColor ?? "", palette) ?? palette.colors.red;
   const hasRamp = values.length > 0;
   const VALUE_NAME = hasRamp ? resolved.directives.regionMetric?.trim() || "Value" : null;
@@ -46314,7 +47402,7 @@ function layoutMap(resolved, data, size, opts) {
     activeGroup = VALUE_NAME ?? (resolved.tagGroups.length > 0 ? resolved.tagGroups[0].name : null);
   }
   const activeIsScore = VALUE_NAME !== null && activeGroup === VALUE_NAME;
-  const mutedBasemap = resolved.directives.basemapStyle === "muted" ? true : resolved.directives.basemapStyle === "natural" ? false : activeGroup !== null;
+  const mutedBasemap = activeGroup !== null;
   const neutralFill = mapNeutralLandColor(palette, isDark, mutedBasemap);
   const water = mapBackgroundColor(palette, isDark, mutedBasemap);
   const lakeStroke = mix(regionStroke, water, 45);
@@ -46323,10 +47411,43 @@ function layoutMap(resolved, data, size, opts) {
     palette.bg,
     mutedBasemap ? isDark ? MUTED_FOREIGN_DARK : MUTED_FOREIGN_LIGHT : isDark ? FOREIGN_TINT_DARK : FOREIGN_TINT_LIGHT
   );
+  const colorizeActive = resolved.directives.noColorize !== true && !hasRamp && resolved.tagGroups.length === 0;
+  const colorByIso = /* @__PURE__ */ new Map();
+  if (colorizeActive) {
+    const adjacency = /* @__PURE__ */ new Map();
+    const addEdges = (src) => {
+      for (const [iso, ns] of src) {
+        const cur = adjacency.get(iso);
+        if (cur) cur.push(...ns);
+        else adjacency.set(iso, [...ns]);
+      }
+    };
+    addEdges(buildAdjacency(worldTopo));
+    if (usLayer) {
+      addEdges(buildAdjacency(data.usStates));
+      for (const [country, states] of Object.entries(FOREIGN_BORDER)) {
+        const cn = adjacency.get(country);
+        if (!cn) continue;
+        for (const st of states) {
+          const sn = adjacency.get(st);
+          if (!sn) continue;
+          cn.push(st);
+          sn.push(country);
+        }
+      }
+    }
+    const { byIso, huesNeeded } = assignColors(
+      [...adjacency.keys()],
+      adjacency
+    );
+    const tints = politicalTints(palette, huesNeeded, isDark);
+    for (const [iso, idx] of byIso) colorByIso.set(iso, tints[idx]);
+  }
+  const colorizeStroke = (fill2) => mix(fill2, palette.text, 35);
   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) => {
@@ -46358,43 +47479,15 @@ function layoutMap(resolved, data, size, opts) {
     if (activeIsScore) {
       return r.value !== void 0 ? fillForValue(r.value) : neutralFill;
     }
+    if (colorizeActive) return (r.iso && colorByIso.get(r.iso)) ?? neutralFill;
     return tagFill(r.tags, activeGroup) ?? neutralFill;
   };
   const regionById = new Map(resolved.regions.map((r) => [r.iso, r]));
-  const extentOutline = () => {
-    const [[w, s], [e, n]] = resolved.extent;
-    const N = 16;
-    const coords = [];
-    for (let i = 0; i <= N; i++) {
-      const t = i / N;
-      const lon = w + (e - w) * t;
-      const lat = s + (n - s) * t;
-      coords.push([lon, s], [lon, n], [w, lat], [e, lat]);
-    }
-    return {
-      type: "Feature",
-      properties: {},
-      geometry: { type: "MultiPoint", coordinates: coords }
-    };
-  };
-  let fitFeatures;
-  if (resolved.projection === "albers-usa" && usLayer) {
-    fitFeatures = [...usLayer.entries()].filter(([iso]) => !US_NON_CONUS.has(iso)).map(([, f]) => f);
-  } else {
-    fitFeatures = [extentOutline()];
-  }
-  const fitTarget = { type: "FeatureCollection", features: fitFeatures };
-  const projection = projectionFor(resolved.projection);
-  if (resolved.projection !== "albers-usa") {
-    let centerLon = (resolved.extent[0][0] + resolved.extent[1][0]) / 2;
-    if (centerLon > 180) centerLon -= 360;
-    projection.rotate([-centerLon, 0]);
-  }
-  const TITLE_GAP = 16;
+  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_GAP);
+    topPad = Math.max(FIT_PAD, bannerBottom + TITLE_GAP2);
   }
   const fitBox = [
     [FIT_PAD, topPad],
@@ -46404,21 +47497,20 @@ function layoutMap(resolved, data, size, opts) {
     ]
   ];
   projection.fitExtent(fitBox, fitTarget);
-  const fitGB = geoBounds2(fitTarget);
-  const fitIsGlobal = fitGB[1][0] - fitGB[0][0] >= 270 || fitGB[1][1] - fitGB[0][1] >= 130;
   let path;
   let project;
   let stretchParams = null;
-  if (fitIsGlobal) {
+  if (fitIsGlobal && !opts.preferContain) {
     const cb = geoPath(projection).bounds(fitTarget);
     const bx0 = cb[0][0];
     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 ? 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,
@@ -46451,7 +47543,9 @@ function layoutMap(resolved, data, size, opts) {
   const insets = [];
   const insetRegions = [];
   const insetLabelSeeds = [];
-  if (resolved.projection === "albers-usa" && usLayer && !resolved.directives.noInsets) {
+  const akRef = resolved.regions.some((r) => r.iso === "US-AK") || resolved.pois.some((p) => inAlaska(p.lon, p.lat));
+  const hiRef = resolved.regions.some((r) => r.iso === "US-HI") || resolved.pois.some((p) => inHawaii(p.lon, p.lat));
+  if (resolved.projection === "albers-usa" && usLayer && (akRef || hiRef)) {
     const PAD = 8;
     const GAP = 12;
     const yB = height - FIT_PAD;
@@ -46516,8 +47610,18 @@ function layoutMap(resolved, data, size, opts) {
       );
       const d = geoPath(proj)(f) ?? "";
       if (!d) return xr;
+      let contextLand;
+      if (iso === "US-AK") {
+        const can = worldLayer.get("CA");
+        const cd = can ? geoPath(proj)(can) ?? "" : "";
+        if (cd)
+          contextLand = {
+            d: cd,
+            fill: colorizeActive ? colorByIso.get("CA") ?? foreignFill : foreignFill
+          };
+      }
       const r = regionById.get(iso);
-      let fill2 = neutralFill;
+      let fill2 = colorizeActive ? colorByIso.get(iso) ?? neutralFill : neutralFill;
       let lineNumber = -1;
       if (r?.layer === "us-state") {
         fill2 = regionFill(r);
@@ -46536,13 +47640,14 @@ function layoutMap(resolved, data, size, opts) {
         ],
         // The FITTED inset projection (just fit to this box) — captured so the
         // geo-query can invert pixels inside the frame back to AK/HI coords.
-        projection: proj
+        projection: proj,
+        ...contextLand && { contextLand }
       });
       insetRegions.push({
         id: iso,
         d,
         fill: fill2,
-        stroke: regionStroke,
+        stroke: colorizeActive ? colorizeStroke(fill2) : regionStroke,
         lineNumber,
         layer: "us-state",
         ...r?.value !== void 0 && { value: r.value },
@@ -46555,13 +47660,16 @@ function layoutMap(resolved, data, size, opts) {
       }
       return xr;
     };
-    const akRight = placeInset(
-      "US-AK",
-      alaskaProjection(),
-      FIT_PAD,
-      width * 0.15
-    );
-    placeInset("US-HI", hawaiiProjection(), akRight + 24, width * 0.1);
+    let akRight = FIT_PAD;
+    if (akRef)
+      akRight = placeInset("US-AK", alaskaProjection(), FIT_PAD, width * 0.15);
+    if (hiRef)
+      placeInset(
+        "US-HI",
+        hawaiiProjection(),
+        akRef ? akRight + 24 : FIT_PAD,
+        width * 0.1
+      );
   }
   const conusFit = resolved.projection === "albers-usa" && !!usLayer;
   const classifyExtent = conusFit ? geoBounds2(fitTarget) : resolved.extent;
@@ -46577,15 +47685,24 @@ function layoutMap(resolved, data, size, opts) {
   };
   const ringOverlapsView = (ring) => {
     let loMin = Infinity, loMax = -Infinity, rawMin = Infinity, rawMax = -Infinity;
+    const lons = [];
     for (const [rawLon] of ring) {
       const lon = normLon(rawLon);
+      lons.push(lon);
       if (lon < loMin) loMin = lon;
       if (lon > loMax) loMax = lon;
       if (rawLon < rawMin) rawMin = rawLon;
       if (rawLon > rawMax) rawMax = rawLon;
     }
-    if (loMax - loMin > 270) return false;
-    if (rawMax - rawMin > 180 && loMax - loMin < 90) return false;
+    lons.sort((a, b) => a - b);
+    let maxGap = 0;
+    for (let i = 1; i < lons.length; i++)
+      maxGap = Math.max(maxGap, lons[i] - lons[i - 1]);
+    if (lons.length > 1)
+      maxGap = Math.max(maxGap, lons[0] + 360 - lons[lons.length - 1]);
+    const occupiedArc = 360 - maxGap;
+    if (occupiedArc > 270) return false;
+    if (rawMax - rawMin > 180 && occupiedArc < 90) return false;
     let px0 = Infinity, py0 = Infinity, px1 = -Infinity, py1 = -Infinity, anyFinite = false;
     for (const [lon, lat] of ring) {
       const p = project(lon, lat);
@@ -46658,7 +47775,7 @@ function layoutMap(resolved, data, size, opts) {
   const regions = [];
   const pushRegionLayer = (layerFeatures, layerKind, shouldCull) => {
     for (const [iso, f] of layerFeatures) {
-      if (layerKind === "us-state" && usContext && INSET_STATES.has(iso))
+      if (layerKind === "us-state" && usContext && resolved.projection === "albers-usa" && INSET_STATES.has(iso))
         continue;
       if (layerKind === "country" && usContext && iso === "US") continue;
       if (layerKind === "country" && iso === "AQ" && !regionById.has("AQ"))
@@ -46666,11 +47783,13 @@ 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";
-      let fill2 = isForeign ? foreignFill : neutralFill;
+      const baseFill = isForeign ? foreignFill : neutralFill;
+      let fill2 = colorizeActive ? colorByIso.get(iso) ?? baseFill : baseFill;
       let label;
       let lineNumber = -1;
       let layer = "base";
@@ -46679,15 +47798,21 @@ function layoutMap(resolved, data, size, opts) {
         lineNumber = r.lineNumber;
         layer = layerKind;
         label = r.name;
+      } 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,
         fill: fill2,
-        stroke: regionStroke,
+        stroke: colorizeActive ? colorizeStroke(fill2) : regionStroke,
         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 }
       });
@@ -46712,9 +47837,41 @@ function layoutMap(resolved, data, size, opts) {
       });
     }
   }
+  const pointInRings = (px, py, rings) => {
+    let inside = false;
+    for (const ring of rings) {
+      for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+        const [xi, yi] = ring[i];
+        const [xj, yj] = ring[j];
+        if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi)
+          inside = !inside;
+      }
+    }
+    return inside;
+  };
+  const fillHitTargets = [...regions, ...insetRegions].map((r) => ({
+    fill: r.fill,
+    rings: parsePathRings(r.d)
+  }));
+  const fillAt = (x, y) => {
+    let hit = water;
+    for (const t of fillHitTargets)
+      if (pointInRings(x, y, t.rings)) hit = t.fill;
+    return hit;
+  };
+  const labelOnFill = (fill2) => {
+    const color = contrastRatio(fill2, palette.textOnFillDark) >= contrastRatio(fill2, palette.textOnFillLight) ? palette.textOnFillDark : palette.textOnFillLight;
+    const haloColor = color === palette.textOnFillLight ? palette.textOnFillDark : palette.textOnFillLight;
+    return {
+      color,
+      halo: contrastRatio(fill2, color) < REGION_LABEL_HALO_RATIO,
+      haloColor
+    };
+  };
+  const reliefAllowed = resolved.directives.noRelief !== true;
   const relief = [];
   let reliefHatch = null;
-  if (resolved.directives.relief === true && data.mountainRanges) {
+  if (reliefAllowed && data.mountainRanges) {
     for (const [, f] of decodeLayer(data.mountainRanges)) {
       const viewF = isGlobalView ? dropFrameFillers(f) : cullFeatureToView(f);
       if (!viewF) continue;
@@ -46730,16 +47887,32 @@ function layoutMap(resolved, data, size, opts) {
     if (relief.length) {
       const darkTone = isDark ? palette.bg : palette.text;
       const lightTone = isDark ? palette.text : palette.bg;
-      const landLum = relativeLuminance(neutralFill);
+      const reliefLandRef = colorizeActive ? isDark ? palette.surface : palette.bg : neutralFill;
+      const landLum = relativeLuminance(reliefLandRef);
       const tone = Math.abs(landLum - relativeLuminance(darkTone)) > 0.04 ? darkTone : lightTone;
       reliefHatch = {
-        color: mix(tone, neutralFill, RELIEF_HATCH_STRENGTH),
+        color: mix(tone, reliefLandRef, RELIEF_HATCH_STRENGTH),
         spacing: RELIEF_HATCH_SPACING,
         width: RELIEF_HATCH_WIDTH
       };
     }
   }
-  const riverColor = mix(water, regionStroke, 16);
+  let coastlineStyle = null;
+  if (resolved.directives.noCoastline !== true) {
+    const minDim = Math.min(width, height);
+    coastlineStyle = {
+      color: mix(regionStroke, water, COASTLINE_STROKE_MIX),
+      // N equal-width rings: distance steps outward by COASTLINE_STEP; opacity
+      // fades linearly from NEAR (innermost) to FAR (outermost).
+      lines: Array.from({ length: COASTLINE_RING_COUNT }, (_, k) => ({
+        d: (COASTLINE_D0 + k * COASTLINE_STEP) * minDim,
+        thickness: COASTLINE_THICKNESS * minDim,
+        opacity: COASTLINE_OPACITY_NEAR + (COASTLINE_OPACITY_FAR - COASTLINE_OPACITY_NEAR) * k / (COASTLINE_RING_COUNT - 1)
+      })),
+      minExtent: (isGlobalView ? COASTLINE_MIN_EXTENT_GLOBAL : COASTLINE_MIN_EXTENT) * minDim
+    };
+  }
+  const riverColor = mix(palette.colors.blue, water, 32);
   const rivers = [];
   if (data.rivers) {
     for (const [, f] of decodeLayer(data.rivers)) {
@@ -46795,38 +47968,108 @@ function layoutMap(resolved, data, size, opts) {
     const xy = project(p.lon, p.lat);
     if (xy) projected.push({ p, xy });
   }
-  const coloGroups = /* @__PURE__ */ new Map();
+  const placePoi = (e, cx, cy, clusterId) => {
+    const { fill: fill2, stroke: stroke2 } = poiFill(e.p);
+    poiScreen.set(e.p.id, { cx, cy, r: radiusFor(e.p) });
+    const num = routeNumberById.get(e.p.id);
+    pois.push({
+      id: e.p.id,
+      cx,
+      cy,
+      r: radiusFor(e.p),
+      fill: fill2,
+      stroke: stroke2,
+      lineNumber: e.p.lineNumber,
+      implicit: !!e.p.implicit,
+      isOrigin: originIds.has(e.p.id),
+      ...num !== void 0 && { routeNumber: num },
+      ...Object.keys(e.p.tags).length > 0 && { tags: e.p.tags },
+      ...clusterId !== void 0 && { clusterId }
+    });
+  };
+  const clusters = [];
+  const connected = /* @__PURE__ */ new Set();
+  for (const e of resolved.edges) {
+    connected.add(e.fromId);
+    connected.add(e.toId);
+  }
+  for (const rt of resolved.routes) {
+    rt.stopIds.forEach((id) => connected.add(id));
+  }
+  const radiusOf = (e) => radiusFor(e.p);
   for (const e of projected) {
-    const key = `${Math.round(e.xy[0] / COLO_EPS)},${Math.round(e.xy[1] / COLO_EPS)}`;
-    const arr = coloGroups.get(key);
-    if (arr) arr.push(e);
-    else coloGroups.set(key, [e]);
-  }
-  for (const group of coloGroups.values()) {
-    group.forEach((e, i) => {
-      let cx = e.xy[0];
-      let cy = e.xy[1];
-      if (group.length > 1) {
-        const ang = i * GOLDEN_ANGLE;
-        cx += Math.cos(ang) * COLO_R;
-        cy += Math.sin(ang) * COLO_R;
-      }
-      const { fill: fill2, stroke: stroke2 } = poiFill(e.p);
-      poiScreen.set(e.p.id, { cx, cy, r: radiusFor(e.p) });
-      const num = routeNumberById.get(e.p.id);
-      pois.push({
-        id: e.p.id,
-        cx,
-        cy,
-        r: radiusFor(e.p),
-        fill: fill2,
-        stroke: stroke2,
-        lineNumber: e.p.lineNumber,
-        implicit: !!e.p.implicit,
-        isOrigin: originIds.has(e.p.id),
-        ...num !== void 0 && { routeNumber: num },
-        ...Object.keys(e.p.tags).length > 0 && { tags: e.p.tags }
-      });
+    if (connected.has(e.p.id)) placePoi(e, e.xy[0], e.xy[1]);
+  }
+  const groups = [];
+  for (const e of projected) {
+    if (connected.has(e.p.id)) continue;
+    const r = radiusOf(e);
+    const near = groups.find(
+      (g) => g.some(
+        (q) => Math.hypot(q.xy[0] - e.xy[0], q.xy[1] - e.xy[1]) < (r + radiusOf(q)) * STACK_OVERLAP
+      )
+    );
+    if (near) near.push(e);
+    else groups.push([e]);
+  }
+  for (const g of groups) {
+    if (g.length === 1) {
+      placePoi(g[0], g[0].xy[0], g[0].xy[1]);
+      continue;
+    }
+    const clusterId = g[0].p.id;
+    const cx0 = g.reduce((s, e) => s + e.xy[0], 0) / g.length;
+    const cy0 = g.reduce((s, e) => s + e.xy[1], 0) / g.length;
+    const maxR = Math.max(...g.map(radiusOf));
+    const sep = 2 * maxR + STACK_RING_GAP;
+    const ringR = Math.max(
+      COLO_R,
+      sep / (2 * Math.sin(Math.PI / Math.max(g.length, 2)))
+    );
+    const positions = g.map((e, i) => {
+      if (g.length <= STACK_RING_MAX) {
+        const ang2 = -Math.PI / 2 + i * 2 * Math.PI / g.length;
+        return {
+          e,
+          mx: cx0 + Math.cos(ang2) * ringR,
+          my: cy0 + Math.sin(ang2) * ringR
+        };
+      }
+      const ang = i * GOLDEN_ANGLE;
+      const rr = ringR * Math.sqrt((i + 1) / g.length);
+      return { e, mx: cx0 + Math.cos(ang) * rr, my: cy0 + Math.sin(ang) * rr };
+    });
+    let minX = cx0 - maxR;
+    let maxX = cx0 + maxR;
+    let minY = cy0 - maxR;
+    let maxY = cy0 + maxR;
+    for (const { mx, my, e } of positions) {
+      const r = radiusOf(e);
+      minX = Math.min(minX, mx - r);
+      maxX = Math.max(maxX, mx + r);
+      minY = Math.min(minY, my - r);
+      maxY = Math.max(maxY, my + r);
+    }
+    let dx = 0;
+    let dy = 0;
+    if (minX + dx < 2) dx = 2 - minX;
+    if (maxX + dx > width - 2) dx = width - 2 - maxX;
+    if (minY + dy < 2) dy = 2 - minY;
+    if (maxY + dy > height - 2) dy = height - 2 - maxY;
+    const legsOut = [];
+    for (const { e, mx, my } of positions) {
+      const fx = mx + dx;
+      const fy = my + dy;
+      placePoi(e, fx, fy, clusterId);
+      legsOut.push({ x2: fx, y2: fy, color: poiFill(e.p).fill });
+    }
+    clusters.push({
+      id: clusterId,
+      cx: cx0 + dx,
+      cy: cy0 + dy,
+      count: g.length,
+      hitR: ringR + maxR + 6,
+      legs: legsOut
     });
   }
   const legs = [];
@@ -46876,16 +48119,26 @@ function layoutMap(resolved, data, size, opts) {
       if (!a || !b) continue;
       const mx = (a.cx + b.cx) / 2;
       const my = (a.cy + b.cy) / 2;
+      const bow = {
+        curved: leg.style === "arc",
+        offset: 0,
+        labelX: mx,
+        labelY: my - 4
+      };
+      const routeLabelStyle = leg.label !== void 0 ? labelOnFill(fillAt(bow.labelX, bow.labelY)) : void 0;
       legs.push({
-        d: legPath(a, b, leg.style === "arc", 0),
+        d: legPath(a, b, bow.curved, bow.offset),
         width: routeWidthFor(Number(leg.value)),
         color: mix(palette.text, palette.bg, 72),
         arrow: true,
         lineNumber: leg.lineNumber,
         ...leg.label !== void 0 && {
           label: leg.label,
-          labelX: mx,
-          labelY: my - 4
+          labelX: bow.labelX,
+          labelY: bow.labelY,
+          labelColor: routeLabelStyle.color,
+          labelHalo: routeLabelStyle.halo,
+          labelHaloColor: routeLabelStyle.haloColor
         }
       });
     }
@@ -46913,20 +48166,29 @@ function layoutMap(resolved, data, size, opts) {
       const a = poiScreen.get(e.fromId);
       const b = poiScreen.get(e.toId);
       if (!a || !b) return;
-      const curved = e.style === "arc" || n > 1;
-      const offset = n > 1 ? (i - (n - 1) / 2) * FAN_STEP : 0;
+      const fanOffset = n > 1 ? (i - (n - 1) / 2) * FAN_STEP : 0;
       const mx = (a.cx + b.cx) / 2;
       const my = (a.cy + b.cy) / 2;
+      const bow = {
+        curved: e.style === "arc" || n > 1,
+        offset: fanOffset,
+        labelX: mx,
+        labelY: my - 4
+      };
+      const edgeLabelStyle = e.label !== void 0 ? labelOnFill(fillAt(bow.labelX, bow.labelY)) : void 0;
       legs.push({
-        d: legPath(a, b, curved, offset),
+        d: legPath(a, b, bow.curved, bow.offset),
         width: widthFor(e),
         color: mix(palette.text, palette.bg, 66),
         arrow: e.directed,
         lineNumber: e.lineNumber,
         ...e.label !== void 0 && {
           label: e.label,
-          labelX: mx,
-          labelY: my - 4
+          labelX: bow.labelX,
+          labelY: bow.labelY,
+          labelColor: edgeLabelStyle.color,
+          labelHalo: edgeLabelStyle.halo,
+          labelHaloColor: edgeLabelStyle.haloColor
         }
       });
     });
@@ -46968,48 +48230,73 @@ function layoutMap(resolved, data, size, opts) {
     }
   }
   const collides = (rect) => markers.some((m) => rectCircleOverlap(rect, m)) || obstacles.some((o) => rectsOverlap(rect, o)) || legSegments.some((s) => segmentRectOverlap(s[0], s[1], s[2], s[3], rect));
-  const regionLabelMode = resolved.directives.regionLabels ?? "off";
+  const showRegionLabels = resolved.directives.noRegionLabels !== true;
+  const isCompact = width < COMPACT_WIDTH_PX;
   const LABEL_PADX = 6;
   const LABEL_PADY = 3;
-  const labelW = (text) => measureLegendText(text, FONT) + 2 * LABEL_PADX;
-  const labelH = FONT + 2 * LABEL_PADY;
+  const labelW = (text) => measureLegendText(text, FONT2) + 2 * LABEL_PADX;
+  const labelH = FONT2 + 2 * LABEL_PADY;
   const pushRegionLabel = (x, y, text, fill2, lineNumber) => {
-    const color = contrastText(
-      fill2,
-      palette.textOnFillLight,
-      palette.textOnFillDark
+    const { color, haloColor } = labelOnFill(fill2);
+    const halfW = measureLegendText(text, FONT2) / 2;
+    const overflows = [y - FONT2 * 0.55, y - FONT2 * 0.1].some(
+      (sy) => fillAt(x - halfW, sy) !== fill2 || fillAt(x + halfW, sy) !== fill2
     );
-    const haloColor = color === palette.textOnFillLight ? palette.textOnFillDark : palette.textOnFillLight;
     labels.push({
       x,
       y,
       text,
       anchor: "middle",
       color,
-      halo: true,
+      halo: overflows,
       haloColor,
       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;
+    return { x: cx - w / 2, y: cy - FONT2 / 2, w, h: FONT2 };
   };
-  if (regionLabelMode === "full" || regionLabelMode === "abbrev") {
-    for (const r of regions) {
-      if (r.layer === "base" || r.label === void 0) continue;
-      const f = r.layer === "us-state" ? usLayer?.get(r.id) : worldLayer.get(r.id);
-      if (!f) continue;
+  if (showRegionLabels) {
+    const frameContainers = new Set(resolved.poiFrameContainers);
+    const entries = regions.map((r) => {
+      const isContainer = frameContainers.has(r.id);
+      if (r.layer === "base" && !isContainer || r.label === void 0)
+        return null;
+      const isUsState = r.layer === "us-state" || r.id.startsWith("US-");
+      const f = isUsState ? usLayer?.get(r.id) : worldLayer.get(r.id);
+      if (!f) return null;
       const [[x0, y0], [x1, y1]] = path.bounds(f);
-      const text = regionLabelMode === "abbrev" ? r.id.replace(/^US-/, "") : r.label;
-      if (labelW(text) > x1 - x0 || labelH > y1 - y0) continue;
-      const anchor = r.layer !== "us-state" ? WORLD_LABEL_ANCHORS[r.id] : void 0;
+      const boxW = x1 - x0;
+      const boxH = y1 - y0;
+      const abbrev = isUsState ? r.id.replace(/^US-/, "") : void 0;
+      const candidates = abbrev !== void 0 ? isCompact ? [abbrev, r.label] : [r.label, abbrev] : [r.label];
+      const anchor = !isUsState ? WORLD_LABEL_ANCHORS[r.id] : void 0;
       const c = anchor ? project(anchor[0], anchor[1]) : path.centroid(f);
-      if (!c || !Number.isFinite(c[0])) continue;
+      if (!c || !Number.isFinite(c[0])) return null;
+      return { r, c, boxW, boxH, area: boxW * boxH, candidates };
+    }).filter((e) => e !== null).sort((a, b) => b.area - a.area || a.r.lineNumber - b.r.lineNumber);
+    const placedRegionRects = [];
+    const POI_LABEL_PAD = 14;
+    const poiObstacles = pois.map((p) => ({
+      x: p.cx - p.r - POI_LABEL_PAD,
+      y: p.cy - p.r - POI_LABEL_PAD,
+      w: 2 * (p.r + POI_LABEL_PAD),
+      h: 2 * (p.r + POI_LABEL_PAD)
+    }));
+    for (const { r, c, boxW, boxH, candidates } of entries) {
+      const text = candidates.find((t) => {
+        if (labelW(t) > boxW || labelH > boxH) return false;
+        const rect = regionLabelRect(c[0], c[1], t);
+        return !placedRegionRects.some((p) => rectsOverlap(rect, p)) && !poiObstacles.some((o) => rectsOverlap(rect, o));
+      });
+      if (text === void 0) continue;
+      placedRegionRects.push(regionLabelRect(c[0], c[1], text));
       pushRegionLabel(c[0], c[1], text, r.fill, r.lineNumber);
     }
     for (const seed of insetLabelSeeds) {
-      const text = regionLabelMode === "abbrev" ? seed.iso.replace(/^US-/, "") : seed.name;
+      const text = isCompact ? seed.iso.replace(/^US-/, "") : seed.name;
       const src = regionById.get(seed.iso);
       pushRegionLabel(
         seed.x,
@@ -47020,22 +48307,26 @@ function layoutMap(resolved, data, size, opts) {
       );
     }
   }
-  const poiLabelMode = resolved.directives.poiLabels ?? "auto";
-  if (poiLabelMode !== "off") {
-    const ordered = [...pois].sort(
-      (a, b) => a.lineNumber - b.lineNumber || (a.id < b.id ? -1 : 1)
-    );
+  if (resolved.directives.noPoiLabels !== true) {
+    const ordered = [...pois].filter((p) => p.clusterId === void 0).sort((a, b) => a.lineNumber - b.lineNumber || (a.id < b.id ? -1 : 1));
     const poiById = new Map(resolved.pois.map((q) => [q.id, q]));
     const labelText = (p) => {
       const src = poiById.get(p.id);
       return src?.label ?? src?.name ?? p.id;
     };
-    const poiLabH = FONT * 1.25;
+    const poiLabH = FONT2 * 1.25;
     const labelInfo = (p) => {
       const text = labelText(p);
-      return { text, w: measureLegendText(text, FONT) };
+      return { text, w: measureLegendText(text, FONT2) };
     };
     const GAP = 3;
+    const clusterMembersById = /* @__PURE__ */ new Map();
+    for (const p of pois) {
+      if (p.clusterId === void 0) continue;
+      const arr = clusterMembersById.get(p.clusterId);
+      if (arr) arr.push(p);
+      else clusterMembersById.set(p.clusterId, [p]);
+    }
     const inlineRect = (p, w, side) => {
       switch (side) {
         case "right":
@@ -47065,11 +48356,11 @@ function layoutMap(resolved, data, size, opts) {
       const x = side === "right" ? rect.x : side === "left" ? rect.x + w : p.cx;
       labels.push({
         x,
-        y: rect.y + poiLabH / 2 + FONT / 3,
+        y: rect.y + poiLabH / 2 + FONT2 / 3,
         text,
         anchor,
         color: palette.text,
-        halo: true,
+        halo: false,
         haloColor: palette.bg,
         poiId: p.id,
         lineNumber: p.lineNumber
@@ -47080,43 +48371,60 @@ function layoutMap(resolved, data, size, opts) {
       return rect.x >= 0 && rect.x + rect.w <= width && rect.y >= 0 && rect.y + rect.h <= height && !collides(rect);
     };
     const GROUP_R = 30;
-    const groups = [];
+    const groups2 = [];
     for (const p of ordered) {
-      const near = groups.find(
+      const near = groups2.find(
         (g) => g.some((q) => Math.hypot(q.cx - p.cx, q.cy - p.cy) < GROUP_R)
       );
       if (near) near.push(p);
-      else groups.push([p]);
+      else groups2.push([p]);
     }
     const ROW_GAP2 = 3;
     const step = poiLabH + ROW_GAP2;
     const COL_GAP = 16;
-    const placeColumn = (group) => {
-      const items = group.map((p) => ({ p, ...labelInfo(p) })).sort((a, b) => a.p.cy - b.p.cy || (a.text < b.text ? -1 : 1));
+    const makeItems = (group) => group.map((p) => ({ p, ...labelInfo(p) })).sort((a, b) => a.p.cy - b.p.cy || (a.text < b.text ? -1 : 1));
+    const columnRows = (items, side) => {
       const left = Math.min(...items.map((o) => o.p.cx - o.p.r));
       const right = Math.max(...items.map((o) => o.p.cx + o.p.r));
-      const cyMid = (Math.min(...items.map((o) => o.p.cy)) + Math.max(...items.map((o) => o.p.cy))) / 2;
       const maxW = Math.max(...items.map((o) => o.w));
-      const side = right + COL_GAP + maxW <= width - 2 ? "right" : "left";
-      const colX = side === "right" ? right + COL_GAP : left - COL_GAP;
+      const cyMid = (Math.min(...items.map((o) => o.p.cy)) + Math.max(...items.map((o) => o.p.cy))) / 2;
+      const colX = side === "right" ? Math.min(right + COL_GAP, width - 2 - maxW) : Math.max(left - COL_GAP, 2 + maxW);
       const totalH = items.length * step;
       let startY = cyMid - totalH / 2;
       startY = Math.max(2, Math.min(startY, height - totalH - 2));
-      items.forEach((o, i) => {
+      return items.map((o, i) => {
         const rowCy = startY + i * step + step / 2;
-        obstacles.push({
-          x: side === "right" ? colX : colX - o.w,
-          y: rowCy - poiLabH / 2,
-          w: o.w,
-          h: poiLabH
-        });
+        return {
+          o,
+          colX,
+          rowCy,
+          rect: {
+            x: side === "right" ? colX : colX - o.w,
+            y: rowCy - poiLabH / 2,
+            w: o.w,
+            h: poiLabH
+          }
+        };
+      });
+    };
+    const wouldColumnBeClean = (items, side) => columnRows(items, side).every(
+      ({ rect }) => rect.x >= 0 && rect.x + rect.w <= width && rect.y >= 0 && rect.y + rect.h <= height && !collides(rect)
+    );
+    const defaultColumnSide = (items) => {
+      const right = Math.max(...items.map((o) => o.p.cx + o.p.r));
+      const maxW = Math.max(...items.map((o) => o.w));
+      return right + COL_GAP + maxW <= width - 2 ? "right" : "left";
+    };
+    const commitColumn = (items, side, clusterId) => {
+      for (const { o, colX, rowCy, rect } of columnRows(items, side)) {
+        obstacles.push(rect);
         labels.push({
           x: colX,
-          y: rowCy + FONT / 3,
+          y: rowCy + FONT2 / 3,
           text: o.text,
           anchor: side === "right" ? "start" : "end",
           color: palette.text,
-          halo: true,
+          halo: false,
           haloColor: palette.bg,
           leader: {
             x1: o.p.cx,
@@ -47126,24 +48434,141 @@ function layoutMap(resolved, data, size, opts) {
           },
           leaderColor: o.p.fill,
           poiId: o.p.id,
-          lineNumber: o.p.lineNumber
+          lineNumber: o.p.lineNumber,
+          ...clusterId !== void 0 && { clusterMember: clusterId }
         });
+      }
+    };
+    const pushHidden = (p) => {
+      const { text, w } = labelInfo(p);
+      let x = p.cx + p.r + GAP;
+      let anchor = "start";
+      if (x + w > width) {
+        x = p.cx - p.r - GAP - w;
+        anchor = "end";
+      }
+      const y = Math.max(0, Math.min(p.cy - poiLabH / 2, height - poiLabH));
+      labels.push({
+        x: anchor === "start" ? x : x + w,
+        y: y + poiLabH / 2 + FONT2 / 3,
+        text,
+        anchor,
+        color: palette.text,
+        halo: false,
+        haloColor: palette.bg,
+        poiId: p.id,
+        hidden: true,
+        lineNumber: p.lineNumber
       });
     };
-    for (const g of groups) {
+    for (const [clusterId, members] of clusterMembersById) {
+      if (members.length === 0) continue;
+      const items = makeItems(members);
+      const side = wouldColumnBeClean(items, "right") ? "right" : wouldColumnBeClean(items, "left") ? "left" : defaultColumnSide(items);
+      commitColumn(items, side, clusterId);
+    }
+    const maxExtent = MAX_CLUSTER_EXTENT_FACTOR * Math.min(width, height);
+    const clusterPending = [];
+    for (const g of groups2) {
+      const items = makeItems(g);
       if (g.length === 1) {
-        const p = g[0];
-        const { text, w } = labelInfo(p);
+        const { p, text, w } = items[0];
         const side = ["right", "left", "above", "below"].find(
           (s) => inlineFits(p, w, s)
         );
-        if (side) {
-          pushInline(p, text, w, side);
-          continue;
+        if (side) pushInline(p, text, w, side);
+        else commitColumn(items, defaultColumnSide(items));
+        continue;
+      }
+      const left = Math.min(...items.map((o) => o.p.cx - o.p.r));
+      const right = Math.max(...items.map((o) => o.p.cx + o.p.r));
+      const minCy = Math.min(...items.map((o) => o.p.cy));
+      const maxCy = Math.max(...items.map((o) => o.p.cy));
+      const diag = Math.hypot(right - left, maxCy - minCy);
+      if (diag > maxExtent || items.length > MAX_COLUMN_ROWS) {
+        items.forEach((o) => pushHidden(o.p));
+      } else {
+        clusterPending.push(items);
+      }
+    }
+    for (const items of clusterPending) {
+      const side = ["right", "left"].find(
+        (s) => wouldColumnBeClean(items, s)
+      );
+      if (side) commitColumn(items, side);
+      else items.forEach((o) => pushHidden(o.p));
+    }
+  }
+  if (resolved.directives.noContextLabels !== true) {
+    for (const l of labels) {
+      if (l.hidden) continue;
+      const w = labelW(l.text);
+      const x = l.anchor === "start" ? l.x : l.anchor === "end" ? l.x - w : l.x - w / 2;
+      obstacles.push({ x, y: l.y - labelH / 2, w, h: labelH });
+    }
+    for (const box of insets)
+      obstacles.push({ x: box.x, y: box.y, w: box.w, h: box.h });
+    const countryCandidates = [];
+    for (const f of worldLayer.values()) {
+      const iso = typeof f.id === "string" ? f.id : String(f.id ?? "");
+      if (!iso || regionById.has(iso)) continue;
+      let hasReferencedSub = false;
+      for (const k of regionById.keys())
+        if (k.startsWith(iso + "-")) {
+          hasReferencedSub = true;
+          break;
         }
+      if (hasReferencedSub) continue;
+      const b = path.bounds(f);
+      const [x0, y0] = b[0];
+      const [x1, y1] = b[1];
+      if (!Number.isFinite(x0) || !Number.isFinite(x1)) continue;
+      const anchorLngLat = WORLD_LABEL_ANCHORS[iso];
+      const a = anchorLngLat ? project(anchorLngLat[0], anchorLngLat[1]) : path.centroid(f);
+      countryCandidates.push({
+        name: f.properties?.name ?? iso,
+        bbox: [x0, y0, x1, y1],
+        anchor: a && Number.isFinite(a[0]) ? [a[0], a[1]] : null
+      });
+    }
+    const framedStateContainers = (resolved.poiFrameContainers ?? []).some(
+      (id) => id.startsWith("US-")
+    );
+    if (usLayer && framedStateContainers) {
+      const containerSet = new Set(resolved.poiFrameContainers);
+      for (const [iso, f] of usLayer) {
+        if (containerSet.has(iso) || regionById.has(iso)) continue;
+        const viewF = cullFeatureToView(f);
+        if (!viewF) continue;
+        const b = path.bounds(viewF);
+        const [x0, y0] = b[0];
+        const [x1, y1] = b[1];
+        if (!Number.isFinite(x0) || !Number.isFinite(x1)) continue;
+        const a = path.centroid(viewF);
+        countryCandidates.push({
+          name: f.properties?.name ?? iso,
+          bbox: [x0, y0, x1, y1],
+          anchor: a && Number.isFinite(a[0]) ? [a[0], a[1]] : null
+        });
       }
-      placeColumn(g);
     }
+    const contextLabels = placeContextLabels({
+      projection: resolved.projection,
+      dLonSpan,
+      dLatSpan,
+      width,
+      height,
+      waterBodies: data.waterBodies,
+      countries: countryCandidates,
+      palette,
+      project,
+      collides,
+      // Water labels must stay over open water — `fillAt` returns the ocean
+      // backdrop colour off-land and a region fill on-land (lakes/states count
+      // as land here, which is the safe side for an ocean name).
+      overLand: (x, y) => fillAt(x, y) !== water
+    });
+    labels.push(...contextLabels);
   }
   let legend = null;
   if (!resolved.directives.noLegend) {
@@ -47180,58 +48605,102 @@ function layoutMap(resolved, data, size, opts) {
     rivers,
     relief,
     reliefHatch,
+    coastlineStyle,
     legs,
     pois,
+    clusters,
     labels,
     legend,
     insets,
     insetRegions,
     projection,
-    stretch: stretchParams
+    stretch: stretchParams,
+    diagnostics: []
   };
 }
-var FIT_PAD, RAMP_FLOOR, R_DEFAULT, R_MIN, R_MAX, W_MIN, W_MAX, FONT, COLO_EPS, LAND_TINT_LIGHT, LAND_TINT_DARK, TAG_TINT_LIGHT, TAG_TINT_DARK, WATER_TINT_LIGHT, WATER_TINT_DARK, RIVER_WIDTH, RELIEF_MIN_AREA, RELIEF_MIN_DIM, RELIEF_HATCH_SPACING, RELIEF_HATCH_WIDTH, RELIEF_HATCH_STRENGTH, FOREIGN_TINT_LIGHT, FOREIGN_TINT_DARK, MUTED_FOREIGN_LIGHT, MUTED_FOREIGN_DARK, COLO_R, GOLDEN_ANGLE, FAN_STEP, ARC_CURVE_FRAC, usConusProjection, alaskaProjection, hawaiiProjection, INSET_STATES, US_NON_CONUS;
+var 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";
     init_color_utils();
+    init_geo();
+    init_colorize();
     init_colors();
     init_label_layout();
     init_legend_constants();
     init_title_constants();
+    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;
-    FONT = 11;
-    COLO_EPS = 1.5;
+    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;
     LAND_TINT_LIGHT = 12;
     LAND_TINT_DARK = 24;
     TAG_TINT_LIGHT = 60;
     TAG_TINT_DARK = 68;
-    WATER_TINT_LIGHT = 13;
-    WATER_TINT_DARK = 14;
+    WATER_TINT_LIGHT = 24;
+    WATER_TINT_DARK = 24;
     RIVER_WIDTH = 1.3;
+    COMPACT_WIDTH_PX = 480;
     RELIEF_MIN_AREA = 12;
     RELIEF_MIN_DIM = 2;
-    RELIEF_HATCH_SPACING = 3;
-    RELIEF_HATCH_WIDTH = 0.25;
-    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;
+    COASTLINE_THICKNESS = 14e-4;
+    COASTLINE_OPACITY_NEAR = 0.5;
+    COASTLINE_OPACITY_FAR = 0.1;
+    COASTLINE_MIN_EXTENT = 6e-4;
+    COASTLINE_MIN_EXTENT_GLOBAL = 6e-4;
+    COASTLINE_STROKE_MIX = 32;
     FOREIGN_TINT_LIGHT = 30;
     FOREIGN_TINT_DARK = 62;
     MUTED_FOREIGN_LIGHT = 28;
     MUTED_FOREIGN_DARK = 16;
     COLO_R = 9;
     GOLDEN_ANGLE = 2.399963229728653;
+    STACK_OVERLAP = 1;
+    STACK_RING_MAX = 8;
+    STACK_RING_GAP = 4;
     FAN_STEP = 16;
     ARC_CURVE_FRAC = 0.18;
+    decodeCache = /* @__PURE__ */ new WeakMap();
     usConusProjection = () => geoConicEqualArea().parallels([29.5, 45.5]).rotate([96, 0]);
     alaskaProjection = () => geoConicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]);
     hawaiiProjection = () => geoMercator();
     INSET_STATES = /* @__PURE__ */ new Set(["US-AK", "US-HI"]);
+    inAlaska = (lon, lat) => lat >= 51 && (lon <= -129 || lon >= 172);
+    inHawaii = (lon, lat) => lat >= 18 && lat <= 23 && lon >= -161 && lon <= -154;
+    FOREIGN_BORDER = {
+      CA: [
+        "US-AK",
+        "US-WA",
+        "US-ID",
+        "US-MT",
+        "US-ND",
+        "US-MN",
+        "US-MI",
+        "US-NY",
+        "US-VT",
+        "US-NH",
+        "US-ME"
+      ],
+      MX: ["US-CA", "US-AZ", "US-NM", "US-TX"]
+    };
     US_NON_CONUS = /* @__PURE__ */ new Set([
       "US-AK",
       "US-HI",
@@ -47251,6 +48720,98 @@ __export(renderer_exports16, {
   renderMapForExport: () => renderMapForExport
 });
 import * as d3Selection18 from "d3-selection";
+function pointInRing2(px, py, ring) {
+  let inside = false;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const [xi, yi] = ring[i];
+    const [xj, yj] = ring[j];
+    if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi)
+      inside = !inside;
+  }
+  return inside;
+}
+function ringToPath(ring) {
+  let d = "";
+  for (let i = 0; i < ring.length; i++)
+    d += (i ? "L" : "M") + ring[i][0] + "," + ring[i][1];
+  return d + "Z";
+}
+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);
+    for (let i = 0; i < rings.length; i++) {
+      const ring = rings[i];
+      if (ring.length < 3) continue;
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      for (const [x, y] of ring) {
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+      }
+      if (Math.max(maxX - minX, maxY - minY) < minExtent) continue;
+      const [fx, fy] = ring[0];
+      let depth = 0;
+      for (let j = 0; j < rings.length; j++)
+        if (j !== i && pointInRing2(fx, fy, rings[j])) depth++;
+      if (depth % 2 === 1) continue;
+      paths.push(...ringToCoastPaths(ring, frame));
+    }
+  }
+  return paths;
+}
+function appendWaterLines(g, outerRings, style, flatWater) {
+  const d = outerRings.join(" ");
+  const linesOuterFirst = [...style.lines].sort((a, b) => b.d - a.d);
+  for (const line12 of linesOuterFirst) {
+    g.append("path").attr("d", d).attr("stroke", style.color).attr("stroke-width", 2 * (line12.d + line12.thickness)).attr("stroke-opacity", line12.opacity).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+    g.append("path").attr("d", d).attr("stroke", flatWater).attr("stroke-width", 2 * line12.d).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+  }
+}
 function renderMap(container, resolved, data, palette, isDark, onClickItem, exportDims, activeGroupOverride) {
   d3Selection18.select(container).selectAll(":not([data-d3-tooltip])").remove();
   const width = exportDims?.width ?? container.clientWidth;
@@ -47263,6 +48824,11 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     {
       palette,
       isDark,
+      // Export-only: forward the contain-fit request from mapExportDimensions so a
+      // clamped/floored (off-aspect) export canvas letterboxes instead of
+      // stretch-distorting. The in-app preview pane passes no exportDims → unset →
+      // keeps the global stretch-fill.
+      preferContain: exportDims?.preferContain ?? false,
       ...activeGroupOverride !== void 0 && {
         activeGroup: activeGroupOverride
       }
@@ -47276,6 +48842,11 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   const gRegions = svg.append("g").attr("class", "dgmo-map-regions");
   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);
@@ -47305,28 +48876,112 @@ 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);
     }
   }
+  if (layout.coastlineStyle) {
+    const cs = layout.coastlineStyle;
+    const maskId = "dgmo-map-water-mask";
+    const mask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+    mask.append("rect").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "white");
+    const landD = layout.regions.filter((r) => r.id !== "lake").map((r) => r.d).join(" ");
+    const lakeD = layout.regions.filter((r) => r.id === "lake").map((r) => r.d).join(" ");
+    if (landD) mask.append("path").attr("d", landD).attr("fill", "black");
+    if (lakeD) mask.append("path").attr("d", lakeD).attr("fill", "white");
+    if (layout.insets.length) {
+      const reach = Math.max(0, ...cs.lines.map((l) => l.d + l.thickness));
+      for (const box of layout.insets) {
+        const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
+        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").style("pointer-events", "none").attr("mask", `url(#${maskId})`);
+    appendWaterLines(
+      gWater,
+      // 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
+    );
+    const byStroke = /* @__PURE__ */ new Map();
+    for (const r of layout.regions) {
+      const arr = byStroke.get(r.stroke);
+      if (arr) arr.push(r.d);
+      else byStroke.set(r.stroke, [r.d]);
+    }
+    for (const [stroke2, ds] of byStroke)
+      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");
     }
   }
   if (layout.insets.length) {
     const insetG = svg.append("g").attr("class", "dgmo-map-insets");
-    for (const box of layout.insets) {
+    layout.insets.forEach((box, bi) => {
       const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
       insetG.append("path").attr("d", d).attr("fill", layout.background).attr("stroke", mix(palette.text, palette.bg, 55)).attr("stroke-width", 1).attr("stroke-linejoin", "round");
-    }
+      if (box.contextLand) {
+        const clipId = `dgmo-map-inset-clip-${bi}`;
+        defs.append("clipPath").attr("id", clipId).append("path").attr("d", d);
+        insetG.append("path").attr("d", box.contextLand.d).attr("fill", box.contextLand.fill).attr("clip-path", `url(#${clipId})`);
+      }
+    });
     for (const r of layout.insetRegions) drawRegion(insetG, r, 0.5);
-  }
+    if (layout.coastlineStyle) {
+      const cs = layout.coastlineStyle;
+      const maskId = "dgmo-map-inset-water-mask";
+      const mask = defs.append("mask").attr("id", maskId).attr("maskUnits", "userSpaceOnUse").attr("x", 0).attr("y", 0).attr("width", width).attr("height", height);
+      for (const box of layout.insets) {
+        const d = box.points.map((p, i) => `${i ? "L" : "M"}${p[0]},${p[1]}`).join("") + "Z";
+        mask.append("path").attr("d", d).attr("fill", "white");
+      }
+      layout.insets.forEach((box, bi) => {
+        if (box.contextLand)
+          mask.append("path").attr("d", box.contextLand.d).attr("fill", "black").attr("clip-path", `url(#dgmo-map-inset-clip-${bi})`);
+      });
+      for (const r of layout.insetRegions)
+        if (r.id !== "lake")
+          mask.append("path").attr("d", r.d).attr("fill", "black");
+      for (const r of layout.insetRegions)
+        if (r.id === "lake")
+          mask.append("path").attr("d", r.d).attr("fill", "white");
+      const clipId = "dgmo-map-inset-water-clip";
+      const clip = defs.append("clipPath").attr("id", clipId);
+      for (const box of layout.insets) {
+        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").style("pointer-events", "none").attr("mask", `url(#${maskId})`);
+      appendWaterLines(
+        gInsetWater,
+        coastlineOuterRings(layout.insetRegions, cs.minExtent),
+        cs,
+        layout.background
+      );
+      for (const r of layout.insetRegions)
+        gInsetWater.append("path").attr("d", r.d).attr("stroke", r.stroke).attr("stroke-width", 0.5).attr("stroke-linejoin", "round");
+    }
+  }
+  const wireSync = (sel, lineNumber) => {
+    if (lineNumber < 1) return;
+    sel.attr("data-line-number", lineNumber);
+    if (onClickItem)
+      sel.style("cursor", "pointer").on("click", () => onClickItem(lineNumber));
+  };
   const gLegs = svg.append("g").attr("class", "dgmo-map-legs").attr("fill", "none");
   layout.legs.forEach((leg, i) => {
     const p = gLegs.append("path").attr("d", leg.d).attr("stroke", leg.color).attr("stroke-width", leg.width).attr("stroke-linecap", "round");
+    wireSync(p, leg.lineNumber);
     if (leg.arrow) {
       const id = `dgmo-map-arrow-${i}`;
       const s = arrowSize(leg.width);
@@ -47334,25 +48989,38 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       p.attr("marker-end", `url(#${id})`);
     }
     if (leg.label !== void 0 && leg.labelX !== void 0) {
-      emitText(
+      const lt = emitText(
         gLegs,
         leg.labelX,
         leg.labelY ?? 0,
         leg.label,
         "middle",
-        palette.textMuted,
-        haloColor,
-        true,
+        leg.labelColor ?? palette.textMuted,
+        leg.labelHaloColor ?? haloColor,
+        leg.labelHalo ?? true,
         LABEL_FONT - 1
       );
+      wireSync(lt, leg.lineNumber);
     }
   });
+  const gSpider = svg.append("g").attr("class", "dgmo-map-spider");
+  for (const cl of layout.clusters) {
+    if (!exportDims) {
+      gSpider.append("circle").attr("cx", cl.cx).attr("cy", cl.cy).attr("r", cl.hitR).attr("fill", "transparent").attr("data-cluster-hit", cl.id).style("cursor", "pointer");
+    }
+    for (const leg of cl.legs) {
+      gSpider.append("line").attr("x1", cl.cx).attr("y1", cl.cy).attr("x2", leg.x2).attr("y2", leg.y2).attr("stroke", leg.color).attr("stroke-width", 1).attr("data-cluster-deco", cl.id).style("pointer-events", "none");
+    }
+    gSpider.append("circle").attr("cx", cl.cx).attr("cy", cl.cy).attr("r", 2).attr("fill", mix(palette.textMuted, palette.bg, 40)).attr("data-cluster-deco", cl.id).style("pointer-events", "none");
+  }
   const gPois = svg.append("g").attr("class", "dgmo-map-pois");
   for (const poi of layout.pois) {
     if (poi.isOrigin) {
       gPois.append("circle").attr("cx", poi.cx).attr("cy", poi.cy).attr("r", poi.r + 3).attr("fill", "none").attr("stroke", poi.stroke).attr("stroke-width", 1.5);
     }
     const c = gPois.append("circle").attr("cx", poi.cx).attr("cy", poi.cy).attr("r", poi.r).attr("fill", poi.fill).attr("stroke", poi.stroke).attr("stroke-width", 1).attr("data-line-number", poi.lineNumber).attr("data-poi", poi.id);
+    if (poi.clusterId !== void 0)
+      c.attr("data-cluster-member", poi.clusterId);
     if (poi.tags) {
       for (const [group, value] of Object.entries(poi.tags)) {
         c.attr(`data-tag-${group.toLowerCase()}`, value.toLowerCase());
@@ -47380,12 +49048,32 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   }
   const gLabels = svg.append("g").attr("class", "dgmo-map-labels");
   for (const lab of layout.labels) {
+    if (lab.hidden) {
+      if (exportDims) continue;
+      emitText(
+        gLabels,
+        lab.x,
+        lab.y,
+        lab.text,
+        lab.anchor,
+        lab.color,
+        lab.haloColor,
+        lab.halo,
+        LABEL_FONT,
+        lab.italic,
+        lab.letterSpacing
+      ).attr("data-poi", lab.poiId ?? null).attr("data-poi-hidden", "").style("opacity", 0).style("pointer-events", "none");
+      continue;
+    }
     if (lab.leader) {
       const line12 = gLabels.append("line").attr("x1", lab.leader.x1).attr("y1", lab.leader.y1).attr("x2", lab.leader.x2).attr("y2", lab.leader.y2).attr(
         "stroke",
         lab.leaderColor ?? mix(palette.textMuted, palette.bg, 60)
       ).attr("stroke-width", lab.leaderColor ? 1 : 0.75);
       if (lab.poiId !== void 0) line12.attr("data-poi", lab.poiId);
+      if (lab.clusterMember !== void 0)
+        line12.attr("data-cluster-member", lab.clusterMember);
+      wireSync(line12, lab.lineNumber);
     }
     const t = emitText(
       gLabels,
@@ -47396,11 +49084,38 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       lab.color,
       lab.haloColor,
       lab.halo,
-      LABEL_FONT
+      LABEL_FONT,
+      lab.italic,
+      lab.letterSpacing,
+      lab.lines
     );
     if (lab.poiId !== void 0) {
       t.attr("data-poi", lab.poiId).style("cursor", "default");
     }
+    if (lab.clusterMember !== void 0) {
+      t.attr("data-cluster-member", lab.clusterMember);
+    }
+    wireSync(t, lab.lineNumber);
+  }
+  if (!exportDims && layout.clusters.length) {
+    const gBadge = svg.append("g").attr("class", "dgmo-map-cluster-badges");
+    for (const cl of layout.clusters) {
+      const g = gBadge.append("g").attr("data-cluster", cl.id).style("opacity", 0).style("pointer-events", "none");
+      const R = 9;
+      g.append("circle").attr("cx", cl.cx).attr("cy", cl.cy).attr("r", R).attr("fill", mix(palette.textMuted, palette.bg, 35)).attr("stroke", palette.textMuted).attr("stroke-width", 1);
+      g.append("circle").attr("cx", cl.cx).attr("cy", cl.cy).attr("r", R + 2.5).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1);
+      emitText(
+        g,
+        cl.cx,
+        cl.cy + 3,
+        String(cl.count),
+        "middle",
+        palette.text,
+        palette.bg,
+        false,
+        LABEL_FONT
+      );
+    }
   }
   if (layout.legend) {
     const legendY = (layout.title ? TITLE_Y + TITLE_FONT_SIZE : 0) + (layout.subtitle ? TITLE_FONT_SIZE : 0) + 8;
@@ -47437,7 +49152,7 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     svg.append("text").attr("class", "dgmo-map-title").attr("x", width / 2).attr("y", TITLE_Y).attr("text-anchor", "middle").attr("font-size", TITLE_FONT_SIZE).attr("font-weight", TITLE_FONT_WEIGHT).attr("fill", palette.text).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 4).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7).text(layout.title);
   }
   if (layout.subtitle) {
-    svg.append("text").attr("x", width / 2).attr("y", TITLE_Y + TITLE_FONT_SIZE).attr("text-anchor", "middle").attr("font-size", LABEL_FONT + 1).attr("fill", palette.textMuted).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7).text(layout.subtitle);
+    svg.append("text").attr("class", "dgmo-map-subtitle").attr("x", width / 2).attr("y", TITLE_Y + TITLE_FONT_SIZE).attr("text-anchor", "middle").attr("font-size", LABEL_FONT + 1).attr("fill", palette.textMuted).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7).text(layout.subtitle);
   }
   if (layout.caption) {
     svg.append("text").attr("x", width / 2).attr("y", height - 8).attr("text-anchor", "middle").attr("font-size", LABEL_FONT).attr("fill", palette.textMuted).attr("paint-order", "stroke fill").attr("stroke", palette.bg).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7).text(layout.caption);
@@ -47446,10 +49161,21 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
 function renderMapForExport(container, resolved, data, palette, isDark, exportDims) {
   renderMap(container, resolved, data, palette, isDark, void 0, exportDims);
 }
-function emitText(g, x, y, text, anchor, color, halo, withHalo, fontSize) {
-  const t = g.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("font-size", fontSize).attr("fill", color).text(text);
+function emitText(g, x, y, text, anchor, color, halo, withHalo, fontSize, italic, letterSpacing, lines) {
+  const t = g.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("font-size", fontSize).attr("fill", color);
+  if (lines && lines.length > 1) {
+    const lineHeight = fontSize + 2;
+    const startDy = -((lines.length - 1) / 2) * lineHeight;
+    lines.forEach((ln, i) => {
+      t.append("tspan").attr("x", x).attr("dy", i === 0 ? startDy : lineHeight).text(ln);
+    });
+  } else {
+    t.text(text);
+  }
+  if (italic) t.attr("font-style", "italic");
+  if (letterSpacing) t.attr("letter-spacing", letterSpacing);
   if (withHalo) {
-    t.attr("paint-order", "stroke fill").attr("stroke", halo).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7);
+    t.attr("paint-order", "stroke fill").attr("stroke", halo).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-opacity", 0.55);
   }
   return t;
 }
@@ -47466,6 +49192,56 @@ var init_renderer16 = __esm({
   }
 });
 
+// src/map/dimensions.ts
+var dimensions_exports = {};
+__export(dimensions_exports, {
+  mapContentAspect: () => mapContentAspect,
+  mapExportDimensions: () => mapExportDimensions
+});
+import { geoPath as geoPath2 } from "d3-geo";
+function mapContentAspect(resolved, data, ref = REF) {
+  const { projection, fitTarget } = buildMapProjection(resolved, data);
+  projection.fitSize([ref, ref], fitTarget);
+  const b = geoPath2(projection).bounds(fitTarget);
+  const w = b[1][0] - b[0][0];
+  const h = b[1][1] - b[0][1];
+  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));
+  const width = baseWidth;
+  let height = Math.round(width / clamped);
+  let chromeReserve = 0;
+  if (resolved.title && resolved.pois.length > 0) {
+    const bannerBottom = (resolved.subtitle ? TITLE_Y + TITLE_FONT_SIZE : TITLE_Y) + TITLE_FONT_SIZE / 2;
+    chromeReserve += Math.max(FIT_PAD2, bannerBottom + TITLE_GAP) - FIT_PAD2;
+  }
+  let floored = false;
+  if (height - chromeReserve < MIN_MAP_BAND) {
+    height = Math.round(chromeReserve + MIN_MAP_BAND);
+    floored = true;
+  }
+  const preferContain = clamped !== raw || floored;
+  return { width, height, preferContain };
+}
+var FIT_PAD2, TITLE_GAP, ASPECT_MAX, ASPECT_MIN, MIN_MAP_BAND, FALLBACK_ASPECT, REF;
+var init_dimensions = __esm({
+  "src/map/dimensions.ts"() {
+    "use strict";
+    init_title_constants();
+    init_layout15();
+    FIT_PAD2 = 24;
+    TITLE_GAP = 16;
+    ASPECT_MAX = 3;
+    ASPECT_MIN = 0.9;
+    MIN_MAP_BAND = 200;
+    FALLBACK_ASPECT = 1.5;
+    REF = 1e3;
+  }
+});
+
 // src/map/load-data.ts
 var load_data_exports = {};
 __export(load_data_exports, {
@@ -47524,12 +49300,17 @@ function loadMapData() {
       mountainRanges,
       naLand,
       naLakes,
+      waterBodies,
       gazetteer
     ] = await Promise.all([
+      // worldCoarse (110m) is LOAD-BEARING but NOT a render source: the world
+      // basemap renders from worldDetail (50m) at all scales (resolver pins
+      // basemaps.world = 'detail'). Coarse stays as the authoritative region
+      // name index + dominant-landmass bbox source in resolver.ts. Do not drop it.
       readJson(nb, dir, FILES.worldCoarse),
       readJson(nb, dir, FILES.worldDetail),
       readJson(nb, dir, FILES.usStates),
-      // Lakes/rivers/mountain/NA assets are optional — older bundles may predate them.
+      // Lakes/rivers/mountain/NA/water assets are optional — older bundles may predate them.
       readJson(nb, dir, FILES.lakes).catch(() => void 0),
       readJson(nb, dir, FILES.rivers).catch(() => void 0),
       readJson(nb, dir, FILES.mountainRanges).catch(
@@ -47537,6 +49318,7 @@ function loadMapData() {
       ),
       readJson(nb, dir, FILES.naLand).catch(() => void 0),
       readJson(nb, dir, FILES.naLakes).catch(() => void 0),
+      readJson(nb, dir, FILES.waterBodies).catch(() => void 0),
       readJson(nb, dir, FILES.gazetteer)
     ]);
     return validate({
@@ -47548,7 +49330,8 @@ function loadMapData() {
       ...rivers && { rivers },
       ...mountainRanges && { mountainRanges },
       ...naLand && { naLand },
-      ...naLakes && { naLakes }
+      ...naLakes && { naLakes },
+      ...waterBodies && { waterBodies }
     });
   })().catch((e) => {
     cache = void 0;
@@ -47569,6 +49352,7 @@ var init_load_data = __esm({
       mountainRanges: "mountain-ranges.json",
       naLand: "na-land.json",
       naLakes: "na-lakes.json",
+      waterBodies: "water-bodies.json",
       gazetteer: "gazetteer.json"
     };
     CANDIDATE_DIRS = [
@@ -49582,8 +51366,8 @@ function renderSequenceDiagram(container, parsed, palette, isDark, _onNavigateTo
     const lines = splitParticipantLabel(p.label, LABEL_MAX_CHARS);
     if (lines.length === 0) continue;
     const widest = Math.max(...lines.map((l) => l.length));
-    const labelWidth = widest * LABEL_CHAR_WIDTH + 10;
-    uniformBoxWidth = Math.max(uniformBoxWidth, labelWidth);
+    const labelWidth2 = widest * LABEL_CHAR_WIDTH + 10;
+    uniformBoxWidth = Math.max(uniformBoxWidth, labelWidth2);
   }
   uniformBoxWidth = Math.min(MAX_BOX_WIDTH, uniformBoxWidth);
   const effectiveGap = Math.max(PARTICIPANT_GAP, uniformBoxWidth + 30);
@@ -52282,15 +54066,15 @@ function renderArcDiagram(container, parsed, palette, _isDark, onClickItem, expo
     textColor,
     onClickItem
   );
-  const neighbors = /* @__PURE__ */ new Map();
-  for (const node of nodes) neighbors.set(node, /* @__PURE__ */ new Set());
+  const neighbors2 = /* @__PURE__ */ new Map();
+  for (const node of nodes) neighbors2.set(node, /* @__PURE__ */ new Set());
   for (const link of links) {
-    neighbors.get(link.source).add(link.target);
-    neighbors.get(link.target).add(link.source);
+    neighbors2.get(link.source).add(link.target);
+    neighbors2.get(link.target).add(link.source);
   }
   const FADE_OPACITY3 = 0.1;
   function handleMouseEnter(hovered) {
-    const connected = neighbors.get(hovered);
+    const connected = neighbors2.get(hovered);
     g.selectAll(".arc-link").each(function() {
       const el = d3Selection23.select(this);
       const src = el.attr("data-source");
@@ -53198,10 +54982,12 @@ 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 availInnerHeight = height - margin.top - margin.bottom;
+  const rowH = Math.min(ctx.structural(28), availInnerHeight / sorted.length);
+  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%");
   }
@@ -54225,7 +56011,7 @@ function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims
     8,
     Math.floor(OVERLAP_WRAP_TARGET_W / OVERLAP_CH_W)
   );
-  function wrapLabel2(text, maxChars) {
+  function wrapLabel3(text, maxChars) {
     const words = text.split(/\s+/).filter(Boolean);
     const lines = [];
     let cur = "";
@@ -54271,7 +56057,7 @@ function renderVenn(container, parsed, palette, _isDark, onClickItem, exportDims
     if (!ov.label) continue;
     const idxs = ov.sets.map((s) => vennSets.findIndex((vs) => vs.name === s));
     if (idxs.some((idx) => idx < 0)) continue;
-    const lines = wrapLabel2(ov.label, MAX_WRAP_CHARS);
+    const lines = wrapLabel3(ov.label, MAX_WRAP_CHARS);
     wrappedOverlapLabels.set(ov, lines);
     const dir = predictOverlapDirRaw(idxs);
     const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
@@ -55709,6 +57495,7 @@ async function renderForExport(content, theme, palette, viewState, options) {
     const { parseMap: parseMap2 } = await Promise.resolve().then(() => (init_parser12(), parser_exports11));
     const { resolveMap: resolveMap2 } = await Promise.resolve().then(() => (init_resolver2(), resolver_exports));
     const { renderMapForExport: renderMapForExport2 } = await Promise.resolve().then(() => (init_renderer16(), renderer_exports16));
+    const { mapExportDimensions: mapExportDimensions2 } = await Promise.resolve().then(() => (init_dimensions(), dimensions_exports));
     const effectivePalette2 = await resolveExportPalette(theme, palette);
     const mapParsed = parseMap2(content);
     let mapData = options?.mapData;
@@ -55721,14 +57508,15 @@ async function renderForExport(content, theme, palette, viewState, options) {
       }
     }
     const mapResolved = resolveMap2(mapParsed, mapData);
-    const container2 = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    const dims2 = mapExportDimensions2(mapResolved, mapData, EXPORT_WIDTH);
+    const container2 = createExportContainer(dims2.width, dims2.height);
     renderMapForExport2(
       container2,
       mapResolved,
       mapData,
       effectivePalette2,
       theme === "dark",
-      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+      dims2
     );
     return finalizeSvgExport(container2, theme, effectivePalette2);
   }
@@ -56570,7 +58358,8 @@ async function render(content, options) {
     ...options?.c4Container !== void 0 && {
       c4Container: options.c4Container
     },
-    ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup }
+    ...options?.tagGroup !== void 0 && { tagGroup: options.tagGroup },
+    ...options?.mapData !== void 0 && { mapData: options.mapData }
   });
   if (chartType === "map") {
     try {
@@ -56581,7 +58370,7 @@ async function render(content, options) {
           Promise.resolve().then(() => (init_load_data(), load_data_exports))
         ]
       );
-      const data = await loadMapData2();
+      const data = options?.mapData ?? await loadMapData2();
       diagnostics = [...resolveMap2(parseMap2(content), data).diagnostics];
     } catch {
     }
@@ -56710,6 +58499,9 @@ var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([
   "hide",
   "mode",
   "direction",
+  // Boxes-and-lines
+  "box-metric",
+  "show-values",
   // ER
   "notation",
   // Class
@@ -56749,22 +58541,20 @@ var DIRECTIVE_KEYWORDS = /* @__PURE__ */ new Set([
   // Sequence
   "activations",
   "no-activations",
-  // Map (§24B) directives
-  "region",
-  "projection",
+  // Map (§24B) directives — cosmetics on by default, bare `no-*` opt-outs
   "region-metric",
   "poi-metric",
   "flow-metric",
-  "region-labels",
-  "poi-labels",
-  "default-country",
-  "default-state",
-  "no-legend",
-  "no-insets",
-  "muted",
-  "natural",
-  "subtitle",
+  "locale",
+  "active-tag",
   "caption",
+  "no-legend",
+  "no-coastline",
+  "no-relief",
+  "no-context-labels",
+  "no-region-labels",
+  "no-poi-labels",
+  "no-colorize",
   "poi",
   "route",
   // Data charts
@@ -57057,7 +58847,11 @@ var ATTRIBUTE_KEYS = /* @__PURE__ */ new Set([
   "collapsed",
   "tech",
   "span",
-  "split"
+  "split",
+  // Map (§24B) reserved keys
+  "value",
+  "label",
+  "style"
 ]);
 function applyAttributeKeys(tokens) {
   for (let i = 0; i < tokens.length - 1; i++) {
@@ -57430,7 +59224,7 @@ pre.dgmo, code.language-dgmo, pre > code.language-dgmo,
 
 // src/auto/index.ts
 init_safe_href();
-var VERSION = "0.21.1";
+var VERSION = "0.23.0";
 var DEFAULTS = {
   theme: "auto",
   palette: "nord",