remotion 3.3.45 → 3.3.52

package/dist/cjs/warn-about-non-seekable-media.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnAboutNonSeekableMedia = void 0;
+const alreadyWarned = {};
+const warnAboutNonSeekableMedia = (ref, type) => {
+    // Media is not loaded yet, but this does not yet mean something is wrong with the media
+    if (ref === null) {
+        return;
+    }
+    if (ref.seekable.length === 0) {
+        return;
+    }
+    if (ref.seekable.length > 1) {
+        return;
+    }
+    if (alreadyWarned[ref.src]) {
+        return;
+    }
+    const range = { start: ref.seekable.start(0), end: ref.seekable.end(0) };
+    if (range.start === 0 && range.end === 0) {
+        const msg = `The media ${ref.src} cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance.`;
+        if (type === 'console-error') {
+            console.error(msg);
+        }
+        else if (type === 'console-warning') {
+            console.warn(`The media ${ref.src} does not support seeking. The video will render fine, but may not play correctly in preview and in the <Player>. See https://remotion.dev/docs/non-seekable-media for an explanation.`);
+        }
+        else {
+            throw new Error(msg);
+        }
+        alreadyWarned[ref.src] = true;
+    }
+};
+exports.warnAboutNonSeekableMedia = warnAboutNonSeekableMedia;

package/dist/cjs/wrap-remotion-context.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare function useRemotionContexts(): {
+    compositionManagerCtx: import("./CompositionManager.js").CompositionManagerContext;
+    timelineContext: import("./timeline-position-state.js").TimelineContextValue;
+    setTimelineContext: import("./timeline-position-state.js").SetTimelineContextValue;
+    sequenceContext: import("./Sequence.js").SequenceContextType | null;
+    nonceContext: import("./nonce.js").TNonceContext;
+    canUseRemotionHooksContext: boolean;
+    nativeLayersContext: import("./NativeLayers.js").TNativeLayersContext;
+    preloadContext: {
+        [x: string]: string;
+    };
+};
+export interface RemotionContextProviderProps {
+    contexts: ReturnType<typeof useRemotionContexts>;
+    children: React.ReactNode;
+}
+export declare const RemotionContextProvider: (props: RemotionContextProviderProps) => JSX.Element;

package/dist/cjs/wrap-remotion-context.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemotionContextProvider = exports.useRemotionContexts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// This is used for when other reconcilers are being used
+// such as in React Three Fiber. All the contexts need to be passed again
+// for them to be useable
+const react_1 = __importStar(require("react"));
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const CompositionManager_js_1 = require("./CompositionManager.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const nonce_js_1 = require("./nonce.js");
+const prefetch_state_js_1 = require("./prefetch-state.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+function useRemotionContexts() {
+    const compositionManagerCtx = react_1.default.useContext(CompositionManager_js_1.CompositionManager);
+    const timelineContext = react_1.default.useContext(timeline_position_state_js_1.TimelineContext);
+    const setTimelineContext = react_1.default.useContext(timeline_position_state_js_1.SetTimelineContext);
+    const sequenceContext = react_1.default.useContext(Sequence_js_1.SequenceContext);
+    const nonceContext = react_1.default.useContext(nonce_js_1.NonceContext);
+    const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
+    const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
+    const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
+    return (0, react_1.useMemo)(() => ({
+        compositionManagerCtx,
+        timelineContext,
+        setTimelineContext,
+        sequenceContext,
+        nonceContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+    }), [
+        compositionManagerCtx,
+        nonceContext,
+        sequenceContext,
+        setTimelineContext,
+        timelineContext,
+        canUseRemotionHooksContext,
+        nativeLayersContext,
+        preloadContext,
+    ]);
+}
+exports.useRemotionContexts = useRemotionContexts;
+const RemotionContextProvider = (props) => {
+    const { children, contexts } = props;
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
+};
+exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/AbsoluteFill.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export declare const AbsoluteFill: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/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 });
+};
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);

package/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/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/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/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/dist/esm/Composition.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import React from 'react';
+declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export declare type CompProps<T> = {
+    lazyComponent: () => Promise<{
+        default: LooseComponentType<T>;
+    }>;
+} | {
+    component: LooseComponentType<T>;
+};
+export declare type StillProps<T> = {
+    width: number;
+    height: number;
+    id: string;
+    defaultProps?: T;
+} & CompProps<T>;
+declare type CompositionProps<T> = StillProps<T> & {
+    fps: number;
+    durationInFrames: number;
+};
+export declare const Composition: <T>({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }: CompositionProps<T>) => React.ReactPortal | null;
+export declare const ClipComposition: React.FC<PropsWithChildren>;
+export {};

package/dist/esm/Composition.js

@@ -0,0 +1,108 @@
+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 { CanUseRemotionHooksProvider } from './CanUseRemotionHooks.js';
+import { CompositionManager } from './CompositionManager.js';
+import { getInputProps } from './config/input-props.js';
+import { continueRender, delayRender } from './delay-render.js';
+import { FolderContext } from './Folder.js';
+import { useRemotionEnvironment } from './get-environment.js';
+import { Internals } from './internals.js';
+import { Loading } from './loading-indicator.js';
+import { NativeLayersContext } from './NativeLayers.js';
+import { useNonce } from './nonce.js';
+import { portalNode } from './portal-node.js';
+import { useLazyComponent } from './use-lazy-component.js';
+import { useVideo } from './use-video.js';
+import { validateCompositionId } from './validation/validate-composition-id.js';
+import { validateDimension } from './validation/validate-dimensions.js';
+import { validateDurationInFrames } from './validation/validate-duration-in-frames.js';
+import { validateFps } from './validation/validate-fps.js';
+const Fallback = () => {
+    useEffect(() => {
+        const fallback = delayRender('Waiting for Root component to unsuspend');
+        return () => continueRender(fallback);
+    }, []);
+    return null;
+};
+export const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
+    const { registerComposition, unregisterComposition } = useContext(CompositionManager);
+    const video = useVideo();
+    const lazy = useLazyComponent(compProps);
+    const nonce = useNonce();
+    const environment = useRemotionEnvironment();
+    const canUseComposition = useContext(Internals.CanUseRemotionHooks);
+    if (canUseComposition) {
+        if (environment === 'player-development' ||
+            environment === 'player-production') {
+            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(() => {
+        // Ensure it's a URL safe id
+        if (!id) {
+            throw new Error('No id for composition passed.');
+        }
+        validateCompositionId(id);
+        validateDimension(width, 'width', 'of the <Composition/> component');
+        validateDimension(height, 'height', 'of the <Composition/> component');
+        validateDurationInFrames(durationInFrames, 'of the <Composition/> component');
+        validateFps(fps, 'as a prop of the <Composition/> component', false);
+        registerComposition({
+            durationInFrames,
+            fps,
+            height,
+            width,
+            id,
+            folderName,
+            component: lazy,
+            defaultProps,
+            nonce,
+            parentFolderName: parentName,
+        });
+        return () => {
+            unregisterComposition(id);
+        };
+    }, [
+        durationInFrames,
+        fps,
+        height,
+        lazy,
+        id,
+        folderName,
+        defaultProps,
+        registerComposition,
+        unregisterComposition,
+        width,
+        nonce,
+        parentName,
+    ]);
+    if (environment === 'preview' && video && video.component === lazy) {
+        const Comp = lazy;
+        const inputProps = getInputProps();
+        return createPortal(_jsx(ClipComposition, { children: _jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: _jsx(Comp, { ...defaultProps, ...inputProps }) }) }) }), portalNode());
+    }
+    if (environment === 'rendering' && video && video.component === lazy) {
+        const Comp = lazy;
+        const inputProps = getInputProps();
+        return createPortal(_jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Fallback, {}), children: _jsx(Comp, { ...defaultProps, ...inputProps }) }) }), portalNode());
+    }
+    return null;
+};
+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 });
+};

package/dist/esm/CompositionManager.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TFolder } from './Folder.js';
+export declare type TComposition<T = unknown> = {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: LazyExoticComponent<ComponentType<T>>;
+    defaultProps: T | undefined;
+    nonce: number;
+};
+export declare type TCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export declare type SmallTCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition, 'defaultProps'>>;
+declare 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 declare type TSequence = {
+    from: number;
+    duration: number;
+    id: string;
+    displayName: string;
+    parent: string | null;
+    rootId: string;
+    showInTimeline: boolean;
+    nonce: number;
+    showLoopTimesInTimeline: number | undefined;
+} & EnhancedTSequenceData;
+export declare type TAsset = {
+    type: 'audio' | 'video';
+    src: string;
+    id: string;
+    frame: number;
+    volume: number;
+    mediaFrame: number;
+    playbackRate: number;
+    allowAmplificationDuringRender: boolean;
+};
+declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+export declare type CompositionManagerContext = {
+    compositions: TComposition[];
+    registerComposition: <T>(comp: TComposition<T>) => void;
+    unregisterComposition: (name: string) => void;
+    registerFolder: (name: string, parent: string | null) => void;
+    unregisterFolder: (name: string, parent: string | null) => void;
+    currentComposition: string | null;
+    setCurrentComposition: (curr: string) => void;
+    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    currentCompositionMetadata: BaseMetadata | null;
+    registerSequence: (seq: TSequence) => void;
+    unregisterSequence: (id: string) => void;
+    registerAsset: (asset: TAsset) => void;
+    unregisterAsset: (id: string) => void;
+    sequences: TSequence[];
+    assets: TAsset[];
+    folders: TFolder[];
+};
+export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const compositionsRef: React.RefObject<{
+    getCompositions: () => TCompMetadata[];
+}>;
+export declare const CompositionManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/esm/CompositionManager.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+export const CompositionManager = createContext({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    currentComposition: null,
+    setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    registerSequence: () => undefined,
+    unregisterSequence: () => undefined,
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    sequences: [],
+    assets: [],
+    folders: [],
+    currentCompositionMetadata: null,
+});
+export const compositionsRef = React.createRef();
+export const CompositionManagerProvider = ({ children }) => {
+    // Wontfix, expected to have
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [compositions, setCompositions] = useState([]);
+    const currentcompositionsRef = useRef(compositions);
+    const [currentComposition, setCurrentComposition] = useState(null);
+    const [assets, setAssets] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [sequences, setSequences] = useState([]);
+    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.`);
+            }
+            return [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
+        });
+    }, [updateCompositions]);
+    const registerSequence = useCallback((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterComposition = useCallback((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const unregisterSequence = useCallback((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const registerAsset = useCallback((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = useCallback((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.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));
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    useImperativeHandle(compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        return {
+            compositions,
+            registerComposition,
+            unregisterComposition,
+            currentComposition,
+            setCurrentComposition,
+            registerSequence,
+            unregisterSequence,
+            registerAsset,
+            unregisterAsset,
+            sequences,
+            assets,
+            folders,
+            registerFolder,
+            unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
+        };
+    }, [
+        compositions,
+        registerComposition,
+        unregisterComposition,
+        currentComposition,
+        registerSequence,
+        unregisterSequence,
+        registerAsset,
+        unregisterAsset,
+        sequences,
+        assets,
+        folders,
+        registerFolder,
+        unregisterFolder,
+        currentCompositionMetadata,
+    ]);
+    return (_jsx(CompositionManager.Provider, { value: contextValue, children: children }));
+};

package/dist/esm/Folder.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+export declare type TFolder = {
+    name: string;
+    parent: string | null;
+};
+declare type FolderContextType = {
+    folderName: string | null;
+    parentName: string | null;
+};
+export declare const FolderContext: import("react").Context<FolderContextType>;
+export declare const Folder: FC<{
+    name: string;
+    children: React.ReactNode;
+}>;
+export {};

package/dist/esm/Folder.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { CompositionManager } from './CompositionManager.js';
+import { truthy } from './truthy.js';
+import { validateFolderName } from './validation/validate-folder-name.js';
+export const FolderContext = createContext({
+    folderName: null,
+    parentName: null,
+});
+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/dist/esm/IFrame.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "key" | keyof React.IframeHTMLAttributes<HTMLIFrameElement>> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/esm/IFrame.js

@@ -0,0 +1,21 @@
+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 {
+            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 });
+};
+export const IFrame = forwardRef(IFrameRefForwarding);

package/dist/esm/Img.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;