@tooee/renderers 0.1.5 → 0.1.7

package/dist/row-document.d.ts

@@ -0,0 +1,7 @@
+import { RowDocumentRenderable } from "./RowDocumentRenderable.js";
+declare module "@opentui/react" {
+    interface OpenTUIComponents {
+        "row-document": typeof RowDocumentRenderable;
+    }
+}
+//# sourceMappingURL=row-document.d.ts.map

package/dist/row-document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-document.d.ts","sourceRoot":"","sources":["../src/row-document.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAIlE,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAU,iBAAiB;QACzB,cAAc,EAAE,OAAO,qBAAqB,CAAA;KAC7C;CACF"}

package/dist/row-document.js

@@ -0,0 +1,4 @@
+import { extend } from "@opentui/react";
+import { RowDocumentRenderable } from "./RowDocumentRenderable.js";
+extend({ "row-document": RowDocumentRenderable });
+//# sourceMappingURL=row-document.js.map

package/dist/row-document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-document.js","sourceRoot":"","sources":["../src/row-document.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAElE,MAAM,CAAC,EAAE,cAAc,EAAE,qBAAqB,EAAE,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tooee/renderers",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Content renderers (markdown, code, image, table) for Tooee",
   "license": "MIT",
   "author": "Gareth Andrew",
@@ -37,7 +37,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tooee/themes": "0.1.5",
+    "@tooee/themes": "0.1.7",
     "marked": "^16.3.0"
   },
   "devDependencies": {

package/src/CodeView.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useRef } from "react"
-import type { LineNumberRenderable } from "@opentui/core"
+import { useEffect, useRef, type RefObject } from "react"
 import { useTheme } from "@tooee/themes"
+import type { RowDocumentRenderable, RowDocumentPalette, RowDocumentDecorations } from "./RowDocumentRenderable.js"
+import "./row-document.js"
 
 interface CodeViewProps {
   content: string
@@ -12,6 +13,7 @@ interface CodeViewProps {
   matchingLines?: Set<number>
   currentMatchLine?: number
   toggledLines?: Set<number>
+  docRef?: RefObject<RowDocumentRenderable | null>
 }
 
 export function CodeView({
@@ -24,94 +26,50 @@ export function CodeView({
   matchingLines,
   currentMatchLine,
   toggledLines,
+  docRef,
 }: CodeViewProps) {
   const { syntax, theme } = useTheme()
-  const lineNumRef = useRef<LineNumberRenderable>(null)
+  const internalRef = useRef<RowDocumentRenderable>(null)
+  const effectiveRef = docRef ?? internalRef
 
-  useEffect(() => {
-    const ref = lineNumRef.current
-    if (!ref) return
-
-    ref.clearAllLineColors()
-    ref.clearAllLineSigns()
+  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,
+  }
 
-    // Search matches
-    if (matchingLines) {
-      for (const line of matchingLines) {
-        ref.setLineSign(line, {
-          after: "●",
-          afterColor: line === currentMatchLine ? theme.primary : theme.warning,
-        })
-      }
-    }
-
-    // Selection range
-    if (selectionStart != null && selectionEnd != null) {
-      for (let i = selectionStart; i <= selectionEnd; i++) {
-        ref.setLineColor(i, { content: theme.selection, gutter: theme.selection })
-      }
-    }
-
-    if (toggledLines) {
-      for (const line of toggledLines) {
-        const isSelected =
-          selectionStart != null && selectionEnd != null && line >= selectionStart && line <= selectionEnd
-        if (line === cursor || isSelected) continue
-        ref.setLineColor(line, {
-          content: theme.backgroundPanel,
-          gutter: theme.backgroundPanel,
-        })
-      }
-    }
-
-    // Cursor line (overwrites selection color on cursor line)
-    if (cursor != null) {
-      ref.setLineColor(cursor, { content: theme.cursorLine, gutter: theme.cursorLine })
-      ref.setLineSign(cursor, {
-        before: "▸",
-        beforeColor: theme.primary,
-        // Preserve search match sign if present
-        ...(matchingLines?.has(cursor)
-          ? {
-              after: "●",
-              afterColor: cursor === currentMatchLine ? theme.primary : theme.warning,
-            }
-          : {}),
-      })
+  useEffect(() => {
+    const decorations: RowDocumentDecorations = {
+      cursorRow: cursor,
+      selection: selectionStart != null && selectionEnd != null
+        ? { start: selectionStart, end: selectionEnd }
+        : null,
+      matchingRows: matchingLines,
+      currentMatchRow: currentMatchLine,
+      toggledRows: toggledLines,
     }
-  }, [
-    content,
-    cursor,
-    selectionStart,
-    selectionEnd,
-    matchingLines,
-    currentMatchLine,
-    toggledLines,
-    theme,
-  ])
+    effectiveRef.current?.setDecorations(decorations)
+  }, [cursor, selectionStart, selectionEnd, matchingLines, currentMatchLine, toggledLines])
 
   const codeElement = <code content={content} filetype={language} syntaxStyle={syntax} />
 
   return (
-    <box
-      style={{
-        flexDirection: "column",
-      }}
+    <row-document
+      ref={effectiveRef}
+      key={theme.textMuted + theme.backgroundElement}
+      showLineNumbers={showLineNumbers}
+      palette={palette}
+      signColumnWidth={1}
+      style={{ flexGrow: 1 }}
     >
-      {showLineNumbers ? (
-        <line-number
-          ref={lineNumRef}
-          key={theme.textMuted + theme.backgroundElement}
-          fg={theme.textMuted}
-          bg={theme.backgroundElement}
-          paddingRight={1}
-          showLineNumbers
-        >
-          {codeElement}
-        </line-number>
-      ) : (
-        codeElement
-      )}
-    </box>
+      {codeElement}
+    </row-document>
   )
 }

package/src/MarkdownView.tsx

@@ -1,83 +1,79 @@
 import { marked, type Token, type Tokens } from "marked"
-import type { ReactNode } from "react"
+import { useEffect, useRef, type ReactNode, type RefObject } from "react"
+import { useTerminalDimensions } from "@opentui/react"
 import { useTheme, type ResolvedTheme } from "@tooee/themes"
 import type { SyntaxStyle } from "@opentui/core"
-import { Table } from "./Table.js"
+import { computeColumnWidths, buildBorderLine, buildDataLine, isNumeric } from "./Table.js"
+import type { RowDocumentRenderable, RowDocumentPalette, RowDocumentDecorations } from "./RowDocumentRenderable.js"
+import "./row-document.js"
 
 interface MarkdownViewProps {
   content: string
+  showLineNumbers?: boolean
   activeBlock?: number
   selectedBlocks?: { start: number; end: number }
   matchingBlocks?: Set<number>
   currentMatchBlock?: number
   toggledBlocks?: Set<number>
+  docRef?: RefObject<RowDocumentRenderable | null>
 }
 
 export function MarkdownView({
   content,
+  showLineNumbers = true,
   activeBlock,
   selectedBlocks,
   matchingBlocks,
   currentMatchBlock,
   toggledBlocks,
+  docRef,
 }: MarkdownViewProps) {
   const { theme, syntax } = useTheme()
+  const internalRef = useRef<RowDocumentRenderable>(null)
+  const effectiveRef = docRef ?? internalRef
   const tokens = marked.lexer(content)
   const blocks = tokens.filter((t) => t.type !== "space")
 
-  return (
-    <box style={{ flexDirection: "column" }}>
-      {blocks.map((token, index) => {
-        const { accent: accentColor, background: bgColor } = getBlockStyle(
-          index,
-          theme,
-          activeBlock,
-          selectedBlocks,
-          matchingBlocks,
-          currentMatchBlock,
-          toggledBlocks,
-        )
-        const blockContent = (
-          <TokenRenderer key={index} token={token} theme={theme} syntax={syntax} />
-        )
+  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,
+  }
 
-        if (accentColor) {
-          return (
-            <box
-              key={index}
-              style={{ flexDirection: "row" }}
-              backgroundColor={bgColor ?? undefined}
-            >
-              <text content="▎" fg={accentColor} />
-              <box style={{ flexGrow: 1, flexDirection: "column" }}>{blockContent}</box>
-            </box>
-          )
-        }
+  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])
 
-        return <box key={index}>{blockContent}</box>
-      })}
-    </box>
-  )
-}
+  const blockElements = blocks.map((token, index) => (
+    <TokenRenderer key={index} token={token} theme={theme} syntax={syntax} />
+  ))
 
-function getBlockStyle(
-  index: number,
-  theme: ResolvedTheme,
-  activeBlock?: number,
-  selectedBlocks?: { start: number; end: number },
-  matchingBlocks?: Set<number>,
-  currentMatchBlock?: number,
-  toggledBlocks?: Set<number>,
-): { accent: string | null; background: string | null } {
-  // Priority: cursor > toggled > current match > match > selection
-  if (activeBlock === index) return { accent: theme.primary, background: theme.backgroundElement }
-  if (toggledBlocks?.has(index)) return { accent: theme.secondary, background: theme.backgroundPanel }
-  if (currentMatchBlock === index) return { accent: theme.accent, background: null }
-  if (matchingBlocks?.has(index)) return { accent: theme.warning, background: null }
-  if (selectedBlocks && index >= selectedBlocks.start && index <= selectedBlocks.end) {
-    return { accent: theme.secondary, background: theme.backgroundPanel }
-  }
-  return { accent: null, background: null }
+  return (
+    <row-document
+      ref={effectiveRef}
+      key={theme.textMuted + theme.backgroundElement}
+      showLineNumbers={showLineNumbers}
+      palette={palette}
+      signColumnWidth={1}
+      style={{ flexGrow: 1 }}
+    >
+      {blockElements}
+    </row-document>
+  )
 }
 
 function TokenRenderer({
@@ -177,6 +173,7 @@ function CodeBlockRenderer({
   theme: ResolvedTheme
   syntax: SyntaxStyle
 }) {
+  const lineCount = token.text.split("\n").length
   return (
     <box
       style={{
@@ -190,7 +187,12 @@ function CodeBlockRenderer({
         flexDirection: "column",
       }}
     >
-      <code content={token.text} filetype={token.lang} syntaxStyle={syntax} />
+      <code
+        content={token.text}
+        filetype={token.lang}
+        syntaxStyle={syntax}
+        style={{ height: lineCount }}
+      />
     </box>
   )
 }
@@ -274,30 +276,46 @@ function ListItemRenderer({
 }
 
 function MarkdownTableRenderer({ token }: { token: Tokens.Table }) {
-  const seen = new Map<string, number>()
-  const columns = token.header.map((cell, index) => {
-    const header = getPlainText(cell.tokens)
-    const trimmed = header.trim()
-    const base = trimmed || `column_${index + 1}`
-    const count = seen.get(base) ?? 0
-    seen.set(base, count + 1)
-    const key = count === 0 ? base : `${base}_${count + 1}`
-    return {
-      key,
-      header: trimmed || undefined,
-    }
+  const { theme } = useTheme()
+  const { width: terminalWidth } = useTerminalDimensions()
+
+  const headers = token.header.map((cell) => getPlainText(cell.tokens).trim())
+  const rowData = token.rows.map((row) =>
+    row.map((cell) => getPlainText(cell.tokens)),
+  )
+
+  // Account for gutter + margins when computing available width
+  const effectiveMaxWidth = terminalWidth - 4
+
+  const colWidths = computeColumnWidths(headers, rowData, effectiveMaxWidth, {
+    minColumnWidth: 4,
+    maxColumnWidth: 50,
+    sampleSize: 100,
   })
-  const rows = token.rows.map((row) => {
-    const record: Record<string, string> = {}
-    row.forEach((cell, index) => {
-      const column = columns[index]
-      if (column) {
-        record[column.key] = getPlainText(cell.tokens)
-      }
-    })
-    return record
+
+  const alignments = headers.map((_header, colIdx) => {
+    const sampleValues = rowData.slice(0, 10).map((row) => row[colIdx] ?? "")
+    const numericCount = sampleValues.filter(isNumeric).length
+    return numericCount > sampleValues.length / 2
   })
-  return <Table columns={columns} rows={rows} />
+
+  const topBorder = buildBorderLine(colWidths, "\u250c", "\u252c", "\u2510", "\u2500")
+  const headerSep = buildBorderLine(colWidths, "\u251c", "\u253c", "\u2524", "\u2500")
+  const bottomBorder = buildBorderLine(colWidths, "\u2514", "\u2534", "\u2518", "\u2500")
+  const headerLine = buildDataLine(headers, colWidths, alignments)
+  const dataLines = rowData.map((row) => buildDataLine(row, colWidths, alignments))
+
+  return (
+    <box style={{ marginLeft: 1, marginRight: 1, marginBottom: 1, flexDirection: "column" }}>
+      <text content={topBorder} style={{ fg: theme.border }} />
+      <text content={headerLine} style={{ fg: theme.primary }} />
+      <text content={headerSep} style={{ fg: theme.border }} />
+      {dataLines.map((line, i) => (
+        <text key={i} content={line} style={{ fg: theme.text }} />
+      ))}
+      <text content={bottomBorder} style={{ fg: theme.border }} />
+    </box>
+  )
 }
 
 function HorizontalRule({ theme }: { theme: ResolvedTheme }) {