@mdxui/terminal 2.0.0

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

@@ -0,0 +1,1483 @@
+/**
+ * @mdxui/terminal Markdown Renderer Tests (RED phase)
+ *
+ * TDD RED Phase: These tests define the contract for the Markdown renderer
+ * that outputs structured markdown for AI agent consumption via MCP.
+ *
+ * The Markdown renderer is one of 6 render tiers in the Universal Terminal UI:
+ * - TEXT: Plain text without formatting
+ * - MARKDOWN: Markdown syntax for AI agents (THIS FILE)
+ * - ASCII: ASCII art and basic drawing characters
+ * - UNICODE: Unicode box drawing and symbols
+ * - ANSI: Full ANSI escape sequences for colors/styles
+ * - INTERACTIVE: Full interactive terminal UI with input handling
+ *
+ * Markdown output format rules:
+ * - Tables use | col | col | format with header separator
+ * - Headers use # levels (H1, H2, H3)
+ * - Lists use - bullets or 1. numbered
+ * - Links for actions [text](url)
+ * - Code blocks with ``` language fences
+ * - Navigation footers for CLI affordances
+ *
+ * NOTE: These tests are expected to FAIL until implementation is complete.
+ * Run: pnpm --filter @mdxui/terminal test
+ */
+import { describe, it, expect } from 'vitest'
+
+// ============================================================================
+// These imports WILL FAIL until src/renderers/markdown.ts is implemented
+// ============================================================================
+import { renderMarkdown } from '../../renderers/markdown'
+import type { UINode } from '../../core/types'
+
+// ============================================================================
+// Helper Functions for Tests
+// ============================================================================
+
+/**
+ * Creates a minimal UINode for testing
+ */
+function createNode(
+  type: string,
+  props: Record<string, unknown> = {},
+  children?: UINode[]
+): UINode {
+  return { type, props, children }
+}
+
+// ============================================================================
+// Basic Rendering Tests
+// ============================================================================
+
+describe('renderMarkdown', () => {
+  describe('function signature', () => {
+    it('exports renderMarkdown function', () => {
+      expect(typeof renderMarkdown).toBe('function')
+    })
+
+    it('accepts UINode and returns string', () => {
+      const node = createNode('text', { content: 'Hello' })
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('returns empty string for empty node', () => {
+      const node = createNode('box', {})
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+  })
+
+  // ============================================================================
+  // Text Component Tests
+  // ============================================================================
+
+  describe('Text component', () => {
+    it('renders plain text content', () => {
+      const node = createNode('text', { content: 'Hello World' })
+      const result = renderMarkdown(node)
+      expect(result).toContain('Hello World')
+    })
+
+    it('renders bold text with ** markers', () => {
+      const node = createNode('text', { content: 'Important', bold: true })
+      const result = renderMarkdown(node)
+      expect(result).toContain('**Important**')
+    })
+
+    it('renders italic text with * markers', () => {
+      const node = createNode('text', { content: 'Emphasis', italic: true })
+      const result = renderMarkdown(node)
+      expect(result).toContain('*Emphasis*')
+    })
+
+    it('renders bold italic with *** markers', () => {
+      const node = createNode('text', {
+        content: 'Strong emphasis',
+        bold: true,
+        italic: true,
+      })
+      const result = renderMarkdown(node)
+      expect(result).toContain('***Strong emphasis***')
+    })
+
+    it('renders inline code with backticks', () => {
+      const node = createNode('text', { content: 'npm install', code: true })
+      const result = renderMarkdown(node)
+      expect(result).toContain('`npm install`')
+    })
+
+    it('renders strikethrough with ~~ markers', () => {
+      const node = createNode('text', { content: 'deprecated', strikethrough: true })
+      const result = renderMarkdown(node)
+      expect(result).toContain('~~deprecated~~')
+    })
+
+    it('preserves text with special markdown characters', () => {
+      const node = createNode('text', { content: 'Use *asterisks* and _underscores_' })
+      const result = renderMarkdown(node)
+      // Should escape or preserve the content appropriately
+      expect(result).toContain('asterisks')
+      expect(result).toContain('underscores')
+    })
+  })
+
+  // ============================================================================
+  // Header Tests
+  // ============================================================================
+
+  describe('Header rendering', () => {
+    it('renders H1 with single # prefix', () => {
+      const node = createNode('header', { level: 1, content: 'Main Title' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^# Main Title/m)
+    })
+
+    it('renders H2 with ## prefix', () => {
+      const node = createNode('header', { level: 2, content: 'Section' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^## Section/m)
+    })
+
+    it('renders H3 with ### prefix', () => {
+      const node = createNode('header', { level: 3, content: 'Subsection' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^### Subsection/m)
+    })
+
+    it('renders H4 with #### prefix', () => {
+      const node = createNode('header', { level: 4, content: 'Details' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^#### Details/m)
+    })
+
+    it('renders H5 with ##### prefix', () => {
+      const node = createNode('header', { level: 5, content: 'Minor' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^##### Minor/m)
+    })
+
+    it('renders H6 with ###### prefix', () => {
+      const node = createNode('header', { level: 6, content: 'Smallest' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^###### Smallest/m)
+    })
+
+    it('defaults to H2 when level is not specified', () => {
+      const node = createNode('header', { content: 'Default Header' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/^## Default Header/m)
+    })
+
+    it('clamps level to valid range (1-6)', () => {
+      const nodeLevel0 = createNode('header', { level: 0, content: 'Clamped' })
+      const nodeLevel7 = createNode('header', { level: 7, content: 'Clamped' })
+
+      const result0 = renderMarkdown(nodeLevel0)
+      const result7 = renderMarkdown(nodeLevel7)
+
+      // Should clamp to valid range
+      expect(result0).toMatch(/^#{1,6} Clamped/m)
+      expect(result7).toMatch(/^#{1,6} Clamped/m)
+    })
+
+    it('adds blank line after header', () => {
+      const node = createNode('header', { level: 1, content: 'Title' })
+      const result = renderMarkdown(node)
+      expect(result).toMatch(/# Title\n\n?/)
+    })
+  })
+
+  // ============================================================================
+  // List Tests
+  // ============================================================================
+
+  describe('List component', () => {
+    it('renders unordered list with - bullets', () => {
+      const node = createNode('list', {
+        items: ['First item', 'Second item', 'Third item'],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('- First item')
+      expect(result).toContain('- Second item')
+      expect(result).toContain('- Third item')
+    })
+
+    it('renders ordered list with 1. 2. 3. numbers', () => {
+      const node = createNode('list', {
+        items: ['Step one', 'Step two', 'Step three'],
+        numbered: true,
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('1. Step one')
+      expect(result).toContain('2. Step two')
+      expect(result).toContain('3. Step three')
+    })
+
+    it('renders nested lists with proper indentation', () => {
+      const nestedList = createNode('list', {
+        items: ['Nested A', 'Nested B'],
+      })
+      const node = createNode('list', {
+        items: ['Parent item'],
+        children: [nestedList],
+      })
+      const result = renderMarkdown(node)
+
+      // Nested items should be indented
+      expect(result).toContain('- Parent item')
+      expect(result).toMatch(/  - Nested A/)
+      expect(result).toMatch(/  - Nested B/)
+    })
+
+    it('handles empty list gracefully', () => {
+      const node = createNode('list', { items: [] })
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('renders task list items with checkboxes', () => {
+      const node = createNode('list', {
+        items: [
+          { text: 'Done task', checked: true },
+          { text: 'Pending task', checked: false },
+        ],
+        taskList: true,
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('- [x] Done task')
+      expect(result).toContain('- [ ] Pending task')
+    })
+
+    it('adds blank lines around list', () => {
+      const node = createNode('list', {
+        items: ['Item'],
+      })
+      const result = renderMarkdown(node)
+
+      // Should have proper spacing
+      expect(result.trim()).toMatch(/^- Item$/m)
+    })
+  })
+
+  // ============================================================================
+  // Table Tests
+  // ============================================================================
+
+  describe('Table component', () => {
+    it('renders table with pipe-separated columns', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'name', header: 'Name' },
+          { key: 'status', header: 'Status' },
+        ],
+        data: [
+          { name: 'Alice', status: 'Active' },
+          { name: 'Bob', status: 'Pending' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('| Name | Status |')
+      expect(result).toContain('| Alice | Active |')
+      expect(result).toContain('| Bob | Pending |')
+    })
+
+    it('renders header separator row', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'col1', header: 'Column 1' },
+          { key: 'col2', header: 'Column 2' },
+        ],
+        data: [{ col1: 'a', col2: 'b' }],
+      })
+      const result = renderMarkdown(node)
+
+      // Should have separator line with dashes
+      expect(result).toMatch(/\|[\s-]+\|[\s-]+\|/)
+    })
+
+    it('aligns columns with proper padding', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'short', header: 'S' },
+          { key: 'long', header: 'Long Header Name' },
+        ],
+        data: [{ short: 'x', long: 'y' }],
+      })
+      const result = renderMarkdown(node)
+
+      // Headers should be present
+      expect(result).toContain('S')
+      expect(result).toContain('Long Header Name')
+    })
+
+    it('handles column alignment (left, center, right)', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'left', header: 'Left', align: 'left' },
+          { key: 'center', header: 'Center', align: 'center' },
+          { key: 'right', header: 'Right', align: 'right' },
+        ],
+        data: [{ left: 'L', center: 'C', right: 'R' }],
+      })
+      const result = renderMarkdown(node)
+
+      // Separator should indicate alignment
+      // :--- for left, :---: for center, ---: for right
+      expect(result).toMatch(/:?-+:?/)
+    })
+
+    it('escapes pipe characters in cell content', () => {
+      const node = createNode('table', {
+        columns: [{ key: 'data', header: 'Data' }],
+        data: [{ data: 'value|with|pipes' }],
+      })
+      const result = renderMarkdown(node)
+
+      // Pipes in content should be escaped
+      expect(result).not.toMatch(/value\|with\|pipes/)
+      expect(result).toContain('value')
+    })
+
+    it('handles empty table gracefully', () => {
+      const node = createNode('table', {
+        columns: [{ key: 'col', header: 'Column' }],
+        data: [],
+      })
+      const result = renderMarkdown(node)
+
+      // Should still render headers
+      expect(result).toContain('Column')
+    })
+
+    it('handles missing column values with empty cells', () => {
+      const node = createNode('table', {
+        columns: [
+          { key: 'a', header: 'A' },
+          { key: 'b', header: 'B' },
+        ],
+        data: [{ a: 'only a' }], // Missing 'b' key
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('only a')
+      // Should have empty cell for missing value
+      expect(result).toMatch(/\|\s*\|/)
+    })
+
+    it('renders table with single column', () => {
+      const node = createNode('table', {
+        columns: [{ key: 'item', header: 'Items' }],
+        data: [{ item: 'One' }, { item: 'Two' }],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('| Items |')
+      expect(result).toContain('| One |')
+      expect(result).toContain('| Two |')
+    })
+  })
+
+  // ============================================================================
+  // Code Block Tests
+  // ============================================================================
+
+  describe('Code block component', () => {
+    it('renders code block with ``` fences', () => {
+      const node = createNode('code', {
+        code: 'const x = 1',
+        language: 'typescript',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('```typescript')
+      expect(result).toContain('const x = 1')
+      expect(result).toContain('```')
+    })
+
+    it('includes language identifier after opening fence', () => {
+      const node = createNode('code', {
+        code: 'print("hello")',
+        language: 'python',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/```python\n/)
+    })
+
+    it('renders code block without language identifier', () => {
+      const node = createNode('code', {
+        code: 'some code',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/```\n/)
+    })
+
+    it('preserves code indentation', () => {
+      const code = `function test() {
+  if (true) {
+    console.log("indented");
+  }
+}`
+      const node = createNode('code', { code, language: 'javascript' })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('  if (true)')
+      expect(result).toContain('    console.log')
+    })
+
+    it('handles multiline code', () => {
+      const code = 'line 1\nline 2\nline 3'
+      const node = createNode('code', { code, language: 'text' })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('line 1')
+      expect(result).toContain('line 2')
+      expect(result).toContain('line 3')
+    })
+
+    it('escapes code that contains ``` sequence', () => {
+      const code = 'Use ``` for code blocks'
+      const node = createNode('code', { code })
+      const result = renderMarkdown(node)
+
+      // Should handle this edge case somehow
+      expect(typeof result).toBe('string')
+    })
+
+    it('adds blank lines around code block', () => {
+      const node = createNode('code', { code: 'code' })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/```\n/)
+    })
+  })
+
+  // ============================================================================
+  // Link Tests
+  // ============================================================================
+
+  describe('Link/Action rendering', () => {
+    it('renders links in [text](url) format', () => {
+      const node = createNode('link', {
+        text: 'Click here',
+        href: 'https://example.com',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Click here](https://example.com)')
+    })
+
+    it('renders button as link with action URL', () => {
+      const node = createNode('button', {
+        label: 'Submit',
+        action: '/api/submit',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Submit]')
+      expect(result).toContain('/api/submit')
+    })
+
+    it('renders button with hotkey hint', () => {
+      const node = createNode('button', {
+        label: 'Save',
+        hotkey: 'Ctrl+S',
+        action: '/save',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Save')
+      expect(result).toContain('Ctrl+S')
+    })
+
+    it('handles external vs internal links', () => {
+      const external = createNode('link', {
+        text: 'External',
+        href: 'https://external.com',
+        external: true,
+      })
+      const internal = createNode('link', {
+        text: 'Internal',
+        href: '/internal',
+      })
+
+      const extResult = renderMarkdown(external)
+      const intResult = renderMarkdown(internal)
+
+      expect(extResult).toContain('https://external.com')
+      expect(intResult).toContain('/internal')
+    })
+
+    it('escapes special characters in link text', () => {
+      const node = createNode('link', {
+        text: 'Click [here]',
+        href: '/path',
+      })
+      const result = renderMarkdown(node)
+
+      // Should escape brackets in text
+      expect(result).toContain('/path')
+    })
+
+    it('escapes special characters in URLs', () => {
+      const node = createNode('link', {
+        text: 'Link',
+        href: '/path?a=1&b=2',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('/path?a=1&b=2')
+    })
+  })
+
+  // ============================================================================
+  // Box/Container Tests
+  // ============================================================================
+
+  describe('Box/Container component', () => {
+    it('renders box children sequentially', () => {
+      const node = createNode('box', {}, [
+        createNode('text', { content: 'First' }),
+        createNode('text', { content: 'Second' }),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('First')
+      expect(result).toContain('Second')
+      // First should appear before Second
+      expect(result.indexOf('First')).toBeLessThan(result.indexOf('Second'))
+    })
+
+    it('handles nested boxes', () => {
+      const node = createNode('box', {}, [
+        createNode('box', {}, [createNode('text', { content: 'Nested content' })]),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Nested content')
+    })
+
+    it('renders box with title as header', () => {
+      const node = createNode('box', { title: 'Section Title' }, [
+        createNode('text', { content: 'Content' }),
+      ])
+      const result = renderMarkdown(node)
+
+      // Title should render as header
+      expect(result).toMatch(/#+.*Section Title/)
+      expect(result).toContain('Content')
+    })
+
+    it('adds horizontal rule for bordered boxes', () => {
+      const node = createNode('box', { border: 'single' }, [
+        createNode('text', { content: 'Bordered' }),
+      ])
+      const result = renderMarkdown(node)
+
+      // May use --- for separation
+      expect(result).toContain('Bordered')
+    })
+  })
+
+  // ============================================================================
+  // Panel Component Tests
+  // ============================================================================
+
+  describe('Panel component', () => {
+    it('renders panel with title as header', () => {
+      const node = createNode('panel', { title: 'Panel Title' }, [
+        createNode('text', { content: 'Panel content' }),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/#+.*Panel Title/)
+      expect(result).toContain('Panel content')
+    })
+
+    it('renders collapsible panel with details/summary', () => {
+      const node = createNode('panel', {
+        title: 'Collapsible',
+        collapsible: true,
+      }, [createNode('text', { content: 'Hidden content' })])
+      const result = renderMarkdown(node)
+
+      // Could use HTML details/summary or just render normally
+      expect(result).toContain('Collapsible')
+    })
+
+    it('handles collapsed panel state', () => {
+      const node = createNode('panel', {
+        title: 'Collapsed',
+        collapsible: true,
+        collapsed: true,
+      }, [createNode('text', { content: 'Content' })])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Collapsed')
+    })
+  })
+
+  // ============================================================================
+  // Card Component Tests
+  // ============================================================================
+
+  describe('Card component', () => {
+    it('renders card title as header', () => {
+      const node = createNode('card', { title: 'Card Title' }, [
+        createNode('text', { content: 'Card body' }),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/#+.*Card Title/)
+    })
+
+    it('renders card with horizontal rule separation', () => {
+      const node = createNode('card', { title: 'Title' }, [
+        createNode('text', { content: 'Body' }),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Title')
+      expect(result).toContain('Body')
+    })
+  })
+
+  // ============================================================================
+  // Sidebar Component Tests
+  // ============================================================================
+
+  describe('Sidebar component', () => {
+    it('renders sidebar nav items as list', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          { label: 'Home', href: '/' },
+          { label: 'Settings', href: '/settings' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Home]')
+      expect(result).toContain('[Settings]')
+    })
+
+    it('highlights active nav item', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          { label: 'Home', href: '/', active: false },
+          { label: 'Current', href: '/current', active: true },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      // Active item should be visually distinct (bold, or > prefix)
+      expect(result).toContain('Current')
+    })
+
+    it('renders sidebar sections with headers', () => {
+      const node = createNode('sidebar', {
+        sections: [
+          {
+            title: 'Navigation',
+            items: [{ label: 'Dashboard', href: '/dashboard' }],
+          },
+          {
+            title: 'Settings',
+            items: [{ label: 'Profile', href: '/profile' }],
+          },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Navigation')
+      expect(result).toContain('Settings')
+    })
+
+    it('renders nested sidebar items with indentation', () => {
+      const node = createNode('sidebar', {
+        nav: [
+          {
+            label: 'Parent',
+            href: '/parent',
+            children: [
+              { label: 'Child 1', href: '/child1' },
+              { label: 'Child 2', href: '/child2' },
+            ],
+          },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Parent')
+      expect(result).toContain('Child 1')
+    })
+  })
+
+  // ============================================================================
+  // Breadcrumb Component Tests
+  // ============================================================================
+
+  describe('Breadcrumb component', () => {
+    it('renders breadcrumbs with > separator', () => {
+      const node = createNode('breadcrumb', {
+        items: [
+          { label: 'Home', path: '/' },
+          { label: 'Products', path: '/products' },
+          { label: 'Widget' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Home')
+      expect(result).toContain('>')
+      expect(result).toContain('Products')
+      expect(result).toContain('Widget')
+    })
+
+    it('renders clickable breadcrumb items as links', () => {
+      const node = createNode('breadcrumb', {
+        items: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Home](/)')
+    })
+
+    it('renders last breadcrumb item as plain text', () => {
+      const node = createNode('breadcrumb', {
+        items: [
+          { label: 'Home', path: '/' },
+          { label: 'Current' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      // Last item should not be a link (current page)
+      expect(result).toContain('Current')
+      // Could verify it's not wrapped in []()
+    })
+
+    it('uses custom separator', () => {
+      const node = createNode('breadcrumb', {
+        items: [{ label: 'A' }, { label: 'B' }],
+        separator: '/',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('/')
+    })
+  })
+
+  // ============================================================================
+  // Badge Component Tests
+  // ============================================================================
+
+  describe('Badge component', () => {
+    it('renders badge with label', () => {
+      const node = createNode('badge', { children: 'New' })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('New')
+    })
+
+    it('renders badge with variant indicator', () => {
+      const successBadge = createNode('badge', { children: 'Active', variant: 'success' })
+      const errorBadge = createNode('badge', { children: 'Error', variant: 'error' })
+
+      const successResult = renderMarkdown(successBadge)
+      const errorResult = renderMarkdown(errorBadge)
+
+      expect(successResult).toContain('Active')
+      expect(errorResult).toContain('Error')
+    })
+
+    it('uses emoji or text indicators for variants', () => {
+      const node = createNode('badge', { children: 'Warning', variant: 'warning' })
+      const result = renderMarkdown(node)
+
+      // Could use emoji like :warning: or text
+      expect(result).toContain('Warning')
+    })
+  })
+
+  // ============================================================================
+  // Dialog Component Tests
+  // ============================================================================
+
+  describe('Dialog component', () => {
+    it('renders dialog with title as header', () => {
+      const node = createNode('dialog', {
+        title: 'Confirm Action',
+        open: true,
+      }, [createNode('text', { content: 'Are you sure?' })])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Confirm Action')
+      expect(result).toContain('Are you sure?')
+    })
+
+    it('renders dialog actions as links', () => {
+      const node = createNode('dialog', {
+        title: 'Dialog',
+        open: true,
+        actions: [
+          { label: 'Cancel', action: 'cancel' },
+          { label: 'Confirm', action: 'confirm' },
+        ],
+      }, [createNode('text', { content: 'Content' })])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Cancel')
+      expect(result).toContain('Confirm')
+    })
+
+    it('skips closed dialog', () => {
+      const node = createNode('dialog', {
+        title: 'Hidden',
+        open: false,
+      }, [createNode('text', { content: 'Should not appear' })])
+      const result = renderMarkdown(node)
+
+      // Closed dialog should not render content
+      expect(result).not.toContain('Should not appear')
+    })
+  })
+
+  // ============================================================================
+  // Spinner Component Tests
+  // ============================================================================
+
+  describe('Spinner component', () => {
+    it('renders spinner with loading text', () => {
+      const node = createNode('spinner', { label: 'Loading...' })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Loading')
+    })
+
+    it('renders spinner with default text when no label', () => {
+      const node = createNode('spinner', {})
+      const result = renderMarkdown(node)
+
+      // Should have some loading indication
+      expect(result.length).toBeGreaterThan(0)
+    })
+  })
+
+  // ============================================================================
+  // Dashboard Component Tests
+  // ============================================================================
+
+  describe('Dashboard component', () => {
+    it('renders dashboard title as H1', () => {
+      const node = createNode('dashboard', { title: 'My Dashboard' })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/^# My Dashboard/m)
+    })
+
+    it('renders metrics as table', () => {
+      const node = createNode('dashboard', {
+        title: 'Stats',
+        metrics: [
+          { label: 'Users', value: 1234, trend: 'up' },
+          { label: 'Revenue', value: '$5,000', trend: 'up' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Users')
+      expect(result).toContain('1234')
+      expect(result).toContain('Revenue')
+    })
+
+    it('shows trend indicators for metrics', () => {
+      const node = createNode('dashboard', {
+        metrics: [
+          { label: 'Up', value: 100, trend: 'up' },
+          { label: 'Down', value: 50, trend: 'down' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      // Should indicate trends somehow (arrows, text, etc.)
+      expect(result).toContain('Up')
+      expect(result).toContain('Down')
+    })
+
+    it('renders dashboard children (widgets)', () => {
+      const node = createNode('dashboard', { title: 'Dashboard' }, [
+        createNode('panel', { title: 'Widget 1' }, [
+          createNode('text', { content: 'Widget content' }),
+        ]),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Widget 1')
+      expect(result).toContain('Widget content')
+    })
+  })
+
+  // ============================================================================
+  // Settings Component Tests
+  // ============================================================================
+
+  describe('Settings component', () => {
+    it('renders settings sections as headers', () => {
+      const node = createNode('settings', {
+        sections: ['profile', 'security', 'notifications'],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/profile/i)
+      expect(result).toMatch(/security/i)
+      expect(result).toMatch(/notifications/i)
+    })
+
+    it('renders settings children', () => {
+      const node = createNode('settings', {}, [
+        createNode('panel', { title: 'Profile Settings' }),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Profile Settings')
+    })
+  })
+
+  // ============================================================================
+  // Input Component Tests
+  // ============================================================================
+
+  describe('Input component', () => {
+    it('renders input with label', () => {
+      const node = createNode('input', {
+        label: 'Username',
+        value: 'john_doe',
+        placeholder: 'Enter username',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Username')
+    })
+
+    it('shows current value', () => {
+      const node = createNode('input', {
+        label: 'Email',
+        value: 'test@example.com',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('test@example.com')
+    })
+
+    it('shows placeholder when no value', () => {
+      const node = createNode('input', {
+        label: 'Name',
+        placeholder: 'Enter your name',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Enter your name')
+    })
+
+    it('indicates disabled state', () => {
+      const node = createNode('input', {
+        label: 'Locked',
+        value: 'Cannot edit',
+        disabled: true,
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Locked')
+    })
+  })
+
+  // ============================================================================
+  // Select Component Tests
+  // ============================================================================
+
+  describe('Select component', () => {
+    it('renders select with label', () => {
+      const node = createNode('select', {
+        label: 'Country',
+        options: [
+          { label: 'USA', value: 'us' },
+          { label: 'Canada', value: 'ca' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Country')
+    })
+
+    it('shows current selection', () => {
+      const node = createNode('select', {
+        label: 'Color',
+        value: 'red',
+        options: [
+          { label: 'Red', value: 'red' },
+          { label: 'Blue', value: 'blue' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Red')
+    })
+
+    it('lists available options', () => {
+      const node = createNode('select', {
+        options: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+          { label: 'Option C', value: 'c' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Option A')
+      expect(result).toContain('Option B')
+      expect(result).toContain('Option C')
+    })
+  })
+
+  // ============================================================================
+  // Navigation Footer Tests
+  // ============================================================================
+
+  describe('Navigation footer', () => {
+    it('renders navigation hints for CLI', () => {
+      const node = createNode('nav-footer', {
+        actions: [
+          { key: 'j/k', label: 'Navigate' },
+          { key: 'Enter', label: 'Select' },
+          { key: 'q', label: 'Quit' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('j/k')
+      expect(result).toContain('Navigate')
+      expect(result).toContain('Enter')
+      expect(result).toContain('Select')
+    })
+
+    it('formats as compact key hints', () => {
+      const node = createNode('nav-footer', {
+        actions: [{ key: 'Esc', label: 'Back' }],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Esc')
+      expect(result).toContain('Back')
+    })
+  })
+
+  // ============================================================================
+  // Hero Component Tests
+  // ============================================================================
+
+  describe('Hero component', () => {
+    it('renders hero title as H1', () => {
+      const node = createNode('hero', {
+        title: 'Welcome to Our Product',
+        subtitle: 'The best solution for your needs',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/^# Welcome to Our Product/m)
+    })
+
+    it('renders subtitle as paragraph', () => {
+      const node = createNode('hero', {
+        title: 'Title',
+        subtitle: 'Subtitle text here',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Subtitle text here')
+    })
+
+    it('renders CTA buttons as links', () => {
+      const node = createNode('hero', {
+        title: 'Hero',
+        callToAction: 'Get Started',
+        secondaryCallToAction: 'Learn More',
+        actions: {
+          primary: '/signup',
+          secondary: '/docs',
+        },
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Get Started]')
+      expect(result).toContain('[Learn More]')
+    })
+
+    it('renders badge if present', () => {
+      const node = createNode('hero', {
+        title: 'Hero',
+        badge: 'New Feature',
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('New Feature')
+    })
+  })
+
+  // ============================================================================
+  // Features Component Tests
+  // ============================================================================
+
+  describe('Features component', () => {
+    it('renders features section title', () => {
+      const node = createNode('features', {
+        title: 'Our Features',
+        features: [],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toMatch(/#+.*Our Features/)
+    })
+
+    it('renders feature items as list or cards', () => {
+      const node = createNode('features', {
+        features: [
+          { title: 'Fast', description: 'Lightning quick' },
+          { title: 'Secure', description: 'Bank-level security' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Fast')
+      expect(result).toContain('Lightning quick')
+      expect(result).toContain('Secure')
+    })
+
+    it('renders feature icons as emoji or text', () => {
+      const node = createNode('features', {
+        features: [{ title: 'Speed', description: 'Fast', icon: 'rocket' }],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Speed')
+    })
+  })
+
+  // ============================================================================
+  // Pricing Component Tests
+  // ============================================================================
+
+  describe('Pricing component', () => {
+    it('renders pricing tiers', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          { name: 'Free', price: '$0/mo', features: ['Basic access'] },
+          { name: 'Pro', price: '$10/mo', features: ['All features'] },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Free')
+      expect(result).toContain('$0/mo')
+      expect(result).toContain('Pro')
+      expect(result).toContain('$10/mo')
+    })
+
+    it('renders tier features as list', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          {
+            name: 'Basic',
+            price: '$5',
+            features: ['Feature 1', 'Feature 2', 'Feature 3'],
+          },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Feature 1')
+      expect(result).toContain('Feature 2')
+      expect(result).toContain('Feature 3')
+    })
+
+    it('highlights featured tier', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          { name: 'Basic', price: '$5', features: [] },
+          { name: 'Pro', price: '$15', features: [], highlighted: true },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Pro')
+    })
+
+    it('renders CTA for each tier', () => {
+      const node = createNode('pricing', {
+        tiers: [
+          { name: 'Free', price: '$0', features: [], callToAction: 'Start Free' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Start Free')
+    })
+  })
+
+  // ============================================================================
+  // FAQ Component Tests
+  // ============================================================================
+
+  describe('FAQ component', () => {
+    it('renders FAQ items as list', () => {
+      const node = createNode('faq', {
+        items: [
+          { question: 'What is this?', answer: 'A great product.' },
+          { question: 'How does it work?', answer: 'Like magic.' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('What is this?')
+      expect(result).toContain('A great product.')
+      expect(result).toContain('How does it work?')
+    })
+
+    it('renders questions as bold or headers', () => {
+      const node = createNode('faq', {
+        items: [{ question: 'Question?', answer: 'Answer.' }],
+      })
+      const result = renderMarkdown(node)
+
+      // Questions should stand out
+      expect(result).toContain('Question?')
+    })
+
+    it('renders section title if provided', () => {
+      const node = createNode('faq', {
+        title: 'Frequently Asked Questions',
+        items: [],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Frequently Asked Questions')
+    })
+  })
+
+  // ============================================================================
+  // Footer Component Tests
+  // ============================================================================
+
+  describe('Footer component', () => {
+    it('renders footer links grouped by section', () => {
+      const node = createNode('footer', {
+        links: [
+          {
+            title: 'Company',
+            links: [
+              { label: 'About', href: '/about' },
+              { label: 'Careers', href: '/careers' },
+            ],
+          },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Company')
+      expect(result).toContain('[About]')
+      expect(result).toContain('[Careers]')
+    })
+
+    it('renders copyright notice', () => {
+      const node = createNode('footer', {
+        copyright: '2024 My Company',
+        links: [],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('2024 My Company')
+    })
+
+    it('renders social links', () => {
+      const node = createNode('footer', {
+        social: [
+          { platform: 'twitter', href: 'https://twitter.com/company' },
+          { platform: 'github', href: 'https://github.com/company' },
+        ],
+        links: [],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('twitter')
+      expect(result).toContain('github')
+    })
+  })
+
+  // ============================================================================
+  // Header Component Tests
+  // ============================================================================
+
+  describe('Header component', () => {
+    it('renders site header with nav links', () => {
+      const node = createNode('header', {
+        nav: [
+          { label: 'Home', href: '/' },
+          { label: 'Docs', href: '/docs' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('[Home]')
+      expect(result).toContain('[Docs]')
+    })
+
+    it('renders CTA button', () => {
+      const node = createNode('header', {
+        nav: [],
+        callToAction: 'Sign Up',
+        actions: { primary: '/signup' },
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Sign Up')
+    })
+
+    it('renders breadcrumbs for app header', () => {
+      const node = createNode('header', {
+        breadcrumbs: [
+          { label: 'Dashboard', href: '/dashboard' },
+          { label: 'Settings' },
+        ],
+      })
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Settings')
+    })
+  })
+
+  // ============================================================================
+  // Edge Cases and Error Handling
+  // ============================================================================
+
+  describe('Edge cases', () => {
+    it('handles null/undefined props gracefully', () => {
+      const node = createNode('text', { content: null as unknown as string })
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles unknown component types', () => {
+      const node = createNode('unknown-component', { foo: 'bar' })
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles deeply nested structures', () => {
+      let node = createNode('text', { content: 'Deep' })
+      for (let i = 0; i < 10; i++) {
+        node = createNode('box', {}, [node])
+      }
+      const result = renderMarkdown(node)
+      expect(result).toContain('Deep')
+    })
+
+    it('handles empty children array', () => {
+      const node = createNode('box', {}, [])
+      const result = renderMarkdown(node)
+      expect(typeof result).toBe('string')
+    })
+
+    it('handles very long content', () => {
+      const longContent = 'A'.repeat(10000)
+      const node = createNode('text', { content: longContent })
+      const result = renderMarkdown(node)
+      expect(result).toContain('A')
+    })
+
+    it('handles special markdown characters in content', () => {
+      const node = createNode('text', {
+        content: '# Not a header * not bold _ not italic `not code`',
+      })
+      const result = renderMarkdown(node)
+      expect(result).toContain('Not a header')
+    })
+
+    it('handles emoji in content', () => {
+      const node = createNode('text', { content: 'Hello :rocket: World' })
+      const result = renderMarkdown(node)
+      expect(result).toContain('rocket')
+    })
+
+    it('handles unicode characters', () => {
+      const node = createNode('text', { content: 'Hello 世界 مرحبا' })
+      const result = renderMarkdown(node)
+      expect(result).toContain('世界')
+    })
+  })
+
+  // ============================================================================
+  // Markdown Output Quality Tests
+  // ============================================================================
+
+  describe('Markdown output quality', () => {
+    it('produces valid markdown with no trailing whitespace', () => {
+      const node = createNode('box', {}, [
+        createNode('header', { level: 1, content: 'Title' }),
+        createNode('text', { content: 'Content' }),
+      ])
+      const result = renderMarkdown(node)
+
+      // No lines should end with spaces
+      const lines = result.split('\n')
+      lines.forEach((line) => {
+        expect(line).toBe(line.trimEnd())
+      })
+    })
+
+    it('uses consistent line endings', () => {
+      const node = createNode('list', { items: ['A', 'B', 'C'] })
+      const result = renderMarkdown(node)
+
+      // Should use \n not \r\n
+      expect(result).not.toContain('\r')
+    })
+
+    it('has proper spacing between elements', () => {
+      const node = createNode('box', {}, [
+        createNode('header', { level: 1, content: 'Title' }),
+        createNode('text', { content: 'Paragraph' }),
+        createNode('list', { items: ['Item'] }),
+      ])
+      const result = renderMarkdown(node)
+
+      // Should have blank lines between major elements
+      expect(result).toContain('\n\n')
+    })
+
+    it('renders complete document with header and content', () => {
+      const node = createNode('dashboard', {
+        title: 'Dashboard',
+        metrics: [{ label: 'Users', value: 100 }],
+      }, [
+        createNode('panel', { title: 'Activity' }, [
+          createNode('text', { content: 'Recent activity here' }),
+        ]),
+      ])
+      const result = renderMarkdown(node)
+
+      expect(result).toContain('Dashboard')
+      expect(result).toContain('Users')
+      expect(result).toContain('Activity')
+    })
+  })
+})