@lowdefy/client 6.0.0 → 7.0.0

package/dist/createIcon.js

@@ -15,7 +15,11 @@
 */ import React from 'react';
 import { omit, type } from '@lowdefy/helpers';
 import Icon from '@ant-design/icons';
+import LucideIcon from 'lucide-react/dist/esm/Icon.mjs';
+import { useLucideContext } from 'lucide-react/dist/esm/context.mjs';
 import { cn, withBlockDefaults, ErrorBoundary } from '@lowdefy/block-utils';
+import formatIconTitle from './formatIconTitle.js';
+import renderIconNodes from './renderIconNodes.js';
 import iconStyles from './style.module.css';
 const lowdefyProps = [
     'actionLog',
@@ -27,65 +31,163 @@ const lowdefyProps = [
     'loading',
     'menus',
     'pageId',
+    'pathParams',
     'registerEvent',
     'registerMethod',
     'schemaErrors',
     'styles',
     'validation'
 ];
-const createIcon = (Icons)=>{
-    const AiOutlineLoading3Quarters = Icons['AiOutlineLoading3Quarters'];
-    const AiOutlineExclamationCircle = Icons['AiOutlineExclamationCircle'];
-    const formatTitle = (title)=>{
-        if (!title || !type.isString(title)) {
-            return '';
+// Drawn while every icon loads: an empty svg keeps the icon's box, so nothing
+// shifts and no fallback flashes before the icon arrives.
+const PENDING_ICON = {
+    node: []
+};
+function createIcon({ icons, loadAllIcons }) {
+    // Without a loader the map already holds every icon the app bundles.
+    let allIconsLoaded = type.isNone(loadAllIcons);
+    // icons is the live icon map: page loads, dev JIT and loadAllIcons add names
+    // to it, so every lookup happens at render.
+    function getIconData(name) {
+        if (type.isString(name) && Object.hasOwn(icons, name)) {
+            return icons[name];
         }
-        let spacedTitle = title.replace(/([A-Z])/g, ' $1').trim();
-        return spacedTitle.substring(spacedTitle.indexOf(' ') + 1);
-    };
-    const IconBlock = ({ blockId, classNames = {}, events, methods, onClick, properties, styles = {}, ...props })=>{
+        return null;
+    }
+    // A name missing from the page's icons may be one of the app's, so the first
+    // miss waits for every icon to load before it draws the fallback. After a
+    // load, a missing name is unknown. A failed load (logged by the loader)
+    // draws the fallback, and a later miss tries again.
+    function useIconData(name) {
+        const data = getIconData(name);
+        const [settledName, setSettledName] = React.useState(null);
+        const pending = data === null && type.isString(name) && !allIconsLoaded && settledName !== name;
+        React.useEffect(()=>{
+            if (!pending) return undefined;
+            let mounted = true;
+            loadAllIcons().then(()=>{
+                allIconsLoaded = true;
+            }, ()=>undefined).then(()=>{
+                if (mounted) setSettledName(name);
+            });
+            return ()=>{
+                mounted = false;
+            };
+        }, [
+            pending,
+            name
+        ]);
+        return {
+            data,
+            pending
+        };
+    }
+    function IconSvg({ data, nonScalingStroke, svgProps, title }) {
+        return /*#__PURE__*/ React.createElement(LucideIcon, {
+            icon: {
+                node: [],
+                size: data.size,
+                width: data.width,
+                height: data.height
+            },
+            ...data.attrs,
+            ...svgProps
+        }, [
+            title ? /*#__PURE__*/ React.createElement("title", {
+                key: "title"
+            }, title) : null,
+            ...renderIconNodes({
+                node: data.node,
+                nonScalingStroke
+            })
+        ]);
+    }
+    function IconBlock({ blockId, classNames = {}, events, methods, onClick, properties, styles = {}, ...props }) {
+        const lucideContext = useLucideContext();
         const propertiesObj = type.isString(properties) ? {
             name: properties
         } : properties;
+        const { data, pending } = useIconData(propertiesObj.name);
         const spin = (propertiesObj.spin || events.onClick?.loading) && !propertiesObj.disableLoadingIcon;
-        const iconProps = {
+        const title = propertiesObj.title ?? formatIconTitle(propertiesObj.name);
+        const labelled = Boolean(title) || !type.isNone(props['aria-label']);
+        const nonScalingStroke = propertiesObj.nonScalingStroke ?? lucideContext.nonScalingStroke;
+        const triggerClick = events.onClick && (()=>methods.triggerEvent({
+                name: 'onClick'
+            }));
+        const svgProps = {
             id: blockId,
             className: cn(classNames.element, {
                 [iconStyles['icon-spin']]: spin
             }),
             style: {
                 cursor: onClick || events.onClick ? 'pointer' : undefined,
+                // CSS colour and transform, not SVG attributes: every set draws with
+                // currentColor, so one colour reaches stroke- and fill-based icons.
+                color: propertiesObj.color,
+                transform: propertiesObj.rotate ? `rotate(${propertiesObj.rotate}deg)` : undefined,
                 ...styles.element
             },
-            rotate: propertiesObj.rotate,
-            color: propertiesObj.color,
-            title: propertiesObj.title ?? formatTitle(propertiesObj.name),
             size: propertiesObj.size,
-            // twoToneColor: propertiesObj.color, // TODO: track https://github.com/react-icons/react-icons/issues/508
+            strokeWidth: propertiesObj.strokeWidth,
+            'aria-hidden': labelled ? undefined : 'true',
+            onClick: onClick ?? triggerClick,
             ...omit(props, lowdefyProps)
         };
-        let IconComp = Icons[propertiesObj.name];
-        if (!IconComp) {
-            IconComp = AiOutlineExclamationCircle;
+        const missingSvgProps = {
+            ...svgProps,
+            style: {
+                ...svgProps.style,
+                color: '#F00'
+            }
+        };
+        const missingIcon = /*#__PURE__*/ React.createElement(IconSvg, {
+            data: getIconData('icon-missing'),
+            nonScalingStroke: nonScalingStroke,
+            svgProps: missingSvgProps,
+            title: title
+        });
+        if (spin) {
+            return /*#__PURE__*/ React.createElement(IconSvg, {
+                data: getIconData('loading'),
+                nonScalingStroke: nonScalingStroke,
+                svgProps: svgProps,
+                title: title
+            });
         }
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, spin ? /*#__PURE__*/ React.createElement(AiOutlineLoading3Quarters, iconProps) : /*#__PURE__*/ React.createElement(ErrorBoundary, {
-            fallback: ()=>/*#__PURE__*/ React.createElement(AiOutlineExclamationCircle, {
-                    ...iconProps,
-                    color: '#F00'
-                })
-        }, /*#__PURE__*/ React.createElement(IconComp, {
-            id: blockId,
-            onClick: onClick || events.onClick && (()=>methods.triggerEvent({
-                    name: 'onClick'
-                })),
-            size: propertiesObj.size,
-            title: propertiesObj.title,
-            ...iconProps
+        if (pending) {
+            return /*#__PURE__*/ React.createElement(IconSvg, {
+                data: PENDING_ICON,
+                nonScalingStroke: nonScalingStroke,
+                svgProps: svgProps,
+                title: title
+            });
+        }
+        if (!data) {
+            return missingIcon;
+        }
+        return(// Keyed so an icon that failed recovers when its name changes.
+        /*#__PURE__*/ React.createElement(ErrorBoundary, {
+            key: propertiesObj.name,
+            fallback: ()=>missingIcon
+        }, /*#__PURE__*/ React.createElement(IconSvg, {
+            data: data,
+            nonScalingStroke: nonScalingStroke,
+            svgProps: svgProps,
+            title: title
         })));
-    };
-    const AntIcon = (all)=>/*#__PURE__*/ React.createElement(Icon, {
-            component: ()=>/*#__PURE__*/ React.createElement(IconBlock, all)
-        });
+    }
+    // antd's Icon renders `component` with React.createElement, so the component
+    // must keep its identity across renders or React remounts the <svg> every
+    // time. The per-render props travel through a render-function child instead.
+    const IconHost = ({ children })=>children();
+    // antd components add their classes (collapse arrow, tree switcher, menu
+    // expand icon) to the icon element they are given; their CSS expects them on
+    // the .anticon span, as on antd's own icons.
+    const AntIcon = ({ className, ...all })=>/*#__PURE__*/ React.createElement(Icon, {
+            className: className,
+            component: IconHost
+        }, ()=>/*#__PURE__*/ React.createElement(IconBlock, all));
     return withBlockDefaults(AntIcon);
-};
+}
 export default createIcon;

package/dist/createPageLifecycleManager.js

@@ -0,0 +1,172 @@
+/*
+  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.
+*/ // Page lifecycle events. Browser signals a page can react to, so apps do not
+// have to poll to notice that a tab went away and came back, that the network
+// dropped, or that the window was resized.
+//
+// - onVisible  document became visible again, or the window regained focus.
+// - onHidden   document became hidden, or the window lost focus.
+// - onOnline   the browser reports the network is back.
+// - onOffline  the browser reports the network is gone.
+// - onResize   the window was resized.
+//
+// None of these fire on the initial page load - the active state is seeded from
+// the document when the page mounts, and only transitions away from that seed
+// trigger an event.
+//
+// The same resize listener keeps _media current: once a resize settles, the
+// engine re-evaluates the blocks that read a media value that changed.
+const VISIBILITY_DEBOUNCE_MS = 300;
+const RESIZE_DEBOUNCE_MS = 150;
+function createPageLifecycleManager() {
+    let destroyed = false;
+    let removeListeners = [];
+    let timeouts = [];
+    function init(context) {
+        destroyed = false;
+        const globals = context?._internal?.lowdefy?._internal?.globals ?? {};
+        const win = globals.window;
+        const doc = globals.document;
+        // Server side render guard - there are no browser listeners to attach to.
+        if (typeof document === 'undefined' || !win || !doc) return;
+        if (typeof win.addEventListener !== 'function' || typeof doc.addEventListener !== 'function') {
+            return;
+        }
+        const events = context._internal.rootBlock?.events ?? {};
+        const configured = (name)=>!!events[name];
+        const trigger = (name, event)=>{
+            if (destroyed) return;
+            // Page lifecycle chains run like onMountAsync - non blocking, and a
+            // failure in the chain must not break the page.
+            try {
+                Promise.resolve(context._internal.triggerPageEvent({
+                    name,
+                    event
+                })).catch((error)=>{
+                    context._internal.lowdefy._internal.handleError?.(error);
+                });
+            } catch (error) {
+                context._internal.lowdefy._internal.handleError?.(error);
+            }
+        };
+        const setTimer = (fn, ms)=>{
+            const timeout = setTimeout(()=>{
+                timeouts = timeouts.filter((t)=>t !== timeout);
+                fn();
+            }, ms);
+            timeouts.push(timeout);
+            return timeout;
+        };
+        const listen = (target, name, handler)=>{
+            target.addEventListener(name, handler);
+            removeListeners.push(()=>target.removeEventListener(name, handler));
+        };
+        // --- onVisible / onHidden ------------------------------------------------
+        if (configured('onVisible') || configured('onHidden')) {
+            // Seeded from the document so the initial load never fires an event.
+            let active = doc.visibilityState !== 'hidden';
+            let pending = null;
+            const flush = ()=>{
+                const next = pending;
+                pending = null;
+                if (destroyed || !next) return;
+                // A focus that only restores a state we are already in is not an event.
+                if (next.active === active) return;
+                active = next.active;
+                trigger(next.active ? 'onVisible' : 'onHidden', {
+                    visible: next.active,
+                    reason: next.reason
+                });
+            };
+            // A tab coming back to the front fires visibilitychange and focus. Both
+            // are collected into one window so the event chain only runs once.
+            const signal = (nextActive, reason)=>{
+                if (destroyed) return;
+                if (pending) {
+                    pending.active = nextActive;
+                    // A visibilitychange is the more precise reason, so it wins the pair.
+                    if (reason === 'visibility') pending.reason = 'visibility';
+                    return;
+                }
+                pending = {
+                    active: nextActive,
+                    reason
+                };
+                setTimer(flush, VISIBILITY_DEBOUNCE_MS);
+            };
+            listen(doc, 'visibilitychange', ()=>{
+                signal(doc.visibilityState !== 'hidden', 'visibility');
+            });
+            listen(win, 'focus', ()=>signal(true, 'focus'));
+            listen(win, 'blur', ()=>signal(false, 'focus'));
+        }
+        // --- onOnline / onOffline ------------------------------------------------
+        if (configured('onOnline')) {
+            listen(win, 'online', ()=>trigger('onOnline', {
+                    online: true
+                }));
+        }
+        if (configured('onOffline')) {
+            listen(win, 'offline', ()=>trigger('onOffline', {
+                    online: false
+                }));
+        }
+        // --- onResize and _media -------------------------------------------------
+        // The operator registry holds the operators of every page loaded so far, so
+        // a page that can not reach _media attaches no listener for it.
+        const watchMedia = !!context._internal.lowdefy._internal.operators._media;
+        const onResize = configured('onResize');
+        if (watchMedia || onResize) {
+            let resizeTimeout = null;
+            // One trailing debounce for the whole page: a drag fires resize at frame
+            // rate, and this evaluates once when it settles. A requestAnimationFrame
+            // throttle would evaluate every frame of the drag instead.
+            const flush = ()=>{
+                resizeTimeout = null;
+                if (destroyed) return;
+                // Blocks first, so onResize actions see the page evaluated at the new size.
+                if (watchMedia) {
+                    context._internal.updateMedia();
+                }
+                if (onResize) {
+                    trigger('onResize', {
+                        width: win.innerWidth,
+                        height: win.innerHeight
+                    });
+                }
+            };
+            listen(win, 'resize', ()=>{
+                if (resizeTimeout) {
+                    clearTimeout(resizeTimeout);
+                    timeouts = timeouts.filter((t)=>t !== resizeTimeout);
+                }
+                resizeTimeout = setTimer(flush, RESIZE_DEBOUNCE_MS);
+            });
+        }
+    }
+    function destroy() {
+        destroyed = true;
+        removeListeners.forEach((remove)=>remove());
+        removeListeners = [];
+        timeouts.forEach((timeout)=>clearTimeout(timeout));
+        timeouts = [];
+    }
+    return {
+        init,
+        destroy
+    };
+}
+export { RESIZE_DEBOUNCE_MS, VISIBILITY_DEBOUNCE_MS };
+export default createPageLifecycleManager;

package/dist/formatIconTitle.js

@@ -0,0 +1,26 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// Pencil -> "Pencil", ArrowLeftRight -> "Arrow left right", more-vertical ->
+// "More vertical", lucide:Pencil -> "Pencil".
+function formatIconTitle(name) {
+    if (!type.isString(name)) {
+        return '';
+    }
+    const iconName = name.slice(name.indexOf(':') + 1);
+    const words = iconName.replace(/-/g, ' ').replace(/([a-z0-9])([A-Z])/g, '$1 $2').toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+export default formatIconTitle;

package/dist/getActiveLocale.js

@@ -0,0 +1,27 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+// A language tag: a 2–3 letter language and optional subtags ("en", "en-US",
+// "zh-Hant-TW"). Intl throws on anything else, such as "en_US".
+const LANGUAGE_TAG = /^[A-Za-z]{2,3}(-[A-Za-z0-9]{1,8})*$/;
+// The app's active locale that useLocale publishes, for formatting HTML dates
+// and numbers. Undefined (the browser's locale) when the app has no i18n or the
+// code is not a language tag Intl accepts.
+function getActiveLocale(window) {
+    const locale = window.__lowdefy_locale;
+    if (!type.isString(locale) || !LANGUAGE_TAG.test(locale)) return undefined;
+    return locale;
+}
+export default getActiveLocale;

package/dist/getContextKey.js

@@ -0,0 +1,29 @@
+/*
+  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.
+*/ const contextKeys = new WeakMap();
+let lastKey = 0;
+// A React key per engine context object. A page context rebuilt in place - an
+// organization switch, a dev config reset - is a new object under the same
+// instance key, and keying the page tree by it remounts the tree onto the new
+// context rather than reconciling mounted blocks against it, which React can
+// silently drop.
+function getContextKey(context) {
+    if (!contextKeys.has(context)) {
+        lastKey += 1;
+        contextKeys.set(context, lastKey);
+    }
+    return contextKeys.get(context);
+}
+export default getContextKey;

package/dist/getMessageIcon.js

@@ -0,0 +1,43 @@
+/*
+  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.
+*/ // Engine and DisplayMessage messages render through antd's App holders, above
+// the page's ConfigProvider, so each message carries its status icon itself.
+const messageIcons = {
+    error: {
+        name: 'error',
+        title: ''
+    },
+    info: {
+        name: 'info',
+        title: ''
+    },
+    loading: {
+        name: 'loading',
+        spin: true,
+        title: ''
+    },
+    success: {
+        name: 'success',
+        title: ''
+    },
+    warning: {
+        name: 'warning',
+        title: ''
+    }
+};
+function getMessageIcon({ status }) {
+    return messageIcons[status];
+}
+export default getMessageIcon;

package/dist/hasOtherRoles.js

@@ -0,0 +1,30 @@
+/*
+  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 { rolesHash, type } from '@lowdefy/helpers';
+// True when the server answered the rendered caller with other roles than the
+// page renders - a role was granted or taken away since the page loaded - so
+// _user.roles and role-gated blocks would show access the person no longer
+// holds, or hide access they now have. stamp is the response's parsed
+// x-lowdefy-caller header, user the rendered caller. A stamp that names no
+// roles (no header, or an anonymous caller) claims none.
+function hasOtherRoles({ stamp, user }) {
+    if (type.isNone(user) || type.isNone(stamp?.roles)) {
+        return false;
+    }
+    return stamp.roles !== rolesHash({
+        user
+    });
+}
+export default hasOtherRoles;

package/dist/index.js

@@ -15,5 +15,6 @@
 */ import Client from './Client.js';
 export default Client;
 export { default as getOrCreateAntdCssContainer } from './getOrCreateAntdCssContainer.js';
+export { default as IconProvider } from './IconProvider.js';
 export { default as useDarkMode } from './useDarkMode.js';
 export { default as useLocale } from './useLocale.js';