xmlui 0.9.72 → 0.9.74

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.72",
+    "version": "0.9.74",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Markdown/MarkdownNative.js

@@ -197,11 +197,17 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports
                     let label = children;
                     // --- Extract the optional target
                     if (typeof children === "string") {
-                        const match = children.match(/^(.*)\|\s*target\s*=\s*([_a-zA-Z0-9-]+)\s*$/);
+                        // Match a non-escaped pipe followed by target specification
+                        const match = children.match(/^((?:[^|]|\\\|)*[^\\])\|\s*target\s*=\s*([_a-zA-Z0-9-]+)\s*$/);
                         if (match) {
-                            label = match[1].trim();
+                            // Unescape any escaped pipes in the label
+                            label = match[1].trim().replace(/\\\|/g, '|');
                             target = match[2];
                         }
+                        else {
+                            // If no target specification, unescape any escaped pipes in the whole text
+                            label = children.replace(/\\\|/g, '|');
+                        }
                     }
                     return ((0, jsx_runtime_1.jsx)(LinkNative_1.LinkNative, Object.assign({ to: href, target: target }, props, { children: label })));
                 },
@@ -238,7 +244,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = exports
                     const dataContentBase64 = props === null || props === void 0 ? void 0 : props["data-pg-content"];
                     const jsonContent = atob(dataContentBase64);
                     const appProps = JSON.parse(jsonContent);
-                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, noHeader: (_b = appProps.noHeader) !== null && _b !== void 0 ? _b : false, splitView: (_c = appProps.splitView) !== null && _c !== void 0 ? _c : false, initiallyShowCode: (_d = appProps.initiallyShowCode) !== null && _d !== void 0 ? _d : false, popOutUrl: appProps.popOutUrl }));
+                    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { markdown: markdownContent, app: appProps.app, config: appProps.config, components: appProps.components, api: appProps.api, activeTheme: appProps.activeTheme, activeTone: appProps.activeTone, title: appProps.name, height: appProps.height, allowPlaygroundPopup: !appProps.noPopup, withFrame: appProps.noFrame ? false : true, noHeader: (_b = appProps.noHeader) !== null && _b !== void 0 ? _b : false, splitView: (_c = appProps.splitView) !== null && _c !== void 0 ? _c : false, initiallyShowCode: (_d = appProps.initiallyShowCode) !== null && _d !== void 0 ? _d : false, popOutUrl: appProps.popOutUrl, immediate: appProps.immediate, withSplashScreen: appProps.withSplashScreen }));
                 },
                 section(_a) {
                     var { children } = _a, props = __rest(_a, ["children"]);

package/dist/scripts/src/components/Markdown/utils.js

@@ -54,6 +54,14 @@ function parseSegmentProps(input) {
     if (/\bnoFrame\b/.test(input)) {
         segment.noFrame = true;
     }
+    // --- Match the "immediate" flag
+    if (/\bimmediate\b/.test(input)) {
+        segment.immediate = true;
+    }
+    // --- Match the "withSplashScreen" flag
+    if (/\bwithSplashScreen\b/.test(input)) {
+        segment.withSplashScreen = true;
+    }
     // --- Match the "noHeader" flag
     if (/\bnoHeader\b/.test(input)) {
         segment.noHeader = true;
@@ -200,7 +208,7 @@ function parsePlaygroundPattern(content) {
     }
 }
 function convertPlaygroundPatternToMarkdown(content) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const pattern = parsePlaygroundPattern(content);
     // --- Determine max order for segments
     let maxOrder = 0;
@@ -236,6 +244,8 @@ function convertPlaygroundPatternToMarkdown(content) {
         splitView: (_g = pattern.default) === null || _g === void 0 ? void 0 : _g.splitView,
         initiallyShowCode: (_h = pattern.default) === null || _h === void 0 ? void 0 : _h.initiallyShowCode,
         popOutUrl: (_j = pattern.default) === null || _j === void 0 ? void 0 : _j.popOutUrl,
+        immediate: (_k = pattern.default) === null || _k === void 0 ? void 0 : _k.immediate,
+        withSplashScreen: (_l = pattern.default) === null || _l === void 0 ? void 0 : _l.withSplashScreen,
     };
     // --- Extract optional playground attributes
     if (pattern.default.height) {
@@ -251,15 +261,15 @@ function convertPlaygroundPatternToMarkdown(content) {
     for (let i = 0; i <= maxOrder; i++) {
         let segment;
         let type = "";
-        if (((_k = pattern.app) === null || _k === void 0 ? void 0 : _k.order) === i) {
+        if (((_m = pattern.app) === null || _m === void 0 ? void 0 : _m.order) === i) {
             segment = pattern.app;
             type = "app";
         }
-        else if (((_l = pattern.config) === null || _l === void 0 ? void 0 : _l.order) === i) {
+        else if (((_o = pattern.config) === null || _o === void 0 ? void 0 : _o.order) === i) {
             segment = pattern.config;
             type = "config";
         }
-        else if (((_m = pattern.api) === null || _m === void 0 ? void 0 : _m.order) === i) {
+        else if (((_p = pattern.api) === null || _p === void 0 ? void 0 : _p.order) === i) {
             segment = pattern.api;
             type = "api";
         }
@@ -320,7 +330,7 @@ function convertPlaygroundPatternToMarkdown(content) {
                 if (segment.display) {
                     markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
                 }
-                (_o = pgContent.components) !== null && _o !== void 0 ? _o : (pgContent.components = []);
+                (_q = pgContent.components) !== null && _q !== void 0 ? _q : (pgContent.components = []);
                 pgContent.components.push(segment.content);
                 break;
             case "desc":

package/dist/scripts/src/components/NestedApp/AppWithCodeViewNative.js

@@ -29,7 +29,7 @@ const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
-function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader = false, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
+function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader = false, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withSplashScreen, immediate }) {
     const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
@@ -60,20 +60,20 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
         window.open(`${safePopOutUrl}/#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, safePopOutUrl]);
     if (withFrame) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
-                                                [NestedApp_module_scss_1.default.show]: showCode,
-                                                [NestedApp_module_scss_1.default.hide]: !showCode,
-                                            }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
-                                                [NestedApp_module_scss_1.default.show]: !showCode,
-                                                [NestedApp_module_scss_1.default.hide]: showCode,
-                                            }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
-                                            openPlayground();
-                                        }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
-                                            setShowCode(false);
-                                            setRefreshVersion(refreshVersion + 1);
-                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && ((0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, className: NestedApp_module_scss_1.default.splitViewMarkdown, children: markdown })), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion }))] })] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && !splitView && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                                        [NestedApp_module_scss_1.default.show]: showCode,
+                                                        [NestedApp_module_scss_1.default.hide]: !showCode,
+                                                    }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                                        [NestedApp_module_scss_1.default.show]: !showCode,
+                                                        [NestedApp_module_scss_1.default.hide]: showCode,
+                                                    }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                                    openPlayground();
+                                                }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                                    setShowCode(false);
+                                                    setRefreshVersion(refreshVersion + 1);
+                                                }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [(0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewMarkdown, { [NestedApp_module_scss_1.default.hidden]: !showCode }), children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { className: (0, classnames_1.default)({ [NestedApp_module_scss_1.default.hidden]: showCode }), height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion, withSplashScreen: withSplashScreen, immediate: immediate })] })] })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: height, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: height, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion, withSplashScreen: withSplashScreen, immediate: immediate })] }));
 }
 /**
  * Export a named default for easier imports

package/dist/scripts/src/components/NestedApp/NestedApp.js

@@ -59,9 +59,9 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`padding-viewControls-${COMP}`]: "$space-0_5",
         [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
         // --- Split view styles
-        [`padding-button-splitView-${COMP}`]: "4px 6px",
+        [`padding-button-splitView-${COMP}`]: "1px 6px",
         [`width-button-splitView-${COMP}`]: "60px",
-        [`width-logo-splitView-${COMP}`]: "2rem",
+        [`width-logo-splitView-${COMP}`]: "1.5rem",
         [`height-logo-splitView-${COMP}`]: "2rem",
         [`backgroundColor-button-splitView-${COMP}--active`]: "$color-surface-0",
         [`color-button-splitView-${COMP}`]: "$color-surface-600",

package/dist/scripts/src/components/NestedApp/NestedAppNative.js

@@ -8,6 +8,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -27,17 +38,27 @@ const ComponentRegistryContext_1 = require("../ComponentRegistryContext");
 const IndexerContext_1 = require("../App/IndexerContext");
 const useApiInterceptorContext_1 = require("../../components-core/interception/useApiInterceptorContext");
 const constants_1 = require("../../components-core/constants");
-function LazyNestedApp(props) {
-    const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
+const hooks_1 = require("../../components-core/utils/hooks");
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+function AnimatedLogo() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.logoWrapper, children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.04674 19.3954C8.2739 19.3954 7.60226 19.2265 7.03199 18.8887C6.47443 18.5384 6.0435 18.0505 5.73938 17.425C5.43526 16.7869 5.2832 16.0362 5.2832 15.173V9.89961C5.2832 9.7745 5.32771 9.66815 5.41637 9.58059C5.50502 9.493 5.61275 9.44922 5.73938 9.44922H7.41222C7.55157 9.44922 7.6593 9.493 7.73524 9.58059C7.8239 9.66815 7.86841 9.7745 7.86841 9.89961V15.0604C7.86841 16.6117 8.55895 17.3874 9.94021 17.3874C10.5991 17.3874 11.1187 17.181 11.4988 16.7681C11.8917 16.3553 12.0881 15.786 12.0881 15.0604V9.89961C12.0881 9.7745 12.1325 9.66815 12.2211 9.58059C12.3098 9.493 12.4175 9.44922 12.5443 9.44922H14.217C14.3436 9.44922 14.4513 9.493 14.54 9.58059C14.6288 9.66815 14.6732 9.7745 14.6732 9.89961V18.7574C14.6732 18.8825 14.6288 18.9888 14.54 19.0764C14.4513 19.164 14.3436 19.2078 14.217 19.2078H12.6773C12.538 19.2078 12.4239 19.164 12.3352 19.0764C12.2591 18.9888 12.2211 18.8825 12.2211 18.7574V17.988C11.879 18.4258 11.4545 18.7699 10.9476 19.0201C10.4407 19.2703 9.80704 19.3954 9.04674 19.3954Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { d: "M17.6397 19.2104C17.5129 19.2104 17.4052 19.1666 17.3165 19.079C17.2279 18.9914 17.1835 18.8851 17.1835 18.76V9.90221C17.1835 9.7771 17.2279 9.67075 17.3165 9.58319C17.4052 9.4956 17.5129 9.45182 17.6397 9.45182H19.2174C19.3567 9.45182 19.4644 9.4956 19.5404 9.58319C19.6292 9.67075 19.6736 9.7771 19.6736 9.90221V18.76C19.6736 18.8851 19.6292 18.9914 19.5404 19.079C19.4644 19.1666 19.3567 19.2104 19.2174 19.2104H17.6397ZM17.5636 7.8379C17.4243 7.8379 17.3102 7.80038 17.2215 7.72531C17.1454 7.63773 17.1074 7.52514 17.1074 7.38751V6.03633C17.1074 5.91122 17.1454 5.80487 17.2215 5.71731C17.3102 5.62972 17.4243 5.58594 17.5636 5.58594H19.2933C19.4327 5.58594 19.5467 5.62972 19.6354 5.71731C19.7242 5.80487 19.7686 5.91122 19.7686 6.03633V7.38751C19.7686 7.52514 19.7242 7.63773 19.6354 7.72531C19.5467 7.80038 19.4327 7.8379 19.2933 7.8379H17.5636Z", fill: "#3367CC" }), (0, jsx_runtime_1.jsx)("path", { className: NestedApp_module_scss_1.default.animatedLogoPath, d: "M23.0215 2.81748H2.53486V23.044H23.0215V2.81748Z", fill: "none", stroke: "#3367CC", strokeWidth: "0.75" })] }) }));
+}
+function LazyNestedApp(_a) {
+    var { immediate } = _a, restProps = __rest(_a, ["immediate"]);
+    const [shouldRender, setShouldRender] = (0, react_1.useState)(immediate || false);
+    console.log("Rendering NestedApp with props:", restProps);
     (0, react_1.useEffect)(() => {
-        (0, react_1.startTransition)(() => {
-            setShouldRender(true);
-        });
-    }, []);
+        if (!immediate) {
+            (0, react_1.startTransition)(() => {
+                setShouldRender(true);
+            });
+        }
+    }, [immediate]);
     if (!shouldRender) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(NestedApp, Object.assign({}, props));
+    return (0, jsx_runtime_1.jsx)(NestedApp, Object.assign({}, restProps));
 }
 function IndexAwareNestedApp(props) {
     const { indexing } = (0, IndexerContext_1.useIndexerContext)();
@@ -46,7 +67,7 @@ function IndexAwareNestedApp(props) {
     }
     return (0, jsx_runtime_1.jsx)(LazyNestedApp, Object.assign({}, props));
 }
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, height, style, refreshVersion }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, height, style, refreshVersion, withSplashScreen = false, className, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -54,6 +75,8 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const parentInterceptorContext = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    const [initialized, setInitialized] = (0, react_1.useState)(!withSplashScreen);
+    const [revealAnimationFinished, setRevealAnimationFinished] = (0, react_1.useState)(false);
     //TODO illesg: we should come up with something to make sure that nestedApps don't overwrite each other's mocked api endpoints
     //   disabled for now, as it messes up the paths of not mocked APIs (e.g. resources/{staticJsonfiles})
     //const safeId = playgroundId || nestedAppId;
@@ -75,7 +98,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         }
         return Object.assign(Object.assign({}, apiObject), { type: "in-memory" });
     }, [api]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         if (!shadowRef.current && rootRef.current) {
             // Clone existing style and link tags
             shadowRef.current = rootRef.current.attachShadow({ mode: "open" });
@@ -120,6 +143,9 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             contentRootRef.current = client_1.default.createRoot(shadowRef.current);
         }
     }, []);
+    const onInit = (0, react_1.useCallback)(() => {
+        setInitialized(true);
+    }, []);
     (0, react_1.useEffect)(() => {
         var _a;
         let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(app);
@@ -143,11 +169,12 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { parentInterceptorContext: parentInterceptorContext, interceptor: mock, waitForApiInterceptor: true, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { isNested: true, previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { parentInterceptorContext: parentInterceptorContext, interceptor: mock, waitForApiInterceptor: true, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { onInit: onInit, isNested: true, previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
                             compoundComponents,
                             themes: config === null || config === void 0 ? void 0 : config.themes,
                         }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }) }) }, `app-${refreshVersion}`) }));
     }, [
+        onInit,
         activeTheme,
         app,
         componentRegistry,
@@ -163,7 +190,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         style,
         theme.themeStyles,
         toneToApply,
-        refreshVersion
+        refreshVersion,
     ]);
     const mountedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
@@ -180,11 +207,12 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             }, 0);
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {
-                width: "100%",
-                height: "100%",
-                overflow: "auto",
-                position: "relative",
-                isolation: "isolate",
-            } }) }));
+    const animationFinished = (0, react_1.useCallback)(() => {
+        setRevealAnimationFinished(true);
+    }, []);
+    const shouldAnimate = withSplashScreen && !revealAnimationFinished;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NestedApp_module_scss_1.default.nestedAppPlaceholder, className), children: [shouldAnimate && (0, jsx_runtime_1.jsx)(AnimatedLogo, {}), (0, jsx_runtime_1.jsx)("div", { ref: rootRef, onTransitionEnd: animationFinished, className: (0, classnames_1.default)(NestedApp_module_scss_1.default.nestedAppRoot, {
+                    [NestedApp_module_scss_1.default.shouldAnimate]: shouldAnimate,
+                    [NestedApp_module_scss_1.default.initialized]: initialized,
+                }) })] }));
 }

package/dist/scripts/src/components-core/event-handlers.js

@@ -33,8 +33,9 @@ function useMouseEventHandlers(lookupEvent, shouldSkip) {
             ? undefined
             : lookupEvent(eventName);
         const eventHandler = (0, react_1.useCallback)((event) => {
+            // If the event handler is not defined, we do nothing
             if (onEvent) {
-                event.stopPropagation();
+                event === null || event === void 0 ? void 0 : event.stopPropagation();
                 onEvent(event);
             }
         }, [onEvent]);

package/dist/scripts/src/components-core/interception/ApiInterceptor.js

@@ -147,7 +147,12 @@ class ApiInterceptor {
                 requestHeaders: Object.fromEntries(req.headers.entries()) || {},
             }, operation);
             //artificial delay for http requests
-            yield (0, msw_1.delay)();
+            if (this.apiDef.artificialDelay === undefined) {
+                yield (0, msw_1.delay)("real");
+            }
+            else if (this.apiDef.artificialDelay !== 0) {
+                yield (0, msw_1.delay)(this.apiDef.artificialDelay);
+            }
             const cookieService = new Backend_1.CookieService();
             const headerService = new Backend_1.HeaderService();
             try {

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -39,7 +39,7 @@ function safeGetComputedStyle(root) {
  *  - Providing xmlui-defined methods and properties for apps, such as
  *    `activeThemeId`, `navigate`, `toast`, and many others.
  */
-function AppContent({ rootContainer, routerBaseName, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, children, }) {
+function AppContent({ rootContainer, routerBaseName, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, children, onInit, }) {
     const [loggedInUser, setLoggedInUser] = (0, react_1.useState)(null);
     const debugView = (0, DebugViewProvider_1.useDebugView)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
@@ -167,6 +167,9 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
     const location = (0, react_2.useLocation)();
     const lastHash = (0, react_1.useRef)("");
     const [scrollForceRefresh, setScrollForceRefresh] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        onInit === null || onInit === void 0 ? void 0 : onInit();
+    }, [onInit]);
     // useEffect(()=>{
     //   if(isWindowFocused){
     //     if ("serviceWorker" in navigator) {

package/dist/scripts/src/components-core/rendering/AppRoot.js

@@ -27,7 +27,7 @@ exports.queryClient = new react_query_1.QueryClient({
  * from either code-behind files or inlined markup expressions) and executes
  * the app accordingly.
  */
-function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested = false, }) {
+function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested = false, onInit, }) {
     // --- Make sure, the root node is wrapped in a `Theme` component. Also,
     // --- the root node must be wrapped in a `Container` component managing
     // --- the app's top-level state.
@@ -58,7 +58,7 @@ function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTest
     const enhancedGlobalProps = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, globalProps), { isNested })), [globalProps, isNested]);
     // --- Render the app providing a component registry (in which the engine finds a
     // --- component definition by its name). Ensure the app has a context for debugging.
-    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ComponentProvider_1.ComponentProvider, { contributes: contributes, extensionManager: extensionManager, children: (0, jsx_runtime_1.jsx)(DebugViewProvider_1.DebugViewProvider, { debugConfig: globalProps === null || globalProps === void 0 ? void 0 : globalProps.debug, children: (0, jsx_runtime_1.jsx)(AppWrapper_1.AppWrapper, { projectCompilation: projectCompilation, resourceMap: resourceMap, apiInterceptor: apiInterceptor, node: rootNode, contributes: contributes, resources: resources, routerBaseName: routerBaseName, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, defaultTheme: defaultTheme, defaultTone: defaultTone, globalProps: enhancedGlobalProps, standalone: standalone, trackContainerHeight: trackContainerHeight, previewMode: previewMode, sources: sources, onInit: onInit, children: children }) }) }));
 }
 /**
  *

package/dist/scripts/src/components-core/rendering/AppWrapper.js

@@ -24,7 +24,7 @@ const LoggerInitializer_1 = require("../../logging/LoggerInitializer");
  * that provide app functionality and services requiring unique interaction with
  * the browser or the React environment.
  */
-const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, children, projectCompilation, }) => {
+const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "", contributes = constants_1.EMPTY_OBJECT, globalProps, standalone, trackContainerHeight, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, resourceMap, sources, children, projectCompilation, onInit, }) => {
     var _a;
     if (previewMode) {
         // --- Prevent leaking the meta items to the parent document,
@@ -38,7 +38,7 @@ const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "",
     // --- provide the app functionality and services. These components are
     // --- wrapped in other components that provide the necessary environment
     // --- for the app to run.
-    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: children }) }) }) }) })] })] }));
+    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: children }) }) }) }) })] })] }));
     // --- Select the router type for the app
     const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
     const shouldSkipClientRouter = previewMode ? false : (typeof window === "undefined" || process.env.VITE_REMIX);

package/dist/scripts/src/components-core/utils/date-utils.js

@@ -82,9 +82,10 @@ function isDateTomorrow(date) {
  * Returns strings like "now", "12 seconds ago", "3 hours ago", "today", "yesterday", "3 weeks ago", etc.
  *
  * @param date The date to format
+ * @param shortFormat When true, uses abbreviated time units (e.g. "s" instead of "seconds")
  * @returns A human-readable elapsed time string
  */
-function formatHumanElapsedTime(date) {
+function formatHumanElapsedTime(date, shortFormat = false) {
     const now = new Date();
     const inputDate = new Date(date);
     // Calculate time difference in milliseconds
@@ -101,21 +102,55 @@ function formatHumanElapsedTime(date) {
     const diffWeeks = Math.floor(diffDays / 7);
     const diffMonths = Math.floor(diffDays / 30);
     const diffYears = Math.floor(diffDays / 365);
+    // Define unit formats based on shortFormat parameter
+    const units = {
+        second: {
+            singular: shortFormat ? 's' : 'second',
+            plural: shortFormat ? 's' : 'seconds'
+        },
+        minute: {
+            singular: shortFormat ? 'min' : 'minute',
+            plural: shortFormat ? 'min' : 'minutes'
+        },
+        hour: {
+            singular: shortFormat ? 'hr' : 'hour',
+            plural: shortFormat ? 'hrs' : 'hours'
+        },
+        day: {
+            singular: shortFormat ? 'd' : 'day',
+            plural: shortFormat ? 'd' : 'days'
+        },
+        week: {
+            singular: shortFormat ? 'wk' : 'week',
+            plural: shortFormat ? 'wks' : 'weeks'
+        },
+        month: {
+            singular: shortFormat ? 'mo' : 'month',
+            plural: shortFormat ? 'mos' : 'months'
+        },
+        year: {
+            singular: shortFormat ? 'y' : 'year',
+            plural: shortFormat ? 'yrs' : 'years'
+        }
+    };
     // Just now (within 10 seconds)
     if (diffSeconds < 10) {
         return "now";
     }
     // Seconds ago (up to 1 minute)
     if (diffSeconds < 60) {
-        return `${diffSeconds} second${diffSeconds === 1 ? "" : "s"} ago`;
+        const unit = diffSeconds === 1 ? units.second.singular : units.second.plural;
+        return `${diffSeconds} ${unit} ago`;
     }
     // Minutes ago (up to 1 hour)
     if (diffMinutes < 60) {
-        return `${diffMinutes} minute${diffMinutes === 1 ? "" : "s"} ago`;
+        const unit = diffMinutes === 1 ? units.minute.singular : units.minute.plural;
+        return `${diffMinutes} ${unit} ago`;
     }
     // Hours ago (up to today)
     if ((0, date_fns_1.isToday)(inputDate)) {
-        return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
+        const unit = diffHours === 1 ? units.hour.singular : units.hour.plural;
+        return `${diffHours} ${unit} ago`;
     }
     // Yesterday
     if ((0, date_fns_1.isYesterday)(inputDate)) {
@@ -123,16 +158,20 @@ function formatHumanElapsedTime(date) {
     }
     // Days ago (up to 1 week)
     if (diffDays < 7) {
-        return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
+        const unit = diffDays === 1 ? units.day.singular : units.day.plural;
+        return `${diffDays} ${unit} ago`;
     }
     // Weeks ago (up to 4 weeks / 1 month)
     if (diffWeeks < 4) {
-        return `${diffWeeks} week${diffWeeks === 1 ? "" : "s"} ago`;
+        const unit = diffWeeks === 1 ? units.week.singular : units.week.plural;
+        return `${diffWeeks} ${unit} ago`;
     }
     // Months ago (up to 12 months / 1 year)
     if (diffMonths < 12) {
-        return `${diffMonths} month${diffMonths === 1 ? "" : "s"} ago`;
+        const unit = diffMonths === 1 ? units.month.singular : units.month.plural;
+        return `${diffMonths} ${unit} ago`;
     }
     // Years ago
-    return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
+    const unit = diffYears === 1 ? units.year.singular : units.year.plural;
+    return `${diffYears} ${unit} ago`;
 }

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 import { default as default_2 } from 'react';
 import { default as default_3 } from 'react/jsx-runtime';
 import { DefaultToastOptions } from 'react-hot-toast';
+import { DelayMode } from 'msw';
 import { ErrorInfo } from 'react';
 import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -38,6 +39,7 @@ declare const alignmentOptionValues: readonly ["start", "center", "end"];
 declare type ApiInterceptorDefinition = {
     type?: string;
     config?: Record<string, any>;
+    artificialDelay?: number | DelayMode;
     schemaDescriptor?: SchemaDescriptor;
     apiUrl?: string;
     initialData?: Record<string, any[]> | (() => Promise<Record<string, any[]>>);
@@ -140,7 +142,7 @@ declare type AppLayoutType = (typeof appLayoutNames)[number];
  * from either code-behind files or inlined markup expressions) and executes
  * the app accordingly.
  */
-declare function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested, }: AppWrapperProps & {
+declare function AppRoot({ apiInterceptor, contributes, node, decorateComponentsWithTestId, debugEnabled, defaultTheme, defaultTone, resources, globalProps, standalone, trackContainerHeight, routerBaseName, previewMode, resourceMap, sources, extensionManager, children, projectCompilation, isNested, onInit, }: AppWrapperProps & {
     extensionManager?: StandaloneExtensionManager;
     isNested?: boolean;
 }): JSX_2.Element;
@@ -163,6 +165,7 @@ declare type AppWrapperProps = {
     sources?: Record<string, string>;
     projectCompilation?: ProjectCompilation;
     children?: ReactNode;
+    onInit?: () => void;
 };
 
 declare type ARRAY_DESTRUCTURE = typeof T_ARRAY_DESTRUCTURE;
@@ -917,7 +920,7 @@ declare type Message = ValueOrFunction<Renderable, Toast>;
  */
 declare type ModuleErrors = Record<string, ScriptParserErrorMessage[]>;
 
-declare function NestedApp({ api, app, components, config, activeTheme, activeTone, height, style, refreshVersion }: NestedAppProps): JSX_2.Element;
+declare function NestedApp({ api, app, components, config, activeTheme, activeTone, height, style, refreshVersion, withSplashScreen, className, }: NestedAppProps): JSX_2.Element;
 
 declare type NestedAppProps = {
     api?: any;
@@ -929,6 +932,8 @@ declare type NestedAppProps = {
     height?: string | number;
     style?: CSSProperties;
     refreshVersion?: number;
+    withSplashScreen?: boolean;
+    className?: string;
 };
 
 declare type NO_ARG_EXPRESSION = typeof T_NO_ARG_EXPRESSION;