@remotion/studio 4.0.473 → 4.0.475

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

@@ -10,13 +10,15 @@ const render_frame_1 = require("../../state/render-frame");
 const TimeValue_1 = require("../TimeValue");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 exports.TIMELINE_TIME_INDICATOR_HEIGHT = 39;
 const container = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     position: 'absolute',
-    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    backgroundColor: TimelineSelection_1.TIMELINE_TICKS_BACKGROUND,
     top: 0,
+    borderBottom: `${timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM}px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
 const tick = {
     width: 1,
@@ -41,7 +43,7 @@ const timeValue = {
     height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
     position: 'absolute',
     top: 0,
-    width: '100%',
+    width: 'calc(100% + 1.5px)',
     paddingLeft: 10,
     display: 'flex',
     alignItems: 'center',

package/dist/components/Timeline/TimelineTransformOriginField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineTransformOriginField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineTransformOriginField.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTransformOriginField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const timeline_field_utils_1 = require("./timeline-field-utils");
+const TimelineSchemaField_1 = require("./TimelineSchemaField");
+const transform_origin_utils_1 = require("./transform-origin-utils");
+const leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const containerStyle = {
+    display: 'flex',
+    gap: 4,
+};
+const TimelineTransformOriginField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
+    const [dragX, setDragX] = (0, react_1.useState)(null);
+    const [dragY, setDragY] = (0, react_1.useState)(null);
+    const parsed = (0, react_1.useMemo)(() => (0, transform_origin_utils_1.parseTransformOrigin)(effectiveValue), [effectiveValue]);
+    const percent = (0, react_1.useMemo)(() => (parsed === null ? null : (0, transform_origin_utils_1.parsedTransformOriginToPercent)(parsed)), [parsed]);
+    const configuredStep = field.fieldSchema.type === 'transform-origin'
+        ? 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: 2,
+        step: configuredStep,
+    }), [configuredStep]);
+    const formatter = (0, react_1.useCallback)((v) => {
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: v,
+        });
+        return `${formatted}%`;
+    }, [decimalPlaces]);
+    const serialize = (0, react_1.useCallback)((x, y) => {
+        var _a;
+        return (0, transform_origin_utils_1.serializeTransformOrigin)({
+            uv: (0, transform_origin_utils_1.transformOriginPercentToUv)([x, y]),
+            z: (_a = parsed === null || parsed === void 0 ? void 0 : parsed.z) !== null && _a !== void 0 ? _a : null,
+            decimalPlaces,
+        });
+    }, [decimalPlaces, parsed === null || parsed === void 0 ? void 0 : parsed.z]);
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+        onDragValueChange(serialize(newVal, currentY));
+    }, [dragY, onDragValueChange, percent, serialize]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+        const value = serialize(newVal, currentY);
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragX(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragX(null);
+            onDragEnd();
+        }
+    }, [dragY, onDragEnd, onSave, percent, propStatus.codeValue, serialize]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const currentY = dragY !== null && dragY !== void 0 ? dragY : percent[1];
+            const value = serialize(parsedValue, currentY);
+            if (value !== propStatus.codeValue) {
+                setDragX(parsedValue);
+                onSave(value).finally(() => {
+                    setDragX(null);
+                });
+            }
+        }
+    }, [dragY, onSave, percent, propStatus.codeValue, serialize]);
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+        onDragValueChange(serialize(currentX, newVal));
+    }, [dragX, onDragValueChange, percent, serialize]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+        const value = serialize(currentX, newVal);
+        if (value !== propStatus.codeValue) {
+            onSave(value).finally(() => {
+                setDragY(null);
+                onDragEnd();
+            });
+        }
+        else {
+            setDragY(null);
+            onDragEnd();
+        }
+    }, [dragX, onDragEnd, onSave, percent, propStatus.codeValue, serialize]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        if (percent === null) {
+            return;
+        }
+        const parsedValue = Number(newVal);
+        if (!Number.isNaN(parsedValue)) {
+            const currentX = dragX !== null && dragX !== void 0 ? dragX : percent[0];
+            const value = serialize(currentX, parsedValue);
+            if (value !== propStatus.codeValue) {
+                setDragY(parsedValue);
+                onSave(value).finally(() => {
+                    setDragY(null);
+                });
+            }
+        }
+    }, [dragX, onSave, percent, propStatus.codeValue, serialize]);
+    if (percent === null) {
+        return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: "unsupported origin" });
+    }
+    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 : percent[0], style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, 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 : percent[1], style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, snapToStep: false })
+        ] }));
+};
+exports.TimelineTransformOriginField = TimelineTransformOriginField;

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,33 @@
 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 type AddSequenceKeyframeChange = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     fieldKey: string;
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+};
+export type AddEffectKeyframeChange = AddSequenceKeyframeChange & {
+    effectIndex: number;
+};
+export declare const callAddSequenceKeyframe: ({ fileName, nodePath, fieldKey, sourceFrame, value, schema, setPropStatuses, clientId, }: {
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    sourceFrame: number;
+    value: unknown;
+    schema: SequenceSchema;
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+}) => Promise<void>;
+export declare const callAddKeyframes: ({ sequenceKeyframes, effectKeyframes, setPropStatuses, clientId, }: {
+    sequenceKeyframes: AddSequenceKeyframeChange[];
+    effectKeyframes: AddEffectKeyframeChange[];
+    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 +35,6 @@ export declare const callAddEffectKeyframe: ({ fileName, nodePath, effectIndex,
     sourceFrame: number;
     value: unknown;
     schema: SequenceSchema;
-    setCodeValues: SetCodeValues;
+    setPropStatuses: SetPropStatuses;
     clientId: string;
 }) => Promise<void>;