@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/Markdown.ts

@@ -1,2144 +0,0 @@
-import { Renderable, type RenderableOptions } from "../Renderable.js"
-import { type RenderContext } from "../types.js"
-import { SyntaxStyle, type StyleDefinition } from "../syntax-style.js"
-import type { TextChunk } from "../text-buffer.js"
-import { createTextAttributes } from "../utils.js"
-import type { BorderStyle } from "../lib/border.js"
-import { RGBA, parseColor, type ColorInput } from "../lib/RGBA.js"
-import { Lexer, type MarkedToken, type Token, type Tokens } from "marked"
-import { CodeRenderable, type OnChunksCallback } from "./Code.js"
-import { BoxRenderable } from "./Box.js"
-import { StyledText } from "../lib/styled-text.js"
-import { TextRenderable } from "./Text.js"
-import {
-  TextTableRenderable,
-  type TextTableCellContent,
-  type TextTableColumnFitter,
-  type TextTableColumnWidthMode,
-  type TextTableContent,
-} from "./TextTable.js"
-import type { TreeSitterClient } from "../lib/tree-sitter/index.js"
-import { infoStringToFiletype } from "../lib/tree-sitter/resolve-ft.js"
-import { parseMarkdownIncremental, type ParseState } from "./markdown-parser.js"
-import type { OptimizedBuffer } from "../buffer.js"
-import { detectLinks } from "../lib/detect-links.js"
-
-export type MarkdownTableStyle = "grid" | "columns"
-
-export interface MarkdownTableOptions {
-  /**
-   * Visual style preset for markdown tables.
-   * - "grid": boxed table with visible borders.
-   * - "columns": borderless columns optimized for separated block output.
-   *
-   * Defaults to "columns" in `internalBlockMode: "top-level"`, otherwise "grid".
-   */
-  style?: MarkdownTableStyle
-  /**
-   * Strategy for sizing table columns.
-   * - "content": columns fit to intrinsic content width.
-   * - "full": columns expand to fill available width.
-   */
-  widthMode?: TextTableColumnWidthMode
-  /**
-   * Column fitting method when shrinking constrained tables.
-   */
-  columnFitter?: TextTableColumnFitter
-  /**
-   * Wrapping strategy for table cell content.
-   */
-  wrapMode?: "none" | "char" | "word"
-  /**
-   * Padding applied on all sides of each table cell.
-   */
-  cellPadding?: number
-  /**
-   * Horizontal padding applied on the left and right of each table cell.
-   */
-  cellPaddingX?: number
-  /**
-   * Vertical padding applied above and below each table cell.
-   */
-  cellPaddingY?: number
-  /**
-   * Enables/disables table border rendering.
-   */
-  borders?: boolean
-  /**
-   * Overrides outer border visibility. Defaults to `borders`.
-   */
-  outerBorder?: boolean
-  /**
-   * Border style for markdown tables.
-   */
-  borderStyle?: BorderStyle
-  /**
-   * Border color for markdown tables. Defaults to conceal style color.
-   */
-  borderColor?: ColorInput
-  /**
-   * Enables/disables selection support on markdown tables.
-   */
-  selectable?: boolean
-}
-
-export interface MarkdownOptions extends RenderableOptions<MarkdownRenderable> {
-  content?: string
-  syntaxStyle: SyntaxStyle
-  fg?: ColorInput
-  bg?: ColorInput
-  /** Controls concealment for markdown syntax markers in markdown text blocks. */
-  conceal?: boolean
-  /** Controls concealment inside fenced code blocks rendered by CodeRenderable. */
-  concealCode?: boolean
-  treeSitterClient?: TreeSitterClient
-  /**
-   * Enable streaming mode for incremental content updates.
-   *
-   * Semantics:
-   * - The trailing markdown block stays unstable while streaming is enabled.
-   * - Tables render all rows produced by the markdown parser (including trailing rows).
-   * - Incomplete table rows are normalized by the parser and rendered with empty cells
-   *   where data is missing.
-   *
-   * Expectations:
-   * - Keep this true while chunks are still being appended.
-   * - Set this to false once streaming is complete to finalize trailing token parsing.
-   */
-  streaming?: boolean
-  /**
-   * Options for internally rendered markdown tables.
-   */
-  tableOptions?: MarkdownTableOptions
-  /**
-   * Custom node renderer. Return a Renderable to override default rendering,
-   * or undefined/null to use default rendering.
-   */
-  renderNode?: (token: Token, context: RenderNodeContext) => Renderable | undefined | null
-  /**
-   * Internal only.
-   * - "coalesced": combine ordinary markdown into larger render blocks.
-   * - "top-level": preserve top-level markdown blocks as separate render blocks.
-   */
-  internalBlockMode?: "coalesced" | "top-level"
-}
-
-export interface RenderNodeContext {
-  syntaxStyle: SyntaxStyle
-  conceal: boolean
-  concealCode: boolean
-  treeSitterClient?: TreeSitterClient
-  /** Creates default renderable for this token */
-  defaultRender: () => Renderable | null
-}
-
-export type MarkdownCodeBlockRenderer = (
-  token: Tokens.Code,
-  context: RenderNodeContext,
-) => Renderable | undefined | null
-
-export type MarkdownCodeBlockRendererMap =
-  | ReadonlyMap<string, MarkdownCodeBlockRenderer>
-  | Readonly<Record<string, MarkdownCodeBlockRenderer>>
-
-type MarkdownRenderNode = NonNullable<MarkdownOptions["renderNode"]> & {
-  codeBlockOnly?: boolean
-}
-
-function normalizeMarkdownCodeBlockRenderers(
-  renderers: MarkdownCodeBlockRendererMap,
-): ReadonlyMap<string, MarkdownCodeBlockRenderer> {
-  const rendererMap = new Map<string, MarkdownCodeBlockRenderer>()
-  const maybeMap = renderers as Partial<ReadonlyMap<string, MarkdownCodeBlockRenderer>>
-
-  if (typeof maybeMap.forEach === "function") {
-    maybeMap.forEach((renderer, language) => {
-      rendererMap.set(language, renderer)
-    })
-    return rendererMap
-  }
-
-  const rendererRecord = renderers as Readonly<Record<string, MarkdownCodeBlockRenderer>>
-  for (const [language, renderer] of Object.entries(rendererRecord)) {
-    rendererMap.set(language, renderer)
-  }
-
-  return rendererMap
-}
-
-export function createMarkdownCodeBlockRenderer(
-  renderers: MarkdownCodeBlockRendererMap,
-): MarkdownOptions["renderNode"] {
-  const rendererMap = normalizeMarkdownCodeBlockRenderers(renderers)
-
-  const renderNode: MarkdownRenderNode = (token, context) => {
-    if (token.type !== "code") {
-      return undefined
-    }
-
-    const language = infoStringToFiletype(token.lang ?? "")
-    if (!language) return undefined
-
-    return rendererMap.get(language)?.(token as Tokens.Code, context)
-  }
-
-  renderNode.codeBlockOnly = true
-  return renderNode
-}
-
-interface TableContentCache {
-  content: TextTableContent
-  cellKeys: Uint32Array[]
-}
-
-interface CustomRenderableResult {
-  renderable?: Renderable
-  tableContentCache?: TableContentCache
-  tracksInterBlockMargin: boolean
-  canUpdateInPlace: boolean
-}
-
-interface CustomRenderDefaultResult {
-  renderable: Renderable | null | undefined
-  tableContentCache?: TableContentCache
-}
-
-interface RenderNodeResult {
-  renderable?: Renderable
-  defaultResult?: CustomRenderDefaultResult
-}
-
-interface ResolvedTableRenderableOptions {
-  columnWidthMode: TextTableColumnWidthMode
-  columnFitter: TextTableColumnFitter
-  wrapMode: "none" | "char" | "word"
-  cellPadding: number
-  cellPaddingX: number
-  cellPaddingY: number
-  columnGap: number
-  border: boolean
-  outerBorder: boolean
-  showBorders: boolean
-  borderStyle: BorderStyle
-  borderColor: ColorInput
-  selectable: boolean
-}
-
-const TRAILING_MARKDOWN_BLOCK_BREAKS_RE = /(?:\r?\n){2,}$/
-const TRAILING_MARKDOWN_BLOCK_NEWLINES_RE = /(?:\r?\n)+$/
-
-function colorsEqual(left?: RGBA, right?: RGBA): boolean {
-  if (!left || !right) return left === right
-  return left.equals(right)
-}
-
-export interface BlockState {
-  token: MarkedToken
-  tokenRaw: string // Cache raw for comparison
-  marginTop?: number
-  renderable: Renderable
-  tableContentCache?: TableContentCache
-  tracksInterBlockMargin?: boolean
-  /** Whether built-in reconciliation can update this renderable without replacing it. */
-  canUpdateInPlace: boolean
-}
-
-export type { ParseState }
-
-interface MarkdownRenderBlock {
-  token: MarkedToken
-  sourceTokenEnd: number
-  marginTop: number
-}
-
-interface ListItemRenderInput {
-  item: Tokens.ListItem
-  marker: string
-  markerWidth: number
-  id: string
-}
-
-export class MarkdownRenderable extends Renderable {
-  private _content: string = ""
-  private _syntaxStyle: SyntaxStyle
-  private _fg?: RGBA
-  private _bg?: RGBA
-  private _conceal: boolean
-  private _concealCode: boolean
-  private _treeSitterClient?: TreeSitterClient
-  private _tableOptions?: MarkdownTableOptions
-  private _renderNode?: MarkdownOptions["renderNode"]
-  private _internalBlockMode: "coalesced" | "top-level"
-
-  _parseState: ParseState | null = null
-  private _streaming: boolean = false
-  _blockStates: BlockState[] = []
-  _stableBlockCount = 0
-  private _styleDirty: boolean = false
-  private _linkifyMarkdownChunks: OnChunksCallback = (chunks, context) =>
-    detectLinks(chunks, {
-      content: context.content,
-      highlights: context.highlights,
-    })
-
-  protected _contentDefaultOptions = {
-    content: "",
-    conceal: true,
-    concealCode: false,
-    streaming: false,
-    internalBlockMode: "coalesced",
-  } satisfies Partial<MarkdownOptions>
-
-  constructor(ctx: RenderContext, options: MarkdownOptions) {
-    super(ctx, {
-      ...options,
-      flexDirection: "column",
-      flexShrink: options.flexShrink ?? 0,
-    })
-
-    this._syntaxStyle = options.syntaxStyle
-    this._fg = options.fg ? parseColor(options.fg) : undefined
-    this._bg = options.bg ? parseColor(options.bg) : undefined
-    this._conceal = options.conceal ?? this._contentDefaultOptions.conceal
-    this._concealCode = options.concealCode ?? this._contentDefaultOptions.concealCode
-    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._internalBlockMode = options.internalBlockMode ?? this._contentDefaultOptions.internalBlockMode
-
-    this.updateBlocks()
-  }
-
-  get content(): string {
-    return this._content
-  }
-
-  set content(value: string) {
-    if (this.isDestroyed) return
-    if (this._content !== value) {
-      this._content = value
-      this.updateBlocks()
-      this.requestRender()
-    }
-  }
-
-  get syntaxStyle(): SyntaxStyle {
-    return this._syntaxStyle
-  }
-
-  set syntaxStyle(value: SyntaxStyle) {
-    if (this._syntaxStyle !== value) {
-      this._syntaxStyle = value
-      // Mark dirty - actual re-render happens in renderSelf
-      this._styleDirty = true
-    }
-  }
-
-  get fg(): RGBA | undefined {
-    return this._fg
-  }
-
-  set fg(value: ColorInput | undefined) {
-    const next = value ? parseColor(value) : undefined
-    if (!colorsEqual(this._fg, next)) {
-      this._fg = next
-      this._styleDirty = true
-    }
-  }
-
-  get bg(): RGBA | undefined {
-    return this._bg
-  }
-
-  set bg(value: ColorInput | undefined) {
-    const next = value ? parseColor(value) : undefined
-    if (!colorsEqual(this._bg, next)) {
-      this._bg = next
-      this._styleDirty = true
-    }
-  }
-
-  get conceal(): boolean {
-    return this._conceal
-  }
-
-  set conceal(value: boolean) {
-    if (this._conceal !== value) {
-      this._conceal = value
-      // Mark dirty - actual re-render happens in renderSelf
-      this._styleDirty = true
-    }
-  }
-
-  get concealCode(): boolean {
-    return this._concealCode
-  }
-
-  set concealCode(value: boolean) {
-    if (this._concealCode !== value) {
-      this._concealCode = value
-      // Mark dirty - actual re-render happens in renderSelf
-      this._styleDirty = true
-    }
-  }
-
-  get streaming(): boolean {
-    return this._streaming
-  }
-
-  set streaming(value: boolean) {
-    if (this.isDestroyed) return
-    if (this._streaming !== value) {
-      this._streaming = value
-      this.updateBlocks(true)
-    }
-  }
-
-  get tableOptions(): MarkdownTableOptions | undefined {
-    return this._tableOptions
-  }
-
-  set tableOptions(value: MarkdownTableOptions | undefined) {
-    this._tableOptions = value
-    this.applyTableOptionsToBlocks()
-  }
-
-  get renderNode(): MarkdownOptions["renderNode"] | undefined {
-    return this._renderNode
-  }
-
-  set renderNode(value: MarkdownOptions["renderNode"] | undefined) {
-    if (this._renderNode === value) return
-    this._renderNode = value
-    this.clearBlockStates()
-    this._parseState = null
-    this.updateBlocks(true)
-    this.requestRender()
-  }
-
-  get internalBlockMode(): "coalesced" | "top-level" {
-    return this._internalBlockMode
-  }
-
-  set internalBlockMode(value: "coalesced" | "top-level") {
-    if (this._internalBlockMode === value) return
-    this._internalBlockMode = value
-    this.updateBlocks(true)
-    this.requestRender()
-  }
-
-  private getStyle(group: string): StyleDefinition | undefined {
-    // The solid reconciler applies props via setters in JSX declaration order.
-    // If `content` is set before `syntaxStyle`, updateBlocks() runs before
-    // _syntaxStyle is initialized.
-    if (!this._syntaxStyle) return undefined
-    let style = this._syntaxStyle.getStyle(group)
-    if (!style && group.includes(".")) {
-      const baseName = group.split(".")[0]
-      style = this._syntaxStyle.getStyle(baseName)
-    }
-    return style
-  }
-
-  private createChunk(text: string, group: string, link?: { url: string }): TextChunk {
-    const style = this.getStyle(group) || this.getStyle("default")
-    return {
-      __isChunk: true,
-      text,
-      fg: style?.fg,
-      bg: style?.bg,
-      attributes: style
-        ? createTextAttributes({
-            bold: style.bold,
-            italic: style.italic,
-            underline: style.underline,
-            dim: style.dim,
-          })
-        : 0,
-      link,
-    }
-  }
-
-  private createDefaultChunk(text: string): TextChunk {
-    return this.createChunk(text, "default")
-  }
-
-  private createInitialStyledText(token: MarkedToken): StyledText | undefined {
-    if (!this._streaming) return undefined
-
-    const chunks: TextChunk[] = []
-    if ("tokens" in token && Array.isArray(token.tokens)) {
-      this.renderInlineContent(token.tokens, chunks)
-    }
-
-    if (chunks.length === 0 && "text" in token && typeof token.text === "string") {
-      this.renderInlineContent(Lexer.lexInline(token.text), chunks)
-    }
-
-    return chunks.length > 0 ? new StyledText(chunks) : undefined
-  }
-
-  private renderInlineContent(tokens: Token[], chunks: TextChunk[]): void {
-    for (const token of tokens) {
-      this.renderInlineToken(token as MarkedToken, chunks)
-    }
-  }
-
-  private renderInlineToken(token: MarkedToken, chunks: TextChunk[]): void {
-    switch (token.type) {
-      case "text":
-        chunks.push(this.createDefaultChunk(token.text))
-        break
-
-      case "escape":
-        chunks.push(this.createDefaultChunk(token.text))
-        break
-
-      case "codespan":
-        if (this._conceal) {
-          chunks.push(this.createChunk(token.text, "markup.raw"))
-        } else {
-          chunks.push(this.createChunk("`", "markup.raw"))
-          chunks.push(this.createChunk(token.text, "markup.raw"))
-          chunks.push(this.createChunk("`", "markup.raw"))
-        }
-        break
-
-      case "strong":
-        if (!this._conceal) {
-          chunks.push(this.createChunk("**", "markup.strong"))
-        }
-        for (const child of token.tokens) {
-          this.renderInlineTokenWithStyle(child as MarkedToken, chunks, "markup.strong")
-        }
-        if (!this._conceal) {
-          chunks.push(this.createChunk("**", "markup.strong"))
-        }
-        break
-
-      case "em":
-        if (!this._conceal) {
-          chunks.push(this.createChunk("*", "markup.italic"))
-        }
-        for (const child of token.tokens) {
-          this.renderInlineTokenWithStyle(child as MarkedToken, chunks, "markup.italic")
-        }
-        if (!this._conceal) {
-          chunks.push(this.createChunk("*", "markup.italic"))
-        }
-        break
-
-      case "del":
-        if (!this._conceal) {
-          chunks.push(this.createChunk("~~", "markup.strikethrough"))
-        }
-        for (const child of token.tokens) {
-          this.renderInlineTokenWithStyle(child as MarkedToken, chunks, "markup.strikethrough")
-        }
-        if (!this._conceal) {
-          chunks.push(this.createChunk("~~", "markup.strikethrough"))
-        }
-        break
-
-      case "link": {
-        const linkHref = { url: token.href }
-        if (this._conceal) {
-          for (const child of token.tokens) {
-            this.renderInlineTokenWithStyle(child as MarkedToken, chunks, "markup.link.label", linkHref)
-          }
-          chunks.push(this.createChunk(" (", "markup.link", linkHref))
-          chunks.push(this.createChunk(token.href, "markup.link.url", linkHref))
-          chunks.push(this.createChunk(")", "markup.link", linkHref))
-        } else {
-          chunks.push(this.createChunk("[", "markup.link", linkHref))
-          for (const child of token.tokens) {
-            this.renderInlineTokenWithStyle(child as MarkedToken, chunks, "markup.link.label", linkHref)
-          }
-          chunks.push(this.createChunk("](", "markup.link", linkHref))
-          chunks.push(this.createChunk(token.href, "markup.link.url", linkHref))
-          chunks.push(this.createChunk(")", "markup.link", linkHref))
-        }
-        break
-      }
-
-      case "image": {
-        const imageHref = { url: token.href }
-        if (this._conceal) {
-          chunks.push(this.createChunk(token.text || "image", "markup.link.label", imageHref))
-        } else {
-          chunks.push(this.createChunk("![", "markup.link", imageHref))
-          chunks.push(this.createChunk(token.text || "", "markup.link.label", imageHref))
-          chunks.push(this.createChunk("](", "markup.link", imageHref))
-          chunks.push(this.createChunk(token.href, "markup.link.url", imageHref))
-          chunks.push(this.createChunk(")", "markup.link", imageHref))
-        }
-        break
-      }
-
-      case "br":
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-
-      default:
-        if ("tokens" in token && Array.isArray(token.tokens)) {
-          this.renderInlineContent(token.tokens, chunks)
-        } else if ("text" in token && typeof token.text === "string") {
-          chunks.push(this.createDefaultChunk(token.text))
-        }
-        break
-    }
-  }
-
-  private renderInlineTokenWithStyle(
-    token: MarkedToken,
-    chunks: TextChunk[],
-    styleGroup: string,
-    link?: { url: string },
-  ): void {
-    switch (token.type) {
-      case "text":
-        chunks.push(this.createChunk(token.text, styleGroup, link))
-        break
-
-      case "escape":
-        chunks.push(this.createChunk(token.text, styleGroup, link))
-        break
-
-      case "codespan":
-        if (this._conceal) {
-          chunks.push(this.createChunk(token.text, "markup.raw", link))
-        } else {
-          chunks.push(this.createChunk("`", "markup.raw", link))
-          chunks.push(this.createChunk(token.text, "markup.raw", link))
-          chunks.push(this.createChunk("`", "markup.raw", link))
-        }
-        break
-
-      default:
-        this.renderInlineToken(token, chunks)
-        break
-    }
-  }
-
-  private applyMargins(renderable: Renderable, marginTop: number, marginBottom: number): void {
-    renderable.marginTop = marginTop
-    renderable.marginBottom = marginBottom
-  }
-
-  private createMarkdownCodeRenderable(
-    content: string,
-    id: string,
-    marginBottom: number = 0,
-    onChunks: OnChunksCallback = this._linkifyMarkdownChunks,
-    baseHighlight?: string,
-    initialStyledText?: StyledText,
-  ): CodeRenderable {
-    return new CodeRenderable(this.ctx, {
-      id,
-      content,
-      filetype: "markdown",
-      syntaxStyle: this._syntaxStyle,
-      fg: this._fg,
-      bg: this._bg,
-      conceal: this._conceal,
-      drawUnstyledText: initialStyledText !== undefined,
-      streaming: true,
-      initialStyledText,
-      baseHighlight,
-      onChunks,
-      treeSitterClient: this._treeSitterClient,
-      width: "100%",
-      marginBottom,
-    })
-  }
-
-  private getBlockquoteContent(token: MarkedToken): string {
-    return "text" in token && typeof token.text === "string" && token.text ? token.text : " "
-  }
-
-  private getBlockquoteBorderColor(): ColorInput {
-    return this.getStyle("conceal")?.fg ?? this.getStyle("default")?.fg ?? this._fg ?? "#FFFFFF"
-  }
-
-  private createBlockquoteRenderable(token: MarkedToken, id: string, marginBottom: number = 0): BoxRenderable {
-    const renderable = new BoxRenderable(this.ctx, {
-      id,
-      width: "100%",
-      border: ["left"],
-      borderColor: this.getBlockquoteBorderColor(),
-      paddingLeft: 1,
-      flexShrink: 0,
-      marginBottom,
-    })
-
-    renderable.add(
-      this.createMarkdownCodeRenderable(
-        this.getBlockquoteContent(token),
-        `${id}-content`,
-        0,
-        this._linkifyMarkdownChunks,
-        "markup.quote",
-      ),
-    )
-
-    return renderable
-  }
-
-  private createListRenderable(token: Tokens.List, id: string, marginBottom: number = 0): BoxRenderable {
-    const list = new BoxRenderable(this.ctx, {
-      id,
-      width: "100%",
-      flexDirection: "column",
-      flexShrink: 0,
-      marginBottom,
-    })
-
-    for (const item of this.getListItemInputs(token, id)) {
-      list.add(this.createListItemRenderable(item))
-    }
-
-    return list
-  }
-
-  private getListItemInputs(token: Tokens.List, id: string): ListItemRenderInput[] {
-    const items = token.items ?? []
-    const start = token.start === "" || token.start === undefined || token.start === null ? 1 : Number(token.start)
-    const markerWidth = Math.max(1, ...items.map((_, index) => (token.ordered ? `${start + index}.` : "-").length))
-
-    return items.map((item, index) => ({
-      item,
-      marker: token.ordered ? `${start + index}.` : "-",
-      markerWidth,
-      id: `${id}-item-${index}`,
-    }))
-  }
-
-  private applyListRenderable(
-    renderable: Renderable,
-    token: Tokens.List,
-    previousToken: Tokens.List | undefined,
-    id: string,
-    marginBottom: number = 0,
-  ): boolean {
-    if (!(renderable instanceof BoxRenderable)) return false
-
-    renderable.marginBottom = marginBottom
-
-    const inputs = this.getListItemInputs(token, id)
-    const previousItems = previousToken?.items ?? []
-    const rows = renderable.getChildren()
-
-    for (let index = 0; index < inputs.length; index += 1) {
-      const input = inputs[index]
-      const existing = rows[index]
-
-      if (existing instanceof BoxRenderable && this.applyListItemRenderable(existing, input, previousItems[index])) {
-        continue
-      }
-
-      existing?.destroyRecursively()
-      renderable.add(this.createListItemRenderable(input), index)
-    }
-
-    for (let index = rows.length - 1; index >= inputs.length; index -= 1) {
-      rows[index]?.destroyRecursively()
-    }
-
-    return true
-  }
-
-  private createListItemRenderable(input: ListItemRenderInput): BoxRenderable {
-    const row = new BoxRenderable(this.ctx, {
-      id: input.id,
-      width: "100%",
-      flexDirection: "row",
-      flexShrink: 0,
-      marginBottom: /\n[ \t]*\n$/.test(input.item.raw) ? 1 : 0,
-    })
-    row.add(
-      new TextRenderable(this.ctx, {
-        id: `${input.id}-marker`,
-        content: new StyledText([this.createChunk(input.marker.padStart(input.markerWidth) + " ", "markup.list")]),
-        width: input.markerWidth + 1,
-        flexShrink: 0,
-      }),
-    )
-
-    const content = new BoxRenderable(this.ctx, {
-      id: `${input.id}-content`,
-      flexDirection: "column",
-      flexGrow: 1,
-      flexShrink: 1,
-    })
-    row.add(content)
-
-    let pendingMarginTop = 0
-    for (let index = 0; index < input.item.tokens.length; index += 1) {
-      const child = input.item.tokens[index] as MarkedToken | undefined
-      if (!child) continue
-      if (child.type === "checkbox") continue
-      if (child.type === "space") {
-        pendingMarginTop = Math.max(pendingMarginTop, 1)
-        continue
-      }
-      const renderable = this.createListChildRenderable(child, `${input.id}-child-${index}`)
-      if (!renderable) continue
-      renderable.marginTop = child.type === "list" ? 0 : pendingMarginTop
-      pendingMarginTop = 0
-      content.add(renderable)
-    }
-
-    return row
-  }
-
-  private applyListItemRenderable(
-    row: BoxRenderable,
-    input: ListItemRenderInput,
-    previousItem: Tokens.ListItem | undefined,
-  ): boolean {
-    this.applyListItemMarker(row, input)
-
-    const content = row.getChildren()[1]
-    if (!(content instanceof BoxRenderable)) return false
-
-    if (previousItem && previousItem.raw === input.item.raw) {
-      return true
-    }
-
-    return this.applyListItemChildren(content, input.item, previousItem, input.id)
-  }
-
-  private applyListItemChildren(
-    content: BoxRenderable,
-    item: Tokens.ListItem,
-    previousItem: Tokens.ListItem | undefined,
-    id: string,
-  ): boolean {
-    const previousTokens = previousItem ? this.getRenderableListItemTokens(previousItem) : []
-    const children = content.getChildren()
-    let childIndex = 0
-    let pendingMarginTop = 0
-
-    for (let tokenIndex = 0; tokenIndex < item.tokens.length; tokenIndex += 1) {
-      const token = item.tokens[tokenIndex] as MarkedToken | undefined
-      if (!token) continue
-      if (token.type === "checkbox") continue
-      if (token.type === "space") {
-        pendingMarginTop = Math.max(pendingMarginTop, 1)
-        continue
-      }
-
-      const existing = children[childIndex]
-      const childId = `${id}-child-${tokenIndex}`
-
-      const marginTop = token.type === "list" ? 0 : pendingMarginTop
-      pendingMarginTop = 0
-
-      if (!existing) {
-        const renderable = this.createListChildRenderable(token, childId)
-        if (!renderable) return false
-        renderable.marginTop = marginTop
-        content.add(renderable, childIndex)
-        childIndex += 1
-        continue
-      }
-
-      if (!this.applyListChildRenderable(existing, token, previousTokens[childIndex], childId)) {
-        return false
-      }
-      existing.marginTop = marginTop
-      childIndex += 1
-    }
-
-    this.destroyListItemChildrenAfter(content, childIndex)
-    return true
-  }
-
-  private getRenderableListItemTokens(item: Tokens.ListItem): MarkedToken[] {
-    const tokens: MarkedToken[] = []
-
-    for (const token of item.tokens as MarkedToken[]) {
-      if (token.type === "checkbox" || token.type === "space") continue
-      tokens.push(token)
-    }
-
-    return tokens
-  }
-
-  private applyListChildRenderable(
-    renderable: Renderable,
-    token: MarkedToken,
-    previousToken: MarkedToken | undefined,
-    id: string,
-  ): boolean {
-    if ((token.type === "text" || token.type === "paragraph") && renderable instanceof CodeRenderable) {
-      this.applyMarkdownCodeRenderable(renderable, this.normalizeScrollbackMarkdownBlockRaw(token.raw), 0)
-      return true
-    }
-
-    if (token.type === "list" && renderable instanceof BoxRenderable) {
-      return this.applyListRenderable(renderable, token as Tokens.List, previousToken as Tokens.List | undefined, id)
-    }
-
-    if (token.type === "code" && renderable instanceof CodeRenderable) {
-      this.applyCodeBlockRenderable(renderable, token as Tokens.Code, 0)
-      return true
-    }
-
-    return previousToken?.raw === token.raw
-  }
-
-  private destroyListItemChildrenAfter(content: BoxRenderable, index: number): void {
-    const children = content.getChildren()
-    for (let i = children.length - 1; i >= index; i -= 1) {
-      children[i]?.destroyRecursively()
-    }
-  }
-
-  private applyListItemMarker(row: BoxRenderable, input: ListItemRenderInput): void {
-    const marker = row.getChildren()[0]
-    if (!(marker instanceof TextRenderable)) return
-    const marginBottom = /\n[ \t]*\n$/.test(input.item.raw) ? 1 : 0
-    const markerWidth = input.markerWidth + 1
-    const markerText = input.marker.padStart(input.markerWidth) + " "
-
-    if (row.marginBottom !== marginBottom) row.marginBottom = marginBottom
-    if (marker.width !== markerWidth) marker.width = markerWidth
-    if (marker.chunks[0]?.text !== markerText) {
-      marker.content = new StyledText([this.createChunk(markerText, "markup.list")])
-    }
-  }
-
-  private createListChildRenderable(token: MarkedToken, id: string): Renderable | null {
-    if (token.type === "text" || token.type === "paragraph") {
-      return this.createMarkdownCodeRenderable(
-        this.normalizeScrollbackMarkdownBlockRaw(token.raw),
-        id,
-        0,
-        this._linkifyMarkdownChunks,
-        undefined,
-        this.createInitialStyledText(token),
-      )
-    }
-    if (token.type === "list") return this.createListRenderable(token as Tokens.List, id)
-    if (token.type === "code") return this.createCodeRenderable(token as Tokens.Code, id)
-    if (token.type === "blockquote") return this.createBlockquoteRenderable(token, id)
-    if (token.type === "hr") return this.createHorizontalRuleRenderable(id)
-    if (token.type === "table") return this.createTableBlock(token as Tokens.Table, id).renderable
-    return token.raw
-      ? this.createMarkdownCodeRenderable(
-          token.raw,
-          id,
-          0,
-          this._linkifyMarkdownChunks,
-          undefined,
-          this.createInitialStyledText(token),
-        )
-      : null
-  }
-
-  private createHorizontalRuleRenderable(id: string, marginBottom: number = 0): BoxRenderable {
-    return new BoxRenderable(this.ctx, {
-      id,
-      width: "100%",
-      height: 1,
-      border: ["top"],
-      borderColor: this.getStyle("conceal")?.fg ?? this._fg ?? "#888888",
-      flexShrink: 0,
-      marginBottom,
-    })
-  }
-
-  private createCodeRenderable(token: Tokens.Code, id: string, marginBottom: number = 0): Renderable {
-    return new CodeRenderable(this.ctx, {
-      id,
-      content: token.text,
-      filetype: infoStringToFiletype(token.lang ?? ""),
-      syntaxStyle: this._syntaxStyle,
-      fg: this._fg,
-      bg: this._bg,
-      conceal: this._concealCode,
-      drawUnstyledText: !this._streaming,
-      streaming: this._streaming,
-      treeSitterClient: this._treeSitterClient,
-      width: "100%",
-      marginBottom,
-    })
-  }
-
-  private applyMarkdownCodeRenderable(
-    renderable: CodeRenderable,
-    content: string,
-    marginBottom: number,
-    baseHighlight?: string,
-    initialStyledText?: StyledText,
-  ): void {
-    renderable.initialStyledText = initialStyledText
-    renderable.filetype = "markdown"
-    renderable.syntaxStyle = this._syntaxStyle
-    renderable.fg = this._fg
-    renderable.bg = this._bg
-    renderable.conceal = this._conceal
-    renderable.drawUnstyledText = initialStyledText !== undefined
-    renderable.streaming = true
-    renderable.baseHighlight = baseHighlight
-    renderable.content = content
-    renderable.marginBottom = marginBottom
-  }
-
-  private applyBlockquoteRenderable(renderable: Renderable, token: MarkedToken, marginBottom: number): void {
-    if (!(renderable instanceof BoxRenderable)) return
-
-    renderable.borderColor = this.getBlockquoteBorderColor()
-    renderable.marginBottom = marginBottom
-
-    const child = renderable.getChildren()[0]
-    if (child instanceof CodeRenderable) {
-      this.applyMarkdownCodeRenderable(child, this.getBlockquoteContent(token), 0, "markup.quote")
-      return
-    }
-
-    for (const existing of renderable.getChildren()) {
-      existing.destroyRecursively()
-    }
-    renderable.add(
-      this.createMarkdownCodeRenderable(
-        this.getBlockquoteContent(token),
-        `${renderable.id}-content`,
-        0,
-        this._linkifyMarkdownChunks,
-        "markup.quote",
-      ),
-    )
-  }
-
-  private applyCodeBlockRenderable(renderable: Renderable, token: Tokens.Code, marginBottom: number): void {
-    if (!(renderable instanceof CodeRenderable)) return
-
-    renderable.filetype = infoStringToFiletype(token.lang ?? "")
-    renderable.syntaxStyle = this._syntaxStyle
-    renderable.fg = this._fg
-    renderable.bg = this._bg
-    renderable.conceal = this._concealCode
-    renderable.drawUnstyledText = !this._streaming
-    renderable.streaming = this._streaming
-    renderable.content = token.text
-    renderable.marginBottom = marginBottom
-  }
-
-  private shouldRenderSeparately(token: MarkedToken): boolean {
-    return token.type === "code" || token.type === "table" || token.type === "blockquote" || token.type === "hr"
-  }
-
-  private getInterBlockMargin(token: MarkedToken, nextToken: MarkedToken | undefined): number {
-    if (!nextToken) return 0
-    if (this.shouldRenderSeparately(token)) return 1
-    if (!this.shouldRenderSeparately(nextToken)) return 0
-    return TRAILING_MARKDOWN_BLOCK_NEWLINES_RE.test(token.raw) ? 0 : 1
-  }
-
-  private applyInterBlockMargin(state: BlockState, token: MarkedToken, nextToken: MarkedToken | undefined): void {
-    if (state.tracksInterBlockMargin === false) return
-    state.renderable.marginBottom = this.getInterBlockMargin(token, nextToken)
-  }
-
-  private createMarkdownBlockToken(raw: string): MarkedToken {
-    return {
-      type: "paragraph",
-      raw,
-      text: raw,
-      tokens: [],
-    } as MarkedToken
-  }
-
-  private normalizeMarkdownBlockRaw(raw: string): string {
-    return raw.replace(TRAILING_MARKDOWN_BLOCK_BREAKS_RE, "\n")
-  }
-
-  private normalizeScrollbackMarkdownBlockRaw(raw: string): string {
-    return raw.replace(TRAILING_MARKDOWN_BLOCK_NEWLINES_RE, "")
-  }
-
-  private isCodeBlockOnlyRenderer(): boolean {
-    return (this._renderNode as MarkdownRenderNode | undefined)?.codeBlockOnly === true
-  }
-
-  private buildRenderableTokens(tokens: MarkedToken[]): MarkedToken[] {
-    if (this._renderNode && !this.isCodeBlockOnlyRenderer()) {
-      return tokens.filter((token) => token.type !== "space")
-    }
-
-    const renderTokens: MarkedToken[] = []
-    let markdownRaw = ""
-
-    const flushMarkdownRaw = (): void => {
-      if (markdownRaw.length === 0) return
-      const normalizedRaw = this.normalizeMarkdownBlockRaw(markdownRaw)
-      if (normalizedRaw.length > 0) {
-        renderTokens.push(this.createMarkdownBlockToken(normalizedRaw))
-      }
-      markdownRaw = ""
-    }
-
-    for (let i = 0; i < tokens.length; i += 1) {
-      const token = tokens[i]
-
-      if (token.type === "space") {
-        if (markdownRaw.length === 0) {
-          continue
-        }
-
-        let nextIndex = i + 1
-        while (nextIndex < tokens.length && tokens[nextIndex].type === "space") {
-          nextIndex += 1
-        }
-
-        const nextToken = tokens[nextIndex]
-        if (nextToken && !this.shouldRenderSeparately(nextToken)) {
-          markdownRaw += token.raw
-        }
-        continue
-      }
-
-      if (this.shouldRenderSeparately(token)) {
-        flushMarkdownRaw()
-        renderTokens.push(token)
-        continue
-      }
-
-      markdownRaw += token.raw
-    }
-
-    flushMarkdownRaw()
-
-    return renderTokens
-  }
-
-  private buildTopLevelRenderBlocks(tokens: MarkedToken[]): MarkdownRenderBlock[] {
-    const blocks: MarkdownRenderBlock[] = []
-    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.shouldAddTopLevelMargin(prev.token, token, gapBefore) ? 1 : 0
-
-      blocks.push({
-        token,
-        sourceTokenEnd: i + 1,
-        marginTop,
-      })
-      gapBefore = ""
-    }
-
-    return blocks
-  }
-
-  private shouldAddTopLevelMargin(prev: MarkedToken, current: MarkedToken, gapBefore: string): boolean {
-    if (this.isSeparatedTopLevelBlock(prev) || this.isSeparatedTopLevelBlock(current)) return true
-    if (prev.type !== "paragraph" || current.type !== "paragraph") return false
-    return TRAILING_MARKDOWN_BLOCK_BREAKS_RE.test(prev.raw + gapBefore)
-  }
-
-  private isSeparatedTopLevelBlock(token: MarkedToken): boolean {
-    return token.type === "heading" || token.type === "list" || this.shouldRenderSeparately(token)
-  }
-
-  private getTableRowsToRender(table: Tokens.Table): Tokens.TableCell[][] {
-    return table.rows
-  }
-
-  private hashString(value: string, seed: number): number {
-    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
-  }
-
-  private hashTableToken(token: MarkedToken, seed: number, depth: number = 0): number {
-    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 as MarkedToken, hash, depth + 1)
-      }
-    }
-
-    return hash >>> 0
-  }
-
-  private getTableCellKey(cell: Tokens.TableCell | undefined, isHeader: boolean): number {
-    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 as MarkedToken, hash)
-      }
-      return hash >>> 0
-    }
-
-    return (seed ^ 2654435769) >>> 0
-  }
-
-  private createTableDataCellChunks(cell: Tokens.TableCell | undefined): TextChunk[] {
-    const chunks: TextChunk[] = []
-    if (cell) {
-      this.renderInlineContent(cell.tokens, chunks)
-    }
-    return chunks.length > 0 ? chunks : [this.createDefaultChunk(" ")]
-  }
-
-  private createTableHeaderCellChunks(cell: Tokens.TableCell): TextChunk[] {
-    const chunks: TextChunk[] = []
-    this.renderInlineContent(cell.tokens, chunks)
-
-    const baseChunks = chunks.length > 0 ? chunks : [this.createDefaultChunk(" ")]
-    const headingStyle = this.getStyle("markup.heading") || this.getStyle("default")
-    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,
-    }))
-  }
-
-  private buildTableContentCache(
-    table: Tokens.Table,
-    previous?: TableContentCache,
-    forceRegenerate: boolean = false,
-  ): { cache: TableContentCache | null; changed: boolean } {
-    const colCount = table.header.length
-    const rowsToRender = this.getTableRowsToRender(table)
-    if (colCount === 0 || rowsToRender.length === 0) {
-      return { cache: null, changed: previous !== undefined }
-    }
-
-    const content: TextTableContent = []
-    const cellKeys: Uint32Array[] = []
-    const totalRows = rowsToRender.length + 1
-
-    let changed = forceRegenerate || !previous
-
-    for (let rowIndex = 0; rowIndex < totalRows; rowIndex += 1) {
-      const rowContent: TextTableCellContent[] = []
-      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
-          }
-        }
-      }
-    }
-
-    return {
-      cache: {
-        content,
-        cellKeys,
-      },
-      changed,
-    }
-  }
-
-  private resolveTableStyle(options: MarkdownTableOptions | undefined = this._tableOptions): MarkdownTableStyle {
-    if (options?.style === "columns") {
-      return "columns"
-    }
-
-    if (options?.style === "grid") {
-      return "grid"
-    }
-
-    return this._internalBlockMode === "top-level" ? "columns" : "grid"
-  }
-
-  private usesBorderlessColumnSpacing(options: MarkdownTableOptions | undefined = this._tableOptions): boolean {
-    const style = this.resolveTableStyle(options)
-    const borders = options?.borders ?? style === "grid"
-
-    return style === "columns" && !borders
-  }
-
-  private resolveTableRenderableOptions(): ResolvedTableRenderableOptions {
-    const style = this.resolveTableStyle()
-    const borders = this._tableOptions?.borders ?? style === "grid"
-
-    return {
-      columnWidthMode: this._tableOptions?.widthMode ?? (style === "columns" ? "content" : "full"),
-      columnFitter: this._tableOptions?.columnFitter ?? "proportional",
-      wrapMode: this._tableOptions?.wrapMode ?? "word",
-      cellPadding: this._tableOptions?.cellPadding ?? 0,
-      cellPaddingX: this._tableOptions?.cellPaddingX ?? this._tableOptions?.cellPadding ?? 0,
-      cellPaddingY: this._tableOptions?.cellPaddingY ?? this._tableOptions?.cellPadding ?? 0,
-      columnGap: this.usesBorderlessColumnSpacing() ? 2 : 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,
-    }
-  }
-
-  private applyTableRenderableOptions(
-    tableRenderable: TextTableRenderable,
-    options: ResolvedTableRenderableOptions,
-  ): void {
-    tableRenderable.columnWidthMode = options.columnWidthMode
-    tableRenderable.columnFitter = options.columnFitter
-    tableRenderable.wrapMode = options.wrapMode
-    tableRenderable.cellPaddingX = options.cellPaddingX
-    tableRenderable.cellPaddingY = options.cellPaddingY
-    tableRenderable.columnGap = options.columnGap
-    tableRenderable.border = options.border
-    tableRenderable.outerBorder = options.outerBorder
-    tableRenderable.showBorders = options.showBorders
-    tableRenderable.borderStyle = options.borderStyle
-    tableRenderable.borderColor = options.borderColor
-    tableRenderable.selectable = options.selectable
-  }
-
-  private applyTableOptionsToBlocks(): void {
-    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
-      }
-    }
-
-    if (updated) {
-      this.requestRender()
-    }
-  }
-
-  private createTextTableRenderable(
-    content: TextTableContent,
-    id: string,
-    marginBottom: number = 0,
-  ): TextTableRenderable {
-    const options = this.resolveTableRenderableOptions()
-    return new TextTableRenderable(this.ctx, {
-      id,
-      content,
-      width: "100%",
-      marginBottom,
-      columnWidthMode: options.columnWidthMode,
-      columnFitter: options.columnFitter,
-      wrapMode: options.wrapMode,
-      cellPadding: options.cellPadding,
-      cellPaddingX: options.cellPaddingX,
-      cellPaddingY: options.cellPaddingY,
-      columnGap: options.columnGap,
-      border: options.border,
-      outerBorder: options.outerBorder,
-      showBorders: options.showBorders,
-      borderStyle: options.borderStyle,
-      borderColor: options.borderColor,
-      selectable: options.selectable,
-    })
-  }
-
-  private createTableBlock(
-    table: Tokens.Table,
-    id: string,
-    marginBottom: number = 0,
-    previousCache?: TableContentCache,
-    forceRegenerate: boolean = false,
-  ): { renderable: Renderable; tableContentCache?: TableContentCache } {
-    const { cache } = this.buildTableContentCache(table, previousCache, forceRegenerate)
-
-    if (!cache) {
-      return {
-        renderable: this.createMarkdownCodeRenderable(table.raw, id, marginBottom),
-      }
-    }
-
-    return {
-      renderable: this.createTextTableRenderable(cache.content, id, marginBottom),
-      tableContentCache: cache,
-    }
-  }
-
-  private getStableBlockCount(blocks: MarkdownRenderBlock[], stableTokenCount: number): number {
-    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
-  }
-
-  private syncTopLevelBlockState(
-    state: BlockState,
-    block: MarkdownRenderBlock,
-    tableContentCache: TableContentCache | undefined = state.tableContentCache,
-  ): void {
-    state.token = block.token
-    state.tokenRaw = block.token.raw
-    state.marginTop = block.marginTop
-    state.tableContentCache = tableContentCache
-  }
-
-  private getTopLevelBlockRaw(token: MarkedToken): string | undefined {
-    if (!token.raw) {
-      return undefined
-    }
-
-    return this.shouldRenderSeparately(token) ? token.raw : this.normalizeScrollbackMarkdownBlockRaw(token.raw)
-  }
-
-  private createTopLevelDefaultRenderable(
-    block: MarkdownRenderBlock,
-    index: number,
-  ): { renderable: Renderable | undefined; tableContentCache?: TableContentCache; canUpdateInPlace: boolean } {
-    const { token, marginTop } = block
-    const id = `${this.id}-block-${index}`
-
-    if (token.type === "code") {
-      const renderable = this.createCodeRenderable(token, id)
-      renderable.marginTop = marginTop
-      return { renderable, canUpdateInPlace: true }
-    }
-
-    if (token.type === "table") {
-      const next = this.createTableBlock(token, id)
-      next.renderable.marginTop = marginTop
-      return { ...next, canUpdateInPlace: true }
-    }
-
-    if (token.type === "blockquote") {
-      const renderable = this.createBlockquoteRenderable(token, id)
-      renderable.marginTop = marginTop
-      return { renderable, canUpdateInPlace: true }
-    }
-
-    if (token.type === "list") {
-      const renderable = this.createListRenderable(token, id)
-      renderable.marginTop = marginTop
-      return { renderable, canUpdateInPlace: true }
-    }
-
-    if (token.type === "hr") {
-      const renderable = this.createHorizontalRuleRenderable(id)
-      renderable.marginTop = marginTop
-      return { renderable, canUpdateInPlace: true }
-    }
-
-    const markdownRaw = this.getTopLevelBlockRaw(token)
-    if (!markdownRaw) {
-      return { renderable: undefined, canUpdateInPlace: true }
-    }
-
-    const renderable = this.createMarkdownCodeRenderable(
-      markdownRaw,
-      id,
-      0,
-      this._linkifyMarkdownChunks,
-      undefined,
-      this.createInitialStyledText(token),
-    )
-    renderable.marginTop = marginTop
-    return { renderable, canUpdateInPlace: true }
-  }
-
-  private createTopLevelRenderable(
-    block: MarkdownRenderBlock,
-    index: number,
-  ): { renderable: Renderable | undefined; tableContentCache?: TableContentCache; canUpdateInPlace: boolean } {
-    if (!this._renderNode) {
-      return this.createTopLevelDefaultRenderable(block, index)
-    }
-
-    const custom = this.createTopLevelCustomRenderable(block, index)
-    if (!custom.renderable) return this.createTopLevelDefaultRenderable(block, index)
-
-    const marginTop =
-      typeof custom.renderable.marginTop === "number"
-        ? Math.max(custom.renderable.marginTop, block.marginTop)
-        : block.marginTop
-    this.applyMargins(custom.renderable, marginTop, 0)
-
-    return {
-      renderable: custom.renderable,
-      tableContentCache: custom.tableContentCache,
-      canUpdateInPlace: custom.canUpdateInPlace,
-    }
-  }
-
-  private createDefaultRenderable(token: MarkedToken, index: number, nextToken?: MarkedToken): Renderable | null {
-    const id = `${this.id}-block-${index}`
-    const marginBottom = this.getInterBlockMargin(token, nextToken)
-
-    if (token.type === "code") {
-      return this.createCodeRenderable(token, id, marginBottom)
-    }
-
-    if (token.type === "blockquote") {
-      return this.createBlockquoteRenderable(token, id, marginBottom)
-    }
-
-    if (token.type === "list") {
-      return this.createListRenderable(token as Tokens.List, id, marginBottom)
-    }
-
-    if (token.type === "hr") {
-      return this.createHorizontalRuleRenderable(id, marginBottom)
-    }
-
-    if (token.type === "table") {
-      return this.createTableBlock(token, id, marginBottom).renderable
-    }
-
-    if (token.type === "space") {
-      return null
-    }
-
-    if (!token.raw) {
-      return null
-    }
-
-    return this.createMarkdownCodeRenderable(
-      token.raw,
-      id,
-      marginBottom,
-      this._linkifyMarkdownChunks,
-      undefined,
-      this.createInitialStyledText(token),
-    )
-  }
-
-  private createCustomRenderable(
-    token: MarkedToken,
-    index: number,
-    nextToken: MarkedToken | undefined,
-  ): CustomRenderableResult {
-    const custom = this.renderCustomNode(token, () => {
-      return { renderable: this.createDefaultRenderable(token, index, nextToken) }
-    })
-    if (!custom.renderable) {
-      return { tracksInterBlockMargin: true, canUpdateInPlace: true }
-    }
-
-    const canUpdateInPlace = custom.renderable === custom.defaultResult?.renderable
-
-    return {
-      renderable: custom.renderable,
-      tracksInterBlockMargin: canUpdateInPlace,
-      canUpdateInPlace,
-    }
-  }
-
-  private createTopLevelCustomRenderable(block: MarkdownRenderBlock, index: number): CustomRenderableResult {
-    const custom = this.renderCustomNode(block.token, () => {
-      return this.createTopLevelDefaultRenderable(block, index)
-    })
-    if (!custom.renderable) {
-      return { tracksInterBlockMargin: true, canUpdateInPlace: true }
-    }
-
-    const canUpdateInPlace = custom.renderable === custom.defaultResult?.renderable
-
-    return {
-      renderable: custom.renderable,
-      tableContentCache: canUpdateInPlace ? custom.defaultResult?.tableContentCache : undefined,
-      tracksInterBlockMargin: canUpdateInPlace,
-      canUpdateInPlace,
-    }
-  }
-
-  private renderCustomNode(token: MarkedToken, createDefault: () => CustomRenderDefaultResult): RenderNodeResult {
-    if (!this._renderNode) return {}
-
-    let defaultResult: CustomRenderDefaultResult | undefined
-    const custom = this._renderNode(token, {
-      syntaxStyle: this._syntaxStyle,
-      conceal: this._conceal,
-      concealCode: this._concealCode,
-      treeSitterClient: this._treeSitterClient,
-      defaultRender: () => {
-        defaultResult = createDefault()
-        return defaultResult.renderable ?? null
-      },
-    })
-
-    this.destroyUnusedDefaultRenderable(defaultResult?.renderable, custom ?? undefined)
-
-    return custom ? { renderable: custom, defaultResult } : {}
-  }
-
-  private destroyUnusedDefaultRenderable(renderable: Renderable | null | undefined, usedRenderable?: Renderable): void {
-    if (!renderable || renderable === usedRenderable || renderable.parent) return
-    renderable.destroyRecursively()
-  }
-
-  private updateBlockRenderable(
-    state: BlockState,
-    token: MarkedToken,
-    index: number,
-    nextToken: MarkedToken | undefined,
-    forceListRefresh: boolean = false,
-  ): void {
-    const marginBottom = this.getInterBlockMargin(token, nextToken)
-
-    if (token.type === "code") {
-      this.applyCodeBlockRenderable(state.renderable, token as Tokens.Code, marginBottom)
-      return
-    }
-
-    if (token.type === "blockquote") {
-      this.applyBlockquoteRenderable(state.renderable, token, marginBottom)
-      return
-    }
-
-    if (token.type === "list") {
-      if (
-        !this.applyListRenderable(
-          state.renderable,
-          token as Tokens.List,
-          forceListRefresh ? undefined : (state.token as Tokens.List),
-          `${this.id}-block-${index}`,
-          marginBottom,
-        )
-      ) {
-        state.renderable.destroyRecursively()
-        state.renderable = this.createListRenderable(token as Tokens.List, `${this.id}-block-${index}`, marginBottom)
-        this.add(state.renderable, index)
-      }
-      return
-    }
-
-    if (token.type === "hr") {
-      state.renderable.marginBottom = marginBottom
-      return
-    }
-
-    if (token.type === "table") {
-      const tableToken = token as Tokens.Table
-      const { cache, changed } = this.buildTableContentCache(tableToken, state.tableContentCache)
-
-      if (!cache) {
-        if (state.renderable instanceof CodeRenderable) {
-          this.applyMarkdownCodeRenderable(state.renderable, tableToken.raw, marginBottom)
-          state.tableContentCache = undefined
-          return
-        }
-
-        state.renderable.destroyRecursively()
-        const fallbackRenderable = this.createMarkdownCodeRenderable(
-          tableToken.raw,
-          `${this.id}-block-${index}`,
-          marginBottom,
-        )
-        this.add(fallbackRenderable, index)
-        state.renderable = fallbackRenderable
-        state.tableContentCache = undefined
-        return
-      }
-
-      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, index)
-      state.renderable = tableRenderable
-      state.tableContentCache = cache
-      return
-    }
-
-    if (state.renderable instanceof CodeRenderable) {
-      this.applyMarkdownCodeRenderable(
-        state.renderable,
-        this.getTopLevelBlockRaw(token) ?? token.raw,
-        marginBottom,
-        undefined,
-        this.createInitialStyledText(token),
-      )
-      return
-    }
-
-    state.renderable.destroyRecursively()
-    const markdownRenderable = this.createMarkdownCodeRenderable(
-      this.getTopLevelBlockRaw(token) ?? token.raw,
-      `${this.id}-block-${index}`,
-      marginBottom,
-      this._linkifyMarkdownChunks,
-      undefined,
-      this.createInitialStyledText(token),
-    )
-    this.add(markdownRenderable, index)
-    state.renderable = markdownRenderable
-  }
-
-  private updateTopLevelBlocks(tokens: MarkedToken[], forceTableRefresh: boolean): void {
-    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 &&
-        !forceTableRefresh &&
-        existing.canUpdateInPlace &&
-        existing.token.type === block.token.type &&
-        this.canUpdateBlockRenderable(existing.renderable, block.token)
-      ) {
-        if (this._renderNode) {
-          const custom = this.createTopLevelCustomRenderable(block, blockIndex)
-          if (custom.renderable && !custom.canUpdateInPlace) {
-            const marginTop =
-              typeof custom.renderable.marginTop === "number"
-                ? Math.max(custom.renderable.marginTop, block.marginTop)
-                : block.marginTop
-            this.applyMargins(custom.renderable, marginTop, 0)
-            if (custom.renderable !== existing.renderable) {
-              existing.renderable.destroyRecursively()
-              this.add(custom.renderable, blockIndex)
-            }
-            this._blockStates[blockIndex] = {
-              token: block.token,
-              tokenRaw: block.token.raw,
-              marginTop: block.marginTop,
-              renderable: custom.renderable,
-              tableContentCache: custom.tableContentCache,
-              canUpdateInPlace: custom.canUpdateInPlace,
-            }
-            blockIndex++
-            continue
-          }
-          this.destroyUnusedDefaultRenderable(custom.renderable)
-        }
-
-        this.updateBlockRenderable(existing, block.token, blockIndex, blocks[i + 1]?.token)
-        existing.renderable.marginBottom = 0
-        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, blockIndex)
-        this._blockStates[blockIndex] = {
-          token: block.token,
-          tokenRaw: block.token.raw,
-          marginTop: block.marginTop,
-          renderable: next.renderable,
-          tableContentCache: next.tableContentCache,
-          canUpdateInPlace: next.canUpdateInPlace,
-        }
-      }
-      blockIndex++
-    }
-
-    while (this._blockStates.length > blockIndex) {
-      const removed = this._blockStates.pop()!
-      removed.renderable.destroyRecursively()
-    }
-  }
-
-  private canUpdateBlockRenderable(renderable: Renderable, token: MarkedToken): boolean {
-    if (token.type === "code") return renderable instanceof CodeRenderable
-
-    if (token.type === "table") return renderable instanceof TextTableRenderable
-    if (token.type === "blockquote") return renderable instanceof BoxRenderable
-    if (token.type === "list") return renderable instanceof BoxRenderable
-    if (token.type === "hr") return renderable instanceof BoxRenderable
-    return renderable instanceof CodeRenderable
-  }
-
-  private updateBlocks(forceTableRefresh: boolean = false): void {
-    if (this.isDestroyed) return
-    if (!this._content) {
-      this.clearBlockStates()
-      this._parseState = null
-      this._stableBlockCount = 0
-      return
-    }
-
-    const trailingUnstable = this._streaming ? 2 : 0
-    this._parseState = parseMarkdownIncremental(this._content, this._parseState, trailingUnstable)
-
-    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 } as MarkedToken,
-          tokenRaw: this._content,
-          marginTop: 0,
-          renderable: fallback,
-          tracksInterBlockMargin: true,
-          canUpdateInPlace: true,
-        },
-      ]
-      return
-    }
-
-    if (this._internalBlockMode === "top-level") {
-      this.updateTopLevelBlocks(tokens, forceTableRefresh)
-      return
-    }
-
-    this._stableBlockCount = 0
-    const blockTokens = this.buildRenderableTokens(tokens)
-    let blockIndex = 0
-    for (let i = 0; i < blockTokens.length; i++) {
-      const token = blockTokens[i]
-      const nextToken = blockTokens[i + 1]
-      const existing = this._blockStates[blockIndex]
-
-      const shouldForceRefresh = forceTableRefresh
-
-      if (existing && existing.token === token) {
-        if (shouldForceRefresh) {
-          this.updateBlockRenderable(existing, token, blockIndex, nextToken)
-          existing.tokenRaw = token.raw
-        } else {
-          this.applyInterBlockMargin(existing, token, nextToken)
-        }
-        blockIndex++
-        continue
-      }
-
-      if (existing && existing.tokenRaw === token.raw && existing.token.type === token.type) {
-        existing.token = token
-        if (shouldForceRefresh) {
-          this.updateBlockRenderable(existing, token, blockIndex, nextToken)
-          existing.tokenRaw = token.raw
-        } else {
-          this.applyInterBlockMargin(existing, token, nextToken)
-        }
-        blockIndex++
-        continue
-      }
-
-      if (existing && existing.canUpdateInPlace && existing.token.type === token.type) {
-        const custom = this.createCustomRenderable(token, blockIndex, nextToken)
-        if (custom.renderable && !custom.canUpdateInPlace) {
-          if (custom.renderable !== existing.renderable) {
-            existing.renderable.destroyRecursively()
-            this.add(custom.renderable, blockIndex)
-          }
-          this._blockStates[blockIndex] = {
-            token,
-            tokenRaw: token.raw,
-            renderable: custom.renderable,
-            tracksInterBlockMargin: custom.tracksInterBlockMargin,
-            canUpdateInPlace: custom.canUpdateInPlace,
-          }
-          blockIndex++
-          continue
-        }
-        this.destroyUnusedDefaultRenderable(custom.renderable)
-
-        this.updateBlockRenderable(existing, token, blockIndex, nextToken)
-        existing.token = token
-        existing.tokenRaw = token.raw
-        existing.tracksInterBlockMargin = true
-        blockIndex++
-        continue
-      }
-
-      if (existing) {
-        existing.renderable.destroyRecursively()
-      }
-
-      let renderable: Renderable | undefined
-      let tableContentCache: TableContentCache | undefined
-      let tracksInterBlockMargin = true
-      let canUpdateInPlace = true
-
-      const custom = this.createCustomRenderable(token, blockIndex, nextToken)
-      if (custom.renderable) {
-        renderable = custom.renderable
-        tracksInterBlockMargin = custom.tracksInterBlockMargin
-        canUpdateInPlace = custom.canUpdateInPlace
-      }
-
-      if (!renderable) {
-        if (token.type === "table") {
-          const tableBlock = this.createTableBlock(
-            token,
-            `${this.id}-block-${blockIndex}`,
-            this.getInterBlockMargin(token, nextToken),
-          )
-          renderable = tableBlock.renderable
-          tableContentCache = tableBlock.tableContentCache
-        } else {
-          renderable = this.createDefaultRenderable(token, blockIndex, nextToken) ?? undefined
-        }
-      }
-
-      if (token.type === "table" && !tableContentCache && renderable instanceof TextTableRenderable) {
-        const { cache } = this.buildTableContentCache(token as Tokens.Table)
-        tableContentCache = cache ?? undefined
-      }
-
-      if (renderable) {
-        this.add(renderable, blockIndex)
-        this._blockStates[blockIndex] = {
-          token,
-          tokenRaw: token.raw,
-          renderable,
-          tableContentCache,
-          tracksInterBlockMargin,
-          canUpdateInPlace,
-        }
-      }
-      blockIndex++
-    }
-
-    while (this._blockStates.length > blockIndex) {
-      const removed = this._blockStates.pop()!
-      removed.renderable.destroyRecursively()
-    }
-  }
-
-  private clearBlockStates(): void {
-    for (const state of this._blockStates) {
-      state.renderable.destroyRecursively()
-    }
-    this._blockStates = []
-    this._stableBlockCount = 0
-  }
-
-  /**
-   * Re-render existing blocks without rebuilding the parse state or block structure.
-   * Used when only style/conceal changes - much faster than full rebuild.
-   */
-  private rerenderBlocks(): void {
-    if (this._internalBlockMode === "top-level") {
-      this.updateBlocks(true)
-      return
-    }
-
-    for (let i = 0; i < this._blockStates.length; i++) {
-      const state = this._blockStates[i]
-      const marginBottom = this.getInterBlockMargin(state.token, this._blockStates[i + 1]?.token)
-
-      if (state.token.type === "code") {
-        this.applyCodeBlockRenderable(state.renderable, state.token as Tokens.Code, marginBottom)
-        continue
-      }
-
-      if (state.token.type === "blockquote") {
-        this.applyBlockquoteRenderable(state.renderable, state.token, marginBottom)
-        continue
-      }
-
-      if (state.token.type === "list") {
-        this.updateBlockRenderable(state, state.token, i, this._blockStates[i + 1]?.token, true)
-        continue
-      }
-
-      if (state.token.type === "hr") {
-        state.renderable.marginBottom = marginBottom
-        continue
-      }
-
-      if (state.token.type === "table") {
-        const tableToken = state.token as Tokens.Table
-        const { cache } = this.buildTableContentCache(tableToken, state.tableContentCache, true)
-
-        if (!cache) {
-          if (state.renderable instanceof CodeRenderable) {
-            this.applyMarkdownCodeRenderable(state.renderable, tableToken.raw, marginBottom)
-          } else {
-            state.renderable.destroyRecursively()
-            const fallbackRenderable = this.createMarkdownCodeRenderable(
-              tableToken.raw,
-              `${this.id}-block-${i}`,
-              marginBottom,
-            )
-            this.add(fallbackRenderable, i)
-            state.renderable = fallbackRenderable
-          }
-          state.tableContentCache = undefined
-          continue
-        }
-
-        if (state.renderable instanceof TextTableRenderable) {
-          state.renderable.content = cache.content
-          this.applyTableRenderableOptions(state.renderable, this.resolveTableRenderableOptions())
-          state.renderable.marginBottom = marginBottom
-          state.tableContentCache = cache
-          continue
-        }
-
-        state.renderable.destroyRecursively()
-        const tableRenderable = this.createTextTableRenderable(cache.content, `${this.id}-block-${i}`, marginBottom)
-        this.add(tableRenderable, i)
-        state.renderable = tableRenderable
-        state.tableContentCache = cache
-        continue
-      }
-
-      if (state.renderable instanceof CodeRenderable) {
-        this.applyMarkdownCodeRenderable(
-          state.renderable,
-          this.getTopLevelBlockRaw(state.token) ?? state.token.raw,
-          marginBottom,
-          undefined,
-          this.createInitialStyledText(state.token),
-        )
-        continue
-      }
-
-      state.renderable.destroyRecursively()
-      const markdownRenderable = this.createMarkdownCodeRenderable(
-        this.getTopLevelBlockRaw(state.token) ?? state.token.raw,
-        `${this.id}-block-${i}`,
-        marginBottom,
-        this._linkifyMarkdownChunks,
-        undefined,
-        this.createInitialStyledText(state.token),
-      )
-      this.add(markdownRenderable, i)
-      state.renderable = markdownRenderable
-    }
-  }
-
-  public clearCache(): void {
-    this._parseState = null
-    this.clearBlockStates()
-    this.updateBlocks()
-    this.requestRender()
-  }
-
-  public refreshStyles(): void {
-    this._styleDirty = false
-    this.rerenderBlocks()
-    this.requestRender()
-  }
-
-  protected renderSelf(buffer: OptimizedBuffer, deltaTime: number): void {
-    // Check if style/conceal changed - re-render blocks before rendering
-    if (this._styleDirty) {
-      this._styleDirty = false
-      this.rerenderBlocks()
-    }
-    super.renderSelf(buffer, deltaTime)
-  }
-}