@remotion/studio 4.0.484 → 4.0.485

package/dist/components/Timeline/TimelineTextContentField.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTextContentField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RemTextarea_1 = require("../NewComposition/RemTextarea");
+const focus_inspector_field_1 = require("./focus-inspector-field");
+const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd, onDragValueChange, onSave, propStatus, }) => {
+    var _a;
+    const inputRef = (0, react_1.useRef)(null);
+    const currentValue = String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '');
+    const draftRef = (0, react_1.useRef)({
+        dirty: false,
+        value: currentValue,
+    });
+    const latestRef = (0, react_1.useRef)({
+        codeValue: propStatus.codeValue,
+        onDragEnd,
+        onDragValueChange,
+        onSave,
+    });
+    latestRef.current = {
+        codeValue: propStatus.codeValue,
+        onDragEnd,
+        onDragValueChange,
+        onSave,
+    };
+    if (!draftRef.current.dirty) {
+        draftRef.current.value = currentValue;
+    }
+    const commitPending = (0, react_1.useCallback)(() => {
+        var _a;
+        var _b, _c;
+        if (!draftRef.current.dirty) {
+            return false;
+        }
+        const value = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : draftRef.current.value;
+        const savedValue = String((_c = latestRef.current.codeValue) !== null && _c !== void 0 ? _c : '');
+        draftRef.current = {
+            dirty: false,
+            value,
+        };
+        if (value === savedValue) {
+            latestRef.current.onDragEnd();
+            return false;
+        }
+        latestRef.current
+            .onSave(value)
+            .finally(() => {
+            if (!draftRef.current.dirty && draftRef.current.value === value) {
+                latestRef.current.onDragEnd();
+            }
+        })
+            .catch(() => undefined);
+        return true;
+    }, []);
+    const setInputRef = (0, react_1.useCallback)((element) => {
+        if (element === null && inputRef.current !== null) {
+            commitPending();
+        }
+        inputRef.current = element;
+        (0, focus_inspector_field_1.registerFocusInspectorFieldElement)({
+            element,
+            fieldKey: field.key,
+            nodePath,
+        });
+        (0, focus_inspector_field_1.registerCommitPendingInspectorField)({
+            commitPending: element === null ? null : commitPending,
+            fieldKey: field.key,
+            nodePath,
+        });
+    }, [commitPending, field.key, nodePath]);
+    const onChange = (0, react_1.useCallback)((event) => {
+        const { value } = event.currentTarget;
+        draftRef.current = {
+            dirty: true,
+            value,
+        };
+        latestRef.current.onDragValueChange(value);
+    }, []);
+    const onKeyDownCapture = (0, react_1.useCallback)((event) => {
+        var _a;
+        if (event.key === 'Escape') {
+            const savedValue = String((_a = latestRef.current.codeValue) !== null && _a !== void 0 ? _a : '');
+            draftRef.current = {
+                dirty: false,
+                value: savedValue,
+            };
+            event.currentTarget.value = savedValue;
+            latestRef.current.onDragEnd();
+            event.currentTarget.blur();
+        }
+    }, []);
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onKeyDownCapture: onKeyDownCapture, style: {
+            boxSizing: 'border-box',
+            height: 40,
+            width: 160,
+        } }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
+};
+exports.TimelineTextContentField = TimelineTextContentField;

package/dist/components/Timeline/TimelineWidthProvider.js

@@ -4,14 +4,29 @@ exports.TimelineWidthProvider = exports.TimelineWidthContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
 const timeline_refs_1 = require("./timeline-refs");
 exports.TimelineWidthContext = (0, react_1.createContext)(null);
 const TimelineWidthProvider = ({ children }) => {
-    var _a;
-    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.sliderAreaRef, {
+    const size = player_1.PlayerInternals.useElementSize(timeline_refs_1.scrollableRef, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : null, children: children }));
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const width = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        var _c, _d, _e;
+        const zoom = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+            ? ((_c = zoomMap[canvasContent.compositionId]) !== null && _c !== void 0 ? _c : timeline_zoom_1.TIMELINE_MIN_ZOOM)
+            : timeline_zoom_1.TIMELINE_MIN_ZOOM;
+        const scrollableWidth = (_d = size === null || size === void 0 ? void 0 : size.width) !== null && _d !== void 0 ? _d : (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (scrollableWidth === undefined) {
+            return (_e = (_b = timeline_refs_1.sliderAreaRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _e !== void 0 ? _e : null;
+        }
+        return scrollableWidth * zoom;
+    }, [canvasContent, size === null || size === void 0 ? void 0 : size.width, zoomMap]);
+    return (jsx_runtime_1.jsx(exports.TimelineWidthContext.Provider, { value: width, children: children }));
 };
 exports.TimelineWidthProvider = TimelineWidthProvider;

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/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/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...',

package/dist/components/folder-menu-items.js

@@ -76,6 +76,26 @@ const getFolderMenuItems = ({ closeMenu, connectionStatus, folder, readOnlyStudi
                 id: 'show-folder-in-editor-divider',
             }
             : null,
+        {
+            id: 'new-composition-in-folder',
+            keyHint: null,
+            label: `New composition...`,
+            leftItem: null,
+            onClick: () => {
+                closeMenu();
+                setSelectedModal({
+                    type: 'new-comp',
+                    folderName: folder.name,
+                    parentName: folder.parent,
+                    stack: folder.stack,
+                });
+            },
+            quickSwitcherLabel: 'New composition in folder...',
+            subMenu: null,
+            type: 'item',
+            value: 'new-composition-in-folder',
+            disabled: codemodDisabled,
+        },
         {
             id: 'rename-folder',
             keyHint: null,

package/dist/components/options-sidebar-tabs.d.ts

@@ -0,0 +1,4 @@
+export declare const optionsSidebarTabs: import("react").RefObject<{
+    selectInspectorPanel: () => void;
+    selectRendersPanel: () => void;
+} | null>;

package/dist/components/options-sidebar-tabs.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionsSidebarTabs = void 0;
+const react_1 = require("react");
+exports.optionsSidebarTabs = (0, react_1.createRef)();