pni 1.0.0

package/dist/add-three-app.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    dir?: string;
+};
+export default function AddThreeApp({ dir }: Props): React.JSX.Element | null;
+export {};

package/dist/add-three-app.js

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { addThree } from './utils/add-three.js';
+import ProgressIndicator from './components/ProgressIndicator.js';
+import { resolve } from 'path';
+export default function AddThreeApp({ dir }) {
+    const [step, setStep] = useState('checking');
+    const [error, setError] = useState(null);
+    const [result, setResult] = useState(null);
+    useEffect(() => {
+        async function initialize() {
+            try {
+                const cwd = dir ? resolve(dir) : process.cwd();
+                setStep('copying');
+                const result = await addThree(cwd);
+                setResult(result);
+                setStep('completed');
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Unknown error');
+                setStep('error');
+            }
+        }
+        initialize();
+    }, [dir]);
+    if (step === 'checking') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDD0D Three.js Setup"),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "Checking Three.js installation...", status: "in-progress" })));
+    }
+    if (step === 'copying') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCE6 Adding Three.js Template"),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "Copying template files...", status: "in-progress" })));
+    }
+    if (step === 'error') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Box, { borderStyle: "round", borderColor: "red", paddingX: 2, paddingY: 1, marginBottom: 1 },
+                React.createElement(Text, { color: "red", bold: true }, "\u2717 Error")),
+            React.createElement(Box, { paddingLeft: 2 },
+                React.createElement(Text, { color: "red" }, error))));
+    }
+    if (step === 'completed' && result) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Box, { borderStyle: "round", borderColor: "green", paddingX: 2, paddingY: 1, marginBottom: 1 },
+                React.createElement(Text, { color: "green", bold: true }, "\u2728 Three.js template added successfully!")),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCC1 Files Created"),
+                React.createElement(Text, null, " "),
+                React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "\u2022"),
+                        " ",
+                        React.createElement(Text, { color: "white" },
+                            result.threePath,
+                            "/"),
+                        " ",
+                        React.createElement(Text, { color: "gray" }, "(template files)")),
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "\u2022"),
+                        " ",
+                        React.createElement(Text, { color: "white" },
+                            result.projectType === 'vue' ? 'src' : 'app',
+                            "/composables/"),
+                        React.createElement(Text, { color: "green" },
+                            result.directoryName,
+                            "/usethree.",
+                            result.fileExtension)),
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: "yellow" }, "\u2022"),
+                        " ",
+                        React.createElement(Text, { color: "white" },
+                            result.projectType === 'vue' ? 'src' : 'app',
+                            "/composables/"),
+                        React.createElement(Text, { color: "green" },
+                            result.directoryName,
+                            "/useThreeAdvanced.",
+                            result.fileExtension))),
+                React.createElement(Text, null, " "),
+                React.createElement(Box, { borderStyle: "single", borderColor: "cyan", paddingX: 1, paddingY: 1 },
+                    React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDE80 Next Steps"),
+                    React.createElement(Text, null, " "),
+                    React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                        React.createElement(Text, null,
+                            React.createElement(Text, { color: "yellow" }, "1."),
+                            " ",
+                            React.createElement(Text, { color: "white" }, "Import and use the composable in your "),
+                            React.createElement(Text, { color: "green", bold: true }, result.projectType === 'vue' ? 'Vue' : 'Nuxt'),
+                            React.createElement(Text, { color: "white" }, " component")),
+                        React.createElement(Text, null,
+                            React.createElement(Text, { color: "yellow" }, "2."),
+                            " ",
+                            React.createElement(Text, { color: "gray" }, "Example: "),
+                            React.createElement(Text, { color: "cyan" }, "import"),
+                            " ",
+                            React.createElement(Text, { color: "yellow" },
+                                '{',
+                                " useThree ",
+                                '}'),
+                            " ",
+                            React.createElement(Text, { color: "cyan" }, "from"),
+                            " ",
+                            React.createElement(Text, { color: "green" },
+                                "'@/composables/",
+                                result.directoryName,
+                                "/usethree'")))))));
+    }
+    return null;
+}

package/dist/app.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type Props = {
+    nuxt?: boolean;
+    vue?: boolean;
+    threejs?: boolean;
+    cssVars?: boolean;
+    dir?: string;
+    nonInteractive?: boolean;
+};
+export default function App({ nuxt, vue, threejs, cssVars, dir, nonInteractive, }: Props): React.JSX.Element | null;
+export {};

package/dist/app.js

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { detectProjectType } from './utils/project-detection.js';
+import { createApp } from './utils/app-creation.js';
+import { detectPackageManager, getInstallCommand, getDevInstallCommand, } from './utils/package-manager.js';
+import { getDependencies } from './utils/dependencies.js';
+import { generateConfigFiles } from './utils/config-generator.js';
+import { generateCSSVariables, updateIndexHtml, createTypographyPage } from './utils/css-variables.js';
+import { setupShadcnNuxt } from './utils/shadcn-setup.js';
+import FeatureSelector from './components/FeatureSelector.js';
+import ProgressIndicator from './components/ProgressIndicator.js';
+import Summary from './components/Summary.js';
+import WelcomeHeader from './components/WelcomeHeader.js';
+import { execSync } from 'child_process';
+import { join, resolve } from 'path';
+export default function App({ nuxt = false, vue = false, threejs = false, cssVars = false, dir, nonInteractive = false, }) {
+    const [step, setStep] = useState('detecting');
+    const [projectType, setProjectType] = useState('none');
+    const [features, setFeatures] = useState(null);
+    const [error, setError] = useState(null);
+    const [projectPath, setProjectPath] = useState('');
+    useEffect(() => {
+        async function initialize() {
+            try {
+                const cwd = dir ? resolve(dir) : process.cwd();
+                setProjectPath(cwd);
+                const detected = await detectProjectType(cwd);
+                setProjectType(detected);
+                setStep('selecting');
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Unknown error');
+                setStep('error');
+            }
+        }
+        initialize();
+    }, [dir]);
+    const handleFeatureSelect = async (selectedFeatures) => {
+        setFeatures(selectedFeatures);
+        const finalProjectType = nuxt
+            ? 'nuxt'
+            : vue
+                ? 'vue'
+                : selectedFeatures.projectType === 'none'
+                    ? 'nuxt' // Default to nuxt if none selected
+                    : selectedFeatures.projectType;
+        // finalProjectType is guaranteed to be 'nuxt' or 'vue' at this point
+        try {
+            const cwd = dir ? resolve(dir) : process.cwd();
+            let workingPath = cwd;
+            // Create app if needed
+            if (projectType === 'none' && selectedFeatures.projectName) {
+                setStep('creating');
+                const parentDir = dir ? resolve(dir) : process.cwd();
+                await createApp(finalProjectType, parentDir, selectedFeatures.projectName);
+                workingPath = join(parentDir, selectedFeatures.projectName);
+                setProjectPath(workingPath);
+            }
+            // Install dependencies
+            setStep('installing');
+            const pm = await detectPackageManager(workingPath);
+            const deps = getDependencies(finalProjectType, selectedFeatures.threejs, selectedFeatures.cssVars);
+            if (deps.production.length > 0) {
+                const installCmd = getInstallCommand(pm, deps.production);
+                execSync(installCmd, { cwd: workingPath, stdio: 'inherit' });
+            }
+            if (deps.dev.length > 0) {
+                const devInstallCmd = getDevInstallCommand(pm, deps.dev);
+                execSync(devInstallCmd, { cwd: workingPath, stdio: 'inherit' });
+            }
+            // Generate configuration files
+            setStep('configuring');
+            await generateConfigFiles(finalProjectType, workingPath, selectedFeatures.threejs, selectedFeatures.cssVars);
+            // Generate CSS variables (always enabled - will be overwritten after shadcn-setup)
+            if (finalProjectType === 'nuxt') {
+                // For Nuxt, first create basic tailwind.css
+                await generateCSSVariables(finalProjectType, workingPath, true);
+                // Then run shadcn setup
+                setStep('configuring');
+                await setupShadcnNuxt(workingPath, pm);
+                // Finally, replace with full CSS content
+                await generateCSSVariables(finalProjectType, workingPath, false);
+                // Create typography page after CSS variables are set up
+                if (selectedFeatures.cssVars) {
+                    await createTypographyPage(workingPath);
+                }
+            }
+            else {
+                await generateCSSVariables(finalProjectType, workingPath);
+                // For Vue projects, update index.html with stylesheet link
+                if (finalProjectType === 'vue' && selectedFeatures.cssVars) {
+                    await updateIndexHtml(workingPath);
+                }
+            }
+            setStep('completed');
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Unknown error');
+            setStep('error');
+        }
+    };
+    if (step === 'detecting') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(WelcomeHeader, null),
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDD0D Analyzing project..."),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "Detecting project type...", status: "in-progress" })));
+    }
+    if (step === 'selecting') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(WelcomeHeader, null),
+            React.createElement(FeatureSelector, { detectedType: projectType, onSelect: handleFeatureSelect, nonInteractive: nonInteractive, flags: { nuxt, vue, threejs, cssVars } })));
+    }
+    if (step === 'creating') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCE6 Creating project..."),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "Setting up project structure...", status: "in-progress" })));
+    }
+    if (step === 'installing') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "yellow", bold: true }, "\uD83D\uDCE5 Installing dependencies..."),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "This may take a few moments...", status: "in-progress" })));
+    }
+    if (step === 'configuring') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "magenta", bold: true }, "\u2699\uFE0F  Configuring project..."),
+            React.createElement(Text, null, " "),
+            React.createElement(ProgressIndicator, { message: "Generating configuration files...", status: "in-progress" })));
+    }
+    if (step === 'error') {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Box, { borderStyle: "round", borderColor: "red", paddingX: 2, paddingY: 1, marginBottom: 1 },
+                React.createElement(Text, { color: "red", bold: true }, "\u2717 Error")),
+            React.createElement(Box, { paddingLeft: 2 },
+                React.createElement(Text, { color: "red" }, error))));
+    }
+    if (step === 'completed' && features) {
+        return React.createElement(Summary, { features: features, projectPath: projectPath });
+    }
+    return null;
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+import React from 'react';
+import { render } from 'ink';
+import meow from 'meow';
+import App from './app.js';
+import AddThreeApp from './add-three-app.js';
+// import { render as renderTestingLibrary } from 'ink-testing-library';
+const cli = meow(`
+	Usage
+	  $ pni [options]
+	  $ pni add three [options]
+
+	Options
+	  --nuxt              Force Nuxt project type
+	  --vue               Force Vue project type
+	  --threejs           Include Three.js setup
+	  --css-vars          Include CSS variables (shadcn-style) setup
+	  --dir <path>        Target directory (default: current directory)
+	  --non-interactive    Skip prompts, use flags only
+
+	Examples
+	  $ pni
+	  Interactive setup
+
+	  $ pni --nuxt --threejs --css-vars
+	  Create Nuxt app with Three.js and CSS variables
+
+	  $ pni --vue --threejs
+	  Create Vue app with Three.js
+
+	  $ pni --css-vars
+	  Add CSS variables to existing project
+
+	  $ pni add three
+	  Add Three.js template to existing project
+`, {
+    importMeta: import.meta,
+    flags: {
+        nuxt: {
+            type: 'boolean',
+            default: false,
+        },
+        vue: {
+            type: 'boolean',
+            default: false,
+        },
+        threejs: {
+            type: 'boolean',
+            default: false,
+        },
+        cssVars: {
+            type: 'boolean',
+            default: false,
+        },
+        dir: {
+            type: 'string',
+        },
+        nonInteractive: {
+            type: 'boolean',
+            default: false,
+        },
+    },
+});
+// Check for subcommands
+const [command, subcommand] = cli.input;
+if (command === 'add' && subcommand === 'three') {
+    render(React.createElement(AddThreeApp, { dir: cli.flags.dir }));
+}
+else {
+    render(React.createElement(App, { nuxt: cli.flags.nuxt, vue: cli.flags.vue, threejs: cli.flags.threejs, cssVars: cli.flags.cssVars, dir: cli.flags.dir, nonInteractive: cli.flags.nonInteractive }));
+}

package/dist/components/FeatureSelector.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ProjectType } from '../utils/project-detection.js';
+export interface SelectedFeatures {
+    projectType: ProjectType;
+    threejs: boolean;
+    cssVars: boolean;
+    projectName?: string;
+}
+type Props = {
+    detectedType: ProjectType;
+    onSelect: (features: SelectedFeatures) => void;
+    nonInteractive?: boolean;
+    flags?: {
+        nuxt?: boolean;
+        vue?: boolean;
+        threejs?: boolean;
+        cssVars?: boolean;
+    };
+};
+export default function FeatureSelector({ detectedType, onSelect, nonInteractive, flags, }: Props): React.JSX.Element;
+export {};

package/dist/components/FeatureSelector.js

@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Box, useInput } from 'ink';
+export default function FeatureSelector({ detectedType, onSelect, nonInteractive = false, flags = {}, }) {
+    const [step, setStep] = useState(0);
+    const [projectType, setProjectType] = useState(flags.nuxt
+        ? 'nuxt'
+        : flags.vue
+            ? 'vue'
+            : detectedType !== 'none'
+                ? detectedType
+                : 'nuxt');
+    const [threejs, setThreejs] = useState(flags.threejs ?? false);
+    const [projectName, setProjectName] = useState('');
+    const cssVars = true; // Always enabled - CSS will be overwritten after shadcn-setup
+    useEffect(() => {
+        if (nonInteractive) {
+            // Auto-select based on flags or detected type
+            onSelect({
+                projectType,
+                threejs,
+                cssVars,
+            });
+        }
+    }, [nonInteractive, projectType, threejs, cssVars, onSelect]);
+    useInput((input, key) => {
+        if (nonInteractive) {
+            return;
+        }
+        if (key.return) {
+            if (step === 0 && detectedType === 'none') {
+                // Project type selected
+                setStep(1);
+            }
+            else if (step === 1 && detectedType === 'none') {
+                // Project name entered
+                setStep(2);
+            }
+            else if (step === (detectedType === 'none' ? 2 : 0)) {
+                // Three.js question answered - CSS vars are always enabled
+                onSelect({
+                    projectType,
+                    threejs,
+                    cssVars: true, // Always enable CSS vars
+                    projectName: detectedType === 'none' ? projectName : undefined,
+                });
+            }
+        }
+        if (key.upArrow || key.downArrow) {
+            if (step === 0 && detectedType === 'none') {
+                setProjectType(prev => (prev === 'nuxt' ? 'vue' : 'nuxt'));
+            }
+            else if (step === (detectedType === 'none' ? 2 : 0)) {
+                // Three.js question
+                setThreejs(prev => !prev);
+            }
+        }
+        if (input === 'y' || input === 'Y') {
+            if (step === (detectedType === 'none' ? 2 : 0)) {
+                setThreejs(true);
+            }
+        }
+        if (input === 'n' || input === 'N') {
+            if (step === (detectedType === 'none' ? 2 : 0)) {
+                setThreejs(false);
+            }
+        }
+        // Handle project name input
+        if (step === 1 &&
+            detectedType === 'none' &&
+            !key.return &&
+            !key.upArrow &&
+            !key.downArrow) {
+            if (key.backspace || key.delete) {
+                setProjectName(prev => prev.slice(0, -1));
+            }
+            else if (input.length === 1) {
+                setProjectName(prev => prev + input);
+            }
+        }
+    });
+    if (nonInteractive) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\u26A1 Quick Setup (Non-Interactive)"),
+            React.createElement(Text, null, " "),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Project Type:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, projectType)),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Three.js:"),
+                    " ",
+                    React.createElement(Text, { color: threejs ? 'green' : 'gray', bold: true }, threejs ? 'Yes' : 'No')),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "CSS Vars:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, "Yes (auto)")))));
+    }
+    if (detectedType === 'none') {
+        if (step === 0) {
+            return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+                React.createElement(Text, { color: "yellow", bold: true }, "\uD83D\uDCE6 No project detected"),
+                React.createElement(Text, { color: "gray" }, "Select project type:"),
+                React.createElement(Text, null, " "),
+                React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: projectType === 'nuxt' ? 'cyan' : 'gray' }, projectType === 'nuxt' ? '→' : ' '),
+                        React.createElement(Text, { color: projectType === 'nuxt' ? 'cyan' : 'white', bold: true },
+                            "[",
+                            React.createElement(Text, { color: projectType === 'nuxt' ? 'green' : 'gray' }, projectType === 'nuxt' ? '●' : '○'),
+                            "] Nuxt")),
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: projectType === 'vue' ? 'cyan' : 'gray' }, projectType === 'vue' ? '→' : ' '),
+                        React.createElement(Text, { color: projectType === 'vue' ? 'cyan' : 'white', bold: true },
+                            "[",
+                            React.createElement(Text, { color: projectType === 'vue' ? 'green' : 'gray' }, projectType === 'vue' ? '●' : '○'),
+                            "] Vue"))),
+                React.createElement(Text, null, " "),
+                React.createElement(Text, { color: "gray" },
+                    "Press ",
+                    React.createElement(Text, { color: "cyan" }, "\u2191/\u2193"),
+                    " to select, ",
+                    React.createElement(Text, { color: "cyan" }, "Enter"),
+                    " to continue")));
+        }
+        if (step === 1) {
+            return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+                React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCDD Project Setup"),
+                React.createElement(Text, null, " "),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: "magenta" }, "Enter project name:"),
+                    " ",
+                    React.createElement(Text, { color: "green", bold: true }, projectName),
+                    React.createElement(Text, { color: "cyan", bold: true }, "_")),
+                React.createElement(Text, null, " "),
+                React.createElement(Text, { color: "gray" },
+                    "Type the project name and press ",
+                    React.createElement(Text, { color: "cyan" }, "Enter"),
+                    " when done")));
+        }
+    }
+    if (step === (detectedType === 'none' ? 2 : 0)) {
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Text, { color: "cyan", bold: true }, "\uD83C\uDFA8 Additional Features"),
+            React.createElement(Text, null, " "),
+            React.createElement(Text, { color: "yellow", bold: true }, "Include Three.js setup?"),
+            React.createElement(Text, null, " "),
+            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: threejs ? 'cyan' : 'gray' }, threejs ? '→' : ' '),
+                    React.createElement(Text, { color: threejs ? 'cyan' : 'white', bold: true },
+                        "[",
+                        React.createElement(Text, { color: threejs ? 'green' : 'gray' }, threejs ? '✓' : ' '),
+                        "] ",
+                        React.createElement(Text, { color: threejs ? 'green' : 'white' }, "Yes"))),
+                React.createElement(Text, null,
+                    React.createElement(Text, { color: !threejs ? 'cyan' : 'gray' }, !threejs ? '→' : ' '),
+                    React.createElement(Text, { color: !threejs ? 'cyan' : 'white', bold: true },
+                        "[",
+                        React.createElement(Text, { color: !threejs ? 'red' : 'gray' }, !threejs ? '✗' : ' '),
+                        "] ",
+                        React.createElement(Text, { color: !threejs ? 'red' : 'white' }, "No")))),
+            React.createElement(Text, null, " "),
+            React.createElement(Text, { color: "gray" },
+                "Use ",
+                React.createElement(Text, { color: "cyan" }, "\u2191/\u2193"),
+                " to toggle, ",
+                React.createElement(Text, { color: "cyan" }, "y/n"),
+                " to select, or ",
+                React.createElement(Text, { color: "cyan" }, "Enter"),
+                " to continue")));
+    }
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: "cyan" }, "Processing...")));
+}

package/dist/components/ProgressIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    message: string;
+    status?: 'pending' | 'in-progress' | 'completed' | 'error';
+};
+export default function ProgressIndicator({ message, status, }: Props): React.JSX.Element;
+export {};

package/dist/components/ProgressIndicator.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Box } from 'ink';
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+export default function ProgressIndicator({ message, status = 'in-progress', }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        if (status !== 'in-progress') {
+            return;
+        }
+        const timer = setInterval(() => {
+            setFrame(prev => (prev + 1) % SPINNER_FRAMES.length);
+        }, 100);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [status]);
+    const getStatusIcon = () => {
+        switch (status) {
+            case 'completed':
+                return React.createElement(Text, { color: "green", bold: true }, "\u2713");
+            case 'error':
+                return React.createElement(Text, { color: "red", bold: true }, "\u2717");
+            case 'in-progress':
+                return React.createElement(Text, { color: "cyan", bold: true }, SPINNER_FRAMES[frame]);
+            case 'pending':
+            default:
+                return React.createElement(Text, { color: "gray" }, "\u25CB");
+        }
+    };
+    const getMessageColor = () => {
+        switch (status) {
+            case 'completed':
+                return 'green';
+            case 'error':
+                return 'red';
+            case 'in-progress':
+                return 'cyan';
+            case 'pending':
+            default:
+                return 'gray';
+        }
+    };
+    return (React.createElement(Box, null,
+        React.createElement(Box, { marginRight: 1 }, getStatusIcon()),
+        React.createElement(Text, { color: getMessageColor() }, message)));
+}

package/dist/components/Summary.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SelectedFeatures } from './FeatureSelector.js';
+type Props = {
+    features: SelectedFeatures;
+    projectPath: string;
+};
+export default function Summary({ features, projectPath }: Props): React.JSX.Element;
+export {};