@mittwald/cli 1.0.0-alpha.10

package/dist/esm/rendering/react/context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+export const renderContext = createContext({
+    renderAsJson: true,
+    apiClient: null,
+});
+export const RenderContextProvider = renderContext.Provider;
+export const useRenderContext = () => useContext(renderContext);

package/dist/esm/rendering/react/hooks/useMyUserProfile.d.ts

@@ -0,0 +1,2 @@
+import { MittwaldAPIV2 } from "@mittwald/api-client";
+export declare const useMyUserProfile: () => MittwaldAPIV2.Components.Schemas.SignupProfile;

package/dist/esm/rendering/react/hooks/useMyUserProfile.js

@@ -0,0 +1,17 @@
+import { useRenderContext } from "../context.js";
+import { usePromise } from "@mittwald/react-use-promise";
+import { assertStatus } from "@mittwald/api-client-commons";
+export const useMyUserProfile = () => {
+    const { apiClient } = useRenderContext();
+    const myUserId = usePromise(apiClient.user.getUser, [
+        {
+            pathParameters: {
+                userId: "self",
+            },
+        },
+    ], {
+        loaderId: "getOwnProfile",
+    });
+    assertStatus(myUserId, 200);
+    return myUserId.data;
+};

package/dist/esm/rendering/react/json/JsonCollectionProvider.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const JsonCollectionProvider: FC<PropsWithChildren>;

package/dist/esm/rendering/react/json/JsonCollectionProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { collectedJsonDataContext } from "./context.js";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+import { JsonRenderer } from "./JsonRenderer.js";
+const ContextProvider = collectedJsonDataContext.Provider;
+export const JsonCollectionProvider = (props) => {
+    const contextValue = useRef(new ObservableValue(undefined)).current;
+    return (_jsx(ContextProvider, { value: contextValue, children: _jsx(JsonRenderer, { children: props.children }) }));
+};

package/dist/esm/rendering/react/json/JsonRenderer.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const JsonRenderer: FC<PropsWithChildren>;

package/dist/esm/rendering/react/json/JsonRenderer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { useCollectedJsonData } from "./context.js";
+import { useWatchObservableValue } from "../lib/observable-value/useWatchObservableValue.js";
+import { JSONView } from "../components/JSONView.js";
+import { unpackJsonData } from "./lib/unpackJsonData.js";
+export const JsonRenderer = (props) => {
+    const { children } = props;
+    const jsonValue = useCollectedJsonData();
+    const json = useWatchObservableValue(jsonValue);
+    const display = json ? "none" : "flex";
+    const unpackedData = unpackJsonData(json);
+    return (_jsxs(Box, { children: [_jsx(Box, { display: display, children: children }), _jsx(JSONView, { json: unpackedData })] }));
+};

package/dist/esm/rendering/react/json/RenderJson.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface Props {
+    name: string;
+    data: unknown;
+}
+export declare const RenderJson: FC<Props>;
+export {};

package/dist/esm/rendering/react/json/RenderJson.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useCollectedJsonData } from "./context.js";
+export const RenderJson = (props) => {
+    const { name, data } = props;
+    const jsonData = useCollectedJsonData();
+    useEffect(() => {
+        jsonData.updateValue({
+            ...jsonData.value,
+            [name]: data,
+        });
+        return () => {
+            jsonData.updateValue({
+                ...jsonData.value,
+                [name]: undefined,
+            });
+        };
+    }, [name, data, jsonData]);
+    return null;
+};

package/dist/esm/rendering/react/json/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export type CollectedJsonData = Record<string, unknown>;
+export declare const collectedJsonDataContext: import("react").Context<ObservableValue<CollectedJsonData | undefined>>;
+export declare const useCollectedJsonData: () => ObservableValue<CollectedJsonData | undefined>;

package/dist/esm/rendering/react/json/context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export const collectedJsonDataContext = createContext(new ObservableValue(undefined));
+export const useCollectedJsonData = () => useContext(collectedJsonDataContext);

package/dist/esm/rendering/react/json/lib/unpackJsonData.d.ts

@@ -0,0 +1 @@
+export declare const unpackJsonData: (json: unknown) => unknown;

package/dist/esm/rendering/react/json/lib/unpackJsonData.js

@@ -0,0 +1,5 @@
+export const unpackJsonData = (json) => {
+    const entries = json && typeof json === "object" ? Object.entries(json) : undefined;
+    const firstEntry = entries?.[0];
+    return entries?.length === 1 && firstEntry ? firstEntry[1] : json;
+};

package/dist/esm/rendering/react/lib/observable-value/ObservableValue.d.ts

@@ -0,0 +1,10 @@
+import { Observer, UnbindObserver } from "./types.js";
+export declare class ObservableValue<T> {
+    value: T;
+    private observers;
+    constructor(value: T);
+    private notifyObservers;
+    get observerCount(): number;
+    observe(observer: Observer<T>): UnbindObserver;
+    updateValue(newValue: T): void;
+}

package/dist/esm/rendering/react/lib/observable-value/ObservableValue.js

@@ -0,0 +1,25 @@
+export class ObservableValue {
+    value;
+    // using unknown since otherwise the ObservableValue seems to be invariant on type T
+    observers = new Set();
+    constructor(value) {
+        this.value = value;
+    }
+    notifyObservers(newValue) {
+        this.observers.forEach((o) => o(newValue));
+    }
+    get observerCount() {
+        return this.observers.size;
+    }
+    observe(observer) {
+        this.observers.add(observer);
+        return () => this.observers.delete(observer);
+    }
+    updateValue(newValue) {
+        if (this.value === newValue) {
+            return;
+        }
+        this.value = newValue;
+        this.notifyObservers(newValue);
+    }
+}

package/dist/esm/rendering/react/lib/observable-value/types.d.ts

@@ -0,0 +1,2 @@
+export type Observer<T> = (newValue: T) => void;
+export type UnbindObserver = () => void;

package/dist/esm/rendering/react/lib/observable-value/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/rendering/react/lib/observable-value/useWatchObservableValue.d.ts

@@ -0,0 +1,2 @@
+import { ObservableValue } from "./ObservableValue.js";
+export declare const useWatchObservableValue: <T>(observable: ObservableValue<T>) => T;

package/dist/esm/rendering/react/lib/observable-value/useWatchObservableValue.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from "react";
+export const useWatchObservableValue = (observable) => {
+    const [watchedValue, setWatchedValue] = useState(observable.value);
+    useEffect(() => {
+        setWatchedValue(observable.value);
+        return observable.observe(setWatchedValue);
+    }, [observable]);
+    return watchedValue;
+};

package/dist/esm/rendering/react/measure/MeasureChildren.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+import { Dimension } from "./context.js";
+export type OnDimensionChangedHandler = (dimension: Dimension) => void;
+interface Props {
+    onDimensionChange?: OnDimensionChangedHandler;
+}
+export declare const MeasureChildren: FC<PropsWithChildren<Props>>;
+export {};

package/dist/esm/rendering/react/measure/MeasureChildren.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+import { useMeasureContext } from "./context.js";
+export const MeasureChildren = (props) => {
+    const { children, onDimensionChange } = props;
+    const id = useId();
+    const context = useMeasureContext();
+    useEffect(() => {
+        context.addNode(id, children);
+        return () => {
+            context.removeNode(id);
+        };
+    }, [context, children]);
+    useEffect(() => context.getDimension(id).observe(onDimensionChange ??
+        (() => {
+            // not handling
+        })), [id, context, onDimensionChange]);
+    return _jsx(_Fragment, { children: children });
+};

package/dist/esm/rendering/react/measure/MeasureContextProvider.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const MeasureContextProvider: FC<PropsWithChildren>;

package/dist/esm/rendering/react/measure/MeasureContextProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { useRef } from "react";
+import { createMeasureContext, measureContext } from "./context.js";
+import { MeasureRenderer } from "./MeasureRenderer.js";
+export const MeasureContextProvider = (props) => {
+    const { children } = props;
+    const context = useRef(createMeasureContext()).current;
+    return (_jsx(measureContext.Provider, { value: context, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { children: _jsx(MeasureRenderer, {}) }), _jsx(Box, { children: children })] }) }));
+};

package/dist/esm/rendering/react/measure/MeasureRenderer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const MeasureRenderer: FC;

package/dist/esm/rendering/react/measure/MeasureRenderer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, measureElement } from "ink";
+import { useEffect, useRef } from "react";
+import { useWatchObservableValue } from "../lib/observable-value/useWatchObservableValue.js";
+import { useMeasureContext } from "./context.js";
+const M = (props) => {
+    const { children, id } = props;
+    const measureContext = useMeasureContext();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            const dimension = measureElement(ref.current);
+            measureContext.updateDimension(id, dimension);
+        }
+    }, [id, measureContext, ref.current]);
+    return (_jsx(Box, { height: 0, overflow: "hidden", flexShrink: 1, ref: ref, children: children }));
+};
+export const MeasureRenderer = () => {
+    const context = useMeasureContext();
+    const watchedNodes = useWatchObservableValue(context.nodes);
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: Object.entries(watchedNodes).map(([id, node]) => (_jsx(M, { id: id, children: node }, id))) }));
+};

package/dist/esm/rendering/react/measure/context.d.ts

@@ -0,0 +1,18 @@
+import { measureElement } from "ink";
+import { ReactNode } from "react";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export type MeasureContextNodes = Record<string, ReactNode>;
+export type Dimension = ReturnType<typeof measureElement>;
+export type Dimensions = Record<string, ObservableValue<Dimension>>;
+interface Context {
+    nodes: ObservableValue<MeasureContextNodes>;
+    dimensions: Dimensions;
+    addNode: (id: string, node: ReactNode) => void;
+    removeNode: (id: string) => void;
+    getDimension: (id: string) => ObservableValue<Dimension>;
+    updateDimension: (id: string, dimension: Dimension) => void;
+}
+export declare const createMeasureContext: () => Context;
+export declare const measureContext: import("react").Context<Context>;
+export declare const useMeasureContext: () => Context;
+export {};

package/dist/esm/rendering/react/measure/context.js

@@ -0,0 +1,48 @@
+import { createContext, useContext } from "react";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export const createMeasureContext = () => {
+    const context = {
+        nodes: new ObservableValue({}),
+        dimensions: {},
+        addNode: (id, node) => {
+            const existing = context.nodes.value[id];
+            if (existing === node) {
+                return;
+            }
+            context.dimensions[id] = new ObservableValue({
+                height: 0,
+                width: 0,
+            });
+            context.nodes.updateValue({
+                ...context.nodes.value,
+                [id]: node,
+            });
+        },
+        removeNode: (id) => {
+            if (id in context.nodes) {
+                const updatedNodes = {
+                    ...context.nodes.value,
+                };
+                delete updatedNodes[id];
+                context.nodes.updateValue(updatedNodes);
+            }
+        },
+        getDimension: (id) => {
+            const dimension = context.dimensions[id];
+            if (!dimension) {
+                throw new Error(`Could not get dimension for ${id}`);
+            }
+            return dimension;
+        },
+        updateDimension: (id, updatedDimension) => {
+            const dimension = context.getDimension(id);
+            if (dimension.value.width !== updatedDimension.width ||
+                dimension.value.height !== updatedDimension.height) {
+                dimension.updateValue(updatedDimension);
+            }
+        },
+    };
+    return context;
+};
+export const measureContext = createContext(createMeasureContext());
+export const useMeasureContext = () => useContext(measureContext);

package/dist/esm/rendering/react/process.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement, ReactNode } from "react";
+export type ProcessStepInfo = {
+    type: "info";
+    title: ReactElement;
+};
+export type ProcessStepRunnable = {
+    type: "step";
+    title: ReactElement;
+    phase: "running" | "completed" | "failed" | "aborted";
+    error?: unknown;
+};
+export type ProcessStepConfirm = {
+    type: "confirm";
+    title: ReactElement;
+    confirmed: boolean | undefined;
+};
+export type ProcessStepInput = {
+    type: "input";
+    title: ReactElement;
+    mask?: boolean;
+    value?: string;
+};
+export type ProcessStep = ProcessStepInfo | ProcessStepRunnable | ProcessStepConfirm | ProcessStepInput;
+export declare class RunnableHandler {
+    private readonly listener;
+    private readonly processStep;
+    constructor(state: ProcessStepRunnable, l: () => void);
+    get done(): boolean;
+    abort(): void;
+    complete(): void;
+    error(err: unknown): void;
+}
+export interface ProcessRenderer {
+    start(): void;
+    addStep(title: ReactNode): RunnableHandler;
+    runStep<TRes>(title: ReactNode, fn: () => Promise<TRes>): Promise<TRes>;
+    addInfo(title: ReactElement): void;
+    addConfirmation(question: ReactElement): Promise<boolean>;
+    addInput(question: ReactElement, mask?: boolean): Promise<string>;
+    complete(summary: ReactElement): void;
+    error(err: unknown): void;
+}

package/dist/esm/rendering/react/process.js

@@ -0,0 +1,24 @@
+export class RunnableHandler {
+    listener;
+    processStep;
+    constructor(state, l) {
+        this.processStep = state;
+        this.listener = l;
+    }
+    get done() {
+        return this.processStep.phase !== "running";
+    }
+    abort() {
+        this.processStep.phase = "aborted";
+        this.listener();
+    }
+    complete() {
+        this.processStep.phase = "completed";
+        this.listener();
+    }
+    error(err) {
+        this.processStep.phase = "failed";
+        this.processStep.error = err;
+        this.listener();
+    }
+}

package/dist/esm/rendering/react/process_fancy.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactElement, ReactNode } from "react";
+import { ProcessRenderer, ProcessStep, ProcessStepInput, RunnableHandler } from "./process.js";
+export declare class FancyProcessRenderer implements ProcessRenderer {
+    private readonly title;
+    private started;
+    private currentHandler;
+    constructor(title: string);
+    start(): void;
+    addStep(title: ReactNode): RunnableHandler;
+    runStep<TRes>(title: ReactNode, fn: () => Promise<TRes>): Promise<TRes>;
+    addInfo(title: ReactElement): void;
+    addInput(question: React.ReactElement, mask?: boolean): Promise<string>;
+    addConfirmation(question: ReactElement): Promise<boolean>;
+    complete(summary: ReactElement): void;
+    error(err: unknown): void;
+    private renderStart;
+}
+export declare const ProcessState: React.FC<{
+    step: ProcessStep;
+}>;
+export declare const ProcessConfirmation: React.FC<{
+    step: ProcessStep;
+    onConfirm: (confirmed: boolean) => void;
+}>;
+export declare const ProcessInput: React.FC<{
+    step: ProcessStepInput;
+    onSubmit: (value: string) => void;
+}>;

package/dist/esm/rendering/react/process_fancy.js

@@ -0,0 +1,221 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { RunnableHandler, } from "./process.js";
+import { Header } from "./components/Header.js";
+import { Box, render, Text, useInput, useStdin } from "ink";
+import TextInput from "ink-text-input";
+import { isValidationError } from "../../lib/handleError.js";
+export class FancyProcessRenderer {
+    title;
+    started = false;
+    currentHandler = null;
+    constructor(title) {
+        this.title = title;
+    }
+    start() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        render(this.renderStart(), {}).unmount();
+    }
+    addStep(title) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.abort();
+        }
+        title = _jsx(_Fragment, { children: title });
+        const state = { type: "step", title, phase: "running" };
+        const renderHandle = render(_jsx(ProcessState, { step: state }));
+        this.currentHandler = new RunnableHandler(state, () => {
+            renderHandle.rerender(_jsx(ProcessState, { step: state }));
+            if (this.currentHandler?.done) {
+                this.currentHandler = null;
+                renderHandle.unmount();
+            }
+        });
+        return this.currentHandler;
+    }
+    async runStep(title, fn) {
+        const step = this.addStep(title);
+        try {
+            const result = await fn();
+            step.complete();
+            return result;
+        }
+        catch (err) {
+            step.error(err);
+            throw err;
+        }
+    }
+    addInfo(title) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = { type: "info", title };
+        render(_jsx(ProcessState, { step: state })).unmount();
+    }
+    addInput(question, mask) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = {
+            type: "input",
+            title: question,
+            mask,
+        };
+        return new Promise((res) => {
+            const onInput = (value) => {
+                res(value);
+                state.value = value;
+                if (renderHandle) {
+                    renderHandle.rerender(_jsx(ProcessInput, { step: state, onSubmit: onInput }));
+                    renderHandle.unmount();
+                }
+            };
+            const renderHandle = render(_jsx(ProcessInput, { step: state, onSubmit: onInput }));
+        });
+    }
+    addConfirmation(question) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = {
+            type: "confirm",
+            title: question,
+            confirmed: undefined,
+        };
+        return new Promise((res) => {
+            const onConfirm = (confirmed) => {
+                res(confirmed);
+                state.confirmed = confirmed;
+                if (renderHandle) {
+                    renderHandle.rerender(_jsx(ProcessConfirmation, { step: state, onConfirm: onConfirm }));
+                    renderHandle.unmount();
+                }
+            };
+            const renderHandle = render(_jsx(ProcessConfirmation, { step: state, onConfirm: onConfirm }));
+        });
+    }
+    complete(summary) {
+        if (this.currentHandler) {
+            this.currentHandler.complete();
+        }
+        render(_jsx(Box, { marginY: 1, marginX: 2, children: summary })).unmount();
+    }
+    error(err) {
+        if (this.currentHandler) {
+            this.currentHandler.error(err);
+        }
+        else {
+            render(_jsx(Box, { marginY: 1, marginX: 2, borderStyle: "round", borderColor: "red", children: _jsxs(Text, { color: "red", children: ["Error: ", err?.toString()] }) })).unmount();
+        }
+    }
+    renderStart() {
+        return (_jsx(Box, { marginY: 1, marginX: 2, children: _jsx(Header, { title: this.title }) }));
+    }
+}
+const ProcessStateIcon = ({ step }) => {
+    if (step.type === "info") {
+        return _jsxs(Text, { children: ["\u2139\uFE0F", "  "] });
+    }
+    else if (step.type === "confirm" || step.type === "input") {
+        return _jsx(Text, { children: "\u2753" });
+    }
+    else if (step.phase === "completed") {
+        return _jsx(Text, { children: "\u2705" });
+    }
+    else if (step.phase === "aborted") {
+        return _jsx(Text, { children: "\u23E9\uFE0F " });
+    }
+    else if (step.phase === "failed") {
+        return _jsx(Text, { children: "\u274C" });
+    }
+    else {
+        return _jsx(Text, { children: "\uD83D\uDD01 " });
+    }
+};
+const ProcessInputStateSummary = ({ step }) => {
+    if (step.value && step.mask) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ": " }), _jsx(Text, { color: "blue", children: "[secret]" })] }));
+    }
+    if (step.value) {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ": " }), _jsx(Text, { color: "green", children: step.value })] }));
+    }
+    else {
+        return _jsx(Text, { children: ": " });
+    }
+};
+const InteractiveConfirmationDisabled = () => (_jsxs(Text, { color: "red", children: [" ", "interactive input required; start this command with --force or --quiet to disable interactive prompts"] }));
+const InteractiveInputDisabled = () => (_jsx(Text, { color: "red", children: "interactive input required; inspect this command's --help page to learn how to pass the required input non-interactively." }));
+const ProcessConfirmationStateSummary = ({ step }) => {
+    const { isRawModeSupported } = useStdin();
+    if (!isRawModeSupported) {
+        return _jsx(InteractiveConfirmationDisabled, {});
+    }
+    if (step.confirmed) {
+        return _jsx(Text, { color: "green", children: " confirmed" });
+    }
+    else if (step.confirmed === false) {
+        return _jsx(Text, { color: "yellow", children: " not confirmed" });
+    }
+    else {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ": press " }), _jsx(Text, { color: "blue", children: "y" }), _jsx(Text, { children: " or " }), _jsx(Text, { color: "blue", children: "n" }), _jsxs(Text, { color: "gray", children: [" ", "(use the --force or --quiet flags to disable this prompt)"] })] }));
+    }
+};
+const ProcessStateSummary = ({ step }) => {
+    if (step.type === "info") {
+        return _jsx(_Fragment, {});
+    }
+    else if (step.type === "confirm") {
+        return _jsx(ProcessConfirmationStateSummary, { step: step });
+    }
+    else if (step.type === "input") {
+        return _jsx(ProcessInputStateSummary, { step: step });
+    }
+    else if (step.phase === "completed") {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ". " }), _jsx(Text, { color: "green", children: "done" })] }));
+    }
+    else if (step.phase === "aborted") {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ". " }), _jsx(Text, { color: "yellow", children: "cancelled" })] }));
+    }
+    else if (step.phase === "failed") {
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { children: ". " }), _jsx(Text, { color: "red", children: "error" })] }));
+    }
+    else {
+        return _jsx(Text, { children: "..." });
+    }
+};
+const ProcessValidationErrors = ({ err, color = "red" }) => {
+    const errorItems = err.validationErrors.map((e, idx) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { minWidth: e.path.length + 2, children: _jsxs(Text, { color: color, bold: true, children: [e.path, ":", " "] }) }), _jsx(Text, { color: color, children: e.message })] }, idx)));
+    return (_jsxs(Box, { marginY: 1, marginX: 5, paddingX: 1, borderColor: color, borderStyle: "round", flexDirection: "column", width: 80, children: [_jsx(Text, { color: color, children: "Your input contained invalid data:" }), _jsx(Box, { flexDirection: "column", marginY: 1, children: errorItems }), _jsx(Text, { color: color, children: "Please correct the errors and try again. Consult this command's help page (by invoking it with the --help flag) for more information." })] }));
+};
+const ProcessError = ({ err }) => {
+    if (isValidationError(err)) {
+        return _jsx(ProcessValidationErrors, { err: err.response.data });
+    }
+    return (_jsxs(Box, { marginY: 1, marginX: 5, flexDirection: "column", children: [_jsx(Text, { color: "red", children: "An error occurred during this operation:" }), _jsx(Text, { color: "red", bold: true, children: err?.toString() })] }));
+};
+export const ProcessState = ({ step }) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { marginX: 2, children: [_jsx(ProcessStateIcon, { step: step }), _jsx(Text, { children: step.title }), _jsx(ProcessStateSummary, { step: step })] }), step.type === "step" && step.error ? (_jsx(ProcessError, { err: step.error })) : null] }));
+};
+export const ProcessConfirmation = ({ step, onConfirm }) => {
+    const { isRawModeSupported } = useStdin();
+    if (isRawModeSupported) {
+        useInput((input) => {
+            onConfirm(input === "y");
+        });
+    }
+    return _jsx(ProcessState, { step: step });
+};
+export const ProcessInput = ({ step, onSubmit }) => {
+    const [value, setValue] = useState("");
+    if (!step.value) {
+        const { isRawModeSupported } = useStdin();
+        return (_jsx(_Fragment, { children: _jsxs(Box, { marginX: 2, children: [_jsx(ProcessStateIcon, { step: step }), _jsxs(Text, { children: [step.title, ": "] }), isRawModeSupported ? (_jsx(TextInput, { mask: step.mask ? "*" : undefined, value: value, onChange: setValue, onSubmit: onSubmit })) : (_jsx(InteractiveInputDisabled, {}))] }) }));
+    }
+    return _jsx(ProcessState, { step: step });
+};

package/dist/esm/rendering/react/process_flags.d.ts

@@ -0,0 +1,9 @@
+import { ProcessRenderer } from "./process.js";
+import { InferredFlags } from "@oclif/core/lib/interfaces/index.js";
+export declare const processFlags: {
+    quiet: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+};
+export type ProcessFlags = InferredFlags<typeof processFlags>;
+export declare const makeProcessRenderer: (flags: {
+    quiet: boolean;
+}, title: string) => ProcessRenderer;