@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/higherOrder/BasePage.js

@@ -1,21 +1,23 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPageContext = exports["default"] = void 0;
+exports.withPageContext = exports.usePageReady = exports["default"] = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _navigation = require("next/navigation");
 var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
 var _cloneDeep = _interopRequireDefault(require("lodash-es/cloneDeep"));
 var _merge = _interopRequireDefault(require("lodash-es/merge"));
+var _compare = _interopRequireDefault(require("../core/util/compare"));
 var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 var _spinner = require("@wavemaker/react-runtime/components/basic/spinner");
 var _appVariablesStore = require("@wavemaker/react-runtime/core/appVariablesStore");
@@ -23,28 +25,65 @@ var _store = require("@wavemaker/react-runtime/store");
 var _AppContext = require("@wavemaker/react-runtime/context/AppContext");
 var _useAccess2 = _interopRequireDefault(require("@wavemaker/react-runtime/hooks/useAccess"));
 var _authSlice = require("@wavemaker/react-runtime/store/slices/authSlice");
+var _navigationSlice = require("@wavemaker/react-runtime/store/slices/navigationSlice");
 var _types = require("@wavemaker/react-runtime/types");
 var _proxyService = require("@wavemaker/react-runtime/core/proxy-service");
-var _navigationMiddleware = require("@wavemaker/react-runtime/store/middleware/navigationMiddleware");
 var _helper = require("@wavemaker/react-runtime/higherOrder/helper");
 var _toast = require("@wavemaker/react-runtime/actions/toast.service");
 var _appstore = _interopRequireDefault(require("@wavemaker/react-runtime/core/appstore"));
 var _scriptRegistry = require("@wavemaker/react-runtime/core/script-registry");
 var _formatters = _interopRequireDefault(require("../core/formatters"));
 var _AppContext2 = require("../context/AppContext");
-var _widgetCleanupUtil = require("../utils/widget-cleanup-util");
 var _pageParamsUtil = require("../utils/page-params-util");
-var _constants = require("../core/constants");
 var _AppSpinnerProvider = require("../context/AppSpinnerProvider");
-var _lodash = require("lodash");
+var _get = _interopRequireDefault(require("lodash/get"));
 var _events = require("../core/constants/events");
 var _libErrorSkipper = require("../utils/lib-error-skipper");
+var _viewport = require("../store/viewport.service");
+var _util = require("../core/util");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 var __jsx = _react["default"].createElement;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-// Add global declaration for wm property
-
+/**
+ * Module-level Maps for page ready signaling.
+ * Each component is tracked by its componentName, preventing conflicts between
+ * pages, partials, and prefabs.
+ */
+var pageReadyCallbacks = new Map();
+var pageReadySignalled = new Set();
+
+/**
+ * Hook to signal that a page component has rendered and is ready.
+ * Call this at the top of your page component to trigger startup operations.
+ *
+ * This ensures widgets have mounted and subscribed before variables are invoked.
+ *
+ * @param componentName - The unique name of the component (e.g., "ChooseAPlansGrid")
+ *
+ * @example
+ * import { usePageReady } from '@wavemaker/react-runtime/higherOrder/BasePage';
+ *
+ * const ChooseAPlansGridComponent = () => {
+ *   usePageReady("ChooseAPlansGrid"); // Signal ready on mount
+ *   return <WmPage>...</WmPage>;
+ * };
+ */
+var usePageReady = exports.usePageReady = function usePageReady(componentName) {
+  var signalledRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (!componentName || signalledRef.current) return;
+    signalledRef.current = true;
+    pageReadySignalled.add(componentName);
+
+    // Call callback if already registered (parent effect ran first)
+    var callback = pageReadyCallbacks.get(componentName);
+    if (callback) {
+      callback();
+    }
+    // Otherwise, the parent's effect will check pageReadySignalled and call handlePageReady
+  }, [componentName]);
+};
 var withPageContext = exports.withPageContext = function withPageContext(WrappedComponent, addPageScript, getVariables, componentInfo, prefabInfo) {
   var PageContextComponent = function PageContextComponent(props) {
     var _info$appConfig;
@@ -90,6 +129,9 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
     var appConfig = (0, _store.useAppSelector)(function (state) {
       return state.info.appConfig;
     });
+    var pendingAccordionExpansion = (0, _store.useAppSelector)(function (state) {
+      return state.navigation.pendingAccordionExpansion;
+    });
 
     // Initialization state management
     var _useState = (0, _react.useState)(false),
@@ -104,11 +146,9 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
     var pageProxyRef = (0, _react.useRef)(null);
     var isInitializingRef = (0, _react.useRef)(false);
     var isMountedRef = (0, _react.useRef)(true);
-    var usedFallbackAppVarsRef = (0, _react.useRef)(false);
     var appVarSubscriptionsDoneRef = (0, _react.useRef)(false);
     var subscribedVariableNamesRef = (0, _react.useRef)(new Set());
-    var cleanupUtilRef = (0, _react.useRef)(null);
-    var isContentReadyRef = (0, _react.useRef)(false);
+    var overriddenPropsRegistryRef = (0, _react.useRef)(null);
 
     // Initial page context state
     var _useState2 = (0, _react.useState)(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
@@ -117,20 +157,22 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
         Actions: {},
         onReady: function onReady() {},
         serviceDefinitions: (0, _cloneDeep["default"])((prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.serviceDefs) || (appContext === null || appContext === void 0 ? void 0 : appContext.serviceDefinitions) || {}),
-        pageParams: {},
+        pageParams: props.pageParams || {},
         baseUrl: (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.baseUrl) || (info === null || info === void 0 || (_info$appConfig = info.appConfig) === null || _info$appConfig === void 0 ? void 0 : _info$appConfig.url) || "",
         appConfig: appContext === null || appContext === void 0 ? void 0 : appContext.appConfig,
         notification: {},
         toaster: _toast.toastService,
         onContentReady: onContentReady,
         onChange: updateWidgetState,
-        cleanup: cleanup,
         App: {},
         eval: appContext === null || appContext === void 0 ? void 0 : appContext.eval,
         appLocale: componentInfo.appLocale || i18n.appLocale || {}
       }, prefabInfo), props), componentInfo), {}, {
         executeStartup: executeStartup,
-        formatters: _formatters["default"]
+        formatters: _formatters["default"],
+        Viewport: _viewport.viewportService.getViewport(),
+        formatMessage: _util.formatMessage,
+        overriddenPropsRegistryRef: overriddenPropsRegistryRef.current
       })),
       pageContext = _useState2[0],
       setPageContext = _useState2[1];
@@ -139,6 +181,32 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
       return appContext;
     }, [appContext]);
 
+    // Compute a stable key from partial param values for dependency tracking
+    var partialParamValuesKey = (0, _pageParamsUtil.computePartialParamKey)(componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, props.params, props);
+
+    // Subscribe for partial params changes - sync prop values to pageParams
+    (0, _react.useEffect)(function () {
+      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PARTIAL" || !pageProxyRef.current) {
+        return;
+      }
+      var paramValues = (0, _pageParamsUtil.extractPartialParamValues)(props.params || [], props);
+
+      // Update pageParams for each param key when prop values change
+      Object.entries(paramValues).forEach(function (_ref) {
+        var _pageProxyRef$current;
+        var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+          key = _ref2[0],
+          newValue = _ref2[1];
+        if (!(0, _isEqual["default"])((_pageProxyRef$current = pageProxyRef.current.pageParams) === null || _pageProxyRef$current === void 0 ? void 0 : _pageProxyRef$current[key], newValue)) {
+          if (!pageProxyRef.current.pageParams) {
+            pageProxyRef.current.pageParams = {};
+          }
+          pageProxyRef.current.pageParams[key] = newValue;
+        }
+      });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [partialParamValuesKey]);
+
     // Handle redirect to login if authentication is required
     (0, _react.useEffect)(function () {
       var _appConfig$pages;
@@ -163,32 +231,6 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
       }
     }, [accessLoading, isSecurityEnabled, isAuthenticated, appConfig, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName, dispatch, securityConfig]);
 
-    // Handle redirect from login page to landing page if already authenticated
-    (0, _react.useEffect)(function () {
-      var _securityConfig$login;
-      if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) !== "PAGE" || !isSecurityEnabled || !isAuthenticated || accessLoading) {
-        return;
-      }
-      var loginPage = securityConfig === null || securityConfig === void 0 || (_securityConfig$login = securityConfig.loginConfig) === null || _securityConfig$login === void 0 ? void 0 : _securityConfig$login.pageName;
-      var landingPage = loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.landingPage;
-      if (!loginPage || !landingPage) {
-        return;
-      }
-
-      // Extract the last segment of the pathname (the page name)
-      var currentPageName = componentInfo.componentName;
-      var isOnLoginPage = currentPageName === loginPage;
-
-      // If authenticated user is on login page, redirect to landing page
-      if (isOnLoginPage) {
-        var router = (0, _navigationMiddleware.getRouterInstance)();
-        if (router) {
-          console.log("BasePage: Redirecting authenticated user from login to landing page", landingPage);
-          router.push("/".concat(_constants.ROUTING_BASEPATH, "/").concat(landingPage));
-        }
-      }
-    }, [componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType, isSecurityEnabled, isAuthenticated, accessLoading, securityConfig, loggedInUser === null || loggedInUser === void 0 ? void 0 : loggedInUser.landingPage]);
-
     // Check if we should proceed with initialization
     var shouldInitialize = (0, _react.useMemo)(function () {
       // Wait for app to be ready (if app context exists)
@@ -235,7 +277,7 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
           Actions: updatedActions
         });
       });
-    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady]);
+    }, [appContext === null || appContext === void 0 ? void 0 : appContext.isAppReady, appContext === null || appContext === void 0 ? void 0 : appContext.Variables, appContext === null || appContext === void 0 ? void 0 : appContext.Actions]);
 
     // Main initialization effect - runs only when conditions are met
     (0, _react.useEffect)(function () {
@@ -247,25 +289,18 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
       // Set initialization flag
       isInitializingRef.current = true;
       var initializeComponent = /*#__PURE__*/function () {
-        var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+        var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
           var pageProxy, pageVariables, appVariables, APP_VARIABLES, _mergeVariablesAndAct, Variables, Actions, urlParams, newParams, pageName;
           return _regenerator["default"].wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 try {
+                  // Create overridden props registry
+                  overriddenPropsRegistryRef.current = (0, _scriptRegistry.createOverriddenPropsRegistry)();
                   // Create page proxy
-                  pageProxy = (0, _proxyService.createStateProxy)(pageContext, [], setPageContext);
+                  pageProxy = (0, _proxyService.createStateProxy)(pageContext, [], setPageContext, overriddenPropsRegistryRef.current);
                   pageProxyRef.current = pageProxy;
 
-                  // Initialize cleanup utility
-                  if (!cleanupUtilRef.current) {
-                    cleanupUtilRef.current = (0, _widgetCleanupUtil.createWidgetCleanup)({
-                      setPageContext: setPageContext,
-                      proxyRef: pageProxyRef,
-                      debounceDelay: 100
-                    });
-                  }
-
                   // Initialize variables and actions
                   pageVariables = getVariables(pageProxy); // Handle app variables based on app context availability
                   appVariables = {
@@ -278,7 +313,6 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
                       Variables: appContext.Variables || {},
                       Actions: appContext.Actions || {}
                     };
-                    usedFallbackAppVarsRef.current = false;
                   } else {
                     // Fallback to traditional app variable initialization
                     // @ts-ignore
@@ -287,7 +321,6 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
                       Variables: {},
                       Actions: {}
                     };
-                    usedFallbackAppVarsRef.current = true;
                   }
                   _mergeVariablesAndAct = (0, _helper.mergeVariablesAndActions)(pageVariables, appVariables), Variables = _mergeVariablesAndAct.Variables, Actions = _mergeVariablesAndAct.Actions; // Compute page params from URL and include partial params when applicable
                   urlParams = Object.fromEntries(pageParams.entries());
@@ -302,8 +335,8 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
                   pageProxy.Actions = Actions;
                   pageProxy.pageParams = _objectSpread({}, newParams);
                   pageProxy.App = _objectSpread(_objectSpread({}, appProxy), initialAppConfig);
-                  pageProxy.pageParams = _objectSpread({}, newParams);
                   pageProxy.selectedLocale = i18n.selectedLocale || "en";
+                  pageProxy.overriddenPropsRegistry = overriddenPropsRegistryRef.current;
 
                   // Setup variable event handlers
                   setupVariableSubscriptions(pageVariables.Variables);
@@ -311,6 +344,8 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
                     pageName = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName;
                     appProxy.updateActivePage(pageName);
                     appProxy.activePage = pageProxy;
+                  } else if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName) === "Common" && (componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PARTIAL" && appProxy) {
+                    appProxy.Widgets = pageProxy === null || pageProxy === void 0 ? void 0 : pageProxy.Widgets;
                   }
 
                   // Initialize page script
@@ -342,21 +377,21 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
           }, _callee);
         }));
         return function initializeComponent() {
-          return _ref.apply(this, arguments);
+          return _ref3.apply(this, arguments);
         };
       }();
       initializeComponent();
 
       // Cleanup function
       return function () {
-        var _cleanupUtilRef$curre;
+        var _overriddenPropsRegis;
         // Cancel all pending page operations
         if (pageProxyRef.current) {
-          var _ref2 = getVariables(pageProxyRef.current) || {},
-            _ref2$Variables = _ref2.Variables,
-            Variables = _ref2$Variables === void 0 ? {} : _ref2$Variables,
-            _ref2$Actions = _ref2.Actions,
-            Actions = _ref2$Actions === void 0 ? {} : _ref2$Actions;
+          var _ref4 = getVariables(pageProxyRef.current) || {},
+            _ref4$Variables = _ref4.Variables,
+            Variables = _ref4$Variables === void 0 ? {} : _ref4$Variables,
+            _ref4$Actions = _ref4.Actions,
+            Actions = _ref4$Actions === void 0 ? {} : _ref4$Actions;
 
           // Cancel page variables
           Object.values(Variables).forEach(function (variable) {
@@ -383,13 +418,14 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
 
         // Clear pending startup operations
         pendingStartupOpsRef.current.clear();
-        (0, _scriptRegistry.clearOverriddenProps)();
+        (_overriddenPropsRegis = overriddenPropsRegistryRef.current) === null || _overriddenPropsRegis === void 0 || _overriddenPropsRegis.clear();
+        // clearOverriddenProps();
 
         // Unsubscribe from events
-        subscriptionsRef.current.forEach(function (_ref3) {
-          var variable = _ref3.variable,
-            event = _ref3.event,
-            handler = _ref3.handler;
+        subscriptionsRef.current.forEach(function (_ref5) {
+          var variable = _ref5.variable,
+            event = _ref5.event,
+            handler = _ref5.handler;
           if (variable !== null && variable !== void 0 && variable.unsubscribe) {
             try {
               variable.unsubscribe(event, handler);
@@ -399,23 +435,22 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
           }
         });
         subscriptionsRef.current = [];
-
-        // Cancel any pending cleanup operations
-        (_cleanupUtilRef$curre = cleanupUtilRef.current) === null || _cleanupUtilRef$curre === void 0 || _cleanupUtilRef$curre.cancel();
       };
     }, [shouldInitialize]); // Only depend on shouldInitialize
 
-    // If initialized with fallback app vars, subscribe to real app vars when app becomes ready
+    // Subscribe to app-level variables when app becomes ready
+    // This MUST happen before executeStartAppOperations() is called (via executeStartup)
+    // so that widgets can receive loading state updates when app variables are invoked
     (0, _react.useEffect)(function () {
-      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current || !usedFallbackAppVarsRef.current || appVarSubscriptionsDoneRef.current) {
+      if (!(appContext !== null && appContext !== void 0 && appContext.isAppReady) || !pageProxyRef.current || appVarSubscriptionsDoneRef.current) {
         return;
       }
       try {
-        var _ref4 = getVariables(pageProxyRef.current) || {
+        var _ref6 = getVariables(pageProxyRef.current) || {
             Variables: {}
           },
-          _ref4$Variables = _ref4.Variables,
-          pageVars = _ref4$Variables === void 0 ? {} : _ref4$Variables;
+          _ref6$Variables = _ref6.Variables,
+          pageVars = _ref6$Variables === void 0 ? {} : _ref6$Variables;
         var pageVarNames = new Set(Object.keys(pageVars || {}));
         subscribeAppVariablesIfNeeded(appContext.Variables || {}, pageVarNames);
         appVarSubscriptionsDoneRef.current = true;
@@ -459,9 +494,9 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
         var updateState = variable;
         updateState.loading = event === _types.VariableEvents.BEFORE_INVOKE;
         updateState.error = event === _types.VariableEvents.ERROR ? variable : null;
-        if ((0, _lodash.get)(variable, "spinnerContext") === "page") {
+        if ((0, _get["default"])(variable, "spinnerContext") === "page") {
           if (updateState.loading) {
-            var message = (0, _lodash.get)(variable, "spinnerMessage");
+            var message = (0, _get["default"])(variable, "spinnerMessage");
             show(message);
           } else {
             hide();
@@ -478,10 +513,10 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
       };
 
       // Set up subscriptions (avoid duplicates by name)
-      Object.entries(variables).forEach(function (_ref5) {
-        var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
-          name = _ref6[0],
-          variable = _ref6[1];
+      Object.entries(variables).forEach(function (_ref7) {
+        var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
+          name = _ref8[0],
+          variable = _ref8[1];
         if (subscribedVariableNamesRef.current.has(name)) {
           return;
         }
@@ -505,10 +540,10 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
     // Subscribe to app-level variables that are not shadowed by page variables
     var subscribeAppVariablesIfNeeded = function subscribeAppVariablesIfNeeded(appVars, pageVarNames) {
       var appVarsOnly = {};
-      Object.entries(appVars || {}).forEach(function (_ref7) {
-        var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
-          name = _ref8[0],
-          variable = _ref8[1];
+      Object.entries(appVars || {}).forEach(function (_ref9) {
+        var _ref0 = (0, _slicedToArray2["default"])(_ref9, 2),
+          name = _ref0[0],
+          variable = _ref0[1];
         if (!pageVarNames.has(name) && !subscribedVariableNamesRef.current.has(name)) {
           appVarsOnly[name] = variable;
         }
@@ -520,12 +555,12 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
 
     // Execute startup operations
     var executeStartupOperations = /*#__PURE__*/function () {
-      var _ref9 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(Variables, Actions) {
-        var _ref0, _ref0$startUpActions, startUpActions, _ref0$startUpVariable, startUpVariables, variablePromises;
+      var _ref1 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(Variables, Actions) {
+        var _ref10, _ref10$startUpActions, startUpActions, _ref10$startUpVariabl, startUpVariables, variablePromises;
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _ref0 = componentInfo || {}, _ref0$startUpActions = _ref0.startUpActions, startUpActions = _ref0$startUpActions === void 0 ? [] : _ref0$startUpActions, _ref0$startUpVariable = _ref0.startUpVariables, startUpVariables = _ref0$startUpVariable === void 0 ? [] : _ref0$startUpVariable; // Track startup operations
+              _ref10 = componentInfo || {}, _ref10$startUpActions = _ref10.startUpActions, startUpActions = _ref10$startUpActions === void 0 ? [] : _ref10$startUpActions, _ref10$startUpVariabl = _ref10.startUpVariables, startUpVariables = _ref10$startUpVariabl === void 0 ? [] : _ref10$startUpVariabl; // Track startup operations
               startUpVariables.forEach(function (name) {
                 return pendingStartupOpsRef.current.add(name);
               });
@@ -566,75 +601,115 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
             case 10:
               startUpVariableLoadedRef.current = true;
               pendingStartupOpsRef.current.clear();
-              _context2.next = 17;
+              setTimeout(function () {
+                if ((componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentType) === "PAGE") {
+                  appContext === null || appContext === void 0 || appContext.notify("page-variables-data-loaded", {
+                    pageName: componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName
+                  });
+                }
+              }, 0);
+              _context2.next = 18;
               break;
-            case 14:
-              _context2.prev = 14;
+            case 15:
+              _context2.prev = 15;
               _context2.t0 = _context2["catch"](5);
               console.error("Error during startup operations:", _context2.t0);
-            case 17:
+            case 18:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[5, 14]]);
+        }, _callee2, null, [[5, 15]]);
       }));
       return function executeStartupOperations(_x, _x2) {
-        return _ref9.apply(this, arguments);
+        return _ref1.apply(this, arguments);
       };
     }();
 
-    // Cleanup function for unmounting widgets
-    function cleanup(name) {
-      var _cleanupUtilRef$curre2;
-      (_cleanupUtilRef$curre2 = cleanupUtilRef.current) === null || _cleanupUtilRef$curre2 === void 0 || _cleanupUtilRef$curre2.cleanup(name);
-    }
-
     // Widget state update function
     function updateWidgetState(widgetName, newProps) {
       if (!widgetName || !newProps || Object.keys(newProps).length === 0) return;
-      if ((0, _isEqual["default"])(pageContext.Widgets[widgetName], newProps)) return;
+      if ((0, _compare["default"])(pageContext.Widgets[widgetName], newProps)) return;
       setPageContext(function (prev) {
         return _objectSpread(_objectSpread({}, prev), {}, {
           Widgets: _objectSpread(_objectSpread({}, prev.Widgets), {}, (0, _defineProperty2["default"])({}, widgetName, _objectSpread(_objectSpread({}, prev.Widgets[widgetName]), newProps)))
         });
       });
-      Object.keys(newProps).forEach(function (key) {
-        var _pageContext$Widgets$;
-        if (!(0, _isEqual["default"])((_pageContext$Widgets$ = pageContext.Widgets[widgetName]) === null || _pageContext$Widgets$ === void 0 ? void 0 : _pageContext$Widgets$[key], newProps === null || newProps === void 0 ? void 0 : newProps[key]) && (newProps === null || newProps === void 0 ? void 0 : newProps[key]) !== undefined) {
-          pageProxyRef.current.Widgets[widgetName][key] = newProps[key];
-        }
+
+      // Suspend tracking to prevent internal state updates from being tracked as script overrides
+      (0, _scriptRegistry.withSuspendedTracking)(overriddenPropsRegistryRef.current, function () {
+        Object.keys(newProps).forEach(function (key) {
+          var _pageContext$Widgets$;
+          if (!(0, _isEqual["default"])((_pageContext$Widgets$ = pageContext.Widgets[widgetName]) === null || _pageContext$Widgets$ === void 0 ? void 0 : _pageContext$Widgets$[key], newProps === null || newProps === void 0 ? void 0 : newProps[key]) && (newProps === null || newProps === void 0 ? void 0 : newProps[key]) !== undefined) {
+            pageProxyRef.current.Widgets[widgetName][key] = newProps[key];
+          }
+        });
       });
     }
 
     // Content ready callback
     function onContentReady() {
-      if (pageContext.onReady) {
-        pageContext.onReady();
-      }
-      if (appContext !== null && appContext !== void 0 && appContext.onPageReady && pageContext.componentType === "PAGE") {
-        appContext.onPageReady(pageContext.componentName, pageProxyRef.current, undefined);
-      }
-      return Promise.resolve();
+      return _onContentReady.apply(this, arguments);
     }
-    function executeStartup() {
-      return _executeStartup.apply(this, arguments);
-    } // Update pageContext.appLocale when i18n.appLocale changes
-    function _executeStartup() {
-      _executeStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    function _onContentReady() {
+      _onContentReady = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
         return _regenerator["default"].wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              appContext === null || appContext === void 0 || appContext.executeStartAppOperations();
+              if (!pageContext.onReady) {
+                _context4.next = 3;
+                break;
+              }
               _context4.next = 3;
-              return executeStartupOperations(pageContext.Variables, pageContext.Actions);
+              return pageContext.onReady();
             case 3:
+              if (appContext !== null && appContext !== void 0 && appContext.onPageReady && pageContext.componentType === "PAGE") {
+                appContext.onPageReady(pageContext.componentName, pageProxyRef.current, undefined);
+              }
+              return _context4.abrupt("return", Promise.resolve());
+            case 5:
             case "end":
               return _context4.stop();
           }
         }, _callee4);
       }));
+      return _onContentReady.apply(this, arguments);
+    }
+    function executeStartup() {
+      return _executeStartup.apply(this, arguments);
+    }
+    function _executeStartup() {
+      _executeStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+        return _regenerator["default"].wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return appContext === null || appContext === void 0 ? void 0 : appContext.executeStartAppOperations();
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      }));
       return _executeStartup.apply(this, arguments);
     }
+    function executePageStartup() {
+      return _executePageStartup.apply(this, arguments);
+    } // Update pageContext.appLocale when i18n.appLocale changes
+    function _executePageStartup() {
+      _executePageStartup = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+        return _regenerator["default"].wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return executeStartupOperations(pageContext.Variables, pageContext.Actions);
+            case 2:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6);
+      }));
+      return _executePageStartup.apply(this, arguments);
+    }
     (0, _react.useEffect)(function () {
       var newAppLocale = (0, _merge["default"])({}, i18n.appLocale || {}, (prefabInfo === null || prefabInfo === void 0 ? void 0 : prefabInfo.appLocale) || {});
       if (!(0, _isEqual["default"])(pageContext.appLocale, newAppLocale)) {
@@ -643,49 +718,98 @@ var withPageContext = exports.withPageContext = function withPageContext(Wrapped
             appLocale: newAppLocale
           });
         });
-        pageContextRef.current.App.appLocale = newAppLocale;
+        pageProxyRef.current.App.appLocale = newAppLocale;
       }
     }, [i18n.appLocale]);
-    var onContentReadyCalledRef = (0, _react.useRef)(false);
     var onStartupCompletedRef = (0, _react.useRef)(false);
-    // Call onContentReady when startup operations are complete
+    var _useState3 = (0, _react.useState)(false),
+      isPageReady = _useState3[0],
+      setIsPageReady = _useState3[1];
+
+    // Callback for when page component signals it's ready
+    // This is called by usePageReady() hook in the page component
+    var handlePageReady = (0, _react.useCallback)(function () {
+      setIsPageReady(true);
+    }, []);
+
+    // Register the callback at module level so usePageReady() can call it
+    // Uses componentName as key to avoid conflicts between pages/partials/prefabs
+    var componentName = componentInfo === null || componentInfo === void 0 ? void 0 : componentInfo.componentName;
     (0, _react.useEffect)(function () {
-      if (isInitialized && isMountedRef.current && !onContentReadyCalledRef.current && pageProxyRef.current) {
-        // Mark as called before invoking to prevent duplicate calls
-        onContentReadyCalledRef.current = true;
-
-        // 1. First RAF: waits for browser to schedule the next paint
-        // 2. Second RAF: waits for the paint to complete and any nested renders
-        // This is a reliable pattern to ensure component is fully rendered
-        requestAnimationFrame(function () {
-          if (!isMountedRef.current) return;
-          requestAnimationFrame(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      if (!componentName) return;
+      pageReadyCallbacks.set(componentName, handlePageReady);
+
+      // Check if child already signalled ready before this effect ran
+      if (pageReadySignalled.has(componentName)) {
+        handlePageReady();
+      }
+      return function () {
+        pageReadyCallbacks["delete"](componentName);
+        pageReadySignalled["delete"](componentName);
+      };
+    }, [componentName, handlePageReady]);
+
+    // Execute startup when both conditions are met:
+    // 1. Page is initialized (context ready)
+    // 2. Page component has signaled ready (widgets have rendered and subscribed)
+    (0, _react.useEffect)(function () {
+      if (isInitialized && isPageReady && isMountedRef.current && !onStartupCompletedRef.current && pageProxyRef.current) {
+        var runStartup = /*#__PURE__*/function () {
+          var _ref11 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
             return _regenerator["default"].wrap(function _callee3$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
-                  if (!(isMountedRef.current && pageProxyRef.current)) {
-                    _context3.next = 6;
+                  if (isMountedRef.current) {
+                    _context3.next = 2;
                     break;
                   }
-                  _context3.next = 3;
-                  return onContentReady();
-                case 3:
-                  _context3.next = 5;
+                  return _context3.abrupt("return");
+                case 2:
+                  _context3.next = 4;
                   return executeStartup();
-                case 5:
-                  onStartupCompletedRef.current = true;
+                case 4:
+                  _context3.next = 6;
+                  return onContentReady();
                 case 6:
+                  _context3.next = 8;
+                  return executePageStartup();
+                case 8:
+                  onStartupCompletedRef.current = true;
+                  // Handle pending accordion expansion from navigation using Redux
+                  if (pendingAccordionExpansion) {
+                    setTimeout(function () {
+                      try {
+                        var _pageProxyRef$current2;
+                        if ((_pageProxyRef$current2 = pageProxyRef.current) !== null && _pageProxyRef$current2 !== void 0 && (_pageProxyRef$current2 = _pageProxyRef$current2.Widgets) !== null && _pageProxyRef$current2 !== void 0 && (_pageProxyRef$current2 = _pageProxyRef$current2[pendingAccordionExpansion]) !== null && _pageProxyRef$current2 !== void 0 && _pageProxyRef$current2.expand) {
+                          pageProxyRef.current.Widgets[pendingAccordionExpansion].expand();
+                        } else {
+                          console.warn("Accordion widget not found: ".concat(pendingAccordionExpansion));
+                        }
+                      } catch (error) {
+                        console.warn("Unable to expand accordion: ".concat(pendingAccordionExpansion), error);
+                      } finally {
+                        dispatch((0, _navigationSlice.clearPendingAccordionExpansion)());
+                      }
+                    }, 0);
+                  }
+                case 10:
                 case "end":
                   return _context3.stop();
               }
             }, _callee3);
-          })));
-        });
+          }));
+          return function runStartup() {
+            return _ref11.apply(this, arguments);
+          };
+        }();
+        runStartup();
       }
-    }, [isInitialized]);
+    }, [isInitialized, isPageReady]);
     (0, _react.useEffect)(function () {
       return function () {
         isMountedRef.current = false;
+        // Cleanup viewport service when component unmounts
+        _viewport.viewportService.destroy();
       };
     }, []);