@xincli/opentui-core 0.4.6

package/src/editor-view.ts

@@ -0,0 +1,290 @@
+import { RGBA } from "./lib/RGBA.js"
+import {
+  resolveRenderLib,
+  type EditorViewHandle,
+  type RenderLib,
+  type TextBufferViewHandle,
+  type VisualCursor,
+  type LineInfo,
+} from "./zig.js"
+import type { EditBuffer } from "./edit-buffer.js"
+import { createExtmarksController } from "./lib/index.js"
+
+export interface Viewport {
+  offsetY: number
+  offsetX: number
+  height: number
+  width: number
+}
+
+export type { VisualCursor }
+
+export class EditorView {
+  private lib: RenderLib
+  private viewPtr: EditorViewHandle
+  private editBuffer: EditBuffer
+  private _destroyed: boolean = false
+  private _extmarksController?: any
+  private _textBufferViewPtr?: TextBufferViewHandle
+
+  constructor(lib: RenderLib, ptr: EditorViewHandle, editBuffer: EditBuffer) {
+    this.lib = lib
+    this.viewPtr = ptr
+    this.editBuffer = editBuffer
+  }
+
+  static create(editBuffer: EditBuffer, viewportWidth: number, viewportHeight: number): EditorView {
+    const lib = resolveRenderLib()
+    const viewPtr = lib.createEditorView(editBuffer.ptr, viewportWidth, viewportHeight)
+    return new EditorView(lib, viewPtr, editBuffer)
+  }
+
+  private guard(): void {
+    if (this._destroyed) throw new Error("EditorView is destroyed")
+  }
+
+  public get ptr(): EditorViewHandle {
+    this.guard()
+    return this.viewPtr
+  }
+
+  public setViewportSize(width: number, height: number): void {
+    this.guard()
+    this.lib.editorViewSetViewportSize(this.viewPtr, width, height)
+  }
+
+  public setViewport(x: number, y: number, width: number, height: number, moveCursor: boolean = true): void {
+    this.guard()
+    this.lib.editorViewSetViewport(this.viewPtr, x, y, width, height, moveCursor)
+  }
+
+  public getViewport(): Viewport {
+    this.guard()
+    return this.lib.editorViewGetViewport(this.viewPtr)
+  }
+
+  public setScrollMargin(margin: number): void {
+    this.guard()
+    this.lib.editorViewSetScrollMargin(this.viewPtr, margin)
+  }
+
+  public setWrapMode(mode: "none" | "char" | "word"): void {
+    this.guard()
+    this.lib.editorViewSetWrapMode(this.viewPtr, mode)
+  }
+
+  public getVirtualLineCount(): number {
+    this.guard()
+    return this.lib.editorViewGetVirtualLineCount(this.viewPtr)
+  }
+
+  public getTotalVirtualLineCount(): number {
+    this.guard()
+    return this.lib.editorViewGetTotalVirtualLineCount(this.viewPtr)
+  }
+
+  public setSelection(start: number, end: number, bgColor?: RGBA, fgColor?: RGBA): void {
+    this.guard()
+    this.lib.editorViewSetSelection(this.viewPtr, start, end, bgColor || null, fgColor || null)
+  }
+
+  public updateSelection(end: number, bgColor?: RGBA, fgColor?: RGBA): void {
+    this.guard()
+    this.lib.editorViewUpdateSelection(this.viewPtr, end, bgColor || null, fgColor || null)
+  }
+
+  public resetSelection(): void {
+    this.guard()
+    this.lib.editorViewResetSelection(this.viewPtr)
+  }
+
+  public getSelection(): { start: number; end: number } | null {
+    this.guard()
+    return this.lib.editorViewGetSelection(this.viewPtr)
+  }
+
+  public hasSelection(): boolean {
+    this.guard()
+    return this.getSelection() !== null
+  }
+
+  public setLocalSelection(
+    anchorX: number,
+    anchorY: number,
+    focusX: number,
+    focusY: number,
+    bgColor?: RGBA,
+    fgColor?: RGBA,
+    updateCursor?: boolean,
+    followCursor?: boolean,
+  ): boolean {
+    this.guard()
+    return this.lib.editorViewSetLocalSelection(
+      this.viewPtr,
+      anchorX,
+      anchorY,
+      focusX,
+      focusY,
+      bgColor || null,
+      fgColor || null,
+      updateCursor ?? false,
+      followCursor ?? false,
+    )
+  }
+
+  public updateLocalSelection(
+    anchorX: number,
+    anchorY: number,
+    focusX: number,
+    focusY: number,
+    bgColor?: RGBA,
+    fgColor?: RGBA,
+    updateCursor?: boolean,
+    followCursor?: boolean,
+  ): boolean {
+    this.guard()
+    return this.lib.editorViewUpdateLocalSelection(
+      this.viewPtr,
+      anchorX,
+      anchorY,
+      focusX,
+      focusY,
+      bgColor || null,
+      fgColor || null,
+      updateCursor ?? false,
+      followCursor ?? false,
+    )
+  }
+
+  public resetLocalSelection(): void {
+    this.guard()
+    this.lib.editorViewResetLocalSelection(this.viewPtr)
+  }
+
+  public getSelectedText(): string {
+    this.guard()
+    // TODO: native can stack alloc all the text and decode will alloc as js string then
+    const maxLength = 1024 * 1024 // 1MB should be enough for most selections
+    const selectedBytes = this.lib.editorViewGetSelectedTextBytes(this.viewPtr, maxLength)
+
+    if (!selectedBytes) return ""
+
+    return this.lib.decoder.decode(selectedBytes)
+  }
+
+  public getCursor(): { row: number; col: number } {
+    this.guard()
+    return this.lib.editorViewGetCursor(this.viewPtr)
+  }
+
+  public getText(): string {
+    this.guard()
+    const maxLength = 1024 * 1024 // 1MB buffer
+    const textBytes = this.lib.editorViewGetText(this.viewPtr, maxLength)
+    if (!textBytes) return ""
+    return this.lib.decoder.decode(textBytes)
+  }
+
+  public getVisualCursor(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualCursor(this.viewPtr)
+  }
+
+  public moveUpVisual(): void {
+    this.guard()
+    this.lib.editorViewMoveUpVisual(this.viewPtr)
+  }
+
+  public moveDownVisual(): void {
+    this.guard()
+    this.lib.editorViewMoveDownVisual(this.viewPtr)
+  }
+
+  public deleteSelectedText(): void {
+    this.guard()
+    this.lib.editorViewDeleteSelectedText(this.viewPtr)
+  }
+
+  public setCursorByOffset(offset: number): void {
+    this.guard()
+    this.lib.editorViewSetCursorByOffset(this.viewPtr, offset)
+  }
+
+  public getNextWordBoundary(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetNextWordBoundary(this.viewPtr)
+  }
+
+  public getPrevWordBoundary(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetPrevWordBoundary(this.viewPtr)
+  }
+
+  public getEOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetEOL(this.viewPtr)
+  }
+
+  public getVisualSOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualSOL(this.viewPtr)
+  }
+
+  public getVisualEOL(): VisualCursor {
+    this.guard()
+    return this.lib.editorViewGetVisualEOL(this.viewPtr)
+  }
+
+  public getLineInfo(): LineInfo {
+    this.guard()
+    return this.lib.editorViewGetLineInfo(this.viewPtr)
+  }
+
+  public getLogicalLineInfo(): LineInfo {
+    this.guard()
+    return this.lib.editorViewGetLogicalLineInfo(this.viewPtr)
+  }
+
+  public get extmarks(): any {
+    if (!this._extmarksController) {
+      this._extmarksController = createExtmarksController(this.editBuffer, this)
+    }
+    return this._extmarksController
+  }
+
+  public setPlaceholderStyledText(chunks: { text: string; fg?: RGBA; bg?: RGBA; attributes?: number }[]): void {
+    this.guard()
+    this.lib.editorViewSetPlaceholderStyledText(this.viewPtr, chunks)
+  }
+
+  public setTabIndicator(indicator: string | number): void {
+    this.guard()
+    const codePoint = typeof indicator === "string" ? (indicator.codePointAt(0) ?? 0) : indicator
+    this.lib.editorViewSetTabIndicator(this.viewPtr, codePoint)
+  }
+
+  public setTabIndicatorColor(color: RGBA): void {
+    this.guard()
+    this.lib.editorViewSetTabIndicatorColor(this.viewPtr, color)
+  }
+
+  public measureForDimensions(width: number, height: number): { lineCount: number; widthColsMax: number } | null {
+    this.guard()
+    if (!this._textBufferViewPtr) {
+      this._textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr)
+    }
+    return this.lib.textBufferViewMeasureForDimensions(this._textBufferViewPtr, width, height)
+  }
+
+  public destroy(): void {
+    if (this._destroyed) return
+
+    if (this._extmarksController) {
+      this._extmarksController.destroy()
+      this._extmarksController = undefined
+    }
+
+    this._destroyed = true
+    this.lib.destroyEditorView(this.viewPtr)
+  }
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+// Core exports without 3D dependencies
+export * from "./Renderable.js"
+export * from "./types.js"
+export * from "./utils.js"
+export * from "./buffer.js"
+export * from "./text-buffer.js"
+export * from "./text-buffer-view.js"
+export * from "./edit-buffer.js"
+export * from "./editor-view.js"
+export * from "./syntax-style.js"
+export * from "./post/effects.js"
+export * from "./post/filters.js"
+export * from "./post/matrices.js"
+export * from "./animation/Timeline.js"
+export * from "./lib/index.js"
+export * from "./renderer.js"
+export * from "./plugins/types.js"
+export * from "./plugins/registry.js"
+export * from "./plugins/core-slot.js"
+export * from "./NativeSpanFeed.js"
+export * from "./audio.js"
+export * from "./renderables/index.js"
+export * from "./zig.js"
+export * from "./console.js"
+export * as Yoga from "./yoga.js"

package/src/lib/KeyHandler.integration.test.ts

@@ -0,0 +1,292 @@
+import { test, expect } from "bun:test"
+import { InternalKeyHandler, KeyEvent } from "./KeyHandler.js"
+import { parseKeypress } from "./parse.keypress.js"
+
+/**
+ * Integration tests demonstrating real-world scenarios with stopPropagation
+ */
+
+function createKeyHandler(): InternalKeyHandler {
+  return new InternalKeyHandler()
+}
+
+function dispatchInput(handler: InternalKeyHandler, data: string): boolean {
+  const parsedKey = parseKeypress(data)
+  if (!parsedKey) {
+    return false
+  }
+
+  return handler.processParsedKey(parsedKey)
+}
+
+test("Integration - Modal ESC handler prevents subsequent handlers", () => {
+  const handler = createKeyHandler()
+
+  let modalOpen = true
+  let modalHandledEsc = false
+  let backgroundHandledEsc = false
+
+  // Modal ESC handler (registered first, so it runs first)
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "escape" && modalOpen) {
+      modalHandledEsc = true
+      modalOpen = false
+      key.stopPropagation() // Stop other handlers from running
+    }
+  })
+
+  // Background/app-level ESC handler (registered second, should not run)
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "escape") {
+      backgroundHandledEsc = true
+    }
+  })
+
+  // Simulate ESC key press while modal is open
+  dispatchInput(handler, "\x1b")
+
+  expect(modalOpen).toBe(false)
+  expect(modalHandledEsc).toBe(true)
+  expect(backgroundHandledEsc).toBe(false) // Modal stopped propagation
+})
+
+test("Integration - Focused input field handles key, stops parent handlers", () => {
+  const handler = createKeyHandler()
+
+  const inputValue: string[] = []
+  let parentHandledKey = false
+
+  // Parent container handler
+  handler.on("keypress", (key: KeyEvent) => {
+    if (!key.propagationStopped) {
+      parentHandledKey = true
+    }
+  })
+
+  // Focused input field handler (internal/renderable)
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    if (key.name === "a" || key.name === "b" || key.name === "c") {
+      inputValue.push(key.name)
+      key.stopPropagation() // Input consumed the key
+    }
+  })
+
+  // Type some keys
+  dispatchInput(handler, "a")
+  dispatchInput(handler, "b")
+  dispatchInput(handler, "c")
+
+  expect(inputValue).toEqual(["a", "b", "c"])
+  expect(parentHandledKey).toBe(true) // Parent ran first (global priority)
+
+  // But internal handler got to consume the keys and stop propagation
+  // doesn't prevent parent from seeing them first (global runs before internal)
+})
+
+test("Integration - Dialog system with priority: innermost modal wins", () => {
+  const handler = createKeyHandler()
+
+  let outerModalClosed = false
+  let innerModalClosed = false
+  const closeLog: string[] = []
+
+  // Outer modal ESC handler
+  const outerHandler = (key: KeyEvent) => {
+    if (key.name === "escape" && !key.propagationStopped) {
+      closeLog.push("outer")
+      outerModalClosed = true
+      key.stopPropagation()
+    }
+  }
+
+  // Inner modal ESC handler (registered later, so it comes first in listener order)
+  const innerHandler = (key: KeyEvent) => {
+    if (key.name === "escape") {
+      closeLog.push("inner")
+      innerModalClosed = true
+      key.stopPropagation()
+    }
+  }
+
+  // Register outer first
+  handler.on("keypress", outerHandler)
+
+  // Then inner (but we want inner to handle first)
+  // In a real app, we'd use prependInputHandler or similar
+  // For now, let's simulate by removing outer and re-adding in correct order
+  handler.removeListener("keypress", outerHandler)
+  handler.on("keypress", innerHandler)
+  handler.on("keypress", outerHandler)
+
+  // Press ESC
+  dispatchInput(handler, "\x1b")
+
+  expect(closeLog).toEqual(["inner"])
+  expect(innerModalClosed).toBe(true)
+  expect(outerModalClosed).toBe(false) // Inner stopped propagation
+})
+
+test("Integration - Keyboard shortcut system with priorities", () => {
+  const handler = createKeyHandler()
+
+  const actions: string[] = []
+
+  // Global shortcuts (Ctrl+S = Save, Ctrl+O = Open)
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.ctrl && key.name === "s") {
+      actions.push("save")
+      // Don't stop propagation - allow other handlers to see it
+    }
+    if (key.ctrl && key.name === "o") {
+      actions.push("open")
+    }
+  })
+
+  // Text editor overrides Ctrl+S when focused
+  let editorFocused = true
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    if (editorFocused && key.ctrl && key.name === "s") {
+      actions.push("save-document")
+      key.stopPropagation() // Override global save
+    }
+  })
+
+  // Ctrl+S with editor focused
+  dispatchInput(handler, "\x13") // Ctrl+S
+
+  expect(actions).toEqual(["save", "save-document"])
+  // Note: global runs first, then internal. To truly override,
+  // the editor would need to be a global handler registered first
+})
+
+test("Integration - preventDefault vs stopPropagation behavior", () => {
+  const handler = createKeyHandler()
+
+  const log: string[] = []
+
+  // Handler 1: preventDefault only
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "a") {
+      log.push("handler1-saw-a")
+      key.preventDefault()
+    }
+  })
+
+  // Handler 2: Should still run (preventDefault doesn't stop global handlers)
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "a") {
+      log.push("handler2-saw-a")
+      if (key.defaultPrevented) {
+        log.push("handler2-saw-prevented")
+      }
+    }
+  })
+
+  // Handler 3: Internal handler should not run (preventDefault stops internal)
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    if (key.name === "a") {
+      log.push("handler3-internal-saw-a")
+    }
+  })
+
+  dispatchInput(handler, "a")
+
+  expect(log).toEqual([
+    "handler1-saw-a",
+    "handler2-saw-a",
+    "handler2-saw-prevented",
+    // handler3 doesn't run because preventDefault stops internal handlers
+  ])
+
+  // Now test with stopPropagation
+  log.length = 0
+
+  handler.removeAllListeners("keypress")
+
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "b") {
+      log.push("handler1-saw-b")
+      key.stopPropagation()
+    }
+  })
+
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "b") {
+      log.push("handler2-saw-b")
+    }
+  })
+
+  dispatchInput(handler, "b")
+
+  expect(log).toEqual([
+    "handler1-saw-b",
+    // handler2 doesn't run because stopPropagation stops all subsequent handlers
+  ])
+})
+
+test("Integration - Form submission with Enter key", () => {
+  const handler = createKeyHandler()
+
+  let formSubmitted = false
+  let inputValue = ""
+
+  // Form's Enter handler
+  handler.on("keypress", (key: KeyEvent) => {
+    if (key.name === "return" && !key.propagationStopped) {
+      formSubmitted = true
+    }
+  })
+
+  // Input field's Enter handler
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    if (key.name === "return") {
+      // Multi-line input: add newline and stop propagation
+      inputValue += "\n"
+      key.stopPropagation()
+    }
+  })
+
+  // Press Enter
+  dispatchInput(handler, "\r")
+
+  expect(inputValue).toBe("\n")
+  expect(formSubmitted).toBe(true) // Global handler ran first
+
+  // In a real app, you'd check defaultPrevented in the form handler
+  // or the input would be registered as a global handler first
+})
+
+test("Integration - Event bubbling with multiple nested components", () => {
+  const handler = createKeyHandler()
+
+  const eventLog: Array<{ component: string; stopped: boolean }> = []
+
+  // Root component
+  handler.on("keypress", (key: KeyEvent) => {
+    eventLog.push({ component: "root", stopped: key.propagationStopped })
+  })
+
+  // Child component (registered as internal, represents focused element)
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    eventLog.push({ component: "child", stopped: key.propagationStopped })
+
+    // Child handles space key and stops propagation
+    if (key.name === "space") {
+      key.stopPropagation()
+    }
+  })
+
+  // Another internal handler (sibling or parent)
+  handler.onInternal("keypress", (key: KeyEvent) => {
+    eventLog.push({ component: "sibling", stopped: key.propagationStopped })
+  })
+
+  dispatchInput(handler, " ") // Space key
+
+  expect(eventLog).toEqual([
+    { component: "root", stopped: false },
+    { component: "child", stopped: false },
+    // sibling doesn't run because child stopped propagation
+  ])
+  expect(eventLog).toHaveLength(2)
+})