@remotion/studio 4.0.507 → 4.0.509

package/dist/components/Timeline/timeline-rotation-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeCssRotation = exports.parseCssRotationToDegrees = void 0;
+exports.serializeCssRotation = exports.serializeCssRotationFromEuler = exports.serializeCssRotation3d = exports.parseCssRotationToEuler = exports.parseCssRotationToDegrees = exports.parseCssRotation = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const unitPattern = /^([+-]?(?:\d+\.?\d*|\.\d+))(deg|rad|turn|grad)$/;
 const unitToDegrees = {
@@ -9,10 +9,54 @@ const unitToDegrees = {
     turn: 360,
     grad: 360 / 400,
 };
+const parseCssRotation = (value) => {
+    const trimmed = value.trim();
+    const bareAngle = trimmed.match(unitPattern);
+    if (bareAngle) {
+        return {
+            axis: [0, 0, 1],
+            degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(bareAngle[1]) * unitToDegrees[bareAngle[2]]),
+        };
+    }
+    const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(trimmed);
+    if (keywordAxis) {
+        const keywordAngle = keywordAxis[2].match(unitPattern);
+        if (!keywordAngle) {
+            return null;
+        }
+        const keywordAxisName = keywordAxis[1].toLowerCase();
+        return {
+            axis: keywordAxisName === 'x'
+                ? [1, 0, 0]
+                : keywordAxisName === 'y'
+                    ? [0, 1, 0]
+                    : [0, 0, 1],
+            degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(keywordAngle[1]) * unitToDegrees[keywordAngle[2]]),
+        };
+    }
+    const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(trimmed);
+    if (!vectorAxis) {
+        return null;
+    }
+    const vectorAxisComponents = [
+        Number(vectorAxis[1]),
+        Number(vectorAxis[2]),
+        Number(vectorAxis[3]),
+    ];
+    const vectorAngle = vectorAxis[4].match(unitPattern);
+    if (!vectorAxisComponents.every(Number.isFinite) || !vectorAngle) {
+        return null;
+    }
+    return {
+        axis: vectorAxisComponents,
+        degrees: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(vectorAngle[1]) * unitToDegrees[vectorAngle[2]]),
+    };
+};
+exports.parseCssRotation = parseCssRotation;
 const parseCssRotationToDegrees = (value) => {
-    const match = value.trim().match(unitPattern);
-    if (match) {
-        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
+    const parsed = (0, exports.parseCssRotation)(value);
+    if (parsed) {
+        return parsed.degrees;
     }
     if (typeof DOMMatrix === 'undefined') {
         return 0;
@@ -26,6 +70,103 @@ const parseCssRotationToDegrees = (value) => {
     }
 };
 exports.parseCssRotationToDegrees = parseCssRotationToDegrees;
+const parseCssRotationToEuler = (value) => {
+    const parsed = (0, exports.parseCssRotation)(value);
+    if (parsed === null) {
+        return [0, 0, (0, exports.parseCssRotationToDegrees)(value)];
+    }
+    const [axisX, axisY, axisZ] = parsed.axis;
+    if (parsed.degrees === 0) {
+        return [0, 0, 0];
+    }
+    if (axisY === 0 && axisZ === 0 && axisX !== 0) {
+        return [Math.sign(axisX) * parsed.degrees, 0, 0];
+    }
+    if (axisX === 0 && axisZ === 0 && axisY !== 0) {
+        return [0, Math.sign(axisY) * parsed.degrees, 0];
+    }
+    if (axisX === 0 && axisY === 0 && axisZ !== 0) {
+        return [0, 0, Math.sign(axisZ) * parsed.degrees];
+    }
+    const axisLength = Math.hypot(axisX, axisY, axisZ);
+    if (axisLength === 0) {
+        return [0, 0, 0];
+    }
+    const halfAngle = (parsed.degrees * Math.PI) / 360;
+    const sinHalfAngle = Math.sin(halfAngle);
+    const quaternionX = (axisX / axisLength) * sinHalfAngle;
+    const quaternionY = (axisY / axisLength) * sinHalfAngle;
+    const quaternionZ = (axisZ / axisLength) * sinHalfAngle;
+    const quaternionW = Math.cos(halfAngle);
+    // Decompose the rotation using the same X → Y → Z order used when serializing.
+    const matrix11 = 1 - 2 * (quaternionY * quaternionY + quaternionZ * quaternionZ);
+    const matrix12 = 2 * (quaternionX * quaternionY - quaternionZ * quaternionW);
+    const matrix13 = 2 * (quaternionX * quaternionZ + quaternionY * quaternionW);
+    const matrix22 = 1 - 2 * (quaternionX * quaternionX + quaternionZ * quaternionZ);
+    const matrix23 = 2 * (quaternionY * quaternionZ - quaternionX * quaternionW);
+    const matrix32 = 2 * (quaternionY * quaternionZ + quaternionX * quaternionW);
+    const matrix33 = 1 - 2 * (quaternionX * quaternionX + quaternionY * quaternionY);
+    const clampedMatrix13 = Math.max(-1, Math.min(1, matrix13));
+    const rotationY = Math.asin(clampedMatrix13);
+    const rotationX = Math.abs(clampedMatrix13) < 0.9999999
+        ? Math.atan2(-matrix23, matrix33)
+        : Math.atan2(matrix32, matrix22);
+    const rotationZ = Math.abs(clampedMatrix13) < 0.9999999 ? Math.atan2(-matrix12, matrix11) : 0;
+    return [rotationX, rotationY, rotationZ].map((rotation) => (0, timeline_field_utils_1.normalizeTimelineNumber)(rotation * (180 / Math.PI)));
+};
+exports.parseCssRotationToEuler = parseCssRotationToEuler;
+const serializeCssRotation3d = ({ axis, degrees, decimalPlaces = 6, }) => {
+    const factor = 10 ** decimalPlaces;
+    const values = [...axis, degrees].map((value) => {
+        const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;
+        return Object.is(rounded, -0) ? 0 : rounded;
+    });
+    return `${values[0]} ${values[1]} ${values[2]} ${values[3]}deg`;
+};
+exports.serializeCssRotation3d = serializeCssRotation3d;
+const serializeCssRotationFromEuler = ({ rotation, decimalPlaces = 6, }) => {
+    const [rotationX, rotationY, rotationZ] = rotation.map((value) => (0, timeline_field_utils_1.normalizeTimelineNumber)(value));
+    if (rotationY === 0 && rotationZ === 0) {
+        return rotationX === 0
+            ? (0, exports.serializeCssRotation)(0, decimalPlaces)
+            : `x ${(0, exports.serializeCssRotation)(rotationX, decimalPlaces)}`;
+    }
+    if (rotationX === 0 && rotationZ === 0) {
+        return `y ${(0, exports.serializeCssRotation)(rotationY, decimalPlaces)}`;
+    }
+    if (rotationX === 0 && rotationY === 0) {
+        return (0, exports.serializeCssRotation)(rotationZ, decimalPlaces);
+    }
+    const halfRotationX = (rotationX * Math.PI) / 360;
+    const halfRotationY = (rotationY * Math.PI) / 360;
+    const halfRotationZ = (rotationZ * Math.PI) / 360;
+    const sinX = Math.sin(halfRotationX);
+    const cosX = Math.cos(halfRotationX);
+    const sinY = Math.sin(halfRotationY);
+    const cosY = Math.cos(halfRotationY);
+    const sinZ = Math.sin(halfRotationZ);
+    const cosZ = Math.cos(halfRotationZ);
+    // Compose the three editable angles into the axis-angle form CSS rotate accepts.
+    const quaternionX = sinX * cosY * cosZ + cosX * sinY * sinZ;
+    const quaternionY = cosX * sinY * cosZ - sinX * cosY * sinZ;
+    const quaternionZ = cosX * cosY * sinZ + sinX * sinY * cosZ;
+    const quaternionW = cosX * cosY * cosZ - sinX * sinY * sinZ;
+    const angle = 2 * Math.acos(Math.max(-1, Math.min(1, quaternionW)));
+    const sinHalfAngle = Math.sqrt(Math.max(0, 1 - quaternionW * quaternionW));
+    if (sinHalfAngle < 0.0000001) {
+        return (0, exports.serializeCssRotation)(0, decimalPlaces);
+    }
+    return (0, exports.serializeCssRotation3d)({
+        axis: [
+            quaternionX / sinHalfAngle,
+            quaternionY / sinHalfAngle,
+            quaternionZ / sinHalfAngle,
+        ],
+        degrees: angle * (180 / Math.PI),
+        decimalPlaces,
+    });
+};
+exports.serializeCssRotationFromEuler = serializeCssRotationFromEuler;
 const serializeCssRotation = (value, decimalPlaces = 6) => {
     const factor = 10 ** decimalPlaces;
     const rounded = Math.round((0, timeline_field_utils_1.normalizeTimelineNumber)(value) * factor) / factor;

package/dist/components/Timeline/timeline-translate-utils.d.ts

@@ -1,2 +1,3 @@
-export declare const parseTranslate: (value: string) => [number, number];
-export declare const serializeTranslate: (x: number, y: number, decimalPlaces?: number) => string;
+export type ParsedTranslate = readonly [number, number, number | null];
+export declare const parseTranslate: (value: string) => ParsedTranslate;
+export declare const serializeTranslate: ([x, y, z]: ParsedTranslate, decimalPlaces?: number) => string;

package/dist/components/Timeline/timeline-translate-utils.js

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
 const translateDecimalPlaces = 1;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
-        return [0, 0];
+        return [0, 0, null];
     }
     return [
         (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[1])),
         m[2] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[2])) : 0,
+        m[3] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[3])) : null,
     ];
 };
 exports.parseTranslate = parseTranslate;
@@ -20,7 +21,10 @@ const formatTranslateCoordinate = (value, decimalPlaces) => {
     const rounded = (0, timeline_field_utils_1.roundToDecimalPlaces)(normalized, decimalPlaces);
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
-const serializeTranslate = (x, y, decimalPlaces = translateDecimalPlaces) => {
-    return `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
+const serializeTranslate = ([x, y, z], decimalPlaces = translateDecimalPlaces) => {
+    const xy = `${formatTranslateCoordinate(x, decimalPlaces)}px ${formatTranslateCoordinate(y, decimalPlaces)}px`;
+    return z === null
+        ? xy
+        : `${xy} ${formatTranslateCoordinate(z, decimalPlaces)}px`;
 };
 exports.serializeTranslate = serializeTranslate;

package/dist/components/Timeline/transform-3d-mode.d.ts

@@ -0,0 +1,6 @@
+import type { CanUpdateSequencePropStatus } from 'remotion';
+export declare const propStatusHas3DTransformValue: ({ fieldKey, propStatus, runtimeValue, }: {
+    readonly fieldKey: string;
+    readonly propStatus: CanUpdateSequencePropStatus | undefined;
+    readonly runtimeValue: unknown;
+}) => boolean;

package/dist/components/Timeline/transform-3d-mode.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.propStatusHas3DTransformValue = void 0;
+const no_react_1 = require("remotion/no-react");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const timeline_translate_utils_1 = require("./timeline-translate-utils");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const has3DTransformValue = ({ fieldKey, value, }) => {
+    if (fieldKey === 'style.scale') {
+        return no_react_1.NoReactInternals.parseScaleValue(value)[2] !== 1;
+    }
+    if (fieldKey === 'style.rotate') {
+        const rotation = (0, timeline_rotation_utils_1.parseCssRotationToEuler)(String(value !== null && value !== void 0 ? value : '0deg'));
+        return rotation[0] !== 0 || rotation[1] !== 0;
+    }
+    if (fieldKey === 'style.translate') {
+        const z = (0, timeline_translate_utils_1.parseTranslate)(String(value !== null && value !== void 0 ? value : '0px 0px'))[2];
+        return z !== null && z !== 0;
+    }
+    if (fieldKey === 'style.transformOrigin') {
+        const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(value);
+        const z = (parsed === null || parsed === void 0 ? void 0 : parsed.z) ? (0, transform_origin_utils_1.parseTransformOriginZ)(parsed.z) : null;
+        return z !== null && z.value !== 0;
+    }
+    return false;
+};
+const propStatusHas3DTransformValue = ({ fieldKey, propStatus, runtimeValue, }) => {
+    if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed') {
+        return propStatus.keyframes.some((keyframe) => has3DTransformValue({ fieldKey, value: keyframe.value }));
+    }
+    return has3DTransformValue({
+        fieldKey,
+        value: (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ? propStatus.codeValue : runtimeValue,
+    });
+};
+exports.propStatusHas3DTransformValue = propStatusHas3DTransformValue;

package/dist/components/Timeline/transform-origin-utils.d.ts

@@ -8,6 +8,10 @@ export type ParsedTransformOrigin = {
     readonly y: TransformOriginAxisValue;
     readonly z: string | null;
 };
+export declare const parseTransformOriginZ: (token: string) => {
+    readonly value: number;
+    readonly unit: string;
+} | null;
 export declare const parseTransformOrigin: (value: unknown) => ParsedTransformOrigin | null;
 export declare const axisValueToUv: (axis: TransformOriginAxisValue, size: number) => number | null;
 export declare const parsedTransformOriginToUv: ({ parsed, width, height, }: {

package/dist/components/Timeline/transform-origin-utils.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.transformOriginPercentToUv = exports.parsedTransformOriginToPercent = exports.serializeTransformOrigin = exports.parsedTransformOriginToUv = exports.axisValueToUv = exports.parseTransformOrigin = void 0;
+exports.transformOriginPercentToUv = exports.parsedTransformOriginToPercent = exports.serializeTransformOrigin = exports.parsedTransformOriginToUv = exports.axisValueToUv = exports.parseTransformOrigin = exports.parseTransformOriginZ = void 0;
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const cssNumberWithUnit = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/i;
-const cssLength = /^([+-]?(?:\d+\.?\d*|\.\d+))[a-zA-Z]+$/;
+const cssLength = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z]+)$/;
 const keywords = new Set(['left', 'center', 'right', 'top', 'bottom']);
 const center = { value: 50, unit: '%' };
 const keywordOptions = (keyword) => {
@@ -108,12 +108,18 @@ const parseXY = (parts) => {
     }
     return keywordIsFirst ? [center, length] : [length, center];
 };
-const isSupportedZ = (token) => {
+const parseTransformOriginZ = (token) => {
     if (token.includes('%')) {
-        return false;
+        return null;
     }
-    return cssLength.test(token);
+    const match = cssLength.exec(token);
+    if (!match) {
+        return null;
+    }
+    const value = Number(match[1]);
+    return Number.isFinite(value) ? { value, unit: match[2] } : null;
 };
+exports.parseTransformOriginZ = parseTransformOriginZ;
 const parseTransformOrigin = (value) => {
     var _a;
     if (typeof value !== 'string') {
@@ -128,7 +134,7 @@ const parseTransformOrigin = (value) => {
         return null;
     }
     const z = (_a = parts[2]) !== null && _a !== void 0 ? _a : null;
-    if (z !== null && !isSupportedZ(z)) {
+    if (z !== null && (0, exports.parseTransformOriginZ)(z) === null) {
         return null;
     }
     return { x: xy[0], y: xy[1], z };

package/dist/components/Timeline/update-selected-easing.js

@@ -33,6 +33,10 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
+            (0, studio_shared_1.isSchemaFieldHoldOnly)({
+                schema: sequence.controls.schema,
+                key: field.fieldKey,
+            }) ||
             !(0, studio_shared_1.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
@@ -60,6 +64,10 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
+        (0, studio_shared_1.isSchemaFieldHoldOnly)({
+            schema: effect.schema,
+            key: field.fieldKey,
+        }) ||
         !(0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }

package/dist/components/Timeline/use-open-sequence-in-apps.js

@@ -8,9 +8,11 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const useOpenSequenceInApps = (sequence) => {
+    var _a;
+    var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const { resolvedLocation: originalLocation } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack, (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id);
     const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewConnected);
     const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);

package/dist/components/Timeline/use-resolved-stack-react-to-change.d.ts

@@ -1,2 +1,6 @@
 import type { ResolvedStackLocation } from 'remotion';
-export declare const useResolveStackAndReactToChange: (getStack: () => string | null) => ResolvedStackLocation | null;
+export declare const useResolveStackAndReactToChange: (getStack: () => string | null, sequenceIdentity: string) => {
+    preferMappedNodePath: boolean;
+    resolvedLocation: ResolvedStackLocation | null;
+    stack: string | null;
+};

package/dist/components/Timeline/use-resolved-stack-react-to-change.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResolveStackAndReactToChange = void 0;
 const react_1 = require("react");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 // This case: https://github.com/remotion-dev/remotion/issues/7393
 // A code change has been made and we cannot re-calculate the stack right away.
 // In that case, we wait for fast refresh, wait for the new stack trace, triggering a new event.
-const matchesLostNodePathEvent = (event, location) => {
+const matchesSourceLocation = (event, location) => {
     var _a;
     if (!(location === null || location === void 0 ? void 0 : location.source) || !location.line) {
         return false;
@@ -16,33 +17,85 @@ const matchesLostNodePathEvent = (event, location) => {
         event.line === location.line &&
         event.column === ((_a = location.column) !== null && _a !== void 0 ? _a : 0));
 };
-const useResolveStackAndReactToChange = (getStack) => {
+const useResolveStackAndReactToChange = (getStack, sequenceIdentity) => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const [stack, setStack] = (0, react_1.useState)(() => getStack());
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const [stackState, setStackState] = (0, react_1.useState)(() => ({
+        stack: getStack(),
+        preferMappedNodePath: true,
+    }));
+    const resolvedLocationFromStack = (0, use_resolved_stack_1.useResolvedStack)(stackState.stack);
+    const stackIsResolved = (0, use_resolved_stack_1.hasResolvedStack)(stackState.stack);
+    const lastResolvedLocation = (0, react_1.useRef)(resolvedLocationFromStack);
+    if (stackIsResolved) {
+        lastResolvedLocation.current = resolvedLocationFromStack;
+    }
+    const resolvedLocation = stackIsResolved
+        ? resolvedLocationFromStack
+        : stackState.preferMappedNodePath
+            ? null
+            : lastResolvedLocation.current;
     const resolvedLocationRef = (0, react_1.useRef)(resolvedLocation);
     resolvedLocationRef.current = resolvedLocation;
+    const getStackRef = (0, react_1.useRef)(getStack);
+    getStackRef.current = getStack;
+    (0, react_1.useEffect)(() => {
+        const newStack = getStackRef.current();
+        setStackState((current) => {
+            if (newStack === current.stack) {
+                return current;
+            }
+            return {
+                stack: newStack,
+                // A different identity means a different selected sequence. Its existing
+                // node path mapping is still preferred.
+                preferMappedNodePath: true,
+            };
+        });
+    }, [sequenceIdentity]);
+    (0, react_1.useEffect)(() => {
+        if (fastRefreshes === 0) {
+            return;
+        }
+        const newStack = getStackRef.current();
+        setStackState((current) => {
+            if (newStack === current.stack) {
+                return current;
+            }
+            return {
+                stack: newStack,
+                // Resolve from the post-refresh source location. The previous node path
+                // may now belong to a sibling after a structural edit.
+                preferMappedNodePath: false,
+            };
+        });
+    }, [fastRefreshes]);
     (0, react_1.useEffect)(() => {
         let interval = null;
         const handleEvent = (event) => {
             if (event.type !== 'lost-node-path') {
                 return;
             }
-            if (!matchesLostNodePathEvent(event, resolvedLocationRef.current)) {
+            if (!matchesSourceLocation(event, resolvedLocationRef.current)) {
                 return;
             }
-            const initialStack = getStack();
+            const initialStack = getStackRef.current();
             if (interval !== null) {
                 clearInterval(interval);
             }
             interval = setInterval(() => {
-                const newStack = getStack();
+                const newStack = getStackRef.current();
                 if (newStack !== initialStack) {
                     if (interval !== null) {
                         clearInterval(interval);
                         interval = null;
                     }
-                    setStack(newStack);
+                    setStackState({
+                        stack: newStack,
+                        // The old override ID may now belong to a sibling. Resolve the
+                        // node path from the post-refresh source location instead.
+                        preferMappedNodePath: false,
+                    });
                 }
             }, 10);
         };
@@ -53,7 +106,11 @@ const useResolveStackAndReactToChange = (getStack) => {
                 clearInterval(interval);
             }
         };
-    }, [subscribeToEvent, getStack]);
-    return resolvedLocation;
+    }, [subscribeToEvent]);
+    return {
+        preferMappedNodePath: stackState.preferMappedNodePath,
+        resolvedLocation,
+        stack: stackState.stack,
+    };
 };
 exports.useResolveStackAndReactToChange = useResolveStackAndReactToChange;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,9 +1,11 @@
 import type { InteractivitySchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }: {
     overrideId: string;
     componentIdentity: string | null;
     schema: InteractivitySchema;
     effects: InteractivitySchema[];
     originalLocation: OriginalPosition | null;
+    preferMappedNodePath: boolean;
+    stack: string | null;
 }) => void;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -8,7 +8,7 @@ const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
 const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, preferMappedNodePath, stack, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -56,8 +56,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
             schema,
             componentIdentity,
             effects,
-            nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
+            nodePath: preferMappedNodePath
+                ? ((_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null)
+                : null,
             clientId,
+            stack,
             videoConfigValues: {
                 durationInFrames: videoConfig.durationInFrames,
                 fps: videoConfig.fps,
@@ -104,9 +107,11 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         locationSource,
         migrateExpandedTracksForSubscriptionKey,
         overrideId,
+        preferMappedNodePath,
         schema,
         setPropStatuses,
         setOverrideIdToNodePath,
+        stack,
         videoConfig,
     ]);
 };

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -436,9 +436,9 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: onPointerMove,
             onEnd: (reason) => {
                 if (reason === 'pointerup' || reason === 'buttons-released') {
@@ -643,9 +643,9 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+        stopPointerSession = (0, pointer_session_1.startCapturedPointerSession)({
             event: e,
-            target: e.currentTarget,
+            captureTarget: e.currentTarget,
             onMove: onPointerMove,
             onEnd: (reason) => {
                 if (reason === 'pointerup' || reason === 'buttons-released') {

package/dist/components/call-api.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.callApi = void 0;
+const sequence_node_path_mutations_1 = require("../helpers/sequence-node-path-mutations");
 const callApi = (endpoint, body, signal) => {
     return new Promise((resolve, reject) => {
         fetch(endpoint, {
@@ -14,6 +15,7 @@ const callApi = (endpoint, body, signal) => {
             .then((res) => res.json())
             .then((data) => {
             if (data.success) {
+                (0, sequence_node_path_mutations_1.queueSequenceNodePathMutationFromApiResponse)(data.data);
                 resolve(data.data);
             }
             else {

package/dist/components/canvas-rotation-cursor.d.ts

@@ -0,0 +1 @@
+export declare const canvasRotationCursor: string;

package/dist/components/canvas-rotation-cursor.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canvasRotationCursor = void 0;
+const canvasRotationCursorSvg = `<svg width="29" height="30" viewBox="0 0 83 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#shadow)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.673 35.4941C58.6612 35.1059 58.6552 34.9899 58.6346 34.4705L58.605 33.8746C58.608 33.9357 58.5753 33.3889 58.5813 33.4469L58.5695 33.2635L54.9726 33.508V33.5201C54.9874 33.7371 54.9992 33.9389 55.011 34.1587C55.011 34.1556 55.0851 36.3955 55.0851 36.3924L55.0881 36.4688L55.0851 36.4382L55.0881 36.5268V36.591V36.5604V36.6521V36.6246V36.7163V36.6857L55.0911 36.7927L55.0881 36.7621L55.0911 36.8844V36.8538V36.9913V36.9607V37.1441L55.0908 37.1166V37.3C55.0908 40.1263 54.8952 43.0781 54.4568 46.0083C55.7693 45.6263 57.0555 45.1771 58.273 44.6517C58.5605 42.2072 58.6966 39.7506 58.6966 37.3031C58.6936 36.9149 58.6906 36.527 58.6848 36.1389L58.673 35.4941ZM21.7249 51.5816L11.6923 48.5781L13.6418 46.4055C11.1501 43.9916 9.3219 40.9118 9.3219 37.3C9.33972 34.501 10.3589 32.133 12.0242 29.9697C14.4835 26.8805 17.9916 24.5982 21.9176 22.9633C21.5738 24.4421 21.2893 25.9362 21.0613 27.4426C19.3486 28.3349 17.7752 29.386 16.4095 30.6144C14.7415 32.1421 13.3428 34.0304 13.0051 36.3039C12.7799 37.8317 13.0852 39.2831 13.7724 40.6338C14.3562 41.7765 15.1886 42.8063 16.0896 43.674L18.0364 41.5015L21.7249 51.5816ZM34.2108 19.8313C36.6997 19.5167 39.1175 19.3792 41.3219 19.3792C46.5515 19.3792 51.8463 20.0576 56.8656 21.5854C63.7397 23.6785 73.2715 28.711 73.3219 37.3001C73.3041 40.096 72.2879 42.464 70.6226 44.6274C64.2492 52.639 50.8152 55.221 41.3218 55.221C38.6848 55.221 35.9232 55.056 33.3307 54.6647L33.8196 50.9828C36.2492 51.3495 38.8536 51.5022 41.3248 51.5022C49.3544 51.5022 59.9855 49.6047 66.2374 43.9856C68.1455 42.2377 69.6953 40.0224 69.7189 37.3C69.6804 32.8542 65.5411 29.6123 62.0922 27.7239C55.9115 24.3841 48.2344 23.0948 41.3218 23.0948C38.7026 23.0948 35.8047 23.2965 32.8715 23.7639C33.2479 22.4132 33.6923 21.0965 34.2108 19.8313ZM50.8745 58.1816C52.3146 57.9493 53.7634 57.6652 55.1974 57.317C52.6789 63.6206 48.1633 70.2572 41.3218 70.3C38.6077 70.2816 36.3114 69.2337 34.2137 67.5163C26.4448 60.9408 23.9441 47.09 23.9441 37.3C23.9441 31.91 24.602 26.4466 26.0834 21.2705C28.1131 14.1817 32.9931 4.35195 41.322 4.3C45.63 4.3 49.1057 7.12951 51.5916 10.5272L53.8967 8.76404L55.7041 19.3699L46.3885 14.5025L48.6936 12.7393C46.9723 10.3347 44.3528 8.01873 41.3217 8.01873C37.0106 8.05836 33.8669 12.3302 32.0358 15.8868C28.7972 22.2546 27.5469 30.1715 27.5469 37.3001C27.5469 45.5806 29.387 56.544 34.8388 62.9912C36.5337 64.9589 38.6788 66.5571 41.3217 66.5815C45.6328 66.5418 48.7765 62.2731 50.6076 58.7165L50.8745 58.1816Z" fill="black" stroke="white" stroke-width="3" stroke-linejoin="round" paint-order="stroke"/>
+</g>
+<defs>
+<filter id="shadow" x="0" y="0" width="83" height="85" filterUnits="userSpaceOnUse">
+<feDropShadow dx="0" dy="5" stdDeviation="3.15" flood-color="black" flood-opacity="0.25"/>
+</filter>
+</defs>
+</svg>`;
+exports.canvasRotationCursor = `url("data:image/svg+xml,${encodeURIComponent(canvasRotationCursorSvg)}") 15 13, alias`;

package/dist/components/folder-menu-items.js

@@ -88,6 +88,7 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                     folderName: folder.name,
                     parentName: folder.parent,
                     stack: folder.stack,
+                    canvasCapture: null,
                 });
             },
             quickSwitcherLabel: 'New composition in folder...',

package/dist/components/get-open-in-menu-items.d.ts

@@ -1,12 +1,19 @@
+import type { TerminalId } from '@remotion/studio-shared';
 import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { OriginalPosition } from '../error-overlay/react-overlay/utils/get-source-map';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }: {
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, fileManagerDisabled, folder, location, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInTerminal, }: {
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
     readonly excludeCodingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
     readonly excludeEditorId: EditorPickerId | null;
+    readonly fileManagerDisabled: boolean;
+    readonly folder: boolean;
+    readonly location: OriginalPosition | null;
     readonly onConfigureApps: () => void;
     readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
     readonly onOpenInEditor: (editorId: EditorPickerId) => void;
+    readonly onOpenInFileExplorer: () => void;
+    readonly onOpenInTerminal: ((terminalId: TerminalId) => void) | null;
 }) => ComboboxValue[];