import{i as h,b as n,a as c,r as p,t as b}from"./vendor-lit-B2r-dKc0.js";import{a as d}from"./vendor-mini-lit-CpUQub-j.js";import{bf as f}from"./app-session-runtime-CeFJDILJ.js";import{ac as m,X as v}from"./vendor-lucide-B9Yl1Gez.js";import"./vendor-marked-_iteVaMm.js";import"./app-review-C3CmcSYC.js";import"./app-panel-workspace-C3XDRCgE.js";import"./app-routing-C_r2pdnC.js";import"./app-message-reducer-wATqnZGf.js";import"./vendor-sortable-B1o3v0Qs.js";import"./app-inbox-CaZD85aD.js";import"./app-pr-walkthrough-WipZACSB.js";var y=Object.defineProperty,_=Object.getOwnPropertyDescriptor,s=(e,r,l,i)=>{for(var t=i>1?void 0:i?_(r,l):r,u=e.length-1,a;u>=0;u--)(a=e[u])&&(t=(i?a(r,l,t):a(t))||t);return i&&t&&y(r,l,t),t};let o=class extends h{constructor(){super(...arguments),this.query="",this.collapsed=!1,this.showControls=!1,this._focused=!1,this._debounceTimer=null}createRenderRoot(){return this}disconnectedCallback(){super.disconnectedCallback(),this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null)}_handleInput(e){const r=e.target.value;this.query=r,this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>{this._debounceTimer=null,this.dispatchEvent(new CustomEvent("search-input",{bubbles:!0,composed:!0,detail:{query:this.query}}))},200)}_handleKeydown(e){e.key==="Escape"&&(e.preventDefault(),this._clear(),e.target.blur())}_clear(){this.query="",this._debounceTimer&&(clearTimeout(this._debounceTimer),this._debounceTimer=null),this.dispatchEvent(new CustomEvent("search-clear",{bubbles:!0,composed:!0}))}_fullSearch(){this.dispatchEvent(new CustomEvent("full-search-click",{bubbles:!0,composed:!0,detail:{query:this.query}}))}render(){return this.collapsed?n``:n`
			<div>
				<div class="relative pb-1">
					<div class="relative flex items-center">
						<span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none ${this._focused?"text-foreground":""}">
							${d(m,"sm")}
						</span>
						<input
							data-search
							type="text"
							.value=${this.query}
							placeholder="Search…"
							class="w-full h-7 pl-8 pr-8 border border-input bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow]"
							@input=${this._handleInput}
							@keydown=${this._handleKeydown}
							@focus=${()=>{this._focused=!0}}
							@blur=${()=>{this._focused=!1}}
						/>
						${this.query?n`
								<button
									class="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded text-muted-foreground hover:text-foreground transition-colors"
									@click=${this._clear}
									aria-label="Clear search"
								>
									${d(v,"sm")}
								</button>`:(()=>{const e=f("focus-search",{prefix:"",suffix:""});return e&&!this._focused?n`<kbd class="absolute right-1.5 top-1/2 -translate-y-1/2 px-1 py-px text-[10px] leading-none rounded border border-border text-muted-foreground/70 bg-muted/40 pointer-events-none select-none">${e}</kbd>`:""})()}
					</div>
				</div>
				<div class="overflow-hidden transition-all duration-200 ease-in-out" style="max-height: ${this.showControls?"28px":"0"}; opacity: ${this.showControls?"1":"0"}">
					<div class="flex items-center justify-end px-2 py-0.5 text-[11px]">
						<button class="text-primary hover:text-primary/80 hover:underline transition-colors" @click=${this._fullSearch}>
							Full Search
						</button>
					</div>
				</div>
			</div>
		`}};s([c({type:String})],o.prototype,"query",2);s([c({type:Boolean})],o.prototype,"collapsed",2);s([c({type:Boolean})],o.prototype,"showControls",2);s([p()],o.prototype,"_focused",2);o=s([b("search-box")],o);export{o as SearchBox};
