@remotion/studio 4.0.505 → 4.0.507

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSequenceContextMenuItems = void 0;
-const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
-const editor_1 = require("../../icons/editor");
+const format_file_location_1 = require("../../helpers/format-file-location");
+const get_open_in_menu_items_1 = require("../get-open-in-menu-items");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const timeline_asset_link_1 = require("./timeline-asset-link");
 const normalizeMenuDividers = (items) => {
@@ -24,13 +24,34 @@ const normalizeMenuDividers = (items) => {
     return normalized;
 };
 const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
-const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
-    var _a, _b;
-    var _c;
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    var _a, _b, _c, _d;
+    var _e, _f, _g;
     const editorName = window.remotion_editorName;
-    const { documentationLink } = sequence;
     const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
-    const installedEditors = (_c = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _c !== void 0 ? _c : [];
+    const installedEditors = (_e = editorInfo === null || editorInfo === void 0 ? void 0 : editorInfo.installedEditors) !== null && _e !== void 0 ? _e : [];
+    const defaultEditorId = (_f = (_b = installedEditors.find((editor) => editor.nameWithType === editorName)) === null || _b === void 0 ? void 0 : _b.id) !== null && _f !== void 0 ? _f : null;
+    const defaultCodingAgent = codingAgentInfo === null || codingAgentInfo === void 0 ? void 0 : codingAgentInfo.installedCodingAgents.find((codingAgent) => codingAgent.id === codingAgentInfo.defaultCodingAgent);
+    const contextForAgents = (0, format_file_location_1.formatContextForAgents)({
+        location: originalLocation,
+        name: sequence.displayName || ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.componentName) || null,
+        root: window.remotion_cwd,
+    });
+    const openInCodingAgentWithContext = (codingAgentId, codingAgentName) => {
+        openInCodingAgent(codingAgentId, codingAgentName, codingAgentId === 'copilot' ? null : contextForAgents);
+    };
+    const openInMenuItems = onConfigureApps
+        ? (0, get_open_in_menu_items_1.getOpenInMenuItems)({
+            codingAgentInfo,
+            editorDisabled: !canOpenInEditor || !originalLocation,
+            editorInfo,
+            excludeCodingAgentId: (_g = defaultCodingAgent === null || defaultCodingAgent === void 0 ? void 0 : defaultCodingAgent.id) !== null && _g !== void 0 ? _g : null,
+            excludeEditorId: defaultEditorId,
+            onConfigureApps,
+            onOpenInCodingAgent: openInCodingAgentWithContext,
+            onOpenInEditor: openInEditor,
+        })
+        : [];
     const items = [
         editorName
             ? {
@@ -46,53 +67,53 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'open-in-editor',
             }
             : null,
-        editorName && installedEditors.length > 0
+        defaultCodingAgent
             ? {
                 type: 'item',
-                id: 'open-in-another-editor',
+                id: 'open-in-default-coding-agent',
+                keyHint: null,
+                label: `Open in ${defaultCodingAgent.nameWithType}`,
+                leftItem: null,
+                disabled: false,
+                onClick: () => openInCodingAgentWithContext(defaultCodingAgent.id, defaultCodingAgent.nameWithType),
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-in-default-coding-agent',
+            }
+            : null,
+        onConfigureApps
+            ? {
+                type: 'item',
+                id: 'open-in-another-app',
                 keyHint: null,
                 label: 'Open in...',
                 leftItem: null,
-                disabled: !canOpenInEditor || !originalLocation,
+                disabled: false,
                 onClick: () => undefined,
                 quickSwitcherLabel: null,
                 subMenu: {
-                    items: installedEditors.map((editor) => ({
-                        type: 'item',
-                        id: `open-in-${editor.id}`,
-                        keyHint: null,
-                        label: editor.name,
-                        leftItem: (0, react_1.createElement)(editor_1.EditorIcon, {
-                            editorId: editor.id,
-                            size: 18,
-                        }),
-                        disabled: false,
-                        onClick: () => openInEditor(editor.id),
-                        quickSwitcherLabel: null,
-                        subMenu: null,
-                        value: editor.id,
-                    })),
+                    items: openInMenuItems,
                     leaveLeftSpace: true,
                     preselectIndex: false,
                 },
-                value: 'open-in-another-editor',
+                value: 'open-in-another-app',
             }
             : null,
         {
             type: 'item',
-            id: 'copy-file-location',
+            id: 'copy-context-for-agents',
             keyHint: null,
-            label: 'Copy file location',
+            label: 'Copy context for agents',
             leftItem: null,
-            disabled: !fileLocation,
+            disabled: !contextForAgents,
             onClick: () => {
-                if (!fileLocation) {
+                if (!contextForAgents) {
                     return;
                 }
                 navigator.clipboard
-                    .writeText(fileLocation)
+                    .writeText(contextForAgents)
                     .then(() => {
-                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                    (0, NotificationCenter_1.showNotification)('Copied context for agents', 1000);
                 })
                     .catch((err) => {
                     (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
@@ -100,24 +121,8 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             },
             quickSwitcherLabel: null,
             subMenu: null,
-            value: 'copy-file-location',
+            value: 'copy-context-for-agents',
         },
-        documentationLink
-            ? {
-                type: 'item',
-                id: 'open-component-docs',
-                keyHint: null,
-                label: 'Open component docs',
-                leftItem: null,
-                disabled: false,
-                onClick: () => {
-                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
-                },
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'open-component-docs',
-            }
-            : null,
         assetLinkInfo
             ? {
                 type: 'item',
@@ -134,7 +139,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 value: 'show-asset',
             }
             : null,
-        documentationLink || assetLinkInfo
+        assetLinkInfo
             ? {
                 type: 'divider',
                 id: 'sequence-link-divider',
@@ -147,7 +152,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 keyHint: null,
                 label: 'Copy SVG',
                 leftItem: null,
-                disabled: !((_b = sequence.refForOutline) === null || _b === void 0 ? void 0 : _b.current),
+                disabled: !((_d = sequence.refForOutline) === null || _d === void 0 ? void 0 : _d.current),
                 onClick: () => {
                     var _a;
                     const svg = (_a = sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current;
@@ -202,7 +207,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 keyHint: null,
                 label: 'Duplicate',
                 leftItem: null,
-                disabled: duplicateDisabled,
+                disabled: duplicateDisabled || isProgrammaticallyDuplicated,
                 onClick: onDuplicateSequenceFromSource,
                 quickSwitcherLabel: null,
                 subMenu: null,
@@ -220,7 +225,7 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 type: 'item',
                 id: 'delete-sequence',
                 keyHint: null,
-                label: 'Delete',
+                label: isProgrammaticallyDuplicated ? 'Delete all' : 'Delete',
                 leftItem: null,
                 disabled: deleteDisabled,
                 onClick: onDeleteSequenceFromSource,

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -71,7 +71,7 @@ const getTimelinePropResetTargets = ({ selections, sequences, overrideIdsToNodeP
             const sequencePropStatus = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
             const { merged: sequenceValuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
                 schema: sequence.controls.schema,
-                currentValue: sequence.controls.currentRuntimeValueDotNotation,
+                currentValue: sequence.controls.runtimeValues.getSnapshot(),
                 overrideValues: {},
                 propStatus: sequencePropStatus,
                 frame: null,

package/dist/components/Timeline/should-subscribe-to-sequence-props.d.ts

@@ -1,4 +1,4 @@
 import type { TSequence } from 'remotion';
 export declare const shouldSubscribeToSequenceProps: (sequence: TSequence, previewConnected: boolean) => sequence is TSequence & {
-    readonly controls: import("remotion").SequenceControls;
+    readonly controls: import("remotion").SequenceRegistrationControls;
 };

package/dist/components/Timeline/timeline-asset-link.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceControls } from 'remotion';
+import type { SequenceRegistrationControls } from 'remotion';
 type LinkInfo = {
     kind: 'local';
     assetPath: string;
@@ -13,7 +13,7 @@ export declare const splitRemoteSourceForMiddleEllipsis: (src: string) => {
     leading: string;
     trailing: string;
 };
-export declare const getTimelineAssetSrcFromSchema: (controls: SequenceControls | null) => string | null;
+export declare const getTimelineAssetSrcFromSchema: (controls: SequenceRegistrationControls | null, runtimeValues?: Readonly<Record<string, unknown>> | undefined) => string | null;
 export declare const getTimelineAssetLinkInfo: (src: string) => LinkInfo;
 export declare const openTimelineAssetLink: (linkInfo: TimelineAssetLinkInfo, selectAsset: (asset: string) => void) => void;
 export {};

package/dist/components/Timeline/timeline-asset-link.js

@@ -21,11 +21,11 @@ const splitRemoteSourceForMiddleEllipsis = (src) => {
     };
 };
 exports.splitRemoteSourceForMiddleEllipsis = splitRemoteSourceForMiddleEllipsis;
-const getTimelineAssetSrcFromSchema = (controls) => {
+const getTimelineAssetSrcFromSchema = (controls, runtimeValues = controls === null || controls === void 0 ? void 0 : controls.runtimeValues.getSnapshot()) => {
     if (!controls || !(0, studio_shared_1.getAssetSchemaKeys)(controls.schema).includes('src')) {
         return null;
     }
-    const { src } = controls.currentRuntimeValueDotNotation;
+    const { src } = runtimeValues !== null && runtimeValues !== void 0 ? runtimeValues : {};
     return typeof src === 'string' ? src : null;
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -6,11 +6,41 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const imperative_state_1 = require("./imperative-state");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const TimelineSelection_1 = require("./TimelineSelection");
+const areTimelineTreeLayoutsEqual = (first, second) => {
+    if (first.length !== second.length) {
+        return false;
+    }
+    return first.every((firstNode, index) => {
+        const secondNode = second[index];
+        if (firstNode.kind !== secondNode.kind ||
+            (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(firstNode.nodePathInfo) !==
+                (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(secondNode.nodePathInfo)) {
+            return false;
+        }
+        if (firstNode.kind === 'group' && secondNode.kind === 'group') {
+            return areTimelineTreeLayoutsEqual(firstNode.children, secondNode.children);
+        }
+        if (firstNode.kind !== 'field' || secondNode.kind !== 'field') {
+            return false;
+        }
+        if (firstNode.field === null || secondNode.field === null) {
+            return firstNode.field === secondNode.field;
+        }
+        return (firstNode.field.kind === secondNode.field.kind &&
+            firstNode.field.key === secondNode.field.key &&
+            firstNode.field.typeName === secondNode.field.typeName &&
+            firstNode.field.rowHeight === secondNode.field.rowHeight &&
+            (firstNode.field.kind !== 'effect-field' ||
+                (secondNode.field.kind === 'effect-field' &&
+                    firstNode.field.effectIndex === secondNode.field.effectIndex)));
+    });
+};
 const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     var _a;
     if (node.kind !== 'field' || node.field === null) {
@@ -37,7 +67,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
     const { propStatuses } = (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 tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
+    const selectTree = (0, react_1.useCallback)((runtimeValues) => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
         getDragOverrides,
@@ -45,13 +75,19 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         propStatuses,
         includeTextContent: false,
         includeSourceControls: false,
+        runtimeValues,
     }), [
+        sequence,
         propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         nodePathInfo,
-        sequence,
     ]);
+    const tree = (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: selectTree,
+        isEqual: areTimelineTreeLayoutsEqual,
+    });
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
         nodes: tree,

package/dist/components/Timeline/{use-open-sequence-in-editor.d.ts → use-open-sequence-in-apps.d.ts}

@@ -1,8 +1,11 @@
 import type { EditorPickerId } from '@remotion/studio-shared';
 import type { TSequence } from 'remotion';
-export declare const useOpenSequenceInEditor: (sequence: TSequence) => {
+export declare const useOpenSequenceInApps: (sequence: TSequence) => {
     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>;
     originalLocation: import("remotion").ResolvedStackLocation | null;
 };

package/dist/components/Timeline/{use-open-sequence-in-editor.js → use-open-sequence-in-apps.js}

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOpenSequenceInEditor = void 0;
+exports.useOpenSequenceInApps = void 0;
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const use_default_editor_info_1 = require("../use-default-editor-info");
 const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
-const useOpenSequenceInEditor = (sequence) => {
+const useOpenSequenceInApps = (sequence) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
+    const editorPickerAvailable = (0, use_default_editor_info_1.canUseEditorPicker)(previewConnected);
+    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)(editorPickerAvailable);
+    const codingAgentInfo = (0, use_default_editor_info_1.useDefaultCodingAgentInfo)(editorPickerAvailable);
     const canOpenInEditor = (0, react_1.useMemo)(() => Boolean(window.remotion_editorName && previewConnected && originalLocation), [originalLocation, previewConnected]);
     const openInEditor = (0, react_1.useCallback)(async (editorId) => {
         if (!canOpenInEditor || !originalLocation) {
@@ -24,11 +26,25 @@ const useOpenSequenceInEditor = (sequence) => {
             (0, NotificationCenter_1.showNotification)(err.message, 2000);
         }
     }, [canOpenInEditor, originalLocation]);
+    const openInCodingAgent = (0, react_1.useCallback)(async (codingAgentId, codingAgentName, contextForAgents) => {
+        try {
+            const response = await (0, open_in_editor_1.openInCodingAgent)(codingAgentId, contextForAgents);
+            if (!response.success) {
+                (0, NotificationCenter_1.showNotification)(`Could not open ${codingAgentName}`, 2000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+        }
+    }, []);
     return {
         canOpenInEditor,
+        canConfigureApps: editorPickerAvailable,
+        codingAgentInfo,
         editorInfo,
+        openInCodingAgent,
         openInEditor,
         originalLocation,
     };
 };
-exports.useOpenSequenceInEditor = useOpenSequenceInEditor;
+exports.useOpenSequenceInApps = useOpenSequenceInApps;

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

@@ -132,6 +132,7 @@ const useTimelineAssetDrop = () => {
                 event,
                 fps: videoConfig.fps,
                 from: frame,
+                preferCompositionStart: false,
             });
         }
         finally {

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

@@ -1,5 +1,9 @@
 import { type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const useTimelineSequenceHasExpandableContent: ({ sequence, nodePathInfo, }: {
+    readonly sequence: TSequence;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => boolean;
 export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }: {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -9,6 +13,7 @@ export declare const useTimelineExpandedTree: ({ sequence, nodePathInfo, include
     filteredTree: import("../../helpers/timeline-layout").TimelineTreeNode[];
     getIsExpanded: import("../ExpandedTracksProvider").GetIsExpanded;
     propStatuses: import("remotion").PropStatuses;
+    runtimeValues: Readonly<Record<string, unknown>>;
     toggleTrack: (nodePathInfo: SequenceNodePathInfo) => void;
     tree: import("../../helpers/timeline-layout").TimelineTreeNode[];
 };

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

@@ -1,19 +1,65 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineExpandedTree = void 0;
+exports.useTimelineExpandedTree = exports.useTimelineSequenceHasExpandableContent = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 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 { 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)({
+            sequence,
+            nodePathInfo,
+            getDragOverrides,
+            getEffectDragOverrides,
+            propStatuses: visualModePropStatuses,
+            includeTextContent: false,
+            includeSourceControls: false,
+            runtimeValues,
+        });
+        return ((0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
+            nodes: tree,
+            shouldShowNode: (node) => (0, timeline_expanded_filter_1.isTimelineExpandedNodeSelected)({
+                nodePathInfo: node.nodePathInfo,
+                selectedRowKeys,
+            }) ||
+                (0, get_node_keyframes_1.getNodeHasKeyframes)({
+                    node,
+                    nodePath: nodePathInfo.sequenceSubscriptionKey,
+                    propStatuses: visualModePropStatuses,
+                    getDragOverrides,
+                    getEffectDragOverrides,
+                }),
+        }).length > 0);
+    }, [
+        getDragOverrides,
+        getEffectDragOverrides,
+        nodePathInfo,
+        selectedRowKeys,
+        sequence,
+        visualModePropStatuses,
+    ]);
+    return (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: selectHasExpandableContent,
+    });
+};
+exports.useTimelineSequenceHasExpandableContent = useTimelineSequenceHasExpandableContent;
 const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, includeSourceControls, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     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 runtimeValues = (0, use_runtime_values_1.useRuntimeValues)(sequence.controls);
     const tree = (0, react_1.useMemo)(() => (0, timeline_layout_1.buildTimelineTree)({
         sequence,
         nodePathInfo,
@@ -22,6 +68,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         propStatuses: visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     }), [
         sequence,
         nodePathInfo,
@@ -30,6 +77,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         visualModePropStatuses,
         includeTextContent,
         includeSourceControls,
+        runtimeValues,
     ]);
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
     const filteredTree = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
@@ -57,6 +105,7 @@ const useTimelineExpandedTree = ({ sequence, nodePathInfo, includeTextContent, i
         filteredTree,
         getIsExpanded,
         propStatuses: visualModePropStatuses,
+        runtimeValues,
         toggleTrack,
         tree,
     };

package/dist/components/Timeline/use-timeline-height.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
@@ -19,6 +20,20 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
     const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const previewServerConnected = previewServerState.type === 'connected';
     const selectedRowKeys = (0, react_1.useMemo)(() => (0, timeline_expanded_filter_1.getSelectedTimelineExpandedRowKeys)(selectedItems), [selectedItems]);
+    const expandedControls = (0, react_1.useMemo)(() => shown.flatMap((track) => {
+        if (!previewServerConnected ||
+            track.nodePathInfo === null ||
+            !getIsExpanded(track.nodePathInfo) ||
+            track.sequence.controls === null) {
+            return [];
+        }
+        return [track.sequence.controls];
+    }), [getIsExpanded, previewServerConnected, shown]);
+    const runtimeValueSnapshots = (0, use_runtime_values_1.useRuntimeValueSnapshots)(expandedControls);
+    const runtimeValuesByStore = (0, react_1.useMemo)(() => new Map(expandedControls.map((controls, index) => [
+        controls.runtimeValues,
+        runtimeValueSnapshots[index],
+    ])), [expandedControls, runtimeValueSnapshots]);
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
             const isExpanded = previewServerConnected &&
@@ -27,6 +42,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
                 timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM;
             const expandedHeight = (() => {
+                var _a;
                 if (!isExpanded || track.nodePathInfo === null) {
                     return 0;
                 }
@@ -39,6 +55,9 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
                     propStatuses,
                     includeTextContent: false,
                     includeSourceControls: false,
+                    runtimeValues: track.sequence.controls
+                        ? ((_a = runtimeValuesByStore.get(track.sequence.controls.runtimeValues)) !== null && _a !== void 0 ? _a : null)
+                        : null,
                 });
                 const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
                     nodes: tree,
@@ -81,6 +100,7 @@ const useTimelineHeight = ({ shown, hasBeenCut, isStill, }) => {
         getDragOverrides,
         getEffectDragOverrides,
         selectedRowKeys,
+        runtimeValuesByStore,
     ]);
 };
 exports.useTimelineHeight = useTimelineHeight;

package/dist/components/TimelineInOutToggle.js

@@ -25,11 +25,15 @@ const style = {
 exports.inOutHandles = (0, react_1.createRef)();
 exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
+    var _a;
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { getCurrentFrame, isFirstFrame, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const isFirstFrame = timelinePosition === 0;
+    const isLastFrame = timelinePosition === ((_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const onInOutClear = (0, react_1.useCallback)((composition) => {
         setInAndOutFrames((prev) => {
             return {

package/dist/components/TopPanel.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopPanel = exports.useResponsiveSidebarStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const mobile_layout_1 = require("../helpers/mobile-layout");
@@ -96,6 +97,21 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
         }
         return 'expanded';
     }, [sidebarCollapsedStateRight]);
+    const previousSidebarState = (0, react_1.useRef)({
+        left: actualStateLeft,
+        right: actualStateRight,
+    });
+    (0, react_1.useLayoutEffect)(() => {
+        if (previousSidebarState.current.left === actualStateLeft &&
+            previousSidebarState.current.right === actualStateRight) {
+            return;
+        }
+        previousSidebarState.current = {
+            left: actualStateLeft,
+            right: actualStateRight,
+        };
+        player_1.PlayerInternals.updateAllElementsSizes();
+    }, [actualStateLeft, actualStateRight]);
     (0, react_1.useEffect)(() => {
         onMounted();
     }, [onMounted]);

package/dist/components/UpdateCheck.js

@@ -27,7 +27,7 @@ const updateIconContainer = {
 };
 const UpdateCheck = () => {
     const [info, setInfo] = (0, react_1.useState)(null);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const [knownBugs, setKnownBugs] = (0, react_1.useState)(null);
     const [hovered, setHovered] = (0, react_1.useState)(false);

package/dist/components/effect-drag-and-drop.js

@@ -33,7 +33,7 @@ exports.addEffectFromDragData = addEffectFromDragData;
 const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
-        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
+        await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [{ name: requiredPackage, version: null }] : []);
         const result = await (0, call_api_1.callApi)('/api/add-effect', {
             fileName,
             sequenceNodePath: nodePath,

package/dist/components/get-open-in-menu-items.d.ts

@@ -0,0 +1,12 @@
+import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const getOpenInMenuItems: ({ codingAgentInfo, editorDisabled, editorInfo, excludeCodingAgentId, excludeEditorId, onConfigureApps, onOpenInCodingAgent, onOpenInEditor, }: {
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
+    readonly editorDisabled: boolean;
+    readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly excludeCodingAgentId: "claude-code" | "codex" | "copilot" | "cursor" | null;
+    readonly excludeEditorId: EditorPickerId | null;
+    readonly onConfigureApps: () => void;
+    readonly onOpenInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string) => void;
+    readonly onOpenInEditor: (editorId: EditorPickerId) => void;
+}) => ComboboxValue[];