@apps-in-toss/framework 0.0.0-dev.1761276327591 → 0.0.0-dev.1762248930136

package/dist/index.js

@@ -163,10 +163,8 @@ function AppUpdate() {
   return /* @__PURE__ */ jsx(Fragment, {});
 }
 
-// src/core/hooks/useAppsInTossBridge.ts
-import { appsInTossEvent } from "@apps-in-toss/native-modules";
-import { useBridge } from "@toss/tds-react-native";
-import { useEffect as useEffect4 } from "react";
+// src/core/context/NavigationBarContext.tsx
+import { createContext, useContext, useState } from "react";
 
 // src/core/utils/getAppsInTossGlobals.ts
 function getAppsInTossGlobals() {
@@ -176,6 +174,54 @@ function getAppsInTossGlobals() {
   return global.__appsInToss;
 }
 
+// src/core/utils/safeParseNavigationBar.ts
+function safeParseNavigationBar(navigationBar) {
+  if (typeof navigationBar === "object") {
+    return navigationBar;
+  }
+  try {
+    return JSON.parse(navigationBar);
+  } catch {
+    return null;
+  }
+}
+
+// src/core/context/NavigationBarContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NavigationBarContext = createContext(null);
+function NavigationBarContextProvider({ children }) {
+  const globals = getAppsInTossGlobals();
+  const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
+  const [navigationRightButton, setNavigationRightButton] = useState(
+    parsedNavigationBar?.initialAccessoryButton
+  );
+  const addNavigationRightButton = (button) => {
+    setNavigationRightButton(button);
+  };
+  const removeNavigationRightButton = () => {
+    setNavigationRightButton(void 0);
+  };
+  return /* @__PURE__ */ jsx2(
+    NavigationBarContext.Provider,
+    {
+      value: { navigationRightButton, addNavigationRightButton, removeNavigationRightButton },
+      children
+    }
+  );
+}
+function useNavigationBarContext() {
+  const context = useContext(NavigationBarContext);
+  if (context == null) {
+    throw Error("useNavigationBarContext must be used within NavigationBarContextProvider");
+  }
+  return context;
+}
+
+// src/core/hooks/useAppsInTossBridge.ts
+import { appsInTossEvent } from "@apps-in-toss/native-modules";
+import { useBridge } from "@toss/tds-react-native";
+import { useEffect as useEffect4 } from "react";
+
 // src/core/utils/toIcon.ts
 function toIcon(source) {
   return source.startsWith("http") ? { source: { uri: source } } : { name: source };
@@ -201,7 +247,7 @@ function useAppsInTossBridge() {
 
 // src/components/RNAppContainer.tsx
 import { appsInTossEvent as appsInTossEvent2, setIosSwipeGestureEnabled } from "@apps-in-toss/native-modules";
-import { useEffect as useEffect9, useState as useState4 } from "react";
+import { useEffect as useEffect9, useState as useState5 } from "react";
 import { Platform as Platform3 } from "react-native";
 
 // src/components/GameInitializer.tsx
@@ -317,7 +363,7 @@ function useAppUpdateDialogLogging() {
 
 // src/hooks/useGameCenterProfile.ts
 import { getGameCenterGameProfile } from "@apps-in-toss/native-modules";
-import { useCallback as useCallback6, useState as useState2 } from "react";
+import { useCallback as useCallback6, useState as useState3 } from "react";
 
 // src/hooks/useErrorAlert.ts
 import { closeView } from "@granite-js/react-native";
@@ -344,7 +390,7 @@ var useErrorAlert = () => {
 };
 
 // src/hooks/useTransparentWebview.tsx
-import { useCallback as useCallback4, useState } from "react";
+import { useCallback as useCallback4, useState as useState2 } from "react";
 
 // src/utils/openTransparentWebView.ts
 import { openURL as openURL3 } from "@granite-js/react-native";
@@ -386,7 +432,7 @@ var openTransparentWebView = ({
 
 // src/hooks/useTransparentWebview.tsx
 var useTransparentWebview = () => {
-  const [isWebviewLoading, setIsWebviewLoading] = useState(false);
+  const [isWebviewLoading, setIsWebviewLoading] = useState2(false);
   const { open: openErrorAlert } = useErrorAlert();
   const _openTransparentWebview = useCallback4(
     ({ webUrl, onClose, onError }) => {
@@ -423,14 +469,14 @@ var useTransparentWebview = () => {
 import { Asset, Toast } from "@toss/tds-react-native";
 import { AdaptiveColorProvider, ColorPreferenceProvider, useOverlay } from "@toss/tds-react-native/private";
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var useGameProfileToast = () => {
   const overlay = useOverlay();
   const openGameProfileToast = useCallback5(
     (nickname, profileImageUri) => {
       return new Promise((resolve) => {
         overlay.open(({ isOpen, close, exit }) => {
-          return /* @__PURE__ */ jsx2(ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ jsx2(AdaptiveColorProvider, { children: /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx3(ColorPreferenceProvider, { colorPreference: "dark", children: /* @__PURE__ */ jsx3(AdaptiveColorProvider, { children: /* @__PURE__ */ jsx3(
             Toast,
             {
               open: isOpen,
@@ -441,7 +487,7 @@ var useGameProfileToast = () => {
               onExited: exit,
               position: "top",
               text: `${nickname}\uB2D8 \uBC18\uAC00\uC6CC\uC694!`,
-              icon: /* @__PURE__ */ jsx2(
+              icon: /* @__PURE__ */ jsx3(
                 Asset.Image,
                 {
                   style: { borderRadius: 64, overflow: "hidden" },
@@ -461,9 +507,9 @@ var useGameProfileToast = () => {
 
 // src/hooks/useGameCenterProfile.ts
 var useGameCenterProfile = (isReadyForProfileUI) => {
-  const [profileData, setProfileData] = useState2(void 0);
-  const [isProfileDataLoading, setIsProfileDataLoading] = useState2(true);
-  const [isProfileDataRefetching, setIsProfileDataRefetching] = useState2(false);
+  const [profileData, setProfileData] = useState3(void 0);
+  const [isProfileDataLoading, setIsProfileDataLoading] = useState3(true);
+  const [isProfileDataRefetching, setIsProfileDataRefetching] = useState3(false);
   const shouldShowProfileLoadingOverlay = isProfileDataLoading && isReadyForProfileUI || isProfileDataRefetching;
   const shouldShowProfileNotFoundOverlay = profileData?.statusCode === "PROFILE_NOT_FOUND" && isReadyForProfileUI && !isProfileDataRefetching;
   const canShowBottomSheetOrToast = !isProfileDataLoading && isReadyForProfileUI;
@@ -527,7 +573,7 @@ var Z_INDEX = {
 };
 
 // src/components/GameInitializer.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var GameInitializer = ({ children, isReadyForProfileUI }) => {
   const {
     profileData,
@@ -581,8 +627,8 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
   ]);
   if (!isMinVersionSupported(GAME_MIN_VERSION)) {
     return /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ jsx4(
         Pressable,
         {
           style: {
@@ -603,8 +649,8 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
   }
   if (shouldShowProfileLoadingOverlay) {
     return /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(View, { style: { flex: 1, position: "relative" }, children }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(View, { style: { flex: 1, position: "relative" }, children }),
+      /* @__PURE__ */ jsx4(
         View,
         {
           style: {
@@ -613,15 +659,15 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
             alignItems: "center",
             backgroundColor: "rgba(0, 0, 0, 0.2)"
           },
-          children: /* @__PURE__ */ jsx3(Loader, { size: "large", type: "light" })
+          children: /* @__PURE__ */ jsx4(Loader, { size: "large", type: "light" })
         }
       )
     ] });
   }
   if (shouldShowProfileNotFoundOverlay) {
     return /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(View, { style: { flex: 1, position: "relative" }, children }),
-      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(View, { style: { flex: 1, position: "relative" }, children }),
+      shouldShowProfileNotFoundOverlay && /* @__PURE__ */ jsx4(
         Pressable,
         {
           style: {
@@ -634,7 +680,7 @@ var GameInitializer = ({ children, isReadyForProfileUI }) => {
       )
     ] });
   }
-  return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3(View, { style: { flex: 1, position: "relative" }, children }) });
+  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(View, { style: { flex: 1, position: "relative" }, children }) });
 };
 var overlayStyle = {
   position: "absolute",
@@ -813,7 +859,7 @@ import { INTERNAL__appBridgeHandler, isMinVersionSupported as isMinVersionSuppor
 import { openURL as openURL4 } from "@granite-js/react-native";
 import { BottomSheet, List, ListHeader, ListRow as ListRow2 } from "@toss/tds-react-native";
 import { useAdaptive as useAdaptive2, useOverlay as useOverlay2 } from "@toss/tds-react-native/private";
-import { useEffect as useEffect7, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState4 } from "react";
 
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
 import { getOperationalEnvironment } from "@apps-in-toss/native-modules";
@@ -901,7 +947,7 @@ function addParamsToUrl(url, params) {
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/AppShareListMenu.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var SHARE_SCHEME_REFERRER = "appsintoss.common_module_share";
 var APP_SHARE_MENU_INFO = {
   contactItemName: "\uACF5\uC720\uD558\uAE30",
@@ -917,10 +963,10 @@ function AppShareListMenu() {
   const schemeForShare = addParamsToUrl(initialScheme, {
     referrer: SHARE_SCHEME_REFERRER
   });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     ListRow,
     {
-      left: /* @__PURE__ */ jsx4(
+      left: /* @__PURE__ */ jsx5(
         ListRow.Icon,
         {
           color: globals.brandPrimaryColor,
@@ -928,7 +974,7 @@ function AppShareListMenu() {
           type: "background"
         }
       ),
-      contents: /* @__PURE__ */ jsx4(
+      contents: /* @__PURE__ */ jsx5(
         ListRow.Texts,
         {
           type: "1RowTypeA",
@@ -967,7 +1013,7 @@ function ensureValue(value, name) {
 }
 
 // src/core/hooks/useMoreButtonBottomSheet/index.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var APP_BRIDGE_METHOD_NAME = "getMiniAppsSupportContact";
 var MIN_VERSION = {
   BOTTOM_SHEET: {
@@ -982,7 +1028,7 @@ var MIN_VERSION = {
 function useMoreButtonBottomSheet() {
   const globals = getAppsInTossGlobals();
   const adaptive = useAdaptive2();
-  const [itemList, setItemList] = useState3([]);
+  const [itemList, setItemList] = useState4([]);
   const appUpdateDialog = useAppUpdateDialog();
   const logging = useMoreButtonBottomSheetLogging();
   const overlay = useOverlay2();
@@ -1016,17 +1062,17 @@ function useMoreButtonBottomSheet() {
         logging.close();
         close();
       };
-      return /* @__PURE__ */ jsx5(BottomSheetImpressionArea, { children: /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx6(BottomSheetImpressionArea, { children: /* @__PURE__ */ jsx6(
         BottomSheet.Root,
         {
-          header: /* @__PURE__ */ jsx5(
+          header: /* @__PURE__ */ jsx6(
             ListHeader,
             {
-              title: /* @__PURE__ */ jsx5(ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
+              title: /* @__PURE__ */ jsx6(ListHeader.TitleParagraph, { color: adaptive.grey800, fontWeight: "bold", typography: "t5", children: title })
             }
           ),
           open: isOpen,
-          cta: /* @__PURE__ */ jsx5(
+          cta: /* @__PURE__ */ jsx6(
             BottomSheet.CTA,
             {
               size: "large",
@@ -1042,10 +1088,10 @@ function useMoreButtonBottomSheet() {
           onExited: exit,
           children: /* @__PURE__ */ jsxs2(List, { rowSeparator: "none", children: [
             itemList.map((item) => {
-              return /* @__PURE__ */ jsx5(
+              return /* @__PURE__ */ jsx6(
                 ListRow2,
                 {
-                  left: /* @__PURE__ */ jsx5(
+                  left: /* @__PURE__ */ jsx6(
                     ListRow2.Icon,
                     {
                       color: globals.brandPrimaryColor,
@@ -1053,7 +1099,7 @@ function useMoreButtonBottomSheet() {
                       type: "background"
                     }
                   ),
-                  contents: /* @__PURE__ */ jsx5(
+                  contents: /* @__PURE__ */ jsx6(
                     ListRow2.Texts,
                     {
                       type: "1RowTypeA",
@@ -1070,7 +1116,7 @@ function useMoreButtonBottomSheet() {
                 item.contactItemName
               );
             }),
-            isShareListMenuSupported && /* @__PURE__ */ jsx5(AppShareListMenu, {})
+            isShareListMenuSupported && /* @__PURE__ */ jsx6(AppShareListMenu, {})
           ] })
         }
       ) });
@@ -1083,24 +1129,12 @@ function BottomSheetImpressionArea({ children }) {
   useEffect7(() => {
     logging.show();
   }, [logging]);
-  return /* @__PURE__ */ jsx5(Fragment3, { children });
-}
-
-// src/core/utils/safeParseNavigationBar.ts
-function safeParseNavigationBar(navigationBar) {
-  if (typeof navigationBar === "object") {
-    return navigationBar;
-  }
-  try {
-    return JSON.parse(navigationBar);
-  } catch {
-    return null;
-  }
+  return /* @__PURE__ */ jsx6(Fragment3, { children });
 }
 
 // src/components/NavigationBar/common/NavigationBarImpressionArea.tsx
 import { useEffect as useEffect8, useRef as useRef3 } from "react";
-import { Fragment as Fragment4, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
 function NavigationBarImpressionArea({
   children,
   withHomeButton
@@ -1113,21 +1147,21 @@ function NavigationBarImpressionArea({
       hasLogged.current = true;
     }
   }, [logging, withHomeButton]);
-  return /* @__PURE__ */ jsx6(Fragment4, { children });
+  return /* @__PURE__ */ jsx7(Fragment4, { children });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Default.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function DefaultNavigationBar() {
   const globals = getAppsInTossGlobals();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
+  const { navigationRightButton } = useNavigationBarContext();
   const navigationEvent = useNavigationEvent();
   useHardwareBackPress(navigationEvent.handleBack);
-  return /* @__PURE__ */ jsx7(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx8(
     TopNavigation,
     {
       title: globals.brandDisplayName,
@@ -1137,28 +1171,28 @@ function DefaultNavigationBar() {
       onPressTitle: withHomeButton ? navigationEvent.handleHomeButtonClick : void 0,
       onPressClose: navigationEvent.handleCloseButtonClick,
       withHome: withHomeButton,
-      fixedRightButton: initialAccessoryButton,
-      children: /* @__PURE__ */ jsx7(NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ jsx7(NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
+      fixedRightButton: navigationRightButton,
+      children: /* @__PURE__ */ jsx8(NavigationLeft, { visible: withBackButton, children: /* @__PURE__ */ jsx8(NavigationBackButton, { onPress: navigationEvent.handleBack, canGoBack: false }) })
     }
   ) });
 }
 
 // src/components/NavigationBar/RNNavigationBar/Game.tsx
+import { useSafeAreaInsets } from "@granite-js/native/react-native-safe-area-context";
 import { PageNavbar } from "@toss/tds-react-native";
 import { NavigationRightContent, useSafeAreaTop } from "@toss/tds-react-native/private";
 import { Platform as Platform2, View as View2 } from "react-native";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function GameNavigationBar() {
   const safeAreaTop = useSafeAreaTop();
-  const global2 = getAppsInTossGlobals();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
   const navigationEvent = useNavigationEvent();
+  const { navigationRightButton } = useNavigationBarContext();
+  const { right: safeAreaRight } = useSafeAreaInsets();
   useHardwareBackPress(navigationEvent.handleBack);
-  const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
   return /* @__PURE__ */ jsxs3(Fragment5, { children: [
-    /* @__PURE__ */ jsx8(PageNavbar, { preference: { type: "none" } }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(PageNavbar, { preference: { type: "none" } }),
+    /* @__PURE__ */ jsx9(
       View2,
       {
         style: {
@@ -1171,13 +1205,13 @@ function GameNavigationBar() {
           position: "absolute",
           zIndex: Z_INDEX.CLOSE_BUTTON,
           marginTop: safeAreaTop,
-          paddingRight: 10
+          paddingRight: safeAreaRight + 10
         },
         pointerEvents: "box-none",
-        children: /* @__PURE__ */ jsx8(
+        children: /* @__PURE__ */ jsx9(
           NavigationRightContent,
           {
-            fixedRightButton: initialAccessoryButton,
+            fixedRightButton: navigationRightButton,
             onPressDots: openMoreButtonBottomSheet,
             onPressClose: navigationEvent.handleCloseButtonClick,
             theme: "dark"
@@ -1204,19 +1238,19 @@ import * as constant_bridges_star from "@apps-in-toss/native-modules/constant-br
 import * as event_bridges_star from "@apps-in-toss/native-modules/event-bridges";
 
 // src/components/RNAppContainer.tsx
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function RNAppContainer({ children }) {
   const global2 = getAppsInTossGlobals();
   switch (global2.appType) {
     case "game":
-      return /* @__PURE__ */ jsx9(GameAppContainer, { children });
+      return /* @__PURE__ */ jsx10(GameAppContainer, { children });
     case "general":
     default:
-      return /* @__PURE__ */ jsx9(GeneralAppContainer, { children });
+      return /* @__PURE__ */ jsx10(GeneralAppContainer, { children });
   }
 }
 function GameAppContainer({ children }) {
-  const [isEntryMessageExited, setIsEntryMessageExited] = useState4(false);
+  const [isEntryMessageExited, setIsEntryMessageExited] = useState5(false);
   useEffect9(() => {
     if (Platform3.OS === "ios") {
       setIosSwipeGestureEnabled({ isEnabled: false });
@@ -1234,40 +1268,40 @@ function GameAppContainer({ children }) {
     });
   }, []);
   return /* @__PURE__ */ jsxs4(Fragment6, { children: [
-    /* @__PURE__ */ jsx9(RNNavigationBar.Game, {}),
-    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ jsx9(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children }) : children
+    /* @__PURE__ */ jsx10(RNNavigationBar.Game, {}),
+    (0, bridge_entry_exports.getOperationalEnvironment)() === "toss" ? /* @__PURE__ */ jsx10(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children }) : children
   ] });
 }
 function GeneralAppContainer({ children }) {
   return /* @__PURE__ */ jsxs4(Fragment6, { children: [
-    /* @__PURE__ */ jsx9(RNNavigationBar.Default, {}),
+    /* @__PURE__ */ jsx10(RNNavigationBar.Default, {}),
     children
   ] });
 }
 
 // src/core/registerApp.tsx
-import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function AppsInTossContainer(Container, { children, ...initialProps }) {
   if (!isMinVersionSupported3({
     android: "5.220.0",
     ios: "5.221.0"
   })) {
     return /* @__PURE__ */ jsxs5(Fragment7, { children: [
-      /* @__PURE__ */ jsx10(AppEvent.Entry, {}),
-      /* @__PURE__ */ jsx10(AppEvent.System, { ...initialProps }),
-      /* @__PURE__ */ jsx10(AppUpdate, {})
+      /* @__PURE__ */ jsx11(AppEvent.Entry, {}),
+      /* @__PURE__ */ jsx11(AppEvent.System, { ...initialProps }),
+      /* @__PURE__ */ jsx11(AppUpdate, {})
     ] });
   }
   return /* @__PURE__ */ jsxs5(Fragment7, { children: [
-    /* @__PURE__ */ jsx10(AppEvent.StayTime, {}),
-    /* @__PURE__ */ jsx10(AppEvent.Entry, {}),
-    /* @__PURE__ */ jsx10(AppEvent.System, { ...initialProps }),
-    /* @__PURE__ */ jsx10(Container, { ...initialProps, children: /* @__PURE__ */ jsx10(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ jsx10(TDSContainer, { ...initialProps, children }) }) })
+    /* @__PURE__ */ jsx11(AppEvent.StayTime, {}),
+    /* @__PURE__ */ jsx11(AppEvent.Entry, {}),
+    /* @__PURE__ */ jsx11(AppEvent.System, { ...initialProps }),
+    /* @__PURE__ */ jsx11(Container, { ...initialProps, children: /* @__PURE__ */ jsx11(TDSProvider, { colorPreference: "light", token: { color: { primary: getAppsInTossGlobals().brandPrimaryColor } }, children: /* @__PURE__ */ jsx11(TDSContainer, { ...initialProps, children }) }) })
   ] });
 }
 function TDSContainer({ children }) {
   useAppsInTossBridge();
-  return /* @__PURE__ */ jsx10(Fragment7, { children });
+  return /* @__PURE__ */ jsx11(Fragment7, { children });
 }
 function registerApp(container, { context, analytics }) {
   const appName = getAppName();
@@ -1294,7 +1328,7 @@ function registerApp(container, { context, analytics }) {
 }
 function AppsInTossScreenContainer({ children }) {
   const isRNApp = getAppsInTossGlobals().webViewType == null;
-  return /* @__PURE__ */ jsx10(Analytics.Screen, { children: isRNApp ? /* @__PURE__ */ jsx10(RNAppContainer, { children }) : children });
+  return /* @__PURE__ */ jsx11(NavigationBarContextProvider, { children: /* @__PURE__ */ jsx11(Analytics.Screen, { children: isRNApp ? /* @__PURE__ */ jsx11(RNAppContainer, { children }) : children }) });
 }
 function getAppName() {
   try {
@@ -1312,10 +1346,10 @@ var AppsInToss = {
 
 // src/components/WebView.tsx
 import {
+  AppsInTossModule,
   GoogleAdMob,
   IAP,
   Storage,
-  AppsInTossModule,
   appsInTossEvent as appsInTossEvent4,
   iapCreateOneTimePurchaseOrder,
   processProductGrant,
@@ -1326,8 +1360,8 @@ import * as appsInTossConstantBridges from "@apps-in-toss/native-modules/constan
 import * as appsInTossEventBridges from "@apps-in-toss/native-modules/event-bridges";
 import { getSchemeUri as getSchemeUri6 } from "@granite-js/react-native";
 import { ExternalWebViewScreen, tdsEvent } from "@toss/tds-react-native";
-import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop3, useTopNavigation } from "@toss/tds-react-native/private";
-import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef6, useState as useState7 } from "react";
+import { useSafeAreaBottom, useSafeAreaTop as useSafeAreaTop3 } from "@toss/tds-react-native/private";
+import { useEffect as useEffect12, useMemo as useMemo6, useRef as useRef6, useState as useState8 } from "react";
 import { BackHandler as BackHandler2, Platform as Platform6 } from "react-native";
 
 // src/components/GameWebView.tsx
@@ -1335,17 +1369,18 @@ import { setIosSwipeGestureEnabled as setIosSwipeGestureEnabled3, appsInTossEven
 import {
   WebView as PlainWebView
 } from "@granite-js/native/react-native-webview";
-import { forwardRef, useEffect as useEffect10, useState as useState5 } from "react";
+import { forwardRef, useEffect as useEffect10, useState as useState6 } from "react";
 import { Platform as Platform5 } from "react-native";
 
 // src/components/NavigationBar/GameWebviewNavigationBar.tsx
+import { useSafeAreaInsets as useSafeAreaInsets2 } from "@granite-js/native/react-native-safe-area-context";
 import { closeView as closeView4 } from "@granite-js/react-native";
 import { PageNavbar as PageNavbar2, useDialog as useDialog5 } from "@toss/tds-react-native";
 import { NavigationRightContent as NavigationRightContent2, useSafeAreaTop as useSafeAreaTop2 } from "@toss/tds-react-native/private";
 import { josa as josa3 } from "es-hangul";
 import { useCallback as useCallback8 } from "react";
 import { Platform as Platform4, View as View3 } from "react-native";
-import { Fragment as Fragment8, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function GameWebviewNavigationBar() {
   const safeAreaTop = useSafeAreaTop2();
   const { openConfirm } = useDialog5();
@@ -1353,8 +1388,8 @@ function GameWebviewNavigationBar() {
   const global2 = getAppsInTossGlobals();
   const logging = useNavigationBarLogging();
   const { open: openMoreButtonBottomSheet } = useMoreButtonBottomSheet();
-  const parsedNavigationBar = global2.navigationBar != null ? safeParseNavigationBar(global2.navigationBar) : null;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
+  const { navigationRightButton } = useNavigationBarContext();
+  const { right: safeAreaRight } = useSafeAreaInsets2();
   const handleGameWebviewClose = useCallback8(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
@@ -1371,8 +1406,8 @@ function GameWebviewNavigationBar() {
     }
   }, [captureExitLog, global2.brandDisplayName, logging, openConfirm]);
   return /* @__PURE__ */ jsxs6(Fragment8, { children: [
-    /* @__PURE__ */ jsx11(PageNavbar2, { preference: { type: "none" } }),
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(PageNavbar2, { preference: { type: "none" } }),
+    /* @__PURE__ */ jsx12(
       View3,
       {
         style: {
@@ -1385,13 +1420,13 @@ function GameWebviewNavigationBar() {
           position: "absolute",
           zIndex: Z_INDEX.CLOSE_BUTTON,
           marginTop: safeAreaTop,
-          paddingRight: 10
+          paddingRight: safeAreaRight + 10
         },
         pointerEvents: "box-none",
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx12(
           NavigationRightContent2,
           {
-            fixedRightButton: initialAccessoryButton,
+            fixedRightButton: navigationRightButton,
             onPressDots: openMoreButtonBottomSheet,
             onPressClose: () => {
               handleGameWebviewClose();
@@ -1405,9 +1440,9 @@ function GameWebviewNavigationBar() {
 }
 
 // src/components/GameWebView.tsx
-import { Fragment as Fragment9, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var GameWebView = forwardRef(function GameWebView2(props, ref) {
-  const [isEntryMessageExited, setIsEntryMessageExited] = useState5(false);
+  const [isEntryMessageExited, setIsEntryMessageExited] = useState6(false);
   useEffect10(() => {
     if (Platform5.OS === "ios") {
       setIosSwipeGestureEnabled3({ isEnabled: false });
@@ -1425,8 +1460,8 @@ var GameWebView = forwardRef(function GameWebView2(props, ref) {
     });
   }, []);
   return /* @__PURE__ */ jsxs7(Fragment9, { children: [
-    /* @__PURE__ */ jsx12(GameWebviewNavigationBar, {}),
-    getOperationalEnvironment3() === "toss" ? /* @__PURE__ */ jsx12(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ jsx12(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx12(PlainWebView, { ref, ...props })
+    /* @__PURE__ */ jsx13(GameWebviewNavigationBar, {}),
+    getOperationalEnvironment3() === "toss" ? /* @__PURE__ */ jsx13(GameInitializer, { isReadyForProfileUI: isEntryMessageExited, children: /* @__PURE__ */ jsx13(PlainWebView, { ref, ...props }) }) : /* @__PURE__ */ jsx13(PlainWebView, { ref, ...props })
   ] });
 });
 
@@ -1442,7 +1477,7 @@ import { useDialog as useDialog6 } from "@toss/tds-react-native";
 import { NavigationBackButton as NavigationBackButton2, NavigationLeft as NavigationLeft2, TopNavigation as TopNavigation2 } from "@toss/tds-react-native/private";
 import { josa as josa4 } from "es-hangul";
 import { useCallback as useCallback9 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const globals = getAppsInTossGlobals();
   const { captureExitLog } = useCaptureExitLog();
@@ -1452,7 +1487,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
   const parsedNavigationBar = globals.navigationBar != null ? safeParseNavigationBar(globals.navigationBar) : null;
   const withHomeButton = parsedNavigationBar?.withHomeButton ?? false;
   const withBackButton = parsedNavigationBar?.withBackButton ?? true;
-  const initialAccessoryButton = parsedNavigationBar?.initialAccessoryButton;
+  const { navigationRightButton } = useNavigationBarContext();
   const handleClose = useCallback9(async () => {
     logging.closeButtonClick();
     const isConfirmed = await openConfirm({
@@ -1468,7 +1503,7 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
       closeView5();
     }
   }, [captureExitLog, globals.brandDisplayName, logging, openConfirm]);
-  return /* @__PURE__ */ jsx13(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(NavigationBarImpressionArea, { withHomeButton, children: /* @__PURE__ */ jsx14(
     TopNavigation2,
     {
       title: globals.brandDisplayName,
@@ -1478,18 +1513,18 @@ function PartnerWebviewNavigationBar({ onBackButtonClick, onHomeButtonClick }) {
       onPressTitle: withHomeButton ? onHomeButtonClick : void 0,
       onPressClose: handleClose,
       withHome: withHomeButton,
-      fixedRightButton: initialAccessoryButton,
-      children: /* @__PURE__ */ jsx13(NavigationLeft2, { visible: withBackButton, children: /* @__PURE__ */ jsx13(NavigationBackButton2, { onPress: onBackButtonClick, canGoBack: false }) })
+      fixedRightButton: navigationRightButton,
+      children: /* @__PURE__ */ jsx14(NavigationLeft2, { visible: withBackButton, children: /* @__PURE__ */ jsx14(NavigationBackButton2, { onPress: onBackButtonClick, canGoBack: false }) })
     }
   ) });
 }
 
 // src/components/PartnerWebView.tsx
-import { Fragment as Fragment10, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 var PartnerWebView = forwardRef2(function PartnerWebViewScreen({ onBackButtonClick, onHomeButtonClick, ...webViewProps }, ref) {
   return /* @__PURE__ */ jsxs8(Fragment10, { children: [
-    /* @__PURE__ */ jsx14(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
-    /* @__PURE__ */ jsx14(PlainWebView2, { ref, ...webViewProps, style: { flex: 1 } })
+    /* @__PURE__ */ jsx15(PartnerWebviewNavigationBar, { onBackButtonClick, onHomeButtonClick }),
+    /* @__PURE__ */ jsx15(PlainWebView2, { ref, ...webViewProps, style: { flex: 1 } })
   ] });
 });
 
@@ -1912,7 +1947,7 @@ function useCreateUserAgent({
   const platform = getPlatformOS();
   const appVersion = getTossAppVersion();
   const { fontScale } = useWindowDimensions();
-  const platformString = platform === "ios" ? "iPhone" : "Android";
+  const platformString = platform === "ios" ? "iPhone" : "Android phone";
   const fontA11y = mapFontScaleToCategory(fontScale, platform);
   const normalizedFontScale = convertToAndroidStyleScale(fontScale, platform);
   return [
@@ -1933,10 +1968,10 @@ function useCreateUserAgent({
 // src/hooks/useGeolocation.ts
 import { startUpdateLocation } from "@apps-in-toss/native-modules";
 import { useVisibility as useVisibility3 } from "@granite-js/react-native";
-import { useEffect as useEffect11, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 function useGeolocation({ accuracy, distanceInterval, timeInterval }) {
   const isVisible = useVisibility3();
-  const [location, setLocation] = useState6(null);
+  const [location, setLocation] = useState7(null);
   useEffect11(() => {
     if (!isVisible) {
       return;
@@ -1984,6 +2019,15 @@ function useWaitForReturnNavigator() {
   return startNavigating;
 }
 
+// src/hooks/useTopNavigation.tsx
+function useTopNavigation() {
+  const { addNavigationRightButton, removeNavigationRightButton } = useNavigationBarContext();
+  return {
+    addAccessoryButton: addNavigationRightButton,
+    removeAccessoryButton: removeNavigationRightButton
+  };
+}
+
 // src/utils/log.ts
 import { eventLog as eventLogNative } from "@apps-in-toss/native-modules";
 import { getSchemeUri as getSchemeUri5 } from "@granite-js/react-native";
@@ -2034,7 +2078,7 @@ var trackScreen = (url) => {
 };
 
 // src/components/WebView.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var operationalEnvironment = appsInTossConstantBridges.getOperationalEnvironment();
 var TYPES = ["partner", "external", "game"];
 var WEBVIEW_TYPES = {
@@ -2074,7 +2118,7 @@ function WebView({ type, local, onMessage, ...props }) {
   const top = useSafeAreaTop3();
   const bottom = useSafeAreaBottom();
   const global2 = getAppsInTossGlobals();
-  const topNavigation = useTopNavigation();
+  const navigationBarContext = useNavigationBarContext();
   const disableTextSelectionCSS = `
     (function() {
       const style = document.createElement('style');
@@ -2082,7 +2126,7 @@ function WebView({ type, local, onMessage, ...props }) {
       document.head.appendChild(style);
     })();
   `;
-  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = useState7(
+  const [allowsBackForwardNavigationGestures, setAllowsBackForwardNavigationGestures] = useState8(
     props.allowsBackForwardNavigationGestures
   );
   const handler = useBridgeHandler({
@@ -2136,8 +2180,8 @@ function WebView({ type, local, onMessage, ...props }) {
         setAllowsBackForwardNavigationGestures(options.isEnabled);
         return appsInTossAsyncBridges.setIosSwipeGestureEnabled(options);
       },
-      addAccessoryButton: async (params) => topNavigation.addAccessoryButton(params),
-      removeAccessoryButton: async () => topNavigation.removeAccessoryButton(),
+      addAccessoryButton: async (params) => navigationBarContext.addNavigationRightButton(params),
+      removeAccessoryButton: async () => navigationBarContext.removeNavigationRightButton(),
       /** permissions */
       requestPermission: appsInTossAsyncBridges.requestPermission,
       openPermissionDialog: appsInTossAsyncBridges.openPermissionDialog,
@@ -2191,7 +2235,7 @@ function WebView({ type, local, onMessage, ...props }) {
     BackHandler2.addEventListener("hardwareBackPress", callback);
     return () => BackHandler2.removeEventListener("hardwareBackPress", callback);
   }, [webBackHandler]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     BaseWebView,
     {
       ref: refs,
@@ -2228,7 +2272,7 @@ function WebView({ type, local, onMessage, ...props }) {
 
 // src/index.ts
 export * from "@apps-in-toss/analytics";
-import { useTopNavigation as useTopNavigation2, useOverlay as useOverlay3, OverlayProvider } from "@toss/tds-react-native/private";
+import { useOverlay as useOverlay3, OverlayProvider } from "@toss/tds-react-native/private";
 export * from "@apps-in-toss/native-modules";
 export * from "@apps-in-toss/types";
 var Analytics2 = {
@@ -2247,6 +2291,6 @@ export {
   useCreateUserAgent,
   useGeolocation,
   useOverlay3 as useOverlay,
-  useTopNavigation2 as useTopNavigation,
+  useTopNavigation,
   useWaitForReturnNavigator
 };