@tooee/view 0.1.0

package/src/View.tsx

@@ -0,0 +1,497 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from "react"
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { MarkdownView, CodeView, ImageView, Table } from "@tooee/renderers"
+import { AppLayout } from "@tooee/layout"
+import { useTheme } from "@tooee/themes"
+import { useHasOverlay } from "@tooee/overlays"
+import { useActions, useProvideCommandContext } from "@tooee/commands"
+import type { ActionDefinition } from "@tooee/commands"
+import {
+  useThemeCommands,
+  useQuitCommand,
+  useCopyCommand,
+  useModalNavigationCommands,
+  useCommandPalette,
+} from "@tooee/shell"
+import { useConfig } from "@tooee/config"
+import { marked } from "marked"
+import {
+  getTextContent,
+  isBuiltinContent,
+  isCustomContent,
+  type AnyContent,
+  type Content,
+  type ContentFormat,
+  type ContentProvider,
+  type ContentChunk,
+  type ContentRenderer,
+  type CustomContent,
+} from "./types.js"
+
+interface ViewProps {
+  contentProvider: ContentProvider
+  actions?: ActionDefinition[]
+  renderers?: Record<string, ContentRenderer>
+}
+
+function isAsyncIterable(value: unknown): value is AsyncIterable<ContentChunk> {
+  return value != null && typeof value === "object" && Symbol.asyncIterator in value
+}
+
+function createEmptyContent(format: string, title?: string): AnyContent {
+  switch (format) {
+    case "markdown":
+      return { format, markdown: "", title }
+    case "code":
+      return { format, code: "", title }
+    case "text":
+      return { format, text: "", title }
+    case "image":
+      return { format, src: "", title }
+    case "table":
+      return { format, columns: [], rows: [], title }
+    default:
+      return { format, data: undefined, title } as CustomContent
+  }
+}
+
+function ensureContentFormat<F extends ContentFormat>(
+  current: AnyContent | null,
+  format: F,
+  title?: string,
+): Extract<Content, { format: F }> {
+  if (!current || current.format !== format) {
+    return createEmptyContent(format, title) as Extract<Content, { format: F }>
+  }
+  return current as Extract<Content, { format: F }>
+}
+
+function applyContentChunk(
+  current: AnyContent | null,
+  chunk: ContentChunk,
+  title?: string,
+): AnyContent {
+  switch (chunk.type) {
+    case "replace":
+      return chunk.content
+    case "append":
+      if (chunk.format === "markdown") {
+        const target = ensureContentFormat(current, "markdown", title)
+        return { ...target, markdown: target.markdown + chunk.data }
+      }
+      if (chunk.format === "code") {
+        const target = ensureContentFormat(current, "code", title)
+        return {
+          ...target,
+          code: target.code + chunk.data,
+          language: chunk.language ?? target.language,
+        }
+      }
+      {
+        const target = ensureContentFormat(current, "text", title)
+        return { ...target, text: target.text + chunk.data }
+      }
+    case "patch":
+      return chunk.apply(current)
+    default:
+      return current ?? createEmptyContent("markdown", title)
+  }
+}
+
+export function View({ contentProvider, actions, renderers }: ViewProps) {
+  const { theme } = useTheme()
+  const config = useConfig()
+  const [content, setContent] = useState<AnyContent | null>(null)
+  const [streaming, setStreaming] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const scrollRef = useRef<ScrollBoxRenderable>(null)
+  const [reloadTrigger, setReloadTrigger] = useState(0)
+  const reload = useCallback(() => setReloadTrigger((n) => n + 1), [])
+
+  useEffect(() => {
+    setError(null)
+    setStreaming(false)
+    const loaded = contentProvider.load()
+
+    if (isAsyncIterable(loaded)) {
+      const fallbackFormat = contentProvider.format ?? "markdown"
+      const title = contentProvider.title
+      let cancelled = false
+      let current: AnyContent | null = createEmptyContent(fallbackFormat, title)
+      setContent(current)
+      setStreaming(true)
+
+      ;(async () => {
+        try {
+          for await (const chunk of loaded) {
+            if (cancelled) break
+            current = applyContentChunk(current, chunk, title)
+            setContent(current)
+          }
+        } catch (error) {
+          if (!cancelled && error instanceof Error) {
+            setError(error.message)
+          }
+        } finally {
+          if (!cancelled) {
+            setStreaming(false)
+          }
+        }
+      })()
+
+      return () => {
+        cancelled = true
+      }
+    }
+
+    if (loaded instanceof Promise) {
+      let active = true
+      loaded
+        .then((value) => {
+          if (active) setContent(value)
+        })
+        .catch((error: Error) => {
+          if (active) setError(error.message)
+        })
+      return () => {
+        active = false
+      }
+    }
+
+    setContent(loaded)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentProvider, reloadTrigger])
+
+  const TABLE_VISUAL_HEADER_OFFSET = 3
+  const TABLE_SEARCH_HEADER_OFFSET = 1
+
+  const textContent = useMemo(() => (content ? getTextContent(content) : ""), [content])
+
+  const lineCount = useMemo(() => {
+    if (!content) return 0
+    if (isBuiltinContent(content) && content.format === "table") {
+      return content.rows.length + 3
+    }
+    return textContent.split("\n").length
+  }, [content, textContent])
+
+  const { blockCount, blockLineMap } = useMemo(() => {
+    if (!content) return { blockCount: undefined, blockLineMap: undefined }
+    if (!isBuiltinContent(content)) return { blockCount: undefined, blockLineMap: undefined }
+
+    if (content.format === "table") {
+      const map = content.rows.map((_: unknown, i: number) => i + TABLE_VISUAL_HEADER_OFFSET)
+      return { blockCount: content.rows.length, blockLineMap: map }
+    }
+
+    if (content.format !== "markdown") {
+      return { blockCount: undefined, blockLineMap: undefined }
+    }
+
+    const tokens = marked.lexer(content.markdown)
+    const blocks = tokens.filter((t) => t.type !== "space")
+    const lineMap: number[] = []
+    let lineOffset = 0
+    for (const token of tokens) {
+      if (token.type === "space") {
+        if ("raw" in token && typeof token.raw === "string") {
+          lineOffset += token.raw.split("\n").length - 1
+        }
+        continue
+      }
+      lineMap.push(lineOffset)
+      if ("raw" in token && typeof token.raw === "string") {
+        lineOffset += token.raw.split("\n").length - 1
+      }
+    }
+    return { blockCount: blocks.length, blockLineMap: lineMap }
+  }, [content])
+
+  const nav = useModalNavigationCommands({
+    totalLines: lineCount,
+    getText: () => (content ? textContent : undefined),
+    blockCount,
+    blockLineMap,
+    searchLineOffset: content?.format === "table" ? TABLE_SEARCH_HEADER_OFFSET : 0,
+    multiSelect: true,
+  })
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = nav.scrollOffset
+    }
+  }, [nav.scrollOffset])
+
+  const { name: themeName } = useThemeCommands()
+  useQuitCommand()
+  useCopyCommand({
+    getText: () => (content ? textContent : undefined),
+  })
+
+  const _palette = useCommandPalette()
+
+  useActions(actions)
+  const hasOverlay = useHasOverlay()
+
+  function getActiveRow(): Record<string, unknown> | undefined {
+    if (!content || !isBuiltinContent(content) || content.format !== "table") return undefined
+    if (!nav.cursor) return undefined
+    return content.rows[nav.cursor.line]
+  }
+
+  function getSelectedRows(): Record<string, unknown>[] {
+    if (!content || !isBuiltinContent(content) || content.format !== "table") return []
+    if (nav.toggledIndices.size) {
+      return Array.from(nav.toggledIndices)
+        .map((i) => content.rows[i])
+        .filter(Boolean)
+    }
+    if (nav.selection) {
+      const start = nav.selection.start.line
+      const end = nav.selection.end.line
+      return content.rows.slice(start, end + 1)
+    }
+    return []
+  }
+
+  useProvideCommandContext(() => ({
+    view: {
+      content,
+      format: content?.format,
+      cursor: nav.cursor,
+      selection: nav.selection,
+      mode: nav.mode,
+      activeRow: getActiveRow(),
+      selectedRows: getSelectedRows(),
+      toggledIndices: nav.toggledIndices,
+      reload,
+    },
+  }))
+
+  const matchingLinesSet = useMemo(
+    () => (nav.matchingLines.length > 0 ? new Set<number>(nav.matchingLines) : undefined),
+    [nav.matchingLines],
+  )
+  const currentMatchLine =
+    nav.matchingLines.length > 0 ? nav.matchingLines[nav.currentMatchIndex] : undefined
+
+  // For markdown: convert matching lines to matching blocks
+  const matchingBlocks = useMemo(() => {
+    if (!matchingLinesSet || !blockLineMap || blockLineMap.length === 0) return undefined
+    if (content?.format === "table") return undefined // table uses matchingRows instead
+    const blocks = new Set<number>()
+    for (const line of matchingLinesSet) {
+      let blockIdx = 0
+      for (let i = blockLineMap.length - 1; i >= 0; i--) {
+        if (blockLineMap[i] <= line) {
+          blockIdx = i
+          break
+        }
+      }
+      blocks.add(blockIdx)
+    }
+    return blocks.size > 0 ? blocks : undefined
+  }, [matchingLinesSet, blockLineMap, content?.format])
+
+  const currentMatchBlock = useMemo(() => {
+    if (currentMatchLine == null || !blockLineMap || blockLineMap.length === 0) return undefined
+    if (content?.format === "table") return undefined
+    for (let i = blockLineMap.length - 1; i >= 0; i--) {
+      if (blockLineMap[i] <= currentMatchLine) return i
+    }
+    return 0
+  }, [currentMatchLine, blockLineMap, content?.format])
+
+  // For table: convert matching lines to matching row indices
+  const matchingRowsSet = useMemo(() => {
+    if (!matchingLinesSet || content?.format !== "table") return undefined
+    const rows = new Set<number>()
+    for (const line of matchingLinesSet) {
+      const row = line - TABLE_SEARCH_HEADER_OFFSET
+      if (row >= 0) rows.add(row)
+    }
+    return rows.size > 0 ? rows : undefined
+  }, [matchingLinesSet, content?.format])
+
+  const currentMatchRow = useMemo(() => {
+    if (content?.format !== "table" || currentMatchLine == null) return undefined
+    const row = currentMatchLine - TABLE_SEARCH_HEADER_OFFSET
+    return row >= 0 ? row : undefined
+  }, [content?.format, currentMatchLine])
+
+  const toggledBlocks = useMemo(() => {
+    if (content?.format !== "markdown" || nav.toggledIndices.size === 0) return undefined
+    return new Set<number>(nav.toggledIndices)
+  }, [content?.format, nav.toggledIndices])
+
+  const toggledRows = useMemo(() => {
+    if (content?.format !== "table" || nav.toggledIndices.size === 0) return undefined
+    return new Set<number>(nav.toggledIndices)
+  }, [content?.format, nav.toggledIndices])
+
+  const toggledLines = useMemo(() => {
+    if (!content || (content.format !== "code" && content.format !== "text")) return undefined
+    return nav.toggledIndices.size > 0 ? new Set<number>(nav.toggledIndices) : undefined
+  }, [content, nav.toggledIndices])
+
+  if (error) {
+    return (
+      <box style={{ flexDirection: "column" }}>
+        <text content={`Error: ${error}`} fg={theme.error} />
+      </box>
+    )
+  }
+
+  if (!content) {
+    return (
+      <box>
+        <text content="Loading..." fg={theme.textMuted} />
+      </box>
+    )
+  }
+
+  const cursorLine = nav.cursor?.line ?? undefined
+  const selectionStart = nav.selection?.start.line ?? undefined
+  const selectionEnd = nav.selection?.end.line ?? undefined
+  const gutterConfig = config.view?.gutter
+
+  const renderContent = () => {
+    // Custom content: use registered renderer or fall back to text
+    if (isCustomContent(content)) {
+      const customRenderer = renderers?.[content.format]
+      if (customRenderer) {
+        return customRenderer({
+          content,
+          lineCount,
+          cursor: cursorLine,
+          selectionStart,
+          selectionEnd,
+        })
+      }
+      // No renderer for this custom format — fall back to text
+      const text = getTextContent(content)
+      return (
+        <CodeView
+          content={text}
+          showLineNumbers={false}
+          cursor={cursorLine}
+          selectionStart={selectionStart}
+          selectionEnd={selectionEnd}
+        />
+      )
+    }
+
+    // Built-in formats
+    switch (content.format) {
+      case "markdown":
+        return (
+          <MarkdownView
+            content={content.markdown}
+            activeBlock={cursorLine}
+            selectedBlocks={
+              selectionStart != null && selectionEnd != null
+                ? { start: selectionStart, end: selectionEnd }
+                : undefined
+            }
+            matchingBlocks={matchingBlocks}
+            currentMatchBlock={currentMatchBlock}
+            toggledBlocks={toggledBlocks}
+          />
+        )
+      case "code":
+        return (
+          <CodeView
+            content={content.code}
+            language={content.language}
+            showLineNumbers={gutterConfig ?? true}
+            cursor={cursorLine}
+            selectionStart={selectionStart}
+            selectionEnd={selectionEnd}
+            matchingLines={matchingLinesSet}
+            currentMatchLine={currentMatchLine}
+            toggledLines={toggledLines}
+          />
+        )
+      case "text":
+        return (
+          <CodeView
+            content={content.text}
+            showLineNumbers={gutterConfig ?? false}
+            cursor={cursorLine}
+            selectionStart={selectionStart}
+            selectionEnd={selectionEnd}
+            matchingLines={matchingLinesSet}
+            currentMatchLine={currentMatchLine}
+            toggledLines={toggledLines}
+          />
+        )
+      case "image":
+        return <ImageView src={content.src} />
+      case "table":
+        return (
+          <Table
+            columns={content.columns}
+            rows={content.rows}
+            cursor={cursorLine}
+            selectionStart={selectionStart}
+            selectionEnd={selectionEnd}
+            matchingRows={matchingRowsSet}
+            currentMatchRow={currentMatchRow}
+            toggledRows={toggledRows}
+          />
+        )
+    }
+  }
+
+  const selectionCount =
+    nav.selection != null ? nav.selection.end.line - nav.selection.start.line + 1 : 0
+  const toggledCount = nav.toggledIndices.size
+  const selectionItems =
+    toggledCount > 0
+      ? [{ label: "Selected:", value: String(toggledCount) }]
+      : selectionCount > 0
+        ? [{ label: "Selected:", value: String(selectionCount) }]
+        : []
+
+  const statusItems = [
+    { label: "Theme:", value: themeName },
+    { label: "Format:", value: content.format },
+    ...(isBuiltinContent(content) && content.format === "table"
+      ? [
+          { label: "Rows:", value: String(content.rows.length) },
+          { label: "Cols:", value: String(content.columns.length) },
+        ]
+      : [{ label: "Lines:", value: String(lineCount) }]),
+    { label: "Mode:", value: nav.mode },
+    { label: "Scroll:", value: String(nav.scrollOffset) },
+    ...selectionItems,
+    ...(streaming ? [{ label: "Status:", value: "streaming" }] : []),
+    ...(nav.searchActive ? [{ label: "Search:", value: nav.searchQuery }] : []),
+  ]
+
+  return (
+    <AppLayout
+      titleBar={
+        content.title
+          ? { title: content.title, subtitle: content.format }
+          : { title: content.format }
+      }
+      statusBar={{ items: statusItems }}
+      scrollRef={scrollRef}
+      scrollProps={{ focused: !nav.searchActive && !hasOverlay }}
+      searchBar={{
+        active: nav.searchActive,
+        query: nav.searchQuery,
+        onQueryChange: nav.setSearchQuery,
+        onSubmit: nav.submitSearch,
+        onCancel: () => {
+          nav.setSearchQuery("")
+        },
+        matchCount: nav.matchingLines.length,
+        currentMatch: nav.currentMatchIndex,
+      }}
+    >
+      {renderContent()}
+    </AppLayout>
+  )
+}

package/src/default-provider.ts

@@ -0,0 +1,110 @@
+import { parseAuto } from "@tooee/renderers"
+import type { Content, ContentFormat, ContentProvider } from "./types.js"
+
+function detectFormat(filePath: string): { format: ContentFormat; language?: string } {
+  const ext = filePath.split(".").pop()?.toLowerCase()
+  if (!ext) return { format: "text" }
+
+  const imageExts = new Set(["png", "jpg", "jpeg", "gif", "webp", "bmp", "tiff", "tif"])
+  if (imageExts.has(ext)) return { format: "image" }
+
+  const tableExts = new Set(["csv", "tsv"])
+  if (tableExts.has(ext)) return { format: "table" }
+
+  const markdownExts = new Set(["md", "mdx", "markdown"])
+  if (markdownExts.has(ext)) return { format: "markdown" }
+
+  const codeExts: Record<string, string> = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    py: "python",
+    rs: "rust",
+    go: "go",
+    rb: "ruby",
+    sh: "bash",
+    bash: "bash",
+    zsh: "zsh",
+    json: "json",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "toml",
+    css: "css",
+    html: "html",
+    sql: "sql",
+    c: "c",
+    cpp: "cpp",
+    h: "c",
+    hpp: "cpp",
+    java: "java",
+    kt: "kotlin",
+    swift: "swift",
+  }
+
+  const language = codeExts[ext]
+  if (language) return { format: "code", language }
+
+  return { format: "text" }
+}
+
+export function createFileProvider(filePath: string): ContentProvider {
+  return {
+    async load(): Promise<Content> {
+      const { format, language } = detectFormat(filePath)
+      const title = filePath.split("/").pop()
+
+      if (format === "image") {
+        return { format: "image", src: filePath, title }
+      }
+
+      const file = Bun.file(filePath)
+      if (format === "table") {
+        const text = await file.text()
+        const parsed = parseAuto(text)
+        return { format: "table", columns: parsed.columns, rows: parsed.rows, title }
+      }
+      const text = await file.text()
+      switch (format) {
+        case "markdown":
+          return { format: "markdown", markdown: text, title }
+        case "code":
+          return { format: "code", code: text, language, title }
+        case "text":
+        default:
+          return { format: "text", text, title }
+      }
+    },
+  }
+}
+
+export function createStdinProvider(): ContentProvider {
+  return {
+    async load(): Promise<Content> {
+      const text = await new Response(Bun.stdin.stream() as unknown as ReadableStream).text()
+      return { format: "markdown", markdown: text, title: "stdin" }
+    },
+  }
+}
+
+export function createTableFileProvider(filePath: string): ContentProvider {
+  return {
+    async load(): Promise<Content> {
+      const title = filePath.split("/").pop()
+      const file = Bun.file(filePath)
+      const text = await file.text()
+      const parsed = parseAuto(text)
+      return { format: "table", columns: parsed.columns, rows: parsed.rows, title }
+    },
+  }
+}
+
+export function createTableStdinProvider(): ContentProvider {
+  return {
+    async load(): Promise<Content> {
+      const text = await new Response(Bun.stdin.stream() as unknown as ReadableStream).text()
+      const parsed = parseAuto(text)
+      return { format: "table", columns: parsed.columns, rows: parsed.rows, title: "stdin" }
+    },
+  }
+}

package/src/directory-provider.ts

@@ -0,0 +1,67 @@
+import { readdirSync, statSync } from "fs"
+import { join } from "path"
+import type { ContentProvider } from "./types.js"
+import { createFileProvider } from "./default-provider.js"
+
+const SUPPORTED_EXTENSIONS = new Set([
+  "md",
+  "mdx",
+  "markdown",
+  "ts",
+  "tsx",
+  "js",
+  "jsx",
+  "json",
+  "txt",
+  "css",
+  "html",
+  "yaml",
+  "yml",
+  "toml",
+  "sh",
+  "bash",
+  "zsh",
+  "go",
+  "rs",
+  "py",
+  "rb",
+  "c",
+  "cpp",
+  "h",
+  "hpp",
+  "java",
+  "kt",
+  "swift",
+  "sql",
+])
+
+export interface DirectoryEntry {
+  name: string
+  path: string
+}
+
+export function listDirectoryFiles(dirPath: string): DirectoryEntry[] {
+  const entries = readdirSync(dirPath)
+  const files: DirectoryEntry[] = []
+
+  for (const entry of entries) {
+    if (entry.startsWith(".")) continue
+    const fullPath = join(dirPath, entry)
+    try {
+      const stat = statSync(fullPath)
+      if (!stat.isFile()) continue
+    } catch {
+      continue
+    }
+    const ext = entry.split(".").pop()?.toLowerCase()
+    if (!ext || !SUPPORTED_EXTENSIONS.has(ext)) continue
+    files.push({ name: entry, path: fullPath })
+  }
+
+  files.sort((a, b) => a.name.localeCompare(b.name))
+  return files
+}
+
+export function createDirectoryFileProvider(filePath: string): ContentProvider {
+  return createFileProvider(filePath)
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export { View } from "./View.jsx"
+export { DirectoryView } from "./DirectoryView.jsx"
+export { launch, launchDirectory } from "./launch.jsx"
+export type { ViewLaunchOptions } from "./launch.jsx"
+export { createFileProvider, createStdinProvider, createTableFileProvider, createTableStdinProvider } from "./default-provider.js"
+export { listDirectoryFiles } from "./directory-provider.js"
+export type { DirectoryEntry } from "./directory-provider.js"
+export type {
+  AnyContent,
+  Content,
+  ContentChunk,
+  ContentFormat,
+  ContentProvider,
+  ContentRenderer,
+  ContentRendererProps,
+  CustomContent,
+  ViewContent,
+  ViewContentProvider,
+  ColumnDef,
+  TableRow,
+} from "./types.js"
+export { getTextContent, isBuiltinContent, isCustomContent } from "./types.js"