@diagrammo/dgmo 0.23.0 → 0.25.0

package/dist/index.cjs

@@ -818,7 +818,7 @@ function withTagAliases(base, aliases) {
 function isReservedKey(registry, key) {
   return registry.keys.has(key) || registry.tagAliases.has(key);
 }
-var SEQUENCE_REGISTRY, INFRA_REGISTRY, MAP_REGISTRY, ORG_REGISTRY, C4_REGISTRY, ER_REGISTRY, CLASS_REGISTRY, KANBAN_REGISTRY, SITEMAP_REGISTRY, GANTT_REGISTRY, PERT_REGISTRY, BOXES_AND_LINES_REGISTRY, TIMELINE_REGISTRY, MINDMAP_REGISTRY, TECH_RADAR_REGISTRY, CYCLE_REGISTRY, JOURNEY_MAP_REGISTRY, PYRAMID_REGISTRY, RING_REGISTRY, RACI_REGISTRY, WIREFRAME_REGISTRY;
+var SEQUENCE_REGISTRY, INFRA_REGISTRY, MAP_REGISTRY, ORG_REGISTRY, C4_REGISTRY, ER_REGISTRY, KANBAN_REGISTRY, SITEMAP_REGISTRY, GANTT_REGISTRY, PERT_REGISTRY, BOXES_AND_LINES_REGISTRY, TIMELINE_REGISTRY, MINDMAP_REGISTRY, TECH_RADAR_REGISTRY, CYCLE_REGISTRY, JOURNEY_MAP_REGISTRY, PYRAMID_REGISTRY, RING_REGISTRY, RACI_REGISTRY;
 var init_reserved_key_registry = __esm({
   "src/utils/reserved-key-registry.ts"() {
     "use strict";
@@ -862,10 +862,6 @@ var init_reserved_key_registry = __esm({
       "description",
       "domain"
     ]);
-    CLASS_REGISTRY = staticRegistry([
-      "color",
-      "description"
-    ]);
     KANBAN_REGISTRY = staticRegistry([
       "color",
       "description",
@@ -941,7 +937,6 @@ var init_reserved_key_registry = __esm({
       "color",
       "description"
     ]);
-    WIREFRAME_REGISTRY = staticRegistry([]);
   }
 });
 
@@ -4210,6 +4205,9 @@ var init_legend_layout = __esm({
 });
 
 // src/utils/legend-d3.ts
+function centerText(sel) {
+  return sel.attr("dy", LEGEND_TEXT_DY);
+}
 function renderLegendD3(container, config, state, palette, isDark, callbacks, containerWidth) {
   const width = containerWidth ?? parseFloat(container.attr("width") || "800");
   let currentState = { ...state };
@@ -4292,21 +4290,21 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, _isDark, c
   const pill = capsule.pill;
   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);
+  g.append("text").attr("x", pill.x + pill.width / 2).attr("y", LEGEND_HEIGHT / 2).attr("text-anchor", "middle").call(centerText).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("text").attr("x", gr.minX).attr("y", gr.textY).call(centerText).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);
+    g.append("text").attr("x", gr.maxX).attr("y", gr.textY).call(centerText).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);
-    entryG.append("text").attr("x", entry.textX).attr("y", entry.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(entry.displayValue ?? entry.value);
+    entryG.append("text").attr("x", entry.textX).attr("y", entry.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("font-family", FONT_FAMILY).text(entry.displayValue ?? entry.value);
     if (callbacks?.onEntryHover) {
       const groupName = capsule.groupName;
       const entryValue = entry.value;
@@ -4326,7 +4324,7 @@ function renderCapsule(parent, capsule, palette, groupBg, pillBorder, _isDark, c
 function renderPill(parent, pill, palette, groupBg, callbacks) {
   const g = parent.append("g").attr("transform", `translate(${pill.x},${pill.y})`).attr("data-legend-group", pill.groupName.toLowerCase()).style("cursor", "pointer");
   g.append("rect").attr("width", pill.width).attr("height", pill.height).attr("rx", pill.height / 2).attr("fill", groupBg);
-  g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
+  g.append("text").attr("x", pill.width / 2).attr("y", pill.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(pill.groupName);
   if (callbacks?.onGroupToggle) {
     const cb = callbacks.onGroupToggle;
     const name = pill.groupName;
@@ -4349,7 +4347,7 @@ function renderControl(parent, ctrl, palette, _groupBg, pillBorder, _isDark, con
     textX = 8 + 14 + LEGEND_ENTRY_DOT_GAP + measureLegendText(ctrl.label, LEGEND_PILL_FONT_SIZE) / 2;
   }
   if (ctrl.label) {
-    g.append("text").attr("x", textX).attr("y", ctrl.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(ctrl.label);
+    g.append("text").attr("x", textX).attr("y", ctrl.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_PILL_FONT_SIZE).attr("font-weight", 500).attr("fill", palette.textMuted).attr("pointer-events", "none").attr("font-family", FONT_FAMILY).text(ctrl.label);
   }
   if (ctrl.children) {
     let cx = ctrl.width + 4;
@@ -4359,7 +4357,7 @@ function renderControl(parent, ctrl, palette, _groupBg, pillBorder, _isDark, con
         "fill",
         child.isActive ? palette.primary ?? palette.text : "none"
       ).attr("stroke", pillBorder).attr("stroke-width", 0.75);
-      childG.append("text").attr("x", child.width / 2).attr("y", ctrl.height / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", child.isActive ? palette.bg : palette.textMuted).attr("font-family", FONT_FAMILY).text(child.label);
+      childG.append("text").attr("x", child.width / 2).attr("y", ctrl.height / 2).attr("text-anchor", "middle").call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", child.isActive ? palette.bg : palette.textMuted).attr("font-family", FONT_FAMILY).text(child.label);
       const configCtrl2 = configControls?.find((c) => c.id === ctrl.id);
       const configChild = configCtrl2?.children?.find((c) => c.id === child.id);
       if (configChild?.onClick) {
@@ -4413,7 +4411,7 @@ function renderControlsGroup(parent, layout, palette, groupBg, pillBorder, callb
       } else {
         entryG.append("circle").attr("cx", tl.dotCx).attr("cy", tl.dotCy).attr("r", LEGEND_TOGGLE_DOT_R).attr("fill", "none").attr("stroke", palette.textMuted).attr("stroke-width", 1);
       }
-      entryG.append("text").attr("x", tl.textX).attr("y", tl.textY).attr("dominant-baseline", "central").attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("opacity", tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY).attr("font-family", FONT_FAMILY).text(tl.label);
+      entryG.append("text").attr("x", tl.textX).attr("y", tl.textY).call(centerText).attr("font-size", LEGEND_ENTRY_FONT_SIZE).attr("fill", palette.textMuted).attr("opacity", tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY).attr("font-family", FONT_FAMILY).text(tl.label);
       if (callbacks?.onControlsToggle && toggle) {
         const cb = callbacks.onControlsToggle;
         const id = tl.id;
@@ -4426,6 +4424,7 @@ function renderControlsGroup(parent, layout, palette, groupBg, pillBorder, callb
     }
   }
 }
+var LEGEND_TEXT_DY;
 var init_legend_d3 = __esm({
   "src/utils/legend-d3.ts"() {
     "use strict";
@@ -4433,6 +4432,7 @@ var init_legend_d3 = __esm({
     init_legend_layout();
     init_color_utils();
     init_fonts();
+    LEGEND_TEXT_DY = "0.32em";
   }
 });
 
@@ -4683,7 +4683,6 @@ var init_arrows = __esm({
 var parser_exports = {};
 __export(parser_exports, {
   isSequenceBlock: () => isSequenceBlock,
-  isSequenceMessage: () => isSequenceMessage,
   isSequenceNote: () => isSequenceNote,
   isSequenceSection: () => isSequenceSection,
   looksLikeSequence: () => looksLikeSequence,
@@ -4699,9 +4698,6 @@ function isHardRemovedToken(remainder) {
   }
   return { removed: false };
 }
-function isSequenceMessage(el) {
-  return el.kind === "message";
-}
 function isSequenceBlock(el) {
   return el.kind === "block";
 }
@@ -26567,7 +26563,7 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
   const VALUE_NAME = hasRamp ? parsed.boxMetric?.trim() || "Value" : null;
   const matchColorGroup = (v) => {
     const lv = v.trim().toLowerCase();
-    if (lv === "none") return null;
+    if (lv === "" || lv === "none") return null;
     const tg = parsed.tagGroups.find((g) => g.name.toLowerCase() === lv);
     if (tg) return tg.name;
     if (lv === VALUE_NAME?.toLowerCase()) return VALUE_NAME;
@@ -26908,6 +26904,22 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         const tooltipText = fullText.length > 200 ? fullText.slice(0, 199) + "\u2026" : fullText;
         nodeG.append("title").text(tooltipText);
       }
+    } else if (parsed.showValues && node.value !== void 0) {
+      const valueLabel = parsed.boxMetric ? `${parsed.boxMetric}: ${node.value}` : String(node.value);
+      const headerH = ln.height / 2;
+      const sepY = -ln.height / 2 + headerH;
+      const fitted = fitLabelToHeader(node.label, ln.width, 2);
+      const labelLineH = fitted.fontSize * 1.3;
+      const labelTotalH = fitted.lines.length * labelLineH;
+      const headerCenterY = -ln.height / 2 + headerH / 2;
+      for (let li = 0; li < fitted.lines.length; li++) {
+        nodeG.append("text").attr("x", 0).attr(
+          "y",
+          headerCenterY - labelTotalH / 2 + labelLineH / 2 + li * labelLineH
+        ).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", colors.text).text(fitted.lines[li]);
+      }
+      nodeG.append("line").attr("x1", -ln.width / 2).attr("y1", sepY).attr("x2", ln.width / 2).attr("y2", sepY).attr("stroke", colors.stroke).attr("stroke-opacity", 0.3).attr("stroke-width", 1);
+      nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", (sepY + ln.height / 2) / 2).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("fill", colors.text).attr("opacity", 0.85).text(valueLabel);
     } else {
       const maxLabelLines = Math.max(
         2,
@@ -26920,21 +26932,16 @@ function renderBoxesAndLines(container, parsed, layout, palette, isDark, options
         nodeG.append("text").attr("x", 0).attr("y", -totalH / 2 + lineH / 2 + li * lineH).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", fitted.fontSize).attr("font-weight", "600").attr("fill", colors.text).text(fitted.lines[li]);
       }
     }
-    if (parsed.showValues && node.value !== void 0) {
+    if (parsed.showValues && node.value !== void 0 && desc && desc.length > 0 && !hideDescriptions) {
       const valueText = String(node.value);
-      const descShown = !!(desc && desc.length > 0 && !hideDescriptions);
-      if (descShown) {
-        const padX = 6;
-        const padY = 5;
-        const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO2 + 8;
-        const bh = VALUE_FONT_SIZE + 4;
-        const bx = ln.width / 2 - bw - 4;
-        const by = -ln.height / 2 + 4;
-        nodeG.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85);
-        nodeG.append("text").attr("class", "bl-node-value").attr("x", bx + bw - padX).attr("y", by + padY).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", palette.textMuted).text(valueText);
-      } else {
-        nodeG.append("text").attr("class", "bl-node-value").attr("x", 0).attr("y", ln.height / 2 - VALUE_FONT_SIZE).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", colors.text).attr("opacity", 0.8).text(valueText);
-      }
+      const padX = 6;
+      const padY = 5;
+      const bw = valueText.length * VALUE_FONT_SIZE * CHAR_WIDTH_RATIO2 + 8;
+      const bh = VALUE_FONT_SIZE + 4;
+      const bx = Math.max(-ln.width / 2 + 4, ln.width / 2 - bw - 4);
+      const by = -ln.height / 2 + 4;
+      nodeG.append("rect").attr("x", bx).attr("y", by).attr("width", bw).attr("height", bh).attr("rx", 3).attr("fill", palette.bg).attr("opacity", 0.85);
+      nodeG.append("text").attr("class", "bl-node-value").attr("x", bx + bw - padX).attr("y", by + padY).attr("text-anchor", "end").attr("dominant-baseline", "central").attr("font-size", VALUE_FONT_SIZE).attr("font-weight", "600").attr("fill", palette.textMuted).text(valueText);
     }
   }
   const hasDescriptions = parsed.nodes.some(
@@ -27030,7 +27037,7 @@ var init_renderer6 = __esm({
     init_wrapped_desc();
     init_scaling();
     DIAGRAM_PADDING6 = 20;
-    NODE_FONT_SIZE = 13;
+    NODE_FONT_SIZE = 11;
     MIN_NODE_FONT_SIZE = 9;
     EDGE_LABEL_FONT_SIZE4 = 11;
     EDGE_STROKE_WIDTH5 = 1.5;
@@ -46767,7 +46774,11 @@ function resolveMap(parsed, data) {
       if (bb && !isWholeSphere(bb)) containerBoxes.push(bb);
     }
     const containerUnion = unionExtent(containerBoxes, points);
-    if (containerUnion) extent2 = pad(containerUnion, PAD_FRACTION);
+    if (containerUnion)
+      extent2 = pad(
+        clampContainerToCluster(containerUnion, points),
+        PAD_FRACTION
+      );
   }
   if (isPoiOnly) {
     const cx = (extent2[0][0] + extent2[1][0]) / 2;
@@ -46848,6 +46859,22 @@ function mostCommonCountry(regions, poiCountries) {
   }
   return best;
 }
+function clampContainerToCluster(container, points) {
+  const poi = unionExtent([], points);
+  if (!poi) return container;
+  let [[west, south], [east, north]] = container;
+  const [[pWest, pSouth], [pEast, pNorth]] = poi;
+  south = Math.max(south, pSouth - CONTAINER_OVERSHOOT_DEG);
+  north = Math.min(north, pNorth + CONTAINER_OVERSHOOT_DEG);
+  if (east <= 180 && pEast <= 180) {
+    west = Math.max(west, pWest - CONTAINER_OVERSHOOT_DEG);
+    east = Math.min(east, pEast + CONTAINER_OVERSHOOT_DEG);
+  }
+  return [
+    [west, south],
+    [east, north]
+  ];
+}
 function pad(e, frac) {
   const dLon = (e[1][0] - e[0][0]) * frac || 1;
   const dLat = (e[1][1] - e[0][1]) * frac || 1;
@@ -46860,7 +46887,7 @@ function firstError(diags) {
   const e = diags.find((d) => d.severity === "error");
   return e ? formatDgmoError(e) : null;
 }
-var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, US_NATIONAL_LON_SPAN, REGION_ALIASES, US_STATE_POSTAL;
+var WORLD_SPAN, MERCATOR_MAX_LAT, PAD_FRACTION, REGION_PAD_FRACTION, WORLD_LAT_SOUTH, WORLD_LAT_NORTH, POI_ZOOM_FLOOR_DEG, CONTAINER_OVERSHOOT_DEG, US_NATIONAL_LON_SPAN, REGION_ALIASES, US_STATE_POSTAL;
 var init_resolver2 = __esm({
   "src/map/resolver.ts"() {
     "use strict";
@@ -46873,6 +46900,7 @@ var init_resolver2 = __esm({
     WORLD_LAT_SOUTH = -58;
     WORLD_LAT_NORTH = 78;
     POI_ZOOM_FLOOR_DEG = 7;
+    CONTAINER_OVERSHOOT_DEG = 8;
     US_NATIONAL_LON_SPAN = 48;
     REGION_ALIASES = {
       // Common everyday names → the Natural-Earth display name actually shipped.
@@ -46951,6 +46979,55 @@ var init_resolver2 = __esm({
   }
 });
 
+// src/map/legend-band.ts
+function mapLegendGroups(legend) {
+  const ramp = legend.ramp;
+  const scoreGroup = ramp ? {
+    name: ramp.metric?.trim() || "Value",
+    entries: [],
+    gradient: {
+      min: ramp.min,
+      max: ramp.max,
+      hue: ramp.hue,
+      base: ramp.base
+    }
+  } : null;
+  const tagGroups = legend.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({ name: g.name, entries: [...g.entries] }));
+  return [...scoreGroup ? [scoreGroup] : [], ...tagGroups];
+}
+function mapLegendConfig(groups, mode) {
+  return {
+    groups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode,
+    showEmptyGroups: false,
+    showInactivePills: true
+  };
+}
+function mapLegendTop(hasTitle, hasSubtitle) {
+  return (hasTitle ? TITLE_Y + TITLE_FONT_SIZE : 0) + (hasSubtitle ? TITLE_FONT_SIZE : 0) + LEGEND_TOP_GAP2;
+}
+function mapLegendBand(legend, opts) {
+  if (!legend) return 0;
+  const groups = mapLegendGroups(legend);
+  if (groups.length === 0) return 0;
+  const config = mapLegendConfig(groups, opts.mode);
+  const state = { activeGroup: legend.activeGroup };
+  const { height } = computeLegendLayout(config, state, opts.width);
+  if (height <= 0) return 0;
+  return mapLegendTop(opts.hasTitle, opts.hasSubtitle) + height + LEGEND_BOTTOM_GAP2;
+}
+var LEGEND_TOP_GAP2, LEGEND_BOTTOM_GAP2;
+var init_legend_band = __esm({
+  "src/map/legend-band.ts"() {
+    "use strict";
+    init_legend_layout();
+    init_title_constants();
+    LEGEND_TOP_GAP2 = 8;
+    LEGEND_BOTTOM_GAP2 = 10;
+  }
+});
+
 // src/map/colorize.ts
 function assignColors(isos, adjacency) {
   const sorted = [...isos].sort();
@@ -47531,12 +47608,43 @@ function layoutMap(resolved, data, size, opts) {
     return tagFill(r.tags, activeGroup) ?? neutralFill;
   };
   const regionById = new Map(resolved.regions.map((r) => [r.iso, r]));
+  let legend = null;
+  if (!resolved.directives.noLegend) {
+    const legendTagGroups = resolved.tagGroups.map((g) => ({
+      name: g.name,
+      entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
+    }));
+    if (legendTagGroups.length > 0 || hasRamp) {
+      legend = {
+        tagGroups: legendTagGroups,
+        activeGroup,
+        ...hasRamp && {
+          ramp: {
+            ...resolved.directives.regionMetric !== void 0 && {
+              metric: resolved.directives.regionMetric
+            },
+            min: rampMin,
+            max: rampMax,
+            hue: rampHue,
+            base: rampBase
+          }
+        }
+      };
+    }
+  }
   const TITLE_GAP2 = 16;
   let topPad = FIT_PAD;
   if (resolved.title && resolved.pois.length > 0) {
     const bannerBottom = (resolved.subtitle ? TITLE_Y + TITLE_FONT_SIZE : TITLE_Y) + TITLE_FONT_SIZE / 2;
     topPad = Math.max(FIT_PAD, bannerBottom + TITLE_GAP2);
   }
+  const legendBand = mapLegendBand(legend, {
+    width,
+    mode: opts.legendMode ?? "preview",
+    hasTitle: Boolean(resolved.title),
+    hasSubtitle: Boolean(resolved.subtitle)
+  });
+  if (legendBand > topPad) topPad = legendBand;
   const fitBox = [
     [FIT_PAD, topPad],
     [
@@ -47554,7 +47662,7 @@ function layoutMap(resolved, data, size, opts) {
     const by0 = cb[0][1];
     const cw = cb[1][0] - bx0;
     const ch = cb[1][1] - by0;
-    const topReserve = resolved.title && resolved.pois.length > 0 ? topPad : 0;
+    const topReserve = resolved.title && resolved.pois.length > 0 || legendBand > 0 ? topPad : 0;
     const ox = 0;
     const oy = topReserve;
     const sx = cw > 0 ? width / cw : 1;
@@ -48618,30 +48726,6 @@ function layoutMap(resolved, data, size, opts) {
     });
     labels.push(...contextLabels);
   }
-  let legend = null;
-  if (!resolved.directives.noLegend) {
-    const tagGroups = resolved.tagGroups.map((g) => ({
-      name: g.name,
-      entries: g.entries.map((e) => ({ value: e.value, color: e.color }))
-    }));
-    if (tagGroups.length > 0 || hasRamp) {
-      legend = {
-        tagGroups,
-        activeGroup,
-        ...hasRamp && {
-          ramp: {
-            ...resolved.directives.regionMetric !== void 0 && {
-              metric: resolved.directives.regionMetric
-            },
-            min: rampMin,
-            max: rampMax,
-            hue: rampHue,
-            base: rampBase
-          }
-        }
-      };
-    }
-  }
   return {
     width,
     height,
@@ -48679,6 +48763,7 @@ var init_layout15 = __esm({
     init_label_layout();
     init_legend_constants();
     init_title_constants();
+    init_legend_band();
     init_context_labels();
     FIT_PAD = 24;
     RAMP_FLOOR2 = 15;
@@ -48878,6 +48963,9 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
       // stretch-distorting. The in-app preview pane passes no exportDims → unset →
       // keeps the global stretch-fill.
       preferContain: exportDims?.preferContain ?? false,
+      // Reserve the legend band for the mode actually drawn below (export shows
+      // only the active group; preview keeps the inactive pills).
+      legendMode: exportDims ? "export" : "preview",
       ...activeGroupOverride !== void 0 && {
         activeGroup: activeGroupOverride
       }
@@ -49169,30 +49257,12 @@ function renderMap(container, resolved, data, palette, isDark, onClickItem, expo
   if (layout.legend) {
     const legendY = (layout.title ? TITLE_Y + TITLE_FONT_SIZE : 0) + (layout.subtitle ? TITLE_FONT_SIZE : 0) + 8;
     const legendG = svg.append("g").attr("class", "dgmo-map-legend").attr("transform", `translate(0, ${legendY})`);
-    const ramp = layout.legend.ramp;
-    const scoreGroup = ramp ? {
-      name: ramp.metric?.trim() || "Value",
-      entries: [],
-      gradient: {
-        min: ramp.min,
-        max: ramp.max,
-        hue: ramp.hue,
-        base: ramp.base
-      }
-    } : null;
-    const tagGroups = layout.legend.tagGroups.filter((g) => g.entries.length > 0).map((g) => ({ name: g.name, entries: [...g.entries] }));
-    const groups = [...scoreGroup ? [scoreGroup] : [], ...tagGroups];
+    const groups = mapLegendGroups(layout.legend);
     if (groups.length > 0) {
-      const config = {
+      const config = mapLegendConfig(
         groups,
-        position: { placement: "top-center", titleRelation: "below-title" },
-        mode: exportDims ? "export" : "preview",
-        showEmptyGroups: false,
-        // Keep inactive siblings visible as pills so the user can click to flip
-        // the active colouring dimension (preview only — export shows just the
-        // active group).
-        showInactivePills: true
-      };
+        exportDims ? "export" : "preview"
+      );
       const state = { activeGroup: layout.legend.activeGroup };
       renderLegendD3(legendG, config, state, palette, isDark, void 0, width);
     }
@@ -49237,6 +49307,7 @@ var init_renderer16 = __esm({
     init_title_constants();
     init_color_utils();
     init_legend_d3();
+    init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
   }
@@ -49257,9 +49328,10 @@ function mapContentAspect(resolved, data, ref = REF) {
   const aspect = w / h;
   return Number.isFinite(aspect) && aspect > 0 ? aspect : FALLBACK_ASPECT;
 }
-function mapExportDimensions(resolved, data, baseWidth = 1200) {
-  const raw = mapContentAspect(resolved, data);
-  const clamped = Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
+function mapExportDimensions(resolved, data, baseWidth = 1200, aspectOverride) {
+  const useOverride = aspectOverride !== void 0 && Number.isFinite(aspectOverride) && aspectOverride > 0;
+  const raw = useOverride ? aspectOverride : mapContentAspect(resolved, data);
+  const clamped = useOverride ? raw : Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
   const width = baseWidth;
   let height = Math.round(width / clamped);
   let chromeReserve = 0;
@@ -49272,7 +49344,7 @@ function mapExportDimensions(resolved, data, baseWidth = 1200) {
     height = Math.round(chromeReserve + MIN_MAP_BAND);
     floored = true;
   }
-  const preferContain = clamped !== raw || floored;
+  const preferContain = useOverride ? floored : clamped !== raw || floored;
   return { width, height, preferContain };
 }
 var import_d3_geo3, FIT_PAD2, TITLE_GAP, ASPECT_MAX, ASPECT_MIN, MIN_MAP_BAND, FALLBACK_ASPECT, REF;
@@ -54979,7 +55051,6 @@ function renderTimelineTagLegendOverlay(container, parsed, palette, isDark, setu
 function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, setup, hovers, onClickItem, _exportDims, _swimlaneTagGroup, _activeTagGroup, _onTagStateChange, _viewMode) {
   const {
     width,
-    height,
     tooltip,
     solid,
     textColor,
@@ -55028,8 +55099,7 @@ function renderTimelineHorizontalTimeSort(container, parsed, palette, isDark, se
   const markerLabelY = markerReserve ? -(topScaleH + MARKER_ROW_H / 2) : 0;
   const eraLabelY = eraReserve ? -(topScaleH + markerReserve + ERA_ROW_H / 2) : 0;
   const innerWidth = width - margin.left - margin.right;
-  const availInnerHeight = height - margin.top - margin.bottom;
-  const rowH = Math.min(ctx.structural(28), availInnerHeight / sorted.length);
+  const rowH = ctx.structural(28);
   const innerHeight = rowH * sorted.length;
   const usedHeight = margin.top + innerHeight + margin.bottom;
   const xScale = d3Scale2.scaleLinear().domain([minDate - datePadding, maxDate + datePadding]).range([0, innerWidth]);
@@ -57554,7 +57624,12 @@ async function renderForExport(content, theme, palette, viewState, options) {
       }
     }
     const mapResolved = resolveMap2(mapParsed, mapData);
-    const dims2 = mapExportDimensions2(mapResolved, mapData, EXPORT_WIDTH);
+    const dims2 = mapExportDimensions2(
+      mapResolved,
+      mapData,
+      EXPORT_WIDTH,
+      options?.mapAspect
+    );
     const container2 = createExportContainer(dims2.width, dims2.height);
     renderMapForExport2(
       container2,
@@ -58347,8 +58422,10 @@ __export(index_exports, {
   decodeDiagramUrl: () => decodeDiagramUrl2,
   encodeDiagramUrl: () => encodeDiagramUrl2,
   formatDgmoError: () => formatDgmoError,
+  getEmbedSvgViewBox: () => getEmbedSvgViewBox,
   getMinDimensions: () => getMinDimensions,
   getPalette: () => getPalette,
+  normalizeSvgForEmbed: () => normalizeSvgForEmbed,
   palettes: () => palettes,
   render: () => render2,
   themes: () => themes,
@@ -58720,6 +58797,134 @@ function extractInfraCounts(content) {
   return { nodes: parsed.nodes.length };
 }
 
+// src/utils/svg-embed.ts
+function normalizeSvgForEmbed(input) {
+  let svg = input;
+  const rootMatch = svg.match(/<svg[^>]*>/);
+  const rootTag = rootMatch?.[0] ?? "";
+  if (rootTag && !rootTag.includes("viewBox")) {
+    const wh = rootTag.match(/width="(\d+)"[^>]*height="(\d+)"/);
+    if (wh) {
+      svg = svg.replace(/<svg/, `<svg viewBox="0 0 ${wh[1]} ${wh[2]}"`);
+    }
+  }
+  const tight = computeBBox(svg);
+  if (tight && tight.width > 0 && tight.height > 0) {
+    const pad2 = 16;
+    const vb = `${tight.x - pad2} ${tight.y - pad2} ${tight.width + pad2 * 2} ${tight.height + pad2 * 2}`;
+    svg = svg.replace(/(<svg[^>]*?)viewBox="[^"]*"/, `$1viewBox="${vb}"`);
+  }
+  svg = svg.replace(/(<svg[^>]*?) width="[^"]*"/g, "$1");
+  svg = svg.replace(/(<svg[^>]*?) height="[^"]*"/g, "$1");
+  svg = svg.replace(/(<svg[^>]*?style="[^"]*?)background:[^;"]*;?\s*/g, "$1");
+  svg = svg.replace(/<svg\s{2,}/g, "<svg ");
+  return svg;
+}
+function getEmbedSvgViewBox(svg) {
+  const tight = computeBBox(svg);
+  if (!tight || tight.width <= 0 || tight.height <= 0) return null;
+  const pad2 = 16;
+  return {
+    x: tight.x - pad2,
+    y: tight.y - pad2,
+    width: tight.width + pad2 * 2,
+    height: tight.height + pad2 * 2
+  };
+}
+function computeBBox(svg) {
+  const xs = [];
+  const ys = [];
+  function push(x, y) {
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      xs.push(x);
+      ys.push(y);
+    }
+  }
+  function attr(tag, name) {
+    const m = tag.match(new RegExp(`\\b${name}="([^"]*)"`));
+    if (!m) return null;
+    const n = parseFloat(m[1]);
+    return Number.isFinite(n) ? n : null;
+  }
+  for (const m of svg.matchAll(/<rect\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    const w = attr(tag, "width");
+    const h = attr(tag, "height");
+    if (x !== null && y !== null && w !== null && h !== null) {
+      push(x, y);
+      push(x + w, y + h);
+    }
+  }
+  for (const m of svg.matchAll(/<line\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const x1 = attr(tag, "x1");
+    const y1 = attr(tag, "y1");
+    const x2 = attr(tag, "x2");
+    const y2 = attr(tag, "y2");
+    if (x1 !== null && y1 !== null && x2 !== null && y2 !== null) {
+      push(x1, y1);
+      push(x2, y2);
+    }
+  }
+  for (const m of svg.matchAll(/<circle\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const r = attr(tag, "r");
+    if (cx !== null && cy !== null && r !== null) {
+      push(cx - r, cy - r);
+      push(cx + r, cy + r);
+    }
+  }
+  for (const m of svg.matchAll(/<ellipse\b[^>]*?\/?>/g)) {
+    const tag = m[0];
+    const cx = attr(tag, "cx");
+    const cy = attr(tag, "cy");
+    const rx = attr(tag, "rx");
+    const ry = attr(tag, "ry");
+    if (cx !== null && cy !== null && rx !== null && ry !== null) {
+      push(cx - rx, cy - ry);
+      push(cx + rx, cy + ry);
+    }
+  }
+  for (const m of svg.matchAll(/<text\b([^>]*?)>([\s\S]*?)<\/text>/g)) {
+    const tag = `<text${m[1]}>`;
+    const text = m[2].replace(/<[^>]+>/g, "");
+    const x = attr(tag, "x");
+    const y = attr(tag, "y");
+    if (x !== null && y !== null) {
+      const w = text.length * 7;
+      push(x - w / 2, y - 14);
+      push(x + w / 2, y + 4);
+    }
+  }
+  for (const m of svg.matchAll(/<path\b[^>]*?\bd="([^"]+)"/g)) {
+    const d = m[1];
+    const nums = d.match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  for (const m of svg.matchAll(
+    /<(?:polygon|polyline)\b[^>]*?\bpoints="([^"]+)"/g
+  )) {
+    const nums = m[1].match(/-?\d+(?:\.\d+)?/g);
+    if (!nums) continue;
+    for (let i = 0; i + 1 < nums.length; i += 2) {
+      push(parseFloat(nums[i]), parseFloat(nums[i + 1]));
+    }
+  }
+  if (xs.length === 0 || ys.length === 0) return null;
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
 // src/map/completion.ts
 var fold2 = (s) => s.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase().trim();
 var groupThousands = (n) => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -58844,8 +59049,10 @@ function decodeDiagramUrl2(url) {
   decodeDiagramUrl,
   encodeDiagramUrl,
   formatDgmoError,
+  getEmbedSvgViewBox,
   getMinDimensions,
   getPalette,
+  normalizeSvgForEmbed,
   palettes,
   render,
   themes,