@mak-98/dirvi-app 0.0.0-stage → 0.11.0-beta.13

package/dist/theme.js

@@ -0,0 +1,170 @@
+import { z } from 'zod';
+// =============================================================================
+// Terminal colors
+// =============================================================================
+const HexColorSchema = z.string().regex(/^#[0-9a-fA-F]{6}$/, {
+    message: 'Expected a #rrggbb color',
+});
+const Ansi256ColorSchema = z.number().int().min(0).max(255);
+/**
+ * Named ANSI foreground colors supported by Dirvi themes.
+ *
+ * Renderers translate these symbolic names into their own color APIs. The CLI
+ * renderer currently maps them to terminal colors; another renderer does not
+ * need to depend on Chalk to interpret the same theme.
+ */
+export const basicColorNames = [
+    'black',
+    'red',
+    'green',
+    'yellow',
+    'blue',
+    'cyan',
+    'magenta',
+    'white',
+    // Common aliases for blackBright.
+    'gray',
+    'grey',
+    'blackBright',
+    'redBright',
+    'greenBright',
+    'yellowBright',
+    'blueBright',
+    'cyanBright',
+    'magentaBright',
+    'whiteBright',
+];
+const BasicColorSchema = z.enum(basicColorNames);
+export const ColorConfigSchema = z
+    .object({
+    hex: HexColorSchema.optional(),
+    ansi256: Ansi256ColorSchema.optional(),
+    basic: BasicColorSchema.optional(),
+})
+    .refine((value) => value.hex !== undefined ||
+    value.ansi256 !== undefined ||
+    value.basic !== undefined, {
+    message: 'Expected at least one terminal color profile',
+});
+// =============================================================================
+// Highlights
+// =============================================================================
+// Note: these schemas are meant to be non-strict
+export const ForegroundHighlightConfigSchema = z.object({
+    fg: ColorConfigSchema,
+});
+export const OptionalForegroundHighlightConfigSchema = z.object({
+    fg: ColorConfigSchema.optional(),
+});
+export const BackgroundHighlightConfigSchema = z.object({
+    bg: ColorConfigSchema,
+});
+export const ForegroundBackgroundHighlightConfigSchema = z.object({
+    fg: ColorConfigSchema,
+    bg: ColorConfigSchema,
+});
+// =============================================================================
+// Theme defaults
+// =============================================================================
+const black = {
+    hex: '#28282a',
+    ansi256: 235,
+    basic: 'black',
+};
+const lightGray = {
+    hex: '#eaeaec',
+    ansi256: 254,
+    basic: 'gray',
+};
+const leaf = {
+    hex: '#e5e5e5',
+    ansi256: 254,
+    basic: 'white',
+};
+const branch = {
+    hex: '#2472c8',
+    ansi256: 26,
+    basic: 'blue',
+};
+const folded = {
+    hex: '#808080',
+    ansi256: 245,
+    basic: 'gray',
+};
+const indentGuide = {
+    hex: '#808080',
+    ansi256: 245,
+    basic: 'gray',
+};
+const cursorLine = {
+    hex: '#3a3a3c',
+    ansi256: 237,
+    basic: 'gray',
+};
+const success = {
+    hex: '#238c4b',
+    ansi256: 28,
+    basic: 'green',
+};
+const error = {
+    hex: '#be2d2d',
+    ansi256: 160,
+    basic: 'red',
+};
+const themeDefaults = {
+    statusBar: {
+        command: { fg: black },
+        normal: { fg: black },
+        background: { bg: lightGray },
+    },
+    tree: {
+        leaf: { fg: leaf },
+        branch: { fg: branch },
+        folded: { fg: folded },
+        cursorLine: { bg: cursorLine },
+        indentGuide: { fg: indentGuide },
+    },
+    feedbackBar: {
+        message: {
+            fg: black,
+            bg: lightGray,
+        },
+        success: {
+            fg: success,
+            bg: lightGray,
+        },
+        error: {
+            fg: error,
+            bg: lightGray,
+        },
+    },
+};
+// =============================================================================
+// Theme schema
+// =============================================================================
+export const ThemeSchema = z.object({
+    statusBar: z
+        .object({
+        command: ForegroundHighlightConfigSchema.default(themeDefaults.statusBar.command),
+        normal: ForegroundHighlightConfigSchema.default(themeDefaults.statusBar.normal),
+        background: BackgroundHighlightConfigSchema.default(themeDefaults.statusBar.background),
+    })
+        .default(themeDefaults.statusBar),
+    tree: z
+        .object({
+        leaf: ForegroundHighlightConfigSchema.default(themeDefaults.tree.leaf),
+        branch: ForegroundHighlightConfigSchema.default(themeDefaults.tree.branch),
+        folded: ForegroundHighlightConfigSchema.default(themeDefaults.tree.folded),
+        cursorLine: BackgroundHighlightConfigSchema.default(themeDefaults.tree.cursorLine),
+        indentGuide: OptionalForegroundHighlightConfigSchema.default(themeDefaults.tree.indentGuide),
+    })
+        .default(themeDefaults.tree),
+    feedbackBar: z
+        .object({
+        message: ForegroundBackgroundHighlightConfigSchema.default(themeDefaults.feedbackBar.message),
+        success: ForegroundBackgroundHighlightConfigSchema.default(themeDefaults.feedbackBar.success),
+        error: ForegroundBackgroundHighlightConfigSchema.default(themeDefaults.feedbackBar.error),
+    })
+        .default(themeDefaults.feedbackBar),
+});
+export const defaultTheme = ThemeSchema.parse({});

package/dist/ui/App.d.ts

@@ -0,0 +1,21 @@
+import { Config, ShellApi } from 'dirvi-apis';
+import type { AppMethods, EffectToAction, IntentToEffect, Reducer, SerializableKey, State } from 'dirvi-lib';
+import type { AppScreenRenderer } from './app-screen-renderer.js';
+import { ExCommand } from '../domain/ex-command.js';
+type AppProps<Id extends SerializableKey, Value, ViewKey = string> = {
+    screenRenderer: AppScreenRenderer;
+    shellApi: ShellApi;
+    appMethods: AppMethods<Id, Value, ViewKey>;
+    exCommands: ReadonlyMap<string, ExCommand>;
+    config: Readonly<Config>;
+    initialState: State<Id, Value>;
+    reducer: Reducer<Id, Value>;
+    intentToEffect: IntentToEffect<Id, Value>;
+    effectToAction: EffectToAction<Id, Value>;
+    stdout?: (message: string) => void;
+    clipboard?: (value: string) => void;
+    onError?: (error: Error) => void;
+};
+export declare function App<Id extends SerializableKey, Value, ViewKey = string>({ screenRenderer, shellApi, appMethods, exCommands, config, initialState, reducer, intentToEffect, effectToAction, stdout, clipboard, onError, }: AppProps<Id, Value, ViewKey>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=App.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../src/ui/App.tsx"],"names":[],"mappings":"AASA,OAAO,EAAU,MAAM,EAAgB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACpE,OAAO,KAAK,EACV,UAAU,EAEV,cAAc,EAEd,cAAc,EAEd,OAAO,EACP,eAAe,EACf,KAAK,EAGN,MAAM,WAAW,CAAC;AAInB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,KAAK,QAAQ,CAAC,EAAE,SAAS,eAAe,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,IAAI;IACnE,cAAc,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC3C,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzB,YAAY,EAAE,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5B,cAAc,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC1C,cAAc,EAAE,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC1C,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;AAEF,wBAAgB,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,EACvE,cAAc,EACd,QAAQ,EACR,UAAU,EACV,UAAU,EACV,MAAM,EACN,YAAY,EACZ,OAAO,EACP,cAAc,EACd,cAAc,EACd,MAAM,EACN,SAAS,EACT,OAAO,GACR,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,+BAyV9B"}

package/dist/ui/App.js

@@ -0,0 +1,248 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState, } from 'react';
+import { createFeedbackApi, userInputToIntent } from 'dirvi-lib';
+import { useView } from './hooks/useView.js';
+export function App({ screenRenderer, shellApi, appMethods, exCommands, config, initialState, reducer, intentToEffect, effectToAction, stdout, clipboard, onError, }) {
+    const ScreenRenderer = screenRenderer;
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const stateRef = useRef(state); // Gives `subscribeToResync` callback a way to
+    // see current state
+    stateRef.current = state;
+    const navEntry = useMemo(() => {
+        const root = appMethods.stateMethods.getRoot(state);
+        const folds = appMethods.stateMethods.getFolds(state);
+        const navigation = appMethods.navMethods.from(root, folds);
+        if (navigation === undefined) {
+            throw new Error('Tree-surfer state root must be a loaded branch.');
+        }
+        return navigation;
+    }, [appMethods.navMethods, appMethods.stateMethods, state]);
+    const clearInputState = { inputMode: 'normal', normalBuffer: '' };
+    const [inputState, setInputState] = useState(clearInputState);
+    const [feedback, setFeedback] = useState();
+    const [rowCount, setRowCount] = useState(0);
+    const handleRowsChange = useCallback((nextRows) => {
+        setRowCount((currentRows) => currentRows === nextRows ? currentRows : nextRows);
+    }, []);
+    const view = useView(navEntry, state, appMethods.stateMethods, appMethods.navMethods, appMethods.stateMethods.cursorMethods, rowCount, appMethods.presentNode);
+    // ===========================================================================
+    // Resync Subscriptions
+    // ===========================================================================
+    useEffect(() => {
+        let active = true;
+        const unsubscribe = appMethods.subscribeToResync(() => {
+            const oldState = stateRef.current;
+            void appMethods.stateMethods
+                .resync(oldState, appMethods.loadChildren)
+                .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);
+            });
+        });
+        return () => {
+            active = false;
+            unsubscribe();
+        };
+    }, [appMethods, onError]);
+    // ===========================================================================
+    // App API
+    // ===========================================================================
+    const feedbackApi = useMemo(() => createFeedbackApi((nextFeedback) => {
+        setFeedback(nextFeedback);
+    }), []);
+    const appApi = useMemo(() => ({
+        pathAtCursor: () => appMethods.stateMethods.cursorPath(stateRef.current),
+        visiblePaths: () => {
+            const state = stateRef.current;
+            const root = appMethods.stateMethods.getRoot(state);
+            const folds = appMethods.stateMethods.getFolds(state);
+            const navigation = appMethods.navMethods.from(root, folds);
+            if (navigation === undefined) {
+                throw new Error('Tree-surfer state root must be a loaded branch.');
+            }
+            return navigation.children === null
+                ? []
+                : appMethods.navMethods.visiblePaths(navigation.children);
+        },
+        // TODO: Implement with appMethods
+        valueAtCursor: () => 'test value',
+        addMessage: (message, type) => {
+            feedbackApi.addMessage(message, type);
+        },
+    }), [feedbackApi, appMethods.stateMethods, appMethods.navMethods]);
+    // ===========================================================================
+    // Executing Effects
+    // ===========================================================================
+    const executeEffect = useCallback((effect) => {
+        if (effect === undefined) {
+            return;
+        }
+        switch (effect.effectType) {
+            /** Execute a command, using shell API and app API. */
+            case 'userExCommand': {
+                setInputState(clearInputState);
+                const command = exCommands.get(effect.name);
+                if (command === undefined) {
+                    appApi.addMessage(`Command is no longer registered: ${effect.name}`, 'error');
+                    return;
+                }
+                void Promise.resolve()
+                    .then(() => command.execute({ shell: shellApi, app: appApi }, effect.args))
+                    .catch((error) => {
+                    const appError = error instanceof Error ? error : new Error(String(error));
+                    appApi.addMessage(`Command "${effect.name}" failed: ${appError.message}`, 'error');
+                });
+                return;
+            }
+            case 'quit':
+                shellApi.quit(effect.exitMessage);
+                return;
+            case 'listApps': {
+                const appIds = shellApi.listApps();
+                setInputState(clearInputState);
+                appApi.addMessage(['Apps:', ...appIds].join('\n'));
+                return;
+            }
+            case 'switchApp':
+                void shellApi.loadApp(effect.appId, effect.input).then((result) => {
+                    if (result.kind !== 'loaded') {
+                        appApi.addMessage(result.message, 'error');
+                    }
+                });
+                return;
+            case 'dispatchEffectAction':
+                const effectActionResult = effectToAction(effect.action, navEntry, state);
+                setInputState(clearInputState);
+                switch (effectActionResult.kind) {
+                    case 'action':
+                        dispatch(effectActionResult.action);
+                        return;
+                    case 'rejected':
+                        appApi.addMessage(effectActionResult.message, 'error');
+                        return;
+                    case 'ignored':
+                        return;
+                    default:
+                        return;
+                }
+            case 'setInputState':
+                setInputState(effect.inputState);
+                return;
+            case 'loadBranchEntries': {
+                void appMethods
+                    .loadChildren(effect.path)
+                    .then((entries) => {
+                    dispatch({
+                        kind: 'updateBranch',
+                        path: effect.path,
+                        entries,
+                    });
+                })
+                    .catch((error) => {
+                    const appError = error instanceof Error ? error : new Error(String(error));
+                    appApi.addMessage(`Unable to open directory: ${appError.message}`);
+                });
+                return;
+            }
+            case 'saveView': {
+                // void appApi.viewApi
+                //   .save(appApi.viewKey, effect.name, stateRef.current)
+                //   .then(() => {
+                //     setInputState({
+                //       inputMode: 'normal',
+                //       normalBuffer: '',
+                //     });
+                //     feedbackApi.addMessage(`Saved view: ${effect.name}`);
+                //   })
+                //   .catch((error: unknown) => {
+                //     feedbackApi.addMessage(
+                //       `Unable to save view: ${toError(error).message}`,
+                //     );
+                //   });
+                return;
+            }
+            case 'loadView': {
+                // void appApi.viewApi
+                //   .load(appApi.viewKey, effect.name)
+                //   .then((loadedState) => {
+                //     if (loadedState === undefined) {
+                //       throw new Error(`View not found: ${effect.name}`);
+                //     }
+                //
+                //     // The saved buffer may be stale because the filesystem could have
+                //     // changed since the view was saved.
+                //     return appApi.stateApi.resync(loadedState, appApi.loadBranches);
+                //   })
+                //   .then((newState) => {
+                //     const oldState = stateRef.current;
+                //
+                //     dispatch({
+                //       kind: 'setState',
+                //       oldState,
+                //       newState,
+                //     });
+                //
+                //     setInputState({
+                //       inputMode: 'normal',
+                //       normalBuffer: '',
+                //     });
+                //   })
+                //   .catch((error: unknown) => {
+                //     onError?.(toError(error));
+                //   });
+                return;
+            }
+            case 'listFolds': {
+                const folds = appMethods.stateMethods.getFolds(state);
+                const foldTrees = [
+                    ...appMethods.stateMethods.foldMethods.indexes(folds),
+                ].map((index) => ({
+                    index,
+                    info: appMethods.stateMethods.foldMethods.getInfoAtIndex(folds, index),
+                    active: appMethods.stateMethods.foldMethods.isActiveAtIndex(folds, index),
+                }));
+                const indexWidth = Math.max(...foldTrees.map(({ index }) => String(index).length));
+                const lines = foldTrees.map(({ index, info, active }) => {
+                    const status = active === true ? 'active' : 'inactive';
+                    const name = info?.name ?? '<unavailable>';
+                    return `${String(index).padStart(indexWidth)}  ${status.padEnd(8)}  ${name}`;
+                });
+                setInputState(clearInputState);
+                appApi.addMessage(['Fold trees:', ...lines].join('\n'));
+                return;
+            }
+            case 'emitError':
+                appApi.addMessage(effect.message, 'error');
+                return;
+        }
+    }, [appMethods, effectToAction, navEntry, state, shellApi, appApi, clearInputState, exCommands]);
+    // ===========================================================================
+    // Input hook
+    // ===========================================================================
+    const handleInput = useCallback((userInput) => {
+        const intent = userInputToIntent(userInput, inputState);
+        if (intent === undefined) {
+            return;
+        }
+        const effectResult = intentToEffect(intent, state);
+        if (effectResult === undefined) {
+            return;
+        }
+        setFeedback(undefined);
+        executeEffect(effectResult);
+    }, [executeEffect, inputState, intentToEffect, state]);
+    // ===========================================================================
+    // Render
+    // ===========================================================================
+    return (_jsx(ScreenRenderer, { view: view, feedback: feedback, feedbackApi: feedbackApi, config: config, inputState: inputState, handleInput: handleInput, onRowsChange: handleRowsChange }));
+}

package/dist/ui/AppSetup.d.ts

@@ -0,0 +1,18 @@
+import { AppMethods, SerializableKey } from 'dirvi-lib';
+import type { LoadingScreenRenderer } from './loading-screen-renderer.js';
+import type { AppScreenRenderer } from './app-screen-renderer.js';
+import type { Initialization } from '../domain/initialization.js';
+import type { ShellApi } from 'dirvi-apis';
+type AppSetupProps<Id extends SerializableKey, Value, ViewKey = string> = {
+    appScreenRenderer: AppScreenRenderer;
+    loadingScreenRenderer: LoadingScreenRenderer;
+    appId: string;
+    initialization: Initialization;
+    shellApi: ShellApi;
+    appMethods: AppMethods<Id, Value, ViewKey>;
+    stdout?: (message: string) => void;
+    clipboard?: (value: string) => void;
+};
+export declare function AppSetup<Id extends SerializableKey, Value, ViewKey = string>({ appScreenRenderer, loadingScreenRenderer, appId, initialization, shellApi, appMethods, stdout, clipboard, }: AppSetupProps<Id, Value, ViewKey>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AppSetup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppSetup.d.ts","sourceRoot":"","sources":["../../src/ui/AppSetup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAqB,eAAe,EAAS,MAAM,WAAW,CAAC;AAOlF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAO3C,KAAK,aAAa,CAAC,EAAE,SAAS,eAAe,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,IAAI;IACxE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,CAAC;AAkBF,wBAAgB,QAAQ,CAAC,EAAE,SAAS,eAAe,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,EAAE,EAC5E,iBAAiB,EACjB,qBAAqB,EACrB,KAAK,EACL,cAAc,EACd,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,aAAa,CAAC,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,+BAwGnC"}

package/dist/ui/AppSetup.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { createTreeMethods } from 'dirvi-lib';
+import { createEffectToAction, createIntentToEffect, createReducer, } from 'dirvi-lib';
+import { App } from './App.js';
+// TODO Later: configuration watched for changes
+const emptyExCommands = new Map();
+export function AppSetup({ appScreenRenderer, loadingScreenRenderer, appId, initialization, shellApi, appMethods, stdout, clipboard, }) {
+    const [loadState, setLoadState] = useState();
+    useEffect(() => {
+        let mounted = true;
+        setLoadState({ status: 'loading', appMethods: appMethods });
+        async function initialize() {
+            try {
+                const root = await appMethods.loadRoot();
+                if (!mounted) {
+                    return;
+                }
+                const rootId = createTreeMethods().id(root);
+                const folds = appMethods.stateMethods.foldMethods.create(rootId, {
+                    name: 'default',
+                    description: null,
+                });
+                const initialState = appMethods.stateMethods.create(root, folds, { path: [] });
+                if (initialState === undefined) {
+                    throw new Error('Cannot create initial app state');
+                }
+                setLoadState({ status: 'ready', appMethods: appMethods, initialState });
+            }
+            catch (cause) {
+                if (!mounted) {
+                    return;
+                }
+                const error = cause instanceof Error ? cause : new Error(String(cause));
+                setLoadState({ status: 'error', appMethods: appMethods, error });
+            }
+        }
+        void initialize();
+        return () => {
+            mounted = false;
+        };
+    }, [appMethods]);
+    // --- Pure function deps ---
+    const exCommands = useMemo(() => initialization.exCommands.get(appId) ?? emptyExCommands, [initialization.exCommands, appId]);
+    const reducer = useMemo(() => createReducer(appMethods.stateMethods, appMethods.navMethods), [appMethods.stateMethods, appMethods.navMethods]);
+    const intentToEffect = useMemo(() => createIntentToEffect(new Set(exCommands.keys()), appMethods.stateMethods), [appMethods.stateMethods, exCommands]);
+    const effectToAction = useMemo(() => createEffectToAction(appMethods.stateMethods, appMethods.navMethods), [appMethods.navMethods, appMethods.stateMethods]);
+    // --- JSX ---
+    const LoadingScreenRenderer = loadingScreenRenderer;
+    if (loadState === undefined || loadState.appMethods !== appMethods) {
+        return _jsx(LoadingScreenRenderer, {});
+    }
+    if (loadState.status === 'loading') {
+        return _jsx(LoadingScreenRenderer, {});
+    }
+    if (loadState.status === 'error') {
+        throw loadState.error;
+    }
+    return (_jsx(App, { screenRenderer: appScreenRenderer, shellApi: shellApi, appMethods: appMethods, exCommands: exCommands, config: initialization.config, initialState: loadState.initialState, reducer: reducer, intentToEffect: intentToEffect, effectToAction: effectToAction, ...(stdout === undefined ? {} : { stdout }), ...(clipboard === undefined ? {} : { clipboard }) }));
+}

package/dist/ui/Shell.d.ts

@@ -0,0 +1,44 @@
+import type { AppScreenRenderer } from './app-screen-renderer.js';
+import type { LoadingScreenRenderer } from './loading-screen-renderer.js';
+import type { Initialization } from '../domain/initialization.js';
+import type { PackageLoader } from '../application/package-loader.js';
+export type InitialAppOptions = Readonly<{
+    /**
+     * Requested app ID at startup.
+     *
+     * The Shell will later use this to override or select the app chosen by
+     * initialization.
+     */
+    readonly app?: string;
+    /**
+     * Host-provided startup input interpreted by the selected app.
+     */
+    readonly input?: string;
+}>;
+/**
+ * Dependencies and output callbacks required by {@link Shell}.
+ *
+ * The API loader functions are injected so the shell does not depend directly
+ * on a platform-specific infrastructure implementation.
+ */
+export type ShellAppProps = {
+    /**
+     * Host-specific React implementation.
+     */
+    readonly loadingScreenRenderer: LoadingScreenRenderer;
+    readonly appScreenRenderer: AppScreenRenderer;
+    readonly initialAppOptions: InitialAppOptions;
+    readonly initialization: Initialization;
+    readonly packageLoader: PackageLoader;
+    /** Request to exit dirvi with an optional message. */
+    readonly onQuit: (message?: string) => void;
+    /** Writes non-interactive application output. */
+    readonly stdout?: (message: string) => void;
+    /** Copies a value to the platform clipboard. */
+    readonly clipboard?: (value: string) => void;
+};
+/**
+ * Creates `ShellApi` and the `AppMethods` for a selected application.
+ */
+export declare function Shell({ onQuit, loadingScreenRenderer, appScreenRenderer, initialAppOptions, initialization, packageLoader, stdout, clipboard, }: ShellAppProps): import("react").JSX.Element;
+//# sourceMappingURL=Shell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Shell.d.ts","sourceRoot":"","sources":["../../src/ui/Shell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAItE,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;IACtD,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAE9C,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAC9C,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IACxC,QAAQ,CAAC,aAAa,EAAE,aAAa,CAAC;IAEtC,sDAAsD;IACtD,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,iDAAiD;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,gDAAgD;IAChD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF;;GAEG;AACH,wBAAgB,KAAK,CAAC,EACpB,MAAM,EACN,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,MAAM,EACN,SAAS,GACV,EAAE,aAAa,+BA6Ff"}

package/dist/ui/Shell.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { AppSetup } from './AppSetup.js';
+import { createAppMethodsApplicator } from '../application/create-app-methods.js';
+/**
+ * Creates `ShellApi` and the `AppMethods` for a selected application.
+ */
+export function Shell({ onQuit, loadingScreenRenderer, appScreenRenderer, initialAppOptions, initialization, packageLoader, stdout, clipboard, }) {
+    const [loadedApp, setLoadedApp] = useState();
+    const [appError, setAppError] = useState(undefined);
+    /**
+     * Create the Shell API, based on given {@link Initialization}.
+     */
+    const shellApi = useMemo(() => {
+        return {
+            listApps: () => [...initialization.app.registered.keys()],
+            loadApp: async (appId, input) => {
+                try {
+                    const appReference = initialization.app.registered.get(appId);
+                    if (appReference === undefined) {
+                        return {
+                            kind: 'notRegistered',
+                            appId,
+                            message: `App "${appId}" has not been registered in initial configuration script.`,
+                        };
+                    }
+                    const appPlugin = await packageLoader.loadAppPlugin(appReference);
+                    const loadedAppMethodsApplicator = createAppMethodsApplicator(appPlugin.createAppDefinitionApplicator(input));
+                    setLoadedApp({
+                        appId,
+                        appMethodsApplicator: loadedAppMethodsApplicator,
+                    });
+                    return { kind: 'loaded' };
+                }
+                catch (error) {
+                    const message = error instanceof Error ? error.message : String(error);
+                    return {
+                        kind: 'loadFailed',
+                        appId,
+                        message: `Unable to load app "${appId}": ${message}`,
+                    };
+                }
+            },
+            quit: onQuit,
+        };
+    }, [packageLoader, onQuit, initialization.app.registered]);
+    /**
+     * Load initial `AppMethods` on startup, using the shell API just created and
+     * {@link Initialization}.
+     */
+    useEffect(() => {
+        void shellApi
+            .loadApp(initialAppOptions.app ?? initialization.app.initial, initialAppOptions.input)
+            .then((result) => {
+            if (result.kind !== 'loaded') {
+                setAppError(new Error(result.message));
+            }
+        });
+    }, [
+        initialAppOptions,
+        initialization.app.initial,
+        shellApi,
+    ]);
+    if (appError !== undefined) {
+        throw appError;
+    }
+    // TODO Later: Loading messages
+    if (loadedApp === undefined) {
+        const LoadingScreenRenderer = loadingScreenRenderer;
+        return _jsx(LoadingScreenRenderer, {});
+    }
+    return loadedApp.appMethodsApplicator((appMethods) => (_jsx(AppSetup, { appScreenRenderer: appScreenRenderer, loadingScreenRenderer: loadingScreenRenderer, appId: loadedApp.appId, initialization: initialization, shellApi: shellApi, appMethods: appMethods, ...(stdout === undefined ? {} : { stdout }), ...(clipboard === undefined ? {} : { clipboard }) })));
+}