prism-design 2.13.0

package/scripts/extractors/advanced.ts

@@ -0,0 +1,524 @@
+/**
+ * extractors/advanced.ts — Prism Phase 5
+ * Extracteurs CSS avancés (@keyframes, z-index, transform 3D, pseudo-elements,
+ * @container queries, grid layouts, responsive per-breakpoint).
+ * Tous sont best-effort avec fallback gracieux.
+ */
+
+import type { Page } from 'playwright';
+
+/**
+ * Scanne tous les stylesheets accessibles pour extraire les @keyframes.
+ * Fallback silencieux sur cross-origin.
+ */
+export async function extractKeyframes(page: Page): Promise<Record<string, Record<string, Record<string, string>>>> {
+  return page.evaluate(`(function() {
+    var result = {};
+    var sheets = document.styleSheets;
+    for (var i = 0; i < sheets.length; i++) {
+      try {
+        var rules = sheets[i].cssRules || sheets[i].rules;
+        if (!rules) continue;
+        for (var j = 0; j < rules.length; j++) {
+          var rule = rules[j];
+          if (rule && rule.constructor && rule.constructor.name === 'CSSKeyframesRule') {
+            var name = rule.name;
+            if (result[name]) continue;
+            var frames = {};
+            var kfRules = rule.cssRules;
+            for (var k = 0; k < kfRules.length; k++) {
+              var frame = kfRules[k];
+              var key = frame.keyText;
+              var styles = {};
+              var style = frame.style;
+              for (var p = 0; p < style.length; p++) {
+                var prop = style[p];
+                var val = style.getPropertyValue(prop);
+                if (val) styles[prop] = val.trim();
+              }
+              frames[key] = styles;
+            }
+            result[name] = frames;
+            if (Object.keys(result).length >= 200) return result;
+          }
+        }
+      } catch (e) { /* cross-origin sheet, skip */ }
+    }
+    return result;
+  })()`) as any;
+}
+
+/**
+ * Extrait z-index non-triviaux + stacking context parent.
+ */
+export async function extractZIndexMap(page: Page): Promise<Array<{selector: string; z: number; stackingRoot: string}>> {
+  return page.evaluate(`(function() {
+    function getPath(el) {
+      if (!el || el === document.body) return 'body';
+      if (el.id) return '#' + el.id;
+      var classes = (el.className || '').toString().split(' ').filter(Boolean).slice(0, 2).join('.');
+      var tag = el.tagName.toLowerCase();
+      return classes ? tag + '.' + classes : tag;
+    }
+    function isStackingContext(el) {
+      var cs = getComputedStyle(el);
+      if (cs.position !== 'static') return true;
+      if (parseFloat(cs.opacity) < 1) return true;
+      if (cs.transform !== 'none') return true;
+      if (cs.filter !== 'none') return true;
+      if (cs.mixBlendMode !== 'normal') return true;
+      return false;
+    }
+    var result = [];
+    var elements = document.querySelectorAll('*');
+    var count = 0;
+    for (var i = 0; i < elements.length && count < 100; i++) {
+      var el = elements[i];
+      var cs = getComputedStyle(el);
+      var z = parseInt(cs.zIndex);
+      if (isNaN(z) || z === 0) continue;
+      var parent = el.parentElement;
+      var stackingRoot = 'body';
+      while (parent) {
+        if (isStackingContext(parent) || parent === document.body) {
+          stackingRoot = getPath(parent);
+          break;
+        }
+        parent = parent.parentElement;
+      }
+      result.push({ selector: getPath(el), z: z, stackingRoot: stackingRoot });
+      count++;
+    }
+    return result;
+  })()`) as any;
+}
+
+/**
+ * Extrait les transforms 3D et parse les fonctions (rotate, translate3d, perspective, matrix3d).
+ */
+export async function extractTransform3DMap(page: Page): Promise<Record<string, any>> {
+  return page.evaluate(`(function() {
+    function getPath(el) {
+      if (!el || el === document.body) return 'body';
+      if (el.id) return '#' + el.id;
+      var classes = (el.className || '').toString().split(' ').filter(Boolean).slice(0, 2).join('.');
+      return el.tagName.toLowerCase() + (classes ? '.' + classes : '');
+    }
+    function parseTransform(css) {
+      if (!css || css === 'none') return null;
+      if (css.indexOf('matrix') === 0) {
+        var m = css.match(/matrix(3d)?\\(([^)]+)\\)/);
+        if (!m) return null;
+        return { type: m[1] ? 'matrix3d' : 'matrix', values: m[2].split(',').map(function(v){return parseFloat(v.trim());}) };
+      }
+      var fns = [];
+      var regex = /(\\w+)\\(([^)]+)\\)/g;
+      var match;
+      while ((match = regex.exec(css)) !== null) {
+        fns.push({ fn: match[1], args: match[2].split(',').map(function(s){return s.trim();}) });
+      }
+      return fns.length ? { type: 'functions', fns: fns } : null;
+    }
+    var result = {};
+    var elements = document.querySelectorAll('*');
+    var count = 0;
+    for (var i = 0; i < elements.length && count < 150; i++) {
+      var el = elements[i];
+      var cs = getComputedStyle(el);
+      var transform = cs.transform;
+      if (!transform || transform === 'none') continue;
+      var parsed = parseTransform(transform);
+      if (!parsed) continue;
+      var key = getPath(el);
+      if (result[key]) continue;
+      result[key] = {
+        raw: transform,
+        parsed: parsed,
+        transformOrigin: cs.transformOrigin,
+        perspective: cs.perspective !== 'none' ? cs.perspective : undefined,
+      };
+      count++;
+    }
+    return result;
+  })()`) as any;
+}
+
+/**
+ * Container queries (@container) + container-type/name sur éléments.
+ */
+export async function extractContainerQueries(page: Page): Promise<{queries: Array<{name?: string; condition: string; rulesCount: number}>; containers: string[]}> {
+  return page.evaluate(`(function() {
+    var result = [];
+    var sheets = document.styleSheets;
+    for (var i = 0; i < sheets.length; i++) {
+      try {
+        var rules = sheets[i].cssRules || sheets[i].rules;
+        if (!rules) continue;
+        for (var j = 0; j < rules.length; j++) {
+          var rule = rules[j];
+          if (rule && rule.constructor && rule.constructor.name === 'CSSContainerRule') {
+            result.push({
+              name: rule.containerName || undefined,
+              condition: rule.containerQuery || rule.conditionText || '',
+              rulesCount: rule.cssRules ? rule.cssRules.length : 0,
+            });
+            if (result.length >= 50) break;
+          }
+          if (rule && rule.constructor && rule.constructor.name === 'CSSMediaRule' && rule.cssRules) {
+            for (var k = 0; k < rule.cssRules.length; k++) {
+              var inner = rule.cssRules[k];
+              if (inner && inner.constructor && inner.constructor.name === 'CSSContainerRule') {
+                result.push({
+                  name: inner.containerName || undefined,
+                  condition: inner.containerQuery || inner.conditionText || '',
+                  rulesCount: inner.cssRules ? inner.cssRules.length : 0,
+                });
+              }
+            }
+          }
+        }
+      } catch (e) { /* cross-origin, skip */ }
+    }
+    var elements = document.querySelectorAll('*');
+    var containers = new Set();
+    for (var m = 0; m < elements.length; m++) {
+      var cs = getComputedStyle(elements[m]);
+      var ctype = cs.containerType;
+      if (ctype && ctype !== 'normal') {
+        var cname = cs.containerName;
+        containers.add(ctype + ':' + (cname || 'anonymous'));
+      }
+    }
+    return { queries: result, containers: Array.from(containers) };
+  })()`) as any;
+}
+
+/**
+ * grid-template-areas + named lines: capture les layouts nommés.
+ */
+export async function extractGridLayouts(page: Page): Promise<Array<{selector: string; areas?: string; cols?: string; rows?: string}>> {
+  return page.evaluate(`(function() {
+    function getPath(el) {
+      if (!el || el === document.body) return 'body';
+      if (el.id) return '#' + el.id;
+      var classes = (el.className || '').toString().split(' ').filter(Boolean).slice(0, 2).join('.');
+      return el.tagName.toLowerCase() + (classes ? '.' + classes : '');
+    }
+    var result = [];
+    var elements = document.querySelectorAll('*');
+    var count = 0;
+    for (var i = 0; i < elements.length && count < 50; i++) {
+      var el = elements[i];
+      var cs = getComputedStyle(el);
+      if (cs.display !== 'grid' && cs.display !== 'inline-grid') continue;
+      var areas = cs.gridTemplateAreas;
+      var cols = cs.gridTemplateColumns;
+      var rows = cs.gridTemplateRows;
+      if ((!areas || areas === 'none') && (!cols || cols === 'none') && (!rows || rows === 'none')) continue;
+      result.push({
+        selector: getPath(el),
+        areas: (areas && areas !== 'none') ? areas : undefined,
+        cols: (cols && cols !== 'none') ? cols : undefined,
+        rows: (rows && rows !== 'none') ? rows : undefined,
+      });
+      count++;
+    }
+    return result;
+  })()`) as any;
+}
+
+/**
+ * Pseudo-elements ::before / ::after — capture content + styles critiques.
+ */
+export async function extractPseudoElements(page: Page): Promise<Record<string, { before?: Record<string, string>; after?: Record<string, string> }>> {
+  return page.evaluate(`(function() {
+    function nthPath(el) {
+      if (!el || el === document.body) return 'body';
+      var path = [];
+      var current = el;
+      var depth = 0;
+      while (current && current !== document.body && depth < 8) {
+        var parent = current.parentElement;
+        if (!parent) break;
+        var siblings = Array.from(parent.children);
+        var idx = siblings.indexOf(current);
+        var tag = current.tagName.toLowerCase();
+        path.unshift(tag + ':nth-child(' + (idx + 1) + ')');
+        current = parent;
+        depth++;
+      }
+      return path.length ? 'body > ' + path.join(' > ') : 'body';
+    }
+    var PSEUDO_PROPS = [
+      'content', 'display', 'position', 'top', 'left', 'right', 'bottom',
+      'width', 'height', 'backgroundColor', 'color', 'backgroundImage',
+      'border', 'borderRadius', 'transform', 'opacity', 'fontSize',
+      'fontFamily', 'fontWeight', 'padding', 'margin', 'boxShadow',
+    ];
+    var result = {};
+    var elements = document.querySelectorAll('*');
+    var count = 0;
+    for (var i = 0; i < elements.length && count < 100; i++) {
+      var el = elements[i];
+      var data = {};
+      for (var p = 0; p < 2; p++) {
+        var pseudo = p === 0 ? '::before' : '::after';
+        var cs = getComputedStyle(el, pseudo);
+        var content = cs.content;
+        if (!content || content === 'none' || content === 'normal') continue;
+        var styles = { content: content };
+        for (var k = 0; k < PSEUDO_PROPS.length; k++) {
+          var prop = PSEUDO_PROPS[k];
+          if (prop === 'content') continue;
+          var val = cs[prop];
+          if (val && val !== 'none' && val !== 'normal' && val !== '0px' && val !== 'auto' && val !== 'rgba(0, 0, 0, 0)') {
+            styles[prop] = val;
+          }
+        }
+        data[pseudo.replace('::', '')] = styles;
+      }
+      if (Object.keys(data).length > 0) {
+        var key = nthPath(el);
+        if (!result[key]) {
+          result[key] = data;
+          count++;
+        }
+      }
+    }
+    return result;
+  })()`) as any;
+}
+
+/**
+ * Responsive snapshot: snapshot des styles clés sur 360px + 768px.
+ */
+export async function extractResponsiveSnapshot(
+  page: Page,
+  currentViewport: { width: number; height: number },
+): Promise<Record<number, Record<string, Record<string, string>>>> {
+  const TARGET_WIDTHS = [360, 768, 1440].filter(w => w !== currentViewport.width);
+  const result: Record<number, Record<string, Record<string, string>>> = {};
+  const originalSize = { width: currentViewport.width, height: currentViewport.height };
+
+  for (const width of TARGET_WIDTHS) {
+    try {
+      await page.setViewportSize({ width, height: 900 });
+      await page.waitForTimeout(250);
+
+      const snapshot = await page.evaluate(`(function() {
+        function getPath(el) {
+          if (!el) return '';
+          if (el.id) return '#' + el.id;
+          var classes = (el.className || '').toString().split(' ').filter(Boolean).slice(0, 2).join('.');
+          return el.tagName.toLowerCase() + (classes ? '.' + classes : '');
+        }
+        var targets = [
+          'header', 'nav', 'main', 'footer',
+          'section.hero, [class*="hero"]',
+          '[class*="card"]:not([class*="cards"])',
+          'button, [class*="btn"]',
+          'h1', 'h2',
+          '[class*="container"]',
+        ];
+        var result = {};
+        var CRITICAL_PROPS = [
+          'display', 'flexDirection', 'gridTemplateColumns', 'gridTemplateRows',
+          'padding', 'margin', 'gap',
+          'fontSize', 'lineHeight', 'width', 'height', 'maxWidth',
+          'position', 'top', 'left', 'right', 'bottom',
+          'textAlign',
+        ];
+        for (var t = 0; t < targets.length; t++) {
+          var els = document.querySelectorAll(targets[t]);
+          var limit = Math.min(els.length, 3);
+          for (var i = 0; i < limit; i++) {
+            var el = els[i];
+            var path = getPath(el);
+            if (!path || result[path]) continue;
+            var cs = getComputedStyle(el);
+            var styles = {};
+            for (var p = 0; p < CRITICAL_PROPS.length; p++) {
+              var prop = CRITICAL_PROPS[p];
+              var val = cs[prop];
+              if (val && val !== 'none' && val !== 'normal' && val !== '0px' && val !== 'auto') {
+                styles[prop] = val;
+              }
+            }
+            if (Object.keys(styles).length > 0) {
+              result[path] = styles;
+            }
+          }
+        }
+        return result;
+      })()`) as Record<string, Record<string, string>>;
+
+      result[width] = snapshot;
+    } catch (err) {
+      console.warn(`  ⚠️  Responsive ${width}px failed: ${(err as Error).message}`);
+    }
+  }
+
+  try {
+    await page.setViewportSize(originalSize);
+    await page.waitForTimeout(100);
+  } catch { /* ignore */ }
+
+  return result;
+}
+
+// ── Visual Effects Detection ───────────────────────────────────────────────
+
+export interface VisualEffects {
+  hasCanvas: boolean;
+  hasWebGL: boolean;
+  hasSVGAnimations: boolean;
+  glassmorphism: Array<{ selector: string; blur: string; bg: string }>;
+  meshGradients: Array<{ selector: string; background: string }>;
+  clipPaths: Array<{ selector: string; clipPath: string }>;
+  mixBlendModes: Array<{ selector: string; mode: string }>;
+  backdropFilters: Array<{ selector: string; filter: string }>;
+  scrollAnimations: { cssScrollTimeline: boolean; intersectionObserver: boolean };
+  cssVariableAnimations: string[];
+  motionSummary: string;
+}
+
+/**
+ * Détecte les effets visuels au-delà du CSS statique.
+ * Couvre: Canvas/WebGL, glassmorphism, mesh gradients, clip-paths, blend modes,
+ * scroll-driven animations, SVG animations.
+ */
+export async function extractVisualEffects(page: Page): Promise<VisualEffects> {
+  return page.evaluate(`(function() {
+    function getPath(el) {
+      if (!el || el === document.body) return 'body';
+      if (el.id) return '#' + el.id;
+      var cls = (el.className || '').toString().split(' ').filter(Boolean).slice(0, 2).join('.');
+      return el.tagName.toLowerCase() + (cls ? '.' + cls : '');
+    }
+
+    // Canvas / WebGL
+    var canvases = document.querySelectorAll('canvas');
+    var hasCanvas = canvases.length > 0;
+    var hasWebGL = false;
+    for (var c = 0; c < canvases.length && !hasWebGL; c++) {
+      try {
+        hasWebGL = !!(canvases[c].getContext('webgl') || canvases[c].getContext('webgl2') || canvases[c].getContext('experimental-webgl'));
+      } catch(e) {}
+    }
+
+    // SVG animations
+    var svgAnimates = document.querySelectorAll('animate, animateTransform, animateMotion');
+    var hasSVGAnimations = svgAnimates.length > 0 || document.querySelectorAll('svg [style*="animation"]').length > 0;
+
+    // Glassmorphism: backdrop-filter + semi-transparent bg
+    var glassmorphism = [];
+    var backdropFilters = [];
+    var elements = document.querySelectorAll('*');
+    for (var i = 0; i < elements.length && glassmorphism.length < 10; i++) {
+      var el = elements[i];
+      var cs = getComputedStyle(el);
+      var bf = cs.backdropFilter || cs.webkitBackdropFilter || '';
+      if (bf && bf !== 'none') {
+        var bg = cs.backgroundColor;
+        backdropFilters.push({ selector: getPath(el), filter: bf });
+        if (bf.indexOf('blur') !== -1 && bg && bg.indexOf('rgba') !== -1) {
+          glassmorphism.push({ selector: getPath(el), blur: bf, bg: bg });
+        }
+      }
+    }
+
+    // Mesh gradients: multiple radial/conic gradients stacked
+    var meshGradients = [];
+    for (var j = 0; j < elements.length && meshGradients.length < 5; j++) {
+      var bg = getComputedStyle(elements[j]).backgroundImage;
+      if (!bg || bg === 'none') continue;
+      var radialCount = (bg.match(/radial-gradient/g) || []).length;
+      var conicCount = (bg.match(/conic-gradient/g) || []).length;
+      if (radialCount >= 2 || conicCount >= 1) {
+        meshGradients.push({ selector: getPath(elements[j]), background: bg.slice(0, 200) });
+      }
+    }
+
+    // Clip-paths (non-rectangular shapes)
+    var clipPaths = [];
+    for (var k = 0; k < elements.length && clipPaths.length < 10; k++) {
+      var cp = getComputedStyle(elements[k]).clipPath;
+      if (cp && cp !== 'none' && cp !== 'unset') {
+        clipPaths.push({ selector: getPath(elements[k]), clipPath: cp });
+      }
+    }
+
+    // Mix-blend-modes
+    var mixBlendModes = [];
+    for (var m = 0; m < elements.length && mixBlendModes.length < 10; m++) {
+      var mbm = getComputedStyle(elements[m]).mixBlendMode;
+      if (mbm && mbm !== 'normal') {
+        mixBlendModes.push({ selector: getPath(elements[m]), mode: mbm });
+      }
+    }
+
+    // Scroll-driven animations
+    var hasCSSScrollTimeline = false;
+    try {
+      var sheets = document.styleSheets;
+      for (var s = 0; s < sheets.length; s++) {
+        try {
+          var rules = sheets[s].cssRules;
+          for (var r = 0; r < rules.length; r++) {
+            var cssText = rules[r].cssText || '';
+            if (cssText.indexOf('scroll-timeline') !== -1 || cssText.indexOf('animation-timeline') !== -1) {
+              hasCSSScrollTimeline = true;
+            }
+          }
+        } catch(e) {}
+      }
+    } catch(e) {}
+
+    var hasIntersectionObserver = typeof IntersectionObserver !== 'undefined' && (
+      document.querySelectorAll('[data-aos], [data-sal], [data-animate]').length > 0 ||
+      document.querySelectorAll('.animate__animated, .fade-in, .slide-in').length > 0
+    );
+
+    // CSS variable animations (custom properties being animated)
+    var cssVariableAnimations = [];
+    try {
+      for (var sa = 0; sa < (document.styleSheets || []).length; sa++) {
+        try {
+          var saRules = document.styleSheets[sa].cssRules;
+          for (var sr = 0; sr < saRules.length; sr++) {
+            var st = saRules[sr].cssText || '';
+            var matches = st.match(/@keyframes[^{]+\{[^}]*--[a-z]/g);
+            if (matches) cssVariableAnimations.push(...matches.map(function(m) { return m.slice(0, 60); }));
+          }
+        } catch(e) {}
+      }
+    } catch(e) {}
+
+    // Motion summary
+    var motionParts = [];
+    if (hasWebGL) motionParts.push('WebGL/3D canvas');
+    else if (hasCanvas) motionParts.push('Canvas 2D');
+    if (hasSVGAnimations) motionParts.push('SVG animations');
+    if (glassmorphism.length > 0) motionParts.push('glassmorphism (' + glassmorphism.length + ' layers)');
+    if (meshGradients.length > 0) motionParts.push('mesh gradients');
+    if (clipPaths.length > 0) motionParts.push('non-rectangular shapes (' + clipPaths.length + ')');
+    if (mixBlendModes.length > 0) motionParts.push('blend modes');
+    if (hasCSSScrollTimeline) motionParts.push('CSS scroll-driven animations');
+    if (hasIntersectionObserver) motionParts.push('scroll-triggered reveal');
+    var motionSummary = motionParts.length > 0 ? motionParts.join(', ') : 'standard CSS transitions only';
+
+    return {
+      hasCanvas: hasCanvas,
+      hasWebGL: hasWebGL,
+      hasSVGAnimations: hasSVGAnimations,
+      glassmorphism: glassmorphism.slice(0, 5),
+      meshGradients: meshGradients.slice(0, 5),
+      clipPaths: clipPaths.slice(0, 8),
+      mixBlendModes: mixBlendModes.slice(0, 8),
+      backdropFilters: backdropFilters.slice(0, 8),
+      scrollAnimations: { cssScrollTimeline: hasCSSScrollTimeline, intersectionObserver: hasIntersectionObserver },
+      cssVariableAnimations: cssVariableAnimations.slice(0, 5),
+      motionSummary: motionSummary,
+    };
+  })()`) as unknown as VisualEffects;
+}