@remotion/studio 4.0.483 → 4.0.485

package/dist/components/Timeline/focus-inspector-field.d.ts

@@ -0,0 +1,16 @@
+import type { SequencePropsSubscriptionKey } from 'remotion';
+export declare const registerFocusInspectorFieldElement: ({ element, fieldKey, nodePath, }: {
+    readonly element: HTMLTextAreaElement | null;
+    readonly fieldKey: string;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+}) => void;
+export declare const requestFocusInspectorField: ({ fieldKey, nodePath, }: {
+    readonly fieldKey: string;
+    readonly nodePath: SequencePropsSubscriptionKey;
+}) => void;
+export declare const registerCommitPendingInspectorField: ({ commitPending, fieldKey, nodePath, }: {
+    readonly commitPending: (() => boolean) | null;
+    readonly fieldKey: string;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+}) => void;
+export declare const commitPendingInspectorFields: () => boolean;

package/dist/components/Timeline/focus-inspector-field.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commitPendingInspectorFields = exports.registerCommitPendingInspectorField = exports.requestFocusInspectorField = exports.registerFocusInspectorFieldElement = void 0;
+const serializeRegistryKey = ({ fieldKey, nodePath, }) => {
+    return JSON.stringify({ fieldKey, nodePath });
+};
+const registeredFields = new Map();
+const registeredCommitPendingCallbacks = new Map();
+const registerFocusInspectorFieldElement = ({ element, fieldKey, nodePath, }) => {
+    if (nodePath === null) {
+        return;
+    }
+    const key = serializeRegistryKey({ fieldKey, nodePath });
+    if (element === null) {
+        registeredFields.delete(key);
+        return;
+    }
+    registeredFields.set(key, element);
+};
+exports.registerFocusInspectorFieldElement = registerFocusInspectorFieldElement;
+const requestFocusInspectorField = ({ fieldKey, nodePath, }) => {
+    const element = registeredFields.get(serializeRegistryKey({ fieldKey, nodePath }));
+    requestAnimationFrame(() => {
+        element === null || element === void 0 ? void 0 : element.scrollIntoView({ block: 'center' });
+        element === null || element === void 0 ? void 0 : element.focus();
+        element === null || element === void 0 ? void 0 : element.select();
+    });
+};
+exports.requestFocusInspectorField = requestFocusInspectorField;
+const registerCommitPendingInspectorField = ({ commitPending, fieldKey, nodePath, }) => {
+    if (nodePath === null) {
+        return;
+    }
+    const key = serializeRegistryKey({ fieldKey, nodePath });
+    if (commitPending === null) {
+        registeredCommitPendingCallbacks.delete(key);
+        return;
+    }
+    registeredCommitPendingCallbacks.set(key, commitPending);
+};
+exports.registerCommitPendingInspectorField = registerCommitPendingInspectorField;
+const commitPendingInspectorFields = () => {
+    let committed = false;
+    for (const commitPending of registeredCommitPendingCallbacks.values()) {
+        committed = commitPending() || committed;
+    }
+    return committed;
+};
+exports.commitPendingInspectorFields = commitPendingInspectorFields;

package/dist/components/Timeline/get-animation-item-selection-for-frame.d.ts

@@ -0,0 +1,18 @@
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineSelection } from './TimelineSelection';
+type AnimationItemSelection = Extract<TimelineSelection, {
+    type: 'keyframe';
+} | {
+    type: 'easing';
+}>;
+type AnimationKeyframe = {
+    readonly frame: number;
+};
+export declare const getAnimationItemSelectionForSourceFrame: ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }: {
+    readonly includeEasings: boolean;
+    readonly keyframeDisplayOffset: number;
+    readonly keyframes: readonly AnimationKeyframe[];
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly sourceFrame: number;
+}) => AnimationItemSelection | null;
+export {};

package/dist/components/Timeline/get-animation-item-selection-for-frame.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnimationItemSelectionForSourceFrame = void 0;
+const getKeyframeSelection = ({ keyframe, keyframeDisplayOffset, nodePathInfo, }) => {
+    return {
+        type: 'keyframe',
+        nodePathInfo,
+        frame: keyframe.frame + keyframeDisplayOffset,
+    };
+};
+const getAnimationItemSelectionForSourceFrame = ({ includeEasings, keyframeDisplayOffset, keyframes, nodePathInfo, sourceFrame, }) => {
+    const firstKeyframe = keyframes[0];
+    if (!firstKeyframe) {
+        return null;
+    }
+    for (let i = 0; i < keyframes.length; i++) {
+        const keyframe = keyframes[i];
+        if (keyframe.frame === sourceFrame) {
+            return getKeyframeSelection({
+                keyframe,
+                keyframeDisplayOffset,
+                nodePathInfo,
+            });
+        }
+        const nextKeyframe = keyframes[i + 1];
+        if (!nextKeyframe) {
+            continue;
+        }
+        if (sourceFrame > keyframe.frame && sourceFrame < nextKeyframe.frame) {
+            if (!includeEasings) {
+                return null;
+            }
+            return {
+                type: 'easing',
+                nodePathInfo,
+                fromFrame: keyframe.frame + keyframeDisplayOffset,
+                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                segmentIndex: i,
+            };
+        }
+    }
+    const lastKeyframe = keyframes[keyframes.length - 1];
+    return getKeyframeSelection({
+        keyframe: sourceFrame < firstKeyframe.frame ? firstKeyframe : lastKeyframe,
+        keyframeDisplayOffset,
+        nodePathInfo,
+    });
+};
+exports.getAnimationItemSelectionForSourceFrame = getAnimationItemSelectionForSourceFrame;

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.d.ts

@@ -0,0 +1,15 @@
+import type { CanUpdateSequencePropStatusKeyframed } from 'remotion';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const getEasingSelectionAfterKeyframeDelete: ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }: {
+    readonly deletedSourceFrames: readonly number[];
+    readonly keyframeDisplayOffset: number;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly propStatus: CanUpdateSequencePropStatusKeyframed;
+    readonly timelinePosition: number;
+}) => {
+    readonly type: "easing";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+} | null;

package/dist/components/Timeline/get-easing-selection-after-keyframe-delete.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEasingSelectionAfterKeyframeDelete = void 0;
+const getEasingSelectionAfterKeyframeDelete = ({ deletedSourceFrames, keyframeDisplayOffset, nodePathInfo, propStatus, timelinePosition, }) => {
+    const deletedSourceFrameSet = new Set(deletedSourceFrames);
+    const remainingKeyframes = propStatus.keyframes.filter((keyframe) => !deletedSourceFrameSet.has(keyframe.frame));
+    const sourceFrame = timelinePosition - keyframeDisplayOffset;
+    for (let i = 0; i < remainingKeyframes.length - 1; i++) {
+        const keyframe = remainingKeyframes[i];
+        const nextKeyframe = remainingKeyframes[i + 1];
+        if (!keyframe || !nextKeyframe) {
+            continue;
+        }
+        if (sourceFrame > keyframe.frame && sourceFrame < nextKeyframe.frame) {
+            return {
+                type: 'easing',
+                nodePathInfo,
+                fromFrame: keyframe.frame + keyframeDisplayOffset,
+                toFrame: nextKeyframe.frame + keyframeDisplayOffset,
+                segmentIndex: i,
+            };
+        }
+    }
+    return null;
+};
+exports.getEasingSelectionAfterKeyframeDelete = getEasingSelectionAfterKeyframeDelete;

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

@@ -20,6 +20,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
                 previous: prev,
                 fieldKey: change.fieldKey,
                 value: change.value,
+                defaultValue: change.defaultValue,
                 schema: change.schema,
             }),
             apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
@@ -45,6 +46,7 @@ const saveSequenceProps = ({ changes, setPropStatuses, clientId, undoLabel, redo
             previous: prev,
             fieldKey: change.fieldKey,
             value: change.value,
+            defaultValue: change.defaultValue,
             schema: change.schema,
         }));
     }

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/update-selected-easing.d.ts

@@ -23,6 +23,7 @@ export type SelectedEasingUpdate = {
     readonly currentEasing: TimelineEasingValue;
     readonly propStatus: CanUpdateSequencePropStatusKeyframed;
 };
+export declare const canEditEasingForInterpolationFunction: (interpolationFunction: string) => boolean;
 export declare const getSelectedEasingUpdate: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
         readonly type: "easing";

package/dist/components/Timeline/update-selected-easing.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = void 0;
+exports.updateSelectedTimelineEasings = exports.getTimelineEasingValueForSelection = exports.getEasingSelections = exports.makeEasingDragOverride = exports.getSelectedEasingUpdates = exports.getSelectedEasingUpdate = exports.canEditEasingForInterpolationFunction = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
@@ -8,6 +8,7 @@ const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info
 const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const canEditEasingForInterpolationFunction = (interpolationFunction) => interpolationFunction === 'interpolate' ||
     interpolationFunction === 'interpolateColors';
+exports.canEditEasingForInterpolationFunction = canEditEasingForInterpolationFunction;
 const isEasingSelection = (selection) => selection.type === 'easing';
 const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }) => {
     var _a;
@@ -33,7 +34,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         }
         const sequencePropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[field.fieldKey];
         if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed' ||
-            !canEditEasingForInterpolationFunction(sequencePropStatus.interpolationFunction)) {
+            !(0, exports.canEditEasingForInterpolationFunction)(sequencePropStatus.interpolationFunction)) {
             return null;
         }
         return {
@@ -60,7 +61,7 @@ const getSelectedEasingUpdate = ({ selection, sequences, overrideIdsToNodePaths,
         ? effectStatus.props[field.fieldKey]
         : null;
     if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed' ||
-        !canEditEasingForInterpolationFunction(effectPropStatus.interpolationFunction)) {
+        !(0, exports.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction)) {
         return null;
     }
     return {

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/composition-menu-items.js

@@ -108,6 +108,9 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                 closeMenu();
                 setSelectedModal({
                     type: 'new-comp',
+                    folderName: null,
+                    parentName: null,
+                    stack: null,
                 });
             },
             quickSwitcherLabel: 'New composition...',