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

package/core/constants/events.js

@@ -8,9 +8,15 @@ exports.EVENTEMITTER_METHODS = void 0;
 var _events = _interopRequireDefault(require("events"));
 var partialStateSyncEmitter = new _events["default"]();
 var prefabStateSyncEmitter = new _events["default"]();
+var childFormEmitter = new _events["default"]();
 var EVENTEMITTER = {
   PARTIAL_STATE_SYNC: "partial-state-sync",
-  PREFAB_STATE_SYNC: "prefab-state-sync"
+  PREFAB_STATE_SYNC: "prefab-state-sync",
+  CHILD_FORM_RELATIONSHIP: "child-form-relationship",
+  CHILD_FORM_DATA_UPDATE: "child-form-data-update",
+  CHILD_FORM_UNREGISTER: "child-form-unregister",
+  PARENT_FORM_EXTERNAL_DATA_CHANGE: "parent-form-external-data-change",
+  CHILD_FORM_FIELD_REGISTER: "child-form-field-register"
 };
 var EVENTEMITTER_METHODS = exports.EVENTEMITTER_METHODS = {
   PREFAB_STATE_SYNC_ON: function PREFAB_STATE_SYNC_ON() {
@@ -36,5 +42,55 @@ var EVENTEMITTER_METHODS = exports.EVENTEMITTER_METHODS = {
   },
   PARTIAL_STATE_SYNC_EMIT: function PARTIAL_STATE_SYNC_EMIT(data) {
     return partialStateSyncEmitter.emit(EVENTEMITTER.PARTIAL_STATE_SYNC, data);
+  },
+  // Consolidated bidirectional relationship management
+  CHILD_FORM_RELATIONSHIP_ON: function CHILD_FORM_RELATIONSHIP_ON(formName, callback) {
+    var isParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var widgetId = arguments.length > 3 ? arguments[3] : undefined;
+    var isRegistration = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    // For registration events, parent listens without widget ID, child listens with widget ID
+    var eventName = isParent ? isRegistration ? "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName, "_parent") : "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName).concat(widgetId ? "_".concat(widgetId) : "", "_parent") : "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName).concat(widgetId ? "_".concat(widgetId) : "", "_child");
+    childFormEmitter.on(eventName, callback);
+    return function () {
+      return childFormEmitter.off(eventName, callback);
+    };
+  },
+  CHILD_FORM_RELATIONSHIP_EMIT: function CHILD_FORM_RELATIONSHIP_EMIT(formName, data) {
+    var isParent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var widgetId = arguments.length > 3 ? arguments[3] : undefined;
+    var isRegistration = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    // For registration events, child emits without widget ID, parent emits with child's widget ID
+    var eventName = isParent ? isRegistration ? "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName, "_parent") : "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName).concat(widgetId ? "_".concat(widgetId) : "", "_parent") : "".concat(EVENTEMITTER.CHILD_FORM_RELATIONSHIP, "_").concat(formName).concat(widgetId ? "_".concat(widgetId) : "", "_child");
+    return childFormEmitter.emit(eventName, data);
+  },
+  // Data update events (kept separate as they have different flow)
+  CHILD_FORM_DATA_UPDATE_ON: function CHILD_FORM_DATA_UPDATE_ON(parentFormName, callback) {
+    childFormEmitter.on("".concat(EVENTEMITTER.CHILD_FORM_DATA_UPDATE, "_").concat(parentFormName), callback);
+    return function () {
+      return childFormEmitter.off("".concat(EVENTEMITTER.CHILD_FORM_DATA_UPDATE, "_").concat(parentFormName), callback);
+    };
+  },
+  CHILD_FORM_DATA_UPDATE_EMIT: function CHILD_FORM_DATA_UPDATE_EMIT(parentFormName, data) {
+    return childFormEmitter.emit("".concat(EVENTEMITTER.CHILD_FORM_DATA_UPDATE, "_").concat(parentFormName), data);
+  },
+  // External data changes (kept separate as it's broadcast)
+  PARENT_FORM_EXTERNAL_DATA_CHANGE_ON: function PARENT_FORM_EXTERNAL_DATA_CHANGE_ON(callback) {
+    childFormEmitter.on(EVENTEMITTER.PARENT_FORM_EXTERNAL_DATA_CHANGE, callback);
+    return function () {
+      childFormEmitter.off(EVENTEMITTER.PARENT_FORM_EXTERNAL_DATA_CHANGE, callback);
+    };
+  },
+  PARENT_FORM_EXTERNAL_DATA_CHANGE_EMIT: function PARENT_FORM_EXTERNAL_DATA_CHANGE_EMIT(data) {
+    return childFormEmitter.emit(EVENTEMITTER.PARENT_FORM_EXTERNAL_DATA_CHANGE, data);
+  },
+  // Child form field registration events (for prefab forms with parent forms)
+  CHILD_FORM_FIELD_REGISTER_ON: function CHILD_FORM_FIELD_REGISTER_ON(parentFormName, callback) {
+    childFormEmitter.on("".concat(EVENTEMITTER.CHILD_FORM_FIELD_REGISTER, "_").concat(parentFormName), callback);
+    return function () {
+      return childFormEmitter.off("".concat(EVENTEMITTER.CHILD_FORM_FIELD_REGISTER, "_").concat(parentFormName), callback);
+    };
+  },
+  CHILD_FORM_FIELD_REGISTER_EMIT: function CHILD_FORM_FIELD_REGISTER_EMIT(parentFormName, data) {
+    return childFormEmitter.emit("".concat(EVENTEMITTER.CHILD_FORM_FIELD_REGISTER, "_").concat(parentFormName), data);
   }
 };

package/core/dialog.service.js

@@ -13,7 +13,7 @@ var DialogService = /*#__PURE__*/function () {
     (0, _classCallCheck2["default"])(this, DialogService);
     (0, _defineProperty2["default"])(this, "dialogs", new Map());
   }
-  (0, _createClass2["default"])(DialogService, [{
+  return (0, _createClass2["default"])(DialogService, [{
     key: "registerDialog",
     value: function registerDialog(name, dialogInstance) {
       this.dialogs.set(name, dialogInstance);
@@ -70,7 +70,6 @@ var DialogService = /*#__PURE__*/function () {
       this.dialogs.clear();
     }
   }]);
-  return DialogService;
 }(); // Create a singleton instance
 var dialogService = new DialogService();
 var _default = exports["default"] = dialogService;

package/core/event-notifier.js

@@ -20,7 +20,7 @@ var EventNotifier = exports["default"] = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "parent", EventNotifier.ROOT);
     (0, _defineProperty2["default"])(this, "children", []);
   }
-  (0, _createClass2["default"])(EventNotifier, [{
+  return (0, _createClass2["default"])(EventNotifier, [{
     key: "setParent",
     value: function setParent(parent) {
       if (parent !== this.parent) {
@@ -122,7 +122,6 @@ var EventNotifier = exports["default"] = /*#__PURE__*/function () {
       this.listeners = {};
     }
   }]);
-  return EventNotifier;
 }();
 _EventNotifier = EventNotifier;
 (0, _defineProperty2["default"])(EventNotifier, "ROOT", new _EventNotifier());

package/core/formatter/array-formatters.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterFormatter = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _isObject = _interopRequireDefault(require("lodash-es/isObject"));
+var _includes = _interopRequireDefault(require("lodash-es/includes"));
+var _filter = _interopRequireDefault(require("lodash-es/filter"));
+var FilterFormatter = exports.FilterFormatter = /*#__PURE__*/function () {
+  function FilterFormatter() {
+    (0, _classCallCheck2["default"])(this, FilterFormatter);
+  }
+  return (0, _createClass2["default"])(FilterFormatter, [{
+    key: "format",
+    value: function format(data, field, value) {
+      if (!data) {
+        return [];
+      }
+      // If object is passed as first parameter
+      if ((0, _isObject["default"])(field)) {
+        return (0, _filter["default"])(data, field);
+      }
+      // If key value pair is provided
+      return (0, _filter["default"])(data, function (item) {
+        return (0, _includes["default"])(item[field], value);
+      });
+    }
+  }]);
+}();

package/core/formatter/date-formatters.js

@@ -18,7 +18,7 @@ var DateToStringFormatter = exports.DateToStringFormatter = /*#__PURE__*/functio
   function DateToStringFormatter() {
     (0, _classCallCheck2["default"])(this, DateToStringFormatter);
   }
-  (0, _createClass2["default"])(DateToStringFormatter, [{
+  return (0, _createClass2["default"])(DateToStringFormatter, [{
     key: "format",
     value: function format(input, _format) {
       if (!input && input !== 0) return "";
@@ -196,13 +196,12 @@ var DateToStringFormatter = exports.DateToStringFormatter = /*#__PURE__*/functio
       return null; // Couldn't reconstruct a valid date
     }
   }]);
-  return DateToStringFormatter;
 }();
 var TimeFromNowFormatter = exports.TimeFromNowFormatter = /*#__PURE__*/function () {
   function TimeFromNowFormatter() {
     (0, _classCallCheck2["default"])(this, TimeFromNowFormatter);
   }
-  (0, _createClass2["default"])(TimeFromNowFormatter, [{
+  return (0, _createClass2["default"])(TimeFromNowFormatter, [{
     key: "format",
     value: function format(timestamp) {
       if (!timestamp && timestamp !== 0) return "";
@@ -218,5 +217,4 @@ var TimeFromNowFormatter = exports.TimeFromNowFormatter = /*#__PURE__*/function
       return _moment.isValid() ? _moment.fromNow() : "";
     }
   }]);
-  return TimeFromNowFormatter;
 }();

package/core/formatter/index.js

@@ -73,6 +73,7 @@ Object.keys(_securityFormatters).forEach(function (key) {
     }
   });
 });
+var _arrayFormatters = require("./array-formatters");
 // Export all types
 
 // Export all formatters
@@ -99,7 +100,7 @@ var formatters = new Map([
 // String formatters
 ["prefix", createFormatter("prefix", new _stringFormatters.PrependFormatter())], ["suffix", createFormatter("suffix", new _stringFormatters.AppendFormatter())], ["templateReplace", createFormatter("templateReplace", new _stringFormatters.TemplateReplaceFormatter())],
 // Security formatters
-["trustAs", createFormatter("trustAs", new _securityFormatters.TrustAsFormatter())], ["sanitize", createFormatter("sanitize", new _securityFormatters.SanitizeFormatter())]]);
+["trustAs", createFormatter("trustAs", new _securityFormatters.TrustAsFormatter())], ["sanitize", createFormatter("sanitize", new _securityFormatters.SanitizeFormatter())], ["filter", createFormatter("filter", new _arrayFormatters.FilterFormatter())]]);
 
 // Export the formatters registry
 var _default = exports["default"] = formatters; // Export utility functions

package/core/formatter/number-formatters.js

@@ -14,7 +14,7 @@ var NumberToStringFormatter = exports.NumberToStringFormatter = /*#__PURE__*/fun
   function NumberToStringFormatter() {
     (0, _classCallCheck2["default"])(this, NumberToStringFormatter);
   }
-  (0, _createClass2["default"])(NumberToStringFormatter, [{
+  return (0, _createClass2["default"])(NumberToStringFormatter, [{
     key: "format",
     value: function format(input, fractionSize) {
       var i18nService = _appstore["default"].I18nService.get();
@@ -26,13 +26,12 @@ var NumberToStringFormatter = exports.NumberToStringFormatter = /*#__PURE__*/fun
       return isNaN(input) ? "" : formatCurrency.format(input);
     }
   }]);
-  return NumberToStringFormatter;
 }();
 var CurrencyFormatter = exports.CurrencyFormatter = /*#__PURE__*/function () {
   function CurrencyFormatter() {
     (0, _classCallCheck2["default"])(this, CurrencyFormatter);
   }
-  (0, _createClass2["default"])(CurrencyFormatter, [{
+  return (0, _createClass2["default"])(CurrencyFormatter, [{
     key: "format",
     value: function format(data, currencySymbol, fracSize) {
       var _currencySymbol = (_currencyConstant["default"][currencySymbol] || {}).symbol || currencySymbol || "";
@@ -44,25 +43,23 @@ var CurrencyFormatter = exports.CurrencyFormatter = /*#__PURE__*/function () {
       return _val ? isNegativeNumber ? "-" + _currencySymbol + _val : _currencySymbol + _val : "";
     }
   }]);
-  return CurrencyFormatter;
 }();
 var StringToNumberFormatter = exports.StringToNumberFormatter = /*#__PURE__*/function () {
   function StringToNumberFormatter() {
     (0, _classCallCheck2["default"])(this, StringToNumberFormatter);
   }
-  (0, _createClass2["default"])(StringToNumberFormatter, [{
+  return (0, _createClass2["default"])(StringToNumberFormatter, [{
     key: "format",
     value: function format(input) {
       return (0, _parseInt["default"])(input);
     }
   }]);
-  return StringToNumberFormatter;
 }();
 var ToNumberFormatter = exports.ToNumberFormatter = /*#__PURE__*/function () {
   function ToNumberFormatter() {
     (0, _classCallCheck2["default"])(this, ToNumberFormatter);
   }
-  (0, _createClass2["default"])(ToNumberFormatter, [{
+  return (0, _createClass2["default"])(ToNumberFormatter, [{
     key: "format",
     value: function format(data, fracSize) {
       if (isNaN(+data)) {
@@ -104,13 +101,12 @@ var ToNumberFormatter = exports.ToNumberFormatter = /*#__PURE__*/function () {
       }
     }
   }]);
-  return ToNumberFormatter;
 }();
 var TrailingZeroDecimalFormatter = exports.TrailingZeroDecimalFormatter = /*#__PURE__*/function () {
   function TrailingZeroDecimalFormatter() {
     (0, _classCallCheck2["default"])(this, TrailingZeroDecimalFormatter);
   }
-  (0, _createClass2["default"])(TrailingZeroDecimalFormatter, [{
+  return (0, _createClass2["default"])(TrailingZeroDecimalFormatter, [{
     key: "format",
     value: function format(value, selectedLocale, numberFilter, localeFilter, trailingZero, decimalValue, skipTrailingZeroCheck, formattedLocale) {
       var finalNumberFilter = trailingZero && !skipTrailingZeroCheck ? "1.".concat((decimalValue === null || decimalValue === void 0 ? void 0 : decimalValue.length) || 0, "-16") : numberFilter;
@@ -138,5 +134,4 @@ var TrailingZeroDecimalFormatter = exports.TrailingZeroDecimalFormatter = /*#__P
       }
     }
   }]);
-  return TrailingZeroDecimalFormatter;
 }();

package/core/formatter/security-formatters.js

@@ -18,7 +18,7 @@ var TrustAsFormatter = exports.TrustAsFormatter = /*#__PURE__*/function () {
   function TrustAsFormatter() {
     (0, _classCallCheck2["default"])(this, TrustAsFormatter);
   }
-  (0, _createClass2["default"])(TrustAsFormatter, [{
+  return (0, _createClass2["default"])(TrustAsFormatter, [{
     key: "format",
     value: function format(content) {
       var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "html";
@@ -138,13 +138,12 @@ var TrustAsFormatter = exports.TrustAsFormatter = /*#__PURE__*/function () {
       return null;
     }
   }]);
-  return TrustAsFormatter;
 }();
 var SanitizeFormatter = exports.SanitizeFormatter = /*#__PURE__*/function () {
   function SanitizeFormatter() {
     (0, _classCallCheck2["default"])(this, SanitizeFormatter);
   }
-  (0, _createClass2["default"])(SanitizeFormatter, [{
+  return (0, _createClass2["default"])(SanitizeFormatter, [{
     key: "format",
     value: function format(input) {
       var sanitizeType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "html";
@@ -287,7 +286,6 @@ var SanitizeFormatter = exports.SanitizeFormatter = /*#__PURE__*/function () {
       }
     }
   }]);
-  return SanitizeFormatter;
 }(); // React utility component to safely render trusted content
 var TrustedContent = exports.TrustedContent = function TrustedContent(_ref) {
   var value = _ref.value,

package/core/formatter/string-formatters.js

@@ -12,31 +12,29 @@ var PrependFormatter = exports.PrependFormatter = /*#__PURE__*/function () {
   function PrependFormatter() {
     (0, _classCallCheck2["default"])(this, PrependFormatter);
   }
-  (0, _createClass2["default"])(PrependFormatter, [{
+  return (0, _createClass2["default"])(PrependFormatter, [{
     key: "format",
     value: function format(input, prefix) {
       return (prefix || "") + (input !== null || input != undefined ? input : "");
     }
   }]);
-  return PrependFormatter;
 }();
 var AppendFormatter = exports.AppendFormatter = /*#__PURE__*/function () {
   function AppendFormatter() {
     (0, _classCallCheck2["default"])(this, AppendFormatter);
   }
-  (0, _createClass2["default"])(AppendFormatter, [{
+  return (0, _createClass2["default"])(AppendFormatter, [{
     key: "format",
     value: function format(input, suffix) {
       return (input !== null || input != undefined ? input : "") + (suffix || "");
     }
   }]);
-  return AppendFormatter;
 }();
 var TemplateReplaceFormatter = exports.TemplateReplaceFormatter = /*#__PURE__*/function () {
   function TemplateReplaceFormatter() {
     (0, _classCallCheck2["default"])(this, TemplateReplaceFormatter);
   }
-  (0, _createClass2["default"])(TemplateReplaceFormatter, [{
+  return (0, _createClass2["default"])(TemplateReplaceFormatter, [{
     key: "format",
     value: function format(template, replacements) {
       if (!template) return template;
@@ -48,5 +46,4 @@ var TemplateReplaceFormatter = exports.TemplateReplaceFormatter = /*#__PURE__*/f
       }
     }
   }]);
-  return TemplateReplaceFormatter;
 }();

package/core/proxy-service.js

@@ -8,9 +8,12 @@ exports.createWidgetProxy = exports.createStateProxy = exports.createPageProxy =
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _scriptRegistry = require("@wavemaker/react-runtime/core/script-registry");
 var _dom = require("@wavemaker/react-runtime/core/util/dom");
 var _widgetObserver = require("@wavemaker/react-runtime/core/widget-observer");
+var _serviceVariable = require("../variables/service-variable");
+var _events = require("../core/constants/events");
+var _isEqual = _interopRequireDefault(require("lodash-es/isEqual"));
+var _liveVariable = _interopRequireDefault(require("../variables/live-variable"));
 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; }
 // WeakMap to store proxy flags without exposing them as props
@@ -19,6 +22,9 @@ var proxyMap = new WeakMap();
 // Store the original target for each proxy
 var originalTargets = new WeakMap();
 
+// Store previous formdata values to detect changes
+var previousFormData = new WeakMap();
+
 // Array methods that mutate the array and should trigger updates
 var MUTATING_ARRAY_METHODS = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse", "fill", "copyWithin", "put"];
 
@@ -129,7 +135,7 @@ var createStateArrayProxy = function createStateArrayProxy(array, path, propName
   proxyMap.set(arrayProxy, true);
   return arrayProxy;
 };
-var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(widget, widgetName, setPageContext) {
+var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(widget, widgetName, setPageContext, overriddenPropsRegistry) {
   // If widget is already a proxy or is a DOM element, return it directly
   if (proxyMap.has(widget) || (0, _dom.isDOMElement)(widget)) {
     return widget;
@@ -147,10 +153,34 @@ var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(w
         return true;
       }
 
+      // Special handling for formdata changes - emit parent form change event
+      // Only emit for widgets that are likely forms and have meaningful data changes
+      if (prop === "formdata") {
+        var prevData = previousFormData.get(target);
+        var hasChanged = value && (!prevData || !(0, _isEqual["default"])(prevData, value));
+
+        // Only emit if there's a meaningful change (not null/undefined to null/undefined)
+        if (hasChanged && (value || prevData)) {
+          // Update stored previous value
+          previousFormData.set(target, value);
+
+          // Emit parent form external data change event
+          // This will be received by child forms listening for their parent changes
+          _events.EVENTEMITTER_METHODS.PARENT_FORM_EXTERNAL_DATA_CHANGE_EMIT({
+            parentFormName: widgetName,
+            formData: value,
+            timestamp: Date.now()
+          });
+        }
+      }
+
       // track script-modified properties
       if (typeof prop === "string") {
         var widgetId = widget["data-widget-id"];
-        (0, _scriptRegistry.trackOverriddenProps)(widgetName, prop, value, widgetId);
+        // Use page-specific registry if provided, otherwise fallback to global
+        if (overriddenPropsRegistry && typeof overriddenPropsRegistry.trackOverriddenProps === "function") {
+          overriddenPropsRegistry.trackOverriddenProps(widgetName, prop, value, widgetId);
+        }
       }
       Reflect.set(target, prop, value, receiver);
       setPageContext(function (prevContext) {
@@ -167,6 +197,10 @@ var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(w
           }
           // If widget-id doesn't match, don't update context
           return prevContext;
+        } else {
+          return _objectSpread(_objectSpread({}, prevContext), {}, {
+            Widgets: _objectSpread(_objectSpread({}, prevContext.Widgets), {}, (0, _defineProperty2["default"])({}, widgetName, _objectSpread(_objectSpread({}, prevContext.Widgets[widgetName]), {}, (0, _defineProperty2["default"])({}, prop, value))))
+          });
         }
 
         // No widget-id present, don't update
@@ -244,9 +278,17 @@ var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(w
         return null;
       }
       var value = Reflect.get(target, prop, receiver);
+
+      // Check for non-configurable, non-writable properties - must return actual value
+      // to satisfy JavaScript Proxy invariants (prevents "get on proxy" errors)
+      var descriptor = Object.getOwnPropertyDescriptor(target, prop);
+      if (descriptor && !descriptor.configurable && !descriptor.writable) {
+        return value;
+      }
       var widgetId = widget["data-widget-id"];
-      var widgetOverrides = (0, _scriptRegistry.getWidgetOverrides)(widgetName, widgetId);
-      if (prop in widgetOverrides) {
+      // Use page-specific registry if provided, otherwise fallback to global
+      var widgetOverrides = overriddenPropsRegistry === null || overriddenPropsRegistry === void 0 ? void 0 : overriddenPropsRegistry.getWidgetOverrides(widgetName, widgetId);
+      if (widgetOverrides && prop in widgetOverrides) {
         return widgetOverrides[prop];
       }
 
@@ -269,7 +311,7 @@ var createWidgetProxy = exports.createWidgetProxy = function createWidgetProxy(w
   originalTargets.set(proxy, widget);
   return proxy;
 };
-var createPageProxy = exports.createPageProxy = function createPageProxy(target, setPageContext) {
+var createPageProxy = exports.createPageProxy = function createPageProxy(target, setPageContext, overriddenPropsRegistry) {
   // Cache for widget proxies
   var widgetProxies = new Map();
   return new Proxy(target, {
@@ -312,7 +354,7 @@ var createPageProxy = exports.createPageProxy = function createPageProxy(target,
       }
 
       // Create and cache a new proxy
-      var proxy = createWidgetProxy(widget, widgetName, setPageContext);
+      var proxy = createWidgetProxy(widget, widgetName, setPageContext, overriddenPropsRegistry);
       widgetProxies.set(widgetName, proxy);
       return proxy;
     },
@@ -347,21 +389,21 @@ var createPageProxy = exports.createPageProxy = function createPageProxy(target,
         }
       } else if (widgetValue && (0, _typeof2["default"])(widgetValue) === "object") {
         // Create a new proxy
-        var _proxy2 = createWidgetProxy(widgetValue, widgetName, setPageContext);
+        var _proxy2 = createWidgetProxy(widgetValue, widgetName, setPageContext, overriddenPropsRegistry);
         widgetProxies.set(widgetName, _proxy2);
       }
       return true;
     }
   });
 };
-var createStateProxy = exports.createStateProxy = function createStateProxy(obj) {
+var _createStateProxy = exports.createStateProxy = function createStateProxy(obj) {
   var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var setPageContext = arguments.length > 2 ? arguments[2] : undefined;
+  var overriddenPropsRegistry = arguments.length > 3 ? arguments[3] : undefined;
   // Cache for nested proxies
   var nestedProxies = new Map();
   return new Proxy(obj, {
     get: function get(target, prop, receiver) {
-      var _value$constructor;
       if (prop === "eval") {
         return function (fn) {
           var failOnError = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
@@ -375,10 +417,16 @@ var createStateProxy = exports.createStateProxy = function createStateProxy(obj)
       }
       if (prop === "Widgets" && path.length === 0) {
         if (!nestedProxies.has("Widgets")) {
-          nestedProxies.set("Widgets", createPageProxy(target.Widgets, setPageContext));
+          nestedProxies.set("Widgets", createPageProxy(target.Widgets, setPageContext, overriddenPropsRegistry));
         }
         return nestedProxies.get("Widgets");
       }
+      if (prop === "Variables" && path.length === 0) {
+        if (!nestedProxies.has("Variables")) {
+          nestedProxies.set("Variables", _createStateProxy(target.Variables, ["Variables"], setPageContext, overriddenPropsRegistry));
+        }
+        return nestedProxies.get("Variables");
+      }
 
       // Do not auto-create missing properties; just return undefined
       if (!(prop in target)) {
@@ -390,7 +438,14 @@ var createStateProxy = exports.createStateProxy = function createStateProxy(obj)
       if ((0, _typeof2["default"])(value) !== "object" || value === null) {
         return value;
       }
-      if ((value === null || value === void 0 || (_value$constructor = value.constructor) === null || _value$constructor === void 0 ? void 0 : _value$constructor.name) === "ServiceVariable") {
+
+      // Check for non-configurable, non-writable properties - must return actual value
+      // to satisfy JavaScript Proxy invariants (prevents "get on proxy" errors)
+      var descriptor = Object.getOwnPropertyDescriptor(target, prop);
+      if (descriptor && !descriptor.configurable && !descriptor.writable) {
+        return value;
+      }
+      if (value instanceof _serviceVariable.ServiceVariable || value instanceof _liveVariable["default"]) {
         return value;
       }
 
@@ -398,6 +453,9 @@ var createStateProxy = exports.createStateProxy = function createStateProxy(obj)
       if ((0, _dom.isDOMElement)(value)) {
         return value;
       }
+      if (value instanceof Map) {
+        return value;
+      }
 
       // Return array proxy to preserve native array behavior while enabling reactivity
       if (Array.isArray(value)) {
@@ -408,9 +466,14 @@ var createStateProxy = exports.createStateProxy = function createStateProxy(obj)
       if (nestedProxies.has(prop)) {
         return nestedProxies.get(prop);
       }
+      if (target !== null && target !== void 0 && target.prefab) {
+        if (nestedProxies.has(target.name)) {
+          return nestedProxies.get(target.name)[prop];
+        }
+      }
 
       // Create and cache a new nested proxy
-      var nestedProxy = createStateProxy(value, [].concat((0, _toConsumableArray2["default"])(path), [prop]), setPageContext);
+      var nestedProxy = _createStateProxy(value, [].concat((0, _toConsumableArray2["default"])(path), [prop]), setPageContext, overriddenPropsRegistry);
       nestedProxies.set(prop, nestedProxy);
       return nestedProxy;
     },
@@ -428,6 +491,14 @@ var createStateProxy = exports.createStateProxy = function createStateProxy(obj)
       if ((0, _typeof2["default"])(value) === "object" && value !== null && !Array.isArray(value) && nestedProxies.has(prop)) {
         nestedProxies["delete"](prop);
       }
+      if (target !== null && target !== void 0 && target.prefab) {
+        if (nestedProxies.has(target.name)) {
+          var existingProxy = nestedProxies.get(target.name);
+          existingProxy[prop] = value;
+        } else {
+          nestedProxies.set(target.name, createWidgetProxy(target, target.name, setPageContext));
+        }
+      }
       setPageContext(function (prev) {
         // Create minimal copies along path
         var newState = _objectSpread({}, prev);