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

package/dist/Components/NavLauncher/NavLauncher.js

@@ -63,6 +63,10 @@ const match_1 = require("./match");
 const NewTabLink_1 = __importDefault(require("./NewTabLink"));
 const PinToggle_1 = __importDefault(require("./PinToggle"));
 const resultNavigation_1 = require("./resultNavigation");
+const ScopeBar_1 = require("./ScopeBar");
+const searchLayout_1 = require("./searchLayout");
+const spotlight_1 = require("./spotlight");
+const spotlightParts_1 = require("./spotlightParts");
 const NO_APPS = [];
 const MD_QUERY = "(min-width: 48em)";
 const LG_QUERY = "(min-width: 62em)";
@@ -86,6 +90,11 @@ const RESULT_KEYS = [
 ];
 const TEXT_TARGET = "input, textarea, select, [contenteditable=true]";
 const ROW_HEIGHT = 46;
+const SPOTLIGHT_GROUP_LIMIT = 5;
+const FIELD_MIN_WIDTH = "max(15rem, 36%)";
+const NO_GROUPS = new Set();
+const NO_RESULTS = [];
+const NO_SEARCH_GROUPS = [];
 const DEFAULT_LABELS = {
     title: "Menu",
     searchPlaceholder: "Search menus and screens",
@@ -110,7 +119,6 @@ const DEFAULT_LABELS = {
     hintNewTab: "new tab",
     hintPin: "pin",
     hintClose: "close",
-    hintOpenMenu: "open",
     hintClickNewTab: "+ click for new tab",
     newTabTip: "Open in new tab",
     resultsCount: (count) => `${count} ${count === 1 ? "result" : "results"}`,
@@ -128,6 +136,31 @@ const DEFAULT_LABELS = {
     pinShort: "Pin",
     footerNote: "Pins follow your account",
     suggestionsHint: "Try one of these",
+    topHit: "Top hit",
+    matchedOn: "Matches",
+    answers: "Answers",
+    hintCopy: "copy",
+    scopes: "Search in",
+    scopeAll: "All",
+    scopeChanged: (label) => `Showing ${label}`,
+    scopeCount: (label, count) => `${label}, ${count} ${count === 1 ? "result" : "results"}`,
+    scopeEmpty: (label) => `Type to search ${label}`,
+    quickActions: "Quick actions",
+    showMore: (count) => `Show ${count} more`,
+    preview: "Preview",
+    copy: (label) => `Copy ${label}`,
+    copied: "Copied",
+    copySelected: "Clipboard blocked, text selected — copy it with your keyboard",
+};
+const selectNode = (node) => {
+    var _a;
+    const selection = (_a = window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window);
+    if (!node || !selection)
+        return;
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.removeAllRanges();
+    selection.addRange(range);
 };
 const visibleSections = (sections) => sections
     .map((section) => ({
@@ -164,15 +197,15 @@ function Rail({ label, children, scrolls = false, }) {
 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))) })] }));
 }
-function SearchField({ inputRef, value, onChange, onKeyDown, labels, hint, listboxId, activeId, isExpanded, hasResults, }) {
+function SearchField({ inputRef, value, onChange, onKeyDown, labels, placeholder, hint, listboxId, activeId, isExpanded, hasResults, minW, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { flex: 1, minW: 0, h: { base: "40px", md: "44px" }, align: "center", gap: "10px", pl: "14px", pr: "10px", borderRadius: { base: "10px", md: "12px" }, borderWidth: "1px", borderColor: colors.primary[500], bg: colors.surfaceRaised, boxShadow: `0 0 0 3px ${colors.primary.opacity[16]}`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.accentText, display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2.2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "input", ref: inputRef, value: value, onChange: (event) => onChange(event.target.value), onKeyDown: onKeyDown, placeholder: labels.searchPlaceholder, "aria-label": labels.searchPlaceholder, role: "combobox", "aria-expanded": isExpanded, "aria-controls": isExpanded && hasResults ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": activeId, autoComplete: "off", flex: 1, minW: 0, h: "100%", border: 0, outline: "none", bg: "transparent", fontSize: "16px", color: colors.text[900], _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 } }), value ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": labels.clearSearch, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { flex: 1, minW: minW, h: { base: "40px", md: "44px" }, align: "center", gap: "10px", pl: "14px", pr: "10px", borderRadius: { base: "10px", md: "12px" }, borderWidth: "1px", borderColor: colors.primary[500], bg: colors.surfaceRaised, boxShadow: `0 0 0 3px ${colors.primary.opacity[16]}`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.accentText, display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 18, strokeWidth: 2.2, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "input", ref: inputRef, value: value, onChange: (event) => onChange(event.target.value), onKeyDown: onKeyDown, placeholder: placeholder, "aria-label": labels.searchPlaceholder, role: "combobox", "aria-expanded": isExpanded, "aria-controls": isExpanded && hasResults ? listboxId : undefined, "aria-autocomplete": "list", "aria-activedescendant": activeId, autoComplete: "off", flex: 1, minW: 0, h: "100%", border: 0, outline: "none", bg: "transparent", fontSize: "16px", color: colors.text[900], _placeholder: { color: (0, placeholderInk_1.placeholderInk)(colors), opacity: 1 } }), value ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": labels.clearSearch, onClick: () => {
                     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] }));
 }
-function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, }) {
+function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, describedBy, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isTouch = (0, launcherParts_1.useTouchDensity)();
     const isScreen = item.kind === "screen";
@@ -187,17 +220,18 @@ function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, ca
     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
                 ? { ...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, "data-active": isActive, flex: 1, minW: 0, align: "flex-start", gap: "10px", cursor: "pointer", onClick: () => {
+                : 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", 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, 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", 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: {
+                    }, 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: {
                                     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] }) }));
 }
 /** 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", "data-testid": testId, }) {
+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;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { colors } = theme;
     const inputRef = (0, react_2.useRef)(null);
@@ -210,54 +244,157 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const [innerQuery, setInnerQuery] = (0, react_2.useState)("");
     const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
     const [tab, setTab] = (0, react_2.useState)("menu");
+    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 navigating = (0, react_2.useRef)(false);
     const labels = (0, react_2.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const isControlled = controlledQuery !== undefined;
     const query = isControlled ? controlledQuery : innerQuery;
+    const isSpotlight = searchMode === "spotlight";
     const setQuery = (0, react_2.useCallback)((next) => {
         if (!isControlled)
             setInnerQuery(next);
         onQueryChange === null || onQueryChange === void 0 ? void 0 : onQueryChange(next);
     }, [isControlled, onQueryChange]);
-    const latest = (0, react_2.useRef)({ query, setQuery });
-    latest.current = { query, setQuery };
+    const scopeList = (0, react_2.useMemo)(() => {
+        if (!(scopes === null || scopes === void 0 ? void 0 : scopes.length))
+            return [];
+        if (scopes.some((s) => s.id === spotlight_1.SCOPE_ALL))
+            return [...scopes];
+        return [{ id: spotlight_1.SCOPE_ALL, label: labels.scopeAll }, ...scopes];
+    }, [scopes, labels.scopeAll]);
+    const rawScope = activeScope !== null && activeScope !== void 0 ? activeScope : innerScope;
+    const scope = scopeList.some((s) => s.id === rawScope) ? rawScope : spotlight_1.SCOPE_ALL;
+    const announce = (0, react_2.useCallback)((text) => setAnnouncement((prev) => ({ text, n: prev.n + 1 })), []);
+    const setScope = (0, react_2.useCallback)((next, isSilent = false) => {
+        var _a;
+        if (activeScope === undefined)
+            setInnerScope(next);
+        onScopeChange === null || onScopeChange === void 0 ? void 0 : onScopeChange(next);
+        const label = (_a = scopeList.find((s) => s.id === next)) === null || _a === void 0 ? void 0 : _a.label;
+        if (!isSilent && label)
+            announce(labels.scopeChanged(label));
+    }, [activeScope, onScopeChange, scopeList, announce, labels]);
+    const latest = (0, react_2.useRef)({ query, setQuery, scope, setScope });
+    latest.current = { query, setQuery, scope, setScope };
     (0, react_2.useEffect)(() => {
         if (isOpen)
             return;
         setTab("menu");
+        setExpanded(NO_GROUPS);
+        setAnnouncement({ text: "", n: 0 });
         if (latest.current.query !== "")
             latest.current.setQuery("");
+        if (latest.current.scope !== spotlight_1.SCOPE_ALL)
+            latest.current.setScope(spotlight_1.SCOPE_ALL, true);
     }, [isOpen]);
     (0, react_2.useEffect)(() => {
         navigating.current = false;
         setActiveIndex(0);
-    }, [query]);
+    }, [query, scope]);
     const sections = (0, react_2.useMemo)(() => visibleSections(rawSections), [rawSections]);
     const byId = (0, react_2.useMemo)(() => indexScreens(sections), [sections]);
     const pinned = (0, react_2.useMemo)(() => new Set(pinnedIds), [pinnedIds]);
     const pinnedItems = (0, react_2.useMemo)(() => pinnedIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [pinnedIds, byId]);
     const frequentItems = (0, react_2.useMemo)(() => frequentIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [frequentIds, byId]);
     const recentItems = (0, react_2.useMemo)(() => recentIds.flatMap((id) => { var _a; return (_a = byId.get(id)) !== null && _a !== void 0 ? _a : []; }), [recentIds, byId]);
-    const found = (0, react_2.useMemo)(() => (0, match_1.searchLauncherSections)({
+    const spotIndex = (0, react_2.useMemo)(() => isSpotlight
+        ? (0, spotlight_1.createSpotlightIndex)(sections, actions, labels.actionsGroup)
+        : null, [isSpotlight, sections, actions, labels.actionsGroup]);
+    const boosts = (0, react_2.useMemo)(() => spotIndex
+        ? (0, spotlight_1.spotlightBoosts)(spotIndex, { pinnedIds, frequentIds, recentIds })
+        : undefined, [spotIndex, pinnedIds, frequentIds, recentIds]);
+    const modelGroups = (0, react_2.useMemo)(() => {
+        if (spotIndex) {
+            return (0, spotlight_1.searchSpotlight)(spotIndex, {
+                query,
+                extraResults,
+                synonyms,
+                boosts,
+            });
+        }
+        const local = (extraResults !== null && extraResults !== void 0 ? extraResults : []).map((g) => g.matchLocally ? { ...g, items: (0, match_1.filterItems)(g.items, query) } : g);
+        const found = (0, match_1.searchLauncherSections)({
+            query,
+            sections,
+            actions,
+            extraResults: local,
+            actionsLabel: labels.actionsGroup,
+        });
+        const scopeOf = new Map(local.map((g) => { var _a; return [g.id, (_a = g.scope) !== null && _a !== void 0 ? _a : g.id]; }));
+        return [
+            ...found.sections.map((s) => ({
+                id: `section:${s.id}`,
+                label: s.label,
+                scope: spotlight_1.SCOPE_SCREENS,
+                isSection: true,
+                items: s.items,
+            })),
+            ...found.groups.map((g) => {
+                var _a;
+                return ({
+                    ...g,
+                    scope: g.id === "actions" ? spotlight_1.SCOPE_ACTIONS : ((_a = scopeOf.get(g.id)) !== null && _a !== void 0 ? _a : g.id),
+                    isSection: false,
+                });
+            }),
+        ];
+    }, [
+        spotIndex,
         query,
+        extraResults,
+        synonyms,
+        boosts,
         sections,
         actions,
-        extraResults,
-        actionsLabel: labels.actionsGroup,
-    }), [query, sections, actions, extraResults, labels.actionsGroup]);
-    const groups = (0, react_2.useMemo)(() => [
-        ...found.sections.map((s) => ({
-            id: `section:${s.id}`,
-            label: s.label,
-            meta: labels.found(s.items.length),
-            items: s.items,
-        })),
-        ...found.groups,
-    ], [found, labels]);
-    const results = (0, react_2.useMemo)(() => groups.flatMap((g) => g.items), [groups]);
-    const groupStarts = (0, react_2.useMemo)(() => groups.map((_, i) => groups.slice(0, i).reduce((n, g) => n + g.items.length, 0)), [groups]);
+        labels.actionsGroup,
+    ]);
+    const matchedAnswers = (0, react_2.useMemo)(() => (0, spotlight_1.matchAnswers)(answers, query, synonyms), [answers, query, synonyms]);
+    const answerResults = scope === spotlight_1.SCOPE_ALL ? matchedAnswers : NO_RESULTS;
+    const scoped = (0, react_2.useMemo)(() => {
+        const groups = (0, searchLayout_1.inScope)(modelGroups, scope);
+        return isSpotlight ? (0, searchLayout_1.takeTopHit)(groups) : { groups };
+    }, [modelGroups, scope, isSpotlight]);
+    const highlightOptions = (0, react_2.useMemo)(() => (isSpotlight ? { fuzzy: true, synonyms } : undefined), [isSpotlight, synonyms]);
     const isSearchView = query.trim().length > 0;
-    const active = Math.min(activeIndex, Math.max(results.length - 1, 0));
+    const hasScopes = scopeList.length > 1;
+    const currentScope = scopeList.find((s) => s.id === scope);
+    const isScopeBrowse = !isSearchView && hasScopes && scope !== spotlight_1.SCOPE_ALL && scope !== spotlight_1.SCOPE_SCREENS;
+    const isListView = isSearchView || isScopeBrowse;
+    const browseGroups = (0, react_2.useMemo)(() => isScopeBrowse
+        ? (0, searchLayout_1.scopeGroups)({
+            scope,
+            actions,
+            extraResults,
+            actionsLabel: labels.actionsGroup,
+        })
+        : NO_SEARCH_GROUPS, [isScopeBrowse, scope, actions, extraResults, labels.actionsGroup]);
+    const limit = groupLimit !== null && groupLimit !== void 0 ? groupLimit : (isSpotlight ? SPOTLIGHT_GROUP_LIMIT : undefined);
+    const layout = (0, react_2.useMemo)(() => isScopeBrowse
+        ? (0, searchLayout_1.layoutSearch)({ answers: NO_RESULTS, groups: browseGroups, expanded })
+        : (0, searchLayout_1.layoutSearch)({
+            answers: answerResults,
+            topHit: scoped.topHit,
+            groups: scoped.groups,
+            limit,
+            expanded,
+        }), [isScopeBrowse, browseGroups, answerResults, scoped, limit, expanded]);
+    const scopeChips = (0, react_2.useMemo)(() => {
+        const counts = isSearchView && hasScopes
+            ? (0, searchLayout_1.countByScope)(modelGroups, matchedAnswers.length)
+            : undefined;
+        return scopeList.map((s) => {
+            var _a;
+            return ({
+                id: s.id,
+                label: s.label,
+                count: counts ? ((_a = counts.get(s.id)) !== null && _a !== void 0 ? _a : 0) : undefined,
+            });
+        });
+    }, [isSearchView, hasScopes, modelGroups, matchedAnswers, scopeList]);
+    const entries = layout.entries;
+    const active = Math.min(activeIndex, Math.max(entries.length - 1, 0));
     const appList = apps !== null && apps !== void 0 ? apps : NO_APPS;
     const showApps = appList.some((app) => app.id !== currentAppId) &&
         (appsVisibility === "always" || !isDesktop);
@@ -272,12 +409,9 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             : []),
         ...(showApps ? [{ id: "apps", label: labels.tabApps }] : []),
     ], [hasQuick, showApps, labels]);
-    const isTabbed = !isLg && !isSearchView && !isLoading && tabs.length > 1;
+    const isTabbed = !isLg && !isListView && !isLoading && tabs.length > 1;
     const activeTab = tabs.some((item) => item.id === tab) ? tab : "menu";
-    const countText = isSearchView && results.length > 0
-        ? labels.resultsCount(results.length)
-        : "";
-    const groupSizes = (0, react_2.useMemo)(() => groups.map((g) => g.items.length), [groups]);
+    const countText = isSearchView && layout.total > 0 ? labels.resultsCount(layout.total) : "";
     const link = (0, react_2.useMemo)(() => ({
         linkAs,
         onPlainClick: (event) => {
@@ -297,6 +431,38 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             onClose();
         onNavigate(item.href, { newTab });
     }, [onClose, onNavigate]);
+    const copyValue = (0, react_2.useCallback)(async (value, node) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            announce(labels.copied);
+        }
+        catch {
+            selectNode(node);
+            announce(labels.copySelected);
+        }
+    }, [announce, labels]);
+    const onCopied = (0, react_2.useCallback)(() => announce(labels.copied), [announce, labels]);
+    const onCopyBlocked = (0, react_2.useCallback)((node) => {
+        selectNode(node);
+        announce(labels.copySelected);
+    }, [announce, labels]);
+    const activate = (index, newTab) => {
+        var _a, _b;
+        const entry = entries[index];
+        if (!entry)
+            return;
+        if (entry.type === "more") {
+            setExpanded((prev) => new Set(prev).add(entry.groupId));
+            return;
+        }
+        const { item } = entry;
+        if (entry.type === "answer" && !item.run && !item.href) {
+            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);
+            return;
+        }
+        open(item, newTab);
+    };
     const focusField = (shouldSelect = false) => {
         var _a, _b;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -348,18 +514,18 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         (height > 0 && byDistance.length ? byDistance[0] : fallback).focus();
     };
     const onInputKeyDown = (event) => {
-        if (!isSearchView) {
+        if (!isListView) {
             if (event.key === "ArrowDown") {
                 event.preventDefault();
                 moveFocus("first");
             }
             return;
         }
-        if (results.length === 0 || event.nativeEvent.isComposing)
+        if (entries.length === 0 || event.nativeEvent.isComposing)
             return;
         if (event.key === "Enter") {
             event.preventDefault();
-            open(results[active], event.metaKey || event.ctrlKey);
+            activate(active, event.metaKey || event.ctrlKey);
             return;
         }
         const hasModifier = event.altKey || event.metaKey || event.ctrlKey || event.shiftKey;
@@ -380,7 +546,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         event.preventDefault();
         navigating.current = true;
         const pageRows = Math.max(3, Math.floor(scrollHeight(input) / ROW_HEIGHT) - 1);
-        setActiveIndex((0, resultNavigation_1.moveResult)(groupSizes, columns, active, event.key, pageRows));
+        setActiveIndex((0, resultNavigation_1.moveResult)(layout.sizes, columns, active, event.key, pageRows));
     };
     const moveInGrid = (event, cell) => {
         var _a, _b, _c, _d;
@@ -518,7 +684,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     (0, react_2.useEffect)(() => {
         var _a, _b, _c;
         (_c = (_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[data-active="true"]')) === null || _b === void 0 ? void 0 : _b.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(_b, { block: "nearest" });
-    }, [active, results]);
+    }, [active, entries]);
     const lastItemIndex = (0, react_2.useRef)(-1);
     (0, react_2.useEffect)(() => {
         if (!isOpen)
@@ -557,38 +723,82 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const listboxId = `${baseId}-results`;
     const optionId = (index) => `${baseId}-opt-${index}`;
     const togglePinFor = (id) => onTogglePin ? () => onTogglePin(id) : undefined;
-    const hasResults = results.length > 0;
+    const hasResults = entries.length > 0;
     const trimmed = query.trim();
     const pinnedColumns = !isLg && isDesktop ? 3 : PINNED_COLUMNS;
     const quickSections = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "6px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.pinned, meta: `(${pinnedItems.length})`, isRail: true }), pinnedItems.length === 0 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", color: colors.textMuted, px: "4px", children: labels.pinnedEmpty })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-nav-grid": true, "data-nav-columns": pinnedColumns, display: "grid", gridTemplateColumns: `repeat(${pinnedColumns}, minmax(0, 1fr))`, gap: "6px", children: pinnedItems.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.PinnedTile, { screen: screen, module: module, link: link, labels: labels, onTogglePin: togglePinFor(screen.id) }, screen.id))) }))] }), railFrequent.length ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "2px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.frequent, isRail: true, hasCount: false }), railFrequent.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.RailRow, { screen: screen, module: module, link: link, isStrong: true, pinId: onTogglePin ? screen.id : undefined, trailing: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onTogglePin ? ((0, jsx_runtime_1.jsx)(launcherParts_1.PinTextButton, { label: labels.pin(screen.label), text: labels.pinShort, onToggle: () => onTogglePin(screen.id) })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: screen.href, label: labels.openInNewTab(screen.label), tip: labels.newTabTip, linkAs: link.linkAs })] }) }, screen.id)))] })) : null, recentItems.length ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "2px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.recent, isRail: true, hasCount: false }), recentItems.map(({ screen, module }) => ((0, jsx_runtime_1.jsx)(launcherParts_1.RailRow, { screen: screen, module: module, link: link, trailing: (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: screen.href, label: labels.openInNewTab(screen.label), tip: labels.newTabTip, linkAs: link.linkAs }) }, screen.id)))] })) : null] }));
     const rail = ((0, jsx_runtime_1.jsxs)(Rail, { label: labels.quickAccess, scrolls: isLg, children: [quickSections, showApps ? renderApps(false) : null] }));
-    const browsePane = sections.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: labels.empty, titleAs: "h3", size: "sm" })) : (sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": section.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: section.label, meta: `(${section.modules.length})` }), (0, jsx_runtime_1.jsx)(ItemGrid, { columns: columns, children: section.modules.map((module) => {
+    const quickBlock = scope === spotlight_1.SCOPE_ALL && (quickActions === null || quickActions === void 0 ? void 0 : quickActions.length) ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", direction: "column", gap: "8px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: labels.quickActions, isDecorative: true, hasCount: false }), (0, jsx_runtime_1.jsx)(spotlightParts_1.QuickActionsRow, { items: quickActions, label: labels.quickActions, link: link, onRun: (item) => open(item, false) })] })) : null;
+    const sectionsPane = sections.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: labels.empty, titleAs: "h3", size: "sm" })) : (sections.map((section) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "section", "aria-label": section.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: section.label, meta: `(${section.modules.length})` }), (0, jsx_runtime_1.jsx)(ItemGrid, { columns: columns, children: section.modules.map((module) => {
                     const pinId = module.screens[0].id;
                     return ((0, jsx_runtime_1.jsx)(launcherParts_1.ModuleRow, { module: module, keyScreens: module.screens
                             .filter((s) => s.isKey && s.href !== module.href)
                             .slice(0, keyScreenLimit), isPinned: pinned.has(pinId), onTogglePin: togglePinFor(pinId), pinId: pinId, labels: labels, link: link }, module.id));
                 }) })] }, section.id))));
+    const browsePane = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [quickBlock, sectionsPane] }));
     const pickSuggestion = (value) => {
         var _a;
         setQuery(value);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    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: isSearching ? labels.searching : labels.noResults(trimmed) }), isSearching ? null : ((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 hasHint = !isSearching && !isScopeBrowse;
+    const emptyTitle = isSearching
+        ? labels.searching
+        : 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)
                             ? labels.suggestionsHint
-                            : labels.noResultsHint }))] }), !isSearching && (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] }));
-    const searchPane = hasResults ? ((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: groups.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "group", "aria-label": group.meta ? `${group.label}, ${group.meta}` : group.label, direction: "column", gap: "3px", children: [(0, jsx_runtime_1.jsx)(launcherParts_1.SectionHeader, { label: group.label, meta: group.meta ? `(${group.meta})` : undefined, isDecorative: true }), (0, jsx_runtime_1.jsx)(ItemGrid, { columns: columns, children: group.items.map((item, itemIndex) => {
-                        const index = groupStarts[groupIndex] + itemIndex;
-                        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) }, item.id));
-                    }) })] }, group.id))) })) : (noResults);
-    const stacked = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { scrolls: isLg, children: isSearchView ? searchPane : browsePane }), rail] }));
+                            : 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] }));
+    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) => ({
+        item,
+        isActive: index === active,
+        optionId: optionId(index),
+        link,
+        labels,
+        onOpen: () => activate(index, false),
+        onHover: () => setActiveIndex(index),
+        describedBy: describedBy(item, index),
+    });
+    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"));
+        }
+        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"));
+        }
+        const { group, more } = block;
+        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));
+                    }) }), 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) => {
+                var _a;
+                return entry.type !== "more" && ((_a = entry.item.facts) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsx)("span", { id: factsId(index), hidden: true, children: (0, spotlightParts_1.describeFacts)(entry.item.facts) }, entry.item.id)) : null;
+            })] })) : (noResults);
+    const showPreview = isLg &&
+        isListView &&
+        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 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;
+    const inlineScopes = isDesktop ? scopeBar : null;
+    const scopeRow = isDesktop ? null : scopeBar;
     const tabPanels = {
         menu: (0, jsx_runtime_1.jsx)(Pane, { children: browsePane }),
         quick: ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: "16px", px: "18px", pt: "14px", pb: "16px", children: quickSections })),
         apps: ((0, jsx_runtime_1.jsx)(react_1.Box, { px: "14px", pt: "10px", pb: "16px", children: renderApps(true) })),
     };
     const compactBody = ((0, jsx_runtime_1.jsx)(react_1.Flex, { "data-scroll-region": true, role: isTabbed ? "tabpanel" : undefined, id: isTabbed ? (0, LauncherTabs_1.panelId)(baseId) : undefined, "aria-labelledby": isTabbed ? (0, LauncherTabs_1.tabId)(baseId, activeTab) : undefined, direction: "column", flex: 1, minH: 0, overflowY: "auto", children: isTabbed ? tabPanels[activeTab] : body }));
-    return ((0, jsx_runtime_1.jsx)(launcherParts_1.TouchDensity, { value: !isLg, children: (0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: onClose, placement: "left", size: "full", initialFocusRef: inputRef, hideCloseButton: true, closeOnEsc: false, contentProps: {
+    return ((0, jsx_runtime_1.jsx)(launcherParts_1.TouchDensity, { value: !isLg, children: (0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: onClose, placement: "left", size: "full", initialFocusRef: inputRef, hideCloseButton: true, closeOnEsc: false, "aria-labelledby": titleId, contentProps: {
                 maxW: { base: "100vw", lg: `min(${maxWidth}, calc(100vw - 56px))` },
                 h: { base: "100%", lg: "auto" },
                 maxH: "100%",
@@ -598,5 +808,5 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 overflow: "hidden",
                 onKeyDown: onContentKeyDown,
                 ...{ "data-testid": testId },
-            }, children: [(0, jsx_runtime_1.jsx)(Drawer_1.DrawerHeader, { p: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { 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", children: labels.title }), (0, jsx_runtime_1.jsx)(SearchField, { inputRef: inputRef, value: query, onChange: setQuery, onKeyDown: onInputKeyDown, labels: labels, hint: searchHint, listboxId: listboxId, activeId: isSearchView && hasResults ? optionId(active) : undefined, isExpanded: isSearchView, hasResults: hasResults }), (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 })] }) }), (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 }), 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)] }) }), (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: "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 })] })] }) }));
 }