From 34a4ad2ed351d777ec1ac849c41b6adc10196d69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 17:57:52 -0400
Subject: [PATCH] fix(studio): read z-index from live iframe DOM, rename Layer
 to Z-index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace fragile regex z-index parsing with getComputedStyle on the
preview iframe elements — the same source of truth the inspector uses.

Rename "Layer" to "Z-index" in the design panel for clarity.
---
 packages/studio/src/App.tsx                   |  3 +++
 .../src/components/editor/PropertyPanel.tsx   |  2 +-
 packages/studio/src/utils/blockInstaller.ts   | 23 ++++++++++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index b8e397197..4f191dcb6 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -192,6 +192,7 @@ export function StudioApp() {
           projectId,
           blockName,
           activeCompPath,
+          previewIframe: previewIframeRef.current,
           timelineElements,
           readProjectFile: fileManager.readProjectFile,
           writeProjectFile: fileManager.writeProjectFile,
@@ -235,6 +236,7 @@ export function StudioApp() {
         blockName,
         activeCompPath,
         placement,
+        previewIframe: previewIframeRef.current,
         timelineElements,
         readProjectFile: fileManager.readProjectFile,
         writeProjectFile: fileManager.writeProjectFile,
@@ -265,6 +267,7 @@ export function StudioApp() {
         blockName,
         activeCompPath,
         visualPosition: position,
+        previewIframe: previewIframeRef.current,
         timelineElements,
         readProjectFile: fileManager.readProjectFile,
         writeProjectFile: fileManager.writeProjectFile,
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 96a220862..d40ab0974 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -323,7 +323,7 @@ export const PropertyPanel = memo(function PropertyPanel({
           </div>
           <div className="mt-3">
             <MetricField
-              label="Layer"
+              label="Z-index"
               value={String(parseInt(styles["z-index"] || "auto", 10) || 0)}
               scrub
               onCommit={(next) => onSetStyle("z-index", next)}
diff --git a/packages/studio/src/utils/blockInstaller.ts b/packages/studio/src/utils/blockInstaller.ts
index cc8452241..816c9faaf 100644
--- a/packages/studio/src/utils/blockInstaller.ts
+++ b/packages/studio/src/utils/blockInstaller.ts
@@ -9,12 +9,28 @@ import { formatTimelineAttributeNumber } from "../player/components/timelineEdit
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
 import type { EditHistoryKind } from "./editHistory";
 
+function getMaxZIndexFromIframe(iframe: HTMLIFrameElement | null): number {
+  try {
+    const doc = iframe?.contentDocument;
+    if (!doc) return 0;
+    let max = 0;
+    for (const el of doc.body.querySelectorAll("*")) {
+      const z = parseInt(getComputedStyle(el).zIndex, 10);
+      if (Number.isFinite(z) && z > max) max = z;
+    }
+    return max;
+  } catch {
+    return 0;
+  }
+}
+
 interface AddBlockOptions {
   projectId: string;
   blockName: string;
   activeCompPath: string | null;
   placement?: { start: number; track: number };
   visualPosition?: { left: number; top: number };
+  previewIframe?: HTMLIFrameElement | null;
   timelineElements: TimelineElement[];
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -126,12 +142,7 @@ export async function addBlockToProject(
             ? Math.max(...relevantElements.map((te) => te.track)) + 1
             : 1);
 
-      const zIndexMatches = originalContent.matchAll(/z-index:\s*(\d+)/g);
-      let maxExistingZ = 0;
-      for (const m of zIndexMatches) {
-        maxExistingZ = Math.max(maxExistingZ, parseInt(m[1]!, 10));
-      }
-      const zIndex = maxExistingZ + 1;
+      const zIndex = getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1;
 
       const width = isBlock
         ? (block as { dimensions: { width: number } }).dimensions.width