@meshmakers/shared-ui 3.4.1480 → 3.5.0

package/fesm2022/meshmakers-shared-ui-command-palette.mjs

@@ -0,0 +1,817 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, signal, Injectable, input, DestroyRef, viewChild, effect, untracked, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { NotificationDisplayService } from '@meshmakers/shared-ui';
+import { of, defer, timer, combineLatest, BehaviorSubject } from 'rxjs';
+import { map, switchMap, catchError, startWith, distinctUntilChanged } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { SVGIconComponent } from '@progress/kendo-angular-icons';
+
+/** Multi-provider token for the palette sources: `{ provide: PALETTE_PROVIDERS, useClass: MyProvider, multi: true }`. */
+const PALETTE_PROVIDERS = new InjectionToken('PALETTE_PROVIDERS');
+const PALETTE_RECENT_ITEMS_SOURCE = new InjectionToken('PALETTE_RECENT_ITEMS_SOURCE');
+
+const DEFAULT_COMMAND_PALETTE_MESSAGES = {
+    dialogLabel: 'Command palette',
+    inputLabel: 'Search pages, entities, boards, tenants and commands',
+    placeholder: 'Search pages, entities, boards…',
+    cancel: 'Cancel',
+    results: 'Results',
+    actionsFor: 'Actions for {label}',
+    actionsHeader: '{label} · Actions',
+    tabForActions: 'Tab: actions',
+    oneResult: '1 result',
+    manyResults: '{count} results',
+    noResultsFor: 'No results for “{text}”',
+    typeToSearch: 'Type to search',
+    footerMove: 'move',
+    footerOpen: 'open',
+    footerNewTab: 'new tab',
+    footerActions: 'actions',
+    prefixActions: 'actions',
+    prefixEntities: 'entities',
+    prefixBoards: 'boards',
+    prefixTenants: 'tenants',
+    groupRecent: 'Recent',
+    groupPage: 'Pages',
+    groupAction: 'Actions',
+    groupEntity: 'Entities',
+    groupBoard: 'Boards',
+    groupTenant: 'Tenants',
+    groupAi: 'Assistant',
+    copied: '{label} copied',
+    copyFailed: 'Failed to copy to clipboard',
+};
+/** App-wide translations of the command palette (partial). */
+const COMMAND_PALETTE_MESSAGES = new InjectionToken('COMMAND_PALETTE_MESSAGES');
+/** Merges overrides over {@link DEFAULT_COMMAND_PALETTE_MESSAGES}, later sources winning; null/undefined members are ignored. */
+function resolveCommandPaletteMessages(...overrides) {
+    const resolved = { ...DEFAULT_COMMAND_PALETTE_MESSAGES };
+    for (const messages of overrides) {
+        if (!messages) {
+            continue;
+        }
+        for (const key of Object.keys(messages)) {
+            const value = messages[key];
+            if (value !== undefined && value !== null) {
+                resolved[key] = value;
+            }
+        }
+    }
+    return resolved;
+}
+/** Replaces `{name}` placeholders; unknown placeholders stay as they are. */
+function formatCommandPaletteMessage(message, values) {
+    return message.replace(/\{(\w+)\}/g, (match, key) => Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : match);
+}
+/** The group header of a result group. */
+function paletteGroupLabel(group, messages) {
+    switch (group) {
+        case 'recent': return messages.groupRecent;
+        case 'page': return messages.groupPage;
+        case 'action': return messages.groupAction;
+        case 'entity': return messages.groupEntity;
+        case 'board': return messages.groupBoard;
+        case 'tenant': return messages.groupTenant;
+        case 'ai': return messages.groupAi;
+    }
+}
+/**
+ * {@link COMMAND_PALETTE_MESSAGES} merged with a component input (the input wins).
+ * Call it in an injection context.
+ * @internal
+ */
+function commandPaletteMessages(input) {
+    const injected = inject(COMMAND_PALETTE_MESSAGES, { optional: true });
+    return computed(() => resolveCommandPaletteMessages(injected, input()));
+}
+
+/**
+ * Opens and closes the command palette (Cmd/Ctrl+K). The host (AppComponent) renders
+ * the overlay and binds the global hotkey; anything else — the top bar's
+ * "Search ⌘K" trigger, a Home tile, an empty state — calls {@link open}.
+ *
+ * Focus returns to the element that had it when the palette opened.
+ */
+class CommandPaletteService {
+    _isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    _request = signal({ query: '' }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_request" }] : /* istanbul ignore next */ []));
+    returnFocusTo = null;
+    /** Whether the palette is shown. */
+    isOpen = this._isOpen.asReadonly();
+    /** The latest open request; the palette adopts its query (also while already open). */
+    request = this._request.asReadonly();
+    /**
+     * Shows the palette. `initialQuery` pre-fills the input, e.g. `'>'` for
+     * actions or `'/'` for the tenant list. Calling it while open replaces the query.
+     */
+    open(initialQuery = '') {
+        if (!this._isOpen()) {
+            const active = document.activeElement;
+            this.returnFocusTo = active instanceof HTMLElement && active !== document.body ? active : null;
+        }
+        this._request.set({ query: initialQuery });
+        this._isOpen.set(true);
+    }
+    /** Hides the palette and gives focus back to where it was. */
+    close() {
+        if (!this._isOpen()) {
+            return;
+        }
+        this._isOpen.set(false);
+        const target = this.returnFocusTo;
+        this.returnFocusTo = null;
+        if (target?.isConnected) {
+            target.focus();
+        }
+    }
+    /** Opens when closed, closes when open. */
+    toggle(initialQuery = '') {
+        if (this._isOpen()) {
+            this.close();
+        }
+        else {
+            this.open(initialQuery);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CommandPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CommandPaletteService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CommandPaletteService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Maps a document keydown to a palette action (ui-concept §4.3):
+ *
+ * - Cmd+K (macOS) / Ctrl+K toggles — except inside a Monaco code editor,
+ *   whose own Cmd+K chords (comment, format …) must keep working;
+ * - `/` opens when no text field, text role, grid or Kendo widget is focused;
+ * - everything else, and events another handler already consumed, is ignored.
+ */
+function paletteHotkeyAction(event, isOpen) {
+    if (event.defaultPrevented || event.isComposing) {
+        return null;
+    }
+    const key = event.key?.toLowerCase();
+    const target = event.target instanceof Element ? event.target : null;
+    if (key === 'k' && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
+        return target?.closest('.monaco-editor') ? null : 'toggle';
+    }
+    if (event.key === '/' && !isOpen && !event.metaKey && !event.ctrlKey && !event.altKey && !isEditable(target)) {
+        return 'open';
+    }
+    return null;
+}
+/**
+ * Targets where `/` is typed or means something else: text fields, ARIA text
+ * roles, grids (Kendo grid keyboard navigation) and Kendo widgets.
+ */
+const TEXT_ENTRY_SELECTOR = [
+    'input', 'textarea', 'select', '[contenteditable=""]', '[contenteditable="true"]',
+    '[role="combobox"]', '[role="textbox"]', '[role="searchbox"]', '[role="spinbutton"]',
+    '[role="grid"]', '[role="gridcell"]', '[role="treegrid"]',
+    '.k-grid', 'kendo-grid', '.k-input', '.k-widget', '.monaco-editor'
+].join(', ');
+function isEditable(element) {
+    if (!element) {
+        return false;
+    }
+    if (element instanceof HTMLElement && element.isContentEditable) {
+        return true;
+    }
+    return element.closest(TEXT_ENTRY_SELECTOR) !== null;
+}
+
+/**
+ * Navigation and clipboard helpers shared by the palette providers. All
+ * palette targets are absolute router URLs (`/<tenant>/…`), so a result
+ * behaves the same whichever page the palette was opened on.
+ */
+class PaletteNavigationService {
+    router = inject(Router);
+    notifications = inject(NotificationDisplayService);
+    messages = resolveCommandPaletteMessages(inject(COMMAND_PALETTE_MESSAGES, { optional: true }));
+    /** The tenant of the current URL (first path segment), or null outside a tenant. */
+    currentTenantId() {
+        const path = (this.router.url ?? '').split('#')[0].split('?')[0];
+        const first = path.split('/').find(segment => segment.length > 0);
+        return first ? decodeURIComponent(first.split(';')[0]) : null;
+    }
+    /**
+     * Turns a command link into an absolute URL: links starting with `/` are
+     * absolute already, all others are relative to the tenant (as the drawer
+     * resolves them via `navigateRelativeToRoute`).
+     */
+    tenantUrl(link) {
+        if (link.startsWith('/')) {
+            return link;
+        }
+        const tenantId = this.currentTenantId();
+        const relative = link.replace(/^\.?\/?/, '');
+        return tenantId ? `/${encodeURIComponent(tenantId)}${relative ? '/' + relative : ''}` : `/${relative}`;
+    }
+    /** Opens an absolute router URL in place or in a new browser tab. */
+    async open(url, mode = 'open') {
+        if (mode === 'newTab') {
+            window.open(this.toHref(url), '_blank', 'noopener');
+            return;
+        }
+        await this.router.navigateByUrl(url);
+    }
+    /** Opens an external link (href) in a new tab, as the drawer does. */
+    openExternal(href, target = '_blank') {
+        window.open(href, target, 'noopener,noreferrer');
+    }
+    /** Copies a value and confirms it with a short notification. */
+    async copy(value, label) {
+        try {
+            await navigator.clipboard.writeText(value);
+            this.notifications.showSuccess(formatCommandPaletteMessage(this.messages.copied, { label }), 2000);
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+            this.notifications.showError(this.messages.copyFailed);
+        }
+    }
+    toHref(url) {
+        try {
+            return new URL(`.${url}`, document.baseURI).href;
+        }
+        catch {
+            return url;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PaletteNavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PaletteNavigationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: PaletteNavigationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Typed prefixes that force a group (ui-concept §4.2 rule 4). */
+const PALETTE_PREFIXES = {
+    '>': 'action',
+    '@': 'entity',
+    '#': 'board',
+    '/': 'tenant',
+    '?': 'ai'
+};
+/**
+ * Splits the raw input into an optional scope and the search text:
+ * `"> theme"` → scope `action`, text `theme`; `"edge"` → no scope.
+ * Only the first non-blank character counts as a prefix.
+ */
+function parsePaletteQuery(raw) {
+    const trimmed = (raw ?? '').trim();
+    const first = trimmed.charAt(0);
+    const scope = PALETTE_PREFIXES[first] ?? null;
+    if (scope) {
+        return { raw, prefix: first, scope, text: trimmed.slice(1).trim() };
+    }
+    return { raw, prefix: null, scope: null, text: trimmed };
+}
+/** A runtime id: 24 hex characters (MongoDB ObjectId). */
+function isRtId(text) {
+    return /^[0-9a-f]{24}$/i.test(text);
+}
+
+/**
+ * Runs every provider for every query and merges their rows.
+ *
+ * - A provider whose groups do not include the query's scope is skipped (its rows clear at once).
+ * - A new query cancels the provider's running search (`switchMap` unsubscribes).
+ * - Providers with `debounceMs` start only after the query stood still that long; until
+ *   then their previous rows stay, so remote results do not flicker away while typing
+ *   (the ranking drops rows that no longer match).
+ * - An error drops only that provider's rows.
+ *
+ * The output emits on every provider answer, so local rows show immediately
+ * and remote rows stream in.
+ */
+function searchProviders(providers, query$) {
+    if (providers.length === 0) {
+        return query$.pipe(map(() => []));
+    }
+    const streams = providers.map(provider => query$.pipe(switchMap(query => {
+        if (query.scope && !provider.groups.includes(query.scope)) {
+            return of([]);
+        }
+        const search$ = defer(() => provider.search(query)).pipe(catchError(error => {
+            console.warn(`Command palette provider '${provider.id}' failed:`, error);
+            return of([]);
+        }));
+        return provider.debounceMs ? timer(provider.debounceMs).pipe(switchMap(() => search$)) : search$;
+    }), startWith([])));
+    return combineLatest(streams).pipe(map(lists => lists.flat()));
+}
+
+/** Match tiers: prefix > word-start > subsequence (ui-concept §4.2 rule 2). */
+var MatchTier;
+(function (MatchTier) {
+    MatchTier[MatchTier["None"] = 0] = "None";
+    MatchTier[MatchTier["Fuzzy"] = 1] = "Fuzzy";
+    MatchTier[MatchTier["WordStart"] = 2] = "WordStart";
+    MatchTier[MatchTier["Prefix"] = 3] = "Prefix";
+})(MatchTier || (MatchTier = {}));
+const TIER_WEIGHT = 100;
+/** A keyword/path/id match counts like a label match of the same tier minus this. */
+const SECONDARY_PENALTY = 40;
+/** Frecency adds at most this — less than the gap between tiers, so it only orders within a tier. */
+const FRECENCY_WEIGHT = 30;
+/** `rankBoost` (pinned boards) adds at most this: more than any frecency, so pinned rows lead; both together stay below the tier gap. */
+const RANK_BOOST_WEIGHT = 35;
+const EXACT_MATCH_SCORE = 10_000;
+/** Short queries (≤ 3 chars) list pages and actions first, longer ones entities (§4.2 rule 3). */
+const SHORT_QUERY_ORDER = ['recent', 'page', 'action', 'entity', 'board', 'tenant', 'ai'];
+const LONG_QUERY_ORDER = ['entity', 'page', 'board', 'action', 'tenant', 'recent', 'ai'];
+/** Rows per group: a few for an empty query, more for a search, many when scoped by a prefix. */
+const LIMIT_EMPTY = 6;
+const LIMIT_SEARCH = 8;
+const LIMIT_SCOPED = 50;
+/** How well `text` matches `query` (both compared case-insensitively). */
+function matchTier(text, query) {
+    if (!text || !query) {
+        return MatchTier.None;
+    }
+    const haystack = text.toLowerCase();
+    const needle = query.toLowerCase();
+    if (haystack.startsWith(needle)) {
+        return MatchTier.Prefix;
+    }
+    if (haystack.split(/[\s/.\-_:›,()]+/).some(word => word.startsWith(needle))) {
+        return MatchTier.WordStart;
+    }
+    let index = 0;
+    for (const char of haystack) {
+        if (char === needle[index]) {
+            index++;
+            if (index === needle.length) {
+                return MatchTier.Fuzzy;
+            }
+        }
+    }
+    return MatchTier.None;
+}
+/**
+ * Score of one result for a query: 0 means "does not match". `frecency` is
+ * the normalised (0…1) frecency of the result's recent key.
+ */
+function scoreResult(result, text, frecency = 0) {
+    const boost = Math.max(0, Math.min(1, frecency)) * FRECENCY_WEIGHT
+        + Math.max(0, Math.min(1, result.rankBoost ?? 0)) * RANK_BOOST_WEIGHT;
+    if (result.exactMatch) {
+        return EXACT_MATCH_SCORE + boost;
+    }
+    if (!text) {
+        return 1 + boost;
+    }
+    const labelTier = matchTier(result.label, text);
+    const secondary = [...(result.keywords ?? []), ...(result.path ?? []), result.typeHint]
+        .reduce((best, candidate) => Math.max(best, matchTier(candidate, text)), MatchTier.None);
+    const labelScore = labelTier * TIER_WEIGHT;
+    const secondaryScore = secondary > MatchTier.None ? secondary * TIER_WEIGHT - SECONDARY_PENALTY : 0;
+    const base = Math.max(labelScore, secondaryScore);
+    if (base === 0) {
+        return result.alwaysShow ? 1 : 0;
+    }
+    return base + boost;
+}
+/**
+ * Orders the rows of all providers into sections. Pure: the same input gives
+ * the same output, so the palette can re-rank whenever a provider streams in
+ * without the list jumping around for unchanged rows.
+ *
+ * - non-matching rows are dropped (except `alwaysShow`),
+ * - rows sort by score within their group, ties by label,
+ * - groups follow the short/long query order; a group holding an exact id match goes first,
+ * - the assistant row (group `ai`) always stays last.
+ */
+function rankResults(results, query, frecencyOf = () => 0) {
+    const text = query.text;
+    const scored = new Map();
+    const seen = new Set();
+    for (const result of results) {
+        if (seen.has(result.id)) {
+            continue;
+        }
+        seen.add(result.id);
+        const frecency = result.recentKey ? frecencyOf(result.recentKey) : 0;
+        const score = scoreResult(result, text, frecency);
+        if (score <= 0) {
+            continue;
+        }
+        const bucket = scored.get(result.group) ?? [];
+        bucket.push({ result, score });
+        scored.set(result.group, bucket);
+    }
+    const limit = query.scope ? LIMIT_SCOPED : text ? LIMIT_SEARCH : LIMIT_EMPTY;
+    const order = text.length <= 3 ? SHORT_QUERY_ORDER : LONG_QUERY_ORDER;
+    const groups = [];
+    for (const [group, bucket] of scored) {
+        bucket.sort((a, b) => b.score - a.score || a.result.label.localeCompare(b.result.label));
+        groups.push({
+            group,
+            exact: bucket.some(entry => entry.result.exactMatch === true),
+            results: bucket.slice(0, limit).map(entry => entry.result)
+        });
+    }
+    groups.sort((a, b) => {
+        if (a.group === 'ai' || b.group === 'ai') {
+            return a.group === 'ai' ? 1 : -1;
+        }
+        if (a.exact !== b.exact) {
+            return a.exact ? -1 : 1;
+        }
+        return order.indexOf(a.group) - order.indexOf(b.group);
+    });
+    return groups.map(({ group, results: rows }) => ({ group, results: rows }));
+}
+/** Splits a label into plain and highlighted parts for the first case-insensitive occurrence of `text`. */
+function highlightSegments(label, text) {
+    if (!text) {
+        return [{ text: label, match: false }];
+    }
+    const index = label.toLowerCase().indexOf(text.toLowerCase());
+    if (index < 0) {
+        return [{ text: label, match: false }];
+    }
+    return [
+        { text: label.slice(0, index), match: false },
+        { text: label.slice(index, index + text.length), match: true },
+        { text: label.slice(index + text.length), match: false }
+    ].filter(segment => segment.text.length > 0);
+}
+/**
+ * Keeps what the user already sees in place while results stream in for the
+ * SAME query (ui-concept §4.2 rule 5): groups already shown keep their
+ * position and new groups are appended below them (the assistant row stays
+ * last); inside a group, rows already shown keep their order and late rows
+ * are appended. Rows a provider no longer returns disappear. For a new query
+ * the fresh ranking is used as is.
+ */
+function stabilizeRanking(previous, next) {
+    if (previous.length === 0) {
+        return [...next];
+    }
+    const nextByGroup = new Map(next.map(section => [section.group, section]));
+    const ordered = [];
+    for (const old of previous) {
+        const fresh = nextByGroup.get(old.group);
+        if (!fresh || old.group === 'ai') {
+            continue;
+        }
+        const freshIds = new Set(fresh.results.map(result => result.id));
+        const freshById = new Map(fresh.results.map(result => [result.id, result]));
+        const kept = old.results.filter(result => freshIds.has(result.id)).map(result => freshById.get(result.id));
+        const keptIds = new Set(kept.map(result => result.id));
+        ordered.push({ group: old.group, results: [...kept, ...fresh.results.filter(result => !keptIds.has(result.id))] });
+        nextByGroup.delete(old.group);
+    }
+    for (const section of next) {
+        if (nextByGroup.has(section.group) && section.group !== 'ai') {
+            ordered.push(section);
+        }
+    }
+    const ai = nextByGroup.get('ai') ?? next.find(section => section.group === 'ai');
+    if (ai) {
+        ordered.push(ai);
+    }
+    return ordered;
+}
+
+/**
+ * The command palette overlay (Cmd/Ctrl+K, ui-concept §4). Render it only while
+ * {@link CommandPaletteService.isOpen} — one component instance is one palette session:
+ *
+ * ```html
+ * @if (commandPalette.isOpen()) { <mm-command-palette /> }
+ * ```
+ *
+ * Results come from the {@link PALETTE_PROVIDERS}; the frecency boost from the optional
+ * {@link PALETTE_RECENT_ITEMS_SOURCE}.
+ *
+ * Accessibility: modal dialog; the input is a combobox driving a listbox via
+ * `aria-activedescendant`, so focus never leaves the input (Tab is taken for
+ * the actions sub-menu, which keeps keyboard focus trapped in the dialog);
+ * focus goes back to the invoking element on close (the service does that).
+ */
+class CommandPaletteComponent {
+    palette = inject(CommandPaletteService);
+    providers = inject(PALETTE_PROVIDERS, { optional: true }) ?? [];
+    recents = inject(PALETTE_RECENT_ITEMS_SOURCE, { optional: true });
+    /** Translations; members left out fall back to {@link COMMAND_PALETTE_MESSAGES}, then English. */
+    messages = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    m = commandPaletteMessages(this.messages);
+    destroyRef = inject(DestroyRef);
+    input = viewChild.required('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    query$ = new BehaviorSubject('');
+    ranked = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ranked" }] : /* istanbul ignore next */ []));
+    parsed = computed(() => parsePaletteQuery(this.query()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "parsed" }] : /* istanbul ignore next */ []));
+    results = computed(() => this.ranked().flatMap(section => section.results), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "results" }] : /* istanbul ignore next */ []));
+    /** Id of the highlighted row; null means "the first row" (reset whenever the user types). */
+    activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    activeIndex = computed(() => {
+        const results = this.results();
+        const id = this.activeId();
+        const index = id === null ? -1 : results.findIndex(result => result.id === id);
+        return index >= 0 ? index : results.length > 0 ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** The result whose actions sub-menu is open (Tab), or null. */
+    actionsFor = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionsFor" }] : /* istanbul ignore next */ []));
+    activeActionIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeActionIndex" }] : /* istanbul ignore next */ []));
+    sections = computed(() => {
+        const text = this.parsed().text;
+        let index = 0;
+        return this.ranked().map(section => ({
+            group: section.group,
+            label: paletteGroupLabel(section.group, this.m()),
+            rows: section.results.map(result => ({
+                index: index++,
+                result,
+                segments: result.group === 'ai' ? [{ text: result.label, match: false }] : highlightSegments(result.label, text),
+                side: [result.path?.length ? `${result.path.join(' › ')} ›` : '', result.description ?? ''].filter(Boolean).join('  ')
+            }))
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    activeDescendant = computed(() => {
+        if (this.actionsFor()) {
+            return `cp-action-${this.activeActionIndex()}`;
+        }
+        const index = this.activeIndex();
+        return index >= 0 ? `cp-option-${index}` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    /** Whether a listbox with options is shown (bound to the combobox's aria-expanded). */
+    expanded = computed(() => this.actionsFor() ? (this.actionsFor()?.actions?.length ?? 0) > 0 : this.results().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    statusText = computed(() => {
+        const count = this.results().length;
+        return count === 1 ? this.m().oneResult : formatCommandPaletteMessage(this.m().manyResults, { count });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statusText" }] : /* istanbul ignore next */ []));
+    emptyText = computed(() => this.parsed().text ? formatCommandPaletteMessage(this.m().noResultsFor, { text: this.parsed().text }) : this.m().typeToSearch, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    get modifierLabel() {
+        return /Mac|iPhone|iPad/i.test(navigator.platform || navigator.userAgent) ? '⌘' : 'Ctrl';
+    }
+    constructor() {
+        // open('…') while already open replaces the query (e.g. the top bar's trigger).
+        effect(() => {
+            const request = this.palette.request();
+            untracked(() => this.setQuery(request.query));
+        });
+        afterNextRender(() => this.focusInput());
+    }
+    ngOnInit() {
+        for (const provider of this.providers) {
+            provider.reset?.();
+        }
+        this.setQuery(this.palette.request().query);
+        // Frecency is read once per session; a palette session is short.
+        const now = Date.now();
+        const frecency = this.recents?.frecencies(now) ?? new Map();
+        const frecencyOf = (key) => frecency.get(key) ?? 0;
+        const parsed$ = this.query$.pipe(distinctUntilChanged(), map(raw => parsePaletteQuery(raw)));
+        // Late answers for the same query only fill in below what is shown (§4.2 rule 5).
+        let rankedFor = null;
+        searchProviders(this.providers, parsed$).pipe(map(results => {
+            const raw = this.query$.value;
+            const fresh = rankResults(results, parsePaletteQuery(raw), frecencyOf);
+            const ranked = raw === rankedFor ? stabilizeRanking(this.ranked(), fresh) : fresh;
+            rankedFor = raw;
+            return ranked;
+        }), takeUntilDestroyed(this.destroyRef)).subscribe(ranked => this.ranked.set(ranked));
+    }
+    groupLabel(group) {
+        return paletteGroupLabel(group, this.m());
+    }
+    format(message, values) {
+        return formatCommandPaletteMessage(message, values);
+    }
+    onInput(event) {
+        this.setQuery(event.target.value);
+    }
+    onKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.move(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.move(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.moveTo(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.moveTo(Number.MAX_SAFE_INTEGER);
+                break;
+            case 'Enter': {
+                event.preventDefault();
+                const target = this.actionsFor();
+                if (target) {
+                    const action = target.actions?.[this.activeActionIndex()];
+                    if (action) {
+                        void this.runAction(action);
+                    }
+                }
+                else {
+                    const result = this.results()[this.activeIndex()];
+                    if (result) {
+                        void this.execute(result, event.metaKey || event.ctrlKey ? 'newTab' : 'open');
+                    }
+                }
+                break;
+            }
+            case 'Tab':
+                // Keeps focus in the dialog (trap) and toggles the actions sub-menu.
+                event.preventDefault();
+                if (event.shiftKey || this.actionsFor()) {
+                    this.actionsFor.set(null);
+                }
+                else {
+                    this.openActions();
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.actionsFor()) {
+                    this.actionsFor.set(null);
+                }
+                else {
+                    this.palette.close();
+                }
+                break;
+        }
+    }
+    /** Clicks on the dialog's chrome (header, footer, group headers) must not take focus from the input. */
+    onDialogMouseDown(event) {
+        if (event.target !== this.input().nativeElement) {
+            event.preventDefault();
+        }
+    }
+    close() {
+        this.palette.close();
+    }
+    onScrimMouseDown(event) {
+        if (event.target === event.currentTarget) {
+            this.palette.close();
+        }
+    }
+    onOptionHover(result) {
+        if (this.activeId() !== result.id) {
+            this.activeId.set(result.id);
+        }
+    }
+    onOptionClick(result, event) {
+        void this.execute(result, event.metaKey || event.ctrlKey ? 'newTab' : 'open');
+    }
+    /** Runs a result. The palette closes first; an outcome with a query reopens it with that query. */
+    async execute(result, mode) {
+        await this.finish(() => result.run(mode));
+    }
+    async runAction(action) {
+        await this.finish(() => action.run());
+    }
+    async finish(run) {
+        this.palette.close();
+        try {
+            const outcome = await run();
+            if (outcome && typeof outcome.query === 'string') {
+                this.palette.open(outcome.query);
+            }
+        }
+        catch (error) {
+            console.error('Command palette: running the result failed', error);
+        }
+    }
+    openActions() {
+        const result = this.results()[this.activeIndex()];
+        if (result?.actions?.length) {
+            this.actionsFor.set(result);
+            this.activeActionIndex.set(0);
+        }
+    }
+    move(delta) {
+        const count = this.actionsFor() ? this.actionsFor()?.actions?.length ?? 0 : this.results().length;
+        if (count === 0) {
+            return;
+        }
+        const current = this.actionsFor() ? this.activeActionIndex() : Math.max(0, this.activeIndex());
+        this.moveTo((current + delta + count) % count);
+    }
+    moveTo(index) {
+        const target = this.actionsFor();
+        if (target) {
+            const count = target.actions?.length ?? 0;
+            if (count > 0) {
+                this.activeActionIndex.set(Math.min(index, count - 1));
+            }
+        }
+        else {
+            const results = this.results();
+            if (results.length === 0) {
+                return;
+            }
+            this.activeId.set(results[Math.min(index, results.length - 1)].id);
+        }
+        this.scrollActiveIntoView();
+    }
+    setQuery(value) {
+        if (value === this.query() && value === this.query$.value) {
+            return;
+        }
+        this.query.set(value);
+        this.activeId.set(null);
+        this.actionsFor.set(null);
+        this.query$.next(value);
+    }
+    focusInput() {
+        const element = this.input().nativeElement;
+        element.focus();
+        const end = element.value.length;
+        element.setSelectionRange(end, end);
+    }
+    scrollActiveIntoView() {
+        const id = this.activeDescendant();
+        const element = id ? document.getElementById(id) : null;
+        if (element && typeof element.scrollIntoView === 'function') {
+            element.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: CommandPaletteComponent, isStandalone: true, selector: "mm-command-palette", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"cp-scrim\" (mousedown)=\"onScrimMouseDown($event)\">\n  <div class=\"cp-dialog\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"m().dialogLabel\" (keydown)=\"onKeydown($event)\" (mousedown)=\"onDialogMouseDown($event)\">\n    <div class=\"cp-input-row\">\n      <svg class=\"cp-search-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3.5-3.5\"/></svg>\n      <input\n        #input\n        class=\"cp-input\"\n        type=\"text\"\n        role=\"combobox\"\n        [attr.aria-label]=\"m().inputLabel\"\n        [attr.aria-expanded]=\"expanded()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"actionsFor() ? 'cp-actions' : 'cp-listbox'\"\n        [attr.aria-activedescendant]=\"activeDescendant()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [placeholder]=\"m().placeholder\"\n        [value]=\"query()\"\n        (input)=\"onInput($event)\" />\n      <kbd class=\"cp-esc\" aria-hidden=\"true\">esc</kbd>\n      <!-- Phones: full-screen palette without scrim and Esc key \u2014 an explicit way out. -->\n      <button type=\"button\" class=\"cp-close\" (click)=\"close()\">{{ m().cancel }}</button>\n    </div>\n\n    @if (actionsFor(); as target) {\n      <div class=\"cp-list\" id=\"cp-actions\" role=\"listbox\" [attr.aria-label]=\"format(m().actionsFor, { label: target.label })\">\n        <div class=\"cp-group-header\" role=\"presentation\">{{ format(m().actionsHeader, { label: target.label }) }}</div>\n        @for (action of target.actions ?? []; track action.id; let i = $index) {\n          <div\n            class=\"cp-option\"\n            role=\"option\"\n            [id]=\"'cp-action-' + i\"\n            [attr.aria-selected]=\"i === activeActionIndex()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (mousemove)=\"activeActionIndex.set(i)\"\n            (click)=\"runAction(action)\">\n            <span class=\"cp-icon\" aria-hidden=\"true\">\u25B8</span>\n            <span class=\"cp-label\">{{ action.label }}</span>\n            <span class=\"cp-side\"></span>\n            <span class=\"cp-tab-col\">\n              @if (action.hint) {\n                <kbd aria-hidden=\"true\">{{ action.hint }}</kbd>\n              }\n            </span>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"cp-list\" id=\"cp-listbox\" role=\"listbox\" [attr.aria-label]=\"m().results\">\n        @for (section of sections(); track section.group) {\n          <div class=\"cp-section\" [class.cp-section-ai]=\"section.group === 'ai'\" role=\"group\" [attr.aria-labelledby]=\"'cp-group-' + section.group\">\n            <div class=\"cp-group-header\" role=\"presentation\" [id]=\"'cp-group-' + section.group\">{{ section.label }}</div>\n            @for (row of section.rows; track row.result.id) {\n              <div\n                class=\"cp-option\"\n                role=\"option\"\n                [class.cp-ai]=\"row.result.group === 'ai'\"\n                [id]=\"'cp-option-' + row.index\"\n                [attr.aria-selected]=\"row.index === activeIndex()\"\n                (mousedown)=\"$event.preventDefault()\"\n                (mousemove)=\"onOptionHover(row.result)\"\n                (click)=\"onOptionClick(row.result, $event)\">\n                <span class=\"cp-icon\" aria-hidden=\"true\">\n                  @if (row.result.icon) {\n                    <kendo-svgicon [icon]=\"row.result.icon\" size=\"small\"></kendo-svgicon>\n                  } @else {\n                    {{ row.result.glyph ?? '\u00B7' }}\n                  }\n                </span>\n                <!-- One line on purpose: whitespace between the segments would show as gaps in the label. -->\n                <span class=\"cp-label\">@for (segment of row.segments; track $index) {@if (segment.match) {<mark>{{ segment.text }}</mark>}@else{<span>{{ segment.text }}</span>}}</span>\n                <span class=\"cp-side\">\n                  @if (row.side) {\n                    <span class=\"cp-description\" [title]=\"row.side\">{{ row.side }}</span>\n                  }\n                  @if (row.result.typeHint) {\n                    <code class=\"cp-hint\">{{ row.result.typeHint }}</code>\n                  }\n                </span>\n                <!-- Own grid column, so the Tab key lines up on every row. -->\n                <span class=\"cp-tab-col\" aria-hidden=\"true\">\n                  @if (row.result.actions?.length) {\n                    <kbd class=\"cp-tab-hint\" [title]=\"m().tabForActions\">\u21E5</kbd>\n                  }\n                </span>\n              </div>\n            }\n          </div>\n        } @empty {\n          <div class=\"cp-empty\" role=\"presentation\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n\n    <div class=\"cp-footer\" aria-hidden=\"true\">\n      <span><kbd>\u2191</kbd><kbd>\u2193</kbd> {{ m().footerMove }}</span>\n      <span><kbd>\u21B5</kbd> {{ m().footerOpen }}</span>\n      <span><kbd>{{ modifierLabel }}\u21B5</kbd> {{ m().footerNewTab }}</span>\n      <span><kbd>\u21E5</kbd> {{ m().footerActions }}</span>\n      <span class=\"cp-prefixes\">\n        <span class=\"cp-prefix\"><kbd>&gt;</kbd> {{ m().prefixActions }}</span>\n        <span class=\"cp-prefix\"><kbd>&#64;</kbd> {{ m().prefixEntities }}</span>\n        <span class=\"cp-prefix\"><kbd>#</kbd> {{ m().prefixBoards }}</span>\n        <span class=\"cp-prefix\"><kbd>/</kbd> {{ m().prefixTenants }}</span>\n      </span>\n    </div>\n    <div class=\"cp-status\" role=\"status\" aria-live=\"polite\">{{ statusText() }}</div>\n  </div>\n</div>\n", styles: [":host{display:contents;--cp-scrim: var(--theme-scrim, color-mix(in srgb, var(--theme-bg-app) 70%, transparent))}.cp-scrim{position:fixed;inset:0;z-index:12000;display:flex;align-items:flex-start;justify-content:center;padding:72px 16px 16px;background:var(--cp-scrim);animation:cp-fade var(--theme-motion-fast, .12s) cubic-bezier(.2,0,0,1)}.cp-dialog{display:flex;flex-direction:column;width:min(640px,100%);max-height:min(560px,100vh - 96px);overflow:hidden;background:var(--theme-bg-overlay);color:var(--theme-text-primary);border-radius:var(--theme-radius-lg, 8px);box-shadow:var(--theme-shadow-popup);font-family:var(--theme-font-ui, inherit)}.cp-input-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--theme-border-subtle)}.cp-input-row:focus-within{box-shadow:inset 0 -2px 0 var(--theme-accent, var(--octo-mint, #64ceb9))}.cp-search-icon{flex:none;width:18px;height:18px;fill:none;stroke:var(--theme-text-muted);stroke-width:1.5}.cp-input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--theme-text-primary);font:inherit;font-size:15px}.cp-input::placeholder{color:var(--theme-text-muted)}.cp-list{overflow:auto;padding:6px;overscroll-behavior:contain}.cp-section-ai{margin-top:4px;border-top:1px solid var(--theme-border-subtle);padding-top:4px}.cp-section-ai .cp-group-header{display:none}.cp-group-header{padding:8px 10px 4px;font-size:11.5px;font-weight:500;color:var(--theme-text-muted)}.cp-option{display:grid;grid-template-columns:22px minmax(6rem,1fr) fit-content(45%) 28px;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--theme-radius-sm, 4px);cursor:pointer}.cp-option[aria-selected=true]{background:var(--theme-accent-subtle, rgba(100, 206, 185, .12))}.cp-option[aria-selected=true] .cp-icon{color:var(--theme-accent, var(--octo-mint, #64ceb9))}.cp-option.cp-ai .cp-icon,.cp-option.cp-ai .cp-label{color:var(--theme-ai, #8b6fd0)}.cp-icon{display:flex;align-items:center;justify-content:center;color:var(--theme-text-muted);font:500 13px var(--theme-font-mono, \"Roboto Mono\", monospace)}.cp-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cp-label mark{background:none;color:var(--theme-accent, var(--octo-mint, #64ceb9));font-weight:500}.cp-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:12px;color:var(--theme-text-secondary);white-space:nowrap}.cp-description{overflow:hidden;text-overflow:ellipsis}.cp-tab-col{display:flex;justify-content:flex-end}.cp-hint{overflow:hidden;max-width:200px;text-overflow:ellipsis;font-family:var(--theme-font-mono, \"Roboto Mono\", monospace);font-size:11.5px;color:var(--theme-text-muted)}kbd{display:inline-block;min-width:18px;padding:0 4px;border:1px solid var(--theme-border-strong);border-radius:var(--theme-radius-xs, 2px);font:11px var(--theme-font-mono, \"Roboto Mono\", monospace);line-height:16px;text-align:center;color:var(--theme-text-secondary)}.cp-esc{flex:none}.cp-close{display:none;flex:none;padding:4px 6px;border:0;background:none;color:var(--theme-text-accent);font:inherit;cursor:pointer}.cp-close:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.cp-empty{padding:24px;text-align:center;color:var(--theme-text-muted)}.cp-footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 16px;border-top:1px solid var(--theme-border-subtle);font-size:11px;color:var(--theme-text-muted)}.cp-footer>span{white-space:nowrap}.cp-footer kbd{margin-right:2px}.cp-prefixes{display:contents}.cp-prefixes .cp-prefix{white-space:nowrap}@media(min-width:1100px){.cp-dialog{width:min(720px,100%)}.cp-prefixes>.cp-prefix:first-child{margin-left:auto}}.cp-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@keyframes cp-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.cp-scrim{animation:none}}@media(max-width:640px){.cp-scrim{padding:0}.cp-dialog{width:100%;height:100dvh;max-height:none;border-radius:0}.cp-list{flex:1 1 auto}.cp-option{grid-template-columns:22px minmax(6rem,1fr) fit-content(40%) 28px}.cp-hint,.cp-prefixes,.cp-esc{display:none}.cp-close{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CommandPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-command-palette', imports: [SVGIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cp-scrim\" (mousedown)=\"onScrimMouseDown($event)\">\n  <div class=\"cp-dialog\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"m().dialogLabel\" (keydown)=\"onKeydown($event)\" (mousedown)=\"onDialogMouseDown($event)\">\n    <div class=\"cp-input-row\">\n      <svg class=\"cp-search-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m20 20-3.5-3.5\"/></svg>\n      <input\n        #input\n        class=\"cp-input\"\n        type=\"text\"\n        role=\"combobox\"\n        [attr.aria-label]=\"m().inputLabel\"\n        [attr.aria-expanded]=\"expanded()\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"actionsFor() ? 'cp-actions' : 'cp-listbox'\"\n        [attr.aria-activedescendant]=\"activeDescendant()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [placeholder]=\"m().placeholder\"\n        [value]=\"query()\"\n        (input)=\"onInput($event)\" />\n      <kbd class=\"cp-esc\" aria-hidden=\"true\">esc</kbd>\n      <!-- Phones: full-screen palette without scrim and Esc key \u2014 an explicit way out. -->\n      <button type=\"button\" class=\"cp-close\" (click)=\"close()\">{{ m().cancel }}</button>\n    </div>\n\n    @if (actionsFor(); as target) {\n      <div class=\"cp-list\" id=\"cp-actions\" role=\"listbox\" [attr.aria-label]=\"format(m().actionsFor, { label: target.label })\">\n        <div class=\"cp-group-header\" role=\"presentation\">{{ format(m().actionsHeader, { label: target.label }) }}</div>\n        @for (action of target.actions ?? []; track action.id; let i = $index) {\n          <div\n            class=\"cp-option\"\n            role=\"option\"\n            [id]=\"'cp-action-' + i\"\n            [attr.aria-selected]=\"i === activeActionIndex()\"\n            (mousedown)=\"$event.preventDefault()\"\n            (mousemove)=\"activeActionIndex.set(i)\"\n            (click)=\"runAction(action)\">\n            <span class=\"cp-icon\" aria-hidden=\"true\">\u25B8</span>\n            <span class=\"cp-label\">{{ action.label }}</span>\n            <span class=\"cp-side\"></span>\n            <span class=\"cp-tab-col\">\n              @if (action.hint) {\n                <kbd aria-hidden=\"true\">{{ action.hint }}</kbd>\n              }\n            </span>\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"cp-list\" id=\"cp-listbox\" role=\"listbox\" [attr.aria-label]=\"m().results\">\n        @for (section of sections(); track section.group) {\n          <div class=\"cp-section\" [class.cp-section-ai]=\"section.group === 'ai'\" role=\"group\" [attr.aria-labelledby]=\"'cp-group-' + section.group\">\n            <div class=\"cp-group-header\" role=\"presentation\" [id]=\"'cp-group-' + section.group\">{{ section.label }}</div>\n            @for (row of section.rows; track row.result.id) {\n              <div\n                class=\"cp-option\"\n                role=\"option\"\n                [class.cp-ai]=\"row.result.group === 'ai'\"\n                [id]=\"'cp-option-' + row.index\"\n                [attr.aria-selected]=\"row.index === activeIndex()\"\n                (mousedown)=\"$event.preventDefault()\"\n                (mousemove)=\"onOptionHover(row.result)\"\n                (click)=\"onOptionClick(row.result, $event)\">\n                <span class=\"cp-icon\" aria-hidden=\"true\">\n                  @if (row.result.icon) {\n                    <kendo-svgicon [icon]=\"row.result.icon\" size=\"small\"></kendo-svgicon>\n                  } @else {\n                    {{ row.result.glyph ?? '\u00B7' }}\n                  }\n                </span>\n                <!-- One line on purpose: whitespace between the segments would show as gaps in the label. -->\n                <span class=\"cp-label\">@for (segment of row.segments; track $index) {@if (segment.match) {<mark>{{ segment.text }}</mark>}@else{<span>{{ segment.text }}</span>}}</span>\n                <span class=\"cp-side\">\n                  @if (row.side) {\n                    <span class=\"cp-description\" [title]=\"row.side\">{{ row.side }}</span>\n                  }\n                  @if (row.result.typeHint) {\n                    <code class=\"cp-hint\">{{ row.result.typeHint }}</code>\n                  }\n                </span>\n                <!-- Own grid column, so the Tab key lines up on every row. -->\n                <span class=\"cp-tab-col\" aria-hidden=\"true\">\n                  @if (row.result.actions?.length) {\n                    <kbd class=\"cp-tab-hint\" [title]=\"m().tabForActions\">\u21E5</kbd>\n                  }\n                </span>\n              </div>\n            }\n          </div>\n        } @empty {\n          <div class=\"cp-empty\" role=\"presentation\">{{ emptyText() }}</div>\n        }\n      </div>\n    }\n\n    <div class=\"cp-footer\" aria-hidden=\"true\">\n      <span><kbd>\u2191</kbd><kbd>\u2193</kbd> {{ m().footerMove }}</span>\n      <span><kbd>\u21B5</kbd> {{ m().footerOpen }}</span>\n      <span><kbd>{{ modifierLabel }}\u21B5</kbd> {{ m().footerNewTab }}</span>\n      <span><kbd>\u21E5</kbd> {{ m().footerActions }}</span>\n      <span class=\"cp-prefixes\">\n        <span class=\"cp-prefix\"><kbd>&gt;</kbd> {{ m().prefixActions }}</span>\n        <span class=\"cp-prefix\"><kbd>&#64;</kbd> {{ m().prefixEntities }}</span>\n        <span class=\"cp-prefix\"><kbd>#</kbd> {{ m().prefixBoards }}</span>\n        <span class=\"cp-prefix\"><kbd>/</kbd> {{ m().prefixTenants }}</span>\n      </span>\n    </div>\n    <div class=\"cp-status\" role=\"status\" aria-live=\"polite\">{{ statusText() }}</div>\n  </div>\n</div>\n", styles: [":host{display:contents;--cp-scrim: var(--theme-scrim, color-mix(in srgb, var(--theme-bg-app) 70%, transparent))}.cp-scrim{position:fixed;inset:0;z-index:12000;display:flex;align-items:flex-start;justify-content:center;padding:72px 16px 16px;background:var(--cp-scrim);animation:cp-fade var(--theme-motion-fast, .12s) cubic-bezier(.2,0,0,1)}.cp-dialog{display:flex;flex-direction:column;width:min(640px,100%);max-height:min(560px,100vh - 96px);overflow:hidden;background:var(--theme-bg-overlay);color:var(--theme-text-primary);border-radius:var(--theme-radius-lg, 8px);box-shadow:var(--theme-shadow-popup);font-family:var(--theme-font-ui, inherit)}.cp-input-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--theme-border-subtle)}.cp-input-row:focus-within{box-shadow:inset 0 -2px 0 var(--theme-accent, var(--octo-mint, #64ceb9))}.cp-search-icon{flex:none;width:18px;height:18px;fill:none;stroke:var(--theme-text-muted);stroke-width:1.5}.cp-input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--theme-text-primary);font:inherit;font-size:15px}.cp-input::placeholder{color:var(--theme-text-muted)}.cp-list{overflow:auto;padding:6px;overscroll-behavior:contain}.cp-section-ai{margin-top:4px;border-top:1px solid var(--theme-border-subtle);padding-top:4px}.cp-section-ai .cp-group-header{display:none}.cp-group-header{padding:8px 10px 4px;font-size:11.5px;font-weight:500;color:var(--theme-text-muted)}.cp-option{display:grid;grid-template-columns:22px minmax(6rem,1fr) fit-content(45%) 28px;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--theme-radius-sm, 4px);cursor:pointer}.cp-option[aria-selected=true]{background:var(--theme-accent-subtle, rgba(100, 206, 185, .12))}.cp-option[aria-selected=true] .cp-icon{color:var(--theme-accent, var(--octo-mint, #64ceb9))}.cp-option.cp-ai .cp-icon,.cp-option.cp-ai .cp-label{color:var(--theme-ai, #8b6fd0)}.cp-icon{display:flex;align-items:center;justify-content:center;color:var(--theme-text-muted);font:500 13px var(--theme-font-mono, \"Roboto Mono\", monospace)}.cp-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.cp-label mark{background:none;color:var(--theme-accent, var(--octo-mint, #64ceb9));font-weight:500}.cp-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:12px;color:var(--theme-text-secondary);white-space:nowrap}.cp-description{overflow:hidden;text-overflow:ellipsis}.cp-tab-col{display:flex;justify-content:flex-end}.cp-hint{overflow:hidden;max-width:200px;text-overflow:ellipsis;font-family:var(--theme-font-mono, \"Roboto Mono\", monospace);font-size:11.5px;color:var(--theme-text-muted)}kbd{display:inline-block;min-width:18px;padding:0 4px;border:1px solid var(--theme-border-strong);border-radius:var(--theme-radius-xs, 2px);font:11px var(--theme-font-mono, \"Roboto Mono\", monospace);line-height:16px;text-align:center;color:var(--theme-text-secondary)}.cp-esc{flex:none}.cp-close{display:none;flex:none;padding:4px 6px;border:0;background:none;color:var(--theme-text-accent);font:inherit;cursor:pointer}.cp-close:focus-visible{outline:none;box-shadow:var(--theme-focus-ring)}.cp-empty{padding:24px;text-align:center;color:var(--theme-text-muted)}.cp-footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 16px;border-top:1px solid var(--theme-border-subtle);font-size:11px;color:var(--theme-text-muted)}.cp-footer>span{white-space:nowrap}.cp-footer kbd{margin-right:2px}.cp-prefixes{display:contents}.cp-prefixes .cp-prefix{white-space:nowrap}@media(min-width:1100px){.cp-dialog{width:min(720px,100%)}.cp-prefixes>.cp-prefix:first-child{margin-left:auto}}.cp-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@keyframes cp-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.cp-scrim{animation:none}}@media(max-width:640px){.cp-scrim{padding:0}.cp-dialog{width:100%;height:100dvh;max-height:none;border-radius:0}.cp-list{flex:1 1 auto}.cp-option{grid-template-columns:22px minmax(6rem,1fr) fit-content(40%) 28px}.cp-hint,.cp-prefixes,.cp-esc{display:none}.cp-close{display:inline-flex}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface of @meshmakers/shared-ui/command-palette (AB#5621)
+ */
+/**
+ * The command palette (Cmd/Ctrl+K) of the OctoMesh Refinery Studio as an app-agnostic building
+ * block: the overlay component, the open/close service with the hotkey mapping, query parsing,
+ * multi-provider search and ranking. It knows no data source of its own — every row comes from a
+ * {@link PALETTE_PROVIDERS} entry the host registers (pages, actions, entities, tenants …).
+ *
+ * Usage:
+ *
+ * ```ts
+ * import { CommandPaletteComponent, CommandPaletteService, PALETTE_PROVIDERS, PaletteProvider,
+ *          paletteHotkeyAction } from '@meshmakers/shared-ui/command-palette';
+ *
+ * // app.config.ts
+ * providers: [
+ *   { provide: PALETTE_PROVIDERS, useClass: PagesPaletteProvider, multi: true },
+ *   { provide: PALETTE_PROVIDERS, useClass: TenantsPaletteProvider, multi: true },
+ * ]
+ *
+ * // AppComponent: host the overlay and bind the hotkeys
+ * template: `@if (palette.isOpen()) { <mm-command-palette /> }`
+ * @HostListener('document:keydown', ['$event'])
+ * onKeydown(event: KeyboardEvent): void {
+ *   const action = paletteHotkeyAction(event, this.palette.isOpen());
+ *   if (action) { event.preventDefault(); action === 'toggle' ? this.palette.toggle() : this.palette.open(); }
+ * }
+ * ```
+ *
+ * A provider implements {@link PaletteProvider}: `search(query)` returns an Observable of
+ * {@link PaletteResult}s (a new query cancels the previous search; `debounceMs` for remote
+ * sources; an error drops only that provider's rows), `reset()` runs whenever the palette opens.
+ * {@link PaletteNavigationService} offers tenant-relative navigation and clipboard helpers.
+ *
+ * Optional providers:
+ * - `PALETTE_RECENT_ITEMS_SOURCE` — frecency per `recentKey` (boosts recently used rows);
+ * - `COMMAND_PALETTE_MESSAGES` — translations (`Partial<CommandPaletteMessages>`, English defaults;
+ *   the component's `messages` input wins over the token).
+ */
+// --- Contract ---
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COMMAND_PALETTE_MESSAGES, CommandPaletteComponent, CommandPaletteService, DEFAULT_COMMAND_PALETTE_MESSAGES, MatchTier, PALETTE_PREFIXES, PALETTE_PROVIDERS, PALETTE_RECENT_ITEMS_SOURCE, PaletteNavigationService, formatCommandPaletteMessage, highlightSegments, isRtId, matchTier, paletteGroupLabel, paletteHotkeyAction, parsePaletteQuery, rankResults, resolveCommandPaletteMessages, scoreResult, searchProviders, stabilizeRanking };
+//# sourceMappingURL=meshmakers-shared-ui-command-palette.mjs.map