@magicx-eng/ai-autocomplete-vanilla 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.mjs CHANGED
@@ -1,64 +1,62 @@
1
- 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=`/* ===================================================================
2
- Vanilla core styles \u2014 stable BEM class names (magicx-ac-*)
1
+ function v(o,e,t){let i=o.slice(e);if(t||e===0||o[e-1]===" ")return i;let s=i.indexOf(" ");return s===-1?"":i.slice(s+1)}function F(o,e){let t=o.trimEnd().replace(/\s+/g," ");if(t.length===0||e.length===0)return 0;let i=t.split(" "),s=e.toLowerCase();for(let n=0;n<i.length;n++){let r=i.slice(n).join(" ");if(s.startsWith(r.toLowerCase())){let d=t.length-r.length;return o.length-d}}return 0}function C(o,e){if(!o)return[];let t=e.trimStart();if(!t)return o;let i=t.toLowerCase();return o.filter(s=>!s.is_tappable||s.text.toLowerCase().includes(i))}function L(o,e){if(!o)return null;let t=e.trim();if(!t)return null;let i=t.toLowerCase();return o.find(s=>s.is_tappable&&s.text.toLowerCase()===i)??null}var w=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 K(o,e){let t=[],i=0;for(let n of e){let r=o.indexOf(n.text,i);r!==-1&&(r>i&&t.push({type:"text",value:o.slice(i,r)}),t.push({type:"completed",value:n.text,param:n}),i=r+n.text.length)}let s=o.slice(i);return s&&t.push({type:"text",value:s}),t}function N(o,e){let t=[],i=[],s=0;for(let n of e){let r=o.indexOf(n.text,s);r===-1?i.push(n):(t.push(n),s=r+n.text.length)}return{valid:t,invalid:i}}var P=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(!e&&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 J="0.1.26",B=!1;function Z(){return crypto.randomUUID()}function ee(o,e){return{placeholder:o.placeholder,type:o.type,...e&&{text:o.text},kind:o.kind}}function Q(o){return o?.type==="accessToken"}function te(o){if(!(!o||Q(o)))return o}var $=new WeakMap;function ie(o){let e=$.get(o.getAccessToken);return e||(e=new P(o),$.set(o.getAccessToken,e)),e}function oe(o,e,t){let i=e.find(n=>n.type==="contact"&&n.metadata?.contact_account_count)?.metadata?.contact_account_count,s=typeof i=="number"?i:void 0;return{data:{raw_query:o,completed_params:e.map(n=>ee(n,t)),...s!=null&&{contact_account_count:s}},meta:{request_id:Z(),request_at:new Date().toISOString(),language:typeof navigator<"u"?navigator.language:"en-US",client_version:J}}}function ne(o){return{"Content-Type":"application/json",...o?.appIdentifier&&{"X-App-Identifier":o.appIdentifier},...o?.headers}}async function q(o,e,t,i,s){return fetch(o,{method:"POST",headers:{...e,Authorization:`Bearer ${t}`},body:i,signal:s})}async function U(o,e,t){let i=t?.apiConfig,s=!t?.maskCompletedText,n=oe(o,e,s),r=ne(i),d=i?.endpoint??"/ac/suggest",a=JSON.stringify(n);if(Q(i)){let u=ie(i),g=await u.getToken(),m=await q(d,r,g,a,t?.signal);if(m.status===401){let x=await u.getToken(!0);m=await q(d,r,x,a,t?.signal)}if(!m.ok)throw new Error(`API error: ${m.status} ${m.statusText}`);return m.json()}let c=te(i),l=c?.apiKey??"";if(!l&&!B&&(B=!0,console.warn("[AIAutocomplete] No apiKey in apiConfig. Requests will be sent without an Authorization header.")),l){let u=c?.authScheme??"Bearer";r.Authorization=u==="Basic"?`Basic ${btoa(l)}`:`Bearer ${l}`}let p=await fetch(d,{method:"POST",headers:r,body:a,signal:t?.signal});if(!p.ok)throw new Error(`API error: ${p.status} ${p.statusText}`);return p.json()}function y(o,e){let t=o,i={},s=[];for(let n of e){let r=(i[n.type]??0)+1;i[n.type]=r;let a=`{{${n.type.toUpperCase().replace(/\s+/g,"_")}_${r}}}`,c=t.indexOf(n.text);c!==-1&&(t=t.slice(0,c)+a+t.slice(c+n.text.length)),s.push({...n,placeholder:a})}return{rawQuery:t,completedParams:s}}function j(o,e){return e?o.map(t=>{let i=e[t.type];if(!i)return t;let s=i("");if(s.length===0)return t;let n=new Set(s.map(d=>d.text)),r=(t.options??[]).filter(d=>!n.has(d.text));return{...t,options:[...s,...r]}}):o}var se=100,re=300,ae=2,O=class{constructor(e,t,i,s,n){this.store=e;this.getApiConfig=t;this.getOptionOverrides=i;this.getMaskCompletedText=s;this.getOnError=n;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(i=>{(i.text!==e||i.completedParams!==t)&&(e=i.text,t=i.completedParams,this.scheduleFetch())})}dispose(){this.abortController?.abort(),this.clearTimers(),this.unsubscribe?.()}async doFetch(e,t){this.abortController?.abort();let i=new AbortController;this.abortController=i;let s=++this.fetchVersion,n=this.store.get(),r=n.text.length;n.suggestions.some(a=>a.type!=="placeholder")||this.store.set({isLoading:!0}),this.store.set({error:null});try{let a=await U(e,t,{maskCompletedText:this.getMaskCompletedText(),signal:i.signal,apiConfig:this.getApiConfig()});if(s!==this.fetchVersion)return;let c=j(a.data.suggestions??[],this.getOptionOverrides()),l=a.data.input??[],p=l[l.length-1],u=this.store.get().text,g,m;if(p?.state==="in_progress"){m=!0;let b=u.toLowerCase().lastIndexOf(p.text.toLowerCase());g=b!==-1?b:r}else m=!1,g=r;let h=c.filter(b=>b.type!=="placeholder")[0],f=null;if(h){let b=v(u,g,m),S=L(h.options,b);S&&(f={id:crypto.randomUUID(),placeholder:"",type:h.type,text:S.text,kind:S.kind,suggestionType:h.type,suggestionPlaceholder:h.text,options:h.options??[],metadata:S.metadata},c=c.filter(Y=>Y!==h))}this.store.set(b=>({suggestions:c,isLoading:!1,isReady:a.data.is_ready??!1,lastRawQuery:e,activeDropdownIndex:-1,filterBase:g,filterInProgress:m,...f?{completedParams:[...b.completedParams,f]}:{}}))}catch(a){if(s===this.fetchVersion){let c=a instanceof Error?a:new Error(String(a));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=i=>{let s=this.store.get();if(!s.text&&s.completedParams.length===0)return this.doFetch("",[]),!0;let n=v(s.text,s.filterBase,s.filterInProgress),d=s.suggestions.filter(h=>h.type!=="placeholder")[0],c=(d?C(d.options,n):[]).filter(h=>h.is_tappable),l=d?L(d.options,n)!==null:!1,p=n.trim().length>0;if(c.length>0&&!l&&p)return!1;if(s.completedParams.length===0&&s.text.length>0){let h=s.suggestions.filter(f=>f.type==="placeholder").map(f=>f.text).join(" ");if(h.length>0&&h.toLowerCase().startsWith(s.text.toLowerCase()))return!1}let{rawQuery:u,completedParams:g}=y(s.text,s.completedParams),m=u.length<s.lastRawQuery.length,x=Math.abs(u.length-s.lastRawQuery.length);return m||x>=i?(this.doFetch(u,g),!0):!1};this.debounceTimer=setTimeout(()=>{t(ae)&&this.slowDebounceTimer&&clearTimeout(this.slowDebounceTimer)},se),this.slowDebounceTimer=setTimeout(()=>t(1),re)}clearTimers(){this.debounceTimer&&clearTimeout(this.debounceTimer),this.slowDebounceTimer&&clearTimeout(this.slowDebounceTimer),this.debounceTimer=null,this.slowDebounceTimer=null}};var T=class{constructor(e,t){this.store=e;this.ctx=t}handleKeyDown(e){let t=this.store.get(),{listboxId:i,getOnSubmit:s}=this.ctx,n=this.getEffectiveColumns(),r=s(),d=this.getTappableIndices(n);switch(e.key){case"ArrowDown":{let a=e.target;if(!(a.selectionStart!=null&&a.selectionStart===a.value.length)&&t.activeDropdownIndex<0)break;if(e.preventDefault(),!t.isDropdownOpen&&t.actionableSuggestions.length>0){this.store.set({pillTapped:!0,activeDropdownIndex:d[0]??0});break}if(d.length===0)return;let l=d.indexOf(t.activeDropdownIndex),p=l<d.length-1?l+1:0;this.store.set({activeDropdownIndex:d[p]});break}case"ArrowUp":{if(d.length===0||t.activeDropdownIndex<0)break;if(e.preventDefault(),t.activeDropdownIndex<n){this.store.set({activeDropdownIndex:-1});break}let a=d.indexOf(t.activeDropdownIndex),c=a>0?a-1:d.length-1;this.store.set({activeDropdownIndex:d[c]});break}case"ArrowRight":{if(t.activeDropdownIndex<0){let c=e.target;c.selectionStart!=null&&c.selectionStart===c.value.length&&t.actionableSuggestions.length>1&&(e.preventDefault(),this.pillsSetActivePill(1));break}if(t.activeDropdownIndex%n<n-1){let c=t.activeDropdownIndex+1;c<t.filteredOptions.length&&t.filteredOptions[c]?.is_tappable&&(e.preventDefault(),this.store.set({activeDropdownIndex:c}))}break}case"ArrowLeft":{if(t.activeDropdownIndex<0)break;if(t.activeDropdownIndex%n>0){let a=t.activeDropdownIndex-1;a>=0&&t.filteredOptions[a]?.is_tappable&&(e.preventDefault(),this.store.set({activeDropdownIndex:a}))}break}case"Enter":{if(e.preventDefault(),t.activeDropdownIndex>=0&&t.filteredOptions[t.activeDropdownIndex]?.is_tappable)this.clickOrSelect(t.activeDropdownIndex,t.filteredOptions,i);else if(r){let{rawQuery:a,completedParams:c}=y(t.text,t.completedParams);r({query:t.text.trim(),raw_query:a,completed_params:c})}break}case"Tab":{let a=!t.text&&!!t.placeholderText,c=t.activeDropdownIndex>=0&&t.filteredOptions[t.activeDropdownIndex]?.is_tappable;if(a&&!c){e.preventDefault();let l=t.suggestions.find(p=>p.type==="placeholder");l?this.store.set(p=>({text:t.placeholderText,filterBase:t.placeholderText.length,completedParams:[...p.completedParams,{id:crypto.randomUUID(),placeholder:"",type:l.type,text:t.placeholderText,kind:null,suggestionType:l.type,suggestionPlaceholder:l.text,options:l.options??[]}],suggestions:p.suggestions.filter(u=>u!==l)})):this.store.set({text:t.placeholderText,filterBase:t.placeholderText.length})}else if(c)e.preventDefault(),this.clickOrSelect(t.activeDropdownIndex,t.filteredOptions,i);else if(t.isDropdownOpen){let l=t.filteredOptions.findIndex(p=>p.is_tappable);l>=0&&(e.preventDefault(),this.clickOrSelect(l,t.filteredOptions,i))}break}case"Escape":this.store.set({activeDropdownIndex:-1});break}}getTappableIndices(e){let i=this.store.get().filteredOptions.map((n,r)=>n.is_tappable?r:-1).filter(n=>n!==-1),s=Array.from({length:e},()=>[]);for(let n of i)s[n%e].push(n);return s.flat()}getEffectiveColumns(){let t=document.getElementById(`${this.ctx.listboxId}-option-0`)?.parentElement;if(!t)return this.ctx.columns;let i=getComputedStyle(t).gridTemplateColumns.split(" ").filter(Boolean).length;return i>0?i:this.ctx.columns}clickOrSelect(e,t,i){let s=document.getElementById(`${i}-option-${e}`);s?s.click():this.ctx.selectOption(t[e])}pillsSetActivePill(e){let t=this.store.get(),i=t.suggestions.filter(d=>d.type!=="placeholder");if(e<0||e>=i.length)return;let s=i[e],n=i.filter((d,a)=>a!==e),r=t.suggestions.filter(d=>d.type==="placeholder");this.store.set({suggestions:[...r,s,...n],pillTapped:!0,activeDropdownIndex:-1})}};var I=class{constructor(e){this.store=e}setActivePill(e){let t=this.store.get(),i=t.suggestions.filter(d=>d.type!=="placeholder");if(e<0||e>=i.length)return;let s=i[e],n=i.filter((d,a)=>a!==e),r=t.suggestions.filter(d=>d.type==="placeholder");this.store.set({suggestions:[...r,s,...n],pillTapped:!0,activeDropdownIndex:-1})}removeLastParam(){let e=this.store.get();if(e.completedParams.length===0)return;let t=e.completedParams[e.completedParams.length-1],i={type:t.suggestionType,text:t.suggestionPlaceholder,required:!0,options:t.options};this.store.set(s=>({completedParams:s.completedParams.slice(0,-1),suggestions:[i,...s.suggestions],activeDropdownIndex:-1}))}};function le(o){return o===0?.4:o===1?.3:.15}function A(o,e,t,i,s=!1){let n=o.querySelector(".magicx-aia-pill-list");n||(n=document.createElement("span"),n.className="magicx-aia-pill-list",o.appendChild(n));let r=new Map;for(let a of n.querySelectorAll(".magicx-aia-pill"))r.set(a.dataset.pillKey??"",a);let d=new Set;for(let a=0;a<e.length;a++){let c=e[a],l=`${c.type}-${c.text}`;d.add(l);let p=r.get(l);p||(p=document.createElement("button"),p.type="button",p.dataset.pillKey=l,p.setAttribute("data-aia-pill",""),p.textContent=c.text),p.className=`magicx-aia-pill${s?" magicx-aia-pill--rounded":""}${a===t?" magicx-aia-pill--active":""}`,p.style.opacity=String(le(a)),p.onclick=()=>i(a),n.children[a]!==p&&n.insertBefore(p,n.children[a]??null)}for(let[a,c]of r)d.has(a)||c.remove()}function D(o){let e=document.createElement("div");return e.id=o,e.setAttribute("role","listbox"),e.setAttribute("data-aia-dropdown",""),e.className="magicx-aia-dropdown",e.addEventListener("mousedown",t=>t.preventDefault()),e}function E(o,e){let{filteredOptions:t,activeIndex:i,isOpen:s,pills:n,showPills:r,onSelect:d,onHighlight:a,onPillClick:c}=e,l=r&&n.length>0;s&&t.length>0||s&&l?o.classList.add("magicx-aia-dropdown--visible"):o.classList.remove("magicx-aia-dropdown--visible");let g=o.querySelector(".magicx-aia-pill-bar");l?(g||(g=document.createElement("div"),g.className="magicx-aia-pill-bar",g.setAttribute("data-aia-pillbar",""),o.insertBefore(g,o.firstChild)),A(g,n,0,c,!0)):g&&g.remove();let m=o.querySelector(".magicx-aia-grid");t.length>0?(m||(m=document.createElement("div"),m.className="magicx-aia-grid",o.appendChild(m)),ce(m,t,i,d,a,e.listboxId)):m&&(m.innerHTML="")}function ce(o,e,t,i,s,n){let r=e.map(c=>c.text).join("\0"),d=o.dataset.optionsKey??"",a=r!==d;if(o.dataset.optionsKey=r,a){let c=document.createDocumentFragment();for(let l=0;l<e.length;l++){let p=e[l],u=de(p,l,t,i,s,n);c.appendChild(u)}o.innerHTML="",o.appendChild(c)}else{let c=o.querySelectorAll(".magicx-aia-option");for(let l=0;l<c.length;l++){let p=c[l],u=l===t;p.setAttribute("aria-selected",String(u)),u?p.classList.add("magicx-aia-option--highlighted"):p.classList.remove("magicx-aia-option--highlighted")}}}function de(o,e,t,i,s,n){let r=document.createElement("div");r.id=`${n}-option-${e}`,r.setAttribute("role","option"),r.setAttribute("data-aia-option",""),r.setAttribute("aria-selected",String(e===t)),r.tabIndex=o.is_tappable?0:-1;let d=["magicx-aia-option"];e===t&&d.push("magicx-aia-option--highlighted"),o.is_tappable?d.push("magicx-aia-option--tappable"):d.push("magicx-aia-option--non-tappable"),r.className=d.join(" ");let a=document.createElement("div");a.className="magicx-aia-streaks",r.appendChild(a);let c=document.createElement("div");c.className="magicx-aia-streaks-vert",r.appendChild(c);let l=document.createElement("span");if(l.className="magicx-aia-option-content",l.textContent=o.icon?`${o.icon} ${o.text}`:o.text,o.tag){let p=document.createElement("span");p.className="magicx-aia-option-tag",p.textContent=o.tag,l.appendChild(p)}return r.appendChild(l),o.is_tappable&&(r.addEventListener("click",()=>{r.classList.add("magicx-aia-option--pressed"),i(o),setTimeout(()=>r.classList.remove("magicx-aia-option--pressed"),400)}),r.addEventListener("mouseenter",()=>s(e))),r}function V(o,e){let t=D(e.listboxId);return o.appendChild(t),{dropdown:t}}function M(o,e,t){E(o.dropdown,{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:!0,onSelect:t.selectOption,onHighlight:i=>t.store.set({activeDropdownIndex:i}),onPillClick:t.setActivePill})}function W(o,e,t,i,s){let n=o.querySelector(".magicx-aia-sizer-text"),r=o.querySelector(".magicx-aia-placeholder");if(i&&s){n&&(n.style.display="none"),r||(r=document.createElement("span"),r.className="magicx-aia-placeholder",o.insertBefore(r,o.firstChild)),r.style.display="",r.textContent=`${s} `,o.dataset.segmentKey="";return}r&&(r.style.display="none"),n||(n=document.createElement("span"),n.className="magicx-aia-sizer-text",o.insertBefore(n,o.firstChild)),n.style.display="",n.className=`magicx-aia-sizer-text${t?" magicx-aia-sizer-text--visible":""}`;let d=e.map(l=>`${l.type}:${l.value}`).join("\0"),a=o.dataset.segmentKey??"",c=o.dataset.newParamId??"";if(!(d===a&&(t??"")===c)){o.dataset.segmentKey=d,o.dataset.newParamId=t??"",n.innerHTML="";for(let l of e){let p=document.createElement("span");l.type==="completed"&&(l.param.id===t?p.className="magicx-aia-shimmer-revealed magicx-aia-shimmer-sweep":p.className="magicx-aia-segment magicx-aia-segment--completed"),p.textContent=l.value,n.appendChild(p)}e.length===0&&(n.textContent="\xA0")}}var pe='<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 z(o,e){let{listboxId:t}=e,i=D(t);o.appendChild(i);let s=document.createElement("div");s.className="magicx-aia-input-wrapper",o.appendChild(s);let n=document.createElement("div");n.className="magicx-aia-editor",n.setAttribute("data-aia-editor",""),s.appendChild(n);let r=document.createElement("div");r.className="magicx-aia-sizer",r.setAttribute("aria-hidden","true"),n.appendChild(r);let d=document.createElement("span");r.appendChild(document.createTextNode(" ")),r.appendChild(d);let a=document.createElement("textarea");a.className="magicx-aia-textarea",a.rows=1,a.setAttribute("role","combobox"),a.setAttribute("aria-autocomplete","list"),a.setAttribute("aria-controls",t),a.setAttribute("data-aia-textarea",""),n.appendChild(a);let c=document.createElement("button");return c.type="button",c.className="magicx-aia-submit",c.setAttribute("aria-label","Submit"),c.setAttribute("data-aia-submit",""),c.innerHTML=pe,s.appendChild(c),s.addEventListener("click",()=>a.focus()),a.addEventListener("input",()=>{let l=a.value,u=l.length>0&&l[0]!==l[0].toUpperCase()?l[0].toUpperCase()+l.slice(1):l;e.handleChange(u)}),a.addEventListener("keydown",l=>e.handleKeyDown(l)),a.addEventListener("focus",()=>e.store.set({isFocused:!0})),a.addEventListener("blur",()=>e.store.set({isFocused:!1})),c.addEventListener("click",l=>{l.stopPropagation();let p=e.store.get();if(!(!!p.text||p.completedParams.length>0)||!e.onSubmit)return;let{rawQuery:g,completedParams:m}=y(p.text,p.completedParams);e.onSubmit({query:p.text.trim(),raw_query:g,completed_params:m})}),a.focus(),{textarea:a,dropdown:i,sizer:r,submitButton:c,inlinePillContainer:d}}function k(o,e,t){let{textarea:i,dropdown:s,sizer:n,submitButton:r,inlinePillContainer:d}=o,{pillPlacement:a,setActivePill:c,selectOption:l,store:p}=t;i.value!==e.text&&(i.value=e.text),e.placeholderText?i.placeholder=e.placeholderText:i.removeAttribute("placeholder"),i.setAttribute("aria-expanded",String(e.isDropdownOpen));let u=e.activeDropdownIndex>=0?`${t.listboxId}-option-${e.activeDropdownIndex}`:"";u?i.setAttribute("aria-activedescendant",u):i.removeAttribute("aria-activedescendant"),e.newParamId?i.classList.add("magicx-aia-textarea--hidden"):i.classList.remove("magicx-aia-textarea--hidden");let g=!!e.text||e.completedParams.length>0;r.disabled=!g,W(n,e.segments,e.newParamId,!e.text,e.placeholderText),a==="inline"?A(d,e.actionableSuggestions,0,c):d.innerHTML="",E(s,{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:a==="dropdown",onSelect:l,onHighlight:m=>p.set({activeDropdownIndex:m}),onPillClick:c})}function R(o){let e=o,t=new Set;return{get:()=>e,set:i=>{let s=typeof i=="function"?i(e):i,n={...e,...s},r=e;e=n;for(let d of t)d(n,r)},subscribe:i=>(t.add(i),()=>{t.delete(i)})}}var _=!1;function G(){if(_||typeof document>"u")return;if(document.querySelector("style[data-magicx-aia]")){_=!0;return}_=!0;let o=document.createElement("style");o.setAttribute("data-magicx-aia",""),o.textContent=ue,document.head.appendChild(o)}var ue=`/* ===================================================================
2
+ Vanilla core styles \u2014 stable BEM class names (magicx-aia-*)
3
3
  Auto-injected at runtime on first instantiation.
4
4
  =================================================================== */
5
5
 
6
6
  /* --- Container --- */
7
- .magicx-ac {
7
+ .magicx-aia {
8
8
  position: relative;
9
9
  font-family: "IBM Plex Sans", sans-serif;
10
10
  }
11
11
 
12
12
  /* --- Input wrapper --- */
13
- .magicx-ac-input-wrapper {
14
- min-height: 60px;
15
- padding: 24px;
16
- border: 1px solid var(--ac-color-border-default, #9ea5b2);
13
+ .magicx-aia-input-wrapper {
14
+ padding: 20px;
15
+ border: 1px solid var(--aia-color-border-default, #9ea5b2);
17
16
  border-radius: 23px;
18
17
  background: transparent;
19
18
  overflow: hidden;
20
19
  display: flex;
21
20
  align-items: center;
22
- gap: 12px;
21
+ gap: 0px;
23
22
  }
24
23
 
25
24
  /* --- Editor area (overlay + textarea) --- */
26
- .magicx-ac-editor {
25
+ .magicx-aia-editor {
27
26
  position: relative;
28
27
  flex: 1;
29
28
  min-width: 0;
30
29
  }
31
30
 
32
31
  /* --- Sizer (overlay for sizing + segment display) --- */
33
- .magicx-ac-sizer {
32
+ .magicx-aia-sizer {
34
33
  position: relative;
35
34
  z-index: 1;
36
35
  pointer-events: none;
37
- min-height: 60px;
38
36
  white-space: pre-wrap;
39
37
  word-break: break-word;
40
38
  font-family: inherit;
41
- font-size: var(--ac-written-text-font-size, 19px);
39
+ font-size: var(--aia-written-text-font-size, 19px);
42
40
  line-height: 38px;
43
41
  }
44
42
 
45
- .magicx-ac-sizer-text {
43
+ .magicx-aia-sizer-text {
46
44
  color: transparent;
47
45
  }
48
46
 
49
- .magicx-ac-sizer-text--visible {
50
- color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
51
- font-size: var(--ac-written-text-font-size, inherit);
47
+ .magicx-aia-sizer-text--visible {
48
+ color: var(--aia-written-text-color, var(--aia-color-text-default, #fff));
49
+ font-size: var(--aia-written-text-font-size, inherit);
52
50
  }
53
51
 
54
52
  /* --- Placeholder --- */
55
- .magicx-ac-placeholder {
56
- color: var(--ac-color-text-muted, #c1c4cb);
53
+ .magicx-aia-placeholder {
54
+ color: var(--aia-color-text-muted, #c1c4cb);
57
55
  opacity: 0.7;
58
56
  }
59
57
 
60
58
  /* --- Textarea --- */
61
- .magicx-ac-textarea {
59
+ .magicx-aia-textarea {
62
60
  position: absolute;
63
61
  top: 0;
64
62
  left: 0;
@@ -67,10 +65,13 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
67
65
  padding: 0;
68
66
  border: none;
69
67
  background: transparent;
70
- color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
71
- caret-color: var(--ac-written-text-color, var(--ac-color-text-default, #fff));
68
+ color: var(--aia-written-text-color, var(--aia-color-text-default, #fff));
69
+ caret-color: var(
70
+ --aia-caret-color,
71
+ var(--aia-written-text-color, var(--aia-color-text-default, #fff))
72
+ );
72
73
  font-family: inherit;
73
- font-size: var(--ac-written-text-font-size, 19px);
74
+ font-size: var(--aia-written-text-font-size, 19px);
74
75
  line-height: 38px;
75
76
  white-space: pre-wrap;
76
77
  word-break: break-word;
@@ -79,23 +80,23 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
79
80
  overflow: hidden;
80
81
  }
81
82
 
82
- .magicx-ac-textarea::placeholder {
83
- color: var(--ac-color-text-muted, #c1c4cb);
83
+ .magicx-aia-textarea::placeholder {
84
+ color: var(--aia-color-text-muted, #c1c4cb);
84
85
  }
85
86
 
86
- .magicx-ac-textarea--hidden {
87
+ .magicx-aia-textarea--hidden {
87
88
  color: transparent !important;
88
89
  }
89
90
 
90
91
  /* --- Submit button --- */
91
- .magicx-ac-submit {
92
+ .magicx-aia-submit {
92
93
  flex-shrink: 0;
93
94
  width: 36px;
94
95
  height: 36px;
95
96
  border-radius: 50%;
96
97
  border: none;
97
- background: var(--ac-color-text-default, #fff);
98
- color: var(--ac-color-bg-default, #000);
98
+ background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
99
+ color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
99
100
  cursor: pointer;
100
101
  display: flex;
101
102
  align-items: center;
@@ -104,13 +105,12 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
104
105
  transition: opacity 0.2s ease;
105
106
  }
106
107
 
107
- .magicx-ac-submit:hover {
108
+ .magicx-aia-submit:hover {
108
109
  opacity: 0.85;
109
110
  }
110
111
 
111
112
  /* --- Dropdown --- */
112
- .magicx-ac-dropdown {
113
- --border-width: 1px;
113
+ .magicx-aia-dropdown {
114
114
  position: absolute;
115
115
  left: 0;
116
116
  right: 0;
@@ -122,36 +122,32 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
122
122
  opacity: 0;
123
123
  pointer-events: none;
124
124
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
125
- background: hsl(243 26% 15% / 0.25);
126
- backdrop-filter: blur(12px);
127
- }
128
-
129
- .magicx-ac-dropdown::before {
130
- content: "";
131
- position: absolute;
132
- z-index: -1;
133
- inset: 0;
134
- border-radius: inherit;
135
- border: var(--border-width) solid transparent;
136
- background: linear-gradient(hsl(259, 13%, 28%), hsl(252, 9%, 22%)) border-box;
137
- mask:
138
- linear-gradient(black, black) border-box,
139
- linear-gradient(black, black) padding-box;
140
- mask-composite: subtract;
141
- }
142
-
143
- .magicx-ac-dropdown--visible {
125
+ background:
126
+ linear-gradient(hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0.8)) padding-box,
127
+ linear-gradient(
128
+ 98deg,
129
+ hsla(0, 0%, 75%, 1),
130
+ hsla(0, 0%, 90%, 1) 3%,
131
+ hsla(0, 0%, 100%, 0) 50%,
132
+ hsla(0, 0%, 90%, 1) 97%,
133
+ hsla(0, 0%, 75%, 1) 100%
134
+ )
135
+ border-box;
136
+ border: 1.5px solid transparent;
137
+ }
138
+
139
+ .magicx-aia-dropdown--visible {
144
140
  opacity: 1;
145
141
  pointer-events: auto;
146
142
  }
147
143
 
148
144
  /* --- Pill bar (inside dropdown) --- */
149
- .magicx-ac-pill-bar {
145
+ .magicx-aia-pill-bar {
150
146
  padding: 27px 27px 0px 27px;
151
147
  }
152
148
 
153
149
  /* --- Pill list --- */
154
- .magicx-ac-pill-list {
150
+ .magicx-aia-pill-list {
155
151
  position: relative;
156
152
  z-index: 1;
157
153
  pointer-events: auto;
@@ -163,46 +159,64 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
163
159
  }
164
160
 
165
161
  /* --- Individual pill --- */
166
- .magicx-ac-pill {
162
+ .magicx-aia-pill {
167
163
  display: inline-flex;
168
164
  align-items: center;
169
165
  justify-content: center;
170
166
  height: 36px;
171
167
  padding: 13px 13px;
172
168
  border: none;
173
- border-radius: 6px;
174
- background: var(--ac-pill-bg, var(--ac-color-background-supportive, #313255));
175
- color: var(--ac-pill-color, var(--ac-color-text-muted, #c1c4cb));
169
+ border-radius: 999px;
170
+ background: rgba(49, 50, 85, 0.25);
171
+ background: color-mix(
172
+ in srgb,
173
+ var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,
174
+ transparent
175
+ );
176
+ color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
176
177
  font-family: "IBM Plex Sans", sans-serif;
177
- font-size: var(--ac-pill-font-size, 19px);
178
+ font-size: var(--aia-pill-font-size, 19px);
178
179
  line-height: 30px;
179
180
  cursor: pointer;
180
181
  white-space: nowrap;
181
- animation: magicx-ac-fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
182
- }
183
-
184
- .magicx-ac-pill--rounded {
182
+ animation: magicx-aia-fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
183
+ box-shadow:
184
+ hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
185
+ hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
186
+ var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
187
+ var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
188
+ hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
189
+ hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
190
+ hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
191
+ hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
192
+ inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
193
+ hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
194
+ backdrop-filter: blur(30px);
195
+ }
196
+
197
+ .magicx-aia-pill--rounded {
185
198
  border-radius: 999px;
186
199
  }
187
200
 
188
- .magicx-ac-pill:hover {
201
+ .magicx-aia-pill:hover {
189
202
  filter: brightness(1.2);
190
203
  }
191
204
 
192
- .magicx-ac-pill--active {
205
+ .magicx-aia-pill--active {
193
206
  outline: 1px solid #5a5b8a;
194
207
  }
195
208
 
196
- @keyframes magicx-ac-fadeIn {
209
+ @keyframes magicx-aia-fadeIn {
197
210
  from {
198
211
  opacity: 0;
199
212
  }
200
213
  }
201
214
 
202
215
  /* --- Options grid --- */
203
- .magicx-ac-grid {
216
+ .magicx-aia-grid {
204
217
  display: grid;
205
- grid-template-columns: 1fr 1fr;
218
+ grid-template-columns: repeat(2, minmax(0, 250px));
219
+ justify-content: start;
206
220
  padding: 13px 13px;
207
221
  max-height: 192px;
208
222
  overflow-y: auto;
@@ -210,83 +224,83 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
210
224
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
211
225
  }
212
226
 
213
- .magicx-ac-grid::-webkit-scrollbar {
227
+ .magicx-aia-grid::-webkit-scrollbar {
214
228
  width: 6px;
215
229
  }
216
230
 
217
- .magicx-ac-grid::-webkit-scrollbar-track {
231
+ .magicx-aia-grid::-webkit-scrollbar-track {
218
232
  background: transparent;
219
233
  }
220
234
 
221
- .magicx-ac-grid::-webkit-scrollbar-thumb {
235
+ .magicx-aia-grid::-webkit-scrollbar-thumb {
222
236
  background: rgba(255, 255, 255, 0.3);
223
237
  border-radius: 3px;
224
238
  }
225
239
 
226
240
  /* --- Option item --- */
227
- .magicx-ac-option {
241
+ .magicx-aia-option {
228
242
  position: relative;
229
243
  overflow: visible;
230
244
  display: flex;
231
245
  align-items: center;
232
246
  font-family: "IBM Plex Sans", sans-serif;
233
- font-size: var(--ac-option-font-size, 19px);
247
+ font-size: var(--aia-option-font-size, 19px);
234
248
  line-height: 30px;
235
- color: var(--ac-option-color, var(--ac-color-text-muted, #c1c4cb));
249
+ color: var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));
236
250
  white-space: normal;
237
251
  word-break: break-word;
238
- opacity: 0.35;
252
+ opacity: 0.4;
239
253
  border-radius: 12px;
240
254
  padding: 13px 13px;
241
- animation: magicx-ac-optionFadeIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
255
+ animation: magicx-aia-optionFadeIn 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
242
256
  }
243
257
 
244
- @keyframes magicx-ac-optionFadeIn {
258
+ @keyframes magicx-aia-optionFadeIn {
245
259
  from {
246
260
  opacity: 0;
247
261
  }
248
262
  }
249
263
 
250
- .magicx-ac-option-content {
264
+ .magicx-aia-option-content {
251
265
  position: relative;
252
266
  z-index: 2;
253
267
  }
254
268
 
255
- .magicx-ac-option--tappable {
269
+ .magicx-aia-option--tappable {
256
270
  cursor: pointer;
257
271
  }
258
272
 
259
- .magicx-ac-option--tappable:hover {
260
- color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
273
+ .magicx-aia-option--tappable:hover {
274
+ color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
261
275
  }
262
276
 
263
- .magicx-ac-option--non-tappable {
277
+ .magicx-aia-option--non-tappable {
264
278
  cursor: default;
265
279
  opacity: 0.3;
266
280
  }
267
281
 
268
- .magicx-ac-option--highlighted {
269
- color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
270
- background: var(--ac-option-bg, transparent);
282
+ .magicx-aia-option--highlighted {
283
+ color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
284
+ background: var(--aia-option-bg, transparent);
271
285
  opacity: 0.5;
272
286
  }
273
287
 
274
- .magicx-ac-option-tag {
288
+ .magicx-aia-option-tag {
275
289
  font-size: 11px;
276
290
  margin-left: 6px;
277
291
  opacity: 0.5;
278
292
  }
279
293
 
280
- .magicx-ac-option--pressed {
294
+ .magicx-aia-option--pressed {
281
295
  opacity: 0.8;
282
- color: var(--ac-option-color-selected, var(--ac-color-text-default, #fff));
283
- background: rgba(255, 255, 255, 0.06);
296
+ color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
297
+ background: rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
284
298
  animation:
285
- magicx-ac-glassFade 500ms ease forwards,
286
- magicx-ac-tapDown 500ms ease forwards;
299
+ magicx-aia-glassFade 500ms ease forwards,
300
+ magicx-aia-tapDown 500ms ease forwards;
287
301
  }
288
302
 
289
- @keyframes magicx-ac-tapDown {
303
+ @keyframes magicx-aia-tapDown {
290
304
  0% {
291
305
  transform: scale(1);
292
306
  }
@@ -298,9 +312,9 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
298
312
  }
299
313
  }
300
314
 
301
- @keyframes magicx-ac-glassFade {
315
+ @keyframes magicx-aia-glassFade {
302
316
  0% {
303
- background: rgba(255, 255, 255, 0.1);
317
+ background: var(--aia-streak-glass-bg, rgba(255, 255, 255, 0.1));
304
318
  }
305
319
  100% {
306
320
  background: transparent;
@@ -308,7 +322,7 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
308
322
  }
309
323
 
310
324
  /* --- Streak animations --- */
311
- .magicx-ac-streaks {
325
+ .magicx-aia-streaks {
312
326
  position: absolute;
313
327
  inset: 0;
314
328
  z-index: 1;
@@ -317,43 +331,45 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
317
331
  overflow: hidden;
318
332
  }
319
333
 
320
- .magicx-ac-streaks::before {
334
+ .magicx-aia-streaks::before {
321
335
  content: "";
322
336
  position: absolute;
323
337
  bottom: -3px;
324
338
  left: 60%;
325
339
  width: 0;
326
340
  height: 6px;
341
+ opacity: 0;
327
342
  background: radial-gradient(
328
343
  ellipse at center,
329
- rgba(255, 255, 255, 0.5) 0%,
330
- rgba(255, 255, 255, 0.2) 40%,
344
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.5) 0%,
345
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.2) 40%,
331
346
  transparent 70%
332
347
  );
333
- box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
348
+ box-shadow: 0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.2);
334
349
  filter: blur(1px);
335
350
  border-radius: 50%;
336
351
  }
337
352
 
338
- .magicx-ac-streaks::after {
353
+ .magicx-aia-streaks::after {
339
354
  content: "";
340
355
  position: absolute;
341
356
  top: -3px;
342
357
  right: 60%;
343
358
  width: 0;
344
359
  height: 6px;
360
+ opacity: 0;
345
361
  background: radial-gradient(
346
362
  ellipse at center,
347
- rgba(255, 255, 255, 0.5) 0%,
348
- rgba(255, 255, 255, 0.2) 40%,
363
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.5) 0%,
364
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.2) 40%,
349
365
  transparent 70%
350
366
  );
351
- box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2);
367
+ box-shadow: 0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.2);
352
368
  filter: blur(1px);
353
369
  border-radius: 50%;
354
370
  }
355
371
 
356
- .magicx-ac-streaks-vert {
372
+ .magicx-aia-streaks-vert {
357
373
  position: absolute;
358
374
  inset: 0;
359
375
  z-index: 1;
@@ -362,191 +378,193 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
362
378
  overflow: hidden;
363
379
  }
364
380
 
365
- .magicx-ac-streaks-vert::before {
381
+ .magicx-aia-streaks-vert::before {
366
382
  content: "";
367
383
  position: absolute;
368
384
  bottom: 0;
369
385
  right: -3px;
370
386
  width: 6px;
371
387
  height: 0;
388
+ opacity: 0;
372
389
  background: radial-gradient(
373
390
  ellipse at center,
374
- rgba(255, 255, 255, 0.4) 0%,
375
- rgba(255, 255, 255, 0.15) 40%,
391
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.4) 0%,
392
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.15) 40%,
376
393
  transparent 70%
377
394
  );
378
- box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
395
+ box-shadow: 0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.15);
379
396
  filter: blur(1px);
380
397
  border-radius: 50%;
381
398
  }
382
399
 
383
- .magicx-ac-streaks-vert::after {
400
+ .magicx-aia-streaks-vert::after {
384
401
  content: "";
385
402
  position: absolute;
386
403
  top: 0;
387
404
  left: -3px;
388
405
  width: 6px;
389
406
  height: 0;
407
+ opacity: 0;
390
408
  background: radial-gradient(
391
409
  ellipse at center,
392
- rgba(255, 255, 255, 0.4) 0%,
393
- rgba(255, 255, 255, 0.15) 40%,
410
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.4) 0%,
411
+ rgba(var(--aia-streak-rgb, 255, 255, 255), 0.15) 40%,
394
412
  transparent 70%
395
413
  );
396
- box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.15);
414
+ box-shadow: 0 0 12px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.15);
397
415
  filter: blur(1px);
398
416
  border-radius: 50%;
399
417
  }
400
418
 
401
- .magicx-ac-option--pressed .magicx-ac-streaks::before {
402
- animation: magicx-ac-streakHorizRight 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
419
+ .magicx-aia-option--pressed .magicx-aia-streaks::before {
420
+ animation: magicx-aia-streakHorizRight 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
403
421
  }
404
- .magicx-ac-option--pressed .magicx-ac-streaks::after {
405
- animation: magicx-ac-streakHorizLeft 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
422
+ .magicx-aia-option--pressed .magicx-aia-streaks::after {
423
+ animation: magicx-aia-streakHorizLeft 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
406
424
  }
407
- .magicx-ac-option--pressed .magicx-ac-streaks-vert::before {
408
- animation: magicx-ac-streakVertUp 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
425
+ .magicx-aia-option--pressed .magicx-aia-streaks-vert::before {
426
+ animation: magicx-aia-streakVertUp 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
409
427
  }
410
- .magicx-ac-option--pressed .magicx-ac-streaks-vert::after {
411
- animation: magicx-ac-streakVertDown 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
428
+ .magicx-aia-option--pressed .magicx-aia-streaks-vert::after {
429
+ animation: magicx-aia-streakVertDown 300ms cubic-bezier(0.3, 0, 0.2, 1) 200ms forwards;
412
430
  }
413
431
 
414
- @keyframes magicx-ac-streakHorizRight {
432
+ @keyframes magicx-aia-streakHorizRight {
415
433
  0% {
416
434
  width: 0;
417
435
  height: 4px;
418
436
  opacity: 0;
419
437
  filter: blur(1px);
420
- box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
438
+ box-shadow: 0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.3);
421
439
  }
422
440
  15% {
423
441
  height: 4px;
424
442
  opacity: 1;
425
443
  filter: blur(1px);
426
- box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
444
+ box-shadow: 0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.3);
427
445
  }
428
446
  80% {
429
447
  width: 50%;
430
448
  height: 10px;
431
449
  opacity: 0.8;
432
450
  filter: blur(3px);
433
- box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
451
+ box-shadow: 0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.1);
434
452
  }
435
453
  100% {
436
454
  width: 50%;
437
455
  height: 12px;
438
456
  opacity: 0;
439
457
  filter: blur(5px);
440
- box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
458
+ box-shadow: 0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.03);
441
459
  }
442
460
  }
443
461
 
444
- @keyframes magicx-ac-streakHorizLeft {
462
+ @keyframes magicx-aia-streakHorizLeft {
445
463
  0% {
446
464
  width: 0;
447
465
  height: 4px;
448
466
  opacity: 0;
449
467
  filter: blur(1px);
450
- box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.3);
468
+ box-shadow: 0 0 8px 3px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.3);
451
469
  }
452
470
  15% {
453
471
  height: 4px;
454
472
  opacity: 1;
455
473
  filter: blur(1px);
456
- box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.3);
474
+ box-shadow: 0 0 10px 4px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.3);
457
475
  }
458
476
  80% {
459
477
  width: 50%;
460
478
  height: 10px;
461
479
  opacity: 0.8;
462
480
  filter: blur(3px);
463
- box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.1);
481
+ box-shadow: 0 0 16px 6px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.1);
464
482
  }
465
483
  100% {
466
484
  width: 50%;
467
485
  height: 12px;
468
486
  opacity: 0;
469
487
  filter: blur(5px);
470
- box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.03);
488
+ box-shadow: 0 0 20px 8px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.03);
471
489
  }
472
490
  }
473
491
 
474
- @keyframes magicx-ac-streakVertUp {
492
+ @keyframes magicx-aia-streakVertUp {
475
493
  0% {
476
494
  height: 0;
477
495
  width: 6px;
478
496
  opacity: 0.9;
479
497
  filter: blur(1.8px);
480
- box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
498
+ box-shadow: 0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.25);
481
499
  }
482
500
  75% {
483
501
  height: 100%;
484
502
  width: 10px;
485
503
  opacity: 0.4;
486
504
  filter: blur(3px);
487
- box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
505
+ box-shadow: 0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
488
506
  }
489
507
  100% {
490
508
  height: 100%;
491
509
  width: 14px;
492
510
  opacity: 0;
493
511
  filter: blur(5px);
494
- box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
512
+ box-shadow: 0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.02);
495
513
  }
496
514
  }
497
515
 
498
- @keyframes magicx-ac-streakVertDown {
516
+ @keyframes magicx-aia-streakVertDown {
499
517
  0% {
500
518
  height: 0;
501
519
  width: 6px;
502
520
  opacity: 0.9;
503
521
  filter: blur(1.8px);
504
- box-shadow: 0 0 12px 5px rgba(255, 255, 255, 0.25);
522
+ box-shadow: 0 0 12px 5px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.25);
505
523
  }
506
524
  75% {
507
525
  height: 100%;
508
526
  width: 10px;
509
527
  opacity: 0.4;
510
528
  filter: blur(3px);
511
- box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.06);
529
+ box-shadow: 0 0 18px 8px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.06);
512
530
  }
513
531
  100% {
514
532
  height: 100%;
515
533
  width: 14px;
516
534
  opacity: 0;
517
535
  filter: blur(5px);
518
- box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.02);
536
+ box-shadow: 0 0 24px 10px rgba(var(--aia-streak-rgb, 255, 255, 255), 0.02);
519
537
  }
520
538
  }
521
539
 
522
540
  /* --- Shimmer --- */
523
- .magicx-ac-shimmer {
541
+ .magicx-aia-shimmer {
524
542
  position: relative;
525
543
  z-index: 2;
526
544
  display: inline;
527
545
  }
528
546
 
529
- .magicx-ac-shimmer-revealed {
547
+ .magicx-aia-shimmer-revealed {
530
548
  color: transparent;
531
549
  background: linear-gradient(
532
550
  120deg,
533
- var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 0%,
534
- var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 44%,
551
+ var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 0%,
552
+ var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 44%,
535
553
  #b0b0b0 48%,
536
554
  #b0b0b0 52%,
537
- var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 56%,
538
- var(--ac-written-text-color, var(--ac-color-text-default, #fff)) 100%
555
+ var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 56%,
556
+ var(--aia-written-text-color, var(--aia-color-text-default, #fff)) 100%
539
557
  );
540
558
  background-size: 200% 100%;
541
559
  -webkit-background-clip: text;
542
560
  background-clip: text;
543
561
  }
544
562
 
545
- .magicx-ac-shimmer-sweep {
546
- animation: magicx-ac-textShimmer 650ms ease-out forwards;
563
+ .magicx-aia-shimmer-sweep {
564
+ animation: magicx-aia-textShimmer 650ms ease-out forwards;
547
565
  }
548
566
 
549
- @keyframes magicx-ac-textShimmer {
567
+ @keyframes magicx-aia-textShimmer {
550
568
  0% {
551
569
  background-position: 100% 0;
552
570
  }
@@ -555,7 +573,7 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
555
573
  }
556
574
  }
557
575
 
558
- .magicx-ac-shimmer-hidden {
576
+ .magicx-aia-shimmer-hidden {
559
577
  color: transparent !important;
560
578
  }
561
579
 
@@ -564,56 +582,79 @@ function y(s,e,t){let n=s.slice(e);if(t||e===0||s[e-1]===" ")return n;let i=n.in
564
582
  * Consumer CSS always wins without !important.
565
583
  *
566
584
  * Resolution priority (highest wins):
567
- * 1. Consumer CSS targeting new vars (--ac-pill-bg, etc.)
568
- * 2. Consumer CSS targeting legacy vars (--ac-color-*, via fallback chain)
585
+ * 1. Consumer CSS targeting new vars (--aia-pill-bg, etc.)
586
+ * 2. Consumer CSS targeting legacy vars (--aia-color-*, via fallback chain)
569
587
  * 3. These built-in defaults
570
588
  */
571
589
 
572
590
  /* Light mode defaults (base) */
573
- :where(.magicx-ac),
574
- :where(.magicx-ac[data-mode="light"]) {
575
- --ac-pill-bg: #f1f5f9;
576
- --ac-pill-color: #475569;
577
- --ac-pill-font-size: 19px;
591
+ :where(.magicx-aia),
592
+ :where(.magicx-aia[data-mode="light"]) {
593
+ --aia-pill-bg: #bdbdbd;
594
+ --aia-pill-color: #000000;
595
+ --aia-pill-font-size: 19px;
596
+
597
+ --aia-option-bg: transparent;
598
+ --aia-option-color: #000000;
599
+ --aia-option-color-selected: #000000;
600
+ --aia-option-font-size: 19px;
601
+
602
+ --aia-written-text-color: #000000;
603
+ --aia-written-text-font-size: 19px;
604
+ --aia-caret-color: var(--aia-written-text-color, #000000);
578
605
 
579
- --ac-option-bg: transparent;
580
- --ac-option-color: #475569;
581
- --ac-option-color-selected: #0f172a;
582
- --ac-option-font-size: 19px;
606
+ --aia-submit-bg: #000000;
607
+ --aia-submit-color: #ffffff;
583
608
 
584
- --ac-written-text-color: #0f172a;
585
- --ac-written-text-font-size: 19px;
609
+ --aia-color-text-muted: #6b7280;
610
+
611
+ --aia-streak-rgb: 99, 102, 241;
612
+ --aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
586
613
  }
587
614
 
588
615
  /* Dark mode defaults */
589
- :where(.magicx-ac[data-mode="dark"]) {
590
- --ac-pill-bg: #1e293b;
591
- --ac-pill-color: #cbd5e1;
592
- --ac-pill-font-size: 19px;
616
+ :where(.magicx-aia[data-mode="dark"]) {
617
+ --aia-pill-bg: #bdbdbd;
618
+ --aia-pill-color: #ffffff;
619
+ --aia-pill-font-size: 19px;
620
+
621
+ --aia-option-bg: transparent;
622
+ --aia-option-color: #ffffff;
623
+ --aia-option-color-selected: #ffffff;
624
+ --aia-option-font-size: 19px;
625
+
626
+ --aia-written-text-color: #ffffff;
627
+ --aia-written-text-font-size: 19px;
628
+ --aia-caret-color: var(--aia-written-text-color, #ffffff);
593
629
 
594
- --ac-option-bg: transparent;
595
- --ac-option-color: #cbd5e1;
596
- --ac-option-color-selected: #f8fafc;
597
- --ac-option-font-size: 19px;
630
+ --aia-submit-bg: #ffffff;
631
+ --aia-submit-color: #000000;
598
632
 
599
- --ac-written-text-color: #f1f5f9;
600
- --ac-written-text-font-size: 19px;
633
+ --aia-color-text-muted: #c1c4cb;
634
+
635
+ --aia-streak-rgb: 255, 255, 255;
636
+ --aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
601
637
  }
602
638
 
603
639
  /* optionsPosition: dropdown above the input */
604
- :where(.magicx-ac[data-options-position="above"]) [data-ac-dropdown] {
640
+ :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
605
641
  top: auto;
606
642
  bottom: 100%;
607
643
  margin-top: 0;
608
644
  margin-bottom: 6px;
645
+ flex-direction: column-reverse;
646
+ }
647
+
648
+ :where(.magicx-aia[data-options-position="above"]) [data-aia-pillbar] {
649
+ padding: 0 27px 27px 27px;
609
650
  }
610
651
 
611
652
  /* Disable all animations when data-animations="off" */
612
- :where(.magicx-ac[data-animations="off"]) *,
613
- :where(.magicx-ac[data-animations="off"]) *::before,
614
- :where(.magicx-ac[data-animations="off"]) *::after {
653
+ :where(.magicx-aia[data-animations="off"]) *,
654
+ :where(.magicx-aia[data-animations="off"]) *::before,
655
+ :where(.magicx-aia[data-animations="off"]) *::after {
615
656
  animation-duration: 0s !important;
616
657
  transition-duration: 0s !important;
617
658
  }
618
- `;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};
659
+ `;var me=0;function ge(){return`:ac-${++me}:`}function X(){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:"",isFocused:!1}}var H=class{constructor(e,t={}){this.store=R(X());this._listboxId=ge();this.modeController=null;this.unsubscribers=[];this.derivedInProgress=!1;this.domRefs=null;this.dropdownRefs=null;this.externalListeners=new Set;this.container=e,this.opts=t,this.renderMode=t.renderMode??"full",t.value!==void 0&&this.store.set({text:t.value}),t.completedParams!==void 0&&this.store.set({completedParams:t.completedParams}),this.pillsController=new I(this.store),this.fetchController=new O(this.store,()=>this.opts.apiConfig,()=>this.opts.optionOverrides,()=>this.opts.maskCompletedText,()=>this.opts.onError),this.keyboardController=new T(this.store,{columns:t.columns??2,listboxId:this.listboxId,getOnSubmit:()=>this.opts.onSubmit,selectOption:i=>this.selectOption(i)}),this.unsubscribers.push(this.store.subscribe((i,s)=>{this.recomputeDerived(i,s)})),this.unsubscribers.push(this.store.subscribe((i,s)=>{i.text!==s.text&&this.opts.onChange?.(i.text),i.completedParams!==s.completedParams&&this.opts.onParamsChange?.(i.completedParams),this.opts.onStateChange?.(i)})),this.renderMode!=="headless"&&(G(),this.setupContainer()),this.renderMode==="full"?this.buildAndRenderFull():this.renderMode==="dropdown"&&this.buildAndRenderDropdown(),this.fetchController.start()}focus(){this.domRefs?.textarea.focus()}reset(){this.store.set({...X()}),this.fetchController.doFetch("",[])}destroy(){this.fetchController.dispose(),this.modeController?.destroy(),this.newParamTimer&&clearTimeout(this.newParamTimer),this.suggestionRemovalTimer&&clearTimeout(this.suggestionRemovalTimer),this.externalListeners.clear();for(let e of this.unsubscribers)e();this.unsubscribers=[],this.domRefs=null,this.dropdownRefs=null,this.renderMode!=="headless"&&(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})}setActiveDropdownIndex(e){this.store.set({activeDropdownIndex:e})}handleTextChange(e){this.handleChange(e)}handleKeyDown(e){this.keyboardController.handleKeyDown(e)}setFocused(e){this.store.get().isFocused!==e&&this.store.set({isFocused:e})}subscribe(e){return this.externalListeners.add(e),()=>{this.externalListeners.delete(e)}}getState(){return this.store.get()}get listboxId(){return this._listboxId}get isReady(){return this.store.get().isReady}on(e,t){switch(e){case"submit":return this.opts.onSubmit=t,()=>{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.dropdownTrigger!==void 0&&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(),i=t.actionableSuggestions[0];if(!i)return;let s=t.filterBase,n=t.text.slice(0,s),r=n.length===0&&t.text.length===0,d=n.length===0&&t.text.length>0&&t.placeholderText.length>0&&t.placeholderText.toLowerCase().startsWith(t.text.toLowerCase());(r||d)&&t.placeholderText&&(n=`${t.placeholderText} `);let a=F(n,e.text);a>0&&(n=n.slice(0,n.length-a));let c=n.length>0&&n[n.length-1]!==" ",l=`${n}${c?" ":""}${e.text} `,p=(r||d)&&l.length>0?l[0].toUpperCase()+l.slice(1):l,u=p.toLowerCase().lastIndexOf(e.text.toLowerCase()),g=u>=0?p.slice(u,u+e.text.length):e.text,m={id:crypto.randomUUID(),placeholder:"",type:i.type,text:g,kind:e.kind,suggestionType:i.type,suggestionPlaceholder:i.text,options:i.options??[],metadata:e.metadata},x=t.actionableSuggestions.length-1;this.store.set(h=>({text:p,filterBase:p.length,completedParams:[...h.completedParams,m],newParamId:m.id,pillTapped:!1,activeDropdownIndex:-1,skipNextFetch:x>0})),this.suggestionRemovalTimer=window.setTimeout(()=>{this.store.set(h=>({suggestions:h.suggestions.filter(f=>f!==i)}))},400)}recomputeDerived(e,t){if(this.derivedInProgress)return;this.derivedInProgress=!0;let i=K(e.text,e.completedParams),s=e.suggestions.filter(h=>h.type!=="placeholder"),n=s[0],r=n?this.opts.optionOverrides?.[n.type]:void 0,d=Math.min(e.filterBase,e.text.length),c=e.lastRawQuery!==""||d>0?v(e.text,d,e.filterInProgress):"",l=n?r?r(c.trim()):n.options??[]:[],p=C(l,c),u=e.suggestions.filter(h=>h.type==="placeholder").map(h=>h.text).join(" "),g=this.opts.dropdownTrigger??"auto",m=!1;g==="auto"?m=!e.isLoading&&p.length>0&&e.isFocused:g==="manual"&&(m=!e.isLoading&&p.length>0&&e.pillTapped),this.store.set({segments:i,actionableSuggestions:s,filteredOptions:p,placeholderText:u,isDropdownOpen:m}),this.derivedInProgress=!1;let x=this.store.get();for(let h of this.externalListeners)h(x)}setupContainer(){this.container.classList.add("magicx-aia"),this.container.dataset.pillPlacement=this.renderMode==="dropdown"?"dropdown":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 w(this.container,this.opts.mode??"auto")}buildAndRenderFull(){let e=this,t={store:this.store,listboxId:this.listboxId,get pillPlacement(){return e.opts.pillPlacement??"inline"},get onSubmit(){return e.opts.onSubmit},selectOption:i=>this.selectOption(i),setActivePill:i=>this.pillsController.setActivePill(i),handleKeyDown:i=>this.keyboardController.handleKeyDown(i),handleChange:i=>this.handleChange(i)};this.domRefs=z(this.container,t),this.subscribeBatchedRender(()=>{this.domRefs&&k(this.domRefs,this.store.get(),t)}),k(this.domRefs,this.store.get(),t),this.subscribeNewParamTimer()}buildAndRenderDropdown(){let e={store:this.store,listboxId:this.listboxId,selectOption:t=>this.selectOption(t),setActivePill:t=>this.pillsController.setActivePill(t)};this.dropdownRefs=V(this.container,e),this.subscribeBatchedRender(()=>{this.dropdownRefs&&M(this.dropdownRefs,this.store.get(),e)}),M(this.dropdownRefs,this.store.get(),e),this.subscribeNewParamTimer()}subscribeBatchedRender(e){let t=!1;this.unsubscribers.push(this.store.subscribe(()=>{t||(t=!0,queueMicrotask(()=>{t=!1,e()}))}))}subscribeNewParamTimer(){this.unsubscribers.push(this.store.subscribe((e,t)=>{e.newParamId&&e.newParamId!==t.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:i,invalid:s}=N(e,t.completedParams);s.length>0&&this.store.set(n=>({completedParams:i,suggestions:[...s.map(r=>({type:r.suggestionType,text:r.suggestionPlaceholder,required:!0,options:r.options})),...n.suggestions]}))}};export{H as AIAutocomplete,R as createStore};
619
660
  //# sourceMappingURL=index.mjs.map