holygrail5 1.0.21 → 1.0.23

package/src/.data/.previous-values.json

@@ -4,10 +4,14 @@
     "desktop": "992px"
   },
   "fontFamilyMap": {
+    "primary-thin": "\"suisse-thin\", Arial, Helvetica, sans-serif",
     "primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "primary-regular": "\"suisse-regular\", Arial, Helvetica, sans-serif",
     "primary-bold": "\"suisse-semibold\", Arial, Helvetica, sans-serif",
-    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif"
+    "secondary": "\"suisse-medium\", Arial, Helvetica, sans-serif",
+    "mono-regular": "\"suisse-mono-regular\", ui-monospace, monospace",
+    "mono-bold": "\"suisse-mono-bold\", ui-monospace, monospace",
+    "evil": "\"><script>alert(1)</script>"
   },
   "spacingMap": {
     "0": "0",
@@ -65,12 +69,25 @@
     "gold": "#A38A6B",
     "platinum": "#5B7FA1",
     "bg-light": "#f9f9f9",
-    "bg-cream": "#f4f2ed"
+    "bg-cream": "#f4f2ed",
+    "evil": "\"><script>alert(1)</script>"
   },
   "typo": {
+    "title-thin": {
+      "fontFamily": "\"suisse-thin\", Arial, Helvetica, sans-serif",
+      "fontWeight": "100",
+      "mobile": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      },
+      "desktop": {
+        "fontSize": "24px",
+        "lineHeight": "1"
+      }
+    },
     "title-xxl": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "24px",
         "lineHeight": "1"
@@ -96,7 +113,7 @@
     },
     "title-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "mobile": {
         "fontSize": "12px",
         "lineHeight": "1.4"
@@ -108,7 +125,7 @@
     },
     "title-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -122,7 +139,7 @@
     },
     "title-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "12px",
@@ -135,7 +152,7 @@
     },
     "title-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "10px",
@@ -148,7 +165,7 @@
     },
     "title-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -162,7 +179,7 @@
     },
     "text-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "13px",
@@ -175,7 +192,7 @@
     },
     "text-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -188,7 +205,7 @@
     },
     "p-tag": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "mobile": {
         "fontSize": "9px",
@@ -201,7 +218,7 @@
     },
     "hg-body-l": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -214,7 +231,7 @@
     },
     "hg-body-l-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -227,7 +244,7 @@
     },
     "hg-body-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -240,7 +257,7 @@
     },
     "hg-body-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.04em",
       "mobile": {
         "fontSize": "12px",
@@ -253,7 +270,7 @@
     },
     "label-m": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -267,7 +284,7 @@
     },
     "label-m-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.16em",
       "textTransform": "uppercase",
       "mobile": {
@@ -281,7 +298,7 @@
     },
     "label-s": {
       "fontFamily": "\"suisse-light\", Arial, Helvetica, sans-serif",
-      "fontWeight": "100",
+      "fontWeight": "300",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -295,7 +312,7 @@
     },
     "label-s-b": {
       "fontFamily": "\"suisse-regular\", Arial, Helvetica, sans-serif",
-      "fontWeight": "300",
+      "fontWeight": "400",
       "letterSpacing": "0.06em",
       "textTransform": "uppercase",
       "mobile": {
@@ -306,6 +323,34 @@
         "fontSize": "10px",
         "lineHeight": "1"
       }
+    },
+    "label-mono": {
+      "fontFamily": "\"suisse-mono-regular\", ui-monospace, monospace",
+      "fontWeight": "400",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
+    },
+    "label-mono-b": {
+      "fontFamily": "\"suisse-mono-bold\", ui-monospace, monospace",
+      "fontWeight": "700",
+      "letterSpacing": "0.06em",
+      "textTransform": "uppercase",
+      "mobile": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      },
+      "desktop": {
+        "fontSize": "10px",
+        "lineHeight": "1.2"
+      }
     }
   },
   "variables": {
@@ -314,6 +359,9 @@
     "--hg-typo-font-family-serif": "'Playfair Display', 'Georgia', serif",
     "--hg-typo-font-family-primary-light": "\"suisse-light\", Arial, Helvetica, sans-serif",
     "--hg-typo-font-family-primary-bold": "\"suisse-semibold\", Arial, Helvetica, sans-serif",
+    "--hg-typo-font-family-mono-regular": "\"suisse-mono-regular\", ui-monospace, monospace",
+    "--hg-typo-font-family-mono-bold": "\"suisse-mono-bold\", ui-monospace, monospace",
+    "--hg-typo-font-family-primary-thin": "\"suisse-thin\", Arial, Helvetica, sans-serif",
     "--hg-typo-line-height-1": "1",
     "--hg-typo-line-height-1-976": "1.976",
     "--hg-typo-line-height-1-2": "1.2",
@@ -406,6 +454,7 @@
     "--hg-color-gold": "#A38A6B",
     "--hg-color-platinum": "#5B7FA1",
     "--hg-color-bg-light": "#f9f9f9",
-    "--hg-color-bg-cream": "#f4f2ed"
+    "--hg-color-bg-cream": "#f4f2ed",
+    "--hg-color-evil": "\"><script>alert(1)</script>"
   }
 }

package/src/build/asset-manager.js

@@ -27,6 +27,14 @@ const ASSETS_CONFIG = {
     }
   ],
   fonts: [
+    {
+      source: 'src/assets/fonts/suisse-intl-thin.woff2',
+      dest: 'dist/assets/fonts/suisse-intl-thin.woff2'
+    },
+    {
+      source: 'src/assets/fonts/suisse-intl-thin.woff',
+      dest: 'dist/assets/fonts/suisse-intl-thin.woff'
+    },
     {
       source: 'src/assets/fonts/suisse-intl-light.woff2',
       dest: 'dist/assets/fonts/suisse-intl-light.woff2'

package/src/build/components-generator.js

@@ -479,20 +479,13 @@ function generateComponentsPage(projectRoot, configData = null) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HolyGrail5 — Componentes base</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Instrument+Sans:regular,100,500,600,700">
   <!-- Framework base -->
   <link rel="stylesheet" href="output.css">
   <!-- Tema base genérico: ${BASE_THEME} (variables + componentes) -->
   <link rel="stylesheet" href="themes/${BASE_THEME}.css">
-  <!-- Estilos compartidos de guía (header, sidebar, demo-*) -->
+  <!-- Estilos compartidos de guía (header, sidebar, demo-*; incluye @font-face Suisse y la regla body en Suisse) -->
   <link rel="stylesheet" href="guide-styles.css">
   <style>
-    body {
-      font-family: 'Instrument Sans', sans-serif !important;
-    }
-
     /* Descripción de cada sección (debajo del título) */
     .cmp-desc {
       font-size: 14px;

package/src/build/skills-generator.js

@@ -284,15 +284,23 @@ function buildPage(skill, activeThemes = FALLBACK_THEMES_IN_NAV) {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HolyGrail5 — Developer Guide</title>
-  <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">
   <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.29/bundled/lenis.min.js"></script>
   <link rel="stylesheet" href="output.css">
   <style>
+    /* @font-face de Suisse (esta página no enlaza guide-styles.css, donde
+       normalmente viven). Misma convención: una familia por peso, woff2+woff
+       con fallback, y el font-weight numérico real de cada cut. */
+    @font-face { font-family: "suisse-light"; font-weight: 300; font-display: swap;
+      src: local("SuisseIntl-Light"), url('assets/fonts/suisse-intl-light.woff2') format('woff2'), url('assets/fonts/suisse-intl-light.woff') format('woff'); }
+    @font-face { font-family: "suisse-regular"; font-weight: 400; font-display: swap;
+      src: local("SuisseIntl-Regular"), url('assets/fonts/suisse-intl-regular.woff2') format('woff2'), url('assets/fonts/suisse-intl-regular.woff') format('woff'); }
+    @font-face { font-family: "suisse-medium"; font-weight: 500; font-display: swap;
+      src: local("SuisseIntl-Medium"), url('assets/fonts/suisse-intl-medium.woff2') format('woff2'), url('assets/fonts/suisse-intl-medium.woff') format('woff'); }
+    @font-face { font-family: "suisse-semibold"; font-weight: 600; font-display: swap;
+      src: local("SuisseIntl-SemiBold"), url('assets/fonts/suisse-intl-semibold.woff2') format('woff2'), url('assets/fonts/suisse-intl-semibold.woff') format('woff'); }
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body {
-      font-family: 'Instrument Sans', sans-serif !important;
+      font-family: var(--hg-typo-font-family-primary-regular);
       background: #fff;
       color: #111;
       -webkit-font-smoothing: antialiased;

package/src/build/theme-transformer.js

@@ -247,7 +247,10 @@ class ThemeTransformer {
       if (config) {
         const typoConfig = applyThemeTypographyOverrides(config, themeData);
         const typoSection = generateTypographyHTML(typoConfig);
-        content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, typoSection);
+        // Usamos un replacer de función: si `typoSection` contiene `$`
+        // (frecuente en CSS), pasarlo como string de reemplazo haría que
+        // `replace` interpretara `$&`, `$1`, `$$`… y corrompiera la salida.
+        content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, () => typoSection);
       } else {
         // Sin config, eliminamos el placeholder para no mostrarlo en crudo
         content = content.replace(/<!--\s*HG_TYPO_TABLE\s*-->/g, '');
@@ -257,7 +260,9 @@ class ThemeTransformer {
       // Si no lo hay, quitamos el placeholder para no dejar comentarios huérfanos.
       if (themeData) {
         const themeBlock = generateThemeBlockHTML(themeData, config);
-        content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, themeBlock);
+        // Replacer de función por el mismo motivo que el bloque de tipografía:
+        // blindar la salida frente a `$` en el contenido inyectado.
+        content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, () => themeBlock);
       } else {
         content = content.replace(/<!--\s*HG_THEME_BLOCK\s*-->/g, '');
       }
@@ -291,7 +296,9 @@ class ThemeTransformer {
       // la lista de temas activos, se respeta; si no, se cae al
       // fallback estático THEMES_IN_NAV (compatibilidad).
       const headerAndSidebarHTML = buildHeaderAndSidebar(themeName, themesForNav);
-      content = content.replace(/(<body[^>]*>)/i, '$1\n' + headerAndSidebarHTML);
+      // Replacer de función: preserva el `<body>` capturado y evita que un
+      // `$` en las etiquetas del tema (themesForNav) se interprete como patrón.
+      content = content.replace(/(<body[^>]*>)/i, (m) => m + '\n' + headerAndSidebarHTML);
 
       // Eliminar el título h1 del contenido si existe (ya está en el header)
       content = content.replace(/<h1 class="demo-title">Sistema de Theming [^<]+<\/h1>\s*/g, '');

package/src/dev-server.js

@@ -36,7 +36,10 @@ function listenOnAvailablePort(server, initialPort) {
       };
 
       server.once('error', onError);
-      server.listen(currentPort, () => {
+      // Bind explícito a loopback: es un servidor de desarrollo y no debe
+      // quedar expuesto en la red local (el default de Node escucha en
+      // todas las interfaces).
+      server.listen(currentPort, '127.0.0.1', () => {
         server.removeListener('error', onError);
         resolve(currentPort);
       });
@@ -73,22 +76,34 @@ function getMimeType(filePath) {
 // Servidor HTTP simple y rápido
 function createServer() {
   return http.createServer((req, res) => {
-    // Decodificar URL
-    let filePath = decodeURIComponent(req.url);
-    
+    // Decodificar URL. Una URL con secuencias %-malformadas hace que
+    // decodeURIComponent lance URIError; sin este try/catch la excepción
+    // quedaría sin capturar y tumbaría el proceso del servidor (DoS con
+    // un solo request tipo `GET /%`).
+    let filePath;
+    try {
+      filePath = decodeURIComponent(req.url);
+    } catch (e) {
+      res.writeHead(400, { 'Content-Type': 'text/plain' });
+      res.end('400 Bad Request');
+      return;
+    }
+
+    // Eliminar query string (antes de normalizar la ruta)
+    filePath = filePath.split('?')[0];
+
     // Si es la raíz, servir index.html
     if (filePath === '/' || filePath === '') {
       filePath = '/index.html';
     }
-    
-    // Eliminar query string
-    filePath = filePath.split('?')[0];
-    
-    // Construir ruta completa
-    const fullPath = path.join(DIST_DIR, filePath);
-    
-    // Verificar que el archivo esté dentro de dist/
-    if (!fullPath.startsWith(DIST_DIR)) {
+
+    // Construir ruta completa y normalizar
+    const fullPath = path.resolve(DIST_DIR, '.' + path.sep + filePath);
+
+    // Verificar que el archivo esté DENTRO de dist/. Comparamos con el
+    // separador final para que un directorio hermano con prefijo común
+    // (p. ej. `dist-backup/`) no pase el filtro de `startsWith`.
+    if (fullPath !== DIST_DIR && !fullPath.startsWith(DIST_DIR + path.sep)) {
       res.writeHead(403, { 'Content-Type': 'text/plain' });
       res.end('Forbidden');
       return;