webperf-snippets 0.1.0

package/snippets/Loading/Client-Side-Redirect-Detection.js

@@ -0,0 +1,337 @@
+// Client-Side Redirect Detection
+// https://webperf-snippets.nucliweb.net
+
+(async () => {
+  const navEntries = performance.getEntriesByType('navigation');
+
+  if (navEntries.length === 0) {
+    console.log(
+      '%c⚠️ Navigation Timing not available',
+      'color: #f59e0b; font-weight: bold;'
+    );
+    return { script: "Client-Side-Redirect-Detection", status: "unsupported", error: "Navigation Timing not available" };
+  }
+
+  const navEntry = navEntries[0];
+  const currentURL = new URL(window.location.href);
+  const resources = performance.getEntriesByType('resource');
+
+  // Check for document navigations (only navigation type, exclude iframes)
+  // Filter out third-party iframes (analytics, ads, etc.)
+  const documentNavigations = resources.filter(
+    (r) => {
+      if (r.initiatorType !== 'navigation') return false;
+
+      // Only count same-origin navigations as potential redirects
+      try {
+        const resourceURL = new URL(r.name);
+        return resourceURL.origin === currentURL.origin;
+      } catch {
+        return false;
+      }
+    }
+  );
+
+  // Check for server-side redirects
+  const serverRedirects = navEntry.redirectCount || 0;
+  const redirectTime = navEntry.redirectEnd - navEntry.redirectStart;
+
+  // Detect client-side redirect patterns
+  const hasSPARouter = !!window.history?.state;
+  const historyLength = window.history.length;
+
+  // Check document.referrer for same-origin navigation
+  const referrer = document.referrer ? new URL(document.referrer) : null;
+  const sameOrigin = referrer && referrer.origin === currentURL.origin;
+  const referrerPath = referrer?.pathname || '';
+  const currentPath = currentURL.pathname;
+
+  // Detect redirect indicators
+  const hasRedirectParam =
+    currentURL.searchParams.has('redirect') ||
+    currentURL.searchParams.has('from') ||
+    currentURL.searchParams.has('origin');
+
+  console.group(
+    '%c🔄 Client-Side Redirect Detection',
+    'font-weight: bold; font-size: 14px;'
+  );
+
+  // Current page info
+  console.log('');
+  console.log('%c📍 Current Page:', 'font-weight: bold;');
+  console.log(`   URL: ${currentURL.href}`);
+  console.log(`   Path: ${currentPath}`);
+  if (referrer) {
+    console.log(`   Referrer: ${referrer.href}`);
+    console.log(`   Referrer path: ${referrerPath}`);
+  } else {
+    console.log('   Referrer: (none - direct navigation or blocked)');
+  }
+
+  // Server-side redirects
+  console.log('');
+  console.log('%c🌐 Server-Side Redirects:', 'font-weight: bold;');
+  if (serverRedirects > 0) {
+    console.log(`%c   ⚠️ ${serverRedirects} redirect(s) detected`, 'color: #f59e0b;');
+    console.log(`   Redirect time: ${redirectTime.toFixed(1)}ms`);
+    console.log('   💡 Minimize redirect chains for better performance');
+  } else {
+    console.log('%c   ✅ No server-side redirects', 'color: #22c55e;');
+  }
+
+  // Client-side navigation detection
+  console.log('');
+  console.log('%c📱 Client-Side Navigation Indicators:', 'font-weight: bold;');
+
+  let hasClientRedirect = false;
+  const indicators = [];
+
+  // Check 1: Same-origin referrer with different path (potential redirect)
+  if (sameOrigin && referrerPath !== currentPath && referrerPath !== '') {
+    hasClientRedirect = true;
+    indicators.push({
+      type: 'Same-origin navigation',
+      from: referrerPath,
+      to: currentPath,
+      severity: 'warning'
+    });
+  }
+
+  // Check 2: Document navigations in resource timing
+  if (documentNavigations.length > 0) {
+    hasClientRedirect = true;
+    documentNavigations.forEach((nav) => {
+      indicators.push({
+        type: 'Document navigation',
+        url: nav.name,
+        duration: nav.duration.toFixed(1) + 'ms',
+        severity: 'error'
+      });
+    });
+  }
+
+  // Check 3: Redirect URL parameters
+  if (hasRedirectParam) {
+    indicators.push({
+      type: 'Redirect parameter in URL',
+      params: Array.from(currentURL.searchParams.entries())
+        .filter(([key]) =>
+          key.toLowerCase().includes('redirect') ||
+          key.toLowerCase().includes('from') ||
+          key.toLowerCase().includes('origin')
+        )
+        .map(([key, val]) => `${key}=${val}`)
+        .join(', '),
+      severity: 'info'
+    });
+  }
+
+  // Check 4: SPA router state
+  if (hasSPARouter && historyLength > 1) {
+    indicators.push({
+      type: 'SPA router detected',
+      historyLength: historyLength,
+      state: JSON.stringify(window.history.state)?.slice(0, 100) || '{}',
+      severity: 'info'
+    });
+  }
+
+  // Check 5: Very fast navigation with minimal content (possible JS redirect)
+  const navDuration = navEntry.loadEventEnd - navEntry.startTime;
+  const domContentLoaded = navEntry.domContentLoadedEventEnd - navEntry.startTime;
+  const responseSize = navEntry.transferSize || navEntry.encodedBodySize || 0;
+
+  // Only flag if it's BOTH fast AND small (likely a redirect page)
+  if (sameOrigin && domContentLoaded < 500 && responseSize < 10000) {
+    indicators.push({
+      type: 'Fast minimal-content navigation',
+      duration: domContentLoaded.toFixed(1) + 'ms',
+      size: (responseSize / 1024).toFixed(1) + ' KB',
+      note: 'Small page that loads quickly - possible redirect page',
+      severity: 'warning'
+    });
+  }
+
+  if (indicators.length === 0) {
+    console.log('%c   ✅ No client-side redirect detected', 'color: #22c55e;');
+  } else {
+    console.log(
+      `%c   ⚠️ ${indicators.length} indicator(s) found`,
+      'color: #f59e0b;'
+    );
+    console.log('');
+    indicators.forEach((indicator, index) => {
+      const icon =
+        indicator.severity === 'error' ? '🔴' :
+        indicator.severity === 'warning' ? '⚠️' : 'ℹ️';
+
+      console.log(`   ${icon} ${indicator.type}`);
+      Object.entries(indicator).forEach(([key, value]) => {
+        if (key !== 'type' && key !== 'severity') {
+          console.log(`      ${key}: ${value}`);
+        }
+      });
+      if (index < indicators.length - 1) console.log('');
+    });
+  }
+
+  // LCP Impact Analysis
+  if (hasClientRedirect && documentNavigations.length > 0) {
+    console.log('');
+    console.log('%c⚡ Performance Impact:', 'font-weight: bold;');
+
+    const totalRedirectOverhead = documentNavigations.reduce(
+      (sum, nav) => sum + nav.duration,
+      0
+    );
+
+    console.log(`   Total redirect overhead: ${totalRedirectOverhead.toFixed(0)}ms`);
+
+    if (totalRedirectOverhead > 3000) {
+      console.log(
+        '%c   🔴 CRITICAL: High impact on LCP',
+        'color: #ef4444; font-weight: bold;'
+      );
+      console.log('   💡 This redirect adds significant delay to page load');
+    } else if (totalRedirectOverhead > 1000) {
+      console.log(
+        '%c   🟡 MODERATE: Noticeable impact on LCP',
+        'color: #f59e0b;'
+      );
+    } else {
+      console.log('%c   🟢 Low impact', 'color: #22c55e;');
+    }
+  }
+
+  // Recommendations
+  const hasDocumentNavigation = documentNavigations.length > 0;
+  const hasSameOriginRedirect = sameOrigin && referrerPath !== currentPath && referrerPath !== '';
+  if (hasDocumentNavigation || serverRedirects > 0) {
+    console.log('');
+    console.log('%c💡 Recommendations:', 'font-weight: bold;');
+
+    if (serverRedirects > 0) {
+      console.log('');
+      console.log('   Server-side redirects detected:');
+      console.log('   • Minimize redirect chains');
+      console.log('   • Use direct links when possible');
+      console.log('   • Cache redirect responses with appropriate headers');
+    }
+
+    if (hasDocumentNavigation) {
+      console.log('');
+      console.log('   Client-side redirect detected:');
+      console.log('   • Replace with server-side 301/302 redirects for better performance');
+
+      if (referrerPath && currentPath) {
+        console.log('');
+        console.log('   Example Nginx config:');
+        console.log('     %clocation = ' + referrerPath + ' {', 'color: #3b82f6; font-family: monospace;');
+        console.log('     %c  return 301 ' + currentPath + ';', 'color: #3b82f6; font-family: monospace;');
+        console.log('     %c}', 'color: #3b82f6; font-family: monospace;');
+
+        if (referrerPath === '/' && currentPath.match(/^\/[a-z]{2}\//)) {
+          console.log('');
+          console.log('   Or with language detection:');
+          console.log('     %cmap $http_accept_language $lang {', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %c  default ' + currentPath.split('/')[1] + ';', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %c  ~*^en en;', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %c}', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %clocation = / {', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %c  return 301 /$lang/;', 'color: #3b82f6; font-family: monospace;');
+          console.log('     %c}', 'color: #3b82f6; font-family: monospace;');
+        }
+      }
+    } else if (hasSameOriginRedirect) {
+      console.log('');
+      console.log('   Same-origin navigation detected (no document navigation overhead):');
+      console.log('   • This may be SPA routing or a fast redirect');
+      console.log('   • If this is intentional SPA behavior, no action needed');
+      console.log('   • If this is a redirect, consider server-side 301/302 for consistency');
+    }
+  }
+
+  // Detailed timing breakdown
+  console.log('');
+  console.log('%c⏱️ Navigation Timing:', 'font-weight: bold;');
+  console.table({
+    'TTFB': `${(navEntry.responseStart - navEntry.startTime).toFixed(1)}ms`,
+    'DOM Content Loaded': `${domContentLoaded.toFixed(1)}ms`,
+    'Load Complete': `${navDuration.toFixed(1)}ms`,
+    'Redirect Time': serverRedirects > 0 ? `${redirectTime.toFixed(1)}ms` : 'N/A',
+    'DNS Lookup': `${(navEntry.domainLookupEnd - navEntry.domainLookupStart).toFixed(1)}ms`,
+    'TCP Connect': `${(navEntry.connectEnd - navEntry.connectStart).toFixed(1)}ms`,
+    'Request/Response': `${(navEntry.responseEnd - navEntry.requestStart).toFixed(1)}ms`,
+  });
+
+  // Resource timing for document navigations
+  if (documentNavigations.length > 0) {
+    console.log('');
+    console.log(
+      '%c🔴 Same-Origin Document Navigations Detected (Potential Client-Side Redirects):',
+      'font-weight: bold; color: #ef4444;'
+    );
+    console.log('');
+    console.log(
+      '   These are same-origin navigations that suggest client-side redirects.'
+    );
+    console.log(
+      '   If these are not expected, consider replacing with server-side redirects.'
+    );
+    console.log('');
+    console.table(
+      documentNavigations.map((nav) => ({
+        'Type': nav.initiatorType,
+        'Duration (ms)': nav.duration.toFixed(1),
+        'TTFB (ms)': (nav.responseStart - nav.startTime).toFixed(1),
+        'Transfer (KB)': nav.transferSize > 0 ? (nav.transferSize / 1024).toFixed(1) : '0',
+        'URL': nav.name.length > 60 ? '...' + nav.name.slice(-57) : nav.name,
+      }))
+    );
+  }
+
+  console.log('');
+
+  if (hasDocumentNavigation) {
+    console.log(
+      '%cℹ️ Note: Document navigations detected indicate actual client-side redirects. ' +
+      'For best performance, replace with server-side 301/302 redirects.',
+      'color: #6b7280; font-style: italic;'
+    );
+  } else if (hasSameOriginRedirect) {
+    console.log(
+      '%cℹ️ Note: Same-origin navigation detected without document navigation overhead. ' +
+      'This may be SPA routing or browser navigation, which is typically acceptable.',
+      'color: #6b7280; font-style: italic;'
+    );
+  } else {
+    console.log(
+      '%cℹ️ Note: No client-side redirects detected. ' +
+      'The current page was loaded directly or through server-side redirects.',
+      'color: #6b7280; font-style: italic;'
+    );
+  }
+
+  console.groupEnd();
+
+  return {
+    script: "Client-Side-Redirect-Detection",
+    status: "ok",
+    details: {
+      serverRedirects,
+      redirectTimeMs: Math.round(redirectTime),
+      clientRedirectIndicators: indicators.length,
+      documentNavigations: documentNavigations.length,
+      hasSPARouter,
+      historyLength,
+      currentPath,
+      referrerPath,
+    },
+    issues: [
+      ...(serverRedirects > 0 ? [{ severity: "warning", message: `${serverRedirects} server-side redirect(s) detected (${Math.round(redirectTime)}ms)` }] : []),
+      ...(documentNavigations.length > 0 ? [{ severity: "error", message: `${documentNavigations.length} same-origin document navigation(s) detected — likely client-side redirect` }] : []),
+      ...indicators.filter(i => i.severity === "warning").map(i => ({ severity: "warning", message: i.type })),
+    ],
+  };
+})();

package/snippets/Loading/Content-Visibility.js

@@ -0,0 +1,352 @@
+// Detect elements with content-visibility: auto and analyze optimization opportunities
+
+function detectContentVisibility() {
+  // Create an object to store the results
+  const results = {
+    autoElements: [],
+    hiddenElements: [],
+    visibleElements: [],
+    nodeArray: [],
+  };
+
+  // Get the name of the node
+  function getName(node) {
+    const name = node.nodeName;
+    return node.nodeType === 1 ? name.toLowerCase() : name.toUpperCase().replace(/^#/, "");
+  }
+
+  // Get the selector for an element
+  function getSelector(node) {
+    let sel = "";
+
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const part = el.id
+          ? "#" + el.id
+          : getName(el) +
+            (el.classList &&
+            el.classList.value &&
+            el.classList.value.trim() &&
+            el.classList.value.trim().length
+              ? "." + el.classList.value.trim().replace(/\s+/g, ".")
+              : "");
+        if (sel.length + part.length > 100 - 1) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch {
+      // Do nothing...
+    }
+    return sel;
+  }
+
+  // Check if element is in viewport
+  function isInViewport(element) {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top < window.innerHeight &&
+      rect.bottom > 0 &&
+      rect.left < window.innerWidth &&
+      rect.right > 0
+    );
+  }
+
+  // Get element dimensions and position
+  function getElementInfo(node) {
+    const rect = node.getBoundingClientRect();
+    const cs = window.getComputedStyle(node);
+
+    return {
+      selector: getSelector(node),
+      contentVisibility: cs["content-visibility"],
+      containIntrinsicSize: cs["contain-intrinsic-size"] || "not set",
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      top: Math.round(rect.top + window.scrollY),
+      inViewport: isInViewport(node),
+    };
+  }
+
+  // Recursively find all elements with content-visibility
+  function findContentVisibilityElements(node) {
+    const cs = window.getComputedStyle(node);
+    const cv = cs["content-visibility"];
+
+    if (cv && cv !== "visible") {
+      const info = getElementInfo(node);
+
+      if (cv === "auto") {
+        results.autoElements.push(info);
+        results.nodeArray.push(node);
+      } else if (cv === "hidden") {
+        results.hiddenElements.push(info);
+      }
+    }
+
+    for (let i = 0; i < node.children.length; i++) {
+      findContentVisibilityElements(node.children[i]);
+    }
+  }
+
+  // Run the detection
+  findContentVisibilityElements(document.body);
+
+  // Display results
+  console.group("🔍 Content-Visibility Detection");
+
+  if (results.autoElements.length === 0 && results.hiddenElements.length === 0) {
+    console.log("%cNo content-visibility usage found.", "color: orange; font-weight: bold;");
+    console.log("");
+    console.log("💡 Consider applying content-visibility: auto to:");
+    console.log("   • Footer sections");
+    console.log("   • Below-the-fold content");
+    console.log("   • Long lists or card grids");
+    console.log("   • Tab content that is not initially visible");
+    console.log("   • Accordion/collapsible content");
+  } else {
+    // Auto elements
+    if (results.autoElements.length > 0) {
+      console.group("✅ content-visibility: auto");
+      console.log(`Found ${results.autoElements.length} element(s)`);
+      console.table(results.autoElements);
+      console.groupEnd();
+    }
+
+    // Hidden elements
+    if (results.hiddenElements.length > 0) {
+      console.group("🔒 content-visibility: hidden");
+      console.log(`Found ${results.hiddenElements.length} element(s)`);
+      console.table(results.hiddenElements);
+      console.groupEnd();
+    }
+
+    // Check for missing contain-intrinsic-size
+    const missingIntrinsicSize = results.autoElements.filter(
+      (el) => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none",
+    );
+
+    if (missingIntrinsicSize.length > 0) {
+      console.group("⚠️ Missing contain-intrinsic-size");
+      console.log(
+        "%cThese elements lack contain-intrinsic-size, which may cause layout shifts:",
+        "color: #f59e0b; font-weight: bold",
+      );
+      console.table(
+        missingIntrinsicSize.map((el) => ({
+          selector: el.selector,
+          height: el.height + "px",
+        })),
+      );
+      console.log("");
+      console.log("💡 Add contain-intrinsic-size to prevent CLS:");
+      console.log("   contain-intrinsic-size: auto 500px;");
+      console.groupEnd();
+    }
+
+    // Nodes for inspection
+    console.group("🔎 Elements for inspection");
+    console.log("Click to expand and inspect in Elements panel:");
+    results.nodeArray.forEach((node, i) => {
+      console.log(`${i + 1}. `, node);
+    });
+    console.groupEnd();
+  }
+
+  console.groupEnd();
+
+  return results;
+}
+
+// Analyze opportunities for content-visibility optimization
+// Options:
+//   - threshold: distance from viewport bottom to consider "offscreen" (default: 0)
+//   - minHeight: minimum element height in px (default: 100)
+//   - minChildren: minimum child elements to be considered (default: 5)
+function analyzeContentVisibilityOpportunities(options = {}) {
+  const { threshold = 0, minHeight = 100, minChildren = 5 } = options;
+
+  const viewportHeight = window.innerHeight;
+  const opportunities = [];
+  const processedElements = new Set();
+
+  function getSelector(node) {
+    let sel = "";
+    try {
+      while (node && node.nodeType !== 9) {
+        const el = node;
+        const name = el.nodeName.toLowerCase();
+        const part = el.id
+          ? "#" + el.id
+          : name +
+            (el.classList && el.classList.value && el.classList.value.trim()
+              ? "." + el.classList.value.trim().split(/\s+/).slice(0, 2).join(".")
+              : "");
+        if (sel.length + part.length > 80) return sel || part;
+        sel = sel ? part + ">" + sel : part;
+        if (el.id) break;
+        node = el.parentNode;
+      }
+    } catch {}
+    return sel;
+  }
+
+  function estimateRenderSavings(childCount) {
+    const baseMs = childCount * 0.2;
+    if (baseMs < 5) return "Low (~" + baseMs.toFixed(1) + "ms)";
+    if (baseMs < 20) return "Medium (~" + baseMs.toFixed(1) + "ms)";
+    return "High (~" + baseMs.toFixed(1) + "ms)";
+  }
+
+  function isAncestorProcessed(el) {
+    let parent = el.parentElement;
+    while (parent) {
+      if (processedElements.has(parent)) return true;
+      parent = parent.parentElement;
+    }
+    return false;
+  }
+
+  function analyzeElement(el) {
+    // Skip already processed or descendant of processed
+    if (processedElements.has(el) || isAncestorProcessed(el)) return;
+
+    const rect = el.getBoundingClientRect();
+    const cs = window.getComputedStyle(el);
+
+    // Skip if already using content-visibility
+    if (cs["content-visibility"] && cs["content-visibility"] !== "visible") return;
+
+    // Skip elements not meeting size criteria
+    if (rect.height < minHeight || rect.width === 0) return;
+
+    // Check if element is below the viewport + threshold
+    const distanceFromViewport = rect.top - viewportHeight;
+    if (distanceFromViewport < threshold) return;
+
+    const childCount = el.querySelectorAll("*").length;
+
+    // Skip elements with too few children
+    if (childCount < minChildren) return;
+
+    processedElements.add(el);
+
+    opportunities.push({
+      selector: getSelector(el),
+      height: Math.round(rect.height) + "px",
+      distanceFromViewport: Math.round(distanceFromViewport) + "px",
+      childElements: childCount,
+      estimatedSavings: estimateRenderSavings(childCount),
+      element: el,
+    });
+  }
+
+  // Walk all elements in the DOM
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false);
+
+  while (walker.nextNode()) {
+    analyzeElement(walker.currentNode);
+  }
+
+  // Sort by child count (highest impact first)
+  opportunities.sort((a, b) => b.childElements - a.childElements);
+
+  // Display results
+  console.group("💡 Content-Visibility Opportunities");
+  console.log(
+    `%cSettings: threshold=${threshold}px, minHeight=${minHeight}px, minChildren=${minChildren}`,
+    "color: #888;",
+  );
+  console.log("");
+
+  if (opportunities.length === 0) {
+    console.log("%c✅ No opportunities found with current settings.", "color: #22c55e; font-weight: bold");
+    console.log("Try adjusting: analyzeContentVisibilityOpportunities({ threshold: -200, minHeight: 50, minChildren: 3 })");
+  } else {
+    console.log(
+      `%cFound ${opportunities.length} element(s) that could benefit from content-visibility: auto`,
+      "font-weight: bold;",
+    );
+    console.log("");
+
+    // Show table without element reference
+    const tableData = opportunities.slice(0, 20).map((opportunity) => ({
+      selector: opportunity.selector,
+      height: opportunity.height,
+      distanceFromViewport: opportunity.distanceFromViewport,
+      childElements: opportunity.childElements,
+      estimatedSavings: opportunity.estimatedSavings,
+    }));
+    console.table(tableData);
+
+    if (opportunities.length > 20) {
+      console.log(`... and ${opportunities.length - 20} more elements`);
+    }
+
+    // Log elements for inspection
+    console.log("");
+    console.group("🔎 Elements for inspection");
+    opportunities.slice(0, 10).forEach((opp, i) => {
+      console.log(`${i + 1}. `, opp.element);
+    });
+    console.groupEnd();
+
+    console.log("");
+    console.group("📝 Implementation Example");
+    console.log("Add this CSS to optimize rendering:");
+    console.log("");
+    console.log(
+      "%c/* Optimize offscreen content */\n" +
+        ".your-selector {\n" +
+        "  content-visibility: auto;\n" +
+        "  contain-intrinsic-size: auto 500px; /* Use actual height */\n" +
+        "}",
+      "font-family: monospace; background: #1e1e1e; color: #9cdcfe; padding: 10px; border-radius: 4px;",
+    );
+    console.groupEnd();
+  }
+
+  console.groupEnd();
+
+  return {
+    opportunities: opportunities.map((opportunity) => ({
+      selector: opportunity.selector,
+      height: opportunity.height,
+      distanceFromViewport: opportunity.distanceFromViewport,
+      childElements: opportunity.childElements,
+      estimatedSavings: opportunity.estimatedSavings,
+    })),
+    totalElements: opportunities.length,
+    highImpact: opportunities.filter((o) => o.estimatedSavings.startsWith("High")).length,
+    elements: opportunities.map((o) => o.element),
+  };
+}
+
+window.analyzeContentVisibilityOpportunities = analyzeContentVisibilityOpportunities;
+
+// Run detection
+(() => {
+  const cvResults = detectContentVisibility();
+  console.log(
+    "%c\n To find optimization opportunities, run: %canalyzeContentVisibilityOpportunities()",
+    "color: #3b82f6; font-weight: bold;",
+    "color: #22c55e; font-weight: bold; font-family: monospace;"
+  );
+  return {
+    script: "Content-Visibility",
+    status: "ok",
+    count: cvResults.autoElements.length + cvResults.hiddenElements.length,
+    details: {
+      autoCount: cvResults.autoElements.length,
+      hiddenCount: cvResults.hiddenElements.length,
+    },
+    items: [
+      ...cvResults.autoElements.map(el => ({ ...el, type: "auto" })),
+      ...cvResults.hiddenElements.map(el => ({ ...el, type: "hidden" })),
+    ],
+    issues: cvResults.autoElements
+      .filter(el => el.containIntrinsicSize === "not set" || el.containIntrinsicSize === "none")
+      .map(el => ({ severity: "warning", message: `${el.selector}: missing contain-intrinsic-size (CLS risk)` })),
+  };
+})();