@json-render/remotion 0.4.0

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hooks.ts","../src/components/ClipWrapper.tsx","../src/components/standard.tsx","../src/components/Renderer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useVideoConfig, spring, interpolate } from \"remotion\";\nimport type { Clip, TransitionStyles } from \"./types\";\n\n/**\n * Calculate transition styles based on clip configuration\n *\n * Handles both transitionIn and transitionOut with support for:\n * - fade\n * - slideLeft / slideRight\n * - slideUp / slideDown\n * - zoom\n * - wipe\n */\nexport function useTransition(clip: Clip, frame: number): TransitionStyles {\n  const { fps } = useVideoConfig();\n  const relativeFrame = frame - clip.from;\n  const clipEnd = clip.durationInFrames;\n\n  let opacity = 1;\n  let translateX = 0;\n  let translateY = 0;\n  let scale = 1;\n\n  // Transition in\n  if (clip.transitionIn && relativeFrame < clip.transitionIn.durationInFrames) {\n    const progress = relativeFrame / clip.transitionIn.durationInFrames;\n    const easedProgress = spring({\n      frame: relativeFrame,\n      fps,\n      config: { damping: 200 },\n      durationInFrames: clip.transitionIn.durationInFrames,\n    });\n\n    switch (clip.transitionIn.type) {\n      case \"fade\":\n        opacity = easedProgress;\n        break;\n      case \"slideLeft\":\n        translateX = interpolate(easedProgress, [0, 1], [100, 0]);\n        opacity = easedProgress;\n        break;\n      case \"slideRight\":\n        translateX = interpolate(easedProgress, [0, 1], [-100, 0]);\n        opacity = easedProgress;\n        break;\n      case \"slideUp\":\n        translateY = interpolate(easedProgress, [0, 1], [100, 0]);\n        opacity = easedProgress;\n        break;\n      case \"slideDown\":\n        translateY = interpolate(easedProgress, [0, 1], [-100, 0]);\n        opacity = easedProgress;\n        break;\n      case \"zoom\":\n        scale = interpolate(easedProgress, [0, 1], [0.8, 1]);\n        opacity = easedProgress;\n        break;\n      case \"wipe\":\n        opacity = progress;\n        break;\n    }\n  }\n\n  // Transition out\n  if (\n    clip.transitionOut &&\n    relativeFrame > clipEnd - clip.transitionOut.durationInFrames\n  ) {\n    const outStart = clipEnd - clip.transitionOut.durationInFrames;\n    const outProgress =\n      (relativeFrame - outStart) / clip.transitionOut.durationInFrames;\n    const easedOutProgress = 1 - outProgress;\n\n    switch (clip.transitionOut.type) {\n      case \"fade\":\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n      case \"slideLeft\":\n        translateX = interpolate(outProgress, [0, 1], [0, -100]);\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n      case \"slideRight\":\n        translateX = interpolate(outProgress, [0, 1], [0, 100]);\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n      case \"slideUp\":\n        translateY = interpolate(outProgress, [0, 1], [0, -100]);\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n      case \"slideDown\":\n        translateY = interpolate(outProgress, [0, 1], [0, 100]);\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n      case \"zoom\":\n        scale = interpolate(outProgress, [0, 1], [1, 1.2]);\n        opacity = Math.min(opacity, easedOutProgress);\n        break;\n    }\n  }\n\n  return { opacity, translateX, translateY, scale };\n}\n","\"use client\";\n\nimport { AbsoluteFill, useCurrentFrame } from \"remotion\";\nimport { useTransition } from \"./hooks\";\nimport type { Clip } from \"./types\";\n\ninterface ClipWrapperProps {\n  clip: Clip;\n  children: React.ReactNode;\n}\n\n/**\n * Wrapper component that applies transition animations to clips\n *\n * Automatically handles transitionIn and transitionOut based on clip config.\n */\nexport function ClipWrapper({ clip, children }: ClipWrapperProps) {\n  const frame = useCurrentFrame();\n  const { opacity, translateX, translateY, scale } = useTransition(\n    clip,\n    frame + clip.from,\n  );\n\n  return (\n    <AbsoluteFill\n      style={{\n        opacity,\n        transform: `translateX(${translateX}%) translateY(${translateY}%) scale(${scale})`,\n      }}\n    >\n      {children}\n    </AbsoluteFill>\n  );\n}\n","\"use client\";\n\nimport {\n  AbsoluteFill,\n  useCurrentFrame,\n  useVideoConfig,\n  spring,\n} from \"remotion\";\nimport { ClipWrapper } from \"./ClipWrapper\";\nimport type { Clip } from \"./types\";\n\n// =============================================================================\n// TitleCard - Full-screen title with optional subtitle\n// =============================================================================\n\nexport function TitleCard({ clip }: { clip: Clip }) {\n  const { title, subtitle, backgroundColor, textColor } = clip.props as {\n    title: string;\n    subtitle?: string;\n    backgroundColor?: string;\n    textColor?: string;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: backgroundColor || \"#1a1a2e\",\n          color: textColor || \"#ffffff\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 40,\n        }}\n      >\n        <div\n          style={{\n            fontSize: 72,\n            fontWeight: \"bold\",\n            textAlign: \"center\",\n            marginBottom: 16,\n          }}\n        >\n          {title}\n        </div>\n        {subtitle && (\n          <div\n            style={{\n              fontSize: 36,\n              opacity: 0.7,\n              textAlign: \"center\",\n            }}\n          >\n            {subtitle}\n          </div>\n        )}\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// ImageSlide - Full-screen image display\n// =============================================================================\n\nexport function ImageSlide({ clip }: { clip: Clip }) {\n  const { src, alt, fit, backgroundColor } = clip.props as {\n    src: string;\n    alt: string;\n    fit?: \"cover\" | \"contain\";\n    backgroundColor?: string;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: backgroundColor || \"#0a0a0a\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        {src ? (\n          <img\n            src={src}\n            alt={alt}\n            style={{\n              width: \"100%\",\n              height: \"100%\",\n              objectFit: fit || \"cover\",\n            }}\n          />\n        ) : (\n          <div style={{ color: \"rgba(255,255,255,0.5)\", fontSize: 24 }}>\n            [{alt}]\n          </div>\n        )}\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// SplitScreen - Two-panel comparison view\n// =============================================================================\n\nexport function SplitScreen({ clip }: { clip: Clip }) {\n  const { leftTitle, rightTitle, leftColor, rightColor } = clip.props as {\n    leftTitle: string;\n    rightTitle: string;\n    leftColor?: string;\n    rightColor?: string;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill style={{ display: \"flex\", flexDirection: \"row\" }}>\n        <div\n          style={{\n            flex: 1,\n            backgroundColor: leftColor || \"#1a1a2e\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"#ffffff\",\n          }}\n        >\n          <div style={{ fontSize: 48, fontWeight: \"bold\" }}>{leftTitle}</div>\n        </div>\n        <div\n          style={{\n            flex: 1,\n            backgroundColor: rightColor || \"#2e1a1a\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            color: \"#ffffff\",\n          }}\n        >\n          <div style={{ fontSize: 48, fontWeight: \"bold\" }}>{rightTitle}</div>\n        </div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// QuoteCard - Quote with attribution\n// =============================================================================\n\nexport function QuoteCard({ clip }: { clip: Clip }) {\n  const { quote, author, backgroundColor } = clip.props as {\n    quote: string;\n    author?: string;\n    backgroundColor?: string;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: backgroundColor || \"#1a1a2e\",\n          color: \"#ffffff\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 80,\n        }}\n      >\n        <div\n          style={{\n            fontSize: 48,\n            fontStyle: \"italic\",\n            textAlign: \"center\",\n            marginBottom: 24,\n          }}\n        >\n          &ldquo;{quote}&rdquo;\n        </div>\n        {author && <div style={{ fontSize: 28, opacity: 0.7 }}>- {author}</div>}\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// StatCard - Large statistic display with animation\n// =============================================================================\n\nexport function StatCard({ clip }: { clip: Clip }) {\n  const { value, label, prefix, suffix, backgroundColor } = clip.props as {\n    value: string | number;\n    label: string;\n    prefix?: string;\n    suffix?: string;\n    backgroundColor?: string;\n  };\n\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  // Animate the number counting up\n  const animationProgress = spring({\n    frame,\n    fps,\n    config: { damping: 100 },\n    durationInFrames: 30,\n  });\n\n  const numValue = typeof value === \"number\" ? value : parseFloat(value) || 0;\n  const displayValue = Math.round(numValue * animationProgress);\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: backgroundColor || \"#1a1a2e\",\n          color: \"#ffffff\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <div style={{ fontSize: 96, fontWeight: \"bold\", marginBottom: 16 }}>\n          {prefix || \"\"}\n          {typeof value === \"number\" ? displayValue : value}\n          {suffix || \"\"}\n        </div>\n        <div style={{ fontSize: 32, opacity: 0.7 }}>{label}</div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// LowerThird - Name/title overlay\n// =============================================================================\n\nexport function LowerThird({ clip }: { clip: Clip }) {\n  const { name, title } = clip.props as {\n    name: string;\n    title?: string;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill>\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: 100,\n            left: 40,\n            backgroundColor: \"rgba(0,0,0,0.8)\",\n            color: \"#ffffff\",\n            padding: \"16px 24px\",\n            borderRadius: 8,\n          }}\n        >\n          <div style={{ fontSize: 28, fontWeight: \"bold\" }}>{name}</div>\n          {title && <div style={{ fontSize: 20, opacity: 0.7 }}>{title}</div>}\n        </div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// TextOverlay - Simple text overlay\n// =============================================================================\n\nexport function TextOverlay({ clip }: { clip: Clip }) {\n  const { text, position, fontSize } = clip.props as {\n    text: string;\n    position?: \"top\" | \"center\" | \"bottom\";\n    fontSize?: \"small\" | \"medium\" | \"large\";\n  };\n\n  const positionStyles: Record<string, React.CSSProperties> = {\n    top: { top: 100, left: 0, right: 0 },\n    center: { top: \"50%\", left: 0, right: 0, transform: \"translateY(-50%)\" },\n    bottom: { bottom: 100, left: 0, right: 0 },\n  };\n\n  const fontSizes: Record<string, number> = {\n    small: 24,\n    medium: 36,\n    large: 56,\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill>\n        <div\n          style={{\n            position: \"absolute\",\n            ...positionStyles[position || \"center\"],\n            textAlign: \"center\",\n            color: \"#ffffff\",\n            fontSize: fontSizes[fontSize || \"medium\"],\n            padding: 20,\n            textShadow: \"2px 2px 4px rgba(0,0,0,0.5)\",\n          }}\n        >\n          {text}\n        </div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// TypingText - Terminal-style typing animation\n// =============================================================================\n\nexport function TypingText({ clip }: { clip: Clip }) {\n  const {\n    text,\n    backgroundColor,\n    textColor,\n    fontSize,\n    fontFamily,\n    showCursor = true,\n    cursorChar = \"|\",\n    charsPerSecond = 15,\n  } = clip.props as {\n    text: string;\n    backgroundColor?: string;\n    textColor?: string;\n    fontSize?: number;\n    fontFamily?: \"monospace\" | \"sans-serif\" | \"serif\";\n    showCursor?: boolean;\n    cursorChar?: string;\n    charsPerSecond?: number;\n  };\n\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  // Calculate how many characters to show based on current frame\n  const framesPerChar = fps / charsPerSecond;\n  const charsToShow = Math.min(Math.floor(frame / framesPerChar), text.length);\n  const displayedText = text.slice(0, charsToShow);\n  const isTypingComplete = charsToShow >= text.length;\n\n  // Blinking cursor (blinks every 0.5 seconds)\n  const cursorVisible =\n    showCursor &&\n    (Math.floor(frame / (fps / 2)) % 2 === 0 || !isTypingComplete);\n\n  const fontFamilyMap: Record<string, string> = {\n    monospace: \"'Courier New', Consolas, monospace\",\n    \"sans-serif\": \"system-ui, -apple-system, sans-serif\",\n    serif: \"Georgia, 'Times New Roman', serif\",\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: backgroundColor || \"#1e1e1e\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 60,\n        }}\n      >\n        <div\n          style={{\n            color: textColor || \"#00ff00\",\n            fontSize: fontSize || 48,\n            fontFamily: fontFamilyMap[fontFamily || \"monospace\"],\n            whiteSpace: \"pre-wrap\",\n            wordBreak: \"break-word\",\n            maxWidth: \"90%\",\n            textAlign: \"left\",\n          }}\n        >\n          {displayedText}\n          {cursorVisible && (\n            <span\n              style={{\n                opacity: isTypingComplete\n                  ? Math.floor(frame / (fps / 2)) % 2 === 0\n                    ? 1\n                    : 0\n                  : 1,\n              }}\n            >\n              {cursorChar}\n            </span>\n          )}\n        </div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// LogoBug - Corner watermark/logo\n// =============================================================================\n\nexport function LogoBug({ clip }: { clip: Clip }) {\n  const { position, opacity: propOpacity } = clip.props as {\n    position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n    opacity?: number;\n  };\n\n  const positionStyles: Record<string, React.CSSProperties> = {\n    \"top-left\": { top: 20, left: 20 },\n    \"top-right\": { top: 20, right: 20 },\n    \"bottom-left\": { bottom: 20, left: 20 },\n    \"bottom-right\": { bottom: 20, right: 20 },\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill>\n        <div\n          style={{\n            position: \"absolute\",\n            ...positionStyles[position || \"bottom-right\"],\n            opacity: propOpacity ?? 0.5,\n            color: \"#ffffff\",\n            fontSize: 14,\n            fontWeight: \"bold\",\n            textShadow: \"1px 1px 2px rgba(0,0,0,0.5)\",\n          }}\n        >\n          LOGO\n        </div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n\n// =============================================================================\n// VideoClip - Video file playback (placeholder)\n// =============================================================================\n\nexport function VideoClip({ clip }: { clip: Clip }) {\n  const { src } = clip.props as {\n    src: string;\n    startFrom?: number;\n    volume?: number;\n  };\n\n  return (\n    <ClipWrapper clip={clip}>\n      <AbsoluteFill\n        style={{\n          backgroundColor: \"#000000\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          color: \"rgba(255,255,255,0.5)\",\n        }}\n      >\n        <div>[Video: {src}]</div>\n      </AbsoluteFill>\n    </ClipWrapper>\n  );\n}\n","\"use client\";\n\nimport { AbsoluteFill, Sequence } from \"remotion\";\nimport type { TimelineSpec, ComponentRegistry, Clip } from \"./types\";\n\n// Import standard components\nimport {\n  TitleCard,\n  ImageSlide,\n  SplitScreen,\n  QuoteCard,\n  StatCard,\n  LowerThird,\n  TextOverlay,\n  TypingText,\n  LogoBug,\n  VideoClip,\n} from \"./standard\";\n\n/**\n * Standard components provided by @json-render/remotion\n */\nexport const standardComponents: ComponentRegistry = {\n  TitleCard,\n  ImageSlide,\n  SplitScreen,\n  QuoteCard,\n  StatCard,\n  LowerThird,\n  TextOverlay,\n  TypingText,\n  LogoBug,\n  VideoClip,\n};\n\ninterface RendererProps {\n  /** The timeline spec to render */\n  spec: TimelineSpec;\n  /**\n   * Custom component registry to merge with standard components.\n   * Custom components override standard ones with the same name.\n   */\n  components?: ComponentRegistry;\n}\n\n/**\n * Renders a timeline spec into Remotion components\n *\n * @example\n * // Use with standard components only\n * <Renderer spec={mySpec} />\n *\n * @example\n * // Add custom components\n * <Renderer\n *   spec={mySpec}\n *   components={{\n *     CustomScene: MyCustomSceneComponent,\n *   }}\n * />\n */\nexport function Renderer({\n  spec,\n  components: customComponents,\n}: RendererProps) {\n  // Merge standard + custom components (custom overrides standard)\n  const components: ComponentRegistry = {\n    ...standardComponents,\n    ...customComponents,\n  };\n\n  if (!spec.clips || spec.clips.length === 0) {\n    return (\n      <AbsoluteFill\n        style={{\n          backgroundColor: \"#1a1a2e\",\n          color: \"#ffffff\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <div style={{ fontSize: 24, opacity: 0.5 }}>No clips</div>\n      </AbsoluteFill>\n    );\n  }\n\n  // Separate main track clips from overlay clips\n  const mainClips = spec.clips.filter((c) => c.trackId === \"main\");\n  const overlayClips = spec.clips.filter((c) => c.trackId === \"overlay\");\n\n  const renderClip = (clip: Clip) => {\n    const Component = components[clip.component];\n    if (!Component) {\n      console.warn(`Unknown component: ${clip.component}`);\n      return null;\n    }\n\n    return (\n      <Sequence\n        key={clip.id}\n        from={clip.from}\n        durationInFrames={clip.durationInFrames}\n      >\n        <Component clip={clip} />\n      </Sequence>\n    );\n  };\n\n  return (\n    <AbsoluteFill style={{ backgroundColor: \"#000000\" }}>\n      {/* Main track clips */}\n      {mainClips.map(renderClip)}\n\n      {/* Overlay clips */}\n      {overlayClips.map(renderClip)}\n    </AbsoluteFill>\n  );\n}\n"],"mappings":"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","names":["AbsoluteFill","useCurrentFrame","useVideoConfig","spring","jsx","AbsoluteFill","useCurrentFrame","useVideoConfig","spring","AbsoluteFill","jsx","jsxs","AbsoluteFill"]}

package/dist/server.d.mts

@@ -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 };