@remotion/studio 4.0.507 → 4.0.509

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-ptnd65a9.js").then(({ StudioInternals }) => {
+    import("./chunk-jdn6nkbk.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-box-quads-polyfill-internals.js

@@ -1658,10 +1658,18 @@ function getElementCombinedTransform(element, iframes) {
         m.multiplySelf(new DOMMatrix('translate(' + tr.replaceAll(' ', ',') + ')'));
     }
     if (hasRotate) {
-        m.multiplySelf(new DOMMatrix('rotate(' + s.rotate.replaceAll(' ', ',') + ')'));
+        const rotateParts = s.rotate.trim().split(/\s+/);
+        const rotateTransform = rotateParts.length === 1
+            ? `rotate(${rotateParts[0]})`
+            : rotateParts.length === 2 && /^[xyz]$/i.test(rotateParts[0])
+                ? `rotate${rotateParts[0].toUpperCase()}(${rotateParts[1]})`
+                : `rotate3d(${rotateParts.join(',')})`;
+        m.multiplySelf(new DOMMatrix(rotateTransform));
     }
     if (hasScale) {
-        m.multiplySelf(new DOMMatrix('scale(' + s.scale.replaceAll(' ', ',') + ')'));
+        const scaleParts = s.scale.trim().split(/\s+/);
+        const scaleFunction = scaleParts.length === 3 ? 'scale3d' : 'scale';
+        m.multiplySelf(new DOMMatrix(`${scaleFunction}(${scaleParts.join(',')})`));
     }
     if (hasOffsetPath) {
         m.multiplySelf(computeOffsetTransformMatrix(element));

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

@@ -1,7 +1,9 @@
-import type { CompositionComponentInfoResponse, EditorPickerId, SymbolicatedStackFrame } from '@remotion/studio-shared';
+import type { TerminalId } from '@remotion/studio-shared';
+import type { CompositionComponentInfoResponse, EditorPickerId, OpenInTerminalResponse, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import type { CodePosition, OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 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 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.openInCodingAgent = exports.openInEditor = void 0;
+exports.openCompositionComponentInEditor = exports.preloadCompositionComponentInfo = exports.loadCompositionComponentInfo = exports.useCachedCompositionComponentInfo = exports.getCachedCompositionComponentInfo = exports.subscribeToCompositionComponentInfo = exports.openOriginalPositionInEditorAtProperty = exports.openOriginalPositionInEditor = 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");
@@ -22,6 +22,10 @@ const openInCodingAgent = (codingAgentId, prompt) => {
     return (0, call_api_1.callApi)('/api/open-in-coding-agent', { codingAgentId, prompt });
 };
 exports.openInCodingAgent = openInCodingAgent;
+const openInTerminal = (terminalId, directory) => {
+    return (0, call_api_1.callApi)('/api/open-in-terminal', { directory, terminalId });
+};
+exports.openInTerminal = openInTerminal;
 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/preview-server-events.js

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToPreviewServerConnectionState = exports.subscribeToPreviewServerEvents = exports.ensurePreviewServerEventSource = void 0;
 const browser_studio_operations_1 = require("./browser-studio-operations");
+const sequence_node_path_mutations_1 = require("./sequence-node-path-mutations");
 let source = null;
 let unsubscribeFromBrowserStudio = null;
 let browserStudioReadyListenerInstalled = false;
@@ -18,6 +19,9 @@ const notifyConnectionState = () => {
     }
 };
 const dispatch = (event) => {
+    if (event.type === 'sequence-node-paths-remapped') {
+        (0, sequence_node_path_mutations_1.queueSequenceNodePathMutation)(event.mutation);
+    }
     if (event.type === 'init') {
         lastInitEvent = event;
         connectionState = {

package/dist/helpers/sequence-node-path-mutations.d.ts

@@ -0,0 +1,4 @@
+import type { SequenceNodePathMutation } from '@remotion/studio-shared';
+export declare const queueSequenceNodePathMutation: (mutation: SequenceNodePathMutation) => void;
+export declare const queueSequenceNodePathMutationFromApiResponse: (response: unknown) => void;
+export declare const takePendingSequenceNodePathMutations: () => SequenceNodePathMutation[];

package/dist/helpers/sequence-node-path-mutations.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.takePendingSequenceNodePathMutations = exports.queueSequenceNodePathMutationFromApiResponse = exports.queueSequenceNodePathMutation = void 0;
+const pendingMutations = [];
+const seenMutationIds = new Set();
+const queueSequenceNodePathMutation = (mutation) => {
+    if (seenMutationIds.has(mutation.mutationId)) {
+        return;
+    }
+    seenMutationIds.add(mutation.mutationId);
+    pendingMutations.push(mutation);
+};
+exports.queueSequenceNodePathMutation = queueSequenceNodePathMutation;
+const queueSequenceNodePathMutationFromApiResponse = (response) => {
+    if (typeof response !== 'object' ||
+        response === null ||
+        !('nodePathMutation' in response)) {
+        return;
+    }
+    const { nodePathMutation } = response;
+    if (typeof nodePathMutation !== 'object' ||
+        nodePathMutation === null ||
+        !('mutationId' in nodePathMutation) ||
+        typeof nodePathMutation.mutationId !== 'string') {
+        return;
+    }
+    (0, exports.queueSequenceNodePathMutation)(nodePathMutation);
+};
+exports.queueSequenceNodePathMutationFromApiResponse = queueSequenceNodePathMutationFromApiResponse;
+const takePendingSequenceNodePathMutations = () => pendingMutations.splice(0);
+exports.takePendingSequenceNodePathMutations = takePendingSequenceNodePathMutations;

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/cube.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const CubeIcon: ({ color, ...props }: SVGProps<SVGSVGElement> & {
+    readonly color: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/icons/cube.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CubeIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CubeIcon = ({ color, ...props }) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", ...props, children: jsx_runtime_1.jsx("path", { fill: color, d: "M234.5 5.7c13.6-7.6 29.3-7.6 42.9 0l192 107.3c14.2 7.9 22.9 22.9 22.9 39.2v207.6c0 16.3-8.8 31.2-22.9 39.2l-192 107.3c-13.6 7.6-29.3 7.6-42.9 0l-192-107.3c-14.2-7.9-22.9-22.9-22.9-39.2V152.2c0-16.3 8.8-31.2 22.9-39.2l192-107.3zM256 50.4L82.2 147.5 256 244.7l173.8-97.2L256 50.4zm-192 137v172.4l168 93.9V281.3L64 187.4zm216 266.3l168-93.9V187.4l-168 93.9v172.4z" }) }));
+exports.CubeIcon = CubeIcon;

package/dist/icons/finder.d.ts

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

package/dist/icons/finder.js

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

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/icons/terminal.d.ts

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

package/dist/icons/terminal.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TerminalIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../helpers/colors");
+const apps_1 = require("./apps");
+// Brand shapes adapted from Simple Icons (CC0 1.0):
+// https://github.com/simple-icons/simple-icons/tree/34c22501f9ac9f22b12f825677ccbab1fb22e14b/icons
+const iconStyle = (size) => ({
+    flexShrink: 0,
+    height: size,
+    width: size,
+});
+const simpleTerminalIcons = {
+    warp: {
+        color: '#01A4FF',
+        path: 'M12.035 2.723h9.253A2.712 2.712 0 0 1 24 5.435v10.529a2.712 2.712 0 0 1-2.712 2.713H8.047Zm-1.681 2.6L6.766 19.677h5.598l-.399 1.6H2.712A2.712 2.712 0 0 1 0 18.565V8.036a2.712 2.712 0 0 1 2.712-2.712Z',
+    },
+    wezterm: {
+        color: '#4E49EE',
+        path: 'M3.27 8.524c0-.623.62-1.007 2.123-1.007l-.5 2.757c-.931-.623-1.624-1.199-1.624-1.75zm4.008 6.807c0 .647-.644 1.079-2.123 1.15l.524-2.924c.931.624 1.6 1.175 1.6 1.774zm-2.625 5.992.454-2.708c3.603-.336 5.01-1.798 5.01-3.404 0-1.653-2.004-2.948-3.841-4.074l.668-3.548c.764.072 1.67.216 2.744.432l.31-2.469c-.81-.12-1.575-.168-2.29-.216L8.257 2.7l-2.363-.024-.453 2.684C1.838 5.648.43 7.158.43 8.764c0 1.63 2.004 2.876 3.841 3.954l-.668 3.716c-.859-.048-1.908-.192-3.125-.408L0 18.495c1.026.12 1.98.192 2.84.216l-.525 2.588zm15.553-1.894h2.673c.334-2.804.81-8.46 1.121-14.86h-2.553c-.071 1.51-.334 10.498-.43 11.241h-.071c-.644-2.42-1.169-4.386-1.813-6.782h-1.456c-.62 2.396-1.05 4.194-1.694 6.782h-.096c-.071-.743-.477-9.73-.525-11.24h-2.648c.31 6.399.763 12.055 1.097 14.86h2.625l1.838-7.12z',
+    },
+    alacritty: {
+        color: '#F46D01',
+        path: 'm10.065 0-8.57 21.269h3.595l6.91-16.244 6.91 16.244h3.594l-8.57-21.269zm1.935 9.935c-.76666 1.8547-1.5334 3.7094-2.298 5.565 1.475 4.54 1.475 4.54 2.298 8.5.823-3.96.823-3.96 2.297-8.5-.76637-1.8547-1.5315-3.7099-2.297-5.565z',
+    },
+    'gnome-terminal': {
+        color: colors_1.CURRENT_COLOR,
+        path: 'M1.846 0A1.841 1.841 0 000 1.846v18.463c0 1.022.823 1.845 1.846 1.845h20.308A1.841 1.841 0 0024 20.31V1.846A1.841 1.841 0 0022.154 0H1.846zm0 .924h20.308c.512 0 .922.41.922.922v18.463c0 .511-.41.921-.922.921H1.846a.919.919 0 01-.922-.921V1.846c0-.512.41-.922.922-.922zm0 .922v18.463h20.308V1.846H1.846zm1.845 2.14l3.235 1.758v.836L3.69 8.477V7.385l2.243-1.207v-.033L3.69 5.076v-1.09zM7.846 9.23h3.693v.924H7.846V9.23zM0 21.736v.418C0 23.177.823 24 1.846 24h20.308A1.841 1.841 0 0024 22.154v-.418a2.334 2.334 0 01-1.846.918H1.846A2.334 2.334 0 010 21.736Z',
+    },
+};
+const TerminalIcon = ({ terminalId, size }) => {
+    const hasArtwork = terminalId === 'terminal' ||
+        terminalId === 'iterm2' ||
+        terminalId === 'ghostty' ||
+        terminalId === 'windows-terminal';
+    if (hasArtwork) {
+        return (jsx_runtime_1.jsx("img", { alt: "", "aria-hidden": true, "data-terminal-icon": terminalId, draggable: false, src: `/api/app-icon/terminal/${terminalId}.png`, style: iconStyle(size) }));
+    }
+    const icon = simpleTerminalIcons[terminalId];
+    if (!icon) {
+        return (jsx_runtime_1.jsx(apps_1.AppsIcon, { "aria-hidden": true, "data-terminal-icon": terminalId, height: size, width: size }));
+    }
+    return (jsx_runtime_1.jsx("svg", { "aria-hidden": true, "data-terminal-icon": terminalId, style: iconStyle(size), viewBox: "0 0 24 24", children: jsx_runtime_1.jsx("path", { d: icon.path, fill: icon.color }) }));
+};
+exports.TerminalIcon = TerminalIcon;

package/dist/index.d.ts

@@ -16,6 +16,21 @@ export { watchPublicFolder } from './api/watch-public-folder';
 export { watchStaticFile } from './api/watch-static-file';
 export { writeStaticFile } from './api/write-static-file';
 export declare const StudioInternals: {
+    CodingAgentIcon: import("react").FC<{
+        readonly codingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
+        readonly size: number;
+    }>;
+    EditorIcon: import("react").FC<{
+        readonly editorId: import("@remotion/studio-shared").EditorPickerId | null;
+        readonly size: number | null;
+    }>;
+    FinderIcon: import("react").FC<{
+        readonly size: number;
+    }>;
+    TerminalIcon: import("react").FC<{
+        readonly terminalId: import("@remotion/studio-shared").TerminalId;
+        readonly size: number;
+    }>;
     createComposition: <Schema extends import("remotion").AnyZodObject, Props extends Record<string, unknown>>({ ...other }: import("remotion").CompositionProps<Schema, Props>) => () => import("react/jsx-runtime").JSX.Element;
     createStill: <Schema extends import("remotion").AnyZodObject, Props extends Record<string, unknown>>({ ...other }: import("remotion").StillProps<Schema, Props>) => () => import("react/jsx-runtime").JSX.Element;
 };