@remotion/studio 4.0.493 → 4.0.495

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

@@ -1,12 +1,13 @@
 import type React from 'react';
 export declare const container: React.CSSProperties;
 export declare const scrollableContainer: React.CSSProperties;
-export declare const defaultPropsSection: React.CSSProperties;
-export declare const visualControlsSection: React.CSSProperties;
-export declare const compositionSection: React.CSSProperties;
+export declare const compositionDefaultPropsSection: React.CSSProperties;
+export declare const compositionVisualControlsSection: React.CSSProperties;
+export declare const inspectorOverviewSection: React.CSSProperties;
 export declare const inspectorSectionDivider: React.CSSProperties;
 export declare const sequenceHeaderDivider: React.CSSProperties;
 export declare const sectionHeader: React.CSSProperties;
+export declare const inspectorSectionBody: React.CSSProperties;
 export declare const sequenceHeader: React.CSSProperties;
 export declare const sequenceHeaderTitle: React.CSSProperties;
 export declare const sequenceHeaderSubtitle: React.CSSProperties;
@@ -21,6 +22,7 @@ export declare const selectedContainer: React.CSSProperties;
 export declare const centeredMessage: React.CSSProperties;
 export declare const detailsContainer: React.CSSProperties;
 export declare const detailsWithInlineAction: React.CSSProperties;
+export declare const inspectorActionSection: React.CSSProperties;
 export declare const detailsBeforeInlineAction: React.CSSProperties;
 export declare const guideDetailsContainer: React.CSSProperties;
 export declare const detailRow: React.CSSProperties;

package/dist/components/InspectorPanel/styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.detailsWithInlineAction = exports.detailsContainer = exports.centeredMessage = exports.selectedContainer = exports.resolveLinkStyle = exports.defaultPropsWarningMessages = exports.defaultPropsWarningContainer = exports.sectionHeaderEnd = exports.sectionHeaderStart = exports.sectionHeaderTitle = exports.sectionHeaderRow = exports.sequenceHeaderSubtitle = exports.sequenceHeaderTitle = exports.sequenceHeader = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.compositionSection = exports.visualControlsSection = exports.defaultPropsSection = exports.scrollableContainer = exports.container = void 0;
+exports.keyframeEditorValue = exports.keyframeEditorLabel = exports.keyframeEditorRow = exports.detailValue = exports.detailLabel = exports.detailRow = exports.guideDetailsContainer = exports.detailsBeforeInlineAction = exports.inspectorActionSection = exports.detailsWithInlineAction = 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.inspectorSectionBody = exports.sectionHeader = exports.sequenceHeaderDivider = exports.inspectorSectionDivider = exports.inspectorOverviewSection = exports.compositionVisualControlsSection = exports.compositionDefaultPropsSection = exports.scrollableContainer = exports.container = void 0;
 const colors_1 = require("../../helpers/colors");
 const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 exports.container = {
@@ -16,15 +16,15 @@ exports.scrollableContainer = {
     ...exports.container,
     overflowY: 'auto',
 };
-exports.defaultPropsSection = {
+exports.compositionDefaultPropsSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.visualControlsSection = {
+exports.compositionVisualControlsSection = {
     display: 'flex',
     flexDirection: 'column',
 };
-exports.compositionSection = {
+exports.inspectorOverviewSection = {
     display: 'flex',
     flexDirection: 'column',
 };
@@ -44,6 +44,12 @@ exports.sectionHeader = {
     padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
     userSelect: 'none',
 };
+exports.inspectorSectionBody = {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+    paddingBottom: 8,
+};
 exports.sequenceHeader = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -158,6 +164,9 @@ exports.detailsContainer = {
 exports.detailsWithInlineAction = {
     paddingBottom: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
 };
+exports.inspectorActionSection = {
+    padding: '4px 0',
+};
 exports.detailsBeforeInlineAction = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };

package/dist/components/InspectorPanel/use-composition-actions.d.ts

@@ -0,0 +1,8 @@
+export declare const useCompositionActions: () => {
+    canInsertAsset: boolean;
+    canInsertSolid: boolean;
+    canShowInsertAsset: boolean;
+    canShowInsertSolid: boolean;
+    insertAsset: () => Promise<void>;
+    insertSolid: () => Promise<void>;
+};

package/dist/components/InspectorPanel/use-composition-actions.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCompositionActions = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const call_api_1 = require("../call-api");
+const import_assets_1 = require("../import-assets");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
+const useCompositionActions = () => {
+    var _a, _b;
+    const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [isAddingSolid, setIsAddingSolid] = (0, react_1.useState)(false);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
+    const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        if (currentCompositionId === null) {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
+    const canShowInsertSolid = previewInteractive &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        videoConfig !== null;
+    const canInsertSolid = canShowInsertSolid && !isAddingSolid;
+    const canShowInsertAsset = previewInteractive &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null;
+    const canInsertAsset = canShowInsertAsset && !isAddingAsset;
+    const insertSolid = (0, react_1.useCallback)(async () => {
+        if (!canInsertSolid ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            return;
+        }
+        setIsAddingSolid(true);
+        try {
+            const result = await (0, call_api_1.callApi)('/api/insert-jsx-element', {
+                compositionFile,
+                compositionId: currentCompositionId,
+                element: {
+                    type: 'solid',
+                    width: videoConfig.width,
+                    height: videoConfig.height,
+                    position: null,
+                },
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Added <Solid> to source file', 2000);
+                return;
+            }
+            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+        finally {
+            setIsAddingSolid(false);
+        }
+    }, [canInsertSolid, compositionFile, currentCompositionId, videoConfig]);
+    const insertAsset = (0, react_1.useCallback)(async () => {
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null) {
+            return;
+        }
+        const files = await (0, import_assets_1.pickFilesToImport)();
+        if (files.length === 0) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, import_assets_1.importAssets)({
+                files,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: null,
+                dropPosition: null,
+                svgImportMode: 'image',
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [canInsertAsset, compositionFile, currentCompositionId]);
+    return {
+        canInsertAsset,
+        canInsertSolid,
+        canShowInsertAsset,
+        canShowInsertSolid,
+        insertAsset,
+        insertSolid,
+    };
+};
+exports.useCompositionActions = useCompositionActions;

package/dist/components/InspectorPanel.js

@@ -3,17 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const AssetInspector_1 = require("./InspectorPanel/AssetInspector");
 const common_1 = require("./InspectorPanel/common");
-const DefaultInspector_1 = require("./InspectorPanel/DefaultInspector");
+const CompositionInspector_1 = require("./InspectorPanel/CompositionInspector");
 const inspector_selection_1 = require("./InspectorPanel/inspector-selection");
 const SelectedInspector_1 = require("./InspectorPanel/SelectedInspector");
 const styles_1 = require("./InspectorPanel/styles");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const InspectorPanel = ({ composition, currentDefaultProps, readOnlyStudio, setDefaultProps }) => {
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     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, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }));
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset') {
+            return jsx_runtime_1.jsx(AssetInspector_1.AssetInspector, { readOnlyStudio: readOnlyStudio });
+        }
+        if (composition === null) {
+            return jsx_runtime_1.jsx("div", { style: styles_1.container });
+        }
+        return (jsx_runtime_1.jsx(CompositionInspector_1.CompositionInspector, { composition: composition, currentDefaultProps: currentDefaultProps, readOnlyStudio: readOnlyStudio, setDefaultProps: setDefaultProps }));
     }
     if (selectedItems.length > 1) {
         if (sameSequenceInspectorSelection) {

package/dist/components/InspectorSequenceSection.d.ts

@@ -14,7 +14,6 @@ export declare const InspectorSequenceSection: React.FC<{
     readonly validatedLocation: CodePosition;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
-    readonly renderSectionHeader: (children: React.ReactNode) => React.ReactNode;
     readonly renderTransformControls: () => React.ReactNode;
 }>;
 export {};

package/dist/components/InspectorSequenceSection.js

@@ -1,41 +1,8 @@
 "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 = __importStar(require("react"));
+const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -43,6 +10,7 @@ const plus_1 = require("../icons/plus");
 const modals_1 = require("../state/modals");
 const CurrentAsset_1 = require("./CurrentAsset");
 const InlineAction_1 = require("./InlineAction");
+const common_1 = require("./InspectorPanel/common");
 const styles_1 = require("./InspectorPanel/styles");
 const InspectorPanelLayout_1 = require("./InspectorPanelLayout");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -63,11 +31,7 @@ const emptyState = {
     fontFamily: 'sans-serif',
     fontSize: 12,
     lineHeight: 1.4,
-    padding: '0 12px 8px',
-};
-const controlsEffectsDivider = {
-    ...styles_1.sequenceHeaderDivider,
-    margin: '8px 0 4px',
+    padding: '0 12px',
 };
 const effectsHeaderTitle = {
     ...styles_1.sectionHeaderTitle,
@@ -170,7 +134,7 @@ const hasSequenceControls = (sequence) => {
     return sequence.controls !== null;
 };
 exports.hasSequenceControls = hasSequenceControls;
-const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderSectionHeader, renderTransformControls, }) => {
+const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, keyframeDisplayOffset, renderTransformControls, }) => {
     const { tree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
@@ -240,7 +204,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     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;
     const canAddEffect = nodePathInfo.supportsEffects &&
         previewServerState.type === 'connected' &&
         Boolean(validatedLocation.source);
@@ -261,18 +224,16 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
         setSelectedModal,
         validatedLocation.source,
     ]);
-    const renderEffectsHeader = () => {
-        return renderSectionHeader(jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
-                jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
-    };
+    const effectsHeader = (jsx_runtime_1.jsxs("div", { style: styles_1.sectionHeaderRow, children: [
+            jsx_runtime_1.jsx("div", { style: effectsHeaderTitle, children: "Effects" }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { disabled: !canAddEffect, onClick: onAddEffect, title: canAddEffect ? 'Add effect' : undefined, renderAction: (color) => jsx_runtime_1.jsx(plus_1.Plus, { color: color, style: plusIcon }) })] }));
     const renderRow = ({ node, depth }) => {
         return (jsx_runtime_1.jsx(TimelineRowLayoutContext_1.TimelineRowLayoutContext.Provider, { value: TimelineRowLayoutContext_1.INSPECTOR_TIMELINE_ROW_LAYOUT, children: jsx_runtime_1.jsx(TimelineExpandedRow_1.TimelineExpandedRow, { node: node, depth: depth, nestedDepth: 0, rowDepthBase: 0, getIsExpanded: getIsExpanded, toggleTrack: toggleTrack, validatedLocation: validatedLocation, nodePath: nodePathInfo.sequenceSubscriptionKey, schema: schema, keyframeDisplayOffset: keyframeDisplayOffset, keyframeControlsMode: "inspector" }) }, JSON.stringify(node.nodePathInfo)));
     };
     if (controlRows.length === 0 && !showEffectsSection) {
-        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }));
+        return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx(common_1.InspectorSection, { header: "Controls", children: jsx_runtime_1.jsx("div", { style: emptyState, children: "No schema" }) }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [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.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
+    return (jsx_runtime_1.jsxs("div", { style: container, children: [controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group) => (jsx_runtime_1.jsxs(common_1.InspectorSection, { header: group.label, children: [group.id === 'source' && localAsset ? (jsx_runtime_1.jsx(CurrentAsset_1.AssetInfo, { assetName: localAsset.assetPath, contentSized: true, onAssetClick: jumpToAsset, readOnlyStudio: true })) : null, group.id === 'source' && remoteAsset && remoteSourceParts ? (jsx_runtime_1.jsxs("div", { style: remoteSourceLabel, title: remoteAsset.href, children: [
                                 jsx_runtime_1.jsx("span", { style: remoteSourceLeading, children: remoteSourceParts.leading }), jsx_runtime_1.jsx("span", { style: remoteSourceTrailing, children: remoteSourceParts.trailing })
-                            ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : 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(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null] })) : null] }));
+                            ] })) : null, group.id === 'transforms' ? renderTransformControls() : null, group.id === 'source' ? null : group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsx(common_1.InspectorSection, { header: effectsHeader, children: effectRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) })) : null })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/Modals.js

@@ -26,6 +26,7 @@ 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 SvgImportDialog_1 = require("./SvgImportDialog");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
@@ -34,6 +35,6 @@ const Modals = ({ readOnlyStudio }) => {
         '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 === '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 })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && 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 })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

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

@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 import type { RemInputStatus } from './RemInput';
+export declare const inputDraggerContainerStyle: React.CSSProperties;
 export declare const deriveInputDraggerStep: ({ min, snapToStep, step, }: {
     readonly min: string | number | undefined;
     readonly snapToStep: boolean;
@@ -10,6 +11,11 @@ export declare const deriveInputDraggerDragStartValue: ({ min, value, }: {
     readonly min: string | number | undefined;
     readonly value: string | number | readonly string[] | undefined;
 }) => number;
+export declare const isInputDraggerValueInRange: ({ max, min, value, }: {
+    readonly max: string | number | undefined;
+    readonly min: string | number | undefined;
+    readonly value: number;
+}) => boolean;
 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.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = void 0;
+exports.InputDragger = exports.isInputDraggerValueInRange = exports.deriveInputDraggerDragStartValue = exports.deriveInputDraggerStep = exports.inputDraggerContainerStyle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -43,6 +43,15 @@ const input_dragger_click_lock_1 = require("../../state/input-dragger-click-lock
 const z_index_1 = require("../../state/z-index");
 const ForceSpecificCursor_1 = require("../ForceSpecificCursor");
 const RemInput_1 = require("./RemInput");
+exports.inputDraggerContainerStyle = {
+    ...RemInput_1.inputBaseStyle,
+    backgroundColor: colors_1.TRANSPARENT,
+    borderColor: colors_1.TRANSPARENT,
+    display: 'inline-block',
+    lineHeight: 1.5,
+    outline: 'none',
+    padding: '4px 6px',
+};
 const isInt = (num) => {
     return num % 1 === 0;
 };
@@ -76,20 +85,18 @@ const deriveInputDraggerDragStartValue = ({ min, value, }) => {
     return 0;
 };
 exports.deriveInputDraggerDragStartValue = deriveInputDraggerDragStartValue;
+const isInputDraggerValueInRange = ({ max, min, value, }) => {
+    const numericMin = Number(min);
+    const numericMax = Number(max);
+    return ((!Number.isFinite(numericMin) || value >= numericMin) &&
+        (!Number.isFinite(numericMax) || value <= numericMax));
+};
+exports.isInputDraggerValueInRange = isInputDraggerValueInRange;
 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);
     const fallbackRef = (0, react_1.useRef)(null);
     const pointerDownRef = (0, react_1.useRef)(false);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            ...RemInput_1.inputBaseStyle,
-            backgroundColor: colors_1.TRANSPARENT,
-            borderColor: colors_1.TRANSPARENT,
-            padding: '4px 6px',
-            ...{ outline: 'none' },
-        };
-    }, []);
     const span = (0, react_1.useMemo)(() => ({
         color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
@@ -126,10 +133,16 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     }, []);
     const onInputChange = (0, react_1.useCallback)((e) => {
         const parsed = Number(e.target.value);
-        if (e.target.value !== '' && !Number.isNaN(parsed)) {
+        if (e.target.value !== '' &&
+            !Number.isNaN(parsed) &&
+            (0, exports.isInputDraggerValueInRange)({
+                max: _max,
+                min: _min,
+                value: parsed,
+            })) {
             onValueChange(parsed);
         }
-    }, [onValueChange]);
+    }, [_max, _min, onValueChange]);
     const onBlur = (0, react_1.useCallback)(() => {
         if (!fallbackRef.current) {
             return;
@@ -233,6 +246,6 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
     if (inputFallback) {
         return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, pattern: '[0-9]*[.]?[0-9]*', rightAlign: rightAlign, small: small, ...props }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: style, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

package/dist/components/NewComposition/NewComposition.js

@@ -36,6 +36,13 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
         : null;
     const initialDimensions = (0, get_new_composition_defaults_1.getNewCompositionDefaults)(initialComposition);
     const [newId, setName] = (0, react_1.useState)(() => (0, use_create_composition_1.getUniqueCompositionName)(compositions));
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.select();
+    }, []);
     const [selectedFrameRate, setFrameRate] = (0, react_1.useState)(initialDimensions.fps);
     const [size, setSize] = (0, react_1.useState)(() => ({
         width: initialDimensions.width,
@@ -102,7 +109,7 @@ const NewCompositionLoaded = ({ folderName, parentName, stack }) => {
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Folder" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("span", { style: folderPathStyle, children: folderPath }) })
                                 ] })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "ID" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs(InputAndValidationContainer_1.InputAndValidationContainer, { children: [
-                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                                                jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: inputRef, 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: [

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

@@ -3,7 +3,7 @@ import React from 'react';
 export declare const WarningTriangle: React.FC<SVGProps<SVGSVGElement>>;
 type ValidationMessageSize = 'default' | 'compact';
 export declare const ValidationMessage: React.FC<{
-    readonly message: string;
+    readonly message: React.ReactNode;
     readonly align: 'flex-start' | 'flex-end';
     readonly type: 'warning' | 'error';
     readonly action?: React.ReactNode;

package/dist/components/Preview.js

@@ -9,6 +9,7 @@ const ErrorLoader_1 = require("../error-overlay/remotion-overlay/ErrorLoader");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const colors_1 = require("../helpers/colors");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const studio_fit_padding_1 = require("../helpers/studio-fit-padding");
 const checkerboard_1 = require("../state/checkerboard");
 const is_menu_item_1 = require("./Menu/is-menu-item");
 const RenderPreview_1 = require("./RenderPreview");
@@ -78,13 +79,20 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
                 scale: 1,
             };
         }
-        return player_1.PlayerInternals.calculateCanvasTransformation({
-            canvasSize,
-            compositionHeight: contentDimensions.height,
-            compositionWidth: contentDimensions.width,
-            previewSize: previewSize.size,
-        });
-    }, [canvasSize, contentDimensions, previewSize.size]);
+        return canvasContent.type === 'composition'
+            ? (0, studio_fit_padding_1.calculateStudioCanvasTransformation)({
+                canvasSize,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
+                previewSize: previewSize.size,
+            })
+            : player_1.PlayerInternals.calculateCanvasTransformation({
+                canvasSize,
+                compositionHeight: contentDimensions.height,
+                compositionWidth: contentDimensions.width,
+                previewSize: previewSize.size,
+            });
+    }, [canvasContent.type, canvasSize, contentDimensions, previewSize.size]);
     const outer = (0, react_1.useMemo)(() => {
         return {
             width: contentDimensions === 'none' ? '100%' : contentDimensions.width * scale,

package/dist/components/RenderModal/RenderModalOutputName.js

@@ -2,17 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalOutputName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
+const folder_1 = require("../../icons/folder");
+const InlineAction_1 = require("../InlineAction");
 const layout_1 = require("../layout");
 const RemInput_1 = require("../NewComposition/RemInput");
 const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
 const layout_2 = require("./layout");
+const existsMessageStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    color: colors_1.WHITE,
+    whiteSpace: 'nowrap',
+};
+const openIconStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+};
 const RenderModalOutputName = ({ existence, inputStyle, outName, onValueChange, validationMessage, label: labelText, }) => {
+    const openExistingOutput = (0, react_1.useCallback)(() => {
+        (0, actions_1.openInFileExplorer)({ directory: outName }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [outName]);
+    const renderOpenIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
+    }, []);
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
     return (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
             jsx_runtime_1.jsx(layout_1.Column, { children: jsx_runtime_1.jsx("div", { style: layout_2.label, children: labelText }) }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsxs("div", { children: [
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { status: validationMessage ? 'error' : existence ? 'warning' : 'ok', style: inputStyle, type: "text", value: outName, onChange: onValueChange, rightAlign: true }), validationMessage ? (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-end", message: validationMessage, type: 'error' })
                             ] })) : existence ? (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-end", message: "Will be overwritten", type: 'warning' })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [
+                                            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}` }),
+                                            "Exists, will be overwritten"] }), type: 'warning' })
                             ] })) : null] }) })
         ] }));
 };

package/dist/components/SelectedOutlineOverlay.js

@@ -411,6 +411,7 @@ const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, tr
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
             compositions,
+            timelinePosition,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
             var _a, _b, _c, _d, _e, _f;
             if (sequence.refForOutline === null) {

package/dist/components/SvgImportDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SvgImportDialogState } from '../state/modals';
+export type SvgImportMode = 'image' | 'inline';
+export declare const useSvgImportDialog: () => () => Promise<SvgImportMode | null>;
+export declare const SvgImportDialog: React.FC<{
+    readonly state: SvgImportDialogState;
+}>;