@mak-98/dirvi-cli 0.3.2 → 0.5.0

package/dist/infrastructure/load-posix-app-api.js

@@ -0,0 +1,82 @@
+import { join } from 'node:path';
+import { watch } from 'node:fs';
+import { createAppApis } from '../domain/app-api.js';
+import { getUnixAbsPath } from './get-unix-abs-path.js';
+import { getDirEntries } from './get-dir-entries.js';
+export function loadPosixAppApi(directory) {
+    const unixAbsPath = getUnixAbsPath(directory ?? process.cwd());
+    const apis = createAppApis();
+    const subscribeToResync = createFsResyncSubscription(join(unixAbsPath));
+    return {
+        name: `Posix(${unixAbsPath})`,
+        emptyForestMessage: 'The directory is empty.',
+        loadBranches: (path) => {
+            const address = join(unixAbsPath, ...path);
+            return getDirEntries(address);
+        },
+        subscribeToResync,
+        ...apis,
+    };
+}
+// `recursive: true` is supported by macOS and Windows, but
+// recursive watching is not supported on all Node/POSIX
+// platforms: Linux unsupported.
+function createFsResyncSubscription(directory) {
+    const listeners = new Set();
+    let watcher;
+    let notificationTimer;
+    function notifyListeners() {
+        for (const listener of listeners) {
+            listener();
+        }
+    }
+    function scheduleNotification() {
+        // fs.watch can emit several events for one filesystem operation.
+        // Debounce them into a single resync request.
+        if (notificationTimer !== undefined) {
+            clearTimeout(notificationTimer);
+        }
+        notificationTimer = setTimeout(() => {
+            notificationTimer = undefined;
+            if (listeners.size > 0) {
+                notifyListeners();
+            }
+        }, 100);
+    }
+    function startWatcher() {
+        if (watcher !== undefined) {
+            return;
+        }
+        watcher = watch(directory, {
+            recursive: true,
+        }, (_eventType, _filename) => {
+            scheduleNotification();
+        });
+        watcher.on('error', () => {
+            // The next loadBranches call will report the relevant error.
+        });
+    }
+    function stopWatcher() {
+        if (notificationTimer !== undefined) {
+            clearTimeout(notificationTimer);
+            notificationTimer = undefined;
+        }
+        watcher?.close();
+        watcher = undefined;
+    }
+    return (listener) => {
+        listeners.add(listener);
+        startWatcher();
+        let subscribed = true;
+        return () => {
+            if (!subscribed) {
+                return;
+            }
+            subscribed = false;
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                stopWatcher();
+            }
+        };
+    };
+}

package/dist/ui/App.d.ts

@@ -1,11 +1,17 @@
-import { State } from 'dirvi-lib';
-import type { UnixAbsolutePath } from 'dirvi-lib';
-import { EventMessage } from '../domain/event-message.js';
-export type AppProps = {
-    cwdAddress: UnixAbsolutePath;
-    initialState: State;
-    print?: (message: EventMessage) => void;
+import { IntentToEffect, SerializableKey, State, TreeNode } from 'dirvi-lib';
+import type { EventMessage } from '../domain/event-message.js';
+import { EffectToAction } from '../application/effect-to-action.js';
+import { AppApi } from '../domain/app-api.js';
+import { Reducer } from '../application/reducer.js';
+type AppProps<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>> = {
+    appApi: AppApi<Id, BufferNode>;
+    initialState: State<Id, BufferNode>;
+    reducer: Reducer<Id, BufferNode>;
+    intentToEffect: IntentToEffect<Id, BufferNode>;
+    effectToAction: EffectToAction<Id, BufferNode>;
+    print?: (message: EventMessage<Id, BufferNode>) => void;
     onError?: (error: Error) => void;
 };
-export declare function App({ cwdAddress, initialState, print, onError }: AppProps): import("react").JSX.Element | null;
+export declare function App<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>({ appApi, initialState, reducer, intentToEffect, effectToAction, print, onError, }: AppProps<Id, BufferNode>): import("react").JSX.Element | null;
+export {};
 //# sourceMappingURL=App.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/ui/App.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAqC,KAAK,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAIlD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D,MAAM,MAAM,QAAQ,GAAG;IACrB,UAAU,EAAE,gBAAgB,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,QAAQ,sCAwHzE"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/ui/App.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,cAAc,EAAE,eAAe,EAC/B,KAAK,EACL,QAAQ,EAET,MAAM,WAAW,CAAC;AAEnB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAGpE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGpD,KAAK,QAAQ,CACX,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,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IACjC,cAAc,EAAE,cAAc,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IAC/C,cAAc,EAAE,cAAc,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC;IAC/C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,GAAG,CACjB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,EAC3C,EACA,MAAM,EACN,YAAY,EACZ,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,EACL,OAAO,GACR,EAAE,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,sCAoL1B"}

package/dist/ui/App.js

@@ -1,48 +1,86 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { join } from 'node:path';
-import { Box, Text, useApp, useInput } from 'ink';
-import { useEffect, useMemo, useReducer, useState } from 'react';
-import { getDirLazyEntries, NavigationNode } from 'dirvi-lib';
-import { useView } from './hooks/useView.js';
-import { reducer } from '../application/reducer.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput, useWindowSize } from 'ink';
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { userInputToIntent, } from 'dirvi-lib';
 import { ViewRowComponent } from './components/ViewRowComponent.js';
-import { inkInputToUserInput } from '../infrastructure/user-input.js';
-import { userInputToIntent } from '../application/user-input-to-intent.js';
-import { intentToEffect } from '../application/intent-to-effect.js';
-import { effectToAction } from '../application/effect-to-action.js';
-export function App({ cwdAddress, initialState, print, onError }) {
+import { StatusBar } from './components/StatusBar.js';
+import { inkInputToUserInput } from '../infrastructure/ink-input-to-user-input.js';
+import { useView } from './hooks/useView.js';
+export function App({ appApi, initialState, reducer, intentToEffect, effectToAction, print, onError, }) {
     const [state, dispatch] = useReducer(reducer, initialState);
-    const navigation = useMemo(() => NavigationNode.from(state.buffer, state.folds), [state.buffer, state.folds]);
-    const [commandBuffer, setCommandBuffer] = useState('');
-    const view = useView(navigation, state);
+    // Give `subscribeToResync` callback a way to see current state:
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const navigation = useMemo(() => appApi.navNodeApi.from(state.buffer, state.foldNode), [appApi.navNodeApi, state.buffer, state.foldNode]);
+    const [inputState, setInputState] = useState({
+        inputMode: 'normal',
+        normalBuffer: '',
+    });
+    const { rows: terminalRows } = useWindowSize();
+    const view = useView(navigation, state, appApi.cursorApi, terminalRows);
     const [exitStatus, setExitStatus] = useState();
-    // Print view on changes
+    // Print on changes: view, paths of visible leaves
     useEffect(() => {
         print?.({ type: 'view', view: state });
-        const visibleFilesPaths = NavigationNode.visibleFilesPaths(navigation).map((path) => join(...path));
+        const visibleLeavesPaths = appApi.navNodeApi.visibleLeavesPaths(navigation);
         print?.({
-            type: 'displayed-files-paths',
-            paths: visibleFilesPaths,
+            type: 'displayed-leaves-paths',
+            paths: visibleLeavesPaths,
+        });
+    }, [appApi.navNodeApi, state, print, navigation]);
+    // Subscribe to directory watcher, do not
+    // resubscribe on every state change.
+    useEffect(() => {
+        let active = true;
+        const unsubscribe = appApi.subscribeToResync(() => {
+            const oldState = stateRef.current;
+            void appApi.stateApi
+                .resync(oldState, appApi.loadBranches)
+                .then((newState) => {
+                if (!active) {
+                    return;
+                }
+                dispatch({
+                    kind: 'setState',
+                    oldState: oldState,
+                    newState: newState,
+                });
+            })
+                .catch((error) => {
+                const appError = error instanceof Error ? error : new Error(String(error));
+                onError?.(appError);
+            });
         });
-    }, [state, print, navigation, cwdAddress]);
+        return () => {
+            active = false;
+            unsubscribe();
+        };
+    }, [appApi, onError]);
     function executeEffect(effect) {
         if (effect === undefined) {
             return;
         }
         switch (effect.effectType) {
-            case 'dispatchEffectAsAction':
+            case 'dispatchEffectAction':
                 const action = effectToAction(effect.action, navigation, state);
                 if (action === undefined) {
                     return;
                 }
                 dispatch(action);
+                setInputState({
+                    inputMode: 'normal',
+                    normalBuffer: '',
+                });
+                return;
+            case 'setInputState':
+                setInputState(effect.inputState);
                 return;
-            case 'loadDir': {
-                const address = join(cwdAddress, ...effect.path);
-                void getDirLazyEntries(address)
+            case 'loadBranchEntries': {
+                void appApi
+                    .loadBranches(effect.path)
                     .then((entries) => {
                     dispatch({
-                        kind: 'updateDir',
+                        kind: 'updateBranch',
                         path: effect.path,
                         entries,
                     });
@@ -54,13 +92,13 @@ export function App({ cwdAddress, initialState, print, onError }) {
                 });
                 return;
             }
-            case 'printFile':
+            case 'emitPath':
                 print?.({
                     type: 'file',
                     path: effect.path,
                 });
                 return;
-            case 'exit':
+            case 'quit':
                 setExitStatus(effect.exitMessage);
                 return;
         }
@@ -71,7 +109,7 @@ export function App({ cwdAddress, initialState, print, onError }) {
         if (userInput === undefined) {
             return;
         }
-        const intent = userInputToIntent(userInput, commandBuffer);
+        const intent = userInputToIntent(userInput, inputState);
         if (intent === undefined) {
             return;
         }
@@ -79,8 +117,7 @@ export function App({ cwdAddress, initialState, print, onError }) {
         if (effectResult === undefined) {
             return;
         }
-        setCommandBuffer(effectResult.commandBuffer);
-        executeEffect(effectResult.effect);
+        executeEffect(effectResult);
     });
     // --- Exit Logic ---
     const { exit } = useApp();
@@ -97,5 +134,5 @@ export function App({ cwdAddress, initialState, print, onError }) {
         return null;
     }
     // --- JSX ---
-    return (_jsx(Box, { flexDirection: "column", children: view.rows.length === 0 ? (_jsx(Text, { dimColor: true, children: "Directory is empty." })) : (view.rows.map((row) => (_jsx(ViewRowComponent, { row: row }, row.id)))) }));
+    return (_jsxs(Box, { flexDirection: "column", height: terminalRows, children: [_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: view.rows.length === 0 ? (_jsx(Text, { dimColor: true, children: "Empty." })) : (view.rows.map((row) => _jsx(ViewRowComponent, { row: row }, row.id))) }), _jsx(StatusBar, { inputState: inputState })] }));
 }

package/dist/ui/AppShell.d.ts

@@ -1,13 +1,8 @@
-import { UnixAbsolutePath, State } from 'dirvi-lib';
-import { EventMessage } from '../domain/event-message.js';
-export type EmptyView = {
-    cursor: undefined;
-};
+import { SerializableKey, TreeNode } from 'dirvi-lib';
 export type ShellAppProps = {
-    cwdAddress: UnixAbsolutePath;
-    initialState: State | EmptyView;
-    print?: (message: EventMessage) => void;
+    directory?: string;
+    print?: (message: string) => void;
     onError?: (error: Error) => void;
 };
-export declare function AppShell({ cwdAddress, initialState, print, onError, }: ShellAppProps): import("react").JSX.Element;
+export declare function AppShell<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>({ directory, print, onError }: ShellAppProps): import("react").JSX.Element;
 //# sourceMappingURL=AppShell.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/ui/AppShell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI1D,MAAM,MAAM,SAAS,GAAG;IACtB,MAAM,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,gBAAgB,CAAC;IAC7B,YAAY,EAAE,KAAK,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,aAAa,+BAaf"}
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/ui/AppShell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAwB,eAAe,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAI5E,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC,CAAC;AAIF,wBAAgB,QAAQ,CACtB,EAAE,SAAS,eAAe,EAC1B,UAAU,SAAS,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAC,EAC3C,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,aAAa,+BAyB7C"}

package/dist/ui/AppShell.js

@@ -1,9 +1,23 @@
 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 { loadPosixAppApi } from '../infrastructure/load-posix-app-api.js';
+import { LoadingApp } from './LoadingApp.js';
+import { join } from 'node:path';
+import { useMemo } from 'react';
+// App Shell is for choosing the active app, then loading the api,
+// and showing the app.
+export function AppShell({ directory, print, onError }) {
+    // Api owns directory watcher and subscriptions
+    const posixAppApi = useMemo(() => loadPosixAppApi(directory), [directory]);
+    const emitEventMsg = print
+        ? (message) => {
+            const externalMessage = message.type === 'displayed-leaves-paths'
+                ? {
+                    ...message,
+                    paths: message.paths.map((path) => join(...path)),
+                }
+                : message;
+            print(`${JSON.stringify(externalMessage)}\n`);
+        }
+        : undefined;
+    return (_jsx(LoadingApp, { appApi: posixAppApi, ...(emitEventMsg === undefined ? {} : { print: emitEventMsg }), ...(onError === undefined ? {} : { onError }) }));
 }

package/dist/ui/LoadingApp.d.ts

@@ -0,0 +1,11 @@
+import { SerializableKey, TreeNode } from 'dirvi-lib';
+import type { EventMessage } from '../domain/event-message.js';
+import { AppApi } from '../domain/app-api.js';
+type LoadingAppProps<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>> = {
+    appApi: AppApi<Id, BufferNode>;
+    print?: (message: EventMessage<Id, BufferNode>) => void;
+    onError?: (error: Error) => void;
+};
+export declare function LoadingApp<Id extends SerializableKey, BufferNode extends TreeNode<Id, BufferNode>>({ appApi, print, 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,EAAwB,eAAe,EAAS,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEnF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,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,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxD,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,KAAK,EAAE,OAAO,EAAE,EAAE,eAAe,CAAC,EAAE,EAAE,UAAU,CAAC,+BA+F5D"}

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, print, 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, ...(print === undefined ? {} : { print }), ...(onError === undefined ? {} : { onError }) }));
+}

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

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

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

@@ -0,0 +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,CAAC;CACxB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,EAAE,cAAc,+BAyBvD"}

package/dist/ui/components/StatusBar.js

@@ -0,0 +1,7 @@
+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 : '' }) })] }));
+}

package/dist/ui/components/ViewRowComponent.js

@@ -3,9 +3,9 @@ import { Box, Text } from 'ink';
 export function ViewRowComponent({ row }) {
     const prefix = '';
     switch (row.type) {
-        case 'file':
+        case 'leaf':
             return (_jsx(Box, { paddingLeft: row.indent * 2, children: _jsxs(Text, { inverse: row.selected, children: [prefix, row.content] }) }));
-        case 'directory':
+        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,4 +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): View;
+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,EAAsB,cAAc,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,EAAE,IAAI,EAAW,MAAM,YAAY,CAAC;AAO3C,wBAAgB,OAAO,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAmBtE"}
+{"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

@@ -1,15 +1,14 @@
 import { View } from '../view.js';
-import { useWindowSize } from 'ink';
 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) {
-    const { rows: terminalRows } = useWindowSize();
+export function useView(navigation, state, cursorApi, terminalRows) {
     const viewportStartRef = useRef(0);
-    const viewportHeight = Math.max(1, terminalRows);
-    const rows = View.createRows(navigation, state.cursor);
+    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, viewportHeight, viewportStartRef.current);
+    return View.create(navigation, state.cursor, cursorApi, viewportHeight, viewportStartRef.current);
 }
 function viewportStart(rows, viewportHeight, currentViewportStart) {
     const scrollMargin = 3;

package/dist/ui/view.d.ts

@@ -1,5 +1,6 @@
-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;
@@ -12,7 +13,7 @@ export type View = {
     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

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;2BAED,cAAc,UAClB,MAAM,GACb,OAAO,EAAE;uBAKE,cAAc,UAClB,MAAM,kBACE,MAAM,iBACP,MAAM,GACpB,IAAI;CAUR,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,36 +1,74 @@
-import { UnixEntryPath, } from 'dirvi-lib';
+import { isNavBranch } from 'dirvi-lib';
 export const View = {
-    createRows(navigation, cursor) {
-        return viewRowsAtNode(navigation, [], cursor);
+    createRows(navigation, cursor, cursorApi) {
+        return viewRowsAtNode(navigation, [], cursor, cursorApi);
     },
-    create(navigation, cursor, viewportHeight, viewportStart) {
-        const rows = View.createRows(navigation, cursor);
+    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) {
+/**
+ * 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 isCursor = cursor.kind === 'entry' &&
-            UnixEntryPath.equal(cursor.parentPath, parentPath) &&
-            cursor.entryName === entry.name;
+        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));
-        if (entry.kind !== 'directory' || entry.node === undefined) {
+        // Case where there's no branches
+        if (!isNavBranch(entry) || entry.children === null) {
             continue;
         }
-        rows.push(...viewRowsAtNode(entry.node, [...parentPath, entry.name], cursor));
+        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 isCursor = cursor.kind === 'fold' &&
-            UnixEntryPath.equal(cursor.parentPath, parentPath);
+        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 entries`,
+            content: `⋯ ${node.foldedEntries.length} folded`,
             type: 'fold',
         });
     }
@@ -38,7 +76,7 @@ function viewRowsAtNode(node, parentPath, cursor) {
 }
 function viewRowForEntry(entry, parentPath, cursor) {
     return {
-        id: entryId(parentPath, entry.name),
+        id: entryId(parentPath, entry.id),
         indent: parentPath.length,
         selected: cursor,
         cursor,
@@ -53,22 +91,8 @@ function foldId(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';
 }