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

package/dist/Components/NavLauncher/match.js

@@ -0,0 +1,192 @@
+"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)))
+        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);
+}
+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();
+    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. */
+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. */
+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. */
+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)
+        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/Components/NavLauncher/resultNavigation.d.ts

@@ -0,0 +1,3 @@
+export type ResultKey = "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "Home" | "End" | "PageUp" | "PageDown";
+/** Next flat result index for a key, following the visual grid: rows by `columns` inside a group, reading order across columns. */
+export declare const moveResult: (sizes: readonly number[], columns: number, index: number, key: ResultKey, pageRows?: number) => number;

package/dist/Components/NavLauncher/resultNavigation.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveResult = void 0;
+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. */
+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;
+        }
+    }
+};
+exports.moveResult = moveResult;

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

@@ -0,0 +1,4 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** 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 declare const revealStyles: (colors: PaletteProps) => SystemStyleObject;

package/dist/Components/NavLauncher/revealStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.revealStyles = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+/** 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. */
+const revealStyles = (colors) => {
+    const ring = (0, focusRing_styles_1.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" },
+        ...(0, motion_1.reducedMotionSx)(),
+    };
+};
+exports.revealStyles = revealStyles;

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 {};