@json-render/remotion 0.4.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/schema.ts","../src/components/hooks.ts","../src/components/ClipWrapper.tsx","../src/components/standard.tsx","../src/components/Renderer.tsx","../src/catalog/definitions.ts"],"sourcesContent":["// Schema (Remotion's timeline-based spec format)\nexport { schema, type RemotionSchema, type RemotionSpec } from \"./schema\";\n\n// Catalog-aware types for Remotion\nexport type {\n  FrameContext,\n  VideoComponentContext,\n  VideoComponentFn,\n  VideoComponents,\n  TransitionFn,\n  BuiltInTransition,\n  EffectFn,\n  Effects,\n} from \"./catalog-types\";\n\n// Core types (re-exported for convenience)\nexport type { Spec } from \"@json-render/core\";\n\n// =============================================================================\n// Components - Pre-built Remotion components for rendering timelines\n// =============================================================================\n\n// Component types\nexport type {\n  Clip,\n  TimelineSpec,\n  AudioTrack,\n  TransitionStyles,\n  ClipComponent,\n  ComponentRegistry,\n} from \"./components\";\n\n// Hooks and utilities\nexport { useTransition, ClipWrapper } from \"./components\";\n\n// Standard components\nexport {\n  TitleCard,\n  ImageSlide,\n  SplitScreen,\n  QuoteCard,\n  StatCard,\n  LowerThird,\n  TextOverlay,\n  TypingText,\n  LogoBug,\n  VideoClip,\n} from \"./components\";\n\n// Renderer and component registry\nexport { Renderer, standardComponents } from \"./components\";\n\n// =============================================================================\n// Catalog Definitions - Pre-built definitions for use in catalogs\n// =============================================================================\n\nexport {\n  standardComponentDefinitions,\n  standardTransitionDefinitions,\n  standardEffectDefinitions,\n  type ComponentDefinition,\n  type TransitionDefinition,\n  type EffectDefinition,\n} from \"./catalog\";\n","import { defineSchema, type PromptContext } from \"@json-render/core\";\n\n/**\n * Prompt template for Remotion timeline generation\n *\n * Uses JSONL patch format (same as React) but builds up a timeline spec structure.\n */\nfunction remotionPromptTemplate(context: PromptContext): string {\n  const { catalog, options } = context;\n  const { system = \"You are a video timeline generator.\", customRules = [] } =\n    options;\n\n  const lines: string[] = [];\n  lines.push(system);\n  lines.push(\"\");\n\n  // Output format - JSONL patches\n  lines.push(\"OUTPUT FORMAT:\");\n  lines.push(\n    \"Output JSONL (one JSON object per line) with patches to build a timeline spec.\",\n  );\n  lines.push(\n    \"Each line is a JSON patch operation. Build the timeline incrementally.\",\n  );\n  lines.push(\"\");\n  lines.push(\"Example output (each line is a separate JSON object):\");\n  lines.push(\"\");\n  lines.push(`{\"op\":\"set\",\"path\":\"/composition\",\"value\":{\"id\":\"intro\",\"fps\":30,\"width\":1920,\"height\":1080,\"durationInFrames\":300}}\n{\"op\":\"set\",\"path\":\"/tracks\",\"value\":[{\"id\":\"main\",\"name\":\"Main\",\"type\":\"video\",\"enabled\":true},{\"id\":\"overlay\",\"name\":\"Overlay\",\"type\":\"overlay\",\"enabled\":true}]}\n{\"op\":\"set\",\"path\":\"/clips/0\",\"value\":{\"id\":\"clip-1\",\"trackId\":\"main\",\"component\":\"TitleCard\",\"props\":{\"title\":\"Welcome\",\"subtitle\":\"Getting Started\"},\"from\":0,\"durationInFrames\":90,\"transitionIn\":{\"type\":\"fade\",\"durationInFrames\":15},\"transitionOut\":{\"type\":\"fade\",\"durationInFrames\":15}}}\n{\"op\":\"set\",\"path\":\"/clips/1\",\"value\":{\"id\":\"clip-2\",\"trackId\":\"main\",\"component\":\"TitleCard\",\"props\":{\"title\":\"Features\"},\"from\":90,\"durationInFrames\":90}}\n{\"op\":\"set\",\"path\":\"/audio\",\"value\":{\"tracks\":[]}}`);\n  lines.push(\"\");\n\n  // Components\n  const catalogData = catalog as {\n    components?: Record<\n      string,\n      { description?: string; defaultDuration?: number }\n    >;\n    transitions?: Record<string, { description?: string }>;\n    effects?: Record<string, { description?: string }>;\n  };\n\n  if (catalogData.components) {\n    lines.push(\n      `AVAILABLE COMPONENTS (${Object.keys(catalogData.components).length}):`,\n    );\n    lines.push(\"\");\n    for (const [name, def] of Object.entries(catalogData.components)) {\n      const duration = def.defaultDuration\n        ? ` [default: ${def.defaultDuration} frames]`\n        : \"\";\n      lines.push(\n        `- ${name}: ${def.description || \"No description\"}${duration}`,\n      );\n    }\n    lines.push(\"\");\n  }\n\n  // Transitions\n  if (\n    catalogData.transitions &&\n    Object.keys(catalogData.transitions).length > 0\n  ) {\n    lines.push(\"AVAILABLE TRANSITIONS:\");\n    lines.push(\"\");\n    for (const [name, def] of Object.entries(catalogData.transitions)) {\n      lines.push(`- ${name}: ${def.description || \"No description\"}`);\n    }\n    lines.push(\"\");\n  }\n\n  // Rules\n  lines.push(\"RULES:\");\n  const baseRules = [\n    \"Output ONLY JSONL patches - one JSON object per line, no markdown, no code fences\",\n    \"First set /composition with {id, fps:30, width:1920, height:1080, durationInFrames}\",\n    \"Then set /tracks array with video/overlay tracks\",\n    \"Then set each clip: /clips/0, /clips/1, etc.\",\n    \"Finally set /audio with {tracks:[]}\",\n    \"ONLY use components listed above\",\n    \"fps is always 30 (1 second = 30 frames, 10 seconds = 300 frames)\",\n    'Clips on \"main\" track flow sequentially (from = previous clip\\'s from + durationInFrames)',\n    'Overlay clips (LowerThird, TextOverlay) go on \"overlay\" track',\n  ];\n  const allRules = [...baseRules, ...customRules];\n  allRules.forEach((rule, i) => {\n    lines.push(`${i + 1}. ${rule}`);\n  });\n\n  return lines.join(\"\\n\");\n}\n\n/**\n * The schema for @json-render/remotion\n *\n * This schema is fundamentally different from the React element tree schema.\n * It's timeline-based, designed for video composition:\n *\n * - Spec: A composition with tracks containing timed clips\n * - Catalog: Video components (scenes, overlays, etc.) and effects\n *\n * This demonstrates that json-render is truly agnostic - different renderers\n * can have completely different spec formats.\n */\nexport const schema = defineSchema(\n  (s) => ({\n    // What the AI-generated SPEC looks like (timeline-based)\n    spec: s.object({\n      /** Composition settings */\n      composition: s.object({\n        /** Unique composition ID */\n        id: s.string(),\n        /** Frames per second */\n        fps: s.number(),\n        /** Width in pixels */\n        width: s.number(),\n        /** Height in pixels */\n        height: s.number(),\n        /** Total duration in frames */\n        durationInFrames: s.number(),\n      }),\n\n      /** Timeline tracks (like layers in video editing) */\n      tracks: s.array(\n        s.object({\n          /** Unique track ID */\n          id: s.string(),\n          /** Track name for organization */\n          name: s.string(),\n          /** Track type: \"video\" | \"audio\" | \"overlay\" | \"text\" */\n          type: s.string(),\n          /** Whether track is muted/hidden */\n          enabled: s.boolean(),\n        }),\n      ),\n\n      /** Clips placed on the timeline */\n      clips: s.array(\n        s.object({\n          /** Unique clip ID */\n          id: s.string(),\n          /** Which track this clip belongs to */\n          trackId: s.string(),\n          /** Component type from catalog */\n          component: s.ref(\"catalog.components\"),\n          /** Component props */\n          props: s.propsOf(\"catalog.components\"),\n          /** Start frame (when clip begins) */\n          from: s.number(),\n          /** Duration in frames */\n          durationInFrames: s.number(),\n          /** Transition in effect */\n          transitionIn: s.object({\n            type: s.ref(\"catalog.transitions\"),\n            durationInFrames: s.number(),\n          }),\n          /** Transition out effect */\n          transitionOut: s.object({\n            type: s.ref(\"catalog.transitions\"),\n            durationInFrames: s.number(),\n          }),\n        }),\n      ),\n\n      /** Audio configuration */\n      audio: s.object({\n        /** Background music/audio clips */\n        tracks: s.array(\n          s.object({\n            id: s.string(),\n            src: s.string(),\n            from: s.number(),\n            durationInFrames: s.number(),\n            volume: s.number(),\n          }),\n        ),\n      }),\n    }),\n\n    // What the CATALOG must provide\n    catalog: s.object({\n      /** Video component definitions (scenes, overlays, etc.) */\n      components: s.map({\n        /** Zod schema for component props */\n        props: s.zod(),\n        /** Component type: \"scene\" | \"overlay\" | \"text\" | \"image\" | \"video\" */\n        type: s.string(),\n        /** Default duration in frames (can be overridden per clip) */\n        defaultDuration: s.number(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n      /** Transition effect definitions */\n      transitions: s.map({\n        /** Default duration in frames */\n        defaultDuration: s.number(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n      /** Effect definitions (filters, animations, etc.) */\n      effects: s.map({\n        /** Zod schema for effect params */\n        params: s.zod(),\n        /** Description for AI generation hints */\n        description: s.string(),\n      }),\n    }),\n  }),\n  {\n    promptTemplate: remotionPromptTemplate,\n  },\n);\n\n/**\n * Type for the Remotion schema\n */\nexport type RemotionSchema = typeof schema;\n\n/**\n * Infer the spec type from a catalog\n */\nexport type RemotionSpec<TCatalog> = typeof schema extends {\n  createCatalog: (catalog: TCatalog) => { _specType: infer S };\n}\n  ? S\n  : never;\n","\"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","import { z } from \"zod\";\n\n/**\n * Standard component definitions for Remotion catalogs\n *\n * These can be used directly or extended with custom components.\n */\nexport const standardComponentDefinitions = {\n  // ==========================================================================\n  // Scene Components (full-screen)\n  // ==========================================================================\n\n  TitleCard: {\n    props: z.object({\n      title: z.string(),\n      subtitle: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n      textColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 90,\n    description:\n      \"Full-screen title card with centered text. Use for intros, outros, and section breaks.\",\n  },\n\n  ImageSlide: {\n    props: z.object({\n      src: z.string(),\n      alt: z.string(),\n      fit: z.enum([\"cover\", \"contain\"]).nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"image\",\n    defaultDuration: 150,\n    description:\n      \"Full-screen image display. Use for product shots, photos, and visual content.\",\n  },\n\n  SplitScreen: {\n    props: z.object({\n      leftTitle: z.string(),\n      rightTitle: z.string(),\n      leftColor: z.string().nullable(),\n      rightColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 120,\n    description:\n      \"Split screen with two sides. Use for comparisons or before/after.\",\n  },\n\n  QuoteCard: {\n    props: z.object({\n      quote: z.string(),\n      author: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 150,\n    description: \"Quote display with attribution. Use for testimonials.\",\n  },\n\n  StatCard: {\n    props: z.object({\n      value: z.string(),\n      label: z.string(),\n      prefix: z.string().nullable(),\n      suffix: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 90,\n    description: \"Large statistic display. Use for key metrics and numbers.\",\n  },\n\n  TypingText: {\n    props: z.object({\n      text: z.string(),\n      backgroundColor: z.string().nullable(),\n      textColor: z.string().nullable(),\n      fontSize: z.number().nullable(),\n      fontFamily: z.enum([\"monospace\", \"sans-serif\", \"serif\"]).nullable(),\n      showCursor: z.boolean().nullable(),\n      cursorChar: z.string().nullable(),\n      charsPerSecond: z.number().nullable(),\n    }),\n    type: \"scene\",\n    defaultDuration: 180,\n    description:\n      \"Terminal-style typing animation that reveals text character by character. Perfect for code demos, CLI commands, and dramatic text reveals.\",\n  },\n\n  // ==========================================================================\n  // Overlay Components\n  // ==========================================================================\n\n  LowerThird: {\n    props: z.object({\n      name: z.string(),\n      title: z.string().nullable(),\n      backgroundColor: z.string().nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 120,\n    description:\n      \"Name/title overlay in lower third of screen. Use to identify speakers.\",\n  },\n\n  TextOverlay: {\n    props: z.object({\n      text: z.string(),\n      position: z.enum([\"top\", \"center\", \"bottom\"]).nullable(),\n      fontSize: z.enum([\"small\", \"medium\", \"large\"]).nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 90,\n    description: \"Simple text overlay. Use for captions and annotations.\",\n  },\n\n  LogoBug: {\n    props: z.object({\n      position: z\n        .enum([\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"])\n        .nullable(),\n      opacity: z.number().nullable(),\n    }),\n    type: \"overlay\",\n    defaultDuration: 300,\n    description: \"Corner logo watermark. Use for branding throughout video.\",\n  },\n\n  // ==========================================================================\n  // Video Components\n  // ==========================================================================\n\n  VideoClip: {\n    props: z.object({\n      src: z.string(),\n      startFrom: z.number().nullable(),\n      volume: z.number().nullable(),\n    }),\n    type: \"video\",\n    defaultDuration: 150,\n    description: \"Video file playback. Use for B-roll and footage.\",\n  },\n};\n\n/**\n * Standard transition definitions for Remotion catalogs\n */\nexport const standardTransitionDefinitions = {\n  fade: {\n    defaultDuration: 15,\n    description: \"Smooth fade in/out. Use for gentle transitions.\",\n  },\n  slideLeft: {\n    defaultDuration: 20,\n    description: \"Slide from right to left. Use for forward progression.\",\n  },\n  slideRight: {\n    defaultDuration: 20,\n    description: \"Slide from left to right. Use for backward progression.\",\n  },\n  slideUp: {\n    defaultDuration: 15,\n    description: \"Slide from bottom to top. Use for overlays appearing.\",\n  },\n  slideDown: {\n    defaultDuration: 15,\n    description: \"Slide from top to bottom. Use for overlays disappearing.\",\n  },\n  zoom: {\n    defaultDuration: 20,\n    description: \"Zoom in/out effect. Use for emphasis.\",\n  },\n  wipe: {\n    defaultDuration: 15,\n    description: \"Horizontal wipe. Use for scene changes.\",\n  },\n  none: {\n    defaultDuration: 0,\n    description: \"No transition (hard cut).\",\n  },\n};\n\n/**\n * Standard effect definitions for Remotion catalogs\n */\nexport const standardEffectDefinitions = {\n  kenBurns: {\n    params: z.object({\n      startScale: z.number(),\n      endScale: z.number(),\n      panX: z.number().nullable(),\n      panY: z.number().nullable(),\n    }),\n    description: \"Ken Burns pan and zoom effect for images.\",\n  },\n  pulse: {\n    params: z.object({\n      intensity: z.number(),\n    }),\n    description: \"Subtle pulsing scale effect for emphasis.\",\n  },\n  shake: {\n    params: z.object({\n      intensity: z.number(),\n    }),\n    description: \"Camera shake effect for energy.\",\n  },\n};\n\n/**\n * Type for component definition\n */\nexport type ComponentDefinition = {\n  props: z.ZodType;\n  type: string;\n  defaultDuration: number;\n  description: string;\n};\n\n/**\n * Type for transition definition\n */\nexport type TransitionDefinition = {\n  defaultDuration: number;\n  description: string;\n};\n\n/**\n * Type for effect definition\n */\nexport type EffectDefinition = {\n  params: z.ZodType;\n  description: string;\n};\n"],"mappings":"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","names":["import_remotion","import_remotion","import_jsx_runtime","import_remotion","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,532 @@
+import {
+  schema,
+  standardComponentDefinitions,
+  standardEffectDefinitions,
+  standardTransitionDefinitions
+} from "./chunk-5C3GTKV7.mjs";
+
+// src/components/hooks.ts
+import { useVideoConfig, spring, interpolate } from "remotion";
+function useTransition(clip, frame) {
+  const { fps } = useVideoConfig();
+  const relativeFrame = frame - clip.from;
+  const clipEnd = clip.durationInFrames;
+  let opacity = 1;
+  let translateX = 0;
+  let translateY = 0;
+  let scale = 1;
+  if (clip.transitionIn && relativeFrame < clip.transitionIn.durationInFrames) {
+    const progress = relativeFrame / clip.transitionIn.durationInFrames;
+    const easedProgress = spring({
+      frame: relativeFrame,
+      fps,
+      config: { damping: 200 },
+      durationInFrames: clip.transitionIn.durationInFrames
+    });
+    switch (clip.transitionIn.type) {
+      case "fade":
+        opacity = easedProgress;
+        break;
+      case "slideLeft":
+        translateX = interpolate(easedProgress, [0, 1], [100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideRight":
+        translateX = interpolate(easedProgress, [0, 1], [-100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideUp":
+        translateY = interpolate(easedProgress, [0, 1], [100, 0]);
+        opacity = easedProgress;
+        break;
+      case "slideDown":
+        translateY = interpolate(easedProgress, [0, 1], [-100, 0]);
+        opacity = easedProgress;
+        break;
+      case "zoom":
+        scale = interpolate(easedProgress, [0, 1], [0.8, 1]);
+        opacity = easedProgress;
+        break;
+      case "wipe":
+        opacity = progress;
+        break;
+    }
+  }
+  if (clip.transitionOut && relativeFrame > clipEnd - clip.transitionOut.durationInFrames) {
+    const outStart = clipEnd - clip.transitionOut.durationInFrames;
+    const outProgress = (relativeFrame - outStart) / clip.transitionOut.durationInFrames;
+    const easedOutProgress = 1 - outProgress;
+    switch (clip.transitionOut.type) {
+      case "fade":
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideLeft":
+        translateX = interpolate(outProgress, [0, 1], [0, -100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideRight":
+        translateX = interpolate(outProgress, [0, 1], [0, 100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideUp":
+        translateY = interpolate(outProgress, [0, 1], [0, -100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "slideDown":
+        translateY = interpolate(outProgress, [0, 1], [0, 100]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+      case "zoom":
+        scale = interpolate(outProgress, [0, 1], [1, 1.2]);
+        opacity = Math.min(opacity, easedOutProgress);
+        break;
+    }
+  }
+  return { opacity, translateX, translateY, scale };
+}
+
+// src/components/ClipWrapper.tsx
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+import { jsx } from "react/jsx-runtime";
+function ClipWrapper({ clip, children }) {
+  const frame = useCurrentFrame();
+  const { opacity, translateX, translateY, scale } = useTransition(
+    clip,
+    frame + clip.from
+  );
+  return /* @__PURE__ */ jsx(
+    AbsoluteFill,
+    {
+      style: {
+        opacity,
+        transform: `translateX(${translateX}%) translateY(${translateY}%) scale(${scale})`
+      },
+      children
+    }
+  );
+}
+
+// src/components/standard.tsx
+import {
+  AbsoluteFill as AbsoluteFill2,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2,
+  spring as spring2
+} from "remotion";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function TitleCard({ clip }) {
+  const { title, subtitle, backgroundColor, textColor } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsxs(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: textColor || "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: 72,
+              fontWeight: "bold",
+              textAlign: "center",
+              marginBottom: 16
+            },
+            children: title
+          }
+        ),
+        subtitle && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              fontSize: 36,
+              opacity: 0.7,
+              textAlign: "center"
+            },
+            children: subtitle
+          }
+        )
+      ]
+    }
+  ) });
+}
+function ImageSlide({ clip }) {
+  const { src, alt, fit, backgroundColor } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#0a0a0a",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: src ? /* @__PURE__ */ jsx2(
+        "img",
+        {
+          src,
+          alt,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: fit || "cover"
+          }
+        }
+      ) : /* @__PURE__ */ jsxs("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: 24 }, children: [
+        "[",
+        alt,
+        "]"
+      ] })
+    }
+  ) });
+}
+function SplitScreen({ clip }) {
+  const { leftTitle, rightTitle, leftColor, rightColor } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsxs(AbsoluteFill2, { style: { display: "flex", flexDirection: "row" }, children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          flex: 1,
+          backgroundColor: leftColor || "#1a1a2e",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff"
+        },
+        children: /* @__PURE__ */ jsx2("div", { style: { fontSize: 48, fontWeight: "bold" }, children: leftTitle })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          flex: 1,
+          backgroundColor: rightColor || "#2e1a1a",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#ffffff"
+        },
+        children: /* @__PURE__ */ jsx2("div", { style: { fontSize: 48, fontWeight: "bold" }, children: rightTitle })
+      }
+    )
+  ] }) });
+}
+function QuoteCard({ clip }) {
+  const { quote, author, backgroundColor } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsxs(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 80
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              fontSize: 48,
+              fontStyle: "italic",
+              textAlign: "center",
+              marginBottom: 24
+            },
+            children: [
+              "\u201C",
+              quote,
+              "\u201D"
+            ]
+          }
+        ),
+        author && /* @__PURE__ */ jsxs("div", { style: { fontSize: 28, opacity: 0.7 }, children: [
+          "- ",
+          author
+        ] })
+      ]
+    }
+  ) });
+}
+function StatCard({ clip }) {
+  const { value, label, prefix, suffix, backgroundColor } = clip.props;
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
+  const animationProgress = spring2({
+    frame,
+    fps,
+    config: { damping: 100 },
+    durationInFrames: 30
+  });
+  const numValue = typeof value === "number" ? value : parseFloat(value) || 0;
+  const displayValue = Math.round(numValue * animationProgress);
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsxs(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1a1a2e",
+        color: "#ffffff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: 96, fontWeight: "bold", marginBottom: 16 }, children: [
+          prefix || "",
+          typeof value === "number" ? displayValue : value,
+          suffix || ""
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 32, opacity: 0.7 }, children: label })
+      ]
+    }
+  ) });
+}
+function LowerThird({ clip }) {
+  const { name, title } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(AbsoluteFill2, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 100,
+        left: 40,
+        backgroundColor: "rgba(0,0,0,0.8)",
+        color: "#ffffff",
+        padding: "16px 24px",
+        borderRadius: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 28, fontWeight: "bold" }, children: name }),
+        title && /* @__PURE__ */ jsx2("div", { style: { fontSize: 20, opacity: 0.7 }, children: title })
+      ]
+    }
+  ) }) });
+}
+function TextOverlay({ clip }) {
+  const { text, position, fontSize } = clip.props;
+  const positionStyles = {
+    top: { top: 100, left: 0, right: 0 },
+    center: { top: "50%", left: 0, right: 0, transform: "translateY(-50%)" },
+    bottom: { bottom: 100, left: 0, right: 0 }
+  };
+  const fontSizes = {
+    small: 24,
+    medium: 36,
+    large: 56
+  };
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(AbsoluteFill2, { children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles[position || "center"],
+        textAlign: "center",
+        color: "#ffffff",
+        fontSize: fontSizes[fontSize || "medium"],
+        padding: 20,
+        textShadow: "2px 2px 4px rgba(0,0,0,0.5)"
+      },
+      children: text
+    }
+  ) }) });
+}
+function TypingText({ clip }) {
+  const {
+    text,
+    backgroundColor,
+    textColor,
+    fontSize,
+    fontFamily,
+    showCursor = true,
+    cursorChar = "|",
+    charsPerSecond = 15
+  } = clip.props;
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
+  const framesPerChar = fps / charsPerSecond;
+  const charsToShow = Math.min(Math.floor(frame / framesPerChar), text.length);
+  const displayedText = text.slice(0, charsToShow);
+  const isTypingComplete = charsToShow >= text.length;
+  const cursorVisible = showCursor && (Math.floor(frame / (fps / 2)) % 2 === 0 || !isTypingComplete);
+  const fontFamilyMap = {
+    monospace: "'Courier New', Consolas, monospace",
+    "sans-serif": "system-ui, -apple-system, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif"
+  };
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: backgroundColor || "#1e1e1e",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 60
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            color: textColor || "#00ff00",
+            fontSize: fontSize || 48,
+            fontFamily: fontFamilyMap[fontFamily || "monospace"],
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            maxWidth: "90%",
+            textAlign: "left"
+          },
+          children: [
+            displayedText,
+            cursorVisible && /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  opacity: isTypingComplete ? Math.floor(frame / (fps / 2)) % 2 === 0 ? 1 : 0 : 1
+                },
+                children: cursorChar
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+function LogoBug({ clip }) {
+  const { position, opacity: propOpacity } = clip.props;
+  const positionStyles = {
+    "top-left": { top: 20, left: 20 },
+    "top-right": { top: 20, right: 20 },
+    "bottom-left": { bottom: 20, left: 20 },
+    "bottom-right": { bottom: 20, right: 20 }
+  };
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(AbsoluteFill2, { children: /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        ...positionStyles[position || "bottom-right"],
+        opacity: propOpacity ?? 0.5,
+        color: "#ffffff",
+        fontSize: 14,
+        fontWeight: "bold",
+        textShadow: "1px 1px 2px rgba(0,0,0,0.5)"
+      },
+      children: "LOGO"
+    }
+  ) }) });
+}
+function VideoClip({ clip }) {
+  const { src } = clip.props;
+  return /* @__PURE__ */ jsx2(ClipWrapper, { clip, children: /* @__PURE__ */ jsx2(
+    AbsoluteFill2,
+    {
+      style: {
+        backgroundColor: "#000000",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.5)"
+      },
+      children: /* @__PURE__ */ jsxs("div", { children: [
+        "[Video: ",
+        src,
+        "]"
+      ] })
+    }
+  ) });
+}
+
+// src/components/Renderer.tsx
+import { AbsoluteFill as AbsoluteFill3, Sequence } from "remotion";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var standardComponents = {
+  TitleCard,
+  ImageSlide,
+  SplitScreen,
+  QuoteCard,
+  StatCard,
+  LowerThird,
+  TextOverlay,
+  TypingText,
+  LogoBug,
+  VideoClip
+};
+function Renderer({
+  spec,
+  components: customComponents
+}) {
+  const components = {
+    ...standardComponents,
+    ...customComponents
+  };
+  if (!spec.clips || spec.clips.length === 0) {
+    return /* @__PURE__ */ jsx3(
+      AbsoluteFill3,
+      {
+        style: {
+          backgroundColor: "#1a1a2e",
+          color: "#ffffff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx3("div", { style: { fontSize: 24, opacity: 0.5 }, children: "No clips" })
+      }
+    );
+  }
+  const mainClips = spec.clips.filter((c) => c.trackId === "main");
+  const overlayClips = spec.clips.filter((c) => c.trackId === "overlay");
+  const renderClip = (clip) => {
+    const Component = components[clip.component];
+    if (!Component) {
+      console.warn(`Unknown component: ${clip.component}`);
+      return null;
+    }
+    return /* @__PURE__ */ jsx3(
+      Sequence,
+      {
+        from: clip.from,
+        durationInFrames: clip.durationInFrames,
+        children: /* @__PURE__ */ jsx3(Component, { clip })
+      },
+      clip.id
+    );
+  };
+  return /* @__PURE__ */ jsxs2(AbsoluteFill3, { style: { backgroundColor: "#000000" }, children: [
+    mainClips.map(renderClip),
+    overlayClips.map(renderClip)
+  ] });
+}
+export {
+  ClipWrapper,
+  ImageSlide,
+  LogoBug,
+  LowerThird,
+  QuoteCard,
+  Renderer,
+  SplitScreen,
+  StatCard,
+  TextOverlay,
+  TitleCard,
+  TypingText,
+  VideoClip,
+  schema,
+  standardComponentDefinitions,
+  standardComponents,
+  standardEffectDefinitions,
+  standardTransitionDefinitions,
+  useTransition
+};
+//# sourceMappingURL=index.mjs.map