@valancex/cli 0.0.0-stage → 0.11.0

package/dist/tree.js

@@ -0,0 +1,149 @@
+// The components the author declares in `src/main.ts`: `layout`, the overrides and `components`. This module reads the declaration and finds where in the file each part is written (for a
+// diagnostic, and for the editor); who uses whom is read from the templates (`linked`, with `outline.ts`).
+import { existsSync, readdirSync, readFileSync } from "node:fs";
+import { basename, dirname, join, relative, resolve, sep } from "node:path";
+import { ENTRY_FILE } from "./project.js";
+export const APPLICATION = "(application)";
+export const nameOf = (file) => basename(file, ".mprx");
+/** Every component the definition declares, once each by name: `layout`, each `override`, then each of `components`. Who uses whom is read from the templates (`linked`). */
+export const treeOf = (layout, overrides, components = []) => {
+    const found = new Map();
+    for (const declared of [...(layout === undefined ? [] : [layout]), ...overrides, ...components]) {
+        const name = nameOf(declared.template.mprx);
+        if (!found.has(name)) {
+            const contract = declared.props === undefined && declared.events === undefined ? {} : { interface: { props: declared.props ?? {}, events: declared.events ?? {} } };
+            found.set(name, { name, file: declared.template.mprx, ...contract, uses: [], parents: [] });
+        }
+    }
+    return [...found.values()];
+};
+/**
+ * The tree with who uses whom filled in: `usesOf` gives the tags each component's template writes. A component uses the declared components its template writes (not itself); the layout and each
+ * override are also the application's.
+ */
+export const linked = (nodes, layout, overrides, usesOf) => {
+    const declared = new Set(nodes.map((each) => each.name));
+    const uses = new Map(nodes.map((each) => [each.name, usesOf(each.name).filter((tag) => declared.has(tag) && tag !== each.name)]));
+    const roots = new Set([...(layout === undefined ? [] : [nameOf(layout.template.mprx)]), ...overrides.map((each) => nameOf(each.template.mprx))]);
+    return nodes.map((each) => ({
+        ...each,
+        uses: uses.get(each.name),
+        parents: [...(roots.has(each.name) ? [APPLICATION] : []), ...nodes.filter((other) => uses.get(other.name).includes(each.name)).map((other) => other.name)],
+    }));
+};
+// ---- where it is written ----------------------------------------------------------------------------------------------------------------------------------------
+export const placeIn = (text, offset, file) => {
+    const before = text.slice(0, offset).split("\n");
+    return { file, line: before.length, column: before[before.length - 1].length + 1 };
+};
+const escape = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+/** The offset just past the `)` that closes the `(` at `open`, strings respected. */
+const closing = (text, open) => {
+    let depth = 0;
+    for (let at = open; at < text.length; at += 1) {
+        const char = text[at];
+        if (char === '"' || char === "'" || char === "`") {
+            const quote = char;
+            at += 1;
+            while (at < text.length && text[at] !== quote) {
+                at += text[at] === "\\" ? 2 : 1;
+            }
+        }
+        else if (char === "(") {
+            depth += 1;
+        }
+        else if (char === ")") {
+            depth -= 1;
+            if (depth === 0) {
+                return at + 1;
+            }
+        }
+    }
+    return text.length;
+};
+/** The offset just past the `}` that closes the `{` at `open`, strings respected. */
+const braceEnd = (text, open) => {
+    let depth = 0;
+    for (let at = open; at < text.length; at += 1) {
+        const char = text[at];
+        if (char === '"' || char === "'" || char === "`") {
+            const quote = char;
+            at += 1;
+            while (at < text.length && text[at] !== quote) {
+                at += text[at] === "\\" ? 2 : 1;
+            }
+        }
+        else if (char === "{") {
+            depth += 1;
+        }
+        else if (char === "}") {
+            depth -= 1;
+            if (depth === 0) {
+                return at + 1;
+            }
+        }
+    }
+    return text.length;
+};
+const IMPORT = /import\s+(\w+)\s+from\s+["']([^"']+\.mprx)["']/g;
+/** The site of the template imported as `ident` in `text` (the file `file`): its import, the `component(ident, …)` call, and the keys of the contract written in it. */
+const siteIn = (file, text, ident, imported) => {
+    const at = (offset) => placeIn(text, offset, file);
+    const call = new RegExp(`component\\(\\s*${ident}\\b`).exec(text);
+    const range = call === null ? undefined : { from: call.index, to: closing(text, call.index + "component".length) };
+    return {
+        file,
+        imported: at(imported),
+        ...(call === null ? {} : { call: at(call.index) }),
+        member: (kind, name) => {
+            if (range === undefined) {
+                return undefined;
+            }
+            const body = text.slice(range.from, range.to);
+            const start = new RegExp(`\\b${kind}\\s*:\\s*\\{`).exec(body);
+            if (start === null) {
+                return undefined;
+            }
+            const open = start.index + start[0].length - 1;
+            const close = braceEnd(body, open);
+            const key = new RegExp(`(^|[\\s{,])(["']?)${escape(name)}\\2\\s*:`).exec(body.slice(open, close));
+            return key === null ? undefined : at(range.from + open + key.index + key[1].length);
+        },
+    };
+};
+const typescriptIn = (dir) => existsSync(dir)
+    ? readdirSync(dir, { recursive: true, encoding: "utf8" })
+        .filter((file) => file.endsWith(".ts") && !file.endsWith(".d.ts"))
+        .sort()
+    : [];
+/**
+ * Where each template's component is defined: the `component(template, …)` call in the project's TypeScript, wherever it is written (the entry file, or a file of its own beside the template), and the
+ * keys of its contract. A text search for pointing, not a parse: what it cannot find it leaves out, and callers fall back to the template.
+ */
+export const declarationsOf = (root) => {
+    const found = new Map();
+    const files = [
+        ENTRY_FILE,
+        ...typescriptIn(join(root, "src"))
+            .map((file) => `src/${file.split(sep).join("/")}`)
+            .filter((file) => file !== ENTRY_FILE),
+    ];
+    for (const file of files) {
+        const path = join(root, file);
+        if (!existsSync(path)) {
+            continue;
+        }
+        const text = readFileSync(path, "utf8");
+        for (const match of text.matchAll(IMPORT)) {
+            const template = relative(root, resolve(dirname(path), match[2]))
+                .split(sep)
+                .join("/");
+            const site = siteIn(file, text, match[1], match.index);
+            // A definition wins over an import that only passes the component on.
+            if (!found.has(template) || (found.get(template).call === undefined && site.call !== undefined)) {
+                found.set(template, site);
+            }
+        }
+    }
+    return found;
+};

package/dist/tty.d.ts

@@ -0,0 +1,13 @@
+export interface Environment {
+    readonly stdout?: {
+        readonly isTTY?: boolean;
+    };
+    readonly stdin?: {
+        readonly isTTY?: boolean;
+    };
+    readonly env?: NodeJS.ProcessEnv;
+}
+/** A terminal to draw on. */
+export declare const canDraw: ({ stdout, env }?: Environment) => boolean;
+/** A terminal to draw on and to read keys from: what a question needs. */
+export declare const canAsk: (environment?: Environment) => boolean;

package/dist/tty.js

@@ -0,0 +1,4 @@
+/** A terminal to draw on. */
+export const canDraw = ({ stdout = process.stdout, env = process.env } = {}) => stdout.isTTY === true && (env["CI"] === undefined || env["CI"] === "" || env["CI"] === "false") && env["TERM"] !== "dumb";
+/** A terminal to draw on and to read keys from: what a question needs. */
+export const canAsk = (environment = {}) => canDraw(environment) && (environment.stdin ?? process.stdin).isTTY === true;

package/dist/ui/Spinner.d.ts

@@ -0,0 +1,3 @@
+export declare const Spinner: ({ color }: {
+    readonly color?: string;
+}) => import("react").JSX.Element;

package/dist/ui/Spinner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useEffect, useState } from "react";
+const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export const Spinner = ({ color = "cyan" }) => {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame((current) => (current + 1) % FRAMES.length);
+        }, 80);
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+    return _jsx(Text, { color: color, children: FRAMES[frame] });
+};

package/dist/ui/init.d.ts

@@ -0,0 +1,22 @@
+import type { InitArgs } from "../args.js";
+import type { Answers, Outcome, PackageManager } from "../init.js";
+import { execute as defaultExecute } from "../init.js";
+export type Result = {
+    readonly status: "done";
+    readonly answers: Answers;
+    readonly outcome: Outcome;
+} | {
+    readonly status: "failed";
+    readonly message: string;
+} | {
+    readonly status: "cancelled";
+};
+export interface WizardProps {
+    readonly args: InitArgs;
+    readonly cwd: string;
+    readonly detected: PackageManager;
+    readonly version: string;
+    readonly execute?: typeof defaultExecute;
+    readonly onFinish: (result: Result) => void;
+}
+export declare const Wizard: ({ args, cwd, detected, version, execute, onFinish }: WizardProps) => import("react").JSX.Element;

package/dist/ui/init.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The `vlx init` wizard: the questions flags did not answer, then the work with its progress, then what to do next. The work and the rules are `../init.ts`; this file only asks and shows.
+import { Box, Text, useApp } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { relative } from "node:path";
+import { directoryFor, directoryProblem, execute as defaultExecute, nameProblem, PACKAGE_MANAGERS, runCommand, titleOf } from "../init.js";
+import { TARGETS } from "../targets.js";
+import { Spinner } from "./Spinner.js";
+import { Answered, Confirm, MultiSelect, Select, TextPrompt } from "./prompts.js";
+const ORDER = ["name", "targets", "base", "url", "pm", "install", "git"];
+const BASE = /^\/([\w.~-]+\/)*$/;
+const URL_FORM = /^https?:\/\/.*[^/]$/;
+/** Whether a question has to be asked: nothing answered it, and the person has not said to take the defaults. */
+const asked = (question, draft, args) => {
+    if (args.yes) {
+        return false;
+    }
+    switch (question) {
+        case "name":
+            return draft.name === undefined;
+        case "targets":
+            return draft.targets.length === 0;
+        case "base":
+            return draft.targets.includes("web") && draft.base === undefined;
+        case "url":
+            return draft.targets.includes("web") && draft.url === undefined;
+        case "pm":
+            return args.packageManager === undefined;
+        case "install":
+            return draft.install === undefined;
+        case "git":
+            return draft.git === undefined;
+    }
+};
+const next = (from, draft, args) => {
+    for (let at = from; at < ORDER.length; at += 1) {
+        if (asked(ORDER[at], draft, args)) {
+            return at;
+        }
+    }
+    return ORDER.length;
+};
+const STEPS = [
+    { step: "files", label: "Writing the files" },
+    { step: "install", label: "Installing the dependencies" },
+    { step: "git", label: "Making a git repository" },
+];
+export const Wizard = ({ args, cwd, detected, version, execute = defaultExecute, onFinish }) => {
+    const { exit } = useApp();
+    const initial = {
+        ...(args.name === undefined ? {} : { name: args.name }),
+        targets: args.targets,
+        ...(args.base === undefined ? {} : { base: args.base }),
+        ...(args.url === undefined ? {} : { url: args.url }),
+        pm: args.packageManager ?? detected,
+        ...(args.install === undefined ? {} : { install: args.install }),
+        ...(args.git === undefined ? {} : { git: args.git }),
+    };
+    const [draft, setDraft] = useState(initial);
+    const [at, setAt] = useState(() => next(0, initial, args));
+    const [answered, setAnswered] = useState([]);
+    const [progress, setProgress] = useState({});
+    const [outcome, setOutcome] = useState(undefined);
+    const [failure, setFailure] = useState(undefined);
+    const finished = useRef(false);
+    const answer = (patch, label, shown) => {
+        const merged = { ...draft, ...patch };
+        setDraft(merged);
+        setAnswered((current) => [...current, [label, shown]]);
+        setAt(next(at + 1, merged, args));
+    };
+    const running = at >= ORDER.length;
+    useEffect(() => {
+        if (!running || finished.current) {
+            return;
+        }
+        finished.current = true;
+        const targets = draft.targets.length === 0 ? TARGETS.map((each) => each.id) : draft.targets;
+        const name = draft.name ?? "my-app";
+        const answers = {
+            name,
+            dir: directoryFor(name, cwd),
+            targets,
+            web: { base: draft.base ?? "", url: draft.url ?? "" },
+            packageManager: draft.pm,
+            install: draft.install ?? true,
+            git: draft.git ?? true,
+            ...(args.cli === undefined ? {} : { cli: args.cli }),
+        };
+        execute(answers, (step, state, detail) => {
+            setProgress((current) => ({ ...current, [step]: { state, detail } }));
+        })
+            .then((done) => {
+            setOutcome({ answers, outcome: done });
+            onFinish({ status: "done", answers, outcome: done });
+        })
+            .catch((error) => {
+            const message = error instanceof Error ? error.message : String(error);
+            setFailure(message);
+            onFinish({ status: "failed", message });
+        });
+    }, [running]);
+    // Leave once the last frame (what was created, what is next) is on the screen: exiting in the same tick would unmount before it is drawn.
+    useEffect(() => {
+        if (outcome !== undefined || failure !== undefined) {
+            exit();
+        }
+    }, [outcome, failure]);
+    const question = running ? undefined : ORDER[at];
+    const picked = draft.targets.length === 0 ? TARGETS.map((each) => each.id) : draft.targets;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: "cyan", children: "vlx init" }), _jsxs(Text, { dimColor: true, children: [" \u00B7 VALANCE ", version] })] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [answered.map(([label, value]) => (_jsx(Answered, { label: label, value: value }, label))), question === "name" ? (_jsx(TextPrompt, { label: "What is the application called?", hint: "a name, or a path: it is made in a directory of that name", initial: "my-app", validate: (value) => nameProblem(value) ?? directoryProblem(directoryFor(value, cwd)), onSubmit: (value) => {
+                            answer({ name: value.trim() }, "Application", `${titleOf(value)} → ${relative(cwd, directoryFor(value, cwd)) || "."}`);
+                        } })) : null, question === "targets" ? (_jsx(MultiSelect, { label: "Which targets is it for?", choices: TARGETS.map((each) => ({ value: each.id, label: each.label, hint: each.hint })), initial: TARGETS.map((each) => each.id), onSubmit: (values) => {
+                            answer({ targets: values }, "Targets", values.map((id) => TARGETS.find((each) => each.id === id)?.label ?? id).join(", "));
+                        } })) : null, question === "base" ? (_jsx(TextPrompt, { label: "Web: where is the site served?", hint: "a base path: / or /docs/", initial: "/", validate: (value) => (BASE.test(value) ? undefined : "a path that starts and ends with /, like / or /docs/"), onSubmit: (value) => {
+                            answer({ base: value }, "Base path", value);
+                        } })) : null, question === "url" ? (_jsx(TextPrompt, { label: "Web: where is it published?", hint: "optional, https://example.com: adds canonical links and a sitemap", validate: (value) => (value === "" || URL_FORM.test(value) ? undefined : "an address like https://example.com, without a trailing slash"), onSubmit: (value) => {
+                            answer({ url: value }, "Published at", value === "" ? "not yet" : value);
+                        } })) : null, question === "pm" ? (_jsx(Select, { label: "Which package manager?", choices: PACKAGE_MANAGERS.map((each) => ({ value: each, label: each, ...(each === detected ? { hint: "(running this)" } : {}) })), initial: draft.pm, onSubmit: (value) => {
+                            answer({ pm: value }, "Package manager", value);
+                        } })) : null, question === "install" ? (_jsx(Confirm, { label: "Install the dependencies now?", initial: true, onSubmit: (value) => {
+                            answer({ install: value }, "Install", value ? "yes" : "no");
+                        } })) : null, question === "git" ? (_jsx(Confirm, { label: "Make a git repository?", initial: true, onSubmit: (value) => {
+                            answer({ git: value }, "Git", value ? "yes" : "no");
+                        } })) : null] }), running ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: STEPS.map(({ step, label }) => {
+                    const now = progress[step];
+                    if (now === undefined || now.state === "skipped") {
+                        return now === undefined ? null : (_jsxs(Text, { dimColor: true, children: ["\u2013 ", label, ": skipped"] }, step));
+                    }
+                    return (_jsxs(Text, { children: [now.state === "start" ? _jsx(Spinner, {}) : now.state === "done" ? _jsx(Text, { color: "green", children: "\u2714" }) : _jsx(Text, { color: "yellow", children: "!" }), " ", label, now.state === "failed" ? _jsx(Text, { color: "yellow", children: " (failed)" }) : null] }, step));
+                }) })) : null, failure === undefined ? null : (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2716 ", failure] }) })), outcome === undefined ? null : _jsx(Next, { answers: outcome.answers, outcome: outcome.outcome, cwd: cwd, picked: picked })] }));
+};
+const Next = ({ answers, outcome, cwd, picked }) => {
+    const where = relative(cwd, answers.dir) || ".";
+    const run = runCommand(answers.packageManager);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: "green", bold: true, children: ["\u2714 Created ", titleOf(answers.name)] }), _jsxs(Text, { dimColor: true, children: [" ", "in ", where, " \u00B7 ", outcome.files.length, " files \u00B7 ", picked.join(", ")] })] }), outcome.notes.map((note) => (_jsxs(Text, { color: "yellow", children: ["! ", note] }, note))), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: "Next" }), where === "." ? null : _jsxs(Text, { children: [" cd ", where] }), outcome.installed ? null : _jsxs(Text, { children: [" ", answers.packageManager, " install"] }), _jsxs(Text, { children: [" ", run, " dev"] }), _jsxs(Text, { dimColor: true, children: [" ", "Start reading at src/main.ts. ", run, " build writes the site; ", run, " check finds mistakes."] })] })] }));
+};

package/dist/ui/prompts.d.ts

@@ -0,0 +1,39 @@
+export interface Choice<T extends string> {
+    readonly value: T;
+    readonly label: string;
+    readonly hint?: string;
+}
+export declare const Problem: ({ children }: {
+    readonly children: string;
+}) => import("react").JSX.Element;
+export declare const TextPrompt: ({ label, hint, initial, validate, onSubmit, }: {
+    readonly label: string;
+    readonly hint?: string;
+    readonly initial?: string;
+    readonly validate?: (value: string) => string | undefined;
+    readonly onSubmit: (value: string) => void;
+}) => import("react").JSX.Element;
+export declare const Select: <T extends string>({ label, hint, choices, initial, onSubmit, }: {
+    readonly label: string;
+    readonly hint?: string;
+    readonly choices: ReadonlyArray<Choice<T>>;
+    readonly initial?: T;
+    readonly onSubmit: (value: T) => void;
+}) => import("react").JSX.Element;
+export declare const MultiSelect: <T extends string>({ label, hint, choices, initial, onSubmit, }: {
+    readonly label: string;
+    readonly hint?: string;
+    readonly choices: ReadonlyArray<Choice<T>>;
+    readonly initial: ReadonlyArray<T>;
+    readonly onSubmit: (values: ReadonlyArray<T>) => void;
+}) => import("react").JSX.Element;
+export declare const Confirm: ({ label, initial, onSubmit }: {
+    readonly label: string;
+    readonly initial: boolean;
+    readonly onSubmit: (value: boolean) => void;
+}) => import("react").JSX.Element;
+/** An answered question, left on screen. */
+export declare const Answered: ({ label, value }: {
+    readonly label: string;
+    readonly value: string;
+}) => import("react").JSX.Element;

package/dist/ui/prompts.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The four questions the wizard asks, as small controlled components: a line of text, one of several, any of several, yes or no. Each takes `onSubmit` and nothing else from its parent; the parent
+// keeps what was answered. Keys: Enter answers, arrows (or j and k) move, Space toggles, and the text keys are what they say.
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+const Question = ({ label, hint, children }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "? " }), _jsx(Text, { bold: true, children: label })] }), hint === undefined ? null : _jsxs(Text, { dimColor: true, children: [" ", hint] }), children] }));
+export const Problem = ({ children }) => _jsxs(Text, { color: "red", children: [" \u2716 ", children] });
+export const TextPrompt = ({ label, hint, initial = "", validate, onSubmit, }) => {
+    // `initial` is the default, shown dimmed until something is typed; Enter on nothing takes it.
+    const [value, setValue] = useState("");
+    const [problem, setProblem] = useState(undefined);
+    useInput((input, key) => {
+        if (key.return) {
+            const answer = value === "" ? initial : value;
+            const found = validate?.(answer);
+            if (found === undefined) {
+                onSubmit(answer);
+            }
+            else {
+                setProblem(found);
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue((current) => current.slice(0, -1));
+            setProblem(undefined);
+            return;
+        }
+        if (key.ctrl || key.meta || key.escape || key.tab || key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || input === "") {
+            return;
+        }
+        setValue((current) => current + input.replace(/[\r\n]+/g, ""));
+        setProblem(undefined);
+    });
+    return (_jsxs(Question, { label: label, hint: hint, children: [_jsxs(Text, { children: ["  ", value === "" ? _jsx(Text, { dimColor: true, children: initial }) : value, _jsx(Text, { color: "cyan", children: "\u258C" })] }), problem === undefined ? null : _jsx(Problem, { children: problem })] }));
+};
+export const Select = ({ label, hint, choices, initial, onSubmit, }) => {
+    const [at, setAt] = useState(Math.max(0, choices.findIndex((each) => each.value === initial)));
+    useInput((input, key) => {
+        if (key.upArrow || input === "k") {
+            setAt((current) => (current + choices.length - 1) % choices.length);
+        }
+        else if (key.downArrow || input === "j") {
+            setAt((current) => (current + 1) % choices.length);
+        }
+        else if (key.return) {
+            onSubmit(choices[at].value);
+        }
+    });
+    return (_jsx(Question, { label: label, hint: hint ?? "↑/↓ to move, Enter to choose", children: choices.map((choice, index) => (_jsxs(Text, { ...(index === at ? { color: "cyan" } : {}), children: ["  ", index === at ? "❯" : " ", " ", choice.label, choice.hint === undefined ? null : _jsxs(Text, { dimColor: true, children: [" ", choice.hint] })] }, choice.value))) }));
+};
+export const MultiSelect = ({ label, hint, choices, initial, onSubmit, }) => {
+    const [at, setAt] = useState(0);
+    const [chosen, setChosen] = useState(initial);
+    const [problem, setProblem] = useState(undefined);
+    useInput((input, key) => {
+        if (key.upArrow || input === "k") {
+            setAt((current) => (current + choices.length - 1) % choices.length);
+        }
+        else if (key.downArrow || input === "j") {
+            setAt((current) => (current + 1) % choices.length);
+        }
+        else if (input === " ") {
+            const value = choices[at].value;
+            setChosen((current) => (current.includes(value) ? current.filter((each) => each !== value) : [...current, value]));
+            setProblem(undefined);
+        }
+        else if (input === "a") {
+            setChosen((current) => (current.length === choices.length ? [] : choices.map((each) => each.value)));
+            setProblem(undefined);
+        }
+        else if (key.return) {
+            if (chosen.length === 0) {
+                setProblem("choose at least one (Space)");
+            }
+            else {
+                onSubmit(choices.filter((each) => chosen.includes(each.value)).map((each) => each.value));
+            }
+        }
+    });
+    return (_jsxs(Question, { label: label, hint: hint ?? "↑/↓ to move, Space to toggle, a for all, Enter to confirm", children: [choices.map((choice, index) => (_jsxs(Text, { ...(index === at ? { color: "cyan" } : {}), children: ["  ", index === at ? "❯" : " ", " ", chosen.includes(choice.value) ? "◉" : "○", " ", choice.label, choice.hint === undefined ? null : _jsxs(Text, { dimColor: true, children: [" ", choice.hint] })] }, choice.value))), problem === undefined ? null : _jsx(Problem, { children: problem })] }));
+};
+export const Confirm = ({ label, initial, onSubmit }) => {
+    useInput((input, key) => {
+        if (input === "y" || input === "Y") {
+            onSubmit(true);
+        }
+        else if (input === "n" || input === "N") {
+            onSubmit(false);
+        }
+        else if (key.return) {
+            onSubmit(initial);
+        }
+    });
+    return _jsx(Question, { label: label, hint: initial ? "(Y/n)" : "(y/N)" });
+};
+/** An answered question, left on screen. */
+export const Answered = ({ label, value }) => (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u2714 " }), label, " ", _jsx(Text, { color: "cyan", children: value })] }));

package/dist/ui/report.d.ts

@@ -0,0 +1,31 @@
+import type { BuildStage, Built } from "../build.js";
+import type { Checked } from "../check.js";
+import type { Diagnostic } from "../diagnostics.js";
+export declare const Working: ({ label }: {
+    readonly label: string;
+}) => import("react").JSX.Element;
+/** Mistakes grouped by file, each `line:column  code  message`. A line of 0 is "no line" (a whole file, or the configuration). */
+export declare const Diagnostics: ({ diagnostics }: {
+    readonly diagnostics: ReadonlyArray<Diagnostic>;
+}) => import("react").JSX.Element;
+export declare const CheckResult: ({ result }: {
+    readonly result: Checked;
+}) => import("react").JSX.Element;
+/** The stages up to `current` are done, `current` is spinning, the rest wait. With no `current`, all are done. */
+export declare const BuildProgress: ({ current }: {
+    readonly current: BuildStage | undefined;
+}) => import("react").JSX.Element;
+export declare const BuildResult: ({ built, seconds }: {
+    readonly built: Built;
+    readonly seconds: number;
+}) => import("react").JSX.Element;
+export interface DevState {
+    readonly url?: string;
+    readonly open: ReadonlyArray<Diagnostic>;
+    /** The latest reports, oldest first. */
+    readonly lines: ReadonlyArray<string>;
+    readonly starting: boolean;
+}
+export declare const DevScreen: ({ state }: {
+    readonly state: DevState;
+}) => import("react").JSX.Element;

package/dist/ui/report.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// What `vlx check`, `vlx build` and `vlx dev` show in a terminal. They are views of results the commands already compute: the commands run the same with or without them, and a pipe, a CI log or
+// `--json` never gets one (see `../tty.ts`).
+import { Box, Text } from "ink";
+import { Spinner } from "./Spinner.js";
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+export const Working = ({ label }) => (_jsxs(Text, { children: [_jsx(Spinner, {}), " ", label] }));
+/** Mistakes grouped by file, each `line:column  code  message`. A line of 0 is "no line" (a whole file, or the configuration). */
+export const Diagnostics = ({ diagnostics }) => {
+    const byFile = new Map();
+    for (const each of diagnostics) {
+        byFile.set(each.file, [...(byFile.get(each.file) ?? []), each]);
+    }
+    return (_jsx(Box, { flexDirection: "column", children: [...byFile].map(([file, list]) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, underline: true, children: file }), list.map((each, index) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: each.line > 0 ? `${each.line}:${each.column}`.padEnd(8) : "".padEnd(8) }), _jsx(Text, { color: "red", children: each.code }), _jsxs(Text, { children: [" ", each.message] })] }, `${each.line}:${each.column}:${each.code}:${index}`)))] }, file))) }));
+};
+export const CheckResult = ({ result }) => result.diagnostics.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: "\u2714 No problems" }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", plural(result.pages, "page"), ", ", plural(result.components.length, "component")] })] })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Diagnostics, { diagnostics: result.diagnostics }), _jsxs(Text, { color: "red", bold: true, children: ["\u2716 ", plural(result.diagnostics.length, "problem")] })] }));
+const STAGES = [
+    { stage: "configuration", label: "Reading the configuration" },
+    { stage: "content", label: "Reading the content" },
+    { stage: "templates", label: "Compiling the templates" },
+    { stage: "bundle", label: "Bundling the browser code" },
+    { stage: "pages", label: "Writing the pages" },
+];
+/** The stages up to `current` are done, `current` is spinning, the rest wait. With no `current`, all are done. */
+export const BuildProgress = ({ current }) => {
+    const at = current === undefined ? STAGES.length : STAGES.findIndex((each) => each.stage === current);
+    return (_jsx(Box, { flexDirection: "column", children: STAGES.map(({ stage, label }, index) => index > at ? (_jsxs(Text, { dimColor: true, children: ["\u25CB ", label] }, stage)) : index === at ? (_jsxs(Text, { children: [_jsx(Spinner, {}), " ", label] }, stage)) : (_jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u2714" }), " ", label] }, stage))) }));
+};
+export const BuildResult = ({ built, seconds }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(BuildProgress, { current: undefined }), _jsxs(Text, { children: [_jsxs(Text, { color: "green", bold: true, children: ["\u2714 Built ", plural(built.pages.length, "page")] }), _jsxs(Text, { dimColor: true, children: [" ", "\u00B7 ", plural(built.files.length, "file"), " \u2192 ", built.dir, " \u00B7 ", seconds.toFixed(1), "s"] })] })] }));
+export const DevScreen = ({ state }) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: "cyan", children: "vlx dev" }), state.starting ? (_jsxs(Text, { children: ["  ", _jsx(Spinner, {}), " starting"] })) : (_jsxs(Text, { children: ["  ", _jsx(Text, { color: "green", children: "\u25CF" }), " ", state.url] }))] }), state.open.length === 0 ? (state.starting ? null : (_jsx(Text, { color: "green", children: "\u2714 No problems" }))) : (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Diagnostics, { diagnostics: state.open }), _jsxs(Text, { color: "red", children: ["\u2716 ", plural(state.open.length, "problem"), ": fix and save; the last good build keeps serving"] })] })), state.lines.length === 0 ? null : (_jsx(Box, { flexDirection: "column", marginTop: 1, children: state.lines.map((line, index) => (_jsx(Text, { dimColor: true, children: line }, `${index}:${line}`))) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Ctrl+C to stop" }) })] }));

package/dist/ui/run.d.ts

@@ -0,0 +1,15 @@
+import type { InitArgs } from "../args.js";
+import type { Checked } from "../check.js";
+import type { Diagnostic } from "../diagnostics.js";
+import type { PackageManager } from "../init.js";
+import type { Result } from "./init.js";
+import type { Built } from "../build.js";
+export declare const drawInit: (args: InitArgs, cwd: string, detected: PackageManager, version: string) => Promise<Result>;
+export declare const drawCheck: (root: string) => Promise<Checked>;
+export declare const drawBuild: (root: string) => Promise<Built>;
+/** Mistakes that stopped a command, drawn the way `check` draws them. */
+export declare const drawDiagnostics: (diagnostics: ReadonlyArray<Diagnostic>) => Promise<void>;
+export declare const drawDev: (root: string, options: {
+    readonly port?: number;
+    readonly host?: string;
+}) => Promise<void>;

package/dist/ui/run.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Putting the views on the terminal. Ink and React are loaded only here, and only when a command is going to draw: a command that prints plain text never pays for them.
+import { render } from "ink";
+import { build as runBuild } from "../build.js";
+import { check as runCheck } from "../check.js";
+import { dev as runDev } from "../dev.js";
+import { Wizard } from "./init.js";
+import { BuildProgress, BuildResult, CheckResult, DevScreen, Diagnostics, Working } from "./report.js";
+const show = (element) => render(element, { exitOnCtrlC: true });
+/** Draws `element` once and leaves it on the screen. */
+const leave = async (element) => {
+    const shown = show(element);
+    shown.unmount();
+    await shown.waitUntilExit();
+};
+export const drawInit = async (args, cwd, detected, version) => {
+    let result = { status: "cancelled" };
+    const shown = render(_jsx(Wizard, { args: args, cwd: cwd, detected: detected, version: version, onFinish: (done) => {
+            result = done;
+        } }), { exitOnCtrlC: true });
+    await shown.waitUntilExit();
+    return result;
+};
+export const drawCheck = async (root) => {
+    const shown = show(_jsx(Working, { label: "Checking your project" }));
+    try {
+        const result = await runCheck(root);
+        shown.rerender(_jsx(CheckResult, { result: result }));
+        return result;
+    }
+    finally {
+        shown.unmount();
+        await shown.waitUntilExit();
+    }
+};
+export const drawBuild = async (root) => {
+    const started = Date.now();
+    const shown = show(_jsx(BuildProgress, { current: "configuration" }));
+    try {
+        const built = await runBuild(root, { onStage: ((stage) => shown.rerender(_jsx(BuildProgress, { current: stage }))) });
+        shown.rerender(_jsx(BuildResult, { built: built, seconds: (Date.now() - started) / 1000 }));
+        return built;
+    }
+    finally {
+        shown.unmount();
+        await shown.waitUntilExit();
+    }
+};
+/** Mistakes that stopped a command, drawn the way `check` draws them. */
+export const drawDiagnostics = (diagnostics) => leave(_jsx(Diagnostics, { diagnostics: diagnostics }));
+export const drawDev = async (root, options) => {
+    let state = { open: [], lines: [], starting: true };
+    const shown = show(_jsx(DevScreen, { state: state }));
+    const update = (patch) => {
+        state = { ...state, ...patch };
+        shown.rerender(_jsx(DevScreen, { state: state }));
+    };
+    const running = await runDev(root, {
+        ...options,
+        log: (line) => {
+            update({ lines: [...state.lines, line].slice(-6) });
+        },
+        onStatus: (open) => {
+            update({ open });
+        },
+    });
+    update({ url: running.url, starting: false });
+    await new Promise((resolve) => {
+        process.once("SIGINT", resolve);
+        process.once("SIGTERM", resolve);
+    });
+    await running.close();
+    shown.unmount();
+    await shown.waitUntilExit();
+};