@microfox/remotion 1.2.0 → 1.2.2

package/dist/index.d.ts

@@ -0,0 +1,1165 @@
+import React$1, { CSSProperties, ReactNode, ComponentType as ComponentType$1 } from 'react';
+import { CalculateMetadataFunction, VideoConfig } from 'remotion';
+import { z } from 'zod';
+
+type Boundaries = {
+    left?: number | string;
+    top?: number | string;
+    width?: number | string;
+    height?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    zIndex?: number;
+};
+type Timing = {
+    start?: number;
+    duration?: number;
+};
+type CalculatedBoundaries = {
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    width?: number;
+    height?: number;
+    zIndex?: number;
+    reset?: boolean;
+};
+type CalculatedTiming = {
+    startInFrames?: number;
+    durationInFrames?: number;
+    start?: number;
+    duration?: number;
+    fitDurationTo?: string[] | string;
+};
+type Hierarchy = {
+    depth: number;
+    parentIds: string[];
+};
+interface BaseRenderableContext {
+    overrideStyle?: CSSProperties;
+}
+interface RenderableContext extends BaseRenderableContext {
+    boundaries?: CalculatedBoundaries;
+    timing?: CalculatedTiming;
+    hierarchy?: Hierarchy;
+}
+interface InternalRenderableContext extends BaseRenderableContext {
+    boundaries: CalculatedBoundaries;
+    timing?: CalculatedTiming;
+    hierarchy: Hierarchy;
+}
+type RenderableData = {
+    [key: string]: any;
+};
+interface BaseComponentData {
+    id: string;
+    componentId: string;
+    type: ComponentType;
+    data?: RenderableData;
+    context?: RenderableContext;
+    childrenData?: RenderableComponentData[];
+    effects?: BaseEffect[];
+}
+type BaseEffect = string | {
+    id: string;
+    componentId: string;
+    data?: RenderableData;
+    context?: RenderableContext;
+};
+type ComponentType = 'atom' | 'layout' | 'frame' | 'scene' | 'transition';
+interface AtomComponentData extends BaseComponentData {
+    type: 'atom';
+    data?: RenderableData & {
+        boundaries?: Boundaries;
+    };
+    context?: RenderableContext;
+}
+interface LayoutComponentData extends BaseComponentData {
+    type: 'layout';
+    data?: RenderableData & {
+        boundaries?: Boundaries;
+        timing?: Timing;
+    };
+    context?: RenderableContext;
+}
+interface FrameComponentData extends BaseComponentData {
+    type: 'frame';
+    data?: RenderableData & {
+        boundaries?: Boundaries;
+        timing?: Timing;
+    };
+    context?: RenderableContext;
+}
+interface SceneComponentData extends BaseComponentData {
+    type: 'scene';
+    data?: RenderableData & {
+        timing?: Timing;
+    };
+}
+interface TransitionComponentData extends BaseComponentData {
+    type: 'transition';
+    data?: RenderableData & {
+        timing?: Timing;
+    };
+}
+type RenderableComponentData = AtomComponentData | LayoutComponentData | FrameComponentData | SceneComponentData | TransitionComponentData;
+interface BaseRenderableProps {
+    id: string;
+    componentId: string;
+    type: ComponentType;
+    data?: RenderableData;
+    context?: InternalRenderableContext;
+    children?: ReactNode;
+}
+interface BaseRenderableData extends BaseComponentData {
+    childrenData?: RenderableComponentData[];
+    context?: RenderableContext;
+}
+
+interface BoundaryConstraints {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    zIndex?: number;
+}
+interface TimingConstraints {
+    startFrame?: number;
+    durationFrames?: number;
+    delay?: number;
+}
+interface LayoutConstraints {
+    alignment?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    padding?: number;
+    spacing?: number;
+    columns?: number;
+    rows?: number;
+}
+
+interface CompositionContext {
+    childrenData?: RenderableComponentData[];
+    width: number;
+    height: number;
+    duration: number;
+    fps: number;
+    currentFrame: number;
+}
+
+interface ComponentConfig {
+    displayName: string;
+    type?: ComponentType;
+    isInnerSequence?: boolean;
+    [key: string]: any;
+}
+interface ComponentRegistry {
+    [key: string]: {
+        component: React$1.ComponentType<BaseRenderableProps>;
+        config: ComponentConfig;
+    };
+}
+interface RegistryEntry {
+    type: ComponentType;
+    component: React$1.ComponentType<BaseRenderableProps>;
+    config: ComponentConfig;
+    package?: string;
+}
+interface PackageRegistry {
+    [packageName: string]: {
+        [componentName: string]: {
+            component: React$1.ComponentType<BaseRenderableProps>;
+            config: ComponentConfig;
+        };
+    };
+}
+
+declare class ComponentRegistryManager {
+    private registry;
+    private packageRegistry;
+    registerComponent(name: string, component: React$1.ComponentType<any>, type: 'frame' | 'layout' | 'atom', config?: ComponentConfig, packageName?: string): void;
+    registerEffect(name: string, component: React$1.ComponentType<any>, config?: ComponentConfig, packageName?: string): void;
+    getComponent(name: string): React$1.ComponentType<any> | undefined;
+    getComponentConfig(name: string): ComponentConfig | undefined;
+    getComponentWithConfig(name: string): {
+        component: React$1.ComponentType<any>;
+        config: ComponentConfig;
+    } | undefined;
+    registerPackage(packageName: string, components: Record<string, {
+        component: React$1.ComponentType<any>;
+        config: ComponentConfig;
+    }>): void;
+    getPackageComponents(packageName: string): Record<string, {
+        component: React$1.ComponentType<any>;
+        config: ComponentConfig;
+    }> | undefined;
+    getAllComponents(): ComponentRegistry;
+    clear(): void;
+}
+declare const componentRegistry: ComponentRegistryManager;
+declare const registerComponent: (name: string, component: React$1.ComponentType<any>, type: "frame" | "layout" | "atom", config?: ComponentConfig, packageName?: string) => void;
+declare const registerEffect: (name: string, component: React$1.ComponentType<any>, config?: ComponentConfig, packageName?: string) => void;
+declare const registerPackage: (packageName: string, components: Record<string, {
+    component: React$1.ComponentType<any>;
+    config: ComponentConfig;
+}>) => void;
+declare const getComponent: (name: string) => React$1.ComponentType<any>;
+declare const getComponentConfig: (name: string) => ComponentConfig;
+declare const getComponentWithConfig: (name: string) => {
+    component: React$1.ComponentType<any>;
+    config: ComponentConfig;
+};
+
+interface CompositionContextValue {
+    root?: RenderableComponentData[];
+    duration: number;
+}
+interface CompositionProviderProps {
+    children: React$1.ReactNode;
+    value: CompositionContextValue;
+}
+declare const CompositionProvider: React$1.FC<CompositionProviderProps>;
+declare const useComposition: () => CompositionContextValue;
+
+interface CompositionProps extends BaseRenderableData {
+    id: string;
+    style?: React$1.CSSProperties;
+    config: {
+        width: number;
+        height: number;
+        fps: number;
+        duration: number;
+        fitDurationTo?: string | string[];
+    };
+}
+type InputCompositionProps = {
+    childrenData?: RenderableComponentData[];
+    style?: React$1.CSSProperties;
+    config?: {
+        width?: number;
+        height?: number;
+        fps?: number;
+        duration?: number;
+        fitDurationTo?: string;
+    };
+};
+declare const CompositionLayout: ({ childrenData, style, config }: InputCompositionProps) => React$1.JSX.Element;
+declare const calculateCompositionLayoutMetadata: CalculateMetadataFunction<InputCompositionProps>;
+declare const Composition: ({ id, childrenData, config, style }: CompositionProps) => React$1.JSX.Element;
+declare const Player: (props: any) => React$1.JSX.Element;
+
+declare const findMatchingComponents: (childrenData: RenderableComponentData[], targetIds: string[]) => RenderableComponentData[];
+declare const findMatchingComponentsByQuery: (childrenData: RenderableComponentData[], query: {
+    type?: string;
+    componentId?: string;
+}) => RenderableComponentData[];
+declare const calculateComponentDuration: (component: Pick<RenderableComponentData, "data" | "componentId">) => Promise<number | undefined>;
+declare const calculateDuration: (childrenData: RenderableComponentData[], config: {
+    fitDurationTo: string[] | string;
+}) => Promise<number | undefined>;
+declare const setDurationsInContext: (root: InputCompositionProps) => Promise<{
+    childrenData: RenderableComponentData[];
+    style?: React.CSSProperties;
+    config?: {
+        width?: number;
+        height?: number;
+        fps?: number;
+        duration?: number;
+        fitDurationTo?: string;
+    };
+}>;
+
+declare const useRenderContext: () => RenderableContext;
+declare const ComponentRenderer: React$1.FC<BaseRenderableData>;
+
+interface FrameProps extends BaseRenderableProps {
+    data?: {
+        style?: React$1.CSSProperties;
+    };
+}
+declare const Frame: ({ children, data }: FrameProps) => React$1.JSX.Element;
+
+interface SceneFrameProps extends BaseRenderableProps {
+    children?: ReactNode;
+}
+declare const SceneFrame: React$1.FC<SceneFrameProps>;
+
+interface BaseLayoutProps extends BaseRenderableProps {
+    children?: ReactNode;
+    data: {
+        isAbsoluteFill?: boolean;
+        containerProps?: any;
+        childrenProps?: any[];
+        repeatChildrenProps?: boolean;
+    };
+}
+declare const Layout: ComponentType$1<BaseLayoutProps>;
+declare const config$c: ComponentConfig;
+
+type Shape = 'circle' | 'rectangle' | 'star' | 'triangle';
+interface ShapeAtomProps extends BaseRenderableProps {
+    data: {
+        shape: Shape;
+        color: string;
+        rotation?: {
+            duration: number;
+        };
+        style?: React$1.CSSProperties;
+    };
+}
+declare const Atom$5: React$1.FC<ShapeAtomProps>;
+declare const config$b: ComponentConfig;
+
+interface ImageAtomProps extends BaseRenderableProps {
+    data: {
+        src: string;
+        style?: React$1.CSSProperties;
+        className?: string;
+        proxySrc?: string;
+    };
+}
+declare const Atom$4: React$1.FC<ImageAtomProps>;
+declare const config$a: ComponentConfig;
+
+interface FontConfig$1 {
+    family: string;
+    weights?: string[];
+    subsets?: string[];
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    preload?: boolean;
+}
+interface TextAtomData {
+    text: string;
+    style?: React$1.CSSProperties;
+    className?: string;
+    gradient?: string;
+    font?: FontConfig$1;
+    fallbackFonts?: string[];
+    loadingState?: {
+        showLoadingIndicator?: boolean;
+        loadingText?: string;
+        loadingStyle?: React$1.CSSProperties;
+    };
+    errorState?: {
+        showErrorIndicator?: boolean;
+        errorText?: string;
+        errorStyle?: React$1.CSSProperties;
+    };
+}
+interface TextAtomProps extends BaseRenderableProps {
+    data: TextAtomData;
+}
+/**
+ * Enhanced TextAtom with comprehensive dynamic font loading capabilities
+ *
+ * Features:
+ * - Dynamic Google Font loading with simplified API
+ * - Loading states with visual indicators
+ * - Error handling with fallbacks
+ * - Multiple font weights and subsets support
+ * - Font preloading for performance
+ * - Graceful degradation to system fonts
+ */
+declare const Atom$3: React$1.FC<TextAtomProps>;
+declare const config$9: ComponentConfig;
+
+declare const VideoAtomDataProps: z.ZodObject<{
+    src: z.ZodString;
+    srcDuration: z.ZodOptional<z.ZodNumber>;
+    style: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    containerClassName: z.ZodOptional<z.ZodString>;
+    className: z.ZodOptional<z.ZodString>;
+    startFrom: z.ZodOptional<z.ZodNumber>;
+    endAt: z.ZodOptional<z.ZodNumber>;
+    playbackRate: z.ZodOptional<z.ZodNumber>;
+    volume: z.ZodOptional<z.ZodNumber>;
+    muted: z.ZodOptional<z.ZodBoolean>;
+    loop: z.ZodOptional<z.ZodBoolean>;
+    fit: z.ZodOptional<z.ZodEnum<{
+        fill: "fill";
+        none: "none";
+        contain: "contain";
+        cover: "cover";
+        "scale-down": "scale-down";
+    }>>;
+}, z.core.$strip>;
+type VideoAtomDataProps = z.infer<typeof VideoAtomDataProps>;
+/**
+ * Props interface for the VideoAtom component
+ * Extends base renderable props with video-specific data
+ */
+interface VideoAtomProps extends BaseRenderableProps {
+    data: VideoAtomDataProps;
+}
+/**
+ * VideoAtom Component
+ *
+ * A Remotion component that renders video with advanced control features:
+ * - Time-based trimming (start/end points)
+ * - Playback rate and volume control
+ * - Flexible styling and object fit options
+ * - Loop functionality
+ *
+ * @param data - Video configuration object containing all playback and styling settings
+ * @returns Remotion Video component with applied configurations
+ */
+declare const Atom$2: React$1.FC<VideoAtomProps>;
+declare const config$8: ComponentConfig;
+
+declare const AudioAtomDataProps: z.ZodObject<{
+    src: z.ZodString;
+    startFrom: z.ZodOptional<z.ZodNumber>;
+    endAt: z.ZodOptional<z.ZodNumber>;
+    volume: z.ZodOptional<z.ZodNumber>;
+    playbackRate: z.ZodOptional<z.ZodNumber>;
+    muted: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
+        type: z.ZodLiteral<"full">;
+        value: z.ZodBoolean;
+    }, z.core.$strip>, z.ZodObject<{
+        type: z.ZodLiteral<"range">;
+        values: z.ZodArray<z.ZodObject<{
+            start: z.ZodNumber;
+            end: z.ZodNumber;
+        }, z.core.$strip>>;
+    }, z.core.$strip>]>>;
+}, z.core.$strip>;
+type AudioAtomDataProps = z.infer<typeof AudioAtomDataProps>;
+/**
+ * Props interface for the AudioAtom component
+ * Extends base renderable props with audio-specific data
+ */
+interface AudioAtomProps extends BaseRenderableProps {
+    data: AudioAtomDataProps;
+}
+/**
+ * AudioAtom Component
+ *
+ * A Remotion component that renders audio with advanced control features:
+ * - Time-based trimming (start/end points)
+ * - Volume and playback rate control
+ * - Flexible muting (full track or specific time ranges)
+ *
+ * @param data - Audio configuration object containing all playback settings
+ * @returns Remotion Audio component with applied configurations
+ */
+declare const Atom$1: React$1.FC<AudioAtomProps>;
+declare const config$7: ComponentConfig;
+
+declare const LottieAtomDataProps: z.ZodObject<{
+    src: z.ZodString;
+    style: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodAny>>;
+    className: z.ZodOptional<z.ZodString>;
+    loop: z.ZodOptional<z.ZodBoolean>;
+    playbackRate: z.ZodOptional<z.ZodNumber>;
+    direction: z.ZodOptional<z.ZodEnum<{
+        reverse: "reverse";
+        forward: "forward";
+    }>>;
+}, z.core.$strip>;
+type LottieAtomDataProps = z.infer<typeof LottieAtomDataProps>;
+/**
+ * Props interface for the LottieAtom component
+ * Extends base renderable props with Lottie-specific data
+ */
+interface LottieAtomProps extends BaseRenderableProps {
+    data: LottieAtomDataProps;
+}
+/**
+ * LottieAtom Component
+ *
+ * A Remotion component that renders Lottie animations with advanced control features:
+ * - Supports both local and remote Lottie JSON files
+ * - Playback rate control for speed adjustments
+ * - Direction control (forward/reverse)
+ * - Flexible styling options
+ * - Integration with Remotion's animation effects system
+ *
+ * @param data - Lottie configuration object containing all playback and styling settings
+ * @param id - Unique identifier for the component (used for animation effects)
+ * @returns Remotion Lottie component with applied configurations
+ */
+declare const Atom: React$1.FC<LottieAtomProps>;
+/**
+ * Static configuration for LottieAtom
+ * Used for component registration and identification
+ */
+declare const config$6: ComponentConfig;
+
+interface AnimationRange {
+    key: string;
+    val: any;
+    prog: number;
+}
+interface UniversalEffectData {
+    start?: number;
+    duration?: number;
+    type?: 'spring' | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    ranges?: AnimationRange[];
+    targetIds?: string[];
+    mode?: 'wrapper' | 'provider';
+    props?: any;
+    [key: string]: any;
+}
+interface UniversalEffectContextType {
+    animatedStyles: React$1.CSSProperties;
+    targetIds: string[];
+    effectType: string;
+}
+declare const useUniversalEffect: () => UniversalEffectContextType;
+declare const useUniversalEffectOptional: () => UniversalEffectContextType;
+declare const useHasUniversalEffectProvider: () => boolean;
+
+declare const UniversalEffect: React$1.FC<BaseRenderableProps & {
+    effectType?: string;
+    customAnimationLogic?: (effectData: UniversalEffectData, progress: number, frame: number) => React$1.CSSProperties;
+}>;
+declare const UniversalEffectProvider: React$1.FC<{
+    children: ReactNode;
+    data: UniversalEffectData;
+    effectType?: string;
+    customAnimationLogic?: (effectData: UniversalEffectData, progress: number, frame: number) => React$1.CSSProperties;
+    id?: string;
+    componentId?: string;
+    type?: string;
+}>;
+declare const useAnimatedStyles: (componentId: string) => React$1.CSSProperties;
+
+declare const BlurEffect: React$1.FC<BaseRenderableProps>;
+declare const config$5: {
+    displayName: string;
+    description: string;
+    isInnerSequence: boolean;
+    props: {
+        intensity: {
+            type: string;
+            default: number;
+            description: string;
+        };
+        direction: {
+            type: string;
+            values: string[];
+            default: string;
+            description: string;
+        };
+    };
+};
+
+declare const LoopEffect: React$1.FC<BaseRenderableProps>;
+declare const config$4: ComponentConfig;
+
+interface PanEffectData {
+    effectTiming?: 'start' | 'end';
+    panDuration?: number | string;
+    panStart?: number;
+    panEnd?: number;
+    panStartDelay?: number | string;
+    panEndDelay?: number | string;
+    panDirection?: 'left' | 'right' | 'up' | 'down' | 'diagonal' | 'custom';
+    panDistance?: number | [number, number][];
+    loopTimes?: number;
+    panStartPosition?: [number, number] | string;
+    panEndPosition?: [number, number] | string;
+    animationType?: 'linear' | 'spring' | 'ease-in' | 'ease-out' | 'ease-in-out';
+}
+declare const PanEffect: React$1.FC<BaseRenderableProps>;
+declare const config$3: ComponentConfig;
+
+interface ZoomEffectData {
+    effectTiming?: 'start' | 'end';
+    zoomDuration?: number | string;
+    zoomStart?: number;
+    zoomEnd?: number;
+    zoomStartDelay?: number | string;
+    zoomEndDelay?: number | string;
+    zoomDirection?: 'in' | 'out';
+    zoomDepth?: number | [number, number][];
+    loopTimes?: number;
+    zoomPosition?: [number, number] | string;
+    animationType?: 'linear' | 'spring' | 'ease-in' | 'ease-out' | 'ease-in-out';
+}
+declare const ZoomEffect: React$1.FC<BaseRenderableProps>;
+declare const config$2: ComponentConfig;
+
+interface ShakeEffectData extends UniversalEffectData {
+    amplitude?: number;
+    frequency?: number;
+    decay?: boolean;
+    axis?: 'x' | 'y' | 'both';
+}
+declare const ShakeEffect: React$1.FC<BaseRenderableProps>;
+declare const config$1: {
+    displayName: string;
+    description: string;
+    isInnerSequence: boolean;
+    props: {
+        amplitude: {
+            type: string;
+            default: number;
+            description: string;
+        };
+        frequency: {
+            type: string;
+            default: number;
+            description: string;
+        };
+        decay: {
+            type: string;
+            default: boolean;
+            description: string;
+        };
+        axis: {
+            type: string;
+            values: string[];
+            default: string;
+            description: string;
+        };
+    };
+};
+
+interface StretchEffectData extends UniversalEffectData {
+    stretchFrom?: number;
+    stretchTo?: number;
+    springConfig?: {
+        stiffness?: number;
+        damping?: number;
+        mass?: number;
+    };
+}
+declare const StretchEffect: React$1.FC<BaseRenderableProps>;
+declare const config: {
+    displayName: string;
+    description: string;
+    isInnerSequence: boolean;
+    props: {
+        stretchFrom: {
+            type: string;
+            default: number;
+            description: string;
+        };
+        stretchTo: {
+            type: string;
+            default: number;
+            description: string;
+        };
+    };
+};
+
+declare const GenericEffectPresets: {
+    fadeInPreset: AnimationRange[];
+    fadeOutPreset: AnimationRange[];
+    scaleInPreset: AnimationRange[];
+    scaleOutPreset: AnimationRange[];
+    slideInLeftPreset: AnimationRange[];
+    slideInRightPreset: AnimationRange[];
+    slideInTopPreset: AnimationRange[];
+    slideInBottomPreset: AnimationRange[];
+    bouncePreset: AnimationRange[];
+    pulsePreset: AnimationRange[];
+    rotateInPreset: AnimationRange[];
+    blurInPreset: AnimationRange[];
+    fadeInScalePreset: AnimationRange[];
+    slideInFadePreset: AnimationRange[];
+    slideInLeftStringPreset: AnimationRange[];
+    slideInRightStringPreset: AnimationRange[];
+    slideInTopStringPreset: AnimationRange[];
+    slideInBottomStringPreset: AnimationRange[];
+    rotateInStringPreset: AnimationRange[];
+    blurInStringPreset: AnimationRange[];
+    scaleInStringPreset: AnimationRange[];
+    slideInLeftResponsivePreset: AnimationRange[];
+    slideInTopResponsivePreset: AnimationRange[];
+    backgroundColorPreset: AnimationRange[];
+    borderRadiusPreset: AnimationRange[];
+    boxShadowPreset: AnimationRange[];
+    fontSizePreset: AnimationRange[];
+    letterSpacingPreset: AnimationRange[];
+    lineHeightPreset: AnimationRange[];
+    textShadowPreset: AnimationRange[];
+    widthPreset: AnimationRange[];
+    heightPreset: AnimationRange[];
+    marginPreset: AnimationRange[];
+    paddingPreset: AnimationRange[];
+    morphingCardPreset: AnimationRange[];
+    textRevealPreset: AnimationRange[];
+};
+
+type GenericEffectData = UniversalEffectData;
+
+declare const useComponentRegistry: () => {
+    registerComponent: any;
+    registerPackage: any;
+    getComponent: any;
+    getAllComponents: any;
+};
+
+interface UseBoundaryCalculationProps {
+    parentBoundaries: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    constraints: BoundaryConstraints;
+    layout?: LayoutConstraints;
+}
+declare const useBoundaryCalculation: ({ parentBoundaries, constraints, layout, }: UseBoundaryCalculationProps) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zIndex: number;
+};
+
+declare function buildLayoutHook<T extends z.ZodSchema>(schema: T, defaultValue: z.infer<T>): () => z.core.output<T>;
+
+interface FontConfig {
+    family: string;
+    weights?: string[];
+    subsets?: string[];
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    preload?: boolean;
+}
+interface FontLoadingOptions {
+    subsets?: string[];
+    weights?: string[];
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    preload?: boolean;
+}
+/**
+ * Load a Google Font dynamically using dynamic imports
+ * @param fontFamily - The font family name (e.g., 'Inter', 'Roboto')
+ * @param options - Font loading options
+ * @returns Promise that resolves with the fontFamily CSS value
+ */
+declare const loadGoogleFont: (fontFamily: string, options?: FontLoadingOptions) => Promise<string>;
+/**
+ * Load multiple fonts in parallel
+ * @param fonts - Array of font configurations
+ * @returns Promise that resolves with a map of font family names to CSS values
+ */
+declare const loadMultipleFonts: (fonts: Array<{
+    family: string;
+    options?: FontLoadingOptions;
+}>) => Promise<Map<string, string>>;
+/**
+ * Get font family CSS value from cache
+ * @param fontFamily - The font family name
+ * @param options - Font loading options
+ * @returns CSS font-family value or undefined if not loaded
+ */
+declare const getLoadedFontFamily: (fontFamily: string, options?: FontLoadingOptions) => string | undefined;
+/**
+ * Preload common fonts for better performance
+ */
+declare const preloadCommonFonts: () => Promise<Map<string, string>>;
+/**
+ * Check if a font is already loaded
+ * @param fontFamily - The font family name
+ * @param options - Font loading options
+ * @returns boolean indicating if font is loaded
+ */
+declare const isFontLoaded: (fontFamily: string, options?: FontLoadingOptions) => boolean;
+/**
+ * Clear font cache (useful for testing or memory management)
+ */
+declare const clearFontCache: () => void;
+/**
+ * Get all loaded fonts
+ * @returns Map of loaded fonts
+ */
+declare const getLoadedFonts: () => Map<string, string>;
+/**
+ * Check if a font is available in @remotion/google-fonts
+ * @param fontFamily - The font family name to check
+ * @returns Promise that resolves to boolean indicating if font is available
+ */
+declare const isFontAvailable: (fontFamily: string) => Promise<boolean>;
+/**
+ * Get normalized font name for import
+ * @param fontFamily - The font family name
+ * @returns Normalized font name suitable for import
+ */
+declare const getNormalizedFontName: (fontFamily: string) => string;
+
+interface UseFontLoaderOptions {
+    preload?: boolean;
+    onLoad?: (fontFamily: string, cssValue: string) => void;
+    onError?: (fontFamily: string, error: Error) => void;
+}
+interface FontLoaderState {
+    loadedFonts: Map<string, string>;
+    loadingFonts: Set<string>;
+    errorFonts: Map<string, Error>;
+}
+/**
+ * Hook for managing dynamic font loading in Remotion components
+ */
+declare const useFontLoader: (options?: UseFontLoaderOptions) => {
+    loadedFonts: Map<string, string>;
+    loadingFonts: Set<string>;
+    errorFonts: Map<string, Error>;
+    loadFont: (fontFamily: string, fontOptions?: FontLoadingOptions) => Promise<string>;
+    loadMultipleFonts: (fonts: Array<{
+        family: string;
+        options?: FontLoadingOptions;
+    }>) => Promise<Map<string, string>>;
+    isFontReady: (fontFamily: string, options?: FontLoadingOptions) => boolean;
+    areFontsReady: (fontFamilies: Array<{
+        family: string;
+        options?: FontLoadingOptions;
+    }>) => boolean;
+    getFontFamily: (fontFamily: string, options?: FontLoadingOptions) => string | undefined;
+    getFontError: (fontFamily: string) => Error | undefined;
+    clearErrors: () => void;
+};
+/**
+ * Hook for loading a single font with automatic loading and delayRender support
+ */
+declare const useFont: (fontFamily: string, options?: FontLoadingOptions & UseFontLoaderOptions) => {
+    loadedFonts: Map<string, string>;
+    loadingFonts: Set<string>;
+    errorFonts: Map<string, Error>;
+    loadMultipleFonts: (fonts: Array<{
+        family: string;
+        options?: FontLoadingOptions;
+    }>) => Promise<Map<string, string>>;
+    areFontsReady: (fontFamilies: Array<{
+        family: string;
+        options?: FontLoadingOptions;
+    }>) => boolean;
+    clearErrors: () => void;
+    isLoaded: boolean;
+    error: Error;
+    isReady: boolean;
+    fontFamily: string;
+};
+
+declare const createRootContext: (width: number, height: number, duration: number, fps: number) => RenderableContext;
+declare const mergeContexts: (parent: RenderableContext, child: Partial<RenderableContext>) => RenderableContext;
+
+declare const calculateGridPosition: (index: number, columns: number, cellWidth: number, cellHeight: number, spacing: number) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare const calculateCircularPosition: (index: number, total: number, radius: number, centerX: number, centerY: number) => {
+    x: number;
+    y: number;
+};
+
+/**
+ * Image Proxy Utilities
+ *
+ * Helper functions for working with image proxying in Remotion components
+ */
+/**
+ * Creates a proxy URL for an external image
+ * @param imageUrl - The original image URL
+ * @param proxyEndpoint - The proxy endpoint (defaults to local API)
+ * @returns The proxied URL
+ */
+declare const createImageProxyUrl: (imageUrl: string, proxyEndpoint?: string) => string;
+/**
+ * Creates image data with proxy fallback
+ * @param src - The original image source
+ * @param proxyEndpoint - Optional custom proxy endpoint
+ * @returns Image data object with proxySrc configured
+ */
+declare const createImageDataWithProxy: (src: string, proxyEndpoint?: string) => {
+    src: string;
+    proxySrc: string;
+    style: {};
+    className: string;
+};
+/**
+ * Checks if a URL needs proxying (external HTTP/HTTPS URLs)
+ * @param url - The URL to check
+ * @returns True if the URL needs proxying
+ */
+declare const needsProxying: (url: string) => boolean;
+
+/**
+ * Finds a component in the root data by its ID
+ */
+declare const findComponentById: (root: RenderableComponentData[] | undefined, targetId: string) => RenderableComponentData | null;
+/**
+ * Finds the parent component of a given component
+ */
+declare const findParentComponent: (root: RenderableComponentData[] | undefined, targetId: string) => RenderableComponentData | null;
+/**
+ * Calculates the hierarchy for a component based on its position in the root data
+ */
+declare const calculateHierarchy: (root: RenderableComponentData[] | undefined, componentId: string, currentContext?: RenderableContext) => Hierarchy;
+/**
+ * Calculates timing for a component, inheriting from parent if duration is not provided
+ */
+declare const calculateTimingWithInheritance: (component: RenderableComponentData, root: RenderableComponentData[] | undefined, videoConfig: VideoConfig) => CalculatedTiming;
+
+declare const NextjsLogo: React$1.FC;
+declare const nextjsLogoConfig: ComponentConfig;
+
+declare const Rings: React$1.FC<{
+    context?: RenderableContext;
+    data?: RenderableData;
+}>;
+declare const ringsConfig: ComponentConfig;
+
+interface LayoutProps$1 extends BaseRenderableProps {
+    children: React$1.ReactNode | React$1.ReactNode[];
+}
+
+declare const RippleOutTransitionSchema: z.ZodObject<{
+    progress: z.ZodNumber;
+    logoOut: z.ZodNumber;
+}, z.core.$strip>;
+declare const useRippleOutLayout: () => {
+    progress: number;
+    logoOut: number;
+};
+type RippleOutTransitionData = z.infer<typeof RippleOutTransitionSchema>;
+declare const RippleOutLayout: React$1.FC<LayoutProps$1>;
+declare const rippleOutLayoutConfig: ComponentConfig;
+
+interface LayoutProps extends BaseRenderableProps {
+    children?: React$1.ReactNode;
+}
+declare const TextFade: (props: LayoutProps) => React$1.JSX.Element;
+declare const textFadeConfig: ComponentConfig;
+
+interface WaveformConfig {
+    audioSrc: string;
+    useFrequencyData?: boolean;
+    numberOfSamples?: number;
+    windowInSeconds?: number;
+    dataOffsetInSeconds?: number;
+    normalize?: boolean;
+    height?: number;
+    width?: number;
+    color?: string;
+    strokeWidth?: number;
+    backgroundColor?: string;
+    amplitude?: number;
+    smoothing?: boolean;
+    posterize?: number;
+}
+interface WaveformContextType {
+    waveformData: number[] | null;
+    frequencyData: number[] | null;
+    amplitudes: number[] | null;
+    audioData: any;
+    frame: number;
+    fps: number;
+    config: WaveformConfig;
+    width: number;
+    height: number;
+    bass: number | null;
+    mid: number | null;
+    treble: number | null;
+    bassValues?: number[] | null;
+    midValues?: number[] | null;
+    trebleValues?: number[] | null;
+}
+declare const useWaveformContext: () => WaveformContextType;
+interface WaveformProps {
+    config: WaveformConfig;
+    children?: ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+declare const Waveform: React$1.FC<WaveformProps>;
+
+interface UseWaveformDataConfig {
+    audioSrc: string;
+    numberOfSamples: number;
+    windowInSeconds: number;
+    dataOffsetInSeconds?: number;
+    normalize?: boolean;
+    frame: number;
+    fps: number;
+    posterize?: number;
+    includeFrequencyData?: boolean;
+    minDb?: number;
+    maxDb?: number;
+}
+interface UseWaveformDataReturn {
+    waveformData: number[] | null;
+    frequencyData: number[] | null;
+    amplitudes: number[] | null;
+    audioData: any;
+    isLoading: boolean;
+    error: string | null;
+    bass: number | null;
+    bassValues?: number[] | null;
+    mid: number | null;
+    midValues?: number[] | null;
+    treble: number | null;
+    trebleValues?: number[] | null;
+}
+declare const useWaveformData: (config: UseWaveformDataConfig) => UseWaveformDataReturn;
+
+interface WaveformLineDataProps {
+    config: WaveformConfig & {
+        useFrequencyData?: boolean;
+    };
+    className?: string;
+    style?: React$1.CSSProperties;
+    strokeColor?: string;
+    strokeWidth?: number;
+    strokeLinecap?: 'butt' | 'round' | 'square';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel';
+    fill?: string;
+    opacity?: number;
+    centerLine?: boolean;
+    centerLineColor?: string;
+    centerLineWidth?: number;
+    beatSync?: boolean;
+    bpm?: number;
+    beatThreshold?: number;
+    beatAmplitudeMultiplier?: number;
+    beatAnimationDuration?: number;
+    smoothAnimation?: boolean;
+    waveSpacing?: number;
+    waveSegments?: number;
+    waveOffset?: number;
+    waveDirection?: 'horizontal' | 'vertical';
+    amplitudeCurve?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce';
+    animationSpeed?: number;
+    pulseOnBeat?: boolean;
+    pulseColor?: string;
+    pulseScale?: number;
+}
+interface WaveformLineProps extends BaseRenderableData {
+    data: WaveformLineDataProps;
+}
+declare const WaveformLine: React$1.FC<WaveformLineProps>;
+
+interface WaveformHistogramDataProps {
+    config: any;
+    className?: string;
+    style?: React$1.CSSProperties;
+    barColor?: string;
+    barWidth?: number;
+    barSpacing?: number;
+    barBorderRadius?: number;
+    opacity?: number;
+    multiplier?: number;
+    horizontalSymmetry?: boolean;
+    verticalMirror?: boolean;
+    waveDirection?: 'right-to-left' | 'left-to-right';
+    histogramStyle?: 'centered' | 'full-width';
+    amplitude?: number;
+    gradientStartColor?: string;
+    gradientEndColor?: string;
+    gradientDirection?: 'vertical' | 'horizontal';
+    gradientStyle?: 'mirrored' | 'normal';
+}
+interface WaveformHistogramProps extends BaseRenderableData {
+    data: WaveformHistogramDataProps;
+}
+declare const WaveformHistogram: React$1.FC<WaveformHistogramProps>;
+
+interface WaveformHistogramRangedDataProps {
+    config: any;
+    className?: string;
+    style?: React$1.CSSProperties;
+    barColor?: string;
+    barWidth?: number;
+    barSpacing?: number;
+    barBorderRadius?: number;
+    opacity?: number;
+    horizontalSymmetry?: boolean;
+    verticalMirror?: boolean;
+    histogramStyle?: 'centered' | 'full-width';
+    waveDirection?: 'right-to-left' | 'left-to-right';
+    amplitude?: number;
+    showFrequencyRanges?: boolean;
+    rangeDividerColor?: string;
+    rangeLabels?: boolean;
+    bassBarColor?: string;
+    midBarColor?: string;
+    trebleBarColor?: string;
+    gradientStartColor?: string;
+    gradientEndColor?: string;
+    gradientDirection?: 'vertical' | 'horizontal';
+    gradientStyle?: 'mirrored' | 'normal';
+}
+interface WaveformHistogramRangedProps extends BaseRenderableData {
+    data: WaveformHistogramRangedDataProps;
+}
+declare const WaveformHistogramRanged: React$1.FC<WaveformHistogramRangedProps>;
+
+interface WaveformCircleDataProps {
+    config: any;
+    className?: string;
+    style?: React$1.CSSProperties;
+    strokeColor?: string;
+    strokeWidth?: number;
+    fill?: string;
+    opacity?: number;
+    radius?: number;
+    centerX?: number;
+    centerY?: number;
+    startAngle?: number;
+    endAngle?: number;
+    amplitude?: number;
+    rotationSpeed?: number;
+    gradientStartColor?: string;
+    gradientEndColor?: string;
+}
+interface WaveformCircleProps extends BaseRenderableData {
+    data: WaveformCircleDataProps;
+}
+declare const WaveformCircle: React$1.FC<WaveformCircleProps>;
+
+declare const WaveformPresets: {
+    stopgapLine: (props: WaveformLineDataProps) => {
+        componentId: string;
+        type: string;
+        data: {
+            config: {
+                audioSrc: string;
+                useFrequencyData?: boolean;
+                numberOfSamples: number;
+                windowInSeconds: number;
+                dataOffsetInSeconds?: number;
+                normalize?: boolean;
+                height: number;
+                width: number;
+                color?: string;
+                strokeWidth?: number;
+                backgroundColor?: string;
+                amplitude: number;
+                smoothing?: boolean;
+                posterize: number;
+            };
+            className?: string;
+            style?: React.CSSProperties;
+            strokeColor: string;
+            strokeWidth: number;
+            strokeLinecap: string;
+            strokeLinejoin?: "miter" | "round" | "bevel";
+            fill?: string;
+            opacity: number;
+            centerLine?: boolean;
+            centerLineColor?: string;
+            centerLineWidth?: number;
+            beatSync?: boolean;
+            bpm?: number;
+            beatThreshold?: number;
+            beatAmplitudeMultiplier?: number;
+            beatAnimationDuration?: number;
+            smoothAnimation: boolean;
+            waveSpacing?: number;
+            waveSegments?: number;
+            waveOffset?: number;
+            waveDirection?: "horizontal" | "vertical";
+            amplitudeCurve: string;
+            animationSpeed: number;
+            pulseOnBeat?: boolean;
+            pulseColor?: string;
+            pulseScale?: number;
+        };
+    };
+};
+
+export { type AnimationRange, Atom$1 as AudioAtom, config$7 as AudioAtomConfig, AudioAtomDataProps, type BaseComponentData, type BaseEffect, Layout as BaseLayout, config$c as BaseLayoutConfig, type BaseRenderableData, type BaseRenderableProps, BlurEffect, config$5 as BlurEffectConfig, type Boundaries, type BoundaryConstraints, type CalculatedBoundaries, type CalculatedTiming, type ComponentConfig, type ComponentRegistry, ComponentRenderer, type ComponentType, Composition, type CompositionContext, CompositionLayout, CompositionProvider, type FontConfig, type FontLoaderState, type FontLoadingOptions, Frame, type GenericEffectData, GenericEffectPresets, type Hierarchy, Atom$4 as ImageAtom, config$a as ImageAtomConfig, type InputCompositionProps, type InternalRenderableContext, type LayoutConstraints, LoopEffect, config$4 as LoopEffectConfig, Atom as LottieAtom, config$6 as LottieAtomConfig, LottieAtomDataProps, NextjsLogo, type PackageRegistry, PanEffect, config$3 as PanEffectConfig, type PanEffectData, Player, type RegistryEntry, type RenderableComponentData, type RenderableContext, type RenderableData, Rings, RippleOutLayout, type RippleOutTransitionData, SceneFrame, ShakeEffect, config$1 as ShakeEffectConfig, type ShakeEffectData, Atom$5 as ShapeAtom, config$b as ShapeAtomConfig, StretchEffect, config as StretchEffectConfig, type StretchEffectData, Atom$3 as TextAtom, config$9 as TextAtomConfig, type TextAtomData, TextFade, type Timing, type TimingConstraints, UniversalEffect, type UniversalEffectData, UniversalEffectProvider, type UseFontLoaderOptions, type UseWaveformDataConfig, type UseWaveformDataReturn, Atom$2 as VideoAtom, config$8 as VideoAtomConfig, VideoAtomDataProps, Waveform, WaveformCircle, type WaveformCircleDataProps, type WaveformCircleProps, type WaveformConfig, type WaveformContextType, WaveformHistogram, type WaveformHistogramDataProps, type WaveformHistogramProps, WaveformHistogramRanged, type WaveformHistogramRangedDataProps, type WaveformHistogramRangedProps, WaveformLine, type WaveformLineDataProps, type WaveformLineProps, WaveformPresets, type WaveformProps, ZoomEffect, config$2 as ZoomEffectConfig, type ZoomEffectData, buildLayoutHook, calculateCircularPosition, calculateComponentDuration, calculateCompositionLayoutMetadata, calculateDuration, calculateGridPosition, calculateHierarchy, calculateTimingWithInheritance, clearFontCache, componentRegistry, createImageDataWithProxy, createImageProxyUrl, createRootContext, findComponentById, findMatchingComponents, findMatchingComponentsByQuery, findParentComponent, getComponent, getComponentConfig, getComponentWithConfig, getLoadedFontFamily, getLoadedFonts, getNormalizedFontName, isFontAvailable, isFontLoaded, loadGoogleFont, loadMultipleFonts, mergeContexts, needsProxying, nextjsLogoConfig, preloadCommonFonts, registerComponent, registerEffect, registerPackage, ringsConfig, rippleOutLayoutConfig, setDurationsInContext, textFadeConfig, useAnimatedStyles, useBoundaryCalculation, useComponentRegistry, useComposition, useFont, useFontLoader, useHasUniversalEffectProvider, useRenderContext, useRippleOutLayout, useUniversalEffect, useUniversalEffectOptional, useWaveformContext, useWaveformData };