@mdxui/terminal 2.0.0

package/src/__tests__/renderers/ascii.test.ts

@@ -0,0 +1,1360 @@
+/**
+ * @mdxui/terminal ASCII Renderer Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the ASCII renderer,
+ * which outputs basic ASCII art for low-capability terminals (no unicode, no colors).
+ *
+ * The ASCII renderer is part of the Universal Terminal UI 6-tier rendering system:
+ * - TEXT: Plain text without formatting
+ * - MARKDOWN: Markdown syntax for simple formatting
+ * - ASCII: ASCII art and basic drawing characters (this renderer)
+ * - UNICODE: Unicode box drawing and symbols
+ * - ANSI: Full ANSI escape sequences for colors/styles
+ * - INTERACTIVE: Full interactive terminal UI with input handling
+ *
+ * CRITICAL CONSTRAINTS:
+ * - NO unicode characters allowed in output
+ * - Only ASCII characters (0x00-0x7F)
+ * - Box drawing uses +---+ and | characters
+ * - Bullet points use * or -
+ * - Progress bars use [====    ]
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+import type { UINode, RenderContext, ThemeTokens } from '../../core/types'
+
+// ============================================================================
+// This import WILL FAIL until src/renderers/ascii.ts is implemented
+// ============================================================================
+import { renderASCII } from '../../renderers/ascii'
+
+// ============================================================================
+// Test Helpers
+// ============================================================================
+
+/**
+ * Check if a string contains only ASCII characters (0x00-0x7F)
+ */
+function isASCIIOnly(str: string): boolean {
+  // eslint-disable-next-line no-control-regex
+  return /^[\x00-\x7F]*$/.test(str)
+}
+
+/**
+ * Check if output contains any unicode box drawing characters
+ */
+function containsUnicodeBoxDrawing(str: string): boolean {
+  // Unicode box drawing range: U+2500 to U+257F
+  return /[\u2500-\u257F]/.test(str)
+}
+
+/**
+ * Check if output contains any ANSI escape sequences
+ */
+function containsANSI(str: string): boolean {
+  // ANSI escape codes start with ESC (0x1B) or \x1b
+  return /\x1b\[[\d;]*m/.test(str)
+}
+
+/**
+ * Create a minimal test context
+ */
+function createTestContext(overrides: Partial<RenderContext> = {}): RenderContext {
+  const defaultTheme: ThemeTokens = {
+    primary: '',
+    secondary: '',
+    muted: '',
+    foreground: '',
+    background: '',
+    border: '',
+    success: '',
+    warning: '',
+    error: '',
+    info: '',
+  }
+
+  return {
+    tier: 'ascii',
+    width: 80,
+    height: 24,
+    depth: 0,
+    theme: defaultTheme,
+    interactive: false,
+    ...overrides,
+  }
+}
+
+/**
+ * Create a text node
+ */
+function textNode(content: string, props: Record<string, unknown> = {}): UINode {
+  return {
+    type: 'text',
+    props: { content, ...props },
+  }
+}
+
+/**
+ * Create a box node
+ */
+function boxNode(
+  children: UINode[] = [],
+  props: Record<string, unknown> = {}
+): UINode {
+  return {
+    type: 'box',
+    props: { border: 'single', ...props },
+    children,
+  }
+}
+
+// ============================================================================
+// Core Renderer Contract Tests
+// ============================================================================
+
+describe('renderASCII', () => {
+  describe('function signature', () => {
+    it('exists and is a function', () => {
+      expect(renderASCII).toBeDefined()
+      expect(typeof renderASCII).toBe('function')
+    })
+
+    it('accepts UINode and returns string', () => {
+      const node: UINode = textNode('Hello')
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('accepts optional RenderContext parameter', () => {
+      const node: UINode = textNode('Hello')
+      const context = createTestContext({ width: 40 })
+      const result = renderASCII(node, context)
+
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  describe('ASCII-only output constraint', () => {
+    it('outputs only ASCII characters for text nodes', () => {
+      const node: UINode = textNode('Hello World')
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('outputs only ASCII characters for box nodes', () => {
+      const node: UINode = boxNode([textNode('Content')])
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('never outputs unicode box drawing characters', () => {
+      const node: UINode = boxNode([textNode('Content')], { border: 'single' })
+      const result = renderASCII(node)
+
+      expect(containsUnicodeBoxDrawing(result)).toBe(false)
+    })
+
+    it('never outputs unicode box drawing for double borders', () => {
+      const node: UINode = boxNode([textNode('Content')], { border: 'double' })
+      const result = renderASCII(node)
+
+      expect(containsUnicodeBoxDrawing(result)).toBe(false)
+    })
+
+    it('never outputs unicode box drawing for rounded borders', () => {
+      const node: UINode = boxNode([textNode('Content')], { border: 'rounded' })
+      const result = renderASCII(node)
+
+      expect(containsUnicodeBoxDrawing(result)).toBe(false)
+    })
+
+    it('never outputs ANSI escape sequences', () => {
+      const node: UINode = textNode('Colored text', { color: 'red', bold: true })
+      const result = renderASCII(node)
+
+      expect(containsANSI(result)).toBe(false)
+    })
+
+    it('handles unicode content by replacing with ASCII equivalents', () => {
+      const node: UINode = textNode('Hello \u2022 World') // Unicode bullet
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+      expect(result).not.toContain('\u2022')
+    })
+
+    it('handles emoji by replacing or removing', () => {
+      const node: UINode = textNode('Hello \u{1F600} World') // Emoji
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Box Drawing Tests
+// ============================================================================
+
+describe('ASCII Box Drawing', () => {
+  describe('basic boxes', () => {
+    it('draws top-left corner with +', () => {
+      const node: UINode = boxNode([textNode('X')])
+      const result = renderASCII(node)
+      const lines = result.split('\n')
+
+      expect(lines[0][0]).toBe('+')
+    })
+
+    it('draws top-right corner with +', () => {
+      const node: UINode = boxNode([textNode('X')])
+      const result = renderASCII(node)
+      const lines = result.split('\n')
+
+      // Top-right corner is last non-whitespace char on first line
+      const topLine = lines[0].trimEnd()
+      expect(topLine[topLine.length - 1]).toBe('+')
+    })
+
+    it('draws bottom-left corner with +', () => {
+      const node: UINode = boxNode([textNode('X')])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      const bottomLine = lines[lines.length - 1]
+      expect(bottomLine[0]).toBe('+')
+    })
+
+    it('draws bottom-right corner with +', () => {
+      const node: UINode = boxNode([textNode('X')])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      const bottomLine = lines[lines.length - 1].trimEnd()
+      expect(bottomLine[bottomLine.length - 1]).toBe('+')
+    })
+
+    it('draws horizontal borders with -', () => {
+      const node: UINode = boxNode([textNode('Content')])
+      const result = renderASCII(node)
+      const lines = result.split('\n')
+
+      // Top line should have dashes between corners
+      expect(lines[0]).toMatch(/^\+[-]+\+$/)
+    })
+
+    it('draws vertical borders with |', () => {
+      const node: UINode = boxNode([textNode('Content')])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Middle lines should start and end with |
+      for (let i = 1; i < lines.length - 1; i++) {
+        const line = lines[i].trimEnd()
+        expect(line[0]).toBe('|')
+        expect(line[line.length - 1]).toBe('|')
+      }
+    })
+
+    it('creates properly closed box structure', () => {
+      const node: UINode = boxNode([textNode('Test')])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Should have at least 3 lines (top, content, bottom)
+      expect(lines.length).toBeGreaterThanOrEqual(3)
+
+      // Top and bottom should be borders
+      expect(lines[0]).toMatch(/^\+[-]+\+$/)
+      expect(lines[lines.length - 1]).toMatch(/^\+[-]+\+$/)
+    })
+  })
+
+  describe('box sizing', () => {
+    it('adjusts box width to content', () => {
+      const shortNode = boxNode([textNode('Hi')])
+      const longNode = boxNode([textNode('Hello World')])
+
+      const shortResult = renderASCII(shortNode)
+      const longResult = renderASCII(longNode)
+
+      const shortWidth = shortResult.split('\n')[0].length
+      const longWidth = longResult.split('\n')[0].length
+
+      expect(longWidth).toBeGreaterThan(shortWidth)
+    })
+
+    it('respects explicit width prop', () => {
+      const node: UINode = boxNode([textNode('Hi')], { width: 20 })
+      const result = renderASCII(node)
+      const lines = result.split('\n')
+
+      expect(lines[0].trimEnd().length).toBe(20)
+    })
+
+    it('respects context width for wrapping', () => {
+      const node: UINode = boxNode([textNode('A '.repeat(50))])
+      const context = createTestContext({ width: 40 })
+      const result = renderASCII(node, context)
+      const lines = result.split('\n')
+
+      // All lines should respect max width
+      lines.forEach((line) => {
+        expect(line.length).toBeLessThanOrEqual(40)
+      })
+    })
+
+    it('handles minimum box size', () => {
+      const node: UINode = boxNode([textNode('')])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Even empty box should have valid structure
+      expect(lines.length).toBeGreaterThanOrEqual(2) // At least top and bottom
+      expect(lines[0].length).toBeGreaterThanOrEqual(2) // At least two corners
+    })
+  })
+
+  describe('box styles', () => {
+    it('renders single border style with ASCII', () => {
+      const node: UINode = boxNode([textNode('Single')], { border: 'single' })
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+      expect(result).toMatch(/^\+[-]+\+/)
+    })
+
+    it('renders double border style with ASCII fallback', () => {
+      const node: UINode = boxNode([textNode('Double')], { border: 'double' })
+      const result = renderASCII(node)
+
+      // Double borders should fall back to ASCII
+      expect(isASCIIOnly(result)).toBe(true)
+      expect(result).toMatch(/^\+[=]+\+/) // Double uses = or still -
+    })
+
+    it('renders rounded border style with ASCII fallback', () => {
+      const node: UINode = boxNode([textNode('Rounded')], { border: 'rounded' })
+      const result = renderASCII(node)
+
+      // Rounded should use same ASCII as single
+      expect(isASCIIOnly(result)).toBe(true)
+      expect(result).toMatch(/^\+[-]+\+/)
+    })
+
+    it('renders no border when border is none', () => {
+      const node: UINode = boxNode([textNode('No Border')], { border: 'none' })
+      const result = renderASCII(node)
+
+      expect(result).not.toContain('+')
+      expect(result).not.toContain('|')
+      expect(result).toContain('No Border')
+    })
+  })
+
+  describe('nested boxes', () => {
+    it('renders nested boxes correctly', () => {
+      const innerBox = boxNode([textNode('Inner')])
+      const outerBox = boxNode([innerBox])
+      const result = renderASCII(outerBox)
+
+      // Should have nested box structure
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Count + characters - should have more than 4 (outer corners) + 4 (inner corners)
+      const plusCount = (result.match(/\+/g) || []).length
+      expect(plusCount).toBeGreaterThanOrEqual(8)
+    })
+
+    it('properly indents nested content', () => {
+      const innerBox = boxNode([textNode('Nested')])
+      const outerBox = boxNode([innerBox], { padding: 1 })
+      const result = renderASCII(outerBox)
+
+      const lines = result.split('\n')
+      // Inner box should be indented from outer
+      const innerBoxLine = lines.find(
+        (l) => l.includes('+') && !l.startsWith('+')
+      )
+      expect(innerBoxLine).toBeDefined()
+    })
+  })
+})
+
+// ============================================================================
+// Table Rendering Tests
+// ============================================================================
+
+describe('ASCII Table Rendering', () => {
+  /**
+   * Create a table node
+   */
+  function tableNode(
+    headers: string[],
+    rows: string[][],
+    props: Record<string, unknown> = {}
+  ): UINode {
+    return {
+      type: 'table',
+      props: { headers, rows, ...props },
+    }
+  }
+
+  describe('basic tables', () => {
+    it('renders table with ASCII borders', () => {
+      const node = tableNode(['Name', 'Age'], [['Alice', '30']])
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+      expect(result).toContain('+')
+      expect(result).toContain('-')
+      expect(result).toContain('|')
+    })
+
+    it('separates header from body with horizontal line', () => {
+      const node = tableNode(['Name', 'Age'], [['Alice', '30']])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Should have header separator line with + at intersections
+      const separatorLines = lines.filter((l) => l.match(/^\+[-+]+\+$/))
+      expect(separatorLines.length).toBeGreaterThanOrEqual(2) // Top border + header separator
+    })
+
+    it('aligns columns properly', () => {
+      const node = tableNode(['Name', 'Age'], [
+        ['Alice', '30'],
+        ['Bob', '25'],
+      ])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.includes('|'))
+
+      // All content lines should have same number of | characters
+      const pipeCount = lines[0].split('|').length
+      lines.forEach((line) => {
+        expect(line.split('|').length).toBe(pipeCount)
+      })
+    })
+
+    it('handles empty table', () => {
+      const node = tableNode([], [])
+      const result = renderASCII(node)
+
+      // Should still output something valid (maybe just borders or empty string)
+      expect(typeof result).toBe('string')
+      if (result.length > 0) {
+        expect(isASCIIOnly(result)).toBe(true)
+      }
+    })
+
+    it('handles table with only headers', () => {
+      const node = tableNode(['Name', 'Age', 'City'], [])
+      const result = renderASCII(node)
+
+      expect(result).toContain('Name')
+      expect(result).toContain('Age')
+      expect(result).toContain('City')
+    })
+  })
+
+  describe('table cell content', () => {
+    it('truncates long cell content when necessary', () => {
+      const longContent = 'A'.repeat(100)
+      const node = tableNode(['Header'], [[longContent]])
+      const context = createTestContext({ width: 40 })
+      const result = renderASCII(node, context)
+
+      // Lines should not exceed context width
+      result.split('\n').forEach((line) => {
+        expect(line.length).toBeLessThanOrEqual(40)
+      })
+    })
+
+    it('pads shorter cells to match column width', () => {
+      const node = tableNode(['Name'], [['A'], ['Alice']])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.includes('|'))
+
+      // Content lines should all be same width
+      const widths = lines.map((l) => l.trimEnd().length)
+      const allSame = widths.every((w) => w === widths[0])
+      expect(allSame).toBe(true)
+    })
+
+    it('handles multi-line cell content', () => {
+      const node = tableNode(['Description'], [['Line 1\nLine 2']])
+      const result = renderASCII(node)
+
+      // Should either show both lines or truncate gracefully
+      expect(result).toContain('Line')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('table intersections', () => {
+    it('uses + for all corner intersections', () => {
+      const node = tableNode(['A', 'B'], [['1', '2']])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.includes('+'))
+
+      // All + should be at intersection points
+      lines.forEach((line) => {
+        // Corners and intersections use +
+        expect(line).toMatch(/\+/)
+      })
+    })
+
+    it('uses + for column separators in border rows', () => {
+      const node = tableNode(['A', 'B', 'C'], [['1', '2', '3']])
+      const result = renderASCII(node)
+      const borderLines = result.split('\n').filter((l) => l.match(/^[\+\-]+$/))
+
+      // Border lines should have + at column boundaries
+      borderLines.forEach((line) => {
+        const plusCount = (line.match(/\+/g) || []).length
+        expect(plusCount).toBeGreaterThanOrEqual(2) // At least start and end
+      })
+    })
+  })
+})
+
+// ============================================================================
+// List and Bullet Point Tests
+// ============================================================================
+
+describe('ASCII List Rendering', () => {
+  /**
+   * Create a list node
+   */
+  function listNode(
+    items: string[],
+    props: Record<string, unknown> = {}
+  ): UINode {
+    return {
+      type: 'list',
+      props: { items, ...props },
+    }
+  }
+
+  describe('unordered lists', () => {
+    it('uses * for bullet points', () => {
+      const node = listNode(['Item 1', 'Item 2'], { ordered: false })
+      const result = renderASCII(node)
+
+      expect(result).toContain('* Item 1')
+      expect(result).toContain('* Item 2')
+    })
+
+    it('alternatively uses - for bullet points', () => {
+      const node = listNode(['Item 1'], { ordered: false, bullet: '-' })
+      const result = renderASCII(node)
+
+      expect(result).toContain('- Item 1')
+    })
+
+    it('never uses unicode bullets', () => {
+      const node = listNode(['Item 1', 'Item 2'])
+      const result = renderASCII(node)
+
+      expect(result).not.toContain('\u2022') // Unicode bullet
+      expect(result).not.toContain('\u25CF') // Black circle
+      expect(result).not.toContain('\u25CB') // White circle
+      expect(result).not.toContain('\u25A0') // Black square
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('indents list items consistently', () => {
+      const node = listNode(['First', 'Second', 'Third'])
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // All bullets should start at same column
+      const bulletIndents = lines.map((l) => l.search(/[*\-]/))
+      const allSame = bulletIndents.every((i) => i === bulletIndents[0])
+      expect(allSame).toBe(true)
+    })
+  })
+
+  describe('ordered lists', () => {
+    it('uses numbers with . or ) for ordered lists', () => {
+      const node = listNode(['First', 'Second'], { ordered: true })
+      const result = renderASCII(node)
+
+      expect(result).toMatch(/1[.\)]\s*First/)
+      expect(result).toMatch(/2[.\)]\s*Second/)
+    })
+
+    it('aligns numbers properly for multi-digit lists', () => {
+      const items = Array.from({ length: 12 }, (_, i) => `Item ${i + 1}`)
+      const node = listNode(items, { ordered: true })
+      const result = renderASCII(node)
+      const lines = result.split('\n').filter((l) => l.trim())
+
+      // Items 1-9 and 10-12 should have content starting at same column
+      const contentStarts = lines.map((l) => l.search(/Item/))
+      const allSame = contentStarts.every((s) => s === contentStarts[0])
+      expect(allSame).toBe(true)
+    })
+  })
+
+  describe('nested lists', () => {
+    it('indents nested list items', () => {
+      const innerList = listNode(['Nested 1', 'Nested 2'])
+      const node: UINode = {
+        type: 'list',
+        props: { items: ['Parent'] },
+        children: [innerList],
+      }
+      const result = renderASCII(node)
+
+      // Nested items should be indented more
+      const lines = result.split('\n').filter((l) => l.includes('Nested'))
+      const parentLine = result.split('\n').find((l) => l.includes('Parent'))
+
+      if (lines.length > 0 && parentLine) {
+        const nestedIndent = lines[0].search(/\S/)
+        const parentIndent = parentLine.search(/\S/)
+        expect(nestedIndent).toBeGreaterThan(parentIndent)
+      }
+    })
+
+    it('uses consistent bullet style for each level', () => {
+      const innerList = listNode(['Sub-item'])
+      const node: UINode = {
+        type: 'list',
+        props: { items: ['Top item'] },
+        children: [innerList],
+      }
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('empty and edge cases', () => {
+    it('handles empty list', () => {
+      const node = listNode([])
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles single item list', () => {
+      const node = listNode(['Only item'])
+      const result = renderASCII(node)
+
+      expect(result).toContain('Only item')
+    })
+
+    it('handles items with special characters', () => {
+      const node = listNode(['Item with * asterisk', 'Item with - dash'])
+      const result = renderASCII(node)
+
+      expect(result).toContain('asterisk')
+      expect(result).toContain('dash')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Progress Bar Tests
+// ============================================================================
+
+describe('ASCII Progress Bar Rendering', () => {
+  /**
+   * Create a progress bar node
+   */
+  function progressNode(
+    value: number,
+    props: Record<string, unknown> = {}
+  ): UINode {
+    return {
+      type: 'progress',
+      props: { value, ...props },
+    }
+  }
+
+  describe('progress bar format', () => {
+    it('renders with [ and ] brackets', () => {
+      const node = progressNode(50)
+      const result = renderASCII(node)
+
+      expect(result).toContain('[')
+      expect(result).toContain(']')
+    })
+
+    it('uses = for filled portion', () => {
+      const node = progressNode(50, { width: 12 })
+      const result = renderASCII(node)
+
+      expect(result).toContain('=')
+    })
+
+    it('uses space for unfilled portion', () => {
+      const node = progressNode(50, { width: 12 })
+      const result = renderASCII(node)
+
+      // Should have format like [=====     ]
+      expect(result).toMatch(/\[=+\s+\]/)
+    })
+
+    it('renders 0% progress as empty bar', () => {
+      const node = progressNode(0, { width: 12 })
+      const result = renderASCII(node)
+
+      // Should be [          ] - all spaces
+      expect(result).toMatch(/\[\s+\]/)
+      expect(result).not.toContain('=')
+    })
+
+    it('renders 100% progress as full bar', () => {
+      const node = progressNode(100, { width: 12 })
+      const result = renderASCII(node)
+
+      // Should be [==========] - all equals
+      expect(result).toMatch(/\[=+\]/)
+      expect(result).not.toMatch(/\[=+\s/)
+    })
+
+    it('only uses ASCII characters', () => {
+      const node = progressNode(75)
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('progress bar sizing', () => {
+    it('respects width prop', () => {
+      const node = progressNode(50, { width: 20 })
+      const result = renderASCII(node)
+
+      // Bar should be approximately 20 chars including brackets
+      expect(result.length).toBeGreaterThanOrEqual(20)
+    })
+
+    it('scales filled portion to percentage', () => {
+      const node25 = progressNode(25, { width: 12 })
+      const node75 = progressNode(75, { width: 12 })
+
+      const result25 = renderASCII(node25)
+      const result75 = renderASCII(node75)
+
+      const equals25 = (result25.match(/=/g) || []).length
+      const equals75 = (result75.match(/=/g) || []).length
+
+      expect(equals75).toBeGreaterThan(equals25)
+    })
+  })
+
+  describe('progress bar labels', () => {
+    it('can show percentage label', () => {
+      const node = progressNode(50, { showLabel: true })
+      const result = renderASCII(node)
+
+      expect(result).toContain('50%')
+    })
+
+    it('can show custom label', () => {
+      const node = progressNode(50, { label: 'Loading...' })
+      const result = renderASCII(node)
+
+      expect(result).toContain('Loading...')
+    })
+  })
+
+  describe('edge cases', () => {
+    it('clamps value below 0 to 0', () => {
+      const node = progressNode(-10)
+      const result = renderASCII(node)
+
+      expect(result).not.toContain('=')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('clamps value above 100 to 100', () => {
+      const node = progressNode(150, { width: 10 })
+      const result = renderASCII(node)
+
+      // Should be completely filled
+      expect(result).toMatch(/\[=+\]/)
+    })
+
+    it('handles decimal percentages', () => {
+      const node = progressNode(33.33)
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Spinner Tests
+// ============================================================================
+
+describe('ASCII Spinner Rendering', () => {
+  /**
+   * Create a spinner node
+   */
+  function spinnerNode(props: Record<string, unknown> = {}): UINode {
+    return {
+      type: 'spinner',
+      props,
+    }
+  }
+
+  describe('spinner frames', () => {
+    it('uses ASCII characters for spinner frames', () => {
+      const node = spinnerNode()
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('never uses unicode spinner characters', () => {
+      const node = spinnerNode()
+      const result = renderASCII(node)
+
+      // Common unicode spinners
+      expect(result).not.toContain('\u280B') // Braille
+      expect(result).not.toContain('\u25DC') // Arc
+      expect(result).not.toContain('\u2588') // Block
+    })
+
+    it('uses common ASCII spinner patterns', () => {
+      const node = spinnerNode()
+      const result = renderASCII(node)
+
+      // Common ASCII spinner chars: | / - \ or . o O
+      expect(result).toMatch(/[|/\-\\\.oO]/)
+    })
+  })
+
+  describe('spinner with label', () => {
+    it('displays label text', () => {
+      const node = spinnerNode({ label: 'Loading...' })
+      const result = renderASCII(node)
+
+      expect(result).toContain('Loading...')
+    })
+
+    it('positions spinner before label', () => {
+      const node = spinnerNode({ label: 'Working' })
+      const result = renderASCII(node)
+
+      const spinnerPos = result.search(/[|/\-\\\.oO]/)
+      const labelPos = result.indexOf('Working')
+
+      expect(spinnerPos).toBeLessThan(labelPos)
+    })
+  })
+})
+
+// ============================================================================
+// Text Wrapping Tests
+// ============================================================================
+
+describe('ASCII Text Wrapping', () => {
+  describe('word wrapping', () => {
+    it('wraps text at context width', () => {
+      const longText = 'This is a very long line of text that should wrap'
+      const node: UINode = textNode(longText)
+      const context = createTestContext({ width: 20 })
+      const result = renderASCII(node, context)
+      const lines = result.split('\n')
+
+      lines.forEach((line) => {
+        expect(line.length).toBeLessThanOrEqual(20)
+      })
+    })
+
+    it('preserves words when wrapping', () => {
+      const text = 'Hello World Testing'
+      const node: UINode = textNode(text)
+      const context = createTestContext({ width: 12 })
+      const result = renderASCII(node, context)
+
+      // Words should not be split mid-word if avoidable
+      expect(result).toContain('Hello')
+      expect(result).toContain('World')
+      expect(result).toContain('Testing')
+    })
+
+    it('handles very long words by breaking them', () => {
+      const longWord = 'Supercalifragilisticexpialidocious'
+      const node: UINode = textNode(longWord)
+      const context = createTestContext({ width: 10 })
+      const result = renderASCII(node, context)
+
+      // Each line should respect max width
+      result.split('\n').forEach((line) => {
+        expect(line.length).toBeLessThanOrEqual(10)
+      })
+    })
+  })
+
+  describe('whitespace handling', () => {
+    it('preserves single spaces between words', () => {
+      const node: UINode = textNode('Hello World')
+      const result = renderASCII(node)
+
+      expect(result).toContain('Hello World')
+    })
+
+    it('collapses multiple spaces', () => {
+      const node: UINode = textNode('Hello    World')
+      const result = renderASCII(node)
+
+      expect(result).not.toContain('    ')
+    })
+
+    it('handles leading whitespace', () => {
+      const node: UINode = textNode('  Indented')
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles trailing whitespace', () => {
+      const node: UINode = textNode('Text  ')
+      const result = renderASCII(node)
+
+      expect(result.includes('Text')).toBe(true)
+    })
+  })
+
+  describe('newline handling', () => {
+    it('respects explicit newlines', () => {
+      const node: UINode = textNode('Line 1\nLine 2')
+      const result = renderASCII(node)
+      const lines = result.split('\n')
+
+      expect(lines.length).toBeGreaterThanOrEqual(2)
+      expect(result).toContain('Line 1')
+      expect(result).toContain('Line 2')
+    })
+
+    it('handles multiple consecutive newlines', () => {
+      const node: UINode = textNode('Line 1\n\n\nLine 2')
+      const result = renderASCII(node)
+
+      expect(result).toContain('Line 1')
+      expect(result).toContain('Line 2')
+    })
+  })
+})
+
+// ============================================================================
+// Component Type Coverage Tests
+// ============================================================================
+
+describe('ASCII Renderer Component Coverage', () => {
+  describe('text component', () => {
+    it('renders plain text', () => {
+      const node: UINode = textNode('Hello')
+      const result = renderASCII(node)
+
+      expect(result).toContain('Hello')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('ignores color props', () => {
+      const node: UINode = textNode('Colored', { color: 'red' })
+      const result = renderASCII(node)
+
+      expect(result).toContain('Colored')
+      expect(containsANSI(result)).toBe(false)
+    })
+
+    it('ignores bold/italic/underline', () => {
+      const node: UINode = textNode('Styled', {
+        bold: true,
+        italic: true,
+        underline: true,
+      })
+      const result = renderASCII(node)
+
+      expect(result).toContain('Styled')
+      expect(containsANSI(result)).toBe(false)
+    })
+  })
+
+  describe('panel component', () => {
+    it('renders panel with title', () => {
+      const node: UINode = {
+        type: 'panel',
+        props: { title: 'My Panel' },
+        children: [textNode('Content')],
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('My Panel')
+      expect(result).toContain('Content')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('uses ASCII borders for panel', () => {
+      const node: UINode = {
+        type: 'panel',
+        props: { title: 'Panel' },
+        children: [textNode('Text')],
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('+')
+      expect(result).toContain('-')
+      expect(result).toContain('|')
+    })
+  })
+
+  describe('card component', () => {
+    it('renders card with content', () => {
+      const node: UINode = {
+        type: 'card',
+        props: {},
+        children: [textNode('Card content')],
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Card content')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('badge component', () => {
+    it('renders badge text', () => {
+      const node: UINode = {
+        type: 'badge',
+        props: { label: 'NEW' },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('NEW')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('ignores badge variant colors', () => {
+      const node: UINode = {
+        type: 'badge',
+        props: { label: 'Error', variant: 'error' },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Error')
+      expect(containsANSI(result)).toBe(false)
+    })
+  })
+
+  describe('button component', () => {
+    it('renders button with ASCII brackets', () => {
+      const node: UINode = {
+        type: 'button',
+        props: { label: 'Click Me' },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Click Me')
+      // Button might be rendered with [ ] brackets
+      expect(result).toMatch(/[\[\]<>]?Click Me[\[\]<>]?/)
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('input component', () => {
+    it('renders input field with ASCII borders', () => {
+      const node: UINode = {
+        type: 'input',
+        props: { placeholder: 'Enter text...', value: '' },
+      }
+      const result = renderASCII(node)
+
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('shows input value', () => {
+      const node: UINode = {
+        type: 'input',
+        props: { value: 'User input' },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('User input')
+    })
+  })
+
+  describe('select component', () => {
+    it('renders select with options', () => {
+      const node: UINode = {
+        type: 'select',
+        props: {
+          options: [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' },
+          ],
+          value: '1',
+        },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Option')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('dialog component', () => {
+    it('renders dialog with ASCII border', () => {
+      const node: UINode = {
+        type: 'dialog',
+        props: { title: 'Alert', open: true },
+        children: [textNode('Dialog content')],
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Alert')
+      expect(result).toContain('Dialog content')
+      expect(result).toContain('+')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('breadcrumb component', () => {
+    it('renders breadcrumb with ASCII separators', () => {
+      const node: UINode = {
+        type: 'breadcrumb',
+        props: {
+          items: [
+            { label: 'Home', href: '/' },
+            { label: 'Products', href: '/products' },
+            { label: 'Item', href: '/products/item' },
+          ],
+        },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('Products')
+      expect(result).toContain('Item')
+      // Should use ASCII separator like > or /
+      expect(result).toMatch(/[>\/]/)
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('sidebar component', () => {
+    it('renders sidebar with ASCII structure', () => {
+      const node: UINode = {
+        type: 'sidebar',
+        props: {
+          items: [
+            { label: 'Dashboard', icon: 'home' },
+            { label: 'Settings', icon: 'gear' },
+          ],
+        },
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Settings')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Edge Cases and Error Handling Tests
+// ============================================================================
+
+describe('ASCII Renderer Edge Cases', () => {
+  describe('null and undefined handling', () => {
+    it('handles empty text content', () => {
+      const node: UINode = textNode('')
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles node with no children', () => {
+      const node: UINode = boxNode([])
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles deeply nested empty structures', () => {
+      const node: UINode = boxNode([boxNode([boxNode([])])])
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  describe('special characters', () => {
+    it('escapes or handles < and > characters', () => {
+      const node: UINode = textNode('1 < 2 > 0')
+      const result = renderASCII(node)
+
+      expect(result).toContain('1')
+      expect(result).toContain('2')
+      expect(result).toContain('0')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles ampersand', () => {
+      const node: UINode = textNode('Fish & Chips')
+      const result = renderASCII(node)
+
+      expect(result).toContain('&')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles quotes', () => {
+      const node: UINode = textNode('He said "Hello"')
+      const result = renderASCII(node)
+
+      expect(result).toContain('"')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles backslashes', () => {
+      const node: UINode = textNode('path\\to\\file')
+      const result = renderASCII(node)
+
+      expect(result).toContain('\\')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('extreme dimensions', () => {
+    it('handles very narrow width', () => {
+      const node: UINode = boxNode([textNode('Test')])
+      const context = createTestContext({ width: 5 })
+      const result = renderASCII(node, context)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles very wide width', () => {
+      const node: UINode = boxNode([textNode('Test')])
+      const context = createTestContext({ width: 500 })
+      const result = renderASCII(node, context)
+
+      expect(typeof result).toBe('string')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+
+    it('handles zero width gracefully', () => {
+      const node: UINode = textNode('Test')
+      const context = createTestContext({ width: 0 })
+      const result = renderASCII(node, context)
+
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  describe('unknown node types', () => {
+    it('handles unknown node type gracefully', () => {
+      const node: UINode = {
+        type: 'unknown-component',
+        props: { content: 'Test' },
+      }
+      const result = renderASCII(node)
+
+      // Should either render something or return empty string
+      expect(typeof result).toBe('string')
+    })
+
+    it('renders children of unknown nodes', () => {
+      const node: UINode = {
+        type: 'custom-wrapper',
+        props: {},
+        children: [textNode('Child content')],
+      }
+      const result = renderASCII(node)
+
+      // Should at least render the text child
+      expect(result).toContain('Child content')
+    })
+  })
+
+  describe('performance edge cases', () => {
+    it('handles many children efficiently', () => {
+      const children = Array.from({ length: 100 }, (_, i) =>
+        textNode(`Item ${i}`)
+      )
+      const node: UINode = boxNode(children)
+      const result = renderASCII(node)
+
+      expect(result).toContain('Item 0')
+      expect(result).toContain('Item 99')
+    })
+
+    it('handles deep nesting', () => {
+      let node: UINode = textNode('Deep')
+      for (let i = 0; i < 20; i++) {
+        node = boxNode([node])
+      }
+      const result = renderASCII(node)
+
+      expect(result).toContain('Deep')
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Context Handling Tests
+// ============================================================================
+
+describe('ASCII Renderer Context Handling', () => {
+  describe('default context', () => {
+    it('uses default width when context not provided', () => {
+      const node: UINode = textNode('Test')
+      const result = renderASCII(node)
+
+      expect(typeof result).toBe('string')
+    })
+
+    it('uses default tier as ascii', () => {
+      const node: UINode = boxNode([textNode('Test')])
+      const result = renderASCII(node)
+
+      // Output should be ASCII regardless
+      expect(isASCIIOnly(result)).toBe(true)
+    })
+  })
+
+  describe('context width', () => {
+    it('respects context width for layout', () => {
+      const node: UINode = boxNode([textNode('Test')])
+      const narrowContext = createTestContext({ width: 20 })
+      const wideContext = createTestContext({ width: 80 })
+
+      const narrowResult = renderASCII(node, narrowContext)
+      const wideResult = renderASCII(node, wideContext)
+
+      // Both should be valid ASCII
+      expect(isASCIIOnly(narrowResult)).toBe(true)
+      expect(isASCIIOnly(wideResult)).toBe(true)
+    })
+  })
+
+  describe('depth tracking', () => {
+    it('increases depth for nested components', () => {
+      const node: UINode = boxNode([boxNode([textNode('Nested')])])
+      const context = createTestContext({ depth: 0 })
+      const result = renderASCII(node, context)
+
+      // Nested box should be indented or otherwise differentiated
+      expect(result).toContain('Nested')
+    })
+  })
+})