@remotion/player 4.0.0-lambda.3 → 4.0.0-newpathfunctions.13

package/dist/esm/test/test-utils.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+const HelloWorld = () => {
+    return _jsx("div", { children: "Hello World" });
+};
+const AllTheProviders = ({ children }) => {
+    // overwriting console.error console does not gets poluted with all the errors
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    window.console.error = () => { };
+    return _jsx("div", { children: children });
+};
+const customRender = (ui, options) => render(ui, { wrapper: AllTheProviders, ...options });
+export * from '@testing-library/react';
+export { customRender as render, HelloWorld };

package/dist/esm/test/validate-in-out-frames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/validate-in-out-frames.test.js

@@ -0,0 +1,54 @@
+import { expect, test } from 'vitest';
+import { validateInOutFrames } from '../utils/validate-in-out-frame';
+test('Validate in out frames', () => {
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 201,
+        outFrame: undefined,
+    })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 199,
+        outFrame: 201,
+    })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: -10,
+        outFrame: null,
+    })).toThrow(/inFrame must be greater than 0, but is -10/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: -10,
+    })).toThrow(/outFrame must be greater than 0, but is -10/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 1.5,
+        outFrame: null,
+    })).toThrow(/"inFrame" must be an integer, but is 1.5/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 20,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 21,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: 20,
+    })).not.toThrow();
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: null,
+    })).not.toThrow();
+    expect(() => validateInOutFrames({
+        durationInFrames: 200,
+        inFrame: 10,
+        outFrame: 20,
+    })).not.toThrow();
+});

package/dist/esm/test/validate-prop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/test/validate-prop.test.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Composition } from 'remotion';
+import { expect, test } from 'vitest';
+import { Player } from '../index';
+import { HelloWorld, render } from './test-utils';
+test('no compositionWidth should give errors', () => {
+    try {
+        render(_jsx(Player
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+    }
+});
+test('no compositionHeight should give errors', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+    }
+});
+test('No fps should give errors', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            fps: null, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+    }
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            fps: undefined, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+    }
+});
+test('No durationInFrames should give errors', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
+            // @ts-expect-error
+            durationInFrames: undefined, component: HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+    }
+});
+test('Invalid playbackRate should give error', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+    }
+});
+test('playbackRate of 0 should not be possible', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+test('playbackRate of wrong type should not be possible', () => {
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true, 
+            // @ts-expect-error
+            playbackRate: 'hi' }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+test('playbackRate of undefined should be okay', () => {
+    render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: HelloWorld, controls: true, showVolumeControls: true }));
+    expect(true).toBe(true);
+});
+test('passing in <Composition /> instance should not be possible', () => {
+    expect(() => {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: Composition, controls: true, showVolumeControls: true, inputProps: {
+                id: 'HelloWorld',
+                width: 500,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: HelloWorld,
+            } }));
+    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
+});
+test('passing in <Composition /> instance should not be possible', () => {
+    expect(() => {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
+            // @ts-expect-error
+            component: _jsx(Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
+                id: 'HelloWorld',
+                width: 500,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: HelloWorld,
+            } }));
+    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
+});
+test.each([
+    ['controls'],
+    ['loop'],
+    ['autoPlay'],
+    ['showVolumeControls'],
+    ['allowFullscreen'],
+    ['clickToPlay'],
+    ['doubleClickToFullscreen'],
+])('No durationInFrames should give errors %s', (a) => {
+    const props = {};
+    props[a] = 'hey';
+    try {
+        render(_jsx(Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: HelloWorld, ...props }));
+    }
+    catch (e) {
+        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+    }
+});

package/dist/esm/use-hover-state.d.ts

@@ -0,0 +1 @@
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>) => boolean;

package/dist/esm/use-hover-state.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+export const useHoverState = (ref) => {
+    const [hovered, stetHovered] = useState(false);
+    useEffect(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onHover = () => {
+            stetHovered(true);
+        };
+        const onLeave = () => {
+            stetHovered(false);
+        };
+        current.addEventListener('mouseenter', onHover);
+        current.addEventListener('mouseleave', onLeave);
+        return () => {
+            current.removeEventListener('mouseenter', onHover);
+            current.removeEventListener('mouseenter', onLeave);
+        };
+    }, [ref]);
+    return hovered;
+};

package/dist/esm/use-playback.d.ts

@@ -0,0 +1,7 @@
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
+    loop: boolean;
+    playbackRate: number;
+    moveToBeginningWhenEnded: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+}) => void;

package/dist/esm/use-playback.js

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from 'react';
+import { Internals } from 'remotion';
+import { calculateNextFrame } from './calculate-next-frame';
+import { usePlayer } from './use-player';
+export const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
+    const frame = Internals.Timeline.useTimelinePosition();
+    const config = Internals.useUnsafeVideoConfig();
+    const { playing, pause, emitter } = usePlayer();
+    const setFrame = Internals.Timeline.useTimelineSetFrame();
+    const frameRef = useRef(frame);
+    frameRef.current = frame;
+    const lastTimeUpdateEvent = useRef(null);
+    useEffect(() => {
+        if (!config) {
+            return;
+        }
+        if (!playing) {
+            return;
+        }
+        let hasBeenStopped = false;
+        let reqAnimFrameCall = null;
+        const startedTime = performance.now();
+        let framesAdvanced = 0;
+        const stop = () => {
+            hasBeenStopped = true;
+            if (reqAnimFrameCall !== null) {
+                cancelAnimationFrame(reqAnimFrameCall);
+            }
+        };
+        const callback = () => {
+            const time = performance.now() - startedTime;
+            const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
+            const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
+            const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
+                time,
+                currentFrame: frameRef.current,
+                playbackSpeed: playbackRate,
+                fps: config.fps,
+                actualFirstFrame,
+                actualLastFrame,
+                framesAdvanced,
+                shouldLoop: loop,
+            });
+            framesAdvanced += framesToAdvance;
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
+                setFrame(nextFrame);
+            }
+            if (hasEnded) {
+                stop();
+                pause();
+                emitter.dispatchEnded();
+                return;
+            }
+            if (!hasBeenStopped) {
+                reqAnimFrameCall = requestAnimationFrame(callback);
+            }
+        };
+        reqAnimFrameCall = requestAnimationFrame(callback);
+        return () => {
+            stop();
+        };
+    }, [
+        config,
+        loop,
+        pause,
+        playing,
+        setFrame,
+        emitter,
+        playbackRate,
+        inFrame,
+        outFrame,
+        moveToBeginningWhenEnded,
+    ]);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (lastTimeUpdateEvent.current === frameRef.current) {
+                return;
+            }
+            emitter.dispatchTimeUpdate({ frame: frameRef.current });
+            lastTimeUpdateEvent.current = frameRef.current;
+        }, 250);
+        return () => clearInterval(interval);
+    }, [emitter]);
+    useEffect(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
+};

package/dist/esm/use-player.d.ts

@@ -0,0 +1,19 @@
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+declare type UsePlayerMethods = {
+    frameBack: (frames: number) => void;
+    frameForward: (frames: number) => void;
+    isLastFrame: boolean;
+    isFirstFrame: boolean;
+    emitter: PlayerEmitter;
+    playing: boolean;
+    play: (e?: SyntheticEvent) => void;
+    pause: () => void;
+    pauseAndReturnToPlayStart: () => void;
+    seek: (newFrame: number) => void;
+    getCurrentFrame: () => number;
+    isPlaying: () => boolean;
+    hasPlayed: boolean;
+};
+export declare const usePlayer: () => UsePlayerMethods;
+export {};

package/dist/esm/use-player.js

@@ -0,0 +1,128 @@
+import { useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { Internals } from 'remotion';
+import { PlayerEventEmitterContext } from './emitter-context';
+export const usePlayer = () => {
+    var _a;
+    const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = useState(false);
+    const frame = Internals.Timeline.useTimelinePosition();
+    const playStart = useRef(frame);
+    const setFrame = Internals.Timeline.useTimelineSetFrame();
+    const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
+    const audioContext = useContext(Internals.SharedAudioContext);
+    const { audioAndVideoTags } = useContext(Internals.Timeline.TimelineContext);
+    const frameRef = useRef();
+    frameRef.current = frame;
+    const video = Internals.useVideo();
+    const config = Internals.useUnsafeVideoConfig();
+    const emitter = useContext(PlayerEventEmitterContext);
+    const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const isLastFrame = frame === lastFrame;
+    const isFirstFrame = frame === 0;
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const seek = useCallback((newFrame) => {
+        setTimelinePosition(newFrame);
+        emitter.dispatchSeek(newFrame);
+    }, [emitter, setTimelinePosition]);
+    const play = useCallback((e) => {
+        if (imperativePlaying.current) {
+            return;
+        }
+        setHasPlayed(true);
+        if (isLastFrame) {
+            seek(0);
+        }
+        /**
+         * Play silent audio tags to warm them up for autoplay
+         */
+        if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
+            audioContext.playAllAudios();
+        }
+        /**
+         * Play audios and videos directly here so they can benefit from
+         * being triggered by a click
+         */
+        audioAndVideoTags.current.forEach((a) => a.play());
+        imperativePlaying.current = true;
+        setPlaying(true);
+        playStart.current = frameRef.current;
+        emitter.dispatchPlay();
+    }, [
+        imperativePlaying,
+        isLastFrame,
+        audioContext,
+        setPlaying,
+        emitter,
+        seek,
+        audioAndVideoTags,
+    ]);
+    const pause = useCallback(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying]);
+    const pauseAndReturnToPlayStart = useCallback(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setTimelinePosition(playStart.current);
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+    const hasVideo = Boolean(video);
+    const frameBack = useCallback((frames) => {
+        if (!hasVideo) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => {
+            return Math.max(0, f - frames);
+        });
+    }, [hasVideo, imperativePlaying, setFrame]);
+    const frameForward = useCallback((frames) => {
+        if (!hasVideo) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => Math.min(lastFrame, f + frames));
+    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
+    const returnValue = useMemo(() => {
+        return {
+            frameBack,
+            frameForward,
+            isLastFrame,
+            emitter,
+            playing,
+            play,
+            pause,
+            seek,
+            isFirstFrame,
+            getCurrentFrame: () => frameRef.current,
+            isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
+            hasPlayed,
+        };
+    }, [
+        frameBack,
+        frameForward,
+        isLastFrame,
+        emitter,
+        playing,
+        play,
+        pause,
+        seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
+    ]);
+    return returnValue;
+};

package/dist/esm/use-thumbnail.d.ts

@@ -0,0 +1,6 @@
+import type { ThumbnailEmitter } from './event-emitter';
+declare type UseThumbnailMethods = {
+    emitter: ThumbnailEmitter;
+};
+export declare const useThumbnail: () => UseThumbnailMethods;
+export {};

package/dist/esm/use-thumbnail.js

@@ -0,0 +1,14 @@
+import { useContext, useMemo } from 'react';
+import { ThumbnailEmitterContext } from './emitter-context';
+export const useThumbnail = () => {
+    const emitter = useContext(ThumbnailEmitterContext);
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const returnValue = useMemo(() => {
+        return {
+            emitter,
+        };
+    }, [emitter]);
+    return returnValue;
+};

package/dist/esm/use-video-controls-resize.d.ts

@@ -0,0 +1,7 @@
+export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
+    allowFullscreen: boolean;
+    playerWidth: number;
+}) => {
+    maxTimeLabelWidth: number;
+    displayVerticalVolumeSlider: boolean;
+};

package/dist/esm/use-video-controls-resize.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { fullscreenIconSize, ICON_SIZE } from './icons';
+import { VOLUME_SLIDER_WIDTH } from './MediaVolumeSlider';
+import { X_PADDING, X_SPACER } from './PlayerControls';
+export const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
+    const resizeInfo = useMemo(() => {
+        const playPauseIconSize = ICON_SIZE;
+        const volumeIconSize = ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
+        const elementsSize = volumeIconSize +
+            playPauseIconSize +
+            _fullscreenIconSize +
+            X_PADDING * 2 +
+            X_SPACER * 2;
+        const maxTimeLabelWidth = playerWidth - elementsSize;
+        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - VOLUME_SLIDER_WIDTH;
+        // If max label width is lower than the volume width
+        // then it means we need to take it's width as the max label width
+        // otherwise we took the available width when volume open
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < VOLUME_SLIDER_WIDTH
+            ? maxTimeLabelWidthWithoutNegativeValue
+            : availableTimeLabelWidthIfVolumeOpen;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + VOLUME_SLIDER_WIDTH;
+        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
+        return {
+            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue,
+            displayVerticalVolumeSlider,
+        };
+    }, [allowFullScreen, playerWidth]);
+    return resizeInfo;
+};

package/dist/esm/utils/calculate-player-size.d.ts

@@ -0,0 +1,9 @@
+import type { StandardLonghandProperties } from 'csstype';
+import type { Size } from './use-element-size';
+export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
+    currentSize: Size | null;
+    width: StandardLonghandProperties['width'] | undefined;
+    height: StandardLonghandProperties['height'] | undefined;
+    compositionWidth: number;
+    compositionHeight: number;
+}) => React.CSSProperties;

package/dist/esm/utils/calculate-player-size.js

@@ -0,0 +1,25 @@
+export const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
+    const aspectRatio = compositionWidth / compositionHeight;
+    if (!currentSize) {
+        return {
+            width: compositionWidth,
+            height: compositionHeight,
+        };
+    }
+    // If has width specified, but no height, specify a default height that satisfies the aspect ratio.
+    if (width !== undefined && height === undefined) {
+        return {
+            height: currentSize.width / aspectRatio,
+        };
+    }
+    // Opposite: If has height specified, evaluate the height and specify a default width.
+    if (height !== undefined && width === undefined) {
+        return {
+            width: currentSize.height * aspectRatio,
+        };
+    }
+    return {
+        width: compositionWidth,
+        height: compositionHeight,
+    };
+};

package/dist/esm/utils/cancellable-promise.d.ts

@@ -0,0 +1,5 @@
+export declare type CancellablePromise = {
+    promise: Promise<unknown>;
+    cancel: () => void;
+};
+export declare const cancellablePromise: (promise: Promise<unknown>) => CancellablePromise;

package/dist/esm/utils/cancellable-promise.js

@@ -0,0 +1,22 @@
+export const cancellablePromise = (promise) => {
+    let isCanceled = false;
+    const wrappedPromise = new Promise((resolve, reject) => {
+        promise
+            .then((value) => {
+            if (isCanceled) {
+                reject({ isCanceled, value });
+                return;
+            }
+            resolve(value);
+        })
+            .catch((error) => {
+            reject({ isCanceled, error });
+        });
+    });
+    return {
+        promise: wrappedPromise,
+        cancel: () => {
+            isCanceled = true;
+        },
+    };
+};

package/dist/esm/utils/delay.d.ts

@@ -0,0 +1 @@
+export declare const delay: (n: number) => Promise<unknown>;

package/dist/esm/utils/delay.js

@@ -0,0 +1,2 @@
+/* eslint-disable no-promise-executor-return */
+export const delay = (n) => new Promise((resolve) => setTimeout(resolve, n));

package/dist/esm/utils/is-node.d.ts

@@ -0,0 +1 @@
+export declare const IS_NODE: boolean;

package/dist/esm/utils/is-node.js

@@ -0,0 +1 @@
+export const IS_NODE = typeof document === 'undefined';

package/dist/esm/utils/preview-size.d.ts

@@ -0,0 +1,8 @@
+export declare type Translation = {
+    x: number;
+    y: number;
+};
+export declare type PreviewSize = {
+    size: number | 'auto';
+    translation: Translation;
+};

package/dist/esm/utils/preview-size.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/props-if-has-props.d.ts

@@ -0,0 +1,5 @@
+export declare type PropsIfHasProps<Props> = {} extends Props ? {
+    inputProps?: Props;
+} : {
+    inputProps: Props;
+};

package/dist/esm/utils/props-if-has-props.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/use-cancellable-promises.d.ts

@@ -0,0 +1,7 @@
+import type { CancellablePromise } from './cancellable-promise';
+declare const useCancellablePromises: () => {
+    appendPendingPromise: (promise: CancellablePromise) => void;
+    removePendingPromise: (promise: CancellablePromise) => void;
+    clearPendingPromises: () => void[];
+};
+export { useCancellablePromises };