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

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

@@ -0,0 +1,71 @@
+import type { MediaItem } from "../mediaItems";
+/** All copy shown in the video player, merged over `defaultMediaVideoPlayerLabels`. */
+export interface MediaVideoPlayerLabels {
+    /** Accessible name for the player region, combined with `label`. */
+    videoPlayer: string;
+    /** Shown instead of the video when it fails to load. */
+    videoError: 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. */
+    videoControls: 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;
+    /** Caption toggle button, only rendered once the video reports text tracks. */
+    captions: string;
+    /** Toggle button, only rendered when the browser supports picture-in-picture. */
+    pip: string;
+    /** Download transport button's accessible name. */
+    download: string;
+    /** Fullscreen toggle label shown while already fullscreen. */
+    exitFullscreen: string;
+    /** Fullscreen toggle label shown while not fullscreen. */
+    fullscreen: string;
+    /** Builds the seek slider's `aria-valuetext` from two already-`formatClock`-ed strings. */
+    seekValue: (current: string, total: string) => string;
+    /** Previous-item transport button; only rendered when `onPrevious` is passed. */
+    previous: string;
+    /** Next-item transport button; only rendered when `onNext` is passed. */
+    next: string;
+    /** @deprecated Never read by MediaVideoPlayer; defined but unused. */
+    loading: string;
+    /** Shown for a source extension known not to play natively (avi/mkv/m3u8), instead of attempting playback. */
+    unsupportedFormat: string;
+    /** Hint text under `unsupportedFormat`, prompting a download instead. */
+    unsupportedFormatHint: string;
+    /** Screen-reader announcement for a double-click/tap skip, distinct from the visible ripple. */
+    skipBack: (seconds: number) => string;
+    skipForward: (seconds: number) => string;
+}
+export declare const defaultMediaVideoPlayerLabels: MediaVideoPlayerLabels;
+/** Props for the Netflix/Prime-style video transport rendered for `kind: "video"` items. */
+export interface MediaVideoPlayerProps {
+    /** The video to play; changing `item.key` resets playback state (also guards against a parent that reuses this instance without a key remount). */
+    item: MediaItem;
+    /** Accessible name for the player region, combined with `videoPlayer`. */
+    label: string;
+    /** Fires on every `timeupdate`, with the video's current playback position in seconds. */
+    onTimeChange?: (seconds: number) => void;
+    /** Shows a transport "previous" button when the gallery has a sibling before this item. */
+    onPrevious?: () => void;
+    /** Shows a transport "next" button when the gallery has a sibling after this item. */
+    onNext?: () => void;
+    /** Overrides for any of `defaultMediaVideoPlayerLabels`, merged over the defaults. */
+    labels?: Partial<MediaVideoPlayerLabels>;
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultMediaVideoPlayerLabels = void 0;
+exports.defaultMediaVideoPlayerLabels = {
+    videoPlayer: "Video player",
+    videoError: "This video could not be played",
+    play: "Play",
+    pause: "Pause",
+    videoControls: "Video controls",
+    seek: "Seek",
+    rewind: "Back 10 seconds",
+    forward: "Forward 10 seconds",
+    unmute: "Unmute",
+    mute: "Mute",
+    volume: "Volume",
+    speed: "Playback speed",
+    normalSpeed: "Normal",
+    captions: "Captions",
+    pip: "Picture in picture",
+    download: "Download",
+    exitFullscreen: "Exit fullscreen",
+    fullscreen: "Fullscreen",
+    seekValue: (current, total) => `${current} of ${total}`,
+    previous: "Previous",
+    next: "Next",
+    loading: "Loading",
+    unsupportedFormat: "This format can't be played here",
+    unsupportedFormatHint: "Download it to play it on your device.",
+    skipBack: (seconds) => `Skipped back ${seconds} seconds`,
+    skipForward: (seconds) => `Skipped forward ${seconds} seconds`,
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { TileChipProps } from "./TileChipProps";
+/** Decorative absolutely-positioned pill on a filmstrip/grid tile — the tile itself carries the a11y label. */
+declare const TileChip: React.FC<TileChipProps>;
+export default TileChip;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useViewerChrome_1 = require("../useViewerChrome");
+/** Decorative absolutely-positioned pill on a filmstrip/grid tile — the tile itself carries the a11y label. */
+const TileChip = ({ children, place }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const corner = place === "tl" ? { left: "6px", top: "6px" } : { right: "6px", bottom: "6px" };
+    return ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", position: "absolute", ...corner, h: "18px", px: "6px", borderRadius: "4px", bg: chrome.stage, color: chrome.ink, fontSize: "11px", fontWeight: 600, display: "inline-flex", alignItems: "center", "aria-hidden": true, children: children }));
+};
+exports.default = TileChip;

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

@@ -0,0 +1,7 @@
+/** A small corner pill on a filmstrip tile — carries a file-type label or a badge. */
+export interface TileChipProps {
+    /** The pill's text content, e.g. a file extension or duration. */
+    children: string;
+    /** Corner to anchor the pill: top-left or bottom-right. */
+    place: "tl" | "br";
+}

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { VideoPosterProps } from "./VideoPosterProps";
+/** Thumbnail-only muted video seeked near its start, so a video tile needs no separate poster asset. */
+declare const VideoPoster: React.FC<VideoPosterProps>;
+export default VideoPoster;

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

@@ -0,0 +1,16 @@
+"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 mediaItems_1 = require("../mediaItems");
+const TileChip_1 = __importDefault(require("./TileChip"));
+/** Thumbnail-only muted video seeked near its start, so a video tile needs no separate poster asset. */
+const VideoPoster = ({ item }) => {
+    const [duration, setDuration] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: `${item.src}#t=0.1`, preload: "metadata", muted: true, playsInline: true, tabIndex: -1, "aria-hidden": true, w: "100%", h: "100%", objectFit: "cover", pointerEvents: "none", onLoadedMetadata: (event) => setDuration(event.currentTarget.duration) }), duration !== null && Number.isFinite(duration) ? ((0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: (0, mediaItems_1.formatClock)(duration) })) : null] }));
+};
+exports.default = VideoPoster;

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

@@ -0,0 +1,6 @@
+import type { MediaItem } from "../mediaItems";
+/** Renders a still frame pulled from a video, used as its filmstrip thumbnail. */
+export interface VideoPosterProps {
+    /** The video item to grab a near-start frame from; only its `src` is read. */
+    item: MediaItem;
+}

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import type { ViewerIconButtonProps } from "./ViewerIconButtonProps";
+/** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
+declare const ViewerIconButton: React.FC<ViewerIconButtonProps>;
+export default ViewerIconButton;

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

@@ -0,0 +1,20 @@
+"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("@chakra-ui/react");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const useViewerChrome_1 = require("../useViewerChrome");
+const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+/** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
+const ViewerIconButton = ({ label, hint, icon, onClick, href, size = "md", round = false, pressed = false, isDisabled = false, testId, }) => {
+    const chrome = (0, useViewerChrome_1.useViewerChrome)();
+    const tooltipLabel = hint ? `${label} (${hint})` : label;
+    // The stage is a fixed dark chrome regardless of app mode, so the ring is settled against it directly.
+    const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tooltipLabel, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, ...linkProps }) }));
+};
+exports.default = ViewerIconButton;

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

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+/** The viewer chrome's icon button — tooltip, toggle and download-anchor variants. */
+export interface ViewerIconButtonProps {
+    /** Accessible name; also the tooltip text when `hint` is omitted. */
+    label: string;
+    /** Keyboard-shortcut hint appended to the tooltip, e.g. "F" renders "Fullscreen (F)". */
+    hint?: string;
+    /** Rendered inside the button; the caller sizes it (`aria-hidden` is not applied automatically). */
+    icon: ReactElement;
+    /** Ignored when `href` is set — the button renders as a download anchor instead. */
+    onClick?: () => void;
+    /** Renders as a download anchor instead of a click handler when set. */
+    href?: string;
+    /** Chakra `IconButton` size token. @default "md" */
+    size?: "sm" | "md" | "lg";
+    /** Always-filled circular treatment, for the large prev/next nav buttons. */
+    round?: boolean;
+    /** Toggle-button state, reflected as `aria-pressed`. */
+    pressed?: boolean;
+    /** @default false */
+    isDisabled?: boolean;
+    /** Forwarded to `data-testid`. */
+    testId?: string;
+}

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

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

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

@@ -0,0 +1,5 @@
+import { type ReactElement } from "react";
+import type { MediaKind } from "../mediaItems";
+/** One icon per `MediaKind`, for filmstrip tiles and status panels — never a generic grey square. */
+export declare const iconForKind: (kind: MediaKind) => ReactElement;
+export declare const warningIcon: () => ReactElement;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warningIcon = exports.iconForKind = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const KIND_ICON = {
+    image: (0, jsx_runtime_1.jsx)(lucide_react_1.Image, {}),
+    video: (0, jsx_runtime_1.jsx)(lucide_react_1.Video, {}),
+    audio: (0, jsx_runtime_1.jsx)(lucide_react_1.Music, {}),
+    youtube: (0, jsx_runtime_1.jsx)(lucide_react_1.Play, {}),
+    pdf: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, {}),
+    doc: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, {}),
+    text: (0, jsx_runtime_1.jsx)(lucide_react_1.FileCode, {}),
+    spreadsheet: (0, jsx_runtime_1.jsx)(lucide_react_1.FileSpreadsheet, {}),
+    presentation: (0, jsx_runtime_1.jsx)(lucide_react_1.Presentation, {}),
+    archive: (0, jsx_runtime_1.jsx)(lucide_react_1.Archive, {}),
+    file: (0, jsx_runtime_1.jsx)(lucide_react_1.File, {}),
+};
+/** One icon per `MediaKind`, for filmstrip tiles and status panels — never a generic grey square. */
+const iconForKind = (kind) => KIND_ICON[kind];
+exports.iconForKind = iconForKind;
+const warningIcon = () => (0, jsx_runtime_1.jsx)(lucide_react_1.FileWarning, {});
+exports.warningIcon = warningIcon;

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

@@ -0,0 +1 @@
+export declare function sanitizeDocxHrefs(root: HTMLElement): void;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeDocxHrefs = sanitizeDocxHrefs;
+const SAFE_SCHEMES = new Set(["http:", "https:", "mailto:"]);
+// docx-preview's renderAsync output is untrusted HTML; strip any href that isn't a safe scheme.
+function sanitizeDocxHrefs(root) {
+    root.querySelectorAll("a[href]").forEach((anchor) => {
+        const href = anchor.getAttribute("href");
+        if (href === null)
+            return;
+        const trimmed = href.trim();
+        if (trimmed.startsWith("#"))
+            return;
+        // Protocol-relative links inherit the page's own scheme, not the base above.
+        if (trimmed.startsWith("//")) {
+            anchor.removeAttribute("href");
+            return;
+        }
+        let scheme;
+        try {
+            scheme = new URL(trimmed, "https://sanitize.invalid/").protocol;
+        }
+        catch {
+            anchor.removeAttribute("href");
+            return;
+        }
+        if (!SAFE_SCHEMES.has(scheme))
+            anchor.removeAttribute("href");
+    });
+}

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

@@ -0,0 +1,15 @@
+import { type FocusEvent, type RefObject } from "react";
+export interface AutoHideChromeHandlers {
+    onMouseMove: () => void;
+    onPointerMove: () => void;
+    onFocus: () => void;
+    onBlur: (event: FocusEvent) => void;
+    onKeyDown: () => void;
+}
+export interface UseAutoHideChromeResult {
+    visible: boolean;
+    show: () => void;
+    handlers: AutoHideChromeHandlers;
+}
+/** Pointer-idle auto-hide only — focus inside `containerRef` (keyboard/SR use) always keeps chrome visible. */
+export declare function useAutoHideChrome(containerRef: RefObject<HTMLElement | null>, canHide: boolean, delayMs?: number): UseAutoHideChromeResult;

package/dist/Components/MediaViewer/hooks/useAutoHideChrome.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoHideChrome = useAutoHideChrome;
+const react_1 = require("react");
+const HIDE_DELAY_MS = 3000;
+/** Pointer-idle auto-hide only — focus inside `containerRef` (keyboard/SR use) always keeps chrome visible. */
+function useAutoHideChrome(containerRef, canHide, delayMs = HIDE_DELAY_MS) {
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    const [focusWithin, setFocusWithin] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(null);
+    const clear = () => {
+        if (timer.current)
+            window.clearTimeout(timer.current);
+        timer.current = null;
+    };
+    const show = (0, react_1.useCallback)(() => {
+        setVisible(true);
+        clear();
+        if (canHide && !focusWithin)
+            timer.current = setTimeout(() => setVisible(false), delayMs);
+    }, [canHide, focusWithin, delayMs]);
+    (0, react_1.useEffect)(() => {
+        if (!canHide || focusWithin) {
+            clear();
+            setVisible(true);
+            return undefined;
+        }
+        show();
+        return clear;
+    }, [canHide, focusWithin, show]);
+    const onFocus = (0, react_1.useCallback)(() => {
+        setFocusWithin(true);
+        setVisible(true);
+    }, []);
+    const onBlur = (0, react_1.useCallback)((event) => {
+        var _a;
+        const next = event.relatedTarget;
+        if (next && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(next)))
+            return;
+        setFocusWithin(false);
+    }, [containerRef]);
+    return { visible, show, handlers: { onMouseMove: show, onPointerMove: show, onFocus, onBlur, onKeyDown: show } };
+}

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

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+import type { MediaViewerProps } from "../MediaViewerProps";
+import { type MediaItem, type ResolveUrl, type ViewerFile } from "../mediaItems";
+export type UseFileViewerOptions = Omit<MediaViewerProps, "isOpen" | "onClose" | "items" | "index" | "onIndexChange" | "title">;
+export interface FileViewerApi {
+    /** Opens `files` (app-stored paths) resolved through `resolveUrl`, at `index`. */
+    open: (files: ViewerFile[], index: number, title: string, resolveUrl: ResolveUrl) => void;
+    /** Opens an already-built `MediaItem[]`, e.g. from `buildMediaItems`. */
+    openItems: (items: MediaItem[], index: number, title: string) => void;
+    /** Opens local, unsaved `File`s via object URLs; the hook owns their lifecycle. */
+    openLocal: (files: File[], index: number, title: string) => void;
+    close: () => void;
+    /** Mount this once; it renders nothing until `open`/`openItems`/`openLocal` is called. */
+    viewer: ReactNode;
+}
+/** Imperative open/close for `MediaViewer`, with object-URL lifecycle management for local files. */
+export declare function useFileViewer(options?: UseFileViewerOptions): FileViewerApi;
+export default useFileViewer;

package/dist/Components/MediaViewer/hooks/useFileViewer.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileViewer = useFileViewer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MediaViewer_1 = __importDefault(require("../MediaViewer"));
+const mediaItems_1 = require("../mediaItems");
+/** Imperative open/close for `MediaViewer`, with object-URL lifecycle management for local files. */
+function useFileViewer(options = {}) {
+    const [state, setState] = (0, react_1.useState)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const objectUrls = (0, react_1.useRef)([]);
+    const revokeAll = (0, react_1.useCallback)(() => {
+        objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        objectUrls.current = [];
+    }, []);
+    (0, react_1.useEffect)(() => revokeAll, [revokeAll]);
+    const open = (0, react_1.useCallback)((files, index, title, resolveUrl) => {
+        revokeAll();
+        setState({ items: (0, mediaItems_1.buildFileItems)(files, resolveUrl), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openItems = (0, react_1.useCallback)((items, index, title) => {
+        revokeAll();
+        setState({ items, index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const openLocal = (0, react_1.useCallback)((files, index, title) => {
+        revokeAll();
+        const viewerFiles = files.map((file) => {
+            const url = URL.createObjectURL(file);
+            objectUrls.current.push(url);
+            return { url, name: file.name, fileSize: file.size };
+        });
+        setState({ items: (0, mediaItems_1.buildFileItems)(viewerFiles, (path) => path), index, title });
+        setIsOpen(true);
+    }, [revokeAll]);
+    const close = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        revokeAll();
+    }, [revokeAll]);
+    const onIndexChange = (0, react_1.useCallback)((index) => {
+        setState((prev) => (prev ? { ...prev, index } : prev));
+    }, []);
+    const viewer = state ? ((0, jsx_runtime_1.jsx)(MediaViewer_1.default, { isOpen: isOpen, onClose: close, items: state.items, index: state.index, onIndexChange: onIndexChange, title: state.title, ...options })) : null;
+    return { open, openItems, openLocal, close, viewer };
+}
+exports.default = useFileViewer;

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

@@ -0,0 +1,64 @@
+export type MediaKind = "image" | "video" | "audio" | "youtube" | "pdf" | "doc" | "text" | "spreadsheet" | "presentation" | "archive" | "file";
+export interface MediaItem {
+    key: string;
+    kind: MediaKind;
+    src: string;
+    thumb: string | null;
+    ordinal: number;
+    uploadedAt?: string | null;
+    fileSize?: number | null;
+    name?: string | null;
+}
+export interface MediaFile {
+    path: string;
+    uploadedAt?: string | null;
+    fileSize?: number | null;
+}
+export type MediaSource = string | MediaFile;
+export interface MediaSources {
+    photos: MediaSource[];
+    videos: MediaSource[];
+    youtubeVideoIds: string[];
+}
+export interface ViewerFile {
+    url: string;
+    name?: string | null;
+    uploadedAt?: string | null;
+    fileSize?: number | null;
+}
+export type FileKind = Exclude<MediaKind, "youtube">;
+export interface PreviewPlan {
+    tiles: number[];
+    hidden: number;
+}
+/** Resolves an app-stored path to a fetchable url; the host app owns base-url/CDN logic. */
+export type ResolveUrl = (path: string) => string;
+export declare const MIN_ZOOM = 25;
+export declare const MAX_ZOOM = 400;
+export declare const ZOOM_STEP = 25;
+export declare const PLAYBACK_SPEEDS: readonly [0.5, 0.75, 1, 1.25, 1.5, 2];
+export declare const SEEK_STEP_SECONDS = 10;
+/** Passes an already-absolute url through untouched; only a bare stored path goes through resolveUrl. */
+export declare const resolveMediaUrl: (path: string, resolveUrl: ResolveUrl) => string;
+export declare const isUnsupportedImageSrc: (src: string) => boolean;
+export declare const isUnsupportedVideoSrc: (src: string) => boolean;
+/** Picks the viewer kind from the file name first, falling back to the url — bare `.doc` is not `doc`. */
+export declare const fileKind: (url: string, name?: string | null) => FileKind;
+export declare const youtubeThumb: (videoId: string) => string;
+export declare const youtubeEmbed: (videoId: string) => string;
+export declare const youtubeWatch: (videoId: string) => string;
+export declare const asFile: (source: MediaSource) => MediaFile;
+/** Builds ordered viewer items from DB-backed photos/videos/YouTube ids; ordinal restarts per group. */
+export declare function buildMediaItems(sources: MediaSources, resolveUrl: ResolveUrl): MediaItem[];
+/** Builds viewer items from a flat file list; ordinal numbering is per-kind, not per-list-position. */
+export declare function buildFileItems(files: ViewerFile[], resolveUrl: ResolveUrl): MediaItem[];
+export declare function countMedia(items: MediaItem[]): Record<MediaKind, number>;
+export declare function planPreview(items: MediaItem[], slots: number): PreviewPlan;
+export declare const wrapIndex: (index: number, length: number) => number;
+export declare const clampZoom: (zoom: number) => number;
+export declare function formatClock(totalSeconds: number): string;
+export declare function mediaLink(item: MediaItem, atSeconds?: number): string;
+export declare function formatFileSize(bytes: number): string;
+export declare function fileTypeLabel(src: string): string | null;
+/** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
+export declare function isTypingTarget(target: EventTarget | null): boolean;