@mirage-engine/core 0.2.1 → 0.3.0

package/src/dom/Extractor.ts

@@ -7,25 +7,171 @@ import {
   SceneNode,
   Visibility,
   USER_LAYER,
-  SYSTEM_LAYER,
+  SELECT_LAYER,
   ALLOWED_FILTERS,
+  ATTR_DOM,
+  ATTR_FILTER,
+  ATTR_SELECT,
+  ATTR_TRAVEL,
+  ATTR_SHADER,
 } from "../types";
 
 import { BoxStyles, TextStyles, ShaderHooks } from "@mirage-engine/painter";
-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 +186,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",
@@ -57,64 +204,124 @@ export function extractSceneGraph(
     DIRTY_CONTENT |
     DIRTY_STRUCTURE,
   inheritedFlow: Visibility,
-  filterConfig?: FilterConfig,
+  captureLayer: number = 1,
+  inheritedZIndex: number = 0,
+  qualityFactor: number = 2,
+  inheritedNativeLayer?: number,
+  inheritedNativeStyles?: any,
 ): SceneNode | null {
   // Check text node
   if (sourceNode.nodeType === Node.TEXT_NODE) {
     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),
-        zIndex: 0,
+        backgroundImage: "",
+        opacity:
+          parent && parent.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
+            ? 1
+            : parseFloat(computed.opacity),
+        zIndex:
+          (isNaN(parseInt(computed.zIndex)) ? 0 : parseInt(computed.zIndex)) +
+          inheritedZIndex,
         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,
+      captureLayer,
+      isFixed: computed.position === "fixed",
+      nativeLayer: inheritedNativeLayer,
+      nativeStyles: inheritedNativeStyles
+        ? {
+            backgroundColor: "transparent",
+            backgroundImage: "",
+            opacity:
+              parent && parent.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
+                ? 1
+                : parseFloat(computed.opacity),
+            zIndex:
+              (isNaN(parseInt(computed.zIndex))
+                ? 0
+                : parseInt(computed.zIndex)) + inheritedZIndex,
+            borderRadius: "0px",
+            borderColor: "transparent",
+            borderWidth: "0px",
+            isTraveler: false,
+            ...extractTextStyles(computed),
+            ...inheritedNativeStyles,
+          }
+        : undefined,
+      nativeRect: inheritedNativeStyles
+        ? {
+            x: minX + window.scrollX,
+            y: minY + window.scrollY,
+            width: maxX - minX,
+            height: maxY - minY,
+          }
+        : undefined,
       children: [],
     };
   }
 
+  if (sourceNode.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
+
   const element = sourceNode as HTMLElement;
   // [[Filter]] data attribute based filtering
-  const filterData = element.dataset.mirageFilter;
+  const filterData = element.dataset[ATTR_FILTER.KEY];
   let visibleFlow = inheritedFlow;
   let visibleFlag = inheritedFlow;
   if (filterData) {
     const filterSet = new Set(filterData.split(/\s+/));
     // error check
     for (const token of filterSet) {
-      if (!ALLOWED_FILTERS.includes(token)) {
+      if (!ALLOWED_FILTERS.includes(token as any)) {
         throw new Error(
           `[MirageEngine] Invalid filter token: '${token}'. ` +
             `Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`,
@@ -122,58 +329,152 @@ export function extractSceneGraph(
       }
     }
 
-    if (filterSet.has("end")) return null;
+    if (filterSet.has(ATTR_FILTER.VALUES.END)) return null;
 
     // error check
-    if (filterSet.has("include-tree") && filterSet.has("exclude-tree")) {
+    if (
+      filterSet.has(ATTR_FILTER.VALUES.INCLUDE_TREE) &&
+      filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_TREE)
+    ) {
       throw new Error(
         `[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element.`,
       );
     }
-    if (filterSet.has("include-self") && filterSet.has("exclude-self")) {
+    if (
+      filterSet.has(ATTR_FILTER.VALUES.INCLUDE_SELF) &&
+      filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_SELF)
+    ) {
       throw new Error(
         `[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element.`,
       );
     }
 
-    if (filterSet.has("include-tree")) {
+    if (filterSet.has(ATTR_FILTER.VALUES.INCLUDE_TREE)) {
       visibleFlow = (visibleFlow | USER_LAYER) as Visibility;
-    } else if (filterSet.has("exclude-tree")) {
+    } else if (filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_TREE)) {
       visibleFlow = (visibleFlow & ~USER_LAYER) as Visibility;
     }
 
     visibleFlag = visibleFlow;
 
-    if (filterSet.has("include-self")) {
+    if (filterSet.has(ATTR_FILTER.VALUES.INCLUDE_SELF)) {
       visibleFlag = (visibleFlag | USER_LAYER) as Visibility;
-    } else if (filterSet.has("exclude-self")) {
+    } else if (filterSet.has(ATTR_FILTER.VALUES.EXCLUDE_SELF)) {
       visibleFlag = (visibleFlag & ~USER_LAYER) as Visibility;
     }
   }
 
-  // [[filter]] class based filtering
-  // [Filter] end
-  // if (filterConfig && filterConfig.end && filterConfig.end.length > 0) {
-  //   const isEnd = filterConfig.end.some((cls) =>
-  //     element.classList.contains(cls),
-  //   );
-  //   if (isEnd) return null;
-  // }
+  // [[Select]] data attribute based selecting
+  const selectData = element.dataset[ATTR_SELECT.KEY];
+  if (selectData) {
+    const selectSet = new Set(selectData.split(/\s+/));
+    // error check
+    for (const token of selectSet) {
+      if (!ALLOWED_FILTERS.includes(token as any)) {
+        throw new Error(
+          `[MirageEngine] Invalid select token: '${token}'. ` +
+            `Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`,
+        );
+      }
+    }
+
+    if (selectSet.has(ATTR_SELECT.VALUES.END)) return null;
 
-  visibleFlag = (visibleFlag | (inheritedFlow & SYSTEM_LAYER)) as Visibility;
+    if (
+      selectSet.has(ATTR_SELECT.VALUES.INCLUDE_TREE) &&
+      selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_TREE)
+    ) {
+      throw new Error(
+        `[MirageEngine] Conflicting selects: 'include-tree' and 'exclude-tree' cannot be used together on the same element.`,
+      );
+    }
+    if (
+      selectSet.has(ATTR_SELECT.VALUES.INCLUDE_SELF) &&
+      selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_SELF)
+    ) {
+      throw new Error(
+        `[MirageEngine] Conflicting selects: 'include-self' and 'exclude-self' cannot be used together on the same element.`,
+      );
+    }
+
+    if (selectSet.has(ATTR_SELECT.VALUES.INCLUDE_TREE)) {
+      visibleFlow = (visibleFlow | SELECT_LAYER) as Visibility;
+    } else if (selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_TREE)) {
+      visibleFlow = (visibleFlow & ~SELECT_LAYER) as Visibility;
+    }
+
+    visibleFlag = visibleFlow;
+
+    if (selectSet.has(ATTR_SELECT.VALUES.INCLUDE_SELF)) {
+      visibleFlag = (visibleFlag | SELECT_LAYER) as Visibility;
+    } else if (selectSet.has(ATTR_SELECT.VALUES.EXCLUDE_SELF)) {
+      visibleFlag = (visibleFlag & ~SELECT_LAYER) as Visibility;
+    }
+  }
 
-  const travelData = element.dataset.mirageTravel;
+  const travelData = element.dataset[ATTR_TRAVEL.KEY];
   let isTraveler = false;
+  let nativeParsedStyles: any = inheritedNativeStyles
+    ? { ...inheritedNativeStyles }
+    : {};
+  let nativeLayer: number | undefined = inheritedNativeLayer;
   if (travelData) {
-    const travelSet = new Set(travelData.split(/\s+/));
-    if (travelSet.has("traveler")) {
-      visibleFlag = (visibleFlag & ~SYSTEM_LAYER) as Visibility;
-      visibleFlow = (visibleFlow & ~SYSTEM_LAYER) as Visibility;
+    let explicitLayer = 1;
+
+    // '{' 부터 '}' 까지의 JSON 문자열 추출
+    const jsonStart = travelData.indexOf("{");
+    const jsonEnd = travelData.lastIndexOf("}");
+
+    let tokensPart = travelData;
+    if (jsonStart !== -1 && jsonEnd !== -1 && jsonEnd > jsonStart) {
+      tokensPart = travelData.substring(0, jsonStart).trim();
+      const jsonStr = travelData.substring(jsonStart, jsonEnd + 1);
+      try {
+        // 싱글 쿼트를 더블 쿼트로 변경하거나 키에 따옴표가 없는 객체를 지원하기 위해
+        // Function을 통한 안전한 객체 평가(또는 JSON.parse)를 사용
+        nativeParsedStyles = new Function("return " + jsonStr)();
+      } catch (e) {
+        console.warn(
+          `[MirageEngine] Failed to parse travel styles JSON: ${jsonStr}`,
+        );
+      }
+    }
+
+    const tokens = tokensPart.split(/\s+/);
+
+    let hasTravelToken = false;
+
+    // traveler 인 경우
+    if (tokens.includes(ATTR_TRAVEL.VALUES.TRAVELER)) {
       isTraveler = true;
+      hasTravelToken = true;
+      const numToken = tokens.find((t) => !isNaN(parseInt(t, 10)));
+      if (numToken) {
+        explicitLayer = parseInt(numToken, 10);
+      }
+    }
+    // native 인 경우
+    else if (tokens.includes(ATTR_TRAVEL.VALUES.NATIVE)) {
+      isTraveler = false;
+      const numToken = tokens.find((t) => !isNaN(parseInt(t, 10)));
+      if (numToken) {
+        nativeLayer = parseInt(numToken, 10);
+      }
+    }
+
+    // traveler만 명시된 레이어에 맞게 captureLayer 컨텍스트를 업데이트해야 함 (계층적 여행)
+    if (hasTravelToken) {
+      const targetCaptureLayer = explicitLayer + 1;
+      if (targetCaptureLayer < captureLayer) {
+        throw new Error(
+          `[MirageEngine] Traveler layer (${explicitLayer}) cannot be smaller than inherited capture layer (${captureLayer - 1}).`,
+        );
+      }
+      captureLayer = Math.min(targetCaptureLayer, ATTR_TRAVEL.MAX_LAYERS + 1);
     }
   }
 
-  const shaderData = element.dataset.mirageShader;
+  const shaderData = element.dataset[ATTR_SHADER.KEY];
   let shaderHooks: ShaderHooks | undefined;
   if (shaderData) {
     shaderHooks = JSON.parse(shaderData) as ShaderHooks;
@@ -196,33 +497,120 @@ export function extractSceneGraph(
     element.setAttribute("data-mid", id);
   }
 
-  const zIndex = parseInt(computed.zIndex);
-  const styles: BoxStyles = {
+  const localZIndex = parseInt(computed.zIndex);
+  const effectiveZIndex =
+    (isNaN(localZIndex) ? 0 : localZIndex) + inheritedZIndex;
+  // 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 (element.tagName.toLowerCase() === "svg") {
+    const clone = element.cloneNode(true) as SVGSVGElement;
+
+    const overrideColor = nativeParsedStyles?.color;
+    const overrideFill = nativeParsedStyles?.fill;
+    const overrideStroke = nativeParsedStyles?.stroke;
+    const overrideOpacity = nativeParsedStyles?.opacity;
+
+    const inlineSVGStyles = (orig: Element, cloned: Element) => {
+      const computed = window.getComputedStyle(orig);
+      const clonedHtml = cloned as HTMLElement;
+
+      const isCurrentColorFill = computed.fill === computed.color;
+      const isCurrentColorStroke = computed.stroke === computed.color;
+
+      const fill = overrideFill || (isCurrentColorFill ? overrideColor : undefined) || computed.fill;
+      if (fill && fill !== "none") clonedHtml.style.fill = fill;
+
+      const stroke = overrideStroke || (isCurrentColorStroke ? overrideColor : undefined) || computed.stroke;
+      if (stroke && stroke !== "none") clonedHtml.style.stroke = stroke;
+
+      if (computed.strokeWidth && computed.strokeWidth !== "0px")
+        clonedHtml.style.strokeWidth = computed.strokeWidth;
+
+      const color = overrideColor || computed.color;
+      if (color) clonedHtml.style.color = color;
+
+      const opacity = overrideOpacity || computed.opacity;
+      if (opacity && opacity !== "1") clonedHtml.style.opacity = opacity;
+
+      for (let i = 0; i < orig.children.length; i++) {
+        inlineSVGStyles(orig.children[i], cloned.children[i]);
+      }
+    };
+
+    inlineSVGStyles(element, clone);
+
+    const svgRect = element.getBoundingClientRect();
+    const scale = window.devicePixelRatio * qualityFactor; // High-DPI 대응을 위한 해상도 스케일업
+
+    if (!clone.hasAttribute("viewBox")) {
+      clone.setAttribute("viewBox", `0 0 ${svgRect.width} ${svgRect.height}`);
+    }
+
+    clone.setAttribute("width", (svgRect.width * scale).toString());
+    clone.setAttribute("height", (svgRect.height * scale).toString());
+
+    let svgString = new XMLSerializer().serializeToString(clone);
+    if (!svgString.includes("xmlns=")) {
+      svgString = svgString.replace(
+        "<svg",
+        '<svg xmlns="http://www.w3.org/2000/svg"',
+      );
+    }
+
+    imageSrc = `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+  } else if (computed.backgroundImage && computed.backgroundImage !== "none") {
+    const match = computed.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/);
+    if (match) {
+      imageSrc = match[1];
+    }
+  }
+
+  // Base node uses pure DOM styles, unpolluted by travelerStyles
+  const baseStyles: BoxStyles = {
     backgroundColor: computed.backgroundColor,
-    opacity: parseFloat(computed.opacity),
-    zIndex: isNaN(zIndex) ? 0 : zIndex,
+    backgroundImage: computed.backgroundImage,
+    opacity:
+      element.dataset[ATTR_DOM.KEY] === ATTR_DOM.VALUES.HIDE
+        ? 1
+        : parseFloat(computed.opacity),
+    zIndex: effectiveZIndex,
     borderRadius: computed.borderRadius,
     borderColor: computed.borderColor,
     borderWidth: computed.borderWidth,
+    imageSrc,
+    isTraveler: isTraveler,
   };
 
+  const styles: BoxStyles = baseStyles;
+
   let textContent: string | undefined;
   let textStyles: TextStyles | undefined;
   const children: SceneNode[] = [];
 
-  Array.from(element.childNodes).forEach((child) => {
-    const visibleFlowToPass =
-      child.nodeType === Node.TEXT_NODE ? visibleFlag : visibleFlow;
-    const childNode = extractSceneGraph(
-      child,
-      initialMask,
-      visibleFlowToPass,
-      filterConfig,
-    );
-    if (childNode) {
-      children.push(childNode);
-    }
-  });
+  if (element.tagName.toLowerCase() !== "svg") {
+    Array.from(element.childNodes).forEach((child) => {
+      const visibleFlowToPass =
+        child.nodeType === Node.TEXT_NODE ? visibleFlag : visibleFlow;
+      const childNode = extractSceneGraph(
+        child,
+        initialMask,
+        visibleFlowToPass,
+        captureLayer,
+        effectiveZIndex,
+        qualityFactor,
+        nativeLayer,
+        child.nodeType === Node.TEXT_NODE && Object.keys(nativeParsedStyles).length > 0
+          ? nativeParsedStyles
+          : undefined,
+      );
+      if (childNode) {
+        children.push(childNode);
+      }
+    });
+  }
 
   return {
     id,
@@ -240,6 +628,52 @@ export function extractSceneGraph(
     dirtyMask: initialMask,
     visibility: visibleFlag,
     isTraveler: isTraveler,
+    captureLayer,
+    nativeLayer,
+    nativeStyles:
+      nativeLayer !== undefined
+        ? {
+            ...baseStyles,
+            backgroundColor:
+              nativeParsedStyles.backgroundColor ?? baseStyles.backgroundColor,
+            backgroundImage:
+              nativeParsedStyles.backgroundImage ?? baseStyles.backgroundImage,
+            opacity: nativeParsedStyles.opacity ?? baseStyles.opacity,
+            zIndex:
+              nativeParsedStyles.zIndex !== undefined
+                ? nativeParsedStyles.zIndex + effectiveZIndex
+                : baseStyles.zIndex,
+            borderRadius:
+              nativeParsedStyles.borderRadius ?? baseStyles.borderRadius,
+            borderColor:
+              nativeParsedStyles.borderColor ?? baseStyles.borderColor,
+            borderWidth:
+              nativeParsedStyles.borderWidth ?? baseStyles.borderWidth,
+            isTraveler: baseStyles.isTraveler,
+          }
+        : undefined,
+    nativeRect:
+      nativeLayer !== undefined
+        ? {
+            x:
+              nativeParsedStyles.x !== undefined
+                ? parseFloat(nativeParsedStyles.x)
+                : rect.left + window.scrollX,
+            y:
+              nativeParsedStyles.y !== undefined
+                ? parseFloat(nativeParsedStyles.y)
+                : rect.top + window.scrollY,
+            width:
+              nativeParsedStyles.width !== undefined
+                ? parseFloat(nativeParsedStyles.width)
+                : rect.width,
+            height:
+              nativeParsedStyles.height !== undefined
+                ? parseFloat(nativeParsedStyles.height)
+                : rect.height,
+          }
+        : undefined,
+    isFixed: computed.position === "fixed",
     children,
     shaderHooks,
   };

package/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}