@remotion/studio 4.0.501 → 4.0.503

package/dist/components/Timeline/get-sequence-context-menu-items.d.ts

@@ -1,7 +1,8 @@
+import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
     readonly deleteDisabled: boolean;
@@ -9,10 +10,11 @@ export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEdi
     readonly duplicateDisabled: boolean;
     readonly fileLocation: string | null;
     readonly includeSourceEditItems: boolean;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
     readonly onDeleteSequenceFromSource: () => void;
     readonly onDisableSequenceInteractivity: () => void;
     readonly onDuplicateSequenceFromSource: () => void;
-    readonly openInEditor: () => void;
+    readonly openInEditor: (editorId: EditorPickerId | null) => void;
     readonly originalLocation: ResolvedStackLocation | null;
     readonly selectAsset: (src: string) => void;
     readonly sequence: TSequence;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSequenceContextMenuItems = void 0;
+const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
+const editor_1 = require("../../icons/editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
@@ -22,11 +24,13 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
     var _a, _b;
+    var _c;
     const editorName = window.remotion_editorName;
     const { documentationLink } = sequence;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
+    const installedEditors = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _c !== void 0 ? _c : [];
     const items = [
         editorName
             ? {
@@ -36,12 +40,44 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
-                onClick: openInEditor,
+                onClick: () => openInEditor(null),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 value: 'open-in-editor',
             }
             : null,
+        editorName && installedEditors.length > 0
+            ? {
+                type: 'item',
+                id: 'open-in-another-editor',
+                keyHint: null,
+                label: 'Open in...',
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: () => undefined,
+                quickSwitcherLabel: null,
+                subMenu: {
+                    items: installedEditors.map((editor) => ({
+                        type: 'item',
+                        id: `open-in-${editor.id}`,
+                        keyHint: null,
+                        label: editor.name,
+                        leftItem: (0, react_1.createElement)(editor_1.EditorIcon, {
+                            editorId: editor.id,
+                            size: 18,
+                        }),
+                        disabled: false,
+                        onClick: () => openInEditor(editor.id),
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: editor.id,
+                    })),
+                    leaveLeftSpace: true,
+                    preselectIndex: false,
+                },
+                value: 'open-in-another-editor',
+            }
+            : null,
         {
             type: 'item',
             id: 'copy-file-location',

package/dist/components/Timeline/save-sequence-prop.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveSequenceProps = exports.saveInlineCaptionPatches = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
-const call_api_1 = require("../call-api");
+const sequence_props_api_1 = require("../sequence-props-api");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const save_prop_queue_1 = require("./save-prop-queue");
 const serializeSequencePropValue = (value) => {
@@ -22,7 +22,7 @@ const saveInlineCaptionPatches = ({ fileName, nodePath, schema, patches, nextCap
             defaultValue: null,
             schema,
         }),
-        apiCall: () => (0, call_api_1.callApi)('/api/save-sequence-props', {
+        apiCall: () => (0, sequence_props_api_1.saveSequenceProps)({
             edits: [],
             captionPatches: [{ fileName, nodePath, schema, patches }],
             addedKeyframes: null,
@@ -65,7 +65,7 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
             }),
             apiCall: () => {
                 var _a;
-                return (0, call_api_1.callApi)('/api/save-sequence-props', {
+                return (0, sequence_props_api_1.saveSequenceProps)({
                     edits: [
                         {
                             fileName: change.fileName,
@@ -110,7 +110,7 @@ const saveSequenceProps = ({ changes, addedKeyframes, movedKeyframes, setPropSta
             schema: change.schema,
         }));
     }
-    return (0, call_api_1.callApi)('/api/save-sequence-props', {
+    return (0, sequence_props_api_1.saveSequenceProps)({
         edits: changes.map((change) => {
             var _a;
             return {

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,6 +1,6 @@
 import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'remotion';
-import { callApi } from '../call-api';
-type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
+import { subscribeToSequenceProps } from '../sequence-props-api';
+type SubscribeResult = Awaited<ReturnType<typeof subscribeToSequenceProps>>;
 type ApplyResult = (result: SubscribeResult) => void;
 export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
     fileName: string;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
-const call_api_1 = require("../call-api");
+const sequence_props_api_1 = require("../sequence-props-api");
 const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, assetKeys, effectKeys, videoConfigValues, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${assetKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}\0${JSON.stringify(videoConfigValues)}`;
 const entries = new Map();
 const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }) => {
@@ -22,7 +22,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
     });
     let entry = entries.get(key);
     if (!entry) {
-        const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
+        const promise = (0, sequence_props_api_1.subscribeToSequenceProps)({
             fileName,
             line,
             column,
@@ -86,7 +86,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, comp
                 if (!result.success) {
                     return;
                 }
-                return (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {
+                return (0, sequence_props_api_1.unsubscribeFromSequenceProps)({
                     fileName: acquired.fileName,
                     nodePath: result.nodePath,
                     clientId: acquired.clientId,

package/dist/components/Timeline/should-subscribe-to-source-file.d.ts

@@ -0,0 +1 @@
+export declare const shouldSubscribeToSourceFile: (source: string) => boolean;

package/dist/components/Timeline/should-subscribe-to-source-file.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSubscribeToSourceFile = void 0;
+const shouldSubscribeToSourceFile = (source) => {
+    const normalized = source.replaceAll('\\', '/');
+    if (normalized === '..' || normalized.startsWith('../')) {
+        return false;
+    }
+    return !normalized.split('/').includes('node_modules');
+};
+exports.shouldSubscribeToSourceFile = shouldSubscribeToSourceFile;

package/dist/components/Timeline/use-open-sequence-in-editor.d.ts

@@ -1,6 +1,8 @@
+import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
     canOpenInEditor: boolean;
-    openInEditor: () => Promise<void>;
+    editorInfo: import("@remotion/studio-shared").GetDefaultEditorInfoResponse | null;
+    openInEditor: (editorId: EditorPickerId | null) => Promise<void>;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

package/dist/components/Timeline/use-open-sequence-in-editor.js

@@ -5,18 +5,20 @@ const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
 const useOpenSequenceInEditor = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
-    const openInEditor = (0, react_1.useCallback)(async () => {
+    const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!canOpenInEditor || !originalLocation) {
             return;
         }
         try {
-            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation);
+            await (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
@@ -24,6 +26,7 @@ const useOpenSequenceInEditor = (sequence) => {
     }, [canOpenInEditor, originalLocation]);
     return {
         canOpenInEditor,
+        editorInfo,
         openInEditor,
         originalLocation,
     };

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -7,6 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
+const should_subscribe_to_source_file_1 = require("./should-subscribe-to-source-file");
 const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -40,6 +41,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, componentI
         var _a, _b;
         if (!clientId ||
             !locationSource ||
+            !(0, should_subscribe_to_source_file_1.shouldSubscribeToSourceFile)(locationSource) ||
             !locationLine ||
             locationColumn === null ||
             !schema ||

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -11,7 +11,6 @@ const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
-const use_element_overwrite_confirmation_1 = require("../use-element-overwrite-confirmation");
 const timeline_refs_1 = require("./timeline-refs");
 const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
 const use_resolved_stack_1 = require("./use-resolved-stack");
@@ -31,7 +30,6 @@ const useTimelineAssetDrop = () => {
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
-    const confirmElementOverwrite = (0, use_element_overwrite_confirmation_1.useElementOverwriteConfirmation)();
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
     const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
@@ -122,7 +120,6 @@ const useTimelineAssetDrop = () => {
             await (0, handle_drop_1.handleDrop)({
                 chooseSvgImportMode,
                 compositionFile,
-                confirmElementOverwrite,
                 compositionId: currentCompositionId,
                 destinationDimensions: {
                     height: videoConfig.height,
@@ -145,7 +142,6 @@ const useTimelineAssetDrop = () => {
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
-        confirmElementOverwrite,
         currentCompositionId,
         getDropFrame,
         videoConfig,

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -5,6 +5,7 @@ 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 pointer_session_1 = require("../../helpers/pointer-session");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_move_keyframe_1 = require("./call-move-keyframe");
 const find_track_for_node_path_info_1 = require("./find-track-for-node-path-info");
@@ -319,11 +320,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -438,9 +436,19 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,
@@ -519,11 +527,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                 .filter((target) => target !== null);
             return dragTargets;
         };
-        const cleanup = () => {
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-            window.removeEventListener('pointercancel', onPointerCancel);
-        };
+        let stopPointerSession = null;
+        const cleanup = () => stopPointerSession === null || stopPointerSession === void 0 ? void 0 : stopPointerSession();
         const clearActiveOverrides = () => {
             const targets = dragTargets;
             if (targets === null) {
@@ -638,9 +643,19 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             clearActiveOverrides();
             clearDraggedKeyframes();
         };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
-        window.addEventListener('pointercancel', onPointerCancel);
+        stopPointerSession = (0, pointer_session_1.startPointerSession)({
+            event: e,
+            target: e.currentTarget,
+            onMove: onPointerMove,
+            onEnd: (reason) => {
+                if (reason === 'pointerup' || reason === 'buttons-released') {
+                    onPointerUp();
+                }
+                else {
+                    onPointerCancel();
+                }
+            },
+        });
     }, [
         clearDragOverrides,
         clearEffectDragOverrides,

package/dist/components/TopPanel.js

@@ -114,7 +114,7 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, minFlexerSize: null, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, minFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
                                         jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));

package/dist/components/UndoRedoButtons.js

@@ -141,7 +141,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdateCheck.d.ts

@@ -3,6 +3,8 @@ export type UpdateInfo = {
     currentVersion: string;
     latestVersion: string;
     updateAvailable: boolean;
+    skillsUpdateAvailable: boolean;
+    remotionUpgradeSkillAvailable: boolean;
     timedOut: boolean;
     packageManager: PackageManager | 'unknown';
 };

package/dist/components/UpdateCheck.js

@@ -10,7 +10,6 @@ const z_index_1 = require("../state/z-index");
 const actions_1 = require("./RenderQueue/actions");
 const buttonStyle = {
     appearance: 'none',
-    color: colors_1.BLUE,
     border: 'none',
     fontWeight: 'bold',
     backgroundColor: colors_1.TRANSPARENT,
@@ -18,15 +17,17 @@ const buttonStyle = {
     fontSize: 14,
     display: 'inline-flex',
     justifyContent: 'center',
+    marginLeft: 8,
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
-    const hasKnownBugs = (0, react_1.useMemo)(() => {
-        return knownBugs && knownBugs.length > 0;
-    }, [knownBugs]);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const hasBugfixesAvailable = (0, react_1.useMemo)(() => {
+        return Boolean((info === null || info === void 0 ? void 0 : info.updateAvailable) && knownBugs && knownBugs.length > 0);
+    }, [info === null || info === void 0 ? void 0 : info.updateAvailable, knownBugs]);
     const checkForUpdates = (0, react_1.useCallback)(() => {
         const controller = new AbortController();
         (0, actions_1.updateAvailable)(controller.signal)
@@ -78,18 +79,29 @@ const UpdateCheck = () => {
     const dynButtonStyle = (0, react_1.useMemo)(() => {
         return {
             ...buttonStyle,
-            color: hasKnownBugs ? colors_1.WARNING_COLOR : colors_1.LIGHT_TEXT,
+            color: hovered
+                ? colors_1.WHITE
+                : hasBugfixesAvailable
+                    ? colors_1.WARNING_COLOR
+                    : colors_1.WHITE_ALPHA_80,
         };
-    }, [hasKnownBugs]);
+    }, [hasBugfixesAvailable, hovered]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
     if (!info) {
         return null;
     }
-    if (!info.updateAvailable) {
+    if (!info.updateAvailable && !info.skillsUpdateAvailable) {
         return null;
     }
-    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, type: "button", title: hasKnownBugs ? 'Bugfixes available' : 'Update available', children: hasKnownBugs ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+    return (jsx_runtime_1.jsx("button", { tabIndex: tabIndex, style: dynButtonStyle, onClick: openModal, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", title: hasBugfixesAvailable ? 'Bugfixes available' : 'Update available', children: hasBugfixesAvailable ? ('Bugfixes available') : (jsx_runtime_1.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                 height: 16,
                 width: 16,
+                color: 'inherit',
             }, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.CURRENT_COLOR_LOWERCASE, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z" }) })) }));
 };
 exports.UpdateCheck = UpdateCheck;

package/dist/components/UpdateModal/UpdateModal.js

@@ -16,7 +16,10 @@ const container = {
     paddingTop: 0,
 };
 const text = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
     fontSize: 14,
+    lineHeight: 1.5,
 };
 const title = {
     paddingTop: 12,
@@ -25,16 +28,19 @@ const title = {
 };
 const code = {
     background: colors_1.SELECTED_BACKGROUND,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'monospace',
     padding: '12px 10px',
     fontSize: 14,
+    lineHeight: 1.5,
     marginTop: 10,
     marginBottom: 10,
 };
 const link = {
+    ...text,
     fontWeight: 'bold',
     color: colors_1.BLUE,
     textDecoration: 'none',
-    ...text,
 };
 const commands = {
     npm: 'npx remotion upgrade',
@@ -43,23 +49,33 @@ const commands = {
     bun: 'bun remotion upgrade',
     unknown: 'npx remotion upgrade',
 };
+const skillsUpdateCommand = 'npx remotion skills update';
+const remotionUpgradeSkill = '/remotion-upgrade';
 const UpdateModal = ({ info, knownBugs }) => {
     const hasKnownBugs = (0, react_1.useMemo)(() => {
         return knownBugs && (knownBugs === null || knownBugs === void 0 ? void 0 : knownBugs.length) > 0;
     }, [knownBugs]);
-    const command = commands[info.packageManager];
+    const updateAction = info.remotionUpgradeSkillAvailable
+        ? remotionUpgradeSkill
+        : info.updateAvailable
+            ? commands[info.packageManager]
+            : skillsUpdateCommand;
+    const updateActionType = info.remotionUpgradeSkillAvailable
+        ? 'skill'
+        : 'command';
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyText)(command).catch((err) => {
+        (0, copy_text_1.copyText)(updateAction).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [command]);
+    }, [updateAction]);
     return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
-            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsx("div", { style: text, children: "To upgrade, run the following command:" })
-                        ] })) : (jsx_runtime_1.jsx("div", { style: title, children: "A new update for Remotion is available! Run the following command:" })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: command }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: command, label: "Copy", labelWhenCopied: "Copied!" })
-                        ] }), jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, "."] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })
-                ] })
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: "Update available" }), jsx_runtime_1.jsxs("div", { style: container, children: [hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version ", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["To upgrade, run the following ", updateActionType, ":"] })
+                        ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: title, children: ["A new update for Remotion is available! Run the following", ' ', updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: title, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                            jsx_runtime_1.jsx(layout_1.Flex, { children: jsx_runtime_1.jsx("pre", { onClick: onClick, style: code, children: updateAction }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(CopyButton_1.CopyButton, { textToCopy: updateAction, label: "Copy", labelWhenCopied: "Copied!" })
+                        ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["This will upgrade Remotion from ", info.currentVersion, " to", ' ', info.latestVersion, info.skillsUpdateAvailable
+                                ? ' and update your project Remotion Agent Skills.'
+                                : '.'] })) : null, info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Read the", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "Release notes" }), ' ', "to know what", "'s", " new in Remotion."] })) : null] })
         ] }));
 };
 exports.UpdateModal = UpdateModal;

package/dist/components/VisualControls/ClickableFileName.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 open_in_editor_1 = require("../../helpers/open-in-editor");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
 const container = {
@@ -28,11 +29,13 @@ const ClickableFileName = ({ originalFileName, }) => {
             color: hoverEffect ? colors_1.WHITE_HEX : colors_1.LIGHT_COLOR,
         };
     }, [originalFileName, hoverEffect]);
-    const onClick = (0, react_1.useCallback)(async () => {
+    const onClick = (0, react_1.useCallback)(() => {
         if (originalFileName.type !== 'loaded') {
             return;
         }
-        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName);
+        (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName, null).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        });
     }, [originalFileName]);
     return (jsx_runtime_1.jsx("div", { style: container, children: jsx_runtime_1.jsx("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
                 ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)

package/dist/components/composition-menu-items.js

@@ -28,7 +28,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                         return;
                     }
                     try {
-                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation);
+                        await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
                     }
                     catch (err) {
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);

package/dist/components/default-props-api.d.ts

@@ -0,0 +1,3 @@
+import type { SubscribeToDefaultPropsRequest, UnsubscribeFromDefaultPropsRequest } from '@remotion/studio-shared';
+export declare const subscribeToDefaultProps: (request: SubscribeToDefaultPropsRequest) => Promise<import("@remotion/studio-shared").CanUpdateDefaultPropsResponse>;
+export declare const unsubscribeFromDefaultProps: (request: UnsubscribeFromDefaultPropsRequest) => Promise<undefined>;

package/dist/components/default-props-api.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromDefaultProps = exports.subscribeToDefaultProps = void 0;
+const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
+const call_api_1 = require("./call-api");
+const subscribeToDefaultProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.subscribeToDefaultProps(request)
+        : (0, call_api_1.callApi)('/api/subscribe-to-default-props', request);
+};
+exports.subscribeToDefaultProps = subscribeToDefaultProps;
+const unsubscribeFromDefaultProps = (request) => {
+    const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+    return browserStudioOperations
+        ? browserStudioOperations.unsubscribeFromDefaultProps(request)
+        : (0, call_api_1.callApi)('/api/unsubscribe-from-default-props', request);
+};
+exports.unsubscribeFromDefaultProps = unsubscribeFromDefaultProps;

package/dist/components/drop-handler-data.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentDragData, type CompositionDragData } from '@remotion/drag-and-drop';
+import { type ComponentDragData, type CompositionDragData } from '@remotion/studio-protocol';
 export declare const isFileDragEvent: (event: DragEvent) => boolean;
 export declare const isAssetDragEvent: (event: DragEvent) => boolean;
 export declare const isComponentDragEvent: (event: DragEvent) => boolean;