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

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

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

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

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
 import type { MediaViewerProps } from "../MediaViewerProps";
 import { type MediaItem, type ResolveUrl, type ViewerFile } from "../mediaItems";
+/** MediaViewer props passed through; items, index and title come from `open`. */
 export type UseFileViewerOptions = Omit<MediaViewerProps, "isOpen" | "onClose" | "items" | "index" | "onIndexChange" | "title">;
 export interface FileViewerApi {
     /** Opens `files` (app-stored paths) resolved through `resolveUrl`, at `index`. */

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

@@ -59,6 +59,7 @@ export declare const clampZoom: (zoom: number) => number;
 export declare function formatClock(totalSeconds: number): string;
 export declare function mediaLink(item: MediaItem, atSeconds?: number): string;
 export declare function formatFileSize(bytes: number): string;
+export declare function formatUploadedDate(value: string): string;
 export declare function fileTypeLabel(src: string): string | null;
 /** True while the event target is a text field or slider, so keyboard shortcuts stay out of its way. */
 export declare function isTypingTarget(target: EventTarget | null): boolean;

package/dist/Components/MediaViewer/mediaItems.js

@@ -8,6 +8,7 @@ exports.planPreview = planPreview;
 exports.formatClock = formatClock;
 exports.mediaLink = mediaLink;
 exports.formatFileSize = formatFileSize;
+exports.formatUploadedDate = formatUploadedDate;
 exports.fileTypeLabel = fileTypeLabel;
 exports.isTypingTarget = isTypingTarget;
 exports.MIN_ZOOM = 25;
@@ -180,6 +181,10 @@ 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" });
+function formatUploadedDate(value) {
+    return UPLOADED_DATE.format(new Date(value));
+}
 function fileTypeLabel(src) {
     const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
     return match ? match[1].toUpperCase() : null;

package/dist/Components/Modal/Modal.d.ts

@@ -3,4 +3,5 @@ import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooter
 export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
 export declare const ModalBody: React.FC<ModalBodySlotProps>;
 export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -1,15 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
 exports.default = Modal;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
+const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
+const findSlot_1 = require("../Common/findSlot");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -22,29 +19,14 @@ const ModalFooter = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ModalFooter = ModalFooter;
-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_1.default.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === react_1.default.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. */
 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 } = (0, useCustomTheme_1.useCustomTheme)();
-    const headerSlot = findSlot(children, exports.ModalHeader);
-    const bodySlot = findSlot(children, exports.ModalBody);
-    const footerSlot = findSlot(children, exports.ModalFooter);
+    const headerSlot = (0, findSlot_1.findSlot)(children, exports.ModalHeader);
+    const bodySlot = (0, findSlot_1.findSlot)(children, exports.ModalBody);
+    const footerSlot = (0, findSlot_1.findSlot)(children, exports.ModalFooter);
     (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { 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: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { 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: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "div", mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_1.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_1.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/Modal/warnDroppedSlotChildren.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const warnDroppedSlotChildren: (owner: "Drawer" | "Modal", children: React.ReactNode, slots: unknown[]) => void;
+export declare const warnDroppedSlotChildren: (owner: string, children: React.ReactNode, slots: unknown[], advice?: string) => void;

package/dist/Components/Modal/warnDroppedSlotChildren.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.warnDroppedSlotChildren = void 0;
 const react_1 = __importDefault(require("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;
@@ -30,16 +31,19 @@ const collect = (children, slots, dropped) => {
         dropped.set(child.type, nameOf(child.type));
     }
 };
-const warnDroppedSlotChildren = (owner, children, slots) => {
+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}`);
     });
 };
 exports.warnDroppedSlotChildren = warnDroppedSlotChildren;

package/dist/Components/NavLauncher/LauncherTabs.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tabId = (base, id) => `${base}-tab-${id}`;
@@ -41,7 +42,7 @@ function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveUp, onLe
         event.stopPropagation();
         handle();
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "tablist", "aria-label": label, "aria-orientation": "horizontal", flexShrink: 0, px: { base: "10px", md: "16px" }, gap: { base: 0, md: "4px" }, borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, onKeyDown: onKeyDown, children: tabs.map((tab) => {
             const isSelected = tab.id === selected;
             return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", role: "tab", id: (0, exports.tabId)(idBase, tab.id), ref: (node) => {
                     if (node)

package/dist/Components/NavLauncher/NavLauncher.js

@@ -47,6 +47,7 @@ const motion_1 = require("../../Theme/chakra/motion");
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AppMark_1 = require("../AppSwitcher/AppMark");
@@ -67,6 +68,7 @@ const ScopeBar_1 = require("./ScopeBar");
 const searchLayout_1 = require("./searchLayout");
 const spotlight_1 = require("./spotlight");
 const spotlightParts_1 = require("./spotlightParts");
+const useCopiedFlash_1 = require("./useCopiedFlash");
 const NO_APPS = [];
 const MD_QUERY = "(min-width: 48em)";
 const LG_QUERY = "(min-width: 62em)";
@@ -140,6 +142,7 @@ const DEFAULT_LABELS = {
     matchedOn: "Matches",
     answers: "Answers",
     hintCopy: "copy",
+    hintExpand: "expand",
     scopes: "Search in",
     scopeAll: "All",
     scopeChanged: (label) => `Showing ${label}`,
@@ -192,7 +195,7 @@ function Pane({ children, scrolls = false, }) {
 }
 function Rail({ label, children, scrolls = false, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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: (0, surfaceRaised_1.raisedRule)(colors), overflowY: { base: "visible", lg: "auto" }, children: (0, jsx_runtime_1.jsx)(launcherParts_1.RulePlaneProvider, { value: "recess", children: children }) }));
 }
 function SkeletonLayout({ label }) {
     return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", "aria-busy": "true", "aria-label": label, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, children: [(0, jsx_runtime_1.jsx)(Pane, { children: [0, 1, 2].map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "6rem" }), (0, jsx_runtime_1.jsx)(ItemGrid, { children: [0, 1, 2, 3].map((row) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", h: "34px", mt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "1rem" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.875rem", width: "8rem" })] }, row))) })] }, section))) }), (0, jsx_runtime_1.jsx)(Rail, { label: label, children: [0, 1].map((group) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "5rem" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1.5rem", width: "100%", mt: 2 }, row)))] }, group))) })] }));
@@ -203,9 +206,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: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { 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: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 12, strokeWidth: 2.4, "aria-hidden": true }) })) : null, hint ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, display: { base: "none", md: "block" }, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint }) })) : null] }));
 }
-function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
+const SearchRow = (0, react_2.memo)(function SearchRow({ item, query, isActive, link, labels, optionId, index, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isTouch = (0, launcherParts_1.useTouchDensity)();
     const isScreen = item.kind === "screen";
@@ -218,17 +221,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 ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: (0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_2.transitionFor)(["background-color"]), onMouseMove: onHover, sx: isActive
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tipLabel, placement: "top-start", isDisabled: !title.isTruncated && !context.isTruncated, children: (0, jsx_runtime_1.jsxs)(react_1.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: (0, motion_2.transitionFor)(["background-color"]), onMouseMove: () => onHover(index), sx: isActive
                 ? { ...launcherParts_1.ROW_CONTAINER, ...(0, launcherParts_1.activeRowSurface)(colors) }
                 : launcherParts_1.ROW_CONTAINER, children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(launcherParts_1.RowIcon, { icon: item.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: (0, launcherParts_1.titleInset)(base, open, ENTER_CHIP_WIDTH), children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [(0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }), isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? (0, jsx_runtime_1.jsx)(launcherParts_1.NewTag, { label: labels.newBadge }) : null, item.keywordHint ? ((0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { ref: contextRef, fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "8px" })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.RowActions, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { "aria-hidden": true, display: "contents", children: [isActive ? ((0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
+                            onOpen(item);
+                    }, children: [(0, jsx_runtime_1.jsx)(launcherParts_1.RowIcon, { icon: item.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", minW: 0, h: "19px", overflow: item.keywordHint ? "hidden" : undefined, sx: (0, launcherParts_1.titleInset)(base, open, ENTER_CHIP_WIDTH), children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { ref: titleRef, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, minW: 0, ...(item.keywordHint ? { flexShrink: 0, maxW: "100%" } : {}), children: [(0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }), isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontWeight: 400, color: colors.textMuted, children: ` — ${item.context}` })) : null] }), item.isNew ? (0, jsx_runtime_1.jsx)(launcherParts_1.NewTag, { label: labels.newBadge }) : null, item.keywordHint ? ((0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: item.hint })) : null] }), item.context && !isScreen ? ((0, jsx_runtime_1.jsx)(react_1.Text, { ref: contextRef, fontSize: "xs-minus", lineHeight: "15px", color: colors.textMuted, noOfLines: 1, children: item.context })) : null] })] }), item.href ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "lg" })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.RowActions, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { "aria-hidden": true, display: "contents", children: [isActive ? ((0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
                                     display: "none",
                                     [launcherParts_1.WIDE_ROW]: { display: "inline-flex" },
                                     "@media (hover: none)": { display: "none" },
-                                }, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), hasStar ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: onPin, tabIndex: -1 })) : null, item.href ? ((0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? ((0, jsx_runtime_1.jsx)(launcherParts_1.RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }) }));
-}
+                                }, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }) })) : null, (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), hasStar ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(item.label) : labels.pin(item.label), title: "", onToggle: () => item.screenId && onPin(item.screenId), tabIndex: -1 })) : null, item.href ? ((0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: item.href, label: labels.openInNewTab(isScreen ? `${item.label} — ${item.context}` : item.label), tip: labels.newTabTip, linkAs: link.linkAs, tabIndex: -1 })) : null] }) }), hasStar ? ((0, jsx_runtime_1.jsx)(launcherParts_1.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. */
 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;
@@ -247,6 +250,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const [innerScope, setInnerScope] = (0, react_2.useState)(spotlight_1.SCOPE_ALL);
     const [expanded, setExpanded] = (0, react_2.useState)(NO_GROUPS);
     const [announcement, setAnnouncement] = (0, react_2.useState)({ text: "", n: 0 });
+    const { copiedId, flash, clear: clearFlash } = (0, useCopiedFlash_1.useCopiedFlash)();
     const navigating = (0, react_2.useRef)(false);
     const labels = (0, react_2.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const isControlled = controlledQuery !== undefined;
@@ -284,11 +288,12 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         setTab("menu");
         setExpanded(NO_GROUPS);
         setAnnouncement({ text: "", n: 0 });
+        clearFlash();
         if (latest.current.query !== "")
             latest.current.setQuery("");
         if (latest.current.scope !== spotlight_1.SCOPE_ALL)
             latest.current.setScope(spotlight_1.SCOPE_ALL, true);
-    }, [isOpen]);
+    }, [isOpen, clearFlash]);
     (0, react_2.useEffect)(() => {
         navigating.current = false;
         setActiveIndex(0);
@@ -412,13 +417,15 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     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 = (0, react_2.useRef)(onClose);
+    closeRef.current = onClose;
     const link = (0, react_2.useMemo)(() => ({
         linkAs,
         onPlainClick: (event) => {
             if ((0, launcherParts_1.isPlainClick)(event))
-                onClose();
+                closeRef.current();
         },
-    }), [linkAs, onClose]);
+    }), [linkAs]);
     const open = (0, react_2.useCallback)((item, newTab) => {
         if (item.run) {
             onClose();
@@ -431,16 +438,21 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             onClose();
         onNavigate(item.href, { newTab });
     }, [onClose, onNavigate]);
-    const copyValue = (0, react_2.useCallback)(async (value, node) => {
+    const rowHandlers = (0, react_2.useRef)({ open, togglePin: onTogglePin });
+    rowHandlers.current = { open, togglePin: onTogglePin };
+    const openRow = (0, react_2.useCallback)((item) => rowHandlers.current.open(item, false), []);
+    const pinRow = (0, react_2.useCallback)((screenId) => { var _a, _b; return (_b = (_a = rowHandlers.current).togglePin) === null || _b === void 0 ? void 0 : _b.call(_a, screenId); }, []);
+    const copyValue = (0, react_2.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 = (0, react_2.useCallback)(() => announce(labels.copied), [announce, labels]);
     const onCopyBlocked = (0, react_2.useCallback)((node) => {
         selectNode(node);
@@ -456,9 +468,9 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             return;
         }
         const { item } = entry;
-        if (entry.type === "answer" && !item.run && !item.href) {
+        if ((0, searchLayout_1.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);
@@ -747,9 +759,9 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         : isScopeBrowse
             ? labels.scopeEmpty((_a = currentScope === null || currentScope === void 0 ? void 0 : currentScope.label) !== null && _a !== void 0 ? _a : "")
             : labels.noResults(trimmed);
-    const noResults = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: "40px", borderRadius: "12px", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, children: (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length)
+    const noResults = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", gap: "12px", py: "48px", px: "20px", textAlign: "center", role: "status", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: "40px", borderRadius: "xl", bg: colors.backgroundColor.subtle, color: colors.textMuted, align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "14px", fontWeight: 600, color: colors.text[900], children: emptyTitle }), hasHint ? ((0, jsx_runtime_1.jsx)(react_1.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) ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_1.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: (0, motion_2.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: suggestion }, suggestion))) })) : null] }));
+                            : labels.noResultsHint })) : null] }), hasHint && (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", justify: "center", gap: "6px", children: suggestions.map((suggestion) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => pickSuggestion(suggestion), h: "28px", px: "11px", borderRadius: "full", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, fontSize: "xs-plus", fontWeight: 500, color: colors.text[900], transition: (0, motion_2.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.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) => ({
@@ -764,7 +776,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     });
     const renderBlock = (block) => {
         if (block.type === "answers") {
-            return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => ((0, jsx_runtime_1.jsx)(spotlightParts_1.AnswerCard, { ...cardProps(item, block.start + i) }, item.id))) }, "answers"));
+            return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": labels.answers, direction: "column", gap: "6px", children: block.items.map((item, i) => ((0, jsx_runtime_1.jsx)(spotlightParts_1.AnswerCard, { ...cardProps(item, block.start + i), isCopied: copiedId === item.id }, item.id))) }, "answers"));
         }
         if (block.type === "top") {
             return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": labels.topHit, direction: "column", gap: "6px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.topHit, isDecorative: true }), (0, jsx_runtime_1.jsx)(spotlightParts_1.TopHitCard, { ...cardProps(block.item, block.start), query: query })] }, "top"));
@@ -773,7 +785,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         const meta = group.isSection ? labels.found(group.items.length) : undefined;
         return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": meta ? `${group.label}, ${meta}` : group.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: group.label, meta: meta ? `(${meta})` : undefined, isDecorative: true }), (0, jsx_runtime_1.jsx)(ItemGrid, { columns: columns, children: block.visible.map((item, i) => {
                         const index = block.start + i;
-                        return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.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 ? ((0, jsx_runtime_1.jsxs)(launcherParts_1.HighlightOptionsProvider, { value: highlightOptions, children: [(0, jsx_runtime_1.jsx)(react_1.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) => {
@@ -785,8 +797,18 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         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) ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "dock", labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
-    const stacked = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
+    const enterCopies = isListView && (0, searchLayout_1.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) ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "dock", enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : null;
+    const stacked = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { scrolls: isLg, children: isListView ? searchPane : browsePane }), showPreview ? ((0, jsx_runtime_1.jsx)(spotlightParts_1.PreviewPane, { item: activeItem, placement: "side", width: RAIL_WIDTH, enterCopies: enterCopies, isCopied: isActiveCopied, labels: labels, onCopied: onCopied, onCopyBlocked: onCopyBlocked })) : (rail)] }));
     const body = isLoading ? (0, jsx_runtime_1.jsx)(SkeletonLayout, { label: labels.loading }) : stacked;
     const titleId = `${baseId}-title`;
     const scopeBar = hasScopes ? ((0, jsx_runtime_1.jsx)(ScopeBar_1.ScopeBar, { scopes: scopeChips, value: scope, onChange: (next) => setScope(next), label: labels.scopes, countLabel: labels.scopeCount })) : null;
@@ -808,5 +830,5 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 overflow: "hidden",
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
-            }, children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)(react_1.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: (0, motion_2.transitionFor)(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_1.reducedMotionSx)() }, children: countText }), headerActions ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: (0, jsx_runtime_1.jsx)("span", { children: announcement.text }, announcement.n) }), isTabbed ? ((0, jsx_runtime_1.jsx)(LauncherTabs_1.LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => ((0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [modKeyLabel ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", gap: "4px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: ENTER_KEY })] })) : ((0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
+            }, children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { as: "h2", id: titleId, children: labels.title }), (0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)(react_1.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: (0, motion_2.transitionFor)(["width", "opacity"]), sx: { fontVariantNumeric: "tabular-nums", ...(0, motion_1.reducedMotionSx)() }, children: countText }), headerActions ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", gap: "4px", flexShrink: 0, children: headerActions })) : null, (0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": "launcher-scope-row", pl: "7px", pr: "3px", mt: "-6px", pb: "4px", children: scopeRow })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: "column", overflowY: "hidden", minH: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: bodyRef, direction: "column", flex: 1, minH: 0, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-live", "aria-live": "polite", "aria-atomic": "true", children: countText }), (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { "data-testid": "launcher-announce", "aria-live": "polite", "aria-atomic": "true", children: (0, jsx_runtime_1.jsx)("span", { children: announcement.text }, announcement.n) }), isTabbed ? ((0, jsx_runtime_1.jsx)(LauncherTabs_1.LauncherTabs, { tabs: tabs, selected: activeTab, onSelect: setTab, idBase: baseId, label: labels.tabsLabel, onLeaveUp: () => focusField(), onLeaveDown: () => moveFocus("first") })) : null, isLg ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "row", flex: 1, minH: 0, minW: 0, children: body })) : (compactBody), dock] }) }), (0, jsx_runtime_1.jsxs)(Drawer_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { display: { base: "none", md: "flex" }, gap: "6px 14px", align: "center", wrap: "wrap", "aria-hidden": true, sx: { "@media (hover: none)": { display: "none" } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", gap: "2px", children: ARROW_KEYS.map((arrow) => ((0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: arrow }, arrow))) }), labels.hintMove] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), (0, jsx_runtime_1.jsx)(launcherParts_1.HintLabel, { text: enterLabel, reserve: enterReserve })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", opacity: canOpenInTab ? 1 : 0.45, transition: (0, motion_2.transitionFor)(["opacity"]), sx: (0, motion_1.reducedMotionSx)(), children: [modKeyLabel ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", gap: "4px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel }), (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: ENTER_KEY })] })) : ((0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "mod+enter", size: "xs" })), labels.hintNewTab] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", display: { base: "none", lg: "flex" }, children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: modKeyLabel !== null && modKeyLabel !== void 0 ? modKeyLabel : MOD_KEY }), labels.hintClickNewTab] }), onTogglePin ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "P" }), labels.hintPin] })) : null, (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "esc", size: "xs" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }) }));
 }

package/dist/Components/NavLauncher/NavLauncherProps.d.ts

@@ -106,9 +106,9 @@ export type LauncherLabels = {
     loading: string;
     /** Heading of the empty state shown when `sections` has nothing to render. */
     empty: string;
-    /** Footer hint after the four arrow key caps. */
+    /** Footer hint after the arrow caps; the legend hides below md and on touch. */
     hintMove: string;
-    /** Footer hint after the ENTER key cap. */
+    /** Hint after ENTER when it opens the active result: footer, answer card, preview pane. */
     hintOpen: string;
     /** Footer hint after the mod + ENTER key caps. */
     hintNewTab: string;
@@ -158,8 +158,10 @@ export type LauncherLabels = {
     matchedOn?: string;
     /** Name of the answers group. */
     answers?: string;
-    /** Footer-style hint on an answer card that copies its value. */
+    /** Hint after ENTER when it copies the active answer: footer, answer card, preview pane. */
     hintCopy?: string;
+    /** Footer hint after ENTER while a Show more option is active. */
+    hintExpand?: string;
     /** Name of the scope chip group. */
     scopes?: string;
     /** Chip prepended to `scopes` when the list has no "all". */
@@ -178,7 +180,7 @@ export type LauncherLabels = {
     preview?: string;
     /** Accessible name and tooltip of a fact's Copy button. */
     copy?: (label: string) => string;
-    /** Polite announcement after a copy. */
+    /** Announced after a copy; shown for 1.5 s in place of the Enter hint. */
     copied?: string;
     /** Announcement when the clipboard is blocked and the value was selected instead. */
     copySelected?: string;

package/dist/Components/NavLauncher/ScopeBar.js

@@ -9,6 +9,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const EDGE = 36;
@@ -30,7 +31,7 @@ const fadeMask = ({ start, end }) => start || end
 function PageArrow({ side, onPage, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const Icon = side === "start" ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
-    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.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: (0, surfaceRaised_1.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: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) }));
 }
 function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -41,6 +42,7 @@ 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 = (0, outlineRung_1.liftToContrast)(colors.primary[500], colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
+    const rule = (0, surfaceRaised_1.raisedRule)(colors);
     const measure = (0, react_2.useCallback)(() => {
         const strip = stripRef.current;
         if (!strip)
@@ -119,7 +121,7 @@ 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: (0, motion_2.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: (0, motion_2.transitionFor)([
                                 "background-color",
                                 "border-color",
                                 "color",

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

@@ -22,7 +22,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/Components/NavLauncher/engine/fold.js

@@ -6,7 +6,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/Components/NavLauncher/launcherParts.d.ts

@@ -6,6 +6,18 @@ import type { LauncherLabels, LauncherModule, LauncherScreen } from "./NavLaunch
 export declare const ITEM_SELECTOR = "[data-launcher-item]";
 export declare const TouchDensity: import("react").Provider<boolean>;
 export declare const useTouchDensity: () => boolean;
+type RulePlane = "raised" | "recess";
+export declare const RulePlaneProvider: import("react").Provider<RulePlane>;
+export declare const copyHint: (base: string, copied: string, isCopied: boolean) => {
+    text: string;
+    reserve: string;
+    isAccent: boolean;
+};
+export declare function HintLabel({ text, reserve, isAccent, }: {
+    text: string;
+    reserve: string;
+    isAccent?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const isPlainClick: (event: MouseEvent) => boolean;
 export type LinkCtx = {
     linkAs: ElementType;