@tokenoftrust/storefront-runner 3.11.1 → 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/apps/storefront/src/middleware/renderChain.ts

@@ -49,6 +49,13 @@ import {
   resolveCapabilities,
   capabilitiesArtifactPath,
   resolveServableChannelVersion,
+  resolveChannelVersion,
+  serveTenantAsset,
+  parseTenantAssetPath,
+  compileRouteTierIndexV1,
+  parsePublicationVersionStateV1Json,
+  publicationVersionStateKey,
+  readPublicationRootAssetV1,
   channelFromEnv,
   resolveEnvironmentOnlyPlan,
   INTEGRATION_NONCE_PLACEHOLDER,
@@ -66,6 +73,17 @@ import {
 } from "@tot/public-runtime";
 import { readBakedManagedInstalls } from "@/lib/integrations/integration/bakedManagedInstalls";
 import { readWithImagePreviewRewriteOverlay } from "@tot/public-runtime/image-preview-rewrite-overlay";
+import { publicationRecoveryActiveV1, publicationRecoveryKeyV1 } from "@tot/public-runtime/publication-recovery";
+import {
+  distinctTenantThemeGroups,
+  inlineDistinctTenantThemeGroups,
+  previewThemeInlineApplies,
+  selectServedThemeCss,
+} from "@tot/public-runtime/theme-stylesheets";
+import {
+  resolvePreviewVersionFromCookies,
+  resolveSharedPreviewAssetVersion,
+} from "@/lib/assets/preview-version-cookie";
 import type {
   CapabilityConfig,
   ConsentSnapshot,
@@ -75,7 +93,10 @@ import type {
   ThemeTokens,
   BrowserEnvironment,
   PublicationArtifactBucketV1,
+  PublicationArtifactReadBucketV1,
+  PublicationChannelV1,
   PublicationRoutePlanV1,
+  R2BucketLike,
   RouteTierIndexV1,
 } from "@tot/public-runtime";
 import {
@@ -359,7 +380,6 @@ export async function runRenderChain(input: RenderChainInput): Promise<Response>
   // Digest-addressed static-bundle serving. Deliberately before the edge page
   // cache/catalog/theme machinery. A selected publication bypasses this legacy
   // whole-site bundle until B1 can compose mounted spaces into it reproducibly.
-  const { resolvePreviewVersionFromCookies } = await import("@/lib/assets/preview-version-cookie");
   const cookieRevision = await resolvePreviewVersionFromCookies({
     tenantId: tenant.tenant_id,
     previewVersionCookie: context.cookies.get("tot_preview_version")?.value,
@@ -787,6 +807,21 @@ export async function runRenderChain(input: RenderChainInput): Promise<Response>
     nonce: cspNonce,
   });
 
+  // Distinct tenant theme sheets are render-blocking `/tenants/` fetches. Inline
+  // them into this preview document. Publication capture keeps the source links
+  // so the asset pipeline concatenates the same run for both CDNs.
+  response = await inlinePreviewTenantThemes(response, {
+    request,
+    customizationEnv: customization.env,
+    tenant,
+    kvGet,
+    isPreviewHost,
+    previewToken,
+    previewSecret,
+    nowSeconds,
+    pinnedVersionId: cookieRevision,
+  });
+
   // Baseline security headers on every response — set before the page-cache
   // store below so cached copies carry them too.
   applySecurityHeaders(response.headers);
@@ -919,3 +954,169 @@ export async function runRenderChain(input: RenderChainInput): Promise<Response>
   // matching nonce/CSP pair, and no nonce is reused across responses (ADR 0018).
   return await stampResponseNonce(response, freshNonce());
 }
+
+/**
+ * Inline a run of distinct tenant theme stylesheets into a preview document.
+ * Bytes follow the `/tenants/<id>/` route: publication root, then the preview
+ * overlay, then the asset store. A miss leaves that run as links.
+ */
+async function inlinePreviewTenantThemes(response: Response, input: {
+  request: Request;
+  customizationEnv: "live" | "test";
+  tenant: TenantConfig;
+  kvGet: (key: string) => Promise<string | null>;
+  isPreviewHost: boolean;
+  previewToken: string | null;
+  previewSecret: string | null;
+  nowSeconds: number;
+  pinnedVersionId: string | null;
+}): Promise<Response> {
+  if (!previewThemeInlineApplies({
+    method: input.request.method,
+    customizationEnv: input.customizationEnv,
+    captureProbe: input.request.headers.get(HTML_CACHE_POLICY_CAPTURE_PROBE),
+    contentType: response.headers.get("content-type") ?? "",
+  }) || response.status !== 200) return response;
+
+  const html = await response.text();
+  if (distinctTenantThemeGroups(html).length === 0) return htmlResponse(response, html);
+
+  try {
+    const shared = input.pinnedVersionId
+      ? { preview: false, versionId: null }
+      : await resolveSharedPreviewAssetVersion({
+          tenantId: input.tenant.tenant_id,
+          previewHost: input.isPreviewHost,
+          previewToken: input.previewToken,
+          secret: input.previewSecret,
+          nowSeconds: input.nowSeconds,
+          readPreviewChannelVersion: () =>
+            resolveChannelVersion(input.kvGet, input.tenant.tenant_id, "preview"),
+        });
+    const previewVersionId = input.pinnedVersionId ?? shared.versionId;
+    const publicationChannel: PublicationChannelV1 =
+      shared.preview || input.customizationEnv === "test" ? "preview" : "live";
+    const assetChannel = shared.preview ? "test" as const : input.customizationEnv;
+    const bucket = await readR2("TENANT_ASSETS");
+    const paths = [...new Set(
+      distinctTenantThemeGroups(html).flatMap((group) => group.sheets.map((sheet) => sheet.path)),
+    )];
+    const css = new Map<string, string | null>();
+    await Promise.all(paths.map(async (pathname) => {
+      try {
+        css.set(pathname, bucket
+          ? await readPreviewThemeCss({
+              tenant: input.tenant,
+              pathname,
+              bucket: bucket as unknown as R2BucketLike,
+              kvGet: input.kvGet,
+              publicationChannel,
+              assetChannel,
+              previewVersionId,
+            })
+          : null);
+      } catch {
+        css.set(pathname, null);
+      }
+    }));
+    const next = inlineDistinctTenantThemeGroups(html, (pathname) => css.get(pathname) ?? null);
+    return htmlResponse(response, next);
+  } catch {
+    return htmlResponse(response, html);
+  }
+}
+
+function htmlResponse(response: Response, html: string): Response {
+  const headers = new Headers(response.headers);
+  headers.delete("content-length");
+  headers.delete("content-encoding");
+  return new Response(html, { status: response.status, statusText: response.statusText, headers });
+}
+
+async function readPreviewThemeCss(input: {
+  tenant: TenantConfig;
+  pathname: string;
+  bucket: R2BucketLike;
+  kvGet: (key: string) => Promise<string | null>;
+  publicationChannel: PublicationChannelV1;
+  assetChannel: "live" | "test";
+  previewVersionId: string | null;
+}): Promise<string | null> {
+  return selectServedThemeCss({
+    previewVersionId: input.previewVersionId,
+    publicationRoot: () => publicationRootThemeCss(input),
+    overlay: () => overlayThemeCss(input),
+    asset: () => assetThemeCss(input),
+  });
+}
+
+/** Same order as GET `/tenants/<id>/<path>`: a selected root file answers, including its 404. */
+async function publicationRootThemeCss(input: {
+  tenant: TenantConfig;
+  pathname: string;
+  bucket: R2BucketLike;
+  kvGet: (key: string) => Promise<string | null>;
+  publicationChannel: PublicationChannelV1;
+}): Promise<"legacy" | "absent" | string> {
+  const parsed = parseTenantAssetPath(input.pathname);
+  if (!parsed || parsed.tenantId !== input.tenant.tenant_id) return "legacy";
+  if (!input.tenant.publicationSpaces?.some((space) => space.routes.canonicalMount === "/")) return "legacy";
+  const [stateJson, recoveryJson] = await Promise.all([
+    input.kvGet(publicationVersionStateKey(input.tenant.tenant_id)),
+    input.publicationChannel === "live"
+      ? input.kvGet(publicationRecoveryKeyV1(input.tenant.tenant_id))
+      : Promise.resolve(null),
+  ]);
+  if (stateJson === null || publicationRecoveryActiveV1(recoveryJson)) return "legacy";
+  const state = parsePublicationVersionStateV1Json(stateJson);
+  if (!state.ok) return "legacy";
+  const read = await readPublicationRootAssetV1({
+    index: compileRouteTierIndexV1(input.tenant),
+    state: state.value,
+    channel: input.publicationChannel,
+    bucket: input.bucket as unknown as PublicationArtifactReadBucketV1,
+    relativePath: parsed.rel,
+  });
+  if (read.status === "legacy-root") return "legacy";
+  if (read.status === "absent") return "absent";
+  try {
+    return new TextDecoder("utf-8", { fatal: true }).decode(read.bytes);
+  } catch {
+    return "absent";
+  }
+}
+
+async function overlayThemeCss(input: {
+  tenant: TenantConfig;
+  pathname: string;
+  kvGet: (key: string) => Promise<string | null>;
+  previewVersionId: string | null;
+}): Promise<string | null> {
+  if (!input.previewVersionId) return null;
+  const parsed = parseTenantAssetPath(input.pathname);
+  if (!parsed || parsed.tenantId !== input.tenant.tenant_id) return null;
+  return readWithImagePreviewRewriteOverlay(
+    input.kvGet,
+    input.tenant.tenant_id,
+    input.previewVersionId,
+    `tenants/${input.tenant.tenant_id}/public/${parsed.rel}`,
+    async () => null,
+  );
+}
+
+async function assetThemeCss(input: {
+  pathname: string;
+  bucket: R2BucketLike;
+  kvGet: (key: string) => Promise<string | null>;
+  assetChannel: "live" | "test";
+  previewVersionId: string | null;
+}): Promise<string | null> {
+  const res = await serveTenantAsset({
+    bucket: input.bucket,
+    kvGet: input.kvGet,
+    channel: input.assetChannel,
+    ...(input.previewVersionId ? { versionId: input.previewVersionId } : {}),
+  }, input.pathname);
+  if (!res || res.status !== 200) return null;
+  return res.text();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "3.11.1",
+  "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/packages/public-runtime/package.json

@@ -31,6 +31,7 @@
     "./publication-recovery": "./src/publication-recovery.ts",
     "./tenant-embed-defaults": "./src/tenant-embed-defaults.mjs",
     "./declared-tenant-config": "./src/declared-tenant-config.mjs",
+    "./theme-stylesheets": "./src/theme-stylesheets.mjs",
     "./compliance-coherence": "./src/compliance-coherence.mjs",
     "./integration/lifecycle-host-asset": "./src/integration/lifecycle-host-asset.mjs",
     "./integration/native-ga4-sandbox-asset": "./src/integration/native-ga4-sandbox-asset.mjs",

package/packages/public-runtime/src/theme-stylesheets.mjs

@@ -0,0 +1,321 @@
+// @ts-check
+/**
+ * Distinct tenant theme stylesheets.
+ *
+ * A run of two or more different `/tenants/<id>/themes/*.css` links is one
+ * theme sheet. `/shared/` and `/_astro/` stay their own links and split a run.
+ * The same path repeated is not this case. Print, disabled, alternate, and
+ * commented links are not members. Integrity and an unusual media query split
+ * a run and are left in place.
+ *
+ * Preview inlines the run into the document already being rendered. Publication
+ * concatenates the same run in the asset pipeline. Neither path branches on a
+ * tenant id, and neither adds a Worker in front of public HTML.
+ */
+
+const TENANT_THEME_STYLESHEET = /^\/tenants\/[^/]+\/themes\/[^/?#]+\.css$/i;
+const SIMPLE_MEDIA = new Set(["", "all", "screen"]);
+const CSS_REF_RE = /url\(\s*(['"]?)([^'")]+?)\1\s*\)|@import\s+(['"])([^'"]+)\3/g;
+
+/**
+ * @param {string} pathname
+ */
+export function isTenantThemeStylesheetPath(pathname) {
+  return TENANT_THEME_STYLESHEET.test(pathname);
+}
+
+/**
+ * Preview inlines only a dynamic HTML GET that is not the publication capture
+ * and not the live document. The capture must still see the source links so
+ * the asset pipeline can copy each file.
+ * @param {{ method: string, customizationEnv: string, captureProbe: string | null, contentType: string }} input
+ */
+export function previewThemeInlineApplies(input) {
+  if (input.method !== "GET") return false;
+  if (input.customizationEnv === "live") return false;
+  if (input.captureProbe != null) return false;
+  return input.contentType.toLowerCase().includes("text/html");
+}
+
+/**
+ * Publication-root, then the preview rewrite overlay, then the asset store.
+ * `"absent"` stops the cascade: that is a selected publication file the
+ * browser would 404, not a cue to serve a different copy.
+ * @param {{
+ *   previewVersionId: string | null,
+ *   publicationRoot: () => Promise<"legacy" | "absent" | string>,
+ *   overlay: () => Promise<string | null>,
+ *   asset: () => Promise<string | null>,
+ * }} input
+ * @returns {Promise<string | null>}
+ */
+export async function selectServedThemeCss(input) {
+  const root = await input.publicationRoot();
+  if (root === "absent") return null;
+  if (root !== "legacy") return root;
+  if (input.previewVersionId) {
+    const overlay = await input.overlay();
+    if (overlay != null) return overlay;
+  }
+  return input.asset();
+}
+
+/**
+ * @param {string} html
+ * @returns {{ sheets: { start: number, end: number, path: string }[] }[]}
+ */
+export function distinctTenantThemeGroups(html) {
+  /** @type {{ start: number, end: number, path: string }[]} */
+  let run = [];
+  /** @type {{ sheets: { start: number, end: number, path: string }[] }[]} */
+  const groups = [];
+  const flush = () => {
+    if (run.length >= 2 && new Set(run.map((sheet) => sheet.path)).size >= 2) {
+      groups.push({ sheets: run });
+    }
+    run = [];
+  };
+  for (const sheet of blockingStylesheetLinks(html)) {
+    if (sheet.member) run.push(sheet);
+    else flush();
+  }
+  flush();
+  return groups;
+}
+
+/**
+ * Replace each distinct theme run with one inline style. A run whose bytes
+ * are missing, not utf-8, or whose relative url escapes the site is left as links.
+ * @param {string} html
+ * @param {(pathname: string) => string | null} cssFor
+ */
+export function inlineDistinctTenantThemeGroups(html, cssFor) {
+  const groups = distinctTenantThemeGroups(html);
+  if (groups.length === 0) return html;
+  /** @type {{ start: number, end: number, replacement: string }[]} */
+  const edits = [];
+  for (const group of groups) {
+    /** @type {string[]} */
+    const parts = [];
+    let skip = false;
+    for (const sheet of group.sheets) {
+      const css = cssFor(sheet.path);
+      const prepared = css == null ? null : prepareInlineSheet(css, sheet.path);
+      if (prepared == null) {
+        skip = true;
+        break;
+      }
+      parts.push(prepared);
+    }
+    const first = group.sheets[0];
+    if (skip || !first) continue;
+    const style = `<style data-tot-theme>${escapeStyleBody(parts.join("\n"))}</style>`;
+    edits.push({ start: first.start, end: first.end, replacement: style });
+    for (const sheet of group.sheets.slice(1)) {
+      edits.push({ start: sheet.start, end: sheet.end, replacement: "" });
+    }
+  }
+  return applyStylesheetEdits(html, edits);
+}
+
+/**
+ * @param {string} html
+ * @param {{ start: number, end: number, replacement: string }[]} edits
+ */
+export function applyStylesheetEdits(html, edits) {
+  const ordered = [...edits].sort((a, b) => b.start - a.start || b.end - a.end);
+  let out = html;
+  for (const edit of ordered) {
+    out = out.slice(0, edit.start) + edit.replacement + out.slice(edit.end);
+  }
+  return out;
+}
+
+/**
+ * @param {string} css
+ * @param {string} stylesheetPath
+ * @returns {string | null}
+ */
+function prepareInlineSheet(css, stylesheetPath) {
+  const charset = /^\uFEFF?@charset\s+["']([^"']+)["']\s*;/.exec(css);
+  const charsetLabel = charset?.[1];
+  if (charset && charsetLabel) {
+    if (charsetLabel.toLowerCase() !== "utf-8") return null;
+    css = css.slice(charset[0].length).replace(/^\s+/, "");
+  }
+  return rewriteRelativeCssUrls(css, stylesheetPath);
+}
+
+/**
+ * Root-absolute urls, so an inlined sheet resolves the same files the link did.
+ * A relative reference that escapes the site cannot be rewritten; the caller
+ * leaves the links in place.
+ * @param {string} css
+ * @param {string} stylesheetPath
+ * @returns {string | null}
+ */
+function rewriteRelativeCssUrls(css, stylesheetPath) {
+  const cssRel = stylesheetPath.replace(/^\/+/, "");
+  let escaped = false;
+  const out = css.replace(CSS_REF_RE, (whole, q1, u1, q2, u2) => {
+    const raw = (u1 ?? u2 ?? "").trim();
+    if (!raw || raw.startsWith("#") || raw.startsWith("//") || /^[a-z][a-z0-9+.-]*:/i.test(raw)) return whole;
+    const cut = raw.search(/[?#]/);
+    const path = cut === -1 ? raw : raw.slice(0, cut);
+    const suffix = cut === -1 ? "" : raw.slice(cut);
+    if (path.startsWith("/")) return whole;
+    let rel = null;
+    try {
+      rel = resolveRelative(cssRel, decodeURIComponent(path));
+    } catch {
+      rel = null;
+    }
+    if (!rel) {
+      escaped = true;
+      return whole;
+    }
+    const target = `/${rel}${suffix}`;
+    return u1 !== undefined ? `url(${q1}${target}${q1})` : `@import ${q2}${target}${q2}`;
+  });
+  return escaped ? null : out;
+}
+
+/**
+ * @param {string} fromRel
+ * @param {string} ref
+ * @returns {string | null}
+ */
+function resolveRelative(fromRel, ref) {
+  const parts = fromRel.split("/").slice(0, -1);
+  for (const seg of ref.split("/")) {
+    if (seg === "" || seg === ".") continue;
+    if (seg === "..") {
+      if (!parts.length) return null;
+      parts.pop();
+    } else parts.push(seg);
+  }
+  return parts.length ? parts.join("/") : null;
+}
+
+/**
+ * @param {string} css
+ */
+function escapeStyleBody(css) {
+  return css.replace(/<\/style/gi, "<\\/style");
+}
+
+/**
+ * @param {string} html
+ * @returns {{ start: number, end: number, path: string, member: boolean }[]}
+ */
+function blockingStylesheetLinks(html) {
+  const head = headSpan(html);
+  const comments = commentRanges(html);
+  /** @type {{ start: number, end: number, path: string, member: boolean }[]} */
+  const sheets = [];
+  for (const match of html.slice(head.start, head.end).matchAll(/<link\b([^>]*)>/gi)) {
+    const start = head.start + (match.index ?? 0);
+    if (inside(comments, start)) continue;
+    const attrs = match[1] ?? "";
+    const parsed = parseTagAttrs(attrs);
+    const rel = relTokens(parsed.rel);
+    if (!rel.includes("stylesheet") || rel.includes("alternate")) continue;
+    if (hasFlag(attrs, "disabled")) continue;
+    const media = (parsed.media || "").trim().toLowerCase();
+    if (media === "print") continue;
+    const href = (parsed.href || "").trim();
+    const path = pathnameOf(href);
+    const local = href.startsWith("/") && !href.startsWith("//");
+    const integrity = Object.prototype.hasOwnProperty.call(parsed, "integrity");
+    const odd = !SIMPLE_MEDIA.has(media);
+    if (!path) continue;
+    const member = local && !integrity && !odd && isTenantThemeStylesheetPath(path);
+    sheets.push({
+      start,
+      end: start + match[0].length,
+      path,
+      member,
+    });
+  }
+  return sheets;
+}
+
+/**
+ * @param {string} html
+ */
+function headSpan(html) {
+  const explicit = /<head[\s>][\s\S]*?<\/head>/i.exec(html);
+  if (explicit && explicit.index !== undefined) {
+    return { start: explicit.index, end: explicit.index + explicit[0].length };
+  }
+  const bodyAt = html.search(/<body[\s>]/i);
+  return { start: 0, end: bodyAt >= 0 ? bodyAt : html.length };
+}
+
+/**
+ * @param {string} html
+ * @returns {[number, number][]}
+ */
+function commentRanges(html) {
+  /** @type {[number, number][]} */
+  const ranges = [];
+  for (const match of html.matchAll(/<!--[\s\S]*?-->/g)) {
+    const start = match.index ?? 0;
+    ranges.push([start, start + match[0].length]);
+  }
+  return ranges;
+}
+
+/**
+ * @param {[number, number][]} ranges
+ * @param {number} index
+ */
+function inside(ranges, index) {
+  return ranges.some(([start, end]) => index >= start && index < end);
+}
+
+/**
+ * @param {string} href
+ * @returns {string}
+ */
+function pathnameOf(href) {
+  const bare = href.split(/[?#]/)[0] ?? "";
+  if (/^https?:/i.test(bare)) {
+    try {
+      return new URL(bare).pathname;
+    } catch {
+      return bare;
+    }
+  }
+  return bare;
+}
+
+/**
+ * @param {string} attrs
+ * @returns {Record<string, string>}
+ */
+function parseTagAttrs(attrs) {
+  /** @type {Record<string, string>} */
+  const out = {};
+  for (const match of attrs.matchAll(/([a-zA-Z_:][\w:.-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/g)) {
+    const name = match[1];
+    if (!name) continue;
+    out[name.toLowerCase()] = match[2] ?? match[3] ?? match[4] ?? "";
+  }
+  return out;
+}
+
+/**
+ * @param {string} attrs
+ * @param {string} name
+ */
+function hasFlag(attrs, name) {
+  return new RegExp(`(?:^|\\s)${name}(?=\\s|/|=|$)`, "i").test(attrs);
+}
+
+/**
+ * @param {string | undefined} rel
+ */
+function relTokens(rel) {
+  return String(rel || "").trim().toLowerCase().split(/\s+/).filter(Boolean);
+}

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`));