Presentations need lightweight vector shapes—rectangles, circles, arrows, dividers—to annotate slides and guide focus without adding 5MB of graphics libraries or PNG bloat. Without them, every accent line or call-out box becomes a PowerPoint shape paste, breaks on theme changes, and resists agent-driven layout. SVG-backed shapes scale from fullscreen to thumbnail without pixelation, stay resolution-independent, and never fight the rendering pipeline.

ShapeElement is a JSON-friendly slide element type — not a React component, but a data shape paired with ShapeElementRenderer, the functional component that renders it. The data carries a shape discriminator (rect, rounded-rect, ellipse, triangle, line, or arrow), optional fill and stroke colors, strokeWidth, a dashed boolean, and (for rects) a radius. All coordinate and sizing props inherit from ElementBase: id, x, y, w, h, rotation, plus Human+ hooks href (for click-through links) and animation (for entrance builds). ShapeElementRenderer receives the element, optional theme, and slideWidthPx, and emits an SVG with viewBox="0 0 100 100" that stretches to fill its box.

Import ShapeElementRenderer from @particle-academy/fancy-slides. Author a ShapeElement object with type: "shape", a ShapeKind (e.g. "rounded-rect"), and position/size it in slide-relative coordinates (0..1). Pass it to the renderer with the slide's theme and pixel width. For agent composition, emit a DeckOp with kind: "element_add" or "element_update" to mutate the deck; the shape broadcasts DeckActivity so presence layers and undo stacks track who drew what.