@tooee/view 0.1.22 → 0.2.0

package/src/components/subviews/CustomSubview.tsx

@@ -1,14 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef } from "react"
-import { CodeView, type RowDocumentRenderable } from "@tooee/renderers"
-import { useTheme } from "@tooee/themes"
-import { useHasModalOverlay } from "@tooee/overlays"
-import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
-import { useCopy, useNavigation } from "@tooee/shell"
-import { findMatchingLines, useSearch } from "@tooee/search"
+import { useMemo } from "react"
+import { CodeView, sourceLines, sourceLineAdapter, type SourceLineRow } from "@tooee/renderers"
+import { useDocumentController } 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 { useContentCommands } from "../../hooks/useContentCommands.js"
+import { ViewScreen } from "../ViewScreen.js"
 import type { SubviewProps } from "./types.js"
 
 interface CustomSubviewProps extends SubviewProps {
@@ -18,134 +13,48 @@ interface CustomSubviewProps extends SubviewProps {
 
 export function CustomSubview({
   content,
-  providerMarks,
-  userMarks,
-  setMarkSet,
-  clearMarkNamespace,
-  clearAllUserMarks,
-  reload,
-  streaming,
+  decorations,
   actions,
   renderers,
+  ...screen
 }: CustomSubviewProps) {
-  const { theme } = useTheme()
-  const docRef = useRef<RowDocumentRenderable>(null)
-  const hasModalOverlay = useHasModalOverlay()
   const textContent = useMemo(() => getTextContent(content), [content])
-  const lines = useMemo(() => textContent.split("\n"), [textContent])
-  const lineCount = lines.length
+  // Fallback rows are source lines; row index is the source line.
+  const lineRows = useMemo(() => sourceLines(textContent), [textContent])
 
-  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 !== null) {
-      docRef.current?.scrollToRow(nav.cursor, "nearest")
-    }
-  }, [nav.cursor])
-
-  const { themeName } = useViewCommands({ content, textContent, actions })
+  useContentCommands({ content, textContent })
 
-  const markState = useMarkState({
-    nav,
-    search,
-    theme,
-    providerMarks,
-    userMarks,
-  })
-
-  useViewCommandContext({
-    content,
-    nav,
-    reload,
-    providerMarks,
-    userMarks,
-    setMarkSet,
-    clearMarkNamespace,
-    clearAllUserMarks,
+  // Custom content has no action rows of its own, so no context menu is bound.
+  const document = useDocumentController<SourceLineRow>({
+    rows: lineRows,
+    adapter: sourceLineAdapter,
+    multiSelect: true,
+    decorations,
   })
 
-  const extraStatusItems = useMemo(() => {
-    const selectionCount = nav.selection != null ? nav.selection.end - nav.selection.start + 1 : 0
-    const toggledCount = nav.toggledIndices.size
-    const selectionItems =
-      toggledCount > 0
-        ? [{ label: "Selected:", value: String(toggledCount) }]
-        : selectionCount > 0
-          ? [{ label: "Selected:", value: String(selectionCount) }]
-          : []
-    return [
+  const statusItems = useMemo(
+    () => [
       { label: "Format:", value: content.format },
-      { label: "Lines:", value: String(lineCount) },
-      ...selectionItems,
-    ]
-  }, [content.format, lineCount, nav.selection, nav.toggledIndices])
-
-  // Left-click selection for custom renderers. The framework does not own the
-  // renderer's markup, so it cannot map clicks to rows itself; instead it hands
-  // the renderer this callback (the mouse equivalent of the keyboard cursor
-  // move) to call from its own handlers. Guarded like the built-in views so a
-  // click never mutates the covered app while a modal overlay is up.
-  const setCursor = nav.setCursor
-  const handleSelectRow = useCallback(
-    (index: number) => {
-      if (hasModalOverlay) return
-      setCursor(index)
-    },
-    [hasModalOverlay, setCursor],
+      { label: "Lines:", value: String(lineRows.length) },
+    ],
+    [content.format, lineRows.length],
   )
 
   const customRenderer = renderers?.[content.format]
-  if (customRenderer) {
-    const cursorLine = nav.cursor ?? undefined
-    const selectionStart = nav.selection?.start ?? undefined
-    const selectionEnd = nav.selection?.end ?? undefined
-
-    return (
-      <SubviewLayout
-        content={content}
-        nav={layoutNav}
-        streaming={streaming}
-        themeName={themeName}
-        extraStatusItems={extraStatusItems}
-      >
-        {customRenderer({
-          content,
-          lineCount,
-          cursor: cursorLine,
-          selectionStart,
-          selectionEnd,
-          marks: markState,
-          onSelectRow: handleSelectRow,
-        })}
-      </SubviewLayout>
-    )
-  }
 
-  // No renderer for this custom format -- fall back to text
-  const text = getTextContent(content)
   return (
-    <SubviewLayout
+    <ViewScreen
       content={content}
-      nav={layoutNav}
-      streaming={streaming}
-      themeName={themeName}
-      extraStatusItems={extraStatusItems}
+      controller={document}
+      actions={actions}
+      statusItems={statusItems}
+      {...screen}
     >
-      <CodeView content={text} showLineNumbers={false} marks={markState} docRef={docRef} />
-    </SubviewLayout>
+      {customRenderer ? (
+        customRenderer({ content, document })
+      ) : (
+        <CodeView content={textContent} showLineNumbers={false} document={document} />
+      )}
+    </ViewScreen>
   )
 }

package/src/components/subviews/MarkdownSubview.tsx

@@ -1,22 +1,21 @@
-import { useCallback, useEffect, useMemo, useRef } from "react"
-import { marked } from "marked"
+import { useMemo, useRef } from "react"
 import type { TextBufferRenderable } from "@opentui/core"
 import {
   MarkdownView,
-  flattenTokens,
+  flattenMarkdown,
+  getFlatBlockText,
   type CodeBlockRenderer,
-  type RowDocumentRenderable,
+  type FlatBlock,
 } from "@tooee/renderers"
-import { useTheme } from "@tooee/themes"
-import { useCommand, useCommandContext } from "@tooee/commands"
-import { useHasModalOverlay } from "@tooee/overlays"
-import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
-import { actionsToContextMenuEntries, useContextMenu, useCopy, useNavigation } from "@tooee/shell"
-import { useSearch } from "@tooee/search"
+import { useCommand } from "@tooee/commands"
+import {
+  actionsToContextMenuEntries,
+  useDocumentController,
+  type DocumentRowAdapter,
+} 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 { useContentCommands } from "../../hooks/useContentCommands.js"
+import { ViewScreen } from "../ViewScreen.js"
 import type { SubviewProps } from "./types.js"
 
 interface MarkdownSubviewProps extends SubviewProps {
@@ -27,68 +26,43 @@ interface MarkdownSubviewProps extends SubviewProps {
 /** Columns moved per h/l press when scrolling a wide block horizontally. */
 const BLOCK_HSCROLL_STEP = 4
 
+/**
+ * Blocks are the row unit. `getFlatBlockText` keeps search/copy in step with the
+ * source mapping (notably for synthetic bullet rows), and `getSource` projects
+ * each block's Markdown provenance onto the controller's anchors.
+ */
+const MARKDOWN_BLOCK_ADAPTER: DocumentRowAdapter<FlatBlock> = {
+  getText: (block) => getFlatBlockText(block),
+  getSource: (block) => block.source,
+}
+
 export function MarkdownSubview({
   content,
   codeBlockRenderers,
-  providerMarks,
-  userMarks,
-  setMarkSet,
-  clearMarkNamespace,
-  clearAllUserMarks,
-  reload,
-  streaming,
+  decorations,
   actions,
+  ...screen
 }: MarkdownSubviewProps) {
-  const { theme } = useTheme()
-  const docRef = useRef<RowDocumentRenderable>(null)
-  const hasModalOverlay = useHasModalOverlay()
-  const contextMenu = useContextMenu()
-  const { invoke } = useCommandContext()
   const textContent = content.markdown
   const lineCount = useMemo(() => textContent.split("\n").length, [textContent])
-  const blocks = useMemo(() => flattenTokens(marked.lexer(content.markdown)), [content.markdown])
+  const blocks = useMemo(() => flattenMarkdown(content.markdown), [content.markdown])
 
-  const nav = useNavigation({
-    rowCount: blocks.length,
+  const { showLineNumbers } = useContentCommands({ content, textContent })
+  const contextMenu = useMemo(() => actionsToContextMenuEntries(actions), [actions])
+
+  const document = useDocumentController<FlatBlock>({
+    rows: blocks,
+    adapter: MARKDOWN_BLOCK_ADAPTER,
     multiSelect: true,
+    decorations,
+    contextMenu,
   })
-  const search = useSearch({
-    match: (query) => {
-      const lowerQuery = query.toLowerCase()
-      return blocks.flatMap((block, index) => {
-        const { token } = block
-        const raw = "raw" in token && typeof token.raw === "string" ? token.raw : ""
-        return raw.toLowerCase().includes(lowerQuery) ? [index] : []
-      })
-    },
-    onJump: nav.setCursor,
-  })
-  useCopy({
-    getRowText: (index) => {
-      const block = blocks[index]
-      if (!block) return ""
-      const { token } = block
-      return "raw" in token && typeof token.raw === "string" ? token.raw : ""
-    },
-    cursor: nav.cursor,
-    selection: nav.selection,
-    toggledIndices: nav.toggledIndices,
-  })
-  const layoutNav = { ...nav, ...search }
-
-  useEffect(() => {
-    if (nav.cursor !== null) {
-      docRef.current?.scrollToRow(nav.cursor, "nearest")
-    }
-  }, [nav.cursor])
 
-  // Horizontal panning for wide blocks (mermaid diagrams and code blocks).
-  // Blocks that can overflow horizontally register their text-buffer
-  // renderable by block index; h/l in cursor mode pans the block under the
-  // nav cursor via `scrollX` (the setter clamps to the content width).
   const hScrollableBlocksRef = useRef<Map<number, TextBufferRenderable>>(new Map())
   const cursorScrollable = () =>
-    nav.cursor !== null ? hScrollableBlocksRef.current.get(nav.cursor) : undefined
+    document.activeIndex !== null
+      ? hScrollableBlocksRef.current.get(document.activeIndex)
+      : undefined
   useCommand({
     id: "block-scroll-left",
     title: "Scroll block left",
@@ -112,85 +86,30 @@ export function MarkdownSubview({
     },
   })
 
-  const menuEntries = useMemo(() => actionsToContextMenuEntries(actions), [actions])
-
-  // Left-click selects the clicked block; right-click selects it and opens the
-  // same app-provided action menu as table/code rows. Both stand down while a
-  // modal overlay is up (theme picker, command palette, Ask/Choose), matching
-  // keyboard stand-down semantics.
-  const setCursor = nav.setCursor
-  const openContextMenu = contextMenu.open
-  const handleRowClick = useCallback(
-    (index: number) => {
-      if (hasModalOverlay) return
-      setCursor(index)
-    },
-    [hasModalOverlay, setCursor],
-  )
-  const handleRowContextMenu = useCallback(
-    (index: number, x: number, y: number) => {
-      if (hasModalOverlay) return
-      setCursor(index)
-      openContextMenu(x, y, menuEntries, invoke)
-    },
-    [hasModalOverlay, setCursor, openContextMenu, menuEntries, invoke],
-  )
-
-  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 - nav.selection.start + 1 : 0
-    const toggledCount = nav.toggledIndices.size
-    const selectionItems =
-      toggledCount > 0
-        ? [{ label: "Selected:", value: String(toggledCount) }]
-        : selectionCount > 0
-          ? [{ label: "Selected:", value: String(selectionCount) }]
-          : []
-    return [
+  const statusItems = useMemo(
+    () => [
       { label: "Format:", value: content.format },
       { label: "Lines:", value: String(lineCount) },
-      ...selectionItems,
-    ]
-  }, [content.format, lineCount, nav.selection, nav.toggledIndices])
+    ],
+    [content.format, lineCount],
+  )
 
   return (
-    <SubviewLayout
+    <ViewScreen
       content={content}
-      nav={layoutNav}
-      streaming={streaming}
-      themeName={themeName}
-      extraStatusItems={extraStatusItems}
+      controller={document}
+      actions={actions}
+      statusItems={statusItems}
+      {...screen}
     >
       <MarkdownView
         content={content.markdown}
+        blocks={blocks}
         showLineNumbers={showLineNumbers}
-        marks={markState}
-        docRef={docRef}
+        document={document}
         hScrollableBlocksRef={hScrollableBlocksRef}
         codeBlockRenderers={codeBlockRenderers}
-        onRowClick={handleRowClick}
-        onRowContextMenu={handleRowContextMenu}
       />
-    </SubviewLayout>
+    </ViewScreen>
   )
 }

package/src/components/subviews/TableSubview.tsx

@@ -1,184 +1,56 @@
-import { useCallback, useEffect, useMemo, useRef } from "react"
-import { Table, type RowDocumentRenderable } from "@tooee/renderers"
-import { useTheme } from "@tooee/themes"
-import { useCommandContext } from "@tooee/commands"
-import { useHasModalOverlay } from "@tooee/overlays"
-import { useViewCommandContext } from "../../hooks/useViewCommandContext.js"
-import { actionsToContextMenuEntries, useContextMenu, useCopy, useNavigation } from "@tooee/shell"
-import { useSearch } from "@tooee/search"
+import { useMemo } from "react"
+import { Table, type TableRow } from "@tooee/renderers"
+import { actionsToContextMenuEntries, useDocumentController } 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 { useContentCommands } from "../../hooks/useContentCommands.js"
+import { ViewScreen } from "../ViewScreen.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)
+export function TableSubview({ content, decorations, actions, ...screen }: TableSubviewProps) {
   const textContent = useMemo(() => getTextContent(content), [content])
-  const contextMenu = useContextMenu()
-  const { invoke } = useCommandContext()
-  const hasModalOverlay = useHasModalOverlay()
+  const { showLineNumbers } = useContentCommands({ content, textContent })
 
-  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 !== null) {
-      docRef.current?.scrollToRow(nav.cursor, "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 === null) return undefined
-    return content.rows[nav.cursor]
-  }
-
-  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
-      const end = nav.selection.end
-      return content.rows.slice(start, end + 1)
-    }
-    return []
-  }
+  const { columns, rows } = content
+  const adapter = useMemo(
+    () => ({
+      getText: (row: TableRow) =>
+        columns.map((column) => stringifyRowCell(row[column.key])).join("\t"),
+    }),
+    [columns],
+  )
+  const contextMenu = useMemo(() => actionsToContextMenuEntries(actions), [actions])
 
-  useViewCommandContext({
-    content,
-    nav,
-    reload,
-    providerMarks,
-    userMarks,
-    setMarkSet,
-    clearMarkNamespace,
-    clearAllUserMarks,
-    extras: {
-      activeRow: getActiveRow(),
-      selectedRows: getSelectedRows(),
-    },
+  const document = useDocumentController<TableRow>({
+    rows,
+    adapter,
+    multiSelect: true,
+    decorations,
+    contextMenu,
   })
 
-  // Row-scoped context-menu entries come from the app-provided actions.
-  const menuEntries = useMemo(() => actionsToContextMenuEntries(actions), [actions])
-
-  // Row mouse handlers stand down while a modal overlay (theme picker, command
-  // palette, Ask/Choose overlays, the context menu itself) is up: centered
-  // overlays leave clickable margins around them, and mouse events route
-  // through the hit-grid, bypassing command-surface arbitration. Memoized so
-  // Table's rowElements memo keeps doing its job.
-  const setCursor = nav.setCursor
-  const openContextMenu = contextMenu.open
-  const handleRowClick = useCallback(
-    (index: number) => {
-      if (hasModalOverlay) return
-      setCursor(index)
-    },
-    [hasModalOverlay, setCursor],
-  )
-  const handleRowContextMenu = useCallback(
-    (index: number, x: number, y: number) => {
-      if (hasModalOverlay) return
-      setCursor(index)
-      openContextMenu(x, y, menuEntries, invoke)
-    },
-    [hasModalOverlay, setCursor, openContextMenu, menuEntries, invoke],
-  )
-
-  const extraStatusItems = useMemo(() => {
-    const selectionCount = nav.selection != null ? nav.selection.end - nav.selection.start + 1 : 0
-    const toggledCount = nav.toggledIndices.size
-    const selectionItems =
-      toggledCount > 0
-        ? [{ label: "Selected:", value: String(toggledCount) }]
-        : selectionCount > 0
-          ? [{ label: "Selected:", value: String(selectionCount) }]
-          : []
-    return [
+  const statusItems = useMemo(
+    () => [
       { 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,
-  ])
+      { label: "Rows:", value: String(rows.length) },
+      { label: "Cols:", value: String(columns.length) },
+    ],
+    [content.format, rows.length, columns.length],
+  )
 
   return (
-    <SubviewLayout
+    <ViewScreen
       content={content}
-      nav={layoutNav}
-      streaming={streaming}
-      themeName={themeName}
-      extraStatusItems={extraStatusItems}
+      controller={document}
+      actions={actions}
+      statusItems={statusItems}
+      {...screen}
     >
-      <Table
-        columns={content.columns}
-        rows={content.rows}
-        showLineNumbers={showLineNumbers}
-        marks={markState}
-        docRef={docRef}
-        onRowClick={handleRowClick}
-        onRowContextMenu={handleRowContextMenu}
-      />
-    </SubviewLayout>
+      <Table columns={columns} rows={rows} showLineNumbers={showLineNumbers} document={document} />
+    </ViewScreen>
   )
 }
 

package/src/components/subviews/index.ts

@@ -2,5 +2,4 @@ export { MarkdownSubview } from "./MarkdownSubview.js"
 export { CodeSubview } from "./CodeSubview.js"
 export { TableSubview } from "./TableSubview.js"
 export { CustomSubview } from "./CustomSubview.js"
-export { SubviewLayout } from "../SubviewLayout.js"
 export type { SubviewProps } from "./types.js"

package/src/components/subviews/types.ts

@@ -1,9 +1,15 @@
 import type { MarkSet } from "@tooee/marks"
 import type { ActionDefinition } from "@tooee/commands"
+import type { DecorationLayer } from "@tooee/renderers"
 import type { AnyContent } from "../../types.js"
 
 export interface SubviewProps {
   content: AnyContent
+  /**
+   * Provider and user mark sets as decoration layers. They compose with the
+   * interaction layers (search, selection, cursor) the controller generates.
+   */
+  decorations: DecorationLayer[]
   providerMarks: MarkSet[]
   userMarks: MarkSet[]
   setMarkSet: (set: MarkSet) => void