@opentui/core 0.1.81 → 0.1.83

package/index.js

@@ -153,7 +153,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-ve2seej0.js";
+} from "./index-a215gqtt.js";
 // src/text-buffer-view.ts
 class TextBufferView {
   lib;
@@ -2748,6 +2748,7 @@ class TextBufferRenderable extends Renderable {
   _truncate = false;
   textBuffer;
   textBufferView;
+  _textBufferSyntaxStyle;
   _defaultOptions = {
     fg: RGBA.fromValues(1, 1, 1, 1),
     bg: RGBA.fromValues(0, 0, 0, 0),
@@ -2774,8 +2775,8 @@ class TextBufferRenderable extends Renderable {
     this._truncate = options.truncate ?? this._defaultOptions.truncate;
     this.textBuffer = TextBuffer.create(this._ctx.widthMethod);
     this.textBufferView = TextBufferView.create(this.textBuffer);
-    const style = SyntaxStyle.create();
-    this.textBuffer.setSyntaxStyle(style);
+    this._textBufferSyntaxStyle = SyntaxStyle.create();
+    this.textBuffer.setSyntaxStyle(this._textBufferSyntaxStyle);
     this.textBufferView.setWrapMode(this._wrapMode);
     this.setupMeasureFunc();
     this.textBuffer.setDefaultFg(this._defaultFg);
@@ -3085,6 +3086,10 @@ class TextBufferRenderable extends Renderable {
     }
   }
   destroy() {
+    if (this.isDestroyed)
+      return;
+    this.textBuffer.setSyntaxStyle(null);
+    this._textBufferSyntaxStyle.destroy();
     this.textBufferView.destroy();
     this.textBuffer.destroy();
     super.destroy();
@@ -7159,6 +7164,907 @@ class InputRenderable extends TextareaRenderable {
   }
   set initialValue(value) {}
 }
+// src/renderables/TextTable.ts
+var MEASURE_HEIGHT = 1e4;
+
+class TextTableRenderable extends Renderable {
+  _content;
+  _wrapMode;
+  _columnWidthMode;
+  _cellPadding;
+  _showBorders;
+  _border;
+  _outerBorder;
+  _hasExplicitOuterBorder;
+  _borderStyle;
+  _borderColor;
+  _borderBackgroundColor;
+  _backgroundColor;
+  _defaultFg;
+  _defaultBg;
+  _defaultAttributes;
+  _selectionBg;
+  _selectionFg;
+  _lastLocalSelection = null;
+  _lastSelectionMode = null;
+  _cells = [];
+  _prevCellContent = [];
+  _rowCount = 0;
+  _columnCount = 0;
+  _layout = this.createEmptyLayout();
+  _layoutDirty = true;
+  _rasterDirty = true;
+  _cachedMeasureLayout = null;
+  _cachedMeasureWidth = undefined;
+  _defaultOptions = {
+    content: [],
+    wrapMode: "none",
+    columnWidthMode: "content",
+    cellPadding: 0,
+    showBorders: true,
+    border: true,
+    outerBorder: true,
+    selectable: true,
+    selectionBg: undefined,
+    selectionFg: undefined,
+    borderStyle: "single",
+    borderColor: "#FFFFFF",
+    borderBackgroundColor: "transparent",
+    backgroundColor: "transparent",
+    fg: "#FFFFFF",
+    bg: "transparent",
+    attributes: 0
+  };
+  constructor(ctx, options = {}) {
+    super(ctx, { ...options, buffered: true });
+    this._content = options.content ?? this._defaultOptions.content;
+    this._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode;
+    this._columnWidthMode = options.columnWidthMode ?? this._defaultOptions.columnWidthMode;
+    this._cellPadding = this.resolveCellPadding(options.cellPadding);
+    this._showBorders = options.showBorders ?? this._defaultOptions.showBorders;
+    this._border = options.border ?? this._defaultOptions.border;
+    this._hasExplicitOuterBorder = options.outerBorder !== undefined;
+    this._outerBorder = options.outerBorder ?? this._border;
+    this.selectable = options.selectable ?? this._defaultOptions.selectable;
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
+    this._borderStyle = parseBorderStyle(options.borderStyle, this._defaultOptions.borderStyle);
+    this._borderColor = parseColor(options.borderColor ?? this._defaultOptions.borderColor);
+    this._borderBackgroundColor = parseColor(options.borderBackgroundColor ?? this._defaultOptions.borderBackgroundColor);
+    this._backgroundColor = parseColor(options.backgroundColor ?? this._defaultOptions.backgroundColor);
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
+    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes;
+    this.setupMeasureFunc();
+    this.rebuildCells();
+  }
+  get content() {
+    return this._content;
+  }
+  set content(value) {
+    this._content = value ?? [];
+    this.rebuildCells();
+  }
+  get wrapMode() {
+    return this._wrapMode;
+  }
+  set wrapMode(value) {
+    if (this._wrapMode === value)
+      return;
+    this._wrapMode = value;
+    for (const row of this._cells) {
+      for (const cell of row) {
+        cell.textBufferView.setWrapMode(value);
+      }
+    }
+    this.invalidateLayoutAndRaster();
+  }
+  get columnWidthMode() {
+    return this._columnWidthMode;
+  }
+  set columnWidthMode(value) {
+    if (this._columnWidthMode === value)
+      return;
+    this._columnWidthMode = value;
+    this.invalidateLayoutAndRaster();
+  }
+  get cellPadding() {
+    return this._cellPadding;
+  }
+  set cellPadding(value) {
+    const next = this.resolveCellPadding(value);
+    if (this._cellPadding === next)
+      return;
+    this._cellPadding = next;
+    this.invalidateLayoutAndRaster();
+  }
+  get showBorders() {
+    return this._showBorders;
+  }
+  set showBorders(value) {
+    if (this._showBorders === value)
+      return;
+    this._showBorders = value;
+    this.invalidateRasterOnly();
+  }
+  get outerBorder() {
+    return this._outerBorder;
+  }
+  set outerBorder(value) {
+    if (this._outerBorder === value)
+      return;
+    this._hasExplicitOuterBorder = true;
+    this._outerBorder = value;
+    this.invalidateLayoutAndRaster();
+  }
+  get border() {
+    return this._border;
+  }
+  set border(value) {
+    if (this._border === value)
+      return;
+    this._border = value;
+    if (!this._hasExplicitOuterBorder) {
+      this._outerBorder = value;
+    }
+    this.invalidateLayoutAndRaster();
+  }
+  get borderStyle() {
+    return this._borderStyle;
+  }
+  set borderStyle(value) {
+    const next = parseBorderStyle(value, this._defaultOptions.borderStyle);
+    if (this._borderStyle === next)
+      return;
+    this._borderStyle = next;
+    this.invalidateRasterOnly();
+  }
+  get borderColor() {
+    return this._borderColor;
+  }
+  set borderColor(value) {
+    const next = parseColor(value);
+    if (this._borderColor === next)
+      return;
+    this._borderColor = next;
+    this.invalidateRasterOnly();
+  }
+  shouldStartSelection(x, y) {
+    if (!this.selectable)
+      return false;
+    this.ensureLayoutReady();
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return this.getCellAtLocalPosition(localX, localY) !== null;
+  }
+  onSelectionChanged(selection) {
+    this.ensureLayoutReady();
+    const previousLocalSelection = this._lastLocalSelection;
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this._lastLocalSelection = localSelection;
+    const dirtyRows = this.getDirtySelectionRowRange(previousLocalSelection, localSelection);
+    if (!localSelection?.isActive) {
+      this.resetCellSelections();
+      this._lastSelectionMode = null;
+    } else {
+      this.applySelectionToCells(localSelection, selection?.isStart ?? false);
+    }
+    if (dirtyRows !== null) {
+      this.redrawSelectionRows(dirtyRows.firstRow, dirtyRows.lastRow);
+    }
+    return this.hasSelection();
+  }
+  hasSelection() {
+    for (const row of this._cells) {
+      for (const cell of row) {
+        if (cell.textBufferView.hasSelection()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  getSelection() {
+    for (const row of this._cells) {
+      for (const cell of row) {
+        const selection = cell.textBufferView.getSelection();
+        if (selection) {
+          return selection;
+        }
+      }
+    }
+    return null;
+  }
+  getSelectedText() {
+    const selectedRows = [];
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      const rowSelections = [];
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell || !cell.textBufferView.hasSelection())
+          continue;
+        const selectedText = cell.textBufferView.getSelectedText();
+        if (selectedText.length > 0) {
+          rowSelections.push(selectedText);
+        }
+      }
+      if (rowSelections.length > 0) {
+        selectedRows.push(rowSelections.join("\t"));
+      }
+    }
+    return selectedRows.join(`
+`);
+  }
+  onResize(width, height) {
+    this.invalidateLayoutAndRaster(false);
+    super.onResize(width, height);
+  }
+  renderSelf(buffer) {
+    if (!this.visible || this.isDestroyed)
+      return;
+    if (this._layoutDirty) {
+      this.rebuildLayoutForCurrentWidth();
+    }
+    if (!this._rasterDirty)
+      return;
+    buffer.clear(this._backgroundColor);
+    if (this._rowCount === 0 || this._columnCount === 0) {
+      this._rasterDirty = false;
+      return;
+    }
+    this.drawBorders(buffer);
+    this.drawCells(buffer);
+    this._rasterDirty = false;
+  }
+  destroySelf() {
+    this.destroyCells();
+    super.destroySelf();
+  }
+  setupMeasureFunc() {
+    const measureFunc = (width, widthMode, height, heightMode) => {
+      const hasWidthConstraint = widthMode !== MeasureMode.Undefined && Number.isFinite(width);
+      const rawWidthConstraint = hasWidthConstraint ? Math.max(1, Math.floor(width)) : undefined;
+      const widthConstraint = this.resolveLayoutWidthConstraint(rawWidthConstraint);
+      const measuredLayout = this.computeLayout(widthConstraint);
+      this._cachedMeasureLayout = measuredLayout;
+      this._cachedMeasureWidth = widthConstraint;
+      let measuredWidth = measuredLayout.tableWidth > 0 ? measuredLayout.tableWidth : 1;
+      let measuredHeight = measuredLayout.tableHeight > 0 ? measuredLayout.tableHeight : 1;
+      if (widthMode === MeasureMode.AtMost && rawWidthConstraint !== undefined && this._positionType !== "absolute") {
+        measuredWidth = Math.min(rawWidthConstraint, measuredWidth);
+      }
+      if (heightMode === MeasureMode.AtMost && Number.isFinite(height) && this._positionType !== "absolute") {
+        measuredHeight = Math.min(Math.max(1, Math.floor(height)), measuredHeight);
+      }
+      return {
+        width: measuredWidth,
+        height: measuredHeight
+      };
+    };
+    this.yogaNode.setMeasureFunc(measureFunc);
+  }
+  rebuildCells() {
+    const newRowCount = this._content.length;
+    const newColumnCount = this._content.reduce((max, row) => Math.max(max, row.length), 0);
+    if (this._cells.length === 0) {
+      this._rowCount = newRowCount;
+      this._columnCount = newColumnCount;
+      this._cells = [];
+      this._prevCellContent = [];
+      for (let rowIdx = 0;rowIdx < newRowCount; rowIdx++) {
+        const row = this._content[rowIdx] ?? [];
+        const rowCells = [];
+        const rowRefs = [];
+        for (let colIdx = 0;colIdx < newColumnCount; colIdx++) {
+          const cellContent = row[colIdx];
+          rowCells.push(this.createCell(cellContent));
+          rowRefs.push(cellContent);
+        }
+        this._cells.push(rowCells);
+        this._prevCellContent.push(rowRefs);
+      }
+      this.invalidateLayoutAndRaster();
+      return;
+    }
+    this.updateCellsDiff(newRowCount, newColumnCount);
+    this.invalidateLayoutAndRaster();
+  }
+  updateCellsDiff(newRowCount, newColumnCount) {
+    const oldRowCount = this._rowCount;
+    const oldColumnCount = this._columnCount;
+    const keepRows = Math.min(oldRowCount, newRowCount);
+    const keepCols = Math.min(oldColumnCount, newColumnCount);
+    for (let rowIdx = 0;rowIdx < keepRows; rowIdx++) {
+      const newRow = this._content[rowIdx] ?? [];
+      const cellRow = this._cells[rowIdx];
+      const refRow = this._prevCellContent[rowIdx];
+      for (let colIdx = 0;colIdx < keepCols; colIdx++) {
+        const cellContent = newRow[colIdx];
+        if (cellContent === refRow[colIdx])
+          continue;
+        const oldCell = cellRow[colIdx];
+        oldCell.textBufferView.destroy();
+        oldCell.textBuffer.destroy();
+        oldCell.syntaxStyle.destroy();
+        cellRow[colIdx] = this.createCell(cellContent);
+        refRow[colIdx] = cellContent;
+      }
+      if (newColumnCount > oldColumnCount) {
+        for (let colIdx = oldColumnCount;colIdx < newColumnCount; colIdx++) {
+          const cellContent = newRow[colIdx];
+          cellRow.push(this.createCell(cellContent));
+          refRow.push(cellContent);
+        }
+      } else if (newColumnCount < oldColumnCount) {
+        for (let colIdx = newColumnCount;colIdx < oldColumnCount; colIdx++) {
+          const cell = cellRow[colIdx];
+          cell.textBufferView.destroy();
+          cell.textBuffer.destroy();
+          cell.syntaxStyle.destroy();
+        }
+        cellRow.length = newColumnCount;
+        refRow.length = newColumnCount;
+      }
+    }
+    if (newRowCount > oldRowCount) {
+      for (let rowIdx = oldRowCount;rowIdx < newRowCount; rowIdx++) {
+        const newRow = this._content[rowIdx] ?? [];
+        const rowCells = [];
+        const rowRefs = [];
+        for (let colIdx = 0;colIdx < newColumnCount; colIdx++) {
+          const cellContent = newRow[colIdx];
+          rowCells.push(this.createCell(cellContent));
+          rowRefs.push(cellContent);
+        }
+        this._cells.push(rowCells);
+        this._prevCellContent.push(rowRefs);
+      }
+    } else if (newRowCount < oldRowCount) {
+      for (let rowIdx = newRowCount;rowIdx < oldRowCount; rowIdx++) {
+        const row = this._cells[rowIdx];
+        for (const cell of row) {
+          cell.textBufferView.destroy();
+          cell.textBuffer.destroy();
+          cell.syntaxStyle.destroy();
+        }
+      }
+      this._cells.length = newRowCount;
+      this._prevCellContent.length = newRowCount;
+    }
+    this._rowCount = newRowCount;
+    this._columnCount = newColumnCount;
+  }
+  createCell(content) {
+    const styledText = this.toStyledText(content);
+    const textBuffer = TextBuffer.create(this._ctx.widthMethod);
+    const syntaxStyle = SyntaxStyle.create();
+    textBuffer.setDefaultFg(this._defaultFg);
+    textBuffer.setDefaultBg(this._defaultBg);
+    textBuffer.setDefaultAttributes(this._defaultAttributes);
+    textBuffer.setSyntaxStyle(syntaxStyle);
+    textBuffer.setStyledText(styledText);
+    const textBufferView = TextBufferView.create(textBuffer);
+    textBufferView.setWrapMode(this._wrapMode);
+    return { textBuffer, textBufferView, syntaxStyle };
+  }
+  toStyledText(content) {
+    if (Array.isArray(content)) {
+      return new StyledText(content);
+    }
+    if (content === null || content === undefined) {
+      return stringToStyledText("");
+    }
+    return stringToStyledText(String(content));
+  }
+  destroyCells() {
+    for (const row of this._cells) {
+      for (const cell of row) {
+        cell.textBufferView.destroy();
+        cell.textBuffer.destroy();
+        cell.syntaxStyle.destroy();
+      }
+    }
+    this._cells = [];
+    this._prevCellContent = [];
+    this._rowCount = 0;
+    this._columnCount = 0;
+    this._layout = this.createEmptyLayout();
+  }
+  rebuildLayoutForCurrentWidth() {
+    const maxTableWidth = this.resolveLayoutWidthConstraint(this.width);
+    let layout;
+    if (this._cachedMeasureLayout !== null && this._cachedMeasureWidth === maxTableWidth) {
+      layout = this._cachedMeasureLayout;
+    } else {
+      layout = this.computeLayout(maxTableWidth);
+    }
+    this._cachedMeasureLayout = null;
+    this._cachedMeasureWidth = undefined;
+    this._layout = layout;
+    this.applyLayoutToViews(layout);
+    this._layoutDirty = false;
+    if (this._lastLocalSelection?.isActive) {
+      this.applySelectionToCells(this._lastLocalSelection, true);
+    }
+  }
+  computeLayout(maxTableWidth) {
+    if (this._rowCount === 0 || this._columnCount === 0) {
+      return this.createEmptyLayout();
+    }
+    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 rowOffsets = this.computeOffsets(rowHeights, borderLayout.top, borderLayout.bottom, borderLayout.innerHorizontal);
+    return {
+      columnWidths,
+      rowHeights,
+      columnOffsets,
+      rowOffsets,
+      columnOffsetsI32: new Int32Array(columnOffsets),
+      rowOffsetsI32: new Int32Array(rowOffsets),
+      tableWidth: (columnOffsets[columnOffsets.length - 1] ?? 0) + 1,
+      tableHeight: (rowOffsets[rowOffsets.length - 1] ?? 0) + 1
+    };
+  }
+  computeColumnWidths(maxTableWidth, borderLayout) {
+    const horizontalPadding = this.getHorizontalCellPadding();
+    const intrinsicWidths = new Array(this._columnCount).fill(1 + horizontalPadding);
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell)
+          continue;
+        const measure = cell.textBufferView.measureForDimensions(0, MEASURE_HEIGHT);
+        const measuredWidth = Math.max(1, measure?.maxWidth ?? 0) + horizontalPadding;
+        intrinsicWidths[colIdx] = Math.max(intrinsicWidths[colIdx], measuredWidth);
+      }
+    }
+    if (maxTableWidth === undefined || !Number.isFinite(maxTableWidth) || maxTableWidth <= 0) {
+      return intrinsicWidths;
+    }
+    const maxContentWidth = Math.max(1, Math.floor(maxTableWidth) - this.getVerticalBorderCount(borderLayout));
+    const currentWidth = intrinsicWidths.reduce((sum, width) => sum + width, 0);
+    if (currentWidth === maxContentWidth) {
+      return intrinsicWidths;
+    }
+    if (currentWidth < maxContentWidth) {
+      if (this._columnWidthMode === "fill") {
+        return this.expandColumnWidths(intrinsicWidths, maxContentWidth);
+      }
+      return intrinsicWidths;
+    }
+    if (this._wrapMode === "none") {
+      return intrinsicWidths;
+    }
+    return this.fitColumnWidths(intrinsicWidths, maxContentWidth);
+  }
+  expandColumnWidths(widths, targetContentWidth) {
+    const baseWidths = widths.map((width) => Math.max(1, Math.floor(width)));
+    const totalBaseWidth = baseWidths.reduce((sum, width) => sum + width, 0);
+    if (totalBaseWidth >= targetContentWidth) {
+      return baseWidths;
+    }
+    const expanded = [...baseWidths];
+    const columns = expanded.length;
+    const extraWidth = targetContentWidth - totalBaseWidth;
+    const sharedWidth = Math.floor(extraWidth / columns);
+    const remainder = extraWidth % columns;
+    for (let idx = 0;idx < columns; idx++) {
+      expanded[idx] += sharedWidth;
+      if (idx < remainder) {
+        expanded[idx] += 1;
+      }
+    }
+    return expanded;
+  }
+  fitColumnWidths(widths, targetContentWidth) {
+    const minWidth = 1 + this.getHorizontalCellPadding();
+    const hardMinWidths = new Array(widths.length).fill(minWidth);
+    const baseWidths = widths.map((width) => Math.max(1, Math.floor(width)));
+    const preferredMinWidths = baseWidths.map((width) => Math.min(width, minWidth + 1));
+    const preferredMinTotal = preferredMinWidths.reduce((sum, width) => sum + width, 0);
+    const floorWidths = preferredMinTotal <= targetContentWidth ? preferredMinWidths : hardMinWidths;
+    const floorTotal = floorWidths.reduce((sum, width) => sum + width, 0);
+    const clampedTarget = Math.max(floorTotal, targetContentWidth);
+    const totalBaseWidth = baseWidths.reduce((sum, width) => sum + width, 0);
+    if (totalBaseWidth <= clampedTarget) {
+      return baseWidths;
+    }
+    const shrinkable = baseWidths.map((width, idx) => width - floorWidths[idx]);
+    const totalShrinkable = shrinkable.reduce((sum, value) => sum + value, 0);
+    if (totalShrinkable <= 0) {
+      return [...floorWidths];
+    }
+    const targetShrink = totalBaseWidth - clampedTarget;
+    const integerShrink = new Array(baseWidths.length).fill(0);
+    const fractions = new Array(baseWidths.length).fill(0);
+    let usedShrink = 0;
+    for (let idx = 0;idx < baseWidths.length; idx++) {
+      if (shrinkable[idx] <= 0)
+        continue;
+      const exact = shrinkable[idx] / totalShrinkable * targetShrink;
+      const whole = Math.min(shrinkable[idx], Math.floor(exact));
+      integerShrink[idx] = whole;
+      fractions[idx] = exact - whole;
+      usedShrink += whole;
+    }
+    let remainingShrink = targetShrink - usedShrink;
+    while (remainingShrink > 0) {
+      let bestIdx = -1;
+      let bestFraction = -1;
+      for (let idx = 0;idx < baseWidths.length; idx++) {
+        if (shrinkable[idx] - integerShrink[idx] <= 0)
+          continue;
+        if (fractions[idx] > bestFraction) {
+          bestFraction = fractions[idx];
+          bestIdx = idx;
+        }
+      }
+      if (bestIdx === -1)
+        break;
+      integerShrink[bestIdx] += 1;
+      fractions[bestIdx] = 0;
+      remainingShrink -= 1;
+    }
+    return baseWidths.map((width, idx) => Math.max(floorWidths[idx], width - integerShrink[idx]));
+  }
+  computeRowHeights(columnWidths) {
+    const horizontalPadding = this.getHorizontalCellPadding();
+    const verticalPadding = this.getVerticalCellPadding();
+    const rowHeights = new Array(this._rowCount).fill(1 + verticalPadding);
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell)
+          continue;
+        const width = Math.max(1, (columnWidths[colIdx] ?? 1) - horizontalPadding);
+        const measure = cell.textBufferView.measureForDimensions(width, MEASURE_HEIGHT);
+        const lineCount = Math.max(1, measure?.lineCount ?? 1);
+        rowHeights[rowIdx] = Math.max(rowHeights[rowIdx], lineCount + verticalPadding);
+      }
+    }
+    return rowHeights;
+  }
+  computeOffsets(parts, startBoundary, endBoundary, includeInnerBoundaries) {
+    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);
+      offsets.push(cursor);
+    }
+    return offsets;
+  }
+  applyLayoutToViews(layout) {
+    const horizontalPadding = this.getHorizontalCellPadding();
+    const verticalPadding = this.getVerticalCellPadding();
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell)
+          continue;
+        const colWidth = layout.columnWidths[colIdx] ?? 1;
+        const rowHeight = layout.rowHeights[rowIdx] ?? 1;
+        const contentWidth = Math.max(1, colWidth - horizontalPadding);
+        const contentHeight = Math.max(1, rowHeight - verticalPadding);
+        if (this._wrapMode === "none") {
+          cell.textBufferView.setWrapWidth(null);
+        } else {
+          cell.textBufferView.setWrapWidth(contentWidth);
+        }
+        cell.textBufferView.setViewport(0, 0, contentWidth, contentHeight);
+      }
+    }
+  }
+  resolveBorderLayout() {
+    return {
+      left: this._outerBorder,
+      right: this._outerBorder,
+      top: this._outerBorder,
+      bottom: this._outerBorder,
+      innerVertical: this._border && this._columnCount > 1,
+      innerHorizontal: this._border && this._rowCount > 1
+    };
+  }
+  getVerticalBorderCount(borderLayout) {
+    return (borderLayout.left ? 1 : 0) + (borderLayout.right ? 1 : 0) + (borderLayout.innerVertical ? Math.max(0, this._columnCount - 1) : 0);
+  }
+  getHorizontalBorderCount(borderLayout) {
+    return (borderLayout.top ? 1 : 0) + (borderLayout.bottom ? 1 : 0) + (borderLayout.innerHorizontal ? Math.max(0, this._rowCount - 1) : 0);
+  }
+  drawBorders(buffer) {
+    if (!this._showBorders) {
+      return;
+    }
+    const borderLayout = this.resolveBorderLayout();
+    if (this.getVerticalBorderCount(borderLayout) === 0 && this.getHorizontalBorderCount(borderLayout) === 0) {
+      return;
+    }
+    buffer.drawGrid({
+      borderChars: BorderCharArrays[this._borderStyle],
+      borderFg: this._borderColor,
+      borderBg: this._borderBackgroundColor,
+      columnOffsets: this._layout.columnOffsetsI32,
+      rowOffsets: this._layout.rowOffsetsI32,
+      drawInner: this._border,
+      drawOuter: this._outerBorder
+    });
+  }
+  drawCells(buffer) {
+    this.drawCellRange(buffer, 0, this._rowCount - 1);
+  }
+  drawCellRange(buffer, firstRow, lastRow) {
+    const colOffsets = this._layout.columnOffsets;
+    const rowOffsets = this._layout.rowOffsets;
+    const cellPadding = this._cellPadding;
+    for (let rowIdx = firstRow;rowIdx <= lastRow; rowIdx++) {
+      const cellY = (rowOffsets[rowIdx] ?? 0) + 1 + cellPadding;
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell)
+          continue;
+        buffer.drawTextBuffer(cell.textBufferView, (colOffsets[colIdx] ?? 0) + 1 + cellPadding, cellY);
+      }
+    }
+  }
+  redrawSelectionRows(firstRow, lastRow) {
+    if (firstRow > lastRow)
+      return;
+    if (this._backgroundColor.a < 1) {
+      this.invalidateRasterOnly();
+      return;
+    }
+    const buffer = this.frameBuffer;
+    if (!buffer)
+      return;
+    this.clearCellRange(buffer, firstRow, lastRow);
+    this.drawCellRange(buffer, firstRow, lastRow);
+    this.requestRender();
+  }
+  clearCellRange(buffer, firstRow, lastRow) {
+    const colWidths = this._layout.columnWidths;
+    const rowHeights = this._layout.rowHeights;
+    const colOffsets = this._layout.columnOffsets;
+    const rowOffsets = this._layout.rowOffsets;
+    for (let rowIdx = firstRow;rowIdx <= lastRow; rowIdx++) {
+      const cellY = (rowOffsets[rowIdx] ?? 0) + 1;
+      const rowHeight = rowHeights[rowIdx] ?? 1;
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cellX = (colOffsets[colIdx] ?? 0) + 1;
+        const colWidth = colWidths[colIdx] ?? 1;
+        buffer.fillRect(cellX, cellY, colWidth, rowHeight, this._backgroundColor);
+      }
+    }
+  }
+  ensureLayoutReady() {
+    if (!this._layoutDirty)
+      return;
+    this.rebuildLayoutForCurrentWidth();
+  }
+  getCellAtLocalPosition(localX, localY) {
+    if (this._rowCount === 0 || this._columnCount === 0)
+      return null;
+    if (localX < 0 || localY < 0 || localX >= this._layout.tableWidth || localY >= this._layout.tableHeight) {
+      return null;
+    }
+    let rowIdx = -1;
+    for (let idx = 0;idx < this._rowCount; idx++) {
+      const top = (this._layout.rowOffsets[idx] ?? 0) + 1;
+      const bottom = top + (this._layout.rowHeights[idx] ?? 1) - 1;
+      if (localY >= top && localY <= bottom) {
+        rowIdx = idx;
+        break;
+      }
+    }
+    if (rowIdx < 0)
+      return null;
+    let colIdx = -1;
+    for (let idx = 0;idx < this._columnCount; idx++) {
+      const left = (this._layout.columnOffsets[idx] ?? 0) + 1;
+      const right = left + (this._layout.columnWidths[idx] ?? 1) - 1;
+      if (localX >= left && localX <= right) {
+        colIdx = idx;
+        break;
+      }
+    }
+    if (colIdx < 0)
+      return null;
+    return { rowIdx, colIdx };
+  }
+  applySelectionToCells(localSelection, isStart) {
+    const minSelY = Math.min(localSelection.anchorY, localSelection.focusY);
+    const maxSelY = Math.max(localSelection.anchorY, localSelection.focusY);
+    const firstRow = this.findRowForLocalY(minSelY);
+    const lastRow = this.findRowForLocalY(maxSelY);
+    const selection = this.resolveSelectionResolution(localSelection);
+    const modeChanged = this._lastSelectionMode !== selection.mode;
+    this._lastSelectionMode = selection.mode;
+    const lockToAnchorColumn = selection.mode === "column-locked" && selection.anchorColumn !== null;
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      if (rowIdx < firstRow || rowIdx > lastRow) {
+        this.resetRowSelection(rowIdx);
+        continue;
+      }
+      const cellTop = (this._layout.rowOffsets[rowIdx] ?? 0) + 1 + this._cellPadding;
+      for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+        const cell = this._cells[rowIdx]?.[colIdx];
+        if (!cell)
+          continue;
+        if (lockToAnchorColumn && colIdx !== selection.anchorColumn) {
+          cell.textBufferView.resetLocalSelection();
+          continue;
+        }
+        const cellLeft = (this._layout.columnOffsets[colIdx] ?? 0) + 1 + this._cellPadding;
+        let coords = {
+          anchorX: localSelection.anchorX - cellLeft,
+          anchorY: localSelection.anchorY - cellTop,
+          focusX: localSelection.focusX - cellLeft,
+          focusY: localSelection.focusY - cellTop
+        };
+        const isAnchorCell = selection.anchorCell !== null && selection.anchorCell.rowIdx === rowIdx && selection.anchorCell.colIdx === colIdx;
+        const forceSet = isAnchorCell && selection.mode !== "single-cell";
+        if (forceSet) {
+          coords = this.getFullCellSelectionCoords(rowIdx, colIdx);
+        }
+        const shouldUseSet = isStart || modeChanged || forceSet;
+        if (shouldUseSet) {
+          cell.textBufferView.setLocalSelection(coords.anchorX, coords.anchorY, coords.focusX, coords.focusY, this._selectionBg, this._selectionFg);
+        } else {
+          cell.textBufferView.updateLocalSelection(coords.anchorX, coords.anchorY, coords.focusX, coords.focusY, this._selectionBg, this._selectionFg);
+        }
+      }
+    }
+  }
+  resolveSelectionResolution(localSelection) {
+    const anchorCell = this.getCellAtLocalPosition(localSelection.anchorX, localSelection.anchorY);
+    const focusCell = this.getCellAtLocalPosition(localSelection.focusX, localSelection.focusY);
+    const anchorColumn = anchorCell?.colIdx ?? this.getColumnAtLocalX(localSelection.anchorX);
+    if (anchorCell !== null && focusCell !== null && anchorCell.rowIdx === focusCell.rowIdx && anchorCell.colIdx === focusCell.colIdx) {
+      return {
+        mode: "single-cell",
+        anchorCell,
+        anchorColumn
+      };
+    }
+    const focusColumn = this.getColumnAtLocalX(localSelection.focusX);
+    if (anchorColumn !== null && focusColumn === anchorColumn) {
+      return {
+        mode: "column-locked",
+        anchorCell,
+        anchorColumn
+      };
+    }
+    return {
+      mode: "grid",
+      anchorCell,
+      anchorColumn
+    };
+  }
+  getColumnAtLocalX(localX) {
+    if (this._columnCount === 0)
+      return null;
+    if (localX < 0 || localX >= this._layout.tableWidth)
+      return null;
+    for (let colIdx = 0;colIdx < this._columnCount; colIdx++) {
+      const colStart = (this._layout.columnOffsets[colIdx] ?? 0) + 1;
+      const colEnd = colStart + (this._layout.columnWidths[colIdx] ?? 1) - 1;
+      if (localX >= colStart && localX <= colEnd) {
+        return colIdx;
+      }
+    }
+    return null;
+  }
+  getFullCellSelectionCoords(rowIdx, colIdx) {
+    const colWidth = this._layout.columnWidths[colIdx] ?? 1;
+    const rowHeight = this._layout.rowHeights[rowIdx] ?? 1;
+    const contentWidth = Math.max(1, colWidth - this.getHorizontalCellPadding());
+    const contentHeight = Math.max(1, rowHeight - this.getVerticalCellPadding());
+    return {
+      anchorX: -1,
+      anchorY: 0,
+      focusX: contentWidth,
+      focusY: contentHeight
+    };
+  }
+  findRowForLocalY(localY) {
+    if (this._rowCount === 0)
+      return 0;
+    if (localY < 0)
+      return 0;
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      const rowStart = (this._layout.rowOffsets[rowIdx] ?? 0) + 1;
+      const rowEnd = rowStart + (this._layout.rowHeights[rowIdx] ?? 1) - 1;
+      if (localY <= rowEnd)
+        return rowIdx;
+    }
+    return this._rowCount - 1;
+  }
+  getSelectionRowRange(selection) {
+    if (!selection?.isActive || this._rowCount === 0)
+      return null;
+    const minSelY = Math.min(selection.anchorY, selection.focusY);
+    const maxSelY = Math.max(selection.anchorY, selection.focusY);
+    return {
+      firstRow: this.findRowForLocalY(minSelY),
+      lastRow: this.findRowForLocalY(maxSelY)
+    };
+  }
+  getDirtySelectionRowRange(previousSelection, currentSelection) {
+    const previousRange = this.getSelectionRowRange(previousSelection);
+    const currentRange = this.getSelectionRowRange(currentSelection);
+    if (previousRange === null)
+      return currentRange;
+    if (currentRange === null)
+      return previousRange;
+    return {
+      firstRow: Math.min(previousRange.firstRow, currentRange.firstRow),
+      lastRow: Math.max(previousRange.lastRow, currentRange.lastRow)
+    };
+  }
+  resetRowSelection(rowIdx) {
+    const row = this._cells[rowIdx];
+    if (!row)
+      return;
+    for (const cell of row) {
+      cell.textBufferView.resetLocalSelection();
+    }
+  }
+  resetCellSelections() {
+    for (let rowIdx = 0;rowIdx < this._rowCount; rowIdx++) {
+      this.resetRowSelection(rowIdx);
+    }
+  }
+  createEmptyLayout() {
+    return {
+      columnWidths: [],
+      rowHeights: [],
+      columnOffsets: [0],
+      rowOffsets: [0],
+      columnOffsetsI32: new Int32Array([0]),
+      rowOffsetsI32: new Int32Array([0]),
+      tableWidth: 0,
+      tableHeight: 0
+    };
+  }
+  resolveLayoutWidthConstraint(width) {
+    if (width === undefined || !Number.isFinite(width) || width <= 0) {
+      return;
+    }
+    if (this._wrapMode !== "none" || this._columnWidthMode === "fill") {
+      return Math.max(1, Math.floor(width));
+    }
+    return;
+  }
+  getHorizontalCellPadding() {
+    return this._cellPadding * 2;
+  }
+  getVerticalCellPadding() {
+    return this._cellPadding * 2;
+  }
+  resolveCellPadding(value) {
+    if (value === undefined || !Number.isFinite(value)) {
+      return this._defaultOptions.cellPadding;
+    }
+    return Math.max(0, Math.floor(value));
+  }
+  invalidateLayoutAndRaster(markYogaDirty = true) {
+    this._layoutDirty = true;
+    this._rasterDirty = true;
+    this._cachedMeasureLayout = null;
+    this._cachedMeasureWidth = undefined;
+    if (markYogaDirty) {
+      this.yogaNode.markDirty();
+    }
+    this.requestRender();
+  }
+  invalidateRasterOnly() {
+    this._rasterDirty = true;
+    this.requestRender();
+  }
+}
+
 // ../../node_modules/.bun/marked@17.0.1/node_modules/marked/lib/marked.esm.js
 function L() {
   return { async: false, breaks: false, extensions: null, gfm: true, hooks: null, pedantic: false, renderer: null, silent: false, tokenizer: null, walkTokens: null };
@@ -8437,10 +9343,10 @@ function parseMarkdownIncremental(newContent, prevState, trailingUnstable = 2) {
   let offset = 0;
   let reuseCount = 0;
   for (const token of prevState.tokens) {
-    const tokenEnd = offset + token.raw.length;
-    if (tokenEnd <= newContent.length && newContent.slice(offset, tokenEnd) === token.raw) {
+    const tokenLength = token.raw.length;
+    if (offset + tokenLength <= newContent.length && newContent.startsWith(token.raw, offset)) {
       reuseCount++;
-      offset = tokenEnd;
+      offset += tokenLength;
     } else {
       break;
     }
@@ -8469,6 +9375,7 @@ class MarkdownRenderable extends Renderable {
   _syntaxStyle;
   _conceal;
   _treeSitterClient;
+  _tableOptions;
   _renderNode;
   _parseState = null;
   _streaming = false;
@@ -8489,6 +9396,7 @@ class MarkdownRenderable extends Renderable {
     this._conceal = options.conceal ?? this._contentDefaultOptions.conceal;
     this._content = options.content ?? this._contentDefaultOptions.content;
     this._treeSitterClient = options.treeSitterClient;
+    this._tableOptions = options.tableOptions;
     this._renderNode = options.renderNode;
     this._streaming = options.streaming ?? this._contentDefaultOptions.streaming;
     this.updateBlocks();
@@ -8530,6 +9438,13 @@ class MarkdownRenderable extends Renderable {
       this.clearCache();
     }
   }
+  get tableOptions() {
+    return this._tableOptions;
+  }
+  set tableOptions(value) {
+    this._tableOptions = value;
+    this.applyTableOptionsToBlocks();
+  }
   getStyle(group) {
     if (!this._syntaxStyle)
       return;
@@ -8784,159 +9699,194 @@ class MarkdownRenderable extends Renderable {
       marginBottom
     });
   }
-  updateTableRenderable(tableBox, table, marginBottom) {
-    tableBox.marginBottom = marginBottom;
-    const borderColor = this.getStyle("conceal")?.fg ?? "#888888";
+  getTableRowsToRender(table) {
+    return this._streaming && table.rows.length > 0 ? table.rows.slice(0, -1) : table.rows;
+  }
+  hashString(value, seed) {
+    let hash = seed >>> 0;
+    for (let i = 0;i < value.length; i += 1) {
+      hash ^= value.charCodeAt(i);
+      hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+  }
+  hashTableToken(token, seed, depth = 0) {
+    let hash = this.hashString(token.type, seed);
+    if ("raw" in token && typeof token.raw === "string") {
+      return this.hashString(token.raw, hash);
+    }
+    if ("text" in token && typeof token.text === "string") {
+      hash = this.hashString(token.text, hash);
+    }
+    if (depth < 2 && "tokens" in token && Array.isArray(token.tokens)) {
+      for (const child of token.tokens) {
+        hash = this.hashTableToken(child, hash, depth + 1);
+      }
+    }
+    return hash >>> 0;
+  }
+  getTableCellKey(cell, isHeader) {
+    const seed = isHeader ? 2902232141 : 1371922141;
+    if (!cell) {
+      return seed;
+    }
+    if (typeof cell.text === "string") {
+      return this.hashString(cell.text, seed);
+    }
+    if (Array.isArray(cell.tokens) && cell.tokens.length > 0) {
+      let hash = seed ^ cell.tokens.length;
+      for (const token of cell.tokens) {
+        hash = this.hashTableToken(token, hash);
+      }
+      return hash >>> 0;
+    }
+    return (seed ^ 2654435769) >>> 0;
+  }
+  createTableDataCellChunks(cell) {
+    const chunks = [];
+    if (cell) {
+      this.renderInlineContent(cell.tokens, chunks);
+    }
+    return chunks.length > 0 ? chunks : [this.createDefaultChunk(" ")];
+  }
+  createTableHeaderCellChunks(cell) {
+    const chunks = [];
+    this.renderInlineContent(cell.tokens, chunks);
+    const baseChunks = chunks.length > 0 ? chunks : [this.createDefaultChunk(" ")];
     const headingStyle = this.getStyle("markup.heading") || this.getStyle("default");
-    const rowsToRender = this._streaming && table.rows.length > 0 ? table.rows.slice(0, -1) : table.rows;
+    if (!headingStyle) {
+      return baseChunks;
+    }
+    const headingAttributes = createTextAttributes({
+      bold: headingStyle.bold,
+      italic: headingStyle.italic,
+      underline: headingStyle.underline,
+      dim: headingStyle.dim
+    });
+    return baseChunks.map((chunk) => ({
+      ...chunk,
+      fg: headingStyle.fg ?? chunk.fg,
+      bg: headingStyle.bg ?? chunk.bg,
+      attributes: headingAttributes
+    }));
+  }
+  buildTableContentCache(table, previous, forceRegenerate = false) {
     const colCount = table.header.length;
-    const columns = tableBox._childrenInLayoutOrder;
-    for (let col = 0;col < colCount; col++) {
-      const columnBox = columns[col];
-      if (!columnBox)
-        continue;
-      if (columnBox instanceof BoxRenderable) {
-        columnBox.borderColor = borderColor;
-      }
-      const columnChildren = columnBox._childrenInLayoutOrder;
-      const headerBox = columnChildren[0];
-      if (headerBox instanceof BoxRenderable) {
-        headerBox.borderColor = borderColor;
-        const headerChildren = headerBox._childrenInLayoutOrder;
-        const headerText = headerChildren[0];
-        if (headerText instanceof TextRenderable) {
-          const headerCell = table.header[col];
-          const headerChunks = [];
-          this.renderInlineContent(headerCell.tokens, headerChunks);
-          const styledHeaderChunks = headerChunks.map((chunk) => ({
-            ...chunk,
-            fg: headingStyle?.fg ?? chunk.fg,
-            bg: headingStyle?.bg ?? chunk.bg,
-            attributes: headingStyle ? createTextAttributes({
-              bold: headingStyle.bold,
-              italic: headingStyle.italic,
-              underline: headingStyle.underline,
-              dim: headingStyle.dim
-            }) : chunk.attributes
-          }));
-          headerText.content = new StyledText(styledHeaderChunks);
-        }
-      }
-      for (let row = 0;row < rowsToRender.length; row++) {
-        const childIndex = row + 1;
-        const cellContainer = columnChildren[childIndex];
-        let cellText;
-        if (cellContainer instanceof BoxRenderable) {
-          cellContainer.borderColor = borderColor;
-          const cellChildren = cellContainer._childrenInLayoutOrder;
-          cellText = cellChildren[0];
-        } else if (cellContainer instanceof TextRenderable) {
-          cellText = cellContainer;
-        }
-        if (cellText) {
-          const cell = rowsToRender[row][col];
-          const cellChunks = [];
-          if (cell) {
-            this.renderInlineContent(cell.tokens, cellChunks);
+    const rowsToRender = this.getTableRowsToRender(table);
+    if (colCount === 0 || rowsToRender.length === 0) {
+      return { cache: null, changed: previous !== undefined };
+    }
+    const content = [];
+    const cellKeys = [];
+    const totalRows = rowsToRender.length + 1;
+    let changed = forceRegenerate || !previous;
+    for (let rowIndex = 0;rowIndex < totalRows; rowIndex += 1) {
+      const rowContent = [];
+      const rowKeys = new Uint32Array(colCount);
+      for (let colIndex = 0;colIndex < colCount; colIndex += 1) {
+        const isHeader = rowIndex === 0;
+        const cell = isHeader ? table.header[colIndex] : rowsToRender[rowIndex - 1]?.[colIndex];
+        const cellKey = this.getTableCellKey(cell, isHeader);
+        rowKeys[colIndex] = cellKey;
+        const previousCellKey = previous?.cellKeys[rowIndex]?.[colIndex];
+        const previousCellContent = previous?.content[rowIndex]?.[colIndex];
+        if (!forceRegenerate && previousCellKey === cellKey && Array.isArray(previousCellContent)) {
+          rowContent.push(previousCellContent);
+          continue;
+        }
+        changed = true;
+        rowContent.push(isHeader ? this.createTableHeaderCellChunks(table.header[colIndex]) : this.createTableDataCellChunks(cell));
+      }
+      content.push(rowContent);
+      cellKeys.push(rowKeys);
+    }
+    if (previous && !changed) {
+      if (previous.content.length !== content.length) {
+        changed = true;
+      } else {
+        for (let rowIndex = 0;rowIndex < content.length; rowIndex += 1) {
+          if ((previous.content[rowIndex]?.length ?? 0) !== content[rowIndex].length) {
+            changed = true;
+            break;
           }
-          cellText.content = new StyledText(cellChunks.length > 0 ? cellChunks : [this.createDefaultChunk(" ")]);
         }
       }
     }
+    return {
+      cache: {
+        content,
+        cellKeys
+      },
+      changed
+    };
   }
-  createTableRenderable(table, id, marginBottom = 0) {
-    const colCount = table.header.length;
-    const rowsToRender = this._streaming && table.rows.length > 0 ? table.rows.slice(0, -1) : table.rows;
-    if (colCount === 0 || rowsToRender.length === 0) {
-      return this.createTextRenderable([this.createDefaultChunk(table.raw)], id, marginBottom);
+  resolveTableRenderableOptions() {
+    const borders = this._tableOptions?.borders ?? true;
+    return {
+      columnWidthMode: this._tableOptions?.widthMode ?? "content",
+      wrapMode: this._tableOptions?.wrapMode ?? "none",
+      cellPadding: this._tableOptions?.cellPadding ?? 0,
+      border: borders,
+      outerBorder: this._tableOptions?.outerBorder ?? borders,
+      showBorders: borders,
+      borderStyle: this._tableOptions?.borderStyle ?? "single",
+      borderColor: this._tableOptions?.borderColor ?? this.getStyle("conceal")?.fg ?? "#888888",
+      selectable: this._tableOptions?.selectable ?? true
+    };
+  }
+  applyTableRenderableOptions(tableRenderable, options) {
+    tableRenderable.columnWidthMode = options.columnWidthMode;
+    tableRenderable.wrapMode = options.wrapMode;
+    tableRenderable.cellPadding = options.cellPadding;
+    tableRenderable.border = options.border;
+    tableRenderable.outerBorder = options.outerBorder;
+    tableRenderable.showBorders = options.showBorders;
+    tableRenderable.borderStyle = options.borderStyle;
+    tableRenderable.borderColor = options.borderColor;
+    tableRenderable.selectable = options.selectable;
+  }
+  applyTableOptionsToBlocks() {
+    const options = this.resolveTableRenderableOptions();
+    let updated = false;
+    for (const state of this._blockStates) {
+      if (state.renderable instanceof TextTableRenderable) {
+        this.applyTableRenderableOptions(state.renderable, options);
+        updated = true;
+      }
     }
-    const tableBox = new BoxRenderable(this.ctx, {
+    if (updated) {
+      this.requestRender();
+    }
+  }
+  createTextTableRenderable(content, id, marginBottom = 0) {
+    const options = this.resolveTableRenderableOptions();
+    return new TextTableRenderable(this.ctx, {
       id,
-      flexDirection: "row",
-      marginBottom
+      content,
+      width: "100%",
+      marginBottom,
+      columnWidthMode: options.columnWidthMode,
+      wrapMode: options.wrapMode,
+      cellPadding: options.cellPadding,
+      border: options.border,
+      outerBorder: options.outerBorder,
+      showBorders: options.showBorders,
+      borderStyle: options.borderStyle,
+      borderColor: options.borderColor,
+      selectable: options.selectable
     });
-    const borderColor = this.getStyle("conceal")?.fg ?? "#888888";
-    for (let col = 0;col < colCount; col++) {
-      const isFirstCol = col === 0;
-      const isLastCol = col === colCount - 1;
-      const columnBox = new BoxRenderable(this.ctx, {
-        id: `${id}-col-${col}`,
-        flexDirection: "column",
-        border: isLastCol ? true : ["top", "bottom", "left"],
-        borderColor,
-        customBorderChars: isFirstCol ? undefined : {
-          topLeft: "\u252C",
-          topRight: "\u2510",
-          bottomLeft: "\u2534",
-          bottomRight: "\u2518",
-          horizontal: "\u2500",
-          vertical: "\u2502",
-          topT: "\u252C",
-          bottomT: "\u2534",
-          leftT: "\u251C",
-          rightT: "\u2524",
-          cross: "\u253C"
-        }
-      });
-      const headerCell = table.header[col];
-      const headerChunks = [];
-      this.renderInlineContent(headerCell.tokens, headerChunks);
-      const headingStyle = this.getStyle("markup.heading") || this.getStyle("default");
-      const styledHeaderChunks = headerChunks.map((chunk) => ({
-        ...chunk,
-        fg: headingStyle?.fg ?? chunk.fg,
-        bg: headingStyle?.bg ?? chunk.bg,
-        attributes: headingStyle ? createTextAttributes({
-          bold: headingStyle.bold,
-          italic: headingStyle.italic,
-          underline: headingStyle.underline,
-          dim: headingStyle.dim
-        }) : chunk.attributes
-      }));
-      const headerBox = new BoxRenderable(this.ctx, {
-        id: `${id}-col-${col}-header-box`,
-        border: ["bottom"],
-        borderColor
-      });
-      headerBox.add(new TextRenderable(this.ctx, {
-        id: `${id}-col-${col}-header`,
-        content: new StyledText(styledHeaderChunks),
-        height: 1,
-        overflow: "hidden",
-        paddingLeft: 1,
-        paddingRight: 1
-      }));
-      columnBox.add(headerBox);
-      for (let row = 0;row < rowsToRender.length; row++) {
-        const cell = rowsToRender[row][col];
-        const cellChunks = [];
-        if (cell) {
-          this.renderInlineContent(cell.tokens, cellChunks);
-        }
-        const isLastRow = row === rowsToRender.length - 1;
-        const cellText = new TextRenderable(this.ctx, {
-          id: `${id}-col-${col}-row-${row}`,
-          content: new StyledText(cellChunks.length > 0 ? cellChunks : [this.createDefaultChunk(" ")]),
-          height: 1,
-          overflow: "hidden",
-          paddingLeft: 1,
-          paddingRight: 1
-        });
-        if (isLastRow) {
-          columnBox.add(cellText);
-        } else {
-          const cellBox = new BoxRenderable(this.ctx, {
-            id: `${id}-col-${col}-row-${row}-box`,
-            border: ["bottom"],
-            borderColor
-          });
-          cellBox.add(cellText);
-          columnBox.add(cellBox);
-        }
-      }
-      tableBox.add(columnBox);
+  }
+  createTableBlock(table, id, marginBottom = 0, previousCache, forceRegenerate = false) {
+    const { cache } = this.buildTableContentCache(table, previousCache, forceRegenerate);
+    if (!cache) {
+      return {
+        renderable: this.createTextRenderable([this.createDefaultChunk(table.raw)], id, marginBottom)
+      };
     }
-    return tableBox;
+    return {
+      renderable: this.createTextTableRenderable(cache.content, id, marginBottom),
+      tableContentCache: cache
+    };
   }
   createDefaultRenderable(token, index, hasNextToken = false) {
     const id = `${this.id}-block-${index}`;
@@ -8945,7 +9895,7 @@ class MarkdownRenderable extends Renderable {
       return this.createCodeRenderable(token, id, marginBottom);
     }
     if (token.type === "table") {
-      return this.createTableRenderable(token, id, marginBottom);
+      return this.createTableBlock(token, id, marginBottom).renderable;
     }
     if (token.type === "space") {
       return null;
@@ -8969,26 +9919,39 @@ class MarkdownRenderable extends Renderable {
       return;
     }
     if (token.type === "table") {
-      const prevTable = state.token;
-      const newTable = token;
-      if (this._streaming) {
-        const prevCompleteRows = Math.max(0, prevTable.rows.length - 1);
-        const newCompleteRows = Math.max(0, newTable.rows.length - 1);
-        const prevIsRawFallback = prevTable.header.length === 0 || prevCompleteRows === 0;
-        const newIsRawFallback = newTable.header.length === 0 || newCompleteRows === 0;
-        if (prevCompleteRows === newCompleteRows && prevTable.header.length === newTable.header.length) {
-          if (prevIsRawFallback && newIsRawFallback && prevTable.raw !== newTable.raw) {
-            const textRenderable2 = state.renderable;
-            textRenderable2.content = new StyledText([this.createDefaultChunk(newTable.raw)]);
-            textRenderable2.marginBottom = marginBottom;
+      const tableToken = token;
+      const { cache, changed } = this.buildTableContentCache(tableToken, state.tableContentCache);
+      if (!cache) {
+        const fallbackChunks = [this.createDefaultChunk(tableToken.raw)];
+        if (state.renderable instanceof TextRenderable) {
+          if (state.tokenRaw !== tableToken.raw) {
+            state.renderable.content = new StyledText(fallbackChunks);
           }
+          state.renderable.marginBottom = marginBottom;
+          state.tableContentCache = undefined;
           return;
         }
+        state.renderable.destroyRecursively();
+        const fallbackRenderable = this.createTextRenderable(fallbackChunks, `${this.id}-block-${index}`, marginBottom);
+        this.add(fallbackRenderable);
+        state.renderable = fallbackRenderable;
+        state.tableContentCache = undefined;
+        return;
       }
-      this.remove(state.renderable.id);
-      const newRenderable = this.createTableRenderable(newTable, `${this.id}-block-${index}`, marginBottom);
-      this.add(newRenderable);
-      state.renderable = newRenderable;
+      if (state.renderable instanceof TextTableRenderable) {
+        if (changed) {
+          state.renderable.content = cache.content;
+        }
+        this.applyTableRenderableOptions(state.renderable, this.resolveTableRenderableOptions());
+        state.renderable.marginBottom = marginBottom;
+        state.tableContentCache = cache;
+        return;
+      }
+      state.renderable.destroyRecursively();
+      const tableRenderable = this.createTextTableRenderable(cache.content, `${this.id}-block-${index}`, marginBottom);
+      this.add(tableRenderable);
+      state.renderable = tableRenderable;
+      state.tableContentCache = cache;
       return;
     }
     const textRenderable = state.renderable;
@@ -8998,10 +9961,7 @@ class MarkdownRenderable extends Renderable {
   }
   updateBlocks() {
     if (!this._content) {
-      for (const state of this._blockStates) {
-        this.remove(state.renderable.id);
-      }
-      this._blockStates = [];
+      this.clearBlockStates();
       this._parseState = null;
       return;
     }
@@ -9009,9 +9969,7 @@ class MarkdownRenderable extends Renderable {
     this._parseState = parseMarkdownIncremental(this._content, this._parseState, trailingUnstable);
     const tokens = this._parseState.tokens;
     if (tokens.length === 0 && this._content.length > 0) {
-      for (const state of this._blockStates) {
-        this.remove(state.renderable.id);
-      }
+      this.clearBlockStates();
       const text = this.createTextRenderable([this.createDefaultChunk(this._content)], `${this.id}-fallback`);
       this.add(text);
       this._blockStates = [
@@ -9052,9 +10010,10 @@ class MarkdownRenderable extends Renderable {
         continue;
       }
       if (existing) {
-        this.remove(existing.renderable.id);
+        existing.renderable.destroyRecursively();
       }
       let renderable;
+      let tableContentCache;
       if (this._renderNode) {
         const context = {
           syntaxStyle: this._syntaxStyle,
@@ -9068,26 +10027,37 @@ class MarkdownRenderable extends Renderable {
         }
       }
       if (!renderable) {
-        renderable = this.createDefaultRenderable(token, blockIndex, hasNextToken) ?? undefined;
+        if (token.type === "table") {
+          const tableBlock = this.createTableBlock(token, `${this.id}-block-${blockIndex}`, hasNextToken ? 1 : 0);
+          renderable = tableBlock.renderable;
+          tableContentCache = tableBlock.tableContentCache;
+        } else {
+          renderable = this.createDefaultRenderable(token, blockIndex, hasNextToken) ?? undefined;
+        }
+      }
+      if (token.type === "table" && !tableContentCache && renderable instanceof TextTableRenderable) {
+        const { cache } = this.buildTableContentCache(token);
+        tableContentCache = cache ?? undefined;
       }
       if (renderable) {
         this.add(renderable);
         this._blockStates[blockIndex] = {
           token,
           tokenRaw: token.raw,
-          renderable
+          renderable,
+          tableContentCache
         };
       }
       blockIndex++;
     }
     while (this._blockStates.length > blockIndex) {
       const removed = this._blockStates.pop();
-      this.remove(removed.renderable.id);
+      removed.renderable.destroyRecursively();
     }
   }
   clearBlockStates() {
     for (const state of this._blockStates) {
-      this.remove(state.renderable.id);
+      state.renderable.destroyRecursively();
     }
     this._blockStates = [];
   }
@@ -9100,8 +10070,32 @@ class MarkdownRenderable extends Renderable {
         codeRenderable.syntaxStyle = this._syntaxStyle;
         codeRenderable.conceal = this._conceal;
       } else if (state.token.type === "table") {
+        const tableToken = state.token;
         const marginBottom = hasNextToken ? 1 : 0;
-        this.updateTableRenderable(state.renderable, state.token, marginBottom);
+        const { cache } = this.buildTableContentCache(tableToken, state.tableContentCache, true);
+        if (!cache) {
+          if (state.renderable instanceof TextRenderable) {
+            state.renderable.content = new StyledText([this.createDefaultChunk(tableToken.raw)]);
+            state.renderable.marginBottom = marginBottom;
+          } else {
+            state.renderable.destroyRecursively();
+            const fallbackRenderable = this.createTextRenderable([this.createDefaultChunk(tableToken.raw)], `${this.id}-block-${i}`, marginBottom);
+            this.add(fallbackRenderable);
+            state.renderable = fallbackRenderable;
+          }
+          state.tableContentCache = undefined;
+        } else if (state.renderable instanceof TextTableRenderable) {
+          state.renderable.content = cache.content;
+          this.applyTableRenderableOptions(state.renderable, this.resolveTableRenderableOptions());
+          state.renderable.marginBottom = marginBottom;
+          state.tableContentCache = cache;
+        } else {
+          state.renderable.destroyRecursively();
+          const tableRenderable = this.createTextTableRenderable(cache.content, `${this.id}-block-${i}`, marginBottom);
+          this.add(tableRenderable);
+          state.renderable = tableRenderable;
+          state.tableContentCache = cache;
+        }
       } else {
         const textRenderable = state.renderable;
         const chunks = this.renderTokenToChunks(state.token);
@@ -9117,6 +10111,11 @@ class MarkdownRenderable extends Renderable {
     this.updateBlocks();
     this.requestRender();
   }
+  refreshStyles() {
+    this._styleDirty = false;
+    this.rerenderBlocks();
+    this.requestRender();
+  }
   renderSelf(buffer, deltaTime) {
     if (this._styleDirty) {
       this._styleDirty = false;
@@ -11128,6 +12127,7 @@ export {
   TreeSitterClient,
   Timeline,
   TextareaRenderable,
+  TextTableRenderable,
   TextRenderable,
   TextNodeRenderable,
   TextBufferView,
@@ -11206,5 +12206,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=B77F27E92D33B1E964756E2164756E21
+//# debugId=0C8001DA726AC37664756E2164756E21
 //# sourceMappingURL=index.js.map