myoperator-mcp 0.2.321 → 0.2.322

package/dist/index.js

@@ -2520,6 +2520,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, Clock2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
 
 const DEFAULT_START_TIME = "10:30:00";
 const DEFAULT_END_TIME = "12:30:00";
@@ -2533,6 +2540,19 @@ const POPOVER_WIDTH_VAR = "--date-time-picker-popover-width";
 const CALENDAR_PLACEMENT: Placement = "bottom-start";
 const YEAR_RANGE_BEFORE = 100;
 const YEAR_RANGE_AFTER = 10;
+const CALENDAR_SELECT_CONTENT_SELECTOR =
+  "[data-date-time-picker-calendar-select]";
+const CALENDAR_SELECT_TRIGGER_CLASS = "!w-[90px] !gap-[6px]";
+const CALENDAR_SELECT_CONTENT_CLASS =
+  "z-[10060] w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)] max-h-[min(16rem,var(--radix-select-content-available-height))]";
+const DATE_TIME_INPUT_SEGMENT_RANGES = {
+  day: [0, 2],
+  month: [3, 5],
+  year: [6, 10],
+  hour: [11, 13],
+  minute: [14, 16],
+  meridiem: [17, 19],
+} as const;
 
 const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 const monthNames = Array.from({ length: 12 }, (_, monthIndex) =>
@@ -2719,6 +2739,12 @@ function isPointerInsideElement(
   return false;
 }
 
+function isPointerInsideSelector(event: MouseEvent, selector: string) {
+  const target = event.target;
+
+  return target instanceof Element && target.closest(selector) !== null;
+}
+
 function formatTimeForDisplay(time: string) {
   const [hour = "0", minute = "0"] = time.split(":");
   const hourNumber = Number(hour);
@@ -2796,6 +2822,307 @@ function parseTimePart(timePart?: string) {
   return \`\${hour.toString().padStart(2, "0")}:\${minuteValue}:\${secondValue}\`;
 }
 
+function getDaysInMonth(year: number, month: number) {
+  return new Date(year, month, 0).getDate();
+}
+
+function getPotentialMaxDay(month: number, year?: number) {
+  if (month === 2 && year === undefined) return 29;
+  if (month === 2) return getDaysInMonth(year ?? 2000, month);
+  if ([4, 6, 9, 11].includes(month)) return 30;
+
+  return 31;
+}
+
+function isPotentiallyValidDateParts(
+  dayValue: string,
+  monthValue: string,
+  yearValue: string
+) {
+  const day = Number(dayValue);
+  const month = Number(monthValue);
+  const year = Number(yearValue);
+
+  if (dayValue.length === 1 && day > 3) return false;
+  if (dayValue.length === 2 && (day < 1 || day > 31)) return false;
+  if (monthValue.length === 1 && month > 1) return false;
+  if (monthValue.length === 2 && (month < 1 || month > 12)) return false;
+  if (yearValue.length === 4 && year < 1000) return false;
+
+  if (dayValue.length === 2 && monthValue.length === 2) {
+    const maxDay = getPotentialMaxDay(
+      month,
+      yearValue.length === 4 ? year : undefined
+    );
+    if (day > maxDay) return false;
+  }
+
+  return true;
+}
+
+function isPotentiallyValidDateDigits(dateDigits: string) {
+  return isPotentiallyValidDateParts(
+    dateDigits.slice(0, 2),
+    dateDigits.slice(2, 4),
+    dateDigits.slice(4, 8)
+  );
+}
+
+function formatDateDigits(dateDigits: string) {
+  const day = dateDigits.slice(0, 2);
+  const month = dateDigits.slice(2, 4);
+  const year = dateDigits.slice(4, 8);
+
+  if (dateDigits.length <= 2) {
+    return dateDigits.length === 2 ? \`\${day}/\` : day;
+  }
+
+  if (dateDigits.length <= 4) {
+    return \`\${day}/\${dateDigits.length === 4 ? \`\${month}/\` : month}\`;
+  }
+
+  return \`\${day}/\${month}/\${year}\`;
+}
+
+function formatSegmentedDateInput(
+  dateSource: string,
+  day: string,
+  month: string,
+  year: string
+) {
+  const separatorCount = dateSource.match(/[/-]/g)?.length ?? 0;
+  const shouldShowMonth = separatorCount >= 1 || !!month || !!year;
+  const shouldShowYear = separatorCount >= 2 || !!year;
+
+  return [
+    day,
+    shouldShowMonth ? month : undefined,
+    shouldShowYear ? year : undefined,
+  ]
+    .filter((part): part is string => part !== undefined)
+    .join("/");
+}
+
+function consumeDigits(source: string, maxLength: number) {
+  let digits = "";
+  let endIndex = source.length;
+
+  for (let index = 0; index < source.length; index += 1) {
+    if (!/\\d/.test(source[index])) continue;
+
+    digits += source[index];
+    if (digits.length === maxLength) {
+      endIndex = index + 1;
+      break;
+    }
+  }
+
+  return {
+    digits,
+    rest: source.slice(endIndex),
+  };
+}
+
+function splitTypedDateInput(value: string) {
+  const firstSpaceIndex = value.search(/\\s/);
+  const dateSource =
+    firstSpaceIndex === -1 ? value : value.slice(0, firstSpaceIndex);
+  const restValue =
+    firstSpaceIndex === -1 ? "" : value.slice(firstSpaceIndex + 1);
+
+  if (/[/-]/.test(dateSource)) {
+    const [dayPart = "", monthPart = "", yearPart = ""] =
+      dateSource.split(/[/-]/);
+    const dayResult = consumeDigits(dayPart, 2);
+    const monthResult = consumeDigits(\`\${dayResult.rest}\${monthPart}\`, 2);
+    const yearResult = consumeDigits(
+      \`\${monthResult.rest}\${yearPart}\`,
+      4
+    );
+    const day = dayResult.digits;
+    const month = monthResult.digits;
+    const year = yearResult.digits;
+
+    return {
+      dateDigits: \`\${day}\${month}\${year}\`,
+      dateValue: formatSegmentedDateInput(dateSource, day, month, year),
+      isComplete: !!day && !!month && year.length === 4,
+      isValid: isPotentiallyValidDateParts(day, month, year),
+      restValue: [yearResult.rest, restValue].filter(Boolean).join(" "),
+    };
+  }
+
+  let dateDigits = "";
+  let dateEndIndex = value.length;
+
+  for (let index = 0; index < value.length; index += 1) {
+    const character = value[index];
+
+    if (/\\d/.test(character)) {
+      dateDigits += character;
+      if (dateDigits.length === 8) {
+        dateEndIndex = index + 1;
+        break;
+      }
+    }
+  }
+
+  return {
+    dateDigits,
+    dateValue: formatDateDigits(dateDigits),
+    isComplete: dateDigits.length === 8,
+    isValid: isPotentiallyValidDateDigits(dateDigits),
+    restValue: value.slice(dateEndIndex),
+  };
+}
+
+function isPotentiallyValidTimeDigits(timeDigits: string) {
+  const hourValue = timeDigits.slice(0, 2);
+  const minuteValue = timeDigits.slice(2, 4);
+  const hour = Number(hourValue);
+  const minute = Number(minuteValue);
+
+  if (hourValue.length === 1 && hour > 1) return false;
+  if (hourValue.length === 2 && (hour < 1 || hour > 12)) return false;
+  if (minuteValue.length === 1 && minute > 5) return false;
+  if (minuteValue.length === 2 && minute > 59) return false;
+
+  return true;
+}
+
+function formatMeridiemInput(letters: string) {
+  if (!letters) return "";
+  if ("AM".startsWith(letters)) return letters;
+  if ("PM".startsWith(letters)) return letters;
+
+  return null;
+}
+
+function formatTimeInput(restValue: string) {
+  const normalizedValue = restValue.toUpperCase();
+  const timeDigits = normalizedValue.replace(/\\D/g, "").slice(0, 4);
+  const meridiemLetters = normalizedValue.replace(/[^A-Z]/g, "");
+  const meridiem = formatMeridiemInput(meridiemLetters.slice(0, 2));
+
+  if (!timeDigits && !meridiem) return "";
+  if (!isPotentiallyValidTimeDigits(timeDigits) || meridiem === null) {
+    return null;
+  }
+
+  const timeValue =
+    timeDigits.length <= 2
+      ? timeDigits
+      : \`\${timeDigits.slice(0, 2)}:\${timeDigits.slice(2, 4)}\`;
+
+  return [timeValue, meridiem].filter(Boolean).join(" ");
+}
+
+function sanitizeTypedDateTimeInput(value: string, previousValue: string) {
+  const trimmedValue = value.trimStart();
+  if (/^[A-Za-z]/.test(trimmedValue)) return previousValue;
+
+  const normalizedValue = value
+    .toUpperCase()
+    .replace(/[^0-9\\s/:APM-]/g, "");
+  const { dateDigits, dateValue, isComplete, isValid, restValue } =
+    splitTypedDateInput(normalizedValue);
+  const limitedDateDigits = dateDigits.slice(0, 8);
+
+  if (!limitedDateDigits) return "";
+  if (!isValid) return previousValue;
+
+  const formattedTime = isComplete ? formatTimeInput(restValue) : "";
+  if (formattedTime === null) return previousValue;
+
+  return [dateValue, formattedTime].filter(Boolean).join(" ");
+}
+
+type DateTimeInputSegment = keyof typeof DATE_TIME_INPUT_SEGMENT_RANGES;
+
+function getDateTimeInputSegment(cursorPosition: number): DateTimeInputSegment {
+  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.day[1]) return "day";
+  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.month[1]) return "month";
+  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.year[1]) return "year";
+  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.hour[1]) return "hour";
+  if (cursorPosition <= DATE_TIME_INPUT_SEGMENT_RANGES.minute[1]) {
+    return "minute";
+  }
+
+  return "meridiem";
+}
+
+function clampDateToMonth(year: number, month: number, day: number) {
+  return new Date(year, month, Math.min(day, getDaysInMonth(year, month + 1)));
+}
+
+function stepDateTimeInputValue(
+  value: string,
+  cursorPosition: number,
+  direction: 1 | -1,
+  fallbackTime: string
+) {
+  const typedDateTime = parseTypedDateTime(value);
+  if (!typedDateTime) return null;
+
+  const segment = getDateTimeInputSegment(cursorPosition);
+  const nextDate = new Date(typedDateTime.date);
+  const [hourValue = "0", minuteValue = "0", secondValue = "00"] = (
+    typedDateTime.startTime ?? fallbackTime
+  ).split(":");
+  nextDate.setHours(Number(hourValue), Number(minuteValue), Number(secondValue));
+
+  if (segment === "day") {
+    nextDate.setDate(nextDate.getDate() + direction);
+  } else if (segment === "month") {
+    const day = nextDate.getDate();
+    const steppedMonth = clampDateToMonth(
+      nextDate.getFullYear(),
+      nextDate.getMonth() + direction,
+      day
+    );
+    nextDate.setFullYear(
+      steppedMonth.getFullYear(),
+      steppedMonth.getMonth(),
+      steppedMonth.getDate()
+    );
+  } else if (segment === "year") {
+    const day = nextDate.getDate();
+    const steppedYear = clampDateToMonth(
+      nextDate.getFullYear() + direction,
+      nextDate.getMonth(),
+      day
+    );
+    nextDate.setFullYear(
+      steppedYear.getFullYear(),
+      steppedYear.getMonth(),
+      steppedYear.getDate()
+    );
+  } else if (segment === "hour") {
+    nextDate.setHours(nextDate.getHours() + direction);
+  } else if (segment === "minute") {
+    nextDate.setMinutes(nextDate.getMinutes() + direction);
+  } else {
+    nextDate.setHours(nextDate.getHours() + 12 * direction);
+  }
+
+  const startTime = \`\${nextDate
+    .getHours()
+    .toString()
+    .padStart(2, "0")}:\${nextDate
+    .getMinutes()
+    .toString()
+    .padStart(2, "0")}:\${nextDate
+    .getSeconds()
+    .toString()
+    .padStart(2, "0")}\`;
+
+  return {
+    date: startOfDay(nextDate),
+    startTime,
+    segment,
+  };
+}
+
 function parseTypedDateTime(value: string) {
   const typedValue = value.trim();
   if (!typedValue) return undefined;
@@ -3002,7 +3329,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       const handlePointerDown = (event: MouseEvent) => {
         if (
           !isPointerInsideElement(event, rootRef.current) &&
-          !isPointerInsideElement(event, popoverRef.current)
+          !isPointerInsideElement(event, popoverRef.current) &&
+          !isPointerInsideSelector(event, CALENDAR_SELECT_CONTENT_SELECTOR)
         ) {
           setOpen(false);
         }
@@ -3061,9 +3389,20 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const handleTypedDateChange = (
       event: React.ChangeEvent<HTMLInputElement>
     ) => {
-      const nextInputValue = event.target.value;
+      const nextInputValue = sanitizeTypedDateTimeInput(
+        event.target.value,
+        dateInputValue
+      );
       setDateInputValue(nextInputValue);
 
+      if (
+        nextInputValue === dateInputValue &&
+        event.target.value !== dateInputValue
+      ) {
+        event.currentTarget.value = nextInputValue;
+        return;
+      }
+
       const typedDateTime = parseTypedDateTime(nextInputValue);
       if (typedDateTime === undefined) {
         updateValue({ ...currentValue, date: undefined });
@@ -3086,6 +3425,53 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       }
     };
 
+    const handleTypedDateKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+
+      const direction = event.key === "ArrowUp" ? 1 : -1;
+      const cursorPosition =
+        event.currentTarget.selectionStart ?? dateInputValue.length;
+      const inputElement = event.currentTarget;
+      const steppedDateTime = stepDateTimeInputValue(
+        dateInputValue,
+        cursorPosition,
+        direction,
+        currentValue.startTime
+      );
+
+      if (!steppedDateTime) return;
+      if (
+        (effectiveMinDate &&
+          isBeforeDay(steppedDateTime.date, effectiveMinDate)) ||
+        (maxDate && isAfterDay(steppedDateTime.date, maxDate))
+      ) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const nextInputValue = formatDateForDisplay(
+        steppedDateTime.date,
+        steppedDateTime.startTime
+      );
+      const [selectionStart, selectionEnd] =
+        DATE_TIME_INPUT_SEGMENT_RANGES[steppedDateTime.segment];
+
+      setDateInputValue(nextInputValue);
+      updateValue({
+        ...currentValue,
+        date: steppedDateTime.date,
+        startTime: steppedDateTime.startTime,
+      });
+      updateVisibleMonth(steppedDateTime.date);
+
+      window.requestAnimationFrame(() => {
+        inputElement.setSelectionRange(selectionStart, selectionEnd);
+      });
+    };
+
     const handleTypedDateBlur = () => {
       setIsDateInputFocused(false);
       setDateInputValue(
@@ -3133,71 +3519,89 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               >
                 <ChevronLeft className="size-4" aria-hidden="true" />
               </button>
-              <div className="flex min-w-0 items-center gap-2">
+              <div className="flex min-w-0 items-center gap-1.5">
                 <label className="sr-only" htmlFor={\`\${triggerId}-month\`}>
                   Month
                 </label>
-                <select
-                  id={\`\${triggerId}-month\`}
-                  aria-label="Month"
-                  value={visibleMonth.getMonth()}
-                  className="h-8 rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary px-2 text-sm font-medium text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50"
-                  onChange={(event) =>
+                <Select
+                  value={visibleMonth.getMonth().toString()}
+                  onValueChange={(nextMonth) =>
                     updateVisibleMonth(
                       new Date(
                         visibleMonth.getFullYear(),
-                        Number(event.target.value),
+                        Number(nextMonth),
                         1
                       )
                     )
                   }
                 >
-                  {monthNames.map((monthName, monthIndex) => {
-                    const optionMonth = new Date(
-                      visibleMonth.getFullYear(),
-                      monthIndex,
-                      1
-                    );
-                    const isDisabled =
-                      (effectiveMinDate &&
-                        isMonthBefore(optionMonth, effectiveMinDate)) ||
-                      (maxDate && isMonthAfter(optionMonth, maxDate));
-
-                    return (
-                      <option
-                        key={monthName}
-                        value={monthIndex}
-                        disabled={!!isDisabled}
-                      >
-                        {monthName}
-                      </option>
-                    );
-                  })}
-                </select>
+                  <SelectTrigger
+                    id={\`\${triggerId}-month\`}
+                    aria-label="Month"
+                    className={CALENDAR_SELECT_TRIGGER_CLASS}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent
+                    data-date-time-picker-calendar-select=""
+                    className={CALENDAR_SELECT_CONTENT_CLASS}
+                  >
+                    {monthNames.map((monthName, monthIndex) => {
+                      const optionMonth = new Date(
+                        visibleMonth.getFullYear(),
+                        monthIndex,
+                        1
+                      );
+                      const isDisabled =
+                        (effectiveMinDate &&
+                          isMonthBefore(optionMonth, effectiveMinDate)) ||
+                        (maxDate && isMonthAfter(optionMonth, maxDate));
+
+                      return (
+                        <SelectItem
+                          key={monthName}
+                          value={monthIndex.toString()}
+                          disabled={!!isDisabled}
+                        >
+                          {monthName}
+                        </SelectItem>
+                      );
+                    })}
+                  </SelectContent>
+                </Select>
                 <label className="sr-only" htmlFor={\`\${triggerId}-year\`}>
                   Year
                 </label>
-                <select
-                  id={\`\${triggerId}-year\`}
-                  aria-label="Year"
-                  value={visibleMonth.getFullYear()}
-                  className="h-8 rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary px-2 text-sm font-medium text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50"
-                  onChange={(event) =>
+                <Select
+                  value={visibleMonth.getFullYear().toString()}
+                  onValueChange={(nextYear) =>
                     updateVisibleMonth(
                       new Date(
-                        Number(event.target.value),
+                        Number(nextYear),
                         visibleMonth.getMonth(),
                         1
                       )
                     )
                   }
                 >
-                  {yearOptions.map((year) => (
-                    <option key={year} value={year}>
-                      {year}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger
+                    id={\`\${triggerId}-year\`}
+                    aria-label="Year"
+                    className={CALENDAR_SELECT_TRIGGER_CLASS}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent
+                    data-date-time-picker-calendar-select=""
+                    className={CALENDAR_SELECT_CONTENT_CLASS}
+                  >
+                    {yearOptions.map((year) => (
+                      <SelectItem key={year} value={year.toString()}>
+                        {year}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
                 <div id={\`\${triggerId}-calendar-heading\`} className="sr-only">
                   {monthFormatter.format(visibleMonth)}
                 </div>
@@ -3384,6 +3788,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             }}
             onClick={() => setOpen(true)}
             onChange={handleTypedDateChange}
+            onKeyDown={handleTypedDateKeyDown}
             onBlur={handleTypedDateBlur}
           />
           {showClear && displayValue && !disabled && !readOnly && (
@@ -6607,7 +7012,7 @@ const ReplyQuote = React.forwardRef(
       <div
         ref={ref}
         className={cn(
-          "tw-w-full tw-min-w-0 tw-bg-[var(--semantic-bg-ui,#F5F5F5)] tw-border-l-[3px] tw-border-solid tw-border-[var(--semantic-border-accent,#27ABB8)] tw-rounded-sm tw-px-4 tw-py-1.5 tw-mb-2 tw-h-[56px] tw-flex tw-flex-col tw-justify-center tw-gap-0 tw-overflow-hidden tw-cursor-pointer hover:tw-bg-[var(--semantic-bg-hover,#D5D7DA)] tw-transition-colors",
+          "tw-max-w-full tw-min-w-0 tw-bg-[var(--semantic-bg-ui,#F5F5F5)] tw-border-l-[3px] tw-border-solid tw-border-[var(--semantic-border-accent,#27ABB8)] tw-rounded-sm tw-px-4 tw-py-1.5 tw-mb-2 tw-h-[56px] tw-flex tw-flex-col tw-justify-center tw-gap-0 tw-overflow-hidden tw-cursor-pointer hover:tw-bg-[var(--semantic-bg-hover,#D5D7DA)] tw-transition-colors",
           isInteractive && "focus-visible:tw-ring-2 focus-visible:tw-ring-[var(--semantic-border-focus,#2BBCCA)] focus-visible:tw-ring-offset-1 focus-visible:tw-outline-none",
           className
         )}
@@ -6621,9 +7026,9 @@ const ReplyQuote = React.forwardRef(
         <p className="tw-m-0 tw-min-w-0 tw-shrink-0 tw-truncate tw-text-[14px] tw-font-semibold tw-leading-5 tw-tracking-[0.014px] tw-text-[var(--semantic-text-primary,#181D27)]">
           {sender}
         </p>
-        <p className="tw-m-0 tw-min-h-0 tw-min-w-0 tw-flex-1 tw-truncate tw-text-[14px] tw-leading-5 tw-text-[var(--semantic-text-muted,#717680)]">
+        <div className="tw-m-0 tw-min-h-0 tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-text-[14px] tw-leading-5 tw-text-[var(--semantic-text-muted,#717680)] [&_*]:tw-inline">
           {message}
-        </p>
+        </div>
       </div>
     );
   }
@@ -6977,6 +7382,7 @@ const SelectField = React.forwardRef(
           </SelectTrigger>
           <SelectContent
             onViewportScrollEnd={hasMore !== false ? onScrollEnd : undefined}
+            hideScrollButtons={totalRendered === 0}
           >
             {/* Search input */}
             {searchable && (
@@ -7233,6 +7639,7 @@ export type SelectContentProps = React.ComponentPropsWithoutRef<
    * can still read scrollTop/scrollHeight/clientHeight from it.
    */
   onViewportScrollEnd?: (event: React.UIEvent<HTMLDivElement>) => void;
+  hideScrollButtons?: boolean;
 };
 
 const BOTTOM_THRESHOLD_PX = 24;
@@ -7245,6 +7652,7 @@ const SelectContent = React.forwardRef(
       children,
       position = "popper",
       onViewportScrollEnd,
+      hideScrollButtons,
       ...props
     }: SelectContentProps,
     ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>
@@ -7318,7 +7726,7 @@ const SelectContent = React.forwardRef(
           position={position}
           {...props}
         >
-          <SelectScrollUpButton />
+          {!hideScrollButtons && <SelectScrollUpButton />}
           <SelectPrimitive.Viewport
             ref={setViewport}
             data-select-viewport=""
@@ -7330,7 +7738,7 @@ const SelectContent = React.forwardRef(
           >
             {children}
           </SelectPrimitive.Viewport>
-          <SelectScrollDownButton />
+          {!hideScrollButtons && <SelectScrollDownButton />}
         </SelectPrimitive.Content>
       </SelectPrimitive.Portal>
     );

package/package.json

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