@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/Textarea.ts

@@ -1,425 +0,0 @@
-import type { KeyEvent, PasteEvent } from "../lib/KeyHandler.js"
-import { decodePasteBytes, stripAnsiSequences } from "../lib/paste.js"
-import { RGBA, parseColor, type ColorInput } from "../lib/RGBA.js"
-import { type RenderContext } from "../types.js"
-import { EditBufferRenderable, type EditBufferOptions } from "./EditBufferRenderable.js"
-import {
-  type KeyBinding as BaseKeyBinding,
-  mergeKeyBindings,
-  buildKeyBindingsMap,
-  getKeyBindingAction,
-  defaultKeyAliases,
-  mergeKeyAliases,
-} from "../lib/keybinding.internal.js"
-import { type StyledText, fg } from "../lib/styled-text.js"
-import type { ExtmarksController } from "../lib/extmarks.js"
-
-export type TextareaAction =
-  | "move-left"
-  | "move-right"
-  | "move-up"
-  | "move-down"
-  | "select-left"
-  | "select-right"
-  | "select-up"
-  | "select-down"
-  | "line-home"
-  | "line-end"
-  | "select-line-home"
-  | "select-line-end"
-  | "visual-line-home"
-  | "visual-line-end"
-  | "select-visual-line-home"
-  | "select-visual-line-end"
-  | "buffer-home"
-  | "buffer-end"
-  | "select-buffer-home"
-  | "select-buffer-end"
-  | "delete-line"
-  | "delete-to-line-end"
-  | "delete-to-line-start"
-  | "backspace"
-  | "delete"
-  | "newline"
-  | "undo"
-  | "redo"
-  | "word-forward"
-  | "word-backward"
-  | "select-word-forward"
-  | "select-word-backward"
-  | "delete-word-forward"
-  | "delete-word-backward"
-  | "select-all"
-  | "submit"
-
-export type KeyBinding = BaseKeyBinding<TextareaAction>
-export type TextareaKeyAliasMap = Record<string, string>
-
-export const defaultTextareaKeyBindings: KeyBinding[] = [
-  { name: "left", action: "move-left" },
-  { name: "right", action: "move-right" },
-  { name: "up", action: "move-up" },
-  { name: "down", action: "move-down" },
-  { name: "left", shift: true, action: "select-left" },
-  { name: "right", shift: true, action: "select-right" },
-  { name: "up", shift: true, action: "select-up" },
-  { name: "down", shift: true, action: "select-down" },
-  { name: "home", action: "buffer-home" },
-  { name: "end", action: "buffer-end" },
-  { name: "home", shift: true, action: "select-buffer-home" },
-  { name: "end", shift: true, action: "select-buffer-end" },
-  { name: "a", ctrl: true, action: "line-home" },
-  { name: "e", ctrl: true, action: "line-end" },
-  { name: "a", ctrl: true, shift: true, action: "select-line-home" },
-  { name: "e", ctrl: true, shift: true, action: "select-line-end" },
-  { name: "a", meta: true, action: "visual-line-home" },
-  { name: "e", meta: true, action: "visual-line-end" },
-  { name: "a", meta: true, shift: true, action: "select-visual-line-home" },
-  { name: "e", meta: true, shift: true, action: "select-visual-line-end" },
-  { name: "f", ctrl: true, action: "move-right" },
-  { name: "b", ctrl: true, action: "move-left" },
-  { name: "w", ctrl: true, action: "delete-word-backward" },
-  { name: "backspace", ctrl: true, action: "delete-word-backward" },
-  { name: "d", meta: true, action: "delete-word-forward" },
-  { name: "delete", meta: true, action: "delete-word-forward" },
-  { name: "delete", ctrl: true, action: "delete-word-forward" },
-  { name: "d", ctrl: true, shift: true, action: "delete-line" },
-  { name: "k", ctrl: true, action: "delete-to-line-end" },
-  { name: "u", ctrl: true, action: "delete-to-line-start" },
-  { name: "backspace", action: "backspace" },
-  { name: "backspace", shift: true, action: "backspace" },
-  { name: "d", ctrl: true, action: "delete" },
-  { name: "delete", action: "delete" },
-  { name: "delete", shift: true, action: "delete" },
-  { name: "return", action: "newline" },
-  { name: "kpenter", action: "newline" },
-  { name: "linefeed", action: "newline" },
-  { name: "return", meta: true, action: "submit" },
-  { name: "kpenter", meta: true, action: "submit" },
-
-  // undo/redo
-  { name: "-", ctrl: true, action: "undo" },
-  { name: ".", ctrl: true, action: "redo" },
-  { name: "z", super: true, action: "undo" },
-  { name: "z", super: true, shift: true, action: "redo" },
-
-  { name: "f", meta: true, action: "word-forward" },
-  { name: "b", meta: true, action: "word-backward" },
-  { name: "right", meta: true, action: "word-forward" },
-  { name: "left", meta: true, action: "word-backward" },
-  { name: "right", ctrl: true, action: "word-forward" },
-  { name: "left", ctrl: true, action: "word-backward" },
-  { name: "f", meta: true, shift: true, action: "select-word-forward" },
-  { name: "b", meta: true, shift: true, action: "select-word-backward" },
-  { name: "right", meta: true, shift: true, action: "select-word-forward" },
-  { name: "left", meta: true, shift: true, action: "select-word-backward" },
-  { name: "backspace", meta: true, action: "delete-word-backward" },
-
-  // super (cmd/win) + arrow keys for Kitty Keyboard mode
-  { name: "left", super: true, action: "visual-line-home" },
-  { name: "right", super: true, action: "visual-line-end" },
-  { name: "up", super: true, action: "buffer-home" },
-  { name: "down", super: true, action: "buffer-end" },
-  { name: "left", super: true, shift: true, action: "select-visual-line-home" },
-  { name: "right", super: true, shift: true, action: "select-visual-line-end" },
-  { name: "up", super: true, shift: true, action: "select-buffer-home" },
-  { name: "down", super: true, shift: true, action: "select-buffer-end" },
-  { name: "a", super: true, action: "select-all" },
-]
-
-export interface SubmitEvent {}
-
-export interface TextareaOptions extends EditBufferOptions {
-  initialValue?: string
-  backgroundColor?: ColorInput
-  textColor?: ColorInput
-  focusedBackgroundColor?: ColorInput
-  focusedTextColor?: ColorInput
-  placeholder?: StyledText | string | null
-  placeholderColor?: ColorInput
-  keyBindings?: KeyBinding[]
-  keyAliasMap?: TextareaKeyAliasMap
-  onSubmit?: (event: SubmitEvent) => void
-}
-
-export class TextareaRenderable extends EditBufferRenderable {
-  private _placeholder: StyledText | string | null
-  private _placeholderColor: RGBA
-  private _unfocusedBackgroundColor: RGBA
-  private _unfocusedTextColor: RGBA
-  private _focusedBackgroundColor: RGBA
-  private _focusedTextColor: RGBA
-  private _keyBindingsMap: Map<string, TextareaAction>
-  private _keyAliasMap: TextareaKeyAliasMap
-  private _keyBindings: KeyBinding[]
-  private _actionHandlers: Map<TextareaAction, () => boolean>
-  private _initialValueSet: boolean = false
-  private _submitListener: ((event: SubmitEvent) => void) | undefined = undefined
-
-  private static readonly defaults = {
-    backgroundColor: "transparent",
-    textColor: "#FFFFFF",
-    focusedBackgroundColor: "transparent",
-    focusedTextColor: "#FFFFFF",
-    placeholder: null,
-    placeholderColor: "#666666",
-  } satisfies Partial<TextareaOptions>
-
-  constructor(ctx: RenderContext, options: TextareaOptions) {
-    const defaults = TextareaRenderable.defaults
-
-    // Pass base colors to parent constructor (these become the unfocused colors)
-    const baseOptions = {
-      ...options,
-      backgroundColor: options.backgroundColor || defaults.backgroundColor,
-      textColor: options.textColor || defaults.textColor,
-    }
-    super(ctx, baseOptions)
-
-    // Store unfocused colors separately (parent's properties get overwritten when focused)
-    this._unfocusedBackgroundColor = parseColor(options.backgroundColor || defaults.backgroundColor)
-    this._unfocusedTextColor = parseColor(options.textColor || defaults.textColor)
-    this._focusedBackgroundColor = parseColor(
-      options.focusedBackgroundColor || options.backgroundColor || defaults.focusedBackgroundColor,
-    )
-    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || defaults.focusedTextColor)
-    this._placeholder = options.placeholder ?? defaults.placeholder
-    this._placeholderColor = parseColor(options.placeholderColor ?? defaults.placeholderColor)
-
-    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, options.keyAliasMap || {})
-    this._keyBindings = options.keyBindings || []
-    const mergedBindings = mergeKeyBindings(defaultTextareaKeyBindings, this._keyBindings)
-    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
-    this._actionHandlers = this.buildActionHandlers()
-    this._submitListener = options.onSubmit
-
-    if (options.initialValue) {
-      this.setText(options.initialValue)
-      this._initialValueSet = true
-    }
-    this.updateColors()
-
-    this.applyPlaceholder(this._placeholder)
-  }
-
-  private applyPlaceholder(placeholder: StyledText | string | null): void {
-    if (placeholder === null) {
-      this.editorView.setPlaceholderStyledText([])
-      return
-    }
-
-    if (typeof placeholder === "string") {
-      const colorStyle = fg(this._placeholderColor)
-      const chunks = [colorStyle(placeholder)]
-      this.editorView.setPlaceholderStyledText(chunks)
-    } else {
-      this.editorView.setPlaceholderStyledText(placeholder.chunks)
-    }
-  }
-
-  private buildActionHandlers(): Map<TextareaAction, () => boolean> {
-    return new Map([
-      ["move-left", () => this.moveCursorLeft()],
-      ["move-right", () => this.moveCursorRight()],
-      ["move-up", () => this.moveCursorUp()],
-      ["move-down", () => this.moveCursorDown()],
-      ["select-left", () => this.moveCursorLeft({ select: true })],
-      ["select-right", () => this.moveCursorRight({ select: true })],
-      ["select-up", () => this.moveCursorUp({ select: true })],
-      ["select-down", () => this.moveCursorDown({ select: true })],
-      ["line-home", () => this.gotoLineHome()],
-      ["line-end", () => this.gotoLineEnd()],
-      ["select-line-home", () => this.gotoLineHome({ select: true })],
-      ["select-line-end", () => this.gotoLineEnd({ select: true })],
-      ["visual-line-home", () => this.gotoVisualLineHome()],
-      ["visual-line-end", () => this.gotoVisualLineEnd()],
-      ["select-visual-line-home", () => this.gotoVisualLineHome({ select: true })],
-      ["select-visual-line-end", () => this.gotoVisualLineEnd({ select: true })],
-      ["select-buffer-home", () => this.gotoBufferHome({ select: true })],
-      ["select-buffer-end", () => this.gotoBufferEnd({ select: true })],
-      ["buffer-home", () => this.gotoBufferHome()],
-      ["buffer-end", () => this.gotoBufferEnd()],
-      ["delete-line", () => this.deleteLine()],
-      ["delete-to-line-end", () => this.deleteToLineEnd()],
-      ["delete-to-line-start", () => this.deleteToLineStart()],
-      ["backspace", () => this.deleteCharBackward()],
-      ["delete", () => this.deleteChar()],
-      ["newline", () => this.newLine()],
-      ["undo", () => this.undo()],
-      ["redo", () => this.redo()],
-      ["word-forward", () => this.moveWordForward()],
-      ["word-backward", () => this.moveWordBackward()],
-      ["select-word-forward", () => this.moveWordForward({ select: true })],
-      ["select-word-backward", () => this.moveWordBackward({ select: true })],
-      ["delete-word-forward", () => this.deleteWordForward()],
-      ["delete-word-backward", () => this.deleteWordBackward()],
-      ["select-all", () => this.selectAll()],
-      ["submit", () => this.submit()],
-    ])
-  }
-
-  public handlePaste(event: PasteEvent): void {
-    this.insertText(stripAnsiSequences(decodePasteBytes(event.bytes)))
-  }
-
-  public handleKeyPress(key: KeyEvent): boolean {
-    if (this.traits.suspend !== true) {
-      const action = getKeyBindingAction(this._keyBindingsMap, key)
-
-      if (action) {
-        const handler = this._actionHandlers.get(action)
-        if (handler) {
-          return handler()
-        }
-      }
-    }
-
-    if (!key.ctrl && !key.meta && !key.super && !key.hyper) {
-      if (key.name === "space") {
-        this.insertText(" ")
-        return true
-      }
-
-      if (key.sequence) {
-        const firstCharCode = key.sequence.charCodeAt(0)
-
-        if (firstCharCode < 32) {
-          return false
-        }
-
-        if (firstCharCode === 127) {
-          return false
-        }
-
-        this.insertText(key.sequence)
-        return true
-      }
-    }
-
-    return false
-  }
-
-  private updateColors(): void {
-    const effectiveBg = this._focused ? this._focusedBackgroundColor : this._unfocusedBackgroundColor
-    const effectiveFg = this._focused ? this._focusedTextColor : this._unfocusedTextColor
-
-    super.backgroundColor = effectiveBg
-    super.textColor = effectiveFg
-  }
-
-  public focus(): void {
-    super.focus()
-    this.updateColors()
-  }
-
-  public blur(): void {
-    super.blur()
-    if (!this.isDestroyed) {
-      this.updateColors()
-    }
-  }
-
-  get placeholder(): StyledText | string | null {
-    return this._placeholder
-  }
-
-  set placeholder(value: StyledText | string | null | undefined) {
-    const normalizedValue = value ?? null
-    if (this._placeholder !== normalizedValue) {
-      this._placeholder = normalizedValue
-      this.applyPlaceholder(normalizedValue)
-      this.requestRender()
-    }
-  }
-
-  get placeholderColor(): RGBA {
-    return this._placeholderColor
-  }
-
-  set placeholderColor(value: ColorInput) {
-    const newColor = parseColor(value ?? TextareaRenderable.defaults.placeholderColor)
-    if (this._placeholderColor !== newColor) {
-      this._placeholderColor = newColor
-      this.applyPlaceholder(this._placeholder)
-      this.requestRender()
-    }
-  }
-
-  override get backgroundColor(): RGBA {
-    return this._unfocusedBackgroundColor
-  }
-
-  override set backgroundColor(value: RGBA | string | undefined) {
-    const newColor = parseColor(value ?? TextareaRenderable.defaults.backgroundColor)
-    if (this._unfocusedBackgroundColor !== newColor) {
-      this._unfocusedBackgroundColor = newColor
-      this.updateColors()
-    }
-  }
-
-  override get textColor(): RGBA {
-    return this._unfocusedTextColor
-  }
-
-  override set textColor(value: RGBA | string | undefined) {
-    const newColor = parseColor(value ?? TextareaRenderable.defaults.textColor)
-    if (this._unfocusedTextColor !== newColor) {
-      this._unfocusedTextColor = newColor
-      this.updateColors()
-    }
-  }
-
-  set focusedBackgroundColor(value: ColorInput) {
-    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedBackgroundColor)
-    if (this._focusedBackgroundColor !== newColor) {
-      this._focusedBackgroundColor = newColor
-      this.updateColors()
-    }
-  }
-
-  set focusedTextColor(value: ColorInput) {
-    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedTextColor)
-    if (this._focusedTextColor !== newColor) {
-      this._focusedTextColor = newColor
-      this.updateColors()
-    }
-  }
-
-  set initialValue(value: string) {
-    if (!this._initialValueSet) {
-      this.setText(value)
-      this._initialValueSet = true
-    }
-  }
-
-  public submit(): boolean {
-    if (this._submitListener) {
-      this._submitListener({})
-    }
-    return true
-  }
-
-  public set onSubmit(handler: ((event: SubmitEvent) => void) | undefined) {
-    this._submitListener = handler
-  }
-
-  public get onSubmit(): ((event: SubmitEvent) => void) | undefined {
-    return this._submitListener
-  }
-
-  public set keyBindings(bindings: KeyBinding[]) {
-    this._keyBindings = bindings
-    const mergedBindings = mergeKeyBindings(defaultTextareaKeyBindings, bindings)
-    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
-  }
-
-  public set keyAliasMap(aliases: TextareaKeyAliasMap) {
-    this._keyAliasMap = mergeKeyAliases(defaultKeyAliases, aliases)
-    const mergedBindings = mergeKeyBindings(defaultTextareaKeyBindings, this._keyBindings)
-    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings, this._keyAliasMap)
-  }
-
-  public get extmarks(): ExtmarksController {
-    return this.editorView.extmarks
-  }
-}

package/src/renderables/TimeToFirstDraw.ts

@@ -1,89 +0,0 @@
-import type { OptimizedBuffer } from "../buffer.js"
-import { parseColor, RGBA, type ColorInput } from "../lib/RGBA.js"
-import { Renderable, type RenderableOptions } from "../Renderable.js"
-import type { RenderContext } from "../types.js"
-
-export interface TimeToFirstDrawOptions extends RenderableOptions<TimeToFirstDrawRenderable> {
-  fg?: ColorInput
-  label?: string
-  precision?: number
-}
-
-export class TimeToFirstDrawRenderable extends Renderable {
-  private _runtimeMs: number | null = null
-  private textColor: RGBA
-  private label: string
-  private precision: number
-
-  constructor(ctx: RenderContext, options: TimeToFirstDrawOptions = {}) {
-    super(ctx, {
-      width: "100%",
-      height: 1,
-      flexShrink: 0,
-      alignSelf: "center",
-      ...options,
-    })
-
-    this.textColor = parseColor(options.fg ?? "#AAAAAA")
-    this.label = options.label ?? "Time to first draw"
-    this.precision = this.normalizePrecision(options.precision ?? 2)
-  }
-
-  public get runtimeMs(): number | null {
-    return this._runtimeMs
-  }
-
-  public set fg(value: ColorInput) {
-    this.textColor = parseColor(value)
-    this.requestRender()
-  }
-
-  public set color(value: ColorInput) {
-    this.fg = value
-  }
-
-  public set textLabel(value: string) {
-    if (value === this.label) {
-      return
-    }
-
-    this.label = value
-    this.requestRender()
-  }
-
-  public set decimals(value: number) {
-    const nextPrecision = this.normalizePrecision(value)
-    if (nextPrecision === this.precision) {
-      return
-    }
-
-    this.precision = nextPrecision
-    this.requestRender()
-  }
-
-  public reset(): void {
-    this._runtimeMs = null
-    this.requestRender()
-  }
-
-  protected override renderSelf(buffer: OptimizedBuffer): void {
-    if (this._runtimeMs === null) {
-      this._runtimeMs = performance.now()
-    }
-
-    const content = `${this.label}: ${this._runtimeMs.toFixed(this.precision)}ms`
-    const maxWidth = Math.max(this.width, 1)
-    const visibleContent = content.length > maxWidth ? content.slice(0, maxWidth) : content
-    const centeredX = this.x + Math.max(0, Math.floor((maxWidth - visibleContent.length) / 2))
-
-    buffer.drawText(visibleContent, centeredX, this.y, this.textColor)
-  }
-
-  private normalizePrecision(value: number): number {
-    if (!Number.isFinite(value)) {
-      return 2
-    }
-
-    return Math.max(0, Math.floor(value))
-  }
-}

package/src/renderables/__snapshots__/Code.test.ts.snap

@@ -1,13 +0,0 @@
-// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
-
-exports[`CodeRenderable - text renders immediately before highlighting completes: text visible before highlighting completes 1`] = `
-"const message = 'hello world';  
-                                
-"
-`;
-
-exports[`CodeRenderable - text renders immediately before highlighting completes: text visible after highlighting completes 1`] = `
-"const message = 'hello world';  
-                                
-"
-`;