@remotion/studio 4.0.498 → 4.0.500

package/dist/components/CompositionSelector.js

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelector = exports.useCompositionNavigation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+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 = () => {
@@ -64,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, }) => {
@@ -145,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);
     }, []);
@@ -188,8 +159,9 @@ const CompositionSelector = () => {
         }
     }, [runCompositionListAutoScroll, stopCompositionListAutoScroll]);
     const onCompositionListDragOverCapture = (0, react_1.useCallback)((event) => {
+        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             stopCompositionListAutoScroll();
             return;
         }
@@ -204,8 +176,9 @@ const CompositionSelector = () => {
         return stopCompositionListAutoScroll;
     }, [stopCompositionListAutoScroll]);
     const onRootDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -225,35 +198,35 @@ const CompositionSelector = () => {
         if (window.remotion_isReadOnlyStudio) {
             return;
         }
-        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
-        if (parsed === null) {
+        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }
+        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         stopCompositionListAutoScroll();
         setRootDragHovered(false);
-        const composition = compositions.find((c) => c.id === parsed.compositionId);
+        const composition = compositions.find((c) => c.id === compositionDragData.compositionId);
         if (!composition || composition.folderName === null) {
             return;
         }
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
                     type: 'move-composition-to-folder',
-                    idToMove: parsed.compositionId,
+                    idToMove: compositionDragData.compositionId,
                     folderName: null,
                     parentName: null,
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             notification.replaceContent(result.success
-                ? `Moved ${parsed.compositionId} outside of folder`
+                ? `Moved ${compositionDragData.compositionId} outside of folder`
                 : result.reason, result.success ? 2000 : 4000);
         }
         catch (err) {
@@ -261,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/CompositionSelectorItem.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const drag_and_drop_1 = require("@remotion/drag-and-drop");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -142,25 +143,31 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         });
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     const onCompositionDragStart = (0, react_1.useCallback)((event) => {
-        var _a;
+        var _a, _b, _c, _d;
         if (item.type !== 'composition' || window.remotion_isReadOnlyStudio) {
             event.preventDefault();
             return;
         }
         setIsDragging(true);
         event.dataTransfer.effectAllowed = 'copyMove';
-        event.dataTransfer.setData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeCompositionDragData)({
+        const dragData = drag_and_drop_1.DragAndDropInternals.makeDragData({
+            type: 'composition',
             compositionFile: (_a = resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source) !== null && _a !== void 0 ? _a : null,
             compositionId: item.composition.id,
-        })));
+            width: (_b = item.composition.width) !== null && _b !== void 0 ? _b : null,
+            height: (_c = item.composition.height) !== null && _c !== void 0 ? _c : null,
+            durationInFrames: (_d = item.composition.durationInFrames) !== null && _d !== void 0 ? _d : null,
+        });
+        event.dataTransfer.setData(dragData.mimeType, dragData.payload);
     }, [item, resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source]);
     const onCompositionDragEnd = (0, react_1.useCallback)(() => {
         setIsDragging(false);
     }, []);
     const onFolderDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -173,9 +180,10 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         setDragHovered(false);
     }, []);
     const onFolderChildListDragOver = (0, react_1.useCallback)((event) => {
+        var _a;
         if (item.type !== 'folder' ||
             window.remotion_isReadOnlyStudio ||
-            !Array.from(event.dataTransfer.types).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE)) {
+            ((_a = drag_and_drop_1.DragAndDropInternals.getDragPreviewMetadata(event.dataTransfer.types)) === null || _a === void 0 ? void 0 : _a.type) !== 'composition') {
             return;
         }
         event.preventDefault();
@@ -187,18 +195,18 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         if (item.type !== 'folder' || window.remotion_isReadOnlyStudio) {
             return;
         }
-        const raw = event.dataTransfer.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
-        const parsed = raw ? (0, studio_shared_1.parseCompositionDragData)(raw) : null;
-        if (parsed === null) {
+        const parsed = drag_and_drop_1.DragAndDropInternals.parseDragData(event.dataTransfer);
+        if ((parsed === null || parsed === void 0 ? void 0 : parsed.type) !== 'composition') {
             return;
         }
+        const compositionDragData = parsed.data;
         event.preventDefault();
         event.stopPropagation();
         clearRootDragHover();
         setDragHovered(false);
         const isAlreadyDirectChild = item.items.some((child) => {
             return (child.type === 'composition' &&
-                child.composition.id === parsed.compositionId);
+                child.composition.id === compositionDragData.compositionId);
         });
         if (isAlreadyDirectChild) {
             return;
@@ -207,22 +215,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             folderName: item.folderName,
             parentName: item.parentName,
         });
-        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${parsed.compositionId}...`, null);
+        const notification = (0, NotificationCenter_1.showNotification)(`Moving ${compositionDragData.compositionId}...`, null);
         const controller = new AbortController();
         try {
             const result = await (0, actions_1.applyCodemod)({
                 codemod: {
                     type: 'move-composition-to-folder',
-                    idToMove: parsed.compositionId,
+                    idToMove: compositionDragData.compositionId,
                     folderName: item.folderName,
                     parentName: item.parentName,
                 },
                 dryRun: false,
                 signal: controller.signal,
-                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(parsed),
+                symbolicatedStack: (0, studio_shared_1.compositionDragDataToSymbolicatedStack)(compositionDragData),
             });
             notification.replaceContent(result.success
-                ? `Moved ${parsed.compositionId} to ${folderId}`
+                ? `Moved ${compositionDragData.compositionId} to ${folderId}`
                 : result.reason, result.success ? 2000 : 4000);
             if (result.success && !item.expanded) {
                 toggleFolder(item.folderName, item.parentName);

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

@@ -35,7 +35,7 @@ const StudioClearSelectionArea = ({ children }) => {
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
-    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
+    const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, maxFlexerSize: null, maxAntiFlexerSize: null, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
     return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [

package/dist/components/EditorRuler/Ruler.js

@@ -6,8 +6,8 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const editor_guide_selection_1 = require("../../helpers/editor-guide-selection");
 const editor_ruler_1 = require("../../helpers/editor-ruler");
+const ruler_canvas_size_1 = require("../../helpers/ruler-canvas-size");
 const editor_guides_1 = require("../../state/editor-guides");
-const editor_rulers_1 = require("../../state/editor-rulers");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const should_clear_selection_on_pointer_down_1 = require("../Timeline/should-clear-selection-on-pointer-down");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -30,8 +30,10 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         hoveredGuideId,
         draggingGuideId,
     }), [draggingGuideId, guidesList, hoveredGuideId, selectedItems]);
-    const rulerWidth = isVerticalRuler ? editor_rulers_1.RULER_WIDTH : size.width - editor_rulers_1.RULER_WIDTH;
-    const rulerHeight = isVerticalRuler ? size.height - editor_rulers_1.RULER_WIDTH : editor_rulers_1.RULER_WIDTH;
+    const { width: rulerWidth, height: rulerHeight } = (0, ruler_canvas_size_1.getRulerCanvasSize)({
+        orientation,
+        size,
+    });
     (0, react_1.useEffect)(() => {
         (0, editor_ruler_1.drawMarkingOnRulerCanvas)({
             scale,

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

@@ -37,17 +37,29 @@ exports.ForceSpecificCursor = exports.stopForcingSpecificCursor = exports.forceS
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const ref = react_1.default.createRef();
+const removeAutomaticCleanupListeners = () => {
+    window.removeEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.removeEventListener('blur', exports.stopForcingSpecificCursor, true);
+};
 const forceSpecificCursor = (cursor) => {
     if (!ref.current) {
         throw new Error('ForceSpecificCursor is not mounted');
     }
     ref.current.style.cursor = cursor;
     ref.current.style.pointerEvents = 'auto';
+    // The component which initiated the drag may unmount before it gets a chance
+    // to handle the end of the gesture. Keep this fallback independent from the
+    // initiator so the cursor overlay can never remain stuck.
+    window.addEventListener('pointerup', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('pointercancel', exports.stopForcingSpecificCursor, true);
+    window.addEventListener('blur', exports.stopForcingSpecificCursor, true);
 };
 exports.forceSpecificCursor = forceSpecificCursor;
 const stopForcingSpecificCursor = () => {
+    removeAutomaticCleanupListeners();
     if (!ref.current) {
-        throw new Error('ForceSpecificCursor is not mounted');
+        return;
     }
     ref.current.style.cursor = '';
     ref.current.style.pointerEvents = 'none';

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;