From d6a0c407d7ab41ae171b85f4bd97b79cbf4b1f3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 18 Sep 2026 12:01:13 -0400
Subject: [PATCH] fix(registry): scope the 12 vscode-theme blocks' root id and
 fix their asset path (#4094)

---
 .../code-snippet-dark-2026/code-snippet-dark-2026.html       | 5 +++--
 .../code-snippet-dark-modern/code-snippet-dark-modern.html   | 5 +++--
 .../code-snippet-dark-plus/code-snippet-dark-plus.html       | 5 +++--
 .../code-snippet-high-contrast-light.html                    | 5 +++--
 .../code-snippet-high-contrast.html                          | 5 +++--
 .../code-snippet-light-2026/code-snippet-light-2026.html     | 5 +++--
 .../code-snippet-light-modern/code-snippet-light-modern.html | 5 +++--
 .../code-snippet-light-plus/code-snippet-light-plus.html     | 5 +++--
 .../blocks/code-snippet-monokai/code-snippet-monokai.html    | 5 +++--
 .../code-snippet-solarized-light.html                        | 5 +++--
 .../code-snippet-visual-studio-dark.html                     | 5 +++--
 .../code-snippet-visual-studio-light.html                    | 5 +++--
 12 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html b/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
index 944432036f..5802ed227c 100644
--- a/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
+++ b/registry/blocks/code-snippet-dark-2026/code-snippet-dark-2026.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-dark-2026-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-dark-2026"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html b/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
index bc94fb6aeb..87c48da8d1 100644
--- a/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
+++ b/registry/blocks/code-snippet-dark-modern/code-snippet-dark-modern.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-dark-modern-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-dark-modern"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html b/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
index a1049df31a..0798646b19 100644
--- a/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
+++ b/registry/blocks/code-snippet-dark-plus/code-snippet-dark-plus.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-dark-plus-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-dark-plus"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html b/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
index 4d1e6b2abb..458449b63e 100644
--- a/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
+++ b/registry/blocks/code-snippet-high-contrast-light/code-snippet-high-contrast-light.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-high-contrast-light-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-high-contrast-light"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html b/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
index c9b6ece431..b4a562dcea 100644
--- a/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
+++ b/registry/blocks/code-snippet-high-contrast/code-snippet-high-contrast.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-high-contrast-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-high-contrast"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html b/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
index 492d930b13..dcd8e0b09e 100644
--- a/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
+++ b/registry/blocks/code-snippet-light-2026/code-snippet-light-2026.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-light-2026-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-light-2026"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html b/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
index c86428cc19..b42746122e 100644
--- a/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
+++ b/registry/blocks/code-snippet-light-modern/code-snippet-light-modern.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-light-modern-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-light-modern"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html b/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
index 49d4e44ee0..c2c870c51f 100644
--- a/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
+++ b/registry/blocks/code-snippet-light-plus/code-snippet-light-plus.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-light-plus-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-light-plus"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-monokai/code-snippet-monokai.html b/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
index d6956a864d..c6a60cb6b6 100644
--- a/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
+++ b/registry/blocks/code-snippet-monokai/code-snippet-monokai.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-monokai-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-monokai"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html b/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
index fd933b0a77..9b67f06be6 100644
--- a/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
+++ b/registry/blocks/code-snippet-solarized-light/code-snippet-solarized-light.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-solarized-light-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-solarized-light"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html b/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
index 437dc16874..0e539663e0 100644
--- a/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
+++ b/registry/blocks/code-snippet-visual-studio-dark/code-snippet-visual-studio-dark.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-visual-studio-dark-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-visual-studio-dark"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }
 
diff --git a/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html b/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
index 982d261993..1dd4c30d01 100644
--- a/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
+++ b/registry/blocks/code-snippet-visual-studio-light/code-snippet-visual-studio-light.html
@@ -8,6 +8,7 @@
   <body>
     <template id="vscode-visual-studio-light-template">
       <div
+        id="root"
         class="vscode-theme-scene"
         data-composition-id="vscode-visual-studio-light"
         data-width="1920"
@@ -135,7 +136,7 @@
               sans-serif;
           }
 
-          .vscode-theme-scene {
+          #root {
             --activity-bg: #181818;
             --activity-fg: #d7d7d7;
             --activity-muted: #868686;
@@ -176,7 +177,7 @@
             overflow: hidden;
             background:
               linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
-              url("../assets/background.jpeg") center / cover no-repeat;
+              url("assets/background.jpeg") center / cover no-repeat;
             color: var(--editor-fg);
           }