@nok-integration/storefront-react 0.19.39 → 0.19.41

package/dist/index.d.ts

@@ -2089,6 +2089,10 @@ declare type CategoryPage = z.infer<typeof CategoryPage>;
  *
  * Fetching happens on mount, client-side, through the provider's client — so it inherits
  * the host's session and market without being told about either.
+ *
+ * The page is held under the CODE it belongs to and read back only while that code is
+ * still the one being asked for, so a change of `code` never leaves the previous category
+ * on screen while the next one loads.
  */
 export declare function CategoryView({ code, initialData, onNotFound }: CategoryViewProps): JSX.Element;
 
@@ -2100,6 +2104,10 @@ export declare interface CategoryViewProps {
      * synchronously on the first frame — no skeleton, no waterfall — and revalidated in the
      * background, because a server-rendered page can be arbitrarily old by the time it is
      * interactive and price and availability are the two things worst served by being stale.
+     *
+     * Matched against `code` on every render, not only at mount, so a host that swaps both
+     * together has the new page painted immediately. A page for a different code is ignored
+     * rather than shown.
      */
     initialData?: CategoryPage;
     /**
@@ -4803,6 +4811,19 @@ declare const Product: z.ZodObject<{
 
 declare type Product = z.infer<typeof Product>;
 
+declare class ProductCache {
+    private readonly now;
+    private readonly entries;
+    /** Injectable so the age limit can be tested without leaning on timers. */
+    constructor(now?: () => number);
+    private static keyFor;
+    get(sku: string, market?: Market): Product | undefined;
+    set(product: Product, market?: Market): void;
+    setMany(products: readonly Product[], market?: Market): void;
+    /** Test seam. Nothing in the SDK calls this. */
+    clear(): void;
+}
+
 /**
  * 4.3 PDP interactive surface, aligned to the DAZN mobile PDP design. Sections render
  * from server-authoritative contract data: badges, title + price, promo nudge, description
@@ -4950,11 +4971,10 @@ declare type ProductVariant = z.infer<typeof ProductVariant>;
 /**
  * A whole product-detail screen, data fetching included — a **level 1 view**.
  *
- * Fetches the product, then enriches it with inventory and recommendations. Those two are
- * deliberately best-effort: the PDP renders perfectly well without either, so a failure in
- * one must not fault the screen. `Promise.allSettled` rather than `all` is what makes that
- * true — with `all`, a recommendations outage would blank a page the fan could otherwise
- * have bought from.
+ * All of the fetching lives in {@link useProduct}, which is exported: a host composing its
+ * own product screen from level-2 pieces gets the same behaviour rather than writing it
+ * again. Switching between two items paints the new one immediately wherever the rail
+ * already carried it, and never leaves the outgoing item up while the next one loads.
  *
  * `sku_not_found` is separated from the generic error path because it is not a fault: the
  * product is gone, and "this is no longer available" is the honest thing to say. An error
@@ -5538,6 +5558,8 @@ export declare function ShippingInfo(): JSX.Element;
 declare interface ShopContextValue {
     api: DaznClient;
     market?: Market;
+    /** Products this provider has already been given — see {@link ProductCache}. */
+    products: ProductCache;
     theme: 'light' | 'dark' | 'auto';
     notifications: 'internal' | 'host';
     locale?: string;
@@ -6395,6 +6417,56 @@ export declare function useMoney(defaultLocale?: string): {
  */
 export declare function useNavigate(): ((to: ShopRoute) => void) | null;
 
+/**
+ * The data behind a product screen: the product, then inventory and recommendations.
+ *
+ * This is what {@link ProductView} is built from, exported so a host composing its own
+ * product screen from the level-2 pieces does not have to write the fetching again. Two
+ * properties are worth knowing about, because a hand-rolled version has to reproduce both.
+ *
+ * **Everything is held under the SKU it belongs to**, and read back only while that SKU is
+ * still the one being asked for. A change of `sku` invalidates the whole set in the same
+ * render that changes it, so the outgoing product is never left on screen while the next
+ * one loads, and there is no frame in which one item's title sits above another item's
+ * price.
+ *
+ * **A product already in memory is painted at once.** The recommendation rail carries whole
+ * products, so opening one of them is usually drawn on the first frame and corrected a
+ * moment later, rather than spending a round trip behind a skeleton. Inventory and
+ * recommendations always come from the request — they are the two things worst served by
+ * being remembered, and neither is needed to draw the top of the screen.
+ *
+ * Inventory and recommendations are best-effort: the screen renders perfectly well without
+ * either, so a failure in one does not fault it.
+ */ export declare function useProduct(sku: string, options?: UseProductOptions): UseProductResult;
+
+export declare interface UseProductOptions {
+    /**
+     * An already-fetched product, from a host that server-rendered this screen. Painted on
+     * the first frame and revalidated in the background.
+     *
+     * Read on every render, not only at mount, so a host that swaps `sku` and `initialData`
+     * together has the new product painted immediately. It is matched against `sku` before
+     * use: a product for a different SKU is ignored rather than shown.
+     */
+    initialData?: {
+        product: Product;
+        inventory?: Inventory | null;
+    };
+    /** Fetch the "you may also like" rail. Default `true`. */
+    showRecommendations?: boolean;
+}
+
+export declare interface UseProductResult {
+    /** Null until there is something to draw for this SKU. */
+    product: Product | null;
+    inventory: Inventory | null;
+    recommendations: Product[];
+    /** Nothing to draw yet and nothing has gone wrong — it is still on its way. */
+    loading: boolean;
+    error: ReturnType<typeof codeOf> | undefined;
+}
+
 /** The typed, schema-validating commerce client. Requires a provider. */
 export declare function useShopApi(): DaznClient;
 

package/dist/index.mjs

@@ -5112,6 +5112,49 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
+const MAX_AGE_MS = 5 * 6e4;
+const CAPACITY = 60;
+class ProductCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entries = /* @__PURE__ */ new Map();
+  static keyFor(sku, market) {
+    return `${market?.country ?? ""}\0${market?.lang ?? ""}\0${sku}`;
+  }
+  get(sku, market) {
+    const key = ProductCache.keyFor(sku, market);
+    const entry = this.entries.get(key);
+    if (!entry) return void 0;
+    if (this.now() - entry.at > MAX_AGE_MS) {
+      this.entries.delete(key);
+      return void 0;
+    }
+    this.entries.delete(key);
+    this.entries.set(key, entry);
+    return entry.product;
+  }
+  set(product, market) {
+    const key = ProductCache.keyFor(product.sku, market);
+    this.entries.delete(key);
+    this.entries.set(key, {
+      product,
+      at: this.now()
+    });
+    while (this.entries.size > CAPACITY) {
+      const oldest = this.entries.keys().next();
+      if (oldest.done) break;
+      this.entries.delete(oldest.value);
+    }
+  }
+  setMany(products, market) {
+    for (const product of products) this.set(product, market);
+  }
+  clear() {
+    this.entries.clear();
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5226,6 +5269,9 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const productsRef = useRef(null);
+  productsRef.current ??= new ProductCache();
+  const products = productsRef.current;
   const emit = useCallback((event) => {
     for (const listener of listeners.current) {
       try {
@@ -5266,6 +5312,7 @@ function DaznShopProvider({ children, ...config }) {
   const value2 = useMemo(() => ({
     api,
     market,
+    products,
     theme,
     notifications,
     locale,
@@ -5273,7 +5320,7 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate
-  }), [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5482,7 +5529,7 @@ const styles$O = {
   surface: surface$1,
   fill
 };
-const SETTLE_MS$1 = 150;
+const SETTLE_MS = 150;
 function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (node.scrollTop > 0) return true;
@@ -5506,11 +5553,11 @@ function useTopOffset(ref, property, enabled = true) {
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(measure, SETTLE_MS$1);
+      timer2 = setTimeout(measure, SETTLE_MS);
     };
     measure();
     const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
-    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -10710,32 +10757,51 @@ function CategoryContent({ page: page2 }) {
     })]
   });
 }
+function productsIn(page2) {
+  const found = [];
+  for (const block of page2.blocks) {
+    if (block.kind === "rail" || block.kind === "grid") found.push(...block.products);
+    else if (block.kind === "featured" || block.kind === "product_gallery") found.push(block.product);
+  }
+  return found;
+}
 function CategoryView({ code, initialData, onNotFound }) {
   const t = useT();
-  const { api, market, emit } = useShop();
-  const [page2, setPage] = useState(initialData ?? null);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const settled = loaded?.code === code;
+  const seeded = initialData && initialData.code === code ? initialData : void 0;
+  const page2 = (settled ? loaded?.page : void 0) ?? seeded ?? null;
+  const error2 = failure?.code === code ? failure.error : void 0;
+  const loading = !page2 && !error2 && !settled;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     api.catalog.getCategoryPage(code, market).then((res) => {
+      const fetched = res;
+      products.setMany(productsIn(fetched), market);
       if (!live) return;
-      setPage(res);
+      setLoaded({
+        code,
+        page: fetched
+      });
     }).catch((err) => {
       if (!live) return;
       const c = codeOf(err);
-      setError(c);
+      setFailure({
+        code,
+        error: c
+      });
       emit({
         type: "error",
         code: c,
         scope: "category"
       });
-    }).finally(() => live && setLoading(false));
+    });
     return () => {
       live = false;
     };
-  }, [api, code, market, emit]);
+  }, [api, code, market, emit, products]);
   if (error2 === "category_not_found" && onNotFound) return jsx(Fragment, {
     children: onNotFound()
   });
@@ -10756,23 +10822,22 @@ function CategoryView({ code, initialData, onNotFound }) {
     })
   });
 }
-function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
-  const t = useT();
-  const { api, market, emit } = useShop();
-  const [loaded, setLoaded] = useState(initialData ? {
-    sku,
-    product: initialData.product,
-    inventory: initialData.inventory ?? null,
-    recommendations: []
-  } : null);
+function useProduct(sku, options2 = {}) {
+  const { initialData, showRecommendations = true } = options2;
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
   const [failure, setFailure] = useState(null);
   const current2 = loaded?.sku === sku ? loaded : null;
   const error2 = failure?.sku === sku ? failure.code : void 0;
+  const seeded = initialData && initialData.product.sku === sku ? initialData.product : products.get(sku, market);
+  const product = current2?.product ?? seeded ?? null;
+  const inventory2 = current2 ? current2.inventory : initialData && initialData.product.sku === sku ? initialData.inventory ?? null : null;
   useEffect(() => {
     let live = true;
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
+        products.set(p, market);
         if (!live) return;
         setLoaded({
           sku,
@@ -10784,12 +10849,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
+        const recommendations = recs.status === "fulfilled" ? recs.value.data : [];
+        products.setMany(recommendations, market);
         if (!live) return;
         setLoaded({
           sku,
           product: p,
           inventory: inv.status === "fulfilled" ? inv.value : null,
-          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+          recommendations
         });
       } catch (err) {
         if (!live) return;
@@ -10808,7 +10875,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     return () => {
       live = false;
     };
-  }, [api, sku, market, emit, showRecommendations]);
+  }, [api, sku, market, emit, showRecommendations, products]);
+  return {
+    product,
+    inventory: inventory2,
+    recommendations: current2?.recommendations ?? [],
+    loading: !product && !error2,
+    error: error2
+  };
+}
+function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
+  const t = useT();
+  const { product, inventory: inventory2, recommendations, loading, error: error2 } = useProduct(sku, {
+    ...initialData ? {
+      initialData
+    } : {},
+    showRecommendations
+  });
   const unavailable = jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10823,14 +10906,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (current2) {
+  if (product) {
     return jsx(ProductDetail, {
-      product: current2.product,
-      inventory: current2.inventory,
-      recommendations: current2.recommendations
-    });
+      product,
+      inventory: inventory2,
+      recommendations
+    }, product.sku);
   }
-  if (!error2) return jsx(ScreenSkeleton, {
+  if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
   });
   return jsx(ShopSurface, {
@@ -10841,24 +10924,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_1qnt2_44";
-const panel = "_panel_1qnt2_48";
-const image = "_image_1qnt2_76";
-const hero = "_hero_1qnt2_116";
-const heroContent = "_heroContent_1qnt2_197";
-const heroText = "_heroText_1qnt2_221";
-const logo = "_logo_1qnt2_230";
-const heroTitle = "_heroTitle_1qnt2_250";
-const heroSub = "_heroSub_1qnt2_274";
-const swipe = "_swipe_1qnt2_293";
-const swipeLabel = "_swipeLabel_1qnt2_300";
-const chevron$1 = "_chevron_1qnt2_306";
-const overlay$1 = "_overlay_1qnt2_11";
-const copy = "_copy_1qnt2_341";
-const title$2 = "_title_1qnt2_346";
-const subtitle$1 = "_subtitle_1qnt2_353";
-const cta = "_cta_1qnt2_359";
-const mosaic = "_mosaic_1qnt2_403";
+const showcase = "_showcase_c2hqd_59";
+const panel = "_panel_c2hqd_63";
+const image = "_image_c2hqd_91";
+const hero = "_hero_c2hqd_131";
+const heroContent = "_heroContent_c2hqd_212";
+const heroText = "_heroText_c2hqd_236";
+const logo = "_logo_c2hqd_245";
+const heroTitle = "_heroTitle_c2hqd_265";
+const heroSub = "_heroSub_c2hqd_289";
+const swipe = "_swipe_c2hqd_308";
+const swipeLabel = "_swipeLabel_c2hqd_315";
+const chevron$1 = "_chevron_c2hqd_321";
+const overlay$1 = "_overlay_c2hqd_11";
+const copy = "_copy_c2hqd_356";
+const title$2 = "_title_c2hqd_361";
+const subtitle$1 = "_subtitle_c2hqd_368";
+const cta = "_cta_c2hqd_374";
+const mosaic = "_mosaic_c2hqd_418";
 const styles$2 = {
   showcase,
   panel,
@@ -10879,7 +10962,6 @@ const styles$2 = {
   cta,
   mosaic
 };
-const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
@@ -10887,23 +10969,9 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    let timer2;
-    const syncPadding = () => {
-      const top2 = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
-      root2.style.scrollPaddingTop = top2 === "" ? "0px" : top2;
-    };
-    const schedule = () => {
-      if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(syncPadding, SETTLE_MS);
-    };
     root2.style.scrollSnapType = "y mandatory";
-    syncPadding();
-    window.addEventListener("resize", schedule);
-    window.addEventListener("orientationchange", schedule);
+    root2.style.scrollPaddingTop = "0px";
     return () => {
-      if (timer2) clearTimeout(timer2);
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("orientationchange", schedule);
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };
@@ -11030,7 +11098,6 @@ function HomeShowcase() {
   const assetUrl = useAssetUrl();
   const panels = useSlides();
   const showcaseRef = useRef(null);
-  useTopOffset(showcaseRef, "--showcase-top");
   useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
@@ -11634,6 +11701,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  useProduct,
   useShopApi,
   useShopEvent,
   useShopOptional,

package/dist/standalone/storefront.mjs

@@ -5112,6 +5112,49 @@ function resolveAssetUrl(src, base) {
   if (!src.startsWith("/") || src.startsWith("//")) return src;
   return `${base.replace(/\/+$/, "")}${src}`;
 }
+const MAX_AGE_MS = 5 * 6e4;
+const CAPACITY = 60;
+class ProductCache {
+  constructor(now = () => Date.now()) {
+    this.now = now;
+  }
+  now;
+  entries = /* @__PURE__ */ new Map();
+  static keyFor(sku, market) {
+    return `${market?.country ?? ""}\0${market?.lang ?? ""}\0${sku}`;
+  }
+  get(sku, market) {
+    const key = ProductCache.keyFor(sku, market);
+    const entry = this.entries.get(key);
+    if (!entry) return void 0;
+    if (this.now() - entry.at > MAX_AGE_MS) {
+      this.entries.delete(key);
+      return void 0;
+    }
+    this.entries.delete(key);
+    this.entries.set(key, entry);
+    return entry.product;
+  }
+  set(product, market) {
+    const key = ProductCache.keyFor(product.sku, market);
+    this.entries.delete(key);
+    this.entries.set(key, {
+      product,
+      at: this.now()
+    });
+    while (this.entries.size > CAPACITY) {
+      const oldest = this.entries.keys().next();
+      if (oldest.done) break;
+      this.entries.delete(oldest.value);
+    }
+  }
+  setMany(products, market) {
+    for (const product of products) this.set(product, market);
+  }
+  clear() {
+    this.entries.clear();
+  }
+}
 function createShopFetch(opts) {
   const baseFetch = opts.fetchImpl ?? globalThis.fetch;
   if (!baseFetch) throw new Error("No fetch implementation available");
@@ -5226,6 +5269,9 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const productsRef = useRef(null);
+  productsRef.current ??= new ProductCache();
+  const products = productsRef.current;
   const emit = useCallback((event) => {
     for (const listener of listeners.current) {
       try {
@@ -5266,6 +5312,7 @@ function DaznShopProvider({ children, ...config }) {
   const value2 = useMemo(() => ({
     api,
     market,
+    products,
     theme,
     notifications,
     locale,
@@ -5273,7 +5320,7 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate
-  }), [api, market, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
+  }), [api, market, products, theme, notifications, locale, assetBaseUrl, emit, subscribe, navigate]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(ScreenTitleProvider, {
@@ -5482,7 +5529,7 @@ const styles$O = {
   surface: surface$1,
   fill
 };
-const SETTLE_MS$1 = 150;
+const SETTLE_MS = 150;
 function scrolledOffOrigin(el) {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (node.scrollTop > 0) return true;
@@ -5506,11 +5553,11 @@ function useTopOffset(ref, property, enabled = true) {
     };
     const settle = () => {
       if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(measure, SETTLE_MS$1);
+      timer2 = setTimeout(measure, SETTLE_MS);
     };
     measure();
     const frame2 = typeof requestAnimationFrame === "undefined" ? void 0 : requestAnimationFrame(measure);
-    const settleAfterMount = setTimeout(measure, SETTLE_MS$1);
+    const settleAfterMount = setTimeout(measure, SETTLE_MS);
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
     document.addEventListener("scroll", settle, {
@@ -10710,32 +10757,51 @@ function CategoryContent({ page: page2 }) {
     })]
   });
 }
+function productsIn(page2) {
+  const found = [];
+  for (const block of page2.blocks) {
+    if (block.kind === "rail" || block.kind === "grid") found.push(...block.products);
+    else if (block.kind === "featured" || block.kind === "product_gallery") found.push(block.product);
+  }
+  return found;
+}
 function CategoryView({ code, initialData, onNotFound }) {
   const t = useT();
-  const { api, market, emit } = useShop();
-  const [page2, setPage] = useState(initialData ?? null);
-  const [error2, setError] = useState();
-  const [loading, setLoading] = useState(!initialData);
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const settled = loaded?.code === code;
+  const seeded = initialData && initialData.code === code ? initialData : void 0;
+  const page2 = (settled ? loaded?.page : void 0) ?? seeded ?? null;
+  const error2 = failure?.code === code ? failure.error : void 0;
+  const loading = !page2 && !error2 && !settled;
   useEffect(() => {
     let live = true;
-    setError(void 0);
     api.catalog.getCategoryPage(code, market).then((res) => {
+      const fetched = res;
+      products.setMany(productsIn(fetched), market);
       if (!live) return;
-      setPage(res);
+      setLoaded({
+        code,
+        page: fetched
+      });
     }).catch((err) => {
       if (!live) return;
       const c = codeOf(err);
-      setError(c);
+      setFailure({
+        code,
+        error: c
+      });
       emit({
         type: "error",
         code: c,
         scope: "category"
       });
-    }).finally(() => live && setLoading(false));
+    });
     return () => {
       live = false;
     };
-  }, [api, code, market, emit]);
+  }, [api, code, market, emit, products]);
   if (error2 === "category_not_found" && onNotFound) return jsx(Fragment, {
     children: onNotFound()
   });
@@ -10756,23 +10822,22 @@ function CategoryView({ code, initialData, onNotFound }) {
     })
   });
 }
-function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
-  const t = useT();
-  const { api, market, emit } = useShop();
-  const [loaded, setLoaded] = useState(initialData ? {
-    sku,
-    product: initialData.product,
-    inventory: initialData.inventory ?? null,
-    recommendations: []
-  } : null);
+function useProduct(sku, options2 = {}) {
+  const { initialData, showRecommendations = true } = options2;
+  const { api, market, emit, products } = useShop();
+  const [loaded, setLoaded] = useState(null);
   const [failure, setFailure] = useState(null);
   const current2 = loaded?.sku === sku ? loaded : null;
   const error2 = failure?.sku === sku ? failure.code : void 0;
+  const seeded = initialData && initialData.product.sku === sku ? initialData.product : products.get(sku, market);
+  const product = current2?.product ?? seeded ?? null;
+  const inventory2 = current2 ? current2.inventory : initialData && initialData.product.sku === sku ? initialData.inventory ?? null : null;
   useEffect(() => {
     let live = true;
     (async () => {
       try {
         const p = await api.catalog.getProduct(sku, market);
+        products.set(p, market);
         if (!live) return;
         setLoaded({
           sku,
@@ -10784,12 +10849,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
         const [inv, recs] = await Promise.allSettled([hasVariants ? Promise.resolve(null) : api.inventory.get(sku), showRecommendations ? api.catalog.getRecommendations(sku, market) : Promise.resolve({
           data: []
         })]);
+        const recommendations = recs.status === "fulfilled" ? recs.value.data : [];
+        products.setMany(recommendations, market);
         if (!live) return;
         setLoaded({
           sku,
           product: p,
           inventory: inv.status === "fulfilled" ? inv.value : null,
-          recommendations: recs.status === "fulfilled" ? recs.value.data : []
+          recommendations
         });
       } catch (err) {
         if (!live) return;
@@ -10808,7 +10875,23 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     return () => {
       live = false;
     };
-  }, [api, sku, market, emit, showRecommendations]);
+  }, [api, sku, market, emit, showRecommendations, products]);
+  return {
+    product,
+    inventory: inventory2,
+    recommendations: current2?.recommendations ?? [],
+    loading: !product && !error2,
+    error: error2
+  };
+}
+function ProductView({ sku, initialData, showRecommendations = true, onNotFound }) {
+  const t = useT();
+  const { product, inventory: inventory2, recommendations, loading, error: error2 } = useProduct(sku, {
+    ...initialData ? {
+      initialData
+    } : {},
+    showRecommendations
+  });
   const unavailable = jsx(ShopSurface, {
     tone: "light",
     fill: true,
@@ -10823,14 +10906,14 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     });
     return unavailable;
   }
-  if (current2) {
+  if (product) {
     return jsx(ProductDetail, {
-      product: current2.product,
-      inventory: current2.inventory,
-      recommendations: current2.recommendations
-    });
+      product,
+      inventory: inventory2,
+      recommendations
+    }, product.sku);
   }
-  if (!error2) return jsx(ScreenSkeleton, {
+  if (loading) return jsx(ScreenSkeleton, {
     tone: "light"
   });
   return jsx(ShopSurface, {
@@ -10841,24 +10924,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
     })
   });
 }
-const showcase = "_showcase_1qnt2_44";
-const panel = "_panel_1qnt2_48";
-const image = "_image_1qnt2_76";
-const hero = "_hero_1qnt2_116";
-const heroContent = "_heroContent_1qnt2_197";
-const heroText = "_heroText_1qnt2_221";
-const logo = "_logo_1qnt2_230";
-const heroTitle = "_heroTitle_1qnt2_250";
-const heroSub = "_heroSub_1qnt2_274";
-const swipe = "_swipe_1qnt2_293";
-const swipeLabel = "_swipeLabel_1qnt2_300";
-const chevron$1 = "_chevron_1qnt2_306";
-const overlay$1 = "_overlay_1qnt2_11";
-const copy = "_copy_1qnt2_341";
-const title$2 = "_title_1qnt2_346";
-const subtitle$1 = "_subtitle_1qnt2_353";
-const cta = "_cta_1qnt2_359";
-const mosaic = "_mosaic_1qnt2_403";
+const showcase = "_showcase_c2hqd_59";
+const panel = "_panel_c2hqd_63";
+const image = "_image_c2hqd_91";
+const hero = "_hero_c2hqd_131";
+const heroContent = "_heroContent_c2hqd_212";
+const heroText = "_heroText_c2hqd_236";
+const logo = "_logo_c2hqd_245";
+const heroTitle = "_heroTitle_c2hqd_265";
+const heroSub = "_heroSub_c2hqd_289";
+const swipe = "_swipe_c2hqd_308";
+const swipeLabel = "_swipeLabel_c2hqd_315";
+const chevron$1 = "_chevron_c2hqd_321";
+const overlay$1 = "_overlay_c2hqd_11";
+const copy = "_copy_c2hqd_356";
+const title$2 = "_title_c2hqd_361";
+const subtitle$1 = "_subtitle_c2hqd_368";
+const cta = "_cta_c2hqd_374";
+const mosaic = "_mosaic_c2hqd_418";
 const styles$2 = {
   showcase,
   panel,
@@ -10879,7 +10962,6 @@ const styles$2 = {
   cta,
   mosaic
 };
-const SETTLE_MS = 150;
 function useDocumentSnap(ref, enabled = true) {
   useEffect(() => {
     const el = ref.current;
@@ -10887,23 +10969,9 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    let timer2;
-    const syncPadding = () => {
-      const top2 = getComputedStyle(el).getPropertyValue("--showcase-top").trim();
-      root2.style.scrollPaddingTop = top2 === "" ? "0px" : top2;
-    };
-    const schedule = () => {
-      if (timer2) clearTimeout(timer2);
-      timer2 = setTimeout(syncPadding, SETTLE_MS);
-    };
     root2.style.scrollSnapType = "y mandatory";
-    syncPadding();
-    window.addEventListener("resize", schedule);
-    window.addEventListener("orientationchange", schedule);
+    root2.style.scrollPaddingTop = "0px";
     return () => {
-      if (timer2) clearTimeout(timer2);
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("orientationchange", schedule);
       root2.style.scrollSnapType = previousType;
       root2.style.scrollPaddingTop = previousPadding;
     };
@@ -11030,7 +11098,6 @@ function HomeShowcase() {
   const assetUrl = useAssetUrl();
   const panels = useSlides();
   const showcaseRef = useRef(null);
-  useTopOffset(showcaseRef, "--showcase-top");
   useDocumentSnap(showcaseRef);
   return jsx(ShopSurface, {
     tone: "dark",
@@ -11634,6 +11701,7 @@ export {
   useCartSheet,
   useMoney,
   useNavigate,
+  useProduct,
   useShopApi,
   useShopEvent,
   useShopOptional,

package/dist/standalone/styles.css

@@ -3487,22 +3487,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_1qnt2_44 {
+._showcase_c2hqd_59 {
   background: #080e12;
 }
-._panel_1qnt2_48 {
+._panel_c2hqd_63 {
   position: relative;
-  height: calc(100lvh - var(--showcase-top, 0px));
+  height: 100lvh;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1qnt2_76 {
+._image_c2hqd_91 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_1qnt2_116::after {
+._hero_c2hqd_131::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3517,7 +3517,7 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_1qnt2_116 ._heroContent_1qnt2_197 {
+._hero_c2hqd_131 ._heroContent_c2hqd_212 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + 100lvh - 100dvh);
@@ -3529,7 +3529,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1qnt2_221 {
+._heroText_c2hqd_236 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3537,11 +3537,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1qnt2_221 ._logo_1qnt2_230 {
+._heroText_c2hqd_236 ._logo_c2hqd_245 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1qnt2_250 {
+._heroTitle_c2hqd_265 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3556,33 +3556,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1qnt2_274 {
+._heroSub_c2hqd_289 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1qnt2_293 {
+._swipe_c2hqd_308 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_1qnt2_300 {
+._swipeLabel_c2hqd_315 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1qnt2_306 {
+._chevron_c2hqd_321 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
+  animation: _bob_c2hqd_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1qnt2_1 {
+@keyframes _bob_c2hqd_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3590,7 +3590,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1qnt2_11 {
+._overlay_c2hqd_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3607,25 +3607,25 @@
   padding: 0 24px 24px;
   padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_1qnt2_341 {
+._copy_c2hqd_356 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1qnt2_346 {
+._title_c2hqd_361 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1qnt2_353 {
+._subtitle_c2hqd_368 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1qnt2_359 {
+._cta_c2hqd_374 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3639,19 +3639,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1qnt2_359::after {
+._cta_c2hqd_374::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1qnt2_359:active {
+._cta_c2hqd_374:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1qnt2_359:focus-visible {
+._cta_c2hqd_374:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_1qnt2_403 {
+._mosaic_c2hqd_418 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/dist/styles.css

@@ -3487,22 +3487,22 @@
   column-gap: var(--space-12);
   row-gap: var(--space-12);
 }
-._showcase_1qnt2_44 {
+._showcase_c2hqd_59 {
   background: #080e12;
 }
-._panel_1qnt2_48 {
+._panel_c2hqd_63 {
   position: relative;
-  height: calc(100lvh - var(--showcase-top, 0px));
+  height: 100lvh;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1qnt2_76 {
+._image_c2hqd_91 {
   object-fit: cover;
   object-position: 50% var(--slide-focal-y, 50%);
 }
-._hero_1qnt2_116::after {
+._hero_c2hqd_131::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3517,7 +3517,7 @@
       rgba(8, 14, 18, 0) 520px);
   pointer-events: none;
 }
-._hero_1qnt2_116 ._heroContent_1qnt2_197 {
+._hero_c2hqd_131 ._heroContent_c2hqd_212 {
   position: absolute;
   bottom: 32px;
   bottom: calc(32px + 100lvh - 100dvh);
@@ -3529,7 +3529,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1qnt2_221 {
+._heroText_c2hqd_236 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3537,11 +3537,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1qnt2_221 ._logo_1qnt2_230 {
+._heroText_c2hqd_236 ._logo_c2hqd_245 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1qnt2_250 {
+._heroTitle_c2hqd_265 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3556,33 +3556,33 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1qnt2_274 {
+._heroSub_c2hqd_289 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1qnt2_293 {
+._swipe_c2hqd_308 {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 8px 0;
 }
-._swipeLabel_1qnt2_300 {
+._swipeLabel_c2hqd_315 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1qnt2_306 {
+._chevron_c2hqd_321 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1qnt2_1 1.8s ease-in-out infinite;
+  animation: _bob_c2hqd_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1qnt2_1 {
+@keyframes _bob_c2hqd_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3590,7 +3590,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1qnt2_11 {
+._overlay_c2hqd_11 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3607,25 +3607,25 @@
   padding: 0 24px 24px;
   padding-bottom: calc(24px + 100lvh - 100dvh);
 }
-._copy_1qnt2_341 {
+._copy_c2hqd_356 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1qnt2_346 {
+._title_c2hqd_361 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1qnt2_353 {
+._subtitle_c2hqd_368 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1qnt2_359 {
+._cta_c2hqd_374 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3639,19 +3639,19 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1qnt2_359::after {
+._cta_c2hqd_374::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1qnt2_359:active {
+._cta_c2hqd_374:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1qnt2_359:focus-visible {
+._cta_c2hqd_374:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
-._mosaic_1qnt2_403 {
+._mosaic_c2hqd_418 {
   background: #080e12;
 }
 ._header_8o3d7_25 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.39",
+  "version": "0.19.41",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {