myoperator-mcp 0.2.112 → 0.2.113

package/dist/index.js

@@ -555,7 +555,7 @@ const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("mt-1 text-sm", className)} {...props} />
+  <p ref={ref} className={cn("m-0 mt-1 text-sm", className)} {...props} />
 ));
 AlertDescription.displayName = "AlertDescription";
 
@@ -1136,6 +1136,590 @@ const ConfirmationModal = React.forwardRef<
 ConfirmationModal.displayName = "ConfirmationModal";
 
 export { ConfirmationModal };
+`,
+  "creatable-multi-select": `import * as React from "react"
+import { cva } from "class-variance-authority"
+import { ChevronDown, ChevronRight, Plus, X, Info } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+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-semantic-border-input hover:border-semantic-border-input-focus",
+        error:
+          "border border-semantic-error-primary/40 hover:border-semantic-error-primary",
+        focused:
+          "border border-semantic-border-focus shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        "focused-error":
+          "border border-semantic-error-primary/60 shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+export interface CreatableMultiSelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface CreatableMultiSelectProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Currently selected values */
+  value?: string[]
+  /** Callback when values change */
+  onValueChange?: (values: string[]) => void
+  /** Available preset options */
+  options?: CreatableMultiSelectOption[]
+  /** Placeholder when no values selected */
+  placeholder?: string
+  /** Whether the component is disabled */
+  disabled?: boolean
+  /** Error state */
+  state?: "default" | "error"
+  /** Hint text shown at top of dropdown when open */
+  creatableHint?: string
+  /** Helper text shown below the trigger */
+  helperText?: string
+}
+
+const CreatableMultiSelect = React.forwardRef<
+  HTMLDivElement,
+  CreatableMultiSelectProps
+>(
+  (
+    {
+      className,
+      value = [],
+      onValueChange,
+      options = [],
+      placeholder = "Enter or select",
+      disabled = false,
+      state = "default",
+      creatableHint = "Type to create a custom option",
+      helperText,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [inputValue, setInputValue] = React.useState("")
+    const containerRef = React.useRef<HTMLDivElement>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+
+    React.useImperativeHandle(ref, () => containerRef.current!)
+
+    const addValue = React.useCallback(
+      (val: string) => {
+        const trimmed = val.trim()
+        if (trimmed && !value.includes(trimmed)) {
+          onValueChange?.([...value, trimmed])
+          setInputValue("")
+        }
+      },
+      [value, onValueChange]
+    )
+
+    const removeValue = React.useCallback(
+      (val: string) => {
+        onValueChange?.(value.filter((v) => v !== val))
+      },
+      [value, onValueChange]
+    )
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault()
+        if (inputValue.trim()) addValue(inputValue)
+      } else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+        removeValue(value[value.length - 1])
+      } else if (e.key === "Escape") {
+        setIsOpen(false)
+        setInputValue("")
+      }
+    }
+
+    // Close on outside click
+    React.useEffect(() => {
+      const handler = (e: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(e.target as Node)
+        ) {
+          setIsOpen(false)
+          setInputValue("")
+        }
+      }
+      document.addEventListener("mousedown", handler)
+      return () => document.removeEventListener("mousedown", handler)
+    }, [])
+
+    const availablePresets = options.filter(
+      (o) => !value.includes(o.value) && !o.disabled
+    )
+    const filteredPresets = inputValue.trim()
+      ? availablePresets.filter((o) =>
+          o.label.toLowerCase().includes(inputValue.trim().toLowerCase())
+        )
+      : availablePresets
+    const canAddCustom =
+      Boolean(inputValue.trim()) && !value.includes(inputValue.trim())
+
+    const triggerState = isOpen
+      ? state === "error"
+        ? "focused-error"
+        : "focused"
+      : state
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn("relative w-full", className)}
+        {...props}
+      >
+        {/* 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) => {
+              setInputValue(e.target.value)
+              if (!isOpen) setIsOpen(true)
+            }}
+            onFocus={() => {
+              if (!disabled) setIsOpen(true)
+            }}
+            onKeyDown={handleKeyDown}
+            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-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>
+
+        {/* Dropdown panel */}
+        {isOpen && (
+          <div className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
+            {/* Creatable hint \u2014 contextual */}
+            <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
+              {canAddCustom ? (
+                <span className="text-sm font-medium text-semantic-text-primary">
+                  Press enter to add &ldquo;{inputValue.trim()}&rdquo;
+                </span>
+              ) : (
+                <span className="text-sm text-semantic-text-muted">
+                  {creatableHint}
+                </span>
+              )}
+              <kbd className="inline-flex items-center gap-0.5 rounded border border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 text-[10px] text-semantic-text-muted font-medium">
+                Enter \u21B5
+              </kbd>
+            </div>
+
+            {/* Preset option chips */}
+            {filteredPresets.length > 0 && (
+              <div className="px-2.5 py-2 flex flex-wrap gap-1.5">
+                {filteredPresets.map((option) => (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onMouseDown={(e) => {
+                      e.preventDefault()
+                      addValue(option.value)
+                    }}
+                    className="inline-flex items-center gap-1.5 bg-semantic-bg-ui px-2.5 py-1.5 rounded text-sm text-semantic-text-primary hover:bg-semantic-bg-hover transition-colors whitespace-nowrap"
+                  >
+                    <Plus className="size-3 shrink-0 text-semantic-text-muted" />
+                    {option.label}
+                  </button>
+                ))}
+              </div>
+            )}
+
+          </div>
+        )}
+
+        {/* Helper text below trigger */}
+        {helperText && !isOpen && (
+          <div className="flex items-center gap-1.5 mt-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>
+        )}
+      </div>
+    )
+  }
+)
+CreatableMultiSelect.displayName = "CreatableMultiSelect"
+
+export { CreatableMultiSelect, creatableMultiSelectTriggerVariants }
+`,
+  "creatable-select": `import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { ChevronDown, Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const creatableSelectTriggerVariants = cva(
+  "flex h-[42px] w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  {
+    variants: {
+      state: {
+        default:
+          "border border-semantic-border-input focus-within:border-semantic-border-input-focus/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        error:
+          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+export interface CreatableSelectOption {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+export interface CreatableSelectProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof creatableSelectTriggerVariants> {
+  /** Currently selected value */
+  value?: string
+  /** Callback when value changes (selection or creation) */
+  onValueChange?: (value: string) => void
+  /** Available options */
+  options?: CreatableSelectOption[]
+  /** Placeholder when no value selected */
+  placeholder?: string
+  /** Hint text shown above options when dropdown is open */
+  creatableHint?: string
+  /** Whether the select is disabled */
+  disabled?: boolean
+}
+
+const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
+  (
+    {
+      className,
+      state,
+      value,
+      onValueChange,
+      options = [],
+      placeholder = "Select an option",
+      creatableHint = "Type to create a custom option",
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false)
+    const [search, setSearch] = React.useState("")
+    const [highlightIndex, setHighlightIndex] = React.useState(-1)
+    const containerRef = React.useRef<HTMLDivElement>(null)
+    const inputRef = React.useRef<HTMLInputElement>(null)
+    const listRef = React.useRef<HTMLDivElement>(null)
+
+    // Merge forwarded ref with internal ref
+    React.useImperativeHandle(ref, () => containerRef.current!)
+
+    const selectedLabel = React.useMemo(() => {
+      const found = options.find((o) => o.value === value)
+      return found ? found.label : value || ""
+    }, [options, value])
+
+    const filtered = React.useMemo(() => {
+      if (!search.trim()) return options
+      const q = search.toLowerCase()
+      return options.filter((o) => o.label.toLowerCase().includes(q))
+    }, [options, search])
+
+    const isCustom =
+      search.trim().length > 0 &&
+      !options.some((o) => o.label.toLowerCase() === search.trim().toLowerCase())
+
+    const handleOpen = () => {
+      if (disabled) return
+      setOpen(true)
+      setSearch("")
+      setHighlightIndex(-1)
+      requestAnimationFrame(() => inputRef.current?.focus())
+    }
+
+    const handleSelect = React.useCallback(
+      (val: string) => {
+        onValueChange?.(val)
+        setOpen(false)
+        setSearch("")
+      },
+      [onValueChange]
+    )
+
+    const handleCreate = React.useCallback(() => {
+      const trimmed = search.trim()
+      if (trimmed) {
+        onValueChange?.(trimmed)
+        setOpen(false)
+        setSearch("")
+      }
+    }, [search, onValueChange])
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        setOpen(false)
+        return
+      }
+
+      if (e.key === "Enter") {
+        e.preventDefault()
+        if (highlightIndex >= 0 && highlightIndex < filtered.length) {
+          const opt = filtered[highlightIndex]
+          if (!opt.disabled) handleSelect(opt.value)
+        } else if (isCustom) {
+          handleCreate()
+        } else if (filtered.length === 1 && !filtered[0].disabled) {
+          handleSelect(filtered[0].value)
+        }
+        return
+      }
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        setHighlightIndex((prev) => {
+          const next = prev + 1
+          return next >= filtered.length ? 0 : next
+        })
+        return
+      }
+
+      if (e.key === "ArrowUp") {
+        e.preventDefault()
+        setHighlightIndex((prev) => {
+          const next = prev - 1
+          return next < 0 ? filtered.length - 1 : next
+        })
+        return
+      }
+    }
+
+    // Scroll highlighted item into view
+    React.useEffect(() => {
+      if (highlightIndex >= 0 && listRef.current) {
+        const item = listRef.current.children[highlightIndex] as HTMLElement
+        item?.scrollIntoView({ block: "nearest" })
+      }
+    }, [highlightIndex])
+
+    // Close on outside click
+    React.useEffect(() => {
+      if (!open) return
+      const handler = (e: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(e.target as Node)
+        ) {
+          setOpen(false)
+        }
+      }
+      document.addEventListener("mousedown", handler)
+      return () => document.removeEventListener("mousedown", handler)
+    }, [open])
+
+    // Reset highlight when filter changes
+    React.useEffect(() => {
+      setHighlightIndex(-1)
+    }, [search])
+
+    return (
+      <div
+        ref={containerRef}
+        className={cn("relative w-full", className)}
+        {...props}
+      >
+        {/* Trigger / Input */}
+        {open ? (
+          <div
+            className={cn(
+              creatableSelectTriggerVariants({ state }),
+              "cursor-text"
+            )}
+            onClick={() => inputRef.current?.focus()}
+          >
+            <input
+              ref={inputRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              onKeyDown={handleKeyDown}
+              className="flex-1 min-w-0 bg-transparent outline-none text-base text-semantic-text-primary placeholder:text-semantic-text-muted"
+              placeholder={selectedLabel || placeholder}
+              aria-expanded="true"
+              aria-haspopup="listbox"
+              role="combobox"
+              aria-autocomplete="list"
+            />
+            <ChevronDown className="size-4 text-semantic-text-muted opacity-70 shrink-0 rotate-180 transition-transform" />
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={handleOpen}
+            disabled={disabled}
+            className={cn(
+              creatableSelectTriggerVariants({ state }),
+              "cursor-pointer text-left"
+            )}
+            aria-haspopup="listbox"
+            aria-expanded="false"
+          >
+            <span
+              className={cn(
+                "line-clamp-1",
+                !selectedLabel && "text-semantic-text-muted"
+              )}
+            >
+              {selectedLabel || placeholder}
+            </span>
+            <ChevronDown className="size-4 text-semantic-text-muted opacity-70 shrink-0" />
+          </button>
+        )}
+
+        {/* Dropdown */}
+        {open && (
+          <div className="absolute left-0 top-full z-[9999] mt-1 w-full rounded border 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">
+            {/* Creatable hint */}
+            <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
+              <span className="text-sm text-semantic-text-muted">
+                {creatableHint}
+              </span>
+              <kbd className="inline-flex items-center gap-0.5 rounded border border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 text-[10px] text-semantic-text-muted font-medium">
+                Enter \u21B5
+              </kbd>
+            </div>
+
+            {/* Options list */}
+            <div
+              ref={listRef}
+              role="listbox"
+              className="max-h-60 overflow-y-auto p-1"
+            >
+              {filtered.length === 0 && !isCustom && (
+                <div className="px-4 py-2 text-sm text-semantic-text-muted">
+                  No options found
+                </div>
+              )}
+              {filtered.map((opt, i) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  role="option"
+                  aria-selected={opt.value === value}
+                  disabled={opt.disabled}
+                  onClick={() => !opt.disabled && handleSelect(opt.value)}
+                  onMouseEnter={() => setHighlightIndex(i)}
+                  className={cn(
+                    "relative flex w-full items-center rounded-sm py-2 pl-4 pr-8 text-base text-semantic-text-primary outline-none cursor-pointer select-none",
+                    "hover:bg-semantic-bg-ui",
+                    highlightIndex === i && "bg-semantic-bg-ui",
+                    opt.disabled &&
+                      "pointer-events-none opacity-50 cursor-not-allowed"
+                  )}
+                >
+                  {opt.label}
+                  {opt.value === value && (
+                    <span className="absolute right-2 flex size-4 items-center justify-center">
+                      <Check className="size-4 text-semantic-brand" />
+                    </span>
+                  )}
+                </button>
+              ))}
+
+              {/* Show custom creation option */}
+              {isCustom && (
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={false}
+                  onClick={handleCreate}
+                  onMouseEnter={() => setHighlightIndex(filtered.length)}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-sm py-2 pl-4 pr-8 text-base outline-none cursor-pointer select-none",
+                    "text-semantic-text-link hover:bg-semantic-bg-ui",
+                    highlightIndex === filtered.length && "bg-semantic-bg-ui"
+                  )}
+                >
+                  Create &ldquo;{search.trim()}&rdquo;
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+CreatableSelect.displayName = "CreatableSelect"
+
+export { CreatableSelect, creatableSelectTriggerVariants }
 `,
   "delete-confirmation-modal": `import * as React from "react";
 
@@ -1888,7 +2472,7 @@ import { cn } from "@/lib/utils";
  * Input variants for different visual states
  */
 const inputVariants = cva(
-  "h-10 w-full rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  "h-[42px] w-full rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:text-base file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
@@ -1982,7 +2566,7 @@ import { cn } from "@/lib/utils";
  * MultiSelect trigger variants matching TextField styling
  */
 const multiSelectTriggerVariants = cva(
-  "flex min-h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2 text-sm text-semantic-text-primary transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  "flex min-h-[42px] w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
@@ -2352,7 +2936,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
                       disabled={isDisabled}
                       onClick={() => !isDisabled && toggleOption(option.value)}
                       className={cn(
-                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-semantic-text-primary outline-none",
+                        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-base text-semantic-text-primary outline-none",
                         "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
                         isSelected && "bg-semantic-bg-ui",
                         isDisabled && "pointer-events-none opacity-50"
@@ -2472,6 +3056,8 @@ export interface PageHeaderProps
   showBackButton?: boolean;
   /** Callback when back button is clicked */
   onBackClick?: () => void;
+  /** Optional badge/tag displayed next to the title (e.g., status or type indicator) */
+  badge?: React.ReactNode;
   /** Optional info icon displayed next to the title (e.g., tooltip trigger) */
   infoIcon?: React.ReactNode;
   /** Action buttons/elements rendered on the right side */
@@ -2493,6 +3079,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
       icon,
       showBackButton = false,
       onBackClick,
+      badge,
       infoIcon,
       actions,
       showBorder = true,
@@ -2682,6 +3269,9 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
               <h1 className="m-0 text-lg font-semibold text-semantic-text-primary truncate">
                 {title}
               </h1>
+              {badge && (
+                <span className="flex-shrink-0">{badge}</span>
+              )}
               {infoIcon && (
                 <span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-semantic-text-muted">
                   {infoIcon}
@@ -3559,7 +4149,7 @@ import { cn } from "@/lib/utils";
  * SelectTrigger variants matching TextField styling
  */
 const selectTriggerVariants = cva(
-  "flex h-10 w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:line-clamp-1",
+  "flex h-[42px] w-full items-center justify-between rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:line-clamp-1",
   {
     variants: {
       state: {
@@ -3579,7 +4169,17 @@ const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Value>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Value
+    ref={ref}
+    className={cn("[&[data-placeholder]]:text-semantic-text-muted", className)}
+    {...props}
+  />
+));
+SelectValue.displayName = SelectPrimitive.Value.displayName;
 
 export interface SelectTriggerProps
   extends
@@ -3697,7 +4297,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-semantic-text-primary outline-none",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-base text-semantic-text-primary outline-none",
       "hover:bg-semantic-bg-ui focus:bg-semantic-bg-ui",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
@@ -4588,7 +5188,7 @@ const textFieldContainerVariants = cva(
  * TextField input variants (standalone without container)
  */
 const textFieldInputVariants = cva(
-  "h-10 w-full rounded bg-semantic-bg-primary px-4 py-2.5 text-sm text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  "h-[42px] w-full rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:text-base file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
@@ -4719,7 +5319,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
         type={type}
         className={cn(
           hasAddons
-            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed"
+            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-base text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed"
             : textFieldInputVariants({ state: derivedState, className }),
           type === "number" &&
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
@@ -4769,7 +5369,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
                 state: derivedState,
                 disabled: disabled || loading,
               }),
-              "h-10 px-4",
+              "h-[42px] px-4",
               inputContainerClassName
             )}
           >
@@ -4866,19 +5466,19 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-4 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-[5px] border p-3 shadow-md transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
         default:
           "border-semantic-border-layout bg-semantic-bg-primary text-semantic-text-primary",
         success:
-          "border-semantic-success-border bg-semantic-success-surface text-semantic-success-hover",
+          "border-transparent bg-semantic-success-surface text-semantic-text-primary",
         error:
-          "border-semantic-error-border bg-semantic-error-surface text-semantic-error-hover",
+          "border-transparent bg-semantic-error-surface text-semantic-text-primary",
         warning:
-          "border-semantic-warning-border bg-semantic-warning-surface text-semantic-warning-hover",
-        info: "border-semantic-info-border bg-semantic-info-surface text-semantic-info-hover",
+          "border-transparent bg-semantic-warning-surface text-semantic-text-primary",
+        info: "border-transparent bg-semantic-info-surface text-semantic-text-primary",
       },
     },
     defaultVariants: {
@@ -4928,17 +5528,13 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-semantic-text-muted opacity-0 transition-opacity hover:text-semantic-text-primary focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
-      "group-[.success]:text-semantic-success-hover group-[.success]:hover:text-semantic-success-hover",
-      "group-[.error]:text-semantic-error-hover group-[.error]:hover:text-semantic-error-hover",
-      "group-[.warning]:text-semantic-warning-hover group-[.warning]:hover:text-semantic-warning-hover",
-      "group-[.info]:text-semantic-info-hover group-[.info]:hover:text-semantic-info-hover",
+      "shrink-0 rounded p-0.5 text-semantic-text-muted transition-colors hover:text-semantic-text-primary focus:outline-none focus:ring-2 focus:ring-semantic-border-focus",
       className
     )}
     toast-close=""
     {...props}
   >
-    <X className="h-4 w-4" />
+    <X className="h-3 w-3" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -4949,7 +5545,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold", className)}
+    className={cn("text-sm font-semibold tracking-[0.014px]", className)}
     {...props}
   />
 ));
@@ -4961,7 +5557,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn("text-xs tracking-[0.048px]", className)}
     {...props}
   />
 ));
@@ -5240,11 +5836,11 @@ function Toaster() {
             className={variant ?? undefined}
             {...props}
           >
-            <div className="flex gap-3">
+            <div className="flex items-center gap-4">
               {Icon && (
                 <Icon
                   className={cn(
-                    "h-5 w-5 shrink-0",
+                    "size-6 shrink-0",
                     variant === "success" && "text-semantic-success-primary",
                     variant === "error" && "text-semantic-error-primary",
                     variant === "warning" && "text-semantic-warning-primary",
@@ -5252,7 +5848,7 @@ function Toaster() {
                   )}
                 />
               )}
-              <div className="grid gap-1">
+              <div className="flex flex-col gap-0.5">
                 {title && <ToastTitle>{title}</ToastTitle>}
                 {description && (
                   <ToastDescription>{description}</ToastDescription>
@@ -5965,6 +6561,44 @@ var componentMetadata = {
       }
     ]
   },
+  "creatable-multi-select": {
+    "name": "CreatableMultiSelect",
+    "description": "A creatable multi select component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic CreatableMultiSelect",
+        "code": "<CreatableMultiSelect>Content</CreatableMultiSelect>",
+        "description": "Simple creatable multi select usage"
+      }
+    ]
+  },
+  "creatable-select": {
+    "name": "CreatableSelect",
+    "description": "A creatable select component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic CreatableSelect",
+        "code": "<CreatableSelect>Content</CreatableSelect>",
+        "description": "Simple creatable select usage"
+      }
+    ]
+  },
   "delete-confirmation-modal": {
     "name": "DeleteConfirmationModal",
     "description": "A delete confirmation modal component.",

package/package.json

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