myoperator-mcp 0.2.290 → 0.2.292

package/dist/index.js

@@ -1450,88 +1450,154 @@ ContactListItem.displayName = "ContactListItem";
 
 export { ContactListItem };
 `,
-  "creatable-multi-select": `import * as React from "react"
-import { ChevronDown, Plus, Info, X } from "lucide-react"
+  "creatable-multi-select": `import * as React from "react";
+import { ChevronDown, Plus, Info, X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 import {
   creatableSelectTriggerVariants,
   creatableEnterHintKbdClassName,
   creatablePrimaryRoleHintRowClassName,
-} from "./creatable-select"
+} from "./creatable-select";
 
 /** @deprecated Use \`creatableSelectTriggerVariants\` from \`./creatable-select\` \u2014 aliases the same trigger styles as Primary Role. */
-const creatableMultiSelectTriggerVariants = creatableSelectTriggerVariants
+const creatableMultiSelectTriggerVariants = creatableSelectTriggerVariants;
 
 export interface CreatableMultiSelectOption {
-  value: string
-  label: string
-  disabled?: boolean
+  value: string;
+  label: string;
+  disabled?: boolean;
 }
 
-export interface CreatableMultiSelectProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface CreatableMultiSelectProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> {
   /** Currently selected values */
-  value?: string[]
+  value?: string[];
   /** Callback when values change */
-  onValueChange?: (values: string[]) => void
+  onValueChange?: (values: string[]) => void;
   /** Available preset options */
-  options?: CreatableMultiSelectOption[]
+  options?: CreatableMultiSelectOption[];
   /** Placeholder when no values selected */
-  placeholder?: string
+  placeholder?: string;
   /** Whether the component is disabled */
-  disabled?: boolean
+  disabled?: boolean;
   /** Error state */
-  state?: "default" | "error"
+  state?: "default" | "error";
   /** Helper text shown below the trigger */
-  helperText?: string
+  helperText?: string;
   /**
    * Shown inside the open dropdown (e.g. "Type to create a custom tone").
    * Pair with {@link maxItems} so users see guidance when no preset matches their typing.
    */
-  createHintText?: string
+  createHintText?: string;
   /** Max number of items that can be selected (default: unlimited) */
-  maxItems?: number
+  maxItems?: number;
   /** Max character length per item when typing/creating (default: unlimited) */
-  maxLengthPerItem?: number
+  maxLengthPerItem?: number;
   /**
    * When true (default), shows \`current/max\` under the trigger while typing when \`maxLengthPerItem\` is set.
    * Set to false to match Figma (counter lives only in the field flow / not under the control).
    */
-  showPerItemCharacterCounter?: boolean
+  showPerItemCharacterCounter?: boolean;
   /**
    * Closed trigger: show removable chips (default) or a single comma-separated summary line (Figma Tone).
    * While open, the trigger always shows the summary line; selected chips with remove controls appear in the panel.
    */
-  triggerDisplay?: "chips" | "summary"
+  triggerDisplay?: "chips" | "summary";
   /**
    * When set, the text input is transformed (e.g. strip invalid characters).
    * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
    */
-  sanitizeInput?: (raw: string) => string
+  sanitizeInput?: (raw: string) => string;
   /** Fired when \`sanitizeInput\` removed one or more characters from the raw input. */
-  onInvalidCharacters?: () => void
+  onInvalidCharacters?: () => void;
   /**
    * When \`sanitizeInput\` is set, fired on input change if the raw value is already valid.
    * Use to clear validation errors when the user corrects input.
    */
-  onValidInput?: () => void
+  onValidInput?: () => void;
+  /** Fired with the current open-dropdown draft text so parents can validate while typing. */
+  onInputValueChange?: (value: string) => void;
 }
 
 function joinSelectedLabels(
   values: string[],
-  options: CreatableMultiSelectOption[]
+  options: CreatableMultiSelectOption[],
+  sanitizeInput?: (raw: string) => string,
+  maxLengthPerItem?: number
 ): string {
   return values
-    .map((val) => options.find((o) => o.value === val)?.label ?? val)
-    .join(", ")
+    .map((val) => labelForValue(val, options, sanitizeInput, maxLengthPerItem))
+    .join(", ");
+}
+
+function storedValueCandidates(
+  option: CreatableMultiSelectOption,
+  sanitizeInput?: (raw: string) => string,
+  maxLengthPerItem?: number
+): string[] {
+  const values = [option.value];
+  if (sanitizeInput) values.push(sanitizeInput(option.value).trim());
+  if (maxLengthPerItem != null) {
+    values.push(option.value.slice(0, maxLengthPerItem));
+    if (sanitizeInput) {
+      values.push(
+        sanitizeInput(option.value).trim().slice(0, maxLengthPerItem)
+      );
+    }
+  }
+  return Array.from(new Set(values.filter(Boolean)));
 }
 
 function labelForValue(
   val: string,
-  options: CreatableMultiSelectOption[]
+  options: CreatableMultiSelectOption[],
+  sanitizeInput?: (raw: string) => string,
+  maxLengthPerItem?: number
 ): string {
-  return options.find((o) => o.value === val)?.label ?? val
+  const direct = options.find((o) => o.value === val);
+  if (direct) return direct.label;
+  const byStoredForm = options.find((o) =>
+    storedValueCandidates(o, sanitizeInput, maxLengthPerItem).includes(val)
+  );
+  if (byStoredForm) return byStoredForm.label;
+  return val;
+}
+
+/** Whether a preset option is already in the selection (including legacy stored forms). */
+function isOptionSelected(
+  option: CreatableMultiSelectOption,
+  selected: string[],
+  sanitizeInput?: (raw: string) => string,
+  maxLengthPerItem?: number
+): boolean {
+  return storedValueCandidates(option, sanitizeInput, maxLengthPerItem).some(
+    (candidate) => selected.includes(candidate)
+  );
+}
+
+/** Whether a candidate value is already selected (matches raw or legacy preset forms). */
+function isValueAlreadySelected(
+  candidate: string,
+  selected: string[],
+  options: CreatableMultiSelectOption[],
+  sanitizeInput?: (raw: string) => string,
+  maxLengthPerItem?: number
+): boolean {
+  if (selected.includes(candidate)) return true;
+  return options.some((o) => {
+    const candidates = storedValueCandidates(
+      o,
+      sanitizeInput,
+      maxLengthPerItem
+    );
+    return (
+      candidates.includes(candidate) &&
+      candidates.some((stored) => selected.includes(stored))
+    );
+  });
 }
 
 const CreatableMultiSelect = React.forwardRef(
@@ -1553,63 +1619,96 @@ const CreatableMultiSelect = React.forwardRef(
       sanitizeInput,
       onInvalidCharacters,
       onValidInput,
+      onInputValueChange,
       ...props
     }: CreatableMultiSelectProps,
     ref: React.Ref<HTMLDivElement>
   ) => {
-    const [isOpen, setIsOpen] = React.useState(false)
-    const [inputValue, setInputValue] = React.useState("")
-    const containerRef = React.useRef<HTMLDivElement>(null)
-    const inputRef = React.useRef<HTMLInputElement>(null)
-    const listboxId = React.useId()
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState("");
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const listboxId = React.useId();
 
-    React.useImperativeHandle(ref, () => containerRef.current!)
+    React.useImperativeHandle(ref, () => containerRef.current!);
 
-    const derivedState = state === "error" ? "error" : "default"
+    const derivedState = state === "error" ? "error" : "default";
 
-    const selectedSummary = joinSelectedLabels(value, options)
+    const selectedSummary = joinSelectedLabels(
+      value,
+      options,
+      sanitizeInput,
+      maxLengthPerItem
+    );
 
     const addValue = (val: string) => {
-      const afterSanitize = sanitizeInput ? sanitizeInput(val) : val
-      const trimmed = afterSanitize.trim()
-      if (!trimmed || value.includes(trimmed)) return
-      if (maxItems != null && value.length >= maxItems) return
+      const isPreset = options.some((o) => o.value === val);
+      const afterSanitize = isPreset
+        ? val
+        : sanitizeInput
+          ? sanitizeInput(val)
+          : val;
+      const trimmed = afterSanitize.trim();
+      if (
+        !trimmed ||
+        isValueAlreadySelected(
+          trimmed,
+          value,
+          options,
+          sanitizeInput,
+          maxLengthPerItem
+        )
+      ) {
+        return;
+      }
+      if (maxItems != null && value.length >= maxItems) return;
       const toAdd =
-        maxLengthPerItem != null
+        !isPreset && maxLengthPerItem != null
           ? trimmed.slice(0, maxLengthPerItem)
-          : trimmed
+          : trimmed;
       if (toAdd) {
-        onValueChange?.([...value, toAdd])
-        setInputValue("")
+        const nextValue = [...value, toAdd];
+        onValueChange?.(nextValue);
+        setInputValue("");
+        onInputValueChange?.("");
+        const reachedMax =
+          maxItems != null && nextValue.length >= maxItems;
+        if (reachedMax) {
+          setIsOpen(false);
+        } else {
+          requestAnimationFrame(() => inputRef.current?.focus());
+        }
       }
-    }
+    };
 
     const removeValue = (val: string) => {
-      onValueChange?.(value.filter((v) => v !== val))
-    }
+      onValueChange?.(value.filter((v) => v !== val));
+    };
 
     const handleOpen = React.useCallback(() => {
-      if (disabled) return
-      setIsOpen(true)
-      setInputValue("")
-    }, [disabled])
+      if (disabled) return;
+      setIsOpen(true);
+      setInputValue("");
+      onInputValueChange?.("");
+    }, [disabled, onInputValueChange]);
 
     React.useEffect(() => {
-      if (!isOpen) return
-      requestAnimationFrame(() => inputRef.current?.focus())
-    }, [isOpen])
+      if (!isOpen) return;
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }, [isOpen]);
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter") {
-        e.preventDefault()
-        if (inputValue.trim()) addValue(inputValue)
+        e.preventDefault();
+        if (inputValue.trim()) addValue(inputValue);
       } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
-        removeValue(value[value.length - 1])
+        removeValue(value[value.length - 1]);
       } else if (e.key === "Escape") {
-        setIsOpen(false)
-        setInputValue("")
+        setIsOpen(false);
+        setInputValue("");
+        onInputValueChange?.("");
       }
-    }
+    };
 
     // Close on outside click
     React.useEffect(() => {
@@ -1618,34 +1717,45 @@ const CreatableMultiSelect = React.forwardRef(
           containerRef.current &&
           !containerRef.current.contains(e.target as Node)
         ) {
-          setIsOpen(false)
-          setInputValue("")
+          setIsOpen(false);
+          setInputValue("");
+          onInputValueChange?.("");
         }
-      }
-      document.addEventListener("mousedown", handler)
-      return () => document.removeEventListener("mousedown", handler)
-    }, [])
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [onInputValueChange]);
 
     const availablePresets = options.filter(
-      (o) => !value.includes(o.value) && !o.disabled
-    )
-    const trimmedInput = inputValue.trim()
+      (o) =>
+        !isOptionSelected(o, value, sanitizeInput, maxLengthPerItem) &&
+        !o.disabled
+    );
+    const trimmedInput = inputValue.trim();
     const filteredPresets = trimmedInput
       ? availablePresets.filter((o) =>
           o.label.toLowerCase().includes(trimmedInput.toLowerCase())
         )
-      : availablePresets
+      : availablePresets;
 
     const isCustomDraft =
       trimmedInput.length > 0 &&
       !options.some(
         (o) => o.label.toLowerCase() === trimmedInput.toLowerCase()
       ) &&
-      !value.includes(trimmedInput) &&
-      (maxItems == null || value.length < maxItems)
+      !isValueAlreadySelected(
+        trimmedInput,
+        value,
+        options,
+        sanitizeInput,
+        maxLengthPerItem
+      ) &&
+      (maxItems == null || value.length < maxItems);
 
     const summaryTriggerLabel =
-      value.length === 0 ? placeholder : selectedSummary
+      value.length === 0 ? placeholder : selectedSummary;
+
+    const canAddMore = maxItems == null || value.length < maxItems;
 
     return (
       <div
@@ -1661,11 +1771,11 @@ const CreatableMultiSelect = React.forwardRef(
                 "flex h-auto min-h-[42px] cursor-text items-start gap-2 py-2 text-left"
               )}
               onClick={(e) => {
-                if (disabled) return
+                if (disabled) return;
                 if ((e.target as HTMLElement).closest("[data-chip-remove]")) {
-                  return
+                  return;
                 }
-                inputRef.current?.focus()
+                inputRef.current?.focus();
               }}
             >
               <div className="flex min-h-0 min-w-0 flex-1 flex-wrap content-start items-center gap-1.5">
@@ -1676,25 +1786,35 @@ const CreatableMultiSelect = React.forwardRef(
                       className="inline-flex max-w-full items-center gap-0.5 rounded bg-semantic-bg-ui py-1 pl-2 pr-0.5 text-sm text-semantic-text-primary"
                     >
                       <span className="min-w-0 truncate">
-                        {labelForValue(val, options)}
+                        {labelForValue(
+                          val,
+                          options,
+                          sanitizeInput,
+                          maxLengthPerItem
+                        )}
                       </span>
                       <button
                         type="button"
                         data-chip-remove
                         disabled={disabled}
-                        aria-label={\`Remove \${labelForValue(val, options)}\`}
+                        aria-label={\`Remove \${labelForValue(
+                          val,
+                          options,
+                          sanitizeInput,
+                          maxLengthPerItem
+                        )}\`}
                         className={cn(
                           "inline-flex size-6 shrink-0 items-center justify-center rounded text-semantic-text-muted transition-colors",
                           !disabled &&
                             "hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
                         )}
                         onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
+                          e.preventDefault();
+                          e.stopPropagation();
                         }}
                         onClick={(e) => {
-                          e.stopPropagation()
-                          if (!disabled) removeValue(val)
+                          e.stopPropagation();
+                          if (!disabled) removeValue(val);
                         }}
                       >
                         <X className="size-3.5" strokeWidth={2} aria-hidden />
@@ -1711,17 +1831,18 @@ const CreatableMultiSelect = React.forwardRef(
                   type="text"
                   value={inputValue}
                   onChange={(e) => {
-                    const raw = e.target.value
-                    const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+                    const raw = e.target.value;
+                    const sanitized = sanitizeInput ? sanitizeInput(raw) : raw;
                     if (sanitizeInput) {
-                      if (raw !== sanitized) onInvalidCharacters?.()
-                      else onValidInput?.()
+                      if (raw !== sanitized) onInvalidCharacters?.();
+                      else onValidInput?.();
                     }
-                    setInputValue(
+                    const nextInput =
                       maxLengthPerItem != null
                         ? sanitized.slice(0, maxLengthPerItem)
-                        : sanitized
-                    )
+                        : sanitized;
+                    setInputValue(nextInput);
+                    onInputValueChange?.(nextInput);
                   }}
                   maxLength={maxLengthPerItem}
                   onKeyDown={handleKeyDown}
@@ -1755,18 +1876,18 @@ const CreatableMultiSelect = React.forwardRef(
               aria-controls={listboxId}
               aria-disabled={disabled || undefined}
               onKeyDown={(e) => {
-                if (disabled) return
+                if (disabled) return;
                 if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault()
-                  handleOpen()
+                  e.preventDefault();
+                  handleOpen();
                 }
               }}
               onClick={(e) => {
-                if (disabled) return
+                if (disabled) return;
                 if ((e.target as HTMLElement).closest("[data-chip-remove]")) {
-                  return
+                  return;
                 }
-                handleOpen()
+                handleOpen();
               }}
               className={cn(
                 creatableSelectTriggerVariants({ state: derivedState }),
@@ -1802,25 +1923,35 @@ const CreatableMultiSelect = React.forwardRef(
                       className="inline-flex max-w-full items-center gap-0.5 rounded bg-semantic-bg-ui py-1 pl-2 pr-0.5 text-sm text-semantic-text-primary"
                     >
                       <span className="min-w-0 truncate">
-                        {labelForValue(val, options)}
+                        {labelForValue(
+                          val,
+                          options,
+                          sanitizeInput,
+                          maxLengthPerItem
+                        )}
                       </span>
                       <button
                         type="button"
                         data-chip-remove
                         disabled={disabled}
-                        aria-label={\`Remove \${labelForValue(val, options)}\`}
+                        aria-label={\`Remove \${labelForValue(
+                          val,
+                          options,
+                          sanitizeInput,
+                          maxLengthPerItem
+                        )}\`}
                         className={cn(
                           "inline-flex size-6 shrink-0 items-center justify-center rounded text-semantic-text-muted transition-colors",
                           !disabled &&
                             "hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
                         )}
                         onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
+                          e.preventDefault();
+                          e.stopPropagation();
                         }}
                         onClick={(e) => {
-                          e.stopPropagation()
-                          if (!disabled) removeValue(val)
+                          e.stopPropagation();
+                          if (!disabled) removeValue(val);
                         }}
                       >
                         <X className="size-3.5" strokeWidth={2} aria-hidden />
@@ -1838,30 +1969,28 @@ const CreatableMultiSelect = React.forwardRef(
 
           {/* Dropdown panel: decorative hint row, counter, max-selections, presets. Input lives in the trigger above. */}
           {isOpen && (
-            <div
-              className="absolute left-0 top-full z-[9999] mt-1 flex w-full flex-col overflow-hidden rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-sm animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
-            >
+            <div className="absolute left-0 top-full z-[9999] mt-1 flex w-full flex-col overflow-hidden rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-sm animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
               {createHintText ? (
                 <div className={creatablePrimaryRoleHintRowClassName}>
                   <span className="text-sm text-semantic-text-muted">
                     {createHintText}
                   </span>
-                  <kbd className={creatableEnterHintKbdClassName}>
-                    Enter \u21B5
-                  </kbd>
+                  <kbd className={creatableEnterHintKbdClassName}>Enter \u21B5</kbd>
                 </div>
               ) : null}
 
-              {(filteredPresets.length > 0 || isCustomDraft) && (
+              {(canAddMore ||
+                filteredPresets.length > 0 ||
+                isCustomDraft) && (
                 <div
                   className={cn(
                     "flex flex-col px-4",
-                    filteredPresets.length > 0
+                    filteredPresets.length > 0 || (canAddMore && maxItems != null)
                       ? "gap-2.5 pb-4 pt-2.5"
                       : "py-1"
                   )}
                 >
-                  {maxItems != null && filteredPresets.length > 0 ? (
+                  {maxItems != null && canAddMore ? (
                     <p className="m-0 text-sm text-semantic-text-muted">
                       Max selections allowed: {maxItems}
                     </p>
@@ -1880,8 +2009,8 @@ const CreatableMultiSelect = React.forwardRef(
                           role="option"
                           aria-selected={false}
                           onMouseDown={(e) => {
-                            e.preventDefault()
-                            addValue(option.value)
+                            e.preventDefault();
+                            addValue(option.value);
                           }}
                           className="inline-flex items-center gap-2.5 whitespace-nowrap rounded border-0 bg-semantic-bg-ui px-2 py-1 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                         >
@@ -1902,8 +2031,8 @@ const CreatableMultiSelect = React.forwardRef(
                       role="option"
                       aria-selected={false}
                       onMouseDown={(e) => {
-                        e.preventDefault()
-                        addValue(inputValue)
+                        e.preventDefault();
+                        addValue(inputValue);
                       }}
                       className="-mx-4 flex w-[calc(100%+2rem)] items-center gap-2 rounded-none px-4 py-2 text-left text-base text-semantic-text-link outline-none transition-colors cursor-pointer select-none hover:bg-semantic-bg-ui"
                     >
@@ -1919,18 +2048,16 @@ const CreatableMultiSelect = React.forwardRef(
         {helperText && !isOpen ? (
           <div className="mt-1.5 flex items-center gap-1.5">
             <Info className="size-[18px] shrink-0 text-semantic-text-muted" />
-            <p className="m-0 text-sm text-semantic-text-muted">
-              {helperText}
-            </p>
+            <p className="m-0 text-sm text-semantic-text-muted">{helperText}</p>
           </div>
         ) : null}
       </div>
-    )
+    );
   }
-)
-CreatableMultiSelect.displayName = "CreatableMultiSelect"
+);
+CreatableMultiSelect.displayName = "CreatableMultiSelect";
 
-export { CreatableMultiSelect, creatableMultiSelectTriggerVariants }
+export { CreatableMultiSelect, creatableMultiSelectTriggerVariants };
 `,
   "creatable-select": `import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
@@ -1946,7 +2073,7 @@ const creatableSelectTriggerVariants = cva(
         default:
           "border border-solid border-semantic-border-input focus-within:border-semantic-border-input-focus/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary/40 focus-within:border-semantic-error-primary/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-solid border-semantic-error-primary focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
     },
     defaultVariants: {
@@ -2020,6 +2147,8 @@ export interface CreatableSelectProps
    * (nothing was stripped). Use to clear validation errors when the user corrects input.
    */
   onValidInput?: () => void
+  /** Fired with the current open-dropdown draft text so parents can validate while typing. */
+  onInputValueChange?: (value: string) => void
 }
 
 const CreatableSelect = React.forwardRef(
@@ -2038,6 +2167,7 @@ const CreatableSelect = React.forwardRef(
       normalizeComboboxInput,
       onInvalidCharacters,
       onValidInput,
+      onInputValueChange,
       ...props
     }: CreatableSelectProps,
     ref: React.Ref<HTMLDivElement>
@@ -2072,6 +2202,7 @@ const CreatableSelect = React.forwardRef(
       if (disabled) return
       setOpen(true)
       setSearch("")
+      onInputValueChange?.("")
       setHighlightIndex(-1)
       requestAnimationFrame(() => inputRef.current?.focus())
     }
@@ -2081,8 +2212,9 @@ const CreatableSelect = React.forwardRef(
         onValueChange?.(val)
         setOpen(false)
         setSearch("")
+        onInputValueChange?.("")
       },
-      [onValueChange]
+      [onInputValueChange, onValueChange]
     )
 
     const handleCreate = React.useCallback(() => {
@@ -2096,10 +2228,12 @@ const CreatableSelect = React.forwardRef(
         onValueChange?.(value)
         setOpen(false)
         setSearch("")
+        onInputValueChange?.("")
       }
     }, [
       search,
       onValueChange,
+      onInputValueChange,
       maxLength,
       sanitizeInput,
       normalizeComboboxInput,
@@ -2109,6 +2243,8 @@ const CreatableSelect = React.forwardRef(
       if (e.key === "Escape") {
         e.preventDefault()
         setOpen(false)
+        setSearch("")
+        onInputValueChange?.("")
         return
       }
 
@@ -2161,11 +2297,12 @@ const CreatableSelect = React.forwardRef(
           !containerRef.current.contains(e.target as Node)
         ) {
           setOpen(false)
+          onInputValueChange?.("")
         }
       }
       document.addEventListener("mousedown", handler)
       return () => document.removeEventListener("mousedown", handler)
-    }, [open])
+    }, [onInputValueChange, open])
 
     // Reset highlight when filter changes
     React.useEffect(() => {
@@ -2201,9 +2338,10 @@ const CreatableSelect = React.forwardRef(
                 const next = normalizeComboboxInput
                   ? normalizeComboboxInput(sanitized)
                   : sanitized
-                setSearch(
+                const nextSearch =
                   maxLength != null ? next.slice(0, maxLength) : next
-                )
+                setSearch(nextSearch)
+                onInputValueChange?.(nextSearch)
               }}
               maxLength={maxLength}
               onKeyDown={handleKeyDown}
@@ -5465,6 +5603,29 @@ export interface SelectFieldProps {
   id?: string;
   /** Name attribute for form submission */
   name?: string;
+  /**
+   * Fires when the user scrolls to the bottom of the open dropdown.
+   * Use this to load the next page from the server. The callback is
+   * forwarded to SelectContent's \`onViewportScrollEnd\` (debounced by
+   * the native \`scrollend\` event), so it won't fire while a scroll is
+   * still in progress.
+   *
+   * No virtualization is applied \u2014 all loaded items render to the DOM.
+   * For >2k items consumers may notice some lag; virtualization is a
+   * separate ticket if it becomes a real-world problem.
+   */
+  onScrollEnd?: () => void;
+  /**
+   * When true, renders a small "Loading more\u2026" row at the bottom of
+   * the options list. Set this to true while your API call is in flight
+   * so the user knows more items are on the way.
+   */
+  loadingMore?: boolean;
+  /**
+   * When false, prevents \`onScrollEnd\` from firing further and renders
+   * an "End of list" footer row. Default true (keep firing).
+   */
+  hasMore?: boolean;
 }
 
 /**
@@ -5483,6 +5644,34 @@ export interface SelectFieldProps {
  *   required
  * />
  * \`\`\`
+ *
+ * @example Lazy-load on scroll
+ * \`\`\`tsx
+ * const [items, setItems] = useState<SelectOption[]>([]);
+ * const [loadingMore, setLoadingMore] = useState(false);
+ * const [hasMore, setHasMore] = useState(true);
+ * const page = useRef(0);
+ *
+ * const loadNext = async () => {
+ *   if (loadingMore || !hasMore) return;
+ *   setLoadingMore(true);
+ *   const { results, isLast } = await api.fetchTemplates(page.current);
+ *   setItems(prev => [...prev, ...results]);
+ *   setHasMore(!isLast);
+ *   page.current += 1;
+ *   setLoadingMore(false);
+ * };
+ *
+ * useEffect(() => { loadNext(); }, []);
+ *
+ * <SelectField
+ *   label="Template"
+ *   options={items}
+ *   onScrollEnd={loadNext}
+ *   loadingMore={loadingMore}
+ *   hasMore={hasMore}
+ * />
+ * \`\`\`
  */
 const SelectField = React.forwardRef(
   (
@@ -5507,6 +5696,9 @@ const SelectField = React.forwardRef(
       labelClassName,
       id,
       name,
+      onScrollEnd,
+      loadingMore,
+      hasMore,
     }: SelectFieldProps,
     ref: React.Ref<HTMLButtonElement>
   ) => {
@@ -5586,6 +5778,15 @@ const SelectField = React.forwardRef(
 
     const hasGroups = Object.keys(groupedOptions.groups).length > 0;
 
+    // Count rendered options for the "End of list" footer (only show when at least one is visible).
+    const totalRendered =
+      groupedOptions.ungrouped.length +
+      Object.values(groupedOptions.groups).reduce(
+        (sum, items) => sum + items.length,
+        0
+      );
+    const showEndOfList = hasMore === false && totalRendered > 0 && !loadingMore;
+
     // Handle search input change
     const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setSearchQuery(e.target.value);
@@ -5638,7 +5839,9 @@ const SelectField = React.forwardRef(
               <Loader2 className="absolute right-8 size-4 animate-spin text-semantic-text-muted" />
             )}
           </SelectTrigger>
-          <SelectContent>
+          <SelectContent
+            onViewportScrollEnd={hasMore !== false ? onScrollEnd : undefined}
+          >
             {/* Search input */}
             {searchable && (
               <div className="flex items-center gap-2 px-3 pb-1.5 border-b border-solid border-semantic-border-layout">
@@ -5697,6 +5900,28 @@ const SelectField = React.forwardRef(
                   No results found
                 </div>
               )}
+
+            {/* Loading-more row (lazy-load) */}
+            {loadingMore && (
+              <div
+                role="status"
+                aria-live="polite"
+                className="flex items-center justify-center gap-2 py-2 text-sm text-semantic-text-muted"
+              >
+                <Loader2 className="size-3.5 animate-spin" aria-hidden="true" />
+                <span>Loading more\u2026</span>
+              </div>
+            )}
+
+            {/* End-of-list footer (lazy-load) */}
+            {showEndOfList && (
+              <div
+                role="status"
+                className="py-2 text-center text-xs text-semantic-text-muted"
+              >
+                End of list
+              </div>
+            )}
           </SelectContent>
         </Select>
 
@@ -5743,7 +5968,7 @@ const selectTriggerVariants = cva(
         default:
           "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-solid border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-solid border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
     },
     defaultVariants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-mcp",
-  "version": "0.2.290",
+  "version": "0.2.292",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",