@fairyhunter13/opentui-core 0.1.114 → 0.1.116

package/src/renderables/Markdown.ts

@@ -1,1393 +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 { type MarkedToken, type Token, type Tokens } from "marked"
-import { CodeRenderable, type OnChunksCallback } from "./Code.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 interface MarkdownTableOptions {
-  /**
-   * 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
-  /**
-   * 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
-}
-
-export interface RenderNodeContext {
-  syntaxStyle: SyntaxStyle
-  conceal: boolean
-  concealCode: boolean
-  treeSitterClient?: TreeSitterClient
-  /** Creates default renderable for this token */
-  defaultRender: () => Renderable | null
-}
-
-interface TableContentCache {
-  content: TextTableContent
-  cellKeys: Uint32Array[]
-}
-
-interface ResolvedTableRenderableOptions {
-  columnWidthMode: TextTableColumnWidthMode
-  columnFitter: TextTableColumnFitter
-  wrapMode: "none" | "char" | "word"
-  cellPadding: number
-  border: boolean
-  outerBorder: boolean
-  showBorders: boolean
-  borderStyle: BorderStyle
-  borderColor: ColorInput
-  selectable: boolean
-}
-
-const TRAILING_MARKDOWN_BLOCK_BREAKS_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
-  renderable: Renderable
-  tableContentCache?: TableContentCache
-}
-
-export type { ParseState }
-
-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"]
-
-  _parseState: ParseState | null = null
-  private _streaming: boolean = false
-  _blockStates: BlockState[] = []
-  private _styleDirty: boolean = false
-  private _linkifyMarkdownChunks: OnChunksCallback = (chunks, context) =>
-    detectLinks(chunks, {
-      content: context.content,
-      highlights: context.highlights,
-    })
-
-  private _inlineConcealChunks: OnChunksCallback = (chunks, context) => {
-    return this.buildInlineConcealChunks(chunks, context)
-  }
-
-  protected _contentDefaultOptions = {
-    content: "",
-    conceal: true,
-    concealCode: false,
-    streaming: false,
-  } 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.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()
-  }
-
-  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 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 buildInlineConcealChunks(chunks: TextChunk[], context: { content: string; highlights: any[] }): TextChunk[] {
-    // Re-parse with marked to get inline tokens, then render with concealment.
-    // Falls back to original chunks if inline rendering produces nothing.
-    const result: TextChunk[] = []
-    try {
-      const parsed = parseMarkdownIncremental(context.content, null, 0)
-      const tokens = parsed.tokens
-      for (const token of tokens) {
-        this.renderBlockTokenInline(token, result)
-      }
-    } catch {
-      return chunks
-    }
-
-    // Remove trailing newline added by renderBlockTokenInline
-    if (result.length > 0 && result[result.length - 1].text === "\n") {
-      result.pop()
-    }
-
-    if (result.length === 0) return chunks
-
-    // Apply linkification on top of inline-rendered chunks
-    const linked = this._linkifyMarkdownChunks(result, context as any)
-    if (Array.isArray(linked)) return linked
-    return result
-  }
-
-  private renderBlockTokenInline(token: MarkedToken, chunks: TextChunk[]): void {
-    switch (token.type) {
-      case "heading": {
-        const headingToken = token as Tokens.Heading
-        const style = `markup.heading.${headingToken.depth}`
-        for (const child of headingToken.tokens) {
-          this.renderInlineTokenWithStyle(child as MarkedToken, chunks, style)
-        }
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      }
-      case "paragraph": {
-        const paragraphToken = token as Tokens.Paragraph
-        this.renderInlineContent(paragraphToken.tokens, chunks)
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      }
-      case "list": {
-        this.renderListInline(token as Tokens.List, chunks, 0)
-        break
-      }
-      case "blockquote": {
-        const quoteToken = token as Tokens.Blockquote
-        for (const child of quoteToken.tokens) {
-          const markedChild = child as MarkedToken
-          if (markedChild.type === "paragraph" && "tokens" in markedChild) {
-            chunks.push(this.createChunk("▎ ", "markup.quote"))
-            for (const inline of (markedChild as Tokens.Paragraph).tokens) {
-              this.renderInlineTokenWithStyle(inline as MarkedToken, chunks, "markup.quote")
-            }
-            chunks.push(this.createDefaultChunk("\n"))
-          } else if (markedChild.type === "table") {
-            // Reconstruct pipe table from structured token data so every row
-            // gets the blockquote ▎ prefix (tbl.raw may only have > on first line)
-            const tbl = markedChild as Tokens.Table
-            const headerCells = tbl.header.map((h) => h.text || " ").join(" | ")
-            const sepCells = tbl.header.map(() => "---").join(" | ")
-            const tableLines = [
-              `| ${headerCells} |`,
-              `| ${sepCells} |`,
-              ...tbl.rows.map((row) => `| ${row.map((c) => c.text || " ").join(" | ")} |`),
-            ]
-            for (const line of tableLines) {
-              chunks.push(this.createChunk("▎ ", "markup.quote"))
-              chunks.push(this.createDefaultChunk(line + "\n"))
-            }
-          } else {
-            chunks.push(this.createChunk("▎ ", "markup.quote"))
-            this.renderBlockTokenInline(markedChild, chunks)
-          }
-        }
-        break
-      }
-      case "code": {
-        // Fenced code blocks that ended up in the inline path (rare — normally
-        // handled separately by createCodeRenderable). Render as raw block.
-        const codeToken = token as Tokens.Code
-        const rawStyle = this.getStyle("markup.raw.block")
-        const codeText = codeToken.text
-        for (const line of codeText.split("\n")) {
-          chunks.push({
-            __isChunk: true,
-            text: "  " + line,
-            fg: rawStyle?.fg,
-            bg: rawStyle?.bg,
-            attributes: rawStyle
-              ? createTextAttributes({
-                  bold: rawStyle.bold,
-                  italic: rawStyle.italic,
-                  underline: rawStyle.underline,
-                  dim: rawStyle.dim,
-                })
-              : 0,
-          })
-          chunks.push(this.createDefaultChunk("\n"))
-        }
-        break
-      }
-      case "html": {
-        // Inline/block HTML — render as raw text
-        chunks.push(this.createDefaultChunk(token.text))
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      }
-      case "hr": {
-        const hrStyle = this.getStyle("punctuation.special")
-        chunks.push({
-          __isChunk: true,
-          text: "─".repeat(40),
-          fg: hrStyle?.fg,
-          bg: hrStyle?.bg,
-          attributes: hrStyle
-            ? createTextAttributes({
-                bold: hrStyle.bold,
-                italic: hrStyle.italic,
-                underline: hrStyle.underline,
-                dim: hrStyle.dim,
-              })
-            : 0,
-        })
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      }
-      case "table": {
-        // Tables that ended up in the inline path (rare — normally handled
-        // separately by createTextTableRenderable). Render as raw text.
-        chunks.push(this.createDefaultChunk((token as any).raw ?? ""))
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      }
-      case "def":
-        // Link reference definitions — not rendered visually
-        break
-      case "space":
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-      default:
-        if ("tokens" in token && Array.isArray(token.tokens)) {
-          this.renderInlineContent(token.tokens, chunks)
-        } else {
-          chunks.push(this.createDefaultChunk((token as any).raw ?? ""))
-        }
-        chunks.push(this.createDefaultChunk("\n"))
-        break
-    }
-  }
-
-  private renderListInline(list: Tokens.List, chunks: TextChunk[], depth: number): void {
-    const listStyle = this.getStyle("markup.list")
-    const checkedStyle = this.getStyle("markup.list.checked")
-    const uncheckedStyle = this.getStyle("markup.list.unchecked")
-    for (let i = 0; i < list.items.length; i++) {
-      const item = list.items[i]
-      const indent = "  ".repeat(depth)
-      const start = typeof list.start === "number" ? list.start : 1
-
-      // Task list items: show checkbox
-      if (item.task) {
-        const checkmark = item.checked ? "☑ " : "☐ "
-        const checkStyle = item.checked ? checkedStyle : uncheckedStyle
-        chunks.push({
-          __isChunk: true,
-          text: indent + checkmark,
-          fg: checkStyle?.fg ?? listStyle?.fg,
-          bg: checkStyle?.bg ?? listStyle?.bg,
-          attributes: checkStyle
-            ? createTextAttributes({
-                bold: checkStyle.bold,
-                italic: checkStyle.italic,
-                underline: checkStyle.underline,
-                dim: checkStyle.dim,
-              })
-            : 0,
-        })
-      } else {
-        const bullet = list.ordered ? `${start + i}. ` : "• "
-        chunks.push({
-          __isChunk: true,
-          text: indent + bullet,
-          fg: listStyle?.fg,
-          bg: listStyle?.bg,
-          attributes: listStyle
-            ? createTextAttributes({
-                bold: listStyle.bold,
-                italic: listStyle.italic,
-                underline: listStyle.underline,
-                dim: listStyle.dim,
-              })
-            : 0,
-        })
-      }
-
-      for (const subToken of item.tokens) {
-        const markedSub = subToken as MarkedToken
-        if (markedSub.type === "text" && "tokens" in markedSub && Array.isArray(markedSub.tokens)) {
-          this.renderInlineContent(markedSub.tokens, chunks)
-        } else if (markedSub.type === "list") {
-          chunks.push(this.createDefaultChunk("\n"))
-          this.renderListInline(markedSub as Tokens.List, chunks, depth + 1)
-          continue
-        } else if (markedSub.type === "paragraph" && "tokens" in markedSub) {
-          this.renderInlineContent((markedSub as Tokens.Paragraph).tokens, chunks)
-        } else if (markedSub.type === "code") {
-          // Render fenced code blocks inside list items on their own indented lines
-          if (chunks.length > 0 && !chunks[chunks.length - 1].text.endsWith("\n")) {
-            chunks[chunks.length - 1] = { ...chunks[chunks.length - 1], text: chunks[chunks.length - 1].text + "\n" }
-          } else {
-            chunks.push(this.createDefaultChunk("\n"))
-          }
-          const codeLines = (markedSub as Tokens.Code).text.split("\n")
-          const codeStyle = this.getStyle("markup.raw") || this.getStyle("default")
-          for (const codeLine of codeLines) {
-            chunks.push(this.createDefaultChunk(indent + "    "))
-            chunks.push({
-              __isChunk: true,
-              text: codeLine,
-              fg: codeStyle?.fg,
-              bg: codeStyle?.bg,
-              attributes: 0,
-            })
-            chunks.push(this.createDefaultChunk("\n"))
-          }
-          continue
-        } else {
-          this.renderInlineToken(markedSub, chunks)
-        }
-      }
-      chunks.push(this.createDefaultChunk("\n"))
-    }
-  }
-
-  private createMarkdownCodeRenderable(content: string, id: string, marginBottom: number = 0): CodeRenderable {
-    return new CodeRenderable(this.ctx, {
-      id,
-      content,
-      filetype: "markdown",
-      syntaxStyle: this._syntaxStyle,
-      fg: this._fg,
-      bg: this._bg,
-      conceal: this._conceal,
-      drawUnstyledText: true,
-      streaming: true,
-      onChunks: this._conceal ? this._inlineConcealChunks : this._linkifyMarkdownChunks,
-      treeSitterClient: this._treeSitterClient,
-      width: "100%",
-      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 && this._concealCode),
-      streaming: this._streaming,
-      treeSitterClient: this._treeSitterClient,
-      width: "100%",
-      marginBottom,
-    })
-  }
-
-  private applyMarkdownCodeRenderable(renderable: CodeRenderable, content: string, marginBottom: number): void {
-    renderable.content = content
-    renderable.filetype = "markdown"
-    renderable.syntaxStyle = this._syntaxStyle
-    renderable.fg = this._fg
-    renderable.bg = this._bg
-    renderable.conceal = this._conceal
-    renderable.drawUnstyledText = true
-    renderable.streaming = true
-    renderable.onChunks = this._conceal ? this._inlineConcealChunks : this._linkifyMarkdownChunks
-    renderable.marginBottom = marginBottom
-  }
-
-  private applyCodeBlockRenderable(renderable: CodeRenderable, token: Tokens.Code, marginBottom: number): void {
-    renderable.content = token.text
-    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 && this._concealCode)
-    renderable.streaming = this._streaming
-    renderable.marginBottom = marginBottom
-  }
-
-  private shouldRenderSeparately(token: MarkedToken): boolean {
-    return token.type === "code" || token.type === "table" || token.type === "blockquote"
-  }
-
-  private getInterBlockMargin(token: MarkedToken, hasNextToken: boolean): number {
-    if (!hasNextToken) return 0
-    return this.shouldRenderSeparately(token) ? 1 : 0
-  }
-
-  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, "")
-  }
-
-  private buildRenderableTokens(tokens: MarkedToken[]): MarkedToken[] {
-    if (this._renderNode) {
-      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 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 resolveTableRenderableOptions(): ResolvedTableRenderableOptions {
-    const borders = this._tableOptions?.borders ?? true
-
-    return {
-      columnWidthMode: this._tableOptions?.widthMode ?? "full",
-      columnFitter: this._tableOptions?.columnFitter ?? "proportional",
-      wrapMode: this._tableOptions?.wrapMode ?? "word",
-      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,
-    }
-  }
-
-  private applyTableRenderableOptions(
-    tableRenderable: TextTableRenderable,
-    options: ResolvedTableRenderableOptions,
-  ): void {
-    tableRenderable.columnWidthMode = options.columnWidthMode
-    tableRenderable.columnFitter = options.columnFitter
-    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
-  }
-
-  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,
-      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 createDefaultRenderable(token: MarkedToken, index: number, hasNextToken: boolean = false): Renderable | null {
-    const id = `${this.id}-block-${index}`
-    const marginBottom = this.getInterBlockMargin(token, hasNextToken)
-
-    if (token.type === "code") {
-      return this.createCodeRenderable(token, 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)
-  }
-
-  private updateBlockRenderable(state: BlockState, token: MarkedToken, index: number, hasNextToken: boolean): void {
-    const marginBottom = this.getInterBlockMargin(token, hasNextToken)
-
-    if (token.type === "code") {
-      this.applyCodeBlockRenderable(state.renderable as CodeRenderable, token as Tokens.Code, 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)
-        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)
-      state.renderable = tableRenderable
-      state.tableContentCache = cache
-      return
-    }
-
-    if (state.renderable instanceof CodeRenderable) {
-      this.applyMarkdownCodeRenderable(state.renderable, token.raw, marginBottom)
-      return
-    }
-
-    state.renderable.destroyRecursively()
-    const markdownRenderable = this.createMarkdownCodeRenderable(token.raw, `${this.id}-block-${index}`, marginBottom)
-    this.add(markdownRenderable)
-    state.renderable = markdownRenderable
-  }
-
-  private updateBlocks(forceTableRefresh: boolean = false): void {
-    if (this.isDestroyed) return
-    if (!this._content) {
-      this.clearBlockStates()
-      this._parseState = null
-      return
-    }
-
-    const trailingUnstable = this._streaming ? 2 : 0
-    this._parseState = parseMarkdownIncremental(this._content, this._parseState, trailingUnstable)
-
-    const tokens = this._parseState.tokens
-
-    // Parse failure fallback
-    if (tokens.length === 0 && this._content.length > 0) {
-      this.clearBlockStates()
-      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,
-          renderable: fallback,
-        },
-      ]
-      return
-    }
-
-    const blockTokens = this.buildRenderableTokens(tokens)
-    const lastBlockIndex = blockTokens.length - 1
-
-    let blockIndex = 0
-    for (let i = 0; i < blockTokens.length; i++) {
-      const token = blockTokens[i]
-      const hasNextToken = i < lastBlockIndex
-      const existing = this._blockStates[blockIndex]
-
-      const shouldForceRefresh = forceTableRefresh
-
-      // Same token object reference means unchanged
-      if (existing && existing.token === token) {
-        if (shouldForceRefresh) {
-          this.updateBlockRenderable(existing, token, blockIndex, hasNextToken)
-          existing.tokenRaw = token.raw
-        }
-        blockIndex++
-        continue
-      }
-
-      // Same content, update reference
-      if (existing && existing.tokenRaw === token.raw && existing.token.type === token.type) {
-        existing.token = token
-        if (shouldForceRefresh) {
-          this.updateBlockRenderable(existing, token, blockIndex, hasNextToken)
-          existing.tokenRaw = token.raw
-        }
-        blockIndex++
-        continue
-      }
-
-      // Same type, different content - update in place
-      if (existing && existing.token.type === token.type) {
-        this.updateBlockRenderable(existing, token, blockIndex, hasNextToken)
-        existing.token = token
-        existing.tokenRaw = token.raw
-        blockIndex++
-        continue
-      }
-
-      // Different type or new block
-      if (existing) {
-        existing.renderable.destroyRecursively()
-      }
-
-      let renderable: Renderable | undefined
-      let tableContentCache: TableContentCache | undefined
-
-      if (this._renderNode) {
-        const context: RenderNodeContext = {
-          syntaxStyle: this._syntaxStyle,
-          conceal: this._conceal,
-          concealCode: this._concealCode,
-          treeSitterClient: this._treeSitterClient,
-          defaultRender: () => this.createDefaultRenderable(token, blockIndex, hasNextToken),
-        }
-        const custom = this._renderNode(token, context)
-        if (custom) {
-          renderable = custom
-        }
-      }
-
-      if (!renderable) {
-        if (token.type === "table") {
-          const tableBlock = this.createTableBlock(
-            token,
-            `${this.id}-block-${blockIndex}`,
-            this.getInterBlockMargin(token, hasNextToken),
-          )
-          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 as Tokens.Table)
-        tableContentCache = cache ?? undefined
-      }
-
-      if (renderable) {
-        this.add(renderable)
-        this._blockStates[blockIndex] = {
-          token,
-          tokenRaw: token.raw,
-          renderable,
-          tableContentCache,
-        }
-      }
-      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 = []
-  }
-
-  /**
-   * 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 {
-    for (let i = 0; i < this._blockStates.length; i++) {
-      const state = this._blockStates[i]
-      const hasNextToken = i < this._blockStates.length - 1
-      const marginBottom = this.getInterBlockMargin(state.token, hasNextToken)
-
-      if (state.token.type === "code") {
-        this.applyCodeBlockRenderable(state.renderable as CodeRenderable, state.token as Tokens.Code, 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)
-            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)
-        state.renderable = tableRenderable
-        state.tableContentCache = cache
-        continue
-      }
-
-      if (state.renderable instanceof CodeRenderable) {
-        this.applyMarkdownCodeRenderable(state.renderable, state.token.raw, marginBottom)
-        continue
-      }
-
-      state.renderable.destroyRecursively()
-      const markdownRenderable = this.createMarkdownCodeRenderable(
-        state.token.raw,
-        `${this.id}-block-${i}`,
-        marginBottom,
-      )
-      this.add(markdownRenderable)
-      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 override 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)
-  }
-}