@remotion/studio 4.0.484 → 4.0.486

package/dist/components/Timeline/save-sequence-prop.d.ts

@@ -1,4 +1,6 @@
+import { type SaveSequencePropSourceEdit } from '@remotion/studio-shared';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import { type MoveEffectKeyframeChange, type MoveSequenceKeyframeChange } from './call-move-keyframe';
 export type SetPropStatuses = (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 export type SaveSequencePropChange = {
     fileName: string;
@@ -7,13 +9,18 @@ export type SaveSequencePropChange = {
     value: unknown;
     defaultValue: string | null;
     schema: InteractivitySchema;
+    sourceEdit?: SaveSequencePropSourceEdit;
 };
 type SaveSequencePropsOptions = {
     changes: SaveSequencePropChange[];
+    movedKeyframes?: {
+        sequenceKeyframes: MoveSequenceKeyframeChange[];
+        effectKeyframes: MoveEffectKeyframeChange[];
+    };
     setPropStatuses: SetPropStatuses;
     clientId: string;
     undoLabel: string;
     redoLabel: string;
 };
-export declare const saveSequenceProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
+export declare const saveSequenceProps: ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveSequencePropsOptions) => Promise<void>;
 export {};

package/dist/components/Timeline/save-sequence-prop.js

@@ -3,12 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequenceProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
+const call_move_keyframe_1 = require("./call-move-keyframe");
 const save_prop_queue_1 = require("./save-prop-queue");
-const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
-    if (changes.length === 0) {
+const serializeSequencePropValue = (value) => {
+    if (value === undefined) {
+        return { type: 'undefined' };
+    }
+    return { type: 'json', serialized: JSON.stringify(value) };
+};
+const saveSequenceProps = ({ changes, movedKeyframes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    var _a, _b;
+    const sequenceKeyframes = (_a = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.sequenceKeyframes) !== null && _a !== void 0 ? _a : [];
+    const effectKeyframes = (_b = movedKeyframes === null || movedKeyframes === void 0 ? void 0 : movedKeyframes.effectKeyframes) !== null && _b !== void 0 ? _b : [];
+    if (changes.length === 0 &&
+        sequenceKeyframes.length === 0 &&
+        effectKeyframes.length === 0) {
         return Promise.resolve();
     }
-    if (changes.length === 1) {
+    if (changes.length === 1 &&
+        sequenceKeyframes.length === 0 &&
+        effectKeyframes.length === 0) {
         const change = changes[0];
         if (change === undefined) {
             throw new Error('Expected a sequence prop change');
@@ -23,24 +37,33 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
                 defaultValue: change.defaultValue,
                 schema: change.schema,
             }),
-            apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
-                edits: [
-                    {
-                        fileName: change.fileName,
-                        nodePath: change.nodePath,
-                        key: change.fieldKey,
-                        value: JSON.stringify(change.value),
-                        defaultValue: change.defaultValue,
-                        schema: change.schema,
-                    },
-                ],
-                clientId,
-                undoLabel,
-                redoLabel,
-            }),
+            apiCall: () => {
+                var _a;
+                return (0, call_api_1.callApi)('/api/save-sequence-props', {
+                    edits: [
+                        {
+                            fileName: change.fileName,
+                            nodePath: change.nodePath,
+                            key: change.fieldKey,
+                            value: serializeSequencePropValue(change.value),
+                            defaultValue: change.defaultValue,
+                            schema: change.schema,
+                            sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
+                        },
+                    ],
+                    clientId,
+                    undoLabel,
+                    redoLabel,
+                });
+            },
             errorLabel: 'Could not save sequence prop',
         });
     }
+    (0, call_move_keyframe_1.applyOptimisticKeyframeMoves)({
+        sequenceKeyframes,
+        effectKeyframes,
+        setPropStatuses,
+    });
     for (const change of changes) {
         setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForPropStatuses)({
             previous: prev,
@@ -52,15 +75,36 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
     }
     return (0, call_api_1.callApi)('/api/save-sequence-props', {
         edits: changes.map((change) => {
+            var _a;
             return {
                 fileName: change.fileName,
                 nodePath: change.nodePath,
                 key: change.fieldKey,
-                value: JSON.stringify(change.value),
+                value: serializeSequencePropValue(change.value),
                 defaultValue: change.defaultValue,
                 schema: change.schema,
+                sourceEdit: (_a = change.sourceEdit) !== null && _a !== void 0 ? _a : null,
             };
         }),
+        movedKeyframes: {
+            sequenceKeyframes: sequenceKeyframes.map((keyframe) => ({
+                fileName: keyframe.fileName,
+                nodePath: keyframe.nodePath,
+                key: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+                schema: keyframe.schema,
+            })),
+            effectKeyframes: effectKeyframes.map((keyframe) => ({
+                fileName: keyframe.fileName,
+                sequenceNodePath: keyframe.nodePath,
+                effectIndex: keyframe.effectIndex,
+                key: keyframe.fieldKey,
+                fromFrame: keyframe.fromFrame,
+                toFrame: keyframe.toFrame,
+                schema: keyframe.schema,
+            })),
+        },
         clientId,
         undoLabel,
         redoLabel,

package/dist/components/Timeline/split-selected-timeline-item.d.ts

@@ -0,0 +1,38 @@
+import type { CanUpdateSequencePropStatus, OverrideIdToNodePaths, PropStatuses, TSequence } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineSelection } from './TimelineSelection';
+export type SplitTimelineSequenceEligibility = {
+    canSplit: true;
+    nodePathInfo: SequenceNodePathInfo;
+} | {
+    canSplit: false;
+    reason: string;
+};
+export declare const getTimelineSequenceSplitUnsupportedReason: (componentName: string | null | undefined) => string | null;
+export declare const getTimelineSequenceSplitEligibility: ({ selection, sequence, splitFrame, propStatuses, }: {
+    selection: TimelineSelection;
+    sequence: TSequence | null;
+    splitFrame: number;
+    propStatuses?: Partial<Record<"durationInFrames" | "from" | "trimBefore", CanUpdateSequencePropStatus>> | undefined;
+}) => SplitTimelineSequenceEligibility;
+export declare const splitTimelineSequenceFromSource: ({ nodePathInfo, splitFrame, }: {
+    nodePathInfo: SequenceNodePathInfo;
+    splitFrame: number;
+}) => Promise<boolean>;
+export declare const shouldHandleTimelineDuplicateShortcut: ({ shiftKey, }: {
+    readonly shiftKey: boolean;
+}) => boolean;
+export declare const shouldHandleTimelineSplitShortcut: ({ shiftKey, }: {
+    readonly shiftKey: boolean;
+}) => boolean;
+export declare const splitSelectedTimelineItems: ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence, }: {
+    selections: readonly TimelineSelection[];
+    sequences: TSequence[];
+    overrideIdsToNodePaths: OverrideIdToNodePaths;
+    propStatuses: PropStatuses | undefined;
+    splitFrame: number;
+    splitSequence?: ((options: {
+        nodePathInfo: SequenceNodePathInfo;
+        splitFrame: number;
+    }) => Promise<boolean>) | undefined;
+}) => Promise<boolean> | null;

package/dist/components/Timeline/split-selected-timeline-item.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitSelectedTimelineItems = exports.shouldHandleTimelineSplitShortcut = exports.shouldHandleTimelineDuplicateShortcut = exports.splitTimelineSequenceFromSource = exports.getTimelineSequenceSplitEligibility = exports.getTimelineSequenceSplitUnsupportedReason = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../call-api");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
+const getTimelineSequenceSplitUnsupportedReason = (componentName) => {
+    if (componentName === '<TransitionSeries.Sequence>' ||
+        componentName === '<TransitionSeries.Overlay>') {
+        return `${componentName} cannot be split from source`;
+    }
+    return null;
+};
+exports.getTimelineSequenceSplitUnsupportedReason = getTimelineSequenceSplitUnsupportedReason;
+const staticNumberish = (status) => {
+    if (!status) {
+        return true;
+    }
+    return (status.status === 'static' &&
+        (typeof status.codeValue === 'number' || status.codeValue === undefined));
+};
+const getTimelineSequenceSplitEligibility = ({ selection, sequence, splitFrame, propStatuses, }) => {
+    var _a;
+    if (selection.type !== 'sequence') {
+        return {
+            canSplit: false,
+            reason: 'Select one sequence to split',
+        };
+    }
+    if (!sequence) {
+        return {
+            canSplit: false,
+            reason: 'Could not find selected sequence',
+        };
+    }
+    if (!Number.isInteger(splitFrame)) {
+        return {
+            canSplit: false,
+            reason: 'Split frame must be an integer',
+        };
+    }
+    if (sequence.isInsideSeries) {
+        return {
+            canSplit: false,
+            reason: 'Series.Sequence clips cannot be split from source',
+        };
+    }
+    const unsupportedReason = (0, exports.getTimelineSequenceSplitUnsupportedReason)((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName);
+    if (unsupportedReason) {
+        return {
+            canSplit: false,
+            reason: unsupportedReason,
+        };
+    }
+    const { nodePathInfo } = selection;
+    if (!nodePathInfo.sequenceSubscriptionKey.nodePath) {
+        return {
+            canSplit: false,
+            reason: 'Sequence has no editable source node',
+        };
+    }
+    if (nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
+        return {
+            canSplit: false,
+            reason: 'Programmatically duplicated sequences cannot be split',
+        };
+    }
+    if (!staticNumberish(propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses.from) ||
+        !staticNumberish(propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses.durationInFrames) ||
+        !staticNumberish(propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses.trimBefore)) {
+        return {
+            canSplit: false,
+            reason: 'Sequence timing props must be static numbers',
+        };
+    }
+    const start = sequence.from;
+    const end = sequence.duration === Infinity
+        ? Infinity
+        : sequence.from + sequence.duration;
+    if (splitFrame <= start) {
+        return {
+            canSplit: false,
+            reason: 'Cannot split at the sequence start',
+        };
+    }
+    if (splitFrame >= end) {
+        return {
+            canSplit: false,
+            reason: 'Cannot split at the sequence end',
+        };
+    }
+    return {
+        canSplit: true,
+        nodePathInfo,
+    };
+};
+exports.getTimelineSequenceSplitEligibility = getTimelineSequenceSplitEligibility;
+const splitTimelineSequenceFromSource = ({ nodePathInfo, splitFrame, }) => {
+    const nodePath = nodePathInfo.sequenceSubscriptionKey;
+    return (0, call_api_1.callApi)('/api/split-jsx-sequence', {
+        fileName: nodePath.absolutePath,
+        nodePath: nodePath.nodePath,
+        splitFrame,
+    })
+        .then((result) => {
+        if (result.success) {
+            (0, NotificationCenter_1.showNotification)('Split sequence', 2000);
+            return true;
+        }
+        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        return false;
+    })
+        .catch((err) => {
+        (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        return false;
+    });
+};
+exports.splitTimelineSequenceFromSource = splitTimelineSequenceFromSource;
+const shouldHandleTimelineDuplicateShortcut = ({ shiftKey, }) => !shiftKey;
+exports.shouldHandleTimelineDuplicateShortcut = shouldHandleTimelineDuplicateShortcut;
+const shouldHandleTimelineSplitShortcut = ({ shiftKey, }) => shiftKey;
+exports.shouldHandleTimelineSplitShortcut = shouldHandleTimelineSplitShortcut;
+const splitSelectedTimelineItems = ({ selections, sequences, overrideIdsToNodePaths, propStatuses, splitFrame, splitSequence = exports.splitTimelineSequenceFromSource, }) => {
+    var _a;
+    if (selections.length !== 1) {
+        return null;
+    }
+    const [selection] = selections;
+    if (selection.type !== 'sequence') {
+        return null;
+    }
+    const track = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+        sequences,
+        overrideIdsToNodePaths,
+        nodePathInfo: selection.nodePathInfo,
+    });
+    const sequencePropStatuses = propStatuses
+        ? remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey)
+        : undefined;
+    const eligibility = (0, exports.getTimelineSequenceSplitEligibility)({
+        selection,
+        sequence: (_a = track === null || track === void 0 ? void 0 : track.sequence) !== null && _a !== void 0 ? _a : null,
+        splitFrame,
+        propStatuses: sequencePropStatuses,
+    });
+    if (!eligibility.canSplit) {
+        (0, NotificationCenter_1.showNotification)(eligibility.reason, 4000);
+        return Promise.resolve(false);
+    }
+    return splitSequence({
+        nodePathInfo: eligibility.nodePathInfo,
+        splitFrame,
+    });
+};
+exports.splitSelectedTimelineItems = splitSelectedTimelineItems;

package/dist/components/Timeline/timeline-field-display-utils.js

@@ -234,6 +234,8 @@ const formatTimelineFieldValueForDisplay = ({ fieldSchema, value, }) => {
             })) !== null && _d !== void 0 ? _d : formatUnknownTimelineValueForDisplay(value));
         case 'uv-coordinate':
             return ((_e = formatUvCoordinateTimelineFieldValueForDisplay({ fieldSchema, value })) !== null && _e !== void 0 ? _e : formatUnknownTimelineValueForDisplay(value));
+        case 'text-content':
+            return String(value);
         case 'array':
         case 'boolean':
         case 'color':

package/dist/components/Timeline/timeline-rotation-field-utils.d.ts

@@ -0,0 +1,5 @@
+export declare const formatTimelineRotationFieldValue: ({ decimalPlaces, fieldSchema, value, }: {
+    readonly decimalPlaces: number;
+    readonly fieldSchema: import("remotion").VisibleFieldSchema;
+    readonly value: string | number;
+}) => string;

package/dist/components/Timeline/timeline-rotation-field-utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatTimelineRotationFieldValue = void 0;
+const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
+const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const formatTimelineRotationFieldValue = ({ decimalPlaces, fieldSchema, value, }) => {
+    return (0, timeline_field_display_utils_1.formatTimelineFieldValueForDisplay)({
+        fieldSchema,
+        value: fieldSchema.type === 'rotation-css' &&
+            typeof value === 'number' &&
+            Number.isFinite(value)
+            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+            : value,
+    });
+};
+exports.formatTimelineRotationFieldValue = formatTimelineRotationFieldValue;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -172,9 +172,12 @@ const getFrameIncrement = (durationInFrames) => {
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
-    return (width - timeline_layout_1.TIMELINE_PADDING * 2) / durationInFrames;
+    return getUsableTimelineWidth(width) / durationInFrames;
 };
 exports.getFrameIncrementFromWidth = getFrameIncrementFromWidth;
+const getUsableTimelineWidth = (width) => {
+    return Math.max(1, width - timeline_layout_1.TIMELINE_PADDING * 2);
+};
 const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
     var _a, _b;
     const nextFrame = calculateFrameWhileScrollingRight({
@@ -193,7 +196,7 @@ const getFrameWhileScrollingRight = ({ durationInFrames, width, }) => {
 exports.getFrameWhileScrollingRight = getFrameWhileScrollingRight;
 const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     const pos = clientX - timeline_layout_1.TIMELINE_PADDING;
-    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, width - timeline_layout_1.TIMELINE_PADDING * 2], [0, durationInFrames], {
+    const frame = Math.min(durationInFrames - 1, Math.round((0, remotion_1.interpolate)(pos, [0, getUsableTimelineWidth(width)], [0, durationInFrames], {
         extrapolateLeft: extrapolate,
         extrapolateRight: extrapolate,
     })));

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -44,6 +44,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        includeTextContent: false,
     }), [
         propStatuses,
         getDragOverrides,

package/dist/components/Timeline/use-rename-sequence.d.ts

@@ -0,0 +1,30 @@
+import type { TSequence } from 'remotion';
+import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+type SequenceNameSaveAction = {
+    type: 'noop';
+} | {
+    type: 'save';
+    defaultValue: string | null;
+};
+export declare const getSequenceNameSaveAction: ({ editedName, currentDisplayName, fallbackDisplayName, hasStaticNameProp, }: {
+    editedName: string;
+    currentDisplayName: string;
+    fallbackDisplayName: string;
+    hasStaticNameProp: boolean;
+}) => SequenceNameSaveAction;
+export declare const useRenameSequence: ({ clientId, nodePathInfo, sequence, validatedLocation, }: {
+    readonly clientId: string | null;
+    readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly sequence: TSequence;
+    readonly validatedLocation: CodePosition | null;
+}) => {
+    canRename: boolean;
+    codeNameStatus: import("remotion").CanUpdateSequencePropStatus | undefined;
+    displayName: string;
+    fallbackDisplayName: string;
+    hasStaticNameProp: boolean;
+    propStatusesForOverride: Record<string, import("remotion").CanUpdateSequencePropStatus> | undefined;
+    saveName: (name: string) => Promise<void>;
+};
+export {};

package/dist/components/Timeline/use-rename-sequence.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenameSequence = exports.getSequenceNameSaveAction = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const save_sequence_prop_1 = require("./save-sequence-prop");
+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,
+    };
+};
+exports.getSequenceNameSaveAction = getSequenceNameSaveAction;
+const useRenameSequence = ({ clientId, nodePathInfo, sequence, validatedLocation, }) => {
+    var _a;
+    var _b, _c;
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
+        return nodePath
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
+            : undefined;
+    }, [propStatuses, nodePath]);
+    const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
+    const fallbackDisplayName = (_c = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) !== null && _c !== void 0 ? _c : '<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 canRename = clientId !== null &&
+        !window.remotion_isReadOnlyStudio &&
+        Boolean(sequence.controls) &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        codeNameStatus !== undefined &&
+        codeNameStatus !== null &&
+        codeNameStatus.status === 'static';
+    const saveName = (0, react_1.useCallback)(async (name) => {
+        if (!canRename ||
+            clientId === null ||
+            !sequence.controls ||
+            !nodePath ||
+            !validatedLocation) {
+            return;
+        }
+        const action = (0, exports.getSequenceNameSaveAction)({
+            editedName: name,
+            currentDisplayName: displayName,
+            fallbackDisplayName,
+            hasStaticNameProp,
+        });
+        if (action.type === 'noop') {
+            return;
+        }
+        await (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'name',
+                    value: name,
+                    defaultValue: action.defaultValue,
+                    schema: sequence.controls.schema,
+                },
+            ],
+            setPropStatuses,
+            clientId,
+            undoLabel: 'Rename sequence',
+            redoLabel: 'Rename sequence again',
+        });
+    }, [
+        canRename,
+        clientId,
+        displayName,
+        fallbackDisplayName,
+        hasStaticNameProp,
+        nodePath,
+        sequence.controls,
+        setPropStatuses,
+        validatedLocation,
+    ]);
+    return {
+        canRename,
+        codeNameStatus,
+        displayName,
+        fallbackDisplayName,
+        hasStaticNameProp,
+        propStatusesForOverride,
+        saveName,
+    };
+};
+exports.useRenameSequence = useRenameSequence;

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,8 +1,9 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, }: {
+export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly includeTextContent: boolean;
 }) => {
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -8,7 +8,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
+const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -20,12 +20,14 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, }) => {
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses: visualModePropStatuses,
+        includeTextContent,
     }), [
         sequence,
         nodePathInfo,
         getDragOverrides,
         getEffectDragOverrides,
         visualModePropStatuses,
+        includeTextContent,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({

package/dist/components/Timeline/use-timeline-height.js

@@ -37,6 +37,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     getDragOverrides,
                     getEffectDragOverrides,
                     propStatuses,
+                    includeTextContent: false,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,

package/dist/components/TimelineInOutToggle.js

@@ -239,7 +239,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? 'white' : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? 'white' : colors_1.BLUE, style: style }) })
+            jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('In', 'I'), "aria-label": getTooltipText('In', 'I'), onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) }), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: getTooltipText('Out', 'O'), "aria-label": getTooltipText('Out', 'O'), onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? colors_1.WHITE : colors_1.BLUE, style: style }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/UpdateCheck.js

@@ -13,7 +13,7 @@ const buttonStyle = {
     color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
-    backgroundColor: 'transparent',
+    backgroundColor: colors_1.TRANSPARENT,
     cursor: 'pointer',
     fontSize: 14,
     display: 'inline-flex',
@@ -90,6 +90,6 @@ const UpdateCheck = () => {
     return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
-            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: "currentcolor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
+            }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/OpenIssueButton.js

@@ -23,7 +23,7 @@ const OpenIssueButton = ({ link }) => {
         window.open(link, '_blank');
     }, [link]);
     const svgFillColor = (0, react_1.useMemo)(() => {
-        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+        return hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT;
     }, [hovered]);
     const openInEditorSvg = (jsx_runtime_1.jsx("svg", { viewBox: "0 0 512 512", style: svgStyle, children: jsx_runtime_1.jsx("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
     const onPointerEnter = (0, react_1.useCallback)(() => {

package/dist/components/VisualControls/ClickableFileName.js

@@ -24,8 +24,8 @@ const ClickableFileName = ({ originalFileName, }) => {
         return {
             fontSize: 12,
             cursor: originalFileName.type === 'loaded' ? 'pointer' : undefined,
-            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
-            color: hoverEffect ? '#fff' : colors_1.LIGHT_COLOR,
+            borderBottom: hoverEffect ? colors_1.BORDER_WHITE : 'none',
+            color: hoverEffect ? colors_1.WHITE_HEX : colors_1.LIGHT_COLOR,
         };
     }, [originalFileName, hoverEffect]);
     const onClick = (0, react_1.useCallback)(async () => {