@magicx-eng/ai-autocomplete-react 0.2.1 → 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 Ee,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 Ee,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;
@@ -109,26 +109,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
109
109
  margin-left: 0;
110
110
  }
111
111
 
112
- .AIAutocomplete-module_submitButton_sl1Mi {
113
- flex-shrink: 0;
114
- width: 36px;
115
- height: 36px;
116
- border-radius: 50%;
117
- border: none;
118
- background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
119
- color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
120
- cursor: pointer;
121
- display: flex;
122
- align-items: center;
123
- justify-content: center;
124
- padding: 0;
125
- transition: opacity 0.2s ease;
126
- }
127
-
128
- .AIAutocomplete-module_submitButton_sl1Mi:hover {
129
- opacity: 0.85;
130
- }
131
-
132
112
  .AIAutocomplete-module_submitSlot_GhuCM {
133
113
  display: contents;
134
114
  }
@@ -165,7 +145,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
165
145
  background-position: -50% 0;
166
146
  }
167
147
  }
168
- `,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 {
169
149
  position: absolute;
170
150
  left: 0;
171
151
  right: 0;
@@ -174,12 +154,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
174
154
  margin-top: 6px;
175
155
  display: flex;
176
156
  flex-direction: column;
157
+ box-sizing: border-box;
158
+ padding: 15px 0;
177
159
  overflow: hidden;
178
160
  container-type: inline-size;
179
161
  z-index: 10;
180
162
  opacity: 0;
181
163
  pointer-events: none;
182
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;
183
175
  box-shadow:
184
176
  hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
185
177
  hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
@@ -192,7 +184,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
192
184
  inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
193
185
  hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
194
186
  backdrop-filter: blur(30px);
195
- border-radius: 28px;
196
187
  }
197
188
 
198
189
  .AIAutocompleteDropdown-module_visible_QCoXj {
@@ -200,8 +191,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
200
191
  pointer-events: auto;
201
192
  }
202
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. */
203
196
  .AIAutocompleteDropdown-module_pillBar_pwTXe {
204
- padding: 27px 27px 3px 27px;
197
+ padding: 0 15px;
205
198
  overflow-x: auto;
206
199
  overflow-y: hidden;
207
200
  scrollbar-width: none;
@@ -218,7 +211,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
218
211
  display: flex;
219
212
  flex-direction: column;
220
213
  gap: 20px;
221
- padding: 25px;
214
+ padding: 10px 15px;
222
215
  }
223
216
 
224
217
  .AIAutocompleteDropdown-module_skeletonBar_O3xIx {
@@ -247,28 +240,132 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
247
240
  opacity: 0.25;
248
241
  }
249
242
  }
250
- `,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 {
251
- position: relative;
252
- z-index: 1;
253
- 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 {
254
304
  display: inline-flex;
255
- gap: 5px;
256
305
  align-items: center;
257
- vertical-align: middle;
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;
258
314
  }
259
315
 
260
- .PillList-module_pill_osSyz {
316
+ .DropdownFooter-module_key_Bz1H- {
261
317
  display: inline-flex;
262
318
  align-items: center;
263
319
  justify-content: center;
264
- height: 36px;
265
- 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;
266
363
  border: none;
267
364
  border-radius: 999px;
268
365
  background: rgba(49, 50, 85, 0.25);
269
366
  background: color-mix(
270
367
  in srgb,
271
- var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,
368
+ var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
272
369
  transparent
273
370
  );
274
371
  color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
@@ -277,36 +374,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
277
374
  line-height: 30px;
278
375
  cursor: pointer;
279
376
  white-space: nowrap;
280
- animation: PillList-module_fadeIn_Aezob 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
281
- box-shadow:
282
- hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
283
- hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
284
- var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
285
- var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
286
- hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
287
- hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
288
- hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
289
- hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
290
- inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
291
- hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
292
- backdrop-filter: blur(30px);
377
+ animation: Pill-module_fadeIn_Bbqtz 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
293
378
  }
294
379
 
295
- .PillList-module_rounded_WvXy4 {
380
+ .Pill-module_rounded_6WMps {
296
381
  border-radius: 999px;
297
382
  }
298
383
 
299
384
  /* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
300
385
  and just hides the text. The pill's native background acts as the visible
301
386
  shape; the pulse provides the shimmer. */
302
- .PillList-module_skeleton_Lp8x6 {
387
+ .Pill-module_skeleton_-u9-j {
303
388
  pointer-events: none;
304
389
  cursor: default;
305
390
  color: transparent;
306
- animation: PillList-module_skeletonPulse_xZ8Yf 1.4s ease-in-out infinite;
391
+ animation: Pill-module_skeletonPulse_xHh-7 1.4s ease-in-out infinite;
307
392
  }
308
393
 
309
- @keyframes PillList-module_skeletonPulse_xZ8Yf {
394
+ @keyframes Pill-module_skeletonPulse_xHh-7 {
310
395
  0%,
311
396
  100% {
312
397
  filter: brightness(1);
@@ -316,75 +401,75 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
316
401
  }
317
402
  }
318
403
 
319
- .PillList-module_pill_osSyz:hover {
320
- filter: brightness(1.2);
321
- }
322
-
323
- .PillList-module_active_Oll-- {
324
- outline: 1px solid #5a5b8a;
325
- }
326
-
327
- @keyframes PillList-module_fadeIn_Aezob {
404
+ @keyframes Pill-module_fadeIn_Bbqtz {
328
405
  from {
329
406
  opacity: 0;
330
407
  }
331
408
  }
332
- `,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((l,m)=>fe("span",{"data-aia-pill-skeleton":"",className:`${B.pill} ${v?B.rounded:""} ${B.skeleton}`,style:{width:l,opacity:ze(m)}},`skel-${l}`))}):fe("span",{className:B.list,"data-aia-pill-list-loading":c?"":void 0,children:e.map((l,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:l.text},`${l.type}-${l.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 {
333
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;
334
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
+ }
335
427
 
336
- .SuggestionGrid-module_scrollWrapper_MOqfw::after {
337
- content: "";
338
- position: absolute;
339
- left: 0;
340
- right: 0;
341
- bottom: 0;
342
- height: 50%;
343
- pointer-events: none;
344
- opacity: 0;
345
- transition: opacity 150ms ease-out;
346
- backdrop-filter: blur(12px);
347
- mask-image: linear-gradient(to bottom, transparent, white);
348
- }
349
-
350
- .SuggestionGrid-module_scrollWrapper_MOqfw[data-fade]::after {
351
- opacity: 1;
352
- }
353
-
354
- .SuggestionGrid-module_grid_jvaPb {
355
- display: grid;
356
- grid-template-columns: minmax(0, 250px);
357
- /* Pack rows from the top instead of stretching to fill the grid container. */
358
- grid-auto-rows: min-content;
359
- align-content: start;
360
- max-width: 100cqi;
361
- padding: 8px 8px;
362
- max-height: 200px;
363
- overflow-y: auto;
364
- scrollbar-width: thin;
365
- scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
366
- }
367
-
368
- @container (min-width: 516px) {
369
- .SuggestionGrid-module_grid_jvaPb {
370
- 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;
371
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;
372
449
  }
373
- }
374
-
375
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
376
- width: 6px;
377
- }
378
-
379
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
380
- background: transparent;
381
- }
382
450
 
383
- .SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-thumb {
384
- background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
385
- 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
+ }
386
471
  }
387
- `,document.head.appendChild(e)}var ye={scrollWrapper:"SuggestionGrid-module_scrollWrapper_MOqfw",grid:"SuggestionGrid-module_grid_jvaPb"};import{useEffect as Ze,useRef as Ye,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 {
388
473
  position: relative;
389
474
  overflow: visible;
390
475
  display: flex;
@@ -399,7 +484,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
399
484
  white-space: normal;
400
485
  word-break: break-word;
401
486
  border-radius: 12px;
402
- 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;
403
491
  animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
404
492
  }
405
493
 
@@ -731,7 +819,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
731
819
  filter: brightness(0.55);
732
820
  }
733
821
  }
734
- `,document.head.appendChild(e)}var T={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:l}){let[m,g]=et(!1),h=Ye(void 0);Ze(()=>()=>clearTimeout(h.current),[]);let n=()=>{l||!e.is_tappable||m||(g(!0),f(e),clearTimeout(h.current),h.current=setTimeout(()=>g(!1),500))},d=[T.item,_&&!l?T.highlighted:"",e.is_tappable?T.tappable:T.nonTappable,m?T.pressed:""].filter(Boolean).join(" ");return Me("div",{id:c,role:"option","data-aia-option":"","data-aia-loading":l?"":void 0,"aria-selected":_,className:d,tabIndex:l||!e.is_tappable?-1:0,onClick:n,onKeyDown:I=>{!l&&e.is_tappable&&(I.key==="Enter"||I.key===" ")&&(I.preventDefault(),n())},onMouseEnter:!l&&e.is_tappable?v:void 0,children:[be("div",{className:T.streaks}),be("div",{className:T.streaksVert}),Me("span",{className:T.content,children:[be("span",{className:T.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&be("span",{className:T.tag,children:e.tag})]})]})}import{jsx as Ie}from"react/jsx-runtime";function Be({options:e,activeIndex:_,onSelect:f,onHighlight:v,listboxId:c,loading:l}){let m=at(null),[g,h]=nt(!1);return tt(()=>{let n=m.current;if(!n)return;let d=()=>{h(n.scrollHeight-n.scrollTop-n.clientHeight>1)};n.addEventListener("scroll",d,{passive:!0});let I=new ResizeObserver(d);return I.observe(n),()=>{n.removeEventListener("scroll",d),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,d)=>Ie(Oe,{option:n,isHighlighted:d===_,onSelect:f,onHighlight:()=>v(d),id:`${c}-option-${d}`,loading:l},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:l,className:m,pills:g,onPillClick:h,showPills:n=!0,isLoading:d=!1}){let A=e[0]?.options??[],S=n&&g&&g.length>0&&h,D=A.length>0,H=d&&!D,N=c&&(D||S||d);return it("div",{id:l,role:"listbox","data-aia-dropdown":"","data-aia-loading":d?"":void 0,className:`${te.dropdown} ${N?te.visible:""} ${m??""}`,onMouseDown:E=>E.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:d})}),n&&(!g||g.length===0)&&d&&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:l,loading:d}),H&&oe("div",{className:te.skeletonBars,"data-aia-skeleton-bars":"",children:rt.map(E=>oe("span",{className:te.skeletonBar,style:{width:E}},`bar-${E}`))})]})}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=`/*
735
840
  * Built-in appearance defaults \u2014 zero specificity via :where().
736
841
  * Consumer CSS always wins without !important.
737
842
  *
@@ -756,17 +861,19 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
756
861
  /* Light mode defaults (base) */
757
862
  :where(.magicx-aia),
758
863
  :where(.magicx-aia[data-mode="light"]) {
864
+ --aia-surface: #ffffff;
865
+ --aia-border: #b0b0b0;
759
866
  --aia-pill-bg: #bdbdbd;
760
- --aia-pill-color: #000000;
761
- --aia-pill-font-size: 19px;
867
+ --aia-pill-color: #333539;
868
+ --aia-pill-font-size: 18px;
762
869
 
763
870
  --aia-option-bg: transparent;
764
- --aia-option-color: #4f4f4f;
871
+ --aia-option-color: #505050;
765
872
  --aia-option-color-selected: #000000;
766
- --aia-option-font-size: 19px;
873
+ --aia-option-font-size: 18px;
767
874
 
768
875
  --aia-written-text-color: #000000;
769
- --aia-written-text-font-size: 19px;
876
+ --aia-written-text-font-size: 20px;
770
877
  --aia-caret-color: var(--aia-written-text-color, #000000);
771
878
 
772
879
  --aia-submit-bg: #000000;
@@ -778,21 +885,28 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
778
885
 
779
886
  --aia-streak-rgb: 99, 102, 241;
780
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);
781
893
  }
782
894
 
783
895
  /* Dark mode defaults */
784
896
  :where(.magicx-aia[data-mode="dark"]) {
897
+ --aia-surface: #000000;
898
+ --aia-border: #505050;
785
899
  --aia-pill-bg: #bdbdbd;
786
- --aia-pill-color: #ffffff;
787
- --aia-pill-font-size: 19px;
900
+ --aia-pill-color: #b0b0b0;
901
+ --aia-pill-font-size: 18px;
788
902
 
789
903
  --aia-option-bg: transparent;
790
904
  --aia-option-color: #b0b0b0;
791
905
  --aia-option-color-selected: #ffffff;
792
- --aia-option-font-size: 19px;
906
+ --aia-option-font-size: 18px;
793
907
 
794
908
  --aia-written-text-color: #ffffff;
795
- --aia-written-text-font-size: 19px;
909
+ --aia-written-text-font-size: 20px;
796
910
  --aia-caret-color: var(--aia-written-text-color, #ffffff);
797
911
 
798
912
  --aia-submit-bg: #ffffff;
@@ -804,19 +918,33 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
804
918
 
805
919
  --aia-streak-rgb: 255, 255, 255;
806
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;
807
926
  }
808
927
 
809
- /* 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). */
810
931
  :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
811
932
  top: auto;
812
933
  bottom: 100%;
813
934
  margin-top: 0;
814
935
  margin-bottom: 6px;
936
+ }
937
+
938
+ :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack {
815
939
  flex-direction: column-reverse;
816
940
  }
817
941
 
818
- :where(.magicx-aia[data-options-position="above"]) [data-aia-pillbar] {
819
- 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;
820
948
  }
821
949
 
822
950
  /* Disable all animations when data-animations="off" */
@@ -826,5 +954,29 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
826
954
  animation-duration: 0s !important;
827
955
  transition-duration: 0s !important;
828
956
  }
829
- `,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 z,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:l=2,dropdownTrigger:m,optionsPosition:g,closeDropdownOnBlur:h,showNonTappableOptions:n,onFocus:d,onBlur:I,value:A,completedParams:S,onChange:D,onParamsChange:H,source:N,setCursor:E}){let a=z(null),[w,G]=lt(null),X=z(e);X.current=e;let K=z(_);K.current=_;let Q=z(D);Q.current=D;let V=z(H);V.current=H;let C=z(d);C.current=d;let J=z(I);J.current=I;let L=z(E);L.current=E,he(()=>{if(typeof document>"u")return;let t=new st(document.createElement("div"),{renderMode:"headless",apiConfig:c,optionOverrides:f,maskCompletedText:v,columns:l,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),Z=z(f),q=z(0);if(f!==Z.current){let t=Z.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++,Z.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=z(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,Y=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],p=$?.listboxId??"",P=r.activeDropdownIndex>=0&&$?`${p}-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:p,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:Y,onKeyDown:ee,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":r.isDropdownOpen,"aria-activedescendant":P,"aria-autocomplete":"list","aria-controls":p},reset:b.reset,dropdownProps:{suggestions:de?[{...de,options:r.filteredOptions}]:[],activeIndex:r.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:r.isDropdownOpen,id:p,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 M,useEffect as Se,useLayoutEffect as Pe,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:l,placeholderText:m,isFocused:g,isDropdownOpen:h,listboxId:n,activeDescendantId:d,autoFocus:I,handleTextChange:A,handleKeyDown:S,handleCaretAfterInput:D,handleCaretMove:H,startEditingParam:N,replaceEditingRange:E,setFocused:a}=e,w=re(null),G=re(!1),X=re(""),K=re(""),Q=re(null),V=re(0);Q.current=l,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 p=x.anchorNode,W=(p.nodeType===Node.ELEMENT_NODE?p:p.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]),Pe(()=>{let o=w.current;o&&ut({input:o,segments:_,newParamId:f,editingParamId:v?.id??null,placeholderText:m??"",isFocused:g})},[_,f,v,m,g]),Pe(()=>{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]),Pe(()=>{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=M(()=>{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=M(()=>{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,p=x.inputType;if(p==="insertParagraph"||p==="insertLineBreak"||p==="insertFromDrop"){s.preventDefault();return}if(p.startsWith("insert")||p.startsWith("delete")){let P=p.startsWith("delete")?"":x.data??"";E(P)&&s.preventDefault()}};return o.addEventListener("beforeinput",i),()=>o.removeEventListener("beforeinput",i)},[E]);let L=M(()=>{G.current=!0},[]),ae=M(()=>{G.current=!1,C()},[C]),Z=M(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,p=x.getSelection();if(!p||p.rangeCount===0)return;let P=p.getRangeAt(0);if(!i.contains(P.startContainer))return;P.deleteContents();let R=x.createTextNode(s);P.insertNode(R),P.setStartAfter(R),P.collapse(!0),p.removeAllRanges(),p.addRange(P),C()},[C]),q=M(o=>S(o),[S]),F=M(()=>a(!0),[a]),b=M(()=>a(!1),[a]),Y=M(()=>w.current?.focus(),[]),ee=M(()=>w.current?.blur(),[]),$=M(()=>{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":d,spellCheck:!0,enterKeyHint:"send",onInput:J,onKeyDown:q,onCompositionStart:L,onCompositionEnd:ae,onPaste:Z,onFocus:F,onBlur:b},getPlainText:$,focus:Y,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:l,apiConfig:m,columns:g,pillPlacement:h="inline",mode:n="auto",optionsPosition:d="below",animations:I=!0,dropdownTrigger:A,closeDropdownOnBlur:S,showNonTappableOptions:D,autoFocus:H=!0,onFocus:N,onBlur:E,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 u=V.current;if(u)return L.current?L.current.setMode(n):L.current=new ht(u,n),()=>{L.current?.destroy(),L.current=null}},[n]);let Z=Ee(u=>{let O=ae.current?.current;O&&(O.focus(),xt(O,u))},[]),{completedParams:q,suggestionPills:F,setActivePill:b,segments:Y,newParamId:ee,clearNewParamId:$,placeholderText:r,isFocused:o,isDropdownOpen:i,isLoading:s,activeIndex:x,listboxId:p,handleTextChange:P,handleKeyDown:R,setFocused:W,editingParam:de,editingAnchor:ve,caretOffset:pe,startEditingParam:t,handleCaretAfterInput:k,handleCaretMove:y,replaceEditingRange:ne,dropdownProps:ie,reset:ue}=Ae({onSubmit:u=>J.current(u),onError:f,optionOverrides:v,maskCompletedText:c,apiConfig:m,columns:g,dropdownTrigger:A,optionsPosition:d,closeDropdownOnBlur:S,showNonTappableOptions:D,onFocus:N,onBlur:E,value:a,completedParams:w,onChange:G,onParamsChange:X,source:"full-sdk",setCursor:Z});Ge(()=>{if(!ee)return;let u=window.setTimeout(()=>$(),650);return()=>window.clearTimeout(u)},[ee,$]);let Ve=x>=0?`${p}-option-${x}`:void 0,{inputRef:we,editorProps:qe,focus:ce,blur:De,getPlainText:Le}=Ne({segments:Y,newParamId:ee,editingParam:de,editingAnchor:ve,caretOffset:pe,placeholderText:r,isFocused:o,isDropdownOpen:i,listboxId:p,activeDescendantId:Ve,autoFocus:H,handleTextChange:P,handleKeyDown:R,handleCaretAfterInput:k,handleCaretMove:y,startEditingParam:t,replaceEditingRange:ne,setFocused:W});ae.current=we,ft(()=>{let u=C.current,O=we.current;if(!u||!O)return;let ge=()=>{let Te=u.firstElementChild;if(!Te)return;let Xe=Te.getBoundingClientRect(),Qe=O.getBoundingClientRect();Xe.top>=Qe.bottom-2?u.setAttribute("data-aia-pill-wrapped",""):u.removeAttribute("data-aia-pill-wrapped")};ge();let Re=new ResizeObserver(ge);return Re.observe(O),()=>Re.disconnect()},[Y,F.length,s,we]),gt(Q,()=>({focus:ce,blur:De,reset:ue,setMode:u=>L.current?.setMode(u)}),[ce,De,ue]);let me=!!Y.length||q.length>0,_e=Ee(()=>{if(!me)return;let u=Le(),{rawQuery:O,completedParams:ge}=bt(u,q);_({query:u.trim(),raw_query:O,completed_params:ge}),ue()},[me,q,_,ue,Le]);J.current=_e;let $e=Ee(u=>{u.target?.closest("[data-aia-pill]")||ce()},[ce]),Ue=h==="inline",je=h==="dropdown";return Ce("div",{ref:V,className:`magicx-aia ${U.container} ${l??""}`,"data-pill-placement":h,"data-options-position":d,"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:u=>{u.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:u=>{me&&(u.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};
830
982
  //# sourceMappingURL=index.mjs.map