@remotion/studio 4.0.504 → 4.0.506

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
@@ -53,7 +54,9 @@ const TrashIcon = ({ color }) => {
     return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 448 512", style: removeKeyframeIcon, children: jsx_runtime_1.jsx("path", { fill: color, d: "M160.5 27.4c2-6.8 8.3-11.4 15.3-11.4l96.4 0c7.1 0 13.3 4.6 15.3 11.4l11 36.6-149 0 11-36.6zM116.1 64L16 64C7.2 64 0 71.2 0 80S7.2 96 16 96l416 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-100.1 0-13.7-45.8C312.1-2.1 293.4-16 272.2-16l-96.4 0c-21.2 0-39.9 13.9-46 34.2L116.1 64zM28.7 144L51.6 452.7c2.5 33.4 30.3 59.3 63.8 59.3l217.1 0c33.5 0 61.3-25.9 63.8-59.3l22.9-308.7-32.1 0-22.7 306.4c-1.2 16.7-15.2 29.6-31.9 29.6l-217.1 0c-16.8 0-30.7-12.9-31.9-29.6L60.8 144 28.7 144z" }) }));
 };
 const KeyframeInspector = ({ selection }) => {
+    var _a;
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
+    const runtimeValues = (0, use_runtime_values_1.useRuntimeValues)((_a = track === null || track === void 0 ? void 0 : track.sequence.controls) !== null && _a !== void 0 ? _a : null);
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { clearDragOverrides, clearEffectDragOverrides, setDragOverrides, setEffectDragOverrides, setPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -81,7 +84,7 @@ const KeyframeInspector = ({ selection }) => {
         if (keyframeField.type === 'sequence') {
             const sequenceFields = (0, timeline_layout_1.getFieldsToShow)({
                 schema: track.sequence.controls.schema,
-                currentRuntimeValueDotNotation: track.sequence.controls.currentRuntimeValueDotNotation,
+                currentRuntimeValueDotNotation: runtimeValues,
                 getDragOverrides,
                 propStatuses,
                 nodePath,
@@ -148,6 +151,7 @@ const KeyframeInspector = ({ selection }) => {
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        runtimeValues,
         selection,
         track,
     ]);

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -72,7 +72,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
-    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
         clientId: previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
             ? previewServerState.clientId
             : null,

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

@@ -33,6 +33,7 @@ export type InspectorInlineActionSegment = {
 export type InspectorInlineActionProps = {
     readonly children: React.ReactNode;
     readonly disabled: boolean;
+    readonly iconContainerStyle?: React.CSSProperties;
     readonly onClick: React.MouseEventHandler<HTMLButtonElement> | null;
     readonly renderIcon?: (color: string) => React.ReactNode;
     readonly size?: 'default' | 'compact';

package/dist/components/InspectorPanel/common.js

@@ -7,6 +7,7 @@ exports.InspectorDefaultPropsWarnings = exports.InspectorInlineAction = exports.
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 const layout_1 = require("../layout");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
@@ -49,11 +50,9 @@ const INLINE_LABEL_BUTTON_MARGIN = 4;
 const inlineLabelButton = {
     alignItems: 'center',
     appearance: 'none',
-    backgroundColor: colors_1.TRANSPARENT,
     border: 'none',
     borderRadius: 4,
     boxSizing: 'border-box',
-    color: colors_1.LIGHT_TEXT,
     cursor: 'default',
     display: 'flex',
     fontFamily: 'sans-serif',
@@ -74,7 +73,6 @@ const compactInlineLabelButton = {
     height: layout_1.COMPACT_INLINE_ROW_HEIGHT,
 };
 const inlineLabelText = {
-    color: colors_1.LIGHT_TEXT,
     flex: 1,
     fontFamily: 'sans-serif',
     fontSize: 13,
@@ -117,54 +115,46 @@ const segmentedTrailingAction = {
     padding: 0,
     width: 28,
 };
-const hiddenSegmentedTrailingIcon = {
-    ...inlineLabelIcon,
-    opacity: 0,
-};
-const InspectorInlineAction = ({ children, disabled, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
-    const [hovered, setHovered] = react_1.default.useState(false);
-    const color = hovered && !disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
+const InspectorInlineAction = ({ children, disabled, iconContainerStyle, onClick, renderIcon, size = 'default', style, title, variant = { type: 'single' }, }) => {
     const isSegmented = variant.type === 'segmented';
+    // A non-clickable single action (onClick === null) never shows a hover
+    // effect. In the segmented variant, the main segment highlights whenever
+    // the group is hovered, even if it is not clickable itself.
+    const showsHover = !disabled && (onClick !== null || isSegmented);
     const buttonStyle = react_1.default.useMemo(() => ({
         ...(disabled ? inlineLabelButtonDisabled : inlineLabelButton),
-        backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-            hovered: hovered && !disabled,
-            selected: false,
+        ...(0, hoverable_1.hoverableStyle)({
+            idleBackground: colors_1.TRANSPARENT,
+            hoverBackground: showsHover
+                ? (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false })
+                : colors_1.TRANSPARENT,
+            idleColor: colors_1.LIGHT_TEXT,
+            hoverColor: showsHover ? colors_1.WHITE : colors_1.LIGHT_TEXT,
         }),
-        color,
         ...(size === 'compact' ? compactInlineLabelButton : null),
         ...(isSegmented ? segmentedMainAction : null),
         ...style,
-    }), [color, disabled, hovered, isSegmented, size, style]);
-    const textStyle = react_1.default.useMemo(() => ({
-        ...inlineLabelText,
-        color,
-    }), [color]);
-    const onPointerEnter = react_1.default.useCallback(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = react_1.default.useCallback(() => {
-        setHovered(false);
-    }, []);
-    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: inlineLabelIcon, children: renderIcon(color) })) : null, jsx_runtime_1.jsx("span", { style: textStyle, children: children })
+    }), [disabled, showsHover, isSegmented, size, style]);
+    const mainContent = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderIcon ? (jsx_runtime_1.jsx("span", { style: { ...inlineLabelIcon, ...iconContainerStyle }, children: renderIcon(colors_1.CURRENT_COLOR) })) : null, jsx_runtime_1.jsx("span", { style: inlineLabelText, children: children })
         ] }));
-    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: "__remotion-inspector-inline-action", type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, onPointerEnter: disabled || isSegmented ? undefined : onPointerEnter, onPointerLeave: isSegmented ? undefined : onPointerLeave, children: mainContent })) : (jsx_runtime_1.jsx("div", { style: buttonStyle, title: title, children: mainContent }));
+    const mainAction = onClick ? (jsx_runtime_1.jsx("button", { className: `__remotion-inspector-inline-action ${hoverable_1.HOVERABLE_CLASS_NAME}`, type: "button", disabled: disabled, style: buttonStyle, title: title, onClick: onClick, children: mainContent })) : (jsx_runtime_1.jsx("div", { className: hoverable_1.HOVERABLE_CLASS_NAME, style: buttonStyle, title: title, children: mainContent }));
     if (variant.type === 'segmented') {
-        const trailingColor = hovered && !variant.trailing.disabled ? colors_1.WHITE : colors_1.LIGHT_TEXT;
         const trailingStyle = {
             ...segmentedTrailingAction,
-            backgroundColor: variant.trailing.disabled
-                ? colors_1.TRANSPARENT
-                : (0, colors_1.getBackgroundFromHoverState)({
-                    hovered,
-                    selected: false,
-                }),
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: variant.trailing.disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: variant.trailing.disabled ? colors_1.LIGHT_TEXT : colors_1.WHITE,
+            }),
             height: size === 'compact'
                 ? layout_1.COMPACT_INLINE_ROW_HEIGHT
                 : layout_1.COMPACT_CONTROL_ROW_HEIGHT,
             opacity: variant.trailing.disabled ? 0.35 : 1,
         };
-        return (jsx_runtime_1.jsxs("div", { style: segmentedInlineAction, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [mainAction, jsx_runtime_1.jsx("button", { type: "button", disabled: variant.trailing.disabled, style: trailingStyle, title: variant.trailing.title, onClick: variant.trailing.onClick, children: jsx_runtime_1.jsx("span", { style: hovered ? inlineLabelIcon : hiddenSegmentedTrailingIcon, children: variant.trailing.renderIcon(trailingColor) }) })
+        return (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_CLASS_NAME, style: segmentedInlineAction, children: [mainAction, jsx_runtime_1.jsx("button", { type: "button", className: hoverable_1.HOVERABLE_CLASS_NAME, disabled: variant.trailing.disabled, style: trailingStyle, title: variant.trailing.title, onClick: variant.trailing.onClick, children: jsx_runtime_1.jsx("span", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineLabelIcon, children: variant.trailing.renderIcon(colors_1.CURRENT_COLOR) }) })
             ] }));
     }
     return mainAction;

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -21,7 +21,7 @@ const useCompositionActions = () => {
     const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [isAddingComposition, setIsAddingComposition] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
@@ -121,6 +121,7 @@ const useCompositionActions = () => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
                 svgImportMode: 'image',
             });
         }
@@ -145,6 +146,7 @@ const useCompositionActions = () => {
                 destinationDimensions: null,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
             });
         }
         finally {
@@ -198,6 +200,7 @@ const useCompositionActions = () => {
                 compositionId: currentCompositionId,
                 dropPosition: null,
                 from: null,
+                preferCompositionStart: null,
             });
         }
         catch (error) {

package/dist/components/InspectorSequenceSection.js

@@ -230,7 +230,7 @@ const hasSequenceControls = (sequence) => {
 exports.hasSequenceControls = hasSequenceControls;
 const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     var _a;
-    const { tree, propStatuses } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+    const { tree, propStatuses, runtimeValues } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
         includeTextContent: true,
@@ -242,9 +242,9 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls);
+    const mediaSrc = (0, timeline_asset_link_1.getTimelineAssetSrcFromSchema)(sequence.controls, runtimeValues);
     const assetSelectionInitialQuery = (0, asset_search_1.getAssetSearchQueryForComponent)(sequence.controls.componentIdentity);
     const getSourceAction = (0, react_1.useCallback)((src) => {
         var _a;
@@ -266,7 +266,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                         jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: parts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: parts.trailing })
                     ] })),
                 disabled: false,
-                onClick: null,
+                onClick: () => (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset),
                 title: linkInfo.href,
             };
         }
@@ -412,7 +412,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
     });
     const borderRadiusConversion = (0, border_radius_representation_1.getBorderRadiusConversion)(sequencePropStatuses, getDragOverrides(nodePathInfo.sequenceSubscriptionKey));
     const inlineCaptionValue = ((_a = schema.captions) === null || _a === void 0 ? void 0 : _a.type) === 'remotion-captions'
-        ? sequence.controls.currentRuntimeValueDotNotation.captions
+        ? runtimeValues.captions
         : null;
     const inlineCaptions = Array.isArray(inlineCaptionValue)
         ? inlineCaptionValue

package/dist/components/InstallPackage.js

@@ -73,7 +73,7 @@ const InstallPackageModal = ({ packageManager }) => {
         }
         setState({ type: 'installing' });
         try {
-            await (0, install_package_1.installPackages)(selectedPackages);
+            await (0, install_package_1.installPackages)(selectedPackages.map((name) => ({ name, version: null })));
             setState({ type: 'done' });
         }
         catch (err) {

package/dist/components/Menu/MenuItem.js

@@ -9,6 +9,7 @@ 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 hoverable_1 = require("../../helpers/hoverable");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
@@ -17,7 +18,6 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: colors_1.WHITE_ALPHA_80,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
@@ -28,7 +28,6 @@ const container = {
     border: 'none',
 };
 const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: true,
@@ -38,13 +37,20 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            color: hovered || selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: (0, colors_1.getBackgroundFromHoverState)({
+                    hovered: false,
+                    selected,
+                }),
+                hoverBackground: (0, colors_1.getBackgroundFromHoverState)({
+                    hovered: true,
+                    selected,
+                }),
+                idleColor: selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
+                hoverColor: colors_1.WHITE,
             }),
         };
-    }, [hovered, selected]);
+    }, [selected]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!selected || !size) {
             return null;
@@ -55,13 +61,11 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             top: size.top + size.height,
         };
     }, [selected, size]);
+    // Not for styling (which is done via CSS :hover), but for switching
+    // between menus when a menu is already open.
     const onPointerEnter = (0, react_1.useCallback)(() => {
         onItemHovered(id);
-        setHovered(true);
     }, [id, onItemHovered]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
@@ -105,7 +109,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         };
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
+            jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: `${is_menu_item_1.MENU_INITIATOR_CLASSNAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, children: itemName }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/MenuBuildIndicator.js

@@ -3,13 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../helpers/open-in-editor");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const layout_1 = require("./layout");
 const MenuCompositionName_1 = require("./MenuCompositionName");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
@@ -18,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;
 const spinner = {
@@ -28,60 +26,15 @@ const noSpinner = {
     position: 'relative',
     width: spinnerSize,
 };
-const projectNameLinkBase = {
-    color: 'inherit',
-    textDecoration: 'none',
-    cursor: 'pointer',
-    fontSize: 'inherit',
-    textUnderlineOffset: 2,
-};
-const projectNameLink = {
-    ...projectNameLinkBase,
-};
-const projectNameLinkHovered = {
-    ...projectNameLinkBase,
-    textDecoration: 'underline',
-};
 const MenuBuildIndicator = ({ mobileLayout }) => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
-    const [projectNameHovered, setProjectNameHovered] = (0, react_1.useState)(false);
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const showEditorLink = window.remotion_editorName && ctx.type === 'connected';
-    const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
-    const handleProjectNameClick = (0, react_1.useCallback)(async () => {
-        if (showEditorLink) {
-            await (0, open_in_editor_1.openInEditor)({
-                originalFileName: `${window.remotion_cwd}`,
-                originalLineNumber: 1,
-                originalColumnNumber: 1,
-                originalFunctionName: null,
-                originalScriptCode: null,
-            }, null)
-                .then(({ success }) => {
-                if (!success) {
-                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-                }
-            })
-                .catch((err) => {
-                // eslint-disable-next-line no-console
-                console.error(err);
-                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-            });
-        }
-        else if (showGitLink) {
-            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
-        }
-    }, [showEditorLink, showGitLink]);
-    const projectNameTitle = (0, react_1.useMemo)(() => {
-        if (showEditorLink) {
-            return `Open in ${window.remotion_editorName}`;
-        }
-        if (showGitLink) {
-            return `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`;
-        }
-        return undefined;
-    }, [showEditorLink, showGitLink]);
-    const isClickable = showEditorLink || showGitLink;
+    const folderLocation = (0, react_1.useMemo)(() => {
+        return {
+            source: window.remotion_cwd,
+            line: 1,
+            column: 1,
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -94,8 +47,9 @@ const MenuBuildIndicator = ({ mobileLayout }) => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }) : null, mobileLayout ? null : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), mobileLayout && isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
-                ] })) : null] }));
+                ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.js

@@ -4,13 +4,7 @@ exports.MenuCompositionName = void 0;
 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 colors_1 = require("../helpers/colors");
-const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const actions_1 = require("./RenderQueue/actions");
-const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const baseStyle = {
     color: 'inherit',
     textDecoration: 'none',
@@ -22,14 +16,6 @@ const compositionNameStyle = {
     ...baseStyle,
     cursor: 'default',
 };
-const clickableStyle = {
-    ...baseStyle,
-    cursor: 'pointer',
-};
-const clickableHoveredStyle = {
-    ...clickableStyle,
-    textDecoration: 'underline',
-};
 const slashStyle = {
     color: colors_1.LIGHT_TEXT,
     marginInline: 4,
@@ -37,12 +23,8 @@ const slashStyle = {
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a, _b;
+    var _a;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const composition = (0, react_1.useMemo)(() => {
         var _a;
         if (canvasContent === null || canvasContent.type !== 'composition') {
@@ -51,54 +33,12 @@ const MenuCompositionName = () => {
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
-    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const canOpenComposition = resolvedLocation &&
-        window.remotion_editorName &&
-        connectionStatus === 'connected';
-    const canOpenAsset = asset !== null &&
-        window.remotion_publicFolderExists !== null &&
-        connectionStatus === 'connected';
-    const canOpen = canOpenComposition || canOpenAsset;
-    const handleClick = (0, react_1.useCallback)(async () => {
-        if (!canOpen || opening) {
-            return;
-        }
-        setOpening(true);
-        try {
-            if (asset !== null && window.remotion_publicFolderExists !== null) {
-                await (0, actions_1.openInFileExplorer)({
-                    directory: `${window.remotion_publicFolderExists}/${asset}`,
-                });
-            }
-            else if (resolvedLocation) {
-                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, [asset, canOpen, opening, resolvedLocation]);
     if (!composition && asset === null) {
         return null;
     }
-    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
-    const title = composition
-        ? canOpenComposition
-            ? `Open in ${window.remotion_editorName}`
-            : composition.id
-        : canOpenAsset
-            ? `Show in ${fileManagerName}`
-            : (asset !== null && asset !== void 0 ? asset : undefined);
+    const name = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
-                    ? hovered
-                        ? clickableHoveredStyle
-                        : clickableStyle
-                    : compositionNameStyle, title: title, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: name })
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("span", { style: compositionNameStyle, children: name })
         ] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/MenuToolbar.js

@@ -3,11 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
+const search_1 = require("../icons/search");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const MenuItem_1 = require("./Menu/MenuItem");
@@ -34,6 +39,7 @@ const flex = {
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&
@@ -104,9 +110,23 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
+    const openQuickSwitcher = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'compositions',
+            invocationTimestamp: Date.now(),
+            assetSelection: null,
+            compositionSelection: null,
+        });
+    }, [setSelectedModal]);
+    const renderSearchIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(search_1.SearchIcon, { color: color, width: 18, height: 18 });
+    }, []);
+    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Quick Switcher'
+        : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
-                    jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" }), structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                     }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })

package/dist/components/ModalFooter.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const ModalFooterContainer: React.FC<{
     readonly children: React.ReactNode;
     readonly style?: React.CSSProperties;
+    readonly noBorder?: boolean;
 }>;

package/dist/components/ModalFooter.js

@@ -10,7 +10,11 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const ModalFooterContainer = ({ children, style }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, ...style, borderTop: colors_1.BORDER_BLACK }, children: children }));
+const ModalFooterContainer = ({ children, noBorder, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: {
+            ...content,
+            ...style,
+            borderTop: noBorder ? undefined : colors_1.BORDER_BLACK,
+        }, children: children }));
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -24,7 +24,7 @@ const icon = {
     width: 20,
 };
 const ModalHeader = ({ title, onClose }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);