@remotion/studio 4.0.504 → 4.0.505

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 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, 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/InspectorSequenceSection.js

@@ -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,
             };
         }

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,
@@ -28,60 +25,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 +46,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.ModalsContext);
     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/NewComposition/InputDragger.d.ts

@@ -66,6 +66,7 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly buttonStyle?: React.CSSProperties | undefined;
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
+    readonly allowStepMismatch?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -295,7 +295,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -307,6 +307,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             step: _step,
         });
     }, [_min, _step, snapToStep]);
+    const validationStep = allowStepMismatch ? 'any' : deriveStep;
     const span = (0, react_1.useMemo)(() => ({
         color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
@@ -366,7 +367,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         const validation = (0, exports.validateInputDraggerValue)({
             max: _max,
             min: _min,
-            step: deriveStep,
+            step: validationStep,
             value: newValue,
         });
         if (validation.valid) {
@@ -378,7 +379,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [_max, _min, deriveStep, onEscape, onValueChangeEnd]);
+    }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Enter') {
@@ -483,7 +484,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
     }
     return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
             ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }

package/dist/components/NewComposition/MenuContent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ComboboxValue } from './ComboBox';
 export declare const MenuContent: React.FC<{
-    readonly values: ComboboxValue[];
+    readonly values: readonly ComboboxValue[];
     readonly onHide: () => void;
     readonly onNextMenu: () => void;
     readonly onPreviousMenu: () => void;

package/dist/components/NewComposition/menu-typeahead.d.ts

@@ -1,5 +1,5 @@
 import type { ComboboxValue } from './ComboBox';
 export declare const findTypeaheadMenuItem: ({ query, values, }: {
     query: string;
-    values: ComboboxValue[];
+    values: readonly ComboboxValue[];
 }) => string | null;

package/dist/components/PlayPause.js

@@ -30,7 +30,7 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -194,6 +194,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
 exports.PlayPause = PlayPause;

package/dist/components/PlaybackRateSelector.js

@@ -7,9 +7,9 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const Checkmark_1 = require("../icons/Checkmark");
+const playback_rate_1 = require("../icons/playback-rate");
 const playbackrate_1 = require("../state/playbackrate");
-const ControlButton_1 = require("./ControlButton");
-const ComboBox_1 = require("./NewComposition/ComboBox");
+const TimelineCombobox_1 = require("./TimelineCombobox");
 const commonPlaybackRates = [
     -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 1.5, 2, 4,
 ];
@@ -17,7 +17,6 @@ const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
 const accessibilityLabel = 'Change the playback rate';
-const comboStyle = { width: 64 };
 const usePlaybackRateMenuItems = ({ playbackRate, setPlaybackRate, }) => {
     const items = (0, react_1.useMemo)(() => {
         const divider = {
@@ -58,14 +57,9 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate, }) => {
         playbackRate,
         setPlaybackRate,
     });
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            padding: ControlButton_1.CONTROL_BUTTON_PADDING - 2,
-        };
-    }, []);
     if (isStill || canvasContent === null || canvasContent.type === 'asset') {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: style, "aria-label": accessibilityLabel, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { size: "compact", title: accessibilityLabel, style: comboStyle, selectedId: selectedId, values: items, unhoveredIconColor: colors_1.WHITE_ALPHA_80 }) }));
+    return (jsx_runtime_1.jsx(TimelineCombobox_1.TimelineCombobox, { title: accessibilityLabel, labelWidth: 30, selectedId: selectedId, values: items, renderLeftItem: (color) => (jsx_runtime_1.jsx(playback_rate_1.PlaybackRateIcon, { color: color, playbackRate: playbackRate })), unhoveredIconColor: colors_1.WHITE_ALPHA_80 }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/components/PreviewToolbar.js

@@ -57,7 +57,8 @@ const padding = {
     width: timeline_layout_1.TIMELINE_PADDING,
 };
 const toolbarControl = {
-    display: 'contents',
+    display: 'flex',
+    flexShrink: 0,
 };
 const PreviewToolbarControl = ({ children }) => {
     const onPointerDown = (0, react_1.useCallback)((e) => {
@@ -79,14 +80,16 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const playPause = (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted, hideNavigationControls: isMobileLayout }) }));
     return (jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
             jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: padding }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })
+                        ] })) : null, isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PreviewToolbarOverflowButton_1.PreviewToolbarOverflowButton, { showFullscreen: Boolean(canvasContent && isFullscreenSupported), showPlaybackRate: isVideoComposition, showLoop: isVideoComposition, showCompositionControls: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition', playbackRate: playbackRate, setPlaybackRate: setPlaybackRate, loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
-                        ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) })), !isMobileLayout && (isStill || isVideoComposition) ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        ] })) : null, isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) })) : null] }), jsx_runtime_1.jsx(layout_1.Flex, {}), isVideoComposition && isMobileLayout ? (jsx_runtime_1.jsx("div", { style: centeredPlayButton, children: playPause })) : null, isVideoComposition && !isMobileLayout ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), playPause, jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.75 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) })), isMobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), isMobileLayout ? null : (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })), readOnlyStudio || isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.25 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, {}) })
                         ] }))] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, { hidden: isMobileLayout }) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
-                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact" }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
+                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio, size: "compact", narrow: isMobileLayout }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                 ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {})
         ] }));
 };

package/dist/components/RenderButton.d.ts

@@ -3,4 +3,5 @@ export type RenderType = 'server-render' | 'client-render' | 'render-command';
 export declare const RenderButton: React.FC<{
     readonly readOnlyStudio: boolean;
     readonly size?: 'default' | 'compact';
+    readonly narrow?: boolean;
 }>;