A presentation slide renderer needs to manage element layout across multiple resolutions (fullscreen 1920×1080 to thumbnail 320×180), coordinate edit-mode drag-and-resize affordances with presentation-mode entrance animations, and let external code (DeckEditor, SlideViewer, agent bridges) drive state without embedding a full editor. Inline divs + CSS don't enforce a consistent coordinate system, edit mode collides with animation playback, and internal state prevents agent tools from reading or writing element positions. Slide solves all three by using slide-relative coordinates (0..1 fraction space) and lifting all mutations to callbacks.

Slide is a controlled-by-default renderer that takes a slide: SlideData object and renders all its elements (text, image, shape, chart, code, table, embed) at the slide's theme-derived or pinned aspect ratio. The component measures or accepts a width in px, resolves child positions and sizes using slide-relative coordinates, and scales fonts and strokes accordingly. Element selection is external (selectedElementId + onElementSelect); in editing mode, selected elements show 8 resize handles and draggable bodies, firing onElementMove and onElementResize callbacks with normalized (0..1) patches. Entrance animations (animation on each element) are gated by buildStep, letting the viewer or editor orchestrate reveal sequences without the Slide component holding state. Each element carries a stable data-fancy-slides-element handle and can be re-rendered via a host-supplied renderElement function (used to swap chart, code, table, or embed renderers).

Import from @particle-academy/fancy-slides, construct a SlideData object (or fetch one from a deck), and mount <Slide slide={slideData} theme={theme} width={800} editing={false} buildStep={currentStep} selectedElementId={selected} onElementSelect={setSelected} onElementMove={handleMove} onElementResize={handleResize} />. If you need to render custom chart/code/table/embed elements, pass renderElement from @particle-academy/fancy-slides/registry. For edit-mode integration, call onElementMove(elementId, x, y) with slide-relative coordinates (0..1); drag callbacks fire at 1:1 scale. Agents read element positions via the stable data-fancy-slides-element attribute and use the element.id to emit move/resize operations back through the callbacks.