@diagrammo/dgmo 0.25.5 → 0.26.0

package/src/completion.ts

@@ -648,6 +648,69 @@ export const ENTITY_TYPES = new Map<string, string[]>([
   ],
 ]);
 
+// ============================================================
+// Structural keywords for line-leading completion
+// ============================================================
+
+/**
+ * Chart-type-specific structural keywords offered on an empty/start-of-line in
+ * the data zone (block openers like `loop`, section headers like `containers`,
+ * the `tag` block declaration, etc.). This is the single source of truth for
+ * the editor's structural-keyword popup — every entry MUST be a token the
+ * corresponding parser actually recognizes (validated by the
+ * completion-conformance suite). Do NOT add removed/diagnostic-only tokens
+ * (e.g. cycle's `no-descriptions`) or tokens the parser ignores.
+ *
+ * Chart types not listed here have no structural keywords (most data charts).
+ */
+export const STRUCTURAL_KEYWORDS = new Map<string, string[]>([
+  ['sequence', ['if', 'else', 'loop', 'parallel', 'note', 'tag']],
+  ['gantt', ['era', 'marker', 'holiday', 'workweek', 'parallel', 'tag']],
+  ['c4', ['containers', 'components', 'deployment', 'tag']],
+  ['timeline', ['era', 'marker', 'tag']],
+  ['org', ['tag']],
+  ['kanban', ['tag']],
+  ['sitemap', ['tag']],
+  ['infra', ['tag']],
+  ['pert', ['tag']],
+  ['mindmap', ['tag']],
+  ['boxes-and-lines', ['tag']],
+  ['er', ['tag']],
+  ['cycle', ['direction-counterclockwise', 'circle-nodes']],
+  ['journey-map', ['persona', 'tag']],
+  ['raci', ['roles']],
+  ['tech-radar', ['rings']],
+  [
+    'wireframe',
+    [
+      'nav',
+      'tabs',
+      'table',
+      'image',
+      'modal',
+      'skeleton',
+      'alert',
+      'progress',
+      'chart',
+      'mobile',
+      'tag',
+    ],
+  ],
+  ['class', ['abstract', 'interface', 'enum', 'extends', 'implements']],
+]);
+
+/**
+ * Chart types that support `tag` block declarations (and thus the
+ * `alias`/`default` sub-keywords inside a tag block). Derived from
+ * STRUCTURAL_KEYWORDS so the two can never drift — a chart supports tag blocks
+ * iff it offers the `tag` keyword.
+ */
+export const TAG_SUPPORTING_TYPES: ReadonlySet<string> = new Set(
+  [...STRUCTURAL_KEYWORDS]
+    .filter(([, kws]) => kws.includes('tag'))
+    .map(([type]) => type)
+);
+
 // ============================================================
 // Pipe metadata for inline `| key value` on data lines
 // ============================================================
@@ -992,7 +1055,6 @@ function extractSequenceSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'sequence',
     entities,
-    keywords: ['if', 'else', 'loop', 'parallel', 'note'],
   };
 }
 
@@ -1031,7 +1093,7 @@ function extractStateSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'state', entities, keywords: [] };
+  return { kind: 'state', entities };
 }
 
 // ============================================================
@@ -1247,7 +1309,7 @@ function extractSitemapSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'sitemap', entities, keywords: [] };
+  return { kind: 'sitemap', entities };
 }
 
 // ============================================================
@@ -1326,7 +1388,6 @@ function extractC4Symbols(docText: string): DiagramSymbols {
   return {
     kind: 'c4',
     entities,
-    keywords: ['containers', 'components', 'deployment'],
   };
 }
 
@@ -1429,7 +1490,7 @@ function extractGanttSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'gantt', entities, keywords: [] };
+  return { kind: 'gantt', entities };
 }
 
 // ============================================================
@@ -1487,7 +1548,7 @@ function extractBoxesAndLinesSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'boxes-and-lines', entities, keywords: [] };
+  return { kind: 'boxes-and-lines', entities };
 }
 
 // ============================================================
@@ -1540,7 +1601,7 @@ function extractOrgSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'org', entities, keywords: [] };
+  return { kind: 'org', entities };
 }
 
 // ============================================================
@@ -1592,7 +1653,7 @@ function extractKanbanSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'kanban', entities, keywords: [] };
+  return { kind: 'kanban', entities };
 }
 
 // ============================================================
@@ -1635,7 +1696,7 @@ function extractMindmapSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'mindmap', entities, keywords: [] };
+  return { kind: 'mindmap', entities };
 }
 
 // ============================================================
@@ -1668,7 +1729,7 @@ function extractPyramidSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'pyramid', entities, keywords: ['inverted'] };
+  return { kind: 'pyramid', entities };
 }
 
 // ============================================================
@@ -1701,7 +1762,7 @@ function extractRingSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'ring', entities, keywords: [] };
+  return { kind: 'ring', entities };
 }
 
 // ============================================================
@@ -1736,7 +1797,7 @@ function extractArcSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'arc', entities, keywords: [] };
+  return { kind: 'arc', entities };
 }
 
 // ============================================================
@@ -1775,7 +1836,7 @@ function extractSankeySymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'sankey', entities, keywords: [] };
+  return { kind: 'sankey', entities };
 }
 
 // ============================================================
@@ -1835,7 +1896,7 @@ function extractTimelineSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'timeline', entities, keywords: ['era', 'marker'] };
+  return { kind: 'timeline', entities };
 }
 
 // ============================================================
@@ -1867,7 +1928,7 @@ function extractVennSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'venn', entities, keywords: [] };
+  return { kind: 'venn', entities };
 }
 
 // ============================================================
@@ -1901,7 +1962,7 @@ function extractQuadrantSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'quadrant', entities, keywords: [] };
+  return { kind: 'quadrant', entities };
 }
 
 // ============================================================
@@ -1936,7 +1997,7 @@ function extractSlopeSymbols(docText: string): DiagramSymbols {
     if (label && !entities.includes(label)) entities.push(label);
   }
 
-  return { kind: 'slope', entities, keywords: ['period'] };
+  return { kind: 'slope', entities };
 }
 
 // ============================================================
@@ -1983,7 +2044,7 @@ function extractDataChartSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: chartType, entities, keywords: [] };
+  return { kind: chartType, entities };
 }
 
 // ============================================================
@@ -2034,23 +2095,6 @@ registerExtractor('chord', extractDataChartSymbols);
 
 function extractTechRadarSymbols(docText: string): DiagramSymbols {
   const entities: string[] = [];
-  const keywords: string[] = [
-    'rings',
-    'quadrant',
-    'ring',
-    'trend',
-    'new',
-    'up',
-    'down',
-    'stable',
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-    'alias',
-    'aka',
-    'color',
-  ];
 
   // Extract ring names and aliases from the rings block
   const lines = docText.split('\n');
@@ -2078,7 +2122,7 @@ function extractTechRadarSymbols(docText: string): DiagramSymbols {
     }
   }
 
-  return { kind: 'tech-radar', entities, keywords };
+  return { kind: 'tech-radar', entities };
 }
 
 // ============================================================
@@ -2121,7 +2165,6 @@ function extractCycleSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'cycle',
     entities,
-    keywords: ['direction-counterclockwise', 'circle-nodes'],
   };
 }
 
@@ -2218,7 +2261,6 @@ function extractRaciSymbols(docText: string): DiagramSymbols {
   return {
     kind: chartType,
     entities,
-    keywords: ['variant', 'roles'],
   };
 }
 
@@ -2271,6 +2313,5 @@ function extractJourneyMapSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'journey-map',
     entities,
-    keywords: ['persona', 'pain', 'opportunity', 'thought', 'description'],
   };
 }

package/src/er/parser.ts

@@ -719,6 +719,5 @@ export function extractSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'er',
     entities,
-    keywords: ['pk', 'fk', 'unique', 'nullable', '1', '*', '?'],
   };
 }

package/src/graph/flowchart-parser.ts

@@ -647,5 +647,5 @@ export function extractSymbols(docText: string): DiagramSymbols {
     const m = NODE_ID_RE.exec(line);
     if (m && !entities.includes(m[1]!)) entities.push(m[1]!);
   }
-  return { kind: 'flowchart', entities, keywords: [] };
+  return { kind: 'flowchart', entities };
 }

package/src/graph/flowchart-renderer.ts

@@ -476,10 +476,24 @@ export function renderFlowchart(
 
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
   const scaleX = (width - sDiagramPadding * 2) / diagramW;
-  const scaleY = (availH - sDiagramPadding * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
+
+  // Export renders a fixed canvas (e.g. 1200×800). Fitting a small graph into
+  // it and top-anchoring leaves a tall band of dead space below. In export
+  // mode, scale to width (capped by MAX_SCALE) and size the canvas to the
+  // scaled content height. The interactive preview keeps the fit-to-pane
+  // behaviour so a small graph still fills its pane.
+  let scale: number;
+  let canvasHeight: number;
+  if (exportDims) {
+    scale = Math.min(MAX_SCALE, scaleX);
+    canvasHeight = titleHeight + diagramH * scale + sDiagramPadding * 2;
+  } else {
+    const availH = height - titleHeight;
+    const scaleY = (availH - sDiagramPadding * 2) / diagramH;
+    scale = Math.min(MAX_SCALE, scaleX, scaleY);
+    canvasHeight = height;
+  }
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
@@ -489,8 +503,8 @@ export function renderFlowchart(
     .select(container)
     .append('svg')
     .attr('width', width)
-    .attr('height', height)
-    .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('height', canvasHeight)
+    .attr('viewBox', `0 0 ${width} ${canvasHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('font-family', FONT_FAMILY);
 

package/src/graph/state-renderer.ts

@@ -130,10 +130,24 @@ export function renderState(
 
   const diagramW = layout.width;
   const diagramH = layout.height;
-  const availH = height - titleHeight;
   const scaleX = (width - sDiagramPadding * 2) / diagramW;
-  const scaleY = (availH - sDiagramPadding * 2) / diagramH;
-  const scale = Math.min(MAX_SCALE, scaleX, scaleY);
+
+  // Export renders a fixed canvas (e.g. 1200×800). Fitting a small graph into
+  // it and top-anchoring leaves a tall band of dead space below. In export
+  // mode, scale to width (capped by MAX_SCALE) and size the canvas to the
+  // scaled content height. The interactive preview keeps the fit-to-pane
+  // behaviour so a small graph still fills its pane.
+  let scale: number;
+  let canvasHeight: number;
+  if (exportDims) {
+    scale = Math.min(MAX_SCALE, scaleX);
+    canvasHeight = titleHeight + diagramH * scale + sDiagramPadding * 2;
+  } else {
+    const availH = height - titleHeight;
+    const scaleY = (availH - sDiagramPadding * 2) / diagramH;
+    scale = Math.min(MAX_SCALE, scaleX, scaleY);
+    canvasHeight = height;
+  }
 
   const scaledW = diagramW * scale;
   const offsetX = (width - scaledW) / 2;
@@ -143,8 +157,8 @@ export function renderState(
     .select(container)
     .append('svg')
     .attr('width', width)
-    .attr('height', height)
-    .attr('viewBox', `0 0 ${width} ${height}`)
+    .attr('height', canvasHeight)
+    .attr('viewBox', `0 0 ${width} ${canvasHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .style('font-family', FONT_FAMILY);
 

package/src/infra/parser.ts

@@ -1159,5 +1159,5 @@ export function extractSymbols(docText: string): DiagramSymbols {
       }
     }
   }
-  return { kind: 'infra', entities, keywords: [] };
+  return { kind: 'infra', entities };
 }

package/src/pert/parser.ts

@@ -1639,20 +1639,6 @@ export function extractPertSymbols(docText: string): DiagramSymbols {
   return {
     kind: 'pert',
     entities,
-    keywords: [
-      'time-unit',
-      'default-confidence',
-      'direction',
-      'node-detail',
-      'trials',
-      'seed',
-      'scrubber-trials',
-      'start-date',
-      'end-date',
-      'active-tag',
-      'tag',
-      'as',
-    ],
   };
 }
 

package/src/raci/renderer.ts

@@ -515,6 +515,12 @@ export function renderRaci(
   const colBottomY = cursorY + sColumnBottomPad;
   const totalHeight = colBottomY + sVMargin;
 
+  // Export renders a fixed canvas (e.g. 1200×800); a short matrix would
+  // otherwise reserve a tall band of dead space below the last row. Size the
+  // export canvas to the content height. The interactive preview keeps the
+  // `max(pane, content)` behaviour so a short matrix still fills the pane.
+  const svgHeight = exportDims ? totalHeight : Math.max(height, totalHeight);
+
   // ── SVG root ───────────────────────────────────────────────
 
   const svg = d3Selection
@@ -522,8 +528,8 @@ export function renderRaci(
     .append('svg')
     .attr('xmlns', 'http://www.w3.org/2000/svg')
     .attr('width', width)
-    .attr('height', Math.max(height, totalHeight))
-    .attr('viewBox', `0 0 ${width} ${Math.max(height, totalHeight)}`)
+    .attr('height', svgHeight)
+    .attr('viewBox', `0 0 ${width} ${svgHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .attr('font-family', FONT_FAMILY)
     .style('background', 'transparent');