@tooee/view 0.12.0 → 0.13.0

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);
@@ -80,8 +84,10 @@ export const closedFoldsHiding = function closedFoldsHiding(
   row: number
 ): Key[] {
   return ranges
+    .values()
     .filter((range) => closedKeys.has(range.key) && range.start < row && row <= range.end)
-    .map((range) => range.key);
+    .map((range) => range.key)
+    .toArray();
 };
 
 /**
@@ -95,5 +101,6 @@ export const visibleAnchorRow = function visibleAnchorRow(view: FoldView, row: n
       return index;
     }
   }
+
   return row;
 };

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

@@ -8,6 +8,7 @@ export const headingToken = function headingToken(block: FlatBlock): Tokens.Head
   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;
@@ -28,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 });
@@ -36,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);
   }

package/src/folds/use-folds.ts

@@ -39,10 +39,12 @@ export const useFoldState = function useFoldState<T>(
   decorations: DecorationLayer[]
 ): FoldState<T> {
   const [closedKeys, setClosedKeys] = useState<ReadonlySet<Key>>(EMPTY_KEYS);
+
   const view = useMemo(
     () => computeFoldView(rows.length, ranges, closedKeys),
     [rows.length, ranges, closedKeys]
   );
+
   const folded = view.visibleToSource.length < rows.length;
 
   const visibleRows = useMemo(
@@ -50,15 +52,18 @@ export const useFoldState = function useFoldState<T>(
       folded
         ? view.visibleToSource.flatMap((index) => {
             const row = rows[index];
+
             return row === undefined ? [] : [row];
           })
         : rows,
     [folded, rows, view]
   );
+
   const visibleDecorations = useMemo(
     () => (folded ? projectDecorationLayers(decorations, view) : decorations),
     [folded, decorations, view]
   );
+
   const rowNumbers = useMemo(
     () => (folded ? view.visibleToSource.map((index) => index + 1) : undefined),
     [folded, view]
@@ -109,27 +114,36 @@ export const useFoldActions = function useFoldActions<T>(
     if (cursorRow !== undefined) {
       const anchor = visibleAnchorRow(computeFoldView(rowCount, ranges, next), cursorRow);
       const anchorIndex = view.sourceToVisible[anchor] ?? -1;
+
       if (anchor !== cursorRow && anchorIndex !== -1) {
         setCursor(anchorIndex);
       }
     }
+
     setClosedKeys(next);
   };
+
   const withKey = (key: Key | undefined, closed: boolean): boolean => {
     if (key === undefined) {
       return false;
     }
+
     const next = new Set(closedKeys);
+
     if (closed) {
       next.add(key);
     } else {
       next.delete(key);
     }
+
     apply(next);
+
     return true;
   };
+
   const close = (row: number) =>
     withKey(foldsAt(ranges, row).find((range) => !closedKeys.has(range.key))?.key, true);
+
   const open = (row: number) =>
     withKey(foldsAt(ranges, row).find((range) => closedKeys.has(range.key))?.key, false);
 
@@ -144,6 +158,7 @@ export const useFoldActions = function useFoldActions<T>(
     },
     toggle: (row) => {
       const [innermost] = foldsAt(ranges, row);
+
       return withKey(innermost?.key, innermost !== undefined && !closedKeys.has(innermost.key));
     },
     toggleBlock: (row) =>
@@ -168,10 +183,12 @@ export const foldActionDefinitions = function foldActionDefinitions(
     (run: (row: number) => boolean) =>
     (ctx: CommandContext): void => {
       const row = targetRow();
+
       if (row === undefined || !run(row)) {
         ctx.toast?.toast({ level: "warning", message: noFoldMessage });
       }
     };
+
   const definitions: [hotkey: string, id: string, title: string, handler: CommandHandler][] = [
     ["z a", "toggle", "Toggle fold", atTarget(actions.toggle)],
     ["z c", "close", "Close fold", atTarget(actions.close)],
@@ -180,6 +197,7 @@ export const foldActionDefinitions = function foldActionDefinitions(
     ["z shift+m", "close-all", "Close all folds", actions.closeAll],
     ["z shift+r", "open-all", "Open all folds", actions.openAll],
   ];
+
   return definitions.map(([hotkey, id, title, handler]) => ({
     category: "Fold",
     handler,

package/src/hooks/use-content-document.ts

@@ -1,4 +1,5 @@
 import type { ActionDefinition } from "@tooee/commands";
+import { StatusPriority } from "@tooee/layout";
 import type { StatusBarItem } from "@tooee/layout";
 import type { DecorationLayer } from "@tooee/renderers";
 import { useDocumentController } from "@tooee/shell";
@@ -37,6 +38,7 @@ export const useContentDocument = function useContentDocument<T>(
   options: ContentDocumentOptions<T>
 ): ContentDocumentResult<T> {
   const { showLineNumbers } = useContentCommands({ content, textContent });
+
   const document = useDocumentController<T>({
     adapter,
     contextMenu: options.contextMenu === false ? false : actions,
@@ -45,10 +47,11 @@ export const useContentDocument = function useContentDocument<T>(
     preserveCursorByKey: options.preserveCursorByKey,
     rows,
   });
+
   const statusItems = options.buildStatusItems?.(document) ??
     options.statusItems ?? [
-      { label: "Format:", value: content.format },
-      { label: "Lines:", value: String(rows.length) },
+      { label: "Format:", priority: StatusPriority.content, value: content.format },
+      { label: "Lines:", priority: StatusPriority.content, value: String(rows.length) },
     ];
 
   return { document, showLineNumbers, statusItems };

package/src/hooks/use-content-loader.ts

@@ -39,6 +39,7 @@ export const useContentLoader = function useContentLoader(
     });
     const { requestId } = store.getSnapshot().context;
     const loaded = contentProvider.load();
+
     let cleanup: () => void = () => {
       // Synchronous providers have no pending work to cancel.
     };
@@ -55,16 +56,20 @@ export const useContentLoader = function useContentLoader(
             // preserve sequential stream consumption for ordered backpressure.
             // oxlint-disable-next-line no-await-in-loop -- each chunk must be consumed in iterator order
             const result = await iterator.next();
+
             if (result.done === true) {
               break;
             }
+
             store.trigger.chunkReceived({ chunk: result.value, requestId });
           }
+
           store.trigger.streamEnded({ requestId });
         } catch (error) {
           store.trigger.loadFailed({ error: normalizeError(error), requestId });
         }
       })();
+
       cleanup = () => {
         store.trigger.loadCancelled({ requestId });
         void (async () => {
@@ -84,6 +89,7 @@ export const useContentLoader = function useContentLoader(
           store.trigger.loadFailed({ error: normalizeError(error), requestId });
         }
       })();
+
       cleanup = () => {
         store.trigger.loadCancelled({ requestId });
       };
@@ -99,6 +105,7 @@ export const useContentLoader = function useContentLoader(
   const error = useSelector(store, (snapshot) => selectError(snapshot.context));
   const providerMarks = useSelector(store, (snapshot) => selectProviderMarks(snapshot.context));
   const status = useSelector(store, (snapshot) => selectStatus(snapshot.context));
+
   const reload = useCallback(() => {
     store.trigger.reloadRequested({});
   }, [store]);

package/src/hooks/use-view-command-context.ts

@@ -72,6 +72,7 @@ export const createViewCommandContext = function createViewCommandContext({
   marks,
 }: CreateViewCommandContextOptions): ViewCommandContext {
   const resolvedFormat = format ?? content?.format ?? "custom";
+
   const resolvedContent: AnyContent =
     content ??
     ({

package/src/index.ts

@@ -1,27 +1,39 @@
 export { View } from "./view.js";
+
 export { DirectoryView } from "./directory-view.js";
+
 export { launch, launchDirectory } from "./launch.js";
+
 export type { ViewLaunchOptions } from "./launch.js";
+
 export {
   createFileProvider,
   createStdinProvider,
   createTableFileProvider,
   createTableStdinProvider,
 } from "./default-provider.js";
+
 export type { CreateProviderOptions } from "./default-provider.js";
+
 export { listDirectoryFiles } from "./directory-provider.js";
+
 export type { DirectoryEntry } from "./directory-provider.js";
+
 export {
   createViewCommandContext,
   useProvideViewCommandContext,
 } from "./hooks/use-view-command-context.js";
+
 export type {
   CreateViewCommandContextOptions,
   ProvideViewCommandContextOptions,
   ViewCommandContext,
 } from "./hooks/use-view-command-context.js";
+
 export type { ContentLoaderState } from "./hooks/use-content-loader.js";
+
 export type { ContentCommandsResult } from "./hooks/use-content-commands.js";
+
 export type {
   AnyContent,
   Content,
@@ -43,8 +55,13 @@ export type {
   ColumnDef,
   TableRow,
 } from "./types.js";
+
 export { getTextContent, isBuiltinContent, isCustomContent } from "./types.js";
+
 export { CodeBlockChrome } from "@tooee/renderers";
+
 export type { CodeBlockRenderer, CodeBlockRendererProps, CodeBlockHScroll } from "@tooee/renderers";
+
 export { localFileLinkHandler } from "./link-handlers.js";
+
 export type { LinkHandler, LinkHandlerContext, LinkTarget } from "./link-handlers.js";

package/src/launch.tsx

@@ -7,7 +7,7 @@ import type { ReactNode } from "react";
 import { DirectoryView } from "./directory-view.js";
 import type { LinkHandler } from "./link-handlers.js";
 import { createStandaloneRouter } from "./standalone-router.js";
-import type { ContentProvider, ContentRenderer } from "./types.js";
+import type { ContentProvider, ContentRenderer, MarkdownLinkActivateHandler } from "./types.js";
 
 export interface ViewLaunchOptions {
   contentProvider: ContentProvider;
@@ -15,6 +15,12 @@ export interface ViewLaunchOptions {
   filePath?: string;
   /** Synchronous handlers tried before local file navigation. */
   linkHandlers?: readonly LinkHandler[];
+  /**
+   * Handles activation of a Markdown link, by mouse or by Enter on the cursor
+   * line. When set, it replaces the default handling: `linkHandlers`, local
+   * file navigation, and the stdin "Links need a source file" toast.
+   */
+  onMarkdownLinkActivate?: MarkdownLinkActivateHandler;
   actions?: ActionDefinition[];
   renderers?: Record<string, ContentRenderer>;
   /**
@@ -35,9 +41,11 @@ export interface DirectoryLaunchOptions {
 export const launch = async function launch(options: ViewLaunchOptions): Promise<void> {
   const { router } = createStandaloneRouter(options);
   const startup = await router.start();
+
   if (startup.status !== "committed") {
     throw new Error(`View router startup ${startup.status}`);
   }
+
   await runCliSession<undefined>(
     (): ReactNode => (
       <RouterProvider router={router}>

package/src/link-handlers.ts

@@ -24,22 +24,29 @@ export type LinkHandler = (link: LinkTarget, context: LinkHandlerContext) => boo
 
 export const localFileLinkHandler: LinkHandler = function localFileLinkHandler(link, context) {
   const result = resolveMarkdownLink(link.href, link.baseDir, link.currentPath);
+
   if (result.status === "unsupported") {
     return false;
   }
+
   if (result.status === "file") {
     void context.navigate.push(context.documentRoute, { path: result.path });
+
     return true;
   }
+
   const relative = path.relative(link.baseDir, result.path);
+
   const target =
     relative === ".." || relative.startsWith(`..${path.sep}`) || path.isAbsolute(relative)
       ? result.path
       : relative || ".";
+
   context.command.toast?.toast({
     level: "warning",
     message: `${result.status === "missing" ? "File not found" : "Not a file"}: ${target}`,
   });
+
   return true;
 };
 
@@ -54,9 +61,12 @@ export const runLinkHandlers = function runLinkHandlers(
       return true;
     }
   }
+
   if (localFileLinkHandler(link, context)) {
     return true;
   }
+
   context.command.toast?.toast({ level: "warning", message: `Unsupported link: ${link.href}` });
+
   return true;
 };