feat(dataset): per-detection cards, in-browser editor, bulk-validate for local saves

src/features/annotations/CanvasEditor.tsx

@@ -75,16 +75,29 @@ const CanvasEditor = forwardRef<CanvasEditorHandle, Props>(function CanvasEditor
     }
     const img = new Image()
     img.crossOrigin = 'anonymous'
-    if (annotation && !media.path.startsWith('blob:')) {
+    const isLocalPath = media.path.startsWith('blob:') || media.path.startsWith('data:')
+    if (annotation && !isLocalPath) {
       img.src = `/api/annotations/annotations/${annotation.id}/image`
-    } else if (media.path.startsWith('blob:')) {
+    } else if (isLocalPath) {
       img.src = media.path
     } else {
       img.src = `/api/annotations/media/${media.id}/file`
     }
     img.onload = () => {
       imgRef.current = img
-      setImgSize({ w: img.naturalWidth, h: img.naturalHeight })
+      const w = img.naturalWidth
+      const h = img.naturalHeight
+      setImgSize({ w, h })
+      const c = containerRef.current
+      if (c && w && h) {
+        const fit = Math.min(c.clientWidth / w, c.clientHeight / h)
+        const clamped = Math.max(0.05, Math.min(10, fit))
+        setZoom(clamped)
+        setPan({
+          x: (c.clientWidth - w * clamped) / 2,
+          y: (c.clientHeight - h * clamped) / 2,
+        })
+      }
     }
   }, [media, annotation, isVideo])