pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/MediaGallery/MediaLightbox.js

@@ -0,0 +1,117 @@
+"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 typography_1 = require("../../Theme/tokens/primitives/typography");
+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: typography_1.NUMERIC_TEXT, 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,45 @@
+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;
+    /** Accessible name of the close button. */
+    close: string;
+    /** Accessible name of the previous-frame arrow. */
+    previous: string;
+    /** Accessible name of the next-frame arrow. */
+    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;
+    /** Accessible name of the play button over a video frame. */
+    playVideo: string;
+    /** Shown in place of an image that fails to load. */
+    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,48 @@
+"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 typography_1 = require("../../Theme/tokens/primitives/typography");
+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, ...typography_1.NUMERIC_TEXT }, ...placement, children: children }));
+};
+exports.GlassPill = GlassPill;

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

@@ -0,0 +1,22 @@
+import type { ProductMedia } from "../Commerce/commerceTypes";
+export type FrameKind = "image" | "video" | "embed";
+export type Embed = {
+    provider: "youtube" | "vimeo";
+    id: string;
+    src: string;
+    poster?: string;
+};
+/** Only whitelisted ids reach an iframe `src`, so a product feed can never inject an arbitrary frame URL. */
+export declare const parseEmbed: (url: string) => Embed | undefined;
+export declare const frameKind: (media: ProductMedia) => FrameKind;
+/** Still image to show for a frame before it plays, if the data offers one. */
+export declare const framePoster: (media: ProductMedia) => string | undefined;
+export declare const frameThumb: (media: ProductMedia) => string | undefined;
+/** `activeMediaIds` order wins; unknown ids are dropped; an empty result falls back to every frame. */
+export declare const resolveFrames: (media: ProductMedia[], activeMediaIds?: string[]) => ProductMedia[];
+export declare const clampIndex: (index: number, count: number) => number;
+/** Where a navigation key lands, or undefined when the key is not navigation. */
+export declare const indexForKey: (key: string, index: number, count: number) => number | undefined;
+/** Arrow keys belong to a focused video, iframe or field, never to the carousel. */
+export declare const keyBelongsToTarget: (target: EventTarget | null) => boolean;
+export declare const frameSignature: (frames: ProductMedia[]) => string;

package/dist/Components/MediaGallery/mediaGalleryModel.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frameSignature = exports.keyBelongsToTarget = exports.indexForKey = exports.clampIndex = exports.resolveFrames = exports.frameThumb = exports.framePoster = exports.frameKind = exports.parseEmbed = void 0;
+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. */
+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;
+};
+exports.parseEmbed = parseEmbed;
+const frameKind = (media) => {
+    if (media.type !== "video")
+        return "image";
+    return (0, exports.parseEmbed)(media.src) ? "embed" : "video";
+};
+exports.frameKind = frameKind;
+/** Still image to show for a frame before it plays, if the data offers one. */
+const framePoster = (media) => {
+    var _a, _b;
+    if (media.type !== "video")
+        return media.src;
+    return (_a = media.poster) !== null && _a !== void 0 ? _a : (_b = (0, exports.parseEmbed)(media.src)) === null || _b === void 0 ? void 0 : _b.poster;
+};
+exports.framePoster = framePoster;
+const frameThumb = (media) => { var _a; return (_a = media.thumb) !== null && _a !== void 0 ? _a : (media.type === "video" ? (0, exports.framePoster)(media) : media.src); };
+exports.frameThumb = frameThumb;
+/** `activeMediaIds` order wins; unknown ids are dropped; an empty result falls back to every frame. */
+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;
+};
+exports.resolveFrames = resolveFrames;
+const clampIndex = (index, count) => count <= 0 ? 0 : Math.min(Math.max(Math.trunc(index) || 0, 0), count - 1);
+exports.clampIndex = clampIndex;
+/** Where a navigation key lands, or undefined when the key is not navigation. */
+const indexForKey = (key, index, count) => {
+    if (key === "ArrowLeft")
+        return (0, exports.clampIndex)(index - 1, count);
+    if (key === "ArrowRight")
+        return (0, exports.clampIndex)(index + 1, count);
+    if (key === "Home")
+        return 0;
+    if (key === "End")
+        return (0, exports.clampIndex)(count - 1, count);
+    return undefined;
+};
+exports.indexForKey = indexForKey;
+const OWN_KEYS = "video, iframe, input, textarea, select, [contenteditable='true']";
+/** Arrow keys belong to a focused video, iframe or field, never to the carousel. */
+const keyBelongsToTarget = (target) => target instanceof Element && target.closest(OWN_KEYS) !== null;
+exports.keyBelongsToTarget = keyBelongsToTarget;
+const frameSignature = (frames) => frames.map((frame) => frame.id).join("|");
+exports.frameSignature = frameSignature;

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

@@ -0,0 +1,5 @@
+/** Frame change: one slide per gesture, `transform` only. */
+export declare const SLIDE_MS = 320;
+/** Colour-linked frame set swap and the lightbox frame change. */
+export declare const CROSSFADE_MS = 160;
+export declare const fadeIn: (ms?: number) => string;

package/dist/Components/MediaGallery/motion.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fadeIn = exports.CROSSFADE_MS = exports.SLIDE_MS = void 0;
+const react_1 = require("@emotion/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+/** Frame change: one slide per gesture, `transform` only. */
+exports.SLIDE_MS = 320;
+/** Colour-linked frame set swap and the lightbox frame change. */
+exports.CROSSFADE_MS = 160;
+const fade = (0, react_1.keyframes) `from { opacity: 0; } to { opacity: 1; }`;
+const fadeIn = (ms = exports.CROSSFADE_MS) => `${fade} ${ms}ms ${motion_1.MOTION_EASE} both`;
+exports.fadeIn = fadeIn;

package/dist/Components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { type MediaViewerProps } from "./MediaViewerProps";
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+declare const MediaViewer: React.FC<MediaViewerProps>;
+export default MediaViewer;