myoperator-mcp 0.2.385 → 0.2.387

package/dist/index.js

@@ -3494,6 +3494,14 @@ const DEFAULT_MINUTE_STEP = 5;
 const DEFAULT_SECOND_STEP = 5;
 const TIME_COLUMN_MAX_HEIGHT = 168;
 const DEFAULT_PLACEHOLDER = "--/--/---- --:-- --";
+/**
+ * Masks used when only one half of a date-time value is filled in. The trigger
+ * keeps both segments in place so the field reads as "date selected, time still
+ * missing" rather than silently collapsing to a single value.
+ */
+const DATE_SEGMENT_MASK = "--/--/----";
+const TIME_SEGMENT_MASK = "--:-- --";
+const TIME_SEGMENT_MASK_WITH_SECONDS = "--:--:-- --";
 const POPOVER_WIDTH = 336;
 // The popover follows the trigger width but is clamped to a usable design range
 // so it neither stretches across a full-width desktop field nor overflows a
@@ -3541,7 +3549,7 @@ const dateTimePickerVariants = cva("relative inline-block w-full max-w-full", {
 });
 
 const dateTimePickerTriggerVariants = cva(
-  "flex w-full items-center justify-between border border-solid border-semantic-border-input bg-semantic-bg-primary text-left text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full items-center justify-between border border-solid border-[var(--semantic-border-input,#E9EAEB)] bg-[var(--semantic-bg-primary,#FFFFFF)] text-left text-[var(--semantic-text-primary,#181D27)] outline-none transition-colors hover:border-semantic-border-input-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
@@ -3551,8 +3559,7 @@ const dateTimePickerTriggerVariants = cva(
       },
       state: {
         default: "",
-        error:
-          "border-semantic-error-primary hover:border-semantic-error-primary",
+        error: "border-[var(--semantic-error-primary,#F04438)] hover:border-[var(--semantic-error-primary,#F04438)]",
       },
     },
     defaultVariants: {
@@ -3903,7 +3910,8 @@ function formatValueForDisplay(
   value: DateTimePickerValue,
   variant: DateTimePickerVariant,
   showEndTime: boolean,
-  showSeconds: boolean
+  showSeconds: boolean,
+  maskMissingSegments = false
 ) {
   if (variant === "date-only") {
     return formatDateOnlyForDisplay(value.date);
@@ -3924,6 +3932,17 @@ function formatValueForDisplay(
 
   if (!datePart && !timePart) return "";
 
+  // Both segments are visible in the \`date-time\` variant, so a half-filled value
+  // renders the missing half as its own placeholder mask instead of collapsing \u2014
+  // otherwise a date-only selection reads as a complete value.
+  if (maskMissingSegments) {
+    const timeMask = showSeconds
+      ? TIME_SEGMENT_MASK_WITH_SECONDS
+      : TIME_SEGMENT_MASK;
+
+    return [datePart || DATE_SEGMENT_MASK, timePart || timeMask].join(" ");
+  }
+
   return [datePart, timePart].filter(Boolean).join(" ");
 }
 
@@ -4595,7 +4614,7 @@ function CalendarDropdown({
             role="listbox"
             aria-label={\`\${label} options\`}
             data-dtp-dropdown=""
-            className="flex flex-col gap-0.5 overflow-y-auto rounded-md border border-solid border-semantic-border-layout bg-semantic-bg-primary p-1 shadow-lg [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-semantic-border-secondary [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5"
+            className="flex flex-col gap-0.5 overflow-y-auto rounded-md border border-solid border-[var(--semantic-border-layout,#E9EAEB)] bg-[var(--semantic-bg-primary,#FFFFFF)] p-1 shadow-lg [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-semantic-border-secondary [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5"
             style={{
               ...floatingStyles,
               width: \`var(\${DROPDOWN_WIDTH_VAR}, auto)\`,
@@ -4615,8 +4634,8 @@ function CalendarDropdown({
                 className={cn(
                   "flex w-full shrink-0 items-center rounded-md border border-solid px-2 py-1.5 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40",
                   option.value === value
-                    ? "border-semantic-info-border bg-semantic-info-surface font-semibold text-semantic-text-primary"
-                    : "border-transparent text-semantic-text-secondary hover:bg-semantic-bg-hover"
+                    ? "border-[var(--semantic-info-border,#A8C0EC)] bg-[var(--semantic-info-surface,#ECF1FB)] font-semibold text-[var(--semantic-text-primary,#181D27)]"
+                    : "border-transparent text-[var(--semantic-text-secondary,#343E55)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)]"
                 )}
                 onClick={() => {
                   if (option.disabled) return;
@@ -4665,8 +4684,8 @@ function TimeColumn({
   }, []);
 
   return (
-    <div className="flex min-w-0 flex-col border-r border-solid border-semantic-border-layout last:border-r-0">
-      <div className="border-b border-solid border-semantic-border-layout px-1 py-2 text-center text-[11px] font-semibold uppercase tracking-wide text-semantic-text-muted">
+    <div className="flex min-w-0 flex-col border-r border-solid border-[var(--semantic-border-layout,#E9EAEB)] last:border-r-0">
+      <div className="border-b border-solid border-[var(--semantic-border-layout,#E9EAEB)] px-1 py-2 text-center text-[11px] font-semibold uppercase tracking-wide text-[var(--semantic-text-muted,#717680)]">
         {header}
       </div>
       <div
@@ -4686,8 +4705,8 @@ function TimeColumn({
             className={cn(
               "flex shrink-0 items-center justify-center rounded-md border border-solid px-2 py-1.5 text-sm transition-colors",
               option.selected
-                ? "border-semantic-info-border bg-semantic-info-surface font-semibold text-semantic-text-primary"
-                : "border-transparent text-semantic-text-secondary hover:bg-semantic-bg-hover"
+                ? "border-[var(--semantic-info-border,#A8C0EC)] bg-[var(--semantic-info-surface,#ECF1FB)] font-semibold text-[var(--semantic-text-primary,#181D27)]"
+                : "border-transparent text-[var(--semantic-text-secondary,#343E55)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)]"
             )}
             onClick={() => onSelect(option.key)}
           >
@@ -4770,7 +4789,7 @@ function TimeField({
     <div className="flex flex-col gap-1.5">
       <span
         id={\`\${id}-label\`}
-        className="block text-sm font-semibold text-semantic-text-secondary"
+        className="block text-sm font-semibold text-[var(--semantic-text-secondary,#343E55)]"
       >
         {label}
       </span>
@@ -4782,14 +4801,14 @@ function TimeField({
         aria-haspopup="listbox"
         aria-expanded={open}
         className={cn(
-          "flex h-[42px] w-full items-center gap-2 rounded border border-solid border-semantic-border-input bg-semantic-bg-primary px-3 text-left text-base text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50",
+          "flex h-[42px] w-full items-center gap-2 rounded border border-solid border-[var(--semantic-border-input,#E9EAEB)] bg-[var(--semantic-bg-primary,#FFFFFF)] px-3 text-left text-base text-[var(--semantic-text-primary,#181D27)] outline-none transition-colors hover:border-semantic-border-input-focus/50",
           open &&
             "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
         )}
         onClick={() => onOpenChange(!open)}
       >
         <Clock2
-          className="size-4 shrink-0 text-semantic-text-muted"
+          className="size-4 shrink-0 text-[var(--semantic-text-muted,#717680)]"
           aria-hidden="true"
         />
         <span className="m-0 min-w-0 flex-1 truncate">
@@ -4797,7 +4816,7 @@ function TimeField({
         </span>
         <ChevronDown
           className={cn(
-            "size-4 shrink-0 text-semantic-text-muted transition-transform",
+            "size-4 shrink-0 text-[var(--semantic-text-muted,#717680)] transition-transform",
             open && "rotate-180"
           )}
           aria-hidden="true"
@@ -4812,7 +4831,7 @@ function TimeField({
             aria-label={\`\${label} options\`}
             data-dtp-dropdown=""
             className={cn(
-              "grid overflow-hidden rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-lg",
+              "grid overflow-hidden rounded-lg border border-solid border-[var(--semantic-border-layout,#E9EAEB)] bg-[var(--semantic-bg-primary,#FFFFFF)] shadow-lg",
               showSeconds ? "grid-cols-4" : "grid-cols-3"
             )}
             style={{
@@ -4942,7 +4961,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         currentValue,
         pickerVariant,
         resolvedShowEndTime,
-        resolvedShowSeconds
+        resolvedShowSeconds,
+        true
       )
     );
     const [isDateInputFocused, setIsDateInputFocused] = React.useState(false);
@@ -5007,12 +5027,27 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const errorId = \`\${triggerId}-error\`;
     const helperId = \`\${triggerId}-helper\`;
     const describedBy = error ? errorId : helperText ? helperId : undefined;
+    // Unmasked \u2014 this is what the typing path reads and writes. The masked variant
+    // below is render-only; letting a mask reach \`dateInputValue\` would feed
+    // "--/--/----" straight into the typed-input sanitizers.
     const displayValue = formatValueForDisplay(
       currentValue,
       pickerVariant,
       resolvedShowEndTime,
       resolvedShowSeconds
     );
+    const maskedDisplayValue = formatValueForDisplay(
+      currentValue,
+      pickerVariant,
+      resolvedShowEndTime,
+      resolvedShowSeconds,
+      true
+    );
+    const hasValue = Boolean(
+      currentValue.date ||
+        currentValue.startTime ||
+        (resolvedShowEndTime && currentValue.endTime)
+    );
     const effectiveMinDate = React.useMemo(() => {
       if (!disablePastDates) return minDate;
 
@@ -5068,9 +5103,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
 
     React.useEffect(() => {
       if (!isDateInputFocused) {
-        setDateInputValue(displayValue);
+        setDateInputValue(maskedDisplayValue);
       }
-    }, [displayValue, isDateInputFocused]);
+    }, [maskedDisplayValue, isDateInputFocused]);
 
     React.useEffect(() => {
       if (!open) return;
@@ -5353,7 +5388,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           currentValue,
           pickerVariant,
           resolvedShowEndTime,
-          resolvedShowSeconds
+          resolvedShowSeconds,
+          true
         )
       );
     };
@@ -5373,7 +5409,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           }
           aria-label={showCalendar ? undefined : "Time picker"}
           className={cn(
-            "rounded-lg border border-solid border-semantic-border-layout bg-semantic-bg-primary shadow-lg flex flex-col min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain pointer-events-auto",
+            "rounded-lg border border-solid border-[var(--semantic-border-layout,#E9EAEB)] bg-[var(--semantic-bg-primary,#FFFFFF)] shadow-lg flex flex-col min-h-0 overflow-y-auto overflow-x-hidden overscroll-contain pointer-events-auto",
             "[scrollbar-gutter:stable] [scrollbar-width:thin] [scrollbar-color:var(--semantic-border-secondary)_transparent]",
             "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-semantic-border-secondary"
           )}
@@ -5399,7 +5435,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 <button
                   type="button"
                   aria-label="Previous month"
-                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  className="p-1 rounded hover:bg-[var(--semantic-bg-hover,#D5D7DA)] text-[var(--semantic-text-secondary,#343E55)] transition-colors"
                   onClick={() =>
                     syncCalendarMonthAndValue(addMonths(visibleMonth, -1))
                   }
@@ -5471,7 +5507,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 <button
                   type="button"
                   aria-label="Next month"
-                  className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
+                  className="p-1 rounded hover:bg-[var(--semantic-bg-hover,#D5D7DA)] text-[var(--semantic-text-secondary,#343E55)] transition-colors"
                   onClick={() =>
                     syncCalendarMonthAndValue(addMonths(visibleMonth, 1))
                   }
@@ -5484,7 +5520,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 {weekDays.map((day) => (
                   <div
                     key={day}
-                    className="mx-auto flex size-8 items-center justify-center text-xs font-semibold text-semantic-text-muted"
+                    className="mx-auto flex size-8 items-center justify-center text-xs font-semibold text-[var(--semantic-text-muted,#717680)]"
                   >
                     {day}
                   </div>
@@ -5514,13 +5550,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                       className={cn(
                         "relative flex items-center justify-center size-8 mx-auto rounded-full text-xs transition-colors",
                         isSelected
-                          ? "bg-semantic-primary text-semantic-text-inverted font-semibold"
+                          ? "bg-[var(--semantic-primary,#343E55)] text-[var(--semantic-text-inverted,#FFFFFF)] font-semibold"
                           : isCurrentMonth
-                            ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
-                            : "text-semantic-text-muted hover:bg-semantic-bg-hover",
+                            ? "text-[var(--semantic-text-primary,#181D27)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)]"
+                            : "text-[var(--semantic-text-muted,#717680)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)]",
                         isToday &&
                           !isSelected &&
-                          "ring-1 ring-inset ring-semantic-border-secondary",
+                          "ring-1 ring-inset ring-[var(--semantic-border-secondary,#777E8D)]",
                         isDisabled &&
                           "opacity-40 cursor-not-allowed pointer-events-none"
                       )}
@@ -5544,9 +5580,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           {showTimeFields && (
             <div
               className={cn(
-                "space-y-3 bg-semantic-bg-primary p-3",
+                "space-y-3 bg-[var(--semantic-bg-primary,#FFFFFF)] p-3",
                 showCalendar &&
-                  "border-t border-solid border-semantic-border-layout"
+                  "border-t border-solid border-[var(--semantic-border-layout,#E9EAEB)]"
               )}
             >
               <TimeField
@@ -5623,13 +5659,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           <label
             htmlFor={triggerId}
             className={cn(
-              "mb-1.5 block text-sm font-semibold text-semantic-text-secondary",
+              "mb-1.5 block text-sm font-semibold text-[var(--semantic-text-secondary,#343E55)]",
               labelClassName
             )}
           >
             {label}
             {required && (
-              <span className="text-semantic-error-primary ml-0.5">*</span>
+              <span className="text-[var(--semantic-error-primary,#F04438)] ml-0.5">*</span>
             )}
           </label>
         )}
@@ -5640,9 +5676,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             open &&
               resolvedState !== "error" &&
               "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-            !displayValue && "text-semantic-text-placeholder",
+            !displayValue && "text-[var(--semantic-text-placeholder,#A2A6B1)]",
             disabled &&
-              "cursor-not-allowed bg-semantic-bg-ui text-semantic-text-muted hover:border-semantic-border-input"
+              "cursor-not-allowed bg-[var(--semantic-bg-ui,#F5F5F5)] text-[var(--semantic-text-muted,#717680)] hover:border-[var(--semantic-border-input,#E9EAEB)]"
           )}
         >
           <input
@@ -5663,9 +5699,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   ? "Time"
                   : "Date and time"
             }
-            className="min-w-0 flex-1 bg-transparent text-base text-semantic-text-primary outline-none placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed read-only:cursor-not-allowed"
+            className="min-w-0 flex-1 bg-transparent text-base text-[var(--semantic-text-primary,#181D27)] outline-none placeholder:text-[var(--semantic-text-placeholder,#A2A6B1)] disabled:cursor-not-allowed read-only:cursor-not-allowed"
             onFocus={() => {
               setIsDateInputFocused(true);
+              // Drop the placeholder masks while editing so the sanitizers only
+              // ever see real date/time characters.
+              setDateInputValue(displayValue);
               setOpen(true);
             }}
             onClick={() => setOpen(true)}
@@ -5674,13 +5713,13 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             onBlur={handleTypedDateBlur}
           />
           {showClear &&
-            (displayValue || dateInputValue) &&
+            (hasValue || dateInputValue) &&
             !disabled &&
             !readOnly && (
               <button
                 type="button"
                 aria-label="Clear date"
-                className="inline-flex size-5 items-center justify-center rounded text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary"
+                className="inline-flex size-5 items-center justify-center rounded text-[var(--semantic-text-muted,#717680)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)] hover:text-[var(--semantic-text-primary,#181D27)]"
                 onClick={clearValue}
               >
                 <X className="size-4" aria-hidden="true" />
@@ -5690,7 +5729,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             type="button"
             disabled={disabled || readOnly}
             aria-label={showCalendar ? "Open calendar" : "Open time picker"}
-            className="inline-flex shrink-0 items-center justify-center rounded text-semantic-text-muted hover:bg-semantic-bg-hover hover:text-semantic-text-primary disabled:cursor-not-allowed"
+            className="inline-flex shrink-0 items-center justify-center rounded text-[var(--semantic-text-muted,#717680)] hover:bg-[var(--semantic-bg-hover,#D5D7DA)] hover:text-[var(--semantic-text-primary,#181D27)] disabled:cursor-not-allowed"
             onClick={() => setOpen(!open)}
           >
             {showCalendar ? (
@@ -5711,14 +5750,14 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               <span
                 id={errorId}
                 role="alert"
-                className="text-sm text-semantic-error-primary"
+                className="text-sm text-[var(--semantic-error-primary,#F04438)]"
               >
                 {error}
               </span>
             ) : (
               <span
                 id={helperId}
-                className="text-sm text-semantic-text-muted"
+                className="text-sm text-[var(--semantic-text-muted,#717680)]"
               >
                 {helperText}
               </span>
@@ -10737,14 +10776,12 @@ import { cn } from "@/lib/utils";
  * SelectTrigger variants matching TextField styling
  */
 const selectTriggerVariants = cva(
-  "flex h-[42px] w-full items-center justify-between gap-2 rounded bg-semantic-bg-primary px-4 py-2 text-left text-base text-semantic-text-primary outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:min-w-0 [&>span]:flex-1 [&>span]:truncate",
+  "flex h-[42px] w-full items-center justify-between gap-2 rounded bg-[var(--semantic-bg-primary,#FFFFFF)] px-4 py-2 text-left text-base text-[var(--semantic-text-primary,#181D27)] outline-none transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)] [&>span]:min-w-0 [&>span]:flex-1 [&>span]:truncate",
   {
     variants: {
       state: {
-        default:
-          "border border-solid border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
-        error:
-          "border border-solid border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
+        default: "border border-solid border-[var(--semantic-border-input,#E9EAEB)] focus:outline-none focus:border-[var(--semantic-border-input-focus,#2BBCCA)] focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        error: "border border-solid border-[var(--semantic-error-primary,#F04438)] focus:outline-none focus:border-[var(--semantic-error-primary,#F04438)] focus:shadow-[0_0_0_1px_rgba(240,68,56,0.12)]",
       },
     },
     defaultVariants: {
@@ -10788,7 +10825,7 @@ const SelectTrigger = React.forwardRef(({ className, state, children, ...props }
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-4 shrink-0 text-semantic-text-muted opacity-70" />
+      <ChevronDown className="size-4 shrink-0 text-[var(--semantic-text-muted,#717680)] opacity-70" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -10803,7 +10840,7 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }: React.Co
     )}
     {...props}
   >
-    <ChevronUp className="size-4 text-semantic-text-muted" />
+    <ChevronUp className="size-4 text-[var(--semantic-text-muted,#717680)]" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -10817,7 +10854,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }: React.
     )}
     {...props}
   >
-    <ChevronDown className="size-4 text-semantic-text-muted" />
+    <ChevronDown className="size-4 text-[var(--semantic-text-muted,#717680)]" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -10969,7 +11006,7 @@ const SelectContent = React.forwardRef(
         <SelectPrimitive.Content
           ref={ref}
           className={cn(
-            "relative z-[9999] max-h-96 w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)] overflow-hidden rounded bg-semantic-bg-primary border border-solid border-semantic-border-layout shadow-md",
+            "relative z-[9999] max-h-96 w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)] overflow-hidden rounded bg-[var(--semantic-bg-primary,#FFFFFF)] border border-solid border-[var(--semantic-border-layout,#E9EAEB)] shadow-md",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -11008,7 +11045,7 @@ const SelectLabel = React.forwardRef(({ className, ...props }: React.ComponentPr
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "px-4 py-1.5 text-xs font-semibold text-semantic-text-muted",
+      "px-4 py-1.5 text-xs font-semibold text-[var(--semantic-text-muted,#717680)]",
       className
     )}
     {...props}
@@ -11033,8 +11070,8 @@ const SelectItem = React.forwardRef(({ className, children, truncateOptionText,
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex w-full cursor-pointer select-none items-start 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",
+        "relative flex w-full cursor-pointer select-none items-start rounded-sm py-2 pl-4 pr-8 text-base text-[var(--semantic-text-primary,#181D27)] outline-none",
+        "hover:bg-[var(--semantic-bg-ui,#F5F5F5)] focus:bg-[var(--semantic-bg-ui,#F5F5F5)]",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
@@ -11042,7 +11079,7 @@ const SelectItem = React.forwardRef(({ className, children, truncateOptionText,
     >
       <span className="absolute right-2 flex size-4 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check className="size-4 text-semantic-brand" />
+          <Check className="size-4 text-[var(--semantic-brand,#2BBCCA)]" />
         </SelectPrimitive.ItemIndicator>
       </span>
       <span
@@ -11064,7 +11101,7 @@ SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator>>) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--semantic-border-layout,#E9EAEB)]", className)}
     {...props}
   />
 ));

package/package.json

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