@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/fields/TimeRangeScrubber/index.cjs

@@ -0,0 +1,855 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TimeRangeScrubber_exports = {};
+__export(TimeRangeScrubber_exports, {
+  AXIS_BAND: () => import_geometry2.AXIS_BAND,
+  DEFAULT_QUICK_RANGES: () => import_geometry2.DEFAULT_QUICK_RANGES,
+  DEFAULT_TRAILING_WINDOW_MS: () => import_geometry2.DEFAULT_TRAILING_WINDOW_MS,
+  TOUCH_HOLD_MS: () => import_geometry2.TOUCH_HOLD_MS,
+  TimeRangeScrubber: () => TimeRangeScrubber,
+  applyQuickRange: () => import_geometry2.applyQuickRange,
+  assertAbsoluteDateRange: () => import_geometry2.assertAbsoluteDateRange,
+  getScrubberGripRenderSize: () => import_geometry2.getScrubberGripRenderSize,
+  resolveScrubberRadius: () => import_geometry2.resolveScrubberRadius
+});
+module.exports = __toCommonJS(TimeRangeScrubber_exports);
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_FloatingPanel = require("../../FloatingPanel/index.cjs");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_t = require("../../shared/t.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_geometry = require("./geometry.cjs");
+var import_geometry2 = require("./geometry.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ACTIVITY_BAR_HEIGHT = 7;
+function useRadiusStop() {
+  const ctx = (0, import_theme.usePresetContext)();
+  return ctx?.preset.knobs.borderRadius ?? import_theme.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 = (0, import_theme.formatAbsoluteDateTime)(range.start, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  const sameDay = range.start.toDateString() === range.end.toDateString();
+  const endText = sameDay ? formatClock(range.end) : (0, import_theme.formatAbsoluteDateTime)(range.end, {
+    year: "always",
+    seconds: true,
+    hour12: false
+  });
+  const span = (0, import_geometry.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    height: import_geometry.CHIP_HEIGHT,
+    paddingHorizontal: 7,
+    borderRadius: import_geometry.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.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 (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const radiusStop = useRadiusStop();
+  const theme = (0, import_tamagui.useTheme)();
+  const reducedMotion = !transitionToken;
+  const gripSize = (0, import_geometry.getScrubberGripRenderSize)(size != null ? String(size) : sizeToken);
+  const gripRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, gripSize);
+  const handleRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, Math.min(import_geometry.BRUSH_HANDLE.width, import_geometry.BRUSH_HANDLE.height));
+  const bandRadius = (0, import_geometry.resolveScrubberRadius)(radiusStop, import_geometry.BRUSH_BAND_HEIGHT);
+  const [session, setSession] = (0, import_react2.useState)("idle");
+  const [kbFocus, setKbFocus] = (0, import_react2.useState)(null);
+  const [moreOpen, setMoreOpen] = (0, import_react2.useState)(false);
+  const [announce, setAnnounce] = (0, import_react2.useState)("");
+  const railRef = (0, import_react2.useRef)(null);
+  const dragRoleRef = (0, import_react2.useRef)(null);
+  const liftOriginRef = (0, import_react2.useRef)(null);
+  const holdTimerRef = (0, import_react2.useRef)(null);
+  const rangeRef = (0, import_react2.useRef)(value);
+  rangeRef.current = value;
+  const scrubRef = (0, import_react2.useRef)(scrubTime);
+  scrubRef.current = scrubTime;
+  const windowRef = (0, import_react2.useRef)(windowValue);
+  windowRef.current = windowValue;
+  const transition = (0, import_geometry.resolveScrubberTransition)(session, transitionToken, reducedMotion);
+  const locked = !!(disabled || readOnly);
+  const brush = value?.start && value.end ? value : {
+    start: windowValue.start,
+    end: windowValue.end
+  };
+  const selectedRange = (0, import_geometry.matchingQuickRange)(value, quickRanges);
+  const visibleRanges = quickRanges.slice(0, maxVisibleQuickRanges);
+  const overflowRanges = quickRanges.slice(maxVisibleQuickRanges);
+  const trailingKeys = (0, import_geometry.keysInTrailingWindow)(keys, scrubTime, trailingWindowMs);
+  const frameAt = (0, import_geometry.latestFrameAtOrBefore)(frames, scrubTime);
+  const activityAt = (0, import_geometry.activityUnder)(activity, scrubTime);
+  const fieldThemeOutline = theme.outlineColor?.val ?? "$outlineColor";
+  const focusRing = (0, import_theme.ensureFocusVisibleRing)({
+    outlineColor: fieldThemeOutline,
+    outlineOffset: 2
+  });
+  const emitScrub = (0, import_react2.useCallback)((next, nextSession) => {
+    const snapped = (0, import_geometry.snapTime)(next, snapTo, {
+      frames,
+      gridStepMs
+    });
+    const clamped = (0, import_geometry.fractionToTime)((0, import_geometry.timeToFraction)(snapped, windowRef.current), windowRef.current);
+    setSession(nextSession);
+    onScrub?.(clamped);
+    return clamped;
+  }, [frames, gridStepMs, onScrub, snapTo]);
+  const emitRange = (0, import_react2.useCallback)((next, nextSession) => {
+    const clamped = (0, import_geometry.clampRangeToWindow)((0, import_geometry.assertAbsoluteDateRange)(next), windowRef.current);
+    setSession(nextSession);
+    onChange?.(clamped);
+    return clamped;
+  }, [onChange]);
+  const speak = (0, import_react2.useCallback)(message => {
+    setAnnounce(message);
+  }, []);
+  const pointerTime = (0, import_react2.useCallback)(clientX => {
+    const rail = railRef.current;
+    if (!rail) return scrubRef.current;
+    const rect = rail.getBoundingClientRect();
+    if (!rect.width) return scrubRef.current;
+    return (0, import_geometry.fractionToTime)((clientX - rect.left) / rect.width, windowRef.current);
+  }, []);
+  const applyDrag = (0, import_react2.useCallback)(clientX => {
+    const role = dragRoleRef.current;
+    if (!role) return;
+    const next = pointerTime(clientX);
+    if (role === "grip") {
+      const time = emitScrub(next, "drag");
+      speak((0, import_t.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((0, import_t.t)("Range {{start}} to {{end}}", {
+      start: range.start ? formatClock(range.start) : (0, import_t.t)("none"),
+      end: range.end ? formatClock(range.end) : (0, import_t.t)("none")
+    }));
+  }, [brush, emitRange, emitScrub, pointerTime, speak]);
+  (0, import_react2.useEffect)(() => {
+    if (session !== "drag" || !import_tamagui.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;
+    }
+  };
+  (0, import_react2.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, import_geometry.TOUCH_HOLD_MS);
+      return;
+    }
+    begin();
+  };
+  const applyQuick = range => {
+    if (locked) return;
+    const next = (0, import_geometry.applyQuickRange)(range, now);
+    emitRange(next, "jump");
+    onWindowChange?.((0, import_geometry.defaultWindow)(now, next));
+    if (next.end) emitScrub(next.end, "jump");
+    setMoreOpen(false);
+    speak((0, import_t.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((0, import_t.t)("Dropped"));
+      } else {
+        liftOriginRef.current = role === "grip" ? scrubRef.current : rangeRef.current?.start ?? scrubRef.current;
+        speak((0, import_t.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((0, import_t.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((0, import_t.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((0, import_t.t)("Range {{start}} to {{end}}", {
+          start: range2.start ? formatClock(range2.start) : (0, import_t.t)("none"),
+          end: range2.end ? formatClock(range2.end) : (0, import_t.t)("none")
+        }));
+      }
+      return;
+    }
+    if (key === "[" || key === "]") {
+      event.preventDefault();
+      const next2 = (0, import_geometry.nearestFrame)(scrubRef.current, frames, key === "]" ? 1 : -1);
+      if (!next2) return;
+      emitScrub(next2, "jump");
+      speak((0, import_t.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 = (0, import_geometry.stepTime)(scrubRef.current, direction, gridStepMs, event.shiftKey);
+      const time = emitScrub(next2, liftOriginRef.current ? "drag" : "jump");
+      speak((0, import_t.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 = (0, import_geometry.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((0, import_t.t)("Range {{start}} to {{end}}", {
+      start: range.start ? formatClock(range.start) : (0, import_t.t)("none"),
+      end: range.end ? formatClock(range.end) : (0, import_t.t)("none")
+    }));
+  };
+  const leftPct = time => `${(0, import_geometry.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 ?? (0, import_t.t)("Time range");
+  const frameStale = frameAt ? (0, import_geometry.formatDurationMs)(scrubTime.getTime() - frameAt.getTime()) : (0, import_t.t)("none");
+  const chips = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    gap: 2,
+    flexWrap: "wrap",
+    "data-part": "quick-range-row",
+    children: [visibleRanges.map((range, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+      label: range.label,
+      selected: selectedRange?.label === range.label,
+      disabled: locked,
+      tabIndex: 4 + index,
+      onPress: () => applyQuick(range)
+    }, range.label)), overflowRanges.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FloatingPanel.FloatingPanel, {
+      open: moreOpen,
+      onOpenChange: setMoreOpen,
+      disabled: locked,
+      widthMode: "at-least-trigger",
+      contentPadding: "default",
+      trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+        part: "quick-range-more",
+        label: (0, import_t.t)("More"),
+        selected: moreOpen,
+        disabled: locked,
+        onPress: () => setMoreOpen(true)
+      }),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$2",
+        "data-part": "quick-range-menu",
+        padding: "$2",
+        children: overflowRanges.map(range => /* @__PURE__ */(0, import_jsx_runtime.jsx)(TimeRangeChip, {
+          label: range.label,
+          selected: selectedRange?.label === range.label,
+          disabled: locked,
+          onPress: () => applyQuick(range)
+        }, range.label))
+      })
+    }) : null]
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: 7,
+    width: "100%",
+    id,
+    "data-testid": "time-range-scrubber",
+    opacity: disabled ? 0.5 : 1,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      alignItems: "baseline",
+      gap: "$3",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      gap: 7,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        height: import_geometry.CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: import_geometry.CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": (0, import_t.t)("Earlier window"),
+        onPress: locked ? void 0 : () => onWindowChange?.((0, import_geometry.nudgeWindow)(windowValue, -1)),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretLeftIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      }), chips, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        height: import_geometry.CHIP_HEIGHT,
+        width: 28,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: import_geometry.CHIP_RADIUS,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: locked ? "not-allowed" : "pointer",
+        tabIndex: -1,
+        role: "button",
+        "aria-label": (0, import_t.t)("Later window"),
+        onPress: locked ? void 0 : () => onWindowChange?.((0, import_geometry.nudgeWindow)(windowValue, 1)),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+          size: 16,
+          color: "currentColor"
+        })
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+      ref: railRef,
+      "data-testid": "trs-rail",
+      position: "relative",
+      width: "100%",
+      minHeight: import_geometry.AXIS_BAND,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        height: 32,
+        position: "relative",
+        marginBottom: 4,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          height: import_geometry.CAP_HEIGHT,
+          paddingHorizontal: 10,
+          borderRadius: import_geometry.CAP_RADIUS,
+          borderWidth: 1,
+          borderColor: "$borderColor",
+          backgroundColor: "$color2",
+          justifyContent: "center",
+          "data-part": "cap",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontFamily: "$mono",
+            fontSize: 12,
+            lineHeight: 22,
+            color: "$color12",
+            children: [formatClock(scrubTime), frameAt ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: "$color11",
+              children: `  ${(0, import_t.t)("frame")} \u2212${frameStale}`
+            }) : null]
+          })
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        position: "relative",
+        height: import_geometry.AXIS_BAND,
+        "data-part": "frames-lane",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color5",
+          y: -0.5
+        }), activity.length === 0 && frames.length === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: 0,
+          width: `${(0, import_geometry.timeToFraction)(windowValue.end, windowValue) * 100}%`,
+          top: "50%",
+          height: 1,
+          backgroundColor: "$color7",
+          y: -0.5
+        }), frames.map(frame => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(frame),
+          width: import_geometry.FRAME_TICK.width,
+          height: import_geometry.FRAME_TICK.height,
+          top: "50%",
+          marginTop: -import_geometry.FRAME_TICK.height,
+          backgroundColor: "$color11",
+          borderRadius: 0,
+          "data-part": "frame-tick"
+        }, frame.toISOString())), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(brush.start ?? windowValue.start),
+          width: `${Math.max(0, (0, import_geometry.timeToFraction)(brush.end ?? windowValue.end, windowValue) - (0, import_geometry.timeToFraction)(brush.start ?? windowValue.start, windowValue)) * 100}%`,
+          top: "50%",
+          marginTop: -import_geometry.BRUSH_BAND_HEIGHT / 2,
+          height: import_geometry.BRUSH_BAND_HEIGHT,
+          backgroundColor: import_colorRamps.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(time),
+          x: "-50%",
+          top: "50%",
+          marginTop: -import_geometry.BRUSH_HANDLE.height / 2,
+          width: import_geometry.BRUSH_HANDLE.width,
+          height: import_geometry.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" ? (0, import_t.t)("Range start") : (0, import_t.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: (0, import_geometry.rectHitSlop)(import_geometry.BRUSH_HANDLE.width, import_geometry.BRUSH_HANDLE.height),
+          ...ring,
+          onFocus: () => {
+            if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus(part);
+          },
+          onBlur: () => setKbFocus(prev => prev === part ? null : prev),
+          onKeyDown: event => onHandleKey(part, event),
+          onPointerDown: event => {
+            if (import_tamagui.isWeb) setKbFocus(null);
+            startPointer(part, event.clientX, event.pointerType);
+          },
+          onPointerMove: event => {
+            if (dragRoleRef.current === part) applyDrag(event.clientX);
+          },
+          onPointerUp: clearHold,
+          onPointerCancel: clearHold
+        }, part)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(scrubTime),
+          x: "-50%",
+          top: 0,
+          bottom: 0,
+          width: import_geometry.PLAYHEAD_WIDTH,
+          backgroundColor: "$color12",
+          zIndex: 3,
+          "data-part": "playhead"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.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,
+          ...(import_tamagui.isWeb ? {
+            boxShadow: "none"
+          } : void 0),
+          cursor: locked ? "not-allowed" : "grab",
+          zIndex: 5,
+          tabIndex: locked ? -1 : 1,
+          role: "slider",
+          "aria-label": (0, import_t.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: (0, import_theme.pressTargetHitSlop)(gripSize),
+          transition,
+          ...gripFocus,
+          onFocus: () => {
+            if (import_tamagui.isWeb && (0, import_theme.wasKeyboardFocus)()) setKbFocus("grip");
+          },
+          onBlur: () => setKbFocus(prev => prev === "grip" ? null : prev),
+          onKeyDown: event => onHandleKey("grip", event),
+          onPointerDown: event => {
+            if (import_tamagui.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "relative",
+        height: 21,
+        "data-part": "activity-lane",
+        "data-activity": activityAt?.label ?? (activityAt ? "active" : ""),
+        children: activity.map(span => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          position: "absolute",
+          left: leftPct(span.start),
+          width: `${Math.max(0, (0, import_geometry.timeToFraction)(span.end, windowValue) - (0, import_geometry.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "relative",
+        height: 28,
+        "data-part": "keys-lane",
+        children: keys.map(key => {
+          const inside = trailingKeys.some(item => item.getTime() === key.getTime());
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            position: "absolute",
+            left: leftPct(key),
+            width: import_geometry.KEY_TICK.width,
+            height: import_geometry.KEY_TICK.height,
+            top: 7,
+            backgroundColor: "$color11",
+            opacity: inside ? 1 : 0.45,
+            borderRadius: 0,
+            "data-part": "key-tick"
+          }, key.toISOString());
+        })
+      }) : null]
+    }), import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_tamagui.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 = import_geometry.DEFAULT_TRAILING_WINDOW_MS,
+  snapTo = "none",
+  gridStepMs = 1e3,
+  quickRanges = import_geometry.DEFAULT_QUICK_RANGES,
+  maxVisibleQuickRanges = Number.POSITIVE_INFINITY,
+  now: nowProp,
+  "aria-label": ariaLabel
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.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] = (0, import_react2.useState)(() => valueProp ?? defaultValue ?? null);
+  const [internalWindow, setInternalWindow] = (0, import_react2.useState)(() => windowProp ?? (0, import_geometry.defaultWindow)(now, valueProp ?? defaultValue ?? null));
+  const [internalScrub, setInternalScrub] = (0, import_react2.useState)(() => scrubProp ?? defaultScrubTime ?? (valueProp ?? defaultValue)?.end ?? (windowProp ?? (0, import_geometry.defaultWindow)(now, valueProp ?? defaultValue ?? null)).end);
+  (0, import_react2.useEffect)(() => {
+    if (valueProp === void 0) return;
+    setInternalValue(valueProp);
+  }, [valueProp]);
+  (0, import_react2.useEffect)(() => {
+    if (windowProp === void 0) return;
+    setInternalWindow(windowProp);
+  }, [windowProp]);
+  (0, import_react2.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__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: import_geometry.AXIS_BAND
+      })
+    });
+  }
+  const control = (current, fieldChange, fieldBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.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__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      disabled,
+      onBlur,
+      children: control(value, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      const fieldValue = (valueProp !== void 0 ? valueProp : field.state.value) ?? null;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        disabled,
+        children: control(fieldValue, next => field.handleChange(next), (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}