@magicx-eng/ai-autocomplete-react 0.2.0 → 0.3.0

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/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as gt,useLayoutEffect as ft,useRef as le}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
1
+ import{forwardRef as Dt,useCallback as Le,useEffect as at,useImperativeHandle as Rt,useLayoutEffect as Tt,useRef as ce}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-67791514")){let e=document.createElement("style");e.id="ac-style-67791514",e.textContent=`.AIAutocomplete-module_container_KKjFU {
2
2
  position: relative;
3
3
  /* Inherits the host page's font by default. Consumers can pin a specific
4
4
  font on the library via \`--aia-font-family: 'Custom Font'\` without
@@ -8,10 +8,10 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
8
8
  }
9
9
 
10
10
  .AIAutocomplete-module_inputWrapper_FLq1b {
11
- padding: 20px;
12
- border: 1px solid var(--aia-color-border-default, #9ea5b2);
13
- border-radius: 23px;
14
- background: transparent;
11
+ padding: 19px 15px 20px 25px;
12
+ border: 1px solid var(--aia-border, #b0b0b0);
13
+ border-radius: 30px;
14
+ background: var(--aia-surface, #ffffff);
15
15
  overflow: hidden;
16
16
  display: flex;
17
17
  align-items: center;
@@ -97,7 +97,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
97
97
  .AIAutocomplete-module_input_IW-P-[data-aia-empty="true"] {
98
98
  display: inline-block;
99
99
  min-width: 1px;
100
- vertical-align: top;
101
100
  }
102
101
 
103
102
  .AIAutocomplete-module_pillListContainer_h92IA {
@@ -110,26 +109,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
110
109
  margin-left: 0;
111
110
  }
112
111
 
113
- .AIAutocomplete-module_submitButton_sl1Mi {
114
- flex-shrink: 0;
115
- width: 36px;
116
- height: 36px;
117
- border-radius: 50%;
118
- border: none;
119
- background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
120
- color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
121
- cursor: pointer;
122
- display: flex;
123
- align-items: center;
124
- justify-content: center;
125
- padding: 0;
126
- transition: opacity 0.2s ease;
127
- }
128
-
129
- .AIAutocomplete-module_submitButton_sl1Mi:hover {
130
- opacity: 0.85;
131
- }
132
-
133
112
  .AIAutocomplete-module_submitSlot_GhuCM {
134
113
  display: contents;
135
114
  }
@@ -166,7 +145,7 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
166
145
  background-position: -50% 0;
167
146
  }
168
147
  }
169
- `,document.head.appendChild(e)}var U={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitButton:"AIAutocomplete-module_submitButton_sl1Mi",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",textShimmer:"AIAutocomplete-module_textShimmer_eCLdq"};if(typeof document<"u"&&!document.getElementById("ac-style-3819c762")){let e=document.createElement("style");e.id="ac-style-3819c762",e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
148
+ `,document.head.appendChild(e)}var ee={container:"AIAutocomplete-module_container_KKjFU",inputWrapper:"AIAutocomplete-module_inputWrapper_FLq1b",editorArea:"AIAutocomplete-module_editorArea_7rBWq",input:"AIAutocomplete-module_input_IW-P-",pillListContainer:"AIAutocomplete-module_pillListContainer_h92IA",submitSlot:"AIAutocomplete-module_submitSlot_GhuCM",textShimmer:"AIAutocomplete-module_textShimmer_eCLdq"};if(typeof document<"u"&&!document.getElementById("ac-style-3819c762")){let e=document.createElement("style");e.id="ac-style-3819c762",e.textContent=`.AIAutocompleteDropdown-module_dropdown_yz2KC {
170
149
  position: absolute;
171
150
  left: 0;
172
151
  right: 0;
@@ -175,12 +154,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
175
154
  margin-top: 6px;
176
155
  display: flex;
177
156
  flex-direction: column;
157
+ box-sizing: border-box;
158
+ padding: 15px 0;
178
159
  overflow: hidden;
179
160
  container-type: inline-size;
180
161
  z-index: 10;
181
162
  opacity: 0;
182
163
  pointer-events: none;
183
164
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
165
+ /* Solid surface is the default (matches the Figma components). Opt into the
166
+ frosted-glass look with data-aia-surface="glass". */
167
+ background: var(--aia-surface, #ffffff);
168
+ border: 1px solid var(--aia-border, #b0b0b0);
169
+ border-radius: 25px;
170
+ }
171
+
172
+ .AIAutocompleteDropdown-module_dropdown_yz2KC[data-aia-surface="glass"] {
173
+ background: transparent;
174
+ border-color: transparent;
184
175
  box-shadow:
185
176
  hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
186
177
  hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
@@ -193,7 +184,6 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
193
184
  inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
194
185
  hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
195
186
  backdrop-filter: blur(30px);
196
- border-radius: 28px;
197
187
  }
198
188
 
199
189
  .AIAutocompleteDropdown-module_visible_QCoXj {
@@ -201,8 +191,10 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
201
191
  pointer-events: auto;
202
192
  }
203
193
 
194
+ /* The dropdown owns only vertical (15px) padding; each child insets its own
195
+ 15px horizontally so option highlights can span the full dropdown width. */
204
196
  .AIAutocompleteDropdown-module_pillBar_pwTXe {
205
- padding: 27px 27px 0px 27px;
197
+ padding: 0 15px;
206
198
  overflow-x: auto;
207
199
  overflow-y: hidden;
208
200
  scrollbar-width: none;
@@ -219,7 +211,7 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
219
211
  display: flex;
220
212
  flex-direction: column;
221
213
  gap: 20px;
222
- padding: 25px;
214
+ padding: 10px 15px;
223
215
  }
224
216
 
225
217
  .AIAutocompleteDropdown-module_skeletonBar_O3xIx {
@@ -248,29 +240,132 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
248
240
  opacity: 0.25;
249
241
  }
250
242
  }
251
- `,document.head.appendChild(e)}var te={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
252
- position: relative;
253
- z-index: 1;
254
- pointer-events: auto;
243
+ `,document.head.appendChild(e)}var ne={dropdown:"AIAutocompleteDropdown-module_dropdown_yz2KC",visible:"AIAutocompleteDropdown-module_visible_QCoXj",pillBar:"AIAutocompleteDropdown-module_pillBar_pwTXe",skeletonBars:"AIAutocompleteDropdown-module_skeletonBars_HVr9C",skeletonBar:"AIAutocompleteDropdown-module_skeletonBar_O3xIx",aiaSkeletonPulse:"AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q"};import{getFooterHint as pt}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
244
+ .aia-cluster {
245
+ display: flex;
246
+ flex-wrap: wrap;
247
+ gap: var(--aia-cluster-gap, 0.5rem);
248
+ }
249
+ /* Inline-level variant \u2014 used when the cluster must sit inline (e.g. inside
250
+ a contentEditable). Rendered on a <span> so it's valid inline content. */
251
+ .aia-cluster[data-inline] {
252
+ display: inline-flex;
253
+ }
254
+ .aia-cluster[data-nowrap] {
255
+ flex-wrap: nowrap;
256
+ }
257
+ .aia-cluster[data-align="start"] {
258
+ align-items: start;
259
+ }
260
+ .aia-cluster[data-align="center"] {
261
+ align-items: center;
262
+ }
263
+ .aia-cluster[data-align="end"] {
264
+ align-items: end;
265
+ }
266
+ .aia-cluster[data-align="baseline"] {
267
+ align-items: baseline;
268
+ }
269
+ .aia-cluster[data-justify="start"] {
270
+ justify-content: start;
271
+ }
272
+ .aia-cluster[data-justify="center"] {
273
+ justify-content: center;
274
+ }
275
+ .aia-cluster[data-justify="end"] {
276
+ justify-content: end;
277
+ }
278
+ .aia-cluster[data-justify="between"] {
279
+ justify-content: space-between;
280
+ }
281
+ .aia-cluster[data-justify="around"] {
282
+ justify-content: space-around;
283
+ }
284
+ }
285
+ `,document.head.appendChild(e)}import{jsx as Me}from"react/jsx-runtime";function le({gap:e,align:s="center",justify:r="start",noWrap:c=!1,inline:i=!1,className:t,children:l,...u}){let v=e?{"--aia-cluster-gap":e}:void 0,f={className:t?`aia-cluster ${t}`:"aia-cluster","data-align":s,"data-justify":r,"data-nowrap":c||void 0,"data-inline":i||void 0,style:v,...u};return i?Me("span",{...f,children:l}):Me("div",{...f,children:l})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer insets its own 15px horizontally (the dropdown only pads
286
+ vertically), so the divider spans the full footer width yet still stays clear
287
+ of the dropdown's rounded edges. */
288
+ .DropdownFooter-module_footer_qQQ7x {
289
+ display: flex;
290
+ flex-direction: column;
291
+ gap: 12px;
292
+ padding: 0 15px;
293
+ }
294
+
295
+ .DropdownFooter-module_divider_FlX4C {
296
+ border-top: 0.5px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
297
+ }
298
+
299
+ .DropdownFooter-module_hintGroup_ZzbPf {
300
+ min-width: 0;
301
+ }
302
+
303
+ .DropdownFooter-module_brandLink_r4f3R {
255
304
  display: inline-flex;
256
- gap: 5px;
257
305
  align-items: center;
258
- vertical-align: middle;
259
- transform: translateY(-3px);
306
+ gap: 2px;
307
+ text-decoration: none;
308
+ cursor: pointer;
309
+ transition: opacity 150ms ease-out;
310
+ }
311
+
312
+ .DropdownFooter-module_brandLink_r4f3R:hover {
313
+ opacity: 0.7;
260
314
  }
261
315
 
262
- .PillList-module_pill_osSyz {
316
+ .DropdownFooter-module_key_Bz1H- {
263
317
  display: inline-flex;
264
318
  align-items: center;
265
319
  justify-content: center;
266
- height: 36px;
267
- padding: 13px 13px;
320
+ min-width: 30px;
321
+ height: 22px;
322
+ padding: 2px 6px;
323
+ border: 0.5px solid var(--aia-footer-hint-color, #505050);
324
+ border-radius: 5px;
325
+ font-family: inherit;
326
+ font-size: 12px;
327
+ line-height: 18px;
328
+ color: var(--aia-footer-hint-color, #505050);
329
+ }
330
+
331
+ .DropdownFooter-module_hint_GKEOH {
332
+ font-family: inherit;
333
+ font-size: 12px;
334
+ line-height: 18px;
335
+ color: var(--aia-footer-hint-color, #505050);
336
+ }
337
+
338
+ .DropdownFooter-module_brand_Al-lR {
339
+ font-family: inherit;
340
+ font-size: 10px;
341
+ line-height: 18px;
342
+ color: var(--aia-footer-brand-color, #b0b0b0);
343
+ }
344
+
345
+ .DropdownFooter-module_badge_Fk9vg {
346
+ display: inline-flex;
347
+ align-items: center;
348
+ height: 23px;
349
+ padding: 2.5px 5.5px;
350
+ border: 0.36px solid var(--aia-footer-badge-border, rgba(189, 189, 189, 0.51));
351
+ border-radius: 999px;
352
+ font-family: inherit;
353
+ font-size: 10px;
354
+ line-height: 18px;
355
+ color: var(--aia-footer-brand-color, #b0b0b0);
356
+ }
357
+ `,document.head.appendChild(e)}var G={footer:"DropdownFooter-module_footer_qQQ7x",divider:"DropdownFooter-module_divider_FlX4C",hintGroup:"DropdownFooter-module_hintGroup_ZzbPf",brandLink:"DropdownFooter-module_brandLink_r4f3R",key:"DropdownFooter-module_key_Bz1H-",hint:"DropdownFooter-module_hint_GKEOH",brand:"DropdownFooter-module_brand_Al-lR",badge:"DropdownFooter-module_badge_Fk9vg"};import{jsx as de,jsxs as be}from"react/jsx-runtime";function Ne({hasTabbedToHighlight:e=!1,isOptionHighlighted:s=!1}){let{key:r,hint:c}=pt(e,s);return be("footer",{className:G.footer,"data-aia-footer":"",children:[de("div",{className:G.divider}),be(le,{justify:"between",noWrap:!0,children:[be(le,{gap:"5px",className:G.hintGroup,children:[de("kbd",{className:G.key,children:r}),de("span",{className:G.hint,children:c})]}),be("a",{className:G.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:G.brand,children:"AI"}),de("span",{className:G.badge,children:"Autocomplete"})]})]})]})}if(typeof document<"u"&&!document.getElementById("ac-style-04fef8d6")){let e=document.createElement("style");e.id="ac-style-04fef8d6",e.textContent=`.Pill-module_pill_3Rkw- {
358
+ display: inline-flex;
359
+ align-items: center;
360
+ justify-content: center;
361
+ height: 38px;
362
+ padding: 10px 12px;
268
363
  border: none;
269
364
  border-radius: 999px;
270
365
  background: rgba(49, 50, 85, 0.25);
271
366
  background: color-mix(
272
367
  in srgb,
273
- var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,
368
+ var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
274
369
  transparent
275
370
  );
276
371
  color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
@@ -279,36 +374,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
279
374
  line-height: 30px;
280
375
  cursor: pointer;
281
376
  white-space: nowrap;
282
- animation: PillList-module_fadeIn_Aezob 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
283
- box-shadow:
284
- hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
285
- hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
286
- var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
287
- var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
288
- hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
289
- hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
290
- hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
291
- hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
292
- inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
293
- hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
294
- backdrop-filter: blur(30px);
377
+ animation: Pill-module_fadeIn_Bbqtz 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
295
378
  }
296
379
 
297
- .PillList-module_rounded_WvXy4 {
380
+ .Pill-module_rounded_6WMps {
298
381
  border-radius: 999px;
299
382
  }
300
383
 
301
384
  /* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
302
385
  and just hides the text. The pill's native background acts as the visible
303
386
  shape; the pulse provides the shimmer. */
304
- .PillList-module_skeleton_Lp8x6 {
387
+ .Pill-module_skeleton_-u9-j {
305
388
  pointer-events: none;
306
389
  cursor: default;
307
390
  color: transparent;
308
- animation: PillList-module_skeletonPulse_xZ8Yf 1.4s ease-in-out infinite;
391
+ animation: Pill-module_skeletonPulse_xHh-7 1.4s ease-in-out infinite;
309
392
  }
310
393
 
311
- @keyframes PillList-module_skeletonPulse_xZ8Yf {
394
+ @keyframes Pill-module_skeletonPulse_xHh-7 {
312
395
  0%,
313
396
  100% {
314
397
  filter: brightness(1);
@@ -318,75 +401,75 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
318
401
  }
319
402
  }
320
403
 
321
- .PillList-module_pill_osSyz:hover {
322
- filter: brightness(1.2);
323
- }
324
-
325
- .PillList-module_active_Oll-- {
326
- outline: 1px solid #5a5b8a;
327
- }
328
-
329
- @keyframes PillList-module_fadeIn_Aezob {
404
+ @keyframes Pill-module_fadeIn_Bbqtz {
330
405
  from {
331
406
  opacity: 0;
332
407
  }
333
408
  }
334
- `,document.head.appendChild(e)}var B={list:"PillList-module_list_qvLqO",pill:"PillList-module_pill_osSyz",fadeIn:"PillList-module_fadeIn_Aezob",rounded:"PillList-module_rounded_WvXy4",skeleton:"PillList-module_skeleton_Lp8x6",skeletonPulse:"PillList-module_skeletonPulse_xZ8Yf",active:"PillList-module_active_Oll--"};import{jsx as fe}from"react/jsx-runtime";var Je=[125,69];function ze(e){return e===0?.4:e===1?.3:.15}function se({pills:e,activePillIndex:_,onSelectPill:f,rounded:v,loading:c}){return c&&e.length===0?fe("span",{className:B.list,"data-aia-pill-list-loading":"",children:Je.map((d,m)=>fe("span",{"data-aia-pill-skeleton":"",className:`${B.pill} ${v?B.rounded:""} ${B.skeleton}`,style:{width:d,opacity:ze(m)}},`skel-${d}`))}):fe("span",{className:B.list,"data-aia-pill-list-loading":c?"":void 0,children:e.map((d,m)=>fe("button",{type:"button","data-aia-pill":"","data-aia-loading":c?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:`${B.pill} ${v?B.rounded:""} ${m===_&&!c?B.active:""} ${c?B.skeleton:""}`,style:{opacity:ze(m)},onMouseDown:g=>g.preventDefault(),onClick:c?void 0:()=>f(m),disabled:c,children:d.text},`${d.type}-${d.text}`))})}import{useEffect as tt,useLayoutEffect as ot,useRef as at,useState as nt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-ff33a0ab")){let e=document.createElement("style");e.id="ac-style-ff33a0ab",e.textContent=`.SuggestionGrid-module_scrollWrapper_MOqfw {
409
+ `,document.head.appendChild(e)}var j={pill:"Pill-module_pill_3Rkw-",fadeIn:"Pill-module_fadeIn_Bbqtz",rounded:"Pill-module_rounded_6WMps",skeleton:"Pill-module_skeleton_-u9-j",skeletonPulse:"Pill-module_skeletonPulse_xHh-7"};import{jsx as ut}from"react/jsx-runtime";var Ae={active:1,upcoming:.4,disabled:.2};function Ke({label:e,state:s,selected:r,rounded:c,loading:i,onClick:t}){let l=[j.pill,c?j.rounded:"",r&&!i?j.active:"",i?j.skeleton:""].filter(Boolean).join(" ");return ut("button",{type:"button","data-aia-pill":"","data-aia-loading":i?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:Ae[s]},onMouseDown:u=>u.preventDefault(),onClick:i?void 0:t,disabled:i,children:e})}if(typeof document<"u"&&!document.getElementById("ac-style-0fcb7940")){let e=document.createElement("style");e.id="ac-style-0fcb7940",e.textContent=`.PillList-module_list_qvLqO {
335
410
  position: relative;
411
+ z-index: 1;
412
+ pointer-events: auto;
413
+ display: inline-flex;
414
+ gap: 7px;
415
+ align-items: center;
416
+ vertical-align: middle;
336
417
  }
418
+ `,document.head.appendChild(e)}var Ce={list:"PillList-module_list_qvLqO"};import{jsx as xe}from"react/jsx-runtime";var mt=[125,69];function We(e){return e===0?"active":e===1?"upcoming":"disabled"}function ve({pills:e,activePillIndex:s,onSelectPill:r,rounded:c,loading:i}){return i&&e.length===0?xe("span",{className:Ce.list,"data-aia-pill-list-loading":"",children:mt.map((t,l)=>xe("span",{"data-aia-pill-skeleton":"",className:`${j.pill} ${c?j.rounded:""} ${j.skeleton}`,style:{width:t,opacity:Ae[We(l)]}},`skel-${t}`))}):xe("span",{className:Ce.list,"data-aia-pill-list-loading":i?"":void 0,children:e.map((t,l)=>xe(Ke,{label:t.text,state:We(l),selected:l===s,rounded:c,loading:i,onClick:()=>r(l)},`${t.type}-${t.text}`))})}import{useEffect as gt,useLayoutEffect as ft,useRef as ht,useState as bt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-948e58da")){let e=document.createElement("style");e.id="ac-style-948e58da",e.textContent=`@layer layout {
419
+ .aia-grid {
420
+ display: grid;
421
+ grid-template-columns: repeat(
422
+ auto-fit,
423
+ minmax(min(var(--aia-grid-min), 100%), var(--aia-grid-max, 1fr))
424
+ );
425
+ gap: var(--aia-grid-gap, 0);
426
+ }
337
427
 
338
- .SuggestionGrid-module_scrollWrapper_MOqfw::after {
339
- content: "";
340
- position: absolute;
341
- left: 0;
342
- right: 0;
343
- bottom: 0;
344
- height: 50%;
345
- pointer-events: none;
346
- opacity: 0;
347
- transition: opacity 150ms ease-out;
348
- backdrop-filter: blur(12px);
349
- mask-image: linear-gradient(to bottom, transparent, white);
350
- }
351
-
352
- .SuggestionGrid-module_scrollWrapper_MOqfw[data-fade]::after {
353
- opacity: 1;
354
- }
355
-
356
- .SuggestionGrid-module_grid_jvaPb {
357
- display: grid;
358
- grid-template-columns: minmax(0, 250px);
359
- /* Pack rows from the top instead of stretching to fill the grid container. */
360
- grid-auto-rows: min-content;
361
- align-content: start;
362
- max-width: 100cqi;
363
- padding: 8px 8px;
364
- max-height: 200px;
365
- overflow-y: auto;
366
- scrollbar-width: thin;
367
- scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
368
- }
369
-
370
- @container (min-width: 516px) {
371
- .SuggestionGrid-module_grid_jvaPb {
372
- grid-template-columns: repeat(2, minmax(0, 250px));
428
+ /* Scrollable variant \u2014 capped height with a styled thin scrollbar. Rows pack
429
+ from the top instead of stretching to fill the container. */
430
+ .aia-grid[data-scroll] {
431
+ grid-auto-rows: min-content;
432
+ align-content: start;
373
433
  justify-content: start;
434
+ padding: var(--aia-grid-scroll-pad, 0);
435
+ max-height: var(--aia-grid-max-height, 200px);
436
+ overflow-y: auto;
437
+ scrollbar-width: thin;
438
+ scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
439
+ }
440
+ .aia-grid[data-scroll]::-webkit-scrollbar {
441
+ width: 6px;
442
+ }
443
+ .aia-grid[data-scroll]::-webkit-scrollbar-track {
444
+ background: transparent;
445
+ }
446
+ .aia-grid[data-scroll]::-webkit-scrollbar-thumb {
447
+ background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
448
+ border-radius: 3px;
374
449
  }
375
- }
376
-
377
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
378
- width: 6px;
379
- }
380
-
381
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
382
- background: transparent;
383
- }
384
450
 
385
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-thumb {
386
- background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
387
- border-radius: 3px;
451
+ /* Fade wrapper \u2014 bottom blur overlay shown while the grid overflows below. */
452
+ .aia-grid-fade {
453
+ position: relative;
454
+ }
455
+ .aia-grid-fade::after {
456
+ content: "";
457
+ position: absolute;
458
+ left: 0;
459
+ right: 0;
460
+ bottom: 0;
461
+ height: 50%;
462
+ pointer-events: none;
463
+ opacity: 0;
464
+ transition: opacity 150ms ease-out;
465
+ backdrop-filter: blur(12px);
466
+ mask-image: linear-gradient(to bottom, transparent, white);
467
+ }
468
+ .aia-grid-fade[data-fade]::after {
469
+ opacity: 1;
470
+ }
388
471
  }
389
- `,document.head.appendChild(e)}var ye={scrollWrapper:"SuggestionGrid-module_scrollWrapper_MOqfw",grid:"SuggestionGrid-module_grid_jvaPb"};import{useEffect as Ye,useRef as Ze,useState as et}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
472
+ `,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:s,gap:r,scroll:c=!1,maxHeight:i,fade:t=!1,className:l,children:u,...v}){let f=ht(null),[_,S]=bt(!1);gt(()=>{if(!t)return;let h=f.current;if(!h)return;let P=()=>{S(h.scrollHeight-h.scrollTop-h.clientHeight>1)};h.addEventListener("scroll",P,{passive:!0});let R=new ResizeObserver(P);return R.observe(h),()=>{h.removeEventListener("scroll",P),R.disconnect()}},[t]),ft(()=>{let h=f.current;!t||!h||S(h.scrollHeight-h.scrollTop-h.clientHeight>1)},[t,u]);let I={"--aia-grid-min":e};s&&(I["--aia-grid-max"]=s),r&&(I["--aia-grid-gap"]=r),i&&(I["--aia-grid-max-height"]=i);let k=Ge("div",{ref:f,className:!t&&l?`aia-grid ${l}`:"aia-grid","data-scroll":c||void 0,style:I,...t?{}:v,children:u});return t?Ge("div",{className:l?`aia-grid-fade ${l}`:"aia-grid-fade","data-fade":_?"":void 0,...v,children:k}):k}import{useEffect as xt,useRef as vt,useState as wt}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-82820da7")){let e=document.createElement("style");e.id="ac-style-82820da7",e.textContent=`.SuggestionItem-module_item_d4vpD {
390
473
  position: relative;
391
474
  overflow: visible;
392
475
  display: flex;
@@ -401,7 +484,10 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
401
484
  white-space: normal;
402
485
  word-break: break-word;
403
486
  border-radius: 12px;
404
- padding: 13px 13px;
487
+ /* Symmetric 15px inset (matches Figma). The dropdown pads only vertically, so
488
+ the option fills the full cell width \u2014 its highlight/border-streak animation
489
+ reaches the dropdown edges while the text stays inset 15px. */
490
+ padding: 10px 15px;
405
491
  animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
406
492
  }
407
493
 
@@ -733,7 +819,24 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
733
819
  filter: brightness(0.55);
734
820
  }
735
821
  }
736
- `,document.head.appendChild(e)}var z={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as be,jsxs as Me}from"react/jsx-runtime";function Oe({option:e,isHighlighted:_,onSelect:f,onHighlight:v,id:c,loading:d}){let[m,g]=et(!1),h=Ze(void 0);Ye(()=>()=>clearTimeout(h.current),[]);let n=()=>{d||!e.is_tappable||m||(g(!0),f(e),clearTimeout(h.current),h.current=setTimeout(()=>g(!1),500))},p=[z.item,_&&!d?z.highlighted:"",e.is_tappable?z.tappable:z.nonTappable,m?z.pressed:""].filter(Boolean).join(" ");return Me("div",{id:c,role:"option","data-aia-option":"","data-aia-loading":d?"":void 0,"aria-selected":_,className:p,tabIndex:d||!e.is_tappable?-1:0,onClick:n,onKeyDown:I=>{!d&&e.is_tappable&&(I.key==="Enter"||I.key===" ")&&(I.preventDefault(),n())},onMouseEnter:!d&&e.is_tappable?v:void 0,children:[be("div",{className:z.streaks}),be("div",{className:z.streaksVert}),Me("span",{className:z.content,children:[be("span",{className:z.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&be("span",{className:z.tag,children:e.tag})]})]})}import{jsx as Ie}from"react/jsx-runtime";function Be({options:e,activeIndex:_,onSelect:f,onHighlight:v,listboxId:c,loading:d}){let m=at(null),[g,h]=nt(!1);return tt(()=>{let n=m.current;if(!n)return;let p=()=>{h(n.scrollHeight-n.scrollTop-n.clientHeight>1)};n.addEventListener("scroll",p,{passive:!0});let I=new ResizeObserver(p);return I.observe(n),()=>{n.removeEventListener("scroll",p),I.disconnect()}},[]),ot(()=>{let n=m.current;n&&h(n.scrollHeight-n.scrollTop-n.clientHeight>1)},[e]),Ie("div",{className:ye.scrollWrapper,"data-fade":g?"":void 0,children:Ie("div",{ref:m,className:ye.grid,children:e.map((n,p)=>Ie(Oe,{option:n,isHighlighted:p===_,onSelect:f,onHighlight:()=>v(p),id:`${c}-option-${p}`,loading:d},n.text))})})}import{jsx as oe,jsxs as it}from"react/jsx-runtime";var rt=[159,119,164];function ke({suggestions:e,activeIndex:_,onSelect:f,onHighlight:v,isOpen:c,id:d,className:m,pills:g,onPillClick:h,showPills:n=!0,isLoading:p=!1}){let A=e[0]?.options??[],S=n&&g&&g.length>0&&h,D=A.length>0,H=p&&!D,N=c&&(D||S||p);return it("div",{id:d,role:"listbox","data-aia-dropdown":"","data-aia-loading":p?"":void 0,className:`${te.dropdown} ${N?te.visible:""} ${m??""}`,onMouseDown:P=>P.preventDefault(),children:[n&&g&&g.length>0&&h&&oe("div",{className:te.pillBar,"data-aia-pillbar":"",children:oe(se,{pills:g,activePillIndex:0,onSelectPill:h,rounded:!0,loading:p})}),n&&(!g||g.length===0)&&p&&oe("div",{className:te.pillBar,"data-aia-pillbar":"",children:oe(se,{pills:[],activePillIndex:0,onSelectPill:()=>{},rounded:!0,loading:!0})}),D&&oe(Be,{options:A,activeIndex:_,onSelect:f,onHighlight:v,listboxId:d,loading:p}),H&&oe("div",{className:te.skeletonBars,"data-aia-skeleton-bars":"",children:rt.map(P=>oe("span",{className:te.skeletonBar,style:{width:P}},`bar-${P}`))})]})}if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
822
+ `,document.head.appendChild(e)}var B={item:"SuggestionItem-module_item_d4vpD",fadeIn:"SuggestionItem-module_fadeIn_I8u35",content:"SuggestionItem-module_content_T-Qba",tappable:"SuggestionItem-module_tappable_70KcX",nonTappable:"SuggestionItem-module_nonTappable_xSZM-",highlighted:"SuggestionItem-module_highlighted_Hb0SU",tag:"SuggestionItem-module_tag_e3Fwe",pressed:"SuggestionItem-module_pressed_98o-r",glassFade:"SuggestionItem-module_glassFade_oyiSj",tapDown:"SuggestionItem-module_tapDown_G3WGz",streaks:"SuggestionItem-module_streaks_d9PEB",streaksVert:"SuggestionItem-module_streaksVert_ERlV1",streakHorizRight:"SuggestionItem-module_streakHorizRight_aboGz",streakHorizLeft:"SuggestionItem-module_streakHorizLeft_BreWJ",streakVertUp:"SuggestionItem-module_streakVertUp_to1GD",streakVertDown:"SuggestionItem-module_streakVertDown_OrcLh",skeletonPulse:"SuggestionItem-module_skeletonPulse_plvdD",text:"SuggestionItem-module_text_yqoh9"};import{jsx as we,jsxs as Ve}from"react/jsx-runtime";function qe({option:e,isHighlighted:s,onSelect:r,onHighlight:c,id:i,loading:t}){let[l,u]=wt(!1),v=vt(void 0);xt(()=>()=>clearTimeout(v.current),[]);let f=()=>{t||!e.is_tappable||l||(u(!0),r(e),clearTimeout(v.current),v.current=setTimeout(()=>u(!1),500))},_=[B.item,s&&!t?B.highlighted:"",e.is_tappable?B.tappable:B.nonTappable,l?B.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":t?"":void 0,"aria-selected":s,className:_,tabIndex:t||!e.is_tappable?-1:0,onClick:f,onKeyDown:S=>{!t&&e.is_tappable&&(S.key==="Enter"||S.key===" ")&&(S.preventDefault(),f())},onMouseEnter:!t&&e.is_tappable?c:void 0,children:[we("div",{className:B.streaks}),we("div",{className:B.streaksVert}),Ve("span",{className:B.content,children:[we("span",{className:B.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&we("span",{className:B.tag,children:e.tag})]})]})}import{jsx as $e}from"react/jsx-runtime";function Ue({options:e,activeIndex:s,onSelect:r,onHighlight:c,listboxId:i,loading:t}){return $e(je,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((l,u)=>$e(qe,{option:l,isHighlighted:u===s,onSelect:r,onHighlight:()=>c(u),id:`${i}-option-${u}`,loading:t},l.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
823
+ .aia-stack {
824
+ display: flex;
825
+ flex-direction: column;
826
+ gap: var(--aia-stack-space, 0.5rem);
827
+ }
828
+ .aia-stack[data-align="start"] {
829
+ align-items: start;
830
+ }
831
+ .aia-stack[data-align="center"] {
832
+ align-items: center;
833
+ }
834
+ .aia-stack[data-align="end"] {
835
+ align-items: end;
836
+ }
837
+ /* data-align="stretch" is the flex default \u2014 no rule needed. */
838
+ }
839
+ `,document.head.appendChild(e)}import{jsx as yt}from"react/jsx-runtime";function Qe({space:e,align:s="stretch",className:r,children:c,...i}){let t=e?{"--aia-stack-space":e}:void 0;return yt("div",{className:r?`aia-stack ${r}`:"aia-stack","data-align":s,style:t,...i,children:c})}import{jsx as te,jsxs as kt}from"react/jsx-runtime";var _t=[159,119,164];function Pe({suggestions:e,activeIndex:s,onSelect:r,onHighlight:c,isOpen:i,id:t,className:l,pills:u,onPillClick:v,showPills:f=!0,isLoading:_=!1,hasTabbedToHighlight:S=!1}){let k=e[0]?.options??[],h=s>=0&&!!k[s]?.is_tappable,P=!!(u&&u.length>0&&v),R=f&&P,n=R||f&&!P&&_,b=k.length>0,O=_&&!b,N=i&&(b||R||_);return te("div",{id:t,role:"listbox","data-aia-dropdown":"","data-aia-loading":_?"":void 0,className:`${ne.dropdown} ${N?ne.visible:""} ${l??""}`,onMouseDown:E=>E.preventDefault(),children:kt(Qe,{space:"14px",children:[n&&te(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:te(ve,{pills:u??[],activePillIndex:0,onSelectPill:v??(()=>{}),rounded:!0,loading:_})}),b&&te(Ue,{options:k,activeIndex:s,onSelect:r,onHighlight:c,listboxId:t,loading:_}),O&&te("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:_t.map(E=>te("span",{className:ne.skeletonBar,style:{width:E}},`bar-${E}`))}),te(Ne,{hasTabbedToHighlight:S,isOptionHighlighted:h})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
737
840
  * Built-in appearance defaults \u2014 zero specificity via :where().
738
841
  * Consumer CSS always wins without !important.
739
842
  *
@@ -758,17 +861,19 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
758
861
  /* Light mode defaults (base) */
759
862
  :where(.magicx-aia),
760
863
  :where(.magicx-aia[data-mode="light"]) {
864
+ --aia-surface: #ffffff;
865
+ --aia-border: #b0b0b0;
761
866
  --aia-pill-bg: #bdbdbd;
762
- --aia-pill-color: #000000;
763
- --aia-pill-font-size: 19px;
867
+ --aia-pill-color: #333539;
868
+ --aia-pill-font-size: 18px;
764
869
 
765
870
  --aia-option-bg: transparent;
766
- --aia-option-color: #4f4f4f;
871
+ --aia-option-color: #505050;
767
872
  --aia-option-color-selected: #000000;
768
- --aia-option-font-size: 19px;
873
+ --aia-option-font-size: 18px;
769
874
 
770
875
  --aia-written-text-color: #000000;
771
- --aia-written-text-font-size: 19px;
876
+ --aia-written-text-font-size: 20px;
772
877
  --aia-caret-color: var(--aia-written-text-color, #000000);
773
878
 
774
879
  --aia-submit-bg: #000000;
@@ -780,21 +885,28 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
780
885
 
781
886
  --aia-streak-rgb: 99, 102, 241;
782
887
  --aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
888
+
889
+ --aia-footer-divider: rgba(176, 176, 176, 0.4);
890
+ --aia-footer-hint-color: #505050;
891
+ --aia-footer-brand-color: #b0b0b0;
892
+ --aia-footer-badge-border: rgba(189, 189, 189, 0.51);
783
893
  }
784
894
 
785
895
  /* Dark mode defaults */
786
896
  :where(.magicx-aia[data-mode="dark"]) {
897
+ --aia-surface: #000000;
898
+ --aia-border: #505050;
787
899
  --aia-pill-bg: #bdbdbd;
788
- --aia-pill-color: #ffffff;
789
- --aia-pill-font-size: 19px;
900
+ --aia-pill-color: #b0b0b0;
901
+ --aia-pill-font-size: 18px;
790
902
 
791
903
  --aia-option-bg: transparent;
792
904
  --aia-option-color: #b0b0b0;
793
905
  --aia-option-color-selected: #ffffff;
794
- --aia-option-font-size: 19px;
906
+ --aia-option-font-size: 18px;
795
907
 
796
908
  --aia-written-text-color: #ffffff;
797
- --aia-written-text-font-size: 19px;
909
+ --aia-written-text-font-size: 20px;
798
910
  --aia-caret-color: var(--aia-written-text-color, #ffffff);
799
911
 
800
912
  --aia-submit-bg: #ffffff;
@@ -806,19 +918,33 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
806
918
 
807
919
  --aia-streak-rgb: 255, 255, 255;
808
920
  --aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
921
+
922
+ --aia-footer-divider: rgba(255, 255, 255, 0.15);
923
+ --aia-footer-hint-color: #b0b0b0;
924
+ --aia-footer-brand-color: #505050;
925
+ --aia-footer-badge-border: #505050;
809
926
  }
810
927
 
811
- /* optionsPosition: dropdown above the input */
928
+ /* optionsPosition: dropdown above the input. The sections live inside the
929
+ dropdown's .aia-stack, so the reversal targets the stack (not the dropdown,
930
+ whose only child is the stack). */
812
931
  :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
813
932
  top: auto;
814
933
  bottom: 100%;
815
934
  margin-top: 0;
816
935
  margin-bottom: 6px;
936
+ }
937
+
938
+ :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack {
817
939
  flex-direction: column-reverse;
818
940
  }
819
941
 
820
- :where(.magicx-aia[data-options-position="above"]) [data-aia-pillbar] {
821
- padding: 13px 27px 13px 27px;
942
+ /* The footer sits at the top when the dropdown is above, so flip its own
943
+ internal stack too \u2014 the divider should sit BELOW the hint/branding row
944
+ (between the footer and the options beneath it), not above it. The footer's
945
+ own class is CSS-module-scoped, so target the stable data attribute. */
946
+ :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer] {
947
+ flex-direction: column-reverse;
822
948
  }
823
949
 
824
950
  /* Disable all animations when data-animations="off" */
@@ -828,5 +954,29 @@ import{forwardRef as mt,useCallback as Pe,useEffect as Ge,useImperativeHandle as
828
954
  animation-duration: 0s !important;
829
955
  transition-duration: 0s !important;
830
956
  }
831
- `,document.head.appendChild(e)}import{buildQuery as bt,ModeController as ht,setCursorOffset as xt}from"@magicx-eng/ai-autocomplete-vanilla";import{AIAutocomplete as st}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as He,useEffect as he,useRef as M,useState as lt}from"react";var dt={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1};function Ae({onSubmit:e,onError:_,optionOverrides:f,maskCompletedText:v,apiConfig:c,columns:d=2,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,onFocus:p,onBlur:I,value:A,completedParams:S,onChange:D,onParamsChange:H,source:N,setCursor:P}){let a=M(null),[w,G]=lt(null),X=M(e);X.current=e;let K=M(_);K.current=_;let Q=M(D);Q.current=D;let V=M(H);V.current=H;let C=M(p);C.current=p;let J=M(I);J.current=I;let L=M(P);L.current=P,he(()=>{if(typeof document>"u")return;let t=new st(document.createElement("div"),{renderMode:"headless",apiConfig:c,optionOverrides:f,maskCompletedText:v,columns:d,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,source:N,value:A,completedParams:S,onSubmit:(...y)=>X.current?.(...y),onError:(...y)=>K.current?.(...y),onChange:(...y)=>Q.current?.(...y),onParamsChange:(...y)=>V.current?.(...y),onFocus:()=>C.current?.(),onBlur:()=>J.current?.(),setCursor:y=>L.current?.(y)});a.current=t,G(t.getState());let k=t.subscribe(y=>G(y));return()=>{k(),t.destroy(),a.current===t&&(a.current=null)}},[]),he(()=>{A!==void 0&&a.current?.setValue(A)},[A]),he(()=>{S!==void 0&&a.current?.setCompletedParams(S)},[S]);let ae=JSON.stringify(c??null),Y=M(f),q=M(0);if(f!==Y.current){let t=Y.current,k=f,y=Object.keys(t??{}),ne=Object.keys(k??{});(y.length!==ne.length||ne.some(ie=>!t?.[ie]||k[ie]!==t[ie]))&&q.current++,Y.current=f}he(()=>{a.current?.update({apiConfig:c,optionOverrides:f,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n})},[ae,q.current,m,g,h,n]);let F=M(null);F.current===null&&(F.current={handleTextChange:t=>a.current?.handleTextChange(t),handleKeyDown:t=>{let k="nativeEvent"in t?t.nativeEvent:t;a.current?.handleKeyDown(k)},setFocused:t=>a.current?.setFocused(t),startEditingParam:t=>a.current?.startEditingParam(t),exitEditMode:()=>a.current?.exitEditMode(),handleCaretAfterInput:t=>a.current?.handleCaretAfterInput(t),handleCaretMove:t=>a.current?.handleCaretMove(t),replaceEditingRange:t=>a.current?.replaceEditingRange(t)??!1,setActivePill:t=>a.current?.setActivePill(t),removeLastParam:()=>a.current?.removeLastParam(),clearNewParamId:()=>a.current?.clearNewParamId(),reset:()=>a.current?.reset(),selectOption:t=>a.current?.selectOption(t),setActiveDropdownIndex:t=>a.current?.setActiveDropdownIndex(t),handleFocus:()=>a.current?.setFocused(!0),handleBlur:()=>a.current?.setFocused(!1)});let b=F.current,Z=He(t=>{let k=t.target.value,ne=k.length>0&&!t.nativeEvent?.isComposing&&k[0]!==k[0].toUpperCase()?k[0].toUpperCase()+k.slice(1):k;a.current?.handleTextChange(ne)},[]),ee=He(t=>{a.current?.handleKeyDown(t.nativeEvent)},[]),$=a.current,r=w??dt,o=A!==void 0?A:r.text,i=S!==void 0?S:r.completedParams,s=r.actionableSuggestions,x=s[0],u=$?.listboxId??"",E=r.activeDropdownIndex>=0&&$?`${u}-option-${r.activeDropdownIndex}`:void 0,R=r.editingParam,W=R?{type:R.suggestionType,text:R.suggestionPlaceholder,required:!0,options:R.options}:null,de=W??x,ve=W?[W]:s,pe=!$||r.isLoading&&!r.editingParam&&!r.inSelectionAnimation;return{completedParams:i,suggestionPills:s,setActivePill:b.setActivePill,removeLastParam:b.removeLastParam,segments:r.segments,newParamId:r.newParamId,clearNewParamId:b.clearNewParamId,suggestions:r.suggestions,activeIndex:r.activeDropdownIndex,isReady:r.isReady,isLoading:pe,isFocused:r.isFocused,isDropdownOpen:r.isDropdownOpen,placeholderText:r.placeholderText,listboxId:u,error:r.error,handleTextChange:b.handleTextChange,handleKeyDown:b.handleKeyDown,setFocused:b.setFocused,editingParam:R,editingAnchor:r.editingAnchor,caretOffset:r.caretOffset,startEditingParam:b.startEditingParam,exitEditMode:b.exitEditMode,handleCaretAfterInput:b.handleCaretAfterInput,handleCaretMove:b.handleCaretMove,replaceEditingRange:b.replaceEditingRange,inputProps:{value:o,placeholder:r.placeholderText||void 0,onChange:Z,onKeyDown:ee,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":r.isDropdownOpen,"aria-activedescendant":E,"aria-autocomplete":"list","aria-controls":u},reset:b.reset,dropdownProps:{suggestions:de?[{...de,options:r.filteredOptions}]:[],activeIndex:r.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:r.isDropdownOpen,id:u,pills:ve,onPillClick:b.setActivePill,isLoading:pe}}}import{extractPlainText as Ke,getCursorOffset as Fe,plainTextLength as pt,renderEditableContent as ut,setCursorOffset as We}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as O,useEffect as Se,useLayoutEffect as Ee,useRef as re}from"react";var xe;function ct(){if(xe!==void 0)return xe;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),xe=e.contentEditable==="plaintext-only",xe}function Ne(e){let{segments:_,newParamId:f,editingParam:v,editingAnchor:c,caretOffset:d,placeholderText:m,isFocused:g,isDropdownOpen:h,listboxId:n,activeDescendantId:p,autoFocus:I,handleTextChange:A,handleKeyDown:S,handleCaretAfterInput:D,handleCaretMove:H,startEditingParam:N,replaceEditingRange:P,setFocused:a}=e,w=re(null),G=re(!1),X=re(""),K=re(""),Q=re(null),V=re(0);Q.current=d,Se(()=>{if(!I)return;let o=w.current;o&&(document.activeElement===o?a(!0):o.focus())},[I,a]),Se(()=>{let o=w.current;if(!o)return;let i=o.ownerDocument??document,s=()=>{let x=i.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!o.contains(x.anchorNode))return;let u=x.anchorNode,W=(u.nodeType===Node.ELEMENT_NODE?u:u.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(W&&W!==v?.id){N(W);return}performance.now()-V.current<50||H(Fe(o))};return i.addEventListener("selectionchange",s),()=>i.removeEventListener("selectionchange",s)},[v,N,H]),Ee(()=>{let o=w.current;o&&ut({input:o,segments:_,newParamId:f,editingParamId:v?.id??null,placeholderText:m??"",isFocused:g})},[_,f,v,m,g]),Ee(()=>{let o=X.current,i=f??"";if(X.current=i,!i||i===o)return;let s=w.current;if(!s)return;s.focus();let x=Q.current??pt(s);We(s,x)},[f]),Ee(()=>{let o=K.current,i=v?.id??"";if(K.current=i,!i||i===o||c==null)return;let s=w.current;s&&We(s,c)},[v,c]);let C=O(()=>{if(G.current)return;let o=w.current;if(!o)return;let i=Ke(o),x=i.length>0&&i[0]!==i[0].toUpperCase()?i[0].toUpperCase()+i.slice(1):i;A(x)},[A]),J=O(()=>{V.current=performance.now(),C();let o=w.current;o&&D(Fe(o))},[C,D]);Se(()=>{let o=w.current;if(!o)return;let i=s=>{let x=s,u=x.inputType;if(u==="insertParagraph"||u==="insertLineBreak"||u==="insertFromDrop"){s.preventDefault();return}if(u.startsWith("insert")||u.startsWith("delete")){let E=u.startsWith("delete")?"":x.data??"";P(E)&&s.preventDefault()}};return o.addEventListener("beforeinput",i),()=>o.removeEventListener("beforeinput",i)},[P]);let L=O(()=>{G.current=!0},[]),ae=O(()=>{G.current=!1,C()},[C]),Y=O(o=>{o.preventDefault();let i=w.current;if(!i)return;let s=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!s)return;let x=i.ownerDocument??document,u=x.getSelection();if(!u||u.rangeCount===0)return;let E=u.getRangeAt(0);if(!i.contains(E.startContainer))return;E.deleteContents();let R=x.createTextNode(s);E.insertNode(R),E.setStartAfter(R),E.collapse(!0),u.removeAllRanges(),u.addRange(E),C()},[C]),q=O(o=>S(o),[S]),F=O(()=>a(!0),[a]),b=O(()=>a(!1),[a]),Z=O(()=>w.current?.focus(),[]),ee=O(()=>w.current?.blur(),[]),$=O(()=>{let o=w.current;return o?Ke(o):""},[]),r=ct()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:r,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":n,"aria-expanded":h,"aria-activedescendant":p,spellCheck:!0,enterKeyHint:"send",onInput:J,onKeyDown:q,onCompositionStart:L,onCompositionEnd:ae,onPaste:Y,onFocus:F,onBlur:b},getPlainText:$,focus:Z,blur:ee}}import{jsx as j,jsxs as Ce}from"react/jsx-runtime";function vt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var wt=mt(function({onSubmit:_,onError:f,optionOverrides:v,maskCompletedText:c,className:d,apiConfig:m,columns:g,pillPlacement:h="inline",mode:n="auto",optionsPosition:p="below",animations:I=!0,dropdownTrigger:A,closeDropdownOnBlur:S,showNonTappableOptions:D,autoFocus:H=!0,onFocus:N,onBlur:P,value:a,completedParams:w,onChange:G,onParamsChange:X,submitButton:K},Q){let V=le(null),C=le(null),J=le(()=>{}),L=le(null),ae=le(null);Ge(()=>{let l=V.current;if(l)return L.current?L.current.setMode(n):L.current=new ht(l,n),()=>{L.current?.destroy(),L.current=null}},[n]);let Y=Pe(l=>{let T=ae.current?.current;T&&(T.focus(),xt(T,l))},[]),{completedParams:q,suggestionPills:F,setActivePill:b,segments:Z,newParamId:ee,clearNewParamId:$,placeholderText:r,isFocused:o,isDropdownOpen:i,isLoading:s,activeIndex:x,listboxId:u,handleTextChange:E,handleKeyDown:R,setFocused:W,editingParam:de,editingAnchor:ve,caretOffset:pe,startEditingParam:t,handleCaretAfterInput:k,handleCaretMove:y,replaceEditingRange:ne,dropdownProps:ie,reset:ue}=Ae({onSubmit:l=>J.current(l),onError:f,optionOverrides:v,maskCompletedText:c,apiConfig:m,columns:g,dropdownTrigger:A,optionsPosition:p,closeDropdownOnBlur:S,showNonTappableOptions:D,onFocus:N,onBlur:P,value:a,completedParams:w,onChange:G,onParamsChange:X,source:"full-sdk",setCursor:Y});Ge(()=>{if(!ee)return;let l=window.setTimeout(()=>$(),650);return()=>window.clearTimeout(l)},[ee,$]);let Ve=x>=0?`${u}-option-${x}`:void 0,{inputRef:we,editorProps:qe,focus:ce,blur:De,getPlainText:Le}=Ne({segments:Z,newParamId:ee,editingParam:de,editingAnchor:ve,caretOffset:pe,placeholderText:r,isFocused:o,isDropdownOpen:i,listboxId:u,activeDescendantId:Ve,autoFocus:H,handleTextChange:E,handleKeyDown:R,handleCaretAfterInput:k,handleCaretMove:y,startEditingParam:t,replaceEditingRange:ne,setFocused:W});ae.current=we,ft(()=>{let l=C.current,T=we.current;if(!l||!T)return;let ge=()=>{let Te=l.firstElementChild;if(!Te)return;if(T.dataset.aiaEmpty==="true"){l.setAttribute("data-aia-pill-wrapped","");return}let Xe=Te.getBoundingClientRect(),Qe=T.getBoundingClientRect();Xe.top>=Qe.bottom-2?l.setAttribute("data-aia-pill-wrapped",""):l.removeAttribute("data-aia-pill-wrapped")};ge();let Re=new ResizeObserver(ge);return Re.observe(T),()=>Re.disconnect()},[Z,F.length,s,we]),gt(Q,()=>({focus:ce,blur:De,reset:ue,setMode:l=>L.current?.setMode(l)}),[ce,De,ue]);let me=!!Z.length||q.length>0,_e=Pe(()=>{if(!me)return;let l=Le(),{rawQuery:T,completedParams:ge}=bt(l,q);_({query:l.trim(),raw_query:T,completed_params:ge}),ue()},[me,q,_,ue,Le]);J.current=_e;let $e=Pe(l=>{l.target?.closest("[data-aia-pill]")||ce()},[ce]),Ue=h==="inline",je=h==="dropdown";return Ce("div",{ref:V,className:`magicx-aia ${U.container} ${d??""}`,"data-pill-placement":h,"data-options-position":p,"data-animations":I?"on":"off","data-mode":vt(n),children:[j(ke,{...ie,showPills:je}),Ce("div",{className:U.inputWrapper,onClick:$e,children:[Ce("div",{className:U.editorArea,"data-aia-editor":"",children:[j("div",{...qe,className:U.input,"data-aia-input":""}),Ue&&(s||F.length>0)&&j("span",{ref:C,className:U.pillListContainer,"data-aia-pill-list-container":"",children:j(se,{pills:F,activePillIndex:0,onSelectPill:b,loading:s})})]}),K===null?null:K===void 0?j("button",{type:"button","data-aia-submit":"",className:U.submitButton,disabled:!me,onClick:l=>{l.stopPropagation(),_e()},"aria-label":"Submit",children:j("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:j("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}):j("span",{"data-aia-submit":"",className:U.submitSlot,onClick:l=>{me&&(l.stopPropagation(),_e())},children:K})]})]})});export{wt as AIAutocomplete,ke as AIAutocompleteDropdown,Ae as useAIAutocomplete};
957
+ `,document.head.appendChild(e)}import{buildQuery as Lt,ModeController as zt,setCursorOffset as Bt}from"@magicx-eng/ai-autocomplete-vanilla";if(typeof document<"u"&&!document.getElementById("ac-style-fdee06e6")){let e=document.createElement("style");e.id="ac-style-fdee06e6",e.textContent=`.SubmitButton-module_submitButton_otz7H {
958
+ flex-shrink: 0;
959
+ width: 36px;
960
+ height: 36px;
961
+ border-radius: 50%;
962
+ border: none;
963
+ background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
964
+ color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
965
+ cursor: pointer;
966
+ display: flex;
967
+ align-items: center;
968
+ justify-content: center;
969
+ padding: 0;
970
+ transition: opacity 0.2s ease;
971
+ }
972
+
973
+ .SubmitButton-module_submitButton_otz7H:hover {
974
+ opacity: 0.85;
975
+ }
976
+
977
+ .SubmitButton-module_submitButton_otz7H:disabled {
978
+ opacity: 0.4;
979
+ cursor: default;
980
+ }
981
+ `,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Je({disabled:e,onClick:s}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:r=>{r.stopPropagation(),s()},"aria-label":"Submit",children:Ee("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:Ee("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}import{AIAutocomplete as It}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Ze,useEffect as ye,useRef as F,useState as St}from"react";var At={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,filterBase:0,filterInProgress:!1,pillTapped:!1,skipNextFetch:!1,lastRawQuery:"",isFocused:!1,editingParam:null,editingAnchor:null,editingTail:null,caretOffset:null,inSelectionAnimation:!1,hasTabbedToHighlight:!1};function De({onSubmit:e,onError:s,optionOverrides:r,maskCompletedText:c,apiConfig:i,columns:t=2,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f,onFocus:_,onBlur:S,value:I,completedParams:k,onChange:h,onParamsChange:P,source:R,setCursor:V}){let n=F(null),[b,O]=St(null),N=F(e);N.current=e;let E=F(s);E.current=s;let Q=F(h);Q.current=h;let q=F(P);q.current=P;let T=F(_);T.current=_;let X=F(S);X.current=S;let L=F(V);L.current=V,ye(()=>{if(typeof document>"u")return;let o=new It(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:r,maskCompletedText:c,columns:t,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f,source:R,value:I,completedParams:k,onSubmit:(...A)=>N.current?.(...A),onError:(...A)=>E.current?.(...A),onChange:(...A)=>Q.current?.(...A),onParamsChange:(...A)=>q.current?.(...A),onFocus:()=>T.current?.(),onBlur:()=>X.current?.(),setCursor:A=>L.current?.(A)});n.current=o,O(o.getState());let C=o.subscribe(A=>O(A));return()=>{C(),o.destroy(),n.current===o&&(n.current=null)}},[]),ye(()=>{I!==void 0&&n.current?.setValue(I)},[I]),ye(()=>{k!==void 0&&n.current?.setCompletedParams(k)},[k]);let oe=JSON.stringify(i??null),J=F(r),$=F(0);if(r!==J.current){let o=J.current,C=r,A=Object.keys(o??{}),ae=Object.keys(C??{});(A.length!==ae.length||ae.some(se=>!o?.[se]||C[se]!==o[se]))&&$.current++,J.current=r}ye(()=>{n.current?.update({apiConfig:i,optionOverrides:r,dropdownTrigger:l,optionsPosition:u,closeDropdownOnBlur:v,showNonTappableOptions:f})},[oe,$.current,l,u,v,f]);let K=F(null);K.current===null&&(K.current={handleTextChange:o=>n.current?.handleTextChange(o),handleKeyDown:o=>{let C="nativeEvent"in o?o.nativeEvent:o;n.current?.handleKeyDown(C)},setFocused:o=>n.current?.setFocused(o),startEditingParam:o=>n.current?.startEditingParam(o),exitEditMode:()=>n.current?.exitEditMode(),handleCaretAfterInput:o=>n.current?.handleCaretAfterInput(o),handleCaretMove:o=>n.current?.handleCaretMove(o),replaceEditingRange:o=>n.current?.replaceEditingRange(o)??!1,setActivePill:o=>n.current?.setActivePill(o),removeLastParam:()=>n.current?.removeLastParam(),clearNewParamId:()=>n.current?.clearNewParamId(),reset:()=>n.current?.reset(),selectOption:o=>n.current?.selectOption(o),setActiveDropdownIndex:o=>n.current?.setActiveDropdownIndex(o),handleFocus:()=>n.current?.setFocused(!0),handleBlur:()=>n.current?.setFocused(!1)});let w=K.current,Z=Ze(o=>{let C=o.target.value,ae=C.length>0&&!o.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;n.current?.handleTextChange(ae)},[]),Y=Ze(o=>{n.current?.handleKeyDown(o.nativeEvent)},[]),U=n.current,d=b??At,a=I!==void 0?I:d.text,p=k!==void 0?k:d.completedParams,m=d.actionableSuggestions,y=m[0],g=U?.listboxId??"",D=d.activeDropdownIndex>=0&&U?`${g}-option-${d.activeDropdownIndex}`:void 0,z=d.editingParam,W=z?{type:z.suggestionType,text:z.suggestionPlaceholder,required:!0,options:z.options}:null,pe=W??y,ke=W?[W]:m,ue=!U||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:w.setActivePill,removeLastParam:w.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:w.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:ue,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,placeholderText:d.placeholderText,listboxId:g,error:d.error,handleTextChange:w.handleTextChange,handleKeyDown:w.handleKeyDown,setFocused:w.setFocused,editingParam:z,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:w.startEditingParam,exitEditMode:w.exitEditMode,handleCaretAfterInput:w.handleCaretAfterInput,handleCaretMove:w.handleCaretMove,replaceEditingRange:w.replaceEditingRange,inputProps:{value:a,placeholder:d.placeholderText||void 0,onChange:Z,onKeyDown:Y,onFocus:w.handleFocus,onBlur:w.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:w.reset,dropdownProps:{suggestions:pe?[{...pe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:w.selectOption,onHighlight:w.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:g,pills:ke,onPillClick:w.setActivePill,isLoading:ue,hasTabbedToHighlight:d.hasTabbedToHighlight}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Ct,renderEditableContent as Pt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as H,useEffect as Re,useLayoutEffect as Te,useRef as re}from"react";var _e;function Et(){if(_e!==void 0)return _e;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),_e=e.contentEditable==="plaintext-only",_e}function ot(e){let{segments:s,newParamId:r,editingParam:c,editingAnchor:i,caretOffset:t,placeholderText:l,isFocused:u,isDropdownOpen:v,listboxId:f,activeDescendantId:_,autoFocus:S,handleTextChange:I,handleKeyDown:k,handleCaretAfterInput:h,handleCaretMove:P,startEditingParam:R,replaceEditingRange:V,setFocused:n}=e,b=re(null),O=re(!1),N=re(""),E=re(""),Q=re(null),q=re(0);Q.current=t,Re(()=>{if(!S)return;let a=b.current;a&&(document.activeElement===a?n(!0):a.focus())},[S,n]),Re(()=>{let a=b.current;if(!a)return;let p=a.ownerDocument??document,m=()=>{let y=p.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!a.contains(y.anchorNode))return;let g=y.anchorNode,W=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(W&&W!==c?.id){R(W);return}performance.now()-q.current<50||P(et(a))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[c,R,P]),Te(()=>{let a=b.current;a&&Pt({input:a,segments:s,newParamId:r,editingParamId:c?.id??null,placeholderText:l??"",isFocused:u})},[s,r,c,l,u]),Te(()=>{let a=N.current,p=r??"";if(N.current=p,!p||p===a)return;let m=b.current;if(!m)return;m.focus();let y=Q.current??Ct(m);tt(m,y)},[r]),Te(()=>{let a=E.current,p=c?.id??"";if(E.current=p,!p||p===a||i==null)return;let m=b.current;m&&tt(m,i)},[c,i]);let T=H(()=>{if(O.current)return;let a=b.current;if(!a)return;let p=Ye(a),y=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;I(y)},[I]),X=H(()=>{q.current=performance.now(),T();let a=b.current;a&&h(et(a))},[T,h]);Re(()=>{let a=b.current;if(!a)return;let p=m=>{let y=m,g=y.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":y.data??"";V(D)&&m.preventDefault()}};return a.addEventListener("beforeinput",p),()=>a.removeEventListener("beforeinput",p)},[V]);let L=H(()=>{O.current=!0},[]),oe=H(()=>{O.current=!1,T()},[T]),J=H(a=>{a.preventDefault();let p=b.current;if(!p)return;let m=(a.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let y=p.ownerDocument??document,g=y.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!p.contains(D.startContainer))return;D.deleteContents();let z=y.createTextNode(m);D.insertNode(z),D.setStartAfter(z),D.collapse(!0),g.removeAllRanges(),g.addRange(D),T()},[T]),$=H(a=>k(a),[k]),K=H(()=>n(!0),[n]),w=H(()=>n(!1),[n]),Z=H(()=>b.current?.focus(),[]),Y=H(()=>b.current?.blur(),[]),U=H(()=>{let a=b.current;return a?Ye(a):""},[]),d=Et()?"plaintext-only":"true";return{inputRef:b,editorProps:{ref:b,contentEditable:d,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":f,"aria-expanded":v,"aria-activedescendant":_,spellCheck:!0,enterKeyHint:"send",onInput:X,onKeyDown:$,onCompositionStart:L,onCompositionEnd:oe,onPaste:J,onFocus:K,onBlur:w},getPlainText:U,focus:Z,blur:Y}}import{jsx as ie,jsxs as ze}from"react/jsx-runtime";function Ft(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Ht=Dt(function({onSubmit:s,onError:r,optionOverrides:c,maskCompletedText:i,className:t,apiConfig:l,columns:u,pillPlacement:v="inline",mode:f="auto",optionsPosition:_="below",animations:S=!0,dropdownTrigger:I,closeDropdownOnBlur:k,showNonTappableOptions:h,autoFocus:P=!0,onFocus:R,onBlur:V,value:n,completedParams:b,onChange:O,onParamsChange:N,submitButton:E},Q){let q=ce(null),T=ce(null),X=ce(()=>{}),L=ce(null),oe=ce(null);at(()=>{let x=q.current;if(x)return L.current?L.current.setMode(f):L.current=new zt(x,f),()=>{L.current?.destroy(),L.current=null}},[f]);let J=Le(x=>{let M=oe.current?.current;M&&(M.focus(),Bt(M,x))},[]),{completedParams:$,suggestionPills:K,setActivePill:w,segments:Z,newParamId:Y,clearNewParamId:U,placeholderText:d,isFocused:a,isDropdownOpen:p,isLoading:m,activeIndex:y,listboxId:g,handleTextChange:D,handleKeyDown:z,setFocused:W,editingParam:pe,editingAnchor:ke,caretOffset:ue,startEditingParam:o,handleCaretAfterInput:C,handleCaretMove:A,replaceEditingRange:ae,dropdownProps:se,reset:me}=De({onSubmit:x=>X.current(x),onError:r,optionOverrides:c,maskCompletedText:i,apiConfig:l,columns:u,dropdownTrigger:I,optionsPosition:_,closeDropdownOnBlur:k,showNonTappableOptions:h,onFocus:R,onBlur:V,value:n,completedParams:b,onChange:O,onParamsChange:N,source:"full-sdk",setCursor:J});at(()=>{if(!Y)return;let x=window.setTimeout(()=>U(),650);return()=>window.clearTimeout(x)},[Y,U]);let nt=y>=0?`${g}-option-${y}`:void 0,{inputRef:Ie,editorProps:rt,focus:ge,blur:Be,getPlainText:Fe}=ot({segments:Z,newParamId:Y,editingParam:pe,editingAnchor:ke,caretOffset:ue,placeholderText:d,isFocused:a,isDropdownOpen:p,listboxId:g,activeDescendantId:nt,autoFocus:P,handleTextChange:D,handleKeyDown:z,handleCaretAfterInput:C,handleCaretMove:A,startEditingParam:o,replaceEditingRange:ae,setFocused:W});oe.current=Ie,Tt(()=>{let x=T.current,M=Ie.current;if(!x||!M)return;let he=()=>{let Oe=x.firstElementChild;if(!Oe)return;let dt=Oe.getBoundingClientRect(),ct=M.getBoundingClientRect();dt.top>=ct.bottom-2?x.setAttribute("data-aia-pill-wrapped",""):x.removeAttribute("data-aia-pill-wrapped")};he();let He=new ResizeObserver(he);return He.observe(M),()=>He.disconnect()},[Z,K.length,m,Ie]),Rt(Q,()=>({focus:ge,blur:Be,reset:me,setMode:x=>L.current?.setMode(x)}),[ge,Be,me]);let fe=!!Z.length||$.length>0,Se=Le(()=>{if(!fe)return;let x=Fe(),{rawQuery:M,completedParams:he}=Lt(x,$);s({query:x.trim(),raw_query:M,completed_params:he}),me()},[fe,$,s,me,Fe]);X.current=Se;let it=Le(x=>{x.target?.closest("[data-aia-pill]")||ge()},[ge]),st=v==="inline",lt=v==="dropdown";return ze("div",{ref:q,className:`magicx-aia ${ee.container} ${t??""}`,"data-pill-placement":v,"data-options-position":_,"data-animations":S?"on":"off","data-mode":Ft(f),children:[ie(Pe,{...se,showPills:lt}),ze("div",{className:ee.inputWrapper,onClick:it,children:[ze("div",{className:ee.editorArea,"data-aia-editor":"",children:[ie("div",{...rt,className:ee.input,"data-aia-input":""}),st&&(m||K.length>0)&&ie("span",{ref:T,className:ee.pillListContainer,"data-aia-pill-list-container":"",children:ie(ve,{pills:K,activePillIndex:0,onSelectPill:w,loading:m})})]}),E===null?null:E===void 0?ie(Je,{disabled:!fe,onClick:Se}):ie("span",{"data-aia-submit":"",className:ee.submitSlot,onClick:x=>{fe&&(x.stopPropagation(),Se())},children:E})]})]})});export{Ht as AIAutocomplete,Pe as AIAutocompleteDropdown,De as useAIAutocomplete};
832
982
  //# sourceMappingURL=index.mjs.map