@remotion/studio 4.0.475 → 4.0.476

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/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/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 {

package/dist/components/PlayPause.js

@@ -68,66 +68,22 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             pauseAndReturnToPlayStart();
         }
     }, [pauseAndReturnToPlayStart, playing]);
-    const onArrowLeft = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (e.altKey) {
-            seek(0);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: 0,
-            });
-        }
-        else if (e.shiftKey) {
-            frameBack((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, getCurrentFrame() - (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameBack(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-left',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.max(0, getCurrentFrame() - 1),
-            });
-        }
-    }, [frameBack, seek, getCurrentFrame]);
-    const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (e.altKey) {
-            seek((0, imperative_state_1.getCurrentDuration)() - 1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
-                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
-            });
-        }
-        else if (e.shiftKey) {
-            frameForward((0, imperative_state_1.getCurrentFps)());
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + (0, imperative_state_1.getCurrentFps)()),
-            });
-        }
-        else {
-            frameForward(1);
-            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
-                direction: 'fit-right',
-                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
-            });
-        }
-        e.preventDefault();
-    }, [frameForward, seek, getCurrentFrame]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
-    }, [frameBack]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: 'fit-left',
+            durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            frame: Math.max(0, getCurrentFrame() - 1),
+        });
+    }, [frameBack, getCurrentFrame]);
     const oneFrameForward = (0, react_1.useCallback)(() => {
         frameForward(1);
-    }, [frameForward]);
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: 'fit-right',
+            durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, getCurrentFrame() + 1),
+        });
+    }, [frameForward, getCurrentFrame]);
     const jumpToStart = (0, react_1.useCallback)(() => {
         seek(inFrame !== null && inFrame !== void 0 ? inFrame : 0);
     }, [seek, inFrame]);
@@ -136,20 +92,20 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
     }, [seek, outFrame]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
-        const arrowLeft = keybindings.registerKeybinding({
+        const commandArrowLeft = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowLeft',
-            callback: onArrowLeft,
-            commandCtrlKey: false,
+            callback: oneFrameBack,
+            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const arrowRight = keybindings.registerKeybinding({
+        const commandArrowRight = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'ArrowRight',
-            callback: onArrowRight,
-            commandCtrlKey: false,
+            callback: oneFrameForward,
+            commandCtrlKey: true,
             preventDefault: true,
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
@@ -191,8 +147,8 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
             keepRegisteredWhenNotHighestContext: false,
         });
         return () => {
-            arrowLeft.unregister();
-            arrowRight.unregister();
+            commandArrowLeft.unregister();
+            commandArrowRight.unregister();
             space.unregister();
             enter.unregister();
             a.unregister();
@@ -202,10 +158,10 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted }
         jumpToEnd,
         jumpToStart,
         keybindings,
-        onArrowLeft,
-        onArrowRight,
         onEnter,
         onSpace,
+        oneFrameBack,
+        oneFrameForward,
     ]);
     (0, react_1.useEffect)(() => {
         let timeout = null;

package/dist/components/PreviewToolbar.js

@@ -95,7 +95,21 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     (0, react_1.useEffect)(() => {
-        if (isMobileLayout && previewToolbarRef.current) {
+        if (!isMobileLayout) {
+            // The indicators are `position: fixed` and are shown/placed
+            // imperatively by the scroll handler below. Without this reset,
+            // leaving the mobile layout (window resized past the breakpoint)
+            // leaves them visible at stale viewport coordinates — an orphaned
+            // grey gradient rectangle floating over the canvas.
+            if (leftScrollIndicatorRef.current) {
+                leftScrollIndicatorRef.current.style.display = 'none';
+            }
+            if (rightScrollIndicatorRef.current) {
+                rightScrollIndicatorRef.current.style.display = 'none';
+            }
+            return;
+        }
+        if (previewToolbarRef.current) {
             const updateScrollableIndicatorProps = (target) => {
                 var _a;
                 const boundingBox = target.getBoundingClientRect();

package/dist/components/RenderModal/RenderModalJSONPropsEditor.js

@@ -103,7 +103,8 @@ const RenderModalJSONPropsEditor = ({ setValue, value, defaultProps, onSave, ser
             }
             const { result } = e;
             if (result.canUpdate) {
-                const nextState = parseJS(result.currentDefaultProps, schema);
+                const deserialized = no_react_1.NoReactInternals.deserializeJSONWithSpecialTypes(JSON.stringify(result.currentDefaultProps));
+                const nextState = parseJS(deserialized, schema);
                 setLocalValue(nextState);
             }
         });

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -19,10 +19,11 @@ type RotationFieldSchema = Extract<SequenceFieldSchema, {
     type: 'rotation-css';
 }>;
 type SelectedOutlineScaleDragTarget = {
-    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly propStatus: CanUpdateSequencePropStatusStatic | CanUpdateSequencePropStatusKeyframed;
     readonly clientId: string;
     readonly fieldDefault: number | string | undefined;
     readonly fieldSchema: ScaleFieldSchema;
+    readonly keyframeDisplayOffset: number;
     readonly linked: boolean;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
@@ -35,6 +36,7 @@ type SelectedOutlineRotationDragTarget = {
     readonly keyframeDisplayOffset: number;
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: SequenceSchema;
+    readonly transformOriginValue: string;
 };
 export type SelectedOutlineDragState = {
     readonly defaultValue: string | null;
@@ -47,6 +49,7 @@ export type SelectedOutlineDragState = {
 export type SelectedOutlineScaleDragState = {
     readonly defaultValue: string | null;
     readonly key: string;
+    readonly sourceFrame: number;
     readonly startX: number;
     readonly startY: number;
     readonly startZ: number;
@@ -66,6 +69,7 @@ type SequenceWithSelectedOutline = {
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly sequence: TSequence;
 };
+export declare const selectedOutlineDragThresholdPx = 4;
 export declare const getSelectedOutlineRotationDeltaDegrees: ({ from, to, }: {
     readonly from: number;
     readonly to: number;
@@ -77,6 +81,26 @@ export declare const getSelectedOutlineRotationCornerInfo: (points: readonly [Ou
     cursorDegrees: number;
     point: OutlinePoint;
 };
+export declare const getSelectedOutlineRotationPivot: ({ dimensions, points, transformOriginValue, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+    readonly transformOriginValue: string;
+}) => OutlinePoint;
+type SvgViewport = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+type SvgScreenCtm = Pick<DOMMatrixReadOnly, 'a' | 'b' | 'c' | 'd' | 'e' | 'f'>;
+export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containerRect, }: {
+    readonly viewport: SvgViewport;
+    readonly ctm: SvgScreenCtm;
+    readonly containerRect: Pick<DOMRect, "left" | "top">;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
     readonly shiftKey: boolean;
@@ -105,6 +129,10 @@ export declare const applySelectedOutlineDragAxisLock: ({ deltaX, deltaY, axisLo
     deltaX: number;
     deltaY: number;
 };
+export declare const isSelectedOutlineDragPastThreshold: ({ deltaX, deltaY, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+}) => boolean;
 export type SelectedOutlineStaticDragChange = SaveSequencePropChange & {
     readonly type: 'static';
 };
@@ -123,19 +151,34 @@ export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
 }) => SelectedOutlineDragChange[];
+export type SelectedOutlineKeyboardNudgeDirection = 'left' | 'right' | 'up' | 'down';
+export declare const getSelectedOutlineKeyboardNudgeDelta: ({ direction, shiftKey, }: {
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => number;
+export declare const getSelectedOutlineKeyboardNudgeDeltas: ({ deltaX, deltaY, direction, shiftKey, }: {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly direction: SelectedOutlineKeyboardNudgeDirection;
+    readonly shiftKey: boolean;
+}) => {
+    deltaX: number;
+    deltaY: number;
+};
 export type SelectedOutlineScaleEdge = 'top' | 'right' | 'bottom' | 'left';
 type SelectedOutlineScaleEdgeInfo = {
     readonly axis: 'x' | 'y';
-    readonly cursor: React.CSSProperties['cursor'];
+    readonly cursor: string;
     readonly end: OutlinePoint;
     readonly extent: number;
     readonly normal: OutlinePoint;
     readonly start: OutlinePoint;
 };
 export declare const getSelectedOutlineScaleEdgeInfo: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], edge: SelectedOutlineScaleEdge) => SelectedOutlineScaleEdgeInfo | null;
-export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, }: {
+export declare const getSelectedOutlineScaleDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineScaleDragTarget[];
     readonly getDragOverrides: GetDragOverrides;
+    readonly timelinePosition: number;
 }) => SelectedOutlineScaleDragState[];
 export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, scaleFactor, }: {
     readonly axis: "x" | "y";
@@ -145,14 +188,7 @@ export declare const getSelectedOutlineScaleDragValues: ({ axis, dragStates, sca
 export declare const getSelectedOutlineScaleDragChanges: ({ dragStates, lastValues, }: {
     readonly dragStates: readonly SelectedOutlineScaleDragState[];
     readonly lastValues: ReadonlyMap<string, string | number>;
-}) => {
-    fileName: string;
-    nodePath: SequencePropsSubscriptionKey;
-    fieldKey: string;
-    value: string | number;
-    defaultValue: string | null;
-    schema: SequenceSchema;
-}[];
+}) => SelectedOutlineDragChange[];
 export declare const getSelectedOutlineRotationDragStates: ({ dragTargets, getDragOverrides, timelinePosition, }: {
     readonly dragTargets: readonly SelectedOutlineRotationDragTarget[];
     readonly getDragOverrides: GetDragOverrides;