@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-PYPMD46W.js

@@ -0,0 +1,707 @@
+import { TranscriptSlot } from './chunk-3A56MIAN.js';
+import { formatTime } from './chunk-CA3DUVYD.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+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';
+
+var DEFAULT_LABELS = {
+  seek: "Seek",
+  seekValue: (current, total) => `${current} of ${total}`,
+  previous: "Previous track",
+  next: "Next track",
+  play: "Play",
+  pause: "Pause",
+  close: "Close player",
+  artworkPlaceholder: "1:1",
+  expand: (title, meta) => `${title}${meta ? `, ${meta}` : ""}. Expand player`,
+  collapse: "Collapse player",
+  artwork: "Artwork 1:1",
+  position: "Playback position",
+  skipBack: "Skip back",
+  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
+}) {
+  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();
+  }, [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"
+  });
+  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;
+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,
+  playing = false,
+  progress,
+  onPress,
+  onTogglePlay,
+  labels: labelsProp,
+  size = "md",
+  loading = false,
+  motion = "none"
+}) {
+  const labels = useLabels("audioPlayer", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("audio-player");
+  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,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.expand(title, meta),
+        onPress,
+        style: styles.miniBody,
+        children: [
+          /* @__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
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: playing ? labels.pause : labels.play,
+        onPress: onTogglePlay,
+        hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
+        style: styles.miniTransport,
+        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(
+      Animated.View,
+      {
+        style: [
+          styles.miniProgress,
+          { width: fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) }
+        ]
+      }
+    ) : null
+  ] });
+}
+function AudioSheet({
+  title,
+  meta,
+  playing = false,
+  position = 0,
+  duration = 0,
+  onTogglePlay,
+  onSeek,
+  onSkipBack,
+  onSkipForward,
+  onCollapse,
+  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);
+  const theme = useLoamTheme("audio-player");
+  const pct = duration > 0 ? Math.min(1, Math.max(0, position / duration)) : 0;
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  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();
+  };
+  const seekFromX = (x) => {
+    if (!onSeek || trackWidth <= 0 || duration <= 0) return;
+    onSeek(Math.min(duration, Math.max(0, x / trackWidth * duration)));
+  };
+  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
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.progressWrap, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: onSeek ? "adjustable" : "progressbar",
+          accessibilityLabel: labels.position,
+          "aria-valuemin": 0,
+          "aria-valuemax": Math.round(duration),
+          "aria-valuenow": Math.round(position),
+          "aria-valuetext": labels.seekValue(formatTime(position), formatTime(duration)),
+          accessibilityActions: onSeek ? [{ name: "increment" }, { name: "decrement" }] : void 0,
+          onAccessibilityAction: (e) => {
+            const delta = e.nativeEvent.actionName === "increment" ? SEEK_STEP : -SEEK_STEP;
+            onSeek?.(Math.min(duration, Math.max(0, position + delta)));
+          },
+          onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+          onPress: onSeek ? (e) => seekFromX(e.nativeEvent.locationX) : void 0,
+          onTouchMove: onSeek ? (e) => seekFromX(e.nativeEvent.locationX) : void 0,
+          onPressIn: onSeek ? () => hold(1) : void 0,
+          onPressOut: onSeek ? () => hold(0) : void 0,
+          hitSlop: onSeek ? theme.space.s4 : void 0,
+          disabled: !onSeek,
+          style: styles.progressHit,
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.progressTrack,
+                {
+                  pointerEvents: "none",
+                  transform: [
+                    { scaleY: held.interpolate({ inputRange: [0, 1], outputRange: [1, 2] }) }
+                  ]
+                }
+              ],
+              children: /* @__PURE__ */ jsx(View, { style: [styles.progressFill, { width: `${pct * 100}%` }] })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(View, { style: styles.timeRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatTime(position) }),
+        /* @__PURE__ */ jsxs(Text, { style: styles.time, children: [
+          "-",
+          formatTime(Math.max(0, duration - position))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.transportRow, children: [
+      /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.skipBy(labels.skipBack, skipBackBy),
+          onPress: onSkipBack,
+          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(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: playing ? labels.pause : labels.play,
+          onPress: onTogglePlay,
+          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__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.skipBy(labels.skipForward, skipForwardBy),
+          onPress: onSkipForward,
+          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({
+  expanded,
+  onExpandedChange,
+  sheetHeight = 420,
+  motion = "full",
+  ...rest
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("audio-player");
+  const resolvedMotion = useResolvedMotion(motion, "audio-player");
+  const [ownExpanded, setOwnExpanded] = React.useState(false);
+  const isExpanded = expanded ?? ownExpanded;
+  const fade = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  const expand = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  React.useEffect(() => {
+    const to = isExpanded ? 1 : 0;
+    if (resolvedMotion === "none") {
+      fade.setValue(to);
+      expand.setValue(to);
+      return;
+    }
+    Animated.timing(fade, {
+      toValue: to,
+      duration: theme.duration.slow,
+      easing: Easing.bezier(...theme.easing.spring),
+      useNativeDriver: false
+    }).start();
+    if (resolvedMotion === "full") {
+      Animated.timing(expand, {
+        toValue: to,
+        duration: theme.duration.slow,
+        easing: Easing.bezier(...theme.easing.spring),
+        useNativeDriver: false
+      }).start();
+    } else {
+      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);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.collapsible, children: [
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: { opacity: fade.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) },
+        children: /* @__PURE__ */ jsx(AudioMiniBar, { ...rest, motion, onPress: () => setExpanded(true) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [
+          styles.sheet,
+          {
+            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) })
+      }
+    )
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  collapsible: { position: "relative" },
+  // ---- mini bar ----
+  mini: {
+    position: "relative",
+    flexDirection: "row",
+    alignItems: "center",
+    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,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  miniBody: { flexDirection: "row", alignItems: "center", gap: theme.space.s3, flex: 1 },
+  miniArt: {
+    width: theme.space[36],
+    height: theme.space[36],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.surface3
+  },
+  miniText: { flex: 1, minWidth: 0 },
+  miniTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text
+  },
+  miniMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  miniTransport: {
+    // Square icon button on the control-size ramp (icon-button tier = 36).
+    width: theme.ctl.iconBtn,
+    height: theme.ctl.iconBtn,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  miniProgress: {
+    position: "absolute",
+    left: 0,
+    bottom: 0,
+    height: theme.space[2],
+    backgroundColor: theme.color.accent
+  },
+  // ---- expanded sheet ----
+  sheet: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+    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
+    // contrast, where `surface` on `bg` is a ~1.06 ratio. `edge.neutral` is the
+    // rule that still says where the sheet starts, and it is `transparent`
+    // until the preference flips, so the resting sheet is untouched.
+    borderTopWidth: theme.borderWidth.base,
+    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],
+    paddingBottom: theme.space[20],
+    gap: theme.space.s4,
+    flex: 1
+  },
+  grabberHit: { alignSelf: "center", minHeight: theme.tapMin, justifyContent: "center" },
+  grabber: {
+    width: theme.space[38],
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  artwork: {
+    // 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,
+    // 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.
+    // On the `surface3` artwork placeholder, `text3` is 4.16:1 (WCAG fail);
+    // primary `text` clears 4.5:1.
+    color: theme.color.text
+  },
+  sheetText: { gap: theme.space[3] },
+  sheetTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text
+  },
+  sheetMeta: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  progressWrap: { gap: theme.space[6] },
+  progressHit: { justifyContent: "center" },
+  progressTrack: {
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3
+  },
+  progressFill: {
+    height: theme.space[4],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  timeRow: { flexDirection: "row", justifyContent: "space-between" },
+  time: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2
+  },
+  transportRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    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,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  transportPrimary: {
+    width: theme.space[56],
+    height: theme.space[56],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+export { AudioMiniBar, AudioPlayerCollapsible, AudioSheet };