@remotion/studio 4.0.484 → 4.0.485

package/dist/components/ContextMenu.js

@@ -47,7 +47,25 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
+const CONTEXT_MENU_Z_INDEX = 1001;
+const contextMenuFullScreenOverlay = {
+    ...styles_1.fullScreenOverlay,
+    pointerEvents: 'none',
+    zIndex: CONTEXT_MENU_Z_INDEX,
+};
+const contextMenuOuterPortal = {
+    ...styles_1.outerPortal,
+    pointerEvents: 'auto',
+};
+const contextMenuOpenedEvent = 'remotion-context-menu-opened';
+let nextContextMenuId = 0;
+const notifyContextMenuOpened = (id) => {
+    window.dispatchEvent(new CustomEvent(contextMenuOpenedEvent, {
+        detail: id,
+    }));
+};
 const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+    const menuRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -103,6 +121,34 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
         spaceToTop,
         spaceToBottom,
     ]);
+    (0, react_1.useEffect)(() => {
+        const preventNativeContextMenu = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('contextmenu', preventNativeContextMenu, true);
+        return () => {
+            window.removeEventListener('contextmenu', preventNativeContextMenu, true);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const dismissWithoutClickThrough = (event) => {
+            var _a;
+            if (event.button !== 0) {
+                return;
+            }
+            if ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            onHide();
+        };
+        window.addEventListener('pointerdown', dismissWithoutClickThrough, true);
+        return () => {
+            window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
+        };
+    }, [onHide]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -110,10 +156,11 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
 exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
+    const idRef = (0, react_1.useRef)(nextContextMenuId++);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const setRef = (0, react_1.useCallback)((node) => {
@@ -137,6 +184,7 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
             if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
                 return false;
             }
+            notifyContextMenuOpened(idRef.current);
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -148,11 +196,24 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    (0, react_1.useEffect)(() => {
+        const onOtherContextMenuOpened = (event) => {
+            if (event.detail === idRef.current) {
+                return;
+            }
+            onHide();
+        };
+        window.addEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        return () => {
+            window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        };
+    }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
 const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+    const idRef = (0, react_1.useRef)(nextContextMenuId++);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
     const [body, setBody] = (0, react_1.useState)(null);
@@ -179,6 +240,7 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             if (nextValues.length === 0) {
                 return false;
             }
+            notifyContextMenuOpened(idRef.current);
             setOpenedValues(nextValues);
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
@@ -191,6 +253,18 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    (0, react_1.useEffect)(() => {
+        const onOtherContextMenuOpened = (event) => {
+            if (event.detail === idRef.current) {
+                return;
+            }
+            onHide();
+        };
+        window.addEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        return () => {
+            window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        };
+    }, [onHide]);
     return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/CurrentComposition.js

@@ -7,13 +7,14 @@ const remotion_1 = require("remotion");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const render_frame_1 = require("../state/render-frame");
+const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
 const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
 const CurrentComposition = () => {
-    var _a;
+    var _a, _b;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -44,6 +45,6 @@ const CurrentComposition = () => {
         });
     }, [validatedLocation]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoTitle, { children: video.id }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_b = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _b !== void 0 ? _b : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/InlineCompositionName.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+import type { _InternalTypes } from 'remotion';
+export declare const InlineCompositionName: React.FC<{
+    readonly compositionId: string;
+    readonly stack: string | null;
+    readonly compositions: _InternalTypes['AnyComposition'][];
+}>;

package/dist/components/InlineCompositionName.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCompositionName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const use_rename_composition_1 = require("../helpers/use-rename-composition");
+const InlineEditableTitle_1 = require("./InlineEditableTitle");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const InlineCompositionName = ({ compositionId, stack, compositions }) => {
+    const canRename = !window.remotion_isReadOnlyStudio;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const { getValidationMessage, renameComposition } = (0, use_rename_composition_1.useRenameComposition)({
+        compositions,
+        currentId: compositionId,
+        newId: compositionId,
+    });
+    const commit = (0, react_1.useCallback)((newId) => {
+        if (newId === compositionId) {
+            return;
+        }
+        const compNameErrMessage = getValidationMessage(newId);
+        if (compNameErrMessage) {
+            (0, NotificationCenter_1.showNotification)(compNameErrMessage, 2000);
+            return;
+        }
+        if (!stack || !symbolicatedStack) {
+            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
+            return;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)('Renaming...', null);
+        renameComposition({
+            newCompositionId: newId,
+            signal: new AbortController().signal,
+            symbolicatedStack,
+        })
+            .then((result) => {
+            if (!result.success) {
+                notification.replaceContent(`Could not rename composition: ${result.reason}`, 2000);
+                return;
+            }
+            notification.replaceContent(`Renamed to ${newId}`, 2000);
+        })
+            .catch((err) => {
+            notification.replaceContent(`Could not rename composition: ${err.message}`, 2000);
+        });
+    }, [
+        compositionId,
+        getValidationMessage,
+        renameComposition,
+        stack,
+        symbolicatedStack,
+    ]);
+    return (jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: compositionId, canRename: canRename, onCommit: commit }));
+};
+exports.InlineCompositionName = InlineCompositionName;

package/dist/components/InlineEditableTitle.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+export declare const InlineEditableTitle: React.FC<{
+    readonly value: string;
+    readonly canRename: boolean;
+    readonly onCommit: (newValue: string) => void;
+    readonly title?: string;
+}>;

package/dist/components/InlineEditableTitle.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEditableTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const titleWrapper = {
+    boxSizing: 'border-box',
+    color: 'white',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    marginLeft: -4,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 'calc(100% + 4px)',
+};
+const titleInner = {
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'inline-grid',
+    fontSize: 12,
+    lineHeight: '18px',
+    maxWidth: '100%',
+    paddingLeft: 4,
+    paddingRight: 4,
+    verticalAlign: 'top',
+};
+const titleGridItem = {
+    fontSize: 12,
+    gridArea: '1 / 1',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const titleInput = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'white',
+    fontFamily: 'inherit',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    margin: 0,
+    minWidth: 0,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: 0,
+    WebkitAppearance: 'none',
+    width: '100%',
+};
+const InlineEditableTitle = ({ value, canRename, onCommit, title }) => {
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [draftValue, setDraftValue] = (0, react_1.useState)(value);
+    const inputRef = (0, react_1.useRef)(null);
+    const cancelledRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isEditing) {
+            setDraftValue(value);
+        }
+    }, [isEditing, value]);
+    const focusInput = (0, react_1.useCallback)((input) => {
+        inputRef.current = input;
+        if (!input) {
+            return;
+        }
+        input.focus();
+        input.select();
+    }, []);
+    const commit = (0, react_1.useCallback)((newValue) => {
+        if (cancelledRef.current) {
+            return;
+        }
+        setIsEditing(false);
+        onCommit(newValue);
+    }, [onCommit]);
+    const startEditing = (0, react_1.useCallback)(() => {
+        if (!canRename) {
+            return;
+        }
+        cancelledRef.current = false;
+        setDraftValue(value);
+        setIsEditing(true);
+    }, [canRename, value]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setDraftValue(e.target.value);
+    }, []);
+    const onBlur = (0, react_1.useCallback)((e) => {
+        commit(e.currentTarget.value);
+    }, [commit]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelledRef.current = true;
+            setDraftValue(value);
+            setIsEditing(false);
+        }
+    }, [value]);
+    const backgroundColor = isEditing
+        ? colors_1.INPUT_BACKGROUND
+        : isHovered && canRename
+            ? colors_1.CLEAR_HOVER
+            : 'transparent';
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...titleInner,
+            backgroundColor,
+            cursor: isEditing ? 'text' : canRename ? 'pointer' : 'default',
+            userSelect: isEditing ? 'text' : 'none',
+            width: isEditing ? '100%' : undefined,
+        };
+    }, [backgroundColor, canRename, isEditing]);
+    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !canRename ? undefined : startEditing, children: [
+                jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
+                        ...titleGridItem,
+                        visibility: isEditing ? 'hidden' : 'visible',
+                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...titleGridItem, ...titleInput }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
+};
+exports.InlineEditableTitle = InlineEditableTitle;

package/dist/components/InspectorPanel/KeyframeInspector.js

@@ -85,6 +85,7 @@ const KeyframeInspector = ({ selection }) => {
                 getDragOverrides,
                 propStatuses,
                 nodePath,
+                includeTextContent: false,
             });
             const sequenceField = (_b = sequenceFields === null || sequenceFields === void 0 ? void 0 : sequenceFields.find((candidate) => candidate.key === keyframeField.fieldKey)) !== null && _b !== void 0 ? _b : null;
             const sequencePropStatus = (_c = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[keyframeField.fieldKey]) !== null && _c !== void 0 ? _c : null;

package/dist/components/InspectorPanel/SequenceInspectorHeader.js

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceInspectorHeaderWithDivider = exports.SequenceInspectorHeader = exports.useSequenceInspectorSourceLocation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const InlineEditableTitle_1 = require("../InlineEditableTitle");
 const InspectorSourceLocation_1 = require("../InspectorSourceLocation");
 const use_open_sequence_in_editor_1 = require("../Timeline/use-open-sequence-in-editor");
+const use_rename_sequence_1 = require("../Timeline/use-rename-sequence");
 const styles_1 = require("./styles");
 const useSequenceInspectorSourceLocation = (sequence) => {
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
@@ -35,36 +37,18 @@ const useSequenceInspectorSourceLocation = (sequence) => {
     };
 };
 exports.useSequenceInspectorSourceLocation = useSequenceInspectorSourceLocation;
-const useSequenceDisplayName = (track) => {
-    var _a, _b;
-    var _c;
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_c = (_a = track.nodePathInfo) === null || _a === void 0 ? void 0 : _a.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
-    return (0, react_1.useMemo)(() => {
-        var _a;
-        const propStatusesForOverride = nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-        const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
-        const fallbackDisplayName = ((_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) || '<Sequence>';
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
-            typeof codeNameStatus.codeValue === 'string') {
-            return codeNameStatus.codeValue;
-        }
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
-            return fallbackDisplayName;
-        }
-        return track.sequence.displayName || fallbackDisplayName;
-    }, [
-        nodePath,
-        propStatuses,
-        (_b = track.sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName,
-        track.sequence.displayName,
-    ]);
-};
 const SequenceInspectorHeader = ({ sourceLocation, track }) => {
     var _a;
-    const sequenceDisplayName = useSequenceDisplayName(track);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const { canRename, displayName, fallbackDisplayName, saveName } = (0, use_rename_sequence_1.useRenameSequence)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePathInfo: track.nodePathInfo,
+        sequence: track.sequence,
+        validatedLocation: sourceLocation.validatedLocation,
+    });
+    const sequenceDisplayName = displayName || fallbackDisplayName;
     const { documentationLink } = track.sequence;
     const openDocumentationLink = (0, react_1.useCallback)(() => {
         if (!documentationLink) {
@@ -79,8 +63,11 @@ const SequenceInspectorHeader = ({ sourceLocation, track }) => {
         };
     }, [documentationLink]);
     const componentName = (_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName;
+    const onRename = (0, react_1.useCallback)((newName) => {
+        saveName(newName).catch(() => undefined);
+    }, [saveName]);
     return (jsx_runtime_1.jsxs("div", { style: styles_1.sequenceHeader, children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: sequenceDisplayName }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderTitle, children: jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: sequenceDisplayName, canRename: canRename, onCommit: onRename }) }), documentationLink ? (jsx_runtime_1.jsx("button", { type: "button", style: subtitleStyle, title: "Open component docs", onClick: openDocumentationLink, children: componentName })) : (jsx_runtime_1.jsx("div", { style: subtitleStyle, children: componentName })), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: sourceLocation.validatedLocation, canOpen: sourceLocation.canOpenInEditor, onOpen: sourceLocation.openFileLocation })
         ] }));
 };
 exports.SequenceInspectorHeader = SequenceInspectorHeader;

package/dist/components/InspectorPanel/styles.js

@@ -52,11 +52,11 @@ exports.sequenceHeader = {
     padding: `6px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 4px`,
 };
 exports.sequenceHeaderTitle = {
-    alignSelf: 'flex-start',
+    alignSelf: 'stretch',
     backgroundColor: colors_1.BACKGROUND,
     border: 'none',
     color: 'white',
-    display: 'inline-flex',
+    display: 'flex',
     fontFamily: 'sans-serif',
     fontSize: 12,
     lineHeight: '18px',

package/dist/components/InspectorSequenceSection.js

@@ -79,9 +79,40 @@ const isEffectsRoot = (node) => {
     const { auxiliaryKeys } = node.nodePathInfo;
     return auxiliaryKeys[auxiliaryKeys.length - 1] === 'effects';
 };
+const INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY = 'remotion.editor.inspectorCollapsedRows';
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const loadInspectorCollapsedKeys = () => {
+    if (typeof window === 'undefined') {
+        return new Set();
+    }
+    try {
+        const raw = window.sessionStorage.getItem(INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY);
+        if (raw === null) {
+            return new Set();
+        }
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) {
+            return new Set();
+        }
+        return new Set(parsed.filter((key) => typeof key === 'string'));
+    }
+    catch (_a) {
+        return new Set();
+    }
+};
+const persistInspectorCollapsedKeys = (keys) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        window.sessionStorage.setItem(INSPECTOR_COLLAPSED_ROWS_SESSION_STORAGE_KEY, JSON.stringify([...keys]));
+    }
+    catch (_a) {
+        // Ignore quota errors or disabled storage.
+    }
+};
 const getInspectorControlGroups = (rows) => {
     return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
         ...group,
@@ -106,8 +137,9 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: true,
     });
-    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(() => new Set());
+    const [collapsedKeys, setCollapsedKeys] = (0, react_1.useState)(loadInspectorCollapsedKeys);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const getIsExpanded = (0, react_1.useCallback)((candidate) => {
@@ -123,6 +155,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             else {
                 next.add(key);
             }
+            persistInspectorCollapsedKeys(next);
             return next;
         });
     }, []);

package/dist/components/Modals.js

@@ -31,7 +31,7 @@ const Modals = ({ readOnlyStudio }) => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, {})), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
                 (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };

package/dist/components/NewComposition/CodemodFooter.d.ts

@@ -1,5 +1,9 @@
-import type { RecastCodemod } from '@remotion/studio-shared';
+import type { ApplyCodemodResponse, RecastCodemod, SymbolicatedStackFrame } from '@remotion/studio-shared';
 import React from 'react';
+type ApplyCodemodAction = (options: {
+    signal: AbortSignal;
+    symbolicatedStack: SymbolicatedStackFrame | null;
+}) => Promise<ApplyCodemodResponse>;
 export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
@@ -13,4 +17,6 @@ export declare const CodemodFooter: React.FC<{
     }) => string;
     readonly onSuccess: (() => void) | null;
     readonly fallbackToRootFile?: boolean;
+    readonly applyCodemod: ApplyCodemodAction;
 }>;
+export {};

package/dist/components/NewComposition/CodemodFooter.js

@@ -13,7 +13,15 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
 const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, }) => {
+const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel, relativeFilePath, submitLabel, trigger, }) => {
+    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
+                        ? submitLabel({ relativeRootPath: relativeFilePath })
+                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
+                ] })
+        ] }));
+};
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -27,13 +35,15 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
         setSubmitting(true);
         setSelectedModal(null);
         const notification = (0, NotificationCenter_1.showNotification)(loadingNotification, null);
-        (0, actions_1.applyCodemod)({
-            codemod,
-            dryRun: false,
+        applyCodemod({
             symbolicatedStack,
             signal: new AbortController().signal,
         })
-            .then(() => {
+            .then((result) => {
+            if (!result.success) {
+                notification.replaceContent(`${errorNotification}: ${result.reason}`, 2000);
+                return;
+            }
             notification.replaceContent(successNotification, 2000);
             onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
         })
@@ -41,7 +51,7 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
             notification.replaceContent(`${errorNotification}: ${err.message}`, 2000);
         });
     }, [
-        codemod,
+        applyCodemod,
         errorNotification,
         loadingNotification,
         onSuccess,
@@ -145,11 +155,6 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
             enter.unregister();
         };
     }, [disabled, registerKeybinding, trigger, valid]);
-    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
-                        ? submitLabel({ relativeRootPath: relativeFilePath })
-                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
-                ] })
-        ] }));
+    return (jsx_runtime_1.jsx(CodemodFooterPresentation, { codemodStatus: codemodStatus, disabled: disabled, genericSubmitLabel: genericSubmitLabel, relativeFilePath: relativeFilePath, submitLabel: submitLabel, trigger: trigger }));
 };
 exports.CodemodFooter = CodemodFooter;

package/dist/components/NewComposition/DeleteComposition.js

@@ -7,6 +7,7 @@ const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const content = {
@@ -38,7 +39,12 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };