oomi-ai 0.2.40 → 0.2.41

package/lib/personaRuntimeProcess.js

@@ -39,7 +39,9 @@ const LEGACY_WEBSPATIAL_TEMPLATE_FILE_RULES = [
     relativePath: path.join('src', 'spatial.ts'),
     shouldReplace: (content) =>
       !content.includes('WEBSPATIAL_FORK_REPOSITORY') ||
-      !content.includes('configurePersonaScene'),
+      !content.includes('configurePersonaScene') ||
+      content.includes('WEBSPATIAL_FORK_COMMIT = "b2746721e4fe6b4f86dac0ea55938074eea00cda"') ||
+      content.includes('WEBSPATIAL_FORK_COMMIT = "8904ac8fec48fe49ee14d1739237bd1afb2894fe"'),
   },
   {
     relativePath: path.join('src', 'main.tsx'),
@@ -57,21 +59,44 @@ const LEGACY_WEBSPATIAL_TEMPLATE_FILE_RULES = [
   {
     relativePath: path.join('src', 'pages', 'HomePage.tsx'),
     shouldReplace: (content) =>
-      content.includes('Open Spatial Scene') &&
-      content.includes('Open Scene Route'),
+      (content.includes('Open Spatial Scene') &&
+      content.includes('Open Scene Route')) ||
+      (content.includes('Launch Spatial Surface') &&
+      content.includes('Open Browser Preview') &&
+      content.includes('Focused surface') &&
+      !content.includes('sceneMode')) ||
+      content.includes('enable-xr-monitor={sceneMode || undefined}') ||
+      content.includes('enable-xr={sceneMode || undefined}') ||
+      (
+        content.includes('persona-panel persona-runtime" enable-xr') ||
+        content.includes('persona-button" onClick={openPersonaScene} enable-xr') ||
+        content.includes('persona-link" to="/scene" target="_blank" enable-xr') ||
+        content.includes('persona-card" enable-xr style={xrStyle(')
+      ),
   },
   {
     relativePath: path.join('src', 'pages', 'ScenePage.tsx'),
     shouldReplace: (content) =>
-      !content.includes('enable-xr-monitor') &&
-      content.includes(
-        'This route is intentionally separate so WebSpatial scene launching has a dedicated',
+      (
+        !content.includes('enable-xr-monitor') &&
+        content.includes(
+          'This route is intentionally separate so WebSpatial scene launching has a dedicated',
+        )
+      ) ||
+      (
+        content.includes('Awaiting AndroidXR interaction') &&
+        content.includes('Interaction Console') &&
+        content.includes('Fork-backed proof points')
       ),
   },
   {
     relativePath: path.join('src', 'App.css'),
     shouldReplace: (content) =>
-      content.includes('.scene-panel') && !content.includes('.scene-interaction-grid'),
+      (content.includes('.scene-panel') && !content.includes('.scene-interaction-grid')) ||
+      content.includes('html.is-spatial .persona-runtime {') ||
+      content.includes('html.is-spatial .persona-scene-root {') ||
+      content.includes('html.is-spatial .persona-button,') ||
+      content.includes('html.is-spatial .persona-card,'),
   },
   {
     relativePath: 'vite.config.ts',

package/openclaw.plugin.json

@@ -2,7 +2,7 @@
   "id": "oomi-ai",
   "name": "Oomi Channel Plugin",
   "description": "Managed Oomi channel integration for OpenClaw.",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "author": "Oomi",
   "license": "MIT",
   "openclawVersion": ">=0.5.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oomi-ai",
-  "version": "0.2.40",
+  "version": "0.2.41",
   "description": "Oomi OpenClaw channel plugin and bridge tooling",
   "bin": {
     "oomi": "bin/oomi-ai.js"

package/templates/persona-app/src/App.css

@@ -105,6 +105,10 @@ code {
   gap: 24px;
 }
 
+.persona-scene-root {
+  position: relative;
+}
+
 .persona-header,
 .persona-grid,
 .scene-interaction-grid,
@@ -594,19 +598,11 @@ html.is-spatial body {
   background: transparent;
 }
 
-html.is-spatial .persona-button,
-html.is-spatial .persona-link,
 html.is-spatial .scene-chip,
 html.is-spatial .scene-material-chip {
   --xr-background-material: regular;
 }
 
-html.is-spatial .persona-runtime {
-  transform: translateZ(20px) rotateX(10deg);
-  transform-origin: top right;
-}
-
-html.is-spatial .persona-card,
 html.is-spatial .scene-ops-card,
 html.is-spatial .scene-interaction-card,
 html.is-spatial .scene-proof-card,

package/templates/persona-app/src/pages/HomePage.tsx

@@ -47,9 +47,9 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
   }, []);
 
   return (
-    <main className="persona-shell" enable-xr-monitor={sceneMode || undefined}>
+    <main className={`persona-shell${sceneMode ? " persona-scene-root" : ""}`}>
       <section className="persona-header">
-        <div className="persona-panel persona-hero" enable-xr style={xrStyle(22, "translucent")}>
+        <div className="persona-panel persona-hero">
           <div>
             <p className="persona-eyebrow">{sceneMode ? "Spatial Persona Surface" : "WebSpatial Persona"}</p>
             <h1 className="persona-title">{personaConfig.name}</h1>
@@ -59,15 +59,15 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
           <div className="persona-actions">
             {!sceneMode ? (
               <>
-                <button className="persona-button" onClick={openPersonaScene} enable-xr style={xrStyle(52, "regular")}>
+                <button className="persona-button" onClick={openPersonaScene}>
                   Launch Spatial Surface
                 </button>
-                <Link className="persona-link" to="/scene" target="_blank" enable-xr style={xrStyle(92, "thin")}>
+                <Link className="persona-link" to="/scene" target="_blank">
                   Open Spatial Preview
                 </Link>
               </>
             ) : (
-              <Link className="persona-button" to="/" enable-xr style={xrStyle(52, "regular")}>
+              <Link className="persona-button" to="/">
                 Return To Browser View
               </Link>
             )}
@@ -89,7 +89,7 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
           </div>
         </div>
 
-        <aside className="persona-panel persona-runtime" enable-xr style={xrStyle(72, "thin")}>
+        <aside className="persona-panel persona-runtime">
           <p className="persona-eyebrow">Runtime</p>
           <div className="runtime-list">
             <div className="runtime-row">
@@ -117,7 +117,7 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
       </section>
 
       <section className="persona-grid">
-        <article className="persona-panel persona-card" enable-xr style={xrStyle(34, "translucent")}>
+        <article className="persona-panel persona-card">
           <h2>What Good XR Feels Like</h2>
           <p>
             Treat the generated persona site like a spatial work surface. The XR route should keep
@@ -131,7 +131,7 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
           </p>
         </article>
 
-        <article className="persona-panel persona-card" enable-xr style={xrStyle(74, "thin")}>
+        <article className="persona-panel persona-card">
           <h2>Editing Notes</h2>
           <ul className="persona-note-list">
             {personaNotes.map(note => (
@@ -140,7 +140,7 @@ export function HomePage({ sceneMode = false }: HomePageProps) {
           </ul>
         </article>
 
-        <article className="persona-panel persona-card persona-scene-card" enable-xr style={xrStyle(118, "regular")}>
+        <article className="persona-panel persona-card persona-scene-card">
           <h2>Scene Contract</h2>
           <p>
             The page should import WebSpatial helpers, self-configure the scene, and keep using

package/templates/persona-app/src/spatial.ts

@@ -3,7 +3,7 @@ import { initScene, version as webSpatialSdkVersion } from "@webspatial/react-sd
 
 export const PERSONA_SCENE_NAME = "personaScene";
 export const WEBSPATIAL_FORK_REPOSITORY = "https://github.com/zill4/webspatial-sdk";
-export const WEBSPATIAL_FORK_COMMIT = "b2746721e4fe6b4f86dac0ea55938074eea00cda";
+export const WEBSPATIAL_FORK_COMMIT = "ac4bd47eb14a894ffef34a4044ddd0bbd47f3e72";
 
 type SpatialWindow = Window & {
   webspatialBridge?: unknown;

package/templates/persona-app/vendor/webspatial/FORK.md

@@ -1,6 +1,6 @@
 This persona template vendors the AndroidXR-capable WebSpatial runtime packages from:
 
 - Repository: https://github.com/zill4/webspatial-sdk
-- Commit: 8904ac8fec48fe49ee14d1739237bd1afb2894fe
+- Commit: ac4bd47eb14a894ffef34a4044ddd0bbd47f3e72
 
 Oomi uses these vendored packages for persona runtimes so OpenClaw installs the AndroidXR-enabled fork instead of the stock npm release.

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

@@ -1014,17 +1014,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++;
@@ -1133,121 +1152,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;
@@ -1256,14 +1205,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
@@ -1272,87 +1227,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) {
@@ -1415,42 +1294,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) => {