@mak-98/dirvi-cli 0.3.2 → 0.4.0

package/dist/ui/App.js

@@ -1,101 +1,139 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import { join } from 'node:path';
-import { Box, Text, useApp, useInput } from 'ink';
+import { Box, Text, useApp, useInput, useWindowSize } from 'ink';
 import { useEffect, useMemo, useReducer, useState } from 'react';
-import { getDirLazyEntries, NavigationNode } from 'dirvi-lib';
+import {
+  getDirLazyEntries,
+  intentToEffect,
+  NavigationNode,
+  userInputToIntent,
+} from 'dirvi-lib';
 import { useView } from './hooks/useView.js';
 import { reducer } from '../application/reducer.js';
 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';
+import { StatusBar } from './components/StatusBar.js';
+import { inkInputToUserInput } from '../infrastructure/ink-input-to-user-input.js';
 export function App({ cwdAddress, initialState, 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);
-    const [exitStatus, setExitStatus] = useState();
-    // Print view on changes
-    useEffect(() => {
-        print?.({ type: 'view', view: state });
-        const visibleFilesPaths = NavigationNode.visibleFilesPaths(navigation).map((path) => join(...path));
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const navigation = useMemo(
+    () => NavigationNode.from(state.buffer, state.folds),
+    [state.buffer, state.folds],
+  );
+  const [inputState, setInputState] = useState({
+    inputMode: 'normal',
+    normalBuffer: '',
+  });
+  const { rows: terminalRows } = useWindowSize();
+  const view = useView(navigation, state, terminalRows);
+  const [exitStatus, setExitStatus] = useState();
+  // Print view on changes
+  useEffect(() => {
+    print?.({ type: 'view', view: state });
+    const visibleFilesPaths = NavigationNode.visibleFilesPaths(navigation).map(
+      (path) => join(...path),
+    );
+    print?.({
+      type: 'displayed-files-paths',
+      paths: visibleFilesPaths,
+    });
+  }, [state, print, navigation, cwdAddress]);
+  function executeEffect(effect) {
+    if (effect === undefined) {
+      return;
+    }
+    switch (effect.effectType) {
+      case 'dispatchEffectAction':
+        const action = effectToAction(effect.action, navigation, state);
+        if (action === undefined) {
+          return;
+        }
+        dispatch(action);
+        setInputState({
+          inputMode: 'normal',
+          normalBuffer: '',
+        });
+        return;
+      case 'setInputState':
+        console.log('setInputState', effect.inputState);
+        setInputState(effect.inputState);
+        return;
+      case 'loadDir': {
+        const address = join(cwdAddress, ...effect.path);
+        void getDirLazyEntries(address)
+          .then((entries) => {
+            dispatch({
+              kind: 'updateDir',
+              path: effect.path,
+              entries,
+            });
+          })
+          .catch((error) => {
+            const appError =
+              error instanceof Error ? error : new Error(String(error));
+            onError?.(appError);
+            setExitStatus(`Unable to open directory: ${appError.message}`);
+          });
+        return;
+      }
+      case 'printFile':
         print?.({
-            type: 'displayed-files-paths',
-            paths: visibleFilesPaths,
+          type: 'file',
+          path: effect.path,
         });
-    }, [state, print, navigation, cwdAddress]);
-    function executeEffect(effect) {
-        if (effect === undefined) {
-            return;
-        }
-        switch (effect.effectType) {
-            case 'dispatchEffectAsAction':
-                const action = effectToAction(effect.action, navigation, state);
-                if (action === undefined) {
-                    return;
-                }
-                dispatch(action);
-                return;
-            case 'loadDir': {
-                const address = join(cwdAddress, ...effect.path);
-                void getDirLazyEntries(address)
-                    .then((entries) => {
-                    dispatch({
-                        kind: 'updateDir',
-                        path: effect.path,
-                        entries,
-                    });
-                })
-                    .catch((error) => {
-                    const appError = error instanceof Error ? error : new Error(String(error));
-                    onError?.(appError);
-                    setExitStatus(`Unable to open directory: ${appError.message}`);
-                });
-                return;
-            }
-            case 'printFile':
-                print?.({
-                    type: 'file',
-                    path: effect.path,
-                });
-                return;
-            case 'exit':
-                setExitStatus(effect.exitMessage);
-                return;
-        }
+        return;
+      case 'quit':
+        setExitStatus(effect.exitMessage);
+        return;
     }
-    // --- Input Hook ---
-    useInput((input, key) => {
-        const userInput = inkInputToUserInput(input, key);
-        if (userInput === undefined) {
-            return;
-        }
-        const intent = userInputToIntent(userInput, commandBuffer);
-        if (intent === undefined) {
-            return;
-        }
-        const effectResult = intentToEffect(intent, state);
-        if (effectResult === undefined) {
-            return;
-        }
-        setCommandBuffer(effectResult.commandBuffer);
-        executeEffect(effectResult.effect);
-    });
-    // --- Exit Logic ---
-    const { exit } = useApp();
-    useEffect(() => {
-        if (exitStatus === undefined) {
-            return;
-        }
-        if (exitStatus !== '') {
-            onError?.(new Error(exitStatus));
-        }
-        exit();
-    }, [exitStatus, exit, onError]);
-    if (exitStatus !== undefined) {
-        return null;
+  }
+  // --- Input Hook ---
+  useInput((input, key) => {
+    const userInput = inkInputToUserInput(input, key);
+    if (userInput === undefined) {
+      return;
+    }
+    const intent = userInputToIntent(userInput, inputState);
+    if (intent === undefined) {
+      return;
+    }
+    const effectResult = intentToEffect(intent, state);
+    if (effectResult === undefined) {
+      return;
+    }
+    executeEffect(effectResult);
+  });
+  // --- Exit Logic ---
+  const { exit } = useApp();
+  useEffect(() => {
+    if (exitStatus === undefined) {
+      return;
+    }
+    if (exitStatus !== '') {
+      onError?.(new Error(exitStatus));
     }
-    // --- 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)))) }));
+    exit();
+  }, [exitStatus, exit, onError]);
+  if (exitStatus !== undefined) {
+    return null;
+  }
+  // --- JSX ---
+  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: 'Directory is empty.' })
+            : view.rows.map((row) =>
+                _jsx(ViewRowComponent, { row: row }, row.id),
+              ),
+      }),
+      _jsx(StatusBar, { inputState: inputState }),
+    ],
+  });
 }

package/dist/ui/App2.d.ts

@@ -2,10 +2,15 @@ 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;
-    onError?: (error: Error) => void;
+  cwdAddress: UnixAbsolutePath;
+  initialState: State;
+  print?: (message: EventMessage) => void;
+  onError?: (error: Error) => void;
 };
-export declare function App2({ cwdAddress, initialState, print, onError }: AppProps): import("react").JSX.Element | null;
-//# sourceMappingURL=App2.d.ts.map
+export declare function App2({
+  cwdAddress,
+  initialState,
+  print,
+  onError,
+}: AppProps): import('react').JSX.Element | null;
+//# sourceMappingURL=App2.d.ts.map

package/dist/ui/App2.js

@@ -1,96 +1,107 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from 'react/jsx-runtime';
 import { join } from 'node:path';
 import { Box, Text, useApp, useInput } from 'ink';
 import { useEffect, useReducer, useRef, useState } from 'react';
 import { Cursor, getDirLazyEntries } from 'dirvi-lib';
 import { useView } from './hooks/useView.js';
 import { reducer } from '../application/reducer.js';
-import { userInputToInputResult, } from '../infrastructure/input.js';
+import { userInputToInputResult } from '../infrastructure/input.js';
 import { ViewRowComponent } from './components/ViewRowComponent.js';
 export function App2({ cwdAddress, initialState, print, onError }) {
-    const [state, dispatch] = useReducer(reducer, initialState);
-    const view = useView(state);
-    const pendingInput = useRef(undefined);
-    const [exitStatus, setExitStatus] = useState();
-    // Print view on changes
-    useEffect(() => {
-        print?.({ type: 'view', view: state });
-        // print?.({
-        //   type: 'displayed-files-paths',
-        //   paths: displayedFilePaths(displayRows),
-        // });
-    }, [state, print]);
-    // --- Input ---
-    useInput((input, key) => {
-        const result = userInputToInputResult(input, key, state, pendingInput.current);
-        if (result === undefined) {
-            return;
-        }
-        if (result === 'z') {
-            pendingInput.current = result;
-            return;
-        }
-        pendingInput.current = undefined;
-        const action = result;
-        // Contents of `updateDir` change meaning at this boundary:
-        if (action.kind === 'updateDir') {
-            // If the entry at the path is directory with no entries loaded:
-            if (action.entries === undefined) {
-                const path = Cursor.getPath(state.cursor);
-                if (path === undefined) {
-                    return undefined;
-                }
-                const address = join(cwdAddress, ...path);
-                void getDirLazyEntries(address)
-                    .then((entries) => {
-                    dispatch({
-                        kind: 'updateDir',
-                        path: path,
-                        entries,
-                    });
-                })
-                    .catch((error) => {
-                    const appError = error instanceof Error ? error : new Error(String(error));
-                    onError?.(appError);
-                    setExitStatus(`Unable to open directory: ${appError.message}`);
-                });
-            }
-            else {
-                // Otherwise need to wipe the entries:
-                dispatch({
-                    kind: 'updateDir',
-                    path: action.path,
-                    entries: undefined,
-                });
-            }
-            return;
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const view = useView(state);
+  const pendingInput = useRef(undefined);
+  const [exitStatus, setExitStatus] = useState();
+  // Print view on changes
+  useEffect(() => {
+    print?.({ type: 'view', view: state });
+    // print?.({
+    //   type: 'displayed-files-paths',
+    //   paths: displayedFilePaths(displayRows),
+    // });
+  }, [state, print]);
+  // --- Input ---
+  useInput((input, key) => {
+    const result = userInputToInputResult(
+      input,
+      key,
+      state,
+      pendingInput.current,
+    );
+    if (result === undefined) {
+      return;
+    }
+    if (result === 'z') {
+      pendingInput.current = result;
+      return;
+    }
+    pendingInput.current = undefined;
+    const action = result;
+    // Contents of `updateDir` change meaning at this boundary:
+    if (action.kind === 'updateDir') {
+      // If the entry at the path is directory with no entries loaded:
+      if (action.entries === undefined) {
+        const path = Cursor.getPath(state.cursor);
+        if (path === undefined) {
+          return undefined;
         }
-        if (action.kind === 'printFile') {
-            print?.({
-                type: 'file',
-                path: action.path,
+        const address = join(cwdAddress, ...path);
+        void getDirLazyEntries(address)
+          .then((entries) => {
+            dispatch({
+              kind: 'updateDir',
+              path: path,
+              entries,
             });
-            return;
-        }
-        if (action.kind === 'exit') {
-            setExitStatus(action.exitMessage);
-        }
-        dispatch(action);
-    });
-    // --- Exit Logic ---
-    const { exit } = useApp();
-    useEffect(() => {
-        if (exitStatus === undefined) {
-            return;
-        }
-        if (exitStatus !== '') {
-            onError?.(new Error(exitStatus));
-        }
-        exit();
-    }, [exitStatus, exit, onError]);
-    if (exitStatus !== undefined) {
-        return null;
+          })
+          .catch((error) => {
+            const appError =
+              error instanceof Error ? error : new Error(String(error));
+            onError?.(appError);
+            setExitStatus(`Unable to open directory: ${appError.message}`);
+          });
+      } else {
+        // Otherwise need to wipe the entries:
+        dispatch({
+          kind: 'updateDir',
+          path: action.path,
+          entries: undefined,
+        });
+      }
+      return;
+    }
+    if (action.kind === 'printFile') {
+      print?.({
+        type: 'file',
+        path: action.path,
+      });
+      return;
+    }
+    if (action.kind === 'exit') {
+      setExitStatus(action.exitMessage);
+    }
+    dispatch(action);
+  });
+  // --- Exit Logic ---
+  const { exit } = useApp();
+  useEffect(() => {
+    if (exitStatus === undefined) {
+      return;
+    }
+    if (exitStatus !== '') {
+      onError?.(new Error(exitStatus));
     }
-    // --- 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)))) }));
+    exit();
+  }, [exitStatus, exit, onError]);
+  if (exitStatus !== undefined) {
+    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)),
+  });
 }

package/dist/ui/AppShell.d.ts

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

package/dist/ui/AppShell.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+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 }));
+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,
+  });
 }

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

@@ -1,8 +1,11 @@
 import { Cursor } from 'dirvi-lib';
 import { DisplayRow } from 'dirvi-lib';
-declare function DirEntries({ rows, cursor }: {
-    rows: DisplayRow[];
-    cursor: Cursor;
-}): import("react").JSX.Element;
+declare function DirEntries({
+  rows,
+  cursor,
+}: {
+  rows: DisplayRow[];
+  cursor: Cursor;
+}): import('react').JSX.Element;
 export default DirEntries;
-//# sourceMappingURL=DirEntries.d.ts.map
+//# sourceMappingURL=DirEntries.d.ts.map

package/dist/ui/components/DirEntries.js

@@ -1,39 +1,64 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from 'react/jsx-runtime';
 import { Box, Text, useWindowSize } from 'ink';
 import { Cursor } from 'dirvi-lib';
 import { UnixEntryComponent as UnixEntryComponent } from './UnixEntryComponent.js';
 import { useRef } from 'react';
 function DirEntries({ rows, cursor }) {
-    const scrollMargin = 3;
-    const { rows: terminalRows } = useWindowSize();
-    const viewportStartRef = useRef(0);
-    const cursorIndex = rows.findIndex((row) => Cursor.matchesDisplayRow(cursor, row));
-    const viewportHeight = Math.max(1, terminalRows);
-    const maximumViewportStart = Math.max(0, rows.length - viewportHeight);
-    let viewportStart = viewportStartRef.current;
-    if (cursorIndex >= 0) {
-        const firstVisibleCursorIndex = viewportStart + scrollMargin;
-        const lastVisibleCursorIndex = viewportStart + viewportHeight - 1 - scrollMargin;
-        if (cursorIndex < firstVisibleCursorIndex) {
-            // Cursor moved above the visible area.
-            viewportStart = cursorIndex - scrollMargin;
-        }
-        else if (cursorIndex > lastVisibleCursorIndex) {
-            // Cursor moved below the visible area.
-            viewportStart = cursorIndex - viewportHeight + 1 + scrollMargin;
-        }
+  const scrollMargin = 3;
+  const { rows: terminalRows } = useWindowSize();
+  const viewportStartRef = useRef(0);
+  const cursorIndex = rows.findIndex((row) =>
+    Cursor.matchesDisplayRow(cursor, row),
+  );
+  const viewportHeight = Math.max(1, terminalRows);
+  const maximumViewportStart = Math.max(0, rows.length - viewportHeight);
+  let viewportStart = viewportStartRef.current;
+  if (cursorIndex >= 0) {
+    const firstVisibleCursorIndex = viewportStart + scrollMargin;
+    const lastVisibleCursorIndex =
+      viewportStart + viewportHeight - 1 - scrollMargin;
+    if (cursorIndex < firstVisibleCursorIndex) {
+      // Cursor moved above the visible area.
+      viewportStart = cursorIndex - scrollMargin;
+    } else if (cursorIndex > lastVisibleCursorIndex) {
+      // Cursor moved below the visible area.
+      viewportStart = cursorIndex - viewportHeight + 1 + scrollMargin;
     }
-    viewportStart = Math.max(0, Math.min(viewportStart, maximumViewportStart));
-    viewportStartRef.current = viewportStart;
-    const visibleRows = rows.slice(viewportStart, viewportStart + viewportHeight);
-    return (_jsx(_Fragment, { children: visibleRows.map((row) => {
-            const selected = Cursor.matchesDisplayRow(cursor, row);
-            const indent = row.parentPath.length;
-            if (row.kind === 'fold') {
-                const key = `fold-${row.parentPath.join('/')}-${row.entryNames[0]}`;
-                return (_jsx(Box, { paddingLeft: indent * 2, children: _jsx(Text, { inverse: selected, dimColor: !selected, children: "..." }) }, key));
-            }
-            return (_jsx(Box, { paddingLeft: indent * 2, children: _jsx(UnixEntryComponent, { entry: row.entry, selected: selected }) }, [...row.parentPath, row.entry.name].join('/')));
-        }) }));
+  }
+  viewportStart = Math.max(0, Math.min(viewportStart, maximumViewportStart));
+  viewportStartRef.current = viewportStart;
+  const visibleRows = rows.slice(viewportStart, viewportStart + viewportHeight);
+  return _jsx(_Fragment, {
+    children: visibleRows.map((row) => {
+      const selected = Cursor.matchesDisplayRow(cursor, row);
+      const indent = row.parentPath.length;
+      if (row.kind === 'fold') {
+        const key = `fold-${row.parentPath.join('/')}-${row.entryNames[0]}`;
+        return _jsx(
+          Box,
+          {
+            paddingLeft: indent * 2,
+            children: _jsx(Text, {
+              inverse: selected,
+              dimColor: !selected,
+              children: '...',
+            }),
+          },
+          key,
+        );
+      }
+      return _jsx(
+        Box,
+        {
+          paddingLeft: indent * 2,
+          children: _jsx(UnixEntryComponent, {
+            entry: row.entry,
+            selected: selected,
+          }),
+        },
+        [...row.parentPath, row.entry.name].join('/'),
+      );
+    }),
+  });
 }
 export default DirEntries;

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

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

package/dist/ui/components/StatusBar.js

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