@mdxui/terminal 2.0.0

package/src/renderers/interactive/input-handler.ts

@@ -0,0 +1,164 @@
+/**
+ * @mdxui/terminal Input Handler
+ *
+ * Handles input field registration and key handling
+ * for the interactive renderer.
+ *
+ * @packageDocumentation
+ */
+
+import type { InputOptions, InputState, InputManagerState, FocusManagerState } from './types'
+import { registerFocusable } from './focus-manager'
+
+/**
+ * Creates the input manager state
+ */
+export function createInputManagerState(): InputManagerState {
+  return {
+    inputs: new Map<string, InputState>(),
+  }
+}
+
+/**
+ * Register an input field
+ */
+export function registerInput(
+  inputState: InputManagerState,
+  focusState: FocusManagerState,
+  id: string,
+  options: InputOptions,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  inputState.inputs.set(id, {
+    ...options,
+    currentValue: options.value,
+    currentCursorIndex: options.cursorIndex ?? options.value.length,
+  })
+
+  // Also register as focusable
+  registerFocusable(focusState, id, { tabIndex: 0 }, destroyed)
+}
+
+/**
+ * Get input cursor index
+ */
+export function getInputCursorIndex(
+  inputState: InputManagerState,
+  id: string,
+  destroyed?: boolean
+): number {
+  if (destroyed) return 0
+  const input = inputState.inputs.get(id)
+  return input?.currentCursorIndex ?? 0
+}
+
+/**
+ * Handle input key press
+ */
+export function handleInputKey(
+  id: string,
+  input: InputState,
+  key: string
+): boolean {
+  const { currentValue, currentCursorIndex, onChange, onSubmit, maxLength, validate, mask, multiline } = input
+
+  // Handle special keys
+  if (key === 'backspace') {
+    if (currentCursorIndex > 0) {
+      const newValue = currentValue.slice(0, currentCursorIndex - 1) + currentValue.slice(currentCursorIndex)
+      input.currentValue = newValue
+      input.currentCursorIndex = currentCursorIndex - 1
+      onChange?.(newValue)
+    }
+    return true
+  }
+
+  if (key === 'delete') {
+    if (currentCursorIndex < currentValue.length) {
+      const newValue = currentValue.slice(0, currentCursorIndex) + currentValue.slice(currentCursorIndex + 1)
+      input.currentValue = newValue
+      onChange?.(newValue)
+    }
+    return true
+  }
+
+  if (key === 'left') {
+    if (currentCursorIndex > 0) {
+      input.currentCursorIndex = currentCursorIndex - 1
+    }
+    return true
+  }
+
+  if (key === 'right') {
+    if (currentCursorIndex < currentValue.length) {
+      input.currentCursorIndex = currentCursorIndex + 1
+    }
+    return true
+  }
+
+  if (key === 'home') {
+    input.currentCursorIndex = 0
+    return true
+  }
+
+  if (key === 'end') {
+    input.currentCursorIndex = currentValue.length
+    return true
+  }
+
+  if (key === 'enter') {
+    if (multiline) {
+      const newValue = currentValue + '\n'
+      input.currentValue = newValue
+      input.currentCursorIndex = newValue.length
+      onChange?.(newValue)
+    } else {
+      onSubmit?.(currentValue)
+    }
+    return true
+  }
+
+  if (key === 'ctrl+enter') {
+    onSubmit?.(currentValue)
+    return true
+  }
+
+  // Handle regular character input
+  if (key.length === 1) {
+    // Check max length
+    if (maxLength !== undefined && currentValue.length >= maxLength) {
+      return true
+    }
+
+    let newValue = currentValue + key
+
+    // Apply mask if present
+    if (mask) {
+      // Simple mask handling: insert formatting chars
+      const maskChar = mask[newValue.length - 1]
+      if (maskChar && maskChar !== '#') {
+        newValue = currentValue + maskChar + key
+      }
+    }
+
+    // Validate if validator present
+    if (validate && !validate(newValue)) {
+      return true
+    }
+
+    input.currentValue = newValue
+    input.currentCursorIndex = newValue.length
+    onChange?.(newValue)
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Clear input state on destroy
+ */
+export function clearInputState(inputState: InputManagerState): void {
+  inputState.inputs.clear()
+}

package/src/renderers/interactive/keyboard-handler.ts

@@ -0,0 +1,212 @@
+/**
+ * @mdxui/terminal Keyboard Handler
+ *
+ * Handles key binding, input handling, sequences, and vim bindings
+ * for the interactive renderer.
+ *
+ * @packageDocumentation
+ */
+
+import type { KeyHandler, KeyboardManagerState } from './types'
+
+/**
+ * Creates the keyboard manager state
+ */
+export function createKeyboardManagerState(
+  vimBindings: boolean,
+  sequenceTimeout: number
+): KeyboardManagerState {
+  return {
+    keyHandlers: new Map<string, KeyHandler[]>(),
+    sequenceHandlers: new Map<string, () => void>(),
+    pendingSequence: '',
+    sequenceTimer: null,
+    sequenceTimeout,
+    mode: 'normal',
+    searchModeHandler: null,
+    cancelHandler: null,
+    vimBindings,
+  }
+}
+
+/**
+ * Register a key press handler
+ */
+export function onKeyPress(
+  keyboardState: KeyboardManagerState,
+  key: string,
+  handler: () => boolean | void,
+  options?: { priority?: number },
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  const handlers = keyboardState.keyHandlers.get(key) || []
+
+  // Check for duplicate handler
+  if (handlers.some(h => h.handler === handler)) return
+
+  handlers.push({ handler, priority: options?.priority ?? 0 })
+  // Sort by priority descending
+  handlers.sort((a, b) => b.priority - a.priority)
+  keyboardState.keyHandlers.set(key, handlers)
+}
+
+/**
+ * Unregister a key press handler
+ */
+export function offKeyPress(
+  keyboardState: KeyboardManagerState,
+  key: string,
+  handler: () => boolean | void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  const handlers = keyboardState.keyHandlers.get(key)
+  if (handlers) {
+    const idx = handlers.findIndex(h => h.handler === handler)
+    if (idx !== -1) {
+      handlers.splice(idx, 1)
+    }
+  }
+}
+
+/**
+ * Emit a key event
+ */
+export function emitKey(
+  keyboardState: KeyboardManagerState,
+  key: string,
+  handleComponentKey: (key: string) => boolean,
+  focusedId: string | null,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+
+  // Check for sequence handling
+  if (keyboardState.sequenceHandlers.size > 0) {
+    const newSequence = keyboardState.pendingSequence + key
+
+    // Check if this completes a sequence
+    const sequenceHandler = keyboardState.sequenceHandlers.get(newSequence)
+    if (sequenceHandler) {
+      keyboardState.pendingSequence = ''
+      if (keyboardState.sequenceTimer) {
+        clearTimeout(keyboardState.sequenceTimer)
+        keyboardState.sequenceTimer = null
+      }
+      sequenceHandler()
+      return
+    }
+
+    // Check if this could be part of a sequence
+    const couldBeSequence = Array.from(keyboardState.sequenceHandlers.keys()).some(s =>
+      s.startsWith(newSequence)
+    )
+    if (couldBeSequence) {
+      keyboardState.pendingSequence = newSequence
+      // Reset timeout
+      if (keyboardState.sequenceTimer) {
+        clearTimeout(keyboardState.sequenceTimer)
+      }
+      keyboardState.sequenceTimer = setTimeout(() => {
+        keyboardState.pendingSequence = ''
+        keyboardState.sequenceTimer = null
+      }, keyboardState.sequenceTimeout)
+      return
+    }
+
+    // Not part of any sequence, clear and process normally
+    keyboardState.pendingSequence = ''
+    if (keyboardState.sequenceTimer) {
+      clearTimeout(keyboardState.sequenceTimer)
+      keyboardState.sequenceTimer = null
+    }
+  }
+
+  // Process key handlers
+  const handlers = keyboardState.keyHandlers.get(key)
+  if (handlers) {
+    for (const { handler } of handlers) {
+      const result = handler()
+      if (result === true) {
+        return // Stop propagation
+      }
+    }
+  }
+
+  // If it's a single character, pass to focused input
+  if (key.length === 1 && focusedId) {
+    handleComponentKey(key)
+  }
+}
+
+/**
+ * Register a key sequence handler
+ */
+export function onKeySequence(
+  keyboardState: KeyboardManagerState,
+  sequence: string,
+  handler: () => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  keyboardState.sequenceHandlers.set(sequence, handler)
+}
+
+/**
+ * Get the pending sequence
+ */
+export function getPendingSequence(
+  keyboardState: KeyboardManagerState,
+  destroyed?: boolean
+): string {
+  if (destroyed) return ''
+  return keyboardState.pendingSequence
+}
+
+/**
+ * Register search mode handler
+ */
+export function onSearchMode(
+  keyboardState: KeyboardManagerState,
+  handler: () => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  keyboardState.searchModeHandler = handler
+}
+
+/**
+ * Register cancel handler
+ */
+export function onCancel(
+  keyboardState: KeyboardManagerState,
+  handler: () => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  keyboardState.cancelHandler = handler
+}
+
+/**
+ * Get the current mode
+ */
+export function getMode(
+  keyboardState: KeyboardManagerState,
+  destroyed?: boolean
+): string {
+  if (destroyed) return 'normal'
+  return keyboardState.mode
+}
+
+/**
+ * Clear keyboard state on destroy
+ */
+export function clearKeyboardState(keyboardState: KeyboardManagerState): void {
+  keyboardState.keyHandlers.clear()
+  keyboardState.sequenceHandlers.clear()
+  if (keyboardState.sequenceTimer) {
+    clearTimeout(keyboardState.sequenceTimer)
+    keyboardState.sequenceTimer = null
+  }
+}

package/src/renderers/interactive/mouse-handler.ts

@@ -0,0 +1,167 @@
+/**
+ * @mdxui/terminal Mouse Handler
+ *
+ * Handles click events, clickable areas, and scroll events
+ * for the interactive renderer.
+ *
+ * @packageDocumentation
+ */
+
+import type { ClickableOptions, MouseManagerState, FocusManagerState, CursorManagerState } from './types'
+import { focusById } from './focus-manager'
+
+/**
+ * Creates the mouse manager state
+ */
+export function createMouseManagerState(): MouseManagerState {
+  return {
+    clickables: new Map<string, ClickableOptions>(),
+    clickHandlers: [],
+    scrollHandler: null,
+  }
+}
+
+/**
+ * Register a click handler
+ */
+export function onClick(
+  mouseState: MouseManagerState,
+  handler: (event: { x: number; y: number }) => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  mouseState.clickHandlers.push(handler)
+}
+
+/**
+ * Unregister a click handler
+ */
+export function offClick(
+  mouseState: MouseManagerState,
+  handler: (event: { x: number; y: number }) => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  const idx = mouseState.clickHandlers.indexOf(handler)
+  if (idx !== -1) {
+    mouseState.clickHandlers.splice(idx, 1)
+  }
+}
+
+/**
+ * Emit a click event
+ */
+export function emitClick(
+  mouseState: MouseManagerState,
+  focusState: FocusManagerState,
+  cursorState: CursorManagerState,
+  x: number,
+  y: number,
+  options?: { clickCount?: number; button?: string },
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+
+  // Find clickable at position with highest z-index
+  const clickableEntries = Array.from(mouseState.clickables.entries())
+    .filter(([, c]) => {
+      return x >= c.x && x < c.x + c.width && y >= c.y && y < c.y + c.height
+    })
+    .sort((a, b) => (b[1].zIndex ?? 0) - (a[1].zIndex ?? 0))
+
+  if (clickableEntries.length > 0) {
+    const [id, clickable] = clickableEntries[0]
+
+    // Handle focus
+    if (clickable.focusable !== false && focusState.focusables.has(id)) {
+      focusById(focusState, cursorState, id, false)
+    }
+
+    // Handle click type
+    if (options?.button === 'right' && clickable.onRightClick) {
+      clickable.onRightClick()
+    } else if (options?.clickCount === 2 && clickable.onDoubleClick) {
+      clickable.onDoubleClick()
+    } else if (clickable.onClick) {
+      clickable.onClick({ x, y, id })
+    }
+  }
+
+  // Call global click handlers
+  for (const handler of mouseState.clickHandlers) {
+    handler({ x, y })
+  }
+}
+
+/**
+ * Register a clickable area
+ */
+export function registerClickable(
+  mouseState: MouseManagerState,
+  id: string,
+  options: ClickableOptions,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  mouseState.clickables.set(id, options)
+}
+
+/**
+ * Unregister a clickable area
+ */
+export function unregisterClickable(
+  mouseState: MouseManagerState,
+  id: string,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  mouseState.clickables.delete(id)
+}
+
+/**
+ * Get all clickable areas
+ */
+export function getClickableAreas(
+  mouseState: MouseManagerState,
+  destroyed?: boolean
+): Array<{ id: string } & ClickableOptions> {
+  if (destroyed) return []
+  return Array.from(mouseState.clickables.entries()).map(([id, options]) => ({
+    id,
+    ...options,
+  }))
+}
+
+/**
+ * Register scroll handler
+ */
+export function onScroll(
+  mouseState: MouseManagerState,
+  handler: (event: { deltaY: number }) => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  mouseState.scrollHandler = handler
+}
+
+/**
+ * Emit scroll event
+ */
+export function emitScroll(
+  mouseState: MouseManagerState,
+  _x: number,
+  _y: number,
+  options: { deltaY: number },
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  mouseState.scrollHandler?.(options)
+}
+
+/**
+ * Clear mouse state on destroy
+ */
+export function clearMouseState(mouseState: MouseManagerState): void {
+  mouseState.clickables.clear()
+  mouseState.clickHandlers.length = 0
+}

package/src/renderers/interactive/state-manager.ts

@@ -0,0 +1,109 @@
+/**
+ * @mdxui/terminal State Manager
+ *
+ * Handles component state tracking, subscriptions, and render callbacks
+ * for the interactive renderer.
+ *
+ * @packageDocumentation
+ */
+
+import type { StateManagerState } from './types'
+
+/**
+ * Creates the state manager state
+ */
+export function createStateManagerState(targetFps: number): StateManagerState {
+  return {
+    state: new Map<string, unknown>(),
+    stateSubscribers: new Map<string, Set<(newValue: unknown, oldValue: unknown) => void>>(),
+    renderHandler: null,
+    targetFps,
+  }
+}
+
+/**
+ * Set a state value
+ */
+export function setState(
+  stateManager: StateManagerState,
+  key: string,
+  value: unknown,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  const oldValue = stateManager.state.get(key)
+  stateManager.state.set(key, value)
+
+  // Notify subscribers
+  const subscribers = stateManager.stateSubscribers.get(key)
+  if (subscribers) {
+    for (const subscriber of subscribers) {
+      subscriber(value, oldValue)
+    }
+  }
+
+  // Trigger render
+  stateManager.renderHandler?.()
+}
+
+/**
+ * Get a state value
+ */
+export function getState(
+  stateManager: StateManagerState,
+  key: string,
+  destroyed?: boolean
+): unknown {
+  if (destroyed) return undefined
+  return stateManager.state.get(key)
+}
+
+/**
+ * Subscribe to state changes
+ */
+export function subscribe(
+  stateManager: StateManagerState,
+  key: string,
+  subscriber: (newValue: unknown, oldValue: unknown) => void,
+  destroyed?: boolean
+): () => void {
+  if (destroyed) return () => {}
+  if (!stateManager.stateSubscribers.has(key)) {
+    stateManager.stateSubscribers.set(key, new Set())
+  }
+  stateManager.stateSubscribers.get(key)!.add(subscriber)
+
+  return () => {
+    const subscribers = stateManager.stateSubscribers.get(key)
+    if (subscribers) {
+      subscribers.delete(subscriber)
+    }
+  }
+}
+
+/**
+ * Register render handler
+ */
+export function onRender(
+  stateManager: StateManagerState,
+  handler: () => void,
+  destroyed?: boolean
+): void {
+  if (destroyed) return
+  stateManager.renderHandler = handler
+}
+
+/**
+ * Get target FPS
+ */
+export function getTargetFps(stateManager: StateManagerState): number {
+  return stateManager.targetFps
+}
+
+/**
+ * Clear state manager on destroy
+ */
+export function clearStateManager(stateManager: StateManagerState): void {
+  stateManager.state.clear()
+  stateManager.stateSubscribers.clear()
+}