@remotion/studio 4.0.507 → 4.0.509

package/dist/components/SelectedOutlinePolygon.d.ts

@@ -14,6 +14,7 @@ export declare const SelectedOutlinePolygon: React.NamedExoticComponent<{
     readonly hasTarget: boolean;
     readonly hovered: boolean;
     readonly onContextMenuOpen: SelectedOutlineContextMenuOpenHandler;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
     readonly onHoverChange: (key: string | null) => void;

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,
                 });
@@ -258,9 +259,9 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
                 (0, selected_outline_drag_1.clearSelectedOutlineDragOverrides)({ clearDragOverrides, dragStates });
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -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

@@ -7,10 +7,16 @@ export declare const SelectedOutlineRotationCornerHandle: React.FC<{
     readonly getAllRotationDragTargets: () => readonly SelectedOutlineRotationDragTarget[];
     readonly corner: SelectedOutlineRotationCorner;
     readonly dragging: boolean;
+    readonly handlePoint: {
+        readonly x: number;
+        readonly y: number;
+    };
     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 radius: number;
     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, handlePoint, outline, onDraggingChange, onContextMenuOpen, onContextMenuOpenChange, onHoverChange, onSelect, radius, 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,
@@ -226,9 +227,9 @@ const SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner
                 });
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -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: handlePoint.x, cy: handlePoint.y, r: radius, 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

@@ -7,9 +7,11 @@ export declare const SelectedOutlineScaleEdgeLine: React.FC<{
     readonly getAllScaleDragTargets: () => readonly SelectedOutlineScaleDragTarget[];
     readonly dragging: boolean;
     readonly edge: SelectedOutlineScaleEdge;
+    readonly hitWidth: number;
     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, hitWidth, 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);
         }
@@ -174,14 +177,15 @@ const SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge,
                 });
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
     }, [
         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: hitWidth, strokeLinecap: "butt", 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],
+                                    ]),
                                 };
                             }),
                         },
@@ -250,9 +279,9 @@ const SelectedOutlineTransformOriginHandle = ({ getLatestTargetByKey, layoutTarg
                 clearDragOverrides(transformOriginDrag.nodePath);
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -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/SelectedOutlineUvControls.js

@@ -236,9 +236,9 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -336,9 +336,9 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -491,9 +491,9 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
                 sourceFrame: control.handle.sourceFrame,
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -645,9 +645,9 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });

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/Splitter/SplitterHandle.js

@@ -96,9 +96,9 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                     }
                 }
             };
-            endDrag = (0, pointer_session_1.startPointerSession)({
+            endDrag = (0, pointer_session_1.startCapturedPointerSession)({
                 event: e,
-                target: current,
+                captureTarget: current,
                 onMove: onPointerMove,
                 onEnd: (reason, endEvent) => {
                     if ((reason === 'pointerup' || reason === 'buttons-released') &&

package/dist/components/Tabs/index.d.ts

@@ -5,6 +5,8 @@ export declare const Tabs: React.FC<{
 }>;
 export declare const Tab: React.FC<{
     readonly children: React.ReactNode;
+    readonly onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+    readonly onDragLeave?: React.DragEventHandler<HTMLDivElement>;
     readonly onClick: React.MouseEventHandler<HTMLDivElement>;
     readonly style?: React.CSSProperties;
     readonly selected: boolean;

package/dist/components/Tabs/index.js

@@ -34,7 +34,7 @@ const selectorButton = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const Tab = ({ children, onClick, style, selected }) => {
+const Tab = ({ children, onClick, onDragEnter, onDragLeave, style, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -55,6 +55,6 @@ const Tab = ({ children, onClick, style, selected }) => {
         boxShadow: selected ? 'none' : undefined,
         ...style,
     }), [hovered, selected, style]);
-    return (jsx_runtime_1.jsx("div", { style: definiteStyle, role: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+    return (jsx_runtime_1.jsx("div", { style: definiteStyle, role: "button", onClick: onClick, onDragEnter: onDragEnter, onDragLeave: onDragLeave, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
 };
 exports.Tab = Tab;

package/dist/components/Timeline/EasingEditorModal.js

@@ -681,9 +681,9 @@ const EasingEditor = ({ state, renderHeader }) => {
         const bezierBeforeDrag = [...bezierRef.current];
         setActiveHandle(handle);
         updateHandleFromPointer(handle, event);
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: (moveEvent) => {
                 updateHandleFromPointer(handle, moveEvent);
             },