@athoscommerce/snap-preact 1.11.0 → 1.12.1-beta.152

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

@@ -0,0 +1,292 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createPortal } from 'preact/compat';
+import { useState, useEffect, useRef } from 'preact/hooks';
+import { observer } from 'mobx-react-lite';
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import deepmerge from 'deepmerge';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { mergeProps, mergeStyles, defined } from '../../../utilities';
+import { useA11y, useLang } from '../../../hooks';
+import { Button } from '../../Atoms/Button';
+import { Image } from '../../Atoms/Image';
+const defaultStyles = () => {
+    return 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,
+        },
+    });
+};
+export const Gallery = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        startIndex: 0,
+        zoomMin: 1,
+        zoomMax: 4,
+        zoomStep: 0.5,
+        swipeThreshold: 40,
+    };
+    const props = 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] = useState(startIndex || 0);
+    const [zoom, setZoom] = useState(zoomMin);
+    const [pan, setPan] = useState({ x: 0, y: 0 });
+    const dragRef = useRef(null);
+    const touchRef = 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 = deepmerge(defaultLang, props.lang || {});
+    const mergedLang = useLang(lang, {});
+    // Reset to the clicked image (and clear zoom/pan) whenever the gallery opens or the start changes.
+    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.
+    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 = useRef(null);
+    const previousFocusRef = useRef(null);
+    const wasOpenRef = useRef(false);
+    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 = 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 createPortal(_jsx(CacheProvider, { children: _jsxs("div", { ...styling, className: classnames('ss__gallery', className, internalClassName), role: "dialog", "aria-modal": "true", ...mergedLang.gallery?.attributes, ref: (e) => {
+                rootRef.current = e;
+                useA11y(e, 0, true, () => onClose && onClose());
+            }, onClick: onBackdropClick, children: [_jsxs("div", { className: "ss__gallery__toolbar", children: [count > 1 && (_jsxs("span", { className: "ss__gallery__counter", children: [index + 1, " / ", count] })), _jsx(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, ...defined({ disableStyles: props.disableStyles }) }), _jsx(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, ...defined({ disableStyles: props.disableStyles }) }), _jsx(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, ...defined({ disableStyles: props.disableStyles }) })] }), _jsxs("div", { className: "ss__gallery__stage", onClick: onBackdropClick, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, children: [count > 1 && (_jsx(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, ...defined({ disableStyles: props.disableStyles }) })), _jsx(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, ...defined({ disableStyles: props.disableStyles }) }), count > 1 && (_jsx(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, ...defined({ disableStyles: props.disableStyles }) }))] })] }) }), document.body);
+});

package/dist/esm/components/src/components/Molecules/Gallery/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Gallery';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/Gallery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Gallery/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

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

@@ -0,0 +1 @@
+export * from './Gallery';

package/dist/esm/components/src/components/Molecules/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA2KnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAuC7D,eAAO,MAAM,KAAK,gBAAyB,UAAU;;CA8LnD,CAAC;AAEH,MAAM,MAAM,UAAU,GAAG,wBAAwB,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/E,MAAM,MAAM,wBAAwB,GAAG;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
@@ -112,11 +112,28 @@ export const Modal = 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 = useRef(showContent);
+    const lockScrollRef = useRef(lockScroll);
+    showContentRef.current = showContent;
+    lockScrollRef.current = lockScroll;
     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 = debounce(() => {
-            setTimeout(() => {
-                if (showContent && lockScroll) {
+            clearTimeout(overflowTimeout);
+            overflowTimeout = setTimeout(() => {
+                if (unmounted)
+                    return;
+                if (showContentRef.current && lockScrollRef.current) {
                     document.body.style.overflow = 'hidden';
                 }
                 else {
@@ -135,6 +152,8 @@ export const Modal = observer((properties) => {
         }
         window.addEventListener('resize', debouncedHandleResize);
         return () => {
+            unmounted = true;
+            clearTimeout(overflowTimeout);
             window.removeEventListener('resize', debouncedHandleResize);
             if (existingButton) {
                 existingButton.removeEventListener('click', clickListener);

package/dist/esm/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts

@@ -1,13 +1,13 @@
 import { ComponentChildren, h } from 'preact';
 import { ComponentProps, ComponentMap } from '../../../types';
-import type { AutocompleteController, RecommendationController, SearchController } from '@athoscommerce/snap-controller';
+import type { AutocompleteController, RecommendationController, SearchController, ChatController } from '@athoscommerce/snap-controller';
 import type { Product } from '@athoscommerce/snap-store-mobx';
 export declare const OverlayBadge: ((properties: OverlayBadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
     displayName: string;
 };
 export type OverlayBadgeProps = {
     result: Product;
-    controller: SearchController | AutocompleteController | RecommendationController;
+    controller?: SearchController | AutocompleteController | RecommendationController | ChatController;
 } & OverlayBadgeTemplatesLegalProps & ComponentProps<OverlayBadgeProps>;
 export type OverlayBadgeTemplatesLegalProps = {
     renderEmpty?: boolean;

package/dist/esm/components/src/components/Molecules/OverlayBadge/OverlayBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACzH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAgE9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,CAAC;CACjF,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"OverlayBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/OverlayBadge/OverlayBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO9C,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AACzI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAgE9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CAwGjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,gBAAgB,GAAG,sBAAsB,GAAG,wBAAwB,GAAG,cAAc,CAAC;CACnG,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B,CAAC"}

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

@@ -94,7 +94,7 @@ export const OverlayBadge = 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 {

package/dist/esm/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.d.ts

@@ -0,0 +1,14 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import type { Product, DisplayFieldConfig } from '@athoscommerce/snap-store-mobx';
+export type { DisplayFieldConfig };
+export declare const ProductDetailTable: ((properties: ProductDetailTableProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type ProductDetailTableProps = {
+    result?: Product;
+} & ProductDetailTableTemplatesLegalProps & ComponentProps<ProductDetailTableProps>;
+export type ProductDetailTableTemplatesLegalProps = {
+    displayFields?: DisplayFieldConfig[];
+};
+//# sourceMappingURL=ProductDetailTable.d.ts.map

package/dist/esm/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetailTable.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ProductDetailTable/ProductDetailTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAS7D,OAAO,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIlF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AA+CnC,eAAO,MAAM,kBAAkB,gBAAyB,uBAAuB;;CA2E7E,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,qCAAqC,GACxC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAEzC,MAAM,MAAM,qCAAqC,GAAG;IAEnD,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACrC,CAAC"}

package/dist/esm/components/src/components/Molecules/ProductDetailTable/ProductDetailTable.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { css } from '@emotion/react';
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { isObservableArray } from 'mobx';
+import { useTheme, CacheProvider, useTreePath } from '../../../providers';
+import { defined, mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+import { ProductDetail } from '../../Atoms/ProductDetail';
+import { getProductFieldValue, renderDetailValue } from '../../Atoms/ProductDetail/ProductDetail';
+import { Price } from '../../Atoms/Price';
+import { Image } from '../../Atoms/Image';
+import { Rating } from '../Rating';
+const defaultStyles = () => {
+    return css({
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '0.9em',
+        '& tr': {
+            borderBottom: '1px solid #eee',
+        },
+        '& tr:last-of-type': {
+            borderBottom: 'none',
+        },
+        '& th, & td': {
+            padding: '10px 0',
+            textAlign: 'left',
+            verticalAlign: 'top',
+        },
+        '& th': {
+            width: '40%',
+            paddingRight: '16px',
+            fontWeight: 500,
+            color: '#666',
+            textTransform: 'uppercase',
+            fontSize: '0.85em',
+            letterSpacing: '0.02em',
+        },
+        '& td': {
+            color: '#1a1a1a',
+            // Typed values render components whose defaults center them (Rating flex-centers its
+            // stars, Image stretches and letterboxes via objectFit) — left-align both so every
+            // display type lines up with the plain text values.
+            '& .ss__rating': {
+                justifyContent: 'flex-start',
+            },
+            '& .ss__image': {
+                alignItems: 'flex-start',
+                // Cap images at a row-scale thumbnail (width stays auto, preserving aspect ratio)
+                // so a full-size product image can't dwarf the table.
+                '& img': {
+                    maxHeight: '100px',
+                },
+            },
+        },
+    });
+};
+export const ProductDetailTable = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+    };
+    const props = mergeProps('productDetailTable', globalTheme, defaultProps, properties);
+    const { result, displayFields, disableStyles, className, internalClassName, treePath } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('productDetailTable', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    // Render only the configured fields that resolve to a non-empty value (preserves the opt-in
+    // behaviour: with no displayFields, nothing renders).
+    const displayedFields = (displayFields || []).filter((detail) => renderDetailValue(getProductFieldValue(result, detail.field)) !== '');
+    if (displayedFields.length === 0)
+        return null;
+    const renderValue = (detail) => {
+        const rawValue = getProductFieldValue(result, detail.field);
+        const componentProps = { theme: props.theme, treePath, ...defined({ disableStyles }) };
+        switch (detail.type) {
+            case 'price': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return _jsx(Price, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'rating': {
+                const value = Number(rawValue);
+                if (!isNaN(value)) {
+                    return _jsx(Rating, { value: value, ...componentProps });
+                }
+                break;
+            }
+            case 'image': {
+                // An image field may resolve to an array of URLs — display the first.
+                const src = Array.isArray(rawValue) || isObservableArray(rawValue) ? Array.from(rawValue)[0] : rawValue;
+                if (typeof src === 'string' && src) {
+                    return _jsx(Image, { src: src, alt: detail.label || detail.field, ...componentProps });
+                }
+                break;
+            }
+            case 'html':
+                return _jsx(ProductDetail, { result: result, field: detail.field, html: true, ...componentProps });
+        }
+        // 'text' (the default) — and the fallback when a typed value doesn't fit its type.
+        return _jsx(ProductDetail, { result: result, field: detail.field, ...componentProps });
+    };
+    return (_jsx(CacheProvider, { children: _jsx("table", { ...styling, className: classnames('ss__product-detail-table', className, internalClassName), children: _jsx("tbody", { children: displayedFields.map((detail, index) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: detail.label ?? detail.field }), _jsx("td", { children: renderValue(detail) })] }, `${detail.field}-${index}`))) }) }) }));
+});

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProductDetailTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/ProductDetailTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/esm/components/src/components/Molecules/ProductDetailTable/index.js

@@ -0,0 +1 @@
+export * from './ProductDetailTable';

package/dist/esm/components/src/components/Molecules/QuantityPicker/QuantityPicker.d.ts

@@ -0,0 +1,43 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const QuantityPicker: ((properties: QuantityPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+type QuantityPickerChangeEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.FocusEvent<HTMLInputElement>;
+export type QuantityPickerProps = {
+    lang?: Partial<QuantityPickerLang>;
+    value?: number;
+    startValue?: number;
+} & QuantityPickerTemplatesLegalProps & ComponentProps<QuantityPickerProps>;
+export type QuantityPickerTemplatesLegalProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    hideButtons?: boolean;
+    label?: string;
+    onChange?: (e: QuantityPickerChangeEvent, value: number) => void;
+};
+export interface QuantityPickerLang {
+    quantityInput: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+    decrementButton: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+    incrementButton: Lang<{
+        quantity: number;
+        min: number;
+        max?: number;
+        disabled?: boolean;
+    }>;
+}
+export {};
+//# sourceMappingURL=QuantityPicker.d.ts.map

package/dist/esm/components/src/components/Molecules/QuantityPicker/QuantityPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityPicker.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/QuantityPicker/QuantityPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAuC,MAAM,gBAAgB,CAAC;AA6B3E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAwLrE,CAAC;AAMH,KAAK,yBAAyB,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;AAEhH,MAAM,MAAM,mBAAmB,GAAG;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,iCAAiC,GACpC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAErC,MAAM,MAAM,iCAAiC,GAAG;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,yBAAyB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjE,CAAC;AAEF,MAAM,WAAW,kBAAkB;IAClC,aAAa,EAAE,IAAI,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;IACH,eAAe,EAAE,IAAI,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;IACH,eAAe,EAAE,IAAI,CAAC;QACrB,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC,CAAC;CACH"}