pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

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

@@ -2,8 +2,12 @@ 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 { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
 import { useViewerChrome } from "../useViewerChrome.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const HEIGHT_TRANSITION = transitionFor(["height"], "fast", "out");
+const THUMB_TRANSITION = 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));
@@ -15,6 +19,7 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
     const [hovering, setHovering] = useState(false);
     const [previewX, setPreviewX] = useState(null);
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
     const fraction = disabled ? 0 : clamp(value / max, 0, 1);
     const fractionAt = (clientX) => {
@@ -83,9 +88,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, 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: {
+        }, 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_TRANSITION, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: focusShadow }, "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" })] })] }));
+                        }, 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: THUMB_TRANSITION, pointerEvents: "none" })] })] }));
 };
 export default MediaScrubber;

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

@@ -5,6 +5,7 @@ import { keyframes } from "@emotion/react";
 import { Captions, ChevronDown, ChevronLeft, ChevronRight, Download, Loader2, Maximize, Minimize, Pause, PictureInPicture2, Play, SkipBack, SkipForward, Volume2, VolumeX, } from "lucide-react";
 import { useFullscreen } from "../../../Hooks/useFullscreen.js";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 import { formatClock, isTypingTarget, isUnsupportedVideoSrc, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
 import { useAutoHideChrome } from "../hooks/useAutoHideChrome.js";
 import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
@@ -48,6 +49,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
     const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const { visible: chromeVisible, handlers: chromeHandlers } = useAutoHideChrome(shellRef, playing && !unsupported);
     const video = () => videoRef.current;
     const togglePlay = () => {
@@ -238,6 +240,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(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] })] })] })] }));
+                    }, "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: focusShadow }, 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: focusShadow } })] }) })] }), _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: focusShadow }, "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/ViewerIconButton.js

@@ -3,13 +3,15 @@ import { IconButton } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { useViewerChrome } from "../useViewerChrome.js";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 /** 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 = 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 = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
-    return (_jsx(ToolTip, { label: tooltipLabel, children: _jsx(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 }) }));
+    return (_jsx(ToolTip, { label: tooltipLabel, children: _jsx(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: focusShadow }, "data-testid": testId, ...linkProps }) }));
 };
 export default ViewerIconButton;

package/dist/esm/Components/MediaViewer/mediaItems.js

@@ -158,6 +158,10 @@ export function formatFileSize(bytes) {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+const UPLOADED_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });
+export function formatUploadedDate(value) {
+    return UPLOADED_DATE.format(new Date(value));
+}
 export function fileTypeLabel(src) {
     const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
     return match ? match[1].toUpperCase() : null;

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

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Flex, Spinner, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { warnDroppedSlotChildren } from "./warnDroppedSlotChildren.js";
+import { findSlot } from "../Common/findSlot.js";
 export const ModalHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -12,22 +12,7 @@ export const ModalBody = ({ children }) => {
 export const ModalFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
-const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
-// Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
-const findSlot = (children, slot) => {
-    for (const child of React.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === React.Fragment) {
-            const nested = findSlot(child.props.children, slot);
-            if (nested)
-                return nested;
-        }
-    }
-    return undefined;
-};
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 export default function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
     var _a, _b;
     const { colors } = useCustomTheme();

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

@@ -1,5 +1,6 @@
 import React from "react";
-const warned = new Set();
+const warnedByOwner = new Map();
+const PORTAL_ADVICE = "Pass nested dialogs and live regions through the portalChildren prop.";
 const nameOf = (type) => {
     if (typeof type === "string")
         return type;
@@ -24,15 +25,18 @@ const collect = (children, slots, dropped) => {
         dropped.set(child.type, nameOf(child.type));
     }
 };
-export const warnDroppedSlotChildren = (owner, children, slots) => {
+export const warnDroppedSlotChildren = (owner, children, slots, advice = PORTAL_ADVICE) => {
+    var _a;
     if (process.env.NODE_ENV === "production")
         return;
+    const warned = (_a = warnedByOwner.get(owner)) !== null && _a !== void 0 ? _a : new Set();
+    warnedByOwner.set(owner, warned);
     const dropped = new Map();
     collect(children, slots, dropped);
     dropped.forEach((name, type) => {
         if (warned.has(type))
             return;
         warned.add(type);
-        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. ${advice}`);
     });
 };

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

@@ -2,6 +2,7 @@ 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 { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 export const tabId = (base, id) => `${base}-tab-${id}`;
@@ -35,7 +36,7 @@ export function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveU
         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) => {
+    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: raisedRule(colors), 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)

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Flex, IconButton, Text, VisuallyHidden } from "@chakra-ui/react";
 import { Search as SearchIcon, X } from "lucide-react";
-import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
-import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { assignAppHues } from "../AppSwitcher/AppMark.js";
@@ -18,16 +19,18 @@ import ToolTip from "../ToolTip/ToolTip.js";
 import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
 import { shortcutKeys } from "../AppSwitcher/AppSwitcherProps.js";
 import Skeletons from "../Skeletons/Skeletons.js";
-import { activeRowSurface, AppsSection, CountBadge, Highlight, HighlightOptionsProvider, isPlainClick, ITEM_SELECTOR, ModuleRow, NewTag, PinnedTile, PinTextButton, RailRow, ROW_CONTAINER, RowActions, RowIcon, RowTip, SectionHeader, titleInset, TouchDensity, useTouchDensity, WIDE_ROW, } from "./launcherParts.js";
+import { activeRowSurface, AppsSection, CountBadge, Highlight, HighlightOptionsProvider, HintLabel, isPlainClick, ITEM_SELECTOR, ModuleRow, NewTag, PinnedTile, PinTextButton, RailRow, ROW_CONTAINER, RowActions, RulePlaneProvider, RowIcon, RowTip, SectionHeader, titleInset, TouchDensity, useTouchDensity, WIDE_ROW, } from "./launcherParts.js";
 import { LauncherTabs, panelId, tabId, } from "./LauncherTabs.js";
 import { filterItems, searchLauncherSections, } from "./match.js";
 import NewTabLink from "./NewTabLink.js";
 import PinToggle from "./PinToggle.js";
+import { launcherSlide } from "./launcherMotion.js";
 import { moveResult } from "./resultNavigation.js";
 import { ScopeBar } from "./ScopeBar.js";
-import { countByScope, inScope, layoutSearch, scopeGroups, takeTopHit, } from "./searchLayout.js";
+import { copiesOnEnter, countByScope, inScope, layoutSearch, scopeGroups, takeTopHit, } from "./searchLayout.js";
 import { createSpotlightIndex, matchAnswers, SCOPE_ACTIONS, SCOPE_ALL, SCOPE_SCREENS, searchSpotlight, spotlightBoosts, } from "./spotlight.js";
 import { AnswerCard, describeFacts, PreviewPane, QuickActionsRow, ShowMoreOption, TopHitCard, } from "./spotlightParts.js";
+import { useCopiedFlash } from "./useCopiedFlash.js";
 const NO_APPS = [];
 const MD_QUERY = "(min-width: 48em)";
 const LG_QUERY = "(min-width: 62em)";
@@ -101,6 +104,7 @@ const DEFAULT_LABELS = {
     matchedOn: "Matches",
     answers: "Answers",
     hintCopy: "copy",
+    hintExpand: "expand",
     scopes: "Search in",
     scopeAll: "All",
     scopeChanged: (label) => `Showing ${label}`,
@@ -153,7 +157,7 @@ function Pane({ children, scrolls = false, }) {
 }
 function Rail({ label, children, scrolls = false, }) {
     const { colors } = useCustomTheme();
-    return (_jsx(Flex, { "data-scroll-region": scrolls || undefined, as: "aside", "aria-label": label, direction: "column", gap: "16px", w: { base: "100%", lg: RAIL_WIDTH }, flexShrink: 0, px: "14px", pt: "12px", pb: "16px", bg: colors.backgroundColor.subtle, borderTopWidth: { base: "1px", lg: 0 }, borderLeftWidth: { base: 0, lg: "1px" }, borderColor: colors.boxborder[200], overflowY: { base: "visible", lg: "auto" }, children: children }));
+    return (_jsx(Flex, { "data-scroll-region": scrolls || undefined, as: "aside", "aria-label": label, direction: "column", gap: "16px", w: { base: "100%", lg: RAIL_WIDTH }, flexShrink: 0, px: "14px", pt: "12px", pb: "16px", bg: colors.backgroundColor.subtle, borderTopWidth: { base: "1px", lg: 0 }, borderLeftWidth: { base: 0, lg: "1px" }, borderColor: raisedRule(colors), overflowY: { base: "visible", lg: "auto" }, children: _jsx(RulePlaneProvider, { value: "recess", children: children }) }));
 }
 function SkeletonLayout({ label }) {
     return (_jsxs(Flex, { role: "status", "aria-busy": "true", "aria-label": label, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, children: [_jsx(Pane, { children: [0, 1, 2].map((section) => (_jsxs(Box, { children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "6rem" }), _jsx(ItemGrid, { children: [0, 1, 2, 3].map((row) => (_jsxs(Flex, { align: "center", gap: "10px", h: "34px", mt: 2, children: [_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "1rem" }), _jsx(Skeletons, { type: "skeleton", height: "0.875rem", width: "8rem" })] }, row))) })] }, section))) }), _jsx(Rail, { label: label, children: [0, 1].map((group) => (_jsxs(Box, { children: [_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: "5rem" }), [0, 1, 2].map((row) => (_jsx(Skeletons, { type: "skeleton", height: "1.5rem", width: "100%", mt: 2 }, row)))] }, group))) })] }));
@@ -164,9 +168,9 @@ function SearchField({ inputRef, value, onChange, onKeyDown, labels, placeholder
                     var _a;
                     onChange("");
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, boxSize: "24px", borderRadius: "6px", bg: colors.backgroundColor.subtle, color: colors.textMuted, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, sx: focusVisibleStyles(colors), children: _jsx(X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? (_jsx(Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: _jsx(Kbd, { size: "xs", children: hint }) })) : null] }));
+                }, boxSize: "24px", borderRadius: "md", bg: colors.backgroundColor.subtle, color: colors.textMuted, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, sx: focusVisibleStyles(colors), children: _jsx(X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? (_jsx(Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: _jsx(Kbd, { size: "xs", children: hint }) })) : null] }));
 }
-function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
+const SearchRow = memo(function SearchRow({ item, query, isActive, link, labels, optionId, index, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
     const { colors } = useCustomTheme();
     const isTouch = useTouchDensity();
     const isScreen = item.kind === "screen";
@@ -179,17 +183,17 @@ function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, ca
     const titleRef = title.ref;
     const contextRef = context.ref;
     const tipLabel = isScreen || !item.context ? fullLabel : `${fullLabel} · ${item.context}`;
-    return (_jsx(ToolTip, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: _jsxs(Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "8px", transition: transitionFor(["background-color"]), onMouseMove: onHover, sx: isActive
+    return (_jsx(ToolTip, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: _jsxs(Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "lg", transition: transitionFor(["background-color"]), onMouseMove: () => onHover(index), sx: isActive
                 ? { ...ROW_CONTAINER, ...activeRowSurface(colors) }
                 : ROW_CONTAINER, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, flex: 1, minW: 0, align: "flex-start", gap: "10px", cursor: "pointer", onClick: () => {
                         if (!item.href)
-                            onOpen();
-                    }, children: [_jsx(RowIcon, { icon: item.icon, size: 16, mt: "2px" }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: titleInset(base, open, ENTER_CHIP_WIDTH), children: [_jsxs(Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [_jsx(Highlight, { text: item.label, query: query }), isScreen ? (_jsx(Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? _jsx(NewTag, { label: labels.newBadge }) : null, item.keywordHint ? (_jsx(Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", minW: 0, flexShrink: 100, overflow: "hidden", textOverflow: "ellipsis", children: ` · ${item.keywordHint}` })) : null, item.hint ? (_jsx(Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? (_jsx(Text, { ref: contextRef, fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? (_jsx(Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "8px" })) : null, _jsx(RowActions, { children: _jsxs(Box, { "aria-hidden": true, display: "contents", children: [isActive ? (_jsx(Box, { sx: {
+                            onOpen(item);
+                    }, children: [_jsx(RowIcon, { icon: item.icon, size: 16, mt: "2px" }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: titleInset(base, open, ENTER_CHIP_WIDTH), children: [_jsxs(Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [_jsx(Highlight, { text: item.label, query: query }), isScreen ? (_jsx(Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? _jsx(NewTag, { label: labels.newBadge }) : null, item.keywordHint ? (_jsx(Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", minW: 0, flexShrink: 100, overflow: "hidden", textOverflow: "ellipsis", children: ` · ${item.keywordHint}` })) : null, item.hint ? (_jsx(Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? (_jsx(Text, { ref: contextRef, fontSize: "xs-minus", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? (_jsx(Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "lg" })) : null, _jsx(RowActions, { children: _jsxs(Box, { "aria-hidden": true, display: "contents", children: [isActive ? (_jsx(Box, { sx: {
                                     display: "none",
                                     [WIDE_ROW]: { display: "inline-flex" },
                                     "@media (hover: none)": { display: "none" },
-                                }, children: _jsx(KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, _jsx(CountBadge, { value: item.badge }), hasStar ? (_jsx(PinToggle, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: onPin, tabIndex: -1 })) : null, item.href ? (_jsx(NewTabLink, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? (_jsx(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }) }));
-}
+                                }, children: _jsx(KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, _jsx(CountBadge, { value: item.badge }), hasStar ? (_jsx(PinToggle, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: () => item.screenId && onPin(item.screenId), tabIndex: -1 })) : null, item.href ? (_jsx(NewTabLink, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? (_jsx(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }) }));
+});
 /** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
 export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs = "a", actions, extraResults, query: controlledQuery, onQueryChange, isSearching = false, isLoading = false, keyScreenLimit = 3, frequentLimit = 4, suggestions, searchHint, modKeyLabel, headerActions, maxWidth = "1080px", labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility = "apps-on-compact", searchMode = "classic", synonyms, scopes, activeScope, onScopeChange, quickActions, answers, groupLimit, "data-testid": testId, }) {
     var _a, _b, _c;
@@ -201,6 +205,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     const isDesktop = useMatchMedia(MD_QUERY, true);
     const isLg = useMatchMedia(LG_QUERY, true);
     const isWide = useMatchMedia(XL_QUERY, false);
+    const isReducedMotion = usePrefersReducedMotion();
     const columns = isWide ? 3 : isDesktop ? 2 : 1;
     const [innerQuery, setInnerQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
@@ -208,6 +213,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     const [innerScope, setInnerScope] = useState(SCOPE_ALL);
     const [expanded, setExpanded] = useState(NO_GROUPS);
     const [announcement, setAnnouncement] = useState({ text: "", n: 0 });
+    const { copiedId, flash, clear: clearFlash } = useCopiedFlash();
     const navigating = useRef(false);
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const isControlled = controlledQuery !== undefined;
@@ -245,11 +251,12 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
         setTab("menu");
         setExpanded(NO_GROUPS);
         setAnnouncement({ text: "", n: 0 });
+        clearFlash();
         if (latest.current.query !== "")
             latest.current.setQuery("");
         if (latest.current.scope !== SCOPE_ALL)
             latest.current.setScope(SCOPE_ALL, true);
-    }, [isOpen]);
+    }, [isOpen, clearFlash]);
     useEffect(() => {
         navigating.current = false;
         setActiveIndex(0);
@@ -373,13 +380,15 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     const isTabbed = !isLg && !isListView && !isLoading && tabs.length > 1;
     const activeTab = tabs.some((item) => item.id === tab) ? tab : "menu";
     const countText = isSearchView && layout.total > 0 ? labels.resultsCount(layout.total) : "";
+    const closeRef = useRef(onClose);
+    closeRef.current = onClose;
     const link = useMemo(() => ({
         linkAs,
         onPlainClick: (event) => {
             if (isPlainClick(event))
-                onClose();
+                closeRef.current();
         },
-    }), [linkAs, onClose]);
+    }), [linkAs]);
     const open = useCallback((item, newTab) => {
         if (item.run) {
             onClose();
@@ -392,16 +401,21 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
             onClose();
         onNavigate(item.href, { newTab });
     }, [onClose, onNavigate]);
-    const copyValue = useCallback(async (value, node) => {
+    const rowHandlers = useRef({ open, togglePin: onTogglePin });
+    rowHandlers.current = { open, togglePin: onTogglePin };
+    const openRow = useCallback((item) => rowHandlers.current.open(item, false), []);
+    const pinRow = useCallback((screenId) => { var _a, _b; return (_b = (_a = rowHandlers.current).togglePin) === null || _b === void 0 ? void 0 : _b.call(_a, screenId); }, []);
+    const copyValue = useCallback(async (id, value, node) => {
         try {
             await navigator.clipboard.writeText(value);
             announce(labels.copied);
+            flash(id);
         }
         catch {
             selectNode(node);
             announce(labels.copySelected);
         }
-    }, [announce, labels]);
+    }, [announce, flash, labels]);
     const onCopied = useCallback(() => announce(labels.copied), [announce, labels]);
     const onCopyBlocked = useCallback((node) => {
         selectNode(node);
@@ -417,9 +431,9 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
             return;
         }
         const { item } = entry;
-        if (entry.type === "answer" && !item.run && !item.href) {
+        if (copiesOnEnter(entry)) {
             const node = document.getElementById(`${baseId}-opt-${index}-value`);
-            void copyValue((_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label, node);
+            void copyValue(item.id, (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label, node);
             return;
         }
         open(item, newTab);
@@ -708,9 +722,9 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
         : isScopeBrowse
             ? labels.scopeEmpty((_a = currentScope === null || currentScope === void 0 ? void 0 : currentScope.label) !== null && _a !== void 0 ? _a : "")
             : labels.noResults(trimmed);
-    const noResults = (_jsxs(Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [_jsx(Flex, { boxSize: "40px", borderRadius: "12px", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: _jsx(SearchIcon, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), _jsxs(Flex, { direction: "column", gap: "3px", children: [_jsx(Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? (_jsx(Text, { fontSize: "12.5px", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
+    const noResults = (_jsxs(Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [_jsx(Flex, { boxSize: "40px", borderRadius: "xl", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: _jsx(SearchIcon, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), _jsxs(Flex, { direction: "column", gap: "3px", children: [_jsx(Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? (_jsx(Text, { fontSize: "xs-plus", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
                             ? labels.suggestionsHint
-                            : labels.noResultsHint })) : null] }), hasHint && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? (_jsx(Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => (_jsx(Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, fontSize: "12.5px", fontWeight: 500, color: colors.text[900], transition: transitionFor(["background-color"]), _hover: { bg: listRowBackgrounds(colors).active }, sx: focusVisibleStyles(colors), children: suggestion }, suggestion))) })) : null] }));
+                            : labels.noResultsHint })) : null] }), hasHint && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? (_jsx(Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => (_jsx(Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, fontSize: "xs-plus", fontWeight: 500, color: colors.text[900], transition: transitionFor(["background-color"]), _hover: { bg: listRowBackgrounds(colors).active }, sx: focusVisibleStyles(colors), children: suggestion }, suggestion))) })) : null] }));
     const factsId = (index) => `${optionId(index)}-facts`;
     const describedBy = (item, index) => { var _a; return ((_a = item.facts) === null || _a === void 0 ? void 0 : _a.length) ? factsId(index) : undefined; };
     const cardProps = (item, index) => ({
@@ -725,7 +739,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
     });
     const renderBlock = (block) => {
         if (block.type === "answers") {
-            return (_jsx(Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => (_jsx(AnswerCard, { ...cardProps(item, block.start + i) }, item.id))) }, "answers"));
+            return (_jsx(Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => (_jsx(AnswerCard, { ...cardProps(item, block.start + i), isCopied: copiedId === item.id }, item.id))) }, "answers"));
         }
         if (block.type === "top") {
             return (_jsxs(Flex, { role: "group", "aria-label": labels.topHit, direction: "column", gap: "6px", children: [_jsx(SectionHeader, { label: labels.topHit, isDecorative: true }), _jsx(TopHitCard, { ...cardProps(block.item, block.start), query: query })] }, "top"));
@@ -734,7 +748,7 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
         const meta = group.isSection ? labels.found(group.items.length) : undefined;
         return (_jsxs(Flex, { role: "group", "aria-label": meta ? `${group.label}, ${meta}` : group.label, direction: "column", gap: "3px", children: [_jsx(SectionHeader, { label: group.label, meta: meta ? `(${meta})` : undefined, isDecorative: true }), _jsx(ItemGrid, { columns: columns, children: block.visible.map((item, i) => {
                         const index = block.start + i;
-                        return (_jsx(SearchRow, { item: item, query: query, isActive: index === active, link: link, labels: labels, optionId: optionId(index), isPinned: item.screenId ? pinned.has(item.screenId) : false, canPin: Boolean(onTogglePin) && item.kind === "module", onPin: () => item.screenId && (onTogglePin === null || onTogglePin === void 0 ? void 0 : onTogglePin(item.screenId)), onOpen: () => open(item, false), onHover: () => setActiveIndex(index), describedBy: describedBy(item, index) }, item.id));
+                        return (_jsx(SearchRow, { item: item, query: query, isActive: index === active, link: link, labels: labels, optionId: optionId(index), index: index, isPinned: item.screenId ? pinned.has(item.screenId) : false, canPin: Boolean(onTogglePin) && item.kind === "module", onPin: pinRow, onOpen: openRow, onHover: setActiveIndex, describedBy: describedBy(item, index) }, item.id));
                     }) }), more ? (_jsx(ShowMoreOption, { count: more.count, isActive: more.index === active, optionId: optionId(more.index), label: labels.showMore, onExpand: () => activate(more.index, false), onHover: () => setActiveIndex(more.index) })) : null] }, group.id));
     };
     const searchPane = hasResults ? (_jsxs(HighlightOptionsProvider, { value: highlightOptions, children: [_jsx(Flex, { role: "listbox", id: listboxId, "aria-label": labels.title, "aria-busy": isSearching || undefined, direction: "column", gap: "14px", children: layout.blocks.map(renderBlock) }), entries.map((entry, index) => {
@@ -746,8 +760,18 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
         entries.some((entry) => { var _a; return entry.type !== "more" && ((_a = entry.item.facts) === null || _a === void 0 ? void 0 : _a.length); });
     const activeEntry = entries[active];
     const activeItem = activeEntry && activeEntry.type !== "more" ? activeEntry.item : undefined;
-    const dock = !isLg && isListView && !isLoading && ((_b = activeItem === null || activeItem === void 0 ? void 0 : activeItem.facts) === null || _b === void 0 ? void 0 : _b.length) ? (_jsx(PreviewPane, { item: activeItem, placement: "dock", labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
-    const stacked = (_jsxs(_Fragment, { children: [_jsx(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? (_jsx(PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
+    const enterCopies = isListView && copiesOnEnter(activeEntry);
+    const enterExpands = isListView && (activeEntry === null || activeEntry === void 0 ? void 0 : activeEntry.type) === "more";
+    const enterLabel = enterCopies
+        ? labels.hintCopy
+        : enterExpands
+            ? labels.hintExpand
+            : labels.hintOpen;
+    const enterReserve = [labels.hintOpen, labels.hintCopy, labels.hintExpand].join("\n");
+    const canOpenInTab = !isListView || Boolean(activeItem === null || activeItem === void 0 ? void 0 : activeItem.href);
+    const isActiveCopied = enterCopies && activeItem !== undefined && copiedId === activeItem.id;
+    const dock = !isLg && isListView && !isLoading && ((_b = activeItem === null || activeItem === void 0 ? void 0 : activeItem.facts) === null || _b === void 0 ? void 0 : _b.length) ? (_jsx(PreviewPane, { item: activeItem, placement: "dock", enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
+    const stacked = (_jsxs(_Fragment, { children: [_jsx(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? (_jsx(PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
     const body = isLoading ? _jsx(SkeletonLayout, { label: labels.loading }) : stacked;
     const titleId = `${baseId}-title`;
     const scopeBar = hasScopes ? (_jsx(ScopeBar, { scopes: scopeChips, value: scope, onChange: (next) => setScope(next), label: labels.scopes, countLabel: labels.scopeCount })) : null;
@@ -767,7 +791,8 @@ export default function NavLauncher({ isOpen, onClose, sections: rawSections, pi
                 borderBottomRightRadius: { base: 0, lg: "16px" },
                 boxShadow: colors.boxShadow.default,
                 overflow: "hidden",
+                motionProps: launcherSlide(isReducedMotion),
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
-            }, children: [_jsxs(DrawerHeader, { p: 0, flexShrink: 0, children: [_jsxs(Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [_jsx(VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), _jsx(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, _jsx(Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: transitionFor(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: countText }), headerActions ? (_jsx(Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, _jsx(IconButton, { "aria-label": labels.close, icon: _jsx(X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? (_jsx(Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), _jsx(DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: _jsxs(Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [_jsx(VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), _jsx(VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: announcement.text }, announcement.n) }), isTabbed ? (_jsx(LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? (_jsx(Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), _jsxs(DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [_jsxs(Flex, { gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => (_jsx(Kbd, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [modKeyLabel ? (_jsxs(Flex, { as: "span", gap: "4px", children: [_jsx(Kbd, { size: "xs", children: modKeyLabel }), _jsx(Kbd, { size: "xs", children: ENTER_KEY })] })) : (_jsx(KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Kbd, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? (_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Kbd, { size: "xs", children: "P" }), labels.hintPin] })) : null, _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), _jsx(Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
+            }, children: [_jsxs(DrawerHeader, { p: 0, flexShrink: 0, children: [_jsxs(Flex, { "data-testid": "launcher-header-row", align: "center", gap: { base: "8px", md: "12px" }, minH: { base: "60px", md: "68px" }, pl: { base: "12px", md: "18px" }, pr: { base: "8px", md: "12px" }, children: [_jsx(VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), _jsx(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, placeholder: (_c = currentScope === null || currentScope === void 0 ? void 0 : currentScope.placeholder) !== null && _c !== void 0 ? _c : labels.searchPlaceholder, hint: searchHint, listboxId: listboxId, activeId: isListView && hasResults ? optionId(active) : undefined, isExpanded: isListView, hasResults: hasResults, minW: inlineScopes ? FIELD_MIN_WIDTH : 0 }), inlineScopes, _jsx(Box, { "aria-hidden": true, "data-testid": "launcher-count", display: { base: "none", sm: "block" }, flexShrink: 0, overflow: "hidden", w: countText ? "88px" : "0", opacity: countText ? 1 : 0, textAlign: "right", fontSize: "13px", whiteSpace: "nowrap", color: colors.textMuted, transition: transitionFor(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...reducedMotionSx() }, children: countText }), headerActions ? (_jsx(Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, _jsx(IconButton, { "aria-label": labels.close, icon: _jsx(X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: { base: "40px", md: "44px" }, minW: { base: "40px", md: "44px" }, borderRadius: "10px", flexShrink: 0, color: colors.textMuted, onClick: onClose })] }), scopeRow ? (_jsx(Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), _jsx(DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: _jsxs(Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [_jsx(VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), _jsx(VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: _jsx("span", { children: announcement.text }, announcement.n) }), isTabbed ? (_jsx(LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? (_jsx(Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), _jsxs(DrawerFooter, { p: 0, minH: "32px", flexShrink: 0, px: "18px", py: "6px", gap: "6px 14px", flexWrap: "wrap", bg: colors.backgroundColor.subtle, fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", justifyContent: "flex-start", children: [_jsxs(Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => (_jsx(Kbd, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), _jsx(HintLabel, { text: enterLabel, reserve: enterReserve })] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: [modKeyLabel ? (_jsxs(Flex, { as: "span", gap: "4px", children: [_jsx(Kbd, { size: "xs", children: modKeyLabel }), _jsx(Kbd, { size: "xs", children: ENTER_KEY })] })) : (_jsx(KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), _jsxs(Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [_jsx(Kbd, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? (_jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(Kbd, { size: "xs", children: "P" }), labels.hintPin] })) : null, _jsxs(Flex, { as: "span", align: "center", gap: "5px", children: [_jsx(KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), _jsx(Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
 }

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

@@ -6,6 +6,7 @@ import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx, usePrefersReducedMotion, } from "../../Theme/chakra/motion.js";
 import { AA_NON_TEXT, liftToContrast, } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const EDGE = 36;
@@ -27,7 +28,7 @@ const fadeMask = ({ start, end }) => start || end
 function PageArrow({ side, onPage, }) {
     const { colors } = useCustomTheme();
     const Icon = side === "start" ? ChevronLeft : ChevronRight;
-    return (_jsx(Box, { as: "button", type: "button", tabIndex: -1, "aria-hidden": true, "data-testid": `launcher-scopes-${side}`, onMouseDown: (event) => event.preventDefault(), onClick: onPage, position: "absolute", top: "50%", left: side === "start" ? 0 : undefined, right: side === "end" ? 0 : undefined, transform: "translateY(-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "28px", borderRadius: "full", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, boxShadow: `0 1px 3px ${colors.boxShadow.default}`, color: colors.textMuted, cursor: "pointer", _hover: { color: colors.text[900] }, sx: { "@media (hover: none)": { display: "none" } }, children: _jsx(Icon, { size: 16, "aria-hidden": true }) }));
+    return (_jsx(Box, { as: "button", type: "button", tabIndex: -1, "aria-hidden": true, "data-testid": `launcher-scopes-${side}`, onMouseDown: (event) => event.preventDefault(), onClick: onPage, position: "absolute", top: "50%", left: side === "start" ? 0 : undefined, right: side === "end" ? 0 : undefined, transform: "translateY(-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "28px", borderRadius: "full", borderWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, boxShadow: `0 1px 3px ${colors.boxShadow.default}`, color: colors.textMuted, cursor: "pointer", _hover: { color: colors.text[900] }, sx: { "@media (hover: none)": { display: "none" } }, children: _jsx(Icon, { size: 16, "aria-hidden": true }) }));
 }
 export function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
     const { colors } = useCustomTheme();
@@ -38,6 +39,7 @@ export function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
     const selected = Math.max(0, scopes.findIndex((scope) => scope.id === value));
     const layoutKey = scopes.map((s) => { var _a; return `${s.id}:${(_a = s.count) !== null && _a !== void 0 ? _a : ""}`; }).join("|");
     const edge = liftToContrast(colors.primary[500], colors.surfaceRaised, AA_NON_TEXT);
+    const rule = raisedRule(colors);
     const measure = useCallback(() => {
         const strip = stripRef.current;
         if (!strip)
@@ -116,7 +118,7 @@ export function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
                                 chipRefs.current[index] = node;
                             }, role: "radio", "aria-checked": isSelected, "aria-label": hasCount
                                 ? countLabel(scope.label, (_a = scope.count) !== null && _a !== void 0 ? _a : 0)
-                                : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onChange(scope.id), display: "inline-flex", alignItems: "center", gap: "6px", flexShrink: 0, h: "32px", pl: "12px", pr: hasCount ? "6px" : "12px", borderRadius: "full", borderWidth: "1px", borderColor: isSelected ? edge : colors.boxborder[200], bg: isSelected ? colors.primary[50] : colors.surfaceRaised, color: isSelected ? colors.accentText : colors.textMuted, fontSize: "xs-plus", fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: "pointer", transition: transitionFor([
+                                : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onChange(scope.id), display: "inline-flex", alignItems: "center", gap: "6px", flexShrink: 0, h: "32px", pl: "12px", pr: hasCount ? "6px" : "12px", borderRadius: "full", borderWidth: "1px", borderColor: isSelected ? edge : rule, bg: isSelected ? colors.primary[50] : colors.surfaceRaised, color: isSelected ? colors.accentText : colors.textMuted, fontSize: "xs-plus", fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: "pointer", transition: transitionFor([
                                 "background-color",
                                 "border-color",
                                 "color",

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

@@ -15,7 +15,8 @@ const SYNONYM_FACTOR = 0.92;
 const STEM_PENALTY = 1;
 const MAX_ALTERNATIVES = 12;
 const UNBOUNDED_SLACK = 32;
-const TAMIL_FINAL_MA = "ம்";
+// NOTE: code points, not a literal; see ANUSVARA in fold.ts.
+const TAMIL_FINAL_MA = String.fromCodePoint(0x0bae, 0x0bcd);
 const WORD_RE = /[\p{L}\p{N}\p{M}]+/gu;
 const charBit = (code) => {
     if (code >= 97 && code <= 122)

package/dist/esm/Components/NavLauncher/engine/fold.js

@@ -3,7 +3,8 @@ const OPTIONAL_MARKS =
 // eslint-disable-next-line no-misleading-character-class -- each mark is removed on its own
 /[\u0300-\u036f\u0591-\u05c7\u0610-\u061a\u064b-\u065f\u0670\u06d6-\u06ed\u093c\u1ab0-\u1aff\u1dc0-\u1dff\u200c\u200d\u20d0-\u20ff\ufe20-\ufe2f]/g;
 const CHANDRABINDU = /\u0901/g;
-const ANUSVARA = "\u0902";
+// NOTE: built from code points; minified Indic literals trip consumers' locale-data budget gates.
+const ANUSVARA = String.fromCodePoint(0x0902);
 const MARK = /\p{M}/u;
 const SEPARATOR = /[^\p{L}\p{N}\p{M}]+/u;
 const SPECIAL = {

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

@@ -0,0 +1,11 @@
+import { EASINGS } from "@chakra-ui/react";
+import { motionTransition } from "../../Theme/tokens/primitives/motion.js";
+const ENTER = motionTransition("enter", "out");
+const INSTANT = { duration: 0 };
+const EXIT = { duration: 0.15, ease: [...EASINGS.easeInOut] };
+export const launcherSlide = (isReducedMotion) => ({
+    variants: {
+        enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
+        exit: { x: "-100%", y: 0, transition: EXIT },
+    },
+});