@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/get-keyframe-navigation.js

@@ -1,23 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hasKeyframeAtSourceFrame = exports.getNextKeyframeDisplayFrame = exports.getPreviousKeyframeDisplayFrame = void 0;
-const getPreviousKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+const isKeyframeInTimelineRange = (frame, durationInFrames) => {
+    return frame >= 0 && frame < durationInFrames;
+};
+const getPreviousKeyframeDisplayFrame = (keyframes, currentDisplayFrame, durationInFrames) => {
     let previous = null;
     for (const keyframe of keyframes) {
-        if (keyframe.frame < currentDisplayFrame) {
+        if (isKeyframeInTimelineRange(keyframe.frame, durationInFrames) &&
+            keyframe.frame < currentDisplayFrame &&
+            (previous === null || keyframe.frame > previous)) {
             previous = keyframe.frame;
         }
     }
     return previous;
 };
 exports.getPreviousKeyframeDisplayFrame = getPreviousKeyframeDisplayFrame;
-const getNextKeyframeDisplayFrame = (keyframes, currentDisplayFrame) => {
+const getNextKeyframeDisplayFrame = (keyframes, currentDisplayFrame, durationInFrames) => {
+    let next = null;
     for (const keyframe of keyframes) {
-        if (keyframe.frame > currentDisplayFrame) {
-            return keyframe.frame;
+        if (isKeyframeInTimelineRange(keyframe.frame, durationInFrames) &&
+            keyframe.frame > currentDisplayFrame &&
+            (next === null || keyframe.frame < next)) {
+            next = keyframe.frame;
         }
     }
-    return null;
+    return next;
 };
 exports.getNextKeyframeDisplayFrame = getNextKeyframeDisplayFrame;
 const hasKeyframeAtSourceFrame = (keyframes, sourceFrame) => {

package/dist/components/Timeline/get-node-keyframes.d.ts

@@ -1,10 +1,13 @@
-import { type CodeValues, type SequencePropsSubscriptionKey } from 'remotion';
+import { type CodeValues, type GetDragOverrides, type GetEffectDragOverrides, type SequencePropsSubscriptionKey } from 'remotion';
 import type { TimelineTreeNode } from '../../helpers/timeline-layout';
-export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, }: {
+export declare const getNodeKeyframes: ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }: {
     node: TimelineTreeNode;
     nodePath: SequencePropsSubscriptionKey;
     codeValues: CodeValues;
     keyframeDisplayOffset: number;
+    getDragOverrides: GetDragOverrides;
+    getEffectDragOverrides: GetEffectDragOverrides;
+    timelinePosition: number;
 }) => {
     frame: number;
     value: unknown;

package/dist/components/Timeline/get-node-keyframes.js

@@ -3,21 +3,54 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getNodeKeyframes = void 0;
 const remotion_1 = require("remotion");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
-const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
+const hasOverride = (overrides, key) => Object.prototype.hasOwnProperty.call(overrides, key);
+const withDragOverrideKeyframe = ({ propStatus, keyframeDisplayOffset, timelinePosition, dragOverrideValue, hasDragOverride, }) => {
+    if ((dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.type) === 'keyframed') {
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)(dragOverrideValue.status, keyframeDisplayOffset);
+    }
+    const keyframes = (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset);
+    if (!hasDragOverride || (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'keyframed') {
+        return keyframes;
+    }
+    const dragKeyframe = {
+        frame: timelinePosition,
+        value: dragOverrideValue === null || dragOverrideValue === void 0 ? void 0 : dragOverrideValue.value,
+    };
+    const existingIndex = keyframes.findIndex((keyframe) => keyframe.frame === timelinePosition);
+    if (existingIndex !== -1) {
+        return keyframes.map((keyframe, index) => index === existingIndex ? dragKeyframe : keyframe);
+    }
+    return [...keyframes, dragKeyframe].sort((first, second) => first.frame - second.frame);
+};
+const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, getDragOverrides, getEffectDragOverrides, timelinePosition, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
     }
     if (node.field.kind === 'sequence-field') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
+        const dragOverrides = getDragOverrides(nodePath);
+        return withDragOverrideKeyframe({
+            propStatus: (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key],
+            keyframeDisplayOffset,
+            timelinePosition,
+            dragOverrideValue: dragOverrides[node.field.key],
+            hasDragOverride: hasOverride(dragOverrides, node.field.key),
+        });
     }
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
         nodePath,
         effectIndex: node.field.effectIndex,
     });
-    return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
-        ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
-        : null, keyframeDisplayOffset);
+    const effectDragOverrides = getEffectDragOverrides(nodePath, node.field.effectIndex);
+    return withDragOverrideKeyframe({
+        propStatus: effectStatus.type === 'can-update-effect'
+            ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
+            : null,
+        keyframeDisplayOffset,
+        timelinePosition,
+        dragOverrideValue: effectDragOverrides[node.field.key],
+        hasDragOverride: hasOverride(effectDragOverrides, node.field.key),
+    });
 };
 exports.getNodeKeyframes = getNodeKeyframes;

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTimelineKeyframes = exports.getComputedStatusLabel = void 0;
 const getComputedStatusLabel = (propStatus) => {
-    if (propStatus.reason === 'computed') {
+    if (propStatus.status === 'computed') {
         return 'computed';
     }
-    return 'keyframed';
+    throw new Error(`Unsupported prop status: ${propStatus.status}`);
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
 const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
-    if (!propStatus || propStatus.canUpdate) {
+    if (!propStatus) {
         return [];
     }
-    if (propStatus.reason === 'computed') {
+    if (propStatus.status !== 'keyframed') {
         return [];
     }
     const { keyframes } = propStatus;

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -9,6 +9,21 @@ const isPropResetSelection = (selection) => selection.type === 'sequence-prop' |
     selection.type === 'sequence-effect-prop';
 const isVisibleFieldSchema = (fieldSchema) => fieldSchema !== undefined && fieldSchema.type !== 'hidden';
 const isNonDefaultCodeValue = ({ codeValue, defaultValue, }) => JSON.stringify(codeValue !== null && codeValue !== void 0 ? codeValue : defaultValue) !== JSON.stringify(defaultValue);
+const isResettablePropStatus = ({ propStatus, defaultValue, }) => {
+    if (!propStatus || propStatus.status === 'computed') {
+        return false;
+    }
+    if (defaultValue === undefined) {
+        return false;
+    }
+    if (propStatus.status === 'keyframed') {
+        return true;
+    }
+    return isNonDefaultCodeValue({
+        codeValue: propStatus.codeValue,
+        defaultValue,
+    });
+};
 const getDefaultValue = (fieldSchema) => fieldSchema.default !== undefined
     ? JSON.stringify(fieldSchema.default)
     : null;
@@ -41,9 +56,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             const sequenceFieldSchema = sequence.controls.schema[selection.key];
             const sequencePropStatus = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[selection.key];
             if (!isVisibleFieldSchema(sequenceFieldSchema) ||
-                !(sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.canUpdate) ||
-                !isNonDefaultCodeValue({
-                    codeValue: sequencePropStatus.codeValue,
+                !isResettablePropStatus({
+                    propStatus: sequencePropStatus,
                     defaultValue: sequenceFieldSchema.default,
                 })) {
                 continue;
@@ -71,9 +85,8 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             : null;
         if (!effect ||
             !isVisibleFieldSchema(fieldSchema) ||
-            !(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) ||
-            !isNonDefaultCodeValue({
-                codeValue: propStatus.codeValue,
+            !isResettablePropStatus({
+                propStatus,
                 defaultValue: fieldSchema.default,
             })) {
             continue;
@@ -119,14 +132,15 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
             clientId,
             undoLabel: sequencePropTargets.length > 1
                 ? 'Reset selected sequence props'
-                : null,
+                : 'Reset sequence prop',
             redoLabel: sequencePropTargets.length > 1
                 ? 'Reapply selected sequence props'
-                : null,
+                : 'Reapply sequence prop',
         }));
     }
     for (const target of effectPropTargets) {
         resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
+            type: 'value',
             fileName: target.fileName,
             nodePath: target.nodePath,
             effectIndex: target.effectIndex,

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -1,13 +1,24 @@
+import { type EffectClipboardParam } from '@remotion/studio-shared';
 import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { SetCodeValues } from './save-sequence-prop';
-export declare const saveEffectProp: ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: {
+type SaveEffectPropBase = {
     fileName: string;
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
     fieldKey: string;
-    value: unknown;
     defaultValue: string | null;
     schema: SequenceSchema;
     setCodeValues: SetCodeValues;
     clientId: string;
-}) => Promise<void>;
+};
+type SaveEffectPropValue = SaveEffectPropBase & {
+    type: 'value';
+    value: unknown;
+};
+type SaveEffectPropEffectParam = SaveEffectPropBase & {
+    type: 'effect-param';
+    effectParam: EffectClipboardParam;
+};
+type SaveEffectPropInput = SaveEffectPropValue | SaveEffectPropEffectParam;
+export declare const saveEffectProp: (input: SaveEffectPropInput) => Promise<void>;
+export {};

package/dist/components/Timeline/save-effect-prop.js

@@ -3,28 +3,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveEffectProp = 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 save_prop_queue_1 = require("./save-prop-queue");
-const saveEffectProp = ({ fileName, nodePath, effectIndex, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
+const saveEffectProp = (input) => {
+    const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setCodeValues, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({
         nodePath,
         setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
-            previous: prev,
-            effectIndex,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', {
-            fileName,
-            sequenceNodePath: nodePath,
-            effectIndex,
-            key: fieldKey,
-            value: JSON.stringify(value),
-            defaultValue,
-            schema,
-            clientId,
-        }),
+        applyOptimistic: (prev) => input.type === 'effect-param'
+            ? prev
+            : (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+                previous: prev,
+                effectIndex,
+                fieldKey,
+                value: input.value,
+                schema,
+            }),
+        applyServerResponse: (prev, response) => (0, apply_effect_response_to_code_values_1.applyEffectResponseToCodeValues)({ previous: prev, response }),
+        apiCall: () => (0, call_api_1.callApi)('/api/save-effect-props', input.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                effectParam: input.effectParam,
+                defaultValue,
+                schema,
+                clientId,
+            }
+            : {
+                type: 'value',
+                fileName,
+                sequenceNodePath: nodePath,
+                effectIndex,
+                key: fieldKey,
+                value: JSON.stringify(input.value),
+                defaultValue,
+                schema,
+                clientId,
+            }),
         errorLabel: 'Could not save effect prop',
     });
 };

package/dist/components/Timeline/save-prop-queue.d.ts

@@ -4,8 +4,9 @@ export type EnqueueSaveOptions<TResponse> = {
     nodePath: SequencePropsSubscriptionKey;
     setCodeValues: SetCodeValues;
     applyOptimistic: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse;
+    applyServerResponse?: (prev: CanUpdateSequencePropsResponse, response: TResponse) => CanUpdateSequencePropsResponse;
     apiCall: () => Promise<TResponse>;
     errorLabel: string;
 };
-export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
+export declare const enqueueSavePropChange: <TResponse>({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }: EnqueueSaveOptions<TResponse>) => Promise<void>;
 export {};

package/dist/components/Timeline/save-prop-queue.js

@@ -19,7 +19,7 @@ const dropQueue = (nodePath, q) => {
         queues.delete(key);
     }
 };
-const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCall, errorLabel, }) => {
+const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, applyServerResponse, apiCall, errorLabel, }) => {
     const q = getQueue(nodePath);
     if (q.cancelled) {
         return Promise.resolve();
@@ -33,12 +33,15 @@ const enqueueSavePropChange = ({ nodePath, setCodeValues, applyOptimistic, apiCa
             return;
         }
         try {
-            await apiCall();
+            const response = await apiCall();
             if (myQueue.cancelled) {
                 return;
             }
             // If nothing more is queued, reset baseline so the next round starts fresh.
             if (myQueue.chain === next) {
+                if (applyServerResponse) {
+                    setCodeValues(nodePath, (prev) => applyServerResponse(prev, response));
+                }
                 dropQueue(nodePath, myQueue);
             }
         }

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -12,13 +12,8 @@ type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
     setCodeValues: SetCodeValues;
     clientId: string;
-    undoLabel: string | null;
-    redoLabel: string | null;
-};
-type SaveSequencePropOptions = SaveSequencePropChange & {
-    setCodeValues: SetCodeValues;
-    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
 };
 export declare const saveSequenceProps: ({ changes, setCodeValues, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
-export declare const saveSequenceProp: ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }: SaveSequencePropOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveSequenceProp = exports.saveSequenceProps = void 0;
+exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const save_prop_queue_1 = require("./save-prop-queue");
@@ -8,6 +8,38 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
     if (changes.length === 0) {
         return Promise.resolve();
     }
+    if (changes.length === 1) {
+        const change = changes[0];
+        if (change === undefined) {
+            throw new Error('Expected a sequence prop change');
+        }
+        return (0, save_prop_queue_1.enqueueSavePropChange)({
+            nodePath: change.nodePath,
+            setCodeValues,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
+                previous: prev,
+                fieldKey: change.fieldKey,
+                value: change.value,
+                schema: change.schema,
+            }),
+            apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+                edits: [
+                    {
+                        fileName: change.fileName,
+                        nodePath: change.nodePath,
+                        key: change.fieldKey,
+                        value: JSON.stringify(change.value),
+                        defaultValue: change.defaultValue,
+                        schema: change.schema,
+                    },
+                ],
+                clientId,
+                undoLabel,
+                redoLabel,
+            }),
+            errorLabel: 'Could not save sequence prop',
+        });
+    }
     for (const change of changes) {
         setCodeValues(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
             previous: prev,
@@ -33,32 +65,3 @@ const saveSequenceProps = ({ changes, setCodeValues, clientId, undoLabel, redoLa
     }).then(() => undefined);
 };
 exports.saveSequenceProps = saveSequenceProps;
-const saveSequenceProp = ({ fileName, nodePath, fieldKey, value, defaultValue, schema, setCodeValues, clientId, }) => {
-    return (0, save_prop_queue_1.enqueueSavePropChange)({
-        nodePath,
-        setCodeValues,
-        applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForCodeValues)({
-            previous: prev,
-            fieldKey,
-            value,
-            schema,
-        }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-            edits: [
-                {
-                    fileName,
-                    nodePath,
-                    key: fieldKey,
-                    value: JSON.stringify(value),
-                    defaultValue,
-                    schema,
-                },
-            ],
-            clientId,
-            undoLabel: null,
-            redoLabel: null,
-        }),
-        errorLabel: 'Could not save sequence prop',
-    });
-};
-exports.saveSequenceProp = saveSequenceProp;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -0,0 +1,3 @@
+export declare const shouldClearSelectionOnPointerDown: (event: {
+    readonly button: number;
+}) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldClearSelectionOnPointerDown = void 0;
+const shouldClearSelectionOnPointerDown = (event) => {
+    return event.button === 0;
+};
+exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -0,0 +1,13 @@
+type LinkInfo = {
+    kind: 'local';
+    assetPath: string;
+    title: string;
+} | {
+    kind: 'remote';
+    href: string;
+    title: string;
+} | null;
+export type TimelineAssetLinkInfo = Exclude<LinkInfo, null>;
+export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
+export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
+export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+const url_state_1 = require("../../helpers/url-state");
+const getTimelineAssetLinkInfo = (src) => {
+    const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
+    if (staticBase && src.startsWith(staticBase + '/')) {
+        const assetPath = src.slice(staticBase.length + 1);
+        return {
+            kind: 'local',
+            assetPath: decodeURIComponent(assetPath),
+            title: decodeURIComponent(assetPath),
+        };
+    }
+    if (src.startsWith('http://') ||
+        src.startsWith('https://') ||
+        src.startsWith('//')) {
+        try {
+            const url = new URL(src.startsWith('//') ? 'https:' + src : src);
+            return { kind: 'remote', href: src, title: url.hostname };
+        }
+        catch (_a) {
+            return { kind: 'remote', href: src, title: src };
+        }
+    }
+    return null;
+};
+exports.getTimelineAssetLinkInfo = getTimelineAssetLinkInfo;
+const openTimelineAssetLink = (linkInfo, selectAsset) => {
+    if (linkInfo.kind === 'local') {
+        selectAsset(linkInfo.assetPath);
+        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
+        return;
+    }
+    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
+};
+exports.openTimelineAssetLink = openTimelineAssetLink;

package/dist/components/Timeline/timeline-field-utils.d.ts

@@ -1,2 +1,3 @@
 export declare const getDecimalPlaces: (num: number) => number;
+export declare const normalizeTimelineNumber: (value: number) => number;
 export declare const draggerStyle: React.CSSProperties;

package/dist/components/Timeline/timeline-field-utils.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.draggerStyle = exports.getDecimalPlaces = void 0;
+exports.draggerStyle = exports.normalizeTimelineNumber = exports.getDecimalPlaces = void 0;
 const getDecimalPlaces = (num) => {
     const str = String(num);
     const decimalIndex = str.indexOf('.');
     return decimalIndex === -1 ? 0 : str.length - decimalIndex - 1;
 };
 exports.getDecimalPlaces = getDecimalPlaces;
+const normalizeTimelineNumber = (value) => {
+    return Math.round(value * 1000000) / 1000000;
+};
+exports.normalizeTimelineNumber = normalizeTimelineNumber;
 exports.draggerStyle = {
     width: 80,
 };

package/dist/components/Timeline/timeline-translate-utils.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializeTranslate = exports.parseTranslate = void 0;
+const timeline_field_utils_1 = require("./timeline-field-utils");
 const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+const translateDecimalPlaces = 1;
 const parseTranslate = (value) => {
     const m = value.match(PIXEL_PATTERN);
     if (!m) {
         return [0, 0];
     }
-    return [Number(m[1]), m[2] !== undefined ? Number(m[2]) : 0];
+    return [
+        (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[1])),
+        m[2] !== undefined ? (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(m[2])) : 0,
+    ];
 };
 exports.parseTranslate = parseTranslate;
 const formatTranslateCoordinate = (value) => {
-    const rounded = Math.round(value * 1000) / 1000;
+    const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+    const factor = 10 ** translateDecimalPlaces;
+    const rounded = Math.round(normalized * factor) / factor;
     return String(Object.is(rounded, -0) ? 0 : rounded);
 };
 const serializeTranslate = (x, y) => {

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -11,6 +11,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -38,14 +39,20 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             codeValues,
             keyframeDisplayOffset,
+            getDragOverrides,
+            getEffectDragOverrides,
+            timelinePosition,
         }),
         rowKey: (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(node.nodePathInfo),
         nodePathInfo: node.nodePathInfo,
     })), [
         codeValues,
         flat,
+        getDragOverrides,
+        getEffectDragOverrides,
         keyframeDisplayOffset,
         nodePathInfo.sequenceSubscriptionKey,
+        timelinePosition,
     ]);
     return { rows, expandedHeight };
 };

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import { type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
+    readonly frame: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;