npm - @remotion/studio - Versions diffs - 4.0.527 → 4.0.528 - Mend

@remotion/studio 4.0.527 → 4.0.528

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/components/UpdatesSettings.js CHANGED Viewed

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const studio_css_variables_1 = require("../helpers/studio-css-variables");
 const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const copy_1 = require("../icons/copy");
 const InlineAction_1 = require("./InlineAction");
@@ -127,6 +128,7 @@ const RenderedReleaseNotes = ({ release }) => {
             return null;
         }
         return `<!doctype html><html><head><base href="https://github.com/remotion-dev/remotion/" target="_blank"><style>
+			${studio_css_variables_1.studioCssVariables}
 			:root { color-scheme: dark; }
 			html, body { overflow: hidden; }
 			body { background: ${colors_1.BACKGROUND}; color: ${colors_1.LIGHT_TEXT}; font-family: sans-serif; font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }

package/dist/components/VideoMatting/Models.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ModelManager_1 = require("../ModelManager");
 const AVAILABLE_MODELS = (0, video_matting_1.getAvailableModels)();
 const Models = ({ description, indent, visible }) => {
     const isModelCached = (0, react_1.useCallback)((model) => (0, video_matting_1.isVideoMattingModelCached)({ model }), []);
-    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, video_matting_1.loadVideoMattingModel)({
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, video_matting_1.downloadVideoMattingModel)({
         model,
         onProgress: (progress) => onProgress(progress.progress),
     }), []);

package/dist/components/VideoMatting/VideoMattingModal.js CHANGED Viewed

@@ -7,8 +7,8 @@ const video_matting_1 = require("@remotion/video-matting");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Checkmark_1 = require("../../icons/Checkmark");
+const gear_1 = require("../../icons/gear");
 const models_1 = require("../../icons/models");
-const separation_1 = require("../../icons/separation");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
@@ -61,9 +61,9 @@ const makeOptions = ({ items, selected, setSelected, }) => items.map(({ id, labe
     disabled: false,
     onClick: () => setSelected(id),
 }));
-const VideoMattingModal = ({ displayName, src, }) => {
-    var _a, _b;
-    const [tab, setTab] = (0, react_1.useState)('separate');
+const VideoMattingModal = ({ displayName, src, target, }) => {
+    var _a;
+    const [tab, setTab] = (0, react_1.useState)('remove');
     const isModelCached = (0, react_1.useCallback)((selectedModel) => (0, video_matting_1.isVideoMattingModelCached)({ model: selectedModel }), []);
     const cachedModels = (0, use_model_cache_status_1.useModelCacheStatus)({
         isModelCached,
@@ -71,10 +71,9 @@ const VideoMattingModal = ({ displayName, src, }) => {
         refreshKey: tab,
     });
     const baseName = (0, react_1.useMemo)(() => (0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'video'), [displayName, src]);
-    const [baseOutName, setBaseOutName] = (0, react_1.useState)(`${baseName}-base.webm`);
-    const [foregroundOutName, setForegroundOutName] = (0, react_1.useState)(`${baseName}-foreground.webm`);
-    const [model, setModel] = (0, react_1.useState)('ben2-base');
-    const [audio, setAudio] = (0, react_1.useState)('base');
+    const [outName, setOutName] = (0, react_1.useState)(`${baseName}-no-background.webm`);
+    const [model, setModel] = (0, react_1.useState)('modnet');
+    const [audio, setAudio] = (0, react_1.useState)('keep');
     const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('very-high');
     const [support, setSupport] = (0, react_1.useState)({ type: 'checking' });
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
@@ -95,31 +94,18 @@ const VideoMattingModal = ({ displayName, src, }) => {
             cancelled = true;
         };
     }, [model]);
-    const normalizedBase = baseOutName.normalize('NFC').toLowerCase();
-    const normalizedForeground = foregroundOutName.normalize('NFC').toLowerCase();
-    const duplicateOutput = normalizedBase === normalizedForeground;
+    const normalizedOutput = outName.normalize('NFC').toLowerCase();
     const queuedOutputs = new Set(videoMattingJobs
-        .filter((job) => job.status === 'idle' || job.status === 'running')
-        .flatMap((job) => [job.baseOutName, job.foregroundOutName])
+        .filter((job) => job.status === 'idle' ||
+        job.status === 'running' ||
+        job.status === 'saving')
+        .map((job) => job.outName)
         .map((name) => name.normalize('NFC').toLowerCase()));
-    const baseError = (_a = (0, public_output_name_1.validatePublicOutputName)({ extension: '.webm', outName: baseOutName })) !== null && _a !== void 0 ? _a : (duplicateOutput
-        ? 'Base and foreground outputs must be different'
-        : queuedOutputs.has(normalizedBase)
-            ? 'Another video matting job is using this output file'
-            : null);
-    const foregroundError = (_b = (0, public_output_name_1.validatePublicOutputName)({
-        extension: '.webm',
-        outName: foregroundOutName,
-    })) !== null && _b !== void 0 ? _b : (duplicateOutput
-        ? 'Base and foreground outputs must be different'
-        : queuedOutputs.has(normalizedForeground)
-            ? 'Another video matting job is using this output file'
-            : null);
-    const baseExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedBase);
-    const foregroundExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedForeground);
-    const canSubmit = support.type === 'supported' &&
-        baseError === null &&
-        foregroundError === null;
+    const outputError = (_a = (0, public_output_name_1.validatePublicOutputName)({ extension: '.webm', outName })) !== null && _a !== void 0 ? _a : (queuedOutputs.has(normalizedOutput)
+        ? 'Another background removal job is using this output file'
+        : null);
+    const outputExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutput);
+    const canSubmit = support.type === 'supported' && outputError === null;
     const modelOptions = (0, react_1.useMemo)(() => makeOptions({
         items: MODELS.map((item) => ({
             id: item.name,
@@ -130,9 +116,7 @@ const VideoMattingModal = ({ displayName, src, }) => {
     }), [cachedModels, model]);
     const audioOptions = (0, react_1.useMemo)(() => makeOptions({
         items: [
-            { id: 'base', label: 'Background layer' },
-            { id: 'foreground', label: 'Foreground layer' },
-            { id: 'both', label: 'Both layers' },
+            { id: 'keep', label: 'Keep original audio' },
             { id: 'none', label: 'No audio' },
         ],
         selected: audio,
@@ -156,11 +140,11 @@ const VideoMattingModal = ({ displayName, src, }) => {
         addVideoMattingJob({
             src,
             displayName,
-            baseOutName,
-            foregroundOutName,
+            outName,
             model,
             audio,
             videoBitrate,
+            target,
         });
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
@@ -169,31 +153,30 @@ const VideoMattingModal = ({ displayName, src, }) => {
     }, [
         addVideoMattingJob,
         audio,
-        baseOutName,
         canSubmit,
         displayName,
-        foregroundOutName,
+        outName,
         model,
         setSelectedModal,
         setSidebarCollapsedState,
         src,
+        target,
         videoBitrate,
     ]);
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Track matting ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
-                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Track matting ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+    const title = `Remove background from ${displayName}`;
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
                         jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, title: support.type === 'unsupported' ? support.message : undefined, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canSubmit
                                     ? render_modals_1.buttonStyle.backgroundColor
                                     : colors_1.BLUE_DISABLED,
-                            }, children: "Separate" })
+                            }, children: "Remove background" })
                     ] }), jsx_runtime_1.jsxs("div", { style: modalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, onClick: () => setTab('separate'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'separate', style: render_modals_1.horizontalTab, children: "Separate" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'models', style: render_modals_1.horizontalTab, children: "Models" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'separate' ? panelStyle : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-                                jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Base video output file", existingOutputPath: window.remotion_publicFolderExists
-                                        ? `${window.remotion_publicFolderExists}/${baseOutName}`
-                                        : null, existence: baseExists, inputStyle: layout_1.input, label: "Base output in public/", onValueChange: (event) => setBaseOutName(event.target.value), outName: baseOutName, validationMessage: baseError }), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Foreground video output file", existingOutputPath: window.remotion_publicFolderExists
-                                        ? `${window.remotion_publicFolderExists}/${foregroundOutName}`
-                                        : null, existence: foregroundExists, inputStyle: layout_1.input, label: "Foreground output in public/", onValueChange: (event) => setForegroundOutName(event.target.value), outName: foregroundOutName, validationMessage: foregroundError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, onClick: () => setTab('remove'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'remove', style: render_modals_1.horizontalTab, children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'models', style: render_modals_1.horizontalTab, children: "Models" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'remove' ? panelStyle : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+                                jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Video output file", existingOutputPath: window.remotion_publicFolderExists
+                                        ? `${window.remotion_publicFolderExists}/${outName}`
+                                        : null, existence: outputExists, inputStyle: layout_1.input, label: "Output in public/", onValueChange: (event) => setOutName(event.target.value), outName: outName, validationMessage: outputError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                                         jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, title: "Model", style: controlStyle }) })
                                     ] }), support.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: support.message, type: "error" }) })) : null, jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                                         jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, title: "Audio", style: controlStyle }) })

package/dist/components/VideoMatting/VideoMattingModalWithOptionalPackage.js CHANGED Viewed

@@ -42,5 +42,5 @@ const LazyVideoMattingModal = react_1.default.lazy(async () => {
     const { VideoMattingModal } = await Promise.resolve().then(() => __importStar(require('./VideoMattingModal')));
     return { default: VideoMattingModal };
 });
-const VideoMattingModalWithOptionalPackage = ({ state }) => (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install video matting package", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, title: "Track matting", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyVideoMattingModal, { ...state }) }) }));
+const VideoMattingModalWithOptionalPackage = ({ state }) => (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install video matting package to remove background", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, title: "Remove background", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyVideoMattingModal, { ...state }) }) }));
 exports.VideoMattingModalWithOptionalPackage = VideoMattingModalWithOptionalPackage;

package/dist/components/WebMcp.js CHANGED Viewed

@@ -489,9 +489,9 @@ const WebMcp = () => {
                 },
             }, { signal: controller.signal }),
             modelContext.registerTool({
-                name: 'separate_video_layers',
-                title: 'Separate Studio video layers',
-                description: 'Separate a video asset from the public folder into background and foreground WebM files and add the work to the Jobs queue. If assetPath is omitted, the asset currently open in Studio is used.',
+                name: 'remove_video_background',
+                title: 'Remove video background',
+                description: 'Remove the background from a video asset in the public folder and add the work to the Jobs queue. If assetPath is omitted, the asset currently open in Studio is used.',
                 inputSchema: {
                     type: 'object',
                     properties: {
@@ -499,13 +499,9 @@ const WebMcp = () => {
                             type: 'string',
                             description: 'Optional path relative to public/. Defaults to the asset currently open in Studio.',
                         },
-                        baseOutputPath: {
-                            type: 'string',
-                            description: 'Optional background output path relative to public/.',
-                        },
-                        foregroundOutputPath: {
+                        outputPath: {
                             type: 'string',
-                            description: 'Optional foreground output path relative to public/.',
+                            description: 'Optional transparent video output path relative to public/.',
                         },
                         model: {
                             type: 'string',
@@ -513,8 +509,8 @@ const WebMcp = () => {
                         },
                         audio: {
                             type: 'string',
-                            enum: ['base', 'foreground', 'both', 'none'],
-                            default: 'base',
+                            enum: ['keep', 'none'],
+                            default: 'keep',
                         },
                         videoBitrate: {
                             oneOf: [
@@ -532,7 +528,7 @@ const WebMcp = () => {
                 annotations: { readOnlyHint: false },
                 execute: async (input) => {
                     var _a;
-                    var _b, _c, _d, _e, _f, _g, _h;
+                    var _b, _c, _d, _e, _f;
                     if (!(0, OptionalPackageModal_1.isOptionalPackageInstalled)(video_matting_capability_1.VIDEO_MATTING_PACKAGE)) {
                         return missingOptionalPackageResult(video_matting_capability_1.VIDEO_MATTING_PACKAGE);
                     }
@@ -542,7 +538,7 @@ const WebMcp = () => {
                         staticFiles: staticFilesRef.current,
                     });
                     if ((0, get_preview_file_type_1.getPreviewFileType)(assetPath) !== 'video') {
-                        throw new Error('The separation asset must be a video.');
+                        throw new Error('The input asset must be a video.');
                     }
                     const videoMatting = await Promise.resolve().then(() => __importStar(require('@remotion/video-matting')));
                     const modelName = (_b = input.model) !== null && _b !== void 0 ? _b : 'ben2-base';
@@ -555,12 +551,9 @@ const WebMcp = () => {
                     if (!model) {
                         throw new Error(`Unknown video matting model: ${modelName}.`);
                     }
-                    const audio = (_c = input.audio) !== null && _c !== void 0 ? _c : 'base';
-                    if (audio !== 'base' &&
-                        audio !== 'foreground' &&
-                        audio !== 'both' &&
-                        audio !== 'none') {
-                        throw new Error('audio must be base, foreground, both, or none.');
+                    const audio = (_c = input.audio) !== null && _c !== void 0 ? _c : 'keep';
+                    if (audio !== 'keep' && audio !== 'none') {
+                        throw new Error('audio must be keep or none.');
                     }
                     const videoBitrate = (_d = input.videoBitrate) !== null && _d !== void 0 ? _d : 'very-high';
                     if ((typeof videoBitrate !== 'number' ||
@@ -576,39 +569,28 @@ const WebMcp = () => {
                     const src = (0, remotion_1.staticFile)(assetPath);
                     const displayName = (_e = assetPath.split('/').at(-1)) !== null && _e !== void 0 ? _e : assetPath;
                     const baseName = (0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'video');
-                    const baseOutputPath = (_f = input.baseOutputPath) !== null && _f !== void 0 ? _f : `${baseName}-base.webm`;
-                    const foregroundOutputPath = (_g = input.foregroundOutputPath) !== null && _g !== void 0 ? _g : `${baseName}-foreground.webm`;
-                    if (typeof baseOutputPath !== 'string' ||
-                        typeof foregroundOutputPath !== 'string') {
-                        throw new Error('Output paths must be strings.');
+                    const outputPath = (_f = input.outputPath) !== null && _f !== void 0 ? _f : `${baseName}-no-background.webm`;
+                    if (typeof outputPath !== 'string') {
+                        throw new Error('Output path must be a string.');
                     }
-                    const baseError = (0, public_output_name_1.validatePublicOutputName)({
-                        extension: '.webm',
-                        outName: baseOutputPath,
-                    });
-                    const foregroundError = (0, public_output_name_1.validatePublicOutputName)({
+                    const outputError = (0, public_output_name_1.validatePublicOutputName)({
                         extension: '.webm',
-                        outName: foregroundOutputPath,
+                        outName: outputPath,
                     });
-                    if (baseError !== null || foregroundError !== null) {
-                        throw new Error((_h = baseError !== null && baseError !== void 0 ? baseError : foregroundError) !== null && _h !== void 0 ? _h : 'Invalid output path.');
-                    }
-                    if (baseOutputPath.normalize('NFC').toLowerCase() ===
-                        foregroundOutputPath.normalize('NFC').toLowerCase()) {
-                        throw new Error('Background and foreground outputs must be different.');
+                    if (outputError !== null) {
+                        throw new Error(outputError);
                     }
                     const jobId = addVideoMattingJob({
                         audio,
-                        baseOutName: baseOutputPath,
                         displayName,
-                        foregroundOutName: foregroundOutputPath,
+                        outName: outputPath,
                         model,
                         src,
+                        target: null,
                         videoBitrate,
                     });
                     return {
-                        baseOutputPath,
-                        foregroundOutputPath,
+                        outputPath,
                         jobId,
                         success: true,
                     };

package/dist/components/composition-drop-preview.js CHANGED Viewed

@@ -14,6 +14,7 @@ const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensi
         key: 'composition-drop-preview',
         dimensions: compositionDimensions,
         uncroppedPoints: null,
+        path: null,
         points: [
             { x: left * scale, y: top * scale },
             { x: right * scale, y: top * scale },

package/dist/components/effect-drag-and-drop.d.ts CHANGED Viewed

@@ -1,18 +1,26 @@
 import { type EffectDragData } from '@remotion/studio-protocol';
 import { type EffectDefinition } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const getEffectDragData: (dataTransfer: DataTransfer) => EffectDragData | null;
-export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nodePath, }: {
+export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nodePathInfo, selectItems, }: {
     readonly clientId: string;
     readonly dragData: EffectDragData;
     readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectItems: (items: readonly import("@remotion/canvas").CanvasSelectionItem[], options?: {
+        readonly reveal?: boolean | undefined;
+        readonly revealInInspector?: boolean | undefined;
+    } | undefined) => void;
 }) => Promise<void>;
-export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
+export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePathInfo, selectItems, }: {
     readonly clientId: string;
     readonly effect: EffectDefinition;
     readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectItems: (items: readonly import("@remotion/canvas").CanvasSelectionItem[], options?: {
+        readonly reveal?: boolean | undefined;
+        readonly revealInInspector?: boolean | undefined;
+    } | undefined) => void;
 }) => Promise<void>;

package/dist/components/effect-drag-and-drop.js CHANGED Viewed

@@ -22,16 +22,17 @@ const getEffectDragData = (dataTransfer) => {
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'effect' ? parsed.data : null;
 };
 exports.getEffectDragData = getEffectDragData;
-const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {
+const addEffectFromDragData = ({ clientId, dragData, fileName, nodePathInfo, selectItems, }) => {
     return (0, exports.addEffectToSequence)({
         clientId,
         effect: dragData.effect,
         fileName,
-        nodePath,
+        nodePathInfo,
+        selectItems,
     });
 };
 exports.addEffectFromDragData = addEffectFromDragData;
-const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
+const addEffectToSequence = async ({ clientId, effect, fileName, nodePathInfo, selectItems, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
         if ((0, browser_studio_operations_1.getBrowserStudioEffectOperations)() === null) {
@@ -39,7 +40,7 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
         }
         const result = await (0, effect_operations_api_1.addEffect)({
             fileName,
-            sequenceNodePath: nodePath,
+            sequenceNodePath: nodePathInfo.sequenceSubscriptionKey,
             effectName: effect.name,
             effectImportPath: effect.importPath,
             effectConfig: effect.config,
@@ -47,7 +48,21 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
         });
         if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            return;
         }
+        selectItems([
+            {
+                type: 'sequence-effect',
+                nodePathInfo: {
+                    ...nodePathInfo,
+                    sequenceSubscriptionKey: {
+                        ...nodePathInfo.sequenceSubscriptionKey,
+                        nodePath: result.insertedEffect.nodePath,
+                    },
+                },
+                i: result.insertedEffect.effectIndex,
+            },
+        ], { revealInInspector: true });
     }
     catch (err) {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);

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

@@ -4,7 +4,7 @@ export declare const getConfigureDefaultAppsMenuItems: ({ hasPreviousItems, onCo
     readonly hasPreviousItems: boolean;
     readonly onConfigureApps: (() => void) | null;
 }) => ComboboxValue[];
-export declare const getOpenInMenuItems: ({ canOpenDesktopApps, codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, excludeGitSource, fileManagerDisabled, folder, gitSourceDisabled, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInGitSource, onOpenInTerminal, }: {
+export declare const getOpenInMenuItems: ({ canOpenDesktopApps, codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, excludeGitSource, fileManagerDisabled, folder, gitSourceDisabled, onConfigureApps, onCopyPath, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInGitSource, onOpenInTerminal, }: {
     readonly canOpenDesktopApps: boolean;
     readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorDisabled: boolean;
@@ -16,6 +16,7 @@ export declare const getOpenInMenuItems: ({ canOpenDesktopApps, codingAgentInfo,
     readonly folder: boolean;
     readonly gitSourceDisabled: boolean;
     readonly onConfigureApps: (() => void) | null;
+    readonly onCopyPath?: (() => void) | undefined;
     readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
     readonly onOpenInEditor: (editorId: EditorPickerId) => void;
     readonly onOpenInFileExplorer: () => void;

package/dist/components/get-open-in-menu-items.js CHANGED Viewed

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOpenInMenuItems = exports.getConfigureDefaultAppsMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
+const clipboard_1 = require("../icons/clipboard");
 const editor_1 = require("../icons/editor");
 const finder_1 = require("../icons/finder");
 const git_client_1 = require("../icons/git-client");
@@ -16,6 +18,7 @@ const menuLabel = {
     fontSize: 13,
     lineHeight: '16px',
 };
+const copyIcon = { height: 16, width: 16 };
 const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }) => {
     if (!onConfigureApps) {
         return [];
@@ -38,7 +41,7 @@ const getConfigureDefaultAppsMenuItems = ({ hasPreviousItems, onConfigureApps, }
     ];
 };
 exports.getConfigureDefaultAppsMenuItems = getConfigureDefaultAppsMenuItems;
-const getOpenInMenuItems = ({ canOpenDesktopApps, codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, excludeGitSource, fileManagerDisabled, folder, gitSourceDisabled, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInGitSource, onOpenInTerminal, }) => {
+const getOpenInMenuItems = ({ canOpenDesktopApps, codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, excludeGitSource, fileManagerDisabled, folder, gitSourceDisabled, onConfigureApps, onCopyPath, onOpenInCodingAgent, onOpenInEditor, onOpenInFileExplorer, onOpenInGitClient, onOpenInGitSource, onOpenInTerminal, }) => {
     var _a, _b, _c, _d;
     const showFinder = canOpenDesktopApps && window.remotion_fileSystemPlatform === 'darwin';
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
@@ -117,6 +120,19 @@ const getOpenInMenuItems = ({ canOpenDesktopApps, codingAgentInfo, editorDisable
                 value: 'file-explorer',
             }
             : null,
+        onCopyPath
+            ? {
+                id: 'copy-path',
+                keyHint: null,
+                label: jsx_runtime_1.jsx("span", { style: menuLabel, children: "Copy path" }),
+                leftItem: jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: colors_1.LIGHT_TEXT, style: copyIcon }),
+                onClick: onCopyPath,
+                quickSwitcherLabel: 'Copy path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-path',
+            }
+            : null,
     ].filter(no_react_1.NoReactInternals.truthy);
     const hasCategorizedApps = editors.length > 0 ||
         codingAgents.length > 0 ||

package/dist/components/selected-outline-drag.d.ts CHANGED Viewed

@@ -198,12 +198,7 @@ export declare const snapSelectedOutlineUv: ({ point, points, thresholdPx, uv, }
 }) => UvCoordinate;
 export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
 export declare const snapSelectedOutlineTransformOriginUv: ({ crop, point, points, thresholdPx, uv, }: {
-    readonly crop: {
-        readonly left: number;
-        readonly right: number;
-        readonly top: number;
-        readonly bottom: number;
-    } | null;
+    readonly crop: import("@remotion/canvas").CanvasOutlineCrop | null;
     readonly point: OutlinePoint;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
     readonly thresholdPx: number | null;

package/dist/components/selected-outline-drag.js CHANGED Viewed

@@ -7,6 +7,7 @@ const selected_outline_geometry_1 = require("./selected-outline-geometry");
 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 get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
@@ -27,7 +28,12 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
     return dragTargets.map((target) => {
         var _a;
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[selected_outline_types_1.translateFieldKey];
-        const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset: target.keyframeDisplayOffset,
+            keyframePlaybackRate: target.keyframePlaybackRate,
+            propStatus: target.propStatus,
+        });
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: target.propStatus,
             dragOverrideValue,
@@ -193,7 +199,7 @@ const getSelectedOutlineCropDragChanges = ({ dimensions, target, values, }) => {
                 fileName: target.nodePath.absolutePath,
                 nodePath: target.nodePath,
                 fieldKey,
-                sourceFrame: target.sourceFrame,
+                sourceFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(target.sourceFrame, field.propStatus),
                 value,
                 schema: target.schema,
                 clientId: target.clientId,
@@ -318,7 +324,12 @@ const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, time
     return dragTargets.map((target) => {
         var _a;
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[selected_outline_types_1.scaleFieldKey];
-        const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset: target.keyframeDisplayOffset,
+            keyframePlaybackRate: target.keyframePlaybackRate,
+            propStatus: target.propStatus,
+        });
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: target.propStatus,
             dragOverrideValue,
@@ -427,7 +438,12 @@ const getSelectedOutlineRotationDragStates = ({ dragTargets, getDragOverrides, t
     return dragTargets.map((target) => {
         var _a;
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[selected_outline_types_1.rotateFieldKey];
-        const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset: target.keyframeDisplayOffset,
+            keyframePlaybackRate: target.keyframePlaybackRate,
+            propStatus: target.propStatus,
+        });
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
             propStatus: target.propStatus,
             dragOverrideValue,
@@ -627,7 +643,7 @@ const getSelectedOutlineTransformOriginDragChanges = ({ target, startTranslate,
                 fileName: target.nodePath.absolutePath,
                 nodePath: target.nodePath,
                 fieldKey: selected_outline_types_1.transformOriginFieldKey,
-                sourceFrame: target.sourceFrame,
+                sourceFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(target.sourceFrame, target.originPropStatus),
                 value: origin,
                 schema: target.schema,
             });
@@ -666,7 +682,7 @@ const getSelectedOutlineTransformOriginDragChanges = ({ target, startTranslate,
             fileName: target.nodePath.absolutePath,
             nodePath: target.nodePath,
             fieldKey: selected_outline_types_1.translateFieldKey,
-            sourceFrame: target.sourceFrame,
+            sourceFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(target.sourceFrame, target.translatePropStatus),
             value: translate,
             schema: target.schema,
         });

package/dist/components/selected-outline-geometry.d.ts CHANGED Viewed

@@ -1,21 +1,5 @@
-export type OutlinePoint = {
-    readonly x: number;
-    readonly y: number;
-};
-export type SelectedOutline = {
-    readonly key: string;
-    readonly dimensions: {
-        readonly width: number;
-        readonly height: number;
-    } | null;
-    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
-    readonly points: readonly [
-        OutlinePoint,
-        OutlinePoint,
-        OutlinePoint,
-        OutlinePoint
-    ];
-};
+import type { CanvasOutlinePoint as OutlinePoint } from '@remotion/canvas';
+export type { CanvasOutline as SelectedOutline, CanvasOutlinePoint as OutlinePoint, } from '@remotion/canvas';
 export declare const clamp: (value: number, min: number, max: number) => number;
 export declare const mix: (from: number, to: number, progress: number) => number;
 export declare const mixPoint: (from: OutlinePoint, to: OutlinePoint, progress: number) => OutlinePoint;