srcdev-nuxt-components 9.1.45 → 9.1.47

package/.claude/skills/components/scroll-reveal-image.md

@@ -24,6 +24,7 @@ For arbitrary slot content — a grid of images, video, markup — use `ScrollRe
 | `parallaxOffset` | `string` | `"36rem"` | Distance the image travels vertically across the full scroll range. Larger = more dramatic reveal. |
 | `focalX` | `string` | `"50%"` | Horizontal focal point — CSS `object-position` x-axis value. Controls which horizontal slice stays in view. |
 | `radius` | `string` | `"0px"` | `border-radius` applied to the clipping frame. |
+| `loading` | `"lazy" \| "eager"` | `"lazy"` | Image loading strategy. Use `"eager"` if this is the LCP image (e.g. partially in view on load). |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root `<figure>`. |
 
 ## Basic usage
@@ -157,7 +158,7 @@ See `scroll-reveal-frame.md` for the full guide. For portrait images the default
 ## Notes
 
 - The root `<figure>` has `margin: 0` set in the component — browser default `<figure>` margins are neutralised at source.
-- `loading="lazy"` and `decoding="async"` are hardcoded on the `<img>`. If this component is the LCP image, override with `loading="eager"` via a CSS-only approach is not possible — use `ScrollRevealFrame` with a manual `NuxtImg` instead and set `:loading="'eager'"`.
+- `decoding="async"` is always set on the `<img>`. Use `:loading="'eager'"` if this component is the LCP image (e.g. a hero partially in view on load) — the default `"lazy"` is correct for below-fold usage.
 - Do not place inside a container with `overflow: hidden` or `overflow: clip` — breaks the `view-timeline` scroll detection inherited from `ScrollRevealFrame`.
 - Reduced-motion: animation is disabled and the image falls back to a static crop centred at `object-position: <focalX> 50%`.
 - Storybook: the `"none"` image provider is active (`nuxt.config.ts`), so `src` paths pass through unchanged. Always provide explicit `img-width` and `img-height` props to avoid the `w=1536` fallback in deployed Storybook.

package/app/components/01.atoms/animations/scroll-reveal-image/ScrollRevealImage.vue

@@ -12,7 +12,7 @@
       :alt="alt"
       :width="imgWidth"
       :height="imgHeight"
-      loading="lazy"
+      :loading="loading"
       decoding="async"
     />
   </ScrollRevealFrame>
@@ -51,6 +51,7 @@ interface Props {
   focalX?: string;
   /** Optional rounded corners on the frame. */
   radius?: string;
+  loading?: "lazy" | "eager";
   styleClassPassthrough?: string | string[];
 }
 
@@ -62,6 +63,7 @@ withDefaults(defineProps<Props>(), {
   parallaxOffset: "36rem",
   focalX: "50%",
   radius: "0px",
+  loading: "lazy",
   styleClassPassthrough: () => [],
 });
 </script>

package/app/components/01.atoms/animations/scroll-reveal-image/tests/ScrollRevealImage.spec.ts

@@ -32,6 +32,7 @@ describe("ScrollRevealImage", () => {
         parallaxOffset: "20rem",
         focalX: "30%",
         radius: "1.6rem",
+        loading: "eager",
         styleClassPassthrough: ["custom-class"],
       },
     });
@@ -179,13 +180,20 @@ describe("ScrollRevealImage", () => {
     expect(img.attributes("height")).toBe("1920");
   });
 
-  it("sets loading=lazy on the image element", async () => {
+  it("sets loading=lazy on the image element by default", async () => {
     const wrapper = await mountSuspended(ScrollRevealImage, {
       props: { src: "/images/test.jpg" },
     });
     expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("lazy");
   });
 
+  it("passes loading=eager to the image element when set", async () => {
+    const wrapper = await mountSuspended(ScrollRevealImage, {
+      props: { src: "/images/test.jpg", loading: "eager" },
+    });
+    expect(wrapper.find("img[data-nuxt-img]").attributes("loading")).toBe("eager");
+  });
+
   it("sets decoding=async on the image element", async () => {
     const wrapper = await mountSuspended(ScrollRevealImage, {
       props: { src: "/images/test.jpg" },

package/app/components/01.atoms/animations/scroll-reveal-image/tests/__snapshots__/ScrollRevealImage.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`ScrollRevealImage > renders correct HTML structure (all props set) 1`] = `
 "<figure class="reveal-frame custom-class" style="--_frame-height: 400px; --_parallax-offset: 20rem; --_radius: 1.6rem; --_focal-x: 30%;">
-  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="lazy" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
+  <div class="reveal-content"><img width="800" height="600" data-nuxt-img="" srcset="/_ipx/s_800x600/images/test.jpg 1x, /_ipx/s_1600x1200/images/test.jpg 2x" class="reveal-image" alt="All props" loading="eager" decoding="async" src="/_ipx/s_800x600/images/test.jpg"></div>
 </figure>"
 `;
 

package/app/components/02.molecules/profile-section/ProfileSection.vue

@@ -100,11 +100,6 @@ watch(
       }
 
       .profile-info {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-        height: stretch;
-
         .profile-info-content {
           .profile-info-block {
             margin-block-end: 1.5rem;

package/app/components/02.molecules/samaritan-prompt/SamaritanPromptMixed.vue

@@ -172,72 +172,80 @@ onUnmounted(stop);
   src: url("/fonts/monoMMM_5.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
-  font-display: swap;
+  font-display: optional;
 }
 
-.samaritan-prompt {
-  --_font-size: var(--samaritan-font-size, 2rem);
-  --_color-text: var(--samaritan-color-text, #ffffff);
-  --_color-underline: var(--samaritan-color-underline, #ffffff);
-  --_color-cursor: var(--samaritan-color-cursor, #cc0000);
-  --_color-cursor-off: var(--samaritan-color-cursor-off, transparent);
-  --_font-family: var(--samaritan-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
-  --_letter-spacing: var(--samaritan-letter-spacing, 0.08em);
-
+.samaritan-stage {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  row-gap: 0.6rem;
-  font-family: var(--_font-family);
-  font-size: var(--_font-size);
-  letter-spacing: var(--_letter-spacing);
+  justify-content: center;
+  min-block-size: 100dvh;
+  width: 100%;
+
+  .samaritan-prompt {
+    --_font-size: var(--samaritan-font-size, 2rem);
+    --_color-text: var(--samaritan-color-text, #ffffff);
+    --_color-underline: var(--samaritan-color-underline, #ffffff);
+    --_color-cursor: var(--samaritan-color-cursor, #cc0000);
+    --_color-cursor-off: var(--samaritan-color-cursor-off, transparent);
+    --_font-family: var(--samaritan-font-family, "Mono MMM 5", "Nova Mono", "Courier New", monospace);
+    --_letter-spacing: var(--samaritan-letter-spacing, 0.08em);
 
-  .samaritan-prompt__content {
     display: flex;
     flex-direction: column;
     align-items: center;
     row-gap: 0.6rem;
-    width: 100%;
-    transition: opacity v-bind(fadeDurationCss) ease;
+    font-family: var(--_font-family);
+    font-size: var(--_font-size);
+    letter-spacing: var(--_letter-spacing);
 
-    .samaritan-prompt__stage {
+    .samaritan-prompt__content {
       display: flex;
-      justify-content: center;
-      min-height: 1.2em;
+      flex-direction: column;
+      align-items: center;
+      row-gap: 0.6rem;
+      width: 100%;
+      transition: opacity v-bind(fadeDurationCss) ease;
+
+      .samaritan-prompt__stage {
+        display: flex;
+        justify-content: center;
+        min-height: 1.2em;
 
-      .samaritan-prompt__text {
-        color: var(--_color-text);
-        white-space: nowrap;
-        text-transform: uppercase;
+        .samaritan-prompt__text {
+          color: var(--_color-text);
+          white-space: nowrap;
+          text-transform: uppercase;
+        }
       }
-    }
 
-    .samaritan-prompt__underline {
-      width: 100%;
-      min-width: 4ch;
-      height: 0.15rem;
-      background: var(--_color-underline);
+      .samaritan-prompt__underline {
+        width: 100%;
+        min-width: 4ch;
+        height: 0.15rem;
+        background: var(--_color-underline);
+      }
     }
-  }
 
-  .samaritan-prompt__cursor {
-    color: var(--_color-cursor);
-    font-size: 2.4rem;
-    line-height: 1;
-    animation: samaritan-pulse 2.5s ease-in-out infinite;
-    transition: opacity 400ms ease;
-  }
+    .samaritan-prompt__cursor {
+      color: var(--_color-cursor);
+      font-size: 2.4rem;
+      line-height: 1;
+      animation: samaritan-pulse 2.5s ease-in-out infinite;
+      transition: opacity 400ms ease;
+    }
 
-  .samaritan-prompt__sr-text {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
+    .samaritan-prompt__sr-text {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
   }
 }
 

package/app/pages/samaritan.vue

@@ -230,11 +230,6 @@ const qaHideCursorInCycle = ref(true);
   --samaritan-letter-spacing: 0.14em;
 
   .samaritan-stage {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-block-size: 100dvh;
-
     .samaritan-stage--mixed {
       border-top: 1px solid oklch(100% 0 0 / 0.08);
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.45",
+  "version": "9.1.47",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",