@remotion/studio 4.0.473 → 4.0.474

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -22,14 +22,14 @@ const baseStyle = {
     zIndex: 1,
     touchAction: 'none',
 };
-const canUpdateDurationInFrames = ({ codeValues, nodePath, }) => {
+const canUpdateDurationInFrames = ({ propStatuses, nodePath, }) => {
     var _a, _b;
-    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.durationInFrames) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
-const canUpdateFrom = ({ codeValues, nodePath, }) => {
+const canUpdateFrom = ({ propStatuses, nodePath, }) => {
     var _a, _b;
-    const status = (_b = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
+    const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.from) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
 const isDurationDraggableSequence = (sequence) => {
@@ -100,7 +100,7 @@ const findSequenceTrack = ({ tracks, nodePathInfo, }) => {
         return ((0, studio_shared_1.stringifySequenceSubscriptionKey)(candidate.nodePathInfo.sequenceSubscriptionKey) === key && candidate.nodePathInfo.index === nodePathInfo.index);
     });
 };
-const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -125,7 +125,7 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
             return null;
         }
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateDurationInFrames({ codeValues, nodePath })) {
+        if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
             return null;
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
@@ -140,7 +140,7 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
     return [...targets.values()];
 };
 exports.getTimelineSequenceDurationDragTargets = getTimelineSequenceDurationDragTargets;
-const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, codeValues, }) => {
+const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     const draggedSelectionKey = (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(draggedNodePathInfo);
     const selectedSequenceItems = selectedItems.filter((item) => item.type === 'sequence');
     const draggedItemIsSelected = selectedSequenceItems.some((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo) ===
@@ -165,7 +165,7 @@ const getTimelineSequenceFromDragTargets = ({ draggedNodePathInfo, selectedItems
             return null;
         }
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
-        if (!canUpdateFrom({ codeValues, nodePath })) {
+        if (!canUpdateFrom({ propStatuses, nodePath })) {
             return null;
         }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
@@ -191,35 +191,29 @@ const clearFromDragOverrides = ({ clearDragOverrides, targets, }) => {
     }
 };
 const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurationInFrames, }) => {
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     });
     latestRef.current = {
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -230,7 +224,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (!dragState) {
             return;
         }
-        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceFromDragChanges)({
             targets: dragState.targets,
             deltaFrames: dragState.latestDeltaFrames,
@@ -246,7 +240,7 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
             changes,
-            setCodeValues: latestSetCodeValues,
+            setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
             undoLabel: changes.length > 1 ? 'Move selected sequences' : 'Move sequence',
             redoLabel: changes.length > 1
@@ -274,16 +268,17 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         if (pxPerFrame <= 0) {
             return;
         }
-        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
         if (latestNodePathInfo === null) {
             return;
         }
         const targets = (0, exports.getTimelineSequenceFromDragTargets)({
             draggedNodePathInfo: latestNodePathInfo,
             selectedItems: latestSelectedItems,
-            sequences: latestSequences,
+            sequences: sequencesRef.current,
             overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            codeValues: latestCodeValues,
+            propStatuses: propStatusesRef.current,
         });
         if (targets === null || targets.length === 0) {
             return;
@@ -299,7 +294,13 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
         document.body.style.userSelect = 'none';
         document.body.style.webkitUserSelect = 'none';
         setDragging(true);
-    }, [timelineDurationInFrames, windowWidth]);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
     (0, react_1.useEffect)(() => {
         if (!dragging) {
             return;
@@ -354,36 +355,30 @@ const useTimelineSequenceFromDrag = ({ nodePathInfo, windowWidth, timelineDurati
 };
 exports.useTimelineSequenceFromDrag = useTimelineSequenceFromDrag;
 const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timelineDurationInFrames }) => {
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const dragStateRef = (0, react_1.useRef)(null);
     // Keep latest props/setters available to window listeners installed once at pointerdown.
     const latestRef = (0, react_1.useRef)({
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     });
     latestRef.current = {
         nodePathInfo,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         clearDragOverrides,
         previewServerState,
-        codeValues,
-        sequences,
         overrideIdToNodePathMappings,
-        selectedItems,
     };
     const finishDrag = (0, react_1.useCallback)((commit) => {
         const dragState = dragStateRef.current;
@@ -395,7 +390,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         if (!dragState) {
             return;
         }
-        const { setCodeValues: latestSetCodeValues, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
+        const { setPropStatuses: latestSetPropStatuses, clearDragOverrides: latestClear, previewServerState: latestServerState, } = latestRef.current;
         const changes = (0, exports.getTimelineSequenceDurationDragChanges)({
             targets: dragState.targets,
             deltaFrames: dragState.latestDeltaFrames,
@@ -411,7 +406,7 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         }
         const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
             changes,
-            setCodeValues: latestSetCodeValues,
+            setPropStatuses: latestSetPropStatuses,
             clientId: latestServerState.clientId,
             undoLabel: changes.length > 1 ? 'Resize selected sequences' : 'Resize sequence',
             redoLabel: changes.length > 1
@@ -439,13 +434,14 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         if (pxPerFrame <= 0) {
             return;
         }
-        const { nodePathInfo: latestNodePathInfo, selectedItems: latestSelectedItems, sequences: latestSequences, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, codeValues: latestCodeValues, } = latestRef.current;
+        const { nodePathInfo: latestNodePathInfo, overrideIdToNodePathMappings: latestOverrideIdsToNodePaths, } = latestRef.current;
+        const { selectedItems: latestSelectedItems } = currentSelection.current;
         const targets = (0, exports.getTimelineSequenceDurationDragTargets)({
             draggedNodePathInfo: latestNodePathInfo,
             selectedItems: latestSelectedItems,
-            sequences: latestSequences,
+            sequences: sequencesRef.current,
             overrideIdsToNodePaths: latestOverrideIdsToNodePaths,
-            codeValues: latestCodeValues,
+            propStatuses: propStatusesRef.current,
         });
         if (targets === null || targets.length === 0) {
             return;
@@ -463,7 +459,13 @@ const TimelineSequenceRightEdgeDragHandle = ({ nodePathInfo, windowWidth, timeli
         document.body.style.webkitUserSelect = 'none';
         (0, ForceSpecificCursor_1.forceSpecificCursor)('ew-resize');
         setDragging(true);
-    }, [timelineDurationInFrames, windowWidth]);
+    }, [
+        currentSelection,
+        propStatusesRef,
+        sequencesRef,
+        timelineDurationInFrames,
+        windowWidth,
+    ]);
     // Install global pointer listeners while dragging. They survive parent re-renders
     // and element remounts that would otherwise drop React's synthetic handlers or
     // pointer capture.

package/dist/components/Timeline/TimelineTranslateField.js

@@ -17,27 +17,32 @@ const containerStyle = {
     gap: 4,
 };
 const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
-    const step = field.fieldSchema.type === 'translate' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const configuredStep = field.fieldSchema.type === 'translate' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: v,
+        });
         return `${formatted}px`;
-    }, [stepDecimals]);
+    }, [decimalPlaces]);
     // --- X callbacks ---
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY));
-    }, [onDragValueChange, dragY, codeY]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces));
+    }, [onDragValueChange, dragY, codeY, decimalPlaces]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(newVal, currentY, decimalPlaces);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragX(null);
@@ -48,12 +53,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragX(null);
             onDragEnd();
         }
-    }, [dragY, codeY, propStatus, onSave, onDragEnd]);
+    }, [dragY, codeY, decimalPlaces, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY);
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(parsed, currentY, decimalPlaces);
             if (newStr !== propStatus.codeValue) {
                 setDragX(parsed);
                 onSave(newStr).finally(() => {
@@ -61,16 +66,16 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, dragY, codeY, onSave]);
+    }, [propStatus, dragY, codeY, decimalPlaces, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal));
-    }, [onDragValueChange, dragX, codeX]);
+        onDragValueChange((0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces));
+    }, [onDragValueChange, dragX, codeX, decimalPlaces]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal);
+        const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, newVal, decimalPlaces);
         if (newStr !== propStatus.codeValue) {
             onSave(newStr).finally(() => {
                 setDragY(null);
@@ -81,12 +86,12 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
             setDragY(null);
             onDragEnd();
         }
-    }, [dragX, codeX, propStatus, onSave, onDragEnd]);
+    }, [dragX, codeX, decimalPlaces, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
         const parsed = Number(newVal);
         if (!Number.isNaN(parsed)) {
             const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed);
+            const newStr = (0, timeline_translate_utils_1.serializeTranslate)(currentX, parsed, decimalPlaces);
             if (newStr !== propStatus.codeValue) {
                 setDragY(parsed);
                 onSave(newStr).finally(() => {
@@ -94,7 +99,7 @@ const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onD
                 });
             }
         }
-    }, [propStatus, onSave, dragX, codeX]);
+    }, [propStatus, onSave, dragX, codeX, decimalPlaces]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

package/dist/components/Timeline/TimelineUvCoordinateField.js

@@ -30,25 +30,31 @@ const tuplesEqual = (left, right) => {
     return left[0] === right[0] && left[1] === right[1];
 };
 const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const [codeX, codeY] = (0, react_1.useMemo)(() => parseUvCoordinate(effectiveValue), [effectiveValue]);
-    const step = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
-        : 0.01;
+    const configuredStep = field.fieldSchema.type === 'uv-coordinate'
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 0.01;
     const min = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'uv-coordinate'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        return digits === 0 ? String(num) : num.toFixed(digits);
-    }, [stepDecimals]);
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: true,
+            value: v,
+        });
+    }, [decimalPlaces]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
@@ -114,7 +120,7 @@ const TimelineUvCoordinateField = ({ field, propStatus, effectiveValue, onSave,
         }
     }, [propStatus, onSave, dragX, codeX]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, snapToStep: false })
         ] }));
 };
 exports.TimelineUvCoordinateField = TimelineUvCoordinateField;

package/dist/components/Timeline/{apply-effect-response-to-code-values.d.ts → apply-effect-response-to-prop-statuses.d.ts}

@@ -1,5 +1,5 @@
 import type { CanUpdateEffectPropsResponse, CanUpdateSequencePropsResponse } from 'remotion';
-export declare const applyEffectResponseToCodeValues: ({ previous, response, }: {
+export declare const applyEffectResponseToPropStatuses: ({ previous, response, }: {
     previous: CanUpdateSequencePropsResponse;
     response: CanUpdateEffectPropsResponse;
 }) => CanUpdateSequencePropsResponse;

package/dist/components/Timeline/{apply-effect-response-to-code-values.js → apply-effect-response-to-prop-statuses.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyEffectResponseToCodeValues = void 0;
-const applyEffectResponseToCodeValues = ({ previous, response, }) => {
+exports.applyEffectResponseToPropStatuses = void 0;
+const applyEffectResponseToPropStatuses = ({ previous, response, }) => {
     if (!previous.canUpdate) {
         return previous;
     }
@@ -16,4 +16,4 @@ const applyEffectResponseToCodeValues = ({ previous, response, }) => {
         effects,
     };
 };
-exports.applyEffectResponseToCodeValues = applyEffectResponseToCodeValues;
+exports.applyEffectResponseToPropStatuses = applyEffectResponseToPropStatuses;

package/dist/components/Timeline/call-add-keyframe.d.ts

@@ -1,16 +1,16 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
-export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+import type { SetPropStatuses } from './save-sequence-prop';
+export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
-export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }: {
+export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
@@ -18,6 +18,6 @@ export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex,
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-add-keyframe.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.callAddEffectKeyframe = exports.callAddSequenceKeyframe = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
-const apply_effect_response_to_code_values_1 = require("./apply-effect-response-to-code-values");
+const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
-const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddSequenceKeyframe)({
             previous: prev,
             fieldKey,
@@ -29,10 +29,10 @@ const callAddSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, va
     });
 };
 exports.callAddSequenceKeyframe = callAddSequenceKeyframe;
-const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setCodeValues, clientId, }) => {
+const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticAddEffectKeyframe)({
             previous: prev,
             effectIndex,
@@ -41,7 +41,7 @@ const callAddEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sour
             value,
             schema,
         }),
-        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({ previous: prev, response }),
         apiCall: () => (0, call_api_1.callApi)('/api/add-effect-keyframe', {
             fileName,
             sequenceNodePath: nodePath,

package/dist/components/Timeline/call-delete-keyframe.d.ts

@@ -1,5 +1,5 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
+import type { SetPropStatuses } from './save-sequence-prop';
 export type DeleteSequenceKeyframeChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -10,28 +10,28 @@ export type DeleteSequenceKeyframeChange = {
 export type DeleteEffectKeyframeChange = DeleteSequenceKeyframeChange & {
     effectIndex: number;
 };
-export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }: {
+export declare const callDeleteSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
-export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setCodeValues, clientId, }: {
+export declare const callDeleteEffectKeyframe: ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }: {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
     fieldKey: string;
     sourceFrame: number;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;
-export declare const callDeleteKeyframes: ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }: {
+export declare const callDeleteKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
     sequenceKeyframes: DeleteSequenceKeyframeChange[];
     effectKeyframes: DeleteEffectKeyframeChange[];
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-delete-keyframe.js

@@ -15,10 +15,10 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
-const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, schema, setCodeValues, clientId, }) => {
+const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframe)({
             previous: prev,
             fieldKey,
@@ -41,10 +41,10 @@ const callDeleteSequenceKeyframe = ({ fileName, nodePath, fieldKey, sourceFrame,
     });
 };
 exports.callDeleteSequenceKeyframe = callDeleteSequenceKeyframe;
-const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setCodeValues, clientId, }) => {
+const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, sourceFrame, schema, setPropStatuses, clientId, }) => {
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         applyOptimistic: (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframe)({
             previous: prev,
             effectIndex,
@@ -69,7 +69,7 @@ const callDeleteEffectKeyframe = ({ fileName, nodePath, effectIndex, fieldKey, s
     });
 };
 exports.callDeleteEffectKeyframe = callDeleteEffectKeyframe;
-const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }) => {
+const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
         return Promise.resolve();
     }
@@ -78,7 +78,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteSequenceKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 fieldKey: keyframe.fieldKey,
@@ -91,7 +91,7 @@ const callDeleteKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticDeleteEffectKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 effectIndex: keyframe.effectIndex,

package/dist/components/Timeline/call-move-keyframe.d.ts

@@ -1,5 +1,5 @@
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
-import type { SetCodeValues } from './save-sequence-prop';
+import type { SetPropStatuses } from './save-sequence-prop';
 export type MoveSequenceKeyframeChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
@@ -11,9 +11,9 @@ export type MoveSequenceKeyframeChange = {
 export type MoveEffectKeyframeChange = MoveSequenceKeyframeChange & {
     effectIndex: number;
 };
-export declare const callMoveKeyframes: ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }: {
+export declare const callMoveKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
     sequenceKeyframes: MoveSequenceKeyframeChange[];
     effectKeyframes: MoveEffectKeyframeChange[];
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;

package/dist/components/Timeline/call-move-keyframe.js

@@ -14,7 +14,7 @@ const groupByNodePath = (keyframes) => {
     }
     return [...groups.values()];
 };
-const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues, clientId, }) => {
+const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }) => {
     if (sequenceKeyframes.length === 0 && effectKeyframes.length === 0) {
         return Promise.resolve();
     }
@@ -23,7 +23,7 @@ const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues,
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveSequenceKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 fieldKey: keyframe.fieldKey,
@@ -37,7 +37,7 @@ const callMoveKeyframes = ({ sequenceKeyframes, effectKeyframes, setCodeValues,
         if (!firstKeyframe) {
             continue;
         }
-        setCodeValues(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveEffectKeyframes)({
+        setPropStatuses(firstKeyframe.nodePath, (prev) => (0, studio_shared_1.optimisticMoveEffectKeyframes)({
             previous: prev,
             keyframes: keyframes.map((keyframe) => ({
                 effectIndex: keyframe.effectIndex,