oomi-ai 0.2.40 → 0.2.42

package/templates/persona-app/vendor/webspatial/react-sdk/dist/web/index.js

@@ -1055,17 +1055,36 @@ function hasTransparentBackground(element) {
 }
 function injectCaptureBackground(element, backgroundColor = DEFAULT_CAPTURE_BACKGROUND) {
   const restoreFunctions = [];
-  const originalBg = element.style.backgroundColor;
   const wasTransparent = hasTransparentBackground(element);
-  element.style.backgroundColor = backgroundColor;
-  restoreFunctions.push(() => {
-    element.style.backgroundColor = originalBg;
-  });
+  if (wasTransparent) {
+    const originalBg = element.style.backgroundColor;
+    element.style.backgroundColor = backgroundColor;
+    restoreFunctions.push(() => {
+      element.style.backgroundColor = originalBg;
+    });
+  }
+  const shouldInjectDescendantBackground = (candidate) => {
+    if (!hasTransparentBackground(candidate)) {
+      return false;
+    }
+    const style = window.getComputedStyle(candidate);
+    if (style.display === "inline" || style.display === "contents") {
+      return false;
+    }
+    const rect = candidate.getBoundingClientRect();
+    const hasMeaningfulBox = rect.width >= 32 && rect.height >= 32;
+    if (!hasMeaningfulBox) {
+      return false;
+    }
+    const hasNestedLayout = candidate.children.length > 0;
+    const hasVisualContainerTraits = style.borderRadius !== "0px" || style.boxShadow !== "none" || style.backdropFilter !== "none" || style.overflow !== "visible" || style.borderStyle !== "none";
+    return hasNestedLayout || hasVisualContainerTraits;
+  };
   const allDescendants = element.querySelectorAll("*");
   let injectedCount = 0;
   allDescendants.forEach((el) => {
     const htmlEl = el;
-    if (hasTransparentBackground(htmlEl)) {
+    if (shouldInjectDescendantBackground(htmlEl)) {
       const childOriginalBg = htmlEl.style.backgroundColor;
       htmlEl.style.backgroundColor = backgroundColor;
       injectedCount++;
@@ -1174,121 +1193,51 @@ async function captureWithSnapdom(snapdom, element, scale) {
     return null;
   }
 }
-function findOffsetElements(element) {
-  const offsetElements = [];
-  const style = window.getComputedStyle(element);
-  if (style.position === "relative") {
-    const top = parseFloat(style.top) || 0;
-    const left = parseFloat(style.left) || 0;
-    if (top !== 0 || left !== 0) {
-      offsetElements.push({
-        element,
-        originalTop: element.style.top,
-        originalLeft: element.style.left,
-        topValue: top,
-        leftValue: left
-      });
-    }
-  }
-  let parent = element.parentElement;
-  let depth = 0;
-  const maxDepth = 5;
-  while (parent && depth < maxDepth) {
-    const parentStyle = window.getComputedStyle(parent);
-    if (parentStyle.position === "relative") {
-      const parentTop = parseFloat(parentStyle.top) || 0;
-      const parentLeft = parseFloat(parentStyle.left) || 0;
-      if (parentTop !== 0 || parentLeft !== 0) {
-        console.log(
-          `[WebSpatial] Found offset element: ${parent.tagName}.${parent.className?.split(" ")[0] || ""} top=${parentTop}px, left=${parentLeft}px`
-        );
-        offsetElements.push({
-          element: parent,
-          originalTop: parent.style.top,
-          originalLeft: parent.style.left,
-          topValue: parentTop,
-          leftValue: parentLeft
-        });
+function createVisibleCaptureClone(element) {
+  const rect = element.getBoundingClientRect();
+  const sandbox = document.createElement("div");
+  sandbox.setAttribute("aria-hidden", "true");
+  sandbox.style.position = "fixed";
+  sandbox.style.left = "-10000px";
+  sandbox.style.top = "0px";
+  sandbox.style.pointerEvents = "none";
+  sandbox.style.zIndex = "-1";
+  sandbox.style.contain = "layout style paint";
+  sandbox.style.opacity = "1";
+  const clone = element.cloneNode(true);
+  const makeCloneVisible = (node) => {
+    node.style.visibility = "visible";
+    node.style.opacity = "1";
+    node.style.transition = "none";
+    node.style.animation = "none";
+    node.style.transform = "none";
+    node.style.top = "0px";
+    node.style.left = "0px";
+    Array.from(node.children).forEach((child) => {
+      if (child instanceof HTMLElement) {
+        makeCloneVisible(child);
       }
-    }
-    parent = parent.parentElement;
-    depth++;
-  }
-  return offsetElements;
-}
-function getContentOffset(element) {
-  const offsetElements = findOffsetElements(element);
-  return {
-    top: offsetElements.reduce((sum, el) => sum + el.topValue, 0),
-    left: offsetElements.reduce((sum, el) => sum + el.leftValue, 0)
-  };
-}
-function makeElementVisible(element) {
-  const restoreFunctions = [];
-  const originalVisibility = element.style.visibility;
-  const computedVisibility = window.getComputedStyle(element).visibility;
-  if (computedVisibility === "hidden") {
-    element.style.visibility = "visible";
-    console.log(`[WebSpatial] Made element visible for capture (was: ${computedVisibility})`);
-    restoreFunctions.push(() => {
-      element.style.visibility = originalVisibility;
     });
-  }
-  const allDescendants = element.querySelectorAll("*");
-  allDescendants.forEach((el) => {
-    const htmlEl = el;
-    const childComputedVisibility = window.getComputedStyle(htmlEl).visibility;
-    if (childComputedVisibility === "hidden") {
-      const childOriginalVisibility = htmlEl.style.visibility;
-      htmlEl.style.visibility = "visible";
-      restoreFunctions.push(() => {
-        htmlEl.style.visibility = childOriginalVisibility;
-      });
-    }
-  });
-  if (restoreFunctions.length > 1) {
-    console.log(`[WebSpatial] Made ${restoreFunctions.length} elements visible for capture`);
-  }
-  return () => {
-    restoreFunctions.forEach((restore) => restore());
+  };
+  makeCloneVisible(clone);
+  clone.style.position = "relative";
+  clone.style.margin = "0px";
+  clone.style.width = `${Math.ceil(rect.width)}px`;
+  clone.style.minHeight = `${Math.ceil(rect.height)}px`;
+  sandbox.appendChild(clone);
+  document.body.appendChild(sandbox);
+  return {
+    clone,
+    cleanup: () => sandbox.remove()
   };
 }
 async function captureWithHtml2Canvas(html2canvas, element, scale, backgroundColor) {
   try {
     const rect = element.getBoundingClientRect();
-    const contentOffset = getContentOffset(element);
-    console.log(`[WebSpatial] html2canvas capturing: rect=(${rect.x.toFixed(0)},${rect.y.toFixed(0)},${rect.width.toFixed(0)},${rect.height.toFixed(0)}), contentOffset=(${contentOffset.top},${contentOffset.left})`);
-    const scrollX = window.scrollX || window.pageXOffset || 0;
+    console.log(
+      `[WebSpatial] html2canvas capturing via visible clone: rect=(${rect.x.toFixed(0)},${rect.y.toFixed(0)},${rect.width.toFixed(0)},${rect.height.toFixed(0)})`
+    );
     const scrollY = window.scrollY || window.pageYOffset || 0;
-    const absoluteX = rect.x + scrollX;
-    const absoluteY = rect.y + scrollY;
-    const offsetElements = findOffsetElements(element);
-    if (offsetElements.length > 0) {
-      console.log(
-        `[WebSpatial] Temporarily resetting ${offsetElements.length} offset elements for capture`
-      );
-      offsetElements.forEach(({ element: el, topValue, leftValue }) => {
-        el.style.top = "0px";
-        el.style.left = "0px";
-        console.log(
-          `[WebSpatial] Reset: ${el.tagName}.${el.className?.split(" ")[0] || ""} from top=${topValue}px, left=${leftValue}px to 0`
-        );
-      });
-      void element.offsetHeight;
-      await new Promise((resolve) => setTimeout(resolve, 50));
-      console.log("[WebSpatial] Reflow complete after offset reset");
-    }
-    const restorePositions = () => {
-      offsetElements.forEach(({ element: el, originalTop, originalLeft }) => {
-        el.style.top = originalTop;
-        el.style.left = originalLeft;
-      });
-    };
-    if (element.scrollTop !== 0) {
-      console.log(`[WebSpatial] Resetting element scroll from ${element.scrollTop} to 0`);
-      element.scrollTop = 0;
-    }
-    const restoreVisibility = makeElementVisible(element);
     const viewportTop = scrollY;
     const viewportBottom = scrollY + window.innerHeight;
     const elementTop = rect.y + scrollY;
@@ -1297,14 +1246,20 @@ async function captureWithHtml2Canvas(html2canvas, element, scale, backgroundCol
       `[WebSpatial] Capture context: viewport=(${viewportTop}-${viewportBottom}), element=(${elementTop}-${elementBottom}), innerHeight=${window.innerHeight}`
     );
     let canvas;
+    const captureClone = createVisibleCaptureClone(element);
+    const restoreBackground = injectCaptureBackground(
+      captureClone.clone,
+      backgroundColor || DEFAULT_CAPTURE_BACKGROUND
+    );
     try {
-      const currentRect = element.getBoundingClientRect();
-      const captureX = currentRect.x + scrollX;
-      const captureY = currentRect.y + scrollY;
+      await new Promise(
+        (resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))
+      );
+      const cloneRect = captureClone.clone.getBoundingClientRect();
       console.log(
-        `[WebSpatial] Capture bounds: original=(${absoluteX},${absoluteY}), afterReset=(${captureX},${captureY}), size=(${currentRect.width}x${currentRect.height})`
+        `[WebSpatial] Visible clone ready: rect=(${cloneRect.x.toFixed(0)},${cloneRect.y.toFixed(0)},${cloneRect.width.toFixed(0)},${cloneRect.height.toFixed(0)})`
       );
-      canvas = await html2canvas(element, {
+      canvas = await html2canvas(captureClone.clone, {
         backgroundColor,
         logging: true,
         // Enable logging to debug
@@ -1313,87 +1268,11 @@ async function captureWithHtml2Canvas(html2canvas, element, scale, backgroundCol
         allowTaint: true,
         imageTimeout: 5e3,
         removeContainer: true,
-        foreignObjectRendering: false,
-        // Don't set scroll offset - let html2canvas use default (current scroll)
-        // scrollX and scrollY would affect rendering position but we want document coordinates
-        // Crop to element's document position
-        // x/y define the top-left corner of the crop region in document coordinates
-        x: captureX,
-        y: captureY,
-        width: currentRect.width,
-        height: currentRect.height,
-        // Use onclone to MOVE the element to (0,0) in the cloned document
-        // This is the key fix for elements far down the page (like footer at Y=1142)
-        // By moving to absolute position (0,0), html2canvas will render at the top-left
-        onclone: (clonedDoc, clonedElement) => {
-          const originalRect = clonedElement.getBoundingClientRect();
-          console.log(`[WebSpatial] CLONE: Element position in clone (${originalRect.x.toFixed(0)},${originalRect.y.toFixed(0)})`);
-          clonedElement.style.visibility = "visible";
-          const hiddenElements = clonedElement.querySelectorAll("*");
-          let visibilityFixCount = 0;
-          hiddenElements.forEach((el) => {
-            const htmlEl = el;
-            const style = clonedDoc.defaultView?.getComputedStyle(htmlEl);
-            if (style && style.visibility === "hidden") {
-              htmlEl.style.visibility = "visible";
-              visibilityFixCount++;
-            }
-          });
-          if (visibilityFixCount > 0) {
-            console.log(`[WebSpatial] CLONE: Made ${visibilityFixCount + 1} elements visible`);
-          }
-          let parent = clonedElement.parentElement;
-          let depth = 0;
-          const maxDepth = 10;
-          while (parent && depth < maxDepth) {
-            const parentStyle = clonedDoc.defaultView?.getComputedStyle(parent);
-            if (parentStyle && parentStyle.position === "relative") {
-              const parentTop = parseFloat(parentStyle.top) || 0;
-              const parentLeft = parseFloat(parentStyle.left) || 0;
-              if (parentTop !== 0 || parentLeft !== 0) {
-                console.log(
-                  `[WebSpatial] CLONE: Reset ${parent.tagName}.${parent.className?.split(" ")[0] || ""} from top=${parentTop}px, left=${parentLeft}px to 0`
-                );
-                parent.style.top = "0px";
-                parent.style.left = "0px";
-              }
-            }
-            parent = parent.parentElement;
-            depth++;
-          }
-          void clonedElement.offsetHeight;
-          const clonedRect = clonedElement.getBoundingClientRect();
-          const clonedStyle = clonedDoc.defaultView?.getComputedStyle(clonedElement);
-          console.log(
-            `[WebSpatial] Cloned element (after visibility fix): rect=(${clonedRect.x.toFixed(0)},${clonedRect.y.toFixed(0)},${clonedRect.width.toFixed(0)},${clonedRect.height.toFixed(0)}), visibility=${clonedStyle?.visibility}`
-          );
-          const numChildren = Math.min(5, clonedElement.children.length);
-          for (let i = 0; i < numChildren; i++) {
-            const child = clonedElement.children[i];
-            const childRect = child.getBoundingClientRect();
-            const childStyle = clonedDoc.defaultView?.getComputedStyle(child);
-            console.log(
-              `[WebSpatial] Child ${i}: ${child.tagName}.${child.className?.split(" ")[0] || ""}, rect=(${childRect.x.toFixed(0)},${childRect.y.toFixed(0)},${childRect.width.toFixed(0)},${childRect.height.toFixed(0)}), vis=${childStyle?.visibility}, display=${childStyle?.display}`
-            );
-          }
-          const productGrid = clonedElement.querySelector(".auto-fill-grid");
-          if (productGrid) {
-            const gridRect = productGrid.getBoundingClientRect();
-            const gridStyle = clonedDoc.defaultView?.getComputedStyle(productGrid);
-            console.log(
-              `[WebSpatial] Product grid: rect=(${gridRect.x.toFixed(0)},${gridRect.y.toFixed(0)},${gridRect.width.toFixed(0)},${gridRect.height.toFixed(0)}), columns=${gridStyle?.gridTemplateColumns?.substring(0, 100)}`
-            );
-            const firstCard = productGrid.children[0];
-            if (firstCard) {
-              const cardRect = firstCard.getBoundingClientRect();
-              console.log(`[WebSpatial] First product card: rect=(${cardRect.x.toFixed(0)},${cardRect.y.toFixed(0)},${cardRect.width.toFixed(0)},${cardRect.height.toFixed(0)})`);
-            }
-          }
-        }
+        foreignObjectRendering: false
       });
     } finally {
-      restoreVisibility();
-      restorePositions();
+      restoreBackground();
+      captureClone.cleanup();
     }
     const ctx = canvas.getContext("2d");
     if (ctx) {
@@ -1456,42 +1335,34 @@ async function captureElementBitmap(element, options) {
   if (options?.waitForImages !== false) {
     await waitForContent(element, 500);
   }
-  const restoreBackground = injectCaptureBackground(
-    element,
-    options?.backgroundColor || DEFAULT_CAPTURE_BACKGROUND
-  );
   let result = null;
-  try {
-    const html2canvas = await loadHtml2Canvas();
-    if (html2canvas) {
-      console.log("[WebSpatial] Using html2canvas (primary)");
-      result = await captureWithHtml2Canvas(
-        html2canvas,
-        element,
-        scale,
-        options?.backgroundColor ?? DEFAULT_CAPTURE_BACKGROUND
-      );
-      if (result) {
-        const elapsed = Math.round(performance.now() - startTime);
-        console.log(`[WebSpatial] Capture complete (html2canvas, ${elapsed}ms)`);
-        return result;
-      }
+  const html2canvas = await loadHtml2Canvas();
+  if (html2canvas) {
+    console.log("[WebSpatial] Using html2canvas (primary)");
+    result = await captureWithHtml2Canvas(
+      html2canvas,
+      element,
+      scale,
+      options?.backgroundColor ?? DEFAULT_CAPTURE_BACKGROUND
+    );
+    if (result) {
+      const elapsed = Math.round(performance.now() - startTime);
+      console.log(`[WebSpatial] Capture complete (html2canvas, ${elapsed}ms)`);
+      return result;
     }
-    const snapdom = await loadSnapdom();
-    if (snapdom) {
-      console.log("[WebSpatial] Falling back to snapdom");
-      result = await captureWithSnapdom(snapdom, element, scale);
-      if (result) {
-        const elapsed = Math.round(performance.now() - startTime);
-        console.log(`[WebSpatial] Capture complete (snapdom, ${elapsed}ms)`);
-        return result;
-      }
+  }
+  const snapdom = await loadSnapdom();
+  if (snapdom) {
+    console.log("[WebSpatial] Falling back to snapdom");
+    result = await captureWithSnapdom(snapdom, element, scale);
+    if (result) {
+      const elapsed = Math.round(performance.now() - startTime);
+      console.log(`[WebSpatial] Capture complete (snapdom, ${elapsed}ms)`);
+      return result;
     }
-    console.error("[WebSpatial] No capture library available");
-    return null;
-  } finally {
-    restoreBackground();
   }
+  console.error("[WebSpatial] No capture library available");
+  return null;
 }
 function observeContentChanges(element, onContentChange) {
   const observer = new MutationObserver((_mutations) => {