bricks-builder-mcp 3.6.2 → 3.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "bricks-builder-mcp",
-  "version": "3.6.2",
+  "version": "3.6.4",
   "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,49 @@ process.on('SIGINT', () => {
   process.exit(0);
 });
 
-// Normaliser les valeurs CSS pour comparaison (rgba/spaces/units)
+// 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)
 function normaliseCssValue(val) {
   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);
+  }
+
   // 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"
@@ -1438,12 +1475,24 @@ mcpServer.setRequestHandler(CallToolRequestSchema, async (request) => {
 
           const element = await page.$(info.selector);
           if (!element) {
+            // Diagnostic : qu'a-t-on réellement chargé ?
+            const diagnostics = await page.evaluate(() => ({
+              actualUrl: window.location.href,
+              title: document.title,
+              bodyClass: document.body?.className || '',
+              brxeCount: document.querySelectorAll('[class*="brxe-"]').length,
+              firstBrxe: document.querySelector('[class*="brxe-"]')?.className || null,
+              htmlSnippet: document.documentElement.outerHTML.substring(0, 500),
+            }));
             result = {
               success: false,
-              error: `Élément ${info.selector} introuvable dans le DOM (caché par CSS, parent invisible, ou non rendu côté front)`,
+              error: `Élément ${info.selector} introuvable dans le DOM`,
               url: info.url,
               selector: info.selector,
-              hint: "Vérifie que la page est publiée et que l'élément n'a pas _hidden ou _display: none.",
+              diagnostics,
+              hint: diagnostics.brxeCount === 0
+                ? "Aucune classe .brxe-* trouvée — la page n'a probablement pas chargé le contenu Bricks (cert SSL, redirect, 404, page d'erreur)"
+                : `${diagnostics.brxeCount} éléments .brxe-* trouvés mais pas ${info.selector} — l'ID dans la DB ne correspond pas au rendu`,
             };
             await page.close();
             break;
@@ -1456,6 +1505,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,
@@ -1488,7 +1547,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,
             };