@zalify/storefront-kit 0.1.12 → 0.2.0

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/bootstrap.d.ts

@@ -0,0 +1,15 @@
+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 declare function createEditorBootstrap(options: {
+    schema: DraftSchema;
+    manifest: ThemeEditorManifest;
+    paths: EditorDocuments;
+    previews: Record<string, PreviewContext>;
+}): EditorBootstrap;

package/dist/editor/bootstrap.js

@@ -0,0 +1,42 @@
+/** Only list routes the app can actually render; never fabricate handles. */
+export function createEditorBootstrap(options) {
+    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/dist/editor/draft.d.ts

@@ -0,0 +1,17 @@
+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 declare function createEditorDraft(source: DraftSchema): {
+    apply(payload: PreviewApply): DraftSchema;
+};

package/dist/editor/draft.js

@@ -0,0 +1,32 @@
+/** Immutable, per-preview data. Never writes into an installed source schema. */
+export function createEditorDraft(source) {
+    let current = structuredClone(source);
+    return {
+        apply(payload) {
+            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/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;
@@ -250,10 +254,8 @@ export function mountFrameBridge(options) {
         post({ type: 'block:clicked', payload: { path, rect: rectOf(node) } });
     };
     const handleWheel = (event) => {
-        // 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',
@@ -261,6 +263,7 @@ export function mountFrameBridge(options) {
                 deltaX: event.deltaX,
                 deltaY: event.deltaY,
                 ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
                 clientX: event.clientX,
                 clientY: event.clientY,
             },

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/CssVariables.js

@@ -8,9 +8,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Static token scales (spacing, type, radii) live in the app's
  * critical.css (synced from the theme).
  */
-import { useMemo } from 'react';
+import { useMemo, useSyncExternalStore } from 'react';
 import { colorSchemes, themeSettings } from './settings';
-import { getThemeStoreVersion } from './store';
+import { getThemeStoreVersion, subscribePreview, getPreviewVersion, getServerPreviewVersion, hasThemePreview, } from './store';
 import { googleFontsHrefsFromSettings, parseFontHandle, } from "../../commerce/google-fonts.js";
 function buildCss() {
     const s = themeSettings;
@@ -107,14 +107,15 @@ const FONT_CSS_LOADER = [
     '})(l[i])}',
 ].join('');
 export function CssVariables({ nonce, fonts, } = {}) {
+    useSyncExternalStore(subscribePreview, getPreviewVersion, getServerPreviewVersion);
     const themeVersion = getThemeStoreVersion();
     const { css, links } = useMemo(() => ({ css: buildCss(), links: googleFontsHrefs() }), [themeVersion]);
     // Server-resolved fonts (the next/font pattern): @font-face rules are
     // inlined and the latin woff2 files preloaded, so the font downloads
     // with the HTML and usually beats first paint — no async stylesheet,
     // no FOUT, no request to fonts.googleapis.com at all.
-    if (fonts) {
+    if (fonts && !hasThemePreview()) {
         return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), fonts.preloadUrls.map((href) => (_jsx("link", { rel: "preload", as: "font", type: "font/woff2", href: href, crossOrigin: "anonymous" }, href))), _jsx("style", { dangerouslySetInnerHTML: { __html: fonts.css } }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: "preload", as: "style", href: href, "data-zfy-font-css": "" }, href))), _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: FONT_CSS_LOADER } }), _jsx("noscript", { children: links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))) }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), links.map((href) => (_jsx("link", { rel: hasThemePreview() ? 'stylesheet' : 'preload', as: "style", href: href, "data-zfy-font-css": "" }, href))), _jsx("script", { nonce: nonce, dangerouslySetInnerHTML: { __html: FONT_CSS_LOADER } }), _jsx("noscript", { children: links.map((href) => (_jsx("link", { rel: "stylesheet", href: href }, href))) }), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }

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/engine/render.js

@@ -16,7 +16,8 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * emitted unconditionally so server and client markup stay identical.
  */
 import { formatThemePath, DATA_PATH_ATTR } from "../../schemas/index.js";
-import { getSectionGroup, getTemplate, getThemeStore } from './store';
+import { getSectionGroup, getTemplate, getThemeStore, subscribePreview, getPreviewVersion, getServerPreviewVersion, } from './store';
+import { useSyncExternalStore } from 'react';
 import { SectionProvider, TemplateProvider } from './context';
 const warned = new Set();
 function warnMissing(kind, type) {
@@ -82,6 +83,7 @@ export function ThemeTemplate({ name, resources = {}, sectionData = {}, }) {
 }
 /** Mirror of `{% sections 'header-group' %}` in layout/theme.liquid. */
 export function SectionGroup({ name, sectionData = {}, }) {
+    useSyncExternalStore(subscribePreview, getPreviewVersion, getServerPreviewVersion);
     const group = getSectionGroup(name);
     return (_jsx(TemplateProvider, { value: { name, kind: 'group', resources: {}, sectionData }, children: _jsx(RenderSections, { template: group, scope: { kind: 'group', name } }) }));
 }

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

@@ -49,6 +49,12 @@ export interface InstallThemeOptions {
 }
 interface ThemeStore extends InstallThemeOptions {
 }
+export declare function subscribePreview(listener: () => void): () => void;
+export declare function getPreviewVersion(): number;
+export declare function getServerPreviewVersion(): number;
+export declare function hasThemePreview(): boolean;
+/** Browser-only overlay; the installed schema and SSR state remain untouched. */
+export declare function setThemePreview(owner: ThemeStore, schema: ThemeSchema | null): void;
 export declare function installTheme(options: InstallThemeOptions): void;
 /** Monotonic install counter — lets derived caches detect re-installs. */
 export declare function getThemeStoreVersion(): number;

package/dist/react/engine/store.js

@@ -1,5 +1,34 @@
 let store = null;
 let version = 0;
+let preview = null;
+let previewVersion = 0;
+const previewListeners = new Set();
+export function subscribePreview(listener) {
+    previewListeners.add(listener);
+    return () => {
+        previewListeners.delete(listener);
+    };
+}
+export function getPreviewVersion() {
+    return previewVersion;
+}
+export function getServerPreviewVersion() {
+    return 0;
+}
+export function hasThemePreview() {
+    return (typeof window !== 'undefined' && preview !== null && preview.owner === store);
+}
+/** Browser-only overlay; the installed schema and SSR state remain untouched. */
+export function setThemePreview(owner, schema) {
+    if (typeof window === 'undefined' || owner !== store)
+        return;
+    preview = schema
+        ? { owner, value: { ...owner, schema, settingsOverride: undefined } }
+        : null;
+    previewVersion++;
+    for (const listener of previewListeners)
+        listener();
+}
 export function installTheme(options) {
     store = options;
     // Bump so derived caches (resolved settings) recompute — multi-tenant
@@ -8,14 +37,16 @@ export function installTheme(options) {
 }
 /** Monotonic install counter — lets derived caches detect re-installs. */
 export function getThemeStoreVersion() {
-    return version;
+    return version + (typeof window === 'undefined' ? 0 : previewVersion);
 }
 export function getThemeStore() {
     if (!store) {
-        throw new Error('[storefront-kit] installTheme() has not been called. Import your app\'s ' +
+        throw new Error("[storefront-kit] installTheme() has not been called. Import your app's " +
             'theme-setup module (which calls installTheme) before rendering.');
     }
-    return store;
+    return typeof window !== 'undefined' && preview?.owner === store
+        ? preview.value
+        : store;
 }
 /** Look up a page template ("index", "product", "customers/login"…). */
 export function getTemplate(name) {

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 ?? '' } })] }) }));
 }