@remotion/studio 4.0.516 → 4.0.518

package/dist/components/WebMcp.js

@@ -0,0 +1,945 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebMcp = void 0;
+const canvas_1 = require("@remotion/canvas");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const pause_1 = require("../api/pause");
+const play_1 = require("../api/play");
+const seek_1 = require("../api/seek");
+const calculate_timeline_1 = require("../helpers/calculate-timeline");
+const create_folder_tree_1 = require("../helpers/create-folder-tree");
+const format_file_location_1 = require("../helpers/format-file-location");
+const get_timeline_max_zoom_1 = require("../helpers/get-timeline-max-zoom");
+const editor_guides_1 = require("../state/editor-guides");
+const loop_1 = require("../state/loop");
+const mute_1 = require("../state/mute");
+const playbackrate_1 = require("../state/playbackrate");
+const timeline_zoom_1 = require("../state/timeline-zoom");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
+const find_track_for_node_path_info_1 = require("./Timeline/find-track-for-node-path-info");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const parse_keyframe_field_from_node_path_1 = require("./Timeline/parse-keyframe-field-from-node-path");
+const should_show_track_in_timeline_1 = require("./Timeline/should-show-track-in-timeline");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
+const use_resolved_stack_react_to_change_1 = require("./Timeline/use-resolved-stack-react-to-change");
+const serializeSequence = (track) => {
+    var _a;
+    return {
+        sequenceId: track.sequence.id,
+        name: track.sequence.displayName ||
+            ((_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) ||
+            null,
+        type: track.sequence.type,
+        parentSequenceId: track.sequence.parent,
+        depth: track.depth,
+        startFrame: track.sequence.from,
+        endFrame: track.sequence.from + track.sequence.duration - 1,
+        durationInFrames: track.sequence.duration,
+        stack: track.sequence.getStack(),
+        selectable: track.nodePathInfo !== null,
+    };
+};
+const serializeCompositionTree = (items) => {
+    return items.map((item) => {
+        if (item.type === 'composition') {
+            return {
+                type: 'composition',
+                compositionName: item.composition.id,
+            };
+        }
+        return {
+            type: 'folder',
+            folderName: item.folderName,
+            children: serializeCompositionTree(item.items),
+        };
+    });
+};
+const getNoStack = () => null;
+const MAX_CANVAS_HTML_LENGTH = 100000;
+const WebMcp = () => {
+    var _a;
+    var _b, _c, _d, _e, _f;
+    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 [, , imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    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 selectedItem = selectedItems.length === 1 ? selectedItems[0] : null;
+    const track = (0, react_1.useMemo)(() => {
+        var _a;
+        if (selectedItem === null || selectedItem.type === 'guide') {
+            return null;
+        }
+        return ((_a = (0, find_track_for_node_path_info_1.findTrackForNodePathInfo)({
+            sequences,
+            overrideIdsToNodePaths: overrideIdToNodePathMappings,
+            nodePathInfo: selectedItem.nodePathInfo,
+        })) !== null && _a !== void 0 ? _a : null);
+    }, [overrideIdToNodePathMappings, selectedItem, sequences]);
+    const { resolvedLocation, stack } = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)((_b = track === null || track === void 0 ? void 0 : track.sequence.getStack) !== null && _b !== void 0 ? _b : getNoStack, (_d = (_c = (_a = track === null || track === void 0 ? void 0 : track.sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _c !== void 0 ? _c : track === null || track === void 0 ? void 0 : track.sequence.id) !== null && _d !== void 0 ? _d : 'no-selection');
+    const currentStack = (_e = track === null || track === void 0 ? void 0 : track.sequence.getStack()) !== null && _e !== void 0 ? _e : null;
+    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) {
+            return null;
+        }
+        let name;
+        if (selectedItem.type === 'sequence') {
+            name =
+                track.sequence.displayName ||
+                    ((_a = track.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) ||
+                    null;
+        }
+        else if (selectedItem.type === 'sequence-prop') {
+            name = `Property "${selectedItem.key}"`;
+        }
+        else if (selectedItem.type === 'sequence-all-effects') {
+            name = 'Effects';
+        }
+        else if (selectedItem.type === 'sequence-effect') {
+            const { effects } = track.sequence;
+            const effect = effects[selectedItem.i];
+            name = effect ? `Effect "${effect.label}"` : null;
+        }
+        else if (selectedItem.type === 'sequence-effect-prop') {
+            name = `Effect property "${selectedItem.key}"`;
+        }
+        else {
+            const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+            name =
+                (field === null || field === void 0 ? void 0 : field.type) === 'sequence'
+                    ? `Property "${field.fieldKey}"`
+                    : (field === null || field === void 0 ? void 0 : field.type) === 'effect'
+                        ? `Effect property "${field.fieldKey}"`
+                        : null;
+        }
+        return (0, format_file_location_1.formatContextForAgents)({
+            location: currentResolvedLocation,
+            name,
+            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;
+    const currentCompositionDefinition = (0, react_1.useMemo)(() => {
+        var _a;
+        if ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
+            return null;
+        }
+        return ((_a = compositions.find((composition) => composition.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [canvasContent, compositions]);
+    const currentComposition = (_f = currentCompositionDefinition === null || currentCompositionDefinition === void 0 ? void 0 : currentCompositionDefinition.id) !== null && _f !== void 0 ? _f : null;
+    const currentCompositionRef = (0, react_1.useRef)(currentComposition);
+    currentCompositionRef.current = currentComposition;
+    const currentCompositionDefinitionRef = (0, react_1.useRef)(currentCompositionDefinition);
+    currentCompositionDefinitionRef.current = currentCompositionDefinition;
+    const compositionsRef = (0, react_1.useRef)(compositions);
+    compositionsRef.current = compositions;
+    const sequencesRef = (0, react_1.useRef)(sequences);
+    sequencesRef.current = sequences;
+    const overrideIdToNodePathMappingsRef = (0, react_1.useRef)(overrideIdToNodePathMappings);
+    overrideIdToNodePathMappingsRef.current = overrideIdToNodePathMappings;
+    const foldersRef = (0, react_1.useRef)(folders);
+    foldersRef.current = folders;
+    const currentCompositionMetadataRef = (0, react_1.useRef)(currentCompositionMetadata);
+    currentCompositionMetadataRef.current = currentCompositionMetadata;
+    const guidesListRef = (0, react_1.useRef)(guidesList);
+    guidesListRef.current = guidesList;
+    const editorShowGuidesRef = (0, react_1.useRef)(editorShowGuides);
+    editorShowGuidesRef.current = editorShowGuides;
+    const mediaVolumeRef = (0, react_1.useRef)(mediaVolume);
+    mediaVolumeRef.current = mediaVolume;
+    const playbackRateRef = (0, react_1.useRef)(currentPlaybackRate);
+    playbackRateRef.current = currentPlaybackRate;
+    const playerMutedRef = (0, react_1.useRef)(playerMuted);
+    playerMutedRef.current = playerMuted;
+    const timelineZoomRef = (0, react_1.useRef)(timelineZoomMap);
+    timelineZoomRef.current = timelineZoomMap;
+    (0, react_1.useEffect)(() => {
+        const { modelContext } = document;
+        if (typeof (modelContext === null || modelContext === void 0 ? void 0 : modelContext.registerTool) !== 'function') {
+            return;
+        }
+        const controller = new AbortController();
+        const getCurrentTimeline = () => {
+            var _a;
+            var _b, _c;
+            const composition = currentCompositionDefinitionRef.current;
+            if (composition === null) {
+                return [];
+            }
+            const durationInFrames = (_c = (_b = (_a = currentCompositionMetadataRef.current) === null || _a === void 0 ? void 0 : _a.durationInFrames) !== null && _b !== void 0 ? _b : composition.durationInFrames) !== null && _c !== void 0 ? _c : (0, imperative_state_1.getCurrentDuration)();
+            return (0, calculate_timeline_1.calculateTimeline)({
+                sequences: sequencesRef.current,
+                overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+                compositions: compositionsRef.current,
+            }).filter((timelineTrack) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(timelineTrack, durationInFrames));
+        };
+        Promise.all([
+            modelContext.registerTool({
+                name: 'get_compositions',
+                title: 'Get Studio compositions',
+                description: 'Read the mounted Remotion Studio compositions as the nested folder tree shown in the sidebar.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    const tree = (0, create_folder_tree_1.createFolderTree)(compositionsRef.current, foldersRef.current, {});
+                    return Promise.resolve({
+                        compositions: serializeCompositionTree(tree),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'select_composition',
+                title: 'Select Studio composition',
+                description: 'Open a registered composition in Remotion Studio by name.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        compositionName: {
+                            type: 'string',
+                            description: 'The name of the composition to open.',
+                        },
+                    },
+                    required: ['compositionName'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ compositionName }) => {
+                    if (typeof compositionName !== 'string') {
+                        throw new Error('compositionName must be a string.');
+                    }
+                    const composition = compositionsRef.current.find((candidate) => candidate.id === compositionName);
+                    if (!composition) {
+                        throw new Error(`Composition ${compositionName} not found.`);
+                    }
+                    selectComposition(composition, true);
+                    return Promise.resolve({ currentComposition: composition.id });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_sequences',
+                title: 'Get Studio sequences',
+                description: 'Read the mounted sequences in the current Remotion Studio timeline, including their IDs, hierarchy, timing, type, source stack, and whether they can be selected.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        sequences: compositionId === null
+                            ? []
+                            : getCurrentTimeline().map(serializeSequence),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'select_sequence',
+                title: 'Select Studio sequence',
+                description: 'Select and reveal a sequence in the current Remotion Studio timeline by the sequence ID returned by get_sequences.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        sequenceId: {
+                            type: 'string',
+                            minLength: 1,
+                            description: 'The sequence ID returned by get_sequences.',
+                        },
+                    },
+                    required: ['sequenceId'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ sequenceId }) => {
+                    if (typeof sequenceId !== 'string' || sequenceId.length === 0) {
+                        throw new Error('sequenceId must be a non-empty string.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    if (!canSelectRef.current) {
+                        throw new Error('Studio sequence selection is unavailable.');
+                    }
+                    const timelineTrack = getCurrentTimeline().find((candidate) => candidate.sequence.id === sequenceId);
+                    if (!timelineTrack) {
+                        throw new Error(`Sequence ${sequenceId} not found in the current composition.`);
+                    }
+                    const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(timelineTrack.nodePathInfo);
+                    if (selection === null) {
+                        throw new Error(`Sequence ${sequenceId} cannot be selected.`);
+                    }
+                    selectItems([selection], { reveal: true });
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        selectedSequence: serializeSequence(timelineTrack),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_composition',
+                title: 'Get Studio composition',
+                description: 'Read the name, source stack, duration, dimensions, frame rate, and current frame of the composition open in Remotion Studio. All fields are null when the canvas is not showing a composition.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    const composition = currentCompositionDefinitionRef.current;
+                    if (composition === null) {
+                        return Promise.resolve({
+                            compositionName: null,
+                            stack: null,
+                            durationInFrames: null,
+                            height: null,
+                            width: null,
+                            fps: null,
+                            currentFrame: null,
+                        });
+                    }
+                    const metadata = currentCompositionMetadataRef.current;
+                    return Promise.resolve({
+                        compositionName: composition.id,
+                        stack: composition.stack,
+                        durationInFrames: (_b = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.durationInFrames) !== null && _a !== void 0 ? _a : composition.durationInFrames) !== null && _b !== void 0 ? _b : null,
+                        height: (_d = (_c = metadata === null || metadata === void 0 ? void 0 : metadata.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : null,
+                        width: (_f = (_e = metadata === null || metadata === void 0 ? void 0 : metadata.width) !== null && _e !== void 0 ? _e : composition.width) !== null && _f !== void 0 ? _f : null,
+                        fps: (_h = (_g = metadata === null || metadata === void 0 ? void 0 : metadata.fps) !== null && _g !== void 0 ? _g : composition.fps) !== null && _h !== void 0 ? _h : null,
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_canvas_html',
+                title: 'Get Studio canvas HTML',
+                description: 'Read the HTML of the rendered composition at the current frame. The result is limited to the composition canvas and does not include the Studio interface. Canvas and WebGL pixels are not included.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        return Promise.resolve({
+                            currentComposition: null,
+                            currentFrame: null,
+                            html: null,
+                            htmlLength: null,
+                            truncated: false,
+                        });
+                    }
+                    const outerHtml = remotion_1.Internals.portalNode().outerHTML;
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                        html: outerHtml.slice(0, MAX_CANVAS_HTML_LENGTH),
+                        htmlLength: outerHtml.length,
+                        truncated: outerHtml.length > MAX_CANVAS_HTML_LENGTH,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_outlines',
+                title: 'Get Studio canvas outlines',
+                description: 'Read the active selectable component outlines in the current Remotion Studio canvas, including sequence identity, source-code location, and geometry in composition pixels.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: async () => {
+                    var _a, _b, _c, _d;
+                    const composition = currentCompositionDefinitionRef.current;
+                    if (composition === null) {
+                        return {
+                            currentComposition: null,
+                            currentFrame: null,
+                            outlines: [],
+                        };
+                    }
+                    const currentFrame = (0, imperative_state_1.getCurrentFrame)();
+                    const selectableOutlines = (0, canvas_1.getCanvasSelectableOutlines)({
+                        sequences: sequencesRef.current,
+                        overrideIdsToNodePaths: overrideIdToNodePathMappingsRef.current,
+                        compositions: compositionsRef.current,
+                        timelinePosition: currentFrame,
+                    });
+                    const portalNode = remotion_1.Internals.portalNode();
+                    const portalRect = portalNode.getBoundingClientRect();
+                    const metadata = currentCompositionMetadataRef.current;
+                    const compositionWidth = (_b = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : portalNode.offsetWidth;
+                    const compositionHeight = (_d = (_c = metadata === null || metadata === void 0 ? void 0 : metadata.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : portalNode.offsetHeight;
+                    const scaleX = portalRect.width / compositionWidth;
+                    const scaleY = portalRect.height / compositionHeight;
+                    if (!Number.isFinite(scaleX) ||
+                        scaleX === 0 ||
+                        !Number.isFinite(scaleY) ||
+                        scaleY === 0) {
+                        throw new Error('The Studio canvas is not ready to be measured.');
+                    }
+                    const measuredOutlines = (0, canvas_1.measureCanvasOutlines)(portalNode, selectableOutlines.map((outline) => {
+                        if (outline.sequence.refForOutline === null) {
+                            throw new Error('Expected an outline ref.');
+                        }
+                        return {
+                            key: outline.key,
+                            ref: outline.sequence.refForOutline,
+                            crop: { left: 0, right: 0, top: 0, bottom: 0 },
+                            includeOutsideContainer: true,
+                        };
+                    }));
+                    const measurementsByKey = new Map(measuredOutlines.map((outline) => [outline.key, outline]));
+                    const contextByStack = new Map();
+                    const outlines = await Promise.all(selectableOutlines.map(async (outline) => {
+                        var _a;
+                        const measurement = measurementsByKey.get(outline.key);
+                        if (!measurement) {
+                            return null;
+                        }
+                        const outlineStack = outline.sequence.getStack();
+                        let location = null;
+                        if (outlineStack !== null) {
+                            let promise = contextByStack.get(outlineStack);
+                            if (!promise) {
+                                promise = (0, get_stack_1.getOriginalLocationFromStack)(outlineStack, 'sequence').catch(() => null);
+                                contextByStack.set(outlineStack, promise);
+                            }
+                            location = await promise;
+                        }
+                        const name = outline.sequence.displayName ||
+                            ((_a = outline.sequence.controls) === null || _a === void 0 ? void 0 : _a.componentName) ||
+                            null;
+                        const points = measurement.points.map((point) => ({
+                            x: point.x / scaleX,
+                            y: point.y / scaleY,
+                        }));
+                        const xValues = points.map((point) => point.x);
+                        const yValues = points.map((point) => point.y);
+                        const left = Math.min(...xValues);
+                        const top = Math.min(...yValues);
+                        const right = Math.max(...xValues);
+                        const bottom = Math.max(...yValues);
+                        return {
+                            sequenceId: outline.sequence.id,
+                            parentSequenceId: outline.sequence.parent,
+                            name,
+                            location: (0, format_file_location_1.getRelativeFileLocation)({
+                                location,
+                                root: window.remotion_cwd,
+                            }),
+                            geometry: {
+                                points,
+                                boundingBox: {
+                                    x: left,
+                                    y: top,
+                                    width: right - left,
+                                    height: bottom - top,
+                                },
+                            },
+                        };
+                    }));
+                    return {
+                        currentComposition: composition.id,
+                        currentFrame,
+                        outlines: outlines.filter((outline) => outline !== null),
+                    };
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_playback_state',
+                title: 'Get Studio playback state',
+                description: 'Read the current frame, playing state, audio state, playback rate, looping state, and normalized timeline zoom for the composition open in Remotion Studio. All playback fields are null when the canvas is not showing a composition.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    var _a;
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        return Promise.resolve({
+                            currentComposition: null,
+                            currentFrame: null,
+                            playing: null,
+                            muted: null,
+                            volume: null,
+                            playbackRate: null,
+                            looping: null,
+                            timelineZoom: null,
+                        });
+                    }
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                        playing: imperativePlaying.current,
+                        muted: playerMutedRef.current,
+                        volume: mediaVolumeRef.current,
+                        playbackRate: playbackRateRef.current,
+                        looping: (0, loop_1.loadLoopOption)(),
+                        timelineZoom: (0, get_timeline_max_zoom_1.timelineZoomToNormalized)({
+                            zoom: (_a = timelineZoomRef.current[compositionId]) !== null && _a !== void 0 ? _a : get_timeline_max_zoom_1.TIMELINE_MIN_ZOOM,
+                            maxZoom: (0, get_timeline_max_zoom_1.getTimelineMaxZoom)((0, imperative_state_1.getCurrentDuration)()),
+                        }),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_selection',
+                title: 'Get Studio selection',
+                description: 'Read the current frame, composition, and source-code context for the item currently selected in Remotion Studio. The selection matches "Copy context for agents".',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => Promise.resolve({
+                    currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                    currentSelection: currentSelectionRef.current,
+                    currentComposition: currentCompositionRef.current,
+                    selectionType: selectedItemsRef.current.length === 1
+                        ? selectedItemsRef.current[0].type
+                        : null,
+                    selectedSequence: selectedSequenceRef.current,
+                }),
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'get_guides',
+                title: 'Get Studio guides',
+                description: 'Read the guides for the current Remotion Studio composition. Vertical guide positions are x-coordinates from the left edge and horizontal guide positions are y-coordinates from the top edge, in composition pixels.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: true },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    const guidesAreVisible = editorShowGuidesRef.current;
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        guidesVisible: guidesAreVisible,
+                        guides: compositionId === null
+                            ? []
+                            : guidesListRef.current
+                                .filter((guide) => guide.compositionId === compositionId)
+                                .map((guide) => ({
+                                id: guide.id,
+                                orientation: guide.orientation,
+                                position: guide.position,
+                                visible: guidesAreVisible && guide.show,
+                            })),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'set_guides_visible',
+                title: 'Set Studio guides visibility',
+                description: 'Show or hide all guides for the current Remotion Studio composition.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        visible: {
+                            type: 'boolean',
+                            description: 'Whether guides should be visible.',
+                        },
+                    },
+                    required: ['visible'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ visible }) => {
+                    if (typeof visible !== 'boolean') {
+                        throw new Error('visible must be a boolean.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    editorShowGuidesRef.current = visible;
+                    setEditorShowGuides(() => visible);
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        guidesVisible: visible,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'add_guide',
+                title: 'Add Studio guide',
+                description: 'Add a guide to the current Remotion Studio composition. A vertical guide position is an x-coordinate from the left edge and a horizontal guide position is a y-coordinate from the top edge, in composition pixels.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        orientation: {
+                            type: 'string',
+                            enum: ['horizontal', 'vertical'],
+                            description: 'The orientation of the guide.',
+                        },
+                        position: {
+                            type: 'number',
+                            description: 'The guide position in composition pixels. Vertical guides use an x-coordinate and horizontal guides use a y-coordinate.',
+                        },
+                    },
+                    required: ['orientation', 'position'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ orientation, position }) => {
+                    if (orientation !== 'horizontal' && orientation !== 'vertical') {
+                        throw new Error('orientation must be either "horizontal" or "vertical".');
+                    }
+                    if (typeof position !== 'number' || !Number.isFinite(position)) {
+                        throw new Error('position must be a finite number.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    const guide = {
+                        id: crypto.randomUUID(),
+                        orientation,
+                        position,
+                        show: true,
+                        compositionId,
+                    };
+                    const nextGuides = [...guidesListRef.current, guide];
+                    guidesListRef.current = nextGuides;
+                    setGuidesList(() => nextGuides);
+                    (0, editor_guides_1.persistGuidesList)(nextGuides);
+                    editorShowGuidesRef.current = true;
+                    setEditorShowGuides(() => true);
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        guide: {
+                            id: guide.id,
+                            orientation: guide.orientation,
+                            position: guide.position,
+                            visible: true,
+                        },
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'remove_guide',
+                title: 'Remove Studio guide',
+                description: 'Remove a guide from the current Remotion Studio composition by its guide ID.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        guideId: {
+                            type: 'string',
+                            minLength: 1,
+                            description: 'The guide ID returned by get_guides or add_guide.',
+                        },
+                    },
+                    required: ['guideId'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ guideId }) => {
+                    if (typeof guideId !== 'string' || guideId.length === 0) {
+                        throw new Error('guideId must be a non-empty string.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    const guideExists = guidesListRef.current.some((guide) => guide.id === guideId && guide.compositionId === compositionId);
+                    if (!guideExists) {
+                        throw new Error(`Guide ${guideId} not found in the current composition.`);
+                    }
+                    const nextGuides = guidesListRef.current.filter((guide) => guide.id !== guideId || guide.compositionId !== compositionId);
+                    guidesListRef.current = nextGuides;
+                    setGuidesList(() => nextGuides);
+                    (0, editor_guides_1.persistGuidesList)(nextGuides);
+                    const removedGuideWasSelected = selectedItemsRef.current.some((item) => item.type === 'guide' && item.guideId === guideId);
+                    if (removedGuideWasSelected) {
+                        clearSelection();
+                    }
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        guideId,
+                        removed: true,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'play',
+                title: 'Play Studio composition',
+                description: 'Start playing the current Remotion Studio composition from the current frame.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    if ((0, imperative_state_1.getCurrentDuration)() <= 1) {
+                        throw new Error('The current composition is a still and cannot play.');
+                    }
+                    if (remotion_1.Internals.timeValueRef.current === null) {
+                        throw new Error('Studio playback controls are not ready.');
+                    }
+                    (0, play_1.play)();
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        playing: true,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'pause',
+                title: 'Pause Studio composition',
+                description: 'Pause the current Remotion Studio composition at the current frame.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    if (remotion_1.Internals.timeValueRef.current === null) {
+                        throw new Error('Studio playback controls are not ready.');
+                    }
+                    (0, pause_1.pause)();
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        playing: false,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'mute',
+                title: 'Mute Studio composition',
+                description: 'Mute audio playback for the current Remotion Studio composition.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    setPlayerMuted(true);
+                    (0, mute_1.persistMuteOption)(true);
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        muted: true,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'unmute',
+                title: 'Unmute Studio composition',
+                description: 'Unmute audio playback for the current Remotion Studio composition.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {},
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: () => {
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    setPlayerMuted(false);
+                    (0, mute_1.persistMuteOption)(false);
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        muted: false,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'set_timeline_zoom',
+                title: 'Set Studio timeline zoom',
+                description: 'Set the timeline zoom for the current Remotion Studio composition. Use 0 for fully zoomed out and 1 for the maximum zoom supported by the composition duration.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        zoom: {
+                            type: 'number',
+                            minimum: 0,
+                            maximum: 1,
+                            description: 'The normalized timeline zoom, from 0 (fully zoomed out) to 1 (maximum zoom).',
+                        },
+                    },
+                    required: ['zoom'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ zoom }) => {
+                    if (typeof zoom !== 'number' ||
+                        !Number.isFinite(zoom) ||
+                        zoom < 0 ||
+                        zoom > 1) {
+                        throw new Error('zoom must be a finite number between 0 and 1.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    const durationInFrames = (0, imperative_state_1.getCurrentDuration)();
+                    if (durationInFrames <= 1) {
+                        throw new Error('The current composition is a still and has no timeline zoom.');
+                    }
+                    const maxZoom = (0, get_timeline_max_zoom_1.getTimelineMaxZoom)(durationInFrames);
+                    const timelineZoom = (0, get_timeline_max_zoom_1.clampTimelineZoom)({
+                        zoom: (0, get_timeline_max_zoom_1.normalizedToTimelineZoom)({
+                            normalized: zoom,
+                            maxZoom,
+                        }),
+                        durationInFrames,
+                    });
+                    setTimelineZoom(compositionId, () => timelineZoom, {
+                        anchorFrame: null,
+                        anchorContentX: null,
+                    });
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        timelineZoom: (0, get_timeline_max_zoom_1.timelineZoomToNormalized)({
+                            zoom: timelineZoom,
+                            maxZoom,
+                        }),
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'set_playback_rate',
+                title: 'Set Studio playback rate',
+                description: 'Set the playback rate for the current Remotion Studio composition. Negative values play the composition backwards.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        playbackRate: {
+                            type: 'number',
+                            enum: playbackrate_1.commonPlaybackRates,
+                            description: 'The playback multiplier. Negative values play backwards.',
+                        },
+                    },
+                    required: ['playbackRate'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ playbackRate }) => {
+                    if (typeof playbackRate !== 'number' ||
+                        !playbackrate_1.commonPlaybackRates.includes(playbackRate)) {
+                        throw new Error(`playbackRate must be one of: ${playbackrate_1.commonPlaybackRates.join(', ')}.`);
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    setPlaybackRate(() => playbackRate);
+                    (0, playbackrate_1.persistPlaybackRate)(playbackRate);
+                    return Promise.resolve({
+                        currentComposition: compositionId,
+                        playbackRate,
+                    });
+                },
+            }, { signal: controller.signal }),
+            modelContext.registerTool({
+                name: 'seek_to_frame',
+                title: 'Seek Studio timeline',
+                description: 'Seek the current Remotion Studio composition to a frame. Frames past the end of the composition are clamped to the final frame.',
+                inputSchema: {
+                    type: 'object',
+                    properties: {
+                        frame: {
+                            type: 'integer',
+                            minimum: 0,
+                            description: 'The zero-based frame to seek to.',
+                        },
+                    },
+                    required: ['frame'],
+                    additionalProperties: false,
+                },
+                annotations: { readOnlyHint: false },
+                execute: ({ frame }) => {
+                    if (typeof frame !== 'number' || !Number.isInteger(frame)) {
+                        throw new Error('frame must be an integer.');
+                    }
+                    const compositionId = currentCompositionRef.current;
+                    if (compositionId === null) {
+                        throw new Error('No composition is currently selected.');
+                    }
+                    const currentFrame = Math.min(Math.max(0, frame), (0, imperative_state_1.getCurrentDuration)() - 1);
+                    (0, seek_1.seek)(currentFrame);
+                    return Promise.resolve({
+                        currentFrame,
+                        currentComposition: compositionId,
+                    });
+                },
+            }, { signal: controller.signal }),
+        ]).catch(() => undefined);
+        return () => {
+            controller.abort();
+        };
+    }, [
+        clearSelection,
+        imperativePlaying,
+        selectComposition,
+        selectItems,
+        setEditorShowGuides,
+        setGuidesList,
+        setPlaybackRate,
+        setPlayerMuted,
+        setTimelineZoom,
+    ]);
+    return null;
+};
+exports.WebMcp = WebMcp;