@tooee/view 0.1.11 → 0.1.14

package/src/hooks/useContentLoader.ts

@@ -0,0 +1,147 @@
+import { useState, useEffect } from "react"
+import type { MarkSet } from "@tooee/marks"
+import type {
+  AnyContent,
+  Content,
+  ContentFormat,
+  ContentProvider,
+  ContentChunk,
+  CustomContent,
+} from "../types.js"
+
+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 useContentLoader(contentProvider: ContentProvider, reloadTrigger: number) {
+  const [content, setContent] = useState<AnyContent | null>(null)
+  const [streaming, setStreaming] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [providerMarks, setProviderMarks] = useState<MarkSet[]>([])
+
+  useEffect(() => {
+    setError(null)
+    setStreaming(false)
+    // Reset provider marks on reload; initialize with static marks if provided
+    setProviderMarks(contentProvider.marks ?? [])
+    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
+            if (chunk.type === "marks") {
+              if (cancelled) break
+              // Streamed mark set: merge by replacing any existing set with same namespace
+              setProviderMarks((prev) => {
+                const filtered = prev.filter((s) => s.namespace !== chunk.set.namespace)
+                return [...filtered, chunk.set]
+              })
+              continue
+            }
+            current = applyContentChunk(current, chunk, title)
+            setContent(current)
+          }
+        } catch (err) {
+          if (!cancelled && err instanceof Error) {
+            setError(err.message)
+          }
+        } finally {
+          if (!cancelled) {
+            setStreaming(false)
+          }
+        }
+      })()
+
+      return () => {
+        cancelled = true
+      }
+    }
+
+    if (loaded instanceof Promise) {
+      let active = true
+      loaded
+        .then((value) => {
+          if (active) setContent(value)
+        })
+        .catch((err: Error) => {
+          if (active) setError(err.message)
+        })
+      return () => {
+        active = false
+      }
+    }
+
+    setContent(loaded)
+  }, [contentProvider, reloadTrigger])
+
+  return { content, streaming, error, providerMarks, setProviderMarks }
+}

package/src/hooks/useMarkState.ts

@@ -0,0 +1,99 @@
+import { useMemo } from "react"
+import { MarkSetBuilder, createMarkState, MarkPriorities } from "@tooee/marks"
+import type { MarkSet, MarkState } from "@tooee/marks"
+import type { NavigationState, SearchState } from "@tooee/shell"
+import type { ResolvedTheme } from "@tooee/themes"
+
+interface UseMarkStateParams {
+  nav: Pick<NavigationState, "cursor" | "selection" | "toggledIndices">
+  search: Pick<SearchState, "matchingLines" | "currentMatchIndex">
+  theme: ResolvedTheme
+  providerMarks: MarkSet[]
+  userMarks: MarkSet[]
+}
+
+export function useMarkState({
+  nav,
+  search,
+  theme,
+  providerMarks,
+  userMarks,
+}: UseMarkStateParams): MarkState | undefined {
+  return useMemo(() => {
+    const sets: MarkSet[] = []
+
+    // Search matches
+    if (search.matchingLines.length > 0) {
+      const mapped = new Set(search.matchingLines)
+      const builder = new MarkSetBuilder()
+      for (const idx of mapped) {
+        builder.addLine(idx, {
+          background: theme.warning,
+          signBefore: "\u25CF",
+          foreground: theme.warning,
+        })
+      }
+      sets.push(builder.build("search", MarkPriorities.SEARCH_MATCH))
+    }
+
+    // Toggled lines
+    if (nav.toggledIndices.size > 0) {
+      const mapped = new Set(nav.toggledIndices)
+      const builder = new MarkSetBuilder()
+      for (const idx of mapped) {
+        builder.addLine(idx, { background: theme.backgroundPanel })
+      }
+      sets.push(builder.build("toggled", MarkPriorities.TOGGLED))
+    }
+
+    // Selection range
+    if (nav.selection) {
+      const builder = new MarkSetBuilder()
+      builder.addRange(
+        { line: nav.selection.start },
+        { line: nav.selection.end },
+        { background: theme.selection },
+      )
+      sets.push(builder.build("selection", MarkPriorities.SELECTION))
+    }
+
+    // Current match highlight
+    if (search.matchingLines.length > 0) {
+      const currentLine = search.matchingLines[search.currentMatchIndex]
+      if (currentLine != null) {
+        const builder = new MarkSetBuilder()
+        builder.addLine(currentLine, {
+          background: theme.primary,
+          signBefore: "\u25CF",
+          foreground: theme.primary,
+        })
+        sets.push(builder.build("currentMatch", MarkPriorities.CURRENT_MATCH))
+      }
+    }
+
+    // Cursor
+    if (nav.cursor !== null) {
+      const builder = new MarkSetBuilder()
+      builder.addLine(nav.cursor, {
+        background: theme.cursorLine,
+        signBefore: "\u25B8",
+        foreground: theme.primary,
+      })
+      sets.push(builder.build("cursor", MarkPriorities.CURSOR))
+    }
+
+    // Provider and user marks
+    sets.push(...providerMarks, ...userMarks)
+
+    return sets.length > 0 ? createMarkState(sets) : undefined
+  }, [
+    search.matchingLines,
+    search.currentMatchIndex,
+    nav.toggledIndices,
+    nav.selection,
+    nav.cursor,
+    theme,
+    providerMarks,
+    userMarks,
+  ])
+}

package/src/hooks/useViewCommandContext.ts

@@ -0,0 +1,50 @@
+import { useProvideCommandContext, useMode } from "@tooee/commands"
+import type { NavigationState } from "@tooee/shell"
+import type { MarkSet } from "@tooee/marks"
+import type { AnyContent } from "../types.js"
+
+interface UseViewCommandContextParams {
+  content: AnyContent
+  nav: NavigationState
+  reload: () => void
+  providerMarks: MarkSet[]
+  userMarks: MarkSet[]
+  setMarkSet: (set: MarkSet) => void
+  clearMarkNamespace: (namespace: string) => void
+  clearAllUserMarks: () => void
+  /** Extra fields merged into the view context (e.g. activeRow, selectedRows for table) */
+  extras?: Record<string, unknown>
+}
+
+export function useViewCommandContext({
+  content,
+  nav,
+  reload,
+  providerMarks,
+  userMarks,
+  setMarkSet,
+  clearMarkNamespace,
+  clearAllUserMarks,
+  extras,
+}: UseViewCommandContextParams) {
+  const mode = useMode()
+  useProvideCommandContext(() => ({
+    view: {
+      content,
+      format: content.format,
+      cursor: nav.cursor,
+      selection: nav.selection,
+      mode,
+      toggledIndices: nav.toggledIndices,
+      reload,
+      marks: {
+        setMarkSet,
+        clearNamespace: clearMarkNamespace,
+        clearAll: clearAllUserMarks,
+        userMarks,
+        providerMarks,
+      },
+      ...extras,
+    },
+  }))
+}

package/src/hooks/useViewCommands.ts

@@ -0,0 +1,36 @@
+import { useState } from "react"
+import {
+  useThemeCommands,
+  useQuitCommand,
+  useCopyCommand,
+  useToggleLineNumbersCommand,
+} from "@tooee/shell"
+import { useActions } from "@tooee/commands"
+import type { ActionDefinition } from "@tooee/commands"
+import { useConfig } from "@tooee/config"
+import type { AnyContent } from "../types.js"
+
+interface UseViewCommandsParams {
+  content: AnyContent | null
+  textContent: string
+  actions?: ActionDefinition[]
+}
+
+export function useViewCommands({ content, textContent, actions }: UseViewCommandsParams) {
+  const config = useConfig()
+  const [showLineNumbers, setShowLineNumbers] = useState(config.view?.gutter ?? true)
+
+  const { name: themeName } = useThemeCommands()
+  useQuitCommand()
+  useCopyCommand({
+    getText: () => (content ? textContent : undefined),
+  })
+  useToggleLineNumbersCommand({
+    showLineNumbers,
+    onToggle: () => setShowLineNumbers((v) => !v),
+  })
+
+  useActions(actions)
+
+  return { themeName, showLineNumbers }
+}

package/src/index.ts

@@ -2,7 +2,12 @@ export { View } from "./View.js"
 export { DirectoryView } from "./DirectoryView.js"
 export { launch, launchDirectory } from "./launch.js"
 export type { ViewLaunchOptions } from "./launch.js"
-export { createFileProvider, createStdinProvider, createTableFileProvider, createTableStdinProvider } from "./default-provider.js"
+export {
+  createFileProvider,
+  createStdinProvider,
+  createTableFileProvider,
+  createTableStdinProvider,
+} from "./default-provider.js"
 export { listDirectoryFiles } from "./directory-provider.js"
 export type { DirectoryEntry } from "./directory-provider.js"
 export type {

package/src/launch.tsx

@@ -26,10 +26,5 @@ export async function launch(options: ViewLaunchOptions): Promise<void> {
 }
 
 export async function launchDirectory(options: DirectoryLaunchOptions): Promise<void> {
-  await launchCli(
-    <DirectoryView
-      dirPath={options.dirPath}
-      actions={options.actions}
-    />,
-  )
+  await launchCli(<DirectoryView dirPath={options.dirPath} actions={options.actions} />)
 }

package/src/types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react"
 import type { ColumnDef, TableRow } from "@tooee/renderers"
+import type { MarkSet, MarkState } from "@tooee/marks"
 
 // === Built-in content types ===
 
@@ -59,6 +60,8 @@ export interface ContentRendererProps {
   cursor?: number
   selectionStart?: number
   selectionEnd?: number
+  /** Combined mark state (nav + provider + user marks) */
+  marks?: MarkState
 }
 
 export type ContentRenderer = (props: ContentRendererProps) => ReactNode
@@ -82,6 +85,10 @@ export type ContentChunk =
       type: "patch"
       apply: (current: AnyContent | null) => AnyContent
     }
+  | {
+      type: "marks"
+      set: MarkSet
+    }
 
 // === Provider ===
 
@@ -89,6 +96,8 @@ export interface ContentProvider {
   load(): AnyContent | Promise<AnyContent> | AsyncIterable<ContentChunk>
   format?: string
   title?: string
+  /** Static marks to apply to the content. Merged with nav marks in View. */
+  marks?: MarkSet[]
 }
 
 // === Compat aliases ===