@tooee/view 0.1.11 → 0.1.12

package/src/components/subviews/CodeSubview.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useRef } from "react"
+import { CodeView, type RowDocumentRenderable } from "@tooee/renderers"
+import { useTheme } from "@tooee/themes"
+import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
+import { findMatchingLines, useCopy, useNavigation, useSearch } from "@tooee/shell"
+import type { CodeContent, TextContent } from "../../types.js"
+import { useMarkState } from "../../hooks/useMarkState.js"
+import { useViewCommands } from "../../hooks/useViewCommands.js"
+import { SubviewLayout } from "../SubviewLayout.js"
+import type { SubviewProps } from "./types.js"
+
+interface CodeSubviewProps extends SubviewProps {
+  content: CodeContent | TextContent
+}
+
+export function CodeSubview({
+  content,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  reload,
+  streaming,
+  actions,
+}: CodeSubviewProps) {
+  const { theme } = useTheme()
+  const docRef = useRef<RowDocumentRenderable>(null)
+  const textContent = content.format === "code" ? content.code : content.text
+  const lines = useMemo(() => textContent.split("\n"), [textContent])
+  const lineCount = lines.length
+
+  const nav = useNavigation({
+    rowCount: lineCount,
+    multiSelect: true,
+  })
+  const search = useSearch({
+    match: (query) => findMatchingLines(textContent, query),
+    onJump: nav.setCursor,
+  })
+  useCopy({
+    getRowText: (index) => lines[index] ?? "",
+    cursor: nav.cursor,
+    selection: nav.selection,
+    toggledIndices: nav.toggledIndices,
+  })
+  const layoutNav = { ...nav, ...search }
+
+  useEffect(() => {
+    if (nav.cursor) {
+      docRef.current?.scrollToRow(nav.cursor.line, "nearest")
+    }
+  }, [nav.cursor])
+
+  const { themeName, showLineNumbers } = useViewCommands({ content, textContent, actions })
+
+  const markState = useMarkState({
+    nav,
+    search,
+    theme,
+    providerMarks,
+    userMarks,
+  })
+
+  useViewCommandContext({
+    content,
+    nav,
+    reload,
+    providerMarks,
+    userMarks,
+    setMarkSet,
+    clearMarkNamespace,
+    clearAllUserMarks,
+  })
+
+  const text = content.format === "code" ? content.code : content.text
+
+  const extraStatusItems = useMemo(() => {
+    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) }]
+          : []
+    return [
+      { label: "Format:", value: content.format },
+      { label: "Lines:", value: String(lineCount) },
+      ...selectionItems,
+    ]
+  }, [content.format, lineCount, nav.selection, nav.toggledIndices])
+
+  return (
+    <SubviewLayout
+      content={content}
+      nav={layoutNav}
+      streaming={streaming}
+      themeName={themeName}
+      extraStatusItems={extraStatusItems}
+    >
+      <CodeView
+        content={text}
+        language={content.format === "code" ? content.language : undefined}
+        showLineNumbers={showLineNumbers}
+        marks={markState}
+        docRef={docRef}
+      />
+    </SubviewLayout>
+  )
+}

package/src/components/subviews/CustomSubview.tsx

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useRef } from "react"
+import { CodeView, type RowDocumentRenderable } from "@tooee/renderers"
+import { useTheme } from "@tooee/themes"
+import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
+import { findMatchingLines, useCopy, useNavigation, useSearch } from "@tooee/shell"
+import { getTextContent, type CustomContent, type ContentRenderer } from "../../types.js"
+import { useMarkState } from "../../hooks/useMarkState.js"
+import { useViewCommands } from "../../hooks/useViewCommands.js"
+import { SubviewLayout } from "../SubviewLayout.js"
+import type { SubviewProps } from "./types.js"
+
+interface CustomSubviewProps extends SubviewProps {
+  content: CustomContent
+  renderers?: Record<string, ContentRenderer>
+}
+
+export function CustomSubview({
+  content,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  reload,
+  streaming,
+  actions,
+  renderers,
+}: CustomSubviewProps) {
+  const { theme } = useTheme()
+  const docRef = useRef<RowDocumentRenderable>(null)
+  const textContent = useMemo(() => getTextContent(content), [content])
+  const lines = useMemo(() => textContent.split("\n"), [textContent])
+  const lineCount = lines.length
+
+  const nav = useNavigation({
+    rowCount: lineCount,
+    multiSelect: true,
+  })
+  const search = useSearch({
+    match: (query) => findMatchingLines(textContent, query),
+    onJump: nav.setCursor,
+  })
+  useCopy({
+    getRowText: (index) => lines[index] ?? "",
+    cursor: nav.cursor,
+    selection: nav.selection,
+    toggledIndices: nav.toggledIndices,
+  })
+  const layoutNav = { ...nav, ...search }
+
+  useEffect(() => {
+    if (nav.cursor) {
+      docRef.current?.scrollToRow(nav.cursor.line, "nearest")
+    }
+  }, [nav.cursor])
+
+  const { themeName } = useViewCommands({ content, textContent, actions })
+
+  const markState = useMarkState({
+    nav,
+    search,
+    theme,
+    providerMarks,
+    userMarks,
+  })
+
+  useViewCommandContext({
+    content,
+    nav,
+    reload,
+    providerMarks,
+    userMarks,
+    setMarkSet,
+    clearMarkNamespace,
+    clearAllUserMarks,
+  })
+
+  const extraStatusItems = useMemo(() => {
+    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) }]
+          : []
+    return [
+      { label: "Format:", value: content.format },
+      { label: "Lines:", value: String(lineCount) },
+      ...selectionItems,
+    ]
+  }, [content.format, lineCount, nav.selection, nav.toggledIndices])
+
+  const customRenderer = renderers?.[content.format]
+  if (customRenderer) {
+    const cursorLine = nav.cursor?.line ?? undefined
+    const selectionStart = nav.selection?.start.line ?? undefined
+    const selectionEnd = nav.selection?.end.line ?? undefined
+
+    return (
+      <SubviewLayout
+        content={content}
+        nav={layoutNav}
+        streaming={streaming}
+        themeName={themeName}
+        extraStatusItems={extraStatusItems}
+      >
+        {customRenderer({
+          content,
+          lineCount,
+          cursor: cursorLine,
+          selectionStart,
+          selectionEnd,
+          marks: markState,
+        })}
+      </SubviewLayout>
+    )
+  }
+
+  // No renderer for this custom format -- fall back to text
+  const text = getTextContent(content)
+  return (
+    <SubviewLayout
+      content={content}
+      nav={layoutNav}
+      streaming={streaming}
+      themeName={themeName}
+      extraStatusItems={extraStatusItems}
+    >
+      <CodeView
+        content={text}
+        showLineNumbers={false}
+        marks={markState}
+        docRef={docRef}
+      />
+    </SubviewLayout>
+  )
+}

package/src/components/subviews/ImageSubview.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from "react"
+import { ImageView } from "@tooee/renderers"
+import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
+import { useNavigation, useSearch } from "@tooee/shell"
+import type { ImageContent } from "../../types.js"
+import { useViewCommands } from "../../hooks/useViewCommands.js"
+import { SubviewLayout } from "../SubviewLayout.js"
+import type { SubviewProps } from "./types.js"
+
+interface ImageSubviewProps extends SubviewProps {
+  content: ImageContent
+}
+
+export function ImageSubview({
+  content,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  reload,
+  streaming,
+  actions,
+}: ImageSubviewProps) {
+  const nav = useNavigation({
+    rowCount: 0,
+    multiSelect: false,
+  })
+  const search = useSearch({
+    match: () => [],
+    onJump: () => {},
+  })
+  const layoutNav = { ...nav, ...search }
+
+  const { themeName } = useViewCommands({ content, textContent: content.src, actions })
+
+  useViewCommandContext({
+    content,
+    nav,
+    reload,
+    providerMarks,
+    userMarks,
+    setMarkSet,
+    clearMarkNamespace,
+    clearAllUserMarks,
+  })
+
+  const extraStatusItems = useMemo(
+    () => [{ label: "Format:", value: content.format }],
+    [content.format],
+  )
+
+  return (
+    <SubviewLayout
+      content={content}
+      nav={layoutNav}
+      streaming={streaming}
+      themeName={themeName}
+      extraStatusItems={extraStatusItems}
+    >
+      <ImageView src={content.src} />
+    </SubviewLayout>
+  )
+}

package/src/components/subviews/MarkdownSubview.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useRef } from "react"
+import { marked } from "marked"
+import { MarkdownView, type RowDocumentRenderable } from "@tooee/renderers"
+import { useTheme } from "@tooee/themes"
+import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
+import { useCopy, useNavigation, useSearch } from "@tooee/shell"
+import type { MarkdownContent } from "../../types.js"
+import { useMarkState } from "../../hooks/useMarkState.js"
+import { useViewCommands } from "../../hooks/useViewCommands.js"
+import { SubviewLayout } from "../SubviewLayout.js"
+import type { SubviewProps } from "./types.js"
+
+interface MarkdownSubviewProps extends SubviewProps {
+  content: MarkdownContent
+}
+
+export function MarkdownSubview({
+  content,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  reload,
+  streaming,
+  actions,
+}: MarkdownSubviewProps) {
+  const { theme } = useTheme()
+  const docRef = useRef<RowDocumentRenderable>(null)
+  const textContent = content.markdown
+  const lineCount = useMemo(() => textContent.split("\n").length, [textContent])
+  const blocks = useMemo(
+    () => marked.lexer(content.markdown).filter((token) => token.type !== "space"),
+    [content.markdown],
+  )
+
+  const nav = useNavigation({
+    rowCount: blocks.length,
+    multiSelect: true,
+  })
+  const search = useSearch({
+    match: (query) => {
+      const lowerQuery = query.toLowerCase()
+      return blocks.flatMap((block, index) => {
+        const raw = "raw" in block && typeof block.raw === "string" ? block.raw : ""
+        return raw.toLowerCase().includes(lowerQuery) ? [index] : []
+      })
+    },
+    onJump: nav.setCursor,
+  })
+  useCopy({
+    getRowText: (index) => {
+      const block = blocks[index]
+      return block && "raw" in block && typeof block.raw === "string" ? block.raw : ""
+    },
+    cursor: nav.cursor,
+    selection: nav.selection,
+    toggledIndices: nav.toggledIndices,
+  })
+  const layoutNav = { ...nav, ...search }
+
+  useEffect(() => {
+    if (nav.cursor) {
+      docRef.current?.scrollToRow(nav.cursor.line, "nearest")
+    }
+  }, [nav.cursor])
+
+  const { themeName, showLineNumbers } = useViewCommands({ content, textContent, actions })
+
+  const markState = useMarkState({
+    nav,
+    search,
+    theme,
+    providerMarks,
+    userMarks,
+  })
+
+  useViewCommandContext({
+    content,
+    nav,
+    reload,
+    providerMarks,
+    userMarks,
+    setMarkSet,
+    clearMarkNamespace,
+    clearAllUserMarks,
+  })
+
+  const extraStatusItems = useMemo(() => {
+    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) }]
+          : []
+    return [
+      { label: "Format:", value: content.format },
+      { label: "Lines:", value: String(lineCount) },
+      ...selectionItems,
+    ]
+  }, [content.format, lineCount, nav.selection, nav.toggledIndices])
+
+  return (
+    <SubviewLayout
+      content={content}
+      nav={layoutNav}
+      streaming={streaming}
+      themeName={themeName}
+      extraStatusItems={extraStatusItems}
+    >
+      <MarkdownView
+        content={content.markdown}
+        showLineNumbers={showLineNumbers}
+        marks={markState}
+        docRef={docRef}
+      />
+    </SubviewLayout>
+  )
+}

package/src/components/subviews/TableSubview.tsx

@@ -0,0 +1,153 @@
+import { useEffect, useMemo, useRef } from "react"
+import { Table, type RowDocumentRenderable } from "@tooee/renderers"
+import { useTheme } from "@tooee/themes"
+import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
+import { useCopy, useNavigation, useSearch } from "@tooee/shell"
+import { getTextContent, type TableContent } from "../../types.js"
+import { useMarkState } from "../../hooks/useMarkState.js"
+import { useViewCommands } from "../../hooks/useViewCommands.js"
+import { SubviewLayout } from "../SubviewLayout.js"
+import type { SubviewProps } from "./types.js"
+
+interface TableSubviewProps extends SubviewProps {
+  content: TableContent
+}
+
+export function TableSubview({
+  content,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  reload,
+  streaming,
+  actions,
+}: TableSubviewProps) {
+  const { theme } = useTheme()
+  const docRef = useRef<RowDocumentRenderable>(null)
+  const textContent = useMemo(() => getTextContent(content), [content])
+
+  const nav = useNavigation({
+    rowCount: content.rows.length,
+    multiSelect: true,
+  })
+  const search = useSearch({
+    match: (query) => {
+      const lowerQuery = query.toLowerCase()
+      return content.rows.flatMap((row, index) =>
+        content.columns.some((column) => stringifyRowCell(row[column.key]).toLowerCase().includes(lowerQuery))
+          ? [index]
+          : [],
+      )
+    },
+    onJump: nav.setCursor,
+  })
+  useCopy({
+    getRowText: (index) =>
+      content.columns
+        .map((column) => stringifyRowCell(content.rows[index]?.[column.key]))
+        .join("\t"),
+    cursor: nav.cursor,
+    selection: nav.selection,
+    toggledIndices: nav.toggledIndices,
+  })
+  const layoutNav = { ...nav, ...search }
+
+  useEffect(() => {
+    if (nav.cursor) {
+      docRef.current?.scrollToRow(nav.cursor.line, "nearest")
+    }
+  }, [nav.cursor])
+
+  const { themeName, showLineNumbers } = useViewCommands({ content, textContent, actions })
+
+  const markState = useMarkState({
+    nav,
+    search,
+    theme,
+    providerMarks,
+    userMarks,
+  })
+
+  function getActiveRow(): Record<string, unknown> | undefined {
+    if (!nav.cursor) return undefined
+    return content.rows[nav.cursor.line]
+  }
+
+  function getSelectedRows(): Record<string, unknown>[] {
+    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 []
+  }
+
+  useViewCommandContext({
+    content,
+    nav,
+    reload,
+    providerMarks,
+    userMarks,
+    setMarkSet,
+    clearMarkNamespace,
+    clearAllUserMarks,
+    extras: {
+      activeRow: getActiveRow(),
+      selectedRows: getSelectedRows(),
+    },
+  })
+
+  const extraStatusItems = useMemo(() => {
+    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) }]
+          : []
+    return [
+      { label: "Format:", value: content.format },
+      { label: "Rows:", value: String(content.rows.length) },
+      { label: "Cols:", value: String(content.columns.length) },
+      ...selectionItems,
+    ]
+  }, [content.format, content.rows.length, content.columns.length, nav.selection, nav.toggledIndices])
+
+  return (
+    <SubviewLayout
+      content={content}
+      nav={layoutNav}
+      streaming={streaming}
+      themeName={themeName}
+      extraStatusItems={extraStatusItems}
+    >
+      <Table
+        columns={content.columns}
+        rows={content.rows}
+        showLineNumbers={showLineNumbers}
+        marks={markState}
+        docRef={docRef}
+      />
+    </SubviewLayout>
+  )
+}
+
+function stringifyRowCell(value: unknown): string {
+  if (value == null) return ""
+  if (typeof value === "string") return value
+  if (typeof value === "number" || typeof value === "boolean") return String(value)
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}

package/src/components/subviews/index.ts

@@ -0,0 +1,7 @@
+export { MarkdownSubview } from "./MarkdownSubview.js"
+export { CodeSubview } from "./CodeSubview.js"
+export { TableSubview } from "./TableSubview.js"
+export { ImageSubview } from "./ImageSubview.js"
+export { CustomSubview } from "./CustomSubview.js"
+export { SubviewLayout } from "../SubviewLayout.js"
+export type { SubviewProps } from "./types.js"

package/src/components/subviews/types.ts

@@ -0,0 +1,15 @@
+import type { MarkSet } from "@tooee/marks"
+import type { ActionDefinition } from "@tooee/commands"
+import type { AnyContent } from "../../types.js"
+
+export interface SubviewProps {
+  content: AnyContent
+  providerMarks: MarkSet[]
+  userMarks: MarkSet[]
+  setMarkSet: (set: MarkSet) => void
+  clearMarkNamespace: (namespace: string) => void
+  clearAllUserMarks: () => void
+  reload: () => void
+  streaming: boolean
+  actions?: ActionDefinition[]
+}

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useContentLoader } from "./useContentLoader.js"
+export { useMarkState } from "./useMarkState.js"
+export { useViewCommands } from "./useViewCommands.js"
+export { useViewCommandContext } from "./useViewCommandContext.js"