@zalify/storefront-kit 0.1.12 → 0.1.13

package/dist/commerce/disclosure-motion.d.ts

@@ -0,0 +1,2 @@
+/** Progressive native disclosure motion. Returns listener/animation cleanup. */
+export declare function initDisclosureMotion(): () => void;

package/dist/commerce/disclosure-motion.js

@@ -0,0 +1,69 @@
+/** Progressive native disclosure motion. Returns listener/animation cleanup. */
+export function initDisclosureMotion() {
+    const pointerMode = () => { document.documentElement.dataset.inputMode = 'pointer'; };
+    const keyboardMode = (event) => { 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();
+    const toggle = (details, expanded) => {
+        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) => {
+        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('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/dist/commerce/image-url.d.ts

@@ -0,0 +1,2 @@
+/** Replace Shopify width parameters while preserving version hashes and crops. */
+export declare function imageUrl(url: string, width?: number): string;

package/dist/commerce/image-url.js

@@ -0,0 +1,15 @@
+/** Replace Shopify width parameters while preserving version hashes and crops. */
+export function imageUrl(url, width) {
+    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/dist/commerce/index.d.ts

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

package/dist/commerce/index.js

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

package/dist/editor/frame.d.ts

@@ -39,6 +39,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;

package/dist/editor/frame.js

@@ -136,6 +136,10 @@ export function mountFrameBridge(options) {
         post({ type: 'block:rects', payload: { rects } });
     };
     const handleMessage = async (event) => {
+        if (event.source !== win.parent)
+            return;
+        if (options.editorOrigin && event.origin !== options.editorOrigin)
+            return;
         const data = event.data;
         if (!isBridgeMessage(data))
             return;

package/dist/react/adapter.d.ts

@@ -23,6 +23,8 @@ export interface CartAddFormProps {
     }) => ReactNode;
 }
 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. */
@@ -47,3 +49,4 @@ export declare function AdapterProvider({ adapter, children, }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useAdapter(): ThemeAdapter;
+export declare function useAdapterImage(): ComponentType<import("react").ImgHTMLAttributes<HTMLImageElement>> | undefined;

package/dist/react/adapter.js

@@ -21,3 +21,4 @@ export function useAdapter() {
     }
     return adapter;
 }
+export function useAdapterImage() { return useContext(AdapterContext)?.Image; }

package/dist/react/blocks/_slide.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
 function bestMp4(video) {
     const mp4s = (video?.sources ?? []).filter((s) => s.format === 'mp4');
@@ -15,7 +16,7 @@ export default function SlideBlock({ settings, index, children, }) {
     const poster = image ?? mobileImage ?? settingImageUrl(settings.video?.preview_image?.src);
     return (_jsxs("div", { className: "hero__slide", children: [desktopMp4 || mobileMp4 ? (_jsxs("video", { className: "hero__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", poster: poster ? imageUrl(poster, 1800) : undefined, children: [mobileMp4 && (_jsx("source", { media: "(max-width: 47.9375rem)", src: mobileMp4.url, type: mobileMp4.mime_type })), desktopMp4 && (_jsx("source", { src: desktopMp4.url, type: desktopMp4.mime_type }))] })) : image ? (_jsxs("picture", { children: [mobileImage && (_jsx("source", { media: "(max-width: 47.9375rem)", srcSet: [400, 750, 1100, 1500]
                             .map((w) => `${imageUrl(mobileImage, w)} ${w}w`)
-                            .join(', '), sizes: "100vw" })), _jsx("img", { className: "hero__media", src: imageUrl(image, 3000), srcSet: [750, 1100, 1500, 2200, 3000]
+                            .join(', '), sizes: "100vw" })), _jsx(StoreImage, { className: "hero__media", src: imageUrl(image, 3000), srcSet: [750, 1100, 1500, 2200, 3000]
                             .map((w) => `${imageUrl(image, w)} ${w}w`)
                             .join(', '), sizes: "100vw", loading: isFirst ? 'eager' : 'lazy', fetchPriority: isFirst ? 'high' : 'auto', alt: "" })] })) : (_jsx(PlaceholderSvg, { className: "hero__media hero__media--placeholder" })), settings.link ? (_jsx("a", { className: "hero__media-link", href: settings.link, "aria-label": "View" })) : null, _jsx("div", { className: "hero__content", children: children })] }));
 }

package/dist/react/blocks/_video-card.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -35,5 +36,5 @@ export default function VideoCardBlock({ settings, }) {
     const [open, setOpen] = useState(false);
     const triggerLabel = t('general.play_video') +
         (product?.title ? `: ${product.title}` : label ? `: ${label}` : '');
-    return (_jsxs("div", { className: "video-card", children: [_jsxs("button", { type: "button", className: "video-card__trigger", onClick: () => setOpen(true), "aria-label": triggerLabel, children: [previewMp4 ? (_jsx("video", { ref: previewRef, className: "video-card__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", "data-video-preview": "", poster: poster ? imageUrl(poster, 800) : undefined, children: _jsx("source", { src: previewMp4.url, type: previewMp4.mime_type }) })) : poster ? (_jsx("img", { className: "video-card__media", src: imageUrl(poster, 800), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-card__media video-card__media--placeholder" })), _jsx("span", { className: "video-card__play", children: _jsx(Icon, { name: "icon-play" }) })] }), product ? (_jsxs("a", { className: "video-card__product", href: product.url, children: [productImage ? (_jsx("img", { className: "video-card__product-image", src: imageUrl(productImage, 96), loading: "lazy", alt: "" })) : null, _jsxs("span", { className: "video-card__product-info", children: [_jsx("span", { className: "video-card__product-title", children: product.title }), _jsx("span", { className: "video-card__product-price", children: formatMoney(product.price) })] })] })) : label ? (_jsx("span", { className: "video-card__label", children: label })) : null, _jsx(VideoModal, { open: open, onClose: () => setOpen(false), video: mainVideo, poster: poster, product: product, label: label })] }));
+    return (_jsxs("div", { className: "video-card", children: [_jsxs("button", { type: "button", className: "video-card__trigger", onClick: () => setOpen(true), "aria-label": triggerLabel, children: [previewMp4 ? (_jsx("video", { ref: previewRef, className: "video-card__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", "data-video-preview": "", poster: poster ? imageUrl(poster, 800) : undefined, children: _jsx("source", { src: previewMp4.url, type: previewMp4.mime_type }) })) : poster ? (_jsx(StoreImage, { className: "video-card__media", src: imageUrl(poster, 800), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-card__media video-card__media--placeholder" })), _jsx("span", { className: "video-card__play", children: _jsx(Icon, { name: "icon-play" }) })] }), product ? (_jsxs("a", { className: "video-card__product", href: product.url, children: [productImage ? (_jsx(StoreImage, { className: "video-card__product-image", src: imageUrl(productImage, 96), loading: "lazy", alt: "" })) : null, _jsxs("span", { className: "video-card__product-info", children: [_jsx("span", { className: "video-card__product-title", children: product.title }), _jsx("span", { className: "video-card__product-price", children: formatMoney(product.price) })] })] })) : label ? (_jsx("span", { className: "video-card__label", children: label })) : null, _jsx(VideoModal, { open: open, onClose: () => setOpen(false), video: mainVideo, poster: poster, product: product, label: label })] }));
 }

package/dist/react/blocks/image.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { imageSrcSet, imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
 export default function ImageBlock({ settings }) {
     const { aspect = 'auto' } = settings;
     const src = settingImageUrl(settings.image);
-    return (_jsx("div", { className: `image-block image-block--${aspect}`, children: src ? (_jsx("img", { className: "image-block__image", src: imageUrl(src, 1500), srcSet: imageSrcSet(src), sizes: "(min-width: 48rem) 50vw, 100vw", loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "image-block__image image-block__placeholder" })) }));
+    return (_jsx("div", { className: `image-block image-block--${aspect}`, children: src ? (_jsx(StoreImage, { className: "image-block__image", src: imageUrl(src, 1500), srcSet: imageSrcSet(src), sizes: "(min-width: 48rem) 50vw, 100vw", loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "image-block__image image-block__placeholder" })) }));
 }

package/dist/react/blocks/story.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
 export default function StoryBlock({ settings }) {
     const image = settingImageUrl(settings.image);
     const label = settings.label ?? '';
-    return (_jsxs("a", { className: "story", role: "listitem", href: settings.link || undefined, children: [_jsx("span", { className: "story__media", children: image ? (_jsx("img", { className: "story__image", src: imageUrl(image, 480), loading: "lazy", alt: label })) : (_jsx(PlaceholderSvg, { className: "story__image story__image--placeholder" })) }), label ? _jsx("span", { className: "story__label", children: label }) : null] }));
+    return (_jsxs("a", { className: "story", role: "listitem", href: settings.link || undefined, children: [_jsx("span", { className: "story__media", children: image ? (_jsx(StoreImage, { className: "story__image", src: imageUrl(image, 480), loading: "lazy", alt: label })) : (_jsx(PlaceholderSvg, { className: "story__image story__image--placeholder" })) }), label ? _jsx("span", { className: "story__label", children: label }) : null] }));
 }

package/dist/react/blocks/video.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 blocks/video.liquid — general video block: a Shopify-hosted
  * file (ambient loop or click-to-play with native controls) or a
@@ -50,7 +51,7 @@ export default function VideoBlock({ settings }) {
         : null;
     return (_jsx("div", { className: `video-block video-block--${aspect}${frameClass}`, children: hostedMp4 ? (_jsx("video", { ref: autoplay ? previewRef : undefined, className: "video-block__media", playsInline: true, preload: "metadata", ...(autoplay
                 ? { autoPlay: true, loop: true, muted: true, 'data-video-preview': '' }
-                : { controls: true }), poster: poster ? imageUrl(poster, 1500) : undefined, children: _jsx("source", { src: hostedMp4.url, type: hostedMp4.mime_type }) })) : embedUrl ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "video-block__facade", onClick: () => setPlaying(true), "aria-label": t('general.play_video'), hidden: playing, children: [poster ? (_jsx("img", { className: "video-block__media", src: imageUrl(poster, 1500), srcSet: [400, 700, 1000, 1500]
+                : { controls: true }), poster: poster ? imageUrl(poster, 1500) : undefined, children: _jsx("source", { src: hostedMp4.url, type: hostedMp4.mime_type }) })) : embedUrl ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "video-block__facade", onClick: () => setPlaying(true), "aria-label": t('general.play_video'), hidden: playing, children: [poster ? (_jsx(StoreImage, { className: "video-block__media", src: imageUrl(poster, 1500), srcSet: [400, 700, 1000, 1500]
                                 .map((w) => `${imageUrl(poster, w)} ${w}w`)
                                 .join(', '), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-block__media video-block__placeholder" })), _jsx("span", { className: "video-block__play", children: _jsx(Icon, { name: "icon-play" }) })] }), _jsx("iframe", { className: "video-block__media", src: playing ? embedUrl : undefined, title: t('general.play_video'), allow: "autoplay; fullscreen; encrypted-media; picture-in-picture", allowFullScreen: true, hidden: !playing })] })) : (_jsxs(_Fragment, { children: [_jsx(PlaceholderSvg, { className: "video-block__media video-block__placeholder" }), _jsx("span", { className: "video-block__play", children: _jsx(Icon, { name: "icon-play" }) })] })) }));
 }

package/dist/react/components/ProductCard.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -46,7 +47,7 @@ export function ProductCard({ product, loading = 'lazy' }) {
         ? (product.images?.nodes?.[1] ?? null)
         : 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(null);
     const onSwatchEnter = (mediaUrl) => () => {
@@ -95,7 +96,7 @@ export function ProductCard({ product, loading = 'lazy' }) {
     const extraCount = pickerOption
         ? pickerOption.optionValues.length - valueLimit
         : 0;
-    return (_jsxs("div", { className: "product-card", children: [_jsxs("div", { className: "product-card__frame", children: [_jsxs(Link, { to: url, className: "product-card__media", "aria-label": product.title, children: [featuredImage ? (_jsxs(_Fragment, { children: [_jsx("img", { className: "product-card__image", src: imageUrl(featuredImage.url, 800), srcSet: cardSrcSet(featuredImage.url), sizes: CARD_SIZES, loading: loading, ...(loading === 'eager' ? { fetchpriority: 'high' } : null), alt: featuredImage.altText ?? '', width: featuredImage.width ?? undefined, height: featuredImage.height ?? undefined }), secondaryImage ? (_jsx("img", { className: "product-card__image product-card__image--hover", src: imageUrl(secondaryImage.url, 800), srcSet: cardSrcSet(secondaryImage.url), sizes: CARD_SIZES, loading: "lazy", alt: "", "aria-hidden": "true", width: secondaryImage.width ?? undefined, height: secondaryImage.height ?? undefined })) : null] })) : (_jsx(PlaceholderSvg, { className: "product-card__placeholder" })), preview ? (_jsx("img", { className: `product-card__image product-card__image--preview${preview.visible ? ' is-visible' : ''}`, src: preview.src, alt: "", "aria-hidden": "true", onLoad: () => setPreview((previous) => previous ? { ...previous, visible: true } : previous) })) : null, badgePosition === 'corner' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null] }), showQuickAdd ? (_jsx("div", { className: "product-card__quick product-card__quick--overlay", children: quickAdd })) : null] }), _jsxs("div", { className: "product-card__info stack", style: { '--stack-gap': 'var(--space-2xs)' }, children: [badgePosition === 'below' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null, _jsx("h3", { className: "product-card__title", children: _jsx(Link, { to: url, children: product.title }) }), _jsx(Price, { price: product.priceRange?.minVariantPrice, compareAt: product.compareAtPriceRange?.minVariantPrice, unitPrice: product.selectedOrFirstAvailableVariant?.unitPrice, unitPriceMeasurement: product.selectedOrFirstAvailableVariant?.unitPriceMeasurement }), themeSettings.card_show_rating ? _jsx(Rating, { product: product }) : null, pickerOption ? (_jsxs("div", { className: "product-card__swatches", onMouseOut: onSwatchLeave, children: [pickerOption.optionValues.slice(0, valueLimit).map((value) => {
+    return (_jsxs("div", { className: "product-card", children: [_jsxs("div", { className: "product-card__frame", children: [_jsxs(Link, { to: url, className: "product-card__media", "aria-label": product.title, children: [featuredImage ? (_jsxs(_Fragment, { children: [_jsx(StoreImage, { className: "product-card__image", src: imageUrl(featuredImage.url, 800), srcSet: cardSrcSet(featuredImage.url), sizes: CARD_SIZES, loading: loading, ...(loading === 'eager' ? { fetchpriority: 'high' } : null), alt: featuredImage.altText ?? '', width: featuredImage.width ?? undefined, height: featuredImage.height ?? undefined }), secondaryImage ? (_jsx(StoreImage, { className: "product-card__image product-card__image--hover", src: imageUrl(secondaryImage.url, 800), srcSet: cardSrcSet(secondaryImage.url), sizes: CARD_SIZES, loading: "lazy", alt: "", "aria-hidden": "true", width: secondaryImage.width ?? undefined, height: secondaryImage.height ?? undefined })) : null] })) : (_jsx(PlaceholderSvg, { className: "product-card__placeholder" })), preview ? (_jsx(StoreImage, { className: `product-card__image product-card__image--preview${preview.visible ? ' is-visible' : ''}`, src: preview.src, alt: "", "aria-hidden": "true", onLoad: () => setPreview((previous) => previous ? { ...previous, visible: true } : previous) })) : null, badgePosition === 'corner' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null] }), showQuickAdd ? (_jsx("div", { className: "product-card__quick product-card__quick--overlay", children: quickAdd })) : null] }), _jsxs("div", { className: "product-card__info stack", style: { '--stack-gap': 'var(--space-2xs)' }, children: [badgePosition === 'below' && showBadges ? (_jsx("div", { className: "product-card__badges", children: _jsx(ProductBadges, { product: product }) })) : null, _jsx("h3", { className: "product-card__title", children: _jsx(Link, { to: url, children: product.title }) }), _jsx(Price, { price: product.priceRange?.minVariantPrice, compareAt: product.compareAtPriceRange?.minVariantPrice, unitPrice: product.selectedOrFirstAvailableVariant?.unitPrice, unitPriceMeasurement: product.selectedOrFirstAvailableVariant?.unitPriceMeasurement }), themeSettings.card_show_rating ? _jsx(Rating, { product: product }) : null, pickerOption ? (_jsxs("div", { className: "product-card__swatches", onMouseOut: onSwatchLeave, children: [pickerOption.optionValues.slice(0, valueLimit).map((value) => {
                                 const targetVariant = targetVariantFor(product, pickerOption, value.name);
                                 const valueUrl = targetVariant
                                     ? `${url}?variant=${numericId(targetVariant.id)}`
@@ -106,7 +107,7 @@ export function ProductCard({ product, loading = 'lazy' }) {
                                 if (swatchStyleSetting === 'variant_image') {
                                     if (!targetVariant?.image)
                                         return null;
-                                    return (_jsx(Link, { className: "product-card__variant-thumb", to: valueUrl, "data-card-media": cardMediaUrl, onMouseOver: onSwatchEnter(cardMediaUrl), "aria-label": `${product.title} – ${value.name}`, children: _jsx("img", { src: imageUrl(targetVariant.image.url, 80), loading: "lazy", alt: targetVariant.image.altText ?? '' }) }, value.name));
+                                    return (_jsx(Link, { className: "product-card__variant-thumb", to: valueUrl, "data-card-media": cardMediaUrl, onMouseOver: onSwatchEnter(cardMediaUrl), "aria-label": `${product.title} – ${value.name}`, children: _jsx(StoreImage, { src: imageUrl(targetVariant.image.url, 80), loading: "lazy", alt: targetVariant.image.altText ?? '' }) }, value.name));
                                 }
                                 return (_jsx(Link, { className: "swatch swatch--sm", to: valueUrl, "data-card-media": cardMediaUrl, onMouseOver: cardMediaUrl ? onSwatchEnter(cardMediaUrl) : undefined, style: swatchStyle(value.name, value.swatch), "aria-label": `${product.title} – ${value.name}` }, value.name));
                             }), extraCount > 0 ? (swatchStyleSetting === 'variant_image' ? (_jsxs(Link, { className: "product-card__swatch-count product-card__swatch-count--tile", to: url, "aria-label": t('products.choose_options'), children: ["+", extraCount] })) : (_jsxs("span", { className: "product-card__swatch-count", "aria-hidden": "true", children: ["+", extraCount] }))) : null] })) : null, showQuickAdd ? (_jsx("div", { className: "product-card__quick product-card__quick--inline", children: quickAdd })) : null] })] }));

package/dist/react/components/StoreImage.d.ts

@@ -0,0 +1,2 @@
+import type { ImgHTMLAttributes } from 'react';
+export declare function StoreImage(props: ImgHTMLAttributes<HTMLImageElement>): import("react").JSX.Element;

package/dist/react/components/StoreImage.js

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

package/dist/react/components/VideoModal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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
@@ -98,5 +99,5 @@ export function VideoModal({ id, open, onClose, video, poster, product, label, }
         onClick: (event) => {
             if (event.target === dialogRef.current)
                 dialogRef.current?.close();
-        }, children: [_jsx("button", { type: "button", className: "video-modal__close", onClick: () => dialogRef.current?.close(), "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) }), _jsx("div", { className: "video-modal__media", children: mp4 ? (_jsx("video", { ref: videoRef, className: "video-modal__video", controls: true, playsInline: true, preload: "metadata", poster: poster ? imageUrl(poster, 1100) : undefined, children: _jsx("source", { src: mp4.url, type: mp4.mime_type }) })) : poster ? (_jsx("img", { className: "video-modal__video", src: imageUrl(poster, 1100), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-modal__video" })) }), product ? (_jsxs("a", { className: "video-modal__product", href: product.url, children: [productImage ? (_jsx("img", { className: "video-modal__product-image", src: imageUrl(productImage, 120), loading: "lazy", alt: "" })) : null, _jsxs("span", { className: "video-modal__product-info", children: [_jsx("span", { className: "video-modal__product-title", children: product.title }), _jsx("span", { className: "video-modal__product-price", children: _jsx(Price, { price: product.price, compareAt: product.compare_at_price }) })] }), _jsx("span", { className: "video-modal__product-cta", children: t('products.view_product') })] })) : null] }));
+        }, children: [_jsx("button", { type: "button", className: "video-modal__close", onClick: () => dialogRef.current?.close(), "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) }), _jsx("div", { className: "video-modal__media", children: mp4 ? (_jsx("video", { ref: videoRef, className: "video-modal__video", controls: true, playsInline: true, preload: "metadata", poster: poster ? imageUrl(poster, 1100) : undefined, children: _jsx("source", { src: mp4.url, type: mp4.mime_type }) })) : poster ? (_jsx(StoreImage, { className: "video-modal__video", src: imageUrl(poster, 1100), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-modal__video" })) }), product ? (_jsxs("a", { className: "video-modal__product", href: product.url, children: [productImage ? (_jsx(StoreImage, { className: "video-modal__product-image", src: imageUrl(productImage, 120), loading: "lazy", alt: "" })) : null, _jsxs("span", { className: "video-modal__product-info", children: [_jsx("span", { className: "video-modal__product-title", children: product.title }), _jsx("span", { className: "video-modal__product-price", children: _jsx(Price, { price: product.price, compareAt: product.compare_at_price }) })] }), _jsx("span", { className: "video-modal__product-cta", children: t('products.view_product') })] })) : null] }));
 }

package/dist/react/engine/images.d.ts

@@ -12,7 +12,7 @@
  */
 export declare function settingImageUrl(value: unknown): string | null;
 /** Append a width to a Shopify CDN URL (mirror of `| image_url: width`). */
-export declare function imageUrl(url: string, width?: number): string;
+export { imageUrl } from '../../commerce/image-url';
 /** Srcset across the theme's standard width ladder. */
 export declare function imageSrcSet(url: string, widths?: number[]): string | undefined;
 /**

package/dist/react/engine/images.js

@@ -19,12 +19,8 @@ export function settingImageUrl(value) {
     return value;
 }
 /** Append a width to a Shopify CDN URL (mirror of `| image_url: width`). */
-export function imageUrl(url, width) {
-    if (!width || !url.includes('cdn.shopify.com'))
-        return url;
-    const separator = url.includes('?') ? '&' : '?';
-    return `${url}${separator}width=${width}`;
-}
+export { imageUrl } from '../../commerce/image-url';
+import { imageUrl } from '../../commerce/image-url';
 /** Srcset across the theme's standard width ladder. */
 export function imageSrcSet(url, widths = [400, 700, 1000, 1500]) {
     if (!url.includes('cdn.shopify.com'))

package/dist/react/index.d.ts

@@ -36,3 +36,4 @@ export { ProductCard, PRODUCT_CARD_FRAGMENT } from './components/ProductCard';
 export * from './components/VideoModal';
 export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './components/Facets';
 export { builtinSections, builtinBlocks } from './registries';
+export { useEditorTemplate } from './useEditorTemplate';

package/dist/react/index.js

@@ -37,3 +37,4 @@ export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './compone
 // Built-in registries (spread into installTheme with app extras).
 // Server-only loaders live in '@zalify/storefront-kit/react/server'.
 export { builtinSections, builtinBlocks } from './registries';
+export { useEditorTemplate } from './useEditorTemplate';

package/dist/react/sections/article.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreImage } from '../components/StoreImage';
 import { useResource } from '../engine/context';
 import { t } from '../engine/translate';
 import { imageSrcSet, imageUrl } from '../engine/images';
@@ -27,5 +28,5 @@ export default function ArticleSection({ settings, }) {
                                     date: articleDateHtml(article.publishedAt),
                                     author: article.author?.name ?? '',
                                 }),
-                            } }), _jsx("h1", { className: "article__title", children: article.title })] }), article.image?.url && (_jsx("img", { className: "article__image", src: imageUrl(article.image.url, 1500), srcSet: imageSrcSet(article.image.url), sizes: "(min-width: 64rem) 60rem, 100vw", loading: "eager", width: article.image.width ?? undefined, height: article.image.height ?? undefined, alt: article.image.altText ?? article.title ?? '' })), _jsx("div", { className: "article__content prose", dangerouslySetInnerHTML: { __html: article.contentHtml ?? '' } })] }) }));
+                            } }), _jsx("h1", { className: "article__title", children: article.title })] }), article.image?.url && (_jsx(StoreImage, { className: "article__image", src: imageUrl(article.image.url, 1500), srcSet: imageSrcSet(article.image.url), sizes: "(min-width: 64rem) 60rem, 100vw", loading: "eager", width: article.image.width ?? undefined, height: article.image.height ?? undefined, alt: article.image.altText ?? article.title ?? '' })), _jsx("div", { className: "article__content prose", dangerouslySetInnerHTML: { __html: article.contentHtml ?? '' } })] }) }));
 }

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,9 @@
+import type { TemplateData } from "../schemas/data";
+import type { ThemeEditorManifest } from "../schemas/manifest";
+type Options = {
+    origins: readonly string[];
+    loadManifest: () => Promise<ThemeEditorManifest>;
+};
+/** 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,53 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+/** 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;
+        void Promise.all([import("../editor/frame"), options.loadManifest()])
+            .then(([bridge, manifest]) => {
+            if (disposed)
+                return;
+            controller.current = bridge.mountFrameBridge({
+                editorOrigin: parentOrigin,
+                templateName: name,
+                hash: manifest.hash,
+                getManifest: () => manifest,
+                applyTemplate(payload) {
+                    if (payload.templateName !== name)
+                        return false;
+                    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;
+        };
+    }, [name, options]);
+    useEffect(() => {
+        controller.current?.reportRects();
+    }, [draft]);
+    return draft?.name === name ? draft.template : null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "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/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;

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"

package/src/react/engine/images.tsx

@@ -18,11 +18,8 @@ export function settingImageUrl(value: unknown): string | null {
 }
 
 /** Append a width to a Shopify CDN URL (mirror of `| image_url: width`). */
-export function imageUrl(url: string, width?: number): string {
-  if (!width || !url.includes('cdn.shopify.com')) return url;
-  const separator = url.includes('?') ? '&' : '?';
-  return `${url}${separator}width=${width}`;
-}
+export {imageUrl} from '../../commerce/image-url';
+import {imageUrl} from '../../commerce/image-url';
 
 /** Srcset across the theme's standard width ladder. */
 export function imageSrcSet(

package/src/react/index.ts

@@ -77,3 +77,5 @@ export {
 // Built-in registries (spread into installTheme with app extras).
 // Server-only loaders live in '@zalify/storefront-kit/react/server'.
 export {builtinSections, builtinBlocks} from './registries';
+
+export {useEditorTemplate} from './useEditorTemplate';

package/src/react/sections/article.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of sections/article.liquid. CSS: app/styles/components/sections-article.css
  *
@@ -75,7 +76,7 @@ export default function ArticleSection({
         </header>
 
         {article.image?.url && (
-          <img
+          <StoreImage
             className="article__image"
             src={imageUrl(article.image.url, 1500)}
             srcSet={imageSrcSet(article.image.url)}

package/src/react/sections/custom-section.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of sections/custom-section.liquid — the canonical v3 section
  * pattern: color_scheme + section_spacing on the wrapper, optional
@@ -34,7 +35,7 @@ export default function CustomSection({
     >
       {backgroundImage ? (
         <div className="custom-section__background">
-          <img src={imageUrl(backgroundImage, 2000)} alt="" />
+          <StoreImage src={imageUrl(backgroundImage, 2000)} alt="" />
         </div>
       ) : null}
 

package/src/react/sections/image-with-text.tsx

@@ -1,3 +1,4 @@
+import {StoreImage} from '../components/StoreImage';
 /**
  * Port of sections/image-with-text.liquid — media column + block stack.
  * CSS: app/styles/components/sections-image-with-text.css
@@ -42,7 +43,7 @@ export default function ImageWithTextSection({
       >
         <div className="image-with-text__media">
           {image ? (
-            <img
+            <StoreImage
               className="image-with-text__image"
               src={imageUrl(image, 1500)}
               srcSet={imageSrcSet(image, [400, 700, 1000, 1500])}

package/src/react/sections/video-bubble.tsx

@@ -1,3 +1,4 @@
+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
@@ -107,7 +108,7 @@ export default function VideoBubbleSection({
               <source src={previewMp4.url} type={previewMp4.mime_type} />
             </video>
           ) : poster ? (
-            <img
+            <StoreImage
               className="video-bubble__media"
               src={imageUrl(poster, 400)}
               loading="lazy"

package/src/react/useEditorTemplate.ts

@@ -0,0 +1,66 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import type { TemplateData } from "../schemas/data";
+import type { ThemeEditorManifest } from "../schemas/manifest";
+import type { FrameBridgeController } from "../editor/frame";
+
+type Options = {
+  origins: readonly string[];
+  loadManifest: () => Promise<ThemeEditorManifest>;
+};
+
+/** No editor code or schema is fetched outside an explicitly allowed preview. */
+export function useEditorTemplate(
+  name: string,
+  options: Options,
+): TemplateData | null {
+  const [draft, setDraft] = useState<{
+    name: string;
+    template: TemplateData;
+  } | null>(null);
+  const controller = useRef<FrameBridgeController | null>(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: string;
+    try {
+      parentOrigin = new URL(document.referrer).origin;
+    } catch {
+      return;
+    }
+    if (!options.origins.includes(parentOrigin)) return;
+    let disposed = false;
+    void Promise.all([import("../editor/frame"), options.loadManifest()])
+      .then(([bridge, manifest]) => {
+        if (disposed) return;
+        controller.current = bridge.mountFrameBridge({
+          editorOrigin: parentOrigin,
+          templateName: name,
+          hash: manifest.hash,
+          getManifest: () => manifest,
+          applyTemplate(payload) {
+            if (payload.templateName !== name) return false;
+            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;
+    };
+  }, [name, options]);
+  useEffect(() => {
+    controller.current?.reportRects();
+  }, [draft]);
+  return draft?.name === name ? draft.template : null;
+}