@oxyhq/bloom 0.28.0 → 0.29.1

package/lib/typescript/module/pressable-scale/PressableScale.d.ts

@@ -1,19 +1,19 @@
 import React from 'react';
 import { type PressableProps, type StyleProp, type View, type ViewStyle } from 'react-native';
-export interface PressableScaleProps extends Omit<PressableProps, 'children' | 'style'> {
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
     /** Scale applied while pressed. Defaults to `0.98`. */
     targetScale?: number;
-    /** Style for the outer, full-size touch target (stays put while pressing). */
+    /** Style applied to the pressable itself — the node that scales. */
     style?: StyleProp<ViewStyle>;
-    /** Style for the inner content wrapper that actually scales. */
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    children?: React.ReactNode;
 }
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */

package/lib/typescript/module/pressable-scale/PressableScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AA0BtB,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,OAAO,CAAC;IAClD,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,kFA+C1B,CAAC"}
+{"version":3,"file":"PressableScale.d.ts","sourceRoot":"","sources":["../../../../src/pressable-scale/PressableScale.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAgCtB,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IACxE,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,kFAgC1B,CAAC"}

package/lib/typescript/module/subtle-hover/SubtleHover.d.ts

@@ -1,31 +1,36 @@
 import { type StyleProp, type ViewStyle } from 'react-native';
 export interface SubtleHoverProps {
-    /** Whether the parent is currently hovered. Drives the overlay opacity. */
-    hover: boolean;
     /**
-     * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
-     * 0.5 light) that reads as a gentle contrast wash.
+     * JS-driven visibility for a coordinated highlight — e.g. every post of one
+     * thread lighting up together. When omitted, the wash instead follows CSS
+     * `group-hover` on web with ZERO React state: the parent element must carry
+     * `className="group"`.
      */
-    opacity?: number;
+    active?: boolean;
     /** Extra style merged last — e.g. `borderRadius` to match the parent. */
     style?: StyleProp<ViewStyle>;
     /**
-     * Opt in to rendering on native. Off by default: hover is a pointer
-     * affordance, so this is a web-only overlay unless a native surface wants the
-     * same wash driven by another interaction (e.g. press).
+     * Render on native too (default `false`). Hover is a web pointer affordance,
+     * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+     * JS `active` mode, and only when this is set.
      */
     native?: boolean;
 }
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
+ *
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
-export declare function SubtleHover({ hover, opacity, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SubtleHover({ active, style, native }: SubtleHoverProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace SubtleHover {
     var displayName: string;
 }

package/lib/typescript/module/subtle-hover/SubtleHover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA4B1F,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoBtF;yBApBe,WAAW"}
+{"version":3,"file":"SubtleHover.d.ts","sourceRoot":"","sources":["../../../../src/subtle-hover/SubtleHover.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAe1F,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAc,EAAE,EAAE,gBAAgB,kDAoC9E;yBApCe,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/PressableScale.test.tsx

@@ -26,4 +26,13 @@ describe('PressableScale', () => {
     );
     expect(getByText('Scaled')).toBeTruthy();
   });
+
+  it('applies style to the pressable node that scales', () => {
+    const { getByText } = render(
+      <PressableScale style={{ flexDirection: 'row' }} accessibilityLabel="Row">
+        <Text>Row content</Text>
+      </PressableScale>,
+    );
+    expect(getByText('Row content')).toBeTruthy();
+  });
 });

package/src/__tests__/SubtleHover.test.tsx

@@ -5,7 +5,8 @@ import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import { SubtleHover } from '../subtle-hover';
 
 // Default test Platform.OS is 'ios' (see __mocks__/react-native.ts), so the
-// web-only overlay is suppressed unless `native` is opted in.
+// web-only hover wash is suppressed unless the JS `active` mode opts in via
+// `native`.
 function renderWithTheme(ui: React.ReactElement) {
   return render(
     <BloomThemeProvider mode="light" colorPreset="teal">
@@ -14,29 +15,36 @@ function renderWithTheme(ui: React.ReactElement) {
   );
 }
 
+// The provider wraps the subject in ONE flex View, so `toJSON` is a single node;
+// narrowing away the array/null branches lets `children` read the wash cleanly.
+function renderWrapper(ui: React.ReactElement) {
+  const tree = renderWithTheme(ui).toJSON();
+  if (tree === null || Array.isArray(tree)) {
+    throw new Error('expected a single wrapper node');
+  }
+  return tree;
+}
+
 describe('SubtleHover', () => {
   it('carries a displayName', () => {
     expect(SubtleHover.displayName).toBe('SubtleHover');
   });
 
-  // `renderWithTheme` wraps the subject in the provider's flex View, so the
-  // overlay's presence is read from that wrapper's `children` rather than the
-  // root being null.
-  it('renders nothing on native by default', () => {
-    const tree = renderWithTheme(<SubtleHover hover />).toJSON();
-    expect(tree).not.toBeNull();
-    expect(tree?.children).toBeNull();
+  it('renders nothing on native in the CSS group-hover mode', () => {
+    expect(renderWrapper(<SubtleHover />).children).toBeNull();
+  });
+
+  it('renders nothing on native in the JS active mode by default', () => {
+    expect(renderWrapper(<SubtleHover active />).children).toBeNull();
   });
 
-  it('renders the overlay on native when opted in', () => {
-    const tree = renderWithTheme(<SubtleHover hover native />).toJSON();
-    expect(tree?.children).not.toBeNull();
+  it('renders the wash on native in the JS active mode when opted in', () => {
+    expect(renderWrapper(<SubtleHover active native />).children).not.toBeNull();
   });
 
-  it('accepts an opacity override and a style', () => {
-    const tree = renderWithTheme(
-      <SubtleHover hover native opacity={0.9} style={{ borderRadius: 12 }} />,
-    ).toJSON();
-    expect(tree?.children).not.toBeNull();
+  it('accepts a style override in the native active mode', () => {
+    expect(
+      renderWrapper(<SubtleHover active native style={{ borderRadius: 12 }} />).children,
+    ).not.toBeNull();
   });
 });

package/src/content-panel/index.web.tsx

@@ -88,31 +88,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   useContentPanelNestingGuard();
   const { colors } = useTheme();
 
-  if (!framed) {
-    // Full-bleed: a single flat surface. No rounding, no sticky overlays.
-    const fullBleedClass = [
-      'flex-1',
-      surfaceClassName ?? 'bg-card',
-      contentClassName,
-    ]
-      .filter(Boolean)
-      .join(' ');
-    return (
-      <ContentPanelNestingContext.Provider value={true}>
-        <View
-          {...({ className: fullBleedClass } as Record<string, string>)}
-          style={[surfaceStyle, contentStyle]}
-        >
-          {children}
-        </View>
-      </ContentPanelNestingContext.Provider>
-    );
-  }
-
-  const surfaceClass = ['flex-1', 'rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ');
-  const contentClass = ['flex-1', 'rounded-radius-28 web:overflow-x-clip', contentClassName]
-    .filter(Boolean)
-    .join(' ');
+  const surfaceClass = framed
+    ? ['flex-1 rounded-radius-28', surfaceClassName ?? 'bg-card'].join(' ')
+    : ['flex-1', surfaceClassName ?? 'bg-card'].join(' ');
+  const contentClass = framed
+    ? ['flex-1 rounded-radius-28 web:overflow-x-clip', contentClassName].filter(Boolean).join(' ')
+    : ['flex-1', contentClassName].filter(Boolean).join(' ');
 
   return (
     <ContentPanelNestingContext.Provider value={true}>
@@ -120,18 +101,22 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
         {...({ className: surfaceClass } as Record<string, string>)}
         style={surfaceStyle}
       >
-        {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. */}
-        <View
-          pointerEvents="none"
-          {...({
-            className:
-              'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
-          } as Record<string, string>)}
-          style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
-        />
-        {/* (2) Border-frame overlay — one continuous rounded border, above all. */}
-        {showStickyFrame !== false && (
+        {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Framed only. */}
+        {framed && (
+          <View
+            key="bleed-mask"
+            pointerEvents="none"
+            {...({
+              className:
+                'web:sticky web:top-2 z-30 h-[calc(100dvh-16px)] w-full rounded-radius-28 web:[margin-bottom:calc(-100dvh+16px)] web:[clip-path:inset(-12px)]',
+            } as Record<string, string>)}
+            style={{ boxShadow: `0 0 0 ${GUTTER_MASK_SPREAD}px ${maskColor ?? colors.background}` }}
+          />
+        )}
+        {/* (2) Border-frame overlay — one continuous rounded border, above all. Framed only. */}
+        {framed && showStickyFrame !== false && (
           <View
+            key="border-frame"
             pointerEvents="none"
             {...({
               className:
@@ -139,8 +124,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
             } as Record<string, string>)}
           />
         )}
-        {/* Content wrapper — clipped to the rounded panel shape on web. */}
+        {/* Content wrapper — STABLE position + key so toggling `framed` reconciles
+            in place instead of remounting `{children}` (which would reset feed
+            scroll/virtualizer + refetch on a breakpoint cross). Clipped to the
+            rounded panel shape on web when framed. */}
         <View
+          key="content"
           {...({ className: contentClass } as Record<string, string>)}
           style={contentStyle}
         >

package/src/pressable-scale/PressableScale.stories.tsx

@@ -21,7 +21,7 @@ export const Basic: Story = {
     <PressableScale
       {...args}
       accessibilityLabel="Press me"
-      contentContainerStyle={{
+      style={{
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderRadius: 12,
@@ -39,7 +39,7 @@ export const StrongScale: Story = {
     <PressableScale
       {...args}
       accessibilityLabel="Press me harder"
-      contentContainerStyle={{
+      style={{
         paddingVertical: 12,
         paddingHorizontal: 20,
         borderRadius: 12,
@@ -51,6 +51,27 @@ export const StrongScale: Story = {
   ),
 };
 
+/**
+ * NativeWind layout classes apply to the SAME node that scales — the whole row
+ * (avatar + label) springs as one. In a NativeWind consumer you pass `className`
+ * directly; the spread-cast here just satisfies Bloom's own typecheck (which has
+ * no NativeWind ambient types).
+ */
+export const InlineRow: Story = {
+  render: (args) => (
+    <PressableScale
+      {...args}
+      accessibilityLabel="Open profile"
+      {...({
+        className: 'flex-row items-center gap-3 px-4 py-3 rounded-xl bg-muted',
+      } as Record<string, string>)}
+    >
+      <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: '#4f46e5' }} />
+      <Text style={{ fontWeight: '600' }}>Row that scales as one node</Text>
+    </PressableScale>
+  ),
+};
+
 export const Card: Story = {
   render: (args) => (
     <PressableScale {...args} accessibilityLabel="Open card">

package/src/pressable-scale/PressableScale.tsx

@@ -32,38 +32,32 @@ const IS_WEB_TOUCH_DEVICE =
 
 const SCALE_SUPPORTED = Platform.OS !== 'web' || IS_WEB_TOUCH_DEVICE;
 
-export interface PressableScaleProps
-  extends Omit<PressableProps, 'children' | 'style'> {
+/**
+ * A single animated `Pressable`, built once at module scope so the animated
+ * node identity is stable across renders.
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface PressableScaleProps extends Omit<PressableProps, 'style'> {
   /** Scale applied while pressed. Defaults to `0.98`. */
   targetScale?: number;
-  /** Style for the outer, full-size touch target (stays put while pressing). */
+  /** Style applied to the pressable itself — the node that scales. */
   style?: StyleProp<ViewStyle>;
-  /** Style for the inner content wrapper that actually scales. */
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
 }
 
 /**
- * A drop-in {@link Pressable} whose content springs to a smaller scale on
- * press-in and back on release. The outer pressable stays full size (so the
- * touch target never shrinks) while an inner wrapper scales.
+ * A drop-in {@link Pressable} that springs to a smaller scale on press-in and
+ * back on release. The scale is applied to the pressable node itself, so a
+ * consumer's `className` / layout styles (e.g. `flex-row items-center`) land on
+ * the same node that animates.
  *
+ * The touch target scales with the content — acceptable at the default ~0.98
+ * (the earlier two-node touch-target-preservation was dropped for simplicity).
  * Honours the OS "reduce motion" setting and disables the effect on non-touch
  * web pointers.
  */
 export const PressableScale = forwardRef<View, PressableScaleProps>(
-  function PressableScale(
-    {
-      targetScale = 0.98,
-      style,
-      contentContainerStyle,
-      children,
-      onPressIn,
-      onPressOut,
-      ...rest
-    },
-    ref,
-  ) {
+  function PressableScale({ targetScale = 0.98, style, onPressIn, onPressOut, ...rest }, ref) {
     const reducedMotion = useReducedMotion();
     const animate = SCALE_SUPPORTED && !reducedMotion;
 
@@ -74,7 +68,7 @@ export const PressableScale = forwardRef<View, PressableScaleProps>(
     }));
 
     return (
-      <Pressable
+      <AnimatedPressable
         ref={ref}
         accessibilityRole="button"
         onPressIn={(e) => {
@@ -89,13 +83,9 @@ export const PressableScale = forwardRef<View, PressableScaleProps>(
           cancelAnimation(scale);
           scale.value = withTiming(1, { duration: DURATION });
         }}
-        style={style}
+        style={[animate ? animatedStyle : null, style]}
         {...rest}
-      >
-        <Animated.View style={[animate ? animatedStyle : null, contentContainerStyle]}>
-          {children}
-        </Animated.View>
-      </Pressable>
+      />
     );
   },
 );

package/src/subtle-hover/SubtleHover.stories.tsx

@@ -14,15 +14,15 @@ export default meta;
 
 type Story = StoryObj<typeof SubtleHover>;
 
-/** A row that washes its background as the pointer enters (web). */
-function HoverRow({ label, native }: { label: string; native?: boolean }) {
-  const { state: hovered, onIn, onOut } = useInteractionState();
-
+/**
+ * Pure-CSS `group-hover`: the parent carries `className="group"` and the wash
+ * fades in on hover with ZERO React state (web only).
+ */
+function HoverRow({ label }: { label: string }) {
   return (
     <Pressable
+      {...({ className: 'group' } as Record<string, string>)}
       accessibilityLabel={label}
-      onHoverIn={onIn}
-      onHoverOut={onOut}
       style={{
         width: 280,
         paddingVertical: 14,
@@ -31,34 +31,14 @@ function HoverRow({ label, native }: { label: string; native?: boolean }) {
         overflow: 'hidden',
       }}
     >
-      <SubtleHover hover={hovered} native={native} style={{ borderRadius: 12 }} />
+      <SubtleHover style={{ borderRadius: 12 }} />
       <Text style={{ fontWeight: '600' }}>{label}</Text>
     </Pressable>
   );
 }
 
-export const ListRow: Story = {
-  render: () => <HoverRow label="Hover me (web)" />,
-};
-
-export const StrongerWash: Story = {
-  render: () => {
-    function Row() {
-      const { state: hovered, onIn, onOut } = useInteractionState();
-      return (
-        <Pressable
-          accessibilityLabel="Stronger wash"
-          onHoverIn={onIn}
-          onHoverOut={onOut}
-          style={{ width: 280, padding: 16, borderRadius: 12, overflow: 'hidden' }}
-        >
-          <SubtleHover hover={hovered} opacity={0.85} style={{ borderRadius: 12 }} />
-          <Text style={{ fontWeight: '600' }}>Higher opacity override</Text>
-        </Pressable>
-      );
-    }
-    return <Row />;
-  },
+export const GroupHover: Story = {
+  render: () => <HoverRow label="Hover me (web, group-hover)" />,
 };
 
 export const Stack: Story = {
@@ -70,3 +50,36 @@ export const Stack: Story = {
     </View>
   ),
 };
+
+/**
+ * JS `active` mode: hovering anywhere in the thread lights EVERY row together
+ * (a coordinated highlight a per-element `group-hover` can't express). `native`
+ * is opted in so the same wash shows on native surfaces too.
+ */
+export const CoordinatedThread: Story = {
+  render: () => {
+    function Thread() {
+      const { state: hovered, onIn, onOut } = useInteractionState();
+      return (
+        <Pressable onHoverIn={onIn} onHoverOut={onOut} style={{ gap: 4 }}>
+          {['First reply', 'Second reply', 'Third reply'].map((label) => (
+            <View
+              key={label}
+              style={{
+                width: 280,
+                paddingVertical: 14,
+                paddingHorizontal: 16,
+                borderRadius: 12,
+                overflow: 'hidden',
+              }}
+            >
+              <SubtleHover active={hovered} native style={{ borderRadius: 12 }} />
+              <Text style={{ fontWeight: '600' }}>{label}</Text>
+            </View>
+          ))}
+        </Pressable>
+      );
+    }
+    return <Thread />;
+  },
+};

package/src/subtle-hover/SubtleHover.tsx

@@ -4,9 +4,9 @@ import { Platform, StyleSheet, View, type StyleProp, type ViewStyle } from 'reac
 import { useTheme } from '../theme';
 
 /**
- * True on touch-capable web browsers (coarse pointer). A hover wash only makes
- * sense with a hovering pointer, so it is suppressed on touch web to match
- * native (which has no hover at all).
+ * True on touch-capable web browsers (coarse pointer). The CSS `group-hover`
+ * wash only makes sense with a hovering pointer, so it is suppressed on touch
+ * web to match native (which has no hover at all).
  */
 const IS_WEB_TOUCH_DEVICE =
   Platform.OS === 'web' &&
@@ -14,62 +14,70 @@ const IS_WEB_TOUCH_DEVICE =
   typeof window.matchMedia === 'function' &&
   window.matchMedia('(pointer: coarse)').matches;
 
-/**
- * Web-only style that (a) cross-fades the overlay opacity and (b) promotes it to
- * its own GPU layer so Safari doesn't nudge the layout by a subpixel when the
- * overlay composites on hover. Cast because RN's `ViewStyle` has no `willChange`
- * / `transition*` keys; react-native-web forwards them to the DOM node.
- */
-const WEB_TRANSITION = {
-  transitionProperty: 'opacity',
-  transitionDuration: '0.1s',
-  transitionTimingFunction: 'ease',
-  willChange: 'opacity',
-} as ViewStyle;
-
 export interface SubtleHoverProps {
-  /** Whether the parent is currently hovered. Drives the overlay opacity. */
-  hover: boolean;
   /**
-   * Overlay opacity when hovered. Defaults to a mode-tuned value (0.4 dark /
-   * 0.5 light) that reads as a gentle contrast wash.
+   * JS-driven visibility for a coordinated highlight — e.g. every post of one
+   * thread lighting up together. When omitted, the wash instead follows CSS
+   * `group-hover` on web with ZERO React state: the parent element must carry
+   * `className="group"`.
    */
-  opacity?: number;
+  active?: boolean;
   /** Extra style merged last — e.g. `borderRadius` to match the parent. */
   style?: StyleProp<ViewStyle>;
   /**
-   * Opt in to rendering on native. Off by default: hover is a pointer
-   * affordance, so this is a web-only overlay unless a native surface wants the
-   * same wash driven by another interaction (e.g. press).
+   * Render on native too (default `false`). Hover is a web pointer affordance,
+   * so the CSS `group-hover` mode is web-only; native only shows the wash in the
+   * JS `active` mode, and only when this is set.
    */
   native?: boolean;
 }
 
 /**
- * An absolutely-positioned, non-interactive contrast wash that fades in while
- * its parent is hovered. Ported from Bluesky's `SubtleHover`. Pairs naturally
- * with {@link useInteractionState} — pass its `state` as `hover`.
+ * An absolutely-positioned, non-interactive contrast wash. Two modes:
+ *
+ * - **CSS `group-hover`** (`active` omitted): the wash fades in on hover purely
+ *   through NativeWind classes — no React state. The parent must carry
+ *   `className="group"`. Web-only (native and touch-web have no hover).
+ * - **JS `active`**: the wash opacity follows the boolean, so several elements
+ *   can light up together (e.g. every post of a thread). Web always; native
+ *   only when `native` is set.
  *
- * Renders nothing on touch-web (no hovering pointer) and on native unless
- * `native` is set. Color comes from the theme's `contrast50` token so the wash
- * tracks the active preset and light/dark mode.
+ * The wash color comes from the theme's `contrast50` token so it tracks the
+ * active preset and light/dark mode. The web cross-fade is a NativeWind
+ * `transition-opacity` class — no manual `willChange` / web-style casts.
  */
-export function SubtleHover({ hover, opacity, style, native = false }: SubtleHoverProps) {
+export function SubtleHover({ active, style, native = false }: SubtleHoverProps) {
   const theme = useTheme();
-
   const isWeb = Platform.OS === 'web';
-  if (isWeb ? IS_WEB_TOUCH_DEVICE : !native) {
-    return null;
-  }
 
-  const targetOpacity = opacity ?? (theme.isDark ? 0.4 : 0.5);
+  // Full literal class strings (never concatenated fragments) so NativeWind's
+  // compiler statically extracts every variant.
+  if (active === undefined) {
+    // CSS group-hover: a web pointer affordance. Native has no hover, and
+    // neither does touch web — render nothing there.
+    if (!isWeb || IS_WEB_TOUCH_DEVICE) return null;
+    return (
+      <View
+        {...({
+          className:
+            'opacity-0 group-hover:opacity-50 dark:group-hover:opacity-40 transition-opacity duration-150',
+        } as Record<string, string>)}
+        style={[styles.overlay, { backgroundColor: theme.colors.contrast50 }, style]}
+      />
+    );
+  }
 
+  // JS-driven coordinated mode: web always; native only when opted in.
+  if (!isWeb && !native) return null;
   return (
     <View
+      {...({ className: 'transition-opacity duration-150' } as Record<string, string>)}
       style={[
         styles.overlay,
-        { backgroundColor: theme.colors.contrast50, opacity: hover ? targetOpacity : 0 },
-        isWeb ? WEB_TRANSITION : null,
+        {
+          backgroundColor: theme.colors.contrast50,
+          opacity: active ? (theme.isDark ? 0.4 : 0.5) : 0,
+        },
         style,
       ]}
     />