@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-D5N5QWI7.js → chunk-CVU6S2E5.js}

@@ -1,17 +1,21 @@
 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 { MonthList } from './chunk-TZO6YDS7.js';
+import { ListRow } from './chunk-JA6TK7H2.js';
+import { getClipboard } from './chunk-TTQ24HQX.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Switch } from './chunk-VFDQAAIW.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React from 'react';
-import { View, Pressable, Text, ScrollView, AppState, I18nManager } from 'react-native';
+import { View, Text, ScrollView, Pressable, 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';
+import { DEFAULT_DATE_LABELS, timeRangeValue, dateZone, timeRangeReachesNow, timeRangeLabel, zoomTimeRange, resolveDateValue, TIME_RANGE_OPTIONS, sameDateValue, timeRangeReceipt, valueLabel, timeRangeText, parseTimeRange, findTimeRangeOption, durationLabel, zoneLabel, DATE_ZONES, zoneName, shiftTimeRange, isDateMath, parseDateRange, DAY_MS, HOUR_MS, pad2, localeNames, quickRangeLabel, timeLabel, dayLabel, formatDateMathInstant } from '@btndprojects/loam-date';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var UNIT_ROW = {
   second: "Seconds",
@@ -69,6 +73,15 @@ var DEFAULT_LABELS = {
   from: "From",
   to: "To",
   applyRange: "Apply time range",
+  copyRange: "Copy the time range",
+  pasteRange: "Paste a time range",
+  copied: "Time range copied.",
+  clipboardUnavailable: "The clipboard is not available here.",
+  clipboardNoRange: "The clipboard does not hold a time range.",
+  pasted: (from, to) => `Pasted ${from} to ${to}.`,
+  reportIn: "Report in",
+  changeSettings: "Change time settings",
+  hideSettings: "Hide time settings",
   recentlyUsed: "Recently used",
   quickRangeList: "Quick ranges",
   searchRanges: (list) => `Search ${list.toLowerCase()}`,
@@ -76,6 +89,7 @@ var DEFAULT_LABELS = {
   refresh: "Refresh",
   cancel: "Cancel",
   cancelRefresh: "Cancel refresh",
+  customChip: "Custom",
   autoRefresh: "Auto-refresh",
   off: "Off"
 };
@@ -95,7 +109,8 @@ var DEFAULT_PARTS = {
   preview: true,
   fields: true,
   actions: true,
-  zone: true
+  zone: true,
+  clipboard: true
 };
 var TIME_RANGE_UNITS = [
   { unit: "minute", counts: [5, 15, 30] },
@@ -128,6 +143,45 @@ var UNIT_CODE = {
   quarter: "Q",
   year: "y"
 };
+function TimeRangeOptionRow({
+  title,
+  selected,
+  pressed = false,
+  onPress
+}) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "radio",
+      accessibilityState: { checked: selected, disabled: !onPress },
+      "aria-checked": selected,
+      disabled: !onPress,
+      onPress,
+      style: ({ pressed: down }) => [
+        styles.optionRow,
+        selected ? styles.optionRowOn : null,
+        pressed || down ? styles.optionRowPressed : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.radio, selected && styles.optionRadioOn], children: selected ? /* @__PURE__ */ jsx(View, { style: styles.radioDot }) : null }),
+        /* @__PURE__ */ jsx(Text, { style: styles.rowText, children: title })
+      ]
+    }
+  );
+}
+function readRangeText(text) {
+  const trimmed = text.trim();
+  try {
+    const json = JSON.parse(trimmed);
+    if (json && typeof json.from === "string" && typeof json.to === "string") {
+      return { from: json.from, to: json.to };
+    }
+  } catch {
+  }
+  const m = /^(.+?)\s+(?:to|→)\s+(.+)$/i.exec(trimmed);
+  return m ? { from: m[1], to: m[2] } : null;
+}
 function readCommand(text, ctx) {
   const q = text.trim();
   if (!q) return null;
@@ -173,6 +227,10 @@ function TimeRangeSheetBody({
   labels,
   dateLabels,
   children,
+  timezone,
+  onTimezoneChange,
+  timezones = DATE_ZONES,
+  onNotify,
   parts: partsProp,
   units = TIME_RANGE_UNITS,
   periods = TIME_RANGE_PERIODS,
@@ -181,10 +239,14 @@ function TimeRangeSheetBody({
   defaultSoFar = true,
   applyMode = "instant",
   allowFuture = false,
-  ampm = false
+  ampm = false,
+  platform,
+  optionStyle = "list",
+  surface
 }) {
   const theme = useLoamTheme();
   const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
   const Z = ctx.Z;
   const now = ctx.now ?? Date.now();
   const part = { ...DEFAULT_PARTS, ...partsProp };
@@ -258,16 +320,31 @@ function TimeRangeSheetBody({
     setAnchor(null);
     fill(next, keep);
   };
-  const chip = (key, on, text, onPress, a11y, mono = false) => /* @__PURE__ */ jsx(
-    Pressable,
+  const chip = (key, on, text, onPress, a11y) => (
+    // Chip sm with the state-selected fill: the label keeps its weight, so it
+    // never changes width on tap (F49).
+    /* @__PURE__ */ jsx(
+      Chip,
+      {
+        variant: "filter",
+        size: "sm",
+        selected: on,
+        onSelectedChange: () => onPress(),
+        accessibilityLabel: a11y,
+        children: text
+      },
+      key
+    )
+  );
+  const sheetRow = (key, on, title, onPress, leading) => optionStyle === "radio" && on != null && !leading ? /* @__PURE__ */ jsx(TimeRangeOptionRow, { title, selected: on, onPress }, key) : /* @__PURE__ */ jsx(
+    ListRow,
     {
-      accessibilityRole: "button",
-      accessibilityLabel: a11y,
-      accessibilityState: { selected: on },
-      ...{ "aria-pressed": on },
+      platform: android ? "android" : "ios",
+      title,
+      selected: on ?? void 0,
       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 })
+      leading: leading ?? (android && on != null ? /* @__PURE__ */ jsx(View, { style: [styles.radio, on && styles.radioOn], children: on ? /* @__PURE__ */ jsx(View, { style: styles.radioDot }) : null }) : void 0),
+      trailing: !android && on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: theme.color.accentStrong }) : void 0
     },
     key
   );
@@ -278,6 +355,7 @@ function TimeRangeSheetBody({
       Input,
       {
         size: "sm",
+        surface,
         leadingIcon: "search",
         autoCapitalize: "none",
         autoCorrect: false,
@@ -317,8 +395,7 @@ function TimeRangeSheetBody({
           from === ends.from && to === ends.to,
           n.toLocaleString(ctx.locale),
           () => pick(ends),
-          dateLabels.lastN(n, row.unit),
-          true
+          dateLabels.lastN(n, row.unit)
         ) }, n);
       }) })
     ] }, row.unit);
@@ -333,21 +410,7 @@ function TimeRangeSheetBody({
     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
-      );
+      return sheetRow(p.id, on, labels.periodNames[p.id] ?? p.label ?? p.id, () => pick(ends));
     }),
     hasSoFar ? /* @__PURE__ */ jsxs(View, { style: styles.soFar, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.rowText, children: labels.soFar }),
@@ -367,19 +430,15 @@ function TimeRangeSheetBody({
   ] });
   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
-    )) })
+    /* @__PURE__ */ jsx(View, { accessibilityRole: "list", children: recentShown.map(
+      (r, i) => sheetRow(
+        i,
+        null,
+        timeRangeLabel(r, ctx),
+        () => pick(timeRangeText(r, ctx)),
+        /* @__PURE__ */ jsx(Icon, { name: "clock", size: theme.icon.sm, color: theme.color.text3 })
+      )
+    ) })
   ] });
   const selected = value?.kind === "expression" ? findTimeRangeOption(value, options) : null;
   const quickList = () => {
@@ -397,6 +456,7 @@ function TimeRangeSheetBody({
         Input,
         {
           size: "sm",
+          surface,
           leadingIcon: "search",
           autoCapitalize: "none",
           autoCorrect: false,
@@ -408,24 +468,11 @@ function TimeRangeSheetBody({
       ),
       /* @__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
-        );
+        return sheetRow(row.key, on, row.label, () => {
+          const v = timeRangeValue(row.option);
+          if (applyMode === "instant") onApply(v);
+          else pick(timeRangeText(v, ctx));
+        });
       }) })
     ] });
   };
@@ -511,6 +558,9 @@ function TimeRangeSheetBody({
           accessibilityRole: "adjustable",
           accessibilityLabel: `${labels.preview}: ${which === "from" ? labels.from : labels.to}`,
           accessibilityValue: { text: which === "to" && live ? labels.now : end2(t) },
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": Math.round(pct(t)),
           accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
           onAccessibilityAction: nudge(which),
           focusable: true,
@@ -714,6 +764,7 @@ function TimeRangeSheetBody({
       Input,
       {
         size: "sm",
+        surface,
         autoCapitalize: "none",
         autoCorrect: false,
         accessibilityLabel: side === "from" ? labels.from : labels.to,
@@ -737,27 +788,27 @@ function TimeRangeSheetBody({
     part.command ? commandBox : null,
     steps.length > 0 ? /* @__PURE__ */ jsx(View, { children: steps.map((s) => {
       const on = holder === s;
-      return /* @__PURE__ */ jsxs(
-        Pressable,
+      return /* @__PURE__ */ jsx(
+        ListRow,
         {
-          accessibilityRole: "button",
+          platform: android ? "android" : "ios",
           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 })
-          ]
+          chevron: true,
+          accessibilityLabel: labels.stepNames[s],
+          leading: /* @__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.accentStrong : theme.color.text2
+            }
+          ) }),
+          title: labels.stepNames[s],
+          subtitle: (
+            // A plain string takes ListRow's own themed ink; a bare `Text` here
+            // would fall back to the platform's black.
+            on && draft ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.stepHintOn, children: timeRangeLabel(draft, ctx) }) : labels.stepHints[s]
+          )
         },
         s
       );
@@ -765,7 +816,51 @@ function TimeRangeSheetBody({
     recentShown.length > 0 ? recentList : null,
     children
   ] });
-  const header = (title) => /* @__PURE__ */ jsxs(View, { style: styles.stepHeader, children: [
+  const [zoneOpen, setZoneOpen] = React.useState(false);
+  const [announced, setAnnounced] = React.useState("");
+  const copy = async () => {
+    try {
+      const board = getClipboard();
+      if (!board) throw new Error("no clipboard");
+      await board.writeText(JSON.stringify({ from, to }));
+      onNotify?.({ text: labels.copied, tone: "good" });
+    } catch {
+      onNotify?.({ text: labels.clipboardUnavailable, tone: "danger" });
+    }
+  };
+  const paste = async () => {
+    let text;
+    try {
+      const board = getClipboard();
+      if (!board) throw new Error("no clipboard");
+      text = await board.readText();
+    } catch {
+      onNotify?.({ text: labels.clipboardUnavailable, tone: "danger" });
+      return;
+    }
+    const range = readRangeText(text);
+    if (!range) {
+      onNotify?.({ text: labels.clipboardNoRange, tone: "danger" });
+      return;
+    }
+    fill(range);
+    setAnnounced(labels.pasted(range.from, range.to));
+  };
+  const clipboard = part.clipboard ? /* @__PURE__ */ jsx(View, { style: styles.clipboard, children: [
+    ["copy", labels.copyRange, copy],
+    ["clipboard", labels.pasteRange, paste]
+  ].map(([icon, name, run]) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: name,
+      onPress: () => void run(),
+      style: ({ pressed }) => [styles.nav, pressed && styles.pressed],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text })
+    },
+    icon
+  )) }) : null;
+  const header = (title, trailing) => /* @__PURE__ */ jsxs(View, { style: styles.stepHeader, children: [
     single ? null : /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -776,10 +871,12 @@ function TimeRangeSheetBody({
         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 })
+    /* @__PURE__ */ jsx(Text, { role: "heading", numberOfLines: 1, style: styles.stepTitle, children: title }),
+    trailing
   ] });
   const custom = /* @__PURE__ */ jsxs(Fragment, { children: [
-    header(labels.stepNames.custom),
+    header(labels.stepNames.custom, clipboard),
+    announced ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.srOnly, children: announced }) : null,
     part.preview ? preview : null,
     part.fields ? /* @__PURE__ */ jsxs(View, { style: styles.fields, children: [
       field("from"),
@@ -787,7 +884,32 @@ function TimeRangeSheetBody({
     ] }) : 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) })
+      /* @__PURE__ */ jsx(Text, { style: styles.zoneText, children: zoneLabel(Z, now) }),
+      onTimezoneChange ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: zoneOpen ? labels.hideSettings : labels.changeSettings,
+          accessibilityState: { expanded: zoneOpen },
+          onPress: () => setZoneOpen((o) => !o),
+          style: ({ pressed }) => [styles.nav, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: zoneOpen ? "chevron-up" : "chevron-down",
+              size: theme.icon.sm,
+              color: theme.color.text2
+            }
+          )
+        }
+      ) : null
+    ] }) : null,
+    part.zone && onTimezoneChange && zoneOpen ? /* @__PURE__ */ jsxs(View, { style: styles.zoneRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.partLabel, children: labels.reportIn }),
+      /* @__PURE__ */ jsx(View, { role: "group", "aria-label": labels.reportIn, style: styles.zoneChips, children: timezones.map((z) => {
+        const on = z.id === timezone;
+        return chip(z.id, on, zoneName(z, dateLabels), () => onTimezoneChange(z.id));
+      }) })
     ] }) : null
   ] });
   const showActions = part.actions && (step === "custom" || dirty || error != null);
@@ -827,32 +949,26 @@ var sheet = createStyleSheet((theme) => {
   };
   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,
+      borderWidth: theme.borderWidth.base,
+      borderColor: "transparent",
       backgroundColor: theme.color.surface2
     },
-    stepIconOn: { backgroundColor: theme.color.accentSoft },
-    stepText: { flex: 1, minWidth: 0 },
+    stepIconOn: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
     stepTitle: {
       flexShrink: 1,
       fontFamily: theme.font.sans,
       fontSize: theme.type.body.fontSize,
       lineHeight: theme.type.body.lineHeight,
-      fontWeight: theme.fontWeight.bold,
+      fontWeight: theme.fontWeight.semibold,
       color: theme.color.text
     },
-    stepHint: { ...small, color: theme.color.text3 },
-    stepHintOn: { color: theme.color.accent },
+    stepHintOn: { color: theme.color.accentOnSoft },
     stepHeader: {
       flexDirection: "row",
       alignItems: "center",
@@ -881,21 +997,6 @@ var sheet = createStyleSheet((theme) => {
     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",
@@ -908,13 +1009,35 @@ var sheet = createStyleSheet((theme) => {
     },
     soFarText: { ...small, color: theme.color.text3 },
     empty: { ...small, color: theme.color.text3 },
-    row: {
+    // Android's leading radio: 20 ring, 9 dot, text-3 edge, accent when chosen.
+    radio: {
+      width: theme.space[20],
+      height: theme.space[20],
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.radius.full,
+      borderWidth: theme.borderWidth.heavy,
+      borderColor: theme.color.text3
+    },
+    radioOn: { borderColor: theme.focus.ringColor },
+    radioDot: {
+      width: theme.space[9],
+      height: theme.space[9],
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.color.accent
+    },
+    optionRow: {
       flexDirection: "row",
       alignItems: "center",
-      gap: theme.space.s2,
+      gap: theme.space.s3,
       minHeight: theme.tapMin,
-      paddingHorizontal: theme.space.s1
+      paddingHorizontal: theme.space.s3,
+      borderRadius: theme.radius.md,
+      backgroundColor: theme.color.surface
     },
+    optionRowOn: { backgroundColor: theme.state.selected },
+    optionRowPressed: { backgroundColor: theme.state.pressed },
+    optionRadioOn: { borderColor: theme.focus.ringColor },
     rowText: {
       flex: 1,
       fontFamily: theme.font.sans,
@@ -922,7 +1045,6 @@ var sheet = createStyleSheet((theme) => {
       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: {
@@ -980,8 +1102,17 @@ var sheet = createStyleSheet((theme) => {
       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 }] },
+    tickLabels: { height: theme.type.caption1.lineHeight, marginTop: theme.space.s1 },
+    tickText: {
+      ...tiny,
+      fontSize: theme.fontSize[12],
+      lineHeight: theme.type.caption1.lineHeight,
+      fontWeight: theme.fontWeight.medium,
+      fontVariant: ["tabular-nums"],
+      color: theme.color.text2,
+      position: "absolute",
+      transform: [{ translateX: -theme.space.s2 }]
+    },
     navRow: { flexDirection: "row", justifyContent: "space-between" },
     nav: {
       minWidth: theme.tapMin,
@@ -999,7 +1130,7 @@ var sheet = createStyleSheet((theme) => {
     monthName: {
       ...small,
       textAlign: "center",
-      fontWeight: theme.fontWeight.bold,
+      fontWeight: theme.fontWeight.semibold,
       color: theme.color.text2
     },
     monthBar: {
@@ -1018,6 +1149,10 @@ var sheet = createStyleSheet((theme) => {
     off: { opacity: theme.state.disabledOpacity },
     pressed: { opacity: theme.state.pressedOpacity },
     zone: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+    zoneRow: { gap: theme.space.s1 },
+    zoneChips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s1 },
+    srOnly: { position: "absolute", width: theme.space[1], height: theme.space[1], opacity: 0 },
+    clipboard: { marginStart: "auto", flexDirection: "row" },
     zoneText: {
       fontFamily: theme.font.sans,
       fontSize: theme.type.caption2.fontSize,
@@ -1060,7 +1195,10 @@ function TimeRangeControl({
   open: openProp,
   defaultOpen = false,
   onOpenChange,
-  timeZone = "default",
+  timezone: timezoneProp,
+  defaultTimezone = "default",
+  onTimezoneChange,
+  timezones,
   options = TIME_RANGE_OPTIONS,
   weekStartsOn = 1,
   locale,
@@ -1080,9 +1218,21 @@ function TimeRangeControl({
   onRefreshIntervalChange,
   refreshIntervals = REFRESH_INTERVALS,
   minRefreshInterval,
+  onNotify,
+  asSheet = true,
   label: labelProp,
+  size = "sm",
   disabled = false,
+  density = "comfortable",
+  orientation = "horizontal",
+  variant = "outline",
+  placeholder,
+  error,
   style,
+  quickRanges,
+  quickRangesCustom = false,
+  stepStyle = "double",
+  ruler = false,
   labels: labelsProp,
   ...panelOptions
 }) {
@@ -1112,7 +1262,14 @@ function TimeRangeControl({
     loading || disabled,
     () => onRefresh?.()
   );
-  const Z = React.useMemo(() => dateZone(timeZone), [timeZone]);
+  const [internalZone, setInternalZone] = React.useState(defaultTimezone);
+  const timezone = timezoneProp ?? internalZone;
+  const changeZone = (zone) => {
+    if (timezoneProp === void 0) setInternalZone(zone);
+    onTimezoneChange?.(zone);
+  };
+  const zoneEditable = timezoneProp === void 0 || onTimezoneChange != null;
+  const Z = React.useMemo(() => dateZone(timezone), [timezone]);
   const readCtx = () => ({
     Z,
     now: now?.() ?? Date.now(),
@@ -1165,120 +1322,221 @@ function TimeRangeControl({
     if (next) commit(next, "zoom");
   };
   const atNow = value ? timeRangeReachesNow(value, ctx) : true;
-  const text = value ? timeRangeLabel(value, ctx) : labels.anyTime;
+  const text = value ? timeRangeLabel(value, ctx) : placeholder ?? labels.anyTime;
+  const compact = density === "compact";
+  const vertical = orientation === "vertical";
+  const invalid = error != null && error !== false;
   const canZoom = value != null && zoomTimeRange(value, 2, ctx) != null;
   const cancelling = loading && onCancelRefresh != null;
-  const iconButton = (name, a11y, off, onPress) => /* @__PURE__ */ jsx(
-    Pressable,
+  const drawn = theme.ctl[size];
+  const slopY = Math.max(0, (theme.hit[size] - drawn) / 2);
+  const hitSlop = { top: slopY, bottom: slopY };
+  const single = stepStyle === "single";
+  const rulerTicks = React.useMemo(() => {
+    if (!ruler || !value) return [];
+    const r = resolveDateValue(value, ctx);
+    if (r.from == null || r.to == null) return [];
+    const span = r.to - r.from;
+    const hours = span <= 2 * 864e5;
+    return [0, 1, 2].map((i) => {
+      const w = Z.wall(r.from + span * i / 2);
+      const two = (n) => String(n).padStart(2, "0");
+      return hours ? `${two(w.h)}:${two(w.mi)}` : `${two(w.d)}/${two(w.mo + 1)}`;
+    });
+  }, [ruler, value, Z, ctx.now]);
+  const iconButton = (name, a11y, off, onPress) => (
+    // Step and zoom join the trigger's tier as outline icon buttons (F48).
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant,
+        size,
+        leadingIcon: name,
+        accessibilityLabel: a11y,
+        disabled: off,
+        onPress
+      }
+    )
+  );
+  const body = /* @__PURE__ */ jsx(
+    TimeRangeSheetBody,
     {
-      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 })
-    }
+      ...panelOptions,
+      ctx,
+      value,
+      options,
+      recent,
+      labels,
+      dateLabels,
+      timezone,
+      onTimezoneChange: zoneEditable ? changeZone : void 0,
+      timezones,
+      onNotify,
+      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(
+                Chip,
+                {
+                  variant: "filter",
+                  size: "sm",
+                  selected: on,
+                  onSelectedChange: () => pickInterval(i),
+                  accessibilityLabel: i === "off" ? labels.off : i,
+                  children: i === "off" ? labels.off : i
+                },
+                i
+              );
+            })
+          }
+        )
+      ] }) : null
+    },
+    session
   );
-  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
-    shift ? iconButton("chevrons-left", labels.moveBack, disabled || !value, () => step(-1)) : null,
-    /* @__PURE__ */ jsxs(
-      Pressable,
+  return /* @__PURE__ */ jsxs(View, { children: [
+    quickRanges && (quickRanges.length > 0 || quickRangesCustom) ? /* @__PURE__ */ jsxs(
+      ScrollView,
       {
-        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],
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: styles.chips,
+        style: styles.quick,
         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 })
+          quickRanges.map((q) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              variant: "filter",
+              size: "sm",
+              disabled,
+              selected: value != null && sameDateValue(value, q.value),
+              onSelectedChange: () => commit(q.value, "panel"),
+              children: q.label
+            },
+            q.label
+          )),
+          quickRangesCustom ? /* @__PURE__ */ jsx(
+            Chip,
+            {
+              variant: "filter",
+              size: "sm",
+              leadingIcon: "calendar",
+              disabled,
+              selected: false,
+              onSelectedChange: () => setOpen(true),
+              children: labels.customChip
+            }
+          ) : null
         ]
       }
-    ),
-    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,
+    /* @__PURE__ */ jsxs(
+      View,
       {
-        ...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,
+        style: [
+          styles.root,
+          compact ? styles.rootCompact : null,
+          vertical ? styles.rootVertical : null,
+          style
+        ],
+        children: [
+          shift ? iconButton(
+            single ? "chevron-left" : "chevrons-left",
+            labels.moveBack,
+            disabled || !value,
+            () => step(-1)
+          ) : null,
+          /* @__PURE__ */ jsxs(
+            Pressable,
             {
-              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
-                );
-              })
+              accessibilityRole: "button",
+              accessibilityLabel: labels.triggerLabel(label, text),
+              accessibilityHint: value ? timeRangeReceipt(value, ctx) : void 0,
+              accessibilityState: { disabled, expanded: open },
+              "aria-invalid": invalid || void 0,
+              disabled,
+              onPress: () => setOpen(!open),
+              hitSlop,
+              style: ({ pressed }) => [
+                styles.trigger,
+                compact ? styles.triggerCompact : null,
+                variant === "ghost" ? styles.triggerGhost : null,
+                invalid ? { borderColor: theme.color.danger } : null,
+                { height: drawn },
+                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: [theme.ctl.label[size], styles.triggerText], children: text }),
+                /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+              ]
             }
-          )
-        ] }) : null
-      },
-      session
-    ) })
+          ),
+          shift ? iconButton(
+            single ? "chevron-right" : "chevrons-right",
+            labels.moveForward,
+            disabled || atNow,
+            () => step(1)
+          ) : null,
+          zoom ? iconButton("zoom-out", labels.zoomOut, disabled || !canZoom, zoomOut) : null,
+          onRefresh ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant,
+              size,
+              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,
+          asSheet ? /* @__PURE__ */ jsx(
+            Sheet,
+            {
+              open,
+              onClose: () => setOpen(false),
+              title: label,
+              detents: ["half", "full"],
+              children: body
+            }
+          ) : null
+        ]
+      }
+    ),
+    typeof error === "string" && error ? /* @__PURE__ */ jsx(Text, { style: styles.errorText, role: "alert", children: error }) : null,
+    rulerTicks.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles.ruler, accessibilityElementsHidden: true, importantForAccessibility: "no", children: rulerTicks.map((t, i) => /* @__PURE__ */ jsx(Text, { style: styles.rulerTick, children: t }, i)) }) : null,
+    !asSheet && open ? /* @__PURE__ */ jsx(View, { style: styles.card, children: body }) : null
   ] });
 }
 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
+  rootCompact: { gap: theme.space[2] },
+  rootVertical: { flexDirection: "column", alignItems: "stretch" },
+  triggerCompact: { paddingHorizontal: theme.space.s2, gap: theme.space.s1 },
+  triggerGhost: { borderColor: "transparent", backgroundColor: "transparent" },
+  errorText: {
+    marginTop: theme.space.s1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
   },
   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,
@@ -1288,10 +1546,18 @@ var sheet2 = createStyleSheet((theme) => ({
   triggerText: {
     flexShrink: 1,
     fontFamily: theme.font.sans,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
+    // The value reads at the tier's label size (R12) but stays regular weight.
+    fontWeight: theme.fontWeight.regular,
     color: theme.color.text
   },
+  card: {
+    marginTop: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
   off: { opacity: theme.state.disabledOpacity },
   pressed: { opacity: theme.state.pressedOpacity },
   group: { gap: theme.space.s1 },
@@ -1303,23 +1569,19 @@ var sheet2 = createStyleSheet((theme) => ({
     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
+  ruler: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: theme.space.s2,
+    paddingHorizontal: theme.space.s1
   },
-  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
+  rulerTick: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text3
   },
-  chipTextOn: { color: theme.color.accentOnSoft, fontWeight: theme.fontWeight.bold }
+  quick: { marginBottom: theme.space.s2 }
 }));
 
 export { REFRESH_INTERVALS, TIME_RANGE_PERIODS, TIME_RANGE_UNITS, TIME_RANGE_VIEWS, TimeRangeControl, refreshIntervalMs };