@remotion/studio 4.0.475 → 4.0.477

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

@@ -15,6 +15,6 @@ const OutlineToggle = () => {
     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: 16, height: 16 }, 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: 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" }) }) }));
 };
 exports.OutlineToggle = OutlineToggle;

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/SelectedOutlineElement.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineDragTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const SelectedOutlineElement: React.FC<{
+    readonly allDragTargets: readonly SelectedOutlineDragTarget[];
+    readonly allRotationDragTargets: readonly SelectedOutlineRotationDragTarget[];
+    readonly allScaleDragTargets: readonly SelectedOutlineScaleDragTarget[];
+    readonly dragging: boolean;
+    readonly hovered: boolean;
+    readonly outline: SelectedOutline;
+    readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onHoverChange: (key: string | null) => void;
+    readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
+    readonly scale: number;
+    readonly target: SelectedOutlineTarget | undefined;
+}>;