@oxy.so/bloom 2.10.0 → 2.12.0

package/src/offering-badge/shared.ts

@@ -1,14 +1,12 @@
-import type { ComponentType } from 'react';
-
-import { resolveButtonRamps } from '../button/shared';
+import { BADGE_GEOMETRY, resolveBadgePaint, type BadgeGeometry, type BadgeSize } from '../badge';
+import type { BloomIconComponent } from '../icons/icon-component';
 import { RiArrowLeftRightLine } from '../icons/remix/RiArrowLeftRightLine';
 import { RiKey2Line } from '../icons/remix/RiKey2Line';
 import { RiPriceTag3Line } from '../icons/remix/RiPriceTag3Line';
 import { RiSuitcaseLine } from '../icons/remix/RiSuitcaseLine';
 import type { Offering } from '../listing-card/types';
-import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
+import type { AccentTone } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
-import type { TypeScaleVariant } from '../typography/scale';
 import type { OfferingBadgeSize, OfferingBadgeVariant } from './types';
 
 /** Every offering, in the order a listing lists them. */
@@ -22,9 +20,7 @@ export const OFFERING_LABELS: Readonly<Record<Offering, string>> = {
   exchange: 'Swap',
 };
 
-export const OFFERING_ICONS: Readonly<
-  Record<Offering, ComponentType<{ width?: number; height?: number; fill?: string }>>
-> = {
+export const OFFERING_ICONS: Readonly<Record<Offering, BloomIconComponent>> = {
   long_term_rent: RiKey2Line,
   sale: RiPriceTag3Line,
   short_term_rent: RiSuitcaseLine,
@@ -47,28 +43,35 @@ export const OFFERING_TONES: Readonly<Record<Offering, AccentTone>> = {
   exchange: 'default',
 };
 
-export interface OfferingBadgeGeometry {
-  height: number;
-  paddingHorizontal: number;
-  gap: number;
-  icon: number;
-  type: TypeScaleVariant;
-}
+/**
+ * Which `Badge` rung each offering size is. The geometry itself is `Badge`'s —
+ * this family owns the housing VOCABULARY (which word, which glyph, which
+ * tone) and nothing else. It used to own a second copy of the rung table, which
+ * is how the listing card's status pill ended up with a third.
+ */
+export const OFFERING_BADGE_RUNG: Readonly<Record<OfferingBadgeSize, BadgeSize>> = {
+  small: 'label-small',
+  medium: 'label-medium',
+};
+
+export type OfferingBadgeGeometry = BadgeGeometry;
 
 /**
  *             height  padding-x  gap  icon  text
  *   small     20      8          4    12    caption-1-semibold
  *   medium    24      10         4    14    body-2-semibold
+ *
+ * Read through from `BADGE_GEOMETRY` so there is one table, not two.
  */
 export const OFFERING_BADGE_GEOMETRY: Readonly<Record<OfferingBadgeSize, OfferingBadgeGeometry>> = {
-  small: { height: 20, paddingHorizontal: 8, gap: 4, icon: 12, type: 'caption-1-semibold' },
-  medium: { height: 24, paddingHorizontal: 10, gap: 4, icon: 14, type: 'body-2-semibold' },
+  small: BADGE_GEOMETRY['label-small'],
+  medium: BADGE_GEOMETRY['label-medium'],
 };
 
 export interface OfferingBadgePaint {
   background: string;
   foreground: string;
-  /** The icon: the tone's own accent when tinted; over a photo, the same dark neutral as the label. */
+  /** The icon: the same colour as the label, on both variants. */
   icon: string;
   /** `bloomShadowStyle` step, or `null` for none. */
   shadow: 's' | null;
@@ -81,16 +84,15 @@ export interface OfferingBadgePaint {
  *             colour policy gates at AA over the page, so nothing is derived here
  *   onMedia   neutral-50 pill, neutral-900 label and icon, shadow-s; the same in
  *             both modes, because the photo under it does not change with them
+ *
+ * Both are `Badge`'s own paint (`resolveBadgePaint`); this maps the offering to
+ * its tone and the variant to the badge's fill.
  */
 export function resolveOfferingBadgePaint(
   theme: Theme,
   offering: Offering,
   variant: OfferingBadgeVariant,
 ): OfferingBadgePaint {
-  if (variant === 'onMedia') {
-    const { neutral: n } = resolveButtonRamps(theme);
-    return { background: n[50], foreground: n[900], icon: n[900], shadow: 's' };
-  }
-  const pair = resolveAccentColors(theme.colors, OFFERING_TONES[offering], 'subtle');
-  return { background: pair.background, foreground: pair.foreground, icon: pair.foreground, shadow: null };
+  const paint = resolveBadgePaint(theme, OFFERING_TONES[offering], variant === 'onMedia' ? 'onMedia' : 'subtle');
+  return { background: paint.background, foreground: paint.foreground, icon: paint.foreground, shadow: paint.shadow };
 }

package/src/offering-badge/types.ts

@@ -2,6 +2,7 @@ import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { Offering } from '../listing-card/types';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** `small` is 20 tall with caption text; `medium` (default) is 24 tall with body-2 text. */
 export type OfferingBadgeSize = 'small' | 'medium';
@@ -13,7 +14,8 @@ export type OfferingBadgeSize = 'small' | 'medium';
 export type OfferingBadgeVariant = 'tinted' | 'onMedia';
 
 /** An icon component the badge draws at its own size and colour (`RiKey2Line`). */
-export type OfferingBadgeIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type OfferingBadgeIcon = BloomIconComponent;
 
 export interface OfferingBadgeProps {
   /** What the listing is offered as. Picks the default label, icon and tint. */

package/src/overlay/Overlay.tsx

@@ -55,6 +55,7 @@ import Animated, { useAnimatedStyle, type SharedValue } from 'react-native-reani
 
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { StyledView } from '../styles/styled-primitives';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { layerForRank, type OverlayLayer } from './stack';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
@@ -177,7 +178,39 @@ function OverlayRootView({
         style={[styles.root, { zIndex: layer.root }, style]}
         testID={testID}
       >
-        {children}
+        {/*
+          A portaled surface starts a NEW painting context: what is behind it is
+          never whatever painted the control that opened it. React context flows
+          through a portal even though the DOM does not, so without this reset a
+          dialog opened from inside a `ContentPanel` inherited "I am on a card"
+          and painted itself differently from the same dialog opened from a bare
+          screen — the surface deciding its colours from where its TRIGGER lives.
+
+          This publishes the RUNG ALONE, with no `fill`, and that is the honest
+          shape of what an `OverlayRoot` knows. It paints nothing itself — it is
+          a transparent, `box-none` full-screen layer — so it has no colour to
+          report; what it can say truthfully is "you are not on the surface your
+          trigger was on". Level 0 is the assumption that costs least when
+          nothing better arrives: the page rung, which is what every unwrapped
+          consumer already assumed and what the plain overlay bodies do paint.
+
+          The surfaces that DO know their colour say so inside this root, and
+          being nested here is what makes each of those an absolute claim rather
+          than a step off an ancestor it cannot see:
+
+            `dialog/Dialog`            level 0, fill `theme.colors.background`
+            `bottom-sheet/…Base`       level 0, fill `theme.colors.background`
+            `floating/FloatingPanel`   level 1 — the menu/popover surface
+
+          Two portaled surfaces still paint something they do not publish:
+          `SettingsModal` paints `resolveSettingsPalette(theme).full` and
+          `Tooltip` the menu palette, so content inside either reads the page
+          rung rather than their real fill. That is an approximation inherited
+          from before the ladder existed, not a claim made here — and the fix is
+          for each of them to publish its own `fill`, not for this root to guess
+          one on their behalf.
+        */}
+        <SurfaceLevelProvider level={0}>{children}</SurfaceLevelProvider>
       </StyledView>
     </OverlayLayerContext.Provider>
   );

package/src/overlay/dropdown-placement.ts

@@ -21,6 +21,8 @@
  * job and is verified in a browser.
  */
 
+import { clamp } from '../styles/clamp';
+
 /** Viewport-relative box the surface is positioned against. A right-click point is a zero-area anchor. */
 export interface DropdownAnchor {
   top: number;
@@ -72,18 +74,6 @@ export interface DropdownPlacement {
   left: number;
 }
 
-/**
- * Clamp into `[min, max]`, resolving an inverted range to `min`.
- *
- * The range inverts exactly when the surface is larger than the viewport minus
- * its gutters. Preferring `min` then pins the surface to the top/left gutter and
- * lets it overflow the far edge, so its FIRST rows stay reachable — the opposite
- * choice would push its start off-screen and strand every row.
- */
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(value, max));
-}
-
 /**
  * The MAIN axis: sit on the preferred side of the anchor when the surface fits
  * there, else flip to the other side, else clamp the preferred position into the

package/src/patient-info-card/types.ts

@@ -1,8 +1,10 @@
 import type { ComponentType } from 'react';
 import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** An icon COMPONENT (`RiDropLine`, not an element) — the row sizes and colours it. */
-export type PatientInfoCardIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type PatientInfoCardIcon = BloomIconComponent;
 
 export interface PatientInfoCardDetail {
   icon: PatientInfoCardIcon;

package/src/place-reviews/PlaceReviewCard.tsx

@@ -13,11 +13,12 @@ import {
   RiThumbUpFill,
   RiThumbUpLine,
 } from '../icons/remix';
-import { useContainerWidth } from '../listing-details/use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 import { Rating, RatingBar } from '../rating';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { HousingCard, HousingToggleButton, useHousingPalette, useHousingWebCss } from '../tenancy/parts';
-import { IS_WEB, webData } from '../tenancy/shared';
+import { IS_WEB } from '../tenancy/shared';
 import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -206,7 +207,7 @@ function PlaceReviewCardComponent({
           </View>
           {truncatable ? (
             <Pressable
-              {...webData({ bloomHousingFocus: '' })}
+              {...webDataSet({ bloomHousingFocus: '' })}
               accessibilityRole="button"
               accessibilityLabel={expanded ? showLessLabel : showMoreLabel}
               aria-expanded={expanded}

package/src/property-insights/EnergyLabel.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { RiTimeLine } from '../icons/remix';
-import { useContainerWidth } from '../listing-details/use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {

package/src/property-insights/NeighbourhoodScores.tsx

@@ -1,8 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
 
-import { useContainerWidth } from '../listing-details/use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { Meter, MeterRing } from '../stat-bar';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { NEIGHBOURHOOD_SCORES_TWO_COLUMN_MIN_WIDTH } from './constants';
@@ -15,10 +15,11 @@ import type { NeighbourhoodScore, NeighbourhoodScoresProps } from './types';
  *
  *   columns   `auto`: 1 below 560 wide, 2 from 560; 32 apart, rows 24 apart
  *   bars      icon 20 + label (body-medium) + score right (body-semibold,
- *             tabular); 8 below, a 6-tall neutral-100 (dark neutral-800) track,
- *             radius 3, filled primary to `value / max`; the description
- *             (body-2-regular, text-secondary) 8 below
- *   rings     a 56 ring (5 stroke, same track and fill, starting at 12
+ *             tabular); 8 below, a 6-tall `Meter` — the shared neutral-200
+ *             (dark neutral-700) track, radius 3, filled with the accent to
+ *             `value / max`; the description (body-2-regular, text-secondary)
+ *             8 below
+ *   rings     a 56 `MeterRing` (5 stroke, same track and fill, starting at 12
  *             o'clock) with the score centred (body-semibold); the label
  *             (body-medium) and description beside it, 16 apart
  *
@@ -61,21 +62,15 @@ function BarItem({ item, max, palette, valueText, display, testID }: ItemProps)
           {display}
         </Text>
       </View>
-      <View
-        accessibilityRole="progressbar"
+      <Meter
+        value={clamped}
+        max={max}
+        height={6}
         accessibilityLabel={item.label}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-valuenow={clamped}
-        aria-valuetext={valueText}
+        valueText={valueText}
         testID={testID ? `${testID}-bar` : undefined}
-        style={{ height: 6, borderRadius: 3, backgroundColor: palette.track, overflow: 'hidden' }}
-      >
-        <View
-          testID={testID ? `${testID}-fill` : undefined}
-          style={{ width: `${(clamped / max) * 100}%`, height: '100%', borderRadius: 3, backgroundColor: palette.accent }}
-        />
-      </View>
+        fillTestID={testID ? `${testID}-fill` : undefined}
+      />
       {item.description ? (
         <Text variant="body-2-regular" style={{ color: palette.textSecondary }}>
           {item.description}
@@ -87,40 +82,21 @@ function BarItem({ item, max, palette, valueText, display, testID }: ItemProps)
 
 function RingItem({ item, max, palette, valueText, display, testID }: ItemProps) {
   const clamped = Math.min(max, Math.max(0, item.value));
-  const r = (RING - RING_STROKE) / 2;
-  const circumference = 2 * Math.PI * r;
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
-      <View
-        accessibilityRole="progressbar"
+      <MeterRing
+        value={clamped}
+        max={max}
+        size={RING}
+        thickness={RING_STROKE}
         accessibilityLabel={item.label}
-        aria-valuemin={0}
-        aria-valuemax={max}
-        aria-valuenow={clamped}
-        aria-valuetext={valueText}
+        valueText={valueText}
         testID={testID ? `${testID}-ring` : undefined}
-        style={{ width: RING, height: RING, alignItems: 'center', justifyContent: 'center' }}
       >
-        <Svg width={RING} height={RING} style={{ position: 'absolute', top: 0, left: 0 }}>
-          <Circle cx={RING / 2} cy={RING / 2} r={r} stroke={palette.track} strokeWidth={RING_STROKE} fill="none" />
-          <Circle
-            cx={RING / 2}
-            cy={RING / 2}
-            r={r}
-            stroke={palette.accent}
-            strokeWidth={RING_STROKE}
-            fill="none"
-            strokeLinecap="round"
-            strokeDasharray={`${circumference} ${circumference}`}
-            strokeDashoffset={circumference * (1 - clamped / max)}
-            transform={`rotate(-90 ${RING / 2} ${RING / 2})`}
-            testID={testID ? `${testID}-arc` : undefined}
-          />
-        </Svg>
         <Text variant="body-semibold" style={{ color: palette.text, fontVariant: ['tabular-nums'] }}>
           {display}
         </Text>
-      </View>
+      </MeterRing>
       <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
         <Text variant="body-medium" style={{ color: palette.text }}>
           {item.label}

package/src/property-insights/PriceEstimate.tsx

@@ -4,9 +4,10 @@ import { Pressable, View } from 'react-native';
 import { Chip } from '../chip';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiArrowDownSLine, RiArrowUpSLine } from '../icons/remix';
-import { useContainerWidth } from '../listing-details/use-container-width';
+import { useContainerWidth } from '../hooks/use-container-width';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import type { AccentTone } from '../theme/accent-colors';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -15,7 +16,6 @@ import {
   PROPERTY_INSIGHTS_STYLE_ID,
   formatEuros,
   resolveInsightPalette,
-  webData,
 } from './shared';
 import type { EstimateConfidence, PriceEstimateProps, PriceVerdict } from './types';
 
@@ -366,7 +366,7 @@ function PriceEstimateComponent({
       {hasReasons ? (
         <View style={{ gap: 10 }}>
           <Pressable
-            {...webData({ bloomInsightPress: '' })}
+            {...webDataSet({ bloomInsightPress: '' })}
             accessibilityRole="button"
             accessibilityLabel={reasonsLabel}
             aria-expanded={expanded}

package/src/property-insights/PricePerAreaComparison.tsx

@@ -1,6 +1,8 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
+import { chartHueTone, resolveChartCardPalette } from '../chart-cards/palette';
+import { Meter } from '../stat-bar';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { resolveInsightPalette } from './shared';
@@ -12,9 +14,24 @@ import type { PricePerAreaComparisonProps } from './types';
  *   row     label (body-regular; body-semibold when highlighted) and the
  *           display value right-aligned (body-semibold, tabular), 8 above an
  *           8-tall bar; rows 16 apart
- *   bar     neutral-100 (dark neutral-800) track, radius 4; the fill is
- *           `value / largest value` of the track — primary for the
- *           `highlight` row, neutral-300 (dark neutral-700) for the others
+ *   bar     8 tall, radius 4, `value / largest value` wide — and NO rail
+ *
+ * THE COLOURS COME FROM THE CHART PALETTE, NOT THE METER'S, AND THERE IS NO
+ * RAIL. This is the one family in the fold that is a CHART rather than a meter:
+ * each bar is a different subject compared against the others, so its colour
+ * encodes WHICH datum it is, not how much of one thing there is. The
+ * highlighted row takes `chart-6` — the brand-anchored blue, a data hue that
+ * rotates with the preset — and the comparators `neutralSeries`. Painting them
+ * with the accent would have said they were progress toward something.
+ *
+ * The rail went with them, and it had to: `neutralSeries` is `neutral-800` in
+ * dark, drawn against a `neutral-900` card, so on ANY rail dark enough to read
+ * as a rail it lands on the rail's own colour and disappears. A bar chart does
+ * not draw the remainder anyway — the row already states the value in words,
+ * and the lengths are the comparison. The first attempt kept the rail and used
+ * `resolveMonoTone` instead, which is legible in both modes but paints the
+ * comparators heavier than the highlighted row: the emphasis inverted, which a
+ * colour assertion cannot see and a screenshot can.
  *
  * Bars start from zero — a price-per-area bar cropped at a baseline would
  * exaggerate a small difference. The list is named by `accessibilityLabel`,
@@ -28,47 +45,46 @@ function PricePerAreaComparisonComponent({
 }: PricePerAreaComparisonProps) {
   const theme = useTheme();
   const palette = useMemo(() => resolveInsightPalette(theme), [theme]);
+  const series = useMemo(
+    () => ({ highlight: chartHueTone(theme, 6).color, rest: resolveChartCardPalette(theme).neutralSeries }),
+    [theme],
+  );
   const max = Math.max(0, ...rows.map((r) => r.value));
 
   return (
     <View role="list" accessibilityLabel={accessibilityLabel} style={[{ width: '100%', gap: 16 }, style]} testID={testID}>
-      {rows.map((row, index) => {
-        const ratio = max > 0 ? Math.max(0, row.value) / max : 0;
-        return (
-          <View
-            key={`${row.label}-${index}`}
-            role="listitem"
-            accessible
-            accessibilityLabel={`${row.label}: ${row.display}`}
-            style={{ gap: 8 }}
-            testID={testID ? `${testID}-row-${index}` : undefined}
-          >
-            <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 12 }}>
-              <Text
-                variant={row.highlight ? 'body-semibold' : 'body-regular'}
-                numberOfLines={1}
-                style={{ flex: 1, minWidth: 0, color: palette.text }}
-              >
-                {row.label}
-              </Text>
-              <Text variant="body-semibold" style={{ color: palette.text, fontVariant: ['tabular-nums'] }}>
-                {row.display}
-              </Text>
-            </View>
-            <View style={{ height: 8, borderRadius: 4, backgroundColor: palette.track, overflow: 'hidden' }}>
-              <View
-                testID={testID ? `${testID}-row-${index}-fill` : undefined}
-                style={{
-                  width: `${ratio * 100}%`,
-                  height: '100%',
-                  borderRadius: 4,
-                  backgroundColor: row.highlight ? palette.accent : palette.bar,
-                }}
-              />
-            </View>
+      {rows.map((row, index) => (
+        <View
+          key={`${row.label}-${index}`}
+          role="listitem"
+          accessible
+          accessibilityLabel={`${row.label}: ${row.display}`}
+          style={{ gap: 8 }}
+          testID={testID ? `${testID}-row-${index}` : undefined}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 12 }}>
+            <Text
+              variant={row.highlight ? 'body-semibold' : 'body-regular'}
+              numberOfLines={1}
+              style={{ flex: 1, minWidth: 0, color: palette.text }}
+            >
+              {row.label}
+            </Text>
+            <Text variant="body-semibold" style={{ color: palette.text, fontVariant: ['tabular-nums'] }}>
+              {row.display}
+            </Text>
           </View>
-        );
-      })}
+          <Meter
+            decorative
+            value={Math.max(0, row.value)}
+            max={max}
+            height={8}
+            fill={row.highlight ? series.highlight : series.rest}
+            track="transparent"
+            fillTestID={testID ? `${testID}-row-${index}-fill` : undefined}
+          />
+        </View>
+      ))}
     </View>
   );
 }

package/src/property-insights/shared.ts

@@ -1,19 +1,17 @@
 import { Platform } from 'react-native';
 
+import { groupThousands } from '../chart-cards/primitives/format';
 import { resolveButtonRamps } from '../button/shared';
 import { oklchToSrgb, srgbToOklch, srgbToRgbString, type Oklch } from '../theme/color-space';
 import { parseRgba } from '../theme/color-utils';
+import { quietTextOver } from '../styles/color-contrast';
+import { AA_TEXT } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type { EnergyClass } from './types';
 import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
 
 export const IS_WEB = Platform.OS === 'web';
 
-/** `dataSet` hooks for the adopted sheet; nothing on native. */
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}
-
 /**
  * Every neutral and accent colour the insight parts paint. Pure.
  *
@@ -54,7 +52,10 @@ export function resolveInsightPalette(theme: Theme): InsightPalette {
   return {
     text: c.text,
     textSecondary: c.textSecondary,
-    muted: c.textTertiary,
+    // `theme.colors.textTertiary` is the theme's ONE quiet-text token, which is
+    // floored against the page — and this family paints quiet labels on `card`
+    // too. Read the rung off the card so the harder of the two surfaces decides.
+    muted: quietTextOver([c.background, dark ? n[900] : c.card], c.text, AA_TEXT),
     hairline: dark ? n[800] : n[200],
     track: dark ? n[800] : n[100],
     bar: dark ? n[700] : n[300],
@@ -105,8 +106,6 @@ function fitRgb({ l, c, h }: Oklch): string {
   return srgbToRgbString(oklchToSrgb({ l, c: chroma, h }));
 }
 
-
-
 /**
  * Lightness and chroma per class, A → G: a dark green, brightening to a light
  * yellow at D, darkening again to a deep red. The standard scale's shape —
@@ -155,15 +154,8 @@ export function resolveEnergyTones(theme: Theme): EnergyTone[] {
 //  Formatting
 // ---------------------------------------------------------------------------
 
-/** `385000` → `"385,000"`. */
-export function groupDigits(value: number): string {
-  const rounded = Math.round(value);
-  const sign = rounded < 0 ? '-' : '';
-  return sign + String(Math.abs(rounded)).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-
 /** The default price format: `€385,000`. Apps pass their own `format` for currency and locale. */
-export const formatEuros = (value: number) => `€${groupDigits(value)}`;
+export const formatEuros = (value: number) => `€${groupThousands(value)}`;
 
 /** The default axis format: `€385K`, `€1.2M`. */
 export function formatEurosCompact(value: number): string {

package/src/property-insights/types.ts

@@ -2,9 +2,11 @@ import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { AccentTone } from '../theme/accent-colors';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /** An icon COMPONENT (`RiBusLine`, not `<RiBusLine />`); the part sizes and colours it. */
-export type InsightIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type InsightIcon = BloomIconComponent;
 
 // ---------------------------------------------------------------------------
 //  EnergyLabel / EnergyBadge

package/src/questionnaire/Questionnaire.tsx

@@ -29,16 +29,11 @@ import Animated, {
 
 import { Button, CloseButton } from '../button';
 import { mixColor, resolveButtonRamps } from '../button/shared';
-import {
-  CHECKBOX_GLYPH_CSS,
-  CHECKBOX_GLYPH_STYLE_ID,
-  CheckboxGlyph,
-  resolveCheckboxPaint,
-  type CheckboxPaint,
-} from '../checkbox/shared';
+import { CHECKBOX_GLYPH_CSS, CHECKBOX_GLYPH_STYLE_ID, CheckboxGlyph, resolveCheckboxPaint, type CheckboxPaint } from '../checkbox/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { clamp } from '../styles/clamp';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -160,7 +155,6 @@ const PILL_HOVER_MS = 200;
 const EASE = Easing.bezier(0.22, 1, 0.36, 1);
 const PILL_EASE = Easing.bezier(0.34, 1.2, 0.64, 1);
 
-
 const BODY_MEDIUM: TextStyle = TYPE_SCALE['body-medium'];
 const BODY_REGULAR: TextStyle = TYPE_SCALE['body-regular'];
 const BODY_2_MEDIUM: TextStyle = TYPE_SCALE['body-2-medium'];
@@ -177,8 +171,6 @@ const DEFAULT_LABELS: Required<QuestionnaireLabels> = {
   steps: 'Steps',
 };
 
-const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-
 // ---------------------------------------------------------------------------
 //  Web CSS: focus rings, colour transitions, the check draw-in. Every hook is a
 //  `dataSet` attribute — react-native-web drops unknown props, and a class never