@remotion/studio 4.0.514 → 4.0.516

package/dist/components/SkillsSettings.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkillsSettings = void 0;
+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 check_circle_filled_1 = require("../icons/check-circle-filled");
+const clipboard_1 = require("../icons/clipboard");
+const minus_1 = require("../icons/minus");
+const InlineAction_1 = require("./InlineAction");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const INSTALL_COMMAND = 'npx remotion skills add';
+const container = {
+    alignSelf: 'flex-start',
+    boxSizing: 'border-box',
+    flex: 1,
+    fontFamily: 'sans-serif',
+    minWidth: 0,
+    padding: '16px 16px 0',
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    margin: 0,
+};
+const commandField = {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.22)',
+    borderRadius: 4,
+    display: 'flex',
+    marginTop: 8,
+    padding: '5px 6px 5px 9px',
+};
+const command = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: '24px',
+    margin: 0,
+    minWidth: 0,
+    overflowX: 'auto',
+    whiteSpace: 'pre',
+};
+const copyIcon = {
+    height: 12,
+    width: 12,
+};
+const list = {
+    marginTop: 14,
+};
+const skillRow = {
+    alignItems: 'center',
+    borderBottom: colors_1.BORDER_WHITE_ALPHA_12,
+    display: 'flex',
+    gap: 10,
+    minHeight: 38,
+    padding: '0 10px',
+};
+const lastSkillRow = {
+    ...skillRow,
+    borderBottom: 'none',
+};
+const statusIcon = {
+    flexShrink: 0,
+    height: 14,
+    width: 14,
+};
+const skillName = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    lineHeight: 1.4,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const status = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 12,
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+};
+const loading = {
+    ...description,
+    marginTop: 14,
+};
+const SkillsSettings = () => {
+    var _a;
+    const { error, remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
+    const installedSkills = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.filter(({ installedGlobally, installedInProject }) => installedGlobally || installedInProject).length) !== null && _a !== void 0 ? _a : 0);
+    }, [remotionSkillsInfo]);
+    const missingSkills = ((_a = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.length) !== null && _a !== void 0 ? _a : 0) - installedSkills;
+    const onCopy = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(INSTALL_COMMAND).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, []);
+    const renderCopyAction = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { color: color, style: copyIcon });
+    }, []);
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [remotionSkillsInfo === null && error === null ? (jsx_runtime_1.jsx("p", { style: loading, children: "Checking installed skills..." })) : null, remotionSkillsInfo === null && error ? (jsx_runtime_1.jsx("div", { style: { marginTop: 14 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: error, align: "flex-start", type: "error" }) })) : null, missingSkills > 0 ? (jsx_runtime_1.jsxs("div", { children: [
+                    jsx_runtime_1.jsx("p", { style: description, children: "Not all skills are installed. Run this command in the project directory, then reload Studio and restart your coding agent." }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: command, children: INSTALL_COMMAND }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onCopy, renderAction: renderCopyAction, title: "Copy install command" })
+                        ] })
+                ] })) : null, remotionSkillsInfo ? (jsx_runtime_1.jsx("div", { style: list, role: "list", "aria-label": "Remotion Agent Skills", children: remotionSkillsInfo.skills.map((skill, index) => {
+                    const installed = skill.installedInProject || skill.installedGlobally;
+                    const installedLocation = skill.installedInProject && skill.installedGlobally
+                        ? 'Project and global'
+                        : skill.installedInProject
+                            ? 'Project'
+                            : skill.installedGlobally
+                                ? 'Global'
+                                : 'Not installed';
+                    return (jsx_runtime_1.jsxs("div", { role: "listitem", style: index === remotionSkillsInfo.skills.length - 1
+                            ? lastSkillRow
+                            : skillRow, children: [installed ? (jsx_runtime_1.jsx(check_circle_filled_1.CheckCircleFilled, { "aria-hidden": true, style: { ...statusIcon, fill: colors_1.BLUE } })) : (jsx_runtime_1.jsx(minus_1.Minus, { "aria-hidden": true, color: colors_1.LIGHT_TEXT, style: statusIcon })), jsx_runtime_1.jsxs("span", { style: skillName, children: ["/", skill.name] }), jsx_runtime_1.jsx("span", { style: status, children: installedLocation })
+                        ] }, skill.name));
+                }) })) : null] }));
+};
+exports.SkillsSettings = SkillsSettings;

package/dist/components/StaticFilePreview.js

@@ -4,6 +4,7 @@ exports.StaticFilePreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const add_asset_cache_bust_1 = require("../helpers/add-asset-cache-bust");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
@@ -36,6 +37,11 @@ const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     if (!currentAsset) {
         return null;
     }
-    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
+    return (jsx_runtime_1.jsx(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: (0, add_asset_cache_bust_1.addAssetCacheBust)({
+            fetchedAt: assetMetadata && assetMetadata.type === 'found'
+                ? assetMetadata.fetchedAt
+                : 0,
+            src: staticFileSrc,
+        }), assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;

package/dist/components/StudioSettings.js

@@ -6,16 +6,14 @@ const client_1 = require("@remotion/renderer/client");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
-const Checkmark_1 = require("../icons/Checkmark");
 const undo_1 = require("../icons/undo");
 const Button_1 = require("./Button");
+const ConfigSelect_1 = require("./ConfigSelect");
 const styles_1 = require("./InspectorPanel/styles");
 const layout_1 = require("./layout");
-const ComboBox_1 = require("./NewComposition/ComboBox");
 const InputDragger_1 = require("./NewComposition/InputDragger");
 const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
 const layout_2 = require("./RenderModal/layout");
-const RenderModalHr_1 = require("./RenderModal/RenderModalHr");
 const SettingsContext_1 = require("./SettingsContext");
 const use_auto_save_config_1 = require("./use-auto-save-config");
 const container = {
@@ -29,15 +27,14 @@ const dividerLabel = {
     margin: 0,
     padding: '4px 16px',
 };
-const controlWidth = {
-    boxSizing: 'border-box',
-    width: 180,
+const sectionTitle = {
+    ...dividerLabel,
+    marginTop: 8,
 };
 const resetIcon = {
     height: 12,
     width: 12,
 };
-const DEFAULT_VALUE = 'studio-default';
 const initialSettings = {
     askAIEnabled: null,
     audioLatencyHint: null,
@@ -50,39 +47,6 @@ const initialSettings = {
     numberOfSharedAudioTags: null,
     rspack: null,
 };
-const ConfigSelect = ({ defaultLabel, name, onChange, options, value, }) => {
-    const values = [
-        {
-            id: DEFAULT_VALUE,
-            keyHint: null,
-            label: `Default (${defaultLabel})`,
-            leftItem: value === null ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-            onClick: () => onChange(null),
-            quickSwitcherLabel: null,
-            subMenu: null,
-            type: 'item',
-            value: DEFAULT_VALUE,
-        },
-        { id: `${DEFAULT_VALUE}-divider`, type: 'divider' },
-        ...options.map((option) => {
-            const id = `${name}-${String(option.value)}`;
-            return {
-                id,
-                keyHint: null,
-                label: option.label,
-                leftItem: value === option.value ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                onClick: () => onChange(option.value),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: id,
-            };
-        }),
-    ];
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_2.label, children: name }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: values, selectedId: value === null ? DEFAULT_VALUE : `${name}-${String(value)}`, style: controlWidth, title: name }) })
-        ] }));
-};
 const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd, value, }) => {
     const resolvedDefaultLabel = defaultLabel !== null && defaultLabel !== void 0 ? defaultLabel : String(defaultValue);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
@@ -91,10 +55,6 @@ const ConfigNumber = ({ defaultLabel, defaultValue, name, onChange, onChangeEnd,
                 ] })
         ] }));
 };
-const booleanOptions = [
-    { label: 'Enabled', value: true },
-    { label: 'Disabled', value: false },
-];
 const StudioSettings = () => {
     var _a;
     const { error: settingsError, revision, studioRuntimeConfig } = (0, SettingsContext_1.useSettings)();
@@ -140,7 +100,6 @@ const StudioSettings = () => {
             update('setAudioLatencyHint', settings.audioLatencyHint),
             update('setNumberOfSharedAudioTags', committedNumberSettings.numberOfSharedAudioTags),
             update('setRspack', settings.rspack),
-            update('setKeyboardShortcutsEnabled', settings.keyboardShortcutsEnabled),
             update('setInteractivityEnabled', settings.interactivityEnabled),
             update('setLogLevel', settings.logLevel),
         ].filter((item) => editedSetters.has(item.setter));
@@ -167,14 +126,14 @@ const StudioSettings = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Keyboard shortcuts enabled", onChange: (value) => changeSetting('keyboardShortcutsEnabled', 'setKeyboardShortcutsEnabled', value), options: booleanOptions, value: settings.keyboardShortcutsEnabled }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
+            jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Interface" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Ask AI enabled", onChange: (value) => changeSetting('askAIEnabled', 'setAskAIEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.askAIEnabled }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Enabled", name: "Interactivity enabled", onChange: (value) => changeSetting('interactivityEnabled', 'setInteractivityEnabled', value), options: ConfigSelect_1.booleanOptions, value: settings.interactivityEnabled }), jsx_runtime_1.jsx(ConfigNumber, { defaultLabel: "Unlimited", defaultValue: studio_shared_1.DEFAULT_TIMELINE_TRACKS, name: "Max timeline tracks", onChange: (value) => previewNumberSetting('maxTimelineTracks', value), onChangeEnd: (value) => commitNumberSetting('maxTimelineTracks', 'setMaxTimelineTracks', value), value: settings.maxTimelineTracks }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Audio" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Playback", name: "Audio latency hint", onChange: (value) => changeSetting('audioLatencyHint', 'setAudioLatencyHint', value), options: [
                     { label: 'Interactive', value: 'interactive' },
                     { label: 'Balanced', value: 'balanced' },
                     { label: 'Playback', value: 'playback' },
-                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx("p", { style: dividerLabel, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
+                ], value: settings.audioLatencyHint }), jsx_runtime_1.jsx(ConfigNumber, { defaultValue: 0, name: "Number of shared audio tags", onChange: (value) => previewNumberSetting('numberOfSharedAudioTags', value), onChangeEnd: (value) => commitNumberSetting('numberOfSharedAudioTags', 'setNumberOfSharedAudioTags', value), value: settings.numberOfSharedAudioTags }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Beep on finish", onChange: (value) => changeSetting('beepOnFinish', 'setBeepOnFinish', value), options: ConfigSelect_1.booleanOptions, value: settings.beepOnFinish }), jsx_runtime_1.jsx("p", { style: sectionTitle, children: "Development" }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Webpack", name: "Bundler", onChange: (value) => changeSetting('rspack', 'setRspack', value), options: [
                     { label: 'Rspack', value: true },
                     { label: 'Webpack', value: false },
-                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
+                ], value: settings.rspack }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Disabled", name: "Cross-site isolation", onChange: (value) => changeSetting('enableCrossSiteIsolation', 'setEnableCrossSiteIsolation', value), options: ConfigSelect_1.booleanOptions, value: settings.enableCrossSiteIsolation }), jsx_runtime_1.jsx(ConfigSelect_1.ConfigSelect, { defaultLabel: "Info", name: "Log level", onChange: (value) => changeSetting('logLevel', 'setLogLevel', value), options: client_1.BrowserSafeApis.logLevels.map((value) => ({
                     label: value[0].toUpperCase() + value.slice(1),
                     value,
                 })), value: settings.logLevel }), (error !== null && error !== void 0 ? error : settingsError) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/Tabs/index.js

@@ -24,7 +24,7 @@ const selectorButton = {
     flex: 1,
     padding: 3,
     height: 34,
-    paddingLeft: 12,
+    paddingLeft: 10,
     display: 'flex',
     flexDirection: 'row',
     fontSize: 13,

package/dist/components/Timeline/Timeline.js

@@ -153,7 +153,6 @@ const TimelineContextMenuArea = ({ children }) => {
                 ? await browserStudioOperations.insertSolid(request)
                 : await (0, call_api_1.callApi)('/api/insert-jsx-element', request);
             if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
                 return;
             }
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);

package/dist/components/Timeline/TimelineAssetField.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type CanUpdateSequencePropStatusStatic } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 import { type InspectorQuickActionProps } from '../InspectorPanel/common';
-export type InspectorSourceAction = Omit<InspectorQuickActionProps, 'variant'>;
+export type InspectorSourceAction = InspectorQuickActionProps;
 type AssetSelectionContextValue = {
     readonly initialQuery: string;
     readonly getSourceAction: (src: string) => InspectorSourceAction | null;

package/dist/components/Timeline/TimelineAssetField.js

@@ -18,6 +18,19 @@ const penIcon = {
     height: 14,
     width: 14,
 };
+const sourceActions = {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    gap: 4,
+    minWidth: 0,
+};
+const standaloneSourceActionStyle = {
+    flex: 1,
+    margin: 0,
+    minWidth: 0,
+    width: 'auto',
+};
 exports.AssetSelectionContext = (0, react_1.createContext)({
     getSourceAction: () => null,
     initialQuery: '',
@@ -100,14 +113,7 @@ const TimelineAssetField = ({ field, effectiveValue, propStatus, onSave, onDragV
     if (inlineSourceAction === null) {
         return action;
     }
-    return (jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", variant: {
-            type: 'segmented',
-            trailing: {
-                disabled: window.remotion_isReadOnlyStudio,
-                onClick: openAssetSelection,
-                renderIcon: (color) => jsx_runtime_1.jsx(pen_1.PenIcon, { color: color, style: penIcon }),
-                title: 'Change source',
-            },
-        } }));
+    return (jsx_runtime_1.jsxs("div", { style: sourceActions, children: [
+            jsx_runtime_1.jsx(common_1.InspectorQuickAction, { ...inlineSourceAction, size: "compact", style: standaloneSourceActionStyle }), action] }));
 };
 exports.TimelineAssetField = TimelineAssetField;

package/dist/components/Timeline/TimelineBooleanField.js

@@ -4,9 +4,6 @@ exports.TimelineBooleanField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
-const checkboxContainer = {
-    marginLeft: 8,
-};
 const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) => {
     const checked = Boolean(effectiveValue);
     const onChange = (0, react_1.useCallback)(() => {
@@ -15,6 +12,6 @@ const TimelineBooleanField = ({ field, propStatus, effectiveValue, onSave }) =>
             onSave(newValue);
         }
     }, [propStatus, onSave, checked]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: false, variant: "small" }) }));
+    return (jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: false, variant: "small" }));
 };
 exports.TimelineBooleanField = TimelineBooleanField;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -4,13 +4,14 @@ exports.TimelineClipboardKeybindings = exports.getPasteEffectPropTarget = export
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const clipboard_figma_1 = require("../../helpers/clipboard-figma");
 const clipboard_images_1 = require("../../helpers/clipboard-images");
 const clipboard_svg_1 = require("../../helpers/clipboard-svg");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
@@ -791,9 +792,9 @@ const TimelineClipboardKeybindings = () => {
                             ? 'Reapply property paste onto selected sequences'
                             : 'Reapply property paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)(sequencePropTarget.targets.length > 1
-                            ? 'Pasted property onto selected sequences'
-                            : 'Pasted property', 2000);
+                        if (sequencePropTarget.targets.length > 1) {
+                            (0, NotificationCenter_1.showNotification)('Pasted property onto selected sequences', 2000);
+                        }
                     });
                 }
                 const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
@@ -858,9 +859,9 @@ const TimelineClipboardKeybindings = () => {
                             ? 'Reapply effect prop paste onto selected effects'
                             : 'Reapply effect prop paste',
                     }).then(() => {
-                        (0, NotificationCenter_1.showNotification)(effectPropTarget.targets.length > 1
-                            ? 'Pasted effect prop onto selected effects'
-                            : 'Pasted effect prop', 2000);
+                        if (effectPropTarget.targets.length > 1) {
+                            (0, NotificationCenter_1.showNotification)('Pasted effect prop onto selected effects', 2000);
+                        }
                     });
                 }
                 const result = envelope === null
@@ -869,6 +870,9 @@ const TimelineClipboardKeybindings = () => {
                 if (result.status === 'invalid') {
                     return;
                 }
+                if (!(0, browser_studio_operations_1.canUseEffectOperations)()) {
+                    return;
+                }
                 e.preventDefault();
                 if (result.status === 'unsupported-version') {
                     (0, NotificationCenter_1.showNotification)('Cannot paste effects copied from a different Remotion Studio version', 4000);
@@ -892,7 +896,7 @@ const TimelineClipboardKeybindings = () => {
                 const insertAtIndices = (envelope === null || envelope === void 0 ? void 0 : envelope.sourceIdentity) === makeTargetKey(targetSequenceNodePath)
                     ? envelope.originalEffectIndices
                     : null;
-                return (0, call_api_1.callApi)('/api/paste-effects', {
+                return (0, effect_operations_api_1.pasteEffects)({
                     targetFileName: targetSequenceNodePath.absolutePath,
                     targetSequenceNodePath,
                     type: payload.type,
@@ -900,10 +904,7 @@ const TimelineClipboardKeybindings = () => {
                     clientId,
                     insertAtIndices,
                 }).then((pasteResult) => {
-                    if (pasteResult.success) {
-                        (0, NotificationCenter_1.showNotification)('Pasted effects', 2000);
-                    }
-                    else {
+                    if (!pasteResult.success) {
                         (0, NotificationCenter_1.showNotification)(pasteResult.reason, 4000);
                     }
                 });

package/dist/components/Timeline/TimelineEffectItem.d.ts

@@ -12,6 +12,7 @@ export declare const TimelineEffectItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
+    readonly labelNextToToggle: boolean;
     readonly getIsExpanded: GetIsExpanded;
     readonly toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
 }>;

package/dist/components/Timeline/TimelineEffectItem.js

@@ -4,12 +4,15 @@ exports.TimelineEffectItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
+const effect_operations_api_1 = require("../effect-operations-api");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const get_copy_context_for_agents_menu_item_1 = require("./get-copy-context-for-agents-menu-item");
 const save_effect_prop_1 = require("./save-effect-prop");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -26,6 +29,14 @@ const rowStyle = {
     height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
     cursor: 'default',
 };
+const labelContainerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    paddingRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+};
 const reorderWrapper = {
     position: 'relative',
 };
@@ -64,11 +75,12 @@ const getEffectReorderDragData = (dataTransfer) => {
 const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
-const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, getIsExpanded, toggleTrack, }) => {
+const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, documentationLink, nodePath, validatedLocation, rowDepth, labelNextToToggle, getIsExpanded, toggleTrack, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const canMutateEffects = (0, browser_studio_operations_1.canUseEffectOperations)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
@@ -88,11 +100,13 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         }
         return false;
     }, [disabledStatus]);
-    const canToggle = previewConnected && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
+    const canToggle = previewConnected && canMutateEffects && (disabledStatus === null || disabledStatus === void 0 ? void 0 : disabledStatus.status) === 'static';
     const deleteDisabled = !previewConnected ||
+        !canMutateEffects ||
         effectStatus.type !== 'can-update-effect' ||
         !validatedLocation.source;
     const canReorder = previewConnected &&
+        canMutateEffects &&
         effectStatus.type === 'can-update-effect' &&
         Boolean(validatedLocation.source);
     const nodePathKey = (0, react_1.useMemo)(() => remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath), [nodePath]);
@@ -101,7 +115,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             return;
         }
         try {
-            const result = await (0, call_api_1.callApi)('/api/delete-effect', [
+            const result = await (0, effect_operations_api_1.deleteEffects)([
                 {
                     type: 'single-effect',
                     fileName: validatedLocation.source,
@@ -118,13 +132,25 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         }
     }, [deleteDisabled, effectIndex, nodePath, validatedLocation.source]);
     const getContextMenuItems = (0, react_1.useCallback)(() => {
-        if (!previewConnected) {
-            return [];
-        }
         if (selection.selectable) {
             selection.onSelect({ shiftKey: false, toggleKey: false });
         }
-        const items = [];
+        const items = [
+            (0, get_copy_context_for_agents_menu_item_1.getCopyContextForAgentsMenuItem)({
+                contextForAgents: (0, format_file_location_1.formatContextForAgents)({
+                    location: validatedLocation,
+                    name: `Effect "${label}"`,
+                    root: window.remotion_cwd,
+                }),
+            }),
+        ];
+        if (!previewConnected) {
+            return items;
+        }
+        items.push({
+            type: 'divider',
+            id: 'copy-context-for-agents-divider',
+        });
         if (documentationLink) {
             items.push({
                 type: 'item',
@@ -166,9 +192,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     }, [
         deleteDisabled,
         documentationLink,
+        label,
         onDeleteEffectFromSource,
         previewConnected,
         selection,
+        validatedLocation,
     ]);
     const onToggle = (0, react_1.useCallback)((type) => {
         if (!canToggle || previewServerState.type !== 'connected') {
@@ -209,8 +237,11 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             alignItems: 'center',
             color: (0, TimelineSelection_1.getTimelineColor)(selection.selected, true),
             display: 'inline-flex',
-            marginRight: timeline_layout_1.EXPANDED_SECTION_PADDING_RIGHT,
+            flexShrink: 1,
             minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
             boxShadow: containsSelection && !selection.selected
                 ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                 : undefined,
@@ -288,17 +319,14 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         setDropIndicator(null);
         currentEffectDrag = null;
         try {
-            const result = await (0, call_api_1.callApi)('/api/reorder-effect', {
+            const result = await (0, effect_operations_api_1.reorderEffect)({
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
                 fromIndex: dropTarget.dragData.effectIndex,
                 toIndex: dropTarget.toIndex,
                 clientId: previewServerState.clientId,
             });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Reordered effect', 2000);
-            }
-            else {
+            if (!result.success) {
                 (0, NotificationCenter_1.showNotification)(result.reason, 4000);
             }
         }
@@ -321,7 +349,9 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             ...(dropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
         };
     }, [dropIndicator]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false }), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, isFieldRow: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: canToggle ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: "effect", hidden: isDisabled, onInvoked: onToggle })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: labelNextToToggle ? null : jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: rowStyle, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx("span", { title: label, style: labelStyle, children: label }), jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(nodePathInfo), label: `${label} section`, disabled: false })
+            ] }) }));
     const draggableRow = canReorder ? (jsx_runtime_1.jsxs("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, style: reorderWrapper, children: [reorderLineStyle ? jsx_runtime_1.jsx("div", { style: reorderLineStyle }) : null, row] })) : (row);
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: draggableRow })) : (draggableRow);
 };