desy-html 16.0.4 → 17.0.1

package/vite.config.js

@@ -1,982 +1,1021 @@
-import tailwindcss from '@tailwindcss/vite';
-import fs from 'fs';
-import { glob } from 'glob';
-import hljs from 'highlight.js';
-import beautify from 'js-beautify';
-import yaml from 'js-yaml';
-import nunjucks from 'nunjucks';
-import { outdent } from 'outdent';
-import path from 'path';
-import sharp from 'sharp';
-import { defineConfig } from 'vite';
-import { brandingPlugin, loadBrandingConfig } from './branding/vite-branding-plugin.js';
-
-// Load branding configuration
-const brandingConfig = await loadBrandingConfig(
-  process.env.BRANDING_CONFIG || 'default',
-  process.cwd(),
-  'branding'
-);
-
-// Helper para servir archivos con el MIME type correcto
-function serveFileWithMimeType(filePath, res) {
-  if (!fs.existsSync(filePath)) return false;
-  
-  const ext = path.extname(filePath).toLowerCase();
-  const mimeTypes = {
-    '.svg': 'image/svg+xml',
-    '.png': 'image/png',
-    '.jpg': 'image/jpeg',
-    '.jpeg': 'image/jpeg',
-    '.webp': 'image/webp',
-    '.ico': 'image/x-icon',
-    '.js': 'application/javascript',
-    '.css': 'text/css',
-    '.html': 'text/html'
-  };
-  
-  res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
-  res.end(fs.readFileSync(filePath));
-  return true;
-}
-
-// Helper functions
-function kebabCaseToPascalCase(value) {
-  return value
-    .toLowerCase()
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('');
-}
-
-function getBeautifyOptions() {
-  const options = beautify.html.defaultOptions();
-  return {
-    indent_size: 2,
-    inline: options.inline.filter((tag) => !['label'].includes(tag)),
-    max_preserve_newlines: 0,
-    wrap_attributes: 'preserve'
-  };
-}
-
-// Function to configure Nunjucks environment
-function setupNunjucksEnvironment(paths, options = {}) {
-  const defaultOptions = {
-    autoescape: true,
-    trimBlocks: true,
-    lstripBlocks: true,
-    throwOnUndefined: false,
-    noCache: true
-  };
-
-  const env = nunjucks.configure(paths, { ...defaultOptions, ...options });
-
-  // Global configuration
-  env.addGlobal('assetsUrl', '/src');
-  env.addGlobal('branding', brandingConfig);
-
-  env.addGlobal('loadComponentParams', function (componentName) {
-    try {
-      const yamlPath = path.join(process.cwd(), 'src/templates/components', componentName, `params.${componentName}.yaml`);
-
-      if (fs.existsSync(yamlPath)) {
-        const content = fs.readFileSync(yamlPath, 'utf8');
-        const parsedYaml = yaml.load(content);
-        const dumpedYaml = yaml.dump(parsedYaml);
-        return dumpedYaml;
-      }
-      console.error(`YAML file not found: ${yamlPath}`);
-      return '';
-    } catch (err) {
-      console.error(`Error loading YAML for ${componentName}:`, err);
-      return '';
-    }
-  });
-
-  // Four globals for code blocks
-  env.addGlobal('getHTMLCodeFromExample', function (componentName, params, pathName) {
-    const templatePath = `${pathName}s/${componentName}/_template.${componentName}.njk`;
-    const html = env.render(templatePath, { params }).trim();
-    return beautify.html(html, getBeautifyOptions());
-  });
-
-  env.addGlobal('getHTMLCodeFromFile', function (templatePath) {
-    const html = env.render(templatePath).trim();
-    return beautify.html(html, getBeautifyOptions());
-  });
-
-  env.addGlobal('getNunjucksCodeFromExample', function (componentName, params, pathName) {
-    const macroName = kebabCaseToPascalCase(componentName);
-    return outdent`
-      {% from "${pathName}s/${componentName}/_macro.${componentName}.njk" import ${pathName}${macroName} %}
-      {{ ${pathName}${macroName}(${JSON.stringify(params, undefined, 2)
-      }) }}
-    `;
-  });
-
-  env.addGlobal('getNunjucksCodeFromFile', function (templatePath) {
-    try {
-      const codeFromFile = fs.readFileSync(
-        path.join(process.cwd(), 'src/templates', templatePath),
-        'utf8'
-      );
-      return outdent`
-        ${codeFromFile}
-      `;
-    } catch (err) {
-      console.error(`Error reading file ${templatePath}:`, err);
-      return '';
-    }
-  });
-
-  // Filter configuration
-  env.addFilter('filtercaller', function (params) {
-    if (params && typeof params === 'object') {
-      const filteredParams = { ...params };
-      delete filteredParams.caller;
-      return filteredParams;
-    }
-    return params;
-  });
-
-  env.addFilter('filterslugify', function (str) {
-    if (typeof str !== 'string') {
-      return '';
-    }
-    let slug = str.replace(/\s+/g, '-');
-    slug = slug.replace(/[^\w-]+/g, '');
-    slug = slug.toLowerCase();
-    return slug;
-  });
-
-  env.addFilter('highlight', function (code, language) {
-    try {
-      return hljs.highlight(code.trim(), {
-        language: language || 'plaintext'
-      }).value;
-    } catch (err) {
-      console.error('Error highlighting code:', err);
-      return code;
-    }
-  });
-
-  env.addFilter('filterescapeltgt', function (str) {
-    if (typeof str !== 'string' && typeof str !== 'object') return str;
-    if (typeof str !== 'string') str = JSON.stringify(str);
-    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  });
-
-  env.addFilter('filterquotes', function (str) {
-    if (typeof str !== 'string') return str;
-    let inTag = false;
-    let result = '';
-    let currentQuote = null;
-    for (let i = 0; i < str.length; i++) {
-      const char = str[i];
-      if (char === '<') {
-        inTag = true;
-        result += char;
-        continue;
-      }
-      if (char === '>') {
-        inTag = false;
-        result += char;
-        continue;
-      }
-      if (inTag) {
-        if (char === "'" || char === '"') {
-          if (currentQuote === null) {
-            currentQuote = char;
-            result += '"';
-          } else if (currentQuote === char) {
-            currentQuote = null;
-            result += '"';
-          } else {
-            result += char;
-          }
-        } else {
-          result += char;
-        }
-      } else {
-        result += char;
-      }
-    }
-    return result;
-  });
-
-  env.addFilter('filterversion', function () {
-    const pkg = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8'));
-    return pkg.version;
-  });
-
-  return env;
-}
-
-// Improved function to process Nunjucks files during build
-async function processNunjucksFiles(env) {
-  try {
-    const docsPath = path.resolve(process.cwd(), 'docs');
-    const htmlFiles = await glob('*.html', { cwd: docsPath });
-
-
-    for (const htmlFile of htmlFiles) {
-      try {
-        const sourcePath = path.join(docsPath, htmlFile);
-        const outputPath = path.join(process.cwd(), 'dist', htmlFile);
-
-        const content = await fs.promises.readFile(sourcePath, 'utf8');
-        let processedHtml = env.renderString(content);
-
-        // Transformations for relative paths
-        processedHtml = processedHtml.replace(/href=["']\/src\/css\/([^"']*)["']/g, 'href="css/$1"');
-        processedHtml = processedHtml.replace(/href=["']src\/css\/([^"']*)["']/g, 'href="css/$1"');
-
-        // Transform JS paths (ensure they are relative without leading slash)
-        processedHtml = processedHtml.replace(/src=["']\/src\/js\/([^"']*)["']/g, 'src="js/$1"');
-        processedHtml = processedHtml.replace(/src=["']src\/js\/([^"']*)["']/g, 'src="js/$1"');
-
-        // Also process if any route with /js/ (absolute) remains
-        processedHtml = processedHtml.replace(/src=["']\/js\/([^"']*)["']/g, 'src="js/$1"');
-
-        // Transform image paths
-        processedHtml = processedHtml.replace(/src=["']\/src\/images\/([^"']*)["']/g, 'src="images/$1"');
-        processedHtml = processedHtml.replace(/src=["']src\/images\/([^"']*)["']/g, 'src="images/$1"');
-
-        await fs.promises.mkdir(path.dirname(outputPath), { recursive: true });
-        await fs.promises.writeFile(outputPath, processedHtml);
-      } catch (fileError) {
-        console.error(`Error processing file ${htmlFile}:`, fileError);
-      }
-    }
-  } catch (error) {
-    console.error('Error in processNunjucksFiles:', error);
-  }
-}
-
-// NEW FUNCTION: Process JavaScript files to remove CSS imports and fix modules
-async function processJavaScriptFiles() {
-  try {
-    const srcJsDir = path.resolve(process.cwd(), 'src/js');
-    const distJsDir = path.resolve(process.cwd(), 'dist/js');
-
-    // Create dist/js directory if it doesn't exist
-    await fs.promises.mkdir(distJsDir, { recursive: true });
-
-    // 1. Copy npm packages to the vendor folder
-    const vendorDir = path.join(distJsDir, 'vendor');
-    await fs.promises.mkdir(vendorDir, { recursive: true });
-
-    // 2. Process all JS files
-    const jsFiles = await glob('**/*.js', { cwd: srcJsDir });
-
-    for (const jsFile of jsFiles) {
-      const sourcePath = path.join(srcJsDir, jsFile);
-      const destPath = path.join(distJsDir, jsFile);
-
-      // Create directory if necessary
-      await fs.promises.mkdir(path.dirname(destPath), { recursive: true });
-
-      // Read file content
-      const content = await fs.promises.readFile(sourcePath, 'utf8');
-
-      // Transform the content
-      let processedContent = content;
-
-      // a) Remove CSS file imports
-      processedContent = processedContent.replace(
-        /import\s+['"](.+\.css)['"];?/g,
-        '// CSS import removed: $1'
-      );
-
-      // c) Fix other relative import paths between JS files
-      processedContent = processedContent.replace(
-        /from\s+["']\/src\/js\/([^"']*)["']/g,
-        (match, importPath) => {
-          const depth = jsFile.split('/').length - 1;
-          const prefix = depth > 0 ? '../'.repeat(depth) : './';
-          return `from "${prefix}${importPath}"`;
-        }
-      );
-
-      processedContent = processedContent.replace(
-        /from\s+["']src\/js\/([^"']*)["']/g,
-        (match, importPath) => {
-          const depth = jsFile.split('/').length - 1;
-          const prefix = depth > 0 ? '../'.repeat(depth) : './';
-          return `from "${prefix}${importPath}"`;
-        }
-      );
-
-      // Write the processed file
-      await fs.promises.writeFile(destPath, processedContent);
-    }
-
-  } catch (error) {
-    console.error('Error processing JavaScript:', error);
-  }
-}
-
-// Optimize image with Sharp
-async function optimizeImage(sourcePath, destPath, fileExtension) {
-  try {
-    const image = sharp(sourcePath);
-
-    switch (fileExtension.toLowerCase()) {
-      case '.jpg':
-      case '.jpeg':
-        await image
-          .jpeg({
-            quality: 80,
-            mozjpeg: true,
-            progressive: true
-          })
-          .toFile(destPath);
-        break;
-
-      case '.png':
-        await image
-          .png({
-            quality: 80,
-            palette: true,
-            compressionLevel: 9
-          })
-          .toFile(destPath);
-        break;
-
-      case '.webp':
-        await image
-          .webp({
-            quality: 80,
-            effort: 6
-          })
-          .toFile(destPath);
-        break;
-
-      case '.avif':
-        await image
-          .avif({
-            quality: 80,
-            effort: 4
-          })
-          .toFile(destPath);
-        break;
-
-      case '.svg':
-        // SVGs are not processed with Sharp, they are copied directly
-        await fs.promises.copyFile(sourcePath, destPath);
-        break;
-
-      default:
-        // For other formats, copy without optimizing
-        await fs.promises.copyFile(sourcePath, destPath);
-        break;
-    }
-
-    return true;
-  } catch (error) {
-    console.error(`❌ Error optimizing ${sourcePath}:`, error.message);
-    // If optimization fails, try direct copy as fallback
-    try {
-      await fs.promises.copyFile(sourcePath, destPath);
-      return true;
-    } catch (copyError) {
-      console.error(`❌ Error copying ${sourcePath}:`, copyError.message);
-      return false;
-    }
-  }
-}
-
-// UPDATED FUNCTION: Copy and optimize all images
-async function copyAndOptimizeImages() {
-  try {
-    const srcImagesDir = path.resolve(process.cwd(), 'public/images');
-    const distImagesDir = path.resolve(process.cwd(), 'dist/images');
-
-    // Check if public/images folder exists
-    if (!fs.existsSync(srcImagesDir)) {
-      console.log('📁 public/images does not exist, skipping image optimization');
-      return;
-    }
-
-    // Create dist/images directory if it doesn't exist
-    await fs.promises.mkdir(distImagesDir, { recursive: true });
-
-    // Get all image files recursively
-    const imageFiles = await glob('**/*.{png,jpg,jpeg,gif,svg,webp,avif,ico,bmp,tiff}', {
-      cwd: srcImagesDir,
-      nodir: true
-    });
-
-    console.log(`🖼️  Optimizing ${imageFiles.length} images with Sharp...`);
-
-    let optimizedCount = 0;
-    let copiedCount = 0;
-    let totalSizeBefore = 0;
-    let totalSizeAfter = 0;
-
-    for (const imageFile of imageFiles) {
-      const sourcePath = path.join(srcImagesDir, imageFile);
-      const destPath = path.join(distImagesDir, imageFile);
-      const fileExtension = path.extname(imageFile);
-
-      // Create directory if necessary (for subdirectories)
-      await fs.promises.mkdir(path.dirname(destPath), { recursive: true });
-
-      // Get original file size
-      const statsBefore = await fs.promises.stat(sourcePath);
-      totalSizeBefore += statsBefore.size;
-
-      // Optimize or copy image
-      const success = await optimizeImage(sourcePath, destPath, fileExtension);
-
-      if (success) {
-        // Get file size after optimization
-        if (fs.existsSync(destPath)) {
-          const statsAfter = await fs.promises.stat(destPath);
-          totalSizeAfter += statsAfter.size;
-
-          const reduction = ((statsBefore.size - statsAfter.size) / statsBefore.size * 100).toFixed(1);
-
-          if (['.jpg', '.jpeg', '.png', '.webp', '.avif'].includes(fileExtension.toLowerCase())) {
-            console.log(`✨ Optimized: ${imageFile} (${reduction}% reduced)`);
-            optimizedCount++;
-          } else {
-            console.log(`📄 Copied: ${imageFile}`);
-            copiedCount++;
-          }
-        }
-      }
-    }
-
-    const totalReduction = ((totalSizeBefore - totalSizeAfter) / totalSizeBefore * 100).toFixed(1);
-    const sizeBefore = (totalSizeBefore / 1024).toFixed(1);
-    const sizeAfter = (totalSizeAfter / 1024).toFixed(1);
-
-    console.log(`🎉 Processing completed:`);
-    console.log(`   ✨ ${optimizedCount} images optimized`);
-    console.log(`   📄 ${copiedCount} files copied`);
-    console.log(`   📊 Size: ${sizeBefore}KB → ${sizeAfter}KB (${totalReduction}% reduced)`);
-
-  } catch (error) {
-    console.error('❌ Error in copyAndOptimizeImages:', error);
-  }
-}
-
-// Copy branding assets to dist/images
-async function copyBrandingAssets() {
-  try {
-    const brandingDir = path.resolve(process.cwd(), 'branding');
-    const distImagesDir = path.resolve(process.cwd(), 'dist/images');
-
-    if (!fs.existsSync(brandingDir)) {
-      console.log('📁 branding/ does not exist, skipping branding assets');
-      return;
-    }
-
-    await fs.promises.mkdir(distImagesDir, { recursive: true });
-
-    // Copy logos (flattened to images/)
-    const logosDir = path.join(brandingDir, 'logos');
-    if (fs.existsSync(logosDir)) {
-      const logoFiles = await glob('**/*.svg', { cwd: logosDir, nodir: true });
-      for (const file of logoFiles) {
-        const sourcePath = path.join(logosDir, file);
-        const fileName = path.basename(file); // Get just the filename to flatten structure
-        const destPath = path.join(distImagesDir, fileName);
-        await fs.promises.copyFile(sourcePath, destPath);
-      }
-    }
-
-    // Copy header background images
-    const imagesDir = path.join(brandingDir, 'images');
-    if (fs.existsSync(imagesDir)) {
-      const imageFiles = await glob('*.svg', { cwd: imagesDir, nodir: true });
-      for (const file of imageFiles) {
-        const sourcePath = path.join(imagesDir, file);
-        const destPath = path.join(distImagesDir, file);
-        await fs.promises.copyFile(sourcePath, destPath);
-      }
-    }
-
-    console.log('✅ Branding assets copied to dist/images/');
-  } catch (error) {
-    console.error('❌ Error in copyBrandingAssets:', error);
-  }
-}
-
-// Function to copy assets (updated to use optimization)
-async function copyAssets() {
-  try {
-    // Copy and optimize images
-    await copyAndOptimizeImages();
-
-    // Copy branding assets
-    await copyBrandingAssets();
-
-    // Copy license if it exists
-    const licenseFile = path.resolve(process.cwd(), 'EUPL-1.2.txt');
-    if (fs.existsSync(licenseFile)) {
-      await fs.promises.copyFile(licenseFile, path.join(process.cwd(), 'dist', 'EUPL-1.2.txt'));
-    }
-  } catch (error) {
-    console.error('Error copying assets:', error);
-  }
-}
-
-// Final verification to ensure there are no common errors
-async function validateBuild() {
-  try {
-    const distPath = path.resolve(process.cwd(), 'dist');
-
-    // 1. Check that there are no src/ references in HTML files
-    const htmlFiles = await glob('**/*.html', { cwd: distPath });
-
-    for (const htmlFile of htmlFiles) {
-      const filePath = path.join(distPath, htmlFile);
-      const content = await fs.promises.readFile(filePath, 'utf8');
-
-      // Search for /src/ or src/ references
-      if (content.includes('/src/') || content.includes('src/')) {
-
-        // Auto-correct
-        let correctedContent = content
-          .replace(/href=["']\/src\/([^"']*)["']/g, 'href="$1"')
-          .replace(/href=["']src\/([^"']*)["']/g, 'href="$1"')
-          .replace(/src=["']\/src\/([^"']*)["']/g, 'src="$1"')
-          .replace(/src=["']src\/([^"']*)["']/g, 'src="$1"');
-
-        await fs.promises.writeFile(filePath, correctedContent);
-      }
-    }
-
-    // 2. Check that there are no absolute references in scripts
-    for (const htmlFile of htmlFiles) {
-      const filePath = path.join(distPath, htmlFile);
-      const content = await fs.promises.readFile(filePath, 'utf8');
-
-      // Search for script tags with src that starts with "/"
-      const hasAbsoluteScripts = /<script[^>]*src=["']\/[^"']*["'][^>]*>/g.test(content);
-
-      if (hasAbsoluteScripts) {
-
-        // Auto-correct
-        let correctedContent = content.replace(
-          /<script([^>]*)src=["']\/([^"']*)["']([^>]*)>/g,
-          '<script$1src="$2"$3>'
-        );
-
-        await fs.promises.writeFile(filePath, correctedContent);
-      }
-    }
-
-    // 3. Check JS files
-    const jsFiles = await glob('js/**/*.js', { cwd: distPath });
-
-    for (const jsFile of jsFiles) {
-      const filePath = path.join(distPath, jsFile);
-      const content = await fs.promises.readFile(filePath, 'utf8');
-
-      // Search for CSS imports
-      if (content.includes('.css"') || content.includes(".css'")) {
-
-        // Comment out these imports
-        let correctedContent = content.replace(
-          /import\s+['"](.+\.css)['"];?/g,
-          '// CSS import removed: $1'
-        );
-
-        await fs.promises.writeFile(filePath, correctedContent);
-      }
-    }
-
-  } catch (error) {
-    console.error('Error validating build:', error);
-  }
-}
-
-// Correct CSS image paths for production
-async function rewriteCssImagePaths() {
-  const stylePath = path.resolve(process.cwd(), 'dist/css/styles.css');
-  if (!fs.existsSync(stylePath)) return;
-  let content = await fs.promises.readFile(stylePath, 'utf8');
-  content = content.replace(/url\((['"]?)\/images\//g, 'url($1../images/');
-  await fs.promises.writeFile(stylePath, content);
-}
-
-// Correct HTML image paths for production (from /images/, /branding/logos/, /branding/images/ to ../images/)
-async function rewriteHtmlImagePaths() {
-  const distDir = path.resolve(process.cwd(), 'dist');
-  if (!fs.existsSync(distDir)) return;
-
-  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
-
-  // Configuración centralizada de rewrites
-  const rewriteRules = [
-    // Imágenes en /images/
-    { pattern: /src="(\/images\/)/g, replacement: 'src="./images/' },
-    { pattern: /srcset="(\/images\/)/g, replacement: 'srcset="./images/' },
-    // Imágenes en /branding/logos/
-    { pattern: /src="(\/branding\/logos\/)/g, replacement: 'src="./images/' },
-    { pattern: /srcset="(\/branding\/logos\/)/g, replacement: 'srcset="./images/' },
-    // Imágenes en /branding/images/
-    { pattern: /src="(\/branding\/images\/)/g, replacement: 'src="./images/' },
-    { pattern: /srcset="(\/branding\/images\/)/g, replacement: 'srcset="./images/' },
-  ];
-
-  for (const htmlFile of htmlFiles) {
-    const filePath = path.join(distDir, htmlFile);
-    let content = await fs.promises.readFile(filePath, 'utf8');
-
-    // Aplicar todas las reglas
-    let modified = content;
-    for (const rule of rewriteRules) {
-      modified = modified.replace(rule.pattern, rule.replacement);
-    }
-
-    if (modified !== content) {
-      await fs.promises.writeFile(filePath, modified);
-    }
-  }
-}
-
-// Rewrite favicon hrefs from /branding/logos/ to ./images/ (after HTML files are generated)
-async function rewriteFaviconPaths() {
-  const distDir = path.resolve(process.cwd(), 'dist');
-  const imagesDir = path.resolve(process.cwd(), 'dist/images');
-  if (!fs.existsSync(distDir)) return;
-
-  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
-  
-  // Favicon files to rewrite
-  const faviconFiles = [
-    'favicon.svg',
-    'favicon.ico',
-    'apple-touch-icon.png'
-  ];
-
-  for (const htmlFile of htmlFiles) {
-    const filePath = path.join(distDir, htmlFile);
-    let content = await fs.promises.readFile(filePath, 'utf8');
-    let modified = content;
-
-    for (const faviconFile of faviconFiles) {
-      const sourcePath = `/branding/logos/${faviconFile}`;
-      const destPath = `./images/${faviconFile}`;
-      
-      // Only rewrite if the destination file exists in imagesDir
-      const destFilePath = path.join(imagesDir, faviconFile);
-      if (fs.existsSync(destFilePath)) {
-        const oldHref = `href="${sourcePath}"`;
-        const newHref = `href="${destPath}"`;
-        modified = modified.replaceAll(oldHref, newHref);
-      }
-    }
-
-    if (modified !== content) {
-      await fs.promises.writeFile(filePath, modified);
-    }
-  }
-  
-  if (htmlFiles.length > 0) {
-    console.log(`✓ Rewrote favicon paths in ${htmlFiles.length} HTML file(s)`);
-  }
-}
-
-// Custom Nunjucks plugin
-function customNunjucksPlugin() {
-  let env;
-
-  return {
-    name: 'vite-plugin-custom-nunjucks',
-
-    configureServer({ middlewares, watcher, ws }) {
-
-      // Configure Nunjucks with development-specific options
-      env = setupNunjucksEnvironment(['docs', 'src/templates'], {
-        watch: true,
-        throwOnUndefined: false
-      });
-
-      // Watch for CSS and NJK files
-      watcher.add(['src/**/*.css', 'docs/**/*.njk', 'src/**/*.njk']);
-      watcher.on('change', (path) => {
-        ws.send({
-          type: 'full-reload'
-        });
-      });
-
-      // Middleware to serve branding assets in development
-      middlewares.use(async (req, res, next) => {
-        if (req.url.startsWith('/branding/')) {
-          const filePath = path.join(process.cwd(), req.url);
-          if (serveFileWithMimeType(filePath, res)) return;
-        }
-        next();
-      });
-
-      // Helper function to find file recursively in directories
-      function findFileRecursive(dir, fileName) {
-        if (!fs.existsSync(dir)) return null;
-        const files = fs.readdirSync(dir);
-        for (const file of files) {
-          const fullPath = path.join(dir, file);
-          if (fs.statSync(fullPath).isDirectory()) {
-            const found = findFileRecursive(fullPath, fileName);
-            if (found) return found;
-          } else if (file === fileName) {
-            return fullPath;
-          }
-        }
-        return null;
-      }
-
-      // Middleware to serve branding assets from /images/ in development
-      middlewares.use(async (req, res, next) => {
-        if (req.url.startsWith('/images/')) {
-          let filePath = path.join(process.cwd(), 'public', req.url);
-
-          if (!fs.existsSync(filePath)) {
-            const fileName = path.basename(req.url);
-            
-            // Search in branding/logos (including subdirectories like eu/)
-            const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-            const foundInLogos = findFileRecursive(brandingLogosPath, fileName);
-            
-            if (foundInLogos) {
-              filePath = foundInLogos;
-            } else {
-              // Search in branding/images
-              const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-              const foundInImages = findFileRecursive(brandingImagesPath, fileName);
-              if (foundInImages) {
-                filePath = foundInImages;
-              }
-            }
-          }
-
-          if (fs.existsSync(filePath)) {
-            if (serveFileWithMimeType(filePath, res)) return;
-          }
-        }
-        next();
-      });
-
-      // Middleware to serve branding assets from /branding/logos/ in development
-      middlewares.use(async (req, res, next) => {
-        if (req.url.startsWith('/branding/logos/')) {
-          const fileName = path.basename(req.url);
-          const brandingLogosPath = path.join(process.cwd(), 'branding/logos');
-          const filePath = findFileRecursive(brandingLogosPath, fileName);
-
-          if (serveFileWithMimeType(filePath, res)) return;
-        }
-        next();
-      });
-
-      // Middleware to serve branding assets from /branding/images/ in development
-      middlewares.use(async (req, res, next) => {
-        if (req.url.startsWith('/branding/images/')) {
-          const fileName = path.basename(req.url);
-          const brandingImagesPath = path.join(process.cwd(), 'branding/images');
-          const filePath = findFileRecursive(brandingImagesPath, fileName);
-
-          if (serveFileWithMimeType(filePath, res)) return;
-        }
-        next();
-      });
-
-      // Middleware to transform paths in development (keep as is)
-      middlewares.use(async (req, res, next) => {
-        // Intercept requests to /css/ and redirect to /src/css/
-        if (req.url.startsWith('/css/')) {
-          req.url = req.url.replace('/css/', '/src/css/');
-        }
-
-        // Intercept requests to /js/ and redirect to /src/js/
-        if (req.url.startsWith('/js/')) {
-          req.url = req.url.replace('/js/', '/src/js/');
-        }
-
-        // Set correct MIME type for JS
-        if (req.url.endsWith('.js')) {
-          res.setHeader('Content-Type', 'application/javascript');
-        }
-
-        next();
-      });
-
-      // Middleware for CSS
-      middlewares.use(async (req, res, next) => {
-        if (req.url.startsWith('/src/css/')) {
-          return next();
-        }
-        next();
-      });
-
-      // Middleware for .html
-      middlewares.use(async (req, res, next) => {
-        if (req.url === '/') {
-          req.url = '/index.html';
-        }
-
-        if (req.url.endsWith('.html')) {
-          try {
-            const templatePath = req.url.slice(1);
-            const html = env.render(templatePath);
-            res.setHeader('Content-Type', 'text/html');
-            return res.end(html);
-          } catch (e) {
-            console.error('Error rendering template:', e.message);
-            return next(e);
-          }
-        }
-        next();
-      });
-    },
-
-    configurePreviewServer(server) {
-      const { middlewares } = server;
-
-
-      // Configure Nunjucks with preview-specific options
-      env = setupNunjucksEnvironment(['docs', 'src/templates'], {
-        watch: false,
-        throwOnUndefined: false
-      });
-
-      // Configure the middlewares
-      middlewares.use(async (req, res, next) => {
-        if (req.url === '/') {
-          req.url = '/index.html';
-        }
-
-        if (req.url.endsWith('.html')) {
-          try {
-            const templatePath = req.url.slice(1);
-            const html = env.render(templatePath);
-            res.setHeader('Content-Type', 'text/html');
-            return res.end(html);
-          } catch (e) {
-            console.error('Error in preview:', e.message);
-            return next(e);
-          }
-        }
-        next();
-      });
-    },
-
-    transform(content, id) {
-      if (id.endsWith('.njk')) {
-        const html = env.renderString(content);
-        return {
-          code: `export default ${JSON.stringify(html)}`,
-          map: null
-        };
-      }
-    },
-
-    async buildStart() {
-      // Configure Nunjucks for the build
-      env = setupNunjucksEnvironment(['docs', 'docs/ds', 'src/templates'], {
-        watch: false,
-        throwOnUndefined: false
-      });
-    },
-
-    async closeBundle() {
-      console.log('🚀 Starting custom build process...');
-
-      // Step 1: Copy and optimize assets (including images) first
-      await copyAssets();
-
-      // Step 2: Correct CSS image paths for production
-      await rewriteCssImagePaths();
-
-      // Step 3: Skip processing JavaScript files - let Vite handle bundling
-      // (Vite will resolve npm dependencies like @floating-ui/dom correctly)
-      // await processJavaScriptFiles();
-
-      // Step 4: Process Nunjucks files (images are already in dist)
-      await processNunjucksFiles(env);
-
-      // Step 4b: Correct HTML image paths for production (after HTML files are generated)
-      await rewriteHtmlImagePaths();
-
-      // Step 4c: Rewrite favicon paths from /branding/logos/ to ./images/
-      await rewriteFaviconPaths();
-
-      // Step 5: Final validation to find and fix common errors
-      await validateBuild();
-
-      console.log('✅ Custom build completed');
-    }
-  };
-}
-
-// Main Vite configuration
-export default defineConfig({
-  plugins: [
-    brandingPlugin(brandingConfig),
-    customNunjucksPlugin(),
-    tailwindcss()
-  ],
-  build: {
-    outDir: 'dist',
-    minify: true,
-    emptyOutDir: true,
-    cssCodeSplit: false,
-    manifest: true,
-    rollupOptions: {
-      input: {
-        index: path.resolve(__dirname, 'src/js/index.js')
-      },
-      output: {
-        entryFileNames: 'js/[name].js',
-        chunkFileNames: 'js/[name]-[hash].js',
-        assetFileNames: (assetInfo) => {
-          // Rename style.css to styles.css
-          if (assetInfo.name === 'style.css') {
-            return 'css/styles.css';
-          }
-
-          // Handle other asset types
-          const info = assetInfo.name.split('.');
-          const extType = info[info.length - 1];
-          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
-            return 'images/[name][extname]';
-          }
-          if (/css/i.test(extType)) {
-            return 'css/[name][extname]';
-          }
-          return '[name][extname]';
-        },
-        format: 'es',
-      }
-    }
-  },
-  server: {
-    open: '/',
-    watch: {
-      ignored: ['!**/docs/**', '!**/src/templates/**']
-    },
-    host: '0.0.0.0',
-    allowedHosts: [
-      '82c7d68c-1131-4db5-bf36-165d8f8b1d98-00-2b55tnaqky432.worf.replit.dev',
-      'localhost'
-    ]
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-      '/src': path.resolve(__dirname, 'src'),
-      '@css': path.resolve(__dirname, 'src/css'),
-      '@components': path.resolve(__dirname, 'src/templates/components'),
-      '@ds': path.resolve(__dirname, 'docs/ds'),
-      '@images': path.resolve(__dirname, 'public/images')
-    }
-  },
-  publicDir: 'public',
-  optimizeDeps: {
-    include: ['tailwindcss']
-  }
-});
+import tailwindcss from '@tailwindcss/vite';
+import fs from 'fs';
+import { glob } from 'glob';
+import hljs from 'highlight.js';
+import beautify from 'js-beautify';
+import yaml from 'js-yaml';
+import nunjucks from 'nunjucks';
+import { outdent } from 'outdent';
+import path from 'path';
+import sharp from 'sharp';
+import { defineConfig } from 'vite';
+import { brandingPlugin, loadBrandingConfig } from './branding/vite-branding-plugin.js';
+
+// Load branding configuration
+const brandingConfig = await loadBrandingConfig(
+  process.env.BRANDING_CONFIG || 'default',
+  process.cwd(),
+  'branding'
+);
+
+// Helper para servir archivos con el MIME type correcto
+function serveFileWithMimeType(filePath, res) {
+  if (!fs.existsSync(filePath)) return false;
+  
+  const ext = path.extname(filePath).toLowerCase();
+  const mimeTypes = {
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+    '.html': 'text/html'
+  };
+  
+  res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+  res.end(fs.readFileSync(filePath));
+  return true;
+}
+
+// Checks that the resolved filePath stays inside baseDir (defense against path traversal)
+function isPathInside(filePath, baseDir) {
+  if (!filePath) return false;
+  const resolved = path.resolve(filePath);
+  return resolved === baseDir || resolved.startsWith(baseDir + path.sep);
+}
+
+// Helper functions
+function kebabCaseToPascalCase(value) {
+  return value
+    .toLowerCase()
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+function getBeautifyOptions() {
+  const options = beautify.html.defaultOptions();
+  return {
+    indent_size: 2,
+    inline: options.inline.filter((tag) => !['label'].includes(tag)),
+    max_preserve_newlines: 0,
+    wrap_attributes: 'preserve'
+  };
+}
+
+// Function to configure Nunjucks environment
+function setupNunjucksEnvironment(paths, options = {}) {
+  const defaultOptions = {
+    autoescape: true,
+    trimBlocks: true,
+    lstripBlocks: true,
+    throwOnUndefined: false,
+    noCache: true
+  };
+
+  const env = nunjucks.configure(paths, { ...defaultOptions, ...options });
+
+  // Global configuration
+  env.addGlobal('assetsUrl', '/src');
+  env.addGlobal('branding', brandingConfig);
+
+  env.addGlobal('loadComponentParams', function (componentName) {
+    try {
+      const yamlPath = path.join(process.cwd(), 'src/templates/components', componentName, `params.${componentName}.yaml`);
+
+      if (fs.existsSync(yamlPath)) {
+        const content = fs.readFileSync(yamlPath, 'utf8');
+        const parsedYaml = yaml.load(content);
+        const dumpedYaml = yaml.dump(parsedYaml);
+        return dumpedYaml;
+      }
+      console.error(`YAML file not found: ${yamlPath}`);
+      return '';
+    } catch (err) {
+      console.error(`Error loading YAML for ${componentName}:`, err);
+      return '';
+    }
+  });
+
+  // Four globals for code blocks
+  env.addGlobal('getHTMLCodeFromExample', function (componentName, params, pathName) {
+    const templatePath = `${pathName}s/${componentName}/_template.${componentName}.njk`;
+    const html = env.render(templatePath, { params }).trim();
+    return beautify.html(html, getBeautifyOptions());
+  });
+
+  env.addGlobal('getHTMLCodeFromFile', function (templatePath) {
+    const html = env.render(templatePath).trim();
+    return beautify.html(html, getBeautifyOptions());
+  });
+
+  env.addGlobal('getNunjucksCodeFromExample', function (componentName, params, pathName) {
+    const macroName = kebabCaseToPascalCase(componentName);
+    return outdent`
+      {% from "${pathName}s/${componentName}/_macro.${componentName}.njk" import ${pathName}${macroName} %}
+      {{ ${pathName}${macroName}(${JSON.stringify(params, undefined, 2)
+      }) }}
+    `;
+  });
+
+  env.addGlobal('getNunjucksCodeFromFile', function (templatePath) {
+    try {
+      const codeFromFile = fs.readFileSync(
+        path.join(process.cwd(), 'src/templates', templatePath),
+        'utf8'
+      );
+      return outdent`
+        ${codeFromFile}
+      `;
+    } catch (err) {
+      console.error(`Error reading file ${templatePath}:`, err);
+      return '';
+    }
+  });
+
+  // Filter configuration
+  env.addFilter('filtercaller', function (params) {
+    if (params && typeof params === 'object') {
+      const filteredParams = { ...params };
+      delete filteredParams.caller;
+      return filteredParams;
+    }
+    return params;
+  });
+
+  env.addFilter('filterslugify', function (str) {
+    if (typeof str !== 'string') {
+      return '';
+    }
+    let slug = str.replace(/\s+/g, '-');
+    slug = slug.replace(/[^\w-]+/g, '');
+    slug = slug.toLowerCase();
+    return slug;
+  });
+
+  env.addFilter('highlight', function (code, language) {
+    try {
+      return hljs.highlight(code.trim(), {
+        language: language || 'plaintext'
+      }).value;
+    } catch (err) {
+      console.error('Error highlighting code:', err);
+      return code;
+    }
+  });
+
+  env.addFilter('filterescapeltgt', function (str) {
+    if (typeof str !== 'string' && typeof str !== 'object') return str;
+    if (typeof str !== 'string') str = JSON.stringify(str);
+    return str.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  });
+
+  env.addFilter('filterquotes', function (str) {
+    if (typeof str !== 'string') return str;
+    let inTag = false;
+    let result = '';
+    let currentQuote = null;
+    for (let i = 0; i < str.length; i++) {
+      const char = str[i];
+      if (char === '<') {
+        inTag = true;
+        result += char;
+        continue;
+      }
+      if (char === '>') {
+        inTag = false;
+        result += char;
+        continue;
+      }
+      if (inTag) {
+        if (char === "'" || char === '"') {
+          if (currentQuote === null) {
+            currentQuote = char;
+            result += '"';
+          } else if (currentQuote === char) {
+            currentQuote = null;
+            result += '"';
+          } else {
+            result += char;
+          }
+        } else {
+          result += char;
+        }
+      } else {
+        result += char;
+      }
+    }
+    return result;
+  });
+
+  env.addFilter('filterversion', function () {
+    const pkg = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'package.json'), 'utf8'));
+    return pkg.version;
+  });
+
+  return env;
+}
+
+// Improved function to process Nunjucks files during build
+async function processNunjucksFiles(env) {
+  try {
+    const docsPath = path.resolve(process.cwd(), 'docs');
+    const htmlFiles = await glob('*.html', { cwd: docsPath });
+
+
+    for (const htmlFile of htmlFiles) {
+      try {
+        const sourcePath = path.join(docsPath, htmlFile);
+        const outputPath = path.join(process.cwd(), 'dist', htmlFile);
+
+        const content = await fs.promises.readFile(sourcePath, 'utf8');
+        let processedHtml = env.renderString(content);
+
+        // Transformations for relative paths
+        processedHtml = processedHtml.replace(/href=["']\/src\/css\/([^"']*)["']/g, 'href="css/$1"');
+        processedHtml = processedHtml.replace(/href=["']src\/css\/([^"']*)["']/g, 'href="css/$1"');
+
+        // Transform JS paths (ensure they are relative without leading slash)
+        processedHtml = processedHtml.replace(/src=["']\/src\/js\/([^"']*)["']/g, 'src="js/$1"');
+        processedHtml = processedHtml.replace(/src=["']src\/js\/([^"']*)["']/g, 'src="js/$1"');
+
+        // Also process if any route with /js/ (absolute) remains
+        processedHtml = processedHtml.replace(/src=["']\/js\/([^"']*)["']/g, 'src="js/$1"');
+
+        // Transform image paths
+        processedHtml = processedHtml.replace(/src=["']\/src\/images\/([^"']*)["']/g, 'src="images/$1"');
+        processedHtml = processedHtml.replace(/src=["']src\/images\/([^"']*)["']/g, 'src="images/$1"');
+
+        await fs.promises.mkdir(path.dirname(outputPath), { recursive: true });
+        await fs.promises.writeFile(outputPath, processedHtml);
+      } catch (fileError) {
+        console.error(`Error processing file ${htmlFile}:`, fileError);
+      }
+    }
+  } catch (error) {
+    console.error('Error in processNunjucksFiles:', error);
+  }
+}
+
+// NEW FUNCTION: Process JavaScript files to remove CSS imports and fix modules
+async function processJavaScriptFiles() {
+  try {
+    const srcJsDir = path.resolve(process.cwd(), 'src/js');
+    const distJsDir = path.resolve(process.cwd(), 'dist/js');
+
+    // Create dist/js directory if it doesn't exist
+    await fs.promises.mkdir(distJsDir, { recursive: true });
+
+    // 1. Copy npm packages to the vendor folder
+    const vendorDir = path.join(distJsDir, 'vendor');
+    await fs.promises.mkdir(vendorDir, { recursive: true });
+
+    // 2. Process all JS files
+    const jsFiles = await glob('**/*.js', { cwd: srcJsDir });
+
+    for (const jsFile of jsFiles) {
+      const sourcePath = path.join(srcJsDir, jsFile);
+      const destPath = path.join(distJsDir, jsFile);
+
+      // Create directory if necessary
+      await fs.promises.mkdir(path.dirname(destPath), { recursive: true });
+
+      // Read file content
+      const content = await fs.promises.readFile(sourcePath, 'utf8');
+
+      // Transform the content
+      let processedContent = content;
+
+      // a) Remove CSS file imports
+      processedContent = processedContent.replace(
+        /import\s+['"](.+\.css)['"];?/g,
+        '// CSS import removed: $1'
+      );
+
+      // c) Fix other relative import paths between JS files
+      processedContent = processedContent.replace(
+        /from\s+["']\/src\/js\/([^"']*)["']/g,
+        (match, importPath) => {
+          const depth = jsFile.split('/').length - 1;
+          const prefix = depth > 0 ? '../'.repeat(depth) : './';
+          return `from "${prefix}${importPath}"`;
+        }
+      );
+
+      processedContent = processedContent.replace(
+        /from\s+["']src\/js\/([^"']*)["']/g,
+        (match, importPath) => {
+          const depth = jsFile.split('/').length - 1;
+          const prefix = depth > 0 ? '../'.repeat(depth) : './';
+          return `from "${prefix}${importPath}"`;
+        }
+      );
+
+      // Write the processed file
+      await fs.promises.writeFile(destPath, processedContent);
+    }
+
+  } catch (error) {
+    console.error('Error processing JavaScript:', error);
+  }
+}
+
+// Optimize image with Sharp
+async function optimizeImage(sourcePath, destPath, fileExtension) {
+  try {
+    const image = sharp(sourcePath);
+
+    switch (fileExtension.toLowerCase()) {
+      case '.jpg':
+      case '.jpeg':
+        await image
+          .jpeg({
+            quality: 80,
+            mozjpeg: true,
+            progressive: true
+          })
+          .toFile(destPath);
+        break;
+
+      case '.png':
+        await image
+          .png({
+            quality: 80,
+            palette: true,
+            compressionLevel: 9
+          })
+          .toFile(destPath);
+        break;
+
+      case '.webp':
+        await image
+          .webp({
+            quality: 80,
+            effort: 6
+          })
+          .toFile(destPath);
+        break;
+
+      case '.avif':
+        await image
+          .avif({
+            quality: 80,
+            effort: 4
+          })
+          .toFile(destPath);
+        break;
+
+      case '.svg':
+        // SVGs are not processed with Sharp, they are copied directly
+        await fs.promises.copyFile(sourcePath, destPath);
+        break;
+
+      default:
+        // For other formats, copy without optimizing
+        await fs.promises.copyFile(sourcePath, destPath);
+        break;
+    }
+
+    return true;
+  } catch (error) {
+    console.error(`❌ Error optimizing ${sourcePath}:`, error.message);
+    // If optimization fails, try direct copy as fallback
+    try {
+      await fs.promises.copyFile(sourcePath, destPath);
+      return true;
+    } catch (copyError) {
+      console.error(`❌ Error copying ${sourcePath}:`, copyError.message);
+      return false;
+    }
+  }
+}
+
+// UPDATED FUNCTION: Copy and optimize all images
+async function copyAndOptimizeImages() {
+  try {
+    const srcImagesDir = path.resolve(process.cwd(), 'public/images');
+    const distImagesDir = path.resolve(process.cwd(), 'dist/images');
+
+    // Check if public/images folder exists
+    if (!fs.existsSync(srcImagesDir)) {
+      console.log('📁 public/images does not exist, skipping image optimization');
+      return;
+    }
+
+    // Create dist/images directory if it doesn't exist
+    await fs.promises.mkdir(distImagesDir, { recursive: true });
+
+    // Get all image files recursively
+    const imageFiles = await glob('**/*.{png,jpg,jpeg,gif,svg,webp,avif,ico,bmp,tiff}', {
+      cwd: srcImagesDir,
+      nodir: true
+    });
+
+    console.log(`🖼️  Optimizing ${imageFiles.length} images with Sharp...`);
+
+    let optimizedCount = 0;
+    let copiedCount = 0;
+    let totalSizeBefore = 0;
+    let totalSizeAfter = 0;
+
+    for (const imageFile of imageFiles) {
+      const sourcePath = path.join(srcImagesDir, imageFile);
+      const destPath = path.join(distImagesDir, imageFile);
+      const fileExtension = path.extname(imageFile);
+
+      // Create directory if necessary (for subdirectories)
+      await fs.promises.mkdir(path.dirname(destPath), { recursive: true });
+
+      // Get original file size
+      const statsBefore = await fs.promises.stat(sourcePath);
+      totalSizeBefore += statsBefore.size;
+
+      // Optimize or copy image
+      const success = await optimizeImage(sourcePath, destPath, fileExtension);
+
+      if (success) {
+        // Get file size after optimization
+        if (fs.existsSync(destPath)) {
+          const statsAfter = await fs.promises.stat(destPath);
+          totalSizeAfter += statsAfter.size;
+
+          const reduction = ((statsBefore.size - statsAfter.size) / statsBefore.size * 100).toFixed(1);
+
+          if (['.jpg', '.jpeg', '.png', '.webp', '.avif'].includes(fileExtension.toLowerCase())) {
+            console.log(`✨ Optimized: ${imageFile} (${reduction}% reduced)`);
+            optimizedCount++;
+          } else {
+            console.log(`📄 Copied: ${imageFile}`);
+            copiedCount++;
+          }
+        }
+      }
+    }
+
+    const totalReduction = ((totalSizeBefore - totalSizeAfter) / totalSizeBefore * 100).toFixed(1);
+    const sizeBefore = (totalSizeBefore / 1024).toFixed(1);
+    const sizeAfter = (totalSizeAfter / 1024).toFixed(1);
+
+    console.log(`🎉 Processing completed:`);
+    console.log(`   ✨ ${optimizedCount} images optimized`);
+    console.log(`   📄 ${copiedCount} files copied`);
+    console.log(`   📊 Size: ${sizeBefore}KB → ${sizeAfter}KB (${totalReduction}% reduced)`);
+
+  } catch (error) {
+    console.error('❌ Error in copyAndOptimizeImages:', error);
+  }
+}
+
+// Copy branding assets to dist/images
+async function copyBrandingAssets() {
+  try {
+    const brandingDir = path.resolve(process.cwd(), 'branding');
+    const distImagesDir = path.resolve(process.cwd(), 'dist/images');
+
+    if (!fs.existsSync(brandingDir)) {
+      console.log('📁 branding/ does not exist, skipping branding assets');
+      return;
+    }
+
+    await fs.promises.mkdir(distImagesDir, { recursive: true });
+
+    // Copy logos (flattened to images/)
+    const logosDir = path.join(brandingDir, 'logos');
+    if (fs.existsSync(logosDir)) {
+      const logoFiles = await glob('**/*.svg', { cwd: logosDir, nodir: true });
+      for (const file of logoFiles) {
+        const sourcePath = path.join(logosDir, file);
+        const fileName = path.basename(file); // Get just the filename to flatten structure
+        const destPath = path.join(distImagesDir, fileName);
+        await fs.promises.copyFile(sourcePath, destPath);
+      }
+    }
+
+    // Copy header background images
+    const imagesDir = path.join(brandingDir, 'images');
+    if (fs.existsSync(imagesDir)) {
+      const imageFiles = await glob('*.svg', { cwd: imagesDir, nodir: true });
+      for (const file of imageFiles) {
+        const sourcePath = path.join(imagesDir, file);
+        const destPath = path.join(distImagesDir, file);
+        await fs.promises.copyFile(sourcePath, destPath);
+      }
+    }
+
+    console.log('✅ Branding assets copied to dist/images/');
+  } catch (error) {
+    console.error('❌ Error in copyBrandingAssets:', error);
+  }
+}
+
+// Function to copy assets (updated to use optimization)
+async function copyAssets() {
+  try {
+    // Copy and optimize images
+    await copyAndOptimizeImages();
+
+    // Copy branding assets
+    await copyBrandingAssets();
+
+    // Copy license if it exists
+    const licenseFile = path.resolve(process.cwd(), 'EUPL-1.2.txt');
+    if (fs.existsSync(licenseFile)) {
+      await fs.promises.copyFile(licenseFile, path.join(process.cwd(), 'dist', 'EUPL-1.2.txt'));
+    }
+  } catch (error) {
+    console.error('Error copying assets:', error);
+  }
+}
+
+// Final verification to ensure there are no common errors
+async function validateBuild() {
+  try {
+    const distPath = path.resolve(process.cwd(), 'dist');
+
+    // 1. Check that there are no src/ references in HTML files
+    const htmlFiles = await glob('**/*.html', { cwd: distPath });
+
+    for (const htmlFile of htmlFiles) {
+      const filePath = path.join(distPath, htmlFile);
+      const content = await fs.promises.readFile(filePath, 'utf8');
+
+      // Search for /src/ or src/ references
+      if (content.includes('/src/') || content.includes('src/')) {
+
+        // Auto-correct
+        let correctedContent = content
+          .replace(/href=["']\/src\/([^"']*)["']/g, 'href="$1"')
+          .replace(/href=["']src\/([^"']*)["']/g, 'href="$1"')
+          .replace(/src=["']\/src\/([^"']*)["']/g, 'src="$1"')
+          .replace(/src=["']src\/([^"']*)["']/g, 'src="$1"');
+
+        await fs.promises.writeFile(filePath, correctedContent);
+      }
+    }
+
+    // 2. Check that there are no absolute references in scripts
+    for (const htmlFile of htmlFiles) {
+      const filePath = path.join(distPath, htmlFile);
+      const content = await fs.promises.readFile(filePath, 'utf8');
+
+      // Search for script tags with src that starts with "/"
+      const hasAbsoluteScripts = /<script[^>]*src=["']\/[^"']*["'][^>]*>/g.test(content);
+
+      if (hasAbsoluteScripts) {
+
+        // Auto-correct
+        let correctedContent = content.replace(
+          /<script([^>]*)src=["']\/([^"']*)["']([^>]*)>/g,
+          '<script$1src="$2"$3>'
+        );
+
+        await fs.promises.writeFile(filePath, correctedContent);
+      }
+    }
+
+    // 3. Check JS files
+    const jsFiles = await glob('js/**/*.js', { cwd: distPath });
+
+    for (const jsFile of jsFiles) {
+      const filePath = path.join(distPath, jsFile);
+      const content = await fs.promises.readFile(filePath, 'utf8');
+
+      // Search for CSS imports
+      if (content.includes('.css"') || content.includes(".css'")) {
+
+        // Comment out these imports
+        let correctedContent = content.replace(
+          /import\s+['"](.+\.css)['"];?/g,
+          '// CSS import removed: $1'
+        );
+
+        await fs.promises.writeFile(filePath, correctedContent);
+      }
+    }
+
+  } catch (error) {
+    console.error('Error validating build:', error);
+  }
+}
+
+// Correct CSS image paths for production
+async function rewriteCssImagePaths() {
+  const stylePath = path.resolve(process.cwd(), 'dist/css/styles.css');
+  if (!fs.existsSync(stylePath)) return;
+  let content = await fs.promises.readFile(stylePath, 'utf8');
+  content = content.replace(/url\((['"]?)\/images\//g, 'url($1../images/');
+  await fs.promises.writeFile(stylePath, content);
+}
+
+// Correct HTML image paths for production (from /images/, /branding/logos/, /branding/images/ to ../images/)
+async function rewriteHtmlImagePaths() {
+  const distDir = path.resolve(process.cwd(), 'dist');
+  if (!fs.existsSync(distDir)) return;
+
+  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
+
+  // Configuración centralizada de rewrites
+  const rewriteRules = [
+    // Imágenes en /images/
+    { pattern: /src="(\/images\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/images\/)/g, replacement: 'srcset="./images/' },
+    // Imágenes en /branding/logos/
+    { pattern: /src="(\/branding\/logos\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/branding\/logos\/)/g, replacement: 'srcset="./images/' },
+    // Imágenes en /branding/images/
+    { pattern: /src="(\/branding\/images\/)/g, replacement: 'src="./images/' },
+    { pattern: /srcset="(\/branding\/images\/)/g, replacement: 'srcset="./images/' },
+  ];
+
+  for (const htmlFile of htmlFiles) {
+    const filePath = path.join(distDir, htmlFile);
+    let content = await fs.promises.readFile(filePath, 'utf8');
+
+    // Aplicar todas las reglas
+    let modified = content;
+    for (const rule of rewriteRules) {
+      modified = modified.replace(rule.pattern, rule.replacement);
+    }
+
+    if (modified !== content) {
+      await fs.promises.writeFile(filePath, modified);
+    }
+  }
+}
+
+// Rewrite favicon hrefs from /branding/logos/ to ./images/ (after HTML files are generated)
+async function rewriteFaviconPaths() {
+  const distDir = path.resolve(process.cwd(), 'dist');
+  const imagesDir = path.resolve(process.cwd(), 'dist/images');
+  if (!fs.existsSync(distDir)) return;
+
+  const htmlFiles = await glob('**/*.html', { cwd: distDir, nodir: true });
+  
+  // Favicon files to rewrite
+  const faviconFiles = [
+    'favicon.svg',
+    'favicon.ico',
+    'apple-touch-icon.png'
+  ];
+
+  for (const htmlFile of htmlFiles) {
+    const filePath = path.join(distDir, htmlFile);
+    let content = await fs.promises.readFile(filePath, 'utf8');
+    let modified = content;
+
+    for (const faviconFile of faviconFiles) {
+      const sourcePath = `/branding/logos/${faviconFile}`;
+      const destPath = `./images/${faviconFile}`;
+      
+      // Only rewrite if the destination file exists in imagesDir
+      const destFilePath = path.join(imagesDir, faviconFile);
+      if (fs.existsSync(destFilePath)) {
+        const oldHref = `href="${sourcePath}"`;
+        const newHref = `href="${destPath}"`;
+        modified = modified.replaceAll(oldHref, newHref);
+      }
+    }
+
+    if (modified !== content) {
+      await fs.promises.writeFile(filePath, modified);
+    }
+  }
+  
+  if (htmlFiles.length > 0) {
+    console.log(`✓ Rewrote favicon paths in ${htmlFiles.length} HTML file(s)`);
+  }
+}
+
+// Custom Nunjucks plugin
+function customNunjucksPlugin() {
+  let env;
+
+  return {
+    name: 'vite-plugin-custom-nunjucks',
+
+    configureServer({ middlewares, watcher, ws }) {
+
+      // Configure Nunjucks with development-specific options
+      env = setupNunjucksEnvironment(['docs', 'src/templates'], {
+        watch: true,
+        throwOnUndefined: false
+      });
+
+      // Watch for CSS and NJK files
+      watcher.add(['src/**/*.css', 'docs/**/*.njk', 'src/**/*.njk']);
+      watcher.on('change', (path) => {
+        ws.send({
+          type: 'full-reload'
+        });
+      });
+
+      // Per-asset base directories used to validate containment of served
+      // paths. Each middleware confines requests to its own folder (not cwd),
+      // so a `..` in the URL cannot escape into sensitive files.
+      const brandingDir = path.resolve(process.cwd(), 'branding');
+      const publicImagesDir = path.resolve(process.cwd(), 'public/images');
+      const brandingLogosDir = path.resolve(process.cwd(), 'branding/logos');
+      const brandingImagesDir = path.resolve(process.cwd(), 'branding/images');
+
+      // Middleware to serve branding assets in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/')) {
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);             // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
+          }
+          // Strip the /branding/ prefix and resolve relative to brandingDir,
+          // so any `..` is contained to the branding folder (not cwd).
+          const relPath = decodedUrl.slice('/branding/'.length);
+          const filePath = path.resolve(brandingDir, '.' + path.sep + relPath);
+          if (!isPathInside(filePath, brandingDir)) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
+          }
+          if (serveFileWithMimeType(filePath, res)) return;
+        }
+        next();
+      });
+
+      // Helper function to find file recursively in directories
+      function findFileRecursive(dir, fileName) {
+        if (!fs.existsSync(dir)) return null;
+        const files = fs.readdirSync(dir);
+        for (const file of files) {
+          const fullPath = path.join(dir, file);
+          if (fs.statSync(fullPath).isDirectory()) {
+            const found = findFileRecursive(fullPath, fileName);
+            if (found) return found;
+          } else if (file === fileName) {
+            return fullPath;
+          }
+        }
+        return null;
+      }
+
+      // Middleware to serve branding assets from /images/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/images/')) {
+          let decodedUrl;
+          try {
+            decodedUrl = decodeURIComponent(req.url);            // neutralizes %2e%2e
+          } catch {
+            res.statusCode = 400;
+            res.end('Bad Request');
+            return;
+          }
+          // connect does not normalize req.url, so reject any literal `..`
+          // before touching the filesystem.
+          if (decodedUrl.includes('..')) {
+            res.statusCode = 403;
+            res.end('Forbidden');
+            return;
+          }
+
+          // Primary lookup: strip the /images/ prefix, resolve under
+          // public/images and validate containment there.
+          const relPath = decodedUrl.slice('/images/'.length);
+          let filePath = path.resolve(publicImagesDir, '.' + path.sep + relPath);
+          if (isPathInside(filePath, publicImagesDir) && serveFileWithMimeType(filePath, res)) return;
+
+          // Fallbacks: search branding folders by basename, each candidate
+          // validated against its own base before serving.
+          const fileName = path.basename(decodedUrl);
+
+          const foundInLogos = findFileRecursive(brandingLogosDir, fileName);
+          if (foundInLogos && isPathInside(foundInLogos, brandingLogosDir) && serveFileWithMimeType(foundInLogos, res)) return;
+
+          const foundInImages = findFileRecursive(brandingImagesDir, fileName);
+          if (foundInImages && isPathInside(foundInImages, brandingImagesDir) && serveFileWithMimeType(foundInImages, res)) return;
+        }
+        next();
+      });
+
+      // Middleware to serve branding assets from /branding/logos/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/logos/')) {
+          const fileName = path.basename(req.url);
+          const filePath = findFileRecursive(brandingLogosDir, fileName);
+
+          if (isPathInside(filePath, brandingLogosDir) && serveFileWithMimeType(filePath, res)) return;
+        }
+        next();
+      });
+
+      // Middleware to serve branding assets from /branding/images/ in development
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/branding/images/')) {
+          const fileName = path.basename(req.url);
+          const filePath = findFileRecursive(brandingImagesDir, fileName);
+
+          if (isPathInside(filePath, brandingImagesDir) && serveFileWithMimeType(filePath, res)) return;
+        }
+        next();
+      });
+
+      // Middleware to transform paths in development (keep as is)
+      middlewares.use(async (req, res, next) => {
+        // Intercept requests to /css/ and redirect to /src/css/
+        if (req.url.startsWith('/css/')) {
+          req.url = req.url.replace('/css/', '/src/css/');
+        }
+
+        // Intercept requests to /js/ and redirect to /src/js/
+        if (req.url.startsWith('/js/')) {
+          req.url = req.url.replace('/js/', '/src/js/');
+        }
+
+        // Set correct MIME type for JS
+        if (req.url.endsWith('.js')) {
+          res.setHeader('Content-Type', 'application/javascript');
+        }
+
+        next();
+      });
+
+      // Middleware for CSS
+      middlewares.use(async (req, res, next) => {
+        if (req.url.startsWith('/src/css/')) {
+          return next();
+        }
+        next();
+      });
+
+      // Middleware for .html
+      middlewares.use(async (req, res, next) => {
+        if (req.url === '/') {
+          req.url = '/index.html';
+        }
+
+        if (req.url.endsWith('.html')) {
+          try {
+            const templatePath = req.url.slice(1);
+            const html = env.render(templatePath);
+            res.setHeader('Content-Type', 'text/html');
+            return res.end(html);
+          } catch (e) {
+            console.error('Error rendering template:', e.message);
+            return next(e);
+          }
+        }
+        next();
+      });
+    },
+
+    configurePreviewServer(server) {
+      const { middlewares } = server;
+
+
+      // Configure Nunjucks with preview-specific options
+      env = setupNunjucksEnvironment(['docs', 'src/templates'], {
+        watch: false,
+        throwOnUndefined: false
+      });
+
+      // Configure the middlewares
+      middlewares.use(async (req, res, next) => {
+        if (req.url === '/') {
+          req.url = '/index.html';
+        }
+
+        if (req.url.endsWith('.html')) {
+          try {
+            const templatePath = req.url.slice(1);
+            const html = env.render(templatePath);
+            res.setHeader('Content-Type', 'text/html');
+            return res.end(html);
+          } catch (e) {
+            console.error('Error in preview:', e.message);
+            return next(e);
+          }
+        }
+        next();
+      });
+    },
+
+    transform(content, id) {
+      if (id.endsWith('.njk')) {
+        const html = env.renderString(content);
+        return {
+          code: `export default ${JSON.stringify(html)}`,
+          map: null
+        };
+      }
+    },
+
+    async buildStart() {
+      // Configure Nunjucks for the build
+      env = setupNunjucksEnvironment(['docs', 'docs/ds', 'src/templates'], {
+        watch: false,
+        throwOnUndefined: false
+      });
+    },
+
+    async closeBundle() {
+      console.log('🚀 Starting custom build process...');
+
+      // Step 1: Copy and optimize assets (including images) first
+      await copyAssets();
+
+      // Step 2: Correct CSS image paths for production
+      await rewriteCssImagePaths();
+
+      // Step 3: Skip processing JavaScript files - let Vite handle bundling
+      // (Vite will resolve npm dependencies like @floating-ui/dom correctly)
+      // await processJavaScriptFiles();
+
+      // Step 4: Process Nunjucks files (images are already in dist)
+      await processNunjucksFiles(env);
+
+      // Step 4b: Correct HTML image paths for production (after HTML files are generated)
+      await rewriteHtmlImagePaths();
+
+      // Step 4c: Rewrite favicon paths from /branding/logos/ to ./images/
+      await rewriteFaviconPaths();
+
+      // Step 5: Final validation to find and fix common errors
+      await validateBuild();
+
+      console.log('✅ Custom build completed');
+    }
+  };
+}
+
+// Main Vite configuration
+export default defineConfig({
+  plugins: [
+    brandingPlugin(brandingConfig),
+    customNunjucksPlugin(),
+    tailwindcss()
+  ],
+  build: {
+    outDir: 'dist',
+    minify: true,
+    emptyOutDir: true,
+    cssCodeSplit: false,
+    manifest: true,
+    rollupOptions: {
+      input: {
+        index: path.resolve(__dirname, 'src/js/index.js')
+      },
+      output: {
+        entryFileNames: 'js/[name].js',
+        chunkFileNames: 'js/[name]-[hash].js',
+        assetFileNames: (assetInfo) => {
+          // Rename style.css to styles.css
+          if (assetInfo.name === 'style.css') {
+            return 'css/styles.css';
+          }
+
+          // Handle other asset types
+          const info = assetInfo.name.split('.');
+          const extType = info[info.length - 1];
+          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
+            return 'images/[name][extname]';
+          }
+          if (/css/i.test(extType)) {
+            return 'css/[name][extname]';
+          }
+          return '[name][extname]';
+        },
+        format: 'es',
+      }
+    }
+  },
+  server: {
+    open: '/',
+    watch: {
+      ignored: ['!**/docs/**', '!**/src/templates/**']
+    },
+    // 0.0.0.0 exposes the dev-server to the whole network; default to localhost
+    // only. Set DEV_HOST=0.0.0.0 in environments like Replit, where allowedHosts
+    // includes the specific *.replit.dev host needed for that public access.
+    host: process.env.DEV_HOST || '127.0.0.1',
+    allowedHosts: [
+      '82c7d68c-1131-4db5-bf36-165d8f8b1d98-00-2b55tnaqky432.worf.replit.dev',
+      'localhost'
+    ]
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '/src': path.resolve(__dirname, 'src'),
+      '@css': path.resolve(__dirname, 'src/css'),
+      '@components': path.resolve(__dirname, 'src/templates/components'),
+      '@ds': path.resolve(__dirname, 'docs/ds'),
+      '@images': path.resolve(__dirname, 'public/images')
+    }
+  },
+  publicDir: 'public',
+  optimizeDeps: {
+    include: ['tailwindcss']
+  }
+});