pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/Components/MediaGallery/MediaGallery.js

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const MediaFrame_1 = __importDefault(require("./MediaFrame"));
+const MediaThumb_1 = __importDefault(require("./MediaThumb"));
+const MediaLightbox_1 = __importDefault(require("./MediaLightbox"));
+const glass_1 = require("./glass");
+const motion_3 = require("./motion");
+const useContainerWidth_1 = require("../Commerce/useContainerWidth");
+const useMatchMedia_1 = require("./useMatchMedia");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const MediaGalleryProps_1 = require("./MediaGalleryProps");
+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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "status", "aria-label": label, direction: vertical ? "row" : "column", gap: 4, w: "100%", "data-testid": "media-gallery-skeleton", children: [rail && vertical && ((0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, w: "72px", flexShrink: 0, children: [0, 1, 2, 3].map((n) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "90px", width: "72px", borderRadius: "xl" }, n))) })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, sx: { aspectRatio }, borderRadius: rounded ? "2xl" : 0, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "100%", width: "100%", borderRadius: "0" }) }), rail && !vertical && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 3, children: [0, 1, 2, 3].map((n) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const rootRef = (0, react_1.useRef)(null);
+    const containerWidth = (0, useContainerWidth_1.useContainerWidth)(rootRef);
+    const windowWide = (0, useMatchMedia_1.useMatchMedia)(WIDE_QUERY, false);
+    const wide = containerWidth === undefined ? windowWide : containerWidth >= WIDE_MIN_WIDTH;
+    const finePointer = (0, useMatchMedia_1.useMatchMedia)(FINE_POINTER_QUERY, false);
+    const labels = { ...MediaGalleryProps_1.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 = (0, react_1.useMemo)(() => { var _a; return (0, mediaGalleryModel_1.resolveFrames)(media, (_a = JSON.parse(activeKey)) !== null && _a !== void 0 ? _a : undefined); }, [media, activeKey]);
+    const signature = (0, mediaGalleryModel_1.frameSignature)(frames);
+    const count = frames.length;
+    const isControlled = index !== undefined;
+    const [ownIndex, setOwnIndex] = (0, react_1.useState)(defaultIndex);
+    const current = (0, mediaGalleryModel_1.clampIndex)(isControlled ? index : ownIndex, count);
+    const latest = (0, react_1.useRef)(current);
+    latest.current = current;
+    const onChangeRef = (0, react_1.useRef)(onIndexChange);
+    onChangeRef.current = onIndexChange;
+    const commit = (next) => {
+        var _a;
+        const target = (0, mediaGalleryModel_1.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 = (0, react_1.useRef)(commit);
+    commitRef.current = commit;
+    const trackRef = (0, react_1.useRef)(null);
+    const railRef = (0, react_1.useRef)(null);
+    const settling = (0, react_1.useRef)(null);
+    const settleTimer = (0, react_1.useRef)();
+    const alignedTrack = (0, react_1.useRef)(null);
+    const lightboxReturn = (0, react_1.useRef)(null);
+    const [lightboxOpen, setLightboxOpen] = (0, react_1.useState)(false);
+    const [inner, setInner] = (0, react_1.useState)({ on: false, x: 50, y: 50 });
+    const [fadeKey, setFadeKey] = (0, react_1.useState)(0);
+    const seenSignature = (0, react_1.useRef)(signature);
+    (0, react_1.useEffect)(() => {
+        if (seenSignature.current === signature)
+            return;
+        seenSignature.current = signature;
+        setFadeKey((key) => key + 1);
+        commitRef.current(0);
+    }, [signature]);
+    (0, react_1.useEffect)(() => setInner((state) => (state.on ? { ...state, on: false } : state)), [current, signature]);
+    (0, react_1.useEffect)(() => () => window.clearTimeout(settleTimer.current), []);
+    (0, react_1.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]);
+    (0, react_1.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 = (0, mediaGalleryModel_1.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 || (0, mediaGalleryModel_1.keyBelongsToTarget)(event.target))
+            return;
+        const next = (0, mediaGalleryModel_1.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 && (0, mediaGalleryModel_1.frameKind)(currentFrame) === "image";
+    if (isLoading)
+        return (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(MediaThumb_1.default, { 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 = (0, glass_1.glassStyles)(colors);
+    const focusInset = { outline: "2px solid transparent", boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}` };
+    const well = ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
+                    settling.current = null;
+                }, outline: "none", _focusVisible: focusInset, sx: {
+                    scrollSnapType: "x mandatory",
+                    overscrollBehaviorX: "contain",
+                    ...HIDDEN_SCROLLBAR,
+                    ...(0, motion_2.reducedMotionSx)(),
+                }, "data-testid": "media-gallery-track", children: [frames.map((frame, position) => {
+                        var _a;
+                        const isCurrent = position === current;
+                        const kind = (0, mediaGalleryModel_1.frameKind)(frame);
+                        const alt = (_a = frame.alt) !== null && _a !== void 0 ? _a : labels.image(position + 1, count);
+                        const view = ((0, jsx_runtime_1.jsx)(MediaFrame_1.default, { 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 ((0, jsx_runtime_1.jsx)(react_2.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 ? (0, motion_1.transitionFor)(["opacity"], "fast") : undefined, sx: { scrollSnapAlign: "start", scrollSnapStop: "always" }, children: interactive ? ((0, jsx_runtime_1.jsx)(react_2.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 && (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "0 0 100%", bg: colors.background[100] })] }, fadeKey), badges && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 3, left: 3, zIndex: 2, pointerEvents: "none", "data-testid": "media-gallery-badges", children: badges })), actions && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 3, right: 3, zIndex: 3, "data-testid": "media-gallery-actions", children: actions })), showArrows && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 }), (0, jsx_runtime_1.jsx)(glass_1.GlassIconButton, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.transitionFor)(["width"]), borderRadius: "full", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", boxSize: "6px", borderRadius: "full", bg: "currentColor", opacity: selected ? 0.92 : 0.3, transform: selected ? "scaleX(2.4)" : "scaleX(1)", transition: (0, motion_1.transitionFor)(["transform", "opacity"]) }) }, frame.id));
+                }) })), count > 1 && ((0, jsx_runtime_1.jsx)(glass_1.GlassPill, { ...(isSwipe ? { right: 4, bottom: "19px", height: 22 } : { left: 4, bottom: 4, height: 32 }), zIndex: 2, children: (0, jsx_runtime_1.jsx)("span", { "aria-live": "polite", "data-testid": "media-gallery-counter", children: labels.counter(current + 1, count) }) })), !isSwipe && finePointer && zoomable && zoom === "lightbox" && ((0, jsx_runtime_1.jsxs)(glass_1.GlassPill, { right: 4, bottom: 4, height: 32, zIndex: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.zoomHint })] }))] }));
+    const rail = showRail &&
+        (arrangement === "thumbs-left" ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", w: "72px", flexShrink: 0, alignSelf: "stretch", "data-testid": "media-gallery-rail", children: (0, jsx_runtime_1.jsx)(react_2.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 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, sx: { ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"), ...(0, motion_2.reducedMotionSx)() }, children: thumbs(72, 90) }, fadeKey) })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { ref: railRef, role: "group", "aria-label": labels.thumbnails, gap: 3, m: "-4px", p: "4px", overflowX: "auto", animation: fadeKey > 0 ? (0, motion_3.fadeIn)(motion_3.CROSSFADE_MS) : undefined, sx: { ...(0, scrollbar_1.scrollbarStyles)(colors, "hover"), ...(0, motion_2.reducedMotionSx)() }, "data-testid": "media-gallery-rail", children: thumbs(64, 80) }, fadeKey)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.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] }) }), (0, jsx_runtime_1.jsx)(MediaLightbox_1.default, { isOpen: lightboxOpen, onClose: () => setLightboxOpen(false), items: frames, index: current, onIndexChange: commit, finalFocusRef: lightboxReturn, labels: lightboxLabels })] }));
+};
+exports.default = MediaGallery;

package/dist/Components/MediaGallery/MediaGalleryProps.d.ts

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import type { ProductMedia } from "../Commerce/commerceTypes";
+import type { MediaLightboxLabels } from "./MediaLightboxProps";
+/** `auto` picks `thumbs-left` from 768px up and `swipe` below it. */
+export type MediaGalleryLayout = "auto" | "thumbs-left" | "thumbs-below" | "swipe";
+/** `lightbox` opens the full-screen viewer, `inner` zooms in place, `none` is inert. */
+export type MediaGalleryZoom = "lightbox" | "inner" | "none";
+/** Width / height of the media well; every frame is cropped to it, never stretched. */
+export type MediaAspectRatio = "4/5" | "1/1" | "3/4" | "16/9" | `${number}/${number}`;
+/** Every string the gallery renders or announces, merged over `defaultMediaGalleryLabels`. */
+export interface MediaGalleryLabels {
+    /** Accessible name of the carousel region. */
+    region: string;
+    /** Slide label, "2 of 5". */
+    slide: (position: number, total: number) => string;
+    /** Alt text for a frame that has no `alt` of its own. */
+    image: (position: number, total: number) => string;
+    /** Accessible name of a thumbnail or dot; `alt` is the frame's own description when it has one. */
+    frame: (position: number, total: number, alt?: string) => string;
+    previous: string;
+    next: string;
+    /** Accessible name of the dots group. */
+    dots: string;
+    /** Accessible name of the thumbnail list. */
+    thumbnails: string;
+    /** Visible and live-announced counter, "1 / 5". */
+    counter: (position: number, total: number) => string;
+    /** Pill shown on desktop while `zoom` is not `none`. */
+    zoomHint: string;
+    /** Name of the button that opens the lightbox on an image. */
+    openLightbox: (position: number, total: number) => string;
+    /** Name of the button that toggles in-place zoom on an image. */
+    zoomImage: (position: number, total: number) => string;
+    playVideo: string;
+    imageUnavailable: string;
+    loading: string;
+}
+export declare const defaultMediaGalleryLabels: MediaGalleryLabels;
+/** Product media carousel: thumbnail rail or swipe track, lightbox, colour-linked frames. */
+export interface MediaGalleryProps {
+    /** Every frame the product has; images are cropped to `aspectRatio`, videos play on demand. */
+    media: ProductMedia[];
+    /** Arrangement of well and thumbnails; `auto` shows the thumbnail rail from 560px of the gallery's own width. */
+    layout?: MediaGalleryLayout;
+    /** Shape of the well. */
+    aspectRatio?: MediaAspectRatio;
+    /** What a click on an image does. */
+    zoom?: MediaGalleryZoom;
+    /** Controlled frame position, within the visible frames; pair with `onIndexChange`. */
+    index?: number;
+    /** Starting frame when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires on every navigation (swipe, key, arrow, thumbnail, dot) with the new position. */
+    onIndexChange?: (index: number) => void;
+    /** Restricts and orders the visible frames by media id, e.g. the selected colour's `mediaIds`; position resets to 0. */
+    activeMediaIds?: string[];
+    /** Overlaid top-left on the well, e.g. product badges. */
+    badges?: ReactNode;
+    /** Overlaid top-right on the well, e.g. a wishlist toggle. */
+    actions?: ReactNode;
+    /** Pins the gallery while the rest of the page scrolls past. */
+    sticky?: boolean;
+    /** Offset from the top of the viewport when `sticky`, in px. */
+    stickyTop?: number;
+    /** Square the corners for an edge-to-edge well; defaults to rounded except in the swipe layout. */
+    rounded?: boolean;
+    /** Renders a skeleton of the same shape in place of the frames. */
+    isLoading?: boolean;
+    /** Overrides for any of `defaultMediaGalleryLabels`. */
+    labels?: Partial<MediaGalleryLabels>;
+    /** Overrides for the lightbox copy. */
+    lightboxLabels?: Partial<MediaLightboxLabels>;
+    /** Replaces `labels.region` as the carousel's accessible name, e.g. the product title. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/MediaGallery/MediaGalleryProps.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaGalleryLabels = void 0;
+exports.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/Components/MediaGallery/MediaLightbox.d.ts

@@ -0,0 +1,4 @@
+import type { MediaLightboxProps } from "./MediaLightboxProps";
+/** Full-screen product media viewer: counter and close on top, arrows, thumbnail row, Esc and arrow keys. */
+declare const MediaLightbox: ({ isOpen, onClose, items, index, defaultIndex, onIndexChange, finalFocusRef, labels: labelOverrides, }: MediaLightboxProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MediaLightbox;

package/dist/Components/MediaGallery/MediaLightbox.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const ViewerIconButton_1 = __importDefault(require("../MediaViewer/components/ViewerIconButton"));
+const useViewerChrome_1 = require("../MediaViewer/useViewerChrome");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const motion_1 = require("../../Theme/chakra/motion");
+const MediaFrame_1 = __importDefault(require("./MediaFrame"));
+const MediaThumb_1 = __importDefault(require("./MediaThumb"));
+const motion_2 = require("./motion");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+const MediaLightboxProps_1 = require("./MediaLightboxProps");
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const reduced = (0, motion_1.usePrefersReducedMotion)();
+    const labels = { ...MediaLightboxProps_1.defaultMediaLightboxLabels, ...labelOverrides };
+    const isControlled = index !== undefined;
+    const [own, setOwn] = (0, react_1.useState)(defaultIndex);
+    const total = items.length;
+    const current = (0, mediaGalleryModel_1.clampIndex)(isControlled ? index : own, total);
+    const latest = (0, react_1.useRef)(current);
+    latest.current = current;
+    const stageRef = (0, react_1.useRef)(null);
+    const stripRef = (0, react_1.useRef)(null);
+    const touchStartX = (0, react_1.useRef)(null);
+    const go = (next) => {
+        const target = (0, mediaGalleryModel_1.clampIndex)(next, total);
+        if (target === latest.current)
+            return;
+        latest.current = target;
+        if (!isControlled)
+            setOwn(target);
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(target);
+    };
+    (0, react_1.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 || (0, mediaGalleryModel_1.keyBelongsToTarget)(event.target))
+            return;
+        const next = (0, mediaGalleryModel_1.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: (0, scrim_1.overlayScrim)(colors), color: chrome.ink };
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: (0, scrim_1.overlayScrim)(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: { fontVariantNumeric: "tabular-nums" }, children: labels.counter(current + 1, total) }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: { base: 0, md: 6 }, animation: (0, motion_2.fadeIn)(), sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(MediaFrame_1.default, { media: item, alt: alt, fit: "contain", autoPlay: true, surface: "transparent", playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }) }, item.id), total > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24, "aria-hidden": true }), onClick: () => go(current - 1), isDisabled: current === 0, round: true, testId: "media-lightbox-prev" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", right: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 24, "aria-hidden": true }), onClick: () => go(current + 1), isDisabled: current === total - 1, round: true, testId: "media-lightbox-next" }) })] }))] }), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": labels.thumbnails, ...bar, py: 3, px: 4, justify: "center", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: stripRef, gap: 3, p: "4px", maxW: "100%", overflowX: "auto", onKeyDown: onKeyDown, "data-testid": "media-lightbox-thumbs", children: items.map((frame, position) => ((0, jsx_runtime_1.jsx)(MediaThumb_1.default, { 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))) }) }))] }) }));
+};
+exports.default = MediaLightbox;

package/dist/Components/MediaGallery/MediaLightboxProps.d.ts

@@ -0,0 +1,40 @@
+import type { RefObject } from "react";
+import type { ProductMedia } from "../Commerce/commerceTypes";
+/** Every string the lightbox renders or announces, merged over `defaultMediaLightboxLabels`. */
+export interface MediaLightboxLabels {
+    /** Accessible name of the dialog. */
+    dialog: string;
+    close: string;
+    previous: string;
+    next: string;
+    /** Visible and live-announced counter, "2 / 5". */
+    counter: (position: number, total: number) => string;
+    /** Accessible name of the thumbnail row. */
+    thumbnails: string;
+    /** Accessible name of one thumbnail. */
+    frame: (position: number, total: number, alt?: string) => string;
+    /** Alt text for a frame that has no `alt` of its own. */
+    image: (position: number, total: number) => string;
+    playVideo: string;
+    imageUnavailable: string;
+}
+export declare const defaultMediaLightboxLabels: MediaLightboxLabels;
+/** Full-screen viewer for product media on an opaque dark surface. */
+export interface MediaLightboxProps {
+    /** Mounts and shows the viewer. */
+    isOpen: boolean;
+    /** Fires from the close button, Esc and a click on the backdrop. */
+    onClose: () => void;
+    /** Frames in order; navigation stops at both ends. */
+    items: ProductMedia[];
+    /** Controlled position; pair with `onIndexChange`. */
+    index?: number;
+    /** Starting position when uncontrolled. */
+    defaultIndex?: number;
+    /** Fires on every navigation with the new position. */
+    onIndexChange?: (index: number) => void;
+    /** Element that regains focus on close; defaults to whatever held focus before opening. */
+    finalFocusRef?: RefObject<HTMLElement>;
+    /** Overrides for any of `defaultMediaLightboxLabels`. */
+    labels?: Partial<MediaLightboxLabels>;
+}

package/dist/Components/MediaGallery/MediaLightboxProps.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaLightboxLabels = void 0;
+exports.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/Components/MediaGallery/MediaThumb.d.ts

@@ -0,0 +1,18 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+type MediaThumbProps = {
+    media: ProductMedia;
+    label: string;
+    selected: boolean;
+    onSelect: () => void;
+    width: number;
+    height: number;
+    /** Ring colours: `gap` separates the ring from the photo, `ink` is the selection mark. */
+    ring: {
+        gap: string;
+        ink: string;
+    };
+    surface?: string;
+};
+/** Selectable thumbnail: ring and full opacity when current, `aria-current` for assistive tech. */
+declare const MediaThumb: ({ media, label, selected, onSelect, width, height, ring, surface }: MediaThumbProps) => import("react/jsx-runtime").JSX.Element;
+export default MediaThumb;

package/dist/Components/MediaGallery/MediaThumb.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const mediaGalleryModel_1 = require("./mediaGalleryModel");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const [loaded, setLoaded] = (0, react_1.useState)(false);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    const src = (0, mediaGalleryModel_1.frameThumb)(media);
+    const settle = (0, react_1.useCallback)((node) => {
+        if (node && node.complete && node.naturalWidth > 0)
+            setLoaded(true);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: (0, motion_1.transitionFor)(["box-shadow", "opacity", "transform"]), _hover: { opacity: 1, transform: "translateY(-1px)" }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)({ transform: "none" }) }, children: [src && !failed ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.transitionFor)(["opacity"], "base") })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.textMuted, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Video, { size: 20 }) })), media.type === "video" && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", color: colors.white, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { boxSize: 6, align: "center", justify: "center", borderRadius: "full", bg: (0, scrim_1.overlayScrim)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 12, fill: "currentColor" }) }) }))] }));
+};
+exports.default = MediaThumb;

package/dist/Components/MediaGallery/glass.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Translucent surface over a photo: the page canvas at 72%, blurred, opaque where blur is unsupported. */
+export declare const glassStyles: (colors: PaletteProps, hover?: boolean) => {
+    bg: string;
+    color: string;
+    backdropFilter: string;
+    sx: {
+        WebkitBackdropFilter: string;
+        "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+            backgroundColor: string;
+        };
+    };
+};
+/** 36 or 44 px glass circle with a 44 px hit area; fades out instead of unmounting when disabled. */
+export declare const GlassIconButton: import("react").ForwardRefExoticComponent<{
+    label: string;
+    icon: ReactElement;
+    onClick: () => void;
+    size?: number;
+    isDisabled?: boolean;
+    tabIndex?: number;
+} & Pick<BoxProps, "bottom" | "left" | "right" | "top" | "zIndex"> & import("react").RefAttributes<HTMLButtonElement>>;
+type GlassPillProps = {
+    children: ReactNode;
+    height?: number;
+} & Pick<BoxProps, "left" | "right" | "top" | "bottom" | "zIndex" | "px">;
+/** Non-interactive glass capsule for the counter and zoom hint. */
+export declare const GlassPill: ({ children, height, ...placement }: GlassPillProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/MediaGallery/glass.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlassPill = exports.GlassIconButton = exports.glassStyles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const color_1 = require("../../Theme/tokens/builders/color");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+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 } = (0, color_1.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. */
+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] } },
+});
+exports.glassStyles = glassStyles;
+/** 36 or 44 px glass circle with a 44 px hit area; fades out instead of unmounting when disabled. */
+exports.GlassIconButton = (0, react_1.forwardRef)(({ label, icon, onClick, size = 36, isDisabled = false, tabIndex, ...placement }, ref) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const glass = (0, exports.glassStyles)(colors);
+    const reach = Math.max(0, (44 - size) / 2);
+    return ((0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.transitionFor)(["opacity", "background-color"]), _hover: { bg: tint(colors, GLASS_ALPHA_HOVER) }, ...glass, sx: {
+            ...glass.sx,
+            ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
+            "&::after": { content: '""', position: "absolute", inset: `-${reach}px` },
+            ...(0, motion_2.reducedMotionSx)(),
+        }, ...placement, children: icon }));
+});
+exports.GlassIconButton.displayName = "GlassIconButton";
+/** Non-interactive glass capsule for the counter and zoom hint. */
+const GlassPill = ({ children, height = 28, ...placement }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const glass = (0, exports.glassStyles)(colors);
+    return ((0, jsx_runtime_1.jsx)(react_2.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, fontVariantNumeric: "tabular-nums" }, ...placement, children: children }));
+};
+exports.GlassPill = GlassPill;