bricks-builder-mcp 3.6.3 → 3.6.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "bricks-builder-mcp",
-  "version": "3.6.3",
+  "version": "3.6.5",
   "description": "Serveur MCP pour piloter Bricks Builder (WordPress) depuis Claude — édition de pages, gestion d'éléments, réordonnancement des sections, vérification visuelle + technique (verify_element).",
   "main": "server.js",
   "bin": {

package/server.js

@@ -83,12 +83,66 @@ process.on('SIGINT', () => {
   process.exit(0);
 });
 
-// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units)
-function normaliseCssValue(val) {
+// Hex → rgb/rgba pour matcher getComputedStyle qui renvoie toujours rgb()
+function hexToRgb(hex) {
+  hex = hex.replace('#', '');
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('');
+  }
+  if (hex.length !== 6 && hex.length !== 8) return null;
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+  if (hex.length === 8) {
+    const a = parseInt(hex.substring(6, 8), 16) / 255;
+    return `rgba(${r},${g},${b},${a.toFixed(2)})`;
+  }
+  return `rgb(${r},${g},${b})`;
+}
+
+// Normaliser une valeur rgba/rgb (supprime espaces, arrondit alpha)
+function normaliseColor(s) {
+  s = s.replace(/\s+/g, '');
+  // rgba(0,0,0,0) → transparent
+  if (s === 'rgba(0,0,0,0)' || s === 'transparent') return 'transparent';
+  return s;
+}
+
+// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units/hex/vh)
+function normaliseCssValue(val, viewportContext) {
   if (val == null) return '';
   let s = String(val).trim().toLowerCase();
-  // Supprime espaces internes (rgba(0, 0, 0) → rgba(0,0,0))
   s = s.replace(/\s+/g, '');
+
+  // Hex → rgb pour matcher getComputedStyle
+  if (/^#[0-9a-f]{3,8}$/.test(s)) {
+    const rgb = hexToRgb(s);
+    if (rgb) return normaliseColor(rgb);
+  }
+
+  // Couleurs rgb/rgba : normaliser pour comparer
+  if (s.startsWith('rgb')) {
+    return normaliseColor(s);
+  }
+
+  // vh / vw → px en fonction du viewport actuel (getComputedStyle renvoie en px)
+  if (viewportContext) {
+    const vhMatch = s.match(/^(\d+(?:\.\d+)?)vh$/);
+    if (vhMatch && viewportContext.height) {
+      return Math.round(parseFloat(vhMatch[1]) * viewportContext.height / 100) + 'px';
+    }
+    const vwMatch = s.match(/^(\d+(?:\.\d+)?)vw$/);
+    if (vwMatch && viewportContext.width) {
+      return Math.round(parseFloat(vwMatch[1]) * viewportContext.width / 100) + 'px';
+    }
+    // svh, dvh, lvh : on assimile à vh pour l'instant (approximatif mais OK pour la plupart des cas)
+    const svhMatch = s.match(/^(\d+(?:\.\d+)?)(?:svh|dvh|lvh)$/);
+    if (svhMatch && viewportContext.height) {
+      return Math.round(parseFloat(svhMatch[1]) * viewportContext.height / 100) + 'px';
+    }
+  }
+
   // Normalise "0px" et "0" et "0%"
   if (s === '0' || s === '0px' || s === '0%') return '0';
   // Si valeur sans unité fournie (ex "32") et getComputedStyle renvoie "32px"
@@ -1399,6 +1453,13 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
         const pageId = args.pageId;
         const elementId = args.elementId;
         const viewport = args.viewport || "desktop";
+        const viewportSizes = {
+          desktop: { width: 1920, height: 1080 },
+          tablet: { width: 991, height: 1200 },
+          mobile_landscape: { width: 767, height: 600 },
+          mobile_portrait: { width: 478, height: 800 },
+        };
+        const viewportContext = viewportSizes[viewport] || viewportSizes.desktop;
 
         // 1) Récupérer infos plugin (URL, sélecteur, expected styles)
         const info = await callWordPressAPI("/verify-element-info", "POST", { pageId, elementId });
@@ -1468,6 +1529,16 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
           computed = await element.evaluate(el => {
             const cs = getComputedStyle(el);
             const rect = el.getBoundingClientRect();
+            // Enfants "réels" = ceux qui ont une classe brxe-{id} ou id brxe-*
+            // Exclut les <video>, <picture> et autres ajoutés par Bricks (bg vidéo, overlay auto, etc.)
+            const realChildren = Array.from(el.children).filter(child => {
+              if (child.id && child.id.startsWith('brxe-')) return true;
+              return Array.from(child.classList).some(cls => cls.startsWith('brxe-'));
+            });
+            const bricksInternalChildren = Array.from(el.children).filter(child => {
+              return !((child.id && child.id.startsWith('brxe-')) ||
+                       Array.from(child.classList).some(cls => cls.startsWith('brxe-')));
+            }).map(c => c.tagName.toLowerCase() + (c.className ? '.' + c.className.split(' ').join('.') : ''));
             return {
               display: cs.display,
               'flex-direction': cs.flexDirection,
@@ -1500,7 +1571,9 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
               'border-bottom-left-radius': cs.borderBottomLeftRadius,
               visibility: cs.visibility,
               opacity: cs.opacity,
-              childrenInDom: el.children.length,
+              childrenInDom: realChildren.length,
+              childrenTotalDom: el.children.length,
+              bricksInternalChildren: bricksInternalChildren,
               isVisible: rect.width > 0 && rect.height > 0 && cs.visibility !== 'hidden' && cs.opacity !== '0',
               hasOverflowX: el.scrollWidth > el.clientWidth,
             };
@@ -1532,12 +1605,12 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
             });
           }
 
-          // Compare chaque expected
+          // Compare chaque expected (viewport-aware pour vh/vw)
           const expected = info.expected || {};
           for (const [prop, expectedVal] of Object.entries(expected)) {
             const got = computed[prop];
             if (got === undefined) continue;
-            const ok = normaliseCssValue(got) === normaliseCssValue(expectedVal);
+            const ok = normaliseCssValue(got, viewportContext) === normaliseCssValue(expectedVal, viewportContext);
             const check = { ok, label: `${prop} = ${expectedVal}` };
             if (!ok) {
               check.expected = expectedVal;
@@ -1548,16 +1621,34 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
             checks.push(check);
           }
 
-          // Console errors
-          if (consoleErrors.length > 0) {
+          // Console errors : séparer les vrais bugs JS des erreurs réseau (429/timeout)
+          // qui dépendent du serveur, pas du code de l'élément.
+          const realErrors = consoleErrors.filter(e =>
+            !e.includes('429') &&
+            !e.includes('net::ERR_') &&
+            !e.includes('Failed to load resource')
+          );
+          const networkErrors = consoleErrors.filter(e =>
+            e.includes('429') || e.includes('net::ERR_') || e.includes('Failed to load resource')
+          );
+
+          if (realErrors.length > 0) {
             checks.push({
               ok: false,
-              label: `${consoleErrors.length} erreur(s) console`,
-              got: consoleErrors.slice(0, 3),
-              hint: "Vérifie les ressources 404 (font, image, script)",
+              label: `${realErrors.length} erreur(s) JS dans la console`,
+              got: realErrors.slice(0, 3),
+              hint: "Erreur JavaScript détectée — pas lié au serveur",
             });
           } else {
-            checks.push({ ok: true, label: "Aucune erreur console" });
+            checks.push({ ok: true, label: "Aucune erreur JS console" });
+          }
+          // Erreurs réseau : info seulement, pas un échec
+          if (networkErrors.length > 0) {
+            checks.push({
+              ok: true,
+              label: `${networkErrors.length} erreur(s) réseau (429/load) — non bloquant`,
+              got: networkErrors.slice(0, 2),
+            });
           }
 
           // Overflow horizontal