@remotion/studio 4.0.473 → 4.0.474

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -13,10 +13,10 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineDeleteKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
@@ -30,6 +30,8 @@ const TimelineDeleteKeybindings = () => {
             key: 'Backspace',
             callback: () => {
                 const { selectedItems, clearSelection } = currentSelection.current;
+                const sequences = sequencesRef.current;
+                const propStatuses = propStatusesRef.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
@@ -37,8 +39,8 @@ const TimelineDeleteKeybindings = () => {
                     selections: selectedItems,
                     sequences,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    codeValues,
-                    setCodeValues,
+                    propStatuses,
+                    setPropStatuses,
                     clientId,
                 });
                 if (resetPromise !== null) {
@@ -49,7 +51,7 @@ const TimelineDeleteKeybindings = () => {
                     selections: selectedItems,
                     sequences,
                     overrideIdsToNodePaths: overrideIdToNodePathMappings,
-                    setCodeValues,
+                    setPropStatuses,
                     clientId,
                     confirm,
                 });
@@ -97,14 +99,14 @@ const TimelineDeleteKeybindings = () => {
         };
     }, [
         canSelect,
-        codeValues,
         confirm,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,
+        propStatusesRef,
         previewServerState,
-        sequences,
-        setCodeValues,
+        sequencesRef,
+        setPropStatuses,
     ]);
     return null;
 };

package/dist/components/Timeline/TimelineEffectItem.js

@@ -68,15 +68,15 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const [dropIndicator, setDropIndicator] = (0, react_1.useState)(null);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex,
-    }), [codeValues, nodePath, effectIndex]);
+    }), [propStatuses, nodePath, effectIndex]);
     const disabledStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : null)
         : null;
@@ -186,7 +186,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
             value: newValue,
             defaultValue,
             schema: effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
         });
     }, [
@@ -195,7 +195,7 @@ const TimelineEffectItem = ({ label, nodePathInfo, effectIndex, effectSchema, do
         effectSchema,
         nodePath,
         previewServerState,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const isExpanded = getIsExpanded(nodePathInfo);

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -43,15 +43,15 @@ const isResettableStatus = ({ status, defaultValue, }) => {
 const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) => {
     var _a;
     var _b;
-    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues: visualModeCodeValues,
+    const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses: visualModePropStatuses,
         nodePath,
         effectIndex: field.effectIndex,
     });
@@ -110,8 +110,8 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         }
         return (0, save_prop_queue_1.enqueueSavePropChange)({
             nodePath,
-            setCodeValues,
-            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectCodeValues)({
+            setPropStatuses,
+            applyOptimistic: (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
                 previous: prev,
                 effectIndex: field.effectIndex,
                 fieldKey: field.key,
@@ -139,7 +139,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.key,
         nodePath,
         propStatus,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const onSaveKeyframed = (0, react_1.useCallback)((value, sourceFrame) => {
@@ -157,7 +157,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
             sourceFrame,
             value,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -166,7 +166,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         field.effectSchema,
         field.key,
         nodePath,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     if (field.fieldSchema.type === 'scale') {
@@ -203,7 +203,7 @@ const Value = ({ field, nodePath, validatedLocation, keyframeDisplayOffset }) =>
         return jsx_runtime_1.jsx(TimelineSchemaField_1.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) });
     }
     const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-        codeValue: propStatus,
+        propStatus,
         dragOverrideValue,
         defaultValue: field.fieldSchema.default,
         frame: jsxFrame,
@@ -216,8 +216,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
@@ -226,11 +226,11 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             height: field.rowHeight,
         };
     }, [field.rowHeight]);
-    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectCodeValuesCtx({
-        codeValues,
+    const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
+        propStatuses,
         nodePath,
         effectIndex: field.effectIndex,
-    }), [codeValues, nodePath, field.effectIndex]);
+    }), [propStatuses, nodePath, field.effectIndex]);
     const propStatus = effectStatus.type === 'can-update-effect'
         ? ((_b = (_a = effectStatus.props) === null || _a === void 0 ? void 0 : _a[field.key]) !== null && _b !== void 0 ? _b : null)
         : null;
@@ -278,7 +278,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             value: field.fieldSchema.default,
             defaultValue,
             schema: field.effectSchema,
-            setCodeValues,
+            setPropStatuses,
             clientId: previewServerState.clientId,
         });
     }, [
@@ -290,7 +290,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         field.key,
         nodePath,
         previewServerState,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation.source,
     ]);
     const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -37,7 +37,9 @@ exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
+const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
@@ -49,7 +51,10 @@ const rowSeparator = {
 const TimelineExpandedKeyframeRowUnmemoized = ({ height, keyframes, nodePathInfo, showSeparator }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { selected: rowSelected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
+    const easingSegments = TimelineSelection_1.ENABLE_OUTLINES
+        ? (0, get_timeline_easing_segments_1.getTimelineEasingSegments)(keyframes)
+        : [];
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showSeparator ? jsx_runtime_1.jsx("div", { style: rowSeparator }) : null, jsx_runtime_1.jsxs("div", { style: { ...row, height }, children: [rowSelected && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth) })) : null, easingSegments.map((segment) => (jsx_runtime_1.jsx(TimelineKeyframeEasingLine_1.TimelineKeyframeEasingLine, { fromFrame: segment.fromFrame, toFrame: segment.toFrame, rowHeight: height, nodePathInfo: nodePathInfo, segmentIndex: segment.segmentIndex }, `${segment.segmentIndex}-${segment.fromFrame}-${segment.toFrame}`))), keyframes.map((keyframe) => (jsx_runtime_1.jsx(TimelineKeyframeDiamond_1.TimelineKeyframeDiamond, { frame: keyframe.frame, rowHeight: height, nodePathInfo: nodePathInfo }, keyframe.frame)))] })
         ] }));
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized);

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,28 +56,28 @@ const separator = {
 const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues: visualModeCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        codeValues: visualModeCodeValues,
+        propStatuses: visualModePropStatuses,
     }), [
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
-        visualModeCodeValues,
+        visualModePropStatuses,
     ]);
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: tree, getIsExpanded }), [tree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        codeValues: visualModeCodeValues,
-    }), [sequence, nodePathInfo, getIsExpanded, visualModeCodeValues]);
+        propStatuses: visualModePropStatuses,
+    }), [sequence, nodePathInfo, getIsExpanded, visualModePropStatuses]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...expandedSectionBase,

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -47,7 +47,7 @@ const svgStyle = { display: 'block' };
 const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverrideValue, }) => {
     if (isKeyframedStatus(propStatus)) {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -56,7 +56,7 @@ const getCurrentKeyframeValue = ({ propStatus, jsxFrame, defaultValue, dragOverr
     }
     if (propStatus.status === 'static') {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: propStatus,
+            propStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue,
@@ -82,7 +82,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const setFrame = remotion_1.Internals.useTimelineSetFrame();
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
@@ -142,7 +142,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                     fieldKey,
                     sourceFrame: jsxFrame,
                     schema,
-                    setCodeValues,
+                    setPropStatuses,
                     clientId,
                 });
                 return;
@@ -154,7 +154,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 fieldKey,
                 sourceFrame: jsxFrame,
                 schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId,
             });
             return;
@@ -171,7 +171,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 sourceFrame: jsxFrame,
                 value,
                 schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId,
             });
             return;
@@ -184,7 +184,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             sourceFrame: jsxFrame,
             value,
             schema,
-            setCodeValues,
+            setPropStatuses,
             clientId,
         });
     }, [
@@ -199,7 +199,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         nodePath,
         propStatus,
         schema,
-        setCodeValues,
+        setPropStatuses,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -69,7 +69,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
         }
         return {
             ...diamondBase,
-            cursor: 'pointer',
             left: (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING,
             pointerEvents: 'auto',
             top: rowHeight / 2,

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const TimelineKeyframeEasingLine: React.NamedExoticComponent<{
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly rowHeight: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly segmentIndex: number;
+}>;

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -0,0 +1,120 @@
+"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.TimelineKeyframeEasingLine = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const hitTargetHeight = 12;
+const lineHeight = 2;
+const easingLineButton = {
+    background: 'none',
+    border: 'none',
+    height: hitTargetHeight,
+    padding: 0,
+    position: 'absolute',
+    transform: 'translateY(-50%)',
+};
+const easingLine = {
+    backgroundColor: colors_1.LINE_COLOR,
+    borderRadius: lineHeight / 2,
+    height: lineHeight,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+};
+const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { selected, onSelect, selectable } = (0, TimelineSelection_1.useTimelineEasingSelection)({
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    });
+    const style = (0, react_1.useMemo)(() => {
+        if (timelineWidth === null) {
+            return null;
+        }
+        const fromLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(fromFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const toLeft = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(toFrame, videoConfig.durationInFrames, timelineWidth) - timeline_layout_1.TIMELINE_PADDING;
+        const left = Math.min(fromLeft, toLeft);
+        const width = Math.abs(toLeft - fromLeft);
+        if (width === 0) {
+            return null;
+        }
+        return {
+            ...easingLineButton,
+            left,
+            pointerEvents: selectable ? 'auto' : 'none',
+            top: rowHeight / 2,
+            width,
+        };
+    }, [
+        fromFrame,
+        rowHeight,
+        selectable,
+        timelineWidth,
+        toFrame,
+        videoConfig.durationInFrames,
+    ]);
+    const lineStyle = (0, react_1.useMemo)(() => ({
+        ...easingLine,
+        outline: selected ? `1px solid ${colors_1.BLUE}` : undefined,
+    }), [selected]);
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        if (!selectable || event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect({
+            shiftKey: event.shiftKey,
+            toggleKey: event.metaKey || event.ctrlKey,
+        });
+    }, [onSelect, selectable]);
+    if (style === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: `Easing from frame ${fromFrame} to ${toFrame}`, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx("div", { style: lineStyle }) }));
+};
+exports.TimelineKeyframeEasingLine = react_1.default.memo(TimelineKeyframeEasingLineUnmemoized);

package/dist/components/Timeline/TimelineKeyframedValue.js

@@ -27,7 +27,7 @@ const TimelineKeyframedValue = ({ field, propStatus, keyframeDisplayOffset, drag
     }), [computedValue]);
     const effectiveValue = (0, react_1.useMemo)(() => {
         return remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: fakeStatus,
+            propStatus: fakeStatus,
             dragOverrideValue,
             frame: jsxFrame,
             defaultValue: field.fieldSchema.default,

package/dist/components/Timeline/TimelineNumberField.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
@@ -33,17 +33,25 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             });
         }
     }, [onSave, propStatus]);
-    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 configuredStep = field.fieldSchema.type === 'number' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
+    const stepDecimals = (0, react_1.useMemo)(() => configuredStep === undefined ? null : (0, timeline_field_utils_1.getDecimalPlaces)(configuredStep), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
         const num = Number(v);
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        return digits === 0 ? String(num) : num.toFixed(digits);
+        if (stepDecimals === null) {
+            const digits = (0, timeline_field_utils_1.getDecimalPlaces)(num);
+            return digits === 0 ? String(num) : num.toFixed(digits);
+        }
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces: stepDecimals,
+            fixed: true,
+            value: num,
+        });
     }, [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)
+            ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
             : -Infinity, max: field.fieldSchema.type === 'number'
-            ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+            ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
             : Infinity, step: step, formatter: formatter, rightAlign: false }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelineRotationField.js

@@ -26,7 +26,7 @@ const parseCssRotationToDegrees = (value) => {
     }
 };
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const isCssRotation = field.fieldSchema.type === 'rotation-css';
     const degrees = (0, react_1.useMemo)(() => {
@@ -68,23 +68,29 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             }
         }
     }, [propStatus, onSave, serializeValue]);
-    const step = field.fieldSchema.type === 'rotation-css' ||
+    const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1)
-        : 1;
+        ? field.fieldSchema.step
+        : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1;
     const min = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'rotation-degrees'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 1,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v));
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        const formatted = digits === 0 ? String(num) : num.toFixed(digits);
+        const formatted = (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: false,
+            value: (0, timeline_field_utils_1.normalizeTimelineNumber)(Number(v)),
+        });
         return `${formatted}\u00B0`;
-    }, [stepDecimals]);
+    }, [decimalPlaces]);
     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/TimelineScaleField.js

@@ -24,7 +24,7 @@ const toggleStyle = {
     ...TimelineLayerEye_1.timelineLayerIconContainer,
     border: 'none',
     color: colors_1.LIGHT_COLOR,
-    cursor: 'pointer',
+    cursor: 'default',
     marginRight: 0,
     padding: 0,
 };
@@ -78,7 +78,7 @@ const LinkToggle = ({ linked, onToggle }) => {
     return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, title: linked ? 'Unlink scale axes' : 'Link scale axes', "aria-label": linked ? 'Unlink scale axes' : 'Link scale axes', children: linked ? (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 640", style: linkIconStyle, children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M32 320C32 214 118 128 224 128L288 128L288 192L224 192C153.3 192 96 249.3 96 320C96 390.7 153.3 448 224 448L288 448L288 512L224 512C118 512 32 426 32 320zM608 320C608 426 522 512 416 512L352 512L352 448L416 448C486.7 448 544 390.7 544 320C544 249.3 486.7 192 416 192L352 192L352 128L416 128C522 128 608 214 608 320zM224 288L448 288L448 352L192 352L192 288L224 288z" }) })) : null }));
 };
 const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
@@ -90,21 +90,25 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         fieldKey: field.key,
         defaultValue: defaultLinked,
     });
-    const step = field.fieldSchema.type === 'scale'
-        ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 0.01)
-        : 0.01;
+    const configuredStep = field.fieldSchema.type === 'scale' ? field.fieldSchema.step : undefined;
+    const step = configuredStep !== null && configuredStep !== void 0 ? configuredStep : 0.01;
     const min = field.fieldSchema.type === 'scale'
-        ? ((_b = field.fieldSchema.min) !== null && _b !== void 0 ? _b : -Infinity)
+        ? ((_a = field.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity)
         : -Infinity;
     const max = field.fieldSchema.type === 'scale'
-        ? ((_c = field.fieldSchema.max) !== null && _c !== void 0 ? _c : Infinity)
+        ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
         : Infinity;
-    const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
+    const decimalPlaces = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getTimelineDisplayDecimalPlaces)({
+        defaultDecimalPlaces: 2,
+        step: configuredStep,
+    }), [configuredStep]);
     const formatter = (0, react_1.useCallback)((v) => {
-        const num = Number(v);
-        const digits = Math.max(stepDecimals, (0, timeline_field_utils_1.getDecimalPlaces)(num));
-        return digits === 0 ? String(num) : num.toFixed(digits);
-    }, [stepDecimals]);
+        return (0, timeline_field_utils_1.formatTimelineNumber)({
+            decimalPlaces,
+            fixed: true,
+            value: v,
+        });
+    }, [decimalPlaces]);
     const getDragStart = (0, react_1.useCallback)(() => {
         if (dragStartRef.current === null) {
             dragStartRef.current = [dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY];