@remotion/studio 4.0.499 → 4.0.500

package/dist/components/AssetSelector.js

@@ -48,6 +48,7 @@ const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
 const styles_1 = require("./Menu/styles");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
 const use_static_files_1 = require("./use-static-files");
 const container = {
     display: 'flex',
@@ -158,11 +159,12 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, staticFiles]);
-    return (jsx_runtime_1.jsx("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                    " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
-                    " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
-                ...list,
-                backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
-            }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) })) }));
+    return (jsx_runtime_1.jsxs("div", { style: container, onDragOver: shouldAllowUpload ? onDragOver : undefined, onDrop: shouldAllowUpload ? onDrop : undefined, children: [
+            jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "assets", showShortcut: true, tabIndex: tabIndex }), staticFiles.length === 0 ? (publicFolderExists ? (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, place a file in the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                        " folder of your project or drag and drop a file here."] }) })) : (jsx_runtime_1.jsx("div", { style: emptyState, children: jsx_runtime_1.jsxs("div", { style: label, children: ["To add assets, create a folder called", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "public" }),
+                        " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
+                    ...list,
+                    backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
+                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -1,5 +1,29 @@
 import React from 'react';
 import type { AssetStructure } from '../helpers/create-folder-tree';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getAssetActionAvailability: ({ readOnlyStudio, connectionStatus, publicFolderExists, }: {
+    readOnlyStudio: boolean;
+    connectionStatus: "connected" | "disconnected" | "init";
+    publicFolderExists: string | null;
+}) => {
+    mutationsDisabled: boolean;
+    fileExplorerDisabled: boolean;
+};
+export declare const getCanDragAsset: ({ readOnlyStudio, relativePath, }: {
+    readOnlyStudio: boolean;
+    relativePath: string;
+}) => boolean;
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }: {
+    relativePath: string;
+    fileManagerName: string;
+    copyFileName: () => void;
+    copyStaticFilePath: () => void;
+    openAssetInExplorer: () => void;
+    renameAsset: () => void;
+    deleteAsset: () => void;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
 export declare const AssetFolderTree: React.FC<{
     readonly item: AssetStructure;
     readonly name: string | null;

package/dist/components/AssetSelectorItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetFolderTree = void 0;
+exports.AssetFolderTree = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const react_1 = require("react");
@@ -105,6 +105,91 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const getAssetActionAvailability = ({ readOnlyStudio, connectionStatus, publicFolderExists, }) => {
+    return {
+        mutationsDisabled: readOnlyStudio || connectionStatus !== 'connected',
+        fileExplorerDisabled: 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, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerDisabled, mutationsDisabled, }) => {
+    return [
+        (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
+        {
+            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',
+        },
+        {
+            type: 'divider',
+            id: 'asset-file-actions-divider',
+        },
+        {
+            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,
+        },
+        {
+            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,
+        },
+    ];
+};
+exports.getAssetContextMenuItems = getAssetContextMenuItems;
 const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const openFolderTimerRef = (0, react_1.useRef)(null);
@@ -199,7 +284,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         return false;
     }, [canvasContent, relativePath]);
     const canDragAsset = (0, react_1.useMemo)(() => {
-        return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+        return (0, exports.getCanDragAsset)({ readOnlyStudio, relativePath });
     }, [readOnlyStudio, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
@@ -313,7 +398,11 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
         });
     }, [relativePath]);
-    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+        readOnlyStudio,
+        connectionStatus,
+        publicFolderExists: window.remotion_publicFolderExists,
+    });
     const deleteAsset = (0, react_1.useCallback)(() => {
         confirm({
             title: 'Delete asset',
@@ -338,90 +427,34 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not delete ${relativePath}: ${err.message}`, 3000);
         });
     }, [confirm, relativePath]);
+    const renameAsset = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'rename-static-file',
+            relativePath,
+        });
+    }, [relativePath, setSelectedModal]);
     const contextMenu = (0, react_1.useMemo)(() => {
-        return [
-            (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/assets/${relativePath}`),
-            {
-                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',
-            },
-            {
-                type: 'divider',
-                id: 'asset-file-actions-divider',
-            },
-            {
-                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: serverActionDisabled || window.remotion_publicFolderExists === null,
-            },
-            {
-                id: 'rename-asset',
-                keyHint: null,
-                label: 'Rename...',
-                leftItem: null,
-                onClick: () => {
-                    setSelectedModal({
-                        type: 'rename-static-file',
-                        relativePath,
-                    });
-                },
-                quickSwitcherLabel: 'Rename asset...',
-                subMenu: null,
-                type: 'item',
-                value: 'rename-asset',
-                disabled: serverActionDisabled,
-            },
-            {
-                id: 'delete-asset',
-                keyHint: null,
-                label: 'Delete...',
-                leftItem: null,
-                onClick: deleteAsset,
-                quickSwitcherLabel: 'Delete asset...',
-                subMenu: null,
-                type: 'item',
-                value: 'delete-asset',
-                disabled: serverActionDisabled,
-            },
-        ];
+        return (0, exports.getAssetContextMenuItems)({
+            relativePath,
+            fileManagerName,
+            copyFileName,
+            copyStaticFilePath,
+            openAssetInExplorer,
+            renameAsset,
+            deleteAsset,
+            fileExplorerDisabled,
+            mutationsDisabled,
+        });
     }, [
         copyFileName,
         copyStaticFilePath,
         deleteAsset,
+        fileExplorerDisabled,
         fileManagerName,
+        mutationsDisabled,
         openAssetInExplorer,
+        renameAsset,
         relativePath,
-        serverActionDisabled,
-        setSelectedModal,
     ]);
     const revealInExplorer = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -433,7 +466,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [copyStaticFilePath]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
                     jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/CompositionSelector.js

@@ -6,19 +6,18 @@ const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const sort_by_nonce_history_1 = require("../helpers/sort-by-nonce-history");
-const use_keybinding_1 = require("../helpers/use-keybinding");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const ContextMenu_1 = require("./ContextMenu");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const ExplorerQuickSwitcherTrigger_1 = require("./QuickSwitcher/ExplorerQuickSwitcherTrigger");
 const actions_1 = require("./RenderQueue/actions");
 const root_composition_menu_items_1 = require("./root-composition-menu-items");
 const useCompositionNavigation = () => {
@@ -65,28 +64,6 @@ const container = {
     overflow: 'hidden',
     backgroundColor: colors_1.BACKGROUND,
 };
-const quickSwitcherArea = {
-    padding: '4px 12px',
-    borderBottom: `1px solid ${colors_1.BLACK_HEX}`,
-};
-const quickSwitcherTrigger = {
-    backgroundColor: colors_1.WHITE_ALPHA_06,
-    borderRadius: 5,
-    padding: '4px 10px',
-    color: colors_1.LIGHT_TEXT,
-    fontSize: 12,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    border: 'none',
-    width: '100%',
-    appearance: 'none',
-};
-const shortcutLabel = {
-    fontSize: 11,
-    opacity: 0.6,
-};
 const autoScrollThreshold = 70;
 const maxAutoScrollSpeed = 18;
 const getAutoScrollSpeed = ({ clientY, element, }) => {
@@ -146,13 +123,6 @@ const CompositionSelector = () => {
         var _a;
         (_a = remotion_1.Internals.compositionSelectorRef.current) === null || _a === void 0 ? void 0 : _a.toggleFolder(folderName, parentName);
     }, []);
-    const openQuickSwitcher = (0, react_1.useCallback)(() => {
-        setSelectedModal({
-            type: 'quick-switcher',
-            mode: 'compositions',
-            invocationTimestamp: Date.now(),
-        });
-    }, [setSelectedModal]);
     const clearRootDragHover = (0, react_1.useCallback)(() => {
         setRootDragHovered(false);
     }, []);
@@ -264,7 +234,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx("div", { style: quickSwitcherArea, children: jsx_runtime_1.jsxs("button", { type: "button", style: quickSwitcherTrigger, onClick: openQuickSwitcher, tabIndex: tabIndex, children: ["Search...", (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : (jsx_runtime_1.jsxs("span", { style: shortcutLabel, children: [ShortcutHint_1.cmdOrCtrlCharacter, "+K"] }))] }) }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/ControlButton.js

@@ -15,6 +15,7 @@ const ControlButton = (props) => {
             justifyContent: 'center',
             width: exports.CONTROL_BUTTON_SIZE,
             height: exports.CONTROL_BUTTON_SIZE,
+            flexShrink: 0,
             background: 'none',
             border: 'none',
             padding: 0,

package/dist/components/ExplorerPanel.js

@@ -43,6 +43,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
     }, []);
     (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
+            getSelectedPanel: () => panel,
             selectAssetsPanel: () => {
                 setPanel('assets');
                 persistSelectedOptionsSidebarPanel('assets');
@@ -52,7 +53,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
                 persistSelectedOptionsSidebarPanel('compositions');
             },
         };
-    }, []);
+    }, [panel]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();

package/dist/components/ExplorerPanelRef.d.ts

@@ -1,4 +1,6 @@
+export type ExplorerSidebarPanel = 'assets' | 'compositions';
 export declare const explorerSidebarTabs: import("react").RefObject<{
+    getSelectedPanel: () => ExplorerSidebarPanel;
     selectAssetsPanel: () => void;
     selectCompositionPanel: () => void;
 } | null>;

package/dist/components/GlobalKeybindings.js

@@ -12,6 +12,7 @@ const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const CompositionSelector_1 = require("./CompositionSelector");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const sequencePropShortcuts = {
@@ -106,10 +107,14 @@ const GlobalKeybindings = () => {
             event: 'keydown',
             key: 'k',
             callback: () => {
+                var _a;
                 setSelectedModal({
                     type: 'quick-switcher',
-                    mode: 'compositions',
+                    mode: ((_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.getSelectedPanel()) === 'assets'
+                        ? 'assets'
+                        : 'compositions',
                     invocationTimestamp: Date.now(),
+                    assetSelection: null,
                 });
             },
             triggerIfInputFieldFocused: true,
@@ -159,6 +164,7 @@ const GlobalKeybindings = () => {
                     type: 'quick-switcher',
                     mode: 'docs',
                     invocationTimestamp: Date.now(),
+                    assetSelection: null,
                 });
             },
             commandCtrlKey: false,

package/dist/components/InlineAction.d.ts

@@ -5,5 +5,6 @@ export type InlineActionProps = {
     readonly disabled?: boolean;
     readonly renderAction: RenderInlineAction;
     readonly title?: string;
+    readonly unhoveredColor?: string;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -30,6 +30,6 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
             pointerEvents: disabled ? 'none' : 'auto',
         };
     }, [disabled, hovered]);
-    return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineDropdown.d.ts

@@ -1,5 +1,5 @@
 import { type InlineActionProps } from './InlineAction';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const InlineDropdown: ({ values, ...props }: Omit<InlineActionProps, "onClick"> & {
+export declare const InlineDropdown: ({ values, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
     readonly values: ComboboxValue[];
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineDropdown.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const noop_1 = require("../helpers/noop");
 const z_index_1 = require("../state/z-index");
@@ -15,7 +16,7 @@ const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const InlineDropdown = ({ values, ...props }) => {
+const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -79,7 +80,7 @@ const InlineDropdown = ({ values, ...props }) => {
         setOpened({ type: 'not-open' });
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, ...props }) }), portalStyle
+            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/InspectorPanel/AlignmentControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const AlignmentControls: React.FC<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;

package/dist/components/InspectorPanel/AlignmentControls.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const align_bottom_1 = require("../../icons/align-bottom");
 const align_center_horizontal_1 = require("../../icons/align-center-horizontal");
 const align_center_vertical_1 = require("../../icons/align-center-vertical");
@@ -62,7 +63,8 @@ const AlignmentControls = ({ track }) => {
     const handleAlign = (0, react_1.useCallback)((direction) => {
         var _a;
         var _b, _c, _d, _e;
-        if (previewServerState.type !== 'connected' ||
+        if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ||
+            previewServerState.type !== 'connected' ||
             !track.nodePathInfo ||
             !track.sequence.controls) {
             return;
@@ -177,7 +179,8 @@ const AlignmentControls = ({ track }) => {
         getDragOverrides,
         setPropStatuses,
     ]);
-    if (previewServerState.type !== 'connected' ||
+    if (!(0, interactivity_enabled_1.isStudioInteractivityEnabled)() ||
+        previewServerState.type !== 'connected' ||
         !track.nodePathInfo ||
         !track.sequence.controls ||
         !currentCompositionMetadata) {

package/dist/components/InspectorPanel/CompositionInspector.js

@@ -25,14 +25,14 @@ const actionIconStyle = {
     height: 18,
     width: 18,
 };
-const CompositionActions = () => {
+const CompositionActions = ({ readOnlyStudio }) => {
     const { canInsertAsset, canInsertSolid, canShowInsertAsset, canShowInsertSolid, insertAsset, insertSolid, } = (0, use_composition_actions_1.useCompositionActions)();
-    if (!canShowInsertAsset && !canShowInsertSolid) {
+    if (readOnlyStudio || (!canShowInsertAsset && !canShowInsertSolid)) {
         return null;
     }
     return (jsx_runtime_1.jsxs(common_1.InspectorActionSection, { children: [canShowInsertSolid ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertSolid, onClick: insertSolid, renderIcon: (color) => (jsx_runtime_1.jsx(solid_1.SolidIcon, { color: color, style: actionIconStyle })), children: "Add Solid" })) : null, canShowInsertAsset ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: !canInsertAsset, onClick: insertAsset, renderIcon: (color) => (jsx_runtime_1.jsx(frame_1.PicIcon, { color: color, style: actionIconStyle })), children: "Add asset..." })) : null] }));
 };
-const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setDefaultProps }) => {
+const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
     var _a;
     const z = (0, get_zod_if_possible_1.useZodIfPossible)();
     const canSaveDefaultProps = (0, react_1.useContext)(ObserveDefaultPropsContext_1.ObserveDefaultPropsContext);
@@ -79,7 +79,7 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setD
         propsEditType: 'default-props',
         showCannotSaveDefaultPropsWarning: canShowDefaultPropsSection,
     });
-    if (!canShowDefaultPropsSection) {
+    if (readOnlyStudio || !canShowDefaultPropsSection) {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -92,9 +92,10 @@ const CompositionDefaultPropsSection = ({ composition, currentDefaultProps, setD
                 ] })
         ] }));
 };
-const CompositionVisualControlsSection = () => {
+const CompositionVisualControlsSection = ({ readOnlyStudio }) => {
     const { handles: visualControlHandles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    const hasVisualControls = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
+    const hasVisualControls = !readOnlyStudio &&
+        (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
         Object.keys(visualControlHandles).length > 0;
     if (!hasVisualControls) {
         return null;
@@ -109,7 +110,7 @@ const CompositionInspector = ({ composition, currentDefaultProps, readOnlyStudio
     return (jsx_runtime_1.jsxs("div", { style: styles_1.scrollableContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
             jsx_runtime_1.jsxs("div", { style: styles_1.inspectorOverviewSection, children: [
                     jsx_runtime_1.jsx(CompositionInspectorHeader_1.CompositionInspectorHeader, {}), jsx_runtime_1.jsx(common_1.InspectorSectionDivider, {}), jsx_runtime_1.jsx(CompositionMetadata_1.CompositionMetadata, { compositionId: composition.id, disabled: readOnlyStudio, stack: composition.stack })
-                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, {}), jsx_runtime_1.jsx(CompositionActions, {})
+                ] }), jsx_runtime_1.jsx(CompositionDefaultPropsSection, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }), jsx_runtime_1.jsx(CompositionVisualControlsSection, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CompositionActions, { readOnlyStudio: readOnlyStudio })
         ] }));
 };
 exports.CompositionInspector = CompositionInspector;