@remotion/studio 4.0.485 → 4.0.486

package/dist/components/Timeline/TimelineMediaInfo.js

@@ -12,14 +12,14 @@ const lineStyle = {
     textOverflow: 'ellipsis',
     minWidth: 0,
     fontSize: 12,
-    color: colors_1.VERY_LIGHT_TEXT,
+    color: colors_1.WHITE_ALPHA_30,
     display: 'inline-block',
 };
 const useAssetLink = (src) => {
     const linkInfo = (0, react_1.useMemo)(() => (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(src), [src]);
     const fileNameStyle = (0, react_1.useMemo)(() => ({
         ...lineStyle,
-        color: colors_1.VERY_LIGHT_TEXT,
+        color: colors_1.WHITE_ALPHA_30,
         textDecoration: 'none',
         display: 'inline-block',
         overflow: 'hidden',

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
+const TimelineFontFamilyField_1 = require("./TimelineFontFamilyField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
@@ -56,6 +57,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'text-content') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: 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') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineRotationField.js

@@ -4,8 +4,8 @@ exports.TimelineRotationField = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
-const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
+const timeline_rotation_field_utils_1 = require("./timeline-rotation-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a, _b;
@@ -67,11 +67,12 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         }
     }, [propStatus, onSave, serializeValue]);
     const formatter = (0, react_1.useCallback)((v) => {
-        return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+        return (0, timeline_rotation_field_utils_1.formatTimelineRotationFieldValue)({
+            decimalPlaces,
             fieldSchema: field.fieldSchema,
             value: v,
         });
-    }, [field.fieldSchema]);
+    }, [decimalPlaces, field.fieldSchema]);
     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

@@ -76,7 +76,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: "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 }));
+    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 }));
 };
 const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, scaleLockNodePath, }) => {
     var _a, _b;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
 import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TIMELINE_COMPUTED_EFFECT_FIX_LINK = "https://www.remotion.dev/docs/studio/interactivity-best-practices#keep-effects-editable";
 export declare const UnsupportedStatus: React.FC<{
     readonly label: string;
+    readonly fixHref?: string;
 }>;
 export declare const TimelineNonEditableStatus: React.FC<{
     readonly propStatus: CanUpdateSequencePropStatusFalse;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -1,24 +1,64 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = void 0;
+exports.TimelineFieldValue = exports.TimelineNonEditableStatus = exports.UnsupportedStatus = exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const colors_1 = require("../../helpers/colors");
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const TimelineArrayField_1 = require("./TimelineArrayField");
 const TimelinePrimitiveFieldValue_1 = require("./TimelinePrimitiveFieldValue");
+const INTERACTIVITY_BEST_PRACTICES_DOCS = 'https://www.remotion.dev/docs/studio/interactivity-best-practices';
+const TIMELINE_COMPUTED_VALUE_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-editable-values-visible`;
+exports.TIMELINE_COMPUTED_EFFECT_FIX_LINK = `${INTERACTIVITY_BEST_PRACTICES_DOCS}#keep-effects-editable`;
+const unsupportedStatusWrapper = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    gap: 4,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
 const unsupportedLabel = {
-    color: 'rgba(255, 255, 255, 0.4)',
+    color: colors_1.WHITE_ALPHA_40,
     fontSize: 12,
     fontStyle: 'italic',
-    userSelect: 'none',
-    WebkitUserSelect: 'none',
 };
-const UnsupportedStatus = ({ label }) => {
-    return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label });
+const fixLinkBase = {
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-block',
+    fontSize: 10,
+    fontStyle: 'normal',
+    fontWeight: 600,
+    lineHeight: 1,
+    textDecoration: 'none',
+    width: 17,
+};
+const UnsupportedStatus = ({ label, fixHref }) => {
+    const [hovered, setHovered] = react_1.default.useState(false);
+    const [focused, setFocused] = react_1.default.useState(false);
+    const visible = hovered || focused;
+    const fixLink = react_1.default.useMemo(() => {
+        return {
+            ...fixLinkBase,
+            opacity: visible ? 1 : 0,
+            pointerEvents: visible ? 'auto' : 'none',
+        };
+    }, [visible]);
+    const stopMousePropagation = (event) => {
+        event.stopPropagation();
+    };
+    const stopPointerPropagation = (event) => {
+        event.stopPropagation();
+    };
+    return (jsx_runtime_1.jsxs("span", { style: unsupportedStatusWrapper, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
+            jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: label }), fixHref ? (jsx_runtime_1.jsx("a", { href: fixHref, target: "_blank", rel: "noreferrer", style: fixLink, title: "Open docs to fix computed Studio values", onClick: stopMousePropagation, onDoubleClick: stopMousePropagation, onPointerDown: stopPointerPropagation, onFocus: () => setFocused(true), onBlur: () => setFocused(false), tabIndex: visible ? 0 : -1, children: "Fix" })) : null] }));
 };
 exports.UnsupportedStatus = UnsupportedStatus;
 const TimelineNonEditableStatus = ({ propStatus }) => {
     if (propStatus.status === 'computed') {
-        return (jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus) }));
+        return (jsx_runtime_1.jsx(exports.UnsupportedStatus, { label: (0, get_timeline_keyframes_1.getComputedStatusLabel)(propStatus), fixHref: TIMELINE_COMPUTED_VALUE_FIX_LINK }));
     }
 };
 exports.TimelineNonEditableStatus = TimelineNonEditableStatus;

package/dist/components/Timeline/TimelineScrollable.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineScrollable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineSelection_1 = require("./TimelineSelection");
@@ -15,8 +16,8 @@ const outer = {
     backgroundColor: TimelineSelection_1.TIMELINE_BACKGROUND,
 };
 const marqueeStyle = {
-    backgroundColor: 'rgba(70, 130, 255, 0.16)',
-    border: '1px solid rgba(70, 130, 255, 0.75)',
+    backgroundColor: colors_1.TIMELINE_MARQUEE_BLUE_ALPHA_16,
+    border: colors_1.BORDER_TIMELINE_MARQUEE_BLUE,
     boxSizing: 'border-box',
     pointerEvents: 'none',
     position: 'fixed',

package/dist/components/Timeline/TimelineSelection.js

@@ -18,9 +18,9 @@ const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
-exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
-exports.TIMELINE_SELECTED_LABEL_BACKGROUND = '#B0B0B0';
-exports.TIMELINE_SELECTED_LABEL_TEXT = 'black';
+exports.TIMELINE_SELECTED_BACKGROUND = colors_1.TIMELINE_SELECTED_BACKGROUND_COLOR;
+exports.TIMELINE_SELECTED_LABEL_BACKGROUND = colors_1.TIMELINE_SELECTED_LABEL_BACKGROUND_COLOR;
+exports.TIMELINE_SELECTED_LABEL_TEXT = colors_1.BLACK;
 exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 const getTimelineSelectedLabelStyle = (selected, subcategory) => {
     return {
@@ -29,7 +29,7 @@ const getTimelineSelectedLabelStyle = (selected, subcategory) => {
         ...(selected
             ? {
                 backgroundColor: subcategory
-                    ? 'rgba(255, 255, 255, 0.1)'
+                    ? colors_1.WHITE_ALPHA_10
                     : exports.TIMELINE_SELECTED_LABEL_BACKGROUND,
             }
             : {}),
@@ -39,7 +39,7 @@ exports.getTimelineSelectedLabelStyle = getTimelineSelectedLabelStyle;
 const getTimelineColor = (selected, subcategory) => {
     return selected && !subcategory
         ? exports.TIMELINE_SELECTED_LABEL_TEXT
-        : 'rgba(255, 255, 255, 0.8)';
+        : colors_1.WHITE_ALPHA_80;
 };
 exports.getTimelineColor = getTimelineColor;
 const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor = exports.TIMELINE_SELECTED_BACKGROUND) => ({
@@ -58,7 +58,7 @@ const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, c
         : undefined;
 };
 exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
-exports.TIMELINE_BACKGROUND = '#0F1113';
+exports.TIMELINE_BACKGROUND = colors_1.TIMELINE_BACKGROUND_COLOR;
 exports.TIMELINE_TICKS_BACKGROUND = colors_1.BACKGROUND;
 const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
     return shiftKey || metaKey || ctrlKey;

package/dist/components/Timeline/TimelineSequence.js

@@ -63,9 +63,6 @@ const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
-const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
-const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
-const IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
 const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
@@ -120,23 +117,23 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
-							-45deg,
-							transparent,
-							transparent 2px,
-							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 2px,
-							rgba(255, 255, 255, ${isPremounting ? 0.5 : 0.2}) 4px
-						)`,
+								-45deg,
+								${colors_1.TRANSPARENT},
+								${colors_1.TRANSPARENT} 2px,
+								${isPremounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 2px,
+								${isPremounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 4px
+							)`,
                     position: 'absolute',
                 } })) : null, postmountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: postmountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
-							-45deg,
-							transparent,
-							transparent 2px,
-							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 2px,
-							rgba(255, 255, 255, ${isPostmounting ? 0.5 : 0.2}) 4px
-						)`,
+								-45deg,
+								${colors_1.TRANSPARENT},
+								${colors_1.TRANSPARENT} 2px,
+								${isPostmounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 2px,
+								${isPostmounting ? colors_1.WHITE_ALPHA_50 : colors_1.WHITE_ALPHA_20} 4px
+							)`,
                     position: 'absolute',
                     right: 0,
                 } })) : null, children, s.type !== 'audio' &&
@@ -370,19 +367,19 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const style = (0, react_1.useMemo)(() => {
         return {
             background: s.type === 'audio'
-                ? AUDIO_GRADIENT
+                ? colors_1.TIMELINE_AUDIO_GRADIENT
                 : s.type === 'video'
-                    ? VIDEO_GRADIENT
+                    ? colors_1.TIMELINE_VIDEO_GRADIENT
                     : s.type === 'image'
-                        ? IMAGE_GRADIENT
+                        ? colors_1.TIMELINE_IMAGE_GRADIENT
                         : colors_1.BLUE,
-            border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
+            border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.WHITE_ALPHA_20}`,
             borderRadius: 2,
             position: 'absolute',
             height: (0, timeline_layout_1.getTimelineLayerHeight)(s.type),
             marginLeft,
             width,
-            color: 'white',
+            color: colors_1.WHITE,
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceFrame = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const relativeFrameStyle = {
     alignItems: 'center',
     display: 'flex',
     fontSize: 11,
     fontFamily: 'Arial, Helvetica, sans-serif',
     gap: 4,
-    color: 'white',
+    color: colors_1.WHITE,
     opacity: 0.5,
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
@@ -20,7 +21,7 @@ const snowflakeStyle = {
     width: 12,
 };
 const FreezeFrameIcon = () => {
-    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: snowflakeStyle, fill: "currentColor", children: jsx_runtime_1.jsx("path", { d: "M288 32l0-32-64 0 0 88.4-64-64-39.6 39.6 103.6 103.6 0 56.4-56.4 0-103.6-103.6-39.6 39.6 64 64-88.4 0 0 64 88.4 0c-33.5 33.5-54.9 54.9-64 64L64 391.6c2.5-2.5 37.1-37.1 103.6-103.6l56.4 0 0 56.4C157.5 410.9 122.9 445.5 120.4 448L160 487.6c9.1-9.1 30.5-30.5 64-64l0 88.4 64 0 0-88.4 64 64 39.6-39.6-103.6-103.6 0-56.4 56.4 0 103.6 103.6 39.6-39.6-64-64 88.4 0 0-64-88.4 0c33.5-33.5 54.9-54.9 64-64L448 120.4c-2.5 2.5-37.1 37.1-103.6 103.6l-56.4 0 0-56.4C354.5 101.1 389.1 66.5 391.6 64L352 24.4c-9.1 9.1-30.5 30.5-64 64L288 32z" }) }));
+    return (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: snowflakeStyle, fill: colors_1.CURRENT_COLOR, children: jsx_runtime_1.jsx("path", { d: "M288 32l0-32-64 0 0 88.4-64-64-39.6 39.6 103.6 103.6 0 56.4-56.4 0-103.6-103.6-39.6 39.6 64 64-88.4 0 0 64 88.4 0c-33.5 33.5-54.9 54.9-64 64L64 391.6c2.5-2.5 37.1-37.1 103.6-103.6l56.4 0 0 56.4C157.5 410.9 122.9 445.5 120.4 448L160 487.6c9.1-9.1 30.5-30.5 64-64l0 88.4 64 0 0-88.4 64 64 39.6-39.6-103.6-103.6 0-56.4 56.4 0 103.6 103.6 39.6-39.6-64-64 88.4 0 0-64-88.4 0c33.5-33.5 54.9-54.9 64-64L448 120.4c-2.5 2.5-37.1 37.1-103.6 103.6l-56.4 0 0-56.4C354.5 101.1 389.1 66.5 391.6 64L352 24.4c-9.1 9.1-30.5 30.5-64 64L288 32z" }) }));
 };
 const TimelineSequenceFrame = ({ roundedFrame, frozenFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsxs("div", { style: relativeFrameStyle, children: [frozenFrame === null ? null : jsx_runtime_1.jsx(FreezeFrameIcon, {}), frozenFrame !== null && frozenFrame !== void 0 ? frozenFrame : (premounted

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -38,6 +38,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
@@ -74,8 +75,8 @@ const labelContainerStyle = {
     minWidth: 0,
 };
 const effectDropHighlight = {
-    backgroundColor: 'rgba(0, 155, 255, 0.16)',
-    outline: '1px solid rgba(0, 155, 255, 0.75)',
+    backgroundColor: colors_1.TIMELINE_DROP_BLUE_ALPHA_16,
+    outline: colors_1.BORDER_TIMELINE_DROP_BLUE,
     outlineOffset: -1,
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
@@ -95,7 +96,7 @@ const sequenceReorderWrapper = {
     position: 'relative',
 };
 const sequenceReorderLineBase = {
-    backgroundColor: '#0b84ff',
+    backgroundColor: colors_1.TIMELINE_BLUE,
     height: 2,
     left: 0,
     pointerEvents: 'none',
@@ -104,10 +105,10 @@ const sequenceReorderLineBase = {
     zIndex: 1,
 };
 const sequenceReorderRejectionStyle = {
-    backgroundColor: 'rgba(0, 0, 0, 0.85)',
-    border: '1px solid rgba(255, 255, 255, 0.2)',
+    backgroundColor: colors_1.BLACK_ALPHA_85,
+    border: colors_1.BORDER_WHITE_ALPHA_20,
     borderRadius: 4,
-    color: 'white',
+    color: colors_1.WHITE,
     fontSize: 11,
     lineHeight: 1.2,
     maxWidth: 260,
@@ -501,7 +502,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
-            color: 'white',
+            color: colors_1.WHITE,
             fontFamily: 'Arial, Helvetica, sans-serif',
             wordBreak: 'break-all',
             textAlign: 'left',

package/dist/components/Timeline/TimelineSequenceName.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineSequenceName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const TimelineSelection_1 = require("./TimelineSelection");
 const MAX_DISPLAY_NAME_LENGTH = 1000;
 const MAX_RENAME_INPUT_WIDTH = 240;
@@ -38,7 +39,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
     const inputStyle = (0, react_1.useMemo)(() => {
         return {
             ...style,
-            background: 'transparent',
+            background: colors_1.TRANSPARENT,
             border: 0,
             color: (0, TimelineSelection_1.getTimelineColor)(false, false),
             fontFamily: 'inherit',
@@ -94,7 +95,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
     }, [save]);
     if (editing) {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: rgba(255, 255, 255, 0.72); color: black; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
+                jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${colors_1.WHITE_ALPHA_72}; color: ${colors_1.BLACK}; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
             ] }));
     }
     return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -59,7 +59,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
     const clientId = previewServerState.type === 'connected'
         ? previewServerState.clientId
         : null;
-    const onSave = (0, react_1.useCallback)((value) => {
+    const onSave = (0, react_1.useCallback)((value, options) => {
         var _a;
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
@@ -87,6 +87,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
                     value,
                     defaultValue,
                     schema,
+                    sourceEdit: options === null || options === void 0 ? void 0 : options.sourceEdit,
                 },
             ],
             setPropStatuses,

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { MoveEffectKeyframeChange, MoveSequenceKeyframeChange } from './call-move-keyframe';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
 export type TimelineSequenceDurationDragTarget = {
@@ -17,9 +18,19 @@ export type TimelineSequenceLeftEdgeDragTarget = {
     readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceFromDragTarget = {
+    readonly effectKeyframes: TimelineSequenceEffectKeyframeDragTarget[];
     readonly fileName: string;
     readonly initialFrom: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly sequenceKeyframes: TimelineSequenceKeyframeDragTarget[];
+};
+type TimelineSequenceKeyframeDragTarget = {
+    readonly fieldKey: string;
+    readonly schema: InteractivitySchema;
+    readonly status: CanUpdateSequencePropStatusKeyframed;
+};
+type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
+    readonly effectIndex: number;
 };
 export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
     readonly initialDuration: number;
@@ -56,6 +67,13 @@ export declare const getTimelineSequenceFromDragChanges: ({ targets, deltaFrames
     readonly targets: readonly TimelineSequenceFromDragTarget[];
     readonly deltaFrames: number;
 }) => SaveSequencePropChange[];
+export declare const getTimelineSequenceFromDragKeyframeMoves: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceFromDragTarget[];
+    readonly deltaFrames: number;
+}) => {
+    readonly effectKeyframes: MoveEffectKeyframeChange[];
+    readonly sequenceKeyframes: MoveSequenceKeyframeChange[];
+};
 export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
@@ -95,3 +113,4 @@ export declare const TimelineSequenceRightEdgeDragHandle: React.FC<{
     readonly windowWidth: number;
     readonly timelineDurationInFrames: number;
 }>;
+export {};