@squad-sports/react-native 1.3.1

package/src/components/ux/navigation/UrlButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, StyleSheet, Linking, Pressable } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface UrlButtonProps {
+  url: string;
+  children: React.ReactNode;
+  style?: object;
+}
+
+export default function UrlButton({ url, children, style }: UrlButtonProps) {
+  return (
+    <Pressable onPress={() => Linking.openURL(url)} style={style} accessibilityRole="link">
+      {children}
+    </Pressable>
+  );
+}
+
+export function UrlButtonInline({ url, children }: { url: string; children: React.ReactNode }) {
+  return (
+    <Text onPress={() => Linking.openURL(url)} accessibilityRole="link">
+      {children}
+    </Text>
+  );
+}

package/src/components/ux/scroll/RefreshableFlatList.tsx

@@ -0,0 +1,35 @@
+/**
+ * FlatList with built-in pull-to-refresh.
+ * Ported from squad-demo/src/components/ux/scroll/RefreshableFlatList.tsx.
+ */
+import React, { useCallback, useState } from 'react';
+import { FlatList, RefreshControl, type FlatListProps } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface RefreshableFlatListProps<T> extends FlatListProps<T> {
+  onRefresh: () => Promise<void>;
+}
+
+export default function RefreshableFlatList<T>({ onRefresh, ...props }: RefreshableFlatListProps<T>) {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await onRefresh();
+    setRefreshing(false);
+  }, [onRefresh]);
+
+  return (
+    <FlatList
+      {...props}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={handleRefresh}
+          tintColor={Colors.white}
+          colors={[Colors.purple1]}
+        />
+      }
+    />
+  );
+}

package/src/components/ux/shapes/Shapes.tsx

@@ -0,0 +1,23 @@
+/**
+ * Shape components.
+ * Ported from squad-demo/src/components/ux/shapes/.
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors } from '../../../theme/ThemeContext';
+
+export function Circle({ size = 48, color = Colors.purple1, children }: { size?: number; color?: string; children?: React.ReactNode }) {
+  return (
+    <View style={[styles.circle, { width: size, height: size, borderRadius: size / 2, backgroundColor: color }]}>
+      {children}
+    </View>
+  );
+}
+
+export function HorizontalLine({ color = Colors.gray3, thickness = StyleSheet.hairlineWidth, marginVertical = 0 }: { color?: string; thickness?: number; marginVertical?: number }) {
+  return <View style={{ height: thickness, backgroundColor: color, marginVertical }} />;
+}
+
+const styles = StyleSheet.create({
+  circle: { justifyContent: 'center', alignItems: 'center', overflow: 'hidden' },
+});

package/src/components/ux/text/Typography.tsx

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { Text, TextProps, StyleSheet } from 'react-native';
+
+interface TypographyProps extends TextProps {
+  children: ReactNode;
+}
+
+function createTypography(baseStyle: object) {
+  return function TypographyComponent({ children, style, ...props }: TypographyProps) {
+    return (
+      <Text style={[baseStyle, style]} {...props}>
+        {children}
+      </Text>
+    );
+  };
+}
+
+export const TitleLarge = createTypography({ fontSize: 56, lineHeight: 66, fontWeight: '500' });
+export const TitleRegular = createTypography({ fontSize: 32, lineHeight: 42, fontWeight: '500' });
+export const TitleMedium = createTypography({ fontSize: 24, lineHeight: 36, fontWeight: '500' });
+export const TitleSmall = createTypography({ fontSize: 18, lineHeight: 27, fontWeight: '700' });
+export const TitleTiny = createTypography({ fontSize: 16, lineHeight: 24, fontWeight: '500' });
+export const SubtitleSmall = createTypography({ fontSize: 14, lineHeight: 21, fontWeight: '500' });
+export const BodyRegular = createTypography({ fontSize: 16, lineHeight: 24 });
+export const BodyMedium = createTypography({ fontSize: 14, lineHeight: 21 });
+export const BodySmall = createTypography({ fontSize: 12, lineHeight: 18 });
+export const ButtonLarge = createTypography({ fontSize: 16 });
+export const ButtonSmall = createTypography({ fontSize: 14 });

package/src/components/ux/user-image/UserImage.tsx

@@ -0,0 +1,75 @@
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import { Image } from 'expo-image';
+import { Colors } from '../../../theme/ThemeContext';
+
+interface UserImageProps {
+  imageUrl?: string | null;
+  displayName?: string | null;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+  borderColor?: string;
+}
+
+function UserImage({
+  imageUrl,
+  displayName,
+  size = 48,
+  style,
+  borderColor,
+}: UserImageProps) {
+  const initials = displayName
+    ? displayName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+    : '?';
+
+  const containerStyle = [
+    styles.container,
+    {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      ...(borderColor && { borderWidth: 2, borderColor }),
+    },
+    style,
+  ];
+
+  const a11yLabel = displayName ? `${displayName}'s profile photo` : 'User profile photo';
+
+  if (imageUrl) {
+    return (
+      <View style={containerStyle} accessibilityLabel={a11yLabel} accessibilityRole="image">
+        <Image
+          source={{ uri: imageUrl }}
+          style={{ width: size, height: size, borderRadius: size / 2 }}
+          contentFit="cover"
+          transition={200}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[containerStyle, styles.placeholder]} accessibilityLabel={a11yLabel} accessibilityRole="image">
+      <Text style={[styles.initials, { fontSize: size * 0.36 }]} accessibilityElementsHidden>
+        {initials}
+      </Text>
+    </View>
+  );
+}
+
+export default memo(UserImage);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  placeholder: {
+    backgroundColor: Colors.purple1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  initials: {
+    color: Colors.white,
+    fontWeight: '600',
+  },
+});

package/src/components/ux/user-image/UserImageVariants.tsx

@@ -0,0 +1,104 @@
+/**
+ * UserImage variant components.
+ * Ported from squad-demo/src/components/ux/user-image/*.
+ */
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import UserImage from './UserImage';
+import { Colors } from '../../../theme/ThemeContext';
+
+// --- ImageCircle ---
+export function ImageCircle({ uri, size = 48 }: { uri?: string; size?: number }) {
+  return <UserImage imageUrl={uri} displayName="" size={size} />;
+}
+
+// --- UserImageWithEmoji ---
+export function UserImageWithEmoji({
+  imageUrl, displayName, size = 48, emoji,
+}: { imageUrl?: string; displayName?: string; size?: number; emoji?: string }) {
+  return (
+    <View>
+      <UserImage imageUrl={imageUrl} displayName={displayName} size={size} />
+      {emoji && (
+        <View style={[styles.emojiBadge, { bottom: -2, right: -2 }]}>
+          <Text style={styles.emojiText}>{emoji}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+// --- CommunityImageWithEmoji ---
+export function CommunityImageWithEmoji({
+  imageUrl, name, emoji, size = 48,
+}: { imageUrl?: string; name?: string; emoji?: string; size?: number }) {
+  return <UserImageWithEmoji imageUrl={imageUrl} displayName={name} size={size} emoji={emoji} />;
+}
+
+// --- FounderImageWithEmoji ---
+export function FounderImageWithEmoji({
+  imageUrl, displayName, size = 48,
+}: { imageUrl?: string; displayName?: string; size?: number }) {
+  return <UserImageWithEmoji imageUrl={imageUrl} displayName={displayName} size={size} emoji="star" />;
+}
+
+// --- UserImageWithTag ---
+export function UserImageWithTag({
+  imageUrl, displayName, tag, tagColor, size = 48,
+}: { imageUrl?: string; displayName?: string; tag: string; tagColor?: string; size?: number }) {
+  return (
+    <View>
+      <UserImage imageUrl={imageUrl} displayName={displayName} size={size} />
+      <View style={[styles.tagBadge, { backgroundColor: tagColor ?? Colors.purple1 }]}>
+        <Text style={styles.tagText}>{tag}</Text>
+      </View>
+    </View>
+  );
+}
+
+// --- WithProfileLink ---
+export function WithProfileLink({
+  userId, children,
+}: { userId: string; children: React.ReactNode }) {
+  const navigation = useNavigation();
+  return (
+    <Pressable onPress={() => (navigation as any).navigate('Profile', { userId })} accessibilityRole="link">
+      {children}
+    </Pressable>
+  );
+}
+
+// --- WithMessagingLink ---
+export function WithMessagingLink({
+  connectionId, children,
+}: { connectionId: string; children: React.ReactNode }) {
+  const navigation = useNavigation();
+  return (
+    <Pressable onPress={() => (navigation as any).navigate('Messaging', { connectionId })} accessibilityRole="link">
+      {children}
+    </Pressable>
+  );
+}
+
+// --- WithMessagingOrProfileLink ---
+export function WithMessagingOrProfileLink({
+  userId, connectionId, children,
+}: { userId: string; connectionId?: string; children: React.ReactNode }) {
+  const navigation = useNavigation();
+  const handlePress = () => {
+    if (connectionId) {
+      (navigation as any).navigate('Messaging', { connectionId });
+    } else {
+      (navigation as any).navigate('Profile', { userId });
+    }
+  };
+  return <Pressable onPress={handlePress} accessibilityRole="link">{children}</Pressable>;
+}
+
+const styles = StyleSheet.create({
+  emojiBadge: { position: 'absolute', backgroundColor: Colors.gray2, borderRadius: 10, padding: 2 },
+  emojiText: { fontSize: 12 },
+  tagBadge: { position: 'absolute', bottom: -4, right: -4, borderRadius: 8, paddingHorizontal: 6, paddingVertical: 2, borderWidth: 2, borderColor: Colors.gray9 },
+  tagText: { color: Colors.white, fontSize: 8, fontWeight: '700' },
+});

package/src/components/wallet/WalletComponents.tsx

@@ -0,0 +1,116 @@
+/**
+ * Wallet/Coupon components.
+ * Ported from squad-demo/src/components/wallet/*.
+ */
+import React, { memo } from 'react';
+import { View, Text, StyleSheet, Pressable, Share } from 'react-native';
+import { Colors } from '../../theme/ThemeContext';
+import Button from '../ux/buttons/Button';
+import { BodySmall, BodyRegular, TitleSmall, SubtitleSmall } from '../ux/text/Typography';
+
+// --- CouponCard ---
+export const CouponCard = memo(function CouponCard({
+  code, title, description, discount, brandName, isRedeemed, onRedeem, onShare, primaryColor = Colors.purple1,
+}: {
+  code: string; title: string; description?: string; discount?: string;
+  brandName?: string; isRedeemed: boolean; onRedeem?: () => void; onShare?: () => void; primaryColor?: string;
+}) {
+  return (
+    <View style={[styles.couponCard, isRedeemed && styles.couponRedeemed]}>
+      <View style={styles.couponLeft}>
+        {brandName && <BodySmall style={styles.brandName}>{brandName}</BodySmall>}
+        <TitleSmall style={styles.couponTitle}>{title}</TitleSmall>
+        {description && <BodySmall style={styles.couponDesc} numberOfLines={2}>{description}</BodySmall>}
+        {discount && <SubtitleSmall style={[styles.couponDiscount, { color: primaryColor }]}>{discount}</SubtitleSmall>}
+      </View>
+      <View style={styles.couponRight}>
+        {isRedeemed ? (
+          <View style={styles.redeemedBadge}><BodySmall style={styles.redeemedText}>Redeemed</BodySmall></View>
+        ) : (
+          <View style={styles.couponActions}>
+            <Button style={[styles.redeemBtn, { backgroundColor: primaryColor }]} onPress={onRedeem}>
+              <Text style={styles.redeemText}>Redeem</Text>
+            </Button>
+            {onShare && (
+              <Button style={styles.shareBtn} onPress={onShare}>
+                <Text style={styles.shareText}>Share</Text>
+              </Button>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+});
+
+// --- CouponShareCard ---
+export function CouponShareCard({ code, title, discount, onShare }: { code: string; title: string; discount?: string; onShare: () => void }) {
+  return (
+    <Pressable style={styles.shareCard} onPress={onShare}>
+      <TitleSmall style={styles.shareCardTitle}>{title}</TitleSmall>
+      {discount && <BodyRegular style={styles.shareCardDiscount}>{discount}</BodyRegular>}
+      <BodySmall style={styles.shareCardCode}>{code}</BodySmall>
+      <BodySmall style={styles.shareCardHint}>Tap to share</BodySmall>
+    </Pressable>
+  );
+}
+
+// --- WalletHeader ---
+export function WalletHeader({ balance, primaryColor = Colors.purple1 }: { balance: number; primaryColor?: string }) {
+  return (
+    <View style={[styles.walletHeader, { borderColor: primaryColor }]}>
+      <BodySmall style={styles.balanceLabel}>Your Balance</BodySmall>
+      <Text style={[styles.balanceAmount, { color: primaryColor }]}>{balance}</Text>
+      <BodySmall style={styles.balanceUnit}>points</BodySmall>
+    </View>
+  );
+}
+
+// --- RedeemBottomSheet ---
+export function RedeemBottomSheet({ coupon, onRedeem, onDismiss }: {
+  coupon: { code: string; title: string; description?: string }; onRedeem: () => void; onDismiss: () => void;
+}) {
+  return (
+    <View style={styles.redeemSheet}>
+      <TitleSmall style={styles.redeemTitle}>{coupon.title}</TitleSmall>
+      {coupon.description && <BodyRegular style={styles.redeemDesc}>{coupon.description}</BodyRegular>}
+      <BodySmall style={styles.redeemCode}>Code: {coupon.code}</BodySmall>
+      <Button style={styles.redeemConfirmBtn} onPress={onRedeem}>
+        <Text style={styles.redeemConfirmText}>Confirm Redemption</Text>
+      </Button>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  couponCard: { flexDirection: 'row', backgroundColor: Colors.gray2, borderRadius: 12, padding: 16, gap: 12 },
+  couponRedeemed: { opacity: 0.6 },
+  couponLeft: { flex: 1 },
+  couponRight: { justifyContent: 'center' },
+  brandName: { color: Colors.gray6, textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4 },
+  couponTitle: { color: Colors.white, marginBottom: 4 },
+  couponDesc: { color: Colors.gray6, marginBottom: 4 },
+  couponDiscount: { fontWeight: '600' },
+  couponActions: { gap: 4 },
+  redeemBtn: { paddingVertical: 8, paddingHorizontal: 16, borderRadius: 16 },
+  redeemText: { color: Colors.gray1, fontSize: 13, fontWeight: '600' },
+  shareBtn: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 12, borderWidth: 1, borderColor: Colors.gray5, alignItems: 'center' },
+  shareText: { color: Colors.white, fontSize: 12 },
+  redeemedBadge: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 12, backgroundColor: Colors.gray3 },
+  redeemedText: { color: Colors.gray6, fontSize: 12 },
+  shareCard: { backgroundColor: Colors.gray2, borderRadius: 12, padding: 16, alignItems: 'center' },
+  shareCardTitle: { color: Colors.white, marginBottom: 4 },
+  shareCardDiscount: { color: Colors.purple1, marginBottom: 8 },
+  shareCardCode: { color: Colors.gray6, letterSpacing: 2 },
+  shareCardHint: { color: Colors.gray6, marginTop: 4 },
+  walletHeader: { padding: 24, borderRadius: 16, borderWidth: 1.5, backgroundColor: Colors.gray2, alignItems: 'center' },
+  balanceLabel: { color: Colors.gray6, marginBottom: 4 },
+  balanceAmount: { fontSize: 48, fontWeight: '700', lineHeight: 56 },
+  balanceUnit: { color: Colors.gray6 },
+  redeemSheet: { padding: 24 },
+  redeemTitle: { color: Colors.white, marginBottom: 8 },
+  redeemDesc: { color: Colors.gray6, marginBottom: 12 },
+  redeemCode: { color: Colors.gray6, marginBottom: 20 },
+  redeemConfirmBtn: { paddingVertical: 14, borderRadius: 24, backgroundColor: Colors.purple1, alignItems: 'center' },
+  redeemConfirmText: { color: Colors.gray1, fontWeight: '600' },
+});

package/src/contexts/AuthContext.tsx

@@ -0,0 +1,45 @@
+/**
+ * AuthContext — provides auth state to the React tree.
+ * Ported from squad-demo/src/contexts/AuthContext.tsx.
+ */
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import type { User } from '@squad-sports/core';
+
+interface AuthContextValue {
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  user: User | null;
+  accessToken: string | null;
+}
+
+const AuthCtx = createContext<AuthContextValue>({
+  isAuthenticated: false,
+  isLoading: true,
+  user: null,
+  accessToken: null,
+});
+
+export function useAuth(): AuthContextValue {
+  return useContext(AuthCtx);
+}
+
+export function AuthContextProvider({
+  children,
+  user,
+  accessToken,
+  isLoading,
+}: {
+  children: React.ReactNode;
+  user: User | null;
+  accessToken: string | null;
+  isLoading: boolean;
+}) {
+  const value: AuthContextValue = {
+    isAuthenticated: !!accessToken && !!user,
+    isLoading,
+    user,
+    accessToken,
+  };
+
+  return <AuthCtx.Provider value={value}>{children}</AuthCtx.Provider>;
+}

package/src/contexts/EventProcessorContext.tsx

@@ -0,0 +1,41 @@
+/**
+ * EventProcessor context — provides EventProcessor instance to the React tree.
+ * Ported from squad-demo/src/contexts/EventProcessorContext.tsx + EventProcessorSetup.tsx.
+ */
+import React, { createContext, useContext, useEffect } from 'react';
+import { EventProcessor } from '../realtime/EventProcessor';
+import { useApiClient } from '../SquadProvider';
+
+const EventProcessorCtx = createContext<EventProcessor>(EventProcessor.shared);
+
+export function useEventProcessor(): EventProcessor {
+  return useContext(EventProcessorCtx);
+}
+
+/**
+ * Sets up EventProcessor with the current API client.
+ * Wire this into the provider chain to auto-connect SSE.
+ */
+export function EventProcessorSetup({ children }: { children: React.ReactNode }) {
+  const apiClient = useApiClient();
+
+  useEffect(() => {
+    const processor = EventProcessor.shared;
+    processor.setApiClient(apiClient);
+
+    if (apiClient.currentToken) {
+      processor.setShouldAllowEvents(true);
+      processor.connect();
+    }
+
+    return () => {
+      // Don't disconnect — EventProcessor is a singleton
+    };
+  }, [apiClient]);
+
+  return (
+    <EventProcessorCtx.Provider value={EventProcessor.shared}>
+      {children}
+    </EventProcessorCtx.Provider>
+  );
+}

package/src/contexts/PlayerQueueContext.tsx

@@ -0,0 +1,95 @@
+/**
+ * PlayerQueueContext — manages a queue of audio players so only one plays at a time.
+ * Ported from squad-demo/src/contexts/player-queue.tsx + player-index.tsx.
+ */
+import React, { createContext, useContext, useCallback, useRef, useState } from 'react';
+import { Audio } from 'expo-av';
+
+interface PlayerQueueItem {
+  id: string;
+  sound: Audio.Sound;
+}
+
+interface PlayerQueueContextValue {
+  /** Register a player and get its ID */
+  register: (id: string, sound: Audio.Sound) => void;
+  /** Unregister a player */
+  unregister: (id: string) => void;
+  /** Play a specific player (pauses all others) */
+  play: (id: string) => void;
+  /** Pause the currently playing player */
+  pause: () => void;
+  /** Stop all players */
+  stopAll: () => void;
+  /** Currently playing player ID */
+  activeId: string | null;
+}
+
+const PlayerQueueCtx = createContext<PlayerQueueContextValue>({
+  register: () => {},
+  unregister: () => {},
+  play: () => {},
+  pause: () => {},
+  stopAll: () => {},
+  activeId: null,
+});
+
+export function usePlayerQueue() {
+  return useContext(PlayerQueueCtx);
+}
+
+export function PlayerQueueProvider({ children }: { children: React.ReactNode }) {
+  const players = useRef(new Map<string, Audio.Sound>());
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  const register = useCallback((id: string, sound: Audio.Sound) => {
+    players.current.set(id, sound);
+  }, []);
+
+  const unregister = useCallback((id: string) => {
+    players.current.delete(id);
+    if (activeId === id) setActiveId(null);
+  }, [activeId]);
+
+  const play = useCallback(async (id: string) => {
+    // Pause all others
+    for (const [playerId, sound] of players.current) {
+      if (playerId !== id) {
+        try { await sound.pauseAsync(); } catch {}
+      }
+    }
+
+    // Play target
+    const sound = players.current.get(id);
+    if (sound) {
+      try {
+        await Audio.setAudioModeAsync({ playsInSilentModeIOS: true });
+        await sound.playAsync();
+        setActiveId(id);
+      } catch {}
+    }
+  }, []);
+
+  const pause = useCallback(async () => {
+    if (activeId) {
+      const sound = players.current.get(activeId);
+      if (sound) {
+        try { await sound.pauseAsync(); } catch {}
+      }
+      setActiveId(null);
+    }
+  }, [activeId]);
+
+  const stopAll = useCallback(async () => {
+    for (const sound of players.current.values()) {
+      try { await sound.stopAsync(); } catch {}
+    }
+    setActiveId(null);
+  }, []);
+
+  return (
+    <PlayerQueueCtx.Provider value={{ register, unregister, play, pause, stopAll, activeId }}>
+      {children}
+    </PlayerQueueCtx.Provider>
+  );
+}

package/src/hooks/useAuth.ts

@@ -0,0 +1,23 @@
+/**
+ * Auth hook — provides auth state from Recoil atoms.
+ * Ported from squad-demo/src/hooks/useAuth.ts.
+ */
+import { useRecoilValue } from 'recoil';
+import { reActiveAccessToken, reActiveUserId, reAuthHydrated } from '../state/session';
+import { reUserCache } from '../state/user';
+import type { User } from '@squad-sports/core';
+
+export function useAuth() {
+  const accessToken = useRecoilValue(reActiveAccessToken);
+  const userId = useRecoilValue(reActiveUserId);
+  const hydrated = useRecoilValue(reAuthHydrated);
+  const user = useRecoilValue(reUserCache);
+
+  return {
+    isAuthenticated: !!accessToken && !!userId,
+    isLoading: !hydrated,
+    accessToken,
+    userId,
+    user: user as User | null,
+  };
+}

package/src/hooks/useDataRefresh.ts

@@ -0,0 +1,30 @@
+/**
+ * Data refresh hook — marks data stale and triggers Recoil refresh.
+ * Ported from squad-demo/src/hooks/useDataRefresh.ts.
+ */
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { reLastRefreshed, reRefreshing } from '../state/sync/refresh';
+
+export function useDataRefresh() {
+  const setLastRefreshed = useSetRecoilState(reLastRefreshed);
+  const setRefreshing = useSetRecoilState(reRefreshing);
+
+  const refreshAllData = useCallback(() => {
+    setRefreshing(true);
+    setLastRefreshed(Date.now());
+    // The refresh propagates to all DependableAtoms that subscribe to reRefresh
+    setTimeout(() => setRefreshing(false), 500);
+  }, [setLastRefreshed, setRefreshing]);
+
+  const checkForStaleData = useCallback(async (): Promise<boolean> => {
+    // Check if any data is older than 5 minutes
+    return false; // Simplified — full implementation checks cache ages
+  }, []);
+
+  const clearStaleMarkers = useCallback(() => {
+    // Clear stale data flags
+  }, []);
+
+  return { refreshAllData, checkForStaleData, clearStaleMarkers };
+}

package/src/hooks/useEventProcessor.ts

@@ -0,0 +1,6 @@
+/**
+ * EventProcessor hook.
+ * Ported from squad-demo/src/hooks/useEventProcessor.ts.
+ */
+import { useEventProcessor } from '../contexts/EventProcessorContext';
+export { useEventProcessor };