@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-D5N5QWI7.js

@@ -0,0 +1,1325 @@
+import { storageKey, readStored, writeStored } from './chunk-NNCOFLNE.js';
+import { MonthList } from './chunk-DW3L54DQ.js';
+import { Switch } from './chunk-FZGAAOKS.js';
+import { SegmentedControl } from './chunk-TQVAIKFD.js';
+import { Sheet } from './chunk-QYPE5JX3.js';
+import { Input } from './chunk-7BUIKDD6.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import * as React from 'react';
+import { View, Pressable, Text, ScrollView, AppState, I18nManager } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { DEFAULT_DATE_LABELS, timeRangeValue, dateZone, timeRangeReachesNow, timeRangeLabel, zoomTimeRange, timeRangeReceipt, TIME_RANGE_OPTIONS, sameDateValue, timeRangeText, parseTimeRange, resolveDateValue, valueLabel, findTimeRangeOption, durationLabel, zoneLabel, shiftTimeRange, isDateMath, parseDateRange, DAY_MS, HOUR_MS, pad2, localeNames, quickRangeLabel, timeLabel, dayLabel, formatDateMathInstant } from '@btndprojects/loam-date';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var UNIT_ROW = {
+  second: "Seconds",
+  minute: "Minutes",
+  hour: "Hours",
+  day: "Days",
+  week: "Weeks",
+  month: "Months",
+  quarter: "Quarters",
+  year: "Years"
+};
+var DEFAULT_LABELS = {
+  ...DEFAULT_DATE_LABELS,
+  timeRange: "Time range",
+  triggerLabel: (label, value) => `${label}, ${value}`,
+  moveBack: "Move back in time",
+  moveForward: "Move forward in time",
+  zoomOut: "Zoom out",
+  command: "Type a range",
+  commandPlaceholder: "45m, yesterday, now-2d to now-1d\u2026",
+  notARange: "Not a range yet",
+  lastHeading: "Last",
+  unitRow: (unit) => UNIT_ROW[unit],
+  periodsHeading: "Periods",
+  periodNames: {
+    today: "Today",
+    yesterday: "Yesterday",
+    week: "This week",
+    month: "This month",
+    year: "This year"
+  },
+  soFar: "So far",
+  preview: "Preview",
+  stepNames: {
+    relative: "Last\u2026",
+    periods: "Periods",
+    quickRanges: "All quick ranges",
+    custom: "Custom range"
+  },
+  stepHints: {
+    relative: "Minutes to months back",
+    periods: "Today, this week, this month\u2026",
+    quickRanges: "Search every preset",
+    custom: "Exact dates and times"
+  },
+  back: "Back",
+  viewSwitch: "Preview as",
+  viewNames: { clock: "Clock", calendar: "Calendar", year: "Year" },
+  clockHint: "Drag across the hours, or move an end.",
+  calendarHint: "Pick two days for a custom range.",
+  calendarHintEnd: "Now pick the last day.",
+  previousMonth: "Previous month",
+  nextMonth: "Next month",
+  now: "now",
+  from: "From",
+  to: "To",
+  applyRange: "Apply time range",
+  recentlyUsed: "Recently used",
+  quickRangeList: "Quick ranges",
+  searchRanges: (list) => `Search ${list.toLowerCase()}`,
+  noRangeMatches: (q) => `No range matches \u201C${q}\u201D.`,
+  refresh: "Refresh",
+  cancel: "Cancel",
+  cancelRefresh: "Cancel refresh",
+  autoRefresh: "Auto-refresh",
+  off: "Off"
+};
+function dateLabelsOf(labels) {
+  const out = {};
+  for (const k of Object.keys(DEFAULT_DATE_LABELS)) {
+    out[k] = labels[k];
+  }
+  return out;
+}
+var DEFAULT_PARTS = {
+  command: true,
+  relative: true,
+  periods: true,
+  recent: true,
+  quickRanges: false,
+  preview: true,
+  fields: true,
+  actions: true,
+  zone: true
+};
+var TIME_RANGE_UNITS = [
+  { unit: "minute", counts: [5, 15, 30] },
+  { unit: "hour", counts: [1, 3, 6, 12, 24] },
+  { unit: "day", counts: [2, 7, 14, 30, 90] },
+  { unit: "month", counts: [6, 12] }
+];
+var TIME_RANGE_PERIODS = [
+  { id: "today", from: "now/d", to: "now/d", toSoFar: "now" },
+  { id: "yesterday", from: "now-1d/d", to: "now-1d/d" },
+  { id: "week", from: "now/w", to: "now/w", toSoFar: "now" },
+  { id: "month", from: "now/M", to: "now/M", toSoFar: "now" },
+  { id: "year", from: "now/y", to: "now/y", toSoFar: "now" }
+];
+var TIME_RANGE_VIEWS = ["clock", "calendar", "year"];
+var QUARTER_MS = HOUR_MS / 4;
+var STEP_ICON = {
+  relative: "clock",
+  periods: "calendar",
+  quickRanges: "list-ul",
+  custom: "sliders"
+};
+var UNIT_CODE = {
+  second: "s",
+  minute: "m",
+  hour: "h",
+  day: "d",
+  week: "w",
+  month: "M",
+  quarter: "Q",
+  year: "y"
+};
+function readCommand(text, ctx) {
+  const q = text.trim();
+  if (!q) return null;
+  const split = /^(.+?)(?:\s*→\s*|\s+(?:to|–)\s+)(.+)$/i.exec(q);
+  if (split && parseTimeRange(split[1], split[2], ctx).ok) {
+    return { from: split[1].trim(), to: split[2].trim() };
+  }
+  const short = /^(\d+)\s*(mo|[smhdwMQy])$/.exec(q);
+  if (short && Number(short[1]) > 0) return { from: `now-${short[1]}${short[2]}`, to: "now" };
+  if (isDateMath(q) && parseTimeRange(q, "now", ctx).ok) return { from: q, to: "now" };
+  const r = parseDateRange(q, ctx);
+  if (!r.ok || !r.value) return null;
+  const v = r.value;
+  if (v.kind === "rolling") {
+    const c = UNIT_CODE[v.unit];
+    return v.includePartial === false ? { from: `now-${v.n}${c}/${c}`, to: `now-1${c}/${c}` } : { from: `now-${v.n}${c}`, to: "now" };
+  }
+  if (v.kind === "toDate") return { from: `now/${UNIT_CODE[v.unit]}`, to: "now" };
+  if (v.kind === "span") {
+    const c = UNIT_CODE[v.unit];
+    const at = v.off ? `now${v.off > 0 ? "+" : ""}${v.off}${c}/${c}` : `now/${c}`;
+    return { from: at, to: at };
+  }
+  return timeRangeText(v, ctx);
+}
+function dayText(Z, ms) {
+  return formatDateMathInstant(Z, ms).slice(0, 10);
+}
+function autoView(from, to, Z) {
+  const span = to - from;
+  const wholeDays = from === Z.startOfDay(from) && to === Z.startOfDay(to);
+  if (wholeDays && span <= 62 * DAY_MS) return "calendar";
+  if (span <= DAY_MS) return "clock";
+  return span <= 62 * DAY_MS ? "calendar" : "year";
+}
+function TimeRangeSheetBody({
+  ctx,
+  value,
+  onApply,
+  onCancel,
+  options,
+  recent,
+  labels,
+  dateLabels,
+  children,
+  parts: partsProp,
+  units = TIME_RANGE_UNITS,
+  periods = TIME_RANGE_PERIODS,
+  views = TIME_RANGE_VIEWS,
+  view: viewProp = "auto",
+  defaultSoFar = true,
+  applyMode = "instant",
+  allowFuture = false,
+  ampm = false
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const Z = ctx.Z;
+  const now = ctx.now ?? Date.now();
+  const part = { ...DEFAULT_PARTS, ...partsProp };
+  const initial = React.useMemo(() => timeRangeText(value, ctx), [value, ctx]);
+  const [from, setFrom] = React.useState(initial.from || "now-6h");
+  const [to, setTo] = React.useState(initial.to || "now");
+  const [command, setCommand] = React.useState("");
+  const steps = [
+    ["relative", part.relative && units.length > 0],
+    ["periods", part.periods && periods.length > 0],
+    ["quickRanges", part.quickRanges],
+    ["custom", part.preview || part.fields]
+  ].filter(([, on]) => on).map(([key]) => key);
+  const recentShown = part.recent ? recent.slice(0, 3) : [];
+  const single = steps.length === 1 && !part.command && recentShown.length === 0;
+  const [stepState, setStep] = React.useState("home");
+  const step = single ? steps[0] : stepState;
+  const [query, setQuery] = React.useState("");
+  const [soFar, setSoFar] = React.useState(() => {
+    const p = periods.find((x) => x.from === initial.from);
+    if (p && p.toSoFar != null && initial.to === p.toSoFar) return true;
+    if (p && initial.to === p.to) return false;
+    return defaultSoFar;
+  });
+  const [viewPick, setViewPick] = React.useState(
+    viewProp === "auto" ? null : viewProp
+  );
+  const [anchor, setAnchor] = React.useState(null);
+  const clockDrag = React.useRef(null);
+  const [rulerWidth, setRulerWidth] = React.useState(0);
+  const [calView, setCalView] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const parsed = React.useMemo(() => parseTimeRange(from, to, ctx), [from, to, ctx]);
+  const draft = parsed.ok ? parsed.value : null;
+  const lastGood = React.useRef(null);
+  if (draft) {
+    const r = resolveDateValue(draft, ctx);
+    if (r.from != null && r.to != null) lastGood.current = { from: r.from, to: r.to };
+  }
+  const shown = lastGood.current ?? { from: now - 6 * HOUR_MS, to: now };
+  const live = to.trim() === "now";
+  const dirty = from !== (initial.from || "now-6h") || to !== (initial.to || "now");
+  const apply = () => {
+    const r = parseTimeRange(from, to, ctx);
+    if (!r.ok) {
+      setError({ field: r.field, message: r.message });
+      setStep("custom");
+      return;
+    }
+    setError(null);
+    onApply(r.value);
+  };
+  const fill = (next, keep = {}) => {
+    setFrom(next.from);
+    setTo(next.to);
+    setError(null);
+    if (!keep.command) setCommand("");
+    if (!keep.view) {
+      setViewPick(viewProp === "auto" ? null : viewProp);
+      setCalView(null);
+    }
+  };
+  const pick = (next, keep) => {
+    if (applyMode === "instant") {
+      const r = parseTimeRange(next.from, next.to, ctx);
+      if (r.ok) {
+        onApply(r.value);
+        return;
+      }
+    }
+    setAnchor(null);
+    fill(next, keep);
+  };
+  const chip = (key, on, text, onPress, a11y, mono = false) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: a11y,
+      accessibilityState: { selected: on },
+      ...{ "aria-pressed": on },
+      onPress,
+      style: ({ pressed }) => [styles.chip, on && styles.chipOn, pressed && styles.pressed],
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, mono && styles.mono, on && styles.chipTextOn], children: text })
+    },
+    key
+  );
+  const commandEnds = command.trim() ? readCommand(command, ctx) : null;
+  const commandBad = command.trim() !== "" && !commandEnds;
+  const commandBox = /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "sm",
+        leadingIcon: "search",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        accessibilityLabel: labels.command,
+        placeholder: labels.commandPlaceholder,
+        value: command,
+        error: commandBad,
+        onChangeText: (text) => {
+          setCommand(text);
+          const ends = readCommand(text, ctx);
+          if (ends) {
+            setAnchor(null);
+            fill(ends, { command: true });
+          }
+        },
+        onSubmitEditing: () => {
+          if (commandEnds) apply();
+        }
+      }
+    ),
+    commandBad ? /* @__PURE__ */ jsx(Text, { style: styles.statusBad, children: labels.notARange }) : draft ? /* @__PURE__ */ jsxs(View, { style: styles.status, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accent }),
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.statusText, children: valueLabel(draft, ctx) })
+    ] }) : null
+  ] });
+  const ladderCols = Math.max(...units.map((r) => r.counts.length), 1);
+  const ladder = /* @__PURE__ */ jsx(View, { style: styles.group, children: units.map((row) => {
+    const code = UNIT_CODE[row.unit];
+    return /* @__PURE__ */ jsxs(View, { style: styles.unitRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.unitName, children: labels.unitRow(row.unit) }),
+      /* @__PURE__ */ jsx(View, { style: styles.chips, children: Array.from({ length: ladderCols }, (_, i) => {
+        const n = row.counts[i];
+        if (n == null) return /* @__PURE__ */ jsx(View, { style: styles.cell }, `gap-${i}`);
+        const ends = { from: `now-${n}${code}`, to: "now" };
+        return /* @__PURE__ */ jsx(View, { style: styles.cell, children: chip(
+          n,
+          from === ends.from && to === ends.to,
+          n.toLocaleString(ctx.locale),
+          () => pick(ends),
+          dateLabels.lastN(n, row.unit),
+          true
+        ) }, n);
+      }) })
+    ] }, row.unit);
+  }) });
+  const hasSoFar = periods.some((p) => p.toSoFar != null);
+  const periodEnds = (p, on) => ({
+    from: p.from,
+    to: on && p.toSoFar != null ? p.toSoFar : p.to
+  });
+  const activePeriod = periods.find((p) => from === p.from && (to === p.to || to === p.toSoFar));
+  const periodList = /* @__PURE__ */ jsxs(View, { children: [
+    periods.map((p) => {
+      const ends = periodEnds(p, soFar);
+      const on = from === ends.from && to === ends.to;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityState: { selected: on },
+          ...{ "aria-pressed": on },
+          onPress: () => pick(ends),
+          style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+          children: [
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.rowText, on && styles.rowTextOn], children: labels.periodNames[p.id] ?? p.label ?? p.id }),
+            on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accent }) : null
+          ]
+        },
+        p.id
+      );
+    }),
+    hasSoFar ? /* @__PURE__ */ jsxs(View, { style: styles.soFar, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.rowText, children: labels.soFar }),
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          size: "sm",
+          accessibilityLabel: labels.soFar,
+          value: soFar,
+          onValueChange: (on) => {
+            setSoFar(on);
+            if (activePeriod) fill(periodEnds(activePeriod, on), { view: true });
+          }
+        }
+      )
+    ] }) : null
+  ] });
+  const recentList = /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+    /* @__PURE__ */ jsx(Text, { role: "heading", style: styles.partLabel, children: labels.recentlyUsed }),
+    /* @__PURE__ */ jsx(View, { accessibilityRole: "list", children: recentShown.map((r, i) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        onPress: () => pick(timeRangeText(r, ctx)),
+        style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.xs, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.rowText, children: timeRangeLabel(r, ctx) })
+        ]
+      },
+      i
+    )) })
+  ] });
+  const selected = value?.kind === "expression" ? findTimeRangeOption(value, options) : null;
+  const quickList = () => {
+    const q = query.trim().toLowerCase();
+    const rows = options.filter(
+      (o) => !q || o.label.toLowerCase().includes(q) || quickRangeLabel(o, dateLabels).toLowerCase().includes(q) || o.from.toLowerCase().includes(q)
+    ).map((o) => ({
+      key: `${o.from}|${o.to}`,
+      name: o.label,
+      label: quickRangeLabel(o, dateLabels),
+      option: o
+    }));
+    return /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          size: "sm",
+          leadingIcon: "search",
+          autoCapitalize: "none",
+          autoCorrect: false,
+          accessibilityLabel: labels.searchRanges(labels.quickRangeList),
+          placeholder: labels.searchRanges(labels.quickRangeList),
+          value: query,
+          onChangeText: setQuery
+        }
+      ),
+      /* @__PURE__ */ jsx(View, { accessibilityRole: "list", children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noRangeMatches(query.trim()) }) : rows.map((row) => {
+        const on = selected?.label === row.name;
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { selected: on },
+            onPress: () => {
+              const v = timeRangeValue(row.option);
+              if (applyMode === "instant") onApply(v);
+              else pick(timeRangeText(v, ctx));
+            },
+            style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+            children: [
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.rowText, on && styles.rowTextOn], children: row.label }),
+              on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.accent }) : null
+            ]
+          },
+          row.key
+        );
+      }) })
+    ] });
+  };
+  const offered = views.length > 0 ? views : TIME_RANGE_VIEWS;
+  const auto = autoView(shown.from, shown.to, Z);
+  const mode = viewPick && offered.includes(viewPick) ? viewPick : offered.includes(auto) ? auto : offered[0];
+  const todayStart = Z.startOfDay(now);
+  const lastDay = Z.startOfDay(shown.to - 1);
+  const clockRange = (a, b) => {
+    let lo = Math.min(a, b);
+    let hi = Math.max(a, b);
+    if (!allowFuture) hi = Math.min(hi, now);
+    if (hi - lo < QUARTER_MS) lo = hi - QUARTER_MS;
+    fill(
+      {
+        from: formatDateMathInstant(Z, lo),
+        to: hi >= now ? "now" : formatDateMathInstant(Z, hi)
+      },
+      { view: true }
+    );
+    setViewPick("clock");
+  };
+  const clock = () => {
+    const anchorAt = shown.to > now - DAY_MS ? Math.max(now, shown.to) : shown.to;
+    const w = Z.wall(anchorAt);
+    const end = clockDrag.current?.end ?? Z.ms(w.y, w.mo, w.d, w.h) + (w.mi || w.s ? HOUR_MS : 0);
+    const start = end - DAY_MS;
+    const pct = (t) => Math.max(0, Math.min(100, (t - start) / DAY_MS * 100));
+    const snap = (t) => start + Math.round((t - start) / QUARTER_MS) * QUARTER_MS;
+    const ticks = [];
+    for (let i = 1; i < 24; i++) {
+      const t = start + i * HOUR_MS;
+      const tw = Z.wall(t);
+      if (tw.mi === 0 && tw.h % 6 === 0)
+        ticks.push({ at: pct(t), text: pad2(tw.h), midnight: tw.h === 0 });
+    }
+    const end2 = (ms) => `${dayLabel(Z, ms, { noYear: true, locale: ctx.locale })}, ${timeLabel(Z, ms, ampm, false, dateLabels)}`;
+    const oneDay = shown.to - shown.from <= DAY_MS && Z.dayKey(shown.from) === Z.dayKey(shown.to - 1);
+    const endText = (ms) => oneDay ? timeLabel(Z, ms, ampm, false, dateLabels) : end2(ms);
+    const at = (pageX, left) => {
+      let f = rulerWidth > 0 ? Math.max(0, Math.min(1, (pageX - left) / rulerWidth)) : 0;
+      if (I18nManager.isRTL) f = 1 - f;
+      return snap(start + f * DAY_MS);
+    };
+    const onGrant = (e) => {
+      const { pageX, locationX } = e.nativeEvent;
+      const left = pageX - locationX;
+      const t = at(pageX, left);
+      const near = HOUR_MS * 44 / Math.max(120, rulerWidth);
+      const fixed = Math.abs(t - shown.to) <= near ? shown.from : Math.abs(t - shown.from) <= near ? shown.to : t;
+      clockDrag.current = { fixed, end, left };
+      clockRange(fixed, fixed === t ? t + QUARTER_MS : t);
+    };
+    const onMove = (e) => {
+      const d = clockDrag.current;
+      if (d) clockRange(d.fixed, at(e.nativeEvent.pageX, d.left));
+    };
+    const onEnd = () => {
+      clockDrag.current = null;
+    };
+    const move = (which, by) => {
+      if (which === "from")
+        clockRange(Math.min(snap(shown.from + by), shown.to - QUARTER_MS), shown.to);
+      else clockRange(shown.from, Math.max(snap(shown.to + by), shown.from + QUARTER_MS));
+    };
+    const nudge = (which) => (e) => move(which, e.nativeEvent.actionName === "increment" ? QUARTER_MS : -QUARTER_MS);
+    const keys = (which) => ({
+      onKeyDown: (e) => {
+        const step2 = (e.shiftKey ? HOUR_MS : QUARTER_MS) * (I18nManager.isRTL ? -1 : 1);
+        const by = e.key === "ArrowRight" || e.key === "ArrowUp" ? step2 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -step2 : 0;
+        if (!by) return;
+        e.preventDefault();
+        move(which, by);
+      }
+    });
+    const handle = (which) => {
+      const t = which === "from" ? shown.from : shown.to;
+      if (t < start) return null;
+      return /* @__PURE__ */ jsx(
+        View,
+        {
+          accessible: true,
+          accessibilityRole: "adjustable",
+          accessibilityLabel: `${labels.preview}: ${which === "from" ? labels.from : labels.to}`,
+          accessibilityValue: { text: which === "to" && live ? labels.now : end2(t) },
+          accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+          onAccessibilityAction: nudge(which),
+          focusable: true,
+          ...keys(which),
+          pointerEvents: "none",
+          style: [styles.handle, { start: `${pct(t)}%` }],
+          children: /* @__PURE__ */ jsx(View, { style: styles.handleGrip })
+        },
+        which
+      );
+    };
+    return /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          accessibilityLabel: labels.timeRangeTo(
+            end2(shown.from),
+            live ? labels.now : end2(shown.to)
+          ),
+          style: [styles.bigTime, !oneDay && styles.bigTimeDays],
+          children: [
+            endText(shown.from),
+            /* @__PURE__ */ jsx(Text, { style: styles.arrow, children: " \u2192 " }),
+            live ? labels.now : endText(shown.to)
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            onLayout: (e) => setRulerWidth(e.nativeEvent.layout.width),
+            onStartShouldSetResponder: () => true,
+            onMoveShouldSetResponder: () => true,
+            onResponderTerminationRequest: () => false,
+            onResponderGrant: onGrant,
+            onResponderMove: onMove,
+            onResponderRelease: onEnd,
+            onResponderTerminate: onEnd,
+            style: styles.rulerTouch,
+            children: [
+              /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles.ruler, children: [
+                ticks.map((t) => /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: [styles.tick, t.midnight && styles.tickMidnight, { start: `${t.at}%` }]
+                  },
+                  t.at
+                )),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: [
+                      styles.band,
+                      shown.from < start && styles.bandClipped,
+                      { start: `${pct(shown.from)}%`, width: `${pct(shown.to) - pct(shown.from)}%` }
+                    ]
+                  }
+                ),
+                !live && now >= start && now <= end ? /* @__PURE__ */ jsx(View, { style: [styles.nowMark, { start: `${pct(now)}%` }] }) : null
+              ] }),
+              handle("from"),
+              handle("to")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            ...{ "aria-hidden": true },
+            importantForAccessibility: "no-hide-descendants",
+            style: styles.tickLabels,
+            children: ticks.map((t) => /* @__PURE__ */ jsx(Text, { style: [styles.tickText, { start: `${t.at}%` }], children: t.text }, t.at))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.clockHint })
+    ] });
+  };
+  const pickDay = (ms) => {
+    const d = Z.startOfDay(ms);
+    if (anchor == null) {
+      setAnchor(d);
+      fill({ from: dayText(Z, d), to: dayText(Z, d) }, { view: true });
+      setViewPick("calendar");
+      return;
+    }
+    const lo = Math.min(anchor, d);
+    const hi = Math.max(anchor, d);
+    setAnchor(null);
+    fill({ from: dayText(Z, lo), to: dayText(Z, hi) }, { view: true });
+    setViewPick("calendar");
+  };
+  const month = calView ?? Z.startOfMonth(lastDay);
+  const lastMonth = allowFuture ? null : Z.startOfMonth(now);
+  const navButton = (dir) => {
+    const off = dir > 0 && lastMonth != null && month >= lastMonth;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: dir < 0 ? labels.previousMonth : labels.nextMonth,
+        accessibilityState: { disabled: off },
+        disabled: off,
+        onPress: () => setCalView(Z.addMonths(month, dir)),
+        style: ({ pressed }) => [styles.nav, off && styles.off, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: dir < 0 ? "chevron-left" : "chevron-right",
+            size: theme.icon.sm,
+            color: theme.color.text2
+          }
+        )
+      }
+    );
+  };
+  const calendar = () => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.navRow, children: [
+      navButton(-1),
+      navButton(1)
+    ] }),
+    /* @__PURE__ */ jsx(
+      MonthList,
+      {
+        Z,
+        anchorMs: month,
+        radius: 0,
+        ctx,
+        from: anchor ?? Z.startOfDay(shown.from),
+        to: anchor != null ? null : Z.addDays(lastDay, 1),
+        constraints: allowFuture ? void 0 : { disableFuture: true },
+        onPick: pickDay
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.empty, children: anchor != null ? labels.calendarHintEnd : labels.calendarHint })
+  ] });
+  const year = () => {
+    const names = localeNames(ctx.locale);
+    const endMonth = Z.startOfMonth(lastDay);
+    const cells = [];
+    for (let i = 11; i >= 0; i--) {
+      const s = Z.addMonths(endMonth, -i);
+      const e = Z.addMonths(s, 1);
+      const sw = Z.wall(s);
+      const overlap = Math.max(0, Math.min(e, shown.to) - Math.max(s, shown.from));
+      const fillPct = Math.round(overlap / (e - s) * 100);
+      const future = !allowFuture && s > now;
+      const lastPick = allowFuture ? Z.addDays(e, -1) : Math.min(Z.addDays(e, -1), todayStart);
+      const ends = { from: dayText(Z, s), to: dayText(Z, lastPick) };
+      const on = from === ends.from && to === ends.to;
+      cells.push(
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `${names.months[sw.mo]} ${sw.y}`,
+            accessibilityState: { disabled: future, selected: on },
+            ...{ "aria-pressed": on },
+            disabled: future,
+            onPress: () => {
+              setAnchor(null);
+              fill(ends, { view: true });
+            },
+            style: ({ pressed }) => [
+              styles.monthCell,
+              future && styles.off,
+              pressed && styles.pressed
+            ],
+            children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.monthName, children: names.abbr[sw.mo] }),
+              /* @__PURE__ */ jsx(View, { style: styles.monthBar, children: /* @__PURE__ */ jsx(View, { style: [styles.monthFill, { height: `${fillPct}%` }] }) }),
+              /* @__PURE__ */ jsx(Text, { style: styles.monthYear, children: sw.mo === 0 || i === 11 ? sw.y : "" })
+            ]
+          },
+          s
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(View, { style: styles.yearGrid, children: cells });
+  };
+  const preview = /* @__PURE__ */ jsxs(View, { accessibilityLabel: labels.preview, style: styles.group, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.headingRow, children: [
+      offered.length > 1 ? /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "sm",
+          accessibilityLabel: labels.viewSwitch,
+          items: offered.map((v) => ({ value: v, label: labels.viewNames[v] })),
+          value: mode,
+          onValueChange: (v) => setViewPick(v)
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Text, { style: styles.duration, children: durationLabel(shown.from, shown.to, dateLabels) })
+    ] }),
+    mode === "clock" ? clock() : mode === "calendar" ? calendar() : year()
+  ] });
+  const field = (side) => /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.partLabel, children: side === "from" ? labels.from : labels.to }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        size: "sm",
+        autoCapitalize: "none",
+        autoCorrect: false,
+        accessibilityLabel: side === "from" ? labels.from : labels.to,
+        value: side === "from" ? from : to,
+        error: error?.field === side,
+        onChangeText: (t) => {
+          (side === "from" ? setFrom : setTo)(t);
+          setCommand("");
+          setAnchor(null);
+          if (error?.field === side) setError(null);
+        },
+        onSubmitEditing: apply
+      }
+    )
+  ] }, side);
+  const inLadder = units.some(
+    (row) => row.counts.some((n) => from === `now-${n}${UNIT_CODE[row.unit]}` && to === "now")
+  );
+  const holder = !draft ? null : inLadder && steps.includes("relative") ? "relative" : activePeriod && steps.includes("periods") ? "periods" : steps.includes("custom") ? "custom" : null;
+  const home = /* @__PURE__ */ jsxs(Fragment, { children: [
+    part.command ? commandBox : null,
+    steps.length > 0 ? /* @__PURE__ */ jsx(View, { children: steps.map((s) => {
+      const on = holder === s;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          onPress: () => setStep(s),
+          style: ({ pressed }) => [styles.stepRow, pressed && styles.pressed],
+          children: [
+            /* @__PURE__ */ jsx(View, { style: [styles.stepIcon, on && styles.stepIconOn], children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: STEP_ICON[s],
+                size: theme.icon.sm,
+                color: on ? theme.color.accent : theme.color.text2
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(View, { style: styles.stepText, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.stepTitle, children: labels.stepNames[s] }),
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.stepHint, on && styles.stepHintOn], children: on && draft ? timeRangeLabel(draft, ctx) : labels.stepHints[s] })
+            ] }),
+            /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 })
+          ]
+        },
+        s
+      );
+    }) }) : null,
+    recentShown.length > 0 ? recentList : null,
+    children
+  ] });
+  const header = (title) => /* @__PURE__ */ jsxs(View, { style: styles.stepHeader, children: [
+    single ? null : /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.back,
+        onPress: () => setStep("home"),
+        style: ({ pressed }) => [styles.nav, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.sm, color: theme.color.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { role: "heading", numberOfLines: 1, style: styles.stepTitle, children: title })
+  ] });
+  const custom = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header(labels.stepNames.custom),
+    part.preview ? preview : null,
+    part.fields ? /* @__PURE__ */ jsxs(View, { style: styles.fields, children: [
+      field("from"),
+      field("to")
+    ] }) : null,
+    part.zone ? /* @__PURE__ */ jsxs(View, { style: styles.zone, children: [
+      /* @__PURE__ */ jsx(Icon, { name: "globe", size: theme.icon.xs, color: theme.color.text3 }),
+      /* @__PURE__ */ jsx(Text, { style: styles.zoneText, children: zoneLabel(Z, now) })
+    ] }) : null
+  ] });
+  const showActions = part.actions && (step === "custom" || dirty || error != null);
+  return /* @__PURE__ */ jsxs(View, { style: styles.panel, children: [
+    step === "home" ? home : null,
+    step === "relative" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      header(labels.lastHeading),
+      ladder
+    ] }) : null,
+    step === "periods" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      header(labels.periodsHeading),
+      periodList
+    ] }) : null,
+    step === "quickRanges" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      header(labels.quickRangeList),
+      quickList()
+    ] }) : null,
+    step === "custom" ? custom : null,
+    error ? /* @__PURE__ */ jsx(Text, { accessibilityRole: "alert", style: styles.error, children: error.message }) : null,
+    showActions ? /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancel, children: labels.cancel }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onPress: apply, children: labels.applyRange })
+    ] }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => {
+  const small = {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  };
+  const tiny = {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
+  };
+  return {
+    panel: { gap: theme.space.s5 },
+    stepRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.space.s3,
+      minHeight: theme.tapMin + theme.space.s3
+    },
+    stepIcon: {
+      width: theme.tapMin - theme.space.s2,
+      height: theme.tapMin - theme.space.s2,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radius.md,
+      backgroundColor: theme.color.surface2
+    },
+    stepIconOn: { backgroundColor: theme.color.accentSoft },
+    stepText: { flex: 1, minWidth: 0 },
+    stepTitle: {
+      flexShrink: 1,
+      fontFamily: theme.font.sans,
+      fontSize: theme.type.body.fontSize,
+      lineHeight: theme.type.body.lineHeight,
+      fontWeight: theme.fontWeight.bold,
+      color: theme.color.text
+    },
+    stepHint: { ...small, color: theme.color.text3 },
+    stepHintOn: { color: theme.color.accent },
+    stepHeader: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.space.s1,
+      marginStart: -theme.space.s3
+    },
+    group: { gap: theme.space.s2 },
+    headingRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.space.s2
+    },
+    partLabel: {
+      fontFamily: theme.font.sans,
+      fontSize: theme.type.caption2.fontSize,
+      lineHeight: theme.type.caption2.lineHeight,
+      fontWeight: theme.fontWeight.bold,
+      color: theme.color.text2
+    },
+    status: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+    statusText: { ...small, flexShrink: 1, color: theme.color.text2 },
+    statusBad: { ...small, color: theme.color.dangerOnSoft },
+    unitRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+    unitName: { ...small, width: theme.space.s8 * 2, color: theme.color.text3 },
+    chips: { flex: 1, flexDirection: "row", gap: theme.space.s1 },
+    cell: { flex: 1, minWidth: 0 },
+    wrap: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s1 },
+    chip: {
+      minWidth: theme.tapMin,
+      minHeight: theme.tapMin,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingHorizontal: theme.space.s3,
+      borderRadius: theme.radius.md,
+      borderWidth: theme.borderWidth.base,
+      borderColor: theme.color.border,
+      backgroundColor: theme.color.surface
+    },
+    chipOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accent },
+    chipText: { ...small, color: theme.color.text },
+    chipTextOn: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
+    mono: { fontFamily: theme.font.mono, fontVariant: ["tabular-nums"] },
+    soFar: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.space.s2,
+      minHeight: theme.tapMin,
+      paddingHorizontal: theme.space.s1,
+      marginTop: theme.space.s2,
+      borderTopWidth: theme.borderWidth.base,
+      borderTopColor: theme.color.border
+    },
+    soFarText: { ...small, color: theme.color.text3 },
+    empty: { ...small, color: theme.color.text3 },
+    row: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: theme.space.s2,
+      minHeight: theme.tapMin,
+      paddingHorizontal: theme.space.s1
+    },
+    rowText: {
+      flex: 1,
+      fontFamily: theme.font.sans,
+      fontSize: theme.type.body.fontSize,
+      lineHeight: theme.type.body.lineHeight,
+      color: theme.color.text
+    },
+    rowTextOn: { fontWeight: theme.fontWeight.bold },
+    duration: { ...tiny, marginStart: "auto" },
+    bigTimeDays: { fontSize: theme.type.title3.fontSize, lineHeight: theme.type.title3.lineHeight },
+    bigTime: {
+      fontFamily: theme.font.mono,
+      fontSize: theme.type.title2.fontSize,
+      lineHeight: theme.type.title2.lineHeight,
+      fontWeight: theme.fontWeight.bold,
+      fontVariant: ["tabular-nums"],
+      color: theme.color.text
+    },
+    arrow: { color: theme.color.text3 },
+    rulerTouch: { justifyContent: "center", minHeight: theme.tapMin },
+    ruler: {
+      height: theme.space.s6,
+      borderRadius: theme.radius.xs,
+      backgroundColor: theme.color.surface2
+    },
+    tick: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      width: 1,
+      backgroundColor: theme.color.border
+    },
+    tickMidnight: { backgroundColor: theme.color.borderStrong },
+    band: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      borderRadius: theme.radius.xs,
+      borderWidth: theme.borderWidth.base,
+      borderColor: theme.edge.accent,
+      backgroundColor: theme.color.accentSoft
+    },
+    bandClipped: { borderStartWidth: 0, borderTopStartRadius: 0, borderBottomStartRadius: 0 },
+    nowMark: {
+      position: "absolute",
+      top: -theme.space.s1,
+      bottom: -theme.space.s1,
+      width: 1,
+      backgroundColor: theme.color.text3
+    },
+    handle: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      width: theme.space.s4,
+      marginStart: -theme.space.s2,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    handleGrip: {
+      width: theme.borderWidth.heavy * 2,
+      height: theme.space.s6 + theme.space.s2,
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.color.accent
+    },
+    tickLabels: { height: theme.type.caption2.lineHeight, marginTop: theme.space.s1 },
+    tickText: { ...tiny, position: "absolute", transform: [{ translateX: -theme.space.s2 }] },
+    navRow: { flexDirection: "row", justifyContent: "space-between" },
+    nav: {
+      minWidth: theme.tapMin,
+      minHeight: theme.tapMin,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    yearGrid: { flexDirection: "row", flexWrap: "wrap", rowGap: theme.space.s2 },
+    monthCell: {
+      width: `${100 / 6}%`,
+      alignItems: "stretch",
+      gap: theme.space.s1,
+      paddingHorizontal: theme.space.s1
+    },
+    monthName: {
+      ...small,
+      textAlign: "center",
+      fontWeight: theme.fontWeight.bold,
+      color: theme.color.text2
+    },
+    monthBar: {
+      height: theme.space.s8,
+      overflow: "hidden",
+      justifyContent: "flex-end",
+      borderRadius: theme.radius.xs,
+      backgroundColor: theme.color.surface2
+    },
+    monthFill: { backgroundColor: theme.color.accent },
+    monthYear: { ...tiny, textAlign: "center" },
+    fields: { flexDirection: "row", gap: theme.space.s2 },
+    field: { flex: 1, gap: theme.space.s1 },
+    error: { ...small, color: theme.color.dangerOnSoft },
+    actions: { flexDirection: "row", justifyContent: "flex-end", gap: theme.space.s2 },
+    off: { opacity: theme.state.disabledOpacity },
+    pressed: { opacity: theme.state.pressedOpacity },
+    zone: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+    zoneText: {
+      fontFamily: theme.font.sans,
+      fontSize: theme.type.caption2.fontSize,
+      lineHeight: theme.type.caption2.lineHeight,
+      color: theme.color.text3
+    }
+  };
+});
+var REFRESH_INTERVALS = ["10s", "30s", "1m", "5m", "15m", "1h"];
+var INTERVAL_UNIT = { s: 1e3, m: 6e4, h: 36e5, d: 864e5 };
+function refreshIntervalMs(interval) {
+  const m = /^(\d+)([smhd])$/.exec(interval ?? "");
+  if (!m) return null;
+  const ms = Number(m[1]) * INTERVAL_UNIT[m[2]];
+  return ms > 0 ? ms : null;
+}
+function useRefreshTimer(ms, paused, onTick) {
+  const [active, setActive] = React.useState(AppState.currentState !== "background");
+  const tick = React.useRef(onTick);
+  tick.current = onTick;
+  React.useEffect(() => {
+    const sub = AppState.addEventListener("change", (s) => setActive(s === "active"));
+    return () => sub.remove();
+  }, []);
+  const [n, setN] = React.useState(0);
+  React.useEffect(() => {
+    if (ms == null || paused || !active) return;
+    const id = setTimeout(() => {
+      setN((x) => x + 1);
+      tick.current();
+    }, ms);
+    return () => clearTimeout(id);
+  }, [ms, paused, active, n]);
+}
+var DEFAULT_VALUE = timeRangeValue({ from: "now-6h", to: "now" });
+function TimeRangeControl({
+  value: valueProp,
+  defaultValue = DEFAULT_VALUE,
+  onChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  timeZone = "default",
+  options = TIME_RANGE_OPTIONS,
+  weekStartsOn = 1,
+  locale,
+  now,
+  recent: recentProp,
+  onRecentChange,
+  storage,
+  storageId,
+  recentLimit = 5,
+  shift = true,
+  zoom = true,
+  onRefresh,
+  loading = false,
+  onCancelRefresh,
+  refreshInterval,
+  defaultRefreshInterval = "off",
+  onRefreshIntervalChange,
+  refreshIntervals = REFRESH_INTERVALS,
+  minRefreshInterval,
+  label: labelProp,
+  disabled = false,
+  style,
+  labels: labelsProp,
+  ...panelOptions
+}) {
+  const labels = useLabels("timeRangeControl", DEFAULT_LABELS, labelsProp);
+  const label = labelProp ?? labels.timeRange;
+  const dateLabels = React.useMemo(() => dateLabelsOf(labels), [labels]);
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet2);
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = valueProp !== void 0 ? valueProp : internalValue;
+  const key = storage && storageId ? storageKey("time-range", storageId) : null;
+  const [internalRecent, setInternalRecent] = React.useState(
+    () => (key ? readStored(storage, key) : null) ?? []
+  );
+  const recent = recentProp ?? internalRecent;
+  const floor = refreshIntervalMs(minRefreshInterval) ?? 0;
+  const offered = refreshIntervals.filter((i) => (refreshIntervalMs(i) ?? 0) >= floor);
+  const [internalInterval, setInternalInterval] = React.useState(defaultRefreshInterval);
+  const chosen = refreshInterval ?? internalInterval;
+  const interval = (refreshIntervalMs(chosen) ?? 0) >= floor ? chosen : "off";
+  const pickInterval = (next) => {
+    if (refreshInterval === void 0) setInternalInterval(next);
+    onRefreshIntervalChange?.(next);
+  };
+  useRefreshTimer(
+    onRefresh ? refreshIntervalMs(interval) : null,
+    loading || disabled,
+    () => onRefresh?.()
+  );
+  const Z = React.useMemo(() => dateZone(timeZone), [timeZone]);
+  const readCtx = () => ({
+    Z,
+    now: now?.() ?? Date.now(),
+    weekStartsOn,
+    granularity: "second",
+    locale,
+    labels: dateLabels
+  });
+  const ctx = readCtx();
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+  const setOpen = (next) => {
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const [session, setSession] = React.useState(0);
+  React.useEffect(() => {
+    if (open) setSession((n) => n + 1);
+  }, [open]);
+  const commit = (next, source) => {
+    const c = readCtx();
+    const r = resolveDateValue(next, c);
+    if (valueProp === void 0) setInternalValue(next);
+    onChange?.({
+      value: next,
+      from: r.from,
+      to: r.to,
+      label: valueLabel(next, c),
+      tz: Z.tz,
+      exact: r.exact,
+      source
+    });
+  };
+  const commitFromSheet = (next) => {
+    commit(next, "panel");
+    const list = [next, ...recent.filter((r) => !sameDateValue(r, next))].slice(0, recentLimit);
+    if (recentProp === void 0) setInternalRecent(list);
+    if (key) writeStored(storage, key, list);
+    onRecentChange?.(list);
+    setOpen(false);
+  };
+  const step = (dir) => {
+    if (!value) return;
+    const next = shiftTimeRange(value, dir, readCtx());
+    if (next) commit(next, "shift");
+  };
+  const zoomOut = () => {
+    if (!value) return;
+    const next = zoomTimeRange(value, 2, readCtx());
+    if (next) commit(next, "zoom");
+  };
+  const atNow = value ? timeRangeReachesNow(value, ctx) : true;
+  const text = value ? timeRangeLabel(value, ctx) : labels.anyTime;
+  const canZoom = value != null && zoomTimeRange(value, 2, ctx) != null;
+  const cancelling = loading && onCancelRefresh != null;
+  const iconButton = (name, a11y, off, onPress) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: a11y,
+      accessibilityState: { disabled: off },
+      disabled: off,
+      onPress,
+      style: ({ pressed }) => [styles.square, off && styles.off, pressed && styles.pressed],
+      children: /* @__PURE__ */ jsx(Icon, { name, size: theme.icon.sm, color: theme.color.text2 })
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    shift ? iconButton("chevrons-left", labels.moveBack, disabled || !value, () => step(-1)) : null,
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.triggerLabel(label, text),
+        accessibilityHint: value ? timeRangeReceipt(value, ctx) : void 0,
+        accessibilityState: { disabled, expanded: open },
+        disabled,
+        onPress: () => setOpen(true),
+        style: ({ pressed }) => [styles.trigger, disabled && styles.off, pressed && styles.pressed],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.sm, color: theme.color.text2 }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.triggerText, children: text }),
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+        ]
+      }
+    ),
+    shift ? iconButton("chevrons-right", labels.moveForward, disabled || atNow, () => step(1)) : null,
+    zoom ? iconButton("zoom-out", labels.zoomOut, disabled || !canZoom, zoomOut) : null,
+    onRefresh ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        disabled,
+        loading: loading && !cancelling,
+        leadingIcon: cancelling ? "x" : "refresh",
+        accessibilityLabel: cancelling ? labels.cancelRefresh : labels.refresh,
+        onPress: () => cancelling ? onCancelRefresh() : onRefresh(),
+        children: cancelling ? labels.cancel : refreshIntervalMs(interval) ? interval : labels.refresh
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Sheet, { open, onClose: () => setOpen(false), title: label, detents: ["half", "full"], children: /* @__PURE__ */ jsx(
+      TimeRangeSheetBody,
+      {
+        ...panelOptions,
+        ctx,
+        value,
+        options,
+        recent,
+        labels,
+        dateLabels,
+        onApply: commitFromSheet,
+        onCancel: () => setOpen(false),
+        children: onRefresh ? /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.partLabel, children: labels.autoRefresh }),
+          /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              horizontal: true,
+              showsHorizontalScrollIndicator: false,
+              contentContainerStyle: styles.chips,
+              children: ["off", ...offered].map((i) => {
+                const on = (refreshIntervalMs(interval) == null ? "off" : interval) === i;
+                return /* @__PURE__ */ jsx(
+                  Pressable,
+                  {
+                    accessibilityRole: "radio",
+                    accessibilityState: { checked: on },
+                    accessibilityLabel: i === "off" ? labels.off : i,
+                    onPress: () => pickInterval(i),
+                    style: ({ pressed }) => [
+                      styles.chip,
+                      on && styles.chipOn,
+                      pressed && styles.pressed
+                    ],
+                    children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: i === "off" ? labels.off : i })
+                  },
+                  i
+                );
+              })
+            }
+          )
+        ] }) : null
+      },
+      session
+    ) })
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  root: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  square: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  trigger: {
+    flexShrink: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  triggerText: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  off: { opacity: theme.state.disabledOpacity },
+  pressed: { opacity: theme.state.pressedOpacity },
+  group: { gap: theme.space.s1 },
+  partLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text2
+  },
+  chips: { flexDirection: "row", gap: theme.space.s1 },
+  chip: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chipOn: { borderColor: theme.edge.accent, backgroundColor: theme.color.accentSoft },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  chipTextOn: { color: theme.color.accentOnSoft, fontWeight: theme.fontWeight.bold }
+}));
+
+export { REFRESH_INTERVALS, TIME_RANGE_PERIODS, TIME_RANGE_UNITS, TIME_RANGE_VIEWS, TimeRangeControl, refreshIntervalMs };