@remotion/studio 4.0.524 → 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/ActionTooltip.d.ts

@@ -5,5 +5,7 @@ export declare const ActionTooltip: React.FC<{
     /** Hover delay in milliseconds. Pass null to show immediately. */
     readonly delay: number | null;
     readonly dismissOnClick: boolean;
+    readonly side?: 'top' | 'right';
+    readonly triggerStyle?: React.CSSProperties;
     readonly children: React.ReactNode;
 }>;

package/dist/components/ActionTooltip.js

@@ -8,7 +8,7 @@ const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
-const triggerStyle = { display: 'inline-flex' };
+const defaultTriggerStyle = { display: 'inline-flex' };
 const tooltipStyle = {
     position: 'fixed',
     display: 'flex',
@@ -44,7 +44,7 @@ const shortcutStyle = {
 let visibleTooltipCount = 0;
 let lastTooltipHiddenAt = null;
 const TOOLTIP_SKIP_DELAY_WINDOW = 300;
-const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, children }) => {
+const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, side = 'top', triggerStyle, children, }) => {
     var _a, _b;
     const triggerRef = (0, react_1.useRef)(null);
     const tooltipRef = (0, react_1.useRef)(null);
@@ -119,14 +119,24 @@ const ActionTooltip = ({ label, shortcut, delay, dismissOnClick, children }) =>
         }
         const trigger = triggerRef.current.getBoundingClientRect();
         const tooltip = tooltipRef.current.getBoundingClientRect();
+        if (side === 'right') {
+            const right = trigger.right + 4;
+            setPosition({
+                left: right + tooltip.width <= window.innerWidth - 8
+                    ? right
+                    : Math.max(8, trigger.left - tooltip.width - 4),
+                top: Math.max(8, Math.min(trigger.top + (trigger.height - tooltip.height) / 2, window.innerHeight - tooltip.height - 8)),
+            });
+            return;
+        }
         const above = trigger.top - tooltip.height - 4;
         setPosition({
             left: Math.max(8, Math.min(trigger.left + (trigger.width - tooltip.width) / 2, window.innerWidth - tooltip.width - 8)),
             top: Math.max(8, Math.min(above >= 8 ? above : trigger.bottom + 4, window.innerHeight - tooltip.height - 8)),
         });
-    }, [label, shortcut, visible]);
+    }, [label, shortcut, side, visible]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { ref: triggerRef, style: triggerStyle, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
+            jsx_runtime_1.jsx("span", { ref: triggerRef, style: { ...defaultTriggerStyle, ...triggerStyle }, onPointerEnter: onPointerEnter, onPointerLeave: hide, onPointerDownCapture: dismissOnClick ? hide : undefined, onClickCapture: dismissOnClick ? hide : undefined, onFocus: (event) => {
                     if (event.currentTarget.contains(event.target)) {
                         show();
                     }

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/AppLaunchButton.js

@@ -51,6 +51,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                     ? defaultMainSegmentStyle
                     : compactMainSegmentStyle,
                 title,
+                tooltipLabel: null,
                 type: 'action',
             },
             ...(items.length > 0
@@ -67,6 +68,7 @@ const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAr
                         selectedId: null,
                         style: dropdownSegmentStyle,
                         title: menuAriaLabel,
+                        tooltipLabel: null,
                         type: 'menu',
                         values: items,
                     },

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type AssetSelectionModalState } from '../state/modals';
+export declare const AssetSelectorModal: React.FC<{
+    readonly state: AssetSelectionModalState;
+    readonly readOnlyStudio: boolean;
+}>;