@magicx-eng/ai-autocomplete-react 0.4.1 → 0.5.0

package/README.md

@@ -4,7 +4,7 @@ A React/TypeScript SDK that provides a guided AI-powered autocomplete experience
 
 ## Features
 
-- **Two tiers of integration** — use the full `<AIAutocomplete />` component or go headless with `useAIAutocomplete()` + `<AIAutocompleteDropdown />`
+- **Three tiers of integration** — the full `<AIAutocomplete />` component, `useAIAutocomplete()` + `<AIAutocompleteDropdown />` (our dropdown, your input), or `useAIAutocomplete()` alone (render the dropdown yourself)
 - **Rich inline input (Tier 1)** — a single `contentEditable` surface: typed text, bold completed params, and inline pills share one editing context
 - **Pill-based input** — non-editable inline pills for unfilled parameters, bold inline text for completed ones
 - **Instant exact-match bolding** — typing the full text of an option immediately promotes it to a completed param (no debounced fetch wait). Works in the normal typing flow *and* while re-editing an existing completed param.
@@ -39,12 +39,13 @@ React 17 or later:
 pnpm add react react-dom
 ```
 
-## Two Tiers
+## Three Tiers
 
 | Tier | What you get | What you own | Use when |
 |---|---|---|---|
 | **Tier 1: Full** | `<AIAutocomplete />` — input, dropdown, pills, state | Nothing — drop in and go | You want a complete widget with zero setup |
-| **Tier 2: Headless** | `useAIAutocomplete()` — state, actions, spread props | The input and layout JSX | You need a custom input or want full control over rendering |
+| **Tier 2: Hook + dropdown** | `useAIAutocomplete()` + `<AIAutocompleteDropdown />` | The input element and layout | You need a custom input but want our dropdown UI |
+| **Tier 3: Headless** | `useAIAutocomplete()` alone — state, actions, `dropdownProps` data | Everything, including the dropdown | You need full control over every piece of the UI |
 
 ---
 
@@ -129,9 +130,9 @@ After a completed param is added (by any means — option click, exact-match typ
 
 ---
 
-## Tier 2: Headless
+## Tier 2: Hook + Dropdown
 
-Use the hook and dropdown separately for full control over the input and rendering:
+Use the hook to drive state and render our dropdown; you own the input element and layout:
 
 ```tsx
 import { useAIAutocomplete, AIAutocompleteDropdown } from "@magicx-eng/ai-autocomplete-react";
@@ -151,13 +152,14 @@ function App() {
       handleMySubmit(result);
       reset(); // start a new session
     },
-    apiConfig: { endpoint: "https://api.example.com/ac/suggest", apiKey: "your_api_key" },
+    apiConfig: { apiKey: "your_api_key" },
   });
 
   return (
-    <div>
+    <div style={{ position: "relative" }}>
       <textarea {...inputProps} />
-      <AIAutocompleteDropdown {...dropdownProps} />
+      {/* `mode` styles + themes the dropdown on its own — no wrapper needed */}
+      <AIAutocompleteDropdown {...dropdownProps} mode="auto" />
     </div>
   );
 }
@@ -165,6 +167,56 @@ function App() {
 
 > **Always call `reset()` after handling submit.** It clears the input and rotates the per-session `session_id`. This applies whether the submit was triggered by Enter, a custom button, or any other mechanism.
 
+### Standalone dropdown styling (`mode`)
+
+`<AIAutocompleteDropdown />` reads its design tokens + color mode from a `.magicx-aia` ancestor. When you render it on its own (Tier 2/3), pass **`mode`** (`"light" | "dark" | "auto"`) and it self-scopes those tokens to its own root — no `.magicx-aia` wrapper required. `"auto"` follows `prefers-color-scheme`. Leave `mode` unset only when the dropdown is already inside a `.magicx-aia` element (e.g. Tier 1). `optionsPosition` flows through `dropdownProps`, so above/below placement works with no extra CSS.
+
+### Custom / rich-text inputs
+
+`inputProps` is shaped for a `<textarea>`. For a contentEditable or rich-text editor (Tiptap, ProseMirror, Lexical…), don't spread `inputProps` — call the actions directly: `handleTextChange(text)` on every edit, `setFocused(bool)` on focus/blur, `handleKeyDown(event)` for Arrow/Enter/Tab/Escape while the dropdown is open, and `handleCaretMove(offset)` so arrow keys can move into the dropdown.
+
+---
+
+## Tier 3: Headless
+
+Skip `<AIAutocompleteDropdown />` and render the suggestions UI yourself. `dropdownProps` carries the data + actions — the active suggestion's options, the highlighted index, `isOpen`, and `onSelect` / `onHighlight`:
+
+```tsx
+import { useAIAutocomplete } from "@magicx-eng/ai-autocomplete-react";
+
+function App() {
+  const { inputProps, dropdownProps, reset } = useAIAutocomplete({
+    apiConfig: { apiKey: "your_api_key" },
+  });
+  const { suggestions, activeIndex, isOpen, onSelect, onHighlight } = dropdownProps;
+  const options = suggestions[0]?.options ?? [];
+
+  return (
+    <div style={{ position: "relative" }}>
+      <textarea {...inputProps} />
+      {isOpen && (
+        <ul className="my-dropdown" role="listbox">
+          {options.map((option, i) => (
+            <li
+              key={option.text}
+              role="option"
+              aria-selected={i === activeIndex}
+              onMouseEnter={() => onHighlight(i)}
+              onMouseDown={(e) => {
+                e.preventDefault(); // keep focus in the input
+                onSelect(option);
+              }}
+            >
+              {option.text}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
 ---
 
 ## API Reference
@@ -257,7 +309,7 @@ The SDK handles token refresh transparently: 401 → `getAccessToken` → retry
 
 ### `useAIAutocomplete(options)`
 
-The headless hook for Tier 2. Accepts the same props as `<AIAutocomplete />` except for the rendering-only ones: `className`, `ref`, `pillPlacement`, `mode`, `optionsPosition`, `animations`, and `autoFocus` (those belong to the wrapping component — the hook doesn't own the input element). `onFocus` and `onBlur` are forwarded and fire whenever the consumer-owned textarea's focus changes (they're driven by `inputProps.onFocus` / `inputProps.onBlur`).
+The headless hook for Tier 2 and Tier 3. Accepts the same options as `<AIAutocomplete />` except for the component-only rendering props: `className`, `ref`, `pillPlacement`, `mode`, `animations`, and `autoFocus` (those belong to the wrapping component — the hook doesn't own the input element). `optionsPosition` **is** accepted: it sets the arrow-key direction and flows through `dropdownProps` to the dropdown. `onFocus` and `onBlur` are forwarded and fire whenever the consumer-owned textarea's focus changes (they're driven by `inputProps.onFocus` / `inputProps.onBlur`).
 
 #### Return Value
 
@@ -273,6 +325,8 @@ The headless hook for Tier 2. Accepts the same props as `<AIAutocomplete />` exc
 | `activeIndex` | `number` | Highlighted option index. `-1` = none. |
 | `isLoading` | `boolean` | True when the dropdown should render its loading skeleton — a fetch is in flight, no option-selection animation is playing, and the user is not in re-edit mode (where cached options stay visible). |
 | `isReady` | `boolean` | Server indicates query is complete. |
+| `isDropdownOpen` | `boolean` | Whether the dropdown should be visible. Drive your own dropdown's visibility with this in Tier 3. |
+| `placeholderText` | `string` | Suggested placeholder text for the current step. |
 | `error` | `Error \| null` | Last fetch error. |
 
 **Actions**
@@ -284,16 +338,25 @@ The headless hook for Tier 2. Accepts the same props as `<AIAutocomplete />` exc
 | `clearNewParamId` | `() => void` | Clear shimmer animation state. |
 | `reset` | `() => void` | Clear all state, re-fetch, and start a new session (rotates `session_id`). Call this after handling submit. |
 
+**Input forwarding (custom inputs)** — call these instead of spreading `inputProps` when your input isn't a `<textarea>` (contentEditable / rich-text editors):
+
+| Field | Type | Description |
+|---|---|---|
+| `handleTextChange` | `(text: string) => void` | Forward the input's current plain text on every edit. |
+| `handleKeyDown` | `(e: KeyboardEvent) => void` | Forward a key event so the dropdown can handle Arrow/Enter/Tab/Escape while open. Check `event.defaultPrevented` to see if it was consumed. |
+| `setFocused` | `(focused: boolean) => void` | Notify the engine the input gained or lost focus. |
+| `handleCaretMove` | `(offset: number) => void` | Report the caret position (plain-text offset) so arrow keys can move into the dropdown. |
+
 **Spread Props**
 
 | Field | Type | Description |
 |---|---|---|
 | `inputProps` | `object` | Spread onto a `<textarea>`. Includes `value`, `placeholder`, `onChange`, `onKeyDown`, and ARIA attributes. |
-| `dropdownProps` | `AIAutocompleteDropdownProps` | Spread onto `<AIAutocompleteDropdown />`. Includes options, highlight, selection, pills, and open state. |
+| `dropdownProps` | `AIAutocompleteDropdownProps` | Spread onto `<AIAutocompleteDropdown />`. Carries the options, `activeIndex`, `onSelect` / `onHighlight`, pills, open state, and `optionsPosition` — read these directly to render your own dropdown in Tier 3. |
 
 ### `<AIAutocompleteDropdown />`
 
-The dropdown component for Tier 2. Spread `dropdownProps` from the hook.
+The dropdown component for Tier 2. Spread `dropdownProps` from the hook (and add `mode` when rendering standalone).
 
 | Prop | Type | Description |
 |---|---|---|
@@ -303,6 +366,8 @@ The dropdown component for Tier 2. Spread `dropdownProps` from the hook.
 | `onHighlight` | `(index: number) => void` | Called on mouse hover. |
 | `isOpen` | `boolean` | Whether the dropdown is visible. |
 | `id` | `string` | Listbox ID for ARIA. |
+| `mode?` | `"light" \| "dark" \| "auto"` | Color mode for a **standalone** dropdown — self-scopes the SDK tokens so no `.magicx-aia` wrapper is needed. Leave unset when nested inside a `.magicx-aia` ancestor (e.g. Tier 1). |
+| `optionsPosition?` | `"above" \| "below"` | Where the dropdown opens. Provided via `dropdownProps`; `"above"` reverses the internal layout. Default: `"below"`. |
 | `className?` | `string` | CSS class applied to the dropdown. |
 | `pills?` | `Suggestion[]` | Pills to render inside the dropdown. |
 | `onPillClick?` | `(index: number) => void` | Called when a pill is clicked. |
@@ -398,7 +463,7 @@ The contract is simple: **after the user submits the query, call `reset()`**. Th
 > **Why it matters:** the server uses `session_id` to track each session's history — what the user has been typing sequentially, which options they've selected, and how the query evolved. That context lets the model produce better, more relevant suggestions on subsequent requests within the same session. Calling `reset()` at the right moment (when the user actually submits) keeps that history accurate, so your users get higher-quality results.
 
 - **Tier 1 `<AIAutocomplete />`** does this automatically — it calls `reset()` for you after `onSubmit` returns, for both Enter-key and built-in-button submits.
-- **Tier 2 `useAIAutocomplete()`** — you own the submit flow, so call `reset()` from your `onSubmit` handler (see the example above) or from your custom button after firing `onSubmit`.
+- **Tier 2 & 3 `useAIAutocomplete()`** — you own the submit flow, so call `reset()` from your `onSubmit` handler (see the example above) or from your custom button after firing `onSubmit`.
 
 ## Option Overrides
 

package/dist/index.d.mts

@@ -170,7 +170,7 @@ interface AIAutocompleteDropdownProps {
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
-    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    /** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
     isInputEmpty?: boolean;
     /**
      * Where the dropdown opens relative to the input. When `"above"`, the dropdown
@@ -180,11 +180,22 @@ interface AIAutocompleteDropdownProps {
      * Default: `"below"`.
      */
     optionsPosition?: "above" | "below";
+    /**
+     * Color mode for a **standalone** dropdown. When set, the dropdown scopes the
+     * SDK's design tokens to its own root (adds the `magicx-aia` class +
+     * `data-mode`), so headless consumers don't need to wrap it in a
+     * `.magicx-aia` element. `"auto"` follows `prefers-color-scheme`.
+     *
+     * Leave it unset when the dropdown is rendered inside a `.magicx-aia`
+     * ancestor (e.g. Tier 1, or your own themed wrapper) — it then inherits that
+     * ancestor's tokens and mode, and self-scoping would override them.
+     */
+    mode?: "light" | "dark" | "auto";
 }
 
 declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
 
-declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
+declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 

package/dist/index.d.ts

@@ -170,7 +170,7 @@ interface AIAutocompleteDropdownProps {
     isLoading?: boolean;
     /** Once the user has tabbed to highlight an option, the footer hint switches from "tab to select" to "→ to skip". Provided by `dropdownProps` from the hook. */
     hasTabbedToHighlight?: boolean;
-    /** When the input has no typed text, the footer hint reads "tab to skip" (Tab skips the active pill). Provided by `dropdownProps` from the hook. */
+    /** When the input has no typed text, the footer hint reads "tab to select". Provided by `dropdownProps` from the hook. */
     isInputEmpty?: boolean;
     /**
      * Where the dropdown opens relative to the input. When `"above"`, the dropdown
@@ -180,11 +180,22 @@ interface AIAutocompleteDropdownProps {
      * Default: `"below"`.
      */
     optionsPosition?: "above" | "below";
+    /**
+     * Color mode for a **standalone** dropdown. When set, the dropdown scopes the
+     * SDK's design tokens to its own root (adds the `magicx-aia` class +
+     * `data-mode`), so headless consumers don't need to wrap it in a
+     * `.magicx-aia` element. `"auto"` follows `prefers-color-scheme`.
+     *
+     * Leave it unset when the dropdown is rendered inside a `.magicx-aia`
+     * ancestor (e.g. Tier 1, or your own themed wrapper) — it then inherits that
+     * ancestor's tokens and mode, and self-scoping would override them.
+     */
+    mode?: "light" | "dark" | "auto";
 }
 
 declare const AIAutocomplete: react.ForwardRefExoticComponent<AIAutocompleteProps & react.RefAttributes<AIAutocompleteHandle>>;
 
-declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
+declare function AIAutocompleteDropdown({ suggestions, activeIndex, onSelect, onHighlight, isOpen, id, className, pills, onPillClick, showPills, activeSelected, isLoading, hasTabbedToHighlight, isInputEmpty, optionsPosition, mode, }: AIAutocompleteDropdownProps): react_jsx_runtime.JSX.Element;
 
 declare function useAIAutocomplete({ onSubmit, onError, optionOverrides, maskCompletedText, apiConfig, columns, dropdownTrigger, optionsPosition, closeDropdownOnBlur, showNonTappableOptions, onFocus, onBlur, value: controlledValue, completedParams: controlledParams, onChange: onChangeProp, onParamsChange, source, setCursor, }: UseAIAutocompleteOptions): UseAIAutocompleteReturn;
 

package/dist/index.js

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