remotion 4.0.189 → 4.0.190

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/AbsoluteFill.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
+ */
+export declare const AbsoluteFill: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/AbsoluteFill.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+const AbsoluteFillRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = useMemo(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...style,
+        };
+    }, [style]);
+    return _jsx("div", { ref: ref, style: actualStyle, ...other });
+};
+/**
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
+ */
+export const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CanUseRemotionHooks.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CanUseRemotionHooks: React.Context<boolean>;
+export declare const CanUseRemotionHooksProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CanUseRemotionHooks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const CanUseRemotionHooks = createContext(false);
+export const CanUseRemotionHooksProvider = ({ children }) => {
+    return (_jsx(CanUseRemotionHooks.Provider, { value: true, children: children }));
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Clipper.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare const Clipper: React.FC<{
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Clipper.js

@@ -0,0 +1,20 @@
+import { useContext, useEffect } from 'react';
+import { NativeLayersContext } from './NativeLayers.js';
+export const Clipper = ({ height, width, x, y }) => {
+    const { setClipRegion } = useContext(NativeLayersContext);
+    useEffect(() => {
+        setClipRegion((c) => {
+            if (c === 'hide') {
+                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
+            }
+            if (c === null) {
+                return { height, width, x, y };
+            }
+            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
+        });
+        return () => {
+            setClipRegion(null);
+        };
+    }, [height, setClipRegion, width, x, y]);
+    return null;
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Composition.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import React from 'react';
+import type { AnyZodObject } from 'zod';
+import type { Codec } from './codec.js';
+import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export type CompProps<Props> = {
+    lazyComponent: () => Promise<{
+        default: LooseComponentType<Props>;
+    }>;
+} | {
+    component: LooseComponentType<Props>;
+};
+export type CalcMetadataReturnType<T extends Record<string, unknown>> = {
+    durationInFrames?: number;
+    fps?: number;
+    width?: number;
+    height?: number;
+    props?: T;
+    defaultCodec?: Codec;
+};
+export type CalculateMetadataFunction<T extends Record<string, unknown>> = (options: {
+    defaultProps: T;
+    props: T;
+    abortSignal: AbortSignal;
+    compositionId: string;
+}) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
+type OptionalDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    width?: number;
+    height?: number;
+    calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>>;
+};
+type MandatoryDimensions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    width: number;
+    height: number;
+    calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>>;
+};
+type StillCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = OptionalDimensions<Schema, Props> | MandatoryDimensions<Schema, Props>;
+type CompositionCalculateMetadataOrExplicit<Schema extends AnyZodObject, Props extends Record<string, unknown>> = (OptionalDimensions<Schema, Props> & {
+    fps?: number;
+    durationInFrames?: number;
+}) | (MandatoryDimensions<Schema, Props> & {
+    fps: number;
+    durationInFrames: number;
+});
+export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    id: string;
+    schema?: Schema;
+} & StillCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export declare const ClipComposition: React.FC<PropsWithChildren>;
+export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    id: string;
+    schema?: Schema;
+} & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export {};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Composition.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useContext, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { AbsoluteFill } from './AbsoluteFill.js';
+import { CanUseRemotionHooks, CanUseRemotionHooksProvider, } from './CanUseRemotionHooks.js';
+import { CompositionManager } from './CompositionManagerContext.js';
+import { continueRender, delayRender } from './delay-render.js';
+import { FolderContext } from './Folder.js';
+import { getRemotionEnvironment } from './get-remotion-environment.js';
+import { useIsPlayer } from './is-player.js';
+import { Loading } from './loading-indicator.js';
+import { NativeLayersContext } from './NativeLayers.js';
+import { useNonce } from './nonce.js';
+import { portalNode } from './portal-node.js';
+import { useResolvedVideoConfig } from './ResolveCompositionConfig.js';
+import { useLazyComponent } from './use-lazy-component.js';
+import { useVideo } from './use-video.js';
+import { validateCompositionId } from './validation/validate-composition-id.js';
+import { validateDefaultAndInputProps } from './validation/validate-default-props.js';
+export const ClipComposition = ({ children }) => {
+    const { clipRegion } = useContext(NativeLayersContext);
+    const style = useMemo(() => {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            opacity: clipRegion === 'hide' ? 0 : 1,
+            clipPath: clipRegion && clipRegion !== 'hide'
+                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
+                : undefined,
+        };
+    }, [clipRegion]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
+};
+const Fallback = () => {
+    useEffect(() => {
+        const fallback = delayRender('Waiting for Root component to unsuspend');
+        return () => continueRender(fallback);
+    }, []);
+    return null;
+};
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
+export const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+    var _a, _b;
+    const { registerComposition, unregisterComposition } = useContext(CompositionManager);
+    const video = useVideo();
+    const lazy = useLazyComponent(compProps);
+    const nonce = useNonce();
+    const isPlayer = useIsPlayer();
+    const environment = getRemotionEnvironment();
+    const canUseComposition = useContext(CanUseRemotionHooks);
+    if (canUseComposition) {
+        if (isPlayer) {
+            throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
+        }
+        throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
+    }
+    const { folderName, parentName } = useContext(FolderContext);
+    useEffect(() => {
+        var _a;
+        // Ensure it's a URL safe id
+        if (!id) {
+            throw new Error('No id for composition passed.');
+        }
+        validateCompositionId(id);
+        validateDefaultAndInputProps(defaultProps, 'defaultProps', id);
+        registerComposition({
+            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : undefined,
+            fps: fps !== null && fps !== void 0 ? fps : undefined,
+            height: height !== null && height !== void 0 ? height : undefined,
+            width: width !== null && width !== void 0 ? width : undefined,
+            id,
+            folderName,
+            component: lazy,
+            defaultProps: defaultProps,
+            nonce,
+            parentFolderName: parentName,
+            schema: schema !== null && schema !== void 0 ? schema : null,
+            calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+        });
+        return () => {
+            unregisterComposition(id);
+        };
+    }, [
+        durationInFrames,
+        fps,
+        height,
+        lazy,
+        id,
+        folderName,
+        defaultProps,
+        registerComposition,
+        unregisterComposition,
+        width,
+        nonce,
+        parentName,
+        schema,
+        compProps.calculateMetadata,
+    ]);
+    const resolved = useResolvedVideoConfig(id);
+    if (environment.isStudio && video && video.component === lazy) {
+        const Comp = lazy;
+        if (resolved === null || resolved.type !== 'success') {
+            return null;
+        }
+        return createPortal(_jsx(ClipComposition, { children: _jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: _jsx(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), portalNode());
+    }
+    if (environment.isRendering && video && video.component === lazy) {
+        const Comp = lazy;
+        if (resolved === null || resolved.type !== 'success') {
+            return null;
+        }
+        return createPortal(_jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Fallback, {}), children: _jsx(Comp, { ...((_b = resolved.result.props) !== null && _b !== void 0 ? _b : {}) }) }) }), portalNode());
+    }
+    return null;
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CompositionManager.d.ts

@@ -0,0 +1,76 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { AnyZodObject } from 'zod';
+import type { CalculateMetadataFunction } from './Composition.js';
+import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
+    width: number | undefined;
+    height: number | undefined;
+    fps: number | undefined;
+    durationInFrames: number | undefined;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: LazyExoticComponent<ComponentType<Props>>;
+    nonce: number;
+    schema: Schema | null;
+    calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
+} & PropsIfHasProps<Schema, Props>;
+export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown>>;
+export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
+export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown>>;
+export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
+type EnhancedTSequenceData = {
+    type: 'sequence';
+} | {
+    type: 'audio';
+    src: string;
+    volume: string | number;
+    doesVolumeChange: boolean;
+    startMediaFrom: number;
+    playbackRate: number;
+} | {
+    type: 'video';
+    src: string;
+    volume: string | number;
+    doesVolumeChange: boolean;
+    startMediaFrom: number;
+    playbackRate: number;
+};
+export type LoopDisplay = {
+    numberOfTimes: number;
+    startOffset: number;
+    durationInFrames: number;
+};
+export type TSequence = {
+    from: number;
+    duration: number;
+    id: string;
+    displayName: string;
+    parent: string | null;
+    rootId: string;
+    showInTimeline: boolean;
+    nonce: number;
+    loopDisplay: LoopDisplay | undefined;
+    stack: string | null;
+} & EnhancedTSequenceData;
+export type TRenderAsset = {
+    type: 'audio' | 'video';
+    src: string;
+    id: string;
+    frame: number;
+    volume: number;
+    mediaFrame: number;
+    playbackRate: number;
+    allowAmplificationDuringRender: boolean;
+    toneFrequency: number | null;
+};
+export declare const compositionsRef: React.RefObject<{
+    getCompositions: () => TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>[];
+}>;
+export declare const CompositionManagerProvider: React.FC<{
+    children: React.ReactNode;
+    numberOfAudioTags: number;
+}>;
+export {};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CompositionManager.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { SharedAudioContextProvider } from './audio/shared-audio-tags.js';
+import { CompositionManager } from './CompositionManagerContext.js';
+import { RenderAssetManagerProvider } from './RenderAssetManager.js';
+import { ResolveCompositionConfig } from './ResolveCompositionConfig.js';
+import { SequenceManagerProvider } from './SequenceManager.js';
+export const compositionsRef = React.createRef();
+export const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
+    var _a;
+    // Wontfix, expected to have
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [compositions, setCompositions] = useState([]);
+    const currentcompositionsRef = useRef(compositions);
+    const [folders, setFolders] = useState([]);
+    const [canvasContent, setCanvasContent] = useState(null);
+    const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
+    const updateCompositions = useCallback((
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateComps) => {
+        setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = useCallback((comp) => {
+        updateCompositions((comps) => {
+            if (comps.find((c) => c.id === comp.id)) {
+                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
+            }
+            const value = [...comps, comp]
+                .slice()
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .sort((a, b) => a.nonce - b.nonce);
+            return value;
+        });
+    }, [updateCompositions]);
+    const unregisterComposition = useCallback((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const registerFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return [
+                ...prevFolders,
+                {
+                    name,
+                    parent,
+                },
+            ];
+        });
+    }, []);
+    const unregisterFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+        });
+    }, []);
+    useImperativeHandle(compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? c.id === canvasContent.compositionId
+        : null);
+    const contextValue = useMemo(() => {
+        return {
+            compositions,
+            registerComposition,
+            unregisterComposition,
+            folders,
+            registerFolder,
+            unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
+            canvasContent,
+            setCanvasContent,
+        };
+    }, [
+        compositions,
+        registerComposition,
+        unregisterComposition,
+        folders,
+        registerFolder,
+        unregisterFolder,
+        currentCompositionMetadata,
+        canvasContent,
+        setCanvasContent,
+    ]);
+    return (_jsx(CompositionManager.Provider, { value: contextValue, children: _jsx(SequenceManagerProvider, { children: _jsx(RenderAssetManagerProvider, { children: _jsx(ResolveCompositionConfig, { children: _jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CompositionManagerContext.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+import type { AnyZodObject } from 'zod';
+import type { AnyComposition, TComposition } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+import type { VideoConfig } from './video-config.js';
+export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width' | 'defaultCodec'>;
+export type CanvasContent = {
+    type: 'composition';
+    compositionId: string;
+} | {
+    type: 'asset';
+    asset: string;
+} | {
+    type: 'output';
+    path: string;
+};
+export type CompositionManagerContext = {
+    compositions: AnyComposition[];
+    registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
+    unregisterComposition: (name: string) => void;
+    registerFolder: (name: string, parent: string | null) => void;
+    unregisterFolder: (name: string, parent: string | null) => void;
+    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    currentCompositionMetadata: BaseMetadata | null;
+    folders: TFolder[];
+    canvasContent: CanvasContent | null;
+    setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
+};
+export declare const CompositionManager: React.Context<CompositionManagerContext>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/CompositionManagerContext.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+export const CompositionManager = createContext({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    folders: [],
+    currentCompositionMetadata: null,
+    canvasContent: null,
+    setCanvasContent: () => undefined,
+});

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/EditorProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type Props = Record<string, Record<string, unknown>>;
+export type EditorPropsContextType = {
+    props: Props;
+    updateProps: (options: {
+        id: string;
+        defaultProps: Record<string, unknown>;
+        newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
+    }) => void;
+};
+export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
+export declare const EditorPropsProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/EditorProps.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useMemo } from 'react';
+export const EditorPropsContext = createContext({
+    props: {},
+    updateProps: () => {
+        throw new Error('Not implemented');
+    },
+});
+export const EditorPropsProvider = ({ children }) => {
+    const [props, setProps] = React.useState({});
+    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
+        setProps((prev) => {
+            var _a;
+            return {
+                ...prev,
+                [id]: typeof newProps === 'function'
+                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
+                    : newProps,
+            };
+        });
+    }, []);
+    const ctx = useMemo(() => {
+        return { props, updateProps };
+    }, [props, updateProps]);
+    return (_jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Folder.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+export type TFolder = {
+    name: string;
+    parent: string | null;
+};
+type FolderContextType = {
+    folderName: string | null;
+    parentName: string | null;
+};
+export declare const FolderContext: import("react").Context<FolderContextType>;
+/**
+ * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
+ * @see [Documentation](https://www.remotion.dev/docs/folder)
+ */
+export declare const Folder: FC<{
+    name: string;
+    children: React.ReactNode;
+}>;
+export {};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Folder.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { CompositionManager } from './CompositionManagerContext.js';
+import { truthy } from './truthy.js';
+import { validateFolderName } from './validation/validate-folder-name.js';
+export const FolderContext = createContext({
+    folderName: null,
+    parentName: null,
+});
+/**
+ * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
+ * @see [Documentation](https://www.remotion.dev/docs/folder)
+ */
+export const Folder = ({ name, children, }) => {
+    const parent = useContext(FolderContext);
+    const { registerFolder, unregisterFolder } = useContext(CompositionManager);
+    validateFolderName(name);
+    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
+    const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
+    const value = useMemo(() => {
+        return {
+            folderName: name,
+            parentName,
+        };
+    }, [name, parentName]);
+    useEffect(() => {
+        registerFolder(name, parentName);
+        return () => {
+            unregisterFolder(name, parentName);
+        };
+    }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+    return (_jsx(FolderContext.Provider, { value: value, children: children }));
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/IFrame.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
+ * @see [Documentation](https://www.remotion.dev/docs/iframe)
+ */
+export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/IFrame.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from 'react';
+import { continueRender, delayRender } from './delay-render.js';
+const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
+    const [handle] = useState(() => delayRender(`Loading <IFrame> with source ${props.src}`));
+    const didLoad = useCallback((e) => {
+        continueRender(handle);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    }, [handle, onLoad]);
+    const didGetError = useCallback((e) => {
+        continueRender(handle);
+        if (onError) {
+            onError(e);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [handle, onError]);
+    return _jsx("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
+};
+/**
+ * @description The <IFrame /> can be used like a regular <iframe> HTML tag.
+ * @see [Documentation](https://www.remotion.dev/docs/iframe)
+ */
+export const IFrame = forwardRef(IFrameRefForwarding);

package/.rollup.cache/Users/jonathanburger/remotion/packages/core/dist/esm/Img.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & {
+    maxRetries?: number;
+    pauseWhenLoading?: boolean;
+    src: string;
+};
+/**
+ * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
+ * @see [Documentation](https://www.remotion.dev/docs/img)
+ */
+export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;