@remotion/studio 4.0.525 → 4.0.526

package/dist/components/Timeline/normalize-font-weight-for-keyframe.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeFontWeightForKeyframe = void 0;
+const normalizeFontWeightForKeyframe = (value) => {
+    if (value === 'normal') {
+        return 400;
+    }
+    if (value === 'bold') {
+        return 700;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value === 'string' && /^\d+(?:\.\d+)?$/.test(value)) {
+        return Number(value);
+    }
+    return null;
+};
+exports.normalizeFontWeightForKeyframe = normalizeFontWeightForKeyframe;

package/dist/components/Timeline/timeline-display-groups.d.ts

@@ -0,0 +1,9 @@
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export type TimelineDisplayGroup = {
+    readonly key: string;
+    readonly numberOfSequences: number;
+};
+export type TimelineTrackWithDisplayGroup = TimelineTrackData & {
+    readonly displayGroup: TimelineDisplayGroup | null;
+};
+export declare const addTimelineDisplayGroups: (tracks: readonly TimelineTrackData[]) => TimelineTrackWithDisplayGroup[];

package/dist/components/Timeline/timeline-display-groups.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTimelineDisplayGroups = void 0;
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const addTimelineDisplayGroups = (tracks) => {
+    var _a, _b;
+    const stacksBySequenceId = new Map();
+    const resolvedNodePathKeysByStack = new Map();
+    for (const track of tracks) {
+        // Only controlled sequences can eventually resolve to a source node.
+        const stack = track.sequence.controls === null ? null : track.sequence.getStack();
+        stacksBySequenceId.set(track.sequence.id, stack);
+        if (stack === null || track.nodePathInfo === null) {
+            continue;
+        }
+        const nodePathKey = `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        const nodePathKeys = (_a = resolvedNodePathKeysByStack.get(stack)) !== null && _a !== void 0 ? _a : new Set();
+        nodePathKeys.add(nodePathKey);
+        resolvedNodePathKeysByStack.set(stack, nodePathKeys);
+    }
+    const displayKeys = tracks.map((track) => {
+        var _a;
+        if (track.nodePathInfo !== null) {
+            return `node-path:${(0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey)}`;
+        }
+        const stack = (_a = stacksBySequenceId.get(track.sequence.id)) !== null && _a !== void 0 ? _a : null;
+        if (stack === null) {
+            return null;
+        }
+        const resolvedNodePathKeys = resolvedNodePathKeysByStack.get(stack);
+        if ((resolvedNodePathKeys === null || resolvedNodePathKeys === void 0 ? void 0 : resolvedNodePathKeys.size) === 1) {
+            const resolvedNodePathKey = resolvedNodePathKeys.values().next().value;
+            if (resolvedNodePathKey === undefined) {
+                throw new Error('Expected a resolved timeline node path key');
+            }
+            return resolvedNodePathKey;
+        }
+        // This identity is display-only. Source operations continue to require
+        // track.nodePathInfo.
+        return `stack:${stack}`;
+    });
+    const counts = new Map();
+    for (const key of displayKeys) {
+        if (key !== null) {
+            counts.set(key, ((_b = counts.get(key)) !== null && _b !== void 0 ? _b : 0) + 1);
+        }
+    }
+    return tracks.map((track, index) => {
+        const key = displayKeys[index];
+        if (key === null) {
+            return { ...track, displayGroup: null };
+        }
+        const numberOfSequences = counts.get(key);
+        if (numberOfSequences === undefined) {
+            throw new Error('Expected a timeline display group count');
+        }
+        return {
+            ...track,
+            displayGroup: {
+                key,
+                numberOfSequences,
+            },
+        };
+    });
+};
+exports.addTimelineDisplayGroups = addTimelineDisplayGroups;

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");
@@ -29,7 +30,6 @@ const useTimelineAssetDrop = () => {
     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);
-    const unsupportedDropNotifiedRef = (0, react_1.useRef)(false);
     const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const currentComposition = (0, react_1.useMemo)(() => {
         var _a;
@@ -42,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;
@@ -72,30 +72,28 @@ const useTimelineAssetDrop = () => {
             dataTransfer === null ||
             !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
             !isEventTargetInsideElement(event, timeline)) {
-            unsupportedDropNotifiedRef.current = false;
             setAssetDropFrame(null);
             return;
         }
-        const mayBeCanvasCapture = (0, drop_handler_data_1.isFileDragEvent)(event) && !window.remotion_isReadOnlyStudio;
-        const shouldNotifyAboutUnsupportedDrop = (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false &&
-            !mayBeCanvasCapture;
-        if (shouldNotifyAboutUnsupportedDrop &&
-            !unsupportedDropNotifiedRef.current) {
-            (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
-        }
-        unsupportedDropNotifiedRef.current = shouldNotifyAboutUnsupportedDrop;
+        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, compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence, getDropFrame]);
+    }, [
+        canInsertAsset,
+        canReceiveElementDrop,
+        compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
+        getDropFrame,
+    ]);
     const onAssetDrop = (0, react_1.useCallback)(async (event) => {
-        const unsupportedDropWasNotified = unsupportedDropNotifiedRef.current;
-        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
         const timeline = timeline_refs_1.timelineVerticalScroll.current;
         const { dataTransfer } = event;
@@ -130,13 +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 &&
-                !unsupportedDropWasNotified) {
-                (0, NotificationCenter_1.showCannotAddSequenceDropNotification)();
+            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
+                (0, NotificationCenter_1.showNotification)('Cannot insert this item: This composition component cannot accept a new <Sequence>.', 3000);
             }
             return;
         }
@@ -170,6 +170,7 @@ const useTimelineAssetDrop = () => {
         }
     }, [
         canInsertAsset,
+        canReceiveElementDrop,
         chooseSvgImportMode,
         compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
         compositionFile,
@@ -179,7 +180,6 @@ const useTimelineAssetDrop = () => {
         videoConfig,
     ]);
     const clearAssetDropFrame = (0, react_1.useCallback)(() => {
-        unsupportedDropNotifiedRef.current = false;
         setAssetDropFrame(null);
     }, []);
     (0, react_1.useEffect)(() => {

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/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[];
+};