@athoscommerce/snap-preact 1.11.0 → 1.12.0

package/dist/esm/components/src/components/Atoms/ProductDetail/ProductDetail.d.ts

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+import { ComponentProps } from '../../../types';
+import type { Product } from '@athoscommerce/snap-store-mobx';
+export declare const isCorePriceField: (field: string) => boolean;
+export declare const getProductFieldValue: (result: Product | undefined, field: string) => unknown;
+export declare const renderDetailValue: (value: unknown) => string;
+export declare const ProductDetail: ((properties: ProductDetailProps) => import("@emotion/react/jsx-runtime").JSX.Element | h.JSX.Element | null) & {
+    displayName: string;
+};
+export type ProductDetailProps = {
+    result?: Product;
+    field: string;
+} & ProductDetailTemplatesLegalProps & ComponentProps<ProductDetailProps>;
+export type ProductDetailTemplatesLegalProps = {
+    html?: boolean;
+    tag?: string;
+};
+//# sourceMappingURL=ProductDetail.d.ts.map

package/dist/esm/components/src/components/Atoms/ProductDetail/ProductDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetail.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/ProductDetail/ProductDetail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAQ3B,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAM7D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAQ9D,eAAO,MAAM,gBAAgB,UAAW,MAAM,KAAG,OAUhD,CAAC;AAQF,eAAO,MAAM,oBAAoB,WAAY,OAAO,GAAG,SAAS,SAAS,MAAM,KAAG,OAgBjF,CAAC;AAIF,eAAO,MAAM,iBAAiB,UAAW,OAAO,KAAG,MAWlD,CAAC;AAMF,eAAO,MAAM,aAAa,gBAAyB,kBAAkB;;CAmDnE,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACd,GAAG,gCAAgC,GACnC,cAAc,CAAC,kBAAkB,CAAC,CAAC;AAEpC,MAAM,MAAM,gCAAgC,GAAG;IAE9C,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,GAAG,CAAC,EAAE,MAAM,CAAC;CACb,CAAC"}

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx } 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 { mergeProps, mergeStyles } from '../../../utilities';
+import { useCustomComponentOverride } from '../../../hooks';
+import { fieldNameToComponentName } from '@athoscommerce/snap-toolbox';
+import { Price } from '../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.
+export 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';
+};
+// 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`.
+export 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;
+};
+// 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.
+export const renderDetailValue = (value) => {
+    if (value === null || value === undefined)
+        return '';
+    if (Array.isArray(value) || 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);
+};
+const defaultStyles = () => {
+    return css({});
+};
+export const ProductDetail = observer((properties) => {
+    const globalTheme = useTheme();
+    const globalTreePath = useTreePath();
+    const defaultProps = {
+        treePath: globalTreePath,
+        // the field's final segment names the component (`productDetail.<name>` theme selectors)
+        name: properties.field ? fieldNameToComponentName(properties.field.split('.').pop() || '') : undefined,
+    };
+    const props = mergeProps('productDetail', globalTheme, defaultProps, properties);
+    const { result, field, name, html, tag, className, internalClassName } = props;
+    const { overrideElement, shouldRenderDefault } = useCustomComponentOverride('productDetail', props);
+    if (!shouldRenderDefault) {
+        return overrideElement;
+    }
+    const styling = mergeStyles(props, defaultStyles);
+    const rawValue = getProductFieldValue(result, field);
+    const value = renderDetailValue(rawValue);
+    if (!value)
+        return null;
+    const isPrice = 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 = classnames('ss__product-detail', modifier && `ss__product-detail--${modifier}`, tag && `ss__product-detail--${tag}`, className, internalClassName);
+    return (_jsx(CacheProvider, { children: html ? (_jsx("div", { ...styling, className: classNames, dangerouslySetInnerHTML: { __html: value } })) : (_jsx("div", { ...styling, className: classNames, children: isPrice ? _jsx(Price, { value: rawValue, treePath: props.treePath }) : value })) }));
+});

package/dist/esm/components/src/components/Atoms/ProductDetail/index.d.ts

@@ -0,0 +1,3 @@
+export { ProductDetail } from './ProductDetail';
+export type { ProductDetailProps, ProductDetailTemplatesLegalProps } from './ProductDetail';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/src/components/Atoms/ProductDetail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/ProductDetail/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,3 @@
+// 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.
+export { ProductDetail } from './ProductDetail';

package/dist/esm/components/src/components/Atoms/TemplateSelect/TemplateSelect.d.ts

@@ -9,7 +9,7 @@ export declare const TemplateSelect: ((properties: TemplateSelectProps) => impor
 export interface TemplateSelectProps {
     templatesStore: TemplatesStore;
     target: TargetStore;
-    controller: Controllers;
+    controller?: Controllers;
     snap: SnapTemplates;
     theme?: Theme;
 }

package/dist/esm/components/src/components/Atoms/TemplateSelect/TemplateSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateSelect.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/TemplateSelect/TemplateSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAmD,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mDAAmD,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CAyCrE,CAAC;AACH,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;IACxB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACd"}
+{"version":3,"file":"TemplateSelect.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Atoms/TemplateSelect/TemplateSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,gCAAgC,CAAC;AAC9E,OAAO,EAAmD,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC5F,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAsB,MAAM,mDAAmD,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,MAAM,iDAAiD,CAAC;AAE9E,eAAO,MAAM,cAAc,gBAAyB,mBAAmB;;CA6CrE,CAAC;AACH,MAAM,WAAW,mBAAmB;IACnC,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACd"}

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

@@ -6,7 +6,9 @@ export const TemplateSelect = 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);
@@ -15,11 +17,18 @@ export const TemplateSelect = 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 === ControllerTypes.search || controller.type === ControllerTypes.autocomplete
+    const tabManager = controller?.type === ControllerTypes.search || controller?.type === 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 ? (_jsx(SnapProvider, { snap: snap, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(ControllerProvider, { controller: controller, children: _jsx("div", { className: "ss__template-select", children: _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 = (_jsx("div", { className: "ss__template-select", children: _jsx(Component, { controller: controller, tabManager: tabManager, ...(tabName !== undefined ? { name: tabName } : {}), ...otherProps }) }));
+    return (_jsx(SnapProvider, { snap: snap, children: _jsx(ThemeProvider, { theme: theme, children: controller ? _jsx(ControllerProvider, { controller: controller, children: content }) : content }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CalloutBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAG3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAqB9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA4CjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;CAChB,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"CalloutBadge.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/CalloutBadge/CalloutBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAO3B,OAAO,EAAE,cAAc,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAI3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAqB9D,eAAO,MAAM,YAAY,gBAAyB,iBAAiB;;CA8CjE,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,OAAO,CAAC;CAChB,GAAG,+BAA+B,GAClC,cAAc,CAAC,iBAAiB,CAAC,CAAC;AACnC,MAAM,MAAM,+BAA+B,GAAG;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}

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

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useTheme, CacheProvider, useSnap, useTreePath } from '../../../providers';
 import { defaultBadgeComponentMap, mergeProps, mergeStyles } from '../../../utilities';
+import { fieldNameToComponentName } from '@athoscommerce/snap-toolbox';
 import { useComponent, useCustomComponentOverride } from '../../../hooks';
 const defaultStyles = () => {
     return css({
@@ -26,6 +27,8 @@ export const CalloutBadge = observer((properties) => {
     const globalTreePath = useTreePath();
     const defaultProps = {
         // default props
+        // a custom tag names the component (`calloutBadge.<tag>` theme selectors); default usage stays unnamed
+        name: properties.tag ? fieldNameToComponentName(properties.tag) : undefined,
         tag: 'callout',
         limit: 1,
         treePath: globalTreePath,
@@ -42,7 +45,7 @@ export const CalloutBadge = observer((properties) => {
         ...props.componentMap,
     };
     const styling = 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 (_jsx(CacheProvider, { children: _jsx("div", { ...styling, className: classnames('ss__callout-badge', `ss__callout-badge--${tag?.replace('/', '-')}`, className, internalClassName), children: badges.map((badge, badgeIndex) => (_jsx(BadgeRenderer, { badge: badge, badgeComponentMap: badgeComponentMap, treePath: treePath }, `${badge.component}-${badgeIndex}`))) }) }));
     }

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

@@ -0,0 +1,28 @@
+import { ComponentProps } from '../../../types';
+import { Lang } from '../../../hooks';
+export declare const Gallery: ((properties: GalleryProps) => import("preact").VNode<any> | null) & {
+    displayName: string;
+};
+export type GalleryProps = {
+    images: string[];
+    open: boolean;
+    startIndex?: number;
+    alt?: string;
+    lang?: Partial<GalleryLang>;
+} & GalleryTemplatesLegalProps & ComponentProps<GalleryProps>;
+export type GalleryTemplatesLegalProps = {
+    onClose?: () => void;
+    zoomMin?: number;
+    zoomMax?: number;
+    zoomStep?: number;
+    swipeThreshold?: number;
+};
+export interface GalleryLang {
+    gallery: Lang<never>;
+    zoomOutButton: Lang<never>;
+    zoomInButton: Lang<never>;
+    closeButton: Lang<never>;
+    prevButton: Lang<never>;
+    nextButton: Lang<never>;
+}
+//# sourceMappingURL=Gallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../../../../../components/src/components/Molecules/Gallery/Gallery.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAe,MAAM,gBAAgB,CAAC;AAE7D,OAAO,EAAE,IAAI,EAAoB,MAAM,gBAAgB,CAAC;AA8FxD,eAAO,MAAM,OAAO,gBAAyB,YAAY;;CAsTvD,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC5B,GAAG,0BAA0B,GAC7B,cAAc,CAAC,YAAY,CAAC,CAAC;AAE9B,MAAM,MAAM,0BAA0B,GAAG;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,WAAW;IAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACzB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;CACxB"}

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.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;AAE3E,OAAO,KAAK,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAEzH,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"}

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"}