@diagrammo/dgmo 0.23.0 → 0.24.0

package/src/index.ts

@@ -213,6 +213,14 @@ export { themes, type Theme } from './themes';
 
 export { getMinDimensions } from './dimensions';
 
+// ============================================================
+// SVG embed normalization (responsive inline embedding)
+// ============================================================
+// Tightens a static render() SVG's viewBox to its content + strips fixed
+// width/height so hosts (Obsidian, remark/markdown, web) can size it to its
+// natural aspect ratio with no dead space. Pure string transform.
+export { normalizeSvgForEmbed, getEmbedSvgViewBox } from './utils/svg-embed';
+
 // ============================================================
 // Map chart-type completion (gazetteer-fed; §24B.5/.8)
 // ============================================================

package/src/map/dimensions.ts

@@ -83,10 +83,24 @@ export interface MapExportDimensions {
 export function mapExportDimensions(
   resolved: ResolvedMap,
   data: MapData,
-  baseWidth = 1200
+  baseWidth = 1200,
+  /** WYSIWYG override (app export): the live preview pane's displayed aspect
+   *  (width / height). When provided, the canvas adopts it verbatim and
+   *  stretch-fills (no clamp, no contain) so the PNG matches exactly what's on
+   *  screen. Omitted by every headless consumer (CLI / MCP / SSG / Obsidian),
+   *  which keep the intrinsic-aspect sizing below. */
+  aspectOverride?: number
 ): MapExportDimensions {
-  const raw = mapContentAspect(resolved, data);
-  const clamped = Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
+  const useOverride =
+    aspectOverride !== undefined &&
+    Number.isFinite(aspectOverride) &&
+    aspectOverride > 0;
+  const raw = useOverride ? aspectOverride : mapContentAspect(resolved, data);
+  // The override is the user's on-screen aspect — honour it as-is (no clamp);
+  // only the intrinsic path guards against pathological extents.
+  const clamped = useOverride
+    ? raw
+    : Math.max(ASPECT_MIN, Math.min(ASPECT_MAX, raw));
   const width = baseWidth;
   let height = Math.round(width / clamped);
 
@@ -111,7 +125,9 @@ export function mapExportDimensions(
   }
 
   // The canvas was forced off the content aspect ⇒ tell the renderer to
-  // contain-fit (letterbox) rather than stretch-distort.
-  const preferContain = clamped !== raw || floored;
+  // contain-fit (letterbox) rather than stretch-distort. The WYSIWYG override is
+  // exempt: it stretch-fills (mirroring the preview pane) unless the MIN_MAP_BAND
+  // floor had to grow the canvas off-aspect.
+  const preferContain = useOverride ? floored : clamped !== raw || floored;
   return { width, height, preferContain };
 }

package/src/map/layout.ts

@@ -36,6 +36,9 @@ import {
 import type { LabelRect, PointCircle } from '../label-layout';
 import { measureLegendText } from '../utils/legend-constants';
 import { TITLE_FONT_SIZE, TITLE_Y } from '../utils/title-constants';
+import type { LegendMode } from '../utils/legend-types';
+import { mapLegendBand } from './legend-band';
+import type { MapLayoutLegend } from './types';
 import type { DgmoError } from '../diagnostics';
 import type { BoundaryTopology } from './data/types';
 import type {
@@ -363,21 +366,11 @@ export interface PlacedLabel {
   readonly lineNumber: number;
 }
 
-export interface MapLayoutLegend {
-  readonly tagGroups: ReadonlyArray<{
-    name: string;
-    entries: ReadonlyArray<{ value: string; color: string }>;
-  }>;
-  readonly activeGroup: string | null;
-  readonly ramp?: {
-    metric?: string;
-    min: number;
-    max: number;
-    hue: string;
-    /** Low end of the ramp gradient (the land colour the fills blend from). */
-    base: string;
-  };
-}
+// MapLayoutLegend now lives in ./types (imported for local use + re-exported
+// below) so that ./legend-band can consume the type without importing this
+// module, which would re-introduce the layout↔legend-band cycle (this module
+// value-imports mapLegendBand from ./legend-band).
+export type { MapLayoutLegend };
 
 /** A drawn river centerline — an open stroked path (no fill). */
 export interface MapLayoutRiver {
@@ -482,6 +475,10 @@ export interface LayoutOptions {
    *  canvas away from the content aspect, so the off-aspect canvas doesn't
    *  re-distort. The in-app preview pane leaves this unset (keeps stretch-fill). */
   readonly preferContain?: boolean;
+  /** Which legend variant gets drawn — `'export'` shows only the active group,
+   *  `'preview'` keeps inactive pills. Used to size the reserved legend band so
+   *  the projected land starts below the legend. Defaults to `'preview'`. */
+  readonly legendMode?: LegendMode;
 }
 
 interface Size {
@@ -1168,6 +1165,35 @@ export function layoutMap(
 
   const regionById = new Map(resolved.regions.map((r) => [r.iso, r]));
 
+  // -- Legend model (AR1: categorical via renderer's renderLegendD3). Built here
+  // (before the fit) so the fit can reserve a band for it. Only the colouring
+  // dimensions (value ramp + tag groups) get a legend; POI size and edge
+  // thickness are self-evident from the marker/line scale and carry no key. --
+  let legend: MapLayoutLegend | null = 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 !== undefined && {
+              metric: resolved.directives.regionMetric,
+            }),
+            min: rampMin,
+            max: rampMax,
+            hue: rampHue,
+            base: rampBase,
+          },
+        }),
+      };
+    }
+  }
+
   // -- Fit the projection to the canvas (size-dependent; the projection + fit
   // target themselves came from buildMapProjection above). --
   // Reserve top padding for the title/subtitle banner ONLY when there are POIs,
@@ -1183,6 +1209,18 @@ export function layoutMap(
       TITLE_FONT_SIZE / 2;
     topPad = Math.max(FIT_PAD, bannerBottom + TITLE_GAP);
   }
+  // Reserve a band for the top-center legend so the projected land starts BELOW
+  // it (the legend is a foreground overlay — without this it covers land, e.g.
+  // Europe on a world map). The band is measured from the SAME groups/config the
+  // renderer draws (mode-aware: export shows only the active group), so the
+  // reserve matches the rendered legend exactly.
+  const legendBand = mapLegendBand(legend, {
+    width,
+    mode: opts.legendMode ?? 'preview',
+    hasTitle: Boolean(resolved.title),
+    hasSubtitle: Boolean(resolved.subtitle),
+  });
+  if (legendBand > topPad) topPad = legendBand;
   const fitBox: [[number, number], [number, number]] = [
     [FIT_PAD, topPad],
     [
@@ -1223,7 +1261,10 @@ export function layoutMap(
     // edge, not 24px short of it with a coastline ringing the gap). The title
     // overlays the top; we reserve a top band only when POIs are present (so
     // their markers don't project up under the foreground title banner).
-    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;
@@ -2887,36 +2928,6 @@ export function layoutMap(
     labels.push(...contextLabels);
   }
 
-  // -- Legend model (AR1: categorical via renderer's renderLegendD3) --
-  let legend: MapLayoutLegend | null = 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 })),
-    }));
-    // Only the colouring dimensions (value ramp + tag groups) get a legend.
-    // POI size and edge thickness are self-evident from the marker/line scale and
-    // intentionally carry no key (the poi-metric/flow-metric labels are captured
-    // for future use but not rendered as legend keys in v1).
-    if (tagGroups.length > 0 || hasRamp) {
-      legend = {
-        tagGroups,
-        activeGroup,
-        ...(hasRamp && {
-          ramp: {
-            ...(resolved.directives.regionMetric !== undefined && {
-              metric: resolved.directives.regionMetric,
-            }),
-            min: rampMin,
-            max: rampMax,
-            hue: rampHue,
-            base: rampBase,
-          },
-        }),
-      };
-    }
-  }
-
   return {
     width,
     height,

package/src/map/legend-band.ts

@@ -0,0 +1,99 @@
+// Vertical band reserved at the top of a map canvas for the choropleth / tag
+// legend, so the projected land starts BELOW the legend instead of being covered
+// by it. The legend (§24B.11) is drawn as a top-center foreground overlay; on a
+// world map that placement sits over land (e.g. Europe), hiding it. Reserving a
+// band in the fit box pushes the map down so the legend clears the land.
+//
+// Shared by `layoutMap` (grows `topPad`) and `mapExportDimensions` is intentionally
+// NOT a consumer — the canvas height is independent; the band only repositions the
+// map WITHIN the canvas. The group builder + config are reused by the renderer so
+// the measured band matches exactly what gets drawn.
+import { computeLegendLayout } from '../utils/legend-layout';
+import { TITLE_FONT_SIZE, TITLE_Y } from '../utils/title-constants';
+import type {
+  LegendConfig,
+  LegendGroupData,
+  LegendMode,
+  LegendState,
+} from '../utils/legend-types';
+import type { MapLayoutLegend } from './types';
+
+// Gap between the title/subtitle banner and the legend top — mirrors the `+ 8`
+// in renderer.ts `legendY`.
+const LEGEND_TOP_GAP = 8;
+// Gap between the legend bottom and the start of the map content.
+const LEGEND_BOTTOM_GAP = 10;
+
+/** The legend's colouring groups (score ramp first, then non-empty tag groups) —
+ *  the SAME array the renderer draws, so a measured layout matches the rendered
+ *  one. Empty when the legend has neither a ramp nor any populated tag group. */
+export function mapLegendGroups(legend: MapLayoutLegend): LegendGroupData[] {
+  const ramp = legend.ramp;
+  // Reserved name "Value" when no region-metric label is set — must match
+  // VALUE_NAME in layout.ts so the resolved activeGroup selects it.
+  const scoreGroup: LegendGroupData | null = ramp
+    ? {
+        name: ramp.metric?.trim() || 'Value',
+        entries: [],
+        gradient: {
+          min: ramp.min,
+          max: ramp.max,
+          hue: ramp.hue,
+          base: ramp.base,
+        },
+      }
+    : null;
+  const tagGroups: LegendGroupData[] = legend.tagGroups
+    .filter((g) => g.entries.length > 0)
+    .map((g) => ({ name: g.name, entries: [...g.entries] }));
+  return [...(scoreGroup ? [scoreGroup] : []), ...tagGroups];
+}
+
+/** The shared map-legend config (top-center, below the title, inactive pills kept
+ *  so the preview can flip the active colouring dimension). `mode` gates the
+ *  export-only filtering (active group only). */
+export function mapLegendConfig(
+  groups: readonly LegendGroupData[],
+  mode: LegendMode
+): LegendConfig {
+  return {
+    groups,
+    position: { placement: 'top-center', titleRelation: 'below-title' },
+    mode,
+    showEmptyGroups: false,
+    showInactivePills: true,
+  };
+}
+
+/** Y of the legend's top edge — mirrors `legendY` in renderer.ts. */
+export function mapLegendTop(hasTitle: boolean, hasSubtitle: boolean): number {
+  return (
+    (hasTitle ? TITLE_Y + TITLE_FONT_SIZE : 0) +
+    (hasSubtitle ? TITLE_FONT_SIZE : 0) +
+    LEGEND_TOP_GAP
+  );
+}
+
+/** Total vertical band (px from the canvas top) the legend occupies = its top Y +
+ *  measured height + a bottom gap. Returns 0 when no legend is drawn, so callers
+ *  can `Math.max` it into their existing top reserve without special-casing. */
+export function mapLegendBand(
+  legend: MapLayoutLegend | null,
+  opts: {
+    width: number;
+    mode: LegendMode;
+    hasTitle: boolean;
+    hasSubtitle: boolean;
+  }
+): number {
+  if (!legend) return 0;
+  const groups = mapLegendGroups(legend);
+  if (groups.length === 0) return 0;
+  const config = mapLegendConfig(groups, opts.mode);
+  const state: LegendState = { activeGroup: legend.activeGroup };
+  const { height } = computeLegendLayout(config, state, opts.width);
+  if (height <= 0) return 0;
+  return (
+    mapLegendTop(opts.hasTitle, opts.hasSubtitle) + height + LEGEND_BOTTOM_GAP
+  );
+}

package/src/map/renderer.ts

@@ -14,6 +14,7 @@ import {
 import { mix } from '../palettes/color-utils';
 import { renderLegendD3 } from '../utils/legend-d3';
 import type { LegendConfig, LegendState } from '../utils/legend-types';
+import { mapLegendConfig, mapLegendGroups } from './legend-band';
 import type { PaletteColors } from '../palettes/types';
 import type { D3ExportDimensions } from '../utils/d3-types';
 import type { MapData, ResolvedMap } from './resolved-types';
@@ -236,6 +237,9 @@ export function renderMap(
       // 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 !== undefined && {
         activeGroup: activeGroupOverride,
       }),
@@ -912,36 +916,14 @@ export function renderMap(
       .attr('transform', `translate(0, ${legendY})`);
     // The value ramp is a selectable colouring group alongside the tag groups
     // (the user flips between them); its capsule renders the gradient inline.
-    // Reserved name "Value" when no region-metric label is set — must match
-    // VALUE_NAME in layout.ts so the resolved activeGroup selects it.
-    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];
+    // Built from the shared helper so the drawn legend matches the band the
+    // layout reserved for it (see legend-band.ts).
+    const groups = mapLegendGroups(layout.legend);
     if (groups.length > 0) {
-      const config: LegendConfig = {
+      const config: LegendConfig = 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: LegendState = { activeGroup: layout.legend.activeGroup };
       renderLegendD3(legendG, config, state, palette, isDark, undefined, width);
     }

package/src/map/resolver.ts

@@ -64,6 +64,16 @@ const WORLD_LAT_NORTH = 78;
 // the dots. A tight cluster (e.g. Bay Area cities) therefore frames as ≈ its
 // home state + neighbours rather than the whole nation. Tunable.
 const POI_ZOOM_FLOOR_DEG = 7;
+// POI-only container framing reveals the region(s) that CONTAIN the dots, but a
+// single POI near the edge of a tall/wide country (e.g. Cartagena at the north
+// tip of Colombia) would otherwise drag the frame to that country's far edge —
+// all the way to the Amazon, ~15° below the southernmost dot. Clamp the container
+// union so it reveals at most this many degrees of container BEYOND the POI
+// cluster on each side: northern Colombia stays for orientation, the empty
+// interior is cropped. Sized so an edge cluster still reaches across a US
+// state-scale container (a Bay-Area cluster sits on the coast, ~8° from the
+// Nevada border, and must still show the whole of California). Tunable.
+const CONTAINER_OVERSHOOT_DEG = 8;
 // Above this longitudinal span a US POI-only extent is "national" — use the
 // albers-usa composite (CONUS conic + AK/HI insets) instead of regional Mercator.
 // CONUS spans ≈58° lon; 48° is "most of the country". Tunable.
@@ -798,7 +808,11 @@ export function resolveMap(parsed: ParsedMap, data: MapData): ResolvedMap {
       if (bb && !isWholeSphere(bb)) containerBoxes.push(bb);
     }
     const containerUnion = unionExtent(containerBoxes, points);
-    if (containerUnion) extent = pad(containerUnion, PAD_FRACTION);
+    if (containerUnion)
+      extent = pad(
+        clampContainerToCluster(containerUnion, points),
+        PAD_FRACTION
+      );
   }
 
   // POI-only fit-to-cluster zoom floor. With region framing above, the extent is
@@ -934,6 +948,34 @@ function mostCommonCountry(
   return best;
 }
 
+/** Asymmetric container clamp (R-poi-region overshoot guard). Container framing
+ *  reveals the region(s) holding the POIs, but one POI at the edge of a tall/wide
+ *  country drags the frame to that country's far edge. Cap how far the frame
+ *  extends BEYOND the POI cluster on each side at CONTAINER_OVERSHOOT_DEG. Latitude
+ *  always clamps; longitude clamps only when neither extent crosses the
+ *  antimeridian seam (a wrapped extent carries east > 180), where naive min/max
+ *  would be wrong. Never tightens past the cluster itself, so the dots stay
+ *  framed, and never widens it — the container edge is still the outer bound. */
+function clampContainerToCluster(
+  container: GeoExtent,
+  points: Array<[number, number]>
+): GeoExtent {
+  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: GeoExtent, frac: number): GeoExtent {
   const dLon = (e[1][0] - e[0][0]) * frac || 1;
   const dLat = (e[1][1] - e[0][1]) * frac || 1;

package/src/map/types.ts

@@ -142,3 +142,23 @@ export interface ParsedMap {
   readonly diagnostics: readonly DgmoError[];
   readonly error: string | null;
 }
+
+/** Legend descriptor for a rendered map (a layout-stage output, re-exported from
+ *  `layout.ts`). It lives here so the `legend-band` helper can consume it without
+ *  importing `layout` — `layout` already value-imports `mapLegendBand`, so the
+ *  reverse type import would form a layout↔legend-band cycle. */
+export interface MapLayoutLegend {
+  readonly tagGroups: ReadonlyArray<{
+    name: string;
+    entries: ReadonlyArray<{ value: string; color: string }>;
+  }>;
+  readonly activeGroup: string | null;
+  readonly ramp?: {
+    metric?: string;
+    min: number;
+    max: number;
+    hue: string;
+    /** Low end of the ramp gradient (the land colour the fills blend from). */
+    base: string;
+  };
+}

package/src/utils/svg-embed.ts

@@ -0,0 +1,193 @@
+/**
+ * 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).
+ */
+export function normalizeSvgForEmbed(input: string): string {
+  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 pad = 16;
+    const vb = `${tight.x - pad} ${tight.y - pad} ${tight.width + pad * 2} ${tight.height + pad * 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;
+}
+
+/**
+ * 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.
+ */
+export function getEmbedSvgViewBox(
+  svg: string
+): { x: number; y: number; width: number; height: number } | null {
+  const tight = computeBBox(svg);
+  if (!tight || tight.width <= 0 || tight.height <= 0) return null;
+  const pad = 16;
+  return {
+    x: tight.x - pad,
+    y: tight.y - pad,
+    width: tight.width + pad * 2,
+    height: tight.height + pad * 2,
+  };
+}
+
+/**
+ * Compute an approximate content bounding box from raw element coordinates.
+ *
+ * This is a regex walk, not a real SVG layout — it ignores `transform`
+ * attributes and uses a heuristic for text widths. dgmo's renderers mostly use
+ * absolute coordinates within their viewBox, so the approximation is close
+ * enough that the rendered output reliably fills the visible area.
+ */
+function computeBBox(
+  svg: string
+): { x: number; y: number; width: number; height: number } | null {
+  const xs: number[] = [];
+  const ys: number[] = [];
+
+  function push(x: number, y: number): void {
+    if (Number.isFinite(x) && Number.isFinite(y)) {
+      xs.push(x);
+      ys.push(y);
+    }
+  }
+
+  function attr(tag: string, name: string): number | null {
+    const m = tag.match(new RegExp(`\\b${name}="([^"]*)"`));
+    if (!m) return null;
+    const n = parseFloat(m[1]!);
+    return Number.isFinite(n) ? n : null;
+  }
+
+  // <rect x y width height>
+  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);
+    }
+  }
+
+  // <line x1 y1 x2 y2>
+  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);
+    }
+  }
+
+  // <circle cx cy r>
+  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);
+    }
+  }
+
+  // <ellipse cx cy rx ry>
+  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);
+    }
+  }
+
+  // <text x y>some content</text>
+  // Approximate width: text content length × an empirical font width factor.
+  // dgmo uses Inter ~14px by default; ~7px per character is a usable rough
+  // estimate that won't drastically under- or over-count.
+  for (const m of svg.matchAll(/<text\b([^>]*?)>([\s\S]*?)<\/text>/g)) {
+    const tag = `<text${m[1]}>`;
+    const text = m[2]!.replace(/<[^>]+>/g, ''); // strip inner tags (tspan, etc.)
+    const x = attr(tag, 'x');
+    const y = attr(tag, 'y');
+    if (x !== null && y !== null) {
+      const w = text.length * 7;
+      // text-anchor may be start/middle/end; assume worst case (middle).
+      push(x - w / 2, y - 14);
+      push(x + w / 2, y + 4);
+    }
+  }
+
+  // <path d="..."> — pull every coordinate pair out of the d attribute.
+  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]!));
+    }
+  }
+
+  // <polygon points="x,y x,y ..."> and <polyline>
+  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 };
+}