pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,75 @@
+// Accents, nukta and joiners fold away; vowel signs and viramas belong to the letter.
+const OPTIONAL_MARKS = 
+// eslint-disable-next-line no-misleading-character-class -- each mark is removed on its own
+/[\u0300-\u036f\u0591-\u05c7\u0610-\u061a\u064b-\u065f\u0670\u06d6-\u06ed\u093c\u1ab0-\u1aff\u1dc0-\u1dff\u200c\u200d\u20d0-\u20ff\ufe20-\ufe2f]/g;
+const CHANDRABINDU = /\u0901/g;
+// NOTE: built from code points; minified Indic literals trip consumers' locale-data budget gates.
+const ANUSVARA = String.fromCodePoint(0x0902);
+const MARK = /\p{M}/u;
+const SEPARATOR = /[^\p{L}\p{N}\p{M}]+/u;
+const SPECIAL = {
+    ß: "ss",
+    æ: "ae",
+    œ: "oe",
+    ø: "o",
+    ł: "l",
+    đ: "d",
+    ı: "i",
+};
+const SPECIAL_RE = /[ßæœøłđı]/g;
+const DEVANAGARI_VIRAMA = 0x094d;
+/** Case- and accent-insensitive form used for every comparison: "Crème Brûlée" -> "creme brulee". */
+export const foldText = (text) => text
+    .normalize("NFKD")
+    .replace(OPTIONAL_MARKS, "")
+    .replace(CHANDRABINDU, ANUSVARA)
+    .toLowerCase()
+    .replace(SPECIAL_RE, (ch) => SPECIAL[ch]);
+export const splitWords = (folded) => folded.split(SEPARATOR).filter(Boolean);
+/** Folded, de-duplicated query tokens in typing order. */
+export const tokenize = (query) => Array.from(new Set(splitWords(foldText(query))));
+/** True when folded text carries combining marks, so its written letters span several characters. */
+export const hasMarks = (folded) => MARK.test(folded);
+const isDevanagariConsonant = (code) => (code >= 0x0915 && code <= 0x0939) || (code >= 0x0978 && code <= 0x097f);
+const markCodes = new Map();
+const isMarkCode = (code, char) => {
+    if (code < 0x0300)
+        return false;
+    let known = markCodes.get(code);
+    if (known === undefined) {
+        known = MARK.test(char);
+        markCodes.set(code, known);
+    }
+    return known;
+};
+/** Written letters: a base with its marks; a Devanagari conjunct counts as one. */
+export const letters = (word) => {
+    var _a;
+    const out = [];
+    let previous = 0;
+    for (const char of word) {
+        const code = (_a = char.codePointAt(0)) !== null && _a !== void 0 ? _a : 0;
+        const joins = isMarkCode(code, char) ||
+            (previous === DEVANAGARI_VIRAMA && isDevanagariConsonant(code));
+        if (joins && out.length > 0)
+            out[out.length - 1] += char;
+        else
+            out.push(char);
+        previous = code;
+    }
+    return out;
+};
+export const foldWithMap = (text) => {
+    let folded = "";
+    const map = [];
+    let at = 0;
+    for (const char of text) {
+        const piece = foldText(char);
+        for (let i = 0; i < piece.length; i += 1)
+            map.push(at);
+        folded += piece;
+        at += char.length;
+    }
+    map.push(text.length);
+    return { folded, map };
+};

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

@@ -0,0 +1,14 @@
+import { createMatcher, createSearchIndex, editDistance, foldText, highlightRanges, matchesQuery, searchDocuments, searchIndex, tokenize, usageBoosts, } from "./engine.js";
+/** Framework-free ranked search used by NavLauncher; reusable by any list, picker or palette. */
+export const LauncherSearchEngine = Object.freeze({
+    createIndex: createSearchIndex,
+    search: searchIndex,
+    searchDocuments,
+    createMatcher,
+    matches: matchesQuery,
+    highlightRanges,
+    usageBoosts,
+    foldText,
+    tokenize,
+    editDistance,
+});

package/dist/esm/Components/NavLauncher/launcherMotion.js

@@ -0,0 +1,11 @@
+import { EASINGS } from "@chakra-ui/react";
+import { motionTransition } from "../../Theme/tokens/primitives/motion.js";
+const ENTER = motionTransition("enter", "out");
+const INSTANT = { duration: 0 };
+const EXIT = { duration: 0.15, ease: [...EASINGS.easeInOut] };
+export const launcherSlide = (isReducedMotion) => ({
+    variants: {
+        enter: { x: 0, y: 0, transition: isReducedMotion ? INSTANT : ENTER },
+        exit: { x: "-100%", y: 0, transition: EXIT },
+    },
+});

package/dist/esm/Components/NavLauncher/launcherParts.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Heading, Text } from "@chakra-ui/react";
+import { Lock, Star } from "lucide-react";
+import { createContext, Fragment, useContext, } from "react";
+import { FOCUS_VISIBLE_OVER_STATE, focusVisibleStyles, } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { insetRingShadow } from "../../Theme/chakra/ringShadow.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { AA_NON_TEXT, liftToContrast, } from "../../Theme/tokens/builders/outlineRung.js";
+import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import OverflowToolTip from "../ToolTip/OverflowToolTip.js";
+import AppMark from "../AppSwitcher/AppMark.js";
+import { highlightSegments } from "./match.js";
+import NewTabLink from "./NewTabLink.js";
+import PinToggle from "./PinToggle.js";
+import { revealStyles } from "./revealStyles.js";
+export const ITEM_SELECTOR = "[data-launcher-item]";
+const TouchDensityContext = createContext(false);
+export const TouchDensity = TouchDensityContext.Provider;
+export const useTouchDensity = () => useContext(TouchDensityContext);
+const RulePlaneContext = createContext("raised");
+export const RulePlaneProvider = RulePlaneContext.Provider;
+const useSectionRule = () => {
+    const { colors } = useCustomTheme();
+    const plane = useContext(RulePlaneContext);
+    return plane === "recess"
+        ? ruleOn(colors, colors.backgroundColor.subtle)
+        : raisedRule(colors);
+};
+export const copyHint = (base, copied, isCopied) => ({
+    text: isCopied ? copied : base,
+    reserve: isCopied ? base : copied,
+    isAccent: isCopied,
+});
+export function HintLabel({ text, reserve, isAccent = false, }) {
+    const { colors } = useCustomTheme();
+    return (_jsx(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: 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",
+            },
+            ...reducedMotionSx(),
+        }, children: text }));
+}
+export const isPlainClick = (event) => event.button === 0 &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !event.altKey;
+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)";
+export const WIDE_ROW = "@container launcher-row (min-width: 300px)";
+export const ROW_CONTAINER = {
+    containerType: "inline-size",
+    containerName: "launcher-row",
+};
+export const activeRowStyle = (colors) => {
+    const fill = listRowBackgrounds(colors).active;
+    const edge = liftToContrast(liftToContrast(colors.primary[500], fill, AA_NON_TEXT), colors.surfaceRaised, AA_NON_TEXT);
+    return { edge, fill };
+};
+export const activeRowSurface = (colors) => {
+    const { edge, fill } = activeRowStyle(colors);
+    return {
+        backgroundColor: fill,
+        boxShadow: insetRingShadow(edge),
+        outline: "2px solid transparent",
+        outlineOffset: "-2px",
+    };
+};
+export const titleInset = (base, open, chip = 0) => ({
+    paddingRight: `var(${ROW_PR})`,
+    [ROW_PR]: `${base}px`,
+    [REVEALED]: { [ROW_PR]: `${open}px` },
+    ...(chip
+        ? {
+            [WIDE_ROW]: {
+                "[data-group][data-reveal=true] &": { [ROW_PR]: `${open + chip}px` },
+            },
+        }
+        : {}),
+    [NARROW_ROW]: { [REVEALED]: { [ROW_PR]: `${base}px` } },
+});
+const markRowFocus = (event, isOn) => { var _a; return (_a = event.currentTarget.closest("[data-group]")) === null || _a === void 0 ? void 0 : _a.toggleAttribute(ROW_FOCUS, isOn); };
+export const useRowFocus = (isBordered = false) => {
+    const { colors } = useCustomTheme();
+    const { edge, fill } = activeRowStyle(colors);
+    const lit = isBordered
+        ? { backgroundColor: fill, borderColor: edge }
+        : activeRowSurface(colors);
+    return {
+        sx: { [`&[${ROW_FOCUS}]`]: lit },
+        primary: {
+            onFocus: (event) => markRowFocus(event, event.currentTarget.matches(":focus-visible")),
+            onBlur: (event) => markRowFocus(event, false),
+        },
+    };
+};
+export const stretchedLink = (radius) => ({
+    outline: "none",
+    _after: {
+        content: '""',
+        position: "absolute",
+        inset: 0,
+        borderRadius: radius,
+    },
+});
+export const useRowHover = () => {
+    const { colors } = useCustomTheme();
+    const hover = listRowBackgrounds(colors).active;
+    return { bg: hover, _hover: { bg: hover }, _focusWithin: { bg: hover } };
+};
+export function CountBadge({ value, size = "row" }) {
+    const { colors } = useCustomTheme();
+    if (value === undefined || value === 0 || value === "")
+        return null;
+    const fill = resolveFilledSurface(colors.primary, colors);
+    const isRow = size === "row";
+    return (_jsx(Box, { as: "span", flexShrink: 0, minW: isRow ? "20px" : undefined, h: isRow ? "18px" : "17px", px: "6px", mr: isRow ? "2px" : 0, borderRadius: "full", bg: fill.fill, color: fill.color, fontSize: isRow ? "10.5px" : "10px", fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", sx: { fontVariantNumeric: "tabular-nums" }, children: value }));
+}
+export function NewTag({ label }) {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "span", flexShrink: 0, fontSize: "10px", fontWeight: 600, letterSpacing: "0.02em", color: colors.accentText, opacity: 0.85, children: label }));
+}
+export function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
+    const { colors } = useCustomTheme();
+    const rule = useSectionRule();
+    return (_jsxs(Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: rule, "aria-hidden": isDecorative || undefined, children: [_jsx(Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "xs-plus", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? (_jsx(Text, { as: "span", fontSize: "xs-minus", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+}
+export function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
+    const { colors } = useCustomTheme();
+    if (!Icon)
+        return null;
+    return (_jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: transitionFor(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: _jsx(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
+}
+const HighlightOptionsContext = createContext(undefined);
+export const HighlightOptionsProvider = HighlightOptionsContext.Provider;
+export function Highlight({ text, query }) {
+    const { colors } = useCustomTheme();
+    const options = useContext(HighlightOptionsContext);
+    return (_jsx(_Fragment, { children: highlightSegments(text, query, options).map((segment, i) => segment.isMatch ? (_jsx(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)) : (_jsx(Fragment, { children: segment.text }, i))) }));
+}
+export function RowActions({ children }) {
+    const { colors } = useCustomTheme();
+    const isTouch = useTouchDensity();
+    const revealed = REVEALED.replace(/ &/g, " > &");
+    return (_jsx(Flex, { sx: {
+            [NARROW_ROW]: {
+                [revealed]: {
+                    backgroundColor: activeRowStyle(colors).fill,
+                    borderRadius: "md",
+                },
+            },
+        }, position: "absolute", top: isTouch ? "12px" : "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+}
+export function RowTip({ text }) {
+    const { colors } = useCustomTheme();
+    return (_jsx(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 }));
+}
+export function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
+    const { colors } = useCustomTheme();
+    const hover = useRowHover();
+    const focus = useRowFocus();
+    const ring = focusVisibleStyles(colors);
+    const isTouch = useTouchDensity();
+    const base = typeof module.badge === "number" || module.badge ? 24 : 0;
+    const open = base + (onTogglePin ? 46 : 24);
+    return (_jsxs(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: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: { ...focus.sx, ...ROW_CONTAINER }, children: [_jsx(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: "6px", h: "19px", minW: 0, sx: titleInset(base, open), children: [_jsx(OverflowToolTip, { label: module.label, placement: "top-start", children: _jsx(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: stretchedLink("lg"), children: module.label }) }), module.isNew ? _jsx(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? (_jsx(OverflowToolTip, { label: keyScreens.map((screen) => screen.label).join(" · "), placement: "bottom-start", children: _jsx(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) => (_jsxs(Fragment, { children: [i > 0 ? (_jsx(Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, _jsx(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] }), _jsxs(RowActions, { children: [_jsx(CountBadge, { value: module.badge }), onTogglePin ? (_jsx(PinToggle, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, _jsx(NewTabLink, { href: module.href, label: labels.openInNewTab(module.label), tip: labels.newTabTip, linkAs: link.linkAs })] }), onTogglePin ? (_jsx(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+}
+export function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const hover = useRowHover();
+    const focus = useRowFocus();
+    const isTouch = useTouchDensity();
+    return (_jsxs(Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "lg", transition: transitionFor(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, sx: focus.sx, children: [_jsx(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(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: stretchedLink("lg"), children: screen.label }) }), _jsx(Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+}
+export function PinTextButton({ label, text, onToggle }) {
+    const { colors } = useCustomTheme();
+    return (_jsxs(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: raisedRule(colors), bg: colors.surfaceRaised, color: colors.text[700], fontSize: "xs-minus", fontWeight: 600, cursor: "pointer", opacity: 0, transition: transitionFor(["opacity", "background-color"]), sx: { ...revealStyles(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        }, children: [_jsx(Star, { size: 11, strokeWidth: 2, "aria-hidden": true }), text] }));
+}
+export function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
+    const focus = useRowFocus(true);
+    const isTouch = useTouchDensity();
+    return (_jsxs(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: raisedRule(colors), bg: colors.surfaceRaised, transition: transitionFor(["border-color", "background-color"]), _hover: { borderColor: colors.gray[300] }, sx: focus.sx, children: [Icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, _jsx(OverflowToolTip, { label: screen.label, placement: "top-start", children: _jsx(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: stretchedLink("9px"), children: screen.label }) }), _jsx(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? (_jsx(Box, { position: "relative", zIndex: 1, flexShrink: 0, w: "0", overflow: "hidden", transition: transitionFor(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: _jsx(PinToggle, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+}
+export function AppsSection({ apps, hues, currentAppId, heading, hideHeading = false, onSelect, }) {
+    const { colors } = useCustomTheme();
+    const rows = listRowBackgrounds(colors);
+    const rowRing = activeRowSurface(colors);
+    return (_jsxs(Box, { children: [hideHeading ? null : _jsx(SectionHeader, { label: heading, isRail: true, hasCount: false }), _jsx(Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
+                    var _a;
+                    const isCurrent = app.id === currentAppId;
+                    const interactive = !isCurrent && !app.locked;
+                    return (_jsx(Box, { as: "li", children: _jsxs(Flex, { as: interactive ? "a" : "div", ...(interactive
+                                ? {
+                                    href: app.url,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    "data-launcher-item": true,
+                                    onClick: (event) => onSelect(app, event),
+                                }
+                                : {}), "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: "lg", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: transitionFor(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: {
+                                _focusVisible: rowRing,
+                                [FOCUS_VISIBLE_OVER_STATE]: rowRing,
+                            }, children: [_jsx(AppMark, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), _jsx(OverflowToolTip, { label: app.name, placement: "top-start", children: _jsx(Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }) }), app.locked ? (_jsx(Box, { as: Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));
+                }) })] }));
+}

package/dist/esm/Components/NavLauncher/match.js

@@ -0,0 +1,185 @@
+import { highlightRanges } from "./engine/engine.js";
+const normalize = (text) => text.toLocaleLowerCase().normalize("NFKD");
+function score(label, haystack, tokens) {
+    if (!tokens.every((t) => haystack.includes(t)))
+        return null;
+    const l = normalize(label);
+    const q = tokens.join(" ");
+    if (l === q)
+        return 0;
+    if (l.startsWith(q))
+        return 1;
+    if (l.split(/\s+/).some((w) => w.startsWith(tokens[0])))
+        return 2;
+    return l.includes(tokens[0]) ? 3 : 4;
+}
+function rank(rows, text, tokens) {
+    return rows
+        .map((row, index) => ({
+        row,
+        index,
+        s: score(row.label, normalize(text(row)), tokens),
+    }))
+        .filter((r) => r.s !== null)
+        .sort((a, b) => a.s - b.s || a.index - b.index)
+        .map((r) => r.row);
+}
+export 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);
+}
+export function flattenScreens(sections) {
+    var _a, _b, _c;
+    const seen = new Set();
+    const out = [];
+    for (const section of sections) {
+        for (const module of section.modules) {
+            for (const screen of module.screens) {
+                if (seen.has(screen.id))
+                    continue;
+                seen.add(screen.id);
+                out.push({
+                    id: `screen:${screen.id}`,
+                    screenId: screen.id,
+                    label: screen.label,
+                    context: screen.label === module.label ? section.label : module.label,
+                    icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                    keywords: [module.label, ...((_b = module.keywords) !== null && _b !== void 0 ? _b : []), ...((_c = screen.keywords) !== null && _c !== void 0 ? _c : [])].join(" "),
+                });
+            }
+        }
+    }
+    return out;
+}
+/** @deprecated Legacy flat search; NavLauncher uses searchLauncherSections (classic) or the spotlight engine. */
+export function searchLauncher(input) {
+    var _a, _b;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return [];
+    const screens = flattenScreens(input.sections);
+    const actions = rank(((_a = input.actions) !== null && _a !== void 0 ? _a : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        {
+            id: "screens",
+            label: input.screensLabel,
+            items: rank(screens, (s) => { var _a; return `${s.label} ${(_a = s.context) !== null && _a !== void 0 ? _a : ""} ${s.keywords}`; }, tokens),
+        },
+        ...((_b = input.extraResults) !== null && _b !== void 0 ? _b : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ];
+    return groups.filter((g) => g.items.length > 0);
+}
+function matchNameOrKeyword(label, keywords, tokens) {
+    const name = normalize(label);
+    if (tokens.every((t) => name.includes(t)))
+        return {};
+    const terms = keywords.map(normalize);
+    const all = `${name} ${terms.join(" ")}`;
+    if (!tokens.every((t) => all.includes(t)))
+        return null;
+    const hit = keywords.find((_, i) => tokens.some((t) => terms[i].includes(t)));
+    return { keyword: hit !== null && hit !== void 0 ? hit : keywords[0] };
+}
+/** Search that keeps the sections: per section, matching modules, each followed by its matching screens. */
+export function searchLauncherSections(input) {
+    var _a, _b, _c, _d, _e, _f;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return { sections: [], groups: [] };
+    const seen = new Set();
+    const sections = [];
+    for (const section of input.sections) {
+        const items = [];
+        for (const module of section.modules) {
+            const moduleHit = matchNameOrKeyword(module.label, (_a = module.keywords) !== null && _a !== void 0 ? _a : [], tokens);
+            if (moduleHit) {
+                items.push({
+                    id: `module:${module.id}`,
+                    kind: "module",
+                    label: module.label,
+                    keywordHint: moduleHit.keyword,
+                    icon: module.icon,
+                    badge: module.badge,
+                    isNew: module.isNew,
+                    href: module.href,
+                    screenId: (_b = module.screens[0]) === null || _b === void 0 ? void 0 : _b.id,
+                });
+            }
+            for (const screen of module.screens) {
+                if (screen.label === module.label || seen.has(screen.id))
+                    continue;
+                if (!matchNameOrKeyword(screen.label, (_c = screen.keywords) !== null && _c !== void 0 ? _c : [], tokens))
+                    continue;
+                seen.add(screen.id);
+                items.push({
+                    id: `screen:${screen.id}`,
+                    kind: "screen",
+                    label: screen.label,
+                    context: module.label,
+                    icon: (_d = screen.icon) !== null && _d !== void 0 ? _d : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                });
+            }
+        }
+        if (items.length > 0)
+            sections.push({ id: section.id, label: section.label, items });
+    }
+    const actions = rank(((_e = input.actions) !== null && _e !== void 0 ? _e : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        ...((_f = input.extraResults) !== null && _f !== void 0 ? _f : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ].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. */
+export function highlightSegments(text, query, options) {
+    if (options === null || options === void 0 ? void 0 : options.fuzzy)
+        return toSegments(text, 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)
+        return [{ text, isMatch: false }];
+    const ranges = [];
+    for (const token of tokens) {
+        for (let at = lower.indexOf(token); at !== -1; at = lower.indexOf(token, at + token.length)) {
+            ranges.push([at, at + token.length]);
+        }
+    }
+    ranges.sort((a, b) => a[0] - b[0]);
+    const merged = [];
+    for (const range of ranges) {
+        const last = merged[merged.length - 1];
+        if (last && range[0] <= last[1])
+            last[1] = Math.max(last[1], range[1]);
+        else
+            merged.push([...range]);
+    }
+    return toSegments(text, merged);
+}

package/dist/esm/Components/NavLauncher/resultNavigation.js

@@ -0,0 +1,61 @@
+const locate = (sizes, index) => {
+    let start = 0;
+    for (let group = 0; group < sizes.length; group += 1) {
+        if (index < start + sizes[group])
+            return { group, pos: index - start, start };
+        start += sizes[group];
+    }
+    return {
+        group: sizes.length - 1,
+        pos: 0,
+        start: start - sizes[sizes.length - 1],
+    };
+};
+const startOf = (sizes, group) => sizes.slice(0, group).reduce((sum, size) => sum + size, 0);
+const stepVertical = (sizes, columns, index, down, wrap) => {
+    const { group, pos, start } = locate(sizes, index);
+    const size = sizes[group];
+    const column = pos % columns;
+    if (down) {
+        if (pos + columns < size)
+            return index + columns;
+        if (Math.floor(pos / columns) < Math.floor((size - 1) / columns))
+            return start + size - 1;
+        const next = group + 1 < sizes.length ? group + 1 : wrap ? 0 : -1;
+        if (next < 0)
+            return index;
+        return startOf(sizes, next) + Math.min(column, sizes[next] - 1);
+    }
+    if (pos - columns >= 0)
+        return index - columns;
+    const prev = group > 0 ? group - 1 : wrap ? sizes.length - 1 : -1;
+    if (prev < 0)
+        return index;
+    const lastRow = Math.floor((sizes[prev] - 1) / columns);
+    return (startOf(sizes, prev) + Math.min(sizes[prev] - 1, lastRow * columns + column));
+};
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+export const moveResult = (sizes, columns, index, key, pageRows = 1) => {
+    const total = sizes.reduce((sum, size) => sum + size, 0);
+    if (total === 0)
+        return 0;
+    switch (key) {
+        case "ArrowDown":
+        case "ArrowUp":
+            return stepVertical(sizes, columns, index, key === "ArrowDown", true);
+        case "ArrowRight":
+            return Math.min(total - 1, index + 1);
+        case "ArrowLeft":
+            return Math.max(0, index - 1);
+        case "Home":
+            return 0;
+        case "End":
+            return total - 1;
+        default: {
+            let next = index;
+            for (let i = 0; i < pageRows; i += 1)
+                next = stepVertical(sizes, columns, next, key === "PageDown", false);
+            return next;
+        }
+    }
+};

package/dist/esm/Components/NavLauncher/revealStyles.js

@@ -0,0 +1,15 @@
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch, where it also grows to a 32px hit area. */
+export const revealStyles = (colors) => {
+    const ring = focusVisibleStyles(colors);
+    return {
+        ...ring,
+        _focusVisible: { ...ring._focusVisible, opacity: 1 },
+        _groupHover: { opacity: 1 },
+        _groupFocusWithin: { opacity: 1 },
+        "[data-reveal=true] &": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1, minWidth: "32px", width: "32px", height: "32px" },
+        ...reducedMotionSx(),
+    };
+};