@remotion/studio 4.0.503 → 4.0.505

package/dist/api/install-package.d.ts

@@ -1,2 +1,3 @@
+import type { ElementDependency } from '@remotion/studio-protocol';
 import type { InstallPackageResponse } from '@remotion/studio-shared';
-export declare const installPackages: (packageNames: string[]) => Promise<InstallPackageResponse>;
+export declare const installPackages: (dependencies: (string | ElementDependency)[]) => Promise<InstallPackageResponse>;

package/dist/api/install-package.js

@@ -3,13 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.installPackages = void 0;
 const remotion_1 = require("remotion");
 const call_api_1 = require("../components/call-api");
-const installPackages = (packageNames) => {
+const installPackages = (dependencies) => {
     if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
         throw new Error('installPackages() is only available in the Studio');
     }
     if (window.remotion_isReadOnlyStudio) {
         throw new Error('installPackages() is not available in Read-Only Studio');
     }
-    return (0, call_api_1.callApi)('/api/install-package', { packageNames });
+    return (0, call_api_1.callApi)('/api/install-package', {
+        dependencies: dependencies.map((dependency) => typeof dependency === 'string'
+            ? { name: dependency, version: null }
+            : dependency),
+    });
 };
 exports.installPackages = installPackages;

package/dist/components/AssetSelectorItem.js

@@ -46,7 +46,6 @@ const colors_1 = require("../helpers/colors");
 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 mobile_layout_1 = require("../helpers/mobile-layout");
 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"));
@@ -55,7 +54,6 @@ const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const clipboard_1 = require("../icons/clipboard");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
-const sidebar_1 = require("../state/sidebar");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
@@ -260,10 +258,8 @@ 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 isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
@@ -303,15 +299,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         (0, sidebar_scroll_into_view_1.markAssetSidebarScrollFromRowClick)(relativePath);
         setCanvasContent({ type: 'asset', asset: relativePath });
         (0, url_state_1.pushUrl)(`/assets/${relativePath}`);
-        if (isMobileLayout) {
-            setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-        }
-    }, [
-        isMobileLayout,
-        relativePath,
-        setCanvasContent,
-        setSidebarCollapsedState,
-    ]);
+    }, [relativePath, setCanvasContent]);
     const onDragStart = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d;
         if (!canDragAsset) {
@@ -436,7 +424,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             relativePath,
         });
     }, [relativePath, setSelectedModal]);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, exports.getAssetContextMenuItems)({
             relativePath,
             fileManagerName,
@@ -467,8 +455,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         copyStaticFilePath();
     }, [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: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, 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: hovered || selected ? colors_1.WHITE : 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, { variant: null, 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, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })
                                 ] }))] })) : null] }) }) }));

package/dist/components/AudioWaveform.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay } from 'remotion';
-export declare const AudioWaveform: React.FC<{
+export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly src: string;
     readonly height: number;
     readonly visualizationWidth: number;

package/dist/components/AudioWaveform.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -76,7 +109,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, w, h);
 };
-const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -300,4 +333,4 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
             jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
-exports.AudioWaveform = AudioWaveform;
+exports.AudioWaveform = react_1.default.memo(AudioWaveformInner);

package/dist/components/Canvas.js

@@ -646,11 +646,18 @@ const Canvas = ({ canvasContent, size }) => {
             if (canceled) {
                 return;
             }
-            const declaredDependencies = Array.from(new Set(activeElementInstallRequest.element.dependencies));
-            const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies);
-            const ignoredDependencies = declaredDependencies.filter((packageName) => elementInstallDependencyIgnoreList.includes(packageName) &&
-                !missingPackages.includes(packageName));
-            const dependenciesToReview = declaredDependencies.filter((packageName) => !ignoredDependencies.includes(packageName));
+            const declaredDependencies = Array.from(new Map(activeElementInstallRequest.element.dependencies.map((dependency) => [
+                dependency.name,
+                dependency,
+            ])).values());
+            const missingPackages = (0, install_required_package_1.getMissingPackages)(declaredDependencies).map((dependency) => dependency.name);
+            const ignoredDependencies = declaredDependencies.filter((dependency) => elementInstallDependencyIgnoreList.includes(dependency.name) &&
+                !missingPackages.includes(dependency.name));
+            const dependenciesToReview = declaredDependencies
+                .filter((dependency) => !ignoredDependencies.includes(dependency))
+                .map((dependency) => dependency.version === null
+                ? dependency.name
+                : `${dependency.name}@${dependency.version}`);
             const sourceLabel = activeElementInstallRequest.source.type === 'studio-protocol'
                 ? activeElementInstallRequest.source.origin
                 : 'Unverified drag-and-drop payload';

package/dist/components/CheckboardToggle.js

@@ -21,6 +21,8 @@ const CheckboardToggle = () => {
             return !c;
         });
     }, [setCheckerboard]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "game-board-alt", className: "svg-inline--fa fa-game-board-alt fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 16, height: 16 }, children: jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : colors_1.WHITE, d: "M480 0H32A32 32 0 0 0 0 32v448a32 32 0 0 0 32 32h448a32 32 0 0 0 32-32V32a32 32 0 0 0-32-32zm-32 256H256v192H64V256h192V64h192z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsxs("svg", { "aria-hidden": "true", focusable: "false", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { width: 18, height: 18 }, fill: "none", children: [
+                jsx_runtime_1.jsx("path", { fill: checkerboard ? colors_1.BLUE : color, d: "M256 48h184c13.3 0 24 10.7 24 24v184H256V48zM48 256h208v208H72c-13.3 0-24-10.7-24-24V256z" }), jsx_runtime_1.jsx("rect", { x: "48", y: "48", width: "416", height: "416", rx: "24", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" }), jsx_runtime_1.jsx("path", { d: "M256 48v416M48 256h416", stroke: checkerboard ? colors_1.BLUE : color, strokeWidth: "32" })
+            ] })) }));
 };
 exports.CheckboardToggle = CheckboardToggle;

package/dist/components/CompositionContextButton.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const CompositionContextButton: React.FC<{
     readonly visible: boolean;
-    readonly values: ComboboxValue[];
+    readonly getItems: () => ComboboxValue[];
 }>;

package/dist/components/CompositionContextButton.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
-const CompositionContextButton = ({ visible, values }) => {
+const CompositionContextButton = ({ visible, getItems }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -22,6 +22,6 @@ const CompositionContextButton = ({ visible, values }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, variant: null }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -90,7 +90,7 @@ const CompositionSelector = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const rootContextMenuItems = (0, react_1.useMemo)(() => {
+    const getRootContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, root_composition_menu_items_1.getRootCompositionMenuItems)({
             connectionStatus,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -234,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(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) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), 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

@@ -23,7 +23,7 @@ const actions_1 = require("./RenderQueue/actions");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const itemStyle = {
-    paddingRight: 10,
+    paddingRight: 2,
     paddingTop: 5,
     paddingBottom: 5,
     fontSize: 13,
@@ -33,11 +33,10 @@ const itemStyle = {
     alignItems: 'center',
     marginBottom: 1,
     marginLeft: 4,
-    marginRight: 4,
     appearance: 'none',
     border: 'none',
     borderRadius: 4,
-    width: 'calc(100% - 8px)',
+    width: 'calc(100% - 4px)',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
@@ -121,7 +120,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
             return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
@@ -242,13 +241,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                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", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    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("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-type ContextMenuOpenHandler = () => false | void;
-type ContextMenuTargetOpenResult = false | void | readonly ComboboxValue[];
-type ContextMenuTargetOpenHandler = (event: MouseEvent) => ContextMenuTargetOpenResult | Promise<ContextMenuTargetOpenResult>;
+type ContextMenuItemsResult = false | readonly ComboboxValue[];
+export type ContextMenuItemsFactory = (event: MouseEvent) => ContextMenuItemsResult | Promise<ContextMenuItemsResult>;
+export declare const resolveContextMenuItems: (getItems: ContextMenuItemsFactory, event: MouseEvent) => Promise<readonly ComboboxValue[] | null>;
 type ContextMenuProps = {
     readonly children: React.ReactNode;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
@@ -14,7 +13,6 @@ type ContextMenuProps = {
 export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuForTarget: React.FC<{
     readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuTargetOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
 }>;
 export {};

package/dist/components/ContextMenu.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenuForTarget = exports.ContextMenu = void 0;
+exports.ContextMenuForTarget = exports.ContextMenu = exports.resolveContextMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,6 +47,14 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
+const resolveContextMenuItems = async (getItems, event) => {
+    const result = await getItems(event);
+    if (result === false || result.length === 0) {
+        return null;
+    }
+    return [...result];
+};
+exports.resolveContextMenuItems = resolveContextMenuItems;
 const contextMenuFullScreenOverlay = {
     ...styles_1.fullScreenOverlay,
     pointerEvents: 'none',
@@ -62,7 +70,7 @@ const notifyContextMenuOpened = (id) => {
         detail: id,
     }));
 };
-const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     const menuRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
@@ -154,11 +162,14 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, 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));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: opened.values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
-exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
+exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const setRef = (0, react_1.useCallback)((node) => {
@@ -177,21 +188,34 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         if (!current) {
             return;
         }
-        const onClick = (e) => {
+        const onClick = async (e) => {
             e.preventDefault();
             e.stopPropagation();
-            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen]);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -208,13 +232,15 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         };
     }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
-const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+const ContextMenuForTarget = ({ triggerRef, getItems }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
     const [body, setBody] = (0, react_1.useState)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     (0, react_1.useEffect)(() => {
@@ -231,24 +257,31 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             const e = event;
             e.preventDefault();
             e.stopPropagation();
-            const result = await (onOpen === null || onOpen === void 0 ? void 0 : onOpen(e));
-            if (result === false) {
-                return false;
-            }
-            const nextValues = Array.isArray(result) ? result : values;
-            if (nextValues.length === 0) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpenedValues(nextValues);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen, triggerRef, values]);
+    }, [triggerRef]);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -264,6 +297,6 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
         };
     }, [onHide]);
-    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/ControlButton.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import type { RenderInlineAction } from './InlineAction';
 export declare const CONTROL_BUTTON_PADDING = 6;
-export declare const CONTROL_BUTTON_SIZE = 30;
-export declare const ControlButton: (props: React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const ControlButton: (props: Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "title"> & {
     readonly title: string;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly children: RenderInlineAction | React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ControlButton.js

@@ -1,27 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlButton = exports.CONTROL_BUTTON_SIZE = exports.CONTROL_BUTTON_PADDING = void 0;
+exports.ControlButton = exports.CONTROL_BUTTON_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const z_index_1 = require("../state/z-index");
+const colors_1 = require("../helpers/colors");
+const InlineAction_1 = require("./InlineAction");
 exports.CONTROL_BUTTON_PADDING = 6;
-exports.CONTROL_BUTTON_SIZE = 30;
 const ControlButton = (props) => {
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            opacity: props.disabled ? 0.5 : 1,
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: exports.CONTROL_BUTTON_SIZE,
-            height: exports.CONTROL_BUTTON_SIZE,
-            flexShrink: 0,
-            background: 'none',
-            border: 'none',
-            padding: 0,
-        };
-    }, [props.disabled]);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { type: 'button', tabIndex: tabIndex, ...props, style: style }));
+    const { children, onClick, title, ...buttonProps } = props;
+    const renderAction = typeof children === 'function' ? children : () => children;
+    return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { ...buttonProps, title: title, onClick: onClick, renderAction: renderAction, variant: null, unhoveredColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.ControlButton = ControlButton;

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, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: null, 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, minFlexerSize: null, maxAntiFlexerSize: null, minAntiFlexerSize: 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/EditorGuides/Guide.js

@@ -165,7 +165,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             .filter(no_react_1.NoReactInternals.truthy)
             .join(' ');
     }, [activeClassName]);
-    const values = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: '1',
@@ -191,6 +191,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [clearSelection, guide.id, selected, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
 };
 exports.default = (0, react_1.memo)(GuideComp);