@remotion/studio 4.0.525 → 4.0.526

package/dist/api/focus-default-props-path.js

@@ -13,7 +13,13 @@ const focusDefaultPropsPath = ({ path, scrollBehavior, }) => {
             success: false,
         };
     }
-    query.scrollIntoView({ behavior: scrollBehavior });
+    const scrollToField = () => query.scrollIntoView({ behavior: scrollBehavior });
+    if (scroll_to_default_props_path_1.expandDefaultPropsEditorRef.current === null) {
+        scrollToField();
+    }
+    else {
+        scroll_to_default_props_path_1.expandDefaultPropsEditorRef.current(scrollToField);
+    }
     query.classList.add(scroll_to_default_props_path_1.DEFAULT_PROPS_PATH_ACTIVE_CLASSNAME);
     return {
         success: true,

package/dist/api/restart-studio.d.ts

@@ -1,5 +1,5 @@
 /**
- * @description Restarts the Remotion Studio.
+ * @description Restarts the Remotion Studio process.
  * @see [Documentation](https://www.remotion.dev/docs/studio/restart-studio)
  */
 import type { RestartStudioResponse } from '@remotion/studio-shared';

package/dist/api/restart-studio.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * @description Restarts the Remotion Studio.
+ * @description Restarts the Remotion Studio process.
  * @see [Documentation](https://www.remotion.dev/docs/studio/restart-studio)
  */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/AgentPrompt.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const AgentPrompt: React.FC<{
+    readonly availableText: string;
+    readonly promptDetails: string;
+    readonly skillId: string;
+}>;

package/dist/components/AgentPrompt.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentPrompt = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const copy_text_1 = require("../helpers/copy-text");
+const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
+const copy_1 = require("../icons/copy");
+const skills_1 = require("../icons/skills");
+const CodingAgentButton_1 = require("./CodingAgentButton");
+const InlineAction_1 = require("./InlineAction");
+const ValidationMessage_1 = require("./NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const SettingsContext_1 = require("./SettingsContext");
+const SkillsSettings_1 = require("./SkillsSettings");
+const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+};
+const commandField = {
+    alignItems: 'flex-start',
+    background: colors_1.BLACK_ALPHA_30,
+    borderRadius: 6,
+    boxSizing: 'border-box',
+    display: 'flex',
+    gap: 8,
+    marginTop: 10,
+    padding: '8px 8px 8px 10px',
+    width: '100%',
+};
+const code = {
+    color: colors_1.WHITE,
+    flex: 1,
+    fontFamily: 'monospace',
+    fontSize: 13,
+    fontWeight: 'normal',
+    lineHeight: 1.5,
+    margin: 0,
+    minWidth: 0,
+    overflowWrap: 'anywhere',
+    whiteSpace: 'pre-wrap',
+};
+const copyAction = { flexShrink: 0 };
+const copyIcon = { flexShrink: 0, height: 12, width: 12 };
+const skillsIcon = {
+    display: 'inline-block',
+    height: 18,
+    marginRight: 6,
+    verticalAlign: 'middle',
+    width: 18,
+};
+const promptHeader = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 12,
+    justifyContent: 'space-between',
+};
+const skillRowContainer = {
+    borderTop: colors_1.BORDER_WHITE_ALPHA_12,
+    marginTop: 10,
+};
+const skillError = { marginTop: 10 };
+const AgentPrompt = ({ availableText, promptDetails, skillId }) => {
+    var _a;
+    const { codingAgentInfo, remotionSkillsInfo, skillActionError } = (0, SettingsContext_1.useSettings)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const skill = remotionSkillsInfo === null || remotionSkillsInfo === void 0 ? void 0 : remotionSkillsInfo.skills.find(({ name }) => name === skillId);
+    const skillAvailable = Boolean((skill === null || skill === void 0 ? void 0 : skill.installedInProject) || (skill === null || skill === void 0 ? void 0 : skill.installedGlobally));
+    const canInstallSkill = !window.remotion_isReadOnlyStudio &&
+        previewServerState.type === 'connected' &&
+        remotionSkillsInfo !== null;
+    const skillName = `/${skillId}`;
+    const prompt = `${skillName}${promptDetails}`;
+    const installCommand = 'npx remotion skills add';
+    const hasCodingAgent = ((_a = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.length) !== null && _a !== void 0 ? _a : 0) > 0;
+    const { copied: promptCopied, markCopied: markPromptCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
+    const { copied: installCopied, markCopied: markInstallCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
+    const copy = (0, react_1.useCallback)((value, markCopied) => {
+        (0, copy_text_1.copyText)(value)
+            .then(markCopied)
+            .catch((err) => (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000));
+    }, []);
+    const renderPromptCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: promptCopied, color: color, style: copyIcon })), [promptCopied]);
+    const renderInstallCopy = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: installCopied, color: color, style: copyIcon })), [installCopied]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [skillAvailable ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: "Install the Agent Skill first:" }), canInstallSkill && skill ? (jsx_runtime_1.jsx("div", { "aria-label": "Remotion Agent Skills", role: "list", style: skillRowContainer, children: jsx_runtime_1.jsx(SkillsSettings_1.SkillSettingsRow, { isLast: false, skill: skill }) })) : (jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                            jsx_runtime_1.jsx("pre", { style: code, children: installCommand }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(installCommand, markInstallCopied), renderAction: renderInstallCopy, style: copyAction, title: "Copy command", variant: null })
+                        ] })), skillActionError ? (jsx_runtime_1.jsx("div", { style: skillError, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: skillActionError, type: "error" }) })) : null] })), jsx_runtime_1.jsxs("div", { style: { ...promptHeader, marginTop: skillAvailable ? 0 : 16 }, children: [
+                    jsx_runtime_1.jsx("div", { style: text, children: skillAvailable
+                            ? availableText
+                            : `Then ${availableText.toLowerCase()}` }), hasCodingAgent ? (jsx_runtime_1.jsx(CodingAgentButton_1.CodingAgentButton, { label: "Open in", prompt: prompt, size: "compact", style: null })) : null] }), jsx_runtime_1.jsxs("div", { style: commandField, children: [
+                    jsx_runtime_1.jsxs("pre", { style: code, children: [
+                            jsx_runtime_1.jsx(skills_1.SkillsIcon, { color: colors_1.BLUE, style: skillsIcon, "aria-hidden": true }), jsx_runtime_1.jsx("span", { style: {
+                                    color: colors_1.BLUE,
+                                    fontFamily: 'inherit',
+                                    fontSize: 'inherit',
+                                    fontWeight: 'inherit',
+                                    lineHeight: 'inherit',
+                                }, children: skillName }), promptDetails] }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: () => copy(prompt, markPromptCopied), renderAction: renderPromptCopy, style: copyAction, title: "Copy prompt", variant: null })
+                ] })
+        ] }));
+};
+exports.AgentPrompt = AgentPrompt;

package/dist/components/AssetFileIcon.js

@@ -7,12 +7,14 @@ const file_1 = require("../icons/file");
 const font_1 = require("../icons/font");
 const frame_1 = require("../icons/frame");
 const json_1 = require("../icons/json");
+const lut_1 = require("../icons/lut");
 const video_1 = require("../icons/video");
 const iconByFileType = {
     audio: audio_1.AudioFileIcon,
     font: font_1.FontFileIcon,
     image: frame_1.PicIcon,
     json: json_1.JsonFileIcon,
+    lut: lut_1.LutFileIcon,
     other: file_1.FileIcon,
     txt: file_1.FileIcon,
     video: video_1.VideoFileIcon,

package/dist/components/AssetSelectorItem.d.ts

@@ -1,33 +1,11 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getAssetActionAvailability: ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }: {
-    browserStudioCanMutateAssets: boolean | null;
-    readOnlyStudio: boolean;
-    connectionStatus: "connected" | "disconnected" | "init";
-    publicFolderExists: string | null;
-}) => {
-    mutationsDisabled: boolean;
-    fileExplorerDisabled: boolean;
-};
+export { getAssetActionAvailability, getAssetContextMenuItems, } from './asset-context-menu';
 export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
     readOnlyStudio: boolean;
     relativePath: string;
 }) => boolean;
-export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
-    relativePath: string;
-    fileManagerName: string;
-    copyFileName: () => void;
-    copyStaticFilePath: () => void;
-    copyAbsolutePath: (() => void) | null;
-    openAssetInConvert: () => void;
-    openAssetInExplorer: () => void;
-    renameAsset: () => void;
-    deleteAsset: () => void;
-    fileExplorerAvailable: boolean;
-    fileExplorerDisabled: boolean;
-    mutationsDisabled: boolean;
-}) => ComboboxValue[];
 export declare const getAssetFolderContextMenuItems: ({ folderPath, fileManagerName, copyFolderPath, copyAbsolutePath, openFolderInExplorer, uploadAssets, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
     folderPath: string;
     fileManagerName: string;

package/dist/components/AssetSelectorItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetFolderTree = exports.getAssetFolderContextMenuItems = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
+exports.AssetFolderTree = exports.getAssetFolderContextMenuItems = exports.getCanDragAsset = exports.getAssetContextMenuItems = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
@@ -46,7 +46,6 @@ const copy_text_1 = require("../helpers/copy-text");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const hoverable_1 = require("../helpers/hoverable");
-const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
 const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
@@ -54,7 +53,7 @@ const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const ellipsis_1 = require("../icons/ellipsis");
 const folder_1 = require("../icons/folder");
-const modals_1 = require("../state/modals");
+const asset_context_menu_1 = require("./asset-context-menu");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
@@ -62,9 +61,10 @@ const InlineAction_1 = require("./InlineAction");
 const InlineDropdown_1 = require("./InlineDropdown");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const open_in_new_window_1 = require("./open-in-new-window");
 const actions_1 = require("./RenderQueue/actions");
-const use_delete_asset_1 = require("./use-delete-asset");
+const asset_context_menu_2 = require("./asset-context-menu");
+Object.defineProperty(exports, "getAssetActionAvailability", { enumerable: true, get: function () { return asset_context_menu_2.getAssetActionAvailability; } });
+Object.defineProperty(exports, "getAssetContextMenuItems", { enumerable: true, get: function () { return asset_context_menu_2.getAssetContextMenuItems; } });
 const iconStyle = {
     width: 18,
     height: 18,
@@ -114,124 +114,10 @@ const inlineActionsStyle = {
 const renderContextMenuAction = (color) => {
     return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisIconStyle, fill: color });
 };
-const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
-    return {
-        mutationsDisabled: browserStudioCanMutateAssets !== true &&
-            (readOnlyStudio || connectionStatus !== 'connected'),
-        fileExplorerDisabled: browserStudioCanMutateAssets !== null ||
-            publicFolderExists === null ||
-            readOnlyStudio ||
-            connectionStatus !== 'connected',
-    };
-};
-exports.getAssetActionAvailability = getAssetActionAvailability;
 const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
-    const previewFileType = (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
-    const canOpenInConvert = previewFileType === 'audio' || previewFileType === 'video';
-    const items = [
-        (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
-        canOpenInConvert
-            ? {
-                id: 'open-asset-in-convert',
-                keyHint: null,
-                label: 'Open in Remotion Convert',
-                leftItem: null,
-                onClick: openAssetInConvert,
-                quickSwitcherLabel: 'Open asset in Remotion Convert',
-                subMenu: null,
-                type: 'item',
-                value: 'open-asset-in-convert',
-            }
-            : null,
-        {
-            type: 'divider',
-            id: 'open-in-new-window-divider',
-        },
-        {
-            id: 'copy-asset-file-name',
-            keyHint: null,
-            label: 'Copy file name',
-            leftItem: null,
-            onClick: copyFileName,
-            quickSwitcherLabel: 'Copy asset file name',
-            subMenu: null,
-            type: 'item',
-            value: 'copy-asset-file-name',
-        },
-        {
-            id: 'copy-asset-static-file-path',
-            keyHint: null,
-            label: 'Copy staticFile() path',
-            leftItem: null,
-            onClick: copyStaticFilePath,
-            quickSwitcherLabel: 'Copy staticFile() path',
-            subMenu: null,
-            type: 'item',
-            value: 'copy-asset-static-file-path',
-        },
-        copyAbsolutePath
-            ? {
-                id: 'copy-asset-absolute-path',
-                keyHint: null,
-                label: 'Copy absolute path',
-                leftItem: null,
-                onClick: copyAbsolutePath,
-                quickSwitcherLabel: 'Copy asset absolute path',
-                subMenu: null,
-                type: 'item',
-                value: 'copy-asset-absolute-path',
-            }
-            : null,
-        {
-            type: 'divider',
-            id: 'asset-file-actions-divider',
-        },
-        fileExplorerAvailable
-            ? {
-                id: 'open-asset-in-explorer',
-                keyHint: null,
-                label: `Show in ${fileManagerName}`,
-                leftItem: null,
-                onClick: openAssetInExplorer,
-                quickSwitcherLabel: `Show asset in ${fileManagerName}`,
-                subMenu: null,
-                type: 'item',
-                value: 'open-asset-in-explorer',
-                disabled: fileExplorerDisabled,
-            }
-            : null,
-        {
-            id: 'rename-asset',
-            keyHint: null,
-            label: 'Rename...',
-            leftItem: null,
-            onClick: renameAsset,
-            quickSwitcherLabel: 'Rename asset...',
-            subMenu: null,
-            type: 'item',
-            value: 'rename-asset',
-            disabled: mutationsDisabled,
-        },
-        {
-            id: 'delete-asset',
-            keyHint: null,
-            label: 'Delete...',
-            leftItem: null,
-            onClick: deleteAsset,
-            quickSwitcherLabel: 'Delete asset...',
-            subMenu: null,
-            type: 'item',
-            value: 'delete-asset',
-            disabled: mutationsDisabled,
-        },
-    ];
-    return items.filter(no_react_1.NoReactInternals.truthy);
-};
-exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const getAssetFolderContextMenuItems = ({ folderPath, fileManagerName, copyFolderPath, copyAbsolutePath, openFolderInExplorer, uploadAssets, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
     const items = [
         fileExplorerAvailable
@@ -357,7 +243,7 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
     const uploadAssetsToFolder = (0, react_1.useCallback)(() => {
         uploadAssets(folderPath);
     }, [folderPath, uploadAssets]);
-    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+    const { mutationsDisabled, fileExplorerDisabled } = (0, asset_context_menu_1.getAssetActionAvailability)({
         browserStudioCanMutateAssets: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null ? null : true,
         readOnlyStudio,
         connectionStatus,
@@ -423,16 +309,16 @@ const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabInd
 };
 exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
-    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const relativePath = (0, react_1.useMemo)(() => {
         return parentFolder ? parentFolder + '/' + item.name : item.name;
     }, [parentFolder, item.name]);
+    const { fileExplorerDisabled, fileManagerName, getContextMenuItems } = (0, asset_context_menu_1.useAssetContextMenuItems)({
+        relativePath,
+        readOnlyStudio,
+    });
     const previewFileType = (0, react_1.useMemo)(() => {
         return (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
     }, [relativePath]);
@@ -511,41 +397,6 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
     }, []);
-    const copyFileName = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(item.name)
-            .then(() => {
-            (0, NotificationCenter_1.showNotification)(`Copied '${item.name}' to clipboard`, 1000);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [item.name]);
-    const copyStaticFilePath = (0, react_1.useCallback)(() => {
-        const content = `staticFile("${relativePath}")`;
-        (0, copy_text_1.copyText)(content)
-            .then(() => {
-            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [relativePath]);
-    const copyAbsolutePath = (0, react_1.useCallback)(() => {
-        if (window.remotion_publicFolderExists === null) {
-            return;
-        }
-        const content = `${window.remotion_publicFolderExists}/${relativePath}`;
-        (0, copy_text_1.copyText)(content)
-            .then(() => {
-            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
-        });
-    }, [relativePath]);
-    const openAssetInConvert = (0, react_1.useCallback)(() => {
-        (0, open_in_remotion_convert_1.openInRemotionConvert)({ relativePath });
-    }, [relativePath]);
     const openAssetInExplorer = (0, react_1.useCallback)(() => {
         if (!window.remotion_publicFolderExists) {
             (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
@@ -557,47 +408,6 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
         });
     }, [relativePath]);
-    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
-        browserStudioCanMutateAssets: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null ? null : true,
-        readOnlyStudio,
-        connectionStatus,
-        publicFolderExists: window.remotion_publicFolderExists,
-    });
-    const deleteAsset = (0, use_delete_asset_1.useDeleteAsset)(relativePath);
-    const renameAsset = (0, react_1.useCallback)(() => {
-        setSelectedModal({
-            type: 'rename-static-file',
-            relativePath,
-        });
-    }, [relativePath, setSelectedModal]);
-    const getContextMenuItems = (0, react_1.useCallback)(() => {
-        return (0, exports.getAssetContextMenuItems)({
-            relativePath,
-            fileManagerName,
-            copyFileName,
-            copyStaticFilePath,
-            copyAbsolutePath: window.remotion_publicFolderExists === null ? null : copyAbsolutePath,
-            openAssetInConvert,
-            openAssetInExplorer,
-            renameAsset,
-            deleteAsset,
-            fileExplorerAvailable: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null,
-            fileExplorerDisabled,
-            mutationsDisabled,
-        });
-    }, [
-        copyFileName,
-        copyStaticFilePath,
-        copyAbsolutePath,
-        deleteAsset,
-        fileExplorerDisabled,
-        fileManagerName,
-        mutationsDisabled,
-        openAssetInConvert,
-        openAssetInExplorer,
-        renameAsset,
-        relativePath,
-    ]);
     const revealInExplorer = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         openAssetInExplorer();

package/dist/components/Canvas.js

@@ -36,6 +36,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const element_install_api_1 = require("./element-install-api");
 const element_install_request_1 = require("./element-install-request");
 const handle_drop_1 = require("./handle-drop");
@@ -155,7 +156,6 @@ const Canvas = ({ canvasContent, size }) => {
     const [pendingElementInstallRequests, setPendingElementInstallRequests] = (0, react_1.useState)([]);
     const [activeElementInstallRequest, setActiveElementInstallRequest] = (0, react_1.useState)(null);
     const lastFocusedAtRef = (0, react_1.useRef)(typeof document === 'undefined' || document.hasFocus() ? Date.now() : null);
-    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const [assetResolution, setAssetResolution] = (0, react_1.useState)(null);
     const metadataRequestRef = (0, react_1.useRef)(0);
     const currentCompositionId = canvasContent.type === 'composition' ? canvasContent.compositionId : null;
@@ -844,17 +844,14 @@ const Canvas = ({ canvasContent, size }) => {
         var _a;
         var _b;
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
-            unsupportedDropNotifiedRef.current = false;
             setCompositionDropPreview(null);
             return;
         }
         const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
-        const shouldNotifyAboutUnsupportedDrop = cannotAddSequence && !mayBeCanvasCapture;
-        if (shouldNotifyAboutUnsupportedDrop &&
-            !unsupportedDropNotifiedRef.current) {
-            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-        }
-        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.hasElementDragType)(event.dataTransfer);
         if (!canDropAssets && !cannotAddSequence && !mayBeCanvasCapture) {
             setCompositionDropPreview(null);
             return;
@@ -862,7 +859,11 @@ const Canvas = ({ canvasContent, size }) => {
         event.preventDefault();
         if (event.dataTransfer) {
             event.dataTransfer.dropEffect =
-                canDropAssets || mayBeCanvasCapture ? 'copy' : 'none';
+                canDropAssets ||
+                    canDropElementIntoNewComposition ||
+                    mayBeCanvasCapture
+                    ? 'copy'
+                    : 'none';
         }
         if (!canDropAssets ||
             contentDimensions === null ||
@@ -929,8 +930,10 @@ const Canvas = ({ canvasContent, size }) => {
         addFitPadding,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         contentDimensions,
         editorSnapping,
+        isAddingAsset,
         previewSize,
         size,
     ]);
@@ -947,18 +950,14 @@ const Canvas = ({ canvasContent, size }) => {
                 return;
             }
         }
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDragEnd = (0, react_1.useCallback)(() => {
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
     }, []);
     const onDrop = (0, react_1.useCallback)(async (event) => {
         var _a, _b;
         var _c, _d;
-        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
-        unsupportedDropNotifiedRef.current = false;
         setCompositionDropPreview(null);
         if (!(0, drop_handler_data_1.isSupportedDropEvent)(event) || !isDragEventInsideCanvas(event)) {
             return;
@@ -984,15 +983,17 @@ const Canvas = ({ canvasContent, size }) => {
                 }
             }
         }
-        if (cannotAddSequence) {
+        const canDropElementIntoNewComposition = cannotAddSequence &&
+            canReceiveElementInstallRequest &&
+            !isAddingAsset &&
+            (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer) !== null;
+        if (cannotAddSequence && !canDropElementIntoNewComposition) {
             event.preventDefault();
             event.stopPropagation();
-            if (!unsupportedDropWasNotified) {
-                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-            }
+            (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             return;
         }
-        if (!canDropAssets ||
+        if ((!canDropAssets && !canDropElementIntoNewComposition) ||
             compositionFile === null ||
             currentCompositionId === null ||
             config === null) {
@@ -1063,12 +1064,14 @@ const Canvas = ({ canvasContent, size }) => {
         addFitPadding,
         canDropAssets,
         cannotAddSequence,
+        canReceiveElementInstallRequest,
         chooseSvgImportMode,
         compositionFile,
         config,
         contentDimensions,
         currentCompositionId,
         editorSnapping,
+        isAddingAsset,
         previewSize,
         size,
         setSelectedModal,

package/dist/components/CaptionInspector.js

@@ -60,6 +60,8 @@ const readOnlyStatus = {
 };
 const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onTextCancel, onReplaceCaptions, onToggle, readOnly, readOnlyTitle, }) => {
     const fileInput = (0, react_1.useRef)(null);
+    const expansionRef = (0, react_1.useRef)({ expanded, onToggle });
+    expansionRef.current = { expanded, onToggle };
     const [isImporting, setIsImporting] = (0, react_1.useState)(false);
     const { setSelectedModal } = react_1.default.useContext(modals_1.SetSelectedModalContext);
     const importCaptions = (0, react_1.useCallback)(async ({ fileName, contents, }) => {
@@ -68,10 +70,14 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
         }
         setIsImporting(true);
         try {
-            onReplaceCaptions((0, parse_caption_file_1.parseCaptionFile)({
+            const imported = (0, parse_caption_file_1.parseCaptionFile)({
                 fileName,
                 contents: await contents,
-            }));
+            });
+            onReplaceCaptions(imported);
+            if (imported.length > 0 && !expansionRef.current.expanded) {
+                expansionRef.current.onToggle();
+            }
         }
         catch (error) {
             (0, NotificationCenter_1.showNotification)(`Could not import ${fileName}: ${error instanceof Error ? error.message : String(error)}`, 5000);
@@ -112,6 +118,6 @@ const CaptionInspector = ({ captions, expanded, onTextChange, onTextSave, onText
     }, [importCaptions, setSelectedModal]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx(common_1.InspectorSectionHeader, { children: jsx_runtime_1.jsx(CollapsibleInspectorSectionHeader_1.CollapsibleInspectorSectionHeader, { action: jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderEnd, children: [onReplaceCaptions === null ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: onToggle }) }), expanded ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
+                                    jsx_runtime_1.jsx("input", { ref: fileInput, accept: ".json", "aria-label": "Import captions file", hidden: true, onChange: onFileSelected, type: "file" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Import captions", className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME, disabled: isImporting, onClick: openCaptionSelection, renderAction: (color) => (jsx_runtime_1.jsx(upload_1.UploadIcon, { "aria-hidden": "true", color: color, focusable: "false", style: { height: 14, width: 14 } })), title: importTooltip, variant: null })] })), readOnly ? (jsx_runtime_1.jsx("div", { style: readOnlyStatus, title: readOnlyTitle !== null && readOnlyTitle !== void 0 ? readOnlyTitle : undefined, children: "Read only" })) : null] }), expanded: expanded, label: "Captions", onToggle: captions.length > 0 ? onToggle : null }) }), expanded || captions.length === 0 ? (jsx_runtime_1.jsx(CaptionTextEditor_1.CaptionTextEditor, { captions: captions, onChange: onTextChange, onSave: onTextSave, onCancel: onTextCancel, readOnly: readOnly })) : null] }));
 };
 exports.CaptionInspector = CaptionInspector;

package/dist/{error-overlay/remotion-overlay → components}/CodeFrame.d.ts

@@ -3,4 +3,6 @@ import React from 'react';
 export declare const CodeFrame: React.FC<{
     readonly source: ScriptLine[];
     readonly lineNumberWidth: number;
+    readonly fontSize: number;
+    readonly horizontalMargin: number;
 }>;