floating-image-editor

name	floating-image-editor
description	Create an interactive floating image viewer/editor with free positioning, resize, crop, inline zoom/pan, and SVG annotations. Use when building image display components that need to be freely positioned, resized, cropped, annotated with shapes/text, and zoomed inline.
argument-hint	[container-selector]

Floating Image Editor Pattern

Create an interactive image component where images float freely over content, can be moved/resized by dragging, cropped visually, zoomed/panned inline, and annotated with SVG shapes.

Reference implementation: apps/pwa/public/baader-200-learn-embed.html

---

Architecture Overview

Container (position:relative, overflow:auto)
  ├── Content (text, tables, etc.)
  └── .img-card (position:absolute, display:flex, flex-direction:column)
        ├── .img-edit-bar (controls: move, crop, annotate, remove)
        ├── .img-body (flex:1, overflow:hidden, position:relative)
        │     ├── <div> zoom-wrapper (position:absolute, inset:0, transform-origin:0 0)
        │     │     └── <img> (width:100%, height:100%, object-fit:fill)
        │     ├── <svg class="ann-svg"> (annotations overlay)
        │     └── zoom-hint label
        ├── .ann-toolbar (drawing tools, shown when annotating)
        ├── .img-caption
        └── .img-resize-handle (corner ↘)

---

1. Data Model

Each image stores these fields (all optional except url):

interface FloatingImage {
  url: string
  caption?: string
  
  ?: { : , : , ?: , ?:  }
  
  ?: { : , : , : , :  }
  
  ?: []
}

  {
  : 
  :  |  |  |  | 
  :         
  : 
  ?:       
  ?: 
  ?:         
  ?:         
  ?:         
  ?: {:, :}[]  
  ?: 
  ?:     
  ?:   
  ?:   
  ?:  
}