@magicx-eng/ai-autocomplete-vanilla 0.1.0

package/index.mjs

@@ -0,0 +1,619 @@
+function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.indexOf(" ");return i===-1?"":n.slice(i+1)}function R(s,e){let t=s.trimEnd();if(t.length===0||e.length===0)return 0;let n=t.split(/\s+/),i=e.toLowerCase();for(let o=0;o<n.length;o++){let a=n.slice(o).join(" ");if(i.startsWith(a.toLowerCase())){let l=t.length-a.length;return s.length-l}}return 0}function C(s,e){if(!s)return[];let t=e.trimStart();if(!t)return s;let n=t.toLowerCase();return s.filter(i=>!i.is_tappable||i.text.toLowerCase().includes(n))}function E(s,e){if(!s)return null;let t=e.trim();if(!t)return null;let n=t.toLowerCase();return s.find(i=>i.is_tappable&&i.text.toLowerCase()===n)??null}var P=class{constructor(e,t="auto"){this.container=e;this.mode=t;this.mediaQuery=null;this.onSystemChange=e=>{this.container.dataset.mode=e.matches?"dark":"light"};this.apply()}setMode(e){this.detachListener(),this.mode=e,this.apply()}destroy(){this.detachListener()}apply(){this.mode==="auto"?(this.mediaQuery??(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)")),this.mediaQuery.addEventListener("change",this.onSystemChange),this.container.dataset.mode=this.mediaQuery.matches?"dark":"light"):this.container.dataset.mode=this.mode}detachListener(){this.mediaQuery?.removeEventListener("change",this.onSystemChange)}};function H(s,e){let t=[],n=0;for(let o of e){let a=s.indexOf(o.text,n);a!==-1&&(a>n&&t.push({type:"text",value:s.slice(n,a)}),t.push({type:"completed",value:o.text,param:o}),n=a+o.text.length)}let i=s.slice(n);return i&&t.push({type:"text",value:i}),t}function N(s,e){let t=[],n=[],i=0;for(let o of e){let a=s.indexOf(o.text,i);a===-1?n.push(o):(t.push(o),i=a+o.text.length)}return{valid:t,invalid:n}}var w=class{constructor(e){this.config=e;this.current=null;this.expiresAt=null;this.inFlightRefresh=null;e.accessToken&&(this.current=e.accessToken)}async getToken(e=!1){if(!e&&this.current&&!this.isExpired())return this.current;if(this.inFlightRefresh)return this.inFlightRefresh;this.inFlightRefresh=this.refresh();try{return await this.inFlightRefresh}finally{this.inFlightRefresh=null}}async refresh(){let e=await this.config.getAccessToken();return this.current=e.accessToken,this.expiresAt=e.expiresAt??null,this.current}isExpired(){return this.expiresAt==null?!1:Date.now()>=this.expiresAt-3e4}};var Z="0.1.17",F=!1;function ee(){return crypto.randomUUID()}function te(s,e){return{placeholder:s.placeholder,type:s.type,...e&&{text:s.text},kind:s.kind}}function $(s){return s?.type==="accessToken"}function ne(s){if(!(!s||$(s)))return s}var K=new WeakMap;function oe(s){let e=K.get(s);return e||(e=new w(s),K.set(s,e)),e}function ie(s,e,t){let n=e.find(o=>o.type==="contact"&&o.metadata?.contact_account_count)?.metadata?.contact_account_count,i=typeof n=="number"?n:void 0;return{data:{raw_query:s,completed_params:e.map(o=>te(o,t)),...i!=null&&{contact_account_count:i}},meta:{request_id:ee(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:Z}}}function se(s){return{"Content-Type":"application/json",...s?.appIdentifier&&{"X-App-Identifier":s.appIdentifier},...s?.headers}}async function B(s,e,t,n,i){return fetch(s,{method:"POST",headers:{...e,Authorization:`Bearer ${t}`},body:n,signal:i})}async function q(s,e,t){let n=t?.apiConfig,i=!t?.maskCompletedText,o=ie(s,e,i),a=se(n),l=n?.endpoint??"/ac/suggest",r=JSON.stringify(o);if($(n)){let g=oe(n),u=await g.getToken(),m=await B(l,a,u,r,t?.signal);if(m.status===401){let f=await g.getToken(!0);m=await B(l,a,f,r,t?.signal)}if(!m.ok)throw new Error(`API error: ${m.status} ${m.statusText}`);return m.json()}let c=ne(n),p=c?.apiKey??"";if(!p&&!F&&(F=!0,console.warn("[AIAutocomplete] No apiKey in apiConfig. Requests will be sent without an Authorization header.")),p){let g=c?.authScheme??"Bearer";a.Authorization=g==="Basic"?`Basic ${btoa(p)}`:`Bearer ${p}`}let d=await fetch(l,{method:"POST",headers:a,body:r,signal:t?.signal});if(!d.ok)throw new Error(`API error: ${d.status} ${d.statusText}`);return d.json()}function b(s,e){let t=s,n={},i=[];for(let o of e){let a=(n[o.type]??0)+1;n[o.type]=a;let r=`{{${o.type.toUpperCase().replace(/\s+/g,"_")}_${a}}}`,c=t.indexOf(o.text);c!==-1&&(t=t.slice(0,c)+r+t.slice(c+o.text.length)),i.push({...o,placeholder:r})}return{rawQuery:t,completedParams:i}}function Q(s,e){return e?s.map(t=>{let n=e[t.type];if(!n)return t;let i=n("");if(i.length===0)return t;let o=new Set(i.map(l=>l.text)),a=(t.options??[]).filter(l=>!o.has(l.text));return{...t,options:[...i,...a]}}):s}var re=100,ae=300,le=2,T=class{constructor(e,t,n,i,o){this.store=e;this.getApiConfig=t;this.getOptionOverrides=n;this.getMaskCompletedText=i;this.getOnError=o;this.fetchVersion=0;this.abortController=null;this.debounceTimer=null;this.slowDebounceTimer=null;this.unsubscribe=null}start(){this.doFetch("",[]);let e=this.store.get().text,t=this.store.get().completedParams;this.unsubscribe=this.store.subscribe(n=>{(n.text!==e||n.completedParams!==t)&&(e=n.text,t=n.completedParams,this.scheduleFetch())})}dispose(){this.abortController?.abort(),this.clearTimers(),this.unsubscribe?.()}async doFetch(e,t){this.abortController?.abort();let n=new AbortController;this.abortController=n;let i=++this.fetchVersion,o=this.store.get(),a=o.text.length;o.suggestions.some(r=>r.type!=="placeholder")||this.store.set({isLoading:!0}),this.store.set({error:null});try{let r=await q(e,t,{maskCompletedText:this.getMaskCompletedText(),signal:n.signal,apiConfig:this.getApiConfig()});if(i!==this.fetchVersion)return;let c=Q(r.data.suggestions??[],this.getOptionOverrides()),p=r.data.input??[],d=p[p.length-1],g=this.store.get().text,u,m;if(d?.state==="in_progress"){m=!0;let x=g.toLowerCase().lastIndexOf(d.text.toLowerCase());u=x!==-1?x:a}else m=!1,u=a;let h=c.filter(x=>x.type!=="placeholder")[0],A=null;if(h){let x=y(g,u,m),v=E(h.options,x);v&&(A={id:crypto.randomUUID(),placeholder:"",type:h.type,text:v.text,kind:v.kind,suggestionType:h.type,suggestionPlaceholder:h.text,options:h.options??[],metadata:v.metadata},c=c.filter(J=>J!==h))}this.store.set(x=>({suggestions:c,isLoading:!1,isReady:r.data.is_ready??!1,lastRawQuery:e,activeDropdownIndex:-1,filterBase:u,filterInProgress:m,...A?{completedParams:[...x.completedParams,A]}:{}}))}catch(r){if(i===this.fetchVersion){let c=r instanceof Error?r:new Error(String(r));this.store.set({error:c,isLoading:!1}),this.getOnError()?.(c)}}}scheduleFetch(){if(this.clearTimers(),this.store.get().skipNextFetch){this.store.set({skipNextFetch:!1});return}let t=n=>{let i=this.store.get();if(!i.text&&i.completedParams.length===0)return this.doFetch("",[]),!0;let o=y(i.text,i.filterBase,i.filterInProgress),l=i.suggestions.filter(h=>h.type!=="placeholder")[0],c=(l?C(l.options,o):[]).filter(h=>h.is_tappable),p=l?E(l.options,o)!==null:!1,d=o.trim().length>0;if(c.length>0&&!p&&d)return!1;let{rawQuery:g,completedParams:u}=b(i.text,i.completedParams),m=g.length<i.lastRawQuery.length,f=Math.abs(g.length-i.lastRawQuery.length);return m||f>=n?(this.doFetch(g,u),!0):!1};this.debounceTimer=setTimeout(()=>{t(le)&&this.slowDebounceTimer&&clearTimeout(this.slowDebounceTimer)},re),this.slowDebounceTimer=setTimeout(()=>t(1),ae)}clearTimers(){this.debounceTimer&&clearTimeout(this.debounceTimer),this.slowDebounceTimer&&clearTimeout(this.slowDebounceTimer),this.debounceTimer=null,this.slowDebounceTimer=null}};var S=class{constructor(e,t){this.store=e;this.ctx=t}handleKeyDown(e){let t=this.store.get(),{columns:n,listboxId:i,onSubmit:o}=this.ctx,a=this.getTappableIndices();switch(e.key){case"ArrowDown":{let l=e.target;if(!(l.selectionStart!=null&&l.selectionStart===l.value.length)&&t.activeDropdownIndex<0)break;if(e.preventDefault(),!t.isDropdownOpen&&t.actionableSuggestions.length>0){this.store.set({pillTapped:!0,activeDropdownIndex:a[0]??0});break}if(a.length===0)return;let c=a.indexOf(t.activeDropdownIndex),p=c<a.length-1?c+1:0;this.store.set({activeDropdownIndex:a[p]});break}case"ArrowUp":{if(a.length===0||t.activeDropdownIndex<0)break;if(e.preventDefault(),t.activeDropdownIndex<n){this.store.set({activeDropdownIndex:-1});break}let l=a.indexOf(t.activeDropdownIndex),r=l>0?l-1:a.length-1;this.store.set({activeDropdownIndex:a[r]});break}case"ArrowRight":{if(t.activeDropdownIndex<0){let r=e.target;r.selectionStart!=null&&r.selectionStart===r.value.length&&t.actionableSuggestions.length>1&&(e.preventDefault(),this.pillsSetActivePill(1));break}if(t.activeDropdownIndex%n<n-1){let r=t.activeDropdownIndex+1;r<t.filteredOptions.length&&t.filteredOptions[r]?.is_tappable&&(e.preventDefault(),this.store.set({activeDropdownIndex:r}))}break}case"ArrowLeft":{if(t.activeDropdownIndex<0)break;if(t.activeDropdownIndex%n>0){let l=t.activeDropdownIndex-1;l>=0&&t.filteredOptions[l]?.is_tappable&&(e.preventDefault(),this.store.set({activeDropdownIndex:l}))}break}case"Enter":{if(e.preventDefault(),t.activeDropdownIndex>=0&&t.filteredOptions[t.activeDropdownIndex]?.is_tappable)this.clickOrSelect(t.activeDropdownIndex,t.filteredOptions,i);else if(o){let{rawQuery:l,completedParams:r}=b(t.text,t.completedParams);o({query:t.text.trim(),raw_query:l,completed_params:r})}break}case"Tab":{if(t.activeDropdownIndex>=0&&t.filteredOptions[t.activeDropdownIndex]?.is_tappable)e.preventDefault(),this.clickOrSelect(t.activeDropdownIndex,t.filteredOptions,i);else if(t.isDropdownOpen){let l=t.filteredOptions.findIndex(r=>r.is_tappable);l>=0&&(e.preventDefault(),this.clickOrSelect(l,t.filteredOptions,i))}else if(!t.text&&t.placeholderText){e.preventDefault();let l=t.suggestions.find(r=>r.type==="placeholder");l?this.store.set(r=>({text:t.placeholderText,filterBase:t.placeholderText.length,completedParams:[...r.completedParams,{id:crypto.randomUUID(),placeholder:"",type:l.type,text:t.placeholderText,kind:null,suggestionType:l.type,suggestionPlaceholder:l.text,options:l.options??[]}],suggestions:r.suggestions.filter(c=>c!==l)})):this.store.set({text:t.placeholderText,filterBase:t.placeholderText.length})}break}case"Escape":this.store.set({activeDropdownIndex:-1});break}}getTappableIndices(){let e=this.store.get(),{columns:t}=this.ctx,n=e.filteredOptions.map((o,a)=>o.is_tappable?a:-1).filter(o=>o!==-1),i=Array.from({length:t},()=>[]);for(let o of n)i[o%t].push(o);return i.flat()}clickOrSelect(e,t,n){let i=document.getElementById(`${n}-option-${e}`);i?i.click():this.ctx.selectOption(t[e])}pillsSetActivePill(e){let t=this.store.get(),n=t.suggestions.filter(l=>l.type!=="placeholder");if(e<0||e>=n.length)return;let i=n[e],o=n.filter((l,r)=>r!==e),a=t.suggestions.filter(l=>l.type==="placeholder");this.store.set({suggestions:[...a,i,...o],pillTapped:!0,activeDropdownIndex:-1})}};var O=class{constructor(e){this.store=e}setActivePill(e){let t=this.store.get(),n=t.suggestions.filter(l=>l.type!=="placeholder");if(e<0||e>=n.length)return;let i=n[e],o=n.filter((l,r)=>r!==e),a=t.suggestions.filter(l=>l.type==="placeholder");this.store.set({suggestions:[...a,i,...o],pillTapped:!0,activeDropdownIndex:-1})}removeLastParam(){let e=this.store.get();if(e.completedParams.length===0)return;let t=e.completedParams[e.completedParams.length-1],n={type:t.suggestionType,text:t.suggestionPlaceholder,required:!0,options:t.options};this.store.set(i=>({completedParams:i.completedParams.slice(0,-1),suggestions:[n,...i.suggestions],activeDropdownIndex:-1}))}};function ce(s){return s===0?.4:s===1?.3:.15}function I(s,e,t,n,i=!1){let o=s.querySelector(".magicx-ac-pill-list");o||(o=document.createElement("span"),o.className="magicx-ac-pill-list",s.appendChild(o));let a=new Map;for(let r of o.querySelectorAll(".magicx-ac-pill"))a.set(r.dataset.pillKey??"",r);let l=new Set;for(let r=0;r<e.length;r++){let c=e[r],p=`${c.type}-${c.text}`;l.add(p);let d=a.get(p);d||(d=document.createElement("button"),d.type="button",d.dataset.pillKey=p,d.textContent=c.text),d.className=`magicx-ac-pill${i?" magicx-ac-pill--rounded":""}${r===t?" magicx-ac-pill--active":""}`,d.style.opacity=String(ce(r)),d.onclick=()=>n(r),o.children[r]!==d&&o.insertBefore(d,o.children[r]??null)}for(let[r,c]of a)l.has(r)||c.remove()}function j(s){let e=document.createElement("div");return e.id=s,e.setAttribute("role","listbox"),e.setAttribute("data-ac-dropdown",""),e.className="magicx-ac-dropdown",e.addEventListener("mousedown",t=>t.preventDefault()),e}function V(s,e){let{filteredOptions:t,activeIndex:n,isOpen:i,pills:o,showPills:a,onSelect:l,onHighlight:r,onPillClick:c}=e,p=a&&o.length>0;i&&t.length>0||i&&p?s.classList.add("magicx-ac-dropdown--visible"):s.classList.remove("magicx-ac-dropdown--visible");let u=s.querySelector(".magicx-ac-pill-bar");p?(u||(u=document.createElement("div"),u.className="magicx-ac-pill-bar",s.insertBefore(u,s.firstChild)),I(u,o,0,c,!0)):u&&u.remove();let m=s.querySelector(".magicx-ac-grid");t.length>0?(m||(m=document.createElement("div"),m.className="magicx-ac-grid",s.appendChild(m)),pe(m,t,n,l,r,e.listboxId)):m&&(m.innerHTML="")}var U="";function pe(s,e,t,n,i,o){let a=e.map(r=>r.text).join("\0"),l=a!==U;if(U=a,l){let r=document.createDocumentFragment();for(let c=0;c<e.length;c++){let p=e[c],d=de(p,c,t,n,i,o);r.appendChild(d)}s.innerHTML="",s.appendChild(r)}else{let r=s.querySelectorAll(".magicx-ac-option");for(let c=0;c<r.length;c++){let p=r[c],d=c===t;p.setAttribute("aria-selected",String(d)),d?p.classList.add("magicx-ac-option--highlighted"):p.classList.remove("magicx-ac-option--highlighted")}}}function de(s,e,t,n,i,o){let a=document.createElement("div");a.id=`${o}-option-${e}`,a.setAttribute("role","option"),a.setAttribute("aria-selected",String(e===t)),a.tabIndex=s.is_tappable?0:-1;let l=["magicx-ac-option"];e===t&&l.push("magicx-ac-option--highlighted"),s.is_tappable?l.push("magicx-ac-option--tappable"):l.push("magicx-ac-option--non-tappable"),a.className=l.join(" ");let r=document.createElement("div");r.className="magicx-ac-streaks",a.appendChild(r);let c=document.createElement("div");c.className="magicx-ac-streaks-vert",a.appendChild(c);let p=document.createElement("span");if(p.className="magicx-ac-option-content",p.textContent=s.icon?`${s.icon} ${s.text}`:s.text,s.tag){let d=document.createElement("span");d.className="magicx-ac-option-tag",d.textContent=s.tag,p.appendChild(d)}return a.appendChild(p),s.is_tappable&&a.addEventListener("click",()=>{a.classList.add("magicx-ac-option--pressed"),n(s),setTimeout(()=>a.classList.remove("magicx-ac-option--pressed"),400)}),a.addEventListener("mouseenter",()=>i(e)),a}var D="",z=null;function W(s,e,t,n,i){let o=s.querySelector(".magicx-ac-sizer-text"),a=s.querySelector(".magicx-ac-placeholder");if(n&&i){o&&(o.style.display="none"),a||(a=document.createElement("span"),a.className="magicx-ac-placeholder",s.insertBefore(a,s.firstChild)),a.style.display="",a.textContent=`${i} `,D="";return}a&&(a.style.display="none"),o||(o=document.createElement("span"),o.className="magicx-ac-sizer-text",s.insertBefore(o,s.firstChild)),o.style.display="",o.className=`magicx-ac-sizer-text${t?" magicx-ac-sizer-text--visible":""}`;let l=e.map(r=>`${r.type}:${r.value}`).join("\0");if(!(l===D&&t===z)){D=l,z=t,o.innerHTML="";for(let r of e){let c=document.createElement("span");r.type==="completed"&&(r.param.id===t?c.className="magicx-ac-shimmer-revealed magicx-ac-shimmer-sweep":c.className="magicx-ac-segment magicx-ac-segment--completed"),c.textContent=r.value,o.appendChild(c)}e.length===0&&(o.textContent="\xA0")}}var ue='<svg width="18" height="18" viewBox="0 0 18 18" fill="none" role="img" aria-label="Submit"><path d="M9 14V4M9 4L4 9M9 4L14 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';function G(s,e){let{listboxId:t}=e,n=j(t);s.appendChild(n);let i=document.createElement("div");i.className="magicx-ac-input-wrapper",s.appendChild(i);let o=document.createElement("div");o.className="magicx-ac-editor",i.appendChild(o);let a=document.createElement("div");a.className="magicx-ac-sizer",a.setAttribute("aria-hidden","true"),o.appendChild(a);let l=document.createElement("span");a.appendChild(document.createTextNode("  ")),a.appendChild(l);let r=document.createElement("textarea");r.className="magicx-ac-textarea",r.rows=1,r.setAttribute("role","combobox"),r.setAttribute("aria-autocomplete","list"),r.setAttribute("aria-controls",t),o.appendChild(r);let c=document.createElement("button");return c.type="button",c.className="magicx-ac-submit",c.setAttribute("aria-label","Submit"),c.innerHTML=ue,i.appendChild(c),i.addEventListener("click",()=>r.focus()),r.addEventListener("input",()=>{let p=r.value,g=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;e.handleChange(g)}),r.addEventListener("keydown",p=>e.handleKeyDown(p)),c.addEventListener("click",p=>{p.stopPropagation();let d=e.store.get();if(!(!!d.text||d.completedParams.length>0)||!e.onSubmit)return;let{rawQuery:u,completedParams:m}=b(d.text,d.completedParams);e.onSubmit({query:d.text.trim(),raw_query:u,completed_params:m})}),r.focus(),{textarea:r,dropdown:n,sizer:a,submitButton:c,inlinePillContainer:l}}function k(s,e,t){let{textarea:n,dropdown:i,sizer:o,submitButton:a,inlinePillContainer:l}=s,{pillPlacement:r,setActivePill:c,selectOption:p,store:d}=t;n.value!==e.text&&(n.value=e.text),e.placeholderText?n.placeholder=e.placeholderText:n.removeAttribute("placeholder"),n.setAttribute("aria-expanded",String(e.isDropdownOpen));let g=e.activeDropdownIndex>=0?`${t.listboxId}-option-${e.activeDropdownIndex}`:"";g?n.setAttribute("aria-activedescendant",g):n.removeAttribute("aria-activedescendant"),e.newParamId?n.classList.add("magicx-ac-textarea--hidden"):n.classList.remove("magicx-ac-textarea--hidden");let u=!!e.text||e.completedParams.length>0;a.disabled=!u,W(o,e.segments,e.newParamId,!e.text,e.placeholderText),r==="inline"?I(l,e.actionableSuggestions,0,c):l.innerHTML="",V(i,{suggestions:e.actionableSuggestions.length>0?[{...e.actionableSuggestions[0],options:e.filteredOptions}]:[],filteredOptions:e.filteredOptions,activeIndex:e.activeDropdownIndex,isOpen:e.isDropdownOpen,listboxId:t.listboxId,pills:e.actionableSuggestions,showPills:r==="dropdown",onSelect:p,onHighlight:m=>d.set({activeDropdownIndex:m}),onPillClick:c})}function L(s){let e=s,t=new Set;return{get:()=>e,set:n=>{let i=typeof n=="function"?n(e):n,o={...e,...i},a=e;e=o;for(let l of t)l(o,a)},subscribe:n=>(t.add(n),()=>{t.delete(n)})}}var M=!1;function X(){if(M||typeof document>"u")return;if(document.querySelector("style[data-magicx-ac]")){M=!0;return}M=!0;let s=document.createElement("style");s.setAttribute("data-magicx-ac",""),s.textContent=me,document.head.appendChild(s)}var me=`/* ===================================================================
+   Vanilla core styles \u2014 stable BEM class names (magicx-ac-*)
+   Auto-injected at runtime on first instantiation.
+   =================================================================== */
+
+/* --- Container --- */
+.magicx-ac {
+  position: relative;
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
+/* --- Input wrapper --- */
+.magicx-ac-input-wrapper {
+  min-height: 60px;
+  padding: 24px;
+  border: 1px solid var(--ac-color-border-default, #9ea5b2);
+  border-radius: 23px;
+  background: transparent;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* --- Editor area (overlay + textarea) --- */
+.magicx-ac-editor {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+/* --- Sizer (overlay for sizing + segment display) --- */
+.magicx-ac-sizer {
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
+  min-height: 60px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+  font-size: var(--ac-written-text-font-size, 19px);
+  line-height: 38px;
+}
+
+.magicx-ac-sizer-text {
+  color: transparent;
+}
+
+.magicx-ac-sizer-text--visible {
+  color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
+  font-size: var(--ac-written-text-font-size, inherit);
+}
+
+/* --- Placeholder --- */
+.magicx-ac-placeholder {
+  color: var(--ac-color-text-muted, #c1c4cb);
+  opacity: 0.7;
+}
+
+/* --- Textarea --- */
+.magicx-ac-textarea {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
+  caret-color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
+  font-family: inherit;
+  font-size: var(--ac-written-text-font-size, 19px);
+  line-height: 38px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  outline: none;
+  resize: none;
+  overflow: hidden;
+}
+
+.magicx-ac-textarea::placeholder {
+  color: var(--ac-color-text-muted, #c1c4cb);
+}
+
+.magicx-ac-textarea--hidden {
+  color: transparent !important;
+}
+
+/* --- Submit button --- */
+.magicx-ac-submit {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  background: var(--ac-color-text-default, #fff);
+  color: var(--ac-color-bg-default, #000);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: opacity 0.2s ease;
+}
+
+.magicx-ac-submit:hover {
+  opacity: 0.85;
+}
+
+/* --- Dropdown --- */
+.magicx-ac-dropdown {
+  --border-width: 1px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 6px;
+  border-radius: 1rem;
+  overflow: hidden;
+  z-index: 10;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  background: hsl(243 26% 15% / 0.25);
+  backdrop-filter: blur(12px);
+}
+
+.magicx-ac-dropdown::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  border: var(--border-width) solid transparent;
+  background: linear-gradient(hsl(259, 13%, 28%), hsl(252, 9%, 22%)) border-box;
+  mask:
+    linear-gradient(black, black) border-box,
+    linear-gradient(black, black) padding-box;
+  mask-composite: subtract;
+}
+
+.magicx-ac-dropdown--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* --- Pill bar (inside dropdown) --- */
+.magicx-ac-pill-bar {
+  padding: 27px 27px 0px 27px;
+}
+
+/* --- Pill list --- */
+.magicx-ac-pill-list {
+  position: relative;
+  z-index: 1;
+  pointer-events: auto;
+  display: inline-flex;
+  gap: 5px;
+  align-items: center;
+  vertical-align: middle;
+  transform: translateY(-3px);
+}
+
+/* --- Individual pill --- */
+.magicx-ac-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 13px 13px;
+  border: none;
+  border-radius: 6px;
+  background: var(--ac-pill-bg, var(--ac-color-background-supportive, #313255));
+  color: var(--ac-pill-color, var(--ac-color-text-muted, #c1c4cb));
+  font-family: "IBM Plex Sans", sans-serif;
+  font-size: var(--ac-pill-font-size, 19px);
+  line-height: 30px;
+  cursor: pointer;
+  white-space: nowrap;
+  animation: magicx-ac-fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.magicx-ac-pill--rounded {
+  border-radius: 999px;
+}
+
+.magicx-ac-pill:hover {
+  filter: brightness(1.2);
+}
+
+.magicx-ac-pill--active {
+  outline: 1px solid #5a5b8a;
+}
+
+@keyframes magicx-ac-fadeIn {
+  from {
+    opacity: 0;
+  }
+}
+
+/* --- Options grid --- */
+.magicx-ac-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 13px 13px;
+  max-height: 192px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.magicx-ac-grid::-webkit-scrollbar {
+  width: 6px;
+}
+
+.magicx-ac-grid::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.magicx-ac-grid::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+/* --- Option item --- */
+.magicx-ac-option {
+  position: relative;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  font-family: "IBM Plex Sans", sans-serif;
+  font-size: var(--ac-option-font-size, 19px);
+  line-height: 30px;
+  color: var(--ac-option-color, var(--ac-color-text-muted, #c1c4cb));
+  white-space: normal;
+  word-break: break-word;
+  opacity: 0.35;
+  border-radius: 12px;
+  padding: 13px 13px;
+  animation: magicx-ac-optionFadeIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes magicx-ac-optionFadeIn {
+  from {
+    opacity: 0;
+  }
+}
+
+.magicx-ac-option-content {
+  position: relative;
+  z-index: 2;
+}
+
+.magicx-ac-option--tappable {
+  cursor: pointer;
+}
+
+.magicx-ac-option--tappable:hover {
+  color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
+}
+
+.magicx-ac-option--non-tappable {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.magicx-ac-option--highlighted {
+  color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
+  background: var(--ac-option-bg, transparent);
+  opacity: 0.5;
+}
+
+.magicx-ac-option-tag {
+  font-size: 11px;
+  margin-left: 6px;
+  opacity: 0.5;
+}
+
+.magicx-ac-option--pressed {
+  opacity: 0.8;
+  color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
+  background: rgba(255, 255, 255, 0.06);
+  animation:
+    magicx-ac-glassFade 500ms ease forwards,
+    magicx-ac-tapDown 500ms ease forwards;
+}
+
+@keyframes magicx-ac-tapDown {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(0.97);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes magicx-ac-glassFade {
+  0% {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  100% {
+    background: transparent;
+  }
+}
+
+/* --- Streak animations --- */
+.magicx-ac-streaks {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.magicx-ac-streaks::before {
+  content: "";
+  position: absolute;
+  bottom: -3px;
+  left: 60%;
+  width: 0;
+  height: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0.2) 40%,
+    transparent 70%
+  );
+  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
+  filter: blur(1px);
+  border-radius: 50%;
+}
+
+.magicx-ac-streaks::after {
+  content: "";
+  position: absolute;
+  top: -3px;
+  right: 60%;
+  width: 0;
+  height: 6px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0.2) 40%,
+    transparent 70%
+  );
+  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
+  filter: blur(1px);
+  border-radius: 50%;
+}
+
+.magicx-ac-streaks-vert {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.magicx-ac-streaks-vert::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: -3px;
+  width: 6px;
+  height: 0;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 255, 255, 0.15) 40%,
+    transparent 70%
+  );
+  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
+  filter: blur(1px);
+  border-radius: 50%;
+}
+
+.magicx-ac-streaks-vert::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 6px;
+  height: 0;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 255, 255, 0.4) 0%,
+    rgba(255, 255, 255, 0.15) 40%,
+    transparent 70%
+  );
+  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
+  filter: blur(1px);
+  border-radius: 50%;
+}
+
+.magicx-ac-option--pressed .magicx-ac-streaks::before {
+  animation: magicx-ac-streakHorizRight 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.magicx-ac-option--pressed .magicx-ac-streaks::after {
+  animation: magicx-ac-streakHorizLeft 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.magicx-ac-option--pressed .magicx-ac-streaks-vert::before {
+  animation: magicx-ac-streakVertUp 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
+}
+.magicx-ac-option--pressed .magicx-ac-streaks-vert::after {
+  animation: magicx-ac-streakVertDown 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
+}
+
+@keyframes magicx-ac-streakHorizRight {
+  0% {
+    width: 0;
+    height: 4px;
+    opacity: 0;
+    filter: blur(1px);
+    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
+  }
+  15% {
+    height: 4px;
+    opacity: 1;
+    filter: blur(1px);
+    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
+  }
+  80% {
+    width: 50%;
+    height: 10px;
+    opacity: 0.8;
+    filter: blur(3px);
+    box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
+  }
+  100% {
+    width: 50%;
+    height: 12px;
+    opacity: 0;
+    filter: blur(5px);
+    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
+  }
+}
+
+@keyframes magicx-ac-streakHorizLeft {
+  0% {
+    width: 0;
+    height: 4px;
+    opacity: 0;
+    filter: blur(1px);
+    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
+  }
+  15% {
+    height: 4px;
+    opacity: 1;
+    filter: blur(1px);
+    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
+  }
+  80% {
+    width: 50%;
+    height: 10px;
+    opacity: 0.8;
+    filter: blur(3px);
+    box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
+  }
+  100% {
+    width: 50%;
+    height: 12px;
+    opacity: 0;
+    filter: blur(5px);
+    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
+  }
+}
+
+@keyframes magicx-ac-streakVertUp {
+  0% {
+    height: 0;
+    width: 6px;
+    opacity: 0.9;
+    filter: blur(1.8px);
+    box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
+  }
+  75% {
+    height: 100%;
+    width: 10px;
+    opacity: 0.4;
+    filter: blur(3px);
+    box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
+  }
+  100% {
+    height: 100%;
+    width: 14px;
+    opacity: 0;
+    filter: blur(5px);
+    box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
+  }
+}
+
+@keyframes magicx-ac-streakVertDown {
+  0% {
+    height: 0;
+    width: 6px;
+    opacity: 0.9;
+    filter: blur(1.8px);
+    box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
+  }
+  75% {
+    height: 100%;
+    width: 10px;
+    opacity: 0.4;
+    filter: blur(3px);
+    box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
+  }
+  100% {
+    height: 100%;
+    width: 14px;
+    opacity: 0;
+    filter: blur(5px);
+    box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
+  }
+}
+
+/* --- Shimmer --- */
+.magicx-ac-shimmer {
+  position: relative;
+  z-index: 2;
+  display: inline;
+}
+
+.magicx-ac-shimmer-revealed {
+  color: transparent;
+  background: linear-gradient(
+    120deg,
+    var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 0%,
+    var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 44%,
+    #b0b0b0 48%,
+    #b0b0b0 52%,
+    var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 56%,
+    var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 100%
+  );
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+.magicx-ac-shimmer-sweep {
+  animation: magicx-ac-textShimmer 650ms ease-out forwards;
+}
+
+@keyframes magicx-ac-textShimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -50% 0;
+  }
+}
+
+.magicx-ac-shimmer-hidden {
+  color: transparent !important;
+}
+
+/*
+ * Built-in appearance defaults \u2014 zero specificity via :where().
+ * Consumer CSS always wins without !important.
+ *
+ * Resolution priority (highest wins):
+ * 1. Consumer CSS targeting new vars (--ac-pill-bg, etc.)
+ * 2. Consumer CSS targeting legacy vars (--ac-color-*, via fallback chain)
+ * 3. These built-in defaults
+ */
+
+/* Light mode defaults (base) */
+:where(.magicx-ac),
+:where(.magicx-ac[data-mode="light"]) {
+  --ac-pill-bg: #f1f5f9;
+  --ac-pill-color: #475569;
+  --ac-pill-font-size: 19px;
+
+  --ac-option-bg: transparent;
+  --ac-option-color: #475569;
+  --ac-option-color-selected: #0f172a;
+  --ac-option-font-size: 19px;
+
+  --ac-written-text-color: #0f172a;
+  --ac-written-text-font-size: 19px;
+}
+
+/* Dark mode defaults */
+:where(.magicx-ac[data-mode="dark"]) {
+  --ac-pill-bg: #1e293b;
+  --ac-pill-color: #cbd5e1;
+  --ac-pill-font-size: 19px;
+
+  --ac-option-bg: transparent;
+  --ac-option-color: #cbd5e1;
+  --ac-option-color-selected: #f8fafc;
+  --ac-option-font-size: 19px;
+
+  --ac-written-text-color: #f1f5f9;
+  --ac-written-text-font-size: 19px;
+}
+
+/* optionsPosition: dropdown above the input */
+:where(.magicx-ac[data-options-position="above"]) [data-ac-dropdown] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+
+/* Disable all animations when data-animations="off" */
+:where(.magicx-ac[data-animations="off"]) *,
+:where(.magicx-ac[data-animations="off"]) *::before,
+:where(.magicx-ac[data-animations="off"]) *::after {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+`;var ge=0;function he(){return`:ac-${++ge}:`}function Y(){return{text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!1,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:""}}var _=class{constructor(e,t={}){this.store=L(Y());this.listboxId=he();this.modeController=null;this.unsubscribers=[];this.derivedInProgress=!1;this.domRefs=null;this.container=e,this.opts=t,t.value!==void 0&&this.store.set({text:t.value}),t.completedParams!==void 0&&this.store.set({completedParams:t.completedParams}),this.pillsController=new O(this.store),this.fetchController=new T(this.store,()=>this.opts.apiConfig,()=>this.opts.optionOverrides,()=>this.opts.maskCompletedText,()=>this.opts.onError),this.keyboardController=new S(this.store,{columns:t.columns??2,listboxId:this.listboxId,onSubmit:t.onSubmit,selectOption:n=>this.selectOption(n)}),this.unsubscribers.push(this.store.subscribe((n,i)=>{this.recomputeDerived(n,i)})),this.unsubscribers.push(this.store.subscribe((n,i)=>{n.text!==i.text&&this.opts.onChange?.(n.text),n.completedParams!==i.completedParams&&this.opts.onParamsChange?.(n.completedParams),this.opts.onStateChange?.(n)})),X(),this.setupContainer(),this.buildAndRender(),this.fetchController.start()}focus(){this.domRefs?.textarea.focus()}reset(){this.store.set({...Y()}),this.fetchController.doFetch("",[])}destroy(){this.fetchController.dispose(),this.modeController?.destroy(),this.newParamTimer&&clearTimeout(this.newParamTimer);for(let e of this.unsubscribers)e();this.unsubscribers=[],this.domRefs=null,this.container.innerHTML=""}setMode(e){this.modeController?.setMode(e)}setValue(e){this.store.set({text:e})}setCompletedParams(e){this.store.set({completedParams:e})}setActivePill(e){this.pillsController.setActivePill(e)}removeLastParam(){this.pillsController.removeLastParam()}clearNewParamId(){this.store.set({newParamId:null})}getState(){return this.store.get()}get isReady(){return this.store.get().isReady}on(e,t){switch(e){case"submit":return this.opts.onSubmit=t,this.keyboardController=new S(this.store,{columns:this.opts.columns??2,listboxId:this.listboxId,onSubmit:this.opts.onSubmit,selectOption:n=>this.selectOption(n)}),()=>{this.opts.onSubmit=void 0};case"error":return this.opts.onError=t,()=>{this.opts.onError=void 0};case"change":return this.opts.onChange=t,()=>{this.opts.onChange=void 0};case"paramsChange":return this.opts.onParamsChange=t,()=>{this.opts.onParamsChange=void 0};case"stateChange":return this.opts.onStateChange=t,()=>{this.opts.onStateChange=void 0};default:return()=>{}}}update(e){Object.assign(this.opts,e),e.mode!==void 0&&this.modeController?.setMode(e.mode),e.optionsPosition!==void 0&&(this.container.dataset.optionsPosition=e.optionsPosition),e.animations!==void 0&&(this.container.dataset.animations=e.animations?"on":"off"),e.pillPlacement!==void 0&&(this.container.dataset.pillPlacement=e.pillPlacement,this.store.set({})),e.value!==void 0&&this.store.set({text:e.value}),e.completedParams!==void 0&&this.store.set({completedParams:e.completedParams})}selectOption(e){let t=this.store.get(),n=t.actionableSuggestions[0];if(!n)return;let i=t.filterBase,o=t.text.slice(0,i),a=o.length===0&&t.text.length===0;a&&t.placeholderText&&(o=`${t.placeholderText} `);let l=R(o,e.text);l>0&&(o=o.slice(0,o.length-l));let r=o.length>0&&o[o.length-1]!==" ",c=`${o}${r?" ":""}${e.text} `,p=a&&c.length>0?c[0].toUpperCase()+c.slice(1):c,d=p.toLowerCase().lastIndexOf(e.text.toLowerCase()),g=d>=0?p.slice(d,d+e.text.length):e.text,u={id:crypto.randomUUID(),placeholder:"",type:n.type,text:g,kind:e.kind,suggestionType:n.type,suggestionPlaceholder:n.text,options:n.options??[],metadata:e.metadata},m=t.actionableSuggestions.length-1;this.store.set(f=>({text:p,filterBase:p.length,completedParams:[...f.completedParams,u],newParamId:u.id,pillTapped:!1,activeDropdownIndex:-1,skipNextFetch:m>0})),setTimeout(()=>{this.store.set(f=>({suggestions:f.suggestions.filter(h=>h!==n)}))},400)}recomputeDerived(e,t){if(this.derivedInProgress)return;this.derivedInProgress=!0;let n=H(e.text,e.completedParams),i=e.suggestions.filter(u=>u.type!=="placeholder"),o=i[0],a=o?this.opts.optionOverrides?.[o.type]:void 0,l=y(e.text,e.filterBase,e.filterInProgress),r=o?a?a(l.trim()):o.options??[]:[],c=C(r,l),p=e.suggestions.filter(u=>u.type==="placeholder").map(u=>u.text).join(" ")||this.opts.placeholder||"",d=p.length>0,g=!e.isLoading&&c.length>0&&(!!e.text||e.pillTapped||!d);this.store.set({segments:n,actionableSuggestions:i,filteredOptions:c,placeholderText:p,isDropdownOpen:g}),this.derivedInProgress=!1}setupContainer(){this.container.classList.add("magicx-ac"),this.container.dataset.pillPlacement=this.opts.pillPlacement??"inline",this.container.dataset.optionsPosition=this.opts.optionsPosition??"below",this.container.dataset.animations=this.opts.animations??!0?"on":"off",this.modeController=new P(this.container,this.opts.mode??"auto")}buildAndRender(){let e={store:this.store,listboxId:this.listboxId,get pillPlacement(){return t.opts.pillPlacement??"inline"},get onSubmit(){return t.opts.onSubmit},selectOption:i=>this.selectOption(i),setActivePill:i=>this.pillsController.setActivePill(i),handleKeyDown:i=>this.keyboardController.handleKeyDown(i),handleChange:i=>this.handleChange(i)},t=this;this.domRefs=G(this.container,e);let n=!1;this.unsubscribers.push(this.store.subscribe(()=>{n||(n=!0,queueMicrotask(()=>{n=!1,this.domRefs&&k(this.domRefs,this.store.get(),e)}))})),k(this.domRefs,this.store.get(),e),this.unsubscribers.push(this.store.subscribe((i,o)=>{i.newParamId&&i.newParamId!==o.newParamId&&(this.newParamTimer&&clearTimeout(this.newParamTimer),this.newParamTimer=window.setTimeout(()=>{this.store.set({newParamId:null})},650))}))}handleChange(e){let t=this.store.get();this.store.set({text:e,pillTapped:!1,activeDropdownIndex:-1});let{valid:n,invalid:i}=N(e,t.completedParams);i.length>0&&this.store.set(o=>({completedParams:n,suggestions:[...i.map(a=>({type:a.suggestionType,text:a.suggestionPlaceholder,required:!0,options:a.options})),...o.suggestions]}))}};export{_ as AIAutocomplete,L as createStore};
+//# sourceMappingURL=index.mjs.map