slicejs-web-framework 3.5.0 → 3.5.1

package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -101,6 +101,62 @@ export default class ThemeManager {
       if (typeof document !== 'undefined' && document.documentElement) {
          document.documentElement.setAttribute('data-slice-theme', themeName);
       }
+      this._syncThemeColor();
       slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
    }
+
+   /**
+    * Sync <meta name="theme-color"> to the theme's primary background color.
+    * Reads the CSS variable --primary-background-color from computed styles.
+    * @returns {void}
+    */
+   /**
+    * Sync <meta name="theme-color"> and <meta name="color-scheme">
+    * from --primary-background-color (the active theme's body bg).
+    * @returns {void}
+    */
+   _syncThemeColor() {
+      if (typeof document === 'undefined') return;
+      const bg = getComputedStyle(document.documentElement)
+         .getPropertyValue('--primary-background-color').trim();
+      if (!bg) return;
+
+      let meta = document.querySelector('meta[name="theme-color"]');
+      if (!meta) {
+         meta = document.createElement('meta');
+         meta.name = 'theme-color';
+         document.head.appendChild(meta);
+      }
+      meta.content = bg;
+
+      const scheme = this._isLightColor(bg) ? 'light' : 'dark';
+      let cs = document.querySelector('meta[name="color-scheme"]');
+      if (!cs) {
+         cs = document.createElement('meta');
+         cs.name = 'color-scheme';
+         document.head.appendChild(cs);
+      }
+      cs.content = scheme;
+   }
+
+   /**
+    * Rough luminance check for a hex color.
+    * Returns true when the color is perceived as light.
+    * @param {string} color hex (#fff / #282828)
+    * @returns {boolean}
+    */
+   _isLightColor(color) {
+      const hex = color.replace('#', '');
+      let r, g, b;
+      if (hex.length <= 3) {
+         r = parseInt(hex[0] + hex[0], 16);
+         g = parseInt(hex[1] + hex[1], 16);
+         b = parseInt(hex[2] + hex[2], 16);
+      } else {
+         r = parseInt(hex.slice(0, 2), 16);
+         g = parseInt(hex.slice(2, 4), 16);
+         b = parseInt(hex.slice(4, 6), 16);
+      }
+      return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+   }
 }

package/api/{middleware → framework}/securityMiddleware.js

@@ -1,4 +1,4 @@
-// api/middleware/securityMiddleware.js
+// api/framework/securityMiddleware.js
 import path from 'path';
 
 /**
@@ -7,7 +7,17 @@ import path from 'path';
  */
 export function securityMiddleware(options = {}) {
   const {
-    allowedExtensions = ['.js', '.css', '.html', '.json', '.svg', '.png', '.jpg', '.jpeg', '.gif', '.woff', '.woff2', '.ttf'],
+    allowedExtensions = [
+      '.js', '.mjs', '.cjs',
+      '.css',
+      '.html', '.htm',
+      '.json',
+      '.svg', '.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.ico',
+      '.woff', '.woff2', '.ttf', '.otf', '.eot',
+      '.txt', '.xml', '.pdf',
+      '.webm', '.mp4', '.mp3', '.wav', '.ogg',
+      '.wasm'
+    ],
     blockedPaths = [
       '/node_modules',
       '/package.json',
@@ -15,7 +25,8 @@ export function securityMiddleware(options = {}) {
       '/.env',
       '/.git'
     ],
-    allowPublicAssets = true
+    allowPublicAssets = true,
+    publicPaths = ['/assets', '/public', '/images', '/styles']
   } = options;
 
   return (req, res, next) => {
@@ -35,9 +46,8 @@ export function securityMiddleware(options = {}) {
       });
     }
 
-    // 2. Permitir acceso a assets públicos
+    // 2. Permitir acceso a assets públicos (según sliceConfig.publicFolders)
     if (allowPublicAssets) {
-      const publicPaths = ['/assets', '/public', '/images', '/styles'];
       const isPublicAsset = publicPaths.some(publicPath => 
         requestPath.startsWith(publicPath)
       );
@@ -92,9 +102,7 @@ export function sliceFrameworkProtection(options = {}) {
 
     // Rutas del framework que requieren verificación
     const frameworkPaths = [
-      '/Slice/Components/Structural',
-      '/Slice/Core',
-      '/Slice/Services'
+      '/Slice/Components/Structural'
     ];
 
     const isFrameworkFile = frameworkPaths.some(fwPath => 
@@ -182,72 +190,8 @@ export function suspiciousRequestLogger() {
   };
 }
 
-/**
- * Middleware para bloquear acceso directo vía navegador (typing en la URL)
- * pero permitir peticiones desde scripts (fetch, import, etc.)
- */
-export function directAccessProtection(options = {}) {
-  const { protectedPaths = [] } = options;
-  
-  return (req, res, next) => {
-    const requestPath = req.path;
-    
-    const isProtectedPath = protectedPaths.some(protectedPath => 
-      requestPath.startsWith(protectedPath)
-    );
-    
-    if (!isProtectedPath) {
-      return next();
-    }
-
-    // Detectar acceso directo: 
-    // - No tiene Referer (usuario escribió la URL directamente)
-    // - Accept header indica navegación HTML
-    const referer = req.get('Referer');
-    const accept = req.get('Accept') || '';
-    
-    const isDirectBrowserAccess = !referer && accept.includes('text/html');
-    
-    if (isDirectBrowserAccess) {
-      console.warn(`🚫 Blocked direct browser access: ${requestPath}`);
-      return res.status(403).send(`
-        <!DOCTYPE html>
-        <html>
-        <head>
-          <title>Access Denied</title>
-          <style>
-            body { 
-              font-family: system-ui; 
-              max-width: 600px; 
-              margin: 100px auto; 
-              padding: 20px;
-            }
-            h1 { color: #d32f2f; }
-            code { 
-              background: #f5f5f5; 
-              padding: 2px 6px; 
-              border-radius: 3px;
-            }
-          </style>
-        </head>
-        <body>
-          <h1>🚫 Direct Access Denied</h1>
-          <p>This file cannot be accessed directly.</p>
-          <p>Path: <code>${requestPath}</code></p>
-          <p>Framework files are automatically loaded by the application.</p>
-          <p><a href="/">← Return to application</a></p>
-        </body>
-        </html>
-      `);
-    }
-
-    next();
-  };
-}
-
 export default {
   securityMiddleware,
   sliceFrameworkProtection,
-  suspiciousRequestLogger,
-  directAccessProtection
-};
+  suspiciousRequestLogger
+};

package/api/framework/server.js

@@ -0,0 +1,333 @@
+// api/framework/server.js - Servidor Express encapsulado del framework
+import express from 'express';
+import path from 'path';
+import fs from 'fs';
+import compression from 'compression';
+import {
+  securityMiddleware,
+  sliceFrameworkProtection,
+  suspiciousRequestLogger
+} from './securityMiddleware.js';
+import { createPublicEnvProvider } from './publicEnvResolver.js';
+
+export function createSliceServer(options = {}) {
+  const projectRoot = options.projectRoot || process.cwd();
+  const runMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
+  const folderDeployed = runMode === 'production' ? 'dist' : 'src';
+
+  let sliceConfig = {};
+  try {
+    const configPath = path.join(projectRoot, 'src', 'sliceConfig.json');
+    if (fs.existsSync(configPath)) {
+      sliceConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    }
+  } catch {
+    // usa defaults si no se puede leer la config
+  }
+
+  let frameworkVersion = '';
+  try {
+    const pkgPath = new URL('../../package.json', import.meta.url);
+    frameworkVersion = JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
+  } catch {
+    frameworkVersion = 'unknown';
+  }
+
+  const PORT = process.env.PORT || sliceConfig.server?.port || 3001;
+
+  const normalizedPublicFolders = (Array.isArray(sliceConfig.publicFolders) ? sliceConfig.publicFolders : [])
+    .filter((entry) => typeof entry === 'string')
+    .map((entry) => entry.trim())
+    .filter((entry) => entry.length > 0)
+    .map((entry) => (entry.startsWith('/') ? entry : `/${entry}`));
+
+  const publicEnvProvider = createPublicEnvProvider({
+    mode: runMode,
+    envFilePath: path.join(projectRoot, '.env')
+  });
+
+  const app = express();
+
+  // ==============================================
+  // MIDDLEWARES DE SEGURIDAD (APLICAR PRIMERO)
+  // ==============================================
+
+  // 1. Logger de peticiones sospechosas (solo observación, no bloquea)
+  app.use(suspiciousRequestLogger());
+
+  // 2. Protección del framework - TOTALMENTE AUTOMÁTICA
+  app.use(sliceFrameworkProtection({ port: PORT }));
+
+  app.use(securityMiddleware({
+    publicPaths: normalizedPublicFolders
+  }));
+
+  // ==============================================
+  // MIDDLEWARES DE APLICACIÓN
+  // ==============================================
+
+  // Compresión gzip/brotli para respuestas (threshold 0 = comprimir todo)
+  app.use(compression({ threshold: 0 }));
+
+  // Security headers básicos
+  app.use((req, res, next) => {
+    res.setHeader('X-Content-Type-Options', 'nosniff');
+    res.setHeader('X-Frame-Options', 'DENY');
+    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+    next();
+  });
+
+  // Middleware global para archivos JavaScript con MIME types correctos
+  app.use((req, res, next) => {
+    if (req.path.endsWith('.js') || req.path.endsWith('.mjs') || req.path.endsWith('.cjs')) {
+      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+    }
+    next();
+  });
+
+  // Middleware para parsear JSON y formularios
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: true }));
+
+  // Configurar headers de CORS
+  app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
+
+    if (req.method === 'OPTIONS') {
+      res.sendStatus(200);
+    } else {
+      next();
+    }
+  });
+
+  // ==============================================
+  // RUNTIME MODE ENDPOINT
+  // ==============================================
+
+  app.get('/slice-env.json', (req, res) => {
+    const payload = publicEnvProvider.getPayload();
+    res.setHeader('Cache-Control', 'no-store');
+    res.setHeader('Pragma', 'no-cache');
+    res.setHeader('Expires', '0');
+    res.json(payload);
+  });
+
+  // ==============================================
+  // PWA — manifest + service worker (dev y prod)
+  // ==============================================
+
+  const servePwaFile = (res, fileName, contentType, extraHeaders = {}) => {
+    const filePath = path.join(projectRoot, folderDeployed, fileName);
+    try {
+      if (fs.existsSync(filePath)) {
+        res.setHeader('Content-Type', contentType);
+        for (const [key, value] of Object.entries(extraHeaders)) res.setHeader(key, value);
+        return res.send(fs.readFileSync(filePath, 'utf8'));
+      }
+    } catch (error) {
+      console.error(`Error reading ${fileName}:`, error);
+      return res.status(500).send(`Error reading ${fileName}`);
+    }
+    return res.status(404).send(`${fileName} not found`);
+  };
+
+  app.get('/service-worker.js', (req, res) => {
+    servePwaFile(res, 'service-worker.js', 'application/javascript; charset=utf-8', {
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+      'Service-Worker-Allowed': '/',
+    });
+  });
+
+  app.get('/manifest.json', (req, res) => {
+    servePwaFile(res, 'manifest.json', 'application/manifest+json; charset=utf-8');
+  });
+
+  // ==============================================
+  // ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
+  // ==============================================
+
+  if (runMode === 'production') {
+    app.get('/Slice/Slice.js', (req, res) => {
+      const slicePath = path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'Slice', 'Slice.js');
+      try {
+        if (fs.existsSync(slicePath)) {
+          res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+          return res.send(fs.readFileSync(slicePath, 'utf8'));
+        }
+      } catch (error) {
+        console.error(`Error reading Slice.js:`, error);
+        return res.status(500).send('Error loading framework');
+      }
+      return res.status(404).send('Slice.js not found');
+    });
+
+    app.use('/Slice', (req, res) => res.status(404).send('Not found'));
+    app.use('/Components', (req, res) => res.status(404).send('Not found'));
+  }
+
+  // Middleware personalizado para archivos de bundles con MIME types correctos
+  app.use('/bundles/', (req, res, next) => {
+    if (req.path.endsWith('.js')) {
+      const filePath = path.join(projectRoot, folderDeployed, 'bundles', req.path);
+      console.log(`📂 Processing bundle: ${req.path} -> ${filePath}`);
+
+      if (fs.existsSync(filePath)) {
+        try {
+          const fileContent = fs.readFileSync(filePath, 'utf8');
+          res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
+          res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+          res.setHeader('Pragma', 'no-cache');
+          res.setHeader('Expires', '0');
+          console.log(`✅ Serving bundle: ${req.path} (${fileContent.length} bytes, ${Buffer.byteLength(fileContent, 'utf8')} bytes UTF-8)`);
+          return res.send(fileContent);
+        } catch (error) {
+          console.error(`Error reading bundle file:`, error);
+          return res.status(500).send('Error reading bundle file');
+        }
+      } else {
+        console.log(`❌ Bundle file not found: ${filePath}`);
+        return res.status(404).send('Bundle file not found');
+      }
+    }
+
+    next();
+  });
+
+  app.use('/bundles/', express.static(path.join(projectRoot, folderDeployed, 'bundles')));
+  console.log(`📦 Serving bundles from /${folderDeployed}/bundles`);
+
+  // Servir framework Slice.js (solo development)
+  if (runMode === 'development') {
+    app.use('/Slice/', express.static(path.join(projectRoot, 'node_modules', 'slicejs-web-framework', 'Slice')));
+  }
+
+  if (runMode === 'development') {
+    app.use(express.static(path.join(projectRoot, folderDeployed)));
+  } else {
+    app.use('/App', express.static(path.join(projectRoot, folderDeployed, 'App')));
+    const serveStaticFile = (req, res, filePath, contentType, fileName) => {
+      try {
+        if (fs.existsSync(filePath)) {
+          res.setHeader('Content-Type', contentType);
+          return res.send(fs.readFileSync(filePath, 'utf8'));
+        }
+      } catch (error) {
+        console.error(`Error reading ${fileName}:`, error);
+        return res.status(500).send(`Error reading ${fileName}`);
+      }
+      return res.status(404).send(`${fileName} not found`);
+    };
+
+    app.get('/routes.js', (req, res) => {
+      const routesPath = path.join(projectRoot, folderDeployed, 'routes.js');
+      serveStaticFile(req, res, routesPath, 'application/javascript; charset=utf-8', 'routes.js');
+    });
+    app.get('/sliceConfig.json', (req, res) => {
+      const configPath = path.join(projectRoot, folderDeployed, 'sliceConfig.json');
+      serveStaticFile(req, res, configPath, 'application/json; charset=utf-8', 'sliceConfig.json');
+    });
+    for (const folder of normalizedPublicFolders) {
+      app.use(folder, express.static(path.join(projectRoot, folderDeployed, folder)));
+    }
+    app.use('/bundles/', express.static(path.join(projectRoot, folderDeployed, 'bundles')));
+    app.use('/dist/', express.static(path.join(projectRoot, 'dist')));
+  }
+
+  // ==============================================
+  // RUTAS DE API
+  // ==============================================
+
+  // Ruta de ejemplo para API
+  app.get('/api/status', (req, res) => {
+    res.json({
+      status: 'ok',
+      mode: runMode,
+      folder: folderDeployed,
+      timestamp: new Date().toISOString(),
+      framework: 'Slice.js',
+      version: frameworkVersion,
+      security: {
+        enabled: true,
+        mode: 'automatic',
+        description: 'Zero-config security - works with any domain'
+      }
+    });
+  });
+
+  // ==============================================
+  // SEO: robots.txt & sitemap.xml
+  // ==============================================
+
+  app.get('/robots.txt', (req, res) => {
+    res.sendFile(path.join(projectRoot, folderDeployed, 'robots.txt'));
+  });
+
+  app.get('/sitemap.xml', (req, res) => {
+    res.sendFile(path.join(projectRoot, folderDeployed, 'sitemap.xml'));
+  });
+
+  // ==============================================
+  // API 404 — las rutas /api/* irreconocibles devuelven JSON, no HTML
+  // ==============================================
+
+  app.use('/api', (req, res) => {
+    res.status(404).json({ error: 'API route not found', path: req.originalUrl });
+  });
+
+  // ==============================================
+  // SPA FALLBACK
+  // ==============================================
+
+  app.get('*', (req, res) => {
+    const indexPath = path.join(projectRoot, folderDeployed, 'App', 'index.html');
+    res.sendFile(indexPath, (err) => {
+      if (err) {
+        console.error(`[SPA Fallback] Error sending ${indexPath}:`, err);
+        res.status(500).send(`<h1>500 - Internal Server Error</h1><p>Could not serve application file</p>`);
+      }
+    });
+  });
+
+  // ==============================================
+  // ERROR HANDLER CENTRALIZADO
+  // ==============================================
+
+  app.use((err, req, res, next) => {
+    console.error('[Server Error]', err.stack || err.message || err);
+    if (res.headersSent) return next(err);
+    res.status(err.status || 500).json({
+      error: 'Internal Server Error',
+      message: process.env.NODE_ENV === 'production' ? 'An unexpected error occurred' : err.message
+    });
+  });
+
+  // ==============================================
+  // INICIO DEL SERVIDOR
+  // ==============================================
+
+  function startServer() {
+    const server = app.listen(PORT, () => {
+      console.log(`🔒 Security middleware: active (zero-config, automatic)`);
+      console.log(`🚀 Slice.js server running on port ${PORT}`);
+    });
+
+    process.on('SIGINT', () => {
+      console.log('\n🛑 Slice server stopped');
+      process.exit(0);
+    });
+
+    process.on('SIGTERM', () => {
+      console.log('\n🛑 Server terminated');
+      process.exit(0);
+    });
+
+    return server;
+  }
+
+  return {
+    app,
+    start: startServer
+  };
+}

package/api/index.js

@@ -1,308 +1,7 @@
-// api/index.js - Seguridad automática sin configuración
-import express from 'slicejs-web-framework/api/framework/express.js';
-import path from 'path';
-import fs from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import { 
-  securityMiddleware, 
-  sliceFrameworkProtection, 
-  suspiciousRequestLogger
-} from './middleware/securityMiddleware.js';
-import { createPublicEnvProvider } from './utils/publicEnvResolver.js';
+// api/index.js - Punto de entrada del servidor
+import { createSliceServer } from 'slicejs-web-framework/api/framework/server.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-import sliceConfig from '../src/sliceConfig.json' with { type: 'json' };
+const server = createSliceServer();
+server.start();
 
-let server;
-const app = express();
-
-// Parsear argumentos de línea de comandos
-const args = process.argv.slice(2);
-
-const runMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
-const folderDeployed = runMode === 'production' ? 'dist' : 'src';
-const publicEnvProvider = createPublicEnvProvider({
-  mode: runMode,
-  envFilePath: path.join(__dirname, '..', '.env')
-});
-
-// Obtener puerto desde process.env.PORT con fallback a sliceConfig.json
-const PORT = process.env.PORT || sliceConfig.server?.port || 3001;
-
-// ==============================================
-// MIDDLEWARES DE SEGURIDAD (APLICAR PRIMERO)
-// ==============================================
-
-// 1. Logger de peticiones sospechosas (solo observación, no bloquea)
-app.use(suspiciousRequestLogger());
-
-// 2. Protección del framework - TOTALMENTE AUTOMÁTICA
-// Detecta automáticamente el dominio desde los headers
-// Funciona en localhost, IP, y cualquier dominio
-app.use(sliceFrameworkProtection());
-
-// 3. Middleware de seguridad general
-app.use(securityMiddleware({
-  allowedExtensions: [
-    '.js', '.css', '.html', '.json', 
-    '.svg', '.png', '.jpg', '.jpeg', '.gif', 
-    '.woff', '.woff2', '.ttf', '.ico'
-  ],
-  blockedPaths: [
-    '/node_modules',
-    '/package.json',
-    '/package-lock.json',
-    '/.env',
-    '/.git',
-    '/api/middleware'
-  ],
-  allowPublicAssets: true
-}));
-
-// ==============================================
-// MIDDLEWARES DE APLICACIÓN
-// ==============================================
-
-// Middleware global para archivos JavaScript con MIME types correctos
-app.use((req, res, next) => {
-  if (req.path.endsWith('.js')) {
-    // Forzar headers correctos para TODOS los archivos .js
-    res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
-  }
-  next();
-});
-
-// Middleware para parsear JSON y formularios
-app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
-
-// Configurar headers de CORS
-app.use((req, res, next) => {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
-  
-  if (req.method === 'OPTIONS') {
-    res.sendStatus(200);
-  } else {
-    next();
-  }
-});
-
-// ==============================================
-// RUNTIME MODE ENDPOINT
-// ==============================================
-
-app.get('/slice-env.json', (req, res) => {
-  const payload = publicEnvProvider.getPayload();
-  res.setHeader('Cache-Control', 'no-store');
-  res.setHeader('Pragma', 'no-cache');
-  res.setHeader('Expires', '0');
-  res.json(payload);
-});
-
-// ==============================================
-// PWA — manifest + service worker (dev y prod)
-// ==============================================
-// Despacha los archivos PWA desde la carpeta desplegada (src en dev, dist en
-// prod) si existen; 404 si no, así no estorba cuando la app no es PWA.
-// El service worker se sirve SIN caché (para que sus actualizaciones lleguen) y
-// con Service-Worker-Allowed:/ para permitir scope raíz.
-const servePwaFile = (res, fileName, contentType, extraHeaders = {}) => {
-  const filePath = path.join(__dirname, `../${folderDeployed}`, fileName);
-  try {
-    if (fs.existsSync(filePath)) {
-      res.setHeader('Content-Type', contentType);
-      for (const [key, value] of Object.entries(extraHeaders)) res.setHeader(key, value);
-      return res.send(fs.readFileSync(filePath, 'utf8'));
-    }
-  } catch (error) {
-    console.error(`Error reading ${fileName}:`, error);
-    return res.status(500).send(`Error reading ${fileName}`);
-  }
-  return res.status(404).send(`${fileName} not found`);
-};
-
-app.get('/service-worker.js', (req, res) => {
-  servePwaFile(res, 'service-worker.js', 'application/javascript; charset=utf-8', {
-    'Cache-Control': 'no-cache, no-store, must-revalidate',
-    'Service-Worker-Allowed': '/',
-  });
-});
-
-app.get('/manifest.json', (req, res) => {
-  servePwaFile(res, 'manifest.json', 'application/manifest+json; charset=utf-8');
-});
-
-// ==============================================
-// ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)
-// ==============================================
-
-if (runMode === 'production') {
-  app.get('/Slice/Slice.js', (req, res) => {
-    const slicePath = path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice', 'Slice.js');
-    try {
-      if (fs.existsSync(slicePath)) {
-        res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
-        return res.send(fs.readFileSync(slicePath, 'utf8'));
-      }
-    } catch (error) {
-      console.error(`Error reading Slice.js:`, error);
-      return res.status(500).send('Error loading framework');
-    }
-    return res.status(404).send('Slice.js not found');
-  });
-
-  app.use('/Slice', (req, res) => res.status(404).send('Not found'));
-  app.use('/Components', (req, res) => res.status(404).send('Not found'));
-}
-
-// Middleware personalizado para archivos de bundles con MIME types correctos
-// ⚠️ DEBE IR ANTES del middleware general para tener prioridad
-app.use('/bundles/', (req, res, next) => {
-  // Solo procesar archivos .js
-  if (req.path.endsWith('.js')) {
-    const filePath = path.join(__dirname, `../${folderDeployed}`, 'bundles', req.path);
-    console.log(`📂 Processing bundle: ${req.path} -> ${filePath}`);
-
-    // Verificar que el archivo existe
-    if (fs.existsSync(filePath)) {
-      try {
-        // Leer y servir el archivo con headers correctos
-        const fileContent = fs.readFileSync(filePath, 'utf8');
-        res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
-        res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate'); // No cachear para permitir actualizaciones en tiempo real
-        res.setHeader('Pragma', 'no-cache');
-        res.setHeader('Expires', '0');
-        console.log(`✅ Serving bundle: ${req.path} (${fileContent.length} bytes, ${Buffer.byteLength(fileContent, 'utf8')} bytes UTF-8)`);
-        return res.send(fileContent);
-      } catch (error) {
-        console.error(`Error reading bundle file:`, error);
-        return res.status(500).send('Error reading bundle file');
-      }
-    } else {
-      console.log(`❌ Bundle file not found: ${filePath}`);
-      return res.status(404).send('Bundle file not found');
-    }
-  }
-
-  // Para archivos no .js, continuar con el middleware estático normal
-  next();
-});
-
-// Servir otros archivos de bundles (JSON, CSS, etc.) con el middleware estático normal
-app.use('/bundles/', express.static(path.join(__dirname, `../${folderDeployed}`, 'bundles')));
-console.log(`📦 Serving bundles from /${folderDeployed}/bundles`);
-
-// Servir framework Slice.js (solo development)
-if (runMode === 'development') {
-  app.use('/Slice/', express.static(path.join(__dirname, '..', 'node_modules', 'slicejs-web-framework', 'Slice')));
-}
-
-// Servir archivos estáticos del proyecto con allowlist
-const publicFolders = Array.isArray(sliceConfig.publicFolders) ? sliceConfig.publicFolders : [];
-const normalizedPublicFolders = publicFolders
-  .filter((entry) => typeof entry === 'string')
-  .map((entry) => entry.trim())
-  .filter((entry) => entry.length > 0)
-  .map((entry) => (entry.startsWith('/') ? entry : `/${entry}`));
-
-if (runMode === 'development') {
-  app.use(express.static(path.join(__dirname, `../${folderDeployed}`)));
-} else {
-  app.use('/App', express.static(path.join(__dirname, `../${folderDeployed}`, 'App')));
-  const serveStaticFile = (req, res, filePath, contentType, fileName) => {
-    try {
-      if (fs.existsSync(filePath)) {
-        res.setHeader('Content-Type', contentType);
-        return res.send(fs.readFileSync(filePath, 'utf8'));
-      }
-    } catch (error) {
-      console.error(`Error reading ${fileName}:`, error);
-      return res.status(500).send(`Error reading ${fileName}`);
-    }
-    return res.status(404).send(`${fileName} not found`);
-  };
-
-  // (manifest.json y service-worker.js los sirve el bloque PWA compartido de arriba,
-  //  con headers correctos en dev y prod.)
-  app.get('/routes.js', (req, res) => {
-    const routesPath = path.join(__dirname, `../${folderDeployed}`, 'routes.js');
-    serveStaticFile(req, res, routesPath, 'application/javascript; charset=utf-8', 'routes.js');
-  });
-  app.get('/sliceConfig.json', (req, res) => {
-    const configPath = path.join(__dirname, `../${folderDeployed}`, 'sliceConfig.json');
-    serveStaticFile(req, res, configPath, 'application/json; charset=utf-8', 'sliceConfig.json');
-  });
-  for (const folder of normalizedPublicFolders) {
-    app.use(folder, express.static(path.join(__dirname, `../${folderDeployed}`, folder)));
-  }
-  app.use('/bundles/', express.static(path.join(__dirname, `../${folderDeployed}`, 'bundles')));
-  app.use('/dist/', express.static(path.join(__dirname, '..', 'dist')));
-}
-
-// ==============================================
-// RUTAS DE API
-// ==============================================
-
-// Ruta de ejemplo para API
-app.get('/api/status', (req, res) => {
-  res.json({
-    status: 'ok',
-    mode: runMode,
-    folder: folderDeployed,
-    timestamp: new Date().toISOString(),
-    framework: 'Slice.js',
-    version: '2.0.0',
-    security: {
-      enabled: true,
-      mode: 'automatic',
-      description: 'Zero-config security - works with any domain'
-    }
-  });
-});
-
-
-// ==============================================
-// SPA FALLBACK
-// ==============================================
-
-// SPA fallback - servir index.html para rutas no encontradas
-app.get('*', (req, res) => {
-  const indexPath = path.join(__dirname, `../${folderDeployed}`, "App", 'index.html');
-  res.sendFile(indexPath, (err) => {
-    if (err) {
-      console.error(`[SPA Fallback] Error sending ${indexPath}:`, err);
-      res.status(500).send(`<h1>500 - Internal Server Error</h1><p>Could not serve application file</p>`);
-    }
-  });
-});
-
-// ==============================================
-// INICIO DEL SERVIDOR
-// ==============================================
-
-function startServer() {
-  server = app.listen(PORT, () => {
-    console.log(`🔒 Security middleware: active (zero-config, automatic)`);
-    console.log(`🚀 Slice.js server running on port ${PORT}`);
-  });
-}
-
-// Manejar cierre del proceso
-process.on('SIGINT', () => {
-  console.log('\n🛑 Slice server stopped');
-  process.exit(0);
-});
-
-process.on('SIGTERM', () => {
-  console.log('\n🛑 Server terminated');
-  process.exit(0);
-});
-
-// Iniciar servidor
-startServer();
-
-export default app;
+export default server.app;

package/api/tests/public-env-resolver.test.js

@@ -4,7 +4,7 @@ import { mkdtemp, rm, writeFile } from 'node:fs/promises';
 import path from 'node:path';
 import { tmpdir } from 'node:os';
 
-const resolverModulePath = new URL('../utils/publicEnvResolver.js', import.meta.url);
+const resolverModulePath = new URL('../framework/publicEnvResolver.js', import.meta.url);
 
 async function withTempEnvFile(contents, callback) {
    const dir = await mkdtemp(path.join(tmpdir(), 'slice-public-env-'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "",
   "engines": {
     "node": ">=20"
@@ -25,10 +25,12 @@
   "type": "module",
   "exports": {
     ".": "./Slice/Slice.js",
-    "./api/framework/express.js": "./api/framework/express.js"
+    "./api/framework/express.js": "./api/framework/express.js",
+    "./api/framework/server.js": "./api/framework/server.js"
   },
   "types": "./types/index.d.ts",
   "dependencies": {
+    "compression": "^1.8.1",
     "express": "^4.19.2"
   },
   "devDependencies": {

package/src/App/index.html

@@ -3,9 +3,39 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slice App</title>
+    <title>Slice.js Web Framework</title>
+    <meta name="description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta name="robots" content="index, follow" />
+    <meta name="author" content="vkneider.dev" />
+    <link rel="canonical" href="https://slicejs.com" />
     <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#F8F4FF" />
+    <meta name="color-scheme" content="light dark" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Slice.js Web Framework" />
+    <meta property="og:description" content="Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time. No build step required." />
+    <meta property="og:url" content="https://slicejs.com" />
+    <meta property="og:image" content="https://slicejs.com/images/og-image.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Slice.js Web Framework" />
+    <meta name="twitter:description" content="Slice.js — a lightweight web framework built on native Web Components." />
+    <meta name="twitter:image" content="https://slicejs.com/images/og-image.png" />
     <link rel="stylesheet" type="text/css" href="/App/style.css" />
+    <script type="application/ld+json">
+      {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "Slice.js Web Framework",
+        "url": "https://slicejs.com",
+        "description": "Slice.js — a lightweight web framework built on native Web Components. Build web apps one slice at a time.",
+        "author": {
+          "@type": "Organization",
+          "name": "VKneider",
+          "url": "https://github.com/VKneider"
+        }
+      }
+    </script>
   </head>
 
   <body>

package/src/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Slice.js Web Framework",
+  "short_name": "Slice.js",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#F8F4FF",
+  "theme_color": "#F8F4FF",
+  "icons": [
+    {
+      "src": "/images/favicon.ico",
+      "sizes": "192x192 512x512",
+      "type": "image/x-icon"
+    }
+  ]
+}

package/src/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://slicejs.com/sitemap.xml

package/src/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://slicejs.com/</loc>
+    <priority>1.0</priority>
+    <changefreq>weekly</changefreq>
+  </url>
+</urlset>