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

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

@@ -0,0 +1,150 @@
+"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 }) }));
+}
+/** Document stage of MediaViewer: previews PDF, DOCX and text files inline, other kinds get a download panel; loading and error states come from `resolveDocument`. */
+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,5 @@
+import React from "react";
+import { type MediaImageViewerProps } from "./MediaImageViewerProps";
+/** Image stage of MediaViewer with zoom, drag-to-pan, rotation and keyboard shortcuts. */
+declare const MediaImageViewer: React.FC<MediaImageViewerProps>;
+export default MediaImageViewer;

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

@@ -0,0 +1,115 @@
+"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 useFullscreen_1 = require("../../../Hooks/useFullscreen");
+const mediaItems_1 = require("../mediaItems");
+const useViewerChrome_1 = require("../useViewerChrome");
+const mediaKindIcon_1 = require("./mediaKindIcon");
+const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
+const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
+const MediaImageViewerProps_1 = require("./MediaImageViewerProps");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const TRANSFORM_OUT_TRANSITION = (0, motion_1.transitionFor)(["transform"], "fast", "out");
+const ORIGIN = { x: 0, y: 0 };
+const transformFor = (pan, zoom, rotation) => `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`;
+/** Image stage of MediaViewer with zoom, drag-to-pan, rotation and keyboard shortcuts. */
+const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: labelOverrides, }) => {
+    const labels = { ...MediaImageViewerProps_1.defaultMediaImageViewerLabels, ...labelOverrides };
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const stageRef = (0, react_1.useRef)(null);
+    const imageRef = (0, react_1.useRef)(null);
+    const drag = (0, react_1.useRef)(null);
+    const pan = (0, react_1.useRef)(ORIGIN);
+    const [zoom, setZoom] = (0, react_1.useState)(100);
+    const [rotation, setRotation] = (0, react_1.useState)(0);
+    const [failed, setFailed] = (0, react_1.useState)(false);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const { isFullscreen, toggle: toggleFullscreen, isSupported: fullscreenSupported } = (0, useFullscreen_1.useFullscreen)(stageRef);
+    (0, react_1.useEffect)(() => {
+        onZoomChange === null || onZoomChange === void 0 ? void 0 : onZoomChange(zoom);
+    }, [zoom, onZoomChange]);
+    // Defense in depth: a parent that reuses this instance across items (no key remount) must not carry state over.
+    (0, react_1.useEffect)(() => {
+        resetPan();
+        setZoom(100);
+        setRotation(0);
+        setFailed(false);
+    }, [item.key]);
+    const resetPan = () => {
+        pan.current = ORIGIN;
+        drag.current = null;
+        setDragging(false);
+    };
+    const zoomBy = (delta) => {
+        const next = (0, mediaItems_1.clampZoom)(zoom + delta);
+        setZoom(next);
+        if (next <= 100)
+            resetPan();
+    };
+    const reset = () => {
+        resetPan();
+        setZoom(100);
+        setRotation(0);
+    };
+    const rotate = () => setRotation((r) => (r + 90) % 360);
+    const actions = (0, react_1.useRef)({ zoomBy, reset, rotate, toggleFullscreen });
+    (0, react_1.useEffect)(() => {
+        actions.current = { zoomBy, reset, rotate, toggleFullscreen };
+    });
+    (0, react_1.useEffect)(() => {
+        const onKey = (event) => {
+            if (event.ctrlKey || event.metaKey || event.altKey || (0, mediaItems_1.isTypingTarget)(event.target))
+                return;
+            const a = actions.current;
+            if (event.key === "+" || event.key === "=")
+                a.zoomBy(mediaItems_1.ZOOM_STEP);
+            else if (event.key === "-" || event.key === "_")
+                a.zoomBy(-mediaItems_1.ZOOM_STEP);
+            else if (event.key === "0")
+                a.reset();
+            else if (event.key === "r" || event.key === "R")
+                a.rotate();
+            else if (event.key === "f" || event.key === "F")
+                void a.toggleFullscreen();
+            else
+                return;
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, []);
+    const unsupported = (0, mediaItems_1.isUnsupportedImageSrc)(item.src);
+    const onPointerDown = (event) => {
+        if (zoom <= 100)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { start: { x: event.clientX, y: event.clientY }, from: pan.current };
+        setDragging(true);
+    };
+    const onPointerMove = (event) => {
+        const d = drag.current;
+        if (!d)
+            return;
+        pan.current = { x: d.from.x + event.clientX - d.start.x, y: d.from.y + event.clientY - d.start.y };
+        if (imageRef.current)
+            imageRef.current.style.transform = transformFor(pan.current, zoom, rotation);
+    };
+    const endDrag = () => {
+        drag.current = null;
+        setDragging(false);
+    };
+    if (unsupported) {
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: chrome.stage, children: (0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)("image"), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-image-unsupported" }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", p: { base: 2, md: 6 }, pb: { base: 20, md: 24 }, cursor: zoom > 100 ? (dragging ? "grabbing" : "grab") : "default", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, sx: { touchAction: zoom > 100 ? "none" : "pan-y" }, children: failed ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.warningIcon)(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : ((0, jsx_runtime_1.jsx)(react_2.Image, { ref: imageRef, src: item.src, alt: label, maxW: "100%", maxH: "100%", objectFit: "contain", draggable: false, userSelect: "none", onError: () => setFailed(true), onLoad: (event) => onNaturalSize === null || onNaturalSize === void 0 ? void 0 : onNaturalSize({
+                        width: event.currentTarget.naturalWidth,
+                        height: event.currentTarget.naturalHeight,
+                    }), style: { transform: transformFor(pan.current, zoom, rotation) }, transition: dragging ? "none" : TRANSFORM_OUT_TRANSITION, "data-testid": "media-image" })) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.imageControls, position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", align: "center", gap: 1, p: 1, borderRadius: "xl", bg: chrome.raised, borderWidth: "1px", borderColor: chrome.hover, maxW: "calc(100% - 16px)", overflowX: "auto", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomOut, hint: "-", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomOut, { size: 18 }), onClick: () => zoomBy(-mediaItems_1.ZOOM_STEP), isDisabled: zoom <= mediaItems_1.MIN_ZOOM, testId: "media-zoom-out" }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "output", "aria-live": "polite", "aria-label": labels.zoomLevel, minW: "56px", textAlign: "center", fontSize: "sm", fontWeight: 600, color: chrome.ink, "data-testid": "media-zoom-level", children: `${zoom}%` }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomIn, hint: "+", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 18 }), onClick: () => zoomBy(mediaItems_1.ZOOM_STEP), isDisabled: zoom >= mediaItems_1.MAX_ZOOM, testId: "media-zoom-in" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.fitLabel, hint: "0", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rotate, hint: "R", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
+};
+exports.default = MediaImageViewer;

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

@@ -0,0 +1,47 @@
+import type { MediaItem } from "../mediaItems";
+/** All copy shown in the image stage, merged over `defaultMediaImageViewerLabels`. */
+export interface MediaImageViewerLabels {
+    /** Shown instead of the image when it fails to load. */
+    imageError: string;
+    /** Accessible name of the `role="toolbar"` control group. */
+    imageControls: string;
+    /** Zoom-out button, hint "-"; disabled at `MIN_ZOOM`. */
+    zoomOut: string;
+    /** Accessible name of the live zoom-percent readout. */
+    zoomLevel: string;
+    /** Zoom-in button, hint "+"; disabled at `MAX_ZOOM`. */
+    zoomIn: string;
+    /** Tooltip/title for the reset-to-100% button, e.g. "Fit to screen (0)". */
+    fitLabel: string;
+    /** Visible text on the reset button. */
+    fit: string;
+    /** Rotate-90°-clockwise button, hint "R". */
+    rotate: string;
+    /** Fullscreen toggle label shown while already fullscreen. */
+    exitFullscreen: string;
+    /** Fullscreen toggle label shown while not fullscreen; only rendered when supported. */
+    fullscreen: string;
+    /** Download button's accessible name on the error/unsupported panels. */
+    download: string;
+    /** Shown for a format the browser can't decode inline (HEIC/HEIF), instead of a broken image. */
+    unsupportedFormat: string;
+    /** Hint text under `unsupportedFormat`, prompting a download instead. */
+    unsupportedFormatHint: string;
+}
+export declare const defaultMediaImageViewerLabels: MediaImageViewerLabels;
+/** Props for the pan/zoom image stage. */
+export interface MediaImageViewerProps {
+    /** The image to display; changing `item.key` resets zoom/rotation/pan. */
+    item: MediaItem;
+    /** Accessible name (`alt`) for the rendered image. */
+    label: string;
+    /** Fires whenever zoom changes (keyboard, buttons, wheel); also gates swipe nav in the parent viewer. */
+    onZoomChange?: (zoom: number) => void;
+    /** Reports the loaded image's intrinsic pixel size. */
+    onNaturalSize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** Overrides for any of `defaultMediaImageViewerLabels`, merged over the defaults. */
+    labels?: Partial<MediaImageViewerLabels>;
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaImageViewerLabels = void 0;
+exports.defaultMediaImageViewerLabels = {
+    imageError: "This photo could not be loaded",
+    imageControls: "Image controls",
+    zoomOut: "Zoom out",
+    zoomLevel: "Zoom level",
+    zoomIn: "Zoom in",
+    fitLabel: "Fit to screen",
+    fit: "Fit",
+    rotate: "Rotate",
+    exitFullscreen: "Exit fullscreen",
+    fullscreen: "Fullscreen",
+    download: "Download",
+    unsupportedFormat: "This photo format can't be previewed here",
+    unsupportedFormatHint: "Download it to view it on your device.",
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { MediaScrubberProps } from "./MediaScrubberProps";
+/** Shared scrubber for video and audio — buffered range, hover/drag time tooltip, full keyboard slider semantics. */
+declare const MediaScrubber: React.FC<MediaScrubberProps>;
+export default MediaScrubber;

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
+const typography_1 = require("../../../Theme/tokens/primitives/typography");
+const useViewerChrome_1 = require("../useViewerChrome");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const HEIGHT_TRANSITION = (0, motion_1.transitionFor)(["height"], "fast", "out");
+const THUMB_TRANSITION = (0, motion_1.transitionFor)(["width", "height"], "fast", "out");
+const STEP_SECONDS = 5;
+const BIG_STEP_SECONDS = 30;
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/** Shared scrubber for video and audio — buffered range, hover/drag time tooltip, full keyboard slider semantics. */
+const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel, ariaValueText, formatTime, isDisabled = false, testId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const trackRef = (0, react_1.useRef)(null);
+    const dragging = (0, react_1.useRef)(false);
+    const [hovering, setHovering] = (0, react_1.useState)(false);
+    const [previewX, setPreviewX] = (0, react_1.useState)(null);
+    const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
+    const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
+    const fraction = disabled ? 0 : clamp(value / max, 0, 1);
+    const fractionAt = (clientX) => {
+        var _a;
+        const rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect || rect.width === 0)
+            return 0;
+        return clamp((clientX - rect.left) / rect.width, 0, 1);
+    };
+    const previewAt = (clientX) => {
+        const f = fractionAt(clientX);
+        setPreviewX(f * 100);
+        onPreview === null || onPreview === void 0 ? void 0 : onPreview(f * max);
+    };
+    const endPreview = () => {
+        setPreviewX(null);
+        onPreview === null || onPreview === void 0 ? void 0 : onPreview(null);
+    };
+    const onPointerDown = (event) => {
+        if (disabled)
+            return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragging.current = true;
+        previewAt(event.clientX);
+    };
+    const onPointerMove = (event) => {
+        if (disabled)
+            return;
+        if (dragging.current)
+            previewAt(event.clientX);
+        else if (hovering)
+            previewAt(event.clientX);
+    };
+    const onPointerUp = (event) => {
+        if (disabled || !dragging.current)
+            return;
+        dragging.current = false;
+        onSeek(fractionAt(event.clientX) * max);
+        if (!hovering)
+            endPreview();
+    };
+    const onKeyDown = (event) => {
+        if (disabled)
+            return;
+        let next = null;
+        if (event.key === "ArrowRight" || event.key === "ArrowUp")
+            next = value + STEP_SECONDS;
+        else if (event.key === "ArrowLeft" || event.key === "ArrowDown")
+            next = value - STEP_SECONDS;
+        else if (event.key === "PageUp")
+            next = value + BIG_STEP_SECONDS;
+        else if (event.key === "PageDown")
+            next = value - BIG_STEP_SECONDS;
+        else if (event.key === "Home")
+            next = 0;
+        else if (event.key === "End")
+            next = max;
+        if (next === null)
+            return;
+        event.preventDefault();
+        onSeek(clamp(next, 0, max));
+    };
+    const trackH = hovering || dragging.current ? "6px" : "4px";
+    const previewLabel = previewX !== null ? formatTime((previewX / 100) * max) : null;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", py: 2, cursor: disabled ? "default" : "pointer", onMouseEnter: () => setHovering(true), onMouseLeave: () => {
+            setHovering(false);
+            if (!dragging.current)
+                endPreview();
+        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: "100%", style: { left: `${previewX}%` }, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "base", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: typography_1.NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: HEIGHT_TRANSITION, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: focusShadow }, "data-testid": testId, children: [buffered.map((range, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, style: {
+                            left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`,
+                            width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`,
+                        }, bg: chrome.hover, borderRadius: "full" }, i))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", style: { left: `${fraction * 100}%` }, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: THUMB_TRANSITION, pointerEvents: "none" })] })] }));
+};
+exports.default = MediaScrubber;

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

@@ -0,0 +1,30 @@
+/** One contiguous buffered time range, as reported by `HTMLMediaElement.buffered`. */
+export interface BufferedRange {
+    /** Range start, in seconds. */
+    start: number;
+    /** Range end, in seconds. */
+    end: number;
+}
+/** Props for the shared video/audio scrubber — a custom `role="slider"`, not Chakra's Slider. */
+export interface MediaScrubberProps {
+    /** Current committed playback position, in seconds. */
+    value: number;
+    /** Duration in seconds; a non-finite/zero value disables the scrubber. */
+    max: number;
+    /** Buffered ranges (from `video.buffered`), plotted behind the play progress. */
+    buffered?: BufferedRange[];
+    /** Fires on keyboard step, click and drag-release — the caller should seek the media here. */
+    onSeek: (seconds: number) => void;
+    /** Fires continuously while hovering/dragging, and with `null` when the pointer leaves — preview only, never seeks. */
+    onPreview?: (seconds: number | null) => void;
+    /** Accessible name of the `role="slider"` track. */
+    ariaLabel: string;
+    /** Builds the track's `aria-valuetext`; skipped while disabled. */
+    ariaValueText: (seconds: number) => string;
+    /** Formats the hover/drag tooltip's timestamp. */
+    formatTime: (seconds: number) => string;
+    /** Also forced true whenever `max` is non-finite or `<= 0`. */
+    isDisabled?: boolean;
+    /** Base `data-testid`; the hover tooltip gets `${testId}-tooltip`. */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { MediaStatusPanelProps } from "./MediaStatusPanelProps";
+/** One panel for every non-preview stage state — loading/error/missing/no-preview — icon and wording vary, layout never does. */
+declare const MediaStatusPanel: React.FC<MediaStatusPanelProps>;
+export default MediaStatusPanel;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useViewerChrome_1 = require("../useViewerChrome");
+/** One panel for every non-preview stage state — loading/error/missing/no-preview — icon and wording vary, layout never does. */
+const MediaStatusPanel = ({ icon, label, message, hint, downloadHref, downloadLabel, tone = "neutral", testId, downloadTestId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const warning = tone === "warning";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "absolute", inset: 0, direction: "column", align: "center", justify: "center", gap: 3, px: { base: 14, md: 16 }, textAlign: "center", color: chrome.ink, role: warning ? "alert" : undefined, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { color: warning ? chrome.accent : chrome.muted, children: (0, react_1.cloneElement)(icon, { size: 48, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, wordBreak: "break-word", children: label }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: chrome.muted, children: message }), hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: chrome.muted, children: hint })) : null, downloadHref ? ((0, jsx_runtime_1.jsx)(react_2.Button, { as: react_2.Link, href: downloadHref, download: label, size: "sm", colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": true }), "data-testid": downloadTestId !== null && downloadTestId !== void 0 ? downloadTestId : (testId ? `${testId}-download` : undefined), children: downloadLabel })) : null] }));
+};
+exports.default = MediaStatusPanel;

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

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+/** Non-preview state a stage can be in: pick the icon/wording/download combo that fits. */
+export type MediaStatusTone = "neutral" | "warning";
+/** Props for the shared no-preview/error/missing panel — vary icon/wording/download, never the layout. */
+export interface MediaStatusPanelProps {
+    /** Rendered at 48px, `aria-hidden`; tinted by `tone`. */
+    icon: ReactElement;
+    /** File/item name shown as the panel's headline. */
+    label: string;
+    /** Body text under the headline. */
+    message: string;
+    /** Optional extra line under `message`. */
+    hint?: string;
+    /** Shows the download button when set; omit to render no download action. */
+    downloadHref?: string;
+    /** Download button's visible text and accessible name. */
+    downloadLabel: string;
+    /** "warning" renders `role="alert"` and the warning icon tint — use for error/missing/denied states. */
+    tone?: MediaStatusTone;
+    /** Root `data-testid`. */
+    testId?: string;
+    /** Overrides the download button's own testid; defaults to `${testId}-download`. */
+    downloadTestId?: string;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { type MediaVideoPlayerProps } from "./MediaVideoPlayerProps";
+/** Video stage of MediaViewer: transport, seek, volume, speed and fullscreen controls with keyboard shortcuts and double-tap skip. */
+declare const MediaVideoPlayer: React.FC<MediaVideoPlayerProps>;
+export default MediaVideoPlayer;