@zalify/storefront-kit 0.1.0

package/dist/react/sections/announcement-bar.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of sections/announcement-bar.liquid — rotating messages bar.
+ * The Liquid theme drives rotation with the <announcement-bar> web
+ * component (src/entries/announcement.ts); here the same behavior
+ * lives in React: autoplay (paused for reduced motion), prev/next,
+ * pause/play. data-paused on the host drives the icon swap in CSS.
+ * CSS: app/styles/components/sections-announcement-bar.css
+ */
+import { useEffect, useRef, useState } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from '../components/Icon';
+/*
+ * The bar's height is a CONSTANT, published as a token so layout math
+ * (e.g. the large hero's "viewport minus header stack") can be computed
+ * in pure CSS at first paint — mirror of the section's {% style %} tag.
+ * Removing this section removes the token (consumers fall back to 0).
+ */
+const HEIGHT_TOKEN_CSS = `
+:root {
+  --announcement-bar-height: calc(0.6875rem * 2.8 + 2 * var(--space-xs));
+}
+@media (min-width: 48rem) {
+  :root {
+    --announcement-bar-height: calc(var(--type-xs) * 2.8 + 2 * var(--space-xs));
+  }
+}
+`;
+export default function AnnouncementBarSection({ section, settings, children, }) {
+    const { rotation_speed: rotationSpeed = 5, color_scheme: colorScheme = 'scheme-4' } = settings;
+    const messageCount = (section.block_order ?? []).filter((key) => {
+        const block = section.blocks?.[key];
+        return block && !block.disabled;
+    }).length;
+    const hostRef = useRef(null);
+    const indexRef = useRef(0);
+    const timerRef = useRef();
+    const pausedRef = useRef(false);
+    const [paused, setPaused] = useState(false);
+    const messages = () => Array.from(hostRef.current?.querySelectorAll('.announcement-bar__message') ?? []);
+    const show = (index) => {
+        const items = messages();
+        if (items.length < 2)
+            return;
+        indexRef.current = (index + items.length) % items.length;
+        items.forEach((message, i) => {
+            message.hidden = i !== indexRef.current;
+        });
+    };
+    const start = () => {
+        clearInterval(timerRef.current);
+        if (pausedRef.current || messageCount < 2)
+            return;
+        const speed = rotationSpeed || 5;
+        timerRef.current = setInterval(() => show(indexRef.current + 1), speed * 1000);
+    };
+    const setPausedState = (value) => {
+        pausedRef.current = value;
+        setPaused(value);
+    };
+    useEffect(() => {
+        // Autoplay starts paused when the user prefers reduced motion.
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            setPausedState(true);
+        }
+        start();
+        return () => clearInterval(timerRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messageCount, rotationSpeed]);
+    const previous = () => {
+        show(indexRef.current - 1);
+        start();
+    };
+    const next = () => {
+        show(indexRef.current + 1);
+        start();
+    };
+    const toggle = () => {
+        setPausedState(!pausedRef.current);
+        // pausedRef is already updated; restart (or stop) the timer.
+        start();
+    };
+    return (_jsxs("announcement-bar", { ref: hostRef, className: `announcement-bar color-${colorScheme} full-width`, "data-speed": rotationSpeed, "data-paused": paused ? '' : undefined, children: [_jsx("style", { dangerouslySetInnerHTML: { __html: HEIGHT_TOKEN_CSS } }), _jsxs("div", { className: "announcement-bar__inner", children: [_jsx("div", { className: "announcement-bar__messages", children: children }), messageCount > 1 && (_jsxs("div", { className: "announcement-bar__controls", children: [_jsx("button", { type: "button", className: "announcement-bar__control", onClick: previous, "aria-label": t('general.previous'), children: _jsx(Icon, { name: "icon-chevron-left" }) }), _jsx("button", { type: "button", className: "announcement-bar__control", onClick: next, "aria-label": t('general.next'), children: _jsx(Icon, { name: "icon-chevron-right" }) }), _jsxs("button", { type: "button", className: "announcement-bar__control announcement-bar__toggle", onClick: toggle, "aria-label": t('general.pause'), children: [_jsx("span", { className: "announcement-bar__icon-pause", children: _jsx(Icon, { name: "icon-pause" }) }), _jsx("span", { className: "announcement-bar__icon-play", children: _jsx(Icon, { name: "icon-play" }) })] })] }))] })] }));
+}

package/dist/react/sections/article.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Port of sections/article.liquid. CSS: app/styles/components/sections-article.css
+ *
+ * Data: useResource('article') — the scaffold ARTICLE query shape
+ * ({handle, title, contentHtml, publishedAt, author: {name}, image}),
+ * plus useResource('blog') ({handle, title}) for the back link.
+ *
+ * The Liquid comments block (blog.comments_enabled?, {% form
+ * 'new_comment' %}) has no Storefront API mirror and is omitted.
+ */
+import type { SectionProps } from '../engine/types';
+interface ArticleSettings {
+    color_scheme?: string;
+    section_spacing?: string;
+}
+export default function ArticleSection({ settings, }: SectionProps<ArticleSettings>): import("react").JSX.Element | null;
+export {};

package/dist/react/sections/article.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useResource } from '../engine/context';
+import { t } from '../engine/translate';
+import { imageSrcSet, imageUrl } from '../engine/images';
+import { useAdapter } from '../adapter';
+function articleDateHtml(publishedAt) {
+    if (!publishedAt)
+        return '';
+    const formatted = new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+    }).format(new Date(publishedAt));
+    return `<time datetime="${publishedAt}">${formatted}</time>`;
+}
+export default function ArticleSection({ settings, }) {
+    const { Link } = useAdapter();
+    const { color_scheme: colorScheme = 'scheme-1', section_spacing: spacing = 'md' } = settings;
+    const article = useResource('article');
+    const blog = useResource('blog') ?? article?.blog;
+    if (!article)
+        return null;
+    return (_jsx("article", { className: `article section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${spacing})`,
+        }, children: _jsxs("div", { className: "article__inner stack", style: { '--stack-gap': 'var(--space-lg)' }, children: [_jsxs("header", { className: "article__header stack", style: { '--stack-gap': 'var(--space-sm)' }, children: [blog?.handle && (_jsx(Link, { className: "article__back", to: `/blogs/${blog.handle}`, children: t('blog.back_to_blog', { blog: blog.title ?? blog.handle }) })), _jsx("p", { className: "article__meta", dangerouslySetInnerHTML: {
+                                __html: t('blog.article_metadata_html', {
+                                    date: articleDateHtml(article.publishedAt),
+                                    author: article.author?.name ?? '',
+                                }),
+                            } }), _jsx("h1", { className: "article__title", children: article.title })] }), article.image?.url && (_jsx("img", { className: "article__image", src: imageUrl(article.image.url, 1500), srcSet: imageSrcSet(article.image.url), sizes: "(min-width: 64rem) 60rem, 100vw", loading: "eager", width: article.image.width ?? undefined, height: article.image.height ?? undefined, alt: article.image.altText ?? article.title ?? '' })), _jsx("div", { className: "article__content prose", dangerouslySetInnerHTML: { __html: article.contentHtml ?? '' } })] }) }));
+}

package/dist/react/sections/contact-form.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Port of sections/contact-form.liquid.
+ * CSS: app/styles/components/sections-contact-form.css
+ *
+ * Shopify's native `{% form 'contact' %}` POST endpoint isn't available
+ * in Hydrogen — the markup is rendered faithfully but submission is a
+ * no-op. TODO: wire the submit to a route action (e.g. a proxy to the
+ * Online Store contact endpoint or a third-party form service).
+ */
+import type { SectionProps } from '../engine/types';
+interface ContactFormSettings {
+    color_scheme?: string;
+    section_spacing?: string;
+}
+export default function ContactFormSection({ id, settings, }: SectionProps<ContactFormSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/contact-form.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../engine/translate';
+export default function ContactFormSection({ id, settings, }) {
+    const { color_scheme: colorScheme = 'scheme-1', section_spacing: spacing = 'md' } = settings;
+    return (_jsx("div", { className: `contact section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${spacing})`,
+        }, children: _jsx("div", { className: "contact__inner stack", style: { '--stack-gap': 'var(--space-lg)' }, children: _jsxs("form", { className: "contact__form stack", method: "post", onSubmit: (event) => event.preventDefault(), children: [_jsxs("div", { className: "contact__row", children: [_jsxs("div", { className: "field", children: [_jsx("label", { className: "field__label", htmlFor: `ContactName-${id}`, children: t('contact.name') }), _jsx("input", { id: `ContactName-${id}`, type: "text", name: "contact[name]", autoComplete: "name" })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field__label", htmlFor: `ContactEmail-${id}`, children: t('contact.email') }), _jsx("input", { id: `ContactEmail-${id}`, type: "email", name: "contact[email]", autoComplete: "email", spellCheck: false, autoCapitalize: "off", required: true })] })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field__label", htmlFor: `ContactPhone-${id}`, children: t('contact.phone') }), _jsx("input", { id: `ContactPhone-${id}`, type: "tel", name: "contact[phone]", autoComplete: "tel", pattern: "[0-9\\-]*" })] }), _jsxs("div", { className: "field", children: [_jsx("label", { className: "field__label", htmlFor: `ContactMessage-${id}`, children: t('contact.message') }), _jsx("textarea", { id: `ContactMessage-${id}`, name: "contact[body]", rows: 8, required: true })] }), _jsx("button", { type: "submit", className: "button contact__submit", children: t('contact.send') })] }) }) }));
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Port of sections/custom-liquid.liquid — merchant-pasted markup.
+ * The setting's raw HTML is injected as-is; any Liquid tags/objects in
+ * it cannot execute here (no Liquid runtime), so only the plain-HTML
+ * use case survives the mirror. CSS: sections-custom-liquid.css
+ */
+import type { SectionProps } from '../engine/types';
+interface CustomLiquidSettings {
+    custom_liquid?: string;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function CustomLiquidSection({ settings, }: SectionProps<CustomLiquidSettings>): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CustomLiquidSection({ settings, }) {
+    const { custom_liquid: customLiquid = '', color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
+    return (_jsx("div", { className: `custom-liquid section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        }, children: _jsx("div", { className: "custom-liquid__inner", dangerouslySetInnerHTML: { __html: customLiquid } }) }));
+}

package/dist/react/sections/custom-section.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Port of sections/custom-section.liquid — the canonical v3 section
+ * pattern: color_scheme + section_spacing on the wrapper, optional
+ * background image, blocks in a content grid.
+ * CSS: app/styles/components/sections-custom-section.css
+ */
+import type { SectionProps } from '../engine/types';
+interface CustomSectionSettings {
+    background_image?: string;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function CustomSection({ settings, children, }: SectionProps<CustomSectionSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/custom-section.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { imageUrl, settingImageUrl } from '../engine/images';
+export default function CustomSection({ settings, children, }) {
+    const { color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
+    const backgroundImage = settingImageUrl(settings.background_image);
+    return (_jsxs("div", { className: `custom-section section full-width color-${colorScheme}`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        }, children: [backgroundImage ? (_jsx("div", { className: "custom-section__background", children: _jsx("img", { src: imageUrl(backgroundImage, 2000), alt: "" }) })) : null, _jsx("div", { className: "custom-section__content", children: children })] }));
+}

package/dist/react/sections/featured-collection.d.ts

@@ -0,0 +1,10 @@
+import type { SectionProps } from '../engine/types';
+interface FeaturedCollectionSettings {
+    heading?: string;
+    collection?: string;
+    products_to_show?: number;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function FeaturedCollectionSection({ settings, }: SectionProps<FeaturedCollectionSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/featured-collection.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of sections/featured-collection.liquid — heading + product grid.
+ * Products come from this section's server loader
+ * (featured-collection.server.ts) via useSectionData(); without data it
+ * renders the Liquid onboarding placeholders.
+ * CSS: app/styles/components/sections-featured-collection.css
+ */
+import { ProductCard } from '../components/ProductCard';
+import { useSectionData } from '../engine/context';
+import { PlaceholderSvg } from '../engine/images';
+import { t } from '../engine/translate';
+export default function FeaturedCollectionSection({ settings, }) {
+    const { heading = 'Featured collection', products_to_show: productsToShow = 4, color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
+    const data = useSectionData();
+    const collection = data?.collection ?? null;
+    const products = (collection?.products?.nodes ?? []).slice(0, productsToShow);
+    return (_jsx("div", { className: `featured-collection section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        }, children: _jsxs("div", { className: "featured-collection__inner stack", style: { '--stack-gap': 'var(--space-xl)' }, children: [_jsxs("header", { className: "featured-collection__header cluster", children: [heading ? _jsx("h2", { children: heading }) : null, collection ? (_jsx("a", { className: "featured-collection__link", href: `/collections/${collection.handle}`, children: t('collections.view_all') })) : null] }), _jsx("ul", { className: "product-grid", role: "list", children: products.length > 0
+                        ? products.map((product) => (_jsx("li", { children: _jsx(ProductCard, { product: product }) }, product.id)))
+                        : Array.from({ length: productsToShow }, (_, i) => (_jsx("li", { children: _jsx("article", { className: "product-card", children: _jsx("div", { className: "product-card__media", children: _jsx(PlaceholderSvg, { className: "product-card__placeholder" }) }) }) }, i))) })] }) }));
+}

package/dist/react/sections/hero.d.ts

@@ -0,0 +1,6 @@
+import type { SectionProps } from '../engine/types';
+interface HeroSettings {
+    height?: 'sm' | 'md' | 'lg';
+}
+export default function HeroSection({ section, settings, children, }: SectionProps<HeroSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/hero.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Port of sections/hero.liquid — scroll-snap slideshow. The Liquid
+ * theme drives this with the <hero-slideshow> web component
+ * (src/entries/hero.ts); here the same behavior lives in React.
+ * CSS: app/styles/components/sections-hero.css
+ */
+import { useEffect, useRef, useState } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from '../components/Icon';
+export default function HeroSection({ section, settings, children, }) {
+    const { height = 'md' } = settings;
+    const slideCount = section.block_order?.length ?? 0;
+    const trackRef = useRef(null);
+    const [current, setCurrent] = useState(0);
+    useEffect(() => {
+        const track = trackRef.current;
+        if (!track || slideCount <= 1)
+            return;
+        const onScroll = () => {
+            const index = Math.round(track.scrollLeft / track.clientWidth);
+            setCurrent(Math.max(0, Math.min(slideCount - 1, index)));
+        };
+        track.addEventListener('scroll', onScroll, { passive: true });
+        return () => track.removeEventListener('scroll', onScroll);
+    }, [slideCount]);
+    const goTo = (index) => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const clamped = ((index % slideCount) + slideCount) % slideCount;
+        track.scrollTo({ left: clamped * track.clientWidth, behavior: 'smooth' });
+    };
+    return (_jsxs("section", { className: `hero hero--${height} full-width`, children: [_jsx("div", { className: "hero__track", ref: trackRef, children: children }), slideCount > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "hero__arrow hero__arrow--prev", onClick: () => goTo(current - 1), "aria-label": t('general.previous'), children: _jsx(Icon, { name: "icon-chevron-left" }) }), _jsx("button", { type: "button", className: "hero__arrow hero__arrow--next", onClick: () => goTo(current + 1), "aria-label": t('general.next'), children: _jsx(Icon, { name: "icon-chevron-right" }) }), _jsx("div", { className: "hero__dots", children: Array.from({ length: slideCount }, (_, i) => (_jsx("button", { type: "button", className: "hero__dot", onClick: () => goTo(i), "aria-current": i === current || undefined, "aria-label": t('general.go_to_slide', { number: i + 1 }) }, i))) })] }))] }));
+}

package/dist/react/sections/image-with-text.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Port of sections/image-with-text.liquid — media column + block stack.
+ * CSS: app/styles/components/sections-image-with-text.css
+ */
+import type { SectionProps } from '../engine/types';
+interface ImageWithTextSettings {
+    image?: string;
+    image_position?: 'left' | 'right';
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function ImageWithTextSection({ settings, children, }: SectionProps<ImageWithTextSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/image-with-text.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { imageSrcSet, imageUrl, PlaceholderSvg, settingImageUrl, } from '../engine/images';
+export default function ImageWithTextSection({ settings, children, }) {
+    const { image_position: imagePosition = 'left', color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'lg', } = settings;
+    const image = settingImageUrl(settings.image);
+    return (_jsx("div", { className: `image-with-text section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        }, children: _jsxs("div", { className: `image-with-text__inner image-with-text--media-${imagePosition}`, children: [_jsx("div", { className: "image-with-text__media", children: image ? (_jsx("img", { className: "image-with-text__image", src: imageUrl(image, 1500), srcSet: imageSrcSet(image, [400, 700, 1000, 1500]), sizes: "(min-width: 48rem) 50vw, 100vw", loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "image-with-text__image image-with-text__placeholder" })) }), _jsx("div", { className: "image-with-text__content stack", children: children })] }) }));
+}

package/dist/react/sections/multicolumn.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Port of sections/multicolumn.liquid — optional heading + responsive
+ * column grid of theme blocks (image, quote, text …) rendered via
+ * `children`. Defines no section-local blocks.
+ * CSS: app/styles/components/sections-multicolumn.css
+ */
+import type { SectionProps } from '../engine/types';
+interface MulticolumnSettings {
+    heading?: string;
+    columns?: number;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function MulticolumnSection({ settings, children, }: SectionProps<MulticolumnSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/multicolumn.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function MulticolumnSection({ settings, children, }) {
+    const { heading = '', columns = 3, color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'lg', } = settings;
+    return (_jsx("div", { className: `multicolumn section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+            '--columns': columns,
+        }, children: _jsxs("div", { className: "multicolumn__inner stack", style: { '--stack-gap': 'var(--space-xl)' }, children: [heading ? _jsx("h2", { className: "multicolumn__heading", children: heading }) : null, _jsx("div", { className: "multicolumn__grid", children: children })] }) }));
+}

package/dist/react/sections/page.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Port of sections/page.liquid. CSS: app/styles/components/sections-page.css
+ *
+ * Data: useResource('page') — the scaffold PAGE query shape
+ * ({handle, id, title, body}).
+ */
+import type { SectionProps } from '../engine/types';
+interface PageSettings {
+    color_scheme?: string;
+    section_spacing?: string;
+}
+export default function PageSection({ settings }: SectionProps<PageSettings>): import("react").JSX.Element | null;
+export {};

package/dist/react/sections/page.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useResource } from '../engine/context';
+export default function PageSection({ settings }) {
+    const { color_scheme: colorScheme = 'scheme-1', section_spacing: spacing = 'md' } = settings;
+    const page = useResource('page');
+    if (!page)
+        return null;
+    return (_jsx("div", { className: `page section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${spacing})`,
+        }, children: _jsxs("div", { className: "page__inner stack", style: { '--stack-gap': 'var(--space-lg)' }, children: [_jsx("h1", { className: "page__title", children: page.title }), _jsx("div", { className: "prose", dangerouslySetInnerHTML: { __html: page.body ?? '' } })] }) }));
+}

package/dist/react/sections/password.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Port of sections/password.liquid.
+ * CSS: app/styles/components/sections-password.css
+ *
+ * `{% form 'storefront_password' %}` posts to the Online Store password
+ * endpoint, which has no Hydrogen equivalent — the markup renders
+ * faithfully but submission is a no-op. TODO: wire to a route action if
+ * a storefront-password flow is ever needed.
+ */
+import type { SectionProps } from '../engine/types';
+interface PasswordSettings {
+    color_scheme?: string;
+}
+export default function PasswordSection({ settings, }: SectionProps<PasswordSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/password.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useThemeGlobals } from '../engine/context';
+import { t } from '../engine/translate';
+export default function PasswordSection({ settings, }) {
+    const { color_scheme: colorScheme = 'scheme-3' } = settings;
+    const globals = useThemeGlobals();
+    const shop = globals.shop ?? globals.header?.shop;
+    return (_jsx("div", { className: `password-page section color-${colorScheme} full-width`, children: _jsxs("div", { className: "password-page__card stack", children: [_jsx("p", { className: "password-page__shop", children: shop?.name ?? '' }), _jsx("h1", { className: "password-page__title", children: t('password.title') }), shop?.passwordMessage ? (_jsx("p", { className: "password-page__message", children: shop.passwordMessage })) : null, _jsxs("form", { className: "password-page__form stack", method: "post", onSubmit: (event) => event.preventDefault(), children: [_jsx("label", { className: "visually-hidden", htmlFor: "PasswordInput", children: t('password.password') }), _jsxs("div", { className: "password-page__row", children: [_jsx("input", { id: "PasswordInput", type: "password", name: "password", placeholder: t('password.password'), autoComplete: "current-password" }), _jsx("button", { type: "submit", className: "button", children: t('password.enter') })] })] })] }) }));
+}

package/dist/react/sections/rich-text.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Port of sections/rich-text.liquid — narrow centered/left block stack.
+ * CSS: app/styles/components/sections-rich-text.css
+ */
+import type { SectionProps } from '../engine/types';
+interface RichTextSettings {
+    alignment?: 'left' | 'center';
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function RichTextSection({ settings, children, }: SectionProps<RichTextSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/rich-text.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RichTextSection({ settings, children, }) {
+    const { alignment = 'center', color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'lg', } = settings;
+    return (_jsx("div", { className: `rich-text section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+        }, children: _jsx("div", { className: `rich-text__inner rich-text--${alignment} stack`, children: children }) }));
+}

package/dist/react/sections/stories.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Port of sections/stories.liquid — horizontally scrolling story strip.
+ * Story items are section-local blocks (app/blocks/story.tsx) rendered
+ * via `children`. Pure JSON-settings section: story blocks only carry
+ * image/label/link (no collection references), so no server loader.
+ * CSS: app/styles/components/sections-stories.css
+ */
+import type { SectionProps } from '../engine/types';
+interface StoriesSettings {
+    shape?: 'stories--circle' | 'stories--square';
+    rows?: string | number;
+    desktop_size?: number;
+    mobile_size?: number;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function StoriesSection({ settings, children, }: SectionProps<StoriesSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function StoriesSection({ settings, children, }) {
+    const { shape = 'stories--circle', rows = '1', desktop_size: desktopSize = 96, mobile_size: mobileSize = 72, color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
+    return (_jsx("div", { className: `stories ${shape} color-${colorScheme} section full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+            '--story-size-desktop': `${desktopSize}px`,
+            '--story-size-mobile': `${mobileSize}px`,
+            '--story-rows': `${rows}`,
+        }, children: _jsx("div", { className: "stories__inner", children: _jsx("div", { className: "stories__list", role: "list", children: children }) }) }));
+}

package/dist/react/sections/video-bubble.d.ts

@@ -0,0 +1,13 @@
+import type { SectionProps } from '../engine/types';
+import { type ThemeVideo } from '../components/VideoModal';
+interface VideoBubbleSettings {
+    preview_video?: ThemeVideo;
+    video?: ThemeVideo;
+    image?: string;
+    product?: unknown;
+    shape?: 'portrait' | 'circle';
+    position?: 'left' | 'right';
+    size?: number;
+}
+export default function VideoBubbleSection({ id, settings, }: SectionProps<VideoBubbleSettings>): import("react").JSX.Element | null;
+export {};

package/dist/react/sections/video-bubble.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Port of sections/video-bubble.liquid — floating video bubble: a small
+ * muted preview loop pinned to a bottom corner that expands into the
+ * shared video modal (main video + optional product). Dismissible per
+ * browsing session. Behavior from the <video-bubble> island in
+ * src/entries/video.ts (viewport playback, session dismissal) plus the
+ * Liquid pre-paint script that keeps a dismissed bubble from flashing.
+ * CSS: app/styles/components/sections-video-bubble.css
+ */
+import { useEffect, useState } from 'react';
+import { t } from '../engine/translate';
+import { Icon } from '../components/Icon';
+import { imageUrl, PlaceholderSvg, settingImageUrl } from '../engine/images';
+import { mp4Sources, resolveVideoProduct, useViewportPlayback, VideoModal, videoPreviewImage, } from '../components/VideoModal';
+export default function VideoBubbleSection({ id, settings, }) {
+    const { shape = 'portrait', position = 'right', size = 120 } = settings;
+    const preview = settings.preview_video;
+    const mainVideo = settings.video ?? preview;
+    const poster = settingImageUrl(settings.image) ??
+        videoPreviewImage(preview) ??
+        videoPreviewImage(mainVideo);
+    // The bubble renders tiny — the smallest rendition is always enough
+    const previewMp4 = mp4Sources(preview)[0];
+    const product = resolveVideoProduct(settings.product);
+    const dismissKey = `zalify:video-bubble:${id}`;
+    const [dismissed, setDismissed] = useState(false);
+    const [open, setOpen] = useState(false);
+    const previewRef = useViewportPlayback();
+    // A bubble dismissed this session stays gone (≙ connectedCallback).
+    useEffect(() => {
+        try {
+            if (sessionStorage.getItem(dismissKey))
+                setDismissed(true);
+        }
+        catch {
+            // Storage unavailable: leave the bubble visible
+        }
+    }, [dismissKey]);
+    if (dismissed)
+        return null;
+    const dismiss = () => {
+        setDismissed(true);
+        try {
+            sessionStorage.setItem(dismissKey, '1');
+        }
+        catch {
+            // Storage can be unavailable (private mode); hiding is enough
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `video-bubble video-bubble--${position} video-bubble--${shape}`, style: { '--bubble-size': `${size}px` }, "data-dismiss-key": id, children: [_jsx("button", { type: "button", className: "video-bubble__dismiss", onClick: dismiss, "aria-label": t('general.close'), children: _jsx(Icon, { name: "icon-close" }) }), _jsxs("button", { type: "button", className: "video-bubble__trigger", onClick: () => setOpen(true), "aria-label": t('general.play_video'), children: [previewMp4 ? (_jsx("video", { ref: previewRef, className: "video-bubble__media", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "metadata", "data-video-preview": "", poster: poster ? imageUrl(poster, 400) : undefined, children: _jsx("source", { src: previewMp4.url, type: previewMp4.mime_type }) })) : poster ? (_jsx("img", { className: "video-bubble__media", src: imageUrl(poster, 400), loading: "lazy", alt: "" })) : (_jsx(PlaceholderSvg, { className: "video-bubble__media video-bubble__media--placeholder" })), _jsx("span", { className: "video-bubble__play", children: _jsx(Icon, { name: "icon-play" }) })] }), _jsx(VideoModal, { open: open, onClose: () => setOpen(false), video: mainVideo, poster: poster, product: product })] }), _jsx("script", { dangerouslySetInnerHTML: {
+                    __html: `(function(){try{if(sessionStorage.getItem(${JSON.stringify(dismissKey)})){document.currentScript.previousElementSibling.hidden=true;}}catch(e){}})();`,
+                } })] }));
+}

package/dist/react/sections/video-carousel.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Port of sections/video-carousel.liquid — a scroll-snap strip of
+ * _video-card blocks. The carousel itself is pure CSS (scroll-snap);
+ * the <video-carousel> island in src/entries/video.ts only wired
+ * preview playback and dialog pausing, which now live inside each
+ * card / the shared VideoModal. (The shopify:block:select editor
+ * scroll has no mirror equivalent.)
+ * CSS: app/styles/components/sections-video-carousel.css
+ */
+import type { SectionProps } from '../engine/types';
+interface VideoCarouselSettings {
+    heading?: string;
+    desktop_size?: number;
+    mobile_size?: number;
+    color_scheme?: string;
+    section_spacing?: 'none' | 'sm' | 'md' | 'lg';
+}
+export default function VideoCarouselSection({ settings, children, }: SectionProps<VideoCarouselSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/video-carousel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function VideoCarouselSection({ settings, children, }) {
+    const { heading = 'Shop the look', desktop_size: desktopSize = 280, mobile_size: mobileSize = 200, color_scheme: colorScheme = 'scheme-1', section_spacing: sectionSpacing = 'md', } = settings;
+    return (_jsx("div", { className: `video-carousel section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${sectionSpacing})`,
+            '--video-card-size-desktop': `${desktopSize}px`,
+            '--video-card-size-mobile': `${mobileSize}px`,
+        }, children: _jsxs("div", { className: "video-carousel__inner stack", style: { '--stack-gap': 'var(--space-xl)' }, children: [heading ? _jsx("h2", { children: heading }) : null, _jsx("div", { className: "video-carousel__list", role: "list", children: children })] }) }));
+}

package/dist/react/server.d.ts

@@ -0,0 +1,7 @@
+import type { SectionLoaderArgs } from './engine/types';
+export { builtinSectionLoaders } from './registries.server';
+type LoaderContext = Omit<SectionLoaderArgs, 'settings' | 'section' | 'sectionId'>;
+/** Run all section loaders for a page template. */
+export declare function loadSectionData(templateName: string, context: LoaderContext): Promise<Record<string, unknown>>;
+/** Run all section loaders for a section group (header/footer/overlay). */
+export declare function loadGroupSectionData(groupName: string, context: LoaderContext): Promise<Record<string, unknown>>;

package/dist/react/server.js

@@ -0,0 +1,42 @@
+/**
+ * Server side of the section engine (import from '@zalify/storefront-kit/react/server').
+ * Route loaders run the registered per-section-type loaders for a
+ * template and pass the result to <ThemeTemplate sectionData={…}/>.
+ */
+import { getSectionGroup, getTemplate, getThemeStore } from './engine/store';
+export { builtinSectionLoaders } from './registries.server';
+async function runLoaders(template, context) {
+    const loaders = getThemeStore().sectionLoaders ?? {};
+    const entries = await Promise.all(template.order.map(async (sectionId) => {
+        const section = template.sections[sectionId];
+        if (!section || section.disabled)
+            return null;
+        const loader = loaders[section.type];
+        if (!loader)
+            return null;
+        try {
+            const data = await loader({
+                ...context,
+                settings: section.settings ?? {},
+                section,
+                sectionId,
+            });
+            return [sectionId, data];
+        }
+        catch (error) {
+            // A failing section must not take down the page.
+            // eslint-disable-next-line no-console
+            console.error(`[theme] loader for section "${sectionId}" failed`, error);
+            return null;
+        }
+    }));
+    return Object.fromEntries(entries.filter(Boolean));
+}
+/** Run all section loaders for a page template. */
+export async function loadSectionData(templateName, context) {
+    return runLoaders(getTemplate(templateName), context);
+}
+/** Run all section loaders for a section group (header/footer/overlay). */
+export async function loadGroupSectionData(groupName, context) {
+    return runLoaders(getSectionGroup(groupName), context);
+}