@tooee/view 0.2.3 → 0.3.0

package/src/components/subviews/{CodeSubview.tsx → code-subview.tsx}

@@ -1,30 +1,36 @@
-import { useMemo } from "react"
-import { CodeView, sourceLines, sourceLineAdapter, type SourceLineRow } from "@tooee/renderers"
-import { useDocumentController } from "@tooee/shell"
-import type { CodeContent, TextContent } from "../../types.js"
-import { useContentCommands } from "../../hooks/useContentCommands.js"
-import { ViewScreen } from "../ViewScreen.js"
-import type { SubviewProps } from "./types.js"
+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 { ViewScreen } from "../view-screen.js";
+import type { SubviewProps } from "./types.js";
 
 interface CodeSubviewProps extends SubviewProps {
-  content: CodeContent | TextContent
+  content: CodeContent | TextContent;
 }
 
-export function CodeSubview({ content, decorations, actions, ...screen }: CodeSubviewProps) {
-  const textContent = content.format === "code" ? content.code : content.text
+export const CodeSubview = function CodeSubview({
+  content,
+  decorations,
+  actions,
+  ...screen
+}: CodeSubviewProps): React.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 lineRows = useMemo(() => sourceLines(textContent), [textContent]);
 
-  const { showLineNumbers } = useContentCommands({ content, textContent })
+  const { showLineNumbers } = useContentCommands({ content, textContent });
 
   const document = useDocumentController<SourceLineRow>({
-    rows: lineRows,
     adapter: sourceLineAdapter,
-    multiSelect: true,
-    decorations,
     // The controller projects the screen's actions onto menu entries at open time.
     contextMenu: actions,
-  })
+    decorations,
+    multiSelect: true,
+    rows: lineRows,
+  });
 
   const statusItems = useMemo(
     () => [
@@ -32,7 +38,7 @@ export function CodeSubview({ content, decorations, actions, ...screen }: CodeSu
       { label: "Lines:", value: String(lineRows.length) },
     ],
     [content.format, lineRows.length],
-  )
+  );
 
   return (
     <ViewScreen
@@ -49,5 +55,5 @@ export function CodeSubview({ content, decorations, actions, ...screen }: CodeSu
         document={document}
       />
     </ViewScreen>
-  )
-}
+  );
+};

package/src/components/subviews/{CustomSubview.tsx → custom-subview.tsx}

@@ -1,36 +1,38 @@
-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 { useContentCommands } from "../../hooks/useContentCommands.js"
-import { ViewScreen } from "../ViewScreen.js"
-import type { SubviewProps } from "./types.js"
+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 { ViewScreen } from "../view-screen.js";
+import type { SubviewProps } from "./types.js";
 
 interface CustomSubviewProps extends SubviewProps {
-  content: CustomContent
-  renderers?: Record<string, ContentRenderer>
+  content: CustomContent;
+  renderers?: Record<string, ContentRenderer>;
 }
 
-export function CustomSubview({
+export const CustomSubview = function CustomSubview({
   content,
   decorations,
   actions,
   renderers,
   ...screen
-}: CustomSubviewProps) {
-  const textContent = useMemo(() => getTextContent(content), [content])
+}: CustomSubviewProps): React.ReactNode {
+  const textContent = useMemo(() => getTextContent(content), [content]);
   // Fallback rows are source lines; row index is the source line.
-  const lineRows = useMemo(() => sourceLines(textContent), [textContent])
+  const lineRows = useMemo(() => sourceLines(textContent), [textContent]);
 
-  useContentCommands({ content, textContent })
+  useContentCommands({ content, textContent });
 
   // 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,
-  })
+    multiSelect: true,
+    rows: lineRows,
+  });
 
   const statusItems = useMemo(
     () => [
@@ -38,9 +40,9 @@ export function CustomSubview({
       { label: "Lines:", value: String(lineRows.length) },
     ],
     [content.format, lineRows.length],
-  )
+  );
 
-  const customRenderer = renderers?.[content.format]
+  const customRenderer = renderers?.[content.format];
 
   return (
     <ViewScreen
@@ -56,5 +58,5 @@ export function CustomSubview({
         <CodeView content={textContent} showLineNumbers={false} document={document} />
       )}
     </ViewScreen>
-  )
-}
+  );
+};

package/src/components/subviews/index.ts

@@ -1,5 +1,5 @@
-export { MarkdownSubview } from "./MarkdownSubview.js"
-export { CodeSubview } from "./CodeSubview.js"
-export { TableSubview } from "./TableSubview.js"
-export { CustomSubview } from "./CustomSubview.js"
-export type { SubviewProps } from "./types.js"
+export { MarkdownSubview } from "./markdown-subview.js";
+export { CodeSubview } from "./code-subview.js";
+export { TableSubview } from "./table-subview.js";
+export { CustomSubview } from "./custom-subview.js";
+export type { SubviewProps } from "./types.js";

package/src/components/subviews/{MarkdownSubview.tsx → markdown-subview.tsx}

@@ -1,26 +1,23 @@
-import { useMemo, useRef } from "react"
-import type { TextBufferRenderable } from "@opentui/core"
-import {
-  MarkdownView,
-  flattenMarkdown,
-  getFlatBlockText,
-  type CodeBlockRenderer,
-  type FlatBlock,
-} from "@tooee/renderers"
-import { useCommand } from "@tooee/commands"
-import { useDocumentController, type DocumentRowAdapter } from "@tooee/shell"
-import type { MarkdownContent } from "../../types.js"
-import { useContentCommands } from "../../hooks/useContentCommands.js"
-import { ViewScreen } from "../ViewScreen.js"
-import type { SubviewProps } from "./types.js"
+import { useMemo, useRef } from "react";
+import type { TextBufferRenderable } from "@opentui/core";
+import { MarkdownView, flattenMarkdown, getFlatBlockText } from "@tooee/renderers";
+import type { CodeBlockRenderer, FlatBlock, MarkdownLinkHandler } from "@tooee/renderers";
+import { useCommand } from "@tooee/commands";
+import { useDocumentController } from "@tooee/shell";
+import type { DocumentRowAdapter } from "@tooee/shell";
+import type { MarkdownContent } from "../../types.js";
+import { useContentCommands } from "../../hooks/use-content-commands.js";
+import { ViewScreen } from "../view-screen.js";
+import type { SubviewProps } from "./types.js";
 
 interface MarkdownSubviewProps extends SubviewProps {
-  content: MarkdownContent
-  codeBlockRenderers?: Record<string, CodeBlockRenderer>
+  content: MarkdownContent;
+  codeBlockRenderers?: Record<string, CodeBlockRenderer>;
+  onLinkActivate?: MarkdownLinkHandler;
 }
 
 /** Columns moved per h/l press when scrolling a wide block horizontally. */
-const BLOCK_HSCROLL_STEP = 4
+const BLOCK_HSCROLL_STEP = 4;
 
 /**
  * Blocks are the row unit. `getFlatBlockText` keeps search/copy in step with the
@@ -28,59 +25,64 @@ const BLOCK_HSCROLL_STEP = 4
  * each block's Markdown provenance onto the controller's anchors.
  */
 const MARKDOWN_BLOCK_ADAPTER: DocumentRowAdapter<FlatBlock> = {
-  getText: (block) => getFlatBlockText(block),
   getSource: (block) => block.source,
-}
+  getText: (block) => getFlatBlockText(block),
+};
 
-export function MarkdownSubview({
+export const MarkdownSubview = function MarkdownSubview({
   content,
   codeBlockRenderers,
+  onLinkActivate,
   decorations,
   actions,
   ...screen
-}: MarkdownSubviewProps) {
-  const textContent = content.markdown
-  const lineCount = useMemo(() => textContent.split("\n").length, [textContent])
-  const blocks = useMemo(() => flattenMarkdown(content.markdown), [content.markdown])
+}: MarkdownSubviewProps): React.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 { showLineNumbers } = useContentCommands({ content, textContent });
 
   const document = useDocumentController<FlatBlock>({
-    rows: blocks,
     adapter: MARKDOWN_BLOCK_ADAPTER,
-    multiSelect: true,
-    decorations,
     // 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 hScrollableBlocksRef = useRef<Map<number, TextBufferRenderable>>(new Map());
   const cursorScrollable = () =>
-    document.activeIndex !== null
-      ? hScrollableBlocksRef.current.get(document.activeIndex)
-      : undefined
+    document.activeIndex === null
+      ? undefined
+      : hScrollableBlocksRef.current.get(document.activeIndex);
   useCommand({
-    id: "block-scroll-left",
-    title: "Scroll block left",
+    handler: () => {
+      const target = cursorScrollable();
+      if (target) {
+        target.scrollX -= BLOCK_HSCROLL_STEP;
+      }
+    },
     hotkey: "h",
+    id: "block-scroll-left",
     modes: ["cursor"],
-    when: () => cursorScrollable() != null,
+    title: "Scroll block left",
+    when: () => cursorScrollable() !== undefined,
+  });
+  useCommand({
     handler: () => {
-      const target = cursorScrollable()
-      if (target) target.scrollX -= BLOCK_HSCROLL_STEP
+      const target = cursorScrollable();
+      if (target) {
+        target.scrollX += BLOCK_HSCROLL_STEP;
+      }
     },
-  })
-  useCommand({
-    id: "block-scroll-right",
-    title: "Scroll block right",
     hotkey: "l",
+    id: "block-scroll-right",
     modes: ["cursor"],
-    when: () => cursorScrollable() != null,
-    handler: () => {
-      const target = cursorScrollable()
-      if (target) target.scrollX += BLOCK_HSCROLL_STEP
-    },
-  })
+    title: "Scroll block right",
+    when: () => cursorScrollable() !== undefined,
+  });
 
   const statusItems = useMemo(
     () => [
@@ -88,7 +90,7 @@ export function MarkdownSubview({
       { label: "Lines:", value: String(lineCount) },
     ],
     [content.format, lineCount],
-  )
+  );
 
   return (
     <ViewScreen
@@ -105,7 +107,8 @@ export function MarkdownSubview({
         document={document}
         hScrollableBlocksRef={hScrollableBlocksRef}
         codeBlockRenderers={codeBlockRenderers}
+        onLinkActivate={onLinkActivate}
       />
     </ViewScreen>
-  )
-}
+  );
+};

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

@@ -0,0 +1,95 @@
+import { useMemo } from "react";
+import { Table } 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 { ViewScreen } from "../view-screen.js";
+import type { SubviewProps } from "./types.js";
+
+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 {
+  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],
+  );
+  const document = useDocumentController<TableRow>({
+    adapter,
+    // The controller projects the screen's actions onto menu entries at open time.
+    contextMenu: actions,
+    decorations,
+    multiSelect: true,
+    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],
+  );
+
+  return (
+    <ViewScreen
+      content={content}
+      controller={document}
+      actions={actions}
+      statusItems={statusItems}
+      {...screen}
+    >
+      <Table columns={columns} rows={rows} showLineNumbers={showLineNumbers} document={document} />
+    </ViewScreen>
+  );
+};

package/src/components/subviews/types.ts

@@ -1,21 +1,21 @@
-import type { MarkSet } from "@tooee/marks"
-import type { ActionDefinition } from "@tooee/commands"
-import type { DecorationLayer } from "@tooee/renderers"
-import type { AnyContent } from "../../types.js"
+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
+  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
-  clearMarkNamespace: (namespace: string) => void
-  clearAllUserMarks: () => void
-  reload: () => void
-  streaming: boolean
-  actions?: ActionDefinition[]
+  decorations: DecorationLayer[];
+  providerMarks: MarkSet[];
+  userMarks: MarkSet[];
+  setMarkSet: (set: MarkSet) => void;
+  clearMarkNamespace: (namespace: string) => void;
+  clearAllUserMarks: () => void;
+  reload: () => void;
+  streaming: boolean;
+  actions?: ActionDefinition[];
 }

package/src/components/{ViewScreen.tsx → view-screen.tsx}

@@ -1,25 +1,26 @@
-import type { ReactNode } from "react"
-import type { ActionDefinition } from "@tooee/commands"
-import type { StatusBarItem } from "@tooee/layout"
-import type { MarkSet } from "@tooee/marks"
-import { DocumentScreen, type DocumentController } from "@tooee/shell"
-import { useProvideViewCommandContext } from "../hooks/useViewCommandContext.js"
-import type { AnyContent } from "../types.js"
+import type { ReactNode } from "react";
+import type { ActionDefinition } from "@tooee/commands";
+import type { StatusBarItem } from "@tooee/layout";
+import type { MarkSet } from "@tooee/marks";
+import { DocumentScreen } from "@tooee/shell";
+import type { DocumentController } from "@tooee/shell";
+import { useProvideViewCommandContext } from "../hooks/use-view-command-context.js";
+import type { AnyContent } from "../types.js";
 
 export interface ViewScreenProps<T> {
-  content: AnyContent
-  controller: DocumentController<T>
-  streaming: boolean
-  actions?: ActionDefinition[]
+  content: AnyContent;
+  controller: DocumentController<T>;
+  streaming: boolean;
+  actions?: ActionDefinition[];
   /** Content-shaped status (format, line/row counts), rendered before Mode. */
-  statusItems?: StatusBarItem[]
-  reload: () => void
-  providerMarks: MarkSet[]
-  userMarks: MarkSet[]
-  setMarkSet: (set: MarkSet) => void
-  clearMarkNamespace: (namespace: string) => void
-  clearAllUserMarks: () => void
-  children: ReactNode
+  statusItems?: StatusBarItem[];
+  reload: () => void;
+  providerMarks: MarkSet[];
+  userMarks: MarkSet[];
+  setMarkSet: (set: MarkSet) => void;
+  clearMarkNamespace: (namespace: string) => void;
+  clearAllUserMarks: () => void;
+  children: ReactNode;
 }
 
 /**
@@ -27,7 +28,7 @@ export interface ViewScreenProps<T> {
  * (theme/quit commands, actions, `ctx.document`, layout, standard status) plus
  * the content-only `ctx.view` slice that viewers contribute on top.
  */
-export function ViewScreen<T>({
+export const ViewScreen = function ViewScreen<T>({
   content,
   controller,
   streaming,
@@ -40,37 +41,37 @@ export function ViewScreen<T>({
   clearMarkNamespace,
   clearAllUserMarks,
   children,
-}: ViewScreenProps<T>) {
+}: ViewScreenProps<T>): ReactNode {
   useProvideViewCommandContext({
     content,
-    reload,
     marks: {
-      setMarkSet,
-      clearNamespace: clearMarkNamespace,
       clearAll: clearAllUserMarks,
-      userMarks,
+      clearNamespace: clearMarkNamespace,
       providerMarks,
+      setMarkSet,
+      userMarks,
     },
-  })
+    reload,
+  });
 
   const items: StatusBarItem[] = [
     ...(statusItems ?? []),
     ...(streaming ? [{ label: "Status:", value: "streaming" }] : []),
-  ]
+  ];
 
   return (
     <DocumentScreen
       controller={controller}
       titleBar={
-        content.title
-          ? { title: content.title, subtitle: content.format }
+        content.title !== undefined && content.title !== ""
+          ? { subtitle: content.format, title: content.title }
           : { title: content.format }
       }
       statusItems={items}
       actions={actions}
-      context={{ kind: content.format, title: content.title, reload }}
+      context={{ kind: content.format, reload, title: content.title }}
     >
       {children}
     </DocumentScreen>
-  )
-}
+  );
+};