@shopify/cli-kit 3.16.3 → 3.18.0

package/dist/private/node/ui/components/Alert.js

@@ -0,0 +1,21 @@
+import { Banner } from './Banner.js';
+import { Link } from './Link.js';
+import { List } from './List.js';
+import { TokenizedText } from './TokenizedText.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+const Alert = ({ type, headline, body, nextSteps, reference, link, orderedNextSteps = false }) => {
+    return (React.createElement(Banner, { type: type },
+        React.createElement(Box, null,
+            React.createElement(Text, null, headline)),
+        body && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(TokenizedText, { item: body }))),
+        nextSteps && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(List, { title: "Next steps", items: nextSteps, ordered: orderedNextSteps }))),
+        reference && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(List, { title: "Reference", items: reference }))),
+        link && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Link, { url: link.url, label: link.label })))));
+};
+export { Alert };
+//# sourceMappingURL=Alert.js.map

package/dist/private/node/ui/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAa,MAAM,aAAa,CAAA;AAC9C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAgB,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,MAAM,KAAK,GAAyB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,GAAG,KAAK,EAAC,EAAE,EAAE;IACnH,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI;QAChB,oBAAC,GAAG;YACF,oBAAC,IAAI,QAAE,QAAQ,CAAQ,CACnB;QAEL,IAAI,IAAI,CACP,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CACzB,CACP;QAEA,SAAS,IAAI,CACZ,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,GAAI,CACpE,CACP;QAEA,SAAS,IAAI,CACZ,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,SAAS,GAAI,CACxC,CACP;QAEA,IAAI,IAAI,CACP,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CACtC,CACP,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA","sourcesContent":["import {Banner, BannerType} from './Banner.js'\nimport {Link} from './Link.js'\nimport {List} from './List.js'\nimport {TextTokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box, Text} from 'ink'\nimport React from 'react'\n\nexport interface AlertProps {\n  type: Exclude<BannerType, 'error'>\n  headline: string\n  body?: TextTokenItem\n  nextSteps?: TextTokenItem[]\n  reference?: TextTokenItem[]\n  link?: {\n    label: string\n    url: string\n  }\n  orderedNextSteps?: boolean\n}\n\nconst Alert: React.FC<AlertProps> = ({type, headline, body, nextSteps, reference, link, orderedNextSteps = false}) => {\n  return (\n    <Banner type={type}>\n      <Box>\n        <Text>{headline}</Text>\n      </Box>\n\n      {body && (\n        <Box marginTop={1}>\n          <TokenizedText item={body} />\n        </Box>\n      )}\n\n      {nextSteps && (\n        <Box marginTop={1}>\n          <List title=\"Next steps\" items={nextSteps} ordered={orderedNextSteps} />\n        </Box>\n      )}\n\n      {reference && (\n        <Box marginTop={1}>\n          <List title=\"Reference\" items={reference} />\n        </Box>\n      )}\n\n      {link && (\n        <Box marginTop={1}>\n          <Link url={link.url} label={link.label} />\n        </Box>\n      )}\n    </Banner>\n  )\n}\n\nexport {Alert}\n"]}

package/dist/private/node/ui/components/Banner.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type BannerType = 'success' | 'error' | 'warning' | 'info';
+interface Props {
+    type: BannerType;
+}
+declare const Banner: React.FC<Props>;
+export { Banner };

package/dist/private/node/ui/components/Banner.js

@@ -0,0 +1,35 @@
+import { Box, Text, useStdout } from 'ink';
+import React from 'react';
+function typeToColor(type) {
+    return {
+        success: 'green',
+        error: 'red',
+        warning: 'yellow',
+        info: 'dim',
+    }[type];
+}
+const BANNER_MIN_WIDTH = 80;
+function calculateWidth(stdout) {
+    const fullWidth = stdout?.columns ?? BANNER_MIN_WIDTH;
+    const twoThirdsOfWidth = Math.floor((fullWidth / 3) * 2);
+    let width;
+    if (fullWidth <= BANNER_MIN_WIDTH) {
+        width = fullWidth;
+    }
+    else if (twoThirdsOfWidth < BANNER_MIN_WIDTH) {
+        width = BANNER_MIN_WIDTH;
+    }
+    else {
+        width = twoThirdsOfWidth;
+    }
+    return width;
+}
+const Banner = ({ type, children }) => {
+    const { stdout } = useStdout();
+    return (React.createElement(Box, { width: calculateWidth(stdout), paddingY: 1, paddingX: 2, borderStyle: "round", flexDirection: "column", borderColor: typeToColor(type) },
+        React.createElement(Box, { marginTop: -2, marginBottom: 1, marginLeft: -1 },
+            React.createElement(Text, { dimColor: true, bold: true }, ` ${type} `)),
+        children));
+};
+export { Banner };
+//# sourceMappingURL=Banner.js.map

package/dist/private/node/ui/components/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAC,MAAM,KAAK,CAAA;AACxC,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,SAAS,WAAW,CAAC,IAAmB;IACtC,OAAO;QACL,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,KAAK;KACZ,CAAC,IAAI,CAAC,CAAA;AACT,CAAC;AAED,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAE3B,SAAS,cAAc,CAAC,MAAsC;IAC5D,MAAM,SAAS,GAAG,MAAM,EAAE,OAAO,IAAI,gBAAgB,CAAA;IACrD,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;IACxD,IAAI,KAAK,CAAA;IAET,IAAI,SAAS,IAAI,gBAAgB,EAAE;QACjC,KAAK,GAAG,SAAS,CAAA;KAClB;SAAM,IAAI,gBAAgB,GAAG,gBAAgB,EAAE;QAC9C,KAAK,GAAG,gBAAgB,CAAA;KACzB;SAAM;QACL,KAAK,GAAG,gBAAgB,CAAA;KACzB;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,MAAM,GAAoB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAC,EAAE,EAAE;IACnD,MAAM,EAAC,MAAM,EAAC,GAAG,SAAS,EAAE,CAAA;IAE5B,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAE,cAAc,CAAC,MAAM,CAAC,EAC7B,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,CAAC,EACX,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,QAAQ,EACtB,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;QAE9B,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;YACjD,oBAAC,IAAI,IAAC,QAAQ,QAAC,IAAI,UAAE,IAAI,IAAI,GAAG,CAAQ,CACpC;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,MAAM,EAAC,CAAA","sourcesContent":["import {Box, Text, useStdout} from 'ink'\nimport React from 'react'\n\nexport type BannerType = 'success' | 'error' | 'warning' | 'info'\n\ninterface Props {\n  type: BannerType\n}\n\nfunction typeToColor(type: Props['type']) {\n  return {\n    success: 'green',\n    error: 'red',\n    warning: 'yellow',\n    info: 'dim',\n  }[type]\n}\n\nconst BANNER_MIN_WIDTH = 80\n\nfunction calculateWidth(stdout: NodeJS.WriteStream | undefined) {\n  const fullWidth = stdout?.columns ?? BANNER_MIN_WIDTH\n  const twoThirdsOfWidth = Math.floor((fullWidth / 3) * 2)\n  let width\n\n  if (fullWidth <= BANNER_MIN_WIDTH) {\n    width = fullWidth\n  } else if (twoThirdsOfWidth < BANNER_MIN_WIDTH) {\n    width = BANNER_MIN_WIDTH\n  } else {\n    width = twoThirdsOfWidth\n  }\n\n  return width\n}\n\nconst Banner: React.FC<Props> = ({type, children}) => {\n  const {stdout} = useStdout()\n\n  return (\n    <Box\n      width={calculateWidth(stdout)}\n      paddingY={1}\n      paddingX={2}\n      borderStyle=\"round\"\n      flexDirection=\"column\"\n      borderColor={typeToColor(type)}\n    >\n      <Box marginTop={-2} marginBottom={1} marginLeft={-1}>\n        <Text dimColor bold>{` ${type} `}</Text>\n      </Box>\n      {children}\n    </Box>\n  )\n}\n\nexport {Banner}\n"]}

package/dist/private/node/ui/components/Command.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    command: string;
+}
+/**
+ * `Command` displays a command as non-dimmed text.
+ */
+declare const Command: React.FC<Props>;
+export { Command };

package/dist/private/node/ui/components/Command.js

@@ -0,0 +1,10 @@
+import { Text } from 'ink';
+import React from 'react';
+/**
+ * `Command` displays a command as non-dimmed text.
+ */
+const Command = ({ command }) => {
+    return React.createElement(Text, null, command);
+};
+export { Command };
+//# sourceMappingURL=Command.js.map

package/dist/private/node/ui/components/Command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Command.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;GAEG;AACH,MAAM,OAAO,GAAoB,CAAC,EAAC,OAAO,EAAiC,EAAe,EAAE;IAC1F,OAAO,oBAAC,IAAI,QAAE,OAAO,CAAQ,CAAA;AAC/B,CAAC,CAAA;AAED,OAAO,EAAC,OAAO,EAAC,CAAA","sourcesContent":["import {Text} from 'ink'\nimport React from 'react'\n\ninterface Props {\n  command: string\n}\n\n/**\n * `Command` displays a command as non-dimmed text.\n */\nconst Command: React.FC<Props> = ({command}: React.PropsWithChildren<Props>): JSX.Element => {\n  return <Text>{command}</Text>\n}\n\nexport {Command}\n"]}

package/dist/private/node/ui/components/ConcurrentOutput.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="node" />
+import { OutputProcess } from '../../../../output.js';
+import { FunctionComponent } from 'react';
+import AbortController from 'abort-controller';
+import { Writable } from 'node:stream';
+export declare type WritableStream = (process: OutputProcess, index: number) => Writable;
+export declare type RunProcesses = (writableStream: WritableStream, unmountInk: (error?: Error | undefined) => void) => Promise<void>;
+interface Props {
+    processes: OutputProcess[];
+    abortController: AbortController;
+    showTimestamps?: boolean;
+}
+/**
+ * Renders output from concurrent processes to the terminal.
+ * Output will be divided in a three column layout
+ * with the left column containing the timestamp,
+ * the right column containing the output,
+ * and the middle column containing the process prefix.
+ * Every process will be rendered with a different color, up to 4 colors.
+ *
+ * For example running `shopify app dev`:
+ *
+ * ```shell
+ * 2022-10-10 13:11:03 | backend    | npm
+ * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev
+ * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev
+ * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] 2.0.19
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json
+ * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`
+ * 2022-10-10 13:11:03 | backend    |
+ *
+ * ```
+ */
+declare const ConcurrentOutput: FunctionComponent<Props>;
+export default ConcurrentOutput;

package/dist/private/node/ui/components/ConcurrentOutput.js

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Static, Text, useApp } from 'ink';
+import stripAnsi from 'strip-ansi';
+import { Writable } from 'node:stream';
+const OUTPUT_MIN_WIDTH = 80;
+/**
+ * Renders output from concurrent processes to the terminal.
+ * Output will be divided in a three column layout
+ * with the left column containing the timestamp,
+ * the right column containing the output,
+ * and the middle column containing the process prefix.
+ * Every process will be rendered with a different color, up to 4 colors.
+ *
+ * For example running `shopify app dev`:
+ *
+ * ```shell
+ * 2022-10-10 13:11:03 | backend    | npm
+ * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev
+ * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev
+ * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | frontend   |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] 2.0.19
+ * 2022-10-10 13:11:03 | backend    |
+ * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/
+ * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json
+ * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`
+ * 2022-10-10 13:11:03 | backend    |
+ *
+ * ```
+ */
+const ConcurrentOutput = ({ processes, abortController, showTimestamps = true }) => {
+    const [processOutput, setProcessOutput] = useState([]);
+    const concurrentColors = ['yellow', 'cyan', 'magenta', 'green', 'blue'];
+    const prefixColumnSize = Math.max(...processes.map((process) => process.prefix.length));
+    const { exit: unmountInk } = useApp();
+    function lineColor(index) {
+        const colorIndex = index < concurrentColors.length ? index : index % concurrentColors.length;
+        return concurrentColors[colorIndex];
+    }
+    const writableStream = (process, index) => {
+        return new Writable({
+            write(chunk, _encoding, next) {
+                const lines = stripAnsi(chunk.toString('ascii')).split(/\n/);
+                setProcessOutput((previousProcessOutput) => [
+                    ...previousProcessOutput,
+                    {
+                        color: lineColor(index),
+                        prefix: process.prefix,
+                        lines,
+                    },
+                ]);
+                next();
+            },
+        });
+    };
+    const runProcesses = async () => {
+        try {
+            await Promise.all(processes.map(async (process, index) => {
+                const stdout = writableStream(process, index);
+                const stderr = writableStream(process, index);
+                await process.action(stdout, stderr, abortController.signal);
+            }));
+            unmountInk();
+        }
+        catch (error) {
+            abortController.abort();
+            unmountInk();
+            throw error;
+        }
+    };
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        runProcesses();
+    }, []);
+    return (React.createElement(Static, { items: processOutput }, (chunk, index) => {
+        return (React.createElement(Box, { flexDirection: "column", key: index }, chunk.lines.map((line, index) => (React.createElement(Box, { key: index, flexDirection: "row" },
+            showTimestamps && (React.createElement(Box, null,
+                React.createElement(Box, { marginRight: 1 },
+                    React.createElement(Text, { color: chunk.color }, new Date().toISOString().replace(/T/, ' ').replace(/\..+/, ''))),
+                React.createElement(Text, { bold: true, color: chunk.color }, "|"))),
+            React.createElement(Box, { width: prefixColumnSize, marginX: 1 },
+                React.createElement(Text, { color: chunk.color }, chunk.prefix)),
+            React.createElement(Text, { bold: true, color: chunk.color }, "|"),
+            React.createElement(Box, { flexGrow: 1, paddingLeft: 1 },
+                React.createElement(Text, { color: chunk.color }, line)))))));
+    }));
+};
+export default ConcurrentOutput;
+//# sourceMappingURL=ConcurrentOutput.js.map

package/dist/private/node/ui/components/ConcurrentOutput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConcurrentOutput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/ConcurrentOutput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {OutputProcess} from '../../../../output.js'\nimport React, {FunctionComponent, useEffect, useState} from 'react'\nimport {Box, Static, Text, useApp} from 'ink'\nimport stripAnsi from 'strip-ansi'\nimport AbortController from 'abort-controller'\nimport {Writable} from 'node:stream'\n\nexport type WritableStream = (process: OutputProcess, index: number) => Writable\nexport type RunProcesses = (\n  writableStream: WritableStream,\n  unmountInk: (error?: Error | undefined) => void,\n) => Promise<void>\n\ninterface Props {\n  processes: OutputProcess[]\n  abortController: AbortController\n  showTimestamps?: boolean\n}\ninterface Chunk {\n  color: string\n  prefix: string\n  lines: string[]\n}\n\nconst OUTPUT_MIN_WIDTH = 80\n\n/**\n * Renders output from concurrent processes to the terminal.\n * Output will be divided in a three column layout\n * with the left column containing the timestamp,\n * the right column containing the output,\n * and the middle column containing the process prefix.\n * Every process will be rendered with a different color, up to 4 colors.\n *\n * For example running `shopify app dev`:\n *\n * ```shell\n * 2022-10-10 13:11:03 | backend    | npm\n * 2022-10-10 13:11:03 | backend    |  WARN ignoring workspace config at ...\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | > shopify-app-template-node@0.1.0 dev\n * 2022-10-10 13:11:03 | backend    | > cross-env NODE_ENV=development nodemon backend/index.js --watch ./backend\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   | > starter-react-frontend-app@0.1.0 dev\n * 2022-10-10 13:11:03 | frontend   | > cross-env NODE_ENV=development node vite-server.js\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | frontend   |\n * 2022-10-10 13:11:03 | backend    | [nodemon] 2.0.19\n * 2022-10-10 13:11:03 | backend    |\n * 2022-10-10 13:11:03 | backend    | [nodemon] to restart at any time, enter `rs`\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching path(s): backend/\n * 2022-10-10 13:11:03 | backend    | [nodemon] watching extensions: js,mjs,json\n * 2022-10-10 13:11:03 | backend    | [nodemon] starting `node backend/index.js`\n * 2022-10-10 13:11:03 | backend    |\n *\n * ```\n */\nconst ConcurrentOutput: FunctionComponent<Props> = ({processes, abortController, showTimestamps = true}) => {\n  const [processOutput, setProcessOutput] = useState<Chunk[]>([])\n  const concurrentColors = ['yellow', 'cyan', 'magenta', 'green', 'blue']\n  const prefixColumnSize = Math.max(...processes.map((process) => process.prefix.length))\n  const {exit: unmountInk} = useApp()\n\n  function lineColor(index: number) {\n    const colorIndex = index < concurrentColors.length ? index : index % concurrentColors.length\n    return concurrentColors[colorIndex]!\n  }\n\n  const writableStream = (process: OutputProcess, index: number) => {\n    return new Writable({\n      write(chunk, _encoding, next) {\n        const lines = stripAnsi(chunk.toString('ascii')).split(/\\n/)\n\n        setProcessOutput((previousProcessOutput) => [\n          ...previousProcessOutput,\n          {\n            color: lineColor(index),\n            prefix: process.prefix,\n            lines,\n          },\n        ])\n\n        next()\n      },\n    })\n  }\n\n  const runProcesses = async () => {\n    try {\n      await Promise.all(\n        processes.map(async (process, index) => {\n          const stdout = writableStream(process, index)\n          const stderr = writableStream(process, index)\n\n          await process.action(stdout, stderr, abortController.signal)\n        }),\n      )\n\n      unmountInk()\n    } catch (error) {\n      abortController.abort()\n      unmountInk()\n      throw error\n    }\n  }\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    runProcesses()\n  }, [])\n\n  return (\n    <Static items={processOutput}>\n      {(chunk, index) => {\n        return (\n          <Box flexDirection=\"column\" key={index}>\n            {chunk.lines.map((line, index) => (\n              <Box key={index} flexDirection=\"row\">\n                {showTimestamps && (\n                  <Box>\n                    <Box marginRight={1}>\n                      <Text color={chunk.color}>{new Date().toISOString().replace(/T/, ' ').replace(/\\..+/, '')}</Text>\n                    </Box>\n\n                    <Text bold color={chunk.color}>\n                      |\n                    </Text>\n                  </Box>\n                )}\n\n                <Box width={prefixColumnSize} marginX={1}>\n                  <Text color={chunk.color}>{chunk.prefix}</Text>\n                </Box>\n\n                <Text bold color={chunk.color}>\n                  |\n                </Text>\n\n                <Box flexGrow={1} paddingLeft={1}>\n                  <Text color={chunk.color}>{line}</Text>\n                </Box>\n              </Box>\n            ))}\n          </Box>\n        )\n      }}\n    </Static>\n  )\n}\n\nexport default ConcurrentOutput\n"]}

package/dist/private/node/ui/components/Error.d.ts

@@ -0,0 +1,8 @@
+import { TextTokenItem } from './TokenizedText.js';
+import React from 'react';
+export interface ErrorProps {
+    headline: string;
+    tryMessage?: TextTokenItem;
+}
+declare const Error: React.FC<ErrorProps>;
+export { Error };

package/dist/private/node/ui/components/Error.js

@@ -0,0 +1,13 @@
+import { Banner } from './Banner.js';
+import { TokenizedText } from './TokenizedText.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+const Error = ({ headline, tryMessage }) => {
+    return (React.createElement(Banner, { type: "error" },
+        React.createElement(Box, null,
+            React.createElement(Text, null, headline)),
+        tryMessage && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(TokenizedText, { item: tryMessage })))));
+};
+export { Error };
+//# sourceMappingURL=Error.js.map

package/dist/private/node/ui/components/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,EAAgB,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,KAAK,GAAyB,CAAC,EAAC,QAAQ,EAAE,UAAU,EAAC,EAAE,EAAE;IAC7D,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO;QAClB,oBAAC,GAAG;YACF,oBAAC,IAAI,QAAE,QAAQ,CAAQ,CACnB;QAEL,UAAU,IAAI,CACb,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,aAAa,IAAC,IAAI,EAAE,UAAU,GAAI,CAC/B,CACP,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,KAAK,EAAC,CAAA","sourcesContent":["import {Banner} from './Banner.js'\nimport {TextTokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box, Text} from 'ink'\nimport React from 'react'\n\nexport interface ErrorProps {\n  headline: string\n  tryMessage?: TextTokenItem\n}\n\nconst Error: React.FC<ErrorProps> = ({headline, tryMessage}) => {\n  return (\n    <Banner type=\"error\">\n      <Box>\n        <Text>{headline}</Text>\n      </Box>\n\n      {tryMessage && (\n        <Box marginTop={1}>\n          <TokenizedText item={tryMessage} />\n        </Box>\n      )}\n    </Banner>\n  )\n}\n\nexport {Error}\n"]}

package/dist/private/node/ui/components/FatalError.d.ts

@@ -0,0 +1,7 @@
+import { Fatal } from '../../../../error.js';
+import React from 'react';
+export interface FatalErrorProps {
+    error: Fatal;
+}
+declare const FatalError: React.FC<FatalErrorProps>;
+export { FatalError };

package/dist/private/node/ui/components/FatalError.js

@@ -0,0 +1,42 @@
+import { Banner } from './Banner.js';
+import { TokenizedText } from './TokenizedText.js';
+import { Bug, cleanSingleStackTracePath } from '../../../../error.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+import StackTracey from 'stacktracey';
+const FatalError = ({ error }) => {
+    let stack;
+    if (error instanceof Bug) {
+        stack = new StackTracey(error);
+        stack.items.forEach((item) => {
+            item.file = cleanSingleStackTracePath(item.file);
+        });
+        stack = stack.withSources();
+        stack = stack
+            .filter((entry) => {
+            return !entry.file.includes('@oclif/core');
+        })
+            .map((item) => {
+            /** We make the paths relative to the packages/ directory */
+            const fileShortComponents = item.fileShort.split('packages/');
+            item.fileShort = fileShortComponents.length === 2 ? fileShortComponents[1] : fileShortComponents[0];
+            return item;
+        });
+    }
+    return (React.createElement(Banner, { type: "error" },
+        React.createElement(Box, null,
+            React.createElement(Text, null, error.message)),
+        error.tryMessage && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(TokenizedText, { item: error.tryMessage }))),
+        stack && stack.items.length !== 0 && (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+            React.createElement(Text, { dimColor: true }, "To investigate the issue, examine this stack trace:"),
+            stack.items.map((item, index) => (React.createElement(Box, { flexDirection: "column", key: index },
+                React.createElement(Text, null,
+                    "at",
+                    item.calleeShort && React.createElement(Text, { color: "yellow" }, ` ${item.calleeShort}`),
+                    item.fileShort && ` (${item.fileShort}:${item.line})`),
+                React.createElement(Box, { paddingLeft: 1 },
+                    React.createElement(Text, { dimColor: true }, item.sourceLine?.trim())))))))));
+};
+export { FatalError };
+//# sourceMappingURL=FatalError.js.map

package/dist/private/node/ui/components/FatalError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FatalError.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FatalError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAA;AAClC,OAAO,EAAC,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAC,GAAG,EAAE,yBAAyB,EAAQ,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,aAAa,CAAA;AAMrC,MAAM,UAAU,GAA8B,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IACxD,IAAI,KAAK,CAAA;IAET,IAAI,KAAK,YAAY,GAAG,EAAE;QACxB,KAAK,GAAG,IAAI,WAAW,CAAC,KAAK,CAAC,CAAA;QAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClD,CAAC,CAAC,CAAA;QAEF,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAA;QAC3B,KAAK,GAAG,KAAK;aACV,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;YAChB,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAA;QAC5C,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACZ,4DAA4D;YAC5D,MAAM,mBAAmB,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;YAC7D,IAAI,CAAC,SAAS,GAAG,mBAAmB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAE,CAAA;YACrG,OAAO,IAAI,CAAA;QACb,CAAC,CAAC,CAAA;KACL;IAED,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO;QAClB,oBAAC,GAAG;YACF,oBAAC,IAAI,QAAE,KAAK,CAAC,OAAO,CAAQ,CACxB;QAEL,KAAK,CAAC,UAAU,IAAI,CACnB,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC;YACf,oBAAC,aAAa,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,GAAI,CACrC,CACP;QACA,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CACpC,oBAAC,GAAG,IAAC,SAAS,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ;YACvC,oBAAC,IAAI,IAAC,QAAQ,gEAA2D;YACxE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,KAAK;gBACpC,oBAAC,IAAI;;oBACA,IAAI,CAAC,WAAW,IAAI,oBAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,IAAE,IAAI,IAAI,CAAC,WAAW,EAAE,CAAQ;oBAC1E,IAAI,CAAC,SAAS,IAAI,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,GAAG,CACjD;gBACP,oBAAC,GAAG,IAAC,WAAW,EAAE,CAAC;oBACjB,oBAAC,IAAI,IAAC,QAAQ,UAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAQ,CAC3C,CACF,CACP,CAAC,CACE,CACP,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,UAAU,EAAC,CAAA","sourcesContent":["import {Banner} from './Banner.js'\nimport {TokenizedText} from './TokenizedText.js'\nimport {Bug, cleanSingleStackTracePath, Fatal} from '../../../../error.js'\nimport {Box, Text} from 'ink'\nimport React from 'react'\nimport StackTracey from 'stacktracey'\n\nexport interface FatalErrorProps {\n  error: Fatal\n}\n\nconst FatalError: React.FC<FatalErrorProps> = ({error}) => {\n  let stack\n\n  if (error instanceof Bug) {\n    stack = new StackTracey(error)\n    stack.items.forEach((item) => {\n      item.file = cleanSingleStackTracePath(item.file)\n    })\n\n    stack = stack.withSources()\n    stack = stack\n      .filter((entry) => {\n        return !entry.file.includes('@oclif/core')\n      })\n      .map((item) => {\n        /** We make the paths relative to the packages/ directory */\n        const fileShortComponents = item.fileShort.split('packages/')\n        item.fileShort = fileShortComponents.length === 2 ? fileShortComponents[1]! : fileShortComponents[0]!\n        return item\n      })\n  }\n\n  return (\n    <Banner type=\"error\">\n      <Box>\n        <Text>{error.message}</Text>\n      </Box>\n\n      {error.tryMessage && (\n        <Box marginTop={1}>\n          <TokenizedText item={error.tryMessage} />\n        </Box>\n      )}\n      {stack && stack.items.length !== 0 && (\n        <Box marginTop={1} flexDirection=\"column\">\n          <Text dimColor>To investigate the issue, examine this stack trace:</Text>\n          {stack.items.map((item, index) => (\n            <Box flexDirection=\"column\" key={index}>\n              <Text>\n                at{item.calleeShort && <Text color=\"yellow\">{` ${item.calleeShort}`}</Text>}\n                {item.fileShort && ` (${item.fileShort}:${item.line})`}\n              </Text>\n              <Box paddingLeft={1}>\n                <Text dimColor>{item.sourceLine?.trim()}</Text>\n              </Box>\n            </Box>\n          ))}\n        </Box>\n      )}\n    </Banner>\n  )\n}\n\nexport {FatalError}\n"]}

package/dist/private/node/ui/components/FullScreen.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:
+ * - You want to preserve terminal history. `ink` [normally clears the terminal history](https://github.com/vadimdemedes/ink/issues/382) if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing `Ctrl+C`.
+ * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.
+ */
+declare const FullScreen: React.FC;
+export default FullScreen;

package/dist/private/node/ui/components/FullScreen.js

@@ -0,0 +1,32 @@
+import { Box } from 'ink';
+import React, { useEffect, useState } from 'react';
+/**
+ * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:
+ * - You want to preserve terminal history. `ink` [normally clears the terminal history](https://github.com/vadimdemedes/ink/issues/382) if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing `Ctrl+C`.
+ * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.
+ */
+const FullScreen = (props) => {
+    const [size, setSize] = useState({
+        columns: process.stdout.columns,
+        rows: process.stdout.rows,
+    });
+    useEffect(() => {
+        function onResize() {
+            setSize({
+                columns: process.stdout.columns,
+                rows: process.stdout.rows,
+            });
+        }
+        process.stdout.on('resize', onResize);
+        // switch to an alternate buffer
+        process.stdout.write('\u001B[?1049h');
+        return () => {
+            process.stdout.off('resize', onResize);
+            // switch back to the main buffer
+            process.stdout.write('\u001B[?1049l');
+        };
+    }, []);
+    return (React.createElement(Box, { width: size.columns, height: size.rows }, props.children));
+};
+export default FullScreen;
+//# sourceMappingURL=FullScreen.js.map

package/dist/private/node/ui/components/FullScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreen.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/FullScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAEhD;;;;GAIG;AACH,MAAM,UAAU,GAAa,CAAC,KAAmC,EAAe,EAAE;IAChF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;QAC/B,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;QAC/B,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;KAC1B,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,QAAQ;YACf,OAAO,CAAC;gBACN,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO;gBAC/B,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;aAC1B,CAAC,CAAA;QACJ,CAAC;QAED,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QACrC,gCAAgC;QAChC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACrC,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;YACtC,iCAAiC;YACjC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAA;QACvC,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,oBAAC,GAAG,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA","sourcesContent":["import {Box} from 'ink'\nimport React, {useEffect, useState} from 'react'\n\n/**\n * `FullScreen` renders all output in a new buffer and makes it full screen. This is useful when:\n * - You want to preserve terminal history. `ink` [normally clears the terminal history](https://github.com/vadimdemedes/ink/issues/382) if the rendered output is taller than the terminal window. By rendering in a separate buffer history will be preserved and will be visible after pressing `Ctrl+C`.\n * - You want to respond to the resize event of the terminal. Whenever the user resizes their terminal window the output's height and width will be recalculated and re-rendered properly.\n */\nconst FullScreen: React.FC = (props: {children?: React.ReactNode}): JSX.Element => {\n  const [size, setSize] = useState({\n    columns: process.stdout.columns,\n    rows: process.stdout.rows,\n  })\n\n  useEffect(() => {\n    function onResize() {\n      setSize({\n        columns: process.stdout.columns,\n        rows: process.stdout.rows,\n      })\n    }\n\n    process.stdout.on('resize', onResize)\n    // switch to an alternate buffer\n    process.stdout.write('\\u001B[?1049h')\n    return () => {\n      process.stdout.off('resize', onResize)\n      // switch back to the main buffer\n      process.stdout.write('\\u001B[?1049l')\n    }\n  }, [])\n\n  return (\n    <Box width={size.columns} height={size.rows}>\n      {props.children}\n    </Box>\n  )\n}\n\nexport default FullScreen\n"]}

package/dist/private/node/ui/components/Link.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    url: string;
+    label: string;
+}
+/**
+ * `Link` displays a clickable link when supported by the terminal.
+ */
+declare const Link: React.FC<Props>;
+export { Link };

package/dist/private/node/ui/components/Link.js

@@ -0,0 +1,14 @@
+import { Text, Transform } from 'ink';
+import React from 'react';
+import terminalLink from 'terminal-link';
+/**
+ * `Link` displays a clickable link when supported by the terminal.
+ */
+const Link = ({ url, label }) => {
+    return (React.createElement(Text, null,
+        React.createElement(Text, { dimColor: true }, `${label}: `),
+        React.createElement(Transform, { transform: (children) => terminalLink(children, url, { fallback: false }) },
+            React.createElement(Text, { underline: true }, url))));
+};
+export { Link };
+//# sourceMappingURL=Link.js.map

package/dist/private/node/ui/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,YAAY,MAAM,eAAe,CAAA;AAOxC;;GAEG;AACH,MAAM,IAAI,GAAoB,CAAC,EAAC,GAAG,EAAE,KAAK,EAAiC,EAAe,EAAE;IAC1F,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,IAAC,QAAQ,UAAE,GAAG,KAAK,IAAI,CAAQ;QACpC,oBAAC,SAAS,IAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAC,QAAQ,EAAE,KAAK,EAAC,CAAC;YAChF,oBAAC,IAAI,IAAC,SAAS,UAAE,GAAG,CAAQ,CAClB,CACP,CACR,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,IAAI,EAAC,CAAA","sourcesContent":["import {Text, Transform} from 'ink'\nimport React from 'react'\nimport terminalLink from 'terminal-link'\n\ninterface Props {\n  url: string\n  label: string\n}\n\n/**\n * `Link` displays a clickable link when supported by the terminal.\n */\nconst Link: React.FC<Props> = ({url, label}: React.PropsWithChildren<Props>): JSX.Element => {\n  return (\n    <Text>\n      <Text dimColor>{`${label}: `}</Text>\n      <Transform transform={(children) => terminalLink(children, url, {fallback: false})}>\n        <Text underline>{url}</Text>\n      </Transform>\n    </Text>\n  )\n}\n\nexport {Link}\n"]}

package/dist/private/node/ui/components/List.d.ts

@@ -0,0 +1,13 @@
+import { TextTokenItem } from './TokenizedText.js';
+import React from 'react';
+interface Props {
+    title: string;
+    items: TextTokenItem[];
+    ordered?: boolean;
+}
+/**
+ * `List` displays an unordered or ordered list with text aligned with the bullet point
+ * and wrapped to the container width.
+ */
+declare const List: React.FC<Props>;
+export { List };

package/dist/private/node/ui/components/List.js

@@ -0,0 +1,19 @@
+import { TokenizedText } from './TokenizedText.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+const DOT = '•';
+/**
+ * `List` displays an unordered or ordered list with text aligned with the bullet point
+ * and wrapped to the container width.
+ */
+const List = ({ title, items, ordered = false }) => {
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { dimColor: true }, title),
+        items.map((item, index) => (React.createElement(Box, { key: index },
+            React.createElement(Box, null,
+                React.createElement(Text, { dimColor: true }, `  ${ordered ? `${index + 1}.` : DOT}`)),
+            React.createElement(Box, { flexGrow: 1, marginLeft: 1 },
+                React.createElement(TokenizedText, { item: item })))))));
+};
+export { List };
+//# sourceMappingURL=List.js.map

package/dist/private/node/ui/components/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/List.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,aAAa,EAAC,MAAM,oBAAoB,CAAA;AAC/D,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,GAAG,GAAG,GAAG,CAAA;AAEf;;;GAGG;AACH,MAAM,IAAI,GAAoB,CAAC,EAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAG,KAAK,EAAiC,EAAe,EAAE;IAC7G,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ;QACzB,oBAAC,IAAI,IAAC,QAAQ,UAAE,KAAK,CAAQ;QAC5B,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,GAAG,IAAC,GAAG,EAAE,KAAK;YACb,oBAAC,GAAG;gBACF,oBAAC,IAAI,IAAC,QAAQ,UAAE,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAQ,CAC1D;YAEN,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC;gBAC7B,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAI,GAAI,CACzB,CACF,CACP,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,IAAI,EAAC,CAAA","sourcesContent":["import {TextTokenItem, TokenizedText} from './TokenizedText.js'\nimport {Box, Text} from 'ink'\nimport React from 'react'\n\ninterface Props {\n  title: string\n  items: TextTokenItem[]\n  ordered?: boolean\n}\n\nconst DOT = '•'\n\n/**\n * `List` displays an unordered or ordered list with text aligned with the bullet point\n * and wrapped to the container width.\n */\nconst List: React.FC<Props> = ({title, items, ordered = false}: React.PropsWithChildren<Props>): JSX.Element => {\n  return (\n    <Box flexDirection=\"column\">\n      <Text dimColor>{title}</Text>\n      {items.map((item, index) => (\n        <Box key={index}>\n          <Box>\n            <Text dimColor>{`  ${ordered ? `${index + 1}.` : DOT}`}</Text>\n          </Box>\n\n          <Box flexGrow={1} marginLeft={1}>\n            <TokenizedText item={item} />\n          </Box>\n        </Box>\n      ))}\n    </Box>\n  )\n}\n\nexport {List}\n"]}

package/dist/private/node/ui/components/TextAnimation.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type AnimationName = 'rainbow' | 'pulse' | 'glitch' | 'radar' | 'neon' | 'karaoke';
+interface Props {
+    name?: AnimationName;
+    speed?: number;
+}
+/**
+ * `TextAnimation` applies animations from [chalk-animation](https://github.com/bokub/chalk-animation) to `Text` Children
+ */
+declare const TextAnimation: React.FC<Props>;
+export { TextAnimation };

package/dist/private/node/ui/components/TextAnimation.js

@@ -0,0 +1,46 @@
+import { renderString } from '../../ui.js';
+import chalkAnimation from 'chalk-animation';
+import { Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+const delays = {
+    rainbow: 15,
+    pulse: 16,
+    glitch: 55,
+    radar: 50,
+    neon: 500,
+    karaoke: 50,
+};
+/**
+ * `TextAnimation` applies animations from [chalk-animation](https://github.com/bokub/chalk-animation) to `Text` Children
+ */
+const TextAnimation = ({ name = 'rainbow', speed = 1, children, }) => {
+    const [animationTimeout, setAnimationTimeout] = useState(null);
+    const animation = chalkAnimation[name]('').stop();
+    const [frame, setFrame] = useState('');
+    const start = () => {
+        const { output } = renderString(React.createElement(Text, null, children));
+        // There's probably some clashing between `chalk-animation` and Ink's rendering mechanism
+        // (which uses `log-update`). The solution is to remove the ANSI escape sequence at the
+        // start of the frame that we're getting from `chalk-animation` that tells the terminal to
+        // clear the lines.
+        const frame = animation
+            .replace(output ?? '')
+            .frame()
+            .replace(/^\u001B\[(\d)F\u001B\[G\u001B\[2K/, ''); // eslint-disable-line no-control-regex
+        setFrame(frame);
+        setAnimationTimeout(setTimeout(() => {
+            start();
+        }, delays[name] / speed));
+    };
+    useEffect(() => {
+        start();
+        return () => {
+            if (animationTimeout)
+                clearTimeout(animationTimeout);
+            setAnimationTimeout(null);
+        };
+    }, []);
+    return React.createElement(Text, null, frame);
+};
+export { TextAnimation };
+//# sourceMappingURL=TextAnimation.js.map

package/dist/private/node/ui/components/TextAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAnimation.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,aAAa,CAAA;AACxC,OAAO,cAAc,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AAShD,MAAM,MAAM,GAAqC;IAC/C,OAAO,EAAE,EAAE;IACX,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,EAAE;CACZ,CAAA;AAED;;GAEG;AACH,MAAM,aAAa,GAAoB,CAAC,EACtC,IAAI,GAAG,SAAS,EAChB,KAAK,GAAG,CAAC,EACT,QAAQ,GACuB,EAAe,EAAE;IAChD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAA;IACrF,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAA;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,MAAM,EAAC,MAAM,EAAC,GAAG,YAAY,CAAC,oBAAC,IAAI,QAAE,QAAQ,CAAQ,CAAC,CAAA;QAEtD,yFAAyF;QACzF,uFAAuF;QACvF,0FAA0F;QAC1F,mBAAmB;QAEnB,MAAM,KAAK,GAAG,SAAS;aACpB,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;aACrB,KAAK,EAAE;aACP,OAAO,CAAC,mCAAmC,EAAE,EAAE,CAAC,CAAA,CAAC,uCAAuC;QAE3F,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEf,mBAAmB,CACjB,UAAU,CAAC,GAAG,EAAE;YACd,KAAK,EAAE,CAAA;QACT,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CACzB,CAAA;IACH,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,EAAE,CAAA;QAEP,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB;gBAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;YAEpD,mBAAmB,CAAC,IAAI,CAAC,CAAA;QAC3B,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,IAAI,QAAE,KAAK,CAAQ,CAAA;AAC7B,CAAC,CAAA;AAED,OAAO,EAAC,aAAa,EAAC,CAAA","sourcesContent":["import {renderString} from '../../ui.js'\nimport chalkAnimation from 'chalk-animation'\nimport {Text} from 'ink'\nimport React, {useEffect, useState} from 'react'\n\ntype AnimationName = 'rainbow' | 'pulse' | 'glitch' | 'radar' | 'neon' | 'karaoke'\n\ninterface Props {\n  name?: AnimationName\n  speed?: number\n}\n\nconst delays: {[key in AnimationName]: number} = {\n  rainbow: 15,\n  pulse: 16,\n  glitch: 55,\n  radar: 50,\n  neon: 500,\n  karaoke: 50,\n}\n\n/**\n * `TextAnimation` applies animations from [chalk-animation](https://github.com/bokub/chalk-animation) to `Text` Children\n */\nconst TextAnimation: React.FC<Props> = ({\n  name = 'rainbow',\n  speed = 1,\n  children,\n}: React.PropsWithChildren<Props>): JSX.Element => {\n  const [animationTimeout, setAnimationTimeout] = useState<NodeJS.Timeout | null>(null)\n  const animation = chalkAnimation[name]('').stop()\n  const [frame, setFrame] = useState('')\n\n  const start = () => {\n    const {output} = renderString(<Text>{children}</Text>)\n\n    // There's probably some clashing between `chalk-animation` and Ink's rendering mechanism\n    // (which uses `log-update`). The solution is to remove the ANSI escape sequence at the\n    // start of the frame that we're getting from `chalk-animation` that tells the terminal to\n    // clear the lines.\n\n    const frame = animation\n      .replace(output ?? '')\n      .frame()\n      .replace(/^\\u001B\\[(\\d)F\\u001B\\[G\\u001B\\[2K/, '') // eslint-disable-line no-control-regex\n\n    setFrame(frame)\n\n    setAnimationTimeout(\n      setTimeout(() => {\n        start()\n      }, delays[name] / speed),\n    )\n  }\n\n  useEffect(() => {\n    start()\n\n    return () => {\n      if (animationTimeout) clearTimeout(animationTimeout)\n\n      setAnimationTimeout(null)\n    }\n  }, [])\n\n  return <Text>{frame}</Text>\n}\n\nexport {TextAnimation}\n"]}

package/dist/private/node/ui/components/TokenizedText.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface CommandToken {
+    command: string;
+}
+interface LinkToken {
+    link: {
+        label: string;
+        url: string;
+    };
+}
+export declare type TextToken = string | CommandToken | LinkToken;
+export declare type TextTokenItem = TextToken | TextToken[];
+interface Props {
+    item: TextToken | TextToken[];
+}
+/**
+ * `TokenizedText` renders a text string with tokens that can be either strings,
+ * links, and commands.
+ */
+declare const TokenizedText: React.FC<Props>;
+export { TokenizedText };

package/dist/private/node/ui/components/TokenizedText.js

@@ -0,0 +1,26 @@
+import { Command } from './Command.js';
+import { Link } from './Link.js';
+import { Text } from 'ink';
+import React from 'react';
+/**
+ * `TokenizedText` renders a text string with tokens that can be either strings,
+ * links, and commands.
+ */
+const TokenizedText = ({ item }) => {
+    if (typeof item === 'string') {
+        return React.createElement(Text, { dimColor: true }, item);
+    }
+    else if ('command' in item) {
+        return React.createElement(Command, { command: item.command });
+    }
+    else if ('link' in item) {
+        return React.createElement(Link, { ...item.link });
+    }
+    else {
+        return (React.createElement(Text, null, item.map((listItem, index) => (React.createElement(Text, { key: index },
+            React.createElement(TokenizedText, { item: listItem }),
+            index < item.length - 1 && React.createElement(Text, null, " "))))));
+    }
+};
+export { TokenizedText };
+//# sourceMappingURL=TokenizedText.js.map

package/dist/private/node/ui/components/TokenizedText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedText.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TokenizedText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,MAAM,OAAO,CAAA;AAoBzB;;;GAGG;AACH,MAAM,aAAa,GAAoB,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE;IAChD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,oBAAC,IAAI,IAAC,QAAQ,UAAE,IAAI,CAAQ,CAAA;KACpC;SAAM,IAAI,SAAS,IAAI,IAAI,EAAE;QAC5B,OAAO,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAA;KAC1C;SAAM,IAAI,MAAM,IAAI,IAAI,EAAE;QACzB,OAAO,oBAAC,IAAI,OAAK,IAAI,CAAC,IAAI,GAAI,CAAA;KAC/B;SAAM;QACL,OAAO,CACL,oBAAC,IAAI,QACF,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7B,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK;YACd,oBAAC,aAAa,IAAC,IAAI,EAAE,QAAQ,GAAI;YAChC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,IAAI,YAAS,CACrC,CACR,CAAC,CACG,CACR,CAAA;KACF;AACH,CAAC,CAAA;AAED,OAAO,EAAC,aAAa,EAAC,CAAA","sourcesContent":["import {Command} from './Command.js'\nimport {Link} from './Link.js'\nimport {Text} from 'ink'\nimport React from 'react'\n\ninterface CommandToken {\n  command: string\n}\n\ninterface LinkToken {\n  link: {\n    label: string\n    url: string\n  }\n}\n\nexport type TextToken = string | CommandToken | LinkToken\nexport type TextTokenItem = TextToken | TextToken[]\n\ninterface Props {\n  item: TextToken | TextToken[]\n}\n\n/**\n * `TokenizedText` renders a text string with tokens that can be either strings,\n * links, and commands.\n */\nconst TokenizedText: React.FC<Props> = ({item}) => {\n  if (typeof item === 'string') {\n    return <Text dimColor>{item}</Text>\n  } else if ('command' in item) {\n    return <Command command={item.command} />\n  } else if ('link' in item) {\n    return <Link {...item.link} />\n  } else {\n    return (\n      <Text>\n        {item.map((listItem, index) => (\n          <Text key={index}>\n            <TokenizedText item={listItem} />\n            {index < item.length - 1 && <Text> </Text>}\n          </Text>\n        ))}\n      </Text>\n    )\n  }\n}\n\nexport {TokenizedText}\n"]}