@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/esm/fields/TimeRangeScrubber/index.mjs

@@ -0,0 +1,822 @@
+import { defaultKnobs, ensureFocusVisibleRing, ensureKeyboardModalityTracking, formatAbsoluteDateTime, pressTargetHitSlop, usePresetContext, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Text, View, XStack, YStack, isWeb, useTheme } from "tamagui";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { FloatingPanel } from "../../FloatingPanel/index.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { formInputColors } from "../../shared/colorRamps.mjs";
+import { t } from "../../shared/t.mjs";
+import { getFieldError, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { AXIS_BAND, BRUSH_BAND_HEIGHT, BRUSH_HANDLE, CAP_HEIGHT, CAP_RADIUS, CHIP_HEIGHT, CHIP_RADIUS, DEFAULT_QUICK_RANGES, DEFAULT_TRAILING_WINDOW_MS, FRAME_TICK, KEY_TICK, PLAYHEAD_WIDTH, TOUCH_HOLD_MS, activityUnder, applyQuickRange, assertAbsoluteDateRange, clampRangeToWindow, defaultWindow, formatDurationMs, fractionToTime, getScrubberGripRenderSize, keysInTrailingWindow, latestFrameAtOrBefore, matchingQuickRange, nearestFrame, nudgeWindow, rectHitSlop, resolveScrubberRadius, resolveScrubberTransition, snapTime, stepTime, timeToFraction } from "./geometry.mjs";
+import { AXIS_BAND as AXIS_BAND2, DEFAULT_QUICK_RANGES as DEFAULT_QUICK_RANGES2, DEFAULT_TRAILING_WINDOW_MS as DEFAULT_TRAILING_WINDOW_MS2, TOUCH_HOLD_MS as TOUCH_HOLD_MS2, applyQuickRange as applyQuickRange2, assertAbsoluteDateRange as assertAbsoluteDateRange2, getScrubberGripRenderSize as getScrubberGripRenderSize2, resolveScrubberRadius as resolveScrubberRadius2 } from "./geometry.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ACTIVITY_BAR_HEIGHT = 7;
+function useRadiusStop() {
+  const ctx = usePresetContext();
+  return ctx?.preset.knobs.borderRadius ?? defaultKnobs.borderRadius;
+}
+function formatClock(date) {
+  return date.toLocaleTimeString(void 0, {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+}
+function formatRangeReadout(range) {
+  if (!range?.start || !range.end) return "";
+  const startText = formatAbsoluteDateTime(range.start, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  const sameDay = range.start.toDateString() === range.end.toDateString();
+  const endText = sameDay ? formatClock(range.end) : formatAbsoluteDateTime(range.end, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  const span = formatDurationMs(range.end.getTime() - range.start.getTime());
+  return `${startText} \u2013 ${endText} \xB7 ${span}`;
+}
+function TimeRangeChip({
+  label,
+  selected,
+  disabled,
+  onPress,
+  part = "quick-range",
+  tabIndex = 0
+}) {
+  return /* @__PURE__ */jsx(View, {
+    height: CHIP_HEIGHT,
+    paddingHorizontal: 7,
+    borderRadius: CHIP_RADIUS,
+    borderWidth: 1,
+    borderColor: selected ? "$color11" : "$borderColor",
+    backgroundColor: selected ? "$color11" : "transparent",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    focusable: !disabled,
+    tabIndex: disabled ? -1 : tabIndex,
+    role: "button",
+    "data-part": part,
+    onPress: disabled ? void 0 : onPress,
+    hoverStyle: disabled ? void 0 : {
+      borderColor: "$borderColorHover"
+    },
+    children: /* @__PURE__ */jsx(Text, {
+      fontSize: 12,
+      lineHeight: 22,
+      color: selected ? "$color1" : "$color11",
+      fontFamily: "$body",
+      children: label
+    })
+  });
+}
+function TimeRangeScrubberControl({
+  id,
+  labelText,
+  ariaLabel,
+  disabled,
+  readOnly,
+  hasError,
+  size,
+  sizeToken,
+  transitionToken,
+  value,
+  onChange,
+  windowValue,
+  onWindowChange,
+  scrubTime,
+  onScrub,
+  frames,
+  activity,
+  keys,
+  trailingWindowMs,
+  snapTo,
+  gridStepMs,
+  quickRanges,
+  maxVisibleQuickRanges,
+  now
+}) {
+  if (isWeb) ensureKeyboardModalityTracking();
+  const radiusStop = useRadiusStop();
+  const theme = useTheme();
+  const reducedMotion = !transitionToken;
+  const gripSize = getScrubberGripRenderSize(size != null ? String(size) : sizeToken);
+  const gripRadius = resolveScrubberRadius(radiusStop, gripSize);
+  const handleRadius = resolveScrubberRadius(radiusStop, Math.min(BRUSH_HANDLE.width, BRUSH_HANDLE.height));
+  const bandRadius = resolveScrubberRadius(radiusStop, BRUSH_BAND_HEIGHT);
+  const [session, setSession] = useState("idle");
+  const [kbFocus, setKbFocus] = useState(null);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const [announce, setAnnounce] = useState("");
+  const railRef = useRef(null);
+  const dragRoleRef = useRef(null);
+  const liftOriginRef = useRef(null);
+  const holdTimerRef = useRef(null);
+  const rangeRef = useRef(value);
+  rangeRef.current = value;
+  const scrubRef = useRef(scrubTime);
+  scrubRef.current = scrubTime;
+  const windowRef = useRef(windowValue);
+  windowRef.current = windowValue;
+  const transition = resolveScrubberTransition(session, transitionToken, reducedMotion);
+  const locked = !!(disabled || readOnly);
+  const brush = value?.start && value.end ? value : {
+    start: windowValue.start,
+    end: windowValue.end
+  };
+  const selectedRange = matchingQuickRange(value, quickRanges);
+  const visibleRanges = quickRanges.slice(0, maxVisibleQuickRanges);
+  const overflowRanges = quickRanges.slice(maxVisibleQuickRanges);
+  const trailingKeys = keysInTrailingWindow(keys, scrubTime, trailingWindowMs);
+  const frameAt = latestFrameAtOrBefore(frames, scrubTime);
+  const activityAt = activityUnder(activity, scrubTime);
+  const fieldThemeOutline = theme.outlineColor?.val ?? "$outlineColor";
+  const focusRing = ensureFocusVisibleRing({
+    outlineColor: fieldThemeOutline,
+    outlineOffset: 2
+  });
+  const emitScrub = useCallback((next, nextSession) => {
+    const snapped = snapTime(next, snapTo, {
+      frames,
+      gridStepMs
+    });
+    const clamped = fractionToTime(timeToFraction(snapped, windowRef.current), windowRef.current);
+    setSession(nextSession);
+    onScrub?.(clamped);
+    return clamped;
+  }, [frames, gridStepMs, onScrub, snapTo]);
+  const emitRange = useCallback((next, nextSession) => {
+    const clamped = clampRangeToWindow(assertAbsoluteDateRange(next), windowRef.current);
+    setSession(nextSession);
+    onChange?.(clamped);
+    return clamped;
+  }, [onChange]);
+  const speak = useCallback(message => {
+    setAnnounce(message);
+  }, []);
+  const pointerTime = useCallback(clientX => {
+    const rail = railRef.current;
+    if (!rail) return scrubRef.current;
+    const rect = rail.getBoundingClientRect();
+    if (!rect.width) return scrubRef.current;
+    return fractionToTime((clientX - rect.left) / rect.width, windowRef.current);
+  }, []);
+  const applyDrag = useCallback(clientX => {
+    const role = dragRoleRef.current;
+    if (!role) return;
+    const next = pointerTime(clientX);
+    if (role === "grip") {
+      const time = emitScrub(next, "drag");
+      speak(t("Playhead at {{time}}", {
+        time: formatClock(time)
+      }));
+      return;
+    }
+    const current = rangeRef.current ?? brush;
+    const updated = role === "brush-start" ? {
+      start: next,
+      end: current.end ?? windowRef.current.end
+    } : {
+      start: current.start ?? windowRef.current.start,
+      end: next
+    };
+    const range = emitRange(updated, "drag");
+    speak(t("Range {{start}} to {{end}}", {
+      start: range.start ? formatClock(range.start) : t("none"),
+      end: range.end ? formatClock(range.end) : t("none")
+    }));
+  }, [brush, emitRange, emitScrub, pointerTime, speak]);
+  useEffect(() => {
+    if (session !== "drag" || !isWeb) return;
+    const move = event => applyDrag(event.clientX);
+    const up = () => {
+      dragRoleRef.current = null;
+      setSession("idle");
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+  }, [applyDrag, session]);
+  const clearHold = () => {
+    if (holdTimerRef.current !== null) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+  };
+  useEffect(() => () => clearHold(), []);
+  const startPointer = (role, clientX, pointerType) => {
+    if (locked) return;
+    clearHold();
+    const begin = () => {
+      dragRoleRef.current = role;
+      applyDrag(clientX);
+    };
+    if (pointerType === "touch") {
+      holdTimerRef.current = setTimeout(begin, TOUCH_HOLD_MS);
+      return;
+    }
+    begin();
+  };
+  const applyQuick = range => {
+    if (locked) return;
+    const next = applyQuickRange(range, now);
+    emitRange(next, "jump");
+    onWindowChange?.(defaultWindow(now, next));
+    if (next.end) emitScrub(next.end, "jump");
+    setMoreOpen(false);
+    speak(t("Range {{label}}", {
+      label: range.label
+    }));
+  };
+  const onHandleKey = (role, event) => {
+    if (locked) return;
+    const key = event.key;
+    if (key === " " || key === "Enter") {
+      event.preventDefault();
+      if (liftOriginRef.current) {
+        liftOriginRef.current = null;
+        speak(t("Dropped"));
+      } else {
+        liftOriginRef.current = role === "grip" ? scrubRef.current : rangeRef.current?.start ?? scrubRef.current;
+        speak(t("Lifted"));
+      }
+      return;
+    }
+    if (key === "Escape") {
+      event.preventDefault();
+      const origin = liftOriginRef.current;
+      liftOriginRef.current = null;
+      if (origin) {
+        if (role === "grip") emitScrub(origin, "jump");else emitRange({
+          start: origin,
+          end: rangeRef.current?.end ?? origin
+        }, "jump");
+        speak(t("Cancelled"));
+      }
+      return;
+    }
+    if (key === "Home" || key === "End") {
+      event.preventDefault();
+      const target = key === "Home" ? windowRef.current.start : windowRef.current.end;
+      if (role === "grip") {
+        emitScrub(target, "jump");
+        speak(t("Playhead at {{time}}", {
+          time: formatClock(target)
+        }));
+      } else {
+        const current2 = rangeRef.current ?? brush;
+        const next2 = role === "brush-start" ? {
+          start: target,
+          end: current2.end
+        } : {
+          start: current2.start,
+          end: target
+        };
+        const range2 = emitRange(next2, "jump");
+        speak(t("Range {{start}} to {{end}}", {
+          start: range2.start ? formatClock(range2.start) : t("none"),
+          end: range2.end ? formatClock(range2.end) : t("none")
+        }));
+      }
+      return;
+    }
+    if (key === "[" || key === "]") {
+      event.preventDefault();
+      const next2 = nearestFrame(scrubRef.current, frames, key === "]" ? 1 : -1);
+      if (!next2) return;
+      emitScrub(next2, "jump");
+      speak(t("Playhead at {{time}}", {
+        time: formatClock(next2)
+      }));
+      return;
+    }
+    if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "ArrowUp" && key !== "ArrowDown") return;
+    event.preventDefault();
+    const direction = key === "ArrowLeft" || key === "ArrowDown" ? -1 : 1;
+    if (role === "grip") {
+      const next2 = stepTime(scrubRef.current, direction, gridStepMs, event.shiftKey);
+      const time = emitScrub(next2, liftOriginRef.current ? "drag" : "jump");
+      speak(t("Playhead at {{time}}", {
+        time: formatClock(time)
+      }));
+      return;
+    }
+    const current = rangeRef.current ?? brush;
+    const edge = role === "brush-start" ? current.start ?? windowRef.current.start : current.end ?? windowRef.current.end;
+    const moved = stepTime(edge, direction, gridStepMs, event.shiftKey);
+    const next = role === "brush-start" ? {
+      start: moved,
+      end: current.end
+    } : {
+      start: current.start,
+      end: moved
+    };
+    const range = emitRange(next, liftOriginRef.current ? "drag" : "jump");
+    speak(t("Range {{start}} to {{end}}", {
+      start: range.start ? formatClock(range.start) : t("none"),
+      end: range.end ? formatClock(range.end) : t("none")
+    }));
+  };
+  const leftPct = time => `${timeToFraction(time, windowValue) * 100}%`;
+  const gripFocus = kbFocus === "grip" ? focusRing : void 0;
+  const startFocus = kbFocus === "brush-start" ? focusRing : void 0;
+  const endFocus = kbFocus === "brush-end" ? focusRing : void 0;
+  const name = ariaLabel ?? labelText ?? t("Time range");
+  const frameStale = frameAt ? formatDurationMs(scrubTime.getTime() - frameAt.getTime()) : t("none");
+  const chips = /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    gap: 2,
+    flexWrap: "wrap",
+    "data-part": "quick-range-row",
+    children: [visibleRanges.map((range, index) => /* @__PURE__ */jsx(TimeRangeChip, {
+      label: range.label,
+      selected: selectedRange?.label === range.label,
+      disabled: locked,
+      tabIndex: 4 + index,
+      onPress: () => applyQuick(range)
+    }, range.label)), overflowRanges.length > 0 ? /* @__PURE__ */jsx(FloatingPanel, {
+      open: moreOpen,
+      onOpenChange: setMoreOpen,
+      disabled: locked,
+      widthMode: "at-least-trigger",
+      contentPadding: "default",
+      trigger: /* @__PURE__ */jsx(TimeRangeChip, {
+        part: "quick-range-more",
+        label: t("More"),
+        selected: moreOpen,
+        disabled: locked,
+        onPress: () => setMoreOpen(true)
+      }),
+      children: /* @__PURE__ */jsx(YStack, {
+        gap: "$2",
+        "data-part": "quick-range-menu",
+        padding: "$2",
+        children: overflowRanges.map(range => /* @__PURE__ */jsx(TimeRangeChip, {
+          label: range.label,
+          selected: selectedRange?.label === range.label,
+          disabled: locked,
+          onPress: () => applyQuick(range)
+        }, range.label))
+      })
+    }) : null]
+  });
+  return /* @__PURE__ */jsxs(YStack, {
+    gap: 7,
+    width: "100%",
+    id,
+    "data-testid": "time-range-scrubber",
+    opacity: disabled ? 0.5 : 1,
+    children: [/* @__PURE__ */jsx(XStack, {
+      alignItems: "baseline",
+      gap: "$3",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */jsx(Text, {
+        fontFamily: "$mono",
+        fontSize: 12,
+        lineHeight: 22,
+        color: "$color12",
+        "data-part": "readout",
+        "data-start": value?.start?.toISOString() ?? "",
+        "data-end": value?.end?.toISOString() ?? "",
+        children: formatRangeReadout(value)
+      })
+    }), /* @__PURE__ */jsxs(XStack, {
+      alignItems: "center",
+      gap: 7,
+      children: [/* @__PURE__ */jsx(View, {
+        height: CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": t("Earlier window"),
+        onPress: locked ? void 0 : () => onWindowChange?.(nudgeWindow(windowValue, -1)),
+        children: /* @__PURE__ */jsx(CaretLeftIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      }), chips, /* @__PURE__ */jsx(View, {
+        height: CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": t("Later window"),
+        onPress: locked ? void 0 : () => onWindowChange?.(nudgeWindow(windowValue, 1)),
+        children: /* @__PURE__ */jsx(CaretRightIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      })]
+    }), /* @__PURE__ */jsxs(View, {
+      ref: railRef,
+      "data-testid": "trs-rail",
+      position: "relative",
+      width: "100%",
+      minHeight: AXIS_BAND,
+      children: [/* @__PURE__ */jsx(XStack, {
+        height: 32,
+        position: "relative",
+        marginBottom: 4,
+        children: /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          height: CAP_HEIGHT,
+          paddingHorizontal: 10,
+          borderRadius: CAP_RADIUS,
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          backgroundColor: "$color2",
+          justifyContent: "center",
+          "data-part": "cap",
+          children: /* @__PURE__ */jsxs(Text, {
+            fontFamily: "$mono",
+            fontSize: 12,
+            lineHeight: 22,
+            color: "$color12",
+            children: [formatClock(scrubTime), frameAt ? /* @__PURE__ */jsx(Text, {
+              color: "$color11",
+              children: `  ${t("frame")} \u2212${frameStale}`
+            }) : null]
+          })
+        })
+      }), /* @__PURE__ */jsxs(View, {
+        position: "relative",
+        height: AXIS_BAND,
+        "data-part": "frames-lane",
+        children: [/* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color5",
+          y: -0.5
+        }), activity.length === 0 && frames.length === 0 ? null : /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: 0,
+          width: `${timeToFraction(windowValue.end, windowValue) * 100}%`,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color7",
+          y: -0.5
+        }), frames.map(frame => /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(frame),
+          width: FRAME_TICK.width,
+          height: FRAME_TICK.height,
+          top: "50%",
+          marginTop: -FRAME_TICK.height,
+          backgroundColor: "$color11",
+          borderRadius: 0,
+          "data-part": "frame-tick"
+        }, frame.toISOString())), /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(brush.start ?? windowValue.start),
+          width: `${Math.max(0, timeToFraction(brush.end ?? windowValue.end, windowValue) - timeToFraction(brush.start ?? windowValue.start, windowValue)) * 100}%`,
+          top: "50%",
+          marginTop: -BRUSH_BAND_HEIGHT / 2,
+          height: BRUSH_BAND_HEIGHT,
+          backgroundColor: formInputColors.background.focus,
+          borderRadius: bandRadius,
+          "data-part": "brush-band",
+          "data-radius-class": "binary",
+          "data-radius": String(bandRadius)
+        }), [["brush-start", brush.start ?? windowValue.start, startFocus], ["brush-end", brush.end ?? windowValue.end, endFocus]].map(([part, time, ring]) => /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(time),
+          x: "-50%",
+          top: "50%",
+          marginTop: -BRUSH_HANDLE.height / 2,
+          width: BRUSH_HANDLE.width,
+          height: BRUSH_HANDLE.height,
+          backgroundColor: "$color11",
+          borderRadius: handleRadius,
+          cursor: locked ? "not-allowed" : "ew-resize",
+          zIndex: 4,
+          tabIndex: locked ? -1 : part === "brush-start" ? 2 : 3,
+          role: "slider",
+          "aria-label": part === "brush-start" ? t("Range start") : t("Range end"),
+          "aria-valuemin": windowValue.start.getTime(),
+          "aria-valuemax": windowValue.end.getTime(),
+          "aria-valuenow": time.getTime(),
+          "aria-disabled": disabled || void 0,
+          "aria-readonly": readOnly || void 0,
+          "aria-invalid": hasError || void 0,
+          "data-part": part,
+          "data-radius-class": "binary",
+          "data-radius": String(handleRadius),
+          "data-session": session,
+          "data-transition": transition,
+          hitSlop: rectHitSlop(BRUSH_HANDLE.width, BRUSH_HANDLE.height),
+          ...ring,
+          onFocus: () => {
+            if (isWeb && wasKeyboardFocus()) setKbFocus(part);
+          },
+          onBlur: () => setKbFocus(prev => prev === part ? null : prev),
+          onKeyDown: event => onHandleKey(part, event),
+          onPointerDown: event => {
+            if (isWeb) setKbFocus(null);
+            startPointer(part, event.clientX, event.pointerType);
+          },
+          onPointerMove: event => {
+            if (dragRoleRef.current === part) applyDrag(event.clientX);
+          },
+          onPointerUp: clearHold,
+          onPointerCancel: clearHold
+        }, part)), /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          top: 0,
+          bottom: 0,
+          width: PLAYHEAD_WIDTH,
+          backgroundColor: "$color12",
+          zIndex: 3,
+          "data-part": "playhead"
+        }), /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          top: "50%",
+          marginTop: -gripSize / 2,
+          width: gripSize,
+          height: gripSize,
+          borderRadius: gripRadius,
+          borderWidth: 2,
+          borderColor: "$color11",
+          backgroundColor: "$color12",
+          shadowOpacity: 0,
+          ...(isWeb ? {
+            boxShadow: "none"
+          } : void 0),
+          cursor: locked ? "not-allowed" : "grab",
+          zIndex: 5,
+          tabIndex: locked ? -1 : 1,
+          role: "slider",
+          "aria-label": t("{{name}} playhead", {
+            name
+          }),
+          "aria-valuemin": windowValue.start.getTime(),
+          "aria-valuemax": windowValue.end.getTime(),
+          "aria-valuenow": scrubTime.getTime(),
+          "aria-disabled": disabled || void 0,
+          "aria-readonly": readOnly || void 0,
+          "aria-invalid": hasError || void 0,
+          "data-part": "grip",
+          "data-radius-class": "binary",
+          "data-radius": String(gripRadius),
+          "data-session": session,
+          "data-transition": transition,
+          hitSlop: pressTargetHitSlop(gripSize),
+          transition,
+          ...gripFocus,
+          onFocus: () => {
+            if (isWeb && wasKeyboardFocus()) setKbFocus("grip");
+          },
+          onBlur: () => setKbFocus(prev => prev === "grip" ? null : prev),
+          onKeyDown: event => onHandleKey("grip", event),
+          onPointerDown: event => {
+            if (isWeb) setKbFocus(null);
+            startPointer("grip", event.clientX, event.pointerType);
+          },
+          onPointerMove: event => {
+            if (dragRoleRef.current === "grip") applyDrag(event.clientX);
+          },
+          onPointerUp: clearHold,
+          onPointerCancel: clearHold
+        })]
+      }), activity.length > 0 ? /* @__PURE__ */jsx(View, {
+        position: "relative",
+        height: 21,
+        "data-part": "activity-lane",
+        "data-activity": activityAt?.label ?? (activityAt ? "active" : ""),
+        children: activity.map(span => /* @__PURE__ */jsx(View, {
+          position: "absolute",
+          left: leftPct(span.start),
+          width: `${Math.max(0, timeToFraction(span.end, windowValue) - timeToFraction(span.start, windowValue)) * 100}%`,
+          top: "50%",
+          marginTop: -ACTIVITY_BAR_HEIGHT / 2,
+          height: ACTIVITY_BAR_HEIGHT,
+          backgroundColor: "$color6",
+          borderRadius: 0,
+          "data-part": "activity"
+        }, `${span.start.toISOString()}-${span.end.toISOString()}`))
+      }) : null, keys.length > 0 ? /* @__PURE__ */jsx(View, {
+        position: "relative",
+        height: 28,
+        "data-part": "keys-lane",
+        children: keys.map(key => {
+          const inside = trailingKeys.some(item => item.getTime() === key.getTime());
+          return /* @__PURE__ */jsx(View, {
+            position: "absolute",
+            left: leftPct(key),
+            width: KEY_TICK.width,
+            height: KEY_TICK.height,
+            top: 7,
+            backgroundColor: "$color11",
+            opacity: inside ? 1 : 0.45,
+            borderRadius: 0,
+            "data-part": "key-tick"
+          }, key.toISOString());
+        })
+      }) : null]
+    }), isWeb ? /* @__PURE__ */jsx("span", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        overflow: "hidden",
+        clip: "rect(0 0 0 0)"
+      },
+      children: announce
+    }) : /* @__PURE__ */jsx(Text, {
+      accessibilityLiveRegion: "polite",
+      children: announce
+    })]
+  });
+}
+function TimeRangeScrubber({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  skeleton,
+  compact,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  onBlur,
+  window: windowProp,
+  onWindowChange,
+  scrubTime: scrubProp,
+  defaultScrubTime,
+  onScrub,
+  frames = [],
+  activity = [],
+  keys = [],
+  trailingWindow = DEFAULT_TRAILING_WINDOW_MS,
+  snapTo = "none",
+  gridStepMs = 1e3,
+  quickRanges = DEFAULT_QUICK_RANGES,
+  maxVisibleQuickRanges = Number.POSITIVE_INFINITY,
+  now: nowProp,
+  "aria-label": ariaLabel
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(required, validators, label, name, value2 => {
+    if (value2 == null) return true;
+    if (typeof value2 !== "object") return true;
+    const range = value2;
+    return range.start == null && range.end == null;
+  });
+  const now = nowProp ?? /* @__PURE__ */new Date();
+  const [internalValue, setInternalValue] = useState(() => valueProp ?? defaultValue ?? null);
+  const [internalWindow, setInternalWindow] = useState(() => windowProp ?? defaultWindow(now, valueProp ?? defaultValue ?? null));
+  const [internalScrub, setInternalScrub] = useState(() => scrubProp ?? defaultScrubTime ?? (valueProp ?? defaultValue)?.end ?? (windowProp ?? defaultWindow(now, valueProp ?? defaultValue ?? null)).end);
+  useEffect(() => {
+    if (valueProp === void 0) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+  useEffect(() => {
+    if (windowProp === void 0) return;
+    setInternalWindow(windowProp);
+  }, [windowProp]);
+  useEffect(() => {
+    if (scrubProp == null) return;
+    setInternalScrub(scrubProp);
+  }, [scrubProp]);
+  const value = valueProp !== void 0 ? valueProp : internalValue;
+  const windowValue = windowProp ?? internalWindow;
+  const scrubTime = scrubProp ?? internalScrub;
+  const liveTransition = knobProps.transition ? String(knobProps.transition) : void 0;
+  const handleChange = (next, fieldChange) => {
+    if (valueProp === void 0) setInternalValue(next);
+    fieldChange?.(next);
+    onChange?.(next);
+  };
+  const handleWindow = next => {
+    if (windowProp === void 0) setInternalWindow(next);
+    onWindowChange?.(next);
+  };
+  const handleScrub = next => {
+    if (scrubProp === void 0) setInternalScrub(next);
+    onScrub?.(next);
+  };
+  if (skeleton) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: AXIS_BAND
+      })
+    });
+  }
+  const control = (current, fieldChange, fieldBlur, hasError) => /* @__PURE__ */jsx(TimeRangeScrubberControl, {
+    id,
+    labelText: typeof label === "string" ? label : void 0,
+    ariaLabel,
+    disabled,
+    readOnly,
+    hasError,
+    size,
+    sizeToken: String(knobProps.sizeToken),
+    transitionToken: liveTransition,
+    value: current,
+    onChange: next => handleChange(next, fieldChange),
+    windowValue,
+    onWindowChange: handleWindow,
+    scrubTime,
+    onScrub: handleScrub,
+    frames,
+    activity,
+    keys,
+    trailingWindowMs: trailingWindow,
+    snapTo,
+    gridStepMs,
+    quickRanges,
+    maxVisibleQuickRanges,
+    now
+  });
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      disabled,
+      onBlur,
+      children: control(value, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = getFieldError(field, error);
+      const fieldValue = (valueProp !== void 0 ? valueProp : field.state.value) ?? null;
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        disabled,
+        children: control(fieldValue, next => field.handleChange(next), mergeFieldHandler(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+export { AXIS_BAND2 as AXIS_BAND, DEFAULT_QUICK_RANGES2 as DEFAULT_QUICK_RANGES, DEFAULT_TRAILING_WINDOW_MS2 as DEFAULT_TRAILING_WINDOW_MS, TOUCH_HOLD_MS2 as TOUCH_HOLD_MS, TimeRangeScrubber, applyQuickRange2 as applyQuickRange, assertAbsoluteDateRange2 as assertAbsoluteDateRange, getScrubberGripRenderSize2 as getScrubberGripRenderSize, resolveScrubberRadius2 as resolveScrubberRadius };
+//# sourceMappingURL=index.mjs.map