@oxy.so/bloom 3.5.0 → 4.0.0

package/src/sidebar/SidebarItem.tsx

@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useInteractionState } from '../hooks/use-interaction-state';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -7,7 +8,7 @@ import { Text } from '../typography';
 import { useSidebarMetrics } from './metrics';
 import { useSidebarPalette } from './palette';
 import { borderRadius } from '../styles/tokens';
-import { Collapsible, IS_WEB, useInSidebar, useSidebarWebCss } from './parts';
+import { Collapsible, IS_WEB, useInSidebar, useSidebarCollapseProgress, useSidebarWebCss } from './parts';
 import type { SidebarItemProps } from './types';
 
 /**
@@ -16,7 +17,7 @@ import type { SidebarItemProps } from './types';
  *   row        the size's inset, full pill, label/badge space-between;
  *              full width expanded, the size's square collapsed
  *   content    the size's glyph + 8 gap + its label step (no wrap) —
- *              `medium` is 20 and `body-medium` (`metrics.ts`)
+ *              `md` is 20 and `body-medium` (`metrics.ts`)
  *   rest       icon-secondary / text-secondary; hover background-secondary-hover
  *   selected   solid accent-500 fill with the primary foreground; no
  *              gradient, ring or top highlight
@@ -41,6 +42,9 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
   useSidebarWebCss();
   const { state: hovered, onIn, onOut } = useInteractionState();
   const inSidebar = useInSidebar();
+  const progress = useSidebarCollapseProgress(collapsed);
+  const itemGap = metrics.row.gap;
+  const contentStyle = useAnimatedStyle(() => ({ gap: itemGap * (1 - progress.value) }), [progress, itemGap]);
   const foreground = selected ? palette.selectedForeground : palette.textSecondary;
 
   const rowStyle: WebCssStyle = {
@@ -85,7 +89,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
       style={[rowStyle, style]}
       testID={testID}
     >
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: metrics.row.gap, minWidth: 0, flexShrink: 1 }}>
+      <Animated.View style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }, contentStyle]}>
         <View style={{ flexShrink: 0 }}>
           <Icon width={metrics.row.icon} height={metrics.row.icon} fill={foreground} />
         </View>
@@ -94,7 +98,7 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
             {label}
           </Text>
         </Collapsible>
-      </View>
+      </Animated.View>
       {badge != null ? <Collapsible collapsed={collapsed}>{badge}</Collapsible> : null}
     </Pressable>
   );

package/src/sidebar/SidebarLogoView.tsx

@@ -35,7 +35,7 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
   const label = accessibilityLabel ?? (typeof wordmark === 'string' ? wordmark : undefined);
 
   const content = (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: icon != null && wordmark != null ? 8 : 0, minWidth: 0 }}>
+    <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0 }}>
       {icon != null ? (
         <View
           style={{ width: SIDEBAR_LOGO_SIZE, height: SIDEBAR_LOGO_SIZE, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
@@ -46,7 +46,7 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
       ) : null}
       {wordmark != null && showWordmark ? (
         <Collapsible collapsed={collapsed}>
-          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
+          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, paddingLeft: icon != null ? 8 : 0, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
             {typeof wordmark === 'string' ? (
               <Text variant="headline-semibold" numberOfLines={1} style={{ color: palette.text }}>
                 {wordmark}

package/src/sidebar/SidebarModeSwitcher.tsx

@@ -1,11 +1,12 @@
 import React, { memo, useEffect } from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
   useReducedMotion,
   useSharedValue,
   withTiming,
+  type SharedValue,
 } from 'react-native-reanimated';
 
 import { SEGMENTED_THUMB_EASE_BEZIER, SEGMENTED_THUMB_MS } from '../button/shared';
@@ -14,7 +15,8 @@ import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { Text } from '../typography';
 import { useSidebarPalette } from './palette';
-import { Collapsible, IS_WEB, useSidebarWebCss, webHook } from './parts';
+import { useSidebarMetrics } from './metrics';
+import { Collapsible, IS_WEB, useInSidebar, useSidebarCollapseProgress, useSidebarWebCss, webHook } from './parts';
 import type { SidebarMode, SidebarModeSwitcherProps } from './types';
 
 /**
@@ -33,6 +35,7 @@ import type { SidebarMode, SidebarModeSwitcherProps } from './types';
  * two read as one family. A `radiogroup`: each row is a `radio`.
  */
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 const ROW_HEIGHT = 32;
 const ROW_GAP = 4;
 const PADDING = 4;
@@ -42,12 +45,18 @@ function ModeRow({
   mode,
   selected,
   collapsed,
+  progress,
+  compactSquare,
+  compactIcon,
   onSelect,
   testID,
 }: {
   mode: SidebarMode;
   selected: boolean;
   collapsed: boolean;
+  progress: SharedValue<number>;
+  compactSquare: number;
+  compactIcon: number;
   onSelect: (key: string) => void;
   testID?: string;
 }) {
@@ -56,17 +65,27 @@ function ModeRow({
   const Icon = mode.icon;
   const foreground = selected ? palette.text : palette.textSecondary;
 
+  const geometry = useAnimatedStyle(() => ({
+    height: ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value,
+    gap: 4 * (1 - progress.value),
+  }), [progress, compactSquare]);
+  const iconBox = useAnimatedStyle(() => {
+    const side = ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value;
+    return { width: side, height: side };
+  }, [progress, compactSquare]);
+  const glyphStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + (compactIcon / 18 - 1) * progress.value }],
+  }), [progress, compactIcon]);
   const rowStyle: WebCssStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 4,
-    height: ROW_HEIGHT,
+
     borderRadius: borderRadius.full,
     '--bloom-sidebar-ring': palette.ring,
   };
 
   return (
-    <Pressable
+    <AnimatedPressable
       {...webHook('ring')}
       {...(IS_WEB && collapsed ? { title: mode.label } : null)}
       role="radio"
@@ -76,12 +95,12 @@ function ModeRow({
       onHoverIn={onIn}
       onHoverOut={onOut}
       onPress={() => onSelect(mode.key)}
-      style={rowStyle}
+      style={[rowStyle, geometry]}
       testID={testID}
     >
-      <View style={{ width: ROW_HEIGHT, height: ROW_HEIGHT, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-        <Icon width={18} height={18} fill={foreground} />
-      </View>
+      <Animated.View style={[{ alignItems: 'center', justifyContent: 'center', flexShrink: 0 }, iconBox]}>
+        <Animated.View style={glyphStyle}><Icon width={18} height={18} fill={foreground} /></Animated.View>
+      </Animated.View>
       <Collapsible collapsed={collapsed} style={{ flex: 1, minWidth: 0 }}>
         <Text variant="body-2-medium" numberOfLines={1} style={{ color: foreground }}>
           {mode.label}
@@ -98,7 +117,7 @@ function ModeRow({
           </Text>
         </Collapsible>
       ) : null}
-    </Pressable>
+    </AnimatedPressable>
   );
 }
 
@@ -114,33 +133,47 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
   const palette = useSidebarPalette();
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
+  const metrics = useSidebarMetrics();
+  const progress = useSidebarCollapseProgress(collapsed);
+  const inSidebar = useInSidebar();
+  const compactSquare = metrics.row.square;
+  const compactIcon = metrics.row.icon;
+  // Grow into the panel inset continuously while its content column narrows.
+  const trackStyle = useAnimatedStyle(() => ({
+    marginLeft: inSidebar ? -PADDING * progress.value : 0,
+    marginRight: inSidebar ? -PADDING * progress.value : 0,
+    borderRadius: (ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value + PADDING * 2) / 2,
+  }), [progress, compactSquare, inSidebar]);
 
   // One scan answers both questions: which row the thumb sits on, and whether
   // there is a selected row at all.
   const selectedIndex = modes.findIndex((mode) => mode.key === value);
   const selectedKnown = selectedIndex !== -1;
   const index = Math.max(0, selectedIndex);
-  const offset = useSharedValue(index * (ROW_HEIGHT + ROW_GAP));
+  const selectedPosition = useSharedValue(index);
   useEffect(() => {
-    const target = index * (ROW_HEIGHT + ROW_GAP);
-    offset.value = reducedMotion ? target : withTiming(target, { duration: SEGMENTED_THUMB_MS, easing: EASE });
-  }, [index, reducedMotion, offset]);
-  const thumbStyle = useAnimatedStyle(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
+    selectedPosition.value = reducedMotion ? index : withTiming(index, { duration: SEGMENTED_THUMB_MS, easing: EASE });
+  }, [index, reducedMotion, selectedPosition]);
+  const thumbStyle = useAnimatedStyle(() => {
+    const height = ROW_HEIGHT + (compactSquare - ROW_HEIGHT) * progress.value;
+    return { height, transform: [{ translateY: selectedPosition.value * (height + ROW_GAP) }] };
+  }, [progress, compactSquare, selectedPosition]);
 
   return (
-    <View
+    <Animated.View
       role="radiogroup"
       accessibilityLabel={accessibilityLabel}
       testID={testID}
       style={[
         {
           position: 'relative',
-          width: '100%',
+          width: inSidebar ? undefined : collapsed ? compactSquare + PADDING * 2 : '100%',
+          alignSelf: inSidebar ? 'stretch' : 'center',
           padding: PADDING,
           gap: ROW_GAP,
-          borderRadius: (ROW_HEIGHT + PADDING * 2) / 2,
           backgroundColor: palette.tertiary,
         },
+        trackStyle,
         style,
       ]}
     >
@@ -155,7 +188,6 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
               top: PADDING,
               left: PADDING,
               right: PADDING,
-              height: ROW_HEIGHT,
               borderRadius: borderRadius.full,
               backgroundColor: palette.segmentedThumb,
               boxShadow: palette.segmentedThumbShadow,
@@ -170,11 +202,14 @@ const SidebarModeSwitcherComponent: React.FC<SidebarModeSwitcherProps> = ({
           mode={mode}
           selected={mode.key === value}
           collapsed={collapsed}
+          progress={progress}
+          compactSquare={compactSquare}
+          compactIcon={compactIcon}
           onSelect={onValueChange}
           testID={testID ? `${testID}-${mode.key}` : undefined}
         />
       ))}
-    </View>
+    </Animated.View>
   );
 };
 

package/src/sidebar/SidebarPlanCard.tsx

@@ -1,11 +1,12 @@
 import React, { memo } from 'react';
-import { View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { borderRadius } from '../styles/tokens';
 import { Text } from '../typography';
 import { useSidebarPalette } from './palette';
-import { SidebarAvatarView } from './parts';
+import { Collapsible, IS_WEB, SidebarAvatarView, useSidebarCollapseProgress, useInSidebar } from './parts';
 import type { SidebarPlanCardProps } from './types';
 
 /**
@@ -21,6 +22,16 @@ import type { SidebarPlanCardProps } from './types';
  */
 function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: SidebarPlanCardProps) {
   const palette = useSidebarPalette();
+  const progress = useSidebarCollapseProgress(collapsed);
+  const inSidebar = useInSidebar();
+  const naturalWidth = useSharedValue(0);
+  const geometry = useAnimatedStyle(() => ({
+    width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * progress.value : progress.value === 1 ? 36 : '100%',
+    height: 56 - 20 * progress.value,
+    paddingLeft: 10 - 8 * progress.value,
+    paddingRight: 12 - 10 * progress.value,
+  }), [progress, inSidebar, naturalWidth]);
+  const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const avatar = plan.avatar ?? { initials: plan.name.slice(0, 1).toUpperCase(), color: 'blue' as const };
 
   const avatarNode = avatar.source ? (
@@ -50,17 +61,12 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
     </View>
   );
 
-  if (collapsed) {
-    return (
-      <View testID={testID} accessibilityLabel={`${plan.name}, ${plan.plan}`} style={[{ width: 36, height: 36, alignItems: 'center', justifyContent: 'center' }, style]}>
-        {avatarNode}
-      </View>
-    );
-  }
 
   return (
-    <View
+    <Animated.View
+      accessibilityLabel={collapsed ? `${plan.name}, ${plan.plan}` : undefined}
       testID={testID}
+      onLayout={(event) => { if (progress.value === 0) naturalWidth.value = event.nativeEvent.layout.width; }}
       style={[
         {
           width: '100%',
@@ -68,17 +74,17 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
           alignItems: 'center',
           justifyContent: 'space-between',
           borderRadius: 12,
-          backgroundColor: palette.tertiary,
-          paddingTop: 8,
-          paddingBottom: 8,
-          paddingRight: 12,
-          paddingLeft: 10,
+          overflow: 'hidden',
         },
         style,
+        { backgroundColor: 'transparent' },
+        geometry,
       ]}>
-      <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+      <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { borderRadius: 12, backgroundColor: StyleSheet.flatten(style)?.backgroundColor ?? palette.tertiary }, fill]} />
+      <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center' }}>
         {avatarNode}
-        <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
+        <Collapsible collapsed={collapsed}>
+        <View style={{ paddingLeft: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
           <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
             {plan.name}
           </Text>
@@ -86,11 +92,16 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
             {plan.plan}
           </Text>
         </View>
+        </Collapsible>
       </View>
-      <Button variant="secondary" size="small" onPress={plan.onAction}>
+      <View pointerEvents={collapsed ? 'none' : 'auto'} aria-hidden={collapsed} accessibilityElementsHidden={collapsed} importantForAccessibility={collapsed ? 'no-hide-descendants' : 'auto'} {...(IS_WEB && collapsed ? { inert: true } : {})}>
+      <Collapsible collapsed={collapsed}>
+      <Button size="sm" onPress={plan.onAction} appearance="subtle" tone="neutral">
         {plan.actionLabel ?? 'Upgrade'}
       </Button>
-    </View>
+      </Collapsible>
+      </View>
+    </Animated.View>
   );
 }
 

package/src/sidebar/SidebarRail.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
+import { View } from 'react-native';
 
 import { Badge } from '../badge';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
+import { SidebarScrollArea } from './SidebarScrollArea';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarRailItem } from './SidebarRailItem';
 import type { SidebarNavItem, SidebarProps } from './types';
@@ -52,7 +53,7 @@ export function SidebarRail({
             <Badge
               content={item.badge}
               style={{ backgroundColor: isSelected ? palette.badgePrimary : palette.badgeNeutral }}
-              textStyle={{ color: isSelected ? '#ffffff' : palette.textSecondary }}
+              textStyle={{ color: isSelected ? palette.badgePrimaryForeground : palette.textSecondary }}
             />
           ) : undefined
         }
@@ -81,7 +82,9 @@ export function SidebarRail({
           <SidebarLogoView logo={logo} showWordmark={false} testID="sidebar-logo" />
         </View>
       ) : null}
-      <ScrollView
+      <SidebarScrollArea
+        fadeColor={palette.flat}
+        testID={testID ? `${testID}-scroll` : 'sidebar-rail-scroll'}
         {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
         style={{ flex: 1 }}
         contentContainerStyle={{
@@ -98,7 +101,7 @@ export function SidebarRail({
         <View role="navigation" style={{ width: '100%', gap: 8 }}>
           {items.map(renderItem)}
         </View>
-      </ScrollView>
+      </SidebarScrollArea>
       {secondaryItems.length > 0 ? (
         <View
           role="navigation"

package/src/sidebar/SidebarRailItem.tsx

@@ -1,4 +1,5 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect } from 'react';
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -13,6 +14,8 @@ import type { SidebarRailItemProps } from './types';
 const INDICATOR_WIDTH = 48;
 const INDICATOR_HEIGHT = 32;
 const ICON_SIZE = 22;
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const SELECTION_DURATION = 220;
 
 /**
  * A navigation rail destination: the icon over its label, stacked and centred.
@@ -41,7 +44,16 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
   const palette = useSidebarPalette();
   useSidebarWebCss();
   const { state: hovered, onIn, onOut } = useInteractionState();
-  const Glyph = selected && ActiveIcon ? ActiveIcon : Icon;
+  const SelectedGlyph = ActiveIcon ?? Icon;
+  const reducedMotion = useReducedMotion();
+  const selection = useSharedValue(selected ? 1 : 0);
+  useEffect(() => {
+    selection.value = reducedMotion ? (selected ? 1 : 0) : withTiming(selected ? 1 : 0, { duration: SELECTION_DURATION, easing: Easing.bezier(0.2, 0, 0, 1) });
+  }, [selected, reducedMotion, selection]);
+  const indicatorStyle = useAnimatedStyle(() => ({ backgroundColor: interpolateColor(selection.value, [0, 1], [hovered ? palette.rowHover : 'transparent', palette.selected]) }), [selection, hovered, palette.rowHover, palette.selected]);
+  const inactiveStyle = useAnimatedStyle(() => ({ opacity: 1 - selection.value }), [selection]);
+  const activeStyle = useAnimatedStyle(() => ({ opacity: selection.value }), [selection]);
+  const labelStyle = useAnimatedStyle(() => ({ color: interpolateColor(selection.value, [0, 1], [palette.textSecondary, palette.text]) }), [selection, palette.textSecondary, palette.text]);
 
   const webProps: Record<string, unknown> = IS_WEB
     ? {
@@ -80,43 +92,42 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
       ]}
       testID={testID}
     >
-      <View
-        style={{
+      <Animated.View
+        style={[{
           width: INDICATOR_WIDTH,
           height: INDICATOR_HEIGHT,
           alignItems: 'center',
           justifyContent: 'center',
           borderRadius: borderRadius.full,
-          backgroundColor: selected ? palette.selected : hovered ? palette.rowHover : 'transparent',
-        }}
+        }, indicatorStyle]}
         testID={testID ? `${testID}-indicator` : undefined}
       >
-        <Glyph
-          width={ICON_SIZE}
-          height={ICON_SIZE}
-          fill={selected ? palette.selectedForeground : palette.textSecondary}
-        />
+        <Animated.View testID={testID ? `${testID}-inactive-glyph` : undefined} pointerEvents="none" aria-hidden accessibilityElementsHidden style={[{ position: 'absolute', width: ICON_SIZE, height: ICON_SIZE }, inactiveStyle]}>
+          <Icon width={ICON_SIZE} height={ICON_SIZE} fill={palette.textSecondary} />
+        </Animated.View>
+        <Animated.View testID={testID ? `${testID}-active-glyph` : undefined} pointerEvents="none" aria-hidden accessibilityElementsHidden style={[{ position: 'absolute', width: ICON_SIZE, height: ICON_SIZE }, activeStyle]}>
+          <SelectedGlyph width={ICON_SIZE} height={ICON_SIZE} fill={palette.selectedForeground} />
+        </Animated.View>
         {badge != null ? (
           <View pointerEvents="none" style={{ position: 'absolute', top: -6, left: INDICATOR_WIDTH - 16 }}>
             {badge}
           </View>
         ) : null}
-      </View>
-      <Text
+      </Animated.View>
+      <AnimatedText
         variant="caption-2-regular"
         numberOfLines={1}
-        style={{
+        style={[{
           maxWidth: '100%',
           fontSize: 10,
           lineHeight: 14,
           letterSpacing: 0,
           textAlign: 'center',
           fontWeight: selected ? '500' : '400',
-          color: selected ? palette.text : palette.textSecondary,
-        }}
+        }, labelStyle]}
       >
         {label}
-      </Text>
+      </AnimatedText>
     </Pressable>
   );
 };

package/src/sidebar/SidebarScrollArea.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import { ScrollView, View, type ScrollViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { EdgeScrim } from '../page-header/EdgeScrim';
+import { parseRgba } from '../theme/color-utils';
+
+interface SidebarScrollAreaProps extends ScrollViewProps {
+  /** Actual opaque surface behind this scroll region. */
+  fadeColor: string;
+  fadeHeight?: number;
+}
+
+const EDGE_THRESHOLD = 1;
+
+/** Internal scroll viewport: fades describe content beyond the visible edges. */
+export const SidebarScrollArea = forwardRef<ScrollView, SidebarScrollAreaProps>(function SidebarScrollArea(
+  { fadeColor, fadeHeight = 40, style, children, testID, onLayout, onContentSizeChange, onScroll, scrollEventThrottle = 16, ...props },
+  ref,
+) {
+  const topFade = useSharedValue(0);
+  const bottomFade = useSharedValue(0);
+  const metrics = useRef({ height: 0, content: 0, offset: 0 });
+  const [edges, setEdges] = useState({ top: false, bottom: false });
+  const updateEdges = useCallback(() => {
+    const { height, content, offset } = metrics.current;
+    const range = Math.max(0, content - height);
+    const y = Math.max(0, Math.min(offset, range));
+    const overflow = height > 0 && range > EDGE_THRESHOLD;
+    const top = overflow && y > EDGE_THRESHOLD;
+    const bottom = overflow && range - y > EDGE_THRESHOLD;
+    topFade.value = overflow ? Math.min(1, y / Math.max(1, fadeHeight)) : 0;
+    bottomFade.value = overflow ? Math.min(1, (range - y) / Math.max(1, fadeHeight)) : 0;
+    setEdges(previous => previous.top === top && previous.bottom === bottom ? previous : { top, bottom });
+  }, [topFade, bottomFade, fadeHeight]);
+  // SVG never receives alpha inside stopColor; it travels on the containing view.
+  const parsed = parseRgba(fadeColor);
+  const color = parsed ? `rgb(${parsed.r}, ${parsed.g}, ${parsed.b})` : fadeColor;
+  const opacity = parsed?.a ?? 1;
+  const topStyle = useAnimatedStyle(() => ({ opacity: topFade.value * opacity }), [topFade, opacity]);
+  const bottomStyle = useAnimatedStyle(() => ({ opacity: bottomFade.value * opacity }), [bottomFade, opacity]);
+  const prefix = testID ?? 'sidebar-scroll';
+  return <View testID={`${prefix}-viewport`} style={[{ minHeight: 0, position: 'relative' }, style]}>
+    <ScrollView {...props} ref={ref} testID={testID} style={{ flexGrow: 1, flexShrink: 1, minHeight: 0 }}
+      scrollEventThrottle={scrollEventThrottle}
+      onLayout={event => { metrics.current.height = event.nativeEvent.layout.height; updateEdges(); onLayout?.(event); }}
+      onContentSizeChange={(width, height) => { metrics.current.content = height; updateEdges(); onContentSizeChange?.(width, height); }}
+      onScroll={event => { metrics.current.offset = event.nativeEvent.contentOffset.y; metrics.current.height = event.nativeEvent.layoutMeasurement.height; metrics.current.content = event.nativeEvent.contentSize.height; updateEdges(); onScroll?.(event); }}>
+      {children}
+    </ScrollView>
+    {edges.top && <Animated.View testID={`${prefix}-fade-top`} pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[{ position: 'absolute', left: 0, right: 0, top: 0, height: fadeHeight }, topStyle]}><EdgeScrim color={color} /></Animated.View>}
+    {edges.bottom && <Animated.View testID={`${prefix}-fade-bottom`} pointerEvents="none" aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={[{ position: 'absolute', left: 0, right: 0, bottom: 0, height: fadeHeight, transform: [{ rotate: '180deg' }] }, bottomStyle]}><EdgeScrim color={color} /></Animated.View>}
+  </View>;
+});
+SidebarScrollArea.displayName = 'SidebarScrollArea';

package/src/sidebar/SidebarTeamMenu.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useState } from 'react';
-import { Pressable, View, useWindowDimensions, type GestureResponderEvent } from 'react-native';
+import { Pressable, View, StyleSheet, useWindowDimensions, type GestureResponderEvent } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -24,9 +24,13 @@ import {
   menuPanelStyle,
   SidebarAvatarView,
   useSidebarWebCss,
+  useSidebarCollapseProgress,
+  useInSidebar,
 } from './parts';
 import type { SidebarMenuGroup, SidebarMenuItem, SidebarTeamMenuProps } from './types';
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 /**
  * The team card at the foot of the rail and the
  * menu it opens beside the sidebar.
@@ -152,38 +156,23 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
   }, [open, reducedMotion, turn]);
   const chevronStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${turn.value}deg` }] }), [turn]);
 
-  const cardStyle: WebCssStyle = collapsed
-    ? {
-        width: 36,
-        height: 36,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        overflow: 'hidden',
-        borderRadius: borderRadius.full,
-        borderWidth: 2,
-        borderColor: hovered ? palette.teamHoverBorder : 'transparent',
-        backgroundColor: 'transparent',
-        '--bloom-sidebar-ring': palette.ring,
-        '--bloom-sidebar-ring-offset': palette.panel,
-      }
-    : {
-        width: '100%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        overflow: 'hidden',
-        borderRadius: 12,
-        borderWidth: 2,
-        borderColor: hovered ? palette.teamHoverBorder : 'transparent',
-        backgroundColor: palette.tertiary,
-        paddingTop: 8,
-        paddingBottom: 8,
-        paddingLeft: 10,
-        paddingRight: 16,
-        '--bloom-sidebar-ring': palette.ring,
-        '--bloom-sidebar-ring-offset': palette.panel,
-      };
+  const progress = useSidebarCollapseProgress(collapsed);
+  const inSidebar = useInSidebar();
+  const naturalWidth = useSharedValue(0);
+  const expandedHeight = team.email ? 60 : 52;
+  const geometry = useAnimatedStyle(() => {
+    const p = progress.value;
+    const height = expandedHeight + (36 - expandedHeight) * p;
+    return { width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * p : p === 1 ? 36 : '100%',
+      height,
+      borderRadius: height / 2, paddingLeft: 10 * (1 - p), paddingRight: 16 * (1 - p) };
+  }, [progress, expandedHeight, inSidebar, naturalWidth]);
+  const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
+  const cardStyle: WebCssStyle = {
+    width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    overflow: 'hidden', borderWidth: 2, borderColor: hovered ? palette.teamHoverBorder : 'transparent',
+    '--bloom-sidebar-ring': palette.ring, '--bloom-sidebar-ring-offset': palette.panel,
+  };
 
   const identity = (
     <>
@@ -203,19 +192,21 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild label={team.name} style={collapsed ? undefined : { alignSelf: 'stretch' }}>
-        <Pressable
+      <PopoverTrigger asChild label={team.name} style={{ alignSelf: 'stretch' }}>
+        <AnimatedPressable
           {...(IS_WEB ? { dataSet: { bloomSidebar: 'offset' } } : {})}
           accessibilityLabel={team.name}
           onHoverIn={onIn}
           onHoverOut={onOut}
-          style={[cardStyle, style]}
+          onLayout={(event) => { if (progress.value === 0) naturalWidth.value = event.nativeEvent.layout.width; }}
+          style={[cardStyle, style, { backgroundColor: 'transparent' }, geometry]}
           testID={testID}
         >
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minWidth: 0, flexShrink: 1 }}>
+          <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: StyleSheet.flatten(style)?.backgroundColor ?? palette.tertiary }, fill]} />
+          <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }}>
             <SidebarAvatarView avatar={team.avatar} size="md" palette={palette} />
             <Collapsible collapsed={collapsed}>
-              <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
+              <View style={{ paddingLeft: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
                 <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                   {team.name}
                 </Text>
@@ -244,7 +235,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
               </Animated.View>
             </View>
           </Collapsible>
-        </Pressable>
+        </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
         label={`${team.name} menu`}