xmlui 0.9.60 → 0.9.62

package/dist/scripts/src/components/NavGroup/NavGroupNative.js

@@ -18,6 +18,7 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const NavGroupContext_1 = require("./NavGroupContext");
+const AppNative_1 = require("../App/AppNative");
 exports.defaultProps = {
     iconHorizontalExpanded: "chevronright",
     iconHorizontalCollapsed: "chevronright",
@@ -28,6 +29,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    const layoutIsVertical = !!appLayoutContext && (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext.layout).includes("vertical");
     let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
         (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-sticky" ||
         (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header";
@@ -37,6 +39,7 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const navGroupContextValue = (0, react_1.useMemo)(() => {
         return {
             level: level + 1,
+            layoutIsVertical,
             iconHorizontalCollapsed: iconHorizontalCollapsed !== null && iconHorizontalCollapsed !== void 0 ? iconHorizontalCollapsed : exports.defaultProps.iconHorizontalCollapsed,
             iconHorizontalExpanded: iconHorizontalExpanded !== null && iconHorizontalExpanded !== void 0 ? iconHorizontalExpanded : exports.defaultProps.iconHorizontalExpanded,
             iconVerticalCollapsed: iconVerticalCollapsed !== null && iconVerticalCollapsed !== void 0 ? iconVerticalCollapsed : exports.defaultProps.iconVerticalCollapsed,
@@ -48,11 +51,12 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
         iconVerticalCollapsed,
         iconVerticalExpanded,
         level,
+        layoutIsVertical,
     ]);
     return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false, }, ref) {
-    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
+    const { level, iconVerticalCollapsed, iconVerticalExpanded, layoutIsVertical } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
     const groupContentInnerRef = (0, react_1.useRef)(null);
     const { pathname } = (0, react_2.useLocation)();
@@ -62,7 +66,7 @@ const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({
             setExpanded(true);
         }
     }, [pathname]);
-    const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": level });
+    const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": layoutIsVertical ? level : 0 });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
                     [NavGroup_module_scss_1.default.expanded]: expanded,
                 }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navLinkComponentRenderer = exports.NavLinkMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NavLink_module_scss_1 = __importDefault(require("./NavLink.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
@@ -14,13 +13,13 @@ const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("./NavLinkNative");
 const abstractions_1 = require("../abstractions");
 const COMP = "NavLink";
-exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
+exports.NavLinkMd = (0, metadata_helpers_1.createMetadata)({
     description: "`NavLink` creates interactive navigation items that connect users to different " +
         "destinations within an app or external URLs. It automatically indicates active " +
         "states, supports custom icons and labels, and can execute custom actions instead " +
         "of navigation when needed.",
     props: {
-        to: (0, ComponentDefs_1.d)(`This property defines the URL of the link.`),
+        to: (0, metadata_helpers_1.d)(`This property defines the URL of the link.`),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         active: {
             description: `This property indicates if the particular navigation is an active link. An active link ` +
@@ -47,7 +46,7 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: NavLinkNative_1.defaultProps.displayActive,
         },
-        icon: (0, ComponentDefs_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the navigation link.`),
+        icon: (0, metadata_helpers_1.d)(`This property allows you to add an optional icon (specify the icon's name) to the navigation link.`),
     },
     events: {
         click: (0, metadata_helpers_1.dClick)(COMP),

package/dist/scripts/src/components/NavLink/NavLinkNative.js

@@ -28,19 +28,20 @@ const NavGroupContext_1 = require("../NavGroup/NavGroupContext");
 // Default props for NavLink component
 exports.defaultProps = {
     active: false,
-    displayActive: true
+    displayActive: true,
 };
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
     uid, children, disabled, to, displayActive = exports.defaultProps.displayActive, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
+    const layoutIsVertical = !!appLayoutContext && (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext.layout).includes("vertical");
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    const inDrawer = navPanelContext === null || navPanelContext === void 0 ? void 0 : navPanelContext.inDrawer;
     const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     let safeVertical = vertical;
-    if (appLayoutContext && safeVertical === undefined) {
-        safeVertical =
-            (0, AppNative_1.getAppLayoutOrientation)(appLayoutContext.layout) === "vertical" || (navPanelContext === null || navPanelContext === void 0 ? void 0 : navPanelContext.inDrawer);
+    if (safeVertical === undefined) {
+        safeVertical = layoutIsVertical || inDrawer;
     }
     const smartTo = (0, react_1.useMemo)(() => {
         if (to) {
@@ -48,16 +49,16 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         }
     }, [to]);
     const styleObj = (0, react_1.useMemo)(() => {
-        return Object.assign({ "--nav-link-level": level + 1 }, style);
-    }, [level, style]);
+        return Object.assign({ "--nav-link-level": layoutIsVertical ? level + 1 : 0 }, style);
+    }, [level, style, layoutIsVertical]);
     const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
         [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
         [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
     });
-    let innerContent = (0, jsx_runtime_1.jsxs)("div", { className: NavLink_module_scss_1.default.innerContent, children: [icon, children] });
-    let content;
+    let innerContent = ((0, jsx_runtime_1.jsxs)("div", { className: NavLink_module_scss_1.default.innerContent, children: [icon, children] }));
+    let content = null;
     if (disabled || !smartTo) {
         content = ((0, jsx_runtime_1.jsx)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: innerContent })));
     }
@@ -65,7 +66,7 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         content = ((0, jsx_runtime_1.jsx)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
                 [NavLink_module_scss_1.default.displayActive]: displayActive,
                 [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
-                'xmlui-navlink-active': isActive || forceActive
+                "xmlui-navlink-active": isActive || forceActive,
             }), children: innerContent })));
     }
     return content;

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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.navPanelRenderer = exports.NavPanelMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NavPanel_module_scss_1 = __importDefault(require("./NavPanel.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const NavPanelNative_1 = require("./NavPanelNative");
 const COMP = "NavPanel";
-exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
+exports.NavPanelMd = (0, metadata_helpers_1.createMetadata)({
     description: "`NavPanel` defines the navigation structure within an App, serving as a container " +
         "for NavLink and NavGroup components that create your application's primary " +
         "navigation menu. Its appearance and behavior automatically adapt based on the " +
@@ -40,6 +39,7 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
     },
 });
-exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext }) => {
-    return ((0, jsx_runtime_1.jsx)(NavPanelNative_1.NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, inDrawer: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.inDrawer, renderChild: renderChild, children: renderChild(node.children) }));
+exports.navPanelRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavPanelMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
+    const navLinks = (0, NavPanelNative_1.buildNavHierarchy)(node.children, extractValue, undefined, []);
+    return ((0, jsx_runtime_1.jsx)(NavPanelNative_1.NavPanel, { style: layoutCss, logoContent: renderChild(node.props.logoTemplate), className: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.themeClassName, inDrawer: layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.inDrawer, renderChild: renderChild, navLinks: navLinks, children: renderChild(node.children) }));
 });

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.appWithCodeViewComponentRenderer = exports.AppWithCodeViewMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const AppWithCodeView_module_scss_1 = __importDefault(require("./AppWithCodeView.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const AppWithCodeViewNative_1 = require("./AppWithCodeViewNative");
 const defaultProps_1 = require("./defaultProps");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "AppWithCodeView";
-exports.AppWithCodeViewMd = (0, ComponentDefs_1.createMetadata)({
+exports.AppWithCodeViewMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: `The ${COMP} component displays a combination of markdown content and a nested xmlui app. 
 It supports both side-by-side and stacked layouts.`,
@@ -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,79 @@
 "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 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, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, }) {
+    const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
+    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)("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), 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", { 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%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false, popOutUrl: popOutUrl }))] })] }));
+    }
+    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, popOutUrl: popOutUrl }) })] }));
 }
 /**
  * Export a named default for easier imports

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.nestedAppComponentRenderer = exports.NestedAppMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const NestedAppNative_1 = require("./NestedAppNative");
 const defaultProps_1 = require("./defaultProps");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "NestedApp";
-exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
+exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
     description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
 `,
     props: {
@@ -58,17 +58,27 @@ 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",
+        [`borderBottom-header-${COMP}`]: "0.5px solid $borderColor",
+        // --- Split view styles
+        [`padding-button-splitView-${COMP}`]: "4px 6px",
+        [`width-button-splitView-${COMP}`]: "60px",
+        [`width-logo-splitView-${COMP}`]: "2rem",
+        [`height-logo-splitView-${COMP}`]: "2rem",
+        [`width-controls-${COMP}`]: "76px",
     },
 });
-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, popOutUrl, 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 = {
@@ -110,7 +112,9 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             },
         };
         const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
-        window.open(useHashBasedRouting ? `/#/playground#${appQueryString}` : `/playground#${appQueryString}`, "_blank");
+        window.open(useHashBasedRouting
+            ? `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/#/playground#${appQueryString}`
+            : `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/playground#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
     (0, react_1.useEffect)(() => {
         var _a;
@@ -149,13 +153,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

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.noResultComponentRenderer = exports.NoResultMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const NoResultNative_1 = require("./NoResultNative");
 const COMP = "NoResult";
-exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
+exports.NoResultMd = (0, metadata_helpers_1.createMetadata)({
     description: "`NoResult` displays a visual indication that a query or search returned nothing.",
     props: {
         label: (0, metadata_helpers_1.dLabel)(),