@oxy.so/bloom 2.11.0 → 2.12.1

package/src/date-picker/TimeField.tsx

@@ -0,0 +1,162 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Platform, TextInput, type TextStyle } from 'react-native';
+
+import { MENU_FONT_FAMILY } from '../floating/menu-type';
+import { DISABLED_OPACITY } from '../styles/tokens';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { useTheme } from '../theme/use-theme';
+import { TYPE_SCALE } from '../typography';
+import { resolveCalendarPalette } from './palette';
+import { formatTime, parseTime, snapTime, stepTime } from './time';
+import type { TimeFieldProps, TimeFieldSize } from './types';
+
+/**
+ * A time of day, typed. `DatePicker` is the day; this is the hour and minute,
+ * and it is a FIELD rather than a fourth popover — a viewing at 18:30 is four
+ * keystrokes, and a popover is the wrong instrument for four keystrokes.
+ *
+ *              width   height   text             step arrows
+ *   small      96      32       body-2-medium    yes
+ *   medium     104     38       body-medium      yes
+ *
+ * Geometry, palette and focus behaviour are `DateChipInput`'s — the
+ * `DD/MM/YYYY` chip inside the pickers — so a date and a time typed beside each
+ * other line up: 1px `chipBorder` darkening to `chipBorderFocused` on focus
+ * (the border IS the focus indicator, `outline-none`), radius 10, shadow-xs,
+ * the panel fill.
+ *
+ * It keeps its own DRAFT while typing, so the text is not reformatted under the
+ * cursor, and commits on blur or submit; Escape reverts. A draft that does not
+ * parse reverts too, rather than reporting an error the field has no room to
+ * draw — `parseTime` is forgiving enough (`9`, `930`, `9.30`, `9pm`, `21:30`)
+ * that the remaining failures really are not times.
+ *
+ * ArrowUp / ArrowDown move by `step` and commit immediately, clamped at `min`
+ * and `max` rather than wrapping. They are a convenience on a text box, not a
+ * `spinbutton`: the control is a text field, it announces itself as one, and
+ * every value it can reach can also be typed. Its NAME is
+ * `accessibilityLabel` — required, because `"--:--"` names nothing.
+ *
+ * The VALUE is always 24h `"HH:mm"`, whatever `hourFormat` draws, so it drops
+ * straight into `MeetingScheduler`'s `timeSlots` and needs no locale from the
+ * caller.
+ */
+
+const SIZE_CONFIG: Record<TimeFieldSize, { width: number; height: number; type: 'body-medium' | 'body-2-medium' }> = {
+  small: { width: 96, height: 32, type: 'body-2-medium' },
+  medium: { width: 104, height: 38, type: 'body-medium' },
+};
+
+/** `transition-colors duration-100 ease-out` on the border. Web only. */
+const FIELD_TRANSITION: WebCssStyle | null =
+  Platform.OS === 'web'
+    ? { transitionProperty: 'border-color', transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }
+    : null;
+
+function TimeFieldComponent({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  hourFormat = '24h',
+  size = 'medium',
+  disabled = false,
+  accessibilityLabel,
+  placeholder,
+  width,
+  style,
+  testID,
+}: TimeFieldProps) {
+  const theme = useTheme();
+  const palette = useMemo(() => resolveCalendarPalette(theme), [theme]);
+  const config = SIZE_CONFIG[size];
+
+  const shown = value ? formatTime(value, hourFormat) : '';
+  const [text, setText] = useState(shown);
+  const [focused, setFocused] = useState(false);
+
+  // The committed value is the source of truth; a change from outside (or a
+  // format flip) rewrites the draft.
+  useEffect(() => {
+    setText(shown);
+  }, [shown]);
+
+  const commit = (draft: string) => {
+    if (draft.trim() === '') {
+      setText('');
+      if (value !== null) onChange(null);
+      return;
+    }
+    const parsed = parseTime(draft, hourFormat);
+    const next = parsed ? snapTime(parsed, { step, min, max }) : null;
+    if (!next) {
+      setText(shown);
+      return;
+    }
+    setText(formatTime(next, hourFormat));
+    if (next !== value) onChange(next);
+  };
+
+  const nudge = (direction: 1 | -1) => {
+    const next = stepTime(value, direction, { step, min, max });
+    if (!next) return;
+    setText(formatTime(next, hourFormat));
+    if (next !== value) onChange(next);
+  };
+
+  const fieldStyle: TextStyle = {
+    width: width ?? config.width,
+    height: config.height,
+    paddingLeft: 8,
+    paddingRight: 8,
+    borderWidth: 1,
+    borderRadius: 10,
+    borderColor: focused ? palette.chipBorderFocused : palette.chipBorder,
+    backgroundColor: palette.panel,
+    boxShadow: palette.shadowXs,
+    color: disabled ? palette.disabledText : palette.text,
+    opacity: disabled ? DISABLED_OPACITY : 1,
+    // A `TextInput` inherits no face.
+    ...TYPE_SCALE[config.type],
+    ...MENU_FONT_FAMILY,
+    // `outline-none`: the border change is the focus indicator.
+    outlineWidth: 0,
+  };
+
+  return (
+    <TextInput
+      value={text}
+      editable={!disabled}
+      onChangeText={setText}
+      onFocus={() => setFocused(true)}
+      onBlur={() => {
+        setFocused(false);
+        commit(text);
+      }}
+      onSubmitEditing={() => commit(text)}
+      onKeyPress={(event) => {
+        const key = event.nativeEvent.key;
+        if (key === 'Escape') {
+          setText(shown);
+        } else if (key === 'ArrowUp') {
+          (event as unknown as { preventDefault?: () => void }).preventDefault?.();
+          nudge(1);
+        } else if (key === 'ArrowDown') {
+          (event as unknown as { preventDefault?: () => void }).preventDefault?.();
+          nudge(-1);
+        }
+      }}
+      placeholder={placeholder ?? (hourFormat === '12h' ? '--:-- --' : '--:--')}
+      placeholderTextColor={palette.secondaryText}
+      inputMode={hourFormat === '12h' ? 'text' : 'numeric'}
+      accessibilityLabel={accessibilityLabel}
+      aria-disabled={disabled || undefined}
+      style={[FIELD_TRANSITION, fieldStyle, style]}
+      testID={testID}
+    />
+  );
+}
+
+export const TimeField = memo(TimeFieldComponent);
+TimeField.displayName = 'TimeField';

package/src/date-picker/index.ts

@@ -2,6 +2,9 @@ export { Calendar, RangeCalendar } from './Calendar';
 export { DatePicker } from './DatePicker';
 export { DateRangePicker } from './DateRangePicker';
 export { MeetingScheduler } from './MeetingScheduler';
+export { TimeField } from './TimeField';
+// `time.ts`'s pure helpers stay internal, as `calendar-grid.ts`'s already do:
+// `formatTime`/`parseTime` are names the root barrel cannot afford.
 
 export type {
   CalendarConstraintProps,
@@ -9,6 +12,7 @@ export type {
   DatePickerProps,
   DateRange,
   DateRangePickerProps,
+  HourFormat,
   MeetingSchedulerDetails,
   MeetingSchedulerHost,
   MeetingSchedulerHourFormat,
@@ -16,5 +20,7 @@ export type {
   MeetingSchedulerProps,
   MeetingSchedulerValue,
   RangeCalendarProps,
+  TimeFieldProps,
+  TimeFieldSize,
   WeekStart,
 } from './types';

package/src/date-picker/time.ts

@@ -0,0 +1,158 @@
+import type { HourFormat } from './types';
+
+/**
+ * Time of day as the family already spells it: a 24-hour `"HH:mm"` string.
+ * `MeetingScheduler`'s `timeSlots` and `MeetingSchedulerValue.time` are the same
+ * shape, so a `TimeField` value drops straight into one.
+ *
+ * Everything here is pure, exported, and where the parsing rules live — a field
+ * that keeps its own draft cannot be tested through the DOM for every spelling
+ * somebody might type.
+ */
+
+/** Minutes since midnight, `0..1439`. */
+export type Minutes = number;
+
+const HH_MM = /^([01]?\d|2[0-3]):([0-5]\d)$/;
+
+/** `"14:30"` → 870. `null` for anything that is not a 24h `HH:mm`. */
+export function toMinutes(value: string): Minutes | null {
+  const match = HH_MM.exec(value.trim());
+  if (!match) return null;
+  return Number(match[1]) * 60 + Number(match[2]);
+}
+
+/** 870 → `"14:30"`. Wraps within the day, so 1440 is `"00:00"`. */
+export function fromMinutes(minutes: Minutes): string {
+  const wrapped = ((Math.round(minutes) % 1440) + 1440) % 1440;
+  const h = Math.floor(wrapped / 60);
+  const m = wrapped % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+/** `"14:30"` → `"14:30"` (24h) or `"2:30 PM"` (12h). */
+export function formatTime(value: string, hourFormat: HourFormat): string {
+  const minutes = toMinutes(value);
+  if (minutes == null) return value;
+  if (hourFormat === '24h') return fromMinutes(minutes);
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  const period = h < 12 ? 'AM' : 'PM';
+  const hour12 = h % 12 === 0 ? 12 : h % 12;
+  return `${hour12}:${String(m).padStart(2, '0')} ${period}`;
+}
+
+/**
+ * What somebody typed → `"HH:mm"`, or `null` when it is not a time.
+ *
+ * Deliberately forgiving, because a field that only accepts what it printed is
+ * a field people fight: `9`, `930`, `9.30`, `9:3`, `0930`, `9 30`, `9pm`,
+ * `9:30 p.m.` and `21:30` all parse. A bare number under 24 is an HOUR (`9` is
+ * 09:00), four digits are `HHMM` (`0930`); `AM`/`PM` decides the half of the
+ * day whatever `hourFormat` says, because somebody who typed `pm` means pm.
+ * Without a marker, 24h reads the hour as given and 12h keeps `1..12` in the
+ * morning — the value is still `"HH:mm"`, so a caller never has to know which.
+ */
+export function parseTime(text: string, hourFormat: HourFormat = '24h'): string | null {
+  const raw = text.trim().toLowerCase();
+  if (raw === '') return null;
+  const period = /(^|[^a-z])(a\.?m\.?|p\.?m\.?)\s*$/.exec(raw);
+  const meridiem = period ? (period[2]!.startsWith('a') ? 'am' : 'pm') : null;
+  const digits = (meridiem ? raw.slice(0, period!.index + period![1]!.length) : raw).trim();
+
+  let hour: number;
+  let minute: number;
+  const separated = /^(\d{1,2})\s*[:.\s]\s*(\d{1,2})$/.exec(digits);
+  if (separated) {
+    hour = Number(separated[1]);
+    minute = Number(separated[2]!.padEnd(2, '0'));
+  } else if (/^\d{3,4}$/.test(digits)) {
+    hour = Number(digits.slice(0, digits.length - 2));
+    minute = Number(digits.slice(-2));
+  } else if (/^\d{1,2}$/.test(digits)) {
+    hour = Number(digits);
+    minute = 0;
+  } else {
+    return null;
+  }
+
+  if (minute > 59) return null;
+  if (meridiem) {
+    if (hour < 1 || hour > 12) return null;
+    hour = meridiem === 'pm' ? (hour % 12) + 12 : hour % 12;
+  } else if (hour > 23) {
+    return null;
+  }
+  return fromMinutes(hour * 60 + minute);
+}
+
+/**
+ * The nearest multiple of `step` minutes (or the next one up/down, per
+ * `round`), at or after `min` and at or before `max`. `step` counts from
+ * MIDNIGHT, so 15 gives :00 :15 :30 :45 whatever the bounds are — a step
+ * measured from `min` would put the round times off the grid the moment a shop
+ * opened at 09:10. Never crosses the end of the day: 23:59 rounded up to a
+ * 30-minute grid stays inside it rather than wrapping to the other end.
+ */
+export function snapTime(
+  value: string,
+  {
+    step = 1,
+    min,
+    max,
+    round = 'nearest',
+  }: { step?: number; min?: string; max?: string; round?: 'nearest' | 'up' | 'down' } = {},
+): string | null {
+  const minutes = toMinutes(value);
+  if (minutes == null) return null;
+  const size = Math.max(1, Math.round(step));
+  const scaled = minutes / size;
+  let snapped =
+    (round === 'up' ? Math.ceil(scaled) : round === 'down' ? Math.floor(scaled) : Math.round(scaled)) *
+    size;
+  const low = min ? toMinutes(min) : null;
+  const high = max ? toMinutes(max) : null;
+  if (low != null && high != null && low > high) return null;
+  if (low != null && snapped < low) snapped = low;
+  if (high != null && snapped > high) snapped = high;
+  // Never past the end of the day: rounding 23:59 up to a 30-minute grid lands
+  // on 24:00, which `fromMinutes` would wrap to midnight — the other end.
+  if (snapped > 1439) snapped = high ?? 1439;
+  if (snapped < 0) snapped = low ?? 0;
+  return fromMinutes(snapped);
+}
+
+/**
+ * One arrow press: `direction * step` minutes from `value`, or the first time
+ * inside the bounds when there is no value yet. Clamps at the bounds rather
+ * than wrapping — a wrap past `max` back to `min` reads as the field refusing
+ * the key.
+ */
+export function stepTime(
+  value: string | null,
+  direction: 1 | -1,
+  { step = 1, min, max }: { step?: number; min?: string; max?: string } = {},
+): string | null {
+  const size = Math.max(1, Math.round(step));
+  const low = min ? toMinutes(min) : null;
+  const high = max ? toMinutes(max) : null;
+  if (low != null && high != null && low > high) return null;
+  const current = value ? toMinutes(value) : null;
+  if (current == null) {
+    // Into the range, not past it: up from the earliest allowed time rounds UP
+    // onto the grid, down from the latest rounds DOWN.
+    const start = direction === 1 ? (low ?? 0) : (high ?? 1439);
+    return snapTime(fromMinutes(start), {
+      step: size,
+      min,
+      max,
+      round: direction === 1 ? 'up' : 'down',
+    });
+  }
+  let next = current + direction * size;
+  if (low != null && next < low) next = low;
+  if (high != null && next > high) next = high;
+  if (next < 0) next = 0;
+  if (next > 1439) next = 1439;
+  return fromMinutes(next);
+}

package/src/date-picker/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 /** An inclusive range of calendar days. Both ends are local-midnight `Date`s. */
 export interface DateRange {
@@ -126,8 +126,14 @@ export interface MeetingSchedulerValue {
   time: string | null;
 }
 
-/** The hour-format toggle. */
-export type MeetingSchedulerHourFormat = '12h' | '24h';
+/**
+ * How a time of day is drawn. The VALUE is always a 24h `"HH:mm"` string —
+ * this decides only what the reader sees.
+ */
+export type HourFormat = '12h' | '24h';
+
+/** The hour-format toggle. An alias of {@link HourFormat}. */
+export type MeetingSchedulerHourFormat = HourFormat;
 
 /** Fixed strings, overridable for localisation. */
 export interface MeetingSchedulerLabels {
@@ -169,3 +175,46 @@ export interface MeetingSchedulerProps extends CalendarConstraintProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+/** `small` is a 32-tall field with body-2 text; `medium` (default) 38 with body. */
+export type TimeFieldSize = 'small' | 'medium';
+
+export interface TimeFieldProps {
+  /**
+   * The time as a 24h `"HH:mm"` string, or `null` while the field is empty.
+   * Fully controlled. The same shape `MeetingScheduler` uses, so a value drops
+   * straight into one of its `timeSlots`.
+   */
+  value: string | null;
+  /**
+   * Called with the committed time — on blur, on submit, or on an arrow key.
+   * `null` when the field has been emptied. Never called while typing.
+   */
+  onChange: (value: string | null) => void;
+  /** Earliest time, 24h `"HH:mm"`. A typed time before it is pulled up to it. */
+  min?: string;
+  /** Latest time, 24h `"HH:mm"`. A typed time after it is pulled back to it. */
+  max?: string;
+  /**
+   * Minutes one arrow press moves, and the grid a typed time snaps to. Default
+   * `1` (no snapping); pass `15` or `30` for a booking grid. Counted from
+   * midnight, so 15 always means :00 :15 :30 :45.
+   */
+  step?: number;
+  /** How the time is DRAWN. Default `'24h'`; the value stays 24h either way. */
+  hourFormat?: HourFormat;
+  /** Default `medium`. */
+  size?: TimeFieldSize;
+  disabled?: boolean;
+  /**
+   * The NAME of the time ("Viewing time", "Check-in"). Required: the field
+   * draws no label of its own, and `"--:--"` names nothing.
+   */
+  accessibilityLabel: string;
+  /** The text while empty. Default `"--:--"`, or `"--:-- --"` in 12h. */
+  placeholder?: string;
+  /** Fixed width. Default: 104 at `medium`, 96 at `small`. */
+  width?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/index.ts

@@ -292,8 +292,15 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 // Data display
 export * from './card';
 export * from './badge';
-export { Rating, RatingBar } from './rating';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './rating';
+export { Rating, RatingBar, RatingInput } from './rating';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './rating';
 export {
   ExplicitBadge,
   formatDuration,

package/src/index.web.ts

@@ -297,8 +297,15 @@ export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet/index.web'
 // Data display
 export * from './card';
 export * from './badge';
-export { Rating, RatingBar } from './rating';
-export type { RatingBarProps, RatingCountStyle, RatingProps, RatingSize } from './rating';
+export { Rating, RatingBar, RatingInput } from './rating';
+export type {
+  RatingBarProps,
+  RatingCountStyle,
+  RatingInputProps,
+  RatingInputSize,
+  RatingProps,
+  RatingSize,
+} from './rating';
 export {
   ExplicitBadge,
   formatDuration,

package/src/listing-card/ListingCard.tsx

@@ -48,6 +48,7 @@ import {
   LISTING_CARD_STYLE_ID,
   PHOTO_ASPECT_RATIO,
   PHOTO_RADIUS,
+  PHOTO_ZOOM_SCALE,
   resolveListingCardPaint,
   locationText,
   resolvePhoto,
@@ -91,6 +92,21 @@ import type { ListingCardLayout, ListingCardProps } from './types';
  *
  * The overlay repeats the photo's geometry (the same width share and aspect
  * ratio) rather than measuring it, so it is right on the first frame.
+ *
+ * `hoverZoom` scales the photo to {@link PHOTO_ZOOM_SCALE} while a pointer is
+ * over the card — a CSS transform on the photo inside the clipping tile, WEB
+ * ONLY (`@media (any-hover: hover)`, so a touch screen that reports a hover it
+ * cannot deliver is excluded) and nothing at all under reduced motion. It is
+ * off by default: a card that grows under the pointer is a decision an app
+ * makes, not one Bloom makes for every app that already ships this card. The
+ * compact density ignores it — a 112px thumbnail has nothing to come forward
+ * from.
+ *
+ * `onLongPress` and `onContextMenu` are the shortcut to a sheet or a menu, and
+ * they carry `MessageBubble`'s contract verbatim: a long press on native (and
+ * on a web touch screen), right-click on web with the event defaulted. Neither
+ * has a keyboard spelling, so whatever they reach must be reachable another
+ * way.
  */
 
 const TEXT_GAP = 12;
@@ -198,6 +214,7 @@ function PhotoTrack({
                     source={{ uri }}
                     resizeMode="cover"
                     accessibilityIgnoresInvertColors
+                    {...webDataSet({ bloomListingCardPhoto: '' })}
                     style={{ width: '100%', height: '100%' }}
                   />
                 ) : null}
@@ -623,6 +640,9 @@ function ListingCardComponent(props: ListingCardProps) {
     favorite = false,
     onFavoriteChange,
     onPress,
+    onLongPress,
+    onContextMenu,
+    hoverZoom = false,
     href,
     loading = false,
     layout = 'vertical',
@@ -727,6 +747,17 @@ function ListingCardComponent(props: ListingCardProps) {
     role: href ? ('link' as const) : onPress ? ('button' as const) : undefined,
     accessibilityLabel: name,
     onPress: onPress || (!IS_WEB && href) ? handlePress : undefined,
+    onLongPress,
+    // Same shape as `MessageBubble`'s: the event is defaulted here, so the
+    // browser's own menu does not open over the card's shortcut.
+    ...(IS_WEB && onContextMenu !== undefined
+      ? {
+          onContextMenu: (event: { preventDefault?: () => void }) => {
+            event.preventDefault?.();
+            onContextMenu();
+          },
+        }
+      : null),
     testID: testID ? `${testID}-link` : undefined,
   };
 
@@ -752,7 +783,9 @@ function ListingCardComponent(props: ListingCardProps) {
 
   return (
     <View
-      {...webDataSet({ bloomListingCard: layout })}
+      {...webDataSet(
+        hoverZoom ? { bloomListingCard: layout, bloomListingCardZoom: '' } : { bloomListingCard: layout },
+      )}
       style={[{ position: 'relative' }, style]}
       testID={testID}
     >

package/src/listing-card/WishlistCard.tsx

@@ -22,15 +22,22 @@ import type { WishlistCardProps } from './types';
  * A saved collection of stays.
  *
  *   cover   a square, radius 16, 2px seams in the page colour:
+ *             0 photos  the placeholder square, holding `empty` centred
  *             1 photo   fills it
  *             2         side by side
  *             3         one tall photo left, two stacked right
  *             4+        a 2×2 (the first four)
- *   text    12 below: the name body-semibold, the description body-regular
- *           text-secondary
+ *   text    12 below: `icon` at 16 (in `color`), the name body-semibold, then
+ *           the description body-regular text-secondary
  *
  * A link on web with `href` (a real `<a>`), otherwise a button with `onPress`;
  * its name is "name, description".
+ *
+ * `icon` is DECORATIVE and sits beside the name rather than inside it — a glyph
+ * put in the `name` string is read out as its character, and cannot be coloured
+ * or sized. `color` paints that glyph and tints the empty cover; it is the
+ * caller's colour, not a token, because a collection's colour is the person's
+ * choice and Bloom has no ramp for it.
  */
 
 const SEAM = 2;
@@ -57,6 +64,9 @@ function WishlistCardComponent({
   photoVariant,
   onPress,
   href,
+  icon: Icon,
+  color,
+  empty,
   accessibilityLabel,
   style,
   testID,
@@ -67,10 +77,25 @@ function WishlistCardComponent({
   const resolver = useImageResolver();
   const uris = photos.slice(0, 4).map((photo) => resolvePhoto(photo, resolver, photoVariant));
   const count = Math.max(1, uris.length);
+  const isEmpty = uris.length === 0;
 
   const fill: ViewStyle = { flex: 1 };
   let cover: React.ReactNode;
-  if (count === 1) {
+  if (isEmpty) {
+    cover = (
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: color ?? paint.photoPlaceholder,
+        }}
+        testID={testID ? `${testID}-empty` : undefined}
+      >
+        {empty ?? null}
+      </View>
+    );
+  } else if (count === 1) {
     cover = <Tile uri={uris[0]} paint={paint} style={fill} />;
   } else if (count === 2) {
     cover = (
@@ -133,9 +158,20 @@ function WishlistCardComponent({
         {cover}
       </View>
       <View style={{ marginTop: 12, gap: 2 }}>
-        <Text variant="body-semibold" numberOfLines={1} style={{ color: paint.text }}>
-          {name}
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+          {Icon ? (
+            <View aria-hidden style={{ flexShrink: 0 }} testID={testID ? `${testID}-icon` : undefined}>
+              <Icon width={16} height={16} fill={color ?? paint.textSecondary} />
+            </View>
+          ) : null}
+          <Text
+            variant="body-semibold"
+            numberOfLines={1}
+            style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+          >
+            {name}
+          </Text>
+        </View>
         {description ? (
           <Text variant="body-regular" numberOfLines={1} style={{ color: paint.textSecondary }}>
             {description}

package/src/listing-card/shared.ts

@@ -20,6 +20,13 @@ export const MAX_DOTS = 5;
 export const DOT_SIZE = 6;
 /** A dot at a window edge that has more photos beyond it. */
 export const DOT_EDGE_SIZE = 4;
+/**
+ * How far `hoverZoom` scales the photo under a pointer. 1.06 — enough to read
+ * as the photo coming forward, small enough that the crop barely moves and a
+ * face near an edge is not pushed out of frame. The tile clips, so nothing
+ * overflows the card.
+ */
+export const PHOTO_ZOOM_SCALE = 1.06;
 
 export interface ListingCardPaint {
   /** The placeholder behind a photo that has not loaded, and the mosaic gaps' tiles. */
@@ -209,6 +216,7 @@ export const LISTING_CARD_STYLE_ID = 'bloom-listing-card-web-css';
 const CARD = '[data-bloom-listing-card]';
 const LINK = '[data-bloom-listing-card-link]';
 const TRACK = '[data-bloom-listing-card-track]';
+const PHOTO = '[data-bloom-listing-card-photo]';
 const ARROW = '[data-bloom-listing-card-arrow]';
 const DOT = '[data-bloom-listing-card-dot]';
 const FAVORITE = '[data-bloom-favorite-button]';
@@ -262,9 +270,23 @@ ${FAVORITE}:focus-visible {
   outline: 2px solid var(--bloom-listing-card-ring, currentColor);
   outline-offset: 0;
 }
+${CARD}[data-bloom-listing-card-zoom] ${PHOTO} {
+  transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1);
+  transform-origin: center;
+}
+@media (any-hover: hover) {
+  ${CARD}[data-bloom-listing-card-zoom]:hover ${PHOTO} {
+    transform: scale(${PHOTO_ZOOM_SCALE});
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   ${ARROW}, ${DOT} {
     transition: none;
   }
+  ${CARD}[data-bloom-listing-card-zoom] ${PHOTO},
+  ${CARD}[data-bloom-listing-card-zoom]:hover ${PHOTO} {
+    transition: none;
+    transform: none;
+  }
 }
 `;