@diagrammo/dgmo 0.31.0 → 0.32.1

package/src/boxes-and-lines/layout.ts

@@ -199,16 +199,22 @@ export async function layoutBoxesAndLines(
     /** Previous node positions (label → {x,y}) for layout stability —
      *  minimizes node drift on edit/collapse. */
     previousPositions?: ReadonlyMap<string, { x: number; y: number }>;
+    /** Progress hook (interactive path). When set, the search yields between
+     *  candidates so the UI can paint a "trying X of Y" indicator. */
+    onProgress?: (done: number, total: number, phase: string) => void;
   }
 ): Promise<BLLayoutResult> {
   const { layoutBoxesAndLinesSearch } = await import('./layout-search');
-  const searched = layoutBoxesAndLinesSearch(parsed, collapseInfo, {
+  const searched = await layoutBoxesAndLinesSearch(parsed, collapseInfo, {
     ...(layoutOptions?.hideDescriptions !== undefined && {
       hideDescriptions: layoutOptions.hideDescriptions,
     }),
     ...(layoutOptions?.previousPositions !== undefined && {
       previousPositions: layoutOptions.previousPositions,
     }),
+    ...(layoutOptions?.onProgress !== undefined && {
+      onProgress: layoutOptions.onProgress,
+    }),
   });
   // Engine-agnostic post-processing: fan parallel edges, then float notes
   // (and shift the canvas to fit them).

package/src/boxes-and-lines/parser.ts

@@ -42,6 +42,11 @@ import type { PaletteColors } from '../palettes';
 
 const MAX_GROUP_DEPTH = 2;
 
+// §1.4/§1.10 legacy-pipe detection — module-scope so they aren't re-created per
+// line. `|` inside a directed (`->`) or undirected (`~>`) arrow label is valid.
+const ARROW_LABEL_PIPE_DIRECTED_RE = /-\S*\|\S*->/;
+const ARROW_LABEL_PIPE_UNDIRECTED_RE = /~\S*\|\S*~>/;
+
 /** Boxes-and-lines requires explicit first line — no heuristic detection. */
 export function looksLikeBoxesAndLines(_content: string): boolean {
   return false;
@@ -247,8 +252,8 @@ export function parseBoxesAndLines(
     // regions.
     if (
       trimmed.includes('|') &&
-      !/-\S*\|\S*->/.test(trimmed) &&
-      !/~\S*\|\S*~>/.test(trimmed)
+      !ARROW_LABEL_PIPE_DIRECTED_RE.test(trimmed) &&
+      !ARROW_LABEL_PIPE_UNDIRECTED_RE.test(trimmed)
     ) {
       result.diagnostics.push(
         makeDgmoError(
@@ -404,7 +409,12 @@ export function parseBoxesAndLines(
       if (tagBlockMatch.inlineValues) {
         for (const rawVal of tagBlockMatch.inlineValues) {
           const { text: cleanVal, isDefault } = stripDefaultModifier(rawVal);
-          const { label, color } = extractColor(cleanVal);
+          const { label, color } = extractColor(
+            cleanVal,
+            palette,
+            result.diagnostics,
+            lineNum
+          );
           newTagGroup.entries.push({
             value: label,
             color: color ?? AUTO_TAG_COLOR_SENTINEL,
@@ -424,7 +434,12 @@ export function parseBoxesAndLines(
     // Tag group entries (indented under tag heading)
     if (currentTagGroup && !contentStarted && indent > 0) {
       const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-      const { label, color } = extractColor(cleanEntry);
+      const { label, color } = extractColor(
+        cleanEntry,
+        palette,
+        result.diagnostics,
+        lineNum
+      );
       currentTagGroup.entries.push({
         value: label,
         color: color ?? AUTO_TAG_COLOR_SENTINEL,

package/src/boxes-and-lines/renderer.ts

@@ -30,6 +30,7 @@ import {
   relativeLuminance,
   shapeFill,
   valueRampColor,
+  themeBaseBg,
 } from '../palettes/color-utils';
 import { resolveColor } from '../colors';
 import { resolveTagColor } from '../utils/tag-groups';
@@ -438,6 +439,11 @@ interface BLRenderOptions {
   /** When 'app', the description toggle is hosted by the app overlay strip
    *  (inline gear suppressed, controls row + anchor reserved). */
   controlsHost?: 'app' | 'inline';
+  /** Explicit value-ramp domain override. When provided, the choropleth ramp
+   *  uses these endpoints instead of computing min/max from `parsed.nodes`.
+   *  Focus mode passes the GLOBAL (pre-filter) domain so neighbor colours stay
+   *  stable when only a subset is rendered (Decision 20 / FM1). */
+  rampDomain?: { min: number; max: number };
 }
 
 export function renderBoxesAndLines(
@@ -459,6 +465,7 @@ export function renderBoxesAndLines(
     onToggleControlsExpand,
     exportMode = false,
     controlsHost,
+    rampDomain,
   } = options ?? {};
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -492,8 +499,10 @@ export function renderBoxesAndLines(
   // Anchor the low end at the lowest value (not 0) to maximise within-diagram
   // dynamic range; mirrors the map's region-metric ramp. Equal-value data
   // (rampMin === rampMax) falls back to t = 1 in fillForValue below.
-  const rampMin = hasRamp ? Math.min(...nodeValues) : 0;
-  const rampMax = Math.max(...nodeValues);
+  // A caller-supplied domain (focus mode) wins so colours don't shift when a
+  // subset is rendered; otherwise derive from the nodes on screen.
+  const rampMin = rampDomain?.min ?? (hasRamp ? Math.min(...nodeValues) : 0);
+  const rampMax = rampDomain?.max ?? Math.max(...nodeValues);
   // Default hue = palette.primary (NOT red like the map — boxes have no water to
   // stand out against, and red reads as alarm on a neutral metric). A trailing
   // color on `box-metric` overrides.
@@ -751,7 +760,7 @@ export function renderBoxesAndLines(
 
     if (group.collapsed) {
       // Collapsed: solid rounded rect matching node style + 6px collapse bar
-      const fillColor = isDark ? palette.surface : palette.bg;
+      const fillColor = themeBaseBg(palette, isDark);
       const strokeColor = palette.border;
 
       groupG
@@ -1446,6 +1455,48 @@ export function renderBoxesAndLines(
     });
     legendG.selectAll('[data-legend-group]').classed('bl-legend-group', true);
   }
+
+  // ── Focus mode: one reusable hover-reveal icon (interactive only) ──
+  // A single hidden icon the app repositions over the hovered box/group and
+  // stamps `data-focus-id`/`data-focus-kind` on (Decision 22 / ADR-4) — NOT one
+  // per node (~4k elements on a large graph). Appended to the SVG root so the
+  // app positions it in root (screen-mapped) coordinates, counter-scaled to a
+  // constant size regardless of fit. Excluded from export like org's icon.
+  if (!exportDims && !exportMode) {
+    const iconSize = 14;
+    const focusG = svg
+      .append('g')
+      .attr('class', 'bl-focus-icon')
+      .attr('data-export-ignore', 'true')
+      .style('display', 'none')
+      .style('pointer-events', 'auto')
+      .style('cursor', 'pointer');
+    // Hit area
+    focusG
+      .append('rect')
+      .attr('x', -3)
+      .attr('y', -3)
+      .attr('width', iconSize + 6)
+      .attr('height', iconSize + 6)
+      .attr('fill', 'transparent');
+    // Scope/target icon: outer circle + inner dot (mirrors org-focus-icon)
+    const cx = iconSize / 2;
+    const cy = iconSize / 2;
+    focusG
+      .append('circle')
+      .attr('cx', cx)
+      .attr('cy', cy)
+      .attr('r', iconSize / 2 - 1)
+      .attr('fill', palette.bg)
+      .attr('stroke', palette.textMuted)
+      .attr('stroke-width', 1.5);
+    focusG
+      .append('circle')
+      .attr('cx', cx)
+      .attr('cy', cy)
+      .attr('r', 2)
+      .attr('fill', palette.textMuted);
+  }
 }
 
 // ── Export helper ──────────────────────────────────────────

package/src/c4/parser.ts

@@ -8,6 +8,7 @@ import {
   descriptionBareRemovedMessage,
   formatDgmoError,
   makeDgmoError,
+  makeFail,
   METADATA_DIAGNOSTIC_CODES,
   pipeOperatorRemovedMessage,
   suggest,
@@ -296,12 +297,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       result.error = formatDgmoError(diag);
   };
 
-  const fail = (line: number, message: string): ParsedC4 => {
-    const diag = makeDgmoError(line, message);
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-    return result;
-  };
+  const fail = makeFail(result);
 
   if (!content?.trim()) {
     return fail(0, 'No content provided');
@@ -455,7 +451,12 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       const indent = measureIndent(line);
       if (indent > 0) {
         const { text: cleanEntry, isDefault } = stripDefaultModifier(trimmed);
-        const { label, color } = extractColor(cleanEntry, palette);
+        const { label, color } = extractColor(
+          cleanEntry,
+          palette,
+          result.diagnostics,
+          lineNumber
+        );
         // Bare value (no explicit color) → keep it; the post-parse
         // finalize pass assigns a deterministic palette color.
         if (isDefault) {

package/src/chart-type-registry.ts

@@ -87,6 +87,10 @@ export interface ChartTypeDescriptor {
   readonly category: RenderCategory;
   readonly parse: ParseFn;
   readonly measure?: (content: string) => ContentCounts;
+  readonly minDims?: (counts: ContentCounts) => {
+    width: number;
+    height: number;
+  };
 }
 
 // ============================================================
@@ -210,6 +214,92 @@ function measureInfra(content: string): ContentCounts {
   return { nodes: parsed.nodes.length };
 }
 
+// ============================================================
+// minDims() implementations — relocated verbatim from computeMinDimensions() in
+// utils/scaling.ts so the registry owns per-type minimum-dimension formulas
+// alongside measure(). Each maps ContentCounts → {width,height}. Types without a
+// minDims fall back to {300,200} (the old switch `default`) via the
+// REGISTRY_BY_ID lookup in dimensions.ts.
+// ============================================================
+
+function minDimsSequence(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.participants ?? 2) * 80, 320),
+    height: Math.max((c.messages ?? 1) * 20 + 120, 200),
+  };
+}
+function minDimsRaci(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.roles ?? 2) * 50 + 180, 300),
+    height: Math.max((c.tasks ?? 1) * 28 + 80, 200),
+  };
+}
+function minDimsMindmap(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.nodes ?? 3) * 30, 300),
+    height: Math.max((c.depth ?? 2) * 60, 200),
+  };
+}
+function minDimsTechRadar(): { width: number; height: number } {
+  return { width: 360, height: 400 };
+}
+function minDimsHeatmap(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.columns ?? 3) * 40, 300),
+    height: Math.max((c.rows ?? 3) * 30 + 60, 200),
+  };
+}
+function minDimsArc(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: 300,
+    height: Math.max((c.nodes ?? 3) * 20 + 120, 200),
+  };
+}
+function minDimsOrg(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.nodes ?? 3) * 60, 300),
+    height: Math.max((c.depth ?? 2) * 80, 200),
+  };
+}
+function minDimsGantt(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: 400,
+    height: Math.max((c.tasks ?? 3) * 24 + 80, 200),
+  };
+}
+function minDimsKanban(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.columns ?? 3) * 120, 360),
+    height: 300,
+  };
+}
+// er + class share this formula.
+function minDimsEntities(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.nodes ?? 2) * 140, 300),
+    height: Math.max((c.nodes ?? 2) * 80, 200),
+  };
+}
+// flowchart + state share this formula.
+function minDimsGraph(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.nodes ?? 3) * 60, 300),
+    height: Math.max((c.nodes ?? 3) * 50, 200),
+  };
+}
+function minDimsPert(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.tasks ?? 3) * 80, 340),
+    height: Math.max((c.tasks ?? 3) * 40 + 80, 200),
+  };
+}
+function minDimsInfra(c: ContentCounts): { width: number; height: number } {
+  return {
+    width: Math.max((c.nodes ?? 3) * 80, 300),
+    height: Math.max((c.nodes ?? 3) * 60, 200),
+  };
+}
+
 // ============================================================
 // THE REGISTRY — ordered to match the previous chartTypeParsers grouping
 // (structured diagrams, standard ECharts, extended ECharts, D3 visualizations,
@@ -224,32 +314,49 @@ export const CHART_TYPE_REGISTRY: readonly ChartTypeDescriptor[] = [
     category: 'diagram',
     parse: parseSequenceDgmo,
     measure: measureSequence,
+    minDims: minDimsSequence,
   },
   {
     id: 'flowchart',
     category: 'diagram',
     parse: parseFlowchart,
     measure: measureFlowchart,
+    minDims: minDimsGraph,
   },
   {
     id: 'class',
     category: 'diagram',
     parse: parseClassDiagram,
     measure: measureClass,
+    minDims: minDimsEntities,
+  },
+  {
+    id: 'er',
+    category: 'diagram',
+    parse: parseERDiagram,
+    measure: measureER,
+    minDims: minDimsEntities,
   },
-  { id: 'er', category: 'diagram', parse: parseERDiagram, measure: measureER },
   {
     id: 'state',
     category: 'diagram',
     parse: parseState,
     measure: measureStateGraph,
+    minDims: minDimsGraph,
+  },
+  {
+    id: 'org',
+    category: 'diagram',
+    parse: parseOrg,
+    measure: measureOrg,
+    minDims: minDimsOrg,
   },
-  { id: 'org', category: 'diagram', parse: parseOrg, measure: measureOrg },
   {
     id: 'kanban',
     category: 'diagram',
     parse: parseKanban,
     measure: measureKanban,
+    minDims: minDimsKanban,
   },
   { id: 'c4', category: 'diagram', parse: parseC4 },
   { id: 'sitemap', category: 'diagram', parse: parseSitemap },
@@ -258,24 +365,39 @@ export const CHART_TYPE_REGISTRY: readonly ChartTypeDescriptor[] = [
     category: 'diagram',
     parse: parseInfra,
     measure: measureInfra,
+    minDims: minDimsInfra,
   },
   {
     id: 'gantt',
     category: 'diagram',
     parse: parseGantt,
     measure: measureGantt,
+    minDims: minDimsGantt,
+  },
+  {
+    id: 'pert',
+    category: 'diagram',
+    parse: parsePert,
+    measure: measurePert,
+    minDims: minDimsPert,
   },
-  { id: 'pert', category: 'diagram', parse: parsePert, measure: measurePert },
   { id: 'boxes-and-lines', category: 'diagram', parse: parseBoxesAndLines },
   {
     id: 'mindmap',
     category: 'diagram',
     parse: parseMindmap,
     measure: measureMindmap,
+    minDims: minDimsMindmap,
   },
   { id: 'wireframe', category: 'diagram', parse: parseWireframe },
   { id: 'journey-map', category: 'diagram', parse: parseJourneyMap },
-  { id: 'raci', category: 'diagram', parse: parseRaci, measure: measureRaci },
+  {
+    id: 'raci',
+    category: 'diagram',
+    parse: parseRaci,
+    measure: measureRaci,
+    minDims: minDimsRaci,
+  },
   { id: 'rasci', category: 'diagram', parse: parseRaci, measure: measureRaci },
   { id: 'daci', category: 'diagram', parse: parseRaci, measure: measureRaci },
 
@@ -300,6 +422,7 @@ export const CHART_TYPE_REGISTRY: readonly ChartTypeDescriptor[] = [
     category: 'data-chart',
     parse: parseHeatmap,
     measure: measureHeatmap,
+    minDims: minDimsHeatmap,
   },
   { id: 'funnel', category: 'data-chart', parse: parseFunnel },
 
@@ -311,6 +434,7 @@ export const CHART_TYPE_REGISTRY: readonly ChartTypeDescriptor[] = [
     category: 'visualization',
     parse: parseArc,
     measure: measureArc,
+    minDims: minDimsArc,
   },
   { id: 'timeline', category: 'visualization', parse: parseTimeline },
   { id: 'venn', category: 'visualization', parse: parseVenn },
@@ -322,6 +446,7 @@ export const CHART_TYPE_REGISTRY: readonly ChartTypeDescriptor[] = [
     category: 'visualization',
     parse: parseTechRadar,
     measure: measureTechRadar,
+    minDims: minDimsTechRadar,
   },
   { id: 'cycle', category: 'visualization', parse: parseCycle },
   { id: 'pyramid', category: 'visualization', parse: parsePyramid },

package/src/chart-types.ts

@@ -46,7 +46,7 @@ export const chartTypes: readonly ChartTypeMeta[] = [
   },
   {
     id: 'sequence',
-    description: 'Message / interaction flows',
+    description: 'Message request and response interaction flows',
     fallback: true,
   },
   {
@@ -125,7 +125,7 @@ export const chartTypes: readonly ChartTypeMeta[] = [
   {
     id: 'map',
     description:
-      'Geographic map: a value or count per country, state, or region (choropleth); points of interest; routes. Use when categories are real-world places.',
+      'Geographic concept map: highlight/score regions, drop points of interest, connect with routes or edges',
   },
 
   // ── Tier 3 — Specialized analytical charts ────────────────
@@ -143,7 +143,7 @@ export const chartTypes: readonly ChartTypeMeta[] = [
   },
   {
     id: 'slope',
-    description: 'Change for multiple things between exactly two periods',
+    description: 'Change between 2 time periods',
   },
   {
     id: 'sankey',
@@ -173,7 +173,7 @@ export const chartTypes: readonly ChartTypeMeta[] = [
   // ── Tier 4 — General-purpose data charts ──────────────────
   {
     id: 'bar',
-    description: 'Categorical comparisons',
+    description: 'Categorical comparisons for 3 - 5 figures',
     fallback: true,
   },
   {

package/src/chart.ts

@@ -405,7 +405,9 @@ export function parseChart(
     if (dataValues) {
       const { label: rawLabel, color: pointColor } = extractColor(
         dataValues.label,
-        palette
+        palette,
+        result.diagnostics,
+        lineNumber
       );
       const [first, ...rest] = dataValues.values;
       result.data.push({
@@ -485,6 +487,21 @@ export function parseChart(
     );
   }
 
+  // Plain "bar" renders a single series per row — extra series are dropped
+  // silently by the renderer. Surface that instead of losing data quietly so
+  // the author switches to a multi-series type. (multi-line/line parse to
+  // type "line" and DO render every series, so they are unaffected.)
+  if (
+    !result.error &&
+    result.type === 'bar' &&
+    (result.seriesNames?.length ?? 0) > 1
+  ) {
+    warn(
+      result.seriesLineNumber ?? 1,
+      `Plain "bar" shows only the first series ("${result.seriesNames![0]}"); the other ${result.seriesNames!.length - 1} are dropped at render. Use "bar-stacked" for stacked bars or "multi-line" to plot every series.`
+    );
+  }
+
   if (!result.error && result.seriesNames) {
     const expectedCount = result.seriesNames.length;
     for (const dp of result.data) {