@remotion/studio 4.0.524 → 4.0.526

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

@@ -1,11 +1,13 @@
 import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
 export declare const useOpenSequenceInApps: (sequence: TSequence) => {
+    canOpenSource: boolean;
     canOpenInEditor: boolean;
     canConfigureApps: boolean;
     codingAgentInfo: import("@remotion/studio-shared").GetDefaultCodingAgentInfoResponse | null;
     editorInfo: import("@remotion/studio-shared").GetDefaultEditorInfoResponse | null;
     openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string, contextForAgents: string | null) => Promise<void>;
     openInEditor: (editorId: EditorPickerId | null) => Promise<void>;
+    openSource: () => void;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenSequenceInApps = void 0;
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const get_git_menu_item_1 = require("../../helpers/get-git-menu-item");
 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");
@@ -16,6 +17,8 @@ const useOpenSequenceInApps = (sequence) => {
     const { canConfigureApps, canOpenInEditor: editorAvailable, defaultEditorId, editorInfo, } = (0, use_default_editor_info_1.useEditorOpening)(previewConnected);
     const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(canConfigureApps);
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(editorAvailable && originalLocation), [editorAvailable, originalLocation]);
+    const defaultOpenInTarget = (0, get_git_menu_item_1.getDefaultOpenInTarget)({ canOpenInEditor });
+    const canOpenSource = defaultOpenInTarget !== null && originalLocation !== null;
     const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         const resolvedEditorId = editorId !== null && editorId !== void 0 ? editorId : defaultEditorId;
         if (!canOpenInEditor || !originalLocation || !resolvedEditorId) {
@@ -28,6 +31,18 @@ const useOpenSequenceInApps = (sequence) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [canOpenInEditor, defaultEditorId, originalLocation]);
+    const openSource = (0, react_1.useCallback)(() => {
+        if (!originalLocation) {
+            return;
+        }
+        if (defaultOpenInTarget === 'editor') {
+            openInEditor(null);
+            return;
+        }
+        if (defaultOpenInTarget === 'git-source') {
+            (0, get_git_menu_item_1.openGitSource)({ folder: false, location: originalLocation });
+        }
+    }, [defaultOpenInTarget, openInEditor, originalLocation]);
     const openInCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName, contextForAgents) => {
         try {
             const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents);
@@ -40,12 +55,14 @@ const useOpenSequenceInApps = (sequence) => {
         }
     }, []);
     return {
+        canOpenSource,
         canOpenInEditor,
         canConfigureApps,
         codingAgentInfo,
         editorInfo,
         openInCodingAgent,
         openInEditor,
+        openSource,
         originalLocation,
     };
 };

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

@@ -10,6 +10,7 @@ const modals_1 = require("../../state/modals");
 const canvas_capture_drop_1 = require("../canvas-capture-drop");
 const drop_handler_data_1 = require("../drop-handler-data");
 const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
+const element_drag_and_drop_1 = require("../element-drag-and-drop");
 const handle_drop_1 = require("../handle-drop");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const SvgImportDialog_1 = require("../SvgImportDialog");
@@ -41,13 +42,13 @@ const useTimelineAssetDrop = () => {
         compositionId: currentCompositionId,
     });
     const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
-    const canInsertAsset = previewInteractive &&
+    const canReceiveElementDrop = previewInteractive &&
         !window.remotion_isReadOnlyStudio &&
-        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
         currentCompositionId !== null &&
         compositionFile !== null &&
         videoConfig !== null &&
         !isAddingAsset;
+    const canInsertAsset = canReceiveElementDrop && (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true;
     const getDropFrame = (0, react_1.useCallback)((event) => {
         if (videoConfig === null) {
             return null;
@@ -74,15 +75,24 @@ const useTimelineAssetDrop = () => {
             setAssetDropFrame(null);
             return;
         }
+        const canDropElementIntoNewComposition = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            canReceiveElementDrop &&
+            (0, element_drag_and_drop_1.hasElementDragType)(dataTransfer);
         event.preventDefault();
         event.stopPropagation();
-        dataTransfer.dropEffect = canInsertAsset ? 'copy' : 'none';
+        dataTransfer.dropEffect =
+            canInsertAsset || canDropElementIntoNewComposition ? 'copy' : 'none';
         const scrollable = timeline_refs_1.scrollableRef.current;
         const shouldShowDropFrame = canInsertAsset &&
             scrollable !== null &&
             isEventTargetInsideElement(event, scrollable);
         setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
-    }, [canInsertAsset, getDropFrame]);
+    }, [
+        canInsertAsset,
+        canReceiveElementDrop,
+        compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
+        getDropFrame,
+    ]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
         setAssetDropFrame(null);
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
@@ -118,12 +128,15 @@ const useTimelineAssetDrop = () => {
         }
         event.preventDefault();
         event.stopPropagation();
-        if (!canInsertAsset ||
+        const canDropElementIntoNewComposition = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
+            canReceiveElementDrop &&
+            (0, element_drag_and_drop_1.getElementDragData)(dataTransfer) !== null;
+        if ((!canInsertAsset && !canDropElementIntoNewComposition) ||
             currentCompositionId === null ||
             compositionFile === null ||
             videoConfig === null) {
             if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
-                (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+                (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             }
             return;
         }
@@ -157,6 +170,7 @@ const useTimelineAssetDrop = () => {
         }
     }, [
         canInsertAsset,
+        canReceiveElementDrop,
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,

package/dist/components/Timeline/use-timeline-expanded-tree.d.ts

@@ -1,8 +1,9 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, }: {
+export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, selectedItems, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly import("@remotion/canvas").CanvasSelectionItem[];
 }) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;

package/dist/components/Timeline/use-timeline-expanded-tree.js

@@ -9,10 +9,9 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
-const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, }) => {
+const useTimelineSequenceHasExpandableContent = ({ sequence, nodePathInfo, selectedItems, }) => {
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const selectHasExpandableContent = (0, react_1.useCallback)((runtimeValues) => {
         const tree = (0, timeline_layout_1.buildTimelineTree)({

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

@@ -450,8 +450,8 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {
@@ -657,8 +657,8 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
             event: e,
             captureTarget: e.currentTarget,
             onMove: onPointerMove,
-            onEnd: (reason) => {
-                if (reason === 'pointerup' || reason === 'buttons-released') {
+            onEnd: (reason, endEvent) => {
+                if ((0, pointer_session_1.isPointerSessionRelease)(reason, endEvent)) {
                     onPointerUp();
                 }
                 else {

package/dist/components/TimelineCombobox.js

@@ -41,6 +41,7 @@ const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth
             selectedId,
             style: { fontFamily: 'inherit', padding: '0 4px' },
             title: tooltipDelay === null ? title : null,
+            tooltipLabel: null,
             type: 'menu',
             values,
         },

package/dist/components/UndoRedoButtons.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const url_state_1 = require("../helpers/url-state");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_keyboard_shortcut_label_1 = require("../helpers/use-keyboard-shortcut-label");
 const redo_1 = require("../icons/redo");
@@ -43,6 +44,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.undo()
             : (0, call_api_1.callApi)('/api/undo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })
@@ -60,6 +66,11 @@ const UndoRedoButtons = () => {
             ? browserStudioOperations.redo()
             : (0, call_api_1.callApi)('/api/redo', {});
         promise
+            .then((response) => {
+            if (response.success && response.route !== null) {
+                (0, url_state_1.pushUrl)(response.route);
+            }
+        })
             .catch(() => {
             // Ignore errors
         })

package/dist/components/UpdateStatusContext.d.ts

@@ -6,12 +6,12 @@ export type Bug = {
     link: string;
     versions: string[];
 };
-type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'shutting-down' | 'shutdown';
+type UpgradeState = 'idle' | 'upgrading' | 'upgraded' | 'restarting';
 type UpdateStatusContextValue = {
     readonly upgradeState: UpgradeState;
     readonly upgradeError: string | null;
     readonly upgrade: (version: string) => Promise<void>;
-    readonly shutdown: () => Promise<void>;
+    readonly restart: () => Promise<void>;
     readonly error: string | null;
     readonly info: UpdateAvailableResponse | null;
     readonly knownBugs: Bug[] | null;

package/dist/components/UpdateStatusContext.js

@@ -4,7 +4,7 @@ exports.useUpdateStatus = exports.UpdateStatusProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const shut_down_studio_1 = require("../api/shut-down-studio");
+const restart_studio_1 = require("../api/restart-studio");
 const browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const can_show_updates_1 = require("../helpers/can-show-updates");
 const client_id_1 = require("../helpers/client-id");
@@ -35,16 +35,15 @@ const UpdateStatusProvider = ({ children }) => {
             busy.current = false;
         }
     }, []);
-    const shutdown = (0, react_1.useCallback)(async () => {
+    const restart = (0, react_1.useCallback)(async () => {
         if (busy.current) {
             return;
         }
         busy.current = true;
-        setUpgradeState('shutting-down');
+        setUpgradeState('restarting');
         setUpgradeError(null);
         try {
-            await (0, shut_down_studio_1.shutDownStudio)();
-            setUpgradeState('shutdown');
+            await (0, restart_studio_1.restartStudio)();
         }
         catch (err) {
             setUpgradeError(err.message);
@@ -109,9 +108,9 @@ const UpdateStatusProvider = ({ children }) => {
             upgradeState,
             upgradeError,
             upgrade,
-            shutdown,
+            restart,
         };
-    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown]);
+    }, [error, info, knownBugs, upgradeState, upgradeError, upgrade, restart]);
     return (jsx_runtime_1.jsx(UpdateStatusContext.Provider, { value: value, children: children }));
 };
 exports.UpdateStatusProvider = UpdateStatusProvider;

package/dist/components/UpdatesSettings.js

@@ -173,7 +173,7 @@ const RenderedReleaseNotes = ({ release }) => {
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
-    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, shutdown, } = (0, UpdateStatusContext_1.useUpdateStatus)();
+    const { error, info, knownBugs, upgradeState, upgradeError, upgrade, restart } = (0, UpdateStatusContext_1.useUpdateStatus)();
     const [releaseNotes, setReleaseNotes] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (!(info === null || info === void 0 ? void 0 : info.updateAvailable)) {
@@ -239,11 +239,11 @@ const UpdatesSettings = () => {
                         ? 'Upgrading Remotion...'
                         : 'Remotion has been upgraded.' }), jsx_runtime_1.jsx("div", { style: text, children: upgradeState === 'upgrading'
                         ? 'This may take a few minutes. You can follow the progress in your terminal.'
-                        : upgradeState === 'shutdown'
-                            ? 'Studio is shutting down. Run your Studio start command again in the terminal to use the new version.'
-                            : 'Restart Studio to use the new version. Shut down the server below, then run your Studio start command again in the terminal.' }), upgradeState === 'upgraded' || upgradeState === 'shutting-down' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: shutdown, disabled: upgradeState === 'shutting-down', children: upgradeState === 'shutting-down'
-                            ? 'Shutting down...'
-                            : 'Shut down Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
+                        : upgradeState === 'restarting'
+                            ? 'Studio is restarting with the new version.'
+                            : 'Restart Studio to use the new version.' }), upgradeState === 'upgraded' || upgradeState === 'restarting' ? (jsx_runtime_1.jsx("div", { style: { marginTop: 12 }, children: jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: restart, disabled: upgradeState === 'restarting', children: upgradeState === 'restarting'
+                            ? 'Restarting...'
+                            : 'Restart Studio' }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null] }));
     }
     if (info === null) {
         return (jsx_runtime_1.jsx("div", { style: container, children: error ? (jsx_runtime_1.jsx("div", { style: { paddingTop: 12 }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: 'Could not check for updates: ' + error, align: "flex-start", type: "error" }) })) : (jsx_runtime_1.jsx("div", { style: title, children: "Checking for updates..." })) }));

package/dist/components/WebMcp.js

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebMcp = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -128,20 +129,10 @@ const resolveAssetPath = ({ assetPath, currentContent, staticFiles, }) => {
     }
     return resolvedAssetPath;
 };
-const WebMcp = () => {
+const WebMcpSelectionSync = ({ currentSelectionRef, selectedSequenceRef }) => {
     var _a;
-    var _b, _c, _d, _e, _f;
-    const { addCaptionJob, addVideoMattingJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
-    const staticFiles = (0, use_static_files_1.useStaticFiles)();
-    const { canSelect, clearSelection, selectedItems, selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
-    const { canvasContent, compositions, currentCompositionMetadata, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const { playbackRate: currentPlaybackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
-    const { isPlaying } = remotion_1.Internals.Timeline.useTimelineContext();
-    const { mediaVolume, playerMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
-    const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
-    const { setZoom: setTimelineZoom, zoom: timelineZoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const { editorShowGuides, guidesList, setEditorShowGuides, setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    var _b, _c, _d, _e;
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const selectedItem = selectedItems.length === 1 ? selectedItems[0] : null;
@@ -161,16 +152,10 @@ const WebMcp = () => {
     const currentResolvedLocation = stack === currentStack ? resolvedLocation : null;
     const currentSelection = (0, react_1.useMemo)(() => {
         var _a;
-        if (selectedItems.length === 0) {
-            return null;
-        }
-        if (selectedItems.length > 1) {
-            return null;
-        }
-        if (selectedItem === null || selectedItem.type === 'guide') {
-            return null;
-        }
-        if (track === null) {
+        if (selectedItems.length !== 1 ||
+            selectedItem === null ||
+            selectedItem.type === 'guide' ||
+            track === null) {
             return null;
         }
         let name;
@@ -209,15 +194,28 @@ const WebMcp = () => {
             root: window.remotion_cwd,
         });
     }, [currentResolvedLocation, selectedItem, selectedItems.length, track]);
-    const currentSelectionRef = (0, react_1.useRef)(currentSelection);
     currentSelectionRef.current = currentSelection;
-    const selectedSequence = (0, react_1.useMemo)(() => (track === null ? null : serializeSequence(track)), [track]);
-    const selectedSequenceRef = (0, react_1.useRef)(selectedSequence);
-    selectedSequenceRef.current = selectedSequence;
-    const selectedItemsRef = (0, react_1.useRef)(selectedItems);
-    selectedItemsRef.current = selectedItems;
-    const canSelectRef = (0, react_1.useRef)(canSelect);
-    canSelectRef.current = canSelect;
+    selectedSequenceRef.current =
+        track === null ? null : serializeSequence(track);
+    return null;
+};
+const WebMcp = () => {
+    var _a;
+    const { addCaptionJob, addVideoMattingJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    const timelineSelectionRef = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const currentSelectionRef = (0, react_1.useRef)(null);
+    const selectedSequenceRef = (0, react_1.useRef)(null);
+    const { canvasContent, compositions, currentCompositionMetadata, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { playbackRate: currentPlaybackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
+    const { isPlaying } = remotion_1.Internals.Timeline.useTimelineContext();
+    const { mediaVolume, playerMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
+    const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
+    const { setZoom: setTimelineZoom, zoom: timelineZoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
+    const { editorShowGuides, guidesList, setEditorShowGuides, setGuidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const currentCompositionDefinition = (0, react_1.useMemo)(() => {
         var _a;
         if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
@@ -241,7 +239,7 @@ const WebMcp = () => {
     currentContentRef.current = currentContent;
     const staticFilesRef = (0, react_1.useRef)(staticFiles);
     staticFilesRef.current = staticFiles;
-    const currentComposition = (_f = currentCompositionDefinition === null || currentCompositionDefinition === void 0 ? void 0 : currentCompositionDefinition.id) !== null && _f !== void 0 ? _f : null;
+    const currentComposition = (_a = currentCompositionDefinition === null || currentCompositionDefinition === void 0 ? void 0 : currentCompositionDefinition.id) !== null && _a !== void 0 ? _a : null;
     const currentCompositionRef = (0, react_1.useRef)(currentComposition);
     currentCompositionRef.current = currentComposition;
     const currentCompositionDefinitionRef = (0, react_1.useRef)(currentCompositionDefinition);
@@ -766,7 +764,7 @@ const WebMcp = () => {
                     if (compositionId === null) {
                         throw new Error('No composition is currently selected.');
                     }
-                    if (!canSelectRef.current) {
+                    if (!timelineSelectionRef.current.canSelect) {
                         throw new Error('Studio sequence selection is unavailable.');
                     }
                     const timelineTrack = getCurrentTimeline().find((candidate) => candidate.sequence.id === sequenceId);
@@ -777,7 +775,9 @@ const WebMcp = () => {
                     if (selection === null) {
                         throw new Error(`Sequence ${sequenceId} cannot be selected.`);
                     }
-                    selectItems([selection], { reveal: true });
+                    timelineSelectionRef.current.selectItems([selection], {
+                        reveal: true,
+                    });
                     return Promise.resolve({
                         currentContent: currentContentRef.current,
                         selectedSequence: serializeSequence(timelineTrack),
@@ -1025,8 +1025,8 @@ const WebMcp = () => {
                     currentFrame: (0, imperative_state_1.getCurrentFrame)(),
                     currentSelection: currentSelectionRef.current,
                     currentContent: currentContentRef.current,
-                    selectionType: selectedItemsRef.current.length === 1
-                        ? selectedItemsRef.current[0].type
+                    selectionType: timelineSelectionRef.current.selectedItems.length === 1
+                        ? timelineSelectionRef.current.selectedItems[0].type
                         : null,
                     selectedSequence: selectedSequenceRef.current,
                 }),
@@ -1181,9 +1181,9 @@ const WebMcp = () => {
                     guidesListRef.current = nextGuides;
                     setGuidesList(() => nextGuides);
                     (0, editor_guides_1.persistGuidesList)(nextGuides);
-                    const removedGuideWasSelected = selectedItemsRef.current.some((item) => item.type === 'guide' && item.guideId === guideId);
+                    const removedGuideWasSelected = timelineSelectionRef.current.selectedItems.some((item) => item.type === 'guide' && item.guideId === guideId);
                     if (removedGuideWasSelected) {
-                        clearSelection();
+                        timelineSelectionRef.current.clearSelection();
                     }
                     return Promise.resolve({
                         currentContent: currentContentRef.current,
@@ -1426,16 +1426,15 @@ const WebMcp = () => {
     }, [
         addCaptionJob,
         addVideoMattingJob,
-        clearSelection,
         isPlaying,
         selectComposition,
-        selectItems,
         setEditorShowGuides,
         setGuidesList,
         setPlaybackRate,
         setPlayerMuted,
         setTimelineZoom,
+        timelineSelectionRef,
     ]);
-    return null;
+    return (jsx_runtime_1.jsx(WebMcpSelectionSync, { currentSelectionRef: currentSelectionRef, selectedSequenceRef: selectedSequenceRef }));
 };
 exports.WebMcp = WebMcp;

package/dist/components/asset-context-menu.d.ts

@@ -0,0 +1,32 @@
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getAssetActionAvailability: ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }: {
+    browserStudioCanMutateAssets: boolean | null;
+    readOnlyStudio: boolean;
+    connectionStatus: "connected" | "disconnected" | "init";
+    publicFolderExists: string | null;
+}) => {
+    mutationsDisabled: boolean;
+    fileExplorerDisabled: boolean;
+};
+export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+    relativePath: string;
+    fileManagerName: string;
+    copyFileName: () => void;
+    copyStaticFilePath: () => void;
+    copyAbsolutePath: (() => void) | null;
+    openAssetInConvert: () => void;
+    openAssetInExplorer: () => void;
+    renameAsset: () => void;
+    deleteAsset: () => void;
+    fileExplorerAvailable: boolean;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
+export declare const useAssetContextMenuItems: ({ relativePath, readOnlyStudio, }: {
+    relativePath: string | null;
+    readOnlyStudio: boolean;
+}) => {
+    fileExplorerDisabled: boolean;
+    fileManagerName: string;
+    getContextMenuItems: () => ComboboxValue[];
+};