@remotion/studio 4.0.488 → 4.0.490

package/dist/components/MobilePanel.js

@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
+const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const CancelButton_1 = require("./NewComposition/CancelButton");
 const container = {
@@ -25,13 +26,18 @@ const buttonContainer = {
     alignItems: 'center',
     display: 'flex',
     justifyContent: 'flex-end',
+    paddingRight: 8,
 };
 const button = {
-    height: 20,
-    width: 20,
+    height: 16,
+    width: 16,
+    flexShrink: 0,
+};
+const renderCloseIcon = (color) => {
+    return jsx_runtime_1.jsx(CancelButton_1.CancelIcon, { style: { ...button, color } });
 };
 function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     return react_dom_1.default.createPortal(jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(CancelButton_1.CancelButton, { style: button, onPress: onClose }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
+            jsx_runtime_1.jsx("div", { style: buttonContainer, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClose, renderAction: renderCloseIcon, title: "Close sidebar" }) }), children] }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/Modals.js

@@ -7,6 +7,7 @@ exports.Modals = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
+const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -25,15 +26,14 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
-const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === '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, {})] }));
+                (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 })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

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

@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react';
 import React from 'react';
+export declare const CancelIcon: React.FC<SVGProps<SVGSVGElement>>;
 export declare const CancelButton: React.FC<SVGProps<SVGSVGElement> & {
     readonly onPress: () => void;
 }>;

package/dist/components/NewComposition/CancelButton.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CancelButton = void 0;
+exports.CancelButton = exports.CancelIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
@@ -14,8 +14,12 @@ const style = {
     justifyContent: 'center',
     alignItems: 'center',
 };
+const CancelIcon = (props) => {
+    return (jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }));
+};
+exports.CancelIcon = CancelIcon;
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx("svg", { viewBox: "0 0 320 512", ...props, children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR, d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: jsx_runtime_1.jsx(exports.CancelIcon, { ...props }) }));
 };
 exports.CancelButton = CancelButton;

package/dist/components/NewComposition/MenuContent.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const mobile_layout_1 = require("../../helpers/mobile-layout");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const MenuDivider_1 = require("../Menu/MenuDivider");
@@ -168,8 +169,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         return containerStyles;
     }, [fixedHeight, isMobileLayout]);
     (0, react_1.useEffect)(() => {
-        if (!keybindings.isHighestContext ||
-            !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!keybindings.isHighestContext || !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             return;
         }
         const onKeyDown = (event) => {

package/dist/components/Preview.js

@@ -121,7 +121,7 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: outer, children: [
+    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
             jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -5,8 +5,13 @@ export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAx
 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, }: {
+type OutlineSequenceParent = {
+    readonly id: string;
+    readonly parent: string | null;
+};
+export declare const orderOutlinesForRendering: ({ outlines, sequences, targetsByKey, }: {
     readonly outlines: readonly SelectedOutline[];
+    readonly sequences: readonly OutlineSequenceParent[];
     readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{

package/dist/components/SelectedOutlineOverlay.js

@@ -111,13 +111,251 @@ const SelectedOutlineSnapIndicators = ({ activeSnapPoints, compositionHeight, co
             return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
         }) }));
 };
-const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
-    return [...outlines].sort((a, b) => {
-        var _a, _b;
-        var _c, _d;
-        const aSelected = (_c = (_a = targetsByKey.get(a.key)) === null || _a === void 0 ? void 0 : _a.selected) !== null && _c !== void 0 ? _c : false;
-        const bSelected = (_d = (_b = targetsByKey.get(b.key)) === null || _b === void 0 ? void 0 : _b.selected) !== null && _d !== void 0 ? _d : false;
-        return Number(aSelected) - Number(bSelected);
+const outlinePointEqualityTolerance = 0.5;
+const outlineAreaEqualityTolerance = 0.5;
+const outlineBoundsOverlapTolerance = 0.5;
+const outlinePointsAreEquivalent = (a, b) => {
+    return (Math.abs(a.x - b.x) <= outlinePointEqualityTolerance &&
+        Math.abs(a.y - b.y) <= outlinePointEqualityTolerance);
+};
+const outlinesHaveEquivalentHitArea = (a, b) => {
+    if (a.points.length !== b.points.length) {
+        return false;
+    }
+    for (let startIndex = 0; startIndex < b.points.length; startIndex++) {
+        for (const direction of [1, -1]) {
+            const pointsMatch = a.points.every((point, index) => {
+                const bIndex = (startIndex + direction * index + b.points.length) % b.points.length;
+                return outlinePointsAreEquivalent(point, b.points[bIndex]);
+            });
+            if (pointsMatch) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+const getOutlineHitArea = (outline) => {
+    let area = 0;
+    for (let i = 0; i < outline.points.length; i++) {
+        const current = outline.points[i];
+        const next = outline.points[(i + 1) % outline.points.length];
+        area += current.x * next.y - next.x * current.y;
+    }
+    return Math.abs(area) / 2;
+};
+const getOutlineBounds = (outline) => {
+    const xs = outline.points.map((point) => point.x);
+    const ys = outline.points.map((point) => point.y);
+    return {
+        maxX: Math.max(...xs),
+        maxY: Math.max(...ys),
+        minX: Math.min(...xs),
+        minY: Math.min(...ys),
+    };
+};
+const outlineBoundsOverlap = (a, b) => {
+    const aBounds = getOutlineBounds(a);
+    const bBounds = getOutlineBounds(b);
+    return (aBounds.minX <= bBounds.maxX + outlineBoundsOverlapTolerance &&
+        aBounds.maxX + outlineBoundsOverlapTolerance >= bBounds.minX &&
+        aBounds.minY <= bBounds.maxY + outlineBoundsOverlapTolerance &&
+        aBounds.maxY + outlineBoundsOverlapTolerance >= bBounds.minY);
+};
+const getSequenceId = (target) => {
+    var _a;
+    var _b;
+    return (_b = (_a = target === null || target === void 0 ? void 0 : target.sequence) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null;
+};
+const getParentBySequenceId = ({ sequences, targetsByKey, }) => {
+    const parentBySequenceId = new Map();
+    for (const sequence of sequences) {
+        parentBySequenceId.set(sequence.id, sequence.parent);
+    }
+    for (const target of targetsByKey.values()) {
+        const sequenceId = getSequenceId(target);
+        if (sequenceId !== null && !parentBySequenceId.has(sequenceId)) {
+            parentBySequenceId.set(sequenceId, target.sequence.parent);
+        }
+    }
+    return parentBySequenceId;
+};
+const isAncestorTarget = ({ ancestor, descendant, parentBySequenceId, }) => {
+    var _a;
+    var _b, _c;
+    const ancestorId = getSequenceId(ancestor);
+    if (ancestorId === null) {
+        return false;
+    }
+    let parentId = (_b = (_a = descendant.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+    while (parentId !== null) {
+        if (parentId === ancestorId) {
+            return true;
+        }
+        parentId = (_c = parentBySequenceId.get(parentId)) !== null && _c !== void 0 ? _c : null;
+    }
+    return false;
+};
+const orderOutlineGroup = ({ outlines, parentBySequenceId, targetsByKey, }) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const incomingEdges = new Map();
+    const outgoingEdges = new Map();
+    const outlinesByKey = new Map(outlines.map((outline) => [outline.key, outline]));
+    for (const outline of outlines) {
+        incomingEdges.set(outline.key, new Set());
+        outgoingEdges.set(outline.key, new Set());
+    }
+    const hasPath = ({ fromKey, seen, toKey, }) => {
+        var _a;
+        if (fromKey === toKey) {
+            return true;
+        }
+        if (seen.has(fromKey)) {
+            return false;
+        }
+        seen.add(fromKey);
+        for (const nextKey of (_a = outgoingEdges.get(fromKey)) !== null && _a !== void 0 ? _a : []) {
+            if (hasPath({ fromKey: nextKey, seen, toKey })) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const addEdge = (before, after, options) => {
+        if (before.key === after.key) {
+            return;
+        }
+        const incoming = incomingEdges.get(after.key);
+        const outgoing = outgoingEdges.get(before.key);
+        if (incoming === undefined || outgoing === undefined) {
+            throw new Error('Expected outline to be registered before adding edge');
+        }
+        if (outgoing.has(after.key)) {
+            return;
+        }
+        if (hasPath({ fromKey: after.key, seen: new Set(), toKey: before.key })) {
+            if (options === null || options === void 0 ? void 0 : options.skipIfCycle) {
+                return;
+            }
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        incoming.add(before.key);
+        outgoing.add(after.key);
+    };
+    const addAncestorConstraint = ({ ancestor, descendant, descendantContainsSelection, equivalentHitArea, }) => {
+        // Usually, children should be above parents so nested elements are directly
+        // selectable. If an unselected child has the same hit area as its parent, put
+        // it below the parent so the wrapper can be selected. Once the child or
+        // one of its properties is selected, keep it above the parent so it remains
+        // directly draggable.
+        if (equivalentHitArea && !descendantContainsSelection) {
+            addEdge(descendant, ancestor);
+        }
+        else {
+            addEdge(ancestor, descendant);
+        }
+    };
+    const outlineBySequenceId = new Map();
+    for (const outline of outlines) {
+        const sequenceId = getSequenceId(targetsByKey.get(outline.key));
+        if (sequenceId !== null) {
+            outlineBySequenceId.set(sequenceId, outline);
+        }
+    }
+    // Only constrain each outline against its nearest rendered ancestor. The
+    // resulting graph follows the sequence tree, so pairwise subpixel equivalence
+    // cannot introduce contradictory edges across three nested outlines.
+    for (const descendant of outlines) {
+        const descendantTarget = targetsByKey.get(descendant.key);
+        let parentId = (_b = (_a = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.sequence) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+        while (parentId !== null) {
+            const ancestor = outlineBySequenceId.get(parentId);
+            if (ancestor !== undefined) {
+                addAncestorConstraint({
+                    ancestor,
+                    descendant,
+                    descendantContainsSelection: ((_c = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.selected) !== null && _c !== void 0 ? _c : false) ||
+                        ((_d = descendantTarget === null || descendantTarget === void 0 ? void 0 : descendantTarget.containsSelection) !== null && _d !== void 0 ? _d : false),
+                    equivalentHitArea: outlinesHaveEquivalentHitArea(ancestor, descendant),
+                });
+                break;
+            }
+            parentId = (_e = parentBySequenceId.get(parentId)) !== null && _e !== void 0 ? _e : null;
+        }
+    }
+    // For unrelated overlapping outlines, put broader hit targets below
+    // smaller ones so a large selected sequence cannot swallow clicks on
+    // a more specific element in the same canvas area.
+    for (let i = 0; i < outlines.length; i++) {
+        for (let j = i + 1; j < outlines.length; j++) {
+            const a = outlines[i];
+            const b = outlines[j];
+            const aTarget = targetsByKey.get(a.key);
+            const bTarget = targetsByKey.get(b.key);
+            if (aTarget === undefined || bTarget === undefined) {
+                continue;
+            }
+            const aAncestorOfB = isAncestorTarget({
+                ancestor: aTarget,
+                descendant: bTarget,
+                parentBySequenceId,
+            });
+            const bAncestorOfA = isAncestorTarget({
+                ancestor: bTarget,
+                descendant: aTarget,
+                parentBySequenceId,
+            });
+            if (aAncestorOfB || bAncestorOfA || !outlineBoundsOverlap(a, b)) {
+                continue;
+            }
+            const aArea = getOutlineHitArea(a);
+            const bArea = getOutlineHitArea(b);
+            if (Math.abs(aArea - bArea) <= outlineAreaEqualityTolerance) {
+                continue;
+            }
+            if (aArea > bArea) {
+                addEdge(a, b, { skipIfCycle: true });
+            }
+            else {
+                addEdge(b, a, { skipIfCycle: true });
+            }
+        }
+    }
+    const emitted = new Set();
+    const visiting = new Set();
+    const ordered = [];
+    const visit = (outline) => {
+        var _a;
+        if (emitted.has(outline.key)) {
+            return;
+        }
+        if (visiting.has(outline.key)) {
+            throw new Error('Could not determine a stable outline rendering order');
+        }
+        visiting.add(outline.key);
+        for (const dependencyKey of (_a = incomingEdges.get(outline.key)) !== null && _a !== void 0 ? _a : []) {
+            const dependency = outlinesByKey.get(dependencyKey);
+            if (dependency === undefined) {
+                throw new Error('Expected outline dependency to exist');
+            }
+            visit(dependency);
+        }
+        visiting.delete(outline.key);
+        emitted.add(outline.key);
+        ordered.push(outline);
+    };
+    for (const outline of outlines) {
+        visit(outline);
+    }
+    return ordered;
+};
+const orderOutlinesForRendering = ({ outlines, sequences, targetsByKey, }) => {
+    const parentBySequenceId = getParentBySequenceId({ sequences, targetsByKey });
+    return orderOutlineGroup({
+        outlines,
+        parentBySequenceId,
+        targetsByKey,
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
@@ -414,8 +652,8 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
         return new Map(outlineTargets.map((target) => [target.key, target]));
     }, [outlineTargets]);
     const outlinesForRendering = (0, react_1.useMemo)(() => {
-        return (0, exports.orderOutlinesForRendering)({ outlines, targetsByKey });
-    }, [outlines, targetsByKey]);
+        return (0, exports.orderOutlinesForRendering)({ outlines, sequences, targetsByKey });
+    }, [outlines, sequences, targetsByKey]);
     const outlinesByKey = (0, react_1.useMemo)(() => {
         return new Map(outlines.map((outline) => [outline.key, outline]));
     }, [outlines]);

package/dist/components/Timeline/MaxTimelineTracks.js

@@ -2,13 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const colors_1 = require("../../helpers/colors");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
-exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined' ||
-    process.env.MAX_TIMELINE_TRACKS === null
-    ? studio_shared_1.DEFAULT_TIMELINE_TRACKS
-    : Number(process.env.MAX_TIMELINE_TRACKS);
+exports.MAX_TIMELINE_TRACKS = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {
     height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -90,6 +90,9 @@ const effectPropStatusToClipboardParam = (prop) => {
         keyframes: prop.keyframes,
         easing: prop.easing,
         clamping: prop.clamping,
+        ...(prop.output === undefined || prop.output === 'linear'
+            ? {}
+            : { output: prop.output }),
         ...(prop.posterize === undefined ? {} : { posterize: prop.posterize }),
     };
 };

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,7 +6,6 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
-const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
@@ -216,7 +215,6 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     var _a;
     var _b, _c;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -302,33 +300,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
-        var _a;
-        if (propStatus === null || !isKeyframedStatus(propStatus)) {
-            return;
-        }
-        setSelectedModal({
-            type: 'keyframe-settings',
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
-            status: propStatus,
-            schema: field.effectSchema,
-            effectIndex: field.effectIndex,
-        });
-    }, [
-        field.description,
-        field.effectIndex,
-        field.effectSchema,
-        field.key,
-        nodePath,
-        propStatus,
-        setSelectedModal,
-        validatedLocation.source,
-    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        const values = [
+        return [
             {
                 type: 'item',
                 id: 'reset-effect-field',
@@ -342,28 +315,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-        if (propStatus !== null && isKeyframedStatus(propStatus)) {
-            values.push({
-                type: 'item',
-                id: 'keyframe-settings-effect-field',
-                keyHint: null,
-                label: 'Keyframe settings...',
-                leftItem: null,
-                disabled: previewServerState.type !== 'connected',
-                onClick: onOpenKeyframeSettings,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'keyframe-settings-effect-field',
-            });
-        }
-        return values;
-    }, [
-        canShowReset,
-        onOpenKeyframeSettings,
-        onReset,
-        previewServerState,
-        propStatus,
-    ]);
+    }, [canShowReset, onReset]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -41,6 +41,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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
@@ -534,18 +535,17 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
+        if (!canOpenInEditor) {
+            return;
+        }
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
             return;
         }
         e.stopPropagation();
-        if (canRenameThisSequence) {
-            setIsRenaming(true);
-            return;
-        }
         openInEditor();
-    }, [canRenameThisSequence, openInEditor]);
+    }, [canOpenInEditor, openInEditor]);
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -558,7 +558,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         await saveName(name);
     }, [saveName]);
     react_1.default.useEffect(() => {
-        if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
+        if (!canRenameSelectedSequence || !(0, studio_runtime_config_1.getStudioKeyboardShortcutsEnabled)()) {
             setIsRenaming(false);
             return;
         }
@@ -765,9 +765,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
-            ? onSequenceDoubleClick
-            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",

package/dist/components/Timeline/TimelineSequenceName.js

@@ -66,9 +66,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             return;
         }
         input.focus();
-        const basenameIndex = editableDisplayName.lastIndexOf('.');
-        const selectionEnd = basenameIndex > 0 ? basenameIndex : editableDisplayName.length;
-        input.setSelectionRange(0, selectionEnd);
+        input.select();
     }, [editableDisplayName, editing]);
     const save = (0, react_1.useCallback)(() => {
         onSaveName(draftName).catch(() => undefined);