@remotion/studio 4.0.527 → 4.0.529

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -13,7 +13,6 @@ const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key")
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const call_add_keyframe_1 = require("./call-add-keyframe");
 const call_delete_keyframe_1 = require("./call-delete-keyframe");
-const get_easing_selection_after_keyframe_delete_1 = require("./get-easing-selection-after-keyframe-delete");
 const get_keyframe_navigation_1 = require("./get-keyframe-navigation");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const normalize_font_weight_for_keyframe_1 = require("./normalize-font-weight-for-keyframe");
@@ -21,7 +20,6 @@ const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineKeyframeDiamondIcon_1 = require("./TimelineKeyframeDiamondIcon");
 const TimelineKeyframeTracksContext_1 = require("./TimelineKeyframeTracksContext");
 const TimelineSelection_1 = require("./TimelineSelection");
-const update_selected_easing_1 = require("./update-selected-easing");
 const NAV_BUTTON_SIZE = 14;
 const INSPECTOR_NAV_BUTTON_WIDTH = NAV_BUTTON_SIZE / 2;
 const INSPECTOR_PREVIOUS_BUTTON_EXTRA_GAP = 1;
@@ -155,15 +153,22 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
             propStatus: sequenceSelectedPropStatus,
             nodePath,
             fileName: nodePath.absolutePath,
+            keyframePlaybackRate: track.keyframePlaybackRate,
             keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: sequenceSelectedPropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
-            sourceFrame: timelinePosition -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+            sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                displayFrame: timelinePosition,
+                propStatus: sequenceSelectedPropStatus,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                     propStatus: sequenceSelectedPropStatus,
                     keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    keyframePlaybackRate: track.keyframePlaybackRate,
                 }),
+                keyframePlaybackRate: track.keyframePlaybackRate,
+            }),
             defaultValue: fieldNode.field.fieldSchema.default,
             dragOverrideValue: ((_c = getDragOverrides(nodePath)) !== null && _c !== void 0 ? _c : {})[fieldNode.field.key],
             schema: track.sequence.controls.schema,
@@ -187,15 +192,22 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         propStatus: effectSelectedPropStatus,
         nodePath,
         fileName: nodePath.absolutePath,
+        keyframePlaybackRate: track.keyframePlaybackRate,
         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: effectSelectedPropStatus,
             keyframeDisplayOffset: track.keyframeDisplayOffset,
+            keyframePlaybackRate: track.keyframePlaybackRate,
         }),
-        sourceFrame: timelinePosition -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            propStatus: effectSelectedPropStatus,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectSelectedPropStatus,
                 keyframeDisplayOffset: track.keyframeDisplayOffset,
+                keyframePlaybackRate: track.keyframePlaybackRate,
             }),
+            keyframePlaybackRate: track.keyframePlaybackRate,
+        }),
         defaultValue: fieldNode.field.fieldSchema.default,
         dragOverrideValue: getEffectDragOverrides(nodePath, fieldNode.field.effectIndex)[fieldNode.field.key],
         schema: fieldNode.field.effectSchema,
@@ -315,10 +327,10 @@ const shouldShowTimelineKeyframeNavigation = ({ propStatus, selected, }) => {
     return isKeyframedStatus(propStatus);
 };
 exports.shouldShowTimelineKeyframeNavigation = shouldShowTimelineKeyframeNavigation;
-const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
+const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, keyframeDisplayOffset, keyframePlaybackRate, defaultValue, dragOverrideValue, schema, effectIndex, nodePathInfo, mode = 'timeline', }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const seekFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -332,9 +344,15 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
-    const jsxFrame = timelinePosition - resolvedKeyframeDisplayOffset;
-    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset), [propStatus, keyframeDisplayOffset]);
+    const jsxFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame: timelinePosition,
+        keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
+        propStatus,
+    });
+    const keyframes = (0, react_1.useMemo)(() => (0, get_timeline_keyframes_1.getTimelineKeyframes)(propStatus, keyframeDisplayOffset, keyframePlaybackRate), [propStatus, keyframeDisplayOffset, keyframePlaybackRate]);
     const hasKeyframeAtCurrentFrame = (0, react_1.useMemo)(() => {
         if (!isKeyframedStatus(propStatus)) {
             return false;
@@ -374,6 +392,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         nodePath,
         fileName,
         keyframeDisplayOffset: resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
         sourceFrame: jsxFrame,
         defaultValue,
         dragOverrideValue,
@@ -387,6 +406,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         fileName,
         jsxFrame,
         resolvedKeyframeDisplayOffset,
+        keyframePlaybackRate,
         nodePath,
         nodePathInfo,
         propStatus,
@@ -420,7 +440,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         tracks,
     ]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame, direction) => {
-        setFrame((current) => {
+        seekFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
             remotion_1.Internals.persistCurrentFrame(next);
             return next;
@@ -430,7 +450,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             durationInFrames: videoConfig.durationInFrames,
             frame,
         });
-    }, [setFrame, videoConfig.durationInFrames, videoConfig.id]);
+    }, [seekFrame, videoConfig.durationInFrames, videoConfig.id]);
     const onPrevious = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         if (previousDisplayFrame !== null) {
@@ -453,19 +473,13 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 const change = getDeleteChange(target);
                 return change === null ? [] : [{ target, change }];
             });
-            const singleDeleteTarget = deleteTargets[0];
-            const easingSelection = deleteTargets.length === 1 &&
-                singleDeleteTarget &&
-                isKeyframedStatus(singleDeleteTarget.target.propStatus) &&
-                (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(singleDeleteTarget.target.propStatus.interpolationFunction)
-                ? (0, get_easing_selection_after_keyframe_delete_1.getEasingSelectionAfterKeyframeDelete)({
-                    deletedSourceFrames: [singleDeleteTarget.target.sourceFrame],
-                    keyframeDisplayOffset: singleDeleteTarget.target.keyframeDisplayOffset,
-                    nodePathInfo: singleDeleteTarget.target.nodePathInfo,
-                    propStatus: singleDeleteTarget.target.propStatus,
-                    timelinePosition,
-                })
-                : null;
+            if (deleteTargets.length === 0) {
+                return;
+            }
+            selectItems(deleteTargets.flatMap(({ target }) => {
+                const propertySelection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(target.nodePathInfo);
+                return propertySelection === null ? [] : [propertySelection];
+            }), { reveal: true });
             const deleteChanges = deleteTargets.map(({ change }) => change);
             await (0, call_delete_keyframe_1.callDeleteKeyframes)({
                 sequenceKeyframes: deleteChanges.filter((change) => !hasEffectIndex(change)),
@@ -473,9 +487,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
                 setPropStatuses,
                 clientId,
             });
-            if (mode === 'timeline' && easingSelection !== null) {
-                selectItems([easingSelection], { reveal: true });
-            }
             return;
         }
         const addChanges = keyframeToggleTargets.flatMap((target) => {
@@ -499,7 +510,8 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
             selectItems(addChanges.map(({ target }) => ({
                 type: 'keyframe',
                 nodePathInfo: target.nodePathInfo,
-                frame: target.sourceFrame + target.keyframeDisplayOffset,
+                frame: target.sourceFrame / target.keyframePlaybackRate +
+                    target.keyframeDisplayOffset,
             })), { reveal: true });
         }
     }, [
@@ -511,7 +523,6 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
         mode,
         selectItems,
         setPropStatuses,
-        timelinePosition,
     ]);
     const previousDisabled = previousDisplayFrame === null;
     const nextDisabled = nextDisplayFrame === null;
@@ -538,7 +549,7 @@ const TimelineKeyframeControls = ({ fieldKey, propStatus, nodePath, fileName, ke
     return (jsx_runtime_1.jsxs("div", { style: mode === 'inspector'
             ? inspectorControlsContainerStyle
             : controlsContainerStyle, children: [
-            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", title: "Previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', title: hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", title: "Next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
+            jsx_runtime_1.jsx("button", { type: "button", style: previousStyle, disabled: previousDisabled, onPointerDown: previousDisabled ? undefined : onPrevious, "aria-label": "Go to previous keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M7 1.5L3 5L7 8.5Z", fill: colors_1.LIGHT_GRAY }) }) }), jsx_runtime_1.jsx("button", { type: "button", style: diamondStyle, disabled: !canToggleKeyframe || !clientId, onPointerDown: canToggleKeyframe && clientId ? onToggleKeyframe : undefined, "aria-label": hasKeyframeAtCurrentFrame ? 'Remove keyframe' : 'Add keyframe', children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: diamondColor, size: 12 }) }), jsx_runtime_1.jsx("button", { type: "button", style: nextStyle, disabled: nextDisabled, onPointerDown: nextDisabled ? undefined : onNext, "aria-label": "Go to next keyframe", children: jsx_runtime_1.jsx("svg", { width: "14", height: "14", viewBox: "0 0 10 10", style: svgStyle, children: jsx_runtime_1.jsx("path", { d: "M3 1.5L7 5L3 8.5Z", fill: colors_1.LIGHT_GRAY }) }) })
         ] }));
 };
 exports.TimelineKeyframeControls = TimelineKeyframeControls;

package/dist/components/Timeline/TimelineKeyframeDiamond.js

@@ -87,6 +87,6 @@ const TimelineKeyframeDiamondUnmemoized = ({ frame, rowHeight, nodePathInfo }) =
     if (style === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, title: `Keyframe at frame ${frame}`, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: style, "aria-label": `Select keyframe at frame ${frame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(TimelineKeyframeDiamondIcon_1.TimelineKeyframeDiamondIcon, { color: colors_1.LIGHT_TEXT, selected: visuallySelected, size: diamondSize }) }));
 };
 exports.TimelineKeyframeDiamond = react_1.default.memo(TimelineKeyframeDiamondUnmemoized);

package/dist/components/Timeline/TimelineKeyframeEasingLine.js

@@ -167,7 +167,7 @@ const TimelineKeyframeEasingLineInteraction = ({ fromFrame, toFrame, nodePathInf
         selectionItem,
     });
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, 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(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
+            jsx_runtime_1.jsx("button", { ref: buttonRef, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, type: "button", style: interactiveStyle, "aria-label": `Select easing from frame ${fromFrame} to ${toFrame}`, onPointerDown: selectable ? onPointerDown : undefined, children: jsx_runtime_1.jsx(exports.TimelineKeyframeEasingLineVisual, { selected: selected }) }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: buttonRef, getItems: getContextMenuItems })
         ] }));
 };
 const TimelineKeyframeEasingLineUnmemoized = ({ fromFrame, toFrame, rowHeight, nodePathInfo, segmentIndex }) => {

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -118,7 +118,7 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
         return jsx_runtime_1.jsx("div", { style: toggleLayout });
     }
     const label = `${isCollapsed ? 'Expand' : 'Collapse'} children of ${sequence.displayName}`;
-    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, title: label, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
+    return (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, "aria-label": label, "aria-expanded": !isCollapsed, onClick: onClick, onPointerDown: stopPropagation, onDoubleClick: stopPropagation, style: {
             ...(0, hoverable_1.hoverableStyle)({
                 idleBackground: colors_1.TRANSPARENT,
                 hoverBackground: colors_1.TRANSPARENT,
@@ -129,6 +129,6 @@ const TimelineLayerChildrenToggle = ({ sequence }) => {
             border: 'none',
             padding: 0,
             cursor: 'default',
-        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: "currentColor" }) }));
+        }, children: jsx_runtime_1.jsx(TimelineCollapseToggle_1.TimelineCollapseToggle, { collapsed: isCollapsed, color: colors_1.CURRENT_COLOR }) }));
 };
 exports.TimelineLayerChildrenToggle = TimelineLayerChildrenToggle;

package/dist/components/Timeline/TimelineList.js

@@ -19,16 +19,24 @@ const TimelineListTrack = react_1.default.memo(({ row }) => {
     var _a;
     var _b, _c;
     const { afterDropLineOffset, siblingIndex, track } = row;
-    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
+    return (jsx_runtime_1.jsx(TimelineSequenceItem_1.TimelineSequenceItem, { afterDropLineOffset: afterDropLineOffset, siblingIndex: siblingIndex, connectedCompositions: (_b = track.connectedCompositions) !== null && _b !== void 0 ? _b : noConnectedCompositions, nestedDepth: track.depth, sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset, keyframePlaybackRate: track.keyframePlaybackRate, sequenceFrameOffset: track.sequenceFrameOffset, numberOfHiddenDuplicates: Math.max(0, ((_c = (_a = track.displayGroup) === null || _a === void 0 ? void 0 : _a.numberOfSequences) !== null && _c !== void 0 ? _c : 1) - 1), showProvisionalVisibilityToggle: track.nodePathInfo === null && track.displayGroup !== null }));
 });
 const TimelineList = () => {
     const { rows, tracksEnd, virtualItems } = (0, TimelineVirtualization_1.useTimelineVirtualization)();
-    return (jsx_runtime_1.jsx("div", { style: { ...container, height: tracksEnd }, children: virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
-                height: virtualItem.size,
-                left: 0,
-                position: 'absolute',
-                top: virtualItem.start,
-                width: '100%',
-            }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key))) }));
+    return (jsx_runtime_1.jsxs("div", { style: { ...container, height: tracksEnd }, children: [
+            jsx_runtime_1.jsx("style", { children: `.remotion-timeline-sequence-name-measure::before {
+				content: attr(data-name);
+				display: block;
+				font-family: Arial, Helvetica, sans-serif;
+				font-size: 12px;
+				line-height: normal;
+				visibility: hidden;
+			}` }), virtualItems.map((virtualItem) => (jsx_runtime_1.jsx("div", { style: {
+                    height: virtualItem.size,
+                    left: 0,
+                    position: 'absolute',
+                    top: virtualItem.start,
+                    width: '100%',
+                }, children: jsx_runtime_1.jsx(TimelineListTrack, { row: rows[virtualItem.index] }) }, virtualItem.key)))] }));
 };
 exports.TimelineList = TimelineList;

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -36,6 +36,6 @@ const useAssetLink = (src) => {
 const TimelineMediaInfo = ({ src }) => {
     const fileName = (0, react_1.useMemo)(() => remotion_1.Internals.getAssetDisplayName(src), [src]);
     const { linkInfo, fileNameStyle } = useAssetLink(src);
-    return (jsx_runtime_1.jsx("div", { style: fileNameStyle, title: linkInfo ? linkInfo.title : fileName, children: fileName }));
+    return (jsx_runtime_1.jsx("div", { role: "group", style: fileNameStyle, "aria-label": linkInfo ? linkInfo.title : fileName, children: fileName }));
 };
 exports.TimelineMediaInfo = TimelineMediaInfo;

package/dist/components/Timeline/TimelineNumberField.js

@@ -39,9 +39,7 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
     const step = field.fieldSchema.type === 'font-weight' && currentValue % 100 === 0
         ? 100
         : (configuredStep !== null && configuredStep !== void 0 ? configuredStep : 1);
-    const allowStepMismatch = field.fieldSchema.type === 'font-weight' ||
-        field.group === 'crop' ||
-        ('kind' in field && field.kind === 'effect-field');
+    const integerOnly = field.fieldSchema.type === 'number' && field.fieldSchema.integer === true;
     const formatter = (0, react_1.useCallback)((v) => {
         return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
             fieldSchema: field.fieldSchema,
@@ -56,6 +54,6 @@ const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange,
             ? ((_b = field.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity)
             : field.fieldSchema.type === 'font-weight'
                 ? 1000
-                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: allowStepMismatch }));
+                : Infinity, step: step, dragSensitivity: field.fieldSchema.type === 'font-weight' && step === 100 ? 0.1 : 1, formatter: formatter, rightAlign: false, allowStepMismatch: true, integerOnly: integerOnly }));
 };
 exports.TimelineNumberField = TimelineNumberField;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -62,7 +62,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     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 }) }));
     }
-    if (field.typeName === 'text-content') {
+    if (field.typeName === 'text-content' || field.typeName === 'svg-path') {
         return (jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (field.typeName === 'font-family') {

package/dist/components/Timeline/TimelineScaleField.js

@@ -81,7 +81,7 @@ const LinkToggle = ({ linked, onToggle }) => {
         e.stopPropagation();
         onToggle();
     }, [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: colors_1.CURRENT_COLOR_LOWERCASE, 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 }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: toggleStyle, onPointerDown: onPointerDown, "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: colors_1.CURRENT_COLOR_LOWERCASE, 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;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -107,8 +107,8 @@ const UnsupportedStatus = ({ label, onFix, formattedValue }) => {
     const stopPointerPropagation = (event) => {
         event.stopPropagation();
     };
-    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), title: formattedValue && typeof label === 'string' ? label : undefined, children: [
-            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, title: "Fix computed Studio value", onClick: (event) => {
+    return (jsx_runtime_1.jsxs("span", { role: "group", style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), "aria-label": formattedValue && typeof label === 'string' ? label : undefined, children: [
+            jsx_runtime_1.jsx("span", { style: formattedValue ? computedValue : unsupportedLabel, inert: formattedValue, children: label }), onFix ? (jsx_runtime_1.jsx("button", { type: "button", className: `${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, style: fixLink, "aria-label": "Fix computed Studio value", onClick: (event) => {
                     stopMousePropagation(event);
                     onFix();
                 }, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));

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

@@ -1,17 +1,17 @@
-import { type CanvasSelectionInteraction, type CanvasSelectionItem, type CanvasSelectionSnapshot } from '@remotion/canvas';
+import type { CanvasSelectionInteraction, CanvasSelectionItem, CanvasSelectionSnapshot } from '@remotion/canvas';
 import { type SequenceNodePathMutation } from '@remotion/studio-shared';
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
 import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
-export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
-export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "rgb(31,36,40)";
-export declare const TIMELINE_HOVER_BACKGROUND = "rgba(255, 255, 255, 0.05)";
-export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
-export declare const TIMELINE_SELECTED_LABEL_TEXT = "black";
+export declare const TIMELINE_SELECTED_BACKGROUND = "var(--remotion-studio-timeline-selected-background-color)";
+export declare const TIMELINE_EXPANDED_SELECTED_BACKGROUND = "var(--remotion-studio-background)";
+export declare const TIMELINE_HOVER_BACKGROUND = "var(--remotion-studio-white-alpha-05)";
+export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "var(--remotion-studio-timeline-selected-label-background-color)";
+export declare const TIMELINE_SELECTED_LABEL_TEXT = "var(--remotion-studio-black)";
 export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
-export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
+export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "var(--remotion-studio-black)" | "var(--remotion-studio-white-alpha-80)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number, backgroundColor?: string) => CSSProperties;
 export declare const getTimelineRowHighlightBackground: ({ showSelectedBackground, selected, containsSelection, hovered, selectedBackground, }: {
     readonly showSelectedBackground: boolean;
@@ -20,8 +20,8 @@ export declare const getTimelineRowHighlightBackground: ({ showSelectedBackgroun
     readonly hovered: boolean;
     readonly selectedBackground: string;
 }) => string | undefined;
-export declare const TIMELINE_BACKGROUND = "#15181B";
-export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
+export declare const TIMELINE_BACKGROUND = "var(--remotion-studio-timeline-background-color)";
+export declare const TIMELINE_TICKS_BACKGROUND = "var(--remotion-studio-background)";
 export type TimelineSelection = CanvasSelectionItem;
 export type TimelineEasingSelection = Extract<TimelineSelection, {
     type: 'easing';

package/dist/components/Timeline/TimelineSelection.js

@@ -27,6 +27,7 @@ const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
+const { EMPTY_CANVAS_SELECTION, getCanvasSelectionAfterInteraction, getCanvasSequenceSelectionKey, useCanvasSelectionController, } = canvas_1.CanvasInternals;
 exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
 exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = colors_1.BACKGROUND;
 exports.TIMELINE_HOVER_BACKGROUND = colors_1.WHITE_ALPHA_05;
@@ -81,8 +82,8 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
-exports.EMPTY_TIMELINE_SELECTION_STATE = canvas_1.EMPTY_CANVAS_SELECTION;
-exports.getTimelineSelectionAfterInteraction = canvas_1.getCanvasSelectionAfterInteraction;
+exports.EMPTY_TIMELINE_SELECTION_STATE = EMPTY_CANVAS_SELECTION;
+exports.getTimelineSelectionAfterInteraction = getCanvasSelectionAfterInteraction;
 const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
     if (state.selectedItems.length === 0 && state.anchor === null) {
         return state;
@@ -292,6 +293,11 @@ const nodePathDescendsFrom = (descendant, ancestor) => {
     }
     return ancestor.auxiliaryKeys.every((key, i) => descendant.auxiliaryKeys[i] === key);
 };
+const timelineRowContainsSelection = (nodePathInfo, selection) => selection.type !== 'guide' &&
+    (nodePathDescendsFrom(selection.nodePathInfo, nodePathInfo) ||
+        ((selection.type === 'keyframe' || selection.type === 'easing') &&
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(selection.nodePathInfo) ===
+                (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo)));
 const getSelectableTimelineSequenceSelections = (tracks) => {
     return tracks.flatMap((track) => {
         if (track.nodePathInfo === null ||
@@ -377,6 +383,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
                     nodePath: nodePathInfo.sequenceSubscriptionKey,
                     propStatuses,
                     keyframeDisplayOffset: track.keyframeDisplayOffset,
+                    keyframePlaybackRate: track.keyframePlaybackRate,
                     getDragOverrides,
                     getEffectDragOverrides,
                     timelinePosition,
@@ -405,7 +412,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
     });
 };
 exports.getSelectableTimelineItems = getSelectableTimelineItems;
-exports.getTimelineSequenceSelectionKey = canvas_1.getCanvasSequenceSelectionKey;
+exports.getTimelineSequenceSelectionKey = getCanvasSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { canSelect } = (0, exports.useTimelineSelection)();
@@ -539,7 +546,8 @@ const TimelineSelectionProvider = ({ children }) => {
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
     const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
-    const selectionController = (0, canvas_1.useCanvasSelectionController)();
+    const effectOperationsAvailable = (0, browser_studio_operations_1.canUseEffectOperations)();
+    const selectionController = useCanvasSelectionController();
     const selectionState = (0, canvas_1.useCanvasSelection)(selectionController);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
@@ -558,7 +566,8 @@ const TimelineSelectionProvider = ({ children }) => {
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
         (!window.remotion_isReadOnlyStudio ||
             keyframeOperationsAvailable ||
-            item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
+            (effectOperationsAvailable && item.type === 'sequence-effect') ||
+            item.type === 'sequence'), [canSelect, effectOperationsAvailable, keyframeOperationsAvailable]);
     const availableSelectionState = selectionScope.current === timelineSelectionScope
         ? selectionState
         : exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -713,8 +722,7 @@ const TimelineSelectionProvider = ({ children }) => {
         selectionController.clear();
     }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
-        return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+        return availableSelectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [availableSelectedItems]);
     const remapSelectionNodePaths = (0, react_1.useCallback)((mutations) => {
         const remapItem = (item) => {
@@ -1111,8 +1119,7 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
         }
         return selectionContext
             .getSnapshot()
-            .selectedItems.some((selected) => selected.type !== 'guide' &&
-            nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
+            .selectedItems.some((selected) => timelineRowContainsSelection(nodePathInfo, selected));
     }, [nodePathInfo, selectionContext]);
     return (0, use_sync_external_store_1.useSyncExternalStore)(selectionContext.subscribe, getContainsSelection, getContainsSelection);
 };

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

@@ -2,7 +2,9 @@ import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineSequence: React.NamedExoticComponent<{
-    readonly s: TSequence;
+    readonly s: TSequence & {
+        loopDisplay: import("@remotion/canvas").TimelineLoopDisplay | undefined;
+    };
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;