From 2614071618abd8101565482cc5851d49e062d9c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 19:01:20 -0400
Subject: [PATCH] feat(studio): show main composition behind component
 sub-composition previews

When previewing a component (compositions/components/*), render the
main composition player as a backdrop behind the transparent component
overlay. This lets users see captions, vignettes, and other overlays
in context instead of against a black void.
---
 packages/studio/src/components/nle/NLEPreview.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/studio/src/components/nle/NLEPreview.tsx b/packages/studio/src/components/nle/NLEPreview.tsx
index 7f2d7e543..8ceb1b729 100644
--- a/packages/studio/src/components/nle/NLEPreview.tsx
+++ b/packages/studio/src/components/nle/NLEPreview.tsx
@@ -391,6 +391,16 @@ export const NLEPreview = memo(function NLEPreview({
             }}
             data-testid="preview-zoom-stage"
           >
+            {directUrl?.includes("/components/") && (
+              <Player
+                key={`backdrop-${projectId}`}
+                projectId={projectId}
+                onLoad={() => {}}
+                portrait={portrait}
+                suppressLoadingOverlay
+                style={{ position: "absolute", inset: 0, zIndex: 0 }}
+              />
+            )}
             <Player
               key={activeKey}
               ref={iframeRef}
@@ -403,6 +413,11 @@ export const NLEPreview = memo(function NLEPreview({
               onCompositionLoadingChange={onCompositionLoadingChange}
               portrait={portrait}
               suppressLoadingOverlay={suppressLoadingOverlay}
+              style={
+                directUrl?.includes("/components/")
+                  ? { position: "absolute", inset: 0, zIndex: 1 }
+                  : undefined
+              }
             />
           </div>
         </div>