@remotion/studio 4.0.503 → 4.0.504

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) {
@@ -468,7 +456,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         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: [
+                    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/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/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,

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

@@ -6,6 +6,8 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const effects_1 = require("../icons/effects");
+const external_link_1 = require("../icons/external-link");
 const modals_1 = require("../state/modals");
 const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
@@ -16,13 +18,54 @@ const DismissableModal_1 = require("./NewComposition/DismissableModal");
 const RemInput_1 = require("./NewComposition/RemInput");
 const shared_1 = require("./QuickSwitcher/shared");
 const container = {
-    width: 500,
+    width: 400,
+};
+const panelStyle = {
+    borderRadius: 6,
+    overflow: 'hidden',
 };
 const content = {
     padding: '12px 16px 10px',
 };
 const inputStyle = {
     width: '100%',
+    borderRadius: 4,
+};
+const aboutEffectsRow = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginBottom: 8,
+};
+const aboutEffectsLink = {
+    alignItems: 'center',
+    color: colors_1.LIGHT_TEXT,
+    cursor: 'default',
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    gap: 4,
+    lineHeight: '14px',
+    minWidth: 0,
+    textDecoration: 'none',
+};
+const aboutEffectsLinkHovered = {
+    ...aboutEffectsLink,
+    color: colors_1.WHITE,
+};
+const aboutEffectsLabel = {
+    color: 'inherit',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '14px',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const aboutEffectsIcon = {
+    flexShrink: 0,
+    height: 12,
+    width: 12,
 };
 const resultList = {
     height: 320,
@@ -35,15 +78,28 @@ const noResults = {
     padding: '12px 16px',
 };
 const resultContainer = {
-    cursor: 'pointer',
+    cursor: 'default',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: '7px 16px',
+    paddingLeft: 16,
+    paddingRight: 16,
+    marginBottom: 1,
+    marginLeft: 4,
+    marginRight: 4,
+    borderRadius: 4,
+};
+const iconStyle = {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
 };
 const labelContainer = {
     flex: 1,
     minWidth: 0,
+    overflow: 'hidden',
+    paddingTop: 5,
+    paddingBottom: 5,
 };
 const label = {
     fontSize: shared_1.QUICK_SWITCHER_RESULT_LABEL_FONT_SIZE,
@@ -63,7 +119,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
     const style = (0, react_1.useMemo)(() => {
         return {
             ...resultContainer,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected }),
+            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
         };
     }, [hovered, selected]);
     const labelStyle = (0, react_1.useMemo)(() => {
@@ -95,11 +151,12 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
         ];
     }, [item]);
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: null, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
-                jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
+                jsx_runtime_1.jsx(effects_1.EffectsIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
             ] }) }));
 };
 const EffectPickerContent = ({ state }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [aboutEffectsHovered, setAboutEffectsHovered] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)('');
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
     const inputRef = (0, react_1.useRef)(null);
@@ -168,12 +225,16 @@ const EffectPickerContent = ({ state }) => {
         setSelectedIndex(0);
     }, []);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: inputStyle, autoFocus: true, status: "ok", value: query, onChange: onTextChange, placeholder: "Search effects...", rightAlign: false }) }), jsx_runtime_1.jsx("div", { style: resultList, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: results.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No effects found" })) : (results.map((item, i) => {
+            jsx_runtime_1.jsxs("div", { style: content, children: [
+                    jsx_runtime_1.jsx("div", { style: aboutEffectsRow, children: jsx_runtime_1.jsxs("a", { href: "https://remotion.dev/effects", target: "_blank", rel: "noopener noreferrer", style: aboutEffectsHovered ? aboutEffectsLinkHovered : aboutEffectsLink, onMouseEnter: () => setAboutEffectsHovered(true), onMouseLeave: () => setAboutEffectsHovered(false), children: [
+                                jsx_runtime_1.jsx("span", { style: aboutEffectsLabel, children: "About effects" }), jsx_runtime_1.jsx(external_link_1.ExternalLinkIcon, { "aria-hidden": "true", color: aboutEffectsHovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: aboutEffectsIcon })
+                            ] }) }), jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: inputStyle, autoFocus: true, status: "ok", value: query, onChange: onTextChange, placeholder: "Search effects...", rightAlign: false })
+                ] }), jsx_runtime_1.jsx("div", { style: resultList, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: results.length === 0 ? (jsx_runtime_1.jsx("div", { style: noResults, children: "No effects found" })) : (results.map((item, i) => {
                     return (jsx_runtime_1.jsx(EffectPickerResult, { item: item, selected: selectedIndexRounded === i, onSelected: selectItem }, item.id));
                 })) })
         ] }));
 };
 const EffectPickerModal = ({ state }) => {
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(EffectPickerContent, { state: state }) }));
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { panelStyle: panelStyle, children: jsx_runtime_1.jsx(EffectPickerContent, { state: state }) }));
 };
 exports.EffectPickerModal = EffectPickerModal;

package/dist/components/FullscreenToggle.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
-const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const fullscreen_1 = require("../icons/fullscreen");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -45,6 +44,6 @@ const FullScreenToggle = ({ hidden }) => {
             f.unregister();
         };
     }, [keybindings, onClick]);
-    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: colors_1.WHITE_HEX, style: { width: 18, height: 18 } }) }));
+    return hidden ? (jsx_runtime_1.jsx("button", { id: "fullscreen-toggle", type: "button", style: { display: 'none' }, onClick: onClick })) : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { id: "fullscreen-toggle", title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: { width: 18, height: 18 } })) }));
 };
 exports.FullScreenToggle = FullScreenToggle;

package/dist/components/InitialCompositionLoader.js

@@ -4,11 +4,9 @@ exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
-const mobile_layout_1 = require("../helpers/mobile-layout");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
-const sidebar_1 = require("../state/sidebar");
 const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
 const use_select_asset_1 = require("./use-select-asset");
@@ -17,8 +15,6 @@ const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
-    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     return (0, react_1.useCallback)((c, push, frame = null) => {
         var _a;
         if (push) {
@@ -42,17 +38,8 @@ const useSelectComposition = () => {
                 (0, persist_open_folders_1.persistExpandedFolders)('compositions', newState);
                 return newState;
             });
-            if (isMobileLayout) {
-                setSidebarCollapsedState({ left: 'collapsed', right: 'collapsed' });
-            }
         }
-    }, [
-        isMobileLayout,
-        setCanvasContent,
-        setCompositionFoldersExpanded,
-        setFrame,
-        setSidebarCollapsedState,
-    ]);
+    }, [setCanvasContent, setCompositionFoldersExpanded, setFrame]);
 };
 exports.useSelectComposition = useSelectComposition;
 const InitialCompositionLoader = () => {

package/dist/components/InlineAction.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
 export type RenderInlineAction = (color: string) => React.ReactNode;
-export type InlineActionProps = {
+export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'style'> & {
     readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
-    readonly disabled?: boolean;
     readonly renderAction: RenderInlineAction;
-    readonly title?: string;
     readonly unhoveredColor?: string;
     readonly variant: 'compact' | null;
+    readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, ...buttonProps }) => {
+    var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -29,8 +30,9 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             borderRadius: 3,
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
+            ...customStyle,
         };
-    }, [disabled, hovered, variant]);
-    return (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    }, [customStyle, disabled, hovered, variant]);
+    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InspectorPanel/CompositionMetadata.js

@@ -37,16 +37,17 @@ const computedValueStyle = {
     fontFamily: 'sans-serif',
     fontSize: 12,
     fontStyle: 'italic',
-    lineHeight: 1.5,
+    lineHeight: '20px',
 };
 const dimensionsControls = {
     alignItems: 'center',
+    color: 'inherit',
     display: 'flex',
     fontFamily: 'sans-serif',
-    fontSize: 12,
+    fontSize: 13,
     gap: 4,
     justifyContent: 'flex-end',
-    lineHeight: '16px',
+    lineHeight: '20px',
     minWidth: 0,
 };
 const presetButtonIcon = {
@@ -69,14 +70,14 @@ const metadataLabelControls = {
     fontFamily: 'sans-serif',
     fontSize: 13,
     gap: 2,
-    lineHeight: '18px',
+    lineHeight: '20px',
     minWidth: 0,
 };
 const metadataLabelText = {
     color: 'inherit',
     fontFamily: 'sans-serif',
     fontSize: 13,
-    lineHeight: '18px',
+    lineHeight: '20px',
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -287,7 +288,7 @@ const CompositionMetadata = ({ compositionId, disabled, stack }) => {
     return (jsx_runtime_1.jsxs("div", { style: compositionMetadataContainer, children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                         jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Dimensions" }), disabled || widthIsComputed || heightIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.width !== undefined ||
                                 pendingValues.height !== undefined, title: "Choose dimension preset", values: dimensionPresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsxs("div", { style: dimensionsControls, children: [
-                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
+                        jsx_runtime_1.jsx(CompositionMetadataValue, { computed: widthIsComputed, disabled: disabled, field: "width", onSave: saveMetadata, pendingValue: (_a = pendingValues.width) !== null && _a !== void 0 ? _a : null, value: video.width }), disabled ? '\u00A0' : null, jsx_runtime_1.jsx(CompositionMetadataValue, { computed: heightIsComputed, disabled: disabled, field: "height", onSave: saveMetadata, pendingValue: (_b = pendingValues.height) !== null && _b !== void 0 ? _b : null, value: video.height })
                     ] }) }), isStill ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: (hovered) => (jsx_runtime_1.jsxs("div", { style: metadataLabelControls, children: [
                                 jsx_runtime_1.jsx("span", { style: metadataLabelText, children: "Frame rate" }), disabled || fpsIsComputed ? null : (jsx_runtime_1.jsx(PresetDropdown, { disabled: pendingValues.fps !== undefined, title: "Choose frame rate preset", values: frameRatePresetValues, visible: hovered }))] })), children: jsx_runtime_1.jsx("div", { style: dimensionsControls, children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: fpsIsComputed, disabled: disabled, field: "fps", onSave: saveMetadata, pendingValue: (_c = pendingValues.fps) !== null && _c !== void 0 ? _c : null, value: video.fps }) }) }), jsx_runtime_1.jsx(common_1.InspectorDetailRow, { label: "Duration", children: jsx_runtime_1.jsx(CompositionMetadataValue, { computed: durationIsComputed, disabled: disabled, field: "durationInFrames", onSave: saveMetadata, pendingValue: (_d = pendingValues.durationInFrames) !== null && _d !== void 0 ? _d : null, value: video.durationInFrames }) })
                 ] }))] }));

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -12,6 +12,7 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const call_delete_keyframe_1 = require("../Timeline/call-delete-keyframe");
 const call_move_keyframe_1 = require("../Timeline/call-move-keyframe");
 const get_easing_selection_after_keyframe_delete_1 = require("../Timeline/get-easing-selection-after-keyframe-delete");
+const imperative_state_1 = require("../Timeline/imperative-state");
 const parse_keyframe_field_from_node_path_1 = require("../Timeline/parse-keyframe-field-from-node-path");
 const TimelineEffectPropItem_1 = require("../Timeline/TimelineEffectPropItem");
 const TimelineSelection_1 = require("../Timeline/TimelineSelection");
@@ -54,7 +55,6 @@ const TrashIcon = ({ color }) => {
 const KeyframeInspector = ({ selection }) => {
     const track = (0, use_track_for_selection_1.useTrackForSelection)(selection);
     const videoConfig = (0, remotion_1.useVideoConfig)();
-    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { clearDragOverrides, clearEffectDragOverrides, setDragOverrides, setEffectDragOverrides, setPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -277,7 +277,7 @@ const KeyframeInspector = ({ selection }) => {
                 keyframeDisplayOffset: details.keyframeDisplayOffset,
                 nodePathInfo: selection.nodePathInfo,
                 propStatus: details.propStatus,
-                timelinePosition,
+                timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
             })
             : null;
         if (easingSelection !== null) {
@@ -315,7 +315,6 @@ const KeyframeInspector = ({ selection }) => {
         selectItems,
         selection.nodePathInfo,
         setPropStatuses,
-        timelinePosition,
     ]);
     if (details === null || track === null) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Keyframe unavailable" });

package/dist/components/InspectorPanel/styles.js

@@ -162,7 +162,9 @@ exports.detailRow = {
 };
 exports.detailLabel = {
     color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
     fontSize: 13,
+    lineHeight: '20px',
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -170,8 +172,10 @@ exports.detailLabel = {
 };
 exports.detailValue = {
     color: colors_1.WHITE,
+    fontFamily: 'sans-serif',
     fontSize: 13,
     fontVariantNumeric: 'tabular-nums',
+    lineHeight: '20px',
     minWidth: 0,
     textAlign: 'right',
     wordBreak: 'break-word',

package/dist/components/LoopToggle.js

@@ -18,6 +18,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     const onClick = (0, react_1.useCallback)(() => {
         (0, exports.toggleLoop)(setLoop);
     }, [setLoop]);
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : colors_1.WHITE, d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: jsx_runtime_1.jsx("path", { fill: loop ? colors_1.BLUE : color, d: "M384 150.3V41.6l64 53.3v2l-64 53.3zM352 23.5V80H192C86 80 0 166 0 272c0 8.8 7.2 16 16 16s16-7.2 16-16c0-88.4 71.6-160 160-160h160v56.5c0 13 10.5 23.5 23.5 23.5 5.5 0 10.8-1.9 15-5.4l78-65c7.3-6.1 11.5-15.1 11.5-24.6v-2c0-9.5-4.2-18.5-11.5-24.6l-78-65c-4.2-3.5-9.5-5.4-15-5.4-13 0-23.5 10.5-23.5 23.5zM128 415.9v54.5l-64-53.3v-2l64-53.3v54.1zM160 400v-56.5c0-13-10.5-23.5-23.5-23.5-5.5 0-10.8 1.9-15 5.4l-78 65C36.2 396.5 32 405.5 32 415v2c0 9.5 4.2 18.5 11.5 24.6l78 65c4.2 3.5 9.5 5.4 15 5.4 13 0 23.5-10.5 23.5-23.5V432h160c106 0 192-86 192-192 0-8.8-7.2-16-16-16s-16 7.2-16 16c0 88.4-71.6 160-160 160H160z" }) })) }));
 };
 exports.LoopToggle = LoopToggle;

package/dist/components/MenuBuildIndicator.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const MenuBuildIndicator: React.FC;
+export declare const MenuBuildIndicator: React.FC<{
+    readonly mobileLayout: boolean;
+}>;

package/dist/components/MenuBuildIndicator.js

@@ -4,6 +4,7 @@ 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 layout_1 = require("./layout");
@@ -41,7 +42,7 @@ const projectNameLinkHovered = {
     ...projectNameLinkBase,
     textDecoration: 'underline',
 };
-const MenuBuildIndicator = () => {
+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;
@@ -93,7 +94,8 @@ const MenuBuildIndicator = () => {
             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: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), 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, {})
-        ] }));
+    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: [
+                    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] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuToolbar.js

@@ -108,7 +108,7 @@ const MenuToolbar = ({ readOnlyStudio }) => {
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
                     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 ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), 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" })
+                    }), 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/MobilePanel.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export default function MobilePanel({ children, onClose, side }: {
+export default function MobilePanel({ children, onClose }: {
     children: React.ReactNode;
     onClose: () => void;
-    side: 'left' | 'right';
 }): React.ReactPortal;