@tooee/renderers 0.1.11 → 0.1.14

package/src/RowDocumentRenderable.ts

@@ -8,6 +8,7 @@ import {
   RGBA,
 } from "@opentui/core"
 import type { OptimizedBuffer } from "@opentui/core"
+import type { DecorationLayer, RowDecoration } from "./DecorationLayer.js"
 
 // ---------------------------------------------------------------------------
 // Types
@@ -16,25 +17,6 @@ import type { OptimizedBuffer } from "@opentui/core"
 export interface RowDocumentPalette {
   gutterFg?: string
   gutterBg?: string
-  cursorBg?: string
-  selectionBg?: string
-  matchBg?: string
-  currentMatchBg?: string
-  toggledBg?: string
-  cursorSign?: string
-  cursorSignFg?: string
-  matchSign?: string
-  matchSignFg?: string
-  currentMatchSignFg?: string
-}
-
-export interface RowDocumentDecorations {
-  cursorRow?: number
-  selection?: { start: number; end: number } | null
-  matchingRows?: Set<number>
-  currentMatchRow?: number
-  toggledRows?: Set<number>
-  signs?: Map<number, { text: string; fg?: string }>
 }
 
 export interface RowDocumentOptions extends ScrollBoxOptions {
@@ -52,6 +34,7 @@ export interface RowDocumentOptions extends ScrollBoxOptions {
 
   // Colors
   palette?: RowDocumentPalette
+  decorations?: readonly DecorationLayer[]
 }
 
 // ---------------------------------------------------------------------------
@@ -60,11 +43,7 @@ export interface RowDocumentOptions extends ScrollBoxOptions {
 
 function isRowContentProvider(x: unknown): x is LineInfoProvider {
   return (
-    !!x &&
-    typeof x === "object" &&
-    "lineInfo" in x &&
-    "lineCount" in x &&
-    "virtualLineCount" in x
+    !!x && typeof x === "object" && "lineInfo" in x && "lineCount" in x && "virtualLineCount" in x
   )
 }
 
@@ -83,6 +62,37 @@ function cachedColor(hex: string): RGBA {
   return c
 }
 
+function normalizePalette(palette: RowDocumentPalette = {}): Required<RowDocumentPalette> {
+  return {
+    gutterFg: palette.gutterFg ?? "#6e7681",
+    gutterBg: palette.gutterBg ?? "#0d1117",
+  }
+}
+
+function normalizeDecorationLayers(
+  layers: readonly DecorationLayer[] | undefined,
+): readonly DecorationLayer[] {
+  if (!layers || layers.length === 0) return []
+  return [...layers].sort((a, b) => a.priority - b.priority)
+}
+
+export function computeRowDocumentGutterWidth(opts: {
+  showLineNumbers: boolean
+  rowCount: number
+  lineNumberStart?: number
+  signColumnWidth?: number
+  gutterPaddingRight?: number
+}): number {
+  let width = 0
+  if (opts.showLineNumbers) {
+    const maxLineNum = (opts.lineNumberStart ?? 1) + opts.rowCount - 1
+    width += Math.max(String(maxLineNum).length, 1)
+  }
+  width += opts.signColumnWidth ?? 0
+  width += opts.gutterPaddingRight ?? 1
+  return width
+}
+
 // ---------------------------------------------------------------------------
 // RowDocumentRenderable
 // ---------------------------------------------------------------------------
@@ -97,9 +107,9 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
   private _gutterPaddingRight: number
   private _rowChildOffset: number
   private _palette: Required<RowDocumentPalette>
-
-  // -- Decorations --
-  private _deco: RowDocumentDecorations = {}
+  private _layers: readonly DecorationLayer[] = []
+  private _layerGutterBgs = new Map<number, string>()
+  private _layerSigns = new Map<number, NonNullable<RowDecoration["sign"]>>()
 
   // -- Geometry arrays --
   private _rowVirtualStarts: number[] = []
@@ -120,29 +130,21 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
     this._gutterPaddingRight = options.gutterPaddingRight ?? 1
     this._rowChildOffset = options.rowChildOffset ?? 0
 
-    const p = options.palette ?? {}
-    this._palette = {
-      gutterFg: p.gutterFg ?? "#6e7681",
-      gutterBg: p.gutterBg ?? "#0d1117",
-      cursorBg: p.cursorBg ?? "#1c2128",
-      selectionBg: p.selectionBg ?? "#1f3a5f",
-      matchBg: p.matchBg ?? "#3b2e00",
-      currentMatchBg: p.currentMatchBg ?? "#5a4a00",
-      toggledBg: p.toggledBg ?? "#1c2128",
-      cursorSign: p.cursorSign ?? "▸",
-      cursorSignFg: p.cursorSignFg ?? "#58a6ff",
-      matchSign: p.matchSign ?? "●",
-      matchSignFg: p.matchSignFg ?? "#d29922",
-      currentMatchSignFg: p.currentMatchSignFg ?? "#f0c000",
-    }
+    this._palette = normalizePalette(options.palette)
+    this._layers = normalizeDecorationLayers(options.decorations)
   }
 
   // -----------------------------------------------------------------------
   // Decorations
   // -----------------------------------------------------------------------
 
-  setDecorations(decorations: RowDocumentDecorations): void {
-    this._deco = decorations
+  set decorations(layers: readonly DecorationLayer[] | undefined) {
+    this._layers = normalizeDecorationLayers(layers)
+    this.requestRender()
+  }
+
+  set palette(palette: RowDocumentPalette | undefined) {
+    this._palette = normalizePalette(palette)
     this.requestRender()
   }
 
@@ -178,9 +180,7 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
     return this._virtualRowToRow.length
   }
 
-  getRowMetrics(
-    row: number,
-  ): { row: number; virtualTop: number; virtualHeight: number } | null {
+  getRowMetrics(row: number): { row: number; virtualTop: number; virtualHeight: number } | null {
     if (row < 0 || row >= this._rowCount) return null
     return {
       row,
@@ -221,10 +221,7 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
   // scrollToRow
   // -----------------------------------------------------------------------
 
-  scrollToRow(
-    row: number,
-    align: "nearest" | "start" | "center" | "end" = "nearest",
-  ): void {
+  scrollToRow(row: number, align: "nearest" | "start" | "center" | "end" = "nearest"): void {
     const metrics = this.getRowMetrics(row)
     if (!metrics) return
 
@@ -399,8 +396,7 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
 
     // Finalize last row
     if (currentRow >= 0) {
-      rowVirtualHeights[currentRow] =
-        lineSources.length - rowVirtualStarts[currentRow]
+      rowVirtualHeights[currentRow] = lineSources.length - rowVirtualStarts[currentRow]
     }
 
     this._finishGeometry(
@@ -439,17 +435,13 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
   private _computeGutterWidth(): number {
     if (!this._showGutter) return 0
 
-    let width = 0
-
-    if (this._showLineNumbers) {
-      const maxLineNum = this._lineNumberStart + this._rowCount - 1
-      width += Math.max(String(maxLineNum).length, 1)
-    }
-
-    width += this._signColumnWidth
-    width += this._gutterPaddingRight
-
-    return width
+    return computeRowDocumentGutterWidth({
+      showLineNumbers: this._showLineNumbers,
+      rowCount: this._rowCount,
+      lineNumberStart: this._lineNumberStart,
+      signColumnWidth: this._signColumnWidth,
+      gutterPaddingRight: this._gutterPaddingRight,
+    })
   }
 
   private _applyGutterPadding(): void {
@@ -462,22 +454,10 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
   // -----------------------------------------------------------------------
 
   private _paintDecorations(buffer: OptimizedBuffer): void {
-    const {
-      cursorRow,
-      selection,
-      matchingRows,
-      currentMatchRow,
-      toggledRows,
-    } = this._deco
-
-    const hasDecorations =
-      cursorRow != null ||
-      selection != null ||
-      (matchingRows && matchingRows.size > 0) ||
-      currentMatchRow != null ||
-      (toggledRows && toggledRows.size > 0)
-
-    if (!hasDecorations) return
+    this._layerGutterBgs = new Map()
+    this._layerSigns = new Map()
+
+    if (this._layers.length === 0) return
 
     const vpX = this.viewport.x
     const vpY = this.viewport.y
@@ -485,35 +465,32 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
     const vpWidth = this.viewport.width
     const top = Math.floor(this.scrollTop)
 
+    const { firstRow, lastRow } = this.getVisibleRange()
+    const rowBgs = new Map<number, string>()
+    const rowGutterBgs = new Map<number, string>()
+    const rowSigns = new Map<number, NonNullable<RowDecoration["sign"]>>()
+
+    for (const layer of this._layers) {
+      for (const deco of layer.forVisibleRows(firstRow, lastRow)) {
+        if (deco.background) rowBgs.set(deco.row, deco.background)
+        if (deco.gutterBackground) rowGutterBgs.set(deco.row, deco.gutterBackground)
+        if (deco.sign) rowSigns.set(deco.row, deco.sign)
+      }
+    }
+
     for (let screenY = 0; screenY < vpHeight; screenY++) {
       const vRow = top + screenY
       if (vRow >= this._virtualRowToRow.length) break
 
       const row = this._virtualRowToRow[vRow]
       if (row < 0) continue // Skip gap rows (margins)
-      let bg: RGBA | null = null
-
-      // Priority order: currentMatch > match > selection > toggled > cursor
-      if (cursorRow != null && row === cursorRow) {
-        bg = cachedColor(this._palette.cursorBg)
-      }
-      if (toggledRows && toggledRows.has(row)) {
-        bg = cachedColor(this._palette.toggledBg)
-      }
-      if (selection && row >= selection.start && row <= selection.end) {
-        bg = cachedColor(this._palette.selectionBg)
-      }
-      if (matchingRows && matchingRows.has(row)) {
-        bg = cachedColor(this._palette.matchBg)
-      }
-      if (currentMatchRow != null && row === currentMatchRow) {
-        bg = cachedColor(this._palette.currentMatchBg)
-      }
-
-      if (bg) {
-        buffer.fillRect(vpX, vpY + screenY, vpWidth, 1, bg)
-      }
+      const bg = rowBgs.get(row)
+      if (!bg) continue
+      buffer.fillRect(vpX, vpY + screenY, vpWidth, 1, cachedColor(bg))
     }
+
+    this._layerGutterBgs = rowGutterBgs
+    this._layerSigns = rowSigns
   }
 
   // -----------------------------------------------------------------------
@@ -552,53 +529,32 @@ export class RowDocumentRenderable extends ScrollBoxRenderable {
       const drawX = vpX
       let col = 0
 
+      const rowGutterHex = this._layerGutterBgs.get(row)
+      const effectiveGutterBg = rowGutterHex ? cachedColor(rowGutterHex) : gutterBg
+      if (rowGutterHex) {
+        buffer.fillRect(drawX, vpY + screenY, gutterWidth, 1, effectiveGutterBg)
+      }
+
       // Line number
       if (this._showLineNumbers) {
         const lineNum = String(this._lineNumberStart + row)
         const padded = lineNum.padStart(lineNumWidth, " ")
-        buffer.drawText(padded, drawX + col, vpY + screenY, gutterFg, gutterBg)
+        buffer.drawText(padded, drawX + col, vpY + screenY, gutterFg, effectiveGutterBg)
         col += lineNumWidth
       }
 
       // Sign column
       if (this._signColumnWidth > 0) {
-        const { cursorRow, matchingRows, currentMatchRow } = this._deco
-        const customSign = this._deco.signs?.get(row)
+        const sign = this._layerSigns.get(row)
 
-        if (customSign) {
-          const signFg = customSign.fg
-            ? cachedColor(customSign.fg)
-            : gutterFg
+        if (sign) {
+          const signFg = sign.fg ? cachedColor(sign.fg) : gutterFg
           buffer.drawText(
-            customSign.text.slice(0, this._signColumnWidth),
+            sign.text.slice(0, this._signColumnWidth),
             drawX + col,
             vpY + screenY,
             signFg,
-            gutterBg,
-          )
-        } else if (cursorRow != null && row === cursorRow) {
-          buffer.drawText(
-            this._palette.cursorSign,
-            drawX + col,
-            vpY + screenY,
-            cachedColor(this._palette.cursorSignFg),
-            gutterBg,
-          )
-        } else if (currentMatchRow != null && row === currentMatchRow) {
-          buffer.drawText(
-            this._palette.matchSign,
-            drawX + col,
-            vpY + screenY,
-            cachedColor(this._palette.currentMatchSignFg),
-            gutterBg,
-          )
-        } else if (matchingRows && matchingRows.has(row)) {
-          buffer.drawText(
-            this._palette.matchSign,
-            drawX + col,
-            vpY + screenY,
-            cachedColor(this._palette.matchSignFg),
-            gutterBg,
+            effectiveGutterBg,
           )
         }
       }

package/src/Table.tsx

@@ -1,8 +1,13 @@
 import { useTerminalDimensions } from "@opentui/react"
 import { useTheme } from "@tooee/themes"
-import { useEffect, useRef, type RefObject } from "react"
+import { type RefObject } from "react"
+import type { MarkState } from "@tooee/marks"
 import type { ColumnDef, TableRow } from "./table-types.js"
-import type { RowDocumentRenderable, RowDocumentPalette, RowDocumentDecorations } from "./RowDocumentRenderable.js"
+import {
+  computeRowDocumentGutterWidth,
+  type RowDocumentRenderable,
+} from "./RowDocumentRenderable.js"
+import { useGutterPalette } from "./useGutterPalette.js"
 import "./row-document.js"
 
 export interface TableProps {
@@ -18,12 +23,7 @@ export interface TableProps {
   sampleSize?: number
   /** Show line numbers in the gutter (default: true) */
   showLineNumbers?: boolean
-  cursor?: number
-  selectionStart?: number
-  selectionEnd?: number
-  matchingRows?: Set<number>
-  currentMatchRow?: number
-  toggledRows?: Set<number>
+  marks?: MarkState
   docRef?: RefObject<RowDocumentRenderable | null>
   /** Column width mode: "content" sizes to content (default), "fill" expands to fill available width */
   columnWidthMode?: "content" | "fill"
@@ -73,7 +73,10 @@ function computeColumnWidths(
   // Use Bun.stringWidth for correct display width with CJK/emoji
   const naturalWidths = headers.map((header, col) => {
     const headerLen = Bun.stringWidth(header)
-    const maxRowLen = sampledRows.reduce((max, row) => Math.max(max, Bun.stringWidth(row[col] ?? "")), 0)
+    const maxRowLen = sampledRows.reduce(
+      (max, row) => Math.max(max, Bun.stringWidth(row[col] ?? "")),
+      0,
+    )
     const contentWidth = Math.max(headerLen, maxRowLen)
     // Apply min/max constraints before adding padding
     const constrainedWidth = Math.min(maxColumnWidth, Math.max(minColumnWidth, contentWidth))
@@ -124,22 +127,6 @@ function computeColumnWidths(
   })
 }
 
-/**
- * Pre-compute gutter width to subtract from available column space.
- * Mirrors RowDocumentRenderable._computeGutterWidth logic.
- */
-function computeGutterWidth(rowCount: number, showLineNumbers: boolean): number {
-  let width = 0
-  if (showLineNumbers) {
-    // lineNumberStart defaults to 1, so max line number = rowCount
-    const maxLineNum = rowCount
-    width += Math.max(String(maxLineNum).length, 1)
-  }
-  width += 1 // signColumnWidth
-  width += 1 // gutterPaddingRight (default)
-  return width
-}
-
 function formatCellValue(value: unknown): string {
   if (value == null) return ""
   if (typeof value === "string") return value
@@ -160,20 +147,20 @@ export function Table({
   maxColumnWidth = DEFAULT_MAX_COL_WIDTH,
   sampleSize = DEFAULT_SAMPLE_SIZE,
   showLineNumbers = true,
-  cursor,
-  selectionStart,
-  selectionEnd,
-  matchingRows,
-  currentMatchRow,
-  toggledRows,
+  marks,
   docRef,
   columnWidthMode = "content",
 }: TableProps) {
   const { theme } = useTheme()
+  const palette = useGutterPalette()
   const { width: terminalWidth } = useTerminalDimensions()
 
   // Compute available content width: start with total space, subtract margins and gutter
-  const gutterWidth = computeGutterWidth(rows.length, showLineNumbers)
+  const gutterWidth = computeRowDocumentGutterWidth({
+    showLineNumbers,
+    rowCount: rows.length,
+    signColumnWidth: 1,
+  })
   const effectiveMaxWidth = Math.max(0, (maxWidth ?? terminalWidth) - MARGIN * 2 - gutterWidth)
 
   const headers = columns.map((column) => column.header ?? column.key)
@@ -197,37 +184,16 @@ export function Table({
     return numericCount > sampleValues.length / 2
   })
 
-  const internalRef = useRef<RowDocumentRenderable>(null)
-  const effectiveRef = docRef ?? internalRef
-
-  const palette: RowDocumentPalette = {
-    gutterFg: theme.textMuted,
-    gutterBg: theme.backgroundElement,
-    cursorSignFg: theme.primary,
-    matchSignFg: theme.warning,
-    currentMatchSignFg: theme.primary,
-    cursorBg: theme.cursorLine,
-    selectionBg: theme.selection,
-    matchBg: theme.warning,
-    currentMatchBg: theme.primary,
-    toggledBg: theme.backgroundPanel,
-  }
-
-  useEffect(() => {
-    const decorations: RowDocumentDecorations = {
-      cursorRow: cursor,
-      selection: selectionStart != null && selectionEnd != null
-        ? { start: selectionStart, end: selectionEnd }
-        : null,
-      matchingRows: matchingRows,
-      currentMatchRow: currentMatchRow,
-      toggledRows: toggledRows,
-    }
-    effectiveRef.current?.setDecorations(decorations)
-  }, [cursor, selectionStart, selectionEnd, matchingRows, currentMatchRow, toggledRows])
-
   return (
-    <box style={{ flexDirection: "column", flexGrow: 1, marginLeft: MARGIN, marginRight: MARGIN, marginBottom: MARGIN }}>
+    <box
+      style={{
+        flexDirection: "column",
+        flexGrow: 1,
+        marginLeft: MARGIN,
+        marginRight: MARGIN,
+        marginBottom: MARGIN,
+      }}
+    >
       {/* Fixed header row — outside row-document so it stays visible */}
       <box style={{ flexDirection: "row", flexShrink: 0, paddingLeft: gutterWidth }}>
         {headers.map((h, i) => (
@@ -254,13 +220,14 @@ export function Table({
 
       {/* Scrollable data rows */}
       <row-document
-        ref={effectiveRef}
+        ref={docRef}
         mode="multi"
         rowChildOffset={0}
         showGutter={true}
         showLineNumbers={showLineNumbers}
         signColumnWidth={1}
         palette={palette}
+        decorations={marks?.sets}
         style={{ flexGrow: 1 }}
       >
         {normalizedRows.map((row, i) => (
@@ -268,9 +235,10 @@ export function Table({
             {row.map((cell, j) => {
               const contentWidth = colWidths[j] - PADDING * 2
               const cellWidth = Bun.stringWidth(cell)
-              const displayCell = alignments[j] && cellWidth <= contentWidth
-                ? " ".repeat(contentWidth - cellWidth) + cell
-                : cell
+              const displayCell =
+                alignments[j] && cellWidth <= contentWidth
+                  ? " ".repeat(contentWidth - cellWidth) + cell
+                  : cell
               return (
                 <text
                   key={j}
@@ -293,9 +261,5 @@ export function Table({
 }
 
 // Exported for testing and MarkdownView
-export {
-  computeColumnWidths,
-  isNumeric,
-  sampleRows,
-}
+export { computeColumnWidths, isNumeric, sampleRows }
 export type { ColumnWidthOptions }

package/src/index.ts

@@ -1,12 +1,8 @@
-export { MarkdownView } from "./MarkdownView.js"
+export { MarkdownView, flattenTokens } from "./MarkdownView.js"
+export type { FlatBlock } from "./MarkdownView.js"
 export { CodeView } from "./CodeView.js"
 export { ImageView } from "./ImageView.js"
-export {
-  Table,
-  computeColumnWidths,
-  isNumeric,
-  sampleRows,
-} from "./Table.js"
+export { Table, computeColumnWidths, isNumeric, sampleRows } from "./Table.js"
 export type { TableProps, ColumnWidthOptions } from "./Table.js"
 export type { ColumnDef, TableRow } from "./table-types.js"
 export { CommandPalette } from "./CommandPalette.js"
@@ -14,8 +10,10 @@ export type { CommandPaletteEntry } from "./CommandPalette.js"
 export { parseCSV, parseTSV, parseJSON, parseAuto, detectFormat } from "./parsers.js"
 export type { Format, ParsedTable } from "./parsers.js"
 export { RowDocumentRenderable } from "./RowDocumentRenderable.js"
+export { computeRowDocumentGutterWidth } from "./RowDocumentRenderable.js"
 export type {
   RowDocumentOptions,
   RowDocumentPalette,
-  RowDocumentDecorations,
 } from "./RowDocumentRenderable.js"
+export type { DecorationLayer, RowDecoration } from "./DecorationLayer.js"
+export { useGutterPalette } from "./useGutterPalette.js"

package/src/parsers.ts

@@ -56,7 +56,10 @@ export function parseTSV(input: string): { columns: ColumnDef[]; rows: TableRow[
   const lines = splitLines(input)
   if (lines.length === 0) return { columns: [], rows: [] }
   const columns = createColumnDefs(lines[0].split("\t"))
-  const rows = buildRows(columns, lines.slice(1).map((line) => line.split("\t")))
+  const rows = buildRows(
+    columns,
+    lines.slice(1).map((line) => line.split("\t")),
+  )
   return { columns, rows }
 }
 

package/src/useGutterPalette.ts

@@ -0,0 +1,15 @@
+import { useMemo } from "react"
+import { useTheme } from "@tooee/themes"
+import type { RowDocumentPalette } from "./RowDocumentRenderable.js"
+
+export function useGutterPalette(): RowDocumentPalette {
+  const { theme } = useTheme()
+
+  return useMemo(
+    () => ({
+      gutterFg: theme.textMuted,
+      gutterBg: theme.backgroundElement,
+    }),
+    [theme.textMuted, theme.backgroundElement],
+  )
+}