From 30821cd35ca9b0f48dfae6eed0ba2691f2a89636 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 25 Mar 2026 16:39:43 -0700
Subject: [PATCH] fix(cli): flat asset structure + separate audio tracks in
 templates

Assets: video, images, fonts all go at project root (not assets/ or
fonts/ subdirectories). The studio preview can't resolve relative
paths from subdirectories due to the /preview URL suffix.

Audio: added <audio> elements alongside muted <video> in all 4
templates so the video's audio plays back. The framework requires
muted video + separate audio element.

Removed assets/ and fonts/ directory creation from scaffoldProject.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/cli/src/commands/init.ts                |  7 +++----
 packages/cli/src/templates/play-mode/index.html  |  8 ++++++++
 packages/cli/src/templates/swiss-grid/index.html |  8 ++++++++
 packages/cli/src/templates/vignelli/index.html   |  8 ++++++++
 packages/cli/src/templates/warm-grain/index.html | 10 +++++++++-
 5 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 7d3c6360bd..f328d85d02 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -590,10 +590,9 @@ export default defineCommand({
           localVideoName = result.localVideoName;
         } else {
           // Audio file — copy to assets/
-          const assetsDir = resolve(destDir, "assets");
-          mkdirSync(assetsDir, { recursive: true });
-          copyFileSync(filePath, resolve(assetsDir, basename(filePath)));
-          clack.log.info(`Audio copied to ${c.accent("assets/" + basename(filePath))}`);
+
+          copyFileSync(filePath, resolve(destDir, basename(filePath)));
+          clack.log.info(`Audio copied to ${c.accent(basename(filePath))}`);
         }
       }
     }
diff --git a/packages/cli/src/templates/play-mode/index.html b/packages/cli/src/templates/play-mode/index.html
index 84654a7e88..2378f97c3b 100644
--- a/packages/cli/src/templates/play-mode/index.html
+++ b/packages/cli/src/templates/play-mode/index.html
@@ -151,6 +151,14 @@
             style="width: 100%; height: auto"
           ></video>
         </div>
+        <audio
+          id="a-roll-audio"
+          src="__VIDEO_SRC__"
+          data-start="0"
+          data-duration="16.04"
+          data-track-index="5"
+          data-volume="1"
+        ></audio>
         <style>
           #aroll-container {
             position: absolute;
diff --git a/packages/cli/src/templates/swiss-grid/index.html b/packages/cli/src/templates/swiss-grid/index.html
index e7c9a79b3d..406295e67c 100644
--- a/packages/cli/src/templates/swiss-grid/index.html
+++ b/packages/cli/src/templates/swiss-grid/index.html
@@ -106,6 +106,14 @@
           data-track-index="1"
         ></video>
       </div>
+      <audio
+        id="a-roll-audio"
+        src="__VIDEO_SRC__"
+        data-start="0"
+        data-duration="16.04"
+        data-track-index="5"
+        data-volume="1"
+      ></audio>
 
       <!-- Intro Sub-composition -->
       <div
diff --git a/packages/cli/src/templates/vignelli/index.html b/packages/cli/src/templates/vignelli/index.html
index 0593c3ef18..efacc44027 100644
--- a/packages/cli/src/templates/vignelli/index.html
+++ b/packages/cli/src/templates/vignelli/index.html
@@ -119,6 +119,14 @@
           data-track-index="0"
         ></video>
       </div>
+      <audio
+        id="a-roll-audio"
+        src="__VIDEO_SRC__"
+        data-start="0"
+        data-duration="13.88"
+        data-track-index="5"
+        data-volume="1"
+      ></audio>
 
       <!-- Transitions -->
       <div id="curtain-black" class="curtain"></div>
diff --git a/packages/cli/src/templates/warm-grain/index.html b/packages/cli/src/templates/warm-grain/index.html
index 40e395829d..47ade7924c 100644
--- a/packages/cli/src/templates/warm-grain/index.html
+++ b/packages/cli/src/templates/warm-grain/index.html
@@ -123,7 +123,7 @@
         </script>
       </div>
 
-      <!-- A-Roll Video -->
+      <!-- A-Roll Video (muted — audio is separate) -->
       <video
         id="a-roll"
         src="__VIDEO_SRC__"
@@ -133,6 +133,14 @@
         data-duration="17"
         data-track-index="0"
       ></video>
+      <audio
+        id="a-roll-audio"
+        src="__VIDEO_SRC__"
+        data-start="0"
+        data-duration="17"
+        data-track-index="5"
+        data-volume="1"
+      ></audio>
 
       <!-- Compositions -->
       <div