@remotion/studio 4.0.484 → 4.0.486

package/dist/components/Timeline/TimelineLayerEye.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const eyeIcon = {
     width: 12,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
     pointerEvents: 'none',
 };
 const effectIcon = {
@@ -22,7 +22,7 @@ exports.timelineLayerIconContainer = {
     height: 16,
     width: 16,
     borderRadius: 2,
-    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    backgroundColor: colors_1.BLACK_ALPHA_40,
     display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -39,7 +39,7 @@ const TimelineLayerEye = ({ onInvoked, hidden, type }) => {
             return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 10 14", fill: "none", style: speakerIcon, children: jsx_runtime_1.jsx("path", { d: "M9.40938 0.0869018C9.76875 0.249402 10 0.605652 10 0.999402V12.9994C10 13.3932 9.76875 13.7494 9.40938 13.9119C9.05 14.0744 8.62813 14.0088 8.33438 13.7463L4.11875 9.9994H2C0.896875 9.9994 0 9.10253 0 7.9994V5.9994C0 4.89628 0.896875 3.9994 2 3.9994H4.11875L8.33438 0.252527C8.62813 -0.0099732 9.05 -0.0724732 9.40938 0.0869018Z", fill: color }) }));
         }
         if (type === 'effect') {
-            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: "white" }) }));
+            return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 16 16", fill: "none", style: effectIcon, children: jsx_runtime_1.jsx("path", { d: "M4.405 4.48C4.575 3.82 4.865 3.325 5.275 2.995C5.695 2.665 6.25 2.5 6.94 2.5H9.235V4.06H7.045C6.555 4.06 6.235 4.3 6.085 4.78L5.83 5.68H7.975V7.255H5.395L3.805 13H2.02L3.625 7.255H1.96V5.68H4.075L4.405 4.48ZM8.57102 9.085L6.87602 5.68H8.79602L9.86102 7.99L11.991 5.68H14.331L10.686 9.415L12.426 13H10.491L9.35102 10.585L7.02602 13H4.68602L8.57102 9.085Z", fill: colors_1.WHITE }) }));
         }
         return (jsx_runtime_1.jsx("svg", { style: eyeIcon, viewBox: "0 0 24 16", fill: "none", children: jsx_runtime_1.jsx("path", { d: "M24 7.551C24 7.551 19.748 16 12.015 16C4.835 16 0 7.551 0 7.551C0 7.551 4.446 0 12.015 0C19.709 0 24 7.551 24 7.551ZM17 8C17 5.243 14.757 3 12 3C9.243 3 7 5.243 7 8C7 10.757 9.243 13 12 13C14.757 13 17 10.757 17 8Z", fill: color }) }));
     }, [hidden, type]);

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,9 +5,11 @@ 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");
+const TimelineTextContentField_1 = require("./TimelineTextContentField");
 const TimelineTransformOriginField_1 = require("./TimelineTransformOriginField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
@@ -52,6 +54,12 @@ 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') {
+        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;
@@ -404,6 +404,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getDragOverrides,
             getEffectDragOverrides,
             propStatuses,
+            includeTextContent: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

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");
@@ -63,6 +64,7 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const labelContainerStyle = {
@@ -73,29 +75,17 @@ 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';
-const getSequenceNameSaveAction = ({ editedName, currentDisplayName, fallbackDisplayName, hasStaticNameProp, }) => {
-    if (!hasStaticNameProp &&
-        (editedName === '' || editedName === fallbackDisplayName)) {
-        return { type: 'noop' };
-    }
-    if (hasStaticNameProp && editedName === currentDisplayName) {
-        return { type: 'noop' };
-    }
-    return {
-        type: 'save',
-        defaultValue: editedName === '' ? JSON.stringify('') : null,
-    };
-};
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
     const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
@@ -106,7 +96,7 @@ const sequenceReorderWrapper = {
     position: 'relative',
 };
 const sequenceReorderLineBase = {
-    backgroundColor: '#0b84ff',
+    backgroundColor: colors_1.TIMELINE_BLUE,
     height: 2,
     left: 0,
     pointerEvents: 'none',
@@ -115,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,
@@ -163,14 +153,13 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
-    var _a, _b, _c, _d;
-    var _e, _f, _g, _h;
-    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
+    var _a, _b, _c;
+    var _d, _e, _f;
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
@@ -201,9 +190,17 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
+    const { canRename: canRenameThisSequence, displayName, fallbackDisplayName, propStatusesForOverride, saveName, } = (0, use_rename_sequence_1.useRenameSequence)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePathInfo,
+        sequence,
+        validatedLocation,
+    });
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_f = sequence.parent) !== null && _f !== void 0 ? _f : null;
+    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
     const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -450,13 +447,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const propStatusesForOverride = (0, react_1.useMemo)(() => {
-        return nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-    }, [propStatuses, nodePath]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
-    const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
         const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
@@ -466,26 +457,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
-    const fallbackDisplayName = (_g = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) !== null && _g !== void 0 ? _g : '<Sequence>';
-    const staticNamePropValue = (codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
-        typeof codeNameStatus.codeValue === 'string'
-        ? codeNameStatus.codeValue
-        : null;
-    const hasStaticNameProp = staticNamePropValue !== null;
-    const displayName = (0, react_1.useMemo)(() => {
-        if (staticNamePropValue !== null) {
-            return staticNamePropValue;
-        }
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
-            return fallbackDisplayName;
-        }
-        return sequence.displayName;
-    }, [
-        codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status,
-        fallbackDisplayName,
-        sequence.displayName,
-        staticNamePropValue,
-    ]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -531,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',
@@ -554,14 +525,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const canRenameThisSequence = previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        codeNameStatus !== undefined &&
-        codeNameStatus !== null &&
-        codeNameStatus.status === 'static';
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -577,58 +540,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_c = selectedItems[0]) === null || _c === void 0 ? void 0 : _c.type) === 'sequence';
+        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
     const onSaveName = (0, react_1.useCallback)(async (name) => {
-        if (!canRenameThisSequence ||
-            previewServerState.type !== 'connected' ||
-            !sequence.controls ||
-            !nodePath ||
-            !validatedLocation) {
-            setIsRenaming(false);
-            return;
-        }
-        const action = getSequenceNameSaveAction({
-            editedName: name,
-            currentDisplayName: displayName,
-            fallbackDisplayName,
-            hasStaticNameProp,
-        });
-        if (action.type === 'noop') {
-            setIsRenaming(false);
-            return;
-        }
-        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'name',
-                    value: name,
-                    defaultValue: action.defaultValue,
-                    schema: sequence.controls.schema,
-                },
-            ],
-            setPropStatuses,
-            clientId: previewServerState.clientId,
-            undoLabel: 'Rename sequence',
-            redoLabel: 'Rename sequence again',
-        });
         setIsRenaming(false);
-        await savePromise;
-    }, [
-        canRenameThisSequence,
-        displayName,
-        fallbackDisplayName,
-        hasStaticNameProp,
-        nodePath,
-        previewServerState,
-        sequence.controls,
-        setPropStatuses,
-        validatedLocation,
-    ]);
+        await saveName(name);
+    }, [saveName]);
     react_1.default.useEffect(() => {
         if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
             setIsRenaming(false);
@@ -673,7 +592,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_h = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _h !== void 0 ? _h : null,
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewServerState.type === 'connected' &&
@@ -780,7 +699,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_d = sequence.controls) === null || _d === void 0 ? void 0 : _d.supportsEffects) === true;
+        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (!sequenceDropIndicator) {
             return null;

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