musculo

frontend/src/components/StructureInfoPanel.tsx

@@ -1,5 +1,6 @@
 import { useAtlasStore } from "../store/useAtlasStore.js";
 import type { Structure } from "../lib/api.js";
+import { MUSCLE_REFERENCE_IMAGE, hasMuscleReferenceImage } from "../data/muscleReferenceImages.js";
 
 export function StructureInfoPanel({
   bySlug,
@@ -59,6 +60,18 @@ export function StructureInfoPanel({
         <p className="text-sm text-slate-300 leading-relaxed">{structure.description}</p>
       )}
 
+      {hasMuscleReferenceImage(structure.slug) && (
+        <div className="rounded-lg border border-white/10 bg-white p-2">
+          <img
+            src={MUSCLE_REFERENCE_IMAGE.image}
+            alt="Ilustração clássica da parede abdominal mostrando reto do abdome, oblíquo externo e serrátil anterior"
+            className="w-full h-auto rounded"
+          />
+          <p className="text-xs text-slate-600 mt-2 leading-snug">{MUSCLE_REFERENCE_IMAGE.caption}</p>
+          <p className="text-[11px] text-slate-500 mt-1">{MUSCLE_REFERENCE_IMAGE.credit}</p>
+        </div>
+      )}
+
       {structure.regionPath.length > 0 && (
         <p className="text-xs text-slate-500">{structure.regionPath.join(" › ")}</p>
       )}