remotion 4.0.518 → 4.0.519

package/dist/cjs/Composition.js

@@ -8,6 +8,7 @@ const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const composition_render_error_context_js_1 = require("./composition-render-error-context.js");
 const CompositionErrorBoundary_js_1 = require("./CompositionErrorBoundary.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const Folder_js_1 = require("./Folder.js");
 const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const is_player_js_1 = require("./is-player.js");
@@ -56,7 +57,9 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
     const stack = (_b = compProps
         ._remotionInternalStack) !== null && _b !== void 0 ? _b : null;
-    const componentFromProps = 'component' in compProps ? compProps.component : null;
+    const componentFromProps = 'component' in compProps
+        ? (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(compProps.component)
+        : null;
     (0, react_1.useEffect)(() => {
         var _a;
         // Ensure it's a URL safe id

package/dist/cjs/enable-sequence-stack-traces.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
+type ComponentIdentityResolver = (component: unknown) => unknown;
 export declare const REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
 export declare const getComponentsToAddStacksTo: () => unknown[];
 export declare const addSequenceStackTraces: (component: unknown) => void;
 export declare const setSequenceComponent: (component: unknown) => void;
 export declare const getSequenceComponent: () => unknown;
+export declare const setComponentIdentityResolver: (resolver: ComponentIdentityResolver | null) => void;
+export declare const resolveComponentIdentity: (component: unknown) => unknown;
 export declare const setStackForControls: (controls: SequenceControls, stack: string | undefined) => void;
 export declare const getStackForControls: (controls: SequenceControls) => string | null;
 export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;
+export {};

package/dist/cjs/enable-sequence-stack-traces.js

@@ -3,11 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSingleChildComponent = exports.getStackForControls = exports.setStackForControls = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = exports.REMOTION_INTERNAL_STACK_PROP = void 0;
+exports.getSingleChildComponent = exports.getStackForControls = exports.setStackForControls = exports.resolveComponentIdentity = exports.setComponentIdentityResolver = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = exports.REMOTION_INTERNAL_STACK_PROP = void 0;
 const react_1 = __importDefault(require("react"));
 const componentsToAddStacksTo = [];
 let sequenceComponent = null;
 const stacksByControls = new WeakMap();
+// Studio installs a resolver that maps refreshed component implementations to
+// the stable family object maintained by React Refresh.
+let componentIdentityResolver = null;
 exports.REMOTION_INTERNAL_STACK_PROP = '_remotionInternalStack';
 const getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 exports.getComponentsToAddStacksTo = getComponentsToAddStacksTo;
@@ -21,6 +24,15 @@ const setSequenceComponent = (component) => {
 exports.setSequenceComponent = setSequenceComponent;
 const getSequenceComponent = () => sequenceComponent;
 exports.getSequenceComponent = getSequenceComponent;
+const setComponentIdentityResolver = (resolver) => {
+    componentIdentityResolver = resolver;
+};
+exports.setComponentIdentityResolver = setComponentIdentityResolver;
+const resolveComponentIdentity = (component) => {
+    var _a;
+    return (_a = componentIdentityResolver === null || componentIdentityResolver === void 0 ? void 0 : componentIdentityResolver(component)) !== null && _a !== void 0 ? _a : component;
+};
+exports.resolveComponentIdentity = resolveComponentIdentity;
 const setStackForControls = (controls, stack) => {
     if (stack === undefined) {
         stacksByControls.delete(controls);
@@ -46,6 +58,6 @@ const getSingleChildComponent = (children) => {
     if (typeof child.type !== 'function' && typeof child.type !== 'object') {
         return null;
     }
-    return child.type;
+    return (0, exports.resolveComponentIdentity)(child.type);
 };
 exports.getSingleChildComponent = getSingleChildComponent;

package/dist/cjs/index.d.ts

@@ -65,6 +65,7 @@ declare global {
         remotion_isPlayer: boolean;
         remotion_isStudio: boolean;
         remotion_isReadOnlyStudio: boolean;
+        remotion_enableSequenceStackTraces: (() => void) | null;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
         siteVersion: '11';

package/dist/cjs/internals.d.ts

@@ -1033,6 +1033,7 @@ export declare const Internals: {
     readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
     readonly getStackForControls: (controls: import("./CompositionManager.js").SequenceControls) => string | null;
     readonly REMOTION_INTERNAL_STACK_PROP: "_remotionInternalStack";
+    readonly setComponentIdentityResolver: (resolver: ((component: unknown) => unknown) | null) => void;
     readonly CurrentScaleContext: import("react").Context<({
         type: "scale";
         scale: number;

package/dist/cjs/internals.js

@@ -238,6 +238,7 @@ exports.Internals = {
     getSingleChildComponent: enable_sequence_stack_traces_js_1.getSingleChildComponent,
     getStackForControls: enable_sequence_stack_traces_js_1.getStackForControls,
     REMOTION_INTERNAL_STACK_PROP: enable_sequence_stack_traces_js_1.REMOTION_INTERNAL_STACK_PROP,
+    setComponentIdentityResolver: enable_sequence_stack_traces_js_1.setComponentIdentityResolver,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PixelDensityContext: use_pixel_density_js_1.PixelDensityContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,

package/dist/cjs/interpolate.js

@@ -509,11 +509,17 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
             // the active neighbor's axis prevents the axis from drifting while the
             // angle interpolates away from zero.
             const adjacentAxisRotation = parsed.values[0] === 0
-                ? index === segmentIndex
-                    ? initiallyParsedOutputRange[index + 1]
-                    : index === segmentIndex + 1
-                        ? initiallyParsedOutputRange[index - 1]
-                        : undefined
+                ? index === 0
+                    ? initiallyParsedOutputRange.find((candidate) => candidate.axisRotation)
+                    : index === initiallyParsedOutputRange.length - 1
+                        ? [...initiallyParsedOutputRange]
+                            .reverse()
+                            .find((candidate) => candidate.axisRotation)
+                        : index === segmentIndex
+                            ? initiallyParsedOutputRange[index + 1]
+                            : index === segmentIndex + 1
+                                ? initiallyParsedOutputRange[index - 1]
+                                : undefined
                 : undefined;
             const axis = (adjacentAxisRotation === null || adjacentAxisRotation === void 0 ? void 0 : adjacentAxisRotation.axisRotation)
                 ? adjacentAxisRotation.values

package/dist/cjs/spring/spring-utils.js

@@ -87,9 +87,6 @@ function springCalculation({ frame, fps, config = {}, }) {
     const frameClamped = Math.max(0, frame);
     const unevenRest = frameClamped % 1;
     for (let f = 0; f <= Math.floor(frameClamped); f++) {
-        if (f === Math.floor(frameClamped)) {
-            f += unevenRest;
-        }
         const time = (f / fps) * 1000;
         animation = advance({
             animation,
@@ -100,6 +97,16 @@ function springCalculation({ frame, fps, config = {}, }) {
             },
         });
     }
+    if (unevenRest > 0) {
+        animation = advance({
+            animation,
+            now: (frameClamped / fps) * 1000,
+            config: {
+                ...defaultSpringConfig,
+                ...config,
+            },
+        });
+    }
     calculationCache[cacheKey] = animation;
     return animation;
 }

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.518";
+export declare const VERSION = "4.0.519";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.518';
+exports.VERSION = '4.0.519';

package/dist/esm/index.mjs

@@ -160,6 +160,52 @@ var CompositionSetters = createContext4({
   onlyRenderComposition: null
 });
 
+// src/enable-sequence-stack-traces.ts
+import React3 from "react";
+var componentsToAddStacksTo = [];
+var sequenceComponent = null;
+var stacksByControls = new WeakMap;
+var componentIdentityResolver = null;
+var REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
+};
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var setComponentIdentityResolver = (resolver) => {
+  componentIdentityResolver = resolver;
+};
+var resolveComponentIdentity = (component) => {
+  return componentIdentityResolver?.(component) ?? component;
+};
+var setStackForControls = (controls, stack) => {
+  if (stack === undefined) {
+    stacksByControls.delete(controls);
+    return;
+  }
+  stacksByControls.set(controls, stack);
+};
+var getStackForControls = (controls) => {
+  return stacksByControls.get(controls) ?? null;
+};
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React3.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React3.isValidElement(child)) {
+    return null;
+  }
+  if (typeof child.type !== "function" && typeof child.type !== "object") {
+    return null;
+  }
+  return resolveComponentIdentity(child.type);
+};
+
 // src/Folder.tsx
 import { createContext as createContext6, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
 
@@ -471,7 +517,7 @@ var AbsoluteFillElementRefForwarding = (props, ref) => {
 var AbsoluteFillElement = forwardRef(AbsoluteFillElementRefForwarding);
 
 // src/use-current-scale.ts
-import React6, { createContext as createContext11 } from "react";
+import React7, { createContext as createContext11 } from "react";
 
 // src/portal-node.ts
 var _portalNode = null;
@@ -521,8 +567,8 @@ var portalNode = () => {
 import { useContext as useContext4, useState } from "react";
 
 // src/remotion-environment-context.ts
-import React4 from "react";
-var RemotionEnvironmentContext = React4.createContext(null);
+import React5 from "react";
+var RemotionEnvironmentContext = React5.createContext(null);
 
 // src/use-remotion-environment.ts
 var useRemotionEnvironment = () => {
@@ -601,7 +647,7 @@ var getInputProps = () => {
 };
 
 // src/EditorProps.tsx
-import React5, { createContext as createContext9, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import React6, { createContext as createContext9, useCallback as useCallback2, useMemo as useMemo4 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var EditorPropsContext = createContext9({
   props: {},
@@ -609,9 +655,9 @@ var EditorPropsContext = createContext9({
     throw new Error("Not implemented");
   }
 });
-var timeValueRef = React5.createRef();
+var timeValueRef = React6.createRef();
 var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React5.useState({});
+  const [props, setProps] = React6.useState({});
   const updateProps = useCallback2(({
     defaultProps,
     id,
@@ -885,7 +931,7 @@ var useUnsafeVideoConfig = () => {
 };
 
 // src/use-current-scale.ts
-var CurrentScaleContext = React6.createContext(null);
+var CurrentScaleContext = React7.createContext(null);
 var PreviewSizeContext = createContext11({
   setSize: () => {
     return;
@@ -910,12 +956,12 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React6.useContext(CurrentScaleContext);
-  const zoomContext = React6.useContext(PreviewSizeContext);
+  const hasContext = React7.useContext(CurrentScaleContext);
+  const zoomContext = React7.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
-  const [portalScale, setPortalScale] = React6.useState(getPortalNodeCurrentScale);
-  React6.useEffect(() => {
+  const [portalScale, setPortalScale] = React7.useState(getPortalNodeCurrentScale);
+  React7.useEffect(() => {
     const update = () => setPortalScale(getPortalNodeCurrentScale());
     update();
     return subscribeToPortalNodeCurrentScale(update);
@@ -1230,20 +1276,20 @@ var continueRender = (handle) => {
 
 // src/log-level-context.tsx
 import { createContext as createContext12 } from "react";
-import * as React7 from "react";
+import * as React8 from "react";
 var LogLevelContext = createContext12({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React7.useContext(LogLevelContext);
+  const { logLevel } = React8.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React7.useContext(LogLevelContext);
+  const { mountTime } = React8.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
@@ -1285,7 +1331,7 @@ var useDelayRender = () => {
 };
 
 // src/use-lazy-component.ts
-import React8, { useMemo as useMemo8, useRef as useRef2 } from "react";
+import React9, { useMemo as useMemo8, useRef as useRef2 } from "react";
 var useLazyComponent = ({
   compProps,
   componentName,
@@ -1305,7 +1351,7 @@ var useLazyComponent = ({
       }
       const Wrapper = (props) => {
         const Comp = componentRef.current;
-        return React8.createElement(Comp, props);
+        return React9.createElement(Comp, props);
       };
       return Wrapper;
     }
@@ -1313,7 +1359,7 @@ var useLazyComponent = ({
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React8.lazy(compProps.lazyComponent);
+      return React9.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.lazyComponent]);
@@ -1386,7 +1432,7 @@ var InnerComposition = ({
   }
   const { folderName, parentName } = useContext10(FolderContext);
   const stack = compProps._remotionInternalStack ?? null;
-  const componentFromProps = "component" in compProps ? compProps.component : null;
+  const componentFromProps = "component" in compProps ? resolveComponentIdentity(compProps.component) : null;
   useEffect2(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -1482,47 +1528,8 @@ var Composition = (props) => {
   });
 };
 
-// src/enable-sequence-stack-traces.ts
-import React10 from "react";
-var componentsToAddStacksTo = [];
-var sequenceComponent = null;
-var stacksByControls = new WeakMap;
-var REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
-};
-var setSequenceComponent = (component) => {
-  sequenceComponent = component;
-};
-var getSequenceComponent = () => sequenceComponent;
-var setStackForControls = (controls, stack) => {
-  if (stack === undefined) {
-    stacksByControls.delete(controls);
-    return;
-  }
-  stacksByControls.set(controls, stack);
-};
-var getStackForControls = (controls) => {
-  return stacksByControls.get(controls) ?? null;
-};
-var getSingleChildComponent = (children) => {
-  const mountedChildren = React10.Children.toArray(children);
-  if (mountedChildren.length !== 1) {
-    return null;
-  }
-  const child = mountedChildren[0];
-  if (!React10.isValidElement(child)) {
-    return null;
-  }
-  if (typeof child.type !== "function" && typeof child.type !== "object") {
-    return null;
-  }
-  return child.type;
-};
-
 // src/version.ts
-var VERSION = "4.0.518";
+var VERSION = "4.0.519";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -3259,7 +3266,7 @@ var interpolateString = ({
     if (parsed.dimensions !== 1) {
       throw new TypeError("Cannot interpolate a multi-angle rotate value with an axis rotation");
     }
-    const adjacentAxisRotation = parsed.values[0] === 0 ? index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
+    const adjacentAxisRotation = parsed.values[0] === 0 ? index === 0 ? initiallyParsedOutputRange.find((candidate) => candidate.axisRotation) : index === initiallyParsedOutputRange.length - 1 ? [...initiallyParsedOutputRange].reverse().find((candidate) => candidate.axisRotation) : index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
     const axis = adjacentAxisRotation?.axisRotation ? adjacentAxisRotation.values : [0, 0, 1];
     return {
       kind: "rotate",
@@ -3653,9 +3660,6 @@ function springCalculation({
   const frameClamped = Math.max(0, frame);
   const unevenRest = frameClamped % 1;
   for (let f = 0;f <= Math.floor(frameClamped); f++) {
-    if (f === Math.floor(frameClamped)) {
-      f += unevenRest;
-    }
     const time = f / fps * 1000;
     animation = advance({
       animation,
@@ -3666,6 +3670,16 @@ function springCalculation({
       }
     });
   }
+  if (unevenRest > 0) {
+    animation = advance({
+      animation,
+      now: frameClamped / fps * 1000,
+      config: {
+        ...defaultSpringConfig,
+        ...config
+      }
+    });
+  }
   calculationCache[cacheKey] = animation;
   return animation;
 }
@@ -13482,6 +13496,7 @@ var Internals = {
   getSingleChildComponent,
   getStackForControls,
   REMOTION_INTERNAL_STACK_PROP,
+  setComponentIdentityResolver,
   CurrentScaleContext,
   PixelDensityContext,
   PreviewSizeContext,

package/dist/esm/no-react.mjs

@@ -258,9 +258,6 @@ function springCalculation({
   const frameClamped = Math.max(0, frame);
   const unevenRest = frameClamped % 1;
   for (let f = 0;f <= Math.floor(frameClamped); f++) {
-    if (f === Math.floor(frameClamped)) {
-      f += unevenRest;
-    }
     const time = f / fps * 1000;
     animation = advance({
       animation,
@@ -271,6 +268,16 @@ function springCalculation({
       }
     });
   }
+  if (unevenRest > 0) {
+    animation = advance({
+      animation,
+      now: frameClamped / fps * 1000,
+      config: {
+        ...defaultSpringConfig,
+        ...config
+      }
+    });
+  }
   calculationCache[cacheKey] = animation;
   return animation;
 }
@@ -990,7 +997,7 @@ var interpolateString = ({
     if (parsed.dimensions !== 1) {
       throw new TypeError("Cannot interpolate a multi-angle rotate value with an axis rotation");
     }
-    const adjacentAxisRotation = parsed.values[0] === 0 ? index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
+    const adjacentAxisRotation = parsed.values[0] === 0 ? index === 0 ? initiallyParsedOutputRange.find((candidate) => candidate.axisRotation) : index === initiallyParsedOutputRange.length - 1 ? [...initiallyParsedOutputRange].reverse().find((candidate) => candidate.axisRotation) : index === segmentIndex ? initiallyParsedOutputRange[index + 1] : index === segmentIndex + 1 ? initiallyParsedOutputRange[index - 1] : undefined : undefined;
     const axis = adjacentAxisRotation?.axisRotation ? adjacentAxisRotation.values : [0, 0, 1];
     return {
       kind: "rotate",

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.518";
+var VERSION = "4.0.519";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.518",
+	"version": "4.0.519",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.4.3",
-		"@remotion/eslint-config-internal": "4.0.518",
+		"@remotion/eslint-config-internal": "4.0.519",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},