myoperator-mcp 0.2.268 → 0.2.269

package/dist/index.js

@@ -1457,7 +1457,7 @@ import { cn } from "@/lib/utils"
 import {
   creatableSelectTriggerVariants,
   creatableEnterHintKbdClassName,
-  creatableToneHintRowClassName,
+  creatablePrimaryRoleHintRowClassName,
 } from "./creatable-select"
 
 /** @deprecated Use \`creatableSelectTriggerVariants\` from \`./creatable-select\` \u2014 aliases the same trigger styles as Primary Role. */
@@ -1629,13 +1629,20 @@ const CreatableMultiSelect = React.forwardRef(
     const availablePresets = options.filter(
       (o) => !value.includes(o.value) && !o.disabled
     )
-    const filteredPresets = inputValue.trim()
+    const trimmedInput = inputValue.trim()
+    const filteredPresets = trimmedInput
       ? availablePresets.filter((o) =>
-          o.label.toLowerCase().includes(inputValue.trim().toLowerCase())
+          o.label.toLowerCase().includes(trimmedInput.toLowerCase())
         )
       : availablePresets
 
-    const panelInputPlaceholder = createHintText ?? placeholder
+    const isCustomDraft =
+      trimmedInput.length > 0 &&
+      !options.some(
+        (o) => o.label.toLowerCase() === trimmedInput.toLowerCase()
+      ) &&
+      !value.includes(trimmedInput) &&
+      (maxItems == null || value.length < maxItems)
 
     const summaryTriggerLabel =
       value.length === 0 ? placeholder : selectedSummary
@@ -1662,27 +1669,7 @@ const CreatableMultiSelect = React.forwardRef(
               }}
             >
               <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>
-                ) : (
+                {triggerDisplay === "chips" &&
                   value.map((val) => (
                     <span
                       key={val}
@@ -1713,9 +1700,45 @@ const CreatableMultiSelect = React.forwardRef(
                         <X className="size-3.5" strokeWidth={2} aria-hidden />
                       </button>
                     </span>
-                  ))
-                )}
+                  ))}
+                {triggerDisplay === "summary" && value.length > 0 ? (
+                  <span className="line-clamp-2 text-base text-semantic-text-primary">
+                    {selectedSummary}
+                  </span>
+                ) : null}
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => {
+                    const raw = e.target.value
+                    const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
+                    if (sanitizeInput) {
+                      if (raw !== sanitized) onInvalidCharacters?.()
+                      else onValidInput?.()
+                    }
+                    setInputValue(
+                      maxLengthPerItem != null
+                        ? sanitized.slice(0, maxLengthPerItem)
+                        : sanitized
+                    )
+                  }}
+                  maxLength={maxLengthPerItem}
+                  onKeyDown={handleKeyDown}
+                  disabled={disabled}
+                  className="min-w-[120px] flex-1 bg-transparent text-base 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"
+                />
               </div>
+              {maxLengthPerItem != null && showPerItemCharacterCounter ? (
+                <span className="mr-2 mt-1 shrink-0 self-start text-sm text-semantic-text-muted">
+                  {inputValue.length}/{maxLengthPerItem}
+                </span>
+              ) : null}
               <ChevronDown
                 className="mt-1 size-4 shrink-0 self-start rotate-180 text-semantic-text-muted opacity-70 transition-transform"
                 aria-hidden
@@ -1813,104 +1836,94 @@ const CreatableMultiSelect = React.forwardRef(
             </div>
           )}
 
-          {/* Dropdown panel: input + limits + presets (Figma: summary row stays above; type-to-create lives here) */}
+          {/* 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="-mx-0 flex shrink-0 flex-col border-b border-solid border-semantic-border-layout">
-                <div className={creatableToneHintRowClassName}>
-                  <input
-                    ref={inputRef}
-                    type="text"
-                    value={inputValue}
-                    onChange={(e) => {
-                      const raw = e.target.value
-                      const sanitized = sanitizeInput ? sanitizeInput(raw) : raw
-                      if (sanitizeInput) {
-                        if (raw !== sanitized) onInvalidCharacters?.()
-                        else onValidInput?.()
-                      }
-                      setInputValue(
-                        maxLengthPerItem != null
-                          ? sanitized.slice(0, maxLengthPerItem)
-                          : sanitized
-                      )
-                    }}
-                    maxLength={maxLengthPerItem}
-                    onKeyDown={handleKeyDown}
-                    disabled={disabled}
-                    placeholder={panelInputPlaceholder}
-                    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"
-                  />
-                  <kbd className={cn(creatableEnterHintKbdClassName, "shrink-0")}>
+              {createHintText ? (
+                <div className={creatablePrimaryRoleHintRowClassName}>
+                  <span className="text-sm text-semantic-text-muted">
+                    {createHintText}
+                  </span>
+                  <kbd className={creatableEnterHintKbdClassName}>
                     Enter \u21B5
                   </kbd>
                 </div>
-              </div>
-
-              <div className="flex flex-col gap-2.5 px-4 pb-4 pt-0">
-                {maxItems != null ? (
-                  <p className="m-0 py-1 text-sm text-semantic-text-muted">
-                    Max selections allowed: {maxItems}
-                  </p>
-                ) : null}
+              ) : null}
 
+              {(filteredPresets.length > 0 || isCustomDraft) && (
                 <div
-                  id={listboxId}
-                  role="listbox"
-                  className="flex flex-wrap gap-1.5"
+                  className={cn(
+                    "flex flex-col px-4",
+                    filteredPresets.length > 0
+                      ? "gap-2.5 pb-4 pt-2.5"
+                      : "py-1"
+                  )}
                 >
-                  {filteredPresets.map((option) => (
+                  {maxItems != null && filteredPresets.length > 0 ? (
+                    <p className="m-0 text-sm text-semantic-text-muted">
+                      Max selections allowed: {maxItems}
+                    </p>
+                  ) : null}
+
+                  {filteredPresets.length > 0 ? (
+                    <div
+                      id={listboxId}
+                      role="listbox"
+                      className="flex flex-wrap gap-1.5"
+                    >
+                      {filteredPresets.map((option) => (
+                        <button
+                          key={option.value}
+                          type="button"
+                          role="option"
+                          aria-selected={false}
+                          onMouseDown={(e) => {
+                            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"
+                        >
+                          <Plus
+                            className="size-2.5 shrink-0 text-semantic-text-muted"
+                            strokeWidth={2}
+                            aria-hidden
+                          />
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  ) : null}
+
+                  {isCustomDraft ? (
                     <button
-                      key={option.value}
                       type="button"
                       role="option"
                       aria-selected={false}
                       onMouseDown={(e) => {
                         e.preventDefault()
-                        addValue(option.value)
+                        addValue(inputValue)
                       }}
-                      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"
+                      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"
                     >
-                      <Plus
-                        className="size-2.5 shrink-0 text-semantic-text-muted"
-                        strokeWidth={2}
-                        aria-hidden
-                      />
-                      {option.label}
+                      Create &ldquo;{trimmedInput}&rdquo;
                     </button>
-                  ))}
+                  ) : null}
                 </div>
-              </div>
+              )}
             </div>
           )}
         </div>
 
-        {maxLengthPerItem != null &&
-        showPerItemCharacterCounter &&
-        isOpen ? (
-          <div className="mt-1.5 flex items-center justify-end gap-2">
-            <span className="shrink-0 text-sm text-semantic-text-muted">
-              {inputValue.length}/{maxLengthPerItem}
-            </span>
+        {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>
           </div>
-        ) : (
-          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>
-            </div>
-          )
-        )}
+        ) : null}
       </div>
     )
   }
@@ -1988,7 +2001,7 @@ export interface CreatableSelectProps
   creatableHint?: string
   /** Whether the select is disabled */
   disabled?: boolean
-  /** Max character length for the value (enforced when open and when creating) */
+  /** Max character length for the value (enforced when open and when creating). When set, an in-field \`current/max\` counter renders before the chevron while the dropdown is open. */
   maxLength?: number
   /**
    * When set, combobox input is transformed (e.g. strip invalid characters).
@@ -2202,6 +2215,11 @@ const CreatableSelect = React.forwardRef(
               role="combobox"
               aria-autocomplete="list"
             />
+            {maxLength != null ? (
+              <span className="mr-2 shrink-0 text-sm text-semantic-text-muted">
+                {search.length}/{maxLength}
+              </span>
+            ) : null}
             <ChevronDown className="size-4 text-semantic-text-muted opacity-70 shrink-0 rotate-180 transition-transform" />
           </div>
         ) : (

package/package.json

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