@diagrammo/dgmo 0.21.0 → 0.22.0

package/src/completion.ts

@@ -98,9 +98,12 @@ const GLOBAL_DIRECTIVES: Record<string, DirectiveValueSpec> = {
       'gruvbox',
       'tokyo-night',
       'one-dark',
-      'bold',
       'dracula',
       'monokai',
+      'atlas',
+      'blueprint',
+      'slate',
+      'tidewater',
     ],
   },
   theme: {
@@ -508,19 +511,12 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
   ],
   [
     'map',
-    // Geographic map directives (§24B.2/.7). `poi`/`route` are content
-    // keywords, not directives; metadata keys (value/label/style) live in the
-    // reserved-key registry.
+    // Geographic map directives (§24B.2/.7). Cosmetics are ON by default — the
+    // only switches are bare `no-*` opt-outs, surfaced proactively so a
+    // zero-config map still hints at what can be turned off. `poi`/`route` are
+    // content keywords, not directives; metadata keys (value/label/style) live
+    // in the reserved-key registry.
     withGlobals({
-      region: {
-        description:
-          'Basemap: us-states (force US state mesh + scoping) | world (inert — already the default)',
-        values: ['us-states', 'world'],
-      },
-      projection: {
-        description: 'Override the auto projection',
-        values: ['equirectangular', 'natural-earth', 'albers-usa', 'mercator'],
-      },
       'region-metric': { description: 'Label for the region value ramp' },
       'poi-metric': {
         description: 'Label for the POI value (marker size) channel',
@@ -528,20 +524,32 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       'flow-metric': {
         description: 'Label for the edge/leg value (thickness) channel',
       },
-      scale: { description: 'Override value ramp anchors: scale <min> <max>' },
-      'region-labels': {
-        description: 'Subdivision name labels',
-        values: ['full', 'abbrev', 'off'],
+      locale: {
+        description:
+          'Default country/state for bare place names, e.g. locale US-GA',
       },
-      'poi-labels': {
-        description: 'POI labels/values',
-        values: ['off', 'auto', 'all'],
+      'active-tag': {
+        description: 'Which tag group leads when several are present',
       },
-      'default-country': { description: 'ISO scope for bare city resolution' },
-      'default-state': { description: 'ISO subdivision scope' },
+      caption: { description: 'Caption line (data-source attribution)' },
       'no-legend': { description: 'Suppress the legend' },
-      subtitle: { description: 'Subtitle line' },
-      caption: { description: 'Caption line' },
+      'no-coastline': {
+        description: 'Turn off coastal water-lines (on by default)',
+      },
+      'no-relief': {
+        description: 'Turn off mountain-range relief shading (on by default)',
+      },
+      'no-context-labels': {
+        description: 'Turn off orientation labels for water + nearby countries',
+      },
+      'no-region-labels': {
+        description: 'Turn off subdivision name labels (on by default)',
+      },
+      'no-poi-labels': { description: 'Turn off POI labels (on by default)' },
+      'no-colorize': {
+        description:
+          'Force plain green-land reference dress (regions are auto-coloured by default)',
+      },
     }),
   ],
 ]);

package/src/cycle/renderer.ts

@@ -48,6 +48,10 @@ export interface CycleRenderOptions {
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
   exportMode?: boolean;
+  /** When 'app', the description toggle is hosted by the app overlay strip:
+   *  the inline gear is suppressed and a controls row + anchor are reserved.
+   *  Default (inline) renders the gear as before. */
+  controlsHost?: 'app' | 'inline';
 }
 
 /**
@@ -92,7 +96,13 @@ export function renderCycle(
   const hasDescriptions =
     parsed.nodes.some((n) => n.description.length > 0) ||
     parsed.edges.some((e) => e.description.length > 0);
-  const hasLegend = hasDescriptions && !!renderOptions?.onToggleDescriptions;
+  // App-hosted: controls live in the app overlay strip. Cycle has no tag groups,
+  // so there's no in-SVG legend left to render — don't reserve a legend band.
+  const appHostedControls = renderOptions?.controlsHost === 'app';
+  const hasLegend =
+    !appHostedControls &&
+    hasDescriptions &&
+    !!renderOptions?.onToggleDescriptions;
 
   const showTitle = !!parsed.title && parsed.options['no-title'] !== 'on';
   const legendOffset = hasLegend ? sLegendHeight : 0;
@@ -160,6 +170,9 @@ export function renderCycle(
       position: { placement: 'top-center', titleRelation: 'below-title' },
       mode: renderOptions?.exportMode ? 'export' : 'preview',
       controlsGroup,
+      ...(renderOptions?.controlsHost !== undefined && {
+        controlsHost: renderOptions.controlsHost,
+      }),
     };
     const legendState: LegendState = {
       activeGroup: null,

package/src/d3.ts

@@ -7739,6 +7739,10 @@ export async function renderForExport(
     c4Container?: string;
     tagGroup?: string;
     exportMode?: boolean;
+    // Browser callers (the app / Obsidian) bundle the map JSON and inject it
+    // here — the Node fs `loadMapData()` seam can't run in a browser. CLI/SSR
+    // omit this and fall back to the fs loader.
+    mapData?: import('./map/resolved-types').MapData;
   }
 ): Promise<string> {
   const exportMode = options?.exportMode ?? false;
@@ -8454,32 +8458,40 @@ export async function renderForExport(
   if (detectedType === 'map') {
     const { parseMap } = await import('./map/parser');
     const { resolveMap } = await import('./map/resolver');
-    const { loadMapData } = await import('./map/load-data');
     const { renderMapForExport } = await import('./map/renderer');
+    const { mapExportDimensions } = await import('./map/dimensions');
 
     const effectivePalette = await resolveExportPalette(theme, palette);
     const mapParsed = parseMap(content);
     // Always render — an empty or partially-resolved map still draws the
     // inferred base map (§24B.10 / layout AC23); diagnostics surface separately.
-    // Degrade like every other branch (return '') if the assets can't load,
-    // rather than throwing out of render() — e.g. a deployment without
-    // dist/map-data or the not-yet-supported browser fs path.
-    let mapData;
-    try {
-      mapData = await loadMapData();
-    } catch {
-      return '';
+    // Prefer injected `mapData` (browser bundles it; the fs loader can't run
+    // there); fall back to the Node fs loader for CLI/SSR. Degrade like every
+    // other branch (return '') if neither yields data.
+    let mapData = options?.mapData;
+    if (!mapData) {
+      const { loadMapData } = await import('./map/load-data');
+      try {
+        mapData = await loadMapData();
+      } catch {
+        return '';
+      }
     }
     const mapResolved = resolveMap(mapParsed, mapData);
 
-    const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    // Content-aware canvas: derive the height from the map's intrinsic projected
+    // aspect (world ~2.3:1, a region taller, etc.) instead of the fixed 800, so the
+    // export matches the content's natural shape — no vertical stretch, no
+    // letterbox bands. `preferContain` rides along to the renderer.
+    const dims = mapExportDimensions(mapResolved, mapData, EXPORT_WIDTH);
+    const container = createExportContainer(dims.width, dims.height);
     renderMapForExport(
       container,
       mapResolved,
       mapData,
       effectivePalette,
       theme === 'dark',
-      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+      dims
     );
     return finalizeSvgExport(container, theme, effectivePalette);
   }

package/src/editor/highlight-api.ts

@@ -200,6 +200,10 @@ const ATTRIBUTE_KEYS = new Set([
   'tech',
   'span',
   'split',
+  // Map (§24B) reserved keys
+  'value',
+  'label',
+  'style',
 ]);
 
 /**

package/src/editor/keywords.ts

@@ -80,11 +80,10 @@ export const METADATA_KEYS = new Set([
   'quadrant',
   'ring',
   'trend',
-  // Map (§24B) metadata keys
-  'score',
+  // Map (§24B) reserved metadata keys
+  'value',
   'label',
-  'description',
-  'weight',
+  'style',
 ]);
 
 /** Tag declaration keyword. */
@@ -150,21 +149,20 @@ export const DIRECTIVE_KEYWORDS = new Set([
   // Sequence
   'activations',
   'no-activations',
-  // Map (§24B) directives
-  'region',
-  'projection',
+  // Map (§24B) directives — cosmetics on by default, bare `no-*` opt-outs
   'region-metric',
   'poi-metric',
   'flow-metric',
-  'region-labels',
-  'poi-labels',
-  'default-country',
-  'default-state',
-  'no-legend',
-  'muted',
-  'natural',
-  'subtitle',
+  'locale',
+  'active-tag',
   'caption',
+  'no-legend',
+  'no-coastline',
+  'no-relief',
+  'no-context-labels',
+  'no-region-labels',
+  'no-poi-labels',
+  'no-colorize',
   'poi',
   'route',
   // Data charts

package/src/infra/renderer.ts

@@ -2080,9 +2080,13 @@ function renderLegend(
   isDark: boolean,
   activeGroup: string | null,
   playback?: InfraPlaybackState,
-  exportMode = false
+  exportMode = false,
+  controlsHost?: 'app' | 'inline'
 ) {
   if (legendGroups.length === 0 && !playback) return;
+  // App-hosted playback: the play/pause + speed UI lives in the app overlay
+  // strip, so suppress the in-SVG Playback pill and emit the controls anchor.
+  const appHostedPlayback = controlsHost === 'app' && !!playback;
 
   const legendG = rootSvg
     .append('g')
@@ -2097,8 +2101,9 @@ function renderLegend(
     name: g.name,
     entries: g.entries.map((e) => ({ value: e.value, color: e.color })),
   }));
-  // Add Playback as a group with empty entries (collapsed pill) or dummy entries (expanded)
-  if (playback) {
+  // Add Playback as a group with empty entries (collapsed pill) or dummy entries
+  // (expanded) — unless the app hosts it, in which case it's suppressed.
+  if (playback && !appHostedPlayback) {
     allGroups.push({ name: 'Playback', entries: [] });
   }
 
@@ -2107,6 +2112,20 @@ function renderLegend(
     position: { placement: 'top-center', titleRelation: 'below-title' },
     mode: exportMode ? 'export' : 'preview',
     showEmptyGroups: true,
+    ...(appHostedPlayback && {
+      controlsHost: 'app' as const,
+      controlsGroup: {
+        toggles: [
+          {
+            id: 'playback',
+            type: 'toggle' as const,
+            label: 'Playback',
+            active: true,
+            onToggle: () => {},
+          },
+        ],
+      },
+    }),
   };
   const legendState: LegendState = { activeGroup };
   renderLegendD3(
@@ -2233,9 +2252,13 @@ export function renderInfra(
   playback?: InfraPlaybackState | null,
   expandedNodeIds?: Set<string> | null,
   exportMode?: boolean,
-  collapsedNodes?: Set<string> | null
+  collapsedNodes?: Set<string> | null,
+  /** When 'app', the playback pill is suppressed and a controls row + anchor are
+   *  reserved for the app overlay strip (play/pause + speed live there). */
+  controlsHost?: 'app' | 'inline'
 ) {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
+  const appHostedPlayback = controlsHost === 'app' && !!playback;
 
   const ctx = ScaleContext.identity();
   const sc = buildScaledConstants(ctx);
@@ -2246,7 +2269,10 @@ export function renderInfra(
     palette,
     layout.edges
   );
-  const hasLegend = legendGroups.length > 0 || !!playback;
+  // App-hosted: the playback pill moves to the app overlay, so a playback-only
+  // legend (no tag groups) has nothing left to render.
+  const hasLegend =
+    legendGroups.length > 0 || (!!playback && !appHostedPlayback);
   const fixedLegend = !exportMode && hasLegend;
   const legendDynamicH = hasLegend
     ? getMaxLegendReservedHeight(
@@ -2461,7 +2487,8 @@ export function renderInfra(
         isDark,
         activeGroup ?? null,
         playback ?? undefined,
-        exportMode
+        exportMode,
+        controlsHost
       );
       // Re-enable pointer events on interactive legend elements
       legendSvg
@@ -2478,7 +2505,8 @@ export function renderInfra(
         isDark,
         activeGroup ?? null,
         playback ?? undefined,
-        exportMode
+        exportMode,
+        controlsHost
       );
     }
   }

package/src/map/colorize.ts

@@ -0,0 +1,54 @@
+// Political fill-assignment pass (§24B colorize). PURE + DETERMINISTIC — no
+// projection, no palette, no DOM. Given the per-topology arc-adjacency graph
+// (from geo.ts buildAdjacency), assign every drawn region a colour INDEX such
+// that no two arc-neighbours share one. The only job of a political fill is
+// boundary disambiguation; "no two neighbours share a hue" is the minimal
+// property — and a planar political map famously needs only a handful of colours.
+//
+// FIRST-FIT greedy: each region takes the LOWEST index not used by an
+// already-coloured neighbour. This is collision-free by construction (a node with
+// k coloured neighbours has at most k forbidden indices, so index ≤ k is always
+// free) AND clusters regions into the FEWEST colours — on the shipped graphs the
+// max index used is 5 (world) / 4 (us-states), i.e. 5–6 colours total. The caller
+// generates exactly that many palette tints, so the fills stay on-palette (no
+// need for the old Δ+1 ≈ 17 wheel hues).
+
+/** Result of {@link assignColors}: a colour INDEX per ISO + the number of
+ *  distinct colours actually used (`= maxIndex + 1`). The index is a stable
+ *  function of (ISO, global arc-adjacency) — extent-independent (AC10). */
+export interface ColorAssignment {
+  readonly byIso: Map<string, number>;
+  readonly huesNeeded: number;
+}
+
+/** First-fit greedy graph-coloring over `isos` using `adjacency` (ISO → neighbour
+ *  ISOs). Visits ISOs in stable ascending order; each takes the lowest index not
+ *  taken by an already-coloured neighbour — collision-free, and minimises the
+ *  total colour count.
+ *
+ *  EVERY iso in `isos` is assigned an index — including zero-degree nodes
+ *  (islands, DC, territories with no neighbour entry) — so the caller never needs
+ *  a fallback fill (F14). */
+export function assignColors(
+  isos: readonly string[],
+  adjacency: ReadonlyMap<string, readonly string[]>
+): ColorAssignment {
+  const sorted = [...isos].sort();
+  const byIso = new Map<string, number>();
+  let maxIndex = -1;
+
+  for (const iso of sorted) {
+    const taken = new Set<number>();
+    for (const n of adjacency.get(iso) ?? []) {
+      const c = byIso.get(n);
+      if (c !== undefined) taken.add(c);
+    }
+    // Lowest index not taken by a neighbour (always exists: ≤ neighbour count).
+    let h = 0;
+    while (taken.has(h)) h++;
+    byIso.set(iso, h);
+    if (h > maxIndex) maxIndex = h;
+  }
+
+  return { byIso, huesNeeded: maxIndex + 1 };
+}