@numueg/theme-sdk 0.5.2 → 0.6.0

package/dist/index.cjs

@@ -9,7 +9,7 @@ var MAX_BLOCK_DEPTH = 5;
 
 // src/validation/index.ts
 var THEME_CONTRACT_VERSION = 1;
-var SDK_VERSION = "0.5.2" ;
+var SDK_VERSION = "0.6.0" ;
 var REQUIRED_TEMPLATES = [
   "home",
   "product",
@@ -2742,6 +2742,7 @@ function Image({
   sizes = "(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw",
   responsive = true,
   loading = "lazy",
+  priority = false,
   aspectRatio,
   objectFit,
   objectPosition,
@@ -2778,6 +2779,7 @@ function Image({
     );
   }
   const srcSet = responsive ? buildSrcSet(src) : void 0;
+  const effLoading = priority ? "eager" : loading;
   const effFit = objectFit ?? (framed ? "cover" : void 0);
   const fitStyle = transform ? applyImageTransform(transform, effFit === "contain" ? "contain" : "cover") : {
     ...effFit ? { objectFit: effFit } : {},
@@ -2790,7 +2792,8 @@ function Image({
       alt,
       srcSet: srcSet || void 0,
       sizes: srcSet ? sizes : void 0,
-      loading,
+      loading: effLoading,
+      fetchPriority: priority ? "high" : void 0,
       decoding: "async",
       className: framed ? void 0 : className,
       style: framed ? { width: "100%", height: "100%", display: "block", ...fitStyle } : { ...fitStyle, ...style },
@@ -2814,6 +2817,111 @@ function Image({
     }
   );
 }
+var HERO_WIDTHS = [640, 768, 1024, 1280, 1920];
+var DEFAULT_BREAKPOINT = 768;
+var DESKTOP_BASE_WIDTH = 1920;
+var MOBILE_BASE_WIDTH = 1280;
+function heroSrcSet(url, opts) {
+  return HERO_WIDTHS.map((w) => `${focalSrc(url, { width: w, ...opts })} ${w}w`).join(", ");
+}
+function HeroMedia({
+  src,
+  alt,
+  transform,
+  mobileSrc,
+  mobileTransform,
+  desktopAspect,
+  mobileAspect,
+  fit = "cover",
+  priority = true,
+  sizes = "100vw",
+  breakpoint = DEFAULT_BREAKPOINT,
+  preloadAlternate = true,
+  className,
+  style,
+  ...rest
+}) {
+  const hasMobile = !!mobileSrc;
+  const mobileQuery = `(max-width: ${breakpoint - 1}px)`;
+  const [isMobile, setIsMobile] = react.useState(
+    () => hasMobile && typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(mobileQuery).matches
+  );
+  const [rawFallback, setRawFallback] = react.useState(false);
+  const { onError: themeOnError, ...imgRest } = rest;
+  const handleError = (e) => {
+    if (!rawFallback) setRawFallback(true);
+    else themeOnError?.(e);
+  };
+  react.useEffect(() => {
+    if (!hasMobile || typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mq = window.matchMedia(mobileQuery);
+    const sync = () => setIsMobile(mq.matches);
+    sync();
+    mq.addEventListener?.("change", sync);
+    return () => mq.removeEventListener?.("change", sync);
+  }, [hasMobile, mobileQuery]);
+  const desktopFocal = transform?.focal;
+  const mobileFocal = mobileTransform?.focal ?? desktopFocal;
+  const desktopCrop = desktopAspect ? { focal: desktopFocal, aspect: desktopAspect, fit } : {};
+  const mobileCrop = {
+    focal: mobileFocal,
+    aspect: mobileAspect,
+    fit
+  };
+  react.useEffect(() => {
+    if (!preloadAlternate || !hasMobile || !src || !mobileSrc) return;
+    if (typeof window === "undefined" || typeof window.Image !== "function") return;
+    const altUrl = isMobile ? rawFallback ? src : focalSrc(src, { width: DESKTOP_BASE_WIDTH, ...desktopCrop }) : rawFallback ? mobileSrc : focalSrc(mobileSrc, { width: MOBILE_BASE_WIDTH, ...mobileCrop });
+    if (!altUrl) return;
+    const im = new window.Image();
+    im.onerror = () => {
+    };
+    try {
+      im.fetchPriority = "low";
+    } catch {
+    }
+    im.decoding = "async";
+    im.src = altUrl;
+    if (typeof im.decode === "function") im.decode().catch(() => {
+    });
+  }, [preloadAlternate, hasMobile, src, mobileSrc, isMobile, rawFallback]);
+  if (!src) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className,
+        role: "img",
+        "aria-label": alt,
+        style: { width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.05)", ...style }
+      }
+    );
+  }
+  const useMobile = hasMobile && isMobile;
+  const activeUrl = useMobile ? mobileSrc : src;
+  const activeCrop = useMobile ? mobileCrop : desktopCrop;
+  const activeBase = useMobile ? MOBILE_BASE_WIDTH : DESKTOP_BASE_WIDTH;
+  const activeSrc = rawFallback ? activeUrl : focalSrc(activeUrl, { width: activeBase, ...activeCrop });
+  const activeSrcSet = rawFallback ? void 0 : heroSrcSet(activeUrl, activeCrop);
+  const fitStyle = applyImageTransform(useMobile ? mobileTransform ?? transform : transform, fit);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: activeSrc,
+      srcSet: activeSrcSet,
+      sizes: activeSrcSet ? sizes : void 0,
+      alt,
+      loading: priority ? "eager" : "lazy",
+      fetchPriority: priority ? "high" : void 0,
+      decoding: "async",
+      onError: handleError,
+      className,
+      style: { width: "100%", height: "100%", display: "block", ...fitStyle, ...style },
+      ...imgRest
+    }
+  );
+}
 var str = (v) => typeof v === "string" ? v : "";
 var NONE_HEIGHT = { small: 28, medium: 36, large: 48 };
 function Logo({
@@ -4072,6 +4180,7 @@ exports.CustomerContext = CustomerContext;
 exports.EditableImage = EditableImage;
 exports.EditableText = EditableText;
 exports.Form = Form;
+exports.HeroMedia = HeroMedia;
 exports.ICON_NAMES = ICON_NAMES;
 exports.Icon = Icon;
 exports.IconMap = IconMap;