pixelize-design-library 2.4.2-beta.60 → 2.4.2-beta.62

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

@@ -93,6 +93,6 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
     return (_jsxs(Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [_jsx(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 ? (_jsx(MediaStatusPanel, { icon: warningIcon(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : (_jsx(Image, { 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,
-                    }), transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`, transition: dragging ? "none" : "transform 0.15s ease-out", "data-testid": "media-image" })) }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.imageControls, position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", align: "center", gap: 1, p: 1, borderRadius: "12px", bg: chrome.raised, borderWidth: "1px", borderColor: chrome.hover, maxW: "calc(100% - 16px)", overflowX: "auto", children: [_jsx(ViewerIconButton, { label: labels.zoomOut, hint: "-", icon: _jsx(ZoomOut, { size: 18 }), onClick: () => zoomBy(-ZOOM_STEP), isDisabled: zoom <= MIN_ZOOM, testId: "media-zoom-out" }), _jsx(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}%` }), _jsx(ViewerIconButton, { label: labels.zoomIn, hint: "+", icon: _jsx(ZoomIn, { size: 18 }), onClick: () => zoomBy(ZOOM_STEP), isDisabled: zoom >= MAX_ZOOM, testId: "media-zoom-in" }), _jsx(ViewerIconButton, { label: labels.fitLabel, hint: "0", icon: _jsx(Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), _jsx(Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), _jsx(ViewerIconButton, { label: labels.rotate, hint: "R", icon: _jsx(RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
+                    }), style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)` }, transition: dragging ? "none" : "transform 0.15s ease-out", "data-testid": "media-image" })) }), _jsxs(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: [_jsx(ViewerIconButton, { label: labels.zoomOut, hint: "-", icon: _jsx(ZoomOut, { size: 18 }), onClick: () => zoomBy(-ZOOM_STEP), isDisabled: zoom <= MIN_ZOOM, testId: "media-zoom-out" }), _jsx(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}%` }), _jsx(ViewerIconButton, { label: labels.zoomIn, hint: "+", icon: _jsx(ZoomIn, { size: 18 }), onClick: () => zoomBy(ZOOM_STEP), isDisabled: zoom >= MAX_ZOOM, testId: "media-zoom-in" }), _jsx(ViewerIconButton, { label: labels.fitLabel, hint: "0", icon: _jsx(Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), _jsx(Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), _jsx(ViewerIconButton, { label: labels.rotate, hint: "R", icon: _jsx(RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
 };
 export default MediaImageViewer;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
 import { useViewerChrome } from "../useViewerChrome.js";
 const STEP_SECONDS = 5;
 const BIG_STEP_SECONDS = 30;
@@ -82,6 +83,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, children: [previewLabel !== null ? (_jsx(Box, { position: "absolute", bottom: "100%", left: `${previewX}%`, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "4px", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, _jsxs(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 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => (_jsx(Box, { position: "absolute", top: 0, bottom: 0, 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))), _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: 0, width: `${fraction * 100}%`, bg: chrome.accent, borderRadius: "full" }), _jsx(Box, { position: "absolute", top: "50%", left: `${fraction * 100}%`, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
+        }, children: [previewLabel !== null ? (_jsx(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: NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, _jsxs(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 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => (_jsx(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))), _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), _jsx(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: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
 };
 export default MediaScrubber;

package/dist/esm/Components/MediaViewer/components/MediaVideoPlayer.js

@@ -9,7 +9,7 @@ import { formatClock, isTypingTarget, isUnsupportedVideoSrc, PLAYBACK_SPEEDS, SE
 import { useAutoHideChrome } from "../hooks/useAutoHideChrome.js";
 import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
 import { useViewerChrome } from "../useViewerChrome.js";
-import MediaScrubber from "./MediaScrubber.js";
+import { TimelineClock, TimelineScrubber, usePlaybackTimeline } from "./PlaybackTimeline.js";
 import MediaStatusPanel from "./MediaStatusPanel.js";
 import ViewerIconButton from "./ViewerIconButton.js";
 import { defaultMediaVideoPlayerLabels } from "./MediaVideoPlayerProps.js";
@@ -30,7 +30,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const shellRef = useRef(null);
     const videoRef = useRef(null);
     const [playing, setPlaying] = useState(false);
-    const [current, setCurrent] = useState(0);
+    const timeline = usePlaybackTimeline();
     const [duration, setDuration] = useState(0);
     const [volume, setVolume] = useState(1);
     const [muted, setMuted] = useState(false);
@@ -65,7 +65,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
             return;
         const max = Number.isFinite(v.duration) ? v.duration : seconds;
         v.currentTime = Math.min(max, Math.max(0, seconds));
-        setCurrent(v.currentTime);
+        timeline.set(v.currentTime);
     };
     const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = video()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
     const toggleMute = () => {
@@ -174,7 +174,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     }, []);
     useEffect(() => {
         setPlaying(false);
-        setCurrent(0);
+        timeline.set(0);
         setDuration(0);
         setRate(1);
         setHasCaptions(false);
@@ -184,7 +184,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
         setBuffered([]);
         if (videoRef.current)
             videoRef.current.playbackRate = 1;
-    }, [item.key]);
+    }, [item.key, timeline]);
     useEffect(() => {
         if (!ripple)
             return undefined;
@@ -230,7 +230,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
                         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);
+                        timeline.set(e.currentTarget.currentTime);
                         onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
                     }, onLoadedMetadata: (e) => {
                         setDuration(e.currentTarget.duration);
@@ -238,6 +238,6 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
                     }, onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
                         setVolume(e.currentTarget.volume);
                         setMuted(e.currentTarget.muted);
-                    }, "data-testid": "media-video" })) }), buffering && !failed ? (_jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: _jsx(Box, { as: Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: _jsxs(Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? _jsx(SkipBack, { size: 22, "aria-hidden": true }) : _jsx(SkipForward, { size: 22, "aria-hidden": true }), _jsx(Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? (_jsx(IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: _jsx(Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), _jsxs(Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, children: [_jsx(MediaScrubber, { 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: failed || duration <= 0, testId: "media-video-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(ViewerIconButton, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: seekIcon(_jsx(SkipBack, { size: 16 })), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-video-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: seekIcon(_jsx(SkipForward, { size: 16 })), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? (_jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? (_jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, _jsxs(Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [_jsx(ViewerIconButton, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? _jsx(VolumeX, { size: 18 }) : _jsx(Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), _jsx(Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: _jsxs(Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [_jsx(SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: _jsx(SliderFilledTrack, { bg: chrome.ink }) }), _jsx(SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), _jsxs(Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-video-time", children: [clock(current), _jsx(Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsxs(Menu, { placement: "top-end", children: [_jsx(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-video-speed", children: _jsxs(Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, _jsx(ChevronDown, { size: 14, "aria-hidden": true })] }) }), _jsx(MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: _jsx(MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: PLAYBACK_SPEEDS.map((speed) => (_jsx(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))) }) })] }), hasCaptions ? (_jsx(ViewerIconButton, { label: labels.captions, hint: "C", icon: _jsx(Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? (_jsx(ViewerIconButton, { label: labels.pip, hint: "P", icon: _jsx(PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
+                    }, "data-testid": "media-video" })) }), buffering && !failed ? (_jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: _jsx(Box, { as: Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: _jsxs(Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? _jsx(SkipBack, { size: 22, "aria-hidden": true }) : _jsx(SkipForward, { size: 22, "aria-hidden": true }), _jsx(Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? (_jsx(IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: _jsx(Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), _jsxs(Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, children: [_jsx(TimelineScrubber, { timeline: timeline, duration: duration, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: failed || duration <= 0, testId: "media-video-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(ViewerIconButton, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: seekIcon(_jsx(SkipBack, { size: 16 })), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-video-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: seekIcon(_jsx(SkipForward, { size: 16 })), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? (_jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? (_jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, _jsxs(Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [_jsx(ViewerIconButton, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? _jsx(VolumeX, { size: 18 }) : _jsx(Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), _jsx(Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: _jsxs(Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [_jsx(SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: _jsx(SliderFilledTrack, { bg: chrome.ink }) }), _jsx(SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), _jsx(TimelineClock, { timeline: timeline, duration: duration, testId: "media-video-time" })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsxs(Menu, { placement: "top-end", children: [_jsx(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-video-speed", children: _jsxs(Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, _jsx(ChevronDown, { size: 14, "aria-hidden": true })] }) }), _jsx(MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: _jsx(MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: PLAYBACK_SPEEDS.map((speed) => (_jsx(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))) }) })] }), hasCaptions ? (_jsx(ViewerIconButton, { label: labels.captions, hint: "C", icon: _jsx(Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? (_jsx(ViewerIconButton, { label: labels.pip, hint: "P", icon: _jsx(PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
 };
 export default MediaVideoPlayer;

package/dist/esm/Components/MediaViewer/components/PlaybackTimeline.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useSyncExternalStore } from "react";
+import { Text } from "@chakra-ui/react";
+import { formatClock } from "../mediaItems.js";
+import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
+import { useViewerChrome } from "../useViewerChrome.js";
+import MediaScrubber from "./MediaScrubber.js";
+const createPlaybackTimeline = () => {
+    let seconds = 0;
+    const listeners = new Set();
+    return {
+        get: () => seconds,
+        set: (next) => {
+            if (next === seconds)
+                return;
+            seconds = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+/** Playback position held outside React state, so a time tick re-renders only its subscribers. */
+export const usePlaybackTimeline = () => useState(createPlaybackTimeline)[0];
+export const TimelineScrubber = ({ timeline, duration, ...scrubberProps }) => {
+    const current = useSyncExternalStore(timeline.subscribe, timeline.get, timeline.get);
+    return _jsx(MediaScrubber, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, ...scrubberProps });
+};
+export const TimelineClock = ({ timeline, duration, testId, }) => {
+    const chrome = useViewerChrome();
+    const readClock = () => formatClock(timeline.get());
+    const clock = useSyncExternalStore(timeline.subscribe, readClock, readClock);
+    return (_jsxs(Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: NUMERIC_TEXT, "data-testid": testId, children: [clock, _jsx(Text, { as: "span", color: chrome.muted, children: ` / ${formatClock(duration)}` })] }));
+};

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

@@ -5,6 +5,6 @@ import { useViewerChrome } from "../useViewerChrome.js";
 const TileChip = ({ children, place }) => {
     const chrome = useViewerChrome();
     const corner = place === "tl" ? { left: "6px", top: "6px" } : { right: "6px", bottom: "6px" };
-    return (_jsx(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 }));
+    return (_jsx(Text, { as: "span", position: "absolute", ...corner, h: "18px", px: "6px", borderRadius: "base", bg: chrome.stage, color: chrome.ink, fontSize: "xs-minus", fontWeight: 600, display: "inline-flex", alignItems: "center", "aria-hidden": true, children: children }));
 };
 export default TileChip;

package/dist/esm/Components/Modal/Modal.js

@@ -36,5 +36,5 @@ export default function Modal({ size, isOpen = false, onClose, overlaybg, overla
     const footerSlot = findSlot(children, ModalFooter);
     warnDroppedSlotChildren("Modal", children, [ModalHeader, ModalBody, ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return (_jsxs(ChakraModal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsxs(ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && (_jsxs(ChakraModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && (_jsx(Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && _jsx(ModalCloseButton, {}), isLoading ? (_jsx(Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [_jsx(ChakraModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
+    return (_jsxs(ChakraModal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [_jsx(ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), _jsxs(ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && (_jsxs(ChakraModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && (_jsx(Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && _jsx(ModalCloseButton, {}), isLoading ? (_jsx(Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: _jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : (_jsxs(_Fragment, { children: [_jsx(ChakraModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/esm/Components/MoreItems/MoreItems.js

@@ -11,13 +11,13 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? _jsx(_Fragment, { children: triggerText }) : null;
-    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: focusVisibleStyles(theme.colors), children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: transitionFor(["background-color"]), _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", tabIndex: 0, role: "button", borderRadius: "lg", sx: focusVisibleStyles(theme.colors), children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "xs", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: transitionFor(["background-color"]), _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
                 bg: theme.colors.surfaceRaised, boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.surfaceRaised }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
                                 var _a, _b, _c;
                                 const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.textMuted;
-                                return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && (_jsx(Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), _jsx(Text, { fontSize: "13px", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
+                                return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && (_jsx(Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), _jsx(Text, { fontSize: "xs-plus", color: theme.colors.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
                             }) }) })] })] }));
 };
 export default MoreItems;

package/dist/esm/Components/NavLauncher/LauncherTabs.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { useRef } from "react";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+export const tabId = (base, id) => `${base}-tab-${id}`;
+export const panelId = (base) => `${base}-panel`;
+export function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLeaveDown, }) {
+    const { colors } = useCustomTheme();
+    const refs = useRef(new Map());
+    const ring = focusVisibleStyles(colors);
+    const choose = (index) => {
+        var _a;
+        const next = tabs[(index + tabs.length) % tabs.length];
+        onSelect(next.id);
+        (_a = refs.current.get(next.id)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const current = tabs.findIndex((tab) => tab.id === selected);
+        const handlers = {
+            ArrowRight: () => choose(current + 1),
+            ArrowLeft: () => choose(current - 1),
+            Home: () => choose(0),
+            End: () => choose(tabs.length - 1),
+            ArrowUp: onLeaveUp,
+            ArrowDown: onLeaveDown,
+        };
+        const handle = handlers[event.key];
+        if (!handle)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle();
+    };
+    return (_jsx(Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
+            const isSelected = tab.id === selected;
+            return (_jsx(Box, { as: "button", type: "button", role: "tab", id: tabId(idBase, tab.id), ref: (node) => {
+                    if (node)
+                        refs.current.set(tab.id, node);
+                    else
+                        refs.current.delete(tab.id);
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? panelId(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "14px", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: transitionFor(["color"]), _hover: {
+                    color: isSelected ? colors.accentText : colors.text[900],
+                }, _after: {
+                    content: '""',
+                    position: "absolute",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "-1px",
+                    h: "2px",
+                    borderRadius: "2px 2px 0 0",
+                    bg: isSelected ? colors.primary[500] : "transparent",
+                }, sx: { ...ring, borderRadius: "8px" }, children: tab.label }, tab.id));
+        }) }));
+}