myoperator-mcp 0.2.259 → 0.2.261

package/dist/index.js

@@ -815,13 +815,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const DOT_KEYS = [0, 1, 2] as const;
-
-/** Delays (seconds) for \`type="staggered"\` \u2014 matches the common 0.1s / 0.3s / 0.6s pattern. */
-const STAGGERED_BOUNCE_DELAYS_SEC = [0.1, 0.3, 0.6] as const;
-
-export type BouncingLoaderType = "default" | "staggered";
-
-export type BouncingLoaderFrame = "none" | "pill";
+const DOT_DELAYS_SEC = [0, 0.2, 0.4] as const;
 
 function toCssLength(value: number | string, unit: string): string {
   if (typeof value === "string") {
@@ -831,34 +825,12 @@ function toCssLength(value: number | string, unit: string): string {
 }
 
 const bouncingLoaderVariants = cva(
-  "bouncing-loader min-w-0 items-center justify-center leading-[0] align-middle gap-[var(--bouncing-loader-spacing,0.375rem)]",
-  {
-    variants: {
-      fullWidth: {
-        true: "bouncing-loader--full-width flex w-full",
-        false: "inline-flex shrink-0",
-      },
-    },
-    defaultVariants: {
-      fullWidth: false,
-    },
-  }
+  "bouncing-loader inline-flex shrink-0 min-w-0 items-center justify-center leading-[0] align-middle gap-[var(--bouncing-loader-spacing,0.375rem)]"
 );
 
 export interface BouncingLoaderProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "type">,
+  extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof bouncingLoaderVariants> {
-  /**
-   * \`default\` \u2014 \`effect\` controls the animation.
-   * \`staggered\` \u2014 Tailwind \`animate-bounce\` with **0.5s** duration and per-dot delays
-   * **0.1s / 0.3s / 0.6s** (overrides \`effect\` for the animation). Sensible defaults: 20px dots,
-   * 12px gap, \`var(--color-neutral-800)\` (override with \`size\` / \`spacing\` / \`color\`).
-   */
-  type?: BouncingLoaderType;
-  /**
-   * \`pill\` \u2014 white rounded container with padding (like \`bg-white p-5 rounded-full\` around the row).
-   */
-  frame?: BouncingLoaderFrame;
   /**
    * Dot diameter. Number is treated as pixels; string is used as a CSS length
    * (e.g. \`"0.5rem"\`, \`"12px"\`).
@@ -866,144 +838,45 @@ export interface BouncingLoaderProps
   size?: number | string;
   /**
    * Dot fill. Any valid CSS color (e.g. semantic token: \`var(--semantic-text-placeholder)\`).
-   * When omitted, the placeholder token is used via the default background chain.
-   * Use with \`colorDark\` to mirror \`bg-\u2026\` / \`dark:bg-\u2026\` in plain HTML.
    */
   color?: string;
-  /**
-   * Optional dot fill when \`.dark\` is on an ancestor. If omitted, one fill (from \`color\` or
-   * the default placeholder) is used in both themes.
-   */
-  colorDark?: string;
   /**
    * Space between dots. Number is pixel gap; string is a CSS length (e.g. \`"0.5rem"\`).
    */
   spacing?: number | string;
-  /**
-   * Extra delay per dot (seconds) as \`i * delay\`. \`wave\` defaults to \`duration/3\`;
-   * \`dots-bounce\` / \`tailwind-bounce\` default to \`0.2\` (0s / 0.2s / 0.4s); \`bounce\` defaults
-   * to \`0.12s\`.
-   */
-  staggerDelay?: number;
-  /**
-   * One full animation loop (seconds) per dot, via \`--bouncing-loader-duration\`.
-   */
-  duration?: number;
-  /**
-   * Vertical travel at the peak. Number = pixels; string = any CSS length. Sets
-   * \`--bouncing-loader-bounce\`.
-   */
-  bounce?: number | string;
-  /**
-   * \`wave\` (default) \u2014 one quick lift per cycle, staggered: classic typing-dot wave.
-   * \`bounce\` \u2014 each dot runs a continuous up/down loop (sine-like bounce, not a row wave).
-   * \`dots-bounce\` \u2014 Tailwind\u2019s \`animate-bounce\` with staggered delays
-   * (default 0.2s, like 0s / 0.2s / 0.4s). Alias: \`tailwind-bounce\`.
-   */
-  effect?: "wave" | "bounce" | "dots-bounce" | "tailwind-bounce";
 }
 
 const BouncingLoader = React.forwardRef<HTMLSpanElement, BouncingLoaderProps>(
-  (
-    {
-      className,
-      type: typeProp = "default",
-      frame = "none",
-      size,
-      color,
-      colorDark,
-      spacing,
-      staggerDelay: staggerProp,
-      duration: userDuration,
-      bounce = 4,
-      effect = "wave",
-      fullWidth,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const isStaggeredType = typeProp === "staggered";
-    const isDotsBounce =
-      isStaggeredType || effect === "dots-bounce" || effect === "tailwind-bounce";
-
-    const duration = userDuration ?? (isStaggeredType ? 0.5 : isDotsBounce ? 1 : 0.6);
-
-    const staggerDelay =
-      staggerProp ??
-      (effect === "wave" && !isStaggeredType
-        ? duration / 3
-        : isDotsBounce
-          ? 0.2
-          : 0.12);
-
-    const waveClass = !isDotsBounce && effect === "wave" && "animate-bouncing-typing-wave";
-    const bounceClass = !isDotsBounce && effect === "bounce" && "animate-bouncing-bounce";
-    const dotsBounceClass = isDotsBounce && "animate-bounce";
-
-    const effectiveSize = size ?? (isStaggeredType ? 20 : undefined);
-    const effectiveSpacing = spacing ?? (isStaggeredType ? 12 : undefined);
-    const effectiveColor = color ?? (isStaggeredType ? "var(--color-neutral-800)" : undefined);
-
-    const dotBgClass =
-      colorDark !== undefined
-        ? "bg-[var(--bouncing-loader-color,var(--semantic-text-placeholder,currentColor))] dark:bg-[var(--bouncing-loader-color-dark)]"
-        : "bg-[var(--bouncing-loader-color,var(--semantic-text-placeholder,currentColor))]";
-
-    const animationDelayForDot = (i: number): string => {
-      if (isStaggeredType) {
-        if (staggerProp !== undefined) {
-          return \`\${i * staggerProp}s\`;
-        }
-        return \`\${STAGGERED_BOUNCE_DELAYS_SEC[i]}s\`;
-      }
-      return \`\${i * staggerDelay}s\`;
-    };
-
+  ({ className, size, color, spacing, style, ...props }, ref) => {
     const mergedStyle: React.CSSProperties = {
       ...style,
-      ...(effectiveSize !== undefined && {
-        ["--bouncing-loader-size" as string]: toCssLength(effectiveSize, "px"),
-      }),
-      ...(effectiveColor !== undefined && {
-        ["--bouncing-loader-color" as string]: effectiveColor,
+      ...(size !== undefined && {
+        ["--bouncing-loader-size" as string]: toCssLength(size, "px"),
       }),
-      ...(colorDark !== undefined && {
-        ["--bouncing-loader-color-dark" as string]: colorDark,
+      ...(color !== undefined && {
+        ["--bouncing-loader-color" as string]: color,
       }),
-      ...(effectiveSpacing !== undefined && {
-        ["--bouncing-loader-spacing" as string]: toCssLength(effectiveSpacing, "px"),
+      ...(spacing !== undefined && {
+        ["--bouncing-loader-spacing" as string]: toCssLength(spacing, "px"),
       }),
-      ["--bouncing-loader-duration" as string]: \`\${duration}s\`,
-      ["--bouncing-loader-bounce" as string]: toCssLength(bounce, "px"),
     };
 
     return (
       <span
         ref={ref}
-        className={cn(
-          bouncingLoaderVariants({ fullWidth }),
-          frame === "pill" && "rounded-full bg-white p-5",
-          className
-        )}
+        role="status"
+        aria-live="polite"
+        aria-label="Loading"
+        className={cn(bouncingLoaderVariants(), className)}
         style={mergedStyle}
         {...props}
       >
         {DOT_KEYS.map((i) => (
           <span
             key={i}
-            className={cn(
-              "bouncing-loader__dot box-border block h-[var(--bouncing-loader-size,8px)] w-[var(--bouncing-loader-size,8px)] shrink-0 rounded-full",
-              dotBgClass,
-              waveClass,
-              bounceClass,
-              dotsBounceClass
-            )}
+            className="bouncing-loader__dot box-border block h-[var(--bouncing-loader-size,8px)] w-[var(--bouncing-loader-size,8px)] shrink-0 rounded-full bg-[var(--bouncing-loader-color,var(--semantic-text-placeholder,currentColor))] animate-bouncing-typing-wave"
             style={{
-              animationDelay: animationDelayForDot(i),
-              ...(isDotsBounce && {
-                animationDuration: \`\${duration}s\`,
-              }),
+              ["--bouncing-loader-delay" as string]: \`\${DOT_DELAYS_SEC[i]}s\`,
             }}
             aria-hidden
           />
@@ -1619,6 +1492,11 @@ export interface CreatableMultiSelectProps
    * Set to false to match Figma (counter lives only in the field flow / not under the control).
    */
   showPerItemCharacterCounter?: boolean
+  /**
+   * Closed trigger: show removable chips (default) or a single comma-separated summary line (Figma Tone).
+   * While open, the trigger always shows the summary line; selected chips with remove controls appear in the panel.
+   */
+  triggerDisplay?: "chips" | "summary"
   /**
    * When set, the text input is transformed (e.g. strip invalid characters).
    * If the raw value differs from the sanitized value, \`onInvalidCharacters\` is called.
@@ -1664,6 +1542,7 @@ const CreatableMultiSelect = React.forwardRef(
       maxItems,
       maxLengthPerItem,
       showPerItemCharacterCounter = true,
+      triggerDisplay = "chips",
       sanitizeInput,
       onInvalidCharacters,
       onValidInput,
@@ -1764,13 +1643,10 @@ const CreatableMultiSelect = React.forwardRef(
       !value.includes(draftForCreate) &&
       (maxItems == null || value.length < maxItems)
 
-    const hasHintCopy = Boolean(createHintText) || maxItems != null
+    const panelInputPlaceholder = createHintText ?? placeholder
 
-    const showHintsSection = hasHintCopy || canShowEnterAffordance
-
-    const inputPlaceholder = isOpen
-      ? selectedSummary || placeholder
-      : ""
+    const summaryTriggerLabel =
+      value.length === 0 ? placeholder : selectedSummary
 
     return (
       <div
@@ -1779,48 +1655,33 @@ const CreatableMultiSelect = React.forwardRef(
         {...props}
       >
         <div className="relative w-full">
-          {isOpen ? (
+          {isOpen && (
             <div
               className={cn(
                 creatableSelectTriggerVariants({ state: derivedState }),
-                "cursor-text"
+                "flex h-auto min-h-[42px] cursor-text items-start gap-2 py-2 text-left"
               )}
-              onClick={() => inputRef.current?.focus()}
+              onClick={() => !disabled && inputRef.current?.focus()}
+              aria-hidden="true"
             >
-              <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"
-              />
+              <span
+                className={cn(
+                  "line-clamp-2 min-w-0 flex-1 text-base",
+                  value.length === 0
+                    ? "text-semantic-text-muted"
+                    : "text-semantic-text-primary"
+                )}
+              >
+                {summaryTriggerLabel}
+              </span>
               <ChevronRight
-                className="size-5 text-semantic-text-muted shrink-0 opacity-70"
+                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
                 aria-hidden
               />
             </div>
-          ) : (
+          )}
+
+          {!isOpen && (
             <div
               role="combobox"
               tabIndex={disabled ? -1 : 0}
@@ -1844,12 +1705,23 @@ const CreatableMultiSelect = React.forwardRef(
               }}
               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",
+                "flex h-auto min-h-[42px] cursor-pointer items-start gap-2 py-2 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"
               )}
             >
-              <div className="flex min-h-0 min-w-0 flex-1 flex-wrap items-center gap-1.5">
-                {value.length === 0 ? (
+              <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",
@@ -1893,52 +1765,128 @@ const CreatableMultiSelect = React.forwardRef(
                 )}
               </div>
               <ChevronRight
-                className="size-5 shrink-0 text-semantic-text-muted opacity-70"
+                className="mt-1 size-5 shrink-0 self-start text-semantic-text-muted opacity-70"
                 aria-hidden
               />
             </div>
           )}
 
-          {/* Dropdown panel */}
+          {/* Dropdown panel: input + limits + presets (Figma: summary row stays above; type-to-create lives here) */}
           {isOpen && (
             <div
-              id={listboxId}
-              role="listbox"
-              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"
+              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"
             >
-              {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">
-                        {createHintText}
-                      </span>
-                    ) : (
-                      <span className="min-w-0 flex-1" />
+              <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-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"
+                  />
+                  <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={creatableEnterHintKbdClassName}>
-                      Enter \u21B5
-                    </kbd>
-                  </div>
-                  {maxItems != null ? (
-                    <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}
-                    </div>
-                  ) : null}
+                  >
+                    Enter \u21B5
+                  </button>
                 </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}
+
+                {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}
 
-              {filteredPresets.length > 0 && (
-                <div className="flex flex-wrap gap-1.5">
+                <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-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-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"
@@ -1949,7 +1897,7 @@ const CreatableMultiSelect = React.forwardRef(
                     </button>
                   ))}
                 </div>
-              )}
+              </div>
             </div>
           )}
         </div>

package/package.json

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