@remotion/transitions 4.0.489 → 4.0.491

package/dist/esm/index.mjs

@@ -1097,7 +1097,7 @@ var springTiming = (options = {}) => {
   };
 };
 // src/TransitionSeries.tsx
-import { Children, useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import React4, { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
 import {
   Internals as Internals2,
   Interactive,
@@ -1153,19 +1153,78 @@ import { NoReactInternals } from "remotion/no-react";
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
-import { jsx as jsx4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs, Fragment } from "react/jsx-runtime";
 var { SequenceWithoutSchema } = Internals2;
-var TransitionSeriesTransition = function(_props) {
+var TransitionSeriesTransitionInner = ({
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props, stack });
+  }
   return null;
 };
-var SeriesOverlay = () => {
+var transitionSeriesTransitionSchema = {};
+var TransitionSeriesTransition = Interactive.withSchema({
+  Component: TransitionSeriesTransitionInner,
+  componentName: "<TransitionSeries.Transition>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Transition",
+  schema: transitionSeriesTransitionSchema,
+  supportsEffects: false
+});
+var SeriesOverlayInner = ({
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props, stack });
+  }
   return null;
 };
-var SeriesSequence = ({ children }) => {
+var transitionSeriesOverlaySchema = {};
+var SeriesOverlay = Interactive.withSchema({
+  Component: SeriesOverlayInner,
+  componentName: "<TransitionSeries.Overlay>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Overlay",
+  schema: transitionSeriesOverlaySchema,
+  supportsEffects: false
+});
+var transitionSeriesSequenceSchema = {
+  durationInFrames: Internals2.durationInFramesField,
+  name: Internals2.sequenceSchema.name,
+  hidden: Internals2.sequenceSchema.hidden,
+  showInTimeline: Internals2.sequenceSchema.showInTimeline,
+  freeze: Internals2.freezeField,
+  layout: Internals2.sequenceSchema.layout
+};
+var SeriesSequenceInner = ({
+  offset = 0,
+  className = "",
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({
+      ...props,
+      offset,
+      className: className || undefined,
+      stack
+    });
+  }
   return /* @__PURE__ */ jsx4(Fragment, {
-    children
+    children: props.children
   });
 };
+var SeriesSequence = Interactive.withSchema({
+  Component: SeriesSequenceInner,
+  componentName: "<TransitionSeries.Sequence>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Sequence",
+  schema: transitionSeriesSequenceSchema,
+  supportsEffects: false
+});
 var transitionSeriesSchema = {
   name: Internals2.sequenceSchema.name,
   hidden: Internals2.sequenceSchema.hidden,
@@ -1211,16 +1270,35 @@ var TransitionSeriesChildren = ({
     drawIfSynced(index);
   }, [drawIfSynced]);
   const childrenValue = useMemo4(() => {
-    let transitionOffsets = 0;
-    let startFrame = 0;
-    const overlayRenders = [];
-    const sequenceDurations = [];
-    let pendingOverlayValidation = false;
-    const mainChildren = Children.map(flattedChildren, (child, i) => {
+    const renderChildren = (state) => {
+      const {
+        index: i,
+        transitionOffsets,
+        startFrame,
+        overlayRenders,
+        sequenceDurations,
+        pendingOverlayValidation
+      } = state;
+      if (i === flattedChildren.length) {
+        return overlayRenders.map((info) => /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+          from: Math.round(info.overlayFrom),
+          durationInFrames: info.durationInFrames,
+          name: "<TS.Overlay>",
+          _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
+          _remotionInternalStack: info.stack ?? undefined,
+          controls: info.controls ?? undefined,
+          layout: "absolute-fill",
+          children: info.children
+        }, `overlay-${info.index}`));
+      }
+      const child = flattedChildren[i];
       const current = child;
+      const renderNext = (overrides = {}) => {
+        return renderChildren({ ...state, ...overrides, index: i + 1 });
+      };
       if (typeof current === "string") {
         if (current.trim() === "") {
-          return null;
+          return renderNext();
         }
         throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
       }
@@ -1239,45 +1317,53 @@ var TransitionSeriesChildren = ({
         if (nextIsTransition) {
           throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i} and ${i + 1})`);
         }
-        const overlayProps = current.props;
-        validateDurationInFrames(overlayProps.durationInFrames, {
-          component: `of a <TransitionSeries.Overlay /> component`,
-          allowFloats: false
-        });
-        const overlayOffset = overlayProps.offset ?? 0;
-        if (Number.isNaN(overlayOffset)) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
-        }
-        if (!Number.isFinite(overlayOffset)) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
-        }
-        if (overlayOffset % 1 !== 0) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
-        }
-        const cutPoint = startFrame + transitionOffsets;
-        const halfDuration = overlayProps.durationInFrames / 2;
-        const overlayFrom = cutPoint - halfDuration + overlayOffset;
-        if (overlayFrom < 0) {
-          throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
-        }
-        const prevSeqIdx = sequenceDurations.length - 1;
-        if (prevSeqIdx >= 0) {
-          const overlayStartInPrev = halfDuration - overlayOffset;
-          if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
-            throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+        const castedOverlay = current;
+        return React4.cloneElement(castedOverlay, {
+          _remotionInternalRender: (overlayProps) => {
+            validateDurationInFrames(overlayProps.durationInFrames, {
+              component: `of a <TransitionSeries.Overlay /> component`,
+              allowFloats: false
+            });
+            const overlayOffset = overlayProps.offset ?? 0;
+            if (Number.isNaN(overlayOffset)) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
+            }
+            if (!Number.isFinite(overlayOffset)) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
+            }
+            if (overlayOffset % 1 !== 0) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
+            }
+            const cutPoint = startFrame + transitionOffsets;
+            const halfDuration = overlayProps.durationInFrames / 2;
+            const overlayFrom = cutPoint - halfDuration + overlayOffset;
+            if (overlayFrom < 0) {
+              throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
+            }
+            const prevSeqIdx = sequenceDurations.length - 1;
+            if (prevSeqIdx >= 0) {
+              const overlayStartInPrev = halfDuration - overlayOffset;
+              if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
+                throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+              }
+            }
+            const overlayRender = {
+              cutPoint,
+              overlayFrom,
+              durationInFrames: overlayProps.durationInFrames,
+              overlayOffset,
+              halfDuration,
+              children: overlayProps.children,
+              index: i,
+              controls: overlayProps.controls,
+              stack: overlayProps.stack
+            };
+            return renderNext({
+              overlayRenders: [...overlayRenders, overlayRender],
+              pendingOverlayValidation: true
+            });
           }
-        }
-        pendingOverlayValidation = true;
-        overlayRenders.push({
-          cutPoint,
-          overlayFrom,
-          durationInFrames: overlayProps.durationInFrames,
-          overlayOffset,
-          halfDuration,
-          children: overlayProps.children,
-          index: i
         });
-        return null;
       }
       if (current.type === TransitionSeriesTransition) {
         if (prevIsTransition) {
@@ -1286,7 +1372,27 @@ var TransitionSeriesChildren = ({
         if (prevIsOverlay) {
           throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
         }
-        return null;
+        const castedTransition = current;
+        return React4.cloneElement(castedTransition, {
+          _remotionInternalRender: (transitionProps) => {
+            const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
+            const transitionFrom = startFrame + transitionOffsets - transitionDuration;
+            return /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                transitionDuration > 0 ? /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+                  from: transitionFrom,
+                  durationInFrames: transitionDuration,
+                  name: "<TS.Transition>",
+                  _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
+                  _remotionInternalStack: transitionProps.stack ?? undefined,
+                  controls: transitionProps.controls ?? undefined,
+                  layout: "none"
+                }) : null,
+                renderNext()
+              ]
+            });
+          }
+        });
       }
       if (current.type !== SeriesSequence) {
         throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence />, <TransitionSeries.Transition />, and <TransitionSeries.Overlay /> components as its children, but got ${current} instead`);
@@ -1294,186 +1400,219 @@ var TransitionSeriesChildren = ({
       const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined" ? null : hasPrev.type === TransitionSeriesTransition ? hasPrev : null;
       const next = typeof nextPrev === "string" || typeof nextPrev === "undefined" ? null : nextPrev.type === TransitionSeriesTransition ? nextPrev : null;
       const castedChildAgain = current;
-      const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
-      const durationInFramesProp = castedChildAgain.props.durationInFrames;
-      const {
-        durationInFrames,
-        children: _children,
-        from: _from,
-        ...passedProps
-      } = castedChildAgain.props;
-      validateDurationInFrames(durationInFramesProp, {
-        component: `of a <TransitionSeries.Sequence /> component`,
-        allowFloats: true
-      });
-      const offset = castedChildAgain.props.offset ?? 0;
-      if (Number.isNaN(offset)) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-      }
-      if (!Number.isFinite(offset)) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      if (offset % 1 !== 0) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      const currentStartFrame = startFrame + offset;
-      let duration = 0;
-      if (prev) {
-        duration = prev.props.timing.getDurationInFrames({
-          fps
-        });
-        transitionOffsets -= duration;
-      }
-      let actualStartFrame = currentStartFrame + transitionOffsets;
-      startFrame += durationInFramesProp + offset;
-      if (actualStartFrame < 0) {
-        startFrame -= actualStartFrame;
-        actualStartFrame = 0;
-      }
-      sequenceDurations.push(durationInFramesProp);
-      if (pendingOverlayValidation) {
-        pendingOverlayValidation = false;
-        const lastOverlay = overlayRenders[overlayRenders.length - 1];
-        const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
-        if (framesAfterCut > durationInFramesProp) {
-          throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
-        }
-      }
-      const nextProgress = next ? next.props.timing.getProgress({
-        frame: frame - actualStartFrame - durationInFrames + next.props.timing.getDurationInFrames({ fps }),
-        fps
-      }) : null;
-      const prevProgress = prev ? prev.props.timing.getProgress({
-        frame: frame - actualStartFrame,
-        fps
-      }) : null;
-      if (next && durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
-        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-      }
-      if (prev && durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
-        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-      }
-      if (next && prev && nextProgress !== null && prevProgress !== null) {
-        const nextPresentation = next.props.presentation ?? slide();
-        const prevPresentation = prev.props.presentation ?? slide();
-        const UppercaseNextPresentation = nextPresentation.component;
-        const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
-            passedProps: nextPresentation.props ?? {},
-            presentationDirection: "exiting",
-            presentationProgress: nextProgress,
-            presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            onElementImage: () => {
-              throw new Error("Should not call when exiting");
-            },
-            onUnmount: () => {
-              throw new Error("Should not call when exiting");
-            },
-            bothEnteringAndExiting: true,
-            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
-              presentationProgress: nextProgress,
+      return React4.cloneElement(castedChildAgain, {
+        _remotionInternalRender: (resolvedProps) => {
+          const durationInFramesProp = resolvedProps.durationInFrames;
+          const debugInfo = `index = ${i}, duration = ${durationInFramesProp}`;
+          const {
+            durationInFrames,
+            children: sequenceChildren,
+            offset: offsetProp,
+            controls,
+            stack,
+            from: _from,
+            ...passedProps
+          } = resolvedProps;
+          validateDurationInFrames(durationInFramesProp, {
+            component: `of a <TransitionSeries.Sequence /> component`,
+            allowFloats: true
+          });
+          const offset = offsetProp ?? 0;
+          if (Number.isNaN(offset)) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+          }
+          if (!Number.isFinite(offset)) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+          }
+          if (offset % 1 !== 0) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+          }
+          let resolvedTransitionOffsets = transitionOffsets;
+          let resolvedStartFrame = startFrame;
+          let resolvedPendingOverlayValidation = pendingOverlayValidation;
+          const currentStartFrame = resolvedStartFrame + offset;
+          let duration = 0;
+          if (prev) {
+            duration = prev.props.timing.getDurationInFrames({
+              fps
+            });
+            resolvedTransitionOffsets -= duration;
+          }
+          let actualStartFrame = currentStartFrame + resolvedTransitionOffsets;
+          resolvedStartFrame += durationInFramesProp + offset;
+          if (actualStartFrame < 0) {
+            resolvedStartFrame -= actualStartFrame;
+            actualStartFrame = 0;
+          }
+          const nextSequenceDurations = [
+            ...sequenceDurations,
+            durationInFramesProp
+          ];
+          if (resolvedPendingOverlayValidation) {
+            resolvedPendingOverlayValidation = false;
+            const lastOverlay = overlayRenders[overlayRenders.length - 1];
+            if (!lastOverlay) {
+              throw new Error("Expected an overlay to validate");
+            }
+            const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
+            if (framesAfterCut > durationInFramesProp) {
+              throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
+            }
+          }
+          const renderSequenceAndRest = (sequence) => {
+            return /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                sequence,
+                renderNext({
+                  transitionOffsets: resolvedTransitionOffsets,
+                  startFrame: resolvedStartFrame,
+                  sequenceDurations: nextSequenceDurations,
+                  pendingOverlayValidation: resolvedPendingOverlayValidation
+                })
+              ]
+            });
+          };
+          const nextProgress = next ? next.props.timing.getProgress({
+            frame: frame - actualStartFrame - durationInFrames + next.props.timing.getDurationInFrames({ fps }),
+            fps
+          }) : null;
+          const prevProgress = prev ? prev.props.timing.getProgress({
+            frame: frame - actualStartFrame,
+            fps
+          }) : null;
+          if (next && durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
+            throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+          }
+          if (prev && durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
+            throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+          }
+          if (next && prev && nextProgress !== null && prevProgress !== null) {
+            const nextPresentation = next.props.presentation ?? slide();
+            const prevPresentation = prev.props.presentation ?? slide();
+            const UppercaseNextPresentation = nextPresentation.component;
+            const UppercasePrevPresentation = prevPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
+              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+                passedProps: nextPresentation.props ?? {},
+                presentationDirection: "exiting",
+                presentationProgress: nextProgress,
+                presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+                onElementImage: () => {
+                  throw new Error("Should not call when exiting");
+                },
+                onUnmount: () => {
+                  throw new Error("Should not call when exiting");
+                },
+                bothEnteringAndExiting: true,
+                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                  presentationProgress: nextProgress,
+                  children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
+                    passedProps: prevPresentation.props ?? {},
+                    presentationDirection: "entering",
+                    presentationProgress: prevProgress,
+                    presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
+                    onElementImage: (elementImage, draw) => {
+                      onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                      onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                    },
+                    onUnmount: () => {
+                      onPrevElementImage(null, null, null, i + 1);
+                      onNextElementImage(null, null, null, i - 1);
+                    },
+                    bothEnteringAndExiting: true,
+                    children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                      presentationProgress: prevProgress,
+                      children: sequenceChildren
+                    })
+                  })
+                })
+              })
+            }, i));
+          }
+          if (prevProgress !== null && prev) {
+            const prevPresentation = prev.props.presentation ?? slide();
+            const UppercasePrevPresentation = prevPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
               children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
                 passedProps: prevPresentation.props ?? {},
                 presentationDirection: "entering",
                 presentationProgress: prevProgress,
                 presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-                onElementImage: (elementImage, draw) => {
-                  onPrevElementImage(elementImage, nextProgress, draw, i + 1);
-                  onNextElementImage(elementImage, prevProgress, draw, i - 1);
-                },
+                onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1),
                 onUnmount: () => {
-                  onPrevElementImage(null, null, null, i + 1);
                   onNextElementImage(null, null, null, i - 1);
                 },
-                bothEnteringAndExiting: true,
+                bothEnteringAndExiting: false,
                 children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
-                  children: child
+                  children: sequenceChildren
                 })
               })
-            })
-          })
-        }, i);
-      }
-      if (prevProgress !== null && prev) {
-        const prevPresentation = prev.props.presentation ?? slide();
-        const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
-            passedProps: prevPresentation.props ?? {},
-            presentationDirection: "entering",
-            presentationProgress: prevProgress,
-            presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-            onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1),
-            onUnmount: () => {
-              onNextElementImage(null, null, null, i - 1);
-            },
-            bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
-              presentationProgress: prevProgress,
-              children: child
-            })
-          })
-        }, i);
-      }
-      if (nextProgress !== null && next) {
-        const nextPresentation = next.props.presentation ?? slide();
-        const UppercaseNextPresentation = nextPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
-            passedProps: nextPresentation.props ?? {},
-            presentationDirection: "exiting",
-            presentationProgress: nextProgress,
-            presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1),
-            onUnmount: () => {
-              onPrevElementImage(null, null, null, i + 1);
-            },
-            bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
-              presentationProgress: nextProgress,
-              children: child
-            })
-          })
-        }, i);
-      }
-      return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-        from: actualStartFrame,
-        durationInFrames: durationInFramesProp,
-        ...passedProps,
-        name: passedProps.name || "<TS.Sequence>",
-        _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-        children: child
-      }, i);
-    });
-    const overlayElements = overlayRenders.map((overlayInfo) => {
-      const info = overlayInfo;
-      return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-        from: Math.round(info.overlayFrom),
-        durationInFrames: info.durationInFrames,
-        name: "<TS.Overlay>",
-        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
-        layout: "absolute-fill",
-        children: info.children
-      }, `overlay-${info.index}`);
+            }, i));
+          }
+          if (nextProgress !== null && next) {
+            const nextPresentation = next.props.presentation ?? slide();
+            const UppercaseNextPresentation = nextPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
+              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+                passedProps: nextPresentation.props ?? {},
+                presentationDirection: "exiting",
+                presentationProgress: nextProgress,
+                presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+                onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1),
+                onUnmount: () => {
+                  onPrevElementImage(null, null, null, i + 1);
+                },
+                bothEnteringAndExiting: false,
+                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                  presentationProgress: nextProgress,
+                  children: sequenceChildren
+                })
+              })
+            }, i));
+          }
+          return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+            from: actualStartFrame,
+            durationInFrames: durationInFramesProp,
+            ...passedProps,
+            name: passedProps.name || "<TS.Sequence>",
+            _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+            _remotionInternalStack: stack ?? undefined,
+            controls: controls ?? undefined,
+            children: sequenceChildren
+          }, i));
+        }
+      });
+    };
+    return renderChildren({
+      index: 0,
+      transitionOffsets: 0,
+      startFrame: 0,
+      overlayRenders: [],
+      sequenceDurations: [],
+      pendingOverlayValidation: false
     });
-    return [...mainChildren || [], ...overlayElements];
   }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
   return /* @__PURE__ */ jsx4(Fragment, {
     children: childrenValue
@@ -1515,7 +1654,6 @@ var TransitionSeries = Interactive.withSchema({
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
 TransitionSeries.Overlay = SeriesOverlay;
-Internals2.addSequenceStackTraces(TransitionSeries);
 // src/use-transition-progress.ts
 import React5 from "react";
 var useTransitionProgress = () => {