entexto-cli 1.4.8 → 2.0.0

package/lib/commands/api-platform.js

@@ -0,0 +1,258 @@
+'use strict';
+
+const inquirer = require('inquirer');
+const chalk    = require('chalk');
+const ora      = require('ora');
+const { getToken }    = require('../utils/config');
+const {
+  apiCreateProject, apiListProjects, apiGetProject,
+  apiCreateCollection, apiInsertDoc, apiQueryDocs
+} = require('../utils/api');
+
+module.exports = async function apiPlatform(action, slugArg, options) {
+  if (!getToken()) {
+    console.log(chalk.red('\n  No has iniciado sesión. Ejecuta: entexto login\n'));
+    process.exit(1);
+  }
+
+  if (!action) {
+    const { choice } = await inquirer.prompt([{
+      type: 'list',
+      name: 'choice',
+      message: 'API Platform — ¿Qué quieres hacer?',
+      choices: [
+        { name: 'Listar mis APIs',          value: 'list' },
+        { name: 'Crear nueva API',          value: 'create' },
+        { name: 'Ver detalle de una API',   value: 'info' },
+        { name: 'Crear colección',          value: 'collection' },
+        { name: 'Insertar documento',       value: 'insert' },
+        { name: 'Consultar documentos',     value: 'query' },
+      ],
+    }]);
+    action = choice;
+  }
+
+  switch (action) {
+    case 'list':       return await doList();
+    case 'ls':         return await doList();
+    case 'create':     return await doCreate(slugArg, options);
+    case 'info':       return await doInfo(slugArg);
+    case 'collection': return await doCollection(slugArg, options);
+    case 'insert':     return await doInsert(slugArg, options);
+    case 'query':      return await doQuery(slugArg, options);
+    default:
+      console.log(chalk.red('Acción no reconocida: ' + action));
+      console.log(chalk.gray('  Acciones: list, create, info, collection, insert, query'));
+  }
+};
+
+// ─── LISTAR APIs ─────────────────────────────────────────
+async function doList() {
+  const spinner = ora('Cargando APIs...').start();
+  try {
+    const projects = await apiListProjects();
+    spinner.stop();
+    if (!projects || projects.length === 0) {
+      console.log(chalk.yellow('\n  No tienes APIs creadas.\n'));
+      return;
+    }
+    console.log(chalk.bold.cyan('\n  Tus APIs:\n'));
+    console.log(chalk.gray('  ' + 'Slug'.padEnd(28) + 'Nombre'.padEnd(25) + 'Colecciones  Docs'));
+    console.log(chalk.gray('  ' + '─'.repeat(70)));
+    for (const p of projects) {
+      console.log(
+        '  ' + chalk.cyan(p.slug.padEnd(28)) +
+        (p.name || '?').slice(0, 23).padEnd(25) +
+        chalk.white(String(p.collection_count || 0).padEnd(13)) +
+        chalk.gray(String(p.document_count || 0))
+      );
+    }
+    console.log('');
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}
+
+// ─── CREAR API ───────────────────────────────────────────
+async function doCreate(nameArg, options) {
+  const answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Nombre de la API:',
+      default: nameArg || '',
+      validate: v => v.trim() ? true : 'El nombre es requerido',
+    },
+    {
+      type: 'input',
+      name: 'description',
+      message: 'Descripción (opcional):',
+      default: options?.description || '',
+    },
+  ]);
+
+  const spinner = ora('Creando API...').start();
+  try {
+    const result = await apiCreateProject({
+      name: answers.name.trim(),
+      description: answers.description.trim(),
+    });
+    spinner.succeed(chalk.green('API creada'));
+    console.log('');
+    console.log('  ' + chalk.gray('Slug:    ') + chalk.cyan(result.project.slug));
+    console.log('  ' + chalk.gray('API Key: ') + chalk.yellow(result.project.api_key));
+    console.log('  ' + chalk.gray('Base:    ') + chalk.white('https://api.entexto.com/v1/api/' + result.project.slug));
+    console.log('');
+    console.log(chalk.gray('  Usa el API Key en el header X-API-Key para autenticarte.'));
+    console.log(chalk.gray('  O usa JWT: POST /v1/api/auth/login { email, password }'));
+    console.log('');
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}
+
+// ─── INFO DE API ─────────────────────────────────────────
+async function doInfo(slugArg) {
+  let slug = slugArg;
+  if (!slug) {
+    const projects = await apiListProjects();
+    if (!projects || projects.length === 0) {
+      console.log(chalk.yellow('  No tienes APIs.'));
+      return;
+    }
+    const { s } = await inquirer.prompt([{
+      type: 'list',
+      name: 's',
+      message: 'Selecciona API:',
+      choices: projects.map(p => ({ name: `${p.name} (${p.slug})`, value: p.slug })),
+    }]);
+    slug = s;
+  }
+
+  const spinner = ora('Cargando...').start();
+  try {
+    const data = await apiGetProject(slug);
+    spinner.stop();
+    console.log(chalk.bold.cyan('\n  API: ' + data.project.name + '\n'));
+    console.log('  ' + chalk.gray('Slug:    ') + chalk.cyan(data.project.slug));
+    console.log('  ' + chalk.gray('API Key: ') + chalk.yellow(data.project.api_key));
+    console.log('  ' + chalk.gray('Base:    ') + 'https://api.entexto.com/v1/api/' + data.project.slug);
+    if (data.collections && data.collections.length > 0) {
+      console.log(chalk.bold('\n  Colecciones:\n'));
+      for (const c of data.collections) {
+        console.log('    ' + chalk.white(c.name) + chalk.gray(` (${c.document_count || 0} docs)`));
+      }
+    }
+    console.log('');
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}
+
+// ─── CREAR COLECCIÓN ─────────────────────────────────────
+async function doCollection(slugArg, options) {
+  let slug = slugArg;
+  if (!slug) {
+    const projects = await apiListProjects();
+    const { s } = await inquirer.prompt([{
+      type: 'list', name: 's', message: 'API:',
+      choices: projects.map(p => ({ name: `${p.name} (${p.slug})`, value: p.slug })),
+    }]);
+    slug = s;
+  }
+
+  const { name } = await inquirer.prompt([{
+    type: 'input', name: 'name', message: 'Nombre de la colección:',
+    default: options?.name || '',
+    validate: v => v.trim() ? true : 'Requerido',
+  }]);
+
+  const spinner = ora('Creando colección...').start();
+  try {
+    await apiCreateCollection(slug, name.trim());
+    spinner.succeed(chalk.green('Colección "' + name.trim() + '" creada'));
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}
+
+// ─── INSERTAR DOCUMENTO ──────────────────────────────────
+async function doInsert(slugArg, options) {
+  let slug = slugArg;
+  if (!slug) {
+    const projects = await apiListProjects();
+    const { s } = await inquirer.prompt([{
+      type: 'list', name: 's', message: 'API:',
+      choices: projects.map(p => ({ name: `${p.name} (${p.slug})`, value: p.slug })),
+    }]);
+    slug = s;
+  }
+
+  const data = await apiGetProject(slug);
+  if (!data.collections || data.collections.length === 0) {
+    console.log(chalk.yellow('  No hay colecciones. Crea una primero.'));
+    return;
+  }
+
+  const { collection } = await inquirer.prompt([{
+    type: 'list', name: 'collection', message: 'Colección:',
+    choices: data.collections.map(c => c.name),
+  }]);
+
+  const { json } = await inquirer.prompt([{
+    type: 'editor', name: 'json', message: 'Documento (JSON):',
+    default: '{\n  "key": "value"\n}',
+  }]);
+
+  let doc;
+  try { doc = JSON.parse(json); } catch {
+    console.log(chalk.red('  JSON inválido.')); return;
+  }
+
+  const spinner = ora('Insertando...').start();
+  try {
+    const result = await apiInsertDoc(slug, collection, doc);
+    spinner.succeed(chalk.green('Documento insertado — ID: ' + (result.document?.id || '?')));
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}
+
+// ─── CONSULTAR DOCUMENTOS ────────────────────────────────
+async function doQuery(slugArg, options) {
+  let slug = slugArg;
+  if (!slug) {
+    const projects = await apiListProjects();
+    const { s } = await inquirer.prompt([{
+      type: 'list', name: 's', message: 'API:',
+      choices: projects.map(p => ({ name: `${p.name} (${p.slug})`, value: p.slug })),
+    }]);
+    slug = s;
+  }
+
+  const data = await apiGetProject(slug);
+  if (!data.collections || data.collections.length === 0) {
+    console.log(chalk.yellow('  No hay colecciones.'));
+    return;
+  }
+
+  const { collection } = await inquirer.prompt([{
+    type: 'list', name: 'collection', message: 'Colección:',
+    choices: data.collections.map(c => c.name),
+  }]);
+
+  const spinner = ora('Consultando...').start();
+  try {
+    const result = await apiQueryDocs(slug, collection);
+    spinner.stop();
+    const docs = result.documents || [];
+    console.log(chalk.bold.cyan(`\n  ${collection} — ${docs.length} documento(s):\n`));
+    for (const doc of docs.slice(0, 20)) {
+      console.log('  ' + chalk.gray(doc.id + ':') + ' ' + JSON.stringify(doc.data || doc).substring(0, 100));
+    }
+    if (docs.length > 20) console.log(chalk.gray(`  ... y ${docs.length - 20} más`));
+    console.log('');
+  } catch (err) {
+    spinner.fail(chalk.red(err.response?.data?.error || err.message));
+  }
+}

package/lib/commands/create.js

@@ -0,0 +1,415 @@
+'use strict';
+
+const inquirer = require('inquirer');
+const chalk    = require('chalk');
+const ora      = require('ora');
+const fs       = require('fs');
+const path     = require('path');
+const FormData = require('form-data');
+const { getToken }    = require('../utils/config');
+const { createProject, getProjects, deployFiles, publishProject } = require('../utils/api');
+
+module.exports = async function create(options) {
+  if (!getToken()) {
+    console.log(chalk.red('\n  No has iniciado sesión. Ejecuta: entexto login\n'));
+    process.exit(1);
+  }
+
+  console.log(chalk.bold.cyan('\n  Crear nuevo proyecto EntExto\n'));
+
+  // ── Preguntar datos del proyecto ──
+  const answers = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Nombre del proyecto:',
+      default: options.name || path.basename(process.cwd()),
+      validate: v => v.trim().length >= 1 ? true : 'El nombre no puede estar vacío',
+    },
+    {
+      type: 'input',
+      name: 'description',
+      message: 'Descripción (opcional):',
+      default: options.description || '',
+    },
+    {
+      type: 'list',
+      name: 'template',
+      message: 'Plantilla:',
+      choices: [
+        { name: 'Vacío (solo index.html)',     value: 'blank' },
+        { name: 'HTML + CSS + JS',             value: 'basic' },
+        { name: 'React (JSX + CDN)',           value: 'react' },
+        { name: 'Fullstack (VFS + Live SDK)',  value: 'fullstack' },
+        { name: 'Desde carpeta local',         value: 'local' },
+      ],
+      default: options.template || 'blank',
+    },
+    {
+      type: 'confirm',
+      name: 'publish',
+      message: '¿Publicar inmediatamente?',
+      default: true,
+    },
+    {
+      type: 'confirm',
+      name: 'linkDomain',
+      message: '¿Vincular un dominio/subdominio?',
+      default: false,
+    },
+  ]);
+
+  // ── Crear proyecto en el servidor ──
+  const spinner = ora('Creando proyecto...').start();
+  let project;
+  try {
+    project = await createProject({
+      name: answers.name.trim(),
+      description: answers.description.trim(),
+    });
+    spinner.succeed(chalk.green(`Proyecto creado — ID: ${project.project_uuid}`));
+  } catch (err) {
+    spinner.fail(chalk.red('Error: ' + (err.response?.data?.error || err.message)));
+    process.exit(1);
+  }
+
+  const uuid = project.project_uuid;
+
+  // ── Generar archivos según la plantilla ──
+  let files = {};
+  if (answers.template === 'blank') {
+    files = { 'index.html': TEMPLATES.blank(answers.name) };
+  } else if (answers.template === 'basic') {
+    files = TEMPLATES.basic(answers.name);
+  } else if (answers.template === 'react') {
+    files = TEMPLATES.react(answers.name);
+  } else if (answers.template === 'fullstack') {
+    files = TEMPLATES.fullstack(answers.name);
+  } else if (answers.template === 'local') {
+    // Subir carpeta actual
+    const dir = options.dir || '.';
+    const absDir = path.resolve(dir);
+    if (!fs.existsSync(absDir)) {
+      console.log(chalk.red(`  La carpeta "${dir}" no existe.`));
+      process.exit(1);
+    }
+    files = recolectarArchivosComoObj(absDir);
+    if (Object.keys(files).length === 0) {
+      console.log(chalk.yellow('  No hay archivos para subir.'));
+    }
+  }
+
+  // ── Subir archivos ──
+  if (Object.keys(files).length > 0) {
+    const spinDeploy = ora(`Subiendo ${Object.keys(files).length} archivo(s)...`).start();
+    try {
+      const form = new FormData();
+      for (const [ruta, contenido] of Object.entries(files)) {
+        form.append(ruta, Buffer.from(contenido, 'utf8'), { filename: ruta });
+      }
+      await deployFiles(uuid, form, false);
+      spinDeploy.succeed(`${Object.keys(files).length} archivo(s) subidos`);
+    } catch (err) {
+      spinDeploy.fail(chalk.red('Error subiendo: ' + (err.response?.data?.error || err.message)));
+    }
+  }
+
+  // ── Publicar ──
+  let slug = null;
+  if (answers.publish) {
+    const spinPub = ora('Publicando...').start();
+    try {
+      const pubResult = await publishProject(uuid);
+      slug = pubResult.url;
+      spinPub.succeed('Publicado: ' + chalk.cyan(slug));
+    } catch (err) {
+      spinPub.fail(chalk.red('Error publicando: ' + (err.response?.data?.error || err.message)));
+    }
+  }
+
+  // ── Vincular dominio ──
+  if (answers.linkDomain) {
+    await vincularDominio(project);
+  }
+
+  // ── Resumen ──
+  console.log(chalk.bold.green('\n  Proyecto listo!\n'));
+  console.log('  ' + chalk.gray('ID:     ') + chalk.cyan(uuid));
+  console.log('  ' + chalk.gray('Nombre: ') + answers.name);
+  if (slug) console.log('  ' + chalk.gray('URL:    ') + chalk.cyan(slug));
+  console.log('');
+  console.log(chalk.gray('  Comandos útiles:'));
+  console.log(chalk.gray('    entexto deploy -i ' + uuid + '   # Subir archivos'));
+  console.log(chalk.gray('    entexto sync -i ' + uuid + '     # Sincronizar en vivo'));
+  console.log(chalk.gray('    entexto pull -i ' + uuid + '     # Descargar archivos'));
+  console.log(chalk.gray('    entexto domain                   # Gestionar dominios'));
+  console.log('');
+};
+
+// ─── VINCULAR DOMINIO ──────────────────────────────────────
+async function vincularDominio(project) {
+  const { addDomain, addSubdomain, verifyDomain, listDomains } = require('../utils/api');
+
+  const { tipo } = await inquirer.prompt([{
+    type: 'list',
+    name: 'tipo',
+    message: '¿Qué tipo de dominio?',
+    choices: [
+      { name: 'Subdominio de un dominio verificado', value: 'subdomain' },
+      { name: 'Dominio propio (requiere configuración DNS)', value: 'custom' },
+    ],
+  }]);
+
+  if (tipo === 'subdomain') {
+    // Listar dominios verificados
+    let domains;
+    try { domains = await listDomains(); } catch { domains = []; }
+    const verified = domains.filter(d => d.verified);
+
+    if (verified.length === 0) {
+      console.log(chalk.yellow('  No tienes dominios verificados. Primero agrega un dominio.'));
+      return;
+    }
+
+    const { parent } = await inquirer.prompt([{
+      type: 'list',
+      name: 'parent',
+      message: 'Dominio padre:',
+      choices: verified.map(d => ({ name: d.domain, value: d.domain })),
+    }]);
+
+    const { sub } = await inquirer.prompt([{
+      type: 'input',
+      name: 'sub',
+      message: `Subdominio (se creará: ___.${parent}):`,
+      validate: v => /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/i.test(v.trim()) ? true : 'Solo letras, números y guiones',
+    }]);
+
+    const spinner = ora('Creando subdominio...').start();
+    try {
+      const result = await addSubdomain(parent, sub.trim(), project.id);
+      spinner.succeed(chalk.green(`${result.domain} → activo ` + (result.dns_created ? '(DNS auto)' : '')));
+    } catch (err) {
+      spinner.fail(chalk.red(err.response?.data?.error || err.message));
+    }
+  } else {
+    const { domain } = await inquirer.prompt([{
+      type: 'input',
+      name: 'domain',
+      message: 'Tu dominio (ej: miapp.com):',
+      validate: v => /^([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/.test(v.trim()) ? true : 'Formato inválido',
+    }]);
+
+    const spinner = ora('Registrando dominio...').start();
+    try {
+      const result = await addDomain(project.id, domain.trim());
+      spinner.succeed(chalk.green('Dominio registrado'));
+      console.log(chalk.yellow('\n  Configura tu DNS:\n'));
+      if (result.dns_instructions?.option_a_cname) {
+        result.dns_instructions.option_a_cname.steps.forEach(s => console.log('    ' + s));
+      }
+      console.log(chalk.gray('\n  Luego ejecuta: entexto domain verify ' + domain.trim() + '\n'));
+    } catch (err) {
+      spinner.fail(chalk.red(err.response?.data?.error || err.message));
+    }
+  }
+}
+
+// ─── RECOLECTAR ARCHIVOS LOCALES ──────────────────────────
+const IGNORE_NAMES = new Set([
+  'node_modules', '.git', '.env', '.env.local', '.DS_Store',
+  'dist', '.next', 'build', 'coverage', '.cache', '.turbo',
+  'package-lock.json', 'yarn.lock', 'pnpm-lock.yaml',
+  '.entexto', 'Thumbs.db',
+]);
+const IGNORE_EXT = new Set([
+  '.key', '.pem', '.cert', '.p12', '.pfx', '.sqlite', '.sqlite3',
+  '.db', '.log', '.bak', '.backup',
+]);
+
+function recolectarArchivosComoObj(dir, base) {
+  base = base || dir;
+  const result = {};
+  let entries;
+  try { entries = fs.readdirSync(dir, { withFileTypes: true }); } catch { return result; }
+  for (const entry of entries) {
+    if (IGNORE_NAMES.has(entry.name)) continue;
+    if (entry.name.startsWith('.') && entry.name !== '.htaccess') continue;
+    const ext = path.extname(entry.name).toLowerCase();
+    if (IGNORE_EXT.has(ext)) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      Object.assign(result, recolectarArchivosComoObj(full, base));
+    } else if (entry.isFile()) {
+      const ruta = path.relative(base, full).replace(/\\/g, '/');
+      try {
+        result[ruta] = fs.readFileSync(full, 'utf8');
+      } catch {}
+    }
+  }
+  return result;
+}
+
+// ─── PLANTILLAS ──────────────────────────────────────────
+const TEMPLATES = {
+  blank: (name) => `<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f172a; color: #e2e8f0; }
+    h1 { font-size: 2.5rem; }
+  </style>
+</head>
+<body>
+  <h1>${name}</h1>
+</body>
+</html>`,
+
+  basic: (name) => ({
+    'index.html': `<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name}</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="app">
+    <h1>${name}</h1>
+    <p>Edita los archivos para empezar.</p>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>`,
+    'style.css': `* { margin: 0; padding: 0; box-sizing: border-box; }
+body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
+#app { text-align: center; }
+h1 { font-size: 2.5rem; margin-bottom: 1rem; }`,
+    'app.js': `// ${name} — App JS\nconsole.log('${name} cargado');`,
+  }),
+
+  react: (name) => ({
+    'index.html': `<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name}</title>
+  <script src="/vendor/react/react.production.min.js" crossorigin></script>
+  <script src="/vendor/react/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect } = React;
+
+    function App() {
+      const [count, setCount] = useState(0);
+      return (
+        <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minHeight:'100vh'}}>
+          <h1 style={{fontSize:'2.5rem',marginBottom:'1rem'}}>${name}</h1>
+          <p style={{marginBottom:'1rem'}}>Contador: {count}</p>
+          <button onClick={() => setCount(c => c + 1)}
+            style={{padding:'0.75rem 2rem',fontSize:'1rem',background:'#3b82f6',color:'white',border:'none',borderRadius:'0.5rem',cursor:'pointer'}}>
+            +1
+          </button>
+        </div>
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+  </script>
+</body>
+</html>`,
+  }),
+
+  fullstack: (name) => ({
+    'index.html': `<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name}</title>
+  <script src="/vendor/react/react.production.min.js" crossorigin></script>
+  <script src="/vendor/react/react-dom.production.min.js" crossorigin></script>
+  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; }
+    .container { max-width: 600px; margin: auto; padding: 2rem; }
+    input, button { padding: 0.5rem 1rem; font-size: 1rem; border-radius: 0.5rem; border: 1px solid #334155; }
+    input { background: #1e293b; color: white; flex: 1; }
+    button { background: #3b82f6; color: white; border: none; cursor: pointer; }
+    button:hover { background: #2563eb; }
+    .item { display: flex; justify-content: space-between; padding: 0.75rem; background: #1e293b; border-radius: 0.5rem; margin-top: 0.5rem; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect } = React;
+    const fs = window.__entexto?.fs;
+
+    function App() {
+      const [items, setItems] = useState([]);
+      const [input, setInput] = useState('');
+
+      useEffect(() => {
+        if (!fs) return;
+        fs.leer('database.json').then(r => {
+          if (r.ok) setItems(JSON.parse(r.contenido || '[]'));
+        }).catch(() => {});
+      }, []);
+
+      const save = async (newItems) => {
+        setItems(newItems);
+        if (fs) await fs.escribir('database.json', JSON.stringify(newItems, null, 2));
+      };
+
+      const add = () => {
+        if (!input.trim()) return;
+        save([...items, { id: Date.now(), text: input.trim() }]);
+        setInput('');
+      };
+
+      const remove = (id) => save(items.filter(i => i.id !== id));
+
+      return (
+        <div className="container">
+          <h1 style={{fontSize:'2rem',marginBottom:'1.5rem'}}>${name}</h1>
+          <div style={{display:'flex',gap:'0.5rem',marginBottom:'1rem'}}>
+            <input value={input} onChange={e => setInput(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && add()}
+              placeholder="Agregar item..." />
+            <button onClick={add}>+</button>
+          </div>
+          {items.map(item => (
+            <div key={item.id} className="item">
+              <span>{item.text}</span>
+              <button onClick={() => remove(item.id)} style={{background:'#ef4444',fontSize:'0.8rem'}}>X</button>
+            </div>
+          ))}
+          <p style={{marginTop:'1rem',color:'#64748b',fontSize:'0.8rem'}}>
+            {items.length} items — datos guardados con VFS (window.__entexto.fs)
+          </p>
+        </div>
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+  </script>
+</body>
+</html>`,
+    'database.json': '[]',
+  }),
+};