@diagrammo/dgmo 0.23.0 → 0.24.0

package/dist/index.cjs

@@ -26567,7 +26567,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 +26908,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 +26936,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 +27041,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 +46778,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 +46863,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 +46891,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 +46904,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 +46983,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 +47612,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 +47666,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 +48730,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 +48767,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 +48967,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 +49261,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 +49311,7 @@ var init_renderer16 = __esm({
     init_title_constants();
     init_color_utils();
     init_legend_d3();
+    init_legend_band();
     init_layout15();
     LABEL_FONT = 11;
   }
@@ -49257,9 +49332,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 +49348,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 +55055,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 +55103,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 +57628,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 +58426,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 +58801,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 +59053,10 @@ function decodeDiagramUrl2(url) {
   decodeDiagramUrl,
   encodeDiagramUrl,
   formatDgmoError,
+  getEmbedSvgViewBox,
   getMinDimensions,
   getPalette,
+  normalizeSvgForEmbed,
   palettes,
   render,
   themes,

package/dist/index.d.cts

@@ -182,6 +182,42 @@ declare function getMinDimensions(content: string): {
     height: number;
 };
 
+/**
+ * Make an SVG produced by `@diagrammo/dgmo`'s static `render()` suitable for
+ * responsive inline embedding in any host (Obsidian, remark/markdown, web
+ * pages):
+ *
+ * - dgmo renders diagrams inside a fixed export canvas (e.g.
+ *   `viewBox="0 0 1200 800"`), with content often occupying only a fraction
+ *   of it. We compute a tight content bounding box from element coordinates
+ *   and set the root `viewBox` to bbox+padding, so the diagram's intrinsic
+ *   aspect ratio matches its CONTENT — no dead space above/below or beside it.
+ * - Ensure the root `<svg>` has a `viewBox` so it scales responsively.
+ * - Strip fixed `width="N"` / `height="N"` so CSS (e.g. `width:100%;
+ *   height:auto`, or an aspect-ratio derived from the tight viewBox) controls
+ *   sizing.
+ * - Remove any inline `background:` from the root style so the page
+ *   background shows through.
+ *
+ * This is intentionally a string transform, not a DOM `getBBox()` step: dgmo
+ * can dual-render light/dark SVGs where one is hidden by color-mode CSS, and
+ * `getBBox()` returns 0 for the hidden copy. Parsing coordinates from the
+ * markup measures both copies reliably and works server-side (Node).
+ */
+declare function normalizeSvgForEmbed(input: string): string;
+/**
+ * Parse the content bounding box of a normalized embed SVG, if one can be
+ * derived. Returns `null` when no usable coordinates are found (e.g. an empty
+ * diagram). Useful for hosts that want to set an explicit `aspect-ratio` from
+ * the tight viewBox.
+ */
+declare function getEmbedSvgViewBox(svg: string): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;
+
 /**
  * A gazetteer city entry: `[lat, lon, iso, pop, name, sub?]`.
  * - `lat`/`lon` — rounded to 3 decimals.
@@ -336,4 +372,4 @@ interface DecodedDiagramUrl {
  */
 declare function decodeDiagramUrl(url: string): DecodedDiagramUrl | null;
 
-export { type CompactViewState, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type EncodeDiagramUrlOptions, type Gazetteer, type GazetteerEntry, type MapCompletionOptions, type MapPlaceCompletion, type MapRegionCompletion, type PaletteColors, type PaletteConfig, type RegionName, type RegionNames, type RenderOptions, type RenderResult, type Theme, completeMapPlaces, completeMapRegions, decodeDiagramUrl, encodeDiagramUrl, formatDgmoError, getMinDimensions, getPalette, palettes, render, themes, parseDgmo as validate };
+export { type CompactViewState, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type EncodeDiagramUrlOptions, type Gazetteer, type GazetteerEntry, type MapCompletionOptions, type MapPlaceCompletion, type MapRegionCompletion, type PaletteColors, type PaletteConfig, type RegionName, type RegionNames, type RenderOptions, type RenderResult, type Theme, completeMapPlaces, completeMapRegions, decodeDiagramUrl, encodeDiagramUrl, formatDgmoError, getEmbedSvgViewBox, getMinDimensions, getPalette, normalizeSvgForEmbed, palettes, render, themes, parseDgmo as validate };

package/dist/index.d.ts

@@ -182,6 +182,42 @@ declare function getMinDimensions(content: string): {
     height: number;
 };
 
+/**
+ * Make an SVG produced by `@diagrammo/dgmo`'s static `render()` suitable for
+ * responsive inline embedding in any host (Obsidian, remark/markdown, web
+ * pages):
+ *
+ * - dgmo renders diagrams inside a fixed export canvas (e.g.
+ *   `viewBox="0 0 1200 800"`), with content often occupying only a fraction
+ *   of it. We compute a tight content bounding box from element coordinates
+ *   and set the root `viewBox` to bbox+padding, so the diagram's intrinsic
+ *   aspect ratio matches its CONTENT — no dead space above/below or beside it.
+ * - Ensure the root `<svg>` has a `viewBox` so it scales responsively.
+ * - Strip fixed `width="N"` / `height="N"` so CSS (e.g. `width:100%;
+ *   height:auto`, or an aspect-ratio derived from the tight viewBox) controls
+ *   sizing.
+ * - Remove any inline `background:` from the root style so the page
+ *   background shows through.
+ *
+ * This is intentionally a string transform, not a DOM `getBBox()` step: dgmo
+ * can dual-render light/dark SVGs where one is hidden by color-mode CSS, and
+ * `getBBox()` returns 0 for the hidden copy. Parsing coordinates from the
+ * markup measures both copies reliably and works server-side (Node).
+ */
+declare function normalizeSvgForEmbed(input: string): string;
+/**
+ * Parse the content bounding box of a normalized embed SVG, if one can be
+ * derived. Returns `null` when no usable coordinates are found (e.g. an empty
+ * diagram). Useful for hosts that want to set an explicit `aspect-ratio` from
+ * the tight viewBox.
+ */
+declare function getEmbedSvgViewBox(svg: string): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | null;
+
 /**
  * A gazetteer city entry: `[lat, lon, iso, pop, name, sub?]`.
  * - `lat`/`lon` — rounded to 3 decimals.
@@ -336,4 +372,4 @@ interface DecodedDiagramUrl {
  */
 declare function decodeDiagramUrl(url: string): DecodedDiagramUrl | null;
 
-export { type CompactViewState, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type EncodeDiagramUrlOptions, type Gazetteer, type GazetteerEntry, type MapCompletionOptions, type MapPlaceCompletion, type MapRegionCompletion, type PaletteColors, type PaletteConfig, type RegionName, type RegionNames, type RenderOptions, type RenderResult, type Theme, completeMapPlaces, completeMapRegions, decodeDiagramUrl, encodeDiagramUrl, formatDgmoError, getMinDimensions, getPalette, palettes, render, themes, parseDgmo as validate };
+export { type CompactViewState, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type EncodeDiagramUrlOptions, type Gazetteer, type GazetteerEntry, type MapCompletionOptions, type MapPlaceCompletion, type MapRegionCompletion, type PaletteColors, type PaletteConfig, type RegionName, type RegionNames, type RenderOptions, type RenderResult, type Theme, completeMapPlaces, completeMapRegions, decodeDiagramUrl, encodeDiagramUrl, formatDgmoError, getEmbedSvgViewBox, getMinDimensions, getPalette, normalizeSvgForEmbed, palettes, render, themes, parseDgmo as validate };