@wavemaker-ai/react-runtime 1.0.0-rc.322 → 1.0.0-rc.326

package/components/navbar/index.js

@@ -38,7 +38,7 @@ import Link from "@mui/material/Link";
 import {
   withBaseWrapper
 } from "../../higherOrder/withBaseWrapper";
-import { WmButton } from "../form/button";
+import { WmAppIcon } from "../common/WmAppIcon";
 import { removeInvalidAttributes } from "../../utils/attr";
 const DEFAULT_CLASS = "navbar navbar-default app-navbar";
 const WmNavbar = memo(
@@ -51,6 +51,8 @@ const WmNavbar = memo(
       title,
       brandHref = "#",
       showToggle = true,
+      menuiconclass = "wi wi-more-vert",
+      menuiconurl,
       listener
     } = _a, restProps = __objRest(_a, [
       "className",
@@ -60,6 +62,8 @@ const WmNavbar = memo(
       "title",
       "brandHref",
       "showToggle",
+      "menuiconclass",
+      "menuiconurl",
       "listener"
     ]);
     const [isCollapsed, setIsCollapsed] = useState(true);
@@ -83,16 +87,26 @@ const WmNavbar = memo(
       }, removeInvalidAttributes(restProps)), {
         children: /* @__PURE__ */ jsxs(Box, { component: "div", className: "container-fluid", children: [
           /* @__PURE__ */ jsxs(Box, { component: "div", className: "navbar-header", children: [
-            showToggle && /* @__PURE__ */ jsx(
-              WmButton,
+            showToggle && /* @__PURE__ */ jsxs(
+              "button",
               {
-                name: "navbar-toggle",
                 type: "button",
                 className: clsx("btn-transparent navbar-toggle", { collapsed: isCollapsed }),
                 onClick: handleToggle,
-                arialabel: "Toggle navigation",
-                iconclass: "wi wi-more-vert",
-                listener
+                "aria-label": "Toggle navigation",
+                "aria-expanded": !isCollapsed,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle navigation" }),
+                  /* @__PURE__ */ jsx(
+                    WmAppIcon,
+                    {
+                      iconclass: menuiconclass,
+                      iconurl: menuiconurl,
+                      prefabName: props.prefabName,
+                      alt: "Menu icon"
+                    }
+                  )
+                ]
               }
             ),
             title && /* @__PURE__ */ jsx(Link, { className: "navbar-brand", href: brandHref, underline: "none", children: /* @__PURE__ */ jsx("span", { className: "title", children: title }) })

package/components/navbar/nav/index.d.ts

@@ -88,5 +88,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>>;
 export default _default;

package/components/navbar/nav-item/index.d.ts

@@ -61,5 +61,6 @@ declare const _default: import("react").MemoExoticComponent<import("react").Comp
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>>;
 export default _default;

package/components/navigation/breadcrumb/index.d.ts

@@ -64,5 +64,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/navigation/menu/index.d.ts

@@ -30,10 +30,10 @@ declare const _default: React.ComponentType<{
     loggedInUser?: import("../../../store/slices/authSlice").LoggedInUserConfig | null;
     type?: "button" | "anchor";
     prefabName?: string;
+    caption?: string;
     key?: string;
     loading?: boolean;
     id?: string;
-    caption?: string;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     "data-widget-id"?: string;
     datavalue?: any;
@@ -75,8 +75,10 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     showSkeleton?: boolean;
+    widget?: string;
     orderby?: string;
     iconclass?: string;
+    iconurl?: string;
     onSelect?: ($event: React.MouseEvent<HTMLElement>, widget: any, $item: any) => void;
     shortcutkey?: string;
     iconposition?: string;

package/components/navigation/menu/index.js

@@ -36,6 +36,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
+import { WmAppIcon } from "../../common/WmAppIcon";
 import { transformDataset } from "../../../utils/transformedDataset-utils";
 import {
   POSITION,
@@ -82,6 +83,7 @@ const WmMenu = memo((props) => {
     menuclass,
     linktarget = "_self",
     iconclass,
+    iconurl,
     type = "button",
     animateitems,
     disableMenuContext = false,
@@ -130,6 +132,7 @@ const WmMenu = memo((props) => {
     "menuclass",
     "linktarget",
     "iconclass",
+    "iconurl",
     "type",
     "animateitems",
     "disableMenuContext",
@@ -389,7 +392,7 @@ const WmMenu = memo((props) => {
         icon: ((_d = item.dataObject) == null ? void 0 : _d.icon) || icon,
         link,
         target: (_e = item.dataObject) == null ? void 0 : _e.target
-      }), item == null ? void 0 : item.value);
+      }), typeof (item == null ? void 0 : item.value) === "object" && (item == null ? void 0 : item.value) !== null ? item.value : {});
       if (onSelect) {
         onSelect(event, props, simplifiedItem);
       }
@@ -1009,7 +1012,15 @@ const WmMenu = memo((props) => {
             }
           }, removeInvalidAttributes(restProps)), {
             children: [
-              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              (iconclass || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: `${caption} ${(_c = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _c.LABEL_ICON}` }),
               /* @__PURE__ */ jsx("span", { className: "anchor-caption", children: caption || "" }),
               /* @__PURE__ */ jsx(
@@ -1028,7 +1039,6 @@ const WmMenu = memo((props) => {
           __spreadProps(__spreadValues({
             className: clsx(
               "btn dropdown-toggle",
-              `icon-position-${iconposition}`,
               "app-button",
               menuclass,
               `menu-layout-${menulayout}`,
@@ -1050,7 +1060,15 @@ const WmMenu = memo((props) => {
             }, buttonStyles), menuContainerStyles)
           }, removeInvalidAttributes(restProps)), {
             children: [
-              iconclass && /* @__PURE__ */ jsx("i", { className: clsx("app-icon", iconclass), "aria-hidden": "true" }),
+              (iconclass || iconurl) && /* @__PURE__ */ jsx(
+                WmAppIcon,
+                {
+                  iconclass,
+                  iconurl,
+                  prefabName: props.prefabName,
+                  alt: "Menu icon"
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "btn-caption", children: caption }),
               /* @__PURE__ */ jsx(
                 "span",

package/components/navigation/menu/props.d.ts

@@ -9,6 +9,7 @@ export interface WmMenuProps extends BaseProps {
     menuclass?: string;
     linktarget?: string;
     iconclass?: string;
+    iconurl?: string;
     animateitems?: string;
     disableMenuContext?: boolean;
     showonhover?: boolean;

package/components/navigation/popover/index.d.ts

@@ -95,5 +95,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/navigation/popover/index.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useMemo, Suspense, useCallback } from "react";
+import { useRef, useState, useEffect, useMemo, Suspense, useCallback, useLayoutEffect } from "react";
 import clsx from "clsx";
 import debounce from "lodash-es/debounce";
 import Popover from "@mui/material/Popover";
@@ -33,6 +33,7 @@ const WmPopover = (Props) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const anchorRef = useRef(null);
   const popoverContentRef = useRef(null);
+  const popoverActionsRef = useRef(null);
   const loadedRef = useRef(false);
   const [open, setOpen] = useState(false);
   const isOpen = Boolean(anchorEl);
@@ -62,13 +63,20 @@ const WmPopover = (Props) => {
       openPopover();
     }
   }, [isOpen, openPopover, closePopover]);
+  const apiRef = useRef({
+    open: openPopover,
+    close: closePopover,
+    toggle: togglePopover,
+    isOpen
+  });
+  apiRef.current = { open: openPopover, close: closePopover, toggle: togglePopover, isOpen };
   useEffect(() => {
     const { listener, name } = props;
     if ((listener == null ? void 0 : listener.onChange) && name) {
       listener.onChange(name, {
-        open: openPopover,
-        close: closePopover,
-        toggle: togglePopover,
+        open: () => apiRef.current.open(),
+        close: () => apiRef.current.close(),
+        toggle: () => apiRef.current.toggle(),
         isOpen
       });
     }
@@ -85,7 +93,7 @@ const WmPopover = (Props) => {
     }
     handleLoad(__spreadValues({ isOpen }, props));
   }, [isOpen]);
-  const calculatePlacement = () => {
+  const calculatePlacement = useCallback(() => {
     if (!anchorRef.current) return;
     const rect = anchorRef.current.getBoundingClientRect();
     const viewHeight = window.innerHeight;
@@ -99,7 +107,12 @@ const WmPopover = (Props) => {
     else if (props.popoverplacement === "right" && viewWidth - rect.right < width)
       setPlacement("left");
     else setPlacement(props.popoverplacement || "bottom");
-  };
+  }, [props.popoverplacement, props.popoverheight, props.popoverwidth]);
+  useLayoutEffect(() => {
+    var _a2, _b2;
+    if (!isOpen) return;
+    (_b2 = (_a2 = popoverActionsRef.current) == null ? void 0 : _a2.updatePosition) == null ? void 0 : _b2.call(_a2);
+  }, [props.children]);
   useEffect(() => {
     if (!isOpen || props.autoclose === "disabled") return;
     const handleOutsideClick = (event) => {
@@ -191,7 +204,7 @@ const WmPopover = (Props) => {
     }), {
       marginLeft: "-4px"
     });
-  }, [placement, props.popoverplacement, calculatePlacement]);
+  }, [placement]);
   const popoverHeight = ((_a = props == null ? void 0 : props.popoverheight) == null ? void 0 : _a.includes("px")) ? props == null ? void 0 : props.popoverheight : `${props == null ? void 0 : props.popoverheight}px`;
   const popoverWidth = ((_b = props == null ? void 0 : props.popoverwidth) == null ? void 0 : _b.includes("px")) ? props == null ? void 0 : props.popoverwidth : `${props == null ? void 0 : props.popoverwidth}px`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -202,7 +215,6 @@ const WmPopover = (Props) => {
           "disable-popover": props.disabled,
           "app-popover-wrapper": true
         }),
-        style: props.styles,
         hidden: props.hidden
       }, { name: props.name }), {
         children: /* @__PURE__ */ jsx(
@@ -235,13 +247,15 @@ const WmPopover = (Props) => {
             encodeurl: props.encodeurl,
             shortcutkey: props.shortcutkey,
             name: props.name
-          }
+          },
+          props.name
         )
       })
     ),
     /* @__PURE__ */ jsxs(
       Popover,
       {
+        action: popoverActionsRef,
         hidden: props.hidden,
         open: isOpen,
         anchorEl,

package/components/page/index.js

@@ -38,7 +38,7 @@ import React from "react";
 import { removeInvalidAttributes } from "../../utils/attr";
 import { PageLayoutContext } from "./page-context";
 import { getCurrentPath } from "../../core/util/utils";
-const getDefaultClass = (pageName) => clsx("app-page", pageName ? `app-page-${pageName.toLowerCase()}` : "", "container");
+const getDefaultClass = (pageName) => clsx("app-page", "container");
 function WmPage(props) {
   const pathname = getCurrentPath();
   const pageName = pathname.split("/").pop();

package/components/page/page-content/index.js

@@ -1,10 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
+import { useAppState } from "../../../context/WidgetProvider";
+import { getCurrentPath } from "../../../core/util/utils";
 const DEFAULT_CLASS = "app-page-content app-content-column";
 function WmPageContent(props) {
   const { className, columnwidth, styles, layoutClassName } = props;
-  return /* @__PURE__ */ jsx(
+  const appState = useAppState();
+  const pageName = ((appState == null ? void 0 : appState.componentName) || (appState == null ? void 0 : appState.name) || getCurrentPath().split("/").pop() || "").toLowerCase();
+  return /* @__PURE__ */ jsx("div", { className: "app-content-column-wrapper", children: /* @__PURE__ */ jsx("div", { className: clsx(pageName && `app-page-${pageName}`), style: { display: "inline" }, children: /* @__PURE__ */ jsx(
     "div",
     {
       style: styles,
@@ -16,7 +20,7 @@ function WmPageContent(props) {
       ),
       children: props.children
     }
-  );
+  ) }) });
 }
 WmPageContent.displayName = "WmPageContent";
 var page_content_default = WmPageContent;

package/components/page/partial/index.d.ts

@@ -59,5 +59,6 @@ declare const _default: import("react").ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

package/components/page/partial-container/index.js

@@ -19,6 +19,7 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import React, { memo, useCallback } from "react";
+import clsx from "clsx";
 import Container from "@mui/material/Container";
 import appstore from "../../../core/appstore";
 import isEqual from "lodash-es/isEqual";
@@ -69,7 +70,7 @@ const CodegenPartialContainer = memo((props) => {
     const partial = partials.find((p) => p.name === content);
     return partial ? React.createElement(partial.component, __spreadProps(__spreadValues({}, params), { onLoad: handleOnLoad })) : null;
   };
-  return /* @__PURE__ */ jsx(Container, { className: "partial-container", children: contentToRender() });
+  return /* @__PURE__ */ jsx("div", { className: clsx(content && `app-partial-${content.toLowerCase()}`), children: /* @__PURE__ */ jsx(Container, { className: "partial-container", children: contentToRender() }) });
 }, arePropsEqual);
 CodegenPartialContainer.displayName = "WmPartialContainer";
 const WmPartialContainer = memo((props) => {

package/components/prefab/index.js

@@ -31,6 +31,7 @@ var __objRest = (source, exclude) => {
 };
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
+import clsx from "clsx";
 import { removeInvalidAttributes } from "../../utils/attr";
 const WmPrefab = (props) => {
   const _a = props, {
@@ -69,14 +70,14 @@ const WmPrefab = (props) => {
       }
     };
   }, [onLoad, onDestroy]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: clsx(props.prefabname && `app-prefab-${props.prefabname.toLowerCase()}`), children: /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({}, removeInvalidAttributes(rest, ["hidden"])), {
       style: __spreadValues(__spreadValues(__spreadValues({}, styles), width !== void 0 && { width: parseFloat(width) }), height !== void 0 && { height: parseFloat(height) }),
       ref,
       children
     })
-  );
+  ) });
 };
 var prefab_default = WmPrefab;
 export {

package/components/prefab/props.d.ts

@@ -13,6 +13,7 @@ interface PrefabProps {
     width?: number | string;
     height?: string;
     styles?: React.CSSProperties;
+    prefabname?: string;
 }
 export type WmPrefabProps = Prettify<PrefabProps & BaseProps>;
 export {};

package/context/WidgetProvider.js

@@ -87,10 +87,11 @@ const WidgetProvider = ({
         Object.keys(value.Widgets).forEach((widgetName) => {
           var _a2;
           const currentWidget = newContext.Widgets[widgetName];
-          const incomingWidget = value.Widgets[widgetName];
+          const incomingWidget = proxy.Widgets[widgetName] || value.Widgets[widgetName];
           if (currentWidget == null ? void 0 : currentWidget.App) {
             registerMethod(newContext, (_a2 = pageContextRef.current) == null ? void 0 : _a2.Widgets[widgetName], widgetName);
           } else {
+            if (incomingWidget.__isProxy) return;
             if (!isPage && (incomingWidget == null ? void 0 : incomingWidget.isLayout)) return;
             const registry = value == null ? void 0 : value.overriddenPropsRegistry;
             const widgetProxy = createWidgetProxy(

package/core/appstore.d.ts

@@ -1,8 +1,18 @@
 interface I18nService {
     selectedLocale?: string;
+    messages?: Record<string, string>;
+    formats?: {
+        currency?: string;
+        date?: string;
+        time?: string;
+    };
+    prefabMessages?: Record<string, string>;
     getSelectedLocale: () => string;
     isRTLLocale: (newLocale?: string) => any;
     setRTL: (locale?: string) => any;
+    setSelectedLocale: (locale: string | {
+        datavalue: string;
+    }) => unknown;
 }
 interface DialogServiceInterface {
     registerDialog: (name: string, dialogInstance: any) => void;

package/core/appstore.js

@@ -1,4 +1,7 @@
+import { isObject } from "lodash-es";
 import { getSessionLocaleSafe } from "./util";
+import { store } from "../store";
+import { setSelectedLocaleAndLoadBundle } from "../store/slices/i18nSlice";
 const map = /* @__PURE__ */ new Map();
 const get = (t) => {
   return map.get(t);
@@ -35,12 +38,13 @@ const appstore = {
   remove,
   getDependency,
   getApp,
-  I18nService: getInstance("I18nService"),
+  I18nService: getInstance("i18nService"),
   DialogService: getInstance("DialogService")
 };
 if (!appstore.I18nService.get()) {
   appstore.I18nService.set({
     selectedLocale: getSessionLocaleSafe() || "en",
+    messages: {},
     getSelectedLocale: function() {
       try {
         const sessionLocale = getSessionLocaleSafe();
@@ -63,6 +67,10 @@ if (!appstore.I18nService.get()) {
         const isRTL = (_a = appstore.I18nService.get()) == null ? void 0 : _a.isRTLLocale(locale);
         document.body.style.direction = isRTL ? "rtl" : "ltr";
       }
+    },
+    setSelectedLocale: (locale) => {
+      const localeValue = isObject(locale) ? locale.datavalue : locale;
+      return store.dispatch(setSelectedLocaleAndLoadBundle({ locale: localeValue }));
     }
   });
 }

package/core/constants/events.d.ts

@@ -21,4 +21,7 @@ export declare const EVENTEMITTER_METHODS: {
         layout: Record<string, any>;
         proxy: any;
     }) => boolean;
+    ACTIVE_PAGE_SYNC_ON: (callback: () => void) => EventEmitter<[never]>;
+    ACTIVE_PAGE_SYNC_OFF: (callback: () => void) => EventEmitter<[never]>;
+    ACTIVE_PAGE_SYNC_EMIT: () => boolean;
 };

package/core/constants/events.js

@@ -2,13 +2,16 @@ import EventEmitter from "events";
 const partialStateSyncEmitter = new EventEmitter();
 const prefabStateSyncEmitter = new EventEmitter();
 const layoutSyncEmitter = new EventEmitter();
+const activePageSyncEmitter = new EventEmitter();
 partialStateSyncEmitter.setMaxListeners(50);
 prefabStateSyncEmitter.setMaxListeners(50);
 layoutSyncEmitter.setMaxListeners(50);
+activePageSyncEmitter.setMaxListeners(50);
 const EVENTEMITTER = {
   LAYOUT_STATE_REFRESH: "layout-state-refresh",
   PARTIAL_STATE_SYNC: "partial-state-sync",
-  PREFAB_STATE_SYNC: "prefab-state-sync"
+  PREFAB_STATE_SYNC: "prefab-state-sync",
+  ACTIVE_PAGE_SYNC: "active-page-sync"
 };
 const EVENTEMITTER_METHODS = {
   PREFAB_STATE_SYNC_ON: (name = "", callback) => {
@@ -46,6 +49,15 @@ const EVENTEMITTER_METHODS = {
   },
   LAYOUT_STATE_REFRESH_EMIT: (data) => {
     return layoutSyncEmitter.emit(EVENTEMITTER.LAYOUT_STATE_REFRESH, data);
+  },
+  ACTIVE_PAGE_SYNC_ON: (callback) => {
+    return activePageSyncEmitter.on(EVENTEMITTER.ACTIVE_PAGE_SYNC, callback);
+  },
+  ACTIVE_PAGE_SYNC_OFF: (callback) => {
+    return activePageSyncEmitter.off(EVENTEMITTER.ACTIVE_PAGE_SYNC, callback);
+  },
+  ACTIVE_PAGE_SYNC_EMIT: () => {
+    return activePageSyncEmitter.emit(EVENTEMITTER.ACTIVE_PAGE_SYNC);
   }
 };
 export {

package/core/proxy-service.d.ts

@@ -2,6 +2,7 @@ import { PageContextState, ProxyTarget } from "@wavemaker-ai/react-runtime/types
 import { OverriddenPropsRegistry } from "@wavemaker-ai/react-runtime/core/script-registry";
 import BaseAppProps from "../higherOrder/BaseAppProps";
 import { FormFieldProps } from "../components/data/form/form-field/props";
+export declare function clearPageWidgetProxyCache(widgetsProxy: object | null | undefined): void;
 export declare const createWidgetProxy: (widget: any, widgetName: string, setPageContext: any, overriddenPropsRegistry?: OverriddenPropsRegistry) => any;
 export declare const createPageProxy: (target: ProxyTarget, setPageContext: React.Dispatch<React.SetStateAction<PageContextState>>, overriddenPropsRegistry?: OverriddenPropsRegistry) => ProxyTarget;
 export declare const createStateProxy: (obj: PageContextState | BaseAppProps, path: string[], setPageContext: React.Dispatch<React.SetStateAction<PageContextState>> | React.Dispatch<React.SetStateAction<BaseAppProps>>, overriddenPropsRegistry?: OverriddenPropsRegistry) => ProxyTarget;

package/core/proxy-service.js

@@ -28,6 +28,11 @@ import LiveVariable from "../variables/live-variable";
 import { ModelVariable } from "../variables/model-variable";
 import CrudVariable from "../variables/crud-variable";
 const proxyMap = /* @__PURE__ */ new WeakMap();
+const pageWidgetProxyCaches = /* @__PURE__ */ new WeakMap();
+function clearPageWidgetProxyCache(widgetsProxy) {
+  var _a;
+  (_a = pageWidgetProxyCaches.get(widgetsProxy)) == null ? void 0 : _a.clear();
+}
 let pendingWidgetContextUpdates = null;
 let batchedSetPageContextForWidgets = null;
 function flushPendingWidgetContextUpdates() {
@@ -201,6 +206,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
   if (widget == null) {
     return widget;
   }
+  widget.__isProxy = true;
   const proxy = new Proxy(widget, {
     set(target, prop, value, receiver) {
       if (typeof prop === "symbol" || prop === "prototype") {
@@ -231,6 +237,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
           return this;
         };
       }
+      if (prop === "__isProxy") return true;
       if (prop === "$element") {
         const rawElement = Reflect.get(target, prop, receiver);
         if (rawElement) {
@@ -310,7 +317,7 @@ const createWidgetProxy = (widget, widgetName, setPageContext, overriddenPropsRe
 };
 const createPageProxy = (target, setPageContext, overriddenPropsRegistry) => {
   const widgetProxies = /* @__PURE__ */ new Map();
-  return new Proxy(target, {
+  const widgetsProxy = new Proxy(target, {
     get(widgetsTarget, widgetName) {
       if (widgetName === void 0 || widgetName === "undefined") {
         return void 0;
@@ -378,6 +385,39 @@ const createPageProxy = (target, setPageContext, overriddenPropsRegistry) => {
       return true;
     }
   });
+  pageWidgetProxyCaches.set(widgetsProxy, widgetProxies);
+  return widgetsProxy;
+};
+const wrapVariableProxy = (variable, path, varName, setPageContext) => {
+  if (proxyMap.has(variable)) {
+    return variable;
+  }
+  const varProxy = new Proxy(variable, {
+    set(target, prop, value, receiver) {
+      if (typeof prop === "symbol") {
+        return Reflect.set(target, prop, value, receiver);
+      }
+      const prevVal = Reflect.get(target, prop, receiver);
+      const result = Reflect.set(target, prop, value, receiver);
+      if (prevVal !== value) {
+        setPageContext((prev) => {
+          const newState = __spreadValues({}, prev);
+          let current = newState;
+          for (let i = 0; i < path.length; i++) {
+            const key = path[i];
+            const existing = current[key];
+            current[key] = existing ? __spreadValues({}, existing) : {};
+            current = current[key];
+          }
+          current[varName] = target;
+          return newState;
+        });
+      }
+      return result;
+    }
+  });
+  proxyMap.set(varProxy, true);
+  return varProxy;
 };
 const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistry) => {
   const nestedProxies = /* @__PURE__ */ new Map();
@@ -431,8 +471,18 @@ const createStateProxy = (obj, path = [], setPageContext, overriddenPropsRegistr
       if (descriptor && !descriptor.configurable && !descriptor.writable) {
         return value;
       }
-      if (value instanceof ServiceVariable || value instanceof LiveVariable) {
-        return value;
+      if (value instanceof ServiceVariable || value instanceof LiveVariable || value instanceof ModelVariable || value instanceof CrudVariable) {
+        if (nestedProxies.has(prop)) {
+          return nestedProxies.get(prop);
+        }
+        const varProxy = wrapVariableProxy(
+          value,
+          path,
+          prop,
+          setPageContext
+        );
+        nestedProxies.set(prop, varProxy);
+        return varProxy;
       }
       if (isDOMElement(value)) {
         return value;
@@ -525,6 +575,7 @@ const createFormFieldProxy = (formField, setState, overriddenItemsRef, formProxy
   return fieldProxy;
 };
 export {
+  clearPageWidgetProxyCache,
   createFormFieldProxy,
   createPageProxy,
   createStateProxy,

package/core/util/index.d.ts

@@ -38,6 +38,8 @@ export declare const getSessionStorageItem: (key: string) => any;
 export declare const getSessionLocaleSafe: () => string | undefined;
 export declare const getTimezone: () => string;
 export declare const formatMessage: (fragment: any, expression: string) => any;
+/** Angular parity: same appLocale object, swap message keys in place so bindings stay valid. */
+export declare function syncLocaleMessages(target: Record<string, any> | undefined, messages: Record<string, any>): boolean;
 export declare function reload(): void;
 export declare const toNumber: (value: any) => number;
 export declare const _get: {