@remotion/studio 4.0.474 → 4.0.476

package/dist/components/Canvas.js

@@ -22,6 +22,7 @@ const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
+const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -562,6 +563,11 @@ const Canvas = ({ canvasContent, size }) => {
             !isDragEventInsideCanvas(event)) {
             return;
         }
+        if (event.dataTransfer &&
+            (0, effect_drag_and_drop_1.getEffectDragData)(event.dataTransfer) !== null) {
+            event.preventDefault();
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         setIsAddingAsset(true);

package/dist/components/ColorPicker/ColorPicker.js

@@ -8,7 +8,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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 z_index_1 = require("../../state/z-index");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
@@ -18,23 +17,13 @@ const ColorPickerPopup_1 = require("./ColorPickerPopup");
 // Class name used to opt the swatch button out of the global
 // `button:focus` inset box-shadow defined in inject-css.ts.
 const SWATCH_CLASSNAME = '__remotion_color_swatch';
-const getSwatchBorderColor = ({ status, isFocused, isHovered, }) => {
-    if (status === 'warning') {
-        return colors_1.WARNING_COLOR;
-    }
-    if (status === 'error') {
-        return colors_1.FAIL_COLOR;
-    }
-    return isFocused || isHovered
-        ? colors_1.INPUT_BORDER_COLOR_HOVERED
-        : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
-};
 const swatchBaseStyle = {
     position: 'relative',
     display: 'inline-block',
     overflow: 'hidden',
     padding: 0,
     margin: 0,
+    border: 'none',
     cursor: 'pointer',
     backgroundColor: checker_1.CHECKER_BACKGROUND_COLOR,
     backgroundImage: checker_1.CHECKER_BACKGROUND_IMAGE,
@@ -47,10 +36,8 @@ const fillStyle = {
     inset: 0,
     display: 'block',
 };
-const ColorPicker = ({ value, onChange, onChangeComplete, status, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
+const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
     const [opened, setOpened] = (0, react_1.useState)(false);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
     const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
     const size = player_1.PlayerInternals.useElementSize(triggerRef, {
@@ -73,25 +60,11 @@ const ColorPicker = ({ value, onChange, onChangeComplete, status, disabled, widt
             width,
             height,
             borderRadius,
-            borderColor: getSwatchBorderColor({ status, isFocused, isHovered }),
             cursor: disabled ? 'not-allowed' : 'pointer',
             opacity: disabled ? 0.5 : 1,
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
         };
-    }, [
-        borderRadius,
-        customStyle,
-        disabled,
-        height,
-        isFocused,
-        isHovered,
-        status,
-        width,
-    ]);
-    const onMouseEnter = (0, react_1.useCallback)(() => setIsHovered(true), []);
-    const onMouseLeave = (0, react_1.useCallback)(() => setIsHovered(false), []);
-    const onFocus = (0, react_1.useCallback)(() => setIsFocused(true), []);
-    const onBlur = (0, react_1.useCallback)(() => setIsFocused(false), []);
+    }, [borderRadius, customStyle, disabled, height, width]);
     // Toggle on pointerdown (matches Combobox) so the state flips before the
     // HigherZIndex outside-click detection runs on pointerup. If we toggled in
     // onClick, the popup would close in pointerup and immediately re-open in
@@ -169,7 +142,7 @@ const ColorPicker = ({ value, onChange, onChangeComplete, status, disabled, widt
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
                     .filter(Boolean)
-                    .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), portalStyle
+                    .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, 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(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/ColorPicker/ColorPickerPopup.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 export declare const POPUP_WIDTH = 240;
+export declare const parseEyeDropperColor: (pickedColor: string) => {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
 export type ChannelKey = 'r' | 'g' | 'b' | 'a-percent';
 export declare const ColorPickerPopup: React.FC<{
     readonly value: string;

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPopup = exports.POPUP_WIDTH = void 0;
+exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.POPUP_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
@@ -100,6 +100,14 @@ const eyedropperButtonStyle = {
     flex: '0 0 auto',
 };
 const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const parseEyeDropperColor = (pickedColor) => {
+    const parsed = (0, color_conversion_1.parseAnyColor)(pickedColor);
+    return {
+        ...parsed,
+        a: 255,
+    };
+};
+exports.parseEyeDropperColor = parseEyeDropperColor;
 const ChannelInput = ({ label, channel, value, min, max, onCommit, }) => {
     const [draft, setDraft] = (0, react_1.useState)(String(Math.round(value)));
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -243,10 +251,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
         dropper
             .open()
             .then((result) => {
-            const parsed = (0, color_conversion_1.parseAnyColor)(result.sRGBHex);
-            // `EyeDropper` always returns full opacity; preserve the user's
-            // previously chosen alpha so opening it doesn't drop transparency.
-            parsed.a = rgba.a;
+            const parsed = (0, exports.parseEyeDropperColor)(result.sRGBHex);
             const newHsva = (0, color_conversion_1.rgbaToHsva)(parsed);
             if (newHsva.s === 0) {
                 newHsva.h = hsva.h;
@@ -256,7 +261,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             .catch(() => {
             // Aborted; ignore.
         });
-    }, [emit, hsva.h, rgba.a]);
+    }, [emit, hsva.h]);
     const previewFill = (0, react_1.useMemo)(() => {
         return {
             ...previewSwatchFillBase,

package/dist/components/CompositionSelectorItem.js

@@ -101,8 +101,8 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
             toggleFolder(item.folderName, item.parentName);
         }
     }, [item, selectComposition, toggleFolder]);
-    const onKeyPress = (0, react_1.useCallback)((evt) => {
-        if (evt.key === 'Enter') {
+    const onKeyDown = (0, react_1.useCallback)((evt) => {
+        if (evt.key === 'Enter' || evt.key === ' ') {
             onClick(evt);
         }
     }, [onClick]);
@@ -132,14 +132,14 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
                             ] }) }) }), item.expanded
                     ? item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
                     })
                     : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyPress: onKeyPress, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, type: "button", title: item.composition.id, className: "__remotion-composition", "data-compname": item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? (jsx_runtime_1.jsx(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : (jsx_runtime_1.jsx(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/Editor.js

@@ -44,6 +44,7 @@ const canvas_ref_1 = require("../state/canvas-ref");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
+const canvas_capture_enabled_1 = require("./canvas-capture-enabled");
 const EditorContent_1 = require("./EditorContent");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
@@ -51,6 +52,7 @@ const Modals_1 = require("./Modals");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const RenderErrorContext_1 = require("./RenderErrorContext");
 const SequencePropsSubscriptionProvider_1 = require("./SequencePropsSubscriptionProvider");
+const StudioCanvasCapture_1 = require("./StudioCanvasCapture");
 const TopPanel_1 = require("./TopPanel");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -99,7 +101,7 @@ const Editor = ({ Root, readOnlyStudio }) => {
     }, []);
     const compositionRenderErrorContextValue = (0, react_1.useMemo)(() => ({ setError: setRenderError, clearError }), [clearError]);
     const renderErrorContextValue = (0, react_1.useMemo)(() => ({ error: renderError }), [renderError]);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
+    const editor = (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(timeline_zoom_1.TimelineZoomContext, { children: jsx_runtime_1.jsxs(SequencePropsSubscriptionProvider_1.SequencePropsSubscriptionProvider, { children: [
                     jsx_runtime_1.jsxs(remotion_1.Internals.CurrentScaleContext.Provider, { value: value, children: [
                             jsx_runtime_1.jsx(ForceSpecificCursor_1.ForceSpecificCursor, {}), jsx_runtime_1.jsx(scale_lock_1.ScaleLockProvider, { children: jsx_runtime_1.jsxs("div", { style: background, children: [
                                         jsx_runtime_1.jsx(remotion_1.Internals.CompositionRenderErrorContext.Provider, { value: compositionRenderErrorContextValue, children: canvasMounted ? jsx_runtime_1.jsx(MemoRoot, {}) : null }), jsx_runtime_1.jsxs(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [
@@ -108,5 +110,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
+    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 2, children: editor })) : (editor);
 };
 exports.Editor = Editor;

package/dist/components/GlobalKeybindings.js

@@ -40,6 +40,17 @@ const GlobalKeybindings = () => {
             commandCtrlKey: true,
             preventDefault: true,
         });
+        const cmdSKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 's',
+            callback: () => {
+                (0, NotificationCenter_1.showNotification)('Remotion saves automatically', 2000);
+            },
+            triggerIfInputFieldFocused: true,
+            keepRegisteredWhenNotHighestContext: false,
+            commandCtrlKey: true,
+            preventDefault: true,
+        });
         const cmdIKey = process.env.ASK_AI_ENABLED
             ? keybindings.registerKeybinding({
                 event: 'keydown',
@@ -103,6 +114,7 @@ const GlobalKeybindings = () => {
             cKey.unregister();
             questionMark.unregister();
             cmdKKey.unregister();
+            cmdSKey.unregister();
             cmdIKey === null || cmdIKey === void 0 ? void 0 : cmdIKey.unregister();
             pageDown.unregister();
             pageUp.unregister();

package/dist/components/KeyboardShortcutsExplainer.js

@@ -138,6 +138,30 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "Y" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Redo" })
+                                ] }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "Interactivity" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "Shift" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select range / axis lock drag" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle selection" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "A" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Select sequence rows" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "D" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Duplicate sequences" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "C" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Copy effects / values" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "V" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Paste effects / values" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsxs("div", { style: left, children: [
+                                            jsx_runtime_1.jsx("kbd", { style: key, children: "Del" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "\u232B" })
+                                        ] }), jsx_runtime_1.jsx("div", { style: right, children: "Delete / reset selection" })
                                 ] }), process.env.ASK_AI_ENABLED && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsx("div", { style: title, children: "AI" }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                             jsx_runtime_1.jsxs("div", { style: left, children: [

package/dist/components/Modals.js

@@ -22,6 +22,7 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const EasingEditorModal_1 = require("./Timeline/EasingEditorModal");
 const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
@@ -29,7 +30,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     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 === '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 === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [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 === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'easing-editor' && (jsx_runtime_1.jsx(EasingEditorModal_1.EasingEditorModal, { state: modalContextType })), 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 })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/ComboBox.js

@@ -36,6 +36,7 @@ const label = {
     textOverflow: 'ellipsis',
     fontSize: 14,
     textAlign: 'left',
+    whiteSpace: 'nowrap',
 };
 const smallLabel = {
     ...label,

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

@@ -1,6 +1,11 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
+    readonly min: string | number | undefined;
+    readonly snapToStep: boolean;
+    readonly step: string | number | undefined;
+}) => string | number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;
@@ -10,4 +15,5 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
+    readonly dragDecimalPlaces?: number | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = void 0;
+exports.InputDragger = exports.deriveInputDraggerStep = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -46,7 +46,25 @@ const RemInput_1 = require("./RemInput");
 const isInt = (num) => {
     return num % 1 === 0;
 };
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, ...props }, ref) => {
+const roundToDecimalPlaces = (val, decimalPlaces) => {
+    const factor = 10 ** decimalPlaces;
+    const rounded = Math.round(val * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+const deriveInputDraggerStep = ({ min, snapToStep, step, }) => {
+    if (!snapToStep) {
+        return 'any';
+    }
+    if (step !== undefined) {
+        return step;
+    }
+    if (typeof min === 'number' && isInt(min)) {
+        return 1;
+    }
+    return 0.0001;
+};
+exports.deriveInputDraggerStep = deriveInputDraggerStep;
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, ...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);
@@ -142,7 +160,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
             const newValue = Math.min(max, Math.max(min, Number(value) + diff));
-            const nextValue = snapToStep ? roundToStep(newValue, step) : newValue;
+            const nextValue = snapToStep
+                ? roundToStep(newValue, step)
+                : dragDecimalPlaces === undefined
+                    ? newValue
+                    : roundToDecimalPlaces(newValue, dragDecimalPlaces);
             lastDragValue = nextValue;
             onValueChange(nextValue);
         };
@@ -161,7 +183,16 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }, {
             once: true,
         });
-    }, [_step, _min, _max, value, onValueChange, onValueChangeEnd, snapToStep]);
+    }, [
+        _step,
+        _min,
+        _max,
+        value,
+        onValueChange,
+        onValueChangeEnd,
+        snapToStep,
+        dragDecimalPlaces,
+    ]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (inputFallback) {
@@ -169,16 +200,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     const deriveStep = (0, react_1.useMemo)(() => {
-        if (!snapToStep) {
-            return 'any';
-        }
-        if (_step !== undefined) {
-            return _step;
-        }
-        if (typeof _min === 'number' && isInt(_min)) {
-            return 1;
-        }
-        return 0.0001;
+        return (0, exports.deriveInputDraggerStep)({
+            min: _min,
+            snapToStep,
+            step: _step,
+        });
     }, [_min, _step, snapToStep]);
     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, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, ...props, ...(small ? { style: { padding: '4px 6px', fontSize: 12 } } : {}) }) }));

package/dist/components/NewComposition/RenameComposition.js

@@ -33,6 +33,13 @@ const RenameCompositionLoaded = () => {
     const [newId, setName] = (0, react_1.useState)(() => {
         return resolved.result.id;
     });
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
@@ -54,7 +61,7 @@ const RenameCompositionLoaded = () => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${resolved.result.id}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null }) })

package/dist/components/NewComposition/RenameFolder.js

@@ -24,6 +24,13 @@ const content = {
 const RenameFolder = ({ folderName, parentName, stack }) => {
     const { folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newName, setName] = (0, react_1.useState)(folderName);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
     const onNameChange = (0, react_1.useCallback)((e) => {
         setName(e.target.value);
     }, []);
@@ -50,7 +57,7 @@ const RenameFolder = ({ folderName, parentName, stack }) => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${folderId}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Folder name", status: "ok", rightAlign: true }), folderNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: folderNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming folder...', errorNotification: 'Could not rename folder', successNotification: `Renamed folder to ${newName}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: stack, valid: valid, onSuccess: null }) })

package/dist/components/NewComposition/RenameStaticFile.js

@@ -39,6 +39,16 @@ const RenameStaticFileModal = ({ relativePath }) => {
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [newName, setNewName] = (0, react_1.useState)(() => getBaseName(relativePath));
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        const dotIndex = newName.lastIndexOf('.');
+        const stemEnd = dotIndex === -1 ? newName.length : dotIndex;
+        input.setSelectionRange(0, stemEnd);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const parent = (0, react_1.useMemo)(() => getParent(relativePath), [relativePath]);
     const newRelativePath = (0, react_1.useMemo)(() => {
         return [parent, newName].filter(Boolean).join('/');
@@ -106,7 +116,7 @@ const RenameStaticFileModal = ({ relativePath }) => {
             jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Rename ${relativePath}` }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
                     jsx_runtime_1.jsx("div", { style: content, children: jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                 jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Name" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
-                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newName, onChange: onNameChange, type: "text", autoFocus: true, autoComplete: "off", "data-1p-ignore": true, placeholder: "Asset name", status: validationMessage ? 'error' : 'ok', rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                            jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, value: newName, onChange: onNameChange, type: "text", autoFocus: true, autoComplete: "off", "data-1p-ignore": true, placeholder: "Asset name", status: validationMessage ? 'error' : 'ok', rightAlign: true }), validationMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: validationMessage, type: "error" })
                                                 ] })) : null] }) })
                             ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: "flex-end", children: [

package/dist/components/Notifications/Notification.js

@@ -3,14 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const notification = {
     backgroundColor: '#111111',
-    color: 'white',
+    color: colors_1.TEXT_COLOR,
     fontFamily: 'Arial, Helvetica, sans-serif',
     display: 'inline-flex',
-    padding: '8px 14px',
-    borderRadius: 4,
-    fontSize: 15,
+    padding: '6px 14px',
+    borderRadius: 6,
+    fontSize: 13,
     border: '0.25px solid rgba(255, 255, 255, 0.1)',
     boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
     marginTop: 3,

package/dist/components/Notifications/NotificationCenter.js

@@ -11,7 +11,7 @@ const container = {
     display: 'flex',
     width: '100%',
     flexDirection: 'column',
-    paddingTop: 20,
+    paddingTop: 40,
     pointerEvents: 'none',
     backgroundColor: 'transparent',
 };

package/dist/components/ObserveDefaultPropsContext.js

@@ -37,6 +37,7 @@ exports.ObserveDefaultProps = exports.ObserveDefaultPropsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const call_api_1 = require("./call-api");
 exports.ObserveDefaultPropsContext = react_1.default.createContext(null);
@@ -60,10 +61,13 @@ const ObserveDefaultProps = ({ compositionId, readOnlyStudio, children }) => {
                 ...prevState,
                 [compId]: { canUpdate: true },
             }));
+            // Resolve `remotion-file:` and `remotion-date:` tokens that the
+            // server emits for staticFile() and new Date() values
+            const deserialized = no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(JSON.stringify(result.currentDefaultProps));
             updateProps({
                 id: compId,
-                defaultProps: result.currentDefaultProps,
-                newProps: result.currentDefaultProps,
+                defaultProps: deserialized,
+                newProps: deserialized,
             });
         }
         else {