remotion 4.0.491 → 4.0.492

package/dist/cjs/Composition.js

@@ -55,6 +55,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
     const stack = (_b = compProps.stack) !== null && _b !== void 0 ? _b : null;
+    const componentFromProps = 'component' in compProps ? compProps.component : null;
     (0, react_1.useEffect)(() => {
         var _a;
         // Ensure it's a URL safe id
@@ -74,6 +75,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
             nonce: nonce.get(),
             parentFolderName: parentName,
+            componentFromProps,
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
             stack,
@@ -92,6 +94,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         width,
         nonce,
         parentName,
+        componentFromProps,
         schema,
         compProps.calculateMetadata,
         stack,

package/dist/cjs/CompositionManager.d.ts

@@ -16,6 +16,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     folderName: string | null;
     parentFolderName: string | null;
     component: LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
+    componentFromProps?: unknown;
     nonce: NonceHistory;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
@@ -83,6 +84,7 @@ export type TSequence = {
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
     frozenFrame: number | null;
+    singleChildComponent?: unknown;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/Img.d.ts

@@ -82,6 +82,12 @@ export declare const imgSchema: {
     readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly src: {
+        readonly type: "asset";
+        readonly default: undefined;
+        readonly description: "Source";
+        readonly keyframable: false;
+    };
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number | undefined;

package/dist/cjs/Img.js

@@ -198,6 +198,12 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBe
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
+    src: {
+        type: 'asset',
+        default: undefined,
+        description: 'Source',
+        keyframable: false,
+    },
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
 };

package/dist/cjs/Sequence.d.ts

@@ -46,6 +46,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalDocumentationLink?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalSingleChildComponent?: unknown;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -19,7 +19,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
     var _a, _b, _c;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -210,6 +210,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
+                    singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
                 });
             }
             else {
@@ -241,6 +242,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
                     frozenMediaFrame,
+                    singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
                 });
             }
             return () => {
@@ -268,6 +270,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
             frozenFrame: registeredFrozenFrame,
+            singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
         });
         return () => {
             unregisterSequence(id);
@@ -301,6 +304,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         startMediaFrom,
         mediaFrameAtSequenceZero,
         frozenMediaFrame,
+        singleChildComponent,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/animated-image/AnimatedImage.js

@@ -17,6 +17,12 @@ const decode_image_js_1 = require("./decode-image.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
+    src: {
+        type: 'asset',
+        default: undefined,
+        description: 'Source',
+        keyframable: false,
+    },
     ...interactivity_schema_js_1.baseSchema,
     playbackRate: {
         type: 'number',

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

@@ -1,2 +1,6 @@
+import React from 'react';
 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 getSingleChildComponent: (children: React.ReactNode) => unknown;

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

@@ -1,10 +1,36 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
+exports.getSingleChildComponent = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
+const react_1 = __importDefault(require("react"));
 const componentsToAddStacksTo = [];
+let sequenceComponent = null;
 const getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 exports.getComponentsToAddStacksTo = getComponentsToAddStacksTo;
 const addSequenceStackTraces = (component) => {
     componentsToAddStacksTo.push(component);
 };
 exports.addSequenceStackTraces = addSequenceStackTraces;
+const setSequenceComponent = (component) => {
+    sequenceComponent = component;
+};
+exports.setSequenceComponent = setSequenceComponent;
+const getSequenceComponent = () => sequenceComponent;
+exports.getSequenceComponent = getSequenceComponent;
+const getSingleChildComponent = (children) => {
+    const mountedChildren = react_1.default.Children.toArray(children);
+    if (mountedChildren.length !== 1) {
+        return null;
+    }
+    const child = mountedChildren[0];
+    if (!react_1.default.isValidElement(child)) {
+        return null;
+    }
+    if (typeof child.type !== 'function' && typeof child.type !== 'object') {
+        return null;
+    }
+    return child.type;
+};
+exports.getSingleChildComponent = getSingleChildComponent;

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
-import type { ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
+import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -43,6 +43,7 @@ declare global {
         remotion_logLevel: LogLevel | undefined;
         remotion_projectName: string;
         remotion_cwd: string;
+        remotion_fileSystemPlatform: string | null;
         remotion_studioServerCommand: string;
         remotion_setFrame: (frame: number, composition: string, attempt: number) => void;
         remotion_attempt: number;
@@ -182,4 +183,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };

package/dist/cjs/index.js

@@ -154,5 +154,6 @@ exports.Config = new Proxy(proxyObj, {
 });
 Sequence_js_1.Sequence.displayName = 'Sequence';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Sequence_js_1.Sequence);
+(0, enable_sequence_stack_traces_js_1.setSequenceComponent)(Sequence_js_1.Sequence);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Composition_js_1.Composition);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Folder_js_1.Folder);

package/dist/cjs/interactivity-schema.d.ts

@@ -97,6 +97,12 @@ export type FontFamilyFieldSchema = {
     description?: string;
     keyframable?: false;
 };
+export type AssetFieldSchema = {
+    type: 'asset';
+    default: string | undefined;
+    description?: string;
+    keyframable?: false;
+};
 export type EnumFieldSchema = {
     type: 'enum';
     default: string;
@@ -126,7 +132,7 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | AssetFieldSchema | ArrayFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;

package/dist/cjs/internals.d.ts

@@ -6,7 +6,7 @@ import type { JsxComponentIdentity, TCompMetadata, TComposition, TRenderAsset, T
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
-import { type ArrayFieldSchema, type ArrayItemFieldSchema, type InteractivitySchemaField, type InteractivitySchema, type VisibleFieldSchema } from './interactivity-schema.js';
+import { type AssetFieldSchema, type ArrayFieldSchema, type ArrayItemFieldSchema, type InteractivitySchemaField, type InteractivitySchema, type VisibleFieldSchema } from './interactivity-schema.js';
 import type { LoggingContextValue } from './log-level-context.js';
 import type { NonceHistory } from './nonce.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
@@ -701,6 +701,8 @@ export declare const Internals: {
         buffering: import("react").RefObject<boolean>;
     } | null>;
     readonly getComponentsToAddStacksTo: () => unknown[];
+    readonly getSequenceComponent: () => unknown;
+    readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
     readonly PixelDensityContext: import("react").Context<number | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
@@ -930,4 +932,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -211,6 +211,8 @@ exports.Internals = {
     BufferingProvider: buffering_js_1.BufferingProvider,
     BufferingContextReact: buffering_js_1.BufferingContextReact,
     getComponentsToAddStacksTo: enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo,
+    getSequenceComponent: enable_sequence_stack_traces_js_1.getSequenceComponent,
+    getSingleChildComponent: enable_sequence_stack_traces_js_1.getSingleChildComponent,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PixelDensityContext: use_pixel_density_js_1.PixelDensityContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,

package/dist/cjs/use-schema.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeEffectiveSchemaValuesDotNotation = exports.isKeyframedStatus = exports.getStaticDragOverrideValue = exports.makeKeyframedDragOverride = exports.makeStaticDragOverride = exports.DEFAULT_LINEAR_EASING = void 0;
 const find_props_to_delete_js_1 = require("./find-props-to-delete.js");
 const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mode-value.js");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-status.js");
 exports.DEFAULT_LINEAR_EASING = {
     type: 'linear',
@@ -132,6 +133,11 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 shouldResortToDefaultValueIfUndefined: false,
             });
         }
+        if ((field === null || field === void 0 ? void 0 : field.type) === 'asset' &&
+            typeof value === 'string' &&
+            value.startsWith(input_props_serialization_js_1.FILE_TOKEN)) {
+            value = `${window.remotion_staticBase}/${value.slice(input_props_serialization_js_1.FILE_TOKEN.length)}`;
+        }
         if (value === undefined) {
             propsToDelete.add(key);
         }

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.491";
+export declare const VERSION = "4.0.492";

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.491';
+exports.VERSION = '4.0.492';

package/dist/esm/index.mjs

@@ -1184,6 +1184,7 @@ var InnerComposition = ({
   }
   const { folderName, parentName } = useContext9(FolderContext);
   const stack = compProps.stack ?? null;
+  const componentFromProps = "component" in compProps ? compProps.component : null;
   useEffect2(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -1201,6 +1202,7 @@ var InnerComposition = ({
       defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce.get(),
       parentFolderName: parentName,
+      componentFromProps,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null,
       stack
@@ -1219,6 +1221,7 @@ var InnerComposition = ({
     width,
     nonce,
     parentName,
+    componentFromProps,
     schema,
     compProps.calculateMetadata,
     stack,
@@ -1278,14 +1281,34 @@ var Composition = (props) => {
 };
 
 // src/enable-sequence-stack-traces.ts
+import React9 from "react";
 var componentsToAddStacksTo = [];
+var sequenceComponent = null;
 var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React9.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React9.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.491";
+var VERSION = "4.0.492";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1949,9 +1972,9 @@ var PremountContext = createContext14({
 });
 
 // src/SequenceManager.tsx
-import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var SequenceManager = React11.createContext({
+var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -1960,19 +1983,19 @@ var SequenceManager = React11.createContext({
   },
   sequences: []
 });
-var SequenceManagerRefContext = React11.createContext({
+var SequenceManagerRefContext = React12.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React11.createContext({
+var VisualModePropStatusesContext = React12.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React11.createContext({
+var VisualModePropStatusesRefContext = React12.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React11.createContext({
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -1980,7 +2003,7 @@ var VisualModeDragOverridesContext = React11.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React11.createContext({
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -2132,7 +2155,7 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/series/is-inside-series.tsx
-import React12, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext15 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var IsInsideSeriesContext = createContext15(false);
 var IsInsideSeriesContainer = ({ children }) => {
@@ -2148,7 +2171,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React13.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -2158,7 +2181,7 @@ var useRequireToBeInsideSeries = () => {
 var ENABLE_V5_BREAKING_CHANGES = false;
 
 // src/with-interactivity-schema.ts
-import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
 
 // src/delete-nested-key.ts
 var deleteNestedKey = (obj, keysToRemove) => {
@@ -4262,6 +4285,9 @@ var computeEffectiveSchemaValuesDotNotation = ({
         shouldResortToDefaultValueIfUndefined: false
       });
     }
+    if (field?.type === "asset" && typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      value = `${window.remotion_staticBase}/${value.slice(FILE_TOKEN.length)}`;
+    }
     if (value === undefined) {
       propsToDelete.add(key);
     }
@@ -4362,7 +4388,7 @@ var withInteractivitySchema = ({
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         controls: null,
         ref
@@ -4373,7 +4399,7 @@ var withInteractivitySchema = ({
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
-      return React13.createElement(Component, {
+      return React14.createElement(Component, {
         ...props,
         ref
       });
@@ -4431,7 +4457,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React14.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -4460,6 +4486,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalDocumentationLink: documentationLink,
+  _remotionInternalSingleChildComponent: singleChildComponent,
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
@@ -4606,7 +4633,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           refForOutline: refForOutline ?? null,
           isInsideSeries,
-          frozenFrame: registeredFrozenFrame
+          frozenFrame: registeredFrozenFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       } else {
         registerSequence({
@@ -4636,7 +4664,8 @@ var RegularSequenceRefForwardingFunction = ({
           refForOutline: refForOutline ?? null,
           isInsideSeries,
           frozenFrame: registeredFrozenFrame,
-          frozenMediaFrame
+          frozenMediaFrame,
+          singleChildComponent: singleChildComponent ?? null
         });
       }
       return () => {
@@ -4663,7 +4692,8 @@ var RegularSequenceRefForwardingFunction = ({
       effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
       refForOutline: refForOutline ?? null,
       isInsideSeries,
-      frozenFrame: registeredFrozenFrame
+      frozenFrame: registeredFrozenFrame,
+      singleChildComponent: singleChildComponent ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -4696,7 +4726,8 @@ var RegularSequenceRefForwardingFunction = ({
     registeredFrozenFrame,
     startMediaFrom,
     mediaFrameAtSequenceZero,
-    frozenMediaFrame
+    frozenMediaFrame,
+    singleChildComponent
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -4836,7 +4867,7 @@ import {
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React15, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -5227,7 +5258,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/decode-image.ts
 var CACHE_SIZE = 5;
@@ -5397,6 +5428,12 @@ var resolveAnimatedImageSource = (src) => {
 // src/animated-image/AnimatedImage.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var animatedImageSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   playbackRate: {
     type: "number",
@@ -5841,11 +5878,11 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React16.useContext(LoopContext);
+  return React17.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -6289,7 +6326,7 @@ var DurationsContextProvider = ({ children }) => {
 
 // src/audio/AudioForPreview.tsx
 import { useCallback as useCallback13 } from "react";
-import React22, {
+import React23, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -6321,7 +6358,7 @@ var getCrossOriginValue = ({
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React19, {
+import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
@@ -6756,7 +6793,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -6926,7 +6963,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React19.createRef();
+    const el = React20.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -6945,7 +6982,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -7450,7 +7487,7 @@ import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
 
 // src/buffering.tsx
-import React20, {
+import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -7545,7 +7582,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React20.createContext(null);
+var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -7765,9 +7802,9 @@ var getMediaSyncAction = (input) => {
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React21 from "react";
+import React22 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React21.useRef({
+  const lastUpdate = React22.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -8545,7 +8582,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
+  const effectToUse = React23.useInsertionEffect ?? React23.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -10187,6 +10224,12 @@ var NativeImgInner = ({
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  src: {
+    type: "asset",
+    default: undefined,
+    description: "Source",
+    keyframable: false
+  },
   ...baseSchema,
   ...transformSchema
 };
@@ -10332,7 +10375,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React29, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
+import React30, { forwardRef as forwardRef12, useCallback as useCallback20, useRef as useRef25 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -10400,7 +10443,7 @@ var makeInteractiveElement = (tag, displayName) => {
       _remotionInternalStack: stack,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
       outlineRef: refForOutline,
-      children: React29.createElement(tag, {
+      children: React30.createElement(tag, {
         ...props2,
         ref: callbackRef
       })
@@ -10468,8 +10511,8 @@ var Interactive = {
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React30 from "react";
-var compositionsRef = React30.createRef();
+import React31 from "react";
+var compositionsRef = React31.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
@@ -10634,8 +10677,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React31 from "react";
-var MaxMediaCacheSizeContext = React31.createContext(null);
+import React32 from "react";
+var MaxMediaCacheSizeContext = React32.createContext(null);
 
 // src/register-root.ts
 var Root = null;
@@ -10940,8 +10983,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React33 from "react";
-var SequenceStackTracesUpdateContext = React33.createContext(() => {});
+import React34 from "react";
+var SequenceStackTracesUpdateContext = React34.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -10971,8 +11014,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React34, { createContext as createContext25 } from "react";
-var CurrentScaleContext = React34.createContext(null);
+import React35, { createContext as createContext25 } from "react";
+var CurrentScaleContext = React35.createContext(null);
 var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
@@ -10997,8 +11040,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React34.useContext(CurrentScaleContext);
-  const zoomContext = React34.useContext(PreviewSizeContext);
+  const hasContext = React35.useContext(CurrentScaleContext);
+  const zoomContext = React35.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -11028,8 +11071,8 @@ var useCurrentScale = (options) => {
 };
 
 // src/use-pixel-density.ts
-import React35, { useContext as useContext35 } from "react";
-var PixelDensityContext = React35.createContext(null);
+import React36, { useContext as useContext35 } from "react";
+var PixelDensityContext = React36.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -11283,7 +11326,7 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React37, {
+import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
   useContext as useContext37,
@@ -11356,7 +11399,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React37.useInsertionEffect ?? React37.useLayoutEffect;
+  const effectToUse = React38.useInsertionEffect ?? React38.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -11772,23 +11815,23 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React39, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo37 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React39.useContext(CompositionManager);
-  const timelineContext = React39.useContext(TimelineContext);
-  const setTimelineContext = React39.useContext(SetTimelineContext);
-  const sequenceContext = React39.useContext(SequenceContext);
-  const nonceContext = React39.useContext(NonceContext);
-  const canUseRemotionHooksContext = React39.useContext(CanUseRemotionHooks);
-  const preloadContext = React39.useContext(PreloadContext);
-  const resolveCompositionContext = React39.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React39.useContext(RenderAssetManager);
-  const sequenceManagerContext = React39.useContext(SequenceManager);
-  const sequenceManagerRefContext = React39.useContext(SequenceManagerRefContext);
-  const visualModePropStatusesRefContext = React39.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React39.useContext(BufferingContextReact);
-  const logLevelContext = React39.useContext(LogLevelContext);
+  const compositionManagerCtx = React40.useContext(CompositionManager);
+  const timelineContext = React40.useContext(TimelineContext);
+  const setTimelineContext = React40.useContext(SetTimelineContext);
+  const sequenceContext = React40.useContext(SequenceContext);
+  const nonceContext = React40.useContext(NonceContext);
+  const canUseRemotionHooksContext = React40.useContext(CanUseRemotionHooks);
+  const preloadContext = React40.useContext(PreloadContext);
+  const resolveCompositionContext = React40.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React40.useContext(RenderAssetManager);
+  const sequenceManagerContext = React40.useContext(SequenceManager);
+  const sequenceManagerRefContext = React40.useContext(SequenceManagerRefContext);
+  const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React40.useContext(BufferingContextReact);
+  const logLevelContext = React40.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -11964,6 +12007,8 @@ var Internals = {
   BufferingProvider,
   BufferingContextReact,
   getComponentsToAddStacksTo,
+  getSequenceComponent,
+  getSingleChildComponent,
   CurrentScaleContext,
   PixelDensityContext,
   PreviewSizeContext,
@@ -12021,17 +12066,17 @@ var Internals = {
   fromField
 };
 // src/series/index.tsx
-import React41, {
+import React42, {
   forwardRef as forwardRef14,
   useMemo as useMemo38
 } from "react";
 
 // src/series/flatten-children.tsx
-import React40 from "react";
+import React41 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React40.Children.toArray(children);
+  const childrenArray = React41.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React40.Fragment) {
+    if (child.type === React41.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -12122,7 +12167,7 @@ var SeriesInner = (props2) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React41.cloneElement(castedElement, {
+      return React42.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const {
@@ -12276,14 +12321,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React42 from "react";
+import React43 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React42.createElement(Composition, newProps);
+  return React43.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
@@ -12790,6 +12835,7 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+setSequenceComponent(Sequence);
 addSequenceStackTraces(Composition);
 addSequenceStackTraces(Folder);
 export {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.491";
+var VERSION = "4.0.492";
 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.491",
+	"version": "4.0.492",
 	"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.3.6",
-		"@remotion/eslint-config-internal": "4.0.491",
+		"@remotion/eslint-config-internal": "4.0.492",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},