myoperator-mcp 0.2.320 → 0.2.322

package/dist/index.js

@@ -2517,14 +2517,16 @@ import {
   type Strategy,
 } from "@floating-ui/react-dom";
 import { cva, type VariantProps } from "class-variance-authority";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Clock2,
-  X,
-} from "lucide-react";
+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";
@@ -2536,8 +2538,28 @@ const MAX_POPOVER_HEIGHT = 420;
 const POPOVER_SCROLL_HEIGHT_VAR = "--date-time-picker-scroll-height";
 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) =>
+  new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+    new Date(2026, monthIndex, 1)
+  )
+);
 const monthFormatter = new Intl.DateTimeFormat("en-US", {
   month: "long",
   year: "numeric",
@@ -2650,6 +2672,43 @@ function addMonths(date: Date, months: number) {
   return new Date(date.getFullYear(), date.getMonth() + months, 1);
 }
 
+function getMonthKey(date: Date) {
+  return date.getFullYear() * 12 + date.getMonth();
+}
+
+function isMonthBefore(date: Date, minDate: Date) {
+  return getMonthKey(date) < getMonthKey(minDate);
+}
+
+function isMonthAfter(date: Date, maxDate: Date) {
+  return getMonthKey(date) > getMonthKey(maxDate);
+}
+
+function clampMonth(date: Date, minDate?: Date, maxDate?: Date) {
+  if (minDate && isMonthBefore(date, minDate)) return startOfMonth(minDate);
+  if (maxDate && isMonthAfter(date, maxDate)) return startOfMonth(maxDate);
+
+  return startOfMonth(date);
+}
+
+function getYearOptions(visibleMonth: Date, minDate?: Date, maxDate?: Date) {
+  const currentYear = new Date().getFullYear();
+  const selectedYear = visibleMonth.getFullYear();
+  const startYear = Math.min(
+    minDate?.getFullYear() ?? currentYear - YEAR_RANGE_BEFORE,
+    selectedYear
+  );
+  const endYear = Math.max(
+    maxDate?.getFullYear() ?? currentYear + YEAR_RANGE_AFTER,
+    selectedYear
+  );
+
+  return Array.from(
+    { length: endYear - startYear + 1 },
+    (_, index) => startYear + index
+  );
+}
+
 function getCalendarDays(month: Date) {
   const firstDay = startOfMonth(month);
   const gridStart = new Date(firstDay);
@@ -2680,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);
@@ -2697,7 +2762,383 @@ function formatDateForDisplay(date?: Date, time?: string) {
   const year = date.getFullYear();
   const formattedTime = formatTimeForDisplay(time ?? DEFAULT_START_TIME);
 
-  return \`\${month}/\${day}/\${year} \${formattedTime}\`;
+  return \`\${day}/\${month}/\${year} \${formattedTime}\`;
+}
+
+function parseDatePart(datePart: string) {
+  const isoMatch = datePart.match(/^(\\d{4})-(\\d{1,2})-(\\d{1,2})$/);
+  const dayFirstMatch = datePart.match(/^(\\d{1,2})[/-](\\d{1,2})[/-](\\d{4})$/);
+  const [, yearValue, isoMonthValue, isoDayValue] = isoMatch ?? [];
+  const [, dayValue, monthValue, dayFirstYearValue] = dayFirstMatch ?? [];
+
+  const year = Number(yearValue ?? dayFirstYearValue);
+  const month = Number(isoMonthValue ?? monthValue);
+  const day = Number(isoDayValue ?? dayValue);
+
+  if (!year || !month || !day) return null;
+
+  const parsedDate = new Date(year, month - 1, day);
+  if (
+    parsedDate.getFullYear() !== year ||
+    parsedDate.getMonth() !== month - 1 ||
+    parsedDate.getDate() !== day
+  ) {
+    return null;
+  }
+
+  return parsedDate;
+}
+
+function parseTimePart(timePart?: string) {
+  if (!timePart) return undefined;
+
+  const timeMatch = timePart
+    .trim()
+    .match(/^(\\d{1,2}):(\\d{2})(?::(\\d{2}))?\\s*(AM|PM)?$/i);
+  if (!timeMatch) return null;
+
+  const [, hourValue, minuteValue, secondValue = "00", meridiem] = timeMatch;
+  let hour = Number(hourValue);
+  const minute = Number(minuteValue);
+  const second = Number(secondValue);
+
+  if (
+    minute > 59 ||
+    second > 59 ||
+    (meridiem ? hour < 1 || hour > 12 : hour > 23)
+  ) {
+    return null;
+  }
+
+  if (meridiem) {
+    const normalizedMeridiem = meridiem.toUpperCase();
+    if (normalizedMeridiem === "AM") {
+      hour = hour === 12 ? 0 : hour;
+    } else {
+      hour = hour === 12 ? 12 : hour + 12;
+    }
+  }
+
+  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;
+
+  const typedMatch = typedValue.match(
+    /^(\\d{4}-\\d{1,2}-\\d{1,2}|\\d{1,2}[/-]\\d{1,2}[/-]\\d{4})(?:\\s+(.+))?$/
+  );
+  if (!typedMatch) return null;
+
+  const [, datePart, timePart] = typedMatch;
+  const date = parseDatePart(datePart);
+  const startTime = parseTimePart(timePart);
+
+  if (!date || startTime === null) return null;
+
+  return { date, startTime };
 }
 
 function formatHiddenValue(value: DateTimePickerValue) {
@@ -2775,8 +3216,12 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const [visibleMonth, setVisibleMonth] = React.useState(() =>
       startOfMonth(currentValue.date ?? new Date())
     );
+    const [dateInputValue, setDateInputValue] = React.useState(() =>
+      formatDateForDisplay(currentValue.date, currentValue.startTime)
+    );
+    const [isDateInputFocused, setIsDateInputFocused] = React.useState(false);
     const rootRef = React.useRef<HTMLDivElement | null>(null);
-    const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+    const triggerRef = React.useRef<HTMLDivElement | null>(null);
     const popoverRef = React.useRef<HTMLDivElement | null>(null);
     const usesContainerPortal = portalContainer !== undefined;
     const floatingStrategy: Strategy = usesContainerPortal
@@ -2807,16 +3252,15 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       ],
       []
     );
-    const { refs, floatingStyles, isPositioned } =
-      useFloating<HTMLButtonElement>({
-        open,
-        placement: CALENDAR_PLACEMENT,
-        strategy: floatingStrategy,
-        transform: false,
-        middleware: floatingMiddleware,
-        whileElementsMounted: (reference, floating, update) =>
-          autoUpdate(reference, floating, update, { animationFrame: true }),
-      });
+    const { refs, floatingStyles, isPositioned } = useFloating<HTMLDivElement>({
+      open,
+      placement: CALENDAR_PLACEMENT,
+      strategy: floatingStrategy,
+      transform: false,
+      middleware: floatingMiddleware,
+      whileElementsMounted: (reference, floating, update) =>
+        autoUpdate(reference, floating, update, { animationFrame: true }),
+    });
     const calendarDays = React.useMemo(
       () => getCalendarDays(visibleMonth),
       [visibleMonth]
@@ -2852,7 +3296,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     );
 
     const setTriggerRef = React.useCallback(
-      (node: HTMLButtonElement | null) => {
+      (node: HTMLDivElement | null) => {
         triggerRef.current = node;
         refs.setReference(node);
       },
@@ -2873,13 +3317,20 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       }
     }, [currentValue.date]);
 
+    React.useEffect(() => {
+      if (!isDateInputFocused) {
+        setDateInputValue(displayValue);
+      }
+    }, [displayValue, isDateInputFocused]);
+
     React.useEffect(() => {
       if (!open) return;
 
       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);
         }
@@ -2915,6 +3366,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       event.stopPropagation();
       if (readOnly) return;
 
+      setDateInputValue("");
       updateValue({
         date: undefined,
         startTime: currentValue.startTime,
@@ -2922,6 +3374,111 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       });
     };
 
+    const yearOptions = React.useMemo(
+      () => getYearOptions(visibleMonth, effectiveMinDate, maxDate),
+      [effectiveMinDate, maxDate, visibleMonth]
+    );
+
+    const updateVisibleMonth = React.useCallback(
+      (nextMonth: Date) => {
+        setVisibleMonth(clampMonth(nextMonth, effectiveMinDate, maxDate));
+      },
+      [effectiveMinDate, maxDate]
+    );
+
+    const handleTypedDateChange = (
+      event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+      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 });
+        return;
+      }
+
+      if (
+        typedDateTime &&
+        !(
+          effectiveMinDate && isBeforeDay(typedDateTime.date, effectiveMinDate)
+        ) &&
+        !(maxDate && isAfterDay(typedDateTime.date, maxDate))
+      ) {
+        updateValue({
+          ...currentValue,
+          date: typedDateTime.date,
+          startTime: typedDateTime.startTime ?? currentValue.startTime,
+        });
+        updateVisibleMonth(typedDateTime.date);
+      }
+    };
+
+    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(
+        formatDateForDisplay(currentValue.date, currentValue.startTime)
+      );
+    };
+
     const popover =
       open &&
       !disabled &&
@@ -2953,26 +3510,107 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           onTouchMove={(event) => event.stopPropagation()}
         >
           <div className="p-3 touch-pan-y">
-            <div className="mb-3 flex items-center justify-between">
+            <div className="mb-3 flex items-center justify-between gap-2">
               <button
                 type="button"
                 aria-label="Previous month"
                 className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
-                onClick={() => setVisibleMonth((month) => addMonths(month, -1))}
+                onClick={() => updateVisibleMonth(addMonths(visibleMonth, -1))}
               >
                 <ChevronLeft className="size-4" aria-hidden="true" />
               </button>
-              <div
-                id={\`\${triggerId}-calendar-heading\`}
-                className="text-sm font-semibold text-semantic-text-primary"
-              >
-                {monthFormatter.format(visibleMonth)}
+              <div className="flex min-w-0 items-center gap-1.5">
+                <label className="sr-only" htmlFor={\`\${triggerId}-month\`}>
+                  Month
+                </label>
+                <Select
+                  value={visibleMonth.getMonth().toString()}
+                  onValueChange={(nextMonth) =>
+                    updateVisibleMonth(
+                      new Date(
+                        visibleMonth.getFullYear(),
+                        Number(nextMonth),
+                        1
+                      )
+                    )
+                  }
+                >
+                  <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
+                  value={visibleMonth.getFullYear().toString()}
+                  onValueChange={(nextYear) =>
+                    updateVisibleMonth(
+                      new Date(
+                        Number(nextYear),
+                        visibleMonth.getMonth(),
+                        1
+                      )
+                    )
+                  }
+                >
+                  <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>
               </div>
               <button
                 type="button"
                 aria-label="Next month"
                 className="p-1 rounded hover:bg-semantic-bg-hover text-semantic-text-secondary transition-colors"
-                onClick={() => setVisibleMonth((month) => addMonths(month, 1))}
+                onClick={() => updateVisibleMonth(addMonths(visibleMonth, 1))}
               >
                 <ChevronRight className="size-4" aria-hidden="true" />
               </button>
@@ -3123,13 +3761,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             value={formatHiddenValue(currentValue)}
           />
         )}
-        <button
+        <div
           ref={setTriggerRef}
-          id={triggerId}
-          type="button"
-          disabled={disabled || readOnly}
-          aria-haspopup="dialog"
-          aria-expanded={open}
           className={cn(
             dateTimePickerTriggerVariants({ size, state }),
             open &&
@@ -3137,32 +3770,49 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
               "border-semantic-border-input-focus/50 shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
             !displayValue && "text-semantic-text-placeholder"
           )}
-          onClick={() => setOpen(!open)}
         >
-          <span
-            className={cn(
-              "min-w-0 flex-1 truncate",
-              !displayValue && "font-normal"
-            )}
-          >
-            {displayValue || placeholder}
-          </span>
+          <input
+            id={triggerId}
+            type="text"
+            disabled={disabled}
+            readOnly={readOnly}
+            value={dateInputValue}
+            placeholder={placeholder}
+            aria-haspopup="dialog"
+            aria-expanded={open}
+            aria-label="Date and time"
+            className="min-w-0 flex-1 bg-transparent text-sm text-semantic-text-primary outline-none placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed read-only:cursor-not-allowed"
+            onFocus={() => {
+              setIsDateInputFocused(true);
+              setOpen(true);
+            }}
+            onClick={() => setOpen(true)}
+            onChange={handleTypedDateChange}
+            onKeyDown={handleTypedDateKeyDown}
+            onBlur={handleTypedDateBlur}
+          />
           {showClear && displayValue && !disabled && !readOnly && (
-            <span
-              aria-hidden="true"
+            <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"
               onClick={clearValue}
             >
               <X className="size-4" aria-hidden="true" />
-            </span>
+            </button>
           )}
-          <FigmaCalendarIcon
-            className={cn(
-              "shrink-0 text-semantic-text-muted",
-              size === "sm" ? "size-4" : "size-[18px]"
-            )}
-          />
-        </button>
+          <button
+            type="button"
+            disabled={disabled || readOnly}
+            aria-label="Open calendar"
+            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"
+            onClick={() => setOpen(!open)}
+          >
+            <FigmaCalendarIcon
+              className={cn(size === "sm" ? "size-4" : "size-[18px]")}
+            />
+          </button>
+        </div>
 
         {popover}
       </div>
@@ -6362,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
         )}
@@ -6376,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>
     );
   }
@@ -6732,6 +7382,7 @@ const SelectField = React.forwardRef(
           </SelectTrigger>
           <SelectContent
             onViewportScrollEnd={hasMore !== false ? onScrollEnd : undefined}
+            hideScrollButtons={totalRendered === 0}
           >
             {/* Search input */}
             {searchable && (
@@ -6988,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;
@@ -7000,6 +7652,7 @@ const SelectContent = React.forwardRef(
       children,
       position = "popper",
       onViewportScrollEnd,
+      hideScrollButtons,
       ...props
     }: SelectContentProps,
     ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>
@@ -7073,7 +7726,7 @@ const SelectContent = React.forwardRef(
           position={position}
           {...props}
         >
-          <SelectScrollUpButton />
+          {!hideScrollButtons && <SelectScrollUpButton />}
           <SelectPrimitive.Viewport
             ref={setViewport}
             data-select-viewport=""
@@ -7085,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.320",
+  "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",