@mdxui/terminal 2.0.0

package/src/renderers/components/search.ts

@@ -0,0 +1,449 @@
+/**
+ * Search Component Renderer
+ *
+ * Renders search input with suggestions, results, and filtering capabilities
+ * across all 6 render tiers.
+ */
+import type { UINode, RenderContext } from '../../core/types'
+import {
+  buildBox,
+  ASCII_BOX_CHARS,
+  UNICODE_SINGLE_BOX_CHARS,
+  getProp,
+  SPINNER_FRAMES,
+} from '../utils'
+
+const RESET = '\x1b[0m'
+const DIM = '\x1b[2m'
+const BOLD = '\x1b[1m'
+const REVERSE = '\x1b[7m'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface Suggestion {
+  label: string
+  value: string
+  description?: string
+  icon?: string
+}
+
+interface SuggestionGroup {
+  label: string
+  suggestions: Suggestion[]
+}
+
+interface SearchResult {
+  id: string
+  title: string
+  subtitle?: string
+  type?: string
+}
+
+interface Category {
+  label: string
+  count: number
+}
+
+interface QuickAction {
+  label: string
+  value: string
+  shortcut?: string
+}
+
+interface Command {
+  label: string
+  value: string
+  shortcut?: string
+}
+
+interface CommandGroup {
+  label: string
+  commands: Command[]
+}
+
+interface Scope {
+  label: string
+  value: string
+}
+
+// ============================================================================
+// Rendering Helpers
+// ============================================================================
+
+function getSearchIcon(tier: string): string {
+  if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+    return '🔍'
+  }
+  return 'Search:'
+}
+
+function highlightMatch(text: string, query: string, tier: string): string {
+  if (!query || !text) return text
+
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const index = lowerText.indexOf(lowerQuery)
+
+  if (index === -1) return text
+
+  const before = text.slice(0, index)
+  const match = text.slice(index, index + query.length)
+  const after = text.slice(index + query.length)
+
+  if (tier === 'ansi' || tier === 'interactive') {
+    return `${before}${BOLD}${match}${RESET}${after}`
+  } else if (tier === 'markdown') {
+    return `${before}**${match}**${after}`
+  }
+
+  return text
+}
+
+function renderValueWithCursor(value: string, cursorPosition: number): string {
+  const pos = Math.min(cursorPosition, value.length)
+  const before = value.slice(0, pos)
+  const after = value.slice(pos)
+  return `${before}${REVERSE} ${RESET}${after}`
+}
+
+function renderValueWithSelection(
+  value: string,
+  selectionStart: number,
+  selectionEnd: number
+): string {
+  const before = value.slice(0, selectionStart)
+  const selected = value.slice(selectionStart, selectionEnd)
+  const after = value.slice(selectionEnd)
+  return `${before}${REVERSE}${selected}${RESET}${after}`
+}
+
+// ============================================================================
+// Main Renderer
+// ============================================================================
+
+export function renderSearch(node: UINode, ctx: RenderContext): string {
+  const { tier, theme } = ctx
+  const props = node.props ?? {}
+
+  // Basic props
+  const value = getProp<string>(props, 'value', '')
+  const placeholder = getProp<string>(props, 'placeholder', '')
+  const label = getProp<string>(props, 'label', '')
+  const disabled = getProp<boolean>(props, 'disabled', false)
+  const loading = getProp<boolean>(props, 'loading', false)
+  const error = getProp<string>(props, 'error', '')
+  const border = getProp<boolean>(props, 'border', false)
+  const focused = getProp<boolean>(props, 'focused', false)
+  const cursorPosition = getProp<number | undefined>(props, 'cursorPosition', undefined)
+  const selectionStart = getProp<number | undefined>(props, 'selectionStart', undefined)
+  const selectionEnd = getProp<number | undefined>(props, 'selectionEnd', undefined)
+  const ariaLabel = getProp<string>(props, 'ariaLabel', '')
+
+  // Suggestions
+  const suggestions = getProp<Suggestion[] | null>(props, 'suggestions', null)
+  const suggestionGroups = getProp<SuggestionGroup[] | undefined>(props, 'suggestionGroups', undefined)
+  const showSuggestions = getProp<boolean>(props, 'showSuggestions', false)
+  const highlightedIndex = getProp<number>(props, 'highlightedIndex', -1)
+  const maxSuggestions = getProp<number>(props, 'maxSuggestions', 10)
+  const maxVisibleSuggestions = getProp<number>(props, 'maxVisibleSuggestions', 10)
+  const highlightMatches = getProp<boolean>(props, 'highlightMatches', false)
+
+  // Results
+  const results = getProp<SearchResult[] | undefined>(props, 'results', undefined)
+  const showResults = getProp<boolean>(props, 'showResults', false)
+  const totalResults = getProp<number | undefined>(props, 'totalResults', undefined)
+
+  // Categories
+  const categories = getProp<Category[] | undefined>(props, 'categories', undefined)
+
+  // Recent searches
+  const recentSearches = getProp<string[] | undefined>(props, 'recentSearches', undefined)
+  const showRecentSearches = getProp<boolean>(props, 'showRecentSearches', false)
+
+  // Quick actions
+  const quickActions = getProp<QuickAction[] | undefined>(props, 'quickActions', undefined)
+  const showQuickActions = getProp<boolean>(props, 'showQuickActions', false)
+
+  // Commands (command palette mode)
+  const commands = getProp<Command[] | undefined>(props, 'commands', undefined)
+  const filteredCommands = getProp<Command[] | undefined>(props, 'filteredCommands', undefined)
+  const commandGroups = getProp<CommandGroup[] | undefined>(props, 'commandGroups', undefined)
+  const showCommands = getProp<boolean>(props, 'showCommands', false)
+  const mode = getProp<string>(props, 'mode', 'inline')
+
+  // Voice search
+  const voiceEnabled = getProp<boolean>(props, 'voiceEnabled', false)
+  const voiceListening = getProp<boolean>(props, 'voiceListening', false)
+
+  // Scope
+  const scopeLabel = getProp<string>(props, 'scopeLabel', '')
+  const scopes = getProp<Scope[] | undefined>(props, 'scopes', undefined)
+  const showScopes = getProp<boolean>(props, 'showScopes', false)
+
+  // Typing/debounce
+  const isTyping = getProp<boolean>(props, 'isTyping', false)
+
+  const lines: string[] = []
+
+  // Label
+  if (label) {
+    lines.push(label)
+  }
+
+  // Scope indicator
+  if (scopeLabel) {
+    lines.push(`[${scopeLabel}]`)
+  }
+
+  // Scopes options
+  if (showScopes && scopes && scopes.length > 0) {
+    const scopeStrings = scopes.map(s => s.label)
+    lines.push(`Scopes: ${scopeStrings.join(' | ')}`)
+  }
+
+  // Search input line
+  const searchIcon = getSearchIcon(tier)
+  let displayValue = value
+
+  // Handle cursor and selection for interactive tier
+  if (tier === 'interactive' && focused) {
+    if (typeof selectionStart === 'number' && typeof selectionEnd === 'number' && selectionStart !== selectionEnd) {
+      displayValue = renderValueWithSelection(value, selectionStart, selectionEnd)
+    } else if (typeof cursorPosition === 'number') {
+      displayValue = renderValueWithCursor(value, cursorPosition)
+    }
+  }
+
+  let inputLine = `${searchIcon} ${displayValue || placeholder}`
+
+  // Voice indicator
+  if (voiceEnabled && tier === 'interactive') {
+    if (voiceListening) {
+      inputLine += ' 🎤 Listening...'
+    } else {
+      inputLine += ' [🎤 Voice]'
+    }
+  }
+
+  // Clear hint for interactive tier
+  if (tier === 'interactive' && value) {
+    inputLine += ' [Esc: Clear]'
+  }
+
+  // Submit hint for interactive tier
+  if (tier === 'interactive') {
+    inputLine += ' [Enter: Search]'
+  }
+
+  lines.push(inputLine)
+
+  // Typing indicator
+  if (isTyping && tier === 'interactive') {
+    lines.push('Typing...')
+  }
+
+  // Loading state
+  if (loading) {
+    const spinner = tier === 'unicode' || tier === 'ansi' || tier === 'interactive'
+      ? SPINNER_FRAMES[0]
+      : '...'
+    lines.push(`${spinner} Searching...`)
+  }
+
+  // Error message
+  if (error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`${theme.error}${error}${RESET}`)
+    } else {
+      lines.push(error)
+    }
+  }
+
+  // Categories/filters
+  if (categories && categories.length > 0 && showResults) {
+    const catStrings = categories.map(c => `${c.label} (${c.count})`)
+    lines.push(catStrings.join(' | '))
+  }
+
+  // Recent searches
+  if (showRecentSearches && recentSearches && recentSearches.length > 0) {
+    lines.push('')
+    lines.push('Recent Searches:')
+    for (const recent of recentSearches) {
+      lines.push(`  ${recent}`)
+    }
+    lines.push('  [Clear recent searches]')
+  }
+
+  // Quick actions
+  if (showQuickActions && quickActions && quickActions.length > 0) {
+    lines.push('')
+    for (const action of quickActions) {
+      let actionLine = `  ${action.label}`
+      if (action.shortcut) {
+        actionLine += ` (${action.shortcut})`
+      }
+      lines.push(actionLine)
+    }
+  }
+
+  // Command palette mode
+  if (mode === 'command-palette' && showCommands) {
+    // Command groups
+    if (commandGroups && commandGroups.length > 0) {
+      for (const group of commandGroups) {
+        lines.push('')
+        lines.push(group.label)
+        for (const cmd of group.commands) {
+          let cmdLine = `  ${cmd.label}`
+          if (cmd.shortcut) {
+            cmdLine += ` (${cmd.shortcut})`
+          }
+          lines.push(cmdLine)
+        }
+      }
+    } else {
+      // Filtered or regular commands
+      const cmdsToShow = filteredCommands || commands || []
+      for (const cmd of cmdsToShow) {
+        let cmdLine = `  ${cmd.label}`
+        if (cmd.shortcut) {
+          cmdLine += ` (${cmd.shortcut})`
+        }
+        lines.push(cmdLine)
+      }
+    }
+  }
+
+  // Suggestions
+  if (showSuggestions) {
+    // Grouped suggestions
+    if (suggestionGroups && suggestionGroups.length > 0) {
+      for (const group of suggestionGroups) {
+        lines.push('')
+        lines.push(group.label)
+        for (const sug of group.suggestions) {
+          let sugLine = `  ${sug.label}`
+          if (sug.description) {
+            sugLine += ` - ${sug.description}`
+          }
+          lines.push(sugLine)
+        }
+      }
+    } else if (suggestions !== null) {
+      if (suggestions.length === 0) {
+        lines.push('No results found')
+      } else {
+        const sugLines: string[] = []
+        const limitedSuggestions = suggestions.slice(0, maxSuggestions)
+
+        limitedSuggestions.forEach((sug, index) => {
+          let sugLabel = sug.label
+
+          // Highlight match if enabled
+          if (highlightMatches && value) {
+            sugLabel = highlightMatch(sugLabel, value, tier)
+          }
+
+          let sugLine = `  ${sugLabel}`
+          if (sug.description) {
+            sugLine += ` - ${sug.description}`
+          }
+
+          // Highlight current selection
+          if (tier === 'interactive' && index === highlightedIndex) {
+            sugLine = `${theme.primary}> ${sugLabel}${RESET}`
+            if (sug.description) {
+              sugLine += ` - ${sug.description}`
+            }
+          }
+
+          sugLines.push(sugLine)
+        })
+
+        // Accessibility: show position indicator
+        if (tier === 'interactive' && highlightedIndex >= 0 && limitedSuggestions.length > 0) {
+          const position = highlightedIndex + 1
+          const total = limitedSuggestions.length
+          lines.push(`(${position} of ${total})`)
+        }
+
+        // Scroll indicator for long lists
+        if (tier === 'interactive' && suggestions.length > maxVisibleSuggestions) {
+          lines.push('↓ more...')
+        }
+
+        // Apply box for ascii/unicode tiers
+        if ((tier === 'ascii' || tier === 'unicode') && sugLines.length > 0) {
+          const boxChars = tier === 'unicode' ? UNICODE_SINGLE_BOX_CHARS : ASCII_BOX_CHARS
+          const maxWidth = Math.max(...sugLines.map(l => l.length), 10)
+          const boxLines = buildBox(boxChars, sugLines.map(l => l.trimStart()), maxWidth + 4)
+          lines.push(...boxLines)
+        } else {
+          lines.push(...sugLines)
+        }
+      }
+    }
+  }
+
+  // Results
+  if (showResults) {
+    // Total results count
+    if (totalResults !== undefined) {
+      lines.push(`${totalResults} results found`)
+    }
+
+    if (results !== undefined) {
+      if (results.length === 0) {
+        lines.push('No results found')
+      } else {
+        for (const result of results) {
+          let resultTitle = result.title
+
+          // Highlight match if enabled
+          if (highlightMatches && value) {
+            resultTitle = highlightMatch(resultTitle, value, tier)
+          }
+
+          let resultLine = `  ${resultTitle}`
+          if (result.subtitle) {
+            resultLine += ` - ${result.subtitle}`
+          }
+          if (result.type) {
+            resultLine += ` [${result.type}]`
+          }
+          lines.push(resultLine)
+        }
+      }
+    }
+  }
+
+  // Interactive keyboard hints
+  if (tier === 'interactive' && showSuggestions && suggestions && suggestions.length > 0) {
+    lines.push('')
+    lines.push('↑↓: Navigate | Enter: Select | Esc: Close | Tab: Next')
+  }
+
+  // Build result
+  let result = lines.join('\n')
+
+  // Apply border if requested
+  if (border) {
+    const contentLines = result.split('\n')
+    const maxWidth = Math.max(...contentLines.map(l => l.replace(/\x1b\[[0-9;]*m/g, '').length), 20)
+    const boxChars = tier === 'unicode' || tier === 'ansi' || tier === 'interactive'
+      ? UNICODE_SINGLE_BOX_CHARS
+      : ASCII_BOX_CHARS
+    const boxLines = buildBox(boxChars, contentLines, maxWidth + 4)
+    result = boxLines.join('\n')
+  }
+
+  // Disabled state wrapper
+  if (disabled && (tier === 'ansi' || tier === 'interactive')) {
+    result = `${DIM}${result}${RESET}`
+  }
+
+  return result
+}

package/src/renderers/components/select.ts

@@ -0,0 +1,222 @@
+/**
+ * Select Component Renderer
+ *
+ * Renders dropdown/list selection with options and keyboard navigation
+ * across all 6 render tiers.
+ */
+import type { UINode, RenderContext } from '../../core/types'
+import {
+  buildBox,
+  ASCII_BOX_CHARS,
+  UNICODE_SINGLE_BOX_CHARS,
+  getProp,
+  SPINNER_FRAMES,
+} from '../utils'
+
+const RESET = '\x1b[0m'
+const DIM = '\x1b[2m'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface SelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+// ============================================================================
+// Rendering Helpers
+// ============================================================================
+
+function renderDropdownIndicator(open: boolean, tier: string): string {
+  if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+    return open ? '▾' : '▼'
+  }
+  return open ? 'v' : '>'
+}
+
+function renderOptionIndicator(
+  selected: boolean,
+  highlighted: boolean,
+  multiple: boolean,
+  tier: string
+): string {
+  if (multiple) {
+    // Checkbox style for multi-select
+    if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+      return selected ? '☑' : '☐'
+    }
+    return selected ? '[x]' : '[ ]'
+  }
+
+  // Radio style for single select
+  if (selected) {
+    if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+      return '●'
+    }
+    return '*'
+  }
+
+  if (highlighted) {
+    if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+      return '>'
+    }
+    return '>'
+  }
+
+  return ' '
+}
+
+// ============================================================================
+// Main Renderer
+// ============================================================================
+
+export function renderSelect(node: UINode, ctx: RenderContext): string {
+  const { tier, theme } = ctx
+  const props = node.props ?? {}
+
+  const options = getProp<SelectOption[]>(props, 'options', [])
+  const value = props.value
+  const label = getProp<string>(props, 'label', '')
+  const placeholder = getProp<string>(props, 'placeholder', '')
+  const required = getProp<boolean>(props, 'required', false)
+  const error = getProp<string>(props, 'error', '')
+  const valid = getProp<boolean>(props, 'valid', false)
+  const disabled = getProp<boolean>(props, 'disabled', false)
+  const loading = getProp<boolean>(props, 'loading', false)
+  const open = getProp<boolean>(props, 'open', true) // Default to showing options
+  const multiple = getProp<boolean>(props, 'multiple', false)
+  const highlightedIndex = getProp<number>(props, 'highlightedIndex', -1)
+  const searchable = getProp<boolean>(props, 'searchable', false)
+  const searchValue = getProp<string>(props, 'searchValue', '')
+  const filteredOptions = props.filteredOptions as SelectOption[] | undefined
+
+  const lines: string[] = []
+
+  // Label with required indicator
+  if (label) {
+    let labelStr = label
+    if (required) {
+      labelStr += ' *'
+    }
+    lines.push(labelStr)
+  }
+
+  // Loading state
+  if (loading) {
+    const spinner = tier === 'unicode' || tier === 'ansi' || tier === 'interactive'
+      ? SPINNER_FRAMES[0]
+      : '...'
+    lines.push(`${spinner} Loading...`)
+    return lines.join('\n')
+  }
+
+  // Current selection display (for collapsed state or always showing selected)
+  const selectedValues = Array.isArray(value) ? value : (value !== null && value !== undefined ? [value] : [])
+  const selectedOptions = options.filter((opt) => selectedValues.includes(opt.value))
+  const selectedLabels = selectedOptions.map((opt) => opt.label)
+
+  if (!open) {
+    // Collapsed state - show only selected value
+    const displayText = selectedLabels.length > 0
+      ? selectedLabels.join(', ')
+      : placeholder || 'Select...'
+    const indicator = renderDropdownIndicator(false, tier)
+
+    let line = `${displayText} ${indicator}`
+    if (tier === 'ansi' || tier === 'interactive') {
+      if (disabled) {
+        line = `${DIM}${line}${RESET}`
+      }
+    }
+    lines.push(line)
+  } else {
+    // Expanded state - show all options
+    if (searchable && (tier === 'interactive')) {
+      lines.push(`Search: ${searchValue || ''}`)
+    }
+
+    const dropdownIndicator = renderDropdownIndicator(true, tier)
+    const headerText = selectedLabels.length > 0
+      ? selectedLabels.join(', ')
+      : placeholder || 'Select...'
+    lines.push(`${headerText} ${dropdownIndicator}`)
+
+    // Use filtered options if available
+    const displayOptions = filteredOptions !== undefined ? filteredOptions : options
+
+    if (displayOptions.length === 0) {
+      lines.push('  No results found')
+    } else {
+      const optionLines: string[] = []
+
+      for (let i = 0; i < displayOptions.length; i++) {
+        const opt = displayOptions[i]
+        const isSelected = selectedValues.includes(opt.value)
+        const isHighlighted = i === highlightedIndex
+        const indicator = renderOptionIndicator(isSelected, isHighlighted, multiple, tier)
+
+        let optionLine = `  ${indicator} ${opt.label}`
+
+        if (tier === 'ansi' || tier === 'interactive') {
+          if (opt.disabled) {
+            optionLine = `${DIM}  ${indicator} ${opt.label}${RESET}`
+          } else if (isSelected) {
+            optionLine = `${theme.primary}  ${indicator} ${opt.label}${RESET}`
+          } else if (isHighlighted) {
+            optionLine = `${theme.secondary}  ${indicator} ${opt.label}${RESET}`
+          }
+        }
+
+        optionLines.push(optionLine)
+      }
+
+      // Apply box if ascii/unicode
+      if (tier === 'ascii') {
+        const boxChars = ASCII_BOX_CHARS
+        const maxWidth = Math.max(...optionLines.map(l => l.length), 10)
+        const boxLines = buildBox(boxChars, optionLines.map(l => l.trimStart()), maxWidth + 4)
+        lines.push(...boxLines)
+      } else if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+        const boxChars = UNICODE_SINGLE_BOX_CHARS
+        const maxWidth = Math.max(...optionLines.map(l => l.length), 10)
+        const boxLines = buildBox(boxChars, optionLines.map(l => l.trimStart()), maxWidth + 4)
+        lines.push(...boxLines)
+      } else {
+        lines.push(...optionLines)
+      }
+    }
+  }
+
+  // Error message
+  if (error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`${theme.error}${error}${RESET}`)
+    } else {
+      lines.push(error)
+    }
+  }
+
+  // Valid state indicator
+  if (valid && !error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`${theme.success}✓${RESET}`)
+    }
+  }
+
+  // Interactive keyboard hints
+  if (tier === 'interactive' && open) {
+    lines.push('')
+    lines.push('↑↓: Navigate | Enter: Select | Esc: Close')
+  }
+
+  // Disabled state wrapper
+  let result = lines.join('\n')
+  if (disabled && (tier === 'ansi' || tier === 'interactive')) {
+    result = `${DIM}${result}${RESET}`
+  }
+
+  return result
+}