myoperator-mcp 0.2.257 → 0.2.259

package/dist/index.js

@@ -1571,7 +1571,7 @@ ContactListItem.displayName = "ContactListItem";
 export { ContactListItem };
 `,
   "creatable-multi-select": `import * as React from "react"
-import { ChevronRight, Plus, Info } from "lucide-react"
+import { ChevronRight, Plus, Info, X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -1642,6 +1642,13 @@ function joinSelectedLabels(
     .join(", ")
 }
 
+function labelForValue(
+  val: string,
+  options: CreatableMultiSelectOption[]
+): string {
+  return options.find((o) => o.value === val)?.label ?? val
+}
+
 const CreatableMultiSelect = React.forwardRef(
   (
     {
@@ -1814,31 +1821,82 @@ const CreatableMultiSelect = React.forwardRef(
               />
             </div>
           ) : (
-            <button
-              type="button"
-              disabled={disabled}
-              onClick={handleOpen}
-              className={cn(
-                creatableSelectTriggerVariants({ state: derivedState }),
-                "cursor-pointer text-left"
-              )}
+            <div
+              role="combobox"
+              tabIndex={disabled ? -1 : 0}
               aria-haspopup="listbox"
               aria-expanded={false}
               aria-controls={listboxId}
+              aria-disabled={disabled || undefined}
+              onKeyDown={(e) => {
+                if (disabled) return
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  handleOpen()
+                }
+              }}
+              onClick={(e) => {
+                if (disabled) return
+                if ((e.target as HTMLElement).closest("[data-chip-remove]")) {
+                  return
+                }
+                handleOpen()
+              }}
+              className={cn(
+                creatableSelectTriggerVariants({ state: derivedState }),
+                "flex min-h-[42px] cursor-pointer items-center gap-2 py-1 text-left outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-semantic-bg-primary",
+                disabled && "pointer-events-none cursor-not-allowed"
+              )}
             >
-              <span
-                className={cn(
-                  "flex-1 min-w-0 line-clamp-2 text-base",
-                  !selectedSummary && "text-semantic-text-muted"
+              <div className="flex min-h-0 min-w-0 flex-1 flex-wrap items-center gap-1.5">
+                {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>
+                  ))
                 )}
-              >
-                {selectedSummary || placeholder}
-              </span>
+              </div>
               <ChevronRight
-                className="size-5 text-semantic-text-muted shrink-0 opacity-70"
+                className="size-5 shrink-0 text-semantic-text-muted opacity-70"
                 aria-hidden
               />
-            </button>
+            </div>
           )}
 
           {/* Dropdown panel */}
@@ -1849,7 +1907,7 @@ const CreatableMultiSelect = React.forwardRef(
               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"
             >
               {showHintsSection && (
-                <>
+                <div className="-mx-4 flex shrink-0 flex-col border-b border-solid border-semantic-border-layout">
                   <div className={creatableToneHintRowClassName}>
                     {createHintText ? (
                       <span className="text-sm text-semantic-text-muted">
@@ -1863,11 +1921,11 @@ const CreatableMultiSelect = React.forwardRef(
                     </kbd>
                   </div>
                   {maxItems != null ? (
-                    <p className="m-0 text-left text-sm text-semantic-text-muted">
+                    <div className="border-t border-solid border-semantic-border-layout bg-semantic-bg-ui px-4 py-2 text-left text-sm text-semantic-text-muted">
                       Max selections allowed: {maxItems}
-                    </p>
+                    </div>
                   ) : null}
-                </>
+                </div>
               )}
 
               {filteredPresets.length > 0 && (
@@ -1948,17 +2006,20 @@ const creatableSelectTriggerVariants = cva(
 
 /**
  * Tailwind classes for the "Enter \u21B5" hint in creatable dropdown headers (shared by Primary Role and Tone).
+ * If your Tailwind config uses \`prefix\` (e.g. \`"tw-"\`), prefix every utility here or these strings will not compile.
  */
 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"
+  "flex items-center justify-between border-b border-solid border-semantic-border-layout px-4 py-2"
 
-/** Tone / CreatableMultiSelect: hint row inside the padded dropdown panel (-mx-4 full-bleed border). */
+/**
+ * Tone / CreatableMultiSelect: inner hint row (place inside a full-bleed wrapper with \`-mx-4\` + \`border-b\` on the panel).
+ */
 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"
+  "flex min-h-[45px] shrink-0 items-center justify-between gap-2.5 px-4 py-2.5"
 
 export interface CreatableSelectOption {
   value: string

package/package.json

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