pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.51

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;

package/dist/Components/MediaViewer/components/MediaAudioPlayer.js

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const mediaItems_1 = require("../mediaItems");
+const useViewerChrome_1 = require("../useViewerChrome");
+const MediaScrubber_1 = __importDefault(require("./MediaScrubber"));
+const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
+const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
+const MediaAudioPlayerProps_1 = require("./MediaAudioPlayerProps");
+const ARROW_SEEK_SECONDS = 5;
+const ARROW_VOLUME_STEP = 0.1;
+const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides }) => {
+    const labels = { ...MediaAudioPlayerProps_1.defaultMediaAudioPlayerLabels, ...labelOverrides };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const shellRef = (0, react_1.useRef)(null);
+    const audioRef = (0, react_1.useRef)(null);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const [current, setCurrent] = (0, react_1.useState)(0);
+    const [duration, setDuration] = (0, react_1.useState)(0);
+    const [volume, setVolume] = (0, react_1.useState)(1);
+    const [muted, setMuted] = (0, react_1.useState)(false);
+    const [rate, setRate] = (0, react_1.useState)(1);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    const [buffered, setBuffered] = (0, react_1.useState)([]);
+    const [volumeHover, setVolumeHover] = (0, react_1.useState)(false);
+    const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const audio = () => audioRef.current;
+    const togglePlay = () => {
+        const a = audio();
+        if (!a)
+            return;
+        if (a.paused)
+            void a.play().catch(() => setPlaying(false));
+        else
+            a.pause();
+    };
+    const seekTo = (seconds) => {
+        const a = audio();
+        if (!a)
+            return;
+        const max = Number.isFinite(a.duration) ? a.duration : seconds;
+        a.currentTime = Math.min(max, Math.max(0, seconds));
+        setCurrent(a.currentTime);
+    };
+    const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = audio()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
+    const toggleMute = () => {
+        const a = audio();
+        if (!a)
+            return;
+        a.muted = !a.muted;
+        if (!a.muted && a.volume === 0)
+            a.volume = 0.5;
+    };
+    const changeVolume = (value) => {
+        const a = audio();
+        if (!a)
+            return;
+        a.volume = value / 100;
+        a.muted = value === 0;
+    };
+    const changeRate = (value) => {
+        const a = audio();
+        if (a)
+            a.playbackRate = value;
+        setRate(value);
+    };
+    const actions = (0, react_1.useRef)({ togglePlay, seekBy, toggleMute, changeVolume });
+    (0, react_1.useEffect)(() => {
+        actions.current = { togglePlay, seekBy, toggleMute, changeVolume };
+    });
+    (0, react_1.useEffect)(() => {
+        const onKey = (event) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaItems_1.isTypingTarget)(event.target))
+                return;
+            const a = actions.current;
+            const key = event.key.toLowerCase();
+            const playerHasFocus = (_b = (_a = shellRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) !== null && _b !== void 0 ? _b : false;
+            if (!playerHasFocus && key !== " " && key !== "k")
+                return;
+            if (key === " " || key === "k")
+                a.togglePlay();
+            else if (key === "j")
+                a.seekBy(-mediaItems_1.SEEK_STEP_SECONDS);
+            else if (key === "l")
+                a.seekBy(mediaItems_1.SEEK_STEP_SECONDS);
+            else if (key === "m")
+                a.toggleMute();
+            else if (event.key === "ArrowRight")
+                a.seekBy(ARROW_SEEK_SECONDS);
+            else if (event.key === "ArrowLeft")
+                a.seekBy(-ARROW_SEEK_SECONDS);
+            else if (event.key === "ArrowUp")
+                a.changeVolume(Math.min(100, ((_d = (_c = audio()) === null || _c === void 0 ? void 0 : _c.volume) !== null && _d !== void 0 ? _d : 0) * 100 + ARROW_VOLUME_STEP * 100));
+            else if (event.key === "ArrowDown")
+                a.changeVolume(Math.max(0, ((_f = (_e = audio()) === null || _e === void 0 ? void 0 : _e.volume) !== null && _f !== void 0 ? _f : 0) * 100 - ARROW_VOLUME_STEP * 100));
+            else
+                return;
+            event.preventDefault();
+        };
+        const el = audioRef.current;
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("keydown", onKey);
+            el === null || el === void 0 ? void 0 : el.pause();
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setPlaying(false);
+        setCurrent(0);
+        setDuration(0);
+        setRate(1);
+        setFailed(false);
+        setBuffered([]);
+        if (audioRef.current)
+            audioRef.current.playbackRate = 1;
+    }, [item.key]);
+    const clock = (seconds) => (0, mediaItems_1.formatClock)(seconds);
+    const effectiveVolume = muted ? 0 : Math.round(volume * 100);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: shellRef, as: "section", "aria-label": `${labels.audioPlayer}: ${label}`, position: "absolute", inset: 0, bg: chrome.stage, children: [(0, jsx_runtime_1.jsx)("audio", { ref: audioRef, src: item.src, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onError: () => setFailed(true), onProgress: (e) => {
+                    const ranges = e.currentTarget.buffered;
+                    setBuffered(Array.from({ length: ranges.length }, (_, i) => ({ start: ranges.start(i), end: ranges.end(i) })));
+                }, onTimeUpdate: (e) => {
+                    setCurrent(e.currentTarget.currentTime);
+                    onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
+                }, onLoadedMetadata: (e) => setDuration(e.currentTarget.duration), onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
+                    setVolume(e.currentTarget.volume);
+                    setMuted(e.currentTarget.muted);
+                }, "data-testid": "media-audio" }), failed ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Music, { size: 48, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", maxW: "480px", children: [(0, jsx_runtime_1.jsx)(MediaScrubber_1.default, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: duration <= 0, testId: "media-audio-seek" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 20 }), onClick: togglePlay, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 }), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 }), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-forward" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-audio-mute" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: volumeHover ? "88px" : "0px", overflow: "hidden", px: volumeHover ? 1 : 0, transition: "width 0.2s ease-out", sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-audio-time", children: [clock(current), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-speed", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
+};
+exports.default = MediaAudioPlayer;

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

@@ -0,0 +1,48 @@
+import type { MediaItem } from "../mediaItems";
+/** All copy shown in the audio player, merged over `defaultMediaAudioPlayerLabels`. */
+export interface MediaAudioPlayerLabels {
+    /** Accessible name for the player region, combined with `label`. */
+    audioPlayer: string;
+    /** Shown instead of the transport when the file fails to load. */
+    audioError: string;
+    /** Big center play button and transport play toggle, when paused. */
+    play: string;
+    /** Transport play toggle, shown while playing. */
+    pause: string;
+    /** Accessible name of the transport `role="toolbar"` control group. */
+    audioControls: string;
+    /** Accessible name of the seek slider. */
+    seek: string;
+    /** Rewind-`SEEK_STEP_SECONDS` transport button, hint "J". */
+    rewind: string;
+    /** Forward-`SEEK_STEP_SECONDS` transport button, hint "L". */
+    forward: string;
+    /** Mute-toggle label shown while muted or at zero volume. */
+    unmute: string;
+    /** Mute-toggle label shown while audible. */
+    mute: string;
+    /** Accessible name of the volume slider. */
+    volume: string;
+    /** Accessible name of the playback-speed menu. */
+    speed: string;
+    /** Suffix shown next to "1x" in the speed menu, e.g. "1x - Normal". */
+    normalSpeed: string;
+    /** Download transport button's accessible name. */
+    download: string;
+    /** Builds the seek slider's `aria-valuetext` from two already-`formatClock`-ed strings. */
+    seekValue: (current: string, total: string) => string;
+    /** @deprecated Never read by MediaAudioPlayer; defined but unused. */
+    loading: string;
+}
+export declare const defaultMediaAudioPlayerLabels: MediaAudioPlayerLabels;
+/** Props for the shared-scrubber audio transport rendered for `kind: "audio"` items. */
+export interface MediaAudioPlayerProps {
+    /** The audio file to play; changing `item.key` resets playback state. */
+    item: MediaItem;
+    /** Accessible name for the player region, combined with `audioPlayer`. */
+    label: string;
+    /** Fires on every `timeupdate`, with the current playback position in seconds. */
+    onTimeChange?: (seconds: number) => void;
+    /** Overrides for any of `defaultMediaAudioPlayerLabels`, merged over the defaults. */
+    labels?: Partial<MediaAudioPlayerLabels>;
+}

package/dist/Components/MediaViewer/components/MediaAudioPlayerProps.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaAudioPlayerLabels = void 0;
+exports.defaultMediaAudioPlayerLabels = {
+    audioPlayer: "Audio player",
+    audioError: "This audio could not be played",
+    play: "Play",
+    pause: "Pause",
+    audioControls: "Audio controls",
+    seek: "Seek",
+    rewind: "Back 10 seconds",
+    forward: "Forward 10 seconds",
+    unmute: "Unmute",
+    mute: "Mute",
+    volume: "Volume",
+    speed: "Playback speed",
+    normalSpeed: "Normal",
+    download: "Download",
+    seekValue: (current, total) => `${current} of ${total}`,
+    loading: "Loading",
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type MediaDocumentStageProps } from "./MediaDocumentStageProps";
+export declare const MediaDocumentStage: React.FC<MediaDocumentStageProps>;
+export default MediaDocumentStage;

package/dist/Components/MediaViewer/components/MediaDocumentStage.js

@@ -0,0 +1,149 @@
+"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 });
+exports.MediaDocumentStage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const PdfViewer_1 = __importDefault(require("../../PdfViewer/PdfViewer"));
+const useViewerChrome_1 = require("../useViewerChrome");
+const mediaKindIcon_1 = require("./mediaKindIcon");
+const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
+const sanitizeDocxHrefs_1 = require("./sanitizeDocxHrefs");
+const MediaDocumentStageProps_1 = require("./MediaDocumentStageProps");
+const DOCX_EXT_RE = /\.docx(?:[?#].*)?$/i;
+const isDocxSource = (item) => { var _a; return DOCX_EXT_RE.test((_a = item.name) !== null && _a !== void 0 ? _a : "") || DOCX_EXT_RE.test(item.src); };
+function PdfStage({ url, label }) {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, px: { base: 0, md: 20 }, py: { base: 0, md: 4 }, sx: {
+            "& > div": { height: "100%", display: "flex", flexDirection: "column" },
+            "& embed": { flex: 1, height: "100%" },
+        }, "data-testid": "media-pdf", children: (0, jsx_runtime_1.jsx)(PdfViewer_1.default, { pdfUrl: url, fileName: label, height: "100%", showToolbar: false }) }));
+}
+const DOCX_PREVIEW = "docx-preview";
+const loadDocxPreview = () => Promise.resolve(`${DOCX_PREVIEW}`).then(s => __importStar(require(s)));
+function WordStage({ itemKey, url, blob, label, labels }) {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const hostRef = (0, react_1.useRef)(null);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setFailed(false);
+        const host = hostRef.current;
+        if (!host)
+            return;
+        let live = true;
+        loadDocxPreview()
+            .then(({ renderAsync }) => renderAsync(blob, host, undefined, { inWrapper: true, ignoreLastRenderedPageBreak: true }))
+            .then(() => {
+            if (live)
+                (0, sanitizeDocxHrefs_1.sanitizeDocxHrefs)(host);
+        })
+            .catch(() => {
+            if (live)
+                setFailed(true);
+        });
+        return () => {
+            live = false;
+            host.replaceChildren();
+        };
+    }, [itemKey, blob]);
+    if (failed) {
+        return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)("doc"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: hostRef, position: "absolute", inset: 0, overflow: "auto", sx: { "& .docx-wrapper": { background: chrome.stage, padding: { base: 2, md: 6 } } }, "data-testid": "media-doc" }));
+}
+function TextStage({ itemKey, url, blob, label, labels }) {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const [state, setState] = (0, react_1.useState)({
+        status: "loading",
+    });
+    (0, react_1.useEffect)(() => {
+        let live = true;
+        setState({ status: "loading" });
+        const load = blob ? blob.text() : fetch(url).then((res) => (res.ok ? res.text() : Promise.reject(new Error("fetch failed"))));
+        load
+            .then((text) => {
+            if (live)
+                setState({ status: "ready", text });
+        })
+            .catch(() => {
+            if (live)
+                setState({ status: "error" });
+        });
+        return () => {
+            live = false;
+        };
+    }, [itemKey, url, blob]);
+    if (state.status === "loading") {
+        return ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", "data-testid": "media-text-loading", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "lg", label: labels.loadingFile, color: chrome.ink }) }));
+    }
+    if (state.status === "error") {
+        return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.warningIcon)(), label: label, message: labels.textLoadError, downloadHref: url, downloadLabel: labels.download, tone: "warning", testId: "media-text-error" }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, overflow: "auto", px: { base: 3, md: 8 }, py: 4, "data-testid": "media-text", children: (0, jsx_runtime_1.jsx)(react_2.Text, { as: "pre", fontFamily: "mono", fontSize: "sm", whiteSpace: "pre-wrap", wordBreak: "break-word", color: chrome.ink, children: state.text }) }));
+}
+const MediaDocumentStage = ({ item, label, resolveDocument, labels: labelOverrides, }) => {
+    const labels = { ...MediaDocumentStageProps_1.defaultMediaDocumentStageLabels, ...labelOverrides };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const resolution = resolveDocument(item);
+    if (resolution.status === "loading") {
+        return ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", "data-testid": "media-file-loading", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "lg", label: labels.loadingFile, color: chrome.ink }) }));
+    }
+    if (resolution.status === "missing" || resolution.status === "error") {
+        return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { label: label, message: labels.fileError, downloadLabel: labels.download, icon: (0, mediaKindIcon_1.warningIcon)(), tone: "warning", testId: "media-file-missing" }));
+    }
+    if (item.kind === "pdf")
+        return (0, jsx_runtime_1.jsx)(PdfStage, { url: resolution.url, label: label });
+    if (item.kind === "text") {
+        return (0, jsx_runtime_1.jsx)(TextStage, { itemKey: item.key, url: resolution.url, blob: resolution.blob, label: label, labels: labels });
+    }
+    if (item.kind === "spreadsheet" || item.kind === "presentation" || item.kind === "archive") {
+        return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)(item.kind), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: `media-${item.kind}` }));
+    }
+    if (item.kind === "doc") {
+        if (!isDocxSource(item)) {
+            return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)("doc"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+        }
+        if (!resolution.blob) {
+            return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { label: label, message: labels.fileError, downloadLabel: labels.download, icon: (0, mediaKindIcon_1.warningIcon)(), tone: "warning", testId: "media-file-missing" }));
+        }
+        return (0, jsx_runtime_1.jsx)(WordStage, { itemKey: item.key, url: resolution.url, blob: resolution.blob, label: label, labels: labels });
+    }
+    return ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)("file"), label: label, message: labels.noPreview, hint: labels.noPreviewHint, downloadHref: resolution.url, downloadLabel: labels.download, testId: "media-file", downloadTestId: "media-file-download" }));
+};
+exports.MediaDocumentStage = MediaDocumentStage;
+exports.default = exports.MediaDocumentStage;

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

@@ -0,0 +1,42 @@
+import type { MediaItem } from "../mediaItems";
+/** Result of the host app resolving a document item to a fetchable url (and, for DOCX, a Blob). */
+export type DocumentResolution = {
+    status: "loading";
+} | {
+    status: "ready";
+    url: string;
+    blob?: Blob;
+} | {
+    status: "missing";
+} | {
+    status: "error";
+};
+/** Host-supplied resolver, called every render like a hook-shaped prop — no default, no built-in fetch. */
+export type ResolveDocument = (item: MediaItem) => DocumentResolution;
+/** All copy shown by the document stage, merged over `defaultMediaDocumentStageLabels`. */
+export interface MediaDocumentStageLabels {
+    /** Download button's accessible name on every status panel. */
+    download: string;
+    /** Headline shown for a kind with no inline preview (spreadsheet, presentation, archive, non-docx doc). */
+    noPreview: string;
+    /** Hint text under `noPreview`, prompting a download instead. */
+    noPreviewHint: string;
+    /** Spinner label while `resolveDocument` reports `status: "loading"`, and while fetching a text file. */
+    loadingFile: string;
+    /** Shown when `resolveDocument` reports `status: "missing"` or `"error"`, or a docx resolves with no blob. */
+    fileError: string;
+    /** Shown when a text/code file fails to fetch for preview. */
+    textLoadError: string;
+}
+export declare const defaultMediaDocumentStageLabels: MediaDocumentStageLabels;
+/** Props for the pdf/doc/text/spreadsheet/presentation/archive/file stage. */
+export interface MediaDocumentStageProps {
+    /** The document item to render; changing `item.key` resets internal render-failure state. */
+    item: MediaItem;
+    /** Accessible name / display label for the file. */
+    label: string;
+    /** Resolves `item` to a url/blob; the host app owns its own data-fetching pipeline. */
+    resolveDocument: ResolveDocument;
+    /** Overrides for any of `defaultMediaDocumentStageLabels`, merged over the defaults. */
+    labels?: Partial<MediaDocumentStageLabels>;
+}

package/dist/Components/MediaViewer/components/MediaDocumentStageProps.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaDocumentStageLabels = void 0;
+exports.defaultMediaDocumentStageLabels = {
+    download: "Download",
+    noPreview: "This file can't be previewed here",
+    noPreviewHint: "Download it to open it on your device.",
+    loadingFile: "Loading file…",
+    fileError: "This file could not be loaded. It may have been moved or deleted.",
+    textLoadError: "This file's contents could not be loaded.",
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { type MediaImageViewerProps } from "./MediaImageViewerProps";
+declare const MediaImageViewer: React.FC<MediaImageViewerProps>;
+export default MediaImageViewer;