@oxy.so/bloom 2.10.0 → 2.12.0

package/src/lyrics/shared.ts

@@ -1,11 +1,18 @@
 import { Platform } from 'react-native';
 
-import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps, type RampStop } from '../button/shared';
+import { mixColor, resolveButtonRamps } from '../button/shared';
 import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type { TypeScaleVariant } from '../typography/scale';
 import type { LyricLine, LyricsPalette, LyricsSize } from './types';
-import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
+import {
+  AAA_TEXT_CONTRAST,
+  AA_LARGE_TEXT_CONTRAST,
+  AA_TEXT_CONTRAST,
+  contrastRatio,
+  darkenUntilContrast,
+  relativeLuminance,
+} from '../styles/color-contrast';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -144,23 +151,17 @@ function alphaForContrast(background: string, foreground: string, ratio: number)
 }
 
 const WHITE = '#ffffff';
-/** Contrast the active line keeps against the background. */
-export const LYRICS_ACTIVE_CONTRAST = 7;
-/** Upcoming lines and the footer: AA for body text. */
-export const LYRICS_UPCOMING_CONTRAST = 4.5;
-/** Past lines: AA for large text — they are 24px and up. */
-export const LYRICS_PAST_CONTRAST = 3;
 
 function paletteFrom(background: string, foreground: string, fromArtwork: boolean): LyricsPalette {
   const upcoming = mixColor(
     background,
     foreground,
-    Math.max(0.72, alphaForContrast(background, foreground, LYRICS_UPCOMING_CONTRAST)),
+    Math.max(0.72, alphaForContrast(background, foreground, AA_TEXT_CONTRAST)),
   );
   const past = mixColor(
     background,
     foreground,
-    Math.max(0.5, alphaForContrast(background, foreground, LYRICS_PAST_CONTRAST)),
+    Math.max(0.5, alphaForContrast(background, foreground, AA_LARGE_TEXT_CONTRAST)),
   );
   return {
     background,
@@ -179,27 +180,28 @@ function paletteFrom(background: string, foreground: string, fromArtwork: boolea
 /**
  * The lyrics colours.
  *
- * With a parseable `artworkColor`: a deep shade of it — the first stop of its
- * ramp (from 800 in light mode, 900 in dark) where white keeps
- * {@link LYRICS_ACTIVE_CONTRAST}:1 — under white text. The ramp's 950 stop
- * always clears it, so a pale colour just lands deeper.
+ * With a parseable `artworkColor`: the colour itself, pulled toward black only
+ * as far as it takes for white to keep AAA on it, under white text. Black
+ * clears any light foreground, so a pale colour just lands deeper.
  *
  * Without one: the neutral surface (`neutral-100` light, `neutral-900` dark)
  * under the theme's text colour.
  *
  * Either way upcoming lines are the text colour mixed toward the background no
- * further than 4.5:1 (and at least 72% of it), past lines no further than 3:1
- * (and at least 50%).
+ * further than AA (and at least 72% of it), past lines no further than AA for
+ * large text (and at least 50%).
+ *
+ * It DARKENS the colour rather than walking its generated ramp, which is what
+ * fixed two visible defects: a ramp re-derives every stop's lightness and
+ * chroma from the hue, so a near-black `#101820` came back as a mid-slate ten
+ * times lighter than it went in, and a vivid `#1db98a` lost its red channel
+ * entirely. Scaling every channel by the same factor keeps their ratio, so a
+ * darkened teal is still teal. The pane no longer differs between light and
+ * dark mode, which is right: the artwork does not.
  */
 export function resolveLyricsPalette(theme: Theme, artworkColor?: string | null): LyricsPalette {
-  if (artworkColor && parseRgba(artworkColor)) {
-    const ramp = colorRamp(artworkColor, ACCENT_TABLE);
-    const stops: RampStop[] = theme.isDark ? [900, 950] : [800, 900, 950];
-    const background =
-      stops.map((stop) => ramp[stop]).find((c) => contrastRatio(c, WHITE) >= LYRICS_ACTIVE_CONTRAST) ??
-      ramp[950];
-    return paletteFrom(background, WHITE, true);
-  }
+  const shade = artworkColor ? darkenUntilContrast(artworkColor, WHITE, AAA_TEXT_CONTRAST) : null;
+  if (shade) return paletteFrom(shade.color, WHITE, true);
   const { neutral } = resolveButtonRamps(theme);
   return paletteFrom(theme.isDark ? neutral[900] : neutral[100], theme.colors.text, false);
 }

package/src/map-marker/MapListingPreview.tsx

@@ -8,6 +8,7 @@ import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiHeart3Fill } from '../icons/remix/RiHeart3Fill';
 import { RiHeart3Line } from '../icons/remix/RiHeart3Line';
 import { useImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { ListingFacts, ListingOfferings, ListingPriceLines } from '../listing-card/parts';
 import { resolvePriceLines } from '../listing-card/shared';
 import { Rating } from '../rating';
@@ -57,16 +58,6 @@ const COMPACT_PHOTO_WIDTH = 112;
 const HEART_SIZE = 24;
 const INSET = 8;
 
-function isUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
-
 function FavoriteButton({
   favorite,
   label,
@@ -147,7 +138,7 @@ function MapListingPreviewComponent({
   }, []);
 
   const compact = layout === 'compact';
-  const uri = image ? (isUrl(image) ? image : resolver?.(image, imageVariant)) : undefined;
+  const uri = image ? (isImageUrl(image) ? image : resolver?.(image, imageVariant)) : undefined;
   const showRating = rating !== undefined;
 
   const cardStyle: WebCssStyle = {

package/src/map-marker/MapSearchAreaButton.tsx

@@ -1,12 +1,7 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { Pressable } from 'react-native';
 
-import {
-  CHECKBOX_GLYPH_CSS,
-  CHECKBOX_GLYPH_STYLE_ID,
-  CheckboxGlyph,
-  resolveCheckboxPaint,
-} from '../checkbox/shared';
+import { CHECKBOX_GLYPH_CSS, CHECKBOX_GLYPH_STYLE_ID, CheckboxGlyph, resolveCheckboxPaint } from '../checkbox/shared';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
@@ -16,6 +11,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { MAP_MARKER_CSS, MAP_MARKER_STYLE_ID, mapWebData, resolveMapMarkerPaint } from './shared';
 import type { MapSearchAreaButtonProps } from './types';
+import { DISABLED_OPACITY } from '../styles/tokens';
 
 /**
  * The floating pill over a map that ties the results to the visible area.
@@ -53,7 +49,7 @@ function MapSearchAreaButtonComponent(props: MapSearchAreaButtonProps) {
     borderWidth: 1,
     borderColor: paint.border,
     backgroundColor: hovered && !disabled ? paint.hoverSurface : paint.surface,
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-map-ring': paint.ring,
     ...bloomShadowStyle('m'),
   };

package/src/media-card/AudiobookCard.tsx

@@ -4,8 +4,9 @@ import { RiBookOpenFill } from '../icons/remix/RiBookOpenFill';
 import { useTheme } from '../theme/use-theme';
 import { MediaCard } from './MediaCard';
 import { ListenProgress } from './parts';
-import { clampFraction, joinMeta, resolveMediaCardPaint } from './shared';
+import { joinMeta, resolveMediaCardPaint } from './shared';
 import type { AudiobookCardProps } from './types';
+import { clamp01 } from '../styles/clamp';
 
 /** A book cover is 2:3. */
 export const AUDIOBOOK_ASPECT_RATIO = 2 / 3;
@@ -33,7 +34,7 @@ function AudiobookCardComponent({
   const paint = useMemo(() => resolveMediaCardPaint(theme), [theme]);
   const row = layout === 'row';
   const narratedBy = narrator ? `${narratorPrefix} ${narrator}` : undefined;
-  const heard = clampFraction(progress);
+  const heard = clamp01(progress);
   return (
     <MediaCard
       {...rest}

package/src/media-card/EpisodeCard.tsx

@@ -8,8 +8,9 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { MediaCard } from './MediaCard';
 import { ListenProgress } from './parts';
-import { clampFraction, joinMeta, resolveMediaCardPaint } from './shared';
+import { joinMeta, resolveMediaCardPaint } from './shared';
 import type { EpisodeCardProps, MediaCardSize } from './types';
+import { clamp01 } from '../styles/clamp';
 
 /** An episode row's cover side. */
 export const EPISODE_ROW_ARTWORK: Record<MediaCardSize, number> = { large: 112, medium: 96, small: 72 };
@@ -17,7 +18,7 @@ export const EPISODE_ROW_ARTWORK: Record<MediaCardSize, number> = { large: 112,
 /** What the progress line draws: the check, the bar, or nothing. */
 export function episodeProgressState(played: boolean, progress: number | undefined): 'played' | 'progress' | 'none' {
   if (played) return 'played';
-  return clampFraction(progress) > 0 ? 'progress' : 'none';
+  return clamp01(progress) > 0 ? 'progress' : 'none';
 }
 
 /**

package/src/media-card/FriendActivityCard.tsx

@@ -8,10 +8,11 @@ import { NowPlayingIndicator } from '../media-controls';
 import { Box as SkeletonBox, Circle as SkeletonCircle } from '../skeleton';
 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 { Artwork, CardLink, useMediaCardCss } from './parts';
-import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS, webData } from './shared';
+import { composeName, resolveMediaCardPaint, ROW_PADDING, ROW_RADIUS } from './shared';
 import type { FriendActivityCardProps } from './types';
 
 const AVATAR = 40;
@@ -86,7 +87,7 @@ function FriendActivityCardComponent({
 
   return (
     <View
-      {...webData({ bloomMediaCard: 'activity', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
+      {...webDataSet({ bloomMediaCard: 'activity', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
       style={[rootStyle, style]}
       testID={testID}
     >

package/src/media-card/GenreCard.tsx

@@ -4,6 +4,7 @@ import { Image, View } from 'react-native';
 import { useImageResolver } from '../image-resolver/context';
 import { Box as SkeletonBox } from '../skeleton';
 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 type { TypeScaleVariant } from '../typography/scale';
@@ -16,7 +17,6 @@ import {
   resolveCoverTint,
   resolveMediaCardPaint,
   TILE_ARTWORK,
-  webData,
 } from './shared';
 import type { GenreCardProps, MediaCardSize } from './types';
 
@@ -81,7 +81,7 @@ function GenreCardComponent({
 
   return (
     <View
-      {...webData({ bloomMediaCard: 'genre', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
+      {...webDataSet({ bloomMediaCard: 'genre', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
       style={[rootStyle, style]}
       testID={testID}
     >

package/src/media-card/MediaCard.tsx

@@ -4,6 +4,7 @@ import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { PlayButton } from '../media-controls';
 import { Box as SkeletonBox, Circle as SkeletonCircle } from '../skeleton';
 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 type { TypeScaleVariant } from '../typography/scale';
@@ -21,7 +22,6 @@ import {
   TILE_ARTWORK,
   TILE_PADDING,
   TILE_RADIUS,
-  webData,
 } from './shared';
 import type { MediaCardLayout, MediaCardProps, MediaCardSize } from './types';
 
@@ -240,7 +240,7 @@ function MediaCardComponent(props: MediaCardProps) {
   const play =
     visibility === 'none' ? null : (
       <View
-        {...webData(visibility === 'hover' ? { bloomMediaCardReveal: 'hover', bloomMediaCardPlay: '' } : { bloomMediaCardPlay: '' })}
+        {...webDataSet(visibility === 'hover' ? { bloomMediaCardReveal: 'hover', bloomMediaCardPlay: '' } : { bloomMediaCardPlay: '' })}
         style={
           row
             ? { position: 'absolute', top: 0, left: 0, width: box.width, height: box.height, alignItems: 'center', justifyContent: 'center' }
@@ -388,7 +388,7 @@ function MediaCardComponent(props: MediaCardProps) {
 
   return (
     <View
-      {...webData({
+      {...webDataSet({
         bloomMediaCard: layout,
         ...(interactive ? { bloomMediaCardHover: '' } : null),
         ...(menuOpen ? { bloomMediaCardMenuOpen: '' } : null),

package/src/media-card/QuickAccessTile.tsx

@@ -5,6 +5,7 @@ import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
 import { NowPlayingIndicator, PlayButton } from '../media-controls';
 import { Box as SkeletonBox } from '../skeleton';
 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 { Artwork, CardLink, useMediaCardCss } from './parts';
@@ -15,7 +16,6 @@ import {
   QUICK_TILE_RADIUS,
   resolveMediaCardPaint,
   resolvePlayVisibility,
-  webData,
 } from './shared';
 import type { QuickAccessTileProps } from './types';
 
@@ -86,7 +86,7 @@ function QuickAccessTileComponent({
 
   return (
     <View
-      {...webData({ bloomMediaCard: 'quick', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
+      {...webDataSet({ bloomMediaCard: 'quick', ...(onPress || href ? { bloomMediaCardHover: '' } : null) })}
       style={[rootStyle, style]}
       testID={testID}
     >
@@ -116,13 +116,13 @@ function QuickAccessTileComponent({
           pointerEvents="box-none"
         >
           {current && (swap || visibility === 'none') ? (
-            <View pointerEvents="none" {...webData(swap ? { bloomMediaCardConceal: '' } : {})}>
+            <View pointerEvents="none" {...webDataSet(swap ? { bloomMediaCardConceal: '' } : {})}>
               <NowPlayingIndicator playing={playing} size={14} testID={testID ? `${testID}-now-playing` : undefined} />
             </View>
           ) : null}
           {visibility !== 'none' ? (
             <View
-              {...webData(swap || visibility === 'hover' ? { bloomMediaCardReveal: 'hover' } : {})}
+              {...webDataSet(swap || visibility === 'hover' ? { bloomMediaCardReveal: 'hover' } : {})}
               style={{ position: 'absolute', top: 0, left: 0 }}
               testID={testID ? `${testID}-play` : undefined}
             >

package/src/media-card/RecapCard.tsx

@@ -6,10 +6,11 @@ import { RiShareForwardLine } from '../icons/remix/RiShareForwardLine';
 import { Box as SkeletonBox } from '../skeleton';
 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 { Artwork, CoverGradient, useMediaCardCss } from './parts';
-import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, webData, type CoverTint } from './shared';
+import { IS_WEB, RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, type CoverTint } from './shared';
 import type { RecapCardProps } from './types';
 
 /**
@@ -33,7 +34,7 @@ function SharePill({ label, onPress, tint, testID }: { label: string; onPress: (
   };
   return (
     <Pressable
-      {...webData({ bloomMediaCardShare: '' })}
+      {...webDataSet({ bloomMediaCardShare: '' })}
       role="button"
       accessibilityLabel={label}
       onPress={onPress}
@@ -90,7 +91,7 @@ function RecapCardComponent({
 
   return (
     <View
-      {...webData({ bloomMediaCard: 'recap' })}
+      {...webDataSet({ bloomMediaCard: 'recap' })}
       style={[{ position: 'relative', borderRadius: RECAP_RADIUS, overflow: 'hidden', backgroundColor: tint.top }, style]}
       testID={testID}
     >

package/src/media-card/ShareCard.tsx

@@ -6,8 +6,9 @@ import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Artwork, CoverGradient } from './parts';
-import { RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint, webData } from './shared';
+import { RECAP_RADIUS, resolveCoverTint, resolveMediaCardPaint } from './shared';
 import type { ShareCardProps } from './types';
+import { webDataSet } from '../styles/web-data';
 
 /**
  * A track laid out to be shared as an image.
@@ -40,7 +41,7 @@ function ShareCardComponent({
 
   return (
     <View
-      {...webData({ bloomMediaCard: 'share' })}
+      {...webDataSet({ bloomMediaCard: 'share' })}
       style={[{ width: 320, borderRadius: RECAP_RADIUS, overflow: 'hidden', backgroundColor: tint.top }, style]}
       testID={testID}
     >

package/src/media-card/SongCard.tsx

@@ -6,8 +6,9 @@ import { RiMusic2Fill } from '../icons/remix/RiMusic2Fill';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { MediaCard, SUBTITLE_VARIANT } from './MediaCard';
-import { IS_WEB, resolveMediaCardPaint, webData } from './shared';
+import { IS_WEB, resolveMediaCardPaint } from './shared';
 import type { SongCardArtist, SongCardProps } from './types';
+import { webDataSet } from '../styles/web-data';
 
 export function normaliseArtists(
   artists: SongCardProps['artists'],
@@ -60,7 +61,7 @@ function SongCardComponent({
           <React.Fragment key={`${index}-${artist.name}`}>
             {index > 0 ? ', ' : null}
             <Text
-              {...webData({ bloomMediaCardArtist: '' })}
+              {...webDataSet({ bloomMediaCardArtist: '' })}
               role="link"
               accessibilityLabel={artist.name}
               variant={variant}
@@ -80,7 +81,7 @@ function SongCardComponent({
   const trailing = row ? (
     <>
       {onLikedChange ? (
-        <View {...webData(liked ? {} : { bloomMediaCardReveal: IS_WEB ? 'hover' : '' })}>
+        <View {...webDataSet(liked ? {} : { bloomMediaCardReveal: IS_WEB ? 'hover' : '' })}>
           <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" accessibilityLabel={`Save ${title} to Your Library`} />
         </View>
       ) : null}

package/src/media-card/parts.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
-import { Button } from '../button';
+import { Button, GlyphButton } from '../button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,23 +20,23 @@ import {
 } from '../dropdown-menu';
 import { RiMoreFill } from '../icons/remix/RiMoreFill';
 import { useImageResolver } from '../image-resolver/context';
+import { Meter } from '../stat-bar';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
+import { clamp01 } from '../styles/clamp';
 import { useTheme } from '../theme/use-theme';
 import {
-  clampFraction,
   IS_WEB,
   MEDIA_CARD_CSS,
   MEDIA_CARD_STYLE_ID,
   resolveArtworkUri,
   resolveCoverTint,
-  webData,
   type MediaCardPaint,
 } from './shared';
 import type { MediaCardMenuItem } from './types';
-
-type GlyphComponent = React.ComponentType<{ width?: number; height?: number; fill?: string }>;
+import type { BloomIconComponent } from '../icons/icon-component';
 
 export function useMediaCardCss(): void {
   React.useEffect(() => {
@@ -79,7 +79,7 @@ export interface ArtworkProps {
   /** Paints a generated gradient cover when there is no image. */
   color?: string;
   /** Glyph on the generated / placeholder cover. */
-  icon?: GlyphComponent;
+  icon?: BloomIconComponent;
   /** Replaces the drawn content. */
   children?: React.ReactNode;
   paint: MediaCardPaint;
@@ -215,8 +215,8 @@ export function Mosaic({
 // ---------------------------------------------------------------------------
 
 /**
- * How much of an episode or book has been heard: a 4px pill rail, accent fill.
- * A `progressbar` named by `label`, valued 0..100.
+ * How much of an episode or book has been heard: a 4px pill `Meter`, accent
+ * fill. A `progressbar` named by `label`, valued 0..100.
  */
 export function ListenProgress({
   value,
@@ -233,35 +233,24 @@ export function ListenProgress({
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
-  const pct = Math.round(clampFraction(value) * 100);
+  const pct = Math.round(clamp01(value) * 100);
   return (
-    <View
-      role="progressbar"
+    <Meter
+      value={pct}
+      max={100}
+      height={4}
+      radius={borderRadius.full}
+      width={width}
+      fill={paint.fill}
+      track={paint.rail}
       accessibilityLabel={label}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={pct}
-      aria-valuetext={`${pct}%`}
+      valueText={`${pct}%`}
       style={[
-        {
-          height: 4,
-          width,
-          flexGrow: width === undefined ? 1 : 0,
-          flexShrink: 1,
-          minWidth: 24,
-          borderRadius: borderRadius.full,
-          backgroundColor: paint.rail,
-          overflow: 'hidden',
-        },
+        { flexGrow: width === undefined ? 1 : 0, flexShrink: 1, minWidth: 24 },
         style,
       ]}
       testID={testID}
-    >
-      <View
-        style={{ width: `${pct}%`, height: '100%', borderRadius: borderRadius.full, backgroundColor: paint.fill }}
-        testID={testID ? `${testID}-fill` : undefined}
-      />
-    </View>
+    />
   );
 }
 
@@ -305,7 +294,7 @@ export function CardLink({ name, onPress, href, onLongPress, selected = false, r
   const interactive = Boolean(onPress || href);
   return (
     <Pressable
-      {...webData({ bloomMediaCardLink: '' })}
+      {...webDataSet({ bloomMediaCardLink: '' })}
       {...(IS_WEB && href ? { href } : null)}
       {...(IS_WEB && selected ? { 'aria-current': 'true' } : null)}
       role={href ? 'link' : interactive ? 'button' : undefined}
@@ -354,16 +343,17 @@ export function CardMenu({
   const name = `${label} for ${subject}`;
   return (
     <View
-      {...webData({ bloomMediaCardMenu: '', ...(reveal ? { bloomMediaCardReveal: 'hover' } : null) })}
+      {...webDataSet({ bloomMediaCardMenu: '', ...(reveal ? { bloomMediaCardReveal: 'hover' } : null) })}
       style={{ flexShrink: 0 }}
     >
       <DropdownMenu open={open} onOpenChange={onOpenChange}>
         <DropdownMenuTrigger asChild label={name}>
-          <Button
-            variant="ghost"
-            size="small"
-            iconOnly
-            leadingIcon={RiMoreFill}
+          {/* Neutral and transparent — `Button variant="ghost"` painted an
+              accent wash on a card that owns its own surface. */}
+          <GlyphButton
+            size={32}
+            icon={RiMoreFill}
+            glyphSize={20}
             accessibilityLabel={name}
             testID={testID ? `${testID}-menu` : undefined}
           />

package/src/media-card/shared.ts

@@ -1,12 +1,18 @@
 import { Platform } from 'react-native';
 
-import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps, type RampStop } from '../button/shared';
+import { mixColor, resolveButtonRamps } from '../button/shared';
 import type { ImageResolver } from '../image-resolver/context';
-import { isUrl } from '../listing-card/shared';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type { MediaCardLayout, MediaCardPlayButton, MediaCardSize } from './types';
-import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
+import {
+  AA_TEXT_CONTRAST,
+  contrastRatio,
+  darken,
+  darkenUntilContrast,
+  relativeLuminance,
+} from '../styles/color-contrast';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -86,7 +92,7 @@ export function resolveArtworkUri(
   variant?: string,
 ): string | undefined {
   if (!source) return undefined;
-  return isUrl(source) ? source : (resolver?.(source, variant) ?? undefined);
+  return isImageUrl(source) ? source : (resolver?.(source, variant) ?? undefined);
 }
 
 // ---------------------------------------------------------------------------
@@ -103,21 +109,10 @@ export function joinMeta(parts: ReadonlyArray<string | false | null | undefined>
   return parts.filter((part): part is string => typeof part === 'string' && part.trim() !== '').join(' · ');
 }
 
-export function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0;
-  return Math.min(1, Math.max(0, value));
-}
-
 // ---------------------------------------------------------------------------
 //  Contrast
 // ---------------------------------------------------------------------------
 
-
-
-
-/** Text drawn over a generated cover must clear this. */
-export const COVER_TEXT_CONTRAST = 4.5;
-
 export interface CoverTint {
   /** Gradient top (also the solid fill). */
   top: string;
@@ -129,30 +124,38 @@ export interface CoverTint {
   textMuted: string;
 }
 
-const TINT_STOPS: ReadonlyArray<RampStop> = [500, 600, 700, 800, 900];
+/** How much darker the gradient's bottom is than its top. */
+const COVER_GRADIENT_FALLOFF = 0.25;
 
 /**
  * The colours of a cover generated from an artwork colour.
  *
- * The fill is the colour's own ramp, stepped darker (500 → 900) until light
- * text on it clears {@link COVER_TEXT_CONTRAST}; the gradient's bottom is two
- * stops further down. Without a colour — or with one that does not parse — the
- * cover is the theme's neutral 700 → 900, which clears it in both modes.
+ * The fill is the artwork colour itself, pulled toward black only as far as it
+ * takes for BOTH foregrounds — the title and the muted line under it — to clear
+ * AA on it; the gradient's bottom is a further 25% darker, so the text keeps its
+ * contrast all the way down. Without a colour — or with one that does not parse
+ * — the cover is the theme's neutral 700 → 900, which clears it in both modes.
+ *
+ * Checking `textMuted` too is what the previous implementation did not do, and
+ * it painted a muted line at 4.18:1 over the palest artwork colours.
+ *
+ * It DARKENS the colour rather than walking its generated ramp. A ramp
+ * re-derives each stop's lightness and chroma from the hue, so a near-black
+ * artwork colour used to come back as a mid-slate and a vivid one lost a
+ * channel; scaling keeps the channels' ratio, so a darkened teal is still teal.
  */
 export function resolveCoverTint(theme: Theme, color?: string): CoverTint {
   const { neutral: n } = resolveButtonRamps(theme);
   const text = n[50];
   const textMuted = mixColor(n[50], n[300], 0.35);
-  if (color && parseRgba(color)) {
-    const ramp = colorRamp(color, ACCENT_TABLE);
-    const index = TINT_STOPS.findIndex((stop) => contrastRatio(ramp[stop], text) >= COVER_TEXT_CONTRAST);
-    const at = index === -1 ? TINT_STOPS.length - 1 : index;
-    const stop = TINT_STOPS[at] as RampStop;
-    const bottom = TINT_STOPS[Math.min(at + 2, TINT_STOPS.length - 1)] as RampStop;
-    // The ramp's 900 can still be light for a very pale input; fall back.
-    if (contrastRatio(ramp[stop], text) >= COVER_TEXT_CONTRAST) {
-      return { top: ramp[stop], bottom: ramp[bottom] === ramp[stop] ? ramp[950] : ramp[bottom], text, textMuted };
-    }
+  const shade = color ? darkenUntilContrast(color, [text, textMuted], AA_TEXT_CONTRAST) : null;
+  if (shade) {
+    return {
+      top: shade.color,
+      bottom: darken(shade.color, COVER_GRADIENT_FALLOFF) as string,
+      text,
+      textMuted,
+    };
   }
   return { top: n[700], bottom: n[900], text, textMuted };
 }
@@ -215,10 +218,6 @@ export function resolveMediaCardPaint(theme: Theme): MediaCardPaint {
   };
 }
 
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}
-
 // ---------------------------------------------------------------------------
 //  Web CSS — hover washes, the hover reveal and focus rings have no inline
 //  spelling, so they hang off `dataSet` attributes in one adopted sheet.