@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/wireframe/types.ts

@@ -0,0 +1,110 @@
+// ============================================================
+// Wireframe Diagram Types
+// ============================================================
+
+import type { DgmoError } from '../diagnostics';
+import type { TagGroup } from '../utils/tag-groups';
+
+/**
+ * All wireframe element types.
+ * Visual-mnemonic elements are inferred from bracket syntax;
+ * keyword elements use a small vocabulary (9 keywords).
+ */
+export type WireframeElementType =
+  | 'group'
+  | 'textInput'
+  | 'button'
+  | 'dropdown'
+  | 'checkbox'
+  | 'radio'
+  | 'heading'
+  | 'divider'
+  | 'text'
+  | 'listItem'
+  | 'nav'
+  | 'tabs'
+  | 'table'
+  | 'image'
+  | 'modal'
+  | 'skeleton'
+  | 'alert'
+  | 'progress'
+  | 'chart';
+
+/**
+ * Single flat interface for all wireframe elements (ADR-8).
+ * No separate WireframeGroup — all elements carry group fields
+ * with sensible defaults (isContainer=false, orientation='vertical', isSkeleton=false).
+ */
+export interface WireframeElement {
+  id: string;
+  type: WireframeElementType;
+  /** Display label / placeholder text / heading text */
+  label: string;
+  /** Child elements (non-empty only when isContainer=true) */
+  children: WireframeElement[];
+  /** Pipe metadata key-value pairs */
+  metadata: Record<string, string>;
+  /** State keywords: disabled, active, ghost, destructive, etc. */
+  states: string[];
+  /** Free-text annotations from pipe metadata */
+  annotations: string[];
+  /** 1-based line number in source */
+  lineNumber: number;
+  /** Measured indentation (column) */
+  indent: number;
+  /** True when element has children (set during parse via indent stack) */
+  isContainer: boolean;
+  /** Stacking direction for group children */
+  orientation: 'vertical' | 'horizontal';
+  /** True when inside a skeleton block */
+  isSkeleton: boolean;
+
+  // ── Type-specific fields ─────────────────────────────────
+  /** Heading level: 1 for `#`, 2 for `##` */
+  headingLevel?: number;
+  /** Dropdown options (for type='dropdown') */
+  options?: string[];
+  /** Checked state (for type='checkbox') */
+  checked?: boolean;
+  /** Selected state (for type='radio') */
+  selected?: boolean;
+  /** Image hint: 'default' | 'round' | 'wide' */
+  imageHint?: 'default' | 'round' | 'wide';
+  /** Progress value 0-100 (for type='progress') */
+  progressValue?: number;
+  /** Chart hint: 'line' | 'bar' | 'pie' */
+  chartHint?: 'line' | 'bar' | 'pie';
+  /** Table dimensions for skeleton shorthand (for type='table') */
+  tableRows?: number;
+  tableCols?: number;
+  /** Table header row labels (for type='table') */
+  tableHeaders?: string[];
+  /** Table data rows — each row is an array of cell content strings (for type='table') */
+  tableData?: string[][];
+  /** Inline elements on the same line (multi-element line) */
+  inlineElements?: WireframeElement[];
+  /** Label element for label-field pairing */
+  labelFor?: WireframeElement;
+  /** Color from tag system */
+  color?: string;
+  /** Field variant: password, textarea */
+  fieldVariant?: 'password' | 'textarea';
+}
+
+/** Form factor / layout mode */
+export type WireframeFormFactor = 'desktop' | 'mobile';
+
+export interface ParsedWireframe {
+  title: string | null;
+  titleLineNumber: number | null;
+  formFactor: WireframeFormFactor;
+  /** Top-level elements (roots of the hierarchy) */
+  roots: WireframeElement[];
+  /** Modal elements (rendered separately below main) */
+  modals: WireframeElement[];
+  tagGroups: TagGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error: string | null;
+}

package/src/branding.ts

@@ -1,67 +0,0 @@
-import { FONT_FAMILY } from './fonts';
-
-const BRANDING_HEIGHT = 20;
-
-/**
- * Injects `diagrammo.app` branding text into an SVG string.
- * Extends the SVG height by 20px and places the text at the bottom-right.
- */
-export function injectBranding(svgHtml: string, mutedColor: string): string {
-  if (!svgHtml) return svgHtml;
-
-  const brandingText = `<text x="0" y="0" font-size="10" font-family="${FONT_FAMILY}" fill="${mutedColor}" opacity="0.5" text-anchor="end">diagrammo.app</text>`;
-
-  // Parse viewBox
-  const vbMatch = svgHtml.match(/viewBox="([^"]+)"/);
-  const heightAttrMatch = svgHtml.match(/height="([^"]+)"/);
-
-  if (vbMatch) {
-    const parts = vbMatch[1].split(/\s+/).map(Number);
-    if (parts.length === 4) {
-      const [vx, vy, vw, vh] = parts;
-      const newVh = vh + BRANDING_HEIGHT;
-      const textX = vx + vw - 4;
-      const textY = vy + vh + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-
-      let result = svgHtml.replace(
-        /viewBox="[^"]+"/,
-        `viewBox="${vx} ${vy} ${vw} ${newVh}"`
-      );
-
-      // Update height attribute if present
-      if (heightAttrMatch) {
-        const oldH = parseFloat(heightAttrMatch[1]);
-        if (!isNaN(oldH)) {
-          result = result.replace(
-            `height="${heightAttrMatch[1]}"`,
-            `height="${oldH + BRANDING_HEIGHT}"`
-          );
-        }
-      }
-
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  // Fallback: no viewBox, try width/height attributes
-  if (heightAttrMatch) {
-    const widthMatch = svgHtml.match(/width="([^"]+)"/);
-    const w = widthMatch ? parseFloat(widthMatch[1]) : 800;
-    const h = parseFloat(heightAttrMatch[1]);
-    if (!isNaN(h) && !isNaN(w)) {
-      const textX = w - 4;
-      const textY = h + BRANDING_HEIGHT - 6;
-      const positioned = brandingText.replace('x="0" y="0"', `x="${textX}" y="${textY}"`);
-      let result = svgHtml.replace(
-        `height="${heightAttrMatch[1]}"`,
-        `height="${h + BRANDING_HEIGHT}"`
-      );
-      result = result.replace('</svg>', `${positioned}</svg>`);
-      return result;
-    }
-  }
-
-  return svgHtml;
-}

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; }
-`
-  );
-}