@magicx-eng/ai-autocomplete-react 0.2.1 → 0.4.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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 {
+import{forwardRef as Tt,useCallback as Le,useEffect as at,useImperativeHandle as Lt,useLayoutEffect as Bt,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 {
   position: relative;
   /* Inherits the host page's font by default. Consumers can pin a specific
      font on the library via \`--aia-font-family: 'Custom Font'\` without
@@ -8,24 +8,24 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
 }
 
 .AIAutocomplete-module_inputWrapper_FLq1b {
-  padding: 20px;
-  border: 1px solid var(--aia-color-border-default, #9ea5b2);
-  border-radius: 23px;
-  background: transparent;
+  padding: 12px 10px;
+  border: 1px solid var(--aia-border, #b0b0b0);
+  border-radius: 24px;
+  background: var(--aia-surface, #ffffff);
   overflow: hidden;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 12px;
 }
 
 .AIAutocomplete-module_editorArea_7rBWq {
   position: relative;
   flex: 1;
   min-width: 0;
-  min-height: 26.6px;
-  line-height: 26.6px;
+  min-height: 19px;
+  line-height: 19px;
   font-family: inherit;
-  font-size: var(--aia-written-text-font-size, 19px);
+  font-size: var(--aia-written-text-font-size, 14px);
   white-space: pre-wrap;
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -40,7 +40,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
     --aia-caret-color,
     var(--aia-written-text-color, var(--aia-color-text-default, #fff))
   );
-  font-weight: 250;
+  font-weight: 300;
   /* Align the text's inline box with the pill list (also vertical-align: middle)
      so they share a vertical center when pills stretch the line box to ~36px. */
   vertical-align: middle;
@@ -49,7 +49,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
 /* Completed params render as inline bold runs. \`:where()\` keeps specificity
    at (0,2,0) so consumers can override without \`!important\`. */
 :where(.AIAutocomplete-module_input_IW-P-) strong {
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: -0.01em;
 }
 
@@ -109,26 +109,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
   margin-left: 0;
 }
 
-.AIAutocomplete-module_submitButton_sl1Mi {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border: none;
-  background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
-  color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  transition: opacity 0.2s ease;
-}
-
-.AIAutocomplete-module_submitButton_sl1Mi:hover {
-  opacity: 0.85;
-}
-
 .AIAutocomplete-module_submitSlot_GhuCM {
   display: contents;
 }
@@ -165,21 +145,166 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
     background-position: -50% 0;
   }
 }
-`,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 {
+`,document.head.appendChild(e)}var te={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"};import{useRef as It}from"react";if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
+ * Built-in appearance defaults \u2014 zero specificity via :where().
+ * Consumer CSS always wins without !important.
+ *
+ * Resolution priority (highest wins):
+ * 1. Consumer CSS targeting new vars (--aia-pill-bg, etc.)
+ * 2. Consumer CSS targeting legacy vars (--aia-color-*, via fallback chain)
+ * 3. These built-in defaults
+ */
+
+/*
+ * Library-scoped box-sizing reset. The SDK's pill / option / wrapper styles
+ * mix explicit dimensions with padding (e.g. .magicx-aia-pill has height:36px
+ * + padding:13px) and were authored assuming \`border-box\`. In consumer apps
+ * without a global \`* { box-sizing: border-box }\` reset the pill rendered
+ * ~62px tall instead of 36px. Scoping the reset to \`.magicx-aia\` descendants
+ * keeps the library self-contained without leaking onto consumer markup.
+ */
+:where(.magicx-aia, .magicx-aia *, .magicx-aia *::before, .magicx-aia *::after) {
+  box-sizing: border-box;
+}
+
+/* Light mode defaults (base) */
+:where(.magicx-aia),
+:where(.magicx-aia[data-mode="light"]) {
+  --aia-surface: #ffffff;
+  --aia-border: #b0b0b0;
+  --aia-dropdown-border: #e5e7eb;
+  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
+  --aia-pill-bg: #bdbdbd;
+  --aia-pill-color: #333539;
+  --aia-pill-font-size: 14px;
+
+  --aia-option-bg: #eef2ff;
+  --aia-option-color: #505050;
+  --aia-option-color-selected: #000000;
+  --aia-option-font-size: 14px;
+
+  --aia-written-text-color: #000000;
+  --aia-written-text-font-size: 14px;
+  --aia-caret-color: var(--aia-written-text-color, #000000);
+
+  --aia-submit-bg: #000000;
+  --aia-submit-color: #ffffff;
+
+  --aia-color-text-muted: #6b7280;
+
+  --aia-skeleton-bg: rgba(189, 189, 189, 0.51);
+
+  --aia-streak-rgb: 99, 102, 241;
+  --aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
+
+  --aia-footer-divider: rgba(176, 176, 176, 0.4);
+  --aia-footer-hint-color: #505050;
+  --aia-footer-brand-color: #b0b0b0;
+  --aia-footer-badge-border: rgba(189, 189, 189, 0.51);
+}
+
+/* Dark mode defaults */
+:where(.magicx-aia[data-mode="dark"]) {
+  --aia-surface: #000000;
+  --aia-border: #505050;
+  --aia-dropdown-border: #484848;
+  --aia-dropdown-shadow: 0 8px 12px rgba(0, 0, 0, 0.12);
+  --aia-pill-bg: #bdbdbd;
+  --aia-pill-color: #b0b0b0;
+  --aia-pill-font-size: 14px;
+
+  --aia-option-bg: transparent;
+  --aia-option-color: #b0b0b0;
+  --aia-option-color-selected: #ffffff;
+  --aia-option-font-size: 14px;
+
+  --aia-written-text-color: #ffffff;
+  --aia-written-text-font-size: 14px;
+  --aia-caret-color: var(--aia-written-text-color, #ffffff);
+
+  --aia-submit-bg: #ffffff;
+  --aia-submit-color: #000000;
+
+  --aia-color-text-muted: #c1c4cb;
+
+  --aia-skeleton-bg: #333539;
+
+  --aia-streak-rgb: 255, 255, 255;
+  --aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
+
+  --aia-footer-divider: rgba(255, 255, 255, 0.15);
+  --aia-footer-hint-color: #b0b0b0;
+  --aia-footer-brand-color: #505050;
+  --aia-footer-badge-border: #505050;
+}
+
+/* optionsPosition: dropdown above the input. The sections live inside the
+   dropdown's .aia-stack, so the reversal targets the stack (not the dropdown,
+   whose only child is the stack).
+   Two forms are supported:
+     1. ancestor form \u2014 Tier 1 sets data-options-position on the .magicx-aia
+        container and the dropdown is a descendant.
+     2. self form \u2014 headless consumers spread \`optionsPosition\` from the hook's
+        dropdownProps, so the attribute lands on the dropdown element itself.
+        This lets the dropdown position above with NO wrapper attribute and no
+        hand-copied CSS. */
+:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown],
+[data-aia-dropdown][data-options-position="above"] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 6px;
+}
+
+:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] .aia-stack,
+[data-aia-dropdown][data-options-position="above"] .aia-stack {
+  flex-direction: column-reverse;
+}
+
+/* The footer sits at the top when the dropdown is above, so flip its own
+   internal stack too \u2014 the divider should sit BELOW the hint/branding row
+   (between the footer and the options beneath it), not above it. The footer's
+   own class is CSS-module-scoped, so target the stable data attribute. */
+:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer],
+[data-aia-dropdown][data-options-position="above"] [data-aia-footer] {
+  flex-direction: column-reverse;
+}
+
+/* Disable all animations when data-animations="off" */
+:where(.magicx-aia[data-animations="off"]) *,
+:where(.magicx-aia[data-animations="off"]) *::before,
+:where(.magicx-aia[data-animations="off"]) *::after {
+  animation-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+`,document.head.appendChild(e)}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 {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
-  max-width: 516px;
+  max-width: 544px;
   margin-top: 6px;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+  padding: 4px;
   overflow: hidden;
   container-type: inline-size;
   z-index: 10;
   opacity: 0;
   pointer-events: none;
   transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  /* Solid surface is the default (matches the Figma components). Opt into the
+     frosted-glass look with data-aia-surface="glass". */
+  background: var(--aia-surface, #ffffff);
+  border: 1px solid var(--aia-dropdown-border, #e5e7eb);
+  border-radius: 25px;
+  box-shadow: var(--aia-dropdown-shadow, 0 8px 12px rgba(0, 0, 0, 0.12));
+}
+
+.AIAutocompleteDropdown-module_dropdown_yz2KC[data-aia-surface="glass"] {
+  background: transparent;
+  border-color: transparent;
   box-shadow:
     hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
     hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
@@ -192,7 +317,6 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
     inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
     hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
   backdrop-filter: blur(30px);
-  border-radius: 28px;
 }
 
 .AIAutocompleteDropdown-module_visible_QCoXj {
@@ -200,8 +324,10 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
   pointer-events: auto;
 }
 
+/* The dropdown owns a uniform 4px pad; each section adds its own 7px/8px inset
+   (matches the Figma PillList). */
 .AIAutocompleteDropdown-module_pillBar_pwTXe {
-  padding: 27px 27px 3px 27px;
+  padding: 7px 8px;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
@@ -218,12 +344,12 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding: 25px;
+  padding: 7px 8px;
 }
 
 .AIAutocompleteDropdown-module_skeletonBar_O3xIx {
   display: block;
-  height: 19px;
+  height: 14px;
   border-radius: 999px;
   background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
   opacity: 0.5;
@@ -247,66 +373,158 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
     opacity: 0.25;
   }
 }
-`,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 {
-  position: relative;
-  z-index: 1;
-  pointer-events: auto;
+`,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 ut}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 {
+  .aia-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--aia-cluster-gap, 0.5rem);
+  }
+  /* Inline-level variant \u2014 used when the cluster must sit inline (e.g. inside
+     a contentEditable). Rendered on a <span> so it's valid inline content. */
+  .aia-cluster[data-inline] {
+    display: inline-flex;
+  }
+  .aia-cluster[data-nowrap] {
+    flex-wrap: nowrap;
+  }
+  .aia-cluster[data-align="start"] {
+    align-items: start;
+  }
+  .aia-cluster[data-align="center"] {
+    align-items: center;
+  }
+  .aia-cluster[data-align="end"] {
+    align-items: end;
+  }
+  .aia-cluster[data-align="baseline"] {
+    align-items: baseline;
+  }
+  .aia-cluster[data-justify="start"] {
+    justify-content: start;
+  }
+  .aia-cluster[data-justify="center"] {
+    justify-content: center;
+  }
+  .aia-cluster[data-justify="end"] {
+    justify-content: end;
+  }
+  .aia-cluster[data-justify="between"] {
+    justify-content: space-between;
+  }
+  .aia-cluster[data-justify="around"] {
+    justify-content: space-around;
+  }
+}
+`,document.head.appendChild(e)}import{jsx as Me}from"react/jsx-runtime";function le({gap:e,align:c="center",justify:i="start",noWrap:u=!1,inline:r=!1,className:n,children:s,...l}){let g=e?{"--aia-cluster-gap":e}:void 0,b={className:n?`aia-cluster ${n}`:"aia-cluster","data-align":c,"data-justify":i,"data-nowrap":u||void 0,"data-inline":r||void 0,style:g,...l};return r?Me("span",{...b,children:s}):Me("div",{...b,children:s})}if(typeof document<"u"&&!document.getElementById("ac-style-56b0c577")){let e=document.createElement("style");e.id="ac-style-56b0c577",e.textContent=`/* The footer adds its own 7px/8px inset (the dropdown owns a uniform 4px pad),
+   so the divider spans the full footer width yet still stays clear of the
+   dropdown's rounded edges. */
+.DropdownFooter-module_footer_qQQ7x {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 7px 8px;
+}
+
+.DropdownFooter-module_divider_FlX4C {
+  border-top: 0.5px solid var(--aia-footer-divider, rgba(176, 176, 176, 0.4));
+}
+
+.DropdownFooter-module_hintGroup_ZzbPf {
+  min-width: 0;
+}
+
+.DropdownFooter-module_brandLink_r4f3R {
   display: inline-flex;
-  gap: 5px;
   align-items: center;
-  vertical-align: middle;
+  gap: 2px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity 150ms ease-out;
 }
 
-.PillList-module_pill_osSyz {
+.DropdownFooter-module_brandLink_r4f3R:hover {
+  opacity: 0.7;
+}
+
+.DropdownFooter-module_key_Bz1H- {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
-  padding: 13px 13px;
+  min-width: 30px;
+  height: 22px;
+  padding: 2px 6px;
+  border: 0.5px solid var(--aia-footer-hint-color, #505050);
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--aia-footer-hint-color, #505050);
+}
+
+.DropdownFooter-module_hint_GKEOH {
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--aia-footer-hint-color, #505050);
+}
+
+.DropdownFooter-module_brand_Al-lR {
+  font-family: inherit;
+  font-size: 10px;
+  line-height: 18px;
+  color: var(--aia-footer-brand-color, #b0b0b0);
+}
+
+.DropdownFooter-module_badge_Fk9vg {
+  display: inline-flex;
+  align-items: center;
+  height: 23px;
+  padding: 2.5px 5.5px;
+  border: 0.5px solid var(--aia-footer-badge-border, rgba(189, 189, 189, 0.51));
+  border-radius: 999px;
+  font-family: inherit;
+  font-size: 10px;
+  line-height: 18px;
+  color: var(--aia-footer-brand-color, #b0b0b0);
+}
+`,document.head.appendChild(e)}var Q={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:c=!1,isInputEmpty:i=!1}){let{key:u,hint:r}=ut(e,c,i);return be("footer",{className:Q.footer,"data-aia-footer":"",children:[de("div",{className:Q.divider}),be(le,{justify:"between",noWrap:!0,children:[be(le,{gap:"5px",className:Q.hintGroup,children:[de("kbd",{className:Q.key,children:u}),de("span",{className:Q.hint,children:r})]}),be("a",{className:Q.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[de("span",{className:Q.brand,children:"AI"}),de("span",{className:Q.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- {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 8px;
   border: none;
   border-radius: 999px;
   background: rgba(49, 50, 85, 0.25);
   background: color-mix(
     in srgb,
-    var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 25%,
+    var(--aia-pill-bg, var(--aia-color-background-supportive, #313255)) 30%,
     transparent
   );
   color: var(--aia-pill-color, var(--aia-color-text-muted, #c1c4cb));
   font-family: inherit;
-  font-size: var(--aia-pill-font-size, 19px);
-  line-height: 30px;
+  font-size: var(--aia-pill-font-size, 14px);
+  font-weight: 500;
+  line-height: normal;
   cursor: pointer;
   white-space: nowrap;
-  animation: PillList-module_fadeIn_Aezob 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  box-shadow:
-    hsla(0, 0%, 100%, 1) -3.2px -3.2px 3.2px -3.2px inset,
-    hsla(0, 0%, 100%, 1) 6.4px 6.4px 1.6px -8px inset,
-    var(--aia-dropdown-bg, transparent) -6.4px 6.4px 1.6px -8px inset,
-    var(--aia-dropdown-bg, transparent) 6.4px -6.4px 1.6px -8px inset,
-    hsla(0, 0%, 100%, 0.15) -1.6px 0px 0px -1.6px inset,
-    hsla(0, 0%, 100%, 0.15) 0px -1.6px 0px -1.6px inset,
-    hsla(0, 0%, 100%, 0.3) 0px 1.6px 0px 0px inset,
-    hsla(0, 0%, 100%, 0.3) 1.6px 0px 0px 0px inset,
-    inset 0 0 30px 5px hsla(0, 0%, 0%, 0.05),
-    hsla(0, 0%, 0%, 0.08) 0px 0px 30px 2px;
-  backdrop-filter: blur(30px);
+  animation: Pill-module_fadeIn_Bbqtz 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
-.PillList-module_rounded_WvXy4 {
+.Pill-module_rounded_6WMps {
   border-radius: 999px;
 }
 
 /* Loading skeleton \u2014 preserves the pill's exact box (same width and height)
    and just hides the text. The pill's native background acts as the visible
    shape; the pulse provides the shimmer. */
-.PillList-module_skeleton_Lp8x6 {
+.Pill-module_skeleton_-u9-j {
   pointer-events: none;
   cursor: default;
   color: transparent;
-  animation: PillList-module_skeletonPulse_xZ8Yf 1.4s ease-in-out infinite;
+  animation: Pill-module_skeletonPulse_xHh-7 1.4s ease-in-out infinite;
 }
 
-@keyframes PillList-module_skeletonPulse_xZ8Yf {
+@keyframes Pill-module_skeletonPulse_xHh-7 {
   0%,
   100% {
     filter: brightness(1);
@@ -316,75 +534,75 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
   }
 }
 
-.PillList-module_pill_osSyz:hover {
-  filter: brightness(1.2);
-}
-
-.PillList-module_active_Oll-- {
-  outline: 1px solid #5a5b8a;
-}
-
-@keyframes PillList-module_fadeIn_Aezob {
+@keyframes Pill-module_fadeIn_Bbqtz {
   from {
     opacity: 0;
   }
 }
-`,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 {
+`,document.head.appendChild(e)}var X={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 mt}from"react/jsx-runtime";var Ae={selected:1,first:.7,next:.4,last:.2};function Ke({label:e,state:c,selected:i,rounded:u,loading:r,onClick:n}){let s=[X.pill,u?X.rounded:"",i&&!r?X.active:"",r?X.skeleton:""].filter(Boolean).join(" ");return mt("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:Ae[c]},onMouseDown:l=>l.preventDefault(),onClick:r?void 0:n,disabled:r,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 {
   position: relative;
+  z-index: 1;
+  pointer-events: auto;
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  vertical-align: middle;
 }
+`,document.head.appendChild(e)}var Pe={list:"PillList-module_list_qvLqO"};import{jsx as xe}from"react/jsx-runtime";var gt=[125,69];function We(e){return e===0?"first":e===1?"next":"last"}function ve({pills:e,activePillIndex:c,onSelectPill:i,activeSelected:u,rounded:r,loading:n}){return n&&e.length===0?xe("span",{className:Pe.list,"data-aia-pill-list-loading":"",children:gt.map((s,l)=>xe("span",{"data-aia-pill-skeleton":"",className:`${X.pill} ${r?X.rounded:""} ${X.skeleton}`,style:{width:s,opacity:Ae[We(l)]}},`skel-${s}`))}):xe("span",{className:Pe.list,"data-aia-pill-list-loading":n?"":void 0,children:e.map((s,l)=>{let g=!!u&&l===c;return xe(Ke,{label:s.text,state:g?"selected":We(l),selected:g,rounded:r,loading:n,onClick:()=>i(l)},`${s.type}-${s.text}`)})})}import{useEffect as ft,useLayoutEffect as ht,useRef as bt,useState as xt}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 {
+  .aia-grid {
+    display: grid;
+    grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(var(--aia-grid-min), 100%), var(--aia-grid-max, 1fr))
+      );
+    gap: var(--aia-grid-gap, 0);
+  }
 
-.SuggestionGrid-module_scrollWrapper_MOqfw::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 50%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 150ms ease-out;
-  backdrop-filter: blur(12px);
-  mask-image: linear-gradient(to bottom, transparent, white);
-}
-
-.SuggestionGrid-module_scrollWrapper_MOqfw[data-fade]::after {
-  opacity: 1;
-}
-
-.SuggestionGrid-module_grid_jvaPb {
-  display: grid;
-  grid-template-columns: minmax(0, 250px);
-  /* Pack rows from the top instead of stretching to fill the grid container. */
-  grid-auto-rows: min-content;
-  align-content: start;
-  max-width: 100cqi;
-  padding: 8px 8px;
-  max-height: 200px;
-  overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
-}
-
-@container (min-width: 516px) {
-  .SuggestionGrid-module_grid_jvaPb {
-    grid-template-columns: repeat(2, minmax(0, 250px));
+  /* Scrollable variant \u2014 capped height with a styled thin scrollbar. Rows pack
+     from the top instead of stretching to fill the container. */
+  .aia-grid[data-scroll] {
+    grid-auto-rows: min-content;
+    align-content: start;
     justify-content: start;
+    padding: var(--aia-grid-scroll-pad, 0);
+    max-height: var(--aia-grid-max-height, 200px);
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3)) transparent;
+  }
+  .aia-grid[data-scroll]::-webkit-scrollbar {
+    width: 6px;
+  }
+  .aia-grid[data-scroll]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .aia-grid[data-scroll]::-webkit-scrollbar-thumb {
+    background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
+    border-radius: 3px;
   }
-}
-
-.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar {
-  width: 6px;
-}
-
-.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-track {
-  background: transparent;
-}
 
-.SuggestionGrid-module_grid_jvaPb::-webkit-scrollbar-thumb {
-  background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
-  border-radius: 3px;
+  /* Fade wrapper \u2014 bottom blur overlay shown while the grid overflows below. */
+  .aia-grid-fade {
+    position: relative;
+  }
+  .aia-grid-fade::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 50%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease-out;
+    backdrop-filter: blur(12px);
+    mask-image: linear-gradient(to bottom, transparent, white);
+  }
+  .aia-grid-fade[data-fade]::after {
+    opacity: 1;
+  }
 }
-`,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 {
+`,document.head.appendChild(e)}import{jsx as Ge}from"react/jsx-runtime";function je({min:e="16rem",max:c,gap:i,scroll:u=!1,maxHeight:r,fade:n=!1,className:s,children:l,...g}){let b=bt(null),[D,k]=xt(!1);ft(()=>{if(!n)return;let x=b.current;if(!x)return;let R=()=>{k(x.scrollHeight-x.scrollTop-x.clientHeight>1)};x.addEventListener("scroll",R,{passive:!0});let z=new ResizeObserver(R);return z.observe(x),()=>{x.removeEventListener("scroll",R),z.disconnect()}},[n]),ht(()=>{let x=b.current;!n||!x||k(x.scrollHeight-x.scrollTop-x.clientHeight>1)},[n,l]);let I={"--aia-grid-min":e};c&&(I["--aia-grid-max"]=c),i&&(I["--aia-grid-gap"]=i),r&&(I["--aia-grid-max-height"]=r);let S=Ge("div",{ref:b,className:!n&&s?`aia-grid ${s}`:"aia-grid","data-scroll":u||void 0,style:I,...n?{}:g,children:l});return n?Ge("div",{className:s?`aia-grid-fade ${s}`:"aia-grid-fade","data-fade":D?"":void 0,...g,children:S}):S}import{useEffect as vt,useRef as wt,useState as yt}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 {
   position: relative;
   overflow: visible;
   display: flex;
@@ -392,14 +610,16 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
      the same baseline at the top edge of the cell. */
   align-items: flex-start;
   font-family: inherit;
-  font-size: var(--aia-option-font-size, 19px);
-  font-weight: 250;
-  line-height: 24px;
+  font-size: var(--aia-option-font-size, 14px);
+  font-weight: 300;
+  line-height: 18px;
   color: var(--aia-option-color, var(--aia-color-text-muted, #c1c4cb));
   white-space: normal;
   word-break: break-word;
-  border-radius: 12px;
-  padding: 13px 13px;
+  /* 8px radius on the highlighted fill (--aia-option-bg), matching the Figma
+     SuggestionItem selection. The 7px/8px inset is the item's own padding. */
+  border-radius: 8px;
+  padding: 7px 8px;
   animation: SuggestionItem-module_fadeIn_I8u35 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
@@ -429,6 +649,7 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
 .SuggestionItem-module_highlighted_Hb0SU {
   color: var(--aia-option-color-selected, var(--aia-color-text-default, #fff));
   background: var(--aia-option-bg, transparent);
+  font-weight: 700;
 }
 
 .SuggestionItem-module_tag_e3Fwe {
@@ -731,100 +952,46 @@ import{forwardRef as mt,useCallback as Ee,useEffect as Ge,useImperativeHandle as
     filter: brightness(0.55);
   }
 }
-`,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=`/*
- * Built-in appearance defaults \u2014 zero specificity via :where().
- * Consumer CSS always wins without !important.
- *
- * Resolution priority (highest wins):
- * 1. Consumer CSS targeting new vars (--aia-pill-bg, etc.)
- * 2. Consumer CSS targeting legacy vars (--aia-color-*, via fallback chain)
- * 3. These built-in defaults
- */
-
-/*
- * Library-scoped box-sizing reset. The SDK's pill / option / wrapper styles
- * mix explicit dimensions with padding (e.g. .magicx-aia-pill has height:36px
- * + padding:13px) and were authored assuming \`border-box\`. In consumer apps
- * without a global \`* { box-sizing: border-box }\` reset the pill rendered
- * ~62px tall instead of 36px. Scoping the reset to \`.magicx-aia\` descendants
- * keeps the library self-contained without leaking onto consumer markup.
- */
-:where(.magicx-aia, .magicx-aia *, .magicx-aia *::before, .magicx-aia *::after) {
-  box-sizing: border-box;
-}
-
-/* Light mode defaults (base) */
-:where(.magicx-aia),
-:where(.magicx-aia[data-mode="light"]) {
-  --aia-pill-bg: #bdbdbd;
-  --aia-pill-color: #000000;
-  --aia-pill-font-size: 19px;
-
-  --aia-option-bg: transparent;
-  --aia-option-color: #4f4f4f;
-  --aia-option-color-selected: #000000;
-  --aia-option-font-size: 19px;
-
-  --aia-written-text-color: #000000;
-  --aia-written-text-font-size: 19px;
-  --aia-caret-color: var(--aia-written-text-color, #000000);
-
-  --aia-submit-bg: #000000;
-  --aia-submit-color: #ffffff;
-
-  --aia-color-text-muted: #6b7280;
-
-  --aia-skeleton-bg: rgba(189, 189, 189, 0.51);
-
-  --aia-streak-rgb: 99, 102, 241;
-  --aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
-}
-
-/* Dark mode defaults */
-:where(.magicx-aia[data-mode="dark"]) {
-  --aia-pill-bg: #bdbdbd;
-  --aia-pill-color: #ffffff;
-  --aia-pill-font-size: 19px;
-
-  --aia-option-bg: transparent;
-  --aia-option-color: #b0b0b0;
-  --aia-option-color-selected: #ffffff;
-  --aia-option-font-size: 19px;
-
-  --aia-written-text-color: #ffffff;
-  --aia-written-text-font-size: 19px;
-  --aia-caret-color: var(--aia-written-text-color, #ffffff);
-
-  --aia-submit-bg: #ffffff;
-  --aia-submit-color: #000000;
-
-  --aia-color-text-muted: #c1c4cb;
-
-  --aia-skeleton-bg: #333539;
-
-  --aia-streak-rgb: 255, 255, 255;
-  --aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
+`,document.head.appendChild(e)}var M={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:c,onSelect:i,onHighlight:u,id:r,loading:n}){let[s,l]=yt(!1),g=wt(void 0);vt(()=>()=>clearTimeout(g.current),[]);let b=()=>{n||!e.is_tappable||s||(l(!0),i(e),clearTimeout(g.current),g.current=setTimeout(()=>l(!1),500))},D=[M.item,c&&!n?M.highlighted:"",e.is_tappable?M.tappable:M.nonTappable,s?M.pressed:""].filter(Boolean).join(" ");return Ve("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":n?"":void 0,"aria-selected":c,className:D,tabIndex:n||!e.is_tappable?-1:0,onClick:b,onKeyDown:k=>{!n&&e.is_tappable&&(k.key==="Enter"||k.key===" ")&&(k.preventDefault(),b())},onMouseEnter:!n&&e.is_tappable?u:void 0,children:[we("div",{className:M.streaks}),we("div",{className:M.streaksVert}),Ve("span",{className:M.content,children:[we("span",{className:M.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&we("span",{className:M.tag,children:e.tag})]})]})}import{jsx as $e}from"react/jsx-runtime";function Ue({options:e,activeIndex:c,onSelect:i,onHighlight:u,listboxId:r,loading:n}){return $e(je,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((s,l)=>$e(qe,{option:s,isHighlighted:l===c,onSelect:i,onHighlight:()=>u(l),id:`${r}-option-${l}`,loading:n},s.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
+  .aia-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--aia-stack-space, 0.5rem);
+  }
+  .aia-stack[data-align="start"] {
+    align-items: start;
+  }
+  .aia-stack[data-align="center"] {
+    align-items: center;
+  }
+  .aia-stack[data-align="end"] {
+    align-items: end;
+  }
+  /* data-align="stretch" is the flex default \u2014 no rule needed. */
 }
-
-/* optionsPosition: dropdown above the input */
-:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 6px;
-  flex-direction: column-reverse;
+`,document.head.appendChild(e)}import{jsx as _t}from"react/jsx-runtime";function Qe({space:e,align:c="stretch",className:i,children:u,...r}){let n=e?{"--aia-stack-space":e}:void 0;return _t("div",{className:i?`aia-stack ${i}`:"aia-stack","data-align":c,style:n,...r,children:u})}import{jsx as oe,jsxs as St}from"react/jsx-runtime";var kt=[159,119,164];function Ce({suggestions:e,activeIndex:c,onSelect:i,onHighlight:u,isOpen:r,id:n,className:s,pills:l,onPillClick:g,showPills:b=!0,activeSelected:D=!1,isLoading:k=!1,hasTabbedToHighlight:I=!1,isInputEmpty:S=!1,optionsPosition:x="below"}){let R=e[0]?.options??[],z=!!(l&&l.length>0&&g),F=r&&(R.length>0||b&&z||k),t={suggestions:e,activeIndex:c,pills:l,showPills:b,activeSelected:D,isLoading:k,hasTabbedToHighlight:I,isInputEmpty:S},w=It(t);F&&(w.current=t);let m=F?t:w.current,T=m.suggestions[0]?.options??[],G=m.activeIndex>=0&&!!T[m.activeIndex]?.is_tappable,H=!!(m.pills&&m.pills.length>0&&g),C=m.showPills&&H,j=m.showPills&&!H&&m.isLoading,L=C||j,V=T.length>0,q=m.isLoading&&!V;return oe("div",{id:n,role:"listbox","data-aia-dropdown":"","data-options-position":x,"data-aia-loading":m.isLoading?"":void 0,className:`${ne.dropdown} ${F?ne.visible:""} ${s??""}`,onMouseDown:B=>B.preventDefault(),children:St(Qe,{space:"2px",children:[L&&oe(le,{noWrap:!0,className:ne.pillBar,"data-aia-pillbar":"",children:oe(ve,{pills:m.pills??[],activePillIndex:0,activeSelected:m.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:m.isLoading})}),V&&oe(Ue,{options:T,activeIndex:m.activeIndex,onSelect:i,onHighlight:u,listboxId:n,loading:m.isLoading}),q&&oe("div",{className:ne.skeletonBars,"data-aia-skeleton-bars":"",children:kt.map(B=>oe("span",{className:ne.skeletonBar,style:{width:B}},`bar-${B}`))}),oe(Ne,{hasTabbedToHighlight:m.hasTabbedToHighlight,isOptionHighlighted:G,isInputEmpty:m.isInputEmpty})]})})}import{buildQuery as zt,ModeController as Ft,setCursorOffset as Ht}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 {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--aia-submit-bg, var(--aia-color-text-default, #fff));
+  color: var(--aia-submit-color, var(--aia-color-bg-default, #000));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: opacity 0.2s ease;
 }
 
-:where(.magicx-aia[data-options-position="above"]) [data-aia-pillbar] {
-  padding: 13px 27px 13px 27px;
+.SubmitButton-module_submitButton_otz7H:hover {
+  opacity: 0.85;
 }
 
-/* Disable all animations when data-animations="off" */
-:where(.magicx-aia[data-animations="off"]) *,
-:where(.magicx-aia[data-animations="off"]) *::before,
-:where(.magicx-aia[data-animations="off"]) *::after {
-  animation-duration: 0s !important;
-  transition-duration: 0s !important;
+.SubmitButton-module_submitButton_otz7H:disabled {
+  opacity: 0.4;
+  cursor: default;
 }
-`,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};
+`,document.head.appendChild(e)}var Xe={submitButton:"SubmitButton-module_submitButton_otz7H"};import{jsx as Ee}from"react/jsx-runtime";function Je({disabled:e,onClick:c}){return Ee("button",{type:"button","data-aia-submit":"",className:Xe.submitButton,disabled:e,onClick:i=>{i.stopPropagation(),c()},"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 At}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as Ze,useEffect as ye,useRef as N,useState as Pt}from"react";var Ct={text:"",completedParams:[],suggestions:[],activeDropdownIndex:-1,newParamId:null,isLoading:!0,isReady:!1,error:null,segments:[],actionableSuggestions:[],filteredOptions:[],placeholderText:"",isDropdownOpen:!1,isActivePillSelected:!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:c,optionOverrides:i,maskCompletedText:u,apiConfig:r,columns:n=2,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:g,showNonTappableOptions:b,onFocus:D,onBlur:k,value:I,completedParams:S,onChange:x,onParamsChange:R,source:z,setCursor:F}){let t=N(null),[w,m]=Pt(null),J=N(e);J.current=e;let T=N(c);T.current=c;let G=N(x);G.current=x;let H=N(R);H.current=R;let C=N(D);C.current=D;let j=N(k);j.current=k;let L=N(F);L.current=F,ye(()=>{if(typeof document>"u")return;let a=new At(document.createElement("div"),{renderMode:"headless",apiConfig:r,optionOverrides:i,maskCompletedText:u,columns:n,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:g,showNonTappableOptions:b,source:z,value:I,completedParams:S,onSubmit:(...A)=>J.current?.(...A),onError:(...A)=>T.current?.(...A),onChange:(...A)=>G.current?.(...A),onParamsChange:(...A)=>H.current?.(...A),onFocus:()=>C.current?.(),onBlur:()=>j.current?.(),setCursor:A=>L.current?.(A)});t.current=a,m(a.getState());let P=a.subscribe(A=>m(A));return()=>{P(),a.destroy(),t.current===a&&(t.current=null)}},[]),ye(()=>{I!==void 0&&t.current?.setValue(I)},[I]),ye(()=>{S!==void 0&&t.current?.setCompletedParams(S)},[S]);let V=JSON.stringify(r??null),q=N(i),B=N(0);if(i!==q.current){let a=q.current,P=i,A=Object.keys(a??{}),ae=Object.keys(P??{});(A.length!==ae.length||ae.some(se=>!a?.[se]||P[se]!==a[se]))&&B.current++,q.current=i}ye(()=>{t.current?.update({apiConfig:r,optionOverrides:i,dropdownTrigger:s,optionsPosition:l,closeDropdownOnBlur:g,showNonTappableOptions:b})},[V,B.current,s,l,g,b]);let $=N(null);$.current===null&&($.current={handleTextChange:a=>t.current?.handleTextChange(a),handleKeyDown:a=>{let P="nativeEvent"in a?a.nativeEvent:a;t.current?.handleKeyDown(P)},setFocused:a=>t.current?.setFocused(a),startEditingParam:a=>t.current?.startEditingParam(a),exitEditMode:()=>t.current?.exitEditMode(),handleCaretAfterInput:a=>t.current?.handleCaretAfterInput(a),handleCaretMove:a=>t.current?.handleCaretMove(a),replaceEditingRange:a=>t.current?.replaceEditingRange(a)??!1,setActivePill:a=>t.current?.setActivePill(a),removeLastParam:()=>t.current?.removeLastParam(),clearNewParamId:()=>t.current?.clearNewParamId(),reset:()=>t.current?.reset(),selectOption:a=>t.current?.selectOption(a),setActiveDropdownIndex:a=>t.current?.setActiveDropdownIndex(a),handleFocus:()=>t.current?.setFocused(!0),handleBlur:()=>t.current?.setFocused(!1)});let y=$.current,Y=Ze(a=>{let P=a.target.value,ae=P.length>0&&!a.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;t.current?.handleTextChange(ae)},[]),ee=Ze(a=>{t.current?.handleKeyDown(a.nativeEvent)},[]),Z=t.current,d=w??Ct,o=I!==void 0?I:d.text,p=S!==void 0?S:d.completedParams,f=d.actionableSuggestions,_=f[0],h=Z?.listboxId??"",E=d.activeDropdownIndex>=0&&Z?`${h}-option-${d.activeDropdownIndex}`:void 0,O=d.editingParam,U=O?{type:O.suggestionType,text:O.suggestionPlaceholder,required:!0,options:O.options}:null,pe=U??_,Ie=U?[U]:f,ue=!Z||d.isLoading&&!d.editingParam&&!d.inSelectionAnimation;return{completedParams:p,suggestionPills:f,setActivePill:y.setActivePill,removeLastParam:y.removeLastParam,segments:d.segments,newParamId:d.newParamId,clearNewParamId:y.clearNewParamId,suggestions:d.suggestions,activeIndex:d.activeDropdownIndex,isReady:d.isReady,isLoading:ue,isFocused:d.isFocused,isDropdownOpen:d.isDropdownOpen,isActivePillSelected:d.isActivePillSelected,placeholderText:d.placeholderText,listboxId:h,error:d.error,handleTextChange:y.handleTextChange,handleKeyDown:y.handleKeyDown,setFocused:y.setFocused,editingParam:O,editingAnchor:d.editingAnchor,caretOffset:d.caretOffset,startEditingParam:y.startEditingParam,exitEditMode:y.exitEditMode,handleCaretAfterInput:y.handleCaretAfterInput,handleCaretMove:y.handleCaretMove,replaceEditingRange:y.replaceEditingRange,inputProps:{value:o,placeholder:d.placeholderText||void 0,onChange:Y,onKeyDown:ee,onFocus:y.handleFocus,onBlur:y.handleBlur,role:"combobox","aria-expanded":d.isDropdownOpen,"aria-activedescendant":E,"aria-autocomplete":"list","aria-controls":h},reset:y.reset,dropdownProps:{suggestions:pe?[{...pe,options:d.filteredOptions}]:[],activeIndex:d.activeDropdownIndex,onSelect:y.selectOption,onHighlight:y.setActiveDropdownIndex,isOpen:d.isDropdownOpen,id:h,pills:Ie,activeSelected:d.isActivePillSelected,onPillClick:y.setActivePill,isLoading:ue,hasTabbedToHighlight:d.hasTabbedToHighlight,isInputEmpty:o.trim().length===0,optionsPosition:l??"below"}}}import{extractPlainText as Ye,getCursorOffset as et,plainTextLength as Et,renderEditableContent as Dt,setCursorOffset as tt}from"@magicx-eng/ai-autocomplete-vanilla";import{useCallback as K,useEffect as Re,useLayoutEffect as Te,useRef as ie}from"react";var _e;function Rt(){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:c,newParamId:i,editingParam:u,editingAnchor:r,caretOffset:n,placeholderText:s,isFocused:l,isDropdownOpen:g,listboxId:b,activeDescendantId:D,autoFocus:k,handleTextChange:I,handleKeyDown:S,handleCaretAfterInput:x,handleCaretMove:R,startEditingParam:z,replaceEditingRange:F,setFocused:t}=e,w=ie(null),m=ie(!1),J=ie(""),T=ie(""),G=ie(null),H=ie(0);G.current=n,Re(()=>{if(!k)return;let o=w.current;o&&(document.activeElement===o?t(!0):o.focus())},[k,t]),Re(()=>{let o=w.current;if(!o)return;let p=o.ownerDocument??document,f=()=>{let _=p.getSelection();if(!_||_.rangeCount===0||!_.anchorNode||!o.contains(_.anchorNode))return;let h=_.anchorNode,U=(h.nodeType===Node.ELEMENT_NODE?h:h.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(U&&U!==u?.id){z(U);return}performance.now()-H.current<50||R(et(o))};return p.addEventListener("selectionchange",f),()=>p.removeEventListener("selectionchange",f)},[u,z,R]),Te(()=>{let o=w.current;o&&Dt({input:o,segments:c,newParamId:i,editingParamId:u?.id??null,placeholderText:s??"",isFocused:l})},[c,i,u,s,l]),Te(()=>{let o=J.current,p=i??"";if(J.current=p,!p||p===o)return;let f=w.current;if(!f)return;f.focus();let _=G.current??Et(f);tt(f,_)},[i]),Te(()=>{let o=T.current,p=u?.id??"";if(T.current=p,!p||p===o||r==null)return;let f=w.current;f&&tt(f,r)},[u,r]);let C=K(()=>{if(m.current)return;let o=w.current;if(!o)return;let p=Ye(o),_=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;I(_)},[I]),j=K(()=>{H.current=performance.now(),C();let o=w.current;o&&x(et(o))},[C,x]);Re(()=>{let o=w.current;if(!o)return;let p=f=>{let _=f,h=_.inputType;if(h==="insertParagraph"||h==="insertLineBreak"||h==="insertFromDrop"){f.preventDefault();return}if(h.startsWith("insert")||h.startsWith("delete")){let E=h.startsWith("delete")?"":_.data??"";F(E)&&f.preventDefault()}};return o.addEventListener("beforeinput",p),()=>o.removeEventListener("beforeinput",p)},[F]);let L=K(()=>{m.current=!0},[]),V=K(()=>{m.current=!1,C()},[C]),q=K(o=>{o.preventDefault();let p=w.current;if(!p)return;let f=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!f)return;let _=p.ownerDocument??document,h=_.getSelection();if(!h||h.rangeCount===0)return;let E=h.getRangeAt(0);if(!p.contains(E.startContainer))return;E.deleteContents();let O=_.createTextNode(f);E.insertNode(O),E.setStartAfter(O),E.collapse(!0),h.removeAllRanges(),h.addRange(E),C()},[C]),B=K(o=>S(o),[S]),$=K(()=>t(!0),[t]),y=K(()=>t(!1),[t]),Y=K(()=>w.current?.focus(),[]),ee=K(()=>w.current?.blur(),[]),Z=K(()=>{let o=w.current;return o?Ye(o):""},[]),d=Rt()?"plaintext-only":"true";return{inputRef:w,editorProps:{ref:w,contentEditable:d,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":b,"aria-expanded":g,"aria-activedescendant":D,spellCheck:!0,enterKeyHint:"send",onInput:j,onKeyDown:B,onCompositionStart:L,onCompositionEnd:V,onPaste:q,onFocus:$,onBlur:y},getPlainText:Z,focus:Y,blur:ee}}import{jsx as re,jsxs as Be}from"react/jsx-runtime";function Ot(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var Mt=Tt(function({onSubmit:c,onError:i,optionOverrides:u,maskCompletedText:r,className:n,apiConfig:s,columns:l,pillPlacement:g="inline",mode:b="auto",optionsPosition:D="below",animations:k=!0,dropdownTrigger:I,closeDropdownOnBlur:S,showNonTappableOptions:x,autoFocus:R=!0,onFocus:z,onBlur:F,value:t,completedParams:w,onChange:m,onParamsChange:J,submitButton:T},G){let H=ce(null),C=ce(null),j=ce(()=>{}),L=ce(null),V=ce(null);at(()=>{let v=H.current;if(v)return L.current?L.current.setMode(b):L.current=new Ft(v,b),()=>{L.current?.destroy(),L.current=null}},[b]);let q=Le(v=>{let W=V.current?.current;W&&(W.focus(),Ht(W,v))},[]),{completedParams:B,suggestionPills:$,setActivePill:y,segments:Y,newParamId:ee,clearNewParamId:Z,placeholderText:d,isFocused:o,isDropdownOpen:p,isActivePillSelected:f,isLoading:_,activeIndex:h,listboxId:E,handleTextChange:O,handleKeyDown:U,setFocused:pe,editingParam:Ie,editingAnchor:ue,caretOffset:a,startEditingParam:P,handleCaretAfterInput:A,handleCaretMove:ae,replaceEditingRange:se,dropdownProps:nt,reset:me}=De({onSubmit:v=>j.current(v),onError:i,optionOverrides:u,maskCompletedText:r,apiConfig:s,columns:l,dropdownTrigger:I,optionsPosition:D,closeDropdownOnBlur:S,showNonTappableOptions:x,onFocus:z,onBlur:F,value:t,completedParams:w,onChange:m,onParamsChange:J,source:"full-sdk",setCursor:q});at(()=>{if(!ee)return;let v=window.setTimeout(()=>Z(),650);return()=>window.clearTimeout(v)},[ee,Z]);let it=h>=0?`${E}-option-${h}`:void 0,{inputRef:ke,editorProps:rt,focus:ge,blur:ze,getPlainText:Fe}=ot({segments:Y,newParamId:ee,editingParam:Ie,editingAnchor:ue,caretOffset:a,placeholderText:d,isFocused:o,isDropdownOpen:p,listboxId:E,activeDescendantId:it,autoFocus:R,handleTextChange:O,handleKeyDown:U,handleCaretAfterInput:A,handleCaretMove:ae,startEditingParam:P,replaceEditingRange:se,setFocused:pe});V.current=ke,Bt(()=>{let v=C.current,W=ke.current;if(!v||!W)return;let he=()=>{let Oe=v.firstElementChild;if(!Oe)return;let ct=Oe.getBoundingClientRect(),pt=W.getBoundingClientRect();ct.top>=pt.bottom-2?v.setAttribute("data-aia-pill-wrapped",""):v.removeAttribute("data-aia-pill-wrapped")};he();let He=new ResizeObserver(he);return He.observe(W),()=>He.disconnect()},[Y,$.length,_,ke]),Lt(G,()=>({focus:ge,blur:ze,reset:me,setMode:v=>L.current?.setMode(v)}),[ge,ze,me]);let fe=!!Y.length||B.length>0,Se=Le(()=>{if(!fe)return;let v=Fe(),{rawQuery:W,completedParams:he}=zt(v,B);c({query:v.trim(),raw_query:W,completed_params:he}),me()},[fe,B,c,me,Fe]);j.current=Se;let st=Le(v=>{v.target?.closest("[data-aia-pill]")||ge()},[ge]),lt=g==="inline",dt=g==="dropdown";return Be("div",{ref:H,className:`magicx-aia ${te.container} ${n??""}`,"data-pill-placement":g,"data-options-position":D,"data-animations":k?"on":"off","data-mode":Ot(b),children:[re(Ce,{...nt,showPills:dt}),Be("div",{className:te.inputWrapper,onClick:st,children:[Be("div",{className:te.editorArea,"data-aia-editor":"",children:[re("div",{...rt,className:te.input,"data-aia-input":""}),lt&&(_||$.length>0)&&re("span",{ref:C,className:te.pillListContainer,"data-aia-pill-list-container":"",children:re(ve,{pills:$,activePillIndex:0,activeSelected:f,onSelectPill:y,loading:_})})]}),T===null?null:T===void 0?re(Je,{disabled:!fe,onClick:Se}):re("span",{"data-aia-submit":"",className:te.submitSlot,onClick:v=>{fe&&(v.stopPropagation(),Se())},children:T})]})]})});export{Mt as AIAutocomplete,Ce as AIAutocompleteDropdown,De as useAIAutocomplete};
 //# sourceMappingURL=index.mjs.map