@oxy.so/bloom 2.10.0 → 2.11.0

package/src/media-controls/shared.ts

@@ -19,10 +19,6 @@ export function formatDuration(seconds: number): string {
   return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${ss}` : `${m}:${ss}`;
 }
 
-export function clamp(v: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, v));
-}
-
 /** Every colour the family paints, from the theme only. */
 export interface MediaControlsPaint {
   accent: string;

package/src/media-controls/types.ts

@@ -11,6 +11,13 @@ export type PlayButtonSize = 'small' | 'medium' | 'large';
 export type PlayButtonVariant = 'accent' | 'inverse' | 'plain';
 
 export interface PlayButtonProps {
+  /**
+   * `false` draws the disc without making it a control: no `role="button"`, no
+   * focus stop, hidden from assistive tech unless `accessibilityLabel` names it.
+   * For a play glyph that sits INSIDE a pressable poster frame or row — a
+   * button inside a button is invalid HTML and a second stop for one action.
+   */
+  interactive?: boolean;
   /** Whether the media is playing: draws the pause glyph and is named "Pause". */
   playing: boolean;
   /** Called on press. The button does not toggle anything itself. */

package/src/media-header/ArtistPick.tsx

@@ -5,9 +5,9 @@ import { Avatar } from '../avatar';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiPushpinFill } from '../icons/remix/RiPushpinFill';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { Cover, useMediaHeaderPaint } from './parts';
-import { webData } from './shared';
 import type { ArtistPickProps } from './types';
 
 /**
@@ -93,7 +93,7 @@ function ArtistPickComponent({
   }
   return (
     <Pressable
-      {...webData({ bloomMediaHeaderPress: '' })}
+      {...webDataSet({ bloomMediaHeaderPress: '' })}
       role="button"
       accessibilityLabel={title}
       onPress={onPress}

package/src/media-header/CollectionHeader.tsx

@@ -5,10 +5,11 @@ import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiPencilLine } from '../icons/remix/RiPencilLine';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Cover, HeaderTitle, MediaHeaderFrame, MetaLine, useMediaHeaderPaint } from './parts';
-import { IS_WEB, resolveLikedGradient, selectTitleVariant, webData } from './shared';
+import { IS_WEB, resolveLikedGradient, selectTitleVariant } from './shared';
 import type { CollectionHeaderProps } from './types';
 
 /**
@@ -120,7 +121,7 @@ function CollectionHeaderComponent({
         const press: WebCssStyle = { borderRadius: 6, '--bloom-media-header-ring': paint.ring };
         return (
           <Pressable
-            {...webData({ bloomMediaHeaderPress: '' })}
+            {...webDataSet({ bloomMediaHeaderPress: '' })}
             role="button"
             accessibilityLabel={editLabel}
             onPress={onEdit}
@@ -159,7 +160,7 @@ function CollectionHeaderComponent({
             </Text>
             {canEdit ? (
               <Pressable
-                {...webData({ bloomMediaHeaderPress: '' })}
+                {...webDataSet({ bloomMediaHeaderPress: '' })}
                 role="button"
                 accessibilityLabel={`${editLabel}: ${title}`}
                 onPress={onEdit}

package/src/media-header/DiscographyFilter.tsx

@@ -4,9 +4,9 @@ import { Pressable, View } from 'react-native';
 import { Chip } from '../chip';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { useMediaHeaderPaint } from './parts';
-import { webData } from './shared';
 import type { DiscographyFilterOption, DiscographyFilterProps } from './types';
 
 /**
@@ -48,7 +48,7 @@ function DiscographyFilterComponent({
           )}
           {onShowAll ? (
             <Pressable
-              {...webData({ bloomMediaHeaderPress: '' })}
+              {...webDataSet({ bloomMediaHeaderPress: '' })}
               role="link"
               accessibilityLabel={showAllLabel}
               onPress={onShowAll}

package/src/media-header/MediaActionBar.tsx

@@ -10,13 +10,16 @@ import { RiListView } from '../icons/remix/RiListView';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiShuffleLine } from '../icons/remix/RiShuffleLine';
+import { GlyphButton } from '../button';
 import { LikeButton } from '../media-controls/LikeButton';
 import { PlayButton } from '../media-controls/PlayButton';
-import { borderRadius } from '../styles/tokens';
+import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
 import { useMediaHeaderPaint } from './parts';
-import { clamp01, IS_WEB, webData } from './shared';
+import { IS_WEB } from './shared';
+import { clamp01 } from '../styles/clamp';
+import { webDataSet as webData } from '../styles/web-data';
 import type {
   DownloadButtonProps,
   FollowButtonProps,
@@ -45,7 +48,13 @@ function stop(event: GestureResponderEvent) {
   }
 }
 
-/** A glyph-only control; a toggle when `pressed` is given. */
+/**
+ * A glyph-only control; a toggle when `pressed` is given.
+ *
+ * `button/GlyphButton` at this bar's 40 box (`max(40, size + 12)` — the glyph is
+ * the caller's, the TARGET is never under 40) with no fill in any state, plus
+ * the 4px accent dot an active toggle carries.
+ */
 function MediaIconButtonComponent({
   icon: Icon,
   accessibilityLabel,
@@ -60,60 +69,46 @@ function MediaIconButtonComponent({
   'aria-haspopup': ariaHaspopup,
 }: MediaIconButtonProps) {
   const paint = useMediaHeaderPaint();
-  const { state: hovered, onIn, onOut } = useInteractionState();
-  const toggle = pressed !== undefined;
-  const glyphColor = pressed
-    ? paint.accent
-    : hovered && !disabled
-      ? paint.text
-      : (color ?? paint.textMuted);
   const box = Math.max(40, size + 12);
-  const root: WebCssStyle = {
-    width: box,
-    height: box,
-    borderRadius: borderRadius.full,
-    alignItems: 'center',
-    justifyContent: 'center',
-    opacity: disabled ? 0.5 : 1,
-    '--bloom-media-header-ring': paint.ring,
-  };
   return (
-    <Pressable
-      {...webData({ bloomMediaHeaderPress: '' })}
-      role="button"
+    <GlyphButton
+      icon={Icon}
+      size={box}
+      glyphSize={size}
       accessibilityLabel={accessibilityLabel}
-      aria-pressed={toggle ? pressed : undefined}
+      disabled={disabled}
+      pressed={pressed}
+      color={color ?? paint.textMuted}
+      hoverColor={paint.text}
+      activeColor={paint.accent}
+      activeHoverColor={paint.accent}
+      fill="transparent"
+      hoverFill="transparent"
+      ring={paint.ring}
       aria-expanded={ariaExpanded}
       aria-haspopup={ariaHaspopup}
-      aria-disabled={disabled || undefined}
-      accessibilityState={{ selected: toggle ? pressed : undefined, disabled, expanded: ariaExpanded }}
-      disabled={disabled}
-      onHoverIn={onIn}
-      onHoverOut={onOut}
       onPress={(event) => {
         stop(event);
         onPress?.();
       }}
-      style={[root, style]}
+      style={style}
       testID={testID}
-    >
-      <View pointerEvents="none" style={{ width: size, height: size }}>
-        <Icon width={size} height={size} fill={glyphColor} />
-      </View>
-      {pressed ? (
-        <View
-          pointerEvents="none"
-          style={{
-            position: 'absolute',
-            bottom: 1,
-            width: 4,
-            height: 4,
-            borderRadius: 2,
-            backgroundColor: paint.accent,
-          }}
-        />
-      ) : null}
-    </Pressable>
+      decoration={
+        pressed ? (
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              bottom: 1,
+              width: 4,
+              height: 4,
+              borderRadius: 2,
+              backgroundColor: paint.accent,
+            }}
+          />
+        ) : null
+      }
+    />
   );
 }
 
@@ -196,7 +191,7 @@ function DownloadButtonComponent({
     borderRadius: borderRadius.full,
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-media-header-ring': paint.ring,
   };
   const stroke = 2.5;
@@ -298,7 +293,7 @@ function FollowButtonComponent({
     borderColor: active ? fg : color ? fg : paint.border,
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-media-header-ring': paint.ring,
     ...(IS_WEB ? { transitionProperty: 'border-color', transitionDuration: '150ms' } : null),
   };

package/src/media-header/PodcastShowHeader.tsx

@@ -6,10 +6,11 @@ import { useInteractionState } from '../hooks/use-interaction-state';
 import { PlayButton } from '../media-controls/PlayButton';
 import { Rating } from '../rating';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { FollowButton } from './MediaActionBar';
 import { ClampedText, Cover, HeaderTitle, InlineLink, MediaHeaderFrame, useMediaHeaderPaint } from './parts';
-import { selectTitleVariant, webData, type MediaHeaderPaint } from './shared';
+import { selectTitleVariant, type MediaHeaderPaint } from './shared';
 import type { LatestEpisode, PodcastShowHeaderProps } from './types';
 
 /**
@@ -70,7 +71,7 @@ function LatestEpisodeCard({
     <View style={{ position: 'relative' }} testID={testID}>
       {episode.onPress ? (
         <Pressable
-          {...webData({ bloomMediaHeaderPress: '' })}
+          {...webDataSet({ bloomMediaHeaderPress: '' })}
           role="button"
           accessibilityLabel={`${label}: ${episode.title}`}
           onPress={episode.onPress}

package/src/media-header/PopularTracks.tsx

@@ -6,9 +6,10 @@ import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { ExplicitBadge } from '../media-controls/ExplicitBadge';
 import { NowPlayingIndicator } from '../media-controls/NowPlayingIndicator';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { useImageUri, useMediaHeaderPaint } from './parts';
-import { webData, type MediaHeaderPaint } from './shared';
+import { type MediaHeaderPaint } from './shared';
 import type { PopularTrack, PopularTracksProps } from './types';
 
 /**
@@ -58,7 +59,7 @@ function TrackRow({
   };
   return (
     <Pressable
-      {...webData({ bloomMediaHeaderPress: 'inset' })}
+      {...webDataSet({ bloomMediaHeaderPress: 'inset' })}
       role="button"
       accessibilityLabel={track.title}
       aria-current={active || undefined}
@@ -183,7 +184,7 @@ function PopularTracksComponent({
       </View>
       {canExpand ? (
         <Pressable
-          {...webData({ bloomMediaHeaderPress: '' })}
+          {...webDataSet({ bloomMediaHeaderPress: '' })}
           role="button"
           accessibilityLabel={expanded ? showLessLabel : showMoreLabel}
           aria-expanded={expanded}

package/src/media-header/StickyMediaTopBar.tsx

@@ -11,8 +11,8 @@ import Animated, {
 import { PlayButton } from '../media-controls/PlayButton';
 import { Text } from '../typography';
 import { useMediaHeaderPaint } from './parts';
-import { clamp01 } from './shared';
 import type { StickyMediaTopBarProps } from './types';
+import { clamp01 } from '../styles/clamp';
 
 /** Built once, at module scope, so the fade, `style` and the a11y props share one node. */
 const FadeView = Animated.createAnimatedComponent(View);

package/src/media-header/parts.tsx

@@ -2,28 +2,22 @@ import React, { useMemo, type ReactNode } from 'react';
 import { Image, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { Avatar } from '../avatar';
+import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiHeart3Fill } from '../icons/remix/RiHeart3Fill';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { useImageResolver } from '../image-resolver/context';
-import { useContainerWidth } from '../listing-details/use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { Meter } from '../stat-bar';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
-import {
-  clamp01,
-  gradientStyle,
-  isUrl,
-  MEDIA_HEADER_CSS,
-  MEDIA_HEADER_STYLE_ID,
-  MEDIA_HEADER_WIDE_MIN_WIDTH,
-  resolveLikedGradient,
-  resolveMediaHeaderPaint,
-  webData,
-  type MediaHeaderPaint,
-} from './shared';
+import { gradientStyle, MEDIA_HEADER_CSS, MEDIA_HEADER_STYLE_ID, MEDIA_HEADER_WIDE_MIN_WIDTH, resolveLikedGradient, resolveMediaHeaderPaint, type MediaHeaderPaint } from './shared';
+import { clamp01 } from '../styles/clamp';
+import { isImageUrl as isUrl } from '../image-resolver';
+import { webDataSet as webData } from '../styles/web-data';
 import type { MediaHeaderPerson, MediaImageSource } from './types';
 
 /** The family's paint for an artwork colour, plus its web sheet. */
@@ -253,7 +247,16 @@ export function Dot({ color }: { color: string }) {
   );
 }
 
-/** A name that is a link when it has a handler, plain text otherwise. Underlines on hover. */
+/**
+ * A name that is a link when it has a handler, plain text otherwise.
+ *
+ * `Button variant="link" underline="hover"` — the underline-on-hover this drew
+ * by hand before `underline` existed. The COLOUR stays the caller's: it is
+ * contrast-picked against the band's artwork, so it overrides the palette's
+ * foreground through `textStyle` rather than taking a tone. `--bloom-btn-ring`
+ * is the web fork's focus-ring custom property, which is how the band hands it
+ * a ring that reads over its own colours.
+ */
 export function InlineLink({
   label,
   onPress,
@@ -276,20 +279,22 @@ export function InlineLink({
       </Text>
     );
   }
-  const style: WebCssStyle = { borderRadius: 4, '--bloom-media-header-ring': ring };
+  const style: WebCssStyle = { '--bloom-btn-ring': ring };
   return (
-    <Pressable
-      {...webData({ bloomMediaHeaderPress: '', bloomMediaHeaderLink: '' })}
-      role="link"
+    <Button
+      variant="link"
+      underline="hover"
+      size="small"
+      textVariant={variant}
+      accessibilityRole="link"
       accessibilityLabel={label}
       onPress={onPress}
       style={style}
+      textStyle={{ color }}
       testID={testID}
     >
-      <Text variant={variant} style={{ color }} {...webData({ bloomMediaHeaderLinkText: '' })}>
-        {label}
-      </Text>
-    </Pressable>
+      {label}
+    </Button>
   );
 }
 
@@ -351,7 +356,7 @@ export function MetaLine({
   );
 }
 
-/** A thin determinate bar with a progressbar role. */
+/** A thin determinate `Meter`. */
 export function ProgressBar({
   value,
   label,
@@ -369,17 +374,17 @@ export function ProgressBar({
 }) {
   const pct = Math.round(clamp01(value) * 100);
   return (
-    <View
-      role="progressbar"
+    <Meter
+      value={pct}
+      max={100}
+      height={4}
+      width={width}
+      fill={fill}
+      track={rail}
       accessibilityLabel={label}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={pct}
-      style={{ width: width ?? '100%', height: 4, borderRadius: 2, backgroundColor: rail, overflow: 'hidden' }}
+      valueText={`${pct}%`}
       testID={testID}
-    >
-      <View style={{ width: `${pct}%`, height: 4, borderRadius: 2, backgroundColor: fill }} />
-    </View>
+    />
   );
 }
 

package/src/media-header/shared.ts

@@ -3,63 +3,30 @@ import { Platform } from 'react-native';
 import { mixColor, resolveButtonRamps } from '../button/shared';
 import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import { parseRgba } from '../theme/color-utils';
+import { quietTextOver } from '../styles/color-contrast';
+import { AA_TEXT } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type { TypeScaleVariant } from '../typography/scale';
 import { TYPE_SCALE } from '../typography/scale';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
+import {
+  AA_TEXT_CONTRAST,
+  contrastRatio,
+  readableOn,
+  relativeLuminance,
+} from '../styles/color-contrast';
 
 export const IS_WEB = Platform.OS === 'web';
 
 /** A header lays its cover beside the text from this container width. */
 export const MEDIA_HEADER_WIDE_MIN_WIDTH = 600;
 
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}
-
-/** `true` for a URL the image can load as-is; anything else is an ImageResolver id. */
-export function isUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
-
-export function clamp01(value: number): number {
-  return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
-}
 
 // ---------------------------------------------------------------------------
 //  Contrast
 // ---------------------------------------------------------------------------
 
 
-
-
-/**
- * Of `candidates`, the colour whose WORST contrast over every surface in
- * `over` is highest — text laid over a gradient has to read at both ends.
- */
-export function pickReadable(over: readonly string[], candidates: readonly string[]): string {
-  let best = candidates[0]!;
-  let bestScore = -1;
-  for (const candidate of candidates) {
-    const score = Math.min(...over.map((surface) => contrastRatio(candidate, surface)));
-    if (score > bestScore) {
-      best = candidate;
-      bestScore = score;
-    }
-  }
-  return best;
-}
-
-/** AA for body text — the bar every label on the band is held to. */
-export const MIN_TEXT_CONTRAST = 4.5;
-
 // ---------------------------------------------------------------------------
 //  The band — every colour a header paints
 // ---------------------------------------------------------------------------
@@ -149,13 +116,13 @@ export function resolveMediaHeaderPaint(
   const bandTop = tinted ?? (dark ? n[800] : n[200]);
   const bandBottom = mixColor(colors.background, bandTop, 0.55);
 
-  const onBand = pickReadable([bandTop, bandBottom], [colors.text, colors.background]);
+  const onBand = readableOn([bandTop, bandBottom], [colors.text, colors.background]);
   // Walk the secondary text towards the band until one more step would fail AA.
   let onBandMuted = onBand;
   for (let t = 0.04; t <= 0.4; t += 0.04) {
     const candidate = mixColor(onBand, bandTop, t);
     const worst = Math.min(contrastRatio(candidate, bandTop), contrastRatio(candidate, bandBottom));
-    if (worst < MIN_TEXT_CONTRAST + 0.25) break;
+    if (worst < AA_TEXT_CONTRAST + 0.25) break;
     onBandMuted = candidate;
   }
 
@@ -168,9 +135,11 @@ export function resolveMediaHeaderPaint(
     onBandMuted,
     bandRail: mixColor(bandTop, onBand, 0.2),
     bar: bandTop,
-    onBar: pickReadable([bandTop], [colors.text, colors.background]),
+    onBar: readableOn([bandTop], [colors.text, colors.background]),
     text: colors.text,
-    textMuted: dark ? n[400] : n[500],
+    // Floored on `card` — the harder of the two fills this label lands on. As
+    // `neutral-500` it measured 4.38:1 on the light card.
+    textMuted: quietTextOver([colors.background, dark ? n[900] : n[100]], colors.text, AA_TEXT),
     wash: dark ? n[800] : n[100],
     border: dark ? n[600] : n[300],
     borderHover: colors.text,

package/src/media-header/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
+import type { BloomIconComponent } from '../icons/icon-component';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
 /** A URL, or an id the registered ImageResolver turns into one. */
@@ -162,7 +163,7 @@ export interface FollowButtonProps extends ToggleBase {
 
 export interface MediaIconButtonProps extends ToggleBase {
   /** A Remix icon component. */
-  icon: React.ComponentType<{ width?: number; height?: number; fill?: string }>;
+  icon: BloomIconComponent;
   accessibilityLabel: string;
   onPress?: () => void;
   /** Glyph size. Default `24`. */

package/src/media-header/use-media-header-scroll.ts

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 
-import { clamp01, IS_WEB } from './shared';
+import { IS_WEB } from './shared';
 import type { MediaHeaderScrollOptions } from './types';
+import { clamp01 } from '../styles/clamp';
 
 /** The bar's progress for a scroll offset: 0 before `start`, 1 from `end`. */
 export function mediaHeaderScrollProgress(offset: number, start: number, end: number): number {

package/src/media-player/FullScreenPlayer.tsx

@@ -2,7 +2,6 @@ import React, { memo, useContext, useMemo, useState } from 'react';
 import { Pressable, ScrollView, View, type LayoutChangeEvent } from 'react-native';
 
 import { resolveButtonRamps } from '../button/shared';
-import { webDataSet } from '../checkbox/shared';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -21,6 +20,7 @@ import { Artwork, TrackText } from './TrackText';
 import { TransportControls } from './TransportControls';
 import { immersiveBase, resolveArtworkTint, verticalGradient } from './shared';
 import type { FullScreenPlayerLabels, FullScreenPlayerProps, LyricsPreview } from './types';
+import { webDataSet } from '../styles/web-data';
 
 /** At and above this measured width the artwork sits beside the controls. */
 export const FULL_SCREEN_PLAYER_WIDE = 900;

package/src/media-player/MiniPlayer.tsx

@@ -2,10 +2,9 @@ import React, { memo, useContext, useMemo, useRef } from 'react';
 import { PanResponder, Pressable, View } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
-import { webDataSet } from '../checkbox/shared';
 import { LikeButton } from '../media-controls/LikeButton';
 import { PlayButton } from '../media-controls/PlayButton';
-import { clamp, resolveMediaControlsPaint } from '../media-controls/shared';
+import { resolveMediaControlsPaint } from '../media-controls/shared';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import { useTheme } from '../theme/use-theme';
 import type { Theme } from '../theme/types';
@@ -16,6 +15,8 @@ import { ImmersiveTheme, immersiveDarkTheme } from './ImmersiveTheme';
 import { Artwork } from './TrackText';
 import { artistNames, IS_WEB, resolveArtworkTint } from './shared';
 import type { MiniPlayerProps } from './types';
+import { webDataSet } from '../styles/web-data';
+import { clamp } from '../styles/clamp';
 
 export const MINI_PLAYER_HEIGHT = 56;
 /** Horizontal travel that counts as a swipe (native). */

package/src/media-player/NowPlayingBar.tsx

@@ -2,7 +2,6 @@ import React, { memo, useMemo, useState } from 'react';
 import { useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
 
 import { resolveButtonRamps } from '../button/shared';
-import { webDataSet } from '../checkbox/shared';
 import { RiFullscreenLine } from '../icons/remix/RiFullscreenLine';
 import { RiMicLine } from '../icons/remix/RiMicLine';
 import { RiPlayListLine } from '../icons/remix/RiPlayListLine';
@@ -18,6 +17,7 @@ import { PlayerIconButton } from './PlayerIconButton';
 import { Artwork, TrackText } from './TrackText';
 import { TransportControls } from './TransportControls';
 import type { NowPlayingBarLabels, NowPlayingBarProps } from './types';
+import { webDataSet } from '../styles/web-data';
 
 export const NOW_PLAYING_BAR_HEIGHT = 80;
 /** At and above: every control. Below: no fullscreen button, a shorter volume slider. */