@tokenoftrust/storefront-runner 3.12.0 → 3.12.1

package/apps/storefront/src/components/content/storefront/home/Hero.astro

@@ -24,7 +24,7 @@ import type { CatalogProduct } from "@tot/public-runtime";
 import Img from "@/components/assets/storefront/Img.astro";
 import { withBase } from "@/lib/publication/shared/basePath";
 import { pageUrlForm } from "@/lib/content/seo/urlForm";
-import { heroSlideshowView } from "@/lib/content/shared/heroSlideshow";
+import { heroFrame, heroSlideshowView, HERO_PHONE_MEDIA } from "@/lib/content/shared/heroSlideshow";
 
 interface Props {
   block: HeroBlock;
@@ -44,6 +44,8 @@ const heroImg = block.image;
 const hasImage = Boolean(heroImg || (prodImg && featureProduct));
 const slideshowView = heroSlideshowView(block, instanceKey, basePath);
 const slides = slideshowView.slides;
+const bannerFrame = heroFrame(block.width, block.height);
+const featureFrame = heroFrame(block.width, block.height, 1600, 1000);
 const slideshow = slides.length > 0;
 const slideId = slideshowView.id;
 const notice = block.notice?.trim();
@@ -76,11 +78,23 @@ const notice = block.notice?.trim();
             checked={slide.checked}
             aria-label={slide.radioLabel}
           />
-          <div class="hero-slideshow__slide" role={slide.groupRole} aria-roledescription="slide" aria-label={slide.groupLabel} data-focus-target={slide.focusTarget}>
+          <div class="hero-slideshow__slide" role={slide.groupRole} aria-roledescription="slide" aria-label={slide.groupLabel} data-focus-target={slide.focusTarget} style={`--hero-aspect: ${slide.aspectRatio}`}>
             {slide.ctaHref ? (
               <a href={slide.href} aria-label={slide.ctaLabel ?? slide.headline ?? slide.imageAlt} class="block w-full">
-                <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+                {slide.imageMobile ? (
+                  <picture>
+                    <source media={HERO_PHONE_MEDIA} srcset={slide.imageMobile} />
+                    <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+                  </picture>
+                ) : (
+                  <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+                )}
               </a>
+            ) : slide.imageMobile ? (
+              <picture>
+                <source media={HERO_PHONE_MEDIA} srcset={slide.imageMobile} />
+                <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
+              </picture>
             ) : (
               <img src={slide.image} alt={slide.imageAlt} width={slide.width} height={slide.height} loading={slide.loading} fetchpriority={slide.fetchpriority} decoding={slide.decoding} class="hero-slideshow__image" />
             )}
@@ -108,23 +122,53 @@ const notice = block.notice?.trim();
         aria-label={block.ctaLabel ?? block.headline}
         class="block w-full"
       >
+        {block.imageMobile ? (
+          <picture>
+            <source media={HERO_PHONE_MEDIA} srcset={block.imageMobile} />
+            <img
+              src={block.image}
+              alt={block.imageAlt ?? ""}
+              width={bannerFrame.width}
+              height={bannerFrame.height}
+              loading="eager"
+              fetchpriority="high"
+              decoding="sync"
+              class="block h-auto w-full"
+            />
+          </picture>
+        ) : (
+          <img
+            src={block.image}
+            alt={block.imageAlt ?? ""}
+            width={bannerFrame.width}
+            height={bannerFrame.height}
+            loading="eager"
+            fetchpriority="high"
+            decoding="sync"
+            class="block h-auto w-full"
+          />
+        )}
+      </a>
+    ) : block.imageMobile ? (
+      <picture>
+        <source media={HERO_PHONE_MEDIA} srcset={block.imageMobile} />
         <img
           src={block.image}
-          alt={block.imageAlt ?? ""}
-          width={1920}
-          height={650}
+          alt={block.imageAlt ?? block.headline}
+          width={bannerFrame.width}
+          height={bannerFrame.height}
           loading="eager"
           fetchpriority="high"
           decoding="sync"
           class="block h-auto w-full"
         />
-      </a>
+      </picture>
     ) : (
       <img
         src={block.image}
         alt={block.imageAlt ?? block.headline}
-        width={1920}
-        height={650}
+        width={bannerFrame.width}
+        height={bannerFrame.height}
         loading="eager"
         fetchpriority="high"
         decoding="sync"
@@ -226,16 +270,32 @@ const notice = block.notice?.trim();
               width/height attributes mean the final render still uses the
               image's natural ratio; the dims below only size the pre-load box.
             */}
-            <img
-              src={heroImg}
-              alt={block.imageAlt ?? block.headline}
-              width={1600}
-              height={1000}
-              loading="eager"
-              fetchpriority="high"
-              decoding="sync"
-              class="h-full w-full object-cover"
-            />
+            {block.imageMobile ? (
+              <picture>
+                <source media={HERO_PHONE_MEDIA} srcset={block.imageMobile} />
+                <img
+                  src={heroImg}
+                  alt={block.imageAlt ?? block.headline}
+                  width={featureFrame.width}
+                  height={featureFrame.height}
+                  loading="eager"
+                  fetchpriority="high"
+                  decoding="sync"
+                  class="h-full w-full object-cover"
+                />
+              </picture>
+            ) : (
+              <img
+                src={heroImg}
+                alt={block.imageAlt ?? block.headline}
+                width={featureFrame.width}
+                height={featureFrame.height}
+                loading="eager"
+                fetchpriority="high"
+                decoding="sync"
+                class="h-full w-full object-cover"
+              />
+            )}
           </div>
         </div>
       ) : (
@@ -289,11 +349,13 @@ const notice = block.notice?.trim();
 
 <style>
   .hero-slideshow { position: relative; overflow: hidden; }
-  .hero-slideshow__slides { display: grid; aspect-ratio: 1920 / 650; background: var(--color-bg); }
+  .hero-slideshow__slides { display: grid; background: var(--color-bg); }
   .hero-slideshow__radio { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
-  .hero-slideshow__slide { grid-area: 1 / 1; display: none; min-width: 0; }
-  .hero-slideshow__radio:checked + .hero-slideshow__slide { display: grid; }
-  .hero-slideshow__slide > a { min-width: 0; }
+  .hero-slideshow__slide { grid-area: 1 / 1; display: none; width: 100%; height: auto; align-self: start; justify-self: stretch; min-width: 0; aspect-ratio: var(--hero-aspect, 1920 / 650); }
+  .hero-slideshow__radio:checked + .hero-slideshow__slide { display: block; }
+  .hero-slideshow__slide > a,
+  .hero-slideshow__slide > picture,
+  .hero-slideshow__slide > a > picture { display: block; width: 100%; height: 100%; min-width: 0; }
   .hero-slideshow__image { display: block; width: 100%; height: 100%; object-fit: contain; }
   .hero-slideshow__controls { position: absolute; inset-inline: 0; bottom: 1rem; z-index: 1; display: flex; justify-content: center; gap: .5rem; }
   .hero-slideshow__controls label { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 86%, transparent); color: var(--color-text); cursor: pointer; font: 600 .75rem/1 var(--font-mono); }

package/apps/storefront/src/lib/content/shared/heroSlideshow.ts

@@ -16,26 +16,54 @@ export function nextHeroSlideIndex(current: number, slideCount: number) {
   return current < 0 ? 0 : (current + 1) % slideCount;
 }
 
+/** Reserved slideshow box when a slide does not declare its own frame. */
+export const HERO_FRAME_WIDTH = 1920;
+export const HERO_FRAME_HEIGHT = 650;
+
+/** Matches the slideshow's own phone layout. One `<source>` so that viewport fetches one file. */
+export const HERO_PHONE_MEDIA = "(max-width: 40rem)";
+
+export function heroFrame(
+  width: number | undefined,
+  height: number | undefined,
+  fallbackWidth = HERO_FRAME_WIDTH,
+  fallbackHeight = HERO_FRAME_HEIGHT,
+) {
+  const declared = typeof width === "number"
+    && typeof height === "number"
+    && Number.isFinite(width)
+    && Number.isFinite(height)
+    && width > 0
+    && height > 0;
+  const frameWidth = declared ? width : fallbackWidth;
+  const frameHeight = declared ? height : fallbackHeight;
+  return { width: frameWidth, height: frameHeight, aspectRatio: `${frameWidth} / ${frameHeight}` };
+}
+
 export function heroSlideshowView(block: HeroBlock, instanceKey: string, basePath: string) {
   const slides = block.slides ?? [];
   return {
     id: `hero-slides-${instanceKey}`,
     autoplay: slides.length > 1,
     intervalMs: 6_000,
-    slides: slides.map((slide, index) => ({
-      ...slide,
-      href: slide.ctaHref ? withBase(basePath, slide.ctaHref) : undefined,
-      checked: index === 0,
-      loading: index === 0 ? ("eager" as const) : ("lazy" as const),
-      fetchpriority: index === 0 ? ("high" as const) : ("auto" as const),
-      decoding: index === 0 ? ("sync" as const) : ("async" as const),
-      width: 1920,
-      height: 650,
-      radioId: `hero-slides-${instanceKey}-${index}`,
-      radioLabel: `Show slide ${index + 1}: ${slide.headline ?? slide.imageAlt}`,
-      groupRole: "group" as const,
-      groupLabel: `${index + 1} of ${slides.length}`,
-      focusTarget: "slide" as const,
-    })),
+    slides: slides.map((slide, index) => {
+      const frame = heroFrame(slide.width, slide.height);
+      return {
+        ...slide,
+        href: slide.ctaHref ? withBase(basePath, slide.ctaHref) : undefined,
+        checked: index === 0,
+        loading: index === 0 ? ("eager" as const) : ("lazy" as const),
+        fetchpriority: index === 0 ? ("high" as const) : ("auto" as const),
+        decoding: index === 0 ? ("sync" as const) : ("async" as const),
+        width: frame.width,
+        height: frame.height,
+        aspectRatio: frame.aspectRatio,
+        radioId: `hero-slides-${instanceKey}-${index}`,
+        radioLabel: `Show slide ${index + 1}: ${slide.headline ?? slide.imageAlt}`,
+        groupRole: "group" as const,
+        groupLabel: `${index + 1} of ${slides.length}`,
+        focusTarget: "slide" as const,
+      };
+    }),
   };
 }

package/apps/storefront/src/lib/content/storyblok/content-model.ts

@@ -73,11 +73,21 @@ export interface HeroBlock {
   featureCollection?: string;
   /** Direct hero image URL (e.g. the merchant's own homepage hero slide). */
   image?: string;
+  /** Phone asset for the single image. The desktop `image` stays the fallback. */
+  imageMobile?: string;
   imageAlt?: string;
+  /** Intrinsic frame for the single image. Both are required together. */
+  width?: number;
+  height?: number;
   /** Optional static, governed campaign slides. The first slide is the LCP image. */
   slides?: Array<{
     image: string;
     imageAlt: string;
+    /** Phone asset. The desktop `image` stays the fallback. */
+    imageMobile?: string;
+    /** Intrinsic frame. Both are required together; omitted keeps the reserved box. */
+    width?: number;
+    height?: number;
     headline?: string;
     ctaLabel?: string;
     ctaHref?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "3.12.0",
+  "version": "3.12.1",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",

package/scripts/tenant/validate.mjs

@@ -492,6 +492,19 @@ function validatePromoTiles(block, file, at, out, tenantId) {
   }
 }
 
+function validateHeroMediaFields(owner, file, at, out, tenantId) {
+  if ((owner.width === undefined) !== (owner.height === undefined)) out.push(mk(ERROR, "block-prop", file, `${at}.width and ${at}.height must be supplied together`));
+  for (const prop of ["width", "height"]) {
+    if (owner[prop] !== undefined && (typeof owner[prop] !== "number" || !Number.isInteger(owner[prop]) || owner[prop] <= 0)) {
+      out.push(mk(ERROR, "block-prop", file, `${at}.${prop} must be a positive integer`));
+    }
+  }
+  if (owner.imageMobile !== undefined) {
+    if (typeof owner.imageMobile !== "string" || !owner.imageMobile.trim()) out.push(mk(ERROR, "block-prop", file, `${at}.imageMobile must be a non-empty string`));
+    else validateVisualAsset(owner.imageMobile, file, `${at}.imageMobile`, out, tenantId);
+  }
+}
+
 function validateHeroSlides(slides, file, at, out, tenantId) {
   if (!Array.isArray(slides) || slides.length === 0) { out.push(mk(ERROR, "block-prop", file, `${at}.slides must be a non-empty array`)); return; }
   slides.forEach((slide, index) => {
@@ -499,6 +512,7 @@ function validateHeroSlides(slides, file, at, out, tenantId) {
     if (slide == null || typeof slide !== "object" || Array.isArray(slide)) { out.push(mk(ERROR, "block-prop", file, `${slideAt} must be an object`)); return; }
     for (const prop of ["image", "imageAlt"]) if (typeof slide[prop] !== "string" || !slide[prop].trim()) out.push(mk(ERROR, "block-required", file, `${slideAt}.${prop} must be a non-empty string`));
     validateVisualAsset(slide.image, file, `${slideAt}.image`, out, tenantId);
+    validateHeroMediaFields(slide, file, slideAt, out, tenantId);
     for (const prop of ["headline", "ctaLabel", "ctaHref"]) if (slide[prop] !== undefined && (typeof slide[prop] !== "string" || !slide[prop].trim())) out.push(mk(ERROR, "block-prop", file, `${slideAt}.${prop} must be a non-empty string`));
     if ((slide.ctaLabel === undefined) !== (slide.ctaHref === undefined)) out.push(mk(ERROR, "block-required", file, `${slideAt}.ctaLabel and ${slideAt}.ctaHref must be supplied together`));
     if (typeof slide.ctaHref === "string" && !isSafeStorefrontHref(slide.ctaHref)) out.push(mk(ERROR, "navigation-href", file, `${slideAt}.ctaHref must be a same-storefront root-relative path`));
@@ -601,6 +615,7 @@ function validateHomeDoc(doc, file, tenantId) {
     if (component === "hero" && block.image !== undefined) {
       validateVisualAsset(block.image, file, `${at}.image`, out, tenantId);
     }
+    if (component === "hero") validateHeroMediaFields(block, file, at, out, tenantId);
     if (component === "hero" && block.slides !== undefined) validateHeroSlides(block.slides, file, at, out, tenantId);
     if (component === "hero" && block.notice !== undefined && (typeof block.notice !== "string" || !block.notice.trim())) {
       out.push(mk(ERROR, "block-prop", file, `${at}.notice must be a non-empty plain-text string`));