@remotion/studio 4.0.492 → 4.0.494

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-ewx0568t.js").then(({ StudioInternals }) => {
+    import("./chunk-tdncqycp.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/calculate-timeline.d.ts

@@ -1,6 +1,7 @@
 import type { OverrideIdToNodePaths, TSequence } from 'remotion';
 import type { TrackWithHash } from './get-timeline-sequence-sort-key';
-export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, }: {
+export declare const calculateTimeline: ({ sequences, overrideIdsToNodePaths, compositions, }: {
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
+    compositions?: readonly import("remotion").AnyComposition[] | undefined;
 }) => TrackWithHash[];

package/dist/helpers/calculate-timeline.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calculateTimeline = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const get_connected_compositions_1 = require("./get-connected-compositions");
 const get_sequence_visible_range_1 = require("./get-sequence-visible-range");
 const get_timeline_nestedness_1 = require("./get-timeline-nestedness");
 const get_timeline_sequence_hash_1 = require("./get-timeline-sequence-hash");
@@ -20,19 +21,42 @@ const getInheritedLoopDisplay = (sequence, sequences) => {
     }
     return getInheritedLoopDisplay(parent, sequences);
 };
-const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
+const calculateTimeline = ({ sequences, overrideIdsToNodePaths, compositions = [], }) => {
     var _a, _b;
-    var _c;
+    var _c, _d;
     const sortedSequences = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences);
     const tracks = [];
     if (sortedSequences.length === 0) {
         return [];
     }
+    const connectedCompositionsBySequenceId = new Map();
+    for (const sequence of sortedSequences) {
+        const connectedCompositions = (0, get_connected_compositions_1.getConnectedCompositions)({
+            compositions,
+            singleChildComponent: sequence.singleChildComponent,
+        });
+        if (connectedCompositions.length > 0) {
+            connectedCompositionsBySequenceId.set(sequence.id, connectedCompositions);
+        }
+    }
+    const sequencesById = new Map(sortedSequences.map((sequence) => [sequence.id, sequence]));
+    const timelineSequences = sortedSequences.filter((sequence) => {
+        var _a;
+        var _b;
+        let parentId = sequence.parent;
+        while (parentId !== null) {
+            if (connectedCompositionsBySequenceId.has(parentId)) {
+                return false;
+            }
+            parentId = (_b = (_a = sequencesById.get(parentId)) === null || _a === void 0 ? void 0 : _a.parent) !== null && _b !== void 0 ? _b : null;
+        }
+        return true;
+    });
     const sameHashes = {};
     const hashesUsedInRoot = {};
     const cache = {};
-    for (let i = 0; i < sortedSequences.length; i++) {
-        const sequence = sortedSequences[i];
+    for (let i = 0; i < timelineSequences.length; i++) {
+        const sequence = timelineSequences[i];
         if (!hashesUsedInRoot[sequence.rootId]) {
             hashesUsedInRoot[sequence.rootId] = [];
         }
@@ -51,7 +75,9 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         const overrideId = (_c = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _c !== void 0 ? _c : null;
         const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
         const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
+        const connectedCompositions = (_d = connectedCompositionsBySequenceId.get(sequence.id)) !== null && _d !== void 0 ? _d : [];
         tracks.push({
+            ...(connectedCompositions.length > 0 ? { connectedCompositions } : {}),
             sequence: {
                 ...sequence,
                 from: visibleStart,
@@ -81,10 +107,15 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
     }
     const uniqueTracks = [];
     for (const track of tracks) {
-        if (!uniqueTracks.find((t) => t.hash === track.hash)) {
+        const existingTrack = uniqueTracks.find((t) => t.hash === track.hash);
+        if (!existingTrack) {
             const { cascadedDuration, cascadedStart, ...cleanTrack } = track;
             uniqueTracks.push(cleanTrack);
         }
+        else if (existingTrack.connectedCompositions === undefined &&
+            track.connectedCompositions !== undefined) {
+            existingTrack.connectedCompositions = track.connectedCompositions;
+        }
     }
     const nonceRanks = new Map();
     for (let i = 0; i < tracks.length; i++) {

package/dist/{components/InspectorPanel/get-compositions-matching-single-child.d.ts → helpers/get-connected-compositions.d.ts}

@@ -1,4 +1,4 @@
-export declare const getCompositionsMatchingSingleChild: <Composition extends {
+export declare const getConnectedCompositions: <Composition extends {
     readonly componentFromProps?: unknown;
 }>({ compositions, singleChildComponent, }: {
     readonly compositions: readonly Composition[];

package/dist/{components/InspectorPanel/get-compositions-matching-single-child.js → helpers/get-connected-compositions.js}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCompositionsMatchingSingleChild = void 0;
-const getCompositionsMatchingSingleChild = ({ compositions, singleChildComponent, }) => {
+exports.getConnectedCompositions = void 0;
+const getConnectedCompositions = ({ compositions, singleChildComponent, }) => {
     if (singleChildComponent === null ||
         typeof singleChildComponent === 'undefined') {
         return [];
     }
     return compositions.filter((composition) => composition.componentFromProps === singleChildComponent);
 };
-exports.getCompositionsMatchingSingleChild = getCompositionsMatchingSingleChild;
+exports.getConnectedCompositions = getConnectedCompositions;

package/dist/helpers/get-sequence-double-click-action.d.ts

@@ -0,0 +1,12 @@
+import type { TSequence } from 'remotion';
+export type SequenceDoubleClickAction = 'open-connected-composition' | 'open-in-editor';
+export declare const getSequenceDoubleClickAction: ({ button, canOpenInEditor, numberOfConnectedCompositions, }: {
+    readonly button: number;
+    readonly canOpenInEditor: boolean;
+    readonly numberOfConnectedCompositions: number;
+}) => SequenceDoubleClickAction | null;
+export declare const getConnectedCompositionFrame: ({ timelinePosition, sequence, sequenceFrameOffset, }: {
+    readonly timelinePosition: number;
+    readonly sequence: TSequence;
+    readonly sequenceFrameOffset: number;
+}) => number | null;

package/dist/helpers/get-sequence-double-click-action.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConnectedCompositionFrame = exports.getSequenceDoubleClickAction = void 0;
+const getSequenceDoubleClickAction = ({ button, canOpenInEditor, numberOfConnectedCompositions, }) => {
+    if (button !== 0) {
+        return null;
+    }
+    if (numberOfConnectedCompositions === 1) {
+        return 'open-connected-composition';
+    }
+    return canOpenInEditor ? 'open-in-editor' : null;
+};
+exports.getSequenceDoubleClickAction = getSequenceDoubleClickAction;
+const getConnectedCompositionFrame = ({ timelinePosition, sequence, sequenceFrameOffset, }) => {
+    var _a;
+    const relativeFrame = timelinePosition - sequence.from;
+    if (relativeFrame < 0 || relativeFrame >= sequence.duration) {
+        return null;
+    }
+    return (_a = sequence.frozenFrame) !== null && _a !== void 0 ? _a : relativeFrame + sequenceFrameOffset;
+};
+exports.getConnectedCompositionFrame = getConnectedCompositionFrame;

package/dist/helpers/get-timeline-sequence-sort-key.d.ts

@@ -1,4 +1,4 @@
-import type { SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { _InternalTypes, SequencePropsSubscriptionKey, TSequence } from 'remotion';
 export type SequenceNodePathInfo = {
     sequenceSubscriptionKey: SequencePropsSubscriptionKey;
     auxiliaryKeys: string[];
@@ -8,6 +8,7 @@ export type SequenceNodePathInfo = {
 };
 type Track = {
     sequence: TSequence;
+    connectedCompositions?: readonly _InternalTypes['AnyComposition'][];
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
     keyframeDisplayOffset: number;

package/dist/helpers/inject-css.js

@@ -14,12 +14,10 @@ const makeDefaultGlobalCSS = () => {
 	    --remotion-cli-internals-blue: ${colors_1.BLUE};
 	    --remotion-cli-internals-blue-hovered: ${colors_1.BLUE_HOVERED};
 	    overscroll-behavior-y: none;
-	    overscroll-behavior-x: none;
 	  }
 
   body {
     overscroll-behavior-y: none;
-    overscroll-behavior-x: none;
     /* Override Chakra UI position: relative on body */
     position: static !important;
   }

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.492",
+	"version": "4.0.494",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.492",
-		"@remotion/canvas-capture": "4.0.492",
-		"@remotion/player": "4.0.492",
-		"@remotion/media-utils": "4.0.492",
-		"@remotion/renderer": "4.0.492",
-		"@remotion/web-renderer": "4.0.492",
-		"@remotion/studio-shared": "4.0.492",
-		"@remotion/timeline-utils": "4.0.492",
-		"@remotion/zod-types": "4.0.492",
+		"remotion": "4.0.494",
+		"@remotion/canvas-capture": "4.0.494",
+		"@remotion/player": "4.0.494",
+		"@remotion/media-utils": "4.0.494",
+		"@remotion/renderer": "4.0.494",
+		"@remotion/web-renderer": "4.0.494",
+		"@remotion/studio-shared": "4.0.494",
+		"@remotion/timeline-utils": "4.0.494",
+		"@remotion/zod-types": "4.0.494",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.492",
+		"@remotion/eslint-config-internal": "4.0.494",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/components/InspectorPanel/SequenceCompositionsSection.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const SequenceCompositionsSection: React.FC<{
-    readonly track: TrackWithHash;
-}>;

package/dist/components/InspectorPanel/SequenceCompositionsSection.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceCompositionsSection = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const remotion_1 = require("remotion");
-const CompositionOrStillIcon_1 = require("../CompositionOrStillIcon");
-const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
-const common_1 = require("./common");
-const get_compositions_matching_single_child_1 = require("./get-compositions-matching-single-child");
-const styles_1 = require("./styles");
-const compositionIconStyle = {
-    height: 13,
-    width: 13,
-};
-const compositionListStyle = {
-    ...styles_1.detailsContainer,
-    display: 'flex',
-    flexDirection: 'column',
-    paddingBottom: 6,
-    paddingTop: 6,
-};
-const SequenceCompositionsSection = ({ track }) => {
-    const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
-    const matchingCompositions = (0, react_1.useMemo)(() => (0, get_compositions_matching_single_child_1.getCompositionsMatchingSingleChild)({
-        compositions,
-        singleChildComponent: track.sequence.singleChildComponent,
-    }), [compositions, track.sequence.singleChildComponent]);
-    if (matchingCompositions.length === 0) {
-        return null;
-    }
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { style: styles_1.inspectorSectionDivider }), jsx_runtime_1.jsx("div", { style: compositionListStyle, children: matchingCompositions.map((composition) => (jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }, composition.id))) })
-        ] }));
-};
-exports.SequenceCompositionsSection = SequenceCompositionsSection;