@oxy.so/bloom 2.8.0 → 2.10.0

package/src/lyrics/shared.ts

@@ -0,0 +1,252 @@
+import { Platform } from 'react-native';
+
+import { ACCENT_TABLE, colorRamp, mixColor, resolveButtonRamps, type RampStop } 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';
+
+export const IS_WEB = Platform.OS === 'web';
+
+export const DEFAULT_EMPTY_TEXT = 'Lyrics aren’t available for this track';
+
+// ---------------------------------------------------------------------------
+//  Lines
+// ---------------------------------------------------------------------------
+
+/** Whether every line carries a finite `time` (and there is at least one line). */
+export function isSyncedLyrics(lines: readonly LyricLine[] | undefined): boolean {
+  return (
+    !!lines &&
+    lines.length > 0 &&
+    lines.every((line) => typeof line.time === 'number' && Number.isFinite(line.time))
+  );
+}
+
+/**
+ * The lines the view draws. Synced lines are sorted by `time` (stable, so two
+ * lines with one time keep their order); unsynced `lines` pass through; with no
+ * lines, `text` is split on line breaks into unsynced lines.
+ */
+export function normalizeLyricLines(
+  lines: readonly LyricLine[] | undefined,
+  text: string | undefined,
+): { lines: readonly LyricLine[]; synced: boolean } {
+  if (lines && lines.length > 0) {
+    if (!isSyncedLyrics(lines)) return { lines, synced: false };
+    const sorted = lines
+      .map((line, index) => ({ line, index }))
+      .sort((a, b) => (a.line.time as number) - (b.line.time as number) || a.index - b.index)
+      .map(({ line }) => line);
+    return { lines: sorted, synced: true };
+  }
+  if (text && text.trim().length > 0) {
+    return {
+      lines: text.replace(/\r\n?/g, '\n').split('\n').map((t) => ({ text: t.trim() })),
+      synced: false,
+    };
+  }
+  return { lines: [], synced: false };
+}
+
+/**
+ * The index of the line playing at `time`: the LAST line whose `time` is at or
+ * before it. `-1` before the first line, with no lines, or for a non-finite
+ * time; the last line from its start onwards (lyrics have no end time). A line
+ * whose time equals `time` is active. Binary search — `lines` must be sorted
+ * by `time` ascending (what {@link normalizeLyricLines} returns); lines without
+ * a time are treated as `+∞`.
+ */
+export function activeLyricIndex(lines: readonly LyricLine[], time: number | undefined): number {
+  if (time === undefined || !Number.isFinite(time) || lines.length === 0) return -1;
+  let lo = 0;
+  let hi = lines.length - 1;
+  let found = -1;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const start = lines[mid]?.time ?? Number.POSITIVE_INFINITY;
+    if (start <= time) {
+      found = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return found;
+}
+
+/**
+ * The scroll offset that puts a line's CENTRE at `anchor` × the viewport's
+ * height, clamped to the scrollable range.
+ */
+export function lyricsScrollTarget({
+  lineTop,
+  lineHeight,
+  viewport,
+  content,
+  anchor = 1 / 3,
+}: {
+  lineTop: number;
+  lineHeight: number;
+  viewport: number;
+  content: number;
+  anchor?: number;
+}): number {
+  const target = lineTop + lineHeight / 2 - viewport * anchor;
+  const max = Math.max(0, content - viewport);
+  return Math.round(Math.min(max, Math.max(0, target)));
+}
+
+/**
+ * The window of `count` lines a preview shows: the active line second from the
+ * top where possible, clamped to the ends. Before the first line it starts at 0.
+ */
+export function lyricsPreviewWindow(
+  length: number,
+  active: number,
+  count: number,
+): { start: number; end: number } {
+  const size = Math.min(count, length);
+  const start = Math.min(Math.max(0, active - 1), Math.max(0, length - size));
+  return { start, end: start + size };
+}
+
+/** The type step of a line, by size and whether it is the active one. */
+export function lyricLineVariant(size: LyricsSize, active: boolean): TypeScaleVariant {
+  if (size === 'large') return active ? 'display-4-bold' : 'display-4-semibold';
+  if (size === 'medium') return active ? 'title-1-bold' : 'title-1-semibold';
+  return active ? 'title-2-bold' : 'title-2-semibold';
+}
+
+/** The default size for a width: `large` from 720, `medium` from 480, `small` below. */
+export function lyricsSizeForWidth(width: number): LyricsSize {
+  return width >= 720 ? 'large' : width >= 480 ? 'medium' : 'small';
+}
+
+// ---------------------------------------------------------------------------
+//  Colour
+// ---------------------------------------------------------------------------
+
+
+
+
+/**
+ * The smallest alpha (in hundredths) at which `foreground` mixed over
+ * `background` reaches `ratio`, or `1` when even the full colour does not.
+ */
+function alphaForContrast(background: string, foreground: string, ratio: number): number {
+  for (let step = 0; step <= 100; step++) {
+    const alpha = step / 100;
+    if (contrastRatio(background, mixColor(background, foreground, alpha)) >= ratio) return alpha;
+  }
+  return 1;
+}
+
+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)),
+  );
+  const past = mixColor(
+    background,
+    foreground,
+    Math.max(0.5, alphaForContrast(background, foreground, LYRICS_PAST_CONTRAST)),
+  );
+  return {
+    background,
+    active: foreground,
+    upcoming,
+    past,
+    muted: upcoming,
+    pill: foreground,
+    pillHover: mixColor(foreground, background, 0.14),
+    onPill: background,
+    ring: foreground,
+    fromArtwork,
+  };
+}
+
+/**
+ * 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.
+ *
+ * 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%).
+ */
+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 { neutral } = resolveButtonRamps(theme);
+  return paletteFrom(theme.isDark ? neutral[900] : neutral[100], theme.colors.text, false);
+}
+
+// ---------------------------------------------------------------------------
+//  Web CSS — the hidden scrollbar, cursor and keyboard ring have no inline
+//  spelling, so they hang off `dataSet` attributes in one adopted sheet.
+// ---------------------------------------------------------------------------
+
+export const LYRICS_STYLE_ID = 'bloom-lyrics-web-css';
+
+export const LYRICS_CSS = `
+[data-bloom-lyrics-scroll] {
+  scrollbar-width: none;
+  overscroll-behavior: contain;
+}
+[data-bloom-lyrics-scroll]::-webkit-scrollbar {
+  display: none;
+}
+[data-bloom-lyrics-line] {
+  outline: none;
+  user-select: text;
+}
+[data-bloom-lyrics-line="seek"] {
+  cursor: pointer;
+}
+[data-bloom-lyrics-line]:focus-visible,
+[data-bloom-lyrics-pill]:focus-visible {
+  outline: 2px solid var(--bloom-lyrics-ring, currentColor);
+  outline-offset: 4px;
+  border-radius: 8px;
+}
+[data-bloom-lyrics-pill] {
+  outline: none;
+  cursor: pointer;
+}
+[data-bloom-lyrics-pill]:focus-visible {
+  border-radius: 9999px;
+}
+[data-bloom-lyrics-line] {
+  transition: color 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-bloom-lyrics-line] {
+    transition: none;
+  }
+}
+`;
+
+export { contrastRatio, relativeLuminance };

package/src/lyrics/types.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/** One line of lyrics. */
+export interface LyricLine {
+  /**
+   * When the line starts, in seconds from the start of the track. Lines
+   * without a time make the lyrics UNSYNCED: they draw as plain text, with no
+   * active line, no auto-scroll and no seeking.
+   */
+  time?: number;
+  /** The words. An empty string draws a short pause gap (an instrumental break). */
+  text: string;
+  /** A stable key. Default: the line's position. */
+  key?: string;
+}
+
+export interface LyricsViewProps {
+  /** The lines, in any order — synced lines are sorted by `time`. */
+  lines?: readonly LyricLine[];
+  /**
+   * Plain, unsynced lyrics as one string (split on line breaks). Used when
+   * `lines` is absent or empty.
+   */
+  text?: string;
+  /** The playback position, in seconds. Drives the active line. */
+  currentTime?: number;
+  /**
+   * Called when a synced line is pressed, with the line and its index in the
+   * sorted lines. Seek the player to `line.time`. Without it lines are not
+   * pressable.
+   */
+  onSeekLine?: (line: LyricLine, index: number) => void;
+  /**
+   * The artwork's colour (hex or `rgb()`), from the backend. The view paints a
+   * deep shade of it and picks text colours that keep contrast. Absent or
+   * unparseable: the theme's neutral surface.
+   */
+  artworkColor?: string | null;
+  /** The footer line, e.g. "Lyrics provided by …". Omitted: no footer. */
+  providerText?: string;
+  /** Replaces the footer with your own node. */
+  footer?: ReactNode;
+  /** Drawn when there are no lyrics at all. Default "Lyrics aren’t available for this track". */
+  emptyText?: string;
+  /** The pill shown after the user scrolls away. Default "Back to current line". */
+  backToCurrentLabel?: string;
+  /** How long after the user's last scroll auto-scroll resumes, in ms. Default `3000`. */
+  resumeDelay?: number;
+  /** Where the active line's centre is kept, as a fraction of the height. Default `1/3`. */
+  anchor?: number;
+  /** Text size. Default by width: `large` from 720, `medium` from 480, `small` below. */
+  size?: LyricsSize;
+  /** The region's name. Default `"Lyrics"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Line type: `large` 32/44, `medium` 24/34, `small` 20/26. */
+export type LyricsSize = 'large' | 'medium' | 'small';
+
+export interface LyricsPreviewCardProps {
+  lines?: readonly LyricLine[];
+  /** Plain, unsynced lyrics — the card shows the first lines. */
+  text?: string;
+  currentTime?: number;
+  artworkColor?: string | null;
+  /** The card's heading. Default `"Lyrics"`. */
+  title?: string;
+  /** How many lines the card shows. Default `5`. */
+  visibleLines?: 4 | 5;
+  /** Called by the "Show lyrics" button. Without it the button is not drawn. */
+  onShowLyrics?: () => void;
+  /** Default `"Show lyrics"`. */
+  showLyricsLabel?: string;
+  /** Makes the lines pressable, as in {@link LyricsViewProps.onSeekLine}. */
+  onSeekLine?: (line: LyricLine, index: number) => void;
+  /** A small footer, e.g. "Lyrics provided by …". */
+  providerText?: string;
+  /** Drawn when there are no lyrics. Default "Lyrics aren’t available for this track". */
+  emptyText?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** Every colour the lyrics paint. */
+export interface LyricsPalette {
+  background: string;
+  /** The active line, and every line of unsynced lyrics. */
+  active: string;
+  /** Lines still to come. */
+  upcoming: string;
+  /** Lines already sung. */
+  past: string;
+  /** The footer and small print. */
+  muted: string;
+  /** The pill buttons: a fill in the active colour, a label in the background colour. */
+  pill: string;
+  pillHover: string;
+  onPill: string;
+  ring: string;
+  /** Whether the colours came from `artworkColor`. */
+  fromArtwork: boolean;
+}

package/src/map-marker/MapAreaCircle.tsx

@@ -0,0 +1,92 @@
+import React, { memo, useMemo } from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { borderRadius } from '../styles/tokens';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { AREA_BORDER_WIDTH, AREA_FILL_OPACITY, resolveMapMarkerPaint } from './shared';
+import type { MapAreaCircleProps } from './types';
+
+/**
+ * The approximate location of a listing whose exact address is private: a
+ * circle the app sizes from its own map projection.
+ *
+ *   circle   2 × radius square, round; the accent at 15% as the fill and a
+ *            1.5px accent edge (accent-500; dark accent-400)
+ *   label    optional, centred: a 24 tall surface pill, caption-1-semibold,
+ *            hairline and shadow-s — the price pill's family
+ *
+ * The fill is a separate layer at `opacity: 0.15` rather than a colour with
+ * alpha, so the edge stays solid and no colour is derived from a token.
+ *
+ * It never takes a press (`pointerEvents="none"`): the map under it keeps its
+ * gestures. Like the markers it positions nothing — centre it on the
+ * coordinate. With `accessibilityLabel` it is an `img`; otherwise decorative.
+ */
+
+const LABEL_HEIGHT = 24;
+
+function MapAreaCircleComponent({ radius, label, accessibilityLabel, style, testID }: MapAreaCircleProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveMapMarkerPaint(theme), [theme]);
+  const r = Math.max(0, radius);
+  const size = r * 2;
+
+  const circleStyle: ViewStyle = {
+    width: size,
+    height: size,
+    borderRadius: r,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+  const layer: ViewStyle = {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: r,
+  };
+
+  return (
+    <View
+      pointerEvents="none"
+      {...(accessibilityLabel ? { role: 'img' as const, accessibilityLabel } : null)}
+      style={[circleStyle, style]}
+      testID={testID}
+    >
+      <View
+        style={[layer, { backgroundColor: paint.area, opacity: AREA_FILL_OPACITY }]}
+        testID={testID ? `${testID}-fill` : undefined}
+      />
+      <View
+        style={[layer, { borderWidth: AREA_BORDER_WIDTH, borderColor: paint.area }]}
+        testID={testID ? `${testID}-edge` : undefined}
+      />
+      {label ? (
+        <View
+          style={{
+            height: LABEL_HEIGHT,
+            justifyContent: 'center',
+            paddingLeft: 10,
+            paddingRight: 10,
+            borderRadius: borderRadius.full,
+            borderWidth: 1,
+            borderColor: paint.border,
+            backgroundColor: paint.surface,
+            ...bloomShadowStyle('s'),
+          }}
+          testID={testID ? `${testID}-label` : undefined}
+        >
+          <Text variant="caption-1-semibold" numberOfLines={1} style={{ color: paint.label }}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const MapAreaCircle = memo(MapAreaCircleComponent);
+MapAreaCircle.displayName = 'MapAreaCircle';

package/src/map-marker/MapListingPreview.tsx

@@ -8,6 +8,8 @@ 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 { ListingFacts, ListingOfferings, ListingPriceLines } from '../listing-card/parts';
+import { resolvePriceLines } from '../listing-card/shared';
 import { Rating } from '../rating';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -31,6 +33,9 @@ import type { MapListingPreviewProps } from './types';
  *   body        title body-2-semibold + Rating small on one line,
  *               subtitle body-2-regular secondary, 4 · price line:
  *               [original struck, secondary] price body-2-semibold, detail body-2-regular secondary
+ *   housing     offerings: small tinted badges above the title; `priceLines`
+ *               stacked; facts a 14px-icon row under them — the SAME parts
+ *               `ListingCard` draws (`listing-card/parts.tsx`)
  *   close       Button secondary xs iconOnly — over the photo's top-left
  *               (vertical) or the card's top-right (compact)
  *   heart       24 round surface pill, 14px heart — the photo's other top corner;
@@ -118,6 +123,10 @@ function MapListingPreviewComponent({
   price,
   priceDetail,
   originalPrice,
+  priceLines,
+  facts,
+  offerings,
+  offeringLabels,
   favorite = false,
   onFavoriteChange,
   onClose,
@@ -228,6 +237,16 @@ function MapListingPreviewComponent({
           paddingRight: compact && onClose ? INSET + 24 + 8 : 12,
         }}
       >
+        {offerings && offerings.length > 0 ? (
+          <ListingOfferings
+            offerings={offerings}
+            labels={offeringLabels}
+            size="small"
+            variant="tinted"
+            style={{ gap: 4, marginBottom: 4 }}
+            testID={testID ? `${testID}-offerings` : undefined}
+          />
+        ) : null}
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
           <Text
             variant="body-2-semibold"
@@ -248,20 +267,40 @@ function MapListingPreviewComponent({
             {subtitle}
           </Text>
         ) : null}
-        <Text variant="body-2-regular" numberOfLines={1} style={{ marginTop: 4, color: paint.labelSecondary }}>
-          {originalPrice ? (
-            <Text
-              variant="body-2-regular"
-              style={{ color: paint.labelSecondary, textDecorationLine: 'line-through' }}
-            >
-              {originalPrice}{' '}
+        {priceLines ? (
+          <ListingPriceLines
+            lines={resolvePriceLines({ priceLines })}
+            size="small"
+            color={paint.label}
+            secondaryColor={paint.labelSecondary}
+            style={{ marginTop: 4 }}
+            testID={testID ? `${testID}-price` : undefined}
+          />
+        ) : price ? (
+          <Text variant="body-2-regular" numberOfLines={1} style={{ marginTop: 4, color: paint.labelSecondary }}>
+            {originalPrice ? (
+              <Text
+                variant="body-2-regular"
+                style={{ color: paint.labelSecondary, textDecorationLine: 'line-through' }}
+              >
+                {originalPrice}{' '}
+              </Text>
+            ) : null}
+            <Text variant="body-2-semibold" style={{ color: paint.label }}>
+              {price}
             </Text>
-          ) : null}
-          <Text variant="body-2-semibold" style={{ color: paint.label }}>
-            {price}
+            {priceDetail ? ` ${priceDetail}` : null}
           </Text>
-          {priceDetail ? ` ${priceDetail}` : null}
-        </Text>
+        ) : null}
+        {facts && facts.length > 0 ? (
+          <ListingFacts
+            facts={facts}
+            size="small"
+            color={paint.labelSecondary}
+            style={{ marginTop: 4 }}
+            testID={testID ? `${testID}-facts` : undefined}
+          />
+        ) : null}
       </View>
 
       {onPress ? (

package/src/map-marker/MapPriceMarker.tsx

@@ -14,9 +14,13 @@ import type { MapPriceMarkerProps } from './types';
 /**
  * A price pill for the app's own map.
  *
- *   geometry   28 tall, full pill, 10 side padding (8 before a heart), 1px hairline
- *   text       body-2-semibold, tabular
- *   default    surface, hairline, shadow-s; hover: the hairline darkens
+ *   default    28 tall, 10 side padding (8 before a heart), body-2-semibold,
+ *              12px heart
+ *   compact    22 tall, 8 side padding (6 before a heart), caption-1-semibold,
+ *              10px heart — for a dense map
+ *   both       full pill, 1px hairline, tabular figures, never truncated: the
+ *              app passes a SHORT price ("€240K", "€950/mo")
+ *   at rest    surface, hairline, shadow-s; hover: the hairline darkens
  *   active     inverted fill and label, no hairline, shadow-m
  *   visited    muted fill and secondary label, shadow-s
  *   saved      a 12px heart before the price
@@ -28,11 +32,15 @@ import type { MapPriceMarkerProps } from './types';
  * `accessibilityLabel`.
  */
 
-const HEIGHT = 28;
+const GEOMETRY = {
+  default: { height: 28, padding: 10, heartPadding: 8, heart: 12, gap: 4, type: 'body-2-semibold' },
+  compact: { height: 22, padding: 8, heartPadding: 6, heart: 10, gap: 3, type: 'caption-1-semibold' },
+} as const;
 
 function MapPriceMarkerComponent({
   price,
   state = 'default',
+  size = 'default',
   saved = false,
   onPress,
   accessibilityLabel,
@@ -46,6 +54,7 @@ function MapPriceMarkerComponent({
     adoptStyleSheet(MAP_MARKER_STYLE_ID, MAP_MARKER_CSS);
   }, []);
 
+  const geometry = GEOMETRY[size];
   const active = state === 'active';
   const visited = state === 'visited';
 
@@ -62,11 +71,11 @@ function MapPriceMarkerComponent({
   const pillStyle: WebCssStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
-    height: HEIGHT,
-    paddingLeft: saved ? 8 : 10,
-    paddingRight: 10,
-    borderRadius: HEIGHT / 2,
+    gap: geometry.gap,
+    height: geometry.height,
+    paddingLeft: saved ? geometry.heartPadding : geometry.padding,
+    paddingRight: geometry.padding,
+    borderRadius: geometry.height / 2,
     borderWidth: 1,
     borderColor: border,
     backgroundColor: fill,
@@ -84,17 +93,17 @@ function MapPriceMarkerComponent({
       onPress={onPress}
       onHoverIn={onIn}
       onHoverOut={onOut}
-      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+      hitSlop={size === 'compact' ? { top: 11, bottom: 11, left: 4, right: 4 } : { top: 8, bottom: 8, left: 4, right: 4 }}
       testID={testID}
       style={[pillStyle, style]}
     >
       {saved ? (
         <View testID={testID ? `${testID}-saved` : undefined}>
-          <RiHeart3Fill width={12} height={12} fill={active ? paint.activeHeart : paint.heart} />
+          <RiHeart3Fill width={geometry.heart} height={geometry.heart} fill={active ? paint.activeHeart : paint.heart} />
         </View>
       ) : null}
       <Text
-        variant="body-2-semibold"
+        variant={geometry.type}
         numberOfLines={1}
         style={{ color: label, fontVariant: ['tabular-nums'] }}
       >

package/src/map-marker/index.ts

@@ -1,12 +1,15 @@
+export { MapAreaCircle } from './MapAreaCircle';
 export { MapClusterMarker } from './MapClusterMarker';
 export { MapListingPreview } from './MapListingPreview';
 export { MapPriceMarker } from './MapPriceMarker';
 export { MapSearchAreaButton } from './MapSearchAreaButton';
 export type {
+  MapAreaCircleProps,
   MapClusterMarkerProps,
   MapListingPreviewLayout,
   MapListingPreviewProps,
   MapMarkerState,
   MapPriceMarkerProps,
+  MapPriceMarkerSize,
   MapSearchAreaButtonProps,
 } from './types';

package/src/map-marker/shared.ts

@@ -14,6 +14,7 @@
  *   visited label      neutral-500        neutral-400
  *   saved heart        red-500            red-500
  *   saved heart, active red-400           red-700   (on the inverted fill)
+ *   area                accent-500         accent-400  (fill at 15%, 1.5px edge)
  *
  * The surface family is `floating/menu-palette.ts`'s — a marker, the preview
  * card and the search pill are floating things over a map, painted like a
@@ -45,8 +46,15 @@ export interface MapMarkerPaint {
   /** Photo placeholder behind an image that has not loaded. */
   placeholder: string;
   ring: string;
+  /** The approximate-area circle's edge; its fill is this at {@link AREA_FILL_OPACITY}. */
+  area: string;
 }
 
+/** The approximate-area circle's fill opacity. */
+export const AREA_FILL_OPACITY = 0.15;
+/** The approximate-area circle's edge width. */
+export const AREA_BORDER_WIDTH = 1.5;
+
 /** Pure, so it can be walked over presets and modes. */
 export function resolveMapMarkerPaint(theme: Theme): MapMarkerPaint {
   const menu = resolveMenuPalette(theme);
@@ -71,6 +79,7 @@ export function resolveMapMarkerPaint(theme: Theme): MapMarkerPaint {
     activeHeart: dark ? red[700] : red[400],
     placeholder: dark ? n[700] : n[100],
     ring: accent[500],
+    area: dark ? accent[400] : accent[500],
   };
 }