@lowdefy/client 6.0.0 → 7.0.0

package/dist/Client.js

@@ -13,14 +13,19 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import { serializer } from '@lowdefy/helpers';
+import { ConfigProvider } from 'antd';
+import { getAppContext } from '@lowdefy/engine';
+import { pageInstanceKey, serializer } from '@lowdefy/helpers';
 import Block from './block/Block.js';
 import Context from './Context.js';
 import DisplayMessage from './DisplayMessage.js';
 import Head from './Head.js';
+import IconProvider from './IconProvider.js';
 import ProgressBarController from './ProgressBarController.js';
+import createAntdIconConfig from './createAntdIconConfig.js';
+import getMessageIcon from './getMessageIcon.js';
 import initLowdefyContext from './initLowdefyContext.js';
-const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetContext = {
+const Client = ({ auth, Components, config: rawConfig, jsMap, loadAllIcons, lowdefy, matchedPath, pathParams, resetContext = {
     reset: false,
     setReset: ()=>undefined
 }, router, stage, types, window })=>{
@@ -32,10 +37,17 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         rawConfig.pageConfig,
         rawConfig.rootConfig
     ]);
-    // Dynamic pages rebuild their engine context per fetch — remount the page
-    // tree with the rebuilt context instead of reconciling mounted blocks
-    // against it, which React can silently drop. Static pages keep their
-    // context and tree across navigations, so their key stays stable.
+    // Each page instance (one per set of path values) has its own engine
+    // context, so a new instance remounts the page tree instead of reconciling
+    // the previous instance's blocks against it. Dynamic pages also rebuild their
+    // context per fetch, which React can silently drop when reconciling, so their
+    // key changes with every fetch. Static page instances keep their context and
+    // tree across navigations, so their key stays stable.
+    const instanceKey = pageInstanceKey({
+        pageId: config.pageConfig.pageId,
+        path: config.pageConfig.path,
+        pathParams
+    });
     const buildRef = React.useRef({
         config: null,
         build: 0
@@ -46,18 +58,35 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
             build: buildRef.current.build + 1
         };
     }
-    const contextKey = config.pageConfig.dynamic === true ? `${config.pageConfig.id}:${buildRef.current.build}` : config.pageConfig.id;
+    const contextKey = config.pageConfig.dynamic === true ? `${instanceKey}:${buildRef.current.build}` : instanceKey;
     initLowdefyContext({
         auth,
         Components,
         config,
+        loadAllIcons,
         lowdefy,
+        matchedPath,
+        pathParams,
         router,
         stage,
         types,
         window
     });
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ProgressBarController, {
+    const appContext = getAppContext({
+        events: config.rootConfig.events,
+        jsMap,
+        lowdefy
+    });
+    const Icon = lowdefy._internal.components.Icon;
+    const antdIconConfig = React.useMemo(()=>createAntdIconConfig({
+            Icon
+        }), [
+        Icon
+    ]);
+    return(// theme.icons is read at render: createIcon runs before the theme is set.
+    /*#__PURE__*/ React.createElement(IconProvider, {
+        icons: lowdefy.theme.icons
+    }, /*#__PURE__*/ React.createElement(ProgressBarController, {
         id: "lowdefy-progress-bar",
         key: `${config.pageConfig.id}-progress-bar`,
         lowdefy: lowdefy,
@@ -69,27 +98,35 @@ const Client = ({ auth, Components, config: rawConfig, jsMap, lowdefy, resetCont
         components: lowdefy._internal.components,
         methods: {
             registerMethod: (_, method)=>{
-                lowdefy._internal.displayMessage = method;
+                lowdefy._internal.displayMessage = (args)=>method({
+                        ...args,
+                        icon: args.icon ?? getMessageIcon({
+                            status: args.status ?? 'success'
+                        })
+                    });
             }
         }
-    }), /*#__PURE__*/ React.createElement(Context, {
+    }), /*#__PURE__*/ React.createElement(ConfigProvider, antdIconConfig, /*#__PURE__*/ React.createElement(Context, {
         key: contextKey,
+        appContext: appContext,
         config: config.pageConfig,
         jsMap: jsMap,
         lowdefy: lowdefy,
+        pathParams: pathParams,
         resetContext: resetContext
     }, (context)=>{
         if (!context._internal.onInitDone) return '';
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Head, {
-            Component: Components.Head,
-            properties: context._internal.RootSlots.map[config.pageConfig.blockId].eval.properties
-        }), /*#__PURE__*/ React.createElement(Block, {
+        return /*#__PURE__*/ React.createElement(Block, {
             block: context._internal.RootSlots.map[config.pageConfig.blockId],
             Blocks: context._internal.RootSlots,
             context: context,
             lowdefy: lowdefy,
-            parentLoading: false
-        }));
-    }));
+            parentLoading: false,
+            renderHead: ({ properties })=>/*#__PURE__*/ React.createElement(Head, {
+                    Component: Components.Head,
+                    properties: properties
+                })
+        });
+    }))));
 };
 export default Client;

package/dist/Context.js

@@ -14,7 +14,9 @@
   limitations under the License.
 */ import React, { useEffect } from 'react';
 import getContext from '@lowdefy/engine';
+import createPageLifecycleManager from './createPageLifecycleManager.js';
 import createShortcutManager from './createShortcutManager.js';
+import getContextKey from './getContextKey.js';
 import MountEvents from './MountEvents.js';
 const ShortcutEffect = ({ context })=>{
     useEffect(()=>{
@@ -26,6 +28,16 @@ const ShortcutEffect = ({ context })=>{
     ]);
     return null;
 };
+const PageLifecycleEffect = ({ context })=>{
+    useEffect(()=>{
+        const manager = createPageLifecycleManager();
+        manager.init(context);
+        return ()=>manager.destroy();
+    }, [
+        context
+    ]);
+    return null;
+};
 const WebSocketsEffect = ({ context })=>{
     useEffect(()=>{
         context._internal.WebSockets.subscribeAll();
@@ -35,33 +47,39 @@ const WebSocketsEffect = ({ context })=>{
     ]);
     return null;
 };
-const Context = ({ children, config, jsMap, lowdefy, resetContext })=>{
+const Context = ({ appContext, children, config, jsMap, lowdefy, pathParams, resetContext })=>{
     const context = getContext({
         config,
         jsMap,
         lowdefy,
+        pathParams,
         resetContext
     });
+    const progress = ()=>{
+        lowdefy._internal.progress.dispatch({
+            type: 'increment'
+        });
+    };
     return /*#__PURE__*/ React.createElement(MountEvents, {
+        key: getContextKey(context),
         context: context,
         triggerEvent: async ()=>{
-            await context._internal.runOnInit(()=>{
-                lowdefy._internal.progress.dispatch({
-                    type: 'increment'
-                });
-            });
+            // The app events run once per app load, when the first page mounts. The
+            // page onInit waits for the app onInit, but not for the app onInitAsync.
+            await appContext._internal.runOnInit(progress);
+            appContext._internal.runOnInitAsync(progress);
+            await context._internal.runOnInit(progress);
         },
         triggerEventAsync: ()=>{
-            context._internal.runOnInitAsync(()=>{
-                lowdefy._internal.progress.dispatch({
-                    type: 'increment'
-                });
-            });
-        }
+            context._internal.runOnInitAsync(progress);
+        },
+        waitForMount: true
     }, (loadingOnInit)=>{
         if (loadingOnInit) return '';
         return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ShortcutEffect, {
             context: context
+        }), /*#__PURE__*/ React.createElement(PageLifecycleEffect, {
+            context: context
         }), /*#__PURE__*/ React.createElement(WebSocketsEffect, {
             context: context
         }), children(context));

package/dist/HtmlOverlay.js

@@ -0,0 +1,127 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { forwardRef, useEffect, useId, useImperativeHandle, useRef } from 'react';
+import { Popconfirm, Popover, Tooltip } from 'antd';
+// The target lives in HTML React does not own, so antd cannot wrap it. antd's
+// trigger resolves its anchor from the child's ref, so a child that renders
+// nothing and hands back the target element anchors the popup on the target
+// itself, and the trigger follows its scrolling and resizing.
+const TargetAnchor = /*#__PURE__*/ forwardRef(function TargetAnchor({ target }, ref) {
+    useImperativeHandle(ref, ()=>target, [
+        target
+    ]);
+    return null;
+});
+// Open popovers and confirms, newest last. Escape and outside clicks close only
+// the newest, so a confirm opened inside a popover closes before the popover,
+// and a click in the confirm is not an outside click for the popover.
+const dismissable = [];
+function isTop(entry) {
+    return dismissable[dismissable.length - 1] === entry;
+}
+function ConfirmOverlay({ content, Icon, onClose, onConfirm, popupClassName, target }) {
+    const messageId = `${useId().replace(/[^a-zA-Z0-9_-]/g, '')}-message`;
+    const cancelRef = useRef(null);
+    return /*#__PURE__*/ React.createElement(Popconfirm, {
+        afterOpenChange: (open)=>{
+            // The least destructive action takes focus (WAI-ARIA alert dialog),
+            // once the popup is placed so focusing it cannot scroll the page.
+            if (open) cancelRef.current?.focus();
+        },
+        cancelButtonProps: {
+            'aria-describedby': messageId,
+            ref: cancelRef
+        },
+        icon: /*#__PURE__*/ React.createElement(Icon, {
+            properties: {
+                name: 'warning',
+                title: ''
+            }
+        }),
+        okButtonProps: {
+            'aria-describedby': messageId
+        },
+        onCancel: ()=>onClose('cancel'),
+        onConfirm: onConfirm,
+        open: true,
+        placement: "top",
+        rootClassName: popupClassName,
+        title: /*#__PURE__*/ React.createElement("span", {
+            id: messageId
+        }, content),
+        trigger: []
+    }, /*#__PURE__*/ React.createElement(TargetAnchor, {
+        target: target
+    }));
+}
+function HtmlOverlay({ content, Icon, kind, onClose, onConfirm, target }) {
+    const popupClassName = `lowdefy-html-${kind}-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;
+    useEffect(()=>{
+        // Tooltips close on Escape but take no clicks, so they are not dismissable.
+        const entry = kind === 'tooltip' ? null : {};
+        if (entry) dismissable.push(entry);
+        // A click on the trigger toggles the overlay itself; one inside the popup
+        // is inside the overlay.
+        function onPointerDown(event) {
+            if (!entry || !isTop(entry)) return;
+            if (target.contains(event.target)) return;
+            if (event.target.closest?.(`.${popupClassName}`)) return;
+            onClose('outside');
+        }
+        function onKeyDown(event) {
+            if (event.key !== 'Escape' || event.isComposing) return;
+            // Every tooltip closes on Escape; of popovers and confirms, the newest.
+            if (!entry || isTop(entry)) onClose('escape');
+        }
+        document.addEventListener('mousedown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return ()=>{
+            if (entry) dismissable.splice(dismissable.indexOf(entry), 1);
+            document.removeEventListener('mousedown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [
+        kind,
+        onClose,
+        popupClassName,
+        target
+    ]);
+    if (kind === 'confirm') {
+        return /*#__PURE__*/ React.createElement(ConfirmOverlay, {
+            content: content,
+            Icon: Icon,
+            onClose: onClose,
+            onConfirm: onConfirm,
+            popupClassName: popupClassName,
+            target: target
+        });
+    }
+    const Overlay = kind === 'popover' ? Popover : Tooltip;
+    const contentProps = kind === 'popover' ? {
+        content
+    } : {
+        title: content
+    };
+    return /*#__PURE__*/ React.createElement(Overlay, {
+        ...contentProps,
+        open: true,
+        placement: "top",
+        rootClassName: popupClassName,
+        trigger: []
+    }, /*#__PURE__*/ React.createElement(TargetAnchor, {
+        target: target
+    }));
+}
+export default HtmlOverlay;

package/dist/IconProvider.js

@@ -0,0 +1,24 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { LucideProvider } from 'lucide-react/dist/esm/context.mjs';
+function IconProvider({ children, icons }) {
+    return /*#__PURE__*/ React.createElement(LucideProvider, {
+        nonScalingStroke: icons.nonScalingStroke,
+        size: icons.size,
+        strokeWidth: icons.strokeWidth
+    }, children);
+}
+export default IconProvider;

package/dist/MountEvents.js

@@ -13,11 +13,11 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React, { useEffect, useState } from 'react';
-const MountEvents = ({ children, context, triggerEvent, triggerEventAsync })=>{
-    const [loading, setLoading] = useState(true);
+const MountEvents = ({ children, context, triggerEvent, triggerEventAsync, waitForMount })=>{
+    const [loading, setLoading] = useState(waitForMount);
     const [error, setError] = useState(null);
     useEffect(()=>{
-        setLoading(true);
+        setLoading(waitForMount);
         const mount = async ()=>{
             try {
                 await triggerEvent();

package/dist/adapters/createRouter.js

@@ -12,10 +12,13 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import { createUrl, parsePageId } from './url.js';
+*/ import { parsePageId } from '@lowdefy/helpers';
+import { createUrl } from './url.js';
 // History-API router backing the @lowdefy/client router contract:
 // push({ pathname, query }), back(), basePath — plus subscribe() for the
-// page component and sessionStorage-backed scroll restoration.
+// page component and sessionStorage-backed scroll restoration. A location names
+// no page: the client learns a path's page from the server's page response, and
+// reads it back from the path memory.
 function createRouter({ basePath = '', window }) {
     const listeners = new Set();
     let entryKey = window.history.state?.lowdefyKey ?? `k${Date.now().toString(36)}`;
@@ -52,9 +55,12 @@ function createRouter({ basePath = '', window }) {
             window.scrollTo(position?.x ?? 0, position?.y ?? 0);
         });
     }
+    // path is the pathname without basePath, the leading "/" and one trailing "/",
+    // still encoded: the form page requests and the path memory use. It is ''
+    // at the app root.
     function getLocation() {
         return {
-            pageId: parsePageId(window.location.href, basePath),
+            path: parsePageId(window.location.href, basePath) ?? '',
             pathname: window.location.pathname,
             search: window.location.search
         };

package/dist/adapters/url.js

@@ -26,10 +26,4 @@ function createUrl({ basePath = '', pathname, query }) {
     const serializedQuery = serializeQuery(query);
     return `${basePath}${pathname}${serializedQuery ? `?${serializedQuery}` : ''}`;
 }
-function parsePageId(url, basePath = '') {
-    const pathname = new URL(url, 'http://localhost').pathname;
-    const stripped = basePath && pathname.startsWith(basePath) ? pathname.slice(basePath.length) : pathname;
-    const pageId = stripped.replace(/^\//, '').replace(/\/$/, '');
-    return pageId === '' ? null : pageId;
-}
-export { createUrl, parsePageId, serializeQuery };
+export { createUrl, serializeQuery };