@oxy.so/bloom 2.10.0 → 2.11.0

package/src/input-group/InputGroup.tsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 
-import { useTheme } from '../theme/use-theme';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { Text } from '../typography';
 import {
@@ -19,7 +18,7 @@ import {
   TEXT_FIELD_TRAILING_GAP,
   TEXT_FIELD_WEB_TRANSITION,
   resolveShellPaint,
-  resolveTextFieldPalette,
+  useTextFieldPalette,
   type TextFieldPalette,
   type TextFieldSize,
 } from '../text-field/shared';
@@ -75,10 +74,9 @@ const InputGroupAddonComponent = function InputGroupAddon({
   style,
   testID,
 }: InputGroupAddonProps) {
-  const theme = useTheme();
   const group = useContext(InputGroupContext);
   const position = useContext(AddonPositionContext);
-  const fallbackPalette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const fallbackPalette = useTextFieldPalette();
   const palette = group?.palette ?? fallbackPalette;
   const cfg = SIZE_CONFIG[group?.size ?? 'md'];
   const leading = position === 'leading';
@@ -157,13 +155,12 @@ const InputGroupComponent = function InputGroup({
   style,
   testID,
 }: InputGroupProps) {
-  const theme = useTheme();
   const cfg = SIZE_CONFIG[size];
   const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } =
     useInteractionState();
 
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   const { backgroundColor, borderColor } = resolveShellPaint(palette, {
     hovered,
     focused,

package/src/label/Label.tsx

@@ -1,13 +1,12 @@
 import React, { memo, useMemo } from 'react';
 import { Platform } from 'react-native';
 
-import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography';
 import {
   TEXT_FIELD_LEADING_GAP,
   TEXT_FIELD_STACK_GAP,
-  resolveTextFieldPalette,
+  useTextFieldPalette,
 } from '../text-field/shared';
 import type { LabelProps } from './types';
 
@@ -39,8 +38,7 @@ const LabelComponent = function Label({
   style,
   testID,
 }: LabelProps) {
-  const theme = useTheme();
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
 
   const webProps: Record<string, unknown> =
     IS_WEB ? { htmlFor: htmlFor ?? nativeID } : {};

package/src/listing-actions/ApplicationChecklist.tsx

@@ -4,13 +4,13 @@ import { View } from 'react-native';
 import { ActionCardShell } from '../booking/ActionCard';
 import { Badge } from '../badge';
 import { Button, type ButtonIconComponent } from '../button';
-import { resolveButtonRamps } from '../button/shared';
 import { RiCheckboxBlankCircleLine } from '../icons/remix/RiCheckboxBlankCircleLine';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
 import { RiCloseCircleFill } from '../icons/remix/RiCloseCircleFill';
 import { RiEyeLine } from '../icons/remix/RiEyeLine';
 import { RiTimeLine } from '../icons/remix/RiTimeLine';
 import { RiUploadLine } from '../icons/remix/RiUploadLine';
+import { Meter } from '../stat-bar';
 import { resolveAccentColors } from '../theme/accent-colors';
 import { Text } from '../typography';
 import { APPLICATION_CHECKLIST_MAX_WIDTH, APPLICATION_ITEM_STATUS } from './constants';
@@ -34,8 +34,8 @@ export function isApplicationItemReady(item: ApplicationItem): boolean {
  *
  *   header     title headline-semibold; "{done} of {total} ready"
  *              body-2-regular text-secondary on the right
- *   progress   12 below; 6 tall, radius 3, neutral-200 / 700 track, accent-500
- *              fill — a `progressbar` over uploaded + verified items
+ *   progress   12 below; a 6-tall `Meter` — the shared neutral-200 / 700 track
+ *              and accent fill — a `progressbar` over uploaded + verified items
  *   rows       16 below, 1px hairlines between; each: a 20 status glyph
  *              (missing neutral, in review accent, verified success, rejected
  *              error), title body-medium + subtle status `Badge`, the
@@ -56,7 +56,6 @@ function ApplicationChecklistComponent({
 }: ApplicationChecklistProps) {
   const palette = useActionPalette();
   const { theme } = palette;
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
   const done = items.filter(isApplicationItemReady).length;
   const total = items.length;
@@ -97,32 +96,15 @@ function ApplicationChecklistComponent({
         </Text>
       </View>
 
-      <View
-        accessibilityRole="progressbar"
+      <Meter
+        value={done}
+        max={total}
+        height={6}
         accessibilityLabel={title ?? 'Application progress'}
-        aria-valuemin={0}
-        aria-valuemax={total}
-        aria-valuenow={done}
-        aria-valuetext={progressText}
+        valueText={progressText}
         testID={id('progress')}
-        style={{
-          marginTop: 12,
-          height: 6,
-          borderRadius: 3,
-          overflow: 'hidden',
-          backgroundColor: theme.isDark ? neutral[700] : neutral[200],
-        }}
-      >
-        <View
-          testID={id('progress-fill')}
-          style={{
-            width: `${total > 0 ? (done / total) * 100 : 0}%`,
-            height: '100%',
-            borderRadius: 3,
-            backgroundColor: accent[500],
-          }}
-        />
-      </View>
+        style={{ marginTop: 12 }}
+      />
 
       <View style={{ marginTop: 8 }}>
         {items.map((item, index) => {

package/src/listing-actions/ExchangeProposalCard.tsx

@@ -29,7 +29,8 @@ const ALL_MODES: readonly ExchangeMode[] = ['swap', 'host', 'both'];
  *              (`layout="auto"`) they stack as 72-square rows and the glyph
  *              turns 90°
  *   box        20 below; DATES | GUESTS cells, `BookingCard`'s box
- *   modes      16 below; `Chip`s (medium, `selected` for the chosen mode)
+ *   modes      16 below; `Chip`s (xl — 32 tall, a target rather than a tag —
+ *              `selected` for the chosen mode)
  *   button     16 below; "Propose a swap" primary large, full width
  *   note       12 below; centred
  */
@@ -173,7 +174,7 @@ function ExchangeProposalCardComponent({
           {modes.map((value) => (
             <Chip
               key={value}
-              size="medium"
+              size="xl"
               variant="outlined"
               selected={mode === value}
               onPress={onModeChange ? () => onModeChange(value) : undefined}

package/src/listing-actions/ViewingScheduler.tsx

@@ -33,7 +33,7 @@ export function slotGrid(width: number): { columns: number; chipWidth: number }
  *   title      headline-semibold
  *   days       16 below; a horizontal scroll of 56-wide day tiles, 8 apart,
  *              radius 12, weekday caption-1-regular over the date
- *              headline-semibold; unavailable days at 40% and not pressable
+ *              headline-semibold; unavailable days at the disabled opacity and not pressable
  *   times      20 below; caption label, then a grid of 36-tall pill chips at
  *              least 76 wide, 8 apart, filling the row
  *   selected   INVERTED — text-primary fill, surface ink — on days and times

package/src/listing-actions/mortgage.ts

@@ -1,3 +1,5 @@
+import { groupThousands } from '../chart-cards/primitives/format';
+
 import type { MortgageInput, MortgageResult } from './types';
 
 function finite(value: number, fallback = 0): number {
@@ -40,11 +42,14 @@ export function computeMortgage({ price, downPayment, years, annualRate }: Mortg
   };
 }
 
-/** Rounded, grouped digits without a currency: 1234567.8 → "1,234,568". */
+/**
+ * Rounded, grouped digits without a currency: 1234567.8 → "1,234,568".
+ *
+ * `groupThousands` renders a non-finite number as `"NaN"`; a mortgage field
+ * reads `0` instead, which is why `finite()` stays here.
+ */
 export function formatPlainAmount(value: number): string {
-  const rounded = Math.round(finite(value));
-  const sign = rounded < 0 ? '-' : '';
-  return sign + String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return groupThousands(finite(value));
 }
 
 /** "250,000" / "€ 250.000" → 250000; anything without digits → 0. */

package/src/listing-actions/parts.tsx

@@ -2,18 +2,19 @@ import React, { useEffect, useMemo, type ReactNode } from 'react';
 import { Image, Platform, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { isImageUrl, resolveBookingPalette, BOOKING_FIELD_RADIUS, BOOKING_STYLE_ID, BOOKING_WEB_CSS } from '../booking/shared';
+import { resolveBookingPalette, BOOKING_FIELD_RADIUS, BOOKING_STYLE_ID, BOOKING_WEB_CSS } from '../booking/shared';
 import { mixColor, resolveButtonRamps } from '../button/shared';
 import { chartHueTone } from '../chart-cards/palette';
 import { pieSectorAngles, sectorPath } from '../chart-cards/polar-geometry';
-import { webDataSet } from '../checkbox/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiHome4Line } from '../icons/remix/RiHome4Line';
 import { RiInformationLine } from '../icons/remix/RiInformationLine';
 import { useImageResolver } from '../image-resolver/context';
-import { borderRadius } from '../styles/tokens';
+import { DISABLED_OPACITY, borderRadius } from '../styles/tokens';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { isImageUrl } from '../image-resolver';
+import { webDataSet } from '../styles/web-data';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -176,7 +177,7 @@ export function SelectChip({
     borderWidth: 1,
     borderColor: selected ? palette.text : palette.fieldBorder,
     backgroundColor: background,
-    opacity: disabled ? 0.4 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     ...(shape === 'day'
       ? { width: 56, paddingTop: 8, paddingBottom: 8, borderRadius: BOOKING_FIELD_RADIUS, gap: 2 }
       : { height: 36, paddingLeft: 12, paddingRight: 12, borderRadius: borderRadius.full }),

package/src/listing-card/FavoriteButton.tsx

@@ -2,9 +2,11 @@ import React, { memo, useMemo } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 
 import { RiHeart3Fill } from '../icons/remix/RiHeart3Fill';
+import { DISABLED_OPACITY } from '../styles/tokens';
 import { RiHeart3Line } from '../icons/remix/RiHeart3Line';
 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 {
   HEART_SCRIM_OPACITY,
@@ -12,7 +14,6 @@ import {
   LISTING_CARD_CSS,
   LISTING_CARD_STYLE_ID,
   resolveListingCardPaint,
-  webData,
 } from './shared';
 import type { FavoriteButtonProps } from './types';
 
@@ -51,13 +52,13 @@ function FavoriteButtonComponent({
     height: box,
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: disabled ? 0.6 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-listing-card-ring': paint.ring,
   };
 
   return (
     <Pressable
-      {...webData({ bloomFavoriteButton: '' })}
+      {...webDataSet({ bloomFavoriteButton: '' })}
       role="button"
       accessibilityLabel={favorite ? removeLabel : saveLabel}
       aria-pressed={favorite}

package/src/listing-card/ListingCard.tsx

@@ -22,6 +22,7 @@ import { Box as SkeletonBox } from '../skeleton';
 import { borderRadius } from '../styles/tokens';
 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 { OfferingBadge } from '../offering-badge/OfferingBadge';
@@ -54,7 +55,6 @@ import {
   STATUS_WASH_OPACITY,
   statusLabelFor,
   uniqueOfferings,
-  webData,
   type ListingCardPaint,
 } from './shared';
 import type { ListingCardLayout, ListingCardProps } from './types';
@@ -176,7 +176,7 @@ function PhotoTrack({
       {width > 0 ? (
         <ScrollView
           ref={scrollRef}
-          {...webData({ bloomListingCardTrack: '' })}
+          {...webDataSet({ bloomListingCardTrack: '' })}
           horizontal
           pagingEnabled
           showsHorizontalScrollIndicator={false}
@@ -190,7 +190,7 @@ function PhotoTrack({
             return (
               <View
                 key={`${index}-${photo}`}
-                {...webData({ bloomListingCardSlide: '' })}
+                {...webDataSet({ bloomListingCardSlide: '' })}
                 style={{ width, height: '100%' }}
               >
                 {uri ? (
@@ -237,7 +237,7 @@ function Dots({ count, active, paint }: { count: number; active: number; paint:
       {slots.map((slot) => (
         <View
           key={slot.index}
-          {...webData({ bloomListingCardDot: slot.active ? 'active' : '' })}
+          {...webDataSet({ bloomListingCardDot: slot.active ? 'active' : '' })}
           style={{
             width: slot.size,
             height: slot.size,
@@ -495,7 +495,7 @@ function CompactRow(props: CompactRowProps) {
   const secondary = { color: paint.textSecondary };
 
   return (
-    <View {...webData({ bloomListingCard: 'compact' })} style={[{ position: 'relative' }, style]} testID={testID}>
+    <View {...webDataSet({ bloomListingCard: 'compact' })} style={[{ position: 'relative' }, style]} testID={testID}>
       <Pressable {...linkProps} style={linkStyle}>
         <View
           style={{
@@ -722,7 +722,7 @@ function ListingCardComponent(props: ListingCardProps) {
   };
 
   const linkProps = {
-    ...webData({ bloomListingCardLink: '' }),
+    ...webDataSet({ bloomListingCardLink: '' }),
     ...(IS_WEB && href ? { href } : null),
     role: href ? ('link' as const) : onPress ? ('button' as const) : undefined,
     accessibilityLabel: name,
@@ -752,7 +752,7 @@ function ListingCardComponent(props: ListingCardProps) {
 
   return (
     <View
-      {...webData({ bloomListingCard: layout })}
+      {...webDataSet({ bloomListingCard: layout })}
       style={[{ position: 'relative' }, style]}
       testID={testID}
     >
@@ -833,7 +833,7 @@ function ListingCardComponent(props: ListingCardProps) {
           <>
             {active > 0 ? (
               <View
-                {...webData({ bloomListingCardArrow: 'previous' })}
+                {...webDataSet({ bloomListingCardArrow: 'previous' })}
                 style={{ position: 'absolute', left: 8, top: '50%', marginTop: -16 }}
               >
                 <Button
@@ -849,7 +849,7 @@ function ListingCardComponent(props: ListingCardProps) {
             ) : null}
             {active < count - 1 ? (
               <View
-                {...webData({ bloomListingCardArrow: 'next' })}
+                {...webDataSet({ bloomListingCardArrow: 'next' })}
                 style={{ position: 'absolute', right: 8, top: '50%', marginTop: -16 }}
               >
                 <Button

package/src/listing-card/WishlistCard.tsx

@@ -4,6 +4,7 @@ import { Image, Linking, Pressable, View, type GestureResponderEvent, type ViewS
 import { useImageResolver } from '../image-resolver/context';
 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 {
   PHOTO_RADIUS,
   resolveListingCardPaint,
   resolvePhoto,
-  webData,
   type ListingCardPaint,
 } from './shared';
 import type { WishlistCardProps } from './types';
@@ -104,7 +104,7 @@ function WishlistCardComponent({
 
   return (
     <Pressable
-      {...webData({ bloomWishlistCard: '' })}
+      {...webDataSet({ bloomWishlistCard: '' })}
       {...(IS_WEB && href ? { href } : null)}
       role={href ? 'link' : onPress ? 'button' : undefined}
       accessibilityLabel={accessibilityLabel ?? (description ? `${name}, ${description}` : name)}

package/src/listing-card/parts.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 
+import { Badge } from '../badge';
 import { RiMapPinLine } from '../icons/remix/RiMapPinLine';
 import { OfferingBadge } from '../offering-badge/OfferingBadge';
-import { OFFERING_BADGE_GEOMETRY } from '../offering-badge/shared';
+import { OFFERING_BADGE_RUNG } from '../offering-badge/shared';
 import type { OfferingBadgeSize, OfferingBadgeVariant } from '../offering-badge/types';
-import { borderRadius } from '../styles/tokens';
 import { Text } from '../typography';
 import { TYPE_SCALE, type TypeScaleVariant } from '../typography/scale';
 import { uniqueOfferings } from './shared';
@@ -206,25 +206,27 @@ export interface ListingStatusPillProps {
   testID?: string;
 }
 
-/** The status pill: the page's reading pair inverted, the badges' geometry. */
+/**
+ * The status pill: `Badge` on the same label rung the offering badges use, in
+ * the page's own reading pair INVERTED.
+ *
+ * It is `variant="solid"` on the neutral tone — a filled pill with a label the
+ * colour policy guarantees on it — with one override: the neutral solid fill is
+ * `textSecondary`, and this pill sits on a photograph under a wash, where the
+ * louder `text` is what stays readable. So the two colours arrive as props from
+ * the card's own paint, and only the fill and the label colour are overridden;
+ * the geometry, the radius and the truncation are `Badge`'s.
+ */
 export function ListingStatusPill({ label, fill, text, size, testID }: ListingStatusPillProps) {
-  const geometry = OFFERING_BADGE_GEOMETRY[size];
   return (
-    <View
-      style={{
-        alignSelf: 'flex-start',
-        justifyContent: 'center',
-        height: geometry.height,
-        paddingLeft: geometry.paddingHorizontal,
-        paddingRight: geometry.paddingHorizontal,
-        borderRadius: borderRadius.full,
-        backgroundColor: fill,
-      }}
+    <Badge
+      content={label}
+      size={OFFERING_BADGE_RUNG[size]}
+      variant="solid"
+      color="default"
+      style={{ backgroundColor: fill }}
+      textStyle={{ color: text }}
       testID={testID}
-    >
-      <Text variant={geometry.type} numberOfLines={1} style={{ color: text }}>
-        {label}
-      </Text>
-    </View>
+    />
   );
 }

package/src/listing-card/shared.ts

@@ -3,6 +3,7 @@ import { Platform } from 'react-native';
 import { colorRamp, DANGER_TABLE, mixColor, resolveButtonRamps } from '../button/shared';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import type { ImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import type { Theme } from '../theme/types';
 import type { ListingCardProps, ListingFact, ListingPriceLine, ListingStatus, Offering } from './types';
 
@@ -149,17 +150,6 @@ export function uniqueOfferings(offerings: ReadonlyArray<Offering> | undefined):
   return offerings ? Array.from(new Set(offerings)) : [];
 }
 
-export function isUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:') ||
-    value.startsWith('/')
-  );
-}
-
 /** A URL passes through; an id goes to the app's resolver (`undefined` without one). */
 export function resolvePhoto(
   photo: string,
@@ -167,7 +157,7 @@ export function resolvePhoto(
   variant?: string,
 ): string | undefined {
   if (!photo) return undefined;
-  return isUrl(photo) ? photo : resolver?.(photo, variant);
+  return isImageUrl(photo) ? photo : resolver?.(photo, variant);
 }
 
 /** The responsive column count of a results grid of the given width. */
@@ -208,10 +198,6 @@ export function dotWindow(count: number, active: number): DotSlot[] {
   return slots;
 }
 
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}
-
 // ---------------------------------------------------------------------------
 //  Web CSS — hover-only arrows, the snapping track and focus rings have no
 //  inline-style spelling, so they hang off `dataSet` attributes in an adopted

package/src/listing-card/types.ts

@@ -1,5 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
  * How a home is offered. A listing may carry several at once (a flat for rent
@@ -35,7 +36,8 @@ export interface ListingPriceLine {
 }
 
 /** An icon component a fact draws at 16px in the secondary text colour (`RiHotelBedLine`). */
-export type ListingFactIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type ListingFactIcon = BloomIconComponent;
 
 /** One compact fact about the home ("3" beside a bed, "110 m²"). */
 export interface ListingFact {

package/src/listing-details/AmenityList.tsx

@@ -7,7 +7,7 @@ import { Text } from '../typography';
 import { AMENITY_LIST_TWO_COLUMN_MIN_WIDTH } from './constants';
 import { resolveListingPalette } from './shared';
 import type { AmenityListProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * What a listing offers: icon + label rows in one or two columns.

package/src/listing-details/ContactCard.tsx

@@ -10,6 +10,7 @@ import { RiCheckLine, RiHome4Line, RiPhoneLine, RiStarFill, RiTimeLine } from '.
 import { useImageResolver } from '../image-resolver/context';
 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 { HOST_CARD_AVATAR_SIZE } from './constants';
@@ -19,7 +20,6 @@ import {
   LISTING_DETAILS_STYLE_ID,
   resolveImageUri,
   resolveListingPalette,
-  webData,
 } from './shared';
 import type { ContactCardProps, ContactRole, ListingIcon } from './types';
 
@@ -221,7 +221,7 @@ function ContactCardComponent({
 
   const card = onPressProfile ? (
     <Pressable
-      {...webData({ bloomListingPress: '' })}
+      {...webDataSet({ bloomListingPress: '' })}
       accessibilityRole="button"
       accessibilityLabel={cardName}
       onPress={onPressProfile}
@@ -374,7 +374,7 @@ function ContactCardComponent({
               <View key={id} role="listitem" testID={testID ? `${testID}-${id}` : undefined}>
                 {onPress ? (
                   <Pressable
-                    {...webData({ bloomListingPress: '' })}
+                    {...webDataSet({ bloomListingPress: '' })}
                     accessibilityRole="link"
                     accessibilityLabel={text}
                     onPress={onPress}

package/src/listing-details/FloorPlan.tsx

@@ -7,6 +7,7 @@ import { RiExpandDiagonalSLine } from '../icons/remix';
 import { useImageResolver } from '../image-resolver/context';
 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 { FLOOR_PLAN_TWO_COLUMN_MIN_WIDTH } from './constants';
@@ -15,10 +16,9 @@ import {
   LISTING_DETAILS_STYLE_ID,
   resolveImageUri,
   resolveListingPalette,
-  webData,
 } from './shared';
 import type { FloorPlanItem, FloorPlanProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * The floor plans of a home: one tile per plan, a label under each.
@@ -114,7 +114,7 @@ function PlanTile({ plan, uri, name, aspectRatio, onPress, testID }: PlanTilePro
     <View style={{ gap: 12 }}>
       {onPress ? (
         <Pressable
-          {...webData({ bloomListingPress: '' })}
+          {...webDataSet({ bloomListingPress: '' })}
           accessibilityRole="button"
           accessibilityLabel={name}
           onPress={onPress}

package/src/listing-details/ListingHeader.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 
+import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { Rating } from '../rating';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
@@ -9,16 +10,10 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { LISTING_HEADER_WIDE_MIN_WIDTH } from './constants';
-import {
-  IS_WEB,
-  LISTING_DETAILS_CSS,
-  LISTING_DETAILS_STYLE_ID,
-  resolveListingPalette,
-  webData,
-  type ListingPalette,
-} from './shared';
+import { IS_WEB, LISTING_DETAILS_CSS, LISTING_DETAILS_STYLE_ID, resolveListingPalette, type ListingPalette } from './shared';
+import { webDataSet as webData } from '../styles/web-data';
 import type { ListingHeaderActionProps, ListingHeaderProps } from './types';
-import { useContainerWidth } from './use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 
 /**
  * The title block of a listing page.
@@ -47,6 +42,11 @@ function Separator({ palette }: { palette: ListingPalette }) {
   );
 }
 
+/**
+ * `Button variant="link"` with the reading tone and the underline at rest —
+ * what this drew by hand before `linkTone="text"` / `underline="rest"` existed.
+ * Without a handler it is not a control at all, so it stays plain text.
+ */
 function InlineLink({
   label,
   onPress,
@@ -58,7 +58,6 @@ function InlineLink({
   palette: ListingPalette;
   testID?: string;
 }) {
-  const textStyle = { color: palette.text, textDecorationLine: 'underline' as const };
   if (!onPress) {
     return (
       <Text variant="body-medium" style={{ color: palette.text }} testID={testID}>
@@ -66,20 +65,20 @@ function InlineLink({
       </Text>
     );
   }
-  const ring: WebCssStyle = { '--bloom-listing-ring': palette.ring, borderRadius: 4 };
   return (
-    <Pressable
-      {...webData({ bloomListingPress: '' })}
+    <Button
+      variant="link"
+      linkTone="text"
+      underline="rest"
+      size="small"
+      textVariant="body-medium"
       accessibilityRole={IS_WEB ? 'link' : 'button'}
       accessibilityLabel={label}
       onPress={onPress}
-      style={ring}
       testID={testID}
     >
-      <Text variant="body-medium" style={textStyle}>
-        {label}
-      </Text>
-    </Pressable>
+      {label}
+    </Button>
   );
 }