@fairyhunter13/opentui-core 0.1.130 → 0.1.131

package/{index-3dryhc1d.js → index-gwfqqvw5.js}

@@ -6,18 +6,18 @@ import {
   BaseRenderable,
   BorderCharArrays,
   BorderChars,
+  BoxRenderable,
   CliRenderEvents,
   CliRenderer,
+  CodeRenderable,
   ConsolePosition,
   DataPathsManager,
   DebugOverlayCorner,
-  Edge,
   EditBuffer,
   EditBufferRenderable,
   EditBufferRenderableEvents,
   EditorView,
   ExtmarksController,
-  Gutter,
   InternalKeyHandler,
   KeyEvent,
   KeyHandler,
@@ -36,16 +36,22 @@ import {
   RenderableEvents,
   RendererControlState,
   RootRenderable,
+  RootTextNodeRenderable,
   Selection,
   SpanInfoStruct,
   StdinParser,
   StyledText,
+  SyntaxStyle,
   SystemClock,
   TargetChannel,
   TerminalConsole,
   TerminalPalette,
   TextAttributes,
   TextBuffer,
+  TextBufferRenderable,
+  TextBufferView,
+  TextNodeRenderable,
+  TextRenderable,
   TreeSitterClient,
   __export,
   addDefaultParsers,
@@ -78,6 +84,7 @@ import {
   capture,
   clearEnvCache,
   convertGlobalToLocalSelection,
+  convertThemeToStyles,
   coordinateToCharacterIndex,
   createCliRenderer,
   createExtmarksController,
@@ -117,9 +124,9 @@ import {
   isEditBufferRenderable,
   isRenderable,
   isStyledText,
+  isTextNodeRenderable,
   isVNode,
   isValidBorderStyle,
-  isValidPercentage,
   italic,
   link,
   magenta,
@@ -167,7 +174,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-pr4swpf9.js";
+} from "./index-t3rrpex7.js";
 
 // src/index.ts
 var exports_src2 = {};
@@ -408,320 +415,6 @@ __export(exports_src2, {
   ACHROMATOPSIA_MATRIX: () => ACHROMATOPSIA_MATRIX
 });
 
-// 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);
-  }
-  updateSelection(end, bgColor, fgColor) {
-    this.guard();
-    this.lib.textBufferViewUpdateSelection(this.viewPtr, 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);
-  }
-  updateLocalSelection(anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
-    this.guard();
-    return this.lib.textBufferViewUpdateLocalSelection(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);
-  }
-  setViewport(x, y, width, height) {
-    this.guard();
-    this.lib.textBufferViewSetViewport(this.viewPtr, x, y, 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);
-  }
-  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);
-  }
-  setTruncate(truncate) {
-    this.guard();
-    this.lib.textBufferViewSetTruncate(this.viewPtr, truncate);
-  }
-  measureForDimensions(width, height) {
-    this.guard();
-    return this.lib.textBufferViewMeasureForDimensions(this.viewPtr, width, height);
-  }
-  getVirtualLineCount() {
-    this.guard();
-    return this.lib.textBufferViewGetVirtualLineCount(this.viewPtr);
-  }
-  destroy() {
-    if (this._destroyed)
-      return;
-    this._destroyed = true;
-    this.lib.destroyTextBufferView(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();
-    const style = this.styleDefs.get(name);
-    if (style)
-      return style;
-    if (name.includes(".")) {
-      const baseName = name.split(".")[0];
-      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;
-  }
-  getAllStyles() {
-    this.guard();
-    return new Map(this.styleDefs);
-  }
-  getRegisteredNames() {
-    this.guard();
-    return Array.from(this.styleDefs.keys());
-  }
-  destroy() {
-    if (this._destroyed)
-      return;
-    this._destroyed = true;
-    this.nameCache.clear();
-    this.styleDefs.clear();
-    this.mergedCache.clear();
-    this.lib.destroySyntaxStyle(this.stylePtr);
-  }
-}
 // src/post/effects.ts
 class DistortionEffect {
   glitchChancePerSecond = 0.5;
@@ -3381,1262 +3074,122 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
     this.selectable = options.selectable ?? true;
     this.selectionHelper = new ASCIIFontSelectionHelper(() => this._text, () => this._font);
-    this.renderFontToBuffer();
-  }
-  get text() {
-    return this._text;
-  }
-  set text(value) {
-    this._text = value;
-    this.updateDimensions();
-    if (this.lastLocalSelection) {
-      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
-    }
-    this.renderFontToBuffer();
-    this.requestRender();
-  }
-  get font() {
-    return this._font;
-  }
-  set font(value) {
-    this._font = value;
-    this.updateDimensions();
-    if (this.lastLocalSelection) {
-      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
-    }
-    this.renderFontToBuffer();
-    this.requestRender();
-  }
-  get color() {
-    return this._color;
-  }
-  set color(value) {
-    this._color = value;
-    this.renderFontToBuffer();
-    this.requestRender();
-  }
-  get backgroundColor() {
-    return this._backgroundColor;
-  }
-  set backgroundColor(value) {
-    this._backgroundColor = value;
-    this.renderFontToBuffer();
-    this.requestRender();
-  }
-  updateDimensions() {
-    const measurements = measureText({ text: this._text, font: this._font });
-    this.width = measurements.width;
-    this.height = measurements.height;
-  }
-  shouldStartSelection(x, y) {
-    const localX = x - this.x;
-    const localY = y - this.y;
-    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
-  }
-  onSelectionChanged(selection) {
-    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
-    this.lastLocalSelection = localSelection;
-    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height);
-    if (changed) {
-      this.renderFontToBuffer();
-      this.requestRender();
-    }
-    return changed;
-  }
-  getSelectedText() {
-    const selection = this.selectionHelper.getSelection();
-    if (!selection)
-      return "";
-    return this._text.slice(selection.start, selection.end);
-  }
-  hasSelection() {
-    return this.selectionHelper.hasSelection();
-  }
-  onResize(width, height) {
-    super.onResize(width, height);
-    this.renderFontToBuffer();
-  }
-  renderFontToBuffer() {
-    if (this.isDestroyed)
-      return;
-    this.frameBuffer.clear(parseColor(this._backgroundColor));
-    renderFontToFrameBuffer(this.frameBuffer, {
-      text: this._text,
-      x: 0,
-      y: 0,
-      color: this.color,
-      backgroundColor: this._backgroundColor,
-      font: this._font
-    });
-    const selection = this.selectionHelper.getSelection();
-    if (selection && (this._selectionBg || this._selectionFg)) {
-      this.renderSelectionHighlight(selection);
-    }
-  }
-  renderSelectionHighlight(selection) {
-    if (!this._selectionBg && !this._selectionFg)
-      return;
-    const selectedText = this._text.slice(selection.start, selection.end);
-    if (!selectedText)
-      return;
-    const positions = getCharacterPositions(this._text, this._font);
-    const startX = positions[selection.start] || 0;
-    const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
-    if (this._selectionBg) {
-      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, parseColor(this._selectionBg));
-    }
-    if (this._selectionFg || this._selectionBg) {
-      renderFontToFrameBuffer(this.frameBuffer, {
-        text: selectedText,
-        x: startX,
-        y: 0,
-        color: this._selectionFg ? this._selectionFg : this._color,
-        backgroundColor: this._selectionBg ? this._selectionBg : this._backgroundColor,
-        font: this._font
-      });
-    }
-  }
-}
-// src/renderables/Box.ts
-function isGapType(value) {
-  if (value === undefined) {
-    return true;
-  }
-  if (typeof value === "number" && !Number.isNaN(value)) {
-    return true;
-  }
-  return isValidPercentage(value);
-}
-
-class BoxRenderable extends Renderable {
-  _backgroundColor;
-  _border;
-  _borderStyle;
-  _borderColor;
-  _focusedBorderColor;
-  _customBorderCharsObj;
-  _customBorderChars;
-  borderSides;
-  shouldFill;
-  _title;
-  _titleAlignment;
-  _bottomTitle;
-  _bottomTitleAlignment;
-  _defaultOptions = {
-    backgroundColor: "transparent",
-    borderStyle: "single",
-    border: false,
-    borderColor: "#FFFFFF",
-    shouldFill: true,
-    titleAlignment: "left",
-    bottomTitleAlignment: "left",
-    focusedBorderColor: "#00AAFF"
-  };
-  constructor(ctx, options) {
-    super(ctx, options);
-    if (options.focusable === true) {
-      this._focusable = true;
-    }
-    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
-    this._border = options.border ?? this._defaultOptions.border;
-    if (!options.border && (options.borderStyle || options.borderColor || options.focusedBorderColor || options.customBorderChars)) {
-      this._border = true;
-    }
-    this._borderStyle = parseBorderStyle(options.borderStyle, this._defaultOptions.borderStyle);
-    this._borderColor = parseColor(options.borderColor || this._defaultOptions.borderColor);
-    this._focusedBorderColor = parseColor(options.focusedBorderColor || this._defaultOptions.focusedBorderColor);
-    this._customBorderCharsObj = options.customBorderChars;
-    this._customBorderChars = this._customBorderCharsObj ? borderCharsToArray(this._customBorderCharsObj) : undefined;
-    this.borderSides = getBorderSides(this._border);
-    this.shouldFill = options.shouldFill ?? this._defaultOptions.shouldFill;
-    this._title = options.title;
-    this._titleAlignment = options.titleAlignment || this._defaultOptions.titleAlignment;
-    this._bottomTitle = options.bottomTitle;
-    this._bottomTitleAlignment = options.bottomTitleAlignment || this._defaultOptions.bottomTitleAlignment;
-    this.applyYogaBorders();
-    const hasInitialGapProps = options.gap !== undefined || options.rowGap !== undefined || options.columnGap !== undefined;
-    if (hasInitialGapProps) {
-      this.applyYogaGap(options);
-    }
-  }
-  initializeBorder() {
-    if (this._border === false) {
-      this._border = true;
-      this.borderSides = getBorderSides(this._border);
-      this.applyYogaBorders();
-    }
-  }
-  get customBorderChars() {
-    return this._customBorderCharsObj;
-  }
-  set customBorderChars(value) {
-    this._customBorderCharsObj = value;
-    this._customBorderChars = value ? borderCharsToArray(value) : undefined;
-    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.requestRender();
-    }
-  }
-  get border() {
-    return this._border;
-  }
-  set border(value) {
-    if (this._border !== value) {
-      this._border = value;
-      this.borderSides = getBorderSides(value);
-      this.applyYogaBorders();
-      this.requestRender();
-    }
-  }
-  get borderStyle() {
-    return this._borderStyle;
-  }
-  set borderStyle(value) {
-    const _value = parseBorderStyle(value, this._defaultOptions.borderStyle);
-    if (this._borderStyle !== _value || !this._border) {
-      this._borderStyle = _value;
-      this._customBorderChars = undefined;
-      this.initializeBorder();
-      this.requestRender();
-    }
-  }
-  get borderColor() {
-    return this._borderColor;
-  }
-  set borderColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.borderColor);
-    if (this._borderColor !== newColor) {
-      this._borderColor = newColor;
-      this.initializeBorder();
-      this.requestRender();
-    }
-  }
-  get focusedBorderColor() {
-    return this._focusedBorderColor;
-  }
-  set focusedBorderColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.focusedBorderColor);
-    if (this._focusedBorderColor !== newColor) {
-      this._focusedBorderColor = newColor;
-      this.initializeBorder();
-      if (this._focused) {
-        this.requestRender();
-      }
-    }
-  }
-  get title() {
-    return this._title;
-  }
-  set title(value) {
-    if (this._title !== value) {
-      this._title = value;
-      this.requestRender();
-    }
-  }
-  get titleAlignment() {
-    return this._titleAlignment;
-  }
-  set titleAlignment(value) {
-    if (this._titleAlignment !== value) {
-      this._titleAlignment = value;
-      this.requestRender();
-    }
-  }
-  get bottomTitle() {
-    return this._bottomTitle;
-  }
-  set bottomTitle(value) {
-    if (this._bottomTitle !== value) {
-      this._bottomTitle = value;
-      this.requestRender();
-    }
-  }
-  get bottomTitleAlignment() {
-    return this._bottomTitleAlignment;
-  }
-  set bottomTitleAlignment(value) {
-    if (this._bottomTitleAlignment !== value) {
-      this._bottomTitleAlignment = value;
-      this.requestRender();
-    }
-  }
-  renderSelf(buffer) {
-    const hasBorder = this.borderSides.top || this.borderSides.right || this.borderSides.bottom || this.borderSides.left;
-    const hasVisibleFill = this.shouldFill && this._backgroundColor.a > 0;
-    if (!hasBorder && !hasVisibleFill) {
-      return;
-    }
-    const hasFocusWithin = this._focusable && (this._focused || this._hasFocusedDescendant);
-    const currentBorderColor = hasFocusWithin ? this._focusedBorderColor : this._borderColor;
-    const screenX = this._screenX;
-    const screenY = this._screenY;
-    buffer.drawBox({
-      x: screenX,
-      y: screenY,
-      width: this.width,
-      height: this.height,
-      borderStyle: this._borderStyle,
-      customBorderChars: this._customBorderChars,
-      border: this._border,
-      borderColor: currentBorderColor,
-      backgroundColor: this._backgroundColor,
-      shouldFill: this.shouldFill,
-      title: this._title,
-      titleAlignment: this._titleAlignment,
-      bottomTitle: this._bottomTitle,
-      bottomTitleAlignment: this._bottomTitleAlignment
-    });
-  }
-  getScissorRect() {
-    const baseRect = super.getScissorRect();
-    if (!this.borderSides.top && !this.borderSides.right && !this.borderSides.bottom && !this.borderSides.left) {
-      return baseRect;
-    }
-    const leftInset = this.borderSides.left ? 1 : 0;
-    const rightInset = this.borderSides.right ? 1 : 0;
-    const topInset = this.borderSides.top ? 1 : 0;
-    const bottomInset = this.borderSides.bottom ? 1 : 0;
-    return {
-      x: baseRect.x + leftInset,
-      y: baseRect.y + topInset,
-      width: Math.max(0, baseRect.width - leftInset - rightInset),
-      height: Math.max(0, baseRect.height - topInset - bottomInset)
-    };
-  }
-  applyYogaBorders() {
-    const node = this.yogaNode;
-    node.setBorder(Edge.Left, this.borderSides.left ? 1 : 0);
-    node.setBorder(Edge.Right, this.borderSides.right ? 1 : 0);
-    node.setBorder(Edge.Top, this.borderSides.top ? 1 : 0);
-    node.setBorder(Edge.Bottom, this.borderSides.bottom ? 1 : 0);
-    this.requestRender();
-  }
-  applyYogaGap(options) {
-    const node = this.yogaNode;
-    if (isGapType(options.gap)) {
-      node.setGap(Gutter.All, options.gap);
-    }
-    if (isGapType(options.rowGap)) {
-      node.setGap(Gutter.Row, options.rowGap);
-    }
-    if (isGapType(options.columnGap)) {
-      node.setGap(Gutter.Column, options.columnGap);
-    }
-  }
-  set gap(gap) {
-    if (isGapType(gap)) {
-      this.yogaNode.setGap(Gutter.All, gap);
-      this.requestRender();
-    }
-  }
-  set rowGap(rowGap) {
-    if (isGapType(rowGap)) {
-      this.yogaNode.setGap(Gutter.Row, rowGap);
-      this.requestRender();
-    }
-  }
-  set columnGap(columnGap) {
-    if (isGapType(columnGap)) {
-      this.yogaNode.setGap(Gutter.Column, columnGap);
-      this.requestRender();
-    }
-  }
-}
-// src/renderables/TextBufferRenderable.ts
-class TextBufferRenderable extends Renderable {
-  selectable = true;
-  _defaultFg;
-  _defaultBg;
-  _defaultAttributes;
-  _selectionBg;
-  _selectionFg;
-  _wrapMode = "word";
-  lastLocalSelection = null;
-  _tabIndicator;
-  _tabIndicatorColor;
-  _scrollX = 0;
-  _scrollY = 0;
-  _truncate = false;
-  textBuffer;
-  textBufferView;
-  _textBufferSyntaxStyle;
-  _defaultOptions = {
-    fg: RGBA.fromValues(1, 1, 1, 1),
-    bg: RGBA.fromValues(0, 0, 0, 0),
-    selectionBg: undefined,
-    selectionFg: undefined,
-    selectable: true,
-    attributes: 0,
-    wrapMode: "word",
-    tabIndicator: undefined,
-    tabIndicatorColor: undefined,
-    truncate: false
-  };
-  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._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode;
-    this._tabIndicator = options.tabIndicator ?? this._defaultOptions.tabIndicator;
-    this._tabIndicatorColor = options.tabIndicatorColor ? parseColor(options.tabIndicatorColor) : this._defaultOptions.tabIndicatorColor;
-    this._truncate = options.truncate ?? this._defaultOptions.truncate;
-    this.textBuffer = TextBuffer.create(this._ctx.widthMethod);
-    this.textBufferView = TextBufferView.create(this.textBuffer);
-    this._textBufferSyntaxStyle = SyntaxStyle.create();
-    this.textBuffer.setSyntaxStyle(this._textBufferSyntaxStyle);
-    this.textBufferView.setWrapMode(this._wrapMode);
-    this.setupMeasureFunc();
-    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.textBufferView.setWrapWidth(this.width);
-    }
-    if (this.width > 0 && this.height > 0) {
-      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height);
-    }
-    this.textBufferView.setTruncate(this._truncate);
-    this.updateTextInfo();
-  }
-  onMouseEvent(event) {
-    if (event.type === "scroll") {
-      this.handleScroll(event);
-    }
-  }
-  handleScroll(event) {
-    if (!event.scroll)
-      return;
-    const { direction, delta } = event.scroll;
-    if (direction === "up") {
-      this.scrollY -= delta;
-    } else if (direction === "down") {
-      this.scrollY += delta;
-    }
-    if (this._wrapMode === "none") {
-      if (direction === "left") {
-        this.scrollX -= delta;
-      } else if (direction === "right") {
-        this.scrollX += delta;
-      }
-    }
-  }
-  get lineInfo() {
-    return this.textBufferView.logicalLineInfo;
-  }
-  get lineCount() {
-    return this.textBuffer.getLineCount();
-  }
-  get virtualLineCount() {
-    return this.textBufferView.getVirtualLineCount();
-  }
-  get scrollY() {
-    return this._scrollY;
-  }
-  set scrollY(value) {
-    const maxScrollY = Math.max(0, this.scrollHeight - this.height);
-    const clamped = Math.max(0, Math.min(value, maxScrollY));
-    if (this._scrollY !== clamped) {
-      this._scrollY = clamped;
-      this.updateViewportOffset();
-      this.requestRender();
-    }
-  }
-  get scrollX() {
-    return this._scrollX;
-  }
-  set scrollX(value) {
-    const maxScrollX = Math.max(0, this.scrollWidth - this.width);
-    const clamped = Math.max(0, Math.min(value, maxScrollX));
-    if (this._scrollX !== clamped) {
-      this._scrollX = clamped;
-      this.updateViewportOffset();
-      this.requestRender();
-    }
-  }
-  get scrollWidth() {
-    return this.lineInfo.lineWidthColsMax;
-  }
-  get scrollHeight() {
-    return this.lineInfo.lineStartCols.length;
-  }
-  get maxScrollY() {
-    return Math.max(0, this.scrollHeight - this.height);
-  }
-  get maxScrollX() {
-    return Math.max(0, this.scrollWidth - this.width);
-  }
-  updateViewportOffset() {
-    if (this.width > 0 && this.height > 0) {
-      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height);
-    }
-  }
-  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 wrapMode() {
-    return this._wrapMode;
-  }
-  set wrapMode(value) {
-    if (this._wrapMode !== value) {
-      this._wrapMode = value;
-      this.textBufferView.setWrapMode(this._wrapMode);
-      if (value !== "none" && this.width > 0) {
-        this.textBufferView.setWrapWidth(this.width);
-      }
-      this.yogaNode.markDirty();
-      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();
-    }
-  }
-  get truncate() {
-    return this._truncate;
-  }
-  set truncate(value) {
-    if (this._truncate !== value) {
-      this._truncate = value;
-      this.textBufferView.setTruncate(value);
-      this.requestRender();
-    }
-  }
-  onResize(width, height) {
-    this.textBufferView.setViewport(this._scrollX, this._scrollY, width, height);
-    this.yogaNode.markDirty();
-    this.requestRender();
-    this.emit("line-info-change");
-  }
-  refreshLocalSelection() {
-    if (this.lastLocalSelection) {
-      return this.updateLocalSelection(this.lastLocalSelection);
-    }
-    return false;
-  }
-  updateLocalSelection(localSelection) {
-    if (!localSelection?.isActive) {
-      this.textBufferView.resetLocalSelection();
-      return true;
-    }
-    return this.textBufferView.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
-  }
-  updateTextInfo() {
-    if (this.lastLocalSelection) {
-      this.updateLocalSelection(this.lastLocalSelection);
-    }
-    this.yogaNode.markDirty();
-    this.requestRender();
-    this.emit("line-info-change");
-  }
-  setupMeasureFunc() {
-    const measureFunc = (width, widthMode, height, heightMode) => {
-      let effectiveWidth;
-      if (widthMode === MeasureMode.Undefined || isNaN(width)) {
-        effectiveWidth = 0;
-      } else {
-        effectiveWidth = width;
-      }
-      const effectiveHeight = isNaN(height) ? 1 : height;
-      const measureResult = this.textBufferView.measureForDimensions(Math.floor(effectiveWidth), Math.floor(effectiveHeight));
-      const measuredWidth = measureResult ? Math.max(1, measureResult.widthColsMax) : 1;
-      const measuredHeight = measureResult ? Math.max(1, measureResult.lineCount) : 1;
-      if (widthMode === MeasureMode.AtMost && this._positionType !== "absolute") {
-        return {
-          width: Math.min(effectiveWidth, measuredWidth),
-          height: Math.min(effectiveHeight, measuredHeight)
-        };
-      }
-      return {
-        width: measuredWidth,
-        height: measuredHeight
-      };
-    };
-    this.yogaNode.setMeasureFunc(measureFunc);
-  }
-  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;
-    let changed;
-    if (!localSelection?.isActive) {
-      this.textBufferView.resetLocalSelection();
-      changed = true;
-    } else if (selection?.isStart) {
-      changed = this.textBufferView.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
-    } else {
-      changed = this.textBufferView.updateLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
-    }
-    if (changed) {
-      this.requestRender();
-    }
-    return this.hasSelection();
-  }
-  getSelectedText() {
-    return this.textBufferView.getSelectedText();
-  }
-  hasSelection() {
-    return this.textBufferView.hasSelection();
-  }
-  getSelection() {
-    return this.textBufferView.getSelection();
-  }
-  render(buffer, deltaTime) {
-    if (!this.visible)
-      return;
-    const screenX = this._screenX;
-    const screenY = this._screenY;
-    this.markClean();
-    this._ctx.addToHitGrid(screenX, screenY, this.width, this.height, this.num);
-    this.renderSelf(buffer);
-    if (this.buffered && this.frameBuffer) {
-      buffer.drawFrameBuffer(screenX, screenY, this.frameBuffer);
-    }
-  }
-  renderSelf(buffer) {
-    if (this.textBuffer.ptr) {
-      buffer.drawTextBuffer(this.textBufferView, this._screenX, this._screenY);
-    }
-  }
-  destroy() {
-    if (this.isDestroyed)
-      return;
-    this.textBuffer.setSyntaxStyle(null);
-    this._textBufferSyntaxStyle.destroy();
-    this.textBufferView.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;
-  _highlightsDirty = false;
-  _highlightSnapshotId = 0;
-  _conceal;
-  _drawUnstyledText;
-  _shouldRenderTextBuffer = true;
-  _streaming;
-  _hadInitialContent = false;
-  _lastHighlights = [];
-  _onHighlight;
-  _onChunks;
-  _highlightingPromise = Promise.resolve();
-  _contentDefaultOptions = {
-    content: "",
-    conceal: true,
-    drawUnstyledText: true,
-    streaming: false
-  };
-  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._conceal = options.conceal ?? this._contentDefaultOptions.conceal;
-    this._drawUnstyledText = options.drawUnstyledText ?? this._contentDefaultOptions.drawUnstyledText;
-    this._streaming = options.streaming ?? this._contentDefaultOptions.streaming;
-    this._onHighlight = options.onHighlight;
-    this._onChunks = options.onChunks;
-    if (this._content.length > 0) {
-      this.textBuffer.setText(this._content);
-      this.updateTextInfo();
-      this._shouldRenderTextBuffer = this._drawUnstyledText || !this._filetype;
-    }
-    this._highlightsDirty = this._content.length > 0;
-  }
-  get content() {
-    return this._content;
-  }
-  set content(value) {
-    if (this._content !== value) {
-      this._content = value;
-      this._highlightsDirty = true;
-      this._highlightSnapshotId++;
-      if (this._streaming && !this._drawUnstyledText && this._filetype) {
-        return;
-      }
-      this.textBuffer.setText(value);
-      this.updateTextInfo();
-    }
-  }
-  get filetype() {
-    return this._filetype;
-  }
-  set filetype(value) {
-    if (this._filetype !== value) {
-      this._filetype = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get syntaxStyle() {
-    return this._syntaxStyle;
-  }
-  set syntaxStyle(value) {
-    if (this._syntaxStyle !== value) {
-      this._syntaxStyle = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get conceal() {
-    return this._conceal;
-  }
-  set conceal(value) {
-    if (this._conceal !== value) {
-      this._conceal = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get drawUnstyledText() {
-    return this._drawUnstyledText;
-  }
-  set drawUnstyledText(value) {
-    if (this._drawUnstyledText !== value) {
-      this._drawUnstyledText = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get streaming() {
-    return this._streaming;
-  }
-  set streaming(value) {
-    if (this._streaming !== value) {
-      this._streaming = value;
-      this._hadInitialContent = false;
-      this._lastHighlights = [];
-      this._highlightsDirty = true;
-    }
-  }
-  get treeSitterClient() {
-    return this._treeSitterClient;
-  }
-  set treeSitterClient(value) {
-    if (this._treeSitterClient !== value) {
-      this._treeSitterClient = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get onHighlight() {
-    return this._onHighlight;
-  }
-  set onHighlight(value) {
-    if (this._onHighlight !== value) {
-      this._onHighlight = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get onChunks() {
-    return this._onChunks;
-  }
-  set onChunks(value) {
-    if (this._onChunks !== value) {
-      this._onChunks = value;
-      this._highlightsDirty = true;
-    }
-  }
-  get isHighlighting() {
-    return this._isHighlighting;
-  }
-  get highlightingDone() {
-    return this._highlightingPromise;
-  }
-  async transformChunks(chunks, context) {
-    if (!this._onChunks)
-      return chunks;
-    const modified = await this._onChunks(chunks, context);
-    return modified ?? chunks;
-  }
-  ensureVisibleTextBeforeHighlight() {
-    if (this.isDestroyed)
-      return;
-    const content = this._content;
-    if (!this._filetype) {
-      this._shouldRenderTextBuffer = true;
-      return;
-    }
-    const isInitialContent = this._streaming && !this._hadInitialContent;
-    const shouldDrawUnstyledNow = this._streaming ? isInitialContent && this._drawUnstyledText : this._drawUnstyledText;
-    if (this._streaming && !isInitialContent) {
-      this._shouldRenderTextBuffer = true;
-    } else if (shouldDrawUnstyledNow) {
-      this.textBuffer.setText(content);
-      this._shouldRenderTextBuffer = true;
-    } else {
-      this._shouldRenderTextBuffer = false;
-    }
-  }
-  async startHighlight() {
-    const content = this._content;
-    const filetype = this._filetype;
-    const snapshotId = ++this._highlightSnapshotId;
-    if (!filetype)
-      return;
-    const isInitialContent = this._streaming && !this._hadInitialContent;
-    if (isInitialContent) {
-      this._hadInitialContent = true;
-    }
-    this._isHighlighting = true;
-    try {
-      const result = await this._treeSitterClient.highlightOnce(content, filetype);
-      if (snapshotId !== this._highlightSnapshotId) {
-        return;
-      }
-      if (this.isDestroyed)
-        return;
-      let highlights = result.highlights ?? [];
-      if (this._onHighlight && highlights.length >= 0) {
-        const context = {
-          content,
-          filetype,
-          syntaxStyle: this._syntaxStyle
-        };
-        const modified = await this._onHighlight(highlights, context);
-        if (modified !== undefined) {
-          highlights = modified;
-        }
-      }
-      if (snapshotId !== this._highlightSnapshotId) {
-        return;
-      }
-      if (this.isDestroyed)
-        return;
-      if (highlights.length > 0) {
-        if (this._streaming) {
-          this._lastHighlights = highlights;
-        }
-      }
-      if (highlights.length > 0 || this._onChunks) {
-        const context = {
-          content,
-          filetype,
-          syntaxStyle: this._syntaxStyle,
-          highlights
-        };
-        let chunks = treeSitterToTextChunks(content, highlights, this._syntaxStyle, {
-          enabled: this._conceal
-        });
-        chunks = await this.transformChunks(chunks, context);
-        if (snapshotId !== this._highlightSnapshotId) {
-          return;
-        }
-        if (this.isDestroyed)
-          return;
-        const styledText = new StyledText(chunks);
-        this.textBuffer.setStyledText(styledText);
-      } else {
-        this.textBuffer.setText(content);
-      }
-      this._shouldRenderTextBuffer = true;
-      this._isHighlighting = false;
-      this._highlightsDirty = false;
-      this.updateTextInfo();
-      this.requestRender();
-    } catch (error) {
-      if (snapshotId !== this._highlightSnapshotId) {
-        return;
-      }
-      console.warn("Code highlighting failed, falling back to plain text:", error);
-      if (this.isDestroyed)
-        return;
-      this.textBuffer.setText(content);
-      this._shouldRenderTextBuffer = true;
-      this._isHighlighting = false;
-      this._highlightsDirty = false;
-      this.updateTextInfo();
-      this.requestRender();
-    }
-  }
-  getLineHighlights(lineIdx) {
-    return this.textBuffer.getLineHighlights(lineIdx);
-  }
-  renderSelf(buffer) {
-    if (this._highlightsDirty) {
-      if (this.isDestroyed)
-        return;
-      if (this._content.length === 0) {
-        this._shouldRenderTextBuffer = false;
-        this._highlightsDirty = false;
-      } else if (!this._filetype) {
-        this._shouldRenderTextBuffer = true;
-        this._highlightsDirty = false;
-      } else {
-        this.ensureVisibleTextBeforeHighlight();
-        this._highlightsDirty = false;
-        this._highlightingPromise = this.startHighlight();
-      }
-    }
-    if (!this._shouldRenderTextBuffer)
-      return;
-    super.renderSelf(buffer);
-  }
-}
-// src/renderables/TextNode.ts
-var BrandedTextNodeRenderable = Symbol.for("@opentui/core/TextNodeRenderable");
-function isTextNodeRenderable(obj) {
-  return !!obj?.[BrandedTextNodeRenderable];
-}
-function styledTextToTextNodes(styledText) {
-  return styledText.chunks.map((chunk) => {
-    const node = new TextNodeRenderable({
-      fg: chunk.fg,
-      bg: chunk.bg,
-      attributes: chunk.attributes,
-      link: chunk.link
-    });
-    node.add(chunk.text);
-    return node;
-  });
-}
-
-class TextNodeRenderable extends BaseRenderable {
-  [BrandedTextNodeRenderable] = true;
-  _fg;
-  _bg;
-  _attributes;
-  _link;
-  _children = [];
-  parent = null;
-  constructor(options) {
-    super(options);
-    this._fg = options.fg ? parseColor(options.fg) : undefined;
-    this._bg = options.bg ? parseColor(options.bg) : undefined;
-    this._attributes = options.attributes ?? 0;
-    this._link = options.link;
-  }
-  get children() {
-    return this._children;
-  }
-  set children(children) {
-    this._children = children;
-    this.requestRender();
-  }
-  requestRender() {
-    this.markDirty();
-    this.parent?.requestRender();
-  }
-  add(obj, index) {
-    if (typeof obj === "string") {
-      if (index !== undefined) {
-        this._children.splice(index, 0, obj);
-        this.requestRender();
-        return index;
-      }
-      const insertIndex = this._children.length;
-      this._children.push(obj);
-      this.requestRender();
-      return insertIndex;
-    }
-    if (isTextNodeRenderable(obj)) {
-      if (index !== undefined) {
-        this._children.splice(index, 0, obj);
-        obj.parent = this;
-        this.requestRender();
-        return index;
-      }
-      const insertIndex = this._children.length;
-      this._children.push(obj);
-      obj.parent = this;
-      this.requestRender();
-      return insertIndex;
-    }
-    if (isStyledText(obj)) {
-      const textNodes = styledTextToTextNodes(obj);
-      if (index !== undefined) {
-        this._children.splice(index, 0, ...textNodes);
-        textNodes.forEach((node) => node.parent = this);
-        this.requestRender();
-        return index;
-      }
-      const insertIndex = this._children.length;
-      this._children.push(...textNodes);
-      textNodes.forEach((node) => node.parent = this);
-      this.requestRender();
-      return insertIndex;
-    }
-    throw new Error("TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances");
+    this.renderFontToBuffer();
   }
-  replace(obj, index) {
-    this._children[index] = obj;
-    if (typeof obj !== "string") {
-      obj.parent = this;
-    }
-    this.requestRender();
+  get text() {
+    return this._text;
   }
-  insertBefore(child, anchorNode) {
-    if (!anchorNode || !isTextNodeRenderable(anchorNode)) {
-      throw new Error("Anchor must be a TextNodeRenderable");
-    }
-    const anchorIndex = this._children.indexOf(anchorNode);
-    if (anchorIndex === -1) {
-      throw new Error("Anchor node not found in children");
-    }
-    if (typeof child === "string") {
-      this._children.splice(anchorIndex, 0, child);
-    } else if (isTextNodeRenderable(child)) {
-      this._children.splice(anchorIndex, 0, child);
-      child.parent = this;
-    } else if (child instanceof StyledText) {
-      const textNodes = styledTextToTextNodes(child);
-      this._children.splice(anchorIndex, 0, ...textNodes);
-      textNodes.forEach((node) => node.parent = this);
-    } else {
-      throw new Error("Child must be a string, TextNodeRenderable, or StyledText instance");
+  set text(value) {
+    this._text = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
     }
+    this.renderFontToBuffer();
     this.requestRender();
-    return this;
   }
-  remove(id) {
-    const childIndex = this.getRenderableIndex(id);
-    if (childIndex === -1) {
-      throw new Error("Child not found in children");
-    }
-    const child = this._children[childIndex];
-    this._children.splice(childIndex, 1);
-    child.parent = null;
-    this.requestRender();
-    return this;
+  get font() {
+    return this._font;
   }
-  clear() {
-    this._children = [];
+  set font(value) {
+    this._font = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
+    this.renderFontToBuffer();
     this.requestRender();
   }
-  mergeStyles(parentStyle) {
-    return {
-      fg: this._fg ?? parentStyle.fg,
-      bg: this._bg ?? parentStyle.bg,
-      attributes: this._attributes | parentStyle.attributes,
-      link: this._link ?? parentStyle.link
-    };
+  get color() {
+    return this._color;
   }
-  gatherWithInheritedStyle(parentStyle = {
-    fg: undefined,
-    bg: undefined,
-    attributes: 0
-  }) {
-    const currentStyle = this.mergeStyles(parentStyle);
-    const chunks = [];
-    for (const child of this._children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: child,
-          fg: currentStyle.fg,
-          bg: currentStyle.bg,
-          attributes: currentStyle.attributes,
-          link: currentStyle.link
-        });
-      } else {
-        const childChunks = child.gatherWithInheritedStyle(currentStyle);
-        chunks.push(...childChunks);
-      }
-    }
-    this.markClean();
-    return chunks;
+  set color(value) {
+    this._color = value;
+    this.renderFontToBuffer();
+    this.requestRender();
   }
-  static fromString(text, options = {}) {
-    const node = new TextNodeRenderable(options);
-    node.add(text);
-    return node;
+  get backgroundColor() {
+    return this._backgroundColor;
   }
-  static fromNodes(nodes, options = {}) {
-    const node = new TextNodeRenderable(options);
-    for (const childNode of nodes) {
-      node.add(childNode);
-    }
-    return node;
+  set backgroundColor(value) {
+    this._backgroundColor = value;
+    this.renderFontToBuffer();
+    this.requestRender();
   }
-  toChunks(parentStyle = {
-    fg: undefined,
-    bg: undefined,
-    attributes: 0
-  }) {
-    return this.gatherWithInheritedStyle(parentStyle);
+  updateDimensions() {
+    const measurements = measureText({ text: this._text, font: this._font });
+    this.width = measurements.width;
+    this.height = measurements.height;
   }
-  getChildren() {
-    return this._children.filter((child) => typeof child !== "string");
+  shouldStartSelection(x, y) {
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
   }
-  getChildrenCount() {
-    return this._children.length;
+  onSelectionChanged(selection) {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height);
+    if (changed) {
+      this.renderFontToBuffer();
+      this.requestRender();
+    }
+    return changed;
   }
-  getRenderable(id) {
-    return this._children.find((child) => typeof child !== "string" && child.id === id);
+  getSelectedText() {
+    const selection = this.selectionHelper.getSelection();
+    if (!selection)
+      return "";
+    return this._text.slice(selection.start, selection.end);
   }
-  getRenderableIndex(id) {
-    return this._children.findIndex((child) => isTextNodeRenderable(child) && child.id === id);
+  hasSelection() {
+    return this.selectionHelper.hasSelection();
   }
-  get fg() {
-    return this._fg;
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.renderFontToBuffer();
   }
-  set fg(fg2) {
-    if (!fg2) {
-      this._fg = undefined;
-      this.requestRender();
+  renderFontToBuffer() {
+    if (this.isDestroyed)
       return;
+    this.frameBuffer.clear(parseColor(this._backgroundColor));
+    renderFontToFrameBuffer(this.frameBuffer, {
+      text: this._text,
+      x: 0,
+      y: 0,
+      color: this.color,
+      backgroundColor: this._backgroundColor,
+      font: this._font
+    });
+    const selection = this.selectionHelper.getSelection();
+    if (selection && (this._selectionBg || this._selectionFg)) {
+      this.renderSelectionHighlight(selection);
     }
-    this._fg = parseColor(fg2);
-    this.requestRender();
   }
-  set bg(bg2) {
-    if (!bg2) {
-      this._bg = undefined;
-      this.requestRender();
+  renderSelectionHighlight(selection) {
+    if (!this._selectionBg && !this._selectionFg)
       return;
+    const selectedText = this._text.slice(selection.start, selection.end);
+    if (!selectedText)
+      return;
+    const positions = getCharacterPositions(this._text, this._font);
+    const startX = positions[selection.start] || 0;
+    const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
+    if (this._selectionBg) {
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, parseColor(this._selectionBg));
+    }
+    if (this._selectionFg || this._selectionBg) {
+      renderFontToFrameBuffer(this.frameBuffer, {
+        text: selectedText,
+        x: startX,
+        y: 0,
+        color: this._selectionFg ? this._selectionFg : this._color,
+        backgroundColor: this._selectionBg ? this._selectionBg : this._backgroundColor,
+        font: this._font
+      });
     }
-    this._bg = parseColor(bg2);
-    this.requestRender();
-  }
-  get bg() {
-    return this._bg;
-  }
-  set attributes(attributes) {
-    this._attributes = attributes;
-    this.requestRender();
-  }
-  get attributes() {
-    return this._attributes;
-  }
-  set link(link2) {
-    this._link = link2;
-    this.requestRender();
-  }
-  get link() {
-    return this._link;
-  }
-  findDescendantById(id) {
-    return;
-  }
-}
-
-class RootTextNodeRenderable extends TextNodeRenderable {
-  ctx;
-  textParent;
-  constructor(ctx, options, textParent) {
-    super(options);
-    this.ctx = ctx;
-    this.textParent = textParent;
-  }
-  requestRender() {
-    this.markDirty();
-    this.ctx.requestRender();
   }
 }
-
 // src/renderables/composition/constructs.ts
 function Generic(props, ...children) {
   return h(VRenderable, props || {}, ...children);
@@ -5340,103 +3893,6 @@ function parsePatch(uniDiff) {
   }
   return list;
 }
-// src/renderables/Text.ts
-class TextRenderable extends TextBufferRenderable {
-  _text;
-  _hasManualStyledText = false;
-  rootTextNode;
-  _contentDefaultOptions = {
-    content: ""
-  };
-  constructor(ctx, options) {
-    super(ctx, options);
-    const content = options.content ?? this._contentDefaultOptions.content;
-    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
-    this._text = styledText;
-    this._hasManualStyledText = options.content !== undefined && content !== "";
-    this.rootTextNode = new RootTextNodeRenderable(ctx, {
-      id: `${this.id}-root`,
-      fg: this._defaultFg,
-      bg: this._defaultBg,
-      attributes: this._defaultAttributes
-    }, this);
-    this.updateTextBuffer(styledText);
-  }
-  updateTextBuffer(styledText) {
-    this.textBuffer.setStyledText(styledText);
-    this.clearChunks(styledText);
-  }
-  clearChunks(styledText) {}
-  get content() {
-    return this._text;
-  }
-  get chunks() {
-    return this._text.chunks;
-  }
-  get textNode() {
-    return this.rootTextNode;
-  }
-  set content(value) {
-    this._hasManualStyledText = true;
-    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
-    if (this._text !== styledText) {
-      this._text = styledText;
-      this.updateTextBuffer(styledText);
-      this.updateTextInfo();
-    }
-  }
-  updateTextFromNodes() {
-    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
-      const chunks = this.rootTextNode.gatherWithInheritedStyle({
-        fg: this._defaultFg,
-        bg: this._defaultBg,
-        attributes: this._defaultAttributes,
-        link: undefined
-      });
-      this.textBuffer.setStyledText(new StyledText(chunks));
-      this.refreshLocalSelection();
-      this.yogaNode.markDirty();
-    }
-  }
-  add(obj, index) {
-    return this.rootTextNode.add(obj, index);
-  }
-  remove(id) {
-    this.rootTextNode.remove(id);
-  }
-  insertBefore(obj, anchor) {
-    this.rootTextNode.insertBefore(obj, anchor);
-    return this.rootTextNode.children.indexOf(obj);
-  }
-  getTextChildren() {
-    return this.rootTextNode.getChildren();
-  }
-  clear() {
-    this.rootTextNode.clear();
-    const emptyStyledText = stringToStyledText("");
-    this._text = emptyStyledText;
-    this.updateTextBuffer(emptyStyledText);
-    this.updateTextInfo();
-    this.requestRender();
-  }
-  onLifecyclePass = () => {
-    this.updateTextFromNodes();
-  };
-  onFgChanged(newColor) {
-    this.rootTextNode.fg = newColor;
-  }
-  onBgChanged(newColor) {
-    this.rootTextNode.bg = newColor;
-  }
-  onAttributesChanged(newAttributes) {
-    this.rootTextNode.attributes = newAttributes;
-  }
-  destroy() {
-    this.rootTextNode.children.length = 0;
-    super.destroy();
-  }
-}
-
 // src/renderables/Diff.ts
 class DiffRenderable extends Renderable {
   _diff;
@@ -6889,6 +5345,7 @@ class TextTableRenderable extends Renderable {
   _columnWidthMode;
   _columnFitter;
   _cellPadding;
+  _columnGap;
   _showBorders;
   _border;
   _outerBorder;
@@ -6919,6 +5376,7 @@ class TextTableRenderable extends Renderable {
     columnWidthMode: "full",
     columnFitter: "proportional",
     cellPadding: 0,
+    columnGap: 0,
     showBorders: true,
     border: true,
     outerBorder: true,
@@ -6940,6 +5398,7 @@ class TextTableRenderable extends Renderable {
     this._columnWidthMode = options.columnWidthMode ?? this._defaultOptions.columnWidthMode;
     this._columnFitter = this.resolveColumnFitter(options.columnFitter);
     this._cellPadding = this.resolveCellPadding(options.cellPadding);
+    this._columnGap = this.resolveColumnGap(options.columnGap);
     this._showBorders = options.showBorders ?? this._defaultOptions.showBorders;
     this._border = options.border ?? this._defaultOptions.border;
     this._hasExplicitOuterBorder = options.outerBorder !== undefined;
@@ -7007,6 +5466,16 @@ class TextTableRenderable extends Renderable {
     this._cellPadding = next;
     this.invalidateLayoutAndRaster();
   }
+  get columnGap() {
+    return this._columnGap;
+  }
+  set columnGap(value) {
+    const next = this.resolveColumnGap(value);
+    if (this._columnGap === next)
+      return;
+    this._columnGap = next;
+    this.invalidateLayoutAndRaster();
+  }
   get showBorders() {
     return this._showBorders;
   }
@@ -7320,7 +5789,7 @@ class TextTableRenderable extends Renderable {
     const borderLayout = this.resolveBorderLayout();
     const columnWidths = this.computeColumnWidths(maxTableWidth, borderLayout);
     const rowHeights = this.computeRowHeights(columnWidths);
-    const columnOffsets = this.computeOffsets(columnWidths, borderLayout.left, borderLayout.right, borderLayout.innerVertical);
+    const columnOffsets = this.computeOffsets(columnWidths, borderLayout.left, borderLayout.right, borderLayout.innerVertical, this.getInterColumnGap(borderLayout));
     const rowOffsets = this.computeOffsets(rowHeights, borderLayout.top, borderLayout.bottom, borderLayout.innerHorizontal);
     return {
       columnWidths,
@@ -7352,7 +5821,7 @@ class TextTableRenderable extends Renderable {
     if (maxTableWidth === undefined || !Number.isFinite(maxTableWidth) || maxTableWidth <= 0) {
       return intrinsicWidths;
     }
-    const maxContentWidth = Math.max(1, Math.floor(maxTableWidth) - this.getVerticalBorderCount(borderLayout));
+    const maxContentWidth = Math.max(1, Math.floor(maxTableWidth) - this.getVerticalBorderCount(borderLayout) - this.getTotalInterColumnGap(borderLayout));
     const currentWidth = intrinsicWidths.reduce((sum, width) => sum + width, 0);
     if (currentWidth === maxContentWidth) {
       return intrinsicWidths;
@@ -7535,17 +6004,26 @@ class TextTableRenderable extends Renderable {
     }
     return rowHeights;
   }
-  computeOffsets(parts, startBoundary, endBoundary, includeInnerBoundaries) {
+  computeOffsets(parts, startBoundary, endBoundary, includeInnerBoundaries, innerGap = 0) {
     const offsets = [startBoundary ? 0 : -1];
     let cursor = offsets[0] ?? 0;
     for (let idx = 0;idx < parts.length; idx++) {
       const size = parts[idx] ?? 1;
-      const hasBoundaryAfter = idx < parts.length - 1 ? includeInnerBoundaries : endBoundary;
-      cursor += size + (hasBoundaryAfter ? 1 : 0);
+      const separatorAfter = idx < parts.length - 1 ? includeInnerBoundaries ? 1 : innerGap : endBoundary ? 1 : 0;
+      cursor += size + separatorAfter;
       offsets.push(cursor);
     }
     return offsets;
   }
+  getInterColumnGap(borderLayout) {
+    if (borderLayout.innerVertical) {
+      return 0;
+    }
+    return this._columnGap;
+  }
+  getTotalInterColumnGap(borderLayout) {
+    return Math.max(0, this._columnCount - 1) * this.getInterColumnGap(borderLayout);
+  }
   applyLayoutToViews(layout) {
     const horizontalPadding = this.getHorizontalCellPadding();
     const verticalPadding = this.getVerticalCellPadding();
@@ -7864,6 +6342,12 @@ class TextTableRenderable extends Renderable {
     }
     return Math.max(0, Math.floor(value));
   }
+  resolveColumnGap(value) {
+    if (value === undefined || !Number.isFinite(value)) {
+      return this._defaultOptions.columnGap;
+    }
+    return Math.max(0, Math.floor(value));
+  }
   invalidateLayoutAndRaster(markYogaDirty = true) {
     this._layoutDirty = true;
     this._rasterDirty = true;
@@ -9150,9 +7634,13 @@ function parseMarkdownIncremental(newContent, prevState, trailingUnstable = 2) {
   if (!prevState || prevState.tokens.length === 0) {
     try {
       const tokens = x.lex(newContent, { gfm: true });
-      return { content: newContent, tokens };
+      return {
+        content: newContent,
+        tokens,
+        stableTokenCount: Math.max(0, tokens.length - trailingUnstable)
+      };
     } catch {
-      return { content: newContent, tokens: [] };
+      return { content: newContent, tokens: [], stableTokenCount: 0 };
     }
   }
   let offset = 0;
@@ -9174,23 +7662,32 @@ function parseMarkdownIncremental(newContent, prevState, trailingUnstable = 2) {
   const stableTokens = prevState.tokens.slice(0, reuseCount);
   const remainingContent = newContent.slice(offset);
   if (!remainingContent) {
-    return { content: newContent, tokens: stableTokens };
+    return {
+      content: newContent,
+      tokens: stableTokens,
+      stableTokenCount: stableTokens.length
+    };
   }
   try {
     const newTokens = x.lex(remainingContent, { gfm: true });
-    return { content: newContent, tokens: [...stableTokens, ...newTokens] };
+    return {
+      content: newContent,
+      tokens: [...stableTokens, ...newTokens],
+      stableTokenCount: trailingUnstable === 0 ? stableTokens.length + newTokens.length : stableTokens.length
+    };
   } catch {
     try {
       const fullTokens = x.lex(newContent, { gfm: true });
-      return { content: newContent, tokens: fullTokens };
+      return { content: newContent, tokens: fullTokens, stableTokenCount: 0 };
     } catch {
-      return { content: newContent, tokens: [] };
+      return { content: newContent, tokens: [], stableTokenCount: 0 };
     }
   }
 }
 
 // src/renderables/Markdown.ts
 var TRAILING_MARKDOWN_BLOCK_BREAKS_RE = /(?:\r?\n)+$/;
+var TRAILING_MARKDOWN_BLOCK_NEWLINES_RE = /(?:\r?\n)+$/;
 function colorsEqual(left, right) {
   if (!left || !right)
     return left === right;
@@ -9207,9 +7704,11 @@ class MarkdownRenderable extends Renderable {
   _treeSitterClient;
   _tableOptions;
   _renderNode;
+  _internalBlockMode;
   _parseState = null;
   _streaming = false;
   _blockStates = [];
+  _stableBlockCount = 0;
   _styleDirty = false;
   _linkifyMarkdownChunks = (chunks, context) => detectLinks(chunks, {
     content: context.content,
@@ -9222,7 +7721,8 @@ class MarkdownRenderable extends Renderable {
     content: "",
     conceal: true,
     concealCode: false,
-    streaming: false
+    streaming: false,
+    internalBlockMode: "coalesced"
   };
   constructor(ctx, options) {
     super(ctx, {
@@ -9240,6 +7740,7 @@ class MarkdownRenderable extends Renderable {
     this._tableOptions = options.tableOptions;
     this._renderNode = options.renderNode;
     this._streaming = options.streaming ?? this._contentDefaultOptions.streaming;
+    this._internalBlockMode = options.internalBlockMode ?? this._contentDefaultOptions.internalBlockMode;
     this.updateBlocks();
   }
   get content() {
@@ -9471,6 +7972,10 @@ class MarkdownRenderable extends Renderable {
         break;
     }
   }
+  applyMargins(renderable, marginTop, marginBottom) {
+    renderable.marginTop = marginTop;
+    renderable.marginBottom = marginBottom;
+  }
   buildInlineConcealChunks(chunks, context) {
     const result = [];
     try {
@@ -9775,6 +8280,9 @@ class MarkdownRenderable extends Renderable {
   normalizeMarkdownBlockRaw(raw) {
     return raw.replace(TRAILING_MARKDOWN_BLOCK_BREAKS_RE, "");
   }
+  normalizeScrollbackMarkdownBlockRaw(raw) {
+    return raw.replace(TRAILING_MARKDOWN_BLOCK_NEWLINES_RE, "");
+  }
   buildRenderableTokens(tokens) {
     if (this._renderNode) {
       return tokens.filter((token) => token.type !== "space");
@@ -9816,6 +8324,26 @@ class MarkdownRenderable extends Renderable {
     flushMarkdownRaw();
     return renderTokens;
   }
+  buildTopLevelRenderBlocks(tokens) {
+    const blocks = [];
+    let gapBefore = "";
+    for (let i = 0;i < tokens.length; i += 1) {
+      const token = tokens[i];
+      if (token.type === "space") {
+        gapBefore += token.raw;
+        continue;
+      }
+      const prev = blocks[blocks.length - 1];
+      const marginTop = prev && (this.shouldRenderSeparately(prev.token) || TRAILING_MARKDOWN_BLOCK_BREAKS_RE.test(prev.token.raw + gapBefore)) ? 1 : 0;
+      blocks.push({
+        token,
+        sourceTokenEnd: i + 1,
+        marginTop
+      });
+      gapBefore = "";
+    }
+    return blocks;
+  }
   getTableRowsToRender(table) {
     return table.rows;
   }
@@ -9937,13 +8465,29 @@ class MarkdownRenderable extends Renderable {
       changed
     };
   }
+  resolveTableStyle(options = this._tableOptions) {
+    if (options?.style === "columns") {
+      return "columns";
+    }
+    if (options?.style === "grid") {
+      return "grid";
+    }
+    return this._internalBlockMode === "top-level" ? "columns" : "grid";
+  }
+  usesBorderlessColumnSpacing(options = this._tableOptions) {
+    const style = this.resolveTableStyle(options);
+    const borders = options?.borders ?? style === "grid";
+    return style === "columns" && !borders;
+  }
   resolveTableRenderableOptions() {
-    const borders = this._tableOptions?.borders ?? true;
+    const style = this.resolveTableStyle();
+    const borders = this._tableOptions?.borders ?? style === "grid";
     return {
-      columnWidthMode: this._tableOptions?.widthMode ?? "full",
+      columnWidthMode: this._tableOptions?.widthMode ?? (style === "columns" ? "content" : "full"),
       columnFitter: this._tableOptions?.columnFitter ?? "proportional",
       wrapMode: this._tableOptions?.wrapMode ?? "word",
       cellPadding: this._tableOptions?.cellPadding ?? 0,
+      columnGap: this.usesBorderlessColumnSpacing() ? 2 : 0,
       border: borders,
       outerBorder: this._tableOptions?.outerBorder ?? borders,
       showBorders: borders,
@@ -9957,6 +8501,7 @@ class MarkdownRenderable extends Renderable {
     tableRenderable.columnFitter = options.columnFitter;
     tableRenderable.wrapMode = options.wrapMode;
     tableRenderable.cellPadding = options.cellPadding;
+    tableRenderable.columnGap = options.columnGap;
     tableRenderable.border = options.border;
     tableRenderable.outerBorder = options.outerBorder;
     tableRenderable.showBorders = options.showBorders;
@@ -9988,6 +8533,7 @@ class MarkdownRenderable extends Renderable {
       columnFitter: options.columnFitter,
       wrapMode: options.wrapMode,
       cellPadding: options.cellPadding,
+      columnGap: options.columnGap,
       border: options.border,
       outerBorder: options.outerBorder,
       showBorders: options.showBorders,
@@ -10008,6 +8554,75 @@ class MarkdownRenderable extends Renderable {
       tableContentCache: cache
     };
   }
+  getStableBlockCount(blocks, stableTokenCount) {
+    if (this._internalBlockMode !== "top-level") {
+      return 0;
+    }
+    let stableBlockCount = 0;
+    for (const block of blocks) {
+      if (block.sourceTokenEnd <= stableTokenCount) {
+        stableBlockCount += 1;
+        continue;
+      }
+      break;
+    }
+    return stableBlockCount;
+  }
+  syncTopLevelBlockState(state, block, tableContentCache = state.tableContentCache) {
+    state.token = block.token;
+    state.tokenRaw = block.token.raw;
+    state.marginTop = block.marginTop;
+    state.tableContentCache = tableContentCache;
+  }
+  getTopLevelBlockRaw(token) {
+    if (!token.raw) {
+      return;
+    }
+    return this.shouldRenderSeparately(token) ? token.raw : this.normalizeScrollbackMarkdownBlockRaw(token.raw);
+  }
+  createTopLevelDefaultRenderable(block, index) {
+    const { token, marginTop } = block;
+    const id = `${this.id}-block-${index}`;
+    if (token.type === "code") {
+      const renderable2 = this.createCodeRenderable(token, id);
+      renderable2.marginTop = marginTop;
+      return { renderable: renderable2 };
+    }
+    if (token.type === "table") {
+      const next = this.createTableBlock(token, id);
+      next.renderable.marginTop = marginTop;
+      return next;
+    }
+    const markdownRaw = this.getTopLevelBlockRaw(token);
+    if (!markdownRaw) {
+      return { renderable: undefined };
+    }
+    const renderable = this.createMarkdownCodeRenderable(markdownRaw, id);
+    renderable.marginTop = marginTop;
+    return { renderable };
+  }
+  createTopLevelRenderable(block, index) {
+    if (!this._renderNode) {
+      return this.createTopLevelDefaultRenderable(block, index);
+    }
+    let next;
+    const context = {
+      syntaxStyle: this._syntaxStyle,
+      conceal: this._conceal,
+      concealCode: this._concealCode,
+      treeSitterClient: this._treeSitterClient,
+      defaultRender: () => {
+        next = this.createTopLevelDefaultRenderable(block, index);
+        return next.renderable ?? null;
+      }
+    };
+    const custom = this._renderNode(block.token, context);
+    if (custom) {
+      this.applyMargins(custom, block.marginTop, 0);
+      return { renderable: custom };
+    }
+    return next ?? this.createTopLevelDefaultRenderable(block, index);
+  }
   createDefaultRenderable(token, index, hasNextToken = false) {
     const id = `${this.id}-block-${index}`;
     const marginBottom = this.getInterBlockMargin(token, hasNextToken);
@@ -10072,12 +8687,57 @@ class MarkdownRenderable extends Renderable {
     this.add(markdownRenderable);
     state.renderable = markdownRenderable;
   }
+  updateTopLevelBlocks(tokens, forceTableRefresh) {
+    const blocks = this.buildTopLevelRenderBlocks(tokens);
+    this._stableBlockCount = this.getStableBlockCount(blocks, this._parseState?.stableTokenCount ?? 0);
+    let blockIndex = 0;
+    for (let i = 0;i < blocks.length; i += 1) {
+      const block = blocks[i];
+      const existing = this._blockStates[blockIndex];
+      if (existing && existing.token === block.token && !forceTableRefresh) {
+        if (existing.marginTop !== block.marginTop) {
+          this.applyMargins(existing.renderable, block.marginTop, 0);
+        }
+        this.syncTopLevelBlockState(existing, block);
+        blockIndex++;
+        continue;
+      }
+      if (existing && existing.tokenRaw === block.token.raw && existing.token.type === block.token.type && !forceTableRefresh) {
+        if (existing.marginTop !== block.marginTop) {
+          this.applyMargins(existing.renderable, block.marginTop, 0);
+        }
+        this.syncTopLevelBlockState(existing, block);
+        blockIndex++;
+        continue;
+      }
+      if (existing) {
+        existing.renderable.destroyRecursively();
+      }
+      const next = this.createTopLevelRenderable(block, blockIndex);
+      if (next.renderable) {
+        this.add(next.renderable);
+        this._blockStates[blockIndex] = {
+          token: block.token,
+          tokenRaw: block.token.raw,
+          marginTop: block.marginTop,
+          renderable: next.renderable,
+          tableContentCache: next.tableContentCache
+        };
+      }
+      blockIndex++;
+    }
+    while (this._blockStates.length > blockIndex) {
+      const removed = this._blockStates.pop();
+      removed.renderable.destroyRecursively();
+    }
+  }
   updateBlocks(forceTableRefresh = false) {
     if (this.isDestroyed)
       return;
     if (!this._content) {
       this.clearBlockStates();
       this._parseState = null;
+      this._stableBlockCount = 0;
       return;
     }
     const trailingUnstable = this._streaming ? 2 : 0;
@@ -10085,17 +8745,24 @@ class MarkdownRenderable extends Renderable {
     const tokens = this._parseState.tokens;
     if (tokens.length === 0 && this._content.length > 0) {
       this.clearBlockStates();
+      this._stableBlockCount = 0;
       const fallback = this.createMarkdownCodeRenderable(this._content, `${this.id}-fallback`);
       this.add(fallback);
       this._blockStates = [
         {
           token: { type: "text", raw: this._content, text: this._content },
           tokenRaw: this._content,
+          marginTop: 0,
           renderable: fallback
         }
       ];
       return;
     }
+    if (this._internalBlockMode === "top-level") {
+      this.updateTopLevelBlocks(tokens, forceTableRefresh);
+      return;
+    }
+    this._stableBlockCount = 0;
     const blockTokens = this.buildRenderableTokens(tokens);
     const lastBlockIndex = blockTokens.length - 1;
     let blockIndex = 0;
@@ -10180,8 +8847,13 @@ class MarkdownRenderable extends Renderable {
       state.renderable.destroyRecursively();
     }
     this._blockStates = [];
+    this._stableBlockCount = 0;
   }
   rerenderBlocks() {
+    if (this._internalBlockMode === "top-level") {
+      this.updateBlocks(true);
+      return;
+    }
     for (let i = 0;i < this._blockStates.length; i++) {
       const state = this._blockStates[i];
       const hasNextToken = i < this._blockStates.length - 1;
@@ -12287,7 +10959,7 @@ class TimeToFirstDrawRenderable extends Renderable {
     return Math.max(0, Math.floor(value));
   }
 }
-export { TextBufferView, convertThemeToStyles, SyntaxStyle, DistortionEffect, VignetteEffect, CloudsEffect, FlamesEffect, CRTRollingBarEffect, RainbowTextEffect, applyScanlines, applyInvert, applyNoise, applyChromaticAberration, applyAsciiArt, applyBrightness, applyGain, applySaturation, BloomEffect, SEPIA_MATRIX, PROTANOPIA_SIM_MATRIX, DEUTERANOPIA_SIM_MATRIX, TRITANOPIA_SIM_MATRIX, ACHROMATOPSIA_MATRIX, PROTANOPIA_COMP_MATRIX, DEUTERANOPIA_COMP_MATRIX, TRITANOPIA_COMP_MATRIX, TECHNICOLOR_MATRIX, SOLARIZATION_MATRIX, SYNTHWAVE_MATRIX, GREENSCALE_MATRIX, GRAYSCALE_MATRIX, INVERT_MATRIX, Timeline, engine, createTimeline, SlotRegistry, createSlotRegistry, createCoreSlotRegistry, registerCorePlugin, resolveCoreSlot, SlotRenderable, NativeSpanFeed, FrameBufferRenderable, ASCIIFontRenderable, BoxRenderable, TextBufferRenderable, CodeRenderable, isTextNodeRenderable, TextNodeRenderable, RootTextNodeRenderable, Generic, Box, Text, ASCIIFont, Input, Select, TabSelect, FrameBuffer, Code, ScrollBox, vstyles, VRenderable, LineNumberRenderable, TextRenderable, DiffRenderable, TextareaRenderable, InputRenderableEvents, InputRenderable, TextTableRenderable, MarkdownRenderable, SliderRenderable, ScrollBarRenderable, ArrowRenderable, ScrollBoxRenderable, SelectRenderableEvents, SelectRenderable, TabSelectRenderableEvents, TabSelectRenderable, TimeToFirstDrawRenderable, exports_src2 as exports_src };
+export { DistortionEffect, VignetteEffect, CloudsEffect, FlamesEffect, CRTRollingBarEffect, RainbowTextEffect, applyScanlines, applyInvert, applyNoise, applyChromaticAberration, applyAsciiArt, applyBrightness, applyGain, applySaturation, BloomEffect, SEPIA_MATRIX, PROTANOPIA_SIM_MATRIX, DEUTERANOPIA_SIM_MATRIX, TRITANOPIA_SIM_MATRIX, ACHROMATOPSIA_MATRIX, PROTANOPIA_COMP_MATRIX, DEUTERANOPIA_COMP_MATRIX, TRITANOPIA_COMP_MATRIX, TECHNICOLOR_MATRIX, SOLARIZATION_MATRIX, SYNTHWAVE_MATRIX, GREENSCALE_MATRIX, GRAYSCALE_MATRIX, INVERT_MATRIX, Timeline, engine, createTimeline, SlotRegistry, createSlotRegistry, createCoreSlotRegistry, registerCorePlugin, resolveCoreSlot, SlotRenderable, NativeSpanFeed, FrameBufferRenderable, ASCIIFontRenderable, Generic, Box, Text, ASCIIFont, Input, Select, TabSelect, FrameBuffer, Code, ScrollBox, vstyles, VRenderable, LineNumberRenderable, DiffRenderable, TextareaRenderable, InputRenderableEvents, InputRenderable, TextTableRenderable, MarkdownRenderable, SliderRenderable, ScrollBarRenderable, ArrowRenderable, ScrollBoxRenderable, SelectRenderableEvents, SelectRenderable, TabSelectRenderableEvents, TabSelectRenderable, TimeToFirstDrawRenderable, exports_src2 as exports_src };
 
-//# debugId=1D1B6F62C2F2A1BF64756E2164756E21
-//# sourceMappingURL=index-3dryhc1d.js.map
+//# debugId=76D5B28EFB1D404464756E2164756E21
+//# sourceMappingURL=index-gwfqqvw5.js.map