@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/SetTable.tsx

@@ -0,0 +1,341 @@
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Svg, { Path } from 'react-native-svg';
+import { colors, fonts, gradients, radii } from '@lockin90/tokens';
+import { hapticSelection } from '../internal/optionalHaptics';
+import { PrBadge } from './PrBadge';
+
+/** Set kind — drives the SET-column label + color. */
+export type SetType = 'warmup' | 'working' | 'drop' | 'failure';
+
+/** Reference-column tint: mint for coach targets, violet accent for AI. */
+export type SetReferenceTone = 'coach' | 'ai' | 'none';
+
+export interface WorkoutSet {
+  id: string;
+  setType: SetType;
+  /** SET-column label override. Default: `W` warmup · working sets numbered `1,2,…` · `D` drop · `F` failure. */
+  label?: string;
+  weight?: number;
+  reps?: number;
+  unit?: 'kg' | 'lb';
+  /** Reference readout (e.g. the coach/AI recommendation `80×5`). */
+  reference?: string;
+  /** Reference tint — `coach` mint · `ai` violet accent · `none` faint (default). */
+  referenceTone?: SetReferenceTone;
+  done?: boolean;
+  /** Personal record — stamps a red `PR` badge next to the value once `done`. */
+  isPr?: boolean;
+  /** The set being performed now — subtle cyan row tint. */
+  isCurrent?: boolean;
+}
+
+export type SetTableColumn = 'set' | 'value' | 'reference' | 'check';
+
+const ALL_COLUMNS: SetTableColumn[] = ['set', 'value', 'reference', 'check'];
+
+export interface SetTableProps {
+  /** The sets, in order. */
+  sets: WorkoutSet[];
+  /** Columns to render, in this order (default all 4). */
+  columns?: SetTableColumn[];
+  /** Values are tappable (tap → `onSetPress`); they stay plain text — only
+   *  the CURRENT set's value gets the cyan-accented box ("you are here"). */
+  editable?: boolean;
+  /** Row tapped (open the set editor). */
+  onSetPress?: (id: string) => void;
+  /** Done-check toggled. */
+  onTogglePress?: (id: string) => void;
+  /** When given, renders the trailing `+ Add set` row. */
+  onAddSet?: () => void;
+  /** Add-row label (default `'Add set'`). */
+  addLabel?: string;
+  /** Reference column header (default `'Coach rec'`). */
+  referenceHeader?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Default SET-column labels: warmup `W`, drop `D`, failure `F`, working sets numbered `1,2,…`. */
+export function setLabels(sets: readonly Pick<WorkoutSet, 'setType' | 'label'>[]): string[] {
+  let n = 0;
+  return sets.map((s) => {
+    if (s.setType === 'working') n += 1;
+    if (s.label != null) return s.label;
+    return s.setType === 'warmup' ? 'W' : s.setType === 'drop' ? 'D' : s.setType === 'failure' ? 'F' : String(n);
+  });
+}
+
+/* set-type colors — warmup amber · working cyan · drop violet · failure magenta */
+const TYPE_COLOR: Record<SetType, string> = {
+  warmup: colors.zoneMid,
+  working: colors.accent2,
+  drop: colors.violet,
+  failure: colors.magenta,
+};
+
+const REF_COLOR: Record<SetReferenceTone, string> = {
+  coach: colors.mint,
+  ai: colors.accent,
+  none: colors.textFaint,
+};
+
+/* row tints — current = cyan (accent-2 @ 7%), done = mint (matched web literals) */
+const CURRENT_TINT = 'rgba(34,211,238,0.07)';
+const DONE_TINT = 'rgba(52,245,197,0.05)';
+
+/** `80×5`, with an em dash for a missing half. */
+function formatValue(s: WorkoutSet): string {
+  const w = s.weight != null ? String(s.weight) : '—';
+  const r = s.reps != null ? String(s.reps) : '—';
+  return `${w}×${r}`;
+}
+
+/** Value-column header from the sets' unit (`KG × REPS` / `LB × REPS`). */
+function valueHeader(sets: readonly WorkoutSet[]): string {
+  const unit = sets.find((s) => s.unit)?.unit;
+  return unit ? `${unit.toUpperCase()} × REPS` : 'WEIGHT × REPS';
+}
+
+function CheckGlyph({ color }: { color: string }) {
+  return (
+    <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+      <Path d="M20 6 9 17l-5-5" stroke={color} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" />
+    </Svg>
+  );
+}
+
+/**
+ * SetTable — the per-set workout table, the training design's core primitive.
+ * Native twin of the web `SetTable` (same prop API): one row per set with the
+ * colored SET label (`W`/`1`/`2`/`D`/`F` — warmup amber, working cyan, drop
+ * violet, failure magenta), the centered mono `weight×reps` value, the
+ * right-aligned mono reference (coach mint / AI violet accent), and the done
+ * check (filled mint gradient once done). Current set = subtle cyan row
+ * tint; done = subtle mint tint; a PR'd done set floats a red `PrBadge`
+ * right of the value without shifting the centered number.
+ */
+export function SetTable({
+  sets,
+  columns = ALL_COLUMNS,
+  editable = false,
+  onSetPress,
+  onTogglePress,
+  onAddSet,
+  addLabel = 'Add set',
+  referenceHeader = 'Coach rec',
+  style,
+}: SetTableProps) {
+  const has = (c: SetTableColumn) => columns.includes(c);
+  const labels = setLabels(sets);
+
+  const headers: Record<SetTableColumn, string> = {
+    set: 'SET',
+    value: valueHeader(sets),
+    reference: referenceHeader.toUpperCase(),
+    check: '',
+  };
+
+  const headerStyle: Record<SetTableColumn, StyleProp<ViewStyle>> = {
+    set: styles.colSet,
+    value: styles.colValue,
+    reference: styles.colRef,
+    check: styles.colCheck,
+  };
+
+  return (
+    <View style={style}>
+      {/* header row */}
+      <View style={[styles.row, styles.headRow]}>
+        {columns.map((c) => (
+          <View key={c} style={headerStyle[c]}>
+            <Text
+              style={[
+                styles.headText,
+                c === 'set' || c === 'value' ? styles.center : null,
+                c === 'reference' ? styles.right : null,
+              ]}
+            >
+              {headers[c]}
+            </Text>
+          </View>
+        ))}
+      </View>
+
+      {sets.map((s, i) => {
+        const rowPress = onSetPress
+          ? () => {
+              hapticSelection();
+              onSetPress(s.id);
+            }
+          : undefined;
+        const rowTint = s.isCurrent ? CURRENT_TINT : s.done ? DONE_TINT : undefined;
+        const last = i === sets.length - 1 && !onAddSet;
+
+        const cells = (
+          <>
+            {has('set') && (
+              <View style={styles.colSet}>
+                <Text style={[styles.setLabel, { color: TYPE_COLOR[s.setType] }]}>{labels[i]}</Text>
+              </View>
+            )}
+            {has('value') && (
+              <View style={styles.colValue}>
+                {/* three glance-distinct states: pending = plain mono text,
+                    current = the ONE cyan-boxed emphasized value, done =
+                    dimmed plain text on the mint row wash. The PR badge sits
+                    in a content-hugging row NEXT TO the value (not pinned to
+                    the column's own right edge) so it hugs the number at any
+                    column width. */}
+                <View style={styles.valGroup}>
+                  <View style={editable && s.isCurrent ? styles.valBox : null}>
+                    <Text style={[styles.valText, s.done ? styles.valDone : null]}>{formatValue(s)}</Text>
+                  </View>
+                  {s.isPr && s.done ? <PrBadge size="sm" style={styles.pr} /> : null}
+                </View>
+              </View>
+            )}
+            {has('reference') && (
+              <View style={styles.colRef}>
+                <Text style={[styles.refText, { color: REF_COLOR[s.referenceTone ?? 'none'] }]} numberOfLines={1}>
+                  {s.reference ?? '—'}
+                </Text>
+              </View>
+            )}
+            {has('check') && (
+              <View style={styles.colCheck}>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityState={{ selected: !!s.done }}
+                  accessibilityLabel={`Set ${labels[i]} done`}
+                  hitSlop={6}
+                  onPress={
+                    onTogglePress
+                      ? () => {
+                          hapticSelection();
+                          onTogglePress(s.id);
+                        }
+                      : undefined
+                  }
+                >
+                  {s.done ? (
+                    <LinearGradient
+                      colors={gradients.mint.stops as unknown as [string, string]}
+                      start={{ x: 0, y: 0 }}
+                      end={{ x: 1, y: 1 }}
+                      style={[styles.check, styles.checkDone]}
+                    >
+                      <CheckGlyph color="#07080D" />
+                    </LinearGradient>
+                  ) : (
+                    <View style={styles.check}>
+                      <CheckGlyph color={colors.textFaint} />
+                    </View>
+                  )}
+                </Pressable>
+              </View>
+            )}
+          </>
+        );
+
+        const rowStyle = [
+          styles.row,
+          !last && styles.rowDivider,
+          rowTint ? { backgroundColor: rowTint } : null,
+        ];
+
+        return rowPress ? (
+          <Pressable key={s.id} accessibilityRole="button" onPress={rowPress} style={rowStyle}>
+            {cells}
+          </Pressable>
+        ) : (
+          <View key={s.id} style={rowStyle}>
+            {cells}
+          </View>
+        );
+      })}
+
+      {onAddSet ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => {
+            hapticSelection();
+            onAddSet();
+          }}
+          style={({ pressed }) => [styles.addRow, pressed && styles.addPressed]}
+        >
+          <Text style={styles.addText}>+ {addLabel.toUpperCase()}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 9, paddingHorizontal: 2 },
+  headRow: { paddingVertical: 6, borderBottomWidth: 1, borderBottomColor: colors.border },
+  rowDivider: { borderBottomWidth: 1, borderBottomColor: colors.border },
+  headText: { fontFamily: fonts.mono, fontSize: 9.5, letterSpacing: 1.1, color: colors.textFaint },
+  center: { textAlign: 'center' },
+  right: { textAlign: 'right' },
+
+  colSet: { width: 44, alignItems: 'center' },
+  colValue: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  colRef: { flex: 1, alignItems: 'flex-end', paddingRight: 4 },
+  colCheck: { width: 44, alignItems: 'center' },
+
+  setLabel: { fontFamily: fonts.display, fontWeight: '700', fontSize: 14 },
+
+  valText: {
+    fontFamily: fonts.mono,
+    fontSize: 13.5,
+    fontWeight: '600',
+    fontVariant: ['tabular-nums'],
+    color: colors.text,
+  },
+  valDone: { color: colors.textDim },
+  // Content-hugging row: the value box + its PR badge size to their own
+  // content, not the flexed column — this is what makes the badge HUG the
+  // number instead of pinning to the column's right edge.
+  valGroup: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+  // The one accented box — editable CURRENT set only (mirrors the web valbox).
+  valBox: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: 'rgba(34,211,238,0.35)',
+    backgroundColor: 'rgba(34,211,238,0.05)',
+  },
+  pr: {},
+
+  refText: { fontFamily: fonts.mono, fontSize: 11, fontVariant: ['tabular-nums'] },
+
+  check: {
+    width: 32,
+    height: 32,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.glass,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  checkDone: {
+    borderWidth: 0,
+    shadowColor: colors.mint,
+    shadowOpacity: 0.35,
+    shadowRadius: 9,
+    shadowOffset: { width: 0, height: 0 },
+    transform: [{ scale: 1.04 }],
+  },
+
+  addRow: { paddingVertical: 11, alignItems: 'center', borderRadius: radii.sm },
+  addPressed: { backgroundColor: 'rgba(34,211,238,0.06)' },
+  addText: {
+    fontFamily: fonts.mono,
+    fontSize: 10.5,
+    fontWeight: '600',
+    letterSpacing: 1.3,
+    color: colors.accent2,
+  },
+});

package/src/components/ShareCard.tsx

@@ -0,0 +1,145 @@
+import { View, Text, StyleSheet, type ViewProps } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+import { BrandMark } from './BrandMark';
+import { GradientText } from './GradientText';
+import { Ring } from './Ring';
+import { Stat } from './Stat';
+
+export type ShareCardGradient = 'flux' | 'cta' | 'mint' | 'violet';
+export type ShareCardSize = 'sm' | 'md' | 'lg';
+
+export interface ShareCardStat {
+  label: string;
+  value: string;
+}
+
+export interface ShareCardProps extends ViewProps {
+  /** small mono eyebrow above the metric (e.g. a date range or "Avg energy"). */
+  title?: string;
+  /** the headline — a number or short string (shown big, or inside the `ring`). */
+  metric: string | number;
+  /** small mono caption under the metric (e.g. a zone, "out of 100"). */
+  metricLabel?: string;
+  /** render a `Ring` with `metric` as its centered readout instead of a big number.
+   *  `value` is mapped onto 0–100 against `max` (default 100). */
+  ring?: { value: number; max?: number };
+  /** up to 3 supporting stats (rendered with the `Stat` primitive). */
+  stats?: ShareCardStat[];
+  /** show the LockIn90 `BrandMark` lockup + watermark @default true */
+  brand?: boolean;
+  /** aurora wash + ring/headline gradient @default 'flux' */
+  gradient?: ShareCardGradient;
+  /** share aspect + scale @default 'md' (sm 1:1 · md 4:5 · lg 9:16) */
+  size?: ShareCardSize;
+}
+
+const SIZES: Record<
+  ShareCardSize,
+  { aspectRatio: number; pad: number; eyebrow: number; metric: number; score: number; label: number; brand: number; ring: number; thickness: number; wm: number }
+> = {
+  sm: { aspectRatio: 1, pad: 18, eyebrow: 9, metric: 44, score: 34, label: 9, brand: 18, ring: 96, thickness: 8, wm: 7 },
+  md: { aspectRatio: 4 / 5, pad: 22, eyebrow: 10, metric: 56, score: 42, label: 9.5, brand: 20, ring: 120, thickness: 9, wm: 7.5 },
+  lg: { aspectRatio: 9 / 16, pad: 26, eyebrow: 10, metric: 64, score: 48, label: 9.5, brand: 22, ring: 140, thickness: 10, wm: 8 },
+};
+
+/**
+ * ShareCard — the branded, shareable progress/score card users post to socials:
+ * a `BrandMark` lockup, a headline `metric` (a big `GradientText` number or a
+ * `Ring` readout), an optional caption, and up to three supporting `Stat`s, on
+ * an Aurora-gradient wash. The `gradient` token drives the wash + ring/text
+ * gradient; `size` picks the share aspect (1:1 / 4:5 / 9:16). Composed from
+ * BrandMark + GradientText + Ring + Stat. Mirrors the web `@lockin90/ui`
+ * ShareCard. This is the *only* sanctioned share card — never hand-roll one.
+ */
+export function ShareCard({
+  title,
+  metric,
+  metricLabel,
+  ring,
+  stats,
+  brand = true,
+  gradient = 'flux',
+  size = 'md',
+  style,
+  ...rest
+}: ShareCardProps) {
+  const S = SIZES[size];
+  const g = gradients[gradient];
+  const arc: [string, string] = [g.stops[0], g.stops[g.stops.length - 1]];
+  // GradientText only exposes flux/cta/violet — mint headlines fall back to flux
+  // (the wash + ring still carry the true mint tint).
+  const headlineGradient = gradient === 'cta' ? 'cta' : gradient === 'violet' ? 'violet' : 'flux';
+  const ringPct = ring ? Math.max(0, Math.min(100, (ring.value / (ring.max ?? 100)) * 100)) : 0;
+  const visibleStats = stats?.slice(0, 3) ?? [];
+
+  return (
+    <View style={[styles.card, { aspectRatio: S.aspectRatio, padding: S.pad }, style]} {...rest}>
+      <LinearGradient
+        colors={g.stops as unknown as readonly [string, string, ...string[]]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 1 }}
+        style={styles.wash}
+        pointerEvents="none"
+      />
+
+      <View style={styles.top}>{brand ? <BrandMark variant="lockup" size={S.brand} /> : null}</View>
+
+      <View style={styles.body}>
+        {title ? <Text style={[styles.eyebrow, { fontSize: S.eyebrow }]}>{title}</Text> : null}
+
+        {ring ? (
+          <Ring value={ringPct} size={S.ring} thickness={S.thickness} gradient={arc}>
+            <Text style={[styles.score, { fontSize: S.score }]}>{String(metric)}</Text>
+          </Ring>
+        ) : (
+          <GradientText gradient={headlineGradient} style={[styles.metric, { fontSize: S.metric }]}>
+            {String(metric)}
+          </GradientText>
+        )}
+
+        {metricLabel ? <Text style={[styles.metricLabel, { fontSize: S.label }]}>{metricLabel}</Text> : null}
+
+        {visibleStats.length > 0 ? (
+          <View style={styles.stats}>
+            {visibleStats.map((s, i) => (
+              <Stat key={`${s.label}-${i}`} label={s.label} value={s.value} style={styles.stat} />
+            ))}
+          </View>
+        ) : null}
+      </View>
+
+      {brand ? (
+        <View style={styles.foot}>
+          <Text style={[styles.wm, { fontSize: S.wm }]}>lockin90.com</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: '100%',
+    overflow: 'hidden',
+    justifyContent: 'space-between',
+    borderRadius: radii.lg,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.void,
+    ...nativeShadows.elev2,
+  },
+  // aurora wash — a subtle token-gradient over the void surface (kept low so the
+  // void dominates the center and light --text stays legible, ~matching the web mesh)
+  wash: { ...StyleSheet.absoluteFillObject, opacity: 0.32 },
+  top: { position: 'relative' },
+  body: { flex: 1, position: 'relative', alignItems: 'center', justifyContent: 'center', gap: 10 },
+  eyebrow: { fontFamily: fonts.mono, letterSpacing: 2, textTransform: 'uppercase', color: colors.textDim },
+  metric: { fontFamily: fonts.display, fontWeight: '700', letterSpacing: -1.6, color: colors.text },
+  score: { fontFamily: fonts.display, fontWeight: '700', letterSpacing: -1.4, color: colors.text, textAlign: 'center' },
+  metricLabel: { fontFamily: fonts.mono, letterSpacing: 1.6, textTransform: 'uppercase', color: colors.textDim },
+  stats: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 16, marginTop: 6 },
+  stat: { alignItems: 'center' },
+  foot: { position: 'relative', alignItems: 'center' },
+  wm: { fontFamily: fonts.mono, letterSpacing: 0.6, color: colors.textFaint },
+});

package/src/components/Sheet.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import {
+  Modal as RNModal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Animated,
+  KeyboardAvoidingView,
+  PanResponder,
+  Platform,
+} from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+export interface SheetProps {
+  /** Show the sheet. When false, nothing renders. */
+  open?: boolean;
+  /** Called on scrim tap or Android back. */
+  onClose?: () => void;
+  /** Edge the panel slides in from. Bottom = full-width bottom sheet with a
+   *  drag handle; right/left = full-height side drawer. */
+  side?: 'bottom' | 'right' | 'left';
+  /** Optional header title (font-display). */
+  title?: string;
+  /** Body content. */
+  children?: ReactNode;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+/** Fraction of the sheet height the user must drag past to dismiss. */
+const DISMISS_FRACTION = 0.25;
+/** Downward fling velocity (px/ms) that dismisses regardless of distance. */
+const DISMISS_VELOCITY = 0.5;
+
+/** Side drawer + bottom sheet over a dimmed scrim. The bottom variant is
+ *  anchored to the bottom edge with rounded top corners and a centered drag
+ *  handle; right/left variants are full-height ~360px edge panels. Closes on
+ *  scrim tap + Android back; the panel stops propagation. The bottom variant's
+ *  header strip (handle + title) is draggable: pull down past ~25% of the
+ *  sheet height (or fling) to dismiss, otherwise it springs back. */
+export function Sheet({ open = true, onClose, side = 'bottom', title, children }: SheetProps) {
+  const isBottom = side === 'bottom';
+  const align = isBottom ? styles.scrimBottom : side === 'right' ? styles.scrimRight : styles.scrimLeft;
+  const panel = isBottom ? styles.panelBottom : side === 'right' ? styles.panelRight : styles.panelLeft;
+
+  // ---- drag-to-dismiss (bottom sheet only) ----
+  const dragY = useRef(new Animated.Value(0)).current;
+  const sheetHeightRef = useRef(0);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useEffect(() => {
+    if (open) dragY.setValue(0);
+  }, [open, dragY]);
+
+  const springBack = useRef(() => {
+    Animated.spring(dragY, { toValue: 0, bounciness: 4, useNativeDriver: true }).start();
+  }).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dy) > 2,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderMove: (_e, g) => {
+        dragY.setValue(Math.max(0, g.dy));
+      },
+      onPanResponderRelease: (_e, g) => {
+        const height = sheetHeightRef.current || 320;
+        const shouldDismiss =
+          onCloseRef.current && (g.dy > height * DISMISS_FRACTION || (g.dy > 0 && g.vy > DISMISS_VELOCITY));
+        if (shouldDismiss) {
+          Animated.timing(dragY, { toValue: height, duration: 180, useNativeDriver: true }).start(
+            () => onCloseRef.current?.(),
+          );
+        } else {
+          springBack();
+        }
+      },
+      onPanResponderTerminate: () => springBack(),
+    }),
+  ).current;
+
+  return (
+    <RNModal transparent visible={open} animationType="slide" onRequestClose={onClose} statusBarTranslucent>
+      <Pressable style={styles.scrim} onPress={() => onClose?.()}>
+        {/* Keyboard avoidance (same pattern as the kit Select): the avoider
+            fills the scrim and pads itself by the iOS keyboard height, so an
+            input-bearing sheet rises above the keyboard instead of being
+            covered. `box-none` keeps scrim taps dismissing as before. */}
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          pointerEvents="box-none"
+          style={[styles.avoider, align]}
+        >
+          <AnimatedPressable
+            style={[styles.panel, panel, isBottom && { transform: [{ translateY: dragY }] }]}
+            onPress={() => {}}
+            accessibilityViewIsModal
+            onLayout={
+              isBottom
+                ? (e) => {
+                    sheetHeightRef.current = e.nativeEvent.layout.height;
+                  }
+                : undefined
+            }
+          >
+            {isBottom ? (
+              <View
+                hitSlop={{ top: 8, bottom: 10, left: 16, right: 16 }}
+                {...panResponder.panHandlers}
+              >
+                <View style={styles.handle} pointerEvents="none" />
+                {title ? <Text style={styles.title}>{title}</Text> : null}
+              </View>
+            ) : title ? (
+              <Text style={styles.title}>{title}</Text>
+            ) : null}
+            <View style={styles.body}>
+              {typeof children === 'string' ? <Text style={styles.bodyText}>{children}</Text> : children}
+            </View>
+          </AnimatedPressable>
+        </KeyboardAvoidingView>
+      </Pressable>
+    </RNModal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrim: {
+    ...StyleSheet.absoluteFillObject,
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.55)',
+  },
+  // Fills the scrim so the panel's %-heights keep a definite parent; the
+  // side-alignment styles now live here (the avoider positions the panel).
+  avoider: { flex: 1 },
+  scrimBottom: { justifyContent: 'flex-end' },
+  scrimRight: { flexDirection: 'row', justifyContent: 'flex-end' },
+  scrimLeft: { flexDirection: 'row', justifyContent: 'flex-start' },
+
+  panel: {
+    backgroundColor: colors.bg1,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: '#000',
+    shadowOpacity: 0.7,
+    shadowRadius: 50,
+    shadowOffset: { width: 0, height: -18 },
+    elevation: 20,
+  },
+  panelBottom: {
+    width: '100%',
+    maxHeight: '86%',
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 18,
+    borderBottomWidth: 0,
+    borderTopLeftRadius: radii.lg,
+    borderTopRightRadius: radii.lg,
+  },
+  panelRight: {
+    height: '100%',
+    width: 360,
+    maxWidth: '100%',
+    paddingVertical: 18,
+    paddingHorizontal: 20,
+    borderTopLeftRadius: radii.lg,
+    borderBottomLeftRadius: radii.lg,
+  },
+  panelLeft: {
+    height: '100%',
+    width: 360,
+    maxWidth: '100%',
+    paddingVertical: 18,
+    paddingHorizontal: 20,
+    borderTopRightRadius: radii.lg,
+    borderBottomRightRadius: radii.lg,
+  },
+
+  handle: {
+    width: 40,
+    height: 4,
+    marginTop: 2,
+    marginBottom: 10,
+    alignSelf: 'center',
+    borderRadius: 999,
+    backgroundColor: colors.border2,
+  },
+  title: {
+    paddingTop: 2,
+    paddingHorizontal: 2,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 16,
+    letterSpacing: -0.16,
+    color: colors.text,
+  },
+  body: {
+    flexShrink: 1,
+    paddingTop: 12,
+    paddingHorizontal: 2,
+    paddingBottom: 2,
+  },
+  bodyText: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    lineHeight: 22,
+    color: colors.textDim,
+  },
+});