@remotion/studio 4.0.481 → 4.0.483

package/dist/components/Canvas.js

@@ -23,6 +23,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -57,6 +58,11 @@ const isComponentDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
 };
+const isElementDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
 const isSfxDragEvent = (event) => {
     var _a;
     var _b;
@@ -66,6 +72,7 @@ const isRemoteAssetDragEvent = (event) => {
     return (!isFileDragEvent(event) &&
         !isAssetDragEvent(event) &&
         !isComponentDragEvent(event) &&
+        !isElementDragEvent(event) &&
         !isSfxDragEvent(event) &&
         (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
 };
@@ -560,6 +567,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -579,6 +587,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -636,6 +645,16 @@ const Canvas = ({ canvasContent, size }) => {
                 });
             }
             else {
+                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
+                if (elementDragData !== null) {
+                    await (0, import_assets_1.insertElement)({
+                        element: elementDragData.element,
+                        compositionFile,
+                        compositionId: currentCompositionId,
+                        dropPosition,
+                    });
+                    return;
+                }
                 const componentDragData = getComponentDragData(event);
                 if (componentDragData !== null) {
                     await (0, import_assets_1.insertComponent)({

package/dist/components/Editor.js

@@ -107,6 +107,6 @@ const Editor = ({ Root, readOnlyStudio }) => {
                                     ] }) })
                         ] }), jsx_runtime_1.jsx(Modals_1.Modals, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(NotificationCenter_1.NotificationCenter, {})
                 ] }) }) }));
-    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 3, children: editor })) : (editor);
+    return canvas_capture_enabled_1.CANVAS_CAPTURE_ENABLED ? (jsx_runtime_1.jsx(StudioCanvasCapture_1.StudioCanvasCapture, { density: 1.5, children: editor })) : (editor);
 };
 exports.Editor = Editor;

package/dist/components/GlobalKeybindings.js

@@ -71,7 +71,7 @@ const GlobalKeybindings = ({ readOnlyStudio }) => {
                 },
                 key: fieldKey,
             },
-        ]);
+        ], { reveal: true });
         return true;
     }, [currentSelection, timeline]);
     const openRenderModal = (0, react_1.useCallback)(() => {

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -92,7 +92,7 @@ const SequenceExpandedInspector = ({ track }) => {
         if (sequenceSelected) {
             return;
         }
-        selectItems([sequenceSelection]);
+        selectItems([sequenceSelection], { reveal: true });
     }, [selectItems, sequenceSelected, sequenceSelection]);
     if (previewServerState.type !== 'connected') {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Studio server disconnected" });
@@ -112,6 +112,7 @@ const SequenceSelectionInspector = ({ selection }) => {
     if (!track) {
         return jsx_runtime_1.jsx(common_1.InspectorMessage, { children: "Sequence inspector unavailable" });
     }
-    return jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track });
+    const stackKey = track.sequence.getStack();
+    return (jsx_runtime_1.jsx(SequenceExpandedInspector, { track: track }, stackKey !== null && stackKey !== void 0 ? stackKey : track.sequence.id));
 };
 exports.SequenceSelectionInspector = SequenceSelectionInspector;

package/dist/components/InspectorPanel/styles.js

@@ -36,6 +36,7 @@ exports.sectionHeader = {
     fontSize: 12,
     fontWeight: 'bold',
     padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    userSelect: 'none',
 };
 exports.sequenceHeader = {
     backgroundColor: colors_1.BACKGROUND,
@@ -96,6 +97,7 @@ exports.sectionHeaderTitle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.sectionHeaderStart = {

package/dist/components/InspectorSequenceSection.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -55,6 +88,15 @@ const isEffectsRoot = (node) => {
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const getInspectorControlGroups = (rows) => {
+    return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
+        ...group,
+        rows: rows.filter(({ node }) => {
+            var _a;
+            return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.group) === group.id;
+        }),
+    })).filter((group) => group.rows.length > 0);
+};
 const getInspectorSelectableItems = (rows) => {
     return rows.flatMap(({ node }) => {
         const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
@@ -116,6 +158,7 @@ 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 controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const { schema } = sequence.controls;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
@@ -152,6 +195,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, 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] }));
+            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] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

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/SelectedOutlineOverlay.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
+import { type SelectedOutline } from './selected-outline-geometry';
+import { type SelectedOutlineTarget } from './selected-outline-types';
 export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineUvSnapThresholdPx, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';
+export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
+    readonly outlines: readonly SelectedOutline[];
+    readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
+}) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
     readonly scale: number;
 }>;