@remotion/studio 4.0.471 → 4.0.473

package/dist/components/Timeline/TimelineKeyframeDragState.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineKeyframeDragState = exports.TimelineKeyframeDragStateProvider = exports.getTimelineKeyframeDragKey = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const emptyDraggedKeyframes = new Set();
+const getTimelineKeyframeDragKey = ({ nodePathInfo, frame, }) => {
+    return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)}.keyframe.${frame}`;
+};
+exports.getTimelineKeyframeDragKey = getTimelineKeyframeDragKey;
+const TimelineKeyframeDragStateContext = (0, react_1.createContext)({
+    clearDraggedKeyframes: () => undefined,
+    isKeyframeDragging: () => false,
+    setDraggedKeyframes: () => undefined,
+});
+const TimelineKeyframeDragStateProvider = ({ children }) => {
+    const [draggedKeys, setDraggedKeys] = (0, react_1.useState)(emptyDraggedKeyframes);
+    const setDraggedKeyframes = (0, react_1.useCallback)((keyframes) => {
+        setDraggedKeys(new Set(keyframes.map(exports.getTimelineKeyframeDragKey)));
+    }, []);
+    const clearDraggedKeyframes = (0, react_1.useCallback)(() => {
+        setDraggedKeys(emptyDraggedKeyframes);
+    }, []);
+    const isKeyframeDragging = (0, react_1.useCallback)((keyframe) => {
+        return draggedKeys.has((0, exports.getTimelineKeyframeDragKey)(keyframe));
+    }, [draggedKeys]);
+    const value = (0, react_1.useMemo)(() => ({
+        clearDraggedKeyframes,
+        isKeyframeDragging,
+        setDraggedKeyframes,
+    }), [clearDraggedKeyframes, isKeyframeDragging, setDraggedKeyframes]);
+    return (jsx_runtime_1.jsx(TimelineKeyframeDragStateContext.Provider, { value: value, children: children }));
+};
+exports.TimelineKeyframeDragStateProvider = TimelineKeyframeDragStateProvider;
+const useTimelineKeyframeDragState = () => {
+    return (0, react_1.useContext)(TimelineKeyframeDragStateContext);
+};
+exports.useTimelineKeyframeDragState = useTimelineKeyframeDragState;

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

@@ -11,8 +11,8 @@ const container = {
 };
 const TimelineList = ({ timeline }) => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
-                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
+            jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track, trackIndex) => {
+                return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { trackIndex: trackIndex, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset }, track.sequence.id) }, track.sequence.id));
             })] }));
 };
 exports.TimelineList = TimelineList;

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

@@ -1,17 +1,4 @@
 import React from 'react';
-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, setCanvasContent: React.Dispatch<React.SetStateAction<import("remotion").CanvasContent | null>>) => void;
 export declare const TimelineMediaInfo: React.FC<{
     readonly src: string;
 }>;
-export {};

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -1,44 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineMediaInfo = exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = void 0;
+exports.TimelineMediaInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
-const url_state_1 = require("../../helpers/url-state");
+const use_select_asset_1 = require("../use-select-asset");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineSelection_1 = require("./TimelineSelection");
 const lineStyle = {
     whiteSpace: 'nowrap',
@@ -49,43 +17,10 @@ const lineStyle = {
     color: colors_1.VERY_LIGHT_TEXT,
     display: 'inline-block',
 };
-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, setCanvasContent) => {
-    if (linkInfo.kind === 'local') {
-        setCanvasContent({ type: 'asset', asset: linkInfo.assetPath });
-        (0, url_state_1.pushUrl)(`/assets/${linkInfo.assetPath}`);
-        return;
-    }
-    window.open(linkInfo.href, '_blank', 'noopener,noreferrer');
-};
-exports.openTimelineAssetLink = openTimelineAssetLink;
 const useAssetLink = (src) => {
-    const { setCanvasContent } = react_1.default.useContext(remotion_1.Internals.CompositionSetters);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
-    const linkInfo = (0, react_1.useMemo)(() => (0, exports.getTimelineAssetLinkInfo)(src), [src]);
+    const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
     const interactive = !TimelineSelection_1.SELECTION_ENABLED && linkInfo !== null;
     const onClick = (0, react_1.useCallback)((e) => {
         if (!linkInfo) {
@@ -93,8 +28,8 @@ const useAssetLink = (src) => {
         }
         e.preventDefault();
         e.stopPropagation();
-        (0, exports.openTimelineAssetLink)(linkInfo, setCanvasContent);
-    }, [linkInfo, setCanvasContent]);
+        (0, timeline_asset_link_1.openTimelineAssetLink)(linkInfo, selectAsset);
+    }, [linkInfo, selectAsset]);
     const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
     const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
     const fileNameStyle = (0, react_1.useMemo)(() => ({

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;
+}>;