@wix/agent-skills 1.35.1 → 1.36.1

package/skills/wix-headless-replatform/scripts/extract-interactions.mjs

@@ -1,1903 +0,0 @@
-#!/usr/bin/env node
-import path from "node:path";
-import {
-  docsDir,
-  ensureDir,
-  fetchText,
-  normalizeUrl,
-  parseArgs,
-  readJson,
-  resolveOutputDir,
-  writeJson,
-} from "./lib/common.mjs";
-import { extractStylesheetUrls } from "./lib/html-extract.mjs";
-import { loadPlaywrightFromContext, resolveBrowserToolingContext } from "./lib/browser-tooling.mjs";
-import {
-  DEFAULT_INTERACTION_TIMELINE_MS,
-  compactInteractionTimeline,
-  deriveCarouselInvariants,
-  deriveScrollInvariants,
-} from "./lib/interaction-timeline.mjs";
-
-const GENERIC_SELECTORS = new Set(["*", "body", "html", ":root", "main"]);
-const CSS_SIGNAL_PROPS = [
-  "transition",
-  "transition-property",
-  "transition-duration",
-  "animation",
-  "animation-name",
-  "animation-duration",
-  "transform",
-  "opacity",
-  "filter",
-  "will-change",
-  "scroll-behavior",
-];
-const SNAPSHOT_STYLE_KEYS = [
-  "opacity",
-  "transform",
-  "backgroundColor",
-  "color",
-  "boxShadow",
-  "filter",
-  "width",
-  "height",
-  "borderColor",
-  "borderTopColor",
-  "borderRightColor",
-  "borderBottomColor",
-  "borderLeftColor",
-  "borderTopWidth",
-  "borderRightWidth",
-  "borderBottomWidth",
-  "borderLeftWidth",
-  "textDecorationLine",
-  "textDecorationColor",
-  "textDecorationThickness",
-  "textUnderlineOffset",
-  "outlineColor",
-  "outlineStyle",
-  "outlineWidth",
-  "outlineOffset",
-  "fill",
-  "stroke",
-  "translate",
-  "scale",
-  "cursor",
-  "transitionProperty",
-  "transitionDuration",
-  "transitionTimingFunction",
-];
-
-async function main() {
-  const args = parseArgs();
-  const sourceUrl = normalizeUrl(args._[0] || args.url).toString();
-  const outputDir = resolveOutputDir(sourceUrl, args.out);
-  const docs = docsDir(outputDir);
-  const pagesDir = path.join(docs, "pages");
-  const pages = [];
-  if (args.page) {
-    pages.push(await readJson(path.resolve(args.page)));
-  } else {
-    try {
-      const defaultPage = path.join(pagesDir, "home-home.json");
-      pages.push(await readJson(defaultPage));
-    } catch {
-      // Page records are optional when running the extractor standalone.
-    }
-  }
-  const interactionMap = await extractInteractions(sourceUrl, {
-    outputDir,
-    pages,
-    browserTooling: args["project-root"]
-      ? await resolveBrowserToolingContext({ startDir: path.resolve(args["project-root"]) })
-      : undefined,
-  });
-  await writeJson(path.join(docs, "interaction-map.json"), interactionMap);
-  if (pages.length) {
-    for (const page of interactionMap.pages || []) {
-      await writeJson(path.join(pagesDir, `${safePageName(page)}.json`), page);
-    }
-  }
-  if (args.json) process.stdout.write(`${JSON.stringify(interactionMap, null, 2)}\n`);
-}
-
-export async function extractInteractions(sourceUrl, { outputDir, pages = [], browserTooling } = {}) {
-  const url = normalizeUrl(sourceUrl).toString();
-  await writeProgress(outputDir, "fetching_html");
-  const html = await fetchText(url);
-  await writeProgress(outputDir, "loading_stylesheets");
-  const stylesheets = await loadStylesheets(html, url);
-  await writeProgress(outputDir, "building_static_inventory");
-  const inlineStyles = extractInlineStyles(html, url);
-  const staticInventory = buildStaticInventory({ stylesheets, inlineStyles });
-  await writeProgress(outputDir, "starting_dynamic_probe", {
-    candidateCount: staticInventory.candidates.length,
-  });
-  const runtime = await runDynamicProbe({
-    sourceUrl: url,
-    outputDir,
-    staticInventory,
-    browserTooling,
-  });
-  await writeProgress(outputDir, "assembling_interaction_map", {
-    captureCount: runtime.captures.length,
-  });
-  const interactions = [...runtime.captures, ...(runtime.specializedCaptures || [])].map((capture, index) => ({
-    id: capture.id || `interaction-${String(index + 1).padStart(3, "0")}`,
-    kind: classifyCapture(capture),
-    trigger: normalizeTrigger(capture.trigger),
-    importance: classifyImportance(capture),
-    sources: capture.sources || [],
-    changedProperties: (capture.diff?.changedProperties || []).map((item) => item.property),
-    textChanged: Boolean(capture.diff?.textChanged),
-    states: summarizeStates(capture),
-    implementationHint: implementationHintFor(capture),
-    evidence: capture.screenshot ? { screenshot: capture.screenshot } : {},
-    label: capture.label || "",
-    ...(capture.probeId ? { controlId: capture.probeId } : {}),
-    ...(capture.controlRole ? { controlRole: capture.controlRole } : {}),
-    ...(capture.controlScope ? { controlScope: capture.controlScope } : {}),
-    ...(capture.scope ? { scope: capture.scope } : {}),
-    ...(capture.timeline ? { timeline: capture.timeline } : {}),
-    ...(capture.invariants ? { invariants: capture.invariants } : {}),
-  }));
-  const enrichedPages = pages.map((page) => enrichPageRecord(page, { generatedAt: new Date().toISOString(), staticInventory, runtime }));
-  bindInteractionsToSections(interactions, enrichedPages);
-  const summaryKinds = interactions.reduce((acc, item) => {
-    acc[item.kind] = (acc[item.kind] || 0) + 1;
-    return acc;
-  }, {});
-  return {
-    sourceUrl: url,
-    generatedAt: new Date().toISOString(),
-    staticSummary: staticInventory.summary,
-    summary: {
-      interactionCount: interactions.length,
-      kinds: summaryKinds,
-      targetCount: runtime.summary.targetCount,
-      meaningfulCaptureCount: runtime.summary.meaningfulCaptureCount,
-    },
-    interactions,
-    structural: runtime.structural,
-    probeDiagnostics: runtime.probeDiagnostics || [],
-    pages: enrichedPages,
-  };
-}
-
-async function writeProgress(outputDir, stage, details = {}) {
-  if (!outputDir) return;
-  await writeJson(path.join(docsDir(outputDir), "interaction-progress.json"), {
-    stage,
-    updatedAt: new Date().toISOString(),
-    ...details,
-  });
-}
-
-async function loadStylesheets(html, sourceUrl) {
-  const urls = extractStylesheetUrls(html, sourceUrl);
-  const stylesheets = [];
-  for (const stylesheetUrl of urls.slice(0, 24)) {
-    try {
-      const cssText = await fetchText(stylesheetUrl, {
-        headers: { accept: "text/css,*/*;q=0.1" },
-      });
-      stylesheets.push({ url: stylesheetUrl, cssText, sourceType: "linked-stylesheet" });
-    } catch (error) {
-      stylesheets.push({ url: stylesheetUrl, cssText: "", sourceType: "linked-stylesheet", warning: error.message });
-    }
-  }
-  return stylesheets;
-}
-
-function extractInlineStyles(html, sourceUrl) {
-  const out = [];
-  const pattern = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
-  let match;
-  let index = 0;
-  while ((match = pattern.exec(html))) {
-    const cssText = String(match[1] || "").trim();
-    if (!cssText) continue;
-    index += 1;
-    out.push({
-      url: `${sourceUrl}#inline-style-${index}`,
-      cssText,
-      sourceType: "inline-style",
-    });
-  }
-  return out;
-}
-
-function buildStaticInventory({ stylesheets, inlineStyles }) {
-  const sources = [...stylesheets, ...inlineStyles];
-  const keyframes = [];
-  const rules = [];
-  const candidateMap = new Map();
-  for (const source of sources) {
-    const cssText = source.cssText || "";
-    if (!cssText) continue;
-    for (const match of cssText.matchAll(/@keyframes\s+([^{\s]+)\s*\{/g)) {
-      keyframes.push({ name: match[1], sourceUrl: source.url });
-    }
-    for (const rule of parseCssRules(cssText)) {
-      const signals = extractSignals(rule.declarations);
-      if (!signals.length) continue;
-      const pseudos = extractPseudos(rule.selector);
-      const baseSelector = normalizeSelector(rule.selector);
-      rules.push({ selector: rule.selector, baseSelector, sourceUrl: source.url, pseudos, signals });
-      if (!baseSelector) continue;
-      const key = `${baseSelector}\u0000${pseudos.sort().join(",")}`;
-      const existing = candidateMap.get(key) || {
-        baseSelector,
-        selectors: [],
-        pseudos: new Set(),
-        signals: new Set(),
-      };
-      existing.selectors.push(rule.selector);
-      for (const pseudo of pseudos) existing.pseudos.add(pseudo);
-      for (const signal of signals) existing.signals.add(signal);
-      candidateMap.set(key, existing);
-    }
-  }
-  const candidates = Array.from(candidateMap.values())
-    .map((candidate) => ({
-      baseSelector: candidate.baseSelector,
-      selectors: candidate.selectors.slice(0, 6),
-      pseudos: Array.from(candidate.pseudos),
-      signals: Array.from(candidate.signals),
-      likelyTriggers: inferTriggers(Array.from(candidate.pseudos), Array.from(candidate.signals)),
-    }))
-    .filter((candidate) => candidate.baseSelector && !GENERIC_SELECTORS.has(candidate.baseSelector))
-    .slice(0, 120);
-  return {
-    sourceCount: sources.length,
-    stylesheetCount: stylesheets.length,
-    inlineStyleCount: inlineStyles.length,
-    keyframes,
-    rules,
-    candidates,
-    summary: {
-      keyframeCount: keyframes.length,
-      ruleCount: rules.length,
-      candidateCount: candidates.length,
-    },
-  };
-}
-
-function parseCssRules(cssText) {
-  const rules = [];
-  const pattern = /([^{}@][^{}]*)\{([^{}]+)\}/g;
-  let match;
-  while ((match = pattern.exec(cssText))) {
-    const selector = String(match[1] || "").trim();
-    const declarations = String(match[2] || "").trim();
-    if (!selector || !declarations) continue;
-    rules.push({ selector, declarations });
-  }
-  return rules;
-}
-
-function extractSignals(declarations) {
-  const found = [];
-  const lowered = declarations.toLowerCase();
-  for (const prop of CSS_SIGNAL_PROPS) {
-    if (lowered.includes(`${prop}:`)) found.push(prop);
-  }
-  return Array.from(new Set(found));
-}
-
-function extractPseudos(selector) {
-  return Array.from(new Set((selector.match(/:(hover|focus-visible|focus-within|focus|active|target|checked)/g) || [])
-    .map((value) => value.slice(1))));
-}
-
-function normalizeSelector(selector) {
-  const cleaned = selector
-    .replace(/::?[\w-]+(?:\([^)]*\))?/g, "")
-    .replace(/\[[^\]]+\]/g, "")
-    .replace(/\s+/g, " ")
-    .split(",")[0]
-    .trim();
-  if (!cleaned || cleaned.startsWith("@")) return "";
-  return cleaned;
-}
-
-function inferTriggers(pseudos, signals) {
-  const triggers = new Set();
-  for (const pseudo of pseudos) {
-    if (pseudo === "hover") triggers.add("hover");
-    if (pseudo === "focus" || pseudo === "focus-visible" || pseudo === "focus-within") triggers.add("focus");
-    if (pseudo === "active") triggers.add("press");
-    if (pseudo === "checked" || pseudo === "target") triggers.add("click");
-  }
-  if (signals.includes("animation") || signals.includes("animation-name")) triggers.add("load");
-  return Array.from(triggers);
-}
-
-function redactProbeUrl(value) {
-  try {
-    const url = new URL(value);
-    for (const key of [...url.searchParams.keys()]) {
-      if (/token|key|secret|auth|password|session|email|code/i.test(key)) url.searchParams.set(key, "[redacted]");
-    }
-    return url.toString();
-  } catch {
-    return "[unparseable-url]";
-  }
-}
-
-async function runDynamicProbe({ sourceUrl, outputDir, staticInventory, browserTooling }) {
-  await writeProgress(outputDir, "resolving_browser_tooling");
-  const toolingContext = browserTooling || await resolveBrowserToolingContext({ startDir: process.cwd() });
-  await writeProgress(outputDir, "loading_playwright", { projectRoot: toolingContext.projectRoot });
-  const playwright = await loadPlaywrightFromContext(toolingContext);
-  await writeProgress(outputDir, "launching_browser");
-  const browser = await withTimeout(
-    playwright.chromium.launch({ headless: true }),
-    30_000,
-    "Chromium launch",
-  );
-  await writeProgress(outputDir, "creating_browser_page");
-  const page = await withTimeout(
-    browser.newPage({ viewport: { width: 1440, height: 900 } }),
-    30_000,
-    "Chromium page creation",
-  );
-  await writeProgress(outputDir, "browser_page_ready");
-  const screenshotsDir = path.join(docsDir(outputDir), "screenshots");
-  await ensureDir(screenshotsDir);
-  const blockedRequests = [];
-  const safeProbeRoute = async (route) => {
-    const request = route.request();
-    const method = request.method().toUpperCase();
-    if (request.isNavigationRequest() || !["GET", "HEAD", "OPTIONS"].includes(method)) {
-      blockedRequests.push({ method, url: redactProbeUrl(request.url()), reason: request.isNavigationRequest() ? "navigation-blocked" : "mutating-request-blocked" });
-      await route.abort("blockedbyclient");
-      return;
-    }
-    await route.continue();
-  };
-  try {
-    await writeProgress(outputDir, "loading_source_page");
-    await page.goto(sourceUrl, { waitUntil: "domcontentloaded", timeout: 45000 });
-    await writeProgress(outputDir, "capturing_dynamic_interactions");
-    await page.waitForTimeout(2600);
-    await page.route("**/*", safeProbeRoute);
-    const ignoredSurfaces = await markIgnoredConsentSurfaces(page);
-    const liveAnimationSnapshot = await page.evaluate(() =>
-      document.getAnimations().map((animation) => ({
-        playState: animation.playState,
-        currentTime: animation.currentTime,
-        effectTarget: animation.effect?.target?.tagName?.toLowerCase() || "",
-      })),
-    );
-    const targets = await tagProbeTargets(page, staticInventory.candidates);
-    const captures = [];
-    const probeDiagnostics = [];
-    for (const [targetIndex, target] of targets.slice(0, 28).entries()) {
-      const triggerOrder = target.triggers.includes("hover")
-        ? ["hover", ...target.triggers.filter((item) => item !== "hover")]
-        : target.triggers;
-      for (const trigger of triggerOrder.slice(0, 4)) {
-        await writeProgress(outputDir, "capturing_dynamic_interaction", {
-          targetIndex: targetIndex + 1,
-          targetCount: Math.min(targets.length, 28),
-          probeId: target.probeId,
-          trigger,
-        });
-        const capture = await captureInteractionBounded(page, target, trigger, screenshotsDir);
-        probeDiagnostics.push({ probeId: target.probeId, label: target.text, role: target.role, scope: target.scope, trigger, meaningful: Boolean(capture.meaningful), error: capture.error || null, changedProperties: (capture.diff?.changedProperties || []).map((item) => item.property) });
-        if (capture.meaningful) captures.push(capture);
-      }
-    }
-    // Generic probes scroll and mutate controls. Reset before scene probes so initial
-    // header, tab, and carousel states are not contaminated by probe order.
-    await page.evaluate(() => {
-      if ("scrollRestoration" in history) history.scrollRestoration = "manual";
-      window.scrollTo(0, 0);
-    });
-    await page.unroute("**/*", safeProbeRoute);
-    await page.reload({ waitUntil: "domcontentloaded", timeout: 45000 });
-    await page.route("**/*", safeProbeRoute);
-    await page.waitForTimeout(1800);
-    await page.evaluate(() => window.scrollTo(0, 0));
-    await page.waitForTimeout(400);
-    await markIgnoredConsentSurfaces(page);
-    const headerScroll = await probeHeaderScrollState(page, screenshotsDir);
-    const scrollTabs = await probeScrollTabsState(page, screenshotsDir);
-    const carousels = await probeCarouselStates(page, screenshotsDir);
-    const specialized = {
-      headerScroll,
-      scrollTabs,
-      carousel: carousels[0] || { missing: true },
-      carousels,
-    };
-    const structural = await page.evaluate(() => {
-      const visible = (node) => {
-        if (!(node instanceof Element)) return false;
-        if (node.closest("[data-rp-ignored-surface]")) return false;
-        const rect = node.getBoundingClientRect();
-        const style = getComputedStyle(node);
-        return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
-      };
-      const canonicalMediaSource = (value) => {
-        const raw = String(value || "").trim();
-        if (!raw) return raw;
-        try {
-          const url = new URL(raw, window.location.href);
-          url.search = url.search.replace(/\?([^?]*)\?/g, "?$1&");
-          return url.toString();
-        } catch {
-          return raw;
-        }
-      };
-      const tabs = Array.from(document.querySelectorAll("[role='tab'], [aria-controls], [data-tab], [data-panel]"))
-        .filter(visible)
-        .map((node) => node.textContent?.replace(/\s+/g, " ").trim())
-        .filter(Boolean);
-      const media = Array.from(document.querySelectorAll("iframe, video, canvas, [data-lottie], [class*='lottie']"))
-        .filter(visible)
-        .map((node, index) => {
-          const src = canonicalMediaSource(node.currentSrc || node.getAttribute("src") || node.getAttribute("data-src") || "");
-          let provider = "";
-          let playback = {};
-          try {
-            const url = new URL(src, window.location.href);
-            provider = /vimeo\.com/i.test(url.hostname) ? "vimeo" : /youtube\.com|youtu\.be/i.test(url.hostname) ? "youtube" : url.hostname;
-            playback = {
-              autoplay: url.searchParams.get("autoplay") === "1",
-              loop: url.searchParams.get("loop") === "1",
-              muted: url.searchParams.get("muted") === "1",
-              background: url.searchParams.get("background") === "1",
-            };
-          } catch {
-            // A relative or deferred source is still useful to the implementation agent.
-          }
-          const parent = node.parentElement;
-          const owner = node.closest("section,header,footer,main") || parent;
-          const classTokens = String(node.className || "").split(/\s+/).filter(Boolean);
-          const mediaStyle = getComputedStyle(node);
-          let fallbackSource = canonicalMediaSource(node.getAttribute("poster") || node.getAttribute("data-poster") || "");
-          let fallbackOrigin = fallbackSource ? "media-attribute" : "";
-          if (!fallbackSource) {
-            for (let current = parent; current && current !== owner?.parentElement; current = current.parentElement) {
-              const backgroundImage = getComputedStyle(current).backgroundImage || "";
-              const match = backgroundImage.match(/url\(["']?([^"')]+)["']?\)/i);
-              if (match?.[1]) {
-                fallbackSource = canonicalMediaSource(match[1]);
-                fallbackOrigin = "ancestor-background";
-                break;
-              }
-              if (current === owner) break;
-            }
-          }
-          const visiblyComposite = Number(mediaStyle.opacity || 1) < 0.99 || (mediaStyle.mixBlendMode && mediaStyle.mixBlendMode !== "normal");
-          return {
-            id: `media-${String(index + 1).padStart(3, "0")}`,
-            tag: node.tagName.toLowerCase(),
-            src,
-            provider,
-            playback,
-            role: playback.background || /hero|background|scene|scroll|cover/i.test(`${classTokens.join(" ")} ${parent?.className || ""}`) ? "background" : node.tagName.toLowerCase() === "canvas" ? "runtime-surface" : "inline",
-            presentation: {
-              opacity: mediaStyle.opacity,
-              mixBlendMode: mediaStyle.mixBlendMode,
-            },
-            ...(fallbackSource ? {
-              fallback: {
-                src: fallbackSource,
-                origin: fallbackOrigin,
-                policy: visiblyComposite ? "composite" : "fallback-only",
-              },
-            } : {}),
-            domRef: {
-              id: node.id || "",
-              classTokens: classTokens.slice(0, 8),
-              parentClassTokens: String(parent?.className || "").split(/\s+/).filter(Boolean).slice(0, 8),
-              sectionClassTokens: String(owner?.className || "").split(/\s+/).filter(Boolean).slice(0, 12),
-              sectionTextFingerprint: String(owner?.textContent || "").replace(/\s+/g, " ").trim().slice(0, 180),
-            },
-          };
-        });
-      return {
-        tabLabels: tabs.slice(0, 12),
-        embedCount: media.length,
-        media,
-      };
-    });
-    structural.ignoredSurfaces = ignoredSurfaces;
-    const specializedCaptures = deriveSpecializedCaptures({ ...specialized, media: structural.media });
-    return {
-      liveAnimationSnapshot,
-      targets,
-      captures,
-      probeDiagnostics,
-      safeProbeAudit: {
-        policy: "public-presentation-controls-only",
-        blockedRequests,
-        actionBudget: { targetLimit: 28, triggerLimitPerTarget: 4, probeTimeoutMs: 8000 },
-      },
-      specialized,
-      specializedCaptures,
-      structural,
-      summary: {
-        targetCount: targets.length,
-        meaningfulCaptureCount: captures.length + specializedCaptures.length,
-        liveAnimationCount: liveAnimationSnapshot.length,
-      },
-    };
-  } finally {
-    await browser.close();
-  }
-}
-
-async function captureInteractionBounded(page, target, trigger, screenshotsDir) {
-  try {
-    return await withTimeout(
-      captureInteraction(page, target, trigger, screenshotsDir),
-      8_000,
-      `Interaction probe ${target.probeId} (${trigger})`,
-    );
-  } catch (error) {
-    return {
-      probeId: target.probeId,
-      label: target.text || target.className || target.tag,
-      trigger,
-      sources: target.sources,
-      meaningful: false,
-      error: error.message,
-    };
-  }
-}
-
-async function withTimeout(operation, timeoutMs, label) {
-  let timeout;
-  try {
-    return await Promise.race([
-      operation,
-      new Promise((_, reject) => {
-        timeout = setTimeout(() => reject(new Error(`${label} timed out after ${timeoutMs / 1000}s.`)), timeoutMs);
-      }),
-    ]);
-  } finally {
-    clearTimeout(timeout);
-  }
-}
-
-async function tagProbeTargets(page, staticCandidates) {
-  return page.evaluate((staticCandidates) => {
-    const visible = (node) => {
-      if (!(node instanceof Element)) return false;
-      if (node.closest("[data-rp-ignored-surface]")) return false;
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
-    };
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const semanticSelectors = [
-      { selector: "header a", limit: 10, priority: 100 },
-      { selector: "footer a", limit: 10, priority: 96 },
-      { selector: "a[class*='button' i],a[class*='cta' i],a[role='button']", limit: 8, priority: 98 },
-      { selector: "button", limit: 8, priority: 94 },
-      { selector: "details > summary", limit: 12, priority: 93 },
-      { selector: "[aria-expanded='true'],[aria-expanded='false']", limit: 12, priority: 93 },
-      { selector: "[role='tab']", limit: 6, priority: 92 },
-      { selector: "[aria-controls]", limit: 4, priority: 90 },
-      { selector: "[data-tab]", limit: 4, priority: 88 },
-      { selector: "[data-carousel-card]", limit: 4, priority: 82 },
-      { selector: "[role='listitem']", limit: 2, priority: 50 },
-      { selector: "article", limit: 2, priority: 30 },
-      { selector: "iframe", limit: 2, priority: 20 },
-      { selector: "video", limit: 2, priority: 20 },
-    ];
-    const targetMap = new Map();
-    let sequence = 0;
-    const addTarget = (element, source, triggers, priority = 40) => {
-      if (!element || !visible(element)) return;
-      const textClone = element.cloneNode(true);
-      textClone.querySelectorAll?.("svg,script,style").forEach((node) => node.remove());
-      const text = clean(textClone.textContent || element.getAttribute("aria-label") || element.getAttribute("title") || element.textContent).slice(0, 120);
-      if (/window\.|document\.|function\s*\(|nreum/i.test(text)) return;
-      const key = element;
-      if (targetMap.has(key)) {
-        const existing = targetMap.get(key);
-        for (const trigger of triggers) existing.triggers.add(trigger);
-        existing.sources.add(source);
-        existing.priority = Math.max(existing.priority || 0, priority);
-        return;
-      }
-      sequence += 1;
-      const probeId = `probe-${sequence}`;
-      element.setAttribute("data-probe-id", probeId);
-      targetMap.set(key, {
-        probeId,
-        text,
-        tag: element.tagName.toLowerCase(),
-        className: clean(element.className || "").slice(0, 140),
-        sources: new Set([source]),
-        triggers: new Set(triggers),
-        priority,
-        role: element.getAttribute("role") || (element.matches("a[href]") ? "link" : element.matches("button") ? "button" : element.tagName.toLowerCase()),
-        scope: element.closest("header") ? "header" : element.closest("footer") ? "footer" : element.closest("nav") ? "navigation" : "content",
-      });
-    };
-    for (const candidate of staticCandidates.slice(0, 80)) {
-      if (!candidate.baseSelector) continue;
-      let matches = [];
-      try {
-        matches = Array.from(document.querySelectorAll(candidate.baseSelector)).filter(visible).slice(0, 2);
-      } catch {
-        matches = [];
-      }
-      for (const match of matches) {
-        addTarget(match, `css:${candidate.baseSelector}`, candidate.likelyTriggers.length ? candidate.likelyTriggers : ["hover"], 45);
-      }
-    }
-    for (const entry of semanticSelectors) {
-      let matches = [];
-      try {
-        matches = Array.from(document.querySelectorAll(entry.selector)).filter(visible).sort((left, right) => {
-          const readable = (node) => {
-            const clone = node.cloneNode(true);
-            clone.querySelectorAll?.("svg,script,style").forEach((child) => child.remove());
-            return clean(clone.textContent).length >= 2 ? 1 : 0;
-          };
-          return readable(right) - readable(left);
-        }).slice(0, entry.limit);
-      } catch {
-        matches = [];
-      }
-      for (const match of matches) {
-        const triggers = match.matches("button,[role='tab'],[aria-controls],summary,[aria-expanded]")
-          ? ["hover", "focus", "press", "click"]
-          : match.matches("a[href]") ? ["hover", "focus", "press"] : ["hover", "focus"];
-        addTarget(match, `semantic:${entry.selector}`, triggers, entry.priority);
-      }
-    }
-    return Array.from(targetMap.values()).sort((left, right) => (right.priority || 0) - (left.priority || 0)).map((target) => ({
-      ...target,
-      sources: Array.from(target.sources),
-      triggers: Array.from(target.triggers),
-    }));
-  }, staticCandidates);
-}
-
-async function markIgnoredConsentSurfaces(page) {
-  return page.evaluate(() => {
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const visible = (node) => {
-      if (!(node instanceof Element)) return false;
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden" && Number(style.opacity || 1) > 0;
-    };
-    const selector = [
-      "#onetrust-banner-sdk",
-      "#onetrust-consent-sdk",
-      "[class*='onetrust' i]",
-      "[id*='cookie-banner' i]",
-      "[class*='cookie-banner' i]",
-      "[id*='consent-banner' i]",
-      "[class*='consent-banner' i]",
-      "[role='dialog']",
-    ].join(",");
-    const candidates = Array.from(document.querySelectorAll(selector)).filter(visible).filter((node) => {
-      const text = clean(node.textContent).toLowerCase();
-      const identity = `${node.id || ""} ${node.className || ""} ${node.getAttribute("aria-label") || ""}`.toLowerCase();
-      const controls = Array.from(node.querySelectorAll("button,a,[role='button']")).map((control) => clean(control.textContent)).join(" ").toLowerCase();
-      const style = getComputedStyle(node);
-      const rect = node.getBoundingClientRect();
-      const consentSignal = /cookie|consent|privacy preferences|tracking preferences/.test(`${identity} ${text}`);
-      const actionSignal = /accept|reject|decline|customi[sz]e|preferences|allow all/.test(controls);
-      const overlaySignal = style.position === "fixed" || style.position === "sticky" || node.getAttribute("role") === "dialog" || rect.width >= window.innerWidth * 0.55;
-      return /onetrust|cookiebot|quantcast/.test(identity) || consentSignal && actionSignal && overlaySignal;
-    });
-    const roots = candidates.filter((node, index, all) => !all.some((candidate, candidateIndex) => candidateIndex !== index && candidate.contains(node)));
-    return roots.map((node, index) => {
-      node.setAttribute("data-rp-ignored-surface", "consent-management");
-      const rect = node.getBoundingClientRect();
-      const identity = `${node.id || ""} ${node.className || ""}`.toLowerCase();
-      return {
-        id: `ignored-surface-${String(index + 1).padStart(3, "0")}`,
-        kind: "consent-management",
-        provider: /onetrust|ot-sdk/.test(identity) ? "onetrust" : /cookiebot/.test(identity) ? "cookiebot" : /quantcast/.test(identity) ? "quantcast" : "unknown",
-        creationPolicy: "ignore",
-        reason: "Destination consent must be implemented as functional infrastructure, not cloned page content.",
-        textFingerprint: clean(node.textContent).slice(0, 240),
-        rect: { top: Math.round(rect.top), left: Math.round(rect.left), width: Math.round(rect.width), height: Math.round(rect.height) },
-        domRef: {
-          tag: node.tagName.toLowerCase(),
-          id: node.id || "",
-          classTokens: String(node.className || "").split(/\s+/).filter(Boolean).slice(0, 10),
-        },
-      };
-    });
-  });
-}
-
-async function captureInteraction(page, target, trigger, screenshotsDir) {
-  const selector = `[data-probe-id="${target.probeId}"]`;
-  const locator = page.locator(selector).first();
-  try {
-    const before = await readProbeSnapshot(page, target.probeId);
-    if (!before) return { probeId: target.probeId, trigger, meaningful: false };
-    await locator.scrollIntoViewIfNeeded();
-    await page.waitForTimeout(80);
-    if (trigger === "hover") await locator.hover({ force: true });
-    else if (trigger === "focus") await locator.focus();
-    else if (trigger === "press") {
-      await locator.hover({ force: true });
-      await page.mouse.down();
-    }
-    else if (trigger === "click") {
-      const safety = await locator.evaluate((node) => {
-        const identity = `${node.tagName} ${node.getAttribute("role") || ""} ${node.getAttribute("aria-label") || ""} ${node.id || ""} ${node.className || ""} ${node.textContent || ""}`.toLowerCase();
-        const href = node.closest("a[href]")?.getAttribute("href") || "";
-        const formOwner = node.closest("form");
-        const unsafe = Boolean(formOwner)
-          || /submit|login|sign.?in|register|checkout|cart|purchase|buy|book|upload|delete|remove|admin|account|password/.test(identity)
-          || Boolean(href && !href.startsWith("#"));
-        const presentation = /tab|accordion|disclosure|carousel|slider|gallery|menu|navigation/.test(identity)
-          || node.hasAttribute("aria-controls")
-          || node.hasAttribute("aria-expanded")
-          || node.getAttribute("role") === "tab";
-        return { safe: !unsafe && presentation, reason: unsafe ? "unsafe-or-business-action" : presentation ? "allowlisted-presentation-control" : "unclassified-control" };
-      });
-      if (!safety.safe) {
-        return {
-          probeId: target.probeId,
-          label: target.text || target.className || target.tag,
-          tag: target.tag,
-          trigger,
-          sources: target.sources,
-          meaningful: false,
-          blocked: true,
-          error: `Safe probing blocked click: ${safety.reason}`,
-        };
-      }
-      await locator.dispatchEvent("click");
-    }
-    if (trigger === "load") await page.waitForTimeout(120);
-    if (trigger === "hover" || trigger === "focus" || trigger === "click") await page.waitForTimeout(220);
-    if (trigger === "press") await page.waitForTimeout(80);
-    const after = await readProbeSnapshot(page, target.probeId);
-    const diff = diffSnapshots(before, after);
-    const liveAnimations = await page.evaluate((probeId) => {
-      const node = document.querySelector(`[data-probe-id="${probeId}"]`);
-      return document.getAnimations().filter((animation) => {
-        const effectTarget = animation.effect?.target;
-        return effectTarget instanceof Element && (effectTarget === node || node?.contains(effectTarget) || effectTarget.contains?.(node));
-      }).map((animation) => ({
-        playState: animation.playState,
-        currentTime: animation.currentTime,
-      }));
-    }, target.probeId);
-    const meaningful = diff.changedProperties.length > 0 || diff.textChanged || diff.attributeChanges.length > 0 || liveAnimations.length > 0;
-    let screenshot = null;
-    if (meaningful) {
-      screenshot = path.join(screenshotsDir, `${target.probeId}-${trigger}.png`);
-      try {
-        await locator.screenshot({ path: screenshot });
-      } catch {
-        screenshot = null;
-      }
-    }
-    if (trigger === "press") {
-      await page.mouse.move(2, 2);
-      await page.mouse.up();
-    }
-    if (trigger === "hover") await page.mouse.move(2, 2);
-    return {
-      probeId: target.probeId,
-      label: target.text || target.className || target.tag,
-      tag: target.tag,
-      controlRole: target.role,
-      controlScope: target.scope,
-      trigger,
-      sources: target.sources,
-      meaningful,
-      before,
-      after,
-      diff,
-      liveAnimations,
-      screenshot,
-    };
-  } catch (error) {
-    if (trigger === "press") {
-      await page.mouse.move(2, 2).catch(() => {});
-      await page.mouse.up().catch(() => {});
-    }
-    return {
-      probeId: target.probeId,
-      label: target.text || target.className || target.tag,
-      tag: target.tag,
-      trigger,
-      sources: target.sources,
-      meaningful: false,
-      error: error.message,
-    };
-  }
-}
-
-async function readProbeSnapshot(page, probeId) {
-  return page.evaluate(({ probeId, styleKeys }) => {
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const node = document.querySelector(`[data-probe-id="${probeId}"]`);
-    if (!(node instanceof Element)) return null;
-    const style = getComputedStyle(node);
-    const rect = node.getBoundingClientRect();
-    const section = node.closest("section,header,main,article,nav,footer");
-    const sectionText = section ? clean(section.textContent).slice(0, 420) : "";
-    const text = clean(node.textContent).slice(0, 180);
-    const styleRecord = (target, pseudo = null) => {
-      const computed = getComputedStyle(target, pseudo);
-      const styles = {};
-      for (const key of styleKeys) styles[key] = computed[key];
-      return styles;
-    };
-    const visualChildren = Array.from(new Set([
-      ...Array.from(node.children),
-      ...Array.from(node.querySelectorAll("svg,use,path,i,[class*='icon' i],[aria-hidden='true']")),
-    ]))
-      .filter((child) => child instanceof Element)
-      .slice(0, 12)
-      .map((child, index) => ({
-        key: `${child.tagName.toLowerCase()}:${index}`,
-        tag: child.tagName.toLowerCase(),
-        className: clean(child.className?.baseVal || child.className || ""),
-        styles: styleRecord(child),
-        pseudo: {
-          before: styleRecord(child, "::before"),
-          after: styleRecord(child, "::after"),
-        },
-      }));
-    return {
-      text,
-      sectionText,
-      rect: {
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        top: Math.round(rect.top),
-        left: Math.round(rect.left),
-      },
-      styles: styleRecord(node),
-      pseudo: {
-        before: styleRecord(node, "::before"),
-        after: styleRecord(node, "::after"),
-      },
-      visualChildren,
-      className: clean(node.className || ""),
-      ariaSelected: node.getAttribute("aria-selected") || "",
-      ariaExpanded: node.getAttribute("aria-expanded") || "",
-      ariaCurrent: node.getAttribute("aria-current") || "",
-      ariaPressed: node.getAttribute("aria-pressed") || "",
-      disabled: node.matches(":disabled,[aria-disabled='true']"),
-    };
-  }, { probeId, styleKeys: SNAPSHOT_STYLE_KEYS });
-}
-
-function diffSnapshots(before, after) {
-  if (!before || !after) return { changedProperties: [], textChanged: false, attributeChanges: [] };
-  const changedProperties = [];
-  for (const key of SNAPSHOT_STYLE_KEYS) {
-    if (String(before.styles[key]) !== String(after.styles[key])) {
-      changedProperties.push({ property: key, before: before.styles[key], after: after.styles[key] });
-    }
-  }
-  for (const pseudo of ["before", "after"]) {
-    for (const key of SNAPSHOT_STYLE_KEYS) {
-      if (String(before.pseudo?.[pseudo]?.[key]) !== String(after.pseudo?.[pseudo]?.[key])) {
-        changedProperties.push({ property: `::${pseudo}.${key}`, before: before.pseudo?.[pseudo]?.[key], after: after.pseudo?.[pseudo]?.[key] });
-      }
-    }
-  }
-  const childKeys = new Set([...(before.visualChildren || []).map((child) => child.key), ...(after.visualChildren || []).map((child) => child.key)]);
-  for (const childKey of childKeys) {
-    const beforeChild = before.visualChildren?.find((child) => child.key === childKey);
-    const afterChild = after.visualChildren?.find((child) => child.key === childKey);
-    for (const key of SNAPSHOT_STYLE_KEYS) {
-      if (String(beforeChild?.styles?.[key]) !== String(afterChild?.styles?.[key])) {
-        changedProperties.push({ property: `child:${childKey}.${key}`, before: beforeChild?.styles?.[key], after: afterChild?.styles?.[key] });
-      }
-    }
-    for (const pseudo of ["before", "after"]) {
-      for (const key of SNAPSHOT_STYLE_KEYS) {
-        if (String(beforeChild?.pseudo?.[pseudo]?.[key]) !== String(afterChild?.pseudo?.[pseudo]?.[key])) {
-          changedProperties.push({ property: `child:${childKey}::${pseudo}.${key}`, before: beforeChild?.pseudo?.[pseudo]?.[key], after: afterChild?.pseudo?.[pseudo]?.[key] });
-        }
-      }
-    }
-  }
-  const attributeChanges = [];
-  for (const key of ["className", "ariaSelected", "ariaExpanded", "ariaCurrent", "ariaPressed", "disabled"]) {
-    if (String(before[key]) !== String(after[key])) {
-      attributeChanges.push({ property: key, before: before[key], after: after[key] });
-    }
-  }
-  return {
-    changedProperties,
-    textChanged: before.text !== after.text || before.sectionText !== after.sectionText,
-    attributeChanges,
-  };
-}
-
-async function probeHeaderScrollState(page, screenshotsDir) {
-  const result = await page.evaluate(async () => {
-    const visible = (node) => {
-      if (!(node instanceof Element)) return false;
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
-    };
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const header = document.querySelector("header,[role='banner'],#header,.header,.site-header,.main-header,.masthead,.sticky-header");
-    if (!visible(header)) return { missing: true };
-    const snapshot = (name) => {
-      const style = getComputedStyle(header);
-      const rect = header.getBoundingClientRect();
-      return {
-        name,
-        className: clean(header.className || ""),
-        height: Math.round(rect.height),
-        position: style.position,
-        backgroundColor: style.backgroundColor,
-        backdropFilter: style.backdropFilter || style.webkitBackdropFilter || "",
-      };
-    };
-    const initial = snapshot("initial");
-    const scrollTarget = Math.max(220, Math.min(document.documentElement.scrollHeight - window.innerHeight, Math.round(window.innerHeight * 0.75)));
-    window.scrollTo(0, scrollTarget);
-    await new Promise((resolve) => setTimeout(resolve, 400));
-    const scrolled = snapshot("scrolled");
-    window.scrollTo(0, 0);
-    await new Promise((resolve) => setTimeout(resolve, 200));
-    return { initial, scrolled };
-  });
-  if (!result || result.missing) return { missing: true };
-  const changedProperties = [];
-  for (const key of ["className", "height", "position", "backgroundColor", "backdropFilter"]) {
-    if (String(result.initial[key]) !== String(result.scrolled[key])) {
-      changedProperties.push({ property: key, before: result.initial[key], after: result.scrolled[key] });
-    }
-  }
-  return {
-    initial: result.initial,
-    scrolled: result.scrolled,
-    changedProperties,
-    screenshot: await captureStateScreenshots(
-      page,
-      "header,[role='banner'],#header,.header,.site-header,.main-header,.masthead,.sticky-header",
-      screenshotsDir,
-      "header",
-      async () => page.evaluate(() => {
-        const scrollTarget = Math.max(220, Math.min(document.documentElement.scrollHeight - window.innerHeight, Math.round(window.innerHeight * 0.75)));
-        window.scrollTo(0, scrollTarget);
-      }),
-    ),
-    meaningful: changedProperties.length > 0,
-  };
-}
-
-async function probeScrollTabsState(page, screenshotsDir) {
-  const result = await page.evaluate(async () => {
-    const visible = (node) => {
-      if (!(node instanceof Element)) return false;
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width > 0 && rect.height > 0 && style.display !== "none" && style.visibility !== "hidden";
-    };
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const roots = Array.from(document.querySelectorAll("main section, [data-scroll-section], [data-scroll-scene], [data-animation-scene]"));
-    const root = roots.filter(visible).map((node) => ({ node, score: (node.querySelector("iframe,video,canvas") ? 4 : 0) + (node.querySelector("[role='tab'],[aria-controls],[data-tab],button") ? 2 : 0) + (node.getBoundingClientRect().height > innerHeight ? 1 : 0) })).sort((a, b) => b.score - a.score)[0]?.node;
-    if (!visible(root)) return { missing: true };
-    root.setAttribute("data-rp-scroll-probe", "true");
-    const visual = root.querySelector("iframe, video, canvas, img, [data-scene-visual], [data-scroll-visual]");
-    const copy = root.querySelector("[data-scene-copy], [data-scroll-copy], [role='tabpanel'], h1,h2,h3") || root;
-    const snapshot = (name) => {
-      const rootRect = root.getBoundingClientRect();
-      const visualRect = visual?.getBoundingClientRect() || null;
-      const copyRect = copy?.getBoundingClientRect() || null;
-      const copyStyle = copy ? getComputedStyle(copy) : null;
-      const visualChain = [];
-      for (let node = visual; node && node !== root.parentElement && visualChain.length < 5; node = node.parentElement) {
-        const style = getComputedStyle(node);
-        const rect = node.getBoundingClientRect();
-        visualChain.push({
-          tag: node.tagName.toLowerCase(),
-          className: clean(node.className || ""),
-          position: style.position,
-          overflow: style.overflow,
-          transform: style.transform,
-          opacity: style.opacity,
-          clipPath: style.clipPath,
-          borderRadius: style.borderRadius,
-          width: Math.round(rect.width),
-          height: Math.round(rect.height),
-          left: Math.round(rect.left),
-          top: Math.round(rect.top),
-        });
-        if (node === root) break;
-      }
-      const sceneLayers = Array.from(root.querySelectorAll("*"))
-        .map((node) => ({ node, style: getComputedStyle(node), rect: node.getBoundingClientRect() }))
-        .filter(({ node, style, rect }) => rect.height >= 80 && style.display !== "none" && style.visibility !== "hidden" && (/curtain|mask|overlay|scrim|scroll-over__bg|scroll-over__frame/i.test(String(node.className || "")) || ["absolute", "fixed", "sticky"].includes(style.position)))
-        .slice(0, 18)
-        .map(({ node, style, rect }) => ({
-          tag: node.tagName.toLowerCase(),
-          className: clean(node.className || ""),
-          role: /curtain|mask|scrim/i.test(String(node.className || "")) ? "curtain" : /\bbg\b|background/i.test(String(node.className || "")) ? "background" : "layer",
-          position: style.position,
-          transform: style.transform,
-          opacity: style.opacity,
-          clipPath: style.clipPath,
-          backgroundColor: style.backgroundColor,
-          width: Math.round(rect.width),
-          height: Math.round(rect.height),
-          left: Math.round(rect.left),
-          top: Math.round(rect.top),
-        }));
-      return {
-        name,
-        scrollY: Math.round(window.scrollY),
-        rootClassName: clean(root.className || ""),
-        visualClassName: clean(visual?.className || ""),
-        copyClassName: clean(copy?.className || ""),
-        rootTop: Math.round(rootRect.top),
-        rootWidth: Math.round(rootRect.width),
-        rootHeight: Math.round(rootRect.height),
-        visual: visualRect ? { width: Math.round(visualRect.width), height: Math.round(visualRect.height), top: Math.round(visualRect.top) } : null,
-        copy: copyRect ? {
-          width: Math.round(copyRect.width),
-          height: Math.round(copyRect.height),
-          top: Math.round(copyRect.top),
-          left: Math.round(copyRect.left),
-          position: copyStyle?.position || "",
-          transform: copyStyle?.transform || "none",
-          opacity: copyStyle?.opacity || "1",
-          fontSize: copyStyle?.fontSize || "",
-          lineHeight: copyStyle?.lineHeight || "",
-        } : null,
-        visualChain,
-        sceneLayers,
-      };
-    };
-    const rootStart = window.scrollY + root.getBoundingClientRect().top;
-    const travel = Math.min(root.getBoundingClientRect().height * 0.82, window.innerHeight * 2.5);
-    const phases = [];
-    const samples = [
-      { progress: -2, name: "entry-offscreen", scrollY: Math.max(0, rootStart - window.innerHeight * 2) },
-      { progress: -1, name: "entry-below", scrollY: Math.max(0, rootStart - window.innerHeight) },
-      { progress: -0.5, name: "entry-midpoint", scrollY: Math.max(0, rootStart - window.innerHeight * 0.5) },
-      ...[0, 0.2, 0.45, 0.7, 1].map((progress) => ({
-        progress,
-        name: `scroll-${Math.round(progress * 100)}`,
-        scrollY: rootStart + travel * progress,
-      })),
-    ];
-    for (const sample of samples) {
-      window.scrollTo(0, Math.round(sample.scrollY));
-      await new Promise((resolve) => setTimeout(resolve, 260));
-      phases.push({ progress: sample.progress, stage: sample.progress < 0 ? "entry" : "scene", ...snapshot(sample.name) });
-    }
-    const beforeScroll = phases[0];
-    const afterScroll = phases[phases.length - 1];
-    const buttonNodes = Array.from(root.querySelectorAll("[role='tab'], [aria-controls], [data-tab], button")).filter(visible).slice(0, 8);
-    const states = [];
-    for (const button of buttonNodes) {
-      const label = clean(button.textContent);
-      button.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
-      await new Promise((resolve) => setTimeout(resolve, 280));
-      const visibleText = Array.from(root.querySelectorAll("h2,h3,p"))
-        .filter(visible)
-        .map((node) => clean(node.textContent))
-        .filter(Boolean)
-        .slice(0, 8);
-      const activeTab = buttonNodes.find((node) => node.getAttribute("aria-selected") === "true" || /\bactive\b/i.test(String(node.className || "")));
-      states.push({
-        label,
-        activeTab: clean(activeTab?.textContent || ""),
-        text: visibleText,
-        buttonClassName: clean(button.className || ""),
-        ariaSelected: button.getAttribute("aria-selected") || "",
-      });
-    }
-    window.scrollTo(0, 0);
-    return { beforeScroll, afterScroll, phases, states };
-  });
-  if (!result || result.missing) return { missing: true };
-  const wheelPhases = await probeWheelScrollScene(page);
-  const phases = [...(result.phases || []), ...wheelPhases];
-  const scrollChanges = [];
-  for (const key of ["rootClassName", "visualClassName", "copyClassName", "rootTop", "rootHeight"]) {
-    if (String(result.beforeScroll[key]) !== String(result.afterScroll[key])) {
-      scrollChanges.push({ property: key, before: result.beforeScroll[key], after: result.afterScroll[key] });
-    }
-  }
-  for (const key of ["visual", "copy"]) {
-    if (JSON.stringify(result.beforeScroll[key]) !== JSON.stringify(result.afterScroll[key])) {
-      scrollChanges.push({ property: key, before: result.beforeScroll[key], after: result.afterScroll[key] });
-    }
-  }
-  if (JSON.stringify(result.beforeScroll.visualChain) !== JSON.stringify(result.afterScroll.visualChain)) {
-    scrollChanges.push({ property: "visualChain", before: result.beforeScroll.visualChain, after: result.afterScroll.visualChain });
-  }
-  const uniqueStateTexts = Array.from(new Set(result.states.map((state) => state.text.join(" | "))));
-  return {
-    beforeScroll: result.beforeScroll,
-    afterScroll: result.afterScroll,
-    scrollChanges,
-    states: result.states,
-    uniqueStateCount: uniqueStateTexts.length,
-    phases,
-    invariants: deriveScrollInvariants(phases),
-    screenshot: await captureSingleScreenshot(page, "[data-rp-scroll-probe='true']", screenshotsDir, "interaction-section"),
-    meaningful: scrollChanges.length > 0 || uniqueStateTexts.length > 1,
-  };
-}
-
-async function probeWheelScrollScene(page) {
-  await page.evaluate(() => window.scrollTo(0, 0));
-  await page.waitForTimeout(320);
-  const meta = await page.evaluate(() => {
-    const root = document.querySelector("[data-rp-scroll-probe='true']");
-    if (!(root instanceof Element)) return null;
-    return {
-      rootStart: window.scrollY + root.getBoundingClientRect().top,
-      travel: Math.max(1, root.getBoundingClientRect().height - window.innerHeight),
-      viewportWidth: window.innerWidth,
-      viewportHeight: window.innerHeight,
-    };
-  });
-  if (!meta) return [];
-  const frames = [await readWheelScrollFrame(page, meta, 0)];
-  await page.mouse.move(Math.round(meta.viewportWidth * 0.85), Math.round(meta.viewportHeight * 0.75));
-  for (let index = 1; index <= 10; index += 1) {
-    await page.mouse.wheel(0, Math.round(meta.viewportHeight * 0.32));
-    await page.waitForTimeout(220);
-    frames.push(await readWheelScrollFrame(page, meta, index));
-  }
-  return frames.filter(Boolean);
-}
-
-async function readWheelScrollFrame(page, meta, index) {
-  return page.evaluate(({ meta, index }) => {
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const root = document.querySelector("[data-rp-scroll-probe='true']");
-    if (!(root instanceof Element)) return null;
-    const visual = root.querySelector("iframe, video, canvas, img, [data-scene-visual], [data-scroll-visual]");
-    const copy = root.querySelector("[data-scene-copy], [data-scroll-copy], [role='tabpanel'], h1,h2,h3") || root;
-    const rootRect = root.getBoundingClientRect();
-    const visualRect = visual?.getBoundingClientRect() || null;
-    const copyRect = copy?.getBoundingClientRect() || null;
-    const copyStyle = copy ? getComputedStyle(copy) : null;
-    const visualChain = [];
-    for (let node = visual; node && node !== root.parentElement && visualChain.length < 6; node = node.parentElement) {
-      const style = getComputedStyle(node);
-      const rect = node.getBoundingClientRect();
-      visualChain.push({
-        tag: node.tagName.toLowerCase(),
-        className: clean(node.className || ""),
-        position: style.position,
-        overflow: style.overflow,
-        transform: style.transform,
-        opacity: style.opacity,
-        clipPath: style.clipPath,
-        borderRadius: style.borderRadius,
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        left: Math.round(rect.left),
-        top: Math.round(rect.top),
-      });
-      if (node === root) break;
-    }
-    const sceneLayers = Array.from(root.querySelectorAll("*"))
-      .map((node) => ({ node, style: getComputedStyle(node), rect: node.getBoundingClientRect() }))
-      .filter(({ node, style, rect }) => rect.height >= 80 && style.display !== "none" && style.visibility !== "hidden" && (/curtain|mask|overlay|scrim|scroll-over__bg|scroll-over__frame/i.test(String(node.className || "")) || ["absolute", "fixed", "sticky"].includes(style.position)))
-      .slice(0, 18)
-      .map(({ node, style, rect }) => ({
-        tag: node.tagName.toLowerCase(),
-        className: clean(node.className || ""),
-        role: /curtain|mask|scrim/i.test(String(node.className || "")) ? "curtain" : /\bbg\b|background/i.test(String(node.className || "")) ? "background" : "layer",
-        position: style.position,
-        transform: style.transform,
-        opacity: style.opacity,
-        clipPath: style.clipPath,
-        backgroundColor: style.backgroundColor,
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        left: Math.round(rect.left),
-        top: Math.round(rect.top),
-      }));
-    const progress = (window.scrollY - meta.rootStart) / meta.travel;
-    return {
-      progress: Math.round(progress * 1000) / 1000,
-      stage: "wheel",
-      name: `wheel-${index}`,
-      scrollY: Math.round(window.scrollY),
-      rootClassName: clean(root.className || ""),
-      visualClassName: clean(visual?.className || ""),
-      copyClassName: clean(copy?.className || ""),
-      rootTop: Math.round(rootRect.top),
-      rootWidth: Math.round(rootRect.width),
-      rootHeight: Math.round(rootRect.height),
-      visual: visualRect ? { width: Math.round(visualRect.width), height: Math.round(visualRect.height), top: Math.round(visualRect.top) } : null,
-      copy: copyRect ? {
-        width: Math.round(copyRect.width),
-        height: Math.round(copyRect.height),
-        top: Math.round(copyRect.top),
-        left: Math.round(copyRect.left),
-        position: copyStyle?.position || "",
-        transform: copyStyle?.transform || "none",
-        opacity: copyStyle?.opacity || "1",
-        fontSize: copyStyle?.fontSize || "",
-        lineHeight: copyStyle?.lineHeight || "",
-      } : null,
-      visualChain,
-      sceneLayers,
-    };
-  }, { meta, index });
-}
-
-async function probeCarouselStates(page, screenshotsDir) {
-  const candidates = await page.evaluate(() => {
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const hasActiveToken = (value) => clean(value).split(" ").some((token) => /(?:^|[-_:])(active|selected|expanded)$|^(active|selected|expanded)$/i.test(token));
-    const visible = (node) => {
-      if (!(node instanceof Element)) return false;
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      return rect.width >= 80 && rect.height >= 60 && style.display !== "none" && style.visibility !== "hidden";
-    };
-    const classSignature = (node) => clean(node.className).split(" ").filter(Boolean).slice(0, 3).join(".");
-    const roots = Array.from(new Set(document.querySelectorAll(
-      "[data-carousel], [aria-roledescription='carousel'], [class*='carousel'], [class*='slider'], [class*='rail'], [class*='swiper'], [class*='splide'], [class*='embla']",
-    ))).filter(visible);
-    const byTrack = new Map();
-    for (const hintedRoot of roots.slice(0, 80)) {
-      const scope = hintedRoot.closest("section,main,article,[role='region']") || hintedRoot;
-      const nodes = [hintedRoot, ...Array.from(hintedRoot.querySelectorAll("*")).slice(0, 240)];
-      for (const track of nodes) {
-        if (!visible(track)) continue;
-        const directChildren = Array.from(track.children).filter(visible);
-        if (directChildren.length < 3 || directChildren.length > 40) continue;
-        const signatureCounts = new Map();
-        for (const child of directChildren) {
-          const key = classSignature(child) || child.tagName.toLowerCase();
-          signatureCounts.set(key, (signatureCounts.get(key) || 0) + 1);
-        }
-        const dominant = Array.from(signatureCounts.entries()).sort((left, right) => right[1] - left[1])[0];
-        const items = dominant && dominant[1] >= 3
-          ? directChildren.filter((child) => (classSignature(child) || child.tagName.toLowerCase()) === dominant[0])
-          : directChildren;
-        if (items.length < 3) continue;
-        const rects = items.map((item) => item.getBoundingClientRect());
-        const horizontalSpan = Math.max(...rects.map((rect) => rect.right)) - Math.min(...rects.map((rect) => rect.left));
-        const verticalSpan = Math.max(...rects.map((rect) => rect.bottom)) - Math.min(...rects.map((rect) => rect.top));
-        const trackRect = track.getBoundingClientRect();
-        const horizontal = horizontalSpan > verticalSpan * 1.15 || horizontalSpan > trackRect.width * 1.15 || track.scrollWidth > track.clientWidth * 1.05;
-        if (!horizontal) continue;
-        const classText = `${clean(hintedRoot.className)} ${clean(track.className)} ${clean(scope.className)}`.toLowerCase();
-        let score = items.length * 2;
-        if (track.scrollWidth > track.clientWidth * 1.05) score += 35;
-        if (/carousel|slider|rail|track|slides|swiper|splide|embla/.test(classText)) score += 30;
-        if (getComputedStyle(track).display === "flex" || getComputedStyle(track).display === "grid") score += 15;
-        if (scope.querySelectorAll("button").length >= 2) score += 12;
-        const existing = byTrack.get(track);
-        if (!existing || existing.score < score) byTrack.set(track, { hintedRoot, scope, track, items, score });
-      }
-    }
-    const ranked = Array.from(byTrack.values())
-      .sort((left, right) => right.score - left.score)
-      .filter((candidate, index, all) => !all.slice(0, index).some((earlier) => earlier.track.contains(candidate.track) || candidate.track.contains(earlier.track)))
-      .slice(0, 4);
-    return ranked.map((candidate, probeIndex) => {
-      candidate.scope.setAttribute("data-rp-carousel-probe", String(probeIndex));
-      candidate.track.setAttribute("data-rp-carousel-track", String(probeIndex));
-      candidate.items.forEach((item, itemIndex) => item.setAttribute("data-rp-carousel-item", `${probeIndex}:${itemIndex}`));
-      const activeIndex = candidate.items.findIndex((item) => hasActiveToken(item.className) || item.getAttribute("aria-selected") === "true");
-      const targetIndex = candidate.items.length > 1 && activeIndex !== 1 ? 1 : activeIndex !== 0 ? 0 : Math.min(2, candidate.items.length - 1);
-      const controls = Array.from(candidate.scope.querySelectorAll("button,[role='button']")).slice(0, 8).map((button) => ({
-        label: clean(button.getAttribute("aria-label") || button.textContent).slice(0, 100),
-        classTokens: clean(button.className).split(" ").filter(Boolean).slice(0, 8),
-      }));
-      return {
-        probeIndex,
-        score: candidate.score,
-        targetIndex,
-        itemCount: candidate.items.length,
-        scope: {
-          tag: candidate.scope.tagName.toLowerCase(),
-          id: candidate.scope.id || "",
-          classTokens: clean(candidate.scope.className).split(" ").filter(Boolean).slice(0, 12),
-          textFingerprint: clean(candidate.scope.textContent).slice(0, 180),
-        },
-        track: {
-          classTokens: clean(candidate.track.className).split(" ").filter(Boolean).slice(0, 12),
-        },
-        controls,
-      };
-    });
-  });
-
-  const results = [];
-  for (const candidate of candidates) {
-    const probeIndex = candidate.probeIndex;
-    const itemSelector = `[data-rp-carousel-item="${probeIndex}:${candidate.targetIndex}"]`;
-    const frames = [];
-    try {
-      const target = page.locator(itemSelector).first();
-      await target.scrollIntoViewIfNeeded();
-      await page.waitForTimeout(160);
-      frames.push(await readCarouselTimelineFrame(page, probeIndex, -1));
-      const safeCarouselTarget = await target.evaluate((node) => {
-        const anchor = node.closest("a[href]");
-        const identity = `${node.getAttribute("role") || ""} ${node.className || ""} ${node.getAttribute("aria-label") || ""}`.toLowerCase();
-        return !anchor && !node.closest("form") && !/cart|checkout|buy|book|delete|account/.test(identity);
-      });
-      if (!safeCarouselTarget) {
-        results.push({
-          id: `carousel-${probeIndex + 1}`,
-          missing: false,
-          changed: false,
-          blocked: true,
-          reason: "Safe probing refused a carousel item that could navigate or perform a business action.",
-          scope: candidate.scope,
-          target: { itemIndex: candidate.targetIndex },
-          controls: candidate.controls,
-        });
-        continue;
-      }
-      await target.click({ force: true });
-      let elapsed = 0;
-      for (const atMs of DEFAULT_INTERACTION_TIMELINE_MS) {
-        if (atMs > elapsed) await page.waitForTimeout(atMs - elapsed);
-        elapsed = atMs;
-        frames.push(await readCarouselTimelineFrame(page, probeIndex, atMs));
-      }
-      const timeline = compactInteractionTimeline(frames);
-      const invariants = deriveCarouselInvariants({ frames, timeline });
-      const firstItems = itemFrame(frames[0]);
-      const finalItems = itemFrame(frames[frames.length - 1]);
-      const changed = JSON.stringify(firstItems) !== JSON.stringify(finalItems) || timeline.changedNodeCount > 0;
-      const prefix = probeIndex === 0 ? "interaction-carousel" : `interaction-carousel-${probeIndex + 1}`;
-      results.push({
-        id: `carousel-${probeIndex + 1}`,
-        missing: false,
-        changed,
-        scope: candidate.scope,
-        target: { itemIndex: candidate.targetIndex },
-        controls: candidate.controls,
-        initial: legacyCarouselState(frames[0]),
-        after: legacyCarouselState(frames[frames.length - 1]),
-        timeline,
-        invariants,
-        screenshot: await captureSingleScreenshot(page, `[data-rp-carousel-probe="${probeIndex}"]`, screenshotsDir, prefix),
-      });
-    } catch (error) {
-      results.push({
-        id: `carousel-${probeIndex + 1}`,
-        missing: false,
-        changed: false,
-        scope: candidate.scope,
-        target: { itemIndex: candidate.targetIndex },
-        controls: candidate.controls,
-        frames,
-        error: error.message,
-      });
-    }
-  }
-  return results;
-}
-
-async function readCarouselTimelineFrame(page, probeIndex, atMs) {
-  return page.evaluate(({ probeIndex, atMs }) => {
-    const clean = (value) => String(value || "").replace(/\s+/g, " ").trim();
-    const hasActiveToken = (value) => clean(value).split(" ").some((token) => /(?:^|[-_:])(active|selected|expanded)$|^(active|selected|expanded)$/i.test(token));
-    const root = document.querySelector(`[data-rp-carousel-probe="${probeIndex}"]`);
-    const track = document.querySelector(`[data-rp-carousel-track="${probeIndex}"]`);
-    const items = Array.from(document.querySelectorAll(`[data-rp-carousel-item^="${probeIndex}:"]`));
-    if (!(root instanceof Element) || !(track instanceof Element) || items.length < 2) return null;
-    const pathWithin = (node, stop) => {
-      const parts = [];
-      for (let current = node; current && current !== stop && parts.length < 5; current = current.parentElement) {
-        const parent = current.parentElement;
-        const index = parent ? Array.from(parent.children).indexOf(current) : 0;
-        parts.unshift(`${current.tagName.toLowerCase()}:${index}`);
-      }
-      return parts.join("/");
-    };
-    const snapshot = (node, path, role) => {
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      const className = clean(node.className);
-      return {
-        path,
-        role,
-        text: clean(node.textContent).slice(0, 160),
-        className,
-        active: className.split(/\s+/).some((token) => /(?:^|[-_:])(active|selected|expanded)$|^(active|selected|expanded)$/i.test(token)),
-        ariaSelected: node.getAttribute("aria-selected") || "",
-        ariaExpanded: node.getAttribute("aria-expanded") || "",
-        hidden: node.hasAttribute("hidden"),
-        rect: {
-          left: Math.round(rect.left * 100) / 100,
-          top: Math.round(rect.top * 100) / 100,
-          width: Math.round(rect.width * 100) / 100,
-          height: Math.round(rect.height * 100) / 100,
-        },
-        display: style.display,
-        visibility: style.visibility,
-        opacity: style.opacity,
-        transform: style.transform,
-        width: style.width,
-        height: style.height,
-        flexBasis: style.flexBasis,
-        gridTemplateColumns: style.gridTemplateColumns,
-        overflow: style.overflow,
-        clipPath: style.clipPath,
-        gap: style.gap,
-        rowGap: style.rowGap,
-        columnGap: style.columnGap,
-        marginLeft: style.marginLeft,
-        marginRight: style.marginRight,
-        paddingLeft: style.paddingLeft,
-        paddingRight: style.paddingRight,
-        borderLeftWidth: style.borderLeftWidth,
-        borderRightWidth: style.borderRightWidth,
-        borderLeftColor: style.borderLeftColor,
-        borderRightColor: style.borderRightColor,
-        transitionProperty: style.transitionProperty,
-        transitionDuration: style.transitionDuration,
-        transitionTimingFunction: style.transitionTimingFunction,
-        clientWidth: node.clientWidth,
-        scrollWidth: node.scrollWidth,
-      };
-    };
-    const nodes = [snapshot(root, "scope", "scope"), snapshot(track, "track", "track")];
-    items.slice(0, 12).forEach((item, index) => nodes.push(snapshot(item, `item:${index}`, "item")));
-    const activeOrTarget = items.find((item) => hasActiveToken(item.className)) || items[0];
-    const descendants = Array.from(activeOrTarget.querySelectorAll("*")).filter((node) => {
-      const rect = node.getBoundingClientRect();
-      const style = getComputedStyle(node);
-      const className = clean(node.className);
-      return rect.width > 0 && rect.height > 0 && style.display !== "none" && (className || node.matches("img,picture,video,iframe,button,a,[aria-hidden],[aria-expanded]"));
-    }).slice(0, 48);
-    descendants.forEach((node) => nodes.push(snapshot(node, `active/${pathWithin(node, activeOrTarget)}`, "active-descendant")));
-    const animations = typeof document.getAnimations === "function"
-      ? document.getAnimations().filter((animation) => {
-        const target = animation.effect?.target;
-        return target instanceof Node && root.contains(target);
-      }).slice(0, 24).map((animation) => {
-        const target = animation.effect?.target;
-        const timing = animation.effect?.getTiming?.() || {};
-        return {
-          path: target instanceof Element ? pathWithin(target, root) : "",
-          name: animation.animationName || "",
-          playState: animation.playState,
-          currentTime: Math.round(Number(animation.currentTime) || 0),
-          duration: timing.duration,
-          delay: timing.delay,
-          easing: timing.easing,
-          fill: timing.fill,
-        };
-      })
-      : [];
-    return { atMs, nodes, animations };
-  }, { probeIndex, atMs });
-}
-
-function itemFrame(frame) {
-  return (frame?.nodes || []).filter((node) => node.role === "item").map((node) => ({
-    className: node.className,
-    rect: node.rect,
-    ariaSelected: node.ariaSelected,
-    ariaExpanded: node.ariaExpanded,
-  }));
-}
-
-function legacyCarouselState(frame) {
-  const track = frame?.nodes?.find((node) => node.role === "track");
-  return {
-    clientWidth: track?.clientWidth || 0,
-    scrollWidth: track?.scrollWidth || 0,
-    cards: (frame?.nodes || []).filter((node) => node.role === "item").map((node, index) => ({
-      index,
-      className: node.className,
-      width: node.rect?.width || 0,
-      height: node.rect?.height || 0,
-      left: node.rect?.left || 0,
-    })),
-  };
-}
-
-async function captureStateScreenshots(page, selector, screenshotsDir, prefix, moveToState) {
-  let initial = null;
-  let scrolled = null;
-  try {
-    initial = path.join(screenshotsDir, `${prefix}-initial.png`);
-    await page.locator(selector).first().screenshot({ path: initial });
-    await moveToState();
-    await page.waitForTimeout(400);
-    scrolled = path.join(screenshotsDir, `${prefix}-scrolled.png`);
-    await page.locator(selector).first().screenshot({ path: scrolled });
-    await page.evaluate(() => window.scrollTo(0, 0));
-    await page.waitForTimeout(120);
-  } catch {
-    // Best effort only.
-  }
-  return { initial, scrolled };
-}
-
-async function captureSingleScreenshot(page, selector, screenshotsDir, prefix) {
-  try {
-    await page.locator(selector).first().scrollIntoViewIfNeeded();
-    await page.waitForTimeout(120);
-    const screenshot = path.join(screenshotsDir, `${prefix}.png`);
-    await page.locator(selector).first().screenshot({ path: screenshot });
-    return screenshot;
-  } catch {
-    return null;
-  }
-}
-
-function deriveSpecializedCaptures(specialized) {
-  const captures = [];
-  if (specialized.headerScroll?.meaningful) {
-    captures.push({
-      id: "header-scroll",
-      kind: "sticky-transform",
-      label: "Header scroll state",
-      tag: "header",
-      trigger: "scroll",
-      sources: ["specialized:header-scroll"],
-      meaningful: true,
-      before: specialized.headerScroll.initial,
-      after: specialized.headerScroll.scrolled,
-      diff: {
-        changedProperties: specialized.headerScroll.changedProperties,
-        textChanged: false,
-        attributeChanges: [],
-      },
-      liveAnimations: [],
-      screenshot: specialized.headerScroll.screenshot?.scrolled || specialized.headerScroll.screenshot?.initial || null,
-    });
-  }
-  if (specialized.scrollTabs?.meaningful) {
-    if (specialized.scrollTabs.scrollChanges.length) {
-      captures.push({
-        id: "section-scroll-state",
-        kind: "scroll-state",
-        label: "Section scroll-expanded state",
-        tag: "section",
-        trigger: "scroll",
-        sources: ["specialized:scroll-scene"],
-        meaningful: true,
-        before: specialized.scrollTabs.beforeScroll,
-        after: specialized.scrollTabs.afterScroll,
-        diff: {
-          changedProperties: specialized.scrollTabs.scrollChanges,
-          textChanged: false,
-          attributeChanges: [],
-        },
-        liveAnimations: [],
-        screenshot: specialized.scrollTabs.screenshot || null,
-        states: specialized.scrollTabs.phases || [],
-        invariants: specialized.scrollTabs.invariants || {},
-      });
-    }
-    for (const state of specialized.scrollTabs.states.slice(0, 4)) {
-      captures.push({
-        id: `tab-${slugify(state.label)}`,
-        kind: "tabs",
-        label: state.label,
-        tag: "button",
-        trigger: "click",
-        sources: ["specialized:scroll-scene-tabs"],
-        meaningful: true,
-        before: null,
-        after: {
-          ariaSelected: state.ariaSelected,
-          activeTab: state.activeTab,
-          text: state.text.join(" | "),
-        },
-        diff: {
-          changedProperties: [],
-          textChanged: specialized.scrollTabs.uniqueStateCount > 1,
-          attributeChanges: state.ariaSelected ? [{ property: "ariaSelected", before: "false", after: state.ariaSelected }] : [],
-        },
-        liveAnimations: [],
-        screenshot: specialized.scrollTabs.screenshot || null,
-      });
-    }
-  }
-  const carouselStates = specialized.carousels?.length ? specialized.carousels : specialized.carousel ? [specialized.carousel] : [];
-  for (const carousel of carouselStates.filter((item) => item?.changed)) {
-    captures.push({
-      id: `${carousel.id || "carousel"}-card-expansion`,
-      kind: "carousel",
-      label: "Carousel card expansion and horizontal rail",
-      tag: "section",
-      trigger: "click",
-      sources: ["specialized:carousel-state"],
-      meaningful: true,
-      before: carousel.initial,
-      after: carousel.after,
-      diff: { changedProperties: [{ property: "cardGeometry", before: carousel.initial.cards, after: carousel.after.cards }], textChanged: false, attributeChanges: [] },
-      liveAnimations: [],
-      screenshot: carousel.screenshot || null,
-      scope: carousel.scope,
-      timeline: carousel.timeline,
-      invariants: carousel.invariants,
-    });
-  }
-  for (const media of specialized.media || []) {
-    captures.push({
-      id: media.id,
-      kind: "embedded-media",
-      label: `${media.role} ${media.provider || media.tag} media`,
-      tag: media.tag,
-      trigger: "load",
-      sources: ["structural:media"],
-      meaningful: true,
-      after: media,
-      diff: { changedProperties: [], textChanged: false, attributeChanges: [] },
-      liveAnimations: [],
-      screenshot: null,
-      scope: {
-        tag: "section",
-        classTokens: media.domRef?.sectionClassTokens || [],
-        textFingerprint: media.domRef?.sectionTextFingerprint || "",
-      },
-    });
-  }
-  return captures;
-}
-
-function enrichPageRecord(page, experiment) {
-  const allCaptures = [...experiment.runtime.captures, ...(experiment.runtime.specializedCaptures || [])];
-  const captures = allCaptures.map((capture) => ({
-    id: capture.id || "",
-    kind: classifyCapture(capture),
-    label: capture.label,
-    trigger: capture.trigger,
-    sources: capture.sources,
-    changedProperties: (capture.diff?.changedProperties || []).map((item) => item.property),
-    textChanged: Boolean(capture.diff?.textChanged),
-    screenshot: capture.screenshot,
-    importance: classifyImportance(capture),
-    ...(capture.scope ? { scope: capture.scope } : {}),
-  }));
-  const sectionInteractions = (page.sections || []).map((section) => {
-    const heading = String(section.heading || "").toLowerCase();
-    const className = `${section.className || ""} ${(section.domRef?.classTokens || []).join(" ")}`.toLowerCase();
-    const relevant = captures.filter((capture) => {
-      const label = String(capture.label || "").toLowerCase();
-      if (capture.scope && scopeMatchesSection(capture.scope, section)) return true;
-      if (!capture.scope && (className.includes("hero-video") || section.kind === "hero") && capture.kind === "embedded-media") return true;
-      if (/carousel|slider|rail|gallery/.test(className) && (capture.kind === "hover-card" || capture.kind === "carousel-control" || capture.kind === "carousel")) return true;
-      if (/scroll|scene|sticky|pinned/.test(className)) {
-        return capture.kind === "tabs" || capture.kind === "sticky-transform" || capture.kind === "scroll-state";
-      }
-      return label && heading && label.includes(heading.slice(0, 12));
-    });
-    return {
-      sectionId: section.id,
-      interactions: dedupeSectionInteractions(relevant).slice(0, 12),
-    };
-  });
-  return {
-    ...page,
-    interactionDiscovery: {
-      generatedAt: experiment.generatedAt,
-      staticSummary: experiment.staticInventory.summary,
-      runtimeSummary: experiment.runtime.summary,
-      captures,
-      sectionInteractions,
-      structural: experiment.runtime.structural,
-      media: experiment.runtime.structural.media || [],
-      specialized: summarizeSpecializedRuntime(experiment.runtime.specialized),
-      requiredBehaviors: [
-        experiment.runtime.structural.embedCount ? "preserve-embedded-media" : null,
-        experiment.runtime.structural.tabLabels.length ? "preserve-content-switching-tabs" : null,
-        experiment.runtime.specialized?.headerScroll?.meaningful ? "preserve-header-scroll-state" : null,
-        experiment.runtime.specialized?.scrollTabs?.scrollChanges?.length ? "preserve-scroll-expanded-section-state" : null,
-        (experiment.runtime.specialized?.carousels || [experiment.runtime.specialized?.carousel]).some((carousel) => carousel?.changed) ? "preserve-carousel-card-expansion" : null,
-      ].filter(Boolean),
-    },
-  };
-}
-
-function summarizeSpecializedRuntime(specialized = {}) {
-  return {
-    headerScroll: specialized.headerScroll ? {
-      meaningful: Boolean(specialized.headerScroll.meaningful),
-      changedProperties: specialized.headerScroll.changedProperties || [],
-      screenshot: specialized.headerScroll.screenshot || null,
-    } : { missing: true },
-    scrollTabs: specialized.scrollTabs ? {
-      meaningful: Boolean(specialized.scrollTabs.meaningful),
-      uniqueStateCount: specialized.scrollTabs.uniqueStateCount || 0,
-      phaseCount: specialized.scrollTabs.phases?.length || 0,
-      invariants: specialized.scrollTabs.invariants || {},
-      screenshot: specialized.scrollTabs.screenshot || null,
-    } : { missing: true },
-    carousels: (specialized.carousels || []).map((carousel) => ({
-      id: carousel.id,
-      changed: Boolean(carousel.changed),
-      scope: carousel.scope,
-      invariants: carousel.invariants,
-      screenshot: carousel.screenshot || null,
-      ...(carousel.error ? { error: carousel.error } : {}),
-    })),
-  };
-}
-
-function scopeMatchesSection(scope, section) {
-  const identityToken = (token) => {
-    const value = String(token || "").toLowerCase();
-    return value && !/^(relative|absolute|fixed|sticky|static|block|inline|flex|grid|container|hidden|visible|w-|h-|min-|max-|p[trblxy]?-|m[trblxy]?-|bg-|text-|font-|z-|overflow|object-|top-|left-|right-|bottom-|translate-|scale-|rotate-|opacity-|rounded-|border-|shadow-|transition|duration-|ease-|sm:|md:|lg:|xl:|2xl:)/.test(value);
-  };
-  const scopeTokens = new Set((scope.classTokens || []).map((token) => String(token).toLowerCase()).filter(identityToken));
-  const sectionTokens = [
-    section.className,
-    ...(section.domRef?.classTokens || []),
-  ].flatMap((value) => String(value || "").toLowerCase().split(/\s+/)).filter(identityToken);
-  if (sectionTokens.some((token) => scopeTokens.has(token))) return true;
-  const scopeText = String(scope.textFingerprint || "").toLowerCase();
-  const heading = String(section.heading || "").toLowerCase().trim();
-  return Boolean(heading.length >= 8 && scopeText.includes(heading.slice(0, 32)));
-}
-
-export function bindInteractionsToSections(interactions, pages) {
-  for (const interaction of interactions) {
-    const sectionIds = [];
-    for (const page of pages || []) {
-      for (const entry of page.interactionDiscovery?.sectionInteractions || []) {
-        const matched = (entry.interactions || []).some((summary) => {
-          if (summary.id) return summary.id === interaction.id;
-          return summary.kind === interaction.kind &&
-            summary.label === interaction.label &&
-            normalizeTrigger(summary.trigger).type === normalizeTrigger(interaction.trigger).type;
-        });
-        if (matched) sectionIds.push(entry.sectionId);
-      }
-    }
-    interaction.sectionIds = Array.from(new Set(sectionIds));
-  }
-}
-
-function dedupeSectionInteractions(items) {
-  const seen = new Set();
-  return items.filter((item) => {
-    const key = `${item.kind}\u0000${item.label}\u0000${item.trigger}`;
-    if (seen.has(key)) return false;
-    seen.add(key);
-    return true;
-  });
-}
-
-function classifyCapture(capture) {
-  if (capture.kind) return capture.kind;
-  const label = `${capture.label || ""} ${capture.sources?.join(" ") || ""}`.toLowerCase();
-  if (capture.tag === "iframe" || capture.tag === "video") return "embedded-media";
-  if (capture.tag === "summary" || capture.tag === "details" || capture.before?.ariaExpanded || capture.after?.ariaExpanded || label.includes("accordion") || label.includes("disclosure")) return "accordion";
-  if (capture.controlRole) return "control-state";
-  if (label.includes("tab") || label.includes(".panel__btn") || capture.after?.ariaSelected) return "tabs";
-  if (capture.kind === "carousel" || capture.sources?.some((source) => source.includes("carousel-state"))) return "carousel";
-  if (label.includes("story-card") || label.includes("carousel")) return "hover-card";
-  if (label.includes("header") || capture.sources?.some((source) => source.includes("header a"))) return "sticky-transform";
-  if (label.includes("button") || label.includes("next") || label.includes("prev")) return "carousel-control";
-  return "micro-interaction";
-}
-
-function classifyImportance(capture) {
-  const kind = classifyCapture(capture);
-  if (kind === "tabs" || kind === "accordion" || kind === "embedded-media" || kind === "sticky-transform" || kind === "scroll-state" || kind === "carousel") return "core";
-  if (kind === "hover-card" || kind === "carousel-control") return "supportive";
-  if (kind === "control-state") return "supportive";
-  return "decorative";
-}
-
-function normalizeTrigger(trigger) {
-  return typeof trigger === "string" ? { type: trigger } : trigger || { type: "unknown" };
-}
-
-function summarizeStates(capture) {
-  if (Array.isArray(capture.states) && capture.states.length) return capture.states;
-  if (capture.controlRole && (capture.before || capture.after)) {
-    const properties = (capture.diff?.changedProperties || []).map((item) => item.property);
-    return [
-      capture.before ? compactControlSnapshot(capture.before, properties, { includeBase: true }) : null,
-      capture.after ? compactControlSnapshot(capture.after, properties) : null,
-    ].filter(Boolean);
-  }
-  if (capture.before || capture.after) return [capture.before, capture.after].filter(Boolean);
-  return [];
-}
-
-function compactControlSnapshot(snapshot, properties, { includeBase = false } = {}) {
-  const baseKeys = [
-    "color", "backgroundColor", "borderColor", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
-    "textDecorationLine", "textDecorationColor", "textDecorationThickness", "textUnderlineOffset",
-    "outlineColor", "outlineStyle", "outlineWidth", "outlineOffset", "cursor",
-    "transitionProperty", "transitionDuration", "transitionTimingFunction",
-  ];
-  const targetKeys = new Set(includeBase ? baseKeys : []);
-  const pseudoKeys = { before: new Set(), after: new Set() };
-  const childKeys = new Map();
-  for (const property of properties || []) {
-    const child = String(property).match(/^child:(.+?)(?:::(before|after))?\.([^.]+)$/);
-    if (child) {
-      const record = childKeys.get(child[1]) || { styles: new Set(), before: new Set(), after: new Set() };
-      (child[2] ? record[child[2]] : record.styles).add(child[3]);
-      childKeys.set(child[1], record);
-      continue;
-    }
-    const pseudo = String(property).match(/^::(before|after)\.([^.]+)$/);
-    if (pseudo) {
-      pseudoKeys[pseudo[1]].add(pseudo[2]);
-      continue;
-    }
-    if (snapshot.styles && property in snapshot.styles) targetKeys.add(property);
-  }
-  if (includeBase) {
-    const timingKeys = ["transitionProperty", "transitionDuration", "transitionTimingFunction"];
-    for (const fields of childKeys.values()) timingKeys.forEach((key) => fields.styles.add(key));
-    for (const pseudo of ["before", "after"]) {
-      if (pseudoKeys[pseudo].size) timingKeys.forEach((key) => pseudoKeys[pseudo].add(key));
-    }
-  }
-  const pick = (source, keys) => Object.fromEntries(Array.from(keys).map((key) => [key, source?.[key]]));
-  return {
-    styles: pick(snapshot.styles, targetKeys),
-    pseudo: {
-      before: pick(snapshot.pseudo?.before, pseudoKeys.before),
-      after: pick(snapshot.pseudo?.after, pseudoKeys.after),
-    },
-    visualChildren: Array.from(childKeys.entries()).map(([key, fields]) => {
-      const child = (snapshot.visualChildren || []).find((item) => item.key === key) || {};
-      return {
-        key,
-        styles: pick(child.styles, fields.styles),
-        pseudo: { before: pick(child.pseudo?.before, fields.before), after: pick(child.pseudo?.after, fields.after) },
-      };
-    }),
-    className: snapshot.className || "",
-    ariaSelected: snapshot.ariaSelected || "",
-    ariaExpanded: snapshot.ariaExpanded || "",
-    ariaCurrent: snapshot.ariaCurrent || "",
-    ariaPressed: snapshot.ariaPressed || "",
-    disabled: Boolean(snapshot.disabled),
-  };
-}
-
-function implementationHintFor(capture) {
-  const kind = classifyCapture(capture);
-  if (kind === "sticky-transform") return "Preserve the source shared-chrome scroll state rather than collapsing it to one static header.";
-  if (kind === "tabs") return "Implement as an explicit content switcher keyed to the visible tab labels.";
-  if (kind === "accordion") return "Build a CMS-backed accordion repeater; preserve every closed panel's complete structure, the captured initial expansion, and the observed single/multiple-open behavior.";
-  if (kind === "scroll-state") return "Preserve the source section's scroll-driven visual and copy relationship rather than flattening it into a static block.";
-  if (kind === "carousel") return "Implement an overflowing horizontal rail with the captured active-card expansion and controls; do not flatten it into a grid.";
-  if (kind === "embedded-media") return "Keep the media interactive instead of replacing it with a static poster image.";
-  if (kind === "hover-card" || kind === "carousel-control") return "Preserve the hover/control affordance closely enough to maintain scanability and emphasis.";
-  if (kind === "control-state") return "Reproduce the captured state delta on its owning target, pseudo-element, or nested icon; preserve focus visibility and source timing.";
-  return "Preserve this behavior when it materially affects comprehension, navigation, or brand feel.";
-}
-
-function slugify(value) {
-  return String(value || "interaction")
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "") || "interaction";
-}
-
-function safePageName(page) {
-  return `${page.area}-${String(page.path || "home").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "") || "home"}`;
-}
-
-if (import.meta.url === `file://${process.argv[1]}`) {
-  main().catch((error) => {
-    console.error(error.stack || error.message);
-    process.exit(1);
-  });
-}