@oxyhq/bloom 0.89.0 → 1.0.0

package/src/alert-dialog/AlertDialog.tsx

@@ -19,9 +19,10 @@ type DialogComponent = React.ComponentType<DialogProps>;
  * the confirm/cancel props onto the Dialog's declarative `actions` row — the
  * SAME battle-tested `ActionRow`/`ActionButton` primitive every other bloom
  * confirm surface uses (e.g. Mention's `ConfirmPrompt`), so the button
- * component, layout, and palette stay identical across apps. Reach for the
- * imperative `confirm()` helper + `<AlertDialogHost />` to trigger a confirm
- * from an event handler without owning visible state.
+ * component, layout, and palette stay identical across apps. To trigger a
+ * confirm from an event handler without owning visible state, reach for the
+ * imperative `confirm()` in `@oxyhq/bloom/surfaces` — it presents onto the
+ * shared surface stack, so it layers over whatever is already open.
  *
  * Control mode — IMPERATIVE, not controlled. `AlertDialog` keeps its public
  * *controlled* API (`visible` boolean + `onClose`) but internally bridges it
@@ -30,11 +31,9 @@ type DialogComponent = React.ComponentType<DialogProps>;
  * Mention's `ConfirmPrompt` uses. That is the code path that actually plays the
  * exit animation on dismiss: imperative `close()` sets `isClosing`, runs the
  * exit animation, and fires `onClose` only once it settles. The controlled path
- * instead fires `onClose` synchronously — and because `<AlertDialogHost />`
- * resolves + drops the queue entry inside `onClose`, the surface would then
- * unmount instantly, skipping the exit animation entirely. Bridging to
- * imperative mode eliminates that fork so `confirm()` and Mention's
- * `ConfirmPrompt` are pixel/timing identical.
+ * instead fires `onClose` synchronously — so a host that unmounts the surface
+ * inside its own `onClose` handler races ahead of the exit animation and it
+ * never plays. Bridging to imperative mode eliminates that fork.
  *
  * The centered card uses the Dialog default `maxWidth` (480px) for full visual
  * parity with the shared confirm surface.
@@ -59,15 +58,13 @@ export function createAlertDialog(Dialog: DialogComponent) {
 
     // Bridge the public *controlled* `visible` prop onto the Dialog's
     // imperative open/close. Opening on mount straight from an effect (no
-    // `setTimeout`) mirrors bloom's own `AutoMountedDialog` (which backs
-    // `alert()`) — the canonical fresh-mount imperative-open pattern:
-    // `<AlertDialogHost />` mounts a FRESH `AlertDialog` per confirm
-    // (`key={id}`) with the final content already committed, so there is no
-    // stale-content window to defer past and the entry animation curve stays
-    // identical to Mention's. `control` is referentially stable (memoised on
-    // its id), so this effect only re-runs when `visible` actually flips. When
-    // a direct consumer flips `visible` to `false`, we imperatively `close()`
-    // so the exit animation still plays.
+    // `setTimeout`) is the canonical fresh-mount imperative-open pattern —
+    // `SurfaceHost`'s `SurfaceLayer` does the same — and it works because the
+    // component mounts with its final content already committed, so there is no
+    // stale-content window to defer past. `control` is referentially stable
+    // (memoised on its id), so this effect only re-runs when `visible` actually
+    // flips. When a consumer flips `visible` to `false`, we imperatively
+    // `close()` so the exit animation still plays.
     const closingFromPropRef = useRef(false);
     useEffect(() => {
       if (visible) {

package/src/alert-dialog/index.ts

@@ -1,13 +1,11 @@
 import { Dialog } from '../dialog/index';
 import { createAlertDialog } from './AlertDialog';
-import { createAlertDialogHost } from './AlertDialogHost';
 
+/**
+ * The declarative, CONTROLLED confirm dialog. The imperative counterpart is
+ * `confirm()` from `@oxyhq/bloom/surfaces`, which presents onto the shared
+ * surface stack — this family owns no queue and no host of its own.
+ */
 export const AlertDialog = createAlertDialog(Dialog);
-export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
-export { confirm } from './confirm-store';
-export type {
-  AlertDialogProps,
-  AlertDialogActionStyle,
-  ConfirmOptions,
-} from './types';
+export type { AlertDialogProps, AlertDialogActionStyle } from './types';

package/src/alert-dialog/index.web.ts

@@ -1,13 +1,7 @@
 import { Dialog } from '../dialog/index.web';
 import { createAlertDialog } from './AlertDialog';
-import { createAlertDialogHost } from './AlertDialogHost';
 
+/** Web variant of the `./alert-dialog` barrel — see `./index.ts`. */
 export const AlertDialog = createAlertDialog(Dialog);
-export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
-export { confirm } from './confirm-store';
-export type {
-  AlertDialogProps,
-  AlertDialogActionStyle,
-  ConfirmOptions,
-} from './types';
+export type { AlertDialogProps, AlertDialogActionStyle } from './types';

package/src/animated-check/AnimatedCheck.tsx

@@ -9,6 +9,7 @@ import Animated, {
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { useTheme } from '../theme';
+import type { AnimatedCheckRef, AnimatedCheckProps } from './types';
 
 /** Square viewBox the ring + check are drawn on. */
 const VIEW_BOX = 52;
@@ -26,18 +27,6 @@ const CIRCLE_DURATION = 500;
 /** Check draw-on duration (ms), started once the ring completes. */
 const CHECK_DURATION = 300;
 
-export interface AnimatedCheckRef {
-  /** Replays the draw-on animation from the start. */
-  play: () => void;
-}
-
-export interface AnimatedCheckProps {
-  /** Width and height in px. Defaults to `24`. */
-  size?: number;
-  /** Stroke color of the ring and check. Defaults to the theme success color. */
-  color?: string;
-}
-
 // `Animated.createAnimatedComponent` must be called once per underlying
 // component — calling it per render would remount the element and break the
 // animation — so the wrappers are built once at module scope.

package/src/animated-check/index.ts

@@ -1,2 +1,2 @@
 export { AnimatedCheck } from './AnimatedCheck';
-export type { AnimatedCheckProps, AnimatedCheckRef } from './AnimatedCheck';
+export type { AnimatedCheckProps, AnimatedCheckRef } from './types';

package/src/animated-check/types.ts

@@ -0,0 +1,11 @@
+export interface AnimatedCheckRef {
+  /** Replays the draw-on animation from the start. */
+  play: () => void;
+}
+
+export interface AnimatedCheckProps {
+  /** Width and height in px. Defaults to `24`. */
+  size?: number;
+  /** Stroke color of the ring and check. Defaults to the theme success color. */
+  color?: string;
+}

package/src/aspect-ratio/AspectRatio.tsx

@@ -0,0 +1,58 @@
+/**
+ * A box that keeps a fixed width-to-height ratio while its width is decided by
+ * the layout around it. The usual job: a media well that must not jump as an
+ * image loads, because its height was known before the image was.
+ *
+ * NOT a port. react-native-reusables' `aspect-ratio.tsx` is four lines
+ * re-exporting `@rn-primitives/aspect-ratio`'s Root — a primitive that exists on
+ * web because CSS needed `padding-bottom` tricks before `aspect-ratio` landed.
+ * React Native has had `aspectRatio` as an ordinary style property the whole
+ * time, so there was nothing to copy; what earns the name here is the shadcn
+ * spelling and the two decisions below, not any imported code.
+ *
+ * `width: '100%'` is the first: an aspect box with no width is zero-sized, and
+ * "fill the parent, derive the height" is what every call site wants — a caller
+ * who needs a fixed width passes it through `style`, which lands last.
+ *
+ * No `className`, and that is the second. `aspectRatio` is the ONE property this
+ * component exists to set, and react-native-css merges utilities BEFORE inline
+ * style, so a caller writing `className="aspect-video"` would have it silently
+ * overwritten by the `ratio` prop with no error anywhere. One owner per
+ * property: use this component with `ratio`, or a plain `View` with the class,
+ * never both. Wrap it in a `StyledView` for the surrounding layout classes.
+ */
+import React from 'react';
+import { View } from 'react-native';
+
+import type { AspectRatioProps } from './types';
+
+/** A square, used both for an omitted `ratio` and for one that is not a ratio. */
+const DEFAULT_RATIO = 1;
+
+export function AspectRatio({ ratio = DEFAULT_RATIO, children, style, testID }: AspectRatioProps) {
+  // A ratio is width ÷ height, and a box has positive finite lengths on both
+  // axes, so the only coherent values are positive and finite. `0`, `NaN`,
+  // `Infinity` and negatives are not choices a caller can make on purpose —
+  // they are what the ONE piece of arithmetic every call site writes returns
+  // before an image has loaded: `0 / 0` is `NaN`, `w / 0` is `Infinity`, and
+  // `0 / h` is `0`. All three arrive from the same accident, so `0` is not a
+  // deliberate value this guard is taking away.
+  //
+  // Passed through, each leaves the box with no usable height — it collapses,
+  // which is the exact layout jump this component exists to prevent, silently
+  // and with no error on either platform. A default parameter rescues only
+  // `undefined`, and `ratio || 1` would still let `Infinity` and a negative
+  // through, so the test is for a positive finite number rather than a falsy
+  // one. The fallback is the documented default and not a throw: "I could not
+  // compute a ratio yet" is the same situation as "I did not give you one",
+  // and a media well must not crash a screen during an image's loading window.
+  const aspectRatio = ratio > 0 && Number.isFinite(ratio) ? ratio : DEFAULT_RATIO;
+
+  return (
+    <View style={[{ width: '100%', aspectRatio }, style]} testID={testID}>
+      {children}
+    </View>
+  );
+}
+
+AspectRatio.displayName = 'AspectRatio';

package/src/aspect-ratio/index.ts

@@ -0,0 +1,2 @@
+export { AspectRatio } from './AspectRatio';
+export type { AspectRatioProps } from './types';

package/src/aspect-ratio/types.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface AspectRatioProps {
+  /**
+   * Width divided by height — `16 / 9`, `1`, `4 / 3`. Defaults to `1`.
+   *
+   * shadcn's web `AspectRatio` takes the same number for the same reason: a
+   * ratio is arithmetic the call site already has, and naming presets instead
+   * (`'video'`, `'square'`) would need a new name for every ratio anyone wants.
+   *
+   * Any value that is not a positive finite number takes the default too — `0`,
+   * `NaN`, `Infinity` and negatives all come out of `w / h` on an image that has
+   * not loaded, and none of them names a box.
+   */
+  ratio?: number;
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/avatar/Avatar.tsx

@@ -1,12 +1,13 @@
 import React, { memo, useMemo, useRef, useState } from 'react';
-import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { View, Image, StyleSheet, Text, Pressable } from 'react-native';
 import type { TextStyle } from 'react-native';
 import Svg, { ClipPath, Defs, Image as SvgImage, Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
+import { useInteractionState } from '../hooks/use-interaction-state';
 import { useImageResolver } from '../image-resolver/context';
 import { Z_INDEX } from '../styles/z-index';
-import { useAvatarPlaceholder } from './placeholder-context';
+import { useAvatarPlaceholder } from './context';
 import { LiveBadge } from './LiveBadge';
 import { AvatarRing, getRingOuterSize } from './AvatarRing';
 import { SQUIRCLE_PATH } from './squircle-path';
@@ -175,6 +176,10 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   testID,
 }) => {
   const [errored, setErrored] = useState(false);
+  // The press dip goes through the shared interaction hook rather than
+  // `TouchableOpacity`'s `activeOpacity` — one mechanism across the library, and
+  // the one the reduced-motion / pointer-type guards live behind.
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const theme = useTheme();
   const placeholderConfig = useAvatarPlaceholder();
   const radius = size / 2;
@@ -342,13 +347,27 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   );
 
   if (onPress) {
-    return <TouchableOpacity onPress={onPress}>{content}</TouchableOpacity>;
+    return (
+      <Pressable
+        onPress={onPress}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        accessibilityRole="button"
+        accessibilityLabel={hasName ? name : undefined}
+        style={pressed ? styles.pressed : undefined}
+      >
+        {content}
+      </Pressable>
+    );
   }
 
   return content;
 };
 
 const styles = StyleSheet.create({
+  pressed: {
+    opacity: 0.7,
+  },
   container: {
     position: 'relative',
     overflow: 'visible',

package/src/avatar/default-avatar.ts

@@ -12,6 +12,13 @@
 const DATA_URI =
   'data:image/jpeg;base64,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ecro7/EAJkdzx/hYW/Z0uNQ6DqHwQAQhCENQx6c29Ylu+z6ePtp2GX5tyzvLQOEDqHwgIIQpDhActvXPOxx4+7+R2fGlnQOEjHQfCAA0CEIcAMUs95Q+rMhCcnxcLc0S3mW9mGOEToPGAzwAhCEOMAWe9vF9MH224//aAAwDAQACAAMAAAAQ88888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888889498888888888888888888847VARe3888888888888888888TK6pu6Ge8888888888888888Ixp2kpECW888888888888888R51sfvf83V088888888888888rBB6ti6Ep5U888888888888889AiUhnOoAN2888888888888885IwSPNa4l298888888888888880v9/eorQi8888888888888888tvnVyltY8888888888888888888Re0xq88888888888888888888888888888888888888888888RvTsKIK888888888888888892w45/ICcM68888888888888hAiMEJ1Rq3Nug08888888888vDeJ2k1CVymw/Az888888888o2gmeEf9Gf0iQ9tGo88888888MlLddbc8BVxw1qXJh1888888qtGlcgnF7MNY6MPY972888888rUAprq8IIApgFMKeSOu888//EACURAQACAgEEAQQDAAAAAAAAAAEAERAhMSAwQEFRYXGBsVBwof/aAAgBAwEBPxD+iFDmfXgjx4tsYtRonIZn3wNrE0Ys/wBlyfCeYvpUNcCFItv4Ux6nBKjA4DABItLw8+B9mJu3NcZgkNLeBwqUowN8xJi2Zd+fgO3ep5gcKP698XXuOxjKlSpU4gwkEAB68D5U9xekY2ia4+3gpemEU/xKUkGXFlSECkgAo8M+Cd0TZK12QWv4259OPJe0GL3AnLk4h8EXfM0Zog5I8bspsA1y2Q2jT3j+VFFuGmBvKQcBbDa2QP3u5Q9sFduC9RYsXFwgi4I2rn6b2ju9xLGGoNYMMXLlwggi7huLcQN3J2dAcE3YsGHqAIMC3jTfEG+u2ZbD7IAQQQYHjKR66mN3QDD0+IIIMhslo9D/xAAlEQEAAgICAQMEAwAAAAAAAAABABEQITFAIDBBUVBhcYFwscH/2gAIAQIBAT8Q/gg3PtSq6tWIJathrmpeOubmyVMog6i5iGDKBUYPcXR2DljrCYHBVTdHJ0eNQZBhcRjgdDy6BcxJMDDj0IA/x0GGBBJnsMAEvvt66mPaERAgSpUrBhQoiP36Gx9PEA3ipUqEI7m6fz0RqaifuW5Z4l2U3E/cVW3pqQBq2a+cAqKnsfTeNTl0F5WfeguFnMulIj8JsnbDQIJ4JFjyJvgpiu+PWf4XxNFEucUIkvElk1xiNM/z3qXPZiBqXRIQECsJcYYqpVHSf3H0lq9oVRFEwMmkpgwxVRUxFTHqOH0apeWawYEEnj9l8AX3zOPOmivCcZjJM9hllkky+LI87mNHgZJ5YMsucbEpHg//xAAsEAACAQMCBQQCAwADAAAAAAAAAREhMWFBURBxgZGhQLHB8FDRMOHxIHCQ/9oACAEBAAE/EP8Aw8dhqU120JDuF/bcT/veTNHpEK34lcH1b6tfluNGjWVJdlX2HlwSlZ7V7sqzHq3Is49NuRuSE1kaNqtU8fPwVpq+9n+yOH1Suuauvw7cD1tsXf8AsY1tR6vbZCEpQUWQi0IjBm4BBZDicIgrGm0MeQWwkqhvh7chkiacp1X4NCGNkkrtjhthTrise4xDYkVFzESViC1OYgczFkLMg0LbeB7zQPLpwm6vJYx2yrglKSqa/BsS+kol1b2fPYqLEoEiDpuZEM85zoWa7idyYi7seKFeSIyq6n2h+/UVV+BVB0+N6vp7wVAbl7iJKaCkrruUCHXyZDcY138nMQm4zczR1M/kc9RSNqMjJ0y3EpNt10H8f7+AZT09co0terHlKiVCR03NKSbUzGVmb8izXcWZmEb+TIZ0LbVHqMbNXBu1/wB8xCEaaalP17kji2uHLomvcn3PkShcXGu/Dyle+u59DHkc9RZGwyZ3GUqUrjmri2rkE5Ji22q1tbxAvW6jVcV36IEjVIKoKi5l8i9yuZB5nOb5MvkrX4GQUWVZKjdEgtuUGiij9169qm0SvrLKyo/cUNS7XhZIMo+cv/sRWbMvkzvuUr+R25OLkyuyW8cudHHafj124zo9xkTlA1Mp9ZMqHm+41erIbiVa+BF1D6yfeTKLIfKTJUfte/6+DfoED1IW6+eC3cyDq/sfIcxfcWYshfckFm5GbkP+iKtJlFtUp58oa+fXwgUbXOq9mOBC78HL5PrJuseTHzmYq7+RZi4VV3FXcylcmgcnKJfPKfXoiSfzJ4kenGo0MpKepkGfUNouN5PqvEWQn38jOhu8CuPLSHUw1MaaqUOLL2nr69EjTsx6BlKTdrdrc0OehnYbyNvckbOoiSXJImJrfiTlwhL8QJuLLV9qibCZDRKiJ9epkYt0VdVdL9xIewYm6cUjZPGSRcLhjJQymTqVLwyNVW/rTtn8DBFQ2m0dDlt2J8sGWBogaI4QRwQh0gs1DgKcmzpLZ9ougkohCSUJL8FH1IFGhtZ7dfke43ywx2mNQNYIIIIIEh72KmOw4q2pfZbv+hIRaEvl5/CJKhCEpoSxWy7vyOV+Ys2yZDTRAmduA0QQJCEWYzVKwJWF1Qj9S8+4iukWSX4dxgXL/wB+o6tEiojo6eRmuEm046jJpu6DCH2ygLsjqhOB2stvshmp6T19j5aFqQXpS1y0XvkS/FPSTQ0Sn0Ppm9Bojl+Rly+40gfm7xfzC0m7JJLov+j+YtTlLQ+4d3jWwd0oHBNmT8tDDCc6rA7SaXun4bENS3sl3agYQ+2U34J/DqU5iBtsnzgSbQ6w2W+it3Y9cJWlh2UCbbbdzSN9xl0buNttN3Jaq7i12+5QJsf6BNFElC8AdBBqjCl6mz8C9JLMzvbyJp/gWTKyMJz/AEknEfSwozq+prbHdGPyOuIfY2Y9onsT2Y3ZmwYvuIrUR0G8pseBaZezToIoFmW5frp17iA2lOqa9dQ5b3XIXySaO1b83r7DK74AzYYK08DCuCwLscoWK4bAhW3gpqEKmxgHNYU9JHZJavp026EriVNs/ayvV6D4bJ/Ju8FdyLZjHJobQtKwrRDRKwh6CXohU2MBykZt4EbGAWkhaSoJGpgW1oSzREEtKg1rMdjaUyGmJ+TR5mz8cvVLTf4Wx+w0uo9qyQaeBUC1oKHAtRWwl6CdjlpyIzYwiYsIsC0EGk0SokqTS4qTC6iLM2sdcXjOnKyaRNOU/TwNuOWw+ew1rljmVCzQgigsKIFYbyMMMOJOgfC4TsNkQIE92NiLYQxLlwNToNJCrJUY7Xj25emW+OmpP6N/3sOFklSzQjSoUkNxpv2HUPIyG6R7B1cRZGUWQuFylQbsd5Ki7QemPW0xNOSq7Pkvbz6NvU/AA3BPMx23BigoExh5jyG+48xllrvx0Y7izFkI5iXUWQ3QqQpyXxGmMzsJsnDTH0aUUrXfk/RO1SMMr5t+r2GhrCwlQsQjdnMOOrMo8jQlDyHRV+Rpucxdddyy6OZcCqvwKFzIWKmSoqKjNSKVuAmQno21Br+2ovAimJ0afoZZZIaY1P46kzVkw0DQUr8Vi5ceQ/qTIPMYeRzHMcyEu4suC3/RZDDJwFmJi464JJkI5Jxmqprt6P3XoHRCZ41rR+7k5Ueo1FUjQsjmGn1jDJuMvMZuMPIdd+PERSPgMm5UvwMlDILMbwUBx6scrhjz0m9jXYV8TTFqn/PETjubv4kkeo6v7GqigRUFwco832Klx5oZSMvNjN92Ti4n3FWI5UZSQycHKKFoHLUyFW49y7qRqVkHaq6l8rp/PPpRj1b9F5KyrEWUyGQnuPIeQ8z6yPNjfcyjzHTc5zmLLiyFn5EVmZSrc+kmUysWme5DddxyV13KD4FQgRyNW7TrqSqr5XX+Zl6wJlqlF4gqOuoqzIZoEdh1jPNMo8zKPMefA8i/gRWiRCGginepk4eViKDz88LPxdGFKVXJyNTTQmnuv5XxipG6VCWsTtUWZnI6yc5TqPmGW/WPTwXXUc9TmOYsJCfcX0hQ1F2cHKcgysqqopaizO45xjIZWQ3ERT+oj6nT/n//2Q==';
 
-const DEFAULT_AVATAR_SOURCE: { uri: string } = { uri: DATA_URI };
+/**
+ * Default avatar placeholder image — pass as `fallbackSource` on `Avatar`, or
+ * to `AvatarPlaceholderProvider`.
+ *
+ * Exported from here, its owner, rather than aliased in the barrel: `index.ts`
+ * is a barrel and declares nothing.
+ */
+export const defaultAvatarSource: { uri: string } = { uri: DATA_URI };
 
-export default DEFAULT_AVATAR_SOURCE;
+export default defaultAvatarSource;

package/src/avatar/index.ts

@@ -1,16 +1,10 @@
 export { Avatar } from './Avatar';
-export { AvatarPlaceholderProvider } from './placeholder-context';
-export type { AvatarPlaceholderConfig } from './placeholder-context';
+export { AvatarPlaceholderProvider } from './context';
+export type { AvatarPlaceholderConfig } from './context';
 export type {
   AvatarProps,
   AvatarShape,
   AvatarRingConfig,
   AvatarRingGradientDirection,
 } from './types';
-
-// Inlined as a base64 data URI so consumers compiling Bloom's source directly
-// do not need ambient `*.jpg` module declarations or a `.jpg` asset loader.
-import defaultAvatar from './default-avatar';
-
-/** Default avatar placeholder image — use as `fallbackSource` on Avatar or in AvatarPlaceholderProvider */
-export const defaultAvatarSource = defaultAvatar;
+export { defaultAvatarSource } from './default-avatar';

package/src/avatar/types.ts

@@ -62,7 +62,7 @@ export interface AvatarProps {
    * Consumers can still override via `placeholderColor` / `placeholderIcon`.
    */
   name?: string;
-  /** Press handler — wraps avatar in TouchableOpacity when provided */
+  /** Press handler — wraps the avatar in a `Pressable` when provided. */
   onPress?: () => void;
   /**
    * When true, marks the user as live-streaming: draws a solid red ring that

package/src/avatar-group/AvatarGroup.web.tsx

@@ -1,12 +1,19 @@
 import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { OverlayRoot } from '../overlay';
-import { Portal } from '../portal';
+// `../portal/index.web`, not `../portal`: export conditions do not apply to
+// relative specifiers, so the bare name resolves to the NATIVE barrel in any
+// bundler that does not add web extensions to its resolution order. The native
+// Portal renders into a `PortalOutlet`, which a web app never mounts — both are
+// no-ops in the web fork — so the hover card would render nothing at all.
+// `Dialog.web.tsx` and `BottomSheet.web.tsx` already name it this way.
+import { Portal } from '../portal/index.web';
 import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import { UserHoverCard } from '../user-hover-card';
 import {
   AvatarGroupBase,
+  getItemName,
   type AvatarGroupCellHoverHandlers,
 } from './AvatarGroupBase';
 import type { AvatarGroupItem, AvatarGroupProps } from './types';
@@ -24,10 +31,6 @@ interface HoverState {
   left: number;
 }
 
-function getItemName(item: AvatarGroupItem): string {
-  return item.displayName ?? item.name ?? item.username ?? '';
-}
-
 /**
  * Web `AvatarGroup`. Identical layout rendering to native (stack / row /
  * cluster) via {@link AvatarGroupBase}, plus an optional hover card: when
@@ -102,15 +105,29 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
               around it click-through. */}
           <OverlayRoot>
             {/*
-              A Pressable hosts the hover-bridge: `onHoverIn`/`onHoverOut` are
-              typed in React Native (and map to mouseenter/mouseleave on
-              react-native-web), so the card stays open while the cursor is over
-              it without any web-only DOM-prop type suppression.
+              The hover-bridge keeps the card open while the cursor is over it.
+              It is a `View` with the W3C pointer events (in React Native's own
+              `ViewProps`, forwarded to the DOM by react-native-web — so no
+              web-only type suppression) and NOT a `Pressable`, which is what it
+              used to be.
+
+              A `Pressable` bridge closes the card the moment the cursor reaches
+              anything pressable INSIDE it — the identity area, or a FollowButton
+              in the `action` slot. react-native-web's `Pressable` calls
+              `useHover` with `contain: true`, which dispatches a BUBBLING
+              `react-gui:hover:lock` event on itself; an ancestor `Pressable`
+              that is currently hovered ends its own hover for any lock whose
+              target is not itself. So a descendant `Pressable` fired this
+              bridge's `onHoverOut` and the card dismissed ~120ms later, with
+              nothing in the console. Measured in Chrome; jest cannot see it.
+
+              `pointerenter`/`pointerleave` do not bubble and do not fire when
+              the cursor moves between descendants, which is exactly the
+              containment the bridge needs.
             */}
-            <Pressable
-              onHoverIn={cancelClose}
-              onHoverOut={scheduleClose}
-              accessibilityRole="none"
+            <View
+              onPointerEnter={cancelClose}
+              onPointerLeave={scheduleClose}
               pointerEvents="auto"
               style={[
                 webStyles.floating,
@@ -119,7 +136,11 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
             >
               <UserHoverCard
                 avatar={hover.item.uri ?? undefined}
-                displayName={getItemName(hover.item)}
+                // `UserHoverCardProps.displayName` is contractually an
+                // already-resolved string, and resolving it is precisely this
+                // component's job. `''` is the honest terminal case: no field on
+                // the item named the person at all, so there is nothing to show.
+                displayName={getItemName(hover.item) ?? ''}
                 username={hover.item.username}
                 onPressProfile={
                   onPressItem
@@ -129,7 +150,7 @@ const AvatarGroupWebComponent: React.FC<AvatarGroupProps> = (props) => {
                 action={renderItemAction?.(hover.item, hover.index)}
                 style={webStyles.card}
               />
-            </Pressable>
+            </View>
           </OverlayRoot>
         </Portal>
       )}

package/src/avatar-group/AvatarGroupBase.tsx

@@ -31,12 +31,50 @@ const CLUSTER_RING_RATIO = 0.02;
  * matching the original Mention count circle (shared by every layout). */
 const OVERFLOW_TEXT_COLOR = '#FFFFFF';
 
-function getItemName(item: AvatarGroupItem): string | undefined {
-  return item.displayName ?? item.name ?? item.username;
+/**
+ * The first non-blank of the fields a caller can name a person with, trimmed.
+ *
+ * `??` is the wrong operator for every one of these and the reason is the same
+ * each time: it falls through on `null`/`undefined` ONLY, so an empty or
+ * whitespace-only string wins over the field behind it. That is not a
+ * hypothetical shape — `displayName` is optional ecosystem-wide and the API
+ * sends `''` for it, at which point `displayName ?? username` hands `Avatar` a
+ * blank name, `Avatar` correctly reads that as "no name" (it trims), and the
+ * cell renders the DEFAULT AVATAR IMAGE: the one placeholder that says nothing
+ * about who the person is, where the handle's initial was available all along.
+ *
+ * The org rule is `displayName?.trim() || handle`, and `.trim()` plus `||` is
+ * exactly what it prescribes for this case. This is a FALLBACK, not a repair:
+ * an absent display name is a normal, expected state that a UI has to render
+ * something for, so the choice belongs here. Bloom never rewrites the value it
+ * was handed — a genuinely WRONG `displayName` is still fixed in the serializer
+ * or the SDK type, never in a component.
+ */
+function firstNonBlank(...values: Array<string | null | undefined>): string | undefined {
+  for (const value of values) {
+    const trimmed = value?.trim();
+    if (trimmed) return trimmed;
+  }
+  return undefined;
 }
 
+/**
+ * What to call this person. Exported because the web fork's hover card needs the
+ * SAME answer — it used to carry its own copy of this function, and the copy had
+ * the same defect, so fixing one would have left half the family wrong.
+ */
+export function getItemName(item: AvatarGroupItem): string | undefined {
+  return firstNonBlank(item.displayName, item.name, item.username);
+}
+
+/**
+ * The React key. Same operator hazard, different blast radius: a blank `id`
+ * under `??` yields the key `''`, and two such items in one group collide into
+ * a duplicate key — a reconciliation bug rather than a wrong pixel, which is
+ * why it is worth fixing but was not what anybody noticed.
+ */
 function getItemKey(item: AvatarGroupItem, index: number): string {
-  return item.id ?? item.username ?? item.uri ?? `avatar-${index}`;
+  return firstNonBlank(item.id, item.username, item.uri) ?? `avatar-${index}`;
 }
 
 /** Hover callbacks injected by the web fork; undefined (no-op) on native. */
@@ -80,9 +118,10 @@ function AvatarGroupCell({
   hoverHandlers?: AvatarGroupCellHoverHandlers;
 }) {
   const name = getItemName(item);
-  const accessibilityLabel = item.username
-    ? `${name ?? item.username} (@${item.username})`
-    : name;
+  // The handle is trimmed for the same reason the name is: `item.username` of
+  // `'  '` is TRUTHY, so the untrimmed form announced "Ada (@  )".
+  const handle = firstNonBlank(item.username);
+  const accessibilityLabel = handle ? `${name ?? handle} (@${handle})` : name;
   const interactive = typeof onPressItem === 'function';
   const hoverable =
     typeof hoverHandlers?.onHoverIn === 'function' ||

package/src/badge/Badge.tsx

@@ -2,8 +2,9 @@ import React, { memo, useMemo } from 'react';
 import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { resolveAccentColors } from '../theme/accent-colors';
 import { Z_INDEX } from '../styles/z-index';
-import type { BadgeProps, BadgeColor, BadgeVariant } from './types';
+import type { BadgeProps } from './types';
 
 const SIZE_CONFIG = {
   small: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 6 },
@@ -18,36 +19,6 @@ const PLACEMENT_CONFIG = {
   'bottom-left': { bottom: -4, left: -4 },
 } as const;
 
-function useColorPair(
-  color: BadgeColor,
-  variant: BadgeVariant,
-  theme: ReturnType<typeof useTheme>,
-): { bg: string; fg: string } {
-  const colorMap: Record<BadgeColor, string> = {
-    default: theme.colors.textSecondary,
-    primary: theme.colors.primary,
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-  };
-
-  const base = colorMap[color];
-  // A primary-colored solid badge needs the preset's readable foreground
-  // (white for blue, black for yellow). Semantic colors are fixed bright
-  // fills that always pair with white.
-  const solidForeground = base === theme.colors.primary ? theme.colors.primaryForeground : '#fff';
-
-  switch (variant) {
-    case 'solid':
-      return { bg: base, fg: solidForeground };
-    case 'subtle':
-      return { bg: base + '20', fg: base };
-    case 'outlined':
-      return { bg: 'transparent', fg: base };
-  }
-}
-
 const BadgeComponent: React.FC<BadgeProps> = ({
   content,
   variant = 'solid',
@@ -63,7 +34,10 @@ const BadgeComponent: React.FC<BadgeProps> = ({
   testID,
 }) => {
   const theme = useTheme();
-  const colors = useColorPair(color, variant, theme);
+  // A dot has no label to make legible, so it always paints the tone's FILL. It
+  // used to follow the variant, which made `dot variant="outlined"` a fully
+  // transparent circle — visually absent, with markup that looks correct.
+  const colors = resolveAccentColors(theme.colors, color, dot ? 'solid' : variant);
   const sizeConfig = SIZE_CONFIG[size];
 
   const displayContent = useMemo(() => {
@@ -81,7 +55,7 @@ const BadgeComponent: React.FC<BadgeProps> = ({
         width: sizeConfig.dotSize,
         height: sizeConfig.dotSize,
         borderRadius: sizeConfig.dotSize / 2,
-        backgroundColor: colors.bg,
+        backgroundColor: colors.background,
       };
     }
 
@@ -90,14 +64,14 @@ const BadgeComponent: React.FC<BadgeProps> = ({
       height: sizeConfig.height,
       borderRadius: sizeConfig.height / 2,
       paddingHorizontal: sizeConfig.paddingHorizontal,
-      backgroundColor: colors.bg,
+      backgroundColor: colors.background,
       alignItems: 'center',
       justifyContent: 'center',
     };
 
     if (variant === 'outlined') {
       base.borderWidth = 1;
-      base.borderColor = colors.fg;
+      base.borderColor = colors.border;
     }
 
     return base;
@@ -107,7 +81,7 @@ const BadgeComponent: React.FC<BadgeProps> = ({
     (): TextStyle => ({
       fontSize: sizeConfig.fontSize,
       fontWeight: '600',
-      color: colors.fg,
+      color: colors.foreground,
       textAlign: 'center',
       lineHeight: sizeConfig.height,
     }),

package/src/badge/index.ts

@@ -1,8 +1,2 @@
 export { Badge } from './Badge';
-export type {
-  BadgeProps,
-  BadgeVariant,
-  BadgeColor,
-  BadgeSize,
-  BadgePlacement,
-} from './types';
+export type { BadgeProps, BadgeSize, BadgePlacement } from './types';

package/src/badge/types.ts

@@ -1,20 +1,21 @@
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type BadgeVariant = 'solid' | 'subtle' | 'outlined';
-export type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+import type { AccentFill, AccentTone } from '../theme/accent-colors';
+
 export type BadgeSize = 'small' | 'medium' | 'large';
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 export interface BadgeProps {
   /** Text or number to display in the badge. */
   content?: string | number;
-  /** Visual variant. */
-  variant?: BadgeVariant;
+  /** How loudly the badge is painted. */
+  variant?: AccentFill;
   /** Semantic color. */
-  color?: BadgeColor;
+  color?: AccentTone;
   /** Size preset. */
   size?: BadgeSize;
-  /** If true, renders as a small dot without content. */
+  /** If true, renders as a small dot without content. A dot always paints the
+   * tone's fill, whatever the `variant`. */
   dot?: boolean;
   /** Maximum number to display. Values above this show "{max}+". */
   max?: number;