@diagrammo/dgmo 0.6.2 → 0.6.3

package/src/completion.ts

@@ -0,0 +1,58 @@
+/**
+ * Diagram symbol extraction API.
+ *
+ * Provides DiagramSymbols interface + extractDiagramSymbols() dispatch.
+ * Each diagram type registers its own extractor via registerExtractor().
+ * All built-in extractors are registered at module init below.
+ */
+
+import { extractSymbols as extractErSymbols } from './er/parser';
+import { extractSymbols as extractFlowchartSymbols } from './graph/flowchart-parser';
+import { extractSymbols as extractInfraSymbols } from './infra/parser';
+import { extractSymbols as extractClassSymbols } from './class/parser';
+
+// ChartType is just a string — alias here for documentation clarity.
+export type ChartType = string;
+
+export interface DiagramSymbols {
+  kind: ChartType;
+  entities: string[]; // table names, node IDs, class names, etc.
+  keywords: string[]; // diagram-specific reserved words
+}
+
+export type ExtractFn = (docText: string) => DiagramSymbols;
+
+const registry = new Map<ChartType, ExtractFn>();
+
+export function registerExtractor(kind: ChartType, fn: ExtractFn): void {
+  registry.set(kind, fn);
+}
+
+/**
+ * Extract diagram symbols from document text.
+ * Returns null if the chart type is unknown or has no registered extractor.
+ */
+export function extractDiagramSymbols(docText: string): DiagramSymbols | null {
+  // Parse chartType from first `chart:` line — lightweight, no full parser.
+  let chartType: string | null = null;
+  for (const line of docText.split('\n')) {
+    const m = line.match(/^\s*chart\s*:\s*(.+)/i);
+    if (m) {
+      chartType = m[1]!.trim().toLowerCase();
+      break;
+    }
+  }
+  if (!chartType) return null;
+  const fn = registry.get(chartType);
+  if (!fn) return null;
+  return fn(docText);
+}
+
+// ============================================================
+// Register built-in extractors
+// ============================================================
+
+registerExtractor('er', extractErSymbols);
+registerExtractor('flowchart', extractFlowchartSymbols);
+registerExtractor('infra', extractInfraSymbols);
+registerExtractor('class', extractClassSymbols);

package/src/d3.ts

@@ -1861,7 +1861,6 @@ export function renderArcDiagram(
         const positions = groupNodes.map((n) => yScale(n)!);
         const minY = Math.min(...positions) - bandPad;
         const maxY = Math.max(...positions) + bandPad;
-        const bandColor = group.color ?? mutedColor;
 
         g.append('rect')
           .attr('class', 'arc-group-band')
@@ -1996,7 +1995,6 @@ export function renderArcDiagram(
         const positions = groupNodes.map((n) => xScale(n)!);
         const minX = Math.min(...positions) - bandPad;
         const maxX = Math.max(...positions) + bandPad;
-        const bandColor = group.color ?? mutedColor;
 
         g.append('rect')
           .attr('class', 'arc-group-band')
@@ -2864,6 +2862,7 @@ export function renderTimeline(
   const textColor = palette.text;
   const mutedColor = palette.border;
   const bgColor = palette.bg;
+  const bg = isDark ? palette.surface : palette.bg;
   const colors = getSeriesColors(palette);
 
   // Assign colors to groups
@@ -3254,7 +3253,7 @@ export function renderTimeline(
             const y2 = yScale(parseTimelineDate(ev.endDate));
             const rectH = Math.max(y2 - y, 4);
 
-            let fill: string = evColor;
+            let fill: string = mix(evColor, bg, 30);
             if (ev.uncertain) {
               const gradientId = `uncertain-vg-${ev.lineNumber}`;
               const defs =
@@ -3276,7 +3275,7 @@ export function renderTimeline(
                 .enter()
                 .append('stop')
                 .attr('offset', (d) => d.offset)
-                .attr('stop-color', laneColor)
+                .attr('stop-color', mix(laneColor, bg, 30))
                 .attr('stop-opacity', (d) => d.opacity);
               fill = `url(#${gradientId})`;
             }
@@ -3288,7 +3287,9 @@ export function renderTimeline(
               .attr('width', 12)
               .attr('height', rectH)
               .attr('rx', 4)
-              .attr('fill', fill);
+              .attr('fill', fill)
+              .attr('stroke', evColor)
+              .attr('stroke-width', 2);
             evG
               .append('text')
               .attr('x', laneCenter + 14)
@@ -3303,9 +3304,9 @@ export function renderTimeline(
               .attr('cx', laneCenter)
               .attr('cy', y)
               .attr('r', 4)
-              .attr('fill', evColor)
-              .attr('stroke', bgColor)
-              .attr('stroke-width', 1.5);
+              .attr('fill', mix(evColor, bg, 30))
+              .attr('stroke', evColor)
+              .attr('stroke-width', 2);
             evG
               .append('text')
               .attr('x', laneCenter + 10)
@@ -3472,7 +3473,7 @@ export function renderTimeline(
           const y2 = yScale(parseTimelineDate(ev.endDate));
           const rectH = Math.max(y2 - y, 4);
 
-          let fill: string = color;
+          let fill: string = mix(color, bg, 30);
           if (ev.uncertain) {
             const gradientId = `uncertain-v-${ev.lineNumber}`;
             const defs =
@@ -3494,7 +3495,7 @@ export function renderTimeline(
               .enter()
               .append('stop')
               .attr('offset', (d) => d.offset)
-              .attr('stop-color', color)
+              .attr('stop-color', mix(color, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
           }
@@ -3506,7 +3507,9 @@ export function renderTimeline(
             .attr('width', 12)
             .attr('height', rectH)
             .attr('rx', 4)
-            .attr('fill', fill);
+            .attr('fill', fill)
+            .attr('stroke', color)
+            .attr('stroke-width', 2);
           evG
             .append('text')
             .attr('x', axisX + 16)
@@ -3521,9 +3524,9 @@ export function renderTimeline(
             .attr('cx', axisX)
             .attr('cy', y)
             .attr('r', 4)
-            .attr('fill', color)
-            .attr('stroke', bgColor)
-            .attr('stroke-width', 1.5);
+            .attr('fill', mix(color, bg, 30))
+            .attr('stroke', color)
+            .attr('stroke-width', 2);
           evG
             .append('text')
             .attr('x', axisX + 16)
@@ -3781,7 +3784,7 @@ export function renderTimeline(
           const estLabelWidth = ev.label.length * 7 + 16;
           const labelFitsInside = rectW >= estLabelWidth;
 
-          let fill: string = evColor;
+          let fill: string = mix(evColor, bg, 30);
           if (ev.uncertain) {
             // Create gradient for uncertain end - fades last 20%
             const gradientId = `uncertain-${ev.lineNumber}`;
@@ -3803,7 +3806,7 @@ export function renderTimeline(
               .enter()
               .append('stop')
               .attr('offset', (d) => d.offset)
-              .attr('stop-color', evColor)
+              .attr('stop-color', mix(evColor, bg, 30))
               .attr('stop-opacity', (d) => d.opacity);
             fill = `url(#${gradientId})`;
           }
@@ -3815,17 +3818,19 @@ export function renderTimeline(
             .attr('width', rectW)
             .attr('height', BAR_H)
             .attr('rx', 4)
-            .attr('fill', fill);
+            .attr('fill', fill)
+            .attr('stroke', evColor)
+            .attr('stroke-width', 2);
 
           if (labelFitsInside) {
-            // Text inside bar - always white for readability
+            // Text inside bar - use textColor for readability on muted fill
             evG
               .append('text')
               .attr('x', x + 8)
               .attr('y', y)
               .attr('dy', '0.35em')
               .attr('text-anchor', 'start')
-              .attr('fill', '#ffffff')
+              .attr('fill', textColor)
               .attr('font-size', '14px')
               .attr('font-weight', '700')
               .text(ev.label);
@@ -3856,9 +3861,9 @@ export function renderTimeline(
             .attr('cx', x)
             .attr('cy', y)
             .attr('r', 5)
-            .attr('fill', evColor)
-            .attr('stroke', bgColor)
-            .attr('stroke-width', 1.5);
+            .attr('fill', mix(evColor, bg, 30))
+            .attr('stroke', evColor)
+            .attr('stroke-width', 2);
           evG
             .append('text')
             .attr('x', flipLeft ? x - 10 : x + 10)
@@ -4041,7 +4046,7 @@ export function renderTimeline(
         const estLabelWidth = ev.label.length * 7 + 16;
         const labelFitsInside = rectW >= estLabelWidth;
 
-        let fill: string = color;
+        let fill: string = mix(color, bg, 30);
         if (ev.uncertain) {
           // Create gradient for uncertain end - fades last 20%
           const gradientId = `uncertain-ts-${ev.lineNumber}`;
@@ -4063,7 +4068,7 @@ export function renderTimeline(
             .enter()
             .append('stop')
             .attr('offset', (d) => d.offset)
-            .attr('stop-color', color)
+            .attr('stop-color', mix(color, bg, 30))
             .attr('stop-opacity', (d) => d.opacity);
           fill = `url(#${gradientId})`;
         }
@@ -4075,17 +4080,19 @@ export function renderTimeline(
           .attr('width', rectW)
           .attr('height', BAR_H)
           .attr('rx', 4)
-          .attr('fill', fill);
+          .attr('fill', fill)
+          .attr('stroke', color)
+          .attr('stroke-width', 2);
 
         if (labelFitsInside) {
-          // Text inside bar - always white for readability
+          // Text inside bar - use textColor for readability on muted fill
           evG
             .append('text')
             .attr('x', x + 8)
             .attr('y', y)
             .attr('dy', '0.35em')
             .attr('text-anchor', 'start')
-            .attr('fill', '#ffffff')
+            .attr('fill', textColor)
             .attr('font-size', '14px')
             .attr('font-weight', '700')
             .text(ev.label);
@@ -4116,9 +4123,9 @@ export function renderTimeline(
           .attr('cx', x)
           .attr('cy', y)
           .attr('r', 5)
-          .attr('fill', color)
-          .attr('stroke', bgColor)
-          .attr('stroke-width', 1.5);
+          .attr('fill', mix(color, bg, 30))
+          .attr('stroke', color)
+          .attr('stroke-width', 2);
         evG
           .append('text')
           .attr('x', flipLeft ? x - 10 : x + 10)
@@ -4438,8 +4445,8 @@ export function renderTimeline(
             color = ev.group && groupColorMap.has(ev.group)
               ? groupColorMap.get(ev.group)! : textColor;
           }
-          el.selectAll('rect').attr('fill', color);
-          el.selectAll('circle:not(.tl-event-point-outline)').attr('fill', color);
+          el.selectAll('rect').attr('fill', mix(color, bg, 30)).attr('stroke', color);
+          el.selectAll('circle:not(.tl-event-point-outline)').attr('fill', mix(color, bg, 30)).attr('stroke', color);
         });
       }
 
@@ -4635,46 +4642,6 @@ function renderWordCloudAsync(
 // Venn Diagram Math Helpers
 // ============================================================
 
-function radiusFromArea(area: number): number {
-  return Math.sqrt(area / Math.PI);
-}
-
-function circleOverlapArea(r1: number, r2: number, d: number): number {
-  // No overlap
-  if (d >= r1 + r2) return 0;
-  // Full containment
-  if (d + Math.min(r1, r2) <= Math.max(r1, r2)) {
-    return Math.PI * Math.min(r1, r2) ** 2;
-  }
-  const part1 = r1 * r1 * Math.acos((d * d + r1 * r1 - r2 * r2) / (2 * d * r1));
-  const part2 = r2 * r2 * Math.acos((d * d + r2 * r2 - r1 * r1) / (2 * d * r2));
-  const part3 =
-    0.5 *
-    Math.sqrt((-d + r1 + r2) * (d + r1 - r2) * (d - r1 + r2) * (d + r1 + r2));
-  return part1 + part2 - part3;
-}
-
-function distanceForOverlap(
-  r1: number,
-  r2: number,
-  targetArea: number
-): number {
-  if (targetArea <= 0) return r1 + r2;
-  const minR = Math.min(r1, r2);
-  if (targetArea >= Math.PI * minR * minR) return Math.abs(r1 - r2);
-  let lo = Math.abs(r1 - r2);
-  let hi = r1 + r2;
-  for (let i = 0; i < 64; i++) {
-    const mid = (lo + hi) / 2;
-    if (circleOverlapArea(r1, r2, mid) > targetArea) {
-      lo = mid;
-    } else {
-      hi = mid;
-    }
-  }
-  return (lo + hi) / 2;
-}
-
 interface Point {
   x: number;
   y: number;
@@ -4686,29 +4653,6 @@ interface Circle {
   r: number;
 }
 
-function thirdCirclePosition(
-  ax: number,
-  ay: number,
-  dAC: number,
-  bx: number,
-  by: number,
-  dBC: number
-): Point {
-  const dx = bx - ax;
-  const dy = by - ay;
-  const dAB = Math.sqrt(dx * dx + dy * dy);
-  if (dAB === 0) return { x: ax + dAC, y: ay };
-  const cosA = (dAB * dAB + dAC * dAC - dBC * dBC) / (2 * dAB * dAC);
-  const sinA = Math.sqrt(Math.max(0, 1 - cosA * cosA));
-  const ux = dx / dAB;
-  const uy = dy / dAB;
-  // Place C above the AB line
-  return {
-    x: ax + dAC * (cosA * ux - sinA * uy),
-    y: ay + dAC * (cosA * uy + sinA * ux),
-  };
-}
-
 function fitCirclesToContainerAsymmetric(
   circles: Circle[],
   w: number,
@@ -5255,7 +5199,6 @@ export function renderQuadrant(
   const init = initD3Chart(container, palette, exportDims);
   if (!init) return;
   const { svg, width, height, textColor } = init;
-  const mutedColor = palette.textMuted;
   const borderColor = palette.border;
 
   // Default quadrant colors with alpha
@@ -5300,14 +5243,24 @@ export function renderQuadrant(
     return `#${c(ar,br)}${c(ag,bg)}${c(ab,bb)}`;
   };
 
-  // Opaque quadrant fills using the assigned color directly
-  const getQuadrantFill = (
+  const bg = isDark ? palette.surface : palette.bg;
+
+  // Full palette color for a quadrant (used for border and label tinting)
+  const getQuadrantColor = (
     label: QuadrantLabel | null,
     defaultIdx: number
   ): string => {
     return label?.color ?? defaultColors[defaultIdx % defaultColors.length];
   };
 
+  // Muted fill: palette color blended 30% toward bg — matches other chart fill style
+  const getQuadrantFill = (
+    label: QuadrantLabel | null,
+    defaultIdx: number
+  ): string => {
+    return mixHex(getQuadrantColor(label, defaultIdx), bg, 30);
+  };
+
   // Quadrant definitions: position, rect bounds, label position
   const quadrantDefs: {
     position: QuadrantPosition;
@@ -5378,17 +5331,16 @@ export function renderQuadrant(
     .attr('width', (d) => d.w)
     .attr('height', (d) => d.h)
     .attr('fill', (d) => getQuadrantFill(d.label, d.colorIdx))
-    .attr('stroke', borderColor)
-    .attr('stroke-width', 0.5);
+    .attr('stroke', (d) => getQuadrantColor(d.label, d.colorIdx))
+    .attr('stroke-width', 2);
 
   // White text for points; quadrant labels use a darkened shade of their fill
-  const contrastColor = '#ffffff';
   const shadowColor = 'rgba(0,0,0,0.4)';
 
-  // Darken the quadrant fill to create a watermark-style label color
+  // Darken the full palette color (not the muted fill) to create a watermark-style label
   const getQuadrantLabelColor = (d: (typeof quadrantDefs)[number]): string => {
-    const fill = getQuadrantFill(d.label, d.colorIdx);
-    return mixHex('#000000', fill, 40);
+    const color = getQuadrantColor(d.label, d.colorIdx);
+    return mixHex('#000000', color, 40);
   };
 
   // Scale label font size to fit within quadrant bounds, wrapping into multiple lines if needed
@@ -5666,13 +5618,13 @@ export function renderQuadrant(
       .attr('stroke', pointColor)
       .attr('stroke-width', 2);
 
-    // Label (contrasting color with shadow for readability)
+    // Label (palette text color adapts to light/dark mode)
     pointG
       .append('text')
       .attr('x', cx)
       .attr('y', cy - 10)
       .attr('text-anchor', 'middle')
-      .attr('fill', contrastColor)
+      .attr('fill', textColor)
       .attr('font-size', '12px')
       .attr('font-weight', '700')
       .style('text-shadow', `0 1px 2px ${shadowColor}`)

package/src/dgmo-router.ts

@@ -18,63 +18,6 @@ import { looksLikeSitemap, parseSitemap } from './sitemap/parser';
 import { parseInfra } from './infra/parser';
 import type { DgmoError } from './diagnostics';
 
-/**
- * Framework identifiers used by the .dgmo router internally.
- * Not part of the public API — use RenderCategory instead.
- */
-type DgmoFramework = 'echart' | 'd3' | 'mermaid';
-
-/**
- * Maps every supported chart type string to its backing framework (internal).
- */
-const DGMO_CHART_TYPE_MAP: Record<string, DgmoFramework> = {
-  // Standard charts (via ECharts)
-  bar: 'echart',
-  line: 'echart',
-  'multi-line': 'echart',
-  area: 'echart',
-  pie: 'echart',
-  doughnut: 'echart',
-  radar: 'echart',
-  'polar-area': 'echart',
-  'bar-stacked': 'echart',
-
-  // ECharts
-  scatter: 'echart',
-  sankey: 'echart',
-  chord: 'echart',
-  function: 'echart',
-  heatmap: 'echart',
-  funnel: 'echart',
-
-  // D3
-  slope: 'd3',
-  wordcloud: 'd3',
-  arc: 'd3',
-  timeline: 'd3',
-  venn: 'd3',
-  quadrant: 'd3',
-  sequence: 'd3',
-  flowchart: 'd3',
-  class: 'd3',
-  er: 'd3',
-  org: 'd3',
-  kanban: 'd3',
-  c4: 'd3',
-  'initiative-status': 'd3',
-  state: 'd3',
-  sitemap: 'd3',
-  infra: 'd3',
-};
-
-/**
- * Returns the internal framework for a given chart type, or `null` if unknown.
- * Internal only — use getRenderCategory() for public dispatch.
- */
-function getDgmoFramework(chartType: string): DgmoFramework | null {
-  return DGMO_CHART_TYPE_MAP[chartType.toLowerCase()] ?? null;
-}
-
 /**
  * Extracts the `chart:` type value from raw file content.
  * Falls back to inference when no explicit `chart:` line is found