@effected/cli 0.10.0 → 0.11.0

package/ui/CliUiLive.js

@@ -0,0 +1,399 @@
+import { CliInteractive } from "../CliInteractive.js";
+import { underGithubActions } from "../internal/autoFormat.js";
+import { CliTheme, themeForAudience } from "../CliTheme.js";
+import { fromReact, inkModules, loadInk, withInkColour } from "./internal/ink.js";
+import { errorBoundary } from "./internal/ErrorBoundary.js";
+import { holder, holderSlot } from "./internal/Holder.js";
+import { UiStreams } from "./UiStreams.js";
+import { makeInkConsole } from "./internal/inkConsole.js";
+import { mountPermit } from "./internal/mountPermit.js";
+import { drainPerformance, resolveDrain } from "./internal/perfDrain.js";
+import { UiRenderOptions } from "./internal/renderOptions.js";
+import { uiProviders } from "./internal/UiProviders.js";
+import { useTerminalSize } from "./UiTheme.js";
+import { Cause, Clock, Duration, Effect, Exit, Fiber, Option, PubSub, Pull, Queue, Schedule, Scheduler, Scope, Stream } from "effect";
+import { Audience } from "@effected/env";
+import { CommandNeutralizer } from "@effected/github-commands";
+
+//#region src/ui/CliUiLive.ts
+/**
+* The live tree's height clamp: at most the terminal's rows less one, re-read on every render and when the terminal
+* resizes, so a tall frame never takes Ink's clear-terminal path, which wipes the scrollback. No width: Ink sizes the root itself.
+*/
+const heightClamp = fromReact(() => {
+	const HeightClamp = (props) => {
+		const { ink, react } = inkModules();
+		const { rows } = useTerminalSize();
+		return react.createElement(ink.Box, {
+			flexDirection: "column",
+			maxHeight: rows,
+			overflow: "hidden"
+		}, react.createElement(ink.Box, {
+			flexDirection: "column",
+			flexShrink: 0
+		}, props.children));
+	};
+	HeightClamp.displayName = "CliUiLiveHeightClamp";
+	return HeightClamp;
+});
+const TICK_INVALID = (tickMillis) => `@effected/cli/ui: CliUi.live's tickMillis must be a positive, finite number of milliseconds, not ${tickMillis}`;
+const DEGRADED = (error) => `@effected/cli/ui: the live view stopped drawing this run: ${error instanceof Error ? error.message : String(error)}`;
+/**
+* `CliUi.live`, kept in its own module: see `CliUi.live` for the contract.
+*
+* @internal
+*/
+const live = (options) => Effect.gen(function* () {
+	const tickMillis = options.tickMillis ?? 80;
+	const begins = options.begins ?? ((event) => options.isStart(event));
+	if (!(Number.isFinite(tickMillis) && tickMillis > 0)) return yield* Effect.die(new Error(TICK_INVALID(tickMillis)));
+	const audience = yield* Effect.serviceOption(Audience);
+	const theme = themeForAudience((yield* CliTheme).forStream("stdout"), Option.isSome(audience) ? audience.value.kind : void 0);
+	const colour = theme.color;
+	const neutralize = yield* underGithubActions;
+	const provided = {
+		theme,
+		glyphs: theme.glyphs,
+		...neutralize ? { neutralizeWorkflowCommands: true } : {}
+	};
+	const interactive = yield* CliInteractive;
+	const streams = yield* UiStreams;
+	const overrides = yield* UiRenderOptions;
+	const drain = yield* resolveDrain(options.drainPerformance ?? "auto");
+	const bridge = yield* makeInkConsole;
+	const inbox = yield* Queue.unbounded();
+	const source = options.events;
+	const stream = Stream.isStream(source) ? source : void 0;
+	const subscription = stream === void 0 ? source : void 0;
+	let state = options.initial;
+	let run;
+	let finalTaken = false;
+	const Frame = (props) => options.render(props.state, props.frame);
+	const frameOf = Effect.map(Clock.currentTimeMillis, (now) => Math.floor(now / tickMillis));
+	const elementOf = (shown, frame) => inkModules().react.createElement(Frame, {
+		state: shown,
+		frame
+	});
+	/**
+	* Unmount what a run has mounted: Ink's own unmount commits the last frame. Nothing is written after it. The clear
+	* and the close are one uninterruptible step: an interrupt landing between them would leave a scope nobody closes,
+	* its permit held, its instance mounted and its tick running.
+	*/
+	const unmount = (current) => Effect.uninterruptible(Effect.suspend(() => {
+		const mounted = current.mounted;
+		current.mounted = void 0;
+		return mounted === void 0 ? Effect.void : Scope.close(mounted.scope, Exit.void);
+	}));
+	/** Take the run off and unmount it, in one step an interrupt cannot split; the run taken, if any. */
+	const takeRun = Effect.uninterruptible(Effect.suspend(() => {
+		const current = run;
+		run = void 0;
+		return current === void 0 ? Effect.succeed(void 0) : Effect.as(unmount(current), current);
+	}));
+	/** Stop drawing a run: unmount first, so the one warning never lands inside a frame, then warn. */
+	const degrade = (current, error) => Effect.suspend(() => {
+		if (current.degraded) return unmount(current);
+		current.degraded = true;
+		return Effect.andThen(unmount(current), Effect.logWarning(DEGRADED(error)));
+	});
+	/** Act on a failure the boundary reported for the run mounted now, if any. */
+	const checkFailure = Effect.suspend(() => {
+		const current = run;
+		const failed = current?.failed;
+		return current === void 0 || failed === void 0 ? Effect.void : degrade(current, failed.error);
+	});
+	/** The final frame as a string, at the stdout width (80 when it reports none) and with no height to fit. */
+	const printFrame = (current) => Effect.gen(function* () {
+		const { ink, react } = yield* loadInk;
+		const frame = yield* frameOf;
+		const reported = streams.stdout.columns;
+		const columns = reported !== void 0 && reported > 0 ? reported : 80;
+		let failure;
+		const tree = react.createElement(errorBoundary(), {
+			onError: (error) => {
+				failure ??= { error };
+			},
+			children: uiProviders({
+				...provided,
+				size: {
+					columns,
+					rows: Number.POSITIVE_INFINITY
+				}
+			}, elementOf(state, frame))
+		});
+		const text = yield* Effect.scoped(Effect.andThen(withInkColour(colour), Effect.sync(() => ink.renderToString(tree, { columns }))));
+		drainPerformance(drain);
+		if (failure !== void 0) {
+			if (!current.degraded) {
+				current.degraded = true;
+				yield* Effect.logWarning(DEGRADED(failure.error));
+			}
+			return;
+		}
+		bridge.print(neutralize ? CommandNeutralizer.text(text) : text);
+	});
+	/** Mount a run's view with the current state, its tick beside it; a failure degrades the run. */
+	const mount = (current) => Effect.gen(function* () {
+		const scope = yield* Scope.make("sequential");
+		const slot = holderSlot();
+		current.mounted = {
+			scope,
+			slot
+		};
+		const report = (error) => {
+			current.failed ??= { error };
+			Queue.offerUnsafe(inbox, {
+				_tag: "Failed",
+				run: current
+			});
+		};
+		yield* Effect.gen(function* () {
+			yield* Effect.acquireRelease(mountPermit.take(1), () => mountPermit.release(1), { interruptible: true });
+			yield* Effect.acquireRelease(Effect.sync(() => overrides.onMount?.()), () => Effect.sync(() => overrides.onUnmount?.(void 0)));
+			const { ink, react } = yield* loadInk;
+			yield* withInkColour(colour);
+			const frame = yield* frameOf;
+			const initial = elementOf(state, frame);
+			const shown = state;
+			const lastGood = () => {
+				const good = current.good;
+				return good === void 0 ? null : react.createElement(errorBoundary(), {
+					onError: () => {
+						current.painted = false;
+					},
+					children: elementOf(good.state, good.frame)
+				});
+			};
+			const tree = react.createElement(errorBoundary(), {
+				onError: report,
+				children: uiProviders(provided, react.createElement(bridge.Bridge, null, react.createElement(heightClamp(), null, react.createElement(errorBoundary(), {
+					onError: report,
+					fallback: lastGood,
+					children: react.createElement(holder(), {
+						initial,
+						bind: slot.bind
+					})
+				}))))
+			});
+			yield* Effect.acquireRelease(Effect.sync(() => {
+				const instance = ink.render(tree, {
+					stdin: streams.stdin,
+					stdout: streams.stdout,
+					stderr: streams.stderr,
+					interactive: true,
+					exitOnCtrlC: false,
+					patchConsole: false,
+					...overrides.debug === true ? { debug: true } : {},
+					...overrides.onRender === void 0 ? {} : { onRender: overrides.onRender }
+				});
+				drainPerformance(drain);
+				return instance;
+			}), (instance) => Effect.promise(async () => {
+				bridge.detach();
+				const exited = instance.waitUntilExit();
+				instance.unmount();
+				drainPerformance(drain);
+				await exited.catch(() => void 0);
+			}));
+			yield* Effect.forkIn(Effect.repeat(Effect.flatMap(frameOf, (at) => Queue.offer(inbox, {
+				_tag: "Tick",
+				frame: at
+			})), Schedule.spaced(Duration.millis(tickMillis))), scope);
+			current.frame = frame;
+			if (current.failed === void 0) {
+				current.painted = true;
+				current.good = {
+					state: shown,
+					frame
+				};
+			}
+		}).pipe(Scope.provide(scope), Effect.onExit((exit) => Exit.isSuccess(exit) ? Effect.void : Effect.andThen(Effect.sync(() => {
+			if (current.mounted?.scope === scope) current.mounted = void 0;
+		}), Scope.close(scope, exit))));
+		yield* checkFailure;
+	}).pipe(Effect.catchCause((cause) => Cause.hasInterruptsOnly(cause) ? Effect.failCause(cause) : degrade(current, Cause.squash(cause))));
+	/**
+	* Push the current state to the mounted run, at `at` or the clock's frame, and wait for React to commit it; a
+	* frame that throws degrades the run.
+	*/
+	const drawAt = (at) => Effect.suspend(() => {
+		const current = run;
+		const mounted = current?.mounted;
+		if (current === void 0 || mounted === void 0) return Effect.void;
+		const shown = state;
+		return Effect.gen(function* () {
+			const frame = at ?? (yield* frameOf);
+			yield* Effect.callback((resume) => {
+				mounted.slot.swap(elementOf(shown, frame), () => queueMicrotask(() => resume(Effect.void)));
+			});
+			drainPerformance(drain);
+			current.frame = frame;
+			if (current.failed === void 0) {
+				current.painted = true;
+				current.good = {
+					state: shown,
+					frame
+				};
+			}
+			yield* checkFailure;
+		});
+	});
+	const draw = drawAt(void 0);
+	/** End the run: unmount, which commits its frame; a degraded run that never painted prints its frame instead. */
+	const endRun = Effect.flatMap(takeRun, (current) => {
+		if (current === void 0) return Effect.void;
+		if (!interactive) return options.mode === "hosted" ? Effect.void : printFrame(current);
+		return Effect.suspend(() => {
+			const failed = current.failed;
+			const warned = failed === void 0 || current.degraded ? Effect.void : Effect.suspend(() => {
+				current.degraded = true;
+				return Effect.logWarning(DEGRADED(failed.error));
+			});
+			return Effect.andThen(warned, Effect.suspend(() => current.painted ? Effect.void : printFrame(current)));
+		});
+	});
+	const beginRun = Effect.suspend(() => {
+		const current = {
+			mounted: void 0,
+			degraded: false,
+			painted: false,
+			failed: void 0,
+			frame: 0,
+			good: void 0
+		};
+		run = current;
+		return interactive ? mount(current) : Effect.void;
+	});
+	/** Fold a chunk, starting and ending runs at its events, and draw once for what is left of it. */
+	const onChunk = (chunk) => Effect.gen(function* () {
+		let dirty = false;
+		for (const event of chunk) {
+			const folded = yield* Effect.try({
+				try: () => options.reduce(state, event),
+				catch: (error) => error
+			}).pipe(Effect.catch((error) => Effect.andThen(Effect.suspend(() => run === void 0 ? Effect.void : unmount(run)), Effect.die(error))));
+			const before = state;
+			if (run?.degraded === true && options.isStart(event)) {
+				yield* endRun;
+				state = folded;
+				yield* beginRun;
+				dirty = false;
+				continue;
+			}
+			state = folded;
+			if (options.isTerminal(event)) {
+				if (dirty || run !== void 0) yield* draw;
+				dirty = false;
+				yield* endRun;
+			} else if (run === void 0) {
+				if (begins(event, before, folded)) yield* beginRun;
+				dirty = false;
+			} else dirty = true;
+		}
+		if (dirty) yield* draw;
+	});
+	const onTick = (frame) => Effect.suspend(() => {
+		const current = run;
+		return current?.mounted === void 0 || frame <= current.frame ? Effect.void : drawAt(frame);
+	});
+	/**
+	* What a subscription holds now, taken without waiting: its buffered messages, then, once its PubSub has been
+	* ended with `PubSub.end`, the final message, the first time only. A shut-down subscription holds nothing (and a
+	* take from it would interrupt): it is not asked.
+	*/
+	const takeQueued = (sub) => Effect.suspend(() => {
+		const queued = PubSub.remainingUnsafe(sub);
+		if (Option.isNone(queued)) return Effect.succeed([]);
+		const ended = sub.ended.current;
+		const final = Option.isSome(ended) && !finalTaken ? [ended.value] : [];
+		if (final.length > 0) finalTaken = true;
+		return queued.value > 0 ? Effect.map(PubSub.takeUpTo(sub, queued.value), (taken) => [...taken, ...final]) : Effect.succeed(final);
+	});
+	/**
+	* What a subscription still queues, taken without waiting; nothing for a stream. Read once the pump has stopped
+	* (an `Ended` comes after it), so nothing else is taking. A subscription whose PubSub was shut down has nothing
+	* left, and a take from it would interrupt: it is not asked.
+	*/
+	const queuedTail = subscription === void 0 ? Effect.succeed([]) : takeQueued(subscription);
+	const control = Effect.gen(function* () {
+		while (true) {
+			const messages = yield* Queue.takeAll(inbox);
+			let pending = [];
+			const flush = Effect.suspend(() => {
+				const chunk = pending;
+				pending = [];
+				return chunk.length === 0 ? Effect.void : onChunk(chunk);
+			});
+			for (const message of messages) {
+				if (message._tag === "Events") {
+					pending.push(...message.chunk);
+					continue;
+				}
+				yield* flush;
+				switch (message._tag) {
+					case "Tick":
+						yield* onTick(message.frame);
+						break;
+					case "Failed":
+						if (message.run === run) yield* checkFailure;
+						break;
+					case "Ended": {
+						const tail = yield* queuedTail;
+						if (tail.length > 0) yield* onChunk(tail);
+						return yield* endRun;
+					}
+					case "Died":
+						yield* takeRun;
+						return yield* Effect.failCause(message.cause);
+				}
+			}
+			yield* flush;
+		}
+	});
+	const streamPull = stream === void 0 ? void 0 : yield* Stream.toPull(stream);
+	const offerEvents = (chunk) => chunk.length === 0 ? Effect.void : Queue.offer(inbox, {
+		_tag: "Events",
+		chunk
+	});
+	/**
+	* One take from a subscription, taken directly (no stream machinery), true once its events have ended: its
+	* PubSub was shut down, or ended with `PubSub.end` and its final message taken. Only the wait for a message can
+	* be interrupted, and nothing from the wait's end to the hand-off to the inbox yields to the scheduler, so an
+	* interrupt (`close`) never lands while a taken message is held: it is in the subscription or in the inbox. Each
+	* step waits or ends, so holding off the scheduler never spins.
+	*/
+	const subscriptionStep = (sub) => Effect.uninterruptibleMask((restore) => Effect.suspend(() => {
+		if (Option.isNone(PubSub.remainingUnsafe(sub))) return Effect.succeed(true);
+		if (Option.isSome(sub.ended.current)) return Effect.as(Effect.flatMap(takeQueued(sub), offerEvents), true);
+		return restore(PubSub.takeAll(sub)).pipe(Effect.catchCause((cause) => Option.isNone(PubSub.remainingUnsafe(sub)) ? Effect.succeed(void 0) : Effect.failCause(cause)), Effect.flatMap((chunk) => {
+			if (chunk === void 0) return Effect.succeed(true);
+			const ended = sub.ended.current;
+			const final = Option.isSome(ended) && chunk.length === 1 && chunk[0] === ended.value && Option.getOrElse(PubSub.remainingUnsafe(sub), () => 0) === 0;
+			if (final) finalTaken = true;
+			return Effect.as(offerEvents(chunk), final);
+		}));
+	})).pipe(Effect.provideService(Scheduler.PreventSchedulerYield, true));
+	const pump = streamPull !== void 0 ? Effect.forever(Effect.uninterruptibleMask((restore) => Effect.flatMap(restore(streamPull), offerEvents))).pipe(Pull.catchDone(() => Queue.offer(inbox, { _tag: "Ended" })), Effect.catchCause((cause) => Cause.hasInterruptsOnly(cause) ? Effect.failCause(cause) : Queue.offer(inbox, {
+		_tag: "Died",
+		cause
+	}))) : Effect.gen(function* () {
+		let ended = false;
+		while (!ended) ended = yield* subscriptionStep(source);
+		yield* Queue.offer(inbox, { _tag: "Ended" });
+	});
+	const pumping = yield* Effect.forkScoped(pump, { startImmediately: true });
+	const controlling = yield* Effect.forkScoped(Effect.onExit(control, () => Fiber.interrupt(pumping)));
+	yield* Effect.addFinalizer(() => Effect.andThen(Fiber.interruptAll([controlling, pumping]), takeRun));
+	const done = Fiber.join(controlling);
+	const settled = Effect.flatMap(Fiber.await(controlling), (exit) => Exit.isSuccess(exit) || Cause.hasInterruptsOnly(exit.cause) ? Effect.void : Effect.failCause(exit.cause));
+	const ending = yield* Effect.cached(Effect.uninterruptible(Effect.andThen(Fiber.interrupt(pumping), Queue.offer(inbox, { _tag: "Ended" }))));
+	return {
+		state: Effect.sync(() => state),
+		logConsole: bridge.writer,
+		done,
+		close: Effect.andThen(ending, settled)
+	};
+});
+
+//#endregion
+export { live };

package/ui/Confirm.js

@@ -0,0 +1,245 @@
+import { Fmt } from "../Fmt.js";
+import { inkModules } from "./internal/ink.js";
+import { useScreenCancel } from "./internal/ScreenContext.js";
+import { Styled, useGlyphs, useTerminalSize } from "./UiTheme.js";
+import { KeyTable, useKeys } from "./KeyTable.js";
+import { lineText } from "./internal/lineText.js";
+import { KeyHelp } from "./KeyHelp.js";
+import { Toggle } from "./Toggle.js";
+import { Viewport } from "./Viewport.js";
+
+//#region src/ui/Confirm.ts
+const assertUniqueKeys = (toggles) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const toggle of toggles) {
+		if (seen.has(toggle.key)) throw new Error(`@effected/cli/ui: Confirm toggle keys must be unique; "${toggle.key}" repeats`);
+		seen.add(toggle.key);
+	}
+};
+const init = (options = {}) => {
+	const toggles = options.toggles ?? [];
+	assertUniqueKeys(toggles);
+	return {
+		confirmed: options.initial ?? false,
+		row: 0,
+		toggles,
+		submitted: false
+	};
+};
+const step = (state, action) => {
+	switch (action) {
+		case "up": return {
+			...state,
+			row: Math.max(0, state.row - 1)
+		};
+		case "down": return {
+			...state,
+			row: Math.min(state.toggles.length, state.row + 1)
+		};
+		case "toggle": return state.row === 0 ? state : {
+			...state,
+			toggles: state.toggles.map((toggle, index) => index === state.row - 1 ? {
+				...toggle,
+				value: !toggle.value
+			} : toggle)
+		};
+		case "yes": return {
+			...state,
+			confirmed: true
+		};
+		case "no": return {
+			...state,
+			confirmed: false
+		};
+		case "flip": return {
+			...state,
+			confirmed: !state.confirmed
+		};
+		case "submit": return {
+			...state,
+			submitted: true
+		};
+		case "cancel": return state;
+	}
+};
+const result = (state) => ({
+	confirmed: state.confirmed,
+	toggles: Object.fromEntries(state.toggles.map((toggle) => [toggle.key, toggle.value]))
+});
+/** The bindings; with no toggles the row and toggle keys stay bound (they do nothing) but leave the help line. */
+const bindings = (toggles) => KeyTable.make([
+	{
+		keys: [{ char: "y" }],
+		action: "yes",
+		help: "yes"
+	},
+	{
+		keys: [{ char: "n" }],
+		action: "no",
+		help: "no"
+	},
+	{
+		keys: ["left"],
+		action: "flip",
+		help: "flip"
+	},
+	{
+		keys: ["right"],
+		action: "flip",
+		help: "flip"
+	},
+	{
+		keys: ["up"],
+		action: "up",
+		help: "row",
+		hidden: !toggles
+	},
+	{
+		keys: ["down"],
+		action: "down",
+		help: "row",
+		hidden: !toggles
+	},
+	{
+		keys: ["space"],
+		action: "toggle",
+		help: "toggle",
+		hidden: !toggles
+	},
+	{
+		keys: ["enter"],
+		action: "submit",
+		help: "submit"
+	},
+	{
+		keys: [{ char: "q" }],
+		action: "cancel",
+		help: "cancel"
+	}
+]);
+const KEYS = bindings(true);
+const ANSWER_KEYS = bindings(false);
+/** The lines around the toggle rows: the question, the answer row and the help line. */
+const RESERVED = 3;
+/**
+* A yes/no question, optionally with extra on/off rows beneath it: a pure reducer, its key table, a view and a
+* ready-made screen.
+*
+* @remarks
+* The rows are the yes/no row first, then each toggle. `y` and `n` set the answer and `←`/`→` flip it, from any
+* row; `↑`/`↓` move between rows; space flips the highlighted toggle and does nothing on the yes/no row; enter
+* submits; `q` cancels with `"escape"`. Toggle keys must be unique; `init` throws, and `screen` dies, on a repeat.
+* With no toggles, the help line leaves out the row and toggle keys. Toggles that do not fit the terminal scroll
+* in a window under the answer row, so the question, the answer and the help line stay on screen.
+* The answer starts as no unless `initial` says otherwise, and `←`/`→` flip it whichever row is highlighted.
+*
+* A toggle passed conditionally is absent from the result when it was left out, so read it back with a fallback:
+*
+* ```ts
+* import { CliUi, Confirm } from "@effected/cli/ui"
+* import { Effect } from "effect"
+*
+* const publish = (drafts: number) =>
+*   Effect.gen(function* () {
+*     const { confirmed, toggles } = yield* CliUi.run(
+*       Confirm.screen({
+*         message: "Publish the release?",
+*         toggles: drafts > 0 ? [{ key: "promote", label: `promote ${drafts} drafts to stable`, value: true }] : [],
+*       }),
+*     )
+*     const promote = toggles.promote ?? false
+*     return { confirmed, promote }
+*   })
+* ```
+*
+* @public
+*/
+var Confirm = class Confirm {
+	constructor() {}
+	/**
+	* A confirm with its answer (no by default) and toggles, on the yes/no row.
+	*
+	* @param options - the starting answer and the toggles
+	*/
+	static init = init;
+	/**
+	* Apply an action (see the class remarks for what each key does).
+	*
+	* @param state - where the confirm is
+	* @param action - the action
+	*/
+	static step = step;
+	/**
+	* The answer and every toggle's value by key.
+	*
+	* @param state - where the confirm is
+	*/
+	static result = result;
+	/** The keys: y yes, n no, ←/→ flip, ↑/↓ row, space toggle, enter submit, q cancel (the view hides row and toggle from its help when there are no toggles). */
+	static keys = KEYS;
+	/**
+	* Draw the confirm: the question, the answer row (`[Yes]  No` or ` Yes  [No]`, the chosen answer in brackets so it
+	* shows without colour, and in the accent token), a {@link Toggle} row per toggle, and the key help.
+	*
+	* @remarks
+	* Single-shot, like `Select.View`: the options are read once at mount.
+	*
+	* @param props - the question, the starting answer, the toggles and where the result goes
+	*/
+	static View = (props) => {
+		const { ink, react } = inkModules();
+		const glyphs = useGlyphs();
+		const { columns } = useTerminalSize();
+		const cancel = useScreenCancel();
+		const [state, setState] = react.useState(() => init({
+			...props.initial === void 0 ? {} : { initial: props.initial },
+			...props.toggles === void 0 ? {} : { toggles: props.toggles }
+		}));
+		const { onSubmit } = props;
+		react.useEffect(() => {
+			if (state.submitted) onSubmit(result(state));
+		}, [state.submitted]);
+		const keys = state.toggles.length === 0 ? ANSWER_KEYS : KEYS;
+		useKeys(keys, (action) => {
+			if (action === "cancel") cancel("escape");
+			else setState((current) => step(current, action));
+		});
+		const toggleRows = state.toggles.map((toggle) => ({
+			_tag: "Item",
+			key: toggle.key
+		}));
+		const numberOf = new Map(state.toggles.map((toggle, index) => [toggle.key, index]));
+		const ellipsis = { ellipsis: glyphs.ellipsis };
+		const lead = state.row === 0 ? glyphs.arrow : " ".repeat(Fmt.width(glyphs.arrow));
+		const answer = (label, chosen) => chosen ? react.createElement(Styled, { token: "accent" }, `[${label}]`) : react.createElement(ink.Text, null, ` ${label} `);
+		return react.createElement(ink.Box, { flexDirection: "column" }, react.createElement(Styled, { token: "emphasis" }, Fmt.truncate(lineText(props.message), columns, ellipsis)), react.createElement(ink.Text, null, `${lead} `, answer("Yes", state.confirmed), " ", answer("No", !state.confirmed)), state.toggles.length === 0 ? null : react.createElement(Viewport.View, {
+			rows: toggleRows,
+			state: Viewport.init(state.toggles.length, state.toggles.length, Math.max(0, state.row - 1)),
+			reserved: RESERVED,
+			renderRow: (row) => {
+				const index = row._tag === "Item" ? numberOf.get(row.key) ?? 0 : 0;
+				const toggle = state.toggles[index];
+				return react.createElement(Toggle.View, {
+					label: toggle?.label ?? "",
+					value: toggle?.value ?? false,
+					highlighted: state.row === index + 1
+				});
+			}
+		}), react.createElement(KeyHelp, { tables: [keys] }));
+	};
+	/**
+	* A ready-made screen for `CliUi.run`: the confirm, resolving with the answer and the toggles.
+	*
+	* @param options - the question, the starting answer and the toggles
+	*/
+	static screen = (options) => (control) => {
+		assertUniqueKeys(options.toggles ?? []);
+		return inkModules().react.createElement(Confirm.View, {
+			...options,
+			onSubmit: control.resolve
+		});
+	};
+};
+
+//#endregion
+export { Confirm };