myoperator-mcp 0.2.258 → 0.2.260

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
           />
@@ -1571,7 +1444,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 +1515,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 +1694,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 +1780,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 +1794,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 +1879,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.258",
+  "version": "0.2.260",
   "description": "MCP server for myOperator UI components - enables AI assistants to access component metadata, examples, and design tokens",
   "type": "module",
   "bin": "./dist/index.js",