pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/Loading/Loading.js

@@ -1,24 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Center, Spinner, Text } from "@chakra-ui/react";
-import { css, keyframes } from "@emotion/react";
+import { Box, Text } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import Spinner from "../Spinner/Spinner.js";
+import Backdrop from "../Backdrop/Backdrop.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const colorTransition = keyframes `
-  0% {
-    color: black;
-  }
-  50% {
-    color: gray;
-  }
-  100% {
-    color: black;
-  }
+import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const pulse = keyframes `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
 `;
-export default function Loading({ text, isLoading, onlytext, container }) {
-    const theme = useCustomTheme();
+/** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
+export default function Loading({ text, isLoading, onlytext, container, variant = "frosted", allowBackgroundInteraction, }) {
+    const { colors } = useCustomTheme();
+    if (variant === "dim" && !onlytext) {
+        return (_jsx(Backdrop, { open: isLoading, loader: true, text: text, container: container, allowBackgroundInteraction: allowBackgroundInteraction }));
+    }
     if (!isLoading) {
         return null;
     }
-    return (_jsx(Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: _jsx(Center, { height: container ? "100%" : "100vh", children: !onlytext ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), _jsx(Text, { mt: "2", ml: "5", children: text })] })) : (_jsx(Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: css `
-              animation: ${colorTransition} 2s infinite;
-            `, children: text })) }) }));
+    return (_jsx(Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...overlayScrimStyles(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? (_jsx(Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: reducedMotionSx(), children: text })) : (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "sm", children: text })] })) }));
 }

package/dist/esm/Components/MediaGallery/MediaFrame.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ImageOff, Play, Video } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import { GlassIconButton } from "./glass.js";
+import { frameKind, framePoster, parseEmbed } from "./mediaGalleryModel.js";
+const CENTER = { position: "absolute", inset: 0 };
+/** One frame: skeleton, then image fade-in with the ratio already reserved; broken images become a tile. */
+export const FrameImage = ({ src, alt, fit, eager, zoom, unavailableLabel, }) => {
+    const { colors } = useCustomTheme();
+    const [state, setState] = useState("loading");
+    const settle = useCallback((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setState("loaded");
+    }, []);
+    if (state === "failed") {
+        return (_jsxs(Flex, { ...CENTER, direction: "column", align: "center", justify: "center", gap: 2, color: colors.textMuted, role: "img", "aria-label": `${unavailableLabel}: ${alt}`, children: [_jsx(ImageOff, { size: 24, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "xs", children: unavailableLabel })] }));
+    }
+    return (_jsxs(_Fragment, { children: [state === "loading" && (_jsx(Box, { ...CENTER, "data-testid": "media-skeleton", "aria-hidden": true, children: _jsx(Skeletons, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) })), _jsx(Box, { as: "img", ref: settle, src: src, alt: alt, loading: eager ? "eager" : "lazy", decoding: "async", draggable: false, onLoad: () => setState("loaded"), onError: () => setState("failed"), ...CENTER, w: "100%", h: "100%", objectFit: fit, opacity: state === "loaded" ? 1 : 0, transform: zoom ? `scale(${zoom.scale})` : undefined, transformOrigin: zoom ? `${zoom.x}% ${zoom.y}%` : undefined, transition: transitionFor(["opacity", "transform"], "base"), sx: reducedMotionSx() })] }));
+};
+/** Image, or a video that shows its poster behind a play button until asked to play. */
+const MediaFrame = ({ media, alt, fit = "cover", active = true, eager = true, autoPlay = false, zoom, surface, playLabel, unavailableLabel, }) => {
+    const { colors } = useCustomTheme();
+    const kind = frameKind(media);
+    const [playing, setPlaying] = useState(autoPlay);
+    useEffect(() => {
+        if (!active)
+            setPlaying(false);
+    }, [active]);
+    const poster = framePoster(media);
+    let content;
+    if (kind === "image") {
+        content = _jsx(FrameImage, { src: media.src, alt: alt, fit: fit, eager: eager, zoom: zoom, unavailableLabel: unavailableLabel }, media.src);
+    }
+    else if (playing) {
+        const embed = parseEmbed(media.src);
+        content = embed ? (_jsx(Box, { as: "iframe", ...CENTER, w: "100%", h: "100%", border: "0", src: embed.src, title: alt, allow: "autoplay; encrypted-media; picture-in-picture; fullscreen", allowFullScreen: true })) : (_jsx(Box, { as: "video", ...CENTER, w: "100%", h: "100%", objectFit: "contain", src: media.src, poster: media.poster, controls: true, autoPlay: true, playsInline: true, "aria-label": alt }));
+    }
+    else {
+        content = (_jsxs(_Fragment, { children: [poster ? (_jsx(FrameImage, { src: poster, alt: alt, fit: fit, eager: eager, unavailableLabel: unavailableLabel }, poster)) : (_jsx(Flex, { ...CENTER, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: _jsx(Video, { size: 32 }) })), _jsx(GlassIconButton, { label: playLabel, icon: _jsx(Play, { size: 20, "aria-hidden": true, fill: "currentColor" }), onClick: () => setPlaying(true), size: 56, left: "calc(50% - 28px)", top: "calc(50% - 28px)", tabIndex: active ? 0 : -1 })] }));
+    }
+    return (_jsx(Box, { position: "relative", w: "100%", h: "100%", overflow: "hidden", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], "data-frame-kind": kind, children: content }));
+};
+export default MediaFrame;

package/dist/esm/Components/MediaGallery/MediaGallery.js

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight, ZoomIn } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+import MediaFrame from "./MediaFrame.js";
+import MediaThumb from "./MediaThumb.js";
+import MediaLightbox from "./MediaLightbox.js";
+import { GlassIconButton, GlassPill, glassStyles } from "./glass.js";
+import { CROSSFADE_MS, fadeIn } from "./motion.js";
+import { useContainerWidth } from "../Commerce/useContainerWidth.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import { clampIndex, frameKind, frameSignature, indexForKey, keyBelongsToTarget, resolveFrames } from "./mediaGalleryModel.js";
+import { defaultMediaGalleryLabels } from "./MediaGalleryProps.js";
+const WIDE_QUERY = "(min-width: 768px)";
+const WIDE_MIN_WIDTH = 560;
+const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+const MAX_DOTS = 8;
+const INNER_ZOOM = 2;
+const SETTLE_MS = 700;
+const HIDDEN_SCROLLBAR = { scrollbarWidth: "none", "&::-webkit-scrollbar": { display: "none" } };
+const revealWithin = (container, child, axis) => {
+    const [start, size, view] = axis === "x"
+        ? [child.offsetLeft, child.offsetWidth, container.clientWidth]
+        : [child.offsetTop, child.offsetHeight, container.clientHeight];
+    const key = axis === "x" ? "scrollLeft" : "scrollTop";
+    const at = container[key];
+    if (start < at)
+        container[key] = start;
+    else if (start + size > at + view)
+        container[key] = start + size - view;
+};
+const GallerySkeleton = ({ arrangement, aspectRatio, rounded, label }) => {
+    const rail = arrangement !== "swipe";
+    const vertical = arrangement === "thumbs-left";
+    return (_jsxs(Flex, { role: "status", "aria-label": label, direction: vertical ? "row" : "column", gap: 4, w: "100%", "data-testid": "media-gallery-skeleton", children: [rail && vertical && (_jsx(Flex, { direction: "column", gap: 3, w: "72px", flexShrink: 0, children: [0, 1, 2, 3].map((n) => (_jsx(Skeletons, { type: "skeleton", height: "90px", width: "72px", borderRadius: "xl" }, n))) })), _jsx(Box, { flex: 1, minW: 0, sx: { aspectRatio }, borderRadius: rounded ? "2xl" : 0, overflow: "hidden", children: _jsx(Skeletons, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) }), rail && !vertical && (_jsx(Flex, { gap: 3, children: [0, 1, 2, 3].map((n) => (_jsx(Skeletons, { type: "skeleton", height: "80px", width: "64px", borderRadius: "xl" }, n))) }))] }));
+};
+/** Product media carousel: scroll-snap track, thumbnail rail or dots, lightbox, colour-linked frame sets. */
+const MediaGallery = ({ media, layout = "auto", aspectRatio = "4/5", zoom = "lightbox", index, defaultIndex = 0, onIndexChange, activeMediaIds, badges, actions, sticky = false, stickyTop = 24, rounded, isLoading = false, labels: labelOverrides, lightboxLabels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const rootRef = useRef(null);
+    const containerWidth = useContainerWidth(rootRef);
+    const windowWide = useMatchMedia(WIDE_QUERY, false);
+    const wide = containerWidth === undefined ? windowWide : containerWidth >= WIDE_MIN_WIDTH;
+    const finePointer = useMatchMedia(FINE_POINTER_QUERY, false);
+    const labels = { ...defaultMediaGalleryLabels, ...labelOverrides };
+    const arrangement = layout === "auto" ? (wide ? "thumbs-left" : "swipe") : layout;
+    const isSwipe = arrangement === "swipe";
+    const squared = rounded === undefined ? isSwipe : !rounded;
+    const activeKey = JSON.stringify(activeMediaIds !== null && activeMediaIds !== void 0 ? activeMediaIds : null);
+    const frames = useMemo(() => { var _a; return resolveFrames(media, (_a = JSON.parse(activeKey)) !== null && _a !== void 0 ? _a : undefined); }, [media, activeKey]);
+    const signature = frameSignature(frames);
+    const count = frames.length;
+    const isControlled = index !== undefined;
+    const [ownIndex, setOwnIndex] = useState(defaultIndex);
+    const current = clampIndex(isControlled ? index : ownIndex, count);
+    const latest = useRef(current);
+    latest.current = current;
+    const onChangeRef = useRef(onIndexChange);
+    onChangeRef.current = onIndexChange;
+    const commit = (next) => {
+        var _a;
+        const target = clampIndex(next, count);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwnIndex(target);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, target);
+    };
+    const commitRef = useRef(commit);
+    commitRef.current = commit;
+    const trackRef = useRef(null);
+    const railRef = useRef(null);
+    const settling = useRef(null);
+    const settleTimer = useRef();
+    const alignedTrack = useRef(null);
+    const lightboxReturn = useRef(null);
+    const [lightboxOpen, setLightboxOpen] = useState(false);
+    const [inner, setInner] = useState({ on: false, x: 50, y: 50 });
+    const [fadeKey, setFadeKey] = useState(0);
+    const seenSignature = useRef(signature);
+    useEffect(() => {
+        if (seenSignature.current === signature)
+            return;
+        seenSignature.current = signature;
+        setFadeKey((key) => key + 1);
+        commitRef.current(0);
+    }, [signature]);
+    useEffect(() => setInner((state) => (state.on ? { ...state, on: false } : state)), [current, signature]);
+    useEffect(() => () => window.clearTimeout(settleTimer.current), []);
+    useLayoutEffect(() => {
+        var _a;
+        const track = trackRef.current;
+        const width = (_a = track === null || track === void 0 ? void 0 : track.clientWidth) !== null && _a !== void 0 ? _a : 0;
+        if (!track || !width)
+            return;
+        const firstPass = alignedTrack.current !== track;
+        alignedTrack.current = track;
+        const left = current * width;
+        if (Math.abs(track.scrollLeft - left) < 2)
+            return;
+        settling.current = current;
+        window.clearTimeout(settleTimer.current);
+        settleTimer.current = window.setTimeout(() => {
+            settling.current = null;
+        }, SETTLE_MS);
+        if (firstPass || reduced || typeof track.scrollTo !== "function")
+            track.scrollLeft = left;
+        else
+            track.scrollTo({ left, behavior: "smooth" });
+    }, [current, fadeKey, arrangement, reduced]);
+    useEffect(() => {
+        const rail = railRef.current;
+        const selected = rail === null || rail === void 0 ? void 0 : rail.querySelector('[aria-current="true"]');
+        if (rail && selected)
+            revealWithin(rail, selected, arrangement === "thumbs-left" ? "y" : "x");
+    }, [current, fadeKey, arrangement]);
+    const onScroll = () => {
+        const track = trackRef.current;
+        if (!track || !track.clientWidth)
+            return;
+        const at = clampIndex(Math.round(track.scrollLeft / track.clientWidth), count);
+        if (settling.current !== null) {
+            if (at === settling.current)
+                settling.current = null;
+            return;
+        }
+        commit(at);
+    };
+    const onKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey || keyBelongsToTarget(event.target))
+            return;
+        const next = indexForKey(event.key, latest.current, count);
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        commit(next);
+    };
+    const openLightbox = (event) => {
+        lightboxReturn.current = event.currentTarget;
+        setLightboxOpen(true);
+    };
+    const toggleInner = (event) => {
+        const box = event.currentTarget.getBoundingClientRect();
+        const x = box.width ? ((event.clientX - box.left) / box.width) * 100 : 50;
+        const y = box.height ? ((event.clientY - box.top) / box.height) * 100 : 50;
+        setInner((state) => ({ on: !state.on, x, y }));
+    };
+    const panInner = (event) => {
+        if (!inner.on || event.pointerType !== "mouse")
+            return;
+        const box = event.currentTarget.getBoundingClientRect();
+        if (!box.width || !box.height)
+            return;
+        setInner({ on: true, x: ((event.clientX - box.left) / box.width) * 100, y: ((event.clientY - box.top) / box.height) * 100 });
+    };
+    const ratio = aspectRatio.replace("/", " / ");
+    const radius = squared ? 0 : "2xl";
+    const showArrows = count > 1 && (finePointer || !isSwipe);
+    const showRail = count > 1 && !isSwipe;
+    const arrowSize = isSwipe ? 36 : 44;
+    const arrowInset = isSwipe ? 12 : 16;
+    const currentFrame = frames[current];
+    const zoomable = zoom !== "none" && currentFrame !== undefined && frameKind(currentFrame) === "image";
+    if (isLoading)
+        return _jsx(GallerySkeleton, { arrangement: arrangement, aspectRatio: ratio, rounded: !squared, label: labels.loading });
+    const thumbRing = { gap: colors.background[50], ink: colors.header[900] };
+    const thumbs = (width, height) => frames.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, count, frame.alt), selected: position === current, onSelect: () => commit(position), width: width, height: height, ring: thumbRing }, frame.id)));
+    const glassDots = glassStyles(colors);
+    const focusInset = { outline: "2px solid transparent", boxShadow: insetFocusRingShadow(colors) };
+    const well = (_jsxs(Box, { position: "relative", flex: 1, minW: 0, overflow: "hidden", isolation: "isolate", borderRadius: radius, bg: colors.background[100], sx: { aspectRatio: ratio }, "data-testid": "media-gallery-well", children: [_jsxs(Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
+                    settling.current = null;
+                }, outline: "none", _focusVisible: focusInset, sx: {
+                    scrollSnapType: "x mandatory",
+                    overscrollBehaviorX: "contain",
+                    ...HIDDEN_SCROLLBAR,
+                    ...reducedMotionSx(),
+                }, "data-testid": "media-gallery-track", children: [frames.map((frame, position) => {
+                        var _a;
+                        const isCurrent = position === current;
+                        const kind = frameKind(frame);
+                        const alt = (_a = frame.alt) !== null && _a !== void 0 ? _a : labels.image(position + 1, count);
+                        const view = (_jsx(MediaFrame, { media: frame, alt: alt, active: isCurrent, eager: Math.abs(position - current) <= 1, zoom: zoom === "inner" && isCurrent && inner.on ? { scale: INNER_ZOOM, x: inner.x, y: inner.y } : undefined, playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }));
+                        const interactive = zoom !== "none" && kind === "image";
+                        return (_jsx(Box, { role: "group", "aria-roledescription": "slide", "aria-label": labels.slide(position + 1, count), "aria-hidden": isCurrent ? undefined : true, flex: "0 0 100%", h: "100%", position: "relative", opacity: reduced && !isCurrent ? 0 : 1, transition: reduced ? transitionFor(["opacity"], "fast") : undefined, sx: { scrollSnapAlign: "start", scrollSnapStop: "always" }, children: interactive ? (_jsx(Box, { as: "button", type: "button", w: "100%", h: "100%", p: 0, border: "0", bg: "transparent", display: "block", overflow: "hidden", cursor: "zoom-in", tabIndex: isCurrent ? 0 : -1, "aria-label": zoom === "lightbox" ? labels.openLightbox(position + 1, count) : labels.zoomImage(position + 1, count), "aria-haspopup": zoom === "lightbox" ? "dialog" : undefined, "aria-pressed": zoom === "inner" ? isCurrent && inner.on : undefined, onClick: zoom === "lightbox" ? openLightbox : toggleInner, onPointerMove: zoom === "inner" ? panInner : undefined, outline: "none", _focusVisible: focusInset, sx: { cursor: zoom === "inner" && inner.on ? "zoom-out" : "zoom-in" }, children: view })) : (view) }, frame.id));
+                    }), count === 0 && _jsx(Box, { flex: "0 0 100%", bg: colors.background[100] })] }, fadeKey), badges && (_jsx(Box, { position: "absolute", top: 3, left: 3, zIndex: 2, pointerEvents: "none", "data-testid": "media-gallery-badges", children: badges })), actions && (_jsx(Box, { position: "absolute", top: 3, right: 3, zIndex: 3, "data-testid": "media-gallery-actions", children: actions })), showArrows && (_jsxs(_Fragment, { children: [_jsx(GlassIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current - 1), isDisabled: current === 0, size: arrowSize, left: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 }), _jsx(GlassIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: arrowSize / 2, "aria-hidden": true }), onClick: () => commit(current + 1), isDisabled: current === count - 1, size: arrowSize, right: `${arrowInset}px`, top: `calc(50% - ${arrowSize / 2}px)`, zIndex: 2 })] })), count > 1 && isSwipe && count <= MAX_DOTS && (_jsx(Flex, { role: "group", "aria-label": labels.dots, position: "absolute", left: "50%", bottom: 4, transform: "translateX(-50%)", zIndex: 2, h: "28px", px: 1.5, align: "center", borderRadius: "full", ...glassDots, "data-testid": "media-gallery-dots", children: frames.map((frame, position) => {
+                    const selected = position === current;
+                    return (_jsx(Box, { as: "button", type: "button", onClick: () => commit(position), "aria-label": labels.image(position + 1, count), "aria-current": selected ? "true" : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", h: "28px", w: selected ? "30px" : "20px", p: 0, border: "0", bg: "transparent", cursor: "pointer", transition: transitionFor(["width"]), borderRadius: "full", sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Box, { as: "span", boxSize: "6px", borderRadius: "full", bg: "currentColor", opacity: selected ? 0.92 : 0.3, transform: selected ? "scaleX(2.4)" : "scaleX(1)", transition: transitionFor(["transform", "opacity"]) }) }, frame.id));
+                }) })), count > 1 && (_jsx(GlassPill, { ...(isSwipe ? { right: 4, bottom: "19px", height: 22 } : { left: 4, bottom: 4, height: 32 }), zIndex: 2, children: _jsx("span", { "aria-live": "polite", "data-testid": "media-gallery-counter", children: labels.counter(current + 1, count) }) })), !isSwipe && finePointer && zoomable && zoom === "lightbox" && (_jsxs(GlassPill, { right: 4, bottom: 4, height: 32, zIndex: 2, children: [_jsx(ZoomIn, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.zoomHint })] }))] }));
+    const rail = showRail &&
+        (arrangement === "thumbs-left" ? (_jsx(Box, { position: "relative", w: "72px", flexShrink: 0, alignSelf: "stretch", "data-testid": "media-gallery-rail", children: _jsx(Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, position: "absolute", inset: "-4px", p: "4px", direction: "column", gap: 3, overflowY: "auto", overflowX: "hidden", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, sx: { ...scrollbarStyles(colors, "hover"), ...reducedMotionSx() }, children: thumbs(72, 90) }, fadeKey) })) : (_jsx(Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, gap: 3, m: "-4px", p: "4px", overflowX: "auto", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, sx: { ...scrollbarStyles(colors, "hover"), ...reducedMotionSx() }, "data-testid": "media-gallery-rail", children: thumbs(64, 80) }, fadeKey)));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: rootRef, role: "region", "aria-roledescription": "carousel", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : labels.region, onKeyDown: onKeyDown, w: "100%", position: sticky ? "sticky" : "relative", top: sticky ? `${stickyTop}px` : undefined, alignSelf: sticky ? "flex-start" : undefined, "data-testid": testId, children: _jsxs(Flex, { direction: arrangement === "thumbs-left" ? "row" : "column", gap: 4, align: arrangement === "thumbs-left" ? "stretch" : undefined, children: [arrangement === "thumbs-left" && rail, well, arrangement === "thumbs-below" && rail] }) }), _jsx(MediaLightbox, { isOpen: lightboxOpen, onClose: () => setLightboxOpen(false), items: frames, index: current, onIndexChange: commit, finalFocusRef: lightboxReturn, labels: lightboxLabels })] }));
+};
+export default MediaGallery;

package/dist/esm/Components/MediaGallery/MediaGalleryProps.js

@@ -0,0 +1,17 @@
+export const defaultMediaGalleryLabels = {
+    region: "Product images",
+    slide: (position, total) => `${position} of ${total}`,
+    image: (position, total) => `Image ${position} of ${total}`,
+    frame: (position, total, alt) => `Image ${position} of ${total}${alt ? `: ${alt}` : ""}`,
+    previous: "Previous image",
+    next: "Next image",
+    dots: "Choose an image",
+    thumbnails: "Image thumbnails",
+    counter: (position, total) => `${position} / ${total}`,
+    zoomHint: "Click to zoom",
+    openLightbox: (position, total) => `View image ${position} of ${total} full screen`,
+    zoomImage: (position, total) => `Zoom image ${position} of ${total}`,
+    playVideo: "Play video",
+    imageUnavailable: "Image unavailable",
+    loading: "Loading product images",
+};

package/dist/esm/Components/MediaGallery/MediaLightbox.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import Modal, { ModalBody } from "../Modal/Modal.js";
+import ViewerIconButton from "../MediaViewer/components/ViewerIconButton.js";
+import { useViewerChrome } from "../MediaViewer/useViewerChrome.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import MediaFrame from "./MediaFrame.js";
+import MediaThumb from "./MediaThumb.js";
+import { fadeIn } from "./motion.js";
+import { clampIndex, indexForKey, keyBelongsToTarget } from "./mediaGalleryModel.js";
+import { defaultMediaLightboxLabels } from "./MediaLightboxProps.js";
+const SWIPE_MIN_PX = 50;
+/** Full-screen product media viewer: counter and close on top, arrows, thumbnail row, Esc and arrow keys. */
+const MediaLightbox = ({ isOpen, onClose, items, index, defaultIndex = 0, onIndexChange, finalFocusRef, labels: labelOverrides, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const chrome = useViewerChrome();
+    const reduced = usePrefersReducedMotion();
+    const labels = { ...defaultMediaLightboxLabels, ...labelOverrides };
+    const isControlled = index !== undefined;
+    const [own, setOwn] = useState(defaultIndex);
+    const total = items.length;
+    const current = clampIndex(isControlled ? index : own, total);
+    const latest = useRef(current);
+    latest.current = current;
+    const stageRef = useRef(null);
+    const stripRef = useRef(null);
+    const touchStartX = useRef(null);
+    const go = (next) => {
+        const target = clampIndex(next, total);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwn(target);
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(target);
+    };
+    useEffect(() => {
+        const strip = stripRef.current;
+        const selected = strip === null || strip === void 0 ? void 0 : strip.querySelector('[aria-current="true"]');
+        if (!strip || !selected)
+            return;
+        const left = selected.offsetLeft - strip.clientWidth / 2 + selected.offsetWidth / 2;
+        strip.scrollLeft = Math.max(0, left);
+    }, [current, isOpen]);
+    const onKeyDown = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey || keyBelongsToTarget(event.target))
+            return;
+        const next = indexForKey(event.key, latest.current, total);
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        go(next);
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStartX.current;
+        touchStartX.current = null;
+        if (start === null)
+            return;
+        const dx = event.changedTouches[0].clientX - start;
+        if (Math.abs(dx) > SWIPE_MIN_PX)
+            go(latest.current + (dx < 0 ? 1 : -1));
+    };
+    const item = items[current];
+    if (!item)
+        return null;
+    const alt = (_a = item.alt) !== null && _a !== void 0 ? _a : labels.image(current + 1, total);
+    const bar = { bg: overlayScrim(colors), color: chrome.ink };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: overlayScrim(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: NUMERIC_TEXT, children: labels.counter(current + 1, total) }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
+                        touchStartX.current = event.touches.length === 1 ? event.touches[0].clientX : null;
+                    }, onTouchEnd: onTouchEnd, "data-testid": "media-lightbox-stage", children: [_jsx(Box, { position: "absolute", inset: { base: 0, md: 6 }, animation: fadeIn(), sx: reducedMotionSx(), children: _jsx(MediaFrame, { media: item, alt: alt, fit: "contain", autoPlay: true, surface: "transparent", playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }) }, item.id), total > 1 && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 24, "aria-hidden": true }), onClick: () => go(current - 1), isDisabled: current === 0, round: true, testId: "media-lightbox-prev" }) }), _jsx(Box, { position: "absolute", right: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 24, "aria-hidden": true }), onClick: () => go(current + 1), isDisabled: current === total - 1, round: true, testId: "media-lightbox-next" }) })] }))] }), total > 1 && (_jsx(Flex, { as: "nav", "aria-label": labels.thumbnails, ...bar, py: 3, px: 4, justify: "center", children: _jsx(Flex, { ref: stripRef, gap: 3, p: "4px", maxW: "100%", overflowX: "auto", onKeyDown: onKeyDown, "data-testid": "media-lightbox-thumbs", children: items.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, total, frame.alt), selected: position === current, onSelect: () => go(position), width: 56, height: 70, ring: { gap: chrome.stage, ink: chrome.ink }, surface: chrome.raised }, frame.id))) }) }))] }) }));
+};
+export default MediaLightbox;

package/dist/esm/Components/MediaGallery/MediaLightboxProps.js

@@ -0,0 +1,12 @@
+export const defaultMediaLightboxLabels = {
+    dialog: "Product images",
+    close: "Close",
+    previous: "Previous image",
+    next: "Next image",
+    counter: (position, total) => `${position} / ${total}`,
+    thumbnails: "Image thumbnails",
+    frame: (position, total, alt) => `Image ${position} of ${total}${alt ? `: ${alt}` : ""}`,
+    image: (position, total) => `Image ${position} of ${total}`,
+    playVideo: "Play video",
+    imageUnavailable: "Image unavailable",
+};

package/dist/esm/Components/MediaGallery/MediaThumb.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Play, Video } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { frameThumb } from "./mediaGalleryModel.js";
+/** Selectable thumbnail: ring and full opacity when current, `aria-current` for assistive tech. */
+const MediaThumb = ({ media, label, selected, onSelect, width, height, ring, surface }) => {
+    const { colors } = useCustomTheme();
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const src = frameThumb(media);
+    const settle = useCallback((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setLoaded(true);
+    }, []);
+    return (_jsxs(Box, { as: "button", type: "button", onClick: onSelect, "aria-label": label, "aria-current": selected ? "true" : undefined, position: "relative", flexShrink: 0, w: `${width}px`, h: `${height}px`, p: 0, border: "0", borderRadius: "xl", overflow: "hidden", cursor: "pointer", bg: surface !== null && surface !== void 0 ? surface : colors.background[100], opacity: selected ? 1 : 0.72, boxShadow: selected ? `0 0 0 2px ${ring.gap}, 0 0 0 4px ${ring.ink}` : "none", transition: transitionFor(["box-shadow", "opacity", "transform"]), _hover: { opacity: 1, transform: "translateY(-1px)" }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx({ transform: "none" }) }, children: [src && !failed ? (_jsx(Box, { as: "img", ref: settle, src: src, alt: "", loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", opacity: loaded ? 1 : 0, transition: transitionFor(["opacity"], "base") })) : (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: _jsx(Video, { size: 20 }) })), media.type === "video" && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.white, "aria-hidden": true, children: _jsx(Flex, { boxSize: 6, align: "center", justify: "center", borderRadius: "full", bg: overlayScrim(colors), children: _jsx(Play, { size: 12, fill: "currentColor" }) }) }))] }));
+};
+export default MediaThumb;

package/dist/esm/Components/MediaGallery/glass.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+const GLASS_ALPHA = 0.72;
+const GLASS_ALPHA_HOVER = 0.9;
+const BLUR = "blur(20px) saturate(180%)";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const tint = (colors, alpha) => {
+    const { r, g, b } = hexToRgb(colors.background[50]);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+/** Translucent surface over a photo: the page canvas at 72%, blurred, opaque where blur is unsupported. */
+export const glassStyles = (colors, hover = false) => ({
+    bg: tint(colors, hover ? GLASS_ALPHA_HOVER : GLASS_ALPHA),
+    color: colors.header[900],
+    backdropFilter: BLUR,
+    sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.background[50] } },
+});
+/** 36 or 44 px glass circle with a 44 px hit area; fades out instead of unmounting when disabled. */
+export const GlassIconButton = forwardRef(({ label, icon, onClick, size = 36, isDisabled = false, tabIndex, ...placement }, ref) => {
+    const { colors } = useCustomTheme();
+    const glass = glassStyles(colors);
+    const reach = Math.max(0, (44 - size) / 2);
+    return (_jsx(Box, { as: "button", ref: ref, type: "button", "aria-label": label, onClick: onClick, disabled: isDisabled, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: `${size}px`, h: `${size}px`, borderRadius: "full", position: "absolute", flexShrink: 0, cursor: "pointer", opacity: isDisabled ? 0 : 1, pointerEvents: isDisabled ? "none" : "auto", transition: transitionFor(["opacity", "background-color"]), _hover: { bg: tint(colors, GLASS_ALPHA_HOVER) }, ...glass, sx: {
+            ...glass.sx,
+            ...focusVisibleStyles(colors),
+            "&::after": { content: '""', position: "absolute", inset: `-${reach}px` },
+            ...reducedMotionSx(),
+        }, ...placement, children: icon }));
+});
+GlassIconButton.displayName = "GlassIconButton";
+/** Non-interactive glass capsule for the counter and zoom hint. */
+export const GlassPill = ({ children, height = 28, ...placement }) => {
+    const { colors } = useCustomTheme();
+    const glass = glassStyles(colors);
+    return (_jsx(Flex, { align: "center", gap: 1.5, h: `${height}px`, px: 3, borderRadius: "full", position: "absolute", fontSize: "xs", fontWeight: 600, pointerEvents: "none", whiteSpace: "nowrap", ...glass, sx: { ...glass.sx, ...NUMERIC_TEXT }, ...placement, children: children }));
+};

package/dist/esm/Components/MediaGallery/mediaGalleryModel.js

@@ -0,0 +1,71 @@
+const YOUTUBE = [
+    /youtube\.com\/watch\?[^#]*v=([A-Za-z0-9_-]{6,})/i,
+    /youtube\.com\/(?:embed|shorts|live)\/([A-Za-z0-9_-]{6,})/i,
+    /youtu\.be\/([A-Za-z0-9_-]{6,})/i,
+];
+const VIMEO = [/vimeo\.com\/(?:video\/)?(\d+)/i];
+const firstMatch = (patterns, url) => {
+    for (const pattern of patterns) {
+        const found = pattern.exec(url);
+        if (found)
+            return found[1];
+    }
+    return undefined;
+};
+/** Only whitelisted ids reach an iframe `src`, so a product feed can never inject an arbitrary frame URL. */
+export const parseEmbed = (url) => {
+    const youtube = firstMatch(YOUTUBE, url);
+    if (youtube) {
+        return {
+            provider: "youtube",
+            id: youtube,
+            src: `https://www.youtube.com/embed/${youtube}?rel=0&autoplay=1`,
+            poster: `https://img.youtube.com/vi/${youtube}/hqdefault.jpg`,
+        };
+    }
+    const vimeo = firstMatch(VIMEO, url);
+    if (vimeo)
+        return { provider: "vimeo", id: vimeo, src: `https://player.vimeo.com/video/${vimeo}?autoplay=1` };
+    return undefined;
+};
+export const frameKind = (media) => {
+    if (media.type !== "video")
+        return "image";
+    return parseEmbed(media.src) ? "embed" : "video";
+};
+/** Still image to show for a frame before it plays, if the data offers one. */
+export const framePoster = (media) => {
+    var _a, _b;
+    if (media.type !== "video")
+        return media.src;
+    return (_a = media.poster) !== null && _a !== void 0 ? _a : (_b = parseEmbed(media.src)) === null || _b === void 0 ? void 0 : _b.poster;
+};
+export const frameThumb = (media) => { var _a; return (_a = media.thumb) !== null && _a !== void 0 ? _a : (media.type === "video" ? framePoster(media) : media.src); };
+/** `activeMediaIds` order wins; unknown ids are dropped; an empty result falls back to every frame. */
+export const resolveFrames = (media, activeMediaIds) => {
+    if (!activeMediaIds)
+        return media;
+    const byId = new Map(media.map((item) => [item.id, item]));
+    const picked = activeMediaIds.flatMap((id) => {
+        const found = byId.get(id);
+        return found ? [found] : [];
+    });
+    return picked.length > 0 ? picked : media;
+};
+export const clampIndex = (index, count) => count <= 0 ? 0 : Math.min(Math.max(Math.trunc(index) || 0, 0), count - 1);
+/** Where a navigation key lands, or undefined when the key is not navigation. */
+export const indexForKey = (key, index, count) => {
+    if (key === "ArrowLeft")
+        return clampIndex(index - 1, count);
+    if (key === "ArrowRight")
+        return clampIndex(index + 1, count);
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return clampIndex(count - 1, count);
+    return undefined;
+};
+const OWN_KEYS = "video, iframe, input, textarea, select, [contenteditable='true']";
+/** Arrow keys belong to a focused video, iframe or field, never to the carousel. */
+export const keyBelongsToTarget = (target) => target instanceof Element && target.closest(OWN_KEYS) !== null;
+export const frameSignature = (frames) => frames.map((frame) => frame.id).join("|");

package/dist/esm/Components/MediaGallery/motion.js

@@ -0,0 +1,8 @@
+import { keyframes } from "@emotion/react";
+import { MOTION_EASE } from "../../Theme/tokens/primitives/motion.js";
+/** Frame change: one slide per gesture, `transform` only. */
+export const SLIDE_MS = 320;
+/** Colour-linked frame set swap and the lightbox frame change. */
+export const CROSSFADE_MS = 160;
+const fade = keyframes `from { opacity: 0; } to { opacity: 1; }`;
+export const fadeIn = (ms = CROSSFADE_MS) => `${fade} ${ms}ms ${MOTION_EASE} both`;