pixelize-design-library 2.4.2-beta.9 → 3.0.0

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;

package/dist/Components/MediaViewer/MediaViewer.js

@@ -0,0 +1,235 @@
+"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 useViewerChrome_1 = require("./useViewerChrome");
+const ViewerIconButton_1 = __importDefault(require("./components/ViewerIconButton"));
+const VideoPoster_1 = __importDefault(require("./components/VideoPoster"));
+const TileChip_1 = __importDefault(require("./components/TileChip"));
+const MediaImageViewer_1 = __importDefault(require("./components/MediaImageViewer"));
+const MediaVideoPlayer_1 = __importDefault(require("./components/MediaVideoPlayer"));
+const MediaAudioPlayer_1 = __importDefault(require("./components/MediaAudioPlayer"));
+const MediaDocumentStage_1 = __importDefault(require("./components/MediaDocumentStage"));
+const mediaKindIcon_1 = require("./components/mediaKindIcon");
+const mediaItems_1 = require("./mediaItems");
+const MediaViewerProps_1 = require("./MediaViewerProps");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BOX_SHADOW_OPACITY_TRANSITION = (0, motion_1.transitionFor)(["box-shadow", "opacity"]);
+const SWIPE_MIN_PX = 50;
+const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
+const COPIED_FEEDBACK_MS = 1500;
+const DOCUMENT_KINDS = new Set(["pdf", "doc", "text", "spreadsheet", "presentation", "archive", "file"]);
+const isDocumentKind = (kind) => DOCUMENT_KINDS.has(kind);
+const KIND_LABEL_KEY = {
+    video: "kindVideo",
+    youtube: "kindYoutube",
+    pdf: "kindPdf",
+    doc: "kindDoc",
+    file: "kindFile",
+    audio: "kindAudio",
+    text: "kindText",
+    spreadsheet: "kindSpreadsheet",
+    presentation: "kindPresentation",
+    archive: "kindArchive",
+};
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultIndex, title, resolveDocument, labels: labelOverrides, imageLabels, videoLabels, audioLabels, documentLabels, }) => {
+    const labels = { ...MediaViewerProps_1.defaultMediaViewerLabels, ...labelOverrides };
+    const isIndexControlled = index !== undefined;
+    const [uncontrolledIndex, setUncontrolledIndex] = (0, react_1.useState)(defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0);
+    const activeIndex = isIndexControlled ? index : uncontrolledIndex;
+    if (process.env.NODE_ENV !== "production" && isIndexControlled && !onIndexChange) {
+        console.warn("MediaViewer: index is set without onIndexChange, so navigation cannot move past it.");
+    }
+    const latestIndex = (0, react_1.useRef)(0);
+    const setIndex = (next) => {
+        latestIndex.current = next;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(next);
+        if (!isIndexControlled)
+            setUncontrolledIndex(next);
+    };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const stageRef = (0, react_1.useRef)(null);
+    const stripRef = (0, react_1.useRef)(null);
+    const [videoAt, setVideoAt] = (0, react_1.useState)(0);
+    const [imageZoom, setImageZoom] = (0, react_1.useState)(100);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [filmstripOverflows, setFilmstripOverflows] = (0, react_1.useState)(false);
+    const touchStart = (0, react_1.useRef)(null);
+    const total = items.length;
+    const safeIndex = total === 0 ? 0 : (0, mediaItems_1.wrapIndex)(activeIndex, total);
+    const item = items[safeIndex];
+    // NOTE: several arrow presses land in one tick; relative moves must compose, not restate.
+    latestIndex.current = safeIndex;
+    const go = (0, react_1.useRef)((delta) => void delta);
+    go.current = (delta) => {
+        if (total <= 1)
+            return;
+        setVideoAt(0);
+        setIndex((0, mediaItems_1.wrapIndex)(latestIndex.current + delta, total));
+    };
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        const onKeyDown = (event) => {
+            var _a, _b;
+            if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaItems_1.isTypingTarget)(event.target))
+                return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            const claimedByVideo = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, "[data-media-video-shell]");
+            if (claimedByVideo)
+                return;
+            go.current(event.key === "ArrowLeft" ? -1 : 1);
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const active = (_a = stripRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="true"]');
+        active === null || active === void 0 ? void 0 : active.scrollIntoView({ block: "nearest", inline: "center" });
+    }, [safeIndex, isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        let observer;
+        let rafId;
+        // Modal mounts its portaled content a tick after isOpen flips, so stripRef.current can still be null here.
+        const attach = () => {
+            const el = stripRef.current;
+            if (!el) {
+                rafId = requestAnimationFrame(attach);
+                return;
+            }
+            const check = () => setFilmstripOverflows(el.scrollWidth > el.clientWidth + 1);
+            check();
+            if (typeof ResizeObserver === "undefined")
+                return;
+            observer = new ResizeObserver(check);
+            observer.observe(el);
+        };
+        attach();
+        return () => {
+            if (rafId !== undefined)
+                cancelAnimationFrame(rafId);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [items, isOpen]);
+    (0, react_1.useEffect)(() => {
+        setCopied(false);
+    }, [safeIndex]);
+    if (!item)
+        return null;
+    const canSwipe = total > 1 && (item.kind !== "image" || imageZoom <= 100);
+    const onTouchStart = (event) => {
+        const target = event.target;
+        if (event.touches.length !== 1 || target.closest(NO_SWIPE_ZONE)) {
+            touchStart.current = null;
+            return;
+        }
+        touchStart.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+    };
+    const onTouchMove = (event) => {
+        if (event.touches.length > 1)
+            touchStart.current = null;
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStart.current;
+        touchStart.current = null;
+        if (!start || !canSwipe)
+            return;
+        const touch = event.changedTouches[0];
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        if (Math.abs(dx) > SWIPE_MIN_PX && Math.abs(dx) > Math.abs(dy))
+            go.current(dx < 0 ? 1 : -1);
+    };
+    const copyLink = async () => {
+        try {
+            await navigator.clipboard.writeText((0, mediaItems_1.mediaLink)(item, videoAt));
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    const kindLabelKey = KIND_LABEL_KEY[item.kind];
+    const renderStage = () => {
+        var _a, _b, _c, _d;
+        if (item.kind === "image") {
+            return ((0, jsx_runtime_1.jsx)(MediaImageViewer_1.default, { item: item, label: (_a = item.name) !== null && _a !== void 0 ? _a : title, onZoomChange: setImageZoom, labels: imageLabels }, item.key));
+        }
+        if (isDocumentKind(item.kind)) {
+            if (!resolveDocument) {
+                throw new Error("MediaViewer: resolveDocument is required when items include a pdf/doc/text/spreadsheet/presentation/archive/file item");
+            }
+            return ((0, jsx_runtime_1.jsx)(MediaDocumentStage_1.default, { item: item, label: (_b = item.name) !== null && _b !== void 0 ? _b : title, resolveDocument: resolveDocument, labels: documentLabels }, item.key));
+        }
+        if (item.kind === "video") {
+            return ((0, jsx_runtime_1.jsx)(MediaVideoPlayer_1.default, { item: item, label: (_c = item.name) !== null && _c !== void 0 ? _c : title, onTimeChange: setVideoAt, onPrevious: total > 1 ? () => go.current(-1) : undefined, onNext: total > 1 ? () => go.current(1) : undefined, labels: videoLabels }, item.key));
+        }
+        if (item.kind === "audio") {
+            return ((0, jsx_runtime_1.jsx)(MediaAudioPlayer_1.default, { item: item, label: (_d = item.name) !== null && _d !== void 0 ? _d : title, onTimeChange: setVideoAt, labels: audioLabels }, item.key));
+        }
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "iframe", position: "absolute", inset: 0, src: (0, mediaItems_1.youtubeEmbed)(item.src), title: labels.youtubeTitle, border: "none", allowFullScreen: true }, item.key));
+    };
+    const meta = (() => {
+        const type = (0, mediaItems_1.fileTypeLabel)(item.src);
+        const parts = [type, item.fileSize ? (0, mediaItems_1.formatFileSize)(item.fileSize) : null].filter(Boolean);
+        const uploaded = item.uploadedAt ? labels.uploadedOn((0, mediaItems_1.formatUploadedDate)(item.uploadedAt)) : null;
+        return [parts.join(" · "), uploaded].filter(Boolean).join(" — ");
+    })();
+    return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, initialFocusRef: stageRef, contentProps: { bg: chrome.stage, m: 0, borderRadius: 0 }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [total > 1 && ((0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: labels.nowShowing(safeIndex + 1, total) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 4, py: 3, bg: chrome.raised, color: chrome.ink, "data-testid": "media-viewer-header", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", size: "sm", noOfLines: 1, color: chrome.ink, children: title }), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, fontSize: "sm", "data-testid": "media-viewer-counter", children: labels.counter(safeIndex + 1, total) })), kindLabelKey && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2, py: 0.5, borderRadius: "base", bg: chrome.hover, color: chrome.ink, fontSize: "xs", fontWeight: 600, children: labels[kindLabelKey] })), (0, jsx_runtime_1.jsx)(react_2.Flex, { flex: 1 }), item.kind === "youtube" ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.openOnYoutube, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }), href: (0, mediaItems_1.youtubeWatch)(item.src) })) : ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), href: item.src })), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: copied ? labels.copied : labels.copyLink, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 16 }), onClick: copyLink, testId: "media-viewer-copy-link" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }), onClick: onClose, testId: "media-viewer-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, tabIndex: -1, flex: 1, position: "relative", minH: 0, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, "data-testid": "media-viewer-stage", children: [renderStage(), total > 1 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: { base: 2, md: 4 }, transform: "translateY(-50%)", 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 }), onClick: () => go.current(-1), round: true, testId: "media-viewer-prev" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", right: { base: 2, md: 4 }, transform: "translateY(-50%)", 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 }), onClick: () => go.current(1), round: true, testId: "media-viewer-next" }) })] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: chrome.raised, py: 3, minW: 0, children: [meta && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: chrome.muted, mb: 2, px: 4, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", title: meta, children: meta })), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": labels.filmstrip, ref: stripRef, gap: 2, px: 4, overflowX: "auto", justifyContent: filmstripOverflows ? "flex-start" : "center", "data-testid": "media-viewer-filmstrip", children: items.map((tile, i) => {
+                                const isSelected = i === safeIndex;
+                                const showPoster = tile.kind === "video" && !(0, mediaItems_1.isUnsupportedVideoSrc)(tile.src);
+                                const showThumb = !showPoster && tile.thumb && !(tile.kind === "image" && (0, mediaItems_1.isUnsupportedImageSrc)(tile.src));
+                                const extLabel = (0, mediaItems_1.fileTypeLabel)(tile.src);
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", onClick: () => setIndex(i), "aria-current": isSelected, "aria-label": `${tile.kind} ${tile.ordinal}`, position: "relative", flexShrink: 0, w: "112px", h: "70px", borderRadius: "10px", overflow: "hidden", bg: chrome.track, opacity: isSelected ? 1 : 0.85, boxShadow: isSelected
+                                        ? `0 0 0 2px ${chrome.accentGlow(0.9)}, 0 0 12px 2px ${chrome.accentGlow(0.45)}`
+                                        : "none", transition: BOX_SHADOW_OPACITY_TRANSITION, _hover: { opacity: 1 }, children: [showPoster ? ((0, jsx_runtime_1.jsx)(VideoPoster_1.default, { item: tile })) : showThumb ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: (0, react_1.cloneElement)((0, mediaKindIcon_1.iconForKind)(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && (0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: extLabel })] })), isSelected && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
+                            }) }))] })] }) }));
+};
+exports.default = MediaViewer;

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

@@ -0,0 +1,92 @@
+import type { MediaItem } from "./mediaItems";
+import type { MediaImageViewerLabels } from "./components/MediaImageViewerProps";
+import type { MediaVideoPlayerLabels } from "./components/MediaVideoPlayerProps";
+import type { MediaAudioPlayerLabels } from "./components/MediaAudioPlayerProps";
+import type { MediaDocumentStageLabels, ResolveDocument } from "./components/MediaDocumentStageProps";
+/** All copy shown in the lightbox chrome, merged over `defaultMediaViewerLabels`. */
+export interface MediaViewerLabels {
+    /** Close (X) button's accessible name and tooltip. */
+    close: string;
+    /** Copy-link button's accessible name before a link is copied. */
+    copyLink: string;
+    /** Replaces `copyLink` on the button for `COPIED_FEEDBACK_MS` after copying. */
+    copied: string;
+    /** Visible "n / total" text in the header; hidden when there's only one item. */
+    counter: (current: number, total: number) => string;
+    /** Download button's accessible name for non-YouTube items. */
+    download: string;
+    /** Accessible name of the filmstrip `nav` region. */
+    filmstrip: string;
+    /** Header kind-pill text for a `doc` item. */
+    kindDoc: string;
+    /** Header kind-pill text for a generic `file` item. */
+    kindFile: string;
+    /** Header kind-pill text for a `pdf` item. */
+    kindPdf: string;
+    /** Header kind-pill text for a `video` item. */
+    kindVideo: string;
+    /** Header kind-pill text for a `youtube` item. */
+    kindYoutube: string;
+    /** Header kind-pill text for an `audio` item. */
+    kindAudio: string;
+    /** Header kind-pill text for a `text` item. */
+    kindText: string;
+    /** Header kind-pill text for a `spreadsheet` item. */
+    kindSpreadsheet: string;
+    /** Header kind-pill text for a `presentation` item. */
+    kindPresentation: string;
+    /** Header kind-pill text for an `archive` item. */
+    kindArchive: string;
+    /** Accessible name of the next-item nav arrow. */
+    next: string;
+    /** Accessible name of the external-link button shown for YouTube items. */
+    openOnYoutube: string;
+    /** @deprecated Never read by MediaViewer; defined but unused. */
+    photoCount: (count: number) => string;
+    /** @deprecated Never read by MediaViewer; defined but unused. */
+    videoCount: (count: number) => string;
+    /** @deprecated Never read by MediaViewer; defined but unused. */
+    documentCount: (count: number) => string;
+    /** @deprecated Never read by MediaViewer; defined but unused. */
+    youtubeCount: (count: number) => string;
+    /** Accessible name of the previous-item nav arrow. */
+    previous: string;
+    /** @deprecated Never read by MediaViewer; defined but unused. */
+    shortcuts: string;
+    /** Screen-reader announcement on navigation, distinct from the visible counter. */
+    nowShowing: (current: number, total: number) => string;
+    /** Builds the footer's upload date line from an already-formatted date. */
+    uploadedOn: (date: string) => string;
+    /** iframe `title` for the embedded YouTube player. */
+    youtubeTitle: string;
+}
+export declare const defaultMediaViewerLabels: MediaViewerLabels;
+/** Props for the full-screen media lightbox — image/video/audio/document gallery with keyboard nav. */
+export interface MediaViewerProps {
+    /** Mounts and shows the lightbox modal when true. */
+    isOpen: boolean;
+    /** Fires from the close button and Modal's own dismiss (Esc, overlay click). */
+    onClose: () => void;
+    /** The full ordered collection; navigation wraps at both ends. */
+    items: MediaItem[];
+    /** Omit for uncontrolled (viewer owns the index, starting at `defaultIndex`); pass to control it. */
+    index?: number;
+    /** Fires on every navigation in both modes; required to move past `index` when controlled. */
+    onIndexChange?: (index: number) => void;
+    /** Uncontrolled-mode starting index; ignored once `index` is passed. */
+    defaultIndex?: number;
+    /** Header heading text; also the fallback for an item with no `name`. */
+    title: string;
+    /** Required only when `items` can include a pdf/doc/file kind — asserted loudly if missing. */
+    resolveDocument?: ResolveDocument;
+    /** Overrides for any of `defaultMediaViewerLabels`, merged over the defaults. */
+    labels?: Partial<MediaViewerLabels>;
+    /** Passed through to `MediaImageViewer`'s `labels` prop. */
+    imageLabels?: Partial<MediaImageViewerLabels>;
+    /** Passed through to `MediaVideoPlayer`'s `labels` prop. */
+    videoLabels?: Partial<MediaVideoPlayerLabels>;
+    /** Passed through to `MediaAudioPlayer`'s `labels` prop. */
+    audioLabels?: Partial<MediaAudioPlayerLabels>;
+    /** Passed through to `MediaDocumentStage`'s `labels` prop. */
+    documentLabels?: Partial<MediaDocumentStageLabels>;
+}

package/dist/Components/MediaViewer/MediaViewerProps.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaViewerLabels = void 0;
+exports.defaultMediaViewerLabels = {
+    close: "Close viewer",
+    copyLink: "Copy link",
+    copied: "Link copied",
+    counter: (current, total) => `${current} / ${total}`,
+    download: "Download",
+    filmstrip: "All media",
+    kindDoc: "Word document",
+    kindFile: "File",
+    kindPdf: "PDF",
+    kindVideo: "Video",
+    kindYoutube: "YouTube",
+    kindAudio: "Audio",
+    kindText: "Text",
+    kindSpreadsheet: "Spreadsheet",
+    kindPresentation: "Presentation",
+    kindArchive: "Archive",
+    next: "Next",
+    openOnYoutube: "Open on YouTube",
+    photoCount: (count) => `${count} photo${count === 1 ? "" : "s"}`,
+    videoCount: (count) => `${count} video${count === 1 ? "" : "s"}`,
+    documentCount: (count) => `${count} document${count === 1 ? "" : "s"}`,
+    youtubeCount: (count) => `${count} YouTube link${count === 1 ? "" : "s"}`,
+    previous: "Previous",
+    shortcuts: "Keyboard shortcuts",
+    nowShowing: (current, total) => `Showing item ${current} of ${total}`,
+    uploadedOn: (date) => `Uploaded · ${date}`,
+    youtubeTitle: "YouTube video",
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { type MediaAudioPlayerProps } from "./MediaAudioPlayerProps";
+/** Audio stage of MediaViewer: play/pause, seek, volume and playback-speed controls with J / L skip keys. */
+declare const MediaAudioPlayer: React.FC<MediaAudioPlayerProps>;
+export default MediaAudioPlayer;