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

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";var Pe=Object.defineProperty;var $e=Object.getOwnPropertyDescriptor;var Ue=Object.getOwnPropertyNames;var je=Object.prototype.hasOwnProperty;var Xe=(e,l)=>{for(var p in l)Pe(e,p,{get:l[p],enumerable:!0})},Qe=(e,l,p,x)=>{if(l&&typeof l=="object"||typeof l=="function")for(let r of Ue(l))!je.call(e,r)&&r!==p&&Pe(e,r,{get:()=>l[r],enumerable:!(x=$e(l,r))||x.enumerable});return e};var Je=e=>Qe(Pe({},"__esModule",{value:!0}),e);var at={};Xe(at,{AIAutocomplete:()=>He,AIAutocompleteDropdown:()=>_e,useAIAutocomplete:()=>ye});module.exports=Je(at);var I=require("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 {
+"use strict";var De=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var pt=Object.getOwnPropertyNames;var ut=Object.prototype.hasOwnProperty;var mt=(e,t)=>{for(var o in t)De(e,o,{get:t[o],enumerable:!0})},gt=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of pt(t))!ut.call(e,a)&&a!==o&&De(e,a,{get:()=>t[a],enumerable:!(p=ct(t,a))||p.enumerable});return e};var ft=e=>gt(De({},"__esModule",{value:!0}),e);var yt={};mt(yt,{AIAutocomplete:()=>tt,AIAutocompleteDropdown:()=>Ie,useAIAutocomplete:()=>Se});module.exports=ft(yt);var S=require("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 @@
 }
 
 .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 @@
     --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 @@
 /* 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 @@
   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 @@
     background-position: -50% 0;
   }
 }
-`,document.head.appendChild(e)}var J={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 le={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"};var Xe=require("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 @@
     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 @@
   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 @@
   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 @@
     opacity: 0.25;
   }
 }
-`,document.head.appendChild(e)}var ie={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 ce={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"};var Ne=require("@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)}var Re=require("react/jsx-runtime");function ge({gap:e,align:t="center",justify:o="start",noWrap:p=!1,inline:a=!1,className:s,children:l,...d}){let f=e?{"--aia-cluster-gap":e}:void 0,x={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":t,"data-justify":o,"data-nowrap":p||void 0,"data-inline":a||void 0,style:f,...d};return a?(0,Re.jsx)("span",{...x,children:l}):(0,Re.jsx)("div",{...x,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 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 ee={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"};var G=require("react/jsx-runtime");function Ke({hasTabbedToHighlight:e=!1,isOptionHighlighted:t=!1,isInputEmpty:o=!1}){let{key:p,hint:a}=(0,Ne.getFooterHint)(e,t,o);return(0,G.jsxs)("footer",{className:ee.footer,"data-aia-footer":"",children:[(0,G.jsx)("div",{className:ee.divider}),(0,G.jsxs)(ge,{justify:"between",noWrap:!0,children:[(0,G.jsxs)(ge,{gap:"5px",className:ee.hintGroup,children:[(0,G.jsx)("kbd",{className:ee.key,children:p}),(0,G.jsx)("span",{className:ee.hint,children:a})]}),(0,G.jsxs)("a",{className:ee.brandLink,href:"https://ai-autocomplete.com",target:"_blank",rel:"noopener noreferrer",children:[(0,G.jsx)("span",{className:ee.brand,children:"AI"}),(0,G.jsx)("span",{className:ee.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 @@
   }
 }
 
-.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 F={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--"};var ce=require("react/jsx-runtime"),Ze=[125,69];function Te(e){return e===0?.4:e===1?.3:.15}function me({pills:e,activePillIndex:l,onSelectPill:p,rounded:x,loading:r}){return r&&e.length===0?(0,ce.jsx)("span",{className:F.list,"data-aia-pill-list-loading":"",children:Ze.map((c,b)=>(0,ce.jsx)("span",{"data-aia-pill-skeleton":"",className:`${F.pill} ${x?F.rounded:""} ${F.skeleton}`,style:{width:c,opacity:Te(b)}},`skel-${c}`))}):(0,ce.jsx)("span",{className:F.list,"data-aia-pill-list-loading":r?"":void 0,children:e.map((c,b)=>(0,ce.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:`${F.pill} ${x?F.rounded:""} ${b===l&&!r?F.active:""} ${r?F.skeleton:""}`,style:{opacity:Te(b)},onMouseDown:h=>h.preventDefault(),onClick:r?void 0:()=>p(b),disabled:r,children:c.text},`${c.type}-${c.text}`))})}var Y=require("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 te={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"};var Ge=require("react/jsx-runtime"),Te={selected:1,first:.7,next:.4,last:.2};function We({label:e,state:t,selected:o,rounded:p,loading:a,onClick:s}){let l=[te.pill,p?te.rounded:"",o&&!a?te.active:"",a?te.skeleton:""].filter(Boolean).join(" ");return(0,Ge.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":a?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:l,style:{opacity:Te[t]},onMouseDown:d=>d.preventDefault(),onClick:a?void 0:s,disabled:a,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 Le={list:"PillList-module_list_qvLqO"};var fe=require("react/jsx-runtime"),ht=[125,69];function je(e){return e===0?"first":e===1?"next":"last"}function _e({pills:e,activePillIndex:t,onSelectPill:o,activeSelected:p,rounded:a,loading:s}){return s&&e.length===0?(0,fe.jsx)("span",{className:Le.list,"data-aia-pill-list-loading":"",children:ht.map((l,d)=>(0,fe.jsx)("span",{"data-aia-pill-skeleton":"",className:`${te.pill} ${a?te.rounded:""} ${te.skeleton}`,style:{width:l,opacity:Te[je(d)]}},`skel-${l}`))}):(0,fe.jsx)("span",{className:Le.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((l,d)=>{let f=!!p&&d===t;return(0,fe.jsx)(We,{label:l.text,state:f?"selected":je(d),selected:f,rounded:a,loading:s,onClick:()=>o(d)},`${l.type}-${l.text}`)})})}var ne=require("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 Ee={scrollWrapper:"SuggestionGrid-module_scrollWrapper_MOqfw",grid:"SuggestionGrid-module_grid_jvaPb"};var de=require("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)}var Be=require("react/jsx-runtime");function Ve({min:e="16rem",max:t,gap:o,scroll:p=!1,maxHeight:a,fade:s=!1,className:l,children:d,...f}){let x=(0,ne.useRef)(null),[L,P]=(0,ne.useState)(!1);(0,ne.useEffect)(()=>{if(!s)return;let v=x.current;if(!v)return;let B=()=>{P(v.scrollHeight-v.scrollTop-v.clientHeight>1)};v.addEventListener("scroll",B,{passive:!0});let M=new ResizeObserver(B);return M.observe(v),()=>{v.removeEventListener("scroll",B),M.disconnect()}},[s]),(0,ne.useLayoutEffect)(()=>{let v=x.current;!s||!v||P(v.scrollHeight-v.scrollTop-v.clientHeight>1)},[s,d]);let A={"--aia-grid-min":e};t&&(A["--aia-grid-max"]=t),o&&(A["--aia-grid-gap"]=o),a&&(A["--aia-grid-max-height"]=a);let C=(0,Be.jsx)("div",{ref:x,className:!s&&l?`aia-grid ${l}`:"aia-grid","data-scroll":p||void 0,style:A,...s?{}:f,children:d});return s?(0,Be.jsx)("div",{className:l?`aia-grid-fade ${l}`:"aia-grid-fade","data-fade":L?"":void 0,...f,children:C}):C}var pe=require("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 @@
      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 @@
 .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 @@
     filter: brightness(0.55);
   }
 }
-`,document.head.appendChild(e)}var H={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"};var Z=require("react/jsx-runtime");function ze({option:e,isHighlighted:l,onSelect:p,onHighlight:x,id:r,loading:c}){let[b,h]=(0,de.useState)(!1),_=(0,de.useRef)(void 0);(0,de.useEffect)(()=>()=>clearTimeout(_.current),[]);let n=()=>{c||!e.is_tappable||b||(h(!0),p(e),clearTimeout(_.current),_.current=setTimeout(()=>h(!1),500))},m=[H.item,l&&!c?H.highlighted:"",e.is_tappable?H.tappable:H.nonTappable,b?H.pressed:""].filter(Boolean).join(" ");return(0,Z.jsxs)("div",{id:r,role:"option","data-aia-option":"","data-aia-loading":c?"":void 0,"aria-selected":l,className:m,tabIndex:c||!e.is_tappable?-1:0,onClick:n,onKeyDown:S=>{!c&&e.is_tappable&&(S.key==="Enter"||S.key===" ")&&(S.preventDefault(),n())},onMouseEnter:!c&&e.is_tappable?x:void 0,children:[(0,Z.jsx)("div",{className:H.streaks}),(0,Z.jsx)("div",{className:H.streaksVert}),(0,Z.jsxs)("span",{className:H.content,children:[(0,Z.jsx)("span",{className:H.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,Z.jsx)("span",{className:H.tag,children:e.tag})]})]})}var we=require("react/jsx-runtime");function Me({options:e,activeIndex:l,onSelect:p,onHighlight:x,listboxId:r,loading:c}){let b=(0,Y.useRef)(null),[h,_]=(0,Y.useState)(!1);return(0,Y.useEffect)(()=>{let n=b.current;if(!n)return;let m=()=>{_(n.scrollHeight-n.scrollTop-n.clientHeight>1)};n.addEventListener("scroll",m,{passive:!0});let S=new ResizeObserver(m);return S.observe(n),()=>{n.removeEventListener("scroll",m),S.disconnect()}},[]),(0,Y.useLayoutEffect)(()=>{let n=b.current;n&&_(n.scrollHeight-n.scrollTop-n.clientHeight>1)},[e]),(0,we.jsx)("div",{className:Ee.scrollWrapper,"data-fade":h?"":void 0,children:(0,we.jsx)("div",{ref:b,className:Ee.grid,children:e.map((n,m)=>(0,we.jsx)(ze,{option:n,isHighlighted:m===l,onSelect:p,onHighlight:()=>x(m),id:`${r}-option-${m}`,loading:c},n.text))})})}var W=require("react/jsx-runtime"),Ye=[159,119,164];function _e({suggestions:e,activeIndex:l,onSelect:p,onHighlight:x,isOpen:r,id:c,className:b,pills:h,onPillClick:_,showPills:n=!0,isLoading:m=!1}){let E=e[0]?.options??[],C=n&&h&&h.length>0&&_,M=E.length>0,N=m&&!M,$=r&&(M||C||m);return(0,W.jsxs)("div",{id:c,role:"listbox","data-aia-dropdown":"","data-aia-loading":m?"":void 0,className:`${ie.dropdown} ${$?ie.visible:""} ${b??""}`,onMouseDown:T=>T.preventDefault(),children:[n&&h&&h.length>0&&_&&(0,W.jsx)("div",{className:ie.pillBar,"data-aia-pillbar":"",children:(0,W.jsx)(me,{pills:h,activePillIndex:0,onSelectPill:_,rounded:!0,loading:m})}),n&&(!h||h.length===0)&&m&&(0,W.jsx)("div",{className:ie.pillBar,"data-aia-pillbar":"",children:(0,W.jsx)(me,{pills:[],activePillIndex:0,onSelectPill:()=>{},rounded:!0,loading:!0})}),M&&(0,W.jsx)(Me,{options:E,activeIndex:l,onSelect:p,onHighlight:x,listboxId:c,loading:m}),N&&(0,W.jsx)("div",{className:ie.skeletonBars,"data-aia-skeleton-bars":"",children:Ye.map(T=>(0,W.jsx)("span",{className:ie.skeletonBar,style:{width:T}},`bar-${T}`))})]})}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 j={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"};var ie=require("react/jsx-runtime");function qe({option:e,isHighlighted:t,onSelect:o,onHighlight:p,id:a,loading:s}){let[l,d]=(0,pe.useState)(!1),f=(0,pe.useRef)(void 0);(0,pe.useEffect)(()=>()=>clearTimeout(f.current),[]);let x=()=>{s||!e.is_tappable||l||(d(!0),o(e),clearTimeout(f.current),f.current=setTimeout(()=>d(!1),500))},L=[j.item,t&&!s?j.highlighted:"",e.is_tappable?j.tappable:j.nonTappable,l?j.pressed:""].filter(Boolean).join(" ");return(0,ie.jsxs)("div",{id:a,role:"option","data-aia-option":"","data-aia-loading":s?"":void 0,"aria-selected":t,className:L,tabIndex:s||!e.is_tappable?-1:0,onClick:x,onKeyDown:P=>{!s&&e.is_tappable&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),x())},onMouseEnter:!s&&e.is_tappable?p:void 0,children:[(0,ie.jsx)("div",{className:j.streaks}),(0,ie.jsx)("div",{className:j.streaksVert}),(0,ie.jsxs)("span",{className:j.content,children:[(0,ie.jsx)("span",{className:j.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,ie.jsx)("span",{className:j.tag,children:e.tag})]})]})}var ze=require("react/jsx-runtime");function $e({options:e,activeIndex:t,onSelect:o,onHighlight:p,listboxId:a,loading:s}){return(0,ze.jsx)(Ve,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((l,d)=>(0,ze.jsx)(qe,{option:l,isHighlighted:d===t,onSelect:o,onHighlight:()=>p(d),id:`${a}-option-${d}`,loading:s},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 {
+  .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)}var Qe=require("react/jsx-runtime");function Ue({space:e,align:t="stretch",className:o,children:p,...a}){let s=e?{"--aia-stack-space":e}:void 0;return(0,Qe.jsx)("div",{className:o?`aia-stack ${o}`:"aia-stack","data-align":t,style:s,...a,children:p})}var $=require("react/jsx-runtime"),bt=[159,119,164];function Ie({suggestions:e,activeIndex:t,onSelect:o,onHighlight:p,isOpen:a,id:s,className:l,pills:d,onPillClick:f,showPills:x=!0,activeSelected:L=!1,isLoading:P=!1,hasTabbedToHighlight:A=!1,isInputEmpty:C=!1,optionsPosition:v="below"}){let B=e[0]?.options??[],M=!!(d&&d.length>0&&f),N=a&&(B.length>0||x&&M||P),n={suggestions:e,activeIndex:t,pills:d,showPills:x,activeSelected:L,isLoading:P,hasTabbedToHighlight:A,isInputEmpty:C},_=(0,Xe.useRef)(n);N&&(_.current=n);let g=N?n:_.current,z=g.suggestions[0]?.options??[],U=g.activeIndex>=0&&!!z[g.activeIndex]?.is_tappable,K=!!(g.pills&&g.pills.length>0&&f),R=g.showPills&&K,Q=g.showPills&&!K&&g.isLoading,F=R||Q,X=z.length>0,J=g.isLoading&&!X;return(0,$.jsx)("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":v,"data-aia-loading":g.isLoading?"":void 0,className:`${ce.dropdown} ${N?ce.visible:""} ${l??""}`,onMouseDown:H=>H.preventDefault(),children:(0,$.jsxs)(Ue,{space:"2px",children:[F&&(0,$.jsx)(ge,{noWrap:!0,className:ce.pillBar,"data-aia-pillbar":"",children:(0,$.jsx)(_e,{pills:g.pills??[],activePillIndex:0,activeSelected:g.activeSelected,onSelectPill:f??(()=>{}),rounded:!0,loading:g.isLoading})}),X&&(0,$.jsx)($e,{options:z,activeIndex:g.activeIndex,onSelect:o,onHighlight:p,listboxId:s,loading:g.isLoading}),J&&(0,$.jsx)("div",{className:ce.skeletonBars,"data-aia-skeleton-bars":"",children:bt.map(H=>(0,$.jsx)("span",{className:ce.skeletonBar,style:{width:H}},`bar-${H}`))}),(0,$.jsx)(Ke,{hasTabbedToHighlight:g.hasTabbedToHighlight,isOptionHighlighted:U,isInputEmpty:g.isInputEmpty})]})})}var ue=require("@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)}var pe=require("@magicx-eng/ai-autocomplete-vanilla");var Oe=require("@magicx-eng/ai-autocomplete-vanilla"),v=require("react"),et={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 ye({onSubmit:e,onError:l,optionOverrides:p,maskCompletedText:x,apiConfig:r,columns:c=2,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n,onFocus:m,onBlur:S,value:E,completedParams:C,onChange:M,onParamsChange:N,source:$,setCursor:T}){let a=(0,v.useRef)(null),[k,U]=(0,v.useState)(null),ee=(0,v.useRef)(e);ee.current=e;let G=(0,v.useRef)(l);G.current=l;let te=(0,v.useRef)(M);te.current=M;let j=(0,v.useRef)(N);j.current=N;let z=(0,v.useRef)(m);z.current=m;let oe=(0,v.useRef)(S);oe.current=S;let O=(0,v.useRef)(T);O.current=T,(0,v.useEffect)(()=>{if(typeof document>"u")return;let t=new Oe.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:r,optionOverrides:p,maskCompletedText:x,columns:c,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n,source:$,value:E,completedParams:C,onSubmit:(...A)=>ee.current?.(...A),onError:(...A)=>G.current?.(...A),onChange:(...A)=>te.current?.(...A),onParamsChange:(...A)=>j.current?.(...A),onFocus:()=>z.current?.(),onBlur:()=>oe.current?.(),setCursor:A=>O.current?.(A)});a.current=t,U(t.getState());let P=t.subscribe(A=>U(A));return()=>{P(),t.destroy(),a.current===t&&(a.current=null)}},[]),(0,v.useEffect)(()=>{E!==void 0&&a.current?.setValue(E)},[E]),(0,v.useEffect)(()=>{C!==void 0&&a.current?.setCompletedParams(C)},[C]);let se=JSON.stringify(r??null),ae=(0,v.useRef)(p),X=(0,v.useRef)(0);if(p!==ae.current){let t=ae.current,P=p,A=Object.keys(t??{}),le=Object.keys(P??{});(A.length!==le.length||le.some(ue=>!t?.[ue]||P[ue]!==t[ue]))&&X.current++,ae.current=p}(0,v.useEffect)(()=>{a.current?.update({apiConfig:r,optionOverrides:p,dropdownTrigger:b,optionsPosition:h,closeDropdownOnBlur:_,showNonTappableOptions:n})},[se,X.current,b,h,_,n]);let V=(0,v.useRef)(null);V.current===null&&(V.current={handleTextChange:t=>a.current?.handleTextChange(t),handleKeyDown:t=>{let P="nativeEvent"in t?t.nativeEvent:t;a.current?.handleKeyDown(P)},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 w=V.current,ne=(0,v.useCallback)(t=>{let P=t.target.value,le=P.length>0&&!t.nativeEvent?.isComposing&&P[0]!==P[0].toUpperCase()?P[0].toUpperCase()+P.slice(1):P;a.current?.handleTextChange(le)},[]),re=(0,v.useCallback)(t=>{a.current?.handleKeyDown(t.nativeEvent)},[]),Q=a.current,i=k??et,o=E!==void 0?E:i.text,s=C!==void 0?C:i.completedParams,u=i.actionableSuggestions,y=u[0],g=Q?.listboxId??"",D=i.activeDropdownIndex>=0&&Q?`${g}-option-${i.activeDropdownIndex}`:void 0,B=i.editingParam,q=B?{type:B.suggestionType,text:B.suggestionPlaceholder,required:!0,options:B.options}:null,ge=q??y,ke=q?[q]:u,fe=!Q||i.isLoading&&!i.editingParam&&!i.inSelectionAnimation;return{completedParams:s,suggestionPills:u,setActivePill:w.setActivePill,removeLastParam:w.removeLastParam,segments:i.segments,newParamId:i.newParamId,clearNewParamId:w.clearNewParamId,suggestions:i.suggestions,activeIndex:i.activeDropdownIndex,isReady:i.isReady,isLoading:fe,isFocused:i.isFocused,isDropdownOpen:i.isDropdownOpen,placeholderText:i.placeholderText,listboxId:g,error:i.error,handleTextChange:w.handleTextChange,handleKeyDown:w.handleKeyDown,setFocused:w.setFocused,editingParam:B,editingAnchor:i.editingAnchor,caretOffset:i.caretOffset,startEditingParam:w.startEditingParam,exitEditMode:w.exitEditMode,handleCaretAfterInput:w.handleCaretAfterInput,handleCaretMove:w.handleCaretMove,replaceEditingRange:w.replaceEditingRange,inputProps:{value:o,placeholder:i.placeholderText||void 0,onChange:ne,onKeyDown:re,onFocus:w.handleFocus,onBlur:w.handleBlur,role:"combobox","aria-expanded":i.isDropdownOpen,"aria-activedescendant":D,"aria-autocomplete":"list","aria-controls":g},reset:w.reset,dropdownProps:{suggestions:ge?[{...ge,options:i.filteredOptions}]:[],activeIndex:i.activeDropdownIndex,onSelect:w.selectOption,onHighlight:w.setActiveDropdownIndex,isOpen:i.isDropdownOpen,id:g,pills:ke,onPillClick:w.setActivePill,isLoading:fe}}}var L=require("@magicx-eng/ai-autocomplete-vanilla"),d=require("react"),Ie;function tt(){if(Ie!==void 0)return Ie;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ie=e.contentEditable==="plaintext-only",Ie}function Be(e){let{segments:l,newParamId:p,editingParam:x,editingAnchor:r,caretOffset:c,placeholderText:b,isFocused:h,isDropdownOpen:_,listboxId:n,activeDescendantId:m,autoFocus:S,handleTextChange:E,handleKeyDown:C,handleCaretAfterInput:M,handleCaretMove:N,startEditingParam:$,replaceEditingRange:T,setFocused:a}=e,k=(0,d.useRef)(null),U=(0,d.useRef)(!1),ee=(0,d.useRef)(""),G=(0,d.useRef)(""),te=(0,d.useRef)(null),j=(0,d.useRef)(0);te.current=c,(0,d.useEffect)(()=>{if(!S)return;let o=k.current;o&&(document.activeElement===o?a(!0):o.focus())},[S,a]),(0,d.useEffect)(()=>{let o=k.current;if(!o)return;let s=o.ownerDocument??document,u=()=>{let y=s.getSelection();if(!y||y.rangeCount===0||!y.anchorNode||!o.contains(y.anchorNode))return;let g=y.anchorNode,q=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(q&&q!==x?.id){$(q);return}performance.now()-j.current<50||N((0,L.getCursorOffset)(o))};return s.addEventListener("selectionchange",u),()=>s.removeEventListener("selectionchange",u)},[x,$,N]),(0,d.useLayoutEffect)(()=>{let o=k.current;o&&(0,L.renderEditableContent)({input:o,segments:l,newParamId:p,editingParamId:x?.id??null,placeholderText:b??"",isFocused:h})},[l,p,x,b,h]),(0,d.useLayoutEffect)(()=>{let o=ee.current,s=p??"";if(ee.current=s,!s||s===o)return;let u=k.current;if(!u)return;u.focus();let y=te.current??(0,L.plainTextLength)(u);(0,L.setCursorOffset)(u,y)},[p]),(0,d.useLayoutEffect)(()=>{let o=G.current,s=x?.id??"";if(G.current=s,!s||s===o||r==null)return;let u=k.current;u&&(0,L.setCursorOffset)(u,r)},[x,r]);let z=(0,d.useCallback)(()=>{if(U.current)return;let o=k.current;if(!o)return;let s=(0,L.extractPlainText)(o),y=s.length>0&&s[0]!==s[0].toUpperCase()?s[0].toUpperCase()+s.slice(1):s;E(y)},[E]),oe=(0,d.useCallback)(()=>{j.current=performance.now(),z();let o=k.current;o&&M((0,L.getCursorOffset)(o))},[z,M]);(0,d.useEffect)(()=>{let o=k.current;if(!o)return;let s=u=>{let y=u,g=y.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){u.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let D=g.startsWith("delete")?"":y.data??"";T(D)&&u.preventDefault()}};return o.addEventListener("beforeinput",s),()=>o.removeEventListener("beforeinput",s)},[T]);let O=(0,d.useCallback)(()=>{U.current=!0},[]),se=(0,d.useCallback)(()=>{U.current=!1,z()},[z]),ae=(0,d.useCallback)(o=>{o.preventDefault();let s=k.current;if(!s)return;let u=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!u)return;let y=s.ownerDocument??document,g=y.getSelection();if(!g||g.rangeCount===0)return;let D=g.getRangeAt(0);if(!s.contains(D.startContainer))return;D.deleteContents();let B=y.createTextNode(u);D.insertNode(B),D.setStartAfter(B),D.collapse(!0),g.removeAllRanges(),g.addRange(D),z()},[z]),X=(0,d.useCallback)(o=>C(o),[C]),V=(0,d.useCallback)(()=>a(!0),[a]),w=(0,d.useCallback)(()=>a(!1),[a]),ne=(0,d.useCallback)(()=>k.current?.focus(),[]),re=(0,d.useCallback)(()=>k.current?.blur(),[]),Q=(0,d.useCallback)(()=>{let o=k.current;return o?(0,L.extractPlainText)(o):""},[]),i=tt()?"plaintext-only":"true";return{inputRef:k,editorProps:{ref:k,contentEditable:i,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":n,"aria-expanded":_,"aria-activedescendant":m,spellCheck:!0,enterKeyHint:"send",onInput:oe,onKeyDown:X,onCompositionStart:O,onCompositionEnd:se,onPaste:ae,onFocus:V,onBlur:w},getPlainText:Q,focus:ne,blur:re}}var R=require("react/jsx-runtime");function ot(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var He=(0,I.forwardRef)(function({onSubmit:l,onError:p,optionOverrides:x,maskCompletedText:r,className:c,apiConfig:b,columns:h,pillPlacement:_="inline",mode:n="auto",optionsPosition:m="below",animations:S=!0,dropdownTrigger:E,closeDropdownOnBlur:C,showNonTappableOptions:M,autoFocus:N=!0,onFocus:$,onBlur:T,value:a,completedParams:k,onChange:U,onParamsChange:ee,submitButton:G},te){let j=(0,I.useRef)(null),z=(0,I.useRef)(null),oe=(0,I.useRef)(()=>{}),O=(0,I.useRef)(null),se=(0,I.useRef)(null);(0,I.useEffect)(()=>{let f=j.current;if(f)return O.current?O.current.setMode(n):O.current=new pe.ModeController(f,n),()=>{O.current?.destroy(),O.current=null}},[n]);let ae=(0,I.useCallback)(f=>{let K=se.current?.current;K&&(K.focus(),(0,pe.setCursorOffset)(K,f))},[]),{completedParams:X,suggestionPills:V,setActivePill:w,segments:ne,newParamId:re,clearNewParamId:Q,placeholderText:i,isFocused:o,isDropdownOpen:s,isLoading:u,activeIndex:y,listboxId:g,handleTextChange:D,handleKeyDown:B,setFocused:q,editingParam:ge,editingAnchor:ke,caretOffset:fe,startEditingParam:t,handleCaretAfterInput:P,handleCaretMove:A,replaceEditingRange:le,dropdownProps:ue,reset:be}=ye({onSubmit:f=>oe.current(f),onError:p,optionOverrides:x,maskCompletedText:r,apiConfig:b,columns:h,dropdownTrigger:E,optionsPosition:m,closeDropdownOnBlur:C,showNonTappableOptions:M,onFocus:$,onBlur:T,value:a,completedParams:k,onChange:U,onParamsChange:ee,source:"full-sdk",setCursor:ae});(0,I.useEffect)(()=>{if(!re)return;let f=window.setTimeout(()=>Q(),650);return()=>window.clearTimeout(f)},[re,Q]);let Ke=y>=0?`${g}-option-${y}`:void 0,{inputRef:Ae,editorProps:Fe,focus:he,blur:Ce,getPlainText:De}=Be({segments:ne,newParamId:re,editingParam:ge,editingAnchor:ke,caretOffset:fe,placeholderText:i,isFocused:o,isDropdownOpen:s,listboxId:g,activeDescendantId:Ke,autoFocus:N,handleTextChange:D,handleKeyDown:B,handleCaretAfterInput:P,handleCaretMove:A,startEditingParam:t,replaceEditingRange:le,setFocused:q});se.current=Ae,(0,I.useLayoutEffect)(()=>{let f=z.current,K=Ae.current;if(!f||!K)return;let ve=()=>{let Re=f.firstElementChild;if(!Re)return;let Ve=Re.getBoundingClientRect(),qe=K.getBoundingClientRect();Ve.top>=qe.bottom-2?f.setAttribute("data-aia-pill-wrapped",""):f.removeAttribute("data-aia-pill-wrapped")};ve();let Le=new ResizeObserver(ve);return Le.observe(K),()=>Le.disconnect()},[ne,V.length,u,Ae]),(0,I.useImperativeHandle)(te,()=>({focus:he,blur:Ce,reset:be,setMode:f=>O.current?.setMode(f)}),[he,Ce,be]);let xe=!!ne.length||X.length>0,Se=(0,I.useCallback)(()=>{if(!xe)return;let f=De(),{rawQuery:K,completedParams:ve}=(0,pe.buildQuery)(f,X);l({query:f.trim(),raw_query:K,completed_params:ve}),be()},[xe,X,l,be,De]);oe.current=Se;let We=(0,I.useCallback)(f=>{f.target?.closest("[data-aia-pill]")||he()},[he]),Ne=_==="inline",Ge=_==="dropdown";return(0,R.jsxs)("div",{ref:j,className:`magicx-aia ${J.container} ${c??""}`,"data-pill-placement":_,"data-options-position":m,"data-animations":S?"on":"off","data-mode":ot(n),children:[(0,R.jsx)(_e,{...ue,showPills:Ge}),(0,R.jsxs)("div",{className:J.inputWrapper,onClick:We,children:[(0,R.jsxs)("div",{className:J.editorArea,"data-aia-editor":"",children:[(0,R.jsx)("div",{...Fe,className:J.input,"data-aia-input":""}),Ne&&(u||V.length>0)&&(0,R.jsx)("span",{ref:z,className:J.pillListContainer,"data-aia-pill-list-container":"",children:(0,R.jsx)(me,{pills:V,activePillIndex:0,onSelectPill:w,loading:u})})]}),G===null?null:G===void 0?(0,R.jsx)("button",{type:"button","data-aia-submit":"",className:J.submitButton,disabled:!xe,onClick:f=>{f.stopPropagation(),Se()},"aria-label":"Submit",children:(0,R.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,R.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}):(0,R.jsx)("span",{"data-aia-submit":"",className:J.submitSlot,onClick:f=>{xe&&(f.stopPropagation(),Se())},children:G})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
+`,document.head.appendChild(e)}var Je={submitButton:"SubmitButton-module_submitButton_otz7H"};var ke=require("react/jsx-runtime");function Ze({disabled:e,onClick:t}){return(0,ke.jsx)("button",{type:"button","data-aia-submit":"",className:Je.submitButton,disabled:e,onClick:o=>{o.stopPropagation(),t()},"aria-label":"Submit",children:(0,ke.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,ke.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var Ye=require("@magicx-eng/ai-autocomplete-vanilla"),y=require("react"),xt={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 Se({onSubmit:e,onError:t,optionOverrides:o,maskCompletedText:p,apiConfig:a,columns:s=2,dropdownTrigger:l,optionsPosition:d,closeDropdownOnBlur:f,showNonTappableOptions:x,onFocus:L,onBlur:P,value:A,completedParams:C,onChange:v,onParamsChange:B,source:M,setCursor:N}){let n=(0,y.useRef)(null),[_,g]=(0,y.useState)(null),oe=(0,y.useRef)(e);oe.current=e;let z=(0,y.useRef)(t);z.current=t;let U=(0,y.useRef)(v);U.current=v;let K=(0,y.useRef)(B);K.current=B;let R=(0,y.useRef)(L);R.current=L;let Q=(0,y.useRef)(P);Q.current=P;let F=(0,y.useRef)(N);F.current=N,(0,y.useEffect)(()=>{if(typeof document>"u")return;let r=new Ye.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:a,optionOverrides:o,maskCompletedText:p,columns:s,dropdownTrigger:l,optionsPosition:d,closeDropdownOnBlur:f,showNonTappableOptions:x,source:M,value:A,completedParams:C,onSubmit:(...E)=>oe.current?.(...E),onError:(...E)=>z.current?.(...E),onChange:(...E)=>U.current?.(...E),onParamsChange:(...E)=>K.current?.(...E),onFocus:()=>R.current?.(),onBlur:()=>Q.current?.(),setCursor:E=>F.current?.(E)});n.current=r,g(r.getState());let D=r.subscribe(E=>g(E));return()=>{D(),r.destroy(),n.current===r&&(n.current=null)}},[]),(0,y.useEffect)(()=>{A!==void 0&&n.current?.setValue(A)},[A]),(0,y.useEffect)(()=>{C!==void 0&&n.current?.setCompletedParams(C)},[C]);let X=JSON.stringify(a??null),J=(0,y.useRef)(o),H=(0,y.useRef)(0);if(o!==J.current){let r=J.current,D=o,E=Object.keys(r??{}),de=Object.keys(D??{});(E.length!==de.length||de.some(me=>!r?.[me]||D[me]!==r[me]))&&H.current++,J.current=o}(0,y.useEffect)(()=>{n.current?.update({apiConfig:a,optionOverrides:o,dropdownTrigger:l,optionsPosition:d,closeDropdownOnBlur:f,showNonTappableOptions:x})},[X,H.current,l,d,f,x]);let Z=(0,y.useRef)(null);Z.current===null&&(Z.current={handleTextChange:r=>n.current?.handleTextChange(r),handleKeyDown:r=>{let D="nativeEvent"in r?r.nativeEvent:r;n.current?.handleKeyDown(D)},setFocused:r=>n.current?.setFocused(r),startEditingParam:r=>n.current?.startEditingParam(r),exitEditMode:()=>n.current?.exitEditMode(),handleCaretAfterInput:r=>n.current?.handleCaretAfterInput(r),handleCaretMove:r=>n.current?.handleCaretMove(r),replaceEditingRange:r=>n.current?.replaceEditingRange(r)??!1,setActivePill:r=>n.current?.setActivePill(r),removeLastParam:()=>n.current?.removeLastParam(),clearNewParamId:()=>n.current?.clearNewParamId(),reset:()=>n.current?.reset(),selectOption:r=>n.current?.selectOption(r),setActiveDropdownIndex:r=>n.current?.setActiveDropdownIndex(r),handleFocus:()=>n.current?.setFocused(!0),handleBlur:()=>n.current?.setFocused(!1)});let I=Z.current,re=(0,y.useCallback)(r=>{let D=r.target.value,de=D.length>0&&!r.nativeEvent?.isComposing&&D[0]!==D[0].toUpperCase()?D[0].toUpperCase()+D.slice(1):D;n.current?.handleTextChange(de)},[]),se=(0,y.useCallback)(r=>{n.current?.handleKeyDown(r.nativeEvent)},[]),ae=n.current,c=_??xt,i=A!==void 0?A:c.text,u=C!==void 0?C:c.completedParams,h=c.actionableSuggestions,k=h[0],b=ae?.listboxId??"",T=c.activeDropdownIndex>=0&&ae?`${b}-option-${c.activeDropdownIndex}`:void 0,W=c.editingParam,Y=W?{type:W.suggestionType,text:W.suggestionPlaceholder,required:!0,options:W.options}:null,he=Y??k,Pe=Y?[Y]:h,be=!ae||c.isLoading&&!c.editingParam&&!c.inSelectionAnimation;return{completedParams:u,suggestionPills:h,setActivePill:I.setActivePill,removeLastParam:I.removeLastParam,segments:c.segments,newParamId:c.newParamId,clearNewParamId:I.clearNewParamId,suggestions:c.suggestions,activeIndex:c.activeDropdownIndex,isReady:c.isReady,isLoading:be,isFocused:c.isFocused,isDropdownOpen:c.isDropdownOpen,isActivePillSelected:c.isActivePillSelected,placeholderText:c.placeholderText,listboxId:b,error:c.error,handleTextChange:I.handleTextChange,handleKeyDown:I.handleKeyDown,setFocused:I.setFocused,editingParam:W,editingAnchor:c.editingAnchor,caretOffset:c.caretOffset,startEditingParam:I.startEditingParam,exitEditMode:I.exitEditMode,handleCaretAfterInput:I.handleCaretAfterInput,handleCaretMove:I.handleCaretMove,replaceEditingRange:I.replaceEditingRange,inputProps:{value:i,placeholder:c.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:I.handleFocus,onBlur:I.handleBlur,role:"combobox","aria-expanded":c.isDropdownOpen,"aria-activedescendant":T,"aria-autocomplete":"list","aria-controls":b},reset:I.reset,dropdownProps:{suggestions:he?[{...he,options:c.filteredOptions}]:[],activeIndex:c.activeDropdownIndex,onSelect:I.selectOption,onHighlight:I.setActiveDropdownIndex,isOpen:c.isDropdownOpen,id:b,pills:Pe,activeSelected:c.isActivePillSelected,onPillClick:I.setActivePill,isLoading:be,hasTabbedToHighlight:c.hasTabbedToHighlight,isInputEmpty:i.trim().length===0,optionsPosition:d??"below"}}}var O=require("@magicx-eng/ai-autocomplete-vanilla"),m=require("react"),Ae;function vt(){if(Ae!==void 0)return Ae;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ae=e.contentEditable==="plaintext-only",Ae}function et(e){let{segments:t,newParamId:o,editingParam:p,editingAnchor:a,caretOffset:s,placeholderText:l,isFocused:d,isDropdownOpen:f,listboxId:x,activeDescendantId:L,autoFocus:P,handleTextChange:A,handleKeyDown:C,handleCaretAfterInput:v,handleCaretMove:B,startEditingParam:M,replaceEditingRange:N,setFocused:n}=e,_=(0,m.useRef)(null),g=(0,m.useRef)(!1),oe=(0,m.useRef)(""),z=(0,m.useRef)(""),U=(0,m.useRef)(null),K=(0,m.useRef)(0);U.current=s,(0,m.useEffect)(()=>{if(!P)return;let i=_.current;i&&(document.activeElement===i?n(!0):i.focus())},[P,n]),(0,m.useEffect)(()=>{let i=_.current;if(!i)return;let u=i.ownerDocument??document,h=()=>{let k=u.getSelection();if(!k||k.rangeCount===0||!k.anchorNode||!i.contains(k.anchorNode))return;let b=k.anchorNode,Y=(b.nodeType===Node.ELEMENT_NODE?b:b.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(Y&&Y!==p?.id){M(Y);return}performance.now()-K.current<50||B((0,O.getCursorOffset)(i))};return u.addEventListener("selectionchange",h),()=>u.removeEventListener("selectionchange",h)},[p,M,B]),(0,m.useLayoutEffect)(()=>{let i=_.current;i&&(0,O.renderEditableContent)({input:i,segments:t,newParamId:o,editingParamId:p?.id??null,placeholderText:l??"",isFocused:d})},[t,o,p,l,d]),(0,m.useLayoutEffect)(()=>{let i=oe.current,u=o??"";if(oe.current=u,!u||u===i)return;let h=_.current;if(!h)return;h.focus();let k=U.current??(0,O.plainTextLength)(h);(0,O.setCursorOffset)(h,k)},[o]),(0,m.useLayoutEffect)(()=>{let i=z.current,u=p?.id??"";if(z.current=u,!u||u===i||a==null)return;let h=_.current;h&&(0,O.setCursorOffset)(h,a)},[p,a]);let R=(0,m.useCallback)(()=>{if(g.current)return;let i=_.current;if(!i)return;let u=(0,O.extractPlainText)(i),k=u.length>0&&u[0]!==u[0].toUpperCase()?u[0].toUpperCase()+u.slice(1):u;A(k)},[A]),Q=(0,m.useCallback)(()=>{K.current=performance.now(),R();let i=_.current;i&&v((0,O.getCursorOffset)(i))},[R,v]);(0,m.useEffect)(()=>{let i=_.current;if(!i)return;let u=h=>{let k=h,b=k.inputType;if(b==="insertParagraph"||b==="insertLineBreak"||b==="insertFromDrop"){h.preventDefault();return}if(b.startsWith("insert")||b.startsWith("delete")){let T=b.startsWith("delete")?"":k.data??"";N(T)&&h.preventDefault()}};return i.addEventListener("beforeinput",u),()=>i.removeEventListener("beforeinput",u)},[N]);let F=(0,m.useCallback)(()=>{g.current=!0},[]),X=(0,m.useCallback)(()=>{g.current=!1,R()},[R]),J=(0,m.useCallback)(i=>{i.preventDefault();let u=_.current;if(!u)return;let h=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!h)return;let k=u.ownerDocument??document,b=k.getSelection();if(!b||b.rangeCount===0)return;let T=b.getRangeAt(0);if(!u.contains(T.startContainer))return;T.deleteContents();let W=k.createTextNode(h);T.insertNode(W),T.setStartAfter(W),T.collapse(!0),b.removeAllRanges(),b.addRange(T),R()},[R]),H=(0,m.useCallback)(i=>C(i),[C]),Z=(0,m.useCallback)(()=>n(!0),[n]),I=(0,m.useCallback)(()=>n(!1),[n]),re=(0,m.useCallback)(()=>_.current?.focus(),[]),se=(0,m.useCallback)(()=>_.current?.blur(),[]),ae=(0,m.useCallback)(()=>{let i=_.current;return i?(0,O.extractPlainText)(i):""},[]),c=vt()?"plaintext-only":"true";return{inputRef:_,editorProps:{ref:_,contentEditable:c,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":x,"aria-expanded":f,"aria-activedescendant":L,spellCheck:!0,enterKeyHint:"send",onInput:Q,onKeyDown:H,onCompositionStart:F,onCompositionEnd:X,onPaste:J,onFocus:Z,onBlur:I},getPlainText:ae,focus:re,blur:se}}var V=require("react/jsx-runtime");function wt(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var tt=(0,S.forwardRef)(function({onSubmit:t,onError:o,optionOverrides:p,maskCompletedText:a,className:s,apiConfig:l,columns:d,pillPlacement:f="inline",mode:x="auto",optionsPosition:L="below",animations:P=!0,dropdownTrigger:A,closeDropdownOnBlur:C,showNonTappableOptions:v,autoFocus:B=!0,onFocus:M,onBlur:N,value:n,completedParams:_,onChange:g,onParamsChange:oe,submitButton:z},U){let K=(0,S.useRef)(null),R=(0,S.useRef)(null),Q=(0,S.useRef)(()=>{}),F=(0,S.useRef)(null),X=(0,S.useRef)(null);(0,S.useEffect)(()=>{let w=K.current;if(w)return F.current?F.current.setMode(x):F.current=new ue.ModeController(w,x),()=>{F.current?.destroy(),F.current=null}},[x]);let J=(0,S.useCallback)(w=>{let q=X.current?.current;q&&(q.focus(),(0,ue.setCursorOffset)(q,w))},[]),{completedParams:H,suggestionPills:Z,setActivePill:I,segments:re,newParamId:se,clearNewParamId:ae,placeholderText:c,isFocused:i,isDropdownOpen:u,isActivePillSelected:h,isLoading:k,activeIndex:b,listboxId:T,handleTextChange:W,handleKeyDown:Y,setFocused:he,editingParam:Pe,editingAnchor:be,caretOffset:r,startEditingParam:D,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:me,dropdownProps:ot,reset:xe}=Se({onSubmit:w=>Q.current(w),onError:o,optionOverrides:p,maskCompletedText:a,apiConfig:l,columns:d,dropdownTrigger:A,optionsPosition:L,closeDropdownOnBlur:C,showNonTappableOptions:v,onFocus:M,onBlur:N,value:n,completedParams:_,onChange:g,onParamsChange:oe,source:"full-sdk",setCursor:J});(0,S.useEffect)(()=>{if(!se)return;let w=window.setTimeout(()=>ae(),650);return()=>window.clearTimeout(w)},[se,ae]);let at=b>=0?`${T}-option-${b}`:void 0,{inputRef:Ce,editorProps:nt,focus:ve,blur:Fe,getPlainText:He}=et({segments:re,newParamId:se,editingParam:Pe,editingAnchor:be,caretOffset:r,placeholderText:c,isFocused:i,isDropdownOpen:u,listboxId:T,activeDescendantId:at,autoFocus:B,handleTextChange:W,handleKeyDown:Y,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:D,replaceEditingRange:me,setFocused:he});X.current=Ce,(0,S.useLayoutEffect)(()=>{let w=R.current,q=Ce.current;if(!w||!q)return;let ye=()=>{let Me=w.firstElementChild;if(!Me)return;let lt=Me.getBoundingClientRect(),dt=q.getBoundingClientRect();lt.top>=dt.bottom-2?w.setAttribute("data-aia-pill-wrapped",""):w.removeAttribute("data-aia-pill-wrapped")};ye();let Oe=new ResizeObserver(ye);return Oe.observe(q),()=>Oe.disconnect()},[re,Z.length,k,Ce]),(0,S.useImperativeHandle)(U,()=>({focus:ve,blur:Fe,reset:xe,setMode:w=>F.current?.setMode(w)}),[ve,Fe,xe]);let we=!!re.length||H.length>0,Ee=(0,S.useCallback)(()=>{if(!we)return;let w=He(),{rawQuery:q,completedParams:ye}=(0,ue.buildQuery)(w,H);t({query:w.trim(),raw_query:q,completed_params:ye}),xe()},[we,H,t,xe,He]);Q.current=Ee;let it=(0,S.useCallback)(w=>{w.target?.closest("[data-aia-pill]")||ve()},[ve]),rt=f==="inline",st=f==="dropdown";return(0,V.jsxs)("div",{ref:K,className:`magicx-aia ${le.container} ${s??""}`,"data-pill-placement":f,"data-options-position":L,"data-animations":P?"on":"off","data-mode":wt(x),children:[(0,V.jsx)(Ie,{...ot,showPills:st}),(0,V.jsxs)("div",{className:le.inputWrapper,onClick:it,children:[(0,V.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,V.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),rt&&(k||Z.length>0)&&(0,V.jsx)("span",{ref:R,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,V.jsx)(_e,{pills:Z,activePillIndex:0,activeSelected:h,onSelectPill:I,loading:k})})]}),z===null?null:z===void 0?(0,V.jsx)(Ze,{disabled:!we,onClick:Ee}):(0,V.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:w=>{we&&(w.stopPropagation(),Ee())},children:z})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
 //# sourceMappingURL=index.js.map