@zalify/storefront-kit 0.1.12 → 0.2.0

package/dist/react/sections/custom-section.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { imageUrl, settingImageUrl } from '../engine/images';
 export default function CustomSection({ settings, children, }) {
     const { color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
     const backgroundImage = settingImageUrl(settings.background_image);
     return (_jsxs("div", { className: `custom-section section full-width color-${colorScheme}`, style: {
             '--section-spacing': `var(--space-section-${sectionSpacing})`,
-        }, children: [backgroundImage ? (_jsx("div", { className: "custom-section__background", children: _jsx("img", { src: imageUrl(backgroundImage, 2000), alt: "" }) })) : null, _jsx("div", { className: "custom-section__content", children: children })] }));
+        }, children: [backgroundImage ? (_jsx("div", { className: "custom-section__background", children: _jsx(StoreImage, { src: imageUrl(backgroundImage, 2000), alt: "" }) })) : null, _jsx("div", { className: "custom-section__content", children: children })] }));
 }

package/dist/react/sections/image-with-text.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { imageSrcSet, imageUrl, PlaceholderSvg, settingImageUrl, } from '../engine/images';
 export default function ImageWithTextSection({ settings, children, }) {
     const { image_position: imagePosition = 'left', color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'lg', } = settings;
     const image = settingImageUrl(settings.image);
     return (_jsx("div", { className: `image-with-text section color-${colorScheme} full-width`, style: {
             '--section-spacing': `var(--space-section-${sectionSpacing})`,
-        }, children: _jsxs("div", { className: `image-with-text__inner image-with-text--media-${imagePosition}`, children: [_jsx("div", { className: "image-with-text__media", children: image ? (_jsx("img", { className: "image-with-text__image", src: imageUrl(image, 1500), srcSet: imageSrcSet(image, [400, 700, 1000, 1500]), sizes: "(min-width: 48rem) 50vw, 100vw", loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "image-with-text__image image-with-text__placeholder" })) }), _jsx("div", { className: "image-with-text__content stack", children: children })] }) }));
+        }, children: _jsxs("div", { className: `image-with-text__inner image-with-text--media-${imagePosition}`, children: [_jsx("div", { className: "image-with-text__media", children: image ? (_jsx(StoreImage, { className: "image-with-text__image", src: imageUrl(image, 1500), srcSet: imageSrcSet(image, [400, 700, 1000, 1500]), sizes: "(min-width: 48rem) 50vw, 100vw", loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "image-with-text__image image-with-text__placeholder" })) }), _jsx("div", { className: "image-with-text__content stack", children: children })] }) }));
 }

package/dist/react/sections/video-bubble.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 /**
  * Port of sections/video-bubble.liquid — floating video bubble: a small
  * muted preview loop pinned to a bottom corner that expands into the
@@ -48,7 +49,7 @@ export default function VideoBubbleSection({ id, settings, }) {
             // Storage can be unavailable (private mode); hiding is enough
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `video-bubble video-bubble--${position} video-bubble--${shape}`, style: { '--bubble-size': `${size}px` }, "data-dismiss-key": id, children: [_jsx("button", { type: "button", className: "video-bubble__dismiss", onClick: dismiss, "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) }), _jsxs("button", { type: "button", className: "video-bubble__trigger", onClick: () => setOpen(true), "aria-label": t('general.play_video'), children: [previewMp4 ? (_jsx("video", { ref: previewRef, className: "video-bubble__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", "data-video-preview": "", poster: poster ? imageUrl(poster, 400) : undefined, children: _jsx("source", { src: previewMp4.url, type: previewMp4.mime_type }) })) : poster ? (_jsx("img", { className: "video-bubble__media", src: imageUrl(poster, 400), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-bubble__media video-bubble__media--placeholder" })), _jsx("span", { className: "video-bubble__play", children: _jsx(Icon, { name: "icon-play" }) })] }), _jsx(VideoModal, { open: open, onClose: () => setOpen(false), video: mainVideo, poster: poster, product: product })] }), _jsx("script", { dangerouslySetInnerHTML: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `video-bubble video-bubble--${position} video-bubble--${shape}`, style: { '--bubble-size': `${size}px` }, "data-dismiss-key": id, children: [_jsx("button", { type: "button", className: "video-bubble__dismiss", onClick: dismiss, "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) }), _jsxs("button", { type: "button", className: "video-bubble__trigger", onClick: () => setOpen(true), "aria-label": t('general.play_video'), children: [previewMp4 ? (_jsx("video", { ref: previewRef, className: "video-bubble__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", "data-video-preview": "", poster: poster ? imageUrl(poster, 400) : undefined, children: _jsx("source", { src: previewMp4.url, type: previewMp4.mime_type }) })) : poster ? (_jsx(StoreImage, { className: "video-bubble__media", src: imageUrl(poster, 400), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-bubble__media video-bubble__media--placeholder" })), _jsx("span", { className: "video-bubble__play", children: _jsx(Icon, { name: "icon-play" }) })] }), _jsx(VideoModal, { open: open, onClose: () => setOpen(false), video: mainVideo, poster: poster, product: product })] }), _jsx("script", { dangerouslySetInnerHTML: {
                     __html: `(function(){try{if(sessionStorage.getItem(${JSON.stringify(dismissKey)})){document.currentScript.previousElementSibling.hidden=true;}}catch(e){}})();`,
                 } })] }));
 }

package/dist/react/useEditorTemplate.d.ts

@@ -0,0 +1,15 @@
+import type { TemplateData } from "../schemas/data";
+import type { ThemeEditorManifest } from "../schemas/manifest";
+import type { PreviewContext } from "../schemas/bridge";
+import type { EditorDocuments } from "../editor/bootstrap";
+type Options = {
+    origins: readonly string[];
+    loadManifest: () => Promise<ThemeEditorManifest>;
+    /** Authoritative, repository-relative merchant data targets. */
+    paths: EditorDocuments;
+    /** Real route targets keyed by template name. */
+    previews: Record<string, PreviewContext>;
+};
+/** No editor code or schema is fetched outside an explicitly allowed preview. */
+export declare function useEditorTemplate(name: string, options: Options): TemplateData | null;
+export {};

package/dist/react/useEditorTemplate.js

@@ -0,0 +1,114 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { getThemeStore, setThemePreview } from "./engine/store";
+/** No editor code or schema is fetched outside an explicitly allowed preview. */
+export function useEditorTemplate(name, options) {
+    const [draft, setDraft] = useState(null);
+    const controller = useRef(null);
+    useEffect(() => {
+        setDraft(null);
+        if (!options.origins.length ||
+            window.self === window.top ||
+            new URL(window.location.href).searchParams.get("zalify-editor") !== "1")
+            return;
+        let parentOrigin;
+        try {
+            parentOrigin = new URL(document.referrer).origin;
+        }
+        catch {
+            return;
+        }
+        if (!options.origins.includes(parentOrigin))
+            return;
+        let disposed = false;
+        const owner = getThemeStore();
+        void Promise.all([
+            import("../editor/frame"),
+            options.loadManifest(),
+            import("../editor/bootstrap"),
+            import("../editor/draft"),
+        ])
+            .then(([bridge, manifest, bootstrapModule, draftModule]) => {
+            if (disposed)
+                return;
+            const settings = owner.schema.settingsData;
+            const current = typeof settings.current === "string"
+                ? (settings.presets?.[settings.current] ?? {})
+                : settings.current;
+            const schema = {
+                ...owner.schema,
+                settingsData: {
+                    ...settings,
+                    current: { ...current, ...owner.settingsOverride },
+                },
+            };
+            const previews = { ...options.previews };
+            // The currently rendered route is also a verified context, including locale.
+            const url = new URL(window.location.href);
+            url.searchParams.delete("zalify-editor");
+            const kind = name.split(".")[0];
+            const resourceType = ([
+                "index",
+                "product",
+                "collection",
+                "page",
+                "blog",
+                "article",
+                "cart",
+                "search",
+                "list-collections",
+                "404",
+            ].includes(kind)
+                ? kind
+                : "page");
+            previews[name] = {
+                ...previews[name],
+                id: name,
+                title: previews[name]?.title ?? name,
+                resourceType,
+                url: url.pathname + url.search,
+            };
+            const bootstrap = bootstrapModule.createEditorBootstrap({
+                schema,
+                manifest,
+                paths: options.paths,
+                previews,
+            });
+            const draft = draftModule.createEditorDraft(schema);
+            controller.current = bridge.mountFrameBridge({
+                editorOrigin: parentOrigin,
+                templateName: name,
+                hash: manifest.hash,
+                getManifest: () => manifest,
+                capabilities: [
+                    "editor-bootstrap-v1",
+                    "apply-template-v1",
+                    "apply-groups-v1",
+                    "apply-settings-v1",
+                    "preview-navigation-v1",
+                ],
+                getBootstrap: () => bootstrap,
+                applyTemplate(payload) {
+                    if (payload.templateName !== name)
+                        return false;
+                    setThemePreview(owner, { ...schema, ...draft.apply(payload) });
+                    setDraft({ name, template: payload.template });
+                    return true;
+                },
+            });
+        })
+            .catch(() => {
+            /* The storefront remains usable if preview assets fail. */
+        });
+        return () => {
+            disposed = true;
+            controller.current?.unmount();
+            controller.current = null;
+            setThemePreview(owner, null);
+        };
+    }, [name, options]);
+    useEffect(() => {
+        controller.current?.reportRects();
+    }, [draft]);
+    return draft?.name === name ? draft.template : null;
+}

package/dist/schemas/bridge.d.ts

@@ -121,6 +121,7 @@ export type FrameMessage = BridgeEnvelope<'bridge:ready', {
     deltaX: number;
     deltaY: number;
     ctrlKey: boolean;
+    shiftKey?: boolean;
     clientX: number;
     clientY: number;
 }> | BridgeEnvelope<'navigation', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "type": "module",
   "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/commerce/disclosure-motion.ts

@@ -0,0 +1,60 @@
+/** Progressive native disclosure motion. Returns listener/animation cleanup. */
+export function initDisclosureMotion() {
+
+    const pointerMode = () => { document.documentElement.dataset.inputMode = 'pointer'; };
+    const keyboardMode = (event: KeyboardEvent) => { if (event.key === 'Tab' || event.key.startsWith('Arrow')) document.documentElement.dataset.inputMode = 'keyboard'; };
+    document.addEventListener('pointerdown', pointerMode, true);
+    document.addEventListener('keydown', keyboardMode, true);
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+    const running = new Map<HTMLDetailsElement, {animation: Animation; expanded: boolean; cleanup: () => void}>();
+    const toggle = (details: HTMLDetailsElement, expanded: boolean) => {
+      const from = details.getBoundingClientRect().height;
+      running.get(details)?.cleanup();
+      const summary = details.querySelector('summary');
+      if (!summary) return;
+      const originalHeight = details.style.height;
+      const originalOverflow = details.style.overflow;
+      const name = details.getAttribute('name');
+      // Hold named siblings open only long enough to finish their closing motion.
+      if (!expanded && name) details.removeAttribute('name');
+      details.toggleAttribute('data-disclosure-closing', !expanded);
+      details.open = true;
+      const to = expanded ? details.getBoundingClientRect().height : summary.getBoundingClientRect().height +
+        parseFloat(getComputedStyle(details).paddingTop || '0') + parseFloat(getComputedStyle(details).paddingBottom || '0') +
+        parseFloat(getComputedStyle(details).borderTopWidth || '0') + parseFloat(getComputedStyle(details).borderBottomWidth || '0');
+      details.style.overflow = 'hidden';
+      const animation = details.animate([{height: `${from}px`}, {height: `${to}px`}], {duration: 280, easing: 'cubic-bezier(.22, 1, .36, 1)'});
+      const cleanup = () => {
+        animation.onfinish = null;
+        animation.cancel();
+        details.removeAttribute('data-disclosure-closing');
+        details.style.height = originalHeight;
+        details.style.overflow = originalOverflow;
+        if (name) details.setAttribute('name', name);
+        running.delete(details);
+      };
+      running.set(details, {animation, expanded, cleanup});
+      animation.onfinish = () => { details.open = expanded; cleanup(); };
+    };
+    const onClick = (event: MouseEvent) => {
+      if (event.defaultPrevented || reduced.matches || event.button !== 0) return;
+      const target = event.target instanceof Element ? event.target : null;
+      const summary = target?.closest('summary');
+      const details = summary?.parentElement;
+      if (!(details instanceof HTMLDetailsElement) || !summary || getComputedStyle(summary).display === 'none') return;
+      if (target?.closest('a, button, input, select, textarea')) return;
+      event.preventDefault();
+      const expanded = !(running.get(details)?.expanded ?? details.open);
+      if (expanded && details.name) {
+        document.querySelectorAll<HTMLDetailsElement>('details[open]').forEach(peer => {
+          if (peer !== details && peer.name === details.name) toggle(peer, false);
+        });
+      }
+      toggle(details, expanded);
+    };
+    const stop = () => { for (const [details, state] of [...running]) { details.open = state.expanded; state.cleanup(); } };
+    document.addEventListener('click', onClick);
+    reduced.addEventListener('change', stop);
+    return () => { document.removeEventListener('pointerdown', pointerMode, true); document.removeEventListener('keydown', keyboardMode, true); delete document.documentElement.dataset.inputMode; document.removeEventListener('click', onClick); reduced.removeEventListener('change', stop); stop(); };
+
+}

package/src/commerce/image-url.ts

@@ -0,0 +1,11 @@
+/** Replace Shopify width parameters while preserving version hashes and crops. */
+export function imageUrl(url: string, width?: number): string {
+  if (!width || !url.includes('cdn.shopify.com')) return url;
+  try {
+    const parsed = new URL(url.startsWith('//') ? `https:${url}` : url);
+    if (parsed.hostname !== 'cdn.shopify.com') return url;
+    parsed.searchParams.set('width', String(width));
+    return parsed.toString();
+  } catch { return url; }
+}
+

package/src/commerce/index.ts

@@ -10,3 +10,5 @@ export * from './countdown';
 export * from './facets';
 export * from './product';
 export * from './google-fonts';
+
+export {initDisclosureMotion} from './disclosure-motion';

package/src/editor/bootstrap.ts

@@ -0,0 +1,61 @@
+import type {EditorBootstrap, PreviewContext} from '../schemas/bridge.ts';
+import type {ThemeEditorManifest} from '../schemas/manifest.ts';
+import type {DraftSchema} from './draft.ts';
+
+export interface EditorDocuments {
+  templates: string;
+  groups: string;
+  settings: string;
+}
+
+/** Only list routes the app can actually render; never fabricate handles. */
+export function createEditorBootstrap(options: {
+  schema: DraftSchema;
+  manifest: ThemeEditorManifest;
+  paths: EditorDocuments;
+  previews: Record<string, PreviewContext>;
+}): EditorBootstrap {
+  const {schema, manifest, paths, previews} = options;
+  for (const path of [paths.templates, paths.groups, paths.settings]) {
+    if (
+      !path ||
+      path.startsWith('/') ||
+      path.includes('\\') ||
+      path.split('/').some((p) => p === '..' || p === '.')
+    ) {
+      throw new Error('Editor write paths must be repository-relative');
+    }
+  }
+  const templates = {
+    ...schema.templates,
+    ...Object.fromEntries(
+      Object.entries(schema.customerTemplates ?? {}).map(([name, data]) => [
+        `customers/${name}`,
+        data,
+      ]),
+    ),
+  };
+  return {
+    revision: manifest.hash,
+    manifest,
+    templates: Object.entries(templates)
+      .filter(([name]) => previews[name])
+      .map(([name, data]) => ({
+        name,
+        data: structuredClone(data),
+        writePath: `${paths.templates}/${name}.json`,
+        preview: previews[name],
+      })),
+    groups: Object.entries(schema.sectionGroups).map(([name, data]) => ({
+      name,
+      data: structuredClone(data),
+      writePath: `${paths.groups}/${name}.json`,
+    })),
+    settings: {
+      writePath: paths.settings,
+      schema: manifest.settingsSchema,
+      resolvedData: structuredClone(schema.settingsData),
+    },
+    previewContexts: {},
+  };
+}

package/src/editor/draft.ts

@@ -0,0 +1,54 @@
+import type {
+  SectionGroupData,
+  SettingsData,
+  TemplateData,
+} from '../schemas/data.ts';
+
+export interface DraftSchema {
+  templates: Record<string, TemplateData>;
+  customerTemplates?: Record<string, TemplateData>;
+  sectionGroups: Record<string, SectionGroupData>;
+  settingsData: SettingsData;
+}
+
+export interface PreviewApply {
+  templateName: string;
+  template: TemplateData;
+  groups?: Record<string, SectionGroupData>;
+  settingsData?: SettingsData;
+}
+
+/** Immutable, per-preview data. Never writes into an installed source schema. */
+export function createEditorDraft(source: DraftSchema) {
+  let current = structuredClone(source);
+  return {
+    apply(payload: PreviewApply): DraftSchema {
+      const template = structuredClone(payload.template);
+      const customer = payload.templateName.startsWith('customers/');
+      current = {
+        ...current,
+        ...(customer
+          ? {
+              customerTemplates: {
+                ...current.customerTemplates,
+                [payload.templateName.slice(10)]: template,
+              },
+            }
+          : {
+              templates: {
+                ...current.templates,
+                [payload.templateName]: template,
+              },
+            }),
+        sectionGroups: {
+          ...current.sectionGroups,
+          ...structuredClone(payload.groups ?? {}),
+        },
+        settingsData: structuredClone(
+          payload.settingsData ?? current.settingsData,
+        ),
+      };
+      return current;
+    },
+  };
+}

package/src/editor/frame.ts

@@ -61,6 +61,8 @@ export interface FrameBridgeOptions {
     groups?: Record<string, SectionGroupData>;
     settingsData?: SettingsData;
   }) => boolean | Promise<boolean>;
+  /** Optional trusted editor origin, checked before the initial handshake. */
+  editorOrigin?: string;
   onDeviceChange?: (device: Device) => void;
   /** Overrides for tests / non-browser hosts. */
   window?: Window & typeof globalThis;
@@ -211,6 +213,8 @@ export function mountFrameBridge(
   };
 
   const handleMessage = async (event: MessageEvent): Promise<void> => {
+    if (event.source !== win.parent) return;
+    if (options.editorOrigin && event.origin !== options.editorOrigin) return;
     const data: unknown = event.data;
     if (!isBridgeMessage(data)) return;
     if (editorOrigin && event.origin !== editorOrigin) return;
@@ -322,9 +326,8 @@ export function mountFrameBridge(
   };
 
   const handleWheel = (event: WheelEvent): void => {
-    // Both previews are fixed device viewports. Let ordinary wheel gestures
-    // scroll the storefront; pinch/Ctrl+wheel remains a canvas zoom gesture.
-    if (!event.ctrlKey) return;
+    // Cross-origin iframe wheel events never reach the host canvas. Forward
+    // wheel gestures so the editor can pan its canvas.
     event.preventDefault();
     post({
       type: 'viewport:wheel',
@@ -332,6 +335,7 @@ export function mountFrameBridge(
         deltaX: event.deltaX,
         deltaY: event.deltaY,
         ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
         clientX: event.clientX,
         clientY: event.clientY,
       },

package/src/react/adapter.tsx

@@ -36,6 +36,8 @@ export interface CartAddFormProps {
 }
 
 export interface ThemeAdapter {
+  /** Optional responsive image renderer; hosts without one retain native images. */
+  Image?: ComponentType<React.ImgHTMLAttributes<HTMLImageElement>>;
   /** Client-side navigation link. */
   Link: ComponentType<AdapterLinkProps>;
   /** Hook returning an imperative navigate(url, opts) function. */
@@ -81,3 +83,5 @@ export function useAdapter(): ThemeAdapter {
   }
   return adapter;
 }
+
+export function useAdapterImage() { return useContext(AdapterContext)?.Image; }

package/src/react/blocks/_slide.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of blocks/_slide.liquid — hero slide: full-bleed media canvas.
  * Content lives in nested _box blocks. CSS: blocks-_slide.css
@@ -70,7 +71,7 @@ export default function SlideBlock({
               sizes="100vw"
             />
           )}
-          <img
+          <StoreImage
             className="hero__media"
             src={imageUrl(image, 3000)}
             srcSet={[750, 1100, 1500, 2200, 3000]

package/src/react/blocks/_video-card.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of blocks/_video-card.liquid — video carousel card: a muted
  * preview loop that expands into the shared video modal (main video
@@ -83,7 +84,7 @@ export default function VideoCardBlock({
             <source src={previewMp4.url} type={previewMp4.mime_type} />
           </video>
         ) : poster ? (
-          <img
+          <StoreImage
             className="video-card__media"
             src={imageUrl(poster, 800)}
             loading="lazy"
@@ -100,7 +101,7 @@ export default function VideoCardBlock({
       {product ? (
         <a className="video-card__product" href={product.url}>
           {productImage ? (
-            <img
+            <StoreImage
               className="video-card__product-image"
               src={imageUrl(productImage, 96)}
               loading="lazy"

package/src/react/blocks/image.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /** Port of blocks/image.liquid. CSS: app/styles/components/blocks-image.css */
 import type {BlockProps} from '../engine/types';
 import {imageSrcSet, imageUrl, PlaceholderSvg, settingImageUrl} from '../engine/images';
@@ -13,7 +14,7 @@ export default function ImageBlock({settings}: BlockProps<ImageSettings>) {
   return (
     <div className={`image-block image-block--${aspect}`}>
       {src ? (
-        <img
+        <StoreImage
           className="image-block__image"
           src={imageUrl(src, 1500)}
           srcSet={imageSrcSet(src)}

package/src/react/blocks/story.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of the section-local `story` block from sections/stories.liquid:
  * a circular/square thumbnail with an optional label and link.
@@ -24,7 +25,7 @@ export default function StoryBlock({settings}: BlockProps<StorySettings>) {
     <a className="story" role="listitem" href={settings.link || undefined}>
       <span className="story__media">
         {image ? (
-          <img
+          <StoreImage
             className="story__image"
             src={imageUrl(image, 480)}
             loading="lazy"

package/src/react/blocks/video.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of blocks/video.liquid — general video block: a Shopify-hosted
  * file (ambient loop or click-to-play with native controls) or a
@@ -94,7 +95,7 @@ export default function VideoBlock({settings}: BlockProps<VideoSettings>) {
             hidden={playing}
           >
             {poster ? (
-              <img
+              <StoreImage
                 className="video-block__media"
                 src={imageUrl(poster, 1500)}
                 srcSet={[400, 700, 1000, 1500]

package/src/react/components/ProductCard.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from './StoreImage';
 /**
  * Port of snippets/product-card.liquid — a product card for grids:
  * square media (second image on hover), title, price, and badges
@@ -67,7 +68,7 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
       : null;
 
   // Swatch-hover preview, crossfading over the base image. The Liquid
-  // island creates the <img> on first hover; React renders it once a
+  // island creates the <StoreImage> on first hover; React renders it once a
   // swatch has actually been hovered.
   const [preview, setPreview] = useState<{src: string; visible: boolean} | null>(
     null,
@@ -170,7 +171,7 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
         >
           {featuredImage ? (
             <>
-              <img
+              <StoreImage
                 className="product-card__image"
                 src={imageUrl(featuredImage.url, 800)}
                 srcSet={cardSrcSet(featuredImage.url)}
@@ -184,7 +185,7 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
                 height={featuredImage.height ?? undefined}
               />
               {secondaryImage ? (
-                <img
+                <StoreImage
                   className="product-card__image product-card__image--hover"
                   src={imageUrl(secondaryImage.url, 800)}
                   srcSet={cardSrcSet(secondaryImage.url)}
@@ -202,7 +203,7 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
           )}
 
           {preview ? (
-            <img
+            <StoreImage
               className={`product-card__image product-card__image--preview${
                 preview.visible ? ' is-visible' : ''
               }`}
@@ -279,7 +280,7 @@ export function ProductCard({product, loading = 'lazy'}: ProductCardProps) {
                     onMouseOver={onSwatchEnter(cardMediaUrl)}
                     aria-label={`${product.title} – ${value.name}`}
                   >
-                    <img
+                    <StoreImage
                       src={imageUrl(targetVariant.image.url, 80)}
                       loading="lazy"
                       alt={targetVariant.image.altText ?? ''}

package/src/react/components/StoreImage.tsx

@@ -0,0 +1,6 @@
+import type {ImgHTMLAttributes} from 'react';
+import {useAdapterImage} from '../adapter';
+export function StoreImage(props: ImgHTMLAttributes<HTMLImageElement>) {
+ const Image = useAdapterImage();
+ return Image ? <Image {...props} /> : <img loading="lazy" decoding="async" {...props} />;
+}

package/src/react/components/VideoModal.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from './StoreImage';
 /**
  * Port of snippets/video-modal.liquid — expanded video player dialog
  * shared by the video carousel cards and the video bubble. Built on a
@@ -196,7 +197,7 @@ export function VideoModal({
             <source src={mp4.url} type={mp4.mime_type} />
           </video>
         ) : poster ? (
-          <img
+          <StoreImage
             className="video-modal__video"
             src={imageUrl(poster, 1100)}
             loading="lazy"
@@ -210,7 +211,7 @@ export function VideoModal({
       {product ? (
         <a className="video-modal__product" href={product.url}>
           {productImage ? (
-            <img
+            <StoreImage
               className="video-modal__product-image"
               src={imageUrl(productImage, 120)}
               loading="lazy"