@diagrammo/dgmo 0.23.0 → 0.25.0

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/sequence/parser.ts

@@ -200,10 +200,6 @@ export type SequenceElement =
   | SequenceSection
   | SequenceNote;
 
-export function isSequenceMessage(el: SequenceElement): el is SequenceMessage {
-  return el.kind === 'message';
-}
-
 export function isSequenceBlock(el: SequenceElement): el is SequenceBlock {
   return el.kind === 'block';
 }

package/src/utils/brand.ts

@@ -27,23 +27,6 @@
  */
 export type Brand<T, B extends string> = T & { readonly __brand: B };
 
-/**
- * Cast a raw value to a branded type. The only legal "mint" point —
- * call this at the boundary where unbranded data (parser input,
- * external API) enters branded territory.
- *
- *   const id = asBrand<NodeId>(rawString);
- *
- * Inverts trivially: a `Brand<T, B>` is assignable to `T` without a
- * cast, so consumers that want the underlying primitive lose the
- * brand naturally.
- */
-export function asBrand<B>(
-  value: B extends Brand<infer T, string> ? T : never
-): B {
-  return value as B;
-}
-
 // ============================================================
 // Writable<T> — escape hatch for parsers that need a mutable
 // construction phase before returning a `readonly`-typed value.

package/src/utils/legend-d3.ts

@@ -31,6 +31,16 @@ import type {
   D3Sel,
 } from './legend-types';
 
+// Vertically center an SVG <text> across engines. WebKit drops
+// `dominant-baseline` on <text>, and resvg has limited support too
+// (see legend-svg.ts), so we use the alphabetic baseline (the shared
+// default) plus an em-relative dy. 0.32em matches legend-svg.ts's
+// proven pill offset (fontSize/2 - 2 = 0.318em at 11px).
+const LEGEND_TEXT_DY = '0.32em';
+function centerText(sel: D3Sel): D3Sel {
+  return sel.attr('dy', LEGEND_TEXT_DY);
+}
+
 // ── Main renderer ───────────────────────────────────────────
 
 export function renderLegendD3(
@@ -190,7 +200,7 @@ function renderCapsule(
     .attr('x', pill.x + pill.width / 2)
     .attr('y', LEGEND_HEIGHT / 2)
     .attr('text-anchor', 'middle')
-    .attr('dominant-baseline', 'central')
+    .call(centerText)
     .attr('font-size', LEGEND_PILL_FONT_SIZE)
     .attr('font-weight', 500)
     .attr('fill', palette.text)
@@ -211,7 +221,7 @@ function renderCapsule(
     g.append('text')
       .attr('x', gr.minX)
       .attr('y', gr.textY)
-      .attr('dominant-baseline', 'central')
+      .call(centerText)
       .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
       .attr('fill', palette.textMuted)
       .attr('pointer-events', 'none')
@@ -232,7 +242,7 @@ function renderCapsule(
     g.append('text')
       .attr('x', gr.maxX)
       .attr('y', gr.textY)
-      .attr('dominant-baseline', 'central')
+      .call(centerText)
       .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
       .attr('fill', palette.textMuted)
       .attr('pointer-events', 'none')
@@ -259,7 +269,7 @@ function renderCapsule(
       .append('text')
       .attr('x', entry.textX)
       .attr('y', entry.textY)
-      .attr('dominant-baseline', 'central')
+      .call(centerText)
       .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
       .attr('fill', palette.textMuted)
       .attr('font-family', FONT_FAMILY)
@@ -318,7 +328,7 @@ function renderPill(
     .attr('x', pill.width / 2)
     .attr('y', pill.height / 2)
     .attr('text-anchor', 'middle')
-    .attr('dominant-baseline', 'central')
+    .call(centerText)
     .attr('font-size', LEGEND_PILL_FONT_SIZE)
     .attr('font-weight', 500)
     .attr('fill', palette.textMuted)
@@ -387,7 +397,7 @@ function renderControl(
       .attr('x', textX)
       .attr('y', ctrl.height / 2)
       .attr('text-anchor', 'middle')
-      .attr('dominant-baseline', 'central')
+      .call(centerText)
       .attr('font-size', LEGEND_PILL_FONT_SIZE)
       .attr('font-weight', 500)
       .attr('fill', palette.textMuted)
@@ -422,7 +432,7 @@ function renderControl(
         .attr('x', child.width / 2)
         .attr('y', ctrl.height / 2)
         .attr('text-anchor', 'middle')
-        .attr('dominant-baseline', 'central')
+        .call(centerText)
         .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
         .attr('fill', child.isActive ? palette.bg : palette.textMuted)
         .attr('font-family', FONT_FAMILY)
@@ -585,7 +595,7 @@ function renderControlsGroup(
         .append('text')
         .attr('x', tl.textX)
         .attr('y', tl.textY)
-        .attr('dominant-baseline', 'central')
+        .call(centerText)
         .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
         .attr('fill', palette.textMuted)
         .attr('opacity', tl.active ? 1 : LEGEND_TOGGLE_OFF_OPACITY)

package/src/utils/parsing.ts

@@ -79,22 +79,6 @@ export const ALL_CHART_TYPES = new Set([
   'map',
 ]);
 
-/**
- * Heuristic: pipe-metadata content is structured `key: value, …` form when
- * the first token is a bare identifier followed by `:`. Used by parsers that
- * accept both shorthand-description-after-pipe and structured key-value
- * (pyramid, ring) to disambiguate the two.
- */
-export const PIPE_KEY_VALUE_PREFIX_RE = /^\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
-
-/**
- * Heuristic to detect a likely-structured tail inside an otherwise-shorthand
- * pipe: `, key:` somewhere in the string. Used to flag user errors like
- * `Inner | bare desc, color: blue` where `color: blue` is silently swallowed
- * into the description.
- */
-export const PIPE_LIKELY_STRUCTURED_TAIL_RE = /,\s*[A-Za-z][A-Za-z0-9_-]*\s*:/;
-
 /** Measure leading whitespace of a line, normalizing tabs to 4 spaces. */
 export function measureIndent(line: string): number {
   let indent = 0;

package/src/utils/reserved-key-registry.ts

@@ -113,11 +113,6 @@ export const ER_REGISTRY: ReservedKeyRegistry = staticRegistry([
   'domain',
 ]);
 
-export const CLASS_REGISTRY: ReservedKeyRegistry = staticRegistry([
-  'color',
-  'description',
-]);
-
 export const KANBAN_REGISTRY: ReservedKeyRegistry = staticRegistry([
   'color',
   'description',
@@ -221,10 +216,3 @@ export const RACI_REGISTRY: ReservedKeyRegistry = staticRegistry([
   'color',
   'description',
 ]);
-
-/**
- * Wireframe uses a trailing-keyword flag list (§19.5), not key-value
- * metadata. This empty registry exists so callers can still pass a
- * registry to shared helpers without a special-case.
- */
-export const WIREFRAME_REGISTRY: ReservedKeyRegistry = staticRegistry([]);

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 };
+}