remotion 4.0.506 → 4.0.508

package/README.md

@@ -48,6 +48,7 @@ Remotion is extensively documented over more than 1000 pages.
   - [Prompts](https://www.remotion.dev/prompts)
   - [Templates](https://remotion.dev/templates)
 - Components
+  - [Elements](https://remotion.dev/elements)
   - [Effects](https://remotion.dev/effects)
   - [Shapes](https://remotion.dev/docs/shapes)
   - [Transitions](https://remotion.dev/transitions)

package/dist/cjs/Interactive.d.ts

@@ -296,6 +296,11 @@ export declare const Interactive: {
         };
     };
     svgPaintSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";
@@ -316,6 +321,11 @@ export declare const Interactive: {
         };
     };
     svgStrokeSchema: {
+        readonly color: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Current color";
+        };
         readonly stroke: {
             readonly type: "color";
             readonly default: "none";

package/dist/cjs/SequenceManager.d.ts

@@ -22,12 +22,18 @@ export type VisualModeDragOverrides = {
     getDragOverrides: GetDragOverrides;
     getEffectDragOverrides: GetEffectDragOverrides;
 };
+export type SequencePropsStatusRemapping = {
+    previousNodePath: SequencePropsSubscriptionKey;
+    nodePath: SequencePropsSubscriptionKey | null;
+    result: CanUpdateSequencePropsResponse | null;
+};
 export type VisualModeSetters = {
     setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: DragOverrideValue) => void;
     clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
     setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: DragOverrideValue) => void;
     clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
     setPropStatuses: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
+    remapPropStatuses: (remappings: readonly SequencePropsStatusRemapping[]) => void;
 };
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;

package/dist/cjs/SequenceManager.js

@@ -82,6 +82,9 @@ exports.VisualModeSettersContext = react_1.default.createContext({
     setPropStatuses: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
+    remapPropStatuses: () => {
+        throw new Error('VisualModeSettersContext not initialized');
+    },
 });
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
@@ -149,6 +152,21 @@ const SequenceManagerProvider = ({ children }) => {
             return { ...prev, [key]: newKey };
         });
     }, []);
+    const remapPropStatuses = (0, react_1.useCallback)((remappings) => {
+        setPropStatusesMapState((prev) => {
+            const next = { ...prev };
+            for (const remapping of remappings) {
+                delete next[(0, exports.makeSequencePropsSubscriptionKey)(remapping.previousNodePath)];
+            }
+            for (const remapping of remappings) {
+                if (remapping.nodePath !== null && remapping.result !== null) {
+                    next[(0, exports.makeSequencePropsSubscriptionKey)(remapping.nodePath)] =
+                        remapping.result;
+                }
+            }
+            return next;
+        });
+    }, []);
     const registerSequence = (0, react_1.useCallback)((seq) => {
         setSequences((seqs) => {
             return [...seqs, seq];
@@ -190,6 +208,7 @@ const SequenceManagerProvider = ({ children }) => {
             setEffectDragOverrides,
             clearEffectDragOverrides,
             setPropStatuses,
+            remapPropStatuses,
         };
     }, [
         setDragOverrides,
@@ -197,6 +216,7 @@ const SequenceManagerProvider = ({ children }) => {
         setEffectDragOverrides,
         clearEffectDragOverrides,
         setPropStatuses,
+        remapPropStatuses,
     ]);
     return (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
 };

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,6 +1,7 @@
 import React, { type AudioHTMLAttributes } from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 import type { RemotionAudioContextState } from './use-audio-context.js';
+import { type AudioContextResumeResult } from './wait-until-actually-resumed.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -58,7 +59,7 @@ type SharedAudioContextValue = {
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
     suspend: () => Promise<void>;
-    getIsResumingAudioContext: () => Promise<void> | null;
+    getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
 };
 type SharedAudioTagsContextValue = {

package/dist/cjs/audio/shared-audio-tags.js

@@ -105,6 +105,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     });
     const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
     const isResuming = (0, react_1.useRef)(null);
+    const nextResumeAttemptId = (0, react_1.useRef)(0);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
     const audioSyncAnchorListeners = (0, react_1.useRef)([]);
     const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
@@ -203,24 +204,39 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         });
         nodesToResume.current.clear();
         const resumePromise = ctxAndGain.resume();
-        isResuming.current = new Promise((resolve) => {
-            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
+        const abortController = new AbortController();
+        const resumeAttemptId = nextResumeAttemptId.current++;
+        const waitPromise = new Promise((resolve) => {
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
             resumePromise.catch((err) => {
-                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, continuing without audio sync', err);
-                resolve();
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, muting playback and continuing without audio', err);
+                abortController.abort();
+                resolve('failed');
             });
         }).finally(() => {
-            isResuming.current = null;
+            var _a;
+            if (((_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.id) === resumeAttemptId) {
+                isResuming.current = null;
+            }
         });
+        isResuming.current = {
+            abortController,
+            id: resumeAttemptId,
+            promise: waitPromise,
+        };
         return resumePromise.catch(() => {
             // Already logged above; swallow to avoid unhandled rejection
             // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, logLevel]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
-        return isResuming.current;
+        var _a;
+        var _b;
+        return (_b = (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : null;
     }, []);
     const suspend = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = isResuming.current) === null || _a === void 0 ? void 0 : _a.abortController.abort();
         if (!ctxAndGain) {
             return Promise.resolve();
         }

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -1 +1,2 @@
-export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn") => Promise<void>;
+export type AudioContextResumeResult = 'resumed' | 'cancelled' | 'failed';
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal) => Promise<AudioContextResumeResult>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -2,15 +2,36 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitUntilActuallyResumed = void 0;
 const log_js_1 = require("../log.js");
-const waitUntilActuallyResumed = (audioContext, logLevel) => {
+const RESUME_WAIT_TIMEOUT = 1000;
+const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
     return new Promise((resolve) => {
         const startCurrentTime = audioContext.currentTime;
         const start = audioContext.getOutputTimestamp();
         const startOutputPerformanceTime = start.performanceTime;
         const startWallClock = performance.now();
+        let animationFrame = null;
+        let timeout = null;
+        let settled = false;
+        let onAbort = () => undefined;
+        const finish = (result) => {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            if (animationFrame !== null) {
+                cancelAnimationFrame(animationFrame);
+            }
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            signal.removeEventListener('abort', onAbort);
+            resolve(result);
+        };
+        onAbort = () => finish('cancelled');
         const check = () => {
             var _a;
             var _b;
+            animationFrame = null;
             const { currentTime } = audioContext;
             const outputTimestamp = audioContext.getOutputTimestamp();
             const elapsedWallClock = performance.now() - startWallClock;
@@ -20,12 +41,21 @@ const waitUntilActuallyResumed = (audioContext, logLevel) => {
                 outputTimestamp.contextTime !== undefined &&
                 outputTimestamp.contextTime > startCurrentTime) {
                 log_js_1.Log.verbose({ logLevel, tag: 'audio' }, `waitUntilActuallyResumed: getOutputTimestamp.performanceTime advanced from ${startOutputPerformanceTime.toFixed(6)} to ${outputTimestamp.performanceTime.toFixed(6)} after ${elapsedWallClock.toFixed(1)}ms. currentTime=${currentTime.toFixed(6)} (advanced by ${(currentTime - startCurrentTime).toFixed(6)}), getOutputTimestamp.performanceTime=${(_b = (_a = outputTimestamp.performanceTime) === null || _a === void 0 ? void 0 : _a.toFixed(1)) !== null && _b !== void 0 ? _b : 'undefined'}`);
-                resolve();
+                finish('resumed');
                 return;
             }
-            requestAnimationFrame(check);
+            animationFrame = requestAnimationFrame(check);
         };
-        requestAnimationFrame(check);
+        if (signal.aborted) {
+            finish('cancelled');
+            return;
+        }
+        signal.addEventListener('abort', onAbort, { once: true });
+        timeout = setTimeout(() => {
+            log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
+            finish('failed');
+        }, RESUME_WAIT_TIMEOUT);
+        animationFrame = requestAnimationFrame(check);
     });
 };
 exports.waitUntilActuallyResumed = waitUntilActuallyResumed;

package/dist/cjs/buffering.js

@@ -41,8 +41,14 @@ const playback_logging_1 = require("./playback-logging");
 const use_remotion_environment_1 = require("./use-remotion-environment");
 const useBufferManager = (logLevel, mountTime) => {
     const [blocks, setBlocks] = (0, react_1.useState)([]);
-    const [onBufferingCallbacks, setOnBufferingCallbacks] = (0, react_1.useState)([]);
-    const [onResumeCallbacks, setOnResumeCallbacks] = (0, react_1.useState)([]);
+    // Listener registries are refs, not state: `usePlayback` parks its loop
+    // during buffering and registers its resume listener from a rAF callback.
+    // With state, that registration only lands after the next React commit -
+    // if the last block unblocks before then, the resume dispatch reads the
+    // previous array, the listener is never called, and the playback loop
+    // stays parked forever (frame clock frozen while isPlaying() is true).
+    const onBufferingCallbacks = (0, react_1.useRef)([]);
+    const onResumeCallbacks = (0, react_1.useRef)([]);
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     const rendering = env.isRendering;
     const buffering = (0, react_1.useRef)(false);
@@ -71,18 +77,21 @@ const useBufferManager = (logLevel, mountTime) => {
         };
     }, [rendering]);
     const listenForBuffering = (0, react_1.useCallback)((callback) => {
-        setOnBufferingCallbacks((c) => [...c, callback]);
+        onBufferingCallbacks.current = [
+            ...onBufferingCallbacks.current,
+            callback,
+        ];
         return {
             remove: () => {
-                setOnBufferingCallbacks((c) => c.filter((cb) => cb !== callback));
+                onBufferingCallbacks.current = onBufferingCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
     const listenForResume = (0, react_1.useCallback)((callback) => {
-        setOnResumeCallbacks((c) => [...c, callback]);
+        onResumeCallbacks.current = [...onResumeCallbacks.current, callback];
         return {
             remove: () => {
-                setOnResumeCallbacks((c) => c.filter((cb) => cb !== callback));
+                onResumeCallbacks.current = onResumeCallbacks.current.filter((cb) => cb !== callback);
             },
         };
     }, []);
@@ -95,7 +104,7 @@ const useBufferManager = (logLevel, mountTime) => {
         // not re-dispatch `waiting` to listeners.
         if (blocks.length > 0 && !buffering.current) {
             buffering.current = true;
-            onBufferingCallbacks.forEach((c) => c());
+            [...onBufferingCallbacks.current].forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
                 message: 'Player is entering buffer state',
@@ -119,7 +128,7 @@ const useBufferManager = (logLevel, mountTime) => {
             // dispatch `resume` to listeners.
             if (blocks.length === 0 && buffering.current) {
                 buffering.current = false;
-                onResumeCallbacks.forEach((c) => c());
+                [...onResumeCallbacks.current].forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
                     message: 'Player is exiting buffer state',

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

@@ -386,6 +386,11 @@ export declare const backgroundSchema: {
     };
 };
 export declare const svgStrokeSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";
@@ -401,6 +406,11 @@ export declare const svgStrokeSchema: {
     };
 };
 export declare const svgPaintSchema: {
+    readonly color: {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Current color";
+    };
     readonly stroke: {
         readonly type: "color";
         readonly default: "none";

package/dist/cjs/interactivity-schema.js

@@ -208,7 +208,15 @@ exports.backgroundSchema = {
         description: 'Color',
     },
 };
+const svgColorSchema = {
+    color: {
+        type: 'color',
+        default: undefined,
+        description: 'Current color',
+    },
+};
 exports.svgStrokeSchema = {
+    ...svgColorSchema,
     stroke: {
         type: 'color',
         // `none` is the SVG initial value of stroke.

package/dist/cjs/internals.d.ts

@@ -14,7 +14,7 @@ import type { OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSe
 import { OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext } from './sequence-node-path.js';
 import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
-import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type VideoConfigValues } from './SequenceManager.js';
+import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type SequencePropsStatusRemapping, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineImperativeContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
@@ -26,6 +26,8 @@ import { useRemotionContexts } from './wrap-remotion-context.js';
 export type { EffectChainState } from './effects/run-effect-chain.js';
 export declare const Internals: {
     readonly MaxMediaCacheSizeContext: import("react").Context<number | null>;
+    readonly makeRenderResourceManager: () => import("./render-resource-manager.js").RenderResourceManager;
+    readonly RenderResourceManagerContext: import("react").Context<import("./render-resource-manager.js").RenderResourceManager | null>;
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./index.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
@@ -812,7 +814,7 @@ export declare const Internals: {
         scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
         resume: () => Promise<void>;
         suspend: () => Promise<void>;
-        getIsResumingAudioContext: () => Promise<void> | null;
+        getIsResumingAudioContext: () => Promise<import("./audio/wait-until-actually-resumed.js").AudioContextResumeResult> | null;
         unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
@@ -873,6 +875,7 @@ export declare const Internals: {
         getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     } | null>;
     readonly portalNode: () => HTMLElement;
+    readonly setPortalNodeCurrentScale: (scale: number) => void;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     readonly SetTimelineContext: import("react").Context<SetTimelineContextValue>;
     readonly CanUseRemotionHooksProvider: import("react").FC<{
@@ -1270,4 +1273,4 @@ export declare const Internals: {
         readonly componentName: string;
     }) => import("react").CSSProperties | null;
 };
-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, TimelineImperativeContextValue, 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, SequencePropsStatusRemapping, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TimelineImperativeContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -78,6 +78,7 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const register_root_js_1 = require("./register-root.js");
 const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
+const render_resource_manager_js_1 = require("./render-resource-manager.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
@@ -123,6 +124,8 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // API and are less likely to use it
 exports.Internals = {
     MaxMediaCacheSizeContext: max_video_cache_size_js_1.MaxMediaCacheSizeContext,
+    makeRenderResourceManager: render_resource_manager_js_1.makeRenderResourceManager,
+    RenderResourceManagerContext: render_resource_manager_js_1.RenderResourceManagerContext,
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     useFrameForVolumeProp: use_audio_frame_js_1.useFrameForVolumeProp,
     useTimelinePosition: TimelinePosition.useTimelinePosition,
@@ -188,6 +191,7 @@ exports.Internals = {
     getPreviewDomElement: get_preview_dom_element_js_1.getPreviewDomElement,
     compositionsRef: CompositionManager_js_1.compositionsRef,
     portalNode: portal_node_js_1.portalNode,
+    setPortalNodeCurrentScale: portal_node_js_1.setPortalNodeCurrentScale,
     waitForRoot: register_root_js_1.waitForRoot,
     SetTimelineContext: TimelineContext_js_1.SetTimelineContext,
     CanUseRemotionHooksProvider: CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider,

package/dist/cjs/interpolate-keyframed-status.js

@@ -10,6 +10,8 @@ const easingToFn = ({ easing, forceSpringAllowTail, }) => {
     switch (easing.type) {
         case 'linear':
             return easing_js_1.Easing.linear;
+        case 'step1':
+            return easing_js_1.Easing.step1;
         case 'spring':
             return easing_js_1.Easing.spring({
                 allowTail: (_a = forceSpringAllowTail !== null && forceSpringAllowTail !== void 0 ? forceSpringAllowTail : easing.allowTail) !== null && _a !== void 0 ? _a : undefined,

package/dist/cjs/interpolate.js

@@ -206,9 +206,49 @@ const parseTransformOriginValue = (output, parts) => {
         });
     return {
         kind: 'translate',
-        values: [x.value, y.value, z.value],
-        units: [x.unit, y.unit, z.unit],
+        values: [x.value, y.value, z.value, 0],
+        units: [x.unit, y.unit, z.unit, null],
         dimensions: parts[2] === undefined ? 2 : 3,
+        axisRotation: false,
+    };
+};
+const parseAxisRotationValue = (output) => {
+    const parts = output.trim().split(/\s+/);
+    const keywordAxis = parts.length === 2 ? parts[0].toLowerCase() : null;
+    if (keywordAxis === 'x' || keywordAxis === 'y' || keywordAxis === 'z') {
+        const keywordAngle = parseStringInterpolationComponent(parts[1], output);
+        if (keywordAngle.kind !== 'rotate') {
+            return null;
+        }
+        return {
+            kind: 'rotate',
+            values: keywordAxis === 'x'
+                ? [1, 0, 0, keywordAngle.value]
+                : keywordAxis === 'y'
+                    ? [0, 1, 0, keywordAngle.value]
+                    : [0, 0, 1, keywordAngle.value],
+            units: [null, null, null, keywordAngle.unit],
+            dimensions: 4,
+            axisRotation: true,
+        };
+    }
+    if (parts.length !== 4) {
+        return null;
+    }
+    const axis = parts.slice(0, 3).map(Number);
+    if (!axis.every(Number.isFinite)) {
+        return null;
+    }
+    const vectorAngle = parseStringInterpolationComponent(parts[3], output);
+    if (vectorAngle.kind !== 'rotate') {
+        return null;
+    }
+    return {
+        kind: 'rotate',
+        values: [axis[0], axis[1], axis[2], vectorAngle.value],
+        units: [null, null, null, vectorAngle.unit],
+        dimensions: 4,
+        axisRotation: true,
     };
 };
 const parseStringInterpolationValue = (output) => {
@@ -220,11 +260,16 @@ const parseStringInterpolationValue = (output) => {
         }
         return {
             kind: 'scale',
-            values: [output, output, 1],
-            units: [null, null, null],
+            values: [output, output, 1, 0],
+            units: [null, null, null, null],
             dimensions: 1,
+            axisRotation: false,
         };
     }
+    const axisRotation = parseAxisRotationValue(output);
+    if (axisRotation !== null) {
+        return axisRotation;
+    }
     const parts = output.trim().split(/\s+/);
     if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
         throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
@@ -245,19 +290,29 @@ const parseStringInterpolationValue = (output) => {
         const z = (_h = (_b = parsed[2]) === null || _b === void 0 ? void 0 : _b.value) !== null && _h !== void 0 ? _h : 1;
         return {
             kind,
-            values: [x, y, z],
-            units: [null, null, null],
+            values: [x, y, z, 0],
+            units: [null, null, null, null],
             dimensions: parsed.length,
+            axisRotation: false,
         };
     }
     return {
         kind,
-        values: [parsed[0].value, (_j = (_c = parsed[1]) === null || _c === void 0 ? void 0 : _c.value) !== null && _j !== void 0 ? _j : 0, (_k = (_d = parsed[2]) === null || _d === void 0 ? void 0 : _d.value) !== null && _k !== void 0 ? _k : 0],
-        units: [parsed[0].unit, (_l = (_e = parsed[1]) === null || _e === void 0 ? void 0 : _e.unit) !== null && _l !== void 0 ? _l : null, (_m = (_f = parsed[2]) === null || _f === void 0 ? void 0 : _f.unit) !== null && _m !== void 0 ? _m : null],
+        values: [parsed[0].value, (_j = (_c = parsed[1]) === null || _c === void 0 ? void 0 : _c.value) !== null && _j !== void 0 ? _j : 0, (_k = (_d = parsed[2]) === null || _d === void 0 ? void 0 : _d.value) !== null && _k !== void 0 ? _k : 0, 0],
+        units: [
+            parsed[0].unit,
+            (_l = (_e = parsed[1]) === null || _e === void 0 ? void 0 : _e.unit) !== null && _l !== void 0 ? _l : null,
+            (_m = (_f = parsed[2]) === null || _f === void 0 ? void 0 : _f.unit) !== null && _m !== void 0 ? _m : null,
+            null,
+        ],
         dimensions: parsed.length,
+        axisRotation: false,
     };
 };
-const serializeStringInterpolationValue = ({ kind, values, units, dimensions, }) => {
+const serializeStringInterpolationValue = ({ kind, values, units, dimensions, axisRotation, }) => {
+    if (axisRotation) {
+        return `${stringifyNumber(values[0])} ${stringifyNumber(values[1])} ${stringifyNumber(values[2])} ${stringifyNumber(values[3])}${units[3]}`;
+    }
     if (kind === 'scale') {
         return values
             .slice(0, dimensions)
@@ -430,7 +485,28 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
 };
 const interpolateString = ({ input, inputRange, outputRange, options, }) => {
     var _a;
-    const parsedOutputRange = outputRange.map(parseStringInterpolationValue);
+    const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
+    const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
+    const parsedOutputRange = hasAxisRotation
+        ? initiallyParsedOutputRange.map((parsed) => {
+            if (parsed.kind !== 'rotate') {
+                return parsed;
+            }
+            if (parsed.axisRotation) {
+                return parsed;
+            }
+            if (parsed.dimensions !== 1) {
+                throw new TypeError('Cannot interpolate a multi-angle rotate value with an axis rotation');
+            }
+            return {
+                kind: 'rotate',
+                values: [0, 0, 1, parsed.values[0]],
+                units: [null, null, null, parsed.units[0]],
+                dimensions: 4,
+                axisRotation: true,
+            };
+        })
+        : initiallyParsedOutputRange;
     const kind = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.kind;
     if (kind === undefined) {
         throw new Error('outputRange must have at least 1 element');
@@ -445,9 +521,13 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
         null,
         null,
         null,
+        null,
     ];
     if (kind !== 'scale') {
         for (let axis = 0; axis < dimensions; axis++) {
+            if (hasAxisRotation && axis < 3) {
+                continue;
+            }
             for (const parsed of parsedOutputRange) {
                 const unit = parsed.units[axis];
                 if (unit === null) {
@@ -466,7 +546,7 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
             }
         }
     }
-    const values = [0, 0, 0];
+    const values = [0, 0, 0, 0];
     for (let axis = 0; axis < dimensions; axis++) {
         values[axis] = interpolateNumber({
             input,
@@ -480,6 +560,7 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
         values,
         units,
         dimensions,
+        axisRotation: hasAxisRotation,
     });
 };
 const validateTupleOutputRange = (outputRange) => {

package/dist/cjs/portal-node.d.ts

@@ -1 +1,4 @@
+export declare const getPortalNodeCurrentScale: () => number;
+export declare const subscribeToPortalNodeCurrentScale: (listener: () => void) => () => void;
+export declare const setPortalNodeCurrentScale: (scale: number) => void;
 export declare const portalNode: () => HTMLElement;

package/dist/cjs/portal-node.js

@@ -1,7 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.portalNode = void 0;
+exports.portalNode = exports.setPortalNodeCurrentScale = exports.subscribeToPortalNodeCurrentScale = exports.getPortalNodeCurrentScale = void 0;
 let _portalNode = null;
+let portalNodeCurrentScale = 1;
+let portalNodeCurrentScaleListeners = [];
+const getPortalNodeCurrentScale = () => portalNodeCurrentScale;
+exports.getPortalNodeCurrentScale = getPortalNodeCurrentScale;
+const subscribeToPortalNodeCurrentScale = (listener) => {
+    portalNodeCurrentScaleListeners.push(listener);
+    return () => {
+        portalNodeCurrentScaleListeners = portalNodeCurrentScaleListeners.filter((currentListener) => currentListener !== listener);
+    };
+};
+exports.subscribeToPortalNodeCurrentScale = subscribeToPortalNodeCurrentScale;
+const setPortalNodeCurrentScale = (scale) => {
+    if (portalNodeCurrentScale === scale) {
+        return;
+    }
+    portalNodeCurrentScale = scale;
+    for (const listener of portalNodeCurrentScaleListeners) {
+        listener();
+    }
+};
+exports.setPortalNodeCurrentScale = setPortalNodeCurrentScale;
 const portalNode = () => {
     if (!_portalNode) {
         if (typeof document === 'undefined') {

package/dist/cjs/render-resource-manager.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type RenderResourceManager = {
+    getOrCreateResource: <T>({ key, create }: {
+        key: string;
+        create: () => {
+            resource: T;
+            dispose: () => void;
+        };
+    }) => T;
+    dispose: () => void;
+};
+export declare const makeRenderResourceManager: () => RenderResourceManager;
+export declare const RenderResourceManagerContext: React.Context<RenderResourceManager | null>;