/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; // ============================================================ // i18n // ============================================================ const I18N = { es: { appName: "creation path", tagline: "Una ruta guiada para esculpir tu proyecto", start: "Empezar", back: "Atrás", next: "Siguiente", skip: "Omitir", continue: "Continuar", step: "Paso", of: "de", // Step 1 s1_title: "¿Qué quieres crear hoy?", s1_sub: "Elige un punto de partida. Podrás cambiarlo más tarde.", type_landing: "Landing page", type_landing_d: "Una página de aterrizaje para presentar una idea, producto o evento.", type_site: "Sitio web", type_site_d: "Varias páginas conectadas, ideal para empresas, portafolios o blogs.", type_app: "Aplicación web", type_app_d: "Una app interactiva con lógica, vistas y estados — desde un panel hasta una herramienta.", type_ai: "Asistente IA", type_ai_d: "Un chat o agente conversacional con personalidad y conocimiento propios.", // Step 2 s2_title: "¿Tu proyecto necesita guardar datos?", s2_sub: "Si activas almacenamiento, prepararemos una base de datos lista para usar.", s2_yes: "Sí, voy a guardar datos", s2_yes_d: "Usuarios, formularios, contenido dinámico, sesiones…", s2_no: "No, será estático", s2_no_d: "Solo lectura — sin formularios ni cuentas.", // Step 3 s3_title: "¿Vas a integrar IA?", s3_sub: "Conecta una API key para que tu proyecto pueda llamar a modelos.", s3_yes: "Sí, conectaré IA", s3_no: "No por ahora", s3_keyl: "API key", s3_keyp: "sk-•••• (la guardaremos cifrada)", s3_provider: "Proveedor", // Step 4 s4_title: "Cuéntanos sobre tu proyecto", s4_sub: "Estos datos guían al agente cuando empieza a esculpir el código.", s4_name: "Título del proyecto", s4_namep: "Mi proyecto luminoso", s4_goal: "Objetivo", s4_goalp: "¿Qué problema resuelve? ¿Para quién?", s4_desc: "Descripción", s4_descp: "Explica con tus palabras qué hará y cómo se sentirá.", // Step 5 s5_title: "Conecta tu cuaderno", s5_sub: "Trae notas, documentos, capturas y referencias que ya tienes en la plataforma.", s5_connect: "Conectar cuaderno", s5_connected: "Cuaderno conectado", s5_files: "archivos sincronizados", s5_skip: "Continuar sin contexto adicional", // Step 6 s6_title: "Tu estructura está lista", s6_sub: "Generamos el andamiaje según tu elección. El agente trabajará dentro de estos archivos sin alterar la estructura.", s6_open: "Abrir editor", // Editor ed_files: "Archivos", ed_skills: "Skills MCP", ed_search_skills: "Buscar skill…", ed_agent: "Agente", ed_run: "Ejecutar", ed_deploy: "Desplegar en aimaker", ed_preview: "Vista previa", ed_console: "Consola", ed_thinking: "Esculpiendo…", tutor_title: "Tutor", tutor_dismiss: "Entendido", // Deploy dep_title: "Desplegando tu proyecto", dep_building: "Empaquetando código", dep_uploading: "Subiendo a aimaker", dep_warming: "Encendiendo el servidor", dep_done: "¡Tu app está en vivo!", dep_url: "URL pública", dep_copy: "Copiar", dep_copied: "Copiado", dep_open: "Abrir app", dep_share: "Compartir", dep_close: "Volver al editor", // Live live_back: "Volver al editor", live_redeploy: "Re-desplegar", live_url: "URL en vivo", }, en: { appName: "creation path", tagline: "A guided path to sculpt your project", start: "Begin", back: "Back", next: "Next", skip: "Skip", continue: "Continue", step: "Step", of: "of", s1_title: "What do you want to create today?", s1_sub: "Pick a starting point. You can change it later.", type_landing: "Landing page", type_landing_d: "A single page to introduce an idea, product or event.", type_site: "Website", type_site_d: "Multiple connected pages — companies, portfolios, blogs.", type_app: "Web application", type_app_d: "An interactive app with logic, views and state.", type_ai: "AI assistant", type_ai_d: "A conversational agent with its own personality and knowledge.", s2_title: "Does your project need to store data?", s2_sub: "If you enable storage, we'll prepare a ready-to-use database.", s2_yes: "Yes, I'll store data", s2_yes_d: "Users, forms, dynamic content, sessions…", s2_no: "No, it's static", s2_no_d: "Read-only — no forms or accounts.", s3_title: "Are you integrating AI?", s3_sub: "Connect an API key so your project can call models.", s3_yes: "Yes, I'll connect AI", s3_no: "Not yet", s3_keyl: "API key", s3_keyp: "sk-•••• (stored encrypted)", s3_provider: "Provider", s4_title: "Tell us about your project", s4_sub: "These details guide the agent when it starts sculpting the code.", s4_name: "Project title", s4_namep: "My luminous project", s4_goal: "Goal", s4_goalp: "What problem does it solve? For whom?", s4_desc: "Description", s4_descp: "In your own words, describe what it will do and how it will feel.", s5_title: "Connect your notebook", s5_sub: "Bring notes, docs, screenshots and references you already have in the platform.", s5_connect: "Connect notebook", s5_connected: "Notebook connected", s5_files: "files synced", s5_skip: "Continue without extra context", s6_title: "Your structure is ready", s6_sub: "We generated scaffolding for your choice. The agent will work inside these files without changing the structure.", s6_open: "Open editor", ed_files: "Files", ed_skills: "MCP skills", ed_search_skills: "Search skill…", ed_agent: "Agent", ed_run: "Run", ed_deploy: "Deploy to aimaker", ed_preview: "Preview", ed_console: "Console", ed_thinking: "Sculpting…", tutor_title: "Tutor", tutor_dismiss: "Got it", dep_title: "Deploying your project", dep_building: "Packing code", dep_uploading: "Uploading to aimaker", dep_warming: "Warming the server", dep_done: "Your app is live!", dep_url: "Public URL", dep_copy: "Copy", dep_copied: "Copied", dep_open: "Open app", dep_share: "Share", dep_close: "Back to editor", live_back: "Back to editor", live_redeploy: "Re-deploy", live_url: "Live URL", }, fr: { appName: "creation path", tagline: "Un chemin guidé pour sculpter votre projet", start: "Commencer", back: "Retour", next: "Suivant", skip: "Passer", continue: "Continuer", step: "Étape", of: "sur", s1_title: "Que voulez-vous créer aujourd'hui ?", s1_sub: "Choisissez un point de départ. Modifiable plus tard.", type_landing: "Page d'accueil", type_landing_d: "Une page pour présenter une idée, un produit ou un événement.", type_site: "Site web", type_site_d: "Plusieurs pages connectées — entreprises, portfolios, blogs.", type_app: "Application web", type_app_d: "Une app interactive avec logique, vues et états.", type_ai: "Assistant IA", type_ai_d: "Un agent conversationnel avec personnalité et savoir.", s2_title: "Votre projet doit-il stocker des données ?", s2_sub: "Si oui, nous préparerons une base de données prête à l'emploi.", s2_yes: "Oui, je vais stocker", s2_yes_d: "Utilisateurs, formulaires, contenu dynamique, sessions…", s2_no: "Non, c'est statique", s2_no_d: "Lecture seule — sans formulaires ni comptes.", s3_title: "Allez-vous intégrer l'IA ?", s3_sub: "Connectez une clé API pour appeler des modèles.", s3_yes: "Oui, je connecte l'IA", s3_no: "Pas encore", s3_keyl: "Clé API", s3_keyp: "sk-•••• (stockée chiffrée)", s3_provider: "Fournisseur", s4_title: "Parlez-nous de votre projet", s4_sub: "Ces détails guident l'agent au moment de sculpter le code.", s4_name: "Titre du projet", s4_namep: "Mon projet lumineux", s4_goal: "Objectif", s4_goalp: "Quel problème résout-il ? Pour qui ?", s4_desc: "Description", s4_descp: "Avec vos mots, décrivez ce qu'il fera et comment il se sentira.", s5_title: "Connectez votre carnet", s5_sub: "Importez notes, documents et références déjà dans la plateforme.", s5_connect: "Connecter le carnet", s5_connected: "Carnet connecté", s5_files: "fichiers synchronisés", s5_skip: "Continuer sans contexte", s6_title: "Votre structure est prête", s6_sub: "Nous avons généré l'échafaudage. L'agent travaillera dans ces fichiers sans changer la structure.", s6_open: "Ouvrir l'éditeur", ed_files: "Fichiers", ed_skills: "Skills MCP", ed_search_skills: "Chercher une skill…", ed_agent: "Agent", ed_run: "Exécuter", ed_deploy: "Déployer sur aimaker", ed_preview: "Aperçu", ed_console: "Console", ed_thinking: "Sculpte…", tutor_title: "Tuteur", tutor_dismiss: "Compris", dep_title: "Déploiement en cours", dep_building: "Empaquetage du code", dep_uploading: "Téléversement vers aimaker", dep_warming: "Démarrage du serveur", dep_done: "Votre app est en ligne !", dep_url: "URL publique", dep_copy: "Copier", dep_copied: "Copié", dep_open: "Ouvrir", dep_share: "Partager", dep_close: "Retour à l'éditeur", live_back: "Retour à l'éditeur", live_redeploy: "Re-déployer", live_url: "URL en ligne", }, }; const LangCtx = createContext({ t: I18N.es, lang: "es", setLang: () => {} }); const useT = () => useContext(LangCtx); // ============================================================ // Icons (minimal line) // ============================================================ const Icon = { arrow: (p) => , back: (p) => , check: (p) => , spark: (p) => , folder: (p) => , file: (p) => , search: (p) => , copy: (p) => , globe: (p) => , notebook: (p) => , close: (p) => , }; // ============================================================ // Common UI atoms // ============================================================ const Roman = ({ n }) => { const r = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X"][n - 1] || String(n); return {r}; }; const Btn = ({ variant = "primary", children, ...p }) => ( ); const Pill = ({ children, tone = "default" }) => ( {children} ); const Card = ({ selected, onClick, children, className = "" }) => ( ); // ============================================================ // Top bar (always visible) // ============================================================ function TopBar({ onHome }) { const { lang, setLang, t } = useT(); return (
{["es", "en", "fr"].map((l) => ( ))}
); } // ============================================================ // Welcome // ============================================================ function Welcome({ onStart }) { const { t } = useT(); return (
— {t.appName} —

{t.tagline.split(" ").map((w, i, arr) => ( {w}{i < arr.length - 1 ? " " : ""} ))}

{{ es: "Responde unas preguntas, conecta tu cuaderno, deja que el agente esculpa el código y despliega cuando estés listo.", en: "Answer a few questions, connect your notebook, let the agent sculpt the code, and deploy when you're ready.", fr: "Répondez à quelques questions, connectez votre carnet, laissez l'agent sculpter le code, puis déployez." }[useT().lang]}

{t.start} 6 · {t.step.toLowerCase()}
idea live
); } // ============================================================ // Stepper // ============================================================ function Stepper({ step, total }) { const { t } = useT(); return (
{t.step} /
{Array.from({ length: total }).map((_, i) => ( ))}
); } // ============================================================ // Wizard shell // ============================================================ function Wizard({ state, setState, onDone, onBack }) { const { t } = useT(); const total = 6; const [step, setStep] = useState(1); const canNext = useMemo(() => { if (step === 1) return !!state.projectType; if (step === 2) return state.storage !== null; if (step === 3) return state.ai !== null && (!state.ai || (state.aiKey && state.aiKey.length >= 4)); if (step === 4) return state.title.trim() && state.goal.trim() && state.desc.trim(); if (step === 5) return true; if (step === 6) return true; return true; }, [step, state]); const handleNext = () => { if (step < total) setStep(step + 1); else onDone(); }; const handleBack = () => { if (step === 1) onBack(); else setStep(step - 1); }; return (
{step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && } {step === 5 && } {step === 6 && }
{step === total ? t.s6_open : t.next}
); } // ============================================================ // Step 1 — project type // ============================================================ function Step1({ state, setState }) { const { t } = useT(); const opts = [ { id: "landing", title: t.type_landing, desc: t.type_landing_d, glyph: "L" }, { id: "site", title: t.type_site, desc: t.type_site_d, glyph: "S" }, { id: "app", title: t.type_app, desc: t.type_app_d, glyph: "A" }, { id: "ai", title: t.type_ai, desc: t.type_ai_d, glyph: "AI" }, ]; return (

{t.s1_title}

{t.s1_sub}

{opts.map((o) => ( setState({ ...state, projectType: o.id })}>
{o.glyph}
{o.title}
{o.desc}
 ))}
); } // ============================================================ // Step 2 — storage // ============================================================ function Step2({ state, setState }) { const { t } = useT(); return (

{t.s2_title}

{t.s2_sub}

setState({ ...state, storage: true })}>
+
{t.s2_yes}
{t.s2_yes_d}
postgres · auth · storage
 setState({ ...state, storage: false })}>
○
{t.s2_no}
{t.s2_no_d}
static · cdn
); } // ============================================================ // Step 3 — AI // ============================================================ function Step3({ state, setState }) { const { t } = useT(); return (

{t.s3_title}

{t.s3_sub}

setState({ ...state, ai: true })}>
{t.s3_yes}
openai · anthropic · mistral · local
 setState({ ...state, ai: false, aiKey: "" })}>
—
{t.s3_no}
{state.ai === false ? "" : ""}
{state.ai === true && (
)}
); } // ============================================================ // Step 4 — info // ============================================================ function Step4({ state, setState }) { const { t } = useT(); return (

{t.s4_title}

{t.s4_sub}