@mirage-engine/core 0.2.1 → 0.2.2

package/src/animation/Animator.ts

@@ -0,0 +1,163 @@
+import { StyleData } from "../types";
+import { MeshRegistry } from "../store/MeshRegistry";
+import { Painter, parseColor } from "@mirage-engine/painter";
+import * as THREE from "three";
+
+export function animateMeshByData(
+  registry: MeshRegistry,
+  data: Map<HTMLElement, StyleData>,
+) {
+  if (data.size === 0) return;
+
+  data.forEach((styleData, element) => {
+    const mesh = registry.get(element);
+    if (!mesh || !mesh.userData.basePosition) return;
+
+    let { x: baseX, y: baseY } = mesh.userData.basePosition;
+    const { width: baseW, height: baseH } = mesh.userData.baseSize;
+
+    const currentW = styleData.width ?? baseW;
+    const currentH = styleData.height ?? baseH;
+    const widthDiff = currentW - baseW;
+    const heightDiff = currentH - baseH;
+
+    // --- Capture and Lock Transform Origin (Performance & Accuracy) ---
+    // We capture the origin on the very first frame of change (> 0.1px) 
+    // to ensure perfect sync from the start of the first animation.
+    if (
+      styleData.width !== undefined &&
+      mesh.userData.originRatioX === undefined &&
+      Math.abs(widthDiff) > 0.1 
+    ) {
+      const rect = element.getBoundingClientRect();
+      const tx = styleData.x ?? 0;
+      const baseTx = mesh.userData.baseTransform?.x ?? 0;
+      const scrollOffsetX = mesh.userData.isFixed ? 0 : window.scrollX;
+      // rect.left already includes GSAP transform (tx).
+      // We subtract tx to strip the animation, then add baseTx to match baseDOM's initial state.
+      const currentPageX = rect.left + scrollOffsetX - tx + baseTx;
+      const deltaX = currentPageX - mesh.userData.baseDOM.x;
+      
+      let ratioX = -deltaX / widthDiff;
+      if (Math.abs(ratioX) < 0.05) ratioX = 0.0;
+      else if (Math.abs(ratioX - 1.0) < 0.05) ratioX = 1.0;
+      else if (Math.abs(ratioX - 0.5) < 0.05) ratioX = 0.5;
+
+      mesh.userData.originRatioX = ratioX;
+    }
+
+    if (
+      styleData.height !== undefined &&
+      mesh.userData.originRatioY === undefined &&
+      Math.abs(heightDiff) > 0.1
+    ) {
+      const rect = element.getBoundingClientRect();
+      const ty = styleData.y ?? 0;
+      const baseTy = mesh.userData.baseTransform?.y ?? 0;
+      const scrollOffsetY = mesh.userData.isFixed ? 0 : window.scrollY;
+      const currentPageY = rect.top + scrollOffsetY - ty + baseTy;
+      const deltaY = currentPageY - mesh.userData.baseDOM.y;
+      
+      let ratioY = -deltaY / heightDiff;
+      if (Math.abs(ratioY) < 0.05) ratioY = 0.0;
+      else if (Math.abs(ratioY - 1.0) < 0.05) ratioY = 1.0;
+      else if (Math.abs(ratioY - 0.5) < 0.05) ratioY = 0.5;
+
+      mesh.userData.originRatioY = ratioY;
+    }
+
+    // --- Calculate Mesh Position using Measured Origin ---
+    const ratioX = mesh.userData.originRatioX ?? 0.5;
+    const ratioY = mesh.userData.originRatioY ?? 0.5;
+
+    // Since Three.js meshes expand from center, we offset the center based on the locked origin ratio
+    const moveX = widthDiff * (0.5 - ratioX);
+    const moveY = heightDiff * (0.5 - ratioY);
+
+    // --- Calculate Delta Movement ---
+    // Extract baseTransform stored during syncScene
+    const baseTx = mesh.userData.baseTransform?.x ?? 0;
+    const baseTy = mesh.userData.baseTransform?.y ?? 0;
+    
+    // We only want to apply the DIFFERENCE in transform since the base extraction.
+    const deltaTx = (styleData.x ?? baseTx) - baseTx;
+    const deltaTy = (styleData.y ?? baseTy) - baseTy;
+
+    mesh.position.setX(baseX + moveX + deltaTx);
+    mesh.position.setY(baseY - (moveY + deltaTy));
+    mesh.scale.set(currentW, currentH, 1);
+
+    Painter.forceUpdateUniforms(mesh.material as THREE.ShaderMaterial, {
+      backgroundColor: styleData.backgroundColor,
+      backgroundImage: styleData.backgroundImage,
+      opacity: styleData.opacity,
+      borderRadius: styleData.borderRadius ?? mesh.userData.baseStyles?.borderRadius,
+      width: currentW,
+      height: currentH,
+    });
+  });
+}
+export function animateMeshByAttribute(
+  _target: HTMLElement,
+  _options: { duration: number; easing?: string },
+) {}
+
+export function updateFixedMeshesScroll(
+  fixedMeshes: Set<THREE.Mesh>,
+  currentScrollX: number,
+  currentScrollY: number,
+) {
+  fixedMeshes.forEach((mesh) => {
+    if (mesh.userData.isFixed && mesh.userData.initialScroll && mesh.userData.originalBasePosition) {
+      const offsetX = currentScrollX - mesh.userData.initialScroll.x;
+      const offsetY = currentScrollY - mesh.userData.initialScroll.y;
+
+      mesh.userData.basePosition.x = mesh.userData.originalBasePosition.x + offsetX;
+      mesh.userData.basePosition.y = mesh.userData.originalBasePosition.y - offsetY;
+
+      mesh.position.x = mesh.userData.basePosition.x;
+      mesh.position.y = mesh.userData.basePosition.y;
+    }
+  });
+}
+
+export function extractFromStyle(style: CSSStyleDeclaration): StyleData {
+  const styleObject: StyleData = {};
+
+  if (style.opacity) {
+    styleObject.opacity = parseFloat(style.opacity);
+  }
+
+  if (style.backgroundColor && style.backgroundColor !== "rgba(0, 0, 0, 0)") {
+    const parsed = parseColor(style.backgroundColor);
+    styleObject.backgroundColor = [parsed.color.r, parsed.color.g, parsed.color.b];
+  }
+
+  if (style.backgroundImage) {
+    styleObject.backgroundImage = style.backgroundImage;
+  } else if (style.background) {
+    styleObject.backgroundImage = style.background;
+  }
+
+  if (style.borderRadius) {
+    styleObject.borderRadius = parseFloat(style.borderRadius);
+  }
+  if (style.width) {
+    styleObject.width = parseFloat(style.width);
+  }
+  if (style.height) {
+    styleObject.height = parseFloat(style.height);
+  }
+  if (style.transform && style.transform !== "none") {
+    const matrix = new DOMMatrix(style.transform);
+
+    styleObject.x = matrix.m41;
+    styleObject.y = matrix.m42;
+    styleObject.z = matrix.m43;
+
+    // [TODO] direct matrix data pipeline to webGL
+    // styleObject.matrix = matrix.toFloat32Array();
+  }
+
+  return styleObject;
+}

package/src/core/Engine.ts

@@ -1,14 +1,28 @@
 import { CoreConfig } from "../types";
 import { Renderer } from "../renderer/Renderer";
 import { Syncer } from "./Syncer";
+import { MeshRegistry } from "../store/MeshRegistry";
 
 export class Engine {
   private renderer: Renderer;
   private syncer: Syncer;
   private target: HTMLElement;
+  private registry: MeshRegistry;
 
   constructor(target: HTMLElement, config: CoreConfig) {
     this.target = target;
+    this.registry = new MeshRegistry();
+
+    if (!document.getElementById("mirage-engine-styles")) {
+      const style = document.createElement("style");
+      style.id = "mirage-engine-styles";
+      style.textContent = `
+        [data-mirage-dom="hide"] {
+          opacity: 0 !important;
+        }
+      `;
+      document.head.appendChild(style);
+    }
 
     let mountContainer: HTMLElement | undefined;
 
@@ -23,11 +37,14 @@ export class Engine {
       throw new Error("[Mirage] Cannot find a container (parent or option).");
     }
 
-    this.renderer = new Renderer(this.target, config, mountContainer);
-
+    this.renderer = new Renderer(
+      this.target,
+      config,
+      mountContainer,
+      this.registry,
+    );
     this.renderer.mount();
-
-    this.syncer = new Syncer(this.target, this.renderer, config);
+    this.syncer = new Syncer(this.target, this.renderer, this.registry, config);
   }
 
   public start() {
@@ -41,4 +58,39 @@ export class Engine {
     this.syncer.stop();
     this.renderer.dispose();
   }
+
+  public test() {
+    const boxMesh = this.registry.get(
+      document.querySelector("#box2") as HTMLElement,
+    );
+
+    if (!boxMesh) return;
+
+    const keys: { [key: string]: boolean } = {
+      ArrowRight: false,
+      ArrowLeft: false,
+      ArrowUp: false,
+      ArrowDown: false,
+    };
+
+    window.addEventListener("keydown", (e) => {
+      if (keys[e.key] !== undefined) keys[e.key] = true;
+    });
+    window.addEventListener("keyup", (e) => {
+      if (keys[e.key] !== undefined) keys[e.key] = false;
+    });
+
+    const moveStep = 2;
+
+    const animate = () => {
+      requestAnimationFrame(animate);
+
+      if (keys.ArrowRight) boxMesh.position.setX(boxMesh.position.x + moveStep);
+      if (keys.ArrowLeft) boxMesh.position.setX(boxMesh.position.x - moveStep);
+      if (keys.ArrowUp) boxMesh.position.setY(boxMesh.position.y + moveStep);
+      if (keys.ArrowDown) boxMesh.position.setY(boxMesh.position.y - moveStep);
+    };
+
+    animate();
+  }
 }

package/src/core/Syncer.ts

@@ -1,15 +1,20 @@
 import { CoreConfig } from "../types/config";
 import { Renderer } from "../renderer/Renderer";
+import { MeshRegistry } from "../store/MeshRegistry";
 import { extractSceneGraph } from "../dom/Extractor";
 import {
   DIRTY_NONE,
   DIRTY_RECT,
   DIRTY_STRUCTURE,
+  DIRTY_CONTENT
+  ,
   DIRTY_STYLE,
   USER_LAYER,
   SYSTEM_LAYER,
   Visibility,
+  StyleData,
 } from "../types";
+import { extractFromStyle, animateMeshByData, updateFixedMeshesScroll } from "../animation/Animator";
 
 interface InternalResizeConfig {
   enabled: boolean;
@@ -21,9 +26,12 @@ interface InternalResizeConfig {
 export class Syncer {
   private target: HTMLElement;
   private renderer: Renderer;
+  private registry: MeshRegistry;
   private filter: CoreConfig["filter"];
 
   private observer: MutationObserver;
+  private pendingDeletions: Set<HTMLElement> = new Set();
+  private pendingStyles: Map<HTMLElement, StyleData> = new Map();
 
   private isDomDirty: boolean = false;
   private isRunning: boolean = false;
@@ -38,9 +46,19 @@ export class Syncer {
   private resizeTimer: number | null = null;
   private isResizing: boolean = false;
 
-  constructor(target: HTMLElement, renderer: Renderer, config: CoreConfig) {
+  private lastScrollX: number = 0;
+  private lastScrollY: number = 0;
+  private scrollTimer: number | null = null;
+
+  constructor(
+    target: HTMLElement,
+    renderer: Renderer,
+    registry: MeshRegistry,
+    config: CoreConfig,
+  ) {
     this.target = target;
     this.renderer = renderer;
+    this.registry = registry;
     this.filter = config.filter;
 
     // Resize Debounce Configuration
@@ -64,13 +82,28 @@ export class Syncer {
       for (const mutation of mutations) {
         if (mutation.type === "childList") {
           currentMask |= DIRTY_STRUCTURE;
+          if (mutation.removedNodes.length > 0) {
+            mutation.removedNodes.forEach((node) => {
+              if (node instanceof HTMLElement) {
+                this.pendingDeletions.add(node);
+              }
+            });
+          }
         } else if (mutation.type === "attributes") {
-          if (
-            mutation.attributeName === "style" ||
-            mutation.attributeName === "class"
-          ) {
+          if (mutation.attributeName === "style") {
+            currentMask |= DIRTY_RECT | DIRTY_STYLE;
+            const target = mutation.target as HTMLElement;
+
+            const extractedStyleData = extractFromStyle(target.style);
+            // console.log(extractedStyleData);
+            this.pendingStyles.set(target, extractedStyleData);
+          } else if (mutation.attributeName === "class") {
             currentMask |= DIRTY_RECT | DIRTY_STYLE;
           }
+          // else if (mutation.attributeName === "data-mirage") {
+          // }
+        } else if (mutation.type === "characterData") {
+          currentMask |= DIRTY_CONTENT | DIRTY_RECT;
         }
       }
 
@@ -80,7 +113,6 @@ export class Syncer {
         // Structural Change detected
         if (currentMask & DIRTY_STRUCTURE) {
           this.clearTimers();
-          console.log("Structural Change detected");
           this.isDomDirty = true;
           return;
         }
@@ -109,7 +141,6 @@ export class Syncer {
 
     this.target.addEventListener("transitionend", this.onTransitionFinished);
     this.target.addEventListener("animationend", this.onTransitionFinished);
-
     window.addEventListener("resize", this.onWindowResize);
 
     this.forceUpdateScene();
@@ -138,17 +169,18 @@ export class Syncer {
       clearTimeout(this.cssTimer);
       this.cssTimer = null;
     }
+    if (this.scrollTimer) {
+      clearTimeout(this.scrollTimer);
+      this.scrollTimer = null;
+    }
   }
 
   private onTransitionFinished = (e: Event) => {
     if (!this.target.contains(e.target as Node)) return;
-
     if (this.mutationTimer !== null) return;
-
     if (this.cssTimer) clearTimeout(this.cssTimer);
-
+    if (this.pendingStyles.size != 0) return;
     this.pendingMask |= DIRTY_RECT | DIRTY_STYLE;
-
     this.cssTimer = window.setTimeout(() => {
       this.isDomDirty = true;
       this.cssTimer = null;
@@ -160,17 +192,13 @@ export class Syncer {
       this.isDomDirty = true;
       return;
     }
-
     if (!this.isResizing) {
       this.isResizing = true;
       if (this.resizeConfig.onStart) this.resizeConfig.onStart();
     }
-
     if (this.resizeTimer) clearTimeout(this.resizeTimer);
-
     this.resizeTimer = window.setTimeout(() => {
       this.isDomDirty = true;
-
       if (this.resizeConfig.onEnd) this.resizeConfig.onEnd();
       this.isResizing = false;
       this.resizeTimer = null;
@@ -179,6 +207,9 @@ export class Syncer {
 
   private forceUpdateScene() {
     this.isDomDirty = false;
+    
+    this.lastScrollX = window.scrollX;
+    this.lastScrollY = window.scrollY;
 
     const discoveredTraveler =
       document.querySelector("[data-mirage-travel='traveler']") !== null;
@@ -197,7 +228,8 @@ export class Syncer {
     );
 
     if (sceneGraph) {
-      this.renderer.syncScene(sceneGraph);
+      this.renderer.syncScene(sceneGraph, this.pendingDeletions);
+      this.pendingDeletions.clear();
     }
 
     this.pendingMask = DIRTY_NONE;
@@ -210,7 +242,30 @@ export class Syncer {
       this.forceUpdateScene();
     }
 
+    const currentScrollX = window.scrollX;
+    const currentScrollY = window.scrollY;
+    if (currentScrollX !== this.lastScrollX || currentScrollY !== this.lastScrollY) {
+      updateFixedMeshesScroll(this.renderer.fixedMeshes, currentScrollX, currentScrollY);
+
+      this.lastScrollX = currentScrollX;
+      this.lastScrollY = currentScrollY;
+
+      if (this.scrollTimer) clearTimeout(this.scrollTimer);
+      this.scrollTimer = window.setTimeout(() => {
+        this.pendingMask |= DIRTY_RECT;
+        this.isDomDirty = true;
+        this.scrollTimer = null;
+      }, 150);
+    }
+
+    if (this.pendingStyles.size > 0) {
+      animateMeshByData(this.registry, this.pendingStyles);
+      this.pendingStyles.clear();
+    }
+
     this.renderer.render();
     requestAnimationFrame(this.renderLoop);
   };
+
+  // [ThinkPoint] change call back pattern when after
 }

package/src/dom/Extractor.ts

@@ -16,16 +16,119 @@ import { FilterConfig } from "../types/config";
 
 // Helper function: getTextNodeRect, isValidTextNode, isLeafTextElement, extractTextStyles
 
-function getTextNodeRect(textNode: Text) {
-  const range = document.createRange();
-  range.selectNodeContents(textNode);
-  const rect = range.getBoundingClientRect();
-  return {
-    left: rect.left,
-    top: rect.top,
-    width: rect.width,
-    height: rect.height,
+function extractTextLines(textNode: Text): { text: string; rect: { left: number; top: number; width: number; height: number } }[] {
+  const text = textNode.textContent || "";
+  const lines: { text: string; rect: { left: number; top: number; width: number; height: number } }[] = [];
+  
+  let currentLineText = "";
+  let currentLineRect: { left: number; top: number; right: number; bottom: number } | null = null;
+  let currentTop = -1;
+
+  const processChunk = (chunkText: string, offset: number) => {
+    for (let i = 0; i < chunkText.length; i++) {
+      const char = chunkText[i];
+      const range = document.createRange();
+      range.setStart(textNode, offset + i);
+      range.setEnd(textNode, offset + i + 1);
+      const rect = range.getBoundingClientRect();
+      
+      if (rect.width === 0 && rect.height === 0) {
+        currentLineText += char;
+        continue;
+      }
+
+      if (currentTop === -1 || Math.abs(rect.top - currentTop) > rect.height / 2) {
+        if (currentLineText && currentLineRect) {
+          lines.push({
+            text: currentLineText,
+            rect: {
+              left: currentLineRect.left,
+              top: currentLineRect.top,
+              width: currentLineRect.right - currentLineRect.left,
+              height: currentLineRect.bottom - currentLineRect.top,
+            },
+          });
+        }
+        currentLineText = char;
+        currentLineRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+        currentTop = rect.top;
+      } else {
+        currentLineText += char;
+        if (currentLineRect) {
+          currentLineRect.left = Math.min(currentLineRect.left, rect.left);
+          currentLineRect.top = Math.min(currentLineRect.top, rect.top);
+          currentLineRect.right = Math.max(currentLineRect.right, rect.right);
+          currentLineRect.bottom = Math.max(currentLineRect.bottom, rect.bottom);
+        }
+      }
+    }
   };
+
+  const tokens = text.match(/[^\s\-]+\-?|\-|\s+/g) || [];
+  let currentOffset = 0;
+
+  for (const token of tokens) {
+    const range = document.createRange();
+    range.setStart(textNode, currentOffset);
+    range.setEnd(textNode, currentOffset + token.length);
+    const rects = range.getClientRects();
+
+    if (rects.length > 1) {
+      // Token wraps across lines (e.g. word-break: break-all)
+      // Fallback to precise character-by-character iteration for this token
+      processChunk(token, currentOffset);
+    } else {
+      // Token is on a single line. Process it as a single block!
+      const rect = rects.length === 1 ? rects[0] : range.getBoundingClientRect();
+      
+      if (rect.width === 0 && rect.height === 0) {
+        currentLineText += token;
+        currentOffset += token.length;
+        continue;
+      }
+
+      if (currentTop === -1 || Math.abs(rect.top - currentTop) > rect.height / 2) {
+        if (currentLineText && currentLineRect) {
+          lines.push({
+            text: currentLineText,
+            rect: {
+              left: currentLineRect.left,
+              top: currentLineRect.top,
+              width: currentLineRect.right - currentLineRect.left,
+              height: currentLineRect.bottom - currentLineRect.top,
+            },
+          });
+        }
+        currentLineText = token;
+        currentLineRect = { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+        currentTop = rect.top;
+      } else {
+        currentLineText += token;
+        if (currentLineRect) {
+          currentLineRect.left = Math.min(currentLineRect.left, rect.left);
+          currentLineRect.top = Math.min(currentLineRect.top, rect.top);
+          currentLineRect.right = Math.max(currentLineRect.right, rect.right);
+          currentLineRect.bottom = Math.max(currentLineRect.bottom, rect.bottom);
+        }
+      }
+    }
+    
+    currentOffset += token.length;
+  }
+
+  if (currentLineText && currentLineRect) {
+    lines.push({
+      text: currentLineText,
+      rect: {
+        left: currentLineRect.left,
+        top: currentLineRect.top,
+        width: currentLineRect.right - currentLineRect.left,
+        height: currentLineRect.bottom - currentLineRect.top,
+      },
+    });
+  }
+
+  return lines.filter(line => line.text.trim().length > 0 && line.rect.width > 0 && line.rect.height > 0);
 }
 
 function extractTextStyles(computed: CSSStyleDeclaration): TextStyles {
@@ -40,6 +143,7 @@ function extractTextStyles(computed: CSSStyleDeclaration): TextStyles {
   }
   return {
     font: `${computed.fontStyle} ${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`,
+    fontSize: computed.fontSize,
     color: computed.color,
     textAlign: (computed.textAlign as CanvasTextAlign) || "start",
     textBaseline: "alphabetic",
@@ -64,47 +168,71 @@ export function extractSceneGraph(
     const textNode = sourceNode as Text;
     // empthy text check
     if (!textNode.textContent || !textNode.textContent.trim()) return null;
-    const normalizedText = textNode.textContent.replace(/\s+/g, " ").trim();
+    const normalizedText = textNode.textContent.replace(/\s+/g, " ");
     if (normalizedText.length === 0) return null;
 
-    const rect = getTextNodeRect(textNode);
+    const textLines = extractTextLines(textNode);
 
-    // size check
-    if (rect.width === 0 || rect.height === 0) return null;
+    if (textLines.length === 0) return null;
 
     // Cascading Styles
     const parent = textNode.parentElement;
     const computed = parent ? window.getComputedStyle(parent) : null;
     if (!computed) return null;
 
-    // Create SceneNode for text node
+    // Calculate overall bounding box of the lines
+    const minX = Math.min(...textLines.map(l => l.rect.left));
+    const minY = Math.min(...textLines.map(l => l.rect.top));
+    const maxX = Math.max(...textLines.map(l => l.rect.left + l.rect.width));
+    const maxY = Math.max(...textLines.map(l => l.rect.top + l.rect.height));
+
+    // Create SceneNode for the text node
     return {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: textNode as unknown as HTMLElement,
       rect: {
-        x: rect.left + window.scrollX,
-        y: rect.top + window.scrollY,
-        width: rect.width,
-        height: rect.height,
+        x: minX + window.scrollX,
+        y: minY + window.scrollY,
+        width: maxX - minX,
+        height: maxY - minY,
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(computed.opacity),
+        backgroundImage: "",
+        opacity:
+          parent && parent.dataset.mirageDom === "hide"
+            ? 1
+            : parseFloat(computed.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px",
+        isTraveler: false,
       },
       textContent: normalizedText,
+      textLines: textLines.map(l => ({
+        text: l.text.trim(),
+        rect: {
+          x: l.rect.left + window.scrollX,
+          y: l.rect.top + window.scrollY,
+          width: l.rect.width,
+          height: l.rect.height,
+        }
+      })),
       textStyles: extractTextStyles(computed),
       dirtyMask: initialMask,
       visibility: inheritedFlow,
       isTraveler: false,
+      isFixed: computed.position === "fixed",
       children: [],
     };
   }
 
+  if (sourceNode.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
+
   const element = sourceNode as HTMLElement;
   // [[Filter]] data attribute based filtering
   const filterData = element.dataset.mirageFilter;
@@ -197,13 +325,29 @@ export function extractSceneGraph(
   }
 
   const zIndex = parseInt(computed.zIndex);
+  // console.log(`${element.id}: ${computed.background}`);
+  // console.log(computed.backgroundImage);
+  let imageSrc: string | undefined;
+  if (element.tagName === "IMG") {
+    imageSrc = (element as HTMLImageElement).src;
+  } else if (computed.backgroundImage && computed.backgroundImage !== "none") {
+    const match = computed.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    if (match) {
+      imageSrc = match[1];
+    }
+  }
+
   const styles: BoxStyles = {
     backgroundColor: computed.backgroundColor,
-    opacity: parseFloat(computed.opacity),
+    backgroundImage: computed.backgroundImage,
+    opacity:
+      element.dataset.mirageDom === "hide" ? 1 : parseFloat(computed.opacity),
     zIndex: isNaN(zIndex) ? 0 : zIndex,
     borderRadius: computed.borderRadius,
     borderColor: computed.borderColor,
     borderWidth: computed.borderWidth,
+    imageSrc,
+    isTraveler,
   };
 
   let textContent: string | undefined;
@@ -240,6 +384,7 @@ export function extractSceneGraph(
     dirtyMask: initialMask,
     visibility: visibleFlag,
     isTraveler: isTraveler,
+    isFixed: computed.position === "fixed",
     children,
     shaderHooks,
   };