@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/EditBufferRenderable.ts

@@ -1,1152 +0,0 @@
-import { Renderable, type RenderableOptions } from "../Renderable.js"
-import { convertGlobalToLocalSelection, Selection, type LocalSelectionBounds } from "../lib/selection.js"
-import { EditBuffer, type LogicalCursor } from "../edit-buffer.js"
-import { EditorView, type VisualCursor } from "../editor-view.js"
-import { RGBA, parseColor } from "../lib/RGBA.js"
-import type { RenderContext, Highlight, CursorStyleOptions, LineInfoProvider, LineInfo } from "../types.js"
-import type { OptimizedBuffer } from "../buffer.js"
-import type { SyntaxStyle } from "../syntax-style.js"
-import { NativeMeasureTargetKind, resolveRenderLib, type NativeRenderableHandle } from "../zig.js"
-
-const BrandedEditBufferRenderable: unique symbol = Symbol.for("@opentui/core/EditBufferRenderable")
-
-export type EditorCapture = "escape" | "navigate" | "submit" | "tab"
-
-export interface EditorTraits {
-  capture?: readonly EditorCapture[]
-  suspend?: boolean
-  status?: string
-}
-
-export enum EditBufferRenderableEvents {
-  TRAITS_CHANGED = "traits-changed",
-}
-
-function sameCapture(a?: readonly EditorCapture[], b?: readonly EditorCapture[]) {
-  if (a === b) return true
-  if (!a || !b) return !a && !b
-  if (a.length !== b.length) return false
-  return a.every((item, i) => item === b[i])
-}
-
-function sameTraits(a: EditorTraits, b: EditorTraits) {
-  return a.suspend === b.suspend && a.status === b.status && sameCapture(a.capture, b.capture)
-}
-
-export function isEditBufferRenderable(obj: unknown): obj is EditBufferRenderable {
-  return !!(obj && typeof obj === "object" && BrandedEditBufferRenderable in obj)
-}
-
-export interface CursorChangeEvent {
-  line: number
-  visualColumn: number
-}
-
-export interface ContentChangeEvent {
-  // No payload - use getText() to retrieve content if needed
-}
-
-export interface EditBufferOptions extends RenderableOptions<EditBufferRenderable> {
-  textColor?: string | RGBA
-  backgroundColor?: string | RGBA
-  selectionBg?: string | RGBA
-  selectionFg?: string | RGBA
-  selectable?: boolean
-  attributes?: number
-  wrapMode?: "none" | "char" | "word"
-  scrollMargin?: number
-  scrollSpeed?: number
-  showCursor?: boolean
-  cursorColor?: string | RGBA
-  cursorStyle?: CursorStyleOptions
-  syntaxStyle?: SyntaxStyle
-  tabIndicator?: string | number
-  tabIndicatorColor?: string | RGBA
-  onCursorChange?: (event: CursorChangeEvent) => void
-  onContentChange?: (event: ContentChangeEvent) => void
-}
-
-export abstract class EditBufferRenderable extends Renderable implements LineInfoProvider {
-  [BrandedEditBufferRenderable] = true
-  protected _focusable: boolean = true
-  public selectable: boolean = true
-  private _traits: EditorTraits = {}
-
-  protected _textColor: RGBA
-  protected _backgroundColor: RGBA
-  protected _defaultAttributes: number
-  protected _selectionBg: RGBA | undefined
-  protected _selectionFg: RGBA | undefined
-  protected _wrapMode: "none" | "char" | "word" = "word"
-  protected _scrollMargin: number = 0.2
-  protected _showCursor: boolean = true
-  protected _cursorColor: RGBA
-  protected _cursorStyle: CursorStyleOptions
-  protected lastLocalSelection: LocalSelectionBounds | null = null
-  protected _tabIndicator?: string | number
-  protected _tabIndicatorColor?: RGBA
-
-  private _cursorChangeListener: ((event: CursorChangeEvent) => void) | undefined = undefined
-  private _contentChangeListener: ((event: ContentChangeEvent) => void) | undefined = undefined
-
-  private _autoScrollVelocity: number = 0
-  private _autoScrollAccumulator: number = 0
-  private _scrollSpeed: number = 16
-  private _keyboardSelectionActive: boolean = false
-
-  public readonly editBuffer: EditBuffer
-  public readonly editorView: EditorView
-  private nativeRenderable: NativeRenderableHandle | null = null
-
-  protected _defaultOptions = {
-    textColor: RGBA.fromValues(1, 1, 1, 1),
-    backgroundColor: "transparent",
-    selectionBg: undefined,
-    selectionFg: undefined,
-    selectable: true,
-    attributes: 0,
-    wrapMode: "word" as "none" | "char" | "word",
-    scrollMargin: 0.2,
-    scrollSpeed: 16,
-    showCursor: true,
-    cursorColor: RGBA.fromValues(1, 1, 1, 1),
-    cursorStyle: {
-      style: "block",
-      blinking: true,
-    },
-    tabIndicator: undefined,
-    tabIndicatorColor: undefined,
-  } satisfies Partial<EditBufferOptions>
-
-  constructor(ctx: RenderContext, options: EditBufferOptions) {
-    super(ctx, options)
-
-    this._textColor = parseColor(options.textColor ?? this._defaultOptions.textColor)
-    this._backgroundColor = parseColor(options.backgroundColor ?? this._defaultOptions.backgroundColor)
-    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes
-    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : this._defaultOptions.selectionBg
-    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : this._defaultOptions.selectionFg
-    this.selectable = options.selectable ?? this._defaultOptions.selectable
-    this._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode
-    this._scrollMargin = options.scrollMargin ?? this._defaultOptions.scrollMargin
-    this._scrollSpeed = options.scrollSpeed ?? this._defaultOptions.scrollSpeed
-    this._showCursor = options.showCursor ?? this._defaultOptions.showCursor
-    this._cursorColor = parseColor(options.cursorColor ?? this._defaultOptions.cursorColor)
-    this._cursorStyle = options.cursorStyle ?? this._defaultOptions.cursorStyle
-    this._tabIndicator = options.tabIndicator ?? this._defaultOptions.tabIndicator
-    this._tabIndicatorColor = options.tabIndicatorColor
-      ? parseColor(options.tabIndicatorColor)
-      : this._defaultOptions.tabIndicatorColor
-
-    this.editBuffer = EditBuffer.create(this._ctx.widthMethod)
-    this.editorView = EditorView.create(this.editBuffer, this.width || 80, this.height || 24)
-
-    this.editorView.setWrapMode(this._wrapMode)
-    this.editorView.setScrollMargin(this._scrollMargin)
-
-    this.editBuffer.setDefaultFg(this._textColor)
-    this.editBuffer.setDefaultBg(this._backgroundColor)
-    this.editBuffer.setDefaultAttributes(this._defaultAttributes)
-
-    if (options.syntaxStyle) {
-      this.editBuffer.setSyntaxStyle(options.syntaxStyle)
-    }
-
-    if (this._tabIndicator !== undefined) {
-      this.editorView.setTabIndicator(this._tabIndicator)
-    }
-    if (this._tabIndicatorColor !== undefined) {
-      this.editorView.setTabIndicatorColor(this._tabIndicatorColor)
-    }
-
-    this.setupNativeRenderable()
-    this.setupEventListeners(options)
-  }
-
-  public get lineInfo(): LineInfo {
-    return this.editorView.getLogicalLineInfo()
-  }
-
-  private setupEventListeners(options: EditBufferOptions): void {
-    this._cursorChangeListener = options.onCursorChange
-    this._contentChangeListener = options.onContentChange
-
-    this.editBuffer.on("cursor-changed", () => {
-      if (this._cursorChangeListener) {
-        const cursor = this.editBuffer.getCursorPosition()
-        this._cursorChangeListener({
-          line: cursor.row,
-          visualColumn: cursor.col,
-        })
-      }
-    })
-
-    this.editBuffer.on("content-changed", () => {
-      this.yogaNode.markDirty()
-      this.requestRender()
-      this.emit("line-info-change")
-      if (this._contentChangeListener) {
-        this._contentChangeListener({})
-      }
-    })
-  }
-
-  public get lineCount(): number {
-    return this.editBuffer.getLineCount()
-  }
-
-  public get virtualLineCount(): number {
-    return this.editorView.getVirtualLineCount()
-  }
-
-  public get scrollY(): number {
-    return this.editorView.getViewport().offsetY
-  }
-
-  get plainText(): string {
-    return this.editBuffer.getText()
-  }
-
-  get logicalCursor(): LogicalCursor {
-    return this.editBuffer.getCursorPosition()
-  }
-
-  get visualCursor(): VisualCursor {
-    return this.editorView.getVisualCursor()
-  }
-
-  get cursorOffset(): number {
-    return this.editorView.getVisualCursor().offset
-  }
-
-  set cursorOffset(offset: number) {
-    this.editorView.setCursorByOffset(offset)
-    this.requestRender()
-  }
-
-  get cursorCharacterOffset(): number | undefined {
-    const len = this.plainText.length
-    if (len <= 0) return
-
-    const cursor = this.logicalCursor
-    const offset = this.cursorOffset
-    if (offset >= len) {
-      if (cursor.col > 0) return len - 1
-      return 0
-    }
-
-    if (this.plainText[offset] === "\n" && cursor.col > 0) {
-      return offset - 1
-    }
-
-    return offset
-  }
-
-  get textColor(): RGBA {
-    return this._textColor
-  }
-
-  set textColor(value: RGBA | string | undefined) {
-    const newColor = parseColor(value ?? this._defaultOptions.textColor)
-    if (this._textColor !== newColor) {
-      this._textColor = newColor
-      this.editBuffer.setDefaultFg(newColor)
-      this.requestRender()
-    }
-  }
-
-  get selectionBg(): RGBA | undefined {
-    return this._selectionBg
-  }
-
-  get traits(): EditorTraits {
-    return this._traits
-  }
-
-  set traits(value: EditorTraits) {
-    if (sameTraits(this._traits, value)) return
-    const prev = this._traits
-    this._traits = value
-    this.emit(EditBufferRenderableEvents.TRAITS_CHANGED, value, prev)
-  }
-
-  set selectionBg(value: RGBA | string | undefined) {
-    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg
-    if (this._selectionBg !== newColor) {
-      this._selectionBg = newColor
-      this.refreshSelectionStyle()
-      this.requestRender()
-    }
-  }
-
-  get selectionFg(): RGBA | undefined {
-    return this._selectionFg
-  }
-
-  set selectionFg(value: RGBA | string | undefined) {
-    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg
-    if (this._selectionFg !== newColor) {
-      this._selectionFg = newColor
-      this.refreshSelectionStyle()
-      this.requestRender()
-    }
-  }
-
-  get backgroundColor(): RGBA {
-    return this._backgroundColor
-  }
-
-  set backgroundColor(value: RGBA | string | undefined) {
-    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor)
-    if (this._backgroundColor !== newColor) {
-      this._backgroundColor = newColor
-      this.editBuffer.setDefaultBg(newColor)
-      this.requestRender()
-    }
-  }
-
-  get attributes(): number {
-    return this._defaultAttributes
-  }
-
-  set attributes(value: number) {
-    if (this._defaultAttributes !== value) {
-      this._defaultAttributes = value
-      this.editBuffer.setDefaultAttributes(value)
-      this.requestRender()
-    }
-  }
-
-  get wrapMode(): "none" | "char" | "word" {
-    return this._wrapMode
-  }
-
-  set wrapMode(value: "none" | "char" | "word") {
-    if (this._wrapMode !== value) {
-      this._wrapMode = value
-      this.editorView.setWrapMode(value)
-      this.yogaNode.markDirty()
-      this.requestRender()
-    }
-  }
-
-  get showCursor(): boolean {
-    return this._showCursor
-  }
-
-  set showCursor(value: boolean) {
-    if (this._showCursor !== value) {
-      this._showCursor = value
-      if (!value && this._focused) {
-        this._ctx.setCursorPosition(0, 0, false)
-      }
-      this.requestRender()
-    }
-  }
-
-  get cursorColor(): RGBA {
-    return this._cursorColor
-  }
-
-  set cursorColor(value: RGBA | string) {
-    const newColor = parseColor(value)
-    if (this._cursorColor !== newColor) {
-      this._cursorColor = newColor
-      if (this._focused) {
-        this.requestRender()
-      }
-    }
-  }
-
-  get cursorStyle(): CursorStyleOptions {
-    return this._cursorStyle
-  }
-
-  set cursorStyle(style: CursorStyleOptions) {
-    const newStyle = style
-    if (this.cursorStyle.style !== newStyle.style || this.cursorStyle.blinking !== newStyle.blinking) {
-      this._cursorStyle = newStyle
-      if (this._focused) {
-        this.requestRender()
-      }
-    }
-  }
-
-  get tabIndicator(): string | number | undefined {
-    return this._tabIndicator
-  }
-
-  set tabIndicator(value: string | number | undefined) {
-    if (this._tabIndicator !== value) {
-      this._tabIndicator = value
-      if (value !== undefined) {
-        this.editorView.setTabIndicator(value)
-      }
-      this.requestRender()
-    }
-  }
-
-  get tabIndicatorColor(): RGBA | undefined {
-    return this._tabIndicatorColor
-  }
-
-  set tabIndicatorColor(value: RGBA | string | undefined) {
-    const newColor = value ? parseColor(value) : undefined
-    if (this._tabIndicatorColor !== newColor) {
-      this._tabIndicatorColor = newColor
-      if (newColor !== undefined) {
-        this.editorView.setTabIndicatorColor(newColor)
-      }
-      this.requestRender()
-    }
-  }
-
-  get scrollSpeed(): number {
-    return this._scrollSpeed
-  }
-
-  set scrollSpeed(value: number) {
-    this._scrollSpeed = Math.max(0, value)
-  }
-
-  protected override onMouseEvent(event: any): void {
-    if (event.type === "scroll") {
-      this.handleScroll(event)
-    }
-  }
-
-  protected handleScroll(event: any): void {
-    if (!event.scroll) return
-
-    const { direction, delta } = event.scroll
-    const viewport = this.editorView.getViewport()
-
-    if (direction === "up") {
-      const newOffsetY = Math.max(0, viewport.offsetY - delta)
-      this.editorView.setViewport(viewport.offsetX, newOffsetY, viewport.width, viewport.height, true)
-      this.requestRender()
-    } else if (direction === "down") {
-      const totalVirtualLines = this.editorView.getTotalVirtualLineCount()
-      const maxOffsetY = Math.max(0, totalVirtualLines - viewport.height)
-      const newOffsetY = Math.min(viewport.offsetY + delta, maxOffsetY)
-      this.editorView.setViewport(viewport.offsetX, newOffsetY, viewport.width, viewport.height, true)
-      this.requestRender()
-    }
-
-    if (this._wrapMode === "none") {
-      if (direction === "left") {
-        const newOffsetX = Math.max(0, viewport.offsetX - delta)
-        this.editorView.setViewport(newOffsetX, viewport.offsetY, viewport.width, viewport.height, true)
-        this.requestRender()
-      } else if (direction === "right") {
-        const newOffsetX = viewport.offsetX + delta
-        this.editorView.setViewport(newOffsetX, viewport.offsetY, viewport.width, viewport.height, true)
-        this.requestRender()
-      }
-    }
-  }
-
-  protected onResize(width: number, height: number): void {
-    this.editorView.setViewportSize(width, height)
-  }
-
-  protected refreshLocalSelection(): boolean {
-    if (this.lastLocalSelection) {
-      return this.updateLocalSelection(this.lastLocalSelection)
-    }
-    return false
-  }
-
-  private updateLocalSelection(localSelection: LocalSelectionBounds | null): boolean {
-    if (!localSelection?.isActive) {
-      this.editorView.resetLocalSelection()
-      return true
-    }
-    return this.editorView.setLocalSelection(
-      localSelection.anchorX,
-      localSelection.anchorY,
-      localSelection.focusX,
-      localSelection.focusY,
-      this._selectionBg,
-      this._selectionFg,
-      false,
-    )
-  }
-
-  shouldStartSelection(x: number, y: number): boolean {
-    if (!this.selectable) return false
-
-    const localX = x - this.x
-    const localY = y - this.y
-
-    return localX >= 0 && localX < this.width && localY >= 0 && localY < this.height
-  }
-
-  onSelectionChanged(selection: Selection | null): boolean {
-    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y)
-    this.lastLocalSelection = localSelection
-
-    const updateCursor = true
-    const followCursor = this._keyboardSelectionActive
-
-    let changed: boolean
-    if (!localSelection?.isActive) {
-      this._keyboardSelectionActive = false
-      this.editorView.resetLocalSelection()
-      changed = true
-    } else if (selection?.isStart) {
-      changed = this.editorView.setLocalSelection(
-        localSelection.anchorX,
-        localSelection.anchorY,
-        localSelection.focusX,
-        localSelection.focusY,
-        this._selectionBg,
-        this._selectionFg,
-        updateCursor,
-        followCursor,
-      )
-    } else {
-      changed = this.editorView.updateLocalSelection(
-        localSelection.anchorX,
-        localSelection.anchorY,
-        localSelection.focusX,
-        localSelection.focusY,
-        this._selectionBg,
-        this._selectionFg,
-        updateCursor,
-        followCursor,
-      )
-    }
-
-    if (changed && localSelection?.isActive && selection?.isDragging) {
-      const viewport = this.editorView.getViewport()
-      const focusY = localSelection.focusY
-      const scrollMargin = Math.max(1, Math.floor(viewport.height * this._scrollMargin))
-
-      if (focusY < scrollMargin) {
-        this._autoScrollVelocity = -this._scrollSpeed
-      } else if (focusY >= viewport.height - scrollMargin) {
-        this._autoScrollVelocity = this._scrollSpeed
-      } else {
-        this._autoScrollVelocity = 0
-      }
-    } else {
-      this._keyboardSelectionActive = false
-      this._autoScrollVelocity = 0
-      this._autoScrollAccumulator = 0
-    }
-
-    if (changed) {
-      this.requestRender()
-    }
-
-    return this.hasSelection()
-  }
-
-  protected override onUpdate(deltaTime: number): void {
-    super.onUpdate(deltaTime)
-
-    if (this._autoScrollVelocity !== 0 && this.hasSelection()) {
-      const deltaSeconds = deltaTime / 1000
-      this._autoScrollAccumulator += this._autoScrollVelocity * deltaSeconds
-
-      const linesToScroll = Math.floor(Math.abs(this._autoScrollAccumulator))
-      if (linesToScroll > 0) {
-        const direction = this._autoScrollVelocity > 0 ? 1 : -1
-        const viewport = this.editorView.getViewport()
-        const totalVirtualLines = this.editorView.getTotalVirtualLineCount()
-        const maxOffsetY = Math.max(0, totalVirtualLines - viewport.height)
-        const newOffsetY = Math.max(0, Math.min(viewport.offsetY + direction * linesToScroll, maxOffsetY))
-
-        if (newOffsetY !== viewport.offsetY) {
-          this.editorView.setViewport(viewport.offsetX, newOffsetY, viewport.width, viewport.height, false)
-
-          this._ctx.requestSelectionUpdate()
-        }
-
-        this._autoScrollAccumulator -= direction * linesToScroll
-      }
-    }
-  }
-
-  getSelectedText(): string {
-    return this.editorView.getSelectedText()
-  }
-
-  hasSelection(): boolean {
-    return this.editorView.hasSelection()
-  }
-
-  getSelection(): { start: number; end: number } | null {
-    return this.editorView.getSelection()
-  }
-
-  private refreshSelectionStyle(): void {
-    if (this.lastLocalSelection) {
-      this.updateLocalSelection(this.lastLocalSelection)
-      return
-    }
-
-    const selection = this.getSelection()
-    if (!selection) return
-    this.editorView.setSelection(selection.start, selection.end, this._selectionBg, this._selectionFg)
-  }
-
-  private deleteSelectedText(): void {
-    this.editorView.deleteSelectedText()
-    this._ctx.clearSelection()
-    this.requestRender()
-  }
-
-  setSelection(start: number, end: number): void {
-    this.lastLocalSelection = null
-    this.editorView.resetLocalSelection()
-    this._ctx.clearSelection()
-    this.editorView.setSelection(start, end, this._selectionBg, this._selectionFg)
-    this.requestRender()
-  }
-
-  setSelectionInclusive(start: number, end: number): void {
-    this.setSelection(Math.min(start, end), Math.max(start, end) + 1)
-  }
-
-  clearSelection(): boolean {
-    const had = this.hasSelection()
-    this.lastLocalSelection = null
-    this.editorView.resetSelection()
-    this.editorView.resetLocalSelection()
-    this._ctx.clearSelection()
-    if (had) {
-      this.requestRender()
-    }
-    return had
-  }
-
-  deleteSelection(): boolean {
-    if (!this.hasSelection()) return false
-
-    this.lastLocalSelection = null
-    this.deleteSelectedText()
-    return true
-  }
-
-  setCursor(row: number, col: number): void {
-    this.editBuffer.setCursor(row, col)
-    this.requestRender()
-  }
-
-  public insertChar(char: string): void {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-    }
-
-    this.editBuffer.insertChar(char)
-    this.requestRender()
-  }
-
-  public insertText(text: string): void {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-    }
-
-    this.editBuffer.insertText(text)
-    this.requestRender()
-  }
-
-  public deleteChar(): boolean {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-      return true
-    }
-
-    this._ctx.clearSelection()
-    this.editBuffer.deleteChar()
-    this.requestRender()
-    return true
-  }
-
-  public deleteCharBackward(): boolean {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-      return true
-    }
-
-    this._ctx.clearSelection()
-    this.editBuffer.deleteCharBackward()
-    this.requestRender()
-    return true
-  }
-
-  public newLine(): boolean {
-    this._ctx.clearSelection()
-    this.editBuffer.newLine()
-    this.requestRender()
-    return true
-  }
-
-  public deleteLine(): boolean {
-    this._ctx.clearSelection()
-    this.editBuffer.deleteLine()
-    this.requestRender()
-    return true
-  }
-
-  public moveCursorLeft(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-
-    if (!select && this.hasSelection()) {
-      const selection = this.getSelection()!
-      this.editBuffer.setCursorByOffset(selection.start)
-      this._ctx.clearSelection()
-      this.requestRender()
-      return true
-    }
-
-    this.updateSelectionForMovement(select, true)
-    this.editBuffer.moveCursorLeft()
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public moveCursorRight(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-
-    if (!select && this.hasSelection()) {
-      const selection = this.getSelection()!
-      const targetOffset = this.cursorOffset === selection.start ? selection.end - 1 : selection.end
-      this.editBuffer.setCursorByOffset(targetOffset)
-      this._ctx.clearSelection()
-      this.requestRender()
-      return true
-    }
-
-    this.updateSelectionForMovement(select, true)
-    this.editBuffer.moveCursorRight()
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public moveCursorUp(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    this.editorView.moveUpVisual()
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public moveCursorDown(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    this.editorView.moveDownVisual()
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoLine(line: number): void {
-    this.editBuffer.gotoLine(line)
-    this.requestRender()
-  }
-
-  public gotoLineStart(): void {
-    this.setCursor(this.logicalCursor.row, 0)
-  }
-
-  public gotoLineTextEnd(): void {
-    const eol = this.editBuffer.getEOL()
-    this.setCursor(eol.row, eol.col)
-  }
-
-  public gotoLineHome(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const cursor = this.editorView.getCursor()
-    if (cursor.col === 0 && cursor.row > 0) {
-      this.editBuffer.setCursor(cursor.row - 1, 0)
-      const prevLineEol = this.editBuffer.getEOL()
-      this.editBuffer.setCursor(prevLineEol.row, prevLineEol.col)
-    } else {
-      this.editBuffer.setCursor(cursor.row, 0)
-    }
-
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoLineEnd(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const cursor = this.editorView.getCursor()
-    const eol = this.editBuffer.getEOL()
-    const lineCount = this.editBuffer.getLineCount()
-    if (cursor.col === eol.col && cursor.row < lineCount - 1) {
-      this.editBuffer.setCursor(cursor.row + 1, 0)
-    } else {
-      this.editBuffer.setCursor(eol.row, eol.col)
-    }
-
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoVisualLineHome(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const sol = this.editorView.getVisualSOL()
-    this.editBuffer.setCursor(sol.logicalRow, sol.logicalCol)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoVisualLineEnd(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const eol = this.editorView.getVisualEOL()
-    this.editBuffer.setCursor(eol.logicalRow, eol.logicalCol)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoBufferHome(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    this.editBuffer.setCursor(0, 0)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public gotoBufferEnd(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    this.editBuffer.gotoLine(999999)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public selectAll(): boolean {
-    this.updateSelectionForMovement(false, true)
-    this.editBuffer.setCursor(0, 0)
-    return this.gotoBufferEnd({ select: true })
-  }
-
-  public deleteToLineEnd(): boolean {
-    const cursor = this.editorView.getCursor()
-    const eol = this.editBuffer.getEOL()
-
-    if (eol.col > cursor.col) {
-      this.editBuffer.deleteRange(cursor.row, cursor.col, eol.row, eol.col)
-    }
-
-    this.requestRender()
-    return true
-  }
-
-  public deleteToLineStart(): boolean {
-    const cursor = this.editorView.getCursor()
-
-    if (cursor.col > 0) {
-      this.editBuffer.deleteRange(cursor.row, 0, cursor.row, cursor.col)
-    } else if (cursor.row > 0) {
-      this.editBuffer.deleteCharBackward()
-    }
-
-    this.requestRender()
-    return true
-  }
-
-  public undo(): boolean {
-    this._ctx.clearSelection()
-    this.editBuffer.undo()
-    this.requestRender()
-    return true
-  }
-
-  public redo(): boolean {
-    this._ctx.clearSelection()
-    this.editBuffer.redo()
-    this.requestRender()
-    return true
-  }
-
-  public moveWordForward(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const nextWord = this.editBuffer.getNextWordBoundary()
-    this.editBuffer.setCursorByOffset(nextWord.offset)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public moveWordBackward(options?: { select?: boolean }): boolean {
-    const select = options?.select ?? false
-    this.updateSelectionForMovement(select, true)
-    const prevWord = this.editBuffer.getPrevWordBoundary()
-    this.editBuffer.setCursorByOffset(prevWord.offset)
-    this.updateSelectionForMovement(select, false)
-    this.requestRender()
-    return true
-  }
-
-  public deleteWordForward(): boolean {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-      return true
-    }
-
-    const currentCursor = this.editBuffer.getCursorPosition()
-    const nextWord = this.editBuffer.getNextWordBoundary()
-
-    if (nextWord.offset > currentCursor.offset) {
-      this.editBuffer.deleteRange(currentCursor.row, currentCursor.col, nextWord.row, nextWord.col)
-    }
-
-    this._ctx.clearSelection()
-    this.requestRender()
-    return true
-  }
-
-  public deleteWordBackward(): boolean {
-    if (this.hasSelection()) {
-      this.deleteSelectedText()
-      return true
-    }
-
-    const currentCursor = this.editBuffer.getCursorPosition()
-    const prevWord = this.editBuffer.getPrevWordBoundary()
-
-    if (prevWord.offset < currentCursor.offset) {
-      this.editBuffer.deleteRange(prevWord.row, prevWord.col, currentCursor.row, currentCursor.col)
-    }
-
-    this._ctx.clearSelection()
-    this.requestRender()
-    return true
-  }
-
-  private setupNativeRenderable(): void {
-    const lib = resolveRenderLib()
-    // Transitional native backing: JS still owns the render tree and Yoga nodes,
-    // while native owns only hot measurement state. Attach the existing JS-created
-    // Yoga node for now. The intended direction is for every Renderable to become
-    // native-backed and for Yoga node ownership to move native-side with it.
-    const nativeRenderable = lib.createNativeRenderable()
-    if (!lib.nativeRenderableAttachYogaNode(nativeRenderable, this.yogaNode.ptr)) {
-      lib.destroyNativeRenderable(nativeRenderable)
-      throw new Error("Failed to attach native renderable Yoga node")
-    }
-    if (
-      !lib.nativeRenderableSetMeasureTarget(nativeRenderable, NativeMeasureTargetKind.EditorView, this.editorView.ptr)
-    ) {
-      lib.destroyNativeRenderable(nativeRenderable)
-      throw new Error("Failed to attach editor native measure target")
-    }
-    this.nativeRenderable = nativeRenderable
-  }
-
-  render(buffer: OptimizedBuffer, deltaTime: number): void {
-    if (!this.visible) return
-    if (this.isDestroyed) return
-    // Editor rendering/cursor placement reads absolute coordinates multiple
-    // times per frame, so it benefits from the same cached screen position.
-    const screenX = this._screenX
-    const screenY = this._screenY
-
-    this.markClean()
-    this._ctx.addToHitGrid(screenX, screenY, this.width, this.height, this.num)
-
-    this.renderSelf(buffer)
-    this.renderCursor(buffer)
-  }
-
-  protected renderSelf(buffer: OptimizedBuffer): void {
-    buffer.drawEditorView(this.editorView, this._screenX, this._screenY)
-  }
-
-  protected renderCursor(buffer: OptimizedBuffer): void {
-    if (!this._showCursor || !this._focused) return
-
-    const visualCursor = this.editorView.getVisualCursor()
-    const screenX = this._screenX
-    const screenY = this._screenY
-
-    const cursorX = screenX + visualCursor.visualCol + 1 // +1 for 1-based terminal coords
-    const cursorY = screenY + visualCursor.visualRow + 1 // +1 for 1-based terminal coords
-
-    this._ctx.setCursorPosition(cursorX, cursorY, true)
-    this._ctx.setCursorStyle({ ...this._cursorStyle, color: this._cursorColor })
-  }
-
-  public focus(): void {
-    super.focus()
-    this._ctx.setCursorStyle({ ...this._cursorStyle, color: this._cursorColor })
-    this.requestRender()
-  }
-
-  public blur(): void {
-    super.blur()
-    this._ctx.setCursorPosition(0, 0, false)
-    this.requestRender()
-  }
-
-  protected onRemove(): void {
-    if (this._focused) {
-      this._ctx.setCursorPosition(0, 0, false)
-    }
-  }
-
-  override destroy(): void {
-    if (this.isDestroyed) return
-
-    this.traits = {}
-
-    if (this._focused) {
-      this._ctx.setCursorPosition(0, 0, false)
-      // Manually blur to unhook event handlers BEFORE setting destroyed flag
-      // This prevents the guard in super.destroy() from skipping blur()
-      this.blur()
-    }
-
-    // Destroy dependent resources in correct order BEFORE calling super
-    // EditorView depends on EditBuffer, so destroy it first
-    if (this.nativeRenderable) {
-      resolveRenderLib().destroyNativeRenderable(this.nativeRenderable)
-      this.nativeRenderable = null
-    }
-    this.editorView.destroy()
-    this.editBuffer.destroy()
-
-    // Finally clean up parent resources
-    // Note: super.destroy() will try to blur() again, but blur() has guards to prevent double-blur
-    super.destroy()
-  }
-
-  public set onCursorChange(handler: ((event: CursorChangeEvent) => void) | undefined) {
-    this._cursorChangeListener = handler
-  }
-
-  public get onCursorChange(): ((event: CursorChangeEvent) => void) | undefined {
-    return this._cursorChangeListener
-  }
-
-  public set onContentChange(handler: ((event: ContentChangeEvent) => void) | undefined) {
-    this._contentChangeListener = handler
-  }
-
-  public get onContentChange(): ((event: ContentChangeEvent) => void) | undefined {
-    return this._contentChangeListener
-  }
-
-  get syntaxStyle(): SyntaxStyle | null {
-    return this.editBuffer.getSyntaxStyle()
-  }
-
-  set syntaxStyle(style: SyntaxStyle | null) {
-    this.editBuffer.setSyntaxStyle(style)
-    this.requestRender()
-  }
-
-  public addHighlight(lineIdx: number, highlight: Highlight): void {
-    this.editBuffer.addHighlight(lineIdx, highlight)
-    this.requestRender()
-  }
-
-  public addHighlightByCharRange(highlight: Highlight): void {
-    this.editBuffer.addHighlightByCharRange(highlight)
-    this.requestRender()
-  }
-
-  public removeHighlightsByRef(hlRef: number): void {
-    this.editBuffer.removeHighlightsByRef(hlRef)
-    this.requestRender()
-  }
-
-  public clearLineHighlights(lineIdx: number): void {
-    this.editBuffer.clearLineHighlights(lineIdx)
-    this.requestRender()
-  }
-
-  public clearAllHighlights(): void {
-    this.editBuffer.clearAllHighlights()
-    this.requestRender()
-  }
-
-  public getLineHighlights(lineIdx: number): Array<Highlight> {
-    return this.editBuffer.getLineHighlights(lineIdx)
-  }
-
-  /**
-   * Set text and completely reset the buffer state (clears history, resets add_buffer).
-   * Use this for initial text setting or when you want a clean slate.
-   */
-  public setText(text: string): void {
-    this.editBuffer.setText(text)
-    this.yogaNode.markDirty()
-    this.requestRender()
-  }
-
-  /**
-   * Replace text while preserving undo history (creates an undo point).
-   * Use this when you want the setText operation to be undoable.
-   */
-  public replaceText(text: string): void {
-    this.editBuffer.replaceText(text)
-    this.yogaNode.markDirty()
-    this.requestRender()
-  }
-
-  public clear(): void {
-    this.editBuffer.clear()
-    this.editBuffer.clearAllHighlights()
-    this.yogaNode.markDirty()
-    this.requestRender()
-  }
-
-  public deleteRange(startLine: number, startCol: number, endLine: number, endCol: number): void {
-    this.editBuffer.deleteRange(startLine, startCol, endLine, endCol)
-    this.yogaNode.markDirty()
-    this.requestRender()
-  }
-
-  public getTextRange(startOffset: number, endOffset: number): string {
-    return this.editBuffer.getTextRange(startOffset, endOffset)
-  }
-
-  public getTextRangeByCoords(startRow: number, startCol: number, endRow: number, endCol: number): string {
-    return this.editBuffer.getTextRangeByCoords(startRow, startCol, endRow, endCol)
-  }
-
-  protected updateSelectionForMovement(shiftPressed: boolean, isBeforeMovement: boolean): void {
-    if (!this.selectable) return
-
-    if (!shiftPressed) {
-      this._keyboardSelectionActive = false
-      this._ctx.clearSelection()
-      return
-    }
-
-    this._keyboardSelectionActive = true
-
-    const visualCursor = this.editorView.getVisualCursor()
-    const cursorX = this.x + visualCursor.visualCol
-    const cursorY = this.y + visualCursor.visualRow
-
-    if (isBeforeMovement) {
-      if (!this._ctx.hasSelection) {
-        this._ctx.startSelection(this, cursorX, cursorY)
-      }
-      return
-    }
-
-    this._ctx.updateSelection(this, cursorX, cursorY, { finishDragging: true })
-  }
-}