components and storybook for development svg previews

src/components/Image.svelte

@@ -1,10 +1,11 @@
 <!--
-Multi-purpose image/SVG component with optional link wrapper,
-hover effects, size variants, and object-fit options.
+Multi-purpose image component with optional link wrapper,
+hover effects, size variants, and object-fit options. Includes support for WebP format with fallback to standard formats.
 -->
 
 <script>
-  export let src = "";
+  export let webpSrc = ""; // Optional WebP source for browsers that support it
+  export let src = "";     // Fallback (some devices don't support WebP) or primary source if webpSrc is not provided
   export let alt = "";
   export let href = null; // optional link URL
   export let target = "_blank";
@@ -12,6 +13,12 @@ hover effects, size variants, and object-fit options.
   export let objectFit = "contain"; // 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
   export let hover = false;
   export let className = "";
+
+  // optional srcset for responsive images (w descriptors means width-based, x descriptors means pixel density-based)
+  // e.g. "image-400.jpg 400w, image-800.jpg 800w"
+  export let srcSet = "";      // always set src if using this
+  export let webpSrcSet = "";  // always set src if using this
+  export let pictureClass = ""; // CSS/Tailwind classes applied to the <picture> element
   
   $: objectFitClass = {
     contain: "object-contain",
@@ -25,22 +32,29 @@ hover effects, size variants, and object-fit options.
 </script>
 
 {#if href}
-  <a
-    {href}
-    {target}
-    {rel}
-    class="inline-block leading-none"
-  >
-    <img
-      {src}
-      {alt}
-      class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
-    />
+  <a {href} {target} {rel} class="inline-block leading-none">
+    <picture class={pictureClass}>
+      {#if webpSrc || webpSrcSet}
+        <source srcset={webpSrcSet || webpSrc} type="image/webp" />
+      {/if}
+      <img
+        {src}
+        srcset={srcSet || undefined}
+        alt={alt}
+        class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
+      />
+    </picture>
   </a>
 {:else}
-  <img
-    {src}
-    {alt}
-    class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
-  />
+  <picture class={pictureClass}>
+    {#if webpSrc || webpSrcSet}
+      <source srcset={webpSrcSet || webpSrc} type="image/webp" />
+    {/if}
+    <img
+      {src}
+      srcset={srcSet || undefined}
+      alt={alt}
+      class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
+    />
+  </picture>
 {/if}