holygrail5 1.0.21 → 1.0.23

package/src/docs-generator/html-generator.js

@@ -2,7 +2,7 @@
 const fs = require('fs');
 const path = require('path');
 const { execSync } = require('child_process');
-const { pxToRem, remToPx, getFontFamilyName, resolveActiveThemes } = require('../generators/utils');
+const { pxToRem, remToPx, getFontFamilyName, resolveActiveThemes, escapeHtml } = require('../generators/utils');
 const { buildValueMap } = require('../css-generator');
 const { generateTypographyHTML } = require('../build/typo-table-generator');
 const {
@@ -28,7 +28,7 @@ function getLastCommitAuthor() {
 // Obtiene la versión del package.json
 function getPackageVersion() {
   try {
-    const packagePath = path.join(__dirname, '..', 'package.json');
+    const packagePath = path.join(__dirname, '..', '..', 'package.json');
     if (fs.existsSync(packagePath)) {
       const packageData = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
       return packageData.version || null;
@@ -38,6 +38,38 @@ function getPackageVersion() {
   }
   return null;
 }
+// Resuelve el grosor (font-weight) que DEBERÍA tener un cut a partir de su
+// nombre/valor. Orden de comprobación importante: los compuestos
+// (semibold, extralight…) se evalúan antes que los simples (bold, light)
+// para no caer en el match equivocado.
+function inferFontWeight(str) {
+  const t = String(str).toLowerCase();
+  if (/thin|hairline/.test(t)) return 100;
+  if (/extra[-\s]?light|ultra[-\s]?light/.test(t)) return 200;
+  if (/semi[-\s]?bold|demi[-\s]?bold/.test(t)) return 600;
+  if (/extra[-\s]?bold|ultra[-\s]?bold/.test(t)) return 800;
+  if (/black|heavy/.test(t)) return 900;
+  if (/bold/.test(t)) return 700;
+  if (/medium/.test(t)) return 500;
+  if (/light/.test(t)) return 300;
+  if (/regular|normal|book/.test(t)) return 400;
+  return null;
+}
+
+// Devuelve el grosor que DEBERÍA tener una entrada de fontFamilyMap. Prioriza
+// el override explícito en `config.fontWeightMap[name]` (misma clave que
+// fontFamilyMap); si no existe, lo infiere del VALOR (que nombra el cut real,
+// p. ej. "suisse-semibold" → 600) y, como último recurso, de la clave. Se
+// infiere del valor antes que de la clave a propósito: la clave puede mentir
+// (`primary-bold` apunta en realidad a un SemiBold = 600, no a un Bold = 700).
+// Devuelve null si no hay forma de determinarlo.
+function resolveFontWeight(name, value, fontWeightMap) {
+  if (fontWeightMap && fontWeightMap[name] != null && fontWeightMap[name] !== '') {
+    return fontWeightMap[name];
+  }
+  return inferFontWeight(value) ?? inferFontWeight(name);
+}
+
 function generateHTML(configData, previousValuesPath = null) {
   const classNames = Object.keys(configData.typo);
   const prefix = configData.prefix || 'hg';
@@ -142,16 +174,16 @@ function generateHTML(configData, previousValuesPath = null) {
         <td class="guide-preview-cell">
           <div class="guide-typography-preview ${className}">Aa</div>
         </td>
-        <td class="guide-table-value ${fontFamilyChanged ? 'guide-changed' : ''}">${fontFamilyName || cls.fontFamily || '-'}</td>
-        <td class="guide-table-value ${fontWeightChanged ? 'guide-changed' : ''}">${cls.fontWeight || '-'}</td>
-        <td class="guide-table-value ${letterSpacingChanged ? 'guide-changed' : ''}">${cls.letterSpacing || '-'}</td>
-        <td class="guide-table-value ${textTransformChanged ? 'guide-changed' : ''}">${cls.textTransform || '-'}</td>
+        <td class="guide-table-value ${fontFamilyChanged ? 'guide-changed' : ''}">${escapeHtml(fontFamilyName || cls.fontFamily || '-')}</td>
+        <td class="guide-table-value ${fontWeightChanged ? 'guide-changed' : ''}">${escapeHtml(cls.fontWeight || '-')}</td>
+        <td class="guide-table-value ${letterSpacingChanged ? 'guide-changed' : ''}">${escapeHtml(cls.letterSpacing || '-')}</td>
+        <td class="guide-table-value ${textTransformChanged ? 'guide-changed' : ''}">${escapeHtml(cls.textTransform || '-')}</td>
         <td class="guide-mobile-value guide-value-center-blue ${mobileFontSizeChanged ? 'guide-changed' : ''}">${mobileRem}</td>
         <td class="guide-mobile-value guide-value-center-orange ${mobileFontSizeChanged ? 'guide-changed' : ''}">${mobilePx}</td>
-        <td class="guide-mobile-value ${mobileLineHeightChanged ? 'guide-changed' : ''}">${cls.mobile?.lineHeight || '-'}</td>
+        <td class="guide-mobile-value ${mobileLineHeightChanged ? 'guide-changed' : ''}">${escapeHtml(cls.mobile?.lineHeight || '-')}</td>
         <td class="guide-desktop-value guide-value-center-blue ${desktopFontSizeChanged ? 'guide-changed' : ''}">${desktopRem}</td>
         <td class="guide-desktop-value guide-value-center-orange ${desktopFontSizeChanged ? 'guide-changed' : ''}">${desktopPx}</td>
-        <td class="guide-desktop-value ${desktopLineHeightChanged ? 'guide-changed' : ''}">${cls.desktop?.lineHeight || '-'}</td>
+        <td class="guide-desktop-value ${desktopLineHeightChanged ? 'guide-changed' : ''}">${escapeHtml(cls.desktop?.lineHeight || '-')}</td>
       </tr>`;
   }).join('');
   const classesHTML = `
@@ -186,14 +218,24 @@ function generateHTML(configData, previousValuesPath = null) {
   // Generar tabla de font families
   const fontFamiliesHTML = configData.fontFamilyMap ? Object.entries(configData.fontFamilyMap).map(([name, value]) => {
     const varName = `--${prefix}-${category}-font-family-${name}`;
-    const styleValue = value.replace(/'/g, "\\'");
+    // El valor va dentro de un atributo style con comillas simples. Escapar
+    // como HTML (no con "\\'") evita que un valor con comillas rompa el
+    // atributo; el parser decodifica la entidad y el CSS recibe la comilla.
+    const styleValue = escapeHtml(value);
     const isChanged = changedValues.has(`fontFamilyMap.${name}`);
+    // Grosor que debería tener este cut (override en config.fontWeightMap o
+    // inferido del nombre). El preview se pinta con ese font-weight además de
+    // la familia, para que se vea el peso real esperado.
+    const weight = resolveFontWeight(name, value, configData.fontWeightMap);
+    const weightCell = weight != null ? escapeHtml(weight) : '—';
+    const previewWeight = weight != null ? `font-weight: ${escapeHtml(weight)};` : '';
     return `
       <tr>
-        <td class="guide-table-name">${name}</td>
-        <td class="guide-font-family-preview" style='font-family: ${styleValue};'>Aa</td>
-        <td class="guide-table-value ${isChanged ? 'guide-changed' : ''}">${value}</td>
-        <td class="guide-table-value">${varName}</td>
+        <td class="guide-table-name">${escapeHtml(name)}</td>
+        <td class="guide-font-family-preview" style='font-family: ${styleValue}; ${previewWeight}'>Aa</td>
+        <td class="guide-table-value">${weightCell}</td>
+        <td class="guide-table-value ${isChanged ? 'guide-changed' : ''}">${escapeHtml(value)}</td>
+        <td class="guide-table-value">${escapeHtml(varName)}</td>
       </tr>`;
   }).join('') : '';
   const fontFamiliesTableHTML = configData.fontFamilyMap ? `
@@ -203,6 +245,7 @@ function generateHTML(configData, previousValuesPath = null) {
           <tr>
             <th>Nombre</th>
             <th>Preview</th>
+            <th>Grosor</th>
             <th>Valor</th>
             <th>Variable CSS</th>
           </tr>
@@ -236,16 +279,19 @@ function generateHTML(configData, previousValuesPath = null) {
         // Para variables con conversión (spacing / font-size) mostramos rem + px
         // (sin duplicar el rem en una columna aparte). Para el resto, solo el valor.
         // Para variables de color añadimos un swatch a la derecha del valor.
+        const eValue = escapeHtml(variable.value);
+        const eName = escapeHtml(variable.name);
+        const ePx = escapeHtml(remToPx(variable.value, baseFontSize));
         const swatchHTML = isColorVar
-          ? `<span class="guide-variable-swatch" style="background:${variable.value}" title="${variable.value}"></span>`
+          ? `<span class="guide-variable-swatch" style="background:${eValue}" title="${eValue}"></span>`
           : '';
         const valueHTML = canConvert
-          ? `<span class="guide-value-center-blue guide-copyable ${changedCls}" data-copy-value="${variable.value}" title="Click para copiar ${variable.value}">${variable.value}</span>
-             <span class="guide-value-center-orange guide-copyable ${changedCls}" data-copy-value="${remToPx(variable.value, baseFontSize)}" title="Click para copiar ${remToPx(variable.value, baseFontSize)}">${remToPx(variable.value, baseFontSize)}</span>`
-          : `<span class="guide-variable-value guide-copyable ${changedCls}" data-copy-value="${variable.value}" title="Click para copiar ${variable.value}">${variable.value}</span>`;
+          ? `<span class="guide-value-center-blue guide-copyable ${changedCls}" data-copy-value="${eValue}" title="Click para copiar ${eValue}">${eValue}</span>
+             <span class="guide-value-center-orange guide-copyable ${changedCls}" data-copy-value="${ePx}" title="Click para copiar ${ePx}">${ePx}</span>`
+          : `<span class="guide-variable-value guide-copyable ${changedCls}" data-copy-value="${eValue}" title="Click para copiar ${eValue}">${eValue}</span>`;
         return `
           <div class="guide-variable-item">
-            <span class="guide-variable-name guide-copyable ${changedCls}" data-copy-value="${variable.name}" title="Click para copiar ${variable.name}">${variable.name}</span>
+            <span class="guide-variable-name guide-copyable ${changedCls}" data-copy-value="${eName}" title="Click para copiar ${eName}">${eName}</span>
             <span class="guide-variable-values">${valueHTML}${swatchHTML}</span>
           </div>`;
       };
@@ -359,7 +405,7 @@ function generateHTML(configData, previousValuesPath = null) {
           <tr class="guide-table-synthesis-note">
             <td class="guide-spacing-sides-cell"></td>
             <td class="guide-table-name"><strong>Valores para &lt;n&gt;-percent</strong></td>
-            <td colspan="3" class="guide-table-value">${spacingPercentKeysLegacy}.</td>
+            <td colspan="3" class="guide-table-value">${escapeHtml(spacingPercentKeysLegacy)}.</td>
           </tr>
         </tbody>
       </table>
@@ -438,12 +484,12 @@ function generateHTML(configData, previousValuesPath = null) {
           <tr class="guide-table-synthesis-note">
             <td class="guide-spacing-sides-cell"></td>
             <td class="guide-table-name"><strong>Valores para &lt;valor&gt;</strong></td>
-            <td colspan="2" class="guide-table-value">${spacingNumericKeys}. Ver tabla Legacy arriba para rem/px.</td>
+            <td colspan="2" class="guide-table-value">${escapeHtml(spacingNumericKeys)}. Ver tabla Legacy arriba para rem/px.</td>
           </tr>
           <tr class="guide-table-synthesis-note">
             <td class="guide-spacing-sides-cell"></td>
             <td class="guide-table-name"><strong>Valores para &lt;n&gt;-percent</strong></td>
-            <td colspan="2" class="guide-table-value">${spacingPercentKeys}. Ver tabla Legacy arriba para equivalencias.</td>
+            <td colspan="2" class="guide-table-value">${escapeHtml(spacingPercentKeys)}. Ver tabla Legacy arriba para equivalencias.</td>
           </tr>
         </tbody>
       </table>
@@ -451,7 +497,7 @@ function generateHTML(configData, previousValuesPath = null) {
   // Estilos dinámicos basados en config
   const allStyles = `
     body {
-      font-family: var(--${prefix}-${category}-font-family-primary);
+      font-family: var(--${prefix}-${category}-font-family-primary-regular);
     }`;
   // Generar tabla de layout helpers
   const layoutHelpersHTML = configData.helpers ? Object.entries(configData.helpers).flatMap(([helperName, config]) => {
@@ -462,40 +508,40 @@ function generateHTML(configData, previousValuesPath = null) {
     const rows = [];
     if (useSpacing && configData.spacingMap) {
       Object.entries(configData.spacingMap).forEach(([key, value]) => {
-        const baseClass = `.${prefix}-${className}-${key}`;
-        const responsiveClass = responsive ? `.md:${prefix}-${className}-${key}` : '';
+        const baseClass = escapeHtml(`.${prefix}-${className}-${key}`);
+        const responsiveClass = responsive ? escapeHtml(`.md:${prefix}-${className}-${key}`) : '';
         const remValue = value.endsWith('%') ? value : pxToRem(value, baseFontSize);
         rows.push(`
       <tr>
         <td class="guide-layout-class-name guide-copyable" data-copy-value="${baseClass}" title="Click para copiar ${baseClass}">${baseClass}</td>
         <td class="guide-layout-class-name ${responsiveClass ? 'guide-copyable' : ''}" ${responsiveClass ? `data-copy-value="${responsiveClass}" title="Click para copiar ${responsiveClass}"` : ''}>${responsiveClass || '-'}</td>
-        <td class="guide-layout-property">${property}: ${remValue}</td>
-        <td class="guide-layout-property">${helperDescription || '-'}</td>
+        <td class="guide-layout-property">${escapeHtml(property)}: ${escapeHtml(remValue)}</td>
+        <td class="guide-layout-property">${escapeHtml(helperDescription || '-')}</td>
       </tr>`);
       });
     } else if (values) {
       if (Array.isArray(values)) {
         values.forEach(value => {
-          const baseClass = `.${prefix}-${className}-${value}`;
-          const responsiveClass = responsive ? `.md:${prefix}-${className}-${value}` : '';
+          const baseClass = escapeHtml(`.${prefix}-${className}-${value}`);
+          const responsiveClass = responsive ? escapeHtml(`.md:${prefix}-${className}-${value}`) : '';
           rows.push(`
       <tr>
         <td class="guide-layout-class-name guide-copyable" data-copy-value="${baseClass}" title="Click para copiar ${baseClass}">${baseClass}</td>
         <td class="guide-layout-class-name ${responsiveClass ? 'guide-copyable' : ''}" ${responsiveClass ? `data-copy-value="${responsiveClass}" title="Click para copiar ${responsiveClass}"` : ''}>${responsiveClass || '-'}</td>
-        <td class="guide-layout-property">${property}: ${value}</td>
-        <td class="guide-layout-property">${helperDescription || '-'}</td>
+        <td class="guide-layout-property">${escapeHtml(property)}: ${escapeHtml(value)}</td>
+        <td class="guide-layout-property">${escapeHtml(helperDescription || '-')}</td>
       </tr>`);
         });
       } else {
         Object.entries(values).forEach(([key, value]) => {
-          const baseClass = `.${prefix}-${className}-${key}`;
-          const responsiveClass = responsive ? `.md:${prefix}-${className}-${key}` : '';
+          const baseClass = escapeHtml(`.${prefix}-${className}-${key}`);
+          const responsiveClass = responsive ? escapeHtml(`.md:${prefix}-${className}-${key}`) : '';
           rows.push(`
       <tr>
         <td class="guide-layout-class-name guide-copyable" data-copy-value="${baseClass}" title="Click para copiar ${baseClass}">${baseClass}</td>
         <td class="guide-layout-class-name ${responsiveClass ? 'guide-copyable' : ''}" ${responsiveClass ? `data-copy-value="${responsiveClass}" title="Click para copiar ${responsiveClass}"` : ''}>${responsiveClass || '-'}</td>
-        <td class="guide-layout-property">${property}: ${value}</td>
-        <td class="guide-layout-property">${helperDescription || '-'}</td>
+        <td class="guide-layout-property">${escapeHtml(property)}: ${escapeHtml(value)}</td>
+        <td class="guide-layout-property">${escapeHtml(helperDescription || '-')}</td>
       </tr>`);
         });
       }
@@ -533,15 +579,11 @@ function generateHTML(configData, previousValuesPath = null) {
         menuItems.push({ id: 'font-families', label: 'Font Families' });
       }
       menuItems.push(
-        { id: 'tipografia', label: 'Tipografía' },
-        { id: 'variables', label: 'Variables CSS' }
+        { id: 'tipografia', label: 'Tipografía' }
       );
       if (spacingHelpersTableHTML) {
         menuItems.push({ id: 'spacing', label: 'Spacing' });
       }
-      if (layoutHelpersTableHTML) {
-        menuItems.push({ id: 'layout', label: 'Helpers de Layout' });
-      }
       if (configData.grid && configData.grid.enabled) {
         menuItems.push({ id: 'grid', label: 'Grid System' });
       }
@@ -556,6 +598,11 @@ function generateHTML(configData, previousValuesPath = null) {
       if (activeThemes.length > 0) {
         menuItems.push({ id: 'containers', label: 'Containers' });
       }
+      // Helpers de Layout y Variables CSS van al final de la guía.
+      if (layoutHelpersTableHTML) {
+        menuItems.push({ id: 'layout', label: 'Helpers de Layout' });
+      }
+      menuItems.push({ id: 'variables', label: 'Variables CSS' });
       const menuHTML = menuItems.map(item => `
         <a href="#${item.id}" class="guide-menu-item" data-section="${item.id}">${item.label}</a>
       `).join('');
@@ -577,35 +624,11 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html" class="gui
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <title>HolyGrail5 - Guía de Tipografía</title>
-  <!-- Google Fonts - Solo para la guía -->
-  <link href="https://fonts.googleapis.com" rel="preconnect">
-  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Instrument+Sans:regular,100,500,600,700" media="all">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
 
-  <!-- Lenis Smooth Scroll - Solo para la guía -->
-  <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
   <link rel="stylesheet" href="output.css?v=${Date.now()}">
   <link rel="stylesheet" href="guide-styles.css?v=${Date.now()}">
   <style>
     ${allStyles}
-    /* Lenis Smooth Scroll Styles - Solo para la guía */
-    html.lenis {
-      height: auto;
-    }
-    .lenis.lenis-smooth {
-      scroll-behavior: auto;
-    }
-    .lenis.lenis-smooth[data-lenis-prevent] {
-      overscroll-behavior: contain;
-    }
-    .lenis.lenis-stopped {
-      overflow: hidden;
-    }
-    /* Google Fonts - Solo para la guía (sobrescribe la fuente del body) */
-    body {
-      font-family: 'Instrument Sans', sans-serif !important;
-    }
   </style>
 </head>
 <body>
@@ -625,12 +648,12 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html" class="gui
         </p>
       ${packageVersion ? `
         <p class="text-m guide-sidebar-meta-small">
-          Version: ${packageVersion}
+          Version: ${escapeHtml(packageVersion)}
         </p>
       ` : ''}
       ${lastCommitAuthor ? `
         <p class="text-s guide-sidebar-meta-small">
-          Last user: ${lastCommitAuthor}
+          Last user: ${escapeHtml(lastCommitAuthor)}
         </p>
       ` : ''}
     </div>
@@ -669,7 +692,7 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html" class="gui
       <nav class="guide-nav">
         <a href="index.html" class="active">Guía</a>
         <a href="componentes.html">Componentes</a>
-${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}</a>`).join('\n')}
+${activeThemes.map(t => `        <a href="themes/${encodeURIComponent(t.name)}-demo.html">${escapeHtml(t.label)}</a>`).join('\n')}
         <a href="skills.html">Skills</a>
       </nav>
       <button class="guide-header-button" onclick="toggleSidebar()">☰</button>
@@ -776,11 +799,6 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
     </div>
     </div>
       <div class="guide-section-content">
-        <div id="variables">
-          <h3 class="title-m mb-16">Variables CSS</h3>
-          <p class="guide-section-description mb-24">Variables compartidas usadas por el spacing y el sistema.</p>
-          ${variablesTableHTML}
-        </div>
         <div class="guide-info-box guide-info-box-warning mb-32">
           <strong class="mb-16" style="display: block;">¿Cómo se generan los helpers de espaciado?</strong>
           <div class="row">
@@ -801,14 +819,14 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
                 <strong>Clases Modernas (RTL-aware):</strong> A estas clases legacy se añaden versiones inline con prefijo <code class="guide-info-box-code-info">hg-</code>: <code class="guide-info-box-code-info">.${prefix}-px-{valor}</code> (padding-inline/horizontal), <code class="guide-info-box-code-info">.${prefix}-py-{valor}</code> (padding-block/vertical), <code class="guide-info-box-code-info">.${prefix}-mx-{valor}</code> (margin-inline/horizontal), <code class="guide-info-box-code-info">.${prefix}-my-{valor}</code> (margin-block/vertical).
               </p>
               <p class="text-m guide-info-box-text-small">
-                <strong>Nota:</strong> Los helpers con prefijo <code class="guide-info-box-code-info">md:</code> funcionan como en Tailwind CSS y solo se aplican en el breakpoint desktop (≥${configData.breakpoints.desktop}). Puedes combinar clases base y con prefijo <code class="guide-info-box-code-info">md:</code> para crear diseños responsive. Las clases con <code class="guide-info-box-code-info">!</code> aplican !important y tienen prioridad sobre otras reglas CSS.
+                <strong>Nota:</strong> Los helpers con prefijo <code class="guide-info-box-code-info">md:</code> funcionan como en Tailwind CSS y solo se aplican en el breakpoint desktop (≥${escapeHtml(configData.breakpoints.desktop)}). Puedes combinar clases base y con prefijo <code class="guide-info-box-code-info">md:</code> para crear diseños responsive. Las clases con <code class="guide-info-box-code-info">!</code> aplican !important y tienen prioridad sobre otras reglas CSS.
               </p>
             </div>
             <div class="col-xs-12 col-md-6 guide-spacing-explanation-col">
               <p class="text-m guide-info-box-text"><strong>Ejemplos de uso:</strong></p>
               <ul class="guide-info-box-list">
                 <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.p-4</code> — Aplica padding de 4px en todos los tamaños de pantalla</li>
-                <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.md:p-4</code> — Aplica padding de 4px solo en desktop (≥${configData.breakpoints.desktop})</li>
+                <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.md:p-4</code> — Aplica padding de 4px solo en desktop (≥${escapeHtml(configData.breakpoints.desktop)})</li>
                 <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.md:pr-8</code> — Aplica padding-right de 8px solo en desktop</li>
                 <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.md:mt-16</code> — Aplica margin-top de 16px solo en desktop</li>
                 <li class="text-m guide-info-box-list-item"><code class="guide-info-box-code-info">.p-0!</code> — Aplica padding de 0 con !important (útil para sobrescribir otros estilos)</li>
@@ -822,54 +840,6 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
       </div>
     </div>
     ` : ''}
-    ${layoutHelpersTableHTML ? `
-    <div class="guide-section" id="layout">
-    <div class="row mb-120">
-    <div class="col-xs-12 col-md-6"> <h2>Layout</h2> </div>
-    <div class="col-xs-12 col-md-6 guide-section-description">
-      <p class="text-m ">
-        Clases helper para display, flexbox, alignment y gap.
-        Todos los helpers marcados como responsive tienen variantes con prefijo .md: para desktop (≥${configData.breakpoints.desktop}).
-      </p> </div>
-    <div class="col-xs-12 col-md-12">
-    <hr>
-    </div>
-    </div>
-      <div class="guide-section-content">
-        ${layoutHelpersTableHTML}
-        <div class="guide-section-title">
-          <div> </div>
-          <div class="demo-section-2">
-            <div>
-              <strong>Ejemplos de uso:</strong>
-              <ul class="guide-info-box-list">
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.d-flex</code> - Display flex
-                </li>
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.flex-column</code> - Flex direction column
-                </li>
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.justify-center</code> - Justify content center
-                </li>
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.items-center</code> - Align items center
-                </li>
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.gap-16</code> - Gap de 16px (1rem)
-                </li>
-                <li class="text-m guide-info-box-list-item">
-                  <code class="guide-info-box-code-info">.md:flex-row</code> - Flex direction row solo en desktop
-                </li>
-              </ul>
-            </div>
-            <div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    ` : ''}
     ${configData.grid && configData.grid.enabled ? `
     <div class="guide-section" id="grid">
     <div class="row mb-120">
@@ -901,19 +871,19 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
               <strong>.row</strong> - Contenedor flex con márgenes negativos para compensar el gutter
             </li>
             <li class="text-m guide-info-box-list-item">
-              <strong>.col-xs-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.xs} (12 columnas)
+              <strong>.col-xs-*</strong> - Columnas para pantallas desde ${escapeHtml(configData.grid.breakpoints.xs.minWidth || configData.grid.breakpoints.xs)} (12 columnas)
             </li>
             <li class="text-m guide-info-box-list-item">
-              <strong>.col-sm-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.sm} (12 columnas)
+              <strong>.col-sm-*</strong> - Columnas para pantallas desde ${escapeHtml(configData.grid.breakpoints.sm.minWidth || configData.grid.breakpoints.sm)} (12 columnas)
             </li>
             <li class="text-m guide-info-box-list-item">
-              <strong>.col-md-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.md} (12 columnas)
+              <strong>.col-md-*</strong> - Columnas para pantallas desde ${escapeHtml(configData.grid.breakpoints.md.minWidth || configData.grid.breakpoints.md)} (12 columnas)
             </li>
             <li class="text-m guide-info-box-list-item">
-              <strong>.col-lg-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.lg} (12 columnas)
+              <strong>.col-lg-*</strong> - Columnas para pantallas desde ${escapeHtml(configData.grid.breakpoints.lg.minWidth || configData.grid.breakpoints.lg)} (12 columnas)
             </li>
             <li class="text-m guide-info-box-list-item">
-              <strong>.col-xl-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.xl} (24 columnas)
+              <strong>.col-xl-*</strong> - Columnas para pantallas desde ${escapeHtml(configData.grid.breakpoints.xl.minWidth || configData.grid.breakpoints.xl)} (24 columnas)
             </li>
             <li class="text-m guide-info-box-list-item">
               <strong>.bleed</strong> - Permite que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter
@@ -923,7 +893,7 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
             </li>
 
             <li class="text-m guide-info-box-list-item">
-              <strong>Gutter:</strong> ${configData.grid.gutter} (padding horizontal en cada columna)
+              <strong>Gutter:</strong> ${escapeHtml(configData.grid.gutter)} (padding horizontal en cada columna)
             </li>
           </ul>
 
@@ -959,16 +929,18 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
                 const marginLateral = configData.grid.containerMargin || '-';
                 const marginLateralRem = marginLateral !== '-' && String(marginLateral).endsWith('px') ? pxToRem(marginLateral, baseFontSize) : marginLateral !== '-' ? marginLateral : '-';
                 const marginLateralPx = marginLateral;
+                const eName = escapeHtml(name);
+                const eColumns = escapeHtml(columns);
                 return `<tr>
-                <td class="guide-table-name">${name}</td>
-                <td class="guide-table-value">${minWidth}</td>
-                <td class="guide-table-value">${minWidthRem}</td>
-                <td class="guide-table-value">${columns}</td>
-                <td class="guide-value-center-orange">${gutterPx}</td>
-                <td class="guide-value-center-blue">${gutterRem}</td>
-                <td class="guide-value-center-orange">${marginLateralPx}</td>
-                <td class="guide-value-center-blue">${marginLateralRem}</td>
-                <td class="guide-table-value">.col-${name}-1 a .col-${name}-${columns}</td>
+                <td class="guide-table-name">${eName}</td>
+                <td class="guide-table-value">${escapeHtml(minWidth)}</td>
+                <td class="guide-table-value">${escapeHtml(minWidthRem)}</td>
+                <td class="guide-table-value">${eColumns}</td>
+                <td class="guide-value-center-orange">${escapeHtml(gutterPx)}</td>
+                <td class="guide-value-center-blue">${escapeHtml(gutterRem)}</td>
+                <td class="guide-value-center-orange">${escapeHtml(marginLateralPx)}</td>
+                <td class="guide-value-center-blue">${escapeHtml(marginLateralRem)}</td>
+                <td class="guide-table-value">.col-${eName}-1 a .col-${eName}-${eColumns}</td>
               </tr>`;
               }).join('\n              ')}
             </tbody>
@@ -1003,10 +975,10 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
                   En <strong>xs</strong>: Ocupan 12 columnas cada una (100% de ancho, apiladas)
                 </li>
                 <li class="text-m guide-info-box-list-item">
-                  En <strong>md</strong> (≥${configData.grid.breakpoints.md}): Las dos primeras ocupan 6 columnas (50% cada una), la tercera 12 (100%)
+                  En <strong>md</strong> (≥${escapeHtml(configData.grid.breakpoints.md.minWidth || configData.grid.breakpoints.md)}): Las dos primeras ocupan 6 columnas (50% cada una), la tercera 12 (100%)
                 </li>
                 <li class="text-m guide-info-box-list-item">
-                  En <strong>lg</strong> (≥${configData.grid.breakpoints.lg}): Cada una ocupa 4 columnas (33.33% cada una, 3 columnas por fila)
+                  En <strong>lg</strong> (≥${escapeHtml(configData.grid.breakpoints.lg.minWidth || configData.grid.breakpoints.lg)}): Cada una ocupa 4 columnas (33.33% cada una, 3 columnas por fila)
                 </li>
               </ul>
             </div>
@@ -1032,7 +1004,7 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
               <p class="text-m guide-info-box-text-small">
-                <strong>Nota:</strong> <code class="guide-info-box-code-info">.bleed</code> aplica márgenes negativos iguales al gutter (${configData.grid.gutter}) para que el contenido llegue hasta los bordes. <code class="guide-info-box-code-info">.bleed-0</code> elimina todo el padding y márgenes, útil para imágenes o contenido que debe ocupar todo el ancho disponible.
+                <strong>Nota:</strong> <code class="guide-info-box-code-info">.bleed</code> aplica márgenes negativos iguales al gutter (${escapeHtml(configData.grid.gutter)}) para que el contenido llegue hasta los bordes. <code class="guide-info-box-code-info">.bleed-0</code> elimina todo el padding y márgenes, útil para imágenes o contenido que debe ocupar todo el ancho disponible.
               </p>
             </div>
           </div>
@@ -1079,14 +1051,16 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
               ${configData.aspectRatios.map(ratio => {
                 const { class: className, width, height, description } = ratio;
                 const ratioValue = `${width}:${height}`;
+                const eClassName = escapeHtml(className);
+                const eRatioValue = escapeHtml(ratioValue);
                 return `<tr>
-                <td class="guide-table-name">.${prefix}-${className}</td>
-                <td class="guide-table-value">${ratioValue}</td>
-                <td class="guide-table-description">${description}</td>
+                <td class="guide-table-name">.${prefix}-${eClassName}</td>
+                <td class="guide-table-value">${eRatioValue}</td>
+                <td class="guide-table-description">${escapeHtml(description)}</td>
                 <td class="guide-preview-cell">
-                  <div class="${prefix}-${className}" style="background: var(--${prefix}-color-primary); max-width: 100px;">
+                  <div class="${prefix}-${eClassName}" style="background: var(--${prefix}-color-primary); max-width: 100px;">
                     <div class="${prefix}-aspect-content">
-                      <img class="${prefix}-aspect-image" src="assets/introm.jpg" alt="Ejemplo ${ratioValue}" />
+                      <img class="${prefix}-aspect-image" src="assets/introm.jpg" alt="Ejemplo ${eRatioValue}" />
                     </div>
                   </div>
                 </td>
@@ -1176,15 +1150,15 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
               <tr>
                 <td class="guide-table-name">Mobile</td>
                 <td class="guide-table-value ${changedValues.has('breakpoints.mobile') ? 'guide-changed' : ''}">
-                  ${configData.breakpoints.mobile} 
-                  ${configData.breakpoints.mobile.endsWith('px') ? `(${pxToRem(configData.breakpoints.mobile, baseFontSize)})` : ''}
+                  ${escapeHtml(configData.breakpoints.mobile)}
+                  ${configData.breakpoints.mobile.endsWith('px') ? `(${escapeHtml(pxToRem(configData.breakpoints.mobile, baseFontSize))})` : ''}
                 </td>
               </tr>
               <tr>
                 <td class="guide-table-name">Desktop</td>
                 <td class="guide-table-value ${changedValues.has('breakpoints.desktop') ? 'guide-changed' : ''}">
-                  ${configData.breakpoints.desktop} 
-                  ${configData.breakpoints.desktop.endsWith('px') ? `(${pxToRem(configData.breakpoints.desktop, baseFontSize)})` : ''}
+                  ${escapeHtml(configData.breakpoints.desktop)}
+                  ${configData.breakpoints.desktop.endsWith('px') ? `(${escapeHtml(pxToRem(configData.breakpoints.desktop, baseFontSize))})` : ''}
                 </td>
               </tr>
             </tbody>
@@ -1198,7 +1172,7 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
     <div class="col-xs-12 col-md-6"> <h2>Containers</h2> </div>
     <div class="col-xs-12 col-md-6 guide-section-description">
       <p>
-        Contenedores responsivos ${activeThemes.length === 1 ? 'del tema ' + activeThemes[0].label.replace(/^Tema\s+/, '') : 'de los temas activos'}. Cada container define un <code>max-width</code> y padding adaptativo según breakpoint.
+        Contenedores responsivos ${activeThemes.length === 1 ? 'del tema ' + escapeHtml(activeThemes[0].label.replace(/^Tema\s+/, '')) : 'de los temas activos'}. Cada container define un <code>max-width</code> y padding adaptativo según breakpoint.
       </p>
     </div>
     <div class="col-xs-12 col-md-12"><hr></div>
@@ -1360,6 +1334,69 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
       </div>
     </div>
     ` : ''}
+    ${layoutHelpersTableHTML ? `
+    <div class="guide-section" id="layout">
+    <div class="row mb-120">
+    <div class="col-xs-12 col-md-6"> <h2>Layout</h2> </div>
+    <div class="col-xs-12 col-md-6 guide-section-description">
+      <p class="text-m ">
+        Clases helper para display, flexbox, alignment y gap.
+        Todos los helpers marcados como responsive tienen variantes con prefijo .md: para desktop (≥${escapeHtml(configData.breakpoints.desktop)}).
+      </p> </div>
+    <div class="col-xs-12 col-md-12">
+    <hr>
+    </div>
+    </div>
+      <div class="guide-section-content">
+        ${layoutHelpersTableHTML}
+        <div class="guide-section-title">
+          <div> </div>
+          <div class="demo-section-2">
+            <div>
+              <strong>Ejemplos de uso:</strong>
+              <ul class="guide-info-box-list">
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.d-flex</code> - Display flex
+                </li>
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.flex-column</code> - Flex direction column
+                </li>
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.justify-center</code> - Justify content center
+                </li>
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.items-center</code> - Align items center
+                </li>
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.gap-16</code> - Gap de 16px (1rem)
+                </li>
+                <li class="text-m guide-info-box-list-item">
+                  <code class="guide-info-box-code-info">.md:flex-row</code> - Flex direction row solo en desktop
+                </li>
+              </ul>
+            </div>
+            <div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    ` : ''}
+    <div class="guide-section" id="variables">
+    <div class="row mb-120">
+    <div class="col-xs-12 col-md-6"> <h2>Variables CSS</h2> </div>
+    <div class="col-xs-12 col-md-6 guide-section-description">
+      <p class="">
+        Variables CSS compartidas (<code>--${prefix}-*</code>) usadas por el spacing y el resto del sistema.
+      </p> </div>
+    <div class="col-xs-12 col-md-12">
+    <hr>
+    </div>
+    </div>
+      <div class="guide-section-content">
+        ${variablesTableHTML}
+      </div>
+    </div>
         </div>
   </main>
   <script>
@@ -1395,15 +1432,8 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
         if (targetSection) {
           const offset = 80; // Offset para compensar header
           const targetPosition = targetSection.offsetTop - offset;
-          // Usar Lenis si está disponible, sino usar scroll nativo
-          if (window.lenis) {
-            window.lenis.scrollTo(targetSection, { offset: -offset });
-          } else {
-            window.scrollTo({
-              top: targetPosition,
-              behavior: 'smooth'
-            });
-          }
+          // Salto directo, sin suavizado
+          window.scrollTo(0, targetPosition);
           // Cerrar sidebar después de hacer clic
           closeSidebar();
         }
@@ -1632,31 +1662,6 @@ ${activeThemes.map(t => `        <a href="themes/${t.name}-demo.html">${t.label}
       setupCopyToClipboard();
     }
   </script>
-  <script>
-    // Inicializar Lenis Smooth Scroll - Solo para la guía
-    const lenis = new Lenis({
-      duration: 1.2,
-      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
-      direction: 'vertical',
-      gestureDirection: 'vertical',
-      smooth: true,
-      mouseMultiplier: 1,
-      smoothTouch: false,
-      touchMultiplier: 2,
-      infinite: false,
-    });
-    function raf(time) {
-      lenis.raf(time);
-      requestAnimationFrame(raf);
-    }
-    requestAnimationFrame(raf);
-    // Integrar con el scroll del navegador
-    lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
-      // Puedes agregar callbacks aquí si es necesario
-    });
-    // Hacer lenis disponible globalmente para el scroll del menú
-    window.lenis = lenis;
-  </script>
 </body>
 </html>`;
 }