@remotion/studio 4.0.502 → 4.0.504

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

@@ -56,7 +56,7 @@ const useSequenceInspectorSourceLocation = (sequence) => {
         if (!canOpenInEditor) {
             return;
         }
-        openInEditor();
+        openInEditor(null);
     }, [canOpenInEditor, openInEditor]);
     return {
         canOpenInEditor,
@@ -94,7 +94,7 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     const onRename = (0, react_1.useCallback)((newName) => {
         saveName(newName).catch(() => undefined);
     }, [saveName]);
-    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, children: [
+    return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { contentSized: true, padding: "4px 0", children: jsx_runtime_1.jsxs(InspectorLocationCopy_1.InspectorLocationCopy, { location: sourceLocation.validatedLocation, name: componentName !== null && componentName !== void 0 ? componentName : null, openInEditorLocation: sourceLocation.validatedLocation, children: [
                 jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename, size: "inspector" }), documentationLink ? (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, style: defaultCursor, size: "compact", title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation, renderIcon: renderReactIcon, size: "inline-action" })
             ] }) }));
 };

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

@@ -468,7 +468,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: borderRadiusConversion === null ||
+    const borderRadiusAction = borderRadiusGroup ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: borderRadiusConversion === null ||
             previewServerState.type !== 'connected', onClick: onConvertBorderRadius, title: borderRadiusConversion === null
             ? borderRadiusUsesShorthand
                 ? 'A static border radius is required to use individual corners'
@@ -477,7 +477,7 @@ const InspectorSequenceSection = ({ sequence, readOnlyStudio, validatedLocation,
                 ? 'Use individual corner radii'
                 : 'Use one border radius value', renderAction: (color) => borderRadiusUsesShorthand ? (jsx_runtime_1.jsx(fullscreen_1.FullscreenIcon, { color: color, style: borderRadiusToggleIcon })) : (jsx_runtime_1.jsx(border_radius_1.BorderRadiusIcon, { color: color, style: borderRadiusToggleIcon })) })) : null;
     const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };

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/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 pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
 const is_menu_item_1 = require("./is-menu-item");
@@ -68,12 +69,18 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             return;
         }
         onItemSelected(id);
-        window.addEventListener('pointerup', (evt) => {
-            if (!(0, is_menu_item_1.isMenuItem)(evt.target)) {
-                onItemQuit();
-            }
-        }, {
-            once: true,
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target: e.currentTarget,
+            onEnd: (reason, evt) => {
+                if ((reason === 'pointerup' || reason === 'buttons-released') &&
+                    evt) {
+                    const target = document.elementFromPoint(evt.clientX, evt.clientY);
+                    if (!target || !(0, is_menu_item_1.isMenuItem)(target)) {
+                        onItemQuit();
+                    }
+                }
+            },
         });
     }, [id, onItemQuit, onItemSelected]);
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {

package/dist/components/Menu/MenuSubItem.js

@@ -93,7 +93,9 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         const minSpaceRequired = mobileLayout
             ? styles_1.MAX_MOBILE_MENU_WIDTH
             : styles_1.MAX_MENU_WIDTH;
-        const canOpenOnRight = size.windowSize.width - size.left - size.width >= minSpaceRequired;
+        const spaceToLeft = size.left;
+        const spaceToRight = size.windowSize.width - size.left - size.width;
+        const canOpenOnRight = spaceToRight >= minSpaceRequired || spaceToRight >= spaceToLeft;
         return {
             ...styles_1.menuContainerTowardsBottom,
             ...(canOpenOnRight

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;
@@ -55,7 +56,7 @@ const MenuBuildIndicator = () => {
                 originalColumnNumber: 1,
                 originalFunctionName: null,
                 originalScriptCode: null,
-            })
+            }, null)
                 .then(({ success }) => {
                 if (!success) {
                     (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
@@ -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/MenuCompositionName.js

@@ -72,7 +72,7 @@ const MenuCompositionName = () => {
                 });
             }
             else if (resolvedLocation) {
-                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
             }
         }
         catch (err) {

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;

package/dist/components/MobilePanel.js

@@ -21,27 +21,27 @@ const overlay = {
 const panel = {
     position: 'fixed',
     top: menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT,
-    width: 'min(350px, calc(100% - 50px))',
     height: `calc(100% - ${menu_toolbar_height_1.MENU_TOOLBAR_HEIGHT}px)`,
     overflow: 'hidden',
     background: colors_1.BACKGROUND,
     boxShadow: colors_1.SHADOW_BLACK,
 };
-function MobilePanel({ children, onClose, side, }) {
+const sidebarWidth = 'min(290px, calc(100% - 50px))';
+function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onOutsideClick = react_1.default.useCallback((target) => {
         var _a;
         const element = target instanceof Element ? target : null;
-        const toggleSelector = `[data-sidebar-toggle="${side}"]`;
+        const toggleSelector = '[data-sidebar-toggle="left"]';
         if ((element === null || element === void 0 ? void 0 : element.closest(toggleSelector)) ||
             ((_a = element === null || element === void 0 ? void 0 : element.closest('button')) === null || _a === void 0 ? void 0 : _a.querySelector(toggleSelector))) {
             return;
         }
         onClose();
-    }, [onClose, side]);
+    }, [onClose]);
     return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
                     ...panel,
-                    left: side === 'left' ? 0 : undefined,
-                    right: side === 'right' ? 0 : undefined,
+                    width: sidebarWidth,
+                    left: 0,
                 }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/ModalContainer.js

@@ -34,6 +34,6 @@ const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex, panelSty
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, stackOnHighest: true, children: jsx_runtime_1.jsx("div", { style: { ...panel, ...panelStyle }, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/ModalFooter.d.ts

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

package/dist/components/ModalFooter.js

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

package/dist/components/Modals.js

@@ -6,14 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const client_id_1 = require("../helpers/client-id");
 const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
+const z_index_1 = require("../state/z-index");
 const AskAiModal_1 = require("./AskAiModal");
+const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
 const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
+const portals_1 = require("./Menu/portals");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
@@ -32,10 +36,15 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType &&
+                modalContextType.type === 'configure-default-editor' && (jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.ConfigureDefaultEditorModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }), 
+    // Modals must be above overlays opened from the editor, such as the
+    // floating sidebars used in the mobile layout.
+    (0, portals_1.getPortal)(currentZIndex + 1));
 };
 exports.Modals = Modals;

package/dist/components/MuteToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuteToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
 const ControlButton_1 = require("./ControlButton");
@@ -14,6 +15,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         });
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, {}) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, {}) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
 };
 exports.MuteToggle = MuteToggle;

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

@@ -28,5 +28,6 @@ export declare const Combobox: React.FC<{
     readonly style?: React.CSSProperties;
     readonly title: string;
     readonly size?: ComboboxSize;
+    readonly unhoveredIconColor?: string;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -61,7 +61,7 @@ const smallLabel = {
     fontSize: 11,
     lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', }) => {
+const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -206,7 +206,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, size: control
             ? compactLabel
             : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { small: controlSize === 'small' })
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

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

@@ -60,6 +60,10 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;
+    readonly formatterStyle?: React.CSSProperties | undefined;
+    readonly formatterSubtitle?: ((str: string | number) => string) | undefined;
+    readonly formatterSubtitleStyle?: React.CSSProperties | undefined;
+    readonly buttonStyle?: React.CSSProperties | undefined;
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const noop_1 = require("../../helpers/noop");
+const pointer_session_1 = require("../../helpers/pointer-session");
 const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock");
 const z_index_1 = require("../../state/z-index");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
@@ -294,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), 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, 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);
@@ -313,7 +314,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         WebkitUserSelect: 'none',
         fontSize: small ? 12 : 14,
         fontVariantNumeric: 'tabular-nums',
-    }), [dragging, small]);
+        ...formatterStyle,
+    }), [dragging, formatterStyle, small]);
     const onFocus = (0, react_1.useCallback)(() => {
         if (!small || pointerDownRef.current) {
             return;
@@ -409,12 +411,12 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     };
     const onPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        pointerDownRef.current = true;
         const target = e.currentTarget;
         const { pageX, pageY, button } = e;
         if (button !== 0) {
             return;
         }
+        pointerDownRef.current = true;
         let lastDragValue = null;
         const moveListener = (ev) => {
             const xDistance = ev.pageX - pageX;
@@ -446,34 +448,23 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             lastDragValue = nextValue;
             onValueChange(nextValue);
         };
-        window.addEventListener('mousemove', moveListener);
-        const endDrag = (commit) => {
-            window.removeEventListener('mousemove', moveListener);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-            window.removeEventListener('blur', onWindowBlur);
-            pointerDownRef.current = false;
-            setDragging(false);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            if (commit && lastDragValue !== null && onValueChangeEnd) {
-                onValueChangeEnd(lastDragValue);
-            }
-            setTimeout(() => {
-                (0, input_dragger_click_lock_1.setClickLock)(false);
-            }, 2);
-        };
-        const onPointerUp = () => {
-            endDrag(true);
-        };
-        const onPointerCancel = () => {
-            endDrag(false);
-        };
-        const onWindowBlur = () => {
-            endDrag(false);
-        };
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
-        window.addEventListener('blur', onWindowBlur);
+        (0, pointer_session_1.startPointerSession)({
+            event: e.nativeEvent,
+            target,
+            onMove: moveListener,
+            onEnd: (reason) => {
+                pointerDownRef.current = false;
+                setDragging(false);
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                const commit = reason === 'pointerup' || reason === 'buttons-released';
+                if (commit && lastDragValue !== null && onValueChangeEnd) {
+                    onValueChangeEnd(lastDragValue);
+                }
+                setTimeout(() => {
+                    (0, input_dragger_click_lock_1.setClickLock)(false);
+                }, 2);
+            },
+        });
     }, [
         _step,
         _min,
@@ -494,6 +485,9 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     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("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
+            ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }
+            : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }), formatterSubtitle ? (jsx_runtime_1.jsx("span", { style: formatterSubtitleStyle, children: formatterSubtitle(value) })) : null] }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/Notifications/NotificationCenter.js

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const portals_1 = require("../Menu/portals");
 const Notification_1 = require("./Notification");
 const container = {
     position: 'absolute',
@@ -28,6 +34,7 @@ const showNotification = (content, durationInMs) => {
 exports.showNotification = showNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onRemove = (0, react_1.useCallback)((id) => {
         setNotifications((not) => {
             return not.filter((n) => n.id !== id);
@@ -60,8 +67,11 @@ const NotificationCenter = () => {
             addNotification,
         };
     }, [addNotification]);
-    return (jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
             return (jsx_runtime_1.jsx(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
-        }) }));
+        }) }), 
+    // Notifications must be above overlays opened from the editor, such as the
+    // floating sidebars used in the mobile layout.
+    (0, portals_1.getPortal)(currentZIndex + 1));
 };
 exports.NotificationCenter = NotificationCenter;

package/dist/components/OutlineToggle.js

@@ -11,10 +11,18 @@ const OutlineToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
-    const color = editorShowOutlines ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => {
+            const iconColor = editorShowOutlines ? colors_1.BLUE : color;
+            return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+                    jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
+                        [16, 16],
+                        [400, 16],
+                        [16, 400],
+                        [400, 400],
+                    ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
+        } }));
 };
 exports.OutlineToggle = OutlineToggle;