myoperator-mcp 0.2.197 → 0.2.199

package/dist/index.js

@@ -1364,31 +1364,17 @@ ContactListItem.displayName = "ContactListItem";
 export { ContactListItem };
 `,
   "creatable-multi-select": `import * as React from "react"
-import { cva } from "class-variance-authority"
-import { ChevronDown, ChevronRight, Plus, X, Info } from "lucide-react"
+import { ChevronRight, Plus, Info } from "lucide-react"
 
 import { cn } from "@/lib/utils"
+import {
+  creatableSelectTriggerVariants,
+  creatableEnterHintKbdClassName,
+  creatableToneHintRowClassName,
+} from "./creatable-select"
 
-const creatableMultiSelectTriggerVariants = cva(
-  "flex items-center gap-2 flex-wrap min-h-[42px] w-full px-4 py-2 rounded bg-semantic-bg-primary cursor-text transition-shadow",
-  {
-    variants: {
-      state: {
-        default:
-          "border border-solid border-semantic-border-input hover:border-semantic-border-input-focus",
-        error:
-          "border border-solid border-semantic-error-primary/40 hover:border-semantic-error-primary",
-        focused:
-          "border border-solid border-semantic-border-focus shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-        "focused-error":
-          "border border-solid border-semantic-error-primary/60 shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-)
+/** @deprecated Use \`creatableSelectTriggerVariants\` from \`./creatable-select\` \u2014 aliases the same trigger styles as Primary Role. */
+const creatableMultiSelectTriggerVariants = creatableSelectTriggerVariants
 
 export interface CreatableMultiSelectOption {
   value: string
@@ -1421,6 +1407,11 @@ export interface CreatableMultiSelectProps
   maxItems?: number
   /** Max character length per item when typing/creating (default: unlimited) */
   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
   /**
    * When set, the text input is transformed (e.g. strip invalid characters).
    * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
@@ -1435,6 +1426,15 @@ export interface CreatableMultiSelectProps
   onValidInput?: () => void
 }
 
+function joinSelectedLabels(
+  values: string[],
+  options: CreatableMultiSelectOption[]
+): string {
+  return values
+    .map((val) => options.find((o) => o.value === val)?.label ?? val)
+    .join(", ")
+}
+
 const CreatableMultiSelect = React.forwardRef(
   (
     {
@@ -1449,6 +1449,7 @@ const CreatableMultiSelect = React.forwardRef(
       createHintText,
       maxItems,
       maxLengthPerItem,
+      showPerItemCharacterCounter = true,
       sanitizeInput,
       onInvalidCharacters,
       onValidInput,
@@ -1464,30 +1465,39 @@ const CreatableMultiSelect = React.forwardRef(
 
     React.useImperativeHandle(ref, () => containerRef.current!)
 
-    const addValue = React.useCallback(
-      (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 toAdd =
-          maxLengthPerItem != null
-            ? trimmed.slice(0, maxLengthPerItem)
-            : trimmed
-        if (toAdd) {
-          onValueChange?.([...value, toAdd])
-          setInputValue("")
-        }
-      },
-      [value, onValueChange, maxItems, maxLengthPerItem, sanitizeInput]
-    )
+    const derivedState = state === "error" ? "error" : "default"
+
+    const selectedSummary = joinSelectedLabels(value, options)
+
+    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 toAdd =
+        maxLengthPerItem != null
+          ? trimmed.slice(0, maxLengthPerItem)
+          : trimmed
+      if (toAdd) {
+        onValueChange?.([...value, toAdd])
+        setInputValue("")
+      }
+    }
 
-    const removeValue = React.useCallback(
-      (val: string) => {
-        onValueChange?.(value.filter((v) => v !== val))
-      },
-      [value, onValueChange]
-    )
+    const removeValue = (val: string) => {
+      onValueChange?.(value.filter((v) => v !== val))
+    }
+
+    const handleOpen = React.useCallback(() => {
+      if (disabled) return
+      setIsOpen(true)
+      setInputValue("")
+    }, [disabled])
+
+    React.useEffect(() => {
+      if (!isOpen) return
+      requestAnimationFrame(() => inputRef.current?.focus())
+    }, [isOpen])
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter") {
@@ -1542,18 +1552,11 @@ const CreatableMultiSelect = React.forwardRef(
 
     const hasHintCopy = Boolean(createHintText) || maxItems != null
 
-    const showHintsRow =
-      hasHintCopy || canShowEnterAffordance
+    const showHintsSection = hasHintCopy || canShowEnterAffordance
 
-    const triggerState = isOpen
-      ? state === "error"
-        ? "focused-error"
-        : "focused"
-      : state
-
-    /** Must match \`CreatableSelect\` hint-row \`<kbd>\` (Primary Role) \u2014 includes \`font-sans\` to override UA monospace on \`<kbd>\`. */
-    const creatableHintEnterKbdClassName =
-      "inline-flex items-center gap-0.5 rounded border border-solid border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 font-sans text-[10px] font-medium text-semantic-text-muted"
+    const inputPlaceholder = isOpen
+      ? selectedSummary || placeholder
+      : ""
 
     return (
       <div
@@ -1561,146 +1564,107 @@ const CreatableMultiSelect = React.forwardRef(
         className={cn("relative w-full", className)}
         {...props}
       >
-        {/* Positioning context = trigger only so the dropdown aligns like CreatableSelect (counter sits below, not above the panel). */}
         <div className="relative w-full">
-          {/* Trigger */}
-          <div
-            className={cn(
-              creatableMultiSelectTriggerVariants({ state: triggerState }),
-              disabled && "cursor-not-allowed opacity-50"
-            )}
-            onClick={() => {
-              if (disabled) return
-              setIsOpen(true)
-              inputRef.current?.focus()
-            }}
-          >
-            {/* Selected chips */}
-            {value.map((val) => {
-              const optLabel =
-                options.find((o) => o.value === val)?.label || val
-              return (
-                <span
-                  key={val}
-                  className="inline-flex items-center gap-2 bg-semantic-info-surface px-2 py-1 rounded text-sm text-semantic-text-primary whitespace-nowrap"
-                >
-                  {optLabel}
-                  <button
-                    type="button"
-                    onMouseDown={(e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                      removeValue(val)
-                    }}
-                    className="shrink-0 flex items-center justify-center text-semantic-text-muted hover:text-semantic-text-primary transition-colors"
-                    aria-label={\`Remove \${optLabel}\`}
-                  >
-                    <X className="size-2.5" />
-                  </button>
-                </span>
-              )
-            })}
-
-            {/* Text input */}
-            <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
-                )
-                if (!isOpen) setIsOpen(true)
-              }}
-              maxLength={maxLengthPerItem}
-              onFocus={() => {
-                if (!disabled) setIsOpen(true)
-              }}
-              onKeyDown={handleKeyDown}
+          {isOpen ? (
+            <div
+              className={cn(
+                creatableSelectTriggerVariants({ state: derivedState }),
+                "cursor-text"
+              )}
+              onClick={() => inputRef.current?.focus()}
+            >
+              <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={inputPlaceholder}
+                className="flex-1 min-w-0 bg-transparent outline-none text-base text-semantic-text-primary placeholder:text-semantic-text-muted"
+                role="combobox"
+                aria-expanded={isOpen}
+                aria-controls={listboxId}
+                aria-haspopup="listbox"
+                aria-autocomplete="list"
+              />
+              <ChevronRight
+                className="size-5 text-semantic-text-muted shrink-0 opacity-70"
+                aria-hidden
+              />
+            </div>
+          ) : (
+            <button
+              type="button"
               disabled={disabled}
-              placeholder={value.length === 0 ? placeholder : ""}
-              className="flex-1 min-w-[100px] text-base bg-transparent outline-none text-semantic-text-primary placeholder:text-semantic-text-muted"
-              role="combobox"
-              aria-expanded={isOpen}
-              aria-controls={listboxId}
+              onClick={handleOpen}
+              className={cn(
+                creatableSelectTriggerVariants({ state: derivedState }),
+                "cursor-pointer text-left"
+              )}
               aria-haspopup="listbox"
-            />
-
-            {/* Chevron */}
-            {isOpen ? (
-              <ChevronRight className="size-5 text-semantic-text-muted shrink-0 ml-auto" />
-            ) : (
-              <ChevronDown className="size-5 text-semantic-text-muted shrink-0 ml-auto" />
-            )}
-          </div>
+              aria-expanded={false}
+              aria-controls={listboxId}
+            >
+              <span
+                className={cn(
+                  "flex-1 min-w-0 line-clamp-2 text-base",
+                  !selectedSummary && "text-semantic-text-muted"
+                )}
+              >
+                {selectedSummary || placeholder}
+              </span>
+              <ChevronRight
+                className="size-5 text-semantic-text-muted shrink-0 opacity-70"
+                aria-hidden
+              />
+            </button>
+          )}
 
-          {/* Dropdown panel \u2014 top-full is bottom of trigger row only (matches Primary Role / CreatableSelect). */}
+          {/* Dropdown panel */}
           {isOpen && (
             <div
               id={listboxId}
               role="listbox"
-              className="absolute left-0 top-full z-[9999] mt-1 w-full rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
+              className="absolute left-0 top-full z-[9999] mt-1 flex w-full flex-col gap-2.5 overflow-hidden rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary px-4 pb-4 pt-0 shadow-sm animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200"
             >
-              {showHintsRow && (
-                <div
-                  className={cn(
-                    "flex items-center justify-between gap-2 px-4 py-2",
-                    filteredPresets.length > 0 &&
-                      "border-b border-solid border-semantic-border-layout",
-                    !hasHintCopy && "justify-end"
-                  )}
-                >
-                  {hasHintCopy ? (
-                    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-                      {createHintText ? (
-                        <span className="text-sm text-semantic-text-muted">
-                          {createHintText}
-                        </span>
-                      ) : null}
-                      {maxItems != null ? (
-                        <span className="text-xs text-semantic-text-muted">
-                          Max selections allowed: {maxItems}
-                        </span>
-                      ) : null}
-                    </div>
-                  ) : null}
-                  <span
-                    role="button"
-                    tabIndex={canShowEnterAffordance ? 0 : -1}
-                    aria-label="Add using Enter key"
-                    aria-disabled={!canShowEnterAffordance}
-                    className={cn(
-                      "inline-flex shrink-0",
-                      !canShowEnterAffordance && "pointer-events-none"
+              {showHintsSection && (
+                <>
+                  <div className={creatableToneHintRowClassName}>
+                    {createHintText ? (
+                      <span className="text-sm text-semantic-text-muted">
+                        {createHintText}
+                      </span>
+                    ) : (
+                      <span className="min-w-0 flex-1" />
                     )}
-                    onMouseDown={(e) => {
-                      e.preventDefault()
-                      if (canShowEnterAffordance) addValue(inputValue)
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key !== "Enter" && e.key !== " ") return
-                      e.preventDefault()
-                      if (canShowEnterAffordance) addValue(inputValue)
-                    }}
-                  >
-                    <kbd className={creatableHintEnterKbdClassName}>
+                    <kbd className={creatableEnterHintKbdClassName}>
                       Enter \u21B5
                     </kbd>
-                  </span>
-                </div>
+                  </div>
+                  {maxItems != null ? (
+                    <p className="m-0 text-left text-sm text-semantic-text-muted">
+                      Max selections allowed: {maxItems}
+                    </p>
+                  ) : null}
+                </>
               )}
 
-              {/* Preset option chips \u2014 pt-1 px-4 matches CreatableSelect listbox padding above first option */}
               {filteredPresets.length > 0 && (
-                <div className="flex flex-wrap gap-1.5 px-4 pt-1 pb-2">
+                <div className="flex flex-wrap gap-1.5">
                   {filteredPresets.map((option) => (
                     <button
                       key={option.value}
@@ -1709,9 +1673,13 @@ const CreatableMultiSelect = React.forwardRef(
                         e.preventDefault()
                         addValue(option.value)
                       }}
-                      className="inline-flex items-center gap-1.5 whitespace-nowrap rounded bg-semantic-bg-ui px-2.5 py-1.5 text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
+                      className="inline-flex items-center gap-2.5 whitespace-nowrap rounded border-0 bg-semantic-bg-ui px-2 py-1 text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover"
                     >
-                      <Plus className="size-3 shrink-0 text-semantic-text-muted" />
+                      <Plus
+                        className="size-2.5 shrink-0 text-semantic-text-muted"
+                        strokeWidth={2}
+                        aria-hidden
+                      />
                       {option.label}
                     </button>
                   ))}
@@ -1721,8 +1689,9 @@ const CreatableMultiSelect = React.forwardRef(
           )}
         </div>
 
-        {/* Helper row below trigger: when maxLengthPerItem show dynamic hint + counter (Figma); else optional static helperText */}
-        {maxLengthPerItem != null ? (
+        {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}
@@ -1770,6 +1739,20 @@ const creatableSelectTriggerVariants = cva(
   }
 )
 
+/**
+ * Tailwind classes for the "Enter \u21B5" hint in creatable dropdown headers (shared by Primary Role and Tone).
+ */
+export const creatableEnterHintKbdClassName =
+  "inline-flex items-center gap-0.5 rounded border border-solid border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 font-sans text-[10px] font-medium text-semantic-text-muted"
+
+/** Primary Role: hint row above the options list (custom role + Enter kbd). */
+export const creatablePrimaryRoleHintRowClassName =
+  "flex items-center justify-between px-4 py-2 border-b border-solid border-semantic-border-layout"
+
+/** Tone / CreatableMultiSelect: hint row inside the padded dropdown panel (-mx-4 full-bleed border). */
+export const creatableToneHintRowClassName =
+  "-mx-4 flex min-h-[45px] shrink-0 items-center justify-between gap-2.5 border-b border-solid border-semantic-border-layout px-4 py-2.5"
+
 export interface CreatableSelectOption {
   value: string
   label: string
@@ -2039,11 +2022,11 @@ const CreatableSelect = React.forwardRef(
         {open && (
           <div className="absolute left-0 top-full z-[9999] mt-1 w-full rounded border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
             {creatableHint ? (
-              <div className="flex items-center justify-between px-4 py-2 border-b border-solid border-semantic-border-layout">
+              <div className={creatablePrimaryRoleHintRowClassName}>
                 <span className="text-sm text-semantic-text-muted">
                   {creatableHint}
                 </span>
-                <kbd className="inline-flex items-center gap-0.5 rounded border border-solid border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 font-sans text-[10px] font-medium text-semantic-text-muted">
+                <kbd className={creatableEnterHintKbdClassName}>
                   Enter \u21B5
                 </kbd>
               </div>

package/package.json

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