@zalify/storefront-kit 0.1.0

package/dist/react/blocks/button.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useAdapter } from '../adapter';
+export default function ButtonBlock({ settings }) {
+    const { Link } = useAdapter();
+    const { label = 'Shop now', link, style = '', size = '' } = settings;
+    const className = `button ${style} ${size}`.replace(/\s+/g, ' ').trim();
+    if (!link) {
+        return (_jsx("a", { className: className, role: "link", "aria-disabled": "true", children: label }));
+    }
+    const isExternal = /^https?:\/\//.test(link);
+    if (isExternal) {
+        return (_jsx("a", { className: className, href: link, children: label }));
+    }
+    return (_jsx(Link, { className: className, to: link, children: label }));
+}

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

@@ -0,0 +1,9 @@
+import type { BlockProps } from '../engine/types';
+interface CountdownSettings {
+    end_time?: string;
+    label?: string;
+    completed_text?: string;
+    alignment?: string;
+}
+export default function CountdownBlock({ settings, }: BlockProps<CountdownSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/countdown.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of blocks/countdown.liquid + the <countdown-timer> island
+ * (src/entries/countdown.ts): server renders dash placeholders, a
+ * 1-second tick fills the digit slots and flips visibility when the
+ * deadline passes. CSS: app/styles/components/blocks-countdown.css
+ */
+import { useEffect, useState } from 'react';
+// Clock math shared with the theme's <countdown-timer> island.
+import { pad2 as pad, parseEndTime as parseEnd, secondsUntil, } from "../../commerce/index.js";
+import { t } from '../engine/translate';
+export default function CountdownBlock({ settings, }) {
+    const { label = 'Ends in', completed_text: completedText, alignment = 'left' } = settings;
+    const endTime = (settings.end_time ?? '').trim();
+    // null until the first client tick — SSR shows the "–" placeholders,
+    // exactly like the Liquid markup before countdown.js runs.
+    const [remain, setRemain] = useState(null);
+    useEffect(() => {
+        if (!endTime)
+            return;
+        const end = parseEnd(endTime);
+        if (Number.isNaN(end))
+            return;
+        let interval = 0;
+        const tick = () => {
+            const next = secondsUntil(end);
+            setRemain(next);
+            if (next <= 0 && interval)
+                clearInterval(interval);
+            return next;
+        };
+        if (tick() > 0)
+            interval = window.setInterval(tick, 1000);
+        return () => clearInterval(interval);
+    }, [endTime]);
+    if (!endTime)
+        return _jsx("div", { hidden: true });
+    const done = remain !== null && remain <= 0;
+    const days = remain === null ? null : Math.floor(remain / 86400);
+    // No completion message configured: the block just goes away.
+    if (done && !completedText)
+        return _jsx("div", { className: "countdown", hidden: true });
+    const units = [
+        {
+            value: days === null ? '–' : pad(days),
+            caption: t('general.countdown.days'),
+            // Under a day, the days unit is dead weight — drop it
+            hidden: days === 0,
+        },
+        {
+            value: remain === null ? '–' : pad(Math.floor(remain / 3600) % 24),
+            caption: t('general.countdown.hours'),
+        },
+        {
+            value: remain === null ? '–' : pad(Math.floor(remain / 60) % 60),
+            caption: t('general.countdown.minutes'),
+        },
+        {
+            value: remain === null ? '–' : pad(remain % 60),
+            caption: t('general.countdown.seconds'),
+        },
+    ];
+    return (_jsxs("div", { className: "countdown", style: { '--countdown-justify': alignment }, role: "timer", children: [label ? _jsx("span", { className: "countdown__label", children: label }) : null, _jsx("span", { className: "countdown__units", hidden: done, children: units.map((unit) => (_jsxs("span", { className: "countdown__unit", hidden: unit.hidden, children: [_jsx("span", { className: "countdown__value", children: unit.value }), _jsx("span", { className: "countdown__caption", children: unit.caption })] }, unit.caption))) }), completedText ? (_jsx("span", { className: "countdown__completed", hidden: !done, children: completedText })) : null] }));
+}

package/dist/react/blocks/custom-liquid.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Port of blocks/custom-liquid.liquid — merchant-pasted markup inside
+ * any section that accepts theme blocks. Raw HTML is injected as-is;
+ * Liquid tags/objects in it cannot execute here (no Liquid runtime).
+ */
+import type { BlockProps } from '../engine/types';
+interface CustomLiquidBlockSettings {
+    custom_liquid?: string;
+}
+export default function CustomLiquidBlock({ settings, }: BlockProps<CustomLiquidBlockSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/custom-liquid.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CustomLiquidBlock({ settings, }) {
+    return (_jsx("div", { className: "custom-liquid-block", dangerouslySetInnerHTML: { __html: settings.custom_liquid ?? '' } }));
+}

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

@@ -0,0 +1,9 @@
+/** Port of blocks/group.liquid. CSS: app/styles/components/blocks-group.css */
+import type { BlockProps } from '../engine/types';
+interface GroupSettings {
+    layout_direction?: 'group--horizontal' | 'group--vertical';
+    alignment?: string;
+    padding?: number;
+}
+export default function GroupBlock({ settings, children, }: BlockProps<GroupSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/group.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function GroupBlock({ settings, children, }) {
+    const { layout_direction: direction = 'group--vertical', alignment = 'flex-start', padding = 0, } = settings;
+    return (_jsx("div", { className: `group ${direction}`, style: {
+            '--padding': `${padding}px`,
+            '--alignment': alignment,
+        }, children: children }));
+}

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

@@ -0,0 +1,8 @@
+/** Port of blocks/image.liquid. CSS: app/styles/components/blocks-image.css */
+import type { BlockProps } from '../engine/types';
+interface ImageSettings {
+    image?: string;
+    aspect?: 'auto' | 'square' | 'portrait' | 'landscape';
+}
+export default function ImageBlock({ settings }: BlockProps<ImageSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/image.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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" })) }));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * The announcement bar's section-local 'message' block (defined inline
+ * in sections/announcement-bar.liquid's {% schema %}; data shape in
+ * sections/header-group.json). Only the first message is visible at
+ * SSR; the announcement-bar section rotates `hidden` afterwards.
+ * CSS: app/styles/components/sections-announcement-bar.css
+ */
+import type { BlockProps } from '../engine/types';
+interface MessageSettings {
+    /** inline_richtext */
+    text?: string;
+}
+export default function MessageBlock({ settings, index, }: BlockProps<MessageSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/message.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MessageBlock({ settings, index, }) {
+    const { text = 'Free shipping on orders over $50' } = settings;
+    return (_jsx("p", { className: "announcement-bar__message", hidden: index !== 0, children: _jsx("span", { className: "announcement-bar__text", dangerouslySetInnerHTML: { __html: text } }) }));
+}

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

@@ -0,0 +1,9 @@
+/** Port of blocks/quote.liquid. CSS: app/styles/components/blocks-quote.css */
+import type { BlockProps } from '../engine/types';
+interface QuoteSettings {
+    /** Richtext setting — HTML string. */
+    quote?: string;
+    author?: string;
+}
+export default function QuoteBlock({ settings }: BlockProps<QuoteSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/quote.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function QuoteBlock({ settings }) {
+    const { quote = '<p>Add a customer quote here to build trust.</p>', author, } = settings;
+    return (_jsxs("figure", { className: "quote stack", children: [_jsx("blockquote", { className: "quote__text", dangerouslySetInnerHTML: { __html: quote } }), author ? _jsx("figcaption", { className: "quote__author", children: author }) : null] }));
+}

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

@@ -0,0 +1,8 @@
+/** Port of blocks/spacer.liquid. CSS: app/styles/components/blocks-spacer.css */
+import type { BlockProps } from '../engine/types';
+interface SpacerSettings {
+    size?: number;
+    fill?: boolean;
+}
+export default function SpacerBlock({ settings }: BlockProps<SpacerSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/spacer.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function SpacerBlock({ settings }) {
+    const { size = 40, fill = false } = settings;
+    return (_jsx("div", { className: `spacer${fill ? ' spacer--fill' : ''}`, style: { '--spacer-size': `${size}px` } }));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * Port of the section-local `story` block from sections/stories.liquid:
+ * a circular/square thumbnail with an optional label and link.
+ * CSS: app/styles/components/sections-stories.css (.story rules)
+ *
+ * The Liquid renders the image at width = desktop_size * 2; block props
+ * don't carry section settings, so a fixed 2x ladder around the maximum
+ * desktop size (240px) is used instead.
+ */
+import type { BlockProps } from '../engine/types';
+interface StorySettings {
+    image?: string;
+    label?: string;
+    link?: string;
+}
+export default function StoryBlock({ settings }: BlockProps<StorySettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/story.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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] }));
+}

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

@@ -0,0 +1,9 @@
+/** Port of blocks/text.liquid. CSS: app/styles/components/blocks-text.css */
+import type { BlockProps } from '../engine/types';
+interface TextSettings {
+    text?: string;
+    text_style?: string;
+    alignment?: string;
+}
+export default function TextBlock({ settings }: BlockProps<TextSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/text.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function TextBlock({ settings }) {
+    const { text = 'Text', text_style: textStyle = 'text--title', alignment = 'left', } = settings;
+    return (_jsx("div", { className: `text ${textStyle}`, style: { '--text-align': alignment }, children: text }));
+}

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

@@ -0,0 +1,17 @@
+import type { BlockProps } from '../engine/types';
+import { type ThemeVideo } from '../components/VideoModal';
+interface VideoSettings {
+    video?: ThemeVideo;
+    /** `video_url` setting: JSON stores the raw URL string; the Liquid
+     *  runtime's {type, id} object shape is accepted too. */
+    video_url?: string | {
+        type?: string;
+        id?: string;
+        url?: string;
+    };
+    image?: string;
+    autoplay?: boolean;
+    aspect?: 'auto' | 'square' | 'portrait' | 'landscape';
+}
+export default function VideoBlock({ settings }: BlockProps<VideoSettings>): import("react").JSX.Element;
+export {};

package/dist/react/blocks/video.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Port of blocks/video.liquid — general video block: a Shopify-hosted
+ * file (ambient loop or click-to-play with native controls) or a
+ * YouTube/Vimeo link behind a cover-image facade that loads nothing
+ * until clicked. Behavior from the <video-player> island in
+ * src/entries/video.ts. CSS: app/styles/components/blocks-video.css
+ */
+import { useState } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from '../components/Icon';
+import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
+import { mp4Sources, useViewportPlayback, videoPreviewImage, } from '../components/VideoModal';
+/** Mirror of Liquid's external video_url object (type + id). */
+function parseExternal(value) {
+    let url = '';
+    if (typeof value === 'object' && value !== null) {
+        if ((value.type === 'youtube' || value.type === 'vimeo') && value.id) {
+            return { type: value.type, id: value.id };
+        }
+        url = value.url ?? '';
+    }
+    else if (typeof value === 'string') {
+        url = value;
+    }
+    if (!url)
+        return null;
+    const youtube = url.match(/(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/)|youtu\.be\/)([\w-]{6,})/);
+    if (youtube)
+        return { type: 'youtube', id: youtube[1] };
+    const vimeo = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+    if (vimeo)
+        return { type: 'vimeo', id: vimeo[1] };
+    return null;
+}
+export default function VideoBlock({ settings }) {
+    const { autoplay = true, aspect = 'auto' } = settings;
+    const hostedMp4 = mp4Sources(settings.video).at(-1);
+    const external = parseExternal(settings.video_url);
+    const poster = settingImageUrl(settings.image) ?? videoPreviewImage(settings.video);
+    // Ambient loops play only while visible (watchPreviews in video.ts).
+    const previewRef = useViewportPlayback();
+    // External embed facade: the iframe gets its src only on click.
+    const [playing, setPlaying] = useState(false);
+    const frameClass = hostedMp4 ? '' : ' video-block--frame';
+    const embedUrl = external
+        ? external.type === 'youtube'
+            ? `https://www.youtube-nocookie.com/embed/${external.id}?autoplay=1&playsinline=1&rel=0`
+            : `https://player.vimeo.com/video/${external.id}?autoplay=1`
+        : 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]
+                                .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/Facets.d.ts

@@ -0,0 +1,21 @@
+import type React from 'react';
+export interface SortOption {
+    value: string;
+    label: string;
+}
+/** Shopify's canonical collection sort handles (Liquid collection.sort_options). */
+export declare const COLLECTION_SORT_OPTIONS: SortOption[];
+/** Shopify's canonical search sort handles (Liquid search.sort_options). */
+export declare const SEARCH_SORT_OPTIONS: SortOption[];
+export interface FacetsProps {
+    /** Storefront API filters (collection.products.filters / search filters). */
+    filters: any[];
+    /** Base URL the clear-all link points at (mirror of results_url). */
+    resultsUrl: string;
+    resultsCount: number;
+    sortOptions?: SortOption[];
+    defaultSortBy?: string;
+    /** Search terms, preserved as a hidden q input. */
+    terms?: string;
+}
+export declare function Facets({ filters, resultsUrl, resultsCount, sortOptions, defaultSortBy, terms, }: FacetsProps): React.JSX.Element;

package/dist/react/components/Facets.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of snippets/facets.liquid + src/entries/facets.ts (<facets-form>).
+ * CSS: app/styles/components/snippets-facets.css
+ *
+ * One GET-style form holds the toolbar (sort popover) and the Filters
+ * modal. Sort changes apply immediately; filter changes apply on
+ * "Apply". Closing the dialog without applying resets the form to the
+ * currently applied (= URL) state. Applying navigates with the host's
+ * router (via the adapter seam), updating the URL search params (the
+ * mirror of the Liquid island's Section Rendering swap + pushState).
+ *
+ * URL contract (what the route loader should parse):
+ *   sort_by=<value>                      – sort handle (see sort options)
+ *   filter.<key>=<json>                  – one param per applied filter
+ *     value, where <key> is the ProductFilter key from the Storefront
+ *     filter value's `input` (e.g. filter.variantOption={"name":"color",
+ *     "value":"Red"}), and price as filter.price={"min":10,"max":50}
+ *   q=<terms>                            – preserved search terms
+ */
+import { useEffect, useRef } from 'react';
+import { cleanFormParams } from "../../commerce/index.js";
+import { useAdapter } from '../adapter';
+import { t } from '../engine/translate';
+import { Icon } from './Icon';
+const FILTER_PREFIX = 'filter.';
+/** Shopify's canonical collection sort handles (Liquid collection.sort_options). */
+export const COLLECTION_SORT_OPTIONS = [
+    { value: 'manual', label: 'Featured' },
+    { value: 'best-selling', label: 'Best selling' },
+    { value: 'title-ascending', label: 'Alphabetically, A-Z' },
+    { value: 'title-descending', label: 'Alphabetically, Z-A' },
+    { value: 'price-ascending', label: 'Price, low to high' },
+    { value: 'price-descending', label: 'Price, high to low' },
+    { value: 'created-ascending', label: 'Date, old to new' },
+    { value: 'created-descending', label: 'Date, new to old' },
+];
+/** Shopify's canonical search sort handles (Liquid search.sort_options). */
+export const SEARCH_SORT_OPTIONS = [
+    { value: 'relevance', label: 'Relevance' },
+    { value: 'price-ascending', label: 'Price, low to high' },
+    { value: 'price-descending', label: 'Price, high to low' },
+];
+/** Vetted CSS color keywords — mirror of snippets/swatch-style.liquid. */
+const CSS_COLORS = ',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,';
+/**
+ * Mirror of snippets/swatch-style.liquid: resolve the `--swatch` fill
+ * from the value's native swatch, else the value name as a vetted CSS
+ * keyword. (The metaobject-based swatch_color lookup has no Storefront
+ * mirror here.)
+ */
+function swatchStyle(swatch, name) {
+    const imageUrl = swatch?.image?.previewImage?.url ??
+        swatch?.image?.image?.url ??
+        (typeof swatch?.image === 'string' ? swatch.image : undefined);
+    if (imageUrl)
+        return { '--swatch': `url(${imageUrl})` };
+    if (swatch?.color)
+        return { '--swatch': swatch.color };
+    const probe = String(name ?? '')
+        .toLowerCase()
+        .trim()
+        .replace(/[\s-]/g, '');
+    if (probe && CSS_COLORS.includes(`,${probe},`))
+        return { '--swatch': probe };
+    return {};
+}
+/** filter value → URL param, from the Storefront `input` JSON. */
+function valueParam(value) {
+    try {
+        const input = typeof value?.input === 'string' ? JSON.parse(value.input) : value?.input;
+        if (!input || typeof input !== 'object')
+            return null;
+        const key = Object.keys(input)[0];
+        if (!key)
+            return null;
+        return { name: `${FILTER_PREFIX}${key}`, value: JSON.stringify(input[key]) };
+    }
+    catch {
+        return null;
+    }
+}
+function isPriceFilter(filter) {
+    const type = String(filter?.type ?? '').toLowerCase();
+    return type === 'price_range';
+}
+export function Facets({ filters, resultsUrl, resultsCount, sortOptions = COLLECTION_SORT_OPTIONS, defaultSortBy = 'manual', terms, }) {
+    const adapter = useAdapter();
+    const { Link } = adapter;
+    const navigate = adapter.useNavigate();
+    const searchParams = adapter.useSearchParams();
+    const pathname = adapter.usePathname();
+    const rootRef = useRef(null);
+    const formRef = useRef(null);
+    const dialogRef = useRef(null);
+    const timerRef = useRef();
+    // Applied state comes straight from the URL (the mirror of the
+    // server-rendered form state in Liquid).
+    const activeCount = [...searchParams.keys()].filter((key) => key.startsWith(FILTER_PREFIX)).length;
+    const currentSort = searchParams.get('sort_by') ?? defaultSortBy;
+    const sortLabel = sortOptions.find((option) => option.value === currentSort)?.label ?? '';
+    let appliedPrice = {};
+    try {
+        appliedPrice = JSON.parse(searchParams.get('filter.price') ?? 'null') ?? {};
+    }
+    catch {
+        appliedPrice = {};
+    }
+    /** Mirror of facets.ts #formUrl(): FormData → clean search params
+     * (shared cleanFormParams from commerce-core), with the price pair
+     * merged into one filter.price JSON param. */
+    const formUrl = () => {
+        const form = formRef.current;
+        if (!form)
+            return pathname;
+        const entries = [];
+        let priceMin = '';
+        let priceMax = '';
+        for (const [name, raw] of new FormData(form)) {
+            const value = typeof raw === 'string' ? raw : '';
+            if (name === 'price.min') {
+                priceMin = value;
+                continue;
+            }
+            if (name === 'price.max') {
+                priceMax = value;
+                continue;
+            }
+            entries.push([name, value]);
+        }
+        const params = cleanFormParams(entries);
+        if (priceMin !== '' || priceMax !== '') {
+            const price = {};
+            if (priceMin !== '')
+                price.min = Number(priceMin);
+            if (priceMax !== '')
+                price.max = Number(priceMax);
+            params.append('filter.price', JSON.stringify(price));
+        }
+        return `${pathname}?${params}`;
+    };
+    const closePanels = () => {
+        for (const panel of rootRef.current?.querySelectorAll('details[open]') ??
+            []) {
+            panel.removeAttribute('open');
+        }
+    };
+    const openFilters = () => {
+        const dialog = dialogRef.current;
+        if (dialog && !dialog.open)
+            dialog.showModal();
+    };
+    const cancelFilters = () => dialogRef.current?.close();
+    /** Backdrop light-dismiss: clicks on the <dialog> itself hit the backdrop. */
+    const onDialogClick = (event) => {
+        if (event.target === dialogRef.current)
+            dialogRef.current?.close();
+    };
+    /** Any close path (Cancel, X, Esc, backdrop) discards unapplied edits. */
+    const onDialogClose = () => formRef.current?.reset();
+    /** Sort radios apply immediately. */
+    const onSortChange = () => {
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => void navigate(formUrl()), 100);
+    };
+    const onSubmit = (event) => {
+        event.preventDefault();
+        // Capture the form state BEFORE closing — close resets the form
+        const url = formUrl();
+        dialogRef.current?.close();
+        void navigate(url);
+    };
+    useEffect(() => {
+        const onDocumentClick = (event) => {
+            if (event.target instanceof Node && rootRef.current?.contains(event.target))
+                return;
+            closePanels();
+        };
+        const onKeydown = (event) => {
+            if (event.key === 'Escape')
+                closePanels();
+        };
+        document.addEventListener('click', onDocumentClick);
+        document.addEventListener('keydown', onKeydown);
+        return () => {
+            document.removeEventListener('click', onDocumentClick);
+            document.removeEventListener('keydown', onKeydown);
+            clearTimeout(timerRef.current);
+        };
+    }, []);
+    const clearAllHref = `${resultsUrl}${terms ? `?q=${encodeURIComponent(terms)}` : ''}`;
+    const colorNames = t('products.color_option_match')
+        .toLowerCase()
+        .split(',')
+        .map((name) => name.trim())
+        .filter(Boolean);
+    return (_jsx("div", { ref: rootRef, children: _jsxs("form", { ref: formRef, action: resultsUrl, method: "get", onSubmit: onSubmit, children: [terms ? _jsx("input", { type: "hidden", name: "q", value: terms }) : null, _jsxs("div", { className: "facets-toolbar", children: [_jsx("span", { className: "facets-toolbar__count", children: t(resultsCount === 1 ? 'facets.items.one' : 'facets.items.other', {
+                                count: resultsCount,
+                            }) }), _jsxs("div", { className: "facets-toolbar__actions", children: [_jsxs("span", { className: "facets-toolbar__group", children: [_jsxs("button", { type: "button", className: "facets-toolbar__button", onClick: openFilters, children: [t('facets.filter'), _jsxs("span", { className: "facets-toolbar__value", children: ["( ", activeCount, " )"] })] }), activeCount > 0 && (_jsx(Link, { className: "facets-toolbar__clear", to: clearAllHref, "aria-label": t('facets.clear_all'), children: _jsx(Icon, { name: "icon-close" }) }))] }), _jsxs("details", { className: "facet-sort", children: [_jsxs("summary", { className: "facets-toolbar__button", children: [t('facets.sort'), _jsxs("span", { className: "facets-toolbar__value", children: ["( ", sortLabel, " )"] })] }), _jsx("div", { className: "facet-sort__panel", children: sortOptions.map((option) => (_jsxs("label", { className: "facet-sort__option", children: [_jsx("input", { type: "radio", className: "visually-hidden", name: "sort_by", value: option.value, defaultChecked: option.value === currentSort, onChange: onSortChange }), _jsx("span", { children: option.label })] }, option.value))) })] })] })] }), _jsxs("dialog", { className: "facets-dialog", ref: dialogRef, "scroll-lock": "", onClick: onDialogClick, onClose: onDialogClose, "aria-label": t('facets.filters'), children: [_jsxs("header", { className: "facets-dialog__header", children: [_jsx("h2", { className: "facets-dialog__title", children: t('facets.filters') }), _jsx("button", { type: "button", className: "facets-dialog__close", onClick: cancelFilters, "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) })] }), _jsx("div", { className: "facets-dialog__body", children: filters.map((filter) => {
+                                if (isPriceFilter(filter)) {
+                                    return (_jsxs("fieldset", { className: "facets-group", children: [_jsx("legend", { className: "facets-group__label", children: filter.label }), _jsxs("div", { className: "facets-group__price cluster", children: [_jsxs("label", { children: [_jsx("span", { className: "visually-hidden", children: t('facets.from') }), _jsx("input", { type: "number", name: "price.min", placeholder: t('facets.from'), min: "0", defaultValue: appliedPrice.min ?? '' })] }), _jsxs("label", { children: [_jsx("span", { className: "visually-hidden", children: t('facets.to') }), _jsx("input", { type: "number", name: "price.max", placeholder: t('facets.to'), min: "0", defaultValue: appliedPrice.max ?? '' })] })] })] }, filter.id ?? filter.label));
+                                }
+                                // Color filters get swatch chips: native swatch data on any
+                                // value, or a filter named like a color
+                                const values = filter.values ?? [];
+                                const filterLabelDown = String(filter.label ?? '').toLowerCase();
+                                const filterIsColor = Boolean(values[0]?.swatch) ||
+                                    colorNames.some((name) => filterLabelDown.includes(name));
+                                return (_jsxs("fieldset", { className: "facets-group", children: [_jsx("legend", { className: "facets-group__label", children: filter.label }), _jsx("div", { className: "facets-group__values", children: values.map((value) => {
+                                                const param = valueParam(value);
+                                                if (!param)
+                                                    return null;
+                                                const active = searchParams
+                                                    .getAll(param.name)
+                                                    .includes(param.value);
+                                                const disabled = value.count === 0 && !active;
+                                                return (_jsxs("label", { className: `facet-pill${disabled ? ' facet-pill--disabled' : ''}`, children: [_jsx("input", { type: "checkbox", className: "visually-hidden", name: param.name, value: param.value, defaultChecked: active, disabled: disabled }), _jsxs("span", { className: "facet-pill__label", children: [filterIsColor && (_jsx("span", { className: "swatch facet-pill__swatch", style: swatchStyle(value.swatch, value.label) })), value.label] })] }, value.id ?? param.value));
+                                            }) })] }, filter.id ?? filter.label));
+                            }) }), _jsxs("footer", { className: "facets-dialog__footer", children: [_jsx("button", { type: "button", className: "facets-dialog__cancel", onClick: cancelFilters, children: t('facets.cancel') }), _jsx("button", { type: "submit", className: "button", children: t('facets.apply') })] })] }), _jsx("noscript", { children: _jsx("button", { type: "submit", className: "button button--secondary", children: t('facets.apply') }) })] }, searchParams.toString()) }));
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Mirror of `{{ 'icon-*.svg' | inline_asset_content }}`: inlines the
+ * theme's SVG icons (copied from the theme's assets/) so they inherit
+ * currentColor. The SVG markup is inlined as string constants (copied
+ * verbatim from the theme's assets/icons/*.svg) so the package stays
+ * bundler-agnostic — no import.meta.glob.
+ */
+export type IconName = 'icon-account' | 'icon-cart' | 'icon-chevron-left' | 'icon-chevron-right' | 'icon-close' | 'icon-facebook' | 'icon-instagram' | 'icon-pause' | 'icon-pinterest' | 'icon-play' | 'icon-search' | 'icon-star' | 'icon-tiktok' | 'icon-x' | 'icon-youtube';
+export declare function Icon({ name, className }: {
+    name: IconName;
+    className?: string;
+}): import("react").JSX.Element | null;