myoperator-mcp 0.2.348 → 0.2.350

package/dist/index.js

@@ -1511,6 +1511,11 @@ export interface CreatableMultiSelectProps extends Omit<
    * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
    */
   sanitizeInput?: (raw: string) => string;
+  /**
+   * Applied after \`sanitizeInput\` on typed draft values (e.g. collapse spaces).
+   * Does not affect invalid-character detection.
+   */
+  normalizeInput?: (sanitized: string) => string;
   /** Fired when \`sanitizeInput\` removed one or more characters from the raw input. */
   onInvalidCharacters?: () => void;
   /**
@@ -1600,6 +1605,12 @@ function isValueAlreadySelected(
   });
 }
 
+function restoreInputCursor(input: HTMLInputElement, cursorPosition: number) {
+  window.requestAnimationFrame(() => {
+    input.setSelectionRange(cursorPosition, cursorPosition);
+  });
+}
+
 const CreatableMultiSelect = React.forwardRef(
   (
     {
@@ -1617,6 +1628,7 @@ const CreatableMultiSelect = React.forwardRef(
       showPerItemCharacterCounter = true,
       triggerDisplay = "chips",
       sanitizeInput,
+      normalizeInput,
       onInvalidCharacters,
       onValidInput,
       onInputValueChange,
@@ -1641,6 +1653,17 @@ const CreatableMultiSelect = React.forwardRef(
       maxLengthPerItem
     );
 
+    const normalizeDraftValue = React.useCallback(
+      (raw: string) => {
+        const sanitized = sanitizeInput ? sanitizeInput(raw) : raw;
+        const normalized = normalizeInput ? normalizeInput(sanitized) : sanitized;
+        return maxLengthPerItem != null
+          ? normalized.slice(0, maxLengthPerItem)
+          : normalized;
+      },
+      [maxLengthPerItem, normalizeInput, sanitizeInput]
+    );
+
     const addValue = (val: string) => {
       const isPreset = options.some((o) => o.value === val);
       const afterSanitize = isPreset
@@ -1648,7 +1671,9 @@ const CreatableMultiSelect = React.forwardRef(
         : sanitizeInput
           ? sanitizeInput(val)
           : val;
-      const trimmed = afterSanitize.trim();
+      const afterNormalize =
+        isPreset || !normalizeInput ? afterSanitize : normalizeInput(afterSanitize);
+      const trimmed = afterNormalize.trim();
       if (
         !trimmed ||
         isValueAlreadySelected(
@@ -1837,12 +1862,19 @@ const CreatableMultiSelect = React.forwardRef(
                       if (raw !== sanitized) onInvalidCharacters?.();
                       else onValidInput?.();
                     }
-                    const nextInput =
-                      maxLengthPerItem != null
-                        ? sanitized.slice(0, maxLengthPerItem)
-                        : sanitized;
+                    const nextInput = normalizeDraftValue(raw);
                     setInputValue(nextInput);
                     onInputValueChange?.(nextInput);
+
+                    if (nextInput !== raw) {
+                      const input = e.currentTarget;
+                      const rawCursor = input.selectionStart ?? raw.length;
+                      const nextCursor = Math.min(
+                        normalizeDraftValue(raw.slice(0, rawCursor)).length,
+                        nextInput.length
+                      );
+                      restoreInputCursor(input, nextCursor);
+                    }
                   }}
                   maxLength={maxLengthPerItem}
                   onKeyDown={handleKeyDown}
@@ -2104,6 +2136,12 @@ export const creatableToneHintRowClassName = cn(
   "flex shrink-0 items-center justify-between gap-2 px-4 py-2"
 )
 
+function restoreInputCursor(input: HTMLInputElement, cursorPosition: number) {
+  window.requestAnimationFrame(() => {
+    input.setSelectionRange(cursorPosition, cursorPosition)
+  })
+}
+
 export interface CreatableSelectOption {
   value: string
   label: string
@@ -2183,6 +2221,17 @@ const CreatableSelect = React.forwardRef(
     // Merge forwarded ref with internal ref
     React.useImperativeHandle(ref, () => containerRef.current!)
 
+    const normalizeSearchValue = React.useCallback(
+      (raw: string) => {
+        const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+        const normalized = normalizeComboboxInput
+          ? normalizeComboboxInput(sanitized)
+          : sanitized
+        return maxLength != null ? normalized.slice(0, maxLength) : normalized
+      },
+      [maxLength, normalizeComboboxInput, sanitizeInput]
+    )
+
     const selectedLabel = React.useMemo(() => {
       const found = options.find((o) => o.value === value)
       return found ? found.label : value || ""
@@ -2335,13 +2384,19 @@ const CreatableSelect = React.forwardRef(
                   if (raw !== sanitized) onInvalidCharacters?.()
                   else onValidInput?.()
                 }
-                const next = normalizeComboboxInput
-                  ? normalizeComboboxInput(sanitized)
-                  : sanitized
-                const nextSearch =
-                  maxLength != null ? next.slice(0, maxLength) : next
+                const nextSearch = normalizeSearchValue(raw)
                 setSearch(nextSearch)
                 onInputValueChange?.(nextSearch)
+
+                if (nextSearch !== raw) {
+                  const input = e.currentTarget
+                  const rawCursor = input.selectionStart ?? raw.length
+                  const nextCursor = Math.min(
+                    normalizeSearchValue(raw.slice(0, rawCursor)).length,
+                    nextSearch.length
+                  )
+                  restoreInputCursor(input, nextCursor)
+                }
               }}
               maxLength={maxLength}
               onKeyDown={handleKeyDown}
@@ -5152,6 +5207,28 @@ import { cn } from "@/lib/utils";
 
 const blockedNumberKeys = new Set(["e", "E"]);
 const decimalSeparatorKeys = new Set([".", ","]);
+const consecutiveSpaceInputTypes = new Set([
+  "email",
+  "password",
+  "search",
+  "tel",
+  "text",
+  "url",
+]);
+
+function shouldPreventConsecutiveSpacesForType(
+  type: React.HTMLInputTypeAttribute | undefined
+): boolean {
+  return type == null || consecutiveSpaceInputTypes.has(type);
+}
+
+function collapseConsecutiveSpaces(value: string): string {
+  return value.replace(/ {2,}/g, " ");
+}
+
+function getCollapsedCursorPosition(value: string, cursorPosition: number) {
+  return collapseConsecutiveSpaces(value.slice(0, cursorPosition)).length;
+}
 
 /**
  * Input variants for different visual states
@@ -5209,6 +5286,11 @@ export interface InputProps
    * Same as \`decimal\` for whole-number-only fields. If both are set, this wins.
    */
   allowDecimal?: boolean;
+  /**
+   * Prevents inserting a second consecutive space in text-like inputs while
+   * preserving the user's current cursor position. Defaults to \`true\`.
+   */
+  preventConsecutiveSpaces?: boolean;
 }
 
 const Input = React.forwardRef(
@@ -5222,11 +5304,13 @@ const Input = React.forwardRef(
       preventNumberExponent = true,
       decimal = true,
       allowDecimal,
+      preventConsecutiveSpaces = true,
       onFocus,
       onBlur,
       onWheel,
       onKeyDown,
       onPaste,
+      onBeforeInput,
       onChange,
       step,
       ...props
@@ -5239,6 +5323,8 @@ const Input = React.forwardRef(
       type === "number" && preventNumberExponent;
     const shouldBlockDecimals =
       type === "number" && !decimalAllowed;
+    const shouldPreventConsecutiveSpaces =
+      preventConsecutiveSpaces && shouldPreventConsecutiveSpacesForType(type);
 
     const inputEl = (
       <input
@@ -5302,6 +5388,33 @@ const Input = React.forwardRef(
           }
           onPaste?.(e);
         }}
+        onBeforeInput={(e) => {
+          onBeforeInput?.(e);
+          if (!shouldPreventConsecutiveSpaces || e.defaultPrevented) {
+            return;
+          }
+
+          const nativeEvent = e.nativeEvent as InputEvent;
+          if (nativeEvent.inputType !== "insertText" || nativeEvent.data !== " ") {
+            return;
+          }
+
+          const input = e.currentTarget;
+          const selectionStart = input.selectionStart ?? input.value.length;
+          const selectionEnd = input.selectionEnd ?? selectionStart;
+          const nextValue =
+            input.value.slice(0, selectionStart) +
+            nativeEvent.data +
+            input.value.slice(selectionEnd);
+
+          if (nextValue.includes("  ")) {
+            e.preventDefault();
+            input.setSelectionRange(selectionStart, selectionStart);
+            window.requestAnimationFrame(() => {
+              input.setSelectionRange(selectionStart, selectionStart);
+            });
+          }
+        }}
         onChange={(e) => {
           if (shouldPreventNumberExponent && /[eE]/.test(e.target.value)) {
             return;
@@ -5309,6 +5422,21 @@ const Input = React.forwardRef(
           if (shouldBlockDecimals && /[.,]/.test(e.target.value)) {
             return;
           }
+          if (shouldPreventConsecutiveSpaces && e.target.value.includes("  ")) {
+            const input = e.currentTarget;
+            const rawValue = input.value;
+            const rawCursor = input.selectionStart ?? rawValue.length;
+            const collapsedValue = collapseConsecutiveSpaces(rawValue);
+            const nextCursor = Math.min(
+              getCollapsedCursorPosition(rawValue, rawCursor),
+              collapsedValue.length
+            );
+
+            input.value = collapsedValue;
+            window.requestAnimationFrame(() => {
+              input.setSelectionRange(nextCursor, nextCursor);
+            });
+          }
           onChange?.(e);
         }}
         {...props}
@@ -9351,6 +9479,29 @@ import { Loader2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+const consecutiveSpaceInputTypes = new Set([
+  "email",
+  "password",
+  "search",
+  "tel",
+  "text",
+  "url",
+]);
+
+function shouldPreventConsecutiveSpacesForType(
+  type: React.HTMLInputTypeAttribute | undefined
+): boolean {
+  return type == null || consecutiveSpaceInputTypes.has(type);
+}
+
+function collapseConsecutiveSpaces(value: string): string {
+  return value.replace(/ {2,}/g, " ");
+}
+
+function getCollapsedCursorPosition(value: string, cursorPosition: number) {
+  return collapseConsecutiveSpaces(value.slice(0, cursorPosition)).length;
+}
+
 /**
  * TextField container variants for when icons/prefix/suffix are present
  */
@@ -9453,6 +9604,11 @@ export interface TextFieldProps
   labelClassName?: string;
   /** Additional class for the input container (includes prefix/suffix/icons) */
   inputContainerClassName?: string;
+  /**
+   * Prevents inserting a second consecutive space in text-like inputs while
+   * preserving the user's current cursor position. Defaults to \`true\`.
+   */
+  preventConsecutiveSpaces?: boolean;
 }
 
 const TextField = React.forwardRef(
@@ -9480,10 +9636,12 @@ const TextField = React.forwardRef(
       value,
       defaultValue,
       onChange,
+      onBeforeInput,
       onWheel,
       disabled,
       id,
       type,
+      preventConsecutiveSpaces = true,
       ...props
     }: TextFieldProps,
     ref: React.ForwardedRef<HTMLInputElement>
@@ -9510,9 +9668,27 @@ const TextField = React.forwardRef(
 
     // Derive state from props
     const derivedState = error ? "error" : (state ?? "default");
+    const shouldPreventConsecutiveSpaces =
+      preventConsecutiveSpaces && shouldPreventConsecutiveSpacesForType(type);
 
     // Handle change for both controlled and uncontrolled
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (shouldPreventConsecutiveSpaces && e.target.value.includes("  ")) {
+        const input = e.currentTarget;
+        const rawValue = input.value;
+        const rawCursor = input.selectionStart ?? rawValue.length;
+        const collapsedValue = collapseConsecutiveSpaces(rawValue);
+        const nextCursor = Math.min(
+          getCollapsedCursorPosition(rawValue, rawCursor),
+          collapsedValue.length
+        );
+
+        input.value = collapsedValue;
+        window.requestAnimationFrame(() => {
+          input.setSelectionRange(nextCursor, nextCursor);
+        });
+      }
+
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
@@ -9572,6 +9748,33 @@ const TextField = React.forwardRef(
         maxLength={maxLength}
         value={isControlled ? value : undefined}
         defaultValue={!isControlled ? defaultValue : undefined}
+        onBeforeInput={(e) => {
+          onBeforeInput?.(e);
+          if (!shouldPreventConsecutiveSpaces || e.defaultPrevented) {
+            return;
+          }
+
+          const nativeEvent = e.nativeEvent as InputEvent;
+          if (nativeEvent.inputType !== "insertText" || nativeEvent.data !== " ") {
+            return;
+          }
+
+          const input = e.currentTarget;
+          const selectionStart = input.selectionStart ?? input.value.length;
+          const selectionEnd = input.selectionEnd ?? selectionStart;
+          const nextValue =
+            input.value.slice(0, selectionStart) +
+            nativeEvent.data +
+            input.value.slice(selectionEnd);
+
+          if (nextValue.includes("  ")) {
+            e.preventDefault();
+            input.setSelectionRange(selectionStart, selectionStart);
+            window.requestAnimationFrame(() => {
+              input.setSelectionRange(selectionStart, selectionStart);
+            });
+          }
+        }}
         onChange={handleChange}
         onWheel={
           type === "number"

package/package.json

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