@diagrammo/dgmo 0.19.0 → 0.20.1

package/dist/index.cjs

@@ -53,6 +53,33 @@ function rectCircleOverlap(rect, circle) {
   const dy = nearestY - circle.cy;
   return dx * dx + dy * dy < circle.r * circle.r;
 }
+function segmentRectOverlap(x0, y0, x1, y1, rect) {
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  let t0 = 0;
+  let t1 = 1;
+  const edges = [
+    [-dx, x0 - rect.x],
+    [dx, rect.x + rect.w - x0],
+    [-dy, y0 - rect.y],
+    [dy, rect.y + rect.h - y0]
+  ];
+  for (const [p, q] of edges) {
+    if (p === 0) {
+      if (q < 0) return false;
+    } else {
+      const t = q / p;
+      if (p < 0) {
+        if (t > t1) return false;
+        if (t > t0) t0 = t;
+      } else {
+        if (t < t0) return false;
+        if (t < t1) t1 = t;
+      }
+    }
+  }
+  return true;
+}
 function computeQuadrantPointLabels(points, chartBounds, obstacles, pointRadius, fontSize) {
   const labelHeight = fontSize + 4;
   const stepSize = labelHeight + 2;
@@ -3256,6 +3283,57 @@ var init_legend_constants = __esm({
 });
 
 // src/utils/legend-layout.ts
+function fmtRamp(n) {
+  return Number.isInteger(n) ? String(n) : String(Math.round(n * 10) / 10);
+}
+function gradientCapsuleWidth(name, gradient) {
+  const pw = pillWidth(name);
+  const minW = measureLegendText(fmtRamp(gradient.min), LEGEND_ENTRY_FONT_SIZE);
+  const maxW = measureLegendText(fmtRamp(gradient.max), LEGEND_ENTRY_FONT_SIZE);
+  return LEGEND_CAPSULE_PAD + pw + 4 + minW + RAMP_LABEL_GAP + RAMP_LEGEND_W + RAMP_LABEL_GAP + maxW + LEGEND_CAPSULE_PAD;
+}
+function buildGradientCapsuleLayout(group, gradient) {
+  const pw = pillWidth(group.name);
+  const minText = fmtRamp(gradient.min);
+  const maxText = fmtRamp(gradient.max);
+  const minW = measureLegendText(minText, LEGEND_ENTRY_FONT_SIZE);
+  const gx = LEGEND_CAPSULE_PAD + pw + 4;
+  const minX = gx;
+  const rampX = gx + minW + RAMP_LABEL_GAP;
+  const maxX = rampX + RAMP_LEGEND_W + RAMP_LABEL_GAP;
+  const width = gradientCapsuleWidth(group.name, gradient);
+  return {
+    groupName: group.name,
+    x: 0,
+    y: 0,
+    width,
+    height: LEGEND_HEIGHT,
+    pill: {
+      groupName: group.name,
+      x: LEGEND_CAPSULE_PAD,
+      y: LEGEND_CAPSULE_PAD,
+      width: pw,
+      height: LEGEND_HEIGHT - LEGEND_CAPSULE_PAD * 2,
+      isActive: true
+    },
+    entries: [],
+    gradient: {
+      rampX,
+      rampY: (LEGEND_HEIGHT - RAMP_LEGEND_H) / 2,
+      rampW: RAMP_LEGEND_W,
+      rampH: RAMP_LEGEND_H,
+      min: gradient.min,
+      max: gradient.max,
+      minText,
+      minX,
+      maxText,
+      maxX,
+      textY: LEGEND_HEIGHT / 2,
+      hue: gradient.hue,
+      base: gradient.base
+    }
+  };
+}
 function pillWidth(name) {
   return measureLegendText(name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
 }
@@ -3398,7 +3476,7 @@ function computeLegendLayout(config, state, containerWidth) {
     };
   }
   const controlsGroupLayout = isExport ? void 0 : buildControlsGroupLayout(config, state);
-  const visibleGroups = config.showEmptyGroups ? groups : groups.filter((g) => g.entries.length > 0);
+  const visibleGroups = config.showEmptyGroups ? groups : groups.filter((g) => g.entries.length > 0 || !!g.gradient);
   if (visibleGroups.length === 0 && (!configControls || configControls.length === 0) && !controlsGroupLayout) {
     return {
       height: 0,
@@ -3477,7 +3555,7 @@ function computeLegendLayout(config, state, containerWidth) {
         groupAvailW,
         config.capsulePillAddonWidth ?? 0
       );
-    } else if (!activeGroupName) {
+    } else if (!activeGroupName || config.showInactivePills) {
       const pw = pillWidth(g.name);
       pills.push({
         groupName: g.name,
@@ -3515,6 +3593,7 @@ function computeLegendLayout(config, state, containerWidth) {
   };
 }
 function buildCapsuleLayout(group, containerWidth, addonWidth = 0) {
+  if (group.gradient) return buildGradientCapsuleLayout(group, group.gradient);
   const pw = pillWidth(group.name);
   const info = capsuleWidth(
     group.name,
@@ -3685,7 +3764,7 @@ function getMaxLegendReservedHeight(config, containerWidth) {
   }
   return max;
 }
-var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP;
+var CONTROL_PILL_PAD, CONTROL_FONT_SIZE, CONTROL_ICON_GAP, CONTROL_GAP, RAMP_LEGEND_W, RAMP_LEGEND_H, RAMP_LABEL_GAP;
 var init_legend_layout = __esm({
   "src/utils/legend-layout.ts"() {
     "use strict";
@@ -3694,6 +3773,9 @@ var init_legend_layout = __esm({
     CONTROL_FONT_SIZE = 11;
     CONTROL_ICON_GAP = 4;
     CONTROL_GAP = 8;
+    RAMP_LEGEND_W = 80;
+    RAMP_LEGEND_H = 8;
+    RAMP_LABEL_GAP = 6;
   }
 });
 
@@ -3781,6 +3863,16 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, _isDark, c
   g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", palette.bg);
   g.append("rect").attr("x", pill.x).attr("y", pill.y).attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", "none").attr("stroke", pillBorder).attr("stroke-width", 0.75);
   g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.text).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(capsule.groupName);
+  if (capsule.gradient) {
+    const gr = capsule.gradient;
+    const gradId = `dgmo-legend-ramp-${capsule.groupName.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
+    const def = g.append("defs").append("linearGradient").attr("id", gradId);
+    def.append("stop").attr("offset", "0%").attr("stop-color", mix(gr.hue, gr.base, 15));
+    def.append("stop").attr("offset", "100%").attr("stop-color", gr.hue);
+    g.append("text").attr("x", gr.minX).attr("y", gr.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(gr.minText);
+    g.append("rect").attr("class", "dgmo-legend-gradient-ramp").attr("data-ramp-min", gr.min).attr("data-ramp-max", gr.max).attr("x", gr.rampX).attr("y", gr.rampY).attr("width", gr.rampW).attr("height", gr.rampH).attr("rx", 2).attr("fill", `url(#${gradId})`);
+    g.append("text").attr("x", gr.maxX).attr("y", gr.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(gr.maxText);
+  }
   for (const entry of capsule.entries) {
     const entryG = g.append("g").attr("data-legend-entry", entry.value.toLowerCase()).attr("data-series-name", entry.value).style("cursor", "pointer");
     entryG.append("circle").attr("cx", entry.dotCx).attr("cy", entry.dotCy).attr("r", LEGEND_DOT_R).attr("fill", entry.color);
@@ -11254,23 +11346,22 @@ function parseC4(content, palette) {
       }
     }
     const parent = findParentElement(indent, stack);
-    if (parent) {
-      const descResult = tryStripDescriptionKeyword(trimmed);
+    const descResult = tryStripDescriptionKeyword(trimmed);
+    if (parent && descResult.isKeyword) {
       if (descResult.needsColon) {
         pushError(
           lineNumber,
-          `Use "description: ${descResult.text}" \u2014 colon is required.`,
+          `Use "description: ${descResult.text}" \u2014 bare "description" is deprecated.`,
           "warning"
         );
       }
-      const descText = descResult.isKeyword ? descResult.text : trimmed;
       let desc = elementDescription.get(parent.element);
       if (!desc) {
         desc = [];
         elementDescription.set(parent.element, desc);
         parent.element.description = desc;
       }
-      desc.push(descText);
+      desc.push(descResult.text);
     } else {
       pushError(lineNumber, `Unexpected content: "${trimmed}"`);
     }
@@ -11737,7 +11828,7 @@ function parseSitemap(content, palette) {
         if (descResult.needsColon) {
           pushWarning(
             lineNumber,
-            `Use "description: ${descResult.text}" \u2014 colon is required.`
+            `Use "description: ${descResult.text}" \u2014 bare "description" is deprecated.`
           );
         }
         const parent = findParentNode(indent, indentStack);
@@ -12565,23 +12656,22 @@ function parseInfra(content) {
         }
       }
       const descResult = tryStripDescriptionKeyword(trimmed);
-      if (descResult.isKeyword && currentNode.isEdge) {
-        continue;
-      }
-      if (!currentNode.isEdge) {
+      if (descResult.isKeyword) {
+        if (currentNode.isEdge) {
+          continue;
+        }
         if (descResult.needsColon) {
           warn(
             lineNumber,
-            `Use "description: ${descResult.text}" \u2014 colon is required.`
+            `Use "description: ${descResult.text}" \u2014 bare "description" is deprecated.`
           );
         }
-        const descText = descResult.isKeyword ? descResult.text : trimmed;
-        pushDescription(currentNode, descText);
+        pushDescription(currentNode, descResult.text);
         continue;
       }
       warn(
         lineNumber,
-        `Unexpected line inside component '${currentNode.label}'. Expected a property (key: value), connection (-> Target), or description text.`
+        `Unexpected line inside component '${currentNode.label}'. Expected a property (key: value), connection (-> Target), or a description (description: text).`
       );
       continue;
     }
@@ -15718,9 +15808,6 @@ function parseMap(content) {
   const pushWarning = (line12, message) => {
     diagnostics.push(makeDgmoError(line12, message, "warning"));
   };
-  const pushInfo = (line12, message) => {
-    diagnostics.push(makeDgmoError(line12, message, "warning"));
-  };
   const lines = content.split("\n");
   let firstIdx = 0;
   while (firstIdx < lines.length) {
@@ -15850,10 +15937,15 @@ function parseMap(content) {
         break;
       case "projection":
         dup(d.projection);
-        if (value && !["natural-earth", "albers-usa", "mercator"].includes(value))
+        if (value && ![
+          "equirectangular",
+          "natural-earth",
+          "albers-usa",
+          "mercator"
+        ].includes(value))
           pushWarning(
             line12,
-            `Unknown projection "${value}" (expected natural-earth | albers-usa | mercator).`
+            `Unknown projection "${value}" (expected equirectangular | natural-earth | albers-usa | mercator).`
           );
         d.projection = value;
         break;
@@ -15992,17 +16084,21 @@ function parseMap(content) {
         scoreNum = void 0;
       }
     }
-    if (scoreNum !== void 0 && Object.keys(tags).length)
-      pushInfo(
-        line12,
-        "A region has both `score:` and a tag value \u2014 v1 renders only the score (bivariate is a future seam)."
-      );
+    let regionName = split.name;
+    let regionScope;
+    const rToks = regionName.split(/\s+/);
+    const rLast = rToks[rToks.length - 1];
+    if (rToks.length > 1 && SCOPE_RE.test(rLast)) {
+      regionName = rToks.slice(0, -1).join(" ");
+      regionScope = rLast;
+    }
     const region = {
-      name: split.name,
+      name: regionName,
       tags,
       meta,
       lineNumber: line12
     };
+    if (regionScope !== void 0) region.scope = regionScope;
     if (scoreNum !== void 0) region.score = scoreNum;
     regions.push(region);
   }
@@ -17126,7 +17222,7 @@ function parseMindmap(content, palette) {
         if (descResult.needsColon) {
           pushWarning(
             lineNumber,
-            `Use "description: ${descResult.text}" \u2014 colon is required.`
+            `Use "description: ${descResult.text}" \u2014 bare "description" is deprecated.`
           );
         }
         const parent = findMetadataParent2(indent, indentStack);
@@ -18914,7 +19010,7 @@ function parseJourneyMap(content, palette) {
         if (descResult.needsColon) {
           warn(
             lineNumber,
-            `Use "description: ${descResult.text}" \u2014 colon is required.`
+            `Use "description: ${descResult.text}" \u2014 bare "description" is deprecated.`
           );
         }
         currentStep.description = descResult.text;
@@ -45503,7 +45599,9 @@ function resolveMap(parsed, data) {
   const usScoped = parsed.directives.region === "us-states" || parsed.directives.defaultCountry?.toUpperCase() === "US" || parsed.regions.some((r) => {
     const f = fold(r.name);
     return usStateIndex.has(f) && !countryIndex.has(f);
-  }) || parsed.pois.some(
+  }) || parsed.regions.some(
+    (r) => r.scope === "US" || r.scope?.startsWith("US-")
+  ) || parsed.pois.some(
     (p) => p.pos.kind === "name" && p.pos.scope?.startsWith("US-")
   );
   const regions = [];
@@ -45515,7 +45613,30 @@ function resolveMap(parsed, data) {
     const inCountry = countryIndex.get(f) ?? (REGION_ALIASES[f] ? countryIndex.get(REGION_ALIASES[f]) : void 0);
     const inState = usStateIndex.get(f);
     let chosen = null;
-    if (inCountry && inState) {
+    const scope = r.scope;
+    if (scope) {
+      const wantsState = scope === "US" || scope.startsWith("US-");
+      if (wantsState && inState) {
+        if (scope.startsWith("US-") && inState.id !== scope) {
+          err(
+            r.lineNumber,
+            `No subdivision "${r.name}" in scope ${scope} (it is ${inState.id}).`,
+            "E_MAP_SCOPE_MISS"
+          );
+          continue;
+        }
+        chosen = { ...inState, layer: "us-state" };
+      } else if (!wantsState && inCountry) {
+        chosen = { ...inCountry, layer: "country" };
+      } else {
+        err(
+          r.lineNumber,
+          `No region "${r.name}" found in scope ${scope}.`,
+          "E_MAP_SCOPE_MISS"
+        );
+        continue;
+      }
+    } else if (inCountry && inState) {
       if (usScoped) {
         chosen = { ...inState, layer: "us-state" };
       } else {
@@ -45523,7 +45644,7 @@ function resolveMap(parsed, data) {
       }
       warn(
         r.lineNumber,
-        `"${r.name}" is both a country and a US state \u2014 resolved as ${chosen.layer} (${chosen.id}).`,
+        `"${r.name}" is both a country and a US state \u2014 resolved as ${chosen.layer} (${chosen.id}). Pin it with an ISO code (${inState.id} / ${inCountry.id}) or name + scope ("${r.name} US" / "${r.name} ${inCountry.id}").`,
         "W_MAP_REGION_AMBIGUOUS"
       );
     } else if (inState) {
@@ -45695,9 +45816,17 @@ function resolveMap(parsed, data) {
     };
     registerPoi(id, poi, p.lineNumber);
   }
+  const declaredByName = /* @__PURE__ */ new Map();
+  for (const p of pois) {
+    const fn = p.name ? fold(p.name) : void 0;
+    if (fn && fn !== p.id && !declaredByName.has(fn))
+      declaredByName.set(fn, p.id);
+  }
   const resolveEndpoint2 = (ref, line12) => {
     const f = fold(ref);
     if (registry.has(f)) return f;
+    const aliased = declaredByName.get(f);
+    if (aliased) return aliased;
     const got = lookupName(ref, void 0, line12, inferredCountry, true);
     if (got.kind !== "ok") return null;
     noteCountry(got.iso);
@@ -45777,23 +45906,29 @@ function resolveMap(parsed, data) {
     [-180, -85],
     [180, 85]
   ];
-  const extent2 = unioned ? pad(unioned, PAD_FRACTION) : DEFAULT_EXTENT;
+  let extent2 = unioned ? pad(unioned, PAD_FRACTION) : DEFAULT_EXTENT;
   const lonSpan = extent2[1][0] - extent2[0][0];
   const latSpan = extent2[1][1] - extent2[0][1];
   const span = Math.max(lonSpan, latSpan);
   const usDominant = (inferredCountry === "US" || subdivisions.includes("us-states")) && !regions.some((r) => r.layer === "country" && r.iso !== "US") && !anyNonUsPoi;
   let projection;
   const override = parsed.directives.projection;
-  if (override === "natural-earth" || override === "albers-usa" || override === "mercator") {
+  if (override === "equirectangular" || override === "natural-earth" || override === "albers-usa" || override === "mercator") {
     projection = override;
   } else if (usDominant) {
     projection = "albers-usa";
   } else if (span > WORLD_SPAN) {
-    projection = "natural-earth";
+    projection = "equirectangular";
   } else if (span < MERCATOR_MAX_SPAN) {
     projection = "mercator";
   } else {
-    projection = "natural-earth";
+    projection = "equirectangular";
+  }
+  if (lonSpan >= 180) {
+    extent2 = [
+      [-180, Math.min(extent2[0][1], WORLD_LAT_SOUTH)],
+      [180, Math.max(extent2[1][1], WORLD_LAT_NORTH)]
+    ];
   }
   result.regions = regions;
   result.pois = pois;
@@ -45841,7 +45976,7 @@ function firstError(diags) {
   const e = diags.find((d) => d.severity === "error");
   return e ? formatDgmoError(e) : null;
 }
-var WORLD_SPAN, MERCATOR_MAX_SPAN, PAD_FRACTION, REGION_ALIASES;
+var WORLD_SPAN, MERCATOR_MAX_SPAN, PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, REGION_ALIASES;
 var init_resolver2 = __esm({
   "src/map/resolver.ts"() {
     "use strict";
@@ -45850,6 +45985,8 @@ var init_resolver2 = __esm({
     WORLD_SPAN = 90;
     MERCATOR_MAX_SPAN = 25;
     PAD_FRACTION = 0.05;
+    WORLD_LAT_SOUTH = -58;
+    WORLD_LAT_NORTH = 78;
     REGION_ALIASES = {
       // Common everyday names → the Natural-Earth display name actually shipped.
       "united states": "united states of america",
@@ -45879,14 +46016,22 @@ var load_data_exports = {};
 __export(load_data_exports, {
   loadMapData: () => loadMapData
 });
-async function readJson(dir, name) {
-  return JSON.parse(await (0, import_promises.readFile)((0, import_node_path.resolve)(dir, name), "utf8"));
+async function loadNodeBuiltins() {
+  const [{ readFile }, { fileURLToPath }, { dirname, resolve }] = await Promise.all([
+    import("fs/promises"),
+    import("url"),
+    import("path")
+  ]);
+  return { readFile, fileURLToPath, dirname, resolve };
+}
+async function readJson(nb, dir, name) {
+  return JSON.parse(await nb.readFile(nb.resolve(dir, name), "utf8"));
 }
-async function firstExistingDir(baseDir) {
+async function firstExistingDir(nb, baseDir) {
   for (const rel of CANDIDATE_DIRS) {
-    const dir = (0, import_node_path.resolve)(baseDir, rel);
+    const dir = nb.resolve(baseDir, rel);
     try {
-      await (0, import_promises.readFile)((0, import_node_path.resolve)(dir, FILES.gazetteer), "utf8");
+      await nb.readFile(nb.resolve(dir, FILES.gazetteer), "utf8");
       return dir;
     } catch {
     }
@@ -45902,10 +46047,10 @@ function validate(data) {
   }
   return data;
 }
-function moduleBaseDir() {
+function moduleBaseDir(nb) {
   try {
     const url = import_meta.url;
-    if (url) return (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(url));
+    if (url) return nb.dirname(nb.fileURLToPath(url));
   } catch {
   }
   if (typeof __dirname !== "undefined") return __dirname;
@@ -45913,32 +46058,57 @@ function moduleBaseDir() {
 }
 function loadMapData() {
   cache ??= (async () => {
-    const dir = await firstExistingDir(moduleBaseDir());
-    const [worldCoarse, worldDetail, usStates, gazetteer] = await Promise.all([
-      readJson(dir, FILES.worldCoarse),
-      readJson(dir, FILES.worldDetail),
-      readJson(dir, FILES.usStates),
-      readJson(dir, FILES.gazetteer)
+    const nb = await loadNodeBuiltins();
+    const dir = await firstExistingDir(nb, moduleBaseDir(nb));
+    const [
+      worldCoarse,
+      worldDetail,
+      usStates,
+      lakes,
+      rivers,
+      naLand,
+      naLakes,
+      gazetteer
+    ] = await Promise.all([
+      readJson(nb, dir, FILES.worldCoarse),
+      readJson(nb, dir, FILES.worldDetail),
+      readJson(nb, dir, FILES.usStates),
+      // Lakes/rivers/NA 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.naLand).catch(() => void 0),
+      readJson(nb, dir, FILES.naLakes).catch(() => void 0),
+      readJson(nb, dir, FILES.gazetteer)
     ]);
-    return validate({ worldCoarse, worldDetail, usStates, gazetteer });
+    return validate({
+      worldCoarse,
+      worldDetail,
+      usStates,
+      gazetteer,
+      ...lakes && { lakes },
+      ...rivers && { rivers },
+      ...naLand && { naLand },
+      ...naLakes && { naLakes }
+    });
   })().catch((e) => {
     cache = void 0;
     throw e;
   });
   return cache;
 }
-var import_promises, import_node_url, import_node_path, import_meta, FILES, CANDIDATE_DIRS, cache;
+var import_meta, FILES, CANDIDATE_DIRS, cache;
 var init_load_data = __esm({
   "src/map/load-data.ts"() {
     "use strict";
-    import_promises = require("fs/promises");
-    import_node_url = require("url");
-    import_node_path = require("path");
     import_meta = {};
     FILES = {
       worldCoarse: "world-coarse.json",
       worldDetail: "world-detail.json",
       usStates: "us-states.json",
+      lakes: "lakes.json",
+      rivers: "rivers.json",
+      naLand: "na-land.json",
+      naLakes: "na-lakes.json",
       gazetteer: "gazetteer.json"
     };
     CANDIDATE_DIRS = [
@@ -45966,36 +46136,67 @@ function decodeLayer(topo) {
 function projectionFor(family) {
   switch (family) {
     case "albers-usa":
-      return (0, import_d3_geo2.geoAlbersUsa)();
+      return usConusProjection();
     case "mercator":
       return (0, import_d3_geo2.geoMercator)();
     case "natural-earth":
-    default:
       return (0, import_d3_geo2.geoNaturalEarth1)();
+    case "equirectangular":
+    default:
+      return (0, import_d3_geo2.geoEquirectangular)();
   }
 }
+function mapBackgroundColor(palette) {
+  return mix(palette.colors.blue, palette.bg, WATER_TINT);
+}
 function layoutMap(resolved, data, size, opts) {
   const { palette, isDark } = opts;
   const { width, height } = size;
-  const worldTopo = resolved.basemaps.world === "detail" ? data.worldDetail : data.worldCoarse;
+  const wantsUsStates = resolved.basemaps.subdivisions.includes("us-states");
+  const usCrisp = resolved.projection === "albers-usa" && wantsUsStates && !!data.naLand;
+  const worldTopo = usCrisp ? data.naLand : resolved.basemaps.world === "detail" ? data.worldDetail : data.worldCoarse;
   const worldLayer = decodeLayer(worldTopo);
-  const usLayer = resolved.basemaps.subdivisions.includes("us-states") ? decodeLayer(data.usStates) : null;
-  const neutralFill = mix(palette.border, palette.bg, 32);
-  const regionStroke = mix(palette.border, palette.bg, 70);
+  const usLayer = wantsUsStates ? decodeLayer(data.usStates) : null;
+  const landTint = isDark ? LAND_TINT_DARK : LAND_TINT_LIGHT;
+  const neutralFill = mix(palette.colors.green, palette.bg, landTint);
+  const water = mapBackgroundColor(palette);
+  const usContext = usLayer !== null;
+  const foreignFill = mix(
+    palette.colors.gray,
+    palette.bg,
+    isDark ? FOREIGN_TINT_DARK : FOREIGN_TINT_LIGHT
+  );
+  const regionStroke = isDark ? mix(palette.bg, palette.text, 78) : mix(palette.text, palette.bg, 78);
   const scores = resolved.regions.filter((r) => r.score !== void 0).map((r) => r.score);
   const scaleOverride = resolved.directives.scale;
   const rampMin = scaleOverride ? scaleOverride.min : Math.min(...scores);
   const rampMax = scaleOverride ? scaleOverride.max : Math.max(...scores);
-  const rampHue = palette.primary;
+  const rampHue = palette.colors.red;
   const hasRamp = scores.length > 0;
-  const activeGroup = resolveActiveTagGroup(
-    resolved.tagGroups,
-    resolved.directives.activeTag
-  );
+  const SCORE_NAME = hasRamp ? resolved.directives.metric?.trim() || "Score" : null;
+  const matchColorGroup = (v) => {
+    const lv = v.trim().toLowerCase();
+    if (lv === "none") return null;
+    if (SCORE_NAME && (lv === "score" || lv === SCORE_NAME.toLowerCase()))
+      return SCORE_NAME;
+    const tg = resolved.tagGroups.find((g) => g.name.toLowerCase() === lv);
+    return tg ? tg.name : v;
+  };
+  const override = opts.activeGroup;
+  let activeGroup;
+  if (override !== void 0) {
+    activeGroup = override === null ? null : matchColorGroup(override);
+  } else if (resolved.directives.activeTag !== void 0) {
+    activeGroup = matchColorGroup(resolved.directives.activeTag);
+  } else {
+    activeGroup = SCORE_NAME ?? (resolved.tagGroups.length > 0 ? resolved.tagGroups[0].name : null);
+  }
+  const activeIsScore = SCORE_NAME !== null && activeGroup === SCORE_NAME;
+  const rampBase = isDark ? mix(palette.surface, palette.text, 28) : palette.bg;
   const fillForScore = (s) => {
     const t = rampMax > rampMin ? (s - rampMin) / (rampMax - rampMin) : 1;
     const pct = RAMP_FLOOR + Math.max(0, Math.min(1, t)) * (100 - RAMP_FLOOR);
-    return mix(rampHue, isDark ? palette.surface : palette.bg, pct);
+    return mix(rampHue, rampBase, pct);
   };
   const tagFill = (tags, groupName) => {
     if (!groupName) return null;
@@ -46009,40 +46210,40 @@ function layoutMap(resolved, data, size, opts) {
       (e) => e.value.toLowerCase() === val.toLowerCase()
     );
     if (!entry?.color) return null;
-    return shapeFill(palette, entry.color, isDark);
+    return mix(
+      entry.color,
+      palette.bg,
+      isDark ? TAG_TINT_DARK : TAG_TINT_LIGHT
+    );
+  };
+  const regionFill = (r) => {
+    if (activeIsScore) {
+      return r.score !== void 0 ? fillForScore(r.score) : neutralFill;
+    }
+    return tagFill(r.tags, activeGroup) ?? neutralFill;
   };
   const regionById = new Map(resolved.regions.map((r) => [r.iso, r]));
-  const regionFeatures = [];
-  for (const r of resolved.regions) {
-    const f = r.layer === "us-state" ? usLayer?.get(r.iso) : worldLayer.get(r.iso);
-    if (f) regionFeatures.push(f);
-  }
-  const extentCorners = () => {
+  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: [
-          [w, s],
-          [e, s],
-          [e, n],
-          [w, n]
-        ]
-      }
+      geometry: { type: "MultiPoint", coordinates: coords }
     };
   };
   let fitFeatures;
-  if (resolved.projection === "albers-usa") {
-    if (regionFeatures.length > 0) fitFeatures = regionFeatures;
-    else if (usLayer) fitFeatures = [...usLayer.values()];
-    else {
-      const us = worldLayer.get("US");
-      fitFeatures = us ? [us] : [...worldLayer.values()];
-    }
+  if (resolved.projection === "albers-usa" && usLayer) {
+    fitFeatures = [...usLayer.entries()].filter(([iso]) => !US_NON_CONUS.has(iso)).map(([, f]) => f);
   } else {
-    fitFeatures = [extentCorners()];
+    fitFeatures = [extentOutline()];
   }
   const fitTarget = { type: "FeatureCollection", features: fitFeatures };
   const projection = projectionFor(resolved.projection);
@@ -46051,32 +46252,311 @@ function layoutMap(resolved, data, size, opts) {
     if (centerLon > 180) centerLon -= 360;
     projection.rotate([-centerLon, 0]);
   }
-  projection.fitExtent(
+  const TITLE_GAP = 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);
+  }
+  const fitBox = [
+    [FIT_PAD, topPad],
     [
-      [FIT_PAD, FIT_PAD],
-      [
-        Math.max(FIT_PAD + 1, width - FIT_PAD),
-        Math.max(FIT_PAD + 1, height - FIT_PAD)
-      ]
-    ],
-    fitTarget
-  );
-  const path = (0, import_d3_geo2.geoPath)(projection);
-  const project = (lon, lat) => projection([lon, lat]) ?? null;
+      Math.max(FIT_PAD + 1, width - FIT_PAD),
+      Math.max(topPad + 1, height - FIT_PAD)
+    ]
+  ];
+  projection.fitExtent(fitBox, fitTarget);
+  const fitGB = (0, import_d3_geo2.geoBounds)(fitTarget);
+  const fitIsGlobal = fitGB[1][0] - fitGB[0][0] >= 270 || fitGB[1][1] - fitGB[0][1] >= 130;
+  let path;
+  let project;
+  if (fitIsGlobal) {
+    const cb = (0, import_d3_geo2.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 stretch = (x, y) => [
+      ox + (x - bx0) * sx,
+      oy + (y - by0) * sy
+    ];
+    const baseProjection = projection;
+    const tx = (0, import_d3_geo2.geoTransform)({
+      point(x, y) {
+        const [px, py] = stretch(x, y);
+        this.stream.point(px, py);
+      }
+    });
+    path = (0, import_d3_geo2.geoPath)({
+      stream: (s) => baseProjection.stream(
+        tx.stream(s)
+      )
+    });
+    project = (lon, lat) => {
+      const p = baseProjection([lon, lat]);
+      return p ? stretch(p[0], p[1]) : null;
+    };
+  } else {
+    path = (0, import_d3_geo2.geoPath)(projection);
+    project = (lon, lat) => projection([lon, lat]) ?? null;
+  }
+  const insets = [];
+  const insetRegions = [];
+  const insetLabelSeeds = [];
+  if (resolved.projection === "albers-usa" && usLayer) {
+    const PAD = 8;
+    const GAP = 12;
+    const yB = height - FIT_PAD;
+    const BW = 8;
+    const coast = /* @__PURE__ */ new Map();
+    const addPt = (lon, lat) => {
+      const p = projection([lon, lat]);
+      if (!p) return;
+      const bi = Math.floor(p[0] / BW);
+      const cur = coast.get(bi);
+      if (cur === void 0 || p[1] > cur) coast.set(bi, p[1]);
+    };
+    const walk = (co) => {
+      if (Array.isArray(co) && typeof co[0] === "number")
+        addPt(co[0], co[1]);
+      else if (Array.isArray(co)) for (const c of co) walk(c);
+    };
+    for (const [iso, f] of usLayer) {
+      if (US_NON_CONUS.has(iso)) continue;
+      walk(f.geometry.coordinates);
+    }
+    const at = (x) => {
+      const bi = Math.floor(x / BW);
+      let y = -Infinity;
+      for (let k = bi - 1; k <= bi + 1; k++) {
+        const v = coast.get(k);
+        if (v !== void 0 && v > y) y = v;
+      }
+      return y;
+    };
+    const coastTop = (x0, xr) => {
+      const n = 24;
+      const pts = [];
+      let maxY = -Infinity;
+      for (let i = 0; i <= n; i++) {
+        const x = x0 + (xr - x0) * i / n;
+        const y = at(x);
+        if (y > -Infinity) {
+          pts.push([x, y]);
+          if (y > maxY) maxY = y;
+        }
+      }
+      if (pts.length === 0) return () => yB - height * 0.42;
+      let m = 0;
+      if (pts.length >= 2) {
+        let sx = 0, sy = 0, sxx = 0, sxy = 0;
+        for (const [x, y] of pts) {
+          sx += x;
+          sy += y;
+          sxx += x * x;
+          sxy += x * y;
+        }
+        const den = pts.length * sxx - sx * sx;
+        if (den !== 0) m = (pts.length * sxy - sx * sy) / den;
+      }
+      m = Math.max(-0.35, Math.min(0.35, m));
+      let c = -Infinity;
+      for (const [x, y] of pts) {
+        const need = y - m * x + GAP;
+        if (need > c) c = need;
+      }
+      return (x) => m * x + c;
+    };
+    const placeInset = (iso, proj, boxX, iwReq) => {
+      const f = usLayer.get(iso);
+      if (!f) return boxX;
+      const x0 = boxX;
+      const iw = Math.min(iwReq, width - FIT_PAD - x0 - 2 * PAD);
+      if (iw < 24) return boxX;
+      const xr = x0 + iw + 2 * PAD;
+      const top = coastTop(x0, xr);
+      const yL = top(x0);
+      const yR = top(xr);
+      proj.fitWidth(iw, f);
+      const bb = (0, import_d3_geo2.geoPath)(proj).bounds(f);
+      const sh = Number.isFinite(bb[0][0]) ? bb[1][1] - bb[0][1] : iw;
+      const needH = sh + 2 * PAD;
+      let topFit = Math.max(yL, yR);
+      const bottom = Math.min(topFit + needH, yB);
+      if (bottom - topFit < needH) topFit = bottom - needH;
+      const lift = topFit - Math.max(yL, yR);
+      const topL = yL + lift;
+      const topR = yR + lift;
+      proj.fitExtent(
+        [
+          [x0 + PAD, topFit + PAD],
+          [xr - PAD, bottom - PAD]
+        ],
+        f
+      );
+      const d = (0, import_d3_geo2.geoPath)(proj)(f) ?? "";
+      if (!d) return xr;
+      const r = regionById.get(iso);
+      let fill2 = neutralFill;
+      let lineNumber = -1;
+      if (r?.layer === "us-state") {
+        fill2 = regionFill(r);
+        lineNumber = r.lineNumber;
+      }
+      insets.push({
+        x: x0,
+        y: Math.min(topL, topR),
+        w: xr - x0,
+        h: bottom - Math.min(topL, topR),
+        points: [
+          [x0, topL],
+          [xr, topR],
+          [xr, bottom],
+          [x0, bottom]
+        ]
+      });
+      insetRegions.push({
+        id: iso,
+        d,
+        fill: fill2,
+        stroke: regionStroke,
+        lineNumber,
+        layer: "us-state",
+        ...r?.score !== void 0 && { score: r.score },
+        ...r && Object.keys(r.tags).length > 0 && { tags: r.tags }
+      });
+      const ctr = (0, import_d3_geo2.geoPath)(proj).centroid(f);
+      if (Number.isFinite(ctr[0])) {
+        const name = f.properties?.name ?? iso;
+        insetLabelSeeds.push({ x: ctr[0], y: ctr[1], iso, name, lineNumber });
+      }
+      return xr;
+    };
+    const akRight = placeInset(
+      "US-AK",
+      alaskaProjection(),
+      FIT_PAD,
+      width * 0.15
+    );
+    placeInset("US-HI", hawaiiProjection(), akRight + 24, width * 0.1);
+  }
+  const conusFit = resolved.projection === "albers-usa" && !!usLayer;
+  const cullExtent = conusFit ? (0, import_d3_geo2.geoBounds)(fitTarget) : resolved.extent;
+  const [[exW, exS], [exE, exN]] = cullExtent;
+  const lonSpan = exE - exW;
+  const latSpan = exN - exS;
+  const isGlobalView = lonSpan >= 270 || latSpan >= 130;
+  const padLon = Math.max(8, lonSpan * 0.35);
+  const padLat = Math.max(8, latSpan * 0.35);
+  const vW = exW - padLon;
+  const vE = exE + padLon;
+  const vS = exS - padLat;
+  const vN = exN + padLat;
+  const vLonCenter = (exW + exE) / 2;
+  const normLon = (lon) => {
+    let L = lon;
+    while (L < vLonCenter - 180) L += 360;
+    while (L > vLonCenter + 180) L -= 360;
+    return L;
+  };
+  const ringOverlapsView = (ring) => {
+    let anyIn = false;
+    let loMin = Infinity, loMax = -Infinity, laMin = Infinity, laMax = -Infinity, rawMin = Infinity, rawMax = -Infinity;
+    for (const [rawLon, lat] of ring) {
+      const lon = normLon(rawLon);
+      if (lon >= vW && lon <= vE && lat >= vS && lat <= vN) anyIn = true;
+      if (lon < loMin) loMin = lon;
+      if (lon > loMax) loMax = lon;
+      if (rawLon < rawMin) rawMin = rawLon;
+      if (rawLon > rawMax) rawMax = rawLon;
+      if (lat < laMin) laMin = lat;
+      if (lat > laMax) laMax = lat;
+    }
+    if (loMax - loMin > 270) return false;
+    if (rawMax - rawMin > 180 && loMax - loMin < 90) return false;
+    if (anyIn) return true;
+    if (loMax - loMin > 180) return false;
+    return !(loMax < vW || loMin > vE || laMax < vS || laMin > vN);
+  };
+  const cullFeatureToView = (f) => {
+    if (isGlobalView) return f;
+    const g = f.geometry;
+    if (!g) return f;
+    if (g.type === "Polygon") {
+      const ring = g.coordinates[0];
+      return ringOverlapsView(ring) ? f : null;
+    }
+    if (g.type === "MultiPolygon") {
+      const polys = g.coordinates;
+      const keep = polys.filter(
+        (p) => ringOverlapsView(p[0])
+      );
+      if (!keep.length) return null;
+      if (keep.length === polys.length) return f;
+      return { ...f, geometry: { ...g, coordinates: keep } };
+    }
+    return f;
+  };
+  const SEAM_SLIVER_MAX_SPAN = 100;
+  const ringIsFrameFiller = (ring) => {
+    const lons = ring.map(([lon]) => lon).sort((a, b) => a - b);
+    if (lons.length < 2) return false;
+    let maxGap = -1;
+    let gapIdx = 0;
+    for (let i = 1; i < lons.length; i++) {
+      const g = lons[i] - lons[i - 1];
+      if (g > maxGap) {
+        maxGap = g;
+        gapIdx = i;
+      }
+    }
+    const wrapGap = lons[0] + 360 - lons[lons.length - 1];
+    if (wrapGap >= maxGap) return false;
+    const span = 360 - maxGap;
+    const east = lons[gapIdx - 1] + 360;
+    return east > 180 && span < SEAM_SLIVER_MAX_SPAN;
+  };
+  const dropFrameFillers = (f) => {
+    const g = f.geometry;
+    if (!g) return f;
+    if (g.type === "Polygon") {
+      const ring = g.coordinates[0];
+      return ringIsFrameFiller(ring) ? null : f;
+    }
+    if (g.type === "MultiPolygon") {
+      const polys = g.coordinates;
+      const keep = polys.filter(
+        (p) => !ringIsFrameFiller(p[0])
+      );
+      if (!keep.length) return null;
+      if (keep.length === polys.length) return f;
+      return { ...f, geometry: { ...g, coordinates: keep } };
+    }
+    return f;
+  };
   const regions = [];
-  const pushRegionLayer = (layerFeatures, layerKind) => {
+  const pushRegionLayer = (layerFeatures, layerKind, shouldCull) => {
     for (const [iso, f] of layerFeatures) {
-      const d = path(f) ?? "";
-      if (!d) continue;
+      if (layerKind === "us-state" && usContext && INSET_STATES.has(iso))
+        continue;
+      if (layerKind === "country" && usContext && iso === "US") continue;
       const r = regionById.get(iso);
+      const viewF = shouldCull ? cullFeatureToView(f) : dropFrameFillers(f);
+      if (!viewF) continue;
+      const d = path(viewF) ?? "";
+      if (!d) continue;
       const isThisLayer = r?.layer === layerKind;
-      let fill2 = neutralFill;
+      const isForeign = layerKind === "country" && usContext && iso !== "US";
+      let fill2 = isForeign ? foreignFill : neutralFill;
       let label;
       let lineNumber = -1;
       let layer = "base";
       if (isThisLayer) {
-        if (r.score !== void 0) fill2 = fillForScore(r.score);
-        else fill2 = tagFill(r.tags, activeGroup) ?? neutralFill;
+        fill2 = regionFill(r);
         lineNumber = r.lineNumber;
         layer = layerKind;
         label = r.name;
@@ -46088,12 +46568,42 @@ function layoutMap(resolved, data, size, opts) {
         stroke: regionStroke,
         lineNumber,
         layer,
-        ...label !== void 0 && { label }
+        ...label !== void 0 && { label },
+        ...isThisLayer && r.score !== void 0 && { score: r.score },
+        ...isThisLayer && Object.keys(r.tags).length > 0 && { tags: r.tags }
       });
     }
   };
-  pushRegionLayer(worldLayer, "country");
-  if (usLayer) pushRegionLayer(usLayer, "us-state");
+  pushRegionLayer(worldLayer, "country", !isGlobalView);
+  if (usLayer) pushRegionLayer(usLayer, "us-state", !conusFit && !isGlobalView);
+  const lakesTopo = usCrisp && data.naLakes ? data.naLakes : data.lakes;
+  if (lakesTopo) {
+    for (const [, f] of decodeLayer(lakesTopo)) {
+      const viewF = isGlobalView ? dropFrameFillers(f) : cullFeatureToView(f);
+      if (!viewF) continue;
+      const d = path(viewF) ?? "";
+      if (!d) continue;
+      regions.push({
+        id: "lake",
+        d,
+        fill: water,
+        stroke: "none",
+        lineNumber: -1,
+        layer: "base"
+      });
+    }
+  }
+  const riverColor = water;
+  const rivers = [];
+  if (data.rivers) {
+    for (const [, f] of decodeLayer(data.rivers)) {
+      const viewF = isGlobalView ? dropFrameFillers(f) : cullFeatureToView(f);
+      if (!viewF) continue;
+      const d = path(viewF) ?? "";
+      if (!d) continue;
+      rivers.push({ d, color: riverColor, width: RIVER_WIDTH });
+    }
+  }
   const sizeVals = resolved.pois.map((p) => Number(p.meta["size"])).filter((n) => Number.isFinite(n) && n > 0);
   const sizeMin = sizeVals.length ? Math.min(...sizeVals) : 0;
   const sizeMax = sizeVals.length ? Math.max(...sizeVals) : 0;
@@ -46114,8 +46624,8 @@ function layoutMap(resolved, data, size, opts) {
       if (hex) return { fill: hex, stroke: mix(hex, palette.text, 18) };
     }
     return {
-      fill: palette.accent,
-      stroke: mix(palette.accent, palette.text, 18)
+      fill: palette.colors.orange,
+      stroke: mix(palette.colors.orange, palette.text, 18)
     };
   };
   const routeNumberById = /* @__PURE__ */ new Map();
@@ -46153,7 +46663,7 @@ function layoutMap(resolved, data, size, opts) {
         cy += Math.sin(ang) * COLO_R;
       }
       const { fill: fill2, stroke: stroke2 } = poiFill(e.p);
-      poiScreen.set(e.p.id, { cx, cy });
+      poiScreen.set(e.p.id, { cx, cy, r: radiusFor(e.p) });
       const num = routeNumberById.get(e.p.id);
       pois.push({
         id: e.p.id,
@@ -46170,17 +46680,36 @@ function layoutMap(resolved, data, size, opts) {
     });
   }
   const legs = [];
+  const RIM_GAP = 1.5;
   const legPath = (a, b, curved, offset) => {
-    if (!curved && offset === 0) return `M${a.cx},${a.cy}L${b.cx},${b.cy}`;
     const mx = (a.cx + b.cx) / 2;
     const my = (a.cy + b.cy) / 2;
     const dx = b.cx - a.cx;
     const dy = b.cy - a.cy;
     const len = Math.hypot(dx, dy) || 1;
+    const trimA = Math.min(a.r + RIM_GAP, len * 0.45);
+    const trimB = Math.min(b.r + RIM_GAP, len * 0.45);
+    if (!curved && offset === 0) {
+      const ux = dx / len;
+      const uy = dy / len;
+      const ax2 = a.cx + ux * trimA;
+      const ay2 = a.cy + uy * trimA;
+      const bx2 = b.cx - ux * trimB;
+      const by2 = b.cy - uy * trimB;
+      return `M${ax2},${ay2}L${bx2},${by2}`;
+    }
     const nx = -dy / len;
     const ny = dx / len;
     const bow = offset !== 0 ? offset : len * ARC_CURVE_FRAC;
-    return `M${a.cx},${a.cy}Q${mx + nx * bow},${my + ny * bow} ${b.cx},${b.cy}`;
+    const px = mx + nx * bow;
+    const py = my + ny * bow;
+    const ta = Math.hypot(px - a.cx, py - a.cy) || 1;
+    const tb = Math.hypot(b.cx - px, b.cy - py) || 1;
+    const ax = a.cx + (px - a.cx) / ta * trimA;
+    const ay = a.cy + (py - a.cy) / ta * trimA;
+    const bx = b.cx - (b.cx - px) / tb * trimB;
+    const by = b.cy - (b.cy - py) / tb * trimB;
+    return `M${ax},${ay}Q${px},${py} ${bx},${by}`;
   };
   for (const rt of resolved.routes) {
     const curved = rt.meta["style"] === "arc";
@@ -46191,7 +46720,7 @@ function layoutMap(resolved, data, size, opts) {
       legs.push({
         d: legPath(a, b, curved, 0),
         width: W_MIN,
-        color: mix(palette.text, palette.bg, 55),
+        color: mix(palette.text, palette.bg, 72),
         arrow: true,
         lineNumber: rt.lineNumber
       });
@@ -46227,7 +46756,7 @@ function layoutMap(resolved, data, size, opts) {
       legs.push({
         d: legPath(a, b, curved, offset),
         width: widthFor(e),
-        color: mix(palette.text, palette.bg, 45),
+        color: mix(palette.text, palette.bg, 66),
         arrow: e.directed,
         lineNumber: e.lineNumber,
         ...e.label !== void 0 && {
@@ -46239,38 +46768,92 @@ function layoutMap(resolved, data, size, opts) {
     });
   }
   const labels = [];
-  const pinList = [];
   const obstacles = [];
   const markers = pois.map((p) => ({
     cx: p.cx,
     cy: p.cy,
     r: p.r
   }));
-  const collides = (rect) => markers.some((m) => rectCircleOverlap(rect, m)) || obstacles.some((o) => rectsOverlap(rect, o));
+  const legSegments = [];
+  for (const leg of legs) {
+    const m = /^M(-?[\d.]+),(-?[\d.]+)(?:L(-?[\d.]+),(-?[\d.]+)|Q(-?[\d.]+),(-?[\d.]+) (-?[\d.]+),(-?[\d.]+))$/.exec(
+      leg.d
+    );
+    if (!m) continue;
+    const x0 = +m[1];
+    const y0 = +m[2];
+    if (m[3] !== void 0) {
+      legSegments.push([x0, y0, +m[3], +m[4]]);
+    } else {
+      const cx = +m[5];
+      const cy = +m[6];
+      const ex = +m[7];
+      const ey = +m[8];
+      const N = 8;
+      let px = x0;
+      let py = y0;
+      for (let i = 1; i <= N; i++) {
+        const t = i / N;
+        const u = 1 - t;
+        const qx = u * u * x0 + 2 * u * t * cx + t * t * ex;
+        const qy = u * u * y0 + 2 * u * t * cy + t * t * ey;
+        legSegments.push([px, py, qx, qy]);
+        px = qx;
+        py = qy;
+      }
+    }
+  }
+  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 LABEL_PADX = 6;
+  const LABEL_PADY = 3;
+  const labelW = (text) => measureLegendText(text, FONT) + 2 * LABEL_PADX;
+  const labelH = FONT + 2 * LABEL_PADY;
+  const pushRegionLabel = (x, y, text, fill2, lineNumber) => {
+    const color = contrastText(
+      fill2,
+      palette.textOnFillLight,
+      palette.textOnFillDark
+    );
+    const haloColor = color === palette.textOnFillLight ? palette.textOnFillDark : palette.textOnFillLight;
+    labels.push({
+      x,
+      y,
+      text,
+      anchor: "middle",
+      color,
+      halo: true,
+      haloColor,
+      lineNumber
+    });
+  };
+  const WORLD_LABEL_ANCHORS = {
+    US: [-98.5, 39.5]
+    // CONUS geographic centre (near Lebanon, Kansas)
+  };
   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;
       const [[x0, y0], [x1, y1]] = path.bounds(f);
-      if ((x1 - x0) * (y1 - y0) < TINY_REGION_AREA) continue;
-      const c = path.centroid(f);
-      if (!Number.isFinite(c[0])) continue;
       const text = regionLabelMode === "abbrev" ? r.id.replace(/^US-/, "") : r.label;
-      labels.push({
-        x: c[0],
-        y: c[1],
+      if (labelW(text) > x1 - x0 || labelH > y1 - y0) continue;
+      const anchor = r.layer !== "us-state" ? 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;
+      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 src = regionById.get(seed.iso);
+      pushRegionLabel(
+        seed.x,
+        seed.y,
         text,
-        anchor: "middle",
-        color: contrastText(
-          r.fill,
-          palette.textOnFillLight,
-          palette.textOnFillDark
-        ),
-        halo: true,
-        lineNumber: r.lineNumber
-      });
+        src ? regionFill(src) : neutralFill,
+        seed.lineNumber
+      );
     }
   }
   const poiLabelMode = resolved.directives.poiLabels ?? "auto";
@@ -46283,68 +46866,106 @@ function layoutMap(resolved, data, size, opts) {
       const src = poiById.get(p.id);
       return src?.label ?? src?.name ?? p.id;
     };
-    let pinCounter = 0;
-    for (const p of ordered) {
+    const poiLabH = FONT * 1.25;
+    const labelInfo = (p) => {
       const text = labelText(p);
-      const w = measureLegendText(text, FONT);
-      const h = FONT * 1.25;
-      const inline = { x: p.cx + p.r + 3, y: p.cy - h / 2, w, h };
-      if (!collides(inline)) {
-        obstacles.push(inline);
+      return { text, w: measureLegendText(text, FONT) };
+    };
+    const pushInline = (p, text, w, side) => {
+      const tx = side === "right" ? p.cx + p.r + 3 : p.cx - p.r - 3;
+      obstacles.push({
+        x: side === "right" ? tx : tx - w,
+        y: p.cy - poiLabH / 2,
+        w,
+        h: poiLabH
+      });
+      labels.push({
+        x: tx,
+        y: p.cy + FONT / 3,
+        text,
+        anchor: side === "right" ? "start" : "end",
+        color: palette.text,
+        halo: true,
+        haloColor: palette.bg,
+        poiId: p.id,
+        lineNumber: p.lineNumber
+      });
+    };
+    const inlineFits = (p, w, side) => {
+      const tx = side === "right" ? p.cx + p.r + 3 : p.cx - p.r - 3;
+      const rect = {
+        x: side === "right" ? tx : tx - w,
+        y: p.cy - poiLabH / 2,
+        w,
+        h: poiLabH
+      };
+      return rect.x >= 0 && rect.x + rect.w <= width && !collides(rect);
+    };
+    const GROUP_R = 30;
+    const groups = [];
+    for (const p of ordered) {
+      const near = groups.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]);
+    }
+    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 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 totalH = items.length * step;
+      let startY = cyMid - totalH / 2;
+      startY = Math.max(2, Math.min(startY, height - totalH - 2));
+      items.forEach((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
+        });
         labels.push({
-          x: inline.x,
-          y: p.cy + FONT / 3,
-          text,
-          anchor: "start",
+          x: colX,
+          y: rowCy + FONT / 3,
+          text: o.text,
+          anchor: side === "right" ? "start" : "end",
           color: palette.text,
           halo: true,
-          lineNumber: p.lineNumber
+          haloColor: palette.bg,
+          leader: {
+            x1: o.p.cx,
+            y1: o.p.cy,
+            x2: side === "right" ? colX - 2 : colX + 2,
+            y2: rowCy
+          },
+          leaderColor: o.p.fill,
+          poiId: o.p.id,
+          lineNumber: o.p.lineNumber
         });
-        continue;
-      }
-      let placed = false;
-      for (let k = 1; k <= 2 && !placed; k++) {
-        for (const [dx, dy] of RING_DIRS) {
-          const cx = p.cx + dx * LEADER_STEP * k;
-          const cy = p.cy + dy * LEADER_STEP * k;
-          const rect = {
-            x: dx >= 0 ? cx : cx - w,
-            y: cy - h / 2,
-            w,
-            h
-          };
-          if (rect.x < 0 || rect.x + rect.w > width || rect.y < 0 || rect.y + rect.h > height) {
-            continue;
-          }
-          if (collides(rect)) continue;
-          obstacles.push(rect);
-          labels.push({
-            x: cx,
-            y: cy + FONT / 3,
-            text,
-            anchor: dx >= 0 ? "start" : "end",
-            color: palette.text,
-            halo: true,
-            leader: { x1: p.cx, y1: p.cy, x2: cx, y2: cy },
-            lineNumber: p.lineNumber
-          });
-          placed = true;
-          break;
+      });
+    };
+    for (const g of groups) {
+      if (g.length === 1) {
+        const p = g[0];
+        const { text, w } = labelInfo(p);
+        if (inlineFits(p, w, "right")) {
+          pushInline(p, text, w, "right");
+          continue;
+        }
+        if (inlineFits(p, w, "left")) {
+          pushInline(p, text, w, "left");
+          continue;
         }
       }
-      if (placed) continue;
-      pinCounter += 1;
-      pinList.push({ pin: pinCounter, label: text });
-      labels.push({
-        x: p.cx + p.r + 2,
-        y: p.cy - p.r,
-        text: String(pinCounter),
-        anchor: "start",
-        color: palette.text,
-        halo: true,
-        pin: pinCounter,
-        lineNumber: p.lineNumber
-      });
+      placeColumn(g);
     }
   }
   let legend = null;
@@ -46353,8 +46974,7 @@ function layoutMap(resolved, data, size, opts) {
       name: g.name,
       entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
     }));
-    const hasAnything = tagGroups.length > 0 || hasRamp || sizeVals.length > 0 || weightVals.length > 0;
-    if (hasAnything) {
+    if (tagGroups.length > 0 || hasRamp) {
       legend = {
         tagGroups,
         activeGroup,
@@ -46365,20 +46985,9 @@ function layoutMap(resolved, data, size, opts) {
             },
             min: rampMin,
             max: rampMax,
-            hue: rampHue
-          }
-        },
-        ...sizeVals.length > 0 && {
-          size: {
-            ...resolved.directives.sizeMetric !== void 0 && {
-              metric: resolved.directives.sizeMetric
-            },
-            min: sizeMin,
-            max: sizeMax
+            hue: rampHue,
+            base: rampBase
           }
-        },
-        ...weightVals.length > 0 && {
-          weight: { min: wMin, max: wMax }
         }
       };
     }
@@ -46386,28 +46995,30 @@ function layoutMap(resolved, data, size, opts) {
   return {
     width,
     height,
-    background: palette.bg,
+    background: water,
     title: resolved.title,
     ...resolved.subtitle !== void 0 && { subtitle: resolved.subtitle },
     ...resolved.caption !== void 0 && { caption: resolved.caption },
     regions,
+    rivers,
     legs,
     pois,
     labels,
-    pinList,
-    legend
+    legend,
+    insets,
+    insetRegions
   };
 }
-var import_d3_geo2, import_topojson_client2, FIT_PAD, RAMP_FLOOR, R_DEFAULT, R_MIN, R_MAX, W_MIN, W_MAX, FONT, LEADER_STEP, COLO_EPS, COLO_R, GOLDEN_ANGLE, FAN_STEP, TINY_REGION_AREA, ARC_CURVE_FRAC, RING_DIRS;
+var import_d3_geo2, import_topojson_client2, 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, RIVER_WIDTH, FOREIGN_TINT_LIGHT, FOREIGN_TINT_DARK, COLO_R, GOLDEN_ANGLE, FAN_STEP, ARC_CURVE_FRAC, usConusProjection, alaskaProjection, hawaiiProjection, INSET_STATES, US_NON_CONUS;
 var init_layout15 = __esm({
   "src/map/layout.ts"() {
     "use strict";
     import_d3_geo2 = require("d3-geo");
     import_topojson_client2 = require("topojson-client");
     init_color_utils();
-    init_tag_groups();
     init_label_layout();
     init_legend_constants();
+    init_title_constants();
     FIT_PAD = 24;
     RAMP_FLOOR = 15;
     R_DEFAULT = 6;
@@ -46416,23 +47027,32 @@ var init_layout15 = __esm({
     W_MIN = 1.25;
     W_MAX = 8;
     FONT = 11;
-    LEADER_STEP = 14;
     COLO_EPS = 1.5;
+    LAND_TINT_LIGHT = 58;
+    LAND_TINT_DARK = 75;
+    TAG_TINT_LIGHT = 60;
+    TAG_TINT_DARK = 68;
+    WATER_TINT = 55;
+    RIVER_WIDTH = 1.3;
+    FOREIGN_TINT_LIGHT = 30;
+    FOREIGN_TINT_DARK = 62;
     COLO_R = 9;
     GOLDEN_ANGLE = 2.399963229728653;
     FAN_STEP = 16;
-    TINY_REGION_AREA = 600;
     ARC_CURVE_FRAC = 0.18;
-    RING_DIRS = [
-      [1, 0],
-      [0, 1],
-      [-1, 0],
-      [0, -1],
-      [1, 1],
-      [-1, 1],
-      [-1, -1],
-      [1, -1]
-    ];
+    usConusProjection = () => (0, import_d3_geo2.geoConicEqualArea)().parallels([29.5, 45.5]).rotate([96, 0]);
+    alaskaProjection = () => (0, import_d3_geo2.geoConicEqualArea)().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]);
+    hawaiiProjection = () => (0, import_d3_geo2.geoMercator)();
+    INSET_STATES = /* @__PURE__ */ new Set(["US-AK", "US-HI"]);
+    US_NON_CONUS = /* @__PURE__ */ new Set([
+      "US-AK",
+      "US-HI",
+      "US-AS",
+      "US-GU",
+      "US-MP",
+      "US-PR",
+      "US-VI"
+    ]);
   }
 });
 
@@ -46442,7 +47062,7 @@ __export(renderer_exports16, {
   renderMap: () => renderMap,
   renderMapForExport: () => renderMapForExport
 });
-function renderMap(container, resolved, data, palette, isDark, onClickItem, exportDims) {
+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;
   const height = exportDims?.height ?? container.clientHeight;
@@ -46453,27 +47073,29 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
     { width, height },
     {
       palette,
-      isDark
+      isDark,
+      ...activeGroupOverride !== void 0 && {
+        activeGroup: activeGroupOverride
+      }
     }
   );
-  const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY);
+  const svg = d3Selection18.select(container).append("svg").attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`).attr("preserveAspectRatio", "xMidYMin meet").attr("xmlns", "http://www.w3.org/2000/svg").style("font-family", FONT_FAMILY).style("background", layout.background);
   svg.append("rect").attr("width", width).attr("height", height).attr("fill", layout.background);
-  const arrowColor = mix(palette.text, palette.bg, 50);
   const defs = svg.append("defs");
-  defs.append("marker").attr("id", "dgmo-map-arrow").attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerWidth", 7).attr("markerHeight", 7).attr("orient", "auto-start-reverse").append("path").attr("d", "M0,0L10,5L0,10z").attr("fill", arrowColor);
-  const haloColor = layout.background;
-  if (layout.title) {
-    svg.append("text").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).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).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).text(layout.caption);
-  }
+  const arrowSize = (w) => Math.min(15, 7 + w * 0.95);
+  const haloColor = palette.bg;
   const gRegions = svg.append("g").attr("class", "dgmo-map-regions");
-  for (const r of layout.regions) {
-    const p = gRegions.append("path").attr("d", r.d).attr("fill", r.fill).attr("stroke", r.stroke).attr("stroke-width", 0.5);
+  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.layer !== "base") {
+      p.classed("dgmo-map-region", true).attr("data-region", r.id);
+      if (r.score !== void 0) p.attr("data-score", r.score);
+      if (r.tags) {
+        for (const [group, value] of Object.entries(r.tags)) {
+          p.attr(`data-tag-${group.toLowerCase()}`, value.toLowerCase());
+        }
+      }
+    }
     if (r.lineNumber >= 0) {
       p.attr("data-line-number", r.lineNumber);
       if (onClickItem) {
@@ -46483,11 +47105,31 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         );
       }
     }
+  };
+  for (const r of layout.regions) drawRegion(gRegions, r, 0.5);
+  if (layout.rivers.length) {
+    const gRivers = svg.append("g").attr("class", "dgmo-map-rivers").attr("fill", "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) {
+      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");
+    }
+    for (const r of layout.insetRegions) drawRegion(insetG, r, 0.5);
   }
   const gLegs = svg.append("g").attr("class", "dgmo-map-legs").attr("fill", "none");
-  for (const leg of layout.legs) {
+  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");
-    if (leg.arrow) p.attr("marker-end", "url(#dgmo-map-arrow)");
+    if (leg.arrow) {
+      const id = `dgmo-map-arrow-${i}`;
+      const s = arrowSize(leg.width);
+      defs.append("marker").attr("id", id).attr("viewBox", "0 0 10 10").attr("refX", 10).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", s).attr("markerHeight", s).attr("orient", "auto-start-reverse").append("path").attr("d", "M0,0L10,5L0,10z").attr("fill", leg.color);
+      p.attr("marker-end", `url(#${id})`);
+    }
     if (leg.label !== void 0 && leg.labelX !== void 0) {
       emitText(
         gLegs,
@@ -46501,13 +47143,13 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
         LABEL_FONT - 1
       );
     }
-  }
+  });
   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);
+    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 (onClickItem) {
       c.style("cursor", "pointer").on(
         "click",
@@ -46531,48 +47173,66 @@ 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.leader) {
-      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", mix(palette.textMuted, palette.bg, 60)).attr("stroke-width", 0.75);
+      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.pin !== void 0) {
-      gLabels.append("rect").attr("x", lab.x - 1).attr("y", lab.y - LABEL_FONT).attr("width", LABEL_FONT * 1.3).attr("height", LABEL_FONT * 1.3).attr("rx", 2).attr("fill", palette.surface).attr("stroke", palette.border);
-    }
-    emitText(
+    const t = emitText(
       gLabels,
       lab.x,
       lab.y,
       lab.text,
       lab.anchor,
       lab.color,
-      haloColor,
+      lab.haloColor,
       lab.halo,
       LABEL_FONT
     );
-  }
-  if (layout.pinList.length > 0) {
-    const gPins = svg.append("g").attr("class", "dgmo-map-pin-list").attr(
-      "transform",
-      `translate(12, ${height - layout.pinList.length * 14 - 8})`
-    );
-    layout.pinList.forEach((entry, i) => {
-      gPins.append("text").attr("x", 0).attr("y", i * 14).attr("font-size", LABEL_FONT - 1).attr("fill", palette.textMuted).text(`${entry.pin} \u2014 ${entry.label}`);
-    });
+    if (lab.poiId !== void 0) {
+      t.attr("data-poi", lab.poiId).style("cursor", "default");
+    }
   }
   if (layout.legend) {
     const legendY = (layout.title ? TITLE_Y + TITLE_FONT_SIZE : 0) + (layout.subtitle ? TITLE_FONT_SIZE : 0) + 8;
     const legendG = svg.append("g").attr("class", "dgmo-map-legend").attr("transform", `translate(0, ${legendY})`);
-    const groups = layout.legend.tagGroups.filter((g) => g.entries.length > 0);
+    const ramp = layout.legend.ramp;
+    const scoreGroup = ramp ? {
+      name: ramp.metric?.trim() || "Score",
+      entries: [],
+      gradient: {
+        min: ramp.min,
+        max: ramp.max,
+        hue: ramp.hue,
+        base: ramp.base
+      }
+    } : null;
+    const tagGroups = layout.legend.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({ name: g.name, entries: [...g.entries] }));
+    const groups = [...scoreGroup ? [scoreGroup] : [], ...tagGroups];
     if (groups.length > 0) {
       const config = {
-        groups: groups.map((g) => ({ name: g.name, entries: [...g.entries] })),
+        groups,
         position: { placement: "top-center", titleRelation: "below-title" },
         mode: exportDims ? "export" : "preview",
-        showEmptyGroups: false
+        showEmptyGroups: false,
+        // Keep inactive siblings visible as pills so the user can click to flip
+        // the active colouring dimension (preview only — export shows just the
+        // active group).
+        showInactivePills: true
       };
       const state = { activeGroup: layout.legend.activeGroup };
       renderLegendD3(legendG, config, state, palette, isDark, void 0, width);
     }
-    const pinGap = layout.pinList.length ? layout.pinList.length * 14 + 14 : 0;
-    emitExtraLegend(svg, layout, palette, height, pinGap);
+  }
+  if (layout.title) {
+    svg.append("text").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);
+  }
+  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);
   }
 }
 function renderMapForExport(container, resolved, data, palette, isDark, exportDims) {
@@ -46583,54 +47243,7 @@ function emitText(g, x, y, text, anchor, color, halo, withHalo, fontSize) {
   if (withHalo) {
     t.attr("paint-order", "stroke fill").attr("stroke", halo).attr("stroke-width", 3).attr("stroke-linejoin", "round").attr("stroke-opacity", 0.7);
   }
-}
-function emitExtraLegend(svg, layout, palette, height, bottomGap) {
-  const { legend } = layout;
-  if (!legend) return;
-  if (!legend.ramp && !legend.size && !legend.weight) return;
-  const blocks = [];
-  const g = svg.append("g").attr("class", "dgmo-map-legend-keys").attr("transform", `translate(12, ${height - 56 - bottomGap})`);
-  let xCursor = 0;
-  if (legend.ramp) {
-    const ramp = legend.ramp;
-    blocks.push(() => {
-      const block = g.append("g").attr("transform", `translate(${xCursor},0)`);
-      const gradId = "dgmo-map-ramp";
-      const grad = block.append("defs").append("linearGradient").attr("id", gradId).attr("x1", "0%").attr("x2", "100%");
-      grad.append("stop").attr("offset", "0%").attr("stop-color", mix(ramp.hue, palette.bg, 15));
-      grad.append("stop").attr("offset", "100%").attr("stop-color", ramp.hue);
-      block.append("rect").attr("width", 80).attr("height", 8).attr("fill", `url(#${gradId})`);
-      block.append("text").attr("x", 0).attr("y", 22).attr("font-size", 9).attr("fill", palette.textMuted).text(String(ramp.min));
-      block.append("text").attr("x", 80).attr("y", 22).attr("text-anchor", "end").attr("font-size", 9).attr("fill", palette.textMuted).text(String(ramp.max));
-      if (ramp.metric) {
-        block.append("text").attr("x", 0).attr("y", -4).attr("font-size", 9).attr("fill", palette.textMuted).text(ramp.metric);
-      }
-      xCursor += 110;
-    });
-  }
-  if (legend.size) {
-    const sz = legend.size;
-    blocks.push(() => {
-      const block = g.append("g").attr("transform", `translate(${xCursor},0)`);
-      [3, 6, 10].forEach((r, i) => {
-        block.append("circle").attr("cx", i * 26 + r).attr("cy", 8).attr("r", r).attr("fill", "none").attr("stroke", palette.textMuted);
-      });
-      block.append("text").attr("x", 0).attr("y", -4).attr("font-size", 9).attr("fill", palette.textMuted).text(sz.metric ?? "size");
-      xCursor += 110;
-    });
-  }
-  if (legend.weight) {
-    const wt = legend.weight;
-    blocks.push(() => {
-      const block = g.append("g").attr("transform", `translate(${xCursor},0)`);
-      [1, 3, 6].forEach((w, i) => {
-        block.append("line").attr("x1", i * 26).attr("y1", 8).attr("x2", i * 26 + 20).attr("y2", 8).attr("stroke", palette.textMuted).attr("stroke-width", w);
-      });
-      block.append("text").attr("x", 0).attr("y", -4).attr("font-size", 9).attr("fill", palette.textMuted).text(wt.metric ?? "weight");
-      xCursor += 110;
-    });
-  }
-  for (const draw of blocks) draw();
+  return t;
 }
 var d3Selection18, LABEL_FONT;
 var init_renderer16 = __esm({
@@ -53098,18 +53711,18 @@ function getRotateFn(mode) {
   return () => 0;
 }
 function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
-  return new Promise((resolve2) => {
+  return new Promise((resolve) => {
     d3Selection23.select(container).selectAll(":not([data-d3-tooltip])").remove();
     const { words, cloudOptions } = parsed;
     const title = parsed.noTitle ? null : parsed.title;
     if (words.length === 0) {
-      resolve2();
+      resolve();
       return;
     }
     const width = exportDims?.width ?? container.clientWidth;
     const height = exportDims?.height ?? container.clientHeight;
     if (width <= 0 || height <= 0) {
-      resolve2();
+      resolve();
       return;
     }
     const titleHeight = title ? 40 : 0;
@@ -53138,7 +53751,7 @@ function renderWordCloudAsync(container, parsed, palette, _isDark, exportDims) {
         "transform",
         (d) => `translate(${d.x},${d.y}) rotate(${d.rotate})`
       ).text((d) => d.text);
-      resolve2();
+      resolve();
     }).start();
   });
 }