@mdxui/terminal 2.0.0

package/src/__tests__/components.test.tsx

@@ -0,0 +1,1197 @@
+/**
+ * @mdxui/terminal Component Tests
+ *
+ * TDD RED Phase: Tests for primitive component mappings to OpenTUI.
+ * These tests define the contracts for how MDXUI primitives should render
+ * in a terminal environment using OpenTUI components.
+ *
+ * All tests should FAIL initially because they test actual rendering behavior
+ * that doesn't exist yet in the stub implementations.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import React from 'react'
+
+// ============================================================================
+// Test Utilities
+// ============================================================================
+
+/**
+ * Simulates rendering a component to terminal strings.
+ * In the real implementation, this would use OpenTUI's renderer.
+ */
+async function renderToTerminal(element: React.ReactElement): Promise<string[]> {
+  // Import the terminal renderer
+  const { renderComponent } = await import('../components')
+
+  // The implementation should provide this function
+  if (typeof renderComponent !== 'function') {
+    throw new Error('renderComponent function not exported from @mdxui/terminal/components')
+  }
+
+  return renderComponent(element)
+}
+
+/**
+ * Check if a string contains ANSI escape codes
+ */
+function hasAnsiCodes(str: string): boolean {
+  // eslint-disable-next-line no-control-regex
+  return /\x1b\[[\d;]*m/.test(str)
+}
+
+/**
+ * Strip ANSI codes from string for content testing
+ */
+function stripAnsi(str: string): string {
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/\x1b\[[\d;]*m/g, '')
+}
+
+// ============================================================================
+// 1. Box Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Box component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('border rendering', () => {
+    it('renders single border with box-drawing characters', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { border: 'single', width: 10, height: 3 }, 'Hi')
+
+      const lines = await renderToTerminal(element)
+
+      // Should render box-drawing characters for single border
+      expect(lines[0]).toContain('\u250C') // top-left corner
+      expect(lines[0]).toContain('\u2500') // horizontal line
+      expect(lines[0]).toContain('\u2510') // top-right corner
+      expect(lines[2]).toContain('\u2514') // bottom-left corner
+      expect(lines[2]).toContain('\u2518') // bottom-right corner
+      expect(lines[1]).toContain('\u2502') // vertical line
+    })
+
+    it('renders double border with box-drawing characters', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { border: 'double', width: 10, height: 3 }, 'Hi')
+
+      const lines = await renderToTerminal(element)
+
+      expect(lines[0]).toContain('\u2554') // double top-left
+      expect(lines[0]).toContain('\u2550') // double horizontal
+      expect(lines[0]).toContain('\u2557') // double top-right
+    })
+
+    it('renders rounded border with box-drawing characters', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { border: 'rounded', width: 10, height: 3 }, 'Hi')
+
+      const lines = await renderToTerminal(element)
+
+      expect(lines[0]).toContain('\u256D') // rounded top-left
+      expect(lines[0]).toContain('\u256E') // rounded top-right
+    })
+
+    it('renders no border when border is none', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { border: 'none', width: 10, height: 3 }, 'Hi')
+
+      const lines = await renderToTerminal(element)
+
+      // Should not contain any box-drawing characters
+      const allText = lines.join('')
+      expect(allText).not.toContain('\u250C')
+      expect(allText).not.toContain('\u2554')
+      expect(allText).not.toContain('\u256D')
+    })
+  })
+
+  describe('padding', () => {
+    it('adds padding space around content', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { padding: 2, width: 10 }, 'X')
+
+      const lines = await renderToTerminal(element)
+      const contentLine = lines.find(l => stripAnsi(l).includes('X'))
+
+      // Content should be indented by padding amount
+      expect(contentLine).toBeDefined()
+      const stripped = stripAnsi(contentLine!)
+      const xIndex = stripped.indexOf('X')
+      expect(xIndex).toBeGreaterThanOrEqual(2) // at least padding spaces
+    })
+  })
+
+  describe('dimensions', () => {
+    it('respects fixed width', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { width: 20, border: 'single' }, 'Content')
+
+      const lines = await renderToTerminal(element)
+
+      lines.forEach(line => {
+        expect(stripAnsi(line).length).toBeLessThanOrEqual(20)
+      })
+    })
+
+    it('respects fixed height', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { height: 5, border: 'single' }, 'Content')
+
+      const lines = await renderToTerminal(element)
+
+      expect(lines.length).toBe(5)
+    })
+  })
+
+  describe('background color', () => {
+    it('applies ANSI background color code', async () => {
+      const { Box } = await import('../components')
+      const element = React.createElement(Box, { bg: 'blue' }, 'Content')
+
+      const lines = await renderToTerminal(element)
+
+      // Should contain ANSI background color escape code
+      const allText = lines.join('')
+      expect(hasAnsiCodes(allText)).toBe(true)
+      expect(allText).toContain('\x1b[44m') // Blue background
+    })
+  })
+})
+
+// ============================================================================
+// 2. Text Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Text component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('basic rendering', () => {
+    it('renders text content', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, {}, 'Hello World')
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('Hello World')
+    })
+  })
+
+  describe('text styles with ANSI codes', () => {
+    it('renders bold text with ANSI bold code', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { bold: true }, 'Bold')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[1m') // ANSI bold
+      expect(stripAnsi(output)).toContain('Bold')
+    })
+
+    it('renders italic text with ANSI italic code', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { italic: true }, 'Italic')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[3m') // ANSI italic
+    })
+
+    it('renders underline text with ANSI underline code', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { underline: true }, 'Underlined')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[4m') // ANSI underline
+    })
+
+    it('renders dim text with ANSI dim code', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { dim: true }, 'Dimmed')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[2m') // ANSI dim
+    })
+
+    it('combines multiple styles', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { bold: true, underline: true }, 'Both')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[1m') // ANSI bold
+      expect(output).toContain('\x1b[4m') // ANSI underline
+    })
+
+    it('resets styles at end of text', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { bold: true }, 'Bold')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[0m') // ANSI reset
+    })
+  })
+
+  describe('text colors', () => {
+    it('applies foreground color with ANSI code', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { color: 'red' }, 'Red text')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[31m') // ANSI red foreground
+    })
+
+    it('applies semantic error color', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { color: 'error' }, 'Error')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(hasAnsiCodes(output)).toBe(true)
+      // Error should map to red
+      expect(output).toContain('\x1b[31m')
+    })
+
+    it('applies semantic success color', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { color: 'success' }, 'Success')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[32m') // Green
+    })
+
+    it('applies semantic warning color', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { color: 'warning' }, 'Warning')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[33m') // Yellow
+    })
+
+    it('applies semantic primary color', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { color: 'primary' }, 'Primary')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[36m') // Cyan (default primary)
+    })
+
+    it('applies background color', async () => {
+      const { Text } = await import('../components')
+      const element = React.createElement(Text, { backgroundColor: 'blue' }, 'Highlighted')
+
+      const lines = await renderToTerminal(element)
+
+      const output = lines.join('')
+      expect(output).toContain('\x1b[44m') // Blue background
+    })
+  })
+
+  describe('text wrapping', () => {
+    it('wraps text at specified width', async () => {
+      const { Text, Box } = await import('../components')
+      const longText = 'This is a very long text that should wrap to multiple lines'
+      const element = React.createElement(
+        Box,
+        { width: 20 },
+        React.createElement(Text, { wrap: 'wrap' }, longText)
+      )
+
+      const lines = await renderToTerminal(element)
+
+      // Should have multiple lines
+      expect(lines.length).toBeGreaterThan(1)
+      lines.forEach(line => {
+        expect(stripAnsi(line).length).toBeLessThanOrEqual(20)
+      })
+    })
+
+    it('truncates text with ellipsis', async () => {
+      const { Text, Box } = await import('../components')
+      const longText = 'This is very long text'
+      const element = React.createElement(
+        Box,
+        { width: 10 },
+        React.createElement(Text, { wrap: 'truncate' }, longText)
+      )
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content.length).toBeLessThanOrEqual(10)
+      expect(content).toContain('\u2026') // ellipsis character
+    })
+  })
+})
+
+// ============================================================================
+// 3. Table Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Table component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  interface TestRow {
+    name: string
+    status: string
+    count: number
+  }
+
+  const sampleData: TestRow[] = [
+    { name: 'Item 1', status: 'active', count: 10 },
+    { name: 'Item 2', status: 'inactive', count: 5 },
+  ]
+
+  const sampleColumns = [
+    { key: 'name' as const, header: 'Name' },
+    { key: 'status' as const, header: 'Status' },
+    { key: 'count' as const, header: 'Count' },
+  ]
+
+  describe('header rendering', () => {
+    it('renders column headers', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, { data: sampleData, columns: sampleColumns })
+
+      const lines = await renderToTerminal(element)
+
+      const allText = stripAnsi(lines.join('\n'))
+      expect(allText).toContain('Name')
+      expect(allText).toContain('Status')
+      expect(allText).toContain('Count')
+    })
+
+    it('renders header separator line', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, { data: sampleData, columns: sampleColumns })
+
+      const lines = await renderToTerminal(element)
+
+      // Should have a horizontal line after headers
+      const hasHorizontalLine = lines.some(line =>
+        line.includes('\u2500') || line.includes('\u2550') || line.includes('-')
+      )
+      expect(hasHorizontalLine).toBe(true)
+    })
+  })
+
+  describe('data row rendering', () => {
+    it('renders all data rows', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, { data: sampleData, columns: sampleColumns })
+
+      const lines = await renderToTerminal(element)
+
+      const allText = stripAnsi(lines.join('\n'))
+      expect(allText).toContain('Item 1')
+      expect(allText).toContain('Item 2')
+      expect(allText).toContain('active')
+      expect(allText).toContain('inactive')
+    })
+
+    it('renders numeric values correctly', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, { data: sampleData, columns: sampleColumns })
+
+      const lines = await renderToTerminal(element)
+
+      const allText = stripAnsi(lines.join('\n'))
+      expect(allText).toContain('10')
+      expect(allText).toContain('5')
+    })
+  })
+
+  describe('column alignment', () => {
+    it('aligns columns with consistent widths', async () => {
+      const { Table } = await import('../components')
+      const columns = [
+        { key: 'name' as const, header: 'Name', width: 15 },
+        { key: 'status' as const, header: 'Status', width: 10 },
+      ]
+      const element = React.createElement(Table, { data: sampleData, columns })
+
+      const lines = await renderToTerminal(element)
+
+      // Each column should maintain consistent width
+      const contentLines = lines.filter(l => stripAnsi(l).includes('Item'))
+      contentLines.forEach(line => {
+        const stripped = stripAnsi(line)
+        // Check that structure is consistent
+        expect(stripped.length).toBeGreaterThan(20) // At least width of both columns
+      })
+    })
+
+    it('right-aligns numeric columns', async () => {
+      const { Table } = await import('../components')
+      const columns = [
+        { key: 'name' as const, header: 'Name' },
+        { key: 'count' as const, header: 'Count', align: 'right' as const, width: 10 },
+      ]
+      const element = React.createElement(Table, { data: sampleData, columns })
+
+      const lines = await renderToTerminal(element)
+
+      // Numbers should be right-aligned with padding on left
+      const countLine = lines.find(l => stripAnsi(l).includes('10'))
+      expect(countLine).toBeDefined()
+    })
+  })
+
+  describe('selection', () => {
+    it('highlights selected row with ANSI background', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, {
+        data: sampleData,
+        columns: sampleColumns,
+        selectedIndex: 0
+      })
+
+      const lines = await renderToTerminal(element)
+
+      // Selected row should have background color
+      const selectedLine = lines.find(l => stripAnsi(l).includes('Item 1'))
+      expect(selectedLine).toBeDefined()
+      expect(hasAnsiCodes(selectedLine!)).toBe(true)
+      // Should contain a background color code (40-47 or 100-107)
+      expect(selectedLine).toMatch(/\x1b\[(4[0-7]|10[0-7])m/)
+    })
+  })
+
+  describe('borders', () => {
+    it('renders table with borders', async () => {
+      const { Table } = await import('../components')
+      const element = React.createElement(Table, { data: sampleData, columns: sampleColumns })
+
+      const lines = await renderToTerminal(element)
+
+      // Should have vertical separators
+      const hasVerticalSep = lines.some(l => l.includes('\u2502') || l.includes('|'))
+      expect(hasVerticalSep).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// 4. Input Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Input component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('value display', () => {
+    it('displays current value', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: 'test input',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('test input')
+    })
+
+    it('displays placeholder when empty', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: '',
+        placeholder: 'Enter text...',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      expect(stripAnsi(content)).toContain('Enter text...')
+      // Placeholder should be dimmed
+      expect(content).toContain('\x1b[2m') // dim code
+    })
+  })
+
+  describe('label', () => {
+    it('renders label above input', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: '',
+        label: 'Username',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      expect(stripAnsi(lines[0])).toContain('Username')
+    })
+  })
+
+  describe('focused state', () => {
+    it('shows cursor indicator when focused', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: 'text',
+        focused: true,
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Should show cursor using inverse video (ANSI code 7) or underline
+      expect(content).toMatch(/\x1b\[7m|\x1b\[4m/)
+    })
+
+    it('has highlight color when focused', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: '',
+        focused: true,
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      // Should have focus color (cyan border or similar)
+      const content = lines.join('')
+      expect(hasAnsiCodes(content)).toBe(true)
+    })
+  })
+
+  describe('disabled state', () => {
+    it('appears dimmed when disabled', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: 'disabled input',
+        disabled: true,
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      expect(content).toContain('\x1b[2m') // dim code
+    })
+  })
+
+  describe('password masking', () => {
+    it('masks password with asterisks', async () => {
+      const { Input } = await import('../components')
+      const element = React.createElement(Input, {
+        value: 'secret123',
+        type: 'password',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).not.toContain('secret123')
+      expect(content).toContain('*'.repeat(9)) // 9 asterisks for 9 chars
+    })
+  })
+})
+
+// ============================================================================
+// 5. Select Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Select component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  const sampleOptions = [
+    { label: 'Option A', value: 'a' },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' },
+  ]
+
+  describe('collapsed state', () => {
+    it('shows current selection when collapsed', async () => {
+      const { Select } = await import('../components')
+      const element = React.createElement(Select, {
+        options: sampleOptions,
+        value: 'b',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('Option B')
+    })
+
+    it('shows dropdown indicator', async () => {
+      const { Select } = await import('../components')
+      const element = React.createElement(Select, {
+        options: sampleOptions,
+        value: 'a',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      // Should show dropdown arrow
+      expect(content).toMatch(/[\u25BC\u25BE\u2304>v]/) // down arrow variants
+    })
+  })
+
+  describe('expanded state', () => {
+    it('shows all options when focused', async () => {
+      const { Select } = await import('../components')
+      const element = React.createElement(Select, {
+        options: sampleOptions,
+        value: 'a',
+        focused: true,
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join('\n'))
+      expect(content).toContain('Option A')
+      expect(content).toContain('Option B')
+      expect(content).toContain('Option C')
+    })
+
+    it('highlights current selection', async () => {
+      const { Select } = await import('../components')
+      const element = React.createElement(Select, {
+        options: sampleOptions,
+        value: 'b',
+        focused: true,
+        highlightedIndex: 1,
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      // Option B line should have highlight styling
+      const optionBLine = lines.find(l => stripAnsi(l).includes('Option B'))
+      expect(optionBLine).toBeDefined()
+      expect(hasAnsiCodes(optionBLine!)).toBe(true)
+    })
+  })
+
+  describe('label', () => {
+    it('renders label', async () => {
+      const { Select } = await import('../components')
+      const element = React.createElement(Select, {
+        options: sampleOptions,
+        value: 'a',
+        label: 'Choose option',
+        onChange: () => {}
+      })
+
+      const lines = await renderToTerminal(element)
+
+      expect(stripAnsi(lines.join(''))).toContain('Choose option')
+    })
+  })
+})
+
+// ============================================================================
+// 6. Sidebar and SidebarItem Tests - Terminal Rendering
+// ============================================================================
+
+describe('Sidebar component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('layout', () => {
+    it('renders with fixed width', async () => {
+      const { Sidebar, SidebarItem } = await import('../components')
+      const element = React.createElement(
+        Sidebar,
+        { width: 20 },
+        React.createElement(SidebarItem, { label: 'Dashboard' })
+      )
+
+      const lines = await renderToTerminal(element)
+
+      lines.forEach(line => {
+        expect(stripAnsi(line).length).toBeLessThanOrEqual(20)
+      })
+    })
+
+    it('renders collapsed with icons only', async () => {
+      const { Sidebar, SidebarItem } = await import('../components')
+      const element = React.createElement(
+        Sidebar,
+        { collapsed: true },
+        React.createElement(SidebarItem, { label: 'Dashboard', icon: '\u2302' })
+      )
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('\u2302') // icon
+      expect(content).not.toContain('Dashboard') // label hidden
+    })
+  })
+})
+
+describe('SidebarItem component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('rendering', () => {
+    it('renders label text', async () => {
+      const { SidebarItem } = await import('../components')
+      const element = React.createElement(SidebarItem, { label: 'Dashboard' })
+
+      const lines = await renderToTerminal(element)
+
+      expect(stripAnsi(lines.join(''))).toContain('Dashboard')
+    })
+
+    it('renders icon before label', async () => {
+      const { SidebarItem } = await import('../components')
+      const element = React.createElement(SidebarItem, { label: 'Home', icon: '\u2302' })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      const iconIndex = content.indexOf('\u2302')
+      const labelIndex = content.indexOf('Home')
+      expect(iconIndex).toBeLessThan(labelIndex)
+    })
+  })
+
+  describe('active state', () => {
+    it('highlights active item with background', async () => {
+      const { SidebarItem } = await import('../components')
+      const element = React.createElement(SidebarItem, { label: 'Dashboard', active: true })
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Should have background color for active state
+      expect(content).toMatch(/\x1b\[(4[0-7]|10[0-7])m/)
+    })
+
+    it('shows indicator for active item', async () => {
+      const { SidebarItem } = await import('../components')
+      const element = React.createElement(SidebarItem, { label: 'Dashboard', active: true })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      // Should have visual indicator (arrow, bar, etc.)
+      expect(content).toMatch(/[\u25B6\u2023\u2022>|]/)
+    })
+  })
+})
+
+// ============================================================================
+// 7. Breadcrumb Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Breadcrumb component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  const sampleItems = [
+    { label: 'Home', path: '/' },
+    { label: 'Products', path: '/products' },
+    { label: 'Item 1' }, // No path = current page
+  ]
+
+  describe('rendering', () => {
+    it('renders all breadcrumb items', async () => {
+      const { Breadcrumb } = await import('../components')
+      const element = React.createElement(Breadcrumb, { items: sampleItems })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('Home')
+      expect(content).toContain('Products')
+      expect(content).toContain('Item 1')
+    })
+
+    it('renders default separator between items', async () => {
+      const { Breadcrumb } = await import('../components')
+      const element = React.createElement(Breadcrumb, { items: sampleItems })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      // Default separator is usually / or >
+      expect(content).toMatch(/Home.+Products.+Item 1/)
+      expect(content).toMatch(/[\/>\u203A\u2192]/) // various separator chars
+    })
+
+    it('renders custom separator', async () => {
+      const { Breadcrumb } = await import('../components')
+      const element = React.createElement(Breadcrumb, {
+        items: sampleItems,
+        separator: '\u00BB' // >>
+      })
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content).toContain('\u00BB')
+    })
+  })
+
+  describe('styling', () => {
+    it('dims non-current items', async () => {
+      const { Breadcrumb } = await import('../components')
+      const element = React.createElement(Breadcrumb, { items: sampleItems })
+
+      const lines = await renderToTerminal(element)
+
+      // Previous items should be dimmed or have muted color
+      const content = lines.join('')
+      expect(hasAnsiCodes(content)).toBe(true)
+    })
+
+    it('emphasizes current (last) item', async () => {
+      const { Breadcrumb } = await import('../components')
+      const element = React.createElement(Breadcrumb, { items: sampleItems })
+
+      const lines = await renderToTerminal(element)
+
+      // Current item should be bold or different color
+      const content = lines.join('')
+      // Should have bold or bright color for last item
+      expect(content).toMatch(/\x1b\[(1|9[0-7])m.*Item 1/)
+    })
+  })
+})
+
+// ============================================================================
+// 8. Badge Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Badge component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('rendering', () => {
+    it('renders badge text', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, {}, 'Active')
+
+      const lines = await renderToTerminal(element)
+
+      expect(stripAnsi(lines.join(''))).toContain('Active')
+    })
+
+    it('renders with decorative brackets or padding', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, {}, 'New')
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      // Should have visual container (brackets, padding, etc.)
+      expect(content).toMatch(/[\[\](){}]|  New  /)
+    })
+  })
+
+  describe('variants with colors', () => {
+    it('renders success variant with green', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, { variant: 'success' }, 'Success')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Green foreground or background
+      expect(content).toMatch(/\x1b\[(32|42)m/)
+    })
+
+    it('renders warning variant with yellow', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, { variant: 'warning' }, 'Warning')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Yellow foreground or background
+      expect(content).toMatch(/\x1b\[(33|43)m/)
+    })
+
+    it('renders error variant with red', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, { variant: 'error' }, 'Error')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Red foreground or background
+      expect(content).toMatch(/\x1b\[(31|41)m/)
+    })
+
+    it('renders info variant with blue', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, { variant: 'info' }, 'Info')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Blue foreground or background
+      expect(content).toMatch(/\x1b\[(34|44)m/)
+    })
+
+    it('renders default variant with muted styling', async () => {
+      const { Badge } = await import('../components')
+      const element = React.createElement(Badge, { variant: 'default' }, 'Default')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Should have some styling
+      expect(hasAnsiCodes(content)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// 9. Dialog Component Tests - Terminal Rendering
+// ============================================================================
+
+describe('Dialog component terminal rendering', () => {
+  beforeEach(() => {
+    vi.resetModules()
+  })
+
+  describe('visibility', () => {
+    it('renders content when open', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, { open: true }, 'Dialog content')
+
+      const lines = await renderToTerminal(element)
+
+      expect(stripAnsi(lines.join(''))).toContain('Dialog content')
+    })
+
+    it('renders nothing when closed', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, { open: false }, 'Dialog content')
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join(''))
+      expect(content.trim()).toBe('')
+    })
+  })
+
+  describe('modal appearance', () => {
+    it('renders with border', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, { open: true }, 'Content')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Should have box-drawing border
+      expect(content).toMatch(/[\u250C\u2554\u256D]/) // top-left corners
+    })
+
+    it('renders title in header', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, {
+        open: true,
+        title: 'Confirm Action'
+      }, 'Are you sure?')
+
+      const lines = await renderToTerminal(element)
+
+      const content = stripAnsi(lines.join('\n'))
+      expect(content).toContain('Confirm Action')
+      expect(content).toContain('Are you sure?')
+    })
+
+    it('centers dialog in viewport', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, { open: true }, 'Centered')
+
+      const lines = await renderToTerminal(element)
+
+      // Dialog should have padding/margin indicating centering
+      // First non-empty line should have leading spaces
+      const firstContentLine = lines.find(l => stripAnsi(l).trim().length > 0)
+      if (firstContentLine) {
+        const leadingSpaces = firstContentLine.match(/^\s*/)?.[0].length ?? 0
+        expect(leadingSpaces).toBeGreaterThan(0)
+      }
+    })
+  })
+
+  describe('styling', () => {
+    it('has distinctive background or border color', async () => {
+      const { Dialog } = await import('../components')
+      const element = React.createElement(Dialog, { open: true }, 'Modal')
+
+      const lines = await renderToTerminal(element)
+
+      const content = lines.join('')
+      // Should have ANSI styling for modal appearance
+      expect(hasAnsiCodes(content)).toBe(true)
+    })
+  })
+})
+
+// ============================================================================
+// Export Contract Types (for implementation phase)
+// ============================================================================
+
+describe('Contract type exports', () => {
+  it('exports BoxProps type', async () => {
+    const { Box } = await import('../components')
+    // TypeScript will catch if Box doesn't accept these props
+    const _: React.ReactElement = Box({
+      children: 'test',
+      border: 'single',
+      padding: 1,
+      margin: 1,
+      width: 10,
+      height: 5,
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 1,
+      bg: 'blue'
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports TextProps type', async () => {
+    const { Text } = await import('../components')
+    const _: React.ReactElement = Text({
+      children: 'test',
+      bold: true,
+      italic: true,
+      underline: true,
+      dim: true,
+      color: 'red',
+      backgroundColor: 'blue',
+      wrap: 'truncate'
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports TableProps type', async () => {
+    const { Table } = await import('../components')
+    const _: React.ReactElement = Table({
+      data: [{ name: 'test' }],
+      columns: [{ key: 'name', header: 'Name', width: 10, align: 'left' }],
+      selectedIndex: 0,
+      onSelect: () => {},
+      navigable: true
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports InputProps type', async () => {
+    const { Input } = await import('../components')
+    const _: React.ReactElement = Input({
+      value: '',
+      onChange: () => {},
+      placeholder: 'test',
+      label: 'Label',
+      disabled: false,
+      focused: false,
+      type: 'password'
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports SelectProps type', async () => {
+    const { Select } = await import('../components')
+    const _: React.ReactElement = Select({
+      options: [{ label: 'A', value: 'a' }],
+      value: 'a',
+      onChange: () => {},
+      label: 'Label',
+      focused: false,
+      highlightedIndex: 0
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports SidebarProps type', async () => {
+    const { Sidebar } = await import('../components')
+    const _: React.ReactElement = Sidebar({
+      children: 'test',
+      width: 20,
+      collapsed: false
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports SidebarItemProps type', async () => {
+    const { SidebarItem } = await import('../components')
+    const _: React.ReactElement = SidebarItem({
+      label: 'test',
+      icon: '\u2302',
+      active: true,
+      onSelect: () => {},
+      children: null
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports BreadcrumbProps type', async () => {
+    const { Breadcrumb } = await import('../components')
+    const _: React.ReactElement = Breadcrumb({
+      items: [{ label: 'Home', path: '/' }],
+      separator: '>'
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports BadgeProps type', async () => {
+    const { Badge } = await import('../components')
+    const _: React.ReactElement = Badge({
+      children: 'test',
+      variant: 'success'
+    })
+    expect(_).toBeDefined()
+  })
+
+  it('exports DialogProps type', async () => {
+    const { Dialog } = await import('../components')
+    const _: React.ReactElement = Dialog({
+      open: true,
+      onClose: () => {},
+      title: 'Test',
+      children: 'content'
+    })
+    expect(_).toBeDefined()
+  })
+})