@tooee/renderers 0.1.0

package/src/CommandPalette.tsx

@@ -0,0 +1,137 @@
+import { useState, useMemo, useCallback } from "react"
+import { useKeyboard } from "@opentui/react"
+import { useTheme } from "@tooee/themes"
+
+export interface CommandPaletteEntry {
+  id: string
+  title: string
+  hotkey?: string
+  category?: string
+  icon?: string
+}
+
+interface CommandPaletteProps {
+  commands: CommandPaletteEntry[]
+  onSelect: (commandId: string) => void
+  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("")
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const filtered = useMemo(() => {
+    if (!filter) return commands
+    const results: { entry: CommandPaletteEntry; score: number }[] = []
+    for (const entry of commands) {
+      const score = fuzzyMatch(filter, entry.title)
+      if (score !== null) results.push({ entry, score })
+    }
+    results.sort((a, b) => b.score - a.score)
+    return results.map((r) => r.entry)
+  }, [commands, filter])
+
+  const handleSelect = useCallback(() => {
+    const item = filtered[activeIndex]
+    if (item) {
+      onSelect(item.id)
+    }
+  }, [filtered, activeIndex, onSelect])
+
+  useKeyboard((key) => {
+    if (key.name === "escape") {
+      key.preventDefault()
+      onClose()
+    } else if (key.name === "return") {
+      key.preventDefault()
+      handleSelect()
+    } else if (key.name === "up") {
+      key.preventDefault()
+      setActiveIndex((i) => Math.max(0, i - 1))
+    } else if (key.name === "down") {
+      key.preventDefault()
+      setActiveIndex((i) => Math.min(filtered.length - 1, i + 1))
+    }
+  })
+
+  return (
+    <box
+      position="absolute"
+      left="20%"
+      right="20%"
+      top={2}
+      maxHeight="60%"
+      flexDirection="column"
+      backgroundColor={theme.backgroundPanel}
+      border
+      borderColor={theme.border}
+    >
+      {/* Filter row */}
+      <box flexDirection="row" paddingLeft={1} paddingRight={1} height={1}>
+        <text content=":" fg={theme.accent} />
+        <input
+          focused
+          placeholder="Filter commands..."
+          onInput={(value: string) => {
+            setFilter(value)
+            setActiveIndex(0)
+          }}
+          backgroundColor="transparent"
+          focusedBackgroundColor="transparent"
+          textColor={theme.text}
+          placeholderColor={theme.textMuted}
+          cursorColor={theme.accent}
+          style={{ flexGrow: 1 }}
+        />
+        <text content={` ${filtered.length}`} fg={theme.textMuted} />
+      </box>
+
+      {/* Separator */}
+      <box height={1} width="100%" backgroundColor={theme.border} />
+
+      {/* Command list */}
+      <scrollbox focused={false} style={{ flexGrow: 1 }}>
+        {filtered.map((entry, i) => (
+          <box
+            key={entry.id}
+            flexDirection="row"
+            paddingLeft={1}
+            paddingRight={1}
+            height={1}
+            backgroundColor={i === activeIndex ? theme.backgroundElement : undefined}
+          >
+            <text content={entry.title} fg={theme.text} style={{ flexGrow: 1 }} />
+            {entry.hotkey && <text content={entry.hotkey} fg={theme.textMuted} />}
+            {entry.category && <text content={` ${entry.category}`} fg={theme.textMuted} />}
+          </box>
+        ))}
+      </scrollbox>
+    </box>
+  )
+}

package/src/ImageView.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from "react"
+import { Jimp } from "jimp"
+import { useTerminalDimensions } from "@opentui/react"
+import { useTheme } from "@tooee/themes"
+
+interface ImageViewProps {
+  /** File path to the image */
+  src: string
+  /** Maximum width in characters (defaults to terminal width) */
+  maxWidth?: number
+  /** Maximum height in characters (defaults to terminal height) */
+  maxHeight?: number
+}
+
+interface PixelRow {
+  key: number
+  cells: PixelCell[]
+}
+
+interface PixelCell {
+  char: string
+  fg: string
+  bg: string
+}
+
+/**
+ * Renders an image in the terminal using half-block characters.
+ * Each character cell displays two vertical pixels using foreground (top) and background (bottom) colors.
+ */
+export function ImageView({ src, maxWidth, maxHeight }: ImageViewProps) {
+  const { theme } = useTheme()
+  const { width: termWidth, height: termHeight } = useTerminalDimensions()
+  const [rows, setRows] = useState<PixelRow[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [imageInfo, setImageInfo] = useState<{ width: number; height: number } | null>(null)
+
+  const effectiveMaxWidth = maxWidth ?? termWidth - 2
+  const effectiveMaxHeight = maxHeight ?? (termHeight - 4) * 2 // *2 because each char = 2 pixels
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function loadImage() {
+      try {
+        const image = await Jimp.read(src)
+        if (cancelled) return
+
+        const originalWidth = image.width
+        const originalHeight = image.height
+
+        // Calculate scale to fit within bounds while preserving aspect ratio
+        // Terminal characters are roughly 2:1 (height:width), so we need to account for this
+        const _charAspectRatio = 2 // Each character is roughly 2x as tall as it is wide
+        const adjustedMaxHeight = effectiveMaxHeight
+
+        const scaleX = effectiveMaxWidth / originalWidth
+        const scaleY = adjustedMaxHeight / originalHeight
+        const scale = Math.min(scaleX, scaleY, 1) // Don't upscale
+
+        const newWidth = Math.floor(originalWidth * scale)
+        const newHeight = Math.floor(originalHeight * scale)
+
+        // Resize image
+        if (newWidth !== originalWidth || newHeight !== originalHeight) {
+          image.resize({ w: newWidth, h: newHeight })
+        }
+
+        // Convert to half-block characters
+        const pixelRows = convertToHalfBlocks(image)
+
+        if (!cancelled) {
+          setImageInfo({ width: newWidth, height: Math.ceil(newHeight / 2) })
+          setRows(pixelRows)
+          setError(null)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load image")
+          setRows(null)
+        }
+      }
+    }
+
+    loadImage()
+    return () => {
+      cancelled = true
+    }
+  }, [src, effectiveMaxWidth, effectiveMaxHeight])
+
+  if (error) {
+    return (
+      <box style={{ flexDirection: "column", padding: 1 }}>
+        <text content={`Error loading image: ${error}`} fg={theme.error} />
+      </box>
+    )
+  }
+
+  if (!rows) {
+    return (
+      <box style={{ padding: 1 }}>
+        <text content="Loading image..." fg={theme.textMuted} />
+      </box>
+    )
+  }
+
+  return (
+    <box style={{ flexDirection: "column" }}>
+      {rows.map((row) => (
+        <text key={row.key} height={1}>
+          {row.cells.map((cell, i) => (
+            <span key={i} fg={cell.fg} bg={cell.bg}>
+              {cell.char}
+            </span>
+          ))}
+        </text>
+      ))}
+      {imageInfo && (
+        <text
+          content={`${imageInfo.width}×${imageInfo.height * 2} pixels`}
+          fg={theme.textMuted}
+          style={{ marginTop: 1 }}
+        />
+      )}
+    </box>
+  )
+}
+
+/**
+ * Convert an image to half-block characters.
+ * Uses ▀ (upper half block) where top pixel is fg, bottom pixel is bg.
+ */
+function convertToHalfBlocks(image: Awaited<ReturnType<typeof Jimp.read>>): PixelRow[] {
+  const width = image.width
+  const height = image.height
+  const rows: PixelRow[] = []
+
+  // Process two rows at a time (top and bottom of each character cell)
+  for (let y = 0; y < height; y += 2) {
+    const cells: PixelCell[] = []
+
+    for (let x = 0; x < width; x++) {
+      const topColor = getPixelColor(image, x, y)
+      const bottomColor = y + 1 < height ? getPixelColor(image, x, y + 1) : topColor
+
+      cells.push({
+        char: "▀",
+        fg: topColor,
+        bg: bottomColor,
+      })
+    }
+
+    rows.push({ key: y, cells })
+  }
+
+  return rows
+}
+
+function getPixelColor(image: Awaited<ReturnType<typeof Jimp.read>>, x: number, y: number): string {
+  const pixel = image.getPixelColor(x, y)
+  // Jimp returns RGBA as a single integer: 0xRRGGBBAA
+  const r = (pixel >> 24) & 0xff
+  const g = (pixel >> 16) & 0xff
+  const b = (pixel >> 8) & 0xff
+  const a = pixel & 0xff
+
+  // Handle transparency by blending with a dark background
+  if (a < 255) {
+    const alpha = a / 255
+    const bgR = 0x1a
+    const bgG = 0x1b
+    const bgB = 0x26
+    const blendedR = Math.round(r * alpha + bgR * (1 - alpha))
+    const blendedG = Math.round(g * alpha + bgG * (1 - alpha))
+    const blendedB = Math.round(b * alpha + bgB * (1 - alpha))
+    return rgbToHex(blendedR, blendedG, blendedB)
+  }
+
+  return rgbToHex(r, g, b)
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
+}

package/src/MarkdownView.tsx

@@ -0,0 +1,379 @@
+import { marked, type Token, type Tokens } from "marked"
+import type { ReactNode } from "react"
+import { useTheme, type ResolvedTheme } from "@tooee/themes"
+import type { SyntaxStyle } from "@opentui/core"
+import { Table } from "./Table.jsx"
+
+interface MarkdownViewProps {
+  content: string
+  activeBlock?: number
+  selectedBlocks?: { start: number; end: number }
+  matchingBlocks?: Set<number>
+  currentMatchBlock?: number
+  toggledBlocks?: Set<number>
+}
+
+export function MarkdownView({
+  content,
+  activeBlock,
+  selectedBlocks,
+  matchingBlocks,
+  currentMatchBlock,
+  toggledBlocks,
+}: MarkdownViewProps) {
+  const { theme, syntax } = useTheme()
+  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} />
+        )
+
+        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>
+          )
+        }
+
+        return <box key={index}>{blockContent}</box>
+      })}
+    </box>
+  )
+}
+
+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 }
+}
+
+function TokenRenderer({
+  token,
+  theme,
+  syntax,
+}: {
+  token: Token
+  theme: ResolvedTheme
+  syntax: SyntaxStyle
+}): ReactNode {
+  switch (token.type) {
+    case "heading":
+      return <HeadingRenderer token={token as Tokens.Heading} theme={theme} />
+    case "paragraph":
+      return <ParagraphRenderer token={token as Tokens.Paragraph} theme={theme} />
+    case "code":
+      return <CodeBlockRenderer token={token as Tokens.Code} theme={theme} syntax={syntax} />
+    case "blockquote":
+      return <BlockquoteRenderer token={token as Tokens.Blockquote} theme={theme} />
+    case "list":
+      return <ListRenderer token={token as Tokens.List} theme={theme} />
+    case "table":
+      return <MarkdownTableRenderer token={token as Tokens.Table} />
+    case "hr":
+      return <HorizontalRule theme={theme} />
+    case "space":
+      return null
+    case "html":
+      return null
+    default:
+      if ("text" in token && typeof token.text === "string") {
+        return (
+          <text
+            content={token.text}
+            style={{
+              fg: theme.markdownText,
+              marginBottom: 1,
+              marginTop: 0,
+              marginLeft: 1,
+              marginRight: 1,
+            }}
+          />
+        )
+      }
+      return null
+  }
+}
+
+function HeadingRenderer({ token, theme }: { token: Tokens.Heading; theme: ResolvedTheme }) {
+  const headingColors: Record<number, string> = {
+    1: theme.markdownHeading,
+    2: theme.secondary,
+    3: theme.accent,
+    4: theme.text,
+    5: theme.textMuted,
+    6: theme.textMuted,
+  }
+
+  const prefixes: Record<number, string> = {
+    1: "# ",
+    2: "## ",
+    3: "### ",
+    4: "#### ",
+    5: "##### ",
+    6: "###### ",
+  }
+
+  const headingText = getPlainText(token.tokens || [])
+
+  return (
+    <box style={{ marginTop: 1, marginBottom: 1 }}>
+      <text style={{ fg: headingColors[token.depth] || theme.text }}>
+        <span fg={theme.textMuted}>{prefixes[token.depth]}</span>
+        <strong>{headingText}</strong>
+      </text>
+    </box>
+  )
+}
+
+function ParagraphRenderer({ token, theme }: { token: Tokens.Paragraph; theme: ResolvedTheme }) {
+  return (
+    <box style={{ marginBottom: 1, marginLeft: 1, marginRight: 1 }}>
+      <text style={{ fg: theme.markdownText }}>
+        <InlineTokens tokens={token.tokens || []} theme={theme} />
+      </text>
+    </box>
+  )
+}
+
+function CodeBlockRenderer({
+  token,
+  theme,
+  syntax,
+}: {
+  token: Tokens.Code
+  theme: ResolvedTheme
+  syntax: SyntaxStyle
+}) {
+  return (
+    <box
+      style={{
+        marginTop: 0,
+        marginBottom: 1,
+        marginLeft: 1,
+        marginRight: 1,
+        border: true,
+        borderColor: theme.border,
+        backgroundColor: theme.backgroundElement,
+        flexDirection: "column",
+      }}
+    >
+      <code content={token.text} filetype={token.lang} syntaxStyle={syntax} />
+    </box>
+  )
+}
+
+function BlockquoteRenderer({ token, theme }: { token: Tokens.Blockquote; theme: ResolvedTheme }) {
+  const quoteText = token.tokens
+    ? token.tokens
+        .map((t) => {
+          const innerTokens = "tokens" in t ? (t as { tokens?: Token[] }).tokens : undefined
+          const textContent = "text" in t ? (t as { text?: string }).text : ""
+          return getPlainText(innerTokens || []) || textContent || ""
+        })
+        .join("\n")
+    : ""
+
+  return (
+    <box style={{ marginTop: 0, marginBottom: 1, marginLeft: 1, marginRight: 1, paddingLeft: 2 }}>
+      <text style={{ fg: theme.markdownBlockQuote }} content="│ " />
+      <text style={{ fg: theme.textMuted }} content={quoteText} />
+    </box>
+  )
+}
+
+function ListRenderer({ token, theme }: { token: Tokens.List; theme: ResolvedTheme }) {
+  return (
+    <box style={{ marginBottom: 1, marginLeft: 3, marginRight: 1, flexDirection: "column" }}>
+      {token.items.map((item, index) => (
+        <ListItemRenderer
+          key={index}
+          item={item}
+          ordered={token.ordered}
+          index={index + (token.start || 1)}
+          theme={theme}
+        />
+      ))}
+    </box>
+  )
+}
+
+function ListItemRenderer({
+  item,
+  ordered,
+  index,
+  theme,
+}: {
+  item: Tokens.ListItem
+  ordered: boolean
+  index: number
+  theme: ResolvedTheme
+}) {
+  const bullet = ordered ? `${index}. ` : "- "
+  const itemContent = item.tokens || []
+
+  return (
+    <box style={{ flexDirection: "row" }}>
+      <text style={{ fg: theme.markdownListItem }} content={bullet} />
+      <box style={{ flexShrink: 1, flexDirection: "column" }}>
+        {itemContent.map((token, idx) => {
+          if (token.type === "text" && "tokens" in token && token.tokens) {
+            return (
+              <text key={idx} style={{ fg: theme.markdownText }}>
+                <InlineTokens tokens={token.tokens} theme={theme} />
+              </text>
+            )
+          }
+          if (token.type === "paragraph" && token.tokens) {
+            return (
+              <text key={idx} style={{ fg: theme.markdownText }}>
+                <InlineTokens tokens={token.tokens} theme={theme} />
+              </text>
+            )
+          }
+          if ("text" in token && typeof token.text === "string") {
+            return <text key={idx} style={{ fg: theme.markdownText }} content={token.text} />
+          }
+          return null
+        })}
+      </box>
+    </box>
+  )
+}
+
+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 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
+  })
+  return <Table columns={columns} rows={rows} />
+}
+
+function HorizontalRule({ theme }: { theme: ResolvedTheme }) {
+  return (
+    <box style={{ marginTop: 0, marginBottom: 1, marginLeft: 1, marginRight: 1 }}>
+      <text style={{ fg: theme.markdownHorizontalRule }} content={"─".repeat(40)} />
+    </box>
+  )
+}
+
+function getPlainText(tokens: Token[]): string {
+  return tokens
+    .map((token) => {
+      if (token.type === "text") return token.text
+      if (token.type === "codespan") return (token as Tokens.Codespan).text
+      if ("tokens" in token && token.tokens) return getPlainText(token.tokens as Token[])
+      if ("text" in token) return (token as { text: string }).text
+      return ""
+    })
+    .join("")
+}
+
+function InlineTokens({ tokens, theme }: { tokens: Token[]; theme: ResolvedTheme }): ReactNode {
+  const result: ReactNode[] = []
+
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+    if (!token) continue
+    const key = i
+
+    switch (token.type) {
+      case "text":
+        result.push((token as Tokens.Text).text)
+        break
+      case "strong":
+        result.push(
+          <strong key={key}>{getPlainText((token as Tokens.Strong).tokens || [])}</strong>,
+        )
+        break
+      case "em":
+        result.push(<em key={key}>{getPlainText((token as Tokens.Em).tokens || [])}</em>)
+        break
+      case "codespan":
+        result.push(
+          <span key={key} fg={theme.markdownCode} bg={theme.backgroundPanel}>
+            {` ${(token as Tokens.Codespan).text} `}
+          </span>,
+        )
+        break
+      case "link": {
+        const linkToken = token as Tokens.Link
+        result.push(
+          <u key={key}>
+            <a href={linkToken.href} fg={theme.markdownLink}>
+              {getPlainText(linkToken.tokens || [])}
+            </a>
+          </u>,
+        )
+        break
+      }
+      case "br":
+        result.push("\n")
+        break
+      case "escape":
+        result.push((token as Tokens.Escape).text)
+        break
+      case "space":
+        result.push(" ")
+        break
+      default:
+        if ("text" in token && typeof (token as { text?: string }).text === "string") {
+          result.push((token as { text: string }).text)
+        }
+        break
+    }
+  }
+
+  return <>{result}</>
+}