@remotion/studio 4.0.527 → 4.0.529

package/dist/components/RenderQueue/video-matting-job-types.d.ts

@@ -1,4 +1,5 @@
-import type { VideoLayerAudio, VideoMattingBitrate, VideoMattingModel } from '@remotion/video-matting';
+import type { VideoMattingBitrate, VideoMattingModel } from '@remotion/video-matting';
+import type { SequencePropsSubscriptionKey } from 'remotion';
 export type VideoMattingJobProgress = {
     detail: string | null;
     message: string;
@@ -7,7 +8,9 @@ export type VideoMattingJobProgress = {
 type VideoMattingJobStatus = {
     status: 'idle';
 } | {
-    status: 'running';
+    status: 'cancelled';
+} | {
+    status: 'running' | 'saving';
     progress: VideoMattingJobProgress;
 } | {
     status: 'done';
@@ -18,15 +21,19 @@ type VideoMattingJobStatus = {
         stack: string | undefined;
     };
 };
-export type AddVideoMattingJobParams = {
+type VideoMattingJobCommon = {
     src: string;
     displayName: string;
-    baseOutName: string;
-    foregroundOutName: string;
     model: VideoMattingModel;
-    audio: VideoLayerAudio;
     videoBitrate: VideoMattingBitrate;
+    outName: string;
+    audio: 'keep' | 'none';
+    target: {
+        fileName: string;
+        nodePath: SequencePropsSubscriptionKey;
+    } | null;
 };
+export type AddVideoMattingJobParams = VideoMattingJobCommon;
 export type VideoMattingJob = AddVideoMattingJobParams & {
     id: string;
     type: 'video-matting';

package/dist/components/RenderingSettings.js

@@ -331,11 +331,11 @@ const RenderingSettings = () => {
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Output" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecValues, selectedId: codec !== null && codec !== void 0 ? codec : REMOTION_DEFAULT, title: "Codec" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Default codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: codecValues, selectedId: codec !== null && codec !== void 0 ? codec : REMOTION_DEFAULT, "aria-label": "Codec" }) })
                 ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Scale", value: scale, onValueChanged: changeScale, min: 0.1, step: 0.1 }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, title: "Still image format" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Still image format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: stillFormatValues, selectedId: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : REMOTION_DEFAULT, "aria-label": "Still image format" }) })
                 ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, title: "Video frame format" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video frame format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: videoFormatValues, selectedId: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : REMOTION_DEFAULT, "aria-label": "Video frame format" }) })
                 ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Encoding" }), client_1.BrowserSafeApis.codecSupportsCrf(resolvedCodec) &&
                 client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityModeValues, needsWrapping: true }) })
@@ -345,11 +345,11 @@ const RenderingSettings = () => {
                 client_1.BrowserSafeApis.codecSupportsVideoBitrate(resolvedCodec) ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Video bitrate" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: { ...layout_2.input, ...fullWidth }, value: videoBitrate, onChange: onVideoBitrateChange, onBlur: onVideoBitrateBlur, status: "ok", rightAlign: true }) })
                 ] })) : null, resolvedCodec === 'prores' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, title: "ProRes profile" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ProRes profile" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: profileValues, selectedId: proResProfile !== null && proResProfile !== void 0 ? proResProfile : REMOTION_DEFAULT, "aria-label": "ProRes profile" }) })
                 ] })) : null, resolvedCodec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, title: "x264 preset" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "x264 preset" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: presetValues, selectedId: x264Preset !== null && x264Preset !== void 0 ? x264Preset : REMOTION_DEFAULT, "aria-label": "x264 preset" }) })
                 ] })) : null, jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, title: "Audio codec" }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Audio codec" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioCodecValues, selectedId: audioCodec !== null && audioCodec !== void 0 ? audioCodec : REMOTION_DEFAULT, "aria-label": "Audio codec" }) })
                 ] }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Performance" }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Concurrency", value: concurrency, onValueChanged: changeConcurrency, min: renderDefaults.minConcurrency, max: renderDefaults.maxConcurrency, step: 1 }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx("div", { style: { paddingLeft: 16, paddingRight: 16 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: (_a = error !== null && error !== void 0 ? error : settingsError) !== null && _a !== void 0 ? _a : '', align: "flex-start", type: "error" }) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })

package/dist/components/RulersAndGuidesToggle.js

@@ -36,6 +36,6 @@ const RulersAndGuidesToggle = ({ showGuides }) => {
         : editorShowRulers
             ? 'Hide rulers'
             : 'Show rulers';
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: showGuides ? 'Rulers and Guides' : 'Rulers', shortcut: shortcutsDisabled ? null : shortcut, delay: 800, dismissOnClick: false, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": accessibilityLabel, "aria-keyshortcuts": shortcutsDisabled ? undefined : ariaShortcut || undefined, "aria-pressed": rulersOrGuidesAreVisible, onClick: onClick, style: buttonStyle, children: (color) => (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", style: { width: 18, height: 18 }, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { fill: rulersOrGuidesAreVisible ? colors_1.BLUE : color, d: "M525.9 154.2L186.5 493.6c-6.2 6.2-16.4 6.2-22.6 0L50.7 380.5c-6.2-6.2-6.2-16.4 0-22.6l33.9-33.9 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 39.6-39.6 33.9 33.9c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-33.9-33.9 39.6-39.6 56.6 56.6c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-56.6-56.6 33.9-33.9c6.2-6.2 16.4-6.2 22.6 0L525.9 131.5c6.2 6.2 6.2 16.4 0 22.6zM73.3 289.9L28.1 335.2c-18.7 18.7-18.7 49.1 0 67.9L141.2 516.2c18.7 18.7 49.1 18.7 67.9 0L548.5 176.8c18.7-18.7 18.7-49.1 0-67.9L435.4-4.2C416.6-23 386.2-23 367.5-4.2 77.1 286.2 140.3 223 73.3 289.9z" }) })) }) }));
 };
 exports.RulersAndGuidesToggle = RulersAndGuidesToggle;

package/dist/components/SegmentedButton.d.ts

@@ -8,7 +8,6 @@ type SegmentedButtonSegmentCommon = {
     readonly renderContent: (color: string) => React.ReactNode;
     readonly segmentId: string;
     readonly style: React.CSSProperties | null;
-    readonly title: string | null;
     readonly tooltipLabel: string | null;
 };
 export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
@@ -25,6 +24,5 @@ export type SegmentedButtonSegment = SegmentedButtonSegmentCommon & ({
 export declare const SegmentedButton: React.FC<{
     readonly segments: SegmentedButtonSegment[];
     readonly style: React.CSSProperties | null;
-    readonly title: string | null;
 }>;
 export {};

package/dist/components/SegmentedButton.js

@@ -80,7 +80,7 @@ const preventMouseFocus = (event) => {
     event.preventDefault();
 };
 const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
-    var _a, _b;
+    var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const style = (0, react_1.useMemo)(() => {
         return {
@@ -108,14 +108,14 @@ const SegmentedButtonAction = ({ index, segment, segmentCount }) => {
         (_a = segment.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(segment, event);
         preventPointerFocus(event);
     }, [segment]);
-    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
     if (segment.tooltipLabel === null) {
         return button;
     }
     return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button }));
 };
 const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
-    var _a, _b;
+    var _a;
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const { currentZIndex, tabIndex } = (0, z_index_1.useZIndex)();
@@ -214,15 +214,15 @@ const SegmentedButtonMenu = ({ index, segment, segmentCount }) => {
             ...segment.style,
         };
     }, [index, opened, segment, segmentCount]);
-    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, title: (_b = segment.title) !== null && _b !== void 0 ? _b : undefined, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
+    const button = (jsx_runtime_1.jsx("button", { ref: ref, "aria-expanded": opened, "aria-haspopup": "menu", "aria-label": segment.ariaLabel, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${is_menu_item_1.MENU_INITIATOR_CLASSNAME}`, disabled: segment.disabled, id: (_a = segment.buttonId) !== null && _a !== void 0 ? _a : undefined, onClick: onClick, onMouseDown: preventMouseFocus, onPointerDown: onPointerDown, style: style, tabIndex: tabIndex, type: "button", children: segment.renderContent(colors_1.CURRENT_COLOR) }));
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [segment.tooltipLabel === null ? (button) : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: segment.tooltipLabel, shortcut: null, delay: 800, dismissOnClick: true, triggerStyle: tooltipTriggerStyle, children: button })), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: (event) => event.stopPropagation(), children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { fixedHeight: Math.max(spaceToBottom, spaceToTop), leaveLeftSpace: segment.leaveLeftSpace, onHide: onHide, onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, preselectIndex: segment.selectedId === null
                                         ? false
                                         : segment.values.findIndex((value) => value.id === segment.selectedId), topItemCanBeUnselected: false, values: segment.values }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
-const SegmentedButton = ({ segments, style, title }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, title: title !== null && title !== void 0 ? title : undefined, children: segments.map((segment, index) => {
+const SegmentedButton = ({ segments, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: { ...containerStyle, ...style }, children: segments.map((segment, index) => {
             if (segment.type === 'action') {
                 return (jsx_runtime_1.jsx(SegmentedButtonAction, { index: index, segment: segment, segmentCount: segments.length }, segment.segmentId));
             }

package/dist/components/SelectedOutlineCropControls.js

@@ -47,6 +47,7 @@ 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 focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const CROP_HANDLE_THICKNESS = 5;
 const CROP_HANDLE_LENGTH = 20;
@@ -223,7 +224,7 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 setDragOverrides(cropDrag.nodePath, fieldKey, field.propStatus.status === 'keyframed'
                     ? remotion_1.Internals.makeKeyframedDragOverride({
                         status: field.propStatus,
-                        frame: cropDrag.sourceFrame,
+                        frame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(cropDrag.sourceFrame, field.propStatus),
                         value,
                     })
                     : remotion_1.Internals.makeStaticDragOverride(value));

package/dist/components/SelectedOutlineEditingHandles.js

@@ -47,18 +47,25 @@ const SelectedOutlineEditingHandles = ({ dragging, getAllRotationDragTargets, ge
         layoutTarget,
     });
     const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
+    // Scale and rotation handles are placed on the bounding box of the element.
+    // For path outlines the rendered geometry follows the SVG path, so
+    // bounding-box handles would sit off the shape and misrepresent the
+    // transform. Translate and crop still apply to the element as a whole.
+    const showTransformHandles = outline.path === null;
     const onContextMenuOpen = react_1.default.useCallback(() => {
         var _a;
         var _b;
         return (_b = (_a = getContextMenuOpenByKey(outline.key)) === null || _a === void 0 ? void 0 : _a()) !== null && _b !== void 0 ? _b : false;
     }, [getContextMenuOpenByKey, outline.key]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+            jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), showTransformHandles &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? 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 &&
+                : null, showTransformHandles &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
                 ? 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] }));

package/dist/components/SelectedOutlineElement.js

@@ -77,6 +77,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const { controlTarget, getLayoutTarget, getTarget, hovered, onHoverChange } = (0, use_selected_outline_control_target_1.useSelectedOutlineControlTarget)({
         getLatestTargetByKey,
@@ -171,7 +172,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
         const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
-        const canRotate = !sourceEditDisabled;
+        const canRotate = !sourceEditDisabled && outline.path === null;
         const outlineElement = (_b = (_a = contextMenuTarget.sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
@@ -269,7 +270,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                                         type: 'add-effect',
                                         clientId: previewServerState.clientId,
                                         fileName: nodePath.absolutePath,
-                                        nodePath,
+                                        nodePathInfo: contextMenuTarget.nodePathInfo,
+                                        selectItems,
                                     });
                                 },
                                 quickSwitcherLabel: null,
@@ -348,8 +350,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         resolveOriginalLocation,
         setManuallyEnabled,
         selectAsset,
+        selectItems,
         setSelectedModal,
         setPropStatuses,
+        outline.path,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         registerContextMenuOpen(outline.key, onContextMenuOpen);
@@ -359,6 +363,8 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     }, [onContextMenuOpen, outline.key, registerContextMenuOpen]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, containsSelection: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) === true, directlySelected: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selected) === true, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, 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, translateWithCommandKey: (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) === true &&
-                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (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, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
+                    Boolean(controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) &&
+                (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) &&
+                outline.path === null ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline, transform3DMode: controlTarget.rotationDrag.transform3DMode })) : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineKeyboardControls.d.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
-import type { getSequencesWithSelectableOutlines } from './selected-outline-measurement';
-import { type SelectedOutlineTarget } from './selected-outline-types';
+import { type SelectedOutlineDragTarget } from './selected-outline-types';
 export declare const SelectedOutlineKeyboardControls: React.FC<{
-    readonly getLatestOutlineTargetByKey: (key: string) => SelectedOutlineTarget | undefined;
-    readonly getSelectableOutlines: () => ReturnType<typeof getSequencesWithSelectableOutlines>;
+    readonly getAllDragTargets: () => readonly SelectedOutlineDragTarget[];
 }>;

package/dist/components/SelectedOutlineKeyboardControls.js

@@ -7,15 +7,12 @@ const remotion_1 = require("remotion");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 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 call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const imperative_state_1 = require("./Timeline/imperative-state");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
-const TimelineSelection_1 = require("./Timeline/TimelineSelection");
-const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelectableOutlines }) => {
-    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+const SelectedOutlineKeyboardControls = ({ getAllDragTargets }) => {
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayerMethods();
@@ -143,21 +140,8 @@ const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelec
         if (direction === null) {
             return;
         }
-        const { selectedItems } = currentSelection.current;
-        const selectedSequenceKeys = (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems);
-        const sequenceKeysContainingSelection = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems);
-        const selectableOutlines = getSelectableOutlines();
-        const allDragTargets = selectableOutlines.flatMap(({ key }) => {
-            var _a;
-            var _b;
-            if (!selectedSequenceKeys.has(key) &&
-                !sequenceKeysContainingSelection.has(key)) {
-                return [];
-            }
-            const drag = (_b = (_a = getLatestOutlineTargetByKey(key)) === null || _a === void 0 ? void 0 : _a.drag) !== null && _b !== void 0 ? _b : null;
-            return drag === null ? [] : [drag];
-        });
-        if (selectedItems.length === 0 || allDragTargets.length === 0) {
+        const allDragTargets = getAllDragTargets();
+        if (allDragTargets.length === 0) {
             seekWithArrowKey(event, direction);
             return;
         }
@@ -215,11 +199,9 @@ const SelectedOutlineKeyboardControls = ({ getLatestOutlineTargetByKey, getSelec
             }
         }
     }, [
-        currentSelection,
+        getAllDragTargets,
         getCurrentFrame,
         getDragOverrides,
-        getLatestOutlineTargetByKey,
-        getSelectableOutlines,
         seekWithArrowKey,
         setDragOverrides,
     ]);