@json-render/remotion 0.4.0

package/dist/server.d.ts

@@ -0,0 +1,426 @@
+import * as _json_render_core from '@json-render/core';
+import { Catalog, InferCatalogComponents, InferComponentProps } from '@json-render/core';
+export { Spec } from '@json-render/core';
+import { z } from 'zod';
+import { ReactNode } from 'react';
+
+/**
+ * The schema for @json-render/remotion
+ *
+ * This schema is fundamentally different from the React element tree schema.
+ * It's timeline-based, designed for video composition:
+ *
+ * - Spec: A composition with tracks containing timed clips
+ * - Catalog: Video components (scenes, overlays, etc.) and effects
+ *
+ * This demonstrates that json-render is truly agnostic - different renderers
+ * can have completely different spec formats.
+ */
+declare const schema: _json_render_core.Schema<{
+    spec: _json_render_core.SchemaType<"object", {
+        /** Composition settings */
+        composition: _json_render_core.SchemaType<"object", {
+            /** Unique composition ID */
+            id: _json_render_core.SchemaType<"string", unknown>;
+            /** Frames per second */
+            fps: _json_render_core.SchemaType<"number", unknown>;
+            /** Width in pixels */
+            width: _json_render_core.SchemaType<"number", unknown>;
+            /** Height in pixels */
+            height: _json_render_core.SchemaType<"number", unknown>;
+            /** Total duration in frames */
+            durationInFrames: _json_render_core.SchemaType<"number", unknown>;
+        }>;
+        /** Timeline tracks (like layers in video editing) */
+        tracks: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"object", {
+            /** Unique track ID */
+            id: _json_render_core.SchemaType<"string", unknown>;
+            /** Track name for organization */
+            name: _json_render_core.SchemaType<"string", unknown>;
+            /** Track type: "video" | "audio" | "overlay" | "text" */
+            type: _json_render_core.SchemaType<"string", unknown>;
+            /** Whether track is muted/hidden */
+            enabled: _json_render_core.SchemaType<"boolean", unknown>;
+        }>>;
+        /** Clips placed on the timeline */
+        clips: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"object", {
+            /** Unique clip ID */
+            id: _json_render_core.SchemaType<"string", unknown>;
+            /** Which track this clip belongs to */
+            trackId: _json_render_core.SchemaType<"string", unknown>;
+            /** Component type from catalog */
+            component: _json_render_core.SchemaType<"ref", string>;
+            /** Component props */
+            props: _json_render_core.SchemaType<"propsOf", string>;
+            /** Start frame (when clip begins) */
+            from: _json_render_core.SchemaType<"number", unknown>;
+            /** Duration in frames */
+            durationInFrames: _json_render_core.SchemaType<"number", unknown>;
+            /** Transition in effect */
+            transitionIn: _json_render_core.SchemaType<"object", {
+                type: _json_render_core.SchemaType<"ref", string>;
+                durationInFrames: _json_render_core.SchemaType<"number", unknown>;
+            }>;
+            /** Transition out effect */
+            transitionOut: _json_render_core.SchemaType<"object", {
+                type: _json_render_core.SchemaType<"ref", string>;
+                durationInFrames: _json_render_core.SchemaType<"number", unknown>;
+            }>;
+        }>>;
+        /** Audio configuration */
+        audio: _json_render_core.SchemaType<"object", {
+            /** Background music/audio clips */
+            tracks: _json_render_core.SchemaType<"array", _json_render_core.SchemaType<"object", {
+                id: _json_render_core.SchemaType<"string", unknown>;
+                src: _json_render_core.SchemaType<"string", unknown>;
+                from: _json_render_core.SchemaType<"number", unknown>;
+                durationInFrames: _json_render_core.SchemaType<"number", unknown>;
+                volume: _json_render_core.SchemaType<"number", unknown>;
+            }>>;
+        }>;
+    }>;
+    catalog: _json_render_core.SchemaType<"object", {
+        /** Video component definitions (scenes, overlays, etc.) */
+        components: _json_render_core.SchemaType<"map", {
+            /** Zod schema for component props */
+            props: _json_render_core.SchemaType<"zod", unknown>;
+            /** Component type: "scene" | "overlay" | "text" | "image" | "video" */
+            type: _json_render_core.SchemaType<"string", unknown>;
+            /** Default duration in frames (can be overridden per clip) */
+            defaultDuration: _json_render_core.SchemaType<"number", unknown>;
+            /** Description for AI generation hints */
+            description: _json_render_core.SchemaType<"string", unknown>;
+        }>;
+        /** Transition effect definitions */
+        transitions: _json_render_core.SchemaType<"map", {
+            /** Default duration in frames */
+            defaultDuration: _json_render_core.SchemaType<"number", unknown>;
+            /** Description for AI generation hints */
+            description: _json_render_core.SchemaType<"string", unknown>;
+        }>;
+        /** Effect definitions (filters, animations, etc.) */
+        effects: _json_render_core.SchemaType<"map", {
+            /** Zod schema for effect params */
+            params: _json_render_core.SchemaType<"zod", unknown>;
+            /** Description for AI generation hints */
+            description: _json_render_core.SchemaType<"string", unknown>;
+        }>;
+    }>;
+}>;
+/**
+ * Type for the Remotion schema
+ */
+type RemotionSchema = typeof schema;
+/**
+ * Infer the spec type from a catalog
+ */
+type RemotionSpec<TCatalog> = typeof schema extends {
+    createCatalog: (catalog: TCatalog) => {
+        _specType: infer S;
+    };
+} ? S : never;
+
+/**
+ * Frame information passed to video components
+ */
+interface FrameContext {
+    /** Current frame number */
+    frame: number;
+    /** Frames per second */
+    fps: number;
+    /** Total duration in frames */
+    durationInFrames: number;
+    /** Width in pixels */
+    width: number;
+    /** Height in pixels */
+    height: number;
+}
+/**
+ * Context passed to video component render functions
+ */
+interface VideoComponentContext<C extends Catalog, K extends keyof InferCatalogComponents<C>> {
+    /** Component props from the spec */
+    props: InferComponentProps<C, K>;
+    /** Frame information */
+    frame: FrameContext;
+    /** Children (for container components) */
+    children?: ReactNode;
+}
+/**
+ * Video component render function type
+ *
+ * @example
+ * const TitleCard: VideoComponentFn<typeof catalog, 'TitleCard'> = ({ props, frame }) => {
+ *   const opacity = interpolate(frame.frame, [0, 30], [0, 1]);
+ *   return <div style={{ opacity }}>{props.title}</div>;
+ * };
+ */
+type VideoComponentFn<C extends Catalog, K extends keyof InferCatalogComponents<C>> = (ctx: VideoComponentContext<C, K>) => ReactNode;
+/**
+ * Registry of all video component render functions for a catalog
+ *
+ * @example
+ * const components: VideoComponents<typeof myCatalog> = {
+ *   TitleCard: ({ props, frame }) => <TitleCard {...props} />,
+ *   ImageSlide: ({ props }) => <Img src={props.src} />,
+ * };
+ */
+type VideoComponents<C extends Catalog> = {
+    [K in keyof InferCatalogComponents<C>]: VideoComponentFn<C, K>;
+};
+/**
+ * Transition render function
+ * Returns a style object to apply during the transition
+ */
+type TransitionFn = (progress: number) => React.CSSProperties;
+/**
+ * Built-in transition types
+ */
+type BuiltInTransition = "fade" | "slideLeft" | "slideRight" | "slideUp" | "slideDown" | "zoom" | "wipe";
+/**
+ * Infer effect params from catalog
+ */
+type InferCatalogEffects<C extends Catalog> = C extends {
+    data: {
+        effects: infer E;
+    };
+} ? E : never;
+/**
+ * Effect handler function
+ */
+type EffectFn<C extends Catalog, K extends keyof InferCatalogEffects<C>> = InferCatalogEffects<C>[K] extends {
+    params: {
+        _output: infer P;
+    };
+} ? (params: P, frame: FrameContext) => React.CSSProperties : (params: undefined, frame: FrameContext) => React.CSSProperties;
+/**
+ * Registry of all effect handlers for a catalog
+ */
+type Effects<C extends Catalog> = {
+    [K in keyof InferCatalogEffects<C>]: EffectFn<C, K>;
+};
+
+/**
+ * Standard component definitions for Remotion catalogs
+ *
+ * These can be used directly or extended with custom components.
+ */
+declare const standardComponentDefinitions: {
+    TitleCard: {
+        props: z.ZodObject<{
+            title: z.ZodString;
+            subtitle: z.ZodNullable<z.ZodString>;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+            textColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    ImageSlide: {
+        props: z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            fit: z.ZodNullable<z.ZodEnum<{
+                cover: "cover";
+                contain: "contain";
+            }>>;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    SplitScreen: {
+        props: z.ZodObject<{
+            leftTitle: z.ZodString;
+            rightTitle: z.ZodString;
+            leftColor: z.ZodNullable<z.ZodString>;
+            rightColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    QuoteCard: {
+        props: z.ZodObject<{
+            quote: z.ZodString;
+            author: z.ZodNullable<z.ZodString>;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    StatCard: {
+        props: z.ZodObject<{
+            value: z.ZodString;
+            label: z.ZodString;
+            prefix: z.ZodNullable<z.ZodString>;
+            suffix: z.ZodNullable<z.ZodString>;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    TypingText: {
+        props: z.ZodObject<{
+            text: z.ZodString;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+            textColor: z.ZodNullable<z.ZodString>;
+            fontSize: z.ZodNullable<z.ZodNumber>;
+            fontFamily: z.ZodNullable<z.ZodEnum<{
+                monospace: "monospace";
+                "sans-serif": "sans-serif";
+                serif: "serif";
+            }>>;
+            showCursor: z.ZodNullable<z.ZodBoolean>;
+            cursorChar: z.ZodNullable<z.ZodString>;
+            charsPerSecond: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    LowerThird: {
+        props: z.ZodObject<{
+            name: z.ZodString;
+            title: z.ZodNullable<z.ZodString>;
+            backgroundColor: z.ZodNullable<z.ZodString>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    TextOverlay: {
+        props: z.ZodObject<{
+            text: z.ZodString;
+            position: z.ZodNullable<z.ZodEnum<{
+                top: "top";
+                center: "center";
+                bottom: "bottom";
+            }>>;
+            fontSize: z.ZodNullable<z.ZodEnum<{
+                small: "small";
+                medium: "medium";
+                large: "large";
+            }>>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    LogoBug: {
+        props: z.ZodObject<{
+            position: z.ZodNullable<z.ZodEnum<{
+                "top-left": "top-left";
+                "top-right": "top-right";
+                "bottom-left": "bottom-left";
+                "bottom-right": "bottom-right";
+            }>>;
+            opacity: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+    VideoClip: {
+        props: z.ZodObject<{
+            src: z.ZodString;
+            startFrom: z.ZodNullable<z.ZodNumber>;
+            volume: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        type: string;
+        defaultDuration: number;
+        description: string;
+    };
+};
+/**
+ * Standard transition definitions for Remotion catalogs
+ */
+declare const standardTransitionDefinitions: {
+    fade: {
+        defaultDuration: number;
+        description: string;
+    };
+    slideLeft: {
+        defaultDuration: number;
+        description: string;
+    };
+    slideRight: {
+        defaultDuration: number;
+        description: string;
+    };
+    slideUp: {
+        defaultDuration: number;
+        description: string;
+    };
+    slideDown: {
+        defaultDuration: number;
+        description: string;
+    };
+    zoom: {
+        defaultDuration: number;
+        description: string;
+    };
+    wipe: {
+        defaultDuration: number;
+        description: string;
+    };
+    none: {
+        defaultDuration: number;
+        description: string;
+    };
+};
+/**
+ * Standard effect definitions for Remotion catalogs
+ */
+declare const standardEffectDefinitions: {
+    kenBurns: {
+        params: z.ZodObject<{
+            startScale: z.ZodNumber;
+            endScale: z.ZodNumber;
+            panX: z.ZodNullable<z.ZodNumber>;
+            panY: z.ZodNullable<z.ZodNumber>;
+        }, z.core.$strip>;
+        description: string;
+    };
+    pulse: {
+        params: z.ZodObject<{
+            intensity: z.ZodNumber;
+        }, z.core.$strip>;
+        description: string;
+    };
+    shake: {
+        params: z.ZodObject<{
+            intensity: z.ZodNumber;
+        }, z.core.$strip>;
+        description: string;
+    };
+};
+/**
+ * Type for component definition
+ */
+type ComponentDefinition = {
+    props: z.ZodType;
+    type: string;
+    defaultDuration: number;
+    description: string;
+};
+/**
+ * Type for transition definition
+ */
+type TransitionDefinition = {
+    defaultDuration: number;
+    description: string;
+};
+/**
+ * Type for effect definition
+ */
+type EffectDefinition = {
+    params: z.ZodType;
+    description: string;
+};
+
+export { type BuiltInTransition, type ComponentDefinition, type EffectDefinition, type EffectFn, type Effects, type FrameContext, type RemotionSchema, type RemotionSpec, type TransitionDefinition, type TransitionFn, type VideoComponentContext, type VideoComponentFn, type VideoComponents, schema, standardComponentDefinitions, standardEffectDefinitions, standardTransitionDefinitions };