@remotion/studio 4.0.507 → 4.0.508

package/dist/components/SelectedOutlinePolygon.js

@@ -55,7 +55,7 @@ const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
-const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
+const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getLayoutTarget, getTarget, hasTarget, hovered, onContextMenuOpen, onContextMenuOpenChange, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onDoubleClickTarget, scale, showSelectedOutline, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -109,6 +109,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
             getDragOverrides,
             timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
         });
+        const dragOutlines = selected ? getAllDragOutlines() : [outline];
         let lastValues = new Map();
         let currentPointerX = startPointerX;
         let currentPointerY = startPointerY;
@@ -154,7 +155,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
                     allowY: axisLockedDirection !== 'horizontal',
                     deltaX,
                     deltaY,
-                    outlines: selected ? getAllDragOutlines() : [outline],
+                    outlines: dragOutlines,
                     scale,
                     targets: snapTargets,
                 });
@@ -353,7 +354,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: onEffectDragOver, onDragLeave: onEffectDragLeave, onDrop: onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, getItems: onContextMenuOpen, onOpenChange: onContextMenuOpenChange })
         ] }));
 };
 exports.SelectedOutlinePolygon = react_1.default.memo(SelectedOutlinePolygonUnmemoized);

package/dist/components/SelectedOutlineRenderer.d.ts

@@ -8,6 +8,7 @@ export declare const SelectedOutlineRenderer: React.NamedExoticComponent<{
     readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
     readonly getOutlineTargets: () => readonly SelectedOutlineLayoutTarget[];
     readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSelect: (item: TimelineSelection, interaction?: TimelineSelectionInteraction | undefined) => void;
     readonly scale: number;
     readonly sequences: readonly {

package/dist/components/SelectedOutlineRenderer.js

@@ -64,7 +64,7 @@ const SelectedOutlineHoverCleanup = ({ targets }) => {
     }, [hoveredSequence, setHoveredSequence, targets]);
     return null;
 };
-const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
+const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth, dragging, getLatestOutlineTargetByKey, getOutlineTargets, onDraggingChange, onContextMenuOpenChange, onSelect, scale, sequences, updateOutlinesRef, }) => {
     const [renderState, setRenderState] = (0, react_1.useState)(emptyRenderState);
     const overlayRef = (0, react_1.useRef)(null);
     const resizeObserverRef = (0, react_1.useRef)(null);
@@ -149,13 +149,30 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const targetsByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.targets.map((target) => [target.key, target]));
     }, [renderState.targets]);
+    // Reordering a captured SVG target can cancel the active pointer session.
+    const outlineRenderingOrderRef = (0, react_1.useRef)([]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
-        return (0, selected_outline_order_1.orderOutlinesForRendering)({
-            outlines: renderState.outlines,
-            sequences,
-            targetsByKey,
+        if (!dragging || outlineRenderingOrderRef.current.length === 0) {
+            const orderedOutlines = (0, selected_outline_order_1.orderOutlinesForRendering)({
+                outlines: renderState.outlines,
+                sequences,
+                targetsByKey,
+            });
+            outlineRenderingOrderRef.current = orderedOutlines.map((outline) => outline.key);
+            return orderedOutlines;
+        }
+        const currentOutlinesByKey = new Map(renderState.outlines.map((outline) => [outline.key, outline]));
+        const frozenKeys = new Set(outlineRenderingOrderRef.current);
+        const newOutlines = renderState.outlines.filter((outline) => !frozenKeys.has(outline.key));
+        outlineRenderingOrderRef.current = [
+            ...outlineRenderingOrderRef.current,
+            ...newOutlines.map((outline) => outline.key),
+        ];
+        return outlineRenderingOrderRef.current.flatMap((key) => {
+            const outline = currentOutlinesByKey.get(key);
+            return outline === undefined ? [] : [outline];
         });
-    }, [renderState.outlines, sequences, targetsByKey]);
+    }, [dragging, renderState.outlines, sequences, targetsByKey]);
     const outlinesByKey = (0, react_1.useMemo)(() => {
         return new Map(renderState.outlines.map((outline) => [outline.key, outline]));
     }, [renderState.outlines]);
@@ -203,6 +220,6 @@ const SelectedOutlineRendererUnmemoized = ({ compositionHeight, compositionWidth
     const updateSnapPointsRef = (0, react_1.useRef)(() => undefined);
     const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => updateSnapPointsRef.current(snapPoints), []);
     return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [
-            jsx_runtime_1.jsx(SelectedOutlineHoverCleanup, { targets: renderState.targets }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+            jsx_runtime_1.jsx(SelectedOutlineHoverCleanup, { targets: renderState.targets }), jsx_runtime_1.jsx(SelectedOutlineSnapIndicators_1.SelectedOutlineSnapIndicators, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale, updateSnapPointsRef: updateSnapPointsRef }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getAllRotationDragTargets: getAllRotationDragTargets, getAllScaleDragTargets: getAllScaleDragTargets, getLatestTargetByKey: getLatestOutlineTargetByKey, outline: outline, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, scale: scale, layoutTarget: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, getLatestTargetByKey: getLatestOutlineTargetByKey, layoutTarget: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`)))] }));
 };
 exports.SelectedOutlineRenderer = react_1.default.memo(SelectedOutlineRendererUnmemoized);

package/dist/components/SelectedOutlineRotationCornerHandle.d.ts

@@ -10,6 +10,7 @@ export declare const SelectedOutlineRotationCornerHandle: React.FC<{
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly target: SelectedOutlineTarget | undefined;

package/dist/components/SelectedOutlineRotationCornerHandle.js

@@ -51,13 +51,14 @@ const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
-const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
-    var _a, _b;
+const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onContextMenuOpenChange, onHoverChange, onSelect, target, }) => {
+    var _a, _b, _c;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
+    const containsSelection = (_c = target === null || target === void 0 ? void 0 : target.containsSelection) !== null && _c !== void 0 ? _c : false;
     const circleRef = (0, react_1.useRef)(null);
     const cornerInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
@@ -72,7 +73,7 @@ const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner
             return;
         }
         const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.toggleKey;
+        const shouldUpdateSelection = (!selected && !containsSelection) || interaction.toggleKey;
         if (shouldUpdateSelection && target !== undefined) {
             onSelect(target.selection, {
                 shiftKey: false,
@@ -236,6 +237,7 @@ const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner
         window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
+        containsSelection,
         cornerInfo,
         editorSnapping,
         getDragOverrides,
@@ -255,7 +257,7 @@ const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: colors_1.TRANSPARENT, stroke: colors_1.TRANSPARENT, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: colors_1.TRANSPARENT, stroke: colors_1.TRANSPARENT, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, "data-remotion-studio-rotation-corner": corner, "data-remotion-studio-rotation-corner-contains-selection": containsSelection, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -263,7 +265,7 @@ const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, getItems: onContextMenuOpen, onOpenChange: onContextMenuOpenChange })
         ] }));
 };
 exports.SelectedOutlineRotationCornerHandle = SelectedOutlineRotationCornerHandle;

package/dist/components/SelectedOutlineScaleEdgeLine.d.ts

@@ -10,6 +10,7 @@ export declare const SelectedOutlineScaleEdgeLine: React.FC<{
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly target: SelectedOutlineTarget | undefined;

package/dist/components/SelectedOutlineScaleEdgeLine.js

@@ -49,12 +49,13 @@ const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
-const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
-    var _a, _b;
+const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onContextMenuOpenChange, onHoverChange, onSelect, target, }) => {
+    var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
+    const containsSelection = (_c = target === null || target === void 0 ? void 0 : target.containsSelection) !== null && _c !== void 0 ? _c : false;
     const lineRef = (0, react_1.useRef)(null);
     const edgeInfo = (0, react_1.useMemo)(() => (0, selected_outline_drag_1.getSelectedOutlineScaleEdgeInfo)(outline.points, edge), [edge, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
@@ -64,7 +65,9 @@ const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge,
         event.preventDefault();
         event.stopPropagation();
         const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        const shouldUpdateSelection = (!selected && !containsSelection) ||
+            interaction.shiftKey ||
+            interaction.toggleKey;
         if (shouldUpdateSelection && target !== undefined) {
             onSelect(target.selection, interaction);
         }
@@ -182,6 +185,7 @@ const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge,
         });
     }, [
         clearDragOverrides,
+        containsSelection,
         getAllScaleDragTargets,
         edgeInfo,
         getDragOverrides,
@@ -197,7 +201,7 @@ const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge,
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, "data-remotion-studio-scale-edge": edge, "data-remotion-studio-scale-edge-contains-selection": (_d = target === null || target === void 0 ? void 0 : target.containsSelection) !== null && _d !== void 0 ? _d : false, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -205,7 +209,7 @@ const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge,
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen })
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, getItems: onContextMenuOpen, onOpenChange: onContextMenuOpenChange })
         ] }));
 };
 exports.SelectedOutlineScaleEdgeLine = SelectedOutlineScaleEdgeLine;

package/dist/components/SelectedOutlineTransformOriginHandle.js

@@ -44,25 +44,31 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarget, outline, onDraggingChange }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
-    const target = (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForTransformOrigin)
+    const target = (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForTransformOrigin) ||
+        (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation)
         ? getLatestTargetByKey(layoutTarget.key)
         : undefined;
     const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
+    const transformOriginValue = (_b = transformOriginDrag === null || transformOriginDrag === void 0 ? void 0 : transformOriginDrag.originValue) !== null && _b !== void 0 ? _b : ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation)
+        ? layoutTarget.transformOriginValue
+        : null);
     const crop = target === null || target === void 0 ? void 0 : target.crop;
-    const transformOriginPoints = (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points;
-    const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
+    const transformOriginPoints = (_c = outline.uncroppedPoints) !== null && _c !== void 0 ? _c : outline.points;
+    const parsed = (0, react_1.useMemo)(() => transformOriginValue === null
         ? null
-        : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginDrag.originValue), [transformOriginDrag]);
+        : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginValue), [transformOriginValue]);
     const uv = (0, react_1.useMemo)(() => {
         if (parsed === null || outline.dimensions === null) {
             return null;
@@ -73,7 +79,22 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
             height: outline.dimensions.height,
         });
     }, [outline.dimensions, parsed]);
-    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, uv)), [transformOriginPoints, uv]);
+    const position = (0, react_1.useMemo)(() => {
+        if (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) {
+            return (0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
+                dimensions: outline.dimensions,
+                points: transformOriginPoints,
+                transformOriginValue: layoutTarget.transformOriginValue,
+            });
+        }
+        return uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, uv);
+    }, [
+        layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation,
+        layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.transformOriginValue,
+        outline.dimensions,
+        transformOriginPoints,
+        uv,
+    ]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 ||
             transformOriginDrag === null ||
@@ -88,7 +109,7 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
         if (svg === null) {
             return;
         }
-        const rotation = (0, selected_outline_drag_1.parseCssRotationToRadians)(transformOriginDrag.rotateValue);
+        const rotation = (0, timeline_rotation_utils_1.parseCssRotation)(transformOriginDrag.rotateValue);
         if (rotation === null) {
             return;
         }
@@ -96,7 +117,7 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
         if (dimensions === null) {
             return;
         }
-        const [scaleX, scaleY] = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
+        const scale = no_react_1.NoReactInternals.parseScaleValue(transformOriginDrag.scaleValue);
         const startTranslate = (0, timeline_translate_utils_1.parseTranslate)(transformOriginDrag.translateValue);
         const svgRect = svg.getBoundingClientRect();
         let last = null;
@@ -144,16 +165,20 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
                 (nextUv[1] - uv[1]) * dimensions.height,
             ];
             const [nextTranslateX, nextTranslateY] = (0, selected_outline_drag_1.compensateTranslateForTransformOrigin)({
-                startTranslate,
+                startTranslate: [startTranslate[0], startTranslate[1]],
                 deltaOrigin,
-                rotate: rotation,
-                scale: [scaleX, scaleY],
+                rotation,
+                scale,
             });
             const origin = (0, transform_origin_utils_1.serializeTransformOrigin)({
                 uv: nextUv,
                 z: parsed.z,
             });
-            const translate = (0, timeline_translate_utils_1.serializeTranslate)(nextTranslateX, nextTranslateY);
+            const translate = (0, timeline_translate_utils_1.serializeTranslate)([
+                nextTranslateX,
+                nextTranslateY,
+                startTranslate[2],
+            ]);
             last = { uv: nextUv, origin, translate };
             setDragOverrides(transformOriginDrag.nodePath, selected_outline_types_1.transformOriginFieldKey, transformOriginDrag.originPropStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
@@ -177,11 +202,15 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
                                 const keyframeTranslate = (0, timeline_translate_utils_1.parseTranslate)(String(keyframe.value));
                                 return {
                                     ...keyframe,
-                                    value: (0, timeline_translate_utils_1.serializeTranslate)(keyframeTranslate[0] +
-                                        nextTranslateX -
-                                        startTranslate[0], keyframeTranslate[1] +
-                                        nextTranslateY -
-                                        startTranslate[1]),
+                                    value: (0, timeline_translate_utils_1.serializeTranslate)([
+                                        keyframeTranslate[0] +
+                                            nextTranslateX -
+                                            startTranslate[0],
+                                        keyframeTranslate[1] +
+                                            nextTranslateY -
+                                            startTranslate[1],
+                                        keyframeTranslate[2],
+                                    ]),
                                 };
                             }),
                         },
@@ -271,13 +300,10 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
         transformOriginPoints,
         uv,
     ]);
-    if (transformOriginDrag === null ||
-        parsed === null ||
-        uv === null ||
-        position === null) {
+    if (position === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", style: {
+    return (jsx_runtime_1.jsxs("g", { "data-remotion-studio-transform-origin-handle": true, pointerEvents: transformOriginDrag === null ? 'none' : 'all', cursor: transformOriginDrag === null ? undefined : 'crosshair', onPointerDown: onPointerDown, "aria-hidden": "true", style: {
             filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW,
         }, children: [
             jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })

package/dist/components/SequencePropsSubscriptionProvider.js

@@ -35,6 +35,14 @@ const SequencePropsSubscriptionProvider = ({ children }) => {
     const setOverrideIdToNodePath = (0, react_1.useCallback)((overrideId, state) => {
         setOverrideIdToNodePathMap((prev) => {
             const existing = prev[overrideId];
+            if (state === null) {
+                if (!existing) {
+                    return prev;
+                }
+                const next = { ...prev };
+                delete next[overrideId];
+                return next;
+            }
             if (existing && existing === state) {
                 return prev;
             }

package/dist/components/SettingsModalFooter.js

@@ -38,7 +38,7 @@ const SettingsModalFooter = () => {
         };
     }, []);
     return (jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { style: footer, noBorder: true, children: jsx_runtime_1.jsx("div", { style: footerRow, children: jsx_runtime_1.jsxs("div", { style: configFileHint, children: ["Changes save to",
-                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
+                    jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { locationType: null, location: configFileLocation, label: jsx_runtime_1.jsx("strong", { style: configFileName, children: "remotion.config.ts" }) })
                 ] }) }) }));
 };
 exports.SettingsModalFooter = SettingsModalFooter;

package/dist/components/Timeline/SequencePropsObserver.js

@@ -3,10 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequencePropsObserver = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const client_id_1 = require("../../helpers/client-id");
+const sequence_node_path_mutations_1 = require("../../helpers/sequence-node-path-mutations");
+const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { remapPropStatuses, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
+    const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const { migrateExpandedTracksForSubscriptionKey } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
@@ -19,6 +29,92 @@ const SequencePropsObserver = () => {
             unsubscribe();
         };
     }, [setPropStatuses, subscribeToEvent]);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const mutations = (0, sequence_node_path_mutations_1.takePendingSequenceNodePathMutations)();
+        if (mutations.length === 0) {
+            return;
+        }
+        const statusRemappings = [];
+        const overrideUpdates = [];
+        for (const [overrideId, previousNodePath] of Object.entries(overrideIdToNodePathMappingsRef.current)) {
+            let { nodePath } = previousNodePath;
+            let wasRemapped = false;
+            let wasDeleted = false;
+            let runtimeNodePathExists = true;
+            const previousNodePathString = JSON.stringify(previousNodePath.nodePath);
+            for (const mutation of mutations) {
+                for (const file of mutation.files) {
+                    if (file.absolutePath !== previousNodePath.absolutePath) {
+                        continue;
+                    }
+                    // Prop statuses follow source nodes to their new paths. Override IDs,
+                    // however, follow React's runtime instances. After deleting an unkeyed
+                    // sibling, React reuses the instance already at the destination path.
+                    // Keep that mapping in place and only remove mappings for vacated paths.
+                    const runtimeNodePathIsSource = file.remappings.some((item) => JSON.stringify(item.oldNodePath) === previousNodePathString);
+                    const runtimeNodePathIsDestination = file.remappings.some((item) => item.newNodePath !== null &&
+                        JSON.stringify(item.newNodePath) === previousNodePathString);
+                    const runtimeNodePathWasRestored = file.restoredNodePaths.some((item) => JSON.stringify(item) === previousNodePathString);
+                    if (runtimeNodePathIsSource) {
+                        runtimeNodePathExists =
+                            runtimeNodePathIsDestination || runtimeNodePathWasRestored;
+                    }
+                    else if (runtimeNodePathIsDestination ||
+                        runtimeNodePathWasRestored) {
+                        runtimeNodePathExists = true;
+                    }
+                    if (wasDeleted) {
+                        const wasRestored = file.restoredNodePaths.some((restoredNodePath) => JSON.stringify(restoredNodePath) === JSON.stringify(nodePath));
+                        if (wasRestored) {
+                            wasDeleted = false;
+                        }
+                        continue;
+                    }
+                    const remapping = file.remappings.find((item) => JSON.stringify(item.oldNodePath) === JSON.stringify(nodePath));
+                    if (!remapping) {
+                        continue;
+                    }
+                    wasRemapped = true;
+                    if (remapping.newNodePath === null) {
+                        wasDeleted = true;
+                        continue;
+                    }
+                    nodePath = remapping.newNodePath;
+                }
+            }
+            if (!wasRemapped) {
+                continue;
+            }
+            const nextNodePath = wasDeleted ? null : { ...previousNodePath, nodePath };
+            const previousStatusKey = remotion_1.Internals.makeSequencePropsSubscriptionKey(previousNodePath);
+            statusRemappings.push({
+                previousNodePath,
+                nodePath: nextNodePath,
+                result: (_a = propStatusesRef.current[previousStatusKey]) !== null && _a !== void 0 ? _a : null,
+            });
+            overrideUpdates.push({
+                overrideId,
+                nodePath: runtimeNodePathExists ? previousNodePath : null,
+            });
+        }
+        remapPropStatuses(statusRemappings);
+        for (const event of overrideUpdates) {
+            setOverrideIdToNodePath(event.overrideId, event.nodePath);
+        }
+        for (const event of statusRemappings) {
+            if (event.nodePath === null) {
+                continue;
+            }
+            migrateExpandedTracksForSubscriptionKey(event.previousNodePath, event.nodePath);
+        }
+    }, [
+        fastRefreshes,
+        migrateExpandedTracksForSubscriptionKey,
+        propStatusesRef,
+        remapPropStatuses,
+        setOverrideIdToNodePath,
+    ]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/SubscribeToNodePaths.js

@@ -6,7 +6,7 @@ const no_react_1 = require("remotion/no-react");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
 const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack, effects }) => {
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
+    const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
             .map((effect) => {
@@ -19,7 +19,9 @@ const SubscribeToNodePaths = ({ overrideId, componentIdentity, schema, getStack,
         componentIdentity,
         schema,
         effects: effectSubscriptions,
-        originalLocation,
+        originalLocation: resolvedLocation,
+        preferMappedNodePath,
+        stack,
     });
     return null;
 };

package/dist/components/Timeline/TimelineEffectItem.js

@@ -109,10 +109,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
                     effectIndex,
                 },
             ]);
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Removed effect from source file', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -2,13 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineFieldRowContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
     var _a;
-    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: field.typeName === 'text-content' }));
-    const value = jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children });
-    if (field.typeName === 'text-content') {
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
+    const stacked = (0, timeline_field_row_layout_1.isTimelineFieldStacked)({ field, transform3DMode });
+    const compactStacked = stacked && field.typeName !== 'text-content';
+    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: stacked }));
+    const value = (jsx_runtime_1.jsx("div", { style: compactStacked
+            ? timeline_field_row_layout_1.timelineCompactStackedFieldValueColumnStyle
+            : timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children }));
+    if (stacked) {
         return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));