@remotion/studio 4.0.479 → 4.0.482

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.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.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 = {
@@ -62,6 +62,24 @@ exports.sequenceHeaderTitle = {
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
 };
+exports.sequenceHeaderSubtitle = {
+    alignSelf: 'flex-start',
+    backgroundColor: colors_1.BACKGROUND,
+    border: 'none',
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    lineHeight: '18px',
+    margin: 0,
+    maxWidth: '100%',
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 0,
+    textAlign: 'left',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
 exports.sectionHeaderRow = {
     alignItems: 'center',
     display: 'flex',

package/dist/components/InspectorPanel.js

@@ -11,13 +11,13 @@ const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const InspectorPanel = ({ composition, currentDefaultProps, setDefaultProps }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const sameSequencePropInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequencePropInspectorSelection)(selectedItems), [selectedItems]);
+    const sameSequenceInspectorSelection = (0, react_1.useMemo)(() => (0, inspector_selection_1.getSameSequenceInspectorSelection)(selectedItems), [selectedItems]);
     if (selectedItems.length === 0) {
         return (jsx_runtime_1.jsx(DefaultInspector_1.DefaultInspector, { composition: composition, currentDefaultProps: currentDefaultProps, setDefaultProps: setDefaultProps }));
     }
     if (selectedItems.length > 1) {
-        if (sameSequencePropInspectorSelection) {
-            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequencePropInspectorSelection }) }));
+        if (sameSequenceInspectorSelection) {
+            return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsx(SelectedInspector_1.SelectedInspector, { selection: sameSequenceInspectorSelection }) }));
         }
         return (jsx_runtime_1.jsx("div", { style: styles_1.container, children: jsx_runtime_1.jsxs(common_1.InspectorMessage, { children: [selectedItems.length, " items selected"] }) }));
     }

package/dist/components/InspectorSequenceSection.d.ts

@@ -2,9 +2,12 @@ import React from 'react';
 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';
+import { type FlatTreeRow } from '../helpers/timeline-layout';
+import { type TimelineSelection } from './Timeline/TimelineSelection';
 type SequenceWithControls = TSequence & {
     readonly controls: NonNullable<TSequence['controls']>;
 };
+export declare const getInspectorSelectableItems: (rows: readonly FlatTreeRow[]) => TimelineSelection[];
 export declare const hasSequenceControls: (sequence: TSequence) => sequence is SequenceWithControls;
 export declare const InspectorSequenceSection: React.FC<{
     readonly sequence: SequenceWithControls;

package/dist/components/InspectorSequenceSection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorSequenceSection = exports.hasSequenceControls = void 0;
+exports.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
@@ -11,6 +11,7 @@ const modals_1 = require("../state/modals");
 const InlineAction_1 = require("./InlineAction");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineExpandedRow_1 = require("./Timeline/TimelineExpandedRow");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const use_timeline_expanded_tree_1 = require("./Timeline/use-timeline-expanded-tree");
 const container = {
     color: 'white',
@@ -54,6 +55,13 @@ const isEffectsRoot = (node) => {
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const getInspectorSelectableItems = (rows) => {
+    return rows.flatMap(({ node }) => {
+        const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
+        return selection ? [selection] : [];
+    });
+};
+exports.getInspectorSelectableItems = getInspectorSelectableItems;
 const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
@@ -106,6 +114,8 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
                 }),
         };
     }, [getIsExpanded, tree]);
+    const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows), [controlRows]);
+    const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
     const { schema } = sequence.controls;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
@@ -142,6 +152,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, controlRows.map(renderRow), 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" })) : (effectRows.map(renderRow))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlRows.map(renderRow) }), 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/KeyboardShortcutsExplainer.js

@@ -109,9 +109,9 @@ const KeyboardShortcutsExplainer = () => {
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "PageDown" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Next composition" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render composition" })
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Render, unless a sequence or prop is selected" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Toggle checkerboard background" })
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Checkerboard, unless a sequence or prop is selected" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "?" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Show keyboard shortcuts" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
@@ -146,6 +146,14 @@ const KeyboardShortcutsExplainer = () => {
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "A" })
                                         ] }), jsx_runtime_1.jsx("div", { style: right, children: "Select sequence rows" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "P" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select translate prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "T" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select opacity prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "R" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select rotate prop" })
+                                ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                    jsx_runtime_1.jsx("div", { style: left, children: jsx_runtime_1.jsx("kbd", { style: key, children: "S" }) }), jsx_runtime_1.jsx("div", { style: right, children: "Select scale prop" })
                                 ] }), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
                                     jsx_runtime_1.jsxs("div", { style: left, children: [
                                             jsx_runtime_1.jsx("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.3 }), jsx_runtime_1.jsx("kbd", { style: key, children: "D" })

package/dist/components/MediaVolumeProvider.js

@@ -6,17 +6,17 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const mute_1 = require("../state/mute");
 const MediaVolumeProvider = ({ children }) => {
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
+    const [playerMuted, setPlayerMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
     const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
     const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
-            mediaMuted,
+            playerMuted,
             mediaVolume,
         };
-    }, [mediaMuted, mediaVolume]);
+    }, [playerMuted, mediaVolume]);
     const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
         return {
-            setMediaMuted,
+            setPlayerMuted,
             setMediaVolume,
         };
     }, []);

package/dist/components/Modals.js

@@ -15,6 +15,7 @@ const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
+const NewComposition_1 = require("./NewComposition/NewComposition");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
 const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
@@ -30,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 === '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, {})), 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

@@ -12,4 +12,5 @@ export declare const CodemodFooter: React.FC<{
         relativeRootPath: string;
     }) => string;
     readonly onSuccess: (() => void) | null;
+    readonly fallbackToRootFile?: boolean;
 }>;

package/dist/components/NewComposition/CodemodFooter.js

@@ -13,7 +13,7 @@ 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, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
@@ -68,6 +68,22 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
     }, [codemod, symbolicatedStack]);
     (0, react_1.useEffect)(() => {
         if (!stack) {
+            if (fallbackToRootFile) {
+                const rootFileAbortController = new AbortController();
+                let rootFileAborted = false;
+                getCanApplyCodemod(rootFileAbortController.signal)
+                    .then(() => undefined)
+                    .catch((err) => {
+                    if (rootFileAborted) {
+                        return;
+                    }
+                    (0, NotificationCenter_1.showNotification)(`${errorNotification}: ${err.message}`, 3000);
+                });
+                return () => {
+                    rootFileAborted = true;
+                    rootFileAbortController.abort();
+                };
+            }
             setCanApplyCodemod({
                 type: 'fail',
                 error: 'Could not determine where this item is defined',
@@ -98,10 +114,16 @@ const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNoti
             aborted = true;
             abortController.abort();
         };
-    }, [errorNotification, getCanApplyCodemod, stack, symbolicatedStack]);
+    }, [
+        errorNotification,
+        fallbackToRootFile,
+        getCanApplyCodemod,
+        stack,
+        symbolicatedStack,
+    ]);
     const disabled = !valid ||
         submitting ||
-        symbolicatedStack === null ||
+        (symbolicatedStack === null && !fallbackToRootFile) ||
         codemodStatus.type !== 'success';
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {

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

@@ -6,6 +6,10 @@ export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
     readonly snapToStep: boolean;
     readonly step: string | number | undefined;
 }) => string | number;
+export declare const deriveInputDraggerDragStartValue: ({ min, value, }: {
+    readonly min: string | number | undefined;
+    readonly value: string | number | readonly string[] | undefined;
+}) => number;
 export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
     readonly onValueChange: (newVal: number) => void;
     readonly onValueChangeEnd?: ((newVal: number) => void) | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputDragger = exports.deriveInputDraggerStep = void 0;
+exports.InputDragger = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -64,6 +64,18 @@ const deriveInputDraggerStep = ({ min, snapToStep, step, }) => {
     return 0.0001;
 };
 exports.deriveInputDraggerStep = deriveInputDraggerStep;
+const deriveInputDraggerDragStartValue = ({ min, value, }) => {
+    const numericValue = Number(value);
+    if (Number.isFinite(numericValue)) {
+        return numericValue;
+    }
+    const numericMin = Number(min);
+    if (Number.isFinite(numericMin)) {
+        return numericMin;
+    }
+    return 0;
+};
+exports.deriveInputDraggerDragStartValue = deriveInputDraggerDragStartValue;
 const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
@@ -152,6 +164,10 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             const step = Number(_step !== null && _step !== void 0 ? _step : 1);
             const min = Number(_min !== null && _min !== void 0 ? _min : 0);
             const max = Number(_max !== null && _max !== void 0 ? _max : Infinity);
+            const dragStartValue = (0, exports.deriveInputDraggerDragStartValue)({
+                min: _min,
+                value,
+            });
             if (distanceFromStart > 4) {
                 (0, input_dragger_click_lock_1.setClickLock)(true);
                 setDragging(true);
@@ -159,7 +175,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
                 target.blur();
             }
             const diff = (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step, 0, 0, 0, step]);
-            const newValue = Math.min(max, Math.max(min, Number(value) + diff));
+            const newValue = Math.min(max, Math.max(min, dragStartValue + diff));
             const nextValue = snapToStep
                 ? roundToStep(newValue, step)
                 : dragDecimalPlaces === undefined

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NewComposition: React.FC;

package/dist/components/NewComposition/NewComposition.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewComposition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const url_state_1 = require("../../helpers/url-state");
+const validate_new_comp_data_1 = require("../../helpers/validate-new-comp-data");
+const layout_1 = require("../layout");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const layout_2 = require("../RenderModal/layout");
+const CodemodFooter_1 = require("./CodemodFooter");
+const DismissableModal_1 = require("./DismissableModal");
+const InputDragger_1 = require("./InputDragger");
+const NewCompDuration_1 = require("./NewCompDuration");
+const RemInput_1 = require("./RemInput");
+const ValidationMessage_1 = require("./ValidationMessage");
+const content = {
+    padding: 12,
+    paddingRight: 12,
+    flex: 1,
+    fontSize: 13,
+    minWidth: 500,
+};
+const toPascalCase = (value) => {
+    var _a;
+    const words = (_a = value.match(/[a-zA-Z0-9]+/g)) !== null && _a !== void 0 ? _a : [];
+    const candidate = words
+        .map((word) => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
+        .join('');
+    if (!candidate) {
+        return 'NewComposition';
+    }
+    if (/^[0-9]/.test(candidate)) {
+        return `Composition${candidate}`;
+    }
+    return candidate;
+};
+const waitForComposition = (compositionId) => {
+    return new Promise((resolve) => {
+        const started = Date.now();
+        const interval = window.setInterval(() => {
+            var _a;
+            var _b;
+            const compositionNames = (_b = (_a = window.remotion_getCompositionNames) === null || _a === void 0 ? void 0 : _a.call(window)) !== null && _b !== void 0 ? _b : [];
+            if (compositionNames.includes(compositionId) ||
+                Date.now() - started > 10000) {
+                window.clearInterval(interval);
+                resolve();
+            }
+        }, 100);
+    });
+};
+const getUniqueCompositionName = (compositions) => {
+    let counter = 1;
+    while (true) {
+        const name = counter === 1 ? 'NewComposition' : `NewComposition${counter}`;
+        const err = (0, validate_new_comp_data_1.validateCompositionName)(name, compositions);
+        if (!err) {
+            return name;
+        }
+        counter++;
+    }
+};
+const NewCompositionLoaded = () => {
+    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const [newId, setName] = (0, react_1.useState)(() => getUniqueCompositionName(compositions));
+    const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(30);
+    const [size, setSize] = (0, react_1.useState)(() => ({
+        width: 1920,
+        height: 1080,
+    }));
+    const [durationInFrames, setDurationInFrames] = (0, react_1.useState)(150);
+    const onWidthChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            return {
+                height: s.height,
+                width: Number(newValue),
+            };
+        });
+    }, []);
+    const onWidthDirectlyChanged = (0, react_1.useCallback)((newWidth) => {
+        setSize((s) => {
+            return {
+                height: s.height,
+                width: newWidth,
+            };
+        });
+    }, []);
+    const onHeightDirectlyChanged = (0, react_1.useCallback)((newHeight) => {
+        setSize((s) => {
+            return {
+                width: s.width,
+                height: newHeight,
+            };
+        });
+    }, []);
+    const onHeightChanged = (0, react_1.useCallback)((newValue) => {
+        setSize((s) => {
+            return {
+                width: s.width,
+                height: Number(newValue),
+            };
+        });
+    }, []);
+    const onNameChange = (0, react_1.useCallback)((e) => {
+        setName(e.target.value);
+    }, []);
+    const onTextFpsChange = (0, react_1.useCallback)((newFps) => {
+        setFrameRate(Number(newFps));
+    }, []);
+    const onFpsChange = (0, react_1.useCallback)((newFps) => {
+        setFrameRate(newFps);
+    }, []);
+    const compNameErrMessage = (0, validate_new_comp_data_1.validateCompositionName)(newId, compositions);
+    const compWidthErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Width', size.width);
+    const compHeightErrMessage = (0, validate_new_comp_data_1.validateCompositionDimension)('Height', size.height);
+    const componentName = toPascalCase(newId);
+    const valid = compNameErrMessage === null &&
+        compWidthErrMessage === null &&
+        compHeightErrMessage === null;
+    const codemod = (0, react_1.useMemo)(() => {
+        return {
+            type: 'new-composition',
+            newDurationInFrames: Number(durationInFrames),
+            newFps: Number(selectedFrameRate),
+            newHeight: Number(size.height),
+            newWidth: Number(size.width),
+            newId,
+            componentName,
+            componentImportPath: `./${componentName}`,
+        };
+    }, [
+        componentName,
+        durationInFrames,
+        newId,
+        selectedFrameRate,
+        size.height,
+        size.width,
+    ]);
+    const onSuccess = (0, react_1.useCallback)(() => {
+        waitForComposition(newId).then(() => {
+            (0, url_state_1.pushUrl)(`/${newId}`);
+        });
+    }, [newId]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+    }, []);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "New composition" }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsxs("div", { style: content, children: [
+                            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(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] }) })
+                                ] }), 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.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(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames }), 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 }) })
+                                ] })
+                        ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: "Creating composition...", errorNotification: "Could not create composition", successNotification: `Created ${newId}`, genericSubmitLabel: "Add to root file", submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: null, valid: valid, onSuccess: onSuccess, fallbackToRootFile: true }) })
+                ] })
+        ] }));
+};
+const NewComposition = () => {
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(NewCompositionLoaded, {}) }));
+};
+exports.NewComposition = NewComposition;

package/dist/components/PreviewToolbar.js

@@ -83,8 +83,8 @@ const PreviewToolbarControl = ({ children }) => {
 };
 const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
     const { playbackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
-    const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
-    const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { playerMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
+    const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
     const previewToolbarRef = (0, react_1.useRef)(null);
@@ -163,7 +163,7 @@ const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
                     jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                             jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
                         ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: mediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                 ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, {}) })
                 ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/ResetZoomButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const ResetZoomButton: React.FC<{
-    onClick: () => void;
+    readonly onClick: () => void;
 }>;

package/dist/components/ResetZoomButton.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Button_1 = require("./Button");
 const ResetZoomButton = ({ onClick }) => {
-    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, onPointerDown: onPointerDown, children: "Reset zoom" }));
 };
 exports.ResetZoomButton = ResetZoomButton;

package/dist/components/SelectedOutlineElement.js

@@ -42,6 +42,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
@@ -914,6 +915,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;
@@ -948,6 +950,9 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
         const disableInteractivityDisabled = !target.sequence.showInTimeline;
         const sourceEditDisabled = !target.sequence.controls || !nodePath.absolutePath;
+        const canAddEffect = target.nodePathInfo.supportsEffects &&
+            !sourceEditDisabled &&
+            previewServerState.type === 'connected';
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -1021,12 +1026,46 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
             originalLocation,
             selectAsset,
             sequence: target.sequence,
+            sourceActions: [
+                ...(target.nodePathInfo.supportsEffects
+                    ? [
+                        {
+                            type: 'item',
+                            id: 'add-effect',
+                            keyHint: null,
+                            label: 'Add effect...',
+                            leftItem: null,
+                            disabled: !canAddEffect,
+                            onClick: () => {
+                                if (!canAddEffect ||
+                                    previewServerState.type !== 'connected') {
+                                    return;
+                                }
+                                setSelectedModal({
+                                    type: 'add-effect',
+                                    clientId: previewServerState.clientId,
+                                    fileName: nodePath.absolutePath,
+                                    nodePath,
+                                });
+                            },
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            value: 'add-effect',
+                        },
+                        {
+                            type: 'divider',
+                            id: 'add-effect-divider',
+                        },
+                    ]
+                    : []),
+            ],
         });
     }, [
         confirm,
         onSelect,
         previewServerState,
         selectAsset,
+        setSelectedModal,
         setPropStatuses,
         target,
         updateResolvedStackTrace,