@diagrammo/dgmo 0.8.18 → 0.8.20

package/src/dgmo-mermaid.ts

@@ -1,262 +0,0 @@
-// ============================================================
-// .dgmo → Mermaid Translation Layer
-// Parses dgmo quadrant syntax and generates valid Mermaid code.
-// ============================================================
-
-import { resolveColorWithDiagnostic } from './colors';
-import type { DgmoError } from './diagnostics';
-import { makeDgmoError, formatDgmoError } from './diagnostics';
-
-// ============================================================
-// Types
-// ============================================================
-
-interface QuadrantLabel {
-  text: string;
-  color: string | null;
-  lineNumber: number;
-}
-
-export interface ParsedQuadrant {
-  title: string | null;
-  titleLineNumber: number | null;
-  xAxis: [string, string] | null;
-  xAxisLineNumber: number | null;
-  yAxis: [string, string] | null;
-  yAxisLineNumber: number | null;
-  quadrants: {
-    topRight: QuadrantLabel | null;
-    topLeft: QuadrantLabel | null;
-    bottomLeft: QuadrantLabel | null;
-    bottomRight: QuadrantLabel | null;
-  };
-  points: { label: string; x: number; y: number; lineNumber: number }[];
-  diagnostics: DgmoError[];
-  error: string | null;
-}
-
-// ============================================================
-// Parser
-// ============================================================
-
-/** Regex for quadrant label lines: `top-right Promote (green)` */
-const QUADRANT_LABEL_RE = /^(.+?)(?:\s*\(([^)]+)\))?\s*$/;
-
-/** Regex for data point lines: `Label 0.9, 0.5` */
-const DATA_POINT_RE = /^(.+?)\s+([0-9]*\.?[0-9]+)\s*,\s*([0-9]*\.?[0-9]+)\s*$/;
-
-const QUADRANT_POSITIONS = new Set([
-  'top-right',
-  'top-left',
-  'bottom-left',
-  'bottom-right',
-]);
-
-/**
- * Parses a .dgmo quadrant document into a structured object.
- * Lines are processed sequentially; unknown lines are silently skipped.
- */
-export function parseQuadrant(content: string): ParsedQuadrant {
-  const result: ParsedQuadrant = {
-    title: null,
-    titleLineNumber: null,
-    xAxis: null,
-    xAxisLineNumber: null,
-    yAxis: null,
-    yAxisLineNumber: null,
-    quadrants: {
-      topRight: null,
-      topLeft: null,
-      bottomLeft: null,
-      bottomRight: null,
-    },
-    points: [],
-    diagnostics: [],
-    error: null,
-  };
-
-  const lines = content.split('\n');
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i].trim();
-    const lineNumber = i + 1; // 1-indexed for editor
-
-    // Skip empty lines and comments
-    if (!line || line.startsWith('//')) continue;
-
-    // Skip the chart: directive (already consumed by router)
-    if (/^chart\s*:/i.test(line)) continue;
-
-    // title <text>
-    const titleMatch = line.match(/^title\s+(.+)/i);
-    if (titleMatch) {
-      result.title = titleMatch[1].trim();
-      result.titleLineNumber = lineNumber;
-      continue;
-    }
-
-    // x-label Low, High
-    const xMatch = line.match(/^x-label\s+(.+)/i);
-    if (xMatch) {
-      const parts = xMatch[1].split(',').map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.xAxis = [parts[0], parts[1]];
-        result.xAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-
-    // y-label Low, High
-    const yMatch = line.match(/^y-label\s+(.+)/i);
-    if (yMatch) {
-      const parts = yMatch[1].split(',').map((s) => s.trim());
-      if (parts.length >= 2) {
-        result.yAxis = [parts[0], parts[1]];
-        result.yAxisLineNumber = lineNumber;
-      }
-      continue;
-    }
-
-    // Quadrant position labels: top-right Label (color)
-    const posMatch = line.match(
-      /^(top-right|top-left|bottom-left|bottom-right)\s+(.+)/i
-    );
-    if (posMatch) {
-      const position = posMatch[1].toLowerCase();
-      const labelMatch = posMatch[2].match(QUADRANT_LABEL_RE);
-      if (labelMatch) {
-        const label: QuadrantLabel = {
-          text: labelMatch[1].trim(),
-          color: labelMatch[2]
-            ? (resolveColorWithDiagnostic(
-                labelMatch[2].trim(),
-                lineNumber,
-                result.diagnostics
-              ) ?? null)
-            : null,
-          lineNumber,
-        };
-        if (position === 'top-right') result.quadrants.topRight = label;
-        else if (position === 'top-left') result.quadrants.topLeft = label;
-        else if (position === 'bottom-left')
-          result.quadrants.bottomLeft = label;
-        else if (position === 'bottom-right')
-          result.quadrants.bottomRight = label;
-      }
-      continue;
-    }
-
-    // Data points: Label x, y
-    const pointMatch = line.match(DATA_POINT_RE);
-    if (pointMatch) {
-      // Make sure this isn't a quadrant position keyword
-      const key = pointMatch[1].trim().toLowerCase();
-      if (!QUADRANT_POSITIONS.has(key)) {
-        result.points.push({
-          label: pointMatch[1].trim(),
-          x: parseFloat(pointMatch[2]),
-          y: parseFloat(pointMatch[3]),
-          lineNumber,
-        });
-      }
-      continue;
-    }
-  }
-
-  if (result.points.length === 0) {
-    const diag = makeDgmoError(
-      1,
-      'No data points found. Add lines like: Label 0.5, 0.7'
-    );
-    result.diagnostics.push(diag);
-    result.error = formatDgmoError(diag);
-  }
-
-  return result;
-}
-
-// ============================================================
-// Mermaid Builder
-// ============================================================
-
-/**
- * Generates valid Mermaid quadrantChart syntax from a parsed quadrant.
- * Returns a string ready for the Mermaid renderer.
- */
-export function buildMermaidQuadrant(
-  parsed: ParsedQuadrant,
-  options: {
-    isDark?: boolean;
-    textColor?: string;
-    mutedTextColor?: string;
-  } = {}
-): string {
-  const { isDark = false, textColor, mutedTextColor } = options;
-  const lines: string[] = [];
-
-  // %%{init}%% block — fill colors with reduced opacity + text color overrides
-  const fillAlpha = isDark ? '30' : '55';
-  const primaryText = textColor ?? (isDark ? '#d0d0d0' : '#333333');
-  const quadrantLabelText = mutedTextColor ?? (isDark ? '#888888' : '#666666');
-
-  const colorMap: Record<string, string> = {};
-  if (parsed.quadrants.topRight?.color)
-    colorMap.quadrant1Fill = parsed.quadrants.topRight.color + fillAlpha;
-  if (parsed.quadrants.topLeft?.color)
-    colorMap.quadrant2Fill = parsed.quadrants.topLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomLeft?.color)
-    colorMap.quadrant3Fill = parsed.quadrants.bottomLeft.color + fillAlpha;
-  if (parsed.quadrants.bottomRight?.color)
-    colorMap.quadrant4Fill = parsed.quadrants.bottomRight.color + fillAlpha;
-
-  // Quadrant labels use muted color, points use primary text color
-  colorMap.quadrant1TextFill = quadrantLabelText;
-  colorMap.quadrant2TextFill = quadrantLabelText;
-  colorMap.quadrant3TextFill = quadrantLabelText;
-  colorMap.quadrant4TextFill = quadrantLabelText;
-  colorMap.quadrantPointTextFill = primaryText;
-  colorMap.quadrantXAxisTextFill = primaryText;
-  colorMap.quadrantYAxisTextFill = primaryText;
-  colorMap.quadrantTitleFill = primaryText;
-
-  const vars = JSON.stringify(colorMap);
-  lines.push(`%%{init: {"themeVariables": ${vars}}}%%`);
-
-  lines.push('quadrantChart');
-
-  if (parsed.title) {
-    lines.push(`    title ${parsed.title}`);
-  }
-
-  if (parsed.xAxis) {
-    lines.push(`    x-axis ${parsed.xAxis[0]} --> ${parsed.xAxis[1]}`);
-  }
-
-  if (parsed.yAxis) {
-    lines.push(`    y-axis ${parsed.yAxis[0]} --> ${parsed.yAxis[1]}`);
-  }
-
-  // Helper to quote labels that need it (contain spaces or special chars)
-  const quote = (s: string): string => (/[\s,:[\]]/.test(s) ? `"${s}"` : s);
-
-  // Quadrant labels: 1=top-right, 2=top-left, 3=bottom-left, 4=bottom-right
-  if (parsed.quadrants.topRight) {
-    lines.push(`    quadrant-1 ${quote(parsed.quadrants.topRight.text)}`);
-  }
-  if (parsed.quadrants.topLeft) {
-    lines.push(`    quadrant-2 ${quote(parsed.quadrants.topLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomLeft) {
-    lines.push(`    quadrant-3 ${quote(parsed.quadrants.bottomLeft.text)}`);
-  }
-  if (parsed.quadrants.bottomRight) {
-    lines.push(`    quadrant-4 ${quote(parsed.quadrants.bottomRight.text)}`);
-  }
-
-  // Data points
-  for (const point of parsed.points) {
-    lines.push(`    ${quote(point.label)}: [${point.x}, ${point.y}]`);
-  }
-
-  return lines.join('\n');
-}

package/src/palettes/mermaid-bridge.ts

@@ -1,220 +0,0 @@
-import type { PaletteColors } from './types';
-import { mute, tint, shade, contrastText } from './color-utils';
-
-// ============================================================
-// Mermaid Theme Variable Generator
-// ============================================================
-
-/**
- * Generates ~121 Mermaid theme variables from palette tokens.
- * Replaces the hardcoded lightThemeVars/darkThemeVars objects.
- *
- * Dark mode fills use `mute()` to derive desaturated variants
- * that are readable with light text.
- */
-export function buildMermaidThemeVars(
-  colors: PaletteColors,
-  isDark: boolean
-): Record<string, string> {
-  const c = colors.colors;
-
-  // Ordered accent array for pie/cScale/fillType/actor slots
-  const accentOrder = [
-    c.blue,
-    c.red,
-    c.green,
-    c.yellow,
-    c.purple,
-    c.orange,
-    c.teal,
-    c.cyan,
-    colors.secondary,
-  ];
-
-  // Dark mode fills use muted variants for readability
-  const fills = isDark ? accentOrder.map(mute) : accentOrder;
-
-  return {
-    // ── Backgrounds ──
-    background: isDark ? colors.overlay : colors.border,
-    mainBkg: colors.surface,
-
-    // ── Primary/Secondary/Tertiary nodes ──
-    primaryColor: isDark ? colors.primary : colors.surface,
-    primaryTextColor: colors.text,
-    primaryBorderColor: isDark ? colors.secondary : colors.border,
-    secondaryColor: colors.secondary,
-    secondaryTextColor: contrastText(colors.secondary, colors.text, colors.bg),
-    secondaryBorderColor: colors.primary,
-    tertiaryColor: colors.accent,
-    tertiaryTextColor: contrastText(colors.accent, colors.text, colors.bg),
-    tertiaryBorderColor: colors.border,
-
-    // ── Lines & text ──
-    lineColor: colors.textMuted,
-    textColor: colors.text,
-
-    // ── Clusters ──
-    clusterBkg: colors.bg,
-    clusterBorder: isDark ? colors.border : colors.textMuted,
-    titleColor: colors.text,
-
-    // ── Labels ──
-    edgeLabelBackground: 'transparent',
-
-    // ── Notes (sequence diagrams) ──
-    noteBkgColor: colors.bg,
-    noteTextColor: colors.text,
-    noteBorderColor: isDark ? colors.border : colors.textMuted,
-
-    // ── Actors (sequence diagrams) ──
-    actorBkg: colors.surface,
-    actorTextColor: colors.text,
-    actorBorder: isDark ? colors.border : colors.textMuted,
-    actorLineColor: colors.textMuted,
-
-    // ── Signals (sequence diagrams) ──
-    signalColor: colors.textMuted,
-    signalTextColor: colors.text,
-
-    // ── Labels ──
-    labelColor: colors.text,
-    labelTextColor: colors.text,
-    labelBoxBkgColor: colors.surface,
-    labelBoxBorderColor: isDark ? colors.border : colors.textMuted,
-
-    // ── Loop boxes ──
-    loopTextColor: colors.text,
-
-    // ── Activation (sequence diagrams) ──
-    activationBkgColor: isDark ? colors.overlay : colors.border,
-    activationBorderColor: isDark ? colors.border : colors.textMuted,
-
-    // ── Sequence numbers ──
-    sequenceNumberColor: isDark ? colors.text : colors.bg,
-
-    // ── State diagrams ──
-    labelBackgroundColor: colors.surface,
-
-    // ── Pie chart (9 slices) ──
-    // Dark mode: use muted fills so light pieSectionTextColor stays readable
-    ...Object.fromEntries(
-      (isDark ? fills : accentOrder).map((col, i) => [`pie${i + 1}`, col])
-    ),
-    pieTitleTextColor: colors.text,
-    pieSectionTextColor: isDark ? colors.text : colors.bg,
-    pieLegendTextColor: colors.text,
-    pieStrokeColor: 'transparent',
-    pieOuterStrokeWidth: '0px',
-    pieOuterStrokeColor: 'transparent',
-
-    // ── cScale (9 tiers) — muted in dark mode ──
-    ...Object.fromEntries(fills.map((f, i) => [`cScale${i}`, f])),
-    ...Object.fromEntries(
-      fills.map((_, i) => [
-        `cScaleLabel${i}`,
-        isDark ? colors.text : i < 2 || i > 6 ? colors.bg : colors.text,
-      ])
-    ),
-
-    // ── fillType (8 slots) ──
-    ...Object.fromEntries(
-      [0, 1, 2, 3, 4, 5, 6, 7].map((i) => [
-        `fillType${i}`,
-        fills[i % fills.length],
-      ])
-    ),
-
-    // ── Journey actors (6 slots) ──
-    ...Object.fromEntries(
-      [c.red, c.green, c.yellow, c.purple, c.orange, c.teal].map((color, i) => [
-        `actor${i}`,
-        color,
-      ])
-    ),
-
-    // ── Flowchart ──
-    nodeBorder: isDark ? colors.border : colors.textMuted,
-    nodeTextColor: colors.text,
-
-    // ── Gantt ──
-    gridColor: isDark ? colors.textMuted : colors.border,
-    doneTaskBkgColor: c.green,
-    doneTaskBorderColor: isDark ? colors.border : colors.textMuted,
-    activeTaskBkgColor: colors.secondary,
-    activeTaskBorderColor: colors.primary,
-    critBkgColor: c.orange,
-    critBorderColor: c.red,
-    taskBkgColor: colors.surface,
-    taskBorderColor: isDark ? colors.border : colors.textMuted,
-    taskTextColor: contrastText(colors.surface, colors.text, colors.bg),
-    taskTextDarkColor: colors.bg,
-    taskTextLightColor: colors.text,
-    taskTextOutsideColor: colors.text,
-    doneTaskTextColor: contrastText(c.green, colors.text, colors.bg),
-    activeTaskTextColor: contrastText(colors.secondary, colors.text, colors.bg),
-    critTaskTextColor: contrastText(c.orange, colors.text, colors.bg),
-    sectionBkgColor: isDark
-      ? shade(colors.primary, colors.bg, 0.6)
-      : tint(colors.primary, 0.6),
-    altSectionBkgColor: colors.bg,
-    sectionBkgColor2: isDark
-      ? shade(colors.primary, colors.bg, 0.6)
-      : tint(colors.primary, 0.6),
-    todayLineColor: c.yellow,
-
-    // ── Quadrant ──
-    quadrant1Fill: isDark
-      ? shade(c.green, colors.bg, 0.75)
-      : tint(c.green, 0.75),
-    quadrant2Fill: isDark ? shade(c.blue, colors.bg, 0.75) : tint(c.blue, 0.75),
-    quadrant3Fill: isDark ? shade(c.red, colors.bg, 0.75) : tint(c.red, 0.75),
-    quadrant4Fill: isDark
-      ? shade(c.yellow, colors.bg, 0.75)
-      : tint(c.yellow, 0.75),
-    quadrant1TextFill: colors.text,
-    quadrant2TextFill: colors.text,
-    quadrant3TextFill: colors.text,
-    quadrant4TextFill: colors.text,
-    quadrantPointFill: isDark ? c.cyan : c.blue,
-    quadrantPointTextFill: colors.text,
-    quadrantXAxisTextFill: colors.text,
-    quadrantYAxisTextFill: colors.text,
-    quadrantTitleFill: colors.text,
-    quadrantInternalBorderStrokeFill: colors.border,
-    quadrantExternalBorderStrokeFill: colors.border,
-  };
-}
-
-// ============================================================
-// Mermaid Theme CSS Generator
-// ============================================================
-
-/**
- * Generates custom CSS overrides for Mermaid SVGs.
- * Handles git graph label backgrounds and dark-mode text readability.
- */
-export function buildThemeCSS(palette: PaletteColors, isDark: boolean): string {
-  const base = `
-  .branchLabelBkg { fill: transparent !important; stroke: transparent !important; }
-  .commit-label-bkg { fill: transparent !important; stroke: transparent !important; }
-  .tag-label-bkg { fill: transparent !important; stroke: transparent !important; }
-
-  /* GitGraph: ensure commit and branch label text matches palette */
-  .commit-label { fill: ${palette.text} !important; }
-  .branch-label { fill: ${palette.text} !important; }
-  .tag-label { fill: ${palette.text} !important; }
-`;
-
-  if (!isDark) return base;
-
-  return (
-    base +
-    `
-  /* Flowchart: ensure node and edge label text is readable */
-  .nodeLabel, .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
-  .edgeLabel { color: ${palette.text} !important; fill: ${palette.text} !important; }
-  .edgeLabel .label { color: ${palette.text} !important; fill: ${palette.text} !important; }
-`
-  );
-}