@opentui/core 0.1.28 → 0.1.30

package/index.js

@@ -30,7 +30,6 @@ import {
   RootRenderable,
   Selection,
   StyledText,
-  SyntaxStyle,
   TerminalConsole,
   TextAttributes,
   TextBuffer,
@@ -61,7 +60,6 @@ import {
   capture,
   clearEnvCache,
   convertGlobalToLocalSelection,
-  convertThemeToStyles,
   coordinateToCharacterIndex,
   createCliRenderer,
   createTextAttributes,
@@ -133,7 +131,701 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-phjxdb6g.js";
+} from "./index-0qmm1k4p.js";
+// src/text-buffer-view.ts
+class TextBufferView {
+  lib;
+  viewPtr;
+  textBuffer;
+  _destroyed = false;
+  constructor(lib, ptr, textBuffer) {
+    this.lib = lib;
+    this.viewPtr = ptr;
+    this.textBuffer = textBuffer;
+  }
+  static create(textBuffer) {
+    const lib = resolveRenderLib();
+    const viewPtr = lib.createTextBufferView(textBuffer.ptr);
+    return new TextBufferView(lib, viewPtr, textBuffer);
+  }
+  guard() {
+    if (this._destroyed)
+      throw new Error("TextBufferView is destroyed");
+  }
+  get ptr() {
+    this.guard();
+    return this.viewPtr;
+  }
+  setSelection(start, end, bgColor, fgColor) {
+    this.guard();
+    this.lib.textBufferViewSetSelection(this.viewPtr, start, end, bgColor || null, fgColor || null);
+  }
+  resetSelection() {
+    this.guard();
+    this.lib.textBufferViewResetSelection(this.viewPtr);
+  }
+  getSelection() {
+    this.guard();
+    return this.lib.textBufferViewGetSelection(this.viewPtr);
+  }
+  hasSelection() {
+    this.guard();
+    return this.getSelection() !== null;
+  }
+  setLocalSelection(anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
+    this.guard();
+    return this.lib.textBufferViewSetLocalSelection(this.viewPtr, anchorX, anchorY, focusX, focusY, bgColor || null, fgColor || null);
+  }
+  resetLocalSelection() {
+    this.guard();
+    this.lib.textBufferViewResetLocalSelection(this.viewPtr);
+  }
+  setWrapWidth(width) {
+    this.guard();
+    this.lib.textBufferViewSetWrapWidth(this.viewPtr, width ?? 0);
+  }
+  setWrapMode(mode) {
+    this.guard();
+    this.lib.textBufferViewSetWrapMode(this.viewPtr, mode);
+  }
+  setViewportSize(width, height) {
+    this.guard();
+    this.lib.textBufferViewSetViewportSize(this.viewPtr, width, height);
+  }
+  get lineInfo() {
+    this.guard();
+    return this.lib.textBufferViewGetLineInfo(this.viewPtr);
+  }
+  get logicalLineInfo() {
+    this.guard();
+    return this.lib.textBufferViewGetLogicalLineInfo(this.viewPtr);
+  }
+  getSelectedText() {
+    this.guard();
+    const byteSize = this.textBuffer.byteSize;
+    if (byteSize === 0)
+      return "";
+    const selectedBytes = this.lib.textBufferViewGetSelectedTextBytes(this.viewPtr, byteSize);
+    if (!selectedBytes)
+      return "";
+    return this.lib.decoder.decode(selectedBytes);
+  }
+  getPlainText() {
+    this.guard();
+    const byteSize = this.textBuffer.byteSize;
+    if (byteSize === 0)
+      return "";
+    const plainBytes = this.lib.textBufferViewGetPlainTextBytes(this.viewPtr, byteSize);
+    if (!plainBytes)
+      return "";
+    return this.lib.decoder.decode(plainBytes);
+  }
+  destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
+    this.lib.destroyTextBufferView(this.viewPtr);
+  }
+}
+// src/edit-buffer.ts
+import { EventEmitter } from "events";
+
+class EditBuffer extends EventEmitter {
+  static registry = new Map;
+  static nativeEventsSubscribed = false;
+  lib;
+  bufferPtr;
+  textBufferPtr;
+  id;
+  _destroyed = false;
+  _textBytes = [];
+  _singleTextBytes = null;
+  _singleTextMemId = null;
+  _syntaxStyle;
+  constructor(lib, ptr) {
+    super();
+    this.lib = lib;
+    this.bufferPtr = ptr;
+    this.textBufferPtr = lib.editBufferGetTextBuffer(ptr);
+    this.id = lib.editBufferGetId(ptr);
+    EditBuffer.registry.set(this.id, this);
+    EditBuffer.subscribeToNativeEvents(lib);
+  }
+  static create(widthMethod) {
+    const lib = resolveRenderLib();
+    const ptr = lib.createEditBuffer(widthMethod);
+    return new EditBuffer(lib, ptr);
+  }
+  static subscribeToNativeEvents(lib) {
+    if (EditBuffer.nativeEventsSubscribed)
+      return;
+    EditBuffer.nativeEventsSubscribed = true;
+    lib.onAnyNativeEvent((name, data) => {
+      const buffer = new Uint16Array(data);
+      if (name.startsWith("eb_") && buffer.length >= 1) {
+        const id = buffer[0];
+        const instance = EditBuffer.registry.get(id);
+        if (instance) {
+          const eventName = name.slice(3);
+          const eventData = data.slice(2);
+          instance.emit(eventName, eventData);
+        }
+      }
+    });
+  }
+  guard() {
+    if (this._destroyed)
+      throw new Error("EditBuffer is destroyed");
+  }
+  get ptr() {
+    this.guard();
+    return this.bufferPtr;
+  }
+  setText(text, opts) {
+    this.guard();
+    const history = opts?.history ?? true;
+    const textBytes = this.lib.encoder.encode(text);
+    if (history) {
+      this._textBytes.push(textBytes);
+      const memId = this.lib.textBufferRegisterMemBuffer(this.textBufferPtr, textBytes, false);
+      this.lib.editBufferSetTextFromMem(this.bufferPtr, memId, true);
+    } else {
+      if (this._singleTextMemId !== null) {
+        this.lib.textBufferReplaceMemBuffer(this.textBufferPtr, this._singleTextMemId, textBytes, false);
+      } else {
+        this._singleTextMemId = this.lib.textBufferRegisterMemBuffer(this.textBufferPtr, textBytes, false);
+      }
+      this._singleTextBytes = textBytes;
+      this.lib.editBufferSetTextFromMem(this.bufferPtr, this._singleTextMemId, false);
+    }
+  }
+  setTextOwned(text, opts) {
+    this.guard();
+    const history = opts?.history ?? true;
+    const textBytes = this.lib.encoder.encode(text);
+    this.lib.editBufferSetText(this.bufferPtr, textBytes, history);
+  }
+  getText() {
+    this.guard();
+    const maxSize = 1024 * 1024;
+    const textBytes = this.lib.editBufferGetText(this.bufferPtr, maxSize);
+    if (!textBytes)
+      return "";
+    return this.lib.decoder.decode(textBytes);
+  }
+  insertChar(char) {
+    this.guard();
+    this.lib.editBufferInsertChar(this.bufferPtr, char);
+  }
+  insertText(text) {
+    this.guard();
+    this.lib.editBufferInsertText(this.bufferPtr, text);
+  }
+  deleteChar() {
+    this.guard();
+    this.lib.editBufferDeleteChar(this.bufferPtr);
+  }
+  deleteCharBackward() {
+    this.guard();
+    this.lib.editBufferDeleteCharBackward(this.bufferPtr);
+  }
+  deleteRange(startLine, startCol, endLine, endCol) {
+    this.guard();
+    this.lib.editBufferDeleteRange(this.bufferPtr, startLine, startCol, endLine, endCol);
+  }
+  newLine() {
+    this.guard();
+    this.lib.editBufferNewLine(this.bufferPtr);
+  }
+  deleteLine() {
+    this.guard();
+    this.lib.editBufferDeleteLine(this.bufferPtr);
+  }
+  moveCursorLeft() {
+    this.guard();
+    this.lib.editBufferMoveCursorLeft(this.bufferPtr);
+  }
+  moveCursorRight() {
+    this.guard();
+    this.lib.editBufferMoveCursorRight(this.bufferPtr);
+  }
+  moveCursorUp() {
+    this.guard();
+    this.lib.editBufferMoveCursorUp(this.bufferPtr);
+  }
+  moveCursorDown() {
+    this.guard();
+    this.lib.editBufferMoveCursorDown(this.bufferPtr);
+  }
+  gotoLine(line) {
+    this.guard();
+    this.lib.editBufferGotoLine(this.bufferPtr, line);
+  }
+  setCursor(line, col) {
+    this.guard();
+    this.lib.editBufferSetCursor(this.bufferPtr, line, col);
+  }
+  setCursorToLineCol(line, col) {
+    this.guard();
+    this.lib.editBufferSetCursorToLineCol(this.bufferPtr, line, col);
+  }
+  setCursorByOffset(offset) {
+    this.guard();
+    this.lib.editBufferSetCursorByOffset(this.bufferPtr, offset);
+  }
+  getCursorPosition() {
+    this.guard();
+    return this.lib.editBufferGetCursorPosition(this.bufferPtr);
+  }
+  getNextWordBoundary() {
+    this.guard();
+    const boundary = this.lib.editBufferGetNextWordBoundary(this.bufferPtr);
+    return {
+      line: boundary.row,
+      visualColumn: boundary.col,
+      offset: boundary.offset
+    };
+  }
+  getPrevWordBoundary() {
+    this.guard();
+    const boundary = this.lib.editBufferGetPrevWordBoundary(this.bufferPtr);
+    return {
+      line: boundary.row,
+      visualColumn: boundary.col,
+      offset: boundary.offset
+    };
+  }
+  getEOL() {
+    this.guard();
+    const boundary = this.lib.editBufferGetEOL(this.bufferPtr);
+    return {
+      line: boundary.row,
+      visualColumn: boundary.col,
+      offset: boundary.offset
+    };
+  }
+  debugLogRope() {
+    this.guard();
+    this.lib.editBufferDebugLogRope(this.bufferPtr);
+  }
+  undo() {
+    this.guard();
+    const maxSize = 256;
+    const metaBytes = this.lib.editBufferUndo(this.bufferPtr, maxSize);
+    if (!metaBytes)
+      return null;
+    return this.lib.decoder.decode(metaBytes);
+  }
+  redo() {
+    this.guard();
+    const maxSize = 256;
+    const metaBytes = this.lib.editBufferRedo(this.bufferPtr, maxSize);
+    if (!metaBytes)
+      return null;
+    return this.lib.decoder.decode(metaBytes);
+  }
+  canUndo() {
+    this.guard();
+    return this.lib.editBufferCanUndo(this.bufferPtr);
+  }
+  canRedo() {
+    this.guard();
+    return this.lib.editBufferCanRedo(this.bufferPtr);
+  }
+  clearHistory() {
+    this.guard();
+    this.lib.editBufferClearHistory(this.bufferPtr);
+  }
+  setDefaultFg(fg2) {
+    this.guard();
+    this.lib.textBufferSetDefaultFg(this.textBufferPtr, fg2);
+  }
+  setDefaultBg(bg2) {
+    this.guard();
+    this.lib.textBufferSetDefaultBg(this.textBufferPtr, bg2);
+  }
+  setDefaultAttributes(attributes) {
+    this.guard();
+    this.lib.textBufferSetDefaultAttributes(this.textBufferPtr, attributes);
+  }
+  resetDefaults() {
+    this.guard();
+    this.lib.textBufferResetDefaults(this.textBufferPtr);
+  }
+  setPlaceholder(text) {
+    this.guard();
+    this.lib.editBufferSetPlaceholder(this.bufferPtr, text);
+  }
+  setPlaceholderColor(color) {
+    this.guard();
+    this.lib.editBufferSetPlaceholderColor(this.bufferPtr, color);
+  }
+  setSyntaxStyle(style) {
+    this.guard();
+    this._syntaxStyle = style ?? undefined;
+    this.lib.textBufferSetSyntaxStyle(this.textBufferPtr, style?.ptr ?? null);
+  }
+  getSyntaxStyle() {
+    this.guard();
+    return this._syntaxStyle ?? null;
+  }
+  addHighlight(lineIdx, highlight) {
+    this.guard();
+    this.lib.textBufferAddHighlight(this.textBufferPtr, lineIdx, highlight);
+  }
+  addHighlightByCharRange(highlight) {
+    this.guard();
+    this.lib.textBufferAddHighlightByCharRange(this.textBufferPtr, highlight);
+  }
+  removeHighlightsByRef(hlRef) {
+    this.guard();
+    this.lib.textBufferRemoveHighlightsByRef(this.textBufferPtr, hlRef);
+  }
+  clearLineHighlights(lineIdx) {
+    this.guard();
+    this.lib.textBufferClearLineHighlights(this.textBufferPtr, lineIdx);
+  }
+  clearAllHighlights() {
+    this.guard();
+    this.lib.textBufferClearAllHighlights(this.textBufferPtr);
+  }
+  getLineHighlights(lineIdx) {
+    this.guard();
+    return this.lib.textBufferGetLineHighlights(this.textBufferPtr, lineIdx);
+  }
+  destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
+    EditBuffer.registry.delete(this.id);
+    this.lib.destroyEditBuffer(this.bufferPtr);
+  }
+}
+// src/editor-view.ts
+class EditorView {
+  lib;
+  viewPtr;
+  editBuffer;
+  _destroyed = false;
+  constructor(lib, ptr, editBuffer) {
+    this.lib = lib;
+    this.viewPtr = ptr;
+    this.editBuffer = editBuffer;
+  }
+  static create(editBuffer, viewportWidth, viewportHeight) {
+    const lib = resolveRenderLib();
+    const viewPtr = lib.createEditorView(editBuffer.ptr, viewportWidth, viewportHeight);
+    return new EditorView(lib, viewPtr, editBuffer);
+  }
+  guard() {
+    if (this._destroyed)
+      throw new Error("EditorView is destroyed");
+  }
+  get ptr() {
+    this.guard();
+    return this.viewPtr;
+  }
+  setViewportSize(width, height) {
+    this.guard();
+    this.lib.editorViewSetViewportSize(this.viewPtr, width, height);
+  }
+  getViewport() {
+    this.guard();
+    return this.lib.editorViewGetViewport(this.viewPtr);
+  }
+  setScrollMargin(margin) {
+    this.guard();
+    this.lib.editorViewSetScrollMargin(this.viewPtr, margin);
+  }
+  setWrapMode(mode) {
+    this.guard();
+    this.lib.editorViewSetWrapMode(this.viewPtr, mode);
+  }
+  getVirtualLineCount() {
+    this.guard();
+    return this.lib.editorViewGetVirtualLineCount(this.viewPtr);
+  }
+  getTotalVirtualLineCount() {
+    this.guard();
+    return this.lib.editorViewGetTotalVirtualLineCount(this.viewPtr);
+  }
+  setSelection(start, end, bgColor, fgColor) {
+    this.guard();
+    this.lib.editorViewSetSelection(this.viewPtr, start, end, bgColor || null, fgColor || null);
+  }
+  resetSelection() {
+    this.guard();
+    this.lib.editorViewResetSelection(this.viewPtr);
+  }
+  getSelection() {
+    this.guard();
+    return this.lib.editorViewGetSelection(this.viewPtr);
+  }
+  hasSelection() {
+    this.guard();
+    return this.getSelection() !== null;
+  }
+  setLocalSelection(anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
+    this.guard();
+    return this.lib.editorViewSetLocalSelection(this.viewPtr, anchorX, anchorY, focusX, focusY, bgColor || null, fgColor || null);
+  }
+  resetLocalSelection() {
+    this.guard();
+    this.lib.editorViewResetLocalSelection(this.viewPtr);
+  }
+  getSelectedText() {
+    this.guard();
+    const maxLength = 1024 * 1024;
+    const selectedBytes = this.lib.editorViewGetSelectedTextBytes(this.viewPtr, maxLength);
+    if (!selectedBytes)
+      return "";
+    return this.lib.decoder.decode(selectedBytes);
+  }
+  getCursor() {
+    this.guard();
+    return this.lib.editorViewGetCursor(this.viewPtr);
+  }
+  getText() {
+    this.guard();
+    const maxLength = 1024 * 1024;
+    const textBytes = this.lib.editorViewGetText(this.viewPtr, maxLength);
+    if (!textBytes)
+      return "";
+    return this.lib.decoder.decode(textBytes);
+  }
+  getVisualCursor() {
+    this.guard();
+    return this.lib.editorViewGetVisualCursor(this.viewPtr);
+  }
+  moveUpVisual() {
+    this.guard();
+    this.lib.editorViewMoveUpVisual(this.viewPtr);
+  }
+  moveDownVisual() {
+    this.guard();
+    this.lib.editorViewMoveDownVisual(this.viewPtr);
+  }
+  deleteSelectedText() {
+    this.guard();
+    this.lib.editorViewDeleteSelectedText(this.viewPtr);
+  }
+  setCursorByOffset(offset) {
+    this.guard();
+    this.lib.editorViewSetCursorByOffset(this.viewPtr, offset);
+  }
+  getNextWordBoundary() {
+    this.guard();
+    return this.lib.editorViewGetNextWordBoundary(this.viewPtr);
+  }
+  getPrevWordBoundary() {
+    this.guard();
+    return this.lib.editorViewGetPrevWordBoundary(this.viewPtr);
+  }
+  getEOL() {
+    this.guard();
+    return this.lib.editorViewGetEOL(this.viewPtr);
+  }
+  getLineInfo() {
+    this.guard();
+    const textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr);
+    return this.lib.textBufferViewGetLineInfo(textBufferViewPtr);
+  }
+  getLogicalLineInfo() {
+    this.guard();
+    const textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr);
+    return this.lib.textBufferViewGetLogicalLineInfo(textBufferViewPtr);
+  }
+  destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
+    this.lib.destroyEditorView(this.viewPtr);
+  }
+}
+// src/syntax-style.ts
+function convertThemeToStyles(theme) {
+  const flatStyles = {};
+  for (const tokenStyle of theme) {
+    const styleDefinition = {};
+    if (tokenStyle.style.foreground) {
+      styleDefinition.fg = parseColor(tokenStyle.style.foreground);
+    }
+    if (tokenStyle.style.background) {
+      styleDefinition.bg = parseColor(tokenStyle.style.background);
+    }
+    if (tokenStyle.style.bold !== undefined) {
+      styleDefinition.bold = tokenStyle.style.bold;
+    }
+    if (tokenStyle.style.italic !== undefined) {
+      styleDefinition.italic = tokenStyle.style.italic;
+    }
+    if (tokenStyle.style.underline !== undefined) {
+      styleDefinition.underline = tokenStyle.style.underline;
+    }
+    if (tokenStyle.style.dim !== undefined) {
+      styleDefinition.dim = tokenStyle.style.dim;
+    }
+    for (const scope of tokenStyle.scope) {
+      flatStyles[scope] = styleDefinition;
+    }
+  }
+  return flatStyles;
+}
+
+class SyntaxStyle {
+  lib;
+  stylePtr;
+  _destroyed = false;
+  nameCache = new Map;
+  styleDefs = new Map;
+  mergedCache = new Map;
+  constructor(lib, ptr) {
+    this.lib = lib;
+    this.stylePtr = ptr;
+  }
+  static create() {
+    const lib = resolveRenderLib();
+    const ptr = lib.createSyntaxStyle();
+    return new SyntaxStyle(lib, ptr);
+  }
+  static fromTheme(theme) {
+    const style = SyntaxStyle.create();
+    const flatStyles = convertThemeToStyles(theme);
+    for (const [name, styleDef] of Object.entries(flatStyles)) {
+      style.registerStyle(name, styleDef);
+    }
+    return style;
+  }
+  static fromStyles(styles) {
+    const style = SyntaxStyle.create();
+    for (const [name, styleDef] of Object.entries(styles)) {
+      style.registerStyle(name, styleDef);
+    }
+    return style;
+  }
+  guard() {
+    if (this._destroyed)
+      throw new Error("NativeSyntaxStyle is destroyed");
+  }
+  registerStyle(name, style) {
+    this.guard();
+    const attributes = createTextAttributes({
+      bold: style.bold,
+      italic: style.italic,
+      underline: style.underline,
+      dim: style.dim
+    });
+    const id = this.lib.syntaxStyleRegister(this.stylePtr, name, style.fg || null, style.bg || null, attributes);
+    this.nameCache.set(name, id);
+    this.styleDefs.set(name, style);
+    return id;
+  }
+  resolveStyleId(name) {
+    this.guard();
+    const cached = this.nameCache.get(name);
+    if (cached !== undefined)
+      return cached;
+    const id = this.lib.syntaxStyleResolveByName(this.stylePtr, name);
+    if (id !== null) {
+      this.nameCache.set(name, id);
+    }
+    return id;
+  }
+  getStyleId(name) {
+    this.guard();
+    const id = this.resolveStyleId(name);
+    if (id !== null)
+      return id;
+    if (name.includes(".")) {
+      const baseName = name.split(".")[0];
+      return this.resolveStyleId(baseName);
+    }
+    return null;
+  }
+  get ptr() {
+    this.guard();
+    return this.stylePtr;
+  }
+  getStyleCount() {
+    this.guard();
+    return this.lib.syntaxStyleGetStyleCount(this.stylePtr);
+  }
+  clearNameCache() {
+    this.nameCache.clear();
+  }
+  getStyle(name) {
+    this.guard();
+    if (Object.prototype.hasOwnProperty.call(this.styleDefs, name)) {
+      return;
+    }
+    const style = this.styleDefs.get(name);
+    if (style)
+      return style;
+    if (name.includes(".")) {
+      const baseName = name.split(".")[0];
+      if (Object.prototype.hasOwnProperty.call(this.styleDefs, baseName)) {
+        return;
+      }
+      return this.styleDefs.get(baseName);
+    }
+    return;
+  }
+  mergeStyles(...styleNames) {
+    this.guard();
+    const cacheKey = styleNames.join(":");
+    const cached = this.mergedCache.get(cacheKey);
+    if (cached)
+      return cached;
+    const styleDefinition = {};
+    for (const name of styleNames) {
+      const style = this.getStyle(name);
+      if (!style)
+        continue;
+      if (style.fg)
+        styleDefinition.fg = style.fg;
+      if (style.bg)
+        styleDefinition.bg = style.bg;
+      if (style.bold !== undefined)
+        styleDefinition.bold = style.bold;
+      if (style.italic !== undefined)
+        styleDefinition.italic = style.italic;
+      if (style.underline !== undefined)
+        styleDefinition.underline = style.underline;
+      if (style.dim !== undefined)
+        styleDefinition.dim = style.dim;
+    }
+    const attributes = createTextAttributes({
+      bold: styleDefinition.bold,
+      italic: styleDefinition.italic,
+      underline: styleDefinition.underline,
+      dim: styleDefinition.dim
+    });
+    const merged = {
+      fg: styleDefinition.fg,
+      bg: styleDefinition.bg,
+      attributes
+    };
+    this.mergedCache.set(cacheKey, merged);
+    return merged;
+  }
+  clearCache() {
+    this.guard();
+    this.mergedCache.clear();
+  }
+  getCacheSize() {
+    this.guard();
+    return this.mergedCache.size;
+  }
+  destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
+    this.nameCache.clear();
+    this.styleDefs.clear();
+    this.mergedCache.clear();
+    this.lib.destroySyntaxStyle(this.stylePtr);
+  }
+}
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1618,10 +2310,10 @@ class TextBufferRenderable extends Renderable {
   _defaultAttributes;
   _selectionBg;
   _selectionFg;
-  _wrap = false;
   _wrapMode = "word";
   lastLocalSelection = null;
   textBuffer;
+  textBufferView;
   _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
   _defaultOptions = {
     fg: RGBA.fromValues(1, 1, 1, 1),
@@ -1630,7 +2322,6 @@ class TextBufferRenderable extends Renderable {
     selectionFg: undefined,
     selectable: true,
     attributes: 0,
-    wrap: true,
     wrapMode: "word"
   };
   constructor(ctx, options) {
@@ -1641,15 +2332,17 @@ class TextBufferRenderable extends Renderable {
     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._wrap = options.wrap ?? this._defaultOptions.wrap;
     this._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode;
     this.textBuffer = TextBuffer.create(this._ctx.widthMethod);
-    this.textBuffer.setWrapMode(this._wrapMode);
+    this.textBufferView = TextBufferView.create(this.textBuffer);
+    const style = SyntaxStyle.create();
+    this.textBuffer.setSyntaxStyle(style);
+    this.textBufferView.setWrapMode(this._wrapMode);
     this.setupMeasureFunc();
     this.textBuffer.setDefaultFg(this._defaultFg);
     this.textBuffer.setDefaultBg(this._defaultBg);
     this.textBuffer.setDefaultAttributes(this._defaultAttributes);
-    if (this._wrap && this.width > 0) {
+    if (this._wrapMode !== "none" && this.width > 0) {
       this.updateWrapWidth(this.width);
     }
     this.updateTextInfo();
@@ -1721,27 +2414,22 @@ class TextBufferRenderable extends Renderable {
       this.requestRender();
     }
   }
-  get wrap() {
-    return this._wrap;
-  }
-  set wrap(value) {
-    if (this._wrap !== value) {
-      this._wrap = value;
-      this.textBuffer.setWrapWidth(this._wrap ? this.width : null);
-      this.requestRender();
-    }
-  }
   get wrapMode() {
     return this._wrapMode;
   }
   set wrapMode(value) {
     if (this._wrapMode !== value) {
       this._wrapMode = value;
-      this.textBuffer.setWrapMode(this._wrapMode);
+      this.textBufferView.setWrapMode(this._wrapMode);
+      if (value !== "none" && this.width > 0) {
+        this.updateWrapWidth(this.width);
+      }
+      this.yogaNode.markDirty();
       this.requestRender();
     }
   }
   onResize(width, height) {
+    this.textBufferView.setViewportSize(width, height);
     if (this.lastLocalSelection) {
       const changed = this.updateLocalSelection(this.lastLocalSelection);
       if (changed) {
@@ -1757,10 +2445,10 @@ class TextBufferRenderable extends Renderable {
   }
   updateLocalSelection(localSelection) {
     if (!localSelection?.isActive) {
-      this.textBuffer.resetLocalSelection();
+      this.textBufferView.resetLocalSelection();
       return true;
     }
-    return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
+    return this.textBufferView.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
   }
   updateTextInfo() {
     if (this.lastLocalSelection) {
@@ -1773,18 +2461,18 @@ class TextBufferRenderable extends Renderable {
     this.requestRender();
   }
   updateLineInfo() {
-    const lineInfo = this.textBuffer.lineInfo;
+    const lineInfo = this.textBufferView.logicalLineInfo;
     this._lineInfo.lineStarts = lineInfo.lineStarts;
     this._lineInfo.lineWidths = lineInfo.lineWidths;
     this._lineInfo.maxLineWidth = lineInfo.maxLineWidth;
   }
   updateWrapWidth(width) {
-    this.textBuffer.setWrapWidth(width);
+    this.textBufferView.setWrapWidth(width);
     this.updateLineInfo();
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      if (this._wrap && this.width !== width) {
+      if (this._wrapMode !== "none" && this.width !== width) {
         this.updateWrapWidth(width);
       } else {
         this.updateLineInfo();
@@ -1798,18 +2486,6 @@ class TextBufferRenderable extends Renderable {
     };
     this.yogaNode.setMeasureFunc(measureFunc);
   }
-  insertChunk(chunk, index) {
-    this.textBuffer.insertChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
-    this.updateTextInfo();
-  }
-  removeChunk(index) {
-    this.textBuffer.removeChunkGroup(index);
-    this.updateTextInfo();
-  }
-  replaceChunk(index, chunk) {
-    this.textBuffer.replaceChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
-    this.updateTextInfo();
-  }
   shouldStartSelection(x, y) {
     if (!this.selectable)
       return false;
@@ -1827,13 +2503,13 @@ class TextBufferRenderable extends Renderable {
     return this.hasSelection();
   }
   getSelectedText() {
-    return this.textBuffer.getSelectedText();
+    return this.textBufferView.getSelectedText();
   }
   hasSelection() {
-    return this.textBuffer.hasSelection();
+    return this.textBufferView.hasSelection();
   }
   getSelection() {
-    return this.textBuffer.getSelection();
+    return this.textBufferView.getSelection();
   }
   render(buffer, deltaTime) {
     if (!this.visible)
@@ -1844,16 +2520,11 @@ class TextBufferRenderable extends Renderable {
   }
   renderSelf(buffer) {
     if (this.textBuffer.ptr) {
-      const clipRect = {
-        x: this.x,
-        y: this.y,
-        width: this.width,
-        height: this.height
-      };
-      buffer.drawTextBuffer(this.textBuffer, this.x, this.y, clipRect);
+      buffer.drawTextBuffer(this.textBufferView, this.x, this.y);
     }
   }
   destroy() {
+    this.textBufferView.destroy();
     this.textBuffer.destroy();
     super.destroy();
   }
@@ -4264,24 +4935,6 @@ class TextRenderable extends TextBufferRenderable {
       this.updateTextInfo();
     }
   }
-  insertChunk(chunk, index) {
-    super.insertChunk(chunk, index);
-    this.clearChunks(this._text);
-  }
-  removeChunkByObject(chunk) {
-    const index = this._text.chunks.indexOf(chunk);
-    if (index === -1)
-      return;
-    super.removeChunk(index);
-    this.clearChunks(this._text);
-  }
-  replaceChunkByObject(chunk, oldChunk) {
-    const index = this._text.chunks.indexOf(oldChunk);
-    if (index === -1)
-      return;
-    super.replaceChunk(index, chunk);
-    this.clearChunks(this._text);
-  }
   updateTextFromNodes() {
     if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
       const chunks = this.rootTextNode.gatherWithInheritedStyle({
@@ -4332,6 +4985,789 @@ class TextRenderable extends TextBufferRenderable {
     super.destroy();
   }
 }
+// src/renderables/EditBufferRenderable.ts
+class EditBufferRenderable extends Renderable {
+  _focusable = true;
+  selectable = true;
+  _textColor;
+  _backgroundColor;
+  _defaultAttributes;
+  _selectionBg;
+  _selectionFg;
+  _wrapMode = "word";
+  _scrollMargin = 0.2;
+  _showCursor = true;
+  _cursorColor;
+  lastLocalSelection = null;
+  _cursorChangeListener = undefined;
+  _contentChangeListener = undefined;
+  editBuffer;
+  editorView;
+  _defaultOptions = {
+    textColor: RGBA.fromValues(1, 1, 1, 1),
+    backgroundColor: "transparent",
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0,
+    wrapMode: "word",
+    scrollMargin: 0.2,
+    showCursor: true,
+    cursorColor: RGBA.fromValues(1, 1, 1, 1)
+  };
+  constructor(ctx, options) {
+    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._showCursor = options.showCursor ?? this._defaultOptions.showCursor;
+    this._cursorColor = parseColor(options.cursorColor ?? this._defaultOptions.cursorColor);
+    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);
+    }
+    this.setupMeasureFunc();
+    this.setupEventListeners(options);
+  }
+  setupEventListeners(options) {
+    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.line,
+          visualColumn: cursor.visualColumn
+        });
+      }
+    });
+    this.editBuffer.on("content-changed", () => {
+      this.yogaNode.markDirty();
+      this.requestRender();
+      if (this._contentChangeListener) {
+        this._contentChangeListener({});
+      }
+    });
+  }
+  get plainText() {
+    return this.editBuffer.getText();
+  }
+  get cursor() {
+    return this.editBuffer.getCursorPosition();
+  }
+  get visualCursor() {
+    return this.editorView.getVisualCursor();
+  }
+  get cursorOffset() {
+    return this.editorView.getVisualCursor().offset;
+  }
+  set cursorOffset(offset) {
+    this.editorView.setCursorByOffset(offset);
+    this.requestRender();
+  }
+  get textColor() {
+    return this._textColor;
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.textColor);
+    if (this._textColor !== newColor) {
+      this._textColor = newColor;
+      this.editBuffer.setDefaultFg(newColor);
+      this.requestRender();
+    }
+  }
+  get selectionBg() {
+    return this._selectionBg;
+  }
+  set selectionBg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg;
+    if (this._selectionBg !== newColor) {
+      this._selectionBg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
+    }
+  }
+  get selectionFg() {
+    return this._selectionFg;
+  }
+  set selectionFg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg;
+    if (this._selectionFg !== newColor) {
+      this._selectionFg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.editBuffer.setDefaultBg(newColor);
+      this.requestRender();
+    }
+  }
+  get attributes() {
+    return this._defaultAttributes;
+  }
+  set attributes(value) {
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value;
+      this.editBuffer.setDefaultAttributes(value);
+      this.requestRender();
+    }
+  }
+  get wrapMode() {
+    return this._wrapMode;
+  }
+  set wrapMode(value) {
+    if (this._wrapMode !== value) {
+      this._wrapMode = value;
+      this.editorView.setWrapMode(value);
+      this.yogaNode.markDirty();
+      this.requestRender();
+    }
+  }
+  get showCursor() {
+    return this._showCursor;
+  }
+  set showCursor(value) {
+    if (this._showCursor !== value) {
+      this._showCursor = value;
+      this.requestRender();
+    }
+  }
+  get cursorColor() {
+    return this._cursorColor;
+  }
+  set cursorColor(value) {
+    const newColor = parseColor(value);
+    if (this._cursorColor !== newColor) {
+      this._cursorColor = newColor;
+      this.requestRender();
+    }
+  }
+  onResize(width, height) {
+    this.editorView.setViewportSize(width, height);
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
+    }
+  }
+  refreshLocalSelection() {
+    if (this.lastLocalSelection) {
+      return this.updateLocalSelection(this.lastLocalSelection);
+    }
+    return false;
+  }
+  updateLocalSelection(localSelection) {
+    if (!localSelection?.isActive) {
+      this.editorView.resetLocalSelection();
+      return true;
+    }
+    return this.editorView.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
+  }
+  shouldStartSelection(x, y) {
+    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) {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.updateLocalSelection(localSelection);
+    if (changed) {
+      this.requestRender();
+    }
+    return this.hasSelection();
+  }
+  getSelectedText() {
+    return this.editorView.getSelectedText();
+  }
+  hasSelection() {
+    return this.editorView.hasSelection();
+  }
+  getSelection() {
+    return this.editorView.getSelection();
+  }
+  setupMeasureFunc() {
+    const measureFunc = (width, widthMode, height, heightMode) => {
+      if (this._wrapMode !== "none" && this.width !== width) {
+        this.editorView.setViewportSize(width, height);
+      } else {
+        this.editorView.setViewportSize(width, height);
+      }
+      const lineInfo = this.editorView.getLogicalLineInfo();
+      const measuredWidth = lineInfo.maxLineWidth;
+      const measuredHeight = lineInfo.lineStarts.length;
+      return {
+        width: Math.max(1, measuredWidth),
+        height: Math.max(1, measuredHeight)
+      };
+    };
+    this.yogaNode.setMeasureFunc(measureFunc);
+  }
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    if (this.isDestroyed)
+      return;
+    this.markClean();
+    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
+    this.renderSelf(buffer);
+    this.renderCursor(buffer);
+  }
+  renderSelf(buffer) {
+    buffer.drawEditorView(this.editorView, this.x, this.y);
+  }
+  renderCursor(buffer) {
+    if (!this._showCursor || !this._focused)
+      return;
+    const visualCursor = this.editorView.getVisualCursor();
+    const cursorX = this.x + visualCursor.visualCol + 1;
+    const cursorY = this.y + visualCursor.visualRow + 1;
+    this._ctx.setCursorPosition(cursorX, cursorY, true);
+    this._ctx.setCursorColor(this._cursorColor);
+    this._ctx.setCursorStyle("block", true);
+  }
+  focus() {
+    super.focus();
+    this._ctx.setCursorStyle("block", true);
+    this._ctx.setCursorColor(this._cursorColor);
+    this.requestRender();
+  }
+  blur() {
+    super.blur();
+    this._ctx.setCursorPosition(0, 0, false);
+    this.requestRender();
+  }
+  onRemove() {
+    if (this._focused) {
+      this._ctx.setCursorPosition(0, 0, false);
+    }
+  }
+  destroy() {
+    if (this._focused) {
+      this._ctx.setCursorPosition(0, 0, false);
+    }
+    super.destroy();
+    this.editorView.destroy();
+    this.editBuffer.destroy();
+  }
+  set onCursorChange(handler) {
+    this._cursorChangeListener = handler;
+  }
+  get onCursorChange() {
+    return this._cursorChangeListener;
+  }
+  set onContentChange(handler) {
+    this._contentChangeListener = handler;
+  }
+  get onContentChange() {
+    return this._contentChangeListener;
+  }
+  get syntaxStyle() {
+    return this.editBuffer.getSyntaxStyle();
+  }
+  set syntaxStyle(style) {
+    this.editBuffer.setSyntaxStyle(style);
+    this.requestRender();
+  }
+  addHighlight(lineIdx, highlight) {
+    this.editBuffer.addHighlight(lineIdx, highlight);
+    this.requestRender();
+  }
+  addHighlightByCharRange(highlight) {
+    this.editBuffer.addHighlightByCharRange(highlight);
+    this.requestRender();
+  }
+  removeHighlightsByRef(hlRef) {
+    this.editBuffer.removeHighlightsByRef(hlRef);
+    this.requestRender();
+  }
+  clearLineHighlights(lineIdx) {
+    this.editBuffer.clearLineHighlights(lineIdx);
+    this.requestRender();
+  }
+  clearAllHighlights() {
+    this.editBuffer.clearAllHighlights();
+    this.requestRender();
+  }
+  getLineHighlights(lineIdx) {
+    return this.editBuffer.getLineHighlights(lineIdx);
+  }
+}
+
+// src/lib/keymapping.ts
+function mergeKeyBindings(defaults, custom) {
+  const map = new Map;
+  for (const binding of defaults) {
+    const key = getKeyBindingKey(binding);
+    map.set(key, binding);
+  }
+  for (const binding of custom) {
+    const key = getKeyBindingKey(binding);
+    map.set(key, binding);
+  }
+  return Array.from(map.values());
+}
+function getKeyBindingKey(binding) {
+  return `${binding.name}:${!!binding.ctrl}:${!!binding.shift}:${!!binding.meta}`;
+}
+function buildKeyBindingsMap(bindings) {
+  const map = new Map;
+  for (const binding of bindings) {
+    const key = getKeyBindingKey(binding);
+    map.set(key, binding.action);
+  }
+  return map;
+}
+
+// src/renderables/Textarea.ts
+var defaultTextareaKeybindings = [
+  { 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: "line-home" },
+  { name: "end", action: "line-end" },
+  { name: "home", shift: true, action: "select-line-home" },
+  { name: "end", shift: true, action: "select-line-end" },
+  { name: "a", ctrl: true, action: "buffer-home" },
+  { name: "e", ctrl: true, action: "buffer-end" },
+  { name: "d", ctrl: true, action: "delete-line" },
+  { name: "k", ctrl: true, action: "delete-to-line-end" },
+  { name: "backspace", action: "backspace" },
+  { name: "delete", action: "delete" },
+  { name: "return", action: "newline" },
+  { name: "enter", action: "newline" },
+  { name: "z", ctrl: true, action: "undo" },
+  { name: "Z", ctrl: true, shift: true, action: "redo" },
+  { name: "y", ctrl: 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: "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: "d", meta: true, action: "delete-word-forward" },
+  { name: "backspace", meta: true, action: "delete-word-backward" },
+  { name: "w", ctrl: true, action: "delete-word-backward" }
+];
+
+class TextareaRenderable extends EditBufferRenderable {
+  _placeholder;
+  _unfocusedBackgroundColor;
+  _unfocusedTextColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _placeholderColor;
+  _keyBindingsMap;
+  _actionHandlers;
+  static defaults = {
+    value: "",
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "transparent",
+    focusedTextColor: "#FFFFFF",
+    placeholder: null,
+    placeholderColor: "#666666"
+  };
+  constructor(ctx, options) {
+    const defaults = TextareaRenderable.defaults;
+    const baseOptions = {
+      ...options,
+      backgroundColor: options.backgroundColor || defaults.backgroundColor,
+      textColor: options.textColor || defaults.textColor
+    };
+    super(ctx, baseOptions);
+    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);
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, options.keyBindings || []);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings);
+    this._actionHandlers = this.buildActionHandlers();
+    this.updateValue(options.value ?? defaults.value);
+    this.updateColors();
+    this.editBuffer.setPlaceholder(this._placeholder);
+    this.editBuffer.setPlaceholderColor(this._placeholderColor);
+  }
+  buildActionHandlers() {
+    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 })],
+      ["buffer-home", () => this.gotoBufferHome()],
+      ["buffer-end", () => this.gotoBufferEnd()],
+      ["delete-line", () => this.deleteLine()],
+      ["delete-to-line-end", () => this.deleteToLineEnd()],
+      ["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()]
+    ]);
+  }
+  handlePaste(text) {
+    this.insertText(text);
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    const keySequence = typeof key === "string" ? key : key.sequence;
+    const keyCtrl = typeof key === "string" ? false : key.ctrl;
+    const keyShift = typeof key === "string" ? false : key.shift;
+    const keyMeta = typeof key === "string" ? false : key.meta;
+    const bindingKey = getKeyBindingKey({
+      name: keyName,
+      ctrl: keyCtrl,
+      shift: keyShift,
+      meta: keyMeta,
+      action: "move-left"
+    });
+    const action = this._keyBindingsMap.get(bindingKey);
+    if (action) {
+      const handler = this._actionHandlers.get(action);
+      if (handler) {
+        return handler();
+      }
+    }
+    if (keySequence && !keyCtrl && !keyMeta) {
+      const firstCharCode = keySequence.charCodeAt(0);
+      if (firstCharCode < 32) {
+        return false;
+      }
+      if (firstCharCode === 127) {
+        return false;
+      }
+      this.insertText(keySequence);
+      return true;
+    }
+    return false;
+  }
+  get value() {
+    return this.editBuffer.getText();
+  }
+  set value(value) {
+    this.updateValue(value);
+  }
+  updateValue(value) {
+    this.editBuffer.setText(value, { history: false });
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  updateColors() {
+    const effectiveBg = this._focused ? this._focusedBackgroundColor : this._unfocusedBackgroundColor;
+    const effectiveFg = this._focused ? this._focusedTextColor : this._unfocusedTextColor;
+    super.backgroundColor = effectiveBg;
+    super.textColor = effectiveFg;
+  }
+  insertChar(char) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertChar(char);
+    this.requestRender();
+  }
+  insertText(text) {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+    }
+    this.editBuffer.insertText(text);
+    this.requestRender();
+  }
+  deleteChar() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteChar();
+    this.requestRender();
+    return true;
+  }
+  deleteCharBackward() {
+    if (this.hasSelection()) {
+      this.deleteSelectedText();
+      return true;
+    }
+    this._ctx.clearSelection();
+    this.editBuffer.deleteCharBackward();
+    this.requestRender();
+    return true;
+  }
+  deleteSelectedText() {
+    this.editorView.deleteSelectedText();
+    this._ctx.clearSelection();
+    this.requestRender();
+  }
+  newLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.newLine();
+    this.requestRender();
+    return true;
+  }
+  deleteLine() {
+    this._ctx.clearSelection();
+    this.editBuffer.deleteLine();
+    this.requestRender();
+    return true;
+  }
+  moveCursorLeft(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    this.editBuffer.moveCursorLeft();
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorRight(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    this.editBuffer.moveCursorRight();
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorUp(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    this.editorView.moveUpVisual();
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveCursorDown(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    this.editorView.moveDownVisual();
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLine(line) {
+    this.editBuffer.gotoLine(line);
+    this.requestRender();
+  }
+  gotoLineHome(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    const cursor = this.editorView.getCursor();
+    this.editBuffer.setCursor(cursor.row, 0);
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoLineEnd(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    const eol = this.editBuffer.getEOL();
+    this.editBuffer.setCursor(eol.line, eol.visualColumn);
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferHome() {
+    this.editBuffer.setCursor(0, 0);
+    this.requestRender();
+    return true;
+  }
+  gotoBufferEnd() {
+    this.editBuffer.gotoLine(999999);
+    this.requestRender();
+    return true;
+  }
+  deleteToLineEnd() {
+    const cursor = this.editorView.getCursor();
+    const eol = this.editBuffer.getEOL();
+    if (eol.visualColumn > cursor.col) {
+      this.editBuffer.deleteRange(cursor.row, cursor.col, eol.line, eol.visualColumn);
+    }
+    this.requestRender();
+    return true;
+  }
+  undo() {
+    this._ctx.clearSelection();
+    this.editBuffer.undo();
+    this.requestRender();
+    return true;
+  }
+  redo() {
+    this._ctx.clearSelection();
+    this.editBuffer.redo();
+    this.requestRender();
+    return true;
+  }
+  moveWordForward(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    const nextWord = this.editBuffer.getNextWordBoundary();
+    this.editBuffer.setCursorByOffset(nextWord.offset);
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  moveWordBackward(options) {
+    const select = options?.select ?? false;
+    this.handleShiftSelection(select, true);
+    const prevWord = this.editBuffer.getPrevWordBoundary();
+    this.editBuffer.setCursorByOffset(prevWord.offset);
+    this.handleShiftSelection(select, false);
+    this.requestRender();
+    return true;
+  }
+  deleteWordForward() {
+    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.line, currentCursor.visualColumn, nextWord.line, nextWord.visualColumn);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  deleteWordBackward() {
+    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.line, prevWord.visualColumn, currentCursor.line, currentCursor.visualColumn);
+    }
+    this._ctx.clearSelection();
+    this.requestRender();
+    return true;
+  }
+  handleShiftSelection(shiftPressed, isBeforeMovement) {
+    if (!this.selectable)
+      return;
+    if (!shiftPressed) {
+      this._ctx.clearSelection();
+      return;
+    }
+    const visualCursor = this.editorView.getVisualCursor();
+    const viewport = this.editorView.getViewport();
+    const cursorX = this.x + visualCursor.visualCol;
+    const cursorY = this.y + (visualCursor.visualRow - viewport.offsetY);
+    if (isBeforeMovement) {
+      if (!this._ctx.hasSelection) {
+        this._ctx.startSelection(this, cursorX, cursorY);
+      }
+    } else {
+      this._ctx.updateSelection(this, cursorX, cursorY);
+    }
+  }
+  focus() {
+    super.focus();
+    this.updateColors();
+  }
+  blur() {
+    super.blur();
+    this.updateColors();
+  }
+  get placeholder() {
+    return this._placeholder;
+  }
+  set placeholder(value) {
+    if (this._placeholder !== value) {
+      this._placeholder = value;
+      this.editBuffer.setPlaceholder(value);
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._unfocusedBackgroundColor;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.backgroundColor);
+    if (this._unfocusedBackgroundColor !== newColor) {
+      this._unfocusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  get textColor() {
+    return this._unfocusedTextColor;
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.textColor);
+    if (this._unfocusedTextColor !== newColor) {
+      this._unfocusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.updateColors();
+    }
+  }
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.updateColors();
+    }
+  }
+  set placeholderColor(value) {
+    const newColor = parseColor(value ?? TextareaRenderable.defaults.placeholderColor);
+    if (this._placeholderColor !== newColor) {
+      this._placeholderColor = newColor;
+      this.editBuffer.setPlaceholderColor(newColor);
+      this.requestRender();
+    }
+  }
+}
 export {
   yellow,
   wrapWithDelegates,
@@ -4444,8 +5880,10 @@ export {
   VRenderable,
   TreeSitterClient,
   Timeline,
+  TextareaRenderable,
   TextRenderable,
   TextNodeRenderable,
+  TextBufferView,
   TextBufferRenderable,
   TextBuffer,
   TextAttributes,
@@ -4487,6 +5925,8 @@ export {
   Generic,
   FrameBufferRenderable,
   FrameBuffer,
+  EditorView,
+  EditBuffer,
   DistortionEffect,
   DebugOverlayCorner,
   DataPathsManager,
@@ -4508,5 +5948,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=6F0864CECE58138064756E2164756E21
+//# debugId=C45C47BFE87C68C464756E2164756E21
 //# sourceMappingURL=index.js.map