@tooee/renderers 0.1.11 → 0.1.14

package/package.json

@@ -1,7 +1,18 @@
 {
   "name": "@tooee/renderers",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "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.14",
+    "@tooee/marks": "0.1.14",
+    "@tooee/themes": "0.1.14",
     "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>
+}