@remotion/studio 4.0.508 → 4.0.510

package/dist/Studio.d.ts

@@ -1,4 +1,9 @@
 import React from 'react';
+declare global {
+    interface Window {
+        remotion_experimentalKeepAudioContextAlive: boolean | undefined;
+    }
+}
 export declare const Studio: React.FC<{
     readonly rootComponent: React.FC;
     readonly readOnly: boolean;

package/dist/Studio.js

@@ -16,8 +16,8 @@ const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
 const StudioInner = ({ rootComponent, readOnly }) => {
-    var _a, _b;
-    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, 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: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
+    var _a, _b, _c;
+    return (jsx_runtime_1.jsx(remotion_1.Internals.CompositionManagerProvider, { onlyRenderComposition: null, currentCompositionMetadata: null, initialCompositions: [], initialCanvasContent: null, 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: window.remotion_numberOfAudioTags, audioLatencyHint: (_b = window.remotion_audioLatencyHint) !== null && _b !== void 0 ? _b : 'playback', previewSampleRate: window.remotion_previewSampleRate, _experimentalKeepAudioContextAlive: (_c = window.remotion_experimentalKeepAudioContextAlive) !== null && _c !== void 0 ? _c : false, children: jsx_runtime_1.jsx(use_static_files_1.StaticFilesProvider, { children: jsx_runtime_1.jsx(ResolveCompositionConfigInStudio_1.ResolveCompositionConfigInStudio, { children: jsx_runtime_1.jsxs(EditorContexts_1.EditorContexts, { children: [
                             jsx_runtime_1.jsx(Editor_1.Editor, { readOnlyStudio: readOnly, Root: rootComponent }), readOnly
                                 ? null
                                 : (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }) }) }) }));

package/dist/components/Canvas.js

@@ -15,6 +15,7 @@ const clipboard_images_1 = require("../helpers/clipboard-images");
 const clipboard_svg_1 = require("../helpers/clipboard-svg");
 const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
+const get_canvas_capture_import_1 = require("../helpers/get-canvas-capture-import");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const install_required_package_1 = require("../helpers/install-required-package");
 const open_in_editor_1 = require("../helpers/open-in-editor");
@@ -25,6 +26,7 @@ const canvas_ref_1 = require("../state/canvas-ref");
 const editor_guides_1 = require("../state/editor-guides");
 const editor_snapping_1 = require("../state/editor-snapping");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const composition_drop_preview_1 = require("./composition-drop-preview");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -125,6 +127,7 @@ const Canvas = ({ canvasContent, size }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const areRulersVisible = (0, use_is_ruler_visible_1.useIsRulerVisible)();
     const { editorShowGuides } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
@@ -703,13 +706,15 @@ const Canvas = ({ canvasContent, size }) => {
             setCompositionDropPreview(null);
             return;
         }
-        if (!canDropAssets && !cannotAddSequence) {
+        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
+        if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
         }
         event.preventDefault();
         if (event.dataTransfer) {
-            event.dataTransfer.dropEffect = canDropAssets ? 'copy' : 'none';
+            event.dataTransfer.dropEffect =
+                canDropAssets || mayBeCanvasCapture ? 'copy' : 'none';
         }
         if (!canDropAssets ||
             contentDimensions === null ||
@@ -718,7 +723,7 @@ const Canvas = ({ canvasContent, size }) => {
             return;
         }
         const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
-        if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' ||
+        if (((metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'composition' && (metadata === null || metadata === void 0 ? void 0 : metadata.type) !== 'element') ||
             metadata.width === undefined ||
             metadata.height === undefined) {
             setCompositionDropPreview(null);
@@ -729,7 +734,7 @@ const Canvas = ({ canvasContent, size }) => {
             clientX: event.clientX,
             clientY: event.clientY,
             contentDimensions,
-            unbounded: true,
+            unbounded: metadata.type === 'composition',
             previewSize,
             size,
         });
@@ -741,7 +746,10 @@ const Canvas = ({ canvasContent, size }) => {
             width: metadata.width,
             height: metadata.height,
         };
-        if (editorSnapping && !event.metaKey && !event.ctrlKey) {
+        if (metadata.type === 'composition' &&
+            editorSnapping &&
+            !event.metaKey &&
+            !event.ctrlKey) {
             dropPosition = (0, composition_drop_preview_1.snapCompositionDropPosition)({
                 compositionDimensions,
                 destinationDimensions: contentDimensions,
@@ -797,12 +805,36 @@ const Canvas = ({ canvasContent, size }) => {
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
-        var _a;
-        var _b;
+        var _a, _b;
+        var _c, _d;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
         }
+        if ((0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio) {
+            event.preventDefault();
+            event.stopPropagation();
+            const files = Array.from((_c = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _c !== void 0 ? _c : []);
+            if (files.length === 1) {
+                setIsAddingAsset(true);
+                try {
+                    const canvasCapture = await (0, get_canvas_capture_import_1.getCanvasCaptureImport)(files[0]);
+                    if (canvasCapture !== null) {
+                        setSelectedModal({
+                            type: 'new-comp',
+                            canvasCapture,
+                            folderName: null,
+                            parentName: null,
+                            stack: null,
+                        });
+                        return;
+                    }
+                }
+                finally {
+                    setIsAddingAsset(false);
+                }
+            }
+        }
         if (cannotAddSequence) {
             event.preventDefault();
             event.stopPropagation();
@@ -824,7 +856,7 @@ const Canvas = ({ canvasContent, size }) => {
         event.stopPropagation();
         setIsAddingAsset(true);
         try {
-            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []);
+            const metadata = studio_protocol_1.StudioProtocolInternals.getDragPreviewMetadata((_d = (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.types) !== null && _d !== void 0 ? _d : []);
             const isComposition = (metadata === null || metadata === void 0 ? void 0 : metadata.type) === 'composition';
             let dropPosition = getDropPosition({
                 addFitPadding,
@@ -887,6 +919,7 @@ const Canvas = ({ canvasContent, size }) => {
         editorSnapping,
         previewSize,
         size,
+        setSelectedModal,
     ]);
     const onPaste = (0, react_1.useCallback)(async (event) => {
         const { activeElement } = document;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -59,9 +59,9 @@ const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete
         e.preventDefault();
         updateFromEvent(e.clientX, false);
         let lastClientX = e.clientX;
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastClientX = ev.clientX;
                 updateFromEvent(ev.clientX, false);

package/dist/components/ColorPicker/HueSlider.js

@@ -41,9 +41,9 @@ const HueSlider = ({ hue, onChange, onChangeComplete }) => {
         e.preventDefault();
         updateFromEvent(e.clientX, false);
         let lastClientX = e.clientX;
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastClientX = ev.clientX;
                 updateFromEvent(ev.clientX, false);

package/dist/components/ColorPicker/SaturationValueArea.js

@@ -55,9 +55,9 @@ const SaturationValueArea = ({ hue, saturation, value, onChange, onChangeComplet
         e.preventDefault();
         updateFromEvent(e.clientX, e.clientY, false);
         let lastPosition = { clientX: e.clientX, clientY: e.clientY };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (ev) => {
                 lastPosition = { clientX: ev.clientX, clientY: ev.clientY };
                 updateFromEvent(ev.clientX, ev.clientY, false);

package/dist/components/CompositionSelectorItem.js

@@ -112,7 +112,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [item, selectComposition, toggleFolder]);
     const onKeyDown = (0, react_1.useCallback)((evt) => {
-        if (evt.key === 'Enter' || evt.key === ' ') {
+        if (evt.key === 'Enter') {
             onClick(evt);
         }
     }, [onClick]);

package/dist/components/EditorGuides/Guide.js

@@ -115,9 +115,9 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         };
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => guide.id);
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: (moveEvent) => {
                 var _a;
                 updateHasMovedGuide(moveEvent.clientX, moveEvent.clientY);

package/dist/components/EditorRuler/index.js

@@ -168,9 +168,9 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         };
     }, [draggingGuideId, moveGuidePointerRef, onMouseMove]);
     const onPointerSessionStart = (0, react_1.useCallback)((event, guideId) => {
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: event.nativeEvent,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: (moveEvent) => onMouseMove(moveEvent, guideId),
             onEnd: () => finishGuideInteraction(guideId),
         });

package/dist/components/ExplorerPanel.js

@@ -4,6 +4,7 @@ exports.ExplorerPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const use_asset_drag_events_1 = require("../helpers/use-asset-drag-events");
 const AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
 const CompSelectorRef_1 = require("./CompSelectorRef");
@@ -33,6 +34,7 @@ const persistSelectedOptionsSidebarPanel = (panel) => {
 };
 const ExplorerPanel = ({ readOnlyStudio }) => {
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const assetTabFocusTimer = (0, react_1.useRef)(null);
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
         setPanel('compositions');
         persistSelectedOptionsSidebarPanel('compositions');
@@ -41,6 +43,22 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
         setPanel('assets');
         persistSelectedOptionsSidebarPanel('assets');
     }, []);
+    const onAssetDragEnter = (0, react_1.useCallback)((event) => {
+        if ((0, use_asset_drag_events_1.isAssetUploadDragEvent)(event) &&
+            assetTabFocusTimer.current === null) {
+            assetTabFocusTimer.current = window.setTimeout(() => {
+                onAssetsSelected();
+                assetTabFocusTimer.current = null;
+            }, 500);
+        }
+    }, [onAssetsSelected]);
+    const onAssetDragLeave = (0, react_1.useCallback)((event) => {
+        if ((0, use_asset_drag_events_1.isAssetUploadDragEvent)(event) &&
+            assetTabFocusTimer.current !== null) {
+            window.clearTimeout(assetTabFocusTimer.current);
+            assetTabFocusTimer.current = null;
+        }
+    }, []);
     (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
             getSelectedPanel: () => panel,
@@ -60,7 +78,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
     }, []);
     return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
                 jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
-                            jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
+                            jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, onDragEnter: onAssetDragEnter, onDragLeave: onAssetDragLeave, children: "Assets" })
                         ] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));
 };
 exports.ExplorerPanel = ExplorerPanel;

package/dist/components/InspectorOpenInEditor.js

@@ -42,7 +42,7 @@ const mainButtonBase = {
 };
 const editorButtonIconSize = 18;
 const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locationType }) => {
-    var _a;
+    var _a, _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -64,6 +64,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
         }
     }, [location]);
     const preferredEditorId = (0, use_default_editor_info_1.getPreferredEditorId)(editorInfo);
+    const preferredEditor = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors.find((editor) => editor.id === preferredEditorId);
     const openWithCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, codingAgentId === 'copilot' ? null : contextForAgents);
@@ -75,12 +76,13 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [contextForAgents]);
-    const editorName = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : 'default editor';
-    const canOpenDefault = location !== null && window.remotion_editorName !== null;
+    const editorName = (_b = (_a = window.remotion_editorName) !== null && _a !== void 0 ? _a : preferredEditor === null || preferredEditor === void 0 ? void 0 : preferredEditor.nameWithType) !== null && _b !== void 0 ? _b : 'default editor';
+    const canOpenDefault = location !== null &&
+        (window.remotion_editorName !== null || preferredEditorId !== null);
     const onOpenDefault = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
-        openWithEditor(null).catch(() => undefined);
-    }, [openWithEditor]);
+        openWithEditor(window.remotion_editorName === null ? preferredEditorId : null).catch(() => undefined);
+    }, [openWithEditor, preferredEditorId]);
     const onDropdownOpenChange = (0, react_1.useCallback)((open) => {
         setDropdownOpened(open);
         if (!open) {
@@ -124,6 +126,7 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
             excludeEditorId: preferredEditorId,
             fileManagerDisabled: !(location === null || location === void 0 ? void 0 : location.source),
             folder: locationType === 'folder',
+            location,
             onConfigureApps: () => {
                 var _a;
                 var _b;
@@ -147,6 +150,17 @@ const InspectorOpenInEditor = ({ contextForAgents = null, label, location, locat
                     (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
                 });
             },
+            onOpenInGitClient: (gitClientId) => {
+                (0, open_in_editor_1.openInGitClient)(gitClientId)
+                    .then((response) => {
+                    if (!response.success) {
+                        (0, NotificationCenter_1.showNotification)('Could not open Git client', 2000);
+                    }
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not open Git client: ${err.message}`, 2000);
+                });
+            },
             onOpenInTerminal: (terminalId) => {
                 if (!(location === null || location === void 0 ? void 0 : location.source) || locationType !== 'folder') {
                     return;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -39,6 +39,28 @@ const computedValueStyle = {
     fontStyle: 'italic',
     lineHeight: '20px',
 };
+const metadataDraggerStyles = {
+    durationInFrames: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 92,
+    },
+    fps: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 72,
+    },
+    height: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 52,
+    },
+    width: {
+        padding: '2px 0 2px 6px',
+        textAlign: 'right',
+        width: 52,
+    },
+};
 const dimensionsControls = {
     alignItems: 'center',
     color: 'inherit',
@@ -124,7 +146,7 @@ const CompositionMetadataValue = ({ computed, disabled, field, onSave, pendingVa
         }
         return String(roundedValue);
     }, [field]);
-    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, small: true }));
+    return computed ? (jsx_runtime_1.jsx("span", { style: computedContainerStyle, children: jsx_runtime_1.jsx("span", { style: computedValueStyle, children: formatValue(value) }) })) : disabled ? (formatValue(value)) : (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { "aria-label": fieldLabels[field], buttonStyle: metadataDraggerStyles[field], type: "number", value: (_a = dragValue !== null && dragValue !== void 0 ? dragValue : pendingValue === null || pendingValue === void 0 ? void 0 : pendingValue.value) !== null && _a !== void 0 ? _a : value, disabled: pendingValue !== null, status: "ok", onValueChange: setDragValue, onValueChangeEnd: save, onTextChange: () => undefined, min: isFps ? 0.01 : 1, step: isFps ? 0.01 : 1, dragDecimalPlaces: isFps ? 2 : 0, formatter: formatValue, rightAlign: true, style: metadataDraggerStyles[field] }));
 };
 const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     var _a, _b, _c, _d;

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -105,6 +105,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
     const sourceLocation = (0, SequenceInspectorHeader_1.useSequenceInspectorSourceLocation)(track.sequence);
     const connectedCompositions = (0, ConnectedCompositionsSection_1.useConnectedCompositions)({ track });
     const { validatedLocation } = sourceLocation;
+    const stackKey = track.sequence.getStack();
     const sequenceSelection = (0, react_1.useMemo)(() => {
         if (!track.nodePathInfo) {
             return null;
@@ -141,7 +142,7 @@ const SequenceExpandedInspector = ({ track, readOnlyStudio }) => {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
     return (jsx_runtime_1.jsxs("div", { style: styles_1.selectedContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, onPointerDown: selectSequenceOnInspectorPointerDown, children: [
-            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorHeader, { sourceLocation: sourceLocation, track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id), jsx_runtime_1.jsx(SequenceInspectorHeader_1.SequenceInspectorDuplicationSection, { track: track }), connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(ConnectedCompositionsSection_1.ConnectedCompositionsSection, { connectedCompositions: connectedCompositions })
                 ] })) : null, validatedLocation ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(InspectorSequenceSection_1.InspectorSequenceSection, { sequence: track.sequence, readOnlyStudio: readOnlyStudio, validatedLocation: validatedLocation, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, renderTransformControls: () => jsx_runtime_1.jsx(AlignmentControls_1.AlignmentControls, { track: track }) }), jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [
                             jsx_runtime_1.jsx(SplitSequenceAction, { selection: sequenceSelection, track: track }), jsx_runtime_1.jsx(SequenceSourceActions, { selection: sequenceSelection, track: track, validatedSource: validatedLocation.source })
@@ -153,7 +154,6 @@ const SequenceSelectionInspector = ({ selection, readOnlyStudio }) => {
     if (!track) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
-    const stackKey = track.sequence.getStack();
-    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track, readOnlyStudio: readOnlyStudio }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
+    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track, readOnlyStudio: readOnlyStudio }));
 };
 exports.SequenceSelectionInspector = SequenceSelectionInspector;

package/dist/components/Menu/MenuItem.js

@@ -73,9 +73,9 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return;
         }
         onItemSelected(id);
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onEnd: (reason, evt) => {
                 if ((reason === 'pointerup' || reason === 'buttons-released') &&
                     evt) {

package/dist/components/ModalContainer.js

@@ -34,6 +34,6 @@ const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelSty
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, stackOnHighest: true, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/Modals.js

@@ -6,16 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
 const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
-const z_index_1 = require("../state/z-index");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
-const portals_1 = require("./Menu/portals");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -36,7 +33,6 @@ const Modals = ({ readOnlyStudio }) => {
     var _a;
     const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canRender = previewServerState.type === 'connected';
     (0, react_1.useEffect)(() => {
@@ -51,11 +47,8 @@ const Modals = ({ readOnlyStudio }) => {
             });
         });
     }, [setSelectedModal, subscribeToEvent]);
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack, canvasCapture: modalContextType.canvasCapture })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }), 
-    // Modals must be above overlays opened from the editor, such as the
-    // floating sidebars used in the mobile layout.
-    (0, portals_1.getPortal)(currentZIndex + 1));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/InputDragger.js

@@ -449,9 +449,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             lastDragValue = nextValue;
             onValueChange(nextValue);
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event: e.nativeEvent,
-            target,
+            captureTarget: target,
             onMove: moveListener,
             onEnd: (reason) => {
                 pointerDownRef.current = false;

package/dist/components/NewComposition/NewComposition.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { CanvasCaptureImport } from '../../state/modals';
 export declare const NewComposition: React.FC<{
     readonly folderName: string | null;
     readonly parentName: string | null;
     readonly stack: string | null;
+    readonly canvasCapture: CanvasCaptureImport | null;
 }>;

package/dist/components/NewComposition/NewComposition.js

@@ -4,6 +4,9 @@ exports.NewComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_static_files_1 = require("../../api/get-static-files");
+const write_static_file_1 = require("../../api/write-static-file");
+const install_required_package_1 = require("../../helpers/install-required-package");
 const use_create_composition_1 = require("../../helpers/use-create-composition");
 const layout_1 = require("../layout");
 const ModalFooter_1 = require("../ModalFooter");
@@ -27,14 +30,15 @@ const content = {
 const folderPathStyle = {
     fontSize: 14,
 };
-const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
+const NewCompositionLoaded = ({ canvasCapture, folderName, parentName, stack }) => {
+    var _a;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const resolvedComposition = remotion_1.Internals.useResolvedVideoConfig(null);
     const initialComposition = (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success' ||
         (resolvedComposition === null || resolvedComposition === void 0 ? void 0 : resolvedComposition.type) === 'success-and-refreshing'
         ? resolvedComposition.result
         : null;
-    const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition);
+    const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition, (_a = canvasCapture === null || canvasCapture === void 0 ? void 0 : canvasCapture.durationInSeconds) !== null && _a !== void 0 ? _a : null);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
     const inputRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -98,13 +102,41 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
         parentName,
         selectedFrameRate,
         size,
+        canvasCapture: canvasCapture === null
+            ? null
+            : {
+                data: canvasCapture.data,
+                videoFileName: canvasCapture.file.name,
+                videoHeight: canvasCapture.height,
+                videoWidth: canvasCapture.width,
+            },
     });
+    const createCanvasCaptureComposition = (0, react_1.useCallback)(async ({ signal, symbolicatedStack, }) => {
+        if (canvasCapture !== null) {
+            const existingFile = (0, get_static_files_1.getStaticFiles)().find((file) => file.name === canvasCapture.file.name);
+            if (existingFile !== undefined &&
+                existingFile.sizeInBytes !== canvasCapture.file.size) {
+                throw new Error(`File with name ${canvasCapture.file.name} already exists and is different`);
+            }
+            await (0, install_required_package_1.installRequiredPackages)([
+                { name: '@remotion/media', version: null },
+                { name: '@remotion/mac-cursors', version: null },
+            ]);
+            if (existingFile === undefined) {
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: await canvasCapture.file.arrayBuffer(),
+                    filePath: canvasCapture.file.name,
+                });
+            }
+        }
+        return createComposition({ signal, symbolicatedStack });
+    }, [canvasCapture, createComposition]);
     const onSubmit = (0, react_1.useCallback)((e) => {
         e.preventDefault();
     }, []);
     const folderPath = [parentName, folderName].filter(Boolean).join('/');
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: canvasCapture === null ? 'New composition' : 'Import Canvas Capture' }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsxs("div", { style: content, children: [folderPath ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -125,14 +157,14 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
                                 ] }), jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
                                 ] })
-                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createComposition({
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: null, errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => createCanvasCaptureComposition({
                                 signal,
                                 symbolicatedStack,
                             }), fallbackToRootFile: true }) })
                 ] })
         ] }));
 };
-const NewComposition = ({ folderName, parentName, stack }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, { folderName: folderName, parentName: parentName, stack: stack }) }));
+const NewComposition = ({ canvasCapture, folderName, parentName, stack }) => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, { canvasCapture: canvasCapture, folderName: folderName, parentName: parentName, stack: stack }) }));
 };
 exports.NewComposition = NewComposition;

package/dist/components/NewComposition/get-new-composition-defaults.d.ts

@@ -1,4 +1,4 @@
 import type { VideoConfig } from 'remotion';
 type CompositionDimensions = Pick<VideoConfig, 'width' | 'height' | 'fps' | 'durationInFrames'>;
-export declare const getNewCompositionDefaults: (composition: CompositionDimensions | null) => CompositionDimensions;
+export declare const getNewCompositionDefaults: (composition: CompositionDimensions | null, canvasCaptureDurationInSeconds: number | null) => CompositionDimensions;
 export {};