@diagrammo/dgmo 0.8.19 → 0.8.21

package/src/mindmap/text-wrap.ts

@@ -0,0 +1,207 @@
+// ============================================================
+// Mindmap Text Wrapping
+// ============================================================
+//
+// Shared logic for wrapping node labels and descriptions into
+// multiple lines. Used by both layout (for sizing) and renderer
+// (for drawing). Ensures both agree on line breaks and font size.
+
+const CHAR_WIDTH_RATIO = 0.58; // avg char width / fontSize for Helvetica
+const H_PAD = 16; // 8px padding each side
+const MAX_LABEL_LINES = 3;
+const MAX_DESC_LINES = 2;
+
+/** Split text into tokens, keeping hyphens attached to the left word. */
+function tokenize(text: string): string[] {
+  const tokens: string[] = [];
+  // Split on spaces, and after hyphens (keep hyphen with left token)
+  const parts = text.split(/(\s+)/);
+  for (const part of parts) {
+    if (/^\s+$/.test(part)) continue; // skip whitespace tokens
+    // Further split on hyphens: "well-known" → ["well-", "known"]
+    const hyphenParts = part.split(/(?<=-)(?=\S)/);
+    tokens.push(...hyphenParts);
+  }
+  return tokens;
+}
+
+/**
+ * Wrap text into lines that fit within maxWidth at the given fontSize.
+ * Returns null if the text doesn't fit within maxLines.
+ */
+function tryWrap(
+  tokens: string[],
+  maxWidth: number,
+  fontSize: number,
+  maxLines: number
+): string[] | null {
+  const availWidth = maxWidth - H_PAD;
+  const charWidth = fontSize * CHAR_WIDTH_RATIO;
+  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+
+  const lines: string[] = [];
+  let currentLine = '';
+
+  for (const token of tokens) {
+    // After a hyphen-ending token, don't add a space
+    const sep = currentLine && !currentLine.endsWith('-') ? ' ' : '';
+    const candidate = currentLine + sep + token;
+
+    if (candidate.length <= maxChars) {
+      currentLine = candidate;
+    } else if (!currentLine) {
+      // Single token exceeds line — force it onto this line (will be truncated later if needed)
+      currentLine = token;
+    } else {
+      // Push current line, start new one
+      lines.push(currentLine);
+      if (lines.length >= maxLines) {
+        // Can't fit — return null to signal overflow
+        return null;
+      }
+      currentLine = token;
+    }
+  }
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  if (lines.length > maxLines) return null;
+  return lines;
+}
+
+/** Truncate the last line of a lines array with ellipsis to fit maxChars. */
+function truncateLastLine(
+  lines: string[],
+  maxWidth: number,
+  fontSize: number
+): string[] {
+  const availWidth = maxWidth - H_PAD;
+  const charWidth = fontSize * CHAR_WIDTH_RATIO;
+  const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+
+  const result = [...lines];
+  const last = result[result.length - 1];
+  if (last.length > maxChars) {
+    result[result.length - 1] = last.substring(0, maxChars - 1) + '\u2026';
+  }
+  return result;
+}
+
+interface WrapResult {
+  lines: string[];
+  fontSize: number;
+}
+
+/**
+ * Wrap text to fit within a node of the given maxWidth.
+ * Tries wrapping at baseFontSize first. If text doesn't fit within
+ * maxLines, reduces font size by 1px at a time down to minFontSize.
+ * As a last resort, truncates the final line with ellipsis.
+ */
+export function wrapText(
+  text: string,
+  maxWidth: number,
+  baseFontSize: number,
+  minFontSize: number,
+  maxLines: number = MAX_LABEL_LINES
+): WrapResult {
+  if (!text) return { lines: [''], fontSize: baseFontSize };
+
+  const tokens = tokenize(text);
+
+  // Try at each font size from base down to min
+  for (let fs = baseFontSize; fs >= minFontSize; fs--) {
+    const lines = tryWrap(tokens, maxWidth, fs, maxLines);
+    if (lines) {
+      // Ensure each line fits (truncate overly long single tokens)
+      return { lines: truncateLastLine(lines, maxWidth, fs), fontSize: fs };
+    }
+  }
+
+  // Last resort: wrap at minFontSize with unlimited lines, then take first maxLines
+  const allLines = tryWrap(tokens, maxWidth, minFontSize, 999) ?? [text];
+  const capped = allLines.slice(0, maxLines);
+  const truncated = truncateLastLine(capped, maxWidth, minFontSize);
+  // If we dropped lines, append ellipsis to indicate overflow
+  if (allLines.length > maxLines) {
+    const last = truncated[truncated.length - 1];
+    if (!last.endsWith('\u2026')) {
+      const availWidth = maxWidth - H_PAD;
+      const charWidth = minFontSize * CHAR_WIDTH_RATIO;
+      const maxChars = Math.max(1, Math.floor(availWidth / charWidth));
+      if (last.length >= maxChars - 1) {
+        truncated[truncated.length - 1] =
+          last.substring(0, maxChars - 1) + '\u2026';
+      } else {
+        truncated[truncated.length - 1] = last + '\u2026';
+      }
+    }
+  }
+  return {
+    lines: truncated,
+    fontSize: minFontSize,
+  };
+}
+
+// ============================================================
+// Compute full node text layout (shared between layout + renderer)
+// ============================================================
+
+const ROOT_FONT_SIZE = 17;
+const MIN_FONT_SIZE = 9;
+const FONT_STEP = 3;
+const DESC_FONT_SIZE = 10;
+
+function labelFontSize(depth: number): number {
+  return Math.max(MIN_FONT_SIZE, ROOT_FONT_SIZE - depth * FONT_STEP);
+}
+
+interface NodeTextLayout {
+  labelLines: string[];
+  labelFontSize: number;
+  descLines: string[];
+  descFontSize: number;
+}
+
+/**
+ * Compute wrapped text layout for a mindmap node.
+ * Called by both layout (for height) and renderer (for drawing).
+ */
+export function computeNodeText(
+  label: string,
+  description: string | undefined,
+  depth: number,
+  nodeWidth: number,
+  hideDescriptions: boolean
+): NodeTextLayout {
+  const baseFontSize = labelFontSize(depth);
+  const labelResult = wrapText(
+    label,
+    nodeWidth,
+    baseFontSize,
+    MIN_FONT_SIZE,
+    MAX_LABEL_LINES
+  );
+
+  let descLines: string[] = [];
+  let descFontSize = DESC_FONT_SIZE;
+  if (!hideDescriptions && description) {
+    const descResult = wrapText(
+      description,
+      nodeWidth,
+      DESC_FONT_SIZE,
+      DESC_FONT_SIZE, // don't shrink descriptions
+      MAX_DESC_LINES
+    );
+    descLines = descResult.lines;
+    descFontSize = descResult.fontSize;
+  }
+
+  return {
+    labelLines: labelResult.lines,
+    labelFontSize: labelResult.fontSize,
+    descLines,
+    descFontSize,
+  };
+}

package/src/mindmap/types.ts

@@ -0,0 +1,55 @@
+import type { DgmoError } from '../diagnostics.js';
+import type { TagGroup } from '../utils/tag-groups.js';
+
+export interface MindmapNode {
+  id: string;
+  label: string;
+  description?: string;
+  metadata: Record<string, string>;
+  children: MindmapNode[];
+  parentId: string | null;
+  lineNumber: number;
+  color?: string;
+  collapsed?: boolean;
+}
+
+export interface ParsedMindmap {
+  title: string | null;
+  titleLineNumber: number | null;
+  roots: MindmapNode[];
+  tagGroups: TagGroup[];
+  options: Record<string, string>;
+  diagnostics: DgmoError[];
+  error: string | null;
+}
+
+export interface MindmapLayoutNode {
+  id: string;
+  label: string;
+  description?: string;
+  metadata: Record<string, string>;
+  lineNumber: number;
+  color?: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  depth: number;
+  angle: number;
+  radius: number;
+  hiddenCount?: number;
+  hasChildren?: boolean;
+}
+
+export interface MindmapLayoutEdge {
+  sourceId: string;
+  targetId: string;
+  path: string; // SVG path d attribute
+}
+
+export interface MindmapLayoutResult {
+  nodes: MindmapLayoutNode[];
+  edges: MindmapLayoutEdge[];
+  width: number;
+  height: number;
+}

package/src/palettes/color-utils.ts

@@ -84,17 +84,6 @@ export function hexToHSLString(hex: string): string {
 // Color Manipulation
 // ============================================================
 
-/**
- * Derive a muted (desaturated, darkened) variant of a color.
- * Used by the Mermaid theme generator for dark-mode fills.
- *
- * Algorithm: cap saturation at 35% and lightness at 36%.
- */
-export function mute(hex: string): string {
-  const { h, s, l } = hexToHSL(hex);
-  return hslToHex(h, Math.min(s, 35), Math.min(l, 36));
-}
-
 /**
  * Blend a color toward white (light mode quadrant fills).
  * amount: 0 = original, 1 = white
@@ -232,7 +221,10 @@ export function getSeriesColors(palette: PaletteColors): string[] {
  * saturation and lightness, guaranteeing every segment gets a unique,
  * perceptually distinct color regardless of segment count.
  */
-export function getSegmentColors(palette: PaletteColors, count: number): string[] {
+export function getSegmentColors(
+  palette: PaletteColors,
+  count: number
+): string[] {
   const base = getSeriesColors(palette);
   const unique = [...new Set(base)];
   const hsls = unique.map(hexToHSL);

package/src/palettes/index.ts

@@ -14,7 +14,6 @@ export {
   hexToHSL,
   hslToHex,
   hexToHSLString,
-  mute,
   tint,
   shade,
   getSeriesColors,
@@ -34,6 +33,3 @@ export { tokyoNightPalette } from './tokyo-night';
 
 export { draculaPalette } from './dracula';
 export { monokaiPalette } from './monokai';
-
-// Re-export Mermaid bridge
-export { buildMermaidThemeVars, buildThemeCSS } from './mermaid-bridge';

package/src/render.ts

@@ -1,7 +1,13 @@
 import { renderForExport } from './d3';
 import { renderExtendedChartForExport } from './echarts';
-import { parseDgmoChartType, getRenderCategory } from './dgmo-router';
+import {
+  parseDgmoChartType,
+  getRenderCategory,
+  parseDgmo,
+} from './dgmo-router';
+import type { DgmoError } from './diagnostics';
 import { getPalette } from './palettes/registry';
+import type { CompactViewState } from './sharing';
 
 /**
  * Ensures DOM globals are available for D3 renderers.
@@ -45,13 +51,13 @@ async function ensureDom(): Promise<void> {
  *
  * @param content - DGMO source text
  * @param options - Optional theme and palette settings
- * @returns SVG string, or empty string on error
+ * @returns Object with `svg` (SVG string, empty on error) and `diagnostics` (parse errors/warnings)
  *
  * @example
  * ```ts
  * import { render } from '@diagrammo/dgmo';
  *
- * const svg = await render(`pie Languages
+ * const { svg, diagnostics } = await render(`pie Languages
  * TypeScript: 45
  * Python: 30
  * Rust: 25`);
@@ -62,48 +68,53 @@ export async function render(
   options?: {
     theme?: 'light' | 'dark' | 'transparent';
     palette?: string;
-    branding?: boolean;
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
     c4Container?: string;
     tagGroup?: string;
     /** Legend state for export — controls which tag group is shown in exported SVG. */
     legendState?: { activeGroup?: string; hiddenAttributes?: string[] };
+    /** View state for export — controls interactive state (collapse, swimlanes, etc.) */
+    viewState?: CompactViewState;
   }
-): Promise<string> {
+): Promise<{ svg: string; diagnostics: DgmoError[] }> {
   const theme = options?.theme ?? 'light';
   const paletteName = options?.palette ?? 'nord';
-  const branding = options?.branding ?? false;
 
   const paletteColors =
     getPalette(paletteName)[theme === 'dark' ? 'dark' : 'light'];
 
+  const { diagnostics } = parseDgmo(content);
+
   const chartType = parseDgmoChartType(content);
   const category = chartType ? getRenderCategory(chartType) : null;
 
-  // Build orgExportState from legendState if provided
-  const legendExportState = options?.legendState
-    ? {
-        activeTagGroup: options.legendState.activeGroup ?? null,
-        hiddenAttributes: options.legendState.hiddenAttributes
-          ? new Set(options.legendState.hiddenAttributes)
-          : undefined,
-      }
-    : undefined;
+  // Build viewState from legendState (backwards compat) or use provided viewState
+  const viewState: CompactViewState | undefined =
+    options?.viewState ??
+    (options?.legendState
+      ? {
+          tag: options.legendState.activeGroup ?? undefined,
+          ha: options.legendState.hiddenAttributes,
+        }
+      : undefined);
 
   if (category === 'data-chart') {
-    return renderExtendedChartForExport(content, theme, paletteColors, {
-      branding,
-    });
+    const svg = await renderExtendedChartForExport(
+      content,
+      theme,
+      paletteColors
+    );
+    return { svg, diagnostics };
   }
 
   // Visualization/diagram and unknown/null types all go through the unified renderer
   await ensureDom();
-  return renderForExport(content, theme, paletteColors, legendExportState, {
-    branding,
+  const svg = await renderForExport(content, theme, paletteColors, viewState, {
     c4Level: options?.c4Level,
     c4System: options?.c4System,
     c4Container: options?.c4Container,
     tagGroup: options?.tagGroup,
   });
+  return { svg, diagnostics };
 }

package/src/sequence/parser.ts

@@ -5,7 +5,7 @@
 import { inferParticipantType } from './participant-inference';
 import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import { parseArrow } from '../utils/arrows';
+import { parseArrow, parseInArrowLabel } from '../utils/arrows';
 import {
   measureIndent,
   extractColor,
@@ -945,9 +945,14 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
     if (labeledArrow) {
       contentStarted = true;
-      const { from, to, label, async: isAsync } = labeledArrow;
+      const { from, to, label: rawLabel, async: isAsync } = labeledArrow;
       lastMsgFrom = from;
 
+      // TD-13/TD-14: validate in-arrow label characters
+      const labelResult = parseInArrowLabel(rawLabel, lineNumber);
+      labelResult.diagnostics.forEach((d) => result.diagnostics.push(d));
+      const label = labelResult.label ?? rawLabel;
+
       const msg: SequenceMessage = {
         from,
         to,