@mastra/playground-ui 42.0.0-alpha.8 → 42.0.0

package/dist/components/DateRangeTimeline.es.js

@@ -0,0 +1,1005 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useLayoutEffect, useRef, useEffectEvent, useEffect } from 'react';
+import { format, parseISO, isValid, differenceInCalendarDays, addDays } from 'date-fns';
+import { CalendarDaysIcon } from 'lucide-react';
+import { B as Button } from '../Button-Dh5CZ6Ir.js';
+import { D as DatePicker } from '../date-picker-BpKciwOX.js';
+import { P as Popover, b as PopoverTrigger, a as PopoverContent } from '../popover-DwDnnrzj.js';
+import { T as Txt } from '../Txt-Df42XG5p.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+
+const API_DATE_FORMAT = "yyyy-MM-dd";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function parseDate(value) {
+  const date = parseISO(value);
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value) || !isValid(date)) return void 0;
+  return format(date, API_DATE_FORMAT) === value ? date : void 0;
+}
+function toDateRange(state) {
+  return {
+    from: format(addDays(state.origin, state.selection.from), API_DATE_FORMAT),
+    to: format(addDays(state.origin, state.selection.to), API_DATE_FORMAT)
+  };
+}
+function createTimelineState(value, min, max) {
+  const selectedFrom = parseDate(value.from) ?? min;
+  const selectedTo = parseDate(value.to) ?? max;
+  const absoluteSpan = Math.max(0, differenceInCalendarDays(max, min));
+  if (absoluteSpan === 0) {
+    return {
+      origin: min,
+      viewport: { from: 0, to: 0 },
+      selection: { from: 0, to: 0 }
+    };
+  }
+  const selectedFromIndex = clamp(differenceInCalendarDays(selectedFrom, min), 0, absoluteSpan);
+  const selectedToIndex = clamp(differenceInCalendarDays(selectedTo, min), 0, absoluteSpan);
+  return {
+    origin: min,
+    viewport: { from: 0, to: absoluteSpan },
+    selection: {
+      from: Math.min(selectedFromIndex, selectedToIndex),
+      to: Math.max(selectedFromIndex, selectedToIndex)
+    }
+  };
+}
+function zoomTimelineViewport(state, maximumIndex, factor, anchor) {
+  if (!Number.isFinite(factor) || factor <= 0 || factor === 1) return state;
+  const boundedMaximum = Math.max(0, maximumIndex);
+  const viewportSpan = state.viewport.to - state.viewport.from;
+  const selectionSpan = state.selection.to - state.selection.from;
+  const minimumViewportSpan = Math.max(selectionSpan, Math.min(1, boundedMaximum));
+  const scaledSpan = clamp(Math.round(viewportSpan * factor), minimumViewportSpan, boundedMaximum);
+  const nextSpan = scaledSpan === viewportSpan ? clamp(viewportSpan + (factor > 1 ? 1 : -1), minimumViewportSpan, boundedMaximum) : scaledSpan;
+  if (nextSpan === viewportSpan) return state;
+  const normalizedAnchor = Number.isFinite(anchor) ? clamp(anchor, 0, 1) : 0.5;
+  const anchorIndex = state.viewport.from + viewportSpan * normalizedAnchor;
+  const desiredFrom = Math.round(anchorIndex - nextSpan * normalizedAnchor);
+  const earliestFrom = Math.max(0, state.selection.to - nextSpan);
+  const latestFrom = Math.min(state.selection.from, boundedMaximum - nextSpan);
+  const from = clamp(desiredFrom, earliestFrom, latestFrom);
+  return {
+    ...state,
+    viewport: { from, to: from + nextSpan }
+  };
+}
+function revealTimelineSelection(viewport, selection, maximumIndex) {
+  const boundedMaximum = Math.max(0, maximumIndex);
+  const selectionFrom = clamp(Math.min(selection.from, selection.to), 0, boundedMaximum);
+  const selectionTo = clamp(Math.max(selection.from, selection.to), selectionFrom, boundedMaximum);
+  const viewportSpan = clamp(viewport.to - viewport.from, 0, boundedMaximum);
+  const viewportFrom = clamp(viewport.from, 0, boundedMaximum - viewportSpan);
+  const normalizedViewport = { from: viewportFrom, to: viewportFrom + viewportSpan };
+  const selectionSpan = selectionTo - selectionFrom;
+  const nextSpan = Math.max(viewportSpan, selectionSpan);
+  if (selectionFrom >= normalizedViewport.from && selectionTo <= normalizedViewport.to) {
+    if (normalizedViewport.from === viewport.from && normalizedViewport.to === viewport.to) {
+      return viewport;
+    }
+    return normalizedViewport;
+  }
+  const desiredFrom = selectionFrom < normalizedViewport.from ? selectionFrom : selectionTo - nextSpan;
+  const from = clamp(desiredFrom, 0, boundedMaximum - nextSpan);
+  return { from, to: from + nextSpan };
+}
+function getTimelinePosition(index, viewport) {
+  const viewportSpan = viewport.to - viewport.from;
+  if (viewportSpan === 0) return 50;
+  return (index - viewport.from) / viewportSpan * 100;
+}
+function buildTimelineTickOffsets(span) {
+  const boundedSpan = Math.max(0, Math.floor(span));
+  const tickCount = boundedSpan === 0 ? 1 : Math.min(5, boundedSpan + 1);
+  return Array.from(
+    { length: tickCount },
+    (_, index) => Math.round(boundedSpan * index / Math.max(1, tickCount - 1))
+  );
+}
+function buildTimelineTicks(domainFrom, domainTo) {
+  const span = Math.max(0, differenceInCalendarDays(domainTo, domainFrom));
+  const crossesYears = domainFrom.getFullYear() !== domainTo.getFullYear();
+  return buildTimelineTickOffsets(span).map((dayOffset) => {
+    const date = addDays(domainFrom, dayOffset);
+    const labelFormat = span > 365 || crossesYears ? "MMM yyyy" : "MMM d";
+    return {
+      label: format(date, labelFormat),
+      date: format(date, API_DATE_FORMAT),
+      position: span === 0 ? 50 : dayOffset / span * 100
+    };
+  });
+}
+function clampDateRangeToBounds(value, bounds) {
+  const min = parseDate(bounds.min);
+  const max = parseDate(bounds.max);
+  if (!min || !max) return value;
+  const from = parseDate(value.from) ?? min;
+  const to = parseDate(value.to) ?? max;
+  const clampedFrom = new Date(clamp(from.getTime(), min.getTime(), max.getTime()));
+  const clampedTo = new Date(clamp(to.getTime(), clampedFrom.getTime(), max.getTime()));
+  return {
+    from: format(clampedFrom, API_DATE_FORMAT),
+    to: format(clampedTo, API_DATE_FORMAT)
+  };
+}
+function getDateRangeBounds(createdAt, today) {
+  const max = parseDate(today) ?? /* @__PURE__ */ new Date();
+  const created = parseDate(createdAt) ?? max;
+  const min = created > max ? max : created;
+  return {
+    min: format(min, API_DATE_FORMAT),
+    max: format(max, API_DATE_FORMAT)
+  };
+}
+function formatDateRangeDuration(value) {
+  const from = parseDate(value.from);
+  const to = parseDate(value.to);
+  if (!from || !to) return "";
+  const days = Math.max(1, differenceInCalendarDays(to, from) + 1);
+  return days === 1 ? "1 day" : `${days} days`;
+}
+function formatDateRangeValueText(value) {
+  const from = parseDate(value.from);
+  const to = parseDate(value.to);
+  if (!from || !to) return `${value.from} through ${value.to}`;
+  return `${format(from, "MMMM d, yyyy")} through ${format(to, "MMMM d, yyyy")}`;
+}
+
+function DateRangeBoundaryPicker({ boundary, value, min, max, onSelect }) {
+  const [open, setOpen] = useState(false);
+  const isFrom = boundary === "from";
+  const boundaryLabel = isFrom ? "start date" : "end date";
+  const selectedDate = parseDate(value);
+  const firstDate = parseDate(min) ?? selectedDate;
+  const lastDate = parseDate(max) ?? selectedDate;
+  const formattedDate = selectedDate ? format(selectedDate, "MMM d, yyyy") : value;
+  function handleSelect(date) {
+    if (!date) return;
+    onSelect(boundary, format(date, "yyyy-MM-dd"));
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-label": `Choose ${boundaryLabel}, ${formattedDate}`,
+            "aria-expanded": open,
+            size: "xs",
+            className: "h-11 w-full min-w-0 justify-between gap-2 overflow-hidden px-3 sm:h-8",
+            children: [
+              /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "truncate text-neutral5 tabular-nums", children: formattedDate }),
+              /* @__PURE__ */ jsx(CalendarDaysIcon, { className: "size-3.5 shrink-0 text-neutral3", "aria-hidden": "true" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(PopoverContent, { align: isFrom ? "start" : "end", className: "w-auto p-0", sideOffset: 6, children: /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        mode: "single",
+        selected: selectedDate,
+        defaultMonth: selectedDate,
+        fromMonth: firstDate,
+        toMonth: lastDate,
+        disabled: firstDate && lastDate ? { before: firstDate, after: lastDate } : void 0,
+        onSelect: handleSelect
+      }
+    ) })
+  ] });
+}
+
+const PREFERRED_PICKER_WIDTH = 160;
+const PREFERRED_PICKER_GAP = 8;
+function resolveDateRangeBoundaryLayout(requestedWidth, positions) {
+  const width = Math.max(0, requestedWidth);
+  const gap = Math.min(PREFERRED_PICKER_GAP, width);
+  const pickerWidth = Math.min(PREFERRED_PICKER_WIDTH, Math.max(0, (width - gap) / 2));
+  const maximumLeft = Math.max(0, width - pickerWidth);
+  const fromAnchor = clamp(positions.from, 0, 100) / 100 * width;
+  const toAnchor = clamp(positions.to, 0, 100) / 100 * width;
+  const preferredFromLeft = clamp(fromAnchor - pickerWidth - gap / 2, 0, maximumLeft);
+  const preferredToLeft = clamp(toAnchor + gap / 2, 0, maximumLeft);
+  const overlap = preferredFromLeft + pickerWidth + gap - preferredToLeft;
+  if (overlap <= 0) {
+    return {
+      from: { left: preferredFromLeft, width: pickerWidth },
+      to: { left: preferredToLeft, width: pickerWidth },
+      gap
+    };
+  }
+  const pairWidth = pickerWidth * 2 + gap;
+  const pairLeft = clamp(preferredFromLeft - overlap / 2, 0, Math.max(0, width - pairWidth));
+  return {
+    from: { left: pairLeft, width: pickerWidth },
+    to: { left: pairLeft + pickerWidth + gap, width: pickerWidth },
+    gap
+  };
+}
+
+function useDateRangeBoundaryLayout(containerRef, positions) {
+  const [containerWidth, setContainerWidth] = useState();
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    function updateWidth(width) {
+      if (!Number.isFinite(width) || width < 0) return;
+      setContainerWidth((current) => current === width ? current : width);
+    }
+    updateWidth(container.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries.find(({ target }) => target === container) ?? entries[0];
+      const width = entry?.contentRect.width ?? container.getBoundingClientRect().width;
+      updateWidth(width);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [containerRef]);
+  return containerWidth === void 0 ? void 0 : resolveDateRangeBoundaryLayout(containerWidth, positions);
+}
+
+const FALLBACK_PICKER_WIDTH = "clamp(0px, calc(50% - 0.25rem), 10rem)";
+function DateRangeBoundaryPickers({ positions, value, min, max, onSelect }) {
+  const containerRef = useRef(null);
+  const layout = useDateRangeBoundaryLayout(containerRef, positions);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative h-16 sm:h-12", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 min-w-0",
+        style: {
+          left: layout?.from.left ?? 0,
+          width: layout?.from.width ?? FALLBACK_PICKER_WIDTH
+        },
+        children: /* @__PURE__ */ jsx(DateRangeBoundaryPicker, { boundary: "from", value: value.from, min, max: value.to, onSelect })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-0 min-w-0",
+        style: {
+          left: layout?.to.left ?? "max(calc(50% + 0.25rem), calc(100% - 10rem))",
+          width: layout?.to.width ?? FALLBACK_PICKER_WIDTH
+        },
+        children: /* @__PURE__ */ jsx(DateRangeBoundaryPicker, { boundary: "to", value: value.to, min: value.from, max, onSelect })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-11 h-4 w-px -translate-x-1/2 bg-border2 transition-[left] duration-150 ease-out motion-reduce:transition-none sm:top-8",
+        style: { left: `${positions.from}%` },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute top-11 h-4 w-px -translate-x-1/2 bg-border2 transition-[left] duration-150 ease-out motion-reduce:transition-none sm:top-8",
+        style: { left: `${positions.to}%` },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+
+function formatBoundaryDate(value) {
+  const date = parseDate(value);
+  return date ? format(date, "MMM d, yyyy") : value;
+}
+function DateRangeTicks({ ticks, min, max }) {
+  const firstTick = ticks[0];
+  const lastTick = ticks.at(-1);
+  if (!firstTick || !lastTick) return null;
+  const timelineLabel = `Visible from ${formatBoundaryDate(firstTick.date)} through ${formatBoundaryDate(lastTick.date)}. Available from ${formatBoundaryDate(min)} through ${formatBoundaryDate(max)}`;
+  if (firstTick.date === lastTick.date) {
+    const date = formatBoundaryDate(firstTick.date);
+    const singleLabel = firstTick.date === min && firstTick.date === max ? `Created today · ${date}` : firstTick.date === min ? `Created · ${date}` : firstTick.date === max ? `Today · ${date}` : date;
+    return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": timelineLabel, className: "flex h-10 items-start justify-center pt-2", children: /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "text-neutral3", children: singleLabel }) });
+  }
+  const startLabel = firstTick.date === min ? `Created · ${formatBoundaryDate(min)}` : firstTick.label;
+  const endLabel = lastTick.date === max ? `Today · ${formatBoundaryDate(max)}` : lastTick.label;
+  const middleTicks = ticks.slice(1, -1);
+  return /* @__PURE__ */ jsxs("div", { role: "group", className: "relative h-10", "aria-label": timelineLabel, children: [
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-0 left-0 flex flex-col items-start", children: [
+      /* @__PURE__ */ jsx("span", { className: "mb-1 h-1.5 w-px bg-border2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "whitespace-nowrap text-neutral3", children: startLabel })
+    ] }),
+    middleTicks.map((tick) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute top-0 hidden -translate-x-1/2 flex-col items-center sm:flex",
+        style: { left: `${tick.position}%` },
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-1 h-1.5 w-px bg-border2" }),
+          /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-xs", className: "whitespace-nowrap text-neutral3", children: tick.label })
+        ]
+      },
+      tick.date
+    )),
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-0 right-0 flex flex-col items-end", children: [
+      /* @__PURE__ */ jsx("span", { className: "mb-1 h-1.5 w-px bg-border2", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", className: "whitespace-nowrap text-neutral3", children: endLabel })
+    ] })
+  ] });
+}
+
+function DateRangeHandle({
+  boundary,
+  position,
+  value,
+  valueText,
+  min,
+  max,
+  active,
+  onPointerDown,
+  onKeyDown
+}) {
+  const label = boundary === "from" ? "Start date handle" : "End date handle";
+  const date = parseDate(valueText);
+  const accessibleValue = date ? format(date, "MMMM d, yyyy") : valueText;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-valuetext": accessibleValue,
+      className: "group absolute inset-y-0 z-30 w-11 -translate-x-1/2 cursor-ew-resize touch-none outline-hidden",
+      style: { left: `${position}%` },
+      onPointerDown,
+      onKeyDown,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "absolute top-1/2 left-1/2 h-7 w-1.5 -translate-1/2 rounded-xs bg-surface3 ring-1 transition-[width,box-shadow] duration-150 group-hover:w-2 group-focus-visible:w-2 group-focus-visible:ring-2 group-focus-visible:ring-accent3 motion-reduce:transition-none",
+            active ? "w-2 ring-2 ring-neutral3/40" : "ring-border2"
+          ),
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+
+function DateRangeSelection({
+  left,
+  width,
+  duration,
+  active,
+  value,
+  valueText,
+  max,
+  onPointerDown,
+  onKeyDown
+}) {
+  const visibleWidth = Math.max(width, 0.6);
+  const visibleLeft = Math.min(left, 100 - visibleWidth);
+  const showDuration = width >= 12;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Move selected date range",
+      "aria-orientation": "horizontal",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-valuetext": valueText,
+      className: cn(
+        "absolute inset-y-1 z-10 flex cursor-grab touch-none items-center justify-center overflow-hidden rounded-md bg-neutral6/10 text-neutral6 select-none outline-hidden focus-visible:ring-2 focus-visible:ring-accent3 active:cursor-grabbing",
+        active ? "transition-none" : "transition-[left,width,background-color] duration-150 ease-out motion-reduce:transition-none"
+      ),
+      style: { left: `${visibleLeft}%`, width: `${visibleWidth}%` },
+      onPointerDown,
+      onKeyDown,
+      children: showDuration ? (
+        // TODO(ds): Txt needs a compact data-label variant.
+        /* @__PURE__ */ jsx(Txt, { as: "span", variant: "ui-sm", font: "mono", className: "text-neutral6 tabular-nums", children: duration })
+      ) : null
+    }
+  );
+}
+
+function getMarkerHeight(emphasis) {
+  if (emphasis === "major") return "h-5";
+  if (emphasis === "medium") return "h-3";
+  return "h-1.5";
+}
+function DateRangeTrackGrid({ markers }) {
+  const interiorMarkers = markers.filter((marker) => marker.position > 0 && marker.position < 100);
+  return /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0", "aria-hidden": "true", children: interiorMarkers.map((marker) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("absolute top-1/2 w-px -translate-1/2 bg-neutral3/15", getMarkerHeight(marker.emphasis)),
+      style: { left: `${marker.position}%` }
+    },
+    marker.index
+  )) });
+}
+
+const KEYBOARD_LARGE_STEP_DAYS = 7;
+function getKeyboardDelta(key) {
+  if (key === "ArrowLeft" || key === "ArrowDown") return -1;
+  if (key === "ArrowRight" || key === "ArrowUp") return 1;
+  if (key === "PageDown") return -KEYBOARD_LARGE_STEP_DAYS;
+  if (key === "PageUp") return KEYBOARD_LARGE_STEP_DAYS;
+  return void 0;
+}
+function getTimelineInteraction(gesture) {
+  if (gesture.type === "brush") return { type: "selecting" };
+  if (gesture.type === "pan") return { type: "moving" };
+  return { type: "resizing", boundary: gesture.boundary };
+}
+function getTimelineIndexAtClientX(clientX, track, viewport) {
+  const viewportSpan = viewport.to - viewport.from;
+  if (!track || track.width <= 0 || viewportSpan <= 0) return viewport.from;
+  const position = clamp((clientX - track.left) / track.width, 0, 1);
+  return viewport.from + Math.round(position * viewportSpan);
+}
+function resolveTimelineGestureSelection(gesture, pointerIndex, viewport) {
+  const boundedPointerIndex = clamp(pointerIndex, viewport.from, viewport.to);
+  if (gesture.type === "brush") {
+    return {
+      from: Math.min(gesture.startIndex, boundedPointerIndex),
+      to: Math.max(gesture.startIndex, boundedPointerIndex)
+    };
+  }
+  if (gesture.type === "pan") {
+    const selectionSpan = gesture.originalSelection.to - gesture.originalSelection.from;
+    const delta = boundedPointerIndex - gesture.startIndex;
+    const from = clamp(gesture.originalSelection.from + delta, viewport.from, viewport.to - selectionSpan);
+    return { from, to: from + selectionSpan };
+  }
+  if (gesture.boundary === "from") {
+    return {
+      from: clamp(boundedPointerIndex, viewport.from, gesture.originalSelection.to),
+      to: gesture.originalSelection.to
+    };
+  }
+  return {
+    from: gesture.originalSelection.from,
+    to: clamp(boundedPointerIndex, gesture.originalSelection.from, viewport.to)
+  };
+}
+function moveTimelineSelectionFromKey(selection, key, maximumIndex) {
+  const span = selection.to - selection.from;
+  if (key === "Home") return { from: 0, to: span };
+  if (key === "End") return { from: maximumIndex - span, to: maximumIndex };
+  const delta = getKeyboardDelta(key);
+  if (delta === void 0) return void 0;
+  const from = clamp(selection.from + delta, 0, maximumIndex - span);
+  return { from, to: from + span };
+}
+function resizeTimelineSelectionFromKey(selection, boundary, key, maximumIndex) {
+  const { from, to } = selection;
+  if (key === "Home") return boundary === "from" ? { from: 0, to } : { from, to: from };
+  if (key === "End") {
+    return boundary === "from" ? { from: to, to } : { from, to: maximumIndex };
+  }
+  const delta = getKeyboardDelta(key);
+  if (delta === void 0) return void 0;
+  return boundary === "from" ? { from: clamp(from + delta, 0, to), to } : { from, to: clamp(to + delta, from, maximumIndex) };
+}
+
+function useDateRangeKeyboardControls({ selection, maximumIndex, onCommit }) {
+  function handleSelectionKeyDown(event) {
+    const nextSelection = moveTimelineSelectionFromKey(selection, event.key, maximumIndex);
+    if (!nextSelection) return;
+    event.preventDefault();
+    onCommit(nextSelection);
+  }
+  function handleBoundaryKeyDown(boundary, event) {
+    const nextSelection = resizeTimelineSelectionFromKey(selection, boundary, event.key, maximumIndex);
+    if (!nextSelection) return;
+    event.preventDefault();
+    onCommit(nextSelection);
+  }
+  function handleFromKeyDown(event) {
+    handleBoundaryKeyDown("from", event);
+  }
+  function handleToKeyDown(event) {
+    handleBoundaryKeyDown("to", event);
+  }
+  return {
+    handleSelectionKeyDown,
+    handleFromKeyDown,
+    handleToKeyDown
+  };
+}
+
+function usePointerDrag({ onMove, onEnd, onCancel }) {
+  const sessionRef = useRef(void 0);
+  function startPointerDrag(event, payload) {
+    if (sessionRef.current) return false;
+    const captureTarget = event.currentTarget;
+    captureTarget.setPointerCapture(event.pointerId);
+    sessionRef.current = {
+      pointerId: event.pointerId,
+      captureTarget,
+      payload
+    };
+    return true;
+  }
+  function getSession(event) {
+    const session = sessionRef.current;
+    if (!session || session.pointerId !== event.pointerId) return void 0;
+    return session;
+  }
+  function releaseSession(session) {
+    sessionRef.current = void 0;
+    if (!session.captureTarget.hasPointerCapture(session.pointerId)) return;
+    session.captureTarget.releasePointerCapture(session.pointerId);
+  }
+  function handlePointerMove(event) {
+    const session = getSession(event);
+    if (!session) return;
+    onMove(session.payload, event);
+  }
+  function handlePointerUp(event) {
+    const session = getSession(event);
+    if (!session) return;
+    releaseSession(session);
+    onEnd(session.payload, event);
+  }
+  function handlePointerCancel(event) {
+    const session = getSession(event);
+    if (!session) return;
+    releaseSession(session);
+    onCancel(session.payload, event);
+  }
+  function handleLostPointerCapture(event) {
+    const session = getSession(event);
+    if (!session) return;
+    sessionRef.current = void 0;
+    onCancel(session.payload, event);
+  }
+  return {
+    startPointerDrag,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel,
+    handleLostPointerCapture
+  };
+}
+
+function useDateRangePointerGestures({
+  trackRef,
+  timeline,
+  onSelectionPreview,
+  onSelectionCommit,
+  onSelectionCancel
+}) {
+  const [interaction, setInteraction] = useState();
+  function getPointerIndex(clientX) {
+    const track = trackRef.current?.getBoundingClientRect();
+    return getTimelineIndexAtClientX(clientX, track, timeline.viewport);
+  }
+  function previewPointerDrag(drag, event) {
+    const pointerIndex = getPointerIndex(event.clientX);
+    const selection = resolveTimelineGestureSelection(drag.gesture, pointerIndex, timeline.viewport);
+    drag.currentSelection = selection;
+    onSelectionPreview(selection);
+  }
+  function commitPointerDrag(drag, event) {
+    previewPointerDrag(drag, event);
+    setInteraction(void 0);
+    onSelectionCommit(drag.currentSelection);
+  }
+  function cancelPointerDrag() {
+    setInteraction(void 0);
+    onSelectionCancel();
+  }
+  const pointerDrag = usePointerDrag({
+    onMove: previewPointerDrag,
+    onEnd: commitPointerDrag,
+    onCancel: cancelPointerDrag
+  });
+  function beginPointerDrag(event, gesture, currentSelection) {
+    const started = pointerDrag.startPointerDrag(event, { gesture, currentSelection });
+    if (!started) return false;
+    setInteraction(getTimelineInteraction(gesture));
+    return true;
+  }
+  function startBrush(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startIndex = getPointerIndex(event.clientX);
+    const selection = { from: startIndex, to: startIndex };
+    const started = beginPointerDrag(
+      event,
+      {
+        type: "brush",
+        startIndex
+      },
+      selection
+    );
+    if (!started) return;
+    onSelectionPreview(selection);
+  }
+  function startPan(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    beginPointerDrag(
+      event,
+      {
+        type: "pan",
+        startIndex: getPointerIndex(event.clientX),
+        originalSelection: timeline.selection
+      },
+      timeline.selection
+    );
+  }
+  function startHandle(boundary, event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    beginPointerDrag(
+      event,
+      {
+        type: "handle",
+        boundary,
+        originalSelection: timeline.selection
+      },
+      timeline.selection
+    );
+  }
+  function handlePointerMove(event) {
+    pointerDrag.handlePointerMove(event);
+  }
+  function handlePointerUp(event) {
+    pointerDrag.handlePointerUp(event);
+  }
+  function handlePointerCancel(event) {
+    pointerDrag.handlePointerCancel(event);
+  }
+  function handleLostPointerCapture(event) {
+    pointerDrag.handleLostPointerCapture(event);
+  }
+  return {
+    interaction,
+    startBrush,
+    startPan,
+    startHandle,
+    handlePointerMove,
+    handlePointerUp,
+    handlePointerCancel,
+    handleLostPointerCapture
+  };
+}
+
+const MAX_WHEEL_DELTA = 80;
+const WHEEL_ZOOM_SENSITIVITY = 3e-3;
+function useDateRangeWheelZoom({ rootRef, trackRef, disabled, onZoom }) {
+  const handleWheel = useEffectEvent((event) => {
+    if (!event.ctrlKey) return;
+    if (disabled) return;
+    event.preventDefault();
+    const trackRect = trackRef.current?.getBoundingClientRect();
+    const anchor = trackRect && trackRect.width > 0 ? clamp((event.clientX - trackRect.left) / trackRect.width, 0, 1) : 0.5;
+    const wheelDelta = clamp(event.deltaY, -MAX_WHEEL_DELTA, MAX_WHEEL_DELTA);
+    const factor = Math.exp(wheelDelta * WHEEL_ZOOM_SENSITIVITY);
+    onZoom(factor, anchor);
+  });
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.addEventListener("wheel", handleWheel, { passive: false });
+    return () => root.removeEventListener("wheel", handleWheel);
+  }, [rootRef]);
+}
+
+const MAX_GRID_INTERVALS = 24;
+function addVisibleMarker(markerIndices, index, viewport) {
+  if (index >= viewport.from && index <= viewport.to) {
+    markerIndices.add(index);
+  }
+}
+function getMarkerEmphasis(index, majorIndices, mediumIndices) {
+  if (majorIndices.has(index)) return "major";
+  if (mediumIndices.has(index)) return "medium";
+  return "minor";
+}
+function createDateRangeGridMarkers(viewport, selection) {
+  const viewportSpan = Math.max(0, viewport.to - viewport.from);
+  if (viewportSpan === 0) {
+    return [{ index: viewport.from, position: 50, emphasis: "major" }];
+  }
+  const sampleStep = Math.max(1, Math.ceil(viewportSpan / MAX_GRID_INTERVALS));
+  const markerIndices = /* @__PURE__ */ new Set();
+  const majorIndices = /* @__PURE__ */ new Set();
+  const mediumIndices = /* @__PURE__ */ new Set();
+  const tickOffsets = buildTimelineTickOffsets(viewportSpan);
+  for (let index = viewport.from; index <= viewport.to; index += sampleStep) {
+    markerIndices.add(index);
+  }
+  for (let index = 0; index < tickOffsets.length; index += 1) {
+    const tickOffset = tickOffsets[index];
+    if (tickOffset === void 0) continue;
+    const majorIndex = viewport.from + tickOffset;
+    markerIndices.add(majorIndex);
+    majorIndices.add(majorIndex);
+    const nextTickOffset = tickOffsets[index + 1];
+    if (nextTickOffset === void 0) continue;
+    const mediumIndex = viewport.from + Math.round((tickOffset + nextTickOffset) / 2);
+    markerIndices.add(mediumIndex);
+    mediumIndices.add(mediumIndex);
+  }
+  addVisibleMarker(markerIndices, selection.from, viewport);
+  addVisibleMarker(markerIndices, selection.to, viewport);
+  return [...markerIndices].sort((left, right) => left - right).map((index) => ({
+    index,
+    position: getTimelinePosition(index, viewport),
+    emphasis: getMarkerEmphasis(index, majorIndices, mediumIndices)
+  }));
+}
+
+function createDateRangeBoundaryModel(state) {
+  const range = toDateRange(state);
+  const fromPosition = getTimelinePosition(state.selection.from, state.viewport);
+  const toPosition = getTimelinePosition(state.selection.to, state.viewport);
+  return {
+    positions: { from: fromPosition, to: toPosition },
+    range
+  };
+}
+function createDateRangeTrackModel(state, maximumIndex) {
+  const range = toDateRange(state);
+  const fromPosition = getTimelinePosition(state.selection.from, state.viewport);
+  const toPosition = getTimelinePosition(state.selection.to, state.viewport);
+  const span = state.selection.to - state.selection.from;
+  return {
+    handles: {
+      from: {
+        position: fromPosition,
+        value: state.selection.from,
+        valueText: range.from,
+        min: 0,
+        max: state.selection.to
+      },
+      to: {
+        position: toPosition,
+        value: state.selection.to,
+        valueText: range.to,
+        min: state.selection.from,
+        max: maximumIndex
+      }
+    },
+    selection: {
+      left: fromPosition,
+      width: Math.max(0, toPosition - fromPosition),
+      duration: formatDateRangeDuration(range),
+      value: state.selection.from,
+      valueText: formatDateRangeValueText(range),
+      max: maximumIndex - span
+    }
+  };
+}
+function createDateRangeAxisModel(state) {
+  const visibleFrom = addDays(state.origin, state.viewport.from);
+  const visibleTo = addDays(state.origin, state.viewport.to);
+  return { ticks: buildTimelineTicks(visibleFrom, visibleTo) };
+}
+
+function DateRangeTrack({
+  wheelTargetRef,
+  timeline,
+  maximumIndex,
+  onSelectionPreview,
+  onSelectionCommit,
+  onSelectionCancel,
+  onZoom
+}) {
+  const trackRef = useRef(null);
+  const pointer = useDateRangePointerGestures({
+    trackRef,
+    timeline,
+    onSelectionPreview,
+    onSelectionCommit,
+    onSelectionCancel
+  });
+  const { handleSelectionKeyDown, handleFromKeyDown, handleToKeyDown } = useDateRangeKeyboardControls({
+    selection: timeline.selection,
+    maximumIndex,
+    onCommit: onSelectionCommit
+  });
+  useDateRangeWheelZoom({
+    rootRef: wheelTargetRef,
+    trackRef,
+    disabled: pointer.interaction !== void 0,
+    onZoom
+  });
+  const model = createDateRangeTrackModel(timeline, maximumIndex);
+  const gridMarkers = createDateRangeGridMarkers(timeline.viewport, timeline.selection);
+  function startFromHandle(event) {
+    pointer.startHandle("from", event);
+  }
+  function startToHandle(event) {
+    pointer.startHandle("to", event);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: trackRef,
+      role: "group",
+      "aria-label": "Date range selection area",
+      className: cn(
+        "relative h-12 touch-none rounded-lg bg-surface4",
+        pointer.interaction?.type === "selecting" ? "cursor-col-resize" : "cursor-crosshair"
+      ),
+      onPointerDown: pointer.startBrush,
+      onPointerMove: pointer.handlePointerMove,
+      onPointerUp: pointer.handlePointerUp,
+      onPointerCancel: pointer.handlePointerCancel,
+      onLostPointerCapture: pointer.handleLostPointerCapture,
+      children: [
+        /* @__PURE__ */ jsx(DateRangeTrackGrid, { markers: gridMarkers }),
+        /* @__PURE__ */ jsx(
+          DateRangeSelection,
+          {
+            left: model.selection.left,
+            width: model.selection.width,
+            duration: model.selection.duration,
+            active: pointer.interaction !== void 0,
+            value: model.selection.value,
+            valueText: model.selection.valueText,
+            max: model.selection.max,
+            onPointerDown: pointer.startPan,
+            onKeyDown: handleSelectionKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DateRangeHandle,
+          {
+            boundary: "from",
+            position: model.handles.from.position,
+            value: model.handles.from.value,
+            valueText: model.handles.from.valueText,
+            min: model.handles.from.min,
+            max: model.handles.from.max,
+            active: pointer.interaction?.type === "resizing" && pointer.interaction.boundary === "from",
+            onPointerDown: startFromHandle,
+            onKeyDown: handleFromKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DateRangeHandle,
+          {
+            boundary: "to",
+            position: model.handles.to.position,
+            value: model.handles.to.value,
+            valueText: model.handles.to.valueText,
+            min: model.handles.to.min,
+            max: model.handles.to.max,
+            active: pointer.interaction?.type === "resizing" && pointer.interaction.boundary === "to",
+            onPointerDown: startToHandle,
+            onKeyDown: handleToKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+function resolveTimelineBounds(min, max) {
+  const fallbackMax = /* @__PURE__ */ new Date();
+  const maxDate = parseDate(max) ?? fallbackMax;
+  const requestedMin = parseDate(min) ?? addDays(maxDate, -365);
+  const minDate = requestedMin > maxDate ? maxDate : requestedMin;
+  return { minDate, maxDate };
+}
+function useDateRangeTimelineState({ value, min, max, onCommit }) {
+  const { minDate, maxDate } = resolveTimelineBounds(min, max);
+  const committedTimeline = createTimelineState(value, minDate, maxDate);
+  const maximumIndex = Math.max(0, differenceInCalendarDays(maxDate, minDate));
+  const [viewport, setViewport] = useState(() => committedTimeline.viewport);
+  const [draftSelection, setDraftSelection] = useState();
+  const selection = draftSelection ?? committedTimeline.selection;
+  const state = {
+    ...committedTimeline,
+    viewport: revealTimelineSelection(viewport, selection, maximumIndex),
+    selection
+  };
+  function previewSelection(nextSelection) {
+    setDraftSelection(nextSelection);
+  }
+  function cancelSelection() {
+    setDraftSelection(void 0);
+  }
+  function commitSelection(nextSelection) {
+    setDraftSelection(void 0);
+    setViewport((current) => revealTimelineSelection(current, nextSelection, maximumIndex));
+    onCommit(toDateRange({ ...state, selection: nextSelection }));
+  }
+  function zoom(factor, anchor) {
+    setViewport((current) => {
+      const visibleViewport = revealTimelineSelection(current, state.selection, maximumIndex);
+      return zoomTimelineViewport({ ...state, viewport: visibleViewport }, maximumIndex, factor, anchor).viewport;
+    });
+  }
+  function selectDate(boundary, nextValue) {
+    const date = parseDate(nextValue);
+    if (!date) return;
+    const dateIndex = clamp(differenceInCalendarDays(date, state.origin), 0, maximumIndex);
+    const nextSelection = boundary === "from" ? {
+      from: clamp(dateIndex, 0, state.selection.to),
+      to: state.selection.to
+    } : {
+      from: state.selection.from,
+      to: clamp(dateIndex, state.selection.from, maximumIndex)
+    };
+    commitSelection(nextSelection);
+  }
+  return {
+    state,
+    maximumIndex,
+    previewSelection,
+    cancelSelection,
+    commitSelection,
+    zoom,
+    selectDate
+  };
+}
+
+function DateRangeTimeline({ value, min, max, onCommit }) {
+  const rootRef = useRef(null);
+  const timeline = useDateRangeTimelineState({
+    value,
+    min,
+    max,
+    onCommit
+  });
+  const boundaryModel = createDateRangeBoundaryModel(timeline.state);
+  const axisModel = createDateRangeAxisModel(timeline.state);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "group",
+      "aria-label": "Date range timeline",
+      className: "w-full overflow-x-clip select-none [overflow-clip-margin:0.75rem]",
+      children: [
+        /* @__PURE__ */ jsx(
+          DateRangeBoundaryPickers,
+          {
+            positions: boundaryModel.positions,
+            value: boundaryModel.range,
+            min,
+            max,
+            onSelect: timeline.selectDate
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DateRangeTrack,
+          {
+            wheelTargetRef: rootRef,
+            timeline: timeline.state,
+            maximumIndex: timeline.maximumIndex,
+            onSelectionPreview: timeline.previewSelection,
+            onSelectionCommit: timeline.commitSelection,
+            onSelectionCancel: timeline.cancelSelection,
+            onZoom: timeline.zoom
+          }
+        ),
+        /* @__PURE__ */ jsx(DateRangeTicks, { ticks: axisModel.ticks, min, max })
+      ]
+    }
+  );
+}
+
+export { DateRangeTimeline, clampDateRangeToBounds, getDateRangeBounds };
+//# sourceMappingURL=DateRangeTimeline.es.js.map