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

package/dist/Components/NavLauncher/NavLauncher.js

@@ -52,7 +52,10 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AppMark_1 = require("../AppSwitcher/AppMark");
 const Drawer_1 = __importStar(require("../Drawer/Drawer"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
-const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
+const Kbd_1 = __importStar(require("../Kbd/Kbd"));
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+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 match_1 = require("./match");
@@ -62,6 +65,11 @@ const NO_APPS = [];
 const MD_QUERY = "(min-width: 48em)";
 const XL_QUERY = "(min-width: 80em)";
 const CELL_SELECTOR = "[data-nav-cell]";
+const RAIL_WIDTH = "clamp(20rem, 30%, 26rem)";
+const PINNED_COLUMNS = 2;
+const ENTER_CHIP_WIDTH = 50;
+const ARROW_KEYS = ["↑", "↓", "←", "→"];
+const ENTER_KEY = (0, AppSwitcherProps_1.shortcutKeys)("enter")[0];
 const DEFAULT_LABELS = {
     title: "Menu",
     searchPlaceholder: "Search menus and screens",
@@ -98,8 +106,6 @@ const DEFAULT_LABELS = {
     footerNote: "Pins follow your account",
     suggestionsHint: "Try one of these",
 };
-const isApplePlatform = () => typeof navigator !== "undefined" &&
-    /Mac|iPhone|iPad/.test(navigator.platform);
 const visibleSections = (sections) => sections
     .map((section) => ({
     ...section,
@@ -122,15 +128,15 @@ const GRID_COLUMNS = {
     md: "repeat(2, minmax(0, 1fr))",
     xl: "repeat(3, minmax(0, 1fr))",
 };
-function ItemGrid({ children }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-nav-grid": true, display: "grid", gridTemplateColumns: GRID_COLUMNS, gap: "1px 8px", alignItems: "start", children: children }));
+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 Rail({ label, children }) {
     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: "300px" }, 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, { 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))) })] }));
@@ -149,13 +155,25 @@ function SearchRow({ item, query, isActive, link, labels, optionId, isPinned, ca
     const hasStar = Boolean(item.screenId) && canPin;
     const base = item.badge ? 24 : 0;
     const open = base + (hasStar ? 46 : item.href ? 24 : 0);
-    return ((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", bg: isActive ? colors.primary[50] : "transparent", boxShadow: isActive ? (0, focusRing_styles_1.focusRingShadow)(colors) : "none", transition: (0, motion_1.transitionFor)(["background-color"]), onMouseMove: onHover, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, title: isScreen ? `${item.label} — ${item.context}` : item.label, 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", pr: `${isActive ? open + 26 : base}px`, _groupHover: { pr: `${isActive ? open + 26 : open}px` }, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { 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, { 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: [(0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), isActive ? (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: "\u21B5" }) : null, 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] }));
+    const fullLabel = isScreen ? `${item.label} — ${item.context}` : item.label;
+    const title = (0, useIsTruncated_1.useIsTruncated)(fullLabel);
+    const context = (0, useIsTruncated_1.useIsTruncated)(item.context);
+    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
+                ? { ...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)
+                            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: {
+                                    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] }) }));
 }
 /** 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 = "1180px", 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, openShortcutHint, modKeyLabel, 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);
@@ -206,6 +224,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     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]);
     const isSearchView = query.trim().length > 0;
+    const active = Math.min(activeIndex, Math.max(results.length - 1, 0));
     const link = (0, react_2.useMemo)(() => ({
         linkAs,
         onPlainClick: (event) => {
@@ -226,16 +245,20 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         onNavigate(item.href, { newTab });
     }, [onClose, onNavigate]);
     const moveFocus = (delta) => {
-        var _a, _b;
+        var _a, _b, _c;
         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();
+            return;
+        }
         const next = delta === "first"
             ? 0
             : delta === "last"
                 ? items.length - 1
-                : Math.min(items.length - 1, Math.max(0, current + delta));
+                : Math.min(items.length - 1, current + delta);
         items[next].focus();
     };
     const onInputKeyDown = (event) => {
@@ -250,15 +273,15 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             return;
         if (event.key === "ArrowDown") {
             event.preventDefault();
-            setActiveIndex((i) => (i + 1) % results.length);
+            setActiveIndex((active + 1) % results.length);
         }
         else if (event.key === "ArrowUp") {
             event.preventDefault();
-            setActiveIndex((i) => (i - 1 + results.length) % results.length);
+            setActiveIndex((active - 1 + results.length) % results.length);
         }
-        else if (event.key === "Enter") {
+        else if (event.key === "Enter" && !event.nativeEvent.isComposing) {
             event.preventDefault();
-            open(results[activeIndex], event.metaKey || event.ctrlKey);
+            open(results[active], event.metaKey || event.ctrlKey);
         }
     };
     const moveInGrid = (event, cell) => {
@@ -272,6 +295,7 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             return;
         }
         const down = event.key === "ArrowDown";
+        const columns = Number(grid === null || grid === void 0 ? void 0 : grid.dataset.navColumns);
         const within = cells[index + (down ? columns : -columns)];
         if (within)
             return focusCell(within);
@@ -310,8 +334,8 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
         return true;
     };
     const onBodyKeyDown = (event) => {
-        var _a;
-        if (isSearchView || event.target === inputRef.current)
+        var _a, _b;
+        if (event.target === inputRef.current)
             return;
         const isArrow = event.key.startsWith("Arrow");
         const cell = event.target.closest(CELL_SELECTOR);
@@ -327,6 +351,11 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             event.preventDefault();
             moveFocus(event.key === "Home" ? "first" : "last");
         }
+        else if (event.key === "Backspace" && query) {
+            event.preventDefault();
+            setQuery(query.slice(0, -1));
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         else if (event.key.length === 1 &&
             !event.metaKey &&
             !event.ctrlKey &&
@@ -336,14 +365,42 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
                 return;
             event.preventDefault();
             setQuery(query + event.key);
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     };
     (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" });
-    }, [activeIndex, results]);
+    }, [active, results]);
+    const lastItemIndex = (0, react_2.useRef)(-1);
+    (0, react_2.useEffect)(() => {
+        if (!isOpen)
+            return undefined;
+        const remember = (event) => {
+            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 : []);
+            lastItemIndex.current = items.indexOf(event.target);
+        };
+        const forget = () => {
+            lastItemIndex.current = -1;
+        };
+        document.addEventListener("focusin", remember);
+        document.addEventListener("pointerdown", forget);
+        return () => {
+            document.removeEventListener("focusin", remember);
+            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)
+            return;
+        const items = (_a = bodyRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(launcherParts_1.ITEM_SELECTOR);
+        if (!(items === null || items === void 0 ? void 0 : items.length))
+            return (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        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);
@@ -361,8 +418,8 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
     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, { display: "grid", gridTemplateColumns: "repeat(2, 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 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, { children: section.modules.map((module) => {
+    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 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
                             .filter((s) => s.isKey && s.href !== module.href)
@@ -376,9 +433,9 @@ 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] }));
-    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, { children: group.items.map((item, itemIndex) => {
+    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 === activeIndex, 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));
+                        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);
@@ -391,5 +448,5 @@ function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, freque
             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(activeIndex) : 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, 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)(Kbd_1.default, { size: "xs", children: "\u2191\u2193\u2190\u2192" }), labels.hintMove] }), (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: "\u21B5" }), labels.hintOpen] }), (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 : (isApplePlatform() ? "⌘" : "Ctrl")}↵` }), 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.default, { size: "xs", children: "esc" }), labels.hintClose] })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ml: "auto", children: labels.footerNote })] })] }));
+        }, 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 })] })] }));
 }

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

@@ -74,15 +74,15 @@ export type LauncherLabels = {
     loading: string;
     /** Heading of the empty state shown when `sections` has nothing to render. */
     empty: string;
-    /** Footer hint after the ↑↓←→ key cap. */
+    /** Footer hint after the four arrow key caps. */
     hintMove: string;
-    /** Footer hint after the ↵ key cap. */
+    /** Footer hint after the ENTER key cap. */
     hintOpen: string;
-    /** Footer hint after the mod+↵ key cap. */
+    /** Footer hint after the mod + ENTER key caps. */
     hintNewTab: string;
     /** Footer hint after the P key cap. */
     hintPin: string;
-    /** Footer hint after the esc key cap. */
+    /** Footer hint after the ESC key cap. */
     hintClose: string;
     /** Footer hint after `openShortcutHint`; only rendered when that prop is set. */
     hintOpenMenu: string;
@@ -148,9 +148,9 @@ export interface NavLauncherProps {
     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. */
     openShortcutHint?: string;
-    /** Printed on the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
+    /** Replaces the modifier cap of the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
     modKeyLabel?: string;
-    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1180px". */
+    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1080px". */
     maxWidth?: string;
     labels?: Partial<LauncherLabels>;
     /** Other Pixelize apps, shown as an "Apps" section at the bottom of the right rail. Same shape as AppSwitcher. */

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

@@ -1,4 +1,5 @@
-import { type ElementType, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import { type ElementType, type FocusEvent, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+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]";
@@ -7,6 +8,64 @@ export type LinkCtx = {
     linkAs: ElementType;
     onPlainClick: (event: MouseEvent) => void;
 };
+export declare const WIDE_ROW = "@container launcher-row (min-width: 300px)";
+export declare const ROW_CONTAINER: {
+    containerType: string;
+    containerName: string;
+};
+export declare const activeRowStyle: (colors: PaletteProps) => {
+    edge: string;
+    fill: string;
+};
+export declare const activeRowSurface: (colors: PaletteProps) => {
+    backgroundColor: string;
+    boxShadow: string;
+    outline: string;
+    outlineOffset: string;
+};
+export declare const titleInset: (base: number, open: number, chip?: number) => {
+    "@container launcher-row (max-width: 219px)": {
+        "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    };
+    "@container launcher-row (min-width: 300px)"?: {
+        "[data-group][data-reveal=true] &": {
+            "--row-pr": string;
+        };
+    } | undefined;
+    paddingRight: string;
+    "--row-pr": string;
+    "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &": {
+        "--row-pr": string;
+    };
+};
+export declare const useRowFocus: (isBordered?: boolean) => {
+    sx: {
+        "&[data-row-focus]": {
+            backgroundColor: string;
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    primary: {
+        onFocus: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+        onBlur: (event: FocusEvent<HTMLElement>) => boolean | undefined;
+    };
+};
+export declare const stretchedLink: (radius: string) => {
+    outline: string;
+    _after: {
+        content: string;
+        position: string;
+        inset: number;
+        borderRadius: string;
+    };
+};
 export declare const useRowHover: () => {
     bg: string;
     _hover: {

package/dist/Components/NavLauncher/launcherParts.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRowHover = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
+exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
 exports.CountBadge = CountBadge;
 exports.NewTag = NewTag;
 exports.SectionHeader = SectionHeader;
@@ -22,9 +22,11 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const OverflowToolTip_1 = __importDefault(require("../ToolTip/OverflowToolTip"));
 const AppMark_1 = __importDefault(require("../AppSwitcher/AppMark"));
 const match_1 = require("./match");
 const NewTabLink_1 = __importDefault(require("./NewTabLink"));
@@ -37,6 +39,71 @@ const isPlainClick = (event) => event.button === 0 &&
     !event.shiftKey &&
     !event.altKey;
 exports.isPlainClick = isPlainClick;
+const ROW_FOCUS = "data-row-focus";
+const ROW_PR = "--row-pr";
+const REVEALED = "[data-group]:hover &, [data-group]:focus-within &, [data-group][data-reveal=true] &";
+const NARROW_ROW = "@container launcher-row (max-width: 219px)";
+exports.WIDE_ROW = "@container launcher-row (min-width: 300px)";
+exports.ROW_CONTAINER = {
+    containerType: "inline-size",
+    containerName: "launcher-row",
+};
+const activeRowStyle = (colors) => {
+    const fill = (0, rowStates_1.listRowBackgrounds)(colors).active;
+    const edge = (0, outlineRung_1.liftToContrast)((0, outlineRung_1.liftToContrast)(colors.primary[500], fill, outlineRung_1.AA_NON_TEXT), colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
+    return { edge, fill };
+};
+exports.activeRowStyle = activeRowStyle;
+const activeRowSurface = (colors) => {
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    return {
+        backgroundColor: fill,
+        boxShadow: `inset 0 0 0 1px ${edge}`,
+        outline: "2px solid transparent",
+        outlineOffset: "-2px",
+    };
+};
+exports.activeRowSurface = activeRowSurface;
+const titleInset = (base, open, chip = 0) => ({
+    paddingRight: `var(${ROW_PR})`,
+    [ROW_PR]: `${base}px`,
+    [REVEALED]: { [ROW_PR]: `${open}px` },
+    ...(chip
+        ? {
+            [exports.WIDE_ROW]: {
+                "[data-group][data-reveal=true] &": { [ROW_PR]: `${open + chip}px` },
+            },
+        }
+        : {}),
+    [NARROW_ROW]: { [REVEALED]: { [ROW_PR]: `${base}px` } },
+});
+exports.titleInset = titleInset;
+const markRowFocus = (event, isOn) => { var _a; return (_a = event.currentTarget.closest("[data-group]")) === null || _a === void 0 ? void 0 : _a.toggleAttribute(ROW_FOCUS, isOn); };
+const useRowFocus = (isBordered = false) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, exports.activeRowStyle)(colors);
+    const lit = isBordered
+        ? { backgroundColor: fill, borderColor: edge }
+        : (0, exports.activeRowSurface)(colors);
+    return {
+        sx: { [`&[${ROW_FOCUS}]`]: lit },
+        primary: {
+            onFocus: (event) => markRowFocus(event, event.currentTarget.matches(":focus-visible")),
+            onBlur: (event) => markRowFocus(event, false),
+        },
+    };
+};
+exports.useRowFocus = useRowFocus;
+const stretchedLink = (radius) => ({
+    outline: "none",
+    _after: {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: radius,
+    },
+});
+exports.stretchedLink = stretchedLink;
 const useRowHover = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, rowStates_1.listRowBackgrounds)(colors).active;
@@ -67,10 +134,19 @@ function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
 }
 function Highlight({ text, query }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: colors.primary.opacity[24], color: "inherit", borderRadius: "3px", px: "1px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: "transparent", color: "inherit", fontWeight: 650, textDecoration: "underline", textDecorationColor: colors.primary.opacity[48], textDecorationThickness: "1.5px", textUnderlineOffset: "2px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
 }
 function RowActions({ children }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const revealed = REVEALED.replace(/ &/g, " > &");
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { sx: {
+            [NARROW_ROW]: {
+                [revealed]: {
+                    backgroundColor: (0, exports.activeRowStyle)(colors).fill,
+                    borderRadius: "6px",
+                },
+            },
+        }, position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
 }
 function RowTip({ text }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -79,19 +155,21 @@ function RowTip({ text }) {
 function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, exports.useRowHover)();
+    const focus = (0, exports.useRowFocus)();
     const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
     const base = typeof module.badge === "number" || module.badge ? 24 : 0;
     const open = base + (onTogglePin ? 46 : 24);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, 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"]), _hover: hover._hover, _focusWithin: hover._focusWithin, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.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", h: "19px", minW: 0, pr: `${base}px`, _groupHover: { pr: `${open}px` }, _groupFocusWithin: { pr: `${open}px` }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? pinId : undefined, title: module.label, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: ring, children: module.label }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, title: `${screen.label} — ${module.label}`, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", _hover: {
-                                        textDecoration: "underline",
-                                        textUnderlineOffset: "2px",
-                                    }, sx: ring, children: screen.label })] }, screen.id))) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, 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"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...exports.ROW_CONTAINER }, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.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", h: "19px", minW: 0, sx: (0, exports.titleInset)(base, open), children: [(0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: module.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? pinId : undefined, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: module.label }) }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, position: "relative", zIndex: 1, w: "fit-content", maxW: "100%", fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", position: "relative", zIndex: 1, _hover: {
+                                            textDecoration: "underline",
+                                            textUnderlineOffset: "2px",
+                                        }, sx: ring, children: screen.label })] }, screen.id))) }) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
 }
 function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hover = (0, exports.useRowHover)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), trailing] }));
+    const focus = (0, exports.useRowFocus)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("8px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
 }
 function PinTextButton({ label, text, onToggle }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -105,12 +183,13 @@ function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, title: screen.label, transition: (0, motion_1.transitionFor)(["border-color"]), _hover: { borderColor: colors.gray[300] }, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+    const focus = (0, exports.useRowFocus)(true);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, transition: (0, motion_1.transitionFor)(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: screen.label, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, ...focus.primary, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("9px"), children: screen.label }) }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
 }
 function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const rows = (0, rowStates_1.listRowBackgrounds)(colors);
-    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const rowRing = (0, exports.activeRowSurface)(colors);
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
                     var _a;
                     const isCurrent = app.id === currentAppId;
@@ -125,6 +204,9 @@ function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
                                 }
                                 : {}), "aria-current": isCurrent ? "true" : undefined, title: app.locked
                                 ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`)
-                                : undefined, "data-app-locked": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "8px", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: ring, children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), (0, jsx_runtime_1.jsx)(react_1.Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }), app.locked ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: lucide_react_1.Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));
+                                : undefined, "data-app-locked": app.locked ? "true" : undefined, "aria-disabled": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "8px", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
+                                _focusVisible: rowRing,
+                                [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: rowRing,
+                            }, children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), (0, jsx_runtime_1.jsx)(OverflowToolTip_1.default, { label: app.name, placement: "top-start", children: (0, jsx_runtime_1.jsx)(react_1.Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }) }), app.locked ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: lucide_react_1.Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));
                 }) })] }));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -13,6 +13,11 @@ const color_1 = require("../../Theme/tokens/builders/color");
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
+    const [syncedUrl, setSyncedUrl] = (0, react_1.useState)(photoUrl);
+    if (photoUrl !== syncedUrl) {
+        setSyncedUrl(photoUrl);
+        setPhoto(photoUrl);
+    }
     const fileInputRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -1,6 +1,6 @@
 /** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
-    /** Seeds state on mount only — a later change to this prop is not re-synced; remount (key={photoUrl}) to update. */
+    /** Source of the displayed image; a changed value replaces it, discarding a locally picked preview. */
     photoUrl: string;
     /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -1,4 +1,4 @@
 import type { QueryStateBoundaryProps } from "./QueryStateProps";
-/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
-declare const QueryStateBoundary: ({ isLoading, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
 export default QueryStateBoundary;