react-native-unit-components 2.1.0 → 3.0.0

package/src/components/UNWhiteLabelAppComponent/UNWhiteLabelAppComponent.tsx

@@ -9,10 +9,9 @@ import {
   SlotRendering,
 } from '../../types/internal/bottomSheet.types';
 import type { BottomSheetSlotData } from '../../types/internal/bottomSheet.types';
-import { setEvent } from '../../slices/SharedEventsSlice';
+import { eventBus } from '../../utils/eventBus';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { useDispatch } from 'react-redux';
-import { useListenerToEvent } from '../../hooks/useListenerToEvent';
+import { useEventListener } from '../../hooks/useEventListener';
 import WebView from 'react-native-webview';
 import {
   getWhiteLabelAppParams,
@@ -40,8 +39,6 @@ export interface UNWhiteLabelAppComponentProps {
 const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
   const webRef = useRef<WebView>(null);
 
-  const dispatch = useDispatch();
-
   const handleWebViewMessage = (message: WebViewMessage) => {
     switch (message.type) {
       case UnitComponentsMessage.UNIT_REQUEST_RENDERING: {
@@ -56,7 +53,7 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
           data: slotData,
         } as SlotRendering;
 
-        dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+        eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
         break;
       }
       case UnitComponentsMessage.UNIT_WHITE_LABEL_APP_ON_LOAD: {
@@ -97,8 +94,8 @@ const UNWhiteLabelAppComponent = (props: UNWhiteLabelAppComponentProps) => {
     webRef.current?.injectJavaScript(`dispatchActivityFilterChangedEvent('${query}')`);
   };
 
-  useListenerToEvent({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
-  useListenerToEvent({
+  useEventListener({ busEventKey: UnitComponentsMessage.UNIT_REQUEST_REFRESH, action: requestRefresh });
+  useEventListener({
     busEventKey: ActivityMessage.UNIT_ACTIVITY_FILTERS_CHANGED,
     action: dispatchActivityFiltersChanged,
   });

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.tsx

@@ -16,7 +16,6 @@ import { WirePaymentCreatedEvent } from '../../messages/webMessages/wirePaymentM
 export interface UNWirePaymentComponentProps {
   // inputs
   accountId?: string;
-  fee?: number;
 
   // ui
   theme?: string;

package/src/components/UNWirePaymentComponent/UNWirePaymentComponent.utils.ts

@@ -3,10 +3,8 @@ import { UNWirePaymentComponentProps } from './UNWirePaymentComponent';
 
 export const getWirePaymentParams = (props: UNWirePaymentComponentProps) => {
   const accountIdParam = props.accountId ? `account-id="${props.accountId}"` : '';
-  const feeParam = props.fee ? `fee="${props.fee}"` : '';
   return `
     ${accountIdParam}
-    ${feeParam}
     is-auto-focus="${props.isAutoFocus || false}"
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './UNBookPaymentComponent';
 export * from './UNActivityComponent';
 export * from './UNAccountComponent';
 export * from './UNCheckDepositComponent';
+export * from './UNCheckPaymentComponent';
 export * from './UNACHDebitComponent';
 export * from './UNACHCreditComponent';
 export * from './UNProgramDetailsComponent';

package/src/flows/card/UNCardFlows.ts

@@ -3,8 +3,7 @@ import {
   BottomSheetRenderingType, NativeComponentRendering,
 } from '../../types/internal/bottomSheet.types';
 import { BottomSheetNativeMessage } from '../../messages/nativeMessages/bottomSheetMessage';
-import { setEvent } from '../../slices/SharedEventsSlice';
-import { store } from '../../store/store';
+import { eventBus } from '../../utils/eventBus';
 import {
   UNAddToWalletComponentProps,
 } from '../../nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent';
@@ -22,7 +21,7 @@ export class UNCardFlows {
           },
         },
       };
-      store.dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+      eventBus.emit(BottomSheetNativeMessage.REQUEST_RENDERING, data);
     } catch (error) {
       console.error(error);
     }

package/src/helpers/BottomSheet/BottomSheet.tsx

@@ -11,11 +11,7 @@ import {
   View,
 } from 'react-native';
 import { CloseIcon } from '../../assets/images';
-import {
-  androidStatusBarHeight,
-  fullScreenHeight, isAndroid10AndAbove,
-  statusBarHeight,
-} from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { useSafeAreaDimensions } from '../../hooks/useSafeAreaDimensions';
 import { getStylesObject } from './BottomSheet.styles';
 import { useIsBackFromLongBackground } from '../../hooks/useAppStateListener';
 import { BottomSheetNativePlaceType } from '../../types/internal/bottomSheet.types';
@@ -43,6 +39,9 @@ const BottomSheet = (props: BottomSheetProps) => {
   const styles = getStylesObject(fadeAnim);
   const [isPanelOpened, setIsPanelOpened] = useState(props.isOpen);
   const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+  const { insets, fullScreenHeight, isAndroid10AndAbove, isEdgeToEdgeActive } = useSafeAreaDimensions();
+  // Android 15+ (API 35) enforces edge-to-edge, so marginTop calculation differs
+  const isAndroid15AndAbove = Platform.OS === 'android' && Platform.Version >= 35;
 
   const [currentHeight, setCurrentHeight] = useState<number>(props.sliderMaxHeight);
 
@@ -204,11 +203,13 @@ const BottomSheet = (props: BottomSheetProps) => {
           borderTopLeftRadius: isModal ? 0 : styles.container.borderTopLeftRadius,
           borderTopRightRadius: isModal ? 0 : styles.container.borderTopRightRadius,
           height: props.sliderMaxHeight,
-          marginTop: fullScreenHeight - props.sliderMaxHeight - ((!isModal && isAndroid10AndAbove) ? androidStatusBarHeight : 0),
+          // Android 15+ (edge-to-edge): fullScreenHeight is already the full screen, no adjustment needed
+          // Android 10-14: fullScreenHeight includes status bar, but view starts below it, so subtract insets.top
+          marginTop: isModal ? 0 : fullScreenHeight - props.sliderMaxHeight - (isAndroid10AndAbove && !isAndroid15AndAbove ? insets.top : 0),
           transform: [
             { translateY: panelHeightValue },
           ],
-          paddingTop: Platform.OS === 'ios' && isModal ? statusBarHeight : 0,
+          paddingTop: isModal && (Platform.OS === 'ios' || isEdgeToEdgeActive) ? insets.top : 0,
         }}
       >
         <View

package/src/helpers/UNKeyboardAvoidingView/UNKeyboardAvoidingView.tsx

@@ -1,6 +1,6 @@
-import { KeyboardAvoidingView, Platform, ViewStyle } from 'react-native';
+import { KeyboardAvoidingView, Platform, StatusBar, ViewStyle } from 'react-native';
 import React from 'react';
-import { statusBarHeight } from '../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 interface UNKeyboardAvoidingViewProps {
   children: React.ReactNode,
@@ -8,12 +8,15 @@ interface UNKeyboardAvoidingViewProps {
   keyboardVerticalOffset?: number,
 }
 
+const topInset = initialWindowMetrics?.insets.top ?? 0;
+const defaultOffset = topInset > 0 ? topInset : (StatusBar.currentHeight || 0);
+
 const UNKeyboardAvoidingView = ({ children, style, keyboardVerticalOffset }: UNKeyboardAvoidingViewProps) => {
   return (
     <KeyboardAvoidingView
       style={style ?? { height: '100%' }}
       behavior="padding"
-      keyboardVerticalOffset={keyboardVerticalOffset ?? statusBarHeight}
+      keyboardVerticalOffset={keyboardVerticalOffset ?? defaultOffset}
       enabled={Platform.OS === 'android'}
     >
       {children}
@@ -21,4 +24,4 @@ const UNKeyboardAvoidingView = ({ children, style, keyboardVerticalOffset }: UNK
   );
 };
 
-export default UNKeyboardAvoidingView;
+export default UNKeyboardAvoidingView;

package/src/helpers/pushProvisioningService/hooks/useCardWallet.ts

@@ -24,7 +24,6 @@ export const useCardWallet = (cardId: string) => {
   const isRecoveringSignedNonceRef = useRef<boolean>(false);
   const customerToken = useSelector((state: RootState) => state.configuration.customerToken);
 
-
   const shouldRecoverVPSDKForError = (errorType: UNVPErrorType) => {
     const recoveringTypes = [UNVPErrorType.PayloadDecryptionFailed, UNVPErrorType.SessionExpired, UNVPErrorType.InvalidNonce];
     return recoveringTypes.includes(errorType);

package/src/hooks/useEventListener.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+import { eventBus, type EventMap } from '../utils/eventBus';
+
+type EventListener<K extends keyof EventMap> = {
+  busEventKey: K;
+  action: (data: EventMap[K]) => void;
+};
+
+/**
+ * Hook to listen to events from the EventBus
+ * Automatically subscribes on mount and unsubscribes on unmount
+ */
+export const useEventListener = <K extends keyof EventMap>(listener: EventListener<K>) => {
+  const actionRef = useRef(listener.action);
+
+  // Keep action ref up to date
+  useEffect(() => {
+    actionRef.current = listener.action;
+  }, [listener.action]);
+
+  useEffect(() => {
+    // Subscribe to the event
+    const unsubscribe = eventBus.on(listener.busEventKey, (data) => {
+      actionRef.current(data);
+    });
+
+    // Cleanup: unsubscribe when component unmounts
+    return unsubscribe;
+  }, [listener.busEventKey]);
+};

package/src/hooks/useSafeAreaDimensions.ts

@@ -0,0 +1,48 @@
+import { Dimensions, Platform } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+const isAndroid = Platform.OS === 'android';
+const isAndroid10To14 = isAndroid && Platform.Version >= 29 && Platform.Version < 35;
+const isAndroid15AndAbove = isAndroid && Platform.Version >= 35;
+
+const insets = initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
+const windowHeight = Dimensions.get('window').height;
+const screenHeight = Dimensions.get('screen').height;
+
+// Detect edge-to-edge by comparing window to screen height
+// Edge-to-edge ON: windowHeight ≈ screenHeight | OFF: windowHeight < screenHeight
+const heightDifference = Math.abs(screenHeight - windowHeight);
+const isEdgeToEdgeActive = isAndroid15AndAbove && heightDifference < 10;
+
+const effectiveBottomInset = isEdgeToEdgeActive ? insets.bottom : 0;
+
+const calculateFullScreenHeight = (): number => {
+  if (isAndroid15AndAbove) {
+    return isEdgeToEdgeActive ? screenHeight : windowHeight;
+  } else if (isAndroid10To14) {
+    return windowHeight + insets.top;
+  }
+  return windowHeight;
+};
+
+const fullScreenHeight = calculateFullScreenHeight();
+
+const calculateContentHeight = (): number => {
+  if (isAndroid15AndAbove && !isEdgeToEdgeActive) {
+    return windowHeight;
+  }
+  return fullScreenHeight - insets.top;
+};
+
+const contentHeight = calculateContentHeight();
+
+export const useSafeAreaDimensions = () => {
+  return {
+    insets,
+    fullScreenHeight,
+    contentHeight,
+    isAndroid10AndAbove: isAndroid && Platform.Version >= 29,
+    isEdgeToEdgeActive,
+    effectiveBottomInset,
+  };
+};

package/src/messages/webMessages/checkPaymentMessage.ts

@@ -0,0 +1,8 @@
+import { UNPayment } from '../../types/shared';
+
+export interface PaymentCreatedEvent {
+  data: UNPayment
+}
+
+export type CheckPaymentEvent =
+  | PaymentCreatedEvent

package/src/messages/webMessages/index.ts

@@ -6,6 +6,7 @@ import type { PaymentMessage } from './paymentsMessage';
 import type { UnitEvent, UnitComponentsMessage, MultiFactorAuthenticationFinishedEvent } from './unitComponentsMessages';
 import type { AccountEvent, AccountMessage } from './accountMessage';
 import type { CheckEvent, CheckMessage } from './checkMessage';
+import type { CheckPaymentEvent } from './checkPaymentMessage';
 import type { ActivityEvent, ActivityMessage } from './activityMessage';
 import type { MultipleCardsEvent, MultipleCardsMessage } from './multipleCardsMessage';
 import { PlaidEvent, PlaidMessage } from './plaidMessages';
@@ -36,6 +37,7 @@ type WebViewEvent =
   | ACHEvent
   | AccountEvent
   | CheckEvent
+  | CheckPaymentEvent
   | ActivityEvent
   | PlaidEvent
   | PayeeManagementEvent

package/src/messages/webMessages/onLoadMessage.ts

@@ -45,7 +45,7 @@ export type ACHOnLoadResponse = {
 
 export type ActivityOnLoadResponse = {
   [RESPONSE_KEYS.authorizations]: UNComponentsOnLoadResponseData<[UNAuthorization]>,
-  [RESPONSE_KEYS.transactions]: UNComponentsOnLoadResponseData<[UNTransaction]>
+  [RESPONSE_KEYS.transactions]?: UNComponentsOnLoadResponseData<[UNTransaction]>
 }
 
 export type PayeeManagementOnLoadResponse = {

package/src/messages/webMessages/unitComponentsMessages.ts

@@ -30,6 +30,7 @@ export interface RequestRenderingEventData {
   nativeComponentName?: WebComponentType,
   nativePlace: BottomSheetNativePlaceType,
   nativeComponent: string,
+  isPaddingIncluded: boolean
 }
 
 export interface RequestRefreshEvent {

package/src/nativeComponents/UNAddToWallet/UNAddToWalletComponent/UNAddToWalletComponent.tsx

@@ -6,7 +6,6 @@ import { PresentationMode, WebComponentType } from '../../../types/internal/webC
 import { UNCardAddToWalletStatus } from '../../../types/shared/wallet.types';
 import UnitAddToWalletButtonView from '../UnitAddToWalletButtonNativeComponent';
 import WebView from 'react-native-webview';
-import { useDispatch } from 'react-redux';
 import {
   getStylesObject,
 } from './UNAddToWalletBottomSheetItem.styles';
@@ -15,7 +14,7 @@ import { getAddToWalletParams, getAddToWalletWindowParams } from './UNAddToWalle
 import { WebViewMessage } from '../../../messages/webMessages';
 import { UnitComponentsMessage } from '../../../messages/webMessages/unitComponentsMessages';
 import { injectHtmlFullScreenHeight } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.utils';
-import { setEvent } from '../../../slices/SharedEventsSlice';
+import { eventBus } from '../../../utils/eventBus';
 import {
   overFullScreenHeight,
 } from '../../../components/UNBottomSheetComponent/UNBottomSheetComponent.constants';
@@ -33,7 +32,6 @@ export interface UNAddToWalletComponentProps {
 }
 
 const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
-  const dispatch = useDispatch();
   const webRef = useRef<WebView>(null);
   const { currentUNWallet } = useCardWallet(props.cardId);
   const styles = getStylesObject();
@@ -55,10 +53,10 @@ const UNAddToWalletComponent = (props: UNAddToWalletComponentProps) => {
         injectHtmlFullScreenHeight(webRef.current, overFullScreenHeight);
         break;
       case UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW:
-        dispatch(setEvent({
-          key: UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
-          data: {},
-        }));
+        eventBus.emit(
+          UnitComponentsMessage.UNIT_REQUEST_CLOSE_FLOW,
+          {}
+        );
         break;
       default:
         break;

package/src/scripts/html/bodyScript.ts

@@ -375,3 +375,10 @@ export const DISPATCH_REQUEST_ACCOUNT_ACTION = `
       document.querySelector("unit-elements-account").dispatchEvent(new CustomEvent("unitRequestAccountAction", {detail: {action: action}}))
     }
 `;
+
+export const DISPATCH_COUNTERPARTY_DELETED = `
+  const dispatchCounterpartyDeletedEvent = (details) => {
+    const event = new CustomEvent("unitCounterpartyDeleted",{ detail: { data: details } });
+    window.dispatchEvent(event);
+  }
+`;

package/src/store/store.ts

@@ -1,14 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit';
 import wallet from '../slices/pushProvisioningSlice';
 import configuration from '../slices/ConfigurationSlice';
-import sharedEvents from '../slices/SharedEventsSlice';
 import bottomSheet from '../slices/BottomSheetSlice';
 
 export const store = configureStore({
   reducer: {
     wallet,
     configuration,
-    sharedEvents,
     bottomSheet,
   },
 });

package/src/types/internal/bottomSheet.types.ts

@@ -9,6 +9,7 @@ import { UNCheckDepositComponentProps } from '../../components/UNCheckDepositCom
 import { UNBookPaymentComponentProps } from '../../components/UNBookPaymentComponent';
 import { UNWirePaymentComponentProps } from '../../components/UNWirePaymentComponent';
 import { UNCreateCardComponentProps } from '../../components/UNCreateCardComponent';
+import { UNCheckPaymentComponentProps } from '../../components/UNCheckPaymentComponent';
 
 export enum BottomSheetNativePlaceType {
   overFullScreen = 'overFullScreen',
@@ -50,6 +51,7 @@ export enum BottomSheetNativeComponentType {
   ACHCreditComponent = 'UNACHCreditComponent',
   ACHDebitComponent = 'UNACHDebitComponent',
   CheckDepositComponent = 'UNCheckDepositComponent',
+  CheckPaymentComponent = 'UNCheckPaymentComponent',
   BookPaymentComponent = 'UNBookPaymentComponent',
   WirePaymentComponent = 'UNWirePaymentComponent',
   CreateCardComponent = 'UNCreateCardComponent'
@@ -75,6 +77,11 @@ export type BottomSheetNativeCheckDepositComponentType = {
   props: UNCheckDepositComponentProps
 }
 
+export type BottomSheetNativeCheckPaymentComponentType = {
+  type: BottomSheetNativeComponentType.CheckPaymentComponent,
+  props: UNCheckPaymentComponentProps
+}
+
 export type BottomSheetNativeBookPaymentComponentType = {
   type: BottomSheetNativeComponentType.BookPaymentComponent,
   props: UNBookPaymentComponentProps
@@ -94,6 +101,7 @@ export type BottomSheetNativeComponent = BottomSheetNativeAddToWalletComponentTy
   | BottomSheetNativeACHCreditComponentType
   | BottomSheetNativeACHDebitComponentType
   | BottomSheetNativeCheckDepositComponentType
+  | BottomSheetNativeCheckPaymentComponentType
   | BottomSheetNativeBookPaymentComponentType
   | BottomSheetNativeWirePaymentComponentType
   | BottomSheetNativeCreateCardComponentType

package/src/types/internal/webComponent.types.ts

@@ -16,7 +16,8 @@ export enum WebComponentType {
   whiteLabelApp = 'unit-elements-white-label-app',
   multiFactorAuthentication = 'unit-elements-multi-factor-authentication',
   createCard = 'unit-elements-create-card',
-  cardMenu = 'unit-elements-card-menu'
+  cardMenu = 'unit-elements-card-menu',
+  checkPayment = 'unit-elements-check-payment'
 }
 
 export enum PresentationMode {

package/src/types/shared/activity.types.ts

@@ -9,7 +9,7 @@ export enum UNActivityComponentPaginationType {
 
 export type UNActivityOnLoadData = {
   [RESPONSE_KEYS.authorizations]: [UNAuthorization],
-  [RESPONSE_KEYS.transactions]: [UNTransaction],
+  [RESPONSE_KEYS.transactions]?: [UNTransaction],
 }
 
 export enum UNActivityType {

package/src/types/shared/payment/checkPayment.types.ts

@@ -0,0 +1,39 @@
+import { UNPaymentType } from './payments.types';
+
+export interface UNCheckPayment {
+  type: UNPaymentType.CheckPayment
+  id: string
+  attributes: {
+    counterparty: UNCheckPaymentCounterparty
+    amount: number
+    idempotencyKey: string
+    description: string
+    memo: string
+  }
+  relationships: {
+    account: {
+      data: {
+        type: string
+        id: string
+      }
+    }
+    customer: {
+      data: {
+        type: string
+        id: string
+      }
+    }
+  }
+}
+
+export interface UNCheckPaymentCounterparty {
+  name: string
+  address: {
+    street: string
+    street2?: string
+    city: string
+    state: string
+    postalCode: string
+    country: string
+  }
+}

package/src/types/shared/payment/index.ts

@@ -1,5 +1,6 @@
 export * from './achPayment.types';
 export * from './billPayment.types';
 export * from './bookPayment.types';
+export * from './checkPayment.types';
 export * from './wirePayment.types';
 export * from './payments.types';

package/src/types/shared/payment/payments.types.ts

@@ -3,14 +3,16 @@ import { UNACHPayment } from './achPayment.types';
 import { UNBillPayment } from './billPayment.types';
 import { UNBookPayment } from './bookPayment.types';
 import { UNWirePayment } from './wirePayment.types';
+import { UNCheckPayment } from './checkPayment.types';
 
-export type UNPayment = UNACHPayment | UNBookPayment | UNWirePayment | UNBillPayment
+export type UNPayment = UNACHPayment | UNBookPayment | UNWirePayment | UNBillPayment | UNCheckPayment
 
 export enum UNPaymentType {
   AchPayment = 'achPayment',
   BookPayment = 'bookPayment',
   WirePayment = 'wirePayment',
   BillPayment = 'billPayment',
+  CheckPayment = 'checkPayment',
   CardToCardPayment = 'cardToCardPayment',
 }
 

package/src/types/shared/transaction/UNNegativeBalanceCoverageTransaction.ts

@@ -1,4 +1,4 @@
- import { UNCents } from '../payment/payments.types';
+import { UNCents } from '../payment/payments.types';
 import { UNTransactionTypes } from './transactions.types';
 import { UNDirection } from '../types';
 

package/src/unitComponentsSdkManager/UnitComponentsSdk.constants.ts

@@ -3,8 +3,8 @@ import { UNComponentsSecuritySettings, UNComponentsSnapshotProtectionStrategy }
 
 const WEB_SDK_RECOMMENDED_STRATEGY: UNComponentsWebVersioningStrategy = {
   type: UNVersioningStrategyType.upToNextMinor,
-  major: 2,
-  minor: 4,
+  major: 3,
+  minor: 3,
 };
 
 const DEFAULT_SECURITY_SETTINGS: UNComponentsSecuritySettings = {

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -25,7 +25,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '2.1.0';
+  protected static sdkVersion = '3.0.0';
 
   public static init = async (
     env: UNComponentsEnvironment,

package/src/utils/eventBus/EventBus.ts

@@ -0,0 +1,106 @@
+import type { EventMap, SharedEvent } from './EventBus.types';
+
+// Type-safe callback that receives the correct data type for the event key
+export type EventCallback<K extends keyof EventMap> = (data: EventMap[K]) => void;
+
+class EventBus {
+  private debug = false;
+  private listeners = new Map<SharedEvent['key'], Set<(data: unknown) => void>>();
+  private eventQueue: SharedEvent[] = [];
+  private isProcessing = false;
+
+  /**
+   * Subscribe to an event
+   * @returns Unsubscribe function
+   */
+  on<K extends keyof EventMap>(eventKey: K, callback: EventCallback<K>): () => void {
+    if (!this.listeners.has(eventKey)) {
+      this.listeners.set(eventKey, new Set());
+    }
+    
+    this.listeners.get(eventKey)!.add(callback as (data: unknown) => void);
+    
+    if (this.debug) {
+      console.log(`[EventBus] Subscribed to: ${eventKey} (${this.listenerCount(eventKey)} listeners)`);
+    }
+
+    // Return unsubscribe function
+    return () => {
+      const callbacks = this.listeners.get(eventKey);
+      if (callbacks) {
+        callbacks.delete(callback as (data: unknown) => void);
+        if (callbacks.size === 0) {
+          this.listeners.delete(eventKey);
+        }
+      }
+    };
+  }
+
+  /**
+   * Emit an event - queues it for processing to ensure all events are delivered
+   */
+  emit<K extends keyof EventMap>(eventKey: K, data: EventMap[K]): void {
+    const event = { key: eventKey, data } as SharedEvent;
+    
+    if (this.debug) {
+      console.log(`[EventBus] Emitting: ${eventKey} (${this.listenerCount(eventKey)} listeners)`);
+    }
+    this.eventQueue.push(event);
+    this.processQueue();
+  }
+
+  /**
+   * Process events from queue sequentially
+   * This ensures rapid successive events are all delivered
+   */
+  private processQueue(): void {
+    if (this.isProcessing || this.eventQueue.length === 0) {
+      return;
+    }
+
+    this.isProcessing = true;
+
+    // Process all queued events synchronously to ensure immediate delivery
+    while (this.eventQueue.length > 0) {
+      const event = this.eventQueue.shift()!;
+      const callbacks = this.listeners.get(event.key);
+
+      if (callbacks && callbacks.size > 0) {
+        // Process all listeners for this event
+        callbacks.forEach(callback => {
+          try {
+            callback(event.data);
+          } catch (error) {
+            console.error(`Error in event listener for ${event.key}:`, error);
+          }
+        });
+      }
+    }
+
+    this.isProcessing = false;
+  }
+
+  /**
+   * Remove all listeners for an event
+   */
+  off<K extends keyof EventMap>(eventKey: K): void {
+    this.listeners.delete(eventKey);
+  }
+
+  /**
+   * Get number of listeners for an event (useful for debugging)
+   */
+  listenerCount<K extends keyof EventMap>(eventKey: K): number {
+    return this.listeners.get(eventKey)?.size ?? 0;
+  }
+
+  /**
+   * Enable or disable debug logging
+   */
+  setDebug(enabled: boolean): void {
+    this.debug = enabled;
+  }
+}
+
+// Singleton instance
+export const eventBus = new EventBus();