@zalify/storefront-kit 0.1.0

package/dist/react/components/SwatchStyle.js

@@ -0,0 +1,22 @@
+import { imageUrl } from '../engine/images';
+// Only vetted CSS keywords may pass through — an arbitrary name would
+// invalidate the whole background declaration
+const CSS_COLORS = new Set('aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow,lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen'.split(','));
+/**
+ * `style={swatchStyle(value.name, value.swatch)}` ≙
+ * `style='{% render 'swatch-style', swatch: value.swatch, name: value.name %}'`
+ */
+export function swatchStyle(name, swatch) {
+    const imageSrc = swatch?.image?.previewImage?.url;
+    if (imageSrc) {
+        return { '--swatch': `url(${imageUrl(imageSrc, 100)})` };
+    }
+    if (swatch?.color) {
+        return { '--swatch': swatch.color };
+    }
+    const probe = name.toLowerCase().trim().replace(/ /g, '').replace(/-/g, '');
+    if (CSS_COLORS.has(probe)) {
+        return { '--swatch': probe };
+    }
+    return undefined;
+}

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

@@ -0,0 +1,55 @@
+import type { Money } from '../../commerce/index.ts';
+export interface VideoSource {
+    url: string;
+    format?: string;
+    height?: number;
+    mime_type?: string;
+}
+/** Theme-editor `video` setting object (usually absent in the mirror). */
+export interface ThemeVideo {
+    sources?: VideoSource[];
+    preview_image?: {
+        src?: string;
+    } | string;
+    alt?: string;
+}
+/** Mirror of `video.sources | where: 'format', 'mp4' | sort: 'height'`. */
+export declare function mp4Sources(video: ThemeVideo | undefined | null): VideoSource[];
+/** Resolve a video's preview_image to a usable URL (or null). */
+export declare function videoPreviewImage(video: ThemeVideo | undefined | null): string | null;
+/**
+ * Loose `product` setting shape. Template JSON stores product settings
+ * as a handle string, which only a section loader could resolve — those
+ * return null so callers skip the product row gracefully.
+ */
+export interface VideoProductSetting {
+    url?: string;
+    title?: string;
+    featured_image?: unknown;
+    price?: Money;
+    compare_at_price?: Money | null;
+}
+export declare function resolveVideoProduct(value: unknown): VideoProductSetting | null;
+/** Resolve a loose product image value (string or {src|url}) to a URL. */
+export declare function productImageUrl(value: unknown): string | null;
+/**
+ * Mirror of watchPreviews() in src/entries/video.ts: a muted
+ * `video[data-video-preview]` loop plays only while near the viewport.
+ * Attach the returned ref to the preview <video>.
+ */
+export declare function useViewportPlayback(): import("react").RefObject<HTMLVideoElement>;
+export interface VideoModalProps {
+    /** Mirror of the Liquid snippet's `id` param (data-dialog-open target). */
+    id?: string;
+    open: boolean;
+    onClose: () => void;
+    /** Shopify-hosted video to play (largest mp4 rendition is used). */
+    video?: ThemeVideo | null;
+    /** Cover image URL painted before playback. */
+    poster?: string | null;
+    /** Product featured in the video. */
+    product?: VideoProductSetting | null;
+    /** Accessible name for the dialog. */
+    label?: string;
+}
+export declare function VideoModal({ id, open, onClose, video, poster, product, label, }: VideoModalProps): import("react").JSX.Element;

package/dist/react/components/VideoModal.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of snippets/video-modal.liquid — expanded video player dialog
+ * shared by the video carousel cards and the video bubble. Built on a
+ * native <dialog>, mirroring the <theme-dialog> semantics from
+ * src/lib/dialog.ts (showModal/close, light dismiss on backdrop click,
+ * data-dialog-close ≙ the close button) and the play-on-open /
+ * pause-on-close wiring from src/entries/video.ts.
+ * CSS: app/styles/components/snippets-video-modal.css
+ */
+import { useEffect, useRef } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from './Icon';
+import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
+import { Price } from './Price';
+/** Mirror of `video.sources | where: 'format', 'mp4' | sort: 'height'`. */
+export function mp4Sources(video) {
+    return (video?.sources ?? [])
+        .filter((s) => s.format === 'mp4')
+        .sort((a, b) => (a.height ?? 0) - (b.height ?? 0));
+}
+/** Resolve a video's preview_image to a usable URL (or null). */
+export function videoPreviewImage(video) {
+    const pi = video?.preview_image;
+    return settingImageUrl(typeof pi === 'string' ? pi : pi?.src);
+}
+export function resolveVideoProduct(value) {
+    if (!value || typeof value !== 'object')
+        return null;
+    return value;
+}
+/** Resolve a loose product image value (string or {src|url}) to a URL. */
+export function productImageUrl(value) {
+    if (typeof value === 'string')
+        return settingImageUrl(value);
+    if (value && typeof value === 'object') {
+        const obj = value;
+        return settingImageUrl(obj.src ?? obj.url);
+    }
+    return null;
+}
+/**
+ * Mirror of watchPreviews() in src/entries/video.ts: a muted
+ * `video[data-video-preview]` loop plays only while near the viewport.
+ * Attach the returned ref to the preview <video>.
+ */
+export function useViewportPlayback() {
+    const ref = useRef(null);
+    useEffect(() => {
+        const video = ref.current;
+        if (!video)
+            return;
+        const io = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    video.play().catch(() => { });
+                else
+                    video.pause();
+            }
+        }, { rootMargin: '80px' });
+        io.observe(video);
+        return () => io.disconnect();
+    }, []);
+    return ref;
+}
+export function VideoModal({ id, open, onClose, video, poster, product, label, }) {
+    const dialogRef = useRef(null);
+    const videoRef = useRef(null);
+    // showModal()/close() driven by the open prop — the React mirror of
+    // ThemeDialog.show()/hide(). Playback starts a frame later so the
+    // video starts inside the open dialog (≙ playDialogVideo in video.ts).
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open) {
+            dialog.showModal();
+            requestAnimationFrame(() => {
+                videoRef.current?.play().catch(() => { });
+            });
+        }
+        else if (!open && dialog.open) {
+            dialog.close();
+        }
+    }, [open]);
+    const mp4 = mp4Sources(video).at(-1);
+    const modalLabel = label || t('general.play_video');
+    const productImage = productImageUrl(product?.featured_image);
+    return (_jsxs("dialog", { ref: dialogRef, id: id, "scroll-lock": "", className: "video-modal", "aria-label": modalLabel, 
+        // Expanded players stop when their dialog closes (Esc included) —
+        // mirror of pauseOnDialogClose in video.ts.
+        onClose: () => {
+            videoRef.current?.pause();
+            onClose();
+        }, 
+        // Light dismiss: clicks land on the <dialog> itself only when
+        // they hit the backdrop (mirror of ThemeDialog's click handler).
+        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] }));
+}

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

@@ -0,0 +1 @@
+export declare function CssVariables(): import("react").JSX.Element;

package/dist/react/engine/CssVariables.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * React mirror of snippets/css-variables.liquid: emits merchant-driven
+ * design tokens as CSS custom properties — font slots, page layout,
+ * corner radii, badge colors, grid density, and one class per color
+ * scheme (the first scheme also seeds :root).
+ *
+ * Static token scales (spacing, type, radii) live in the app's
+ * critical.css (synced from the theme).
+ */
+import { useMemo } from 'react';
+import { colorSchemes, themeSettings } from './settings';
+import { googleFontsHref, parseFontHandle } from './fonts';
+function buildCss() {
+    const s = themeSettings;
+    const bodyGoogle = (s.type_body_google ?? '').trim();
+    const headingGoogle = (s.type_heading_google ?? '').trim();
+    const monoGoogle = (s.type_mono_google ?? '').trim();
+    const bodyFont = parseFontHandle(s.type_body_font);
+    const headingFont = parseFontHandle(s.type_heading_font);
+    const bodyFamily = bodyGoogle
+        ? `'${bodyGoogle}', sans-serif`
+        : `'${bodyFont.family}', sans-serif`;
+    const headingFamily = headingGoogle
+        ? `'${headingGoogle}', var(--font-body--family)`
+        : `'${headingFont.family}', sans-serif`;
+    const lines = [];
+    lines.push(':root {');
+    lines.push(`  --font-body--family: ${bodyFamily};`);
+    lines.push(`  --font-body--style: ${bodyGoogle ? 'normal' : bodyFont.style};`);
+    lines.push(`  --font-body--weight: ${bodyGoogle ? 400 : bodyFont.weight};`);
+    lines.push(`  --font-heading--family: ${headingFamily};`);
+    if (monoGoogle) {
+        lines.push(`  --font-mono--family: '${monoGoogle}', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;`);
+        // Accent elements (eyebrows, badges, footer headings) use mono only
+        // when chosen; otherwise they inherit via the var() fallback.
+        lines.push(`  --font-accent--family: var(--font-mono--family);`);
+    }
+    else {
+        lines.push(`  --font-mono--family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;`);
+    }
+    lines.push(`  --page-width: ${s.max_page_width ?? '90rem'};`);
+    lines.push(`  --page-margin: ${s.min_page_margin ?? 20}px;`);
+    lines.push(`  --style-border-radius-inputs: ${s.input_corner_radius ?? 0}px;`);
+    lines.push(`  --style-border-radius-buttons: ${s.button_corner_radius ?? 0}px;`);
+    lines.push(`  --style-border-radius-cards: ${s.card_corner_radius ?? 0}px;`);
+    lines.push(`  --style-badge-background: ${s.card_badge_background ?? '#F9EDEF'};`);
+    lines.push(`  --style-badge-text: ${s.card_badge_text ?? '#1A1A1A'};`);
+    lines.push(`  --style-badge-sale-background: ${s.card_badge_sale_background ?? '#F26B8A'};`);
+    lines.push(`  --style-badge-sale-text: ${s.card_badge_sale_text ?? '#FFFFFF'};`);
+    lines.push(`  --style-badge-1-background: ${s.badge_style_1_background ?? '#1A1A1A'};`);
+    lines.push(`  --style-badge-1-text: ${s.badge_style_1_text ?? '#FFFFFF'};`);
+    lines.push(`  --style-badge-2-background: ${s.badge_style_2_background ?? '#F9EDEF'};`);
+    lines.push(`  --style-badge-2-text: ${s.badge_style_2_text ?? '#1A1A1A'};`);
+    // Product grid density: comfortable (fluid) or compact (tight, edge-bleed on mobile)
+    if (s.card_density === 'compact') {
+        lines.push(`  --product-grid-gap: 0.75rem 0.5rem;`);
+        lines.push(`  --product-grid-margin: -0.75rem;`);
+    }
+    else {
+        lines.push(`  --product-grid-gap: clamp(0.5rem, 2.1333vw, 1rem);`);
+        lines.push(`  --product-grid-margin: 0;`);
+    }
+    // Variant image thumbs: fully round by default; follow the card
+    // radius once the merchant sets one.
+    const cardRadius = s.card_corner_radius ?? 0;
+    lines.push(`  --style-border-radius-swatch: ${cardRadius === 0 ? '999px' : `${cardRadius}px`};`);
+    lines.push('}');
+    for (const [index, scheme] of colorSchemes().entries()) {
+        const prefix = index === 0 ? ':root,\n' : '';
+        lines.push(`${prefix}.color-${scheme.id} {`);
+        lines.push(`  --color-background: ${scheme.settings.background};`);
+        lines.push(`  --color-foreground: ${scheme.settings.text};`);
+        lines.push(`  --color-accent: ${scheme.settings.accent};`);
+        lines.push(`  --color-button: ${scheme.settings.button};`);
+        lines.push(`  --color-button-label: ${scheme.settings.button_label};`);
+        lines.push(`  --color-border: color-mix(in oklch, ${scheme.settings.text} 15%, ${scheme.settings.background});`);
+        lines.push('}');
+    }
+    // Applying a scheme class paints the element itself
+    lines.push(`[class*='color-scheme-'] {`);
+    lines.push(`  background-color: var(--color-background);`);
+    lines.push(`  color: var(--color-foreground);`);
+    lines.push('}');
+    return lines.join('\n');
+}
+function fontLinks() {
+    const s = themeSettings;
+    const hrefs = [];
+    const bodyGoogle = (s.type_body_google ?? '').trim();
+    const headingGoogle = (s.type_heading_google ?? '').trim();
+    const monoGoogle = (s.type_mono_google ?? '').trim();
+    hrefs.push(googleFontsHref(bodyGoogle || parseFontHandle(s.type_body_font).family));
+    const heading = headingGoogle || parseFontHandle(s.type_heading_font).family;
+    if (!hrefs[0].includes(heading.replace(/ /g, '+'))) {
+        hrefs.push(googleFontsHref(heading, 'wght@400;500;600;700'));
+    }
+    if (monoGoogle)
+        hrefs.push(googleFontsHref(monoGoogle, 'wght@400;500'));
+    return hrefs;
+}
+export function CssVariables() {
+    const { css, links } = useMemo(() => ({ css: buildCss(), links: fontLinks() }), []);
+    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: "stylesheet", href: href }, href))), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+}

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

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+export interface ThemeGlobals {
+    /** Root loader data from the Hydrogen scaffold (header/footer queries, cart…). */
+    header?: unknown;
+    footer?: unknown;
+    cart?: unknown;
+    isLoggedIn?: unknown;
+    publicStoreDomain?: string;
+    shop?: unknown;
+}
+export interface TemplateScope {
+    /** Template name, e.g. "index", "product". */
+    name: string;
+    /**
+     * Whether `name` is a page template or a section group — the scope
+     * half of a @zalify/storefront-kit/schemas ThemeJsonPath. Defaults to
+     * "template".
+     */
+    kind?: 'template' | 'group';
+    /** Route resources: product, collection, blog, article, page, searchResult… */
+    resources: Record<string, unknown>;
+    /** Results of app/sections/<type>.server.ts loaders, keyed by section key. */
+    sectionData: Record<string, unknown>;
+}
+export declare function ThemeDataProvider({ value, children, }: {
+    value: ThemeGlobals;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function TemplateProvider({ value, children, }: {
+    value: TemplateScope;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SectionProvider({ id, children, }: {
+    id: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Liquid globals mirror (`cart`, `shop`, menus…). */
+export declare function useThemeGlobals(): ThemeGlobals;
+/** Route resource mirror of Liquid template objects, e.g. useResource('product'). */
+export declare function useResource<T = unknown>(name: string): T | undefined;
+export declare function useTemplateScope(): TemplateScope;
+/** Result of this section's optional .server.ts loader. */
+export declare function useSectionData<T = unknown>(): T | undefined;

package/dist/react/engine/context.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Contexts giving ported sections access to Shopify data.
+ *
+ * - ThemeDataContext (set once in root/PageLayout): header menu, footer
+ *   menu, cart promise, shop info — the mirror of Liquid globals like
+ *   `linklists`, `cart`, `shop`.
+ * - TemplateContext (set per route): the route's resources (`product`,
+ *   `collection`, …) — the mirror of Liquid template objects — plus
+ *   per-section loader results.
+ * - SectionContext / current section id, used by useSectionData().
+ */
+import { createContext, useContext } from 'react';
+const ThemeDataContext = createContext({});
+const TemplateContext = createContext({
+    name: '',
+    resources: {},
+    sectionData: {},
+});
+const SectionContext = createContext({ id: '' });
+export function ThemeDataProvider({ value, children, }) {
+    return (_jsx(ThemeDataContext.Provider, { value: value, children: children }));
+}
+export function TemplateProvider({ value, children, }) {
+    return (_jsx(TemplateContext.Provider, { value: value, children: children }));
+}
+export function SectionProvider({ id, children, }) {
+    return (_jsx(SectionContext.Provider, { value: { id }, children: children }));
+}
+/** Liquid globals mirror (`cart`, `shop`, menus…). */
+export function useThemeGlobals() {
+    return useContext(ThemeDataContext);
+}
+/** Route resource mirror of Liquid template objects, e.g. useResource('product'). */
+export function useResource(name) {
+    return useContext(TemplateContext).resources[name];
+}
+export function useTemplateScope() {
+    return useContext(TemplateContext);
+}
+/** Result of this section's optional .server.ts loader. */
+export function useSectionData() {
+    const { id } = useContext(SectionContext);
+    return useContext(TemplateContext).sectionData[id];
+}

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

@@ -0,0 +1,15 @@
+/**
+ * Font resolution for the mirror. The Liquid theme uses Shopify's
+ * font_picker (handles like "work_sans_n4") plus optional Google-font
+ * override text settings. Outside Shopify's font CDN we resolve picker
+ * handles to the same family served from Google Fonts, keeping the
+ * css-variables contract (--font-body--family etc.) identical.
+ */
+export interface ResolvedFont {
+    family: string;
+    weight: number;
+    style: 'normal' | 'italic';
+}
+/** Parse a Shopify font handle: "work_sans_n4" → Work Sans / 400 / normal. */
+export declare function parseFontHandle(handle: string | undefined): ResolvedFont;
+export declare function googleFontsHref(family: string, axes?: string): string;

package/dist/react/engine/fonts.js

@@ -0,0 +1,33 @@
+/**
+ * Font resolution for the mirror. The Liquid theme uses Shopify's
+ * font_picker (handles like "work_sans_n4") plus optional Google-font
+ * override text settings. Outside Shopify's font CDN we resolve picker
+ * handles to the same family served from Google Fonts, keeping the
+ * css-variables contract (--font-body--family etc.) identical.
+ */
+/** Parse a Shopify font handle: "work_sans_n4" → Work Sans / 400 / normal. */
+export function parseFontHandle(handle) {
+    const fallback = {
+        family: 'Work Sans',
+        weight: 400,
+        style: 'normal',
+    };
+    if (!handle)
+        return fallback;
+    const match = /^(.*)_([nib])(\d)$/.exec(handle);
+    if (!match)
+        return fallback;
+    const family = match[1]
+        .split('_')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+    return {
+        family,
+        weight: Number(match[3]) * 100,
+        style: match[2] === 'i' ? 'italic' : 'normal',
+    };
+}
+export function googleFontsHref(family, axes = 'ital,wght@0,400;0,500;0,700;1,400') {
+    const param = family.trim().replace(/ /g, '+');
+    return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Helpers mirroring the theme's image snippet / `image_url` usage for
+ * images that arrive from JSON settings (not the Storefront API — for
+ * those use @shopify/hydrogen's <Image>).
+ */
+/**
+ * Resolve an image_picker setting value to a usable URL. Values saved
+ * by the theme editor look like "shopify://shop_images/foo.png", which
+ * only the Liquid runtime can resolve — those return null here so the
+ * component falls back to its placeholder (matching placeholder_svg_tag
+ * behavior on a fresh install).
+ */
+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;
+/** Srcset across the theme's standard width ladder. */
+export declare function imageSrcSet(url: string, widths?: number[]): string | undefined;
+/**
+ * Neutral placeholder mirroring Liquid's placeholder_svg_tag: a muted
+ * box that inherits the component's sizing classes.
+ */
+export declare function PlaceholderSvg({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/react/engine/images.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Helpers mirroring the theme's image snippet / `image_url` usage for
+ * images that arrive from JSON settings (not the Storefront API — for
+ * those use @shopify/hydrogen's <Image>).
+ */
+/**
+ * Resolve an image_picker setting value to a usable URL. Values saved
+ * by the theme editor look like "shopify://shop_images/foo.png", which
+ * only the Liquid runtime can resolve — those return null here so the
+ * component falls back to its placeholder (matching placeholder_svg_tag
+ * behavior on a fresh install).
+ */
+export function settingImageUrl(value) {
+    if (typeof value !== 'string' || !value)
+        return null;
+    if (value.startsWith('shopify://'))
+        return null;
+    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}`;
+}
+/** Srcset across the theme's standard width ladder. */
+export function imageSrcSet(url, widths = [400, 700, 1000, 1500]) {
+    if (!url.includes('cdn.shopify.com'))
+        return undefined;
+    return widths.map((w) => `${imageUrl(url, w)} ${w}w`).join(', ');
+}
+/**
+ * Neutral placeholder mirroring Liquid's placeholder_svg_tag: a muted
+ * box that inherits the component's sizing classes.
+ */
+export function PlaceholderSvg({ className }) {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 525 525", xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-hidden": "true", preserveAspectRatio: "xMidYMid slice", children: [_jsx("rect", { width: "525", height: "525", fill: "currentColor", opacity: "0.06" }), _jsx("path", { d: "M262.5 138a52 52 0 1 1 0 104 52 52 0 0 1 0-104Zm-131 249c0-58 59-90 131-90s131 32 131 90v0H131.5v0Z", fill: "currentColor", opacity: "0.12" })] }));
+}

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

@@ -0,0 +1,29 @@
+import type { SectionData, TemplateData } from './types';
+/** The scope half of a ThemeJsonPath, threaded through rendering. */
+export interface RenderScope {
+    kind: 'template' | 'group';
+    name: string;
+}
+export declare function RenderSection({ id, section, scope, }: {
+    id: string;
+    section: SectionData;
+    scope?: RenderScope;
+}): import("react").JSX.Element | null;
+export declare function RenderSections({ template, scope, }: {
+    template: TemplateData;
+    scope?: RenderScope;
+}): import("react").JSX.Element;
+/**
+ * Render a page template by name with its route resources and
+ * per-section loader data (from loadSectionData in the server module).
+ */
+export declare function ThemeTemplate({ name, resources, sectionData, }: {
+    name: string;
+    resources?: Record<string, unknown>;
+    sectionData?: Record<string, unknown>;
+}): import("react").JSX.Element;
+/** Mirror of `{% sections 'header-group' %}` in layout/theme.liquid. */
+export declare function SectionGroup({ name, sectionData, }: {
+    name: string;
+    sectionData?: Record<string, unknown>;
+}): import("react").JSX.Element;

package/dist/react/engine/render.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The rendering mirror of Shopify's section/blocks runtime:
+ *
+ * - <ThemeTemplate name="index" …/>   ≙ {{ content_for_layout }} for a JSON template
+ * - <SectionGroup name="header-group"/> ≙ {% sections 'header-group' %}
+ * - Child blocks arrive as `children`   ≙ {% content_for 'blocks' %}
+ *
+ * Sections are wrapped in `.shopify-section` divs and blocks in
+ * `.shopify-block` divs, matching the wrappers Shopify emits — the
+ * extracted component CSS relies on them.
+ *
+ * Every wrapper also carries a `data-z-path` attribute (the wire form
+ * of a @zalify/storefront-kit/schemas ThemeJsonPath) identifying the node in
+ * the theme JSON. The canvas-editor bridge hit-tests against it; it is
+ * 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 { SectionProvider, TemplateProvider } from './context';
+const warned = new Set();
+function warnMissing(kind, type) {
+    const key = `${kind}:${type}`;
+    if (warned.has(key))
+        return;
+    warned.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`[theme] No ${kind} component registered for type "${type}"`);
+}
+function pathAttr(scope, sectionKey, blockKeys) {
+    if (!scope)
+        return {};
+    return {
+        [DATA_PATH_ATTR]: formatThemePath({ scope, sectionKey, blockKeys }),
+    };
+}
+function RenderBlocks({ container, sectionId, scope, parentBlockKeys = [], }) {
+    const { blocks: blockRegistry } = getThemeStore();
+    const order = container.block_order ?? [];
+    if (!order.length || !container.blocks)
+        return null;
+    const visible = order.filter((key) => {
+        const block = container.blocks[key];
+        return block && !block.disabled;
+    });
+    return (_jsx(_Fragment, { children: visible.map((key, index) => {
+            const block = container.blocks[key];
+            const Component = blockRegistry[block.type];
+            if (!Component) {
+                warnMissing('block', block.type);
+                return null;
+            }
+            const blockKeys = [...parentBlockKeys, key];
+            return (_jsx("div", { className: "shopify-block", "data-block-type": block.type, ...pathAttr(scope, sectionId, blockKeys), children: _jsx(Component, { id: key, block: block, settings: block.settings ?? {}, index: index, total: visible.length, sectionId: sectionId, children: _jsx(RenderBlocks, { container: block, sectionId: sectionId, scope: scope, parentBlockKeys: blockKeys }) }) }, key));
+        }) }));
+}
+export function RenderSection({ id, section, scope, }) {
+    if (section.disabled)
+        return null;
+    const Component = getThemeStore().sections[section.type];
+    if (!Component) {
+        warnMissing('section', section.type);
+        return null;
+    }
+    return (_jsx("div", { id: `shopify-section-${id}`, className: `shopify-section shopify-section--${section.type}`, ...pathAttr(scope, id, []), children: _jsx(SectionProvider, { id: id, children: _jsx(Component, { id: id, section: section, settings: section.settings ?? {}, children: _jsx(RenderBlocks, { container: section, sectionId: id, scope: scope }) }) }) }));
+}
+export function RenderSections({ template, scope, }) {
+    return (_jsx(_Fragment, { children: template.order.map((key) => {
+            const section = template.sections[key];
+            if (!section)
+                return null;
+            return (_jsx(RenderSection, { id: key, section: section, scope: scope }, key));
+        }) }));
+}
+/**
+ * Render a page template by name with its route resources and
+ * per-section loader data (from loadSectionData in the server module).
+ */
+export function ThemeTemplate({ name, resources = {}, sectionData = {}, }) {
+    const template = getTemplate(name);
+    return (_jsx(TemplateProvider, { value: { name, kind: 'template', resources, sectionData }, children: _jsx(RenderSections, { template: template, scope: { kind: 'template', name } }) }));
+}
+/** Mirror of `{% sections 'header-group' %}` in layout/theme.liquid. */
+export function SectionGroup({ name, sectionData = {}, }) {
+    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/settings.d.ts

@@ -0,0 +1,8 @@
+import type { ColorScheme, ThemeSettings } from './types';
+/**
+ * Global theme settings. A lazy proxy so call sites can keep reading
+ * `themeSettings.card_density` while resolution waits for installTheme().
+ */
+export declare const themeSettings: ThemeSettings;
+export declare function colorSchemes(): ColorScheme[];
+export declare function getColorScheme(id: string | undefined): ColorScheme;