dappbooster 3.1.4 → 3.2.0

package/dist/app.d.ts

@@ -1,2 +1,7 @@
-declare const App: () => import("react/jsx-runtime").JSX.Element;
+import { type FC } from 'react';
+import type { Stack } from './constants/config.js';
+interface Props {
+    preselectedStack?: Stack;
+}
+declare const App: FC<Props>;
 export default App;

package/dist/app.js

@@ -3,47 +3,87 @@ import { Box } from 'ink';
 import { useCallback, useMemo, useState } from 'react';
 import MainTitle from './components/MainTitle.js';
 import CloneRepo from './components/steps/CloneRepo/CloneRepo.js';
+import Confirmation from './components/steps/Confirmation.js';
 import FileCleanup from './components/steps/FileCleanup.js';
 import Install from './components/steps/Install/Install.js';
 import InstallationMode from './components/steps/InstallationMode.js';
 import OptionalPackages from './components/steps/OptionalPackages.js';
 import PostInstall from './components/steps/PostInstall.js';
 import ProjectName from './components/steps/ProjectName.js';
-import { canShowStep } from './utils/utils.js';
-const App = () => {
+import StackSelection from './components/steps/StackSelection.js';
+import { canShowStep, describeInstallPlan } from './utils/utils.js';
+const App = ({ preselectedStack }) => {
+    const [stack, setStack] = useState(preselectedStack);
     const [projectName, setProjectName] = useState('');
     const [currentStep, setCurrentStep] = useState(1);
     const [setupType, setSetupType] = useState();
     const [selectedFeatures, setSelectedFeatures] = useState();
+    // Bumped when the user cancels at the confirmation step; re-keys every step so they re-mount
+    // fresh for a clean re-run of the wizard.
+    const [attempt, setAttempt] = useState(0);
     const finishStep = useCallback(() => setCurrentStep((prevStep) => prevStep + 1), []);
+    const onSelectStack = useCallback((value) => setStack(value), []);
     const onSelectSetupType = useCallback((item) => setSetupType(item), []);
     const onSelectSelectedFeatures = useCallback((selectedItems) => setSelectedFeatures([...selectedItems]), []);
+    // Confirmation "No": discard the answers and return to the first question. No disk work has
+    // happened yet, so this is a clean restart.
+    const restart = useCallback(() => {
+        setProjectName('');
+        setSetupType(undefined);
+        setSelectedFeatures(undefined);
+        setStack(preselectedStack);
+        setCurrentStep(1);
+        setAttempt((prev) => prev + 1);
+    }, [preselectedStack]);
     const skipFeatures = setupType?.value === 'full';
-    const steps = useMemo(() => [
-        _jsx(ProjectName, { onCompletion: finishStep, onSubmit: setProjectName, projectName: projectName }, 1),
-        _jsx(CloneRepo, { onCompletion: finishStep, projectName: projectName }, 2),
-        _jsx(InstallationMode, { onCompletion: finishStep, onSelect: onSelectSetupType }, 3),
-        _jsx(OptionalPackages, { onCompletion: finishStep, onSubmit: onSelectSelectedFeatures, skip: skipFeatures }, 4),
-        _jsx(Install, { installationConfig: {
+    const mode = setupType?.value ?? 'full';
+    const planFeatures = selectedFeatures?.map((item) => item.value) ?? [];
+    const planSummary = stack === undefined ? '' : describeInstallPlan(stack, projectName, mode, planFeatures);
+    const steps = useMemo(() => {
+        // Questions first (no disk writes), operations last. This way an interrupt while answering
+        // leaves nothing behind, and all cloning/installing happens only after the confirmation.
+        const orderedSteps = [
+            _jsx(ProjectName, { onCompletion: finishStep, onSubmit: setProjectName }, `project-name-${attempt}`),
+        ];
+        if (!preselectedStack) {
+            orderedSteps.push(_jsx(StackSelection, { onCompletion: finishStep, onSelect: onSelectStack }, `stack-selection-${attempt}`));
+        }
+        if (stack === undefined) {
+            return orderedSteps;
+        }
+        // --- remaining questions (need the stack) ---
+        orderedSteps.push(_jsx(InstallationMode, { onCompletion: finishStep, onSelect: onSelectSetupType }, `installation-mode-${attempt}`));
+        orderedSteps.push(_jsx(OptionalPackages, { stack: stack, onCompletion: finishStep, onSubmit: onSelectSelectedFeatures, skip: skipFeatures }, `optional-packages-${attempt}`));
+        orderedSteps.push(_jsx(Confirmation, { summary: planSummary, onConfirm: finishStep, onCancel: restart }, `confirmation-${attempt}`));
+        // --- operations (disk writes) ---
+        orderedSteps.push(_jsx(CloneRepo, { stack: stack, onCompletion: finishStep, projectName: projectName }, `clone-repo-${attempt}`));
+        orderedSteps.push(_jsx(Install, { stack: stack, installationConfig: {
                 installationType: setupType?.value,
                 selectedFeatures: selectedFeatures,
-            }, onCompletion: finishStep, projectName: projectName }, 5),
-        _jsx(FileCleanup, { installationConfig: {
+            }, onCompletion: finishStep, projectName: projectName }, `install-${attempt}`));
+        orderedSteps.push(_jsx(FileCleanup, { stack: stack, installationConfig: {
                 installationType: setupType?.value,
                 selectedFeatures: selectedFeatures,
-            }, onCompletion: finishStep, projectName: projectName }, 6),
-        _jsx(PostInstall, { projectName: projectName, installationConfig: {
+            }, onCompletion: finishStep, projectName: projectName }, `file-cleanup-${attempt}`));
+        orderedSteps.push(_jsx(PostInstall, { stack: stack, projectName: projectName, installationConfig: {
                 installationType: setupType?.value,
                 selectedFeatures: selectedFeatures,
-            } }, 7),
-    ], [
+            } }, `post-install-${attempt}`));
+        return orderedSteps;
+    }, [
         finishStep,
+        onSelectStack,
         onSelectSelectedFeatures,
         setupType?.value,
         selectedFeatures,
         onSelectSetupType,
         projectName,
         skipFeatures,
+        stack,
+        preselectedStack,
+        attempt,
+        planSummary,
+        restart,
     ]);
     return (_jsxs(Box, { flexDirection: 'column', rowGap: 1, width: 80, children: [_jsx(MainTitle, {}), steps.map((item, index) => canShowStep(currentStep, index + 1) && item)] }));
 };

package/dist/cli.js

@@ -2,23 +2,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import process from 'node:process';
 import meow from 'meow';
+import { isStackName, stackNames } from './constants/config.js';
 import { getInfoOutput } from './info.js';
 import { runNonInteractive } from './nonInteractive.js';
 const cli = meow(`
   Usage
     $ dappbooster [options]
 
-  Options
+  Stack selection (mutually exclusive)
+    --canton                 Use the Canton stack (Daml, Carpincho wallet, off-chain services)
+    --evm                    Use the EVM stack (Ethereum, Polygon, Base, …) [default]
+    --stack <evm|canton>     Explicit stack name (alternative to --canton/--evm)
+
+  Common options
     --name <string>          Project name (alphanumeric, underscores)
     --mode <full|custom>     Installation mode
-    --features <list>        Comma-separated features (with --mode=custom):
-                               demo       Component demos and example pages
-                               subgraph   TheGraph subgraph integration (requires API key)
-                               typedoc    TypeDoc API documentation generation
-                               vocs       Vocs documentation site
-                               husky      Git hooks with Husky, lint-staged, commitlint
+    --features <list>        Comma-separated features (with --mode=custom)
+                               EVM:
+                                 demo       Component demos and example pages
+                                 subgraph   TheGraph subgraph integration
+                                 typedoc    TypeDoc API documentation
+                                 vocs       Vocs documentation site
+                                 husky      Git hooks (Husky, lint-staged, commitlint)
+                               Canton:
+                                 counter    Counter demo dapp
+                                 e2e        Playwright end-to-end tests (requires counter)
+                                 carpincho  Carpincho browser-extension wallet
+                                 llm        LLM and agent artifacts (.claude, AGENTS.md, …)
+                               Dependencies are auto-resolved: requesting e2e
+                               also pulls in counter.
     --non-interactive, --ni  Run without prompts (auto-enabled when not a TTY)
-    --info                   Output feature metadata as JSON
+    --info                   Output feature metadata as JSON (filter with --stack)
     --help                   Show this help
     --version                Show version
 
@@ -28,24 +42,38 @@ const cli = meow(`
     Use --ni to force non-interactive mode in a TTY environment.
 
     AI agents: non-interactive mode activates automatically. Run --info
-    to discover available features, then pass --name and --mode flags.
+    to discover available stacks and features (including each feature's
+    "requires"), then pass --canton or --evm plus --name and --mode flags.
+    Feature dependencies are resolved automatically, so the returned
+    "features" list may include extras pulled in by your selection.
     Output is JSON for easy parsing.
 
   Examples
-    Interactive:
+    Interactive (prompts for stack and options):
       $ dappbooster
 
-    Full install (non-interactive):
-      $ dappbooster --ni --name my_dapp --mode full
+    Canton stack, full install (non-interactive):
+      $ dappbooster --canton --ni --name my_dapp --mode full
 
-    Custom install with specific features:
-      $ dappbooster --ni --name my_dapp --mode custom --features demo,subgraph
+    EVM stack, custom install:
+      $ dappbooster --evm --ni --name my_dapp --mode custom --features demo,subgraph
 
-    Get feature metadata:
-      $ dappbooster --info
+    Discover canton features:
+      $ dappbooster --info --stack canton
 `, {
     importMeta: import.meta,
     flags: {
+        stack: {
+            type: 'string',
+        },
+        canton: {
+            type: 'boolean',
+            default: false,
+        },
+        evm: {
+            type: 'boolean',
+            default: false,
+        },
         name: {
             type: 'string',
         },
@@ -69,11 +97,46 @@ const cli = meow(`
         },
     },
 });
-if (cli.flags.info) {
-    console.log(getInfoOutput());
+function reportFlagError(error) {
+    console.log(JSON.stringify({ success: false, error }, null, 2));
+    process.exitCode = 1;
+}
+function resolveStackFlag(flags) {
+    const explicit = [];
+    if (flags.canton) {
+        explicit.push('canton');
+    }
+    if (flags.evm) {
+        explicit.push('evm');
+    }
+    if (flags.stack) {
+        explicit.push(flags.stack);
+    }
+    const unique = Array.from(new Set(explicit));
+    if (unique.length > 1) {
+        reportFlagError(`Conflicting stack flags: ${unique.join(', ')}. Pick exactly one of --canton, --evm, or --stack.`);
+        return undefined;
+    }
+    const candidate = unique[0];
+    if (candidate === undefined) {
+        return undefined;
+    }
+    if (!isStackName(candidate)) {
+        reportFlagError(`Invalid stack: '${candidate}'. Valid stacks: ${stackNames.join(', ')}`);
+        return undefined;
+    }
+    return candidate;
+}
+const resolvedStack = resolveStackFlag(cli.flags);
+if (process.exitCode === 1) {
+    // Stack-flag error already reported.
+}
+else if (cli.flags.info) {
+    console.log(getInfoOutput(resolvedStack));
 }
 else if (cli.flags.nonInteractive || cli.flags.ni || !process.stdout.isTTY) {
     runNonInteractive({
+        stack: resolvedStack,
         name: cli.flags.name,
         mode: cli.flags.mode,
         features: cli.flags.features,
@@ -91,7 +154,7 @@ else {
         console.clear();
         const { render } = await import('ink');
         const { default: App } = await import('./app.js');
-        render(_jsx(App, {}));
+        render(_jsx(App, { preselectedStack: resolvedStack }));
     };
     run().catch(console.error);
 }

package/dist/components/Multiselect/MultiSelect.d.ts

@@ -26,7 +26,8 @@ type MultiSelectProps<T> = {
     onUnselect?: (unselectedItem: Item<T>) => void;
     onSubmit?: (selectedItems: Item<T>[]) => void;
     onHighlight?: (highlightedItem: Item<T>) => void;
+    transformSelection?: (nextSelected: Item<T>[], toggledItem: Item<T>, action: 'select' | 'unselect') => Item<T>[];
 };
-declare const MultiSelect: <T>({ items, defaultSelected, focus, initialIndex, indicatorComponent, checkboxComponent, itemComponent, limit, onSelect, onUnselect, onSubmit, onHighlight, }: MultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const MultiSelect: <T>({ items, defaultSelected, focus, initialIndex, indicatorComponent, checkboxComponent, itemComponent, limit, onSelect, onUnselect, onSubmit, onHighlight, transformSelection, }: MultiSelectProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;
 export { Indicator, ItemComponent, CheckBox, type Item };

package/dist/components/Multiselect/MultiSelect.js

@@ -4,7 +4,7 @@ import { createElement, useCallback, useState } from 'react';
 import CheckBox from './components/Checkbox.js';
 import Indicator from './components/Indicator.js';
 import ItemComponent from './components/Item.js';
-const MultiSelect = ({ items = [], defaultSelected = [], focus = true, initialIndex = 0, indicatorComponent = Indicator, checkboxComponent = CheckBox, itemComponent = ItemComponent, limit = null, onSelect = () => { }, onUnselect = () => { }, onSubmit = () => { }, onHighlight = () => { }, }) => {
+const MultiSelect = ({ items = [], defaultSelected = [], focus = true, initialIndex = 0, indicatorComponent = Indicator, checkboxComponent = CheckBox, itemComponent = ItemComponent, limit = null, onSelect = () => { }, onUnselect = () => { }, onSubmit = () => { }, onHighlight = () => { }, transformSelection, }) => {
     const [highlightedIndex, setHighlightedIndex] = useState(initialIndex);
     const [selectedItems, setSelectedItems] = useState(defaultSelected);
     const hasLimit = limit !== null && limit < items.length;
@@ -13,17 +13,22 @@ const MultiSelect = ({ items = [], defaultSelected = [], focus = true, initialIn
         return (selectedItems.filter((selectedItem) => selectedItem.value === item.value && selectedItem.label === item.label).length > 0);
     }, []);
     const handleSelect = useCallback((item) => {
-        if (includesItems(item, selectedItems)) {
-            const newSelectedItems = selectedItems.filter((selectedItem) => selectedItem.value !== item.value && selectedItem.label !== item.label);
-            setSelectedItems(newSelectedItems);
+        const isCurrentlySelected = includesItems(item, selectedItems);
+        const action = isCurrentlySelected ? 'unselect' : 'select';
+        const naiveSelection = isCurrentlySelected
+            ? selectedItems.filter((selectedItem) => selectedItem.value !== item.value && selectedItem.label !== item.label)
+            : [...selectedItems, item];
+        const nextSelection = transformSelection
+            ? transformSelection(naiveSelection, item, action)
+            : naiveSelection;
+        setSelectedItems(nextSelection);
+        if (isCurrentlySelected) {
             onUnselect(item);
         }
         else {
-            const newSelectedItems = [...selectedItems, item];
-            setSelectedItems(newSelectedItems);
             onSelect(item);
         }
-    }, [selectedItems, onSelect, onUnselect, includesItems]);
+    }, [selectedItems, onSelect, onUnselect, includesItems, transformSelection]);
     const handleSubmit = useCallback(() => {
         onSubmit(selectedItems);
     }, [selectedItems, onSubmit]);

package/dist/components/steps/CloneRepo/CloneRepo.d.ts

@@ -1,5 +1,7 @@
 import { type FC } from 'react';
+import type { Stack } from '../../../constants/config.js';
 interface Props {
+    stack: Stack;
     projectName: string;
     onCompletion: () => void;
 }

package/dist/components/steps/CloneRepo/CloneRepo.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Text } from 'ink';
 import { useCallback, useEffect, useState } from 'react';
 import { cloneRepo } from '../../../operations/index.js';
-import { deriveStepDisplay } from '../../../utils/utils.js';
+import { beginInstall } from '../../../operations/installGuard.js';
+import { deriveStepDisplay, getProjectFolder } from '../../../utils/utils.js';
 import Divider from '../../Divider.js';
-const CloneRepo = ({ projectName, onCompletion }) => {
+const CloneRepo = ({ stack, projectName, onCompletion }) => {
     const [steps, setSteps] = useState([]);
     const [status, setStatus] = useState('running');
     const [errorMessage, setErrorMessage] = useState('');
@@ -12,7 +13,9 @@ const CloneRepo = ({ projectName, onCompletion }) => {
         setSteps((prev) => [...prev, step]);
     }, []);
     useEffect(() => {
-        cloneRepo(projectName, handleProgress)
+        // Disk work starts here, so arm the interrupt guard before cloning.
+        beginInstall(getProjectFolder(projectName));
+        cloneRepo(stack, projectName, handleProgress)
             .then(() => {
             setStatus('done');
             onCompletion();
@@ -21,8 +24,8 @@ const CloneRepo = ({ projectName, onCompletion }) => {
             setStatus('error');
             setErrorMessage(error instanceof Error ? error.message : String(error));
         });
-    }, [projectName, onCompletion, handleProgress]);
+    }, [stack, projectName, onCompletion, handleProgress]);
     const { completedSteps, currentStep, failedStep } = deriveStepDisplay(steps, status);
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'Git tasks' }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '\u2714' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '\u25CB' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '\u2717' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Failed to clone: ", errorMessage] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'Git tasks' }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '✔' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '○' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '✗' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Failed to clone: ", errorMessage] })] }));
 };
 export default CloneRepo;

package/dist/components/steps/Confirmation.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+interface Props {
+    summary: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare const Confirmation: FC<Props>;
+export default Confirmation;

package/dist/components/steps/Confirmation.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import figures from 'figures';
+import { Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { useState } from 'react';
+import Divider from '../Divider.js';
+const confirmItems = [
+    { label: 'Yes, scaffold it', value: 'yes' },
+    { label: 'No, start over', value: 'no' },
+];
+// Last side-effect-free step: nothing has touched the disk yet. Confirming starts the operations;
+// cancelling loops back to re-answer the questions.
+const Confirmation = ({ summary, onConfirm, onCancel }) => {
+    const [confirmed, setConfirmed] = useState(false);
+    const handleSelect = (item) => {
+        if (item.value === 'yes') {
+            setConfirmed(true);
+            onConfirm();
+        }
+        else {
+            onCancel();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'Review' }), _jsx(Text, { children: summary }), confirmed ? (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: figures.tick }), " Scaffolding\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'whiteBright', children: "Proceed with these settings?" }), _jsx(SelectInput, { indicatorComponent: ({ isSelected }) => (_jsx(Text, { color: "green", children: isSelected ? `${figures.pointer} ` : '  ' })), itemComponent: ({ label, isSelected }) => (_jsx(Text, { color: isSelected ? 'green' : 'white', bold: isSelected, children: label })), items: confirmItems, onSelect: handleSelect })] }))] }));
+};
+export default Confirmation;

package/dist/components/steps/FileCleanup.d.ts

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
+import type { Stack } from '../../constants/config.js';
 import type { InstallationType, MultiSelectItem } from '../../types/types.js';
 interface Props {
+    stack: Stack;
     onCompletion: () => void;
     projectName: string;
     installationConfig: {

package/dist/components/steps/FileCleanup.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Text } from 'ink';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cleanupFiles } from '../../operations/index.js';
+import { completeInstall } from '../../operations/installGuard.js';
 import { deriveStepDisplay, getProjectFolder } from '../../utils/utils.js';
 import Divider from '../Divider.js';
-const FileCleanup = ({ onCompletion, installationConfig, projectName }) => {
+const FileCleanup = ({ stack, onCompletion, installationConfig, projectName }) => {
     const { installationType, selectedFeatures } = installationConfig;
     const projectFolder = useMemo(() => getProjectFolder(projectName), [projectName]);
     const [steps, setSteps] = useState([]);
@@ -15,8 +16,10 @@ const FileCleanup = ({ onCompletion, installationConfig, projectName }) => {
     }, []);
     useEffect(() => {
         const features = selectedFeatures?.map((f) => f.value) ?? [];
-        cleanupFiles(projectFolder, installationType ?? 'full', features, handleProgress)
+        cleanupFiles(stack, projectFolder, installationType ?? 'full', features, handleProgress)
             .then(() => {
+            // Scaffold is complete — an interrupt from here on must not delete the finished project.
+            completeInstall();
             setStatus('done');
             onCompletion();
         })
@@ -24,8 +27,8 @@ const FileCleanup = ({ onCompletion, installationConfig, projectName }) => {
             setStatus('error');
             setErrorMessage(error instanceof Error ? error.message : String(error));
         });
-    }, [projectFolder, installationType, selectedFeatures, onCompletion, handleProgress]);
+    }, [stack, projectFolder, installationType, selectedFeatures, onCompletion, handleProgress]);
     const { completedSteps, currentStep, failedStep } = deriveStepDisplay(steps, status);
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'File cleanup' }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '\u2714' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '\u25CB' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '\u2717' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Cleanup failed: ", errorMessage] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'File cleanup' }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '✔' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '○' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '✗' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Cleanup failed: ", errorMessage] })] }));
 };
 export default FileCleanup;

package/dist/components/steps/Install/Install.d.ts

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
+import type { Stack } from '../../../constants/config.js';
 import type { InstallationType, MultiSelectItem } from '../../../types/types.js';
 interface Props {
+    stack: Stack;
     installationConfig: {
         installationType: InstallationType | undefined;
         selectedFeatures?: Array<MultiSelectItem>;

package/dist/components/steps/Install/Install.js

@@ -5,7 +5,7 @@ import { createEnvFile } from '../../../operations/createEnvFile.js';
 import { installPackages } from '../../../operations/installPackages.js';
 import { deriveStepDisplay, getProjectFolder } from '../../../utils/utils.js';
 import Divider from '../../Divider.js';
-const Install = ({ projectName, onCompletion, installationConfig }) => {
+const Install = ({ stack, projectName, onCompletion, installationConfig }) => {
     const { installationType, selectedFeatures } = installationConfig;
     const projectFolder = useMemo(() => getProjectFolder(projectName), [projectName]);
     const [steps, setSteps] = useState([]);
@@ -20,9 +20,9 @@ const Install = ({ projectName, onCompletion, installationConfig }) => {
     useEffect(() => {
         const features = selectedFeatures?.map((f) => f.value) ?? [];
         const run = async () => {
-            handleProgress('Creating .env.local file');
-            await createEnvFile(projectFolder);
-            await installPackages(projectFolder, installationType ?? 'full', features, handleProgress);
+            handleProgress('Creating env files');
+            await createEnvFile(stack, projectFolder, features);
+            await installPackages(stack, projectFolder, installationType ?? 'full', features, handleProgress);
         };
         run()
             .then(() => {
@@ -33,8 +33,8 @@ const Install = ({ projectName, onCompletion, installationConfig }) => {
             setStatus('error');
             setErrorMessage(error instanceof Error ? error.message : String(error));
         });
-    }, [projectFolder, installationType, selectedFeatures, onCompletion, handleProgress]);
+    }, [stack, projectFolder, installationType, selectedFeatures, onCompletion, handleProgress]);
     const { completedSteps, currentStep, failedStep } = deriveStepDisplay(steps, status);
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: `${title} installation` }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '\u2714' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '\u25CB' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '\u2717' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Installation failed: ", errorMessage] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: `${title} installation` }), completedSteps.map((step) => (_jsxs(Text, { children: [_jsx(Text, { color: 'green', children: '✔' }), " ", step] }, step))), currentStep && (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: '○' }), " ", currentStep, " ", _jsx(Text, { dimColor: true, children: "Working..." })] })), failedStep && (_jsxs(Text, { children: [_jsx(Text, { color: 'red', children: '✗' }), " ", failedStep, " ", _jsx(Text, { color: 'red', children: "Error" })] })), status === 'error' && _jsxs(Text, { color: 'red', children: ["Installation failed: ", errorMessage] })] }));
 };
 export default Install;

package/dist/components/steps/InstallationMode.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import figures from 'figures';
 import { Text } from 'ink';
 import SelectInput from 'ink-select-input';
@@ -15,12 +15,12 @@ const installationTypeItems = [
     },
 ];
 const InstallationMode = ({ onCompletion, onSelect }) => {
-    const [isFocused, setIsFocused] = useState(true);
+    const [selected, setSelected] = useState();
     const handleSelect = (item) => {
         onSelect(item);
+        setSelected(item);
         onCompletion();
-        setIsFocused(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'Installation setup' }), _jsx(Text, { color: 'whiteBright', children: "Choose installation type" }), _jsx(SelectInput, { indicatorComponent: ({ isSelected }) => (_jsx(Text, { color: "green", children: isSelected ? `${figures.pointer} ` : '  ' })), itemComponent: ({ label, isSelected }) => (_jsx(Text, { color: isSelected ? 'green' : 'white', bold: isSelected, children: label })), isFocused: isFocused, items: installationTypeItems, onSelect: handleSelect })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { title: 'Installation setup' }), selected ? (_jsxs(Text, { children: ["Installation type:", ' ', _jsx(Text, { bold: true, color: 'green', children: selected.label })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'whiteBright', children: "Choose installation type" }), _jsx(SelectInput, { indicatorComponent: ({ isSelected }) => (_jsx(Text, { color: "green", children: isSelected ? `${figures.pointer} ` : '  ' })), itemComponent: ({ label, isSelected }) => (_jsx(Text, { color: isSelected ? 'green' : 'white', bold: isSelected, children: label })), items: installationTypeItems, onSelect: handleSelect })] }))] }));
 };
 export default InstallationMode;

package/dist/components/steps/OptionalPackages.d.ts

@@ -1,6 +1,8 @@
 import { type FC } from 'react';
+import { type Stack } from '../../constants/config.js';
 import type { MultiSelectItem } from '../../types/types.js';
 interface Props {
+    stack: Stack;
     onCompletion: () => void;
     onSubmit: (selectedItems: Array<MultiSelectItem>) => void;
     skip?: boolean;

package/dist/components/steps/OptionalPackages.js

@@ -1,14 +1,26 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text } from 'ink';
-import { useEffect, useState } from 'react';
-import { featureDefinitions, featureNames } from '../../constants/config.js';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { getStackConfig } from '../../constants/config.js';
+import { applyFeatureToggle } from '../../utils/utils.js';
 import MultiSelect from '../Multiselect/index.js';
-const customPackages = featureNames.map((name) => ({
-    label: featureDefinitions[name].label,
-    value: name,
-}));
-const OptionalPackages = ({ onCompletion, onSubmit, skip = false }) => {
-    const [isFocused, setIsFocused] = useState(true);
+const OptionalPackages = ({ stack, onCompletion, onSubmit, skip = false }) => {
+    const [submitted, setSubmitted] = useState();
+    const customPackages = useMemo(() => {
+        const features = getStackConfig(stack).features;
+        return Object.entries(features).map(([name, def]) => ({
+            label: def.label,
+            value: name,
+        }));
+    }, [stack]);
+    // Keep the selection dependency-consistent as the user toggles (e.g. e2e requires counter).
+    const transformSelection = useCallback((nextSelected, toggledItem, action) => {
+        const selectedValues = nextSelected.map((item) => item.value);
+        const resolved = applyFeatureToggle(stack, selectedValues, toggledItem.value, action);
+        return resolved
+            .map((value) => customPackages.find((pkg) => pkg.value === value))
+            .filter((pkg) => pkg !== undefined);
+    }, [stack, customPackages]);
     // biome-ignore lint/correctness/useExhaustiveDependencies: Run this only once, no matter what
     useEffect(() => {
         if (skip) {
@@ -17,9 +29,15 @@ const OptionalPackages = ({ onCompletion, onSubmit, skip = false }) => {
     }, []);
     const onHandleSubmit = (selectedItems) => {
         onSubmit(selectedItems);
-        setIsFocused(false);
+        setSubmitted(selectedItems);
         onCompletion();
     };
-    return skip ? null : (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'whiteBright', children: "Choose optional packages" }), _jsx(MultiSelect, { defaultSelected: customPackages, focus: isFocused, items: customPackages, onSubmit: onHandleSubmit })] }));
+    if (skip) {
+        return null;
+    }
+    if (submitted) {
+        return (_jsxs(Text, { children: ["Optional packages:", ' ', _jsx(Text, { bold: true, color: 'green', children: submitted.length > 0 ? submitted.map((item) => item.label).join(', ') : 'none' })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: 'whiteBright', children: "Choose optional packages" }), _jsx(MultiSelect, { defaultSelected: customPackages, focus: true, items: customPackages, onSubmit: onHandleSubmit, transformSelection: transformSelection })] }));
 };
 export default OptionalPackages;

package/dist/components/steps/PostInstall.d.ts

@@ -1,6 +1,8 @@
 import type { FC } from 'react';
+import { type Stack } from '../../constants/config.js';
 import type { InstallationType, MultiSelectItem } from '../../types/types.js';
 interface Props {
+    stack: Stack;
     installationConfig: {
         installationType: InstallationType | undefined;
         selectedFeatures?: Array<MultiSelectItem>;