@remotion/studio 4.0.508 → 4.0.510

package/dist/esm/renderEntry.mjs

@@ -4,7 +4,7 @@ import {
   WHITE,
   __require,
   __toESM
-} from "./chunk-fgedsvhb.js";
+} from "./chunk-r46yxrjr.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -170,6 +170,7 @@ var renderContent = (Root) => {
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
         previewSampleRate: window.remotion_previewSampleRate,
+        _experimentalKeepAudioContextAlive: false,
         children: /* @__PURE__ */ jsxs(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: [
@@ -197,6 +198,7 @@ var renderContent = (Root) => {
         numberOfAudioTags: 0,
         audioLatencyHint: window.remotion_audioLatencyHint ?? "playback",
         previewSampleRate: window.remotion_previewSampleRate,
+        _experimentalKeepAudioContextAlive: false,
         children: /* @__PURE__ */ jsx(Internals.RenderAssetManagerProvider, {
           collectAssets: null,
           children: /* @__PURE__ */ jsx(Root, {})
@@ -212,7 +214,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-zpn4m49r.js").then(({ StudioInternals }) => {
+    import("./chunk-axbagh08.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-canvas-capture-import.d.ts

@@ -0,0 +1,7 @@
+export declare const getCanvasCaptureImport: (file: File) => Promise<{
+    data: import("@remotion/studio-shared").CanvasCaptureData;
+    durationInSeconds: number;
+    file: File;
+    height: number;
+    width: number;
+} | null>;

package/dist/helpers/get-canvas-capture-import.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCanvasCaptureImport = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const mediabunny_1 = require("mediabunny");
+const getCanvasCaptureImport = async (file) => {
+    const input = new mediabunny_1.Input({
+        formats: mediabunny_1.ALL_FORMATS,
+        source: new mediabunny_1.BlobSource(file),
+    });
+    try {
+        const [metadata, videoTrack] = await Promise.all([
+            input.getMetadataTags(),
+            input.getPrimaryVideoTrack(),
+        ]);
+        const data = (0, studio_shared_1.parseCanvasCaptureData)(metadata);
+        if (data === null || videoTrack === null) {
+            return null;
+        }
+        const [durationFromMetadata, width, height] = await Promise.all([
+            input.getDurationFromMetadata(),
+            videoTrack.getDisplayWidth(),
+            videoTrack.getDisplayHeight(),
+        ]);
+        const durationInSeconds = durationFromMetadata !== null && durationFromMetadata !== void 0 ? durationFromMetadata : (await input.computeDuration([videoTrack]));
+        if (!Number.isFinite(durationInSeconds) ||
+            durationInSeconds <= 0 ||
+            !Number.isFinite(width) ||
+            width <= 0 ||
+            !Number.isFinite(height) ||
+            height <= 0) {
+            return null;
+        }
+        return { data, durationInSeconds, file, height, width };
+    }
+    catch (_a) {
+        return null;
+    }
+    finally {
+        input.dispose();
+    }
+};
+exports.getCanvasCaptureImport = getCanvasCaptureImport;

package/dist/helpers/get-git-menu-item.d.ts

@@ -3,5 +3,5 @@ import type { ComboboxValue } from '../components/NewComposition/ComboBox';
 import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 export declare const getGitSourceName: (gitSource: GitSource) => string;
 export declare const getGitSourceBranchUrl: (gitSource: GitSource) => string;
-export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition) => string;
+export declare const getGitRefUrl: (gitSource: GitSource, originalLocation: OriginalPosition, remotionRoot: string) => string;
 export declare const getGitMenuItem: () => ComboboxValue | null;

package/dist/helpers/get-git-menu-item.js

@@ -10,14 +10,44 @@ const getGitSourceName = (gitSource) => {
 exports.getGitSourceName = getGitSourceName;
 const getGitSourceBranchUrl = (gitSource) => {
     if (gitSource.type === 'github') {
-        return `https://github.com/${gitSource.org}/${gitSource.name}/tree/${gitSource.ref}${gitSource.relativeFromGitRoot ? `/${gitSource.relativeFromGitRoot}` : ''}`;
+        const relativeFromGitRoot = gitSource.relativeFromGitRoot.replaceAll('\\', '/');
+        return `https://github.com/${gitSource.org}/${gitSource.name}/tree/${gitSource.ref}${relativeFromGitRoot ? `/${relativeFromGitRoot}` : ''}`;
     }
     throw new Error('Unknown git source type');
 };
 exports.getGitSourceBranchUrl = getGitSourceBranchUrl;
-const getGitRefUrl = (gitSource, originalLocation) => {
+const getGitRefUrl = (gitSource, originalLocation, remotionRoot) => {
     if (gitSource.type === 'github') {
-        return `https://github.com/${gitSource.org}/${gitSource.name}/tree/${gitSource.ref}/${gitSource.relativeFromGitRoot ? `${gitSource.relativeFromGitRoot}/` : ''}${originalLocation.source}#L${originalLocation.line}`;
+        if (!originalLocation.source) {
+            return (0, exports.getGitSourceBranchUrl)(gitSource);
+        }
+        const source = originalLocation.source.replaceAll('\\', '/');
+        const root = remotionRoot.replaceAll('\\', '/').replace(/\/+$/, '');
+        const shouldCompareCaseInsensitive = /^[a-z]:\//i.test(source) || /^[a-z]:\//i.test(root);
+        const comparableSource = shouldCompareCaseInsensitive
+            ? source.toLowerCase()
+            : source;
+        const comparableRoot = shouldCompareCaseInsensitive
+            ? root.toLowerCase()
+            : root;
+        const sourceIsInsideRoot = root.length > 0 && comparableSource.startsWith(`${comparableRoot}/`);
+        const relativeSource = sourceIsInsideRoot
+            ? source.slice(root.length + 1)
+            : source.replace(/^\.\/+/, '');
+        if (/^(?:[a-z]:\/|\/)/i.test(relativeSource)) {
+            return (0, exports.getGitSourceBranchUrl)(gitSource);
+        }
+        const filePath = [
+            gitSource.relativeFromGitRoot.replaceAll('\\', '/'),
+            relativeSource,
+        ]
+            .filter(Boolean)
+            .map((part) => part.replace(/^\/+|\/+$/g, ''))
+            .join('/');
+        const lineSuffix = originalLocation.line
+            ? `#L${originalLocation.line}`
+            : '';
+        return `https://github.com/${gitSource.org}/${gitSource.name}/blob/${gitSource.ref}/${filePath}${lineSuffix}`;
     }
     throw new Error('Unknown git source type');
 };

package/dist/helpers/inserted-element-selection.d.ts

@@ -0,0 +1,12 @@
+import type { SequenceNodePath } from 'remotion';
+export type PendingInsertedElementSelection = {
+    compositionId: string;
+    nodePath: {
+        absolutePath: string;
+        nodePath: SequenceNodePath;
+    };
+};
+export declare const requestInsertedElementSelection: (selection: PendingInsertedElementSelection) => void;
+export declare const clearInsertedElementSelection: (selection: PendingInsertedElementSelection) => void;
+export declare const subscribeToInsertedElementSelection: (listener: () => void) => () => boolean;
+export declare const getInsertedElementSelection: () => PendingInsertedElementSelection | null;

package/dist/helpers/inserted-element-selection.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInsertedElementSelection = exports.subscribeToInsertedElementSelection = exports.clearInsertedElementSelection = exports.requestInsertedElementSelection = void 0;
+let pendingSelection = null;
+const listeners = new Set();
+const requestInsertedElementSelection = (selection) => {
+    pendingSelection = selection;
+    for (const listener of listeners) {
+        listener();
+    }
+};
+exports.requestInsertedElementSelection = requestInsertedElementSelection;
+const clearInsertedElementSelection = (selection) => {
+    if (pendingSelection !== selection) {
+        return;
+    }
+    pendingSelection = null;
+    for (const listener of listeners) {
+        listener();
+    }
+};
+exports.clearInsertedElementSelection = clearInsertedElementSelection;
+const subscribeToInsertedElementSelection = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+};
+exports.subscribeToInsertedElementSelection = subscribeToInsertedElementSelection;
+const getInsertedElementSelection = () => pendingSelection;
+exports.getInsertedElementSelection = getInsertedElementSelection;

package/dist/helpers/open-in-editor.d.ts

@@ -4,6 +4,7 @@ import type { CodePosition, OriginalPosition } from '../error-overlay/react-over
 export declare const openInEditor: (stack: SymbolicatedStackFrame, editorId: EditorPickerId | null) => Promise<import("@remotion/studio-shared").OpenInEditorResponse>;
 export declare const openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", prompt: string | null) => Promise<import("@remotion/studio-shared").OpenInCodingAgentResponse>;
 export declare const openInTerminal: (terminalId: TerminalId, directory: string) => Promise<OpenInTerminalResponse>;
+export declare const openInGitClient: (gitClientId: "github-desktop") => Promise<import("@remotion/studio-shared").OpenInGitClientResponse>;
 export declare const openOriginalPositionInEditor: (originalPosition: OriginalPosition, editorId: EditorPickerId | null) => Promise<void>;
 export declare const openOriginalPositionInEditorAtProperty: ({ originalPosition, property, }: {
     originalPosition: CodePosition;

package/dist/helpers/open-in-editor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = exports.openInGitClient = exports.openInTerminal = exports.openInCodingAgent = exports.openInEditor = void 0;
 const react_1 = require("react");
 const call_api_1 = require("../components/call-api");
 const browser_studio_operations_1 = require("./browser-studio-operations");
@@ -26,6 +26,10 @@ const openInTerminal = (terminalId, directory) => {
     return (0, call_api_1.callApi)('/api/open-in-terminal', { directory, terminalId });
 };
 exports.openInTerminal = openInTerminal;
+const openInGitClient = (gitClientId) => {
+    return (0, call_api_1.callApi)('/api/open-in-git-client', { gitClientId });
+};
+exports.openInGitClient = openInGitClient;
 const openOriginalPositionInEditor = async (originalPosition, editorId) => {
     const response = await (0, exports.openInEditor)({
         originalColumnNumber: originalPosition.column,

package/dist/helpers/pointer-session.d.ts

@@ -1,9 +1,13 @@
 export type PointerSessionEndReason = 'pointerup' | 'pointercancel' | 'lostpointercapture' | 'blur' | 'visibilitychange' | 'buttons-released' | 'manual';
 type PointerSessionEvent = Pick<PointerEvent, 'button' | 'pointerId'>;
-export declare const startPointerSession: ({ event, target, onMove, onEnd, }: {
+export declare const startCapturedPointerSession: ({ event, captureTarget, onMove, onEnd, }: {
     event: PointerSessionEvent;
-    target: Element;
+    captureTarget: Element;
     onMove?: ((event: PointerEvent) => void) | undefined;
     onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
 }) => () => void;
+export declare const observePointerRelease: ({ event, onEnd, }: {
+    event: PointerSessionEvent;
+    onEnd: (reason: PointerSessionEndReason, event: PointerEvent | null) => void;
+}) => () => void;
 export {};

package/dist/helpers/pointer-session.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.startPointerSession = void 0;
+exports.observePointerRelease = exports.startCapturedPointerSession = void 0;
 const getButtonMask = (button) => {
     if (button === 0) {
         return 1;
@@ -13,7 +13,7 @@ const getButtonMask = (button) => {
     }
     return 1 << button;
 };
-const startPointerSession = ({ event, target, onMove, onEnd, }) => {
+const startPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
     var _a;
     const { pointerId } = event;
     const buttonMask = getButtonMask(event.button);
@@ -25,10 +25,10 @@ const startPointerSession = ({ event, target, onMove, onEnd, }) => {
         window.removeEventListener('pointercancel', handleCancel);
         window.removeEventListener('blur', handleBlur);
         document.removeEventListener('visibilitychange', handleVisibilityChange);
-        target.removeEventListener('lostpointercapture', handleLostPointerCapture);
-        if ((_a = target.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId)) {
+        captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.removeEventListener('lostpointercapture', handleLostPointerCapture);
+        if ((_a = captureTarget === null || captureTarget === void 0 ? void 0 : captureTarget.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(captureTarget, pointerId)) {
             try {
-                target.releasePointerCapture(pointerId);
+                captureTarget.releasePointerCapture(pointerId);
             }
             catch (_b) {
                 // The browser may already have released capture.
@@ -77,18 +77,35 @@ const startPointerSession = ({ event, target, onMove, onEnd, }) => {
             end('visibilitychange', null);
         }
     }
-    try {
-        (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId);
-    }
-    catch (_b) {
-        // Capture is best-effort for detached or browser-owned targets.
+    if (captureTarget) {
+        try {
+            (_a = captureTarget.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(captureTarget, pointerId);
+        }
+        catch (_b) {
+            // Capture is best-effort for detached targets.
+        }
+        captureTarget.addEventListener('lostpointercapture', handleLostPointerCapture);
     }
     window.addEventListener('pointermove', handleMove);
     window.addEventListener('pointerup', handleUp);
     window.addEventListener('pointercancel', handleCancel);
     window.addEventListener('blur', handleBlur);
     document.addEventListener('visibilitychange', handleVisibilityChange);
-    target.addEventListener('lostpointercapture', handleLostPointerCapture);
     return () => end('manual', null);
 };
-exports.startPointerSession = startPointerSession;
+// Use for a gesture owned by a Studio control, such as a slider or resize
+// handle. `captureTarget` is normally the pointerdown handler's currentTarget.
+const startCapturedPointerSession = ({ event, captureTarget, onMove, onEnd, }) => {
+    return startPointerSession({ event, captureTarget, onMove, onEnd });
+};
+exports.startCapturedPointerSession = startCapturedPointerSession;
+// Use when observing a gesture that started elsewhere. This deliberately does
+// not capture the pointer from the element under it.
+const observePointerRelease = ({ event, onEnd, }) => {
+    return startPointerSession({
+        event,
+        captureTarget: null,
+        onEnd,
+    });
+};
+exports.observePointerRelease = observePointerRelease;

package/dist/helpers/use-create-composition.d.ts

@@ -1,6 +1,6 @@
-import type { SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { CanvasCaptureData, SymbolicatedStackFrame } from '@remotion/studio-shared';
 export declare const getUniqueCompositionName: (compositions: import("remotion").AnyComposition[]) => string;
-export declare const useCreateComposition: ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }: {
+export declare const useCreateComposition: ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, canvasCapture, }: {
     compositions: import("remotion").AnyComposition[];
     durationInFrames: number;
     folderName: string | null;
@@ -11,6 +11,12 @@ export declare const useCreateComposition: ({ compositions, durationInFrames, fo
         width: number;
         height: number;
     };
+    canvasCapture: {
+        readonly data: CanvasCaptureData;
+        readonly videoFileName: string;
+        readonly videoHeight: number;
+        readonly videoWidth: number;
+    } | null;
 }) => {
     codemod: {
         type: "new-composition";
@@ -23,6 +29,13 @@ export declare const useCreateComposition: ({ compositions, durationInFrames, fo
         newWidth: number;
         newFps: number;
         newDurationInFrames: number;
+        canvasCapture: {
+            readonly videoFileName: string;
+            readonly videoHeight: number;
+            readonly videoWidth: number;
+            readonly keyframeFps: number;
+            readonly data: CanvasCaptureData;
+        } | null;
     };
     createComposition: ({ signal, symbolicatedStack, }: {
         signal: AbortSignal;

package/dist/helpers/use-create-composition.js

@@ -19,21 +19,6 @@ const toPascalCase = (value) => {
     }
     return candidate;
 };
-const waitForComposition = (compositionId) => {
-    return new Promise((resolve) => {
-        const started = Date.now();
-        const interval = window.setInterval(() => {
-            var _a;
-            var _b;
-            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
-            if (compositionNames.includes(compositionId) ||
-                Date.now() - started > 10000) {
-                window.clearInterval(interval);
-                resolve();
-            }
-        }, 100);
-    });
-};
 const getUniqueCompositionName = (compositions) => {
     let counter = 1;
     while (true) {
@@ -46,7 +31,7 @@ const getUniqueCompositionName = (compositions) => {
     }
 };
 exports.getUniqueCompositionName = getUniqueCompositionName;
-const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, }) => {
+const useCreateComposition = ({ compositions, durationInFrames, folderName, newId, parentName, selectedFrameRate, size, canvasCapture, }) => {
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const componentName = (0, react_1.useMemo)(() => toPascalCase(newId), [newId]);
     const nameValidationMessage = (0, react_1.useMemo)(() => {
@@ -70,8 +55,18 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
             componentImportPath: `./${componentName}`,
             folderName,
             parentName,
+            canvasCapture: canvasCapture === null
+                ? null
+                : {
+                    data: canvasCapture.data,
+                    keyframeFps: Number(selectedFrameRate),
+                    videoFileName: canvasCapture.videoFileName,
+                    videoHeight: canvasCapture.videoHeight,
+                    videoWidth: canvasCapture.videoWidth,
+                },
         };
     }, [
+        canvasCapture,
         componentName,
         durationInFrames,
         folderName,
@@ -92,7 +87,6 @@ const useCreateComposition = ({ compositions, durationInFrames, folderName, newI
             symbolicatedStack,
         });
         if (result.success) {
-            await waitForComposition(newId);
             selectComposition({
                 id: newId,
                 folderName,

package/dist/helpers/use-menu-structure.js

@@ -61,6 +61,7 @@ const getFileMenu = ({ readOnlyStudio, closeMenu, editorName, previewServerState
                         folderName: null,
                         parentName: null,
                         stack: null,
+                        canvasCapture: null,
                     });
                 },
                 type: 'item',

package/dist/icons/git-client.d.ts

@@ -0,0 +1,6 @@
+import type { GitClientId } from '@remotion/studio-shared';
+import React from 'react';
+export declare const GitClientIcon: React.FC<{
+    readonly gitClientId: GitClientId;
+    readonly size: number;
+}>;

package/dist/icons/git-client.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitClientIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const GitClientIcon = ({ gitClientId, size }) => {
+    return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-git-client-icon": gitClientId, draggable: false, src: `/api/app-icon/git-client/${gitClientId}.png`, style: { flexShrink: 0, height: size, width: size } }));
+};
+exports.GitClientIcon = GitClientIcon;

package/dist/icons/github.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const GitHubIcon: React.FC<{
+    readonly size: number;
+}>;

package/dist/icons/github.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitHubIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+// Brand shape adapted from Simple Icons (CC0 1.0):
+// https://github.com/simple-icons/simple-icons/blob/develop/icons/github.svg
+const GitHubIcon = ({ size }) => {
+    return (jsx_runtime_1.jsx("svg", { "aria-hidden": true, "data-github-icon": true, style: { flexShrink: 0, height: size, width: size }, viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: "M12 .3a12 12 0 0 0-3.79 23.39c.6.11.82-.26.82-.58v-2.23c-3.34.73-4.04-1.42-4.04-1.42-.55-1.39-1.34-1.76-1.34-1.76-1.09-.75.08-.73.08-.73 1.2.09 1.84 1.24 1.84 1.24 1.07 1.83 2.81 1.3 3.5.99.11-.78.42-1.31.76-1.61-2.67-.31-5.47-1.34-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.13-.3-.54-1.52.11-3.18 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.29-1.55 3.3-1.23 3.3-1.23.65 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.6-2.81 5.62-5.48 5.92.43.37.81 1.1.81 2.22v3.3c0 .32.22.7.82.58A12 12 0 0 0 12 .3Z", fill: colors_1.CURRENT_COLOR }) }));
+};
+exports.GitHubIcon = GitHubIcon;

package/dist/renderEntry.js

@@ -187,13 +187,13 @@ const renderContent = (Root) => {
                 defaultPixelFormat: bundleMode.compositionDefaultPixelFormat,
                 defaultProResProfile: bundleMode.compositionDefaultProResProfile,
                 defaultSampleRate: bundleMode.compositionDefaultSampleRate,
-            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
+            }, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info', numberOfAudioTags: 0, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsxs(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: [
                         jsx_runtime_1.jsx(Root, {}), jsx_runtime_1.jsx(GetVideoComposition, { state: bundleMode })
                     ] }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'evaluation') {
-        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
+        const markup = (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { initialCanvasContent: null, onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], children: jsx_runtime_1.jsx(remotion_1.Internals.RemotionRootContexts, { frameState: null, audioEnabled: window.remotion_audioEnabled, videoEnabled: window.remotion_videoEnabled, logLevel: (_c = window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info', numberOfAudioTags: 0, audioLatencyHint: (_d = window.remotion_audioLatencyHint) !== null && _d !== void 0 ? _d : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: false, children: jsx_runtime_1.jsx(remotion_1.Internals.RenderAssetManagerProvider, { collectAssets: null, children: jsx_runtime_1.jsx(Root, {}) }) }) }));
         renderToDOM(markup);
     }
     if (bundleMode.type === 'index') {

package/dist/state/modals.d.ts

@@ -1,6 +1,6 @@
 import type { AudioCodec, ChromeMode, Codec, ColorSpace, LogLevel, OpenGlRenderer, PixelFormat, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { HardwareAccelerationOption } from '@remotion/renderer/client';
-import type { PackageManager, RenderDefaults } from '@remotion/studio-shared';
+import type { CanvasCaptureData, PackageManager, RenderDefaults } from '@remotion/studio-shared';
 import type { RenderStillOnWebImageFormat, WebRendererAudioCodec, WebRendererContainer, WebRendererHardwareAcceleration, WebRendererPageResponsiveness, WebRendererQuality, WebRendererVideoCodec } from '@remotion/web-renderer';
 import type React from 'react';
 import type { SequencePropsSubscriptionKey, _InternalTypes } from 'remotion';
@@ -109,11 +109,19 @@ export type AddEffectModalState = {
     nodePath: SequencePropsSubscriptionKey;
     clientId: string;
 };
+export type CanvasCaptureImport = {
+    readonly data: CanvasCaptureData;
+    readonly durationInSeconds: number;
+    readonly file: File;
+    readonly height: number;
+    readonly width: number;
+};
 export type ModalState = {
     type: 'new-comp';
     folderName: string | null;
     parentName: string | null;
     stack: string | null;
+    canvasCapture: CanvasCaptureImport | null;
 } | {
     type: 'new-folder';
     parentName: string | null;

package/dist/state/z-index.d.ts

@@ -5,7 +5,6 @@ export declare const HigherZIndex: React.FC<{
     readonly children: React.ReactNode;
     readonly disabled?: boolean;
     readonly outsideClickButton?: 'any' | 'primary';
-    readonly stackOnHighest?: boolean;
 }>;
 export declare const useZIndex: () => {
     currentZIndex: number;

package/dist/state/z-index.js

@@ -15,7 +15,7 @@ const margin = {
 };
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const escape = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'Escape',
@@ -32,80 +32,74 @@ const EscapeHook = ({ onEscape }) => {
     }, [keybindings, onEscape]);
     return null;
 };
-const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', stackOnHighest = false, }) => {
-    var _a;
+const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideClickButton = 'any', }) => {
     const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
+    const { registerZIndex, unregisterZIndex } = highestContext;
     const containerRef = (0, react_1.useRef)(null);
-    const stackedIndex = (0, react_1.useRef)(null);
-    if (disabled || !stackOnHighest) {
-        stackedIndex.current = null;
-    }
-    else if (stackedIndex.current === null) {
-        stackedIndex.current =
-            Math.max(context.currentIndex, highestContext.highestIndex) + 1;
-    }
+    const highestIndexRef = (0, react_1.useRef)(highestContext.highestIndex);
+    const onOutsideClickRef = (0, react_1.useRef)(onOutsideClick);
+    const outsideClickButtonRef = (0, react_1.useRef)(outsideClickButton);
     const currentIndex = disabled
         ? context.currentIndex
-        : ((_a = stackedIndex.current) !== null && _a !== void 0 ? _a : context.currentIndex + 1);
-    (0, react_1.useEffect)(() => {
+        : context.currentIndex + 1;
+    (0, react_1.useLayoutEffect)(() => {
+        highestIndexRef.current = highestContext.highestIndex;
+        onOutsideClickRef.current = onOutsideClick;
+        outsideClickButtonRef.current = outsideClickButton;
+    }, [highestContext.highestIndex, onOutsideClick, outsideClickButton]);
+    (0, react_1.useLayoutEffect)(() => {
         if (disabled) {
             return;
         }
-        highestContext.registerZIndex(currentIndex);
-        return () => highestContext.unregisterZIndex(currentIndex);
-    }, [currentIndex, highestContext, disabled]);
-    (0, react_1.useEffect)(() => {
+        registerZIndex(currentIndex);
+        return () => unregisterZIndex(currentIndex);
+    }, [currentIndex, disabled, registerZIndex, unregisterZIndex]);
+    (0, react_1.useLayoutEffect)(() => {
         if (disabled) {
             return;
         }
         let endPointerSession = null;
         const listener = (downEvent) => {
             var _a;
-            if (outsideClickButton === 'primary' && downEvent.button !== 0) {
+            if (outsideClickButtonRef.current === 'primary' &&
+                downEvent.button !== 0) {
                 return;
             }
             const outsideClick = !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(downEvent.target));
             if (!outsideClick) {
                 return;
             }
+            // The topmost layer owns the full pointer gesture. Layers may mount or
+            // unmount before pointerup, but that must not cancel or transfer dismissal.
+            if (highestIndexRef.current !== currentIndex) {
+                return;
+            }
             endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
-            endPointerSession = (0, pointer_session_1.startPointerSession)({
+            endPointerSession = (0, pointer_session_1.observePointerRelease)({
                 event: downEvent,
-                target: downEvent.target,
                 onEnd: (reason, upEvent) => {
                     var _a;
                     endPointerSession = null;
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&
                         upEvent &&
-                        highestContext.highestIndex === currentIndex &&
                         !(0, input_dragger_click_lock_1.getClickLock)()) {
                         const target = (_a = document.elementFromPoint(upEvent.clientX, upEvent.clientY)) !== null && _a !== void 0 ? _a : upEvent.target;
                         if (document.contains(target)) {
                             upEvent.stopPropagation();
-                            onOutsideClick(target);
+                            onOutsideClickRef.current(target);
                         }
                     }
                 },
             });
         };
-        // The capture phase for the pointerdown that opened this layer has already
-        // passed, so installing the listener immediately cannot dismiss the new layer.
-        // Waiting for the next animation frame would leave a window in which a fast
-        // outside click is missed.
         window.addEventListener('pointerdown', listener, true);
         return () => {
             endPointerSession === null || endPointerSession === void 0 ? void 0 : endPointerSession();
             endPointerSession = null;
             return window.removeEventListener('pointerdown', listener, true);
         };
-    }, [
-        currentIndex,
-        disabled,
-        highestContext.highestIndex,
-        onOutsideClick,
-        outsideClickButton,
-    ]);
+    }, [currentIndex, disabled]);
     const value = (0, react_1.useMemo)(() => {
         return {
             currentIndex,