@mdxui/terminal 2.0.0

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

@@ -0,0 +1,2353 @@
+/**
+ * @mdxui/terminal Interactive Renderer Tests
+ *
+ * TDD RED Phase: These tests define the contract for the Interactive tier renderer.
+ * All tests should FAIL initially because the implementation doesn't exist yet.
+ *
+ * The Interactive renderer is the highest-capability tier providing:
+ * - Full TUI with keyboard navigation
+ * - Focus management and Tab cycling
+ * - Mouse click support
+ * - Cursor positioning
+ * - Real-time updates
+ * - Input field handling
+ * - Component state management
+ *
+ * @packageDocumentation
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import React from 'react'
+
+// ============================================================================
+// Mock Setup
+// ============================================================================
+
+/**
+ * Mock @opentui/react for testing Interactive renderer functionality
+ */
+vi.mock('@opentui/react', () => ({
+  createRoot: vi.fn(() => ({
+    render: vi.fn(),
+    unmount: vi.fn(),
+  })),
+  useKeyboard: vi.fn(),
+  useFocus: vi.fn(() => ({
+    isFocused: false,
+    focus: vi.fn(),
+    blur: vi.fn(),
+  })),
+  useMouse: vi.fn(() => ({
+    onClick: vi.fn(),
+    onMouseMove: vi.fn(),
+  })),
+}))
+
+/**
+ * Mock @opentui/core for renderer creation
+ */
+vi.mock('@opentui/core', () => ({
+  createCliRenderer: vi.fn(async () => ({
+    width: 80,
+    height: 24,
+    start: vi.fn(),
+    stop: vi.fn(),
+    destroy: vi.fn(),
+    requestRender: vi.fn(),
+  })),
+}))
+
+// ============================================================================
+// renderInteractive Function Tests
+// ============================================================================
+
+describe('renderInteractive', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('basic rendering', () => {
+    it('exports renderInteractive function', async () => {
+      const { renderInteractive } = await import('../../renderers/interactive')
+
+      expect(typeof renderInteractive).toBe('function')
+    })
+
+    it('renders a simple UINode to the terminal', async () => {
+      const { renderInteractive, createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const node = { type: 'text', props: { children: 'Hello Interactive' } }
+
+      expect(() => renderInteractive(node, renderer)).not.toThrow()
+    })
+
+    it('returns string when rendering', async () => {
+      const { renderInteractive, createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const node = { type: 'box', props: { children: 'Content' } }
+
+      const result = renderInteractive(node, renderer)
+      expect(typeof result).toBe('string')
+    })
+
+    it('accepts complex nested UINode trees', async () => {
+      const { renderInteractive, createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const node = {
+        type: 'box',
+        props: {
+          border: 'single',
+          children: [
+            { type: 'text', props: { children: 'Header' } },
+            { type: 'input', props: { placeholder: 'Enter text' } },
+            { type: 'button', props: { children: 'Submit' } },
+          ],
+        },
+      }
+
+      expect(() => renderInteractive(node, renderer)).not.toThrow()
+    })
+  })
+
+  describe('createInteractiveRenderer', () => {
+    it('creates an interactive renderer instance', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(renderer).toBeDefined()
+      expect(typeof renderer.width).toBe('number')
+      expect(typeof renderer.height).toBe('number')
+    })
+
+    it('accepts configuration options', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({
+        width: 120,
+        height: 40,
+        useMouse: true,
+        useAlternateScreen: true,
+      })
+
+      expect(renderer).toBeDefined()
+    })
+
+    it('has lifecycle methods', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(typeof renderer.start).toBe('function')
+      expect(typeof renderer.stop).toBe('function')
+      expect(typeof renderer.destroy).toBe('function')
+      expect(typeof renderer.requestRender).toBe('function')
+    })
+
+    it('has focus management methods', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(typeof renderer.focusNext).toBe('function')
+      expect(typeof renderer.focusPrev).toBe('function')
+      expect(typeof renderer.focusById).toBe('function')
+      expect(typeof renderer.getFocusedId).toBe('function')
+    })
+
+    it('has keyboard management methods', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(typeof renderer.onKeyPress).toBe('function')
+      expect(typeof renderer.offKeyPress).toBe('function')
+      expect(typeof renderer.emitKey).toBe('function')
+    })
+
+    it('has mouse handling methods', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(typeof renderer.onClick).toBe('function')
+      expect(typeof renderer.offClick).toBe('function')
+      expect(typeof renderer.emitClick).toBe('function')
+    })
+  })
+})
+
+// ============================================================================
+// Focus Management Tests
+// ============================================================================
+
+describe('Focus Management', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('focus chains', () => {
+    it('tracks focusable elements in registration order', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['input-1', 'button-1', 'input-2'])
+    })
+
+    it('respects tabIndex ordering', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 2 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 1 })
+
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['button-1', 'input-2', 'input-1'])
+    })
+
+    it('excludes elements with negative tabIndex', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('hidden-1', { tabIndex: -1 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['input-1', 'button-1'])
+      expect(focusableIds).not.toContain('hidden-1')
+    })
+
+    it('allows unregistering focusable elements', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+
+      renderer.unregisterFocusable('input-1')
+
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['button-1'])
+    })
+
+    it('handles focus group isolation', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('main-input', { tabIndex: 0, group: 'main' })
+      renderer.registerFocusable('modal-input', { tabIndex: 0, group: 'modal' })
+      renderer.registerFocusable('modal-button', { tabIndex: 0, group: 'modal' })
+
+      renderer.setActiveGroup('modal')
+
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['modal-input', 'modal-button'])
+    })
+  })
+
+  describe('Tab navigation', () => {
+    it('Tab moves focus to next element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+      expect(renderer.getFocusedId()).toBe('input-1')
+
+      renderer.focusNext()
+      expect(renderer.getFocusedId()).toBe('input-2')
+
+      renderer.focusNext()
+      expect(renderer.getFocusedId()).toBe('button-1')
+    })
+
+    it('Shift+Tab moves focus to previous element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+      renderer.registerFocusable('button-1', { tabIndex: 0 })
+
+      renderer.focusById('button-1')
+      expect(renderer.getFocusedId()).toBe('button-1')
+
+      renderer.focusPrev()
+      expect(renderer.getFocusedId()).toBe('input-2')
+
+      renderer.focusPrev()
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+
+    it('wraps focus from last to first element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ wrapFocus: true })
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-2')
+      renderer.focusNext()
+
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+
+    it('wraps focus from first to last element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ wrapFocus: true })
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+      renderer.focusPrev()
+
+      expect(renderer.getFocusedId()).toBe('input-2')
+    })
+
+    it('does not wrap focus when wrapFocus is false', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ wrapFocus: false })
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-2')
+      renderer.focusNext()
+
+      // Should stay on last element
+      expect(renderer.getFocusedId()).toBe('input-2')
+    })
+
+    it('focuses first element on initial Tab when nothing focused', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      expect(renderer.getFocusedId()).toBeNull()
+
+      renderer.focusNext()
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+
+    it('integrates with keyboard manager for Tab handling', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+
+      // Simulate Tab keypress
+      renderer.emitKey('tab')
+
+      expect(renderer.getFocusedId()).toBe('input-2')
+    })
+
+    it('integrates with keyboard manager for Shift+Tab handling', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-2')
+
+      // Simulate Shift+Tab keypress
+      renderer.emitKey('shift+tab')
+
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+  })
+
+  describe('focus trapping', () => {
+    it('traps focus within a container', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      // Register elements outside trap
+      renderer.registerFocusable('outside-1', { tabIndex: 0 })
+
+      // Create a focus trap
+      renderer.pushFocusTrap('modal')
+
+      // Register elements inside trap
+      renderer.registerFocusable('modal-input', { tabIndex: 0, group: 'modal' })
+      renderer.registerFocusable('modal-button', { tabIndex: 0, group: 'modal' })
+
+      renderer.focusById('modal-button')
+      renderer.focusNext()
+
+      // Should wrap within the trap, not escape to outside-1
+      expect(renderer.getFocusedId()).toBe('modal-input')
+    })
+
+    it('restores focus when trap is removed', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('main-input', { tabIndex: 0 })
+      renderer.focusById('main-input')
+
+      // Push a modal trap
+      renderer.pushFocusTrap('modal')
+      renderer.registerFocusable('modal-input', { tabIndex: 0, group: 'modal' })
+      renderer.focusById('modal-input')
+
+      // Pop the trap
+      renderer.popFocusTrap()
+
+      // Focus should restore to main-input
+      expect(renderer.getFocusedId()).toBe('main-input')
+    })
+
+    it('supports nested focus traps', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('main-input', { tabIndex: 0 })
+      renderer.focusById('main-input')
+
+      // First modal
+      renderer.pushFocusTrap('modal-1')
+      renderer.registerFocusable('modal1-input', { tabIndex: 0, group: 'modal-1' })
+      renderer.focusById('modal1-input')
+
+      // Nested modal
+      renderer.pushFocusTrap('modal-2')
+      renderer.registerFocusable('modal2-input', { tabIndex: 0, group: 'modal-2' })
+      renderer.focusById('modal2-input')
+
+      // Pop inner trap
+      renderer.popFocusTrap()
+      expect(renderer.getFocusedId()).toBe('modal1-input')
+
+      // Pop outer trap
+      renderer.popFocusTrap()
+      expect(renderer.getFocusedId()).toBe('main-input')
+    })
+  })
+
+  describe('focus events', () => {
+    it('emits focus event when element gains focus', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onFocus = vi.fn()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0, onFocus })
+      renderer.focusById('input-1')
+
+      expect(onFocus).toHaveBeenCalledWith({ id: 'input-1' })
+    })
+
+    it('emits blur event when element loses focus', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onBlur = vi.fn()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0, onBlur })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+      renderer.focusById('input-2')
+
+      expect(onBlur).toHaveBeenCalledWith({ id: 'input-1' })
+    })
+
+    it('does not emit events on redundant focus calls', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onFocus = vi.fn()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0, onFocus })
+      renderer.focusById('input-1')
+      renderer.focusById('input-1')
+
+      expect(onFocus).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+// ============================================================================
+// Keyboard Event Handling Tests
+// ============================================================================
+
+describe('Keyboard Event Handling', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('hotkey registration', () => {
+    it('registers global hotkeys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('ctrl+s', handler)
+      renderer.emitKey('ctrl+s')
+
+      expect(handler).toHaveBeenCalled()
+    })
+
+    it('unregisters hotkeys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('ctrl+s', handler)
+      renderer.offKeyPress('ctrl+s', handler)
+      renderer.emitKey('ctrl+s')
+
+      expect(handler).not.toHaveBeenCalled()
+    })
+
+    it('supports multiple handlers for same key', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler1 = vi.fn()
+      const handler2 = vi.fn()
+
+      renderer.onKeyPress('ctrl+s', handler1)
+      renderer.onKeyPress('ctrl+s', handler2)
+      renderer.emitKey('ctrl+s')
+
+      expect(handler1).toHaveBeenCalled()
+      expect(handler2).toHaveBeenCalled()
+    })
+
+    it('allows stopping propagation', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler1 = vi.fn(() => true) // Returns true to stop propagation
+      const handler2 = vi.fn()
+
+      renderer.onKeyPress('ctrl+s', handler1, { priority: 10 })
+      renderer.onKeyPress('ctrl+s', handler2, { priority: 0 })
+      renderer.emitKey('ctrl+s')
+
+      expect(handler1).toHaveBeenCalled()
+      expect(handler2).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('vim bindings', () => {
+    it('supports j/k for vertical navigation', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+
+      renderer.registerFocusable('item-1', { tabIndex: 0 })
+      renderer.registerFocusable('item-2', { tabIndex: 0 })
+      renderer.registerFocusable('item-3', { tabIndex: 0 })
+
+      renderer.focusById('item-1')
+
+      renderer.emitKey('j')
+      expect(renderer.getFocusedId()).toBe('item-2')
+
+      renderer.emitKey('j')
+      expect(renderer.getFocusedId()).toBe('item-3')
+
+      renderer.emitKey('k')
+      expect(renderer.getFocusedId()).toBe('item-2')
+    })
+
+    it('supports h/l for horizontal navigation', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+
+      renderer.registerFocusable('col-1', { tabIndex: 0, column: 0 })
+      renderer.registerFocusable('col-2', { tabIndex: 0, column: 1 })
+      renderer.registerFocusable('col-3', { tabIndex: 0, column: 2 })
+
+      renderer.focusById('col-1')
+
+      renderer.emitKey('l')
+      expect(renderer.getFocusedId()).toBe('col-2')
+
+      renderer.emitKey('l')
+      expect(renderer.getFocusedId()).toBe('col-3')
+
+      renderer.emitKey('h')
+      expect(renderer.getFocusedId()).toBe('col-2')
+    })
+
+    it('supports gg to jump to first item', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+
+      renderer.registerFocusable('item-1', { tabIndex: 0 })
+      renderer.registerFocusable('item-2', { tabIndex: 0 })
+      renderer.registerFocusable('item-3', { tabIndex: 0 })
+
+      renderer.focusById('item-3')
+
+      renderer.emitKey('g')
+      renderer.emitKey('g')
+
+      expect(renderer.getFocusedId()).toBe('item-1')
+    })
+
+    it('supports G to jump to last item', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+
+      renderer.registerFocusable('item-1', { tabIndex: 0 })
+      renderer.registerFocusable('item-2', { tabIndex: 0 })
+      renderer.registerFocusable('item-3', { tabIndex: 0 })
+
+      renderer.focusById('item-1')
+
+      renderer.emitKey('G')
+
+      expect(renderer.getFocusedId()).toBe('item-3')
+    })
+
+    it('supports / for search mode', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+      const onSearchMode = vi.fn()
+
+      renderer.onSearchMode(onSearchMode)
+      renderer.emitKey('/')
+
+      expect(onSearchMode).toHaveBeenCalled()
+      expect(renderer.getMode()).toBe('search')
+    })
+
+    it('supports Escape to exit modes', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ vimBindings: true })
+
+      renderer.emitKey('/')
+      expect(renderer.getMode()).toBe('search')
+
+      renderer.emitKey('escape')
+      expect(renderer.getMode()).toBe('normal')
+    })
+  })
+
+  describe('arrow keys', () => {
+    it('supports arrow keys for navigation', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('item-1', { tabIndex: 0 })
+      renderer.registerFocusable('item-2', { tabIndex: 0 })
+
+      renderer.focusById('item-1')
+
+      renderer.emitKey('down')
+      expect(renderer.getFocusedId()).toBe('item-2')
+
+      renderer.emitKey('up')
+      expect(renderer.getFocusedId()).toBe('item-1')
+    })
+
+    it('supports left/right arrow keys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('tab-1', { tabIndex: 0 })
+      renderer.registerFocusable('tab-2', { tabIndex: 0 })
+
+      renderer.focusById('tab-1')
+
+      renderer.emitKey('right')
+      expect(renderer.getFocusedId()).toBe('tab-2')
+
+      renderer.emitKey('left')
+      expect(renderer.getFocusedId()).toBe('tab-1')
+    })
+  })
+
+  describe('selection and activation', () => {
+    it('Enter activates focused element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onActivate = vi.fn()
+
+      renderer.registerFocusable('button-1', { tabIndex: 0, onActivate })
+      renderer.focusById('button-1')
+      renderer.emitKey('enter')
+
+      expect(onActivate).toHaveBeenCalledWith({ id: 'button-1' })
+    })
+
+    it('Space toggles focused element', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onToggle = vi.fn()
+
+      renderer.registerFocusable('checkbox-1', { tabIndex: 0, onToggle })
+      renderer.focusById('checkbox-1')
+      renderer.emitKey('space')
+
+      expect(onToggle).toHaveBeenCalledWith({ id: 'checkbox-1' })
+    })
+
+    it('Escape cancels current action', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onCancel = vi.fn()
+
+      renderer.onCancel(onCancel)
+      renderer.emitKey('escape')
+
+      expect(onCancel).toHaveBeenCalled()
+    })
+  })
+
+  describe('modifier key combinations', () => {
+    it('handles Ctrl+C', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('ctrl+c', handler)
+      renderer.emitKey('ctrl+c')
+
+      expect(handler).toHaveBeenCalled()
+    })
+
+    it('handles Alt+key combinations', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('alt+h', handler)
+      renderer.emitKey('alt+h')
+
+      expect(handler).toHaveBeenCalled()
+    })
+
+    it('handles Ctrl+Shift combinations', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('ctrl+shift+s', handler)
+      renderer.emitKey('ctrl+shift+s')
+
+      expect(handler).toHaveBeenCalled()
+    })
+
+    it('handles function keys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('f1', handler)
+      renderer.emitKey('f1')
+
+      expect(handler).toHaveBeenCalled()
+    })
+  })
+
+  describe('key sequence support', () => {
+    it('handles multi-key sequences', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeySequence('dd', handler)
+
+      renderer.emitKey('d')
+      expect(handler).not.toHaveBeenCalled()
+
+      renderer.emitKey('d')
+      expect(handler).toHaveBeenCalled()
+    })
+
+    it('times out pending sequences', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ sequenceTimeout: 100 })
+      const handler = vi.fn()
+
+      renderer.onKeySequence('dd', handler)
+
+      renderer.emitKey('d')
+      await new Promise((r) => setTimeout(r, 150))
+      renderer.emitKey('d')
+
+      // Second 'd' starts a new sequence, not completing 'dd'
+      expect(handler).not.toHaveBeenCalled()
+    })
+
+    it('reports pending sequence state', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.onKeySequence('daw', vi.fn())
+
+      expect(renderer.getPendingSequence()).toBe('')
+
+      renderer.emitKey('d')
+      expect(renderer.getPendingSequence()).toBe('d')
+
+      renderer.emitKey('a')
+      expect(renderer.getPendingSequence()).toBe('da')
+    })
+
+    it('cancels pending sequence on Escape', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.onKeySequence('dd', vi.fn())
+
+      renderer.emitKey('d')
+      expect(renderer.getPendingSequence()).toBe('d')
+
+      renderer.emitKey('escape')
+      expect(renderer.getPendingSequence()).toBe('')
+    })
+  })
+})
+
+// ============================================================================
+// Mouse Click Area Tests
+// ============================================================================
+
+describe('Mouse Click Areas', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('click registration', () => {
+    it('registers clickable areas', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+
+      renderer.registerClickable('button-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 3,
+      })
+
+      const clickables = renderer.getClickableAreas()
+      expect(clickables).toHaveLength(1)
+      expect(clickables[0].id).toBe('button-1')
+    })
+
+    it('handles click within registered area', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onClick = vi.fn()
+
+      renderer.registerClickable('button-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 3,
+        onClick,
+      })
+
+      renderer.emitClick(15, 6) // Within bounds
+
+      expect(onClick).toHaveBeenCalledWith({ x: 15, y: 6, id: 'button-1' })
+    })
+
+    it('ignores click outside registered areas', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onClick = vi.fn()
+
+      renderer.registerClickable('button-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 3,
+        onClick,
+      })
+
+      renderer.emitClick(5, 2) // Outside bounds
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    it('handles overlapping click areas with z-order', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onClick1 = vi.fn()
+      const onClick2 = vi.fn()
+
+      renderer.registerClickable('back', {
+        x: 0,
+        y: 0,
+        width: 40,
+        height: 20,
+        zIndex: 0,
+        onClick: onClick1,
+      })
+
+      renderer.registerClickable('front', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 10,
+        zIndex: 1,
+        onClick: onClick2,
+      })
+
+      renderer.emitClick(15, 8) // In overlapping area
+
+      expect(onClick2).toHaveBeenCalled()
+      expect(onClick1).not.toHaveBeenCalled()
+    })
+
+    it('unregisters clickable areas', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onClick = vi.fn()
+
+      renderer.registerClickable('button-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 3,
+        onClick,
+      })
+
+      renderer.unregisterClickable('button-1')
+      renderer.emitClick(15, 6)
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('click-to-focus', () => {
+    it('focuses element on click', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerClickable('input-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 1,
+        focusable: true,
+      })
+
+      renderer.emitClick(15, 5)
+
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+
+    it('allows opting out of click-to-focus', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerClickable('input-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 1,
+        focusable: false,
+      })
+
+      renderer.emitClick(15, 5)
+
+      expect(renderer.getFocusedId()).toBeNull()
+    })
+  })
+
+  describe('mouse events', () => {
+    it('handles double-click', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onDoubleClick = vi.fn()
+
+      renderer.registerClickable('text-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 1,
+        onDoubleClick,
+      })
+
+      renderer.emitClick(15, 5, { clickCount: 2 })
+
+      expect(onDoubleClick).toHaveBeenCalled()
+    })
+
+    it('handles right-click', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onRightClick = vi.fn()
+
+      renderer.registerClickable('item-1', {
+        x: 10,
+        y: 5,
+        width: 20,
+        height: 1,
+        onRightClick,
+      })
+
+      renderer.emitClick(15, 5, { button: 'right' })
+
+      expect(onRightClick).toHaveBeenCalled()
+    })
+
+    it('handles mouse wheel', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+      const onScroll = vi.fn()
+
+      renderer.onScroll(onScroll)
+      renderer.emitScroll(15, 5, { deltaY: -1 }) // Scroll up
+
+      expect(onScroll).toHaveBeenCalledWith(expect.objectContaining({ deltaY: -1 }))
+    })
+  })
+})
+
+// ============================================================================
+// Cursor Positioning Tests
+// ============================================================================
+
+describe('Cursor Positioning', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('cursor state', () => {
+    it('tracks cursor position', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.setCursorPosition(10, 5)
+
+      expect(renderer.getCursorPosition()).toEqual({ x: 10, y: 5 })
+    })
+
+    it('supports cursor visibility', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(renderer.isCursorVisible()).toBe(true)
+
+      renderer.hideCursor()
+      expect(renderer.isCursorVisible()).toBe(false)
+
+      renderer.showCursor()
+      expect(renderer.isCursorVisible()).toBe(true)
+    })
+
+    it('supports cursor styles', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.setCursorStyle('block')
+      expect(renderer.getCursorStyle()).toBe('block')
+
+      renderer.setCursorStyle('underline')
+      expect(renderer.getCursorStyle()).toBe('underline')
+
+      renderer.setCursorStyle('bar')
+      expect(renderer.getCursorStyle()).toBe('bar')
+    })
+
+    it('supports cursor blinking', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.setCursorBlink(true)
+      expect(renderer.isCursorBlinking()).toBe(true)
+
+      renderer.setCursorBlink(false)
+      expect(renderer.isCursorBlinking()).toBe(false)
+    })
+  })
+
+  describe('cursor in input fields', () => {
+    it('moves cursor to focused input', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', {
+        tabIndex: 0,
+        cursorPosition: { x: 15, y: 3 },
+      })
+
+      renderer.focusById('input-1')
+
+      expect(renderer.getCursorPosition()).toEqual({ x: 15, y: 3 })
+    })
+
+    it('updates cursor position on text input', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', {
+        tabIndex: 0,
+        cursorPosition: { x: 15, y: 3 },
+      })
+      renderer.focusById('input-1')
+
+      // Simulate typing
+      renderer.updateCursorPosition('input-1', { x: 20, y: 3 })
+
+      expect(renderer.getCursorPosition()).toEqual({ x: 20, y: 3 })
+    })
+
+    it('hides cursor when non-input is focused', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', {
+        tabIndex: 0,
+        cursorPosition: { x: 15, y: 3 },
+        showCursor: true,
+      })
+      renderer.registerFocusable('button-1', {
+        tabIndex: 0,
+        showCursor: false,
+      })
+
+      renderer.focusById('input-1')
+      expect(renderer.isCursorVisible()).toBe(true)
+
+      renderer.focusById('button-1')
+      expect(renderer.isCursorVisible()).toBe(false)
+    })
+  })
+})
+
+// ============================================================================
+// Real-Time Updates Tests
+// ============================================================================
+
+describe('Real-Time Updates', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('requestRender', () => {
+    it('requests a render update', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+      const { createCliRenderer } = await import('@opentui/core')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.requestRender()
+
+      expect(createCliRenderer).toHaveBeenCalled()
+    })
+
+    it('batches multiple render requests', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const renderSpy = vi.spyOn(renderer, 'requestRender')
+
+      // Request multiple renders rapidly
+      renderer.requestRender()
+      renderer.requestRender()
+      renderer.requestRender()
+
+      // Implementation should batch these
+      await new Promise((r) => setTimeout(r, 50))
+
+      // Verify batching behavior (actual render count should be less)
+      expect(renderSpy).toHaveBeenCalled()
+    })
+
+    it('respects target FPS setting', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ targetFps: 30 })
+
+      expect(renderer.getTargetFps()).toBe(30)
+    })
+  })
+
+  describe('state updates', () => {
+    it('triggers re-render on state change', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onRender = vi.fn()
+
+      renderer.onRender(onRender)
+
+      renderer.setState('counter', 1)
+
+      expect(onRender).toHaveBeenCalled()
+    })
+
+    it('provides state access', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.setState('user', { name: 'Test' })
+
+      expect(renderer.getState('user')).toEqual({ name: 'Test' })
+    })
+
+    it('supports state subscriptions', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const subscriber = vi.fn()
+
+      renderer.subscribe('counter', subscriber)
+      renderer.setState('counter', 5)
+
+      expect(subscriber).toHaveBeenCalledWith(5, undefined)
+    })
+
+    it('allows unsubscribing from state changes', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const subscriber = vi.fn()
+
+      const unsubscribe = renderer.subscribe('counter', subscriber)
+      unsubscribe()
+      renderer.setState('counter', 5)
+
+      expect(subscriber).not.toHaveBeenCalled()
+    })
+  })
+})
+
+// ============================================================================
+// Input Field Handling Tests
+// ============================================================================
+
+describe('Input Field Handling', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('text input', () => {
+    it('accepts text input when focused', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: '',
+        onChange,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('a')
+      expect(onChange).toHaveBeenCalledWith('a')
+
+      renderer.emitKey('b')
+      expect(onChange).toHaveBeenCalledWith('ab')
+    })
+
+    it('handles backspace', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: 'test',
+        onChange,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('backspace')
+      expect(onChange).toHaveBeenCalledWith('tes')
+    })
+
+    it('handles delete key', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: 'test',
+        cursorIndex: 0,
+        onChange,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('delete')
+      expect(onChange).toHaveBeenCalledWith('est')
+    })
+
+    it('moves cursor with arrow keys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerInput('input-1', {
+        value: 'test',
+        cursorIndex: 2,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('left')
+      expect(renderer.getInputCursorIndex('input-1')).toBe(1)
+
+      renderer.emitKey('right')
+      expect(renderer.getInputCursorIndex('input-1')).toBe(2)
+    })
+
+    it('handles Home and End keys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerInput('input-1', {
+        value: 'test',
+        cursorIndex: 2,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('home')
+      expect(renderer.getInputCursorIndex('input-1')).toBe(0)
+
+      renderer.emitKey('end')
+      expect(renderer.getInputCursorIndex('input-1')).toBe(4)
+    })
+  })
+
+  describe('input validation', () => {
+    it('supports input masks', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('phone-input', {
+        value: '',
+        mask: '(###) ###-####',
+        onChange,
+      })
+      renderer.focusById('phone-input')
+
+      renderer.emitKey('5')
+      expect(onChange).toHaveBeenCalledWith('(5')
+    })
+
+    it('supports max length', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: '12345',
+        maxLength: 5,
+        onChange,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('6')
+      expect(onChange).not.toHaveBeenCalled()
+    })
+
+    it('supports validation function', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: '',
+        validate: (value) => /^\d*$/.test(value), // Numbers only
+        onChange,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('a')
+      expect(onChange).not.toHaveBeenCalled()
+
+      renderer.emitKey('1')
+      expect(onChange).toHaveBeenCalledWith('1')
+    })
+  })
+
+  describe('input submission', () => {
+    it('submits input on Enter', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onSubmit = vi.fn()
+
+      renderer.registerInput('input-1', {
+        value: 'test value',
+        onSubmit,
+      })
+      renderer.focusById('input-1')
+
+      renderer.emitKey('enter')
+      expect(onSubmit).toHaveBeenCalledWith('test value')
+    })
+
+    it('prevents submission with Ctrl+Enter for multiline', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onSubmit = vi.fn()
+      const onChange = vi.fn()
+
+      renderer.registerInput('textarea-1', {
+        value: 'line 1',
+        multiline: true,
+        onChange,
+        onSubmit,
+      })
+      renderer.focusById('textarea-1')
+
+      renderer.emitKey('enter')
+      expect(onSubmit).not.toHaveBeenCalled()
+      expect(onChange).toHaveBeenCalledWith('line 1\n')
+
+      renderer.emitKey('ctrl+enter')
+      expect(onSubmit).toHaveBeenCalled()
+    })
+  })
+})
+
+// ============================================================================
+// Component State Management Tests
+// ============================================================================
+
+describe('Component State Management', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('component registration', () => {
+    it('registers interactive components', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerComponent('select-1', {
+        type: 'select',
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedIndex: 0,
+      })
+
+      expect(renderer.getComponent('select-1')).toBeDefined()
+      expect(renderer.getComponent('select-1')?.type).toBe('select')
+    })
+
+    it('unregisters components', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerComponent('select-1', {
+        type: 'select',
+        options: ['A', 'B'],
+      })
+
+      renderer.unregisterComponent('select-1')
+
+      expect(renderer.getComponent('select-1')).toBeUndefined()
+    })
+  })
+
+  describe('select component', () => {
+    it('navigates options with keyboard', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('select-1', {
+        type: 'select',
+        options: ['A', 'B', 'C'],
+        selectedIndex: 0,
+        onChange,
+      })
+      renderer.focusById('select-1')
+
+      renderer.emitKey('down')
+      expect(onChange).toHaveBeenCalledWith(1, 'B')
+
+      renderer.emitKey('down')
+      expect(onChange).toHaveBeenCalledWith(2, 'C')
+
+      renderer.emitKey('up')
+      expect(onChange).toHaveBeenCalledWith(1, 'B')
+    })
+
+    it('selects option with Enter', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onSelect = vi.fn()
+
+      renderer.registerComponent('select-1', {
+        type: 'select',
+        options: ['A', 'B', 'C'],
+        selectedIndex: 1,
+        onSelect,
+      })
+      renderer.focusById('select-1')
+
+      renderer.emitKey('enter')
+      expect(onSelect).toHaveBeenCalledWith(1, 'B')
+    })
+
+    it('supports type-ahead search', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('select-1', {
+        type: 'select',
+        options: ['Apple', 'Banana', 'Cherry'],
+        selectedIndex: 0,
+        searchable: true,
+        onChange,
+      })
+      renderer.focusById('select-1')
+
+      renderer.emitKey('c')
+      expect(onChange).toHaveBeenCalledWith(2, 'Cherry')
+    })
+  })
+
+  describe('checkbox component', () => {
+    it('toggles checkbox with Space', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('checkbox-1', {
+        type: 'checkbox',
+        checked: false,
+        onChange,
+      })
+      renderer.focusById('checkbox-1')
+
+      renderer.emitKey('space')
+      expect(onChange).toHaveBeenCalledWith(true)
+
+      renderer.emitKey('space')
+      expect(onChange).toHaveBeenCalledWith(false)
+    })
+
+    it('toggles checkbox with Enter', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('checkbox-1', {
+        type: 'checkbox',
+        checked: false,
+        onChange,
+      })
+      renderer.focusById('checkbox-1')
+
+      renderer.emitKey('enter')
+      expect(onChange).toHaveBeenCalledWith(true)
+    })
+  })
+
+  describe('radio group component', () => {
+    it('navigates radio options', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('radio-1', {
+        type: 'radiogroup',
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedIndex: 0,
+        onChange,
+      })
+      renderer.focusById('radio-1')
+
+      renderer.emitKey('down')
+      expect(onChange).toHaveBeenCalledWith(1)
+    })
+
+    it('selects radio option with Space', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onSelect = vi.fn()
+
+      renderer.registerComponent('radio-1', {
+        type: 'radiogroup',
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedIndex: 1,
+        onSelect,
+      })
+      renderer.focusById('radio-1')
+
+      renderer.emitKey('space')
+      expect(onSelect).toHaveBeenCalledWith(1, 'Option 2')
+    })
+  })
+
+  describe('slider component', () => {
+    it('adjusts value with arrow keys', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('slider-1', {
+        type: 'slider',
+        value: 50,
+        min: 0,
+        max: 100,
+        step: 10,
+        onChange,
+      })
+      renderer.focusById('slider-1')
+
+      renderer.emitKey('right')
+      expect(onChange).toHaveBeenCalledWith(60)
+
+      renderer.emitKey('left')
+      expect(onChange).toHaveBeenCalledWith(50)
+    })
+
+    it('respects min/max bounds', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('slider-1', {
+        type: 'slider',
+        value: 100,
+        min: 0,
+        max: 100,
+        step: 10,
+        onChange,
+      })
+      renderer.focusById('slider-1')
+
+      renderer.emitKey('right')
+      expect(onChange).toHaveBeenCalledWith(100) // Stays at max
+    })
+
+    it('jumps to min/max with Home/End', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onChange = vi.fn()
+
+      renderer.registerComponent('slider-1', {
+        type: 'slider',
+        value: 50,
+        min: 0,
+        max: 100,
+        onChange,
+      })
+      renderer.focusById('slider-1')
+
+      renderer.emitKey('end')
+      expect(onChange).toHaveBeenCalledWith(100)
+
+      renderer.emitKey('home')
+      expect(onChange).toHaveBeenCalledWith(0)
+    })
+  })
+
+  describe('tree component', () => {
+    it('expands/collapses nodes', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onToggle = vi.fn()
+
+      renderer.registerComponent('tree-1', {
+        type: 'tree',
+        nodes: [
+          { id: 'root', label: 'Root', children: ['child-1', 'child-2'], expanded: false },
+          { id: 'child-1', label: 'Child 1', parent: 'root' },
+          { id: 'child-2', label: 'Child 2', parent: 'root' },
+        ],
+        selectedId: 'root',
+        onToggle,
+      })
+      renderer.focusById('tree-1')
+
+      renderer.emitKey('enter')
+      expect(onToggle).toHaveBeenCalledWith('root', true)
+    })
+
+    it('navigates to children on expand', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onSelect = vi.fn()
+
+      renderer.registerComponent('tree-1', {
+        type: 'tree',
+        nodes: [
+          { id: 'root', label: 'Root', children: ['child-1'], expanded: true },
+          { id: 'child-1', label: 'Child 1', parent: 'root' },
+        ],
+        selectedId: 'root',
+        onSelect,
+      })
+      renderer.focusById('tree-1')
+
+      renderer.emitKey('down')
+      expect(onSelect).toHaveBeenCalledWith('child-1')
+    })
+  })
+})
+
+// ============================================================================
+// Interactive Component Type Tests
+// ============================================================================
+
+describe('Interactive Component Types', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('Button', () => {
+    it('activates button on Enter', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onClick = vi.fn()
+
+      const node = {
+        type: 'button',
+        props: { id: 'btn-1', children: 'Click Me', onClick },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('btn-1')
+      renderer.emitKey('enter')
+
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('activates button on Space', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onClick = vi.fn()
+
+      const node = {
+        type: 'button',
+        props: { id: 'btn-1', children: 'Click Me', onClick },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('btn-1')
+      renderer.emitKey('space')
+
+      expect(onClick).toHaveBeenCalled()
+    })
+
+    it('supports disabled state', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onClick = vi.fn()
+
+      const node = {
+        type: 'button',
+        props: { id: 'btn-1', children: 'Click Me', onClick, disabled: true },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('btn-1')
+      renderer.emitKey('enter')
+
+      expect(onClick).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Input', () => {
+    it('renders input with placeholder', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'input',
+        props: { id: 'input-1', placeholder: 'Enter text...' },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      const component = renderer.getComponent('input-1')
+      expect(component?.placeholder).toBe('Enter text...')
+    })
+
+    it('supports password type', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'input',
+        props: { id: 'password-1', type: 'password', value: 'secret' },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      const component = renderer.getComponent('password-1')
+      expect(component?.displayValue).toBe('******')
+    })
+  })
+
+  describe('Select', () => {
+    it('renders select with options', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'select',
+        props: {
+          id: 'select-1',
+          options: [
+            { value: 'a', label: 'Option A' },
+            { value: 'b', label: 'Option B' },
+          ],
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      const component = renderer.getComponent('select-1')
+      expect(component?.options).toHaveLength(2)
+    })
+
+    it('opens dropdown on Enter', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'select',
+        props: {
+          id: 'select-1',
+          options: [{ value: 'a', label: 'Option A' }],
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('select-1')
+      renderer.emitKey('enter')
+
+      const component = renderer.getComponent('select-1')
+      expect(component?.isOpen).toBe(true)
+    })
+  })
+
+  describe('Dialog', () => {
+    it('traps focus within dialog', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'dialog',
+        props: {
+          id: 'dialog-1',
+          open: true,
+          children: [
+            { type: 'input', props: { id: 'dialog-input' } },
+            { type: 'button', props: { id: 'dialog-button', children: 'OK' } },
+          ],
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      // Focus should be trapped within dialog
+      const focusableIds = renderer.getFocusableIds()
+      expect(focusableIds).toEqual(['dialog-input', 'dialog-button'])
+    })
+
+    it('closes dialog on Escape', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onClose = vi.fn()
+
+      const node = {
+        type: 'dialog',
+        props: {
+          id: 'dialog-1',
+          open: true,
+          onClose,
+          children: [],
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.emitKey('escape')
+
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  describe('Table', () => {
+    it('navigates table rows', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onRowSelect = vi.fn()
+
+      const node = {
+        type: 'table',
+        props: {
+          id: 'table-1',
+          rows: [
+            { id: 'row-1', cells: ['A1', 'B1'] },
+            { id: 'row-2', cells: ['A2', 'B2'] },
+            { id: 'row-3', cells: ['A3', 'B3'] },
+          ],
+          onRowSelect,
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('table-1')
+
+      renderer.emitKey('down')
+      expect(onRowSelect).toHaveBeenCalledWith('row-2')
+    })
+
+    it('navigates table cells', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onCellSelect = vi.fn()
+
+      const node = {
+        type: 'table',
+        props: {
+          id: 'table-1',
+          cellNavigation: true,
+          rows: [
+            { id: 'row-1', cells: ['A1', 'B1', 'C1'] },
+          ],
+          onCellSelect,
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('table-1')
+
+      renderer.emitKey('right')
+      expect(onCellSelect).toHaveBeenCalledWith('row-1', 1)
+    })
+  })
+
+  describe('Spinner/Progress', () => {
+    it('updates progress value', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'progress',
+        props: { id: 'progress-1', value: 50, max: 100 },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      renderer.updateComponent('progress-1', { value: 75 })
+
+      const component = renderer.getComponent('progress-1')
+      expect(component?.value).toBe(75)
+    })
+
+    it('triggers animation frames for spinner', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      const node = {
+        type: 'spinner',
+        props: { id: 'spinner-1' },
+      }
+
+      registerInteractiveNode(node, renderer)
+
+      const component = renderer.getComponent('spinner-1')
+      expect(component?.isAnimating).toBe(true)
+    })
+  })
+
+  describe('ScrollView', () => {
+    it('scrolls content with arrow keys', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onScroll = vi.fn()
+
+      const node = {
+        type: 'scrollview',
+        props: {
+          id: 'scroll-1',
+          contentHeight: 100,
+          viewportHeight: 20,
+          onScroll,
+          children: { type: 'text', props: { children: 'Long content...' } },
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('scroll-1')
+
+      renderer.emitKey('down')
+      expect(onScroll).toHaveBeenCalled()
+    })
+
+    it('supports Page Up/Down', async () => {
+      const { createInteractiveRenderer, registerInteractiveNode } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onScroll = vi.fn()
+
+      const node = {
+        type: 'scrollview',
+        props: {
+          id: 'scroll-1',
+          contentHeight: 100,
+          viewportHeight: 20,
+          scrollY: 40,
+          onScroll,
+        },
+      }
+
+      registerInteractiveNode(node, renderer)
+      renderer.focusById('scroll-1')
+
+      renderer.emitKey('pagedown')
+      expect(onScroll).toHaveBeenCalledWith(expect.objectContaining({ scrollY: 60 }))
+
+      renderer.emitKey('pageup')
+      expect(onScroll).toHaveBeenCalledWith(expect.objectContaining({ scrollY: 40 }))
+    })
+  })
+})
+
+// ============================================================================
+// Edge Cases and Error Handling Tests
+// ============================================================================
+
+describe('Edge Cases and Error Handling', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  describe('empty states', () => {
+    it('handles empty focusable list', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(renderer.getFocusableIds()).toEqual([])
+      expect(renderer.getFocusedId()).toBeNull()
+
+      // These should not throw
+      expect(() => renderer.focusNext()).not.toThrow()
+      expect(() => renderer.focusPrev()).not.toThrow()
+    })
+
+    it('handles focus on non-existent ID', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      // Should not throw, just ignore
+      expect(() => renderer.focusById('non-existent')).not.toThrow()
+      expect(renderer.getFocusedId()).toBeNull()
+    })
+
+    it('handles click with no clickable areas', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ useMouse: true })
+
+      // Should not throw
+      expect(() => renderer.emitClick(10, 5)).not.toThrow()
+    })
+  })
+
+  describe('duplicate handling', () => {
+    it('handles duplicate focusable registration', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-1', { tabIndex: 1 }) // Re-register with different tabIndex
+
+      const ids = renderer.getFocusableIds()
+      expect(ids.filter((id) => id === 'input-1')).toHaveLength(1)
+    })
+
+    it('handles duplicate key handler registration', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const handler = vi.fn()
+
+      renderer.onKeyPress('ctrl+s', handler)
+      renderer.onKeyPress('ctrl+s', handler) // Same handler again
+
+      renderer.emitKey('ctrl+s')
+
+      // Should only call once despite double registration
+      expect(handler).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('lifecycle', () => {
+    it('cleans up on destroy', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerClickable('button-1', { x: 0, y: 0, width: 10, height: 1 })
+      renderer.onKeyPress('ctrl+s', vi.fn())
+
+      renderer.destroy()
+
+      expect(renderer.getFocusableIds()).toEqual([])
+      expect(renderer.getClickableAreas()).toEqual([])
+    })
+
+    it('allows multiple destroy calls', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      expect(() => {
+        renderer.destroy()
+        renderer.destroy()
+        renderer.destroy()
+      }).not.toThrow()
+    })
+
+    it('ignores operations after destroy', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.destroy()
+
+      // These should not throw or have any effect
+      expect(() => renderer.focusNext()).not.toThrow()
+      expect(() => renderer.emitKey('enter')).not.toThrow()
+    })
+  })
+
+  describe('disabled state handling', () => {
+    it('skips disabled elements in focus chain', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0, disabled: true })
+      renderer.registerFocusable('input-3', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+      renderer.focusNext()
+
+      expect(renderer.getFocusedId()).toBe('input-3')
+    })
+
+    it('handles all elements disabled', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0, disabled: true })
+      renderer.registerFocusable('input-2', { tabIndex: 0, disabled: true })
+
+      expect(() => renderer.focusNext()).not.toThrow()
+      expect(renderer.getFocusedId()).toBeNull()
+    })
+  })
+
+  describe('concurrent updates', () => {
+    it('handles rapid focus changes', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+      renderer.registerFocusable('input-3', { tabIndex: 0 })
+
+      // Rapid focus changes
+      renderer.focusById('input-1')
+      renderer.focusById('input-2')
+      renderer.focusById('input-3')
+      renderer.focusById('input-1')
+
+      expect(renderer.getFocusedId()).toBe('input-1')
+    })
+
+    it('handles registration during focus traversal', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.registerFocusable('input-2', { tabIndex: 0 })
+
+      renderer.focusById('input-1')
+
+      // Add new focusable during operation
+      renderer.registerFocusable('input-3', { tabIndex: 1 })
+
+      renderer.focusNext()
+
+      // Should handle the new element properly
+      expect(renderer.getFocusableIds()).toContain('input-3')
+    })
+  })
+
+  describe('memory management', () => {
+    it('clears callbacks on component unregister', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer()
+      const onFocus = vi.fn()
+      const onBlur = vi.fn()
+
+      renderer.registerFocusable('input-1', {
+        tabIndex: 0,
+        onFocus,
+        onBlur,
+      })
+
+      renderer.unregisterFocusable('input-1')
+
+      // Re-register and focus - old callbacks should not fire
+      renderer.registerFocusable('input-1', { tabIndex: 0 })
+      renderer.focusById('input-1')
+
+      expect(onFocus).not.toHaveBeenCalled()
+    })
+
+    it('cleans up sequence timers on destroy', async () => {
+      const { createInteractiveRenderer } = await import('../../renderers/interactive')
+
+      const renderer = await createInteractiveRenderer({ sequenceTimeout: 100 })
+      const handler = vi.fn()
+
+      renderer.onKeySequence('dd', handler)
+      renderer.emitKey('d')
+
+      // Destroy before sequence timeout
+      renderer.destroy()
+
+      await new Promise((r) => setTimeout(r, 150))
+
+      // Handler should not have been called
+      expect(handler).not.toHaveBeenCalled()
+    })
+  })
+})