@tokenoftrust/storefront-runner 3.12.0 → 3.12.2

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/config/tenants.ts

@@ -41,10 +41,12 @@ export const HOME_TENANT: TenantConfig = {
   siteType: "marketing",
 };
 
-// Generic SAMPLE tenant — a placeholder regulated store used to demonstrate the
-// compliance affordance (age-gate + nicotine warning) WITHOUT any real merchant.
-// Routed at /sample-store.example/. Content comes from the developer's grafted
-// checkout (tenants/sample-store.example/); with none present it degrades to the
+// Generic SAMPLE tenant — the public fallback renderer's regulated store.
+// Its page bands come from the same complianceSections() gates as a primary
+// vape-nicotine-us tenant (nicotine warning, shipping restriction, age gate,
+// excise disclosure). No real merchant. Routed at /sample-store.example/.
+// Content comes from the developer's grafted checkout
+// (tenants/sample-store.example/); with none present it degrades to the
 // default scope, and the compliance overlay still renders from this config.
 export const SAMPLE_TENANT: TenantConfig = {
   tenant_id: "sample-store.example",
@@ -62,14 +64,22 @@ export const SAMPLE_TENANT: TenantConfig = {
     repo: "sample-store.example",
     defaultBranch: "main",
   })],
-  // Regulated-store demo: shows the 21+/PACT compliance gate is CONFIG-driven.
+  // Same section inputs as a primary vape-nicotine-us commerce tenant.
+  // pactAct stays unset: the primary page does not emit that band unless the
+  // flag is set. ruleProfile selects the checkout ruleset only.
   compliance: {
+    ruleProfile: "vape-nicotine-us",
     minAge: 21,
     nicotineWarning: true,
     shippingRestriction:
       "Adult signature (21+) required on delivery. Some destinations are restricted — verified at checkout.",
   },
-  siteType: "marketing",
+  capabilities: {
+    cartCheckout: { enabled: true },
+    ageVerification: { enabled: true },
+    exciseTax: { enabled: true },
+  },
+  siteType: "commerce",
 };
 
 const REGISTRY: TenantConfig[] = [HOME_TENANT, SAMPLE_TENANT];

package/apps/storefront/src/layouts/Layout.astro

@@ -20,6 +20,7 @@ import PactActNotice from "@/components/compliance/storefront/compliance/PactAct
 import ShippingRestrictionNotice from "@/components/compliance/storefront/compliance/ShippingRestrictionNotice.astro";
 import ExciseTaxNotice from "@/components/compliance/storefront/compliance/ExciseTaxNotice.astro";
 import { EXCISE_TAX_DISCLOSURE_TEXT } from "@/lib/compliance/rawComplianceNotices";
+import { complianceSections } from "@/lib/compliance/complianceSections";
 import IsolatedAgeGate from "@/components/compliance/storefront/islands/IsolatedAgeGate.tsx";
 import AuthBadge from "@/components/access/storefront/auth/AuthBadge.astro";
 import { referenceTheme } from "@/themes/reference";
@@ -215,6 +216,12 @@ if (chromeHtml && chromeHtml.includes(CHROME_BODY_MARKER)) {
 }
 
 const compliance = tenant.compliance;
+const sections = complianceSections({
+  compliance,
+  ageVerificationEnabled: capabilities.ageVerification.enabled,
+  exciseTaxEnabled: capabilities.exciseTax.enabled,
+  catalog: features.catalog,
+});
 const cartHref = managedCartHref(Astro.locals.commerce);
 
 // Site-chrome data resolution (chrome/* is the canonical, prop-driven
@@ -368,7 +375,7 @@ const footerWidgets = await renderWidgetSlot(
 
     <AuthBadge />
 
-    {compliance?.nicotineWarning && <NicotineWarning variant="bar" declaration={compliance.nicotineWarning} />}
+    {sections.includes("nicotine-warning") && compliance?.nicotineWarning && <NicotineWarning variant="bar" declaration={compliance.nicotineWarning} />}
 
     {sharedChrome ? (
       <Fragment set:html={sharedChrome.header} />
@@ -406,8 +413,12 @@ const footerWidgets = await renderWidgetSlot(
       <slot />
     </main>
 
-    <PactActNotice enabled={compliance?.pactAct} minAge={compliance?.minAge} variant="footer" />
-    <ShippingRestrictionNotice text={compliance?.shippingRestriction} />
+    {sections.includes("pact-act") && (
+      <PactActNotice enabled={compliance?.pactAct} minAge={compliance?.minAge} variant="footer" />
+    )}
+    {sections.includes("shipping-restriction") && (
+      <ShippingRestrictionNotice text={compliance?.shippingRestriction} />
+    )}
 
     {sharedChrome ? (
       <>
@@ -460,7 +471,7 @@ const footerWidgets = await renderWidgetSlot(
       </div>
     ))}
 
-    {capabilities.ageVerification.enabled && compliance?.minAge && (
+    {sections.includes("age-gate") && capabilities.ageVerification.enabled && compliance?.minAge && (
       <IsolatedAgeGate
         client:only="preact"
         minAge={compliance.minAge}
@@ -477,7 +488,7 @@ const footerWidgets = await renderWidgetSlot(
     {/* Excise tax (Track B) — when enabled for this environment, the excise line
         is calculated + added inside the managed cart. This is the storefront's
         honest shopper-facing signal of it. */}
-    {capabilities.exciseTax.enabled && features.catalog && (
+    {sections.includes("excise-tax") && capabilities.exciseTax.enabled && features.catalog && (
       <ExciseTaxNotice variant="footer" config={{ note: EXCISE_TAX_DISCLOSURE_TEXT }} />
     )}
 

package/apps/storefront/src/lib/compliance/complianceSections.ts

@@ -0,0 +1,113 @@
+/**
+ * The page compliance bands, in document order.
+ *
+ * Layout.astro (primary) and the public fallback renderer (the sanitized
+ * sample tenant in the published runner) both decide which bands to emit from
+ * this list. `ruleProfile` selects the checkout ruleset; it does not add a
+ * band. A vape-nicotine-us store shows pact-act only when `compliance.pactAct`
+ * is set, the same gate the primary tenants use today.
+ */
+import {
+  resolveCapabilities,
+  resolveTenantFeatures,
+  type ComplianceConfig,
+  type TenantConfig,
+} from "@tot/public-runtime";
+import {
+  exciseTaxNoticeHtml,
+  nicotineWarningBarHtml,
+  pactActNoticeHtml,
+  shippingRestrictionNoticeHtml,
+  type RawComplianceChromeInput,
+} from "./rawComplianceNotices";
+
+export const COMPLIANCE_SECTION_IDS = [
+  "nicotine-warning",
+  "pact-act",
+  "shipping-restriction",
+  "age-gate",
+  "excise-tax",
+] as const;
+
+export type ComplianceSectionId = (typeof COMPLIANCE_SECTION_IDS)[number];
+
+export interface ComplianceSectionInput {
+  compliance?: ComplianceConfig | null;
+  ageVerificationEnabled: boolean;
+  exciseTaxEnabled: boolean;
+  catalog: boolean;
+}
+
+/** Bands Layout.astro mounts, under the same conditions, in document order. */
+export function complianceSections(input: ComplianceSectionInput): ComplianceSectionId[] {
+  const compliance = input.compliance;
+  const sections: ComplianceSectionId[] = [];
+  if (compliance?.nicotineWarning) sections.push("nicotine-warning");
+  if (compliance?.pactAct) sections.push("pact-act");
+  if (compliance?.shippingRestriction) sections.push("shipping-restriction");
+  if (input.ageVerificationEnabled && compliance?.minAge) sections.push("age-gate");
+  if (input.exciseTaxEnabled && input.catalog) sections.push("excise-tax");
+  return sections;
+}
+
+/**
+ * A primary vape-nicotine-us tenant as the registry declares one: the profile,
+ * 21+, the nicotine warning, a shipping line, commerce (catalog on), and the
+ * three capabilities. `pactAct` stays unset, so the list has no pact-act band.
+ */
+export const VAPE_NICOTINE_US_PRIMARY: ComplianceSectionInput = {
+  compliance: {
+    ruleProfile: "vape-nicotine-us",
+    minAge: 21,
+    nicotineWarning: true,
+    shippingRestriction:
+      "Adult signature (21+) required on delivery. Some destinations are restricted — verified at checkout.",
+  },
+  ageVerificationEnabled: true,
+  exciseTaxEnabled: true,
+  catalog: true,
+};
+
+export function vapeNicotineUsSections(): ComplianceSectionId[] {
+  return complianceSections(VAPE_NICOTINE_US_PRIMARY);
+}
+
+/** Raw-HTML injection for the bands in `sections`. Age-gate is not injectable. */
+export function rawComplianceChrome(
+  sections: readonly ComplianceSectionId[],
+  notices: RawComplianceChromeInput,
+): { top: string; bottom: string } {
+  const on = (id: ComplianceSectionId) => sections.includes(id);
+  const top = on("nicotine-warning") && notices.nicotineWarning
+    ? nicotineWarningBarHtml(notices.nicotineWarning)
+    : "";
+  let bottom = "";
+  if (on("pact-act") && notices.pactAct) bottom += pactActNoticeHtml(notices.minAge);
+  if (on("shipping-restriction")) bottom += shippingRestrictionNoticeHtml(notices.shippingRestriction);
+  if (on("excise-tax") && notices.exciseTaxEnabled) bottom += exciseTaxNoticeHtml();
+  return { top, bottom };
+}
+
+/** The same bands Layout would mount for this tenant, as raw-HTML chrome. */
+export function complianceChromeForTenant(
+  tenant: Pick<TenantConfig, "compliance" | "siteType" | "capabilities" | "features">,
+): { top: string; bottom: string } {
+  const capabilities = resolveCapabilities(tenant);
+  const features = resolveTenantFeatures(tenant);
+  const notices: RawComplianceChromeInput = {
+    nicotineWarning: tenant.compliance?.nicotineWarning,
+    pactAct: !!tenant.compliance?.pactAct,
+    minAge: tenant.compliance?.minAge,
+    shippingRestriction: tenant.compliance?.shippingRestriction,
+    exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
+  };
+  return rawComplianceChrome(
+    complianceSections({
+      compliance: tenant.compliance,
+      ageVerificationEnabled: capabilities.ageVerification.enabled,
+      exciseTaxEnabled: capabilities.exciseTax.enabled,
+      catalog: features.catalog,
+    }),
+    notices,
+  );
+}

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/apps/storefront/src/pages/[...slug].astro

@@ -14,7 +14,7 @@ import { breadcrumbLd } from "@/lib/content/shared/jsonld";
 import { truncate } from "@/lib/content/shared/format";
 import { faqFromHtml, faqFromSections } from "@/lib/content/seo/faqItems";
 import { rawHtmlPolicy, rawHtmlResponse, rawPageCanonicalUrl } from "@/lib/content/shared/rawMarketingHtml";
-import { renderRawComplianceTop, renderRawComplianceBottom } from "@/lib/compliance/rawComplianceNotices";
+import { complianceSections, rawComplianceChrome } from "@/lib/compliance/complianceSections";
 import { styleGuideAliasRewrite } from "@/lib/content/shared/styleGuidePaths";
 import { getBlogSettings } from "@/lib/content/blog/provider.js";
 import { loadBlogPostViewV1, type BlogPostViewPropsV1 } from "@/lib/content/blog/postView.js";
@@ -85,6 +85,12 @@ if (!blogPostProps) {
       shippingRestriction: tenant.compliance?.shippingRestriction,
       exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
     };
+    const complianceChrome = rawComplianceChrome(complianceSections({
+      compliance: tenant.compliance,
+      ageVerificationEnabled: capabilities.ageVerification.enabled,
+      exciseTaxEnabled: capabilities.exciseTax.enabled,
+      catalog: features.catalog,
+    }), notices);
     return rawHtmlResponse(rawHtml, {
       nonce: Astro.locals.cspNonce,
       basePath,
@@ -93,8 +99,8 @@ if (!blogPostProps) {
       plan: Astro.locals.integrationPlan,
       consentSnapshot: Astro.locals.consentSnapshot,
       canonicalUrl: rawPageCanonicalUrl(canonicalBase, slug),
-      complianceTop: rawPolicy.regulated ? renderRawComplianceTop(notices) : undefined,
-      complianceBottom: rawPolicy.regulated ? renderRawComplianceBottom(notices) : undefined,
+      complianceTop: complianceChrome.top || undefined,
+      complianceBottom: complianceChrome.bottom || undefined,
     });
   }
 

package/apps/storefront/src/pages/index.astro

@@ -20,7 +20,7 @@ import MarketingBlocks from "@/components/content/storefront/marketing/Marketing
 import TierCards from "@/components/membership/storefront/membership/TierCards.astro";
 import { withBase } from "@/lib/publication/shared/basePath";
 import { rawHtmlPolicy, rawHtmlResponse } from "@/lib/content/shared/rawMarketingHtml";
-import { renderRawComplianceTop, renderRawComplianceBottom } from "@/lib/compliance/rawComplianceNotices";
+import { complianceSections, rawComplianceChrome } from "@/lib/compliance/complianceSections";
 import AppWidgetFrame from "@/components/integrations/storefront/apps/AppWidgetFrame.astro";
 import { getRegistryService } from "@/lib/integrations/apps/registryAccess.js";
 import { renderWidgetSlot } from "@/lib/integrations/apps/widgets/renderSlot.js";
@@ -73,6 +73,12 @@ if (rawHtml && rawPolicy.allowed) {
     shippingRestriction: tenant.compliance?.shippingRestriction,
     exciseTaxEnabled: capabilities.exciseTax.enabled && features.catalog,
   };
+  const complianceChrome = rawComplianceChrome(complianceSections({
+    compliance: tenant.compliance,
+    ageVerificationEnabled: capabilities.ageVerification.enabled,
+    exciseTaxEnabled: capabilities.exciseTax.enabled,
+    catalog: features.catalog,
+  }), notices);
   return rawHtmlResponse(rawHtml, {
     nonce: Astro.locals.cspNonce,
     basePath,
@@ -81,8 +87,8 @@ if (rawHtml && rawPolicy.allowed) {
     plan: Astro.locals.integrationPlan,
     consentSnapshot: Astro.locals.consentSnapshot,
     canonicalUrl: new URL("/", canonicalBase + "/").toString(),
-    complianceTop: rawPolicy.regulated ? renderRawComplianceTop(notices) : undefined,
-    complianceBottom: rawPolicy.regulated ? renderRawComplianceBottom(notices) : undefined,
+    complianceTop: complianceChrome.top || undefined,
+    complianceBottom: complianceChrome.bottom || undefined,
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "3.12.0",
+  "version": "3.12.2",
   "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`));