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

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

@@ -0,0 +1,342 @@
+import type { ElementType, KeyboardEvent, MouseEvent, ReactNode } from "react";
+import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
+import type { LauncherSynonyms } from "./engine";
+/** Rendered as `<Icon size={16} aria-hidden />`, so any lucide-compatible component works. */
+export type LauncherIcon = ElementType;
+/** One destination the launcher can open; screens are what pins, Frequent and Recent refer to. */
+export type LauncherScreen = {
+    /** Unique across all sections; the id that pins, Frequent and Recent refer to. */
+    id: string;
+    /** Row text; also what search matches first. */
+    label: string;
+    /** Destination of the row's link; Enter passes it to `onNavigate`. */
+    href: string;
+    /** Row icon; falls back to the module's icon in search results. */
+    icon?: LauncherIcon;
+    /** Count or short text shown on the row. */
+    badge?: number | string;
+    /** Extra terms the query may match; never rendered. */
+    keywords?: readonly string[];
+    /** Listed on the module's second line (first `keyScreenLimit` of them). */
+    isKey?: boolean;
+};
+/** A group of screens shown as one row in the browse view. */
+export type LauncherModule = {
+    /** Unique across sections. */
+    id: string;
+    /** Row title; also what search matches first. */
+    label: string;
+    /** Normally its first visible screen's href. */
+    href: string;
+    /** Icon beside the title. */
+    icon?: LauncherIcon;
+    /** Count or short text shown on the module row. */
+    badge?: number | string;
+    /** Shows a small "New" tag after the name. */
+    isNew?: boolean;
+    /** Extra terms the query may match; never rendered. */
+    keywords?: readonly string[];
+    /** Pinning the module pins `screens[0]`; a module with no screens is not rendered. */
+    screens: readonly LauncherScreen[];
+};
+/** A labelled run of modules; a section with no renderable module is dropped. */
+export type LauncherSection = {
+    /** Unique key of the section. */
+    id: string;
+    /** Section heading. */
+    label: string;
+    /** Modules in display order; modules with no screens are skipped. */
+    modules: readonly LauncherModule[];
+};
+/** One label/value pair of a result, e.g. PAN: ABCDE1234F; plain text only, never HTML. */
+export type LauncherFact = {
+    /** Name shown before the value, e.g. "PAN". */
+    label: string;
+    /** Text shown, and copied when `copyable`. */
+    value: string;
+    /** Adds a Copy button; a blocked clipboard selects the value instead. */
+    copyable?: boolean;
+};
+/** Direct-answer payload, e.g. label "Next holiday", value "24 Oct — Diwali". */
+export type LauncherAnswer = {
+    /** Heading of the answer card. */
+    label: string;
+    /** The answer itself, shown large; plain text. */
+    value: string;
+    /** Small line under the value. */
+    hint?: string;
+};
+/** A search row that is not a screen: an action (`run`) or an entity result (`href`). */
+export type LauncherSearchItem = {
+    /** Unique within its list; prefixed internally with the group or "action". */
+    id: string;
+    /** Row text; also what search matches first. */
+    label: string;
+    /** Second line, e.g. the module a result belongs to. */
+    context?: string;
+    /** Row icon. */
+    icon?: LauncherIcon;
+    /** Extra terms the query may match; never rendered. Separate phrases with commas. */
+    keywords?: string;
+    /** Short text appended to `context` on the second line, separated by a dot. */
+    hint?: string;
+    /** Destination of an entity result; Enter passes it to `onNavigate`. */
+    href?: string;
+    /** Action to perform; the launcher closes first, then calls it. */
+    run?: () => void;
+    /** Shown in the Preview pane for the active result; searchable in spotlight. */
+    facts?: readonly LauncherFact[];
+    /** Read only for items passed in `answers`: the card's label, value and hint. */
+    answer?: LauncherAnswer;
+};
+/** A titled batch of remote results, rendered after Screens in the order given. */
+export type LauncherResultGroup = {
+    /** Unique key of the group; also its default scope id. */
+    id: string;
+    /** Group heading. */
+    label: string;
+    /** Results in display order. */
+    items: readonly LauncherSearchItem[];
+    /** Scope chip this group belongs to; defaults to `id`. */
+    scope?: string;
+    /** Launcher filters and ranks these items itself; by default they show as given. */
+    matchLocally?: boolean;
+};
+/** A filter chip; "screens" and "actions" are built in, others match `LauncherResultGroup.scope`. */
+export type LauncherScope = {
+    /** "all", "screens", "actions" or a `LauncherResultGroup.scope`. */
+    id: string;
+    /** Chip text. */
+    label: string;
+    /** Field placeholder while this chip is selected, e.g. "Search legal name, PAN, GSTIN…"; the field's accessible name stays `labels.searchPlaceholder`. */
+    placeholder?: string;
+};
+/** "classic": registry order, substring matching; "spotlight": relevance ranking plus a Top hit. */
+export type LauncherSearchMode = "classic" | "spotlight";
+/** Every visible string and accessible name; pass any subset, the rest fall back to English. */
+export type LauncherLabels = {
+    /** Accessible name of the dialog and the results list; no longer drawn as a header pill. */
+    title: string;
+    /** Search field placeholder and accessible name. */
+    searchPlaceholder: string;
+    /** Accessible name of the clear-query button. */
+    clearSearch: string;
+    /** Accessible name of the close button. */
+    close: string;
+    /** Heading of the Pinned section. */
+    pinned: string;
+    /** Message shown in Pinned when nothing is pinned. */
+    pinnedEmpty: string;
+    /** Heading of the Frequently visited section. */
+    frequent: string;
+    /** Heading of the Recent section. */
+    recent: string;
+    /** Name for a Screens result group; NavLauncher does not read it, hosts pass it as `screensLabel` to `searchLauncher`. */
+    screensGroup: string;
+    /** Name of the group holding matching `actions` in search results. */
+    actionsGroup: string;
+    /** Accessible name of a pin button for the named screen, e.g. "Pin Leave". */
+    pin: (label: string) => string;
+    /** Accessible name of an unpin button for the named screen. */
+    unpin: (label: string) => string;
+    /** Accessible name of the new-tab arrow beside the named row. */
+    openInNewTab: (label: string) => string;
+    /** Heading of the empty state for the given query. */
+    noResults: (query: string) => string;
+    /** Line under the empty-state heading when no `suggestions` are given. */
+    noResultsHint: string;
+    /** Empty-state heading while `isSearching` and nothing local matched. */
+    searching: string;
+    /** Accessible name of the skeleton region while `isLoading`. */
+    loading: string;
+    /** Heading of the empty state shown when `sections` has nothing to render. */
+    empty: string;
+    /** Footer hint after the arrow caps; the legend hides below md and on touch. */
+    hintMove: string;
+    /** Hint after ENTER when it opens the active result: footer, answer card, preview pane. */
+    hintOpen: string;
+    /** Footer hint after the mod + ENTER key caps. */
+    hintNewTab: string;
+    /** Footer hint after the P key cap. */
+    hintPin: string;
+    /** Footer hint after the ESC key cap. */
+    hintClose: string;
+    /** @deprecated No longer rendered: the launcher is already open, so the open chord is not shown. */
+    hintOpenMenu?: string;
+    /** Footer hint after the mod key cap for a modified click, e.g. "+ click for new tab". */
+    hintClickNewTab: string;
+    /** Tooltip of the arrow link beside a row. */
+    newTabTip: string;
+    /** Muted count beside the search field and its polite announcement, e.g. "12 results". */
+    resultsCount: (count: number) => string;
+    /** Name of the Menu / Quick access / Apps tab list shown below `lg`. */
+    tabsLabel: string;
+    /** Tab showing every module (below `lg`). */
+    tabMenu: string;
+    /** Tab showing Pinned, Frequently visited and Recent (below `lg`). */
+    tabQuickAccess: string;
+    /** Tab showing the suite's apps (below `lg`). */
+    tabApps: string;
+    /** Heading and list name of the apps section. */
+    apps: string;
+    /** Per-section count shown while searching, e.g. "3 found". */
+    found: (count: number) => string;
+    /** Accessible name of the right-hand quick access rail. */
+    quickAccess: string;
+    /** Tag after a module marked `isNew`. */
+    newBadge: string;
+    /** Noun used in a module's key-screens group name, e.g. "Leave screens". */
+    screens: string;
+    /** Text on the Pin button of Frequently visited rows. */
+    pinShort: string;
+    /** Right-hand footer note. */
+    footerNote: string;
+    /** Line above the suggestion chips of the no-results state. */
+    suggestionsHint: string;
+    /** Tooltip on an unpinned star. */
+    pinTip: string;
+    /** Tooltip on a pinned star. */
+    unpinTip: string;
+    /** Heading of the best-match card in spotlight mode. */
+    topHit?: string;
+    /** Prefix of the Top hit line naming the keyword or fact that matched. */
+    matchedOn?: string;
+    /** Name of the answers group. */
+    answers?: string;
+    /** Hint after ENTER when it copies the active answer: footer, answer card, preview pane. */
+    hintCopy?: string;
+    /** Footer hint after ENTER while a Show more option is active. */
+    hintExpand?: string;
+    /** Name of the scope chip group. */
+    scopes?: string;
+    /** Chip prepended to `scopes` when the list has no "all". */
+    scopeAll?: string;
+    /** Polite announcement when the scope changes. */
+    scopeChanged?: (label: string) => string;
+    /** Accessible name of a chip while a query is active, e.g. "People, 3 results". */
+    scopeCount?: (label: string, count: number) => string;
+    /** Shown when a chip is picked with an empty query and its scope has nothing to list yet. */
+    scopeEmpty?: (label: string) => string;
+    /** Name of the quick actions row. */
+    quickActions?: string;
+    /** Option that expands a collapsed result group. */
+    showMore?: (count: number) => string;
+    /** Name of the preview pane. */
+    preview?: string;
+    /** Accessible name and tooltip of a fact's Copy button. */
+    copy?: (label: string) => string;
+    /** Announced after a copy; shown for 1.5 s in place of the Enter hint. */
+    copied?: string;
+    /** Announcement when the clipboard is blocked and the value was selected instead. */
+    copySelected?: string;
+};
+/** Passed to `onNavigate`; `newTab` is true for mod+Enter. */
+export type LauncherNavigateOptions = {
+    /** True when the open was requested in a new tab (mod+Enter). */
+    newTab: boolean;
+};
+/** Full-height navigation launcher: browse every screen, search, pins, Frequent, Recent and optionally the suite's apps. */
+export interface NavLauncherProps {
+    /** Shows the launcher; the query resets when it closes. */
+    isOpen: boolean;
+    /** Called on Escape with an empty query, the close button, a plain-click navigation, `run` and app selection. */
+    onClose: () => void;
+    /** Already permission-filtered by the app. Empty sections/modules are dropped, never rendered as gaps. */
+    sections: readonly LauncherSection[];
+    /** Screen ids in display order; ids not in `sections` are ignored silently. */
+    pinnedIds: readonly string[];
+    /** Screen ids in display order; pinned ids are skipped and the list is cut at `frequentLimit`. */
+    frequentIds: readonly string[];
+    /** Screen ids in display order; ids not in `sections` are ignored silently. */
+    recentIds: readonly string[];
+    /** Omit to hide every pin toggle (read-only launcher). */
+    onTogglePin?: (screenId: string) => void;
+    /** Keyboard opens only (Enter / mod+Enter); pointer clicks follow the rendered links natively. */
+    onNavigate: (href: string, options: LauncherNavigateOptions) => void;
+    /** Anchor-like component receiving `href`, `target`, `rel`, `onClick`, `ref`. Defaults to `"a"`. */
+    linkAs?: ElementType;
+    /** Command rows matched by search under the Actions group; each has `run` or `href`. */
+    actions?: readonly LauncherSearchItem[];
+    /** Remote results, already filtered by the app; rendered after Screens in the given order. */
+    extraResults?: readonly LauncherResultGroup[];
+    /** Controlled query; omit for uncontrolled. Reset to "" on close either way. */
+    query?: string;
+    /** Fires on every change, including the reset on close. */
+    onQueryChange?: (query: string) => void;
+    /** Remote search in flight: shows the searching state when nothing local matched. */
+    isSearching?: boolean;
+    /** Sections not known yet (access loading): skeleton browse view. */
+    isLoading?: boolean;
+    /** Defaults to 3. */
+    keyScreenLimit?: number;
+    /** Most Frequently visited rows shown (pinned ones are skipped); defaults to 4. */
+    frequentLimit?: number;
+    /** Query chips offered by the no-results state; clicking one sets the query. */
+    suggestions?: readonly string[];
+    /** Key cap shown at the end of the search field, e.g. "/" when the app opens the launcher with it. */
+    searchHint?: string;
+    /** @deprecated No longer rendered: the launcher is already open. Cmd/Ctrl+K and "/" now focus the search field while it is open. */
+    openShortcutHint?: string;
+    /** Replaces the modifier cap of the mod+Enter hint; defaults to "⌘" on Apple platforms, "Ctrl" elsewhere. */
+    modKeyLabel?: string;
+    /** Rendered just before the close button, e.g. a help or customise icon button; the dialog name stays `labels.title` whatever is here. */
+    headerActions?: ReactNode;
+    /** Panel width at `lg`+; always full width below `lg`. Defaults to "1080px". */
+    maxWidth?: string;
+    /** Overrides for any `LauncherLabels` key; unset keys keep their English default. */
+    labels?: Partial<LauncherLabels>;
+    /** Other Pixelize apps, shown as an "Apps" section at the bottom of the right rail. Same shape as AppSwitcher. */
+    apps?: AppOption[];
+    /** The app this UI runs inside: its row is marked and never a link. */
+    currentAppId?: string;
+    /** Same contract as AppSwitcher.onSelect; preventDefault keeps the app's own routing. */
+    onAppSelect?: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
+    /** Default "apps-on-compact": the section shows only below `md`, where the 9-dot is usually hidden. */
+    appsVisibility?: "always" | "apps-on-compact";
+    /** Default "classic"; "spotlight" adds typo-tolerant ranking, synonyms, usage boosts and a Top hit. */
+    searchMode?: LauncherSearchMode;
+    /** Spotlight only: equivalent terms, both directions, e.g. `{ pf: ["provident fund"] }`. */
+    synonyms?: LauncherSynonyms;
+    /** Filter chips in the header row (their own row below `md`), always shown, with live counts while a query is active; "all" is prepended unless listed. A chip other than All or Screens picked with an empty query lists that scope's items. */
+    scopes?: readonly LauncherScope[];
+    /** Controlled scope id; omit for uncontrolled ("all", reset on close). */
+    activeScope?: string;
+    /** Called with the new scope id whenever the user picks a chip, controlled or not. */
+    onScopeChange?: (scope: string) => void;
+    /** Up to 5 pill buttons at the top of the menu while the query is empty and the scope is All; each runs or links like an action. */
+    quickActions?: readonly LauncherSearchItem[];
+    /** Direct answers, matched against the query and shown above every result. */
+    answers?: readonly LauncherSearchItem[];
+    /** Rows per group before "Show N more"; default 5 in spotlight, unlimited in classic. */
+    groupLimit?: number;
+    /** Test id on the drawer content. */
+    "data-testid"?: string;
+}
+/** Props for the star pin toggle used on launcher rows and reusable on a landing page; shows only while its row is hovered or focused. */
+export interface PinToggleProps {
+    /** Draws the star filled when true. */
+    isPinned: boolean;
+    /** Accessible name and tooltip, e.g. "Pin Leave". */
+    label: string;
+    /** Called when the star is pressed. */
+    onToggle: () => void;
+    /** Tooltip text; defaults to `label`. */
+    title?: string;
+    /** Star size in px; defaults to 13. */
+    size?: number;
+    /** Pass -1 where the row itself is the tab stop. */
+    tabIndex?: number;
+}
+/** Props for the small "open in new tab" anchor beside a launcher row. */
+export interface NewTabLinkProps {
+    /** Link target, opened in a new tab. */
+    href: string;
+    /** Accessible name, e.g. "Open Leave in a new tab". */
+    label: string;
+    /** Visible tooltip text; defaults to `label`. */
+    tip?: string;
+    /** Anchor-like component receiving `href`, `target`, `rel`; defaults to `"a"`. */
+    linkAs?: ElementType;
+    /** Pass -1 where the row itself is the tab stop. */
+    tabIndex?: number;
+}

package/dist/Components/NavLauncher/NavLauncherProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,3 @@
+import type { NewTabLinkProps } from "./NavLauncherProps";
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+export default function NewTabLink({ href, label, tip, linkAs, tabIndex, }: NewTabLinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/NewTabLink.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = NewTabLink;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const revealStyles_1 = require("./revealStyles");
+/** "Open in a new tab" anchor with a tooltip; visible on row hover, keyboard-active or focus-within, or its own focus. */
+function NewTabLink({ href, label, tip, linkAs = "a", tabIndex, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: tip !== null && tip !== void 0 ? tip : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: linkAs, href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": label, tabIndex: tabIndex, display: "inline-flex", alignItems: "center", justifyContent: "center", w: "22px", h: "22px", flexShrink: 0, borderRadius: "md", color: colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), _hover: { bg: colors.backgroundColor.subtle }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { size: 13, "aria-hidden": true }) }) }));
+}

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

@@ -0,0 +1,3 @@
+import type { PinToggleProps } from "./NavLauncherProps";
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+export default function PinToggle({ isPinned, label, onToggle, title, size, tabIndex }: PinToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavLauncher/PinToggle.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PinToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const revealStyles_1 = require("./revealStyles");
+const STAR = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z";
+function Star({ filled, size }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinejoin: "round", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: STAR }) }));
+}
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+function PinToggle({ isPinned, label, onToggle, title, size = 13, tabIndex }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": isPinned, title: title !== null && title !== void 0 ? title : label, icon: (0, jsx_runtime_1.jsx)(Star, { filled: isPinned, size: size }), variant: "ghost", minW: "22px", w: "22px", h: "22px", borderRadius: "md", tabIndex: tabIndex, color: isPinned ? colors.accentText : colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        } }));
+}

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

@@ -0,0 +1,14 @@
+export type ScopeChip = {
+    id: string;
+    label: string;
+    count?: number;
+};
+type ScopeBarProps = {
+    scopes: readonly ScopeChip[];
+    value: string;
+    onChange: (scope: string) => void;
+    label: string;
+    countLabel: (label: string, count: number) => string;
+};
+export declare function ScopeBar({ scopes, value, onChange, label, countLabel, }: ScopeBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/ScopeBar.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScopeBar = ScopeBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const EDGE = 36;
+const MAX_COUNT = 99;
+const STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+const HIDDEN_SCROLLBAR = {
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": { display: "none" },
+};
+const NO_EDGES = { start: false, end: false };
+const fadeMask = ({ start, end }) => start || end
+    ? `linear-gradient(to right, ${start ? "transparent" : "black"}, black ${EDGE}px, black calc(100% - ${EDGE}px), ${end ? "transparent" : "black"})`
+    : "none";
+function PageArrow({ side, onPage, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = side === "start" ? lucide_react_1.ChevronLeft : lucide_react_1.ChevronRight;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", tabIndex: -1, "aria-hidden": true, "data-testid": `launcher-scopes-${side}`, onMouseDown: (event) => event.preventDefault(), onClick: onPage, position: "absolute", top: "50%", left: side === "start" ? 0 : undefined, right: side === "end" ? 0 : undefined, transform: "translateY(-50%)", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "28px", borderRadius: "full", borderWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, boxShadow: `0 1px 3px ${colors.boxShadow.default}`, color: colors.textMuted, cursor: "pointer", _hover: { color: colors.text[900] }, sx: { "@media (hover: none)": { display: "none" } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) }));
+}
+function ScopeBar({ scopes, value, onChange, label, countLabel, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const stripRef = (0, react_2.useRef)(null);
+    const chipRefs = (0, react_2.useRef)([]);
+    const [edges, setEdges] = (0, react_2.useState)(NO_EDGES);
+    const reduced = (0, motion_1.usePrefersReducedMotion)();
+    const selected = Math.max(0, scopes.findIndex((scope) => scope.id === value));
+    const layoutKey = scopes.map((s) => { var _a; return `${s.id}:${(_a = s.count) !== null && _a !== void 0 ? _a : ""}`; }).join("|");
+    const edge = (0, outlineRung_1.liftToContrast)(colors.primary[500], colors.surfaceRaised, outlineRung_1.AA_NON_TEXT);
+    const rule = (0, surfaceRaised_1.raisedRule)(colors);
+    const measure = (0, react_2.useCallback)(() => {
+        const strip = stripRef.current;
+        if (!strip)
+            return;
+        const start = strip.scrollLeft > 1;
+        const end = strip.scrollLeft + strip.clientWidth < strip.scrollWidth - 1;
+        setEdges((prev) => prev.start === start && prev.end === end ? prev : { start, end });
+    }, []);
+    (0, react_2.useEffect)(() => {
+        const strip = stripRef.current;
+        if (!strip || typeof ResizeObserver === "undefined")
+            return undefined;
+        const observer = new ResizeObserver(measure);
+        observer.observe(strip);
+        if (strip.firstElementChild)
+            observer.observe(strip.firstElementChild);
+        return () => observer.disconnect();
+    }, [measure]);
+    (0, react_2.useEffect)(() => {
+        const strip = stripRef.current;
+        const chip = chipRefs.current[selected];
+        if (strip && chip) {
+            const from = chip.offsetLeft - EDGE;
+            const to = chip.offsetLeft + chip.offsetWidth + EDGE - strip.clientWidth;
+            if (from < strip.scrollLeft)
+                strip.scrollLeft = Math.max(0, from);
+            else if (to > strip.scrollLeft)
+                strip.scrollLeft = to;
+        }
+        measure();
+    }, [selected, layoutKey, measure]);
+    const onKeyDown = (event) => {
+        var _a;
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const step = STEPS[event.key];
+        const last = scopes.length - 1;
+        const next = step !== undefined
+            ? (selected + step + scopes.length) % scopes.length
+            : event.key === "Home"
+                ? 0
+                : event.key === "End"
+                    ? last
+                    : -1;
+        if (next < 0)
+            return;
+        event.preventDefault();
+        (_a = chipRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        onChange(scopes[next].id);
+    };
+    const onWheel = (event) => {
+        const strip = event.currentTarget;
+        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
+            return;
+        if (strip.scrollWidth > strip.clientWidth)
+            strip.scrollLeft += event.deltaY;
+    };
+    const page = (direction) => {
+        const strip = stripRef.current;
+        if (!strip)
+            return;
+        const step = Math.max(strip.clientWidth - EDGE * 2, EDGE);
+        const max = Math.max(0, strip.scrollWidth - strip.clientWidth);
+        const left = Math.min(max, Math.max(0, strip.scrollLeft + direction * step));
+        if (reduced || typeof strip.scrollTo !== "function")
+            strip.scrollLeft = left;
+        else
+            strip.scrollTo({ left, behavior: "smooth" });
+    };
+    const mask = fadeMask(edges);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", minW: 0, flexShrink: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { ref: stripRef, "data-testid": "launcher-scopes", overflowX: "auto", overflowY: "hidden", onScroll: measure, onWheel: onWheel, sx: { ...HIDDEN_SCROLLBAR, maskImage: mask, WebkitMaskImage: mask }, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { role: "radiogroup", "aria-label": label, onKeyDown: onKeyDown, gap: "6px", w: "max-content", p: "5px", children: scopes.map((scope, index) => {
+                        var _a, _b;
+                        const isSelected = index === selected;
+                        const hasCount = scope.count !== undefined;
+                        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", ref: (node) => {
+                                chipRefs.current[index] = node;
+                            }, role: "radio", "aria-checked": isSelected, "aria-label": hasCount
+                                ? countLabel(scope.label, (_a = scope.count) !== null && _a !== void 0 ? _a : 0)
+                                : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onChange(scope.id), display: "inline-flex", alignItems: "center", gap: "6px", flexShrink: 0, h: "32px", pl: "12px", pr: hasCount ? "6px" : "12px", borderRadius: "full", borderWidth: "1px", borderColor: isSelected ? edge : rule, bg: isSelected ? colors.primary[50] : colors.surfaceRaised, color: isSelected ? colors.accentText : colors.textMuted, fontSize: "xs-plus", fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", cursor: "pointer", transition: (0, motion_2.transitionFor)([
+                                "background-color",
+                                "border-color",
+                                "color",
+                            ]), _hover: isSelected
+                                ? undefined
+                                : {
+                                    bg: (0, rowStates_1.listRowBackgrounds)(colors).active,
+                                    color: colors.text[900],
+                                }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_1.reducedMotionSx)() }, children: [scope.label, hasCount ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", minW: "20px", h: "20px", px: "6px", borderRadius: "full", bg: isSelected
+                                        ? colors.surfaceRaised
+                                        : colors.backgroundColor.subtle, fontSize: "11.5px", fontWeight: 600, display: "inline-flex", alignItems: "center", justifyContent: "center", sx: { fontVariantNumeric: "tabular-nums" }, children: ((_b = scope.count) !== null && _b !== void 0 ? _b : 0) > MAX_COUNT
+                                        ? `${MAX_COUNT}+`
+                                        : scope.count })) : null] }, scope.id));
+                    }) }) }), edges.start ? (0, jsx_runtime_1.jsx)(PageArrow, { side: "start", onPage: () => page(-1) }) : null, edges.end ? (0, jsx_runtime_1.jsx)(PageArrow, { side: "end", onPage: () => page(1) }) : null] }));
+}

package/dist/Components/NavLauncher/engine/distance.d.ts

@@ -0,0 +1,4 @@
+/** Characters of a string, or the written letters of one (see `letters`). */
+export type Sequence = string | readonly string[];
+/** Damerau-Levenshtein (optimal string alignment) distance; returns `max + 1` once it exceeds `max`. */
+export declare const editDistance: (a: Sequence, b: Sequence, max: number) => number;

package/dist/Components/NavLauncher/engine/distance.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editDistance = void 0;
+/** Damerau-Levenshtein (optimal string alignment) distance; returns `max + 1` once it exceeds `max`. */
+const editDistance = (a, b, max) => {
+    if (a === b)
+        return 0;
+    const la = a.length;
+    const lb = b.length;
+    if (Math.abs(la - lb) > max)
+        return max + 1;
+    if (la === 0 || lb === 0)
+        return Math.max(la, lb);
+    let before = new Int32Array(lb + 1);
+    let prev = new Int32Array(lb + 1);
+    let cur = new Int32Array(lb + 1);
+    for (let j = 0; j <= lb; j += 1)
+        prev[j] = j;
+    for (let i = 1; i <= la; i += 1) {
+        cur[0] = i;
+        let rowMin = i;
+        for (let j = 1; j <= lb; j += 1) {
+            const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+            let value = Math.min(prev[j] + 1, cur[j - 1] + 1, prev[j - 1] + cost);
+            if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) {
+                value = Math.min(value, before[j - 2] + 1);
+            }
+            cur[j] = value;
+            if (value < rowMin)
+                rowMin = value;
+        }
+        if (rowMin > max)
+            return max + 1;
+        const spare = before;
+        before = prev;
+        prev = cur;
+        cur = spare;
+    }
+    return Math.min(prev[lb], max + 1);
+};
+exports.editDistance = editDistance;