@tooee/renderers 0.1.11 → 0.1.12

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@tooee/renderers",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Content renderers (markdown, code, image, table) for Tooee",
+  "keywords": [
+    "cli",
+    "image",
+    "markdown",
+    "opentui",
+    "syntax-highlighting",
+    "terminal",
+    "tui"
+  ],
+  "homepage": "https://github.com/gingerhendrix/tooee",
+  "bugs": "https://github.com/gingerhendrix/tooee/issues",
   "license": "MIT",
   "author": "Gareth Andrew",
   "repository": {
@@ -9,16 +20,9 @@
     "url": "https://github.com/gingerhendrix/tooee.git",
     "directory": "packages/renderers"
   },
-  "homepage": "https://github.com/gingerhendrix/tooee",
-  "bugs": "https://github.com/gingerhendrix/tooee/issues",
-  "keywords": [
-    "tui",
-    "terminal",
-    "cli",
-    "opentui",
-    "markdown",
-    "syntax-highlighting",
-    "image"
+  "files": [
+    "dist",
+    "src"
   ],
   "type": "module",
   "exports": {
@@ -29,15 +33,13 @@
       }
     }
   },
-  "files": [
-    "dist",
-    "src"
-  ],
   "scripts": {
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tooee/themes": "0.1.11",
+    "@tooee/fuzzy": "0.1.12",
+    "@tooee/marks": "0.1.12",
+    "@tooee/themes": "0.1.12",
     "marked": "^17.0.4"
   },
   "devDependencies": {

package/src/CodeView.tsx

@@ -1,75 +1,32 @@
-import { useEffect, useRef, type RefObject } from "react"
+import { type RefObject } from "react"
 import { useTheme } from "@tooee/themes"
-import type { RowDocumentRenderable, RowDocumentPalette, RowDocumentDecorations } from "./RowDocumentRenderable.js"
+import type { MarkState } from "@tooee/marks"
+import type { RowDocumentRenderable } from "./RowDocumentRenderable.js"
+import { useGutterPalette } from "./useGutterPalette.js"
 import "./row-document.js"
 
 interface CodeViewProps {
   content: string
   language?: string
   showLineNumbers?: boolean
-  cursor?: number
-  selectionStart?: number
-  selectionEnd?: number
-  matchingLines?: Set<number>
-  currentMatchLine?: number
-  toggledLines?: Set<number>
+  marks?: MarkState
   docRef?: RefObject<RowDocumentRenderable | null>
 }
 
-export function CodeView({
-  content,
-  language,
-  showLineNumbers = true,
-  cursor,
-  selectionStart,
-  selectionEnd,
-  matchingLines,
-  currentMatchLine,
-  toggledLines,
-  docRef,
-}: CodeViewProps) {
-  const { syntax, theme } = useTheme()
-  const internalRef = useRef<RowDocumentRenderable>(null)
-  const effectiveRef = docRef ?? internalRef
-
-  const palette: RowDocumentPalette = {
-    gutterFg: theme.textMuted,
-    gutterBg: theme.backgroundElement,
-    cursorBg: theme.cursorLine,
-    selectionBg: theme.selection,
-    matchBg: theme.warning,
-    currentMatchBg: theme.primary,
-    toggledBg: theme.backgroundPanel,
-    cursorSignFg: theme.primary,
-    matchSignFg: theme.warning,
-    currentMatchSignFg: theme.primary,
-  }
-
-  useEffect(() => {
-    const decorations: RowDocumentDecorations = {
-      cursorRow: cursor,
-      selection: selectionStart != null && selectionEnd != null
-        ? { start: selectionStart, end: selectionEnd }
-        : null,
-      matchingRows: matchingLines,
-      currentMatchRow: currentMatchLine,
-      toggledRows: toggledLines,
-    }
-    effectiveRef.current?.setDecorations(decorations)
-  }, [cursor, selectionStart, selectionEnd, matchingLines, currentMatchLine, toggledLines])
-
-  const codeElement = <code content={content} filetype={language} syntaxStyle={syntax} />
+export function CodeView({ content, language, showLineNumbers = true, marks, docRef }: CodeViewProps) {
+  const { syntax } = useTheme()
+  const palette = useGutterPalette()
 
   return (
     <row-document
-      ref={effectiveRef}
-      key={theme.textMuted + theme.backgroundElement}
+      ref={docRef}
       showLineNumbers={showLineNumbers}
       palette={palette}
+      decorations={marks?.sets}
       signColumnWidth={1}
       style={{ flexGrow: 1 }}
     >
-      {codeElement}
+      <code content={content} filetype={language} syntaxStyle={syntax} />
     </row-document>
   )
 }

package/src/CommandPalette.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useCallback } from "react"
 import { useKeyboard } from "@opentui/react"
 import { useTheme } from "@tooee/themes"
+import { fuzzyMatch } from "@tooee/fuzzy"
 
 export interface CommandPaletteEntry {
   id: string
@@ -16,31 +17,6 @@ interface CommandPaletteProps {
   onClose: () => void
 }
 
-function fuzzyMatch(query: string, text: string): number | null {
-  const lowerQuery = query.toLowerCase()
-  const lowerText = text.toLowerCase()
-
-  let qi = 0
-  let score = 0
-  let lastMatchIndex = -2
-
-  for (let ti = 0; ti < lowerText.length && qi < lowerQuery.length; ti++) {
-    if (lowerText[ti] === lowerQuery[qi]) {
-      // Start of string bonus
-      if (ti === 0) score += 3
-      // Word boundary bonus (after space, hyphen, dot, slash)
-      else if (" -./".includes(lowerText[ti - 1]!)) score += 2
-      // Consecutive bonus
-      else if (ti === lastMatchIndex + 1) score += 1
-
-      lastMatchIndex = ti
-      qi++
-    }
-  }
-
-  return qi === lowerQuery.length ? score : null
-}
-
 export function CommandPalette({ commands, onSelect, onClose }: CommandPaletteProps) {
   const { theme } = useTheme()
   const [filter, setFilter] = useState("")

package/src/DecorationLayer.ts

@@ -0,0 +1,11 @@
+export interface RowDecoration {
+  row: number
+  background?: string
+  gutterBackground?: string
+  sign?: { text: string; fg?: string }
+}
+
+export interface DecorationLayer {
+  readonly priority: number
+  forVisibleRows(from: number, to: number): Iterable<RowDecoration>
+}

package/src/MarkdownView.tsx

@@ -1,73 +1,37 @@
 import { marked, type Token, type Tokens } from "marked"
-import { useEffect, useMemo, useRef, type ReactNode, type RefObject } from "react"
+import { useMemo, type ReactNode, type RefObject } from "react"
 import { useTheme, type ResolvedTheme } from "@tooee/themes"
 import { bold as boldChunk } from "@opentui/core"
 import type { SyntaxStyle, TextTableContent, TextTableCellContent } from "@opentui/core"
-import type { RowDocumentRenderable, RowDocumentPalette, RowDocumentDecorations } from "./RowDocumentRenderable.js"
+import type { MarkState } from "@tooee/marks"
+import type { RowDocumentRenderable } from "./RowDocumentRenderable.js"
+import { useGutterPalette } from "./useGutterPalette.js"
 import "./row-document.js"
 import "./text-table.js"
 
 interface MarkdownViewProps {
   content: string
   showLineNumbers?: boolean
-  activeBlock?: number
-  selectedBlocks?: { start: number; end: number }
-  matchingBlocks?: Set<number>
-  currentMatchBlock?: number
-  toggledBlocks?: Set<number>
+  marks?: MarkState
   docRef?: RefObject<RowDocumentRenderable | null>
 }
 
-export function MarkdownView({
-  content,
-  showLineNumbers = true,
-  activeBlock,
-  selectedBlocks,
-  matchingBlocks,
-  currentMatchBlock,
-  toggledBlocks,
-  docRef,
-}: MarkdownViewProps) {
+export function MarkdownView({ content, showLineNumbers = true, marks, docRef }: MarkdownViewProps) {
   const { theme, syntax } = useTheme()
-  const internalRef = useRef<RowDocumentRenderable>(null)
-  const effectiveRef = docRef ?? internalRef
+  const palette = useGutterPalette()
   const tokens = marked.lexer(content)
   const blocks = tokens.filter((t) => t.type !== "space")
 
-  const palette: RowDocumentPalette = {
-    gutterFg: theme.textMuted,
-    gutterBg: theme.backgroundElement,
-    cursorBg: theme.cursorLine,
-    selectionBg: theme.selection,
-    matchBg: theme.warning,
-    currentMatchBg: theme.primary,
-    toggledBg: theme.backgroundPanel,
-    cursorSignFg: theme.primary,
-    matchSignFg: theme.warning,
-    currentMatchSignFg: theme.primary,
-  }
-
-  useEffect(() => {
-    const decorations: RowDocumentDecorations = {
-      cursorRow: activeBlock,
-      selection: selectedBlocks ? { start: selectedBlocks.start, end: selectedBlocks.end } : null,
-      matchingRows: matchingBlocks,
-      currentMatchRow: currentMatchBlock,
-      toggledRows: toggledBlocks,
-    }
-    effectiveRef.current?.setDecorations(decorations)
-  }, [activeBlock, selectedBlocks, matchingBlocks, currentMatchBlock, toggledBlocks])
-
   const blockElements = blocks.map((token, index) => (
     <TokenRenderer key={index} token={token} theme={theme} syntax={syntax} />
   ))
 
   return (
     <row-document
-      ref={effectiveRef}
-      key={theme.textMuted + theme.backgroundElement}
+      ref={docRef}
       showLineNumbers={showLineNumbers}
       palette={palette}
+      decorations={marks?.sets}
       signColumnWidth={1}
       style={{ flexGrow: 1 }}
     >
@@ -265,6 +229,9 @@ function ListItemRenderer({
               </text>
             )
           }
+          if (token.type === "list") {
+            return <ListRenderer key={idx} token={token as Tokens.List} theme={theme} />
+          }
           if ("text" in token && typeof token.text === "string") {
             return <text key={idx} style={{ fg: theme.markdownText }} content={token.text} />
           }
@@ -279,13 +246,14 @@ function MarkdownTableRenderer({ token }: { token: Tokens.Table }) {
   const { theme } = useTheme()
 
   const content: TextTableContent = useMemo(() => {
-    const headerRow: TextTableCellContent[] = token.header.map(cell => [
-      boldChunk(getPlainText(cell.tokens).trim())
+    const headerRow: TextTableCellContent[] = token.header.map((cell) => [
+      boldChunk(getPlainText(cell.tokens).trim()),
     ])
-    const dataRows = token.rows.map(row =>
-      row.map(cell => [
-        { __isChunk: true as const, text: getPlainText(cell.tokens) }
-      ] as TextTableCellContent)
+    const dataRows = token.rows.map((row) =>
+      row.map(
+        (cell) =>
+          [{ __isChunk: true as const, text: getPlainText(cell.tokens) }] as TextTableCellContent,
+      ),
     )
     return [headerRow, ...dataRows]
   }, [token])

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,
           )
         }
       }