eddev 0.3.35 → 2.0.0-beta.2

package/dist/node/cli/cli.js

@@ -0,0 +1,166 @@
+import chalk from "chalk";
+import { Command } from "commander";
+import { setDefaultResultOrder } from "dns";
+import { config as importDotEnv } from "dotenv";
+import { AdminBundler, adminLog } from "../compiler/bundler.admin.js";
+import { FrontendBundler, frontendLog } from "../compiler/bundler.frontend.js";
+import { ServerlessDevServer, serverlessLog } from "../compiler/serverless.dev.js";
+import { graphqlLog } from "../graphql/graphql-codegen.js";
+import { BuildInfoWriter } from "../project/eddev-build-file.js";
+import { Project, projectLog } from "../project/project.js";
+import { describeBlockManifest } from "../types/block-type.js";
+import { describeViewManifest } from "../types/view-type.js";
+import { configureCliMode } from "./cli-mode.js";
+import { CLIWorker } from "./cli-worker.js";
+import { bootCLIUI } from "./display/boot-cli-app.js";
+import { VERSION } from "./version.js";
+importDotEnv();
+const program = new Command()
+    .version(VERSION)
+    .name("eddev")
+    .description("⚡️ ED. Stack\nSee https://eddev.ed.studio for docs.");
+const init = (verbose) => {
+    console.log(`\n<⚡️ ED. Stack v${VERSION}>\n`);
+};
+program
+    .command("dev")
+    .description("Build in dev mode")
+    .option("-s, --serverless", 'Build in "serverless" mode', false)
+    .option("-m, --mode <mode>", 'Defaults to all modes, but use "frontend", "admin" or "graphql" to run in just one mode', undefined)
+    .option("--verbose", "Show extra debugging info", false)
+    .action(async (options) => {
+    process.env.NODE_ENV = "development";
+    serverlessLog.info(chalk.yellowBright(`⚡️ ED. Stack v${VERSION}`));
+    const tasks = {
+        admin: !options.mode || options.mode.includes("admin"),
+        frontend: !options.mode || options.mode.includes("frontend"),
+        serverless: !options.mode || options.mode.includes("serverless"),
+        graphql: !options.mode || options.mode.includes("graphql"),
+    };
+    // https://github.com/node-fetch/node-fetch/issues/1624#issuecomment-1407717012
+    setDefaultResultOrder("ipv4first");
+    configureCliMode({
+        interactive: true,
+        readonly: false,
+        exitOnValidationError: true,
+        detailed: false,
+        verbose: options.verbose,
+        watch: true,
+        rootDir: process.cwd(),
+    });
+    bootCLIUI({
+        getProject: () => project,
+        logs: {
+            project: projectLog,
+            adminBundle: tasks.admin ? adminLog : undefined,
+            frontendBundle: tasks.frontend ? frontendLog : undefined,
+            serverless: tasks.serverless ? serverlessLog : undefined,
+            graphql: tasks.graphql ? graphqlLog : undefined,
+        },
+    });
+    // Load the project info
+    const project = await Project.create({
+        rootDir: process.cwd(),
+        reportPluginCompatibility: true,
+    });
+    const infoWriter = new BuildInfoWriter(project);
+    infoWriter.watch();
+    infoWriter.write();
+    // Boot up admin in a worker
+    if (tasks.admin) {
+        new CLIWorker({
+            log: adminLog,
+            mode: "admin",
+            verbose: options.verbose,
+        });
+    }
+    // Boot up frontend in a worker
+    if (tasks.frontend) {
+        new CLIWorker({
+            log: frontendLog,
+            mode: "frontend",
+            verbose: options.verbose,
+        });
+    }
+    // Load the compiler
+    if (tasks.serverless) {
+        console.log = (...args) => {
+            serverlessLog.log(...args);
+        };
+        console.error = (...args) => {
+            serverlessLog.error(...args);
+        };
+        console.warn = (...args) => {
+            serverlessLog.warn(...args);
+        };
+        console.info = (...args) => {
+            serverlessLog.info(...args);
+        };
+        new ServerlessDevServer(project, {
+            mode: "development",
+        });
+    }
+    // GraphQL codegen
+    if (tasks.graphql) {
+        new CLIWorker({
+            log: graphqlLog,
+            mode: "graphql",
+            verbose: options.verbose,
+        });
+    }
+});
+program
+    .command("build")
+    .description("Build in production mode")
+    .option("-s, --serverless", 'Build in "serverless" mode', false)
+    .option("--verbose", "Show extra debugging info", false)
+    .action(async (options) => {
+    init(options.verbose);
+    configureCliMode({
+        interactive: false,
+        readonly: false,
+        exitOnValidationError: true,
+        detailed: true,
+        verbose: options.verbose,
+        watch: false,
+        rootDir: process.cwd(),
+    });
+    // Load the project info
+    const project = await Project.create({
+        rootDir: process.cwd(),
+    });
+    // Load the compiler
+    new AdminBundler(project, {
+        mode: "development",
+    });
+    new FrontendBundler(project, {
+        mode: "production",
+    });
+});
+program
+    .command("info")
+    .description("Return info about this project")
+    .option("--verbose", "Show extra debugging info", false)
+    .action(async (options) => {
+    init(options.verbose);
+    configureCliMode({
+        interactive: false,
+        readonly: true,
+        exitOnValidationError: false,
+        detailed: true,
+        verbose: options.verbose,
+        watch: false,
+        rootDir: process.cwd(),
+    });
+    // Load the project
+    const project = await Project.create({
+        rootDir: process.cwd(),
+    });
+    // Load the blocks
+    const blocks = await project.blocks.get();
+    console.log(describeBlockManifest(blocks));
+    // Load the views
+    const views = await project.views.get();
+    console.log(describeViewManifest(views));
+});
+program.parse(process.argv);

package/dist/node/cli/display/CLIApp.d.ts

@@ -0,0 +1,16 @@
+import type { graphqlLog } from "../../graphql/graphql-codegen.js";
+import type { Project, projectLog } from "../../project/project.js";
+import type { adminLog } from "../../compiler/bundler.admin.js";
+import type { frontendLog } from "../../compiler/bundler.frontend.js";
+import { serverlessLog } from "../../compiler/serverless.dev.js";
+export type CLIDisplayProps = {
+    getProject: () => Project;
+    logs: {
+        project?: typeof projectLog;
+        graphql?: typeof graphqlLog;
+        frontendBundle?: typeof frontendLog;
+        serverless?: typeof serverlessLog;
+        adminBundle?: typeof adminLog;
+    };
+};
+export declare function CLIApp(props: CLIDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/node/cli/display/CLIApp.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Static, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import { VERSION } from "../version.js";
+import { LogEntries, LogItem } from "./components/LogEntries.js";
+import { useStatefulLogs } from "./hooks/useStatefulLog.js";
+import { statusColor, statusIcon } from "./util/colors.js";
+import { serverlessLog } from "../../compiler/serverless.dev.js";
+import { useEffect, useState } from "react";
+import TextInput from "./components/TextInput.js";
+import { findTools } from "./tools/cli-tools.js";
+import { TOOLS } from "./tools/cli-tool-list.js";
+function useRedraw() {
+    const [_, setTick] = useState(0);
+    return () => setTick((tick) => tick + 1);
+}
+export function CLIApp(props) {
+    const redraw = useRedraw();
+    const [showingMenu, setShowingMenu] = useState(false);
+    const [activeScreen, setActiveScreen] = useState("main");
+    const activeTool = TOOLS[activeScreen];
+    const ToolComponent = activeTool?.component;
+    useInput((input, key) => {
+        if (key.escape) {
+            setTimeout(() => {
+                if (activeScreen !== "main") {
+                    setShowingMenu(true);
+                    setActiveScreen("main");
+                }
+                else {
+                    setShowingMenu((showing) => !showing);
+                }
+            }, 1);
+        }
+        else if (activeScreen === "main" && !showingMenu) {
+            if (input === "c" || input === "k") {
+                process.stdout.write("\u001b[3J\u001b[1J");
+                console.clear();
+                props.logs.serverless?.resetLog();
+                redraw();
+            }
+            else if (input === "q") {
+                process.exit(0);
+            }
+        }
+    });
+    const logs = useStatefulLogs({
+        projectLog: props.logs.project,
+        graphqlLog: props.logs.graphql,
+        frontendLog: props.logs.frontendBundle,
+        adminLog: props.logs.adminBundle,
+        serverlessLog: props.logs.serverless,
+    });
+    const mainLog = logs.serverlessLog || logs.frontendLog || logs.adminLog || logs.graphqlLog || logs.projectLog;
+    const logList = Object.entries(logs).filter(([key, log]) => log !== mainLog);
+    return (_jsxs(_Fragment, { children: [_jsx(Static, { items: mainLog ? mainLog.entries : [], children: (item, i) => {
+                    return _jsx(LogItem, { item: item }, item.id);
+                } }), showingMenu ? (_jsx(MainMenu, { onSelect: (tool) => {
+                    setActiveScreen(tool);
+                    setShowingMenu(false);
+                } })) : activeScreen === "main" ? (_jsxs(_Fragment, { children: [_jsx(Box, { width: "100%", flexDirection: "column", children: _jsx(Panel, { label: "Dev Server", color: "#F53AF4", icon: "\u2730", info: `eddev@${VERSION}`, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "#88DEFF", children: "Frontend:" }), _jsx(Text, { color: "#D98D73", children: serverlessLog.state?.serverlessUrl })] }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: "#88DEFF", children: "WordPress Origin:" }), _jsx(Text, { color: "#D98D73", children: serverlessLog.state?.wordpressUrl })] }), _jsx(Text, { color: "#88DEFF", children: "Service Status:" }), _jsx(Box, { width: "100%", flexWrap: "wrap", paddingLeft: 1, children: logList.map(([key, log]) => (_jsx(Box, { children: _jsx(LogStatus, { log: log }) }, key))) })] }) }) }), _jsx(Box, { flexDirection: "column", children: logList.map(([key, log]) => {
+                            return _jsx(MiniLog, { log: log }, key);
+                        }) })] })) : (_jsx(Panel, { label: activeTool.name, color: "yellow", icon: "!", children: _jsx(ToolComponent, { project: props.getProject(), close: () => {
+                        setActiveScreen("main");
+                        setShowingMenu(false);
+                    } }) }))] }));
+}
+function MainMenu(props) {
+    const [focusIndex, setFocusIndex] = useState(0);
+    const [search, setSearch] = useState("");
+    // let matches = Object.entries(TOOLS)
+    // if (search) {
+    //   matches = matches.filter(([key, tool]) => tool.name.toLowerCase().includes(search.toLowerCase()))
+    // }
+    const matches = findTools(search);
+    useInput((input, key) => {
+        if (key.downArrow) {
+            setFocusIndex((index) => (index + 1) % matches.length);
+        }
+        else if (key.upArrow) {
+            setFocusIndex((index) => (index - 1 + matches.length) % matches.length);
+        }
+        else if (key.return) {
+            const match = matches[focusIndex];
+            if (match) {
+                props.onSelect(match.tool.id);
+            }
+        }
+    });
+    return (_jsx(Panel, { label: "Main Menu", icon: "\u25C8", color: "yellow", info: "[ESC] to close", children: _jsxs(Box, { width: "100%", flexDirection: "column", paddingX: 1, paddingY: 0, children: [_jsxs(Box, { gap: 1, flexDirection: "row", children: [_jsx(Text, { color: "whiteBright", children: "What would you like to do?" }), _jsx(Text, { color: "gray", children: "[ESC] to close" })] }), _jsxs(Box, { paddingBottom: 1, children: [_jsx(Text, { color: "white", children: "> " }), _jsx(TextInput, { value: search, onChange: (value) => {
+                                setSearch(value);
+                                setFocusIndex(0);
+                            }, showCursor: true, focus: true, placeholder: "Search..." })] }), matches.length === 0 ? _jsx(Text, { color: "redBright", children: "😓 No results" }) : null, matches.map((item, index) => {
+                    const focused = focusIndex === index;
+                    return (_jsxs(Box, { children: [_jsx(Box, { width: 3, children: _jsx(Text, { children: focused ? "👉" : "" }) }), _jsxs(Box, { children: [_jsx(Text, { color: focused ? "yellow" : "white", children: item.tool.name }), _jsx(Text, { children: String(item.score) })] })] }, item.tool.id));
+                })] }) }));
+}
+function MiniLog({ log, border }) {
+    const color = statusColor(log.status);
+    const shouldShow = log.status !== "success";
+    const [active, setActive] = useState(shouldShow);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setActive(shouldShow);
+        }, 1000);
+        return () => clearTimeout(timer);
+    }, [shouldShow]);
+    if (!active && !shouldShow)
+        return null;
+    return (_jsx(Panel, { label: log.label, time: log.status !== "working" ? log.time : 0, color: color, icon: log.status === "working" ? _jsx(Spinner, {}) : statusIcon(log.status), children: _jsx(LogEntries, { entries: log.entries }) }));
+}
+function LogStatus({ log }) {
+    return (_jsxs(Text, { color: statusColor(log.status), children: [log.status === "working" ? _jsx(Spinner, {}) : statusIcon(log.status), " ", log.label, " ", log.time > 0 ? _jsx(Text, { dimColor: true, children: log.time + "ms" }) : null] }));
+}
+function Panel(props) {
+    return (_jsxs(Box, { flexGrow: 1, flexShrink: 1, flexBasis: "100%", flexDirection: "column", children: [_jsxs(Box, { gap: 1, children: [_jsxs(Text, { color: props.color, children: ["╭ ", props.icon, " ", props.label, " ", props.time > 0 ? _jsx(Text, { dimColor: true, children: props.time + "ms" }) : null] }), props.info && (_jsx(_Fragment, { children: _jsx(Text, { color: props.color, dimColor: true, children: props.info }) }))] }), _jsx(Box, { borderStyle: "round", borderColor: props.color, paddingLeft: 1, borderTop: false, borderRight: false, children: props.children })] }));
+}

package/dist/node/cli/display/boot-cli-app.d.ts

@@ -0,0 +1,2 @@
+import { CLIDisplayProps } from "./CLIApp.js";
+export declare function bootCLIUI(props: CLIDisplayProps): void;

package/dist/node/cli/display/boot-cli-app.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink";
+import { CLIApp } from "./CLIApp.js";
+export function bootCLIUI(props) {
+    console.clear();
+    render(_jsx(CLIApp, { ...props }), {
+        exitOnCtrlC: true,
+        patchConsole: true,
+    });
+}

package/{cli → dist/node/cli}/display/components/Fullscreen.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from "react";
-declare type Props = PropsWithChildren<{}>;
+type Props = PropsWithChildren<{}>;
 export declare function Fullscreen(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/node/cli/display/components/Fullscreen.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { useEffect, useState } from "react";
+export function Fullscreen(props) {
+    const [size, setSize] = useState({
+        columns: process.stdout.columns,
+        rows: process.stdout.rows,
+    });
+    useEffect(() => {
+        function onResize() {
+            setSize({
+                columns: process.stdout.columns,
+                rows: process.stdout.rows + 10,
+            });
+        }
+        process.stdout.on("resize", onResize);
+        // process.stdout.write("\x1b[?1049h")
+        return () => {
+            process.stdout.off("resize", onResize);
+            // process.stdout.write("\x1b[?1049l")
+        };
+    }, []);
+    return (_jsx(Box, { width: size.columns, minHeight: size.rows, children: props.children }));
+}

package/dist/node/cli/display/components/LogEntries.d.ts

@@ -0,0 +1,13 @@
+import type { LogEntry, LogGroup, LogGroupOrEntry } from "../../../utils/statefulLog.js";
+export declare function LogEntries(props: {
+    entries: LogGroupOrEntry[];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LogItem({ item }: {
+    item: LogGroupOrEntry;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LogGroup(props: {
+    group: LogGroup;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LogEntry(props: {
+    entry: LogEntry;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/node/cli/display/components/LogEntries.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { statusColor, statusIcon } from "../util/colors.js";
+import { inspect } from "util";
+import chalk from "chalk";
+export function LogEntries(props) {
+    return (_jsx(Box, { flexDirection: "column", children: props.entries.map((entry, index) => {
+            if (entry.type === "group") {
+                return _jsx(LogGroup, { group: { ...entry } }, index);
+            }
+            else {
+                return _jsx(LogEntry, { entry: entry }, index);
+            }
+        }) }));
+}
+export function LogItem({ item }) {
+    if (item.type === "group") {
+        return _jsx(LogGroup, { group: item });
+    }
+    else {
+        return _jsx(LogEntry, { entry: item });
+    }
+}
+export function LogGroup(props) {
+    const color = statusColor(props.group.kind);
+    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: color, children: [_jsx(Text, { children: statusIcon(props.group.kind) }), " ", props.group.label, ":"] }), _jsx(Box, { flexDirection: "column", paddingLeft: 1, borderStyle: "round", borderColor: color, borderTop: false, borderRight: false, width: "100%", children: _jsx(LogEntries, { entries: props.group.entries }) })] }));
+}
+function formatError(error) {
+    let type = error.name;
+    let message = error.message;
+    let stack = error.stack;
+    let output = "";
+    if (error.name)
+        output += chalk.red(type) + ": ";
+    if (error.message)
+        output += message + "\n";
+    if (error.stack)
+        output += chalk.dim(stack);
+    return output;
+}
+const rawValue = (value) => {
+    if (value instanceof Error || (value && typeof value === "object" && value.__is_error)) {
+        return formatError(value);
+    }
+    else if (typeof value === "object") {
+        return inspect(value, false, 4, true);
+    }
+    return String(value);
+};
+const paths = [
+    { find: "file://" + encodeURI(process.cwd().replace(/\/?$/, "/")), replace: "./" },
+    { find: "file://" + encodeURI(process.cwd().replace(/\/[^\/]+\/?$/, "/")), replace: "../" },
+    { find: process.cwd().replace(/\/?$/, "/"), replace: "./" },
+];
+const shortenErrors = (value) => {
+    for (let path of paths) {
+        value = value.replaceAll(path.find, path.replace);
+    }
+    return value;
+};
+const stringify = (value) => {
+    return shortenErrors(rawValue(value));
+};
+export function LogEntry(props) {
+    let tag = "";
+    let icon = statusIcon(props.entry.kind);
+    let iconFG = statusColor(props.entry.kind);
+    let textFG = "whiteBright";
+    let tagBG = "blue";
+    let tagFG = "whiteBright";
+    if (props.entry.kind === "verbose") {
+        textFG = "gray";
+    }
+    else if (props.entry.kind === "error") {
+        tag = "ERROR";
+        tagBG = "red";
+        tagFG = "black";
+    }
+    if (tag) {
+        const first = props.entry.items[0];
+        const rest = props.entry.items.slice(1);
+        return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "black", backgroundColor: tagBG, children: [_jsxs(Text, { children: [" ", icon, " "] }), tag, " ", _jsx(Text, { children: stringify(first) })] }), rest ? (_jsx(Box, { borderStyle: "round", borderRight: false, borderTop: false, borderColor: tagBG, paddingLeft: 1, children: _jsx(Text, { children: rest.map(stringify).join(" ") }) })) : null] }));
+    }
+    else {
+        return (_jsxs(Box, { children: [_jsx(Box, { width: 2, flexShrink: 0, flexGrow: 0, flexBasis: 2, children: _jsx(Text, { color: iconFG, children: icon }) }), _jsx(Text, { color: textFG, children: props.entry.items.map(stringify).join(" ") })] }));
+    }
+}

package/dist/node/cli/display/components/MenuItem.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    label: string;
+    onSelect: () => void;
+};
+export declare function MenuItem(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/node/cli/display/components/MenuItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useFocus, useInput } from "ink";
+export function MenuItem(props) {
+    const { isFocused } = useFocus();
+    useInput((input, key) => {
+        if (key.return) {
+            props.onSelect();
+        }
+    });
+    return (_jsxs(Box, { children: [_jsx(Box, { width: 3, children: _jsx(Text, { children: isFocused ? "👉" : "" }) }), _jsx(Box, { children: _jsx(Text, { color: isFocused ? "yellow" : "white", children: props.label }) })] }));
+}

package/dist/node/cli/display/components/TextInput.d.ts

@@ -0,0 +1,44 @@
+export type Props = {
+    /**
+     * Text to display when `value` is empty.
+     */
+    readonly placeholder?: string;
+    /**
+     * Listen to user's input. Useful in case there are multiple input components
+     * at the same time and input must be "routed" to a specific component.
+     */
+    readonly focus?: boolean;
+    /**
+     * Replace all chars and mask the value. Useful for password inputs.
+     */
+    readonly mask?: string;
+    /**
+     * Whether to show cursor and allow navigation inside text input with arrow keys.
+     */
+    readonly showCursor?: boolean;
+    /**
+     * Highlight pasted text
+     */
+    readonly highlightPastedText?: boolean;
+    /**
+     * Value to display in a text input.
+     */
+    readonly value: string;
+    /**
+     * Function to call when value updates.
+     */
+    readonly onChange: (value: string) => void;
+    /**
+     * Function to call when `Enter` is pressed, where first argument is a value of the input.
+     */
+    readonly onSubmit?: (value: string) => void;
+};
+declare function TextInput({ value: originalValue, placeholder, focus, mask, highlightPastedText, showCursor, onChange, onSubmit, }: Props): import("react/jsx-runtime").JSX.Element;
+export default TextInput;
+type UncontrolledProps = {
+    /**
+     * Initial value.
+     */
+    readonly initialValue?: string;
+} & Omit<Props, "value" | "onChange">;
+export declare function UncontrolledTextInput({ initialValue, ...props }: UncontrolledProps): import("react/jsx-runtime").JSX.Element;

package/dist/node/cli/display/components/TextInput.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Text, useInput } from "ink";
+import chalk from "chalk";
+function TextInput({ value: originalValue, placeholder = "", focus = true, mask, highlightPastedText = false, showCursor = true, onChange, onSubmit, }) {
+    const [state, setState] = useState({
+        cursorOffset: (originalValue || "").length,
+        cursorWidth: 0,
+    });
+    const { cursorOffset, cursorWidth } = state;
+    useEffect(() => {
+        setState((previousState) => {
+            if (!focus || !showCursor) {
+                return previousState;
+            }
+            const newValue = originalValue || "";
+            if (previousState.cursorOffset > newValue.length - 1) {
+                return {
+                    cursorOffset: newValue.length,
+                    cursorWidth: 0,
+                };
+            }
+            return previousState;
+        });
+    }, [originalValue, focus, showCursor]);
+    const cursorActualWidth = highlightPastedText ? cursorWidth : 0;
+    const value = mask ? mask.repeat(originalValue.length) : originalValue;
+    let renderedValue = value;
+    let renderedPlaceholder = placeholder ? chalk.grey(placeholder) : undefined;
+    // Fake mouse cursor, because it's too inconvenient to deal with actual cursor and ansi escapes
+    if (showCursor && focus) {
+        renderedPlaceholder =
+            placeholder.length > 0 ? chalk.inverse(placeholder[0]) + chalk.grey(placeholder.slice(1)) : chalk.inverse(" ");
+        renderedValue = value.length > 0 ? "" : chalk.inverse(" ");
+        let i = 0;
+        for (const char of value) {
+            renderedValue += i >= cursorOffset - cursorActualWidth && i <= cursorOffset ? chalk.inverse(char) : char;
+            i++;
+        }
+        if (value.length > 0 && cursorOffset === value.length) {
+            renderedValue += chalk.inverse(" ");
+        }
+    }
+    useInput((input, key) => {
+        if (key.upArrow || key.downArrow || (key.ctrl && input === "c") || key.tab || (key.shift && key.tab)) {
+            return;
+        }
+        if (key.return) {
+            if (onSubmit) {
+                onSubmit(originalValue);
+            }
+            return;
+        }
+        let nextCursorOffset = cursorOffset;
+        let nextValue = originalValue;
+        let nextCursorWidth = 0;
+        if (key.leftArrow) {
+            if (showCursor) {
+                nextCursorOffset--;
+            }
+        }
+        else if (key.rightArrow) {
+            if (showCursor) {
+                nextCursorOffset++;
+            }
+        }
+        else if ((key.backspace || key.delete) && (key.meta || key.ctrl)) {
+            nextValue = "";
+            nextCursorOffset = 0;
+        }
+        else if (key.backspace || key.delete) {
+            if (cursorOffset > 0) {
+                nextValue = originalValue.slice(0, cursorOffset - 1) + originalValue.slice(cursorOffset, originalValue.length);
+                nextCursorOffset--;
+            }
+        }
+        else {
+            nextValue =
+                originalValue.slice(0, cursorOffset) + input + originalValue.slice(cursorOffset, originalValue.length);
+            nextCursorOffset += input.length;
+            if (input.length > 1) {
+                nextCursorWidth = input.length;
+            }
+        }
+        if (cursorOffset < 0) {
+            nextCursorOffset = 0;
+        }
+        if (cursorOffset > originalValue.length) {
+            nextCursorOffset = originalValue.length;
+        }
+        setState({
+            cursorOffset: nextCursorOffset,
+            cursorWidth: nextCursorWidth,
+        });
+        if (nextValue !== originalValue) {
+            onChange(nextValue);
+        }
+    }, { isActive: focus });
+    return _jsx(Text, { children: placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue });
+}
+export default TextInput;
+export function UncontrolledTextInput({ initialValue = "", ...props }) {
+    const [value, setValue] = useState(initialValue);
+    return _jsx(TextInput, { ...props, value: value, onChange: setValue });
+}

package/dist/node/cli/display/hooks/useManifest.d.ts

@@ -0,0 +1,2 @@
+import { ManifestGenerator } from "../../../project/manifest/manifest.js";
+export declare function useManifest<T>(manifest: ManifestGenerator<any, T>): T | null;

package/dist/node/cli/display/hooks/useManifest.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export function useManifest(manifest) {
+    const [value, setValue] = useState(null);
+    useEffect(() => {
+        return manifest.subscribe(setValue);
+    }, [manifest]);
+    return value;
+}

package/dist/node/cli/display/hooks/useStatefulLog.d.ts

@@ -0,0 +1,11 @@
+import { StatefulLog } from "../../../utils/statefulLog.js";
+export type LogInfo<T extends StatefulLog<any> | undefined> = {
+    label: string;
+    value: Exclude<T, undefined>["state"];
+    status: Exclude<T, undefined>["status"];
+    time: number;
+    entries: Exclude<T, undefined>["entries"];
+};
+export declare function useStatefulLogs<T extends {
+    [K in keyof T]: StatefulLog<any> | undefined;
+}>(logs: T): { [K in keyof T]: LogInfo<T[K]>; };