myoperator-mcp 0.2.356 → 0.2.358

package/dist/index.js

@@ -2574,14 +2574,22 @@ 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 { ChevronDown, ChevronLeft, ChevronRight, Clock2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const DEFAULT_START_TIME = "10:30:00";
 const DEFAULT_END_TIME = "12:30:00";
+const DEFAULT_MINUTE_STEP = 5;
+const DEFAULT_SECOND_STEP = 5;
+const TIME_COLUMN_MAX_HEIGHT = 168;
 const DEFAULT_PLACEHOLDER = "--/--/---- --:-- --";
 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
+// narrow mobile viewport.
+const MIN_POPOVER_WIDTH = 280;
+const MAX_POPOVER_WIDTH = 360;
 const POPOVER_MARGIN = 8;
 const POPOVER_GAP = 4;
 const MAX_POPOVER_HEIGHT = 420;
@@ -2664,6 +2672,8 @@ export interface DateTimePickerProps
   name?: string;
   showEndTime?: boolean;
   showSeconds?: boolean;
+  minuteStep?: number;
+  secondStep?: number;
   showClear?: boolean;
   closeOnSelect?: boolean;
   startTimeLabel?: string;
@@ -2802,6 +2812,129 @@ function isPointerInsideElement(
   return false;
 }
 
+// Floating sub-dropdowns (Month / Year / Time) are portaled to document.body
+// so they escape the popover's overflow clipping. Because they live outside the
+// popover in the DOM, the picker's own outside-click handler can't recognize
+// them via \`contains\`. Tagging each portaled panel with this attribute lets the
+// handler detect clicks that land inside an open sub-dropdown.
+const DROPDOWN_MARKER_ATTR = "data-dtp-dropdown";
+const DROPDOWN_GAP = 4;
+const DROPDOWN_MARGIN = 8;
+const DROPDOWN_MAX_HEIGHT = 256;
+const DROPDOWN_Z_INDEX = 10060;
+const DROPDOWN_PLACEMENT: Placement = "bottom-start";
+const DROPDOWN_WIDTH_VAR = "--date-time-picker-dropdown-width";
+const DROPDOWN_HEIGHT_VAR = "--date-time-picker-dropdown-height";
+
+function isPointerInsideDropdown(event: MouseEvent) {
+  const target = event.target;
+
+  return (
+    target instanceof Element &&
+    target.closest(\`[\${DROPDOWN_MARKER_ATTR}]\`) !== null
+  );
+}
+
+// Shared floating + dismissal behavior for the Month, Year, and Time dropdowns.
+// Each instance positions its panel against its trigger, mirrors the picker's
+// portal strategy, and closes itself on an outside click or Escape \u2014 without
+// collapsing the parent picker (Escape is captured so it doesn't bubble to the
+// picker's own Escape handler).
+function useFloatingDropdown({
+  open,
+  onOpenChange,
+  strategy,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  strategy: Strategy;
+}) {
+  const middleware = React.useMemo(
+    () => [
+      offset(DROPDOWN_GAP),
+      flip({ padding: DROPDOWN_MARGIN }),
+      shift({ padding: DROPDOWN_MARGIN }),
+      floatingSize({
+        padding: DROPDOWN_MARGIN,
+        apply({ availableHeight, rects, elements }) {
+          const maxHeight = Math.max(
+            1,
+            Math.min(DROPDOWN_MAX_HEIGHT, availableHeight)
+          );
+          elements.floating.style.setProperty(
+            DROPDOWN_HEIGHT_VAR,
+            \`\${maxHeight}px\`
+          );
+          elements.floating.style.setProperty(
+            DROPDOWN_WIDTH_VAR,
+            \`\${rects.reference.width}px\`
+          );
+        },
+      }),
+    ],
+    []
+  );
+
+  const floating = useFloating<HTMLButtonElement>({
+    open,
+    placement: DROPDOWN_PLACEMENT,
+    strategy,
+    transform: false,
+    middleware,
+    whileElementsMounted: (reference, floatingEl, update) =>
+      autoUpdate(reference, floatingEl, update, { animationFrame: true }),
+  });
+
+  const { refs, floatingStyles, isPositioned } = floating;
+
+  React.useEffect(() => {
+    if (!open) return;
+
+    const handlePointerDown = (event: MouseEvent) => {
+      const reference = refs.reference.current as HTMLElement | null;
+      if (
+        !isPointerInsideElement(event, reference) &&
+        !isPointerInsideElement(event, refs.floating.current)
+      ) {
+        onOpenChange(false);
+      }
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        // Capture phase + stopPropagation keeps Escape from also reaching the
+        // picker's handler, so it dismisses just this dropdown.
+        event.stopPropagation();
+        onOpenChange(false);
+      }
+    };
+
+    // Capture phase: the popover container calls stopPropagation on its own
+    // mousedown, which would otherwise swallow clicks inside it before they
+    // reach a bubble-phase document listener. Listening on capture runs this
+    // handler top-down \u2014 before that stopPropagation \u2014 so clicks anywhere
+    // outside the dropdown (including elsewhere in the popover) dismiss it.
+    document.addEventListener("mousedown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [open, onOpenChange, refs]);
+
+  const setReference = React.useCallback(
+    (node: HTMLButtonElement | null) => refs.setReference(node),
+    [refs]
+  );
+  const setFloating = React.useCallback(
+    (node: HTMLDivElement | null) => refs.setFloating(node),
+    [refs]
+  );
+
+  return { setReference, setFloating, floatingStyles, isPositioned };
+}
+
 function timeHasVisibleSeconds(time?: string) {
   const [, , second = "00"] = (time ?? "").split(":");
   return /^\\d{1,2}$/.test(second) && Number(second) !== 0;
@@ -3321,32 +3454,45 @@ function stepDateTimeInputValue(
   };
 }
 
-function formatTimeForTimeInput(time: string, showSeconds: boolean) {
-  const normalizedTime = parseTimePart(time) ?? DEFAULT_START_TIME;
-  const [hour = "00", minute = "00", second = "00"] = normalizedTime.split(":");
+type Meridiem = "AM" | "PM";
 
-  return showSeconds ? \`\${hour}:\${minute}:\${second}\` : \`\${hour}:\${minute}\`;
+function padTime(value: number) {
+  return value.toString().padStart(2, "0");
 }
 
-function normalizeTimeInputValue(time: string, fallbackTime: string) {
-  return parseTimePart(time) ?? parseTimePart(fallbackTime) ?? DEFAULT_START_TIME;
+function buildTimeRange(max: number, step: number) {
+  const safeStep = Math.max(1, Math.floor(step));
+  const values: number[] = [];
+  for (let value = 0; value <= max; value += safeStep) {
+    values.push(value);
+  }
+
+  return values;
 }
 
-function openNativeTimePicker(input: HTMLInputElement | null) {
-  if (!input) return;
+function decomposeTime(time: string) {
+  const normalizedTime = parseTimePart(time) ?? DEFAULT_START_TIME;
+  const [hour = "0", minute = "0", second = "0"] = normalizedTime.split(":");
+  const hourNumber = Number(hour);
 
-  input.focus();
+  return {
+    hour12: hourNumber % 12 || 12,
+    minute: Number(minute),
+    second: Number(second),
+    meridiem: (hourNumber >= 12 ? "PM" : "AM") as Meridiem,
+  };
+}
 
-  const showPicker = (
-    input as HTMLInputElement & { showPicker?: () => void }
-  ).showPicker;
-  if (!showPicker) return;
+function composeTime(
+  hour12: number,
+  minute: number,
+  second: number,
+  meridiem: Meridiem
+) {
+  const normalizedHour12 = hour12 % 12;
+  const hour = meridiem === "PM" ? normalizedHour12 + 12 : normalizedHour12;
 
-  try {
-    showPicker.call(input);
-  } catch {
-    input.focus();
-  }
+  return \`\${padTime(hour)}:\${padTime(minute)}:\${padTime(second)}\`;
 }
 
 function parseTypedDateTime(value: string) {
@@ -3436,6 +3582,8 @@ function CalendarDropdown({
   open,
   onOpenChange,
   onValueChange,
+  portalMount,
+  strategy,
 }: {
   id: string;
   label: string;
@@ -3444,8 +3592,16 @@ function CalendarDropdown({
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onValueChange: (value: string) => void;
+  portalMount: HTMLElement | null;
+  strategy: Strategy;
 }) {
   const selectedOption = options.find((option) => option.value === value);
+  const { setReference, setFloating, floatingStyles, isPositioned } =
+    useFloatingDropdown({
+      open,
+      onOpenChange,
+      strategy,
+    });
 
   return (
     <div className="relative">
@@ -3453,6 +3609,7 @@ function CalendarDropdown({
         {label}
       </label>
       <button
+        ref={setReference}
         id={id}
         type="button"
         role="combobox"
@@ -3472,37 +3629,281 @@ function CalendarDropdown({
           aria-hidden="true"
         />
       </button>
-      {open && (
-        <div
-          id={\`\${id}-options\`}
-          role="listbox"
-          aria-label={\`\${label} options\`}
-          className="absolute left-0 top-full z-10 mt-1 max-h-52 min-w-full overflow-y-auto rounded-md border border-solid border-semantic-border-layout bg-semantic-bg-primary p-1 shadow-lg"
-        >
-          {options.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              role="option"
-              aria-label={option.label}
-              aria-selected={option.value === value}
-              disabled={option.disabled}
-              className={cn(
-                "flex w-full items-center rounded px-2 py-1.5 text-left text-sm text-semantic-text-primary transition-colors hover:bg-semantic-bg-hover disabled:cursor-not-allowed disabled:opacity-40",
-                option.value === value && "bg-semantic-primary text-semantic-text-inverted"
-              )}
-              onClick={() => {
-                if (option.disabled) return;
+      {open &&
+        portalMount &&
+        createPortal(
+          <div
+            ref={setFloating}
+            id={\`\${id}-options\`}
+            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"
+            style={{
+              ...floatingStyles,
+              width: \`var(\${DROPDOWN_WIDTH_VAR}, auto)\`,
+              maxHeight: \`var(\${DROPDOWN_HEIGHT_VAR}, \${DROPDOWN_MAX_HEIGHT}px)\`,
+              zIndex: DROPDOWN_Z_INDEX,
+              visibility: isPositioned ? undefined : "hidden",
+            }}
+          >
+            {options.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-label={option.label}
+                aria-selected={option.value === value}
+                disabled={option.disabled}
+                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"
+                )}
+                onClick={() => {
+                  if (option.disabled) return;
 
-                onValueChange(option.value);
-                onOpenChange(false);
-              }}
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      )}
+                  onValueChange(option.value);
+                  onOpenChange(false);
+                }}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>,
+          portalMount
+        )}
+    </div>
+  );
+}
+
+interface TimeColumnOption {
+  key: string;
+  label: string;
+  selected: boolean;
+}
+
+function TimeColumn({
+  header,
+  ariaLabel,
+  options,
+  onSelect,
+}: {
+  header: string;
+  ariaLabel: string;
+  options: TimeColumnOption[];
+  onSelect: (key: string) => void;
+}) {
+  const listRef = React.useRef<HTMLDivElement | null>(null);
+  const selectedRef = React.useRef<HTMLButtonElement | null>(null);
+
+  React.useEffect(() => {
+    const list = listRef.current;
+    const selected = selectedRef.current;
+    if (!list || !selected) return;
+
+    list.scrollTop =
+      selected.offsetTop - list.clientHeight / 2 + selected.clientHeight / 2;
+  }, []);
+
+  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">
+        {header}
+      </div>
+      <div
+        ref={listRef}
+        role="listbox"
+        aria-label={ariaLabel}
+        className="flex flex-col gap-0.5 overflow-y-auto p-1 [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={{ maxHeight: \`\${TIME_COLUMN_MAX_HEIGHT}px\` }}
+      >
+        {options.map((option) => (
+          <button
+            key={option.key}
+            ref={option.selected ? selectedRef : undefined}
+            type="button"
+            role="option"
+            aria-selected={option.selected}
+            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"
+            )}
+            onClick={() => onSelect(option.key)}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function TimeField({
+  id,
+  label,
+  value,
+  showSeconds,
+  minuteStep,
+  secondStep,
+  open,
+  onOpenChange,
+  onChange,
+  portalMount,
+  strategy,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  showSeconds: boolean;
+  minuteStep: number;
+  secondStep: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onChange: (time: string) => void;
+  portalMount: HTMLElement | null;
+  strategy: Strategy;
+}) {
+  const { hour12, minute, second, meridiem } = decomposeTime(value);
+  const { setReference, setFloating, floatingStyles, isPositioned } =
+    useFloatingDropdown({
+      open,
+      onOpenChange,
+      strategy,
+    });
+  // When seconds are hidden they are not editable, so normalize to :00 on any
+  // change rather than carrying a stale seconds value forward.
+  const effectiveSecond = showSeconds ? second : 0;
+  const hourOptions = React.useMemo<TimeColumnOption[]>(
+    () =>
+      Array.from({ length: 12 }, (_, index) => index + 1).map((hour) => ({
+        key: hour.toString(),
+        label: padTime(hour),
+        selected: hour === hour12,
+      })),
+    [hour12]
+  );
+  const minuteOptions = React.useMemo<TimeColumnOption[]>(
+    () =>
+      buildTimeRange(59, minuteStep).map((minuteValue) => ({
+        key: minuteValue.toString(),
+        label: padTime(minuteValue),
+        selected: minuteValue === minute,
+      })),
+    [minute, minuteStep]
+  );
+  const secondOptions = React.useMemo<TimeColumnOption[]>(
+    () =>
+      buildTimeRange(59, secondStep).map((secondValue) => ({
+        key: secondValue.toString(),
+        label: padTime(secondValue),
+        selected: secondValue === second,
+      })),
+    [second, secondStep]
+  );
+  const meridiemOptions: TimeColumnOption[] = [
+    { key: "AM", label: "AM", selected: meridiem === "AM" },
+    { key: "PM", label: "PM", selected: meridiem === "PM" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <span
+        id={\`\${id}-label\`}
+        className="block text-sm font-semibold text-semantic-text-secondary"
+      >
+        {label}
+      </span>
+      <button
+        ref={setReference}
+        id={id}
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={cn(
+          "flex h-[42px] w-full items-center gap-2 rounded-lg 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",
+          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"
+          aria-hidden="true"
+        />
+        <span className="m-0 min-w-0 flex-1 truncate">
+          {formatTimeForDisplay(value, showSeconds)}
+        </span>
+        <ChevronDown
+          className={cn(
+            "size-4 shrink-0 text-semantic-text-muted transition-transform",
+            open && "rotate-180"
+          )}
+          aria-hidden="true"
+        />
+      </button>
+      {open &&
+        portalMount &&
+        createPortal(
+          <div
+            ref={setFloating}
+            role="listbox"
+            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",
+              showSeconds ? "grid-cols-4" : "grid-cols-3"
+            )}
+            style={{
+              ...floatingStyles,
+              width: \`var(\${DROPDOWN_WIDTH_VAR}, auto)\`,
+              zIndex: DROPDOWN_Z_INDEX,
+              visibility: isPositioned ? undefined : "hidden",
+            }}
+          >
+            <TimeColumn
+              header="Hours"
+              ariaLabel={\`\${label} hours\`}
+              options={hourOptions}
+              onSelect={(key) =>
+                onChange(composeTime(Number(key), minute, effectiveSecond, meridiem))
+              }
+            />
+            <TimeColumn
+              header="Minutes"
+              ariaLabel={\`\${label} minutes\`}
+              options={minuteOptions}
+              onSelect={(key) =>
+                onChange(composeTime(hour12, Number(key), effectiveSecond, meridiem))
+              }
+            />
+            {showSeconds && (
+              <TimeColumn
+                header="Seconds"
+                ariaLabel={\`\${label} seconds\`}
+                options={secondOptions}
+                onSelect={(key) =>
+                  onChange(composeTime(hour12, minute, Number(key), meridiem))
+                }
+              />
+            )}
+            <TimeColumn
+              header="AM/PM"
+              ariaLabel={\`\${label} meridiem\`}
+              options={meridiemOptions}
+              onSelect={(key) =>
+                onChange(
+                  composeTime(hour12, minute, effectiveSecond, key as Meridiem)
+                )
+              }
+            />
+          </div>,
+          portalMount
+        )}
     </div>
   );
 }
@@ -3523,6 +3924,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       name,
       showEndTime = true,
       showSeconds,
+      minuteStep = DEFAULT_MINUTE_STEP,
+      secondStep = DEFAULT_SECOND_STEP,
       showClear = true,
       closeOnSelect = false,
       startTimeLabel = "Start Time",
@@ -3583,10 +3986,11 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const triggerRef = React.useRef<HTMLDivElement | null>(null);
     const popoverRef = React.useRef<HTMLDivElement | null>(null);
-    const startTimeInputRef = React.useRef<HTMLInputElement | null>(null);
-    const endTimeInputRef = React.useRef<HTMLInputElement | null>(null);
     const [openCalendarDropdown, setOpenCalendarDropdown] =
       React.useState<CalendarDropdownKind | null>(null);
+    const [openTimeField, setOpenTimeField] = React.useState<
+      "start" | "end" | null
+    >(null);
     const usesContainerPortal = portalContainer !== undefined;
     const floatingStrategy: Strategy = usesContainerPortal
       ? "absolute"
@@ -3598,18 +4002,23 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
         shift({ padding: POPOVER_MARGIN }),
         floatingSize({
           padding: POPOVER_MARGIN,
-          apply({ availableHeight, elements, rects }) {
+          apply({ availableHeight, availableWidth, elements, rects }) {
             const maxHeight = Math.max(
               1,
               Math.min(MAX_POPOVER_HEIGHT, availableHeight)
             );
+            const maxWidth = Math.min(MAX_POPOVER_WIDTH, availableWidth);
+            const width = Math.max(
+              1,
+              Math.min(Math.max(rects.reference.width, MIN_POPOVER_WIDTH), maxWidth)
+            );
             elements.floating.style.setProperty(
               POPOVER_SCROLL_HEIGHT_VAR,
               \`\${maxHeight}px\`
             );
             elements.floating.style.setProperty(
               POPOVER_WIDTH_VAR,
-              \`\${rects.reference.width}px\`
+              \`\${width}px\`
             );
           },
         }),
@@ -3655,6 +4064,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       (nextOpen: boolean) => {
         if (!nextOpen) {
           setOpenCalendarDropdown(null);
+          setOpenTimeField(null);
         }
 
         if (!isOpenControlled) {
@@ -3700,7 +4110,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
       const handlePointerDown = (event: MouseEvent) => {
         if (
           !isPointerInsideElement(event, rootRef.current) &&
-          !isPointerInsideElement(event, popoverRef.current)
+          !isPointerInsideElement(event, popoverRef.current) &&
+          !isPointerInsideDropdown(event)
         ) {
           setOpen(false);
         }
@@ -4014,7 +4425,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
           )}
           style={{
             ...floatingStyles,
-            width: \`var(\${POPOVER_WIDTH_VAR}, \${POPOVER_WIDTH}px)\`,
+            width: \`var(\${POPOVER_WIDTH_VAR}, min(\${POPOVER_WIDTH}px, calc(100vw - \${
+              POPOVER_MARGIN * 2
+            }px)))\`,
             maxHeight: \`var(\${POPOVER_SCROLL_HEIGHT_VAR}, min(\${MAX_POPOVER_HEIGHT}px, calc(100dvh - \${
               POPOVER_MARGIN * 2
             }px)))\`,
@@ -4044,6 +4457,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                     id={\`\${triggerId}-month\`}
                     label="Month"
                     value={visibleMonth.getMonth().toString()}
+                    portalMount={portalMount}
+                    strategy={floatingStrategy}
                     open={openCalendarDropdown === "month"}
                     onOpenChange={(nextOpen) =>
                       setOpenCalendarDropdown(nextOpen ? "month" : null)
@@ -4079,6 +4494,8 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                     id={\`\${triggerId}-year\`}
                     label="Year"
                     value={visibleMonth.getFullYear().toString()}
+                    portalMount={portalMount}
+                    strategy={floatingStrategy}
                     open={openCalendarDropdown === "year"}
                     onOpenChange={(nextOpen) =>
                       setOpenCalendarDropdown(nextOpen ? "year" : null)
@@ -4117,7 +4534,7 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                 {weekDays.map((day) => (
                   <div
                     key={day}
-                    className="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-semantic-text-muted"
                   >
                     {day}
                   </div>
@@ -4151,6 +4568,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                           : isCurrentMonth
                             ? "text-semantic-text-primary hover:bg-semantic-bg-hover"
                             : "text-semantic-text-muted hover:bg-semantic-bg-hover",
+                        isToday &&
+                          !isSelected &&
+                          "ring-1 ring-inset ring-semantic-border-secondary",
                         isDisabled &&
                           "opacity-40 cursor-not-allowed pointer-events-none"
                       )}
@@ -4164,9 +4584,6 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                       }}
                     >
                       {day.getDate()}
-                      {isToday && !isSelected && (
-                        <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-semantic-primary" />
-                      )}
                     </button>
                   );
                 })}
@@ -4182,87 +4599,49 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
                   "border-t border-solid border-semantic-border-layout"
               )}
             >
-            <div className="flex flex-col gap-1.5">
-              <label
-                id={\`\${triggerId}-start-time-label\`}
-                className="block text-sm font-semibold text-semantic-text-secondary"
-              >
-                {startTimeLabel}
-              </label>
-              <div className="relative">
-                <Clock2
-                  className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-semantic-text-muted"
-                  aria-hidden="true"
-                />
-                <input
-                  ref={startTimeInputRef}
-                  id={\`\${triggerId}-start-time\`}
-                  aria-labelledby={\`\${triggerId}-start-time-label\`}
-                  type="time"
-                  step={resolvedShowSeconds ? "1" : "60"}
-                  value={formatTimeForTimeInput(
-                    currentValue.startTime,
-                    resolvedShowSeconds
-                  )}
-                  className="h-[42px] w-full rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary pl-9 pr-3 text-base text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
-                  onClick={() => openNativeTimePicker(startTimeInputRef.current)}
-                  onChange={(event) =>
+              <TimeField
+                id={\`\${triggerId}-start-time\`}
+                label={startTimeLabel}
+                value={currentValue.startTime}
+                showSeconds={resolvedShowSeconds}
+                minuteStep={minuteStep}
+                secondStep={secondStep}
+                portalMount={portalMount}
+                strategy={floatingStrategy}
+                open={openTimeField === "start"}
+                onOpenChange={(nextOpen) =>
+                  setOpenTimeField(nextOpen ? "start" : null)
+                }
+                onChange={(startTime) =>
+                  updateValue(
+                    { ...currentValue, startTime },
+                    { hasTimeValue: true }
+                  )
+                }
+              />
+
+              {resolvedShowEndTime && (
+                <TimeField
+                  id={\`\${triggerId}-end-time\`}
+                  label={endTimeLabel}
+                  value={currentValue.endTime}
+                  showSeconds={resolvedShowSeconds}
+                  minuteStep={minuteStep}
+                  secondStep={secondStep}
+                  portalMount={portalMount}
+                  strategy={floatingStrategy}
+                  open={openTimeField === "end"}
+                  onOpenChange={(nextOpen) =>
+                    setOpenTimeField(nextOpen ? "end" : null)
+                  }
+                  onChange={(endTime) =>
                     updateValue(
-                      {
-                        ...currentValue,
-                        startTime: normalizeTimeInputValue(
-                          event.target.value,
-                          currentValue.startTime
-                        ),
-                      },
+                      { ...currentValue, endTime },
                       { hasTimeValue: true }
                     )
                   }
                 />
-              </div>
-            </div>
-
-            {resolvedShowEndTime && (
-              <div className="flex flex-col gap-1.5">
-                <label
-                  id={\`\${triggerId}-end-time-label\`}
-                  className="block text-sm font-semibold text-semantic-text-secondary"
-                >
-                  {endTimeLabel}
-                </label>
-                <div className="relative">
-                  <Clock2
-                    className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-semantic-text-muted"
-                    aria-hidden="true"
-                  />
-                  <input
-                    ref={endTimeInputRef}
-                    id={\`\${triggerId}-end-time\`}
-                    aria-labelledby={\`\${triggerId}-end-time-label\`}
-                    type="time"
-                    step={resolvedShowSeconds ? "1" : "60"}
-                    value={formatTimeForTimeInput(
-                      currentValue.endTime,
-                      resolvedShowSeconds
-                    )}
-                    className="h-[42px] w-full rounded-md border border-solid border-semantic-border-input bg-semantic-bg-primary pl-9 pr-3 text-base text-semantic-text-primary outline-none transition-colors hover:border-semantic-border-input-focus/50 focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]"
-                    onClick={() => openNativeTimePicker(endTimeInputRef.current)}
-                    onChange={(event) =>
-                      updateValue(
-                        {
-                          ...currentValue,
-                          endTime: normalizeTimeInputValue(
-                            event.target.value,
-                            currentValue.endTime
-                          ),
-                        },
-                        { hasTimeValue: true }
-                      )
-                    }
-                  />
-                </div>
-              </div>
-            )}
+              )}
             </div>
           )}
         </div>,
@@ -4303,7 +4682,9 @@ const DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(
             open &&
               state !== "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-semantic-text-placeholder",
+            disabled &&
+              "cursor-not-allowed bg-semantic-bg-ui text-semantic-text-muted hover:border-semantic-border-input"
           )}
         >
           <input
@@ -11372,7 +11753,7 @@ const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-[9999] pointer-events-none data-[state=delayed-open]:pointer-events-auto data-[state=instant-open]:pointer-events-auto overflow-hidden rounded-md bg-semantic-primary px-3 py-1.5 text-xs text-semantic-text-inverted shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-xs whitespace-normal",
+        "z-[9999] pointer-events-none data-[state=delayed-open]:pointer-events-auto data-[state=instant-open]:pointer-events-auto rounded-md bg-semantic-primary px-3 py-1.5 text-xs text-semantic-text-inverted shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-w-xs whitespace-normal",
         className
       )}
       {...props}

package/package.json

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