create-claudecraft 1.0.0

package/dist/ink-prompts.js

@@ -0,0 +1,363 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import { render, Box, Text, useInput, useApp } from 'ink';
+import TextInput from 'ink-text-input';
+import SelectInput from 'ink-select-input';
+import figlet from 'figlet';
+import gradient from 'gradient-string';
+import fs from 'fs';
+import path from 'path';
+import { SKILLS, BUNDLES, VERSION, STACK, ASSETS, DEFAULT_THEME, DEFAULT_PORT, TAGLINE } from './constants.js';
+// Split gradients for two-line logo
+const claudeGradient = gradient(['#00ff9f', '#00b8ff']); // Green → Cyan (fresh)
+const craftGradient = gradient(['#a855f7', '#6d28d9']); // Purple → Violet (deep)
+// Generate ASCII art for each word separately
+const asciiClaude = figlet.textSync('CLAUDE', {
+    font: 'ANSI Shadow',
+    horizontalLayout: 'fitted',
+});
+const asciiCraft = figlet.textSync('CRAFT', {
+    font: 'ANSI Shadow',
+    horizontalLayout: 'fitted',
+});
+// Get today's date for the revision block
+const today = new Date().toISOString().split('T')[0].replace(/-/g, '.');
+// ═══════════════════════════════════════════════════════════════════════════
+// ALIGNMENT: Frame width = 76 chars exactly (must match ui.ts)
+// Normal row:   "  │ │  " (7) + content (66) + "│ │" (3) = 76
+// CAP HT row:   "  │ │  " (7) + content (58) + "│◀┼─ CAP HT" (11) = 76
+// BASELINE row: "  │ │  " (7) + content (56) + "│◀┼─ BASELINE" (13) = 76
+// ASCII: CLAUDE=49 chars, CRAFT=41 chars
+// ═══════════════════════════════════════════════════════════════════════════
+const FRAME = 76;
+const INNER = 66; // Normal row content width
+const CAP_HT_WIDTH = 58; // CAP HT row content width (76-7-11)
+const BASELINE_WIDTH = 56; // BASELINE row content width (76-7-13)
+// Helper to pad strings
+const pad = (s, len) => s + ' '.repeat(Math.max(0, len - s.length));
+// Pad to exact width (strips ANSI codes for length calc)
+const padTo = (line, width) => {
+    const visible = line.replace(/\x1b\[[0-9;]*m/g, '').length;
+    return line + ' '.repeat(Math.max(0, width - visible));
+};
+// Existential dread collections
+const DREAD = {
+    help: [
+        "You're not being replaced. You're being... augmented. Involuntarily.",
+        "The AI can't feel impostor syndrome. That's still your job.",
+        "Remember when 'prompt engineering' wasn't a career? Good times.",
+        "The robots write code now. You write prompts. This is fine.",
+        "At least the AI doesn't have opinions about your font choices. Yet.",
+    ],
+    reassurance: [
+        "But hey, someone still needs taste. That's you. Allegedly.",
+        "Breathe. The AI still can't center a div without help.",
+        "Keep going. The AI believes in you. (It doesn't. It can't.)",
+    ],
+    cancel: [
+        "You'll be back. They always come back.",
+        "Ctrl+C won't save you from the future.",
+        "Quitting is a valid design decision.",
+    ],
+};
+const random = (arr) => arr[Math.floor(Math.random() * arr.length)];
+// Slash commands
+const COMMANDS = [
+    { name: '/help', hint: 'existential guidance' },
+    { name: '/skills', hint: 'what the AI knows' },
+    { name: '/quit', hint: 'escape while you can' },
+];
+// Specs/Manifest panel component (76 chars wide to match header)
+function SpecsPanel() {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["  \u256D\u2500\u2500\u2500 SPECS ", '─'.repeat(60), "\u256E"] }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", TAGLINE.padEnd(70), "\u2502"] }), _jsx(Text, { dimColor: true, children: "  \u251C\u2500\u2500\u2500 STACK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500 ASSETS \u2500\u2500\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500 DEFAULTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", _jsxs(Text, { children: ["react       ", pad(STACK.react, 6)] }), "\u2502 ", _jsxs(Text, { children: ["skills   ", pad(String(ASSETS.skills), 4)] }), "\u2502 ", _jsxs(Text, { children: ["theme     ", pad(DEFAULT_THEME, 8)] }), "\u2502"] }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", _jsxs(Text, { children: ["typescript  ", pad(STACK.typescript, 6)] }), "\u2502 ", _jsxs(Text, { children: ["commands ", pad(String(ASSETS.commands), 4)] }), "\u2502 ", _jsxs(Text, { children: ["port      ", pad(String(DEFAULT_PORT), 8)] }), "\u2502"] }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", _jsxs(Text, { children: ["vite        ", pad(STACK.vite, 6)] }), "\u2502 ", _jsxs(Text, { children: ["themes   ", pad(String(ASSETS.themes), 4)] }), "\u2502 ", _jsx(Text, { children: "tests     vitest  " }), "\u2502"] }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", _jsxs(Text, { children: ["tailwind    ", pad(STACK.tailwind, 6)] }), "\u2502 ", _jsxs(Text, { children: ["hooks    ", pad(String(ASSETS.hooks), 4)] }), "\u2502 ", _jsx(Text, { children: "pkg       bun     " }), "\u2502"] }), _jsxs(Text, { dimColor: true, children: ["  \u2502 ", _jsxs(Text, { children: ["daisyui     ", pad(STACK.daisyui, 6)] }), "\u2502 ", _jsxs(Text, { children: ["comps    ", pad(String(ASSETS.components), 4)] }), "\u2502 ", _jsx(Text, { children: "license   MIT     " }), "\u2502"] }), _jsx(Text, { dimColor: true, children: "  \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsx(Text, { dimColor: true, children: "  \u2502 ~48 files \u00B7 0 deps \u00B7 type /help for existential guidance        \u2502" }), _jsxs(Text, { dimColor: true, children: ["  \u2570", '─'.repeat(72), "\u256F"] })] }));
+}
+// Progress panel - 76 chars wide to match header
+function ProgressPanel({ step, total, labels }) {
+    const stepWidth = Math.floor(66 / total);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["  \u256D\u2500\u2500\u2500 PROGRESS ", '─'.repeat(57), "\u256E"] }), _jsx(Text, { dimColor: true, children: "  \u2502                                                                      \u2502" }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502  " }), Array.from({ length: total }, (_, i) => {
+                        const num = i + 1;
+                        const label = labels[i] || `Step ${num}`;
+                        const isComplete = num < step;
+                        const isCurrent = num === step;
+                        const isPending = num > step;
+                        return (_jsxs(React.Fragment, { children: [isComplete && _jsxs(Text, { color: "green", children: ["\u25CF ", label.substring(0, stepWidth - 3).padEnd(stepWidth - 1)] }), isCurrent && _jsxs(Text, { color: "cyan", children: ["\u25C9 ", label.substring(0, stepWidth - 3).padEnd(stepWidth - 1)] }), isPending && _jsxs(Text, { dimColor: true, children: ["\u25CB ", label.substring(0, stepWidth - 3).padEnd(stepWidth - 1)] })] }, num));
+                    }), _jsx(Text, { dimColor: true, children: "\u2502" })] }), _jsx(Text, { dimColor: true, children: "  \u2502                                                                      \u2502" }), _jsxs(Text, { dimColor: true, children: ["  \u2570", '─'.repeat(72), "\u256F"] })] }));
+}
+// Step labels for progress panel
+const STEP_LABELS = ['Name', 'Skills', 'Homepage', 'Git'];
+// Technical Drawing Header with prepress marks (76 chars wide, perfectly aligned)
+function Header({ showSpecs = true, step, totalSteps }) {
+    // Apply gradients and filter empty lines
+    const claudeLines = claudeGradient(asciiClaude).split('\n').filter(l => l.trim());
+    const craftLines = craftGradient(asciiCraft).split('\n').filter(l => l.trim());
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "  \u2295" }), _jsxs(Text, { dimColor: true, children: ["\u2500\u252C", '─'.repeat(68), "\u252C\u2500"] }), _jsx(Text, { color: "cyan", children: "\u2295" })] }), _jsxs(Text, { dimColor: true, children: ["    \u2502 \u25C0", '─'.repeat(26), " 72 COLS ", '─'.repeat(26), "\u25B6 \u2502"] }), _jsxs(Text, { dimColor: true, children: ["  \u250C\u2500\u253C", '─'.repeat(68), "\u253C\u2500\u2510"] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502 \u2502  " }), _jsx(Text, { dimColor: true, children: padTo('┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ · · · · ┆ ·', INNER) }), _jsx(Text, { dimColor: true, children: "\u2502 \u2502" })] }), claudeLines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502 \u2502  " }), i === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: padTo(line, CAP_HT_WIDTH) }), _jsx(Text, { dimColor: true, children: "\u2502\u25C0\u253C\u2500 CAP HT" })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { children: padTo(line, INNER) }), _jsx(Text, { dimColor: true, children: "\u2502 \u2502" })] }))] }, `claude-${i}`))), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502 \u2502  " }), _jsx(Text, { dimColor: true, children: padTo('├' + '─'.repeat(53) + '┤', BASELINE_WIDTH) }), _jsx(Text, { dimColor: true, children: "\u2502\u25C0\u253C\u2500 BASELINE" })] }), craftLines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502 \u2502  " }), _jsx(Text, { children: padTo(line, INNER) }), _jsx(Text, { dimColor: true, children: "\u2502 \u2502" })] }, `craft-${i}`))), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "  \u2502 \u2502  " }), _jsx(Text, { dimColor: true, children: padTo('0        10        20        30        40        50        60', INNER) }), _jsx(Text, { dimColor: true, children: "\u2502 \u2502" })] }), _jsxs(Text, { dimColor: true, children: ["  \u2514\u2500\u253C", '─'.repeat(68), "\u253C\u2500\u2518"] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "    \u2502  " }), _jsx(Text, { color: "cyan", children: "\u25A0" }), _jsx(Text, { dimColor: true, children: " C  " }), _jsx(Text, { color: "magenta", children: "\u25A0" }), _jsx(Text, { dimColor: true, children: " M  " }), _jsx(Text, { color: "yellow", children: "\u25A0" }), _jsx(Text, { dimColor: true, children: " Y  " }), _jsx(Text, { color: "white", children: "\u25A0" }), _jsx(Text, { dimColor: true, children: " K     " }), _jsxs(Text, { color: "green", children: ["REV ", VERSION] }), _jsxs(Text, { dimColor: true, children: [" \u2502 ", today, " \u2502 "] }), _jsx(Text, { color: "yellow", children: "NOT FOR PROD" }), _jsx(Text, { dimColor: true, children: "  \u2502" })] }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "  \u2295" }), _jsxs(Text, { dimColor: true, children: ["\u2500\u2534", '─'.repeat(68), "\u2534\u2500"] }), _jsx(Text, { color: "cyan", children: "\u2295" })] }), showSpecs ? (_jsx(Box, { marginTop: 1, children: _jsx(SpecsPanel, {}) })) : step && totalSteps ? (_jsx(Box, { marginTop: 1, children: _jsx(ProgressPanel, { step: step, total: totalSteps, labels: STEP_LABELS }) })) : null] }));
+}
+// Autocomplete dropdown - matches design language
+function Autocomplete({ query, commands, onSelect }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const filtered = commands.filter(c => c.name.toLowerCase().startsWith(query.toLowerCase()));
+    useInput((input, key) => {
+        if (key.downArrow) {
+            setSelectedIndex(i => Math.min(i + 1, filtered.length - 1));
+        }
+        else if (key.upArrow) {
+            setSelectedIndex(i => Math.max(i - 1, 0));
+        }
+        else if (key.return && filtered[selectedIndex]) {
+            onSelect(filtered[selectedIndex].name);
+        }
+    });
+    if (filtered.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500 COMMANDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), filtered.map((cmd, i) => (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), _jsxs(Text, { color: i === selectedIndex ? 'cyan' : 'white', children: [i === selectedIndex ? '› ' : '  ', cmd.name.padEnd(10)] }), _jsx(Text, { dimColor: true, children: cmd.hint })] }, cmd.name))), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] }));
+}
+// Help panel - matches specs panel design
+function HelpPanel({ onClose }) {
+    useInput((_, key) => {
+        if (key.escape || key.return)
+            onClose();
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500\u2500\u2500 HELP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E" }), _jsxs(Text, { dimColor: true, children: ["\u2502 ", _jsx(Text, { children: random(DREAD.help).padEnd(69) }), "\u2502"] }), _jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500 COMMANDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsxs(Text, { dimColor: true, children: ["\u2502   ", _jsx(Text, { color: "cyan", children: "/help" }), "     ", _jsx(Text, { dimColor: true, children: "you are here (existentially, too)" }), "                     \u2502"] }), _jsxs(Text, { dimColor: true, children: ["\u2502   ", _jsx(Text, { color: "cyan", children: "/skills" }), "   ", _jsx(Text, { dimColor: true, children: "see what the robots learned" }), "                           \u2502"] }), _jsxs(Text, { dimColor: true, children: ["\u2502   ", _jsx(Text, { color: "cyan", children: "/quit" }), "     ", _jsx(Text, { dimColor: true, children: "rage quit" }), "                                             \u2502"] }), _jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500 NAVIGATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsx(Text, { dimColor: true, children: "\u2502   \u2191\u2193        move through options                                     \u2502" }), _jsx(Text, { dimColor: true, children: "\u2502   space     toggle selection                                         \u2502" }), _jsx(Text, { dimColor: true, children: "\u2502   enter     confirm your life choices                                \u2502" }), _jsx(Text, { dimColor: true, children: "\u2502   esc       cancel (the project, not your career)                    \u2502" }), _jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsxs(Text, { dimColor: true, children: ["\u2502 ", _jsx(Text, { children: random(DREAD.reassurance).padEnd(69) }), "\u2502"] }), _jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsxs(Text, { dimColor: true, children: ["\u2502 ", _jsx(Text, { dimColor: true, children: "Press Enter or Esc to continue..." }), "                                \u2502"] }), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] }));
+}
+// Skills panel - matches specs panel design
+function SkillsPanel({ onClose }) {
+    useInput((_, key) => {
+        if (key.escape || key.return)
+            onClose();
+    });
+    const workflow = SKILLS.filter(s => s.group === 'workflow');
+    const design = SKILLS.filter(s => s.group === 'design');
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500\u2500\u2500 SKILLS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E" }), _jsx(Text, { dimColor: true, children: "\u2502 Things the AI learned so you don't have to:                          \u2502" }), _jsxs(Text, { dimColor: true, children: ["\u251C\u2500\u2500\u2500 WORKFLOW (", String(workflow.length).padEnd(2), ") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524"] }), workflow.map(s => (_jsxs(Text, { dimColor: true, children: ["\u2502   ", s.name.padEnd(24), " ", _jsx(Text, { dimColor: true, children: s.description.substring(0, 40).padEnd(40) }), "\u2502"] }, s.name))), _jsxs(Text, { dimColor: true, children: ["\u251C\u2500\u2500\u2500 DESIGN (", String(design.length).padEnd(2), ") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524"] }), design.map(s => (_jsxs(Text, { dimColor: true, children: ["\u2502   ", s.name.padEnd(24), " ", _jsx(Text, { dimColor: true, children: s.description.substring(0, 40).padEnd(40) }), "\u2502"] }, s.name))), _jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524" }), _jsx(Text, { dimColor: true, children: "\u2502 Press Enter or Esc to continue...                                   \u2502" }), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] }));
+}
+// Frame component - matches specs panel design
+function Frame({ title, children, hint }) {
+    // Calculate padding for consistent width
+    const titleSection = `─── ${title} `;
+    const hintSection = hint ? ` ${hint} ` : ' ';
+    const remaining = 71 - titleSection.length - hintSection.length;
+    const padding = '─'.repeat(Math.max(0, remaining));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { dimColor: true, children: ["\u256D\u2500\u2500\u2500", ' ', _jsx(Text, { bold: true, color: "cyan", children: title }), ' ', hint ? _jsx(Text, { dimColor: true, children: hint }) : null, ' ', padding, "\u256E"] }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(Text, { dimColor: true, children: "\u2502" }), children, _jsx(Text, { dimColor: true, children: "\u2502" })] }), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] }));
+}
+// Input with slash command support
+function CommandInput({ value, onChange, onSubmit, placeholder, validate, }) {
+    const [showAutocomplete, setShowAutocomplete] = useState(false);
+    const [error, setError] = useState();
+    useEffect(() => {
+        setShowAutocomplete(value.startsWith('/') && value.length < 10);
+    }, [value]);
+    const handleSubmit = (val) => {
+        if (val.startsWith('/')) {
+            // Handle as command
+            onSubmit(val);
+        }
+        else {
+            // Validate and submit
+            const err = validate?.(val);
+            if (err) {
+                setError(err);
+            }
+            else {
+                setError(undefined);
+                onSubmit(val);
+            }
+        }
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "\u203A " }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: handleSubmit, placeholder: placeholder })] }), showAutocomplete && (_jsx(Box, { marginTop: 1, children: _jsx(Autocomplete, { query: value, commands: COMMANDS, onSelect: (cmd) => {
+                        onChange(cmd);
+                        onSubmit(cmd);
+                    } }) })), error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) }))] }));
+}
+function WizardApp({ defaultName, onComplete }) {
+    const { exit } = useApp();
+    const [step, setStep] = useState('name');
+    const [panel, setPanel] = useState(null);
+    const [input, setInput] = useState(defaultName || '');
+    // Collected choices
+    const [projectName, setProjectName] = useState('');
+    const [bundle, setBundle] = useState('everything');
+    const [selectedSkills, setSelectedSkills] = useState([]);
+    const [includeHomepage, setIncludeHomepage] = useState(true);
+    const [initGit, setInitGit] = useState(true);
+    // Handle escape to quit
+    useInput((_, key) => {
+        if (key.escape && !panel) {
+            console.log('\n' + random(DREAD.cancel));
+            exit();
+        }
+    });
+    // Handle slash commands
+    const handleCommand = (cmd) => {
+        const normalized = cmd.toLowerCase().trim();
+        if (normalized === '/help' || normalized === '/h') {
+            setPanel('help');
+        }
+        else if (normalized === '/skills' || normalized === '/list') {
+            setPanel('skills');
+        }
+        else if (normalized === '/quit' || normalized === '/q' || normalized === '/exit') {
+            console.log('\n' + random(DREAD.cancel));
+            exit();
+        }
+        setInput('');
+    };
+    // Handle name submission
+    const handleNameSubmit = (value) => {
+        if (value.startsWith('/')) {
+            handleCommand(value);
+            return;
+        }
+        setProjectName(value);
+        setStep('bundle');
+    };
+    // Validate project name
+    const validateName = (value) => {
+        if (!value)
+            return 'Required';
+        if (!/^[a-z0-9-]+$/.test(value))
+            return 'Lowercase, numbers, dashes only';
+        if (value.length > 64)
+            return 'Max 64 chars';
+        const targetDir = path.resolve(process.cwd(), value);
+        if (fs.existsSync(targetDir))
+            return `Directory "${value}" already exists`;
+        return undefined;
+    };
+    // Bundle options
+    const bundleOptions = [
+        { label: 'Everything', value: 'everything', hint: `All ${SKILLS.length} skills · no restraint` },
+        { label: 'Designer Essentials', value: 'designer', hint: `${BUNDLES.designer.skills.length} skills · UI, a11y, Figma` },
+        { label: 'Workflow Only', value: 'workflow', hint: `${SKILLS.filter(s => s.group === 'workflow').length} skills · process only` },
+        { label: 'Let Me Pick', value: 'custom', hint: 'Control freak? Respect.' },
+    ];
+    const handleBundleSelect = (item) => {
+        const b = item.value;
+        setBundle(b);
+        if (b === 'custom') {
+            setStep('skills-workflow');
+        }
+        else {
+            // Set skills based on bundle
+            if (b === 'everything') {
+                setSelectedSkills(SKILLS.map(s => s.name));
+            }
+            else if (b === 'designer') {
+                setSelectedSkills([...BUNDLES.designer.skills]);
+            }
+            else {
+                setSelectedSkills(SKILLS.filter(s => s.group === 'workflow').map(s => s.name));
+            }
+            setStep('homepage');
+        }
+    };
+    // Homepage options
+    const homepageOptions = [
+        { label: 'Yes', value: true, hint: '+6 files · delete it later' },
+        { label: 'No', value: false, hint: 'Blank App.tsx · the void awaits' },
+    ];
+    // Git options
+    const gitOptions = [
+        { label: 'Yes', value: true, hint: 'Fresh repo · future you says thanks' },
+        { label: 'No', value: false, hint: 'No .git · living dangerously' },
+    ];
+    // Render panels
+    if (panel === 'help') {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { showSpecs: false }), _jsx(HelpPanel, { onClose: () => setPanel(null) })] }));
+    }
+    if (panel === 'skills') {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { showSpecs: false }), _jsx(SkillsPanel, { onClose: () => setPanel(null) })] }));
+    }
+    // Show full header with specs only on first screen
+    const isFirstScreen = step === 'name';
+    // Map step to number for progress bar
+    const stepToNum = {
+        'name': 1,
+        'bundle': 2,
+        'skills-workflow': 2,
+        'skills-design': 2,
+        'homepage': 3,
+        'git': 4,
+        'done': 4,
+    };
+    const currentStep = stepToNum[step];
+    const totalSteps = 4;
+    // Render steps
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { showSpecs: isFirstScreen, step: isFirstScreen ? undefined : currentStep, totalSteps: isFirstScreen ? undefined : totalSteps }), step === 'name' && (_jsxs(Frame, { title: "PROJECT NAME", hint: "lowercase \u00B7 numbers \u00B7 dashes \u00B7 /help", children: [_jsx(Text, { children: "What are we calling this?" }), _jsx(Box, { marginTop: 1, children: _jsx(CommandInput, { value: input, onChange: setInput, onSubmit: handleNameSubmit, placeholder: "my-app", validate: validateName }) })] })), step === 'bundle' && (_jsxs(Frame, { title: "SKILL BUNDLE", children: [_jsx(Text, { children: "How much help do you want?" }), _jsx(Box, { marginTop: 1, children: _jsx(SelectInput, { items: bundleOptions.map(o => ({
+                                label: `${o.label} - ${o.hint}`,
+                                value: o.value
+                            })), onSelect: handleBundleSelect }) })] })), step === 'homepage' && (_jsxs(Frame, { title: "EXAMPLE HOMEPAGE", children: [_jsx(Text, { children: "Include the example homepage?" }), _jsx(Box, { marginTop: 1, children: _jsx(SelectInput, { items: homepageOptions.map(o => ({
+                                label: `${o.label} - ${o.hint}`,
+                                value: o.value
+                            })), onSelect: (item) => {
+                                setIncludeHomepage(item.value);
+                                setStep('git');
+                            } }) })] })), step === 'git' && (_jsxs(Frame, { title: "GIT INIT", children: [_jsx(Text, { children: "Initialize git?" }), _jsx(Box, { marginTop: 1, children: _jsx(SelectInput, { items: gitOptions.map(o => ({
+                                label: `${o.label} - ${o.hint}`,
+                                value: o.value
+                            })), onSelect: (item) => {
+                                setInitGit(item.value);
+                                // Complete!
+                                onComplete({
+                                    projectName,
+                                    bundle,
+                                    selectedSkills,
+                                    includeHomepage,
+                                    initGit: item.value,
+                                });
+                            } }) })] })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E" }), _jsx(Text, { dimColor: true, children: "\u2502 Type / for commands \u00B7 \u2191\u2193 navigate \u00B7 Enter confirm \u00B7 Esc quit       \u2502" }), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] })] }));
+}
+// Export the prompt runner
+export function runInkPrompts(defaultName) {
+    return new Promise((resolve) => {
+        const { unmount, waitUntilExit } = render(_jsx(WizardApp, { defaultName: defaultName, onComplete: (choices) => {
+                unmount();
+                resolve(choices);
+            } }));
+        waitUntilExit().then(() => {
+            resolve(null);
+        });
+    });
+}
+// Init mode prompts (simpler)
+function InitApp({ onComplete }) {
+    const { exit } = useApp();
+    const [bundle, setBundle] = useState('everything');
+    useInput((_, key) => {
+        if (key.escape) {
+            console.log('\n' + random(DREAD.cancel));
+            exit();
+        }
+    });
+    const bundleOptions = [
+        { label: 'Everything', value: 'everything', hint: `All ${SKILLS.length} skills` },
+        { label: 'Designer Essentials', value: 'designer', hint: `${BUNDLES.designer.skills.length} skills` },
+        { label: 'Workflow Only', value: 'workflow', hint: `${SKILLS.filter(s => s.group === 'workflow').length} skills` },
+    ];
+    const handleSelect = (item) => {
+        let skills;
+        if (item.value === 'everything') {
+            skills = SKILLS.map(s => s.name);
+        }
+        else if (item.value === 'designer') {
+            skills = [...BUNDLES.designer.skills];
+        }
+        else {
+            skills = SKILLS.filter(s => s.group === 'workflow').map(s => s.name);
+        }
+        onComplete({ selectedSkills: skills });
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { showSpecs: true }), _jsxs(Frame, { title: "INIT MODE", hint: "Adding to existing project", children: [_jsx(Text, { children: "Which skills do you want?" }), _jsx(Box, { marginTop: 1, children: _jsx(SelectInput, { items: bundleOptions.map(o => ({
+                                label: `${o.label} - ${o.hint}`,
+                                value: o.value
+                            })), onSelect: handleSelect }) })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256E" }), _jsx(Text, { dimColor: true, children: "\u2502 \u2191\u2193 navigate \u00B7 Enter confirm \u00B7 Esc quit                              \u2502" }), _jsx(Text, { dimColor: true, children: "\u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256F" })] })] }));
+}
+export function runInkInitPrompts() {
+    return new Promise((resolve) => {
+        const { unmount, waitUntilExit } = render(_jsx(InitApp, { onComplete: (choices) => {
+                unmount();
+                resolve(choices);
+            } }));
+        waitUntilExit().then(() => {
+            resolve(null);
+        });
+    });
+}

package/dist/prompts.d.ts

@@ -0,0 +1,16 @@
+export interface UserChoices {
+    projectName: string;
+    bundle: 'everything' | 'designer' | 'workflow' | 'custom';
+    selectedSkills: string[];
+    includeHomepage: boolean;
+    initGit: boolean;
+}
+export interface InitChoices {
+    selectedSkills: string[];
+}
+export declare function runPrompts(defaultName?: string): Promise<UserChoices | null>;
+/**
+ * Prompts for --init mode (existing project)
+ * Only asks about skills selection
+ */
+export declare function runInitPrompts(): Promise<InitChoices | null>;