@memberjunction/ng-search 0.0.1 → 5.22.0

package/dist/lib/search-overlay.component.js

@@ -0,0 +1,626 @@
+/**
+ * @fileoverview Search Overlay Component
+ *
+ * A floating search overlay inspired by command palette / Spotlight style.
+ * Triggered by Cmd+K (Mac) or Ctrl+K (Windows), appears as a centered
+ * floating panel with backdrop blur, search input, and grouped results.
+ *
+ * Supports keyboard navigation (up/down/enter/escape), filter facets,
+ * and responsive mobile layout.
+ */
+import { Component, EventEmitter, HostListener, Input, Output, ChangeDetectorRef, ViewChild, inject } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import { SearchService } from './search.service';
+import * as i0 from "@angular/core";
+const _c0 = ["searchInput"];
+const _forTrack0 = ($index, $item) => $item.Category;
+const _forTrack1 = ($index, $item) => $item.Value;
+const _forTrack2 = ($index, $item) => $item.Query;
+const _forTrack3 = ($index, $item) => $item.SourceType;
+const _forTrack4 = ($index, $item) => $item.ID;
+function SearchOverlayComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelementEnd();
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_11_For_2_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i");
+} if (rf & 2) {
+    const option_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(option_r4.Icon);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_11_For_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_11_For_2_For_1_Template_button_click_0_listener() { const option_r4 = i0.ɵɵrestoreView(_r3).$implicit; const filter_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterToggle(filter_r5.Category, option_r4.Value)); });
+    i0.ɵɵconditionalCreate(1, SearchOverlayComponent_Conditional_0_Conditional_11_For_2_For_1_Conditional_1_Template, 1, 2, "i", 16);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 17);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const option_r4 = ctx.$implicit;
+    const filter_r5 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("filter-chip-active", ctx_r1.IsFilterActive(filter_r5.Category, option_r4.Value));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(option_r4.Icon ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(option_r4.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(option_r4.Count);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SearchOverlayComponent_Conditional_0_Conditional_11_For_2_For_1_Template, 6, 5, "button", 14, _forTrack1);
+} if (rf & 2) {
+    const filter_r5 = ctx.$implicit;
+    i0.ɵɵrepeater(filter_r5.Options);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_11_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.ClearAllFilters()); });
+    i0.ɵɵelement(1, "i", 19);
+    i0.ɵɵtext(2, " Clear ");
+    i0.ɵɵelementEnd();
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵrepeaterCreate(1, SearchOverlayComponent_Conditional_0_Conditional_11_For_2_Template, 2, 0, null, null, _forTrack0);
+    i0.ɵɵconditionalCreate(3, SearchOverlayComponent_Conditional_0_Conditional_11_Conditional_3_Template, 3, 0, "button", 13);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.Filters);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasActiveFilters() ? 3 : -1);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_12_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnAgentCtaClick()); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.AgentCtaText, " ");
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 20);
+    i0.ɵɵelementStart(2, "p", 21);
+    i0.ɵɵtext(3, "No results found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 22);
+    i0.ɵɵtext(5, "Try different keywords or remove some filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, SearchOverlayComponent_Conditional_0_Conditional_12_Conditional_6_Template, 3, 1, "button", 23);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.ShowAgentCta ? 6 : -1);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_For_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_For_4_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const recent_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnQueryInput(recent_r9.Query)); });
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 32);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const recent_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(recent_r9.Query);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", recent_r9.ResultCount, " results");
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_For_4_Conditional_0_Template, 6, 2, "div", 29);
+} if (rf & 2) {
+    const ɵ$index_72_r10 = ctx.$index;
+    i0.ɵɵconditional(ɵ$index_72_r10 < 5 ? 0 : -1);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "span", 28);
+    i0.ɵɵtext(2, "Recent Searches");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(3, SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_For_4_Template, 1, 1, null, null, _forTrack2);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.searchService.RecentSearches$.value);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵelementStart(2, "p", 22);
+    i0.ɵɵtext(3, "Start typing to search across all your knowledge");
+    i0.ɵɵelementEnd()();
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵconditionalCreate(1, SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_1_Template, 5, 0)(2, SearchOverlayComponent_Conditional_0_Conditional_13_Conditional_2_Template, 4, 0, "div", 26);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.searchService.RecentSearches$.value.length > 0 ? 1 : 2);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tag_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r13);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_For_2_Conditional_0_Template, 2, 1, "span", 50);
+} if (rf & 2) {
+    const ɵ$index_124_r14 = ctx.$index;
+    i0.ɵɵconditional(ɵ$index_124_r14 < 3 ? 0 : -1);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵrepeaterCreate(1, SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_For_2_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const result_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(result_r12.Tags);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Template_div_click_0_listener($event) { const result_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnResultClick(result_r12, $event)); })("mouseenter", function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Template_div_mouseenter_0_listener() { const result_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.HighlightedIndex = ctx_r1.getFlatIndex(result_r12)); });
+    i0.ɵɵelementStart(1, "div", 43);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 44)(4, "div", 45);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 46);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Conditional_8_Template, 3, 0, "div", 47);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 48)(10, "span", 49);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const result_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("result-item-highlighted", ctx_r1.isResultHighlighted(result_r12));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(result_r12.SourceIcon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(result_r12.Title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(result_r12.Snippet);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(result_r12.Tags.length > 0 ? 8 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatScore(result_r12.Score));
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 38);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementStart(3, "span", 39);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 40);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵrepeaterCreate(7, SearchOverlayComponent_Conditional_0_Conditional_14_For_1_For_8_Template, 12, 8, "div", 41, _forTrack4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r15 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(group_r15.Icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r15.Label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r15.TotalCount);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r15.Results);
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Conditional_14_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnAgentCtaClick()); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.AgentCtaText, " ");
+} }
+function SearchOverlayComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SearchOverlayComponent_Conditional_0_Conditional_14_For_1_Template, 9, 4, "div", 34, _forTrack3);
+    i0.ɵɵelementStart(2, "div", 35)(3, "span", 36);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, SearchOverlayComponent_Conditional_0_Conditional_14_Conditional_5_Template, 3, 1, "button", 37);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.ResultGroups);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.TotalCount, " results in ", ctx_r1.FormatElapsedTime(ctx_r1.ElapsedMs), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ShowAgentCta ? 5 : -1);
+} }
+function SearchOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnBackdropClick()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵlistener("click", function SearchOverlayComponent_Conditional_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 3);
+    i0.ɵɵelement(3, "i", 4);
+    i0.ɵɵelementStart(4, "input", 5, 0);
+    i0.ɵɵlistener("input", function SearchOverlayComponent_Conditional_0_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQueryInput($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, SearchOverlayComponent_Conditional_0_Conditional_6_Template, 2, 0, "div", 6);
+    i0.ɵɵelementStart(7, "div", 7)(8, "kbd");
+    i0.ɵɵtext(9, "ESC");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "div", 8);
+    i0.ɵɵconditionalCreate(11, SearchOverlayComponent_Conditional_0_Conditional_11_Template, 4, 1, "div", 9);
+    i0.ɵɵconditionalCreate(12, SearchOverlayComponent_Conditional_0_Conditional_12_Template, 7, 1, "div", 10);
+    i0.ɵɵconditionalCreate(13, SearchOverlayComponent_Conditional_0_Conditional_13_Template, 3, 1, "div", 11);
+    i0.ɵɵconditionalCreate(14, SearchOverlayComponent_Conditional_0_Conditional_14_Template, 6, 3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("placeholder", ctx_r1.Placeholder)("value", ctx_r1.Query);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.IsSearching ? 6 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.ShowFilters && ctx_r1.Filters.length > 0 ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.HasSearched && ctx_r1.AllResults.length === 0 && !ctx_r1.IsSearching ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.HasSearched && !ctx_r1.IsSearching ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.AllResults.length > 0 ? 14 : -1);
+} }
+export class SearchOverlayComponent {
+    cdr = inject(ChangeDetectorRef);
+    searchService = inject(SearchService);
+    destroy$ = new Subject();
+    searchInput$ = new Subject();
+    searchInputRef;
+    // --- Configuration Inputs ---
+    /** Placeholder text for the search input */
+    Placeholder = 'Search across all your knowledge...';
+    /** Maximum number of results to fetch */
+    MaxResults = 25;
+    /** Whether the overlay is currently visible */
+    _IsOpen = false;
+    set IsOpen(value) {
+        const prev = this._IsOpen;
+        this._IsOpen = value;
+        if (value && !prev) {
+            this.onOverlayOpened();
+        }
+        if (!value && prev) {
+            this.onOverlayClosed();
+        }
+    }
+    get IsOpen() {
+        return this._IsOpen;
+    }
+    /** Debounce time in ms before search fires */
+    DebounceMs = 250;
+    /** Which search sources to include */
+    IncludeSources = ['vector', 'fulltext', 'entity'];
+    /** Whether to show filter facets */
+    ShowFilters = true;
+    /** Text for the agent CTA button */
+    AgentCtaText = 'Ask Knowledge Agent';
+    /** Whether to show the agent CTA */
+    ShowAgentCta = true;
+    // --- Outputs ---
+    IsOpenChange = new EventEmitter();
+    ResultSelected = new EventEmitter();
+    FilterChanged = new EventEmitter();
+    SearchExecuted = new EventEmitter();
+    AgentCtaClicked = new EventEmitter();
+    // --- Component State ---
+    Query = '';
+    IsSearching = false;
+    ResultGroups = [];
+    AllResults = [];
+    Filters = [];
+    ActiveFilters = {};
+    TotalCount = 0;
+    ElapsedMs = 0;
+    HighlightedIndex = -1;
+    HasSearched = false;
+    /** All results flattened for keyboard navigation */
+    get FlatResults() {
+        return this.AllResults;
+    }
+    ngOnInit() {
+        this.setupSearchDebounce();
+        this.subscribeToSearchState();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // --- Keyboard shortcuts ---
+    HandleGlobalKeydown(event) {
+        if (this.isToggleShortcut(event)) {
+            event.preventDefault();
+            this.ToggleOverlay();
+            return;
+        }
+        if (this._IsOpen) {
+            this.handleOverlayKeydown(event);
+        }
+    }
+    /** Toggle the overlay open/closed */
+    ToggleOverlay() {
+        this.IsOpen = !this._IsOpen;
+        this.IsOpenChange.emit(this._IsOpen);
+    }
+    /** Open the overlay */
+    Open() {
+        if (!this._IsOpen) {
+            this.IsOpen = true;
+            this.IsOpenChange.emit(true);
+        }
+    }
+    /** Close the overlay */
+    Close() {
+        if (this._IsOpen) {
+            this.IsOpen = false;
+            this.IsOpenChange.emit(false);
+        }
+    }
+    /** Handle query input changes */
+    OnQueryInput(value) {
+        this.Query = value;
+        this.searchInput$.next(value);
+    }
+    /** Handle clicking a result */
+    OnResultClick(result, event) {
+        this.ResultSelected.emit({
+            Result: result,
+            OpenInNewTab: event.metaKey || event.ctrlKey
+        });
+        this.Close();
+    }
+    /** Handle selecting the highlighted result */
+    SelectHighlighted() {
+        if (this.HighlightedIndex >= 0 && this.HighlightedIndex < this.FlatResults.length) {
+            this.ResultSelected.emit({
+                Result: this.FlatResults[this.HighlightedIndex],
+                OpenInNewTab: false
+            });
+            this.Close();
+        }
+    }
+    /** Handle filter option toggle */
+    OnFilterToggle(category, value) {
+        const current = this.ActiveFilters[category] ?? [];
+        const index = current.indexOf(value);
+        if (index >= 0) {
+            current.splice(index, 1);
+        }
+        else {
+            current.push(value);
+        }
+        this.ActiveFilters[category] = current;
+        this.FilterChanged.emit({ Category: category, SelectedValues: current });
+        this.executeSearch();
+    }
+    /** Clear all active filters */
+    ClearAllFilters() {
+        this.ActiveFilters = {};
+        this.executeSearch();
+    }
+    /** Handle clicking the agent CTA */
+    OnAgentCtaClick() {
+        this.AgentCtaClicked.emit(this.Query);
+        this.Close();
+    }
+    /** Handle clicking the backdrop to close */
+    OnBackdropClick() {
+        this.Close();
+    }
+    /** Check if a filter option is active */
+    IsFilterActive(category, value) {
+        return (this.ActiveFilters[category] ?? []).includes(value);
+    }
+    /** Get a score display value (percentage) */
+    FormatScore(score) {
+        return `${Math.round(score * 100)}%`;
+    }
+    /** Format elapsed time display */
+    FormatElapsedTime(ms) {
+        if (ms < 1000) {
+            return `${ms}ms`;
+        }
+        return `${(ms / 1000).toFixed(1)}s`;
+    }
+    // --- Private Methods ---
+    isToggleShortcut(event) {
+        return (event.metaKey || event.ctrlKey) && event.key === 'k';
+    }
+    handleOverlayKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.Close();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveHighlight(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveHighlight(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.SelectHighlighted();
+                break;
+        }
+    }
+    moveHighlight(direction) {
+        const maxIndex = this.FlatResults.length - 1;
+        if (maxIndex < 0)
+            return;
+        this.HighlightedIndex += direction;
+        if (this.HighlightedIndex < 0) {
+            this.HighlightedIndex = maxIndex;
+        }
+        else if (this.HighlightedIndex > maxIndex) {
+            this.HighlightedIndex = 0;
+        }
+        this.cdr.detectChanges();
+    }
+    setupSearchDebounce() {
+        this.searchInput$
+            .pipe(debounceTime(this.DebounceMs), takeUntil(this.destroy$))
+            .subscribe(() => this.executeSearch());
+    }
+    subscribeToSearchState() {
+        this.searchService.IsSearching$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(val => {
+            this.IsSearching = val;
+            this.cdr.detectChanges();
+        });
+    }
+    async executeSearch() {
+        const query = this.Query.trim();
+        if (!query) {
+            this.clearResults();
+            return;
+        }
+        const request = {
+            Query: query,
+            MaxResults: this.MaxResults,
+            ActiveFilters: this.ActiveFilters,
+            IncludeSources: this.IncludeSources,
+        };
+        const response = await this.searchService.ExecuteSearch(request);
+        this.AllResults = response.Results;
+        this.ResultGroups = response.Groups;
+        this.Filters = response.Filters;
+        this.TotalCount = response.TotalCount;
+        this.ElapsedMs = response.ElapsedMs;
+        this.HasSearched = true;
+        this.HighlightedIndex = response.Results.length > 0 ? 0 : -1;
+        this.SearchExecuted.emit({
+            Query: query,
+            Filters: this.ActiveFilters,
+            ResultCount: response.TotalCount,
+            ElapsedMs: response.ElapsedMs,
+        });
+        this.cdr.detectChanges();
+    }
+    clearResults() {
+        this.AllResults = [];
+        this.ResultGroups = [];
+        this.Filters = [];
+        this.TotalCount = 0;
+        this.ElapsedMs = 0;
+        this.HasSearched = false;
+        this.HighlightedIndex = -1;
+        this.cdr.detectChanges();
+    }
+    onOverlayOpened() {
+        // Focus input after view updates
+        Promise.resolve().then(() => {
+            this.searchInputRef?.nativeElement?.focus();
+            this.cdr.detectChanges();
+        });
+    }
+    onOverlayClosed() {
+        this.HighlightedIndex = -1;
+    }
+    /** Check if any filters are active (used by template) */
+    hasActiveFilters() {
+        return Object.values(this.ActiveFilters).some(v => v.length > 0);
+    }
+    /** Check if a result is currently keyboard-highlighted */
+    isResultHighlighted(result) {
+        const flatIndex = this.getFlatIndex(result);
+        return flatIndex === this.HighlightedIndex;
+    }
+    /** Get the flat index of a result for keyboard navigation */
+    getFlatIndex(result) {
+        return this.FlatResults.indexOf(result);
+    }
+    static ɵfac = function SearchOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchOverlayComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchOverlayComponent, selectors: [["mj-search-overlay"]], viewQuery: function SearchOverlayComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInputRef = _t.first);
+        } }, hostBindings: function SearchOverlayComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("keydown", function SearchOverlayComponent_keydown_HostBindingHandler($event) { return ctx.HandleGlobalKeydown($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Placeholder: "Placeholder", MaxResults: "MaxResults", IsOpen: "IsOpen", DebounceMs: "DebounceMs", IncludeSources: "IncludeSources", ShowFilters: "ShowFilters", AgentCtaText: "AgentCtaText", ShowAgentCta: "ShowAgentCta" }, outputs: { IsOpenChange: "IsOpenChange", ResultSelected: "ResultSelected", FilterChanged: "FilterChanged", SearchExecuted: "SearchExecuted", AgentCtaClicked: "AgentCtaClicked" }, standalone: false, decls: 1, vars: 1, consts: [["searchInput", ""], [1, "search-backdrop", 3, "click"], [1, "search-spotlight", 3, "click"], [1, "search-input-wrap"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "autocomplete", "off", "spellcheck", "false", 1, "search-input", 3, "input", "placeholder", "value"], [1, "search-spinner"], [1, "search-shortcut-hint"], [1, "search-results-area"], [1, "search-filter-bar"], [1, "search-empty-state"], [1, "search-recent"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "filter-clear-btn"], [1, "filter-chip", 3, "filter-chip-active"], [1, "filter-chip", 3, "click"], [3, "class"], [1, "filter-chip-count"], [1, "filter-clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-search", "search-empty-icon"], [1, "search-empty-title"], [1, "search-empty-text"], [1, "agent-cta-btn"], [1, "agent-cta-btn", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "search-empty-state", "search-empty-state-compact"], [1, "search-recent-header"], [1, "search-recent-title"], [1, "search-recent-item"], [1, "search-recent-item", 3, "click"], [1, "fa-solid", "fa-clock", "search-recent-icon"], [1, "search-recent-count"], [1, "fa-solid", "fa-magnifying-glass", "search-empty-icon"], [1, "result-group"], [1, "search-footer"], [1, "search-footer-count"], [1, "agent-cta-btn", "agent-cta-btn-small"], [1, "result-group-header"], [1, "result-group-label"], [1, "result-group-count"], [1, "result-item", 3, "result-item-highlighted"], [1, "result-item", 3, "click", "mouseenter"], [1, "result-item-icon"], [1, "result-item-content"], [1, "result-item-title"], [1, "result-item-snippet"], [1, "result-item-tags"], [1, "result-item-score"], [1, "score-badge"], [1, "result-tag"], [1, "agent-cta-btn", "agent-cta-btn-small", 3, "click"]], template: function SearchOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SearchOverlayComponent_Conditional_0_Template, 15, 7);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.IsOpen ? 0 : -1);
+        } }, styles: ["\n\n\n.search-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    backdrop-filter: blur(8px);\n    z-index: 1000;\n    animation: _ngcontent-%COMP%_backdropFadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n.search-spotlight[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 12%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 680px;\n    max-width: calc(100vw - 2rem);\n    max-height: 70vh;\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    border-radius: 14px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n    animation: _ngcontent-%COMP%_spotlightIn 0.25s ease;\n}\n\n@keyframes _ngcontent-%COMP%_spotlightIn {\n    from {\n        opacity: 0;\n        transform: translateX(-50%) translateY(-10px) scale(0.98);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(-50%) translateY(0) scale(1);\n    }\n}\n\n\n\n.search-input-wrap[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 0.75rem;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 1.1rem;\n    color: var(--mj-text-primary);\n    outline: none;\n    font-family: inherit;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n    color: var(--mj-text-muted);\n}\n\n.search-spinner[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n}\n\n.search-shortcut-hint[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 0.15rem 0.5rem;\n    border-radius: 4px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.75rem;\n    font-family: inherit;\n}\n\n\n\n.search-results-area[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    max-height: calc(70vh - 56px);\n}\n\n\n\n.search-filter-bar[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.4rem;\n    padding: 0.6rem 1rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.filter-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    padding: 0.25rem 0.6rem;\n    border-radius: 9999px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.78rem;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-chip[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n.filter-chip-active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-chip-count[_ngcontent-%COMP%] {\n    opacity: 0.6;\n    font-size: 0.72rem;\n}\n\n.filter-clear-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.25rem 0.6rem;\n    border-radius: 9999px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.filter-clear-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-status-error);\n}\n\n\n\n.search-empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 2.5rem 1rem;\n    gap: 0.5rem;\n}\n\n.search-empty-state-compact[_ngcontent-%COMP%] {\n    padding: 1.5rem 1rem;\n}\n\n.search-empty-icon[_ngcontent-%COMP%] {\n    font-size: 2rem;\n    color: var(--mj-text-muted);\n    margin-bottom: 0.5rem;\n}\n\n.search-empty-title[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 0.95rem;\n}\n\n.search-empty-text[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n}\n\n\n\n.search-recent[_ngcontent-%COMP%] {\n    padding: 0.5rem 0;\n}\n\n.search-recent-header[_ngcontent-%COMP%] {\n    padding: 0.5rem 1rem;\n}\n\n.search-recent-title[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n}\n\n.search-recent-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.5rem 1rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n    transition: background 0.1s ease;\n}\n\n.search-recent-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.search-recent-icon[_ngcontent-%COMP%] {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.search-recent-count[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n\n\n.result-group[_ngcontent-%COMP%] {\n    padding: 0.25rem 0;\n}\n\n.result-group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    color: var(--mj-text-muted);\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n}\n\n.result-group-label[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.result-group-count[_ngcontent-%COMP%] {\n    font-size: 0.72rem;\n    color: var(--mj-text-disabled);\n}\n\n\n\n.result-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    padding: 0.6rem 1rem;\n    cursor: pointer;\n    transition: background 0.1s ease;\n}\n\n.result-item[_ngcontent-%COMP%]:hover, \n.result-item-highlighted[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-hover);\n}\n\n.result-item-icon[_ngcontent-%COMP%] {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n    margin-top: 0.1rem;\n}\n\n.result-item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.result-item-title[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    font-size: 0.9rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.result-item-snippet[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.8rem;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin-top: 0.15rem;\n}\n\n.result-item-tags[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0.3rem;\n    margin-top: 0.3rem;\n}\n\n.result-tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 0.1rem 0.4rem;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n}\n\n.result-item-score[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    margin-top: 0.2rem;\n}\n\n.score-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 0.15rem 0.45rem;\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.72rem;\n    font-weight: 600;\n}\n\n\n\n.search-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.5rem 1rem;\n    border-top: 1px solid var(--mj-border-subtle);\n}\n\n.search-footer-count[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.78rem;\n}\n\n\n\n.agent-cta-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.6rem 1.2rem;\n    border-radius: 8px;\n    border: none;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.85rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.agent-cta-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.agent-cta-btn-small[_ngcontent-%COMP%] {\n    padding: 0.35rem 0.8rem;\n    font-size: 0.78rem;\n}\n\n\n\n@media (max-width: 640px) {\n    .search-spotlight[_ngcontent-%COMP%] {\n        top: 0;\n        left: 0;\n        right: 0;\n        transform: none;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .search-results-area[_ngcontent-%COMP%] {\n        max-height: calc(100vh - 56px);\n    }\n\n    .search-filter-bar[_ngcontent-%COMP%] {\n        overflow-x: auto;\n        flex-wrap: nowrap;\n        -webkit-overflow-scrolling: touch;\n    }\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchOverlayComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-search-overlay', template: "@if (IsOpen) {\n    <!-- Backdrop -->\n    <div class=\"search-backdrop\" (click)=\"OnBackdropClick()\"></div>\n\n    <!-- Spotlight container -->\n    <div class=\"search-spotlight\" (click)=\"$event.stopPropagation()\">\n        <!-- Search input area -->\n        <div class=\"search-input-wrap\">\n            <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n            <input\n                #searchInput\n                type=\"text\"\n                class=\"search-input\"\n                [placeholder]=\"Placeholder\"\n                [value]=\"Query\"\n                (input)=\"OnQueryInput($any($event.target).value)\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n            />\n            @if (IsSearching) {\n                <div class=\"search-spinner\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                </div>\n            }\n            <div class=\"search-shortcut-hint\">\n                <kbd>ESC</kbd>\n            </div>\n        </div>\n\n        <!-- Results area -->\n        <div class=\"search-results-area\">\n            @if (ShowFilters && Filters.length > 0) {\n                <!-- Filter chips -->\n                <div class=\"search-filter-bar\">\n                    @for (filter of Filters; track filter.Category) {\n                        @for (option of filter.Options; track option.Value) {\n                            <button\n                                class=\"filter-chip\"\n                                [class.filter-chip-active]=\"IsFilterActive(filter.Category, option.Value)\"\n                                (click)=\"OnFilterToggle(filter.Category, option.Value)\"\n                            >\n                                @if (option.Icon) {\n                                    <i [class]=\"option.Icon\"></i>\n                                }\n                                <span>{{ option.Label }}</span>\n                                <span class=\"filter-chip-count\">{{ option.Count }}</span>\n                            </button>\n                        }\n                    }\n                    @if (hasActiveFilters()) {\n                        <button class=\"filter-clear-btn\" (click)=\"ClearAllFilters()\">\n                            <i class=\"fa-solid fa-times\"></i> Clear\n                        </button>\n                    }\n                </div>\n            }\n\n            @if (HasSearched && AllResults.length === 0 && !IsSearching) {\n                <!-- No results -->\n                <div class=\"search-empty-state\">\n                    <i class=\"fa-solid fa-search search-empty-icon\"></i>\n                    <p class=\"search-empty-title\">No results found</p>\n                    <p class=\"search-empty-text\">Try different keywords or remove some filters</p>\n                    @if (ShowAgentCta) {\n                        <button class=\"agent-cta-btn\" (click)=\"OnAgentCtaClick()\">\n                            <i class=\"fa-solid fa-robot\"></i>\n                            {{ AgentCtaText }}\n                        </button>\n                    }\n                </div>\n            }\n\n            @if (!HasSearched && !IsSearching) {\n                <!-- Recent searches -->\n                <div class=\"search-recent\">\n                    @if (searchService.RecentSearches$.value.length > 0) {\n                        <div class=\"search-recent-header\">\n                            <span class=\"search-recent-title\">Recent Searches</span>\n                        </div>\n                        @for (recent of searchService.RecentSearches$.value; track recent.Query; let i = $index) {\n                            @if (i < 5) {\n                                <div class=\"search-recent-item\" (click)=\"OnQueryInput(recent.Query)\">\n                                    <i class=\"fa-solid fa-clock search-recent-icon\"></i>\n                                    <span>{{ recent.Query }}</span>\n                                    <span class=\"search-recent-count\">{{ recent.ResultCount }} results</span>\n                                </div>\n                            }\n                        }\n                    } @else {\n                        <div class=\"search-empty-state search-empty-state-compact\">\n                            <i class=\"fa-solid fa-magnifying-glass search-empty-icon\"></i>\n                            <p class=\"search-empty-text\">Start typing to search across all your knowledge</p>\n                        </div>\n                    }\n                </div>\n            }\n\n            @if (AllResults.length > 0) {\n                <!-- Grouped results -->\n                @for (group of ResultGroups; track group.SourceType) {\n                    <div class=\"result-group\">\n                        <div class=\"result-group-header\">\n                            <i [class]=\"group.Icon\"></i>\n                            <span class=\"result-group-label\">{{ group.Label }}</span>\n                            <span class=\"result-group-count\">{{ group.TotalCount }}</span>\n                        </div>\n                        @for (result of group.Results; track result.ID; let ri = $index) {\n                            <div\n                                class=\"result-item\"\n                                [class.result-item-highlighted]=\"isResultHighlighted(result)\"\n                                (click)=\"OnResultClick(result, $event)\"\n                                (mouseenter)=\"HighlightedIndex = getFlatIndex(result)\"\n                            >\n                                <div class=\"result-item-icon\">\n                                    <i [class]=\"result.SourceIcon\"></i>\n                                </div>\n                                <div class=\"result-item-content\">\n                                    <div class=\"result-item-title\">{{ result.Title }}</div>\n                                    <div class=\"result-item-snippet\">{{ result.Snippet }}</div>\n                                    @if (result.Tags.length > 0) {\n                                        <div class=\"result-item-tags\">\n                                            @for (tag of result.Tags; track tag; let ti = $index) {\n                                                @if (ti < 3) {\n                                                    <span class=\"result-tag\">{{ tag }}</span>\n                                                }\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"result-item-score\">\n                                    <span class=\"score-badge\">{{ FormatScore(result.Score) }}</span>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                }\n\n                <!-- Footer -->\n                <div class=\"search-footer\">\n                    <span class=\"search-footer-count\">\n                        {{ TotalCount }} results in {{ FormatElapsedTime(ElapsedMs) }}\n                    </span>\n                    @if (ShowAgentCta) {\n                        <button class=\"agent-cta-btn agent-cta-btn-small\" (click)=\"OnAgentCtaClick()\">\n                            <i class=\"fa-solid fa-robot\"></i>\n                            {{ AgentCtaText }}\n                        </button>\n                    }\n                </div>\n            }\n        </div>\n    </div>\n}\n", styles: ["/* Search Overlay - Command Palette / Spotlight Style */\n\n.search-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--mj-bg-overlay);\n    backdrop-filter: blur(8px);\n    z-index: 1000;\n    animation: backdropFadeIn 0.2s ease;\n}\n\n@keyframes backdropFadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n.search-spotlight {\n    position: fixed;\n    top: 12%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 680px;\n    max-width: calc(100vw - 2rem);\n    max-height: 70vh;\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    border-radius: 14px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);\n    overflow: hidden;\n    animation: spotlightIn 0.25s ease;\n}\n\n@keyframes spotlightIn {\n    from {\n        opacity: 0;\n        transform: translateX(-50%) translateY(-10px) scale(0.98);\n    }\n    to {\n        opacity: 1;\n        transform: translateX(-50%) translateY(0) scale(1);\n    }\n}\n\n/* Search Input */\n.search-input-wrap {\n    display: flex;\n    align-items: center;\n    padding: 0.75rem 1rem;\n    border-bottom: 1px solid var(--mj-border-default);\n    gap: 0.75rem;\n}\n\n.search-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.1rem;\n    flex-shrink: 0;\n}\n\n.search-input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 1.1rem;\n    color: var(--mj-text-primary);\n    outline: none;\n    font-family: inherit;\n}\n\n.search-input::placeholder {\n    color: var(--mj-text-muted);\n}\n\n.search-spinner {\n    color: var(--mj-brand-primary);\n    font-size: 1rem;\n}\n\n.search-shortcut-hint kbd {\n    display: inline-block;\n    padding: 0.15rem 0.5rem;\n    border-radius: 4px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.75rem;\n    font-family: inherit;\n}\n\n/* Results Area */\n.search-results-area {\n    overflow-y: auto;\n    max-height: calc(70vh - 56px);\n}\n\n/* Filter Bar */\n.search-filter-bar {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.4rem;\n    padding: 0.6rem 1rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.filter-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    padding: 0.25rem 0.6rem;\n    border-radius: 9999px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.78rem;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.filter-chip:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-primary);\n}\n\n.filter-chip-active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n.filter-chip-count {\n    opacity: 0.6;\n    font-size: 0.72rem;\n}\n\n.filter-clear-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.25rem;\n    padding: 0.25rem 0.6rem;\n    border-radius: 9999px;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-muted);\n    font-size: 0.78rem;\n    cursor: pointer;\n}\n\n.filter-clear-btn:hover {\n    color: var(--mj-status-error);\n}\n\n/* Empty State */\n.search-empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 2.5rem 1rem;\n    gap: 0.5rem;\n}\n\n.search-empty-state-compact {\n    padding: 1.5rem 1rem;\n}\n\n.search-empty-icon {\n    font-size: 2rem;\n    color: var(--mj-text-muted);\n    margin-bottom: 0.5rem;\n}\n\n.search-empty-title {\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    font-size: 0.95rem;\n}\n\n.search-empty-text {\n    color: var(--mj-text-muted);\n    font-size: 0.85rem;\n}\n\n/* Recent Searches */\n.search-recent {\n    padding: 0.5rem 0;\n}\n\n.search-recent-header {\n    padding: 0.5rem 1rem;\n}\n\n.search-recent-title {\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n}\n\n.search-recent-item {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.5rem 1rem;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 0.9rem;\n    transition: background 0.1s ease;\n}\n\n.search-recent-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.search-recent-icon {\n    font-size: 0.8rem;\n    color: var(--mj-text-muted);\n}\n\n.search-recent-count {\n    margin-left: auto;\n    font-size: 0.75rem;\n    color: var(--mj-text-muted);\n}\n\n/* Result Groups */\n.result-group {\n    padding: 0.25rem 0;\n}\n\n.result-group-header {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 1rem;\n    color: var(--mj-text-muted);\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 600;\n}\n\n.result-group-label {\n    flex: 1;\n}\n\n.result-group-count {\n    font-size: 0.72rem;\n    color: var(--mj-text-disabled);\n}\n\n/* Result Items */\n.result-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    padding: 0.6rem 1rem;\n    cursor: pointer;\n    transition: background 0.1s ease;\n}\n\n.result-item:hover,\n.result-item-highlighted {\n    background: var(--mj-bg-surface-hover);\n}\n\n.result-item-icon {\n    width: 2rem;\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n    font-size: 0.85rem;\n    flex-shrink: 0;\n    margin-top: 0.1rem;\n}\n\n.result-item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.result-item-title {\n    color: var(--mj-text-primary);\n    font-weight: 500;\n    font-size: 0.9rem;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.result-item-snippet {\n    color: var(--mj-text-muted);\n    font-size: 0.8rem;\n    line-height: 1.4;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin-top: 0.15rem;\n}\n\n.result-item-tags {\n    display: flex;\n    gap: 0.3rem;\n    margin-top: 0.3rem;\n}\n\n.result-tag {\n    display: inline-block;\n    padding: 0.1rem 0.4rem;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-muted);\n    font-size: 0.7rem;\n}\n\n.result-item-score {\n    flex-shrink: 0;\n    margin-top: 0.2rem;\n}\n\n.score-badge {\n    display: inline-block;\n    padding: 0.15rem 0.45rem;\n    border-radius: 9999px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 0.72rem;\n    font-weight: 600;\n}\n\n/* Footer */\n.search-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.5rem 1rem;\n    border-top: 1px solid var(--mj-border-subtle);\n}\n\n.search-footer-count {\n    color: var(--mj-text-muted);\n    font-size: 0.78rem;\n}\n\n/* Agent CTA Button */\n.agent-cta-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.6rem 1.2rem;\n    border-radius: 8px;\n    border: none;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    font-size: 0.85rem;\n    font-weight: 500;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.agent-cta-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n.agent-cta-btn-small {\n    padding: 0.35rem 0.8rem;\n    font-size: 0.78rem;\n}\n\n/* Mobile responsive */\n@media (max-width: 640px) {\n    .search-spotlight {\n        top: 0;\n        left: 0;\n        right: 0;\n        transform: none;\n        width: 100%;\n        max-width: 100%;\n        max-height: 100vh;\n        border-radius: 0;\n    }\n\n    .search-results-area {\n        max-height: calc(100vh - 56px);\n    }\n\n    .search-filter-bar {\n        overflow-x: auto;\n        flex-wrap: nowrap;\n        -webkit-overflow-scrolling: touch;\n    }\n}\n"] }]
+    }], null, { searchInputRef: [{
+            type: ViewChild,
+            args: ['searchInput']
+        }], Placeholder: [{
+            type: Input
+        }], MaxResults: [{
+            type: Input
+        }], IsOpen: [{
+            type: Input
+        }], DebounceMs: [{
+            type: Input
+        }], IncludeSources: [{
+            type: Input
+        }], ShowFilters: [{
+            type: Input
+        }], AgentCtaText: [{
+            type: Input
+        }], ShowAgentCta: [{
+            type: Input
+        }], IsOpenChange: [{
+            type: Output
+        }], ResultSelected: [{
+            type: Output
+        }], FilterChanged: [{
+            type: Output
+        }], SearchExecuted: [{
+            type: Output
+        }], AgentCtaClicked: [{
+            type: Output
+        }], HandleGlobalKeydown: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchOverlayComponent, { className: "SearchOverlayComponent", filePath: "src/lib/search-overlay.component.ts", lineNumber: 44 }); })();
+//# sourceMappingURL=search-overlay.component.js.map