full site update

node_modules/astro/components/Picture.astro

@@ -1,12 +1,16 @@
 ---
-import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import { getImage, imageConfig, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
 import * as mime from 'mrmime';
-import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
-import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
+import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind.js';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
+import type {
+	GetImageResult,
+	ImageOutputFormat,
+	UnresolvedImageTransform,
+} from '../dist/types/public/index.js';
 import type { HTMLAttributes } from '../types';
 
-type Props = (LocalImageProps | RemoteImageProps) & {
+export type Props = (LocalImageProps | RemoteImageProps) & {
 	formats?: ImageOutputFormat[];
 	fallbackFormat?: ImageOutputFormat;
 	pictureAttributes?: HTMLAttributes<'picture'>;
@@ -37,8 +41,20 @@ if (scopedStyleClass) {
 		pictureAttributes.class = scopedStyleClass;
 	}
 }
+
+const layout = props.layout ?? imageConfig.layout ?? 'none';
+const useResponsive = layout !== 'none';
+
+if (useResponsive) {
+	// Apply defaults from imageConfig if not provided
+	props.layout ??= imageConfig.layout;
+	props.fit ??= imageConfig.objectFit ?? 'cover';
+	props.position ??= imageConfig.objectPosition ?? 'center';
+}
+
 for (const key in props) {
 	if (key.startsWith('data-astro-cid')) {
+		// @ts-expect-error This is for island props so they're not properly typed
 		pictureAttributes[key] = props[key];
 	}
 }
@@ -53,7 +69,7 @@ const optimizedImages: GetImageResult[] = await Promise.all(
 				format: format,
 				widths: props.widths,
 				densities: props.densities,
-			}),
+			} as UnresolvedImageTransform),
 	),
 );
 
@@ -71,7 +87,7 @@ const fallbackImage = await getImage({
 	format: resultFallbackFormat,
 	widths: props.widths,
 	densities: props.densities,
-});
+} as UnresolvedImageTransform);
 
 const imgAdditionalAttributes: HTMLAttributes<'img'> = {};
 const sourceAdditionalAttributes: HTMLAttributes<'source'> = {};
@@ -88,13 +104,18 @@ if (fallbackImage.srcSet.values.length > 0) {
 if (import.meta.env.DEV) {
 	imgAdditionalAttributes['data-image-component'] = 'true';
 }
+
+const { class: className, ...attributes } = {
+	...imgAdditionalAttributes,
+	...fallbackImage.attributes,
+};
 ---
 
 <picture {...pictureAttributes}>
 	{
 		Object.entries(optimizedImages).map(([_, image]) => {
 			const srcsetAttribute =
-				props.densities || (!props.densities && !props.widths)
+				props.densities || (!props.densities && !props.widths && !useResponsive)
 					? `${image.src}${image.srcSet.values.length > 0 ? ', ' + image.srcSet.attribute : ''}`
 					: image.srcSet.attribute;
 			return (
@@ -106,5 +127,6 @@ if (import.meta.env.DEV) {
 			);
 		})
 	}
-	<img src={fallbackImage.src} {...imgAdditionalAttributes} {...fallbackImage.attributes} />
+	{/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */}
+	<img src={fallbackImage.src} {...attributes} class={className} />
 </picture>