@shopify/cli-kit 3.47.4 → 3.48.0

package/dist/private/node/ui/components/Prompts/InfoMessage.test.js

@@ -0,0 +1,21 @@
+import { InfoMessage } from './InfoMessage.js';
+import { render } from '../../../testing/ui.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+describe('InfoMessage', async () => {
+    test('renders a message with title and body', async () => {
+        const { lastFrame } = render(React.createElement(InfoMessage, { message: {
+                title: {
+                    color: 'red',
+                    text: "This can't be undone.",
+                },
+                body: "Once you upgrade this app, you can't go back to the old way of deploying extensions",
+            } }));
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "This can't be undone.
+
+      Once you upgrade this app, you can't go back to the old way of deploying extensions"
+    `);
+    });
+});
+//# sourceMappingURL=InfoMessage.test.js.map

package/dist/private/node/ui/components/Prompts/InfoMessage.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoMessage.test.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/InfoMessage.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,aAAa,EAAE,KAAK,IAAI,EAAE;IACjC,IAAI,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACvD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,WAAW,IACV,OAAO,EAAE;gBACP,KAAK,EAAE;oBACL,KAAK,EAAE,KAAK;oBACZ,IAAI,EAAE,uBAAuB;iBAC9B;gBACD,IAAI,EAAE,qFAAqF;aAC5F,GACD,CACH,CAAA;QAED,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;KAIzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {InfoMessage} from './InfoMessage.js'\nimport {render} from '../../../testing/ui.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('InfoMessage', async () => {\n  test('renders a message with title and body', async () => {\n    const {lastFrame} = render(\n      <InfoMessage\n        message={{\n          title: {\n            color: 'red',\n            text: \"This can't be undone.\",\n          },\n          body: \"Once you upgrade this app, you can't go back to the old way of deploying extensions\",\n        }}\n      />,\n    )\n\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\u001b[31mThis can't be undone.\u001b[39m\n\n      Once you upgrade this app, you can't go back to the old way of deploying extensions\"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Prompts/InfoTable.d.ts

@@ -5,6 +5,7 @@ type Items = TokenItem<InlineToken>[];
 export interface InfoTableSection {
     color?: TextProps['color'];
     header: string;
+    bullet?: string;
     helperText?: string;
     items: Items;
 }

package/dist/private/node/ui/components/Prompts/InfoTable.js

@@ -5,19 +5,23 @@ import React from 'react';
 const InfoTable = ({ table }) => {
     const sections = Array.isArray(table)
         ? table
-        : Object.keys(table).map((header) => ({ header, items: table[header], color: undefined, helperText: undefined }));
+        : Object.keys(table).map((header) => ({
+            header,
+            items: table[header],
+            color: undefined,
+            helperText: undefined,
+            bullet: undefined,
+        }));
     const headerColumnWidth = Math.max(...sections.map((section) => {
         return Math.max(...section.header.split('\n').map((line) => {
             return line.length;
         }));
     }));
-    return (React.createElement(Box, { flexDirection: "column" }, sections.map((section, index) => (React.createElement(Box, { key: index, marginBottom: index === sections.length - 1 ? 0 : 1 },
+    return (React.createElement(Box, { flexDirection: "column" }, sections.map((section, index) => (React.createElement(Box, { key: index, marginBottom: index === sections.length - 1 ? 0 : 1, flexDirection: "column" },
         section.header.length > 0 && (React.createElement(Box, { width: headerColumnWidth + 1 },
-            React.createElement(Text, { color: section.color },
-                capitalize(section.header),
-                ":"))),
-        React.createElement(Box, { marginLeft: section.header.length > 0 ? 2 : 0, flexGrow: 1, flexDirection: "column", gap: 1 },
-            React.createElement(List, { margin: false, items: section.items, color: section.color }),
+            React.createElement(Text, { color: section.color, bold: true }, capitalize(section.header)))),
+        React.createElement(Box, { flexGrow: 1, flexDirection: "column", gap: 1 },
+            React.createElement(List, { margin: false, items: section.items, color: section.color, bullet: section.bullet }),
             section.helperText ? React.createElement(Text, { color: section.color }, section.helperText) : null))))));
 };
 export { InfoTable };

package/dist/private/node/ui/components/Prompts/InfoTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTable.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/InfoTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAA;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,wCAAwC,CAAA;AAEjE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAY,MAAM,KAAK,CAAA;AACxC,OAAO,KAA0B,MAAM,OAAO,CAAA;AAmB9C,MAAM,SAAS,GAAsC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACnC,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAE,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAC,CAAC,CAAC,CAAA;IAElH,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAChC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,OAAO,IAAI,CAAC,GAAG,CACb,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC,CAAC,CACH,CAAA;IACH,CAAC,CAAC,CACH,CAAA;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,IACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,oBAAC,GAAG,IAAC,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjE,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,oBAAC,GAAG,IAAC,KAAK,EAAE,iBAAiB,GAAG,CAAC;YAC/B,oBAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK;gBAAG,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;oBAAS,CAC5D,CACP;QACD,oBAAC,GAAG,IAAC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC;YAC5F,oBAAC,IAAI,IAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI;YAClE,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAAG,OAAO,CAAC,UAAU,CAAQ,CAAC,CAAC,CAAC,IAAI,CAChF,CACF,CACP,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,SAAS,EAAC,CAAA","sourcesContent":["import {List} from '../List.js'\nimport {capitalize} from '../../../../../public/common/string.js'\nimport {InlineToken, TokenItem} from '../TokenizedText.js'\nimport {Box, Text, TextProps} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\ntype Items = TokenItem<InlineToken>[]\n\nexport interface InfoTableSection {\n  color?: TextProps['color']\n  header: string\n  helperText?: string\n  items: Items\n}\n\nexport interface InfoTableProps {\n  table:\n    | {\n        [header: string]: Items\n      }\n    | InfoTableSection[]\n}\n\nconst InfoTable: FunctionComponent<InfoTableProps> = ({table}) => {\n  const sections = Array.isArray(table)\n    ? table\n    : Object.keys(table).map((header) => ({header, items: table[header]!, color: undefined, helperText: undefined}))\n\n  const headerColumnWidth = Math.max(\n    ...sections.map((section) => {\n      return Math.max(\n        ...section.header.split('\\n').map((line) => {\n          return line.length\n        }),\n      )\n    }),\n  )\n\n  return (\n    <Box flexDirection=\"column\">\n      {sections.map((section, index) => (\n        <Box key={index} marginBottom={index === sections.length - 1 ? 0 : 1}>\n          {section.header.length > 0 && (\n            <Box width={headerColumnWidth + 1}>\n              <Text color={section.color}>{capitalize(section.header)}:</Text>\n            </Box>\n          )}\n          <Box marginLeft={section.header.length > 0 ? 2 : 0} flexGrow={1} flexDirection=\"column\" gap={1}>\n            <List margin={false} items={section.items} color={section.color} />\n            {section.helperText ? <Text color={section.color}>{section.helperText}</Text> : null}\n          </Box>\n        </Box>\n      ))}\n    </Box>\n  )\n}\n\nexport {InfoTable}\n"]}
+{"version":3,"file":"InfoTable.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/InfoTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAA;AAC/B,OAAO,EAAC,UAAU,EAAC,MAAM,wCAAwC,CAAA;AAEjE,OAAO,EAAC,GAAG,EAAE,IAAI,EAAY,MAAM,KAAK,CAAA;AACxC,OAAO,KAA0B,MAAM,OAAO,CAAA;AAoB9C,MAAM,SAAS,GAAsC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACnC,CAAC,CAAC,KAAK;QACP,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAClC,MAAM;YACN,KAAK,EAAE,KAAK,CAAC,MAAM,CAAE;YACrB,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,SAAS;SAClB,CAAC,CAAC,CAAA;IAEP,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAChC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QAC1B,OAAO,IAAI,CAAC,GAAG,CACb,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC,CAAC,CACH,CAAA;IACH,CAAC,CAAC,CACH,CAAA;IAED,OAAO,CACL,oBAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,IACxB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,oBAAC,GAAG,IAAC,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,EAAC,QAAQ;QACzF,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,oBAAC,GAAG,IAAC,KAAK,EAAE,iBAAiB,GAAG,CAAC;YAC/B,oBAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,IAAI,UAC7B,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CACtB,CACH,CACP;QACD,oBAAC,GAAG,IAAC,QAAQ,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC;YAC7C,oBAAC,IAAI,IAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,GAAI;YAC1F,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,oBAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAAG,OAAO,CAAC,UAAU,CAAQ,CAAC,CAAC,CAAC,IAAI,CAChF,CACF,CACP,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAC,SAAS,EAAC,CAAA","sourcesContent":["import {List} from '../List.js'\nimport {capitalize} from '../../../../../public/common/string.js'\nimport {InlineToken, TokenItem} from '../TokenizedText.js'\nimport {Box, Text, TextProps} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\ntype Items = TokenItem<InlineToken>[]\n\nexport interface InfoTableSection {\n  color?: TextProps['color']\n  header: string\n  bullet?: string\n  helperText?: string\n  items: Items\n}\n\nexport interface InfoTableProps {\n  table:\n    | {\n        [header: string]: Items\n      }\n    | InfoTableSection[]\n}\n\nconst InfoTable: FunctionComponent<InfoTableProps> = ({table}) => {\n  const sections = Array.isArray(table)\n    ? table\n    : Object.keys(table).map((header) => ({\n        header,\n        items: table[header]!,\n        color: undefined,\n        helperText: undefined,\n        bullet: undefined,\n      }))\n\n  const headerColumnWidth = Math.max(\n    ...sections.map((section) => {\n      return Math.max(\n        ...section.header.split('\\n').map((line) => {\n          return line.length\n        }),\n      )\n    }),\n  )\n\n  return (\n    <Box flexDirection=\"column\">\n      {sections.map((section, index) => (\n        <Box key={index} marginBottom={index === sections.length - 1 ? 0 : 1} flexDirection=\"column\">\n          {section.header.length > 0 && (\n            <Box width={headerColumnWidth + 1}>\n              <Text color={section.color} bold>\n                {capitalize(section.header)}\n              </Text>\n            </Box>\n          )}\n          <Box flexGrow={1} flexDirection=\"column\" gap={1}>\n            <List margin={false} items={section.items} color={section.color} bullet={section.bullet} />\n            {section.helperText ? <Text color={section.color}>{section.helperText}</Text> : null}\n          </Box>\n        </Box>\n      ))}\n    </Box>\n  )\n}\n\nexport {InfoTable}\n"]}

package/dist/private/node/ui/components/Prompts/InfoTable.test.js

@@ -10,11 +10,13 @@ describe('InfoTable', async () => {
                 'header 2\nlonger text here': [['one item', { link: { label: 'Shopify', url: 'https://shopify.com' } }]],
             } }));
         expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
-      "Header 1:          • some
-                         • items
+      "Header 1
+      • some
+      • items
 
-      Header 2           • one item Shopify ( https://shopify.com )
-      longer text here:"
+      Header 2
+      longer text here
+      • one item Shopify ( https://shopify.com )"
     `);
     });
     test('supports an empty header value', async () => {

package/dist/private/node/ui/components/Prompts/InfoTable.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTable.test.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/InfoTable.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,sCAAsC,CAAA;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,SAAS,IACR,KAAK,EAAE;gBACL,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAC7B,4BAA4B,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,IAAI,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,qBAAqB,EAAC,EAAC,CAAC,CAAC;aACrG,GACD,CACH,CAAA;QAED,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;KAMpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,SAAS,IACR,KAAK,EAAE;gBACL,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;aACtB,GACD,CACH,CAAA;QAED,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;KAGpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {InfoTable} from './InfoTable.js'\nimport {unstyled} from '../../../../../public/node/output.js'\nimport {render} from '../../../testing/ui.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('InfoTable', async () => {\n  test('renders a horizontal table with bullet points', async () => {\n    const {lastFrame} = render(\n      <InfoTable\n        table={{\n          'header 1': ['some', 'items'],\n          'header 2\\nlonger text here': [['one item', {link: {label: 'Shopify', url: 'https://shopify.com'}}]],\n        }}\n      />,\n    )\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"Header 1:          • some\n                         • items\n\n      Header 2           • one item Shopify ( https://shopify.com )\n      longer text here:\"\n    `)\n  })\n\n  test('supports an empty header value', async () => {\n    const {lastFrame} = render(\n      <InfoTable\n        table={{\n          '': ['some', 'items'],\n        }}\n      />,\n    )\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"• some\n      • items\"\n    `)\n  })\n})\n"]}
+{"version":3,"file":"InfoTable.test.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/InfoTable.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,sCAAsC,CAAA;AAC7D,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAA;AAC7C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,SAAS,IACR,KAAK,EAAE;gBACL,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;gBAC7B,4BAA4B,EAAE,CAAC,CAAC,UAAU,EAAE,EAAC,IAAI,EAAE,EAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,qBAAqB,EAAC,EAAC,CAAC,CAAC;aACrG,GACD,CACH,CAAA;QAED,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;KAQpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CACxB,oBAAC,SAAS,IACR,KAAK,EAAE;gBACL,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;aACtB,GACD,CACH,CAAA;QAED,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;KAGpD,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {InfoTable} from './InfoTable.js'\nimport {unstyled} from '../../../../../public/node/output.js'\nimport {render} from '../../../testing/ui.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('InfoTable', async () => {\n  test('renders a horizontal table with bullet points', async () => {\n    const {lastFrame} = render(\n      <InfoTable\n        table={{\n          'header 1': ['some', 'items'],\n          'header 2\\nlonger text here': [['one item', {link: {label: 'Shopify', url: 'https://shopify.com'}}]],\n        }}\n      />,\n    )\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"Header 1\n      • some\n      • items\n\n      Header 2\n      longer text here\n      • one item Shopify ( https://shopify.com )\"\n    `)\n  })\n\n  test('supports an empty header value', async () => {\n    const {lastFrame} = render(\n      <InfoTable\n        table={{\n          '': ['some', 'items'],\n        }}\n      />,\n    )\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"• some\n      • items\"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/Prompts/PromptLayout.d.ts

@@ -0,0 +1,21 @@
+import { GitDiffProps } from './GitDiff.js';
+import { InfoMessageProps } from './InfoMessage.js';
+import { InfoTableProps } from './InfoTable.js';
+import { InlineToken, LinkToken, TokenItem } from '../TokenizedText.js';
+import { AbortSignal } from '../../../../../public/node/abort.js';
+import { PromptState } from '../../hooks/use-prompt.js';
+import { ReactElement } from 'react';
+export type Message = TokenItem<Exclude<InlineToken, LinkToken>>;
+export interface PromptLayoutProps {
+    message: Message;
+    infoTable?: InfoTableProps['table'];
+    abortSignal?: AbortSignal;
+    infoMessage?: InfoMessageProps['message'];
+    gitDiff?: GitDiffProps['gitDiff'];
+    header?: ReactElement | null;
+    state: PromptState;
+    submittedAnswerLabel?: string;
+    input: ReactElement;
+}
+declare const PromptLayout: ({ message, infoTable, abortSignal, infoMessage, gitDiff, header, state, input, submittedAnswerLabel, }: PromptLayoutProps) => ReactElement | null;
+export { PromptLayout };

package/dist/private/node/ui/components/Prompts/PromptLayout.js

@@ -0,0 +1,73 @@
+import { GitDiff } from './GitDiff.js';
+import { InfoMessage } from './InfoMessage.js';
+import { InfoTable } from './InfoTable.js';
+import { TokenizedText } from '../TokenizedText.js';
+import { messageWithPunctuation } from '../../utilities.js';
+import useAbortSignal from '../../hooks/use-abort-signal.js';
+import { PromptState } from '../../hooks/use-prompt.js';
+import React, { cloneElement, useCallback, useLayoutEffect, useState } from 'react';
+import { Box, measureElement, Text, useStdout } from 'ink';
+import figures from 'figures';
+const PromptLayout = ({ message, infoTable, abortSignal, infoMessage, gitDiff, header, state, input, submittedAnswerLabel, }) => {
+    const { stdout } = useStdout();
+    const [wrapperHeight, setWrapperHeight] = useState(0);
+    const [promptAreaHeight, setPromptAreaHeight] = useState(0);
+    const [inputFixedAreaHeight, setInputFixedAreaHeight] = useState(0);
+    const currentAvailableLines = stdout.rows - promptAreaHeight - inputFixedAreaHeight;
+    const [availableLines, setAvailableLines] = useState(currentAvailableLines);
+    const wrapperRef = useCallback((node) => {
+        if (node !== null) {
+            const { height } = measureElement(node);
+            if (wrapperHeight !== height) {
+                setWrapperHeight(height);
+            }
+        }
+    }, [wrapperHeight]);
+    const promptAreaRef = useCallback((node) => {
+        if (node !== null) {
+            const { height } = measureElement(node);
+            setPromptAreaHeight(height);
+        }
+    }, []);
+    const inputFixedAreaRef = useCallback((node) => {
+        if (node !== null) {
+            const { height } = measureElement(node);
+            // + 3 accounts for the margins inside the input elements and the last empty line of the terminal
+            setInputFixedAreaHeight(height + 3);
+        }
+    }, []);
+    const inputComponent = cloneElement(input, { availableLines, inputFixedAreaRef });
+    useLayoutEffect(() => {
+        function onResize() {
+            const newAvailableLines = stdout.rows - promptAreaHeight - inputFixedAreaHeight;
+            if (newAvailableLines !== availableLines) {
+                setAvailableLines(newAvailableLines);
+            }
+        }
+        onResize();
+        stdout.on('resize', onResize);
+        return () => {
+            stdout.off('resize', onResize);
+        };
+    }, [wrapperHeight, promptAreaHeight, stdout, availableLines, inputFixedAreaHeight]);
+    const { isAborted } = useAbortSignal(abortSignal);
+    // Object.keys on an array returns the indices as strings
+    const showInfoTable = infoTable && Object.keys(infoTable).length > 0;
+    return isAborted ? null : (React.createElement(Box, { flexDirection: "column", marginBottom: 1, ref: wrapperRef },
+        React.createElement(Box, { ref: promptAreaRef, flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Box, { marginRight: 2 },
+                    React.createElement(Text, null, "?")),
+                React.createElement(TokenizedText, { item: messageWithPunctuation(message) }),
+                header),
+            (showInfoTable || infoMessage || gitDiff) && state !== PromptState.Submitted ? (React.createElement(Box, { marginTop: 1, marginLeft: 3, paddingLeft: 2, borderStyle: "bold", borderLeft: true, borderRight: false, borderTop: false, borderBottom: false, flexDirection: "column", gap: 1 },
+                infoMessage ? React.createElement(InfoMessage, { message: infoMessage }) : null,
+                showInfoTable ? React.createElement(InfoTable, { table: infoTable }) : null,
+                gitDiff ? React.createElement(GitDiff, { gitDiff: gitDiff }) : null)) : null),
+        state === PromptState.Submitted && submittedAnswerLabel ? (React.createElement(Box, null,
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, { color: "cyan" }, figures.tick)),
+            React.createElement(Text, { color: "cyan" }, submittedAnswerLabel))) : (React.createElement(Box, { marginTop: 1 }, inputComponent))));
+};
+export { PromptLayout };
+//# sourceMappingURL=PromptLayout.js.map

package/dist/private/node/ui/components/Prompts/PromptLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptLayout.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/PromptLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import {GitDiff, GitDiffProps} from './GitDiff.js'\nimport {InfoMessage, InfoMessageProps} from './InfoMessage.js'\nimport {InfoTable, InfoTableProps} from './InfoTable.js'\nimport {InlineToken, LinkToken, TokenItem, TokenizedText} from '../TokenizedText.js'\nimport {messageWithPunctuation} from '../../utilities.js'\nimport {AbortSignal} from '../../../../../public/node/abort.js'\nimport useAbortSignal from '../../hooks/use-abort-signal.js'\nimport {PromptState} from '../../hooks/use-prompt.js'\nimport React, {ReactElement, cloneElement, useCallback, useLayoutEffect, useState} from 'react'\nimport {Box, measureElement, Text, useStdout} from 'ink'\nimport figures from 'figures'\n\nexport type Message = TokenItem<Exclude<InlineToken, LinkToken>>\n\nexport interface PromptLayoutProps {\n  message: Message\n  infoTable?: InfoTableProps['table']\n  abortSignal?: AbortSignal\n  infoMessage?: InfoMessageProps['message']\n  gitDiff?: GitDiffProps['gitDiff']\n  header?: ReactElement | null\n  state: PromptState\n  submittedAnswerLabel?: string\n  input: ReactElement\n}\n\nconst PromptLayout = ({\n  message,\n  infoTable,\n  abortSignal,\n  infoMessage,\n  gitDiff,\n  header,\n  state,\n  input,\n  submittedAnswerLabel,\n}: PromptLayoutProps): ReactElement | null => {\n  const {stdout} = useStdout()\n  const [wrapperHeight, setWrapperHeight] = useState(0)\n  const [promptAreaHeight, setPromptAreaHeight] = useState(0)\n  const [inputFixedAreaHeight, setInputFixedAreaHeight] = useState(0)\n  const currentAvailableLines = stdout.rows - promptAreaHeight - inputFixedAreaHeight\n  const [availableLines, setAvailableLines] = useState(currentAvailableLines)\n\n  const wrapperRef = useCallback(\n    (node) => {\n      if (node !== null) {\n        const {height} = measureElement(node)\n        if (wrapperHeight !== height) {\n          setWrapperHeight(height)\n        }\n      }\n    },\n    [wrapperHeight],\n  )\n\n  const promptAreaRef = useCallback((node) => {\n    if (node !== null) {\n      const {height} = measureElement(node)\n      setPromptAreaHeight(height)\n    }\n  }, [])\n\n  const inputFixedAreaRef = useCallback((node) => {\n    if (node !== null) {\n      const {height} = measureElement(node)\n      // + 3 accounts for the margins inside the input elements and the last empty line of the terminal\n      setInputFixedAreaHeight(height + 3)\n    }\n  }, [])\n\n  const inputComponent = cloneElement(input, {availableLines, inputFixedAreaRef})\n\n  useLayoutEffect(() => {\n    function onResize() {\n      const newAvailableLines = stdout.rows - promptAreaHeight - inputFixedAreaHeight\n      if (newAvailableLines !== availableLines) {\n        setAvailableLines(newAvailableLines)\n      }\n    }\n\n    onResize()\n\n    stdout.on('resize', onResize)\n    return () => {\n      stdout.off('resize', onResize)\n    }\n  }, [wrapperHeight, promptAreaHeight, stdout, availableLines, inputFixedAreaHeight])\n\n  const {isAborted} = useAbortSignal(abortSignal)\n  // Object.keys on an array returns the indices as strings\n  const showInfoTable = infoTable && Object.keys(infoTable).length > 0\n\n  return isAborted ? null : (\n    <Box flexDirection=\"column\" marginBottom={1} ref={wrapperRef}>\n      <Box ref={promptAreaRef} flexDirection=\"column\">\n        <Box>\n          <Box marginRight={2}>\n            <Text>?</Text>\n          </Box>\n          <TokenizedText item={messageWithPunctuation(message)} />\n          {header}\n        </Box>\n\n        {(showInfoTable || infoMessage || gitDiff) && state !== PromptState.Submitted ? (\n          <Box\n            marginTop={1}\n            marginLeft={3}\n            paddingLeft={2}\n            borderStyle=\"bold\"\n            borderLeft\n            borderRight={false}\n            borderTop={false}\n            borderBottom={false}\n            flexDirection=\"column\"\n            gap={1}\n          >\n            {infoMessage ? <InfoMessage message={infoMessage} /> : null}\n            {showInfoTable ? <InfoTable table={infoTable} /> : null}\n            {gitDiff ? <GitDiff gitDiff={gitDiff} /> : null}\n          </Box>\n        ) : null}\n      </Box>\n\n      {state === PromptState.Submitted && submittedAnswerLabel ? (\n        <Box>\n          <Box marginRight={2}>\n            <Text color=\"cyan\">{figures.tick}</Text>\n          </Box>\n\n          <Text color=\"cyan\">{submittedAnswerLabel}</Text>\n        </Box>\n      ) : (\n        <Box marginTop={1}>{inputComponent}</Box>\n      )}\n    </Box>\n  )\n}\n\nexport {PromptLayout}\n"]}

package/dist/private/node/ui/components/Prompts/PromptLayout.test.d.ts

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

package/dist/private/node/ui/components/Prompts/PromptLayout.test.js

@@ -0,0 +1,129 @@
+import { PromptLayout } from './PromptLayout.js';
+import { render } from '../../../testing/ui.js';
+import { PromptState } from '../../hooks/use-prompt.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+import { Box, Text } from 'ink';
+describe('PromptLayout', async () => {
+    test("doesn't add unnecessary margins when infoTable is an empty array", async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const renderInstance = render(React.createElement(PromptLayout, { message: "Associate your project with the org Castile Ventures?", infoTable: [], state: PromptState.Idle, input: React.createElement(Box, { flexDirection: "column" }, items.map((item) => (React.createElement(Text, { key: item.value }, item.label)))) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+      first
+      second
+      third
+      fourth
+      "
+    `);
+    });
+    test("doesn't add unnecessary margins when infoTable is an empty object", async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const renderInstance = render(React.createElement(PromptLayout, { message: "Associate your project with the org Castile Ventures?", infoTable: {}, state: PromptState.Idle, input: React.createElement(Box, { flexDirection: "column" }, items.map((item) => (React.createElement(Text, { key: item.value }, item.label)))) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+      first
+      second
+      third
+      fourth
+      "
+    `);
+    });
+    test("doesn't add unnecessary margins when infoTable is empty and there are other elements in the header", async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const gitDiff = {
+            baselineContent: 'hello',
+            updatedContent: 'hello',
+        };
+        const infoMessage = {
+            title: { text: 'some title' },
+            body: 'some body',
+        };
+        const renderInstance = render(React.createElement(PromptLayout, { message: "Associate your project with the org Castile Ventures?", infoTable: [], infoMessage: infoMessage, gitDiff: gitDiff, state: PromptState.Idle, input: React.createElement(Box, { flexDirection: "column" }, items.map((item) => (React.createElement(Text, { key: item.value }, item.label)))) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+         ┃  some title
+         ┃
+         ┃  some body
+         ┃
+         ┃  No changes.
+
+      first
+      second
+      third
+      fourth
+      "
+    `);
+    });
+    test('can have all elements visible in the header at the same time', async () => {
+        const items = [
+            { label: 'first', value: 'first' },
+            { label: 'second', value: 'second' },
+            { label: 'third', value: 'third' },
+            { label: 'fourth', value: 'fourth' },
+        ];
+        const gitDiff = {
+            baselineContent: 'hello',
+            updatedContent: 'hello',
+        };
+        const infoMessage = {
+            title: { text: 'some title' },
+            body: 'some body',
+        };
+        const infoTable = {
+            header1: ['item 1', 'item 2', 'item 3'],
+            header2: ['item 4', 'item 5', 'item 6'],
+            header3: ['item 7', 'item 8', 'item 9'],
+        };
+        const renderInstance = render(React.createElement(PromptLayout, { message: "Associate your project with the org Castile Ventures?", infoTable: infoTable, infoMessage: infoMessage, gitDiff: gitDiff, state: PromptState.Idle, input: React.createElement(Box, { flexDirection: "column" }, items.map((item) => (React.createElement(Text, { key: item.value }, item.label)))) }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+         ┃  some title
+         ┃
+         ┃  some body
+         ┃
+         ┃  Header1
+         ┃  • item 1
+         ┃  • item 2
+         ┃  • item 3
+         ┃
+         ┃  Header2
+         ┃  • item 4
+         ┃  • item 5
+         ┃  • item 6
+         ┃
+         ┃  Header3
+         ┃  • item 7
+         ┃  • item 8
+         ┃  • item 9
+         ┃
+         ┃  No changes.
+
+      first
+      second
+      third
+      fourth
+      "
+    `);
+    });
+});
+//# sourceMappingURL=PromptLayout.test.js.map

package/dist/private/node/ui/components/Prompts/PromptLayout.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptLayout.test.js","sourceRoot":"","sources":["../../../../../../src/private/node/ui/components/Prompts/PromptLayout.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import {PromptLayout} from './PromptLayout.js'\nimport {render} from '../../../testing/ui.js'\nimport {PromptState} from '../../hooks/use-prompt.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\nimport {Box, Text} from 'ink'\n\ndescribe('PromptLayout', async () => {\n  test(\"doesn't add unnecessary margins when infoTable is an empty array\", async () => {\n    const items = [\n      {label: 'first', value: 'first'},\n      {label: 'second', value: 'second'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n    ]\n\n    const renderInstance = render(\n      <PromptLayout\n        message=\"Associate your project with the org Castile Ventures?\"\n        infoTable={[]}\n        state={PromptState.Idle}\n        input={\n          <Box flexDirection=\"column\">\n            {items.map((item) => (\n              <Text key={item.value}>{item.label}</Text>\n            ))}\n          </Box>\n        }\n      />,\n    )\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Associate your project with the org Castile Ventures?\n\n      first\n      second\n      third\n      fourth\n      \"\n    `)\n  })\n\n  test(\"doesn't add unnecessary margins when infoTable is an empty object\", async () => {\n    const items = [\n      {label: 'first', value: 'first'},\n      {label: 'second', value: 'second'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n    ]\n\n    const renderInstance = render(\n      <PromptLayout\n        message=\"Associate your project with the org Castile Ventures?\"\n        infoTable={{}}\n        state={PromptState.Idle}\n        input={\n          <Box flexDirection=\"column\">\n            {items.map((item) => (\n              <Text key={item.value}>{item.label}</Text>\n            ))}\n          </Box>\n        }\n      />,\n    )\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Associate your project with the org Castile Ventures?\n\n      first\n      second\n      third\n      fourth\n      \"\n    `)\n  })\n\n  test(\"doesn't add unnecessary margins when infoTable is empty and there are other elements in the header\", async () => {\n    const items = [\n      {label: 'first', value: 'first'},\n      {label: 'second', value: 'second'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n    ]\n\n    const gitDiff = {\n      baselineContent: 'hello',\n      updatedContent: 'hello',\n    }\n\n    const infoMessage = {\n      title: {text: 'some title'},\n      body: 'some body',\n    }\n\n    const renderInstance = render(\n      <PromptLayout\n        message=\"Associate your project with the org Castile Ventures?\"\n        infoTable={[]}\n        infoMessage={infoMessage}\n        gitDiff={gitDiff}\n        state={PromptState.Idle}\n        input={\n          <Box flexDirection=\"column\">\n            {items.map((item) => (\n              <Text key={item.value}>{item.label}</Text>\n            ))}\n          </Box>\n        }\n      />,\n    )\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Associate your project with the org Castile Ventures?\n\n         ┃  some title\n         ┃\n         ┃  some body\n         ┃\n         ┃  No changes.\n\n      first\n      second\n      third\n      fourth\n      \"\n    `)\n  })\n\n  test('can have all elements visible in the header at the same time', async () => {\n    const items = [\n      {label: 'first', value: 'first'},\n      {label: 'second', value: 'second'},\n      {label: 'third', value: 'third'},\n      {label: 'fourth', value: 'fourth'},\n    ]\n\n    const gitDiff = {\n      baselineContent: 'hello',\n      updatedContent: 'hello',\n    }\n\n    const infoMessage = {\n      title: {text: 'some title'},\n      body: 'some body',\n    }\n\n    const infoTable = {\n      header1: ['item 1', 'item 2', 'item 3'],\n      header2: ['item 4', 'item 5', 'item 6'],\n      header3: ['item 7', 'item 8', 'item 9'],\n    }\n\n    const renderInstance = render(\n      <PromptLayout\n        message=\"Associate your project with the org Castile Ventures?\"\n        infoTable={infoTable}\n        infoMessage={infoMessage}\n        gitDiff={gitDiff}\n        state={PromptState.Idle}\n        input={\n          <Box flexDirection=\"column\">\n            {items.map((item) => (\n              <Text key={item.value}>{item.label}</Text>\n            ))}\n          </Box>\n        }\n      />,\n    )\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Associate your project with the org Castile Ventures?\n\n         ┃  some title\n         ┃\n         ┃  some body\n         ┃\n         ┃  \u001b[1mHeader1\u001b[22m\n         ┃  • item 1\n         ┃  • item 2\n         ┃  • item 3\n         ┃\n         ┃  \u001b[1mHeader2\u001b[22m\n         ┃  • item 4\n         ┃  • item 5\n         ┃  • item 6\n         ┃\n         ┃  \u001b[1mHeader3\u001b[22m\n         ┃  • item 7\n         ┃  • item 8\n         ┃  • item 9\n         ┃\n         ┃  No changes.\n\n      first\n      second\n      third\n      fourth\n      \"\n    `)\n  })\n})\n"]}

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

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+export interface ScrollbarProps {
+    containerHeight: number;
+    visibleListSectionLength: number;
+    fullListLength: number;
+    visibleFromIndex: number;
+    noColor?: boolean;
+}
+declare const Scrollbar: FunctionComponent<ScrollbarProps>;
+export { Scrollbar };

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

@@ -0,0 +1,44 @@
+import { shouldDisplayColors } from '../../../../public/node/output.js';
+import { Box, Text } from 'ink';
+import React from 'react';
+const BACKGROUND_CHAR = '│';
+const SCROLLBOX_CHAR = '║';
+const Scrollbar = ({ containerHeight, visibleListSectionLength, fullListLength, visibleFromIndex, noColor = !shouldDisplayColors(), }) => {
+    const displayArrows = containerHeight >= 4 && noColor;
+    const visibleToIndex = visibleFromIndex + visibleListSectionLength - 1;
+    // Leave 2 rows for top/bottom arrows when there is vertical room for them.
+    const fullHeight = displayArrows ? containerHeight - 2 : containerHeight;
+    const scrollboxHeight = Math.min(fullHeight - 1, Math.ceil(Math.min(1, visibleListSectionLength / fullListLength) * fullHeight));
+    let topBuffer;
+    // Ensure it scrolls all the way to the bottom when we hit the bottom
+    if (visibleToIndex >= fullListLength - 1) {
+        topBuffer = fullHeight - scrollboxHeight;
+    }
+    else {
+        // This is the actual number of rows available for the scrollbar to go up and down
+        const scrollingLength = fullHeight - scrollboxHeight;
+        // This is the number of times the screen itself can scroll down
+        const scrollableIncrements = fullListLength - visibleListSectionLength;
+        topBuffer = Math.max(
+        // Never go negative, that causes errors!
+        0, Math.min(
+        // Never have more buffer than filling in all spaces above the scrollbox
+        fullHeight - scrollboxHeight, Math.round((visibleFromIndex / scrollableIncrements) * scrollingLength)));
+    }
+    const bottomBuffer = fullHeight - scrollboxHeight - topBuffer;
+    const backgroundChar = noColor ? BACKGROUND_CHAR : ' ';
+    const scrollboxChar = noColor ? SCROLLBOX_CHAR : ' ';
+    const bgColor = noColor ? undefined : 'gray';
+    const scrollboxColor = noColor ? undefined : 'cyan';
+    return (React.createElement(Box, { flexDirection: "column" },
+        displayArrows ? React.createElement(Text, null, "\u25B3") : null,
+        React.createElement(Box, { width: 1 },
+            React.createElement(Text, { backgroundColor: bgColor }, backgroundChar.repeat(topBuffer))),
+        React.createElement(Box, { width: 1 },
+            React.createElement(Text, { backgroundColor: scrollboxColor }, scrollboxChar.repeat(scrollboxHeight))),
+        React.createElement(Box, { width: 1 },
+            React.createElement(Text, { backgroundColor: bgColor }, backgroundChar.repeat(bottomBuffer))),
+        displayArrows ? React.createElement(Text, null, "\u25BD") : null));
+};
+export { Scrollbar };
+//# sourceMappingURL=Scrollbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Scrollbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {shouldDisplayColors} from '../../../../public/node/output.js'\nimport {Box, Text} from 'ink'\nimport React, {FunctionComponent} from 'react'\n\nexport interface ScrollbarProps {\n  containerHeight: number\n  visibleListSectionLength: number\n  fullListLength: number\n  visibleFromIndex: number\n  noColor?: boolean\n}\n\nconst BACKGROUND_CHAR = '│'\nconst SCROLLBOX_CHAR = '║'\n\nconst Scrollbar: FunctionComponent<ScrollbarProps> = ({\n  containerHeight,\n  visibleListSectionLength,\n  fullListLength,\n  visibleFromIndex,\n  noColor = !shouldDisplayColors(),\n}) => {\n  const displayArrows = containerHeight >= 4 && noColor\n  const visibleToIndex = visibleFromIndex + visibleListSectionLength - 1\n\n  // Leave 2 rows for top/bottom arrows when there is vertical room for them.\n  const fullHeight = displayArrows ? containerHeight - 2 : containerHeight\n  const scrollboxHeight = Math.min(\n    fullHeight - 1,\n    Math.ceil(Math.min(1, visibleListSectionLength / fullListLength) * fullHeight),\n  )\n\n  let topBuffer: number\n  // Ensure it scrolls all the way to the bottom when we hit the bottom\n  if (visibleToIndex >= fullListLength - 1) {\n    topBuffer = fullHeight - scrollboxHeight\n  } else {\n    // This is the actual number of rows available for the scrollbar to go up and down\n    const scrollingLength = fullHeight - scrollboxHeight\n    // This is the number of times the screen itself can scroll down\n    const scrollableIncrements = fullListLength - visibleListSectionLength\n\n    topBuffer = Math.max(\n      // Never go negative, that causes errors!\n      0,\n      Math.min(\n        // Never have more buffer than filling in all spaces above the scrollbox\n        fullHeight - scrollboxHeight,\n        Math.round((visibleFromIndex / scrollableIncrements) * scrollingLength),\n      ),\n    )\n  }\n  const bottomBuffer = fullHeight - scrollboxHeight - topBuffer\n\n  const backgroundChar = noColor ? BACKGROUND_CHAR : ' '\n  const scrollboxChar = noColor ? SCROLLBOX_CHAR : ' '\n  const bgColor = noColor ? undefined : 'gray'\n  const scrollboxColor = noColor ? undefined : 'cyan'\n\n  return (\n    <Box flexDirection=\"column\">\n      {displayArrows ? <Text>△</Text> : null}\n\n      <Box width={1}>\n        <Text backgroundColor={bgColor}>{backgroundChar.repeat(topBuffer)}</Text>\n      </Box>\n      <Box width={1}>\n        <Text backgroundColor={scrollboxColor}>{scrollboxChar.repeat(scrollboxHeight)}</Text>\n      </Box>\n      <Box width={1}>\n        <Text backgroundColor={bgColor}>{backgroundChar.repeat(bottomBuffer)}</Text>\n      </Box>\n\n      {displayArrows ? <Text>▽</Text> : null}\n    </Box>\n  )\n}\n\nexport {Scrollbar}\n"]}

package/dist/private/node/ui/components/Scrollbar.test.d.ts

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

package/dist/private/node/ui/components/Scrollbar.test.js

@@ -0,0 +1,96 @@
+import { Scrollbar } from './Scrollbar.js';
+import { render } from '../../testing/ui.js';
+import { describe, expect, test } from 'vitest';
+import React from 'react';
+describe('Scrollbar', async () => {
+    test('renders correctly when at the top of the list', async () => {
+        const options = {
+            containerHeight: 10,
+            visibleListSectionLength: 10,
+            fullListLength: 50,
+            visibleFromIndex: 0,
+        };
+        const { lastFrame } = render(React.createElement(Scrollbar, { ...options }));
+        // First 2 are colored in
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "\u001b[46m \u001b[49m
+      \u001b[46m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m"
+    `);
+    });
+    test('renders correctly when in the middle of the list', async () => {
+        const options = {
+            containerHeight: 10,
+            visibleListSectionLength: 10,
+            fullListLength: 50,
+            visibleFromIndex: 20,
+        };
+        const { lastFrame } = render(React.createElement(Scrollbar, { ...options }));
+        // Scrollbar is in the middle
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "\u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[46m \u001b[49m
+      \u001b[46m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m"
+    `);
+    });
+    test('renders correctly when at the bottom of the list', async () => {
+        const options = {
+            containerHeight: 10,
+            visibleListSectionLength: 10,
+            fullListLength: 50,
+            visibleFromIndex: 40,
+        };
+        const { lastFrame } = render(React.createElement(Scrollbar, { ...options }));
+        // Last 2 are colored in
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "\u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[100m \u001b[49m
+      \u001b[46m \u001b[49m
+      \u001b[46m \u001b[49m"
+    `);
+    });
+    test('renders correctly in the middle of the list in no-color mode', async () => {
+        const options = {
+            containerHeight: 10,
+            visibleListSectionLength: 10,
+            fullListLength: 50,
+            visibleFromIndex: 20,
+            noColor: true,
+        };
+        const { lastFrame } = render(React.createElement(Scrollbar, { ...options }));
+        // Scrollbar is in the middle
+        expect(lastFrame()).toMatchInlineSnapshot(`
+      "△
+      │
+      │
+      │
+      ║
+      ║
+      │
+      │
+      │
+      ▽"
+    `);
+    });
+});
+//# sourceMappingURL=Scrollbar.test.js.map

package/dist/private/node/ui/components/Scrollbar.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Scrollbar.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,EAAE;IAC/B,IAAI,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,EAAE;YACnB,wBAAwB,EAAE,EAAE;YAC5B,cAAc,EAAE,EAAE;YAClB,gBAAgB,EAAE,CAAC;SACpB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,OAAK,OAAO,GAAI,CAAC,CAAA;QAEtD,yBAAyB;QACzB,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;KAWzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,EAAE;YACnB,wBAAwB,EAAE,EAAE;YAC5B,cAAc,EAAE,EAAE;YAClB,gBAAgB,EAAE,EAAE;SACrB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,OAAK,OAAO,GAAI,CAAC,CAAA;QAEtD,6BAA6B;QAC7B,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;KAWzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAClE,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,EAAE;YACnB,wBAAwB,EAAE,EAAE;YAC5B,cAAc,EAAE,EAAE;YAClB,gBAAgB,EAAE,EAAE;SACrB,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,OAAK,OAAO,GAAI,CAAC,CAAA;QAEtD,wBAAwB;QACxB,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;KAWzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8DAA8D,EAAE,KAAK,IAAI,EAAE;QAC9E,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,EAAE;YACnB,wBAAwB,EAAE,EAAE;YAC5B,cAAc,EAAE,EAAE;YAClB,gBAAgB,EAAE,EAAE;YACpB,OAAO,EAAE,IAAI;SACd,CAAA;QAED,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,OAAK,OAAO,GAAI,CAAC,CAAA;QACtD,6BAA6B;QAC7B,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC;;;;;;;;;;;KAWzC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Scrollbar} from './Scrollbar.js'\nimport {render} from '../../testing/ui.js'\nimport {describe, expect, test} from 'vitest'\nimport React from 'react'\n\ndescribe('Scrollbar', async () => {\n  test('renders correctly when at the top of the list', async () => {\n    const options = {\n      containerHeight: 10,\n      visibleListSectionLength: 10,\n      fullListLength: 50,\n      visibleFromIndex: 0,\n    }\n\n    const {lastFrame} = render(<Scrollbar {...options} />)\n\n    // First 2 are colored in\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\\u001b[46m \\u001b[49m\n      \\u001b[46m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\"\n    `)\n  })\n\n  test('renders correctly when in the middle of the list', async () => {\n    const options = {\n      containerHeight: 10,\n      visibleListSectionLength: 10,\n      fullListLength: 50,\n      visibleFromIndex: 20,\n    }\n\n    const {lastFrame} = render(<Scrollbar {...options} />)\n\n    // Scrollbar is in the middle\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[46m \\u001b[49m\n      \\u001b[46m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\"\n    `)\n  })\n\n  test('renders correctly when at the bottom of the list', async () => {\n    const options = {\n      containerHeight: 10,\n      visibleListSectionLength: 10,\n      fullListLength: 50,\n      visibleFromIndex: 40,\n    }\n\n    const {lastFrame} = render(<Scrollbar {...options} />)\n\n    // Last 2 are colored in\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"\\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[100m \\u001b[49m\n      \\u001b[46m \\u001b[49m\n      \\u001b[46m \\u001b[49m\"\n    `)\n  })\n\n  test('renders correctly in the middle of the list in no-color mode', async () => {\n    const options = {\n      containerHeight: 10,\n      visibleListSectionLength: 10,\n      fullListLength: 50,\n      visibleFromIndex: 20,\n      noColor: true,\n    }\n\n    const {lastFrame} = render(<Scrollbar {...options} />)\n    // Scrollbar is in the middle\n    expect(lastFrame()).toMatchInlineSnapshot(`\n      \"△\n      │\n      │\n      │\n      ║\n      ║\n      │\n      │\n      │\n      ▽\"\n    `)\n  })\n})\n"]}

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

@@ -5,6 +5,7 @@ declare module 'react' {
 }
 export interface SelectInputProps<T> {
     items: Item<T>[];
+    initialItems?: Item<T>[];
     onChange?: (item: Item<T> | undefined) => void;
     enableShortcuts?: boolean;
     focus?: boolean;
@@ -15,10 +16,9 @@ export interface SelectInputProps<T> {
     errorMessage?: string;
     hasMorePages?: boolean;
     morePagesMessage?: string;
-    infoMessage?: string;
-    limit?: number;
-    submitWithShortcuts?: boolean;
+    availableLines?: number;
     onSubmit?: (item: Item<T>) => void;
+    inputFixedAreaRef?: React.RefObject<DOMElement>;
 }
 export interface Item<T> {
     label: string;
@@ -28,7 +28,4 @@ export interface Item<T> {
     helperText?: string;
     disabled?: boolean;
 }
-export interface ItemWithKey<T> extends Item<T> {
-    key: string;
-}
 export declare const SelectInput: <T>(props: SelectInputProps<T> & React.RefAttributes<DOMElement>) => JSX.Element | null;