zombie-mermaid 1.1.3

package/src/__tests__/xychart-layout.test.ts

@@ -0,0 +1,167 @@
+/**
+ * Coverage-focused tests for src/xychart/layout.ts.
+ *
+ * Exercises the horizontal layout path (previously untested), numeric
+ * x-axis ranges (category label interpolation), multi-series bar groups,
+ * and axis-title branch combinations that xychart-integration.test.ts
+ * doesn't reach.
+ */
+import { describe, it, expect } from 'vitest'
+import { renderMermaid } from '../index.ts'
+
+describe('xychart – horizontal layout', () => {
+  it('lays out a single-series horizontal bar chart', async () => {
+    const svg = await renderMermaid(`xychart-beta horizontal
+  x-axis [A, B, C]
+  y-axis 0 --> 100
+  bar [10, 50, 90]`)
+    expect(svg).toContain('data-value="10"')
+    expect(svg).toContain('data-value="90"')
+    expect(svg).toContain('data-label="A"')
+    expect(svg).toContain('data-label="C"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('lays out a horizontal chart with title, axis titles, multiple bar series, and a line series', async () => {
+    const svg = await renderMermaid(`xychart-beta horizontal
+  title "Horizontal Combo"
+  x-axis "Category" [A, B, C]
+  y-axis "Value" 0 --> 100
+  bar [10, 50, 90]
+  bar [20, 40, 60]
+  line [15, 45, 75]`)
+    expect(svg).toContain('Horizontal Combo')
+    expect(svg).toContain('Category')
+    expect(svg).toContain('Value')
+    expect(svg).toContain('Bar 1')
+    expect(svg).toContain('Bar 2')
+    expect(svg).toContain('Line 1')
+    expect(svg).toContain('data-value="20"')
+    expect(svg).toContain('data-value="60"')
+    expect(svg).toContain('data-value="15"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('lays out a horizontal chart with only a line series (no bars)', async () => {
+    const svg = await renderMermaid(`xychart-beta horizontal
+  x-axis [X, Y]
+  y-axis 0 --> 10
+  line [3, 8]`)
+    expect(svg).toContain('data-value="3"')
+    expect(svg).toContain('data-value="8"')
+    expect(svg).toContain('data-label="X"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('lays out a horizontal chart with negative values', async () => {
+    const svg = await renderMermaid(`xychart-beta horizontal
+  x-axis [A, B, C]
+  y-axis -50 --> 50
+  bar [-30, 20, 40]`)
+    expect(svg).toContain('data-value="-30"')
+    expect(svg).toContain('data-value="40"')
+    expect(svg).not.toContain('NaN')
+  })
+})
+
+describe('xychart – numeric x-axis range (category interpolation)', () => {
+  it('interpolates category labels across a numeric x-axis range with a title', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis "Distance" 0 --> 17
+  y-axis "Value" 0 --> 100
+  bar [10, 40, 70, 90]`)
+    expect(svg).toContain('Distance')
+    expect(svg).toContain('data-label="0"')
+    expect(svg).toContain('data-label="17"')
+    expect(svg).toContain('data-label="5.7"')
+    expect(svg).toContain('data-label="11"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('falls back to numeric index labels when x-axis is unspecified', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  y-axis 0 --> 100
+  bar [10, 20, 30]`)
+    expect(svg).toContain('data-value="10"')
+    expect(svg).toContain('data-label="1"')
+    expect(svg).toContain('data-label="3"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('handles a single-point series on a numeric x-axis range', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis 0 --> 10
+  y-axis 0 --> 50
+  bar [25]`)
+    expect(svg).toContain('data-value="25"')
+    expect(svg).toContain('data-label="0"')
+    expect(svg).not.toContain('NaN')
+  })
+})
+
+describe('xychart – vertical layout branch coverage', () => {
+  it('lays out a chart without a y-axis title (single series, no legend)', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis [A, B]
+  y-axis 0 --> 10
+  bar [3, 8]`)
+    expect(svg).toContain('data-value="3"')
+    expect(svg).toContain('data-value="8"')
+    expect(svg).not.toContain('class="xychart-axis-title"')
+  })
+
+  it('lays out a chart with two bar series and a line series (multi-bar grouping)', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  title "Multi Bar"
+  x-axis [Q1, Q2, Q3]
+  y-axis "Sales" 0 --> 200
+  bar [50, 80, 120]
+  bar [30, 60, 90]
+  line [40, 70, 100]`)
+    expect(svg).toContain('Multi Bar')
+    expect(svg).toContain('Bar 1')
+    expect(svg).toContain('Bar 2')
+    expect(svg).toContain('Line 1')
+    expect(svg).toContain('data-value="120"')
+    expect(svg).toContain('data-value="90"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('lays out a chart with negative values (baseline clamped to zero)', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis [A, B, C]
+  y-axis -50 --> 50
+  bar [-30, 20, 40]`)
+    expect(svg).toContain('data-value="-30"')
+    expect(svg).toContain('data-value="40"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('renders a chart with no series at all', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis 0 --> 10
+  y-axis 0 --> 100`)
+    expect(svg).toContain('<svg')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('handles a degenerate y-axis range where min equals max', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis [A, B]
+  y-axis 5 --> 5
+  bar [5, 5]`)
+    expect(svg).toContain('<svg')
+    expect(svg).toContain('data-value="5"')
+    expect(svg).not.toContain('NaN')
+  })
+
+  it('picks a tick interval equal to the magnitude for a small range', async () => {
+    const svg = await renderMermaid(`xychart-beta
+  x-axis [A, B]
+  y-axis 0 --> 6
+  bar [2, 5]`)
+    expect(svg).toContain('data-label="A"')
+    expect(svg).toContain('data-value="2"')
+    expect(svg).not.toContain('NaN')
+  })
+})

package/src/ascii/ansi.ts

@@ -0,0 +1,500 @@
+// ============================================================================
+// ASCII renderer — color utilities
+//
+// Provides color output for themed ASCII diagrams.
+// Supports ANSI terminal modes (16/256/truecolor) and HTML <span> tags
+// for browser rendering.
+// ============================================================================
+
+import type { CharRole, AsciiTheme, ColorMode } from './types.ts'
+import type { DiagramColors } from '../theme.ts'
+import { MIX } from '../theme.ts'
+
+declare const document: unknown
+
+// ============================================================================
+// Default theme — matches SVG theme colors for consistency
+// ============================================================================
+
+/**
+ * Default ASCII theme derived from the SVG renderer's color palette.
+ * Uses the same mixing ratios to maintain visual consistency.
+ */
+export const DEFAULT_ASCII_THEME: AsciiTheme = {
+  fg: '#27272a', // zinc-800 — primary text
+  border: '#a1a1aa', // zinc-400 — node borders (12% mix)
+  line: '#71717a', // zinc-500 — edge lines (35% mix)
+  arrow: '#52525b', // zinc-600 — arrowheads (60% mix)
+  corner: '#71717a', // same as line
+  junction: '#a1a1aa', // same as border
+}
+
+// ============================================================================
+// DiagramColors → AsciiTheme bridge
+//
+// Converts SVG DiagramColors into an AsciiTheme using the same MIX ratios
+// that the SVG renderer uses via CSS color-mix(). This ensures visual
+// consistency between SVG and ASCII output for any theme.
+// ============================================================================
+
+/** Mix fg into bg at a given percentage (replicates CSS color-mix(in srgb)). */
+function mixColors(fg: string, bg: string, pct: number): string {
+  const f = parseHex(fg),
+    b = parseHex(bg)
+  const mix = (a: number, z: number) =>
+    Math.round(a * (pct / 100) + z * (1 - pct / 100))
+  const r = mix(f.r, b.r),
+    g = mix(f.g, b.g),
+    bl = mix(f.b, b.b)
+  return '#' + [r, g, bl].map((c) => c.toString(16).padStart(2, '0')).join('')
+}
+
+/**
+ * Derive an AsciiTheme from SVG DiagramColors using the same mixing ratios.
+ * Honors optional enrichment colors (line, accent, border) when present,
+ * otherwise falls back to color-mix derivation — matching SVG behavior.
+ */
+export function diagramColorsToAsciiTheme(colors: DiagramColors): AsciiTheme {
+  const line = colors.line ?? mixColors(colors.fg, colors.bg, MIX.line)
+  const border =
+    colors.border ?? mixColors(colors.fg, colors.bg, MIX.nodeStroke)
+  return {
+    fg: colors.fg,
+    border,
+    line,
+    arrow: colors.accent ?? mixColors(colors.fg, colors.bg, MIX.arrow),
+    accent: colors.accent,
+    bg: colors.bg,
+    corner: line,
+    junction: border,
+  }
+}
+
+// ============================================================================
+// Color mode detection
+// ============================================================================
+
+/**
+ * Detect the best color mode for the current environment.
+ *
+ * Terminal detection order:
+ * 1. COLORTERM=truecolor or COLORTERM=24bit → truecolor
+ * 2. TERM contains "256color" → ansi256
+ * 3. TERM is set and not "dumb" → ansi16
+ *
+ * Browser: returns 'html' (uses <span> tags with inline styles).
+ * Unknown/piped: returns 'none'.
+ */
+export function detectColorMode(): ColorMode {
+  // Check if we're in a Node.js-like environment with process object
+  // Use globalThis to safely check for process without TypeScript errors
+  const proc = (
+    globalThis as {
+      process?: {
+        stdout?: { isTTY?: boolean }
+        env?: Record<string, string | undefined>
+      }
+    }
+  ).process
+
+  if (proc) {
+    // Check if stdout is a TTY (not piped/redirected)
+    if (!proc.stdout?.isTTY) {
+      return 'none'
+    }
+
+    const colorTerm = proc.env?.COLORTERM?.toLowerCase() ?? ''
+    const term = proc.env?.TERM?.toLowerCase() ?? ''
+
+    // True color support
+    if (colorTerm === 'truecolor' || colorTerm === '24bit') {
+      return 'truecolor'
+    }
+
+    // 256 color support
+    if (term.includes('256color') || term.includes('256')) {
+      return 'ansi256'
+    }
+
+    // Basic color support
+    if (term && term !== 'dumb') {
+      return 'ansi16'
+    }
+
+    return 'none'
+  }
+
+  // No process object → browser environment → use HTML color output
+  if (typeof document !== 'undefined') {
+    return 'html'
+  }
+
+  return 'none'
+}
+
+// ============================================================================
+// Hex color parsing
+// ============================================================================
+
+/**
+ * Parse a hex color string to RGB values.
+ * Supports both 3-char (#RGB) and 6-char (#RRGGBB) formats.
+ */
+function parseHex(hex: string): { r: number; g: number; b: number } {
+  const h = hex.replace('#', '')
+  if (h.length === 3) {
+    // .charAt() always returns a string (never undefined) — unlike bracket
+    // indexing, it isn't subject to noUncheckedIndexedAccess.
+    const c0 = h.charAt(0)
+    const c1 = h.charAt(1)
+    const c2 = h.charAt(2)
+    return {
+      r: parseInt(c0 + c0, 16),
+      g: parseInt(c1 + c1, 16),
+      b: parseInt(c2 + c2, 16),
+    }
+  }
+  return {
+    r: parseInt(h.substring(0, 2), 16),
+    g: parseInt(h.substring(2, 4), 16),
+    b: parseInt(h.substring(4, 6), 16),
+  }
+}
+
+// ============================================================================
+// ANSI escape code generation
+// ============================================================================
+
+/** ANSI escape sequence prefix */
+const ESC = '\x1b['
+/** Reset all attributes */
+const RESET = `${ESC}0m`
+
+/**
+ * Generate ANSI foreground color escape sequence for 24-bit true color.
+ * Format: ESC[38;2;R;G;Bm
+ */
+function truecolorFg(hex: string): string {
+  const { r, g, b } = parseHex(hex)
+  return `${ESC}38;2;${r};${g};${b}m`
+}
+
+/**
+ * Find the closest 256-color palette index for an RGB color.
+ * The 256-color palette has:
+ * - 0-15: Standard colors (duplicates of 16-color)
+ * - 16-231: 6x6x6 color cube (216 colors)
+ * - 232-255: Grayscale ramp (24 shades)
+ */
+function rgbTo256(r: number, g: number, b: number): number {
+  // Check if it's close to grayscale
+  const avg = (r + g + b) / 3
+  const maxDiff = Math.max(
+    Math.abs(r - avg),
+    Math.abs(g - avg),
+    Math.abs(b - avg),
+  )
+
+  if (maxDiff < 10) {
+    // Use grayscale ramp (232-255)
+    // Each step is ~10.625 (256/24)
+    const gray = Math.round((avg / 255) * 23)
+    return 232 + Math.min(23, Math.max(0, gray))
+  }
+
+  // Use 6x6x6 color cube (16-231)
+  // Each channel maps to 0-5: 0, 95, 135, 175, 215, 255
+  const toIndex = (v: number): number => {
+    if (v < 48) return 0
+    if (v < 115) return 1
+    return Math.min(5, Math.floor((v - 35) / 40))
+  }
+
+  const ri = toIndex(r)
+  const gi = toIndex(g)
+  const bi = toIndex(b)
+
+  return 16 + 36 * ri + 6 * gi + bi
+}
+
+/**
+ * Generate ANSI foreground color escape sequence for 256-color mode.
+ * Format: ESC[38;5;Nm
+ */
+function ansi256Fg(hex: string): string {
+  const { r, g, b } = parseHex(hex)
+  const index = rgbTo256(r, g, b)
+  return `${ESC}38;5;${index}m`
+}
+
+/**
+ * Map an RGB color to the closest 16-color ANSI code.
+ * Returns the foreground color escape sequence.
+ *
+ * Standard 16 colors:
+ * 0=black, 1=red, 2=green, 3=yellow, 4=blue, 5=magenta, 6=cyan, 7=white
+ * 8-15 = bright versions
+ */
+function ansi16Fg(hex: string): string {
+  const { r, g, b } = parseHex(hex)
+  const luma = 0.299 * r + 0.587 * g + 0.114 * b
+
+  // Determine brightness (use bright colors for better visibility)
+  const bright = luma > 100 ? 0 : 60 // 60 = bright variant offset
+
+  // Determine base color based on dominant channel
+  let code: number
+  if (r > 180 && g < 100 && b < 100)
+    code = 31 // red
+  else if (g > 180 && r < 100 && b < 100)
+    code = 32 // green
+  else if (r > 150 && g > 150 && b < 100)
+    code = 33 // yellow
+  else if (b > 180 && r < 100 && g < 100)
+    code = 34 // blue
+  else if (r > 150 && b > 150 && g < 100)
+    code = 35 // magenta
+  else if (g > 150 && b > 150 && r < 100)
+    code = 36 // cyan
+  else if (luma > 200)
+    code = 37 // white
+  else if (luma < 50)
+    code = 30 // black
+  else code = 37 // default to white for grays
+
+  return `${ESC}${code + bright}m`
+}
+
+// ============================================================================
+// HTML color output (for browser rendering)
+// ============================================================================
+
+/** Escape characters that would break HTML output. */
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/** Wrap text in a <span> with an inline color style. */
+function htmlSpan(hex: string, text: string): string {
+  return `<span style="color:${hex}">${escapeHtml(text)}</span>`
+}
+
+// ============================================================================
+// Role → color mapping
+// ============================================================================
+
+/**
+ * Get the color for a character role from the theme.
+ */
+function getRoleColor(role: CharRole, theme: AsciiTheme): string {
+  switch (role) {
+    case 'text':
+      return theme.fg
+    case 'border':
+      return theme.border
+    case 'line':
+      return theme.line
+    case 'arrow':
+      return theme.arrow
+    case 'corner':
+      return theme.corner ?? theme.line
+    case 'junction':
+      return theme.junction ?? theme.border
+    default:
+      return theme.fg
+  }
+}
+
+/**
+ * Generate the ANSI escape sequence for a role color.
+ */
+export function getAnsiColor(
+  role: CharRole,
+  theme: AsciiTheme,
+  mode: ColorMode,
+): string {
+  if (mode === 'none') return ''
+
+  const hex = getRoleColor(role, theme)
+
+  switch (mode) {
+    case 'truecolor':
+      return truecolorFg(hex)
+    case 'ansi256':
+      return ansi256Fg(hex)
+    case 'ansi16':
+      return ansi16Fg(hex)
+    default:
+      return ''
+  }
+}
+
+/**
+ * Get the ANSI reset sequence.
+ */
+export function getAnsiReset(mode: ColorMode): string {
+  return mode === 'none' ? '' : RESET
+}
+
+/**
+ * Wrap a character with ANSI color codes based on its role.
+ */
+export function colorizeChar(
+  char: string,
+  role: CharRole | null,
+  theme: AsciiTheme,
+  mode: ColorMode,
+): string {
+  if (mode === 'none' || role === null || char === ' ') {
+    return char
+  }
+
+  const colorCode = getAnsiColor(role, theme, mode)
+  return `${colorCode}${char}${RESET}`
+}
+
+/**
+ * Colorize an entire line efficiently by grouping consecutive same-role characters.
+ * This reduces the number of escape sequences (ANSI) or span tags (HTML) in the output.
+ */
+export function colorizeLine(
+  chars: string[],
+  roles: (CharRole | null)[],
+  theme: AsciiTheme,
+  mode: ColorMode,
+): string {
+  if (mode === 'none') {
+    return chars.join('')
+  }
+
+  if (mode === 'html') {
+    return colorizeLineHtml(chars, roles, theme)
+  }
+
+  let result = ''
+  let currentRole: CharRole | null = null
+  let buffer = ''
+
+  for (const [i, char] of chars.entries()) {
+    const role = roles[i] ?? null
+
+    // Whitespace doesn't need coloring
+    if (char === ' ') {
+      // Flush any buffered characters (with or without color)
+      if (buffer.length > 0) {
+        if (currentRole !== null) {
+          result += getAnsiColor(currentRole, theme, mode) + buffer + RESET
+        } else {
+          result += buffer
+        }
+        buffer = ''
+        currentRole = null
+      }
+      result += char
+      continue
+    }
+
+    // Same role as previous — accumulate
+    if (role === currentRole) {
+      buffer += char
+      continue
+    }
+
+    // Role changed — flush buffer (with or without color) and start new
+    if (buffer.length > 0) {
+      if (currentRole !== null) {
+        result += getAnsiColor(currentRole, theme, mode) + buffer + RESET
+      } else {
+        result += buffer
+      }
+    }
+    buffer = char
+    currentRole = role
+  }
+
+  // Flush remaining buffer
+  if (buffer.length > 0 && currentRole !== null) {
+    result += getAnsiColor(currentRole, theme, mode) + buffer + RESET
+  } else if (buffer.length > 0) {
+    result += buffer
+  }
+
+  return result
+}
+
+/**
+ * HTML-specific line colorization.
+ * Groups consecutive same-role characters into <span> tags with inline color styles.
+ * Whitespace is emitted bare (no wrapping) to keep output compact.
+ */
+function colorizeLineHtml(
+  chars: string[],
+  roles: (CharRole | null)[],
+  theme: AsciiTheme,
+): string {
+  let result = ''
+  let currentRole: CharRole | null = null
+  let buffer = ''
+
+  const flush = () => {
+    if (buffer.length === 0) return
+    if (currentRole !== null) {
+      result += htmlSpan(getRoleColor(currentRole, theme), buffer)
+    } else {
+      result += escapeHtml(buffer)
+    }
+    buffer = ''
+    currentRole = null
+  }
+
+  for (const [i, char] of chars.entries()) {
+    const role = roles[i] ?? null
+
+    if (char === ' ') {
+      flush()
+      result += ' '
+      continue
+    }
+
+    if (role === currentRole) {
+      buffer += char
+      continue
+    }
+
+    flush()
+    buffer = char
+    currentRole = role
+  }
+
+  flush()
+  return result
+}
+
+/**
+ * Colorize a text string with a direct hex color.
+ * Used by renderers that need per-cell color control (e.g. multi-series xychart).
+ * Handles all output modes: ANSI (16/256/truecolor) and HTML.
+ */
+export function colorizeText(
+  text: string,
+  hex: string,
+  mode: ColorMode,
+): string {
+  if (mode === 'none' || text.length === 0) return text
+  if (mode === 'html') return htmlSpan(hex, text)
+  let code: string
+  switch (mode) {
+    case 'truecolor':
+      code = truecolorFg(hex)
+      break
+    case 'ansi256':
+      code = ansi256Fg(hex)
+      break
+    case 'ansi16':
+      code = ansi16Fg(hex)
+      break
+    default:
+      return text
+  }
+  return `${code}${text}${RESET}`
+}