@optifye/dashboard-core 6.11.28 → 6.11.30

package/dist/index.js

@@ -39220,6 +39220,456 @@ var MetricCard2 = ({ title, value, unit = "", trend = null }) => {
   ] });
 };
 var MetricCard_default = MetricCard2;
+var normalizeValue = (v) => {
+  if (!v) return "";
+  return v.substring(0, 5);
+};
+var to12h = (value24) => {
+  const norm = normalizeValue(value24);
+  if (!norm || norm.length < 5) return { hour: 12, minute: 0, period: "AM" };
+  const [h, m] = norm.split(":").map(Number);
+  const period = h >= 12 ? "PM" : "AM";
+  let hour12 = h % 12;
+  if (hour12 === 0) hour12 = 12;
+  return { hour: hour12, minute: isNaN(m) ? 0 : m, period };
+};
+var to24h = (hour12, minute, period) => {
+  let h = hour12;
+  if (period === "AM" && h === 12) h = 0;
+  if (period === "PM" && h !== 12) h += 12;
+  return `${h.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+};
+var pad22 = (n) => n.toString().padStart(2, "0");
+var SegmentedTimeInput = ({
+  hour,
+  minute,
+  period,
+  hasValue,
+  placeholder,
+  disabled,
+  activeSegment,
+  onSegmentFocus,
+  onSegmentBlur,
+  onHourChange,
+  onMinuteChange,
+  onPeriodChange,
+  onTogglePopover,
+  isPopoverOpen
+}) => {
+  const containerRef = React142.useRef(null);
+  const digitBufferRef = React142.useRef("");
+  const digitTimerRef = React142.useRef(null);
+  React142.useEffect(() => {
+    digitBufferRef.current = "";
+    if (digitTimerRef.current) clearTimeout(digitTimerRef.current);
+  }, [activeSegment]);
+  const commitHourDigits = React142.useCallback((digits) => {
+    const val = parseInt(digits, 10);
+    if (val >= 1 && val <= 12) onHourChange(val);
+    else if (val === 0) onHourChange(12);
+    digitBufferRef.current = "";
+  }, [onHourChange]);
+  const commitMinuteDigits = React142.useCallback((digits) => {
+    const val = parseInt(digits, 10);
+    onMinuteChange(Math.min(59, Math.max(0, val)));
+    digitBufferRef.current = "";
+  }, [onMinuteChange]);
+  const handleKeyDown = React142.useCallback((e) => {
+    if (disabled || !activeSegment) return;
+    const key = e.key;
+    if (key === "Tab") {
+      if (e.shiftKey) {
+        if (activeSegment === "minute") {
+          e.preventDefault();
+          onSegmentFocus("hour");
+        } else if (activeSegment === "period") {
+          e.preventDefault();
+          onSegmentFocus("minute");
+        }
+      } else {
+        if (activeSegment === "hour") {
+          e.preventDefault();
+          onSegmentFocus("minute");
+        } else if (activeSegment === "minute") {
+          e.preventDefault();
+          onSegmentFocus("period");
+        }
+      }
+      return;
+    }
+    e.preventDefault();
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      const delta = key === "ArrowUp" ? 1 : -1;
+      if (activeSegment === "hour") {
+        let newH = hour + delta;
+        if (newH > 12) newH = 1;
+        if (newH < 1) newH = 12;
+        onHourChange(newH);
+      } else if (activeSegment === "minute") {
+        let newM = minute + delta;
+        if (newM > 59) newM = 0;
+        if (newM < 0) newM = 59;
+        onMinuteChange(newM);
+      } else if (activeSegment === "period") {
+        onPeriodChange(period === "AM" ? "PM" : "AM");
+      }
+      return;
+    }
+    if (key === "Enter" || key === " ") {
+      onTogglePopover();
+      return;
+    }
+    if (key === "Escape") {
+      onSegmentBlur();
+      return;
+    }
+    if (activeSegment === "period") {
+      if (key.toLowerCase() === "a") onPeriodChange("AM");
+      else if (key.toLowerCase() === "p") onPeriodChange("PM");
+      return;
+    }
+    if (key >= "0" && key <= "9") {
+      if (digitTimerRef.current) clearTimeout(digitTimerRef.current);
+      if (activeSegment === "hour") {
+        digitBufferRef.current += key;
+        if (digitBufferRef.current.length >= 2) {
+          commitHourDigits(digitBufferRef.current);
+          onSegmentFocus("minute");
+        } else {
+          const firstDigit = parseInt(key, 10);
+          if (firstDigit >= 2) {
+            commitHourDigits(digitBufferRef.current);
+            onSegmentFocus("minute");
+          } else {
+            digitTimerRef.current = setTimeout(() => {
+              commitHourDigits(digitBufferRef.current);
+              onSegmentFocus("minute");
+            }, 800);
+          }
+        }
+      } else if (activeSegment === "minute") {
+        digitBufferRef.current += key;
+        if (digitBufferRef.current.length >= 2) {
+          commitMinuteDigits(digitBufferRef.current);
+          onSegmentFocus("period");
+        } else {
+          const firstDigit = parseInt(key, 10);
+          if (firstDigit >= 6) {
+            commitMinuteDigits("0" + key);
+            onSegmentFocus("period");
+          } else {
+            digitTimerRef.current = setTimeout(() => {
+              commitMinuteDigits(digitBufferRef.current.padStart(2, "0"));
+              onSegmentFocus("period");
+            }, 800);
+          }
+        }
+      }
+    }
+  }, [disabled, activeSegment, hour, minute, period, onHourChange, onMinuteChange, onPeriodChange, onSegmentFocus, onSegmentBlur, onTogglePopover, commitHourDigits, commitMinuteDigits]);
+  const segmentClass = (seg) => `px-0.5 py-0.5 rounded cursor-pointer select-none transition-colors duration-150 ${activeSegment === seg ? "bg-blue-100 text-blue-700" : "text-gray-900 hover:bg-gray-100"}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: disabled ? -1 : 0,
+      onFocus: () => {
+        if (!activeSegment && !disabled) onSegmentFocus("hour");
+      },
+      onKeyDown: handleKeyDown,
+      className: "flex items-center gap-0 outline-none flex-1 min-w-0",
+      children: hasValue ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm tabular-nums text-gray-900", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) onSegmentFocus("hour");
+            },
+            className: segmentClass("hour"),
+            role: "spinbutton",
+            "aria-label": "Hour",
+            "aria-valuenow": hour,
+            "aria-valuemin": 1,
+            "aria-valuemax": 12,
+            children: pad22(hour)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 mx-px", children: ":" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) onSegmentFocus("minute");
+            },
+            className: segmentClass("minute"),
+            role: "spinbutton",
+            "aria-label": "Minute",
+            "aria-valuenow": minute,
+            "aria-valuemin": 0,
+            "aria-valuemax": 59,
+            children: pad22(minute)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              if (!disabled) onSegmentFocus("period");
+            },
+            className: `${segmentClass("period")} ml-1 text-gray-500`,
+            role: "spinbutton",
+            "aria-label": "AM or PM",
+            "aria-valuenow": period === "AM" ? 0 : 1,
+            "aria-valuemin": 0,
+            "aria-valuemax": 1,
+            children: period
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-400 select-none", children: placeholder })
+    }
+  );
+};
+var SCROLLBAR_HIDE_ID = "tp-scrollbar-hide";
+var injectScrollbarHideCSS = () => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SCROLLBAR_HIDE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SCROLLBAR_HIDE_ID;
+  style.textContent = ".tp-scroll-hide::-webkit-scrollbar{display:none}";
+  document.head.appendChild(style);
+};
+var ITEM_H = 40;
+var VISIBLE = 5;
+var WHEEL_H = ITEM_H * VISIBLE;
+var PAD = Math.floor(VISIBLE / 2);
+var ScrollColumn = ({ items, selected, onSelect, width = 56 }) => {
+  const elRef = React142.useRef(null);
+  const suppressRef = React142.useRef(false);
+  const snapTimerRef = React142.useRef(null);
+  const mountedRef = React142.useRef(false);
+  const dragging = React142.useRef(false);
+  const dragStartY = React142.useRef(0);
+  const dragStartScroll = React142.useRef(0);
+  React142.useEffect(() => {
+    injectScrollbarHideCSS();
+  }, []);
+  React142.useEffect(() => {
+    const idx = items.findIndex((i) => i.value === selected);
+    if (idx < 0 || !elRef.current || suppressRef.current) return;
+    const target = idx * ITEM_H;
+    if (!mountedRef.current) {
+      suppressRef.current = true;
+      elRef.current.scrollTop = target;
+      setTimeout(() => {
+        if (elRef.current) elRef.current.scrollTop = target;
+        setTimeout(() => {
+          suppressRef.current = false;
+          mountedRef.current = true;
+        }, 200);
+      }, 30);
+    } else {
+      elRef.current.scrollTo({ top: target, behavior: "smooth" });
+    }
+  }, [selected, items]);
+  const scheduleSnap = React142.useCallback(() => {
+    if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
+    snapTimerRef.current = setTimeout(() => {
+      if (!elRef.current || suppressRef.current) return;
+      const idx = Math.round(elRef.current.scrollTop / ITEM_H);
+      const clamped = Math.max(0, Math.min(items.length - 1, idx));
+      suppressRef.current = true;
+      elRef.current.scrollTo({ top: clamped * ITEM_H, behavior: "smooth" });
+      const item = items[clamped];
+      if (item && item.value !== selected) onSelect(item.value);
+      setTimeout(() => {
+        suppressRef.current = false;
+      }, 150);
+    }, 100);
+  }, [items, selected, onSelect]);
+  const onScroll = React142.useCallback(() => {
+    if (suppressRef.current) return;
+    scheduleSnap();
+  }, [scheduleSnap]);
+  const onMouseDown = React142.useCallback((e) => {
+    dragging.current = true;
+    dragStartY.current = e.clientY;
+    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
+    e.preventDefault();
+    const onMove = (ev) => {
+      if (!dragging.current || !elRef.current) return;
+      const dy = dragStartY.current - ev.clientY;
+      elRef.current.scrollTop = dragStartScroll.current + dy;
+    };
+    const onUp = () => {
+      dragging.current = false;
+      scheduleSnap();
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [scheduleSnap]);
+  const onTouchStart = React142.useCallback((e) => {
+    dragging.current = true;
+    dragStartY.current = e.touches[0].clientY;
+    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
+  }, []);
+  const onTouchMove = React142.useCallback((e) => {
+    if (!dragging.current || !elRef.current) return;
+    const dy = dragStartY.current - e.touches[0].clientY;
+    elRef.current.scrollTop = dragStartScroll.current + dy;
+    e.preventDefault();
+  }, []);
+  const onTouchEnd = React142.useCallback(() => {
+    dragging.current = false;
+    scheduleSnap();
+  }, [scheduleSnap]);
+  const handleClick = React142.useCallback((value, idx) => {
+    onSelect(value);
+    if (elRef.current) {
+      suppressRef.current = true;
+      elRef.current.scrollTo({ top: idx * ITEM_H, behavior: "smooth" });
+      setTimeout(() => {
+        suppressRef.current = false;
+      }, 250);
+    }
+  }, [onSelect]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative select-none", style: { width, height: WHEEL_H }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute left-1 right-1 rounded-lg bg-blue-50/80 border border-blue-200/60 pointer-events-none z-0",
+        style: { top: PAD * ITEM_H, height: ITEM_H }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-x-0 top-0 pointer-events-none z-10",
+        style: { height: ITEM_H * 1.8, background: "linear-gradient(to bottom, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-x-0 bottom-0 pointer-events-none z-10",
+        style: { height: ITEM_H * 1.8, background: "linear-gradient(to top, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: elRef,
+        onScroll,
+        onMouseDown,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        className: "h-full overflow-y-auto tp-scroll-hide relative z-[1] cursor-grab active:cursor-grabbing",
+        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+        role: "listbox",
+        children: [
+          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pt-${i}`)),
+          items.map((item, idx) => {
+            const isSel = item.value === selected;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                onClick: () => handleClick(item.value, idx),
+                className: `flex items-center justify-center transition-all duration-100 ${isSel ? "text-gray-900 font-semibold text-[15px]" : "text-gray-300 text-sm"}`,
+                style: { height: ITEM_H },
+                role: "option",
+                "aria-selected": isSel,
+                children: item.label
+              },
+              item.value
+            );
+          }),
+          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pb-${i}`))
+        ]
+      }
+    )
+  ] });
+};
+var HOURS = Array.from({ length: 12 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));
+var MINUTES = Array.from({ length: 60 }, (_, i) => ({ value: i, label: pad22(i) }));
+var TimePopover = ({
+  hour,
+  minute,
+  period,
+  onHourChange,
+  onMinuteChange,
+  onPeriodChange,
+  onClose,
+  onNow
+}) => {
+  const bandCenter = PAD * ITEM_H + ITEM_H / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "absolute z-50 left-0 right-0 sm:left-auto sm:right-auto sm:w-[264px] mt-1.5 bg-white border border-gray-200 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08),0_2px_8px_rgba(0,0,0,0.04)] overflow-hidden",
+      role: "dialog",
+      "aria-label": "Choose time",
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-center px-4 pt-4 pb-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollColumn, { items: HOURS, selected: hour, onSelect: (v) => onHourChange(v), width: 52 }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "text-gray-300 text-lg font-light flex-shrink-0 w-4 text-center select-none",
+              style: { marginTop: bandCenter - 12 },
+              children: ":"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollColumn, { items: MINUTES, selected: minute, onSelect: (v) => onMinuteChange(v), width: 52 }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "flex flex-col gap-1.5 ml-3 flex-shrink-0",
+              style: { marginTop: bandCenter - 38 },
+              children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onPeriodChange(p),
+                  className: `w-12 h-8 rounded-lg text-[11px] font-bold tracking-widest transition-all duration-150 ${period === p ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600"}`,
+                  "aria-pressed": period === p,
+                  children: p
+                },
+                p
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 border-t border-gray-100" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNow,
+              className: "text-[13px] font-medium text-blue-600 hover:text-blue-700 transition-colors px-2.5 py-1 rounded-md hover:bg-blue-50",
+              children: "Now"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "text-[13px] font-medium text-white bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-lg transition-colors shadow-sm",
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 var TimePickerDropdown = ({
   value,
   onChange,
@@ -39227,124 +39677,155 @@ var TimePickerDropdown = ({
   className = "",
   disabled = false
 }) => {
-  const [isOpen, setIsOpen] = React142.useState(false);
-  const [searchTerm, setSearchTerm] = React142.useState("");
-  const dropdownRef = React142.useRef(null);
-  const inputRef = React142.useRef(null);
-  const generateTimeSlots = () => {
-    const slots = [];
-    for (let hour = 0; hour < 24; hour++) {
-      for (let minute = 0; minute < 60; minute += 10) {
-        const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
-        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-        const ampm = hour < 12 ? "AM" : "PM";
-        const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
-        slots.push({ value: time24, label: time12 });
-      }
-    }
-    return slots;
-  };
-  const timeSlots = generateTimeSlots();
-  const filteredSlots = timeSlots.filter(
-    (slot) => slot.label.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-  const getDisplayValue = (value2) => {
-    if (!value2) return "";
-    const normalizedValue = value2.substring(0, 5);
-    const slot = timeSlots.find((s) => s.value === normalizedValue);
-    return slot ? slot.label : value2;
-  };
+  const [isPopoverOpen, setIsPopoverOpen] = React142.useState(false);
+  const [activeSegment, setActiveSegment] = React142.useState(null);
+  const containerRef = React142.useRef(null);
+  const normalizedValue = React142.useMemo(() => normalizeValue(value), [value]);
+  const hasValue = normalizedValue.length === 5 && normalizedValue.includes(":");
+  const { hour, minute, period } = React142.useMemo(() => to12h(normalizedValue), [normalizedValue]);
   React142.useEffect(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-        setSearchTerm("");
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsPopoverOpen(false);
+        setActiveSegment(null);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      setIsOpen(false);
-      setSearchTerm("");
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (filteredSlots.length > 0) {
-        onChange(filteredSlots[0].value);
-        setIsOpen(false);
-        setSearchTerm("");
-      }
+  const emitChange = React142.useCallback((h, m, p) => {
+    onChange(to24h(h, m, p));
+  }, [onChange]);
+  const handleHourChange = React142.useCallback((h) => {
+    emitChange(h, minute, period);
+  }, [emitChange, minute, period]);
+  const handleMinuteChange = React142.useCallback((m) => {
+    emitChange(hour, m, period);
+  }, [emitChange, hour, period]);
+  const handlePeriodChange = React142.useCallback((p) => {
+    emitChange(hour, minute, p);
+  }, [emitChange, hour, minute]);
+  const handleNow = React142.useCallback(() => {
+    const now4 = /* @__PURE__ */ new Date();
+    const h24 = now4.getHours();
+    const m = now4.getMinutes();
+    const p = h24 >= 12 ? "PM" : "AM";
+    let h12 = h24 % 12;
+    if (h12 === 0) h12 = 12;
+    emitChange(h12, m, p);
+  }, [emitChange]);
+  const handleSegmentFocus = React142.useCallback((seg) => {
+    setActiveSegment(seg);
+    if (!hasValue) {
+      onChange(to24h(12, 0, "AM"));
+    }
+  }, [hasValue, onChange]);
+  const handleSegmentBlur = React142.useCallback(() => {
+    setActiveSegment(null);
+  }, []);
+  const togglePopover = React142.useCallback(() => {
+    if (disabled) return;
+    setIsPopoverOpen((prev) => !prev);
+    if (!hasValue) {
+      onChange(to24h(12, 0, "AM"));
     }
-  };
-  const handleSelect = (timeValue) => {
-    onChange(timeValue);
-    setIsOpen(false);
-    setSearchTerm("");
-  };
-  const handleToggle = () => {
+  }, [disabled, hasValue, onChange]);
+  const handleContainerClick = React142.useCallback(() => {
     if (disabled) return;
-    setIsOpen(!isOpen);
-    if (!isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 100);
+    if (!activeSegment) {
+      setActiveSegment("hour");
+      if (!hasValue) {
+        onChange(to24h(12, 0, "AM"));
+      }
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+  }, [disabled, activeSegment, hasValue, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        type: "button",
-        onClick: handleToggle,
-        disabled,
+        onClick: handleContainerClick,
         className: `
-          w-full px-3 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm
-          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-          hover:border-gray-400 transition-colors duration-200
-          ${disabled ? "bg-gray-50 cursor-not-allowed" : "cursor-pointer"}
-          ${isOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
+          w-full px-3 py-2 bg-white border rounded-md shadow-sm
+          flex items-center gap-2
+          transition-all duration-200
+          ${disabled ? "bg-gray-50 cursor-not-allowed border-gray-200" : "cursor-pointer border-gray-300 hover:border-gray-400"}
+          ${activeSegment || isPopoverOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
         `,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4 text-gray-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ${value ? "text-gray-900" : "text-gray-500"}`, children: value ? getDisplayValue(value) : placeholder })
-          ] }),
+        role: "group",
+        "aria-label": "Time picker",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                togglePopover();
+              },
+              disabled,
+              className: "text-gray-400 hover:text-blue-500 transition-colors flex-shrink-0 focus:outline-none",
+              "aria-expanded": isPopoverOpen,
+              "aria-haspopup": "dialog",
+              "aria-label": "Open time picker",
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" })
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.ChevronDown,
+            SegmentedTimeInput,
             {
-              className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+              hour,
+              minute,
+              period,
+              hasValue,
+              placeholder,
+              disabled,
+              activeSegment,
+              onSegmentFocus: handleSegmentFocus,
+              onSegmentBlur: handleSegmentBlur,
+              onHourChange: handleHourChange,
+              onMinuteChange: handleMinuteChange,
+              onPeriodChange: handlePeriodChange,
+              onTogglePopover: togglePopover,
+              isPopoverOpen
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                togglePopover();
+              },
+              disabled,
+              className: "text-gray-400 hover:text-gray-600 transition-transform duration-200 flex-shrink-0 focus:outline-none",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.ChevronDown,
+                {
+                  className: `h-4 w-4 transition-transform duration-200 ${isPopoverOpen ? "rotate-180" : ""}`
+                }
+              )
             }
           )
-        ] })
+        ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: inputRef,
-          type: "text",
-          placeholder: "Search time...",
-          value: searchTerm,
-          onChange: (e) => setSearchTerm(e.target.value),
-          onKeyDown: handleKeyDown,
-          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto max-h-48", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No times found" }) : filteredSlots.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleSelect(slot.value),
-          className: `
-                    w-full px-3 py-2 text-left text-sm hover:bg-blue-50 hover:text-blue-600
-                    transition-colors duration-150 border-b border-gray-100 last:border-b-0
-                    ${slot.value === value ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-700"}
-                  `,
-          children: slot.label
-        },
-        slot.value
-      )) })
-    ] })
+    isPopoverOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      TimePopover,
+      {
+        hour,
+        minute,
+        period,
+        onHourChange: handleHourChange,
+        onMinuteChange: handleMinuteChange,
+        onPeriodChange: handlePeriodChange,
+        onClose: () => setIsPopoverOpen(false),
+        onNow: handleNow
+      }
+    )
   ] });
 };
 var SilentErrorBoundary = class extends React142__namespace.default.Component {
@@ -40082,6 +40563,7 @@ var AvatarUpload = ({
     )
   ] });
 };
+var CLIP_METADATA_PAGE_SIZE = 50;
 var parseCycleTime = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -40168,7 +40650,9 @@ var FileManagerFilters = ({
   className = "",
   targetCycleTime = null,
   idleTimeVlmEnabled = false,
-  showPercentileCycleFilters = true
+  showPercentileCycleFilters = true,
+  prefetchedClipMetadata,
+  activeCategoryLoading
 }) => {
   const [expandedNodes, setExpandedNodes] = React142.useState(/* @__PURE__ */ new Set());
   const [startTime, setStartTime] = React142.useState("");
@@ -40189,10 +40673,83 @@ var FileManagerFilters = ({
   const [categoryPages, setCategoryPages] = React142.useState({});
   const [categoryHasMore, setCategoryHasMore] = React142.useState({});
   const [localClipClassifications, setLocalClipClassifications] = React142.useState({});
+  const clipMetadataRef = React142.useRef({});
+  const inFlightMetadataRequestsRef = React142.useRef(/* @__PURE__ */ new Set());
   const mergedClipClassifications = React142.useMemo(() => ({
     ...clipClassifications || {},
     ...localClipClassifications
   }), [clipClassifications, localClipClassifications]);
+  React142.useEffect(() => {
+    clipMetadataRef.current = clipMetadata;
+  }, [clipMetadata]);
+  const isCategoryExternallyManaged = React142.useCallback((categoryId) => {
+    if (!categoryId) {
+      return false;
+    }
+    if (prefetchedClipMetadata && Array.isArray(prefetchedClipMetadata[categoryId]) && prefetchedClipMetadata[categoryId].length > 0) {
+      return true;
+    }
+    if (activeCategoryLoading !== void 0 && categoryId === activeFilter) {
+      return true;
+    }
+    return false;
+  }, [prefetchedClipMetadata, activeCategoryLoading, activeFilter]);
+  React142.useEffect(() => {
+    if (!prefetchedClipMetadata) {
+      return;
+    }
+    setClipMetadata((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.entries(prefetchedClipMetadata).forEach(([categoryId, clips]) => {
+        if (!Array.isArray(clips) || clips.length === 0) {
+          return;
+        }
+        const previousClips = prev[categoryId] || [];
+        const previousSignature = previousClips.map((clip) => clip.clipId || clip.id).join("|");
+        const nextSignature = clips.map((clip) => clip.clipId || clip.id).join("|");
+        if (previousSignature === nextSignature) {
+          return;
+        }
+        next[categoryId] = clips;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+    setCategoryPages((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.entries(prefetchedClipMetadata).forEach(([categoryId, clips]) => {
+        if (!Array.isArray(clips) || clips.length === 0) {
+          return;
+        }
+        const inferredPage = Math.max(1, Math.ceil(clips.length / CLIP_METADATA_PAGE_SIZE));
+        if (next[categoryId] === inferredPage) {
+          return;
+        }
+        next[categoryId] = inferredPage;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+    setCategoryHasMore((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.entries(prefetchedClipMetadata).forEach(([categoryId, clips]) => {
+        if (!Array.isArray(clips) || clips.length === 0) {
+          return;
+        }
+        const knownTotal = typeof counts?.[categoryId] === "number" ? counts[categoryId] : null;
+        const inferredHasMore = knownTotal !== null ? clips.length < knownTotal : prev[categoryId];
+        if (typeof inferredHasMore !== "boolean" || next[categoryId] === inferredHasMore) {
+          return;
+        }
+        next[categoryId] = inferredHasMore;
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, [prefetchedClipMetadata, counts]);
   const { state: filterState } = useClipFilter();
   const [percentileCounts, setPercentileCounts] = React142.useState({
     "fast-cycles": null,
@@ -40299,7 +40856,8 @@ var FileManagerFilters = ({
         shift: shift.toString(),
         category: categoryId,
         page,
-        limit: 50,
+        limit: CLIP_METADATA_PAGE_SIZE,
+        knownTotal: typeof counts?.[categoryId] === "number" ? counts[categoryId] : null,
         snapshotDateTime,
         snapshotClipId
       }),
@@ -40309,7 +40867,7 @@ var FileManagerFilters = ({
       throw new Error(`API error: ${response.status}`);
     }
     return response.json();
-  }, [workspaceId, date, shift, snapshotDateTime, snapshotClipId, supabase]);
+  }, [workspaceId, date, shift, counts, snapshotDateTime, snapshotClipId, supabase]);
   const seedIdleClassifications = React142.useCallback(async (clips) => {
     if (!idleTimeVlmEnabled || clips.length === 0) {
       return;
@@ -40366,6 +40924,10 @@ var FileManagerFilters = ({
       return;
     }
     const loadingKey = `${categoryId}-${page}`;
+    if (inFlightMetadataRequestsRef.current.has(loadingKey)) {
+      return;
+    }
+    inFlightMetadataRequestsRef.current.add(loadingKey);
     setLoadingCategories((prev) => /* @__PURE__ */ new Set([...prev, loadingKey]));
     try {
       const data = await fetchClipMetadataPage(categoryId, page);
@@ -40382,6 +40944,7 @@ var FileManagerFilters = ({
     } catch (error) {
       console.error("[FileManager] Error fetching clip metadata:", error);
     } finally {
+      inFlightMetadataRequestsRef.current.delete(loadingKey);
       setLoadingCategories((prev) => {
         const newSet = new Set(prev);
         newSet.delete(loadingKey);
@@ -40655,16 +41218,19 @@ var FileManagerFilters = ({
   React142.useEffect(() => {
     if (activeFilter) {
       setExpandedNodes((prev) => {
+        if (prev.has(activeFilter)) {
+          return prev;
+        }
         const newExpanded = new Set(prev);
         newExpanded.add(activeFilter);
         return newExpanded;
       });
       const category = categories.find((cat) => cat.id === activeFilter);
-      if (category) {
+      if (category && !isCategoryExternallyManaged(activeFilter) && !clipMetadataRef.current[activeFilter]) {
         fetchClipMetadata(activeFilter, 1);
       }
     }
-  }, [activeFilter]);
+  }, [activeFilter, isCategoryExternallyManaged]);
   React142.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -40935,14 +41501,14 @@ var FileManagerFilters = ({
     } else {
       newExpanded.add(nodeId);
       const category = categories.find((cat) => cat.id === nodeId);
-      if (category && !clipMetadata[nodeId]) {
+      if (category && !clipMetadata[nodeId] && !isCategoryExternallyManaged(nodeId)) {
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
         fetchClipMetadata(nodeId, 1);
       }
-      if (showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
       }
-      if (showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
         fetchPercentileClips("slow-cycles");
       }
     }
@@ -40956,14 +41522,14 @@ var FileManagerFilters = ({
       } else {
         newExpanded.add(node.id);
         const category = categories.find((cat) => cat.id === node.id);
-        if (category && !clipMetadata[node.id]) {
+        if (category && !clipMetadata[node.id] && !isCategoryExternallyManaged(node.id)) {
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
           fetchClipMetadata(node.id, 1);
         }
-        if (showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
         }
-        if (showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
           fetchPercentileClips("slow-cycles");
         }
       }
@@ -41016,6 +41582,9 @@ var FileManagerFilters = ({
     const isCurrentVideo = currentVideoId === node.id;
     const isCountUnknown = node.type === "percentile-category" && node.count === null;
     const hasChildren = isCountUnknown || (node.count || 0) > 0;
+    const showExternalLoadingState = Boolean(
+      activeCategoryLoading && isExpanded && node.id === activeFilter && (node.type === "category" || node.type === "percentile-category")
+    );
     const colorClasses = node.color ? getColorClasses(node.color) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "select-none animate-in", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -41097,6 +41666,10 @@ var FileManagerFilters = ({
       ),
       hasChildren && isExpanded && (node.type === "category" || node.type === "percentile-category") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 ml-3 animate-in border-l-2 border-slate-100 pl-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-64 overflow-y-auto space-y-1 scrollbar-thin scrollbar-track-slate-100 scrollbar-thumb-slate-300", children: [
         node.children.map((child) => renderNode(child, depth + 1)),
+        showExternalLoadingState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+          "Loading clips..."
+        ] }) }),
         loadingCategories.has(`${node.id}-${(categoryPages[node.id] || 0) + 1}`) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 px-3 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center text-sm text-slate-500", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin mr-2 h-4 w-4 border-2 border-slate-300 border-t-blue-500 rounded-full" }),
           "Loading more clips..."
@@ -42569,6 +43142,7 @@ var BottlenecksContent = ({
             category: categoryId,
             page: 1,
             limit: 100,
+            knownTotal: mergedCounts[categoryId] ?? null,
             snapshotDateTime,
             snapshotClipId
           }),
@@ -42585,7 +43159,7 @@ var BottlenecksContent = ({
           metadataClips = categoryData.clips.map((clip, index) => ({
             id: clip.id,
             clipId: clip.id,
-            clip_timestamp: clip.timestamp || clip.creation_timestamp,
+            clip_timestamp: clip.creation_timestamp || clip.timestamp,
             description: clip.description,
             severity: clip.severity,
             category: categoryId,
@@ -43223,6 +43797,14 @@ var BottlenecksContent = ({
     }
     return currentPosition;
   }, [activeFilter, categoryMetadata.length, currentMetadataIndex, currentPosition, isPercentileCategory]);
+  const prefetchedExplorerMetadata = React142.useMemo(() => {
+    if (!activeFilter || categoryMetadata.length === 0) {
+      return void 0;
+    }
+    return {
+      [activeFilter]: categoryMetadata
+    };
+  }, [activeFilter, categoryMetadata]);
   const classificationClipIds = React142.useMemo(() => {
     if (!idleTimeVlmEnabled) {
       return [];
@@ -43944,6 +44526,8 @@ var BottlenecksContent = ({
             clipClassifications,
             idleTimeVlmEnabled,
             showPercentileCycleFilters: isFastSlowClipFiltersEnabled,
+            prefetchedClipMetadata: prefetchedExplorerMetadata,
+            activeCategoryLoading: isCategoryLoading,
             onFilterChange: (filterId) => {
               updateActiveFilter(filterId);
               const category = categoriesToShow.find((cat) => cat.type === filterId);