@oxy.so/bloom 2.10.0 → 2.11.0

package/src/listing-details/ListingPhotoGrid.tsx

@@ -9,6 +9,7 @@ import { useImageResolver } from '../image-resolver/context';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 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 {
@@ -22,11 +23,10 @@ import {
   LISTING_DETAILS_STYLE_ID,
   resolveImageUri,
   resolveListingPalette,
-  webData,
   type ListingPalette,
 } from './shared';
 import type { ListingPhoto, ListingPhotoGridProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * The photos at the top of a listing page.
@@ -93,7 +93,7 @@ function PhotoTile({ photo, uri, label, palette, onPress, style, testID }: Photo
 
   return (
     <Pressable
-      {...webData({ bloomListingPress: 'inset' })}
+      {...webDataSet({ bloomListingPress: 'inset' })}
       accessibilityRole="button"
       accessibilityLabel={label}
       onPress={onPress}
@@ -104,7 +104,7 @@ function PhotoTile({ photo, uri, label, palette, onPress, style, testID }: Photo
     >
       {image}
       <View
-        {...webData({ bloomListingScrim: '' })}
+        {...webDataSet({ bloomListingScrim: '' })}
         pointerEvents="none"
         testID={testID ? `${testID}-scrim` : undefined}
         style={[

package/src/listing-details/PropertyFacts.tsx

@@ -7,7 +7,7 @@ import { Text } from '../typography';
 import { PROPERTY_FACTS_FOUR_COLUMN_MIN_WIDTH, PROPERTY_FACTS_THREE_COLUMN_MIN_WIDTH } from './constants';
 import { resolveListingPalette } from './shared';
 import type { PropertyFactsProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * The key facts of a home for rent or sale: a grid of icon + value + label.

package/src/listing-details/ReviewCard.tsx

@@ -6,6 +6,7 @@ import { useControllableState } from '../hooks/use-controllable-state';
 import { RiStarFill } from '../icons/remix';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 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 {
@@ -13,7 +14,6 @@ import {
   LISTING_DETAILS_CSS,
   LISTING_DETAILS_STYLE_ID,
   resolveListingPalette,
-  webData,
   type ListingPalette,
 } from './shared';
 import type { ReviewCardProps } from './types';
@@ -168,7 +168,7 @@ function ReviewCardComponent({
         </View>
         {truncatable ? (
           <Pressable
-            {...webData({ bloomListingPress: '' })}
+            {...webDataSet({ bloomListingPress: '' })}
             accessibilityRole="button"
             accessibilityLabel={expanded ? showLessLabel : showMoreLabel}
             aria-expanded={expanded}

package/src/listing-details/ReviewSummary.tsx

@@ -9,7 +9,7 @@ import { Text } from '../typography';
 import { REVIEW_SUMMARY_WIDE_MIN_WIDTH } from './constants';
 import { IS_WEB, resolveListingPalette } from './shared';
 import type { ReviewSummaryProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * The top of a reviews section.

package/src/listing-details/shared.ts

@@ -2,6 +2,7 @@ import { Platform } from 'react-native';
 
 import { resolveButtonRamps } from '../button/shared';
 import type { ImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import type { Theme } from '../theme/types';
 
 export const IS_WEB = Platform.OS === 'web';
@@ -59,16 +60,6 @@ export function resolveListingPalette(theme: Theme): ListingPalette {
   };
 }
 
-export function isUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
-
 /** A URL passes through; an id goes to the resolver; nothing resolves to `undefined`. */
 export function resolveImageUri(
   source: string | undefined,
@@ -76,12 +67,7 @@ export function resolveImageUri(
   variant: string,
 ): string | undefined {
   if (!source) return undefined;
-  return isUrl(source) ? source : resolver?.(source, variant) ?? undefined;
-}
-
-/** `dataSet` hooks for the adopted sheet; nothing on native. */
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
+  return isImageUrl(source) ? source : resolver?.(source, variant) ?? undefined;
 }
 
 // ---------------------------------------------------------------------------

package/src/listing-details/types.ts

@@ -1,12 +1,14 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
  * An icon COMPONENT (`RiWifiLine`, not `<RiWifiLine />`). The part sizes and
  * colours it, so a caller cannot pass the wrong size or a colour that ignores
  * the theme.
  */
-export type ListingIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type ListingIcon = BloomIconComponent;
 
 // ---------------------------------------------------------------------------
 //  ListingPhotoGrid

package/src/listing-editor/ListingQualityMeter.tsx

@@ -1,16 +1,16 @@
 import React, { memo, useEffect, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
 
 import { resolveButtonRamps } from '../button/shared';
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { RiCheckboxBlankCircleLine } from '../icons/remix/RiCheckboxBlankCircleLine';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
 import { RiLightbulbFlashLine } from '../icons/remix/RiLightbulbFlashLine';
+import { MeterRing } from '../stat-bar';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -20,10 +20,10 @@ import type { ListingQualityItem, ListingQualityMeterProps } from './types';
  * How complete a listing is: a score ring, a checklist of what is left, and
  * tips.
  *
- *   head      the 72 ring (6 stroke, track neutral-200 / dark neutral-700,
- *             progress accent-500, round cap) with the score (headline-semibold)
- *             in it; title (headline-semibold) and summary (body-regular,
- *             text-secondary) beside it
+ *   head      a 72 `MeterRing` (6 stroke, the shared neutral-200 / dark
+ *             neutral-700 track, accent arc, round cap) with the score
+ *             (headline-semibold) in it; title (headline-semibold) and summary
+ *             (body-regular, text-secondary) beside it
  *   rows      12 apart; a 20 glyph — filled success check when done, an empty
  *             neutral-400 circle when not — the label (body-medium; done rows in
  *             text-secondary) and the tip under an open row (caption-1-regular,
@@ -33,7 +33,8 @@ import type { ListingQualityItem, ListingQualityMeterProps } from './types';
  *             lightbulb glyph and the tips as lines
  *
  * The score defaults to the done items' share of the total weight, rounded.
- * The ring eases on web over 400ms (not under reduced motion); native snaps.
+ * The ring eases on web over 400ms (not under reduced motion); native snaps —
+ * `MeterRing` owns that transition.
  *
  * Accessibility: the ring is a `progressbar` 0..100 named by
  * `accessibilityLabel`; each row's name carries its state ("Add at least 5
@@ -43,14 +44,11 @@ import type { ListingQualityItem, ListingQualityMeterProps } from './types';
 const IS_WEB = Platform.OS === 'web';
 const RING = 72;
 const STROKE = 6;
+const RING_TRANSITION_MS = 400;
 
 const STYLE_ID = 'bloom-listing-quality-web-css';
-const ARC = '[data-bloom-quality-arc]';
 const ROW = '[data-bloom-quality-row]';
 const CSS = `
-${ARC} circle:last-child {
-  transition: stroke-dashoffset 400ms ease-out;
-}
 ${ROW} {
   outline: none;
   cursor: pointer;
@@ -59,11 +57,6 @@ ${ROW}:focus-visible {
   outline: 2px solid var(--bloom-quality-ring, currentColor);
   outline-offset: 2px;
 }
-@media (prefers-reduced-motion: reduce) {
-  ${ARC} circle:last-child {
-    transition: none;
-  }
-}
 `;
 
 /** The weighted share of done items, 0..100, rounded. Pure. */
@@ -79,8 +72,6 @@ export function listingQualityScore(items: ReadonlyArray<ListingQualityItem>): n
 }
 
 interface QualityPaint {
-  track: string;
-  progress: string;
   text: string;
   textSecondary: string;
   done: string;
@@ -93,8 +84,6 @@ function resolveQualityPaint(theme: Theme): QualityPaint {
   const { accent, neutral: n } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
-    track: dark ? n[700] : n[200],
-    progress: accent[500],
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
     done: theme.colors.success,
@@ -125,42 +114,24 @@ function ListingQualityMeterComponent({
   const paint = useMemo(() => resolveQualityPaint(theme), [theme]);
   const score = Math.min(100, Math.max(0, Math.round(scoreProp ?? listingQualityScore(items))));
   const line = summary ?? (score < 50 ? 'Needs work' : score < 80 ? 'Good' : 'Excellent');
-  const radius = (RING - STROKE) / 2;
-  const circumference = 2 * Math.PI * radius;
 
   return (
     <View testID={testID} style={[{ gap: 20 }, style]}>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-        <View
-          role="progressbar"
+        <MeterRing
+          value={score}
+          max={100}
+          size={RING}
+          thickness={STROKE}
+          transitionMs={RING_TRANSITION_MS}
           accessibilityLabel={accessibilityLabel}
-          aria-valuemin={0}
-          aria-valuemax={100}
-          aria-valuenow={score}
-          aria-valuetext={`${formatScore(score)}, ${line}`}
+          valueText={`${formatScore(score)}, ${line}`}
           testID={testID ? `${testID}-ring` : undefined}
-          style={{ width: RING, height: RING, alignItems: 'center', justifyContent: 'center' }}
         >
-          <View {...webDataSet({ bloomQualityArc: '' })} style={{ position: 'absolute', top: 0, left: 0 }}>
-            <Svg width={RING} height={RING} style={{ transform: [{ rotate: '-90deg' }] }}>
-              <Circle cx={RING / 2} cy={RING / 2} r={radius} stroke={paint.track} strokeWidth={STROKE} fill="none" />
-              <Circle
-                cx={RING / 2}
-                cy={RING / 2}
-                r={radius}
-                stroke={paint.progress}
-                strokeWidth={STROKE}
-                fill="none"
-                strokeLinecap={score > 0 ? 'round' : 'butt'}
-                strokeDasharray={`${circumference} ${circumference}`}
-                strokeDashoffset={circumference * (1 - score / 100)}
-              />
-            </Svg>
-          </View>
           <Text variant="headline-semibold" style={{ color: paint.text, fontVariant: ['tabular-nums'] }}>
             {formatScore(score)}
           </Text>
-        </View>
+        </MeterRing>
         <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
           <Text variant="headline-semibold" style={{ color: paint.text }}>
             {title}

package/src/listing-editor/OfferingEditor.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
+import { groupThousands } from '../chart-cards/primitives/format';
 import { DatePicker } from '../date-picker';
 import { RiExchangeLine } from '../icons/remix/RiExchangeLine';
 import { RiKey2Line } from '../icons/remix/RiKey2Line';
@@ -95,10 +96,6 @@ export function pricePerArea(price: string | undefined, area: number | undefined
   return amount / area;
 }
 
-function groupThousands(value: number): string {
-  return String(Math.round(value)).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-}
-
 /** Toggles `kind` in `value.kinds`, keeping every kind's fields. Pure. */
 export function toggleOfferingKind(value: OfferingValue, kind: OfferingKind): OfferingValue {
   const on = value.kinds.includes(kind);

package/src/listing-editor/PropertyTypeSelector.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiArmchairLine } from '../icons/remix/RiArmchairLine';
 import { RiBuilding2Line } from '../icons/remix/RiBuilding2Line';
@@ -13,6 +12,7 @@ import { RiHotelBedLine } from '../icons/remix/RiHotelBedLine';
 import { RiMoreLine } from '../icons/remix/RiMoreLine';
 import { RiStackLine } from '../icons/remix/RiStackLine';
 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 {
@@ -23,6 +23,7 @@ import {
   type SelectionPaint,
 } from './SelectionCard';
 import type { PropertyType, PropertyTypeOption, PropertyTypeSelectorProps } from './types';
+import { DISABLED_OPACITY } from '../styles/tokens';
 
 /**
  * The kind of home, picked from large icon tiles. Single select.
@@ -150,7 +151,7 @@ function PropertyTile<T extends string>({
     paddingRight: inset,
     justifyContent: 'space-between',
     gap: 16,
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-selection-card-ring': paint.ring,
   };
 

package/src/listing-editor/SelectionCard.tsx

@@ -2,16 +2,17 @@ import React, { memo, useEffect, useMemo, type ReactNode } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
 import { resolveButtonRamps } from '../button/shared';
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiCheckLine } from '../icons/remix/RiCheckLine';
 import { RadioIndicator } from '../radio-indicator';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { ListingEditorIcon } from './types';
+import { DISABLED_OPACITY } from '../styles/tokens';
 
 /**
  * The large selectable card the listing editor's pickers are built from.
@@ -174,7 +175,7 @@ function SelectionCardComponent({
     backgroundColor: paint.fill,
     borderWidth,
     borderColor: selected ? paint.borderSelected : highlighted ? paint.borderHover : paint.border,
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     ...(IS_WEB ? { transitionProperty: 'border-color, background-color', transitionDuration: '120ms' } : null),
     ...style,
   };

package/src/listing-editor/types.ts

@@ -3,12 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { ListingCardProps } from '../listing-card/types';
 import type { PropertyType, PropertyTypeOption } from '../stay-filters/types';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** The shared property-type vocabulary lives with the filters; re-exported for this family's own modules. */
 export type { PropertyType, PropertyTypeOption };
 
 /** An icon component: a Remix icon from `@oxy.so/bloom/icons` or one of the same shape. */
-export type ListingEditorIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type ListingEditorIcon = BloomIconComponent;
 
 // ---------------------------------------------------------------------------
 //  OfferingEditor

package/src/lyrics/LyricsParts.tsx

@@ -1,10 +1,10 @@
 import React, { memo } from 'react';
 import { Pressable, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
 import { IS_WEB } from './shared';

package/src/lyrics/LyricsView.tsx

@@ -8,9 +8,9 @@ import {
 } from 'react-native';
 import { useReducedMotion } from 'react-native-reanimated';
 
-import { webDataSet } from '../checkbox/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 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_SCALE } from '../typography/scale';

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}
     >