myoperator-mcp 0.2.266 → 0.2.268

package/dist/index.js

@@ -1635,21 +1635,6 @@ const CreatableMultiSelect = React.forwardRef(
         )
       : availablePresets
 
-    const afterSanitizeDraft = sanitizeInput
-      ? sanitizeInput(inputValue)
-      : inputValue
-    const trimmedDraft = afterSanitizeDraft.trim()
-    const draftForCreate = trimmedDraft
-      ? maxLengthPerItem != null
-        ? trimmedDraft.slice(0, maxLengthPerItem)
-        : trimmedDraft
-      : ""
-
-    const canShowEnterAffordance =
-      Boolean(draftForCreate) &&
-      !value.includes(draftForCreate) &&
-      (maxItems == null || value.length < maxItems)
-
     const panelInputPlaceholder = createHintText ?? placeholder
 
     const summaryTriggerLabel =
@@ -1668,21 +1653,71 @@ const CreatableMultiSelect = React.forwardRef(
                 creatableSelectTriggerVariants({ state: derivedState }),
                 "flex h-auto min-h-[42px] cursor-text items-start gap-2 py-2 text-left"
               )}
-              onClick={() => !disabled && inputRef.current?.focus()}
-              aria-hidden="true"
+              onClick={(e) => {
+                if (disabled) return
+                if ((e.target as HTMLElement).closest("[data-chip-remove]")) {
+                  return
+                }
+                inputRef.current?.focus()
+              }}
             >
-              <span
-                className={cn(
-                  "line-clamp-2 min-w-0 flex-1 text-base",
-                  value.length === 0
-                    ? "text-semantic-text-muted"
-                    : "text-semantic-text-primary"
+              <div className="flex min-h-0 min-w-0 flex-1 flex-wrap content-start items-center gap-1.5">
+                {triggerDisplay === "summary" ? (
+                  <span
+                    className={cn(
+                      "line-clamp-2 flex-1 text-base",
+                      value.length === 0
+                        ? "text-semantic-text-muted"
+                        : "text-semantic-text-primary"
+                    )}
+                  >
+                    {summaryTriggerLabel}
+                  </span>
+                ) : value.length === 0 ? (
+                  <span
+                    className={cn(
+                      "line-clamp-2 flex-1 text-base",
+                      "text-semantic-text-muted"
+                    )}
+                  >
+                    {placeholder}
+                  </span>
+                ) : (
+                  value.map((val) => (
+                    <span
+                      key={val}
+                      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)}
+                      </span>
+                      <button
+                        type="button"
+                        data-chip-remove
+                        disabled={disabled}
+                        aria-label={\`Remove \${labelForValue(val, options)}\`}
+                        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()
+                        }}
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          if (!disabled) removeValue(val)
+                        }}
+                      >
+                        <X className="size-3.5" strokeWidth={2} aria-hidden />
+                      </button>
+                    </span>
+                  ))
                 )}
-              >
-                {summaryTriggerLabel}
-              </span>
+              </div>
               <ChevronDown
-                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
+                className="mt-1 size-4 shrink-0 self-start rotate-180 text-semantic-text-muted opacity-70 transition-transform"
                 aria-hidden
               />
             </div>
@@ -1772,7 +1807,7 @@ const CreatableMultiSelect = React.forwardRef(
                 )}
               </div>
               <ChevronDown
-                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
+                className="mt-1 size-4 shrink-0 self-start text-semantic-text-muted opacity-70 transition-transform"
                 aria-hidden
               />
             </div>
@@ -1806,29 +1841,16 @@ const CreatableMultiSelect = React.forwardRef(
                     onKeyDown={handleKeyDown}
                     disabled={disabled}
                     placeholder={panelInputPlaceholder}
-                    className="min-w-0 flex-1 bg-transparent text-base text-semantic-text-primary outline-none placeholder:text-semantic-text-muted"
+                    className="min-w-0 flex-1 bg-transparent text-sm text-semantic-text-primary outline-none placeholder:text-semantic-text-muted"
                     role="combobox"
                     aria-expanded={isOpen}
                     aria-controls={listboxId}
                     aria-haspopup="listbox"
                     aria-autocomplete="list"
                   />
-                  <button
-                    type="button"
-                    disabled={disabled || !canShowEnterAffordance}
-                    onMouseDown={(e) => {
-                      e.preventDefault()
-                    }}
-                    onClick={() => {
-                      if (draftForCreate) addValue(inputValue)
-                    }}
-                    className={cn(
-                      creatableEnterHintKbdClassName,
-                      "shrink-0 enabled:cursor-pointer enabled:hover:bg-semantic-bg-hover disabled:opacity-50"
-                    )}
-                  >
+                  <kbd className={cn(creatableEnterHintKbdClassName, "shrink-0")}>
                     Enter \u21B5
-                  </button>
+                  </kbd>
                 </div>
               </div>
 
@@ -1839,45 +1861,6 @@ const CreatableMultiSelect = React.forwardRef(
                   </p>
                 ) : null}
 
-                {value.length > 0 ? (
-                  <div
-                    className="flex flex-wrap gap-1.5 border-b border-solid border-semantic-border-layout pb-2.5"
-                    aria-label="Selected values"
-                  >
-                    {value.map((val) => (
-                      <span
-                        key={val}
-                        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)}
-                        </span>
-                        <button
-                          type="button"
-                          data-chip-remove
-                          disabled={disabled}
-                          aria-label={\`Remove \${labelForValue(val, options)}\`}
-                          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()
-                          }}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            if (!disabled) removeValue(val)
-                          }}
-                        >
-                          <X className="size-3.5" strokeWidth={2} aria-hidden />
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                ) : null}
-
                 <div
                   id={listboxId}
                   role="listbox"
@@ -1976,9 +1959,9 @@ export const creatablePrimaryRoleHintRowClassName = cn(
   "flex items-center justify-between border-b border-solid border-semantic-border-layout px-4 py-2"
 )
 
-/** Tone / CreatableMultiSelect: inner hint row (place inside a full-bleed wrapper with \`-mx-4\` + \`border-b\` on the panel). */
+/** Tone / CreatableMultiSelect: inner hint row (place inside a full-bleed wrapper with \`-mx-4\` + \`border-b\` on the panel). Matches Roles' row dimensions for visual parity. */
 export const creatableToneHintRowClassName = cn(
-  "flex min-h-[45px] shrink-0 items-center justify-between gap-2.5 px-4 py-2.5"
+  "flex shrink-0 items-center justify-between gap-2 px-4 py-2"
 )
 
 export interface CreatableSelectOption {
@@ -3172,6 +3155,7 @@ import { Check } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 const blockedNumberKeys = new Set(["e", "E"]);
+const decimalSeparatorKeys = new Set([".", ","]);
 
 /**
  * Input variants for different visual states
@@ -3220,6 +3204,15 @@ export interface InputProps
    * Default \`true\` so amount-like fields cannot accept exponent values such as \`2e22\`.
    */
   preventNumberExponent?: boolean;
+  /**
+   * When \`type="number"\`, whether decimal separators (\`.\` / \`,\`) are allowed.
+   * Default \`true\`. Set \`false\` for whole-number-only fields; uses \`inputMode="numeric"\` on supported agents.
+   */
+  decimal?: boolean;
+  /**
+   * Same as \`decimal\` for whole-number-only fields. If both are set, this wins.
+   */
+  allowDecimal?: boolean;
 }
 
 const Input = React.forwardRef(
@@ -3231,19 +3224,25 @@ const Input = React.forwardRef(
       showCheckIcon,
       hideNumberSpinners = true,
       preventNumberExponent = true,
+      decimal = true,
+      allowDecimal,
       onFocus,
       onBlur,
       onWheel,
       onKeyDown,
       onPaste,
       onChange,
+      step,
       ...props
     }: InputProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
     const [isFocused, setIsFocused] = React.useState(false);
+    const decimalAllowed = allowDecimal ?? decimal;
     const shouldPreventNumberExponent =
       type === "number" && preventNumberExponent;
+    const shouldBlockDecimals =
+      type === "number" && !decimalAllowed;
 
     const inputEl = (
       <input
@@ -3256,6 +3255,16 @@ const Input = React.forwardRef(
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
         )}
         ref={ref}
+        inputMode={
+          type === "number"
+            ? decimalAllowed
+              ? "decimal"
+              : "numeric"
+            : undefined
+        }
+        step={
+          type === "number" && !decimalAllowed ? (step ?? 1) : step
+        }
         onFocus={(e) => {
           setIsFocused(true);
           onFocus?.(e);
@@ -3276,13 +3285,20 @@ const Input = React.forwardRef(
           if (shouldPreventNumberExponent && blockedNumberKeys.has(e.key)) {
             e.preventDefault();
           }
+          if (
+            shouldBlockDecimals &&
+            decimalSeparatorKeys.has(e.key)
+          ) {
+            e.preventDefault();
+          }
           onKeyDown?.(e);
         }}
         onPaste={(e) => {
-          if (
-            shouldPreventNumberExponent &&
-            /[eE]/.test(e.clipboardData.getData("text"))
-          ) {
+          const text = e.clipboardData.getData("text");
+          if (shouldPreventNumberExponent && /[eE]/.test(text)) {
+            e.preventDefault();
+          }
+          if (shouldBlockDecimals && /[.,]/.test(text)) {
             e.preventDefault();
           }
           onPaste?.(e);
@@ -3291,6 +3307,9 @@ const Input = React.forwardRef(
           if (shouldPreventNumberExponent && /[eE]/.test(e.target.value)) {
             return;
           }
+          if (shouldBlockDecimals && /[.,]/.test(e.target.value)) {
+            return;
+          }
           onChange?.(e);
         }}
         {...props}

package/package.json

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