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

package/dist/Components/NavLauncher/NavLauncher.js

@@ -43,11 +43,11 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
-const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
-const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AppMark_1 = require("../AppSwitcher/AppMark");
 const Drawer_1 = __importStar(require("../Drawer/Drawer"));
@@ -58,11 +58,14 @@ const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const launcherParts_1 = require("./launcherParts");
+const LauncherTabs_1 = require("./LauncherTabs");
 const match_1 = require("./match");
 const NewTabLink_1 = __importDefault(require("./NewTabLink"));
 const PinToggle_1 = __importDefault(require("./PinToggle"));
+const resultNavigation_1 = require("./resultNavigation");
 const NO_APPS = [];
 const MD_QUERY = "(min-width: 48em)";
+const LG_QUERY = "(min-width: 62em)";
 const XL_QUERY = "(min-width: 80em)";
 const CELL_SELECTOR = "[data-nav-cell]";
 const RAIL_WIDTH = "clamp(20rem, 30%, 26rem)";
@@ -70,6 +73,19 @@ const PINNED_COLUMNS = 2;
 const ENTER_CHIP_WIDTH = 50;
 const ARROW_KEYS = ["↑", "↓", "←", "→"];
 const ENTER_KEY = (0, AppSwitcherProps_1.shortcutKeys)("enter")[0];
+const MOD_KEY = (0, AppSwitcherProps_1.shortcutKeys)("mod+enter")[0];
+const RESULT_KEYS = [
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+];
+const TEXT_TARGET = "input, textarea, select, [contenteditable=true]";
+const ROW_HEIGHT = 46;
 const DEFAULT_LABELS = {
     title: "Menu",
     searchPlaceholder: "Search menus and screens",
@@ -95,6 +111,13 @@ const DEFAULT_LABELS = {
     hintPin: "pin",
     hintClose: "close",
     hintOpenMenu: "open",
+    hintClickNewTab: "+ click for new tab",
+    newTabTip: "Open in new tab",
+    resultsCount: (count) => `${count} ${count === 1 ? "result" : "results"}`,
+    tabsLabel: "Menu sections",
+    tabMenu: "Menu",
+    tabQuickAccess: "Quick access",
+    tabApps: "Apps",
     apps: "Your apps",
     found: (count) => `${count} found`,
     pinTip: "Pin to quick access",
@@ -131,19 +154,19 @@ const GRID_COLUMNS = {
 function ItemGrid({ children, columns, }) {
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-nav-grid": true, "data-nav-columns": columns, display: "grid", gridTemplateColumns: GRID_COLUMNS, gap: "1px 8px", alignItems: "start", children: children }));
 }
-function Pane({ children }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: "14px", flex: 1, minW: 0, px: "18px", pt: "12px", pb: "16px", overflowY: { base: "visible", lg: "auto" }, children: children }));
+function Pane({ children, scrolls = false, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { "data-scroll-region": scrolls || undefined, direction: "column", gap: "14px", flex: 1, minW: 0, px: "18px", pt: "12px", pb: "16px", overflowY: { base: "visible", lg: "auto" }, children: children }));
 }
-function Rail({ label, children }) {
+function Rail({ label, children, scrolls = false, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { 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: colors.boxborder[200], overflowY: { base: "visible", lg: "auto" }, 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))) })] }));
 }
 function SearchField({ inputRef, value, onChange, onKeyDown, labels, hint, listboxId, activeId, isExpanded, hasResults, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { flex: 1, maxW: "520px", h: "38px", align: "center", gap: "10px", pl: "12px", pr: "8px", borderRadius: "10px", 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: 16, 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: "34px", border: 0, outline: "none", bg: "transparent", fontSize: "14.5px", 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: 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: () => {
                     var _a;
                     onChange("");
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -151,6 +174,7 @@ function SearchField({ inputRef, value, onChange, onKeyDown, labels, hint, listb
 }
 function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, canPin, onPin, onOpen, onHover, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isTouch = (0, launcherParts_1.useTouchDensity)();
     const isScreen = item.kind === "screen";
     const hasStar = Boolean(item.screenId) && canPin;
     const base = item.badge ? 24 : 0;
@@ -161,7 +185,7 @@ 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: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", transition: (0, motion_1.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: "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: () => {
                         if (!item.href)
@@ -170,20 +194,23 @@ function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, ca
                                     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), 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: 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, openShortcutHint, modKeyLabel, 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", "data-testid": testId, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { colors } = theme;
     const inputRef = (0, react_2.useRef)(null);
     const bodyRef = (0, react_2.useRef)(null);
     const baseId = (0, react_2.useId)();
     const isDesktop = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const isLg = (0, useMatchMedia_1.useMatchMedia)(LG_QUERY, true);
     const isWide = (0, useMatchMedia_1.useMatchMedia)(XL_QUERY, false);
     const columns = isWide ? 3 : isDesktop ? 2 : 1;
     const [innerQuery, setInnerQuery] = (0, react_2.useState)("");
     const [activeIndex, setActiveIndex] = (0, react_2.useState)(0);
+    const [tab, setTab] = (0, react_2.useState)("menu");
+    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;
@@ -195,10 +222,16 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const latest = (0, react_2.useRef)({ query, setQuery });
     latest.current = { query, setQuery };
     (0, react_2.useEffect)(() => {
-        if (!isOpen && latest.current.query !== "")
+        if (isOpen)
+            return;
+        setTab("menu");
+        if (latest.current.query !== "")
             latest.current.setQuery("");
     }, [isOpen]);
-    (0, react_2.useEffect)(() => setActiveIndex(0), [query]);
+    (0, react_2.useEffect)(() => {
+        navigating.current = false;
+        setActiveIndex(0);
+    }, [query]);
     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]);
@@ -225,6 +258,26 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     const groupStarts = (0, react_2.useMemo)(() => groups.map((_, i) => groups.slice(0, i).reduce((n, g) => n + g.items.length, 0)), [groups]);
     const isSearchView = query.trim().length > 0;
     const active = Math.min(activeIndex, Math.max(results.length - 1, 0));
+    const appList = apps !== null && apps !== void 0 ? apps : NO_APPS;
+    const showApps = appList.some((app) => app.id !== currentAppId) &&
+        (appsVisibility === "always" || !isDesktop);
+    const railFrequent = frequentItems
+        .filter(({ screen }) => !pinned.has(screen.id))
+        .slice(0, frequentLimit);
+    const hasQuick = pinnedItems.length > 0 || railFrequent.length > 0 || recentItems.length > 0;
+    const tabs = (0, react_2.useMemo)(() => [
+        { id: "menu", label: labels.tabMenu },
+        ...(hasQuick
+            ? [{ id: "quick", label: labels.tabQuickAccess }]
+            : []),
+        ...(showApps ? [{ id: "apps", label: labels.tabApps }] : []),
+    ], [hasQuick, showApps, labels]);
+    const isTabbed = !isLg && !isSearchView && !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 link = (0, react_2.useMemo)(() => ({
         linkAs,
         onPlainClick: (event) => {
@@ -244,14 +297,31 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             onClose();
         onNavigate(item.href, { newTab });
     }, [onClose, onNavigate]);
+    const focusField = (shouldSelect = false) => {
+        var _a, _b;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        if (shouldSelect)
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+    };
+    const scrollHeight = (from) => {
+        var _a, _b, _c, _d, _e;
+        return (_e = (_b = (_a = from === null || from === void 0 ? void 0 : from.closest("[data-scroll-region]")) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : (_d = (_c = bodyRef.current) === null || _c === void 0 ? void 0 : _c.querySelector("[data-scroll-region]")) === null || _d === void 0 ? void 0 : _d.clientHeight) !== null && _e !== void 0 ? _e : 0;
+    };
+    const leaveTop = () => {
+        var _a;
+        const selected = isTabbed
+            ? document.getElementById((0, LauncherTabs_1.tabId)(baseId, activeTab))
+            : null;
+        (_a = (selected !== null && selected !== void 0 ? selected : inputRef.current)) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     const moveFocus = (delta) => {
-        var _a, _b, _c;
+        var _a, _b;
         const items = Array.from((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(launcherParts_1.ITEM_SELECTOR)) !== null && _b !== void 0 ? _b : []);
         if (items.length === 0)
             return;
         const current = items.indexOf(document.activeElement);
         if (typeof delta === "number" && current + delta < 0) {
-            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            leaveTop();
             return;
         }
         const next = delta === "first"
@@ -261,6 +331,22 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 : Math.min(items.length - 1, current + delta);
         items[next].focus();
     };
+    const pageFocus = (direction) => {
+        var _a, _b;
+        const items = Array.from((_b = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(launcherParts_1.ITEM_SELECTOR)) !== null && _b !== void 0 ? _b : []);
+        const from = document.activeElement;
+        const current = items.indexOf(from);
+        if (items.length === 0 || current < 0)
+            return;
+        const height = scrollHeight(from);
+        const goal = from.getBoundingClientRect().top + direction * height * 0.85;
+        const byDistance = items
+            .filter((_, i) => (direction > 0 ? i > current : i < current))
+            .sort((a, b) => Math.abs(a.getBoundingClientRect().top - goal) -
+            Math.abs(b.getBoundingClientRect().top - goal));
+        const fallback = items[Math.min(items.length - 1, Math.max(0, current + direction * 3))];
+        (height > 0 && byDistance.length ? byDistance[0] : fallback).focus();
+    };
     const onInputKeyDown = (event) => {
         if (!isSearchView) {
             if (event.key === "ArrowDown") {
@@ -269,20 +355,32 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             }
             return;
         }
-        if (results.length === 0)
+        if (results.length === 0 || event.nativeEvent.isComposing)
             return;
-        if (event.key === "ArrowDown") {
-            event.preventDefault();
-            setActiveIndex((active + 1) % results.length);
-        }
-        else if (event.key === "ArrowUp") {
-            event.preventDefault();
-            setActiveIndex((active - 1 + results.length) % results.length);
-        }
-        else if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+        if (event.key === "Enter") {
             event.preventDefault();
             open(results[active], event.metaKey || event.ctrlKey);
+            return;
+        }
+        const hasModifier = event.altKey || event.metaKey || event.ctrlKey || event.shiftKey;
+        if (!RESULT_KEYS.includes(event.key) || hasModifier)
+            return;
+        const input = event.currentTarget;
+        const atEnd = input.selectionStart === input.value.length &&
+            input.selectionEnd === input.value.length;
+        const isSideways = event.key === "ArrowLeft" || event.key === "ArrowRight";
+        const isEdit = isSideways || event.key === "Home" || event.key === "End";
+        if (isEdit && !navigating.current) {
+            const entersGrid = event.key === "ArrowRight" && atEnd && columns > 1;
+            if (!entersGrid)
+                return;
         }
+        if (isSideways && columns === 1)
+            return;
+        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));
     };
     const moveInGrid = (event, cell) => {
         var _a, _b, _c, _d;
@@ -334,27 +432,39 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         return true;
     };
     const onBodyKeyDown = (event) => {
-        var _a, _b;
-        if (event.target === inputRef.current)
+        var _a;
+        const target = event.target;
+        if (target.closest(TEXT_TARGET))
             return;
+        const inBody = Boolean((_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
         const isArrow = event.key.startsWith("Arrow");
-        const cell = event.target.closest(CELL_SELECTOR);
-        if (isArrow && cell && !event.altKey && !event.metaKey && !event.ctrlKey) {
+        const cell = target.closest(CELL_SELECTOR);
+        if (inBody &&
+            isArrow &&
+            cell &&
+            !event.altKey &&
+            !event.metaKey &&
+            !event.ctrlKey) {
             event.preventDefault();
             moveInGrid(event, cell);
         }
-        else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        else if (inBody &&
+            (event.key === "ArrowDown" || event.key === "ArrowUp")) {
             event.preventDefault();
             moveFocus(event.key === "ArrowDown" ? 1 : -1);
         }
-        else if (event.key === "Home" || event.key === "End") {
+        else if (inBody && (event.key === "Home" || event.key === "End")) {
             event.preventDefault();
             moveFocus(event.key === "Home" ? "first" : "last");
         }
+        else if (inBody && (event.key === "PageDown" || event.key === "PageUp")) {
+            event.preventDefault();
+            pageFocus(event.key === "PageDown" ? 1 : -1);
+        }
         else if (event.key === "Backspace" && query) {
             event.preventDefault();
             setQuery(query.slice(0, -1));
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            focusField();
         }
         else if (event.key.length === 1 &&
             !event.metaKey &&
@@ -365,9 +475,46 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 return;
             event.preventDefault();
             setQuery(query + event.key);
-            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            focusField();
         }
     };
+    const onContentKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.stopPropagation();
+            if (event.nativeEvent.isComposing)
+                return;
+            event.preventDefault();
+            if (query) {
+                setQuery("");
+                focusField();
+            }
+            else {
+                onClose();
+            }
+            return;
+        }
+        const hasMod = event.metaKey || event.ctrlKey;
+        if (hasMod &&
+            !event.altKey &&
+            !event.shiftKey &&
+            event.key.toLowerCase() === "k") {
+            event.preventDefault();
+            focusField(true);
+            return;
+        }
+        const target = event.target;
+        if (target === inputRef.current)
+            return;
+        if (event.key === "/" &&
+            !hasMod &&
+            !event.altKey &&
+            !target.closest(TEXT_TARGET)) {
+            event.preventDefault();
+            focusField(true);
+            return;
+        }
+        onBodyKeyDown(event);
+    };
     (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" });
@@ -391,7 +538,6 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             document.removeEventListener("pointerdown", forget);
         };
     }, [isOpen]);
-    const appList = apps !== null && apps !== void 0 ? apps : NO_APPS;
     (0, react_2.useEffect)(() => {
         var _a, _b;
         if (lastItemIndex.current < 0 || document.activeElement !== document.body)
@@ -402,23 +548,20 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         items[Math.min(lastItemIndex.current, items.length - 1)].focus();
     }, [appList]);
     const hues = (0, react_2.useMemo)(() => (0, AppMark_1.assignAppHues)(appList, (0, chartColorsFromTheme_1.chartMode)(colors)), [appList, colors]);
-    const showApps = appList.some((app) => app.id !== currentAppId) &&
-        (appsVisibility === "always" || !isDesktop);
     const handleAppSelect = (app, event) => {
         onAppSelect === null || onAppSelect === void 0 ? void 0 : onAppSelect(app, event);
         if (!event.defaultPrevented)
             onClose();
     };
-    const appsBlock = showApps ? ((0, jsx_runtime_1.jsx)(launcherParts_1.AppsSection, { apps: appList, hues: hues, currentAppId: currentAppId, heading: labels.apps, onSelect: handleAppSelect })) : null;
+    const renderApps = (hideHeading) => ((0, jsx_runtime_1.jsx)(launcherParts_1.AppsSection, { apps: appList, hues: hues, currentAppId: currentAppId, heading: labels.apps, hideHeading: hideHeading, onSelect: handleAppSelect }));
     const listboxId = `${baseId}-results`;
     const optionId = (index) => `${baseId}-opt-${index}`;
     const togglePinFor = (id) => onTogglePin ? () => onTogglePin(id) : undefined;
     const hasResults = results.length > 0;
     const trimmed = query.trim();
-    const railFrequent = frequentItems
-        .filter(({ screen }) => !pinned.has(screen.id))
-        .slice(0, frequentLimit);
-    const rail = ((0, jsx_runtime_1.jsxs)(Rail, { label: labels.quickAccess, 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": PINNED_COLUMNS, display: "grid", gridTemplateColumns: `repeat(${PINNED_COLUMNS}, 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), 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), linkAs: link.linkAs }) }, screen.id)))] })) : null, appsBlock] }));
+    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 pinId = module.screens[0].id;
                     return ((0, jsx_runtime_1.jsx)(launcherParts_1.ModuleRow, { module: module, keyScreens: module.screens
@@ -432,21 +575,28 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     };
     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)
                             ? 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_1.transitionFor)(["background-color"]), _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: suggestion }, suggestion))) })) : null] }));
+                            : 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 body = isLoading ? ((0, jsx_runtime_1.jsx)(SkeletonLayout, { label: labels.loading })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Pane, { children: isSearchView ? searchPane : browsePane }), rail] }));
-    const pill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
-    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: onClose, placement: "left", size: "full", initialFocusRef: inputRef, hideCloseButton: true, contentProps: {
-            maxW: { base: "100vw", lg: `min(${maxWidth}, calc(100vw - 56px))` },
-            h: { base: "100%", lg: "auto" },
-            maxH: "100%",
-            bg: colors.surfaceRaised,
-            borderBottomRightRadius: { base: 0, lg: "16px" },
-            boxShadow: colors.boxShadow.default,
-            overflow: "hidden",
-            ...{ "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: "12px", h: "60px", pl: "18px", pr: "12px", children: [(0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h2", display: "inline-flex", alignItems: "center", gap: "7px", h: "32px", pl: "9px", pr: "11px", borderRadius: "9px", bg: pill.fill, color: pill.color, fontSize: "13px", fontWeight: 600, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Compass, { size: 16, strokeWidth: 2, "aria-hidden": true }), 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.IconButton, { "aria-label": labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18, "aria-hidden": true }), variant: "ghost", boxSize: "34px", minW: "34px", borderRadius: "9px", color: colors.textMuted, ml: "auto", onClick: onClose })] }) }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { p: 0, display: "flex", flexDirection: { base: "column", lg: "row" }, overflowY: { base: "auto", lg: "hidden" }, minH: 0, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { ref: bodyRef, onKeyDown: onBodyKeyDown, direction: { base: "column", lg: "row" }, flex: 1, minH: 0, minW: 0, children: body }) }), (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: [openShortcutHint ? ((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: openShortcutHint }), labels.hintOpenMenu] })) : null, (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] }), 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 })] })] }));
+    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] }));
+    const body = isLoading ? (0, jsx_runtime_1.jsx)(SkeletonLayout, { label: labels.loading }) : stacked;
+    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: {
+                maxW: { base: "100vw", lg: `min(${maxWidth}, calc(100vw - 56px))` },
+                h: { base: "100%", lg: "auto" },
+                maxH: "100%",
+                bg: colors.surfaceRaised,
+                borderBottomRightRadius: { base: 0, lg: "16px" },
+                boxShadow: colors.boxShadow.default,
+                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 })] })] }) }));
 }

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

@@ -1,4 +1,4 @@
-import type { ElementType, KeyboardEvent, MouseEvent } from "react";
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
 import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
 /** Rendered as `<Icon size={16} aria-hidden />`, so any lucide-compatible component works. */
 export type LauncherIcon = ElementType;
@@ -54,6 +54,7 @@ export type LauncherResultGroup = {
 };
 /** Every visible string and accessible name; pass any subset, the rest fall back to English. */
 export type LauncherLabels = {
+    /** Accessible name of the dialog and the results list; no longer drawn as a header pill. */
     title: string;
     searchPlaceholder: string;
     clearSearch: string;
@@ -84,8 +85,22 @@ export type LauncherLabels = {
     hintPin: string;
     /** Footer hint after the ESC key cap. */
     hintClose: string;
-    /** Footer hint after `openShortcutHint`; only rendered when that prop is set. */
+    /** @deprecated No longer rendered: the launcher is already open, so the open chord is not shown. */
     hintOpenMenu: string;
+    /** Footer hint after the mod key cap for a modified click, e.g. "+ click for new tab". */
+    hintClickNewTab: string;
+    /** Tooltip of the arrow link beside a row. */
+    newTabTip: string;
+    /** Muted count beside the search field and its polite announcement, e.g. "12 results". */
+    resultsCount: (count: number) => string;
+    /** Name of the Menu / Quick access / Apps tab list shown below `lg`. */
+    tabsLabel: string;
+    /** Tab showing every module (below `lg`). */
+    tabMenu: string;
+    /** Tab showing Pinned, Frequently visited and Recent (below `lg`). */
+    tabQuickAccess: string;
+    /** Tab showing the suite's apps (below `lg`). */
+    tabApps: string;
     /** Heading and list name of the apps section. */
     apps: string;
     /** Per-section count shown while searching, e.g. "3 found". */
@@ -146,10 +161,12 @@ export interface NavLauncherProps {
     suggestions?: readonly string[];
     /** Key cap shown at the end of the search field, e.g. "/" when the app opens the launcher with it. */
     searchHint?: string;
-    /** Chord that opens the launcher in the host app, e.g. "⌘K or /"; shown as the first footer hint. Omit when the app does not own one. */
+    /** @deprecated No longer rendered: the launcher is already open. Cmd/Ctrl+K and "/" now focus the search field while it is open. */
     openShortcutHint?: string;
     /** Replaces the modifier cap of the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
     modKeyLabel?: string;
+    /** Rendered between the search field and the close button, e.g. a help or customise icon button; use icon-only buttons so the dialog name stays "Menu". */
+    headerActions?: ReactNode;
     /** Panel width at `lg`+; always full width below `lg`. Defaults to "1080px". */
     maxWidth?: string;
     labels?: Partial<LauncherLabels>;
@@ -179,8 +196,10 @@ export interface PinToggleProps {
 /** Props for the small "open in new tab" anchor beside a launcher row. */
 export interface NewTabLinkProps {
     href: string;
-    /** Accessible name and tooltip, e.g. "Open Leave in a new tab". */
+    /** Accessible name, e.g. "Open Leave in a new tab". */
     label: string;
+    /** Visible tooltip text; defaults to `label`. */
+    tip?: string;
     /** Anchor-like component receiving `href`, `target`, `rel`; defaults to `"a"`. */
     linkAs?: ElementType;
     tabIndex?: number;

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

@@ -1,3 +1,3 @@
 import type { NewTabLinkProps } from "./NavLauncherProps";
-/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
-export default function NewTabLink({ href, label, linkAs, tabIndex }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+export default function NewTabLink({ href, label, tip, linkAs, tabIndex, }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/NewTabLink.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NewTabLink;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,9 +9,10 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const revealStyles_1 = require("./revealStyles");
-/** "Open in a new tab" anchor; visible on row hover, focus-within or its own focus only. */
-function NewTabLink({ href, label, linkAs = "a", tabIndex }) {
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+function NewTabLink({ href, label, tip, linkAs = "a", tabIndex, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, title: label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tip !== null && tip !== void 0 ? tip : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }) }));
 }

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

@@ -3,6 +3,8 @@ import type { PaletteProps } from "../../Theme/tokens/types";
 import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
 import type { LauncherLabels, LauncherModule, LauncherScreen } from "./NavLauncherProps";
 export declare const ITEM_SELECTOR = "[data-launcher-item]";
+export declare const TouchDensity: import("react").Provider<boolean>;
+export declare const useTouchDensity: () => boolean;
 export declare const isPlainClick: (event: MouseEvent) => boolean;
 export type LinkCtx = {
     linkAs: ElementType;
@@ -146,7 +148,8 @@ type AppsSectionProps = {
     hues: readonly string[];
     currentAppId?: string;
     heading: string;
+    hideHeading?: boolean;
     onSelect: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
 };
-export declare function AppsSection({ apps, hues, currentAppId, heading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppsSection({ apps, hues, currentAppId, heading, hideHeading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};