@remotion/studio 4.0.483 → 4.0.485

package/dist/components/InspectorPanel/keyframe-easing-navigator-items.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNavigatorItemPlayheadFrame = exports.getKeyframeEasingNavigatorItems = void 0;
+const getKeyframeEasingNavigatorItems = ({ includeEasings, keyframes, nodePathInfo, }) => {
+    return keyframes.flatMap((keyframe, index) => {
+        const keyframeItem = {
+            type: 'keyframe',
+            selection: {
+                type: 'keyframe',
+                nodePathInfo,
+                frame: keyframe.frame,
+            },
+        };
+        const nextKeyframe = keyframes[index + 1];
+        if (!includeEasings || !nextKeyframe) {
+            return [keyframeItem];
+        }
+        return [
+            keyframeItem,
+            {
+                type: 'easing',
+                selection: {
+                    type: 'easing',
+                    nodePathInfo,
+                    fromFrame: keyframe.frame,
+                    toFrame: nextKeyframe.frame,
+                    segmentIndex: index,
+                },
+            },
+        ];
+    });
+};
+exports.getKeyframeEasingNavigatorItems = getKeyframeEasingNavigatorItems;
+const getNavigatorItemPlayheadFrame = (item) => {
+    if (item.type === 'keyframe') {
+        return item.selection.frame;
+    }
+    return Math.round((item.selection.fromFrame + item.selection.toFrame) / 2);
+};
+exports.getNavigatorItemPlayheadFrame = getNavigatorItemPlayheadFrame;

package/dist/components/InspectorPanel/keyframe-inspector-frame.d.ts

@@ -0,0 +1,8 @@
+export declare const clampInspectorKeyframeDisplayFrame: ({ durationInFrames, frame, }: {
+    readonly durationInFrames: number;
+    readonly frame: number;
+}) => number;
+export declare const getInspectorKeyframeSourceFrame: ({ displayFrame, keyframeDisplayOffset, }: {
+    readonly displayFrame: number;
+    readonly keyframeDisplayOffset: number;
+}) => number;

package/dist/components/InspectorPanel/keyframe-inspector-frame.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getInspectorKeyframeSourceFrame = exports.clampInspectorKeyframeDisplayFrame = void 0;
+const clampInspectorKeyframeDisplayFrame = ({ durationInFrames, frame, }) => {
+    if (durationInFrames <= 0) {
+        return 0;
+    }
+    return Math.min(Math.max(Math.round(frame), 0), durationInFrames - 1);
+};
+exports.clampInspectorKeyframeDisplayFrame = clampInspectorKeyframeDisplayFrame;
+const getInspectorKeyframeSourceFrame = ({ displayFrame, keyframeDisplayOffset, }) => {
+    return displayFrame - keyframeDisplayOffset;
+};
+exports.getInspectorKeyframeSourceFrame = getInspectorKeyframeSourceFrame;

package/dist/components/InspectorPanel/styles.d.ts

@@ -5,6 +5,7 @@ export declare const defaultPropsSection: React.CSSProperties;
 export declare const visualControlsSection: React.CSSProperties;
 export declare const compositionSection: React.CSSProperties;
 export declare const inspectorSectionDivider: React.CSSProperties;
+export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
 export declare const sequenceHeader: React.CSSProperties;
 export declare const sequenceHeaderTitle: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -31,6 +31,12 @@ exports.compositionSection = {
 exports.inspectorSectionDivider = {
     borderBottom: `1px solid ${colors_1.LINE_COLOR}`,
 };
+exports.sequenceHeaderDivider = {
+    backgroundColor: colors_1.LINE_COLOR,
+    flexShrink: 0,
+    height: 1,
+    margin: '4px 0',
+};
 exports.sectionHeader = {
     color: colors_1.LIGHT_TEXT,
     fontSize: 12,
@@ -46,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

@@ -60,14 +60,8 @@ const emptyState = {
     lineHeight: 1.4,
     padding: '0 12px 8px',
 };
-const divider = {
-    backgroundColor: colors_1.LINE_COLOR,
-    flexShrink: 0,
-    height: 1,
-    margin: '4px 0',
-};
 const controlsEffectsDivider = {
-    ...divider,
+    ...styles_1.sequenceHeaderDivider,
     margin: '8px 0 4px',
 };
 const effectsHeaderTitle = {
@@ -85,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,
@@ -112,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) => {
@@ -129,6 +155,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             else {
                 next.add(key);
             }
+            persistInspectorCollapsedKeys(next);
             return next;
         });
     }, []);
@@ -191,10 +218,10 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     };
     if (controlRows.length === 0 && !showEffectsSection) {
         return (jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: divider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
+                jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" })
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: styles_1.sequenceHeaderDivider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

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,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteFolder.js

@@ -7,6 +7,7 @@ const get_folder_id_1 = require("../../helpers/get-folder-id");
 const styles_1 = require("../Menu/styles");
 const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const DismissableModal_1 = require("./DismissableModal");
 const content = {
@@ -32,7 +33,12 @@ const DeleteFolder = ({ folderName, parentName, stack }) => {
                     jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "Folder" }),
                             " with ID ", '"', folderId, '"', "?",
                             jsx_runtime_1.jsx("br", {}),
-                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null }) })
+                            "The compositions and nested folders inside it will stay in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete folder`, loadingNotification: 'Deleting folder', successNotification: `Deleted folder ${folderId}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: stack, valid: true, onSuccess: null, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DuplicateComposition.js

@@ -11,9 +11,11 @@ const ModalFooter_1 = require("../ModalFooter");
 const ModalHeader_1 = require("../ModalHeader");
 const layout_2 = require("../RenderModal/layout");
 const ResolveCompositionBeforeModal_1 = require("../RenderModal/ResolveCompositionBeforeModal");
+const actions_1 = require("../RenderQueue/actions");
 const CodemodFooter_1 = require("./CodemodFooter");
 const ComboBox_1 = require("./ComboBox");
 const DismissableModal_1 = require("./DismissableModal");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const NewCompDuration_1 = require("./NewCompDuration");
 const RemInput_1 = require("./RemInput");
@@ -183,25 +185,30 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Type" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
+                                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
                                                 jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                         jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                     ] })) : null] }) })
                                 ] }), hadDimensionsDefined ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
-                                                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
-                                                        ] })) : null] })
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Width" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width", onTextChange: onWidthChanged, name: "width", step: 2, min: 2, required: true, status: "ok", formatter: (w) => `${w}px`, max: 100000000, onValueChange: onWidthDirectlyChanged, rightAlign: false }), compWidthErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compWidthErrMessage, type: "error" })
+                                                            ] })) : null] }) })
                                         ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
-                                                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                                                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
-                                                        ] })) : null] })
+                                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Height" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                                                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: size.height, onTextChange: onHeightChanged, placeholder: "Height", name: "height", step: 2, required: true, formatter: (h) => `${h}px`, min: 2, status: "ok", max: 100000000, onValueChange: onHeightDirectlyChanged, rightAlign: false }), compHeightErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compHeightErrMessage, type: "error" })
+                                                            ] })) : null] }) })
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess }) })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess, applyCodemod: ({ signal, symbolicatedStack }) => (0, actions_1.applyCodemod)({
+                                codemod,
+                                dryRun: false,
+                                signal,
+                                symbolicatedStack,
+                            }) }) })
                 ] })
         ] }));
 };

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

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare const InputAndValidationContainer: React.FC<PropsWithChildren>;

package/dist/components/NewComposition/InputAndValidationContainer.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputAndValidationContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container = {
+    width: 250,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+};
+const InputAndValidationContainer = ({ children, }) => {
+    return jsx_runtime_1.jsx("div", { style: container, children: children });
+};
+exports.InputAndValidationContainer = InputAndValidationContainer;

package/dist/components/NewComposition/NewCompDuration.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
 const layout_1 = require("../layout");
 const layout_2 = require("../RenderModal/layout");
+const InputAndValidationContainer_1 = require("./InputAndValidationContainer");
 const InputDragger_1 = require("./InputDragger");
 const ValidationMessage_1 = require("./ValidationMessage");
 const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
@@ -17,12 +18,12 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames }) => {
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsxs("div", { style: layout_2.rightRow, children: [
-                    jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
-                        // Hitting Promise.all() limit in Chrome
-                        max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
-                        ] })) : null] })
+            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Duration in frames" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
+                        jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onTextChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, required: true, status: "ok", 
+                            // Hitting Promise.all() limit in Chrome
+                            max: 300000, onValueChange: onDurationChangedDirectly, rightAlign: false }), compDurationErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compDurationErrMessage, type: "error" })
+                            ] })) : null] }) })
         ] }));
 };
 exports.NewCompDuration = NewCompDuration;

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

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const NewComposition: React.FC;
+export declare const NewComposition: React.FC<{
+    readonly folderName: string | null;
+    readonly parentName: string | null;
+    readonly stack: string | null;
+}>;