@tooee/view 0.7.3 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tooee/view",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Terminal content viewer for markdown, code, text, images, and tables",
   "keywords": [
     "cli",
@@ -40,16 +40,16 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tooee/commands": "0.7.3",
-    "@tooee/config": "0.7.3",
-    "@tooee/diff": "0.7.3",
-    "@tooee/layout": "0.7.3",
-    "@tooee/marks": "0.7.3",
-    "@tooee/overlays": "0.7.3",
-    "@tooee/renderers": "0.7.3",
-    "@tooee/search": "0.7.3",
-    "@tooee/shell": "0.7.3",
-    "@tooee/themes": "0.7.3",
+    "@tooee/commands": "0.8.0",
+    "@tooee/config": "0.8.0",
+    "@tooee/diff": "0.8.0",
+    "@tooee/layout": "0.8.0",
+    "@tooee/marks": "0.8.0",
+    "@tooee/overlays": "0.8.0",
+    "@tooee/renderers": "0.8.0",
+    "@tooee/search": "0.8.0",
+    "@tooee/shell": "0.8.0",
+    "@tooee/themes": "0.8.0",
     "@xstate/store": "^4",
     "@xstate/store-react": "^2",
     "marked": "^17.0.4"
@@ -57,6 +57,7 @@
   "devDependencies": {
     "@opentui/core": "^0.5.1",
     "@opentui/react": "^0.5.1",
+    "@tooee/test-support": "0.7.3",
     "@types/bun": "^1.3.10",
     "@types/react": "^19.2.14",
     "typescript": "^5.9.3"

package/src/components/subviews/code-subview.tsx

@@ -1,11 +1,11 @@
 import { useMemo } from "react";
 import { CodeView, sourceLines, sourceLineAdapter } from "@tooee/renderers";
 import type { SourceLineRow } from "@tooee/renderers";
-import { useDocumentController } from "@tooee/shell";
 import type { CodeContent, TextContent } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface CodeSubviewProps extends SubviewProps {
   content: CodeContent | TextContent;
@@ -16,28 +16,16 @@ export const CodeSubview = function CodeSubview({
   decorations,
   actions,
   ...screen
-}: CodeSubviewProps): React.ReactNode {
+}: CodeSubviewProps): ReactNode {
   const textContent = content.format === "code" ? content.code : content.text;
   // One navigation row per physical source line; row index is the source line.
   const lineRows = useMemo(() => sourceLines(textContent), [textContent]);
 
-  const { showLineNumbers } = useContentCommands({ content, textContent });
-
-  const document = useDocumentController<SourceLineRow>({
-    adapter: sourceLineAdapter,
-    // The controller projects the screen's actions onto menu entries at open time.
-    contextMenu: actions,
-    decorations,
-    multiSelect: true,
-    rows: lineRows,
-  });
-
-  const statusItems = useMemo(
-    () => [
-      { label: "Format:", value: content.format },
-      { label: "Lines:", value: String(lineRows.length) },
-    ],
-    [content.format, lineRows.length],
+  const { document, showLineNumbers, statusItems } = useContentDocument<SourceLineRow>(
+    lineRows,
+    sourceLineAdapter,
+    { actions, content, decorations, textContent },
+    { multiSelect: true },
   );
 
   return (

package/src/components/subviews/custom-subview.tsx

@@ -1,12 +1,12 @@
 import { useMemo } from "react";
 import { CodeView, sourceLines, sourceLineAdapter } from "@tooee/renderers";
 import type { SourceLineRow } from "@tooee/renderers";
-import { useDocumentController } from "@tooee/shell";
 import { getTextContent } from "../../types.js";
 import type { CustomContent, ContentRenderer } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface CustomSubviewProps extends SubviewProps {
   content: CustomContent;
@@ -19,27 +19,17 @@ export const CustomSubview = function CustomSubview({
   actions,
   renderers,
   ...screen
-}: CustomSubviewProps): React.ReactNode {
+}: CustomSubviewProps): ReactNode {
   const textContent = useMemo(() => getTextContent(content), [content]);
   // Fallback rows are source lines; row index is the source line.
   const lineRows = useMemo(() => sourceLines(textContent), [textContent]);
 
-  useContentCommands({ content, textContent });
-
-  // Custom content has no action rows of its own, so no context menu is bound.
-  const document = useDocumentController<SourceLineRow>({
-    adapter: sourceLineAdapter,
-    decorations,
-    multiSelect: true,
-    rows: lineRows,
-  });
-
-  const statusItems = useMemo(
-    () => [
-      { label: "Format:", value: content.format },
-      { label: "Lines:", value: String(lineRows.length) },
-    ],
-    [content.format, lineRows.length],
+  const { document, statusItems } = useContentDocument<SourceLineRow>(
+    lineRows,
+    sourceLineAdapter,
+    { actions, content, decorations, textContent },
+    // Custom content has no action rows of its own, so no context menu is bound.
+    { contextMenu: false, multiSelect: true },
   );
 
   const customRenderer = renderers?.[content.format];

package/src/components/subviews/diff-subview.tsx

@@ -5,13 +5,13 @@ import { useCommand } from "@tooee/commands";
 import { useConfig } from "@tooee/config";
 import { useOverlay } from "@tooee/overlays";
 import type { OverlayCloseReason } from "@tooee/overlays";
-import { useDocumentController } from "@tooee/shell";
 import type { DocumentRowAdapter } from "@tooee/shell";
 import type { DiffContent } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import { DiffFilePickerOverlay } from "../diff-file-picker.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface DiffSubviewProps extends SubviewProps {
   content: DiffContent;
@@ -41,7 +41,7 @@ export const DiffSubview = function DiffSubview({
   decorations,
   actions,
   ...screen
-}: DiffSubviewProps): React.ReactNode {
+}: DiffSubviewProps): ReactNode {
   const config = useConfig();
   const overlay = useOverlay();
   const textContent = content.patch;
@@ -53,17 +53,38 @@ export const DiffSubview = function DiffSubview({
   const [wrapLines, setWrapLines] = useState(config.view?.wrap ?? false);
   const [horizontalOffset, setHorizontalOffset] = useState(0);
 
-  const { showLineNumbers } = useContentCommands({ content, textContent });
-
-  const document = useDocumentController<DiffRow>({
-    adapter: DIFF_ROW_ADAPTER,
-    // The controller projects the screen's actions onto menu entries at open time.
-    contextMenu: actions,
-    decorations,
-    multiSelect: true,
-    preserveCursorByKey: true,
-    rows: model.rows,
-  });
+  const { document, showLineNumbers, statusItems } = useContentDocument<DiffRow>(
+    model.rows,
+    DIFF_ROW_ADAPTER,
+    { actions, content, decorations, textContent },
+    {
+      buildStatusItems: (currentDocument) => {
+        const activeRow =
+          currentDocument.activeIndex === null
+            ? undefined
+            : model.rows[currentDocument.activeIndex];
+        return [
+          { label: "Format:", value: content.format },
+          { label: "Files:", value: String(model.files.length) },
+          { label: "Changes:", value: `+${model.stats.additions} -${model.stats.deletions}` },
+          { label: "Layout:", value: layout },
+          ...(activeRow
+            ? [
+                {
+                  label: "At:",
+                  value:
+                    activeRow.hunkIndex >= 0
+                      ? `${activeRow.parent.path ?? activeRow.fileId}:${activeRow.hunkIndex + 1}`
+                      : (activeRow.parent.path ?? activeRow.fileId),
+                },
+              ]
+            : []),
+        ];
+      },
+      multiSelect: true,
+      preserveCursorByKey: true,
+    },
+  );
 
   const { activeIndex } = document;
   // `setCursor` rather than `selectRow`: the latter stands down while a modal
@@ -178,35 +199,6 @@ export const DiffSubview = function DiffSubview({
     title: "Go to file",
   });
 
-  const activeRow = activeIndex === null ? undefined : model.rows[activeIndex];
-  const statusItems = useMemo(
-    () => [
-      { label: "Format:", value: content.format },
-      { label: "Files:", value: String(model.files.length) },
-      { label: "Changes:", value: `+${model.stats.additions} -${model.stats.deletions}` },
-      { label: "Layout:", value: layout },
-      ...(activeRow
-        ? [
-            {
-              label: "At:",
-              value:
-                activeRow.hunkIndex >= 0
-                  ? `${activeRow.parent.path ?? activeRow.fileId}:${activeRow.hunkIndex + 1}`
-                  : (activeRow.parent.path ?? activeRow.fileId),
-            },
-          ]
-        : []),
-    ],
-    [
-      activeRow,
-      content.format,
-      layout,
-      model.files.length,
-      model.stats.additions,
-      model.stats.deletions,
-    ],
-  );
-
   return (
     <ViewScreen
       content={content}

package/src/components/subviews/image-subview.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useMemo, useState } from "react";
 import { sourceLineAdapter, sourceLines } from "@tooee/renderers";
-import { useDocumentController } from "@tooee/shell";
 import type { SourceLineRow } from "@tooee/renderers";
 import type { ImageContent } from "../../types.js";
 import { getTextContent } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface ImageSubviewProps extends SubviewProps {
   content: ImageContent;
@@ -17,7 +17,7 @@ export const ImageSubview = function ImageSubview({
   decorations,
   actions,
   ...screen
-}: ImageSubviewProps): React.ReactNode {
+}: ImageSubviewProps): ReactNode {
   const textContent = getTextContent(content);
   const rows = useMemo(() => sourceLines(textContent), [textContent]);
   const [error, setError] = useState(false);
@@ -26,21 +26,22 @@ export const ImageSubview = function ImageSubview({
     setError(false);
   }, [content.src]);
 
-  useContentCommands({ content, textContent });
-  const document = useDocumentController<SourceLineRow>({
-    adapter: sourceLineAdapter,
-    contextMenu: actions,
-    decorations,
-    multiSelect: false,
+  const { document, statusItems } = useContentDocument<SourceLineRow>(
     rows,
-  });
+    sourceLineAdapter,
+    { actions, content, decorations, textContent },
+    {
+      multiSelect: false,
+      statusItems: [{ label: "Format:", value: content.format }],
+    },
+  );
 
   return (
     <ViewScreen
       content={content}
       controller={document}
       actions={actions}
-      statusItems={[{ label: "Format:", value: content.format }]}
+      statusItems={statusItems}
       {...screen}
     >
       <box style={{ flexDirection: "column", flexGrow: 1 }}>

package/src/components/subviews/markdown-subview.tsx

@@ -3,12 +3,12 @@ import type { TextBufferRenderable } from "@opentui/core";
 import { MarkdownView, flattenMarkdown, getFlatBlockText } from "@tooee/renderers";
 import type { CodeBlockRenderer, FlatBlock } from "@tooee/renderers";
 import { useBuildCommandContext, useCommand } from "@tooee/commands";
-import { useDocumentController } from "@tooee/shell";
 import type { DocumentRowAdapter } from "@tooee/shell";
 import type { MarkdownContent, MarkdownLinkActivateHandler } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface MarkdownSubviewProps extends SubviewProps {
   content: MarkdownContent;
@@ -36,26 +36,28 @@ export const MarkdownSubview = function MarkdownSubview({
   decorations,
   actions,
   ...screen
-}: MarkdownSubviewProps): React.ReactNode {
+}: MarkdownSubviewProps): ReactNode {
   const textContent = content.markdown;
   const lineCount = useMemo(() => textContent.split("\n").length, [textContent]);
   const blocks = useMemo(() => flattenMarkdown(content.markdown), [content.markdown]);
 
-  const { showLineNumbers } = useContentCommands({ content, textContent });
+  const { document, showLineNumbers, statusItems } = useContentDocument<FlatBlock>(
+    blocks,
+    MARKDOWN_BLOCK_ADAPTER,
+    { actions, content, decorations, textContent },
+    {
+      multiSelect: true,
+      statusItems: [
+        { label: "Format:", value: content.format },
+        { label: "Lines:", value: String(lineCount) },
+      ],
+    },
+  );
   const buildCommandContext = useBuildCommandContext();
   const handleLinkActivate = onLinkActivate
-    ? (href: string): unknown => onLinkActivate(href, buildCommandContext())
+    ? (href: string) => onLinkActivate(href, buildCommandContext())
     : undefined;
 
-  const document = useDocumentController<FlatBlock>({
-    adapter: MARKDOWN_BLOCK_ADAPTER,
-    // The controller projects the screen's actions onto menu entries at open time.
-    contextMenu: actions,
-    decorations,
-    multiSelect: true,
-    rows: blocks,
-  });
-
   const hScrollableBlocksRef = useRef<Map<number, TextBufferRenderable>>(new Map());
   const cursorScrollable = () =>
     document.activeIndex === null
@@ -88,14 +90,6 @@ export const MarkdownSubview = function MarkdownSubview({
     when: () => cursorScrollable() !== undefined,
   });
 
-  const statusItems = useMemo(
-    () => [
-      { label: "Format:", value: content.format },
-      { label: "Lines:", value: String(lineCount) },
-    ],
-    [content.format, lineCount],
-  );
-
   return (
     <ViewScreen
       content={content}

package/src/components/subviews/table-subview.tsx

@@ -1,84 +1,44 @@
 import { useMemo } from "react";
-import { Table } from "@tooee/renderers";
+import { Table, formatTableCell } from "@tooee/renderers";
 import type { TableRow } from "@tooee/renderers";
-import { useDocumentController } from "@tooee/shell";
 import { getTextContent } from "../../types.js";
 import type { TableContent } from "../../types.js";
-import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { useContentDocument } from "../../hooks/use-content-document.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
+import type { ReactNode } from "react";
 
 interface TableSubviewProps extends SubviewProps {
   content: TableContent;
 }
 
-const stringifyRowCell = function stringifyRowCell(value: unknown): string {
-  if (value === null || value === undefined) {
-    return "";
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  if (
-    typeof value === "number" ||
-    typeof value === "bigint" ||
-    typeof value === "boolean" ||
-    typeof value === "symbol"
-  ) {
-    return value.toString();
-  }
-  if (value === null || value === undefined) {
-    return String(value);
-  }
-  if (typeof value === "function") {
-    return Function.prototype.toString.call(value);
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return Array.isArray(value) ? value.join(",") : Object.prototype.toString.call(value);
-  }
-};
-
 export const TableSubview = function TableSubview({
   content,
   decorations,
   actions,
   ...screen
-}: TableSubviewProps): React.ReactNode {
+}: TableSubviewProps): ReactNode {
   const textContent = useMemo(() => getTextContent(content), [content]);
-  const { showLineNumbers } = useContentCommands({ content, textContent });
-
   const { columns, rows } = content;
   const adapter = useMemo(
     () => ({
       getText: (row: TableRow) =>
-        columns.map((column) => stringifyRowCell(row[column.key])).join("\t"),
+        columns.map((column) => formatTableCell(row[column.key])).join("\t"),
     }),
     [columns],
   );
-  const document = useDocumentController<TableRow>({
-    adapter,
-    // The controller projects the screen's actions onto menu entries at open time.
-    contextMenu: actions,
-    decorations,
-    multiSelect: true,
+  const { document, showLineNumbers, statusItems } = useContentDocument<TableRow>(
     rows,
-  });
-
-  const statusItems = useMemo(
-    () => [
-      { label: "Format:", value: content.format },
-      { label: "Rows:", value: String(rows.length) },
-      { label: "Cols:", value: String(columns.length) },
-    ],
-    [content.format, rows.length, columns.length],
+    adapter,
+    { actions, content, decorations, textContent },
+    {
+      multiSelect: true,
+      statusItems: [
+        { label: "Format:", value: content.format },
+        { label: "Rows:", value: String(rows.length) },
+        { label: "Cols:", value: String(columns.length) },
+      ],
+    },
   );
 
   return (

package/src/components/view-state.tsx

@@ -1,4 +1,5 @@
 import { useQuitCommand } from "@tooee/shell";
+import type { ReactNode } from "react";
 
 interface ViewStateProps {
   message: string;
@@ -6,7 +7,7 @@ interface ViewStateProps {
 }
 
 /** A non-document view state that preserves the viewer's normal quit command. */
-export const ViewState = function ViewState({ message, color }: ViewStateProps): React.ReactNode {
+export const ViewState = function ViewState({ message, color }: ViewStateProps): ReactNode {
   useQuitCommand();
 
   return (

package/src/content-loader-store.ts

@@ -2,6 +2,8 @@ import { createStore } from "@xstate/store";
 import type { MarkSet } from "@tooee/marks";
 import type { AnyContent, Content, ContentChunk, ContentFormat } from "./types.js";
 
+type ContentProviderResult = AnyContent | Promise<AnyContent> | AsyncIterable<ContentChunk>;
+
 export type ContentLoaderStatus = "idle" | "loading" | "streaming" | "ready" | "error";
 
 export interface ContentLoaderContext {
@@ -30,11 +32,12 @@ export type ContentLoaderEvents = {
 };
 
 export const isAsyncIterable = function isAsyncIterable(
-  value: unknown,
+  value: ContentProviderResult,
 ): value is AsyncIterable<ContentChunk> {
   return (
     value !== null &&
     value !== undefined &&
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- provider result boundary distinguishes the documented async-iterable source from content and promises
     typeof value === "object" &&
     Symbol.asyncIterator in value
   );
@@ -69,11 +72,11 @@ const ensureContentFormat = function ensureContentFormat<F extends ContentFormat
   title?: string,
 ): Extract<Content, { format: F }> {
   if (!current || current.format !== format) {
-    // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+    // SAFETY: createEmptyContent returns the built-in content variant selected by the same format.
     // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- format-dependent content is trusted at this provider boundary
     return createEmptyContent(format, title) as Extract<Content, { format: F }>;
   }
-  // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+  // SAFETY: The equality guard narrows current to the built-in content variant selected by format.
   // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the provider contract supplies the matching format
   return current as Extract<Content, { format: F }>;
 };
@@ -117,8 +120,8 @@ export const applyContentChunk = function applyContentChunk(
   }
 };
 
-export const normalizeError = function normalizeError(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
+export const normalizeError = function normalizeError(cause: unknown): string {
+  return cause instanceof Error ? cause.message : String(cause);
 };
 
 export const createContentLoaderStore = function createContentLoaderStore() {

package/src/default-provider.ts

@@ -7,10 +7,12 @@ export interface CreateProviderOptions {
   renderer?: ContentFormat;
 }
 
-const detectFormat = function detectFormat(filePath: string): {
+interface DetectedFileFormat {
   format: ContentFormat;
   language?: string;
-} {
+}
+
+const detectFormat = function detectFormat(filePath: string): DetectedFileFormat {
   const ext = filePath.split(".").pop()?.toLowerCase();
   if (ext === undefined || ext === "") {
     return { format: "text" };
@@ -36,36 +38,36 @@ const detectFormat = function detectFormat(filePath: string): {
     return { format: "markdown" };
   }
 
-  const codeExts: Record<string, string> = {
-    bash: "bash",
-    c: "c",
-    cpp: "cpp",
-    css: "css",
-    go: "go",
-    h: "c",
-    hpp: "cpp",
-    html: "html",
-    java: "java",
-    js: "javascript",
-    json: "json",
-    jsx: "javascript",
-    kt: "kotlin",
-    py: "python",
-    rb: "ruby",
-    rs: "rust",
-    sh: "bash",
-    sql: "sql",
-    swift: "swift",
-    toml: "toml",
-    ts: "typescript",
-    tsx: "typescript",
-    yaml: "yaml",
-    yml: "yaml",
-    zsh: "zsh",
-  };
-
-  const language = codeExts[ext];
-  if (typeof language === "string") {
+  const codeExts = new Map<string, string>([
+    ["bash", "bash"],
+    ["c", "c"],
+    ["cpp", "cpp"],
+    ["css", "css"],
+    ["go", "go"],
+    ["h", "c"],
+    ["hpp", "cpp"],
+    ["html", "html"],
+    ["java", "java"],
+    ["js", "javascript"],
+    ["json", "json"],
+    ["jsx", "javascript"],
+    ["kt", "kotlin"],
+    ["py", "python"],
+    ["rb", "ruby"],
+    ["rs", "rust"],
+    ["sh", "bash"],
+    ["sql", "sql"],
+    ["swift", "swift"],
+    ["toml", "toml"],
+    ["ts", "typescript"],
+    ["tsx", "typescript"],
+    ["yaml", "yaml"],
+    ["yml", "yaml"],
+    ["zsh", "zsh"],
+  ]);
+
+  const language = codeExts.get(ext);
+  if (language !== undefined) {
     return { format: "code", language };
   }
 

package/src/directory-view.tsx

@@ -7,6 +7,7 @@ import type { DirectoryEntry } from "./directory-provider.js";
 import type { AnyContent, ContentProvider } from "./types.js";
 import { createFileProvider } from "./default-provider.js";
 import { ViewState } from "./components/view-state.js";
+import type { ReactNode } from "react";
 
 const createDirectoryFileProvider = function createDirectoryFileProvider(
   entry: DirectoryEntry,
@@ -17,7 +18,8 @@ const createDirectoryFileProvider = function createDirectoryFileProvider(
   return {
     async load(): Promise<AnyContent> {
       const result = inner.load();
-      // Deferred(lint-sweep): add schema-based validation for custom and streamed content formats.
+      // SAFETY: createFileProvider owns this provider and its load method returns Content directly
+      // or through a Promise; it never returns the ContentProvider async-iterable arm.
       // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- file providers return external content at this boundary
       const content = result instanceof Promise ? await result : (result as AnyContent);
       return {
@@ -36,7 +38,7 @@ interface DirectoryViewProps {
 export const DirectoryView = function DirectoryView({
   dirPath,
   actions,
-}: DirectoryViewProps): React.ReactNode {
+}: DirectoryViewProps): ReactNode {
   const files = useMemo(() => listDirectoryFiles(dirPath), [dirPath]);
   const [currentIndex, setCurrentIndex] = useState(0);