@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-TY4MTKQJ.js → chunk-PYPMD46W.js}

@@ -1,8 +1,10 @@
+import { TranscriptSlot } from './chunk-3A56MIAN.js';
+import { formatTime } from './chunk-CA3DUVYD.js';
 import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
-import { View, Pressable, Text, Animated, Easing } from 'react-native';
+import { Animated, Easing, View, Pressable, Text, ActivityIndicator, Platform, BackHandler } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -20,35 +22,54 @@ var DEFAULT_LABELS = {
   artwork: "Artwork 1:1",
   position: "Playback position",
   skipBack: "Skip back",
-  skipForward: "Skip forward"
+  skipForward: "Skip forward",
+  speed: "Playback speed",
+  sleep: "Sleep timer",
+  route: "Audio output",
+  chapters: "Chapters",
+  queue: "Up next",
+  loading: "Loading",
+  skipBy: (label, seconds) => `${label} ${seconds} seconds`
 };
-function PlayPauseGlyph({ playing, size, color }) {
+function PlayPauseGlyph({
+  playing,
+  size,
+  color
+}) {
   const theme = useLoamTheme("audio-player");
   const level = useResolvedMotion(void 0, "audio-player");
   const v = React.useRef(new Animated.Value(playing ? 1 : 0)).current;
   React.useEffect(() => {
     const toValue = playing ? 1 : 0;
     if (level === "none") v.setValue(toValue);
-    else if (level === "reduced") Animated.timing(v, { ...motionTiming(level), toValue, useNativeDriver: true }).start();
-    else Animated.spring(v, { ...springConfig(theme, "fs"), toValue, useNativeDriver: true }).start();
+    else if (level === "reduced")
+      Animated.timing(v, { ...motionTiming(level), toValue, useNativeDriver: true }).start();
+    else
+      Animated.spring(v, { ...springConfig(theme, "fs"), toValue, useNativeDriver: true }).start();
   }, [playing, level, v, theme]);
   const layer = (shown) => ({
     position: "absolute",
     opacity: shown,
     transform: level === "full" ? [{ scale: shown.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }] : []
   });
-  const pauseShown = v.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" });
-  const playShown = v.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: "clamp" });
+  const pauseShown = v.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: "clamp"
+  });
+  const playShown = v.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
+    extrapolate: "clamp"
+  });
   return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
     /* @__PURE__ */ jsx(Animated.View, { style: layer(playShown), children: /* @__PURE__ */ jsx(Icon, { name: "play", size, color }) }),
     /* @__PURE__ */ jsx(Animated.View, { style: layer(pauseShown), children: /* @__PURE__ */ jsx(Icon, { name: "pause", size, color }) })
   ] });
 }
 var SEEK_STEP = 5;
-function formatTime(seconds) {
-  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
-  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
-}
+var MINI_SIZE = { sm: [48, 32], md: [56, 36], lg: [64, 44] };
+var SHEET_SIZE = { sm: [200, 48], md: [264, 56], lg: [320, 64] };
 function AudioMiniBar({
   title,
   meta,
@@ -56,12 +77,28 @@ function AudioMiniBar({
   progress,
   onPress,
   onTogglePlay,
-  labels: labelsProp
+  labels: labelsProp,
+  size = "md",
+  loading = false,
+  motion = "none"
 }) {
   const labels = useLabels("audioPlayer", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const theme = useLoamTheme("audio-player");
-  return /* @__PURE__ */ jsxs(View, { style: styles.mini, children: [
+  const resolved = useResolvedMotion(motion, "audio-player");
+  const [rowH, artEdge] = MINI_SIZE[size];
+  const pct = progress != null ? Math.max(0, Math.min(1, progress)) : 0;
+  const fill = React.useRef(new Animated.Value(pct)).current;
+  React.useEffect(() => {
+    if (resolved !== "full") return fill.setValue(pct);
+    Animated.timing(fill, {
+      toValue: pct,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      useNativeDriver: false
+    }).start();
+  }, [pct, resolved, fill, theme.duration.base, theme.easing.base]);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.mini, { minHeight: theme.space[rowH] }], "aria-busy": loading || void 0, children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -70,7 +107,12 @@ function AudioMiniBar({
         onPress,
         style: styles.miniBody,
         children: [
-          /* @__PURE__ */ jsx(View, { style: styles.miniArt }),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              style: [styles.miniArt, { width: theme.space[artEdge], height: theme.space[artEdge] }]
+            }
+          ),
           /* @__PURE__ */ jsxs(View, { style: styles.miniText, children: [
             /* @__PURE__ */ jsx(Text, { style: styles.miniTitle, numberOfLines: 1, children: title }),
             meta ? /* @__PURE__ */ jsx(Text, { style: styles.miniMeta, numberOfLines: 1, children: meta }) : null
@@ -86,13 +128,23 @@ function AudioMiniBar({
         onPress: onTogglePlay,
         hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
         style: styles.miniTransport,
-        children: /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 16, color: theme.color.accentInk })
+        children: loading ? /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            size: "small",
+            color: theme.color.accentInk,
+            accessibilityLabel: labels.loading
+          }
+        ) : /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 16, color: theme.color.accentInk })
       }
     ),
     progress != null ? /* @__PURE__ */ jsx(
-      View,
+      Animated.View,
       {
-        style: [styles.miniProgress, { width: `${Math.max(0, Math.min(1, progress)) * 100}%` }]
+        style: [
+          styles.miniProgress,
+          { width: fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) }
+        ]
       }
     ) : null
   ] });
@@ -108,7 +160,23 @@ function AudioSheet({
   onSkipBack,
   onSkipForward,
   onCollapse,
-  labels: labelsProp
+  skipBackBy = 15,
+  skipForwardBy = 30,
+  playbackRate,
+  onSpeedPress,
+  sleepTimer,
+  onSleepPress,
+  onRoutePress,
+  chapters,
+  onChapterPress,
+  queue,
+  onQueuePress,
+  transcript,
+  labels: labelsProp,
+  size = "md",
+  loading = false,
+  side = "bottom",
+  presentation = "sheet"
 }) {
   const labels = useLabels("audioPlayer", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
@@ -118,24 +186,30 @@ function AudioSheet({
   const held = React.useRef(new Animated.Value(0)).current;
   const hold = (to) => {
     if (theme.reduceMotion) return held.setValue(0);
-    Animated.spring(held, { ...springConfig(theme, "fs"), toValue: to, useNativeDriver: true }).start();
+    Animated.spring(held, {
+      ...springConfig(theme, "fs"),
+      toValue: to,
+      useNativeDriver: true
+    }).start();
   };
   const seekFromX = (x) => {
     if (!onSeek || trackWidth <= 0 || duration <= 0) return;
     onSeek(Math.min(duration, Math.max(0, x / trackWidth * duration)));
   };
-  return /* @__PURE__ */ jsxs(View, { style: styles.sheetBody, children: [
-    /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: labels.collapse,
-        onPress: onCollapse,
-        style: styles.grabberHit,
-        children: /* @__PURE__ */ jsx(View, { style: styles.grabber })
-      }
-    ),
-    /* @__PURE__ */ jsx(View, { style: styles.artwork, children: /* @__PURE__ */ jsx(Text, { style: styles.artworkLabel, children: labels.artwork }) }),
+  const [artMax, primaryEdge] = SHEET_SIZE[size];
+  const grabber = presentation === "inline" ? null : /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: labels.collapse,
+      onPress: onCollapse,
+      style: styles.grabberHit,
+      children: /* @__PURE__ */ jsx(View, { style: styles.grabber })
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { style: styles.sheetBody, "aria-busy": loading || void 0, children: [
+    side === "top" ? null : grabber,
+    /* @__PURE__ */ jsx(View, { style: [styles.artwork, { maxWidth: artMax }], children: /* @__PURE__ */ jsx(Text, { style: styles.artworkLabel, children: labels.artwork }) }),
     /* @__PURE__ */ jsxs(View, { style: styles.sheetText, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: title }),
       meta ? /* @__PURE__ */ jsx(Text, { style: styles.sheetMeta, children: meta }) : null
@@ -168,7 +242,12 @@ function AudioSheet({
             {
               style: [
                 styles.progressTrack,
-                { pointerEvents: "none", transform: [{ scaleY: held.interpolate({ inputRange: [0, 1], outputRange: [1, 2] }) }] }
+                {
+                  pointerEvents: "none",
+                  transform: [
+                    { scaleY: held.interpolate({ inputRange: [0, 1], outputRange: [1, 2] }) }
+                  ]
+                }
               ],
               children: /* @__PURE__ */ jsx(View, { style: [styles.progressFill, { width: `${pct * 100}%` }] })
             }
@@ -184,14 +263,17 @@ function AudioSheet({
       ] })
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.transportRow, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: labels.skipBack,
+          accessibilityLabel: labels.skipBy(labels.skipBack, skipBackBy),
           onPress: onSkipBack,
-          style: styles.transportSecondary,
-          children: /* @__PURE__ */ jsx(Icon, { name: "skip-back", size: 22, color: theme.color.text2 })
+          style: styles.skipCapsule,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "rotate-ccw", size: 18, color: theme.color.text2 }),
+            /* @__PURE__ */ jsx(Text, { style: styles.skipText, children: skipBackBy })
+          ]
         }
       ),
       /* @__PURE__ */ jsx(
@@ -200,21 +282,124 @@ function AudioSheet({
           accessibilityRole: "button",
           accessibilityLabel: playing ? labels.pause : labels.play,
           onPress: onTogglePlay,
-          style: styles.transportPrimary,
-          children: /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 26, color: theme.color.accentInk })
+          style: [styles.transportPrimary, { width: primaryEdge, height: primaryEdge }],
+          children: loading ? /* @__PURE__ */ jsx(
+            ActivityIndicator,
+            {
+              size: "small",
+              color: theme.color.accentInk,
+              accessibilityLabel: labels.loading
+            }
+          ) : /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 26, color: theme.color.accentInk })
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: labels.skipForward,
+          accessibilityLabel: labels.skipBy(labels.skipForward, skipForwardBy),
           onPress: onSkipForward,
-          style: styles.transportSecondary,
-          children: /* @__PURE__ */ jsx(Icon, { name: "skip-forward", size: 22, color: theme.color.text2 })
+          style: styles.skipCapsule,
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.skipText, children: skipForwardBy }),
+            /* @__PURE__ */ jsx(View, { style: { transform: [{ scaleX: -1 }] }, children: /* @__PURE__ */ jsx(Icon, { name: "rotate-ccw", size: 18, color: theme.color.text2 }) })
+          ]
         }
       )
-    ] })
+    ] }),
+    playbackRate != null || sleepTimer != null || onSleepPress || onRoutePress ? /* @__PURE__ */ jsxs(View, { style: styles.capsuleRow, children: [
+      playbackRate != null ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: `${labels.speed} ${playbackRate}\xD7`,
+          onPress: onSpeedPress,
+          style: styles.capsule,
+          children: /* @__PURE__ */ jsxs(Text, { style: styles.capsuleText, children: [
+            playbackRate,
+            "\xD7"
+          ] })
+        }
+      ) : null,
+      sleepTimer != null || onSleepPress ? /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: sleepTimer ? `${labels.sleep} ${sleepTimer}` : labels.sleep,
+          onPress: onSleepPress,
+          style: styles.capsule,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "moon", size: 16, color: theme.color.text2 }),
+            sleepTimer ? /* @__PURE__ */ jsx(Text, { style: styles.capsuleText, children: sleepTimer }) : null
+          ]
+        }
+      ) : null,
+      onRoutePress ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.route,
+          onPress: onRoutePress,
+          style: styles.capsule,
+          children: /* @__PURE__ */ jsx(Icon, { name: "volume", size: 16, color: theme.color.text2 })
+        }
+      ) : null
+    ] }) : null,
+    transcript ? /* @__PURE__ */ jsx(
+      TranscriptSlot,
+      {
+        transcript,
+        currentTime: position,
+        onSeek: (t) => onSeek?.(t)
+      }
+    ) : null,
+    chapters && chapters.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.list, role: "group", accessibilityLabel: labels.chapters, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.listHead, children: labels.chapters }),
+      chapters.map((c, i) => {
+        const next = chapters[i + 1];
+        const current = position >= c.start && (!next || position < next.start);
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            "aria-current": current ? "true" : void 0,
+            accessibilityLabel: `${c.title}, ${formatTime(c.start)}`,
+            onPress: () => onChapterPress?.(c.start),
+            style: [styles.row, current && styles.rowCurrent],
+            children: [
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [styles.rowTitle, current && styles.rowTitleCurrent],
+                  numberOfLines: 1,
+                  children: c.title
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatTime(c.start) })
+            ]
+          },
+          `${c.start}-${c.title}`
+        );
+      })
+    ] }) : null,
+    queue && queue.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.list, role: "group", accessibilityLabel: labels.queue, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.listHead, children: labels.queue }),
+      queue.map((q, i) => /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: q.meta ? `${q.title}, ${q.meta}` : q.title,
+          onPress: () => onQueuePress?.(i),
+          style: styles.row,
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.rowTitle, numberOfLines: 1, children: q.title }),
+            q.meta ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: q.meta }) : null
+          ]
+        },
+        `${i}-${q.title}`
+      ))
+    ] }) : null,
+    side === "top" ? grabber : null
   ] });
 }
 function AudioPlayerCollapsible({
@@ -255,6 +440,15 @@ function AudioPlayerCollapsible({
       expand.setValue(to);
     }
   }, [isExpanded, resolvedMotion, fade, expand, theme.duration.slow, theme.easing.spring]);
+  React.useEffect(() => {
+    if (Platform.OS !== "android" || !isExpanded) return void 0;
+    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (expanded == null) setOwnExpanded(false);
+      onExpandedChange?.(false);
+      return true;
+    });
+    return () => sub.remove();
+  }, [isExpanded, expanded, onExpandedChange]);
   const setExpanded = (next) => {
     if (expanded == null) setOwnExpanded(next);
     onExpandedChange?.(next);
@@ -264,7 +458,7 @@ function AudioPlayerCollapsible({
       Animated.View,
       {
         style: { opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) },
-        children: /* @__PURE__ */ jsx(AudioMiniBar, { ...rest, onPress: () => setExpanded(true) })
+        children: /* @__PURE__ */ jsx(AudioMiniBar, { ...rest, motion, onPress: () => setExpanded(true) })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -276,6 +470,7 @@ function AudioPlayerCollapsible({
             height: expand.interpolate({ inputRange: [0, 1], outputRange: [0, sheetHeight] }),
             opacity: fade
           },
+          rest.side === "top" ? styles.sheetTop : null,
           { pointerEvents: isExpanded ? "auto" : "none" }
         ],
         children: /* @__PURE__ */ jsx(AudioSheet, { ...rest, onCollapse: () => setExpanded(false) })
@@ -290,9 +485,10 @@ var sheet = createStyleSheet((theme) => ({
     position: "relative",
     flexDirection: "row",
     alignItems: "center",
-    gap: theme.space[11],
-    paddingVertical: theme.space[9],
-    paddingHorizontal: theme.space[11],
+    gap: theme.space[12],
+    // 56 row, px 12, gap 12 (the mini bar's own rhythm — not the dock's).
+    minHeight: theme.space[56],
+    paddingHorizontal: theme.space[12],
     borderRadius: theme.radius.lg,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
@@ -302,8 +498,8 @@ var sheet = createStyleSheet((theme) => ({
   },
   miniBody: { flexDirection: "row", alignItems: "center", gap: theme.space.s3, flex: 1 },
   miniArt: {
-    width: theme.space[34],
-    height: theme.space[34],
+    width: theme.space[36],
+    height: theme.space[36],
     borderRadius: theme.radius.sm,
     backgroundColor: theme.color.surface3
   },
@@ -316,8 +512,8 @@ var sheet = createStyleSheet((theme) => ({
   },
   miniMeta: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
   },
   miniTransport: {
     // Square icon button on the control-size ramp (icon-button tier = 36).
@@ -342,8 +538,8 @@ var sheet = createStyleSheet((theme) => ({
     right: 0,
     bottom: 0,
     overflow: "hidden",
-    borderTopLeftRadius: theme.radius.xl,
-    borderTopRightRadius: theme.radius.xl,
+    borderTopStartRadius: theme.radius.lg,
+    borderTopEndRadius: theme.radius.lg,
     backgroundColor: theme.color.surface,
     // The sheet sits directly on the content with no scrim of its own, so its
     // top edge is the entire boundary — and `shadow.lg` zeroes out under high
@@ -354,6 +550,18 @@ var sheet = createStyleSheet((theme) => ({
     borderTopColor: theme.edge.neutral,
     ...theme.shadow.lg
   },
+  // Anchored to the top edge: the rounded corners and the rule flip to the bottom.
+  sheetTop: {
+    top: 0,
+    bottom: void 0,
+    borderTopStartRadius: 0,
+    borderTopEndRadius: 0,
+    borderTopWidth: 0,
+    borderBottomStartRadius: theme.radius.lg,
+    borderBottomEndRadius: theme.radius.lg,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.edge.neutral
+  },
   sheetBody: {
     paddingTop: theme.space[14],
     paddingHorizontal: theme.space[20],
@@ -369,19 +577,21 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface3
   },
   artwork: {
-    height: theme.space[152],
-    borderRadius: theme.radius.lg,
+    // 1:1 art, 264 at most, centred; corner 16.
+    width: "100%",
+    maxWidth: 264,
+    aspectRatio: 1,
+    alignSelf: "center",
+    borderRadius: theme.radius[16],
     backgroundColor: theme.color.surface3,
     alignItems: "center",
     justifyContent: "center"
   },
   artworkLabel: {
+    ...theme.type.overline,
     fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
     // Uppercase wants the caps tracking step, which is a ratio — multiply it by
     // the size rather than restating the product as a bare 1.2.
-    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
-    textTransform: "uppercase",
     // On the `surface3` artwork placeholder, `text3` is 4.16:1 (WCAG fail);
     // primary `text` clears 4.5:1.
     color: theme.color.text
@@ -395,8 +605,8 @@ var sheet = createStyleSheet((theme) => ({
   },
   sheetMeta: {
     fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    color: theme.color.text3
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
   },
   progressWrap: { gap: theme.space[6] },
   progressHit: { justifyContent: "center" },
@@ -413,15 +623,71 @@ var sheet = createStyleSheet((theme) => ({
   timeRow: { flexDirection: "row", justifyContent: "space-between" },
   time: {
     fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
-    color: theme.color.text3
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
   },
   transportRow: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.space[22]
+    gap: theme.space[24]
+  },
+  skipCapsule: {
+    minWidth: theme.tapMin,
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.full,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[4]
+  },
+  skipText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  capsuleRow: { flexDirection: "row", justifyContent: "center", gap: theme.space[8] },
+  capsule: {
+    minWidth: theme.tapMin,
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[6]
+  },
+  capsuleText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text
+  },
+  list: { gap: theme.space[2] },
+  listHead: {
+    ...theme.type.overline,
+    fontFamily: theme.font.mono,
+    color: theme.color.text3,
+    paddingVertical: theme.space[6]
+  },
+  row: {
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.md,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[12]
+  },
+  rowCurrent: { backgroundColor: theme.state.selected },
+  rowTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text
   },
+  rowTitleCurrent: { fontWeight: theme.fontWeight.semibold },
   transportSecondary: {
     width: theme.tapMin,
     height: theme.tapMin,
@@ -429,8 +695,8 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "center"
   },
   transportPrimary: {
-    width: theme.space[58],
-    height: theme.space[58],
+    width: theme.space[56],
+    height: theme.space[56],
     borderRadius: theme.radius.full,
     backgroundColor: theme.color.accent,
     alignItems: "center",