Slides often include photographs, diagrams, and visual content that need to be precisely cropped, fitted, or scaled within their bounding boxes. Without a dedicated renderer, images either distort to fill space, crop unpredictably, or require external cropping tools. ImageElementRenderer solves this by accepting a crop window (slide-relative 0..1 coordinates) and a fit mode, so images clip and scale identically across editor, viewer, and agent surfaces.

ImageElementRenderer is a pure React function component that renders an ImageElement from the fancy-slides data model. It accepts an element prop containing src (image URL or data URI), alt text, fit mode ("contain" | "cover" | "fill" | "scale-down"), and an optional crop object defining { x, y, w, h } as fractional coordinates. When a crop is present, the image is scaled and translated so the crop window exactly fills the container; without a crop, it uses the fit mode alone. The renderer guarantees pixel-perfect consistency: the same crop renders identically in the presentation editor, the viewer, and agent bridge previews.

Import ImageElementRenderer and type ImageElementRendererProps from @particle-academy/fancy-slides, then pass a fully-formed ImageElement object: <ImageElementRenderer element={{ id: "img1", type: "image", src: "https://example.com/photo.jpg", alt: "photo", fit: "cover", x: 0, y: 0, w: 0.5, h: 1 }} />. The component is stateless and suitable for both interactive editing (selected, draggable) and read-only viewing; agents populate the crop and fit fields via mutation ops to refine imagery inline.