@zalify/storefront-kit 0.1.0

package/dist/editor/frame.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Frame side of the canvas-editor bridge: runs inside the theme
+ * preview when it is iframed by the Zalify editor. Owns everything
+ * that needs same-document DOM access — hit-testing clicks/hovers to
+ * `data-z-path` nodes, selection highlight, rect reporting, height
+ * sync — and hands app-specific concerns (template hot-apply, device
+ * emulation) to callbacks.
+ *
+ * Editor mode neutralizes the page's own interactivity: clicks,
+ * double/middle clicks, form submits, and context menus are captured
+ * at the document root and suppressed, so selecting a node never
+ * navigates a link, opens a drawer, or submits a form — a click is
+ * only ever a selection. (Hover stays live for highlight tracking.)
+ *
+ * Security: the first `bridge:init` pins the editor origin; every
+ * later message must match it, and nothing but `bridge:ready` is ever
+ * posted before the pin.
+ */
+import { type Device, type SectionGroupData, type SettingsBag, type TemplateData, type ThemeEditorManifest } from '../schemas/index.ts';
+export declare const DATA_HOVERED_ATTR = "data-z-hovered";
+export interface FrameBridgeOptions {
+    /** Template currently rendered ("index", "product", …). */
+    templateName: string;
+    /** Content hash of the theme data the frame booted with. */
+    hash: string;
+    /** Serve the editor manifest (static import or dynamic build). */
+    getManifest: () => ThemeEditorManifest | Promise<ThemeEditorManifest>;
+    /**
+     * Hot-apply an updated template in memory (optimistic edit). Return
+     * false (or throw) if the app cannot apply without a reload.
+     */
+    applyTemplate?: (payload: {
+        templateName: string;
+        template: TemplateData;
+        groups?: Record<string, SectionGroupData>;
+        settingsData?: SettingsBag;
+    }) => boolean | Promise<boolean>;
+    onDeviceChange?: (device: Device) => void;
+    /** Overrides for tests / non-browser hosts. */
+    window?: Window & typeof globalThis;
+}
+/** True when this document should mount the editor bridge. */
+export declare function isEditorMode(win?: Window): boolean;
+export interface FrameBridgeController {
+    unmount: () => void;
+    /** Report that a persisted write round-tripped (HMR applied `hash`). */
+    notifySynced: (hash: string) => void;
+    /** Report an in-preview navigation to another template. */
+    notifyNavigation: (templateName: string, url: string) => void;
+    /** Re-send every block's rect (call after app-driven re-renders). */
+    reportRects: () => void;
+}
+/**
+ * Mount the frame bridge. Returns a controller with an `unmount`
+ * function. Call only when `isEditorMode()` is true.
+ */
+export declare function mountFrameBridge(options: FrameBridgeOptions): FrameBridgeController;

package/dist/editor/frame.js

@@ -0,0 +1,241 @@
+/**
+ * Frame side of the canvas-editor bridge: runs inside the theme
+ * preview when it is iframed by the Zalify editor. Owns everything
+ * that needs same-document DOM access — hit-testing clicks/hovers to
+ * `data-z-path` nodes, selection highlight, rect reporting, height
+ * sync — and hands app-specific concerns (template hot-apply, device
+ * emulation) to callbacks.
+ *
+ * Editor mode neutralizes the page's own interactivity: clicks,
+ * double/middle clicks, form submits, and context menus are captured
+ * at the document root and suppressed, so selecting a node never
+ * navigates a link, opens a drawer, or submits a form — a click is
+ * only ever a selection. (Hover stays live for highlight tracking.)
+ *
+ * Security: the first `bridge:init` pins the editor origin; every
+ * later message must match it, and nothing but `bridge:ready` is ever
+ * posted before the pin.
+ */
+import { BRIDGE_NAMESPACE, CONTRACT_VERSION, DATA_PATH_ATTR, DATA_SELECTED_ATTR, EDITOR_MODE_PARAM, isBridgeMessage, isCompatibleVersion, } from "../schemas/index.js";
+export const DATA_HOVERED_ATTR = 'data-z-hovered';
+/** True when this document should mount the editor bridge. */
+export function isEditorMode(win = window) {
+    if (win.self === win.top)
+        return false;
+    try {
+        return (new URL(win.location.href).searchParams.get(EDITOR_MODE_PARAM) === '1');
+    }
+    catch {
+        return false;
+    }
+}
+function rectOf(element) {
+    const rect = element.getBoundingClientRect();
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+}
+function pathNodeOf(target) {
+    if (!(target instanceof Element))
+        return null;
+    return target.closest(`[${DATA_PATH_ATTR}]`);
+}
+/**
+ * Mount the frame bridge. Returns a controller with an `unmount`
+ * function. Call only when `isEditorMode()` is true.
+ */
+export function mountFrameBridge(options) {
+    const win = options.window ?? window;
+    const doc = win.document;
+    let editorOrigin = null;
+    let lastHeight = 0;
+    const post = (message) => {
+        // bridge:ready is the only pre-pin message; everything else waits.
+        const target = editorOrigin ?? '*';
+        if (!editorOrigin && message.type !== 'bridge:ready')
+            return;
+        win.parent.postMessage({ z: BRIDGE_NAMESPACE, v: CONTRACT_VERSION, ...message }, target);
+    };
+    const setUnique = (attr, path) => {
+        for (const node of doc.querySelectorAll(`[${attr}]`)) {
+            node.removeAttribute(attr);
+        }
+        if (path === null)
+            return;
+        const selector = `[${DATA_PATH_ATTR}="${CSS.escape(path)}"]`;
+        doc.querySelector(selector)?.setAttribute(attr, '1');
+    };
+    const reportRects = () => {
+        const rects = [...doc.querySelectorAll(`[${DATA_PATH_ATTR}]`)].map((node) => ({
+            path: node.getAttribute(DATA_PATH_ATTR),
+            rect: rectOf(node),
+        }));
+        post({ type: 'block:rects', payload: { rects } });
+    };
+    const handleMessage = async (event) => {
+        const data = event.data;
+        if (!isBridgeMessage(data))
+            return;
+        if (editorOrigin && event.origin !== editorOrigin)
+            return;
+        if (!isCompatibleVersion(CONTRACT_VERSION, data.v)) {
+            post({
+                type: 'bridge:error',
+                payload: {
+                    code: 'version-mismatch',
+                    message: `frame speaks ${CONTRACT_VERSION}, host sent ${data.v}`,
+                },
+            });
+            return;
+        }
+        const message = data;
+        switch (message.type) {
+            case 'bridge:init': {
+                if (!editorOrigin) {
+                    if (event.origin !== message.payload.editorOrigin)
+                        return;
+                    editorOrigin = event.origin;
+                }
+                options.onDeviceChange?.(message.payload.device);
+                setUnique(DATA_SELECTED_ATTR, message.payload.selectedPath);
+                break;
+            }
+            case 'block:select':
+                setUnique(DATA_SELECTED_ATTR, message.payload.path);
+                // Rects let the host scroll its full-height canvas to the
+                // selection (the frame itself has no scrollbar in that mode).
+                reportRects();
+                break;
+            case 'block:hover':
+                setUnique(DATA_HOVERED_ATTR, message.payload.path);
+                break;
+            case 'block:scroll-to': {
+                const selector = `[${DATA_PATH_ATTR}="${CSS.escape(message.payload.path)}"]`;
+                doc
+                    .querySelector(selector)
+                    ?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                break;
+            }
+            case 'template:apply': {
+                try {
+                    const applied = (await options.applyTemplate?.(message.payload)) ?? false;
+                    if (!applied) {
+                        post({
+                            type: 'bridge:error',
+                            payload: {
+                                code: 'apply-unsupported',
+                                message: 'frame cannot hot-apply templates; wait for the file write',
+                            },
+                        });
+                    }
+                    else {
+                        reportRects();
+                    }
+                }
+                catch (error) {
+                    post({
+                        type: 'bridge:error',
+                        payload: {
+                            code: 'apply-failed',
+                            message: error instanceof Error ? error.message : String(error),
+                        },
+                    });
+                }
+                break;
+            }
+            case 'device:set':
+                options.onDeviceChange?.(message.payload.device);
+                break;
+            case 'manifest:request': {
+                const manifest = await options.getManifest();
+                post({ type: 'manifest:response', payload: { manifest } });
+                break;
+            }
+        }
+    };
+    const handleClick = (event) => {
+        const node = pathNodeOf(event.target);
+        // Editor mode owns clicks: no navigation, no dialogs.
+        event.preventDefault();
+        event.stopPropagation();
+        if (!node)
+            return;
+        const path = node.getAttribute(DATA_PATH_ATTR);
+        setUnique(DATA_SELECTED_ATTR, path);
+        post({ type: 'block:clicked', payload: { path, rect: rectOf(node) } });
+    };
+    /** Suppress the page's own interactivity (capture phase, doc root). */
+    const suppress = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    const SUPPRESSED_EVENTS = [
+        'dblclick',
+        'auxclick',
+        'submit',
+        'contextmenu',
+    ];
+    const handleMouseMove = (() => {
+        let lastPath = null;
+        return (event) => {
+            const node = pathNodeOf(event.target);
+            const path = node?.getAttribute(DATA_PATH_ATTR) ?? null;
+            if (path === lastPath)
+                return;
+            lastPath = path;
+            setUnique(DATA_HOVERED_ATTR, path);
+            post({
+                type: 'block:hovered',
+                payload: { path, rect: node ? rectOf(node) : undefined },
+            });
+        };
+    })();
+    const measure = () => {
+        // documentElement.scrollHeight never drops below the viewport, so a
+        // full-height host iframe would ratchet upward forever; the body's
+        // border box tracks actual content in both directions.
+        const height = Math.ceil(doc.body?.getBoundingClientRect().height ??
+            doc.documentElement.scrollHeight);
+        if (height === lastHeight || height <= 0)
+            return;
+        lastHeight = height;
+        post({ type: 'height:changed', payload: { height } });
+    };
+    const resizeObserver = new win.ResizeObserver(measure);
+    resizeObserver.observe(doc.documentElement);
+    if (doc.body)
+        resizeObserver.observe(doc.body);
+    win.addEventListener('message', handleMessage);
+    doc.addEventListener('click', handleClick, true);
+    doc.addEventListener('mousemove', handleMouseMove, true);
+    for (const type of SUPPRESSED_EVENTS) {
+        doc.addEventListener(type, suppress, true);
+    }
+    post({
+        type: 'bridge:ready',
+        payload: {
+            contractVersion: CONTRACT_VERSION,
+            templateName: options.templateName,
+            hash: options.hash,
+        },
+    });
+    measure();
+    return {
+        unmount: () => {
+            win.removeEventListener('message', handleMessage);
+            doc.removeEventListener('click', handleClick, true);
+            doc.removeEventListener('mousemove', handleMouseMove, true);
+            for (const type of SUPPRESSED_EVENTS) {
+                doc.removeEventListener(type, suppress, true);
+            }
+            resizeObserver.disconnect();
+            setUnique(DATA_SELECTED_ATTR, null);
+            setUnique(DATA_HOVERED_ATTR, null);
+        },
+        notifySynced: (hash) => {
+            post({ type: 'template:synced', payload: { hash } });
+        },
+        notifyNavigation: (templateName, url) => {
+            post({ type: 'navigation', payload: { templateName, url } });
+        },
+        reportRects,
+    };
+}

package/dist/editor/host.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Host side of the canvas-editor bridge: drives a theme preview iframe
+ * from the Zalify editor. Owns the handshake (pin the frame origin,
+ * answer `bridge:ready` with `bridge:init`), re-handshakes transparently
+ * when the iframe reloads (sandbox HMR hard-refresh, crash recovery),
+ * and exposes typed send/subscribe surfaces.
+ */
+import { type Device, type FrameMessage, type HostMessage } from '../schemas/index.ts';
+export interface HostBridgeOptions {
+    iframe: HTMLIFrameElement;
+    /** Origin the preview is served from (the sandbox preview URL). */
+    frameOrigin: string;
+    device?: Device;
+    /** Currently selected path, replayed on every (re)handshake. */
+    getSelectedPath?: () => string | null;
+    onMessage?: (message: FrameMessage) => void;
+    /** Called when the frame speaks an incompatible contract version. */
+    onIncompatible?: (frameVersion: string) => void;
+    /** Overrides for tests / non-browser hosts. */
+    window?: Window;
+}
+export interface HostBridge {
+    /** Send a message; silently dropped until the frame is ready. */
+    send: (message: Omit<HostMessage, 'z' | 'v'>) => void;
+    /** True after the current frame document completed the handshake. */
+    isReady: () => boolean;
+    destroy: () => void;
+}
+/** Append the editor-mode marker to a preview URL. */
+export declare function editorPreviewUrl(previewUrl: string): string;
+export declare function createHostBridge(options: HostBridgeOptions): HostBridge;

package/dist/editor/host.js

@@ -0,0 +1,67 @@
+/**
+ * Host side of the canvas-editor bridge: drives a theme preview iframe
+ * from the Zalify editor. Owns the handshake (pin the frame origin,
+ * answer `bridge:ready` with `bridge:init`), re-handshakes transparently
+ * when the iframe reloads (sandbox HMR hard-refresh, crash recovery),
+ * and exposes typed send/subscribe surfaces.
+ */
+import { BRIDGE_NAMESPACE, CONTRACT_VERSION, EDITOR_MODE_PARAM, isBridgeMessage, isCompatibleVersion, } from "../schemas/index.js";
+/** Append the editor-mode marker to a preview URL. */
+export function editorPreviewUrl(previewUrl) {
+    const url = new URL(previewUrl);
+    url.searchParams.set(EDITOR_MODE_PARAM, '1');
+    return url.toString();
+}
+export function createHostBridge(options) {
+    const win = options.window ?? window;
+    let ready = false;
+    let destroyed = false;
+    const post = (message) => {
+        if (destroyed)
+            return;
+        options.iframe.contentWindow?.postMessage({ z: BRIDGE_NAMESPACE, v: CONTRACT_VERSION, ...message }, options.frameOrigin);
+    };
+    const handleMessage = (event) => {
+        if (destroyed)
+            return;
+        if (event.origin !== options.frameOrigin)
+            return;
+        if (event.source !== options.iframe.contentWindow)
+            return;
+        const data = event.data;
+        if (!isBridgeMessage(data))
+            return;
+        if (!isCompatibleVersion(CONTRACT_VERSION, data.v)) {
+            ready = false;
+            options.onIncompatible?.(data.v);
+            return;
+        }
+        const message = data;
+        if (message.type === 'bridge:ready') {
+            // First load and every iframe reload land here: (re)init.
+            ready = true;
+            post({
+                type: 'bridge:init',
+                payload: {
+                    editorOrigin: win.location.origin,
+                    device: options.device ?? 'desktop',
+                    selectedPath: options.getSelectedPath?.() ?? null,
+                },
+            });
+        }
+        options.onMessage?.(message);
+    };
+    win.addEventListener('message', handleMessage);
+    return {
+        send: (message) => {
+            if (ready)
+                post(message);
+        },
+        isReady: () => ready,
+        destroy: () => {
+            destroyed = true;
+            ready = false;
+            win.removeEventListener('message', handleMessage);
+        },
+    };
+}

package/dist/editor/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @zalify/storefront-kit/editor — both halves of the canvas-editor
+ * bridge. Protocol types come from @zalify/storefront-kit/schemas.
+ *
+ *   frame.ts — mounts inside the theme preview (sandbox side)
+ *   host.ts  — drives the preview iframe (editor side)
+ */
+export * from './frame.ts';
+export * from './host.ts';

package/dist/editor/index.js

@@ -0,0 +1,9 @@
+/**
+ * @zalify/storefront-kit/editor — both halves of the canvas-editor
+ * bridge. Protocol types come from @zalify/storefront-kit/schemas.
+ *
+ *   frame.ts — mounts inside the theme preview (sandbox side)
+ *   host.ts  — drives the preview iframe (editor side)
+ */
+export * from "./frame.js";
+export * from "./host.js";

package/dist/react/adapter.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentType, ReactNode } from 'react';
+/** Loose Link props — hosts map them onto their router's Link. */
+export interface AdapterLinkProps {
+    to: string;
+    className?: string;
+    children?: ReactNode;
+    /** Hint to prefetch on intent where the router supports it. */
+    prefetch?: boolean;
+    replace?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    'aria-label'?: string;
+    [key: string]: unknown;
+}
+export interface CartLineInput {
+    merchandiseId: string;
+    quantity: number;
+}
+export interface CartAddFormProps {
+    lines: CartLineInput[];
+    /** Render prop receives the submission state for button disabling. */
+    children: (state: {
+        submitting: boolean;
+    }) => ReactNode;
+}
+export interface ThemeAdapter {
+    /** Client-side navigation link. */
+    Link: ComponentType<AdapterLinkProps>;
+    /** Hook returning an imperative navigate(url, opts) function. */
+    useNavigate: () => (url: string, opts?: {
+        replace?: boolean;
+        preventScrollReset?: boolean;
+    }) => void;
+    /** Hook returning the current URL's search params (read-only). */
+    useSearchParams: () => URLSearchParams;
+    /** Hook returning the current pathname. */
+    usePathname: () => string;
+    /**
+     * A form that adds lines to the cart on submit. Hosts wire it to
+     * their cart mutation (Hydrogen CartForm, Next server action…) and
+     * are responsible for emitting commerce-core's 'cart:updated' /
+     * 'cart:error' events when the mutation settles.
+     */
+    CartAddForm: ComponentType<CartAddFormProps>;
+}
+export declare function AdapterProvider({ adapter, children, }: {
+    adapter: ThemeAdapter;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useAdapter(): ThemeAdapter;

package/dist/react/adapter.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The framework seam. ui-react components never import a router or
+ * commerce SDK — the host app injects these primitives once:
+ *
+ *   <AdapterProvider adapter={hydrogenAdapter}>…</AdapterProvider>
+ *
+ * Keep this surface deliberately small: only what shared components
+ * actually need. Deeply framework-coupled features (cart page, variant
+ * system, predictive search) live in each app, not behind this seam.
+ */
+import { createContext, useContext } from 'react';
+const AdapterContext = createContext(null);
+export function AdapterProvider({ adapter, children, }) {
+    return (_jsx(AdapterContext.Provider, { value: adapter, children: children }));
+}
+export function useAdapter() {
+    const adapter = useContext(AdapterContext);
+    if (!adapter) {
+        throw new Error('[storefront-kit] No ThemeAdapter provided. Wrap the app in <AdapterProvider adapter={…}>.');
+    }
+    return adapter;
+}

package/dist/react/blocks/_box.d.ts

@@ -0,0 +1,10 @@
+/** Port of blocks/_box.liquid — hero content box. CSS: blocks-_box.css */
+import type { BlockProps } from '../engine/types';
+interface BoxSettings {
+    position_x?: 'start' | 'center' | 'end';
+    position_y?: 'start' | 'center' | 'end';
+    color_scheme?: string;
+    backdrop?: boolean;
+}
+export default function BoxBlock({ settings, children }: BlockProps<BoxSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/_box.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function BoxBlock({ settings, children }) {
+    const { position_x: positionX = 'start', position_y: positionY = 'center', color_scheme: colorScheme = 'scheme-1', backdrop = false, } = settings;
+    const className = [
+        'hero__box',
+        `hero__box--x-${positionX}`,
+        `hero__box--y-${positionY}`,
+        `color-${colorScheme}`,
+        backdrop ? 'hero__box--backdrop' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { className: className, 
+        // Inline transparent: the scheme class paints via an unlayered rule
+        // that outranks any @layer override (mirror of _box.liquid).
+        style: backdrop ? undefined : { backgroundColor: 'transparent' }, children: children }));
+}

package/dist/react/blocks/_slide.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Port of blocks/_slide.liquid — hero slide: full-bleed media canvas.
+ * Content lives in nested _box blocks. CSS: blocks-_slide.css
+ */
+import type { BlockProps } from '../engine/types';
+interface SlideSettings {
+    image?: string;
+    mobile_image?: string;
+    video?: {
+        sources?: Array<{
+            url: string;
+            format: string;
+            height: number;
+            mime_type: string;
+        }>;
+        preview_image?: {
+            src?: string;
+        };
+    };
+    mobile_video?: SlideSettings['video'];
+    link?: string;
+}
+export default function SlideBlock({ settings, index, children, }: BlockProps<SlideSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/_slide.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
+function bestMp4(video) {
+    const mp4s = (video?.sources ?? []).filter((s) => s.format === 'mp4');
+    return mp4s.sort((a, b) => a.height - b.height).at(-1);
+}
+export default function SlideBlock({ settings, index, children, }) {
+    // First slide is the LCP candidate: eager + high priority.
+    const isFirst = index === 0;
+    const image = settingImageUrl(settings.image);
+    const mobileImage = settingImageUrl(settings.mobile_image);
+    const desktopMp4 = bestMp4(settings.video);
+    const mobileMp4 = bestMp4(settings.mobile_video);
+    // Poster paints video slides before any video bytes arrive
+    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]
+                            .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.d.ts

@@ -0,0 +1,11 @@
+import type { BlockProps } from '../engine/types';
+import { type ThemeVideo } from '../components/VideoModal';
+interface VideoCardSettings {
+    preview_video?: ThemeVideo;
+    video?: ThemeVideo;
+    image?: string;
+    product?: unknown;
+    label?: string;
+}
+export default function VideoCardBlock({ settings, }: BlockProps<VideoCardSettings>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of blocks/_video-card.liquid — video carousel card: a muted
+ * preview loop that expands into the shared video modal (main video
+ * with sound + optional product). Private block of
+ * sections/video-carousel.liquid. Behavior from the <video-carousel>
+ * island in src/entries/video.ts.
+ * CSS: app/styles/components/blocks-_video-card.css
+ */
+import { useState } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from '../components/Icon';
+import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
+import { formatMoney } from "../../commerce/index.js";
+import { mp4Sources, productImageUrl, resolveVideoProduct, useViewportPlayback, VideoModal, videoPreviewImage, } from '../components/VideoModal';
+/**
+ * Cards render ~300px wide: the smallest rendition from 480p up is
+ * plenty and keeps a many-card strip light (mirror of the Liquid loop).
+ */
+function previewMp4For(video) {
+    const sources = mp4Sources(video);
+    return sources.find((s) => (s.height ?? 0) >= 480) ?? sources.at(-1);
+}
+export default function VideoCardBlock({ settings, }) {
+    const preview = settings.preview_video;
+    const mainVideo = settings.video ?? preview;
+    const poster = settingImageUrl(settings.image) ??
+        videoPreviewImage(preview) ??
+        videoPreviewImage(mainVideo);
+    const previewMp4 = previewMp4For(preview);
+    const product = resolveVideoProduct(settings.product);
+    const productImage = productImageUrl(product?.featured_image);
+    const label = settings.label;
+    const previewRef = useViewportPlayback();
+    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 })] }));
+}

package/dist/react/blocks/accordion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Port of blocks/accordion.liquid — a <details>-based accordion with a
+ * heading and rich-text content.
+ * CSS: app/styles/components/blocks-accordion.css
+ */
+import type { BlockProps } from '../engine/types';
+interface AccordionSettings {
+    heading?: string;
+    content?: string;
+}
+export default function AccordionBlock({ settings, }: BlockProps<AccordionSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/accordion.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function AccordionBlock({ settings, }) {
+    const { heading = 'Details', content = '<p>Share details about ingredients, sizing, shipping, or care.</p>', } = settings;
+    return (_jsxs("details", { className: "accordion", children: [_jsxs("summary", { className: "accordion__summary", children: [_jsx("span", { children: heading }), _jsx("span", { className: "accordion__icon", "aria-hidden": "true" })] }), _jsx("div", { className: "accordion__content", dangerouslySetInnerHTML: { __html: content } })] }));
+}

package/dist/react/blocks/button.d.ts

@@ -0,0 +1,10 @@
+/** Port of blocks/button.liquid (button styles live in critical.css). */
+import type { BlockProps } from '../engine/types';
+interface ButtonSettings {
+    label?: string;
+    link?: string;
+    style?: '' | 'button--secondary';
+    size?: '' | 'button--sm' | 'button--lg';
+}
+export default function ButtonBlock({ settings }: BlockProps<ButtonSettings>): import("react").JSX.Element;
+export {};