@remotion/studio 4.0.527 → 4.0.528

package/dist/components/Timeline/LoopedTimelineIndicators.js

@@ -7,18 +7,19 @@ const LoopedIndicator_1 = require("./LoopedIndicator");
 const row = {
     overflow: 'hidden',
 };
-const LoopedTimelineIndicator = ({ loops, fullWidth, visibleOffset, visibleWidth }) => {
-    if (loops <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
+const LoopedTimelineIndicator = ({ loops, phase, fullWidth, visibleOffset, visibleWidth }) => {
+    if (loops + phase <= 1 || fullWidth <= 0 || visibleWidth <= 0) {
         return null;
     }
     const loopWidth = fullWidth / loops;
-    const lastBoundaryIndex = Math.ceil(loops) - 1;
-    const firstVisibleBoundaryIndex = Math.max(1, Math.floor(visibleOffset / loopWidth));
-    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth) / loopWidth));
+    const phaseWidth = phase * loopWidth;
+    const lastBoundaryIndex = Math.ceil(loops + phase) - 1;
+    const firstVisibleBoundaryIndex = Math.max(1, Math.floor((visibleOffset + phaseWidth) / loopWidth));
+    const lastVisibleBoundaryIndex = Math.min(lastBoundaryIndex, Math.ceil((visibleOffset + visibleWidth + phaseWidth) / loopWidth));
     const visibleBoundaryCount = Math.max(0, lastVisibleBoundaryIndex - firstVisibleBoundaryIndex + 1);
     const boundaries = new Array(visibleBoundaryCount)
         .fill(true)
-        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth);
+        .map((_, index) => (firstVisibleBoundaryIndex + index) * loopWidth - phaseWidth);
     return (jsx_runtime_1.jsx(remotion_1.Internals.AbsoluteFillElement, { style: row, children: boundaries.map((boundary) => {
             return (jsx_runtime_1.jsx("div", { style: {
                     position: 'absolute',

package/dist/components/Timeline/TimelineArrayField.js

@@ -67,7 +67,7 @@ const getFallbackItemValue = (field) => {
         return [0.5, 0.5];
     }
     if (field.item.type === 'color') {
-        return colors_1.BLACK_FULL_HEX;
+        return '#000000';
     }
     if (field.item.type === 'enum') {
         const [firstVariant] = field.item.variants;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -560,7 +560,6 @@ const TimelineClipboardKeybindings = () => {
                         }
                         const nextSelection = (0, delete_selected_timeline_item_1.getTimelineSelectionAfterDeletingItems)({
                             selections: selectedItems,
-                            propStatuses,
                         });
                         if (nextSelection.length === 0) {
                             clearSelection();

package/dist/components/Timeline/TimelineColorField.js

@@ -31,7 +31,7 @@ const TimelineColorField = ({ field, effectiveValue, propStatus, onSave, onDragV
     const currentValue = typeof effectiveValue === 'string'
         ? effectiveValue
         : field.fieldSchema.type === 'color'
-            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : colors_1.BLACK_HEX)
+            ? ((_a = field.fieldSchema.default) !== null && _a !== void 0 ? _a : '#000')
             : '';
     const onChange = (0, react_1.useCallback)((next) => {
         onDragValueChange(next);

package/dist/components/Timeline/TimelineDragHandler.js

@@ -122,7 +122,7 @@ const TimelineDragHandlerInner = () => {
         shouldApplyCssTransforms: true,
     });
     const { isHighestContext } = (0, z_index_1.useZIndex)();
-    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSeekFrame();
     const width = (0, timeline_scroll_logic_1.getTimelineContentWidth)();
     const left = (_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0;
     const [dragging, setDragging] = (0, react_1.useState)({

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

@@ -18,6 +18,7 @@ export declare const TimelineEffectPropItem: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
     readonly revealInInspector: boolean;
     readonly runtimeValueStore: RuntimeValueStore | null;

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -228,11 +228,16 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
     return (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, effectiveValue: effectiveValue, scaleLockNodePath: null }));
 };
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
-const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, runtimeValueStore, }) => {
+const TimelineEffectPropValueAtCurrentFrame = ({ field, nodePath, validatedLocation, keyframeDisplayOffset, keyframePlaybackRate, propStatus, runtimeValueStore, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
-    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: timelinePosition - keyframeDisplayOffset, runtimeValueStore: runtimeValueStore }));
+    return (jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: timelinePosition,
+            keyframeDisplayOffset,
+            keyframePlaybackRate,
+            propStatus,
+        }), runtimeValueStore: runtimeValueStore }));
 };
-const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
+const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, revealInInspector, runtimeValueStore, }) => {
     var _a;
     var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
@@ -241,6 +246,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     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, revealInInspector);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const style = (0, react_1.useMemo)(() => {
         return field.typeName === 'text-content'
             ? fieldRowBase
@@ -257,6 +263,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const resolvedKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
         propStatus,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     const dragOverrideValue = (0, react_1.useMemo)(() => {
         const overrides = getEffectDragOverrides(nodePath, field.effectIndex);
@@ -273,7 +280,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 propStatus,
                 selected: selection.selected,
                 keyframable,
-            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
+            })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: field.effectSchema, effectIndex: field.effectIndex, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -361,7 +368,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
             property: field.key,
         }).catch(() => undefined);
     }, [canOpenInEditor, defaultEditorId, field.key, validatedLocation]);
-    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, runtimeValueStore: runtimeValueStore }) }) }));
+    const row = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected || containsSelection, children: jsx_runtime_1.jsx(TimelineEffectPropValueAtCurrentFrame, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, keyframeDisplayOffset: resolvedKeyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, propStatus: propStatus, runtimeValueStore: runtimeValueStore }) }) }));
     return jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: row });
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -16,6 +16,7 @@ type TimelineExpandedRowProps = {
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly schema: InteractivitySchema;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly keyframeControlsMode: TimelineKeyframeControlsMode;
 };
 export declare const TimelineExpandedRow: React.NamedExoticComponent<TimelineExpandedRowProps>;

package/dist/components/Timeline/TimelineExpandedRow.js

@@ -22,10 +22,11 @@ const rowLabel = {
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
-const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframeControlsMode, }) => {
+const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getIsExpanded, toggleTrack, validatedLocation, nodePath, schema, keyframeDisplayOffset, keyframePlaybackRate, keyframeControlsMode, }) => {
     const rowDepth = (rowDepthBase !== null && rowDepthBase !== void 0 ? rowDepthBase : (0, timeline_row_layout_1.getExpandedRowDepth)({ nestedDepth, treeDepth: 0 })) + depth;
     const isInspector = keyframeControlsMode === 'inspector';
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(node.nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(node.nodePathInfo);
     const labelStyle = react_1.default.useMemo(() => ({
         ...rowLabel,
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selection.selected, true),
@@ -47,14 +48,14 @@ const TimelineExpandedRowInner = ({ node, depth, nestedDepth, rowDepthBase, getI
         const isExpanded = getIsExpanded(node.nodePathInfo);
         return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: () => toggleTrack(node.nodePathInfo), label: `${node.label} section`, disabled: false }), style: {
                 height: timeline_layout_1.TREE_GROUP_ROW_HEIGHT,
-            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
+            }, selected: selection.selected, selectable: selection.selectable, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: null, children: jsx_runtime_1.jsx("span", { style: labelStyle, children: node.label }) }));
     }
     if (node.field) {
         if (node.field.kind === 'effect-field') {
-            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
+            return (jsx_runtime_1.jsx(TimelineEffectPropItem_1.TimelineEffectPropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: isInspector ? rowDepth - 1 : rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, revealInInspector: !isInspector, runtimeValueStore: node.runtimeValueStore }));
         }
         if (node.field.kind === 'sequence-field') {
-            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
+            return (jsx_runtime_1.jsx(TimelineSequencePropItem_1.TimelineSequencePropItem, { field: node.field, validatedLocation: validatedLocation, rowDepth: rowDepth, nodePath: nodePath, nodePathInfo: node.nodePathInfo, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: keyframeControlsMode, runtimeValue: node.runtimeValue }));
         }
         throw new Error('Unexpected field kind: ' + JSON.stringify(node.field));
     }

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

@@ -8,4 +8,5 @@ export declare const TimelineExpandedSection: React.FC<{
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly nestedDepth: number;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 }>;

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -55,7 +55,7 @@ const separator = {
     height: 0,
     borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
 };
-const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, }) => {
+const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, nestedDepth, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -79,7 +79,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
         return null;
     }
     return (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowSelectedBackgroundContext.Provider, { value: TimelineSelection_1.TIMELINE_EXPANDED_SELECTED_BACKGROUND, children: jsx_runtime_1.jsx("div", { style: style, children: flat.map(({ node, depth }, i) => {
-                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "timeline" })
+                return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: nestedDepth, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframePlaybackRate: keyframePlaybackRate, keyframeControlsMode: "timeline" })
                     ] }, JSON.stringify(node.nodePathInfo)));
             }) }) }));
 };

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

@@ -5,6 +5,7 @@ type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
 };
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
 export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -9,17 +9,19 @@ const react_1 = __importDefault(require("react"));
 const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset, keyframePlaybackRate }) => {
     const { rows, expandedHeight } = (0, use_expanded_track_keyframe_rows_1.useExpandedTrackKeyframeRows)({
         sequence,
         nodePathInfo,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
 const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
     var _a, _b, _c, _d;
     return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        first.keyframePlaybackRate === second.keyframePlaybackRate &&
         ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
         ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
             ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&

package/dist/components/Timeline/TimelineFontFamilyField.js

@@ -22,9 +22,9 @@ const ROW_HEIGHT = 30;
 const LIST_HEIGHT = 280;
 const OVERSCAN = 10;
 const POPOVER_WIDTH = 280;
-const CLEAR_HOVER = 'rgba(255, 255, 255, 0.06)';
-const INPUT_BORDER_COLOR_UNHOVERED = 'rgba(0, 0, 0, 0.6)';
-const INPUT_BORDER_COLOR_HOVERED = 'rgba(255, 255, 255, 0.05)';
+const CLEAR_HOVER = colors_1.WHITE_ALPHA_06;
+const INPUT_BORDER_COLOR_UNHOVERED = colors_1.BLACK_ALPHA_60;
+const INPUT_BORDER_COLOR_HOVERED = colors_1.WHITE_ALPHA_05;
 const googleFonts = google_fonts_list_1.GOOGLE_FONTS_LIST.map((font) => ({
     id: `google-${font.importName}`,
     fontFamily: font.fontFamily,
@@ -67,7 +67,7 @@ const triggerStyle = {
     borderWidth: 1,
     borderStyle: 'solid',
     maxWidth: 140,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
 };
@@ -83,17 +83,17 @@ const popover = {
     position: 'fixed',
     width: POPOVER_WIDTH,
     backgroundColor: colors_1.BACKGROUND,
-    color: 'white',
+    color: colors_1.WHITE,
     userSelect: 'none',
     WebkitUserSelect: 'none',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
+    border: `1px solid ${colors_1.WHITE_ALPHA_08}`,
 };
 const searchInput = {
     boxSizing: 'border-box',
     width: '100%',
     backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: '1px solid rgba(255, 255, 255, 0.12)',
-    color: 'white',
+    border: colors_1.BORDER_WHITE_ALPHA_12,
+    color: colors_1.WHITE,
     fontSize: 12,
     outline: 'none',
     padding: '6px 8px',
@@ -113,8 +113,8 @@ const optionButton = {
     height: ROW_HEIGHT,
     width: '100%',
     border: 'none',
-    background: 'transparent',
-    color: 'white',
+    background: colors_1.TRANSPARENT,
+    color: colors_1.WHITE,
     display: 'flex',
     alignItems: 'center',
     padding: '0 8px',
@@ -136,7 +136,7 @@ const optionSource = {
 };
 const errorText = {
     padding: '6px 8px',
-    color: '#ff8a8a',
+    color: colors_1.FONT_FAMILY_ERROR_COLOR,
     fontSize: 10,
 };
 const portalStyle = ({ size, }) => {
@@ -520,7 +520,7 @@ const TimelineFontFamilyField = ({ field, propStatus, effectiveValue, onSave, on
                                                             ? CLEAR_HOVER
                                                             : isSelected
                                                                 ? colors_1.SELECTED_BACKGROUND
-                                                                : 'transparent',
+                                                                : colors_1.TRANSPARENT,
                                                     }, onPointerEnter: () => setHighlightedIndex(actualIndex), onPointerDown: (event) => {
                                                         event.preventDefault();
                                                         event.stopPropagation();

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

@@ -21,6 +21,7 @@ export declare const TimelineKeyframeControls: React.FC<{
     readonly nodePath: SequencePropsSubscriptionKey;
     readonly fileName: string;
     readonly keyframeDisplayOffset: number;
+    readonly keyframePlaybackRate: number;
     readonly defaultValue: unknown;
     readonly dragOverrideValue: DragOverrideValue | undefined;
     readonly schema: InteractivitySchema;

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 setFrame = 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,
@@ -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;

package/dist/components/Timeline/TimelineLayerChildren.js

@@ -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,7 +19,7 @@ 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)();

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/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';