@remotion/studio 4.0.471 → 4.0.472

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineKeyframeControls = exports.shouldShowTimelineKeyframeControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
@@ -26,17 +27,21 @@ const navButtonStyle = {
     cursor: 'pointer',
     display: 'flex',
     flexShrink: 0,
-    height: 12,
+    height: 14,
     justifyContent: 'center',
     lineHeight: 1,
     outline: 'none',
     padding: 0,
     userSelect: 'none',
-    width: 12,
+    width: 14,
+};
+const isKeyframedStatus = (status) => {
+    return status.status === 'keyframed';
 };
 const diamondButtonStyle = {
     ...navButtonStyle,
     background: 'none',
+    translate: '0 -0.5px',
 };
 const diamondIconStyle = {
     borderRadius: 1,
@@ -47,32 +52,37 @@ const diamondIconStyle = {
 };
 const svgStyle = { display: 'block' };
 const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
-    if (propStatus.canUpdate) {
+    if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
             codeValue: propStatus,
             dragOverrideValue,
+            frame: jsxFrame,
             defaultValue,
             shouldResortToDefaultValueIfUndefined: true,
         });
     }
-    if (propStatus.reason === 'keyframed') {
-        return remotion_1.Internals.interpolateKeyframedStatus({
+    if (propStatus.status === 'static') {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: propStatus,
+            dragOverrideValue,
             frame: jsxFrame,
-            status: propStatus,
+            defaultValue,
+            shouldResortToDefaultValueIfUndefined: true,
         });
     }
     return null;
 };
-const shouldShowTimelineKeyframeControls = ({ propStatus, selected, }) => {
+const shouldShowTimelineKeyframeControls = ({ propStatus, selected, keyframable, }) => {
     if (propStatus === null) {
         return false;
     }
+    if (!keyframable && !isKeyframedStatus(propStatus)) {
+        return false;
+    }
     if (selected) {
         return true;
     }
-    return (TimelineSelection_1.SELECTION_ENABLED &&
-        !propStatus.canUpdate &&
-        propStatus.reason === 'keyframed');
+    return TimelineSelection_1.SELECTION_ENABLED && isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeControls = shouldShowTimelineKeyframeControls;
 const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, }) => {
@@ -87,14 +97,26 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
-        if (propStatus.canUpdate || propStatus.reason === 'computed') {
+        if (!isKeyframedStatus(propStatus)) {
             return false;
         }
         return (0, get_keyframe_navigation_1.hasKeyframeAtSourceFrame)(propStatus.keyframes, jsxFrame);
     }, [jsxFrame, propStatus]);
+    const currentKeyframeValue = (0, react_1.useMemo)(() => getCurrentKeyframeValue({
+        propStatus,
+        jsxFrame,
+        defaultValue,
+        dragOverrideValue,
+    }), [defaultValue, dragOverrideValue, jsxFrame, propStatus]);
     const previousDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getPreviousKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
     const nextDisplayFrame = (0, react_1.useMemo)(() => (0, get_keyframe_navigation_1.getNextKeyframeDisplayFrame)(keyframes, timelinePosition), [keyframes, timelinePosition]);
-    const canToggleKeyframe = propStatus.canUpdate || propStatus.reason === 'keyframed';
+    const keyframable = (0, studio_shared_1.isSchemaFieldKeyframable)({
+        schema,
+        key: fieldKey,
+    });
+    const canAddKeyframe = keyframable;
+    const canToggleKeyframe = propStatus.status !== 'computed' &&
+        (hasKeyframeAtCurrentFrame || canAddKeyframe);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -119,9 +141,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         if (!clientId || !canToggleKeyframe) {
             return;
         }
-        if (hasKeyframeAtCurrentFrame &&
-            !propStatus.canUpdate &&
-            propStatus.reason === 'keyframed') {
+        if (hasKeyframeAtCurrentFrame && isKeyframedStatus(propStatus)) {
             if (effectIndex === null) {
                 await (0, call_delete_keyframe_1.callDeleteSequenceKeyframe)({
                     fileName,
@@ -146,12 +166,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             });
             return;
         }
-        const value = getCurrentKeyframeValue({
-            propStatus,
-            jsxFrame,
-            defaultValue,
-            dragOverrideValue,
-        });
+        const value = currentKeyframeValue;
         if (value === null) {
             return;
         }
@@ -182,12 +197,11 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     }, [
         canToggleKeyframe,
         clientId,
-        defaultValue,
-        dragOverrideValue,
         effectIndex,
         fieldKey,
         fileName,
         hasKeyframeAtCurrentFrame,
+        currentKeyframeValue,
         jsxFrame,
         nodePath,
         propStatus,

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

@@ -1,8 +1,13 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatusKeyframed, DragOverrideValue, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange } from '../../helpers/timeline-layout';
 export declare const TimelineKeyframedValue: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
     readonly keyframeDisplayOffset: number;
+    readonly dragOverrideValue: DragOverrideValue | undefined;
+    readonly onSave: (value: unknown, sourceFrame: number) => Promise<void>;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey;
 }>;

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -5,13 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
-const wrapperStyle = {
-    opacity: 0.5,
-    pointerEvents: 'none',
+const valuesEqual = (left, right) => {
+    return JSON.stringify(left) === JSON.stringify(right);
 };
-const noop = () => undefined;
-const noopAsync = () => Promise.resolve();
-const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) => {
+const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, dragOverrideValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const jsxFrame = timelinePosition - keyframeDisplayOffset;
     const computedValue = (0, react_1.useMemo)(() => {
@@ -25,12 +22,29 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset }) =>
         return raw;
     }, [jsxFrame, propStatus]);
     const fakeStatus = (0, react_1.useMemo)(() => ({
-        canUpdate: true,
+        status: 'static',
         codeValue: computedValue,
     }), [computedValue]);
+    const effectiveValue = (0, react_1.useMemo)(() => {
+        return remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: fakeStatus,
+            dragOverrideValue,
+            frame: jsxFrame,
+            defaultValue: field.fieldSchema.default,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+    }, [dragOverrideValue, fakeStatus, field.fieldSchema.default, jsxFrame]);
+    const onSaveIfChanged = (0, react_1.useCallback)((value) => {
+        const existingKeyframe = propStatus.keyframes.find((keyframe) => keyframe.frame === jsxFrame);
+        if (valuesEqual(value, computedValue) ||
+            (existingKeyframe && valuesEqual(value, existingKeyframe.value))) {
+            return Promise.resolve();
+        }
+        return onSave(value, jsxFrame);
+    }, [computedValue, jsxFrame, onSave, propStatus.keyframes]);
     if (computedValue === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: computedValue, onSave: noopAsync, onDragValueChange: noop, onDragEnd: noop }) }));
+    return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: fakeStatus, effectiveValue: effectiveValue, onSave: onSaveIfChanged, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, scaleLockNodePath: scaleLockNodePath }));
 };
 exports.TimelineKeyframedValue = TimelineKeyframedValue;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const timelineLayerIconContainer: React.CSSProperties;
 export declare const TimelineLayerEye: React.FC<{
     readonly onInvoked: (type: 'enable' | 'disable') => void;
     readonly hidden: boolean;

package/dist/components/Timeline/TimelineLayerEye.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = void 0;
+exports.TimelineLayerEyeSpacer = exports.TimelineLayerEye = exports.timelineLayerIconContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -18,7 +18,7 @@ const speakerIcon = {
     height: 10,
     marginLeft: -1,
 };
-const container = {
+exports.timelineLayerIconContainer = {
     height: 16,
     width: 16,
     borderRadius: 2,
@@ -47,6 +47,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
         if (e.button !== 0) {
             return;
         }
+        e.preventDefault();
         e.stopPropagation();
         layerPointedDown = hidden ? 'enable' : 'disable';
         onInvoked(layerPointedDown);
@@ -54,12 +55,16 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             layerPointedDown = null;
         }, { once: true });
     }, [hidden, onInvoked]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
     const onPointerEnter = (0, react_1.useCallback)(() => {
         if (layerPointedDown) {
             onInvoked(layerPointedDown);
         }
     }, [onInvoked]);
-    return (jsx_runtime_1.jsx("div", { style: container, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
+    return (jsx_runtime_1.jsx("div", { style: exports.timelineLayerIconContainer, draggable: false, onDragStart: onDragStart, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, children: renderAction(colors_1.LIGHT_COLOR) }));
 };
 exports.TimelineLayerEye = TimelineLayerEye;
 const spacerStyle = {

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

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

package/dist/components/Timeline/TimelineNumberField.js

@@ -13,7 +13,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         onDragValueChange(newVal);
     }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate && newVal !== propStatus.codeValue) {
+        if (newVal !== propStatus.codeValue) {
             onSave(newVal).finally(() => {
                 setDragValue(null);
                 onDragEnd();
@@ -25,16 +25,12 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
         }
     }, [onSave, propStatus, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) &&
-                propStatus.canUpdate &&
-                parsed !== propStatus.codeValue) {
-                setDragValue(parsed);
-                onSave(parsed).finally(() => {
-                    setDragValue(null);
-                });
-            }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed) && parsed !== propStatus.codeValue) {
+            setDragValue(parsed);
+            onSave(parsed).finally(() => {
+                setDragValue(null);
+            });
         }
     }, [onSave, propStatus]);
     const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ArrayFieldSchema, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey, VisibleFieldSchema } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export type TimelinePrimitiveFieldInfo = Omit<SchemaFieldInfo, 'fieldSchema' | 'typeName'> & {
+    readonly fieldSchema: Exclude<VisibleFieldSchema, ArrayFieldSchema>;
+    readonly typeName: Exclude<VisibleFieldSchema['type'], 'array'>;
+};
+export declare const isTimelinePrimitiveFieldInfo: (field: SchemaFieldInfo) => field is TimelinePrimitiveFieldInfo;
+export declare const TimelinePrimitiveFieldValue: React.FC<{
+    readonly field: TimelinePrimitiveFieldInfo;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey | null;
+}>;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePrimitiveFieldValue = exports.isTimelinePrimitiveFieldInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineBooleanField_1 = require("./TimelineBooleanField");
+const TimelineColorField_1 = require("./TimelineColorField");
+const TimelineEnumField_1 = require("./TimelineEnumField");
+const TimelineNumberField_1 = require("./TimelineNumberField");
+const TimelineRotationField_1 = require("./TimelineRotationField");
+const TimelineScaleField_1 = require("./TimelineScaleField");
+const TimelineTranslateField_1 = require("./TimelineTranslateField");
+const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
+const inlineWrapper = {
+    fontSize: 12,
+};
+const isTimelinePrimitiveFieldInfo = (field) => {
+    return (field.typeName !== 'array' &&
+        field.typeName !== 'hidden' &&
+        field.fieldSchema.type !== 'array');
+};
+exports.isTimelinePrimitiveFieldInfo = isTimelinePrimitiveFieldInfo;
+const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, scaleLockNodePath, }) => {
+    if (field.typeName === 'number') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'rotation-css' ||
+        field.typeName === 'rotation-degrees') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'translate') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'scale') {
+        if (scaleLockNodePath === null) {
+            throw new Error('Expected scale lock node path for scale field');
+        }
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineScaleField_1.TimelineScaleField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus, scaleLockNodePath: scaleLockNodePath }) }));
+    }
+    if (field.typeName === 'uv-coordinate') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineUvCoordinateField_1.TimelineUvCoordinateField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'boolean') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { effectiveValue: effectiveValue, field: field, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'color') {
+        return (jsx_runtime_1.jsx("span", { children: jsx_runtime_1.jsx(TimelineColorField_1.TimelineColorField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    if (field.typeName === 'enum') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
+    throw new Error(`Unsupported field type: ${field.typeName}`);
+};
+exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

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

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

package/dist/components/Timeline/TimelineRotationField.js

@@ -15,28 +15,38 @@ const unitToDegrees = {
 const parseCssRotationToDegrees = (value) => {
     const match = value.trim().match(unitPattern);
     if (match) {
-        return Number(match[1]) * unitToDegrees[match[2]];
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(match[1]) * unitToDegrees[match[2]]);
     }
     try {
         const m = new DOMMatrix(`rotate(${value})`);
-        return Math.round(Math.atan2(m.b, m.a) * (180 / Math.PI) * 1e6) / 1e6;
+        return (0, timeline_field_utils_1.normalizeTimelineNumber)(Math.atan2(m.b, m.a) * (180 / Math.PI));
     }
     catch (_a) {
         return 0;
     }
 };
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a;
+    var _a, _b, _c;
     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 isCssRotation = field.fieldSchema.type === 'rotation-css';
+    const degrees = (0, react_1.useMemo)(() => {
+        if (isCssRotation) {
+            return parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
+        }
+        return typeof effectiveValue === 'number' ? effectiveValue : 0;
+    }, [effectiveValue, isCssRotation]);
+    const serializeValue = (0, react_1.useCallback)((value) => {
+        const normalized = (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
+        return isCssRotation ? `${normalized}deg` : normalized;
+    }, [isCssRotation]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(`${newVal}deg`);
-    }, [onDragValueChange]);
+        onDragValueChange(serializeValue(newVal));
+    }, [onDragValueChange, serializeValue]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        const newStr = `${newVal}deg`;
-        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
-            onSave(newStr).finally(() => {
+        const newValue = serializeValue(newVal);
+        if (newValue !== propStatus.codeValue) {
+            onSave(newValue).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -45,29 +55,36 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             setDragValue(null);
             onDragEnd();
         }
-    }, [propStatus, onSave, onDragEnd]);
+    }, [propStatus, onSave, onDragEnd, serializeValue]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (propStatus.canUpdate) {
-            const parsed = Number(newVal);
-            if (!Number.isNaN(parsed)) {
-                const newStr = `${parsed}deg`;
-                if (newStr !== propStatus.codeValue) {
-                    setDragValue(parsed);
-                    onSave(newStr).finally(() => {
-                        setDragValue(null);
-                    });
-                }
+        const parsed = Number(newVal);
+        if (!Number.isNaN(parsed)) {
+            const newValue = serializeValue(parsed);
+            if (newValue !== propStatus.codeValue) {
+                setDragValue(parsed);
+                onSave(newValue).finally(() => {
+                    setDragValue(null);
+                });
             }
         }
-    }, [propStatus, onSave]);
-    const step = field.fieldSchema.type === 'rotation' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
+    }, [propStatus, onSave, serializeValue]);
+    const step = field.fieldSchema.type === 'rotation-css' ||
+        field.fieldSchema.type === 'rotation-degrees'
+        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1)
+        : 1;
+    const min = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        : -Infinity;
+    const max = field.fieldSchema.type === 'rotation-degrees'
+        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        : Infinity;
     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 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);
         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 }));
+    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: min, max: max, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -17,23 +17,25 @@ const leftChromeStyle = {
     display: 'flex',
     flexShrink: 0,
 };
-const keyframeControlsColumnStyle = {
+const keyframeControlsColumnBaseStyle = {
     alignItems: 'center',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'flex-start',
-    marginRight: -(timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH - timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING),
-    width: timeline_row_layout_1.TIMELINE_KEYFRAME_CONTROLS_WIDTH,
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
+    const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
+        ...keyframeControlsColumnBaseStyle,
+        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
+    }), [depth]);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
         display: 'flex',
         flexShrink: 0,
-        paddingLeft: keyframeControls ? 0 : timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
-    }), [keyframeControls]);
+        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    }), []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
@@ -69,8 +71,7 @@ const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, styl
         };
     }, [outerHeight, highlightBackground]);
     const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("div", { style: leftChromeStyle, children: [keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : null, jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })
-                ] }), children] }));
+            jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
     if (outerStyle) {
         return (jsx_runtime_1.jsx("div", { style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
     }

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const getLinkedScale: ({ axis, newValue, baseX, baseY, min, max, }: {
+    readonly axis: "x" | "y";
+    readonly newValue: number;
+    readonly baseX: number;
+    readonly baseY: number;
+    readonly min: number;
+    readonly max: number;
+}) => [number, number];
+export declare const TimelineScaleField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly effectiveValue: unknown;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onDragEnd: () => void;
+    readonly scaleLockNodePath: SequencePropsSubscriptionKey;
+}>;