@mdxui/terminal 2.0.0

package/src/renderers/components/field.ts

@@ -0,0 +1,210 @@
+/**
+ * Field Component Renderer
+ *
+ * Renders individual input fields with labels, values, errors, and type-specific display
+ * across all 6 render tiers.
+ */
+import type { UINode, RenderContext } from '../../core/types'
+import { getProp } from '../utils'
+
+const RESET = '\x1b[0m'
+const DIM = '\x1b[2m'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface FieldProps {
+  name: string
+  label?: string
+  type?: string
+  value?: unknown
+  placeholder?: string
+  required?: boolean
+  error?: string
+  valid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  helperText?: string
+  focused?: boolean
+  cursorPosition?: number
+  selectionStart?: number
+  selectionEnd?: number
+}
+
+// ============================================================================
+// Rendering Helpers
+// ============================================================================
+
+function maskPassword(value: string, tier: string): string {
+  const maskChar = tier === 'unicode' || tier === 'ansi' || tier === 'interactive' ? '•' : '*'
+  return maskChar.repeat(value.length)
+}
+
+function renderCheckbox(checked: boolean, tier: string): string {
+  if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+    return checked ? '[✓]' : '[ ]'
+  }
+  return checked ? '[x]' : '[ ]'
+}
+
+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}\x1b[7m${selected}${RESET}${after}`
+}
+
+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)
+  // Use reverse video for cursor position
+  return `${before}\x1b[7m \x1b[0m${after}`
+}
+
+// ============================================================================
+// Main Renderer
+// ============================================================================
+
+export function renderField(node: UINode, ctx: RenderContext): string {
+  const { tier, theme } = ctx
+  const props = node.props ?? {}
+
+  const name = getProp<string>(props, 'name', '')
+  const label = getProp<string>(props, 'label', '')
+  const type = getProp<string>(props, 'type', 'text')
+  const value = props.value
+  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 helperText = getProp<string>(props, 'helperText', '')
+  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 lines: string[] = []
+  const displayLabel = label || name
+
+  // Build label with required indicator
+  let labelStr = displayLabel
+  if (required) {
+    labelStr += ' *'
+  }
+
+  // Handle checkbox type
+  if (type === 'checkbox') {
+    const checked = !!value
+    const checkbox = renderCheckbox(checked, tier)
+    let line = `${checkbox} ${displayLabel}`
+    if (required) {
+      line += ' *'
+    }
+
+    if (tier === 'ansi' || tier === 'interactive') {
+      if (disabled) {
+        line = `${DIM}${line}${RESET}`
+      } else if (focused) {
+        line = `${theme.primary}${line}${RESET}`
+      } else if (valid) {
+        line = `${theme.success}${line}${RESET}`
+      }
+    }
+
+    lines.push(line)
+  } else {
+    // Regular field types
+    let displayValue = ''
+    let isPlaceholder = false
+
+    if (value === null || value === undefined) {
+      displayValue = placeholder
+      isPlaceholder = true
+    } else if (type === 'password' && typeof value === 'string') {
+      displayValue = maskPassword(value, tier)
+    } else if (type === 'textarea' && typeof value === 'string') {
+      displayValue = value // Keep newlines
+    } else {
+      displayValue = String(value)
+    }
+
+    // Interactive tier: handle selection and cursor
+    if (tier === 'interactive' && focused) {
+      const textValue = value === null || value === undefined ? '' : String(value)
+      if (typeof selectionStart === 'number' && typeof selectionEnd === 'number' && selectionStart !== selectionEnd) {
+        displayValue = renderValueWithSelection(textValue, selectionStart, selectionEnd)
+      } else if (typeof cursorPosition === 'number') {
+        displayValue = renderValueWithCursor(textValue, cursorPosition)
+      }
+    }
+
+    // Format based on tier
+    if (tier === 'markdown') {
+      const valueDisplay = displayValue || `_${placeholder}_`
+      lines.push(`**${labelStr}**: ${valueDisplay}`)
+    } else {
+      // Text/ASCII/Unicode/ANSI/Interactive
+      let line: string
+
+      if (tier === 'ansi' || tier === 'interactive') {
+        if (disabled) {
+          const val = displayValue || placeholder
+          line = `${DIM}${labelStr}: ${val}${RESET}`
+        } else if (error) {
+          line = `${theme.error}${labelStr}${RESET}: ${displayValue || `${theme.muted}${placeholder}${RESET}`}`
+        } else if (valid) {
+          line = `${theme.success}${labelStr}${RESET}: ${displayValue}`
+        } else if (focused) {
+          line = `${theme.primary}${labelStr}${RESET}: ${displayValue || `${theme.muted}${placeholder}${RESET}`}`
+        } else if (isPlaceholder && placeholder) {
+          line = `${labelStr}: ${theme.muted}${placeholder}${RESET}`
+        } else {
+          line = `${labelStr}: ${displayValue}`
+        }
+      } else {
+        line = `${labelStr}: ${displayValue || placeholder}`
+      }
+
+      lines.push(line)
+    }
+
+    // For textarea, value may have multiple lines
+    if (type === 'textarea' && typeof value === 'string' && value.includes('\n')) {
+      // Already handled in displayValue
+    }
+  }
+
+  // Helper text
+  if (helperText) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`  ${theme.muted}${helperText}${RESET}`)
+    } else {
+      lines.push(`  ${helperText}`)
+    }
+  }
+
+  // Error message (rendered below value)
+  if (error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`  ${theme.error}${error}${RESET}`)
+    } else if (tier === 'markdown') {
+      lines.push(`  *${error}*`)
+    } else {
+      lines.push(`  ${error}`)
+    }
+  }
+
+  // Interactive tier keyboard hints
+  if (tier === 'interactive' && focused) {
+    lines.push(`  [Tab: Next | Enter: Confirm | Esc: Cancel]`)
+  }
+
+  return lines.join('\n')
+}

package/src/renderers/components/form.ts

@@ -0,0 +1,327 @@
+/**
+ * Form Component Renderer
+ *
+ * Renders form components with fields, validation, and submit buttons
+ * 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 FormField {
+  name: string
+  label?: string
+  type?: string
+  value?: unknown
+  placeholder?: string
+  required?: boolean
+  error?: string
+  valid?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  helperText?: string
+  focused?: boolean
+  cursorPosition?: number
+  options?: Array<{ label: string; value: string }>
+}
+
+interface FormGroup {
+  title: string
+  fields: FormField[]
+  collapsible?: boolean
+  collapsed?: boolean
+}
+
+// ============================================================================
+// Field Rendering Helpers
+// ============================================================================
+
+function maskPassword(value: string, tier: string): string {
+  const maskChar = tier === 'unicode' || tier === 'ansi' || tier === 'interactive' ? '•' : '*'
+  return maskChar.repeat(value.length)
+}
+
+function renderCheckbox(checked: boolean, tier: string): string {
+  if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+    return checked ? '[✓]' : '[ ]'
+  }
+  return checked ? '[x]' : '[ ]'
+}
+
+function renderFieldValue(field: FormField, tier: string): string {
+  const { type, value, placeholder } = field
+
+  if (value === null || value === undefined || value === '') {
+    return placeholder || ''
+  }
+
+  if (type === 'password' && typeof value === 'string') {
+    return maskPassword(value, tier)
+  }
+
+  if (type === 'checkbox') {
+    return '' // Checkbox rendering handled separately
+  }
+
+  if (type === 'select' && field.options) {
+    const selected = field.options.find((opt) => opt.value === value)
+    return selected?.label || String(value)
+  }
+
+  return String(value)
+}
+
+function renderSingleField(
+  field: FormField,
+  ctx: RenderContext
+): string {
+  const { tier, theme } = ctx
+  const lines: string[] = []
+  const label = field.label || field.name
+
+  // Build label with required indicator
+  let labelStr = label
+  if (field.required) {
+    labelStr += ' *'
+  }
+
+  // Render checkbox differently
+  if (field.type === 'checkbox') {
+    const checkbox = renderCheckbox(!!field.value, tier)
+    let line = `${checkbox} ${label}`
+    if (field.required) {
+      line += ' *'
+    }
+    if (tier === 'ansi' || tier === 'interactive') {
+      if (field.disabled) {
+        line = `${DIM}${line}${RESET}`
+      } else if (field.focused) {
+        line = `${theme.primary}${line}${RESET}`
+      }
+    }
+    lines.push(line)
+  } else {
+    // Regular field
+    const value = renderFieldValue(field, tier)
+    let displayValue = value
+
+    // Interactive tier: show cursor
+    if (tier === 'interactive' && field.focused && typeof field.cursorPosition === 'number') {
+      const pos = field.cursorPosition
+      const before = displayValue.slice(0, pos)
+      const after = displayValue.slice(pos)
+      displayValue = `${before}\x1b[7m \x1b[0m${after}`
+    }
+
+    if (tier === 'markdown') {
+      // Markdown format
+      lines.push(`**${labelStr}**: ${displayValue || `_${field.placeholder || ''}_`}`)
+    } else {
+      // Text/ASCII/Unicode/ANSI format
+      let line = `${labelStr}: ${displayValue || field.placeholder || ''}`
+
+      if (tier === 'ansi' || tier === 'interactive') {
+        if (field.disabled) {
+          line = `${DIM}${labelStr}: ${displayValue || field.placeholder || ''}${RESET}`
+        } else if (field.focused) {
+          line = `${theme.primary}${labelStr}${RESET}: ${displayValue || `${theme.muted}${field.placeholder || ''}${RESET}`}`
+        } else if (field.valid) {
+          line = `${theme.success}${labelStr}${RESET}: ${displayValue}`
+        } else if (!displayValue && field.placeholder) {
+          line = `${labelStr}: ${theme.muted}${field.placeholder}${RESET}`
+        }
+      }
+
+      lines.push(line)
+    }
+  }
+
+  // Helper text
+  if (field.helperText) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`  ${theme.muted}${field.helperText}${RESET}`)
+    } else {
+      lines.push(`  ${field.helperText}`)
+    }
+  }
+
+  // Error message
+  if (field.error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`  ${theme.error}${field.error}${RESET}`)
+    } else if (tier === 'markdown') {
+      lines.push(`  *${field.error}*`)
+    } else {
+      lines.push(`  ${field.error}`)
+    }
+  }
+
+  return lines.join('\n')
+}
+
+// ============================================================================
+// Main Renderer
+// ============================================================================
+
+export function renderForm(node: UINode, ctx: RenderContext): string {
+  const { tier, theme } = ctx
+  const props = node.props ?? {}
+
+  const fields = getProp<FormField[]>(props, 'fields', [])
+  const groups = getProp<FormGroup[]>(props, 'groups', [])
+  const title = getProp<string>(props, 'title', '')
+  const description = getProp<string>(props, 'description', '')
+  const error = getProp<string>(props, 'error', '')
+  const success = getProp<string>(props, 'success', '')
+  const loading = getProp<boolean>(props, 'loading', false)
+  const submitLabel = getProp<string>(props, 'submitLabel', '')
+  const cancelLabel = getProp<string>(props, 'cancelLabel', '')
+  const submitDisabled = getProp<boolean>(props, 'submitDisabled', false)
+  const submitHotkey = getProp<string>(props, 'submitHotkey', '')
+  const border = getProp<boolean>(props, 'border', false)
+
+  const lines: string[] = []
+
+  // Title
+  if (title) {
+    if (tier === 'markdown') {
+      lines.push(`## ${title}`)
+    } else {
+      lines.push(title)
+    }
+  }
+
+  // Description
+  if (description) {
+    lines.push(description)
+    lines.push('')
+  }
+
+  // Form-level error
+  if (error) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`${theme.error}${error}${RESET}`)
+    } else {
+      lines.push(error)
+    }
+    lines.push('')
+  }
+
+  // Success message
+  if (success) {
+    if (tier === 'ansi' || tier === 'interactive') {
+      lines.push(`${theme.success}${success}${RESET}`)
+    } else {
+      lines.push(success)
+    }
+    lines.push('')
+  }
+
+  // Loading state
+  if (loading) {
+    const spinner = tier === 'unicode' || tier === 'ansi' || tier === 'interactive'
+      ? SPINNER_FRAMES[0]
+      : '...'
+    lines.push(`${spinner} Submitting...`)
+  }
+
+  // Render groups
+  for (const group of groups) {
+    if (group.collapsible && group.collapsed) {
+      // Just show title, hide fields
+      if (tier === 'ascii') {
+        lines.push(`+ ${group.title}`)
+      } else if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+        lines.push(`▸ ${group.title}`)
+      } else {
+        lines.push(`[+] ${group.title}`)
+      }
+      continue
+    }
+
+    // Show group title
+    if (tier === 'ascii') {
+      lines.push(`+-- ${group.title} --+`)
+    } else if (tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+      lines.push(`┌── ${group.title} ──┐`)
+    } else if (tier === 'markdown') {
+      lines.push(`### ${group.title}`)
+    } else {
+      lines.push(group.title)
+    }
+
+    // Render group fields
+    for (const field of group.fields) {
+      lines.push(renderSingleField(field, ctx))
+    }
+    lines.push('')
+  }
+
+  // Render standalone fields (not in groups)
+  for (const field of fields) {
+    lines.push(renderSingleField(field, ctx))
+  }
+
+  // Submit/Cancel buttons
+  if (submitLabel || cancelLabel) {
+    lines.push('')
+    const buttons: string[] = []
+
+    if (submitLabel) {
+      let btn = submitLabel
+      if (tier === 'interactive' && submitHotkey) {
+        btn += ` (${submitHotkey})`
+      }
+      if (submitDisabled && (tier === 'ansi' || tier === 'interactive')) {
+        btn = `${DIM}[${btn}]${RESET}`
+      } else if (tier === 'ascii' || tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+        btn = `[${btn}]`
+      }
+      buttons.push(btn)
+    }
+
+    if (cancelLabel) {
+      let btn = cancelLabel
+      if (tier === 'ascii' || tier === 'unicode' || tier === 'ansi' || tier === 'interactive') {
+        btn = `[${btn}]`
+      }
+      buttons.push(btn)
+    }
+
+    lines.push(buttons.join('  '))
+  }
+
+  // Interactive hints
+  if (tier === 'interactive') {
+    lines.push('')
+    lines.push('Tab: Next field | Enter: Submit | ↑↓: Navigate')
+  }
+
+  // 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.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')
+  }
+
+  return result
+}

package/src/renderers/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @mdxui/terminal Component Renderers
+ *
+ * Individual component renderers for input components that work across
+ * all 6 render tiers (TEXT, MARKDOWN, ASCII, UNICODE, ANSI, INTERACTIVE).
+ *
+ * Each renderer function accepts a UINode and RenderContext and returns
+ * a string representation appropriate for the specified tier.
+ */
+
+// Field Component - Individual input field renderer
+export { renderField } from './field'
+
+// Select Component - Dropdown/select input renderer
+export { renderSelect } from './select'
+
+// Form Component - Form container with fields, validation, and submit
+export { renderForm } from './form'
+
+// Search Component - Search input with suggestions and results
+export { renderSearch } from './search'