eddev 0.3.38 → 2.0.0-beta.10

package/dist/node/cli/cli-worker.js

@@ -0,0 +1,117 @@
+import { Worker, isMainThread, parentPort, workerData } from "node:worker_threads";
+import { AdminBundler, adminLog } from "../compiler/bundler.admin.js";
+import { FrontendBundler, frontendLog } from "../compiler/bundler.frontend.js";
+import { GraphQLGenerator, graphqlLog } from "../graphql/graphql-codegen.js";
+import { Project } from "../project/project.js";
+import { configureCliMode } from "./cli-mode.js";
+export class CLIWorker {
+    worker;
+    constructor({ log, mode, verbose }) {
+        const worker = new Worker(new URL(import.meta.url), {
+            workerData: {
+                mode,
+                verbose,
+            },
+            stdout: true,
+            stderr: true,
+        });
+        this.worker = worker;
+        worker.stdout?.on("data", (data) => {
+            log.log(data.toString());
+        });
+        worker.stderr?.on("data", (data) => {
+            log.warn(data.toString());
+        });
+        worker.on("message", (msg) => {
+            try {
+                const payload = JSON.parse(msg);
+                if (payload && typeof payload === "object" && payload.type === "log") {
+                    log.copy(payload.log);
+                }
+            }
+            catch (err) {
+                log.warn("Unknown worker message:", msg);
+            }
+        });
+        worker.on("error", (err) => {
+            log.error("Worker error", err);
+        });
+        worker.on("exit", (code) => {
+            log.info("Worker exited", code);
+        });
+    }
+    async shutdown() {
+        await this.worker.terminate();
+    }
+}
+if (!isMainThread) {
+    const mode = workerData.mode;
+    /** Ignore self-signed certificate errors in dev mode */
+    process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
+    configureCliMode({
+        interactive: true,
+        readonly: false,
+        exitOnValidationError: true,
+        detailed: false,
+        verbose: workerData.verbose,
+        watch: true,
+        rootDir: process.cwd(),
+    });
+    // Load the project info
+    const project = await Project.create({
+        rootDir: process.cwd(),
+        reportPluginCompatibility: false,
+    });
+    function serializeLogData(data) {
+        if (data instanceof Error) {
+            return {
+                __is_error: true,
+                message: data.message,
+                stack: data.stack,
+                name: data.name,
+                cause: data.cause,
+            };
+        }
+        else if (data && Array.isArray(data)) {
+            return data.map(serializeLogData);
+        }
+        else if (data && typeof data === "object") {
+            const obj = { ...data };
+            for (const key in obj) {
+                obj[key] = serializeLogData(obj[key]);
+            }
+            return obj;
+        }
+        return data;
+    }
+    function pipeLog(log) {
+        log.subscribe((log) => {
+            // We ignore SSL errors in dev mode.
+            parentPort?.postMessage(JSON.stringify({ type: "log", log: serializeLogData(log) }));
+        });
+    }
+    if (mode === "admin") {
+        new AdminBundler(project, {
+            mode: "development",
+        });
+        pipeLog(adminLog);
+    }
+    else if (mode === "frontend") {
+        new FrontendBundler(project, {
+            mode: "development",
+            watch: true,
+        });
+        pipeLog(frontendLog);
+    }
+    else if (mode === "graphql") {
+        const codegen = new GraphQLGenerator(project);
+        codegen.start();
+        pipeLog(graphqlLog);
+    }
+    else if (mode === "serverless") {
+        // new ServerlessDevServer(project, {
+        //   mode: "development",
+        // })
+        // pipeLog(serverlessLog)
+    }
+}

package/dist/node/cli/cli.js

@@ -0,0 +1,197 @@
+import chalk from "chalk";
+import { Command } from "commander";
+import { setDefaultResultOrder } from "dns";
+import { config as importDotEnv } from "dotenv";
+import { adminLog } from "../compiler/bundler.admin.js";
+import { frontendLog } from "../compiler/bundler.frontend.js";
+import { DevServer, serverlessLog } from "../compiler/dev-server.js";
+import { createVinxiCodegen } from "../compiler/vinxi-codegen.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";
+import { buildVinxi } from "../compiler/build-vinxi.js";
+import { createConsole } from "../utils/stateful-log.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("Run in dev mode")
+    .option("-m, --mode <mode>", "Comma separated list of modes, or a single mode.", "frontend,admin,graphql,serverless")
+    .option("--verbose", "Show extra debugging info", false)
+    .action(async (options) => {
+    process.env["NODE_ENV"] = "development";
+    /** Ignore self-signed certificate errors in dev mode */
+    process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
+    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();
+    if (tasks.admin || tasks.frontend) {
+        const spaStaging = createVinxiCodegen({
+            mode: "development",
+            project,
+            serverless: false,
+            endpoint: "",
+        });
+        spaStaging.runAndWatch();
+    }
+    // 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) => {
+            // We ignore SSL errors in dev mode.
+            if (typeof args[0] === "string" && args[0].includes("NODE_TLS_REJECT_UNAUTHORIZED"))
+                return;
+            serverlessLog.error(...args);
+        };
+        console.warn = (...args) => {
+            serverlessLog.warn(...args);
+        };
+        console.info = (...args) => {
+            serverlessLog.info(...args);
+        };
+        const serverlessStaging = createVinxiCodegen({
+            mode: "development",
+            project,
+            serverless: true,
+            endpoint: "",
+        });
+        await serverlessStaging.runAndWatch();
+        new DevServer(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(),
+    });
+    const console = createConsole("build");
+    // Load the project info
+    const project = await Project.create({
+        rootDir: process.cwd(),
+    });
+    const buildServerless = options.serverless || process.env.VERCEL;
+    if (buildServerless) {
+        await buildVinxi({
+            project,
+            console,
+        });
+    }
+    // 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/dev-server.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/dev-server.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/stateful-log.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;