@remotion/studio 4.0.507 → 4.0.508

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-ptnd65a9.js").then(({ StudioInternals }) => {
+    import("./chunk-zpn4m49r.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/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/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/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/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;
 };

package/dist/index.js

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StudioInternals = exports.writeStaticFile = exports.watchStaticFile = exports.watchPublicFolder = exports.visualControl = exports.updateDefaultProps = exports.toggle = exports.seek = exports.saveDefaultProps = exports.restartStudio = exports.reevaluateComposition = exports.play = exports.pause = exports.goToComposition = exports.getStaticFiles = exports.focusDefaultPropsPath = exports.deleteStaticFile = void 0;
 const create_composition_1 = require("./api/create-composition");
+const CodingAgentIcon_1 = require("./components/CodingAgentIcon");
+const editor_1 = require("./icons/editor");
+const finder_1 = require("./icons/finder");
+const terminal_1 = require("./icons/terminal");
 const delete_static_file_1 = require("./api/delete-static-file");
 Object.defineProperty(exports, "deleteStaticFile", { enumerable: true, get: function () { return delete_static_file_1.deleteStaticFile; } });
 const focus_default_props_path_1 = require("./api/focus-default-props-path");
@@ -35,6 +39,10 @@ Object.defineProperty(exports, "watchStaticFile", { enumerable: true, get: funct
 const write_static_file_1 = require("./api/write-static-file");
 Object.defineProperty(exports, "writeStaticFile", { enumerable: true, get: function () { return write_static_file_1.writeStaticFile; } });
 exports.StudioInternals = {
+    CodingAgentIcon: CodingAgentIcon_1.CodingAgentIcon,
+    EditorIcon: editor_1.EditorIcon,
+    FinderIcon: finder_1.FinderIcon,
+    TerminalIcon: terminal_1.TerminalIcon,
     createComposition: create_composition_1.createComposition,
     createStill: create_composition_1.createStill,
 };

package/dist/state/transform-3d-mode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Transform3DModeState = {
+    readonly manuallyEnabledSequenceKeys: ReadonlySet<string>;
+    readonly setManuallyEnabled: (sequenceKey: string, enabled: boolean) => void;
+};
+export declare const Transform3DModeStateContext: React.Context<Transform3DModeState>;
+export declare const Transform3DModeStateProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/state/transform-3d-mode.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Transform3DModeStateProvider = exports.Transform3DModeStateContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.Transform3DModeStateContext = (0, react_1.createContext)({
+    manuallyEnabledSequenceKeys: new Set(),
+    setManuallyEnabled: () => undefined,
+});
+const Transform3DModeStateProvider = ({ children }) => {
+    const [manuallyEnabledSequenceKeys, setManuallyEnabledSequenceKeys] = (0, react_1.useState)(() => new Set());
+    const setManuallyEnabled = (0, react_1.useCallback)((sequenceKey, enabled) => {
+        setManuallyEnabledSequenceKeys((previous) => {
+            const next = new Set(previous);
+            if (enabled) {
+                next.add(sequenceKey);
+            }
+            else {
+                next.delete(sequenceKey);
+            }
+            return next;
+        });
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ manuallyEnabledSequenceKeys, setManuallyEnabled }), [manuallyEnabledSequenceKeys, setManuallyEnabled]);
+    return (jsx_runtime_1.jsx(exports.Transform3DModeStateContext.Provider, { value: value, children: children }));
+};
+exports.Transform3DModeStateProvider = Transform3DModeStateProvider;

package/dist/state/z-index.js

@@ -89,14 +89,11 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick, disabled, outsideCli
                 },
             });
         };
-        // If a menu is opened, then this component will also still receive the pointerdown event.
-        // However we may not interpret it as a outside click, so we need to wait for the next tick
-        requestAnimationFrame(() => {
-            // The third argument `true` registers a capture-phase listener. Some Studio
-            // elements stop pointerdown propagation while still being outside the menu,
-            // so bubbling listeners would miss those clicks and keep the menu open.
-            window.addEventListener('pointerdown', listener, true);
-        });
+        // 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;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.507",
+	"version": "4.0.508",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,17 +24,17 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.507",
+		"@remotion/studio-protocol": "4.0.508",
 		"semver": "7.5.3",
-		"remotion": "4.0.507",
-		"@remotion/captions": "4.0.507",
-		"@remotion/player": "4.0.507",
-		"@remotion/media-utils": "4.0.507",
-		"@remotion/renderer": "4.0.507",
-		"@remotion/web-renderer": "4.0.507",
-		"@remotion/studio-shared": "4.0.507",
-		"@remotion/timeline-utils": "4.0.507",
-		"@remotion/zod-types": "4.0.507",
+		"remotion": "4.0.508",
+		"@remotion/captions": "4.0.508",
+		"@remotion/player": "4.0.508",
+		"@remotion/media-utils": "4.0.508",
+		"@remotion/renderer": "4.0.508",
+		"@remotion/web-renderer": "4.0.508",
+		"@remotion/studio-shared": "4.0.508",
+		"@remotion/timeline-utils": "4.0.508",
+		"@remotion/zod-types": "4.0.508",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -45,7 +45,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.507",
+		"@remotion/eslint-config-internal": "4.0.508",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},