xmlui 0.9.57 → 0.9.59

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -37,6 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavPanel = exports.NavPanelContext = exports.defaultProps = void 0;
+exports.buildNavHierarchy = buildNavHierarchy;
+exports.buildLinkMap = buildLinkMap;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
@@ -46,6 +48,126 @@ const ScrollContext_1 = require("../../components-core/ScrollContext");
 const LogoNative_1 = require("../Logo/LogoNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const AppNative_1 = require("../App/AppNative");
+// Function to build navigation hierarchy from component children
+function buildNavHierarchy(children, extractValue, parent, pathSegments = []) {
+    if (!children)
+        return [];
+    const hierarchy = [];
+    // Skip non-object children
+    children.filter(child => child && typeof child === 'object').forEach((child) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (child.type === "NavLink") {
+            const label = ((_a = extractValue.asOptionalString) === null || _a === void 0 ? void 0 : _a.call(extractValue, (_b = child.props) === null || _b === void 0 ? void 0 : _b.label)) || extractValue((_c = child.props) === null || _c === void 0 ? void 0 : _c.label);
+            const to = ((_d = extractValue.asOptionalString) === null || _d === void 0 ? void 0 : _d.call(extractValue, (_e = child.props) === null || _e === void 0 ? void 0 : _e.to)) || extractValue((_f = child.props) === null || _f === void 0 ? void 0 : _f.to);
+            // Handle case where label might not be in props but in children as text
+            let finalLabel = label;
+            if (!finalLabel && ((_g = child.children) === null || _g === void 0 ? void 0 : _g.length) === 1 && child.children[0].type === "TextNode") {
+                finalLabel = extractValue((_h = child.children[0].props) === null || _h === void 0 ? void 0 : _h.value);
+            }
+            // Only include NavLinks that have both label and to values
+            if (finalLabel && to) {
+                const node = {
+                    type: "NavLink",
+                    label: finalLabel,
+                    to: to,
+                    parent: parent,
+                    pathSegments: [...pathSegments],
+                };
+                hierarchy.push(node);
+            }
+        }
+        else if (child.type === "NavGroup") {
+            const label = ((_j = extractValue.asOptionalString) === null || _j === void 0 ? void 0 : _j.call(extractValue, (_k = child.props) === null || _k === void 0 ? void 0 : _k.label)) || extractValue((_l = child.props) === null || _l === void 0 ? void 0 : _l.label);
+            // NavGroups only need a label, no "to" value required
+            if (label) {
+                const groupNode = {
+                    type: "NavGroup",
+                    label: label,
+                    parent: parent,
+                    pathSegments: [...pathSegments],
+                    children: [],
+                };
+                // Build children with this groupNode as parent and updated path
+                const newPathSegments = [...pathSegments, groupNode];
+                groupNode.children = buildNavHierarchy(child.children, extractValue, groupNode, newPathSegments);
+                hierarchy.push(groupNode);
+            }
+            else if (child.children && child.children.length > 0) {
+                // If no label but has children, process them at the current level with same parent and path
+                hierarchy.push(...buildNavHierarchy(child.children, extractValue, parent, pathSegments));
+            }
+        }
+        else if (child.children && child.children.length > 0) {
+            // Process any children that might contain NavGroup and NavLink components recursively
+            const nestedNodes = buildNavHierarchy(child.children, extractValue, parent, pathSegments);
+            if (nestedNodes.length > 0) {
+                hierarchy.push(...nestedNodes);
+            }
+        }
+    });
+    // Set navigation properties after building the hierarchy
+    setNavigationProperties(hierarchy);
+    return hierarchy;
+}
+// Helper function to set navigation properties (prevLink, nextLink, firstLink, lastLink)
+function setNavigationProperties(hierarchy) {
+    // Collect all NavLinks in traversal order
+    const allNavLinks = [];
+    function collectNavLinks(nodes) {
+        nodes.forEach((node) => {
+            if (node.type === "NavLink") {
+                allNavLinks.push(node);
+            }
+            if (node.children) {
+                collectNavLinks(node.children);
+            }
+        });
+    }
+    collectNavLinks(hierarchy);
+    // Set prevLink and nextLink for all NavLinks
+    allNavLinks.forEach((link, index) => {
+        if (index > 0) {
+            link.prevLink = allNavLinks[index - 1];
+        }
+        if (index < allNavLinks.length - 1) {
+            link.nextLink = allNavLinks[index + 1];
+        }
+    });
+    // Set firstLink and lastLink properties
+    function setFirstLastProperties(nodes) {
+        const navLinks = nodes.filter((node) => node.type === "NavLink");
+        if (navLinks.length > 0) {
+            navLinks[0].firstLink = true;
+            navLinks[navLinks.length - 1].lastLink = true;
+        }
+        // Recursively process children
+        nodes.forEach((node) => {
+            if (node.children) {
+                setFirstLastProperties(node.children);
+            }
+        });
+    }
+    setFirstLastProperties(hierarchy);
+}
+// Function to build a map of NavLinks by their "to" property
+function buildLinkMap(navLinks) {
+    const linkMap = new Map();
+    if (!navLinks)
+        return linkMap;
+    function processNodes(nodes) {
+        nodes.forEach((node) => {
+            if (node.type === "NavLink" && node.to) {
+                // If multiple items use the same "to" value, the last wins
+                linkMap.set(node.to, node);
+            }
+            if (node.children) {
+                processNodes(node.children);
+            }
+        });
+    }
+    processNodes(navLinks);
+    return linkMap;
+}
 // Default props for NavPanel component
 exports.defaultProps = {
     inDrawer: false,
@@ -54,11 +176,11 @@ exports.NavPanelContext = react_1.default.createContext(null);
 const contextValue = {
     inDrawer: true,
 };
-function DrawerNavPanel({ logoContent, children, className, style, }) {
+function DrawerNavPanel({ logoContent, children, className, style, navLinks, }) {
     const scrollContainerRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsx)(exports.NavPanelContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)("div", { ref: scrollContainerRef, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className), style: style, children: (0, jsx_runtime_1.jsxs)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavPanel_module_scss_1.default.logoWrapper, NavPanel_module_scss_1.default.inDrawer), children: logoContent || (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }), (0, jsx_runtime_1.jsx)("div", { className: NavPanel_module_scss_1.default.wrapperInner, style: style, children: children })] }) }) }));
 }
-exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer = exports.defaultProps.inDrawer, renderChild }, forwardedRef) {
+exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style, logoContent, className, inDrawer = exports.defaultProps.inDrawer, renderChild, navLinks, }, forwardedRef) {
     var _a, _b;
     const scrollContainerRef = (0, react_1.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(scrollContainerRef, forwardedRef) : scrollContainerRef;
@@ -68,8 +190,15 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
     const vertical = (_b = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _b === void 0 ? void 0 : _b.startsWith("vertical");
     const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
+    // Register the linkMap when navLinks change
+    (0, react_1.useEffect)(() => {
+        if ((appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.registerLinkMap) && navLinks) {
+            const linkMap = buildLinkMap(navLinks);
+            appLayoutContext.registerLinkMap(linkMap);
+        }
+    }, [navLinks, appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.registerLinkMap]);
     if (inDrawer) {
-        return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, children: children }));
+        return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, navLinks: navLinks, children: children }));
     }
     return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(NavPanel_module_scss_1.default.wrapper, className, {
             [NavPanel_module_scss_1.default.horizontal]: horizontal,

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

@@ -21,7 +21,7 @@ It supports both side-by-side and stacked layouts.`,
             description: "The markdown content to be displayed alongside the app",
             valueType: "string",
         },
-        sideBySide: {
+        splitView: {
             description: "Whether to render the markdown and app side by side or stacked vertically",
             valueType: "boolean",
         },
@@ -66,7 +66,26 @@ It supports both side-by-side and stacked layouts.`,
     themeVars: (0, themeVars_1.parseScssVar)(AppWithCodeView_module_scss_1.default.themeVars),
     defaultThemeVars: {},
 });
-exports.appWithCodeViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppWithCodeViewMd, ({ node, extractValue }) => {
+exports.appWithCodeViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppWithCodeViewMd, ({ node, extractValue, renderChild }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.AppWithCodeViewNative, { markdown: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.markdown), sideBySide: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.sideBySide), app: (_c = node.props) === null || _c === void 0 ? void 0 : _c.app, api: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.api), components: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.components), config: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.config), activeTheme: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.activeTheme), activeTone: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.activeTone), title: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.title), height: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.withFrame) }));
+    let renderedChildren = "";
+    // 1. Static content prop fallback
+    if (!renderedChildren) {
+        renderedChildren = extractValue.asString(node.props.markdown);
+    }
+    // 2. "data" property fallback
+    if (!renderedChildren && typeof node.props.data === "string") {
+        renderedChildren = extractValue.asString(node.props.data);
+    }
+    // 3. Children fallback
+    if (!renderedChildren) {
+        ((_a = node.children) !== null && _a !== void 0 ? _a : []).forEach((child) => {
+            const renderedChild = renderChild(child);
+            console.log("renderedChild", renderedChild);
+            if (typeof renderedChild === "string") {
+                renderedChildren += renderedChild;
+            }
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.AppWithCodeViewNative, { markdown: renderedChildren, splitView: extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.splitView), app: (_c = node.props) === null || _c === void 0 ? void 0 : _c.app, api: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.api), components: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.components), config: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.config), activeTheme: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.activeTheme), activeTone: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.activeTone), title: extractValue((_j = node.props) === null || _j === void 0 ? void 0 : _j.title), height: extractValue((_k = node.props) === null || _k === void 0 ? void 0 : _k.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.withFrame) }));
 });

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

@@ -1,22 +1,81 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppWithCodeViewNative = AppWithCodeViewNative;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AppWithCodeView_module_scss_1 = __importDefault(require("./AppWithCodeView.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const NestedAppNative_1 = require("./NestedAppNative");
 const Markdown_1 = require("../Markdown/Markdown");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const AppHeaderNative_1 = require("../AppHeader/AppHeaderNative");
+const Tooltip_1 = require("./Tooltip");
+const rx_1 = require("react-icons/rx");
+const lia_1 = require("react-icons/lia");
+const utils_1 = require("./utils");
+const AppContext_1 = require("../../components-core/AppContext");
+const classnames_1 = __importDefault(require("classnames"));
+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, sideBySide, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withFrame, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppWithCodeView_module_scss_1.default.container, {
-            [AppWithCodeView_module_scss_1.default.horizontal]: sideBySide,
-            [AppWithCodeView_module_scss_1.default.vertical]: !sideBySide,
-        }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({ [AppWithCodeView_module_scss_1.default.column]: sideBySide }), children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.NestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: sideBySide ? false : withFrame }) })] }));
+function AppWithCodeViewNative({ markdown, splitView, initiallyShowCode = false, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
+    const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
+    const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
+    const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
+    const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        const data = {
+            standalone: {
+                app,
+                components,
+                config: {
+                    name: title,
+                    themes: [],
+                    defaultTheme: activeTheme,
+                },
+                api: api,
+            },
+            options: {
+                fixedTheme: false,
+                swapped: false,
+                previewMode: false,
+                orientation: "horizontal",
+                activeTheme,
+                activeTone,
+                content: "app",
+            },
+        };
+        const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
+        window.open(useHashBasedRouting
+            ? `https://docs.xmlui.com/#/playground#${appQueryString}`
+            : `https://docs.xmlui.com/playground#${appQueryString}`, "_blank");
+    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
+    if (splitView) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, 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), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
+                                        backgroundColor: !showCode ? "transparent" : "",
+                                    }, children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
+                                        backgroundColor: showCode ? "transparent" : "",
+                                    }, children: "UI" })] }), (0, jsx_runtime_1.jsxs)("div", { 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%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false }))] })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: true }) })] }));
 }
 /**
  * Export a named default for easier imports

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

@@ -58,17 +58,23 @@ exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`marginTop-${COMP}`]: "$space-3",
         [`marginBottom-${COMP}`]: "$space-3",
-        [`padding-${COMP}`]: "$space-4",
-        [`paddingTop-${COMP}`]: "$space-2",
-        [`border-${COMP}`]: "1px solid $color-surface-100",
-        [`borderRadius-${COMP}`]: "$space-4",
+        [`padding-${COMP}`]: "0",
+        [`paddingTop-${COMP}`]: "0",
+        [`border-${COMP}`]: "0.5px solid $borderColor",
+        [`borderRadius-${COMP}`]: "$space-2",
         [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
-        [`gap-frame-${COMP}`]: "$space-4",
+        [`gap-frame-${COMP}`]: "0",
         [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
         [`boxShadow-${COMP}`]: "$boxShadow-md",
+        [`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
+        [`borderRadius-viewControls-${COMP}`]: "5px",
+        [`padding-viewControls-${COMP}`]: "$space-0_5",
+        [`padding-button-splitView-${COMP}`]: "4px 6px",
+        [`width-button-splitView-${COMP}`]: "60px",
+        [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
     },
 });
-exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue }) => {
+exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue, layoutCss }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.withFrame) }));
+    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, style: layoutCss, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup), withFrame: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.withFrame) }));
 });

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

@@ -53,22 +53,25 @@ 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, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, style, refVersion = 0, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
     const nestedAppId = (0, react_1.useId)();
-    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
+    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(refVersion);
     const theme = (0, ThemeContext_1.useTheme)();
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
     const { interceptorWorker } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    (0, react_1.useEffect)(() => {
+        setRefreshVersion(refVersion);
+    }, [refVersion]);
     //TODO illesg: we should come up with something to make sure that nestedApps doesn'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;
     //const apiUrl = api ? `/${safeId.replaceAll(":", "")}` : '';
-    const apiUrl = '';
+    const apiUrl = "";
     const mock = (0, react_1.useMemo)(() => {
         if (!api) {
             return undefined;
@@ -85,7 +88,6 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         }
         return Object.assign(Object.assign({}, apiObject), { type: "in-memory" });
     }, [api]);
-    //console.log("mock", mock);
     const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
@@ -149,13 +151,13 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { 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: {
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, 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: {
                         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-${nestedAppId}-${refreshVersion}`) }) }));
         (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), 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: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                    }, 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: () => {
                                         setRefreshVersion(refreshVersion + 1);
                                     }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }));
     }, [

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

@@ -13,8 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const NoResultNative_1 = require("./NoResultNative");
 const COMP = "NoResult";
 exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a component that displays a visual indication that some data query (search) ` +
-        `resulted in no (zero) items.`,
+    description: "`NoResult` displays a visual indication that a query or search returned nothing.",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
         icon: {

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

@@ -14,8 +14,10 @@ const NumberBoxNative_1 = require("./NumberBoxNative");
 const COMP = "NumberBox";
 exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    description: `A \`${COMP}\` component allows users to input numeric values: either integer or floating ` +
-        `point numbers. It also accepts empty values, where the stored value will be of type \`null\`.`,
+    description: "`NumberBox` provides a specialized input field for numeric values with built-in " +
+        "validation, spinner buttons, and flexible formatting options. It supports both " +
+        "integer and floating-point numbers, handles empty states as null values, and " +
+        "integrates seamlessly with form validation.",
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),

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

@@ -8,9 +8,11 @@ const container_helpers_1 = require("../container-helpers");
 const OptionNative_1 = require("./OptionNative");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
-        `(such as \`Select\`, \`AutoComplete\`, and others) may use nested \`Option\` instances ` +
-        `from which the user can select.`,
+    description: "`Option` defines selectable items for choice-based components, providing both " +
+        "the underlying value and display text for selection interfaces. It serves as " +
+        "a non-visual data structure that describes individual choices within " +
+        "[Select](/components/Select), [AutoComplete](/components/AutoComplete), " +
+        "and other selection components.",
     props: {
         label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
             `\`Option\` will use the \`value\` as the label.`),

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

@@ -7,8 +7,8 @@ const renderers_1 = require("../../components-core/renderers");
 const PageMetaTilteNative_1 = require("./PageMetaTilteNative");
 const COMP = "PageMetaTitle";
 exports.PageMetaTitleMd = (0, ComponentDefs_1.createMetadata)({
-    description: `A PageMetaTitle component allows setting up (or changing) the app title to display with the ` +
-        `current browser tab.`,
+    description: "`PageMetaTitle` dynamically sets or updates the browser tab title, enabling " +
+        "pages and components to override the default application name with context-specific titles.",
     props: {
         value: {
             description: `This property sets the page's title to display in the browser tab.`,

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

@@ -10,9 +10,11 @@ const PagesNative_1 = require("./PagesNative");
 const PAGE = "Page";
 exports.PageMd = (0, ComponentDefs_1.createMetadata)({
     status: "stable",
-    docFolder: PAGE,
-    description: `The \`${PAGE}\` component defines what content is displayed when the user navigates ` +
-        `to a particular URL that is associated with the page.`,
+    docFolder: "Pages",
+    description: "`Page` defines route endpoints within an application, mapping specific URL " +
+        "patterns to content that displays when users navigate to those routes. Each " +
+        "Page represents a distinct view or screen in your single-page application's " +
+        "routing system.",
     props: {
         //TODO illesg rename to path
         url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content. If not set, the page is not available.`),
@@ -25,15 +27,15 @@ exports.pageRenderer = (0, renderers_1.createComponentRenderer)(PAGE, exports.Pa
 });
 const COMP = "Pages";
 exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` component is used as a container for [\`Page\`](/components/Page) components ` +
-        `within an [\`App\`](/components/App).`,
+    description: "`Pages` serves as the routing coordinator within an [App](/components/App), " +
+        "managing which [Page](/components/Page)  displays based on the current URL.",
     props: {
-        defaultRoute: {
-            description: `The default route when displaying the app`,
-            defaultValue: PagesNative_1.defaultProps.defaultRoute,
+        fallbackPath: {
+            description: `The fallback path when the current URL does not match any of the paths of the pages.`,
+            defaultValue: PagesNative_1.defaultProps.fallbackPath,
         },
     },
 });
 exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {
-    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { defaultRoute: extractValue(node.props.defaultRoute), node: node, renderChild: renderChild, extractValue: extractValue }));
+    return ((0, jsx_runtime_1.jsx)(PagesNative_1.Pages, { fallbackPath: extractValue(node.props.fallbackPath), node: node, renderChild: renderChild, extractValue: extractValue }));
 });

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -23,12 +23,17 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
+const AppLayoutContext_1 = require("../App/AppLayoutContext");
 // Default props for Pages component
 exports.defaultProps = {
-    defaultRoute: "/"
+    fallbackPath: "/",
 };
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
+    var _a;
     const params = (0, react_2.useParams)();
+    const location = (0, react_2.useLocation)();
+    const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const linkInfo = ((_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.linkMap) === null || _a === void 0 ? void 0 : _a.get(location.pathname)) || {};
     //we need to wrap the child route in a container to make sure the route params are available.
     // we do this wrapping by providing an empty object to vars.
     // this way it becomes an 'implicit' container (vars/state inside this container is propagated to the parent)
@@ -54,7 +59,7 @@ function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layou
     }, [style]);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Pages_module_scss_1.default.wrapper, "xmlui-page-root"), style: wrapperStyle, children: renderChild(wrappedWithContainer, layoutContext) }, JSON.stringify(params)));
 }
-function Pages({ node, renderChild, extractValue, defaultRoute }) {
+function Pages({ node, renderChild, extractValue, fallbackPath }) {
     var _a;
     const routes = [];
     const restChildren = [];
@@ -68,5 +73,5 @@ function Pages({ node, renderChild, extractValue, defaultRoute }) {
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Routes, { children: [routes.map((child, i) => {
                         return ((0, jsx_runtime_1.jsx)(react_2.Route, { path: extractValue(child.props.url), element: renderChild(child) }, i));
-                    }), !!defaultRoute && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: defaultRoute, replace: true }) })] }), renderChild(restChildren)] }));
+                    }), !!fallbackPath && (0, jsx_runtime_1.jsx)(react_2.Route, { path: "*", element: (0, jsx_runtime_1.jsx)(react_2.Navigate, { to: fallbackPath, replace: true }) })] }), renderChild(restChildren)] }));
 }

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

@@ -12,7 +12,10 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const ProgressBarNative_1 = require("./ProgressBarNative");
 const COMP = "ProgressBar";
 exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
-    description: `A \`${COMP}\` component visually represents the progress of a task or process.`,
+    description: "`ProgressBar` provides a visual indicator showing the completion percentage " +
+        "of tasks, processes, or any measurable progress. It displays as a horizontal " +
+        "bar that fills from left to right based on the provided value between 0 " +
+        "(empty) and 1 (complete).",
     props: {
         value: {
             description: `This property defines the progress value with a number between 0 and 1.`,

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

@@ -8,8 +8,8 @@ const container_helpers_1 = require("../container-helpers");
 const QueueNative_1 = require("./QueueNative");
 const COMP = "Queue";
 exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`Queue\` component provides an API to enqueue elements and defines events to process ` +
-        `queued elements in a FIFO order.`,
+    description: "`Queue` manages sequential processing of items in FIFO (first-in, first-out) " +
+        "order. It is a non-visual component but provides UI progress reporting and result display.",
     props: {
         progressFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays " +
             "progress information whenever, the queue's \`progressReport\` function " +

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

@@ -14,9 +14,10 @@ const RadioGroupNative_1 = require("./RadioGroupNative");
 const COMP = "RadioGroup";
 const RGOption = `RadioGroupOption`;
 exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
-    description: `The \`${COMP}\` input component is a group of radio buttons ` +
-        `([\`RadioGroupOption\`](./RadioGroupOption.mdx) components) that allow users to select ` +
-        `only one option from the group at a time.`,
+    description: "`RadioGroup` creates a mutually exclusive selection interface where users can " +
+        "choose only one option from a group of radio buttons. It manages the selection " +
+        "state and ensures that selecting one option automatically deselects all others in " +
+        "the group.",
     props: {
         initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: RadioGroupNative_1.defaultProps.initialValue }),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
@@ -40,20 +41,21 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
         [`borderWidth-${RGOption}`]: "1px",
-        [`backgroundColor-checked-${RGOption}-indicator`]: `$backgroundColor-primary`,
-        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
-        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`fontSize-${RGOption}`]: "$fontSize-small",
-        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
-        [`textColor-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
-        [`textColor-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
-        [`textColor-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
-        [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+        [`borderWidth-${RGOption}-validation`]: `2px`,
         [`borderColor-${RGOption}-default`]: "$color-surface-500",
+        [`borderColor-checked-${RGOption}`]: "$color-primary-500",
         [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
         [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}--disabled`]: "$backgroundColor--disabled",
+        [`backgroundColor-checked-${RGOption}`]: "$color-primary-500",
+        [`backgroundColor-${RGOption}-checked--disabled`]: `$textColor--disabled`,
+        [`backgroundColor-checked-indicator-${RGOption}`]: `transparent`,
+        [`backgroundColor-${RGOption}-checked-indicator--disabled`]: `transparent`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-success`,
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {