@mak-98/dirvi-cli 0.4.0 → 0.6.0

package/dist/ui/AppShell.js

@@ -1,14 +1,11 @@
-import { jsx as _jsx } from 'react/jsx-runtime';
-import { Text } from 'ink';
-import { App } from './App.js';
-export function AppShell({ cwdAddress, initialState, print, onError }) {
-  if (initialState.cursor === undefined) {
-    return _jsx(Text, { dimColor: true, children: 'Directory is empty.' });
-  }
-  return _jsx(App, {
-    cwdAddress: cwdAddress,
-    initialState: initialState,
-    print: print,
-    onError: onError,
-  });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { loadPosixAppApi } from '../infrastructure/load-posix-app-api.js';
+import { LoadingApp } from './LoadingApp.js';
+import { useMemo } from 'react';
+// App Shell is for choosing the active app, then loading the api,
+// and showing the app.
+export function AppShell({ directory, stdout, clipboard, onError }) {
+    // Api owns directory watcher and subscriptions
+    const posixAppApi = useMemo(() => loadPosixAppApi(directory), [directory]);
+    return (_jsx(LoadingApp, { appApi: posixAppApi, ...(stdout === undefined ? {} : { stdout }), ...(clipboard === undefined ? {} : { clipboard }), ...(onError === undefined ? {} : { onError }) }));
 }

package/dist/ui/LoadingApp.d.ts

@@ -0,0 +1,11 @@
+import { SerializableKey, TreeNode } from 'dirvi-lib';
+import { AppApi } from '../domain/app-api.js';
+type LoadingAppProps<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>> = {
+    appApi: AppApi<Id, BufferNode>;
+    stdout?: (message: string) => void;
+    clipboard?: (value: string) => void;
+    onError?: (error: Error) => void;
+};
+export declare function LoadingApp<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>({ appApi, stdout, clipboard, onError }: LoadingAppProps<Id, BufferNode>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=LoadingApp.d.ts.map

package/dist/ui/LoadingApp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingApp.d.ts","sourceRoot":"","sources":["../../src/ui/LoadingApp.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,eAAe,EAEf,QAAQ,EACT,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAI9C,KAAK,eAAe,CAClB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,IACzC;IACF,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AA0BF,wBAAgB,UAAU,CACxB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,EAC3C,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC,EAAE,EAAE,UAAU,CAAC,+BAgGxE"}

package/dist/ui/LoadingApp.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect, useMemo, useState } from 'react';
+import { createIntentToEffect, } from 'dirvi-lib';
+import { App } from './App.js';
+import { createReducer } from '../application/reducer.js';
+import { createEffectToAction } from '../application/effect-to-action.js';
+function createInitialState(rootBranches, createEmptyFoldRoot) {
+    if (rootBranches.length === 0) {
+        throw new Error('createInitialState cannot create a state for an empty forest');
+    }
+    return {
+        buffer: rootBranches,
+        foldNode: createEmptyFoldRoot(),
+        cursor: {
+            kind: 'entry',
+            parentPath: [],
+            entryId: rootBranches[0].id,
+        },
+    };
+}
+export function LoadingApp({ appApi, stdout, clipboard, onError }) {
+    const [initialState, setInitialState] = useState();
+    const [empty, setEmpty] = useState(false);
+    const [error, setError] = useState();
+    useEffect(() => {
+        let mounted = true;
+        appApi
+            .loadBranches([])
+            .then((rootBranches) => {
+            if (!mounted) {
+                return;
+            }
+            if (rootBranches.length === 0) {
+                setEmpty(true);
+                return;
+            }
+            setInitialState(createInitialState(rootBranches, () => appApi.foldNodeService.createEmptyRoot()));
+        })
+            .catch((cause) => {
+            const nextError = cause instanceof Error ? cause : new Error(String(cause));
+            if (!mounted) {
+                return;
+            }
+            setError(nextError);
+            onError?.(nextError);
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [appApi, onError]);
+    // --- Pure function deps ---
+    const reducer = useMemo(() => createReducer(appApi.treeNodeApi, appApi.foldNodeService), [appApi.treeNodeApi, appApi.foldNodeService]);
+    const intentToEffect = useMemo(() => createIntentToEffect(appApi.stateApi, appApi.cursorApi, appApi.treeNodeApi), [appApi.stateApi, appApi.cursorApi, appApi.treeNodeApi]);
+    const effectToAction = useMemo(() => createEffectToAction(appApi.treeNodeApi, appApi.cursorApi, appApi.navNodeApi), [appApi.treeNodeApi, appApi.navNodeApi, appApi.cursorApi]);
+    // --- JSX ---
+    if (error !== undefined) {
+        return _jsx(Text, { color: "red", children: error.message });
+    }
+    if (empty) {
+        return _jsx(Text, { dimColor: true, children: appApi.emptyForestMessage });
+    }
+    if (initialState === undefined) {
+        return _jsx(Text, { dimColor: true, children: "Loading." });
+    }
+    return (_jsx(App, { appApi: appApi, initialState: initialState, reducer: reducer, intentToEffect: intentToEffect, effectToAction: effectToAction, ...(stdout === undefined ? {} : { stdout }), ...(clipboard === undefined ? {} : { clipboard }), ...(onError === undefined ? {} : { onError }) }));
+}

package/dist/ui/components/StatusBar.d.ts

@@ -1,10 +1,8 @@
 import { InputState } from 'dirvi-lib';
 export declare const STATUS_BAR_HEIGHT = 1;
 type StatusBarProps = {
-  inputState: InputState;
+    inputState: InputState;
 };
-export declare function StatusBar({
-  inputState,
-}: StatusBarProps): import('react').JSX.Element;
+export declare function StatusBar({ inputState }: StatusBarProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=StatusBar.d.ts.map
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/ui/components/StatusBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../src/ui/components/StatusBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,UAAU,CAAA;CACvB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,EAAE,cAAc,+BAyBvD"}
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../src/ui/components/StatusBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,UAAU,CAAC;CACxB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,EAAE,cAAc,+BAyBvD"}

package/dist/ui/components/StatusBar.js

@@ -1,32 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export const STATUS_BAR_HEIGHT = 1;
 export function StatusBar({ inputState }) {
-  const inputMode = inputState.inputMode;
-  return _jsxs(Box, {
-    width: '100%',
-    height: STATUS_BAR_HEIGHT,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    flexShrink: 0,
-    backgroundColor: 'gray',
-    children: [
-      _jsx(Box, {
-        flexShrink: 1,
-        children: _jsx(Text, {
-          color: 'black',
-          wrap: 'truncate-end',
-          children: inputMode === 'command' ? inputState.commandLine : '',
-        }),
-      }),
-      _jsx(Box, {
-        flexShrink: 1,
-        children: _jsx(Text, {
-          color: 'black',
-          wrap: 'truncate-start',
-          children: inputMode === 'normal' ? inputState.normalBuffer : '',
-        }),
-      }),
-    ],
-  });
+    const inputMode = inputState.inputMode;
+    return (_jsxs(Box, { width: "100%", height: STATUS_BAR_HEIGHT, flexDirection: "row", justifyContent: "space-between", flexShrink: 0, backgroundColor: 'gray', children: [_jsx(Box, { flexShrink: 1, children: _jsx(Text, { color: "black", wrap: "truncate-end", children: inputMode === 'command' ? inputState.commandLine : '' }) }), _jsx(Box, { flexShrink: 1, children: _jsx(Text, { color: "black", wrap: "truncate-start", children: inputMode === 'normal' ? inputState.normalBuffer : '' }) })] }));
 }

package/dist/ui/components/ViewRowComponent.d.ts

@@ -1,7 +1,5 @@
 import { ViewRow } from '../view.js';
-export declare function ViewRowComponent({
-  row,
-}: {
-  row: ViewRow;
-}): import('react').JSX.Element;
-//# sourceMappingURL=ViewRowComponent.d.ts.map
+export declare function ViewRowComponent({ row }: {
+    row: ViewRow;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ViewRowComponent.d.ts.map

package/dist/ui/components/ViewRowComponent.js

@@ -1,33 +1,13 @@
-import { jsxs as _jsxs, jsx as _jsx } from 'react/jsx-runtime';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export function ViewRowComponent({ row }) {
-  const prefix = '';
-  switch (row.type) {
-    case 'file':
-      return _jsx(Box, {
-        paddingLeft: row.indent * 2,
-        children: _jsxs(Text, {
-          inverse: row.selected,
-          children: [prefix, row.content],
-        }),
-      });
-    case 'directory':
-      return _jsx(Box, {
-        paddingLeft: row.indent * 2,
-        children: _jsxs(Text, {
-          inverse: row.selected,
-          color: 'blue',
-          children: [prefix, row.content],
-        }),
-      });
-    case 'fold':
-      return _jsx(Box, {
-        paddingLeft: row.indent * 2,
-        children: _jsxs(Text, {
-          inverse: row.selected,
-          dimColor: true,
-          children: [prefix, row.content],
-        }),
-      });
-  }
+    const prefix = '';
+    switch (row.type) {
+        case 'leaf':
+            return (_jsx(Box, { paddingLeft: row.indent * 2, children: _jsxs(Text, { inverse: row.selected, children: [prefix, row.content] }) }));
+        case 'branch':
+            return (_jsx(Box, { paddingLeft: row.indent * 2, children: _jsxs(Text, { inverse: row.selected, color: "blue", children: [prefix, row.content] }) }));
+        case 'fold':
+            return (_jsx(Box, { paddingLeft: row.indent * 2, children: _jsxs(Text, { inverse: row.selected, dimColor: true, children: [prefix, row.content] }) }));
+    }
 }

package/dist/ui/hooks/useView.d.ts

@@ -1,8 +1,5 @@
-import { NavigationNode, State } from 'dirvi-lib';
+import { CursorApi, NavNode, SerializableKey, State, TreeNode } from 'dirvi-lib';
 import { View } from '../view.js';
-export declare function useView(
-  navigation: NavigationNode,
-  state: State,
-  terminalRows: number,
-): View;
-//# sourceMappingURL=useView.d.ts.map
+export type UseView = <Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>(navigation: NavNode<Id, BufferNode>, state: State<Id, BufferNode>, terminalRows: number) => View;
+export declare function useView<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>(navigation: NavNode<Id, BufferNode>, state: State<Id, BufferNode>, cursorApi: CursorApi<Id>, terminalRows: number): View;
+//# sourceMappingURL=useView.d.ts.map

package/dist/ui/hooks/useView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useView.d.ts","sourceRoot":"","sources":["../../../src/ui/hooks/useView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,IAAI,EAAW,MAAM,YAAY,CAAC;AAO3C,wBAAgB,OAAO,CACrB,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,MAAM,GACnB,IAAI,CAkBN"}
+{"version":3,"file":"useView.d.ts","sourceRoot":"","sources":["../../../src/ui/hooks/useView.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,eAAe,EACf,KAAK,EACL,QAAQ,EACT,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,IAAI,EAAW,MAAM,YAAY,CAAC;AAI3C,MAAM,MAAM,OAAO,GAAG,CACpB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,EAE3C,UAAU,EAAE,OAAO,CAAC,EAAE,EAAE,UAAU,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,EAC5B,YAAY,EAAE,MAAM,KACjB,IAAI,CAAC;AAIV,wBAAgB,OAAO,CACrB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,EAE3C,UAAU,EAAE,OAAO,CAAC,EAAE,EAAE,UAAU,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,EAC5B,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC,EACxB,YAAY,EAAE,MAAM,GACnB,IAAI,CAoBN"}

package/dist/ui/hooks/useView.js

@@ -3,36 +3,27 @@ import { useRef } from 'react';
 import { STATUS_BAR_HEIGHT } from '../components/StatusBar.js';
 // Hooks that keeps Ref of the viewport's start, and returns View sliced to
 // only the rows that should be visible.
-export function useView(navigation, state, terminalRows) {
-  const viewportStartRef = useRef(0);
-  const viewportHeight = Math.max(1, terminalRows - STATUS_BAR_HEIGHT);
-  const rows = View.createRows(navigation, state.cursor);
-  viewportStartRef.current = viewportStart(
-    rows,
-    viewportHeight,
-    viewportStartRef.current,
-  );
-  return View.create(
-    navigation,
-    state.cursor,
-    viewportHeight,
-    viewportStartRef.current,
-  );
+export function useView(navigation, state, cursorApi, terminalRows) {
+    const viewportStartRef = useRef(0);
+    const viewportHeight = Math.max(1, terminalRows - STATUS_BAR_HEIGHT);
+    const rows = View.createRows(navigation, state.cursor, cursorApi);
+    viewportStartRef.current = viewportStart(rows, viewportHeight, viewportStartRef.current);
+    return View.create(navigation, state.cursor, cursorApi, viewportHeight, viewportStartRef.current);
 }
 function viewportStart(rows, viewportHeight, currentViewportStart) {
-  const scrollMargin = 3;
-  const cursorIndex = rows.findIndex((row) => row.cursor);
-  const maximumViewportStart = Math.max(0, rows.length - viewportHeight);
-  let viewportStart = currentViewportStart;
-  if (cursorIndex >= 0) {
-    const firstVisibleCursorIndex = viewportStart + scrollMargin;
-    const lastVisibleCursorIndex =
-      viewportStart + viewportHeight - 1 - scrollMargin;
-    if (cursorIndex < firstVisibleCursorIndex) {
-      viewportStart = cursorIndex - scrollMargin;
-    } else if (cursorIndex > lastVisibleCursorIndex) {
-      viewportStart = cursorIndex - viewportHeight + 1 + scrollMargin;
+    const scrollMargin = 3;
+    const cursorIndex = rows.findIndex((row) => row.cursor);
+    const maximumViewportStart = Math.max(0, rows.length - viewportHeight);
+    let viewportStart = currentViewportStart;
+    if (cursorIndex >= 0) {
+        const firstVisibleCursorIndex = viewportStart + scrollMargin;
+        const lastVisibleCursorIndex = viewportStart + viewportHeight - 1 - scrollMargin;
+        if (cursorIndex < firstVisibleCursorIndex) {
+            viewportStart = cursorIndex - scrollMargin;
+        }
+        else if (cursorIndex > lastVisibleCursorIndex) {
+            viewportStart = cursorIndex - viewportHeight + 1 + scrollMargin;
+        }
     }
-  }
-  return Math.max(0, Math.min(viewportStart, maximumViewportStart));
+    return Math.max(0, Math.min(viewportStart, maximumViewportStart));
 }

package/dist/ui/view.d.ts

@@ -1,23 +1,19 @@
-import { Cursor, NavigationNode } from 'dirvi-lib';
-export type ViewRowType = 'file' | 'directory' | 'fold';
+import { CursorApi, SerializableKey, TreeNode } from 'dirvi-lib';
+import { Cursor, NavNode } from 'dirvi-lib';
+export type ViewRowType = 'leaf' | 'branch' | 'fold';
 export type ViewRow = {
-  id: string;
-  indent: number;
-  selected: boolean;
-  cursor: boolean;
-  content: string;
-  type: ViewRowType;
+    id: string;
+    indent: number;
+    selected: boolean;
+    cursor: boolean;
+    content: string;
+    type: ViewRowType;
 };
 export type View = {
-  rows: ViewRow[];
+    rows: ViewRow[];
 };
 export declare const View: {
-  createRows(navigation: NavigationNode, cursor: Cursor): ViewRow[];
-  create(
-    navigation: NavigationNode,
-    cursor: Cursor,
-    viewportHeight: number,
-    viewportStart: number,
-  ): View;
+    createRows<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>(navigation: NavNode<Id, BufferNode>, cursor: Cursor<Id>, cursorApi: CursorApi<Id>): ViewRow[];
+    create<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>(navigation: NavNode<Id, BufferNode>, cursor: Cursor<Id>, cursorApi: CursorApi<Id>, viewportHeight: number, viewportStart: number): View;
 };
-//# sourceMappingURL=view.d.ts.map
+//# sourceMappingURL=view.d.ts.map

package/dist/ui/view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/ui/view.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EAEN,cAAc,EAEf,MAAM,WAAW,CAAC;AAEnB,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;AAMxD,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,IAAI;2BACQ,cAAc,UAAU,MAAM,GAAG,OAAO,EAAE;uBAKnD,cAAc,UAClB,MAAM,kBACE,MAAM,iBACP,MAAM,GACpB,IAAI;CAOR,CAAC"}
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../src/ui/view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,MAAM,EAAyB,OAAO,EAAE,MAAM,WAAW,CAAC;AAEnE,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAMrD,MAAM,MAAM,OAAO,GAAG;IAEpB,EAAE,EAAE,MAAM,CAAC;IAGX,MAAM,EAAE,MAAM,CAAC;IAGf,QAAQ,EAAE,OAAO,CAAC;IAGlB,MAAM,EAAE,OAAO,CAAC;IAGhB,OAAO,EAAE,MAAM,CAAC;IAGhB,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,IAAI;eAEb,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,cAE/B,OAAO,CAAC,EAAE,EAAE,UAAU,CAAC,UAC3B,MAAM,CAAC,EAAE,CAAC,aACP,SAAS,CAAC,EAAE,CAAC,GACvB,OAAO,EAAE;WAKV,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,cAE/B,OAAO,CAAC,EAAE,EAAE,UAAU,CAAC,UAC3B,MAAM,CAAC,EAAE,CAAC,aACP,SAAS,CAAC,EAAE,CAAC,kBACR,MAAM,iBACP,MAAM,GACpB,IAAI;CAOR,CAAC"}

package/dist/ui/view.js

@@ -1,78 +1,98 @@
-import { UnixEntryPath } from 'dirvi-lib';
+import { isNavBranch } from 'dirvi-lib';
 export const View = {
-  createRows(navigation, cursor) {
-    return viewRowsAtNode(navigation, [], cursor);
-  },
-  create(navigation, cursor, viewportHeight, viewportStart) {
-    const rows = View.createRows(navigation, cursor);
-    return {
-      rows: rows.slice(viewportStart, viewportStart + viewportHeight),
-    };
-  },
+    createRows(navigation, cursor, cursorApi) {
+        return viewRowsAtNode(navigation, [], cursor, cursorApi);
+    },
+    create(navigation, cursor, cursorApi, viewportHeight, viewportStart) {
+        const rows = View.createRows(navigation, cursor, cursorApi);
+        return {
+            rows: rows.slice(viewportStart, viewportStart + viewportHeight),
+        };
+    },
 };
-function viewRowsAtNode(node, parentPath, cursor) {
-  const rows = [];
-  for (const entry of node.entries) {
-    const isCursor =
-      cursor.kind === 'entry' &&
-      UnixEntryPath.equal(cursor.parentPath, parentPath) &&
-      cursor.entryName === entry.name;
-    rows.push(viewRowForEntry(entry, parentPath, isCursor));
-    if (entry.kind !== 'directory' || entry.node === undefined) {
-      continue;
+/**
+ * Converts one NavNode and its descendants into display ViewRows.
+ *
+ * `node` is the directory currently being visited.
+ *
+ * `parentPath` is the path of that directory. For example:
+ *
+ *   []              root directory
+ *   ['src']         root/src
+ *   ['src', 'lib']  root/src/lib
+ *
+ * The function uses a depth-first, pre-order traversal:
+ *
+ *   1. Add an entry's row.
+ *   2. If the entry is an opened branch, recursively add its children.
+ *   3. After all visible entries, add the directory's fold row.
+ *
+ * This ordering is what makes the flat row list visually represent a tree.
+ */
+function viewRowsAtNode(node, parentPath, cursor, cursorApi) {
+    const rows = [];
+    /*
+     * `node.entries` contains only the entries currently visible in this
+     * directory. Folded entries are kept separately in `node.foldedEntries`
+     * and are represented by one fold row added below.
+     */
+    for (const entry of node.entries) {
+        const entryCursor = {
+            kind: 'entry',
+            parentPath,
+            entryId: entry.id,
+        };
+        // If cursor at entry, needs to be rendered differently
+        const isCursor = cursorApi.equal(cursor, entryCursor);
+        // Add entry before visiting branches
+        rows.push(viewRowForEntry(entry, parentPath, isCursor));
+        // Case where there's no branches
+        if (!isNavBranch(entry) || entry.children === null) {
+            continue;
+        }
+        rows.push(...viewRowsAtNode(entry.children, [...parentPath, entry.id], cursor, cursorApi));
+    }
+    /*
+     * Folded entries are not rendered individually. They are represented
+     * by one synthetic row placed after all visible entries and descendants
+     * of this directory.
+     */
+    if (node.foldedEntries.length > 0) {
+        const foldCursor = {
+            kind: 'fold',
+            parentPath,
+        };
+        const isCursor = cursorApi.equal(cursor, foldCursor);
+        rows.push({
+            id: foldId(parentPath),
+            indent: parentPath.length,
+            selected: isCursor,
+            cursor: isCursor,
+            content: `⋯ ${node.foldedEntries.length} folded`,
+            type: 'fold',
+        });
     }
-    rows.push(
-      ...viewRowsAtNode(entry.node, [...parentPath, entry.name], cursor),
-    );
-  }
-  if (node.foldedEntries.length > 0) {
-    const isCursor =
-      cursor.kind === 'fold' &&
-      UnixEntryPath.equal(cursor.parentPath, parentPath);
-    rows.push({
-      id: foldId(parentPath),
-      indent: parentPath.length,
-      selected: isCursor,
-      cursor: isCursor,
-      content: `⋯ ${node.foldedEntries.length} folded`,
-      type: 'fold',
-    });
-  }
-  return rows;
+    return rows;
 }
 function viewRowForEntry(entry, parentPath, cursor) {
-  return {
-    id: entryId(parentPath, entry.name),
-    indent: parentPath.length,
-    selected: cursor,
-    cursor,
-    content: content(entry),
-    type: type(entry),
-  };
+    return {
+        id: entryId(parentPath, entry.id),
+        indent: parentPath.length,
+        selected: cursor,
+        cursor,
+        content: content(entry),
+        type: type(entry),
+    };
 }
 function entryId(parentPath, entryName) {
-  return `entry:${JSON.stringify([...parentPath, entryName])}`;
+    return `entry:${JSON.stringify([...parentPath, entryName])}`;
 }
 function foldId(parentPath) {
-  return `fold:${JSON.stringify(parentPath)}`;
+    return `fold:${JSON.stringify(parentPath)}`;
 }
 function content(entry) {
-  switch (entry.kind) {
-    case 'file':
-      return entry.name;
-    case 'directory':
-      return `${entry.name}/`;
-    case 'symlink':
-      return `${entry.name} -> ${entry.target}`;
-  }
+    return isNavBranch(entry) ? `${String(entry.id)}/` : String(entry.id);
 }
 function type(entry) {
-  switch (entry.kind) {
-    case 'file':
-      return 'file';
-    case 'directory':
-      return 'directory';
-    case 'symlink':
-      return 'file';
-  }
+    return isNavBranch(entry) ? 'branch' : 'leaf';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mak-98/dirvi-cli",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A Vim-inspired TUI for browsing directories.",
   "type": "module",
   "license": "GPL-3.0-or-later",
@@ -13,7 +13,7 @@
   ],
   "dependencies": {
     "commander": "^13.0.0",
-    "dirvi-lib": "0.4.0",
+    "dirvi-lib": "0.6.0",
     "ink": "^7.1.1",
     "react": "^19.0.0"
   },

package/dist/application/action.d.ts

@@ -1,26 +0,0 @@
-import { UnixEntry, UnixEntryPath } from 'dirvi-lib';
-export type Action =
-  | {
-      kind: 'nextEntry';
-    }
-  | {
-      kind: 'prevEntry';
-    }
-  | {
-      kind: 'updateDir';
-      path: UnixEntryPath;
-      entries: UnixEntry[] | undefined;
-    }
-  | {
-      kind: 'outDir';
-    }
-  | {
-      kind: 'toggleFold';
-    }
-  | {
-      kind: 'fold';
-    }
-  | {
-      kind: 'unfold';
-    };
-//# sourceMappingURL=action.d.ts.map

package/dist/application/action.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../src/application/action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,MAAM,MAAM,GACd;IACE,IAAI,EAAE,WAAW,CAAC;CACnB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;CACnB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;CAClC,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;CAChB,GACD;IACE,IAAI,EAAE,YAAY,CAAC;CACpB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC"}

package/dist/application/action.js

@@ -1 +0,0 @@
-export {};

package/dist/application/dir-buffer-helpers.d.ts

@@ -1,6 +0,0 @@
-import type { UnixEntry, DirectoryBuffer, EntryPath } from 'dirvi-lib';
-export declare function entryAtPath(
-  buffer: DirectoryBuffer,
-  path: EntryPath,
-): UnixEntry | undefined;
-//# sourceMappingURL=dir-buffer-helpers.d.ts.map

package/dist/application/dir-buffer-helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dir-buffer-helpers.d.ts","sourceRoot":"","sources":["../../src/application/dir-buffer-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEvE,wBAAgB,WAAW,CACzB,MAAM,EAAE,eAAe,EACvB,IAAI,EAAE,SAAS,GACd,SAAS,GAAG,SAAS,CA2BvB"}

package/dist/application/dir-buffer-helpers.js

@@ -1,21 +0,0 @@
-export function entryAtPath(buffer, path) {
-  if (path.length === 0) {
-    return undefined;
-  }
-  let entries = buffer.entries;
-  let entry;
-  for (const [index, name] of path.entries()) {
-    entry = entries.find((candidate) => candidate.name === name);
-    if (entry === undefined) {
-      return undefined;
-    }
-    if (index === path.length - 1) {
-      return entry;
-    }
-    if (entry.kind !== 'directory' || entry.entries === undefined) {
-      return undefined;
-    }
-    entries = entry.entries;
-  }
-  return undefined;
-}

package/dist/application/display-rows.d.ts

@@ -1,11 +0,0 @@
-import { DisplayRow, UnixEntryPath, FoldNode, UnixEntry } from 'dirvi-lib';
-export declare function createDisplayRows(
-  buffer: UnixEntry[],
-  folds: FoldNode,
-): DisplayRow[];
-export declare function displayRowAtPath(
-  buffer: UnixEntry[],
-  folds: FoldNode,
-  path: UnixEntryPath,
-): DisplayRow | undefined;
-//# sourceMappingURL=display-rows.d.ts.map

package/dist/application/display-rows.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"display-rows.d.ts","sourceRoot":"","sources":["../../src/application/display-rows.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,SAAS,EAEV,MAAM,WAAW,CAAC;AAuDnB,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,SAAS,EAAE,EACnB,KAAK,EAAE,QAAQ,GACd,UAAU,EAAE,CAEd;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,SAAS,EAAE,EACnB,KAAK,EAAE,QAAQ,EACf,IAAI,EAAE,aAAa,GAClB,UAAU,GAAG,SAAS,CAsBxB"}