@magicx-eng/ai-autocomplete-react 0.6.6 → 0.6.8

package/README.md

@@ -413,11 +413,12 @@ Override on the container (via `className`). All defaults use `:where()` (zero s
 | `--aia-shadow` | `inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(16,24,40,0.1), 0 8px 24px rgba(16,24,40,0.16)` | `inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5)` | Input container elevation (box-shadow) |
 | `--aia-dropdown-offset` | `13px` | `13px` | Gap between the input box and the dropdown (the dropdown's margin toward the input). |
 | `--aia-footer-gap` | `8px` | `8px` | Breathing room above the dropdown footer (badge / keyboard hints), additive to the dropdown's 8px section gap. |
+| `--aia-footer-chip-bg` | `--aia-surface` at 65% | `--aia-surface` at 65% | Fill behind the footer's keyboard hint and AI-Autocomplete badge. The option list scrolls under the footer, so this keeps both legible over the row passing behind them. `transparent` on the glass surface. |
 | `--aia-dropdown-bg` | — | — | Optional bg color the dropdown's "glass" rim shadow tints toward. Set this to the page background behind the dropdown so the bottom-corner glow blends seamlessly. |
 | `--aia-scrollbar-thumb` | `rgba(0, 0, 0, 0.3)` | `rgba(0, 0, 0, 0.3)` | Color of the option list's scrollbar thumb (Firefox + WebKit). |
 | `--aia-streak-rgb` | `99, 102, 241` | `255, 255, 255` | Comma-separated RGB triplet used to tint the option-selection streak animation (consumed via `rgba(var(--aia-streak-rgb), …)`). |
 | `--aia-streak-glass-bg` | `rgba(99, 102, 241, 0.1)` | `rgba(255, 255, 255, 0.1)` | Background fill for the streak's glass-pill effect. |
-| `--aia-skeleton-bg` | `rgba(189, 189, 189, 0.51)` | `#333539` | Fill color for the loading skeleton bars and the masked text in cached pills/options. |
+| `--aia-skeleton-bg` | `rgba(189, 189, 189, 0.25)` | `#1a1b1d` | Fill color for the loading skeleton bars and the masked text in cached pills/options. |
 
 Legacy `--aia-color-*` variables are still supported as fallbacks.
 

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";var Le=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var mt=Object.prototype.hasOwnProperty;var gt=(e,t)=>{for(var a in t)Le(e,a,{get:t[a],enumerable:!0})},ft=(e,t,a,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ut(t))!mt.call(e,n)&&n!==a&&Le(e,n,{get:()=>t[n],enumerable:!(s=ct(t,n))||s.enumerable});return e};var ht=e=>ft(Le({},"__esModule",{value:!0}),e);var kt={};gt(kt,{AIAutocomplete:()=>at,AIAutocompleteDropdown:()=>Se,useAIAutocomplete:()=>Ce});module.exports=ht(kt);var P=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 Le=Object.defineProperty;var ct=Object.getOwnPropertyDescriptor;var ut=Object.getOwnPropertyNames;var mt=Object.prototype.hasOwnProperty;var gt=(e,t)=>{for(var a in t)Le(e,a,{get:t[a],enumerable:!0})},ht=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ut(t))!mt.call(e,i)&&i!==a&&Le(e,i,{get:()=>t[i],enumerable:!(r=ct(t,i))||r.enumerable});return e};var ft=e=>ht(Le({},"__esModule",{value:!0}),e);var kt={};gt(kt,{AIAutocomplete:()=>at,AIAutocompleteDropdown:()=>Se,useAIAutocomplete:()=>Ce});module.exports=ft(kt);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 {
   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
@@ -158,7 +158,7 @@
     opacity: 0;
   }
 }
-`,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",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};var me=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-0ae03977")){let e=document.createElement("style");e.id="ac-style-0ae03977",e.textContent=`/*
+`,document.head.appendChild(e)}var se={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",aiaPillReveal:"AIAutocomplete-module_aiaPillReveal_wf05b"};var ue=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.
  *
@@ -187,6 +187,7 @@
  */
 :where(.magicx-aia) {
   --aia-primitive-neutral-0: #000000;
+  --aia-primitive-neutral-150: #1a1b1d;
   --aia-primitive-neutral-250: #323232;
   --aia-primitive-neutral-300: #333539;
   --aia-primitive-neutral-400: #4a4a4a;
@@ -197,6 +198,7 @@
   --aia-primitive-neutral-1000: #ffffff;
   --aia-primitive-blue-50: #eef2ff;
   --aia-primitive-neutral-750-a50: rgba(189, 189, 189, 0.51);
+  --aia-primitive-neutral-750-a25: rgba(189, 189, 189, 0.25);
   --aia-primitive-neutral-750-a35: rgba(189, 189, 189, 0.35);
   --aia-primitive-neutral-750-a30: rgba(189, 189, 189, 0.3);
   --aia-primitive-neutral-750-a15: rgba(189, 189, 189, 0.15);
@@ -245,7 +247,9 @@
 
   --aia-color-text-muted: #6b7280; /* off shared palette (slate) */
 
-  --aia-skeleton-bg: var(--aia-primitive-neutral-750-a50);
+  /* Loading bars sit at half the contrast of the surrounding chrome so they
+     read as a placeholder, not as content (a50 -> a25 over the light surface). */
+  --aia-skeleton-bg: var(--aia-primitive-neutral-750-a25);
 
   --aia-streak-rgb: 99, 102, 241; /* off shared palette (indigo effect) */
   --aia-streak-glass-bg: rgba(99, 102, 241, 0.1);
@@ -294,7 +298,9 @@
 
   --aia-color-text-muted: #c1c4cb; /* off shared palette (slate) */
 
-  --aia-skeleton-bg: var(--aia-primitive-neutral-300);
+  /* Half as light against the dark surface as the old neutral-300 fill \u2014 the
+     dark-mode counterpart of the light theme's a50 -> a25 step-down. */
+  --aia-skeleton-bg: var(--aia-primitive-neutral-150);
 
   --aia-streak-rgb: 255, 255, 255;
   --aia-streak-glass-bg: rgba(255, 255, 255, 0.1);
@@ -304,6 +310,71 @@
   --aia-footer-badge-border: var(--aia-primitive-neutral-500);
 }
 
+/* Footer band \u2014 the option list runs *under* the dropdown footer and dissolves
+   into it, instead of being cut off mid-row above it. The band is the footer's
+   own height \u2014 its top inset (--aia-footer-gap) + --aia-footer-row-height:
+   - the options grid reserves it as bottom padding, so the last option can
+     still be scrolled fully clear of the footer;
+   - --aia-grid-overlap-bottom (the band + the 8px stack gap) pulls the footer
+     back up over that band;
+   - the footer's background is the fade: transparent at the band's top edge,
+     the full dropdown surface at its bottom, so a row dissolves as it passes
+     behind. Its hint and branding groups sit on a 65%-opaque fill of their
+     own (--aia-footer-chip-bg) so they stay legible across it.
+   Lives here rather than with the dropdown's own rules so the
+   optionsPosition="above" reset below always follows it in the cascade. */
+[data-aia-dropdown] {
+  /* Height of the footer's hint / branding row \u2014 the badge is its tallest item
+     (the kbd is shorter and centers against it). The band derives from it, so
+     restyling the badge's height keeps the overlap in step. */
+  --aia-footer-row-height: 23px;
+  --aia-footer-band: calc(var(--aia-footer-gap, 8px) + var(--aia-footer-row-height, 23px));
+  --aia-grid-scroll-bottom: var(--aia-footer-band);
+  --aia-grid-overlap-bottom: calc(-1 * (var(--aia-footer-band) + 8px));
+  /* How far above the band the fade starts. */
+  --aia-footer-fade-lead: 20px;
+  --aia-footer-fade-inset: calc(-1 * var(--aia-footer-fade-lead)) 0 0;
+}
+
+/* The reserved band the footer overlaps, kept OUT of \`@layer layout\` on
+   purpose. A consumer reset (\`* { margin: 0; padding: 0 }\`, Tailwind's
+   preflight, \u2026) is unlayered, and an unlayered declaration beats every layered
+   one no matter its specificity \u2014 inside the layer this padding and margin
+   were silently zeroed and the footer had nothing to sit over. */
+[data-aia-dropdown] .aia-grid[data-scroll] {
+  padding-top: var(--aia-grid-scroll-top, 0);
+  padding-bottom: var(--aia-grid-scroll-bottom, 0);
+  margin-top: var(--aia-grid-overlap-top, 0);
+  margin-bottom: var(--aia-grid-overlap-bottom, 0);
+}
+
+/* The fade. Painted on a pseudo-element rather than the footer box so it can
+   start --aia-footer-fade-lead above the band's top edge: a row is then already
+   dissolving by the time it reaches the hint / branding line, instead of
+   crossing it at half strength. --aia-surface is what the dropdown paints
+   itself with, so theming the surface retints the fade with it. z-index: -1
+   keeps it under the footer's own content but, via the footer's stacking
+   context, above the option rows. */
+[data-aia-dropdown] [data-aia-footer]::before {
+  content: "";
+  position: absolute;
+  inset: var(--aia-footer-fade-inset, -20px 0 0);
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--aia-surface, #ffffff));
+}
+
+/* The glass surface is translucent \u2014 there's no solid color to dissolve into,
+   and a fill behind the hint / branding would paint an opaque patch on a
+   frosted panel. Both opt out. */
+[data-aia-dropdown][data-aia-surface="glass"] {
+  --aia-footer-chip-bg: transparent;
+}
+
+[data-aia-dropdown][data-aia-surface="glass"] [data-aia-footer]::before {
+  display: none;
+}
+
 /* 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).
@@ -316,6 +387,13 @@
         hand-copied CSS. */
 :where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown],
 [data-aia-dropdown][data-options-position="above"] {
+  /* The stack is reversed here (the footer sits on top of the list), so the
+     reserved band and the overlap flip to the top edge. */
+  --aia-grid-scroll-bottom: 0px;
+  --aia-grid-overlap-bottom: 0px;
+  --aia-grid-scroll-top: var(--aia-footer-band);
+  --aia-grid-overlap-top: calc(-1 * (var(--aia-footer-band) + 8px));
+  --aia-footer-fade-inset: 0 0 calc(-1 * var(--aia-footer-fade-lead));
   top: auto;
   bottom: 100%;
   margin-top: 0;
@@ -327,6 +405,19 @@
   flex-direction: column-reverse;
 }
 
+/* The footer now sits on top of the list, so its breathing room flips to the
+   bottom edge \u2014 the side the option rows scroll under. */
+:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer],
+[data-aia-dropdown][data-options-position="above"] [data-aia-footer] {
+  padding: 0 8px var(--aia-footer-gap, 8px);
+}
+
+/* ...and the fade runs the other way, out of the footer and down into the list. */
+:where(.magicx-aia[data-options-position="above"]) [data-aia-dropdown] [data-aia-footer]::before,
+[data-aia-dropdown][data-options-position="above"] [data-aia-footer]::before {
+  background: linear-gradient(to top, transparent, var(--aia-surface, #ffffff));
+}
+
 /* Disable all animations when data-animations="off" */
 :where(.magicx-aia[data-animations="off"]) *,
 :where(.magicx-aia[data-animations="off"]) *::before,
@@ -408,7 +499,7 @@
   display: block;
   height: 14px;
   border-radius: 999px;
-  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
+  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
   opacity: 0.5;
   animation: AIAutocompleteDropdown-module_aiaSkeletonPulse_G8W7q 1.4s ease-in-out infinite;
 }
@@ -430,7 +521,7 @@
     opacity: 0.25;
   }
 }
-`,document.head.appendChild(e)}var pe={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 ce=require("@magicx-eng/ai-autocomplete-vanilla"),Ie=require("react");if(typeof document<"u"&&!document.getElementById("ac-style-5259a217")){let e=document.createElement("style");e.id="ac-style-5259a217",e.textContent=`@layer layout {
+`,document.head.appendChild(e)}var de={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 pe=require("@magicx-eng/ai-autocomplete-vanilla"),ke=require("react");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;
@@ -472,7 +563,7 @@
     justify-content: space-around;
   }
 }
-`,document.head.appendChild(e)}var Be=require("react/jsx-runtime");function he({gap:e,align:t="center",justify:a="start",noWrap:s=!1,inline:n=!1,className:o,children:d,...c}){let x=e?{"--aia-cluster-gap":e}:void 0,v={className:o?`aia-cluster ${o}`:"aia-cluster","data-align":t,"data-justify":a,"data-nowrap":s||void 0,"data-inline":n||void 0,style:x,...c};return n?(0,Be.jsx)("span",{...v,children:d}):(0,Be.jsx)("div",{...v,children:d})}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 8px horizontal inset so it stays clear of the
+`,document.head.appendChild(e)}var ze=require("react/jsx-runtime");function he({gap:e,align:t="center",justify:a="start",noWrap:r=!1,inline:i=!1,className:s,children:u,...m}){let g=e?{"--aia-cluster-gap":e}:void 0,w={className:s?`aia-cluster ${s}`:"aia-cluster","data-align":t,"data-justify":a,"data-nowrap":r||void 0,"data-inline":i||void 0,style:g,...m};return i?(0,ze.jsx)("span",{...w,children:u}):(0,ze.jsx)("div",{...w,children:u})}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 8px horizontal inset so it stays clear of the
    dropdown's rounded edges. The top inset (--aia-footer-gap) adds breathing
    room above the hint/branding row so the footer doesn't butt against the last
    option row \u2014 additive to the dropdown's 8px section gap. */
@@ -481,12 +572,29 @@
   flex-direction: column;
   gap: 8px;
   padding: var(--aia-footer-gap, 8px) 8px 0;
+  /* The fade itself lives in appearance.css, on the footer's background.
+     Paints above the rows it covers: option content sits at z-index 2 (see
+     SuggestionItem.module.css) in this same stacking context, so anything
+     lower would end up *behind* the rows. */
+  position: relative;
+  z-index: 3;
+  /* Sitting on top of the list would otherwise swallow clicks and hovers on
+     the rows scrolling under it \u2014 only the branding link needs to be hit. */
+  pointer-events: none;
 }
 
 .DropdownFooter-module_hintGroup_ZzbPf {
   min-width: 0;
 }
 
+/* Re-enabled over the footer's \`pointer-events: none\`: both groups are visible
+   chips sitting on the scroll band, so a click on one must land on the chip
+   rather than falling through to the option row behind it. */
+.DropdownFooter-module_hintGroup_ZzbPf,
+.DropdownFooter-module_brandLink_r4f3R {
+  pointer-events: auto;
+}
+
 .DropdownFooter-module_brandLink_r4f3R {
   display: inline-flex;
   align-items: center;
@@ -496,6 +604,27 @@
   transition: opacity 150ms ease-out;
 }
 
+/* The two content groups carry a solid surface fill so the keyboard hint and
+   the AI-Autocomplete badge stay fully legible over whatever option row is
+   scrolling behind the footer. The inline padding keeps the fill from hugging
+   the glyphs. --aia-footer-chip-bg resolves to \`transparent\` on the glass
+   surface, where there's no solid color to fill with. */
+.DropdownFooter-module_hintGroup_ZzbPf,
+.DropdownFooter-module_brandLink_r4f3R {
+  /* Mixed here rather than declared on the container: a custom property
+     substitutes var() on the element its declaration applies to, so a mix
+     computed upstream would freeze the *theme's* surface and miss a
+     dropdown-level --aia-surface retint. Computed on the footer, it picks up
+     whichever ancestor set the surface. --aia-footer-chip-bg stays the
+     override hook \u2014 consumers set it, and the glass surface zeroes it. */
+  background: var(
+    --aia-footer-chip-bg,
+    color-mix(in srgb, var(--aia-surface, #ffffff) 65%, transparent)
+  );
+  padding-inline: 4px;
+  border-radius: 6px;
+}
+
 .DropdownFooter-module_brandLink_r4f3R:hover {
   opacity: 0.7;
 }
@@ -532,7 +661,7 @@
 .DropdownFooter-module_badge_Fk9vg {
   display: inline-flex;
   align-items: center;
-  height: 23px;
+  height: var(--aia-footer-row-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;
@@ -553,7 +682,7 @@
     justify-content: flex-end;
   }
 }
-`,document.head.appendChild(e)}var Y={footer:"DropdownFooter-module_footer_qQQ7x",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",row:"DropdownFooter-module_row_BgZ6Q"};var q=require("react/jsx-runtime");function Ge({isOptionHighlighted:e=!1,isInputEmpty:t=!1}){let{key:a,hint:s}=(0,ce.getFooterHint)(e,t),[n,o]=(0,Ie.useState)(ce.ATTRIBUTION_URL);return(0,Ie.useEffect)(()=>{o((0,ce.buildAttributionUrl)())},[]),(0,q.jsx)("footer",{className:Y.footer,"data-aia-footer":"",children:(0,q.jsxs)(he,{justify:"between",noWrap:!0,className:Y.row,children:[(0,q.jsxs)(he,{gap:"5px",className:Y.hintGroup,children:[(0,q.jsx)("kbd",{className:Y.key,children:a}),(0,q.jsx)("span",{className:Y.hint,children:s})]}),(0,q.jsxs)("a",{className:Y.brandLink,href:n,target:"_blank",rel:"noopener noreferrer",children:[(0,q.jsx)("span",{className:Y.brand,children:"AI"}),(0,q.jsx)("span",{className:Y.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill
+`,document.head.appendChild(e)}var Y={footer:"DropdownFooter-module_footer_qQQ7x",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",row:"DropdownFooter-module_row_BgZ6Q"};var $=require("react/jsx-runtime");function We({isOptionHighlighted:e=!1,isInputEmpty:t=!1}){let{key:a,hint:r}=(0,pe.getFooterHint)(e,t),[i,s]=(0,ke.useState)(pe.ATTRIBUTION_URL);return(0,ke.useEffect)(()=>{s((0,pe.buildAttributionUrl)())},[]),(0,$.jsx)("footer",{className:Y.footer,"data-aia-footer":"",children:(0,$.jsxs)(he,{justify:"between",noWrap:!0,className:Y.row,children:[(0,$.jsxs)(he,{gap:"5px",className:Y.hintGroup,children:[(0,$.jsx)("kbd",{className:Y.key,children:a}),(0,$.jsx)("span",{className:Y.hint,children:r})]}),(0,$.jsxs)("a",{className:Y.brandLink,href:i,target:"_blank",rel:"noopener noreferrer",children:[(0,$.jsx)("span",{className:Y.brand,children:"AI"}),(0,$.jsx)("span",{className:Y.badge,children:"Autocomplete"})]})]})})}if(typeof document<"u"&&!document.getElementById("ac-style-199d0432")){let e=document.createElement("style");e.id="ac-style-199d0432",e.textContent=`/* ParamPill (Figma "ParamPill") \u2014 unfilled suggestion pill: transparent fill
    with a dashed border. ~28px via 6px padding + 14px text + the 1px border
    (border-box). */
 .ParamPill-module_pill_6Ga7S {
@@ -586,7 +715,7 @@
   pointer-events: none;
   cursor: default;
   color: transparent;
-  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
+  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
   animation: ParamPill-module_skeletonPulse_xGcUy 1.4s ease-in-out infinite;
 }
 
@@ -605,7 +734,7 @@
     opacity: 0;
   }
 }
-`,document.head.appendChild(e)}var oe={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var je=require("react/jsx-runtime"),ze={selected:1,first:.7,next:.4,last:.2};function Ue({label:e,state:t,rounded:a,loading:s,onClick:n}){let o=[oe.pill,a?oe.rounded:"",s?oe.skeleton:""].filter(Boolean).join(" ");return(0,je.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":s?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:o,style:{opacity:ze[t]},onMouseDown:d=>d.preventDefault(),onClick:s?void 0:n,disabled:s,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 {
+`,document.head.appendChild(e)}var oe={pill:"ParamPill-module_pill_6Ga7S",fadeIn:"ParamPill-module_fadeIn_Ux4eQ",rounded:"ParamPill-module_rounded_y7xA9",skeleton:"ParamPill-module_skeleton_57P0T",skeletonPulse:"ParamPill-module_skeletonPulse_xGcUy"};var Ue=require("react/jsx-runtime"),Fe={selected:1,first:.7,next:.4,last:.2};function Ge({label:e,state:t,rounded:a,loading:r,onClick:i}){let s=[oe.pill,a?oe.rounded:"",r?oe.skeleton:""].filter(Boolean).join(" ");return(0,Ue.jsx)("button",{type:"button","data-aia-pill":"","data-aia-loading":r?"":void 0,tabIndex:-1,contentEditable:!1,suppressContentEditableWarning:!0,className:s,style:{opacity:Fe[t]},onMouseDown:u=>u.preventDefault(),onClick:r?void 0:i,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;
@@ -615,7 +744,7 @@
   align-items: center;
   vertical-align: middle;
 }
-`,document.head.appendChild(e)}var Fe={list:"PillList-module_list_qvLqO"};var be=require("react/jsx-runtime"),bt=[125,69];function Ve(e){return e===0?"first":e===1?"next":"last"}function Pe({pills:e,activePillIndex:t,onSelectPill:a,activeSelected:s,rounded:n,loading:o}){return o&&e.length===0?(0,be.jsx)("span",{className:Fe.list,"data-aia-pill-list-loading":"",children:bt.map((d,c)=>(0,be.jsx)("span",{"data-aia-pill-skeleton":"",className:`${oe.pill} ${n?oe.rounded:""} ${oe.skeleton}`,style:{width:d,opacity:ze[Ve(c)]}},`skel-${d}`))}):(0,be.jsx)("span",{className:Fe.list,"data-aia-pill-list-loading":o?"":void 0,children:e.map((d,c)=>{let x=!!s&&c===t;return(0,be.jsx)(Ue,{label:d.text,state:x?"selected":Ve(c),selected:x,rounded:n,loading:o,onClick:()=>a(c)},`${d.type}-${d.text}`)})})}var ie=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 {
+`,document.head.appendChild(e)}var Be={list:"PillList-module_list_qvLqO"};var fe=require("react/jsx-runtime"),bt=[125,69];function je(e){return e===0?"first":e===1?"next":"last"}function Ie({pills:e,activePillIndex:t,onSelectPill:a,activeSelected:r,rounded:i,loading:s}){return s&&e.length===0?(0,fe.jsx)("span",{className:Be.list,"data-aia-pill-list-loading":"",children:bt.map((u,m)=>(0,fe.jsx)("span",{"data-aia-pill-skeleton":"",className:`${oe.pill} ${i?oe.rounded:""} ${oe.skeleton}`,style:{width:u,opacity:Fe[je(m)]}},`skel-${u}`))}):(0,fe.jsx)("span",{className:Be.list,"data-aia-pill-list-loading":s?"":void 0,children:e.map((u,m)=>{let g=!!r&&m===t;return(0,fe.jsx)(Ge,{label:u.text,state:g?"selected":je(m),selected:g,rounded:i,loading:s,onClick:()=>a(m)},`${u.type}-${u.text}`)})})}var Pe=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(
@@ -631,7 +760,9 @@
     grid-auto-rows: min-content;
     align-content: start;
     justify-content: start;
-    padding: var(--aia-grid-scroll-pad, 0);
+    /* The scroll box's reserved band (--aia-grid-scroll-* / --aia-grid-overlap-*)
+       is deliberately NOT declared here \u2014 see the unlayered rule in
+       appearance.css for why. */
     max-height: var(--aia-grid-max-height, 120px);
     overflow-y: auto;
     scrollbar-width: thin;
@@ -647,34 +778,8 @@
     background: var(--aia-scrollbar-thumb, rgba(0, 0, 0, 0.3));
     border-radius: 3px;
   }
-
-  /* Fade wrapper \u2014 bottom gradient overlay shown while the grid overflows
-     below: overflowing options fade into the dropdown surface color. */
-  .aia-grid-fade {
-    position: relative;
-  }
-  .aia-grid-fade::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 30%;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 150ms ease-out;
-    background: linear-gradient(to bottom, transparent, var(--aia-surface, #ffffff));
-  }
-  .aia-grid-fade[data-fade]::after {
-    opacity: 1;
-  }
-
-  /* Glass surface has no solid color to fade into, so skip the fade entirely. */
-  [data-aia-surface="glass"] .aia-grid-fade::after {
-    display: none;
-  }
 }
-`,document.head.appendChild(e)}var Oe=require("react/jsx-runtime");function $e({min:e="16rem",max:t,gap:a,scroll:s=!1,maxHeight:n,fade:o=!1,className:d,children:c,...x}){let v=(0,ie.useRef)(null),[B,A]=(0,ie.useState)(!1);(0,ie.useEffect)(()=>{if(!o)return;let y=v.current;if(!y)return;let D=()=>{A(y.scrollHeight-y.scrollTop-y.clientHeight>1)};y.addEventListener("scroll",D,{passive:!0});let H=new ResizeObserver(D);return H.observe(y),()=>{y.removeEventListener("scroll",D),H.disconnect()}},[o]),(0,ie.useLayoutEffect)(()=>{let y=v.current;!o||!y||A(y.scrollHeight-y.scrollTop-y.clientHeight>1)},[o,c]);let S={"--aia-grid-min":e};t&&(S["--aia-grid-max"]=t),a&&(S["--aia-grid-gap"]=a),n&&(S["--aia-grid-max-height"]=n);let C=(0,Oe.jsx)("div",{ref:v,className:!o&&d?`aia-grid ${d}`:"aia-grid","data-scroll":s||void 0,style:S,...o?{}:x,children:c});return o?(0,Oe.jsx)("div",{className:d?`aia-grid-fade ${d}`:"aia-grid-fade","data-fade":B?"":void 0,...x,children:C}):C}var ue=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 $e=require("react/jsx-runtime");function Ve({min:e="16rem",max:t,gap:a,scroll:r=!1,maxHeight:i,scrollResetKey:s,className:u,children:m,...g}){let w=(0,Pe.useRef)(null);(0,Pe.useLayoutEffect)(()=>{if(s===void 0)return;let P=w.current;P&&(P.scrollTop=0)},[s]);let S={"--aia-grid-min":e};return t&&(S["--aia-grid-max"]=t),a&&(S["--aia-grid-gap"]=a),i&&(S["--aia-grid-max-height"]=i),(0,$e.jsx)("div",{ref:w,className:u?`aia-grid ${u}`:"aia-grid","data-scroll":r||void 0,style:S,...g,children:m})}var ce=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;
@@ -1005,7 +1110,7 @@
    makes the radius render cleanly on each line bar. */
 .SuggestionItem-module_item_d4vpD[data-aia-loading] .SuggestionItem-module_text_yqoh9 {
   color: transparent;
-  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.51)));
+  background: var(--aia-skeleton-bg, var(--aia-pill-bg, rgba(189, 189, 189, 0.25)));
   border-radius: 999px;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
@@ -1024,7 +1129,7 @@
     filter: brightness(0.55);
   }
 }
-`,document.head.appendChild(e)}var G={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 ne=require("react/jsx-runtime");function qe({option:e,isHighlighted:t,onSelect:a,onHighlight:s,id:n,loading:o}){let[d,c]=(0,ue.useState)(!1),x=(0,ue.useRef)(void 0);(0,ue.useEffect)(()=>()=>clearTimeout(x.current),[]);let v=()=>{o||!e.is_tappable||d||(c(!0),a(e),clearTimeout(x.current),x.current=setTimeout(()=>c(!1),500))},B=[G.item,t&&!o?G.highlighted:"",e.is_tappable?G.tappable:G.nonTappable,d?G.pressed:""].filter(Boolean).join(" ");return(0,ne.jsxs)("div",{id:n,role:"option","data-aia-option":"","data-aia-loading":o?"":void 0,"aria-selected":t,className:B,tabIndex:o||!e.is_tappable?-1:0,onClick:v,onKeyDown:A=>{!o&&e.is_tappable&&(A.key==="Enter"||A.key===" ")&&(A.preventDefault(),v())},onMouseEnter:!o&&e.is_tappable?s:void 0,children:[(0,ne.jsx)("div",{className:G.streaks}),(0,ne.jsx)("div",{className:G.streaksVert}),(0,ne.jsxs)("span",{className:G.content,children:[(0,ne.jsx)("span",{className:G.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,ne.jsx)("span",{className:G.tag,children:e.tag})]})]})}var Me=require("react/jsx-runtime");function Qe({options:e,activeIndex:t,onSelect:a,onHighlight:s,listboxId:n,loading:o}){return(0,Me.jsx)($e,{min:"250px",max:"250px",gap:"0",scroll:!0,fade:!0,children:e.map((d,c)=>(0,Me.jsx)(qe,{option:d,isHighlighted:c===t,onSelect:a,onHighlight:()=>s(c),id:`${n}-option-${c}`,loading:o},d.text))})}if(typeof document<"u"&&!document.getElementById("ac-style-8414cd5f")){let e=document.createElement("style");e.id="ac-style-8414cd5f",e.textContent=`@layer layout {
+`,document.head.appendChild(e)}var K={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:a,onHighlight:r,id:i,loading:s}){let[u,m]=(0,ce.useState)(!1),g=(0,ce.useRef)(void 0);(0,ce.useEffect)(()=>()=>clearTimeout(g.current),[]);let w=()=>{s||!e.is_tappable||u||(m(!0),a(e),clearTimeout(g.current),g.current=setTimeout(()=>m(!1),500))},S=[K.item,t&&!s?K.highlighted:"",e.is_tappable?K.tappable:K.nonTappable,u?K.pressed:""].filter(Boolean).join(" ");return(0,ie.jsxs)("div",{id:i,role:"option","data-aia-option":"","data-aia-loading":s?"":void 0,"aria-selected":t,className:S,tabIndex:s||!e.is_tappable?-1:0,onClick:w,onKeyDown:P=>{!s&&e.is_tappable&&(P.key==="Enter"||P.key===" ")&&(P.preventDefault(),w())},onMouseEnter:!s&&e.is_tappable?r:void 0,children:[(0,ie.jsx)("div",{className:K.streaks}),(0,ie.jsx)("div",{className:K.streaksVert}),(0,ie.jsxs)("span",{className:K.content,children:[(0,ie.jsx)("span",{className:K.text,children:e.icon?`${e.icon} ${e.text}`:e.text}),e.tag&&(0,ie.jsx)("span",{className:K.tag,children:e.tag})]})]})}var Me=require("react/jsx-runtime");function Qe({options:e,activeIndex:t,onSelect:a,onHighlight:r,listboxId:i,loading:s,groupKey:u}){return(0,Me.jsx)(Ve,{min:"250px",max:"1fr",gap:"0",scroll:!0,scrollResetKey:u,children:e.map((m,g)=>(0,Me.jsx)(qe,{option:m,isHighlighted:g===t,onSelect:a,onHighlight:()=>r(g),id:`${i}-option-${g}`,loading:s},m.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;
@@ -1041,7 +1146,7 @@
   }
   /* data-align="stretch" is the flex default \u2014 no rule needed. */
 }
-`,document.head.appendChild(e)}var Ze=require("react/jsx-runtime");function Xe({space:e,align:t="stretch",className:a,children:s,...n}){let o=e?{"--aia-stack-space":e}:void 0;return(0,Ze.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":t,style:o,...n,children:s})}var Q=require("react/jsx-runtime"),xt=[159,119,164];function vt(e){let t=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,s]=(0,me.useState)(t);if((0,me.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let n=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>s(n.matches);return n.addEventListener("change",o),()=>n.removeEventListener("change",o)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function Se({suggestions:e,activeIndex:t,onSelect:a,onHighlight:s,isOpen:n,id:o,className:d,pills:c,onPillClick:x,showPills:v=!0,activeSelected:B=!1,isLoading:A=!1,isInputEmpty:S=!1,optionsPosition:C="below",mode:y}){let D=vt(y),H=D!==void 0,X=e[0]?.options??[],l=!!(c&&c.length>0&&x),_=n&&(X.length>0||v&&l||A),O={suggestions:e,activeIndex:t,pills:c,showPills:v,activeSelected:B,isLoading:A,isInputEmpty:S},j=(0,me.useRef)(O);_&&(j.current=O);let h=_?O:j.current,M=h.suggestions[0]?.options??[],T=h.activeIndex>=0&&!!M[h.activeIndex]?.is_tappable,V=!!(h.pills&&h.pills.length>0&&x),z=h.showPills&&V,te=h.showPills&&!V&&h.isLoading,Z=z||te,N=M.length>0,K=h.isLoading&&!N;return(0,Q.jsx)("div",{id:o,role:"listbox","data-aia-dropdown":"","data-options-position":C,"data-mode":D,"data-aia-loading":h.isLoading?"":void 0,className:`${H?"magicx-aia ":""}${pe.dropdown} ${_?pe.visible:""} ${d??""}`,onMouseDown:b=>b.preventDefault(),children:(0,Q.jsxs)(Xe,{space:"8px",children:[Z&&(0,Q.jsx)(he,{noWrap:!0,className:pe.pillBar,"data-aia-pillbar":"",children:(0,Q.jsx)(Pe,{pills:h.pills??[],activePillIndex:0,activeSelected:h.activeSelected,onSelectPill:x??(()=>{}),rounded:!0,loading:h.isLoading})}),N&&(0,Q.jsx)(Qe,{options:M,activeIndex:h.activeIndex,onSelect:a,onHighlight:s,listboxId:o,loading:h.isLoading}),K&&(0,Q.jsx)("div",{className:pe.skeletonBars,"data-aia-skeleton-bars":"",children:xt.map(b=>(0,Q.jsx)("span",{className:pe.skeletonBar,style:{width:b}},`bar-${b}`))}),(0,Q.jsx)(Ge,{isOptionHighlighted:T,isInputEmpty:h.isInputEmpty})]})})}var ge=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 {
+`,document.head.appendChild(e)}var Xe=require("react/jsx-runtime");function Ze({space:e,align:t="stretch",className:a,children:r,...i}){let s=e?{"--aia-stack-space":e}:void 0;return(0,Xe.jsx)("div",{className:a?`aia-stack ${a}`:"aia-stack","data-align":t,style:s,...i,children:r})}var q=require("react/jsx-runtime"),vt=[159,119,164];function xt(e){let t=()=>typeof window<"u"&&typeof window.matchMedia=="function"&&window.matchMedia("(prefers-color-scheme: dark)").matches,[a,r]=(0,ue.useState)(t);if((0,ue.useEffect)(()=>{if(e!=="auto"||typeof window>"u"||typeof window.matchMedia!="function")return;let i=window.matchMedia("(prefers-color-scheme: dark)"),s=()=>r(i.matches);return i.addEventListener("change",s),()=>i.removeEventListener("change",s)},[e]),e!==void 0)return e==="auto"?a?"dark":"light":e}function Se({suggestions:e,activeIndex:t,onSelect:a,onHighlight:r,isOpen:i,id:s,className:u,pills:m,onPillClick:g,showPills:w=!0,activeSelected:S=!1,isLoading:P=!1,isInputEmpty:D=!1,optionsPosition:T="below",mode:Q}){let G=xt(Q),ee=G!==void 0,Z=e[0]?.options??[],l=!!(m&&m.length>0&&g),y=i&&(Z.length>0||w&&l||P),F={suggestions:e,activeIndex:t,pills:m,showPills:w,activeSelected:S,isLoading:P,isInputEmpty:D},U=(0,ue.useRef)(F);y&&(U.current=F);let b=y?F:U.current,B=b.suggestions[0],M=B?.options??[],E=b.activeIndex>=0&&!!M[b.activeIndex]?.is_tappable,j=!!(b.pills&&b.pills.length>0&&g),L=b.showPills&&j,te=b.showPills&&!j&&b.isLoading,X=L||te,O=M.length>0,H=b.isLoading&&!O;return(0,q.jsx)("div",{id:s,role:"listbox","data-aia-dropdown":"","data-options-position":T,"data-mode":G,"data-aia-loading":b.isLoading?"":void 0,className:`${ee?"magicx-aia ":""}${de.dropdown} ${y?de.visible:""} ${u??""}`,onMouseDown:v=>v.preventDefault(),children:(0,q.jsxs)(Ze,{space:"8px",children:[X&&(0,q.jsx)(he,{noWrap:!0,className:de.pillBar,"data-aia-pillbar":"",children:(0,q.jsx)(Ie,{pills:b.pills??[],activePillIndex:0,activeSelected:b.activeSelected,onSelectPill:g??(()=>{}),rounded:!0,loading:b.isLoading})}),O&&(0,q.jsx)(Qe,{options:M,activeIndex:b.activeIndex,onSelect:a,onHighlight:r,listboxId:s,loading:b.isLoading,groupKey:B?`${B.type} ${B.text}`:""}),H&&(0,q.jsx)("div",{className:de.skeletonBars,"data-aia-skeleton-bars":"",children:vt.map(v=>(0,q.jsx)("span",{className:de.skeletonBar,style:{width:v}},`bar-${v}`))}),(0,q.jsx)(We,{isOptionHighlighted:E,isInputEmpty:b.isInputEmpty})]})})}var me=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;
@@ -1076,5 +1181,5 @@
   );
   cursor: default;
 }
-`,document.head.appendChild(e)}var Je={submitButton:"SubmitButton-module_submitButton_otz7H"};var Ae=require("react/jsx-runtime");function Ye({disabled:e,onClick:t}){return(0,Ae.jsx)("button",{type:"button","data-aia-submit":"",className:Je.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),t()},"aria-label":"Submit",children:(0,Ae.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ae.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var et=require("@magicx-eng/ai-autocomplete-vanilla"),I=require("react"),wt={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};function Ce({onSubmit:e,onError:t,optionOverrides:a,maskCompletedText:s,apiConfig:n,columns:o=2,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:x,showNonTappableOptions:v,onFocus:B,onBlur:A,value:S,completedParams:C,onChange:y,onParamsChange:D,source:H,setCursor:X}){let l=(0,I.useRef)(null),[_,O]=(0,I.useState)(null),j=(0,I.useRef)(e);j.current=e;let h=(0,I.useRef)(t);h.current=t;let ee=(0,I.useRef)(y);ee.current=y;let M=(0,I.useRef)(D);M.current=D;let T=(0,I.useRef)(B);T.current=B;let V=(0,I.useRef)(A);V.current=A;let z=(0,I.useRef)(X);z.current=X,(0,I.useEffect)(()=>{if(typeof document>"u")return;let r=new et.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:n,optionOverrides:a,maskCompletedText:s,columns:o,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:x,showNonTappableOptions:v,source:H,value:S,completedParams:C,onSubmit:(...E)=>j.current?.(...E),onError:(...E)=>h.current?.(...E),onChange:(...E)=>ee.current?.(...E),onParamsChange:(...E)=>M.current?.(...E),onFocus:()=>T.current?.(),onBlur:()=>V.current?.(),setCursor:E=>z.current?.(E)});l.current=r,O(r.getState());let R=r.subscribe(E=>O(E));return()=>{R(),r.destroy(),l.current===r&&(l.current=null)}},[]),(0,I.useEffect)(()=>{S!==void 0&&l.current?.setValue(S)},[S]),(0,I.useEffect)(()=>{C!==void 0&&l.current?.setCompletedParams(C)},[C]);let te=JSON.stringify(n??null),Z=(0,I.useRef)(a),N=(0,I.useRef)(0);if(a!==Z.current){let r=Z.current,R=a,E=Object.keys(r??{}),de=Object.keys(R??{});(E.length!==de.length||de.some(fe=>!r?.[fe]||R[fe]!==r[fe]))&&N.current++,Z.current=a}(0,I.useEffect)(()=>{l.current?.update({apiConfig:n,optionOverrides:a,dropdownTrigger:d,optionsPosition:c,closeDropdownOnBlur:x,showNonTappableOptions:v})},[te,N.current,d,c,x,v]);let K=(0,I.useRef)(null);K.current===null&&(K.current={handleTextChange:r=>l.current?.handleTextChange(r),handleKeyDown:r=>{let R="nativeEvent"in r?r.nativeEvent:r;l.current?.handleKeyDown(R)},setFocused:r=>l.current?.setFocused(r),startEditingParam:r=>l.current?.startEditingParam(r),exitEditMode:()=>l.current?.exitEditMode(),handleCaretAfterInput:r=>l.current?.handleCaretAfterInput(r),handleCaretMove:r=>l.current?.handleCaretMove(r),replaceEditingRange:r=>l.current?.replaceEditingRange(r)??!1,setActivePill:r=>l.current?.setActivePill(r),removeLastParam:()=>l.current?.removeLastParam(),clearNewParamId:()=>l.current?.clearNewParamId(),reset:()=>l.current?.reset(),selectOption:r=>l.current?.selectOption(r),setActiveDropdownIndex:r=>l.current?.setActiveDropdownIndex(r),handleFocus:()=>l.current?.setFocused(!0),handleBlur:()=>l.current?.setFocused(!1)});let b=K.current,re=(0,I.useCallback)(r=>{let R=r.target.value,de=R.length>0&&!r.nativeEvent?.isComposing&&R[0]!==R[0].toUpperCase()?R[0].toUpperCase()+R.slice(1):R;l.current?.handleTextChange(de)},[]),se=(0,I.useCallback)(r=>{l.current?.handleKeyDown(r.nativeEvent)},[]),ae=l.current,u=_??wt,i=S!==void 0?S:u.text,p=C!==void 0?C:u.completedParams,m=u.actionableSuggestions,w=m[0],g=ae?.listboxId??"",L=u.activeDropdownIndex>=0&&ae?`${g}-option-${u.activeDropdownIndex}`:void 0,W=u.editingParam,J=W?{type:W.suggestionType,text:W.suggestionPlaceholder,required:!0,options:W.options}:null,xe=J??w,Re=J?[J]:m,ve=!ae||u.isLoading&&!u.editingParam&&!u.inSelectionAnimation;return{completedParams:p,suggestionPills:m,setActivePill:b.setActivePill,removeLastParam:b.removeLastParam,segments:u.segments,newParamId:u.newParamId,clearNewParamId:b.clearNewParamId,suggestions:u.suggestions,activeIndex:u.activeDropdownIndex,isReady:u.isReady,isLoading:ve,isFocused:u.isFocused,isDropdownOpen:u.isDropdownOpen,isActivePillSelected:u.isActivePillSelected,placeholderText:u.placeholderText,listboxId:g,error:u.error,handleTextChange:b.handleTextChange,handleKeyDown:b.handleKeyDown,setFocused:b.setFocused,editingParam:W,editingAnchor:u.editingAnchor,caretOffset:u.caretOffset,startEditingParam:b.startEditingParam,exitEditMode:b.exitEditMode,handleCaretAfterInput:b.handleCaretAfterInput,handleCaretMove:b.handleCaretMove,replaceEditingRange:b.replaceEditingRange,inputProps:{value:i,placeholder:u.placeholderText||void 0,onChange:re,onKeyDown:se,onFocus:b.handleFocus,onBlur:b.handleBlur,role:"combobox","aria-expanded":u.isDropdownOpen,"aria-activedescendant":L,"aria-autocomplete":"list","aria-controls":g},reset:b.reset,dropdownProps:{suggestions:xe?[{...xe,options:u.filteredOptions}]:[],activeIndex:u.activeDropdownIndex,onSelect:b.selectOption,onHighlight:b.setActiveDropdownIndex,isOpen:u.isDropdownOpen,id:g,pills:Re,activeSelected:u.isActivePillSelected,onPillClick:b.setActivePill,isLoading:ve,isInputEmpty:i.trim().length===0,optionsPosition:c??"below"}}}var F=require("@magicx-eng/ai-autocomplete-vanilla"),f=require("react"),Ee;function yt(){if(Ee!==void 0)return Ee;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ee=e.contentEditable==="plaintext-only",Ee}function tt(e){let{segments:t,newParamId:a,editingParam:s,editingAnchor:n,caretOffset:o,placeholderText:d,isFocused:c,isDropdownOpen:x,listboxId:v,activeDescendantId:B,autoFocus:A,handleTextChange:S,handleKeyDown:C,handleCaretAfterInput:y,handleCaretMove:D,startEditingParam:H,replaceEditingRange:X,setFocused:l}=e,_=(0,f.useRef)(null),O=(0,f.useRef)(!1),j=(0,f.useRef)(""),h=(0,f.useRef)(""),ee=(0,f.useRef)(null),M=(0,f.useRef)(0);ee.current=o,(0,f.useEffect)(()=>{if(!A)return;let i=_.current;if(!i)return;document.activeElement===i?l(!0):i.focus();let p=i.ownerDocument??document,m=p.getSelection(),w=m&&m.rangeCount>0&&i.contains(m.anchorNode);if(m&&!w){let g=p.createRange();g.selectNodeContents(i),g.collapse(!0),m.removeAllRanges(),m.addRange(g)}},[A,l]),(0,f.useEffect)(()=>{let i=_.current;if(!i)return;let p=i.ownerDocument??document,m=()=>{let w=p.getSelection();if(!w||w.rangeCount===0||!w.anchorNode||!i.contains(w.anchorNode))return;let g=w.anchorNode,J=(g.nodeType===Node.ELEMENT_NODE?g:g.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(J&&J!==s?.id){H(J);return}performance.now()-M.current<50||D((0,F.getCursorOffset)(i))};return p.addEventListener("selectionchange",m),()=>p.removeEventListener("selectionchange",m)},[s,H,D]),(0,f.useLayoutEffect)(()=>{let i=_.current;i&&(0,F.renderEditableContent)({input:i,segments:t,newParamId:a,editingParamId:s?.id??null,placeholderText:d??"",isFocused:c})},[t,a,s,d,c]),(0,f.useLayoutEffect)(()=>{let i=j.current,p=a??"";if(j.current=p,!p||p===i)return;let m=_.current;if(!m)return;m.focus();let w=ee.current??(0,F.plainTextLength)(m);(0,F.setCursorOffset)(m,w)},[a]),(0,f.useLayoutEffect)(()=>{let i=h.current,p=s?.id??"";if(h.current=p,!p||p===i||n==null)return;let m=_.current;m&&(0,F.setCursorOffset)(m,n)},[s,n]);let T=(0,f.useCallback)(()=>{if(O.current)return;let i=_.current;if(!i)return;let p=(0,F.extractPlainText)(i),w=p.length>0&&p[0]!==p[0].toUpperCase()?p[0].toUpperCase()+p.slice(1):p;S(w)},[S]),V=(0,f.useCallback)(()=>{M.current=performance.now(),T();let i=_.current;i&&y((0,F.getCursorOffset)(i))},[T,y]);(0,f.useEffect)(()=>{let i=_.current;if(!i)return;let p=m=>{let w=m,g=w.inputType;if(g==="insertParagraph"||g==="insertLineBreak"||g==="insertFromDrop"){m.preventDefault();return}if(g.startsWith("insert")||g.startsWith("delete")){let L=g.startsWith("delete")?"":w.data??"";X(L)&&m.preventDefault()}};return i.addEventListener("beforeinput",p),()=>i.removeEventListener("beforeinput",p)},[X]);let z=(0,f.useCallback)(()=>{O.current=!0},[]),te=(0,f.useCallback)(()=>{O.current=!1,T()},[T]),Z=(0,f.useCallback)(i=>{i.preventDefault();let p=_.current;if(!p)return;let m=(i.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!m)return;let w=p.ownerDocument??document,g=w.getSelection();if(!g||g.rangeCount===0)return;let L=g.getRangeAt(0);if(!p.contains(L.startContainer))return;L.deleteContents();let W=w.createTextNode(m);L.insertNode(W),L.setStartAfter(W),L.collapse(!0),g.removeAllRanges(),g.addRange(L),T()},[T]),N=(0,f.useCallback)(i=>C(i),[C]),K=(0,f.useCallback)(()=>l(!0),[l]),b=(0,f.useCallback)(()=>l(!1),[l]),re=(0,f.useCallback)(()=>_.current?.focus(),[]),se=(0,f.useCallback)(()=>_.current?.blur(),[]),ae=(0,f.useCallback)(()=>{let i=_.current;return i?(0,F.extractPlainText)(i):""},[]),u=yt()?"plaintext-only":"true";return{inputRef:_,editorProps:{ref:_,contentEditable:u,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":v,"aria-expanded":x,"aria-activedescendant":B,spellCheck:!0,enterKeyHint:"send",onInput:V,onKeyDown:N,onCompositionStart:z,onCompositionEnd:te,onPaste:Z,onFocus:K,onBlur:b},getPlainText:ae,focus:re,blur:se}}var U=require("react/jsx-runtime");function _t(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var at=(0,P.forwardRef)(function({onSubmit:t,onError:a,optionOverrides:s,maskCompletedText:n,className:o,apiConfig:d,columns:c,pillPlacement:x="dropdown",mode:v="auto",optionsPosition:B="below",animations:A=!0,dropdownTrigger:S,closeDropdownOnBlur:C,showNonTappableOptions:y,autoFocus:D=!0,onFocus:H,onBlur:X,value:l,completedParams:_,onChange:O,onParamsChange:j,submitButton:h},ee){let M=(0,P.useRef)(null),T=(0,P.useRef)(null),V=(0,P.useRef)(()=>{}),z=(0,P.useRef)(null),te=(0,P.useRef)(null);(0,P.useEffect)(()=>{let k=M.current;if(k)return z.current?z.current.setMode(v):z.current=new ge.ModeController(k,v),()=>{z.current?.destroy(),z.current=null}},[v]);let Z=(0,P.useCallback)(k=>{let $=te.current?.current;$&&($.focus(),(0,ge.setCursorOffset)($,k))},[]),{completedParams:N,suggestionPills:K,setActivePill:b,segments:re,newParamId:se,clearNewParamId:ae,placeholderText:u,isFocused:i,isDropdownOpen:p,isActivePillSelected:m,isLoading:w,activeIndex:g,listboxId:L,handleTextChange:W,handleKeyDown:J,setFocused:xe,editingParam:Re,editingAnchor:ve,caretOffset:r,startEditingParam:R,handleCaretAfterInput:E,handleCaretMove:de,replaceEditingRange:fe,dropdownProps:ot,reset:we}=Ce({onSubmit:k=>V.current(k),onError:a,optionOverrides:s,maskCompletedText:n,apiConfig:d,columns:c,dropdownTrigger:S,optionsPosition:B,closeDropdownOnBlur:C,showNonTappableOptions:y,onFocus:H,onBlur:X,value:l,completedParams:_,onChange:O,onParamsChange:j,source:"full-sdk",setCursor:Z});(0,P.useEffect)(()=>{if(!se)return;let k=window.setTimeout(()=>ae(),650);return()=>window.clearTimeout(k)},[se,ae]);let it=g>=0?`${L}-option-${g}`:void 0,{inputRef:De,editorProps:nt,focus:ye,blur:He,getPlainText:Ne}=tt({segments:re,newParamId:se,editingParam:Re,editingAnchor:ve,caretOffset:r,placeholderText:u,isFocused:i,isDropdownOpen:p,listboxId:L,activeDescendantId:it,autoFocus:D,handleTextChange:W,handleKeyDown:J,handleCaretAfterInput:E,handleCaretMove:de,startEditingParam:R,replaceEditingRange:fe,setFocused:xe});te.current=De,(0,P.useLayoutEffect)(()=>{let k=T.current,$=De.current;if(!k||!$)return;let ke=()=>{let We=k.firstElementChild;if(!We)return;let dt=We.getBoundingClientRect(),pt=$.getBoundingClientRect();dt.top>=pt.bottom-2?k.setAttribute("data-aia-pill-wrapped",""):k.removeAttribute("data-aia-pill-wrapped")};ke();let Ke=new ResizeObserver(ke);return Ke.observe($),()=>Ke.disconnect()},[re,K.length,w,De]),(0,P.useImperativeHandle)(ee,()=>({focus:ye,blur:He,reset:we,setMode:k=>z.current?.setMode(k)}),[ye,He,we]);let _e=!!re.length||N.length>0,Te=(0,P.useCallback)(()=>{if(!_e)return;let k=Ne(),{rawQuery:$,completedParams:ke}=(0,ge.buildQuery)(k,N);t({query:k.trim(),raw_query:$,completed_params:ke}),we()},[_e,N,t,we,Ne]);V.current=Te;let rt=(0,P.useCallback)(k=>{k.target?.closest("[data-aia-pill]")||ye()},[ye]),st=x==="inline",lt=x==="dropdown";return(0,U.jsxs)("div",{ref:M,className:`magicx-aia ${le.container} ${o??""}`,"data-pill-placement":x,"data-options-position":B,"data-animations":A?"on":"off","data-mode":_t(v),children:[(0,U.jsx)(Se,{...ot,showPills:lt}),(0,U.jsxs)("div",{className:le.inputWrapper,onClick:rt,children:[(0,U.jsxs)("div",{className:le.editorArea,"data-aia-editor":"",children:[(0,U.jsx)("div",{...nt,className:le.input,"data-aia-input":""}),st&&(w||K.length>0)&&(0,U.jsx)("span",{ref:T,className:le.pillListContainer,"data-aia-pill-list-container":"",children:(0,U.jsx)(Pe,{pills:K,activePillIndex:0,activeSelected:m,onSelectPill:b,loading:w})})]}),h===null?null:h===void 0?(0,U.jsx)(Ye,{disabled:!_e,onClick:Te}):(0,U.jsx)("span",{"data-aia-submit":"",className:le.submitSlot,onClick:k=>{_e&&(k.stopPropagation(),Te())},children:h})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
+`,document.head.appendChild(e)}var Je={submitButton:"SubmitButton-module_submitButton_otz7H"};var Ae=require("react/jsx-runtime");function Ye({disabled:e,onClick:t}){return(0,Ae.jsx)("button",{type:"button","data-aia-submit":"",className:Je.submitButton,disabled:e,onClick:a=>{a.stopPropagation(),t()},"aria-label":"Submit",children:(0,Ae.jsx)("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",role:"img","aria-label":"Submit",children:(0,Ae.jsx)("path",{d:"M9 14V4M9 4L4 9M9 4L14 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})}var et=require("@magicx-eng/ai-autocomplete-vanilla"),k=require("react"),wt={text:"",completedParams:[],identifiedParams:[],pendingSpan:null,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};function Ce({onSubmit:e,onError:t,optionOverrides:a,maskCompletedText:r,apiConfig:i,columns:s=2,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:g,showNonTappableOptions:w,onFocus:S,onBlur:P,value:D,completedParams:T,onChange:Q,onParamsChange:G,source:ee,setCursor:Z}){let l=(0,k.useRef)(null),[y,F]=(0,k.useState)(null),U=(0,k.useRef)(e);U.current=e;let b=(0,k.useRef)(t);b.current=t;let B=(0,k.useRef)(Q);B.current=Q;let M=(0,k.useRef)(G);M.current=G;let E=(0,k.useRef)(S);E.current=S;let j=(0,k.useRef)(P);j.current=P;let L=(0,k.useRef)(Z);L.current=Z,(0,k.useEffect)(()=>{if(typeof document>"u")return;let n=new et.AIAutocomplete(document.createElement("div"),{renderMode:"headless",apiConfig:i,optionOverrides:a,maskCompletedText:r,columns:s,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:g,showNonTappableOptions:w,source:ee,value:D,completedParams:T,onSubmit:(...A)=>U.current?.(...A),onError:(...A)=>b.current?.(...A),onChange:(...A)=>B.current?.(...A),onParamsChange:(...A)=>M.current?.(...A),onFocus:()=>E.current?.(),onBlur:()=>j.current?.(),setCursor:A=>L.current?.(A)});l.current=n,F(n.getState());let C=n.subscribe(A=>F(A));return()=>{C(),n.destroy(),l.current===n&&(l.current=null)}},[]),(0,k.useEffect)(()=>{D!==void 0&&l.current?.setValue(D)},[D]),(0,k.useEffect)(()=>{T!==void 0&&l.current?.setCompletedParams(T)},[T]);let te=JSON.stringify(i??null),X=(0,k.useRef)(a),O=(0,k.useRef)(0);if(a!==X.current){let n=X.current,C=a,A=Object.keys(n??{}),le=Object.keys(C??{});(A.length!==le.length||le.some(ge=>!n?.[ge]||C[ge]!==n[ge]))&&O.current++,X.current=a}(0,k.useEffect)(()=>{l.current?.update({apiConfig:i,optionOverrides:a,dropdownTrigger:u,optionsPosition:m,closeDropdownOnBlur:g,showNonTappableOptions:w})},[te,O.current,u,m,g,w]);let H=(0,k.useRef)(null);H.current===null&&(H.current={handleTextChange:n=>l.current?.handleTextChange(n),handleKeyDown:n=>{let C="nativeEvent"in n?n.nativeEvent:n;l.current?.handleKeyDown(C)},setFocused:n=>l.current?.setFocused(n),startEditingParam:n=>l.current?.startEditingParam(n),exitEditMode:()=>l.current?.exitEditMode(),handleCaretAfterInput:n=>l.current?.handleCaretAfterInput(n),handleCaretMove:n=>l.current?.handleCaretMove(n),replaceEditingRange:n=>l.current?.replaceEditingRange(n)??!1,setActivePill:n=>l.current?.setActivePill(n),removeLastParam:()=>l.current?.removeLastParam(),clearNewParamId:()=>l.current?.clearNewParamId(),reset:()=>l.current?.reset(),selectOption:n=>l.current?.selectOption(n),setActiveDropdownIndex:n=>l.current?.setActiveDropdownIndex(n),handleFocus:()=>l.current?.setFocused(!0),handleBlur:()=>l.current?.setFocused(!1)});let v=H.current,ne=(0,k.useCallback)(n=>{let C=n.target.value,le=C.length>0&&!n.nativeEvent?.isComposing&&C[0]!==C[0].toUpperCase()?C[0].toUpperCase()+C.slice(1):C;l.current?.handleTextChange(le)},[]),re=(0,k.useCallback)(n=>{l.current?.handleKeyDown(n.nativeEvent)},[]),ae=l.current,p=y??wt,o=D!==void 0?D:p.text,d=T!==void 0?T:p.completedParams,c=p.actionableSuggestions,x=c[0],h=ae?.listboxId??"",R=p.activeDropdownIndex>=0&&ae?`${h}-option-${p.activeDropdownIndex}`:void 0,N=p.editingParam,J=N?{type:N.suggestionType,text:N.suggestionPlaceholder,required:!0,options:N.options}:null,be=J??x,Re=J?[J]:c,ve=!ae||p.isLoading&&!p.editingParam&&!p.inSelectionAnimation;return{completedParams:d,suggestionPills:c,setActivePill:v.setActivePill,removeLastParam:v.removeLastParam,segments:p.segments,newParamId:p.newParamId,clearNewParamId:v.clearNewParamId,suggestions:p.suggestions,activeIndex:p.activeDropdownIndex,isReady:p.isReady,isLoading:ve,isFocused:p.isFocused,isDropdownOpen:p.isDropdownOpen,isActivePillSelected:p.isActivePillSelected,placeholderText:p.placeholderText,listboxId:h,error:p.error,handleTextChange:v.handleTextChange,handleKeyDown:v.handleKeyDown,setFocused:v.setFocused,editingParam:N,editingAnchor:p.editingAnchor,caretOffset:p.caretOffset,startEditingParam:v.startEditingParam,exitEditMode:v.exitEditMode,handleCaretAfterInput:v.handleCaretAfterInput,handleCaretMove:v.handleCaretMove,replaceEditingRange:v.replaceEditingRange,inputProps:{value:o,placeholder:p.placeholderText||void 0,onChange:ne,onKeyDown:re,onFocus:v.handleFocus,onBlur:v.handleBlur,role:"combobox","aria-expanded":p.isDropdownOpen,"aria-activedescendant":R,"aria-autocomplete":"list","aria-controls":h},reset:v.reset,dropdownProps:{suggestions:be?[{...be,options:p.filteredOptions}]:[],activeIndex:p.activeDropdownIndex,onSelect:v.selectOption,onHighlight:v.setActiveDropdownIndex,isOpen:p.isDropdownOpen,id:h,pills:Re,activeSelected:p.isActivePillSelected,onPillClick:v.setActivePill,isLoading:ve,isInputEmpty:o.trim().length===0,optionsPosition:m??"below"}}}var z=require("@magicx-eng/ai-autocomplete-vanilla"),f=require("react"),Ee;function yt(){if(Ee!==void 0)return Ee;if(typeof document>"u")return!1;let e=document.createElement("div");return e.setAttribute("contenteditable","plaintext-only"),Ee=e.contentEditable==="plaintext-only",Ee}function tt(e){let{segments:t,newParamId:a,editingParam:r,editingAnchor:i,caretOffset:s,placeholderText:u,isFocused:m,isDropdownOpen:g,listboxId:w,activeDescendantId:S,autoFocus:P,handleTextChange:D,handleKeyDown:T,handleCaretAfterInput:Q,handleCaretMove:G,startEditingParam:ee,replaceEditingRange:Z,setFocused:l}=e,y=(0,f.useRef)(null),F=(0,f.useRef)(!1),U=(0,f.useRef)(""),b=(0,f.useRef)(""),B=(0,f.useRef)(null),M=(0,f.useRef)(0);B.current=s,(0,f.useEffect)(()=>{if(!P)return;let o=y.current;if(!o)return;document.activeElement===o?l(!0):o.focus();let d=o.ownerDocument??document,c=d.getSelection(),x=c&&c.rangeCount>0&&o.contains(c.anchorNode);if(c&&!x){let h=d.createRange();h.selectNodeContents(o),h.collapse(!0),c.removeAllRanges(),c.addRange(h)}},[P,l]),(0,f.useEffect)(()=>{let o=y.current;if(!o)return;let d=o.ownerDocument??document,c=()=>{let x=d.getSelection();if(!x||x.rangeCount===0||!x.anchorNode||!o.contains(x.anchorNode))return;let h=x.anchorNode,J=(h.nodeType===Node.ELEMENT_NODE?h:h.parentElement)?.closest('strong[data-seg="completed"][data-param-id]')?.dataset.paramId??null;if(J&&J!==r?.id){ee(J);return}performance.now()-M.current<50||G((0,z.getCursorOffset)(o))};return d.addEventListener("selectionchange",c),()=>d.removeEventListener("selectionchange",c)},[r,ee,G]),(0,f.useLayoutEffect)(()=>{let o=y.current;o&&(0,z.renderEditableContent)({input:o,segments:t,newParamId:a,editingParamId:r?.id??null,placeholderText:u??"",isFocused:m})},[t,a,r,u,m]),(0,f.useLayoutEffect)(()=>{let o=U.current,d=a??"";if(U.current=d,!d||d===o)return;let c=y.current;if(!c)return;c.focus();let x=B.current??(0,z.plainTextLength)(c);(0,z.setCursorOffset)(c,x)},[a]),(0,f.useLayoutEffect)(()=>{let o=b.current,d=r?.id??"";if(b.current=d,!d||d===o||i==null)return;let c=y.current;c&&(0,z.setCursorOffset)(c,i)},[r,i]);let E=(0,f.useCallback)(()=>{if(F.current)return;let o=y.current;if(!o)return;let d=(0,z.extractPlainText)(o),x=d.length>0&&d[0]!==d[0].toUpperCase()?d[0].toUpperCase()+d.slice(1):d;D(x)},[D]),j=(0,f.useCallback)(()=>{M.current=performance.now(),E();let o=y.current;o&&Q((0,z.getCursorOffset)(o))},[E,Q]);(0,f.useEffect)(()=>{let o=y.current;if(!o)return;let d=c=>{let x=c,h=x.inputType;if(h==="insertParagraph"||h==="insertLineBreak"||h==="insertFromDrop"){c.preventDefault();return}if(h.startsWith("insert")||h.startsWith("delete")){let R=h.startsWith("delete")?"":x.data??"";Z(R)&&c.preventDefault()}};return o.addEventListener("beforeinput",d),()=>o.removeEventListener("beforeinput",d)},[Z]);let L=(0,f.useCallback)(()=>{F.current=!0},[]),te=(0,f.useCallback)(()=>{F.current=!1,E()},[E]),X=(0,f.useCallback)(o=>{o.preventDefault();let d=y.current;if(!d)return;let c=(o.clipboardData.getData("text/plain")??"").replace(/\r?\n/g," ");if(!c)return;let x=d.ownerDocument??document,h=x.getSelection();if(!h||h.rangeCount===0)return;let R=h.getRangeAt(0);if(!d.contains(R.startContainer))return;R.deleteContents();let N=x.createTextNode(c);R.insertNode(N),R.setStartAfter(N),R.collapse(!0),h.removeAllRanges(),h.addRange(R),E()},[E]),O=(0,f.useCallback)(o=>T(o),[T]),H=(0,f.useCallback)(()=>l(!0),[l]),v=(0,f.useCallback)(()=>l(!1),[l]),ne=(0,f.useCallback)(()=>y.current?.focus(),[]),re=(0,f.useCallback)(()=>y.current?.blur(),[]),ae=(0,f.useCallback)(()=>{let o=y.current;return o?(0,z.extractPlainText)(o):""},[]),p=yt()?"plaintext-only":"true";return{inputRef:y,editorProps:{ref:y,contentEditable:p,suppressContentEditableWarning:!0,tabIndex:0,role:"combobox","aria-autocomplete":"list","aria-haspopup":"listbox","aria-controls":w,"aria-expanded":g,"aria-activedescendant":S,spellCheck:!0,enterKeyHint:"send",onInput:j,onKeyDown:O,onCompositionStart:L,onCompositionEnd:te,onPaste:X,onFocus:H,onBlur:v},getPlainText:ae,focus:ne,blur:re}}var W=require("react/jsx-runtime");function _t(e){return e!=="auto"?e:typeof window>"u"||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}var at=(0,I.forwardRef)(function({onSubmit:t,onError:a,optionOverrides:r,maskCompletedText:i,className:s,apiConfig:u,columns:m,pillPlacement:g="dropdown",mode:w="auto",optionsPosition:S="below",animations:P=!0,dropdownTrigger:D,closeDropdownOnBlur:T,showNonTappableOptions:Q,autoFocus:G=!0,onFocus:ee,onBlur:Z,value:l,completedParams:y,onChange:F,onParamsChange:U,submitButton:b},B){let M=(0,I.useRef)(null),E=(0,I.useRef)(null),j=(0,I.useRef)(()=>{}),L=(0,I.useRef)(null),te=(0,I.useRef)(null);(0,I.useEffect)(()=>{let _=M.current;if(_)return L.current?L.current.setMode(w):L.current=new me.ModeController(_,w),()=>{L.current?.destroy(),L.current=null}},[w]);let X=(0,I.useCallback)(_=>{let V=te.current?.current;V&&(V.focus(),(0,me.setCursorOffset)(V,_))},[]),{completedParams:O,suggestionPills:H,setActivePill:v,segments:ne,newParamId:re,clearNewParamId:ae,placeholderText:p,isFocused:o,isDropdownOpen:d,isActivePillSelected:c,isLoading:x,activeIndex:h,listboxId:R,handleTextChange:N,handleKeyDown:J,setFocused:be,editingParam:Re,editingAnchor:ve,caretOffset:n,startEditingParam:C,handleCaretAfterInput:A,handleCaretMove:le,replaceEditingRange:ge,dropdownProps:ot,reset:xe}=Ce({onSubmit:_=>j.current(_),onError:a,optionOverrides:r,maskCompletedText:i,apiConfig:u,columns:m,dropdownTrigger:D,optionsPosition:S,closeDropdownOnBlur:T,showNonTappableOptions:Q,onFocus:ee,onBlur:Z,value:l,completedParams:y,onChange:F,onParamsChange:U,source:"full-sdk",setCursor:X});(0,I.useEffect)(()=>{if(!re)return;let _=window.setTimeout(()=>ae(),650);return()=>window.clearTimeout(_)},[re,ae]);let it=h>=0?`${R}-option-${h}`:void 0,{inputRef:De,editorProps:nt,focus:we,blur:Oe,getPlainText:He}=tt({segments:ne,newParamId:re,editingParam:Re,editingAnchor:ve,caretOffset:n,placeholderText:p,isFocused:o,isDropdownOpen:d,listboxId:R,activeDescendantId:it,autoFocus:G,handleTextChange:N,handleKeyDown:J,handleCaretAfterInput:A,handleCaretMove:le,startEditingParam:C,replaceEditingRange:ge,setFocused:be});te.current=De,(0,I.useLayoutEffect)(()=>{let _=E.current,V=De.current;if(!_||!V)return;let _e=()=>{let Ke=_.firstElementChild;if(!Ke)return;let dt=Ke.getBoundingClientRect(),pt=V.getBoundingClientRect();dt.top>=pt.bottom-2?_.setAttribute("data-aia-pill-wrapped",""):_.removeAttribute("data-aia-pill-wrapped")};_e();let Ne=new ResizeObserver(_e);return Ne.observe(V),()=>Ne.disconnect()},[ne,H.length,x,De]),(0,I.useImperativeHandle)(B,()=>({focus:we,blur:Oe,reset:xe,setMode:_=>L.current?.setMode(_)}),[we,Oe,xe]);let ye=!!ne.length||O.length>0,Te=(0,I.useCallback)(()=>{if(!ye)return;let _=He(),{rawQuery:V,completedParams:_e}=(0,me.buildQuery)(_,O);t({query:_.trim(),raw_query:V,completed_params:_e}),xe()},[ye,O,t,xe,He]);j.current=Te;let rt=(0,I.useCallback)(_=>{_.target?.closest("[data-aia-pill]")||we()},[we]),st=g==="inline",lt=g==="dropdown";return(0,W.jsxs)("div",{ref:M,className:`magicx-aia ${se.container} ${s??""}`,"data-pill-placement":g,"data-options-position":S,"data-animations":P?"on":"off","data-mode":_t(w),children:[(0,W.jsx)(Se,{...ot,showPills:lt}),(0,W.jsxs)("div",{className:se.inputWrapper,onClick:rt,children:[(0,W.jsxs)("div",{className:se.editorArea,"data-aia-editor":"",children:[(0,W.jsx)("div",{...nt,className:se.input,"data-aia-input":""}),st&&(x||H.length>0)&&(0,W.jsx)("span",{ref:E,className:se.pillListContainer,"data-aia-pill-list-container":"",children:(0,W.jsx)(Ie,{pills:H,activePillIndex:0,activeSelected:c,onSelectPill:v,loading:x})})]}),b===null?null:b===void 0?(0,W.jsx)(Ye,{disabled:!ye,onClick:Te}):(0,W.jsx)("span",{"data-aia-submit":"",className:se.submitSlot,onClick:_=>{ye&&(_.stopPropagation(),Te())},children:b})]})]})});0&&(module.exports={AIAutocomplete,AIAutocompleteDropdown,useAIAutocomplete});
 //# sourceMappingURL=index.js.map