@opentui/core 0.1.30 → 0.1.32

package/index.js

@@ -10,6 +10,7 @@ import {
   DataPathsManager,
   DebugOverlayCorner,
   Edge,
+  ExtmarksController,
   Gutter,
   InternalKeyHandler,
   KeyEvent,
@@ -29,6 +30,7 @@ import {
   RendererControlState,
   RootRenderable,
   Selection,
+  StdinBuffer,
   StyledText,
   TerminalConsole,
   TextAttributes,
@@ -62,6 +64,7 @@ import {
   convertGlobalToLocalSelection,
   coordinateToCharacterIndex,
   createCliRenderer,
+  createExtmarksController,
   createTextAttributes,
   cyan,
   delegate,
@@ -131,7 +134,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-0qmm1k4p.js";
+} from "./index-3f9h747j.js";
 // src/text-buffer-view.ts
 class TextBufferView {
   lib;
@@ -220,6 +223,15 @@ class TextBufferView {
       return "";
     return this.lib.decoder.decode(plainBytes);
   }
+  setTabIndicator(indicator) {
+    this.guard();
+    const codePoint = typeof indicator === "string" ? indicator.codePointAt(0) ?? 0 : indicator;
+    this.lib.textBufferViewSetTabIndicator(this.viewPtr, codePoint);
+  }
+  setTabIndicatorColor(color) {
+    this.guard();
+    this.lib.textBufferViewSetTabIndicatorColor(this.viewPtr, color);
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -381,8 +393,8 @@ class EditBuffer extends EventEmitter {
     this.guard();
     const boundary = this.lib.editBufferGetNextWordBoundary(this.bufferPtr);
     return {
-      line: boundary.row,
-      visualColumn: boundary.col,
+      row: boundary.row,
+      col: boundary.col,
       offset: boundary.offset
     };
   }
@@ -390,8 +402,8 @@ class EditBuffer extends EventEmitter {
     this.guard();
     const boundary = this.lib.editBufferGetPrevWordBoundary(this.bufferPtr);
     return {
-      line: boundary.row,
-      visualColumn: boundary.col,
+      row: boundary.row,
+      col: boundary.col,
       offset: boundary.offset
     };
   }
@@ -399,11 +411,26 @@ class EditBuffer extends EventEmitter {
     this.guard();
     const boundary = this.lib.editBufferGetEOL(this.bufferPtr);
     return {
-      line: boundary.row,
-      visualColumn: boundary.col,
+      row: boundary.row,
+      col: boundary.col,
       offset: boundary.offset
     };
   }
+  offsetToPosition(offset) {
+    this.guard();
+    const result = this.lib.editBufferOffsetToPosition(this.bufferPtr, offset);
+    if (!result)
+      return null;
+    return { row: result.row, col: result.col };
+  }
+  positionToOffset(row, col) {
+    this.guard();
+    return this.lib.editBufferPositionToOffset(this.bufferPtr, row, col);
+  }
+  getLineStartOffset(row) {
+    this.guard();
+    return this.lib.editBufferGetLineStartOffset(this.bufferPtr, row);
+  }
   debugLogRope() {
     this.guard();
     this.lib.editBufferDebugLogRope(this.bufferPtr);
@@ -452,14 +479,6 @@ class EditBuffer extends EventEmitter {
     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;
@@ -493,6 +512,10 @@ class EditBuffer extends EventEmitter {
     this.guard();
     return this.lib.textBufferGetLineHighlights(this.textBufferPtr, lineIdx);
   }
+  clear() {
+    this.guard();
+    this.lib.editBufferClear(this.bufferPtr);
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -507,6 +530,7 @@ class EditorView {
   viewPtr;
   editBuffer;
   _destroyed = false;
+  _extmarksController;
   constructor(lib, ptr, editBuffer) {
     this.lib = lib;
     this.viewPtr = ptr;
@@ -627,17 +651,38 @@ class EditorView {
   }
   getLineInfo() {
     this.guard();
-    const textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr);
-    return this.lib.textBufferViewGetLineInfo(textBufferViewPtr);
+    return this.lib.editorViewGetLineInfo(this.viewPtr);
   }
   getLogicalLineInfo() {
     this.guard();
-    const textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr);
-    return this.lib.textBufferViewGetLogicalLineInfo(textBufferViewPtr);
+    return this.lib.editorViewGetLogicalLineInfo(this.viewPtr);
+  }
+  get extmarks() {
+    if (!this._extmarksController) {
+      this._extmarksController = createExtmarksController(this.editBuffer, this);
+    }
+    return this._extmarksController;
+  }
+  setPlaceholderStyledText(chunks) {
+    this.guard();
+    this.lib.editorViewSetPlaceholderStyledText(this.viewPtr, chunks);
+  }
+  setTabIndicator(indicator) {
+    this.guard();
+    const codePoint = typeof indicator === "string" ? indicator.codePointAt(0) ?? 0 : indicator;
+    this.lib.editorViewSetTabIndicator(this.viewPtr, codePoint);
+  }
+  setTabIndicatorColor(color) {
+    this.guard();
+    this.lib.editorViewSetTabIndicatorColor(this.viewPtr, color);
   }
   destroy() {
     if (this._destroyed)
       return;
+    if (this._extmarksController) {
+      this._extmarksController.destroy();
+      this._extmarksController = undefined;
+    }
     this._destroyed = true;
     this.lib.destroyEditorView(this.viewPtr);
   }
@@ -816,6 +861,14 @@ class SyntaxStyle {
     this.guard();
     return this.mergedCache.size;
   }
+  getAllStyles() {
+    this.guard();
+    return new Map(this.styleDefs);
+  }
+  getRegisteredNames() {
+    this.guard();
+    return Array.from(this.styleDefs.keys());
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -2150,6 +2203,13 @@ class BoxRenderable extends Renderable {
       this.applyYogaGap(options);
     }
   }
+  initializeBorder() {
+    if (this._border === false) {
+      this._border = true;
+      this.borderSides = getBorderSides(this._border);
+      this.applyYogaBorders();
+    }
+  }
   get customBorderChars() {
     return this._customBorderCharsObj;
   }
@@ -2184,9 +2244,10 @@ class BoxRenderable extends Renderable {
   }
   set borderStyle(value) {
     let _value = value ?? this._defaultOptions.borderStyle;
-    if (this._borderStyle !== _value) {
+    if (this._borderStyle !== _value || !this._border) {
       this._borderStyle = _value;
       this._customBorderChars = undefined;
+      this.initializeBorder();
       this.requestRender();
     }
   }
@@ -2197,6 +2258,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.borderColor);
     if (this._borderColor !== newColor) {
       this._borderColor = newColor;
+      this.initializeBorder();
       this.requestRender();
     }
   }
@@ -2207,6 +2269,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.focusedBorderColor);
     if (this._focusedBorderColor !== newColor) {
       this._focusedBorderColor = newColor;
+      this.initializeBorder();
       if (this._focused) {
         this.requestRender();
       }
@@ -2312,6 +2375,8 @@ class TextBufferRenderable extends Renderable {
   _selectionFg;
   _wrapMode = "word";
   lastLocalSelection = null;
+  _tabIndicator;
+  _tabIndicatorColor;
   textBuffer;
   textBufferView;
   _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
@@ -2322,7 +2387,9 @@ class TextBufferRenderable extends Renderable {
     selectionFg: undefined,
     selectable: true,
     attributes: 0,
-    wrapMode: "word"
+    wrapMode: "word",
+    tabIndicator: undefined,
+    tabIndicatorColor: undefined
   };
   constructor(ctx, options) {
     super(ctx, options);
@@ -2333,6 +2400,8 @@ class TextBufferRenderable extends Renderable {
     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._tabIndicator = options.tabIndicator ?? this._defaultOptions.tabIndicator;
+    this._tabIndicatorColor = options.tabIndicatorColor ? parseColor(options.tabIndicatorColor) : this._defaultOptions.tabIndicatorColor;
     this.textBuffer = TextBuffer.create(this._ctx.widthMethod);
     this.textBufferView = TextBufferView.create(this.textBuffer);
     const style = SyntaxStyle.create();
@@ -2342,6 +2411,12 @@ class TextBufferRenderable extends Renderable {
     this.textBuffer.setDefaultFg(this._defaultFg);
     this.textBuffer.setDefaultBg(this._defaultBg);
     this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+    if (this._tabIndicator !== undefined) {
+      this.textBufferView.setTabIndicator(this._tabIndicator);
+    }
+    if (this._tabIndicatorColor !== undefined) {
+      this.textBufferView.setTabIndicatorColor(this._tabIndicatorColor);
+    }
     if (this._wrapMode !== "none" && this.width > 0) {
       this.updateWrapWidth(this.width);
     }
@@ -2428,6 +2503,31 @@ class TextBufferRenderable extends Renderable {
       this.requestRender();
     }
   }
+  get tabIndicator() {
+    return this._tabIndicator;
+  }
+  set tabIndicator(value) {
+    if (this._tabIndicator !== value) {
+      this._tabIndicator = value;
+      if (value !== undefined) {
+        this.textBufferView.setTabIndicator(value);
+      }
+      this.requestRender();
+    }
+  }
+  get tabIndicatorColor() {
+    return this._tabIndicatorColor;
+  }
+  set tabIndicatorColor(value) {
+    const newColor = value ? parseColor(value) : undefined;
+    if (this._tabIndicatorColor !== newColor) {
+      this._tabIndicatorColor = newColor;
+      if (newColor !== undefined) {
+        this.textBufferView.setTabIndicatorColor(newColor);
+      }
+      this.requestRender();
+    }
+  }
   onResize(width, height) {
     this.textBufferView.setViewportSize(width, height);
     if (this.lastLocalSelection) {
@@ -2472,8 +2572,9 @@ class TextBufferRenderable extends Renderable {
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      if (this._wrapMode !== "none" && this.width !== width) {
-        this.updateWrapWidth(width);
+      const effectiveWidth = isNaN(width) ? 1 : width;
+      if (this._wrapMode !== "none" && this.width !== effectiveWidth) {
+        this.updateWrapWidth(effectiveWidth);
       } else {
         this.updateLineInfo();
       }
@@ -2541,8 +2642,14 @@ class CodeRenderable extends TextBufferRenderable {
   _isHighlighting = false;
   _treeSitterClient;
   _pendingRehighlight = false;
+  _pendingUpdate = false;
+  _currentHighlightId = 0;
+  _conceal;
+  _drawUnstyledText;
   _contentDefaultOptions = {
-    content: ""
+    content: "",
+    conceal: true,
+    drawUnstyledText: true
   };
   constructor(ctx, options) {
     super(ctx, options);
@@ -2550,6 +2657,8 @@ class CodeRenderable extends TextBufferRenderable {
     this._filetype = options.filetype;
     this._syntaxStyle = options.syntaxStyle;
     this._treeSitterClient = options.treeSitterClient ?? getTreeSitterClient();
+    this._conceal = options.conceal ?? this._contentDefaultOptions.conceal;
+    this._drawUnstyledText = options.drawUnstyledText ?? this._contentDefaultOptions.drawUnstyledText;
     this.updateContent(this._content);
   }
   get content() {
@@ -2558,7 +2667,7 @@ class CodeRenderable extends TextBufferRenderable {
   set content(value) {
     if (this._content !== value) {
       this._content = value;
-      this.updateContent(value);
+      this.scheduleUpdate();
     }
   }
   get filetype() {
@@ -2567,7 +2676,7 @@ class CodeRenderable extends TextBufferRenderable {
   set filetype(value) {
     if (this._filetype !== value) {
       this._filetype = value;
-      this.updateContent(this._content);
+      this.scheduleUpdate();
     }
   }
   get syntaxStyle() {
@@ -2576,36 +2685,70 @@ class CodeRenderable extends TextBufferRenderable {
   set syntaxStyle(value) {
     if (this._syntaxStyle !== value) {
       this._syntaxStyle = value;
-      this.updateContent(this._content);
+      this.scheduleUpdate();
+    }
+  }
+  get conceal() {
+    return this._conceal;
+  }
+  set conceal(value) {
+    if (this._conceal !== value) {
+      this._conceal = value;
+      this.scheduleUpdate();
+    }
+  }
+  get drawUnstyledText() {
+    return this._drawUnstyledText;
+  }
+  set drawUnstyledText(value) {
+    if (this._drawUnstyledText !== value) {
+      this._drawUnstyledText = value;
+      this.scheduleUpdate();
     }
   }
+  scheduleUpdate() {
+    if (this._pendingUpdate)
+      return;
+    this._pendingUpdate = true;
+    queueMicrotask(() => {
+      this._pendingUpdate = false;
+      this.updateContent(this._content);
+    });
+  }
   async updateContent(content) {
     if (content.length === 0)
       return;
-    if (this._isHighlighting) {
-      this._pendingRehighlight = true;
-      return;
-    }
     if (!this._filetype) {
       this.fallback(content);
       return;
     }
-    this.fallback(content);
+    this._currentHighlightId++;
+    const highlightId = this._currentHighlightId;
+    if (this._drawUnstyledText) {
+      this.fallback(content);
+    }
     this._isHighlighting = true;
+    this._pendingRehighlight = false;
     try {
-      const styledText = await treeSitterToStyledText(content, this._filetype, this._syntaxStyle, this._treeSitterClient);
+      const styledText = await treeSitterToStyledText(content, this._filetype, this._syntaxStyle, this._treeSitterClient, {
+        conceal: { enabled: this._conceal }
+      });
+      if (highlightId !== this._currentHighlightId) {
+        return;
+      }
       if (this.isDestroyed)
         return;
       this.textBuffer.setStyledText(styledText);
       this.updateTextInfo();
     } catch (error) {
+      if (highlightId !== this._currentHighlightId) {
+        return;
+      }
       console.warn("Code highlighting failed, falling back to plain text:", error);
       this.fallback(content);
     } finally {
-      this._isHighlighting = false;
-      if (this._pendingRehighlight) {
-        this._pendingRehighlight = false;
-        process.nextTick(() => this.updateContent(this._content));
+      if (highlightId === this._currentHighlightId) {
+        this._isHighlighting = false;
       }
     }
   }
@@ -2628,6 +2771,9 @@ class CodeRenderable extends TextBufferRenderable {
     ];
     return new StyledText(chunks);
   }
+  getLineHighlights(lineIdx) {
+    return this.textBuffer.getLineHighlights(lineIdx);
+  }
 }
 // src/renderables/TextNode.ts
 var BrandedTextNodeRenderable = Symbol.for("@opentui/core/TextNodeRenderable");
@@ -3124,7 +3270,7 @@ class InputRenderable extends Renderable {
         this.deleteCharacter("forward");
         return true;
       case "return":
-      case "enter":
+      case "linefeed":
         if (this._value !== this._lastCommittedValue) {
           this._lastCommittedValue = this._value;
           this.emit("change" /* CHANGE */, this._value);
@@ -4479,7 +4625,7 @@ class SelectRenderable extends Renderable {
         this.moveDown(isShift ? this._fastScrollStep : 1);
         return true;
       case "return":
-      case "enter":
+      case "linefeed":
         this.selectCurrent();
         return true;
     }
@@ -4798,7 +4944,7 @@ class TabSelectRenderable extends Renderable {
         this.moveRight();
         return true;
       case "return":
-      case "enter":
+      case "linefeed":
         this.selectCurrent();
         return true;
     }
@@ -4999,6 +5145,8 @@ class EditBufferRenderable extends Renderable {
   _showCursor = true;
   _cursorColor;
   lastLocalSelection = null;
+  _tabIndicator;
+  _tabIndicatorColor;
   _cursorChangeListener = undefined;
   _contentChangeListener = undefined;
   editBuffer;
@@ -5013,7 +5161,9 @@ class EditBufferRenderable extends Renderable {
     wrapMode: "word",
     scrollMargin: 0.2,
     showCursor: true,
-    cursorColor: RGBA.fromValues(1, 1, 1, 1)
+    cursorColor: RGBA.fromValues(1, 1, 1, 1),
+    tabIndicator: undefined,
+    tabIndicatorColor: undefined
   };
   constructor(ctx, options) {
     super(ctx, options);
@@ -5027,6 +5177,8 @@ class EditBufferRenderable extends Renderable {
     this._scrollMargin = options.scrollMargin ?? this._defaultOptions.scrollMargin;
     this._showCursor = options.showCursor ?? this._defaultOptions.showCursor;
     this._cursorColor = parseColor(options.cursorColor ?? this._defaultOptions.cursorColor);
+    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);
@@ -5037,6 +5189,12 @@ class EditBufferRenderable extends Renderable {
     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.setupMeasureFunc();
     this.setupEventListeners(options);
   }
@@ -5047,8 +5205,8 @@ class EditBufferRenderable extends Renderable {
       if (this._cursorChangeListener) {
         const cursor = this.editBuffer.getCursorPosition();
         this._cursorChangeListener({
-          line: cursor.line,
-          visualColumn: cursor.visualColumn
+          line: cursor.row,
+          visualColumn: cursor.col
         });
       }
     });
@@ -5063,7 +5221,7 @@ class EditBufferRenderable extends Renderable {
   get plainText() {
     return this.editBuffer.getText();
   }
-  get cursor() {
+  get logicalCursor() {
     return this.editBuffer.getCursorPosition();
   }
   get visualCursor() {
@@ -5164,6 +5322,31 @@ class EditBufferRenderable extends Renderable {
       this.requestRender();
     }
   }
+  get tabIndicator() {
+    return this._tabIndicator;
+  }
+  set tabIndicator(value) {
+    if (this._tabIndicator !== value) {
+      this._tabIndicator = value;
+      if (value !== undefined) {
+        this.editorView.setTabIndicator(value);
+      }
+      this.requestRender();
+    }
+  }
+  get tabIndicatorColor() {
+    return this._tabIndicatorColor;
+  }
+  set tabIndicatorColor(value) {
+    const newColor = value ? parseColor(value) : undefined;
+    if (this._tabIndicatorColor !== newColor) {
+      this._tabIndicatorColor = newColor;
+      if (newColor !== undefined) {
+        this.editorView.setTabIndicatorColor(newColor);
+      }
+      this.requestRender();
+    }
+  }
   onResize(width, height) {
     this.editorView.setViewportSize(width, height);
     if (this.lastLocalSelection) {
@@ -5213,10 +5396,12 @@ class EditBufferRenderable extends Renderable {
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      if (this._wrapMode !== "none" && this.width !== width) {
-        this.editorView.setViewportSize(width, height);
+      const effectiveHeight = isNaN(height) ? 1 : height;
+      const effectiveWidth = isNaN(width) ? 1 : width;
+      if (this._wrapMode !== "none" && this.width !== effectiveWidth) {
+        this.editorView.setViewportSize(effectiveWidth, effectiveHeight);
       } else {
-        this.editorView.setViewportSize(width, height);
+        this.editorView.setViewportSize(effectiveWidth, effectiveHeight);
       }
       const lineInfo = this.editorView.getLogicalLineInfo();
       const measuredWidth = lineInfo.maxLineWidth;
@@ -5317,6 +5502,27 @@ class EditBufferRenderable extends Renderable {
   getLineHighlights(lineIdx) {
     return this.editBuffer.getLineHighlights(lineIdx);
   }
+  setText(text, opts) {
+    this.editBuffer.setText(text, opts);
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  clear() {
+    this.editBuffer.clear();
+    this.editBuffer.clearAllHighlights();
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  deleteRange(startLine, startCol, endLine, endCol) {
+    this.editBuffer.deleteRange(startLine, startCol, endLine, endCol);
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  insertText(text) {
+    this.editBuffer.insertText(text);
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
 }
 
 // src/lib/keymapping.ts
@@ -5365,7 +5571,8 @@ var defaultTextareaKeybindings = [
   { name: "backspace", action: "backspace" },
   { name: "delete", action: "delete" },
   { name: "return", action: "newline" },
-  { name: "enter", action: "newline" },
+  { name: "linefeed", action: "newline" },
+  { name: "return", meta: true, action: "submit" },
   { name: "z", ctrl: true, action: "undo" },
   { name: "Z", ctrl: true, shift: true, action: "redo" },
   { name: "y", ctrl: true, action: "redo" },
@@ -5388,17 +5595,16 @@ class TextareaRenderable extends EditBufferRenderable {
   _unfocusedTextColor;
   _focusedBackgroundColor;
   _focusedTextColor;
-  _placeholderColor;
   _keyBindingsMap;
   _actionHandlers;
+  _initialValueSet = false;
+  _submitListener = undefined;
   static defaults = {
-    value: "",
     backgroundColor: "transparent",
     textColor: "#FFFFFF",
     focusedBackgroundColor: "transparent",
     focusedTextColor: "#FFFFFF",
-    placeholder: null,
-    placeholderColor: "#666666"
+    placeholder: null
   };
   constructor(ctx, options) {
     const defaults = TextareaRenderable.defaults;
@@ -5413,14 +5619,29 @@ class TextareaRenderable extends EditBufferRenderable {
     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._submitListener = options.onSubmit;
+    if (options.initialValue) {
+      this.setText(options.initialValue);
+      this._initialValueSet = true;
+    }
     this.updateColors();
-    this.editBuffer.setPlaceholder(this._placeholder);
-    this.editBuffer.setPlaceholderColor(this._placeholderColor);
+    this.applyPlaceholder(this._placeholder);
+  }
+  applyPlaceholder(placeholder) {
+    if (placeholder === null) {
+      this.editorView.setPlaceholderStyledText([]);
+      return;
+    }
+    if (typeof placeholder === "string") {
+      const defaultGray = fg("#666666");
+      const chunks = [defaultGray(placeholder)];
+      this.editorView.setPlaceholderStyledText(chunks);
+    } else {
+      this.editorView.setPlaceholderStyledText(placeholder.chunks);
+    }
   }
   buildActionHandlers() {
     return new Map([
@@ -5450,11 +5671,12 @@ class TextareaRenderable extends EditBufferRenderable {
       ["select-word-forward", () => this.moveWordForward({ select: true })],
       ["select-word-backward", () => this.moveWordBackward({ select: true })],
       ["delete-word-forward", () => this.deleteWordForward()],
-      ["delete-word-backward", () => this.deleteWordBackward()]
+      ["delete-word-backward", () => this.deleteWordBackward()],
+      ["submit", () => this.submit()]
     ]);
   }
-  handlePaste(text) {
-    this.insertText(text);
+  handlePaste(event) {
+    this.insertText(event.text);
   }
   handleKeyPress(key) {
     const keyName = typeof key === "string" ? key : key.name;
@@ -5489,17 +5711,6 @@ class TextareaRenderable extends EditBufferRenderable {
     }
     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;
@@ -5606,7 +5817,7 @@ class TextareaRenderable extends EditBufferRenderable {
     const select = options?.select ?? false;
     this.handleShiftSelection(select, true);
     const eol = this.editBuffer.getEOL();
-    this.editBuffer.setCursor(eol.line, eol.visualColumn);
+    this.editBuffer.setCursor(eol.row, eol.col);
     this.handleShiftSelection(select, false);
     this.requestRender();
     return true;
@@ -5624,8 +5835,8 @@ class TextareaRenderable extends EditBufferRenderable {
   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);
+    if (eol.col > cursor.col) {
+      this.editBuffer.deleteRange(cursor.row, cursor.col, eol.row, eol.col);
     }
     this.requestRender();
     return true;
@@ -5668,7 +5879,7 @@ class TextareaRenderable extends EditBufferRenderable {
     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.editBuffer.deleteRange(currentCursor.row, currentCursor.col, nextWord.row, nextWord.col);
     }
     this._ctx.clearSelection();
     this.requestRender();
@@ -5682,7 +5893,7 @@ class TextareaRenderable extends EditBufferRenderable {
     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.editBuffer.deleteRange(prevWord.row, prevWord.col, currentCursor.row, currentCursor.col);
     }
     this._ctx.clearSelection();
     this.requestRender();
@@ -5721,7 +5932,7 @@ class TextareaRenderable extends EditBufferRenderable {
   set placeholder(value) {
     if (this._placeholder !== value) {
       this._placeholder = value;
-      this.editBuffer.setPlaceholder(value);
+      this.applyPlaceholder(value);
       this.requestRender();
     }
   }
@@ -5759,14 +5970,31 @@ class TextareaRenderable extends EditBufferRenderable {
       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();
+  set initialValue(value) {
+    if (!this._initialValueSet) {
+      this.setText(value);
+      this._initialValueSet = true;
     }
   }
+  submit() {
+    if (this._submitListener) {
+      this._submitListener({});
+    }
+    return true;
+  }
+  set onSubmit(handler) {
+    this._submitListener = handler;
+  }
+  get onSubmit() {
+    return this._submitListener;
+  }
+  set keyBindings(bindings) {
+    const mergedBindings = mergeKeyBindings(defaultTextareaKeybindings, bindings);
+    this._keyBindingsMap = buildKeyBindingsMap(mergedBindings);
+  }
+  get extmarks() {
+    return this.editorView.extmarks;
+  }
 }
 export {
   yellow,
@@ -5839,6 +6067,7 @@ export {
   cyan,
   createTimeline,
   createTextAttributes,
+  createExtmarksController,
   createCliRenderer,
   coordinateToCharacterIndex,
   convertThemeToStyles,
@@ -5894,6 +6123,7 @@ export {
   TabSelect,
   SyntaxStyle,
   StyledText,
+  StdinBuffer,
   SliderRenderable,
   Selection,
   SelectRenderableEvents,
@@ -5925,6 +6155,7 @@ export {
   Generic,
   FrameBufferRenderable,
   FrameBuffer,
+  ExtmarksController,
   EditorView,
   EditBuffer,
   DistortionEffect,
@@ -5948,5 +6179,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=C45C47BFE87C68C464756E2164756E21
+//# debugId=52657F382323749F64756E2164756E21
 //# sourceMappingURL=index.js.map