@ramesesinc/platform-core 0.1.6 → 0.1.9

package/dist/components/action/LookupPage.js

@@ -1,62 +1,40 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import { useRef } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { getValue, substituteExpr } from "../../lib/utils/BeanUtils";
-import PopupView from "../view/PopupView";
+import { usePopupView } from "../view/PopupView";
 /* ------------------------------------------------------------------ */
 /* Component */
 const LookupPage = (props) => {
     const { url, name = "", result = null, children, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const pageContext = usePageContext();
-    const [showPopup, setShowPopup] = useState(false);
-    const [popupUrl, setPopupUrl] = useState("");
-    const slotRef = useRef(null);
-    const onClose = () => {
-        var _a;
-        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(null);
-    };
+    const popupView = usePopupView();
+    const popupRef = useRef(null);
     /* ---------------------- Events ---------------------- */
     const handleClick = () => {
-        var _a;
         if (!url)
             return;
         //combine data if specified and pageContext all data if specified
         const surl = substituteExpr(url, Object.assign(Object.assign({}, pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()), data));
-        setPopupUrl(surl);
-        setShowPopup(true);
         const handler = {
             onSelect: (itm) => {
+                var _a;
                 let resdata = itm;
                 if (result != null) {
                     resdata = getValue(result, itm);
                 }
-                alert("item selected " + JSON.stringify(resdata));
+                (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.close();
                 if (name) {
                     pageContext.set(name, resdata);
                 }
-                onClose();
-                //pageContext.refresh();
             },
         };
-        //eventHandler={handler}
-        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(_jsx(PopupView, { url: surl, onClose: onClose, eventHandler: handler }));
-    };
-    const handleClosePopup = () => {
-        setShowPopup(false);
+        const showPopupRef = popupView.create({ url: surl, eventHandler: handler }).show();
+        popupRef.current = showPopupRef;
     };
     /* ---------------------- Render ---------------------- */
-    return (_jsxs(_Fragment, { children: [iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })), _jsx(ChildrenSlot, { ref: slotRef })] }));
+    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })) }));
 };
 export default LookupPage;
-const ChildrenSlot = memo(forwardRef((_, ref) => {
-    const [content, setContent] = useState(null);
-    useImperativeHandle(ref, () => ({
-        update: (content) => {
-            // console.log("view page children slot", content);
-            setContent(content);
-        },
-    }), []);
-    return _jsx(_Fragment, { children: content == null ? null : content });
-}));

package/dist/components/action/ViewPage.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { AbstractComponent } from "../../types/component";
+import { PopupOptions } from "../../core/PopupContext";
 interface ViewPageProps extends AbstractComponent {
     url: string;
     mode?: "popup" | "window";
@@ -9,6 +10,7 @@ interface ViewPageProps extends AbstractComponent {
     opt?: Record<string, any>;
     iconOnly?: boolean;
     popupClassName?: string;
+    popupOptions?: PopupOptions;
 }
 declare const ViewPage: (props: ViewPageProps) => import("react/jsx-runtime").JSX.Element;
 export default ViewPage;

package/dist/components/action/ViewPage.js

@@ -1,28 +1,28 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
+import { useRef } from "react";
 import { useDataContext } from "../../core/DataContext";
 import { usePageContext } from "../../core/PageContext";
 import { usePageViewContext } from "../../core/PageViewContext";
 import { substituteExpr } from "../../lib/utils/BeanUtils";
 import { getUrlPageParams, parseHashUrl } from "../../lib/utils/PageUtils";
-import PopupView from "../view/PopupView";
+import { usePopupView } from "../view/PopupView";
 /* ------------------------------------------------------------------ */
 /* Component */
 const ViewPage = (props) => {
-    const { url, mode, className = "", title, icon, opt = {}, popupClassName = "", iconOnly = false } = props !== null && props !== void 0 ? props : {};
+    const { url, mode, className = "", title, icon, iconOnly = false, opt = {}, popupClassName = "", popupOptions = {} } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const dataContext = useDataContext();
     const pageView = usePageViewContext();
     const pageContext = usePageContext();
-    const slotRef = useRef(null);
+    const popupView = usePopupView();
+    const popupShowRef = useRef(null);
     /* ---------------------- Events ---------------------- */
     const onClose = () => {
         var _a;
-        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(null);
+        (_a = popupShowRef.current) === null || _a === void 0 ? void 0 : _a.close();
     };
     const handleClick = (e) => {
-        var _a;
         e.preventDefault();
         if (!url)
             return;
@@ -39,21 +39,18 @@ const ViewPage = (props) => {
             return result !== null && result !== void 0 ? result : {};
         };
         const getUrlData = () => {
-            let result = null;
-            if (dataContext == null) {
-                // use data received from props
-                const fullData = Object.assign(Object.assign({}, pageContext.getAllData()), data);
-                result = fullData;
-            }
-            else {
-                result = dataContext.getData();
-            }
-            return result !== null && result !== void 0 ? result : {};
+            const result = Object.assign(Object.assign({}, dataContext.getAllData()), data);
+            // console.log("get url data", dataContext, result);
+            return result;
         };
         const urlParams = getUrlParams();
         const urlData = getUrlData();
         const surl = substituteExpr(url, Object.assign(Object.assign({}, urlParams), urlData));
-        if (mode === "popup") {
+        let preferredMode = mode;
+        if ((preferredMode == null || preferredMode.trim() === '') && dataContext.getType() === 'row') {
+            preferredMode = "window";
+        }
+        if (preferredMode === "popup") {
             const handler = {
                 onSave: (itm) => {
                     onClose();
@@ -63,26 +60,23 @@ const ViewPage = (props) => {
                     pageContext.notifyDepends();
                 },
             };
-            (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(_jsx(PopupView, { url: surl, onClose: onClose, eventHandler: handler }));
+            const showPopupOptions = Object.assign({}, popupOptions);
+            if (popupClassName != null && popupClassName.trim() !== '') {
+                showPopupOptions.className = popupClassName;
+            }
+            const showPopupRef = popupView.create({ url: surl, onClose: onClose, eventHandler: handler }).show(showPopupOptions);
+            popupShowRef.current = showPopupRef;
         }
-        else if (mode === "window") {
-            pageView.setPage(surl, { mode });
+        else if (preferredMode === "window") {
+            popupShowRef.current = null;
+            pageView.setPage(surl, { mode: preferredMode });
         }
         else {
+            popupShowRef.current = null;
             pageView.pushPage(surl);
         }
     };
     /* ---------------------- Render ---------------------- */
-    return (_jsxs(_Fragment, { children: [iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })), _jsx(ChildrenSlot, { ref: slotRef })] }));
+    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "View Page"] })) }));
 };
 export default ViewPage;
-const ChildrenSlot = memo(forwardRef((_, ref) => {
-    const [content, setContent] = useState(null);
-    useImperativeHandle(ref, () => ({
-        update: (content) => {
-            // console.log("view page children slot", content);
-            setContent(content);
-        },
-    }), []);
-    return _jsx(_Fragment, { children: content == null ? null : content });
-}));

package/dist/components/common/UIComponent.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { compile } from "expression-eval";
 import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
+import { compile } from "expression-eval";
 const UIComponent = (props) => {
     var _a;
     const { name, title, depends, children, visibleWhen, labelPosition = "top", style } = props !== null && props !== void 0 ? props : {};
     const pageContext = usePageContext();
     const evaluateVisible = () => {
         var _a;
-        if (!visibleWhen)
+        if (visibleWhen == null || visibleWhen.trim() === '') {
             return true;
+        }
         try {
             const context = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
             const stripped = visibleWhen.replace(/^\s*\{([\s\S]*)\}\s*$/, "$1").trim();
@@ -26,7 +27,7 @@ const UIComponent = (props) => {
         }
         catch (e) {
             console.warn("visibleWhen eval error:", e);
-            return true;
+            return false;
         }
     };
     const [visible, setVisible] = useState(() => evaluateVisible());

package/dist/components/index.d.ts

@@ -21,6 +21,9 @@ export { default as HtmlView } from "./view/HtmlView";
 export { default as IFrameView } from "./view/IFrameView";
 export { default as RootView } from "./view/RootView";
 export { default as WizardView } from "./view/WizardView";
+export { default as PopupView } from "./view/PopupView";
+export type { usePopupView } from "./view/PopupView";
+export type { ShowPopupViewRef, CreatePopupViewRef, UsePopupViewResult } from "./view/PopupView";
 export { default as AlertMessage } from "./action/AlertMessage";
 export { default as DeleteData } from "./action/DeleteData";
 export { default as Edit } from "./action/Edit";

package/dist/components/index.js

@@ -26,6 +26,7 @@ export { default as HtmlView } from "./view/HtmlView";
 export { default as IFrameView } from "./view/IFrameView";
 export { default as RootView } from "./view/RootView";
 export { default as WizardView } from "./view/WizardView";
+export { default as PopupView } from "./view/PopupView";
 //actions
 export { default as AlertMessage } from "./action/AlertMessage";
 export { default as DeleteData } from "./action/DeleteData";

package/dist/components/table/DataList.js

@@ -297,7 +297,7 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     return (_jsxs("div", { className: `data-list ${className}`, children: [renderToolbar(), renderFilterPanel(), (paginationPosition === "both" || paginationPosition === "top") && renderPagination(), _jsx(DataTable, { data: rows, columns: sortableColumns, loading: isLoading, emptyMessage: emptyMessage, striped: striped, bordered: bordered, hover: hover, dense: dense, rowKey: "id", onRowClick: handleRowClick, selectedRows: selectedRows, onSelectionChange: handleSelectionChange, selectable: selectable, rowClassName: rowClassName }), (paginationPosition === "both" || paginationPosition === "bottom") && rows.length > 0 && renderPagination()] }));
 };
 export const DataList = ({ attr }) => {
-    const { depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["depends", "cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
+    const { title, depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["title", "depends", "cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
     // All hooks called here — this is a React component so hooks are valid
     const { tenant, module } = useApp();
     const pageContext = usePageContext();
@@ -356,7 +356,7 @@ export const DataList = ({ attr }) => {
             handleRef.current = ref;
         },
     };
-    return (_jsx(TableProvider, { data: data, columns: cols, rowsPerPage: rowsPerPage, disableTotalCount: disableTotalCount, listHandlerFactory: listHandlerFactory, tenant: tenant !== null && tenant !== void 0 ? tenant : "", module: module !== null && module !== void 0 ? module : "", resolvedParams: resolveParams(), children: _jsx(InnerDataList, Object.assign({}, rest, { cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions, depends: depends, handle: innerHandle })) }));
+    return (_jsx(TableProvider, { data: data, columns: cols, rowsPerPage: rowsPerPage, disableTotalCount: disableTotalCount, listHandlerFactory: listHandlerFactory, tenant: tenant !== null && tenant !== void 0 ? tenant : "", module: module !== null && module !== void 0 ? module : "", resolvedParams: resolveParams(), children: _jsx(InnerDataList, Object.assign({}, rest, { toolbarTitle: title, cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions, depends: depends, handle: innerHandle })) }));
 };
 export default DataList;
 const RefreshButton = ({ show, onClick, size = 18 }) => {

package/dist/components/view/PopupView.d.ts

@@ -1,9 +1,22 @@
 import { EventHandler } from "../../core";
+import { PopupOptions } from "../../core/PopupContext";
 type PopupViewProps = {
     url: string;
     popupClassName?: string;
     onClose?: () => void;
     eventHandler?: EventHandler | null;
+    title?: string;
 };
 declare const PopupView: (props: PopupViewProps) => import("react/jsx-runtime").JSX.Element;
 export default PopupView;
+export type ShowPopupViewRef = {
+    id: string;
+    close: () => void;
+};
+export type CreatePopupViewRef = {
+    show: (options?: Partial<PopupOptions>) => ShowPopupViewRef;
+};
+export type UsePopupViewResult = {
+    create: (props: PopupViewProps) => CreatePopupViewRef;
+};
+export declare const usePopupView: () => UsePopupViewResult;

package/dist/components/view/PopupView.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { getError } from "@ramesesinc/client";
 import clsx from "clsx";
 import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import Page from "../../core/Page";
 import { PageViewProvider } from "../../core/PageViewContext";
+import { usePopupManager } from "../../core/PopupContext";
 const PopupView = (props) => {
-    const { url, popupClassName, onClose = () => { }, eventHandler } = props !== null && props !== void 0 ? props : {};
+    const { url, popupClassName, onClose = () => { }, eventHandler, title } = props !== null && props !== void 0 ? props : {};
     const [paths, setPaths] = useState([]);
     const providerRef = useRef({});
     const slotRef = useRef(null);
@@ -28,7 +29,7 @@ const PopupView = (props) => {
             comp = _jsx("div", { children: e.message });
         }
         // update the child slot
-        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(comp, finalPopupClass, onClose);
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(comp, finalPopupClass, onClose, title);
     };
     useEffect(() => {
         // console.log("popupview change url", url);
@@ -67,25 +68,29 @@ const ChildrenSlot = memo(forwardRef((_, ref) => {
     const [content, setContent] = useState(null);
     const optionsRef = useRef({});
     useImperativeHandle(ref, () => ({
-        update: (content, popupClassName, onClose) => {
-            const options = { popupClassName, onClose };
-            setContent(wrapContent(content, options));
+        update: (content, popupClassName, onClose, title) => {
+            const options = { popupClassName, onClose, title };
             optionsRef.current = options;
+            setContent(content);
         },
     }), []);
-    const handleClose = () => {
-        setContent(null);
-        const { onClose } = optionsRef.current;
-        if (onClose != null && typeof onClose === "function") {
-            onClose();
-        }
-    };
-    const wrapContent = (comp, options) => {
-        if (comp == null) {
-            return null;
-        }
-        const { popupClassName } = options;
-        return (_jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: _jsxs("div", { className: popupClassName, children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b", children: [_jsx("h2", { className: "text-lg font-semibold", children: "Page Viewer" }), _jsx("button", { onClick: handleClose, className: "w-8 h-8 flex items-center justify-center rounded-md hover:bg-gray-100 transition-colors", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), _jsx("div", { className: "flex-1 overflow-hidden", children: comp })] }) }));
-    };
     return _jsx(_Fragment, { children: content == null ? null : content });
 }));
+export const usePopupView = () => {
+    const popupManager = usePopupManager();
+    const create = (props) => {
+        const { url, onClose, eventHandler, title } = props !== null && props !== void 0 ? props : {};
+        const show = (options) => {
+            const content = _jsx(PopupView, { url: url, onClose: onClose, eventHandler: eventHandler });
+            const popup = popupManager.create(options);
+            popup.setContent(content);
+            popup.show();
+            return {
+                id: popup.id,
+                close: () => popup.close(),
+            };
+        };
+        return { show };
+    };
+    return { create };
+};

package/dist/core/DataContext.d.ts

@@ -1,20 +1,23 @@
 import { BindingModel } from "@ramesesinc/client";
 type DependCallback = (value?: any) => void;
 export type DataBindingValue = {
+    getType: () => string;
     getBinding: () => BindingModel;
     getData: () => Record<string, any>;
+    getAllData: () => Record<string, any>;
     set: (name: string | null, value: any) => void;
     get: (name: string | null) => any;
     dependsTo: (name: string | null, callback: DependCallback) => () => void;
     notifyDepends: (name?: string | null) => void;
 };
-export declare const useCreateContextValue: (source: Record<string, any>) => DataBindingValue;
-declare const DataBindingContext: import("react").Context<DataBindingValue | null>;
-export declare const useDataContext: () => DataBindingValue | null;
+export declare const useCreateContextValue: (source: Record<string, any>, type: string) => DataBindingValue;
+declare const DataBindingContext: import("react").Context<DataBindingValue>;
+export declare const useDataContext: () => DataBindingValue;
 type DataBindingProviderProps = {
+    type?: "page" | "row";
     data?: Record<string, any>;
     handler?: DataBindingValue;
     children: React.ReactNode;
 };
-export declare const DataBindingProvider: ({ data, handler, children }: DataBindingProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataBindingProvider: ({ type, data, handler, children }: DataBindingProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default DataBindingContext;

package/dist/core/DataContext.js

@@ -1,20 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useBinding } from "@ramesesinc/client";
 import { createContext, useContext, useMemo } from "react";
+import { usePageContext } from "./PageContext";
 const createDefaultValue = () => ({
+    getType: () => "page",
     getBinding: () => ({}),
     getData: () => ({}),
+    getAllData: () => ({}),
     set: () => { },
     get: () => undefined,
     dependsTo: () => () => { },
     notifyDepends: () => { },
 });
-export const useCreateContextValue = (source) => {
+export const useCreateContextValue = (source, type) => {
     const binding = useBinding(source !== null && source !== void 0 ? source : {});
+    const pageContext = usePageContext();
+    const preferredType = type == null || type.trim() === "" ? "page" : type.toLowerCase();
+    const getAllData = () => {
+        var _a, _b, _c;
+        return Object.assign(Object.assign({}, ((_b = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding) === null || _a === void 0 ? void 0 : _a.getUiData()) !== null && _b !== void 0 ? _b : {})), { pageParams: (_c = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getPageParams()) !== null && _c !== void 0 ? _c : {}, data: binding.getData() });
+    };
     return useMemo(() => ({
+        getType: () => preferredType,
         getBinding: () => binding,
         getData: () => binding.getData(),
+        getAllData,
         set: (name, value) => {
+            console.log("DataContext set 1", binding.set);
             binding.set(name !== null && name !== void 0 ? name : "", value);
         },
         get: (name) => {
@@ -28,13 +40,13 @@ export const useCreateContextValue = (source) => {
         },
     }), [binding, source]);
 };
-const DataBindingContext = createContext(null);
+const DataBindingContext = createContext(createDefaultValue());
 export const useDataContext = () => {
     const context = useContext(DataBindingContext);
     return context;
 };
-export const DataBindingProvider = ({ data, handler, children }) => {
-    const dataWrapper = useCreateContextValue(data !== null && data !== void 0 ? data : {});
+export const DataBindingProvider = ({ type, data, handler, children }) => {
+    const dataWrapper = useCreateContextValue(data !== null && data !== void 0 ? data : {}, type !== null && type !== void 0 ? type : "");
     const value = handler !== null && handler !== void 0 ? handler : dataWrapper;
     return _jsx(DataBindingContext.Provider, { value: value, children: children });
 };

package/dist/core/Page.js

@@ -9,6 +9,7 @@ import { getUrlPageParams, parseHashUrl } from "../lib/utils/PageUtils";
 import { useApp } from "./AppContext";
 import { PageProvider } from "./PageContext";
 import { usePageViewContext } from "./PageViewContext";
+import { usePopupContext } from "./PopupContext";
 const Page = (props) => {
     const { url: finalUrl, fallback = _jsx("div", { children: "Loading page..." }) } = props !== null && props !== void 0 ? props : {};
     const [uuid] = useState(() => Math.random().toString(36).slice(2));
@@ -17,9 +18,9 @@ const Page = (props) => {
     const [template, setTemplate] = useState(null);
     const slotRef = useRef(null); // stable — never changes
     const pageContext = useRef({});
-    const mountedRef = useRef(true);
     const { getPageCache } = useApp();
     const pageView = usePageViewContext();
+    const popupContext = usePopupContext();
     const originalData = useMemo(() => {
         const result = {
             mainPath: "",
@@ -38,9 +39,9 @@ const Page = (props) => {
     //   setValue(url ?? null);
     // }, [url]);
     useLayoutEffect(() => {
+        // console.log("Page useLayoutEffect", uuid, value);
         const loadPageCache = async () => {
             var _a;
-            // console.log("Page value changed", uuid, value, originalData);
             const url = value;
             const findPageCache = async (page) => {
                 const pageCache = await getPageCache(page);
@@ -65,10 +66,10 @@ const Page = (props) => {
                     pageCache = await findPageCache(infoCheck.page);
                 }
                 const { template, pageInfo } = pageCache !== null && pageCache !== void 0 ? pageCache : {};
-                // console.log("page load template 1.2", url, infoCheck);
-                const { data } = pageInfo !== null && pageInfo !== void 0 ? pageInfo : {};
+                const { data, title } = pageInfo !== null && pageInfo !== void 0 ? pageInfo : {};
                 setCache({
-                    url: url,
+                    url,
+                    title,
                     page: pageCache,
                     api: data,
                     params: infoCheck.params,
@@ -78,20 +79,18 @@ const Page = (props) => {
         };
         loadPageCache();
     }, [value]);
-    useEffect(() => {
-        // console.log("force update", value, cache);
-        const loadPage = async () => {
-            const result = await fetchData(cache === null || cache === void 0 ? void 0 : cache.api);
-            // console.log("fetchData result", uuid, value, result);
-            pageContext.current.setData(result !== null && result !== void 0 ? result : {});
-        };
-        loadPage();
-    }, [value, cache]);
+    // Push dynamic component into the slot — synchronous, no flash
+    useLayoutEffect(() => {
+        var _a;
+        // console.log("Page template changed", uuid, value, template);
+        const { title = null } = cache !== null && cache !== void 0 ? cache : {};
+        popupContext === null || popupContext === void 0 ? void 0 : popupContext.setTitle(title);
+        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(template);
+    }, [template]);
     const fetchData = useCallback(async (req) => {
-        // console.log("page fetchData", uuid, req);
+        // console.log("Page fetchData", uuid, value, req);
         let result = null;
         if (req === null || req === void 0 ? void 0 : req.api) {
-            // console.log("url", window.location.href);
             let params;
             if (pageView.isStandalone()) {
                 const res = parseHashUrl(value !== null && value !== void 0 ? value : "");
@@ -101,23 +100,23 @@ const Page = (props) => {
                 const res = getUrlPageParams();
                 params = res === null || res === void 0 ? void 0 : res.params;
             }
-            // console.log({ page, params });
-            // const urlParams = pageContext?.getUrlParams();
-            // console.log("page fetchData exec service 1.1", req.params, params);
             const resolveParams = replaceValues(req.params, params);
-            // console.log("page fetchData exec service 1.2", req.api, resolveParams);
+            // console.log("Page fetchData params", uuid, value, {params, resolveParams});
             const resp = await pageContext.current.execService(req.api, resolveParams);
             const { data } = resp !== null && resp !== void 0 ? resp : {};
             result = data !== null && data !== void 0 ? data : resp;
         }
         return result;
-        // pageContext.current.setData(result ?? {});
     }, [value]);
-    // Push dynamic component into the slot — synchronous, no flash
-    useLayoutEffect(() => {
-        var _a;
-        (_a = slotRef.current) === null || _a === void 0 ? void 0 : _a.update(template);
-    }, [template]);
+    useEffect(() => {
+        // console.log("Page cache changed", uuid, value, cache);
+        const loadPage = async () => {
+            const result = await fetchData(cache === null || cache === void 0 ? void 0 : cache.api);
+            // console.log("fetchData result", uuid, value, result);
+            pageContext.current.setData(result !== null && result !== void 0 ? result : {});
+        };
+        loadPage();
+    }, [value, cache]);
     const pageHandle = {
         init: (ref) => {
             pageContext.current = ref;

package/dist/core/PageCache.js

@@ -5,11 +5,11 @@ import React from "react";
 import { DynamicTemplate } from "./DynamicTemplate";
 // Simple in-memory cache
 const cache = {};
-const getPlatformInfo = async () => {
-    const platform = await localAPI.getPlatform();
-    const { multi_tenant, tenant_name } = platform !== null && platform !== void 0 ? platform : {};
-    return { multi_tenant, tenant_name };
-};
+// const getPlatformInfo = async () => {
+//   const platform = await localAPI.getPlatform();
+//   const { multi_tenant, tenant_name } = platform ?? {};
+//   return { multi_tenant, tenant_name };
+// };
 export const getPage = async (name, fallback) => {
     let { getTenant: tenant, getModule: module } = fallback;
     const key = `${module}/${name}`; // ✅ unique per module
@@ -26,10 +26,10 @@ export const getPage = async (name, fallback) => {
         if (!pageInfo) {
             return { template: _jsxs("div", { className: "text-red-500 p-2 border border-red-500", children: ["Page \"", name, "\" not found."] }), pageInfo: null };
         }
-        const { template, attr } = pageInfo !== null && pageInfo !== void 0 ? pageInfo : { template: null, attr: {} };
+        const { title, template, attr } = pageInfo !== null && pageInfo !== void 0 ? pageInfo : { template: null, attr: {} };
         delete pageInfo.template;
         delete pageInfo.attr;
-        const tmpl = _jsx(DynamicTemplate, { template: template, attr: attr });
+        const tmpl = _jsx(DynamicTemplate, { template: template, attr: Object.assign(Object.assign({}, attr), { title }) });
         const hasSelectionHandling = template === "ExplorerTemplate";
         cache[key] = { template: tmpl, pageInfo, hasSelectionHandling };
     }

package/dist/core/PageContext.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useBinding } from "@ramesesinc/client";
 import { localAPI } from "@ramesesinc/lib/local-api";
-import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { parseHashUrl } from "../lib/utils/PageUtils";
 import { useApp } from "./AppContext";
 import { DataBindingProvider } from "./DataContext";
@@ -39,8 +39,8 @@ export const PageProvider = ({ handle, children }) => {
     const pageView = usePageViewContext();
     const binding = useBinding();
     // setup the selectedPath from the handle
-    // useMemo(() => {
-    useLayoutEffect(() => {
+    useMemo(() => {
+        // useLayoutEffect(() => {
         const path = handle === null || handle === void 0 ? void 0 : handle.getSelectedPath();
         if (binding && typeof binding.set === "function") {
             binding.set("selectedPage", path);
@@ -51,8 +51,8 @@ export const PageProvider = ({ handle, children }) => {
         // return path;
     }, [handle, binding]);
     // for DEV purposes only
-    // useMemo(() => {
-    useLayoutEffect(() => {
+    useMemo(() => {
+        // useLayoutEffect(() => {
         const dependHandler = () => {
             // console.log("selectedPage changed => ", binding.get("selectedPage"));
         };
@@ -165,6 +165,15 @@ export const PageProvider = ({ handle, children }) => {
                 return {};
             }
         }
+        if (name === "pageView" || String(name).startsWith("pageView.")) {
+            if (name === "pageView") {
+                return pageView.getInfo();
+            }
+            if (binding && typeof binding.getByPath === "function") {
+                return binding.getByPath({ pageView: pageView.getInfo() }, name);
+            }
+            return null;
+        }
         if (binding && typeof binding.get === "function") {
             const val = binding.get(name);
             // console.log("page context get", name, val, binding.getData());
@@ -232,7 +241,8 @@ export const PageProvider = ({ handle, children }) => {
         getMgmt,
         postMgmt,
         getAllData: () => {
-            const allData = Object.assign(Object.assign({}, (binding && typeof binding.getUiData === "function" ? binding.getUiData() : {})), { data: binding && typeof binding.getData === "function" ? binding.getData() : {}, pageParams: getPageParams() });
+            var _a;
+            const allData = Object.assign(Object.assign({}, (binding && typeof binding.getUiData === "function" ? binding.getUiData() : {})), { data: binding && typeof binding.getData === "function" ? binding.getData() : {}, pageParams: (_a = getPageParams()) !== null && _a !== void 0 ? _a : {} });
             return allData;
         },
         setPageParams,
@@ -254,7 +264,7 @@ export const PageProvider = ({ handle, children }) => {
         };
     }, []);
     const contextValue = values;
-    const dataBindingValue = Object.assign(Object.assign({}, contextValue), { getBinding: () => binding });
+    const dataBindingValue = Object.assign(Object.assign({}, contextValue), { getBinding: () => binding, getType: () => "page" });
     useLayoutEffect(() => {
         if (handle == null)
             return;