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

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

@@ -0,0 +1,74 @@
+// 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;
+const ANUSVARA = "\u0902";
+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/launcherParts.js

@@ -3,6 +3,7 @@ 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 { 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 { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
@@ -41,7 +42,7 @@ export const activeRowSurface = (colors) => {
     const { edge, fill } = activeRowStyle(colors);
     return {
         backgroundColor: fill,
-        boxShadow: `inset 0 0 0 1px ${edge}`,
+        boxShadow: insetRingShadow(edge),
         outline: "2px solid transparent",
         outlineOffset: "-2px",
     };
@@ -110,9 +111,12 @@ export function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
         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();
-    return (_jsx(_Fragment, { children: highlightSegments(text, query).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))) }));
+    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();
@@ -129,7 +133,7 @@ export function RowActions({ 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: "6px", fontSize: "11px", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
+    return (_jsx(Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "6px", 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();
@@ -150,11 +154,11 @@ export function RailRow({ screen, module, link, isStrong = false, trailing, pinI
     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: "8px", 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: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: stretchedLink("8px"), children: screen.label }) }), _jsx(Flex, { position: "relative", zIndex: 1, align: "center", gap: "2px", children: trailing })] }));
+    return (_jsxs(Flex, { "data-group": true, position: "relative", align: "center", gap: "10px", h: isTouch ? "44px" : "32px", pl: "8px", pr: "4px", borderRadius: "8px", 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("8px"), 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: "6px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, color: colors.text[700], fontSize: "11px", fontWeight: 600, cursor: "pointer", opacity: 0, transition: transitionFor(["opacity", "background-color"]), sx: { ...revealStyles(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+    return (_jsxs(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: "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();
@@ -166,7 +170,7 @@ export function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
     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: colors.boxborder[200], 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: "13px", 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] }));
+    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: colors.boxborder[200], 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();

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

@@ -1,3 +1,4 @@
+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)))
@@ -23,6 +24,12 @@ function rank(rows, text, tokens) {
         .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();
@@ -48,6 +55,7 @@ export function flattenScreens(sections) {
     }
     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);
@@ -137,8 +145,23 @@ export 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. */
-export function highlightSegments(text, query) {
+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)
@@ -158,15 +181,5 @@ export 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/esm/Components/NavLauncher/searchLayout.js

@@ -0,0 +1,100 @@
+import { SCOPE_ACTIONS, SCOPE_ALL } from "./spotlight.js";
+export const inScope = (groups, scope) => scope === SCOPE_ALL ? groups : groups.filter((g) => g.scope === scope);
+/** A scope's items as passed, unranked, for browsing before typing. */
+export const scopeGroups = (input) => {
+    var _a, _b, _c;
+    const groups = [];
+    if (input.scope === SCOPE_ACTIONS && ((_a = input.actions) === null || _a === void 0 ? void 0 : _a.length)) {
+        groups.push({
+            id: SCOPE_ACTIONS,
+            label: input.actionsLabel,
+            scope: 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;
+};
+export 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(SCOPE_ALL, all);
+    return counts;
+};
+export 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),
+    };
+};
+/** Flat option order for keyboard and ARIA plus per-row group sizes for `moveResult`. */
+export 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 };
+};

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

@@ -0,0 +1,194 @@
+import { createSearchIndex, searchDocuments, searchIndex, usageBoosts, } from "./engine/engine.js";
+export const SCOPE_ALL = "all";
+export const SCOPE_SCREENS = "screens";
+export const SCOPE_ACTIONS = "actions";
+const SHOWN_FIELDS = new Set(["keyword", "fact", "answer"]);
+const RELATIVE_CUTOFF = 0.25;
+const keywordFields = (keywords) => (typeof keywords === "string" ? keywords.split(/[,;|]/) : (keywords !== null && keywords !== void 0 ? keywords : []))
+    .map((k) => k.trim())
+    .filter(Boolean)
+    .map((text) => ({ name: "keyword", text, weight: 0.75 }));
+const label = (text) => ({
+    name: "label",
+    text,
+    weight: 1,
+});
+export const itemFields = (item) => {
+    var _a;
+    return [
+        label(item.label),
+        ...keywordFields(item.keywords),
+        ...(item.context
+            ? [{ name: "context", text: item.context, weight: 0.45 }]
+            : []),
+        ...((_a = item.facts) !== null && _a !== void 0 ? _a : []).map((f) => ({
+            name: "fact",
+            text: `${f.label}: ${f.value}`,
+            weight: 0.6,
+        })),
+        ...(item.answer
+            ? [
+                { name: "answer", text: item.answer.label, weight: 0.9 },
+                { name: "answer", text: item.answer.value, weight: 0.5 },
+            ]
+            : []),
+    ];
+};
+const decorate = (result, hit) => {
+    var _a;
+    return ({
+        ...result,
+        score: hit.score,
+        keywordHint: (_a = hit.matches.find((m) => SHOWN_FIELDS.has(m.field))) === null || _a === void 0 ? void 0 : _a.text,
+    });
+};
+export function createSpotlightIndex(sections, actions, actionsLabel) {
+    var _a;
+    const documents = [];
+    const entries = [];
+    const groups = [];
+    const seen = new Set();
+    const add = (fields, entry) => {
+        documents.push({ id: entry.result.id, fields });
+        entries.push(entry);
+    };
+    for (const section of sections) {
+        const groupId = `section:${section.id}`;
+        groups.push({
+            id: groupId,
+            label: section.label,
+            scope: SCOPE_SCREENS,
+            isSection: true,
+        });
+        for (const module of section.modules) {
+            if (module.screens.length === 0)
+                continue;
+            add([
+                label(module.label),
+                ...keywordFields(module.keywords),
+                { name: "context", text: section.label, weight: 0.35 },
+            ], {
+                groupId,
+                usageId: module.screens[0].id,
+                result: {
+                    id: `module:${module.id}`,
+                    kind: "module",
+                    label: module.label,
+                    icon: module.icon,
+                    badge: module.badge,
+                    isNew: module.isNew,
+                    href: module.href,
+                    screenId: module.screens[0].id,
+                },
+            });
+            for (const screen of module.screens) {
+                if (screen.label === module.label || seen.has(screen.id))
+                    continue;
+                seen.add(screen.id);
+                add([
+                    label(screen.label),
+                    ...keywordFields(screen.keywords),
+                    { name: "context", text: module.label, weight: 0.5 },
+                    { name: "section", text: section.label, weight: 0.3 },
+                ], {
+                    groupId,
+                    usageId: screen.id,
+                    result: {
+                        id: `screen:${screen.id}`,
+                        kind: "screen",
+                        label: screen.label,
+                        context: module.label,
+                        icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon,
+                        badge: screen.badge,
+                        href: screen.href,
+                    },
+                });
+            }
+        }
+    }
+    if (actions === null || actions === void 0 ? void 0 : actions.length) {
+        groups.push({
+            id: SCOPE_ACTIONS,
+            label: actionsLabel,
+            scope: SCOPE_ACTIONS,
+            isSection: false,
+        });
+        for (const action of actions) {
+            add(itemFields(action), {
+                groupId: SCOPE_ACTIONS,
+                result: { ...action, id: `action:${action.id}` },
+            });
+        }
+    }
+    return { index: createSearchIndex(documents), entries, groups };
+}
+export function spotlightBoosts(spot, usage) {
+    const byScreen = usageBoosts(usage);
+    const out = {};
+    spot.entries.forEach((entry) => {
+        const boost = entry.usageId ? byScreen[entry.usageId] : undefined;
+        if (boost)
+            out[entry.result.id] = boost;
+    });
+    return out;
+}
+const searchGroup = (group, query, synonyms) => {
+    const hits = searchDocuments(group.items.map((item) => ({ id: item.id, fields: itemFields(item) })), query, { synonyms });
+    const result = (index) => ({
+        ...group.items[index],
+        id: `${group.id}:${group.items[index].id}`,
+    });
+    if (group.matchLocally)
+        return hits.map((hit) => decorate(result(hit.index), hit));
+    const byIndex = new Map(hits.map((hit) => [hit.index, hit]));
+    return group.items.map((_, index) => {
+        const hit = byIndex.get(index);
+        return hit ? decorate(result(index), hit) : { ...result(index), score: 0 };
+    });
+};
+/** Ranked groups; local rows under 25% of the best score are dropped. */
+export function searchSpotlight(spot, input) {
+    var _a, _b, _c, _d;
+    if (!input.query.trim())
+        return [];
+    const hits = searchIndex(spot.index, input.query, {
+        synonyms: input.synonyms,
+        boosts: input.boosts,
+    });
+    const byGroup = new Map();
+    for (const hit of hits) {
+        const entry = spot.entries[hit.index];
+        const rows = (_a = byGroup.get(entry.groupId)) !== null && _a !== void 0 ? _a : [];
+        rows.push(decorate(entry.result, hit));
+        byGroup.set(entry.groupId, rows);
+    }
+    const groups = spot.groups.map((g) => {
+        var _a;
+        return ({
+            ...g,
+            items: (_a = byGroup.get(g.id)) !== null && _a !== void 0 ? _a : [],
+        });
+    });
+    for (const group of (_b = input.extraResults) !== null && _b !== void 0 ? _b : []) {
+        groups.push({
+            id: group.id,
+            label: group.label,
+            scope: (_c = group.scope) !== null && _c !== void 0 ? _c : group.id,
+            isSection: false,
+            items: searchGroup(group, input.query, input.synonyms),
+        });
+    }
+    const remote = new Set((_d = input.extraResults) === null || _d === void 0 ? void 0 : _d.filter((g) => !g.matchLocally).map((g) => g.id));
+    const floor = RELATIVE_CUTOFF *
+        Math.max(0, ...groups.flatMap((g) => g.items.map((i) => { var _a; return (_a = i.score) !== null && _a !== void 0 ? _a : 0; })));
+    return groups
+        .map((g) => remote.has(g.id)
+        ? g
+        : { ...g, items: g.items.filter((i) => { var _a; return ((_a = i.score) !== null && _a !== void 0 ? _a : 0) >= floor; }) })
+        .filter((g) => g.items.length > 0);
+}
+export function matchAnswers(answers, query, synonyms) {
+    if (!(answers === null || answers === void 0 ? void 0 : answers.length))
+        return [];
+    return searchGroup({ id: "answer", label: "", items: answers, matchLocally: true }, query, synonyms);
+}

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronDown, Search as SearchIcon } from "lucide-react";
+import { useRef } from "react";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Button from "../Button/Button.js";
+import CopyButton from "../CopyButton/CopyButton.js";
+import { KbdShortcut } from "../Kbd/Kbd.js";
+import { activeRowStyle, activeRowSurface, CountBadge, Highlight, useTouchDensity, } from "./launcherParts.js";
+export const QUICK_ACTION_LIMIT = 5;
+const HIDE_ON_TOUCH = { "@media (hover: none)": { display: "none" } };
+export function QuickActionsRow({ items, label, link, onRun, }) {
+    return (_jsx(Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, QUICK_ACTION_LIMIT).map((item) => {
+            const Icon = item.icon;
+            const common = {
+                variant: "outline",
+                colorScheme: "gray",
+                size: "sm",
+                borderRadius: "full",
+                flexShrink: 0,
+                label: item.label,
+                leftIcon: Icon ? (_jsx(Icon, { size: 14, strokeWidth: 2, "aria-hidden": true })) : undefined,
+            };
+            return item.href && !item.run ? (_jsx(Button, { ...common, as: link.linkAs, href: item.href, onClick: link.onPlainClick }, item.id)) : (_jsx(Button, { ...common, onClick: () => onRun(item) }, item.id));
+        }) }));
+}
+const useCardSurface = (isActive) => {
+    const { colors } = useCustomTheme();
+    const { edge, fill } = activeRowStyle(colors);
+    return {
+        position: "relative",
+        borderRadius: "xl",
+        borderWidth: "1px",
+        borderColor: isActive ? edge : colors.boxborder[200],
+        bg: isActive ? fill : colors.surfaceRaised,
+        transition: transitionFor(["background-color", "border-color"]),
+        sx: reducedMotionSx(),
+    };
+};
+function IconChip({ icon, size }) {
+    const { colors } = useCustomTheme();
+    const Icon = icon !== null && icon !== void 0 ? icon : SearchIcon;
+    return (_jsx(Flex, { boxSize: `${size}px`, borderRadius: "10px", bg: colors.primary.opacity[8], color: colors.accentText, align: "center", justify: "center", flexShrink: 0, children: _jsx(Icon, { size: Math.round(size / 2), strokeWidth: 1.8, "aria-hidden": true }) }));
+}
+function CardAnchor({ item, link }) {
+    if (!item.href)
+        return null;
+    return (_jsx(Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "xl" }));
+}
+export function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    const { colors } = useCustomTheme();
+    const surface = useCardSurface(isActive);
+    const meta = [item.context, item.hint].filter(Boolean).join(" · ");
+    return (_jsxs(Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 40 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [_jsx(Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: _jsx(Highlight, { text: item.label, query: query }) }), meta ? (_jsx(Text, { fontSize: "12.5px", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? (_jsxs(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, _jsx(Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), _jsx(CountBadge, { value: item.badge }), _jsx(Box, { "aria-hidden": true, flexShrink: 0, sx: HIDE_ON_TOUCH, children: _jsx(KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+}
+export function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const surface = useCardSurface(isActive);
+    const answer = (_a = item.answer) !== null && _a !== void 0 ? _a : {
+        label: (_b = item.context) !== null && _b !== void 0 ? _b : "",
+        value: item.label,
+    };
+    const acts = Boolean(item.href || item.run);
+    return (_jsxs(Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", flex: 1, minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [_jsx(IconChip, { icon: item.icon, size: 36 }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? (_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, _jsx(Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), _jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "11.5px", color: colors.textMuted, sx: HIDE_ON_TOUCH, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), acts ? labels.hintOpen : labels.hintCopy] })] }), _jsx(CardAnchor, { item: item, link: link })] }));
+}
+export function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
+    const { colors } = useCustomTheme();
+    const isTouch = useTouchDensity();
+    return (_jsxs(Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "12.5px", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: listRowBackgrounds(colors).active }, sx: isActive ? activeRowSurface(colors) : undefined, children: [_jsx(ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+}
+export const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
+export function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
+    const { colors } = useCustomTheme();
+    const values = useRef([]);
+    const isPane = layout === "pane";
+    return (_jsx(Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => (_jsxs(Box, { minW: 0, children: [_jsx(Text, { as: "dt", fontSize: "11.5px", lineHeight: "16px", color: colors.textMuted, children: fact.label }), _jsxs(Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [_jsx(Text, { ref: (node) => {
+                                values.current[i] = node;
+                            }, fontSize: isPane ? "13.5px" : "12.5px", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? (_jsx(CopyButton, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
+}
+export function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }) {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    const isDock = placement === "dock";
+    return (_jsx(Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: colors.boxborder[200], overflowY: "auto", children: item ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { align: "center", gap: "10px", minW: 0, children: [_jsx(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), _jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? (_jsx(Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? (_jsx(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : (_jsxs(Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [_jsx(KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }))] })) : null }));
+}

package/dist/esm/Components/Table/components/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Skeleton, Spinner, Th, Tr } from "@chakra-ui/react";
+import { Box, Spinner, Th, Tr } from "@chakra-ui/react";
 import { memo, useState } from "react";
 import { calculateLeftOffset } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
@@ -8,8 +8,10 @@ import TableFilters from "../filters/TableFilters.js";
 import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
 import { useTableVariant } from "../variants/TableVariantContext.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
 import { DETAIL_SLOT_PX, RowDetailHeaderCell } from "./rowDetail.js";
@@ -32,7 +34,7 @@ const SelectAllCell = memo(({ slotRef, freezedTextColor, noBorders, isSelecting,
 });
 const LoadingHeaderCells = ({ noBorders }) => {
     const variant = useTableVariant();
-    return (_jsx(_Fragment, { children: Array.from({ length: LOADING_PLACEHOLDER_COLUMNS }, (_, i) => (_jsx(Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Skeleton, { height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full", variant: "shine" }) }, i))) }));
+    return (_jsx(_Fragment, { children: Array.from({ length: LOADING_PLACEHOLDER_COLUMNS }, (_, i) => (_jsx(Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: _jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
 };
 const ContentSpacerCell = memo(({ noBorders }) => {
     const variant = useTableVariant();