@creatorem/cli 0.0.1 → 1.0.4

package/src/commands/create.tsx

@@ -0,0 +1,1119 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useApp, useInput } from 'ink';
+import { MultiSelect } from '../ui/multi-select.js';
+import Spinner from 'ink-spinner';
+import Gradient from 'ink-gradient';
+import TextInput from 'ink-text-input';
+import fs from 'fs-extra';
+import path from 'path';
+import os from 'os';
+import { execa } from 'execa';
+import { features as dashboardFeatures } from '../dashboard-features/index.js';
+import { mobileFeatures } from '../mobile-features/index.js';
+import type { FeatureRemover } from '../dashboard-features/types.js';
+import { processFeature, processFeatureRepo, writeFeatureSelectionManifest } from '../dashboard-features/manager.js';
+import { generateDashboardEnvTemplate } from '../utils/env-template.js';
+import { updateMobileI18nConfig, collectFeatureNamespaces } from './create-mobile.js';
+import { updateDashboardI18nNamespaces } from './create-dashboard.js';
+
+const PRO_REPO = 'https://github.com/creatorem/creatorem-saas-kit';
+const OSS_REPO = 'https://github.com/creatorem/creatorem-saas-kit-oss';
+
+const detectPackageManager = (root: string): string => {
+    if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';
+    if (fs.existsSync(path.join(root, 'bun.lockb')) || fs.existsSync(path.join(root, 'bun.lock'))) return 'bun';
+    return 'npm';
+};
+
+const checkProAccess = async (): Promise<boolean> => {
+    try {
+        await execa('git', ['ls-remote', '--heads', PRO_REPO], { stdio: 'pipe', timeout: 10000 });
+        return true;
+    } catch {
+        return false;
+    }
+};
+
+/** Try to resolve the GitHub username via the GH CLI, fall back to git config. */
+const getGitHubUsername = async (): Promise<string> => {
+    try {
+        const r = await execa('gh', ['api', 'user', '--jq', '.login'], { stdio: 'pipe', timeout: 5000 });
+        const u = r.stdout.trim();
+        if (u) return u;
+    } catch { /* fall through */ }
+    try {
+        const r = await execa('git', ['config', 'user.name'], { stdio: 'pipe', timeout: 3000 });
+        const u = r.stdout.trim();
+        if (u) return u;
+    } catch { /* fall through */ }
+    return '';
+};
+
+/** Convert any string to a valid kebab-case folder name. */
+const toKebabCase = (input: string): string =>
+    input
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-') // replace non-alphanumeric runs with a dash
+        .replace(/^-+|-+$/g, '');    // strip leading/trailing dashes
+
+// ── Language-processing helpers ───────────────────────────────────────────────
+
+/** Walk `rootDir` and return every directory named `locales` (non-recursive past a match). */
+const findLocalesDirs = async (rootDir: string): Promise<string[]> => {
+    const result: string[] = [];
+    const SKIP = new Set(['node_modules', '.git', '.next', '.expo', '.turbo', 'dist', '.cache']);
+    const walk = async (dir: string) => {
+        let entries: Awaited<ReturnType<typeof fs.readdir>>;
+        try { entries = await fs.readdir(dir, { withFileTypes: true }); }
+        catch { return; }
+        for (const entry of entries) {
+            if (!entry.isDirectory()) continue;
+            if (SKIP.has(entry.name)) continue;
+            const fullPath = path.join(dir, entry.name);
+            if (entry.name === 'locales') {
+                result.push(fullPath);
+            } else {
+                await walk(fullPath);
+            }
+        }
+    };
+    await walk(rootDir);
+    return result;
+};
+
+/** Recursively replace every string value in a JSON object with an empty string. */
+const emptyJsonValues = (obj: unknown): unknown => {
+    if (typeof obj === 'string') return '';
+    if (Array.isArray(obj)) return (obj as unknown[]).map(emptyJsonValues);
+    if (obj !== null && typeof obj === 'object') {
+        const result: Record<string, unknown> = {};
+        for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
+            result[k] = emptyJsonValues(v);
+        }
+        return result;
+    }
+    return obj;
+};
+
+/**
+ * For every `locales` directory found under `rootDir`:
+ *  - Removes sub-dirs for languages not in `selectedLanguages` (never removes 'en').
+ *  - Creates empty-value copies of the `en` locale for any new languages.
+ */
+const processLanguages = async (rootDir: string, selectedLanguages: string[]): Promise<void> => {
+    const localesDirs = await findLocalesDirs(rootDir);
+    for (const localesDir of localesDirs) {
+        let entries: Awaited<ReturnType<typeof fs.readdir>>;
+        try { entries = await fs.readdir(localesDir, { withFileTypes: true }); }
+        catch { continue; }
+        const existingLangDirs = entries.filter(e => e.isDirectory()).map(e => e.name);
+
+        // Remove unselected languages (never remove 'en')
+        for (const lang of existingLangDirs) {
+            if (lang === 'en') continue;
+            if (!selectedLanguages.includes(lang)) {
+                await fs.remove(path.join(localesDir, lang));
+            }
+        }
+
+        // Create new language dirs from 'en' with empty string values
+        const enDir = path.join(localesDir, 'en');
+        if (!fs.existsSync(enDir)) continue;
+
+        for (const lang of selectedLanguages) {
+            if (lang === 'en') continue;
+            if (existingLangDirs.includes(lang)) continue; // already present
+
+            const newLangDir = path.join(localesDir, lang);
+            await fs.ensureDir(newLangDir);
+            const enFiles = (await fs.readdir(enDir)).filter((f: string) => f.endsWith('.json'));
+            for (const file of enFiles) {
+                const enContent = await fs.readJson(path.join(enDir, file));
+                await fs.writeJson(path.join(newLangDir, file), emptyJsonValues(enContent), { spaces: 4 });
+            }
+        }
+    }
+};
+
+/** Overwrites `packages/shared/src/config/defined-languages.ts` with the given language list. */
+const updateDefinedLanguages = async (rootDir: string, selectedLanguages: string[]): Promise<void> => {
+    const filePath = path.join(rootDir, 'packages', 'shared', 'src', 'config', 'defined-languages.ts');
+    if (!fs.existsSync(filePath)) return;
+    const langsStr = selectedLanguages.map(l => `'${l}'`).join(', ');
+    await fs.writeFile(
+        filePath,
+        `export const DEFAULT_LANG = 'en';\nexport const SUPPORTED_LANGS = [${langsStr}];\n`,
+        'utf-8',
+    );
+};
+
+const APP_DIR_NAMES: Record<string, string[]> = {
+    marketing: ['marketing', 'web', 'www'],
+    dashboard: ['dashboard'],
+    mobile: ['mobile'],
+    api: ['api'],
+};
+
+// ── Step type ─────────────────────────────────────────────────────────────────
+//
+// Each app is asked individually so the user immediately sees follow-up
+// questions (e.g. feature selection) right after confirming that app.
+//
+// Flow:
+//   name → git-setup → app-marketing → app-dashboard
+//     → [dashboard-features] → app-mobile → [mobile-features]
+//     → app-example → [example-apps] → languages → [languages-custom] → processing → done
+
+type Step =
+    | 'intro'
+    | 'name'
+    | 'git-setup'
+    | 'app-marketing'
+    | 'app-dashboard'
+    | 'dashboard-features'
+    | 'app-mobile'
+    | 'mobile-features'
+    | 'app-example'
+    | 'example-apps'
+    | 'example-apps-loading'
+    | 'languages'
+    | 'languages-custom'
+    | 'processing'
+    | 'done'
+    | 'error';
+
+// ── Welcome banner ────────────────────────────────────────────────────────────
+
+interface WelcomeBannerProps {
+    username: string;
+    isPro: boolean;
+}
+
+const WelcomeBanner: React.FC<WelcomeBannerProps> = ({ username, isPro }) => {
+    const repoName = isPro ? 'creatorem-saas-kit' : 'creatorem-saas-kit-oss';
+    return (
+        <Box flexDirection="column" marginBottom={1}>
+            <Text> </Text>
+            <Text>Hi {username || 'there'}!</Text>
+            <Text>
+                {isPro
+                    ? <Text bold color="green">Premium user detected.</Text>
+                    : <Text bold color="blue">OSS usage.</Text>
+                }
+                {' We gonna use the '}
+                <Text bold color="green">{repoName}</Text>
+                {' repository.'}
+            </Text>
+        </Box>
+    );
+};
+
+// ── Persistent choices display ────────────────────────────────────────────────
+
+interface HistoryEntry {
+    label: string;
+    value: string;
+    valueColor?: string;
+}
+
+/** Renders all confirmed choices so far above the current prompt. */
+const ChoicesDisplay: React.FC<{ entries: HistoryEntry[] }> = ({ entries }) => {
+    if (entries.length === 0) return null;
+    return (
+        <Box flexDirection="column" marginBottom={1}>
+            {entries.map((entry, i) => (
+                <Box key={i}>
+                    <Box minWidth={22}>
+                        <Text color="gray">{entry.label}</Text>
+                    </Box>
+                    <Text color={entry.valueColor ?? 'white'}>{entry.value}</Text>
+                </Box>
+            ))}
+        </Box>
+    );
+};
+
+// ── Confirm sub-component ─────────────────────────────────────────────────────
+
+interface ConfirmProps {
+    question: string;
+    onConfirm: (yes: boolean) => void;
+}
+
+const Confirm: React.FC<ConfirmProps> = ({ question, onConfirm }) => {
+    const [focused, setFocused] = useState<0 | 1>(0); // 0 = Yes, 1 = No
+
+    useInput((_input, key) => {
+        if (key.leftArrow || key.upArrow) setFocused(0);
+        if (key.rightArrow || key.downArrow) setFocused(1);
+        if (key.return) onConfirm(focused === 0);
+    });
+
+    return (
+        <Box flexDirection="column">
+            <Text bold>{question}</Text>
+            <Box marginTop={1}>
+                <Box marginRight={4}>
+                    <Text color={focused === 0 ? 'cyan' : undefined}>
+                        {focused === 0 ? '› ' : '  '}Yes
+                    </Text>
+                </Box>
+                <Text color={focused === 1 ? 'cyan' : undefined}>
+                    {focused === 1 ? '› ' : '  '}No
+                </Text>
+            </Box>
+            <Box marginTop={1}>
+                <Text color="gray" dimColor>Arrow keys · Enter to confirm</Text>
+            </Box>
+        </Box>
+    );
+};
+
+// ── Helper ────────────────────────────────────────────────────────────────────
+
+/** Compact summary of selected feature keys for the history display. */
+function summariseFeatures(
+    selectedKeys: string[],
+    allFeatures: Array<{ key: string }>,
+): string {
+    if (selectedKeys.length === 0) return 'Core only';
+    if (selectedKeys.length === allFeatures.length) return `All (${allFeatures.length})`;
+    const MAX = 4;
+    const keys = allFeatures.filter(f => selectedKeys.includes(f.key)).map(f => f.key);
+    return keys.length <= MAX
+        ? keys.join(', ')
+        : `${keys.slice(0, MAX).join(', ')} +${keys.length - MAX} more`;
+}
+
+// ── Language selection items ──────────────────────────────────────────────────
+//   'en' is always included and is shown as a static note, not in this list.
+const OPTIONAL_LANGUAGE_ITEMS = [
+    {
+        value: 'fr',
+        label: 'French (fr)',
+        title: 'French (fr)',
+        description: 'French language support',
+    },
+];
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+interface CreateProps {
+    args: string[];
+    flags?: Record<string, any>;
+}
+
+interface ExampleAppItem {
+    value: string;
+    title: string;
+    description?: string;
+}
+
+interface MonorepoManifest {
+    monorepoName: string;
+    selectedApps: string[];
+    selectedExampleApps: string[];
+    availableFeatures: string[];
+    featuresByApp: {
+        dashboard: string[];
+        mobile: string[];
+    };
+    cliOptions: {
+        gitInit: boolean;
+        template: 'pro' | 'oss';
+    };
+}
+
+const writeMonorepoManifest = async (projectRoot: string, manifest: MonorepoManifest) => {
+    const metadataDir = path.join(projectRoot, '.creatorem');
+    await fs.ensureDir(metadataDir);
+    await fs.writeJson(path.join(metadataDir, 'monorepo.json'), manifest, { spaces: 2 });
+};
+
+export const Create: React.FC<CreateProps> = ({ args, flags = {} }) => {
+    const { exit } = useApp();
+
+    const initialName = args[0] ? toKebabCase(args[0]) : '';
+
+    // ── Core state ────────────────────────────────────────────────────────────
+    const [projectName, setProjectName] = useState(initialName);
+    const [nameError, setNameError] = useState('');
+    const [step, setStep] = useState<Step>('intro');
+
+    // Collected choices
+    const [initGit, setInitGit] = useState(false);
+    const [includeMarketing, setIncludeMarketing] = useState(false);
+    const [includeDashboard, setIncludeDashboard] = useState(false);
+    const [includeMobile, setIncludeMobile] = useState(false);
+    const [selectedDashboardFeatures, setSelectedDashboardFeatures] = useState<string[]>([]);
+    const [selectedMobileFeatures, setSelectedMobileFeatures] = useState<string[]>([]);
+    const [availableExampleApps, setAvailableExampleApps] = useState<ExampleAppItem[]>([]);
+
+    // Language selection
+    const [pendingApps, setPendingApps] = useState<string[]>([]);
+    const [pendingExampleApps, setPendingExampleApps] = useState<string[]>([]);
+    const [selectedOptionalLangs, setSelectedOptionalLangs] = useState<string[]>(['fr']);
+    const [customLangInput, setCustomLangInput] = useState('');
+    // Guards to prevent double-submit (terminal sends \r\n as two events)
+    const processingStartedRef = useRef(false);
+
+    // History shown above every prompt — pre-seeded if name came from CLI args
+    const [history, setHistory] = useState<HistoryEntry[]>(
+        initialName ? [{ label: 'Project', value: initialName, valueColor: 'cyan' }] : [],
+    );
+
+    // Processing
+    const [currentAction, setCurrentAction] = useState('');
+    const [error, setError] = useState('');
+    const [usedProRepo, setUsedProRepo] = useState<boolean | null>(null);
+    const [githubUsername, setGithubUsername] = useState('');
+
+    // ── Intro check — runs once on mount ─────────────────────────────────────
+    useEffect(() => {
+        Promise.all([checkProAccess(), getGitHubUsername()])
+            .then(([hasPro, username]) => {
+                setUsedProRepo(hasPro);
+                setGithubUsername(username);
+                setStep(initialName ? 'git-setup' : 'name');
+            })
+            .catch(() => {
+                setUsedProRepo(false);
+                setStep(initialName ? 'git-setup' : 'name');
+            });
+    }, []);
+
+    // ── Custom language text input — handled at component level to avoid ink-text-input key-bleed ──
+    // isActive: only processes input when the languages-custom step is shown.
+    // The step is always transitioned into via setImmediate (in handleLanguagesSubmit), so by the
+    // time any keypress reaches here the previous step's stdin events are fully drained.
+    useInput((input, key) => {
+        if (key.return) {
+            if (processingStartedRef.current) return;
+            processingStartedRef.current = true;
+            handleCustomLangsSubmit(customLangInput);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setCustomLangInput(prev => prev.slice(0, -1));
+            return;
+        }
+        if (key.escape) {
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && !key.tab) {
+            setCustomLangInput(prev => prev + input);
+        }
+    }, { isActive: step === 'languages-custom' });
+
+    const getFeatureTitle = (feature: FeatureRemover) => feature.cliUI.title;
+
+    const dashboardFeatureItems = dashboardFeatures.map(feature => ({
+        label: feature.cliUI.title,
+        value: feature.key,
+        title: feature.cliUI.title,
+        description: feature.cliUI.description,
+        features: feature.cliUI.features,
+    }));
+    const mobileFeatureItems = mobileFeatures.map(feature => ({
+        label: feature.cliUI.title,
+        value: feature.key,
+        title: feature.cliUI.title,
+        description: feature.cliUI.description,
+        features: feature.cliUI.features,
+    }));
+
+    const addHistory = (label: string, value: string, valueColor?: string) =>
+        setHistory(prev => [...prev, { label, value, valueColor }]);
+
+    const loadAvailableExampleApps = async (): Promise<ExampleAppItem[]> => {
+        const tmpDir = path.join(os.tmpdir(), `creatorem-examples-${Date.now()}`);
+
+        try {
+            // Reuse the pro status already resolved during the intro check
+            const hasPro = usedProRepo ?? false;
+            const repoUrl = hasPro ? PRO_REPO : OSS_REPO;
+
+            setCurrentAction('Loading available example apps...');
+            await execa('git', ['clone', '--depth', '1', repoUrl, tmpDir], { stdio: 'pipe' });
+
+            const examplesDir = path.join(tmpDir, 'examples');
+            if (!fs.existsSync(examplesDir)) return [];
+
+            const entries = await fs.readdir(examplesDir, { withFileTypes: true });
+            const items: ExampleAppItem[] = [];
+
+            for (const entry of entries) {
+                if (!entry.isDirectory()) continue;
+
+                const dirName = entry.name;
+                const packageJsonPath = path.join(examplesDir, dirName, 'package.json');
+                if (!fs.existsSync(packageJsonPath)) continue;
+
+                let pkg: Record<string, unknown> = {};
+                try {
+                    pkg = await fs.readJson(packageJsonPath);
+                } catch {
+                    continue;
+                }
+
+                const title =
+                    (typeof pkg.title === 'string' && pkg.title.trim()) ||
+                    (typeof pkg.displayName === 'string' && pkg.displayName.trim()) ||
+                    (typeof pkg.name === 'string' && pkg.name.trim()) ||
+                    dirName;
+                const description =
+                    typeof pkg.description === 'string' && pkg.description.trim()
+                        ? pkg.description.trim()
+                        : undefined;
+
+                items.push({
+                    value: dirName,
+                    title,
+                    description,
+                });
+            }
+
+            return items.sort((a, b) => a.title.localeCompare(b.title));
+        } finally {
+            if (fs.existsSync(tmpDir)) {
+                await fs.remove(tmpDir).catch(() => { });
+            }
+        }
+    };
+
+    const summariseExampleApps = (selectedDirs: string[]): string => {
+        if (selectedDirs.length === 0) return 'None';
+        const selectedTitles = availableExampleApps
+            .filter(item => selectedDirs.includes(item.value))
+            .map(item => item.title);
+        if (selectedTitles.length === 0) return 'None';
+        if (selectedTitles.length <= 3) return selectedTitles.join(', ');
+        return `${selectedTitles.slice(0, 3).join(', ')} +${selectedTitles.length - 3} more`;
+    };
+
+    // ── Async scaffolding work ────────────────────────────────────────────────
+
+    const runCreate = async (
+        name: string,
+        apps: string[],
+        gitInit: boolean,
+        dashFeatureKeys: string[],
+        mobFeatureKeys: string[],
+        exampleAppDirs: string[],
+        selectedLanguages: string[],
+    ) => {
+        const targetDir = path.resolve(process.cwd(), name);
+        const tmpDir = path.join(os.tmpdir(), `creatorem-create-${Date.now()}`);
+        const dashboardSelected = apps.includes('dashboard');
+        const mobileSelected = apps.includes('mobile');
+        const shouldIncludeApi = mobileSelected && !dashboardSelected;
+        const appsToProvision = Array.from(
+            new Set(shouldIncludeApi ? [...apps, 'api'] : apps),
+        );
+        const selectedDashboardFeatureKeys = dashboardFeatures
+            .filter(feature => dashFeatureKeys.includes(feature.key))
+            .map(feature => feature.key);
+        const selectedMobileFeatureKeys = mobileFeatures
+            .filter(feature => mobFeatureKeys.includes(feature.key))
+            .map(feature => feature.key);
+        const selectedAppKeys = Array.from(
+            new Set(appsToProvision.map(app => app.trim()).filter(Boolean)),
+        );
+        const selectedExampleAppKeys = Array.from(
+            new Set(exampleAppDirs.map(example => example.trim()).filter(Boolean)),
+        );
+
+        try {
+            // 1. Repo URL — pro status already resolved during intro check ────
+            const hasPro = usedProRepo ?? false;
+            const repoUrl = hasPro ? PRO_REPO : OSS_REPO;
+
+            // 2. Clone ─────────────────────────────────────────────────────────
+            setCurrentAction('Cloning template repository (this may take a moment)...');
+            await execa('git', ['clone', '--depth', '1', repoUrl, tmpDir], { stdio: 'pipe' });
+            // Remove .git — we'll re-init below if requested
+            await fs.remove(path.join(tmpDir, '.git'));
+
+            // 3. Remove unwanted apps ──────────────────────────────────────────
+            setCurrentAction('Removing unwanted apps...');
+            const appsDir = path.join(tmpDir, 'apps');
+            if (fs.existsSync(appsDir)) {
+                const appEntries = await fs.readdir(appsDir);
+                for (const entry of appEntries) {
+                    const shouldKeep = appsToProvision.some(app => (APP_DIR_NAMES[app] ?? []).includes(entry));
+                    if (!shouldKeep) await fs.remove(path.join(appsDir, entry));
+                }
+            }
+
+            const examplesDir = path.join(tmpDir, 'examples');
+            if (fs.existsSync(examplesDir)) {
+                if (!appsToProvision.includes('example') || exampleAppDirs.length === 0) {
+                    await fs.remove(examplesDir);
+                } else {
+                    const selected = new Set(exampleAppDirs);
+                    const exampleEntries = await fs.readdir(examplesDir, { withFileTypes: true });
+                    for (const entry of exampleEntries) {
+                        if (!entry.isDirectory()) continue;
+                        if (!selected.has(entry.name)) {
+                            await fs.remove(path.join(examplesDir, entry.name));
+                        }
+                    }
+                }
+            }
+
+            const dashboardIncluded = appsToProvision.includes('dashboard');
+            const mobileIncluded    = appsToProvision.includes('mobile');
+            const apiIncluded       = appsToProvision.includes('api');
+            const apiOnlyBackend    = apiIncluded && !dashboardIncluded;
+            const exampleIncluded   = appsToProvision.includes('example');
+
+            // 4. App-level feature removals ────────────────────────────────────
+            //    Applied per-app independently — each app only cares about its
+            //    own feature selection regardless of what the other app chose.
+
+            if (dashboardIncluded) {
+                const dashboardAppDir = path.join(tmpDir, 'apps', 'dashboard');
+                if (fs.existsSync(dashboardAppDir)) {
+                    const toRemove = dashboardFeatures.filter(f => !selectedDashboardFeatureKeys.includes(f.key));
+                    for (const feature of toRemove) {
+                        setCurrentAction(`[dashboard] Removing: ${getFeatureTitle(feature)}...`);
+                        await processFeature(feature, dashboardAppDir);
+                    }
+                    setCurrentAction('[dashboard] Generating .env.template...');
+                    await generateDashboardEnvTemplate(dashboardAppDir, tmpDir, {
+                        createEnvFile: true,
+                        fallbackMonoRoot: process.cwd(),
+                    });
+                    setCurrentAction('[dashboard] Saving selected features metadata...');
+                    await writeFeatureSelectionManifest(dashboardAppDir, 'dashboard', selectedDashboardFeatureKeys);
+
+                    const dashRemovedNs = collectFeatureNamespaces(toRemove);
+                    if (dashRemovedNs.length > 0) {
+                        setCurrentAction('[dashboard] Updating i18n namespaces...');
+                        await updateDashboardI18nNamespaces(dashboardAppDir, dashRemovedNs);
+                    }
+                }
+            }
+
+            if (mobileIncluded) {
+                const mobileAppDir = path.join(tmpDir, 'apps', 'mobile');
+                if (fs.existsSync(mobileAppDir)) {
+                    const toRemove = mobileFeatures.filter(f => !selectedMobileFeatureKeys.includes(f.key));
+                    for (const feature of toRemove) {
+                        setCurrentAction(`[mobile] Removing: ${getFeatureTitle(feature)}...`);
+                        await processFeature(feature, mobileAppDir, 'mobile');
+                    }
+                    setCurrentAction('[mobile] Generating .env.template...');
+                    await generateDashboardEnvTemplate(mobileAppDir, tmpDir, {
+                        createEnvFile: true,
+                        fallbackMonoRoot: process.cwd(),
+                    });
+                    setCurrentAction('[mobile] Saving selected features metadata...');
+                    await writeFeatureSelectionManifest(mobileAppDir, 'mobile', selectedMobileFeatureKeys);
+                }
+            }
+
+            if (apiIncluded) {
+                const apiAppDir = path.join(tmpDir, 'apps', 'api');
+                if (!fs.existsSync(apiAppDir)) {
+                    throw new Error('Template repo does not contain apps/api — please report this issue.');
+                }
+                const trpcRoutePath = path.join(apiAppDir, 'app', 'api', 'trpc', '[trpc]', 'route.ts');
+                if (!fs.existsSync(trpcRoutePath)) {
+                    throw new Error('apps/api is missing app/api/trpc/[trpc]/route.ts in template repo.');
+                }
+                if (apiOnlyBackend) {
+                    const toRemoveForApi = mobileFeatures.filter(
+                        feature => !selectedMobileFeatureKeys.includes(feature.key),
+                    );
+                    for (const feature of toRemoveForApi) {
+                        setCurrentAction(`[api] Removing: ${getFeatureTitle(feature)}...`);
+                        await processFeature(feature, apiAppDir, 'dashboard');
+                    }
+                }
+                setCurrentAction('[api] Generating .env.template...');
+                await generateDashboardEnvTemplate(apiAppDir, tmpDir, {
+                    createEnvFile: true,
+                    fallbackMonoRoot: process.cwd(),
+                });
+            }
+
+            // 5. Repo-level cleanup ────────────────────────────────────────────
+            //
+            //    - packages/pco-shared is example-specific and is removed when
+            //      no example app is included.
+            //    - kit/X is deleted only when X is not needed by ANY selected app.
+            //    If an example app is included we keep pco-shared and skip
+            //    feature-driven repo cleanup because examples may depend on
+            //    arbitrary kit packages.
+            //
+            //    Cross-app safety:
+            //      dashboard without 'organization' + mobile WITH 'organization'
+            //      → featureKeysNeeded contains 'organization' → kit/organization stays
+
+            if (!exampleIncluded) {
+                const pcoSharedPackageDir = path.join(tmpDir, 'packages', 'pco-shared');
+                if (fs.existsSync(pcoSharedPackageDir)) {
+                    setCurrentAction('Removing packages/pco-shared...');
+                    await fs.remove(pcoSharedPackageDir);
+                }
+
+                const toRemoveFromRepo = apiOnlyBackend
+                    ? mobileFeatures.filter(f => !selectedMobileFeatureKeys.includes(f.key))
+                    : (() => {
+                        const featureKeysNeeded = new Set<string>();
+                        if (dashboardIncluded) selectedDashboardFeatureKeys.forEach(k => featureKeysNeeded.add(k));
+                        if (mobileIncluded)    selectedMobileFeatureKeys.forEach(k => featureKeysNeeded.add(k));
+
+                        // Deduplicate across both feature lists; dashboard takes priority
+                        // for repo-level config (more complete supabase schema lists etc.)
+                        const allRemovers = new Map<string, FeatureRemover>();
+                        for (const f of [...dashboardFeatures, ...mobileFeatures]) {
+                            if (!allRemovers.has(f.key)) allRemovers.set(f.key, f);
+                        }
+
+                        return Array.from(allRemovers.values())
+                            .filter(f => !featureKeysNeeded.has(f.key));
+                    })();
+
+                if (toRemoveFromRepo.length > 0) {
+                    // Uninstall deps first — packages must still exist on disk
+                    const pm = detectPackageManager(tmpDir);
+                    const depsToUninstall = [
+                        ...new Set(toRemoveFromRepo.flatMap(f => f.dependenciesToRemove ?? [])),
+                    ];
+                    if (depsToUninstall.length > 0) {
+                        setCurrentAction(`Uninstalling ${depsToUninstall.length} unused package(s)...`);
+                        const removeCmd = pm === 'npm' ? 'uninstall' : 'remove';
+                        const workspaceFlag =
+                            pm === 'pnpm' ? ['-r'] :
+                            pm === 'yarn' ? ['-W'] :
+                            pm === 'bun'  ? []     : ['-w'];
+                        try {
+                            await execa(pm, [removeCmd, ...workspaceFlag, ...depsToUninstall], {
+                                cwd: tmpDir, stdio: 'pipe',
+                            });
+                        } catch { /* non-fatal */ }
+                    }
+                    for (const feature of toRemoveFromRepo) {
+                        setCurrentAction(`Cleaning kit/${feature.key}...`);
+                        await processFeatureRepo(feature, tmpDir);
+                    }
+                }
+            }
+
+            // 6. Update root package.json name ────────────────────────────────
+            const rootPkgPath = path.join(tmpDir, 'package.json');
+            if (fs.existsSync(rootPkgPath)) {
+                const pkg = await fs.readJson(rootPkgPath);
+                pkg.name = path.basename(name);
+                await fs.writeJson(rootPkgPath, pkg, { spaces: 4 });
+            }
+
+            // 7. Language setup ────────────────────────────────────────────────
+            setCurrentAction('Configuring language support...');
+            await processLanguages(tmpDir, selectedLanguages);
+            setCurrentAction('Updating SUPPORTED_LANGS...');
+            await updateDefinedLanguages(tmpDir, selectedLanguages);
+            if (mobileIncluded) {
+                const mobileI18nDir = path.join(tmpDir, 'apps', 'mobile');
+                if (fs.existsSync(mobileI18nDir)) {
+                    setCurrentAction('[mobile] Updating i18n configuration...');
+                    const removedMobileFeatures = mobileFeatures.filter(
+                        f => !selectedMobileFeatureKeys.includes(f.key),
+                    );
+                    const mobileI18nNsToRemove = collectFeatureNamespaces(removedMobileFeatures);
+                    await updateMobileI18nConfig(mobileI18nDir, selectedLanguages, mobileI18nNsToRemove);
+                }
+            }
+
+            // 8. Save root monorepo metadata ───────────────────────────────────
+            setCurrentAction('Writing monorepo metadata...');
+            const availableFeatures = Array.from(
+                new Set([...selectedDashboardFeatureKeys, ...selectedMobileFeatureKeys]),
+            ).sort((a, b) => a.localeCompare(b));
+            await writeMonorepoManifest(tmpDir, {
+                monorepoName: path.basename(name),
+                selectedApps: selectedAppKeys,
+                selectedExampleApps: selectedExampleAppKeys,
+                availableFeatures,
+                featuresByApp: {
+                    dashboard: selectedDashboardFeatureKeys,
+                    mobile: selectedMobileFeatureKeys,
+                },
+                cliOptions: {
+                    gitInit,
+                    template: hasPro ? 'pro' : 'oss',
+                },
+            });
+
+            // 9. Move to final destination ─────────────────────────────────────
+            setCurrentAction(`Creating project at ./${name}...`);
+            if (fs.existsSync(targetDir)) await fs.remove(targetDir);
+            await fs.move(tmpDir, targetDir);
+
+            // 10. Git init ─────────────────────────────────────────────────────
+            if (gitInit) {
+                setCurrentAction('Initializing git repository...');
+                await execa('git', ['init'], { cwd: targetDir, stdio: 'pipe' });
+                await execa('git', ['add', '.'], { cwd: targetDir, stdio: 'pipe' });
+                try {
+                    await execa(
+                        'git',
+                        ['commit', '-m', 'chore: initial commit (Creatorem SaaS Kit)'],
+                        { cwd: targetDir, stdio: 'pipe' },
+                    );
+                } catch { /* non-fatal: requires git user config */ }
+            }
+
+            setCurrentAction('Done.');
+        } catch (err) {
+            if (fs.existsSync(tmpDir)) await fs.remove(tmpDir).catch(() => {});
+            throw err;
+        }
+    };
+
+    const startProcessing = (
+        name: string,
+        apps: string[],
+        gitInit: boolean,
+        dashFeatures: string[],
+        mobFeatures: string[],
+        exampleApps: string[],
+        languages: string[],
+    ) => {
+        setStep('processing');
+        runCreate(name, apps, gitInit, dashFeatures, mobFeatures, exampleApps, languages)
+            .then(() => { setStep('done'); setTimeout(() => exit(), 100); })
+            .catch((err: any) => { setError(err.message); setStep('error'); exit(err); });
+    };
+
+    /** Store pending app/example selections and navigate to the language step.
+     *  setImmediate defers the step transition until after all stdin events from the
+     *  current keypress have been drained, preventing key-bleed into the next step. */
+    const goToLanguages = (apps: string[], exampleApps: string[]) => {
+        setPendingApps(apps);
+        setPendingExampleApps(exampleApps);
+        setImmediate(() => setStep('languages'));
+    };
+
+    // ── Step handlers ─────────────────────────────────────────────────────────
+
+    const handleNameSubmit = (name: string) => {
+        const kebab = toKebabCase(name);
+        if (!kebab) { setNameError('Project name is required'); return; }
+        setProjectName(kebab);
+        addHistory('Project', kebab, 'cyan');
+        setNameError('');
+        setImmediate(() => setStep('git-setup'));
+    };
+
+    const handleGitConfirm = (yes: boolean) => {
+        setInitGit(yes);
+        addHistory('Git init', yes ? 'Yes' : 'No', yes ? 'green' : 'gray');
+        setImmediate(() => setStep('app-marketing'));
+    };
+
+    const handleMarketingConfirm = (yes: boolean) => {
+        setIncludeMarketing(yes);
+        addHistory('Marketing website', yes ? 'Yes' : 'No', yes ? 'green' : 'gray');
+        setImmediate(() => setStep('app-dashboard'));
+    };
+
+    const handleDashboardConfirm = (yes: boolean) => {
+        setIncludeDashboard(yes);
+        addHistory('Dashboard app', yes ? 'Yes' : 'No', yes ? 'green' : 'gray');
+        setImmediate(() => setStep(yes ? 'dashboard-features' : 'app-mobile'));
+    };
+
+    const handleDashboardFeaturesSubmit = (selected: string[]) => {
+        setSelectedDashboardFeatures(selected);
+        addHistory('  └ features', summariseFeatures(selected, dashboardFeatures), 'cyan');
+        setImmediate(() => setStep('app-mobile'));
+    };
+
+    const handleMobileConfirm = (yes: boolean) => {
+        setIncludeMobile(yes);
+        addHistory('Mobile app', yes ? 'Yes' : 'No', yes ? 'green' : 'gray');
+        if (!yes) {
+            setSelectedMobileFeatures([]);
+        }
+        setImmediate(() => setStep(yes ? 'mobile-features' : 'app-example'));
+    };
+
+    const handleMobileFeaturesSubmit = (selected: string[]) => {
+        setSelectedMobileFeatures(selected);
+        addHistory('  └ features', summariseFeatures(selected, mobileFeatures), 'cyan');
+        setImmediate(() => setStep('app-example'));
+    };
+
+    const handleLanguagesSubmit = (selected: string[]) => {
+        setSelectedOptionalLangs(selected);
+        const allLangs = ['en', ...selected];
+        addHistory('Languages', allLangs.join(', '), 'cyan');
+        // setImmediate defers the step transition until after all stdin events from this
+        // keypress are drained — prevents bleed into the languages-custom useInput handler.
+        setImmediate(() => {
+            processingStartedRef.current = false; // reset guard for the new step
+            setCustomLangInput('');
+            setStep('languages-custom');
+        });
+    };
+
+    const handleCustomLangsSubmit = (input: string) => {
+        const customLangs = input
+            .split(',')
+            .map((l: string) => l.trim().toLowerCase())
+            .filter((l: string) => l.length > 0 && l !== 'en' && !selectedOptionalLangs.includes(l));
+        const allLangs = ['en', ...selectedOptionalLangs, ...customLangs];
+        if (customLangs.length > 0) {
+            addHistory('  + custom langs', customLangs.join(', '), 'cyan');
+        }
+        startProcessing(
+            projectName,
+            pendingApps,
+            initGit,
+            selectedDashboardFeatures,
+            selectedMobileFeatures,
+            pendingExampleApps,
+            allLangs,
+        );
+    };
+
+    const handleExampleAppsSubmit = (selected: string[]) => {
+        addHistory('Example apps', summariseExampleApps(selected), selected.length > 0 ? 'cyan' : 'gray');
+
+        const apps: string[] = [];
+        if (includeMarketing) apps.push('marketing');
+        if (includeDashboard) apps.push('dashboard');
+        if (includeMobile) apps.push('mobile');
+        if (selected.length > 0) apps.push('example');
+
+        goToLanguages(apps, selected);
+    };
+
+    // Last step — optionally select one or more example apps
+    const handleExampleConfirm = async (yes: boolean) => {
+        const buildApps = () => {
+            const apps: string[] = [];
+            if (includeMarketing) apps.push('marketing');
+            if (includeDashboard) apps.push('dashboard');
+            if (includeMobile) apps.push('mobile');
+            return apps;
+        };
+
+        if (!yes) {
+            addHistory('Example apps', 'None', 'gray');
+            goToLanguages(buildApps(), []);
+            return;
+        }
+
+        setStep('example-apps-loading');
+        try {
+            const items = await loadAvailableExampleApps();
+            setAvailableExampleApps(items);
+            if (items.length === 0) {
+                addHistory('Example apps', 'None available', 'gray');
+                goToLanguages(buildApps(), []);
+                return;
+            }
+            setStep('example-apps');
+        } catch (err: any) {
+            setError(err.message);
+            setStep('error');
+            exit(err);
+        }
+    };
+
+    // ── Render ────────────────────────────────────────────────────────────────
+
+    // Shared header: welcome banner (once intro resolves) + accumulated choices
+    const renderHeader = () => (
+        <>
+            {usedProRepo !== null && (
+                <WelcomeBanner username={githubUsername} isPro={usedProRepo} />
+            )}
+            <ChoicesDisplay entries={history} />
+        </>
+    );
+
+    if (step === 'intro') {
+        return (
+            <Box>
+                <Spinner type="dots" />
+                <Text> Checking access...</Text>
+            </Box>
+        );
+    }
+
+    if (step === 'error') {
+        return <Text color="red">Error: {error}</Text>;
+    }
+
+    if (step === 'done') {
+        return (
+            <Box flexDirection="column">
+                {renderHeader()}
+                <Box marginTop={1} flexDirection="column">
+                    <Gradient name="pastel">
+                        <Text>Monorepo "{projectName}" created successfully!</Text>
+                    </Gradient>
+                    <Box marginTop={1} flexDirection="column">
+                        <Text>Next steps:</Text>
+                        <Text>  cd {projectName}</Text>
+                        <Text>  pnpm install</Text>
+                        <Text>  pnpm dev</Text>
+                    </Box>
+                </Box>
+            </Box>
+        );
+    }
+
+    if (step === 'processing') {
+        return (
+            <Box flexDirection="column">
+                {renderHeader()}
+                <Box>
+                    <Spinner type="dots" />
+                    <Text> {currentAction}</Text>
+                </Box>
+            </Box>
+        );
+    }
+
+    if (step === 'example-apps-loading') {
+        return (
+            <Box flexDirection="column">
+                {renderHeader()}
+                <Box>
+                    <Spinner type="dots" />
+                    <Text> {currentAction}</Text>
+                </Box>
+            </Box>
+        );
+    }
+
+    // ── Interactive steps — all share the persistent history header ───────────
+
+    const renderCurrentStep = () => {
+        switch (step) {
+            case 'name':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Enter a name for your new Creatorem project:</Text>
+                        <TextInput
+                            value={projectName}
+                            onChange={setProjectName}
+                            onSubmit={handleNameSubmit}
+                        />
+                        {nameError && <Text color="red">{nameError}</Text>}
+                    </Box>
+                );
+
+            case 'git-setup':
+                return <Confirm question="Initialize a new git repository?" onConfirm={handleGitConfirm} />;
+
+            case 'app-marketing':
+                return <Confirm question="Include a Marketing website?" onConfirm={handleMarketingConfirm} />;
+
+            case 'app-dashboard':
+                return <Confirm question="Include a Dashboard (web app)?" onConfirm={handleDashboardConfirm} />;
+
+            case 'dashboard-features':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Deselect Dashboard features to remove:</Text>
+                        <Text color="gray" dimColor>Space to toggle · Enter to confirm</Text>
+                        <MultiSelect
+                            items={dashboardFeatureItems}
+                            initialSelectedValues={dashboardFeatures.map(f => f.key)}
+                            onSubmit={handleDashboardFeaturesSubmit}
+                        />
+                    </Box>
+                );
+
+            case 'app-mobile':
+                return <Confirm question="Include a Mobile app (Expo)?" onConfirm={handleMobileConfirm} />;
+
+            case 'mobile-features':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Deselect Mobile app features to remove:</Text>
+                        <Text color="gray" dimColor>Space to toggle · Enter to confirm</Text>
+                        <MultiSelect
+                            items={mobileFeatureItems}
+                            initialSelectedValues={mobileFeatures.map(f => f.key)}
+                            onSubmit={handleMobileFeaturesSubmit}
+                        />
+                    </Box>
+                );
+
+            case 'app-example':
+                return <Confirm question="Include example app(s)?" onConfirm={handleExampleConfirm} />;
+
+            case 'example-apps':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Select example app(s) to include:</Text>
+                        <Text color="gray" dimColor>Space to toggle · Enter to confirm</Text>
+                        <MultiSelect
+                            items={availableExampleApps.map(app => ({
+                                value: app.value,
+                                label: app.title,
+                                title: app.title,
+                                description: app.description,
+                            }))}
+                            onSubmit={handleExampleAppsSubmit}
+                        />
+                    </Box>
+                );
+
+            case 'languages':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Select languages to support:</Text>
+                        <Box marginBottom={1}>
+                            <Text color="gray">  [x] </Text>
+                            <Text bold>English (en)</Text>
+                            <Text color="gray"> — always included</Text>
+                        </Box>
+                        <Text color="gray" dimColor>Space to toggle · Enter to confirm</Text>
+                        <MultiSelect
+                            items={OPTIONAL_LANGUAGE_ITEMS}
+                            initialSelectedValues={['fr']}
+                            onSubmit={handleLanguagesSubmit}
+                        />
+                    </Box>
+                );
+
+            case 'languages-custom':
+                return (
+                    <Box flexDirection="column">
+                        <Text bold>Add more languages?</Text>
+                        <Text color="gray" dimColor>
+                            Enter comma-separated language codes (e.g. de,es,pt) or press Enter to skip
+                        </Text>
+                        <Box>
+                            <Text color="cyan">{'> '}</Text>
+                            <Text>{customLangInput}</Text>
+                            <Text inverse> </Text>
+                        </Box>
+                    </Box>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <Box flexDirection="column">
+            {renderHeader()}
+            {renderCurrentStep()}
+        </Box>
+    );
+};
+
+export default Create;