@lockin90/ui-native 0.0.0-stage → 1.0.0

package/src/components/RangeBar.tsx

@@ -0,0 +1,206 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  type ViewProps,
+  type DimensionValue,
+} from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+
+/**
+ * Marker tone — colors the value marker dot.
+ * 'auto' = colored by which zone the value lands in (low→warn, optimal→ok, high→bad).
+ */
+export type RangeBarMarkerTone = 'auto' | 'ok' | 'warn' | 'bad';
+
+export interface RangeBarProps extends ViewProps {
+  /** the current value, in [min, max] */
+  value: number;
+  /** range floor (default 0) */
+  min?: number;
+  /** range ceiling (default 100) */
+  max?: number;
+  /** lower optimal boundary — [min, low] is the low (amber) zone */
+  low: number;
+  /** upper optimal boundary — [high, max] is the high (red) zone */
+  high: number;
+  /** mono uppercase caption shown above the track */
+  label?: string;
+  /** suffix after the value readout (e.g. 'mg/dL', 'ng/dL') */
+  unit?: string;
+  /** show the numeric value (+ unit) on the label row */
+  showValue?: boolean;
+  /** marker color — 'auto' picks by zone (default), or force ok/warn/bad */
+  markerTone?: RangeBarMarkerTone;
+}
+
+/** Clamp x into [lo, hi]. */
+const clamp = (x: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, x));
+
+/** Marker tone → its color. */
+const MARKER_COLOR: Record<Exclude<RangeBarMarkerTone, 'auto'>, string> = {
+  ok: colors.zoneHigh,
+  warn: colors.zoneMid,
+  bad: colors.zoneLow,
+};
+
+// zone fills (mirror the web track's tinted gradient stops)
+const LOW_FILL = 'rgba(255,77,109,0.30)';
+const HIGH_FILL = 'rgba(255,77,109,0.30)';
+
+/**
+ * RangeBar — a reference-range bar for biomarkers / labs.
+ *
+ * A horizontal track split into low / optimal / high colored zones, with a
+ * marker dot showing where the current value falls (e.g. fasting glucose vs its
+ * healthy range). The three zones are [min,low] low (amber/red-tinted),
+ * [low,high] optimal (green band), [high,max] high (red-tinted); the marker
+ * auto-colors by the zone it lands in unless `markerTone` forces it. Mirrors the
+ * web RangeBar (same export + prop API).
+ */
+export function RangeBar({
+  value,
+  min = 0,
+  max = 100,
+  low,
+  high,
+  label,
+  unit,
+  showValue = false,
+  markerTone = 'auto',
+  style,
+  ...rest
+}: RangeBarProps) {
+  const span = max - min || 1;
+  const lowFrac = clamp((low - min) / span, 0, 1);
+  const highFrac = clamp((high - min) / span, 0, 1);
+  const posFrac = clamp((value - min) / span, 0, 1);
+
+  // auto tone reflects which zone the value lands in
+  const autoTone: Exclude<RangeBarMarkerTone, 'auto'> =
+    value < low ? 'warn' : value > high ? 'bad' : 'ok';
+  const tone = markerTone === 'auto' ? autoTone : markerTone;
+  const markerColor = MARKER_COLOR[tone];
+
+  const hasHeader = label != null || showValue;
+
+  const lowW = `${lowFrac * 100}%` as DimensionValue;
+  const optW = `${Math.max(0, highFrac - lowFrac) * 100}%` as DimensionValue;
+  const highW = `${Math.max(0, 1 - highFrac) * 100}%` as DimensionValue;
+  const bandLeft = `${lowFrac * 100}%` as DimensionValue;
+  const markerLeft = `${posFrac * 100}%` as DimensionValue;
+
+  const valueColor =
+    tone === 'warn' ? colors.zoneMid : tone === 'bad' ? colors.zoneLow : colors.textDim;
+
+  return (
+    <View style={[styles.root, style]} {...rest}>
+      {hasHeader && (
+        <View style={styles.head}>
+          {label != null && <Text style={styles.label}>{label}</Text>}
+          {showValue && (
+            <Text style={[styles.value, { color: valueColor }]}>
+              {value}
+              {unit != null && <Text style={styles.unit}>{unit}</Text>}
+            </Text>
+          )}
+        </View>
+      )}
+
+      <View style={styles.track}>
+        {/* 3 tinted zone segments sized by their fractions */}
+        <View style={[styles.zone, { width: lowW, backgroundColor: LOW_FILL }]} />
+        <View style={[styles.zone, { width: optW, backgroundColor: 'rgba(52,245,197,0.28)' }]} />
+        <View style={[styles.zone, { width: highW, backgroundColor: HIGH_FILL }]} />
+
+        {/* the in-range (green) optimal band, drawn over the optimal segment */}
+        <View
+          style={[styles.band, { left: bandLeft, width: optW }]}
+          pointerEvents="none"
+        />
+
+        {/* the value marker dot, tone-colored, at the value's fraction */}
+        <View
+          style={[
+            styles.marker,
+            {
+              left: markerLeft,
+              backgroundColor: markerColor,
+              shadowColor: markerColor,
+            },
+          ]}
+          pointerEvents="none"
+        />
+      </View>
+    </View>
+  );
+}
+
+const TRACK_H = 10;
+const MARKER = 14;
+
+const styles = StyleSheet.create({
+  root: { width: '100%', gap: 8 },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    fontWeight: '500',
+    textTransform: 'uppercase',
+    letterSpacing: 1.68,
+    color: colors.textFaint,
+  },
+  value: {
+    fontFamily: fonts.mono,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.textDim,
+  },
+  unit: { color: colors.textFaint },
+
+  /* the 3-zone track */
+  track: {
+    position: 'relative',
+    flexDirection: 'row',
+    height: TRACK_H,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: colors.border,
+    overflow: 'visible',
+  },
+  zone: {
+    height: '100%',
+  },
+
+  /* the in-range green optimal band */
+  band: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    borderRadius: 999,
+    backgroundColor: 'rgba(52,245,197,0.45)',
+  },
+
+  /* the value marker dot */
+  marker: {
+    position: 'absolute',
+    top: '50%',
+    width: MARKER,
+    height: MARKER,
+    borderRadius: MARKER / 2,
+    marginLeft: -MARKER / 2,
+    marginTop: -MARKER / 2,
+    borderWidth: 2.5,
+    borderColor: colors.bg0,
+    shadowOpacity: 0.9,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 0 },
+    elevation: 4,
+    zIndex: 3,
+  },
+});

package/src/components/ReauthDialog.tsx

@@ -0,0 +1,282 @@
+import { useEffect, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Modal } from './Modal';
+import { Input } from './Input';
+import { Button } from './Button';
+import { Alert } from './Alert';
+
+export interface ReauthDialogProps {
+  /** Show the dialog. When false, nothing renders. */
+  open: boolean;
+  /** Called on scrim tap, Android back, close-button, or Cancel. */
+  onClose: () => void;
+  /** Password re-auth path — receives the field value on Confirm. */
+  onSubmitPassword?: (password: string) => void;
+  /** Google re-auth path — invoked by the "Continue with Google" button. */
+  onGoogle?: () => void;
+  /** Apple re-auth path — invoked by the "Continue with Apple" button. */
+  onApple?: () => void;
+  /** Header title. */
+  title?: string;
+  /** Short reassurance line under the title. */
+  description?: string;
+  /** Show the password field + Confirm button (default true). */
+  hasPassword?: boolean;
+  /** Show the "Continue with Google" button (default false). */
+  hasGoogle?: boolean;
+  /** Show the "Continue with Apple" button (default false). */
+  hasApple?: boolean;
+  /** Disable inputs + show loading on submit. */
+  loading?: boolean;
+  /** Error message rendered in a danger Alert above the fields. */
+  error?: string;
+  /** Localizable labels — English defaults; pass translated strings to localize. */
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
+  confirmLabel?: string;
+  confirmingLabel?: string;
+  cancelLabel?: string;
+  googleLabel?: string;
+  appleLabel?: string;
+  orLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Google "G" mark — matches the auth design's SSO glyph. */
+function GoogleMark() {
+  return (
+    <Svg width={18} height={18} viewBox="0 0 24 24">
+      <Path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <Path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.98.66-2.23 1.06-3.72 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"
+      />
+      <Path
+        fill="#FBBC05"
+        d="M5.84 14.11a6.6 6.6 0 0 1 0-4.22V7.05H2.18a11 11 0 0 0 0 9.9l3.66-2.84z"
+      />
+      <Path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.05l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
+      />
+    </Svg>
+  );
+}
+
+/** Apple mark — the SSO glyph, tinted to the current text color. */
+function AppleMark() {
+  return (
+    <Svg width={17} height={17} viewBox="0 0 24 24">
+      <Path
+        fill={colors.text}
+        d="M16.37 12.7c.03 3.02 2.65 4.02 2.68 4.03-.02.07-.42 1.44-1.38 2.85-.83 1.22-1.7 2.44-3.06 2.46-1.34.03-1.77-.79-3.3-.79-1.53 0-2.01.77-3.28.82-1.32.05-2.32-1.32-3.16-2.54-1.72-2.5-3.03-7.05-1.27-10.12.87-1.53 2.44-2.5 4.14-2.52 1.3-.03 2.52.87 3.31.87.79 0 2.28-1.08 3.84-.92.65.03 2.49.26 3.67 1.99-.1.06-2.19 1.28-2.17 3.51M14.06 4.5c.7-.85 1.17-2.03 1.04-3.2-1 .04-2.22.67-2.94 1.51-.64.75-1.2 1.95-1.05 3.1 1.12.09 2.25-.57 2.95-1.41"
+      />
+    </Svg>
+  );
+}
+
+/**
+ * Step-up re-authentication dialog — "confirm it's you" before a sensitive
+ * action. A centered Modal with an optional password path + optional Google /
+ * Apple SSO paths; local password state is kept internal and cleared on close.
+ */
+export function ReauthDialog({
+  open,
+  onClose,
+  onSubmitPassword,
+  onGoogle,
+  onApple,
+  title = "Confirm it's you",
+  description = 'For your security, re-enter your password to continue.',
+  hasPassword = true,
+  hasGoogle = false,
+  hasApple = false,
+  loading = false,
+  error,
+  passwordLabel = 'Password',
+  passwordPlaceholder = 'Your password',
+  confirmLabel = 'Confirm',
+  confirmingLabel = 'Confirming…',
+  cancelLabel = 'Cancel',
+  googleLabel = 'Continue with Google',
+  appleLabel = 'Continue with Apple',
+  orLabel = 'or',
+  style,
+}: ReauthDialogProps) {
+  const [password, setPassword] = useState('');
+
+  // Drop the field whenever the dialog closes so it never leaks across opens.
+  useEffect(() => {
+    if (!open) setPassword('');
+  }, [open]);
+
+  const close = () => {
+    setPassword('');
+    onClose();
+  };
+
+  const submit = () => {
+    if (loading || !password) return;
+    onSubmitPassword?.(password);
+  };
+
+  return (
+    <Modal open={open} onClose={close} title={title} size="sm">
+      <View style={[styles.body, style]}>
+        {description ? <Text style={styles.desc}>{description}</Text> : null}
+
+        {error ? (
+          <Alert tone="danger" style={styles.error}>
+            {error}
+          </Alert>
+        ) : null}
+
+        {hasPassword ? (
+          <View style={styles.pw}>
+            <Input
+              label={passwordLabel}
+              secureTextEntry
+              autoComplete="current-password"
+              textContentType="password"
+              placeholder={passwordPlaceholder}
+              value={password}
+              editable={!loading}
+              invalid={Boolean(error)}
+              onChangeText={setPassword}
+              onSubmitEditing={submit}
+            />
+            <Button
+              variant="primary"
+              title={loading ? confirmingLabel : confirmLabel}
+              style={styles.submit}
+              disabled={loading || !password}
+              onPress={submit}
+            />
+          </View>
+        ) : null}
+
+        {hasPassword && (hasGoogle || hasApple) ? (
+          <View style={styles.or}>
+            <View style={styles.ln} />
+            <Text style={styles.orText}>{orLabel}</Text>
+            <View style={styles.ln} />
+          </View>
+        ) : null}
+
+        {hasGoogle ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Continue with Google"
+            disabled={loading}
+            onPress={() => onGoogle?.()}
+          >
+            {({ pressed }) => (
+              <View style={[styles.google, pressed && styles.pressed, loading && styles.disabled]}>
+                <GoogleMark />
+                <Text style={styles.googleLabel}>{googleLabel}</Text>
+              </View>
+            )}
+          </Pressable>
+        ) : null}
+
+        {hasApple ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Continue with Apple"
+            disabled={loading}
+            onPress={() => onApple?.()}
+          >
+            {({ pressed }) => (
+              <View style={[styles.apple, pressed && styles.pressed, loading && styles.disabled]}>
+                <AppleMark />
+                <Text style={styles.appleLabel}>{appleLabel}</Text>
+              </View>
+            )}
+          </Pressable>
+        ) : null}
+
+        <Button
+          variant="ghost"
+          title={cancelLabel}
+          style={styles.submit}
+          disabled={loading}
+          onPress={close}
+        />
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: { gap: 16 },
+  desc: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 22,
+    color: colors.textDim,
+  },
+  error: {},
+  // match web: input→Confirm gap == the body's 16px column gap (== Confirm→Cancel)
+  pw: { gap: 16 },
+  submit: { width: '100%' },
+  or: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  ln: { flex: 1, height: 1, backgroundColor: colors.border },
+  orText: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    letterSpacing: 0.9,
+    textTransform: 'uppercase',
+    color: colors.textFaint,
+  },
+  // Mirrors Button's `default` variant (glass2 bg + border2 pill) so the
+  // Google glyph + label sit in the same chrome as the web Button.
+  google: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 9,
+    width: '100%',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: radii.pill,
+    backgroundColor: colors.glass2,
+    borderWidth: 1,
+    borderColor: colors.border2,
+  },
+  googleLabel: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text,
+  },
+  apple: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 9,
+    width: '100%',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: radii.pill,
+    backgroundColor: colors.glass2,
+    borderWidth: 1,
+    borderColor: colors.border2,
+  },
+  appleLabel: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text,
+  },
+  pressed: { opacity: 0.85, transform: [{ scale: 0.98 }] },
+  disabled: { opacity: 0.5 },
+});

package/src/components/RestTimer.tsx

@@ -0,0 +1,193 @@
+import { useId, type ReactNode } from 'react';
+import { View, Text, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Defs, FeGaussianBlur, Filter, G } from 'react-native-svg';
+import { colors, fonts } from '@lockin90/tokens';
+import { Button } from './Button';
+
+export interface RestTimerProps {
+  /** Seconds left (drives the arc + the centered readout). */
+  remainingSec: number;
+  /** Full rest duration in seconds (the 100% arc). */
+  totalSec: number;
+  /** Small mono caption inside the ring, above the time (default `'Rest'`). */
+  label?: string;
+  /** Dim line next to the ring (e.g. `'Next: Bench Press · set 3 of 5'`). */
+  sublabel?: string;
+  /** Trailing slot on the far right (e.g. a live HR readout). */
+  trailing?: ReactNode;
+  /** When given, renders the ghost `Skip` button. */
+  onSkip?: () => void;
+  /** Dims the arc + readout while the countdown is held. */
+  paused?: boolean;
+  /**
+   * Compact bar layout — the design's Active rest bar (`.rb`/`.rg`): a 42px
+   * ring (r 18, stroke 4) with ONLY the mint time inside; `label` moves OUT
+   * of the ring into a text column above `sublabel` (mono caption over bold
+   * display line, e.g. "Rest" / "Next 1:05"); Skip + `trailing` sit inline on
+   * the right. No card chrome — the consumer wraps it in a Card. Default
+   * `false` keeps the 116px hero ring.
+   */
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/* ring geometry — 116px viewBox, r 50 (matches the web twin exactly) */
+const SIZE = 116;
+const R = 50;
+const C = 2 * Math.PI * R;
+/* compact ring geometry — the design's Active rest bar `.rg` (42px, r 18) */
+const SIZE_COMPACT = 42;
+const R_COMPACT = 18;
+
+/** `95 → '1:35'` — minutes:seconds, mono-friendly. */
+export function formatRestTime(sec: number): string {
+  const s = Math.max(0, Math.round(sec));
+  const m = Math.floor(s / 60);
+  const r = s % 60;
+  return `${m}:${String(r).padStart(2, '0')}`;
+}
+
+/** Remaining fraction, clamped 0–1. */
+export function restFraction(remainingSec: number, totalSec: number): number {
+  if (!(totalSec > 0)) return 0;
+  return Math.max(0, Math.min(1, remainingSec / totalSec));
+}
+
+/**
+ * RestTimer — the between-sets countdown: a mint arc draining on a faint
+ * track with the remaining time centered in mono, plus an optional sublabel,
+ * a ghost Skip transport, and a `trailing` slot. `compact` swaps the 116px
+ * hero ring for the design's Active rest bar (`.rb`/`.rg`): a 42px ring
+ * holding only the mint time, label + sublabel stacked beside it. Native twin
+ * of the web `RestTimer` (same prop API + geometry). Purely prop-driven — the
+ * caller ticks `remainingSec`; the arc re-renders per tick (the web's
+ * dashoffset transition has no native precedent — same rule as Ring's static
+ * pulse). The mint glow is a real Gaussian-blurred duplicate arc.
+ */
+export function RestTimer({
+  remainingSec,
+  totalSec,
+  label = 'Rest',
+  sublabel,
+  trailing,
+  onSkip,
+  paused = false,
+  compact = false,
+  style,
+}: RestTimerProps) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const blurId = `lk-resttimer-blur-${uid}`;
+  const frac = restFraction(remainingSec, totalSec);
+  const time = formatRestTime(remainingSec);
+  /* same dasharray math on both scales — only the geometry changes */
+  const size = compact ? SIZE_COMPACT : SIZE;
+  const r = compact ? R_COMPACT : R;
+  const strokeWidth = compact ? 4 : 8;
+  const c = compact ? 2 * Math.PI * R_COMPACT : C;
+  const offset = c * (1 - frac);
+  const hasSide = sublabel != null || onSkip != null;
+  const half = size / 2;
+  const skip = onSkip ? <Button variant="ghost" size="sm" title="Skip" onPress={onSkip} /> : null;
+
+  const arcProps = {
+    cx: half,
+    cy: half,
+    r,
+    strokeWidth,
+    stroke: colors.mint,
+    fill: 'none' as const,
+    strokeLinecap: 'round' as const,
+    strokeDasharray: `${c.toFixed(2)}`,
+    strokeDashoffset: offset,
+  };
+
+  return (
+    <View
+      accessibilityLabel={`${label}: ${time} remaining${paused ? ', paused' : ''}`}
+      style={[styles.row, compact && styles.rowCompact, style]}
+    >
+      <View style={compact ? styles.ringCompact : styles.ring}>
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          {!paused ? (
+            <Defs>
+              <Filter id={blurId} filterUnits="userSpaceOnUse" x={-12} y={-12} width={size + 24} height={size + 24}>
+                <FeGaussianBlur stdDeviation={3} />
+              </Filter>
+            </Defs>
+          ) : null}
+          <Circle cx={half} cy={half} r={r} strokeWidth={strokeWidth} stroke="rgba(255,255,255,0.07)" fill="none" />
+          <G rotation={-90} originX={half} originY={half} opacity={paused ? 0.4 : 1}>
+            {/* glow — a Gaussian-blurred duplicate arc (the web drop-shadow) */}
+            {!paused ? <Circle {...arcProps} opacity={0.45} filter={`url(#${blurId})`} /> : null}
+            <Circle {...arcProps} />
+          </G>
+        </Svg>
+        <View style={styles.center} pointerEvents="none">
+          {/* compact: ONLY the mint time inside the ring (design `.rg .num`) */}
+          {!compact && <Text style={styles.label}>{label.toUpperCase()}</Text>}
+          <Text
+            style={[compact ? styles.timeCompact : styles.time, paused && styles.timePaused]}
+          >
+            {time}
+          </Text>
+        </View>
+      </View>
+      {compact ? (
+        <>
+          {/* compact: the label moves OUT of the ring into the text column
+              (design `.rb .rl` over `.rb .rt`) */}
+          <View style={styles.mainCompact}>
+            <Text style={styles.labelCompact}>{label.toUpperCase()}</Text>
+            {sublabel != null && <Text style={styles.subCompact}>{sublabel}</Text>}
+          </View>
+          {skip}
+        </>
+      ) : hasSide ? (
+        <View style={styles.main}>
+          {sublabel != null && <Text style={styles.sub}>{sublabel}</Text>}
+          {skip}
+        </View>
+      ) : null}
+      {trailing != null && <View style={styles.trailing}>{trailing}</View>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 16 },
+  rowCompact: { gap: 10 },
+  ring: { width: SIZE, height: SIZE },
+  ringCompact: { width: SIZE_COMPACT, height: SIZE_COMPACT },
+  center: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+  },
+  label: { fontFamily: fonts.mono, fontSize: 9, letterSpacing: 1.3, color: colors.textFaint },
+  time: {
+    fontFamily: fonts.mono,
+    fontSize: 22,
+    fontWeight: '700',
+    fontVariant: ['tabular-nums'],
+    color: colors.text,
+    lineHeight: 24,
+  },
+  // compact centered readout — MINT mono 11 bold (design `.rg .num`)
+  timeCompact: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    fontWeight: '700',
+    fontVariant: ['tabular-nums'],
+    color: colors.mint,
+    lineHeight: 13,
+  },
+  timePaused: { color: colors.textDim },
+  main: { flex: 1, alignItems: 'flex-start', gap: 9, minWidth: 0 },
+  sub: { fontSize: 12.5, color: colors.textDim },
+  // compact text column — mono caption over bold display line (design `.rl`/`.rt`)
+  mainCompact: { flex: 1, alignItems: 'flex-start', gap: 1, minWidth: 0 },
+  labelCompact: { fontFamily: fonts.mono, fontSize: 7, letterSpacing: 1, color: colors.textFaint },
+  subCompact: { fontFamily: fonts.display, fontSize: 12, fontWeight: '700', color: colors.text },
+  trailing: { marginLeft: 'auto' },
+});