@remotedraw/cli 0.1.2 → 0.1.3

package/dist/setup-wizard.js

@@ -118,6 +118,17 @@ export function transitionWizard(state, action, definition) {
     }
     return state;
 }
+function completedSteps(state, definition) {
+    return definition.fields
+        .slice(0, state.fieldIndex)
+        .map((field) => {
+        const value = state.values[field.key];
+        const label = field
+            .choices?.(state.values)
+            .find((option) => option.value === value)?.label;
+        return [field.label, label ?? value];
+    });
+}
 export function wizardSemanticView(state, definition) {
     if (state.screen === "field") {
         const field = activeField(state, definition);
@@ -133,6 +144,8 @@ export function wizardSemanticView(state, definition) {
             activeLabel: field.label,
             value: state.values[field.key],
             valueIsDefault: field.kind === "text" && !state.editedFields.includes(field.key),
+            valuePreview: field.kind === "text" ? field.preview?.(state.values) : undefined,
+            completed: completedSteps(state, definition),
             choices,
             selectedChoice: state.values[field.key],
             selectedDetails: selectedChoice?.details,
@@ -169,6 +182,7 @@ export function wizardSemanticView(state, definition) {
         return {
             screen: state.screen,
             title: "Projectbestanden maken?",
+            review: definition.review(state.values),
             choices: [
                 { value: "no", label: "Nee, annuleren" },
                 { value: "yes", label: "Ja, project maken" },
@@ -196,39 +210,86 @@ export function wizardSemanticView(state, definition) {
 }
 export async function runSetupWizard(options) {
     let state = initialWizardState(options.definition);
-    try {
-        await options.terminal.enter();
-        if (options.terminal.color) {
-            for (let frame = 0; frame < BANNER_ANIMATION_FRAMES; frame += 1) {
-                options.terminal.write(renderWizard(state, options.definition, options.terminal, frame));
-                if (frame < BANNER_ANIMATION_FRAMES - 1) {
-                    await pause(BANNER_ANIMATION_DELAY_MS);
-                }
+    const animated = options.terminal.color;
+    // Monotonic so the wordmark, caret, and spinner never jump backwards.
+    let tick = IDLE_FRAME;
+    const paint = (frame) => {
+        options.terminal.write(renderWizard(state, options.definition, options.terminal, frame));
+    };
+    const play = async (frames, delay, from) => {
+        if (from != null)
+            tick = from;
+        for (let frame = 0; frame < frames; frame += 1) {
+            if (options.terminal.hasPendingKey?.() === true)
+                break;
+            paint(from != null ? tick + frame : (tick += 1));
+            if (frame < frames - 1)
+                await pause(delay);
+        }
+        if (from != null)
+            tick = from + frames - 1;
+    };
+    /** Waits for a key while keeping the frame alive, then goes quiet. */
+    const nextKey = async () => {
+        const readWithin = options.terminal.readKeyWithin;
+        if (animated && readWithin) {
+            for (let idle = 0; idle < IDLE_TICKS; idle += 1) {
+                const key = await readWithin(IDLE_TICK_MS);
+                if (key)
+                    return key;
+                tick += 1;
+                paint(tick);
             }
         }
+        return await options.terminal.readKey();
+    };
+    try {
+        await options.terminal.enter();
+        if (animated)
+            await play(INTRO_FRAMES, INTRO_FRAME_MS, 0);
+        let previousStep = stepSignature(state);
         while (true) {
-            options.terminal.write(renderWizard(state, options.definition, options.terminal, BANNER_ANIMATION_FRAMES - 1));
+            const currentStep = stepSignature(state);
+            if (animated && currentStep !== previousStep) {
+                await play(STEP_FRAMES, STEP_FRAME_MS);
+            }
+            previousStep = currentStep;
+            paint(tick);
             if (state.screen === "executing") {
-                try {
-                    const result = await options.execute(state.values);
-                    state = transitionWizard(state, { type: "executionSucceeded", ...result }, options.definition);
+                let running = true;
+                const execution = options
+                    .execute(state.values)
+                    .then((result) => ({ ok: true, result }), (error) => ({ ok: false, error }))
+                    .finally(() => {
+                    running = false;
+                });
+                if (animated) {
+                    while (running) {
+                        tick += 1;
+                        paint(tick);
+                        await pause(SPINNER_FRAME_MS);
+                    }
                 }
-                catch (error) {
-                    state = transitionWizard(state, {
+                const outcome = await execution;
+                state = outcome.ok
+                    ? transitionWizard(state, { type: "executionSucceeded", ...outcome.result }, options.definition)
+                    : transitionWizard(state, {
                         type: "executionFailed",
-                        message: `${error instanceof Error ? error.message : String(error)}\nControleer de doelmap en de toegangsrechten.`,
+                        message: `${outcome.error instanceof Error ? outcome.error.message : String(outcome.error)}\nControleer de doelmap en de toegangsrechten.`,
                     }, options.definition);
-                }
                 continue;
             }
             if (state.screen === "success" || state.screen === "cancelled") {
+                if (animated && state.screen === "success") {
+                    await play(SUCCESS_FRAMES, SUCCESS_FRAME_MS);
+                }
                 return { exitCode: 0, state };
             }
             if (state.screen === "error")
                 return { exitCode: 1, state };
             if (state.screen === "interrupted")
                 return { exitCode: 130, state };
-            const key = await options.terminal.readKey();
+            const key = await nextKey();
             const selectedDetails = wizardSemanticView(state, options.definition).selectedDetails;
             if (key.name === "d" && selectedDetails) {
                 if (!options.terminal.openUrl) {
@@ -287,8 +348,29 @@ export function actionForKey(key, state) {
     }
     return { type: "character", value: "" };
 }
-function paint(enabled, code, value) {
-    return enabled ? `\x1b[${code}m${value}\x1b[0m` : value;
+const INK = {
+    accent: { rgb: [56, 189, 248], code: "36" },
+    glow: { rgb: [186, 230, 253], code: "96" },
+    brand: { rgb: [129, 140, 248], code: "94" },
+    muted: { rgb: [124, 134, 150], code: "2" },
+    success: { rgb: [52, 211, 153], code: "32" },
+    danger: { rgb: [248, 113, 113], code: "31" },
+    warn: { rgb: [251, 191, 36], code: "33" },
+};
+function ink(terminal, tone, value, heavy = false) {
+    if (!terminal.color || value.length === 0)
+        return value;
+    const entry = INK[tone];
+    const sequence = terminal.trueColor
+        ? truecolor(entry.rgb)
+        : `\x1b[${entry.code}m`;
+    return `${heavy ? "\x1b[1m" : ""}${sequence}${value}\x1b[0m`;
+}
+function strong(terminal, value) {
+    return terminal.color && value.length > 0 ? `\x1b[1m${value}\x1b[0m` : value;
+}
+function truecolor(rgb) {
+    return `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
 }
 function hyperlink(enabled, url, label) {
     return enabled ? `\x1b]8;;${url}\x1b\\${label}\x1b]8;;\x1b\\` : label;
@@ -346,102 +428,463 @@ function wrapText(value, width) {
         lines.push(line);
     return lines;
 }
+function cardLines(terminal, title, rows, width) {
+    const border = (value) => ink(terminal, "accent", value);
+    const header = `─ ${title} `;
+    const lines = [
+        `${border("╭")}${ink(terminal, "glow", header, true)}${border("─".repeat(Math.max(0, width + 2 - header.length)))}${border("╮")}`,
+    ];
+    for (const row of rows) {
+        const fitted = row.text.length > width
+            ? { text: `${row.text.slice(0, Math.max(1, width - 1))}…` }
+            : row;
+        lines.push(`${border("│")} ${fitted.rendered ?? fitted.text}${" ".repeat(Math.max(0, width - fitted.text.length))} ${border("│")}`);
+    }
+    lines.push(`${border("╰")}${border("─".repeat(width + 2))}${border("╯")}`);
+    return lines;
+}
 function renderChoiceDetails(details, terminal) {
     const width = Math.max(20, Math.min(72, terminal.columns - 4));
-    const border = (value) => paint(terminal.color, "36", value);
-    const contentLine = (value = "", rendered = value) => `${border("│")} ${rendered}${" ".repeat(Math.max(0, width - value.length))} ${border("│")}`;
     const button = `[ ${details.docsLabel} ↗ ]`;
-    const header = "─ Keuzehulp ";
-    const lines = [
-        `${border("┌")}${paint(terminal.color, "1;36", header)}${border("─".repeat(width + 2 - header.length))}${border("┐")}`,
-        ...wrapText(details.summary, width).map((line) => contentLine(line, paint(terminal.color, "1", line))),
-        contentLine(),
-        ...wrapText(details.explanation, width).map((line) => contentLine(line)),
-        contentLine(),
-        contentLine(button, hyperlink(terminal.hyperlinks === true, details.docsUrl, paint(terminal.color, "1;96", button))),
+    const rows = [
+        ...wrapText(details.summary, width).map((line) => ({
+            text: line,
+            rendered: strong(terminal, line),
+        })),
+        { text: "" },
+        ...wrapText(details.explanation, width).map((line) => ({ text: line })),
+        { text: "" },
+        {
+            text: button,
+            rendered: hyperlink(terminal.hyperlinks === true, details.docsUrl, ink(terminal, "glow", button, true)),
+        },
     ];
     if (terminal.hyperlinks !== true) {
-        lines.push(...wrapText(details.docsUrl, width).map((line) => contentLine(line, paint(terminal.color, "2", line))));
+        rows.push(...wrapText(details.docsUrl, width).map((line) => ({
+            text: line,
+            rendered: ink(terminal, "muted", line),
+        })));
     }
-    lines.push(`${border("└")}${border("─".repeat(width + 2))}${border("┘")}`);
-    return lines;
+    return cardLines(terminal, "Keuzehulp", rows, width);
 }
 const BANNER_COLORS = ["36", "96", "94", "34"];
-const BANNER_ANIMATION_FRAMES = BANNER_COLORS.length;
-const BANNER_ANIMATION_DELAY_MS = 45;
+const BANNER_GRADIENT = [
+    [45, 212, 191],
+    [56, 189, 248],
+    [99, 130, 246],
+    [129, 140, 248],
+];
+const BANNER_GHOST = [42, 51, 66];
+const BANNER_CREST = [236, 254, 255];
+const SPINNER = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const SPARKLES = ["✦", "✧", "✶", "✧"];
+const INTRO_FRAMES = 28;
+const INTRO_FRAME_MS = 22;
+const IDLE_FRAME = INTRO_FRAMES - 1;
+const REVEAL_SPEED = 0.06;
+const CREST_WIDTH = 0.22;
+const SHIMMER_WIDTH = 0.2;
+const SHIMMER_SPAN = 14;
+const SHIMMER_PERIOD = 52;
+const STEP_FRAMES = 4;
+const STEP_FRAME_MS = 26;
+const SPINNER_FRAME_MS = 80;
+const SUCCESS_FRAMES = 6;
+const SUCCESS_FRAME_MS = 55;
+const IDLE_TICK_MS = 150;
+const IDLE_TICKS = 60;
 function pause(milliseconds) {
     return new Promise((resolve) => setTimeout(resolve, milliseconds));
 }
-export function renderWizard(state, definition, terminal, bannerFrame = 0) {
+function stepSignature(state) {
+    return `${state.screen}:${state.fieldIndex}`;
+}
+/** Steady while the frame is still settling; blinks once the wizard idles. */
+function caretGlyph(frame) {
+    const idleTicks = frame - IDLE_FRAME;
+    if (idleTicks <= 0)
+        return "▌";
+    return Math.floor(idleTicks / 3) % 2 === 0 ? "▌" : " ";
+}
+const WORDMARK = "RemoteDraw";
+/** Pixel rows per glyph; rendered as solid blocks or half blocks. */
+const BOLD_GLYPHS = {
+    R: ["######.", "##...##", "##...##", "######.", "##..##.", "##...##"],
+    D: ["######.", "##...##", "##...##", "##...##", "##...##", "######."],
+    e: ["......", ".####.", "##..##", "######", "##....", ".####."],
+    m: [
+        "..........",
+        "##########",
+        "##..##..##",
+        "##..##..##",
+        "##..##..##",
+        "##..##..##",
+    ],
+    o: ["......", ".####.", "##..##", "##..##", "##..##", ".####."],
+    t: [".##..", ".##..", "#####", ".##..", ".##..", "..###"],
+    r: ["......", "##.###", "####..", "##....", "##....", "##...."],
+    a: ["......", ".####.", "....##", ".#####", "##..##", ".#####"],
+    w: ["........", "##....##", "##....##", "##.##.##", "##.##.##", ".##..##."],
+};
+const COMPACT_GLYPHS = {
+    R: ["####.", "#...#", "#...#", "####.", "#..#.", "#...#"],
+    D: ["####.", "#...#", "#...#", "#...#", "#...#", "####."],
+    e: [".....", ".###.", "#...#", "#####", "#....", ".###."],
+    m: [".....", "#####", "#.#.#", "#.#.#", "#.#.#", "#.#.#"],
+    o: [".....", ".###.", "#...#", "#...#", "#...#", ".###."],
+    t: [".#...", ".#...", "####.", ".#...", ".#...", "..##."],
+    r: [".....", "#.###", "##...", "#....", "#....", "#...."],
+    a: [".....", ".###.", "....#", ".####", "#...#", ".####"],
+    w: [".....", "#...#", "#...#", "#.#.#", "#.#.#", ".#.#."],
+};
+const BOLD_WIDTH = wordmarkWidth(BOLD_GLYPHS);
+const COMPACT_WIDTH = wordmarkWidth(COMPACT_GLYPHS);
+const BANNER_CACHE = new Map();
+function wordmarkWidth(glyphs) {
+    return [...WORDMARK].reduce((total, character) => total + (glyphs[character]?.[0]?.length ?? 0) + 1, -1);
+}
+/** Full pixel rows: one text row per pixel row, solid blocks. */
+function solidWordmark(glyphs) {
+    return Array.from({ length: 6 }, (_unused, row) => [...WORDMARK]
+        .map((character) => [...(glyphs[character]?.[row] ?? "")]
+        .map((pixel) => (pixel === "#" ? "█" : " "))
+        .join(""))
+        .join(" "));
+}
+/** Half-height: two pixel rows folded into one text row. */
+function halfWordmark(glyphs) {
+    return Array.from({ length: 3 }, (_unused, row) => [...WORDMARK]
+        .map((character) => {
+        const top = glyphs[character]?.[row * 2] ?? "";
+        const bottom = glyphs[character]?.[row * 2 + 1] ?? "";
+        return [...top]
+            .map((pixel, column) => {
+            const upper = pixel === "#";
+            const lower = bottom[column] === "#";
+            return upper && lower ? "█" : upper ? "▀" : lower ? "▄" : " ";
+        })
+            .join("");
+    })
+        .join(" "));
+}
+function wordmarkRows(level, columns) {
+    const bold = columns >= BOLD_WIDTH + 2;
+    const key = `${level}:${bold}`;
+    const cached = BANNER_CACHE.get(key);
+    if (cached)
+        return cached;
+    const glyphs = bold ? BOLD_GLYPHS : COMPACT_GLYPHS;
+    const rows = level === 2 ? solidWordmark(glyphs) : halfWordmark(glyphs);
+    BANNER_CACHE.set(key, rows);
+    return rows;
+}
+function bannerLines(terminal, frame, level) {
+    if (level === 0)
+        return [ink(terminal, "glow", WORDMARK, true)];
+    const rows = wordmarkRows(level, terminal.columns);
+    return rows.map((row) => paintWordmark(terminal, row, frame));
+}
+/**
+ * The wordmark materialises: a crest sweeps left to right during the intro,
+ * turning dim scaffolding into lit blocks. Once settled, a slower highlight
+ * passes over it every few seconds while the wizard waits for input.
+ */
+function paintWordmark(terminal, row, frame) {
+    if (!terminal.color)
+        return row;
+    const characters = [...row];
+    const span = Math.max(1, characters.length - 1);
+    const crest = frame * REVEAL_SPEED - 0.3;
+    const idleTicks = frame - IDLE_FRAME;
+    const shimmerPhase = idleTicks > 0 ? idleTicks % SHIMMER_PERIOD : -1;
+    const shimmer = shimmerPhase >= 0 && shimmerPhase < SHIMMER_SPAN
+        ? (shimmerPhase / SHIMMER_SPAN) * 1.35 - 0.18
+        : undefined;
+    let rendered = "";
+    let openSequence = "";
+    let buffered = "";
+    for (let index = 0; index < characters.length; index += 1) {
+        const position = index / span;
+        const sequence = wordmarkSequence(terminal, position, crest, shimmer);
+        if (sequence !== openSequence) {
+            if (buffered)
+                rendered += `${openSequence}${buffered}`;
+            openSequence = sequence;
+            buffered = "";
+        }
+        buffered += characters[index];
+    }
+    return `${rendered}${openSequence}${buffered}\x1b[0m`;
+}
+function wordmarkSequence(terminal, position, crest, shimmer) {
+    const arrived = crest - position;
+    const highlight = Math.max(arrived >= 0 && arrived < CREST_WIDTH ? 1 - arrived / CREST_WIDTH : 0, shimmer == null
+        ? 0
+        : Math.max(0, 1 - Math.abs(position - shimmer) / SHIMMER_WIDTH));
+    if (!terminal.trueColor) {
+        if (arrived < 0)
+            return "\x1b[2m\x1b[34m";
+        if (highlight > 0.45)
+            return "\x1b[96m";
+        return `\x1b[${BANNER_COLORS[Math.floor(position * 3.5) % BANNER_COLORS.length]}m`;
+    }
+    if (arrived < 0)
+        return truecolor(BANNER_GHOST);
+    const scaled = Math.min(0.999, position) * (BANNER_GRADIENT.length - 1);
+    const index = Math.floor(scaled);
+    const base = mixRgb(BANNER_GRADIENT[index], BANNER_GRADIENT[index + 1], scaled - index);
+    return truecolor(highlight > 0
+        ? mixRgb(base, BANNER_CREST, highlight * highlight * 0.9)
+        : base);
+}
+function mixRgb(from, to, amount) {
+    const ratio = Math.min(1, Math.max(0, amount));
+    return [
+        Math.round(from[0] + (to[0] - from[0]) * ratio),
+        Math.round(from[1] + (to[1] - from[1]) * ratio),
+        Math.round(from[2] + (to[2] - from[2]) * ratio),
+    ];
+}
+function stepRail(terminal, current, total, frame) {
+    const cells = [];
+    for (let index = 0; index < total; index += 1) {
+        if (index > 0) {
+            cells.push(ink(terminal, index < current ? "accent" : "muted", "─"));
+        }
+        if (index < current - 1) {
+            cells.push(ink(terminal, "accent", "●"));
+        }
+        else if (index === current - 1) {
+            cells.push(ink(terminal, frame % 2 === 0 ? "glow" : "accent", "◉", true));
+        }
+        else {
+            cells.push(ink(terminal, "muted", "○"));
+        }
+    }
+    return cells.join("");
+}
+function screenGlyph(terminal, screen, frame) {
+    if (screen === "executing") {
+        return ink(terminal, "accent", SPINNER[frame % SPINNER.length]);
+    }
+    if (screen === "success")
+        return ink(terminal, "success", "✓", true);
+    if (screen === "error")
+        return ink(terminal, "danger", "✗", true);
+    if (screen === "confirm")
+        return ink(terminal, "warn", "?", true);
+    if (screen === "cancelled" || screen === "interrupted") {
+        return ink(terminal, "warn", "○");
+    }
+    return ink(terminal, "accent", "▸");
+}
+function choiceLines(terminal, choices, selectedValue, withHints) {
+    const lines = [];
+    for (const choice of choices) {
+        const selected = choice.value === selectedValue;
+        lines.push(selected
+            ? `${ink(terminal, "glow", "❯")} ${ink(terminal, "glow", "◉")} ${strong(terminal, choice.label)}`
+            : `  ${ink(terminal, "muted", "○")} ${choice.label}`);
+        if (withHints && choice.hint) {
+            lines.push(`    ${ink(terminal, "muted", choice.hint)}`);
+        }
+    }
+    return lines;
+}
+function progressBar(terminal, frame, size) {
+    const head = frame % (size + 6);
+    const cells = Array.from({ length: size }, (_unused, index) => {
+        const distance = head - index;
+        if (distance < 0 || distance > 5)
+            return ink(terminal, "muted", "▱");
+        return ink(terminal, distance < 2 ? "glow" : "accent", "▰");
+    });
+    return `  ${cells.join("")}`;
+}
+function controlLines(terminal, controls, width) {
+    const separator = ink(terminal, "muted", " · ");
+    const lines = [];
+    let rendered = "";
+    let plainLength = 0;
+    for (const control of controls) {
+        if (plainLength > 0 && plainLength + 3 + control.length > width) {
+            lines.push(rendered);
+            rendered = "";
+            plainLength = 0;
+        }
+        if (plainLength === 0) {
+            rendered = controlChip(terminal, control);
+            plainLength = control.length;
+        }
+        else {
+            rendered += `${separator}${controlChip(terminal, control)}`;
+            plainLength += 3 + control.length;
+        }
+    }
+    if (rendered)
+        lines.push(rendered);
+    return lines;
+}
+function controlChip(terminal, control) {
+    const gap = control.indexOf(" ");
+    if (gap < 0)
+        return ink(terminal, "glow", control);
+    return `${ink(terminal, "glow", control.slice(0, gap))}${ink(terminal, "muted", control.slice(gap))}`;
+}
+function labelColumn(pairs) {
+    return pairs.reduce((widest, [label]) => Math.max(widest, label.length), 0);
+}
+export function renderWizard(state, definition, terminal, frame = 0) {
     const view = wizardSemanticView(state, definition);
     const narrow = terminal.columns < 60;
-    const wordmark = narrow
-        ? ["RemoteDraw", "telefoon → canvas"]
-        : [
-            " ____                      _       ____                    ",
-            "|  _ \\ ___ _ __ ___   ___ | |_ ___|  _ \\ _ __ __ ___      __",
-            "| |_) / _ \\ '_ ` _ \\ / _ \\| __/ _ \\ | | | '__/ _` \\ \\ /\\ / /",
-            "|  _ <  __/ | | | | | (_) | ||  __/ |_| | | | (_| |\\ V  V / ",
-            "|_| \\_\\___|_| |_| |_|\\___/ \\__\\___|____/|_|  \\__,_| \\_/\\_/  ",
-        ];
+    const rule = Math.max(12, Math.min(terminal.columns - 1, 72));
+    const lines = fitWizard(view, terminal, frame, narrow, rule);
+    const home = terminal.color ? "\x1b[H" : "\x1b[2J\x1b[H";
+    const clearLine = terminal.color ? "\x1b[K" : "";
+    const clearBelow = terminal.color ? "\x1b[J" : "";
+    return `${home}${lines
+        .map((line) => `${line}${clearLine}`)
+        .join("\n")}${clearBelow}\n`;
+}
+/** Richest first: the last candidate that still fits the window wins. */
+const DENSITY_LADDER = [
+    { banner: 2, trail: true, hints: true, details: true },
+    { banner: 1, trail: true, hints: true, details: true },
+    { banner: 1, trail: false, hints: true, details: true },
+    { banner: 1, trail: false, hints: false, details: true },
+    { banner: 0, trail: false, hints: false, details: true },
+    { banner: 0, trail: false, hints: false, details: false },
+];
+function fitWizard(view, terminal, frame, narrow, rule) {
+    const widest = terminal.columns >= BOLD_WIDTH + 2
+        ? 2
+        : terminal.columns >= COMPACT_WIDTH + 2
+            ? 1
+            : 0;
+    const limit = terminal.rows == null ? undefined : terminal.rows - 1;
+    let lines = [];
+    for (const candidate of DENSITY_LADDER) {
+        lines = composeWizard(view, terminal, frame, narrow, rule, {
+            banner: Math.min(candidate.banner, widest),
+            trail: candidate.trail && !narrow,
+            hints: candidate.hints && !narrow,
+            details: candidate.details,
+        });
+        if (limit == null || lines.length <= limit)
+            break;
+    }
+    return lines;
+}
+function composeWizard(view, terminal, frame, narrow, rule, density) {
     const lines = [
-        "\x1b[2J\x1b[H",
-        ...wordmark.map((line, index) => paint(terminal.color, BANNER_COLORS[(index + bannerFrame) % BANNER_COLORS.length], line)),
+        ...bannerLines(terminal, frame, density.banner),
+        ink(terminal, "muted", density.banner > 0
+            ? "telefoon → canvas · projectsetup"
+            : "telefoon → canvas"),
         "",
     ];
     if (view.progress) {
-        lines.push(`Stap ${view.progress.current}/${view.progress.total} · ${view.title}`, "");
+        const step = `Stap ${view.progress.current}/${view.progress.total}`;
+        lines.push(narrow
+            ? `${ink(terminal, "muted", step)} · ${strong(terminal, view.title)}`
+            : `${stepRail(terminal, view.progress.current, view.progress.total, frame)}  ${ink(terminal, "muted", step)}  ${strong(terminal, view.title)}`, "");
     }
     else {
-        lines.push(view.title, "");
+        lines.push(`${screenGlyph(terminal, view.screen, frame)} ${strong(terminal, view.title)}`, "");
+    }
+    if (density.trail && view.completed && view.completed.length > 0) {
+        const column = labelColumn(view.completed);
+        for (const [label, value] of view.completed) {
+            lines.push(`${ink(terminal, "success", "✓")} ${ink(terminal, "muted", label.padEnd(column))}  ${value}`);
+        }
+        lines.push("");
     }
     if (view.activeLabel) {
+        lines.push(ink(terminal, "accent", view.activeLabel, true));
         if (view.choices) {
-            lines.push(paint(terminal.color, "1;36", view.activeLabel));
-            for (const choice of view.choices) {
-                const selected = choice.value === view.selectedChoice;
-                lines.push(paint(terminal.color && selected, "1;96", `${selected ? ">" : " "} [${selected ? "x" : " "}] ${choice.label}`));
-                if (!narrow && choice.hint)
-                    lines.push(`      ${choice.hint}`);
-            }
+            lines.push(...choiceLines(terminal, view.choices, view.selectedChoice, density.hints));
         }
         else {
-            lines.push(paint(terminal.color, "1;36", view.activeLabel), `${paint(terminal.color, "36", "│")} ${paint(terminal.color, view.valueIsDefault ? "2" : "1", view.value || "_")}${paint(terminal.color, "96", "▌")}${view.valueIsDefault
-                ? ` ${paint(terminal.color, "2", "(standaard)")}`
-                : ""}`);
+            lines.push(`${ink(terminal, "accent", "│")} ${ink(terminal, view.valueIsDefault ? "muted" : "glow", view.value || "_", !view.valueIsDefault)}${ink(terminal, "glow", caretGlyph(frame))}${view.valueIsDefault ? ` ${ink(terminal, "muted", "(standaard)")}` : ""}`);
+            if (view.valuePreview) {
+                lines.push(`${ink(terminal, "muted", "└")} ${ink(terminal, "muted", view.valuePreview)}`);
+            }
         }
-        if (view.selectedDetails) {
+        if (density.details && view.selectedDetails) {
             lines.push("", ...renderChoiceDetails(view.selectedDetails, terminal));
         }
-        if (view.validation)
-            lines.push("", `! ${view.validation}`);
+        if (view.validation) {
+            lines.push("", ink(terminal, "warn", `⚠ ${view.validation}`));
+        }
     }
     if (view.review) {
-        for (const [label, value] of view.review)
-            lines.push(`${label}: ${value}`);
+        const column = labelColumn(view.review);
+        if (view.screen === "confirm") {
+            for (const [label, value] of view.review) {
+                lines.push(`  ${ink(terminal, "muted", label.padEnd(column))}  ${ink(terminal, "muted", value)}`);
+            }
+            lines.push("");
+        }
+        else {
+            const rows = view.review.map(([label, value]) => ({
+                text: `${label.padEnd(column)}  ${value}`,
+                rendered: `${ink(terminal, "muted", label.padEnd(column))}  ${strong(terminal, value)}`,
+            }));
+            const width = Math.max(24, Math.min(Math.max(20, terminal.columns - 4), rows.reduce((widest, row) => Math.max(widest, row.text.length), 0)));
+            lines.push(...cardLines(terminal, "Overzicht", rows, width));
+        }
     }
     if (view.choices && !view.activeLabel) {
-        for (const choice of view.choices) {
-            const selected = choice.value === view.selectedChoice;
-            lines.push(`${selected ? ">" : " "} [${selected ? "x" : " "}] ${choice.label}`);
+        lines.push(...choiceLines(terminal, view.choices, view.selectedChoice, false));
+    }
+    if (view.screen === "executing") {
+        lines.push(progressBar(terminal, frame, narrow ? 12 : 24), "", ink(terminal, "muted", "Bestanden schrijven, sleutels koppelen en configuratie opslaan…"));
+    }
+    if (view.createdPath) {
+        lines.push(`${ink(terminal, "muted", "Gemaakt in:")} ${view.createdPath}`);
+    }
+    if (view.nextCommand) {
+        lines.push("", ink(terminal, "muted", "Volgende opdracht:"), `  ${ink(terminal, "glow", view.nextCommand, true)}`);
+    }
+    if (view.screen === "success") {
+        lines.push("", `${ink(terminal, "success", SPARKLES[frame % SPARKLES.length])} ${ink(terminal, "muted", "Documentatie: https://docs.remotedraw.com")}`);
+    }
+    if (view.error) {
+        for (const line of view.error.split("\n")) {
+            lines.push(ink(terminal, "danger", line));
         }
     }
-    if (view.createdPath)
-        lines.push(`Gemaakt in: ${view.createdPath}`);
-    if (view.nextCommand)
-        lines.push("", "Volgende opdracht:", `  ${view.nextCommand}`);
-    if (view.error)
-        lines.push(view.error);
-    if (view.controls.length)
-        lines.push("", view.controls.join(" · "));
-    return `${lines.join("\n")}\n`;
+    if (view.controls.length) {
+        lines.push("", ink(terminal, "muted", "─".repeat(rule)), ...controlLines(terminal, view.controls, Math.max(rule, terminal.columns - 1)));
+    }
+    return lines;
 }
 export function createWizardTerminal(input, output, env) {
     const wasRaw = input.isRaw === true;
     const wasFlowing = input.readableFlowing === true;
+    const buffered = [];
+    let waiting;
+    const onKeypress = (_text, key) => {
+        if (waiting) {
+            const resolve = waiting;
+            waiting = undefined;
+            resolve(key);
+            return;
+        }
+        buffered.push(key);
+    };
     return {
-        columns: output.columns || 80,
+        get columns() {
+            return output.columns || 80;
+        },
+        get rows() {
+            return output.rows || 24;
+        },
         color: env.NO_COLOR == null && output.hasColors?.() !== false,
+        trueColor: env.NO_COLOR == null &&
+            (env.COLORTERM === "truecolor" ||
+                env.COLORTERM === "24bit" ||
+                output.hasColors?.(16_777_216) === true),
         hyperlinks: env.TERM !== "dumb" && env.NO_HYPERLINKS == null,
         write(value) {
             output.write(value);
@@ -449,16 +892,50 @@ export function createWizardTerminal(input, output, env) {
         enter() {
             emitKeypressEvents(input);
             input.setRawMode?.(true);
+            input.on("keypress", onKeypress);
             input.resume();
             output.write("\x1b[?25l");
         },
+        hasPendingKey() {
+            return buffered.length > 0;
+        },
         async readKey() {
+            const next = buffered.shift();
+            if (next)
+                return next;
+            return await new Promise((resolve) => {
+                waiting = resolve;
+            });
+        },
+        async readKeyWithin(milliseconds) {
+            const next = buffered.shift();
+            if (next)
+                return next;
             return await new Promise((resolve) => {
-                input.once("keypress", (_text, key) => resolve(key));
+                let settled = false;
+                const timer = setTimeout(() => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    if (waiting === listener)
+                        waiting = undefined;
+                    resolve(undefined);
+                }, milliseconds);
+                timer.unref?.();
+                const listener = (key) => {
+                    if (settled)
+                        return;
+                    settled = true;
+                    clearTimeout(timer);
+                    resolve(key);
+                };
+                waiting = listener;
             });
         },
         openUrl: openExternalUrl,
         restore() {
+            input.off("keypress", onKeypress);
+            waiting = undefined;
             if (!wasRaw)
                 input.setRawMode?.(false);
             if (!wasFlowing)