@tooee/view 0.11.0 → 0.13.0

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

@@ -1,5 +1,7 @@
 import type { TextBufferRenderable } from "@opentui/core";
+import { useTerminalDimensions } from "@opentui/react";
 import { useBuildCommandContext, useCommand } from "@tooee/commands";
+import { StatusPriority } from "@tooee/layout";
 import { MarkdownView, flattenMarkdown, getFlatBlockText } from "@tooee/renderers";
 import type { CodeBlockRenderer, FlatBlock } from "@tooee/renderers";
 import type { DocumentRowAdapter } from "@tooee/shell";
@@ -7,8 +9,10 @@ import { useMemo, useRef } from "react";
 import type { ReactNode } from "react";
 
 import { markdownHeadingFoldRanges } from "../../folds/markdown-heading-folds.js";
-import { useFoldCommands, useFoldState } from "../../folds/use-folds.js";
+import { useFoldActions, useFoldCommands, useFoldState } from "../../folds/use-folds.js";
 import { useContentDocument } from "../../hooks/use-content-document.js";
+import { OutlinePanel } from "../../outline/outline-panel.js";
+import { useMarkdownOutline } from "../../outline/use-outline.js";
 import type { MarkdownContent, MarkdownLinkActivateHandler } from "../../types.js";
 import { ViewScreen } from "../view-screen.js";
 import type { SubviewProps } from "./types.js";
@@ -17,6 +21,8 @@ interface MarkdownSubviewProps extends SubviewProps {
   content: MarkdownContent;
   codeBlockRenderers?: Record<string, CodeBlockRenderer>;
   onLinkActivate?: MarkdownLinkActivateHandler;
+  /** Open the heading outline beside the document at start. */
+  outline?: boolean;
 }
 
 /** Columns moved per h/l press when scrolling a wide block horizontally. */
@@ -33,6 +39,7 @@ const markdownBlockAdapter = function markdownBlockAdapter(
   blocks: readonly FlatBlock[]
 ): DocumentRowAdapter<FlatBlock> {
   const indices = new Map(blocks.map((block, index) => [block, index]));
+
   return {
     getKey: (block, index) => indices.get(block) ?? index,
     getSource: (block) => block.source,
@@ -44,6 +51,7 @@ export const MarkdownSubview = function MarkdownSubview({
   content,
   codeBlockRenderers,
   onLinkActivate,
+  outline: initialOutline = false,
   decorations,
   actions,
   ...screen
@@ -65,25 +73,43 @@ export const MarkdownSubview = function MarkdownSubview({
       multiSelect: true,
       preserveCursorByKey: true,
       statusItems: [
-        { label: "Format:", value: content.format },
-        { label: "Lines:", value: String(lineCount) },
+        { label: "Format:", priority: StatusPriority.content, value: content.format },
+        { label: "Lines:", priority: StatusPriority.content, value: String(lineCount) },
       ],
     }
   );
-  useFoldCommands(folds, document.navigation);
+
+  const foldActions = useFoldActions(folds, document.navigation);
+  useFoldCommands(folds, foldActions, document.navigation);
+
+  // Declared after the controller, so its jump effect runs after the
+  // controller has taken the new rows.
+  const outline = useMarkdownOutline({
+    blocks,
+    folds,
+    initialOpen: initialOutline,
+    navigation: document.navigation,
+    revealRow: document.revealRow,
+  });
+
+  const { width: terminalWidth } = useTerminalDimensions();
   const buildCommandContext = useBuildCommandContext();
+
   const handleLinkActivate = onLinkActivate
     ? (href: string) => onLinkActivate(href, buildCommandContext())
     : undefined;
 
   const hScrollableBlocksRef = useRef<Map<number, TextBufferRenderable>>(new Map());
+
   const cursorScrollable = () =>
     document.activeIndex === null
       ? undefined
       : hScrollableBlocksRef.current.get(document.activeIndex);
+
   useCommand({
     handler: () => {
       const target = cursorScrollable();
+
       if (target) {
         target.scrollX -= BLOCK_HSCROLL_STEP;
       }
@@ -97,6 +123,7 @@ export const MarkdownSubview = function MarkdownSubview({
   useCommand({
     handler: () => {
       const target = cursorScrollable();
+
       if (target) {
         target.scrollX += BLOCK_HSCROLL_STEP;
       }
@@ -114,6 +141,7 @@ export const MarkdownSubview = function MarkdownSubview({
       controller={document}
       actions={actions}
       statusItems={statusItems}
+      aside={<OutlinePanel outline={outline} foldActions={foldActions} />}
       {...screen}
     >
       <MarkdownView
@@ -127,6 +155,7 @@ export const MarkdownSubview = function MarkdownSubview({
         codeBlockRenderers={codeBlockRenderers}
         onLinkActivate={handleLinkActivate}
         imageBasePath={content.imageBasePath}
+        width={outline.visible ? terminalWidth - outline.width : undefined}
       />
     </ViewScreen>
   );

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

@@ -1,3 +1,4 @@
+import { StatusPriority } from "@tooee/layout";
 import { Table, formatTableCell } from "@tooee/renderers";
 import type { TableRow } from "@tooee/renderers";
 import { useMemo } from "react";
@@ -21,6 +22,7 @@ export const TableSubview = function TableSubview({
 }: TableSubviewProps): ReactNode {
   const textContent = useMemo(() => getTextContent(content), [content]);
   const { columns, rows } = content;
+
   const adapter = useMemo(
     () => ({
       getText: (row: TableRow) =>
@@ -28,6 +30,7 @@ export const TableSubview = function TableSubview({
     }),
     [columns]
   );
+
   const { document, showLineNumbers, statusItems } = useContentDocument<TableRow>(
     rows,
     adapter,
@@ -35,9 +38,9 @@ export const TableSubview = function TableSubview({
     {
       multiSelect: true,
       statusItems: [
-        { label: "Format:", value: content.format },
-        { label: "Rows:", value: String(rows.length) },
-        { label: "Cols:", value: String(columns.length) },
+        { label: "Format:", priority: StatusPriority.content, value: content.format },
+        { label: "Rows:", priority: StatusPriority.content, value: String(rows.length) },
+        { label: "Cols:", priority: StatusPriority.content, value: String(columns.length) },
       ],
     }
   );

package/src/components/view-screen.tsx

@@ -1,4 +1,5 @@
 import type { ActionDefinition } from "@tooee/commands";
+import { StatusPriority } from "@tooee/layout";
 import type { StatusBarItem } from "@tooee/layout";
 import type { MarkSet } from "@tooee/marks";
 import { DocumentScreen } from "@tooee/shell";
@@ -21,6 +22,8 @@ export interface ViewScreenProps<T> {
   setMarkSet: (set: MarkSet) => void;
   clearMarkNamespace: (namespace: string) => void;
   clearAllUserMarks: () => void;
+  /** Optional side region beside the content, such as the Markdown outline. */
+  aside?: ReactNode;
   children: ReactNode;
 }
 
@@ -41,6 +44,7 @@ export const ViewScreen = function ViewScreen<T>({
   setMarkSet,
   clearMarkNamespace,
   clearAllUserMarks,
+  aside,
   children,
 }: ViewScreenProps<T>): ReactNode {
   useProvideViewCommandContext({
@@ -57,7 +61,16 @@ export const ViewScreen = function ViewScreen<T>({
 
   const items: StatusBarItem[] = [
     ...(statusItems ?? []),
-    ...(streaming ? [{ label: "Status:", value: "streaming" }] : []),
+    ...(streaming
+      ? [
+          {
+            id: "streaming",
+            label: "Status:",
+            priority: StatusPriority.critical,
+            value: "streaming",
+          },
+        ]
+      : []),
   ];
 
   return (
@@ -71,6 +84,7 @@ export const ViewScreen = function ViewScreen<T>({
       statusItems={items}
       actions={actions}
       context={{ kind: content.format, reload, title: content.title }}
+      aside={aside}
     >
       {children}
     </DocumentScreen>

package/src/content-loader-store.ts

@@ -52,15 +52,19 @@ export const createEmptyContent = function createEmptyContent(
     case "markdown": {
       return { format, markdown: "", title };
     }
+
     case "code": {
       return { code: "", format, title };
     }
+
     case "text": {
       return { format, text: "", title };
     }
+
     case "table": {
       return { columns: [], format, rows: [], title };
     }
+
     default: {
       return { data: undefined, format, title };
     }
@@ -77,6 +81,7 @@ const ensureContentFormat = function ensureContentFormat<F extends ContentFormat
     // 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 }>;
   }
+
   // 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 }>;
@@ -91,30 +96,39 @@ export const applyContentChunk = function applyContentChunk(
     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);
     }
+
     case "marks": {
       return current ?? createEmptyContent("markdown", title);
     }
+
     default: {
       return current ?? createEmptyContent("markdown", title);
     }
@@ -141,14 +155,18 @@ export const createContentLoaderStore = function createContentLoaderStore() {
         if (event.requestId !== ctx.requestId) {
           return ctx;
         }
+
         if (event.chunk.type === "marks") {
           const markSet = event.chunk.set;
+
           const providerMarks = [
             ...ctx.providerMarks.filter((set) => set.namespace !== markSet.namespace),
             markSet,
           ];
+
           return { ...ctx, providerMarks };
         }
+
         return { ...ctx, content: applyContentChunk(ctx.content, event.chunk, ctx.title) };
       },
       loadCancelled: (ctx, event) =>
@@ -183,8 +201,13 @@ export const createContentLoaderStore = function createContentLoaderStore() {
 };
 
 export const selectContent = (ctx: ContentLoaderContext) => ctx.content;
+
 export const selectStatus = (ctx: ContentLoaderContext) => ctx.status;
+
 export const selectStreaming = (ctx: ContentLoaderContext) => ctx.status === "streaming";
+
 export const selectError = (ctx: ContentLoaderContext) => ctx.error;
+
 export const selectProviderMarks = (ctx: ContentLoaderContext) => ctx.providerMarks;
+
 export const selectLoadSeq = (ctx: ContentLoaderContext) => ctx.loadSeq;

package/src/default-provider.ts

@@ -16,26 +16,31 @@ interface DetectedFileFormat {
 
 const detectFormat = function detectFormat(filePath: string): DetectedFileFormat {
   const ext = filePath.split(".").pop()?.toLowerCase();
+
   if (ext === undefined || ext === "") {
     return { format: "text" };
   }
 
   const imageExts = new Set(["png", "jpg", "jpeg", "gif", "webp"]);
+
   if (imageExts.has(ext)) {
     return { format: "image" };
   }
 
   const tableExts = new Set(["csv", "tsv"]);
+
   if (tableExts.has(ext)) {
     return { format: "table" };
   }
 
   const diffExts = new Set(["diff", "patch"]);
+
   if (diffExts.has(ext)) {
     return { format: "diff" };
   }
 
   const markdownExts = new Set(["md", "mdx", "markdown"]);
+
   if (markdownExts.has(ext)) {
     return { format: "markdown" };
   }
@@ -69,6 +74,7 @@ const detectFormat = function detectFormat(filePath: string): DetectedFileFormat
   ]);
 
   const language = codeExts.get(ext);
+
   if (language !== undefined) {
     return { format: "code", language };
   }
@@ -86,22 +92,29 @@ const contentFromText = function contentFromText(
     case "markdown": {
       return { format: "markdown", markdown: text, title };
     }
+
     case "code": {
       return { code: text, format: "code", language, title };
     }
+
     case "diff": {
       return { format: "diff", patch: text, title };
     }
+
     case "table": {
       const parsed = parseAuto(text);
+
       return { columns: parsed.columns, format: "table", rows: parsed.rows, title };
     }
+
     case "text": {
       return { format: "text", text, title };
     }
+
     case "image": {
       return { format: "image", src: text.trim(), title };
     }
+
     default: {
       return { format: "text", text, title };
     }
@@ -124,15 +137,19 @@ export const createFileProvider = function createFileProvider(
 
       const file = Bun.file(filePath);
       const text = await file.text();
+
       // Patches are routinely written to files with no telling extension.
       const resolved =
         options.renderer === undefined && detected.format === "text" && isDiffPatch(text)
           ? "diff"
           : format;
+
       const content = contentFromText(text, resolved, title, detected.language);
+
       if (content.format === "markdown") {
         content.imageBasePath = path.dirname(path.resolve(filePath));
       }
+
       return content;
     },
   };
@@ -145,6 +162,7 @@ export const createStdinProvider = function createStdinProvider(
     async load(): Promise<Content> {
       const text = await new Response(Bun.stdin.stream()).text();
       const format = options.renderer ?? (isDiffPatch(text) ? "diff" : "markdown");
+
       return contentFromText(text, format, "stdin");
     },
   };

package/src/directory-provider.ts

@@ -58,23 +58,30 @@ export const listDirectoryFiles = function listDirectoryFiles(dirPath: string):
     if (entry.startsWith(".")) {
       continue;
     }
+
     const fullPath = path.join(dirPath, entry);
+
     try {
       const stat = statSync(fullPath);
+
       if (!stat.isFile()) {
         continue;
       }
     } catch {
       continue;
     }
+
     const ext = entry.split(".").pop()?.toLowerCase();
+
     if (ext === undefined || ext === "" || !SUPPORTED_EXTENSIONS.has(ext)) {
       continue;
     }
+
     files.push({ name: entry, path: fullPath });
   }
 
   files.sort((a, b) => a.name.localeCompare(b.name));
+
   return files;
 };
 

package/src/directory-view.tsx

@@ -16,6 +16,7 @@ const createDirectoryFileProvider = function createDirectoryFileProvider(
   total: number
 ): ContentProvider {
   const inner = createFileProvider(entry.path);
+
   return {
     async load(): Promise<AnyContent> {
       const result = inner.load();
@@ -23,6 +24,7 @@ const createDirectoryFileProvider = function createDirectoryFileProvider(
       // 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 {
         ...content,
         title: `${entry.name}  (${index + 1}/${total})`,
@@ -51,11 +53,14 @@ export const DirectoryView = function DirectoryView({
     [files, currentIndex]
   );
 
+  // File keys use a `g` sequence. `h` and `l` belong to horizontal scroll in
+  // the markdown and diff subviews, and two commands on one key let mount
+  // order pick the winner.
   useCommand({
     handler: () => {
       setCurrentIndex((i) => Math.min(i + 1, files.length - 1));
     },
-    hotkey: "l",
+    hotkey: "g n",
     id: "dir.next-file",
     modes: ["cursor"],
     title: "Next file",
@@ -65,7 +70,7 @@ export const DirectoryView = function DirectoryView({
     handler: () => {
       setCurrentIndex((i) => Math.max(i - 1, 0));
     },
-    hotkey: "h",
+    hotkey: "g p",
     id: "dir.prev-file",
     modes: ["cursor"],
     title: "Previous file",

package/src/folds/fold-decorations.ts

@@ -11,15 +11,19 @@ export const projectDecorationLayers = function projectDecorationLayers(
   view: FoldView
 ): DecorationLayer[] {
   const { visibleToSource, sourceToVisible } = view;
+
   return layers.map((layer): DecorationLayer => ({
     *forVisibleRows(from: number, to: number): Generator<RowDecoration> {
       const sourceFrom = visibleToSource[from];
       const sourceTo = visibleToSource[Math.min(to, visibleToSource.length - 1)];
+
       if (sourceFrom === undefined || sourceTo === undefined) {
         return;
       }
+
       for (const decoration of layer.forVisibleRows(sourceFrom, sourceTo)) {
         const row = sourceToVisible[decoration.row] ?? -1;
+
         if (row !== -1) {
           yield { ...decoration, row };
         }

package/src/folds/fold-model.ts

@@ -33,6 +33,7 @@ export const computeFoldView = function computeFoldView(
   closedKeys: ReadonlySet<Key>
 ): FoldView {
   const closedEnds = new Map<number, number>();
+
   for (const range of ranges) {
     if (range.end > range.start && closedKeys.has(range.key)) {
       closedEnds.set(range.start, Math.max(closedEnds.get(range.start) ?? range.end, range.end));
@@ -43,14 +44,17 @@ export const computeFoldView = function computeFoldView(
   const sourceToVisible: number[] = Array.from({ length: rowCount }, () => -1);
   const hiddenCounts = new Map<number, number>();
   let hiddenUntil = -1;
+
   for (let index = 0; index < rowCount; index += 1) {
     if (index <= hiddenUntil) {
       continue;
     }
+
     const visibleIndex = visibleToSource.length;
     visibleToSource.push(index);
     sourceToVisible[index] = visibleIndex;
     const end = closedEnds.get(index);
+
     if (end !== undefined) {
       hiddenUntil = Math.min(end, rowCount - 1);
       hiddenCounts.set(visibleIndex, hiddenUntil - index);
@@ -70,6 +74,22 @@ export const foldsAt = function foldsAt(
     .toSorted((left, right) => right.start - left.start || left.end - right.end);
 };
 
+/**
+ * Keys of the closed ranges that hide `row`: closed ranges whose body
+ * (`start + 1 ..= end`) contains it. Opening them all makes `row` visible.
+ */
+export const closedFoldsHiding = function closedFoldsHiding(
+  ranges: readonly FoldRange[],
+  closedKeys: ReadonlySet<Key>,
+  row: number
+): Key[] {
+  return ranges
+    .values()
+    .filter((range) => closedKeys.has(range.key) && range.start < row && row <= range.end)
+    .map((range) => range.key)
+    .toArray();
+};
+
 /**
  * The full-array row the cursor should rest on once `view` applies: `row`
  * itself when it stays visible, otherwise the nearest visible row before it,
@@ -81,5 +101,6 @@ export const visibleAnchorRow = function visibleAnchorRow(view: FoldView, row: n
       return index;
     }
   }
+
   return row;
 };

package/src/folds/markdown-heading-folds.ts

@@ -3,13 +3,19 @@ import type { Tokens } from "marked";
 
 import type { FoldRange } from "./fold-model.js";
 
-const headingDepth = function headingDepth(block: FlatBlock): number | null {
+/** The Marked heading token of a flattened block, or `null` when the block is not a heading. */
+export const headingToken = function headingToken(block: FlatBlock): Tokens.Heading | null {
   if (block.token.type !== "heading") {
     return null;
   }
+
   // SAFETY: Marked creates a Heading token for the checked "heading" discriminator.
   // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- Marked's Generic fallback prevents discriminator narrowing
-  return (block.token as Tokens.Heading).depth;
+  return block.token as Tokens.Heading;
+};
+
+const headingDepth = function headingDepth(block: FlatBlock): number | null {
+  return headingToken(block)?.depth ?? null;
 };
 
 /**
@@ -23,6 +29,7 @@ export const markdownHeadingFoldRanges = function markdownHeadingFoldRanges(
 ): FoldRange[] {
   const ranges: FoldRange[] = [];
   const open: { depth: number; start: number }[] = [];
+
   const close = (start: number, end: number) => {
     if (end > start) {
       ranges.push({ end, key: start, start });
@@ -31,17 +38,22 @@ export const markdownHeadingFoldRanges = function markdownHeadingFoldRanges(
 
   for (const [index, block] of blocks.entries()) {
     const depth = headingDepth(block);
+
     if (depth === null) {
       continue;
     }
+
     while (open.length > 0 && (open.at(-1)?.depth ?? 0) >= depth) {
       const finished = open.pop();
+
       if (finished) {
         close(finished.start, index - 1);
       }
     }
+
     open.push({ depth, start: index });
   }
+
   for (const finished of open) {
     close(finished.start, blocks.length - 1);
   }