@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/cjs/components/src/components/Atoms/Dropdown/Dropdown.js

@@ -77,9 +77,15 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)((properties) => {
                     onToggle && onToggle(e, false);
                 }
             }
-        });
+            // capture phase so outside clicks close the dropdown even inside the quickview wrapper,
+            // which stops click propagation; the contentRef guard above covers the portaled options
+        }, true);
     }
-    (0, hooks_1.useEffect)(() => {
+    // Position the portal BEFORE the browser paints — with a regular effect the dropdown
+    // options would flash at (0,0) until the effect runs and computes the real button position.
+    // Resize / scroll listeners stay on a regular effect — they only need to run after
+    // the initial layout pass is committed.
+    (0, hooks_1.useLayoutEffect)(() => {
         if (usePortal && dropdownOpen) {
             const updateCoords = () => {
                 if (buttonRef.current) {
@@ -168,12 +174,14 @@ exports.Dropdown = (0, mobx_react_lite_1.observer)((properties) => {
                     }, children: (0, utilities_1.cloneWithProps)(button, { open: dropdownOpen, toggleOpen: toggleOpenDropdown, treePath }) }), !usePortal
                     ? (content || children) && contentElement
                     : (content || children) &&
-                        (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
-                                position: 'absolute',
-                                top: coords.top,
-                                left: coords.left,
-                                width: coords.width,
-                                zIndex: 9999,
-                                pointerEvents: dropdownOpen ? 'auto' : 'none',
-                            }, children: contentElement }), document.body)] }) }));
+                        (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: globalTheme.name ? `ss__theme__${globalTheme.name}` : 'ss__theme__global', children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('ss__dropdown__portal', className, internalClassName, { 'ss__dropdown__portal--open': dropdownOpen }), css: styling.css, style: {
+                                    position: 'absolute',
+                                    top: coords.top,
+                                    left: coords.left,
+                                    width: coords.width,
+                                    // 10007: above the quickview modal content (10006) so variant dropdowns paint over it,
+                                    // below the Gallery lightbox (10010). Full ladder: see QuickviewModal defaultStyles.
+                                    zIndex: 10007,
+                                    pointerEvents: dropdownOpen ? 'auto' : 'none',
+                                }, children: contentElement }) }), document.body)] }) }));
 });

package/dist/cjs/components/src/components/Atoms/Image/Image.js

@@ -41,7 +41,7 @@ exports.Image = (0, mobx_react_lite_1.observer)((properties) => {
         treePath: globalTreePath,
     };
     const props = (0, utilities_1.mergeProps)('image', globalTheme, defaultProps, properties);
-    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, className, internalClassName } = props;
+    const { alt, src, fallback, title, hoverSrc, lazy, onMouseOver, onMouseOut, onError, onLoad, onClick, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, className, internalClassName, draggable, } = props;
     const { overrideElement, shouldRenderDefault } = (0, hooks_2.useCustomComponentOverride)('image', props);
     if (!shouldRenderDefault) {
         return overrideElement;
@@ -68,5 +68,13 @@ exports.Image = (0, mobx_react_lite_1.observer)((properties) => {
                 }, onMouseOut: (e) => {
                     hoverSrc && setHover(false);
                     onMouseOut && onMouseOut(e);
-                } }) }) }));
+                }, onPointerDown: (e) => {
+                    onPointerDown && onPointerDown(e);
+                }, onPointerMove: (e) => {
+                    onPointerMove && onPointerMove(e);
+                }, onPointerUp: (e) => {
+                    onPointerUp && onPointerUp(e);
+                }, onPointerLeave: (e) => {
+                    onPointerLeave && onPointerLeave(e);
+                }, draggable: draggable }) }) }));
 });

package/dist/cjs/components/src/components/Atoms/ProductDetail/ProductDetail.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetail = exports.renderDetailValue = exports.getProductFieldValue = exports.isCorePriceField = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const mobx_react_lite_1 = require("mobx-react-lite");
+const mobx_1 = require("mobx");
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_1 = require("../../../hooks");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const Price_1 = require("../Price");
+// Core mapping fields whose values represent monetary amounts and should be formatted by `Price`.
+const CORE_PRICE_FIELDS = ['price', 'msrp'];
+// A field is a core-mapping price when its final segment is a known price field and it resolves
+// from core mappings — either a bare key (which falls back to `mappings.core`) or an explicit
+// `...mappings.core.<priceField>` path. `attributes.price` and the like are excluded.
+const isCorePriceField = (field) => {
+    if (!field)
+        return false;
+    const segments = field.split('.');
+    const last = segments[segments.length - 1];
+    if (!CORE_PRICE_FIELDS.includes(last))
+        return false;
+    if (segments.length === 1)
+        return true;
+    return segments[segments.length - 2] === 'core' && segments[segments.length - 3] === 'mappings';
+};
+exports.isCorePriceField = isCorePriceField;
+// Resolve a product field value. An explicit dot-path (e.g. `mappings.core.name` or
+// `attributes.brand`) states exactly where to read from and is resolved against the variant-aware
+// `display` view first, then the product itself. A bare field key (no dot) falls back to the
+// legacy lookup — `mappings.core` first, then `attributes` — so config-driven field lists keep
+// working. Returns the raw value (string, number, array, object); formatting is left to
+// `renderDetailValue`.
+const getProductFieldValue = (result, field) => {
+    if (!result || !field)
+        return undefined;
+    const resolvePath = (root) => field.split('.').reduce((acc, key) => (acc && typeof acc === 'object' ? acc[key] : undefined), root);
+    const explicit = resolvePath(result?.display) ?? resolvePath(result);
+    if (explicit !== undefined)
+        return explicit;
+    if (!field.includes('.')) {
+        const core = (result?.display?.mappings?.core || result?.mappings?.core);
+        const attributes = (result?.display?.attributes || result?.attributes);
+        return core?.[field] ?? attributes?.[field];
+    }
+    return undefined;
+};
+exports.getProductFieldValue = getProductFieldValue;
+// Coerce a resolved value into a display string: arrays (and MobX observable arrays) are
+// comma-joined, objects fall back to JSON, everything else is stringified.
+const renderDetailValue = (value) => {
+    if (value === null || value === undefined)
+        return '';
+    if (Array.isArray(value) || (0, mobx_1.isObservableArray)(value)) {
+        return Array.from(value)
+            .map((v) => (typeof v === 'object' ? JSON.stringify(v) : String(v)))
+            .join(', ');
+    }
+    if (typeof value === 'object')
+        return JSON.stringify(value);
+    return String(value);
+};
+exports.renderDetailValue = renderDetailValue;
+const defaultStyles = () => {
+    return (0, react_1.css)({});
+};
+exports.ProductDetail = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        // the field's final segment names the component (`productDetail.<name>` theme selectors)
+        name: properties.field ? (0, snap_toolbox_1.fieldNameToComponentName)(properties.field.split('.').pop() || '') : undefined,
+    };
+    const props = (0, utilities_1.mergeProps)('productDetail', globalTheme, defaultProps, properties);
+    const { result, field, name, html, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = (0, hooks_1.useCustomComponentOverride)('productDetail', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    const rawValue = (0, exports.getProductFieldValue)(result, field);
+    const value = (0, exports.renderDetailValue)(rawValue);
+    if (!value)
+        return null;
+    const isPrice = (0, exports.isCorePriceField)(field) && typeof rawValue === 'number';
+    // Theme/style modifier: the named selector suffix (`productDetail.<name>`) when present,
+    // otherwise the resolved field path's final segment.
+    const modifier = name || field.split('.').pop();
+    const classNames = (0, classnames_1.default)('ss__product-detail', modifier && `ss__product-detail--${modifier}`, tag && `ss__product-detail--${tag}`, className, internalClassName);
+    return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: html ? ((0, jsx_runtime_1.jsx)("div", { ...styling, className: classNames, dangerouslySetInnerHTML: { __html: value } })) : ((0, jsx_runtime_1.jsx)("div", { ...styling, className: classNames, children: isPrice ? (0, jsx_runtime_1.jsx)(Price_1.Price, { value: rawValue, treePath: props.treePath }) : value })) }));
+});

package/dist/cjs/components/src/components/Atoms/ProductDetail/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductDetail = void 0;
+// Curated: the field-resolution helpers in ProductDetail.tsx are internal (used by
+// ProductDetailTable and unit tests via direct file imports) and must not reach the package API.
+var ProductDetail_1 = require("./ProductDetail");
+Object.defineProperty(exports, "ProductDetail", { enumerable: true, get: function () { return ProductDetail_1.ProductDetail; } });

package/dist/cjs/components/src/components/Atoms/TemplateSelect/TemplateSelect.js

@@ -9,7 +9,9 @@ exports.TemplateSelect = (0, mobx_react_lite_1.observer)((properties) => {
     const { snap, templatesStore, target, controller, ...otherProps } = properties;
     const { loading } = templatesStore;
     if (!target) {
-        controller.log.error(`Target was not provided!`);
+        // Quickview targets render without a controller (the quickview manager is not one), so
+        // fall back to the console when there is no controller logger to use.
+        controller ? controller.log.error(`Target was not provided!`) : console.error(`[TemplateSelect] Target was not provided!`);
         return null;
     }
     const Component = templatesStore.library.getComponent(target.type, target.component);
@@ -18,11 +20,18 @@ exports.TemplateSelect = (0, mobx_react_lite_1.observer)((properties) => {
     const theme = themeStore?.theme;
     if (!loading && !theme && !templatesStore.settings?.editMode) {
         const error = `Theme "${target.theme.name}" not found in library for target "${target.selector}"`;
-        controller.log.error(error);
+        controller ? controller.log.error(error) : console.error(`[TemplateSelect] ${error}`);
     }
-    const tabManager = controller.type === snap_controller_1.ControllerTypes.search || controller.type === snap_controller_1.ControllerTypes.autocomplete
+    const tabManager = controller?.type === snap_controller_1.ControllerTypes.search || controller?.type === snap_controller_1.ControllerTypes.autocomplete
         ? templatesStore.getTabManager(controller.type, snap.controllers)
         : undefined;
+    const tabName = tabManager?.active?.id ? tabManager.active.id.toLowerCase() : undefined;
     // ensuring that theme and component are ready to render
-    return !loading && theme && Component ? ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: (0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, { controller: controller, tabManager: tabManager, name: tabManager?.active?.id ? tabManager?.active?.id.toLowerCase() : undefined, ...otherProps }) }) }) }) })) : null;
+    if (loading || !theme || !Component) {
+        return null;
+    }
+    // Quickview targets render without a controller — the shared quickview manager arrives via
+    // `otherProps` instead — so the ControllerProvider is only wrapped when there is one to provide.
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: "ss__template-select", children: (0, jsx_runtime_1.jsx)(Component, { controller: controller, tabManager: tabManager, ...(tabName !== undefined ? { name: tabName } : {}), ...otherProps }) }));
+    return ((0, jsx_runtime_1.jsx)(providers_1.SnapProvider, { snap: snap, children: (0, jsx_runtime_1.jsx)(providers_1.ThemeProvider, { theme: theme, children: controller ? (0, jsx_runtime_1.jsx)(providers_1.ControllerProvider, { controller: controller, children: content }) : content }) }));
 });

package/dist/cjs/components/src/components/Molecules/CalloutBadge/CalloutBadge.js

@@ -10,6 +10,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const mobx_react_lite_1 = require("mobx-react-lite");
 const providers_1 = require("../../../providers");
 const utilities_1 = require("../../../utilities");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
 const hooks_1 = require("../../../hooks");
 const defaultStyles = () => {
     return (0, react_1.css)({
@@ -32,6 +33,8 @@ exports.CalloutBadge = (0, mobx_react_lite_1.observer)((properties) => {
     const globalTreePath = (0, providers_1.useTreePath)();
     const defaultProps = {
         // default props
+        // a custom tag names the component (`calloutBadge.<tag>` theme selectors); default usage stays unnamed
+        name: properties.tag ? (0, snap_toolbox_1.fieldNameToComponentName)(properties.tag) : undefined,
         tag: 'callout',
         limit: 1,
         treePath: globalTreePath,
@@ -48,7 +51,7 @@ exports.CalloutBadge = (0, mobx_react_lite_1.observer)((properties) => {
         ...props.componentMap,
     };
     const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
-    const badges = result?.display.badges?.atLocation(tag).slice(0, limit);
+    const badges = result?.display?.badges?.atLocation(tag).slice(0, limit);
     if (renderEmpty || badges?.length) {
         return ((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsx)("div", { ...styling, className: (0, classnames_1.default)('ss__callout-badge', `ss__callout-badge--${tag?.replace('/', '-')}`, className, internalClassName), children: badges.map((badge, badgeIndex) => ((0, jsx_runtime_1.jsx)(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${badge.component}-${badgeIndex}`))) }) }));
     }

package/dist/cjs/components/src/components/Molecules/Gallery/Gallery.js

@@ -0,0 +1,298 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gallery = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const compat_1 = require("preact/compat");
+const hooks_1 = require("preact/hooks");
+const mobx_react_lite_1 = require("mobx-react-lite");
+const react_1 = require("@emotion/react");
+const classnames_1 = __importDefault(require("classnames"));
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const providers_1 = require("../../../providers");
+const utilities_1 = require("../../../utilities");
+const hooks_2 = require("../../../hooks");
+const Button_1 = require("../../Atoms/Button");
+const Image_1 = require("../../Atoms/Image");
+const defaultStyles = () => {
+    return (0, react_1.css)({
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10010, // above the quickview modal content (10006) and the dropdown portal (10007); full ladder in QuickviewModal defaultStyles
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'rgba(0, 0, 0, 0.9)',
+        '& .ss__gallery__toolbar': {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '12px 16px',
+        },
+        // button and icon chrome (color, background, border) comes from Button/Icon props (not CSS)
+        // so that theme overrides targeting those components (e.g. `gallery button.zoom-in`) are not
+        // out-specified here — these rules stick to layout the sub-components have no props for
+        '& .ss__gallery__button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: '4px',
+            width: '40px',
+            height: '40px',
+            fontSize: '1.3em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            '&.ss__button--disabled': {
+                opacity: 0.4,
+                cursor: 'default',
+            },
+        },
+        '& .ss__gallery__counter': {
+            color: '#fff',
+            marginRight: 'auto',
+            padding: '0 8px',
+            fontSize: '0.9em',
+        },
+        '& .ss__gallery__stage': {
+            position: 'relative',
+            flex: '1 1 auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+        },
+        '& .ss__gallery__image': {
+            maxWidth: '90vw',
+            maxHeight: '80vh',
+            objectFit: 'contain',
+            userSelect: 'none',
+            touchAction: 'none',
+            transformOrigin: 'center center',
+            transition: 'transform 0.05s linear',
+        },
+        '& .ss__gallery__nav': {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            height: '100%',
+            width: '64px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 0,
+            boxSizing: 'border-box',
+            borderRadius: 0,
+            fontSize: '2em',
+            lineHeight: 1,
+            cursor: 'pointer',
+            zIndex: 1,
+            '&:hover': {
+                // a wash layered via backgroundImage so it composes with (rather than defeats)
+                // a backgroundColor set through Button props or theme overrides
+                backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.085))',
+            },
+        },
+        '& .ss__gallery__nav--prev': {
+            left: 0,
+        },
+        '& .ss__gallery__nav--next': {
+            right: 0,
+        },
+    });
+};
+exports.Gallery = (0, mobx_react_lite_1.observer)((properties) => {
+    const globalTheme = (0, providers_1.useTheme)();
+    const globalTreePath = (0, providers_1.useTreePath)();
+    const defaultProps = {
+        treePath: globalTreePath,
+        startIndex: 0,
+        zoomMin: 1,
+        zoomMax: 4,
+        zoomStep: 0.5,
+        swipeThreshold: 40,
+    };
+    const props = (0, utilities_1.mergeProps)('gallery', globalTheme, defaultProps, properties);
+    const { images, open, startIndex, onClose, alt, className, internalClassName } = props;
+    const zoomMin = props.zoomMin;
+    const zoomMax = props.zoomMax;
+    const zoomStep = props.zoomStep;
+    const swipeThreshold = props.swipeThreshold;
+    const clampZoom = (value) => Math.min(zoomMax, Math.max(zoomMin, value));
+    const [index, setIndex] = (0, hooks_1.useState)(startIndex || 0);
+    const [zoom, setZoom] = (0, hooks_1.useState)(zoomMin);
+    const [pan, setPan] = (0, hooks_1.useState)({ x: 0, y: 0 });
+    const dragRef = (0, hooks_1.useRef)(null);
+    const touchRef = (0, hooks_1.useRef)(null);
+    const count = images?.length || 0;
+    //initialize lang
+    const defaultLang = {
+        gallery: {
+            attributes: {
+                'aria-label': 'Image gallery',
+            },
+        },
+        zoomOutButton: {
+            attributes: {
+                'aria-label': 'Zoom out',
+            },
+        },
+        zoomInButton: {
+            attributes: {
+                'aria-label': 'Zoom in',
+            },
+        },
+        closeButton: {
+            attributes: {
+                'aria-label': 'Close gallery',
+            },
+        },
+        prevButton: {
+            attributes: {
+                'aria-label': 'Previous image',
+            },
+        },
+        nextButton: {
+            attributes: {
+                'aria-label': 'Next image',
+            },
+        },
+    };
+    //deep merge with props.lang
+    const lang = (0, deepmerge_1.default)(defaultLang, props.lang || {});
+    const mergedLang = (0, hooks_2.useLang)(lang, {});
+    // Reset to the clicked image (and clear zoom/pan) whenever the gallery opens or the start changes.
+    (0, hooks_1.useEffect)(() => {
+        if (open) {
+            setIndex(Math.min(Math.max(startIndex || 0, 0), Math.max(count - 1, 0)));
+            setZoom(zoomMin);
+            setPan({ x: 0, y: 0 });
+        }
+    }, [open, startIndex, count]);
+    const goTo = (next) => {
+        if (count === 0)
+            return;
+        const wrapped = (next + count) % count;
+        setIndex(wrapped);
+        setZoom(zoomMin);
+        setPan({ x: 0, y: 0 });
+    };
+    const showPrev = () => goTo(index - 1);
+    const showNext = () => goTo(index + 1);
+    const zoomIn = () => setZoom((z) => clampZoom(z + zoomStep));
+    const zoomOut = () => setZoom((z) => {
+        const next = clampZoom(z - zoomStep);
+        if (next === zoomMin)
+            setPan({ x: 0, y: 0 });
+        return next;
+    });
+    // Keyboard controls while open.
+    (0, hooks_1.useEffect)(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            switch (e.key) {
+                case 'Escape':
+                    onClose && onClose();
+                    break;
+                case 'ArrowRight':
+                    showNext();
+                    break;
+                case 'ArrowLeft':
+                    showPrev();
+                    break;
+                case '+':
+                case '=':
+                    zoomIn();
+                    break;
+                case '-':
+                case '_':
+                    zoomOut();
+                    break;
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, index, count]);
+    // Dialog focus management — same pattern as QuickviewModal/QuickviewSlideout:
+    // remember what had focus before the gallery opened (the gallery portals to document.body,
+    // outside any surrounding focus trap), move focus into the gallery on open, restore on close.
+    const rootRef = (0, hooks_1.useRef)(null);
+    const previousFocusRef = (0, hooks_1.useRef)(null);
+    const wasOpenRef = (0, hooks_1.useRef)(false);
+    (0, hooks_1.useEffect)(() => {
+        const isOpenNow = Boolean(open && count > 0);
+        if (isOpenNow && !wasOpenRef.current) {
+            previousFocusRef.current = document.activeElement || null;
+            const closeEl = rootRef.current?.querySelector('.ss__gallery__close');
+            (closeEl || rootRef.current)?.focus();
+        }
+        else if (!isOpenNow && wasOpenRef.current) {
+            previousFocusRef.current?.focus?.();
+            previousFocusRef.current = null;
+        }
+        wasOpenRef.current = isOpenNow;
+    });
+    const styling = (0, utilities_1.mergeStyles)(props, defaultStyles);
+    if (!open || count === 0)
+        return null;
+    // Drag-to-pan when zoomed in.
+    const onPointerDown = (e) => {
+        if (zoom <= zoomMin)
+            return;
+        // Block the browser defaults (native image drag, text selection) that would cancel the
+        // pointermove stream, and capture the pointer so the drag survives leaving the image bounds.
+        e.preventDefault();
+        e.currentTarget?.setPointerCapture?.(e.pointerId);
+        dragRef.current = { startX: e.clientX, startY: e.clientY, baseX: pan.x, baseY: pan.y };
+    };
+    const onPointerMove = (e) => {
+        if (!dragRef.current)
+            return;
+        setPan({ x: dragRef.current.baseX + (e.clientX - dragRef.current.startX), y: dragRef.current.baseY + (e.clientY - dragRef.current.startY) });
+    };
+    const endDrag = () => {
+        dragRef.current = null;
+    };
+    // Dismiss when the dark backdrop itself is clicked (not the image or a control). Works on
+    // the overlay root and the stage, both of which are `e.currentTarget` only for backdrop hits.
+    const onBackdropClick = (e) => {
+        if (e.target === e.currentTarget)
+            onClose && onClose();
+    };
+    // Mobile: horizontal touch-swipe paginates (only when not zoomed — zoom uses drag-to-pan).
+    const onTouchStart = (e) => {
+        if (e.touches && e.touches.length === 1) {
+            touchRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+        }
+    };
+    const onTouchEnd = (e) => {
+        const start = touchRef.current;
+        touchRef.current = null;
+        if (!start || zoom > zoomMin || count <= 1)
+            return;
+        const touch = e.changedTouches && e.changedTouches[0];
+        if (!touch)
+            return;
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        // Require a dominantly-horizontal swipe past the threshold.
+        if (Math.abs(dx) > swipeThreshold && Math.abs(dx) > Math.abs(dy)) {
+            if (dx < 0)
+                showNext();
+            else
+                showPrev();
+        }
+    };
+    const currentSrc = images[index];
+    return (0, compat_1.createPortal)((0, jsx_runtime_1.jsx)(providers_1.CacheProvider, { children: (0, jsx_runtime_1.jsxs)("div", { ...styling, className: (0, classnames_1.default)('ss__gallery', className, internalClassName), role: "dialog", "aria-modal": "true", ...mergedLang.gallery?.attributes, ref: (e) => {
+                rootRef.current = e;
+                (0, hooks_2.useA11y)(e, 0, true, () => onClose && onClose());
+            }, onClick: onBackdropClick, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__toolbar", children: [count > 1 && ((0, jsx_runtime_1.jsxs)("span", { className: "ss__gallery__counter", children: [index + 1, " / ", count] })), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-out", internalClassName: "ss__gallery__button ss__gallery__zoom-out", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'minus', color: 'currentColor' }, lang: { button: lang.zoomOutButton }, disabled: zoom <= zoomMin, onClick: zoomOut, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "zoom-in", internalClassName: "ss__gallery__button ss__gallery__zoom-in", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'plus', color: 'currentColor' }, lang: { button: lang.zoomInButton }, disabled: zoom >= zoomMax, onClick: zoomIn, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { name: "close", internalClassName: "ss__gallery__button ss__gallery__close", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.12)", borderColor: "transparent", icon: { icon: 'close', color: 'currentColor' }, lang: { button: lang.closeButton }, onClick: () => onClose && onClose(), theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "ss__gallery__stage", onClick: onBackdropClick, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: [count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "prev", internalClassName: "ss__gallery__nav ss__gallery__nav--prev", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-left', color: 'currentColor' }, lang: { button: lang.prevButton }, onClick: showPrev, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) })), (0, jsx_runtime_1.jsx)(Image_1.Image, { internalClassName: "ss__gallery__image", src: currentSrc, alt: alt || '', draggable: false, style: {
+                                transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                                cursor: zoom > zoomMin ? (dragRef.current ? 'grabbing' : 'grab') : 'default',
+                            }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerLeave: endDrag, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }), count > 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { name: "next", internalClassName: "ss__gallery__nav ss__gallery__nav--next", color: "#fff", backgroundColor: "rgba(255, 255, 255, 0.06)", borderColor: "transparent", icon: { icon: 'angle-right', color: 'currentColor' }, lang: { button: lang.nextButton }, onClick: showNext, theme: props.theme, treePath: props.treePath, ...(0, utilities_1.defined)({ disableStyles: props.disableStyles }) }))] })] }) }), document.body);
+});

package/dist/cjs/components/src/components/Molecules/Gallery/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Gallery"), exports);

package/dist/cjs/components/src/components/Molecules/Modal/Modal.js

@@ -118,11 +118,28 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
             document.body.style.overflow = '';
         };
     }, [showContent, lockScroll]);
+    // The resize listener below is registered once (on mount), so it must read the open/lock state
+    // through refs — capturing `showContent` directly would freeze its mount-time value in the
+    // listener closure. The quickview modal mounts open, so that stale `true` would re-lock the
+    // page on any resize after the modal was closed.
+    const showContentRef = (0, hooks_1.useRef)(showContent);
+    const lockScrollRef = (0, hooks_1.useRef)(lockScroll);
+    showContentRef.current = showContent;
+    lockScrollRef.current = lockScroll;
     (0, hooks_1.useEffect)(() => {
         const existingButton = buttonSelector ? (typeof buttonSelector === 'string' ? document.querySelector(buttonSelector) : buttonSelector) : null;
+        // Re-asserts the scroll lock after a resize: other components (e.g. Slideout) write
+        // `document.body.style.overflow` on render and can clobber the lock while the modal is open.
+        // The delay lets those renders settle first; `unmounted` keeps a pending re-lock from firing
+        // after cleanup has already released the body.
+        let unmounted = false;
+        let overflowTimeout;
         const debouncedHandleResize = (0, snap_toolbox_1.debounce)(() => {
-            setTimeout(() => {
-                if (showContent && lockScroll) {
+            clearTimeout(overflowTimeout);
+            overflowTimeout = setTimeout(() => {
+                if (unmounted)
+                    return;
+                if (showContentRef.current && lockScrollRef.current) {
                     document.body.style.overflow = 'hidden';
                 }
                 else {
@@ -141,6 +158,8 @@ exports.Modal = (0, mobx_react_lite_1.observer)((properties) => {
         }
         window.addEventListener('resize', debouncedHandleResize);
         return () => {
+            unmounted = true;
+            clearTimeout(overflowTimeout);
             window.removeEventListener('resize', debouncedHandleResize);
             if (existingButton) {
                 existingButton.removeEventListener('click', clickListener);

package/dist/cjs/components/src/components/Molecules/OverlayBadge/OverlayBadge.js

@@ -100,7 +100,7 @@ exports.OverlayBadge = (0, mobx_react_lite_1.observer)((properties) => {
             name: slot.name,
             top: index == 0,
             bottom: index == sectionSlots.length - 1,
-            badges: result?.display.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
+            badges: result?.display?.badges?.atLocation(`${section}/${slot.tag}`).slice(0, limit),
         }))
             .filter((slot) => slot.badges?.length);
         return {