@tooee/renderers 0.1.9 → 0.1.12

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,7 @@
 export { MarkdownView } 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 +9,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],
+  )
+}