@remotion/studio 4.0.432 → 4.0.433

package/dist/components/Timeline/TimelineFieldRow.js

@@ -5,25 +5,28 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
+const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineListItem_1 = require("./TimelineListItem");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const fieldRow = {
+const FIELD_ROW_PADDING_LEFT = 24;
+const fieldRowBase = {
     display: 'flex',
     alignItems: 'center',
     gap: 8,
-    paddingLeft: 24,
+    paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
 };
 const fieldName = {
     fontSize: 12,
     color: 'rgba(255, 255, 255, 0.8)',
 };
 const fieldLabelRow = {
-    flex: 1,
+    flex: '0 0 50%',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     gap: 6,
 };
-const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
+const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath }) => {
     var _a, _b, _c, _d;
     const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
     const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
@@ -37,9 +40,10 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
         runtimeValue: field.currentValue,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
+        shouldResortToDefaultValueIfUndefined: true,
     });
     const onSave = (0, react_1.useCallback)((key, value) => {
-        if (!propStatuses || !validatedLocation) {
+        if (!propStatuses || !validatedLocation || !nodePath) {
             return Promise.reject(new Error('Cannot save'));
         }
         const status = propStatuses[key];
@@ -51,14 +55,12 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
             : null;
         return (0, call_api_1.callApi)('/api/save-sequence-props', {
             fileName: validatedLocation.source,
-            line: validatedLocation.line,
-            column: validatedLocation.column,
+            nodePath,
             key,
             value: JSON.stringify(value),
-            enumPaths: [],
             defaultValue,
         }).then(() => undefined);
-    }, [propStatuses, validatedLocation, field.fieldSchema.default]);
+    }, [propStatuses, validatedLocation, nodePath, field.fieldSchema.default]);
     const onDragValueChange = (0, react_1.useCallback)((key, value) => {
         setDragOverrides(overrideId, key, value);
     }, [setDragOverrides, overrideId]);
@@ -67,12 +69,15 @@ const TimelineFieldRow = ({ field, overrideId, validatedLocation }) => {
     }, [clearDragOverrides, overrideId]);
     const style = (0, react_1.useMemo)(() => {
         return {
-            ...fieldRow,
+            ...fieldRowBase,
             height: field.rowHeight,
+            paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
+                FIELD_ROW_PADDING_LEFT +
+                TimelineListItem_1.SPACING * 3 * nestedDepth,
         };
-    }, [field.rowHeight]);
+    }, [field.rowHeight, nestedDepth]);
     return (jsx_runtime_1.jsxs("div", { style: style, children: [
-            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue })
+            jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
         ] }));
 };
 exports.TimelineFieldRow = TimelineFieldRow;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
+export declare const SPACING = 5;
 export declare const TimelineListItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;

package/dist/components/Timeline/TimelineListItem.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+exports.TimelineListItem = exports.SPACING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -13,9 +13,9 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineStack_1 = require("./TimelineStack");
 const use_resolved_stack_1 = require("./use-resolved-stack");
 const use_sequence_props_subscription_1 = require("./use-sequence-props-subscription");
-const SPACING = 5;
+exports.SPACING = 5;
 const space = {
-    width: SPACING,
+    width: exports.SPACING,
     flexShrink: 0,
 };
 const arrowButton = {
@@ -44,14 +44,14 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
     const { expandedTracks, toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
     const originalLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = sequence.stack) !== null && _a !== void 0 ? _a : null);
-    (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
+    const nodePath = (0, use_sequence_props_subscription_1.useSequencePropsSubscription)(sequence, originalLocation);
     const isExpanded = visualModeEnabled && ((_b = expandedTracks[sequence.id]) !== null && _b !== void 0 ? _b : false);
     const onToggleExpand = (0, react_1.useCallback)(() => {
         toggleTrack(sequence.id);
     }, [sequence.id, toggleTrack]);
     const padder = (0, react_1.useMemo)(() => {
         return {
-            width: Number(SPACING * 1.5) * nestedDepth,
+            width: Number(exports.SPACING * 3) * nestedDepth,
             flexShrink: 0,
         };
     }, [nestedDepth]);
@@ -78,7 +78,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
             alignItems: 'center',
             wordBreak: 'break-all',
             textAlign: 'left',
-            paddingLeft: SPACING,
+            paddingLeft: exports.SPACING,
             borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
         };
     }, [sequence.type]);
@@ -91,6 +91,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: outer, children: [
                     jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), jsx_runtime_1.jsx("div", { style: padder }), sequence.parent && nestedDepth > 0 ? jsx_runtime_1.jsx("div", { style: space }) : null, visualModeEnabled ? (sequence.controls ? (jsx_runtime_1.jsx("button", { type: "button", style: arrowStyle, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} track`, children: jsx_runtime_1.jsx("svg", { width: "12", height: "12", viewBox: "0 0 8 8", style: { display: 'block' }, children: jsx_runtime_1.jsx("path", { d: "M2 1L6 4L2 7Z", fill: "white" }) }) })) : (jsx_runtime_1.jsx("div", { style: arrowButton }))) : null, jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation })
-                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation })) : null] }));
+                ] }), visualModeEnabled && isExpanded && sequence.controls ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, originalLocation: originalLocation, nestedDepth: nestedDepth, nodePath: nodePath })) : null] }));
 };
 exports.TimelineListItem = TimelineListItem;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineNumberField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly codeValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineNumberField.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineNumberField = 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 TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, codeValue, }) => {
+    var _a, _b, _c;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const onValueChange = (0, react_1.useCallback)((newVal) => {
+        setDragValue(newVal);
+        onDragValueChange(field.key, newVal);
+    }, [onDragValueChange, field.key]);
+    (0, react_1.useEffect)(() => {
+        setDragValue(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate && newVal !== codeValue) {
+            onSave(field.key, newVal).catch(() => {
+                setDragValue(null);
+            });
+        }
+        else {
+            setDragValue(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const onTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed) && parsed !== codeValue) {
+                setDragValue(parsed);
+                onSave(field.key, parsed).catch(() => {
+                    setDragValue(null);
+                });
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const step = field.fieldSchema.type === 'number' ? ((_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 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 (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : effectiveValue, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
+            ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+            : -Infinity, max: field.fieldSchema.type === 'number'
+            ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+            : Infinity, step: step, formatter: formatter, rightAlign: false }));
+};
+exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -11,7 +11,7 @@ let lastTimelinePositionWhileScrolling = null;
 const TimelinePlayCursorSyncer = () => {
     var _a, _b;
     const video = remotion_1.Internals.useVideo();
-    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.TimelineContext);
+    const timelineContext = remotion_1.Internals.useTimelineContext();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineRotationField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly codeValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineRotationField.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRotationField = 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 parseCssRotationToDegrees = (value) => {
+    try {
+        const m = new DOMMatrix(`rotate(${value})`);
+        return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;
+    }
+    catch (_a) {
+        return 0;
+    }
+};
+const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+    var _a;
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const degrees = (0, react_1.useMemo)(() => parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')), [effectiveValue]);
+    const onValueChange = (0, react_1.useCallback)((newVal) => {
+        setDragValue(newVal);
+        onDragValueChange(field.key, `${newVal}deg`);
+    }, [onDragValueChange, field.key]);
+    (0, react_1.useEffect)(() => {
+        setDragValue(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newStr = `${newVal}deg`;
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragValue(null);
+            });
+        }
+        else {
+            setDragValue(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const onTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const newStr = `${parsed}deg`;
+                if (newStr !== codeValue) {
+                    setDragValue(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragValue(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue]);
+    const step = field.fieldSchema.type === 'rotation' ? ((_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 formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        return `${formatted}\u00B0`;
+    }, [stepDecimals]);
+    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }));
+};
+exports.TimelineRotationField = TimelineRotationField;

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

@@ -8,8 +8,6 @@ export declare const TimelineFieldValue: React.FC<{
     readonly onDragEnd: () => void;
     readonly canUpdate: boolean;
     readonly propStatus: CanUpdateSequencePropStatus | null;
+    readonly codeValue: unknown;
     readonly effectiveValue: unknown;
 }>;
-export declare const TimelineFieldSavingSpinner: React.FC<{
-    readonly saving: boolean;
-}>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,79 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldSavingSpinner = exports.TimelineFieldValue = void 0;
+exports.TimelineFieldValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Checkbox_1 = require("../Checkbox");
-const InputDragger_1 = require("../NewComposition/InputDragger");
-const Spinner_1 = require("../Spinner");
+const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const TimelineRotationField_1 = require("./TimelineRotationField");
+const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const unsupportedLabel = {
     color: 'rgba(255, 255, 255, 0.4)',
     fontSize: 12,
-    marginLeft: 'auto',
     fontStyle: 'italic',
 };
-const draggerStyle = {
-    width: 80,
-    marginLeft: 'auto',
-};
-const checkboxContainer = {
-    marginLeft: 'auto',
-};
 const notEditableBackground = {
     backgroundColor: 'rgba(255, 0, 0, 0.2)',
     borderRadius: 3,
     padding: '0 4px',
 };
-const TimelineNumberField = ({ field, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd }) => {
-    var _a, _b, _c;
-    const [dragValue, setDragValue] = (0, react_1.useState)(null);
-    const dragging = (0, react_1.useRef)(false);
-    const onValueChange = (0, react_1.useCallback)((newVal) => {
-        dragging.current = true;
-        setDragValue(newVal);
-        onDragValueChange(field.key, newVal);
-    }, [onDragValueChange, field.key]);
-    (0, react_1.useEffect)(() => {
-        setDragValue(null);
-        onDragEnd();
-    }, [field.currentValue, onDragEnd]);
-    const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).catch(() => {
-                setDragValue(null);
-            });
-        }
-        else {
-            setDragValue(null);
-        }
-    }, [canUpdate, onSave, field.key, codeValue]);
-    const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) && parsed !== codeValue) {
-                setDragValue(parsed);
-                onSave(field.key, parsed).catch(() => {
-                    setDragValue(null);
-                });
-            }
-        }
-    }, [canUpdate, onSave, field.key, codeValue]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : codeValue, style: draggerStyle, status: "ok", onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: field.fieldSchema.type === 'number'
-            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
-            : -Infinity, max: field.fieldSchema.type === 'number'
-            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
-            : Infinity, step: field.fieldSchema.type === 'number' ? ((_c = field.fieldSchema.step) !== null && _c !== void 0 ? _c : 1) : 1, rightAlign: true }));
-};
-const TimelineBooleanField = ({ field, codeValue, canUpdate, onSave }) => {
-    const checked = Boolean(codeValue);
-    const onChange = (0, react_1.useCallback)(() => {
-        if (canUpdate) {
-            onSave(field.key, !checked);
-        }
-    }, [canUpdate, onSave, field.key, checked]);
-    return (jsx_runtime_1.jsx("div", { style: checkboxContainer, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: checked, onChange: onChange, name: field.key, disabled: !canUpdate }) }));
-};
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, }) => {
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
     const wrapperStyle = canUpdate === null || canUpdate === false
         ? notEditableBackground
         : undefined;
@@ -81,24 +24,26 @@ const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propS
         return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
     }
     if (propStatus !== null && !propStatus.canUpdate) {
-        return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: propStatus.reason });
+        if (propStatus.reason === 'computed') {
+            return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
+        }
+        throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
     if (propStatus === null) {
-        return (jsx_runtime_1.jsx("span", { style: { ...notEditableBackground }, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
+        return (jsx_runtime_1.jsx("span", { style: notEditableBackground, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
     }
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField, { field: field, codeValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, codeValue: codeValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'rotation') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+    }
+    if (field.typeName === 'translate') {
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField, { field: field, codeValue: effectiveValue, canUpdate: canUpdate, onSave: onSave }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
     return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };
 exports.TimelineFieldValue = TimelineFieldValue;
-const TimelineFieldSavingSpinner = ({ saving }) => {
-    if (!saving) {
-        return null;
-    }
-    return jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: 12 });
-};
-exports.TimelineFieldSavingSpinner = TimelineFieldSavingSpinner;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineTranslateField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly codeValue: unknown;
+    readonly effectiveValue: unknown;
+    readonly canUpdate: boolean;
+    readonly onSave: (key: string, value: unknown) => Promise<void>;
+    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onDragEnd: () => void;
+}>;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTranslateField = 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 leftDraggerStyle = {
+    paddingLeft: 0,
+};
+const rightDraggerStyle = {
+    paddingRight: 0,
+};
+const PIXEL_PATTERN = /^(-?\d+(?:\.\d+)?)px(?:\s+(-?\d+(?:\.\d+)?)px)?$/;
+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];
+};
+const containerStyle = {
+    display: 'flex',
+    gap: 4,
+};
+const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, 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)(() => parseTranslate(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px')), [effectiveValue]);
+    const makeString = (0, react_1.useCallback)((x, y) => `${x}px ${y}px`, []);
+    (0, react_1.useEffect)(() => {
+        setDragX(null);
+        setDragY(null);
+        onDragEnd();
+    }, [field.currentValue, onDragEnd]);
+    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 formatter = (0, react_1.useCallback)((v) => {
+        const num = Number(v);
+        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
+        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        return `${formatted}px`;
+    }, [stepDecimals]);
+    // --- X callbacks ---
+    const onXChange = (0, react_1.useCallback)((newVal) => {
+        setDragX(newVal);
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        onDragValueChange(field.key, makeString(newVal, currentY));
+    }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+    const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+        const newStr = makeString(newVal, currentY);
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragX(null);
+            });
+        }
+        else {
+            setDragX(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    const onXTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
+                const newStr = makeString(parsed, currentY);
+                if (newStr !== codeValue) {
+                    setDragX(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragX(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragY, codeY, makeString]);
+    // --- Y callbacks ---
+    const onYChange = (0, react_1.useCallback)((newVal) => {
+        setDragY(newVal);
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        onDragValueChange(field.key, makeString(currentX, newVal));
+    }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+    const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+        const newStr = makeString(currentX, newVal);
+        if (canUpdate && newStr !== codeValue) {
+            onSave(field.key, newStr).catch(() => {
+                setDragY(null);
+            });
+        }
+        else {
+            setDragY(null);
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    const onYTextChange = (0, react_1.useCallback)((newVal) => {
+        if (canUpdate) {
+            const parsed = Number(newVal);
+            if (!Number.isNaN(parsed)) {
+                const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
+                const newStr = makeString(currentX, parsed);
+                if (newStr !== codeValue) {
+                    setDragY(parsed);
+                    onSave(field.key, newStr).catch(() => {
+                        setDragY(null);
+                    });
+                }
+            }
+        }
+    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    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 })
+        ] }));
+};
+exports.TimelineTranslateField = TimelineTranslateField;

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.draggerStyle = 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;
+exports.draggerStyle = {
+    width: 80,
+};

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,3 +1,4 @@
+import type { SequenceNodePath } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => void;
+export declare const useSequencePropsSubscription: (sequence: TSequence, originalLocation: OriginalPosition | null) => SequenceNodePath | null;