@remotion/studio 4.0.467 → 4.0.468

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.d.ts

@@ -4,4 +4,5 @@ import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-s
 export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -62,13 +62,13 @@ const diamondBase = {
     boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.4)',
     pointerEvents: 'none',
 };
-const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
+const getNodeKeyframes = ({ node, nodePath, codeValues, keyframeDisplayOffset, }) => {
     var _a, _b;
     if (node.kind !== 'field' || node.field === null) {
         return [];
     }
     if (node.field.kind === 'sequence-field') {
-        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key]);
+        return (0, get_timeline_keyframes_1.getTimelineKeyframes)((_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[node.field.key], keyframeDisplayOffset);
     }
     const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
         codeValues,
@@ -77,9 +77,9 @@ const getNodeKeyframes = ({ node, nodePath, codeValues, }) => {
     });
     return (0, get_timeline_keyframes_1.getTimelineKeyframes)(effectStatus.type === 'can-update-effect'
         ? (_b = effectStatus.props) === null || _b === void 0 ? void 0 : _b[node.field.key]
-        : null);
+        : null, keyframeDisplayOffset);
 };
-const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -104,9 +104,15 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
             node,
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             codeValues,
+            keyframeDisplayOffset,
         }),
         key: JSON.stringify(node.nodePathInfo),
-    })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+    })), [
+        codeValues,
+        flat,
+        keyframeDisplayOffset,
+        nodePathInfo.sequenceSubscriptionKey,
+    ]);
     return (jsx_runtime_1.jsx("div", { style: {
             height: expandedHeight + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
         }, children: jsx_runtime_1.jsx("div", { style: { ...section, height: expandedHeight }, children: rows.map(({ height, keyframes, key }, i) => {

package/dist/components/Timeline/TimelineTracks.js

@@ -69,7 +69,7 @@ const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo })) : null] }, track.sequence.id));
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
 exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/get-timeline-keyframes.d.ts

@@ -1,6 +1,6 @@
 import type { CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse } from 'remotion';
 export declare const getComputedStatusLabel: (propStatus: CanUpdateSequencePropStatusFalse) => string;
-export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined) => {
+export declare const getTimelineKeyframes: (propStatus: CanUpdateSequencePropStatus | null | undefined, keyframeDisplayOffset?: number) => {
     frame: number;
     value: unknown;
 }[];

package/dist/components/Timeline/get-timeline-keyframes.js

@@ -9,7 +9,7 @@ const getComputedStatusLabel = (propStatus) => {
     return ((_a = propStatus.keyframes) === null || _a === void 0 ? void 0 : _a.length) ? 'keyframed' : 'computed';
 };
 exports.getComputedStatusLabel = getComputedStatusLabel;
-const getTimelineKeyframes = (propStatus) => {
+const getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
     var _a;
     if (!propStatus || propStatus.canUpdate) {
         return [];
@@ -17,6 +17,13 @@ const getTimelineKeyframes = (propStatus) => {
     if (propStatus.reason !== 'computed') {
         throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
-    return (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    const keyframes = (_a = propStatus.keyframes) !== null && _a !== void 0 ? _a : [];
+    if (keyframeDisplayOffset === 0) {
+        return keyframes;
+    }
+    return keyframes.map((keyframe) => ({
+        ...keyframe,
+        frame: keyframe.frame + keyframeDisplayOffset,
+    }));
 };
 exports.getTimelineKeyframes = getTimelineKeyframes;

package/dist/esm/chunk-6jf1natv.js

@@ -0,0 +1,25 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __toESM, __require };

package/dist/esm/{chunk-vwnse6c9.js → chunk-8q828zk7.js}

@@ -1,6 +1,7 @@
 import {
-  __require
-} from "./chunk-5gtx3pza.js";
+  __require,
+  __toESM
+} from "./chunk-6jf1natv.js";
 
 // src/Studio.tsx
 import { useLayoutEffect as useLayoutEffect5 } from "react";
@@ -21951,6 +21952,7 @@ var calculateTimeline = ({
     const visibleDuration = getTimelineVisibleDuration(sequence, sortedSequences);
     const overrideId = sequence.controls?.overrideId ?? null;
     const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+    const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
     tracks.push({
       sequence: {
         ...sequence,
@@ -21962,6 +21964,7 @@ var calculateTimeline = ({
       hash: actualHash,
       cascadedStart,
       cascadedDuration: sequence.duration,
+      keyframeDisplayOffset: hasKeyframeRows ? cascadedStart - sequence.from : 0,
       nodePathInfo: nodePath ? {
         sequenceSubscriptionKey: nodePath,
         auxiliaryKeys: [],
@@ -23462,14 +23465,21 @@ var getComputedStatusLabel = (propStatus) => {
   }
   return propStatus.keyframes?.length ? "keyframed" : "computed";
 };
-var getTimelineKeyframes = (propStatus) => {
+var getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
   if (!propStatus || propStatus.canUpdate) {
     return [];
   }
   if (propStatus.reason !== "computed") {
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
   }
-  return propStatus.keyframes ?? [];
+  const keyframes = propStatus.keyframes ?? [];
+  if (keyframeDisplayOffset === 0) {
+    return keyframes;
+  }
+  return keyframes.map((keyframe) => ({
+    ...keyframe,
+    frame: keyframe.frame + keyframeDisplayOffset
+  }));
 };
 
 // src/components/Timeline/timeline-field-row-layout.ts
@@ -25720,22 +25730,23 @@ var diamondBase = {
 var getNodeKeyframes = ({
   node,
   nodePath,
-  codeValues
+  codeValues,
+  keyframeDisplayOffset
 }) => {
   if (node.kind !== "field" || node.field === null) {
     return [];
   }
   if (node.field.kind === "sequence-field") {
-    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key]);
+    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key], keyframeDisplayOffset);
   }
   const effectStatus = Internals63.getEffectCodeValuesCtx({
     codeValues,
     nodePath,
     effectIndex: node.field.effectIndex
   });
-  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null);
+  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null, keyframeDisplayOffset);
 };
-var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
   const videoConfig = useVideoConfig5();
   const timelineWidth = useContext83(TimelineWidthContext);
   const { getIsExpanded } = useContext83(ExpandedTracksGetterContext);
@@ -25759,10 +25770,16 @@ var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
     keyframes: getNodeKeyframes({
       node,
       nodePath: nodePathInfo.sequenceSubscriptionKey,
-      codeValues
+      codeValues,
+      keyframeDisplayOffset
     }),
     key: JSON.stringify(node.nodePathInfo)
-  })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+  })), [
+    codeValues,
+    flat,
+    keyframeDisplayOffset,
+    nodePathInfo.sequenceSubscriptionKey
+  ]);
   return /* @__PURE__ */ jsx225("div", {
     style: {
       height: expandedHeight + TIMELINE_ITEM_BORDER_BOTTOM
@@ -26867,7 +26884,8 @@ var TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                 }),
                 isExpanded && track.nodePathInfo && previewServerConnected ? /* @__PURE__ */ jsx233(TimelineExpandedTrackKeyframes, {
                   sequence: track.sequence,
-                  nodePathInfo: track.nodePathInfo
+                  nodePathInfo: track.nodePathInfo,
+                  keyframeDisplayOffset: track.keyframeDisplayOffset
                 }) : null
               ]
             }, track.sequence.id);

package/dist/esm/index.mjs

@@ -1,3 +1,19 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {

package/dist/esm/internals.mjs

@@ -1,3 +1,19 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
@@ -21955,6 +21971,7 @@ var calculateTimeline = ({
     const visibleDuration = getTimelineVisibleDuration(sequence, sortedSequences);
     const overrideId = sequence.controls?.overrideId ?? null;
     const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+    const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
     tracks.push({
       sequence: {
         ...sequence,
@@ -21966,6 +21983,7 @@ var calculateTimeline = ({
       hash: actualHash,
       cascadedStart,
       cascadedDuration: sequence.duration,
+      keyframeDisplayOffset: hasKeyframeRows ? cascadedStart - sequence.from : 0,
       nodePathInfo: nodePath ? {
         sequenceSubscriptionKey: nodePath,
         auxiliaryKeys: [],
@@ -23466,14 +23484,21 @@ var getComputedStatusLabel = (propStatus) => {
   }
   return propStatus.keyframes?.length ? "keyframed" : "computed";
 };
-var getTimelineKeyframes = (propStatus) => {
+var getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
   if (!propStatus || propStatus.canUpdate) {
     return [];
   }
   if (propStatus.reason !== "computed") {
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
   }
-  return propStatus.keyframes ?? [];
+  const keyframes = propStatus.keyframes ?? [];
+  if (keyframeDisplayOffset === 0) {
+    return keyframes;
+  }
+  return keyframes.map((keyframe) => ({
+    ...keyframe,
+    frame: keyframe.frame + keyframeDisplayOffset
+  }));
 };
 
 // src/components/Timeline/timeline-field-row-layout.ts
@@ -25724,22 +25749,23 @@ var diamondBase = {
 var getNodeKeyframes = ({
   node,
   nodePath,
-  codeValues
+  codeValues,
+  keyframeDisplayOffset
 }) => {
   if (node.kind !== "field" || node.field === null) {
     return [];
   }
   if (node.field.kind === "sequence-field") {
-    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key]);
+    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key], keyframeDisplayOffset);
   }
   const effectStatus = Internals63.getEffectCodeValuesCtx({
     codeValues,
     nodePath,
     effectIndex: node.field.effectIndex
   });
-  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null);
+  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null, keyframeDisplayOffset);
 };
-var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
   const videoConfig = useVideoConfig5();
   const timelineWidth = useContext83(TimelineWidthContext);
   const { getIsExpanded } = useContext83(ExpandedTracksGetterContext);
@@ -25763,10 +25789,16 @@ var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
     keyframes: getNodeKeyframes({
       node,
       nodePath: nodePathInfo.sequenceSubscriptionKey,
-      codeValues
+      codeValues,
+      keyframeDisplayOffset
     }),
     key: JSON.stringify(node.nodePathInfo)
-  })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+  })), [
+    codeValues,
+    flat,
+    keyframeDisplayOffset,
+    nodePathInfo.sequenceSubscriptionKey
+  ]);
   return /* @__PURE__ */ jsx225("div", {
     style: {
       height: expandedHeight + TIMELINE_ITEM_BORDER_BOTTOM
@@ -26871,7 +26903,8 @@ var TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                 }),
                 isExpanded && track.nodePathInfo && previewServerConnected ? /* @__PURE__ */ jsx233(TimelineExpandedTrackKeyframes, {
                   sequence: track.sequence,
-                  nodePathInfo: track.nodePathInfo
+                  nodePathInfo: track.nodePathInfo,
+                  keyframeDisplayOffset: track.keyframeDisplayOffset
                 }) : null
               ]
             }, track.sequence.id);

package/dist/esm/previewEntry.mjs

@@ -1,3 +1,19 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
@@ -22535,6 +22551,7 @@ var calculateTimeline = ({
     const visibleDuration = getTimelineVisibleDuration(sequence, sortedSequences);
     const overrideId = sequence.controls?.overrideId ?? null;
     const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+    const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
     tracks.push({
       sequence: {
         ...sequence,
@@ -22546,6 +22563,7 @@ var calculateTimeline = ({
       hash: actualHash,
       cascadedStart,
       cascadedDuration: sequence.duration,
+      keyframeDisplayOffset: hasKeyframeRows ? cascadedStart - sequence.from : 0,
       nodePathInfo: nodePath ? {
         sequenceSubscriptionKey: nodePath,
         auxiliaryKeys: [],
@@ -24046,14 +24064,21 @@ var getComputedStatusLabel = (propStatus) => {
   }
   return propStatus.keyframes?.length ? "keyframed" : "computed";
 };
-var getTimelineKeyframes = (propStatus) => {
+var getTimelineKeyframes = (propStatus, keyframeDisplayOffset = 0) => {
   if (!propStatus || propStatus.canUpdate) {
     return [];
   }
   if (propStatus.reason !== "computed") {
     throw new Error(`Unsupported prop status: ${propStatus.reason}`);
   }
-  return propStatus.keyframes ?? [];
+  const keyframes = propStatus.keyframes ?? [];
+  if (keyframeDisplayOffset === 0) {
+    return keyframes;
+  }
+  return keyframes.map((keyframe) => ({
+    ...keyframe,
+    frame: keyframe.frame + keyframeDisplayOffset
+  }));
 };
 
 // src/components/Timeline/timeline-field-row-layout.ts
@@ -26304,22 +26329,23 @@ var diamondBase = {
 var getNodeKeyframes = ({
   node,
   nodePath,
-  codeValues
+  codeValues,
+  keyframeDisplayOffset
 }) => {
   if (node.kind !== "field" || node.field === null) {
     return [];
   }
   if (node.field.kind === "sequence-field") {
-    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key]);
+    return getTimelineKeyframes(Internals63.getCodeValuesCtx(codeValues, nodePath)?.[node.field.key], keyframeDisplayOffset);
   }
   const effectStatus = Internals63.getEffectCodeValuesCtx({
     codeValues,
     nodePath,
     effectIndex: node.field.effectIndex
   });
-  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null);
+  return getTimelineKeyframes(effectStatus.type === "can-update-effect" ? effectStatus.props?.[node.field.key] : null, keyframeDisplayOffset);
 };
-var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
+var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
   const videoConfig = useVideoConfig5();
   const timelineWidth = useContext83(TimelineWidthContext);
   const { getIsExpanded } = useContext83(ExpandedTracksGetterContext);
@@ -26343,10 +26369,16 @@ var TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence }) => {
     keyframes: getNodeKeyframes({
       node,
       nodePath: nodePathInfo.sequenceSubscriptionKey,
-      codeValues
+      codeValues,
+      keyframeDisplayOffset
     }),
     key: JSON.stringify(node.nodePathInfo)
-  })), [codeValues, flat, nodePathInfo.sequenceSubscriptionKey]);
+  })), [
+    codeValues,
+    flat,
+    keyframeDisplayOffset,
+    nodePathInfo.sequenceSubscriptionKey
+  ]);
   return /* @__PURE__ */ jsx227("div", {
     style: {
       height: expandedHeight + TIMELINE_ITEM_BORDER_BOTTOM
@@ -27451,7 +27483,8 @@ var TimelineTracksInner = ({ timeline, hasBeenCut }) => {
                 }),
                 isExpanded && track.nodePathInfo && previewServerConnected ? /* @__PURE__ */ jsx235(TimelineExpandedTrackKeyframes, {
                   sequence: track.sequence,
-                  nodePathInfo: track.nodePathInfo
+                  nodePathInfo: track.nodePathInfo,
+                  keyframeDisplayOffset: track.keyframeDisplayOffset
                 }) : null
               ]
             }, track.sequence.id);

package/dist/esm/renderEntry.mjs

@@ -1,6 +1,7 @@
 import {
-  __require
-} from "./chunk-5gtx3pza.js";
+  __require,
+  __toESM
+} from "./chunk-6jf1natv.js";
 
 // src/renderEntry.tsx
 import { useContext, useEffect, useRef, useState } from "react";
@@ -206,7 +207,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-vwnse6c9.js").then(({ StudioInternals }) => {
+    import("./chunk-8q828zk7.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/calculate-timeline.js

@@ -46,6 +46,7 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
         const visibleDuration = (0, get_sequence_visible_range_1.getTimelineVisibleDuration)(sequence, sortedSequences);
         const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : null;
         const nodePath = overrideId ? overrideIdsToNodePaths[overrideId] : null;
+        const hasKeyframeRows = sequence.controls !== null || sequence.effects.length > 0;
         tracks.push({
             sequence: {
                 ...sequence,
@@ -59,6 +60,9 @@ const calculateTimeline = ({ sequences, overrideIdsToNodePaths, }) => {
             hash: actualHash,
             cascadedStart,
             cascadedDuration: sequence.duration,
+            keyframeDisplayOffset: hasKeyframeRows
+                ? cascadedStart - sequence.from
+                : 0,
             nodePathInfo: nodePath
                 ? {
                     sequenceSubscriptionKey: nodePath,

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

@@ -9,6 +9,7 @@ type Track = {
     sequence: TSequence;
     depth: number;
     nodePathInfo: SequenceNodePathInfo | null;
+    keyframeDisplayOffset: number;
 };
 export type TrackWithHash = Track & {
     hash: string;

package/package.json

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

package/dist/esm/chunk-5gtx3pza.js

@@ -1,9 +0,0 @@
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-export { __require };