@opentui/core 0.0.0-20250929-69eb6c87 → 0.0.0-20250930-a8fe63ce

package/index.js

@@ -7,6 +7,7 @@ import {
   CliRenderEvents,
   CliRenderer,
   ConsolePosition,
+  DataPathsManager,
   DebugOverlayCorner,
   Edge,
   Gutter,
@@ -30,6 +31,8 @@ import {
   TerminalConsole,
   TextAttributes,
   TextBuffer,
+  TreeSitterClient,
+  addDefaultParsers,
   bg,
   bgBlack,
   bgBlue,
@@ -53,7 +56,9 @@ import {
   brightWhite,
   brightYellow,
   capture,
+  clearEnvCache,
   convertGlobalToLocalSelection,
+  convertThemeToStyles,
   coordinateToCharacterIndex,
   createCliRenderer,
   createTextAttributes,
@@ -63,6 +68,7 @@ import {
   env,
   envRegistry,
   exports_src,
+  extToFiletype,
   fg,
   fonts,
   generateEnvColored,
@@ -70,7 +76,9 @@ import {
   getBorderFromSides,
   getBorderSides,
   getCharacterPositions,
+  getDataPaths,
   getObjectsInViewport,
+  getTreeSitterClient,
   green,
   h,
   hastToStyledText,
@@ -83,6 +91,7 @@ import {
   isValidPercentage,
   italic,
   magenta,
+  main,
   maybeMakeRenderable,
   measureText,
   nonAlphanumericKeys,
@@ -103,6 +112,7 @@ import {
   parsePositionType,
   parseUnit,
   parseWrap,
+  pathToFiletype,
   red,
   registerEnvVar,
   renderFontToFrameBuffer,
@@ -113,12 +123,14 @@ import {
   strikethrough,
   stringToStyledText,
   t,
+  treeSitterToStyledText,
+  treeSitterToTextChunks,
   underline,
   visualizeRenderableTree,
   white,
   wrapWithDelegates,
   yellow
-} from "./index-yd5hcdcm.js";
+} from "./index-h87jjatk.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1414,6 +1426,353 @@ class BoxRenderable extends Renderable {
     }
   }
 }
+// src/renderables/TextBufferRenderable.ts
+class TextBufferRenderable extends Renderable {
+  selectable = true;
+  _defaultFg;
+  _defaultBg;
+  _defaultAttributes;
+  _selectionBg;
+  _selectionFg;
+  _wrap = false;
+  _wrapMode = "word";
+  lastLocalSelection = null;
+  textBuffer;
+  _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
+  _defaultOptions = {
+    fg: RGBA.fromValues(1, 1, 1, 1),
+    bg: RGBA.fromValues(0, 0, 0, 0),
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0,
+    wrap: true,
+    wrapMode: "word"
+  };
+  constructor(ctx, options) {
+    super(ctx, options);
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
+    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._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.setupMeasureFunc();
+    this.textBuffer.setDefaultFg(this._defaultFg);
+    this.textBuffer.setDefaultBg(this._defaultBg);
+    this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+    if (this._wrap && this.width > 0) {
+      this.updateWrapWidth(this.width);
+    }
+    this.updateTextInfo();
+  }
+  get plainText() {
+    return this.textBuffer.getPlainText();
+  }
+  get textLength() {
+    return this.textBuffer.length;
+  }
+  get fg() {
+    return this._defaultFg;
+  }
+  set fg(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.fg);
+    if (this._defaultFg !== newColor) {
+      this._defaultFg = newColor;
+      this.textBuffer.setDefaultFg(this._defaultFg);
+      this.onFgChanged(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 bg() {
+    return this._defaultBg;
+  }
+  set bg(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.bg);
+    if (this._defaultBg !== newColor) {
+      this._defaultBg = newColor;
+      this.textBuffer.setDefaultBg(this._defaultBg);
+      this.onBgChanged(newColor);
+      this.requestRender();
+    }
+  }
+  get attributes() {
+    return this._defaultAttributes;
+  }
+  set attributes(value) {
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value;
+      this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.onAttributesChanged(value);
+      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.requestRender();
+    }
+  }
+  onResize(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.textBuffer.resetLocalSelection();
+      return true;
+    }
+    return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
+  }
+  updateTextInfo() {
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
+    }
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  updateLineInfo() {
+    const lineInfo = this.textBuffer.lineInfo;
+    this._lineInfo.lineStarts = lineInfo.lineStarts;
+    this._lineInfo.lineWidths = lineInfo.lineWidths;
+    this._lineInfo.maxLineWidth = lineInfo.maxLineWidth;
+  }
+  updateWrapWidth(width) {
+    this.textBuffer.setWrapWidth(width);
+    this.updateLineInfo();
+  }
+  setupMeasureFunc() {
+    const measureFunc = (width, widthMode, height, heightMode) => {
+      if (this._wrap && this.width !== width) {
+        this.updateWrapWidth(width);
+      } else {
+        this.updateLineInfo();
+      }
+      const measuredWidth = this._lineInfo.maxLineWidth;
+      const measuredHeight = this._lineInfo.lineStarts.length;
+      return {
+        width: Math.max(1, measuredWidth),
+        height: Math.max(1, measuredHeight)
+      };
+    };
+    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;
+    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.textBuffer.getSelectedText();
+  }
+  hasSelection() {
+    return this.textBuffer.hasSelection();
+  }
+  getSelection() {
+    return this.textBuffer.getSelection();
+  }
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    this.markClean();
+    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
+    this.renderSelf(buffer);
+  }
+  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);
+    }
+  }
+  destroy() {
+    this.textBuffer.destroy();
+    super.destroy();
+  }
+  onFgChanged(newColor) {}
+  onBgChanged(newColor) {}
+  onAttributesChanged(newAttributes) {}
+}
+
+// src/renderables/Code.ts
+class CodeRenderable extends TextBufferRenderable {
+  _content;
+  _filetype;
+  _syntaxStyle;
+  _isHighlighting = false;
+  _treeSitterClient;
+  _pendingRehighlight = false;
+  _contentDefaultOptions = {
+    content: ""
+  };
+  constructor(ctx, options) {
+    super(ctx, options);
+    this._content = options.content ?? this._contentDefaultOptions.content;
+    this._filetype = options.filetype;
+    this._syntaxStyle = options.syntaxStyle;
+    this._treeSitterClient = options.treeSitterClient ?? getTreeSitterClient();
+    this.updateContent(this._content);
+  }
+  get content() {
+    return this._content;
+  }
+  set content(value) {
+    if (this._content !== value) {
+      this._content = value;
+      this.updateContent(value);
+    }
+  }
+  get filetype() {
+    return this._filetype;
+  }
+  set filetype(value) {
+    if (this._filetype !== value) {
+      this._filetype = value;
+      this.updateContent(this._content);
+    }
+  }
+  get syntaxStyle() {
+    return this._syntaxStyle;
+  }
+  set syntaxStyle(value) {
+    if (this._syntaxStyle !== value) {
+      this._syntaxStyle = value;
+      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._isHighlighting = true;
+    try {
+      const styledText = await treeSitterToStyledText(content, this._filetype, this._syntaxStyle, this._treeSitterClient);
+      if (this.isDestroyed)
+        return;
+      this.textBuffer.setStyledText(styledText);
+      this.updateTextInfo();
+    } catch (error) {
+      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));
+      }
+    }
+  }
+  fallback(content) {
+    const fallbackStyledText = this.createFallbackStyledText(content);
+    if (this.isDestroyed)
+      return;
+    this.textBuffer.setStyledText(fallbackStyledText);
+    this.updateTextInfo();
+  }
+  createFallbackStyledText(content) {
+    const chunks = [
+      {
+        __isChunk: true,
+        text: content,
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes
+      }
+    ];
+    return new StyledText(chunks);
+  }
+}
 // src/renderables/FrameBuffer.ts
 class FrameBufferRenderable extends Renderable {
   frameBuffer;
@@ -1671,52 +2030,19 @@ class RootTextNodeRenderable extends TextNodeRenderable {
 }
 
 // src/renderables/Text.ts
-class TextRenderable extends Renderable {
-  selectable = true;
+class TextRenderable extends TextBufferRenderable {
   _text;
   _hasManualStyledText = false;
-  _defaultFg;
-  _defaultBg;
-  _defaultAttributes;
-  _selectionBg;
-  _selectionFg;
-  _wrap = false;
-  _wrapMode = "word";
-  lastLocalSelection = null;
-  textBuffer;
-  _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
   rootTextNode;
-  _defaultOptions = {
-    content: "",
-    fg: RGBA.fromValues(1, 1, 1, 1),
-    bg: RGBA.fromValues(0, 0, 0, 0),
-    selectionBg: undefined,
-    selectionFg: undefined,
-    selectable: true,
-    attributes: 0,
-    wrap: true,
-    wrapMode: "word"
+  _contentDefaultOptions = {
+    content: ""
   };
   constructor(ctx, options) {
     super(ctx, options);
-    const content = options.content ?? this._defaultOptions.content;
+    const content = options.content ?? this._contentDefaultOptions.content;
     const styledText = typeof content === "string" ? stringToStyledText(content) : content;
     this._text = styledText;
-    this._hasManualStyledText = !!options.content;
-    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
-    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
-    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._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.setupMeasureFunc();
-    this.textBuffer.setDefaultFg(this._defaultFg);
-    this.textBuffer.setDefaultBg(this._defaultBg);
-    this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+    this._hasManualStyledText = options.content !== undefined && content !== "";
     this.rootTextNode = new RootTextNodeRenderable(ctx, {
       id: `${this.id}-root`,
       fg: this._defaultFg,
@@ -1724,11 +2050,6 @@ class TextRenderable extends Renderable {
       attributes: this._defaultAttributes
     }, this);
     this.updateTextBuffer(styledText);
-    this._text.mount(this);
-    if (this._wrap && this.width > 0) {
-      this.updateWrapWidth(this.width);
-    }
-    this.updateTextInfo();
   }
   updateTextBuffer(styledText) {
     this.textBuffer.setStyledText(styledText);
@@ -1738,12 +2059,6 @@ class TextRenderable extends Renderable {
   get content() {
     return this._text;
   }
-  get plainText() {
-    return this.textBuffer.getPlainText();
-  }
-  get textLength() {
-    return this.textBuffer.length;
-  }
   get chunks() {
     return this._text.chunks;
   }
@@ -1755,166 +2070,26 @@ class TextRenderable extends Renderable {
     const styledText = typeof value === "string" ? stringToStyledText(value) : value;
     if (this._text !== styledText) {
       this._text = styledText;
-      styledText.mount(this);
       this.updateTextBuffer(styledText);
       this.updateTextInfo();
     }
   }
-  get fg() {
-    return this._defaultFg;
-  }
-  set fg(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.fg);
-    this.rootTextNode.fg = newColor;
-    if (this._defaultFg !== newColor) {
-      this._defaultFg = newColor;
-      this.textBuffer.setDefaultFg(this._defaultFg);
-      this.rootTextNode.fg = 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 bg() {
-    return this._defaultBg;
-  }
-  set bg(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.bg);
-    this.rootTextNode.bg = newColor;
-    if (this._defaultBg !== newColor) {
-      this._defaultBg = newColor;
-      this.textBuffer.setDefaultBg(this._defaultBg);
-      this.rootTextNode.bg = newColor;
-      this.requestRender();
-    }
-  }
-  get attributes() {
-    return this._defaultAttributes;
-  }
-  set attributes(value) {
-    if (this._defaultAttributes !== value) {
-      this._defaultAttributes = value;
-      this.textBuffer.setDefaultAttributes(this._defaultAttributes);
-      this.rootTextNode.attributes = value;
-      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.requestRender();
-    }
-  }
-  onResize(width, height) {
-    if (this.lastLocalSelection) {
-      const changed = this.updateLocalSelection(this.lastLocalSelection);
-      if (changed) {
-        this.requestRender();
-      }
-    }
-  }
-  updateLocalSelection(localSelection) {
-    if (!localSelection?.isActive) {
-      this.textBuffer.resetLocalSelection();
-      return true;
-    }
-    return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
-  }
-  updateTextInfo() {
-    if (this.lastLocalSelection) {
-      const changed = this.updateLocalSelection(this.lastLocalSelection);
-      if (changed) {
-        this.requestRender();
-      }
-    }
-    this.yogaNode.markDirty();
-    this.requestRender();
-  }
-  updateLineInfo() {
-    const lineInfo = this.textBuffer.lineInfo;
-    this._lineInfo.lineStarts = lineInfo.lineStarts;
-    this._lineInfo.lineWidths = lineInfo.lineWidths;
-    this._lineInfo.maxLineWidth = lineInfo.maxLineWidth;
-  }
-  updateWrapWidth(width) {
-    this.textBuffer.setWrapWidth(width);
-    this.updateLineInfo();
-  }
-  setupMeasureFunc() {
-    const measureFunc = (width, widthMode, height, heightMode) => {
-      if (this._wrap) {
-        if (this.width !== width) {
-          this.updateWrapWidth(width);
-        }
-      } else {
-        this.updateLineInfo();
-      }
-      const measuredWidth = this._lineInfo.maxLineWidth;
-      const measuredHeight = this._lineInfo.lineStarts.length;
-      return {
-        width: Math.max(1, measuredWidth),
-        height: Math.max(1, measuredHeight)
-      };
-    };
-    this.yogaNode.setMeasureFunc(measureFunc);
-  }
   insertChunk(chunk, index) {
-    this.textBuffer.insertChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
-    this.updateTextInfo();
+    super.insertChunk(chunk, index);
     this.clearChunks(this._text);
   }
-  removeChunk(chunk) {
+  removeChunkByObject(chunk) {
     const index = this._text.chunks.indexOf(chunk);
     if (index === -1)
       return;
-    this.textBuffer.removeChunkGroup(index);
-    this.updateTextInfo();
+    super.removeChunk(index);
     this.clearChunks(this._text);
   }
-  replaceChunk(chunk, oldChunk) {
+  replaceChunkByObject(chunk, oldChunk) {
     const index = this._text.chunks.indexOf(oldChunk);
     if (index === -1)
       return;
-    this.textBuffer.replaceChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
-    this.updateTextInfo();
+    super.replaceChunk(index, chunk);
     this.clearChunks(this._text);
   }
   updateTextFromNodes() {
@@ -1925,7 +2100,7 @@ class TextRenderable extends Renderable {
         attributes: this._defaultAttributes
       });
       this.textBuffer.setStyledText(new StyledText(chunks));
-      this.updateLineInfo();
+      this.refreshLocalSelection();
       this.yogaNode.markDirty();
     }
   }
@@ -1949,59 +2124,23 @@ class TextRenderable extends Renderable {
     this.rootTextNode.clear();
     const emptyStyledText = stringToStyledText("");
     this._text = emptyStyledText;
-    emptyStyledText.mount(this);
     this.updateTextBuffer(emptyStyledText);
     this.updateTextInfo();
     this.requestRender();
   }
-  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.textBuffer.getSelectedText();
-  }
-  hasSelection() {
-    return this.textBuffer.hasSelection();
-  }
-  getSelection() {
-    return this.textBuffer.getSelection();
-  }
   onLifecyclePass = () => {
     this.updateTextFromNodes();
   };
-  render(buffer, deltaTime) {
-    if (!this.visible)
-      return;
-    this.markClean();
-    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
-    this.renderSelf(buffer);
+  onFgChanged(newColor) {
+    this.rootTextNode.fg = newColor;
   }
-  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);
-    }
+  onBgChanged(newColor) {
+    this.rootTextNode.bg = newColor;
+  }
+  onAttributesChanged(newAttributes) {
+    this.rootTextNode.attributes = newAttributes;
   }
   destroy() {
-    this.textBuffer.destroy();
     this.rootTextNode.children.length = 0;
     super.destroy();
   }
@@ -4170,7 +4309,10 @@ export {
   white,
   vstyles,
   visualizeRenderableTree,
+  main as updateAssets,
   underline,
+  treeSitterToTextChunks,
+  treeSitterToStyledText,
   t,
   stringToStyledText,
   strikethrough,
@@ -4181,6 +4323,7 @@ export {
   renderFontToFrameBuffer,
   registerEnvVar,
   red,
+  pathToFiletype,
   parseWrap,
   parseUnit,
   parsePositionType,
@@ -4213,6 +4356,8 @@ export {
   hastToStyledText,
   h,
   green,
+  getTreeSitterClient,
+  getDataPaths,
   getCharacterPositions,
   getBorderSides,
   getBorderFromSides,
@@ -4220,6 +4365,7 @@ export {
   generateEnvColored,
   fonts,
   fg,
+  extToFiletype,
   envRegistry,
   env,
   engine,
@@ -4230,7 +4376,9 @@ export {
   createTextAttributes,
   createCliRenderer,
   coordinateToCharacterIndex,
+  convertThemeToStyles,
   convertGlobalToLocalSelection,
+  clearEnvCache,
   capture,
   brightYellow,
   brightWhite,
@@ -4261,12 +4409,15 @@ export {
   applyGrayscale,
   applyChromaticAberration,
   applyAsciiArt,
+  addDefaultParsers,
   exports_src as Yoga,
   VignetteEffect,
   VRenderable,
+  TreeSitterClient,
   Timeline,
   TextRenderable,
   TextNodeRenderable,
+  TextBufferRenderable,
   TextBuffer,
   TextAttributes,
   Text,
@@ -4305,7 +4456,9 @@ export {
   FrameBuffer,
   DistortionEffect,
   DebugOverlayCorner,
+  DataPathsManager,
   ConsolePosition,
+  CodeRenderable,
   CliRenderer,
   CliRenderEvents,
   BrightnessEffect,
@@ -4322,5 +4475,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=A2F53C1AC6A2B62F64756E2164756E21
+//# debugId=E76E0BC5C702E8AC64756E2164756E21
 //# sourceMappingURL=index.js.map