pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/KanbanBoard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var KanbanBoard_1 = require("./KanbanBoard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(KanbanBoard_1).default; } });

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -27,6 +27,6 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     // Header banner uses the brand gradient so it reads correctly across all 9 brands.
     const gradient = (0, gradientInk_1.resolveGradient)(colors.gradient, colors.white, colors.black);
     const ink = gradient.ink;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(5px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { color: "inherit", borderBottomWidth: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
 };
 exports.default = LimitReachedModal;

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveLimitCopy = resolveLimitCopy;
 exports.formatLimitUsage = formatLimitUsage;
-// Canonical strings ported from crm-frontend's orgPlanLimits.ts / orgRecordLimit.ts and
-// account-frontend's useSeatLimitGate.ts, kept verbatim so the promoted modal reads exactly
-// like the copies it replaces. `projects`/`tickets` are new — matched to the same voice.
+// NOTE: strings ported verbatim from crm-frontend/account-frontend's limit gates; projects/tickets are new, matched voice.
 const COPY = {
     record: {
         title: "Record limit reached",

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,3 @@
 import { LoadingProps } from "./LoadingProps";
 /** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
-export default function Loading({ text, isLoading, onlytext, container }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export default function Loading({ text, isLoading, onlytext, container, variant, allowBackgroundInteraction, }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -1,29 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Loading;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const react_3 = require("@emotion/react");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("@emotion/react");
+const Spinner_1 = __importDefault(require("../Spinner/Spinner"));
+const Backdrop_1 = __importDefault(require("../Backdrop/Backdrop"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const pulse = (0, react_2.keyframes) `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+`;
 /** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
-function Loading({ text, isLoading, onlytext, container }) {
-    const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const colorTransition = (0, react_1.useMemo)(() => (0, react_3.keyframes) `
-      0% {
-        color: ${theme.colors.text[900]};
-      }
-      50% {
-        color: ${theme.colors.textMuted};
-      }
-      100% {
-        color: ${theme.colors.text[900]};
-      }
-    `, [theme.colors.text, theme.colors.textMuted]);
+function Loading({ text, isLoading, onlytext, container, variant = "frosted", allowBackgroundInteraction, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (variant === "dim" && !onlytext) {
+        return ((0, jsx_runtime_1.jsx)(Backdrop_1.default, { open: isLoading, loader: true, text: text, container: container, allowBackgroundInteraction: allowBackgroundInteraction }));
+    }
     if (!isLoading) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: (0, jsx_runtime_1.jsx)(react_2.Center, { height: container ? "100%" : "100vh", children: !onlytext ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", children: text })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css) `
-              animation: ${colorTransition} 2s infinite;
-            `, children: text })) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...(0, overlay_styles_1.overlayScrimStyles)(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: (0, motion_1.reducedMotionSx)(), children: text })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spinner_1.default, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", children: text })] })) }));
 }

package/dist/Components/Loading/LoadingProps.d.ts

@@ -4,6 +4,10 @@ export type LoadingProps = {
     isLoading: boolean;
     /** Swaps the spinner+label for a large pulsing 50px uppercase heading — a different treatment, not just "no spinner". */
     onlytext?: boolean;
-    /** Scope the overlay to the nearest positioned ancestor with a MUI-style scrim, instead of full-viewport. */
+    /** Scope the overlay to the nearest positioned ancestor instead of full-viewport. */
     container?: boolean;
+    /** "dim" renders through Backdrop: lighter scrim, no blur, fades in. Defaults to "frosted" so existing screens are unchanged. */
+    variant?: "frosted" | "dim";
+    /** Only with `variant="dim"` — lets clicks reach the page behind the scrim. */
+    allowBackgroundInteraction?: boolean;
 };

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,234 @@
+"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 date_fns_1 = require("date-fns");
+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 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, date_fns_1.format)(new Date(item.uploadedAt), "MMM d, yyyy")) : 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: "4px", 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 0.15s ease, opacity 0.15s ease", _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,4 @@
+import React from "react";
+import { type MediaAudioPlayerProps } from "./MediaAudioPlayerProps";
+declare const MediaAudioPlayer: React.FC<MediaAudioPlayerProps>;
+export default MediaAudioPlayer;