mgpanel-cli 1.0.5 → 1.0.8

package/README-API.md

@@ -0,0 +1,27 @@
+# Contrato CLI ↔ API (publish)
+
+Este documento describe el comportamiento esperado entre **mgpanel-cli** y la API de MGPanel para el comando `mgpanel publish` (`POST /api/cli/publish`).
+
+## Páginas que envía el CLI
+
+El CLI **solo envía las páginas que existen en el proyecto local**, es decir, las que están definidas en `pages/<nombre>/page.json`. No envía páginas que no existan en el repositorio.
+
+## Páginas por defecto del panel
+
+El panel de MGPanel incluye **páginas del sistema** que no forman parte del proyecto del CLI: **Forms**, **Docs**, **Blog**, **Checkout**, **Facturas**, **Presupuestos**, **Soon**. Estas páginas se gestionan desde el panel y no tienen equivalente en la carpeta `pages/` del proyecto.
+
+## Comportamiento esperado de la API
+
+La API **debe preservar** las páginas por defecto del panel cuando no vienen en el payload del CLI. En concreto:
+
+- **No** debe reemplazar el array `pages` del draft por el array enviado por el CLI.
+- **Sí** debe hacer **merge**: aplicar o actualizar cada página que **sí** viene en el payload y **conservar** las páginas del sistema (Forms, Docs, Blog, Checkout, Facturas, Presupuestos, Soon) que ya existían en el draft y no vienen en el payload.
+
+Así, al hacer `mgpanel publish`, las páginas locales se actualizan en el draft y las páginas del sistema se mantienen.
+
+## Resumen
+
+| Responsable | Comportamiento |
+|------------|----------------|
+| **CLI**    | Envía solo las páginas que existen en `pages/` del proyecto. |
+| **API**    | Hace merge de `pages`: actualiza las que vienen en el payload y preserva las páginas del sistema que no vienen. |

package/README.md

@@ -47,10 +47,23 @@ Crear un paginas:
 mgpanel make page nombre-pagina
 ```
 
-Crear un secciones y asignarlas a páginas:
+Crear secciones (módulos) y asignarlas a páginas:
 ```bash
 mgpanel make module nombre-modulo
 mgpanel add module nombre-modulo --to nombre-pagina
+```
+Puedes crear diferentes secciones (módulos) y asignarlas a tu preferencia a cualquier página.
+
+Descargar el sitio desde MGPanel (draft) al directorio actual:
+```bash
+mgpanel pull --account <cuenta> [--token <token>] [--api-url <url>]
+```
+Si el directorio no tiene estructura MGPanel (`pages/`, `modules/`), se crea automáticamente y se rellena con los datos del servidor. Luego puedes editar localmente y publicar con `mgpanel publish`.  
+*Requisito backend:* la API debe exponer `GET /api/cli/draft` con la misma autenticación que `publish` (Bearer token, header `X-Account-Nick`).
 
+Publicar el proyecto local a MGPanel:
+```bash
+mgpanel publish --account <cuenta> [--token <token>] [--api-url <url>]
 ```
-Puedes crear diferentes secciones (módulos) y asginarlas a tu preferencia a cualquier página.
+
+**Flujo típico:** `mgpanel pull` → editar en local (`mgpanel dev` para previsualizar) → `mgpanel publish`.

package/bin/mgpanel.js

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 
 const http = require("http");
+const https = require("https");
 const fs = require("fs");
 const path = require("path");
+const { URL } = require("url");
 
 function printHelp() {
   console.log(`
@@ -18,6 +20,9 @@ Uso:
 
   mgpanel dev [puerto]
 
+  mgpanel publish --account <cuenta> [--token <token>] [--api-url <url>]
+  mgpanel pull --account <cuenta> [--token <token>] [--api-url <url>]
+
 Ejemplos:
   mgpanel init miweb
   cd miweb
@@ -28,6 +33,9 @@ Ejemplos:
 
   mgpanel dev
   mgpanel dev 8080
+
+  mgpanel publish --account zzz-eloymanuel --token mi-token
+  mgpanel pull --account zzz-eloymanuel
 `);
 }
 
@@ -54,6 +62,164 @@ function isValidSlug(name) {
   return /^[a-z0-9-]+$/i.test(name);
 }
 
+/**
+ * Carga .env desde process.cwd() y parsea args para account, token, apiUrl.
+ * Usado por cmdPublish y cmdPull.
+ * @param {string[]} args - process.argv.slice(2)
+ * @returns {{ account: string|null, token: string|null, apiUrl: string }}
+ */
+function parseCliAuthArgs(args) {
+  let account = null;
+  let token = null;
+  let apiUrl = "https://dev.mgpanel.co";
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === "--account" && args[i + 1]) {
+      account = args[i + 1];
+      i++;
+    } else if (args[i] === "--token" && args[i + 1]) {
+      token = args[i + 1];
+      i++;
+    } else if (args[i] === "--api-url" && args[i + 1]) {
+      apiUrl = args[i + 1];
+      i++;
+    }
+  }
+
+  const envPath = path.join(process.cwd(), ".env");
+  if (fs.existsSync(envPath)) {
+    const envContent = fs.readFileSync(envPath, "utf8");
+    const envLines = envContent.split("\n");
+    for (const line of envLines) {
+      const trimmed = line.trim();
+      if (trimmed && !trimmed.startsWith("#")) {
+        const match = trimmed.match(/^([^=]+)=(.*)$/);
+        if (match) {
+          const key = match[1].trim();
+          const value = match[2].trim().replace(/^["']|["']$/g, "");
+          if (key === "MGPANEL_TOKEN") process.env.MGPANEL_TOKEN = value;
+          else if (key === "MGPANEL_API_URL") process.env.MGPANEL_API_URL = value;
+        }
+      }
+    }
+  }
+
+  if (!token) token = process.env.MGPANEL_TOKEN;
+  if (process.env.MGPANEL_API_URL) apiUrl = process.env.MGPANEL_API_URL;
+
+  return { account, token, apiUrl };
+}
+
+/**
+ * Crea la estructura mínima de proyecto MGPanel en projectRoot (pages/, modules/, assets/, dev/, index.html, .env).
+ * No crea páginas por defecto. Usado por mgpanel pull cuando el directorio no tiene estructura.
+ * @param {string} projectRoot - Ruta absoluta del directorio del proyecto (ej. process.cwd())
+ */
+function ensureProjectStructure(projectRoot) {
+  ensureDir(path.join(projectRoot, "pages"));
+  ensureDir(path.join(projectRoot, "modules"));
+  ensureDir(path.join(projectRoot, "dev"));
+  ensureDir(path.join(projectRoot, "assets", "css"));
+  ensureDir(path.join(projectRoot, "assets", "js"));
+
+  const defaultCSS = "/* MGPanel Global Styles */\n:root { color-scheme: light; }\nbody { margin: 0; }\n";
+  const defaultJS = "// MGPanel Global JS\nconsole.log(\"[MGPanel] Global JS loaded\");\n";
+  fs.writeFileSync(path.join(projectRoot, "assets", "css", "style.css"), defaultCSS, "utf8");
+  fs.writeFileSync(path.join(projectRoot, "assets", "js", "app.js"), defaultJS, "utf8");
+
+  const indexHTML = `<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>MGPanel (Local Preview)</title>
+
+  <link rel="stylesheet" href="assets/css/style.css" />
+  <script src="assets/js/app.js" defer></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="dev/preview.js"></script>
+</body>
+</html>
+`;
+  fs.writeFileSync(path.join(projectRoot, "index.html"), indexHTML, "utf8");
+
+  const envContent = `# MGPanel CLI - Variables de entorno
+# Descomenta y configura estas variables para usar 'mgpanel publish' y 'mgpanel pull'
+
+# MGPANEL_TOKEN=tu-token-aqui
+# MGPANEL_API_URL=https://dev.mgpanel.co
+`;
+  fs.writeFileSync(path.join(projectRoot, ".env"), envContent, "utf8");
+
+  const gitignorePath = path.join(projectRoot, ".gitignore");
+  if (fs.existsSync(gitignorePath)) {
+    const gitignore = fs.readFileSync(gitignorePath, "utf8");
+    if (!gitignore.includes(".env")) {
+      fs.appendFileSync(gitignorePath, "\n# MGPanel CLI\n.env\n");
+    }
+  } else {
+    fs.writeFileSync(gitignorePath, "# MGPanel CLI\n.env\n", "utf8");
+  }
+
+  const previewJS = `async function loadModule(name) {
+  const base = \`modules/\${name}/\${name}\`;
+  const html = await fetch(\`\${base}.html\`).then(r => r.text());
+  const cssHref = \`\${base}.css\`;
+  if (!document.querySelector(\`link[data-mgpanel-css="\${cssHref}"]\`)) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = cssHref;
+    link.setAttribute("data-mgpanel-css", cssHref);
+    document.head.appendChild(link);
+  }
+  const jsSrc = \`\${base}.js\`;
+  if (!document.querySelector(\`script[data-mgpanel-js="\${jsSrc}"]\`)) {
+    const script = document.createElement("script");
+    script.src = jsSrc;
+    script.defer = true;
+    script.setAttribute("data-mgpanel-js", jsSrc);
+    document.body.appendChild(script);
+  }
+  return html;
+}
+async function renderPage(pageName) {
+  const configPath = \`pages/\${pageName}/page.json\`;
+  const page = await fetch(configPath).then(r => r.json());
+  if (page.title) document.title = page.title;
+  if (page.description) {
+    let meta = document.querySelector('meta[name="description"]');
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.setAttribute("name", "description");
+      document.head.appendChild(meta);
+    }
+    meta.setAttribute("content", page.description);
+  }
+  const app = document.getElementById("app");
+  app.innerHTML = "";
+  for (const item of (page.modules || [])) {
+    const html = await loadModule(item.name);
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-mgpanel-module", item.name);
+    wrapper.innerHTML = html;
+    app.appendChild(wrapper);
+  }
+}
+const pageFromPath = () => {
+  const p = window.location.pathname.replace(/^\\/+/g, "").replace(/\\/+$/g, "");
+  return p === "" ? "home" : p;
+};
+renderPage(pageFromPath()).catch(err => {
+  console.error("[MGPanel Preview] Error:", err);
+  document.getElementById("app").innerHTML =
+    "<h2>Error cargando la página. ¿Existe pages/&lt;page&gt;/page.json?</h2>";
+});
+`;
+  fs.writeFileSync(path.join(projectRoot, "dev", "preview.js"), previewJS, "utf8");
+}
+
 /**
  * mgpanel init <projectName>
  */
@@ -106,6 +272,28 @@ console.log("[MGPanel] Global JS loaded");
 `;
   fs.writeFileSync(path.join(projectPath, "index.html"), indexHTML, "utf8");
 
+  // .env: Variables de entorno para publish
+  const envContent = `# MGPanel CLI - Variables de entorno
+# Descomenta y configura estas variables para usar 'mgpanel publish'
+
+# Token de autenticación para publicar (obtén uno desde el panel de MGPanel)
+# MGPANEL_TOKEN=tu-token-aqui
+
+# URL de la API (opcional, por defecto usa https://dev.mgpanel.co)
+# MGPANEL_API_URL=https://dev.mgpanel.co
+`;
+  fs.writeFileSync(path.join(projectPath, ".env"), envContent, "utf8");
+  // Agregar .env al .gitignore si existe
+  const gitignorePath = path.join(projectPath, ".gitignore");
+  if (fs.existsSync(gitignorePath)) {
+    const gitignore = fs.readFileSync(gitignorePath, "utf8");
+    if (!gitignore.includes(".env")) {
+      fs.appendFileSync(gitignorePath, "\n# MGPanel CLI\n.env\n");
+    }
+  } else {
+    fs.writeFileSync(gitignorePath, "# MGPanel CLI\n.env\n", "utf8");
+  }
+
   // dev/preview.js: carga una page leyendo page.json y componiendo módulos
   const previewJS = `async function loadModule(name) {
   const base = \`modules/\${name}/\${name}\`;
@@ -185,6 +373,7 @@ renderPage(pageFromPath()).catch(err => {
     route: "/",
     title: "Home",
     description: "Página principal creada con MGPanel.",
+    directory: "",
     modules: []
   };
   fs.writeFileSync(
@@ -248,10 +437,23 @@ Esto crea:
   "route": "/about",
   "title": "About",
   "description": "Descripción de la página about.",
-  "modules": []
+  "directory": "",
+  "modules": [
+    { "name": "header", "import": false }
+  ]
 }
 \`\`\`
 
+**Campo \`directory\`:**
+- Por defecto viene vacío (\`""\`)
+- Puede editarse manualmente para agregar valores como \`"app/"\` cuando se requiera
+- Se usa en la nube para organizar las páginas en directorios
+
+**Campo \`import\` en módulos:**
+- \`import: false\` - Módulo propio de esta página (se crea la sección completa)
+- \`import: true\` - Módulo importado de otra página (se referencia la sección existente)
+- Se asigna automáticamente al agregar módulos con \`mgpanel add module\`
+
 ### Crear un Módulo
 
 \`\`\`bash
@@ -290,15 +492,20 @@ Esto actualiza el archivo \`pages/<nombre-pagina>/page.json\` añadiendo el mód
   "route": "/",
   "title": "Home",
   "description": "Página principal.",
+  "directory": "",
   "modules": [
-    { "name": "header" },
-    { "name": "hero-banner" },
-    { "name": "footer" }
+    { "name": "header", "import": false },
+    { "name": "hero-banner", "import": false },
+    { "name": "footer", "import": true }
   ]
 }
 \`\`\`
 
-**Importante:** Los módulos se renderizan en el orden en que aparecen en el array \`modules\`.
+**Importante:** 
+- Los módulos se renderizan en el orden en que aparecen en el array \`modules\`.
+- El campo \`import\` se agrega automáticamente:
+  - \`import: false\` si el módulo es propio de esta página (primera vez que se agrega)
+  - \`import: true\` si el módulo pertenece a otra página y se está reutilizando
 
 ### Servidor de Desarrollo
 
@@ -425,6 +632,26 @@ Por eso, en los módulos con JS, sigue estas reglas para que funcionen *tanto lo
 •⁠  ⁠*No ocultar contenido sin JS*:
   - Si usas animaciones por clase (ej. ⁠ \`data-mg-animate\` ⁠), asegúrate que el contenido no quede invisible si el JS no corre.
 
+### Campo \`import\` en módulos
+
+Cada módulo en \`page.json\` puede tener un campo \`import\` que indica si el módulo es propio de la página o se está importando de otra:
+
+- **\`import: false\`** - Módulo propio: La primera página donde se agrega un módulo tiene \`import: false\`. En la nube, esto crea una nueva sección completa.
+- **\`import: true\`** - Módulo importado: Si un módulo ya existe en otra página y lo agregas a una nueva página, tendrá \`import: true\`. En la nube, esto referencia la sección existente en lugar de duplicarla.
+
+**Ejemplo:**
+\`\`\`json
+{
+  "modules": [
+    { "name": "header", "import": false },  // Propio de esta página
+    { "name": "banner", "import": false },   // Propio de esta página
+    { "name": "footer", "import": true }     // Importado de otra página
+  ]
+}
+\`\`\`
+
+El campo \`import\` se asigna automáticamente cuando usas \`mgpanel add module\`. La primera página donde agregas un módulo será la "dueña" (\`import: false\`), y las páginas subsecuentes que usen ese módulo tendrán \`import: true\`.
+
 #### Plantilla recomendada para JS de módulos (cloud-safe)
 
 \`\`\`js
@@ -590,6 +817,7 @@ function cmdMakePage(pageName) {
         route: `/${pageName === "home" ? "" : pageName}`.replace(/\/$/, "/"),
         title: pageName.charAt(0).toUpperCase() + pageName.slice(1),
         description: `Descripción de la página ${pageName}.`,
+        directory: "",
         modules: []
       },
       null,
@@ -705,6 +933,35 @@ function cmdMakeModule(moduleName) {
   if (skipped.length) console.log("↩️  Ya existían:", skipped.join(", "));
 }
 
+/**
+ * Verifica si un módulo existe en otras páginas (diferentes a la actual)
+ */
+function moduleExistsInOtherPages(moduleName, currentPageName) {
+  const pagesDir = path.join(process.cwd(), "pages");
+  if (!fs.existsSync(pagesDir)) return false;
+  
+  const pageDirs = fs.readdirSync(pagesDir, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory() && dirent.name !== currentPageName)
+    .map(dirent => dirent.name);
+  
+  for (const pageName of pageDirs) {
+    const pageJsonPath = path.join(pagesDir, pageName, "page.json");
+    if (fs.existsSync(pageJsonPath)) {
+      try {
+        const page = readJSON(pageJsonPath);
+        if (Array.isArray(page.modules)) {
+          const exists = page.modules.some(m => m && m.name === moduleName);
+          if (exists) return true;
+        }
+      } catch (e) {
+        // Si hay error leyendo el archivo, continuar con la siguiente página
+        continue;
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * mgpanel add module <moduleName> --to <pageName>
  */
@@ -738,10 +995,530 @@ function cmdAddModule(moduleName, pageName) {
     return;
   }
 
-  page.modules.push({ name: moduleName });
+  // Determinar si el módulo es importado (existe en otras páginas)
+  const isImported = moduleExistsInOtherPages(moduleName, pageName);
+  page.modules.push({ 
+    name: moduleName, 
+    import: isImported 
+  });
   writeJSON(pageJsonPath, page);
 
-  console.log(`✅ Módulo "${moduleName}" agregado a pages/${pageName}/page.json`);
+  const importStatus = isImported ? "importado" : "propio";
+  console.log(`✅ Módulo "${moduleName}" agregado a pages/${pageName}/page.json (${importStatus})`);
+}
+
+/**
+ * mgpanel publish --account <cuenta> [--token <token>] [--api-url <url>]
+ */
+async function cmdPublish(args) {
+  const { account, token, apiUrl } = parseCliAuthArgs(args);
+
+  if (!account) {
+    console.log("❌ Falta el parámetro --account");
+    console.log("👉 Usa: mgpanel publish --account <nombre-cuenta> [--token <token>] [--api-url <url>]");
+    process.exit(1);
+  }
+
+  if (!token) {
+    console.log("❌ Falta el token de autenticación");
+    console.log("👉 Usa: mgpanel publish --account <cuenta> --token <token>");
+    console.log("   O configura la variable de entorno: MGPANEL_TOKEN");
+    console.log("   O agrega MGPANEL_TOKEN=tu-token en el archivo .env");
+    process.exit(1);
+  }
+
+  // Mostrar información del token (solo primeros y últimos caracteres por seguridad)
+  const tokenPreview = token.length > 10 
+    ? `${token.substring(0, 6)}...${token.substring(token.length - 4)}`
+    : "***";
+  console.log(`🔑 Token: ${tokenPreview}`);
+
+  const projectRoot = process.cwd();
+  const pagesDir = path.join(projectRoot, "pages");
+  const modulesDir = path.join(projectRoot, "modules");
+  const assetsDir = path.join(projectRoot, "assets");
+
+  // Validar que estamos en un proyecto MGPanel
+  if (!fs.existsSync(pagesDir) || !fs.existsSync(modulesDir)) {
+    console.log("❌ No se encontró un proyecto MGPanel válido");
+    console.log("👉 Asegúrate de estar en un directorio con carpetas 'pages' y 'modules'");
+    console.log("   O ejecuta: mgpanel init <nombre-proyecto>");
+    process.exit(1);
+  }
+
+  console.log("📦 Leyendo estructura del proyecto...");
+
+  try {
+    // Leer assets globales
+    const globalCSS = fs.existsSync(path.join(assetsDir, "css", "style.css"))
+      ? fs.readFileSync(path.join(assetsDir, "css", "style.css"), "utf8")
+      : "";
+    const globalJS = fs.existsSync(path.join(assetsDir, "js", "app.js"))
+      ? fs.readFileSync(path.join(assetsDir, "js", "app.js"), "utf8")
+      : "";
+
+    // Páginas del sistema que no deben enviarse al publish (el backend las preserva del draft).
+    const PAGINAS_SISTEMA = new Set([
+      "forms", "form", "docs", "blog", "checkout", "facturas", "invoice",
+      "presupuestos", "budget", "soon"
+    ]);
+
+    // Leer todas las páginas
+    const pages = [];
+    const pageDirs = fs.readdirSync(pagesDir, { withFileTypes: true })
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+
+    console.log(`📂 Páginas encontradas en directorio: ${pageDirs.length} (${pageDirs.join(", ")})`);
+
+    for (const pageName of pageDirs) {
+      const pageNameNorm = pageName.toLowerCase().trim();
+      if (PAGINAS_SISTEMA.has(pageNameNorm)) {
+        console.log(`⏭️  Saltando página del sistema "${pageName}" (no se envía en publish)`);
+        continue;
+      }
+      console.log(`📄 Procesando página: ${pageName}`);
+      // Compatibilidad: algunas personas lo renombraron a "pago.json" por error.
+      // Preferimos "page.json", pero aceptamos "pago.json" como fallback.
+      const pageJsonPath = path.join(pagesDir, pageName, "page.json");
+      const pagoJsonPath = path.join(pagesDir, pageName, "pago.json");
+      let pageConfigPath = null;
+
+      if (fs.existsSync(pageJsonPath)) {
+        pageConfigPath = pageJsonPath;
+      } else if (fs.existsSync(pagoJsonPath)) {
+        pageConfigPath = pagoJsonPath;
+        console.log(`⚠️  Aviso: usando "${pageName}/pago.json". Recomendado: renómbralo a "page.json".`);
+      } else {
+        console.log(`⚠️  Saltando página "${pageName}": no se encontró page.json (ni pago.json)`);
+        continue;
+      }
+
+      let pageConfig;
+      try {
+        pageConfig = readJSON(pageConfigPath);
+      } catch (error) {
+        console.log(`❌ Error al leer ${pageConfigPath}: ${error.message}`);
+        console.log(`⚠️  Saltando página "${pageName}"`);
+        continue;
+      }
+
+      const sections = [];
+
+      // Procesar módulos de la página
+      if (Array.isArray(pageConfig.modules)) {
+        for (let i = 0; i < pageConfig.modules.length; i++) {
+          const moduleName = pageConfig.modules[i].name;
+          if (!moduleName) continue;
+
+          const moduleDir = path.join(modulesDir, moduleName);
+          if (!fs.existsSync(moduleDir)) {
+            console.log(`⚠️  Módulo "${moduleName}" no encontrado, saltando...`);
+            continue;
+          }
+
+          const moduleHTML = fs.existsSync(path.join(moduleDir, `${moduleName}.html`))
+            ? fs.readFileSync(path.join(moduleDir, `${moduleName}.html`), "utf8")
+            : "";
+          const moduleCSS = fs.existsSync(path.join(moduleDir, `${moduleName}.css`))
+            ? fs.readFileSync(path.join(moduleDir, `${moduleName}.css`), "utf8")
+            : "";
+          const moduleJS = fs.existsSync(path.join(moduleDir, `${moduleName}.js`))
+            ? fs.readFileSync(path.join(moduleDir, `${moduleName}.js`), "utf8")
+            : "";
+
+          // Usar el valor de `import` tal cual viene en page.json (no recalcular).
+          // La regla "primera página = dueña" solo aplica al agregar con `mgpanel add module`.
+          const moduleEntry = pageConfig.modules[i];
+          const importValue = moduleEntry && typeof moduleEntry.import === "boolean"
+            ? moduleEntry.import
+            : (moduleEntry && String(moduleEntry.import).toLowerCase() === "true");
+
+          sections.push({
+            code: moduleName,
+            name: moduleName,
+            html: {
+              type: "text/html",
+              code: moduleHTML
+            },
+            css: {
+              type: "text/css",
+              code: moduleCSS
+            },
+            javascript: {
+              type: "application/javascript",
+              code: moduleJS
+            },
+            module: [], // Array de referencias a módulos (el backend lo manejará)
+            order: i + 1,
+            status: 1,
+            import: !!importValue
+          });
+        }
+      }
+
+      // Validar que la página tenga al menos un campo requerido
+      if (!pageConfig.title && !pageName) {
+        console.log(`⚠️  Saltando página "${pageName}": falta información básica`);
+        continue;
+      }
+
+      pages.push({
+        // page: ObjectId - El backend debe generar o usar el existente
+        name: pageName,
+        title: pageConfig.title || pageName,
+        description: pageConfig.description || "",
+        // IMPORTANTE: en MGPanel el `directory` por defecto debe ser "".
+        // No usar `|| pageName` porque "" es válido y si cae al fallback rompe el render (termina guardando "home", "about", etc.).
+        directory: (typeof pageConfig.directory === "string") ? pageConfig.directory : "",
+        url: pageConfig.route || `/${pageName === "home" ? "" : pageName}`,
+        sections: sections,
+        status: 1,
+        soon: false,
+        index: pageName === "home"
+      });
+      
+      console.log(`✅ Página "${pageName}" procesada (${sections.length} secciones)`);
+    }
+
+    console.log(`📊 Total de páginas procesadas: ${pages.length}`);
+
+    // Seguridad: nunca publicar si no se encontró ninguna página.
+    if (pages.length === 0) {
+      console.log("❌ No se encontró ninguna página para publicar.");
+      console.log("👉 Verifica que existan carpetas en ./pages/<pagina>/ y que el archivo sea page.json (o pago.json).");
+      console.log(`💡 Directorios encontrados: ${pageDirs.length > 0 ? pageDirs.join(", ") : "ninguno"}`);
+      process.exit(1);
+    }
+
+    // Construir payload según modelo MongoDB
+    const payload = {
+      type: "published",
+      css: {
+        type: "text/css",
+        code: globalCSS
+      },
+      javascript: {
+        type: "application/javascript",
+        code: globalJS
+      },
+      pages: pages,
+      modified_date: new Date(),
+      has_changes: true,
+      version_number: 1
+    };
+
+    console.log(`📤 Publicando a cuenta: ${account}`);
+    console.log(`📄 Páginas encontradas: ${pages.length}`);
+    console.log(`🧩 Módulos totales: ${pages.reduce((sum, p) => sum + p.sections.length, 0)}`);
+    console.log(`🌐 URL de la API: ${apiUrl}`);
+
+    // Enviar POST request
+    const url = new URL(`${apiUrl}/api/cli/publish`);
+    const postData = JSON.stringify(payload);
+    const urlOptions = {
+      hostname: url.hostname,
+      port: url.port || (url.protocol === "https:" ? 443 : 80),
+      path: url.pathname + url.search,
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Content-Length": Buffer.byteLength(postData),
+        "Authorization": `Bearer ${token}`,
+        "X-Account-Nick": account
+      },
+      timeout: 60000, // 60 segundos de timeout
+      rejectUnauthorized: true, // Aceptar certificados SSL válidos
+      agent: false // No usar agent pool, crear nueva conexión
+    };
+
+    const client = url.protocol === "https:" ? https : http;
+
+    console.log(`🔄 Enviando petición a ${url.hostname}${url.pathname}...`);
+    console.log(`📤 Tamaño del payload: ${Buffer.byteLength(postData)} bytes`);
+
+    // Usar promesa para asegurar que esperamos la respuesta
+    await new Promise((resolve, reject) => {
+      console.log(`🔧 Creando request HTTP...`);
+      const req = client.request(urlOptions, (res) => {
+        console.log(`✅ Callback del request ejecutado`);
+        let responseData = "";
+
+        console.log(`📡 Respuesta recibida: ${res.statusCode} ${res.statusMessage || ""}`);
+
+        // Manejar errores de respuesta
+        res.on("error", (err) => {
+          console.log(`❌ Error al leer la respuesta: ${err.message}`);
+          reject(err);
+        });
+
+        res.on("data", (chunk) => {
+          responseData += chunk;
+          console.log(`📥 Recibiendo datos... (${responseData.length} bytes acumulados)`);
+        });
+
+        res.on("end", () => {
+          console.log(`✅ Evento 'end' disparado`);
+          console.log(`📦 Tamaño de respuesta: ${responseData.length} bytes`);
+          
+          if (res.statusCode >= 200 && res.statusCode < 300) {
+            console.log("✅ Publicación exitosa!");
+            try {
+              const response = JSON.parse(responseData);
+              if (response.message) {
+                console.log(`📝 ${response.message}`);
+              }
+              if (response.data) {
+                console.log(`📊 Versión: ${response.data.version_number || "N/A"}`);
+              }
+              if (response.success === false) {
+                console.log(`⚠️  El servidor reportó: success=false`);
+                console.log(`💬 ${JSON.stringify(response, null, 2)}`);
+              }
+            } catch (e) {
+              // No es JSON, mostrar respuesta tal cual
+              if (responseData) {
+                console.log(`📝 Respuesta (texto): ${responseData.substring(0, 500)}`);
+              } else {
+                console.log(`📝 Respuesta vacía`);
+              }
+            }
+            resolve();
+          } else {
+            console.log(`❌ Error en la publicación (${res.statusCode})`);
+            try {
+              const error = JSON.parse(responseData);
+              console.log(`💬 ${error.message || error.error || "Error desconocido"}`);
+              if (error.details) {
+                console.log(`🔍 Detalles:`, JSON.stringify(error.details, null, 2));
+              }
+            } catch (e) {
+              if (responseData) {
+                console.log(`💬 Respuesta del servidor: ${responseData.substring(0, 500)}`);
+              } else {
+                console.log(`💬 Sin respuesta del servidor`);
+              }
+            }
+            reject(new Error(`HTTP ${res.statusCode}: ${responseData}`));
+          }
+        });
+      });
+
+      req.on("error", (error) => {
+        console.log(`❌ Error de conexión: ${error.message}`);
+        console.log(`💡 Código de error: ${error.code || "N/A"}`);
+        console.log(`💡 Stack: ${error.stack || "N/A"}`);
+        console.log(`💡 Verifica que la URL de la API sea correcta: ${apiUrl}`);
+        if (error.code === "ENOTFOUND") {
+          console.log(`💡 No se pudo resolver el hostname: ${url.hostname}`);
+        } else if (error.code === "ECONNREFUSED") {
+          console.log(`💡 Conexión rechazada. ¿El servidor está corriendo?`);
+        } else if (error.code === "ETIMEDOUT") {
+          console.log(`💡 Timeout de conexión. El servidor no respondió a tiempo.`);
+        } else if (error.code === "CERT_HAS_EXPIRED" || error.code === "UNABLE_TO_VERIFY_LEAF_SIGNATURE") {
+          console.log(`💡 Problema con el certificado SSL. Intenta con rejectUnauthorized: false (solo para desarrollo)`);
+        }
+        reject(error);
+      });
+
+      req.setTimeout(60000, () => {
+        console.log(`❌ Timeout: La petición tardó más de 60 segundos sin respuesta`);
+        console.log(`💡 El servidor puede estar sobrecargado o hay un problema de red`);
+        req.destroy();
+        reject(new Error("Timeout"));
+      });
+
+      console.log(`📤 Escribiendo datos en el request...`);
+      req.write(postData);
+      console.log(`✅ Datos escritos, cerrando request...`);
+      req.end();
+      
+      console.log(`📨 Petición enviada, esperando respuesta...`);
+      
+      // Agregar listener para verificar si el request se está enviando
+      req.on("finish", () => {
+        console.log(`✅ Request finalizado (datos enviados)`);
+      });
+      
+      req.on("close", () => {
+        console.log(`🔒 Conexión cerrada`);
+      });
+    }).catch((error) => {
+      console.log(`❌ Error en la promesa: ${error.message}`);
+      throw error;
+    });
+
+  } catch (error) {
+    console.log(`❌ Error al procesar el proyecto: ${error.message}`);
+    if (error.stack) {
+      console.log(error.stack);
+    }
+    process.exit(1);
+  }
+}
+
+/**
+ * Deriva un slug seguro para el nombre de carpeta de una página desde url o name/title.
+ */
+function pageNameFromApiPage(page) {
+  const name = (page.name || "").trim();
+  if (name && isValidSlug(name)) return name;
+  const url = String(page.url ?? page.route ?? "").trim().replace(/^\/+|\/+$/g, "");
+  if (url === "" || url === "/") return "home";
+  const slug = url.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return slug || "page";
+}
+
+/**
+ * mgpanel pull --account <cuenta> [--token <token>] [--api-url <url>]
+ * Descarga el draft del sitio desde MGPanel al directorio actual.
+ */
+async function cmdPull(args) {
+  const { account, token, apiUrl } = parseCliAuthArgs(args);
+
+  if (!account) {
+    console.log("❌ Falta el parámetro --account");
+    console.log("👉 Usa: mgpanel pull --account <nombre-cuenta> [--token <token>] [--api-url <url>]");
+    process.exit(1);
+  }
+
+  if (!token) {
+    console.log("❌ Falta el token de autenticación");
+    console.log("👉 Usa: mgpanel pull --account <cuenta> --token <token>");
+    console.log("   O configura MGPANEL_TOKEN en .env o en el entorno");
+    process.exit(1);
+  }
+
+  const tokenPreview = token.length > 10 ? `${token.substring(0, 6)}...${token.substring(token.length - 4)}` : "***";
+  console.log(`🔑 Token: ${tokenPreview}`);
+  console.log(`📥 Descargando draft de la cuenta: ${account}`);
+  console.log(`🌐 API: ${apiUrl}`);
+
+  const projectRoot = process.cwd();
+  const pagesDir = path.join(projectRoot, "pages");
+  const modulesDir = path.join(projectRoot, "modules");
+  const hasStructure = fs.existsSync(pagesDir) && fs.existsSync(modulesDir);
+
+  if (!hasStructure) {
+    console.log("📂 No hay estructura MGPanel; creando páginas, módulos y assets...");
+    ensureProjectStructure(projectRoot);
+  }
+
+  const draftUrl = new URL(`${apiUrl}/api/cli/draft`);
+  const client = draftUrl.protocol === "https:" ? https : http;
+  const urlOptions = {
+    hostname: draftUrl.hostname,
+    port: draftUrl.port || (draftUrl.protocol === "https:" ? 443 : 80),
+    path: draftUrl.pathname + draftUrl.search,
+    method: "GET",
+    headers: {
+      "Authorization": `Bearer ${token}`,
+      "X-Account-Nick": account
+    },
+    timeout: 60000,
+    rejectUnauthorized: true,
+    agent: false
+  };
+
+  const responseBody = await new Promise((resolve, reject) => {
+    const req = client.request(urlOptions, (res) => {
+      let data = "";
+      res.on("data", (chunk) => { data += chunk; });
+      res.on("end", () => {
+        if (res.statusCode >= 200 && res.statusCode < 300) {
+          resolve(data);
+        } else {
+          let msg = `HTTP ${res.statusCode}`;
+          try {
+            const err = JSON.parse(data);
+            msg = err.message || err.error || msg;
+          } catch (_) {
+            if (data) msg = data.substring(0, 300);
+          }
+          reject(new Error(msg));
+        }
+      });
+    });
+    req.on("error", (err) => reject(err));
+    req.setTimeout(60000, () => {
+      req.destroy();
+      reject(new Error("Timeout"));
+    });
+    req.end();
+  });
+
+  let payload;
+  try {
+    payload = JSON.parse(responseBody);
+  } catch (e) {
+    console.log("❌ La API no devolvió JSON válido");
+    process.exit(1);
+  }
+
+  // Aceptar { data: draft } o el draft directamente
+  const draft = payload.data && typeof payload.data === "object" ? payload.data : payload;
+  const pages = Array.isArray(draft.pages) ? draft.pages : [];
+  const globalCSS = (draft.css && typeof draft.css.code === "string") ? draft.css.code : "";
+  const globalJS = (draft.javascript && typeof draft.javascript.code === "string") ? draft.javascript.code : "";
+
+  ensureDir(path.join(projectRoot, "assets", "css"));
+  ensureDir(path.join(projectRoot, "assets", "js"));
+  fs.writeFileSync(path.join(projectRoot, "assets", "css", "style.css"), globalCSS, "utf8");
+  fs.writeFileSync(path.join(projectRoot, "assets", "js", "app.js"), globalJS, "utf8");
+
+  // Módulos: clave por name (legible), fallback a code. Contenido de la sección "dueña" (import === false) o la primera.
+  const moduleContentByKey = new Map();
+  for (const page of pages) {
+    const sections = Array.isArray(page.sections) ? page.sections : [];
+    for (const section of sections) {
+      const key = (section.name || section.code || "").trim();
+      if (!key) continue;
+      const isOwner = section.import === false;
+      if (!moduleContentByKey.has(key) || isOwner) {
+        const html = (section.html && typeof section.html === "object") ? (section.html.code ?? "") : (section.html ?? "");
+        const css = (section.css && typeof section.css === "object") ? (section.css.code ?? "") : (section.css ?? "");
+        const js = (section.javascript && typeof section.javascript === "object") ? (section.javascript.code ?? "") : (section.javascript ?? "");
+        moduleContentByKey.set(key, { html: String(html), css: String(css), js: String(js) });
+      }
+    }
+  }
+
+  const safeModuleName = (name) => String(name || "").replace(/[/\\]/g, "-").trim() || "module";
+  for (const [key, content] of moduleContentByKey) {
+    const dirName = safeModuleName(key);
+    const dir = path.join(modulesDir, dirName);
+    ensureDir(dir);
+    fs.writeFileSync(path.join(dir, `${dirName}.html`), content.html, "utf8");
+    fs.writeFileSync(path.join(dir, `${dirName}.css`), content.css, "utf8");
+    fs.writeFileSync(path.join(dir, `${dirName}.js`), content.js, "utf8");
+  }
+
+  for (const page of pages) {
+    const pageName = pageNameFromApiPage(page);
+    const pageDir = path.join(pagesDir, pageName);
+    ensureDir(pageDir);
+
+    const sections = Array.isArray(page.sections) ? page.sections : [];
+    const route = (() => {
+      const u = String(page.url ?? page.route ?? "").trim();
+      if (u === "" || u === "/") return "/";
+      return u.startsWith("/") ? u : `/${u}`;
+    })();
+    const directory = typeof page.directory === "string" ? page.directory : "";
+    const pageJson = {
+      route,
+      title: page.title || pageName,
+      description: page.description || "",
+      directory,
+      modules: sections.map((s) => ({
+        name: (s.name || s.code || "").trim() || "section",
+        import: s.import === true
+      }))
+    };
+    writeJSON(path.join(pageDir, "page.json"), pageJson);
+  }
+
+  console.log(`✅ Pull completado: ${pages.length} página(s), ${moduleContentByKey.size} módulo(s)`);
 }
 
 function cmdDev(port = 3000) {
@@ -851,6 +1628,34 @@ if (cmd1 === "dev") {
   return;
 }
 
+if (cmd1 === "publish") {
+  (async () => {
+    try {
+      await cmdPublish(args);
+      process.exit(0);
+    } catch (error) {
+      console.log(`❌ Error: ${error.message}`);
+      if (error.stack) console.log(error.stack);
+      process.exit(1);
+    }
+  })();
+  return;
+}
+
+if (cmd1 === "pull") {
+  (async () => {
+    try {
+      await cmdPull(args);
+      process.exit(0);
+    } catch (error) {
+      console.log(`❌ Error: ${error.message}`);
+      if (error.stack) console.log(error.stack);
+      process.exit(1);
+    }
+  })();
+  return;
+}
+
 console.log("❌ Comando no reconocido.");
 printHelp();
 process.exit(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgpanel-cli",
-  "version": "1.0.5",
+  "version": "1.0.8",
   "description": "MGPanel CLI",
   "bin": {
     "mgpanel": "./bin/mgpanel.js"