@remotion/studio 4.0.508 → 4.0.510

package/dist/components/NewComposition/get-new-composition-defaults.js

@@ -7,7 +7,15 @@ const defaultCompositionDimensions = {
     fps: 30,
     durationInFrames: 150,
 };
-const getNewCompositionDefaults = (composition) => {
+const canvasCaptureFps = 60;
+const getNewCompositionDefaults = (composition, canvasCaptureDurationInSeconds) => {
+    if (canvasCaptureDurationInSeconds !== null) {
+        return {
+            ...defaultCompositionDimensions,
+            fps: canvasCaptureFps,
+            durationInFrames: Math.max(1, Math.ceil(canvasCaptureDurationInSeconds * canvasCaptureFps)),
+        };
+    }
     return composition !== null && composition !== void 0 ? composition : defaultCompositionDimensions;
 };
 exports.getNewCompositionDefaults = getNewCompositionDefaults;

package/dist/components/QuickSwitcher/asset-search.js

@@ -30,6 +30,7 @@ const componentAssetTypes = {
     'dev.remotion.media.Audio': 'audio',
     'dev.remotion.media.Video': 'video',
     'dev.remotion.remotion.AnimatedImage': 'image',
+    'dev.remotion.remotion.CanvasImage': 'image',
     'dev.remotion.remotion.Img': 'image',
 };
 const getAssetSearchQueryForComponent = (componentIdentity) => {

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -75,6 +75,8 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         if (svg === null) {
             return;
         }
+        const previousSvgCursor = svg.style.cursor;
+        svg.style.cursor = canvas_rotation_cursor_1.canvasRotationCursor;
         const startPointer = { x: event.clientX, y: event.clientY };
         const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
@@ -104,6 +106,7 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
                     return;
                 }
                 dragStarted = true;
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
                 onDraggingChange(true);
             }
             if (rotationDrag.transform3DMode) {
@@ -123,7 +126,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
                     rotationXDeltaDegrees,
                     rotationYDeltaDegrees,
                 });
-                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
             }
             else {
                 const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
@@ -145,7 +147,6 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
                     dragStates,
                     rotationDeltaDegrees,
                 });
-                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
             }
             for (const dragState of dragStates) {
                 const value = lastValues.get(dragState.key);
@@ -165,6 +166,7 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
             }
         };
         const onPointerUp = () => {
+            svg.style.cursor = previousSvgCursor;
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -213,9 +215,9 @@ const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onD
         };
         // The polygon gates pointer-down, while the stable overlay keeps the
         // session alive after the pointer leaves the selected item.
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: svg,
+            captureTarget: svg,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });

package/dist/components/SelectedOutlineCropControls.js

@@ -268,9 +268,9 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 clearDragOverrides(cropDrag.nodePath);
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });
@@ -287,7 +287,7 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
         setPropStatuses,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none", style: { filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW } })
+            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none" })
         ] }));
 };
 const SelectedOutlineCropControls = ({ outline, onDraggingChange, target }) => {

package/dist/components/SelectedOutlineElement.js

@@ -50,6 +50,7 @@ const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
 const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineCanvasRotation_1 = require("./SelectedOutlineCanvasRotation");
 const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
@@ -80,6 +81,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
     const targetRef = (0, react_1.useRef)(layoutTarget);
+    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
     (0, react_1.useLayoutEffect)(() => {
         targetRef.current = layoutTarget;
     }, [layoutTarget]);
@@ -391,10 +393,12 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
+                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
+                        ? controlLayout.scaleHitWidth.horizontal
+                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
                 : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, corner)))
+                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
                 : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlinePolygon.js

@@ -55,6 +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 should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
 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);
@@ -259,9 +260,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,
         });
@@ -346,7 +347,7 @@ const SelectedOutlinePolygonUnmemoized = ({ compositionHeight, compositionWidth,
         });
     }, [getEffectDropTarget]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: hasTarget ? 'all' : undefined, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }

package/dist/components/SelectedOutlineRotationCornerHandle.d.ts

@@ -7,11 +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,7 +51,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 SelectedOutlineRotationCornerHandle = ({ getAllRotationDragTargets, corner, dragging, outline, onDraggingChange, onContextMenuOpen, onContextMenuOpenChange, onHoverChange, onSelect, target, }) => {
+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);
@@ -227,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,
         });
@@ -257,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, "data-remotion-studio-rotation-corner": corner, "data-remotion-studio-rotation-corner-contains-selection": containsSelection, 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);
                     }

package/dist/components/SelectedOutlineScaleEdgeLine.d.ts

@@ -7,6 +7,7 @@ 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;

package/dist/components/SelectedOutlineScaleEdgeLine.js

@@ -49,7 +49,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 SelectedOutlineScaleEdgeLine = ({ getAllScaleDragTargets, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onContextMenuOpenChange, onHoverChange, onSelect, target, }) => {
+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);
@@ -177,9 +177,9 @@ 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,
         });
@@ -201,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, "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: () => {
+            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);
                     }

package/dist/components/SelectedOutlineTransformOriginHandle.js

@@ -279,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,
         });

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

@@ -2,6 +2,14 @@ import React from 'react';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { TimelineSelection } from './TimelineSelection';
 import type { TimelineEasingValue } from './update-selected-easing';
+export declare const EasingPresetPreview: React.FC<{
+    readonly color: string;
+    readonly easing: TimelineEasingValue;
+    readonly height?: number;
+    readonly nonScalingStroke?: boolean;
+    readonly strokeWidth?: number;
+    readonly width?: number;
+}>;
 export type EasingEditorState = {
     initialEasing: TimelineEasingValue;
     selections: TimelineSelection[];

package/dist/components/Timeline/EasingEditorModal.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EasingEditor = void 0;
+exports.EasingEditor = exports.EasingPresetPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -110,8 +110,6 @@ const presetButtonBase = {
 };
 const presetPreviewSvgStyle = {
     display: 'block',
-    height: PRESET_PREVIEW_HEIGHT,
-    width: PRESET_PREVIEW_WIDTH,
 };
 const coordinatesGridBase = {
     display: 'grid',
@@ -363,6 +361,11 @@ const getPresetPreviewPath = (easing) => {
     }
     return points.join(' ');
 };
+const EasingPresetPreview = ({ color, easing, height = PRESET_PREVIEW_HEIGHT, nonScalingStroke = false, strokeWidth = 2, width = PRESET_PREVIEW_WIDTH, }) => {
+    const path = (0, react_1.useMemo)(() => getPresetPreviewPath(easing), [easing]);
+    return (jsx_runtime_1.jsx("svg", { width: width, height: height, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: nonScalingStroke ? 'non-scaling-stroke' : undefined }) }));
+};
+exports.EasingPresetPreview = EasingPresetPreview;
 const pointFromBezier = (bezier, handle) => {
     const x = handle === 0 ? bezier[0] : bezier[2];
     const y = handle === 0 ? bezier[1] : bezier[3];
@@ -401,7 +404,6 @@ const EasingGraphScaffold = ({ labels }) => {
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const selected = areEasingsEqual(currentEasing, preset.easing);
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -417,7 +419,7 @@ const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx(exports.EasingPresetPreview, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, easing: preset.easing }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -434,7 +436,6 @@ const EasingEditor = ({ state, renderHeader }) => {
     const springRef = (0, react_1.useRef)(spring);
     const liveOverrideVersionRef = (0, react_1.useRef)(0);
     const pendingOverrideTargetsRef = (0, react_1.useRef)([]);
-    const [activeHandle, setActiveHandle] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         const nextBezier = easingToBezier(state.initialEasing);
         const nextSpring = easingToSpring(state.initialEasing);
@@ -679,11 +680,10 @@ const EasingEditor = ({ state, renderHeader }) => {
         event.preventDefault();
         event.stopPropagation();
         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);
             },
@@ -697,7 +697,6 @@ const EasingEditor = ({ state, renderHeader }) => {
                     bezierRef.current = bezierBeforeDrag;
                     setBezier(bezierBeforeDrag);
                 }
-                setActiveHandle(null);
             },
         });
     }, [
@@ -777,7 +776,7 @@ const EasingEditor = ({ state, renderHeader }) => {
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { ref: svgRef, width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Bezier curve editor", children: [
-                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 0 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: activeHandle === 1 ? 'grabbing' : 'default', onPointerDown: (event) => onHandlePointerDown(1, event) })
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("line", { x1: startPoint.x, y1: startPoint.y, x2: firstHandle.x, y2: firstHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("line", { x1: endPoint.x, y1: endPoint.y, x2: secondHandle.x, y2: secondHandle.y, stroke: colors_1.WHITE_ALPHA_35, strokeWidth: 1 }), jsx_runtime_1.jsx("path", { d: bezierPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: firstHandle.x, cy: firstHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: "default", onPointerDown: (event) => onHandlePointerDown(0, event) }), jsx_runtime_1.jsx("circle", { cx: secondHandle.x, cy: secondHandle.y, r: 6, fill: colors_1.WHITE, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: disabled ? 'none' : 'all', cursor: "default", onPointerDown: (event) => onHandlePointerDown(1, event) })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
                             jsx_runtime_1.jsxs("div", { style: coordinateRow, children: [
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "X1" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[0], status: "ok", onValueChange: (value) => setCoordinate(0, 'x', value, false), onValueChangeEnd: (value) => setCoordinate(0, 'x', value, true), onTextChange: () => undefined, min: 0, max: 1, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })

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 { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack);
+    const { resolvedLocation, stack, preferMappedNodePath } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(getStack, overrideId);
     const effectSubscriptions = (0, react_1.useMemo)(() => {
         return effects
             .map((effect) => {

package/dist/components/Timeline/Timeline.js

@@ -37,10 +37,12 @@ exports.Timeline = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const fast_refresh_context_1 = require("../../fast-refresh-context");
 const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const calculate_timeline_1 = require("../../helpers/calculate-timeline");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const inserted_element_selection_1 = require("../../helpers/inserted-element-selection");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
@@ -230,7 +232,7 @@ const TimelineContextMenuArea = ({ children }) => {
 const TimelineInner = () => {
     var _a;
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -253,6 +255,58 @@ const TimelineInner = () => {
         overrideIdToNodePathMappings,
         compositions,
     ]);
+    const pendingInsertedElementSelection = (0, react_1.useSyncExternalStore)(inserted_element_selection_1.subscribeToInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection, inserted_element_selection_1.getInsertedElementSelection);
+    const { fastRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
+    const pendingSelectionStart = (0, react_1.useRef)(null);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (pendingInsertedElementSelection === null) {
+            pendingSelectionStart.current = null;
+            return;
+        }
+        const matchesInsertedNodePath = (track) => track.nodePathInfo !== null &&
+            track.nodePathInfo.sequenceSubscriptionKey.absolutePath ===
+                pendingInsertedElementSelection.nodePath.absolutePath &&
+            JSON.stringify(track.nodePathInfo.sequenceSubscriptionKey.nodePath) ===
+                JSON.stringify(pendingInsertedElementSelection.nodePath.nodePath);
+        if (((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.selection) !==
+            pendingInsertedElementSelection) {
+            pendingSelectionStart.current = {
+                selection: pendingInsertedElementSelection,
+                fastRefreshes,
+                existingSequenceIds: new Set(timeline
+                    .filter(matchesInsertedNodePath)
+                    .map((track) => track.sequence.id)),
+            };
+            return;
+        }
+        if (pendingSelectionStart.current.fastRefreshes === fastRefreshes) {
+            return;
+        }
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            canvasContent.compositionId !==
+                pendingInsertedElementSelection.compositionId) {
+            (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+            return;
+        }
+        const insertedTrack = timeline.find((track) => {
+            var _a;
+            return matchesInsertedNodePath(track) &&
+                !((_a = pendingSelectionStart.current) === null || _a === void 0 ? void 0 : _a.existingSequenceIds.has(track.sequence.id));
+        });
+        if (!insertedTrack || insertedTrack.nodePathInfo === null) {
+            return;
+        }
+        selectItems([{ type: 'sequence', nodePathInfo: insertedTrack.nodePathInfo }], { reveal: true });
+        (0, inserted_element_selection_1.clearInsertedElementSelection)(pendingInsertedElementSelection);
+    }, [
+        canvasContent,
+        fastRefreshes,
+        pendingInsertedElementSelection,
+        selectItems,
+        timeline,
+    ]);
     const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));