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

package/dist/Components/NavLauncher/launcherParts.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.useTouchDensity = exports.TouchDensity = exports.ITEM_SELECTOR = void 0;
+exports.HighlightOptionsProvider = exports.useRowHover = exports.stretchedLink = exports.useRowFocus = exports.titleInset = exports.activeRowSurface = exports.activeRowStyle = exports.ROW_CONTAINER = exports.WIDE_ROW = exports.isPlainClick = exports.copyHint = exports.RulePlaneProvider = exports.useTouchDensity = exports.TouchDensity = exports.ITEM_SELECTOR = void 0;
+exports.HintLabel = HintLabel;
 exports.CountBadge = CountBadge;
 exports.NewTag = NewTag;
 exports.SectionHeader = SectionHeader;
@@ -21,10 +22,14 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const react_2 = require("react");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const ringShadow_1 = require("../../Theme/chakra/ringShadow");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 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 OverflowToolTip_1 = __importDefault(require("../ToolTip/OverflowToolTip"));
 const AppMark_1 = __importDefault(require("../AppSwitcher/AppMark"));
@@ -37,6 +42,35 @@ const TouchDensityContext = (0, react_2.createContext)(false);
 exports.TouchDensity = TouchDensityContext.Provider;
 const useTouchDensity = () => (0, react_2.useContext)(TouchDensityContext);
 exports.useTouchDensity = useTouchDensity;
+const RulePlaneContext = (0, react_2.createContext)("raised");
+exports.RulePlaneProvider = RulePlaneContext.Provider;
+const useSectionRule = () => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const plane = (0, react_2.useContext)(RulePlaneContext);
+    return plane === "recess"
+        ? (0, planeStep_1.ruleOn)(colors, colors.backgroundColor.subtle)
+        : (0, surfaceRaised_1.raisedRule)(colors);
+};
+const copyHint = (base, copied, isCopied) => ({
+    text: isCopied ? copied : base,
+    reserve: isCopied ? base : copied,
+    isAccent: isCopied,
+});
+exports.copyHint = copyHint;
+function HintLabel({ text, reserve, isAccent = false, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "data-testid": "launcher-hint-label", "data-accent": isAccent || undefined, "data-reserve": reserve, display: "inline-flex", flexDirection: "column", color: isAccent ? colors.accentText : undefined, transition: (0, motion_2.transitionFor)(["color"]), sx: {
+            // NOTE: ::after reserves the widest label (one per line), so swapping text never shifts the row.
+            "&::after": {
+                content: "attr(data-reserve)",
+                whiteSpace: "pre",
+                height: "0px",
+                overflow: "hidden",
+                visibility: "hidden",
+            },
+            ...(0, motion_1.reducedMotionSx)(),
+        }, children: text }));
+}
 const isPlainClick = (event) => event.button === 0 &&
     !event.metaKey &&
     !event.ctrlKey &&
@@ -62,7 +96,7 @@ const activeRowSurface = (colors) => {
     const { edge, fill } = (0, exports.activeRowStyle)(colors);
     return {
         backgroundColor: fill,
-        boxShadow: `inset 0 0 0 1px ${edge}`,
+        boxShadow: (0, ringShadow_1.insetRingShadow)(edge),
         outline: "2px solid transparent",
         outlineOffset: "-2px",
     };
@@ -128,17 +162,21 @@ function NewTag({ label }) {
 }
 function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: colors.boxborder[200], "aria-hidden": isDecorative || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "12.5px", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+    const rule = useSectionRule();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: rule, "aria-hidden": isDecorative || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "xs-plus", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
 }
 function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!Icon)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_1.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_2.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
 }
+const HighlightOptionsContext = (0, react_2.createContext)(undefined);
+exports.HighlightOptionsProvider = HighlightOptionsContext.Provider;
 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: "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))) }));
+    const options = (0, react_2.useContext)(HighlightOptionsContext);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query, options).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 }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -148,14 +186,14 @@ function RowActions({ children }) {
             [NARROW_ROW]: {
                 [revealed]: {
                     backgroundColor: (0, exports.activeRowStyle)(colors).fill,
-                    borderRadius: "6px",
+                    borderRadius: "md",
                 },
             },
         }, position: "absolute", top: isTouch ? "12px" : "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
 }
 function RowTip({ text }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "6px", fontSize: "11px", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "md", fontSize: "xs-minus", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
 }
 function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -165,7 +203,7 @@ function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, l
     const isTouch = (0, exports.useTouchDensity)();
     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: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "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: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: isTouch ? "44px" : "34px", pl: "8px", pr: "4px", pt: isTouch ? "12px" : "7px", pb: isTouch ? "8px" : "5px", borderRadius: "lg", transition: (0, motion_2.transitionFor)(["background-color"]), _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)("lg"), 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: "xs-minus", 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), tip: labels.newTabTip, linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
@@ -176,11 +214,11 @@ function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
     const hover = (0, exports.useRowHover)();
     const focus = (0, exports.useRowFocus)();
     const isTouch = (0, exports.useTouchDensity)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "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 })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "lg", transition: (0, motion_2.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: "xs-plus", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, exports.stretchedLink)("lg"), 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)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, color: colors.text[700], fontSize: "11px", fontWeight: 600, cursor: "pointer", opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "md", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, color: colors.text[700], fontSize: "xs-minus", fontWeight: 600, cursor: "pointer", opacity: 0, transition: (0, motion_2.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
             onToggle();
@@ -192,7 +230,7 @@ function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
     const focus = (0, exports.useRowFocus)(true);
     const isTouch = (0, exports.useTouchDensity)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: isTouch ? "44px" : "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] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "center", gap: "8px", h: isTouch ? "44px" : "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, transition: (0, motion_2.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: "xs-plus", 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_2.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, hideHeading = false, onSelect, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -212,7 +250,7 @@ function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, o
                                 }
                                 : {}), "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, "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: {
+                                : 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: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: (0, motion_2.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/NavLauncher/match.d.ts

@@ -1,4 +1,5 @@
-import type { LauncherIcon, LauncherResultGroup, LauncherSearchItem, LauncherSection } from "./NavLauncherProps";
+import { type LauncherSynonyms } from "./engine/engine";
+import type { LauncherAnswer, LauncherFact, LauncherIcon, LauncherResultGroup, LauncherSearchItem, LauncherSection } from "./NavLauncherProps";
 export type LauncherResult = {
     id: string;
     label: string;
@@ -14,13 +15,18 @@ export type LauncherResult = {
     /** Keyword that matched a module or screen whose own name did not. */
     keywordHint?: string;
     isNew?: boolean;
+    facts?: readonly LauncherFact[];
+    answer?: LauncherAnswer;
+    score?: number;
 };
 export type LauncherResultView = {
     id: string;
     label: string;
     items: LauncherResult[];
 };
+export declare function filterItems(items: readonly LauncherSearchItem[], query: string): LauncherSearchItem[];
 export declare function flattenScreens(sections: readonly LauncherSection[]): LauncherResult[];
+/** @deprecated Legacy flat search; NavLauncher uses searchLauncherSections (classic) or the spotlight engine. */
 export declare function searchLauncher(input: {
     query: string;
     sections: readonly LauncherSection[];
@@ -49,5 +55,10 @@ export type HighlightSegment = {
     text: string;
     isMatch: boolean;
 };
+/** Highlight options; `fuzzy` also marks prefix, typo, initial and accent-folded matches. */
+export type HighlightOptions = {
+    fuzzy?: boolean;
+    synonyms?: LauncherSynonyms;
+};
 /** Splits `text` so every case-insensitive occurrence of a query token is its own matched segment. */
-export declare function highlightSegments(text: string, query: string): HighlightSegment[];
+export declare function highlightSegments(text: string, query: string, options?: HighlightOptions): HighlightSegment[];

package/dist/Components/NavLauncher/match.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterItems = filterItems;
 exports.flattenScreens = flattenScreens;
 exports.searchLauncher = searchLauncher;
 exports.searchLauncherSections = searchLauncherSections;
 exports.highlightSegments = highlightSegments;
+const engine_1 = require("./engine/engine");
 const normalize = (text) => text.toLocaleLowerCase().normalize("NFKD");
 function score(label, haystack, tokens) {
     if (!tokens.every((t) => haystack.includes(t)))
@@ -29,6 +31,12 @@ function rank(rows, text, tokens) {
         .sort((a, b) => a.s - b.s || a.index - b.index)
         .map((r) => r.row);
 }
+function filterItems(items, query) {
+    const tokens = normalize(query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return [];
+    return rank([...items], (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+}
 function flattenScreens(sections) {
     var _a, _b, _c;
     const seen = new Set();
@@ -54,6 +62,7 @@ function flattenScreens(sections) {
     }
     return out;
 }
+/** @deprecated Legacy flat search; NavLauncher uses searchLauncherSections (classic) or the spotlight engine. */
 function searchLauncher(input) {
     var _a, _b;
     const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
@@ -143,8 +152,23 @@ function searchLauncherSections(input) {
     ].filter((g) => g.items.length > 0);
     return { sections, groups };
 }
+const toSegments = (text, ranges) => {
+    const out = [];
+    let cursor = 0;
+    for (const [start, end] of ranges) {
+        if (start > cursor)
+            out.push({ text: text.slice(cursor, start), isMatch: false });
+        out.push({ text: text.slice(start, end), isMatch: true });
+        cursor = end;
+    }
+    if (cursor < text.length)
+        out.push({ text: text.slice(cursor), isMatch: false });
+    return out.length ? out : [{ text, isMatch: false }];
+};
 /** Splits `text` so every case-insensitive occurrence of a query token is its own matched segment. */
-function highlightSegments(text, query) {
+function highlightSegments(text, query, options) {
+    if (options === null || options === void 0 ? void 0 : options.fuzzy)
+        return toSegments(text, (0, engine_1.highlightRanges)(text, query, { synonyms: options.synonyms }));
     const lower = text.toLocaleLowerCase();
     const tokens = query.toLocaleLowerCase().split(/\s+/).filter(Boolean);
     if (tokens.length === 0 || lower.length !== text.length)
@@ -164,15 +188,5 @@ function highlightSegments(text, query) {
         else
             merged.push([...range]);
     }
-    const out = [];
-    let cursor = 0;
-    for (const [start, end] of merged) {
-        if (start > cursor)
-            out.push({ text: text.slice(cursor, start), isMatch: false });
-        out.push({ text: text.slice(start, end), isMatch: true });
-        cursor = end;
-    }
-    if (cursor < text.length)
-        out.push({ text: text.slice(cursor), isMatch: false });
-    return out.length ? out : [{ text, isMatch: false }];
+    return toSegments(text, merged);
 }

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

@@ -0,0 +1,61 @@
+import type { LauncherResult } from "./match";
+import type { LauncherResultGroup, LauncherSearchItem } from "./NavLauncherProps";
+import { type SearchGroup } from "./spotlight";
+export type SearchEntry = {
+    type: "answer" | "top";
+    item: LauncherResult;
+} | {
+    type: "row";
+    item: LauncherResult;
+    groupId: string;
+} | {
+    type: "more";
+    groupId: string;
+    count: number;
+};
+export type SearchBlock = {
+    type: "answers";
+    start: number;
+    items: LauncherResult[];
+} | {
+    type: "top";
+    start: number;
+    item: LauncherResult;
+} | {
+    type: "group";
+    group: SearchGroup;
+    start: number;
+    visible: LauncherResult[];
+    more?: {
+        index: number;
+        count: number;
+    };
+};
+export type SearchLayout = {
+    blocks: SearchBlock[];
+    entries: SearchEntry[];
+    sizes: number[];
+    total: number;
+};
+export declare const copiesOnEnter: (entry?: SearchEntry) => boolean;
+export declare const inScope: (groups: SearchGroup[], scope: string) => SearchGroup[];
+/** A scope's items as passed, unranked, for browsing before typing. */
+export declare const scopeGroups: (input: {
+    scope: string;
+    actions?: readonly LauncherSearchItem[];
+    extraResults?: readonly LauncherResultGroup[];
+    actionsLabel: string;
+}) => SearchGroup[];
+export declare const countByScope: (groups: SearchGroup[], answers: number) => Map<string, number>;
+export declare const takeTopHit: (groups: SearchGroup[]) => {
+    topHit?: LauncherResult;
+    groups: SearchGroup[];
+};
+/** Flat option order for keyboard and ARIA plus per-row group sizes for `moveResult`. */
+export declare const layoutSearch: (input: {
+    answers: LauncherResult[];
+    topHit?: LauncherResult;
+    groups: SearchGroup[];
+    limit?: number;
+    expanded: ReadonlySet<string>;
+}) => SearchLayout;

package/dist/Components/NavLauncher/searchLayout.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layoutSearch = exports.takeTopHit = exports.countByScope = exports.scopeGroups = exports.inScope = exports.copiesOnEnter = void 0;
+const spotlight_1 = require("./spotlight");
+const copiesOnEnter = (entry) => (entry === null || entry === void 0 ? void 0 : entry.type) === "answer" && !entry.item.run && !entry.item.href;
+exports.copiesOnEnter = copiesOnEnter;
+const inScope = (groups, scope) => scope === spotlight_1.SCOPE_ALL ? groups : groups.filter((g) => g.scope === scope);
+exports.inScope = inScope;
+/** A scope's items as passed, unranked, for browsing before typing. */
+const scopeGroups = (input) => {
+    var _a, _b, _c;
+    const groups = [];
+    if (input.scope === spotlight_1.SCOPE_ACTIONS && ((_a = input.actions) === null || _a === void 0 ? void 0 : _a.length)) {
+        groups.push({
+            id: spotlight_1.SCOPE_ACTIONS,
+            label: input.actionsLabel,
+            scope: spotlight_1.SCOPE_ACTIONS,
+            isSection: false,
+            items: input.actions.map((action) => ({ ...action, id: `action:${action.id}` })),
+        });
+    }
+    for (const group of (_b = input.extraResults) !== null && _b !== void 0 ? _b : []) {
+        const scope = (_c = group.scope) !== null && _c !== void 0 ? _c : group.id;
+        if (scope !== input.scope || group.items.length === 0)
+            continue;
+        groups.push({
+            id: group.id,
+            label: group.label,
+            scope,
+            isSection: false,
+            items: group.items.map((item) => ({ ...item, id: `${group.id}:${item.id}` })),
+        });
+    }
+    return groups;
+};
+exports.scopeGroups = scopeGroups;
+const countByScope = (groups, answers) => {
+    var _a;
+    const counts = new Map();
+    let all = answers;
+    for (const group of groups) {
+        counts.set(group.scope, ((_a = counts.get(group.scope)) !== null && _a !== void 0 ? _a : 0) + group.items.length);
+        all += group.items.length;
+    }
+    counts.set(spotlight_1.SCOPE_ALL, all);
+    return counts;
+};
+exports.countByScope = countByScope;
+const takeTopHit = (groups) => {
+    let at = -1;
+    let index = -1;
+    let bestScore = 0;
+    for (let g = 0; g < groups.length; g += 1) {
+        groups[g].items.forEach((item, i) => {
+            var _a, _b;
+            if (((_a = item.score) !== null && _a !== void 0 ? _a : 0) <= bestScore)
+                return;
+            bestScore = (_b = item.score) !== null && _b !== void 0 ? _b : 0;
+            at = g;
+            index = i;
+        });
+    }
+    if (at < 0)
+        return { groups };
+    return {
+        topHit: groups[at].items[index],
+        groups: groups
+            .map((group, g) => (g === at ? { ...group, items: group.items.filter((_, i) => i !== index) } : group))
+            .filter((group) => group.items.length > 0),
+    };
+};
+exports.takeTopHit = takeTopHit;
+/** Flat option order for keyboard and ARIA plus per-row group sizes for `moveResult`. */
+const layoutSearch = (input) => {
+    const blocks = [];
+    const entries = [];
+    const sizes = [];
+    if (input.answers.length) {
+        blocks.push({ type: "answers", start: 0, items: input.answers });
+        for (const item of input.answers) {
+            entries.push({ type: "answer", item });
+            sizes.push(1);
+        }
+    }
+    if (input.topHit) {
+        blocks.push({ type: "top", start: entries.length, item: input.topHit });
+        entries.push({ type: "top", item: input.topHit });
+        sizes.push(1);
+    }
+    let total = entries.length;
+    for (const group of input.groups) {
+        const cap = input.limit !== undefined && !input.expanded.has(group.id) ? Math.max(1, input.limit) : Infinity;
+        const visible = group.items.slice(0, cap);
+        const hidden = group.items.length - visible.length;
+        const start = entries.length;
+        for (const item of visible)
+            entries.push({ type: "row", item, groupId: group.id });
+        sizes.push(visible.length);
+        total += group.items.length;
+        let more;
+        if (hidden > 0) {
+            more = { index: entries.length, count: hidden };
+            entries.push({ type: "more", groupId: group.id, count: hidden });
+            sizes.push(1);
+        }
+        blocks.push({ type: "group", group, start, visible, more });
+    }
+    return { blocks, entries, sizes, total };
+};
+exports.layoutSearch = layoutSearch;

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

@@ -0,0 +1,39 @@
+import { type LauncherSearchField, type LauncherSearchIndex, type LauncherSynonyms } from "./engine/engine";
+import type { LauncherResult } from "./match";
+import type { LauncherResultGroup, LauncherSearchItem, LauncherSection } from "./NavLauncherProps";
+export declare const SCOPE_ALL = "all";
+export declare const SCOPE_SCREENS = "screens";
+export declare const SCOPE_ACTIONS = "actions";
+export type SearchGroup = {
+    id: string;
+    label: string;
+    scope: string;
+    isSection: boolean;
+    items: LauncherResult[];
+};
+type Entry = {
+    groupId: string;
+    usageId?: string;
+    result: LauncherResult;
+};
+export type SpotlightIndex = {
+    index: LauncherSearchIndex;
+    entries: Entry[];
+    groups: Array<Omit<SearchGroup, "items">>;
+};
+export declare const itemFields: (item: LauncherSearchItem) => LauncherSearchField[];
+export declare function createSpotlightIndex(sections: readonly LauncherSection[], actions: readonly LauncherSearchItem[] | undefined, actionsLabel: string): SpotlightIndex;
+export declare function spotlightBoosts(spot: SpotlightIndex, usage: {
+    pinnedIds?: readonly string[];
+    frequentIds?: readonly string[];
+    recentIds?: readonly string[];
+}): Record<string, number>;
+/** Ranked groups; local rows under 25% of the best score are dropped. */
+export declare function searchSpotlight(spot: SpotlightIndex, input: {
+    query: string;
+    extraResults?: readonly LauncherResultGroup[];
+    synonyms?: LauncherSynonyms;
+    boosts?: Readonly<Record<string, number>>;
+}): SearchGroup[];
+export declare function matchAnswers(answers: readonly LauncherSearchItem[] | undefined, query: string, synonyms?: LauncherSynonyms): LauncherResult[];
+export {};