vargai 0.4.0-alpha84 → 0.4.0-alpha86

package/package.json

@@ -71,7 +71,7 @@
     "zod": "^4.2.1"
   },
   "sideEffects": false,
-  "version": "0.4.0-alpha84",
+  "version": "0.4.0-alpha86",
   "exports": {
     ".": "./src/index.ts",
     "./ai": "./src/ai-sdk/index.ts",

package/src/cli/commands/render.tsx

@@ -83,7 +83,7 @@ async function loadComponent(filePath: string): Promise<VargElement> {
 
   if (hasVargaiImport) {
     const tmpFile = `${tmpDir}/${Date.now()}.tsx`;
-    // Resolve @jsxImportSource to absolute path so it works from the cache dir
+    // Resolve JSX pragma to absolute path so it works from the cache dir
     const runtimeDir = resolve(pkgDir, "src/react/runtime");
     const resolvedSource = source.replace(
       /@jsxImportSource\s+vargai/,

package/src/react/renderers/render.ts

@@ -255,10 +255,18 @@ export async function renderRoot(
       }
     }
 
-    // Recurse into child clips, injecting container-level overlays
+    // Recurse into child clips, injecting container-level overlays.
+    // Mark them as clip-local (start: 0) so they are composited per-clip
+    // in buildBaseClipFilter instead of being swept into the global overlay
+    // pool by collectImageOverlays. Without this, the last container overlay
+    // visually wins across the entire video (all share the same position).
     for (const childClip of childClips) {
       if (containerOverlays.length > 0) {
-        childClip.children = [...childClip.children, ...containerOverlays];
+        const localOverlays = containerOverlays.map((ov) => ({
+          ...ov,
+          props: { ...ov.props, start: 0 },
+        }));
+        childClip.children = [...childClip.children, ...localOverlays];
       }
       flattenClip(childClip);
     }