xmlui 0.9.17 → 0.9.19

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

@@ -342,7 +342,7 @@ exports.HtmlDetailsMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "marginTop-HtmlDetails": "1rem",
         "marginBottom-HtmlDetails": "1rem",
-    }
+    },
 });
 exports.htmlDetailsTagRenderer = (0, renderers_1.createComponentRenderer)("details", exports.HtmlDetailsMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);

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

@@ -37,15 +37,22 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
     return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: Object.assign({}, style), children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], rehypePlugins: [rehype_raw_1.default], components: {
                 details(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("details", Object.assign({ className: HtmlTags_module_scss_1.default.htmlDetails }, props, { children: children }));
+                    return ((0, jsx_runtime_1.jsx)("details", Object.assign({ className: HtmlTags_module_scss_1.default.htmlDetails }, props, { children: children })));
                 },
                 video(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("video", Object.assign({ className: HtmlTags_module_scss_1.default.htmlVideo }, props, { children: children }));
+                    return ((0, jsx_runtime_1.jsx)("video", Object.assign({ className: HtmlTags_module_scss_1.default.htmlVideo }, props, { children: children })));
                 },
                 img(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("img", Object.assign({ className: HtmlTags_module_scss_1.default.htmlImage }, props, { children: children }));
+                    const src = props === null || props === void 0 ? void 0 : props.src;
+                    const popOut = props === null || props === void 0 ? void 0 : props["data-popout"];
+                    if (popOut) {
+                        return ((0, jsx_runtime_1.jsx)("a", { href: src, target: "_blank", children: (0, jsx_runtime_1.jsx)("img", Object.assign({ className: HtmlTags_module_scss_1.default.htmlImage }, props, { children: children })) }));
+                    }
+                    else {
+                        return ((0, jsx_runtime_1.jsx)("img", Object.assign({ className: HtmlTags_module_scss_1.default.htmlImage }, props, { children: children })));
+                    }
                 },
                 h1({ children }) {
                     return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h1", children: children });
@@ -88,22 +95,22 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                 },
                 ol(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("ol", Object.assign({ className: HtmlTags_module_scss_1.default.htmlOl }, props, { children: children }));
+                    return ((0, jsx_runtime_1.jsx)("ol", Object.assign({ className: HtmlTags_module_scss_1.default.htmlOl }, props, { children: children })));
                 },
                 ul(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: HtmlTags_module_scss_1.default.htmlUl }, props, { children: children }));
+                    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: HtmlTags_module_scss_1.default.htmlUl }, props, { children: children })));
                 },
                 li(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
-                    return (0, jsx_runtime_1.jsx)("li", Object.assign({ className: HtmlTags_module_scss_1.default.htmlLi }, props, { children: children }));
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: HtmlTags_module_scss_1.default.htmlLi }, props, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: children }) })));
                 },
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
                 },
                 a(_a) {
                     var { children, href } = _a, props = __rest(_a, ["children", "href"]);
-                    const allowedProps = ['style', 'disabled', 'active', 'icon', 'onClick'];
+                    const allowedProps = ["style", "disabled", "active", "icon", "onClick"];
                     return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href }, allowedProps, { children: children })));
                 },
                 // TODO: somehow get the label from the containing li element
@@ -154,19 +161,19 @@ const HorizontalRule = () => {
 const Blockquote = ({ children, style }) => {
     // Helper function to extract text content from React nodes
     const extractTextContent = (node) => {
-        if (typeof node === 'string') {
+        if (typeof node === "string") {
             return node;
         }
         if (react_2.default.isValidElement(node) && node.props && node.props.children) {
             if (Array.isArray(node.props.children)) {
-                return node.props.children.map(extractTextContent).join('');
+                return node.props.children.map(extractTextContent).join("");
             }
             return extractTextContent(node.props.children);
         }
-        return '';
+        return "";
     };
     // Extract all text content
-    const allText = react_2.default.Children.toArray(children).map(extractTextContent).join('');
+    const allText = react_2.default.Children.toArray(children).map(extractTextContent).join("");
     // Check for admonition pattern
     const match = allText.match(/\[!([A-Z]+)\]/);
     const isAdmonition = !!match;
@@ -174,16 +181,16 @@ const Blockquote = ({ children, style }) => {
         const type = match[1].toLowerCase();
         // Map admonition type to emoji
         const emojiMap = {
-            info: '💡',
-            warning: '⚠️',
-            danger: '🚫',
-            note: '📝',
-            tip: '💬'
+            info: "💡",
+            warning: "⚠️",
+            danger: "🚫",
+            note: "📝",
+            tip: "💬",
         };
         // Process children to remove the admonition marker
         const processNode = (node) => {
-            if (typeof node === 'string') {
-                return node.replace(/\[!([A-Z]+)\]\s*/, '');
+            if (typeof node === "string") {
+                return node.replace(/\[!([A-Z]+)\]\s*/, "");
             }
             if (react_2.default.isValidElement(node)) {
                 // Handle React elements with children
@@ -205,7 +212,7 @@ const Blockquote = ({ children, style }) => {
         };
         const processedChildren = react_2.default.Children.map(children, processNode);
         // Render admonition blockquote with the updated structure
-        return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.admonitionBlockquote, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ''}`, children: emojiMap[type] || '💡' }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
+        return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.admonitionBlockquote, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ""}`, children: emojiMap[type] || "💡" }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
     }
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.blockquoteContainer, children: children }) }));
 };

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

@@ -34,7 +34,8 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     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";
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-full-header" ||
+        (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
     if (navPanelContext !== null) {
         inline = navPanelContext.inDrawer;
     }

package/dist/scripts/src/components-core/InspectorContext.js

@@ -19,7 +19,7 @@ const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton
 const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
-function InspectorProvider({ children, sources, projectCompilation, }) {
+function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     const [inspectable, setInspectable] = (0, react_1.useState)({});
     const [inspectedNode, setInspectedNode] = (0, react_1.useState)(null);
@@ -61,8 +61,9 @@ function InspectorProvider({ children, sources, projectCompilation, }) {
             setDevToolsSide,
             devToolsEnabled: showCode,
             projectCompilation: projectCompilation,
+            mockApi,
         };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
+    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 showCode &&
                 inspectedNode !== null &&
@@ -155,6 +156,7 @@ function useDevTools() {
         devToolsSide: context === null || context === void 0 ? void 0 : context.devToolsSide,
         setDevToolsSide: context === null || context === void 0 ? void 0 : context.setDevToolsSide,
         devToolsEnabled: context === null || context === void 0 ? void 0 : context.devToolsEnabled,
+        mockApi: context === null || context === void 0 ? void 0 : context.mockApi,
     };
 }
 function useInspector(node, uid) {

package/dist/style.css

@@ -1617,7 +1617,7 @@ See this source for details: https://css-tricks.com/line-clampin/
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._wrapper_1c9ty_13 {
+._wrapper_rebcu_13 {
   --footer-height: 0px;
   --header-height: 0px;
   width: 100%;
@@ -1627,191 +1627,195 @@ See this source for details: https://css-tricks.com/line-clampin/
   flex-direction: column;
   isolation: isolate;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 {
+._wrapper_rebcu_13._vertical_rebcu_23 {
   flex-direction: row;
   overflow: initial;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._contentWrapper_rebcu_27 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   position: relative;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._navPanelWrapper_rebcu_33 {
   width: var(--xmlui-width-navPanel-App);
   flex-shrink: 0;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._PagesWrapper_rebcu_37 {
   min-height: initial;
   flex: 1;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._vertical_rebcu_23 ._footerWrapper_rebcu_41 {
   position: static;
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._contentWrapper_rebcu_27 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._vertical_1c9ty_23._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._vertical_rebcu_23._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 {
+._wrapper_rebcu_13._horizontal_rebcu_51 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._PagesWrapper_rebcu_37 {
   min-height: initial;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._footerWrapper_rebcu_41 {
   position: static;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 {
+._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 {
   scroll-padding-top: var(--header-height);
   min-height: 100%;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51._sticky_1c9ty_44 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._horizontal_rebcu_51._sticky_rebcu_44 ._footerWrapper_rebcu_41 {
   position: sticky;
   bottom: 0;
 }
-._wrapper_1c9ty_13._horizontal_1c9ty_51 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._horizontal_rebcu_51 ._navPanelWrapper_rebcu_33 {
   border-bottom: var(--xmlui-borderBottom-AppHeader);
   justify-content: end;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._navPanelWrapper_rebcu_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapper_rebcu_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalFullHeader_1c9ty_73 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._verticalFullHeader_rebcu_73 ._footerWrapper_rebcu_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 {
   min-height: 100%;
   height: 100%;
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._header_1c9ty_108 {
-  max-width: var(--xmlui-maxWidth-App);
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._header_rebcu_108 {
+  max-width: var(--xmlui-maxWidth-content-App);
   margin: auto;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._navPanelWrapper_1c9ty_33 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._navPanelWrapper_rebcu_33 {
   width: var(--xmlui-width-navPanel-App);
   position: sticky;
   height: calc(var(--containerHeight, 100vh) - var(--footer-height) - var(--header-height));
   top: var(--header-height);
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapper_rebcu_37 {
   overflow: initial;
   min-height: calc(var(--containerHeight, 100vh) - var(--header-height) - var(--footer-height));
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
   height: 100%;
 }
-._wrapper_1c9ty_13._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
   position: sticky;
   left: 0;
   right: 0;
   bottom: 0;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 {
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._headerWrapper_1c9ty_138 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._headerWrapper_rebcu_138 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135 ._footerWrapper_1c9ty_41 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135 ._footerWrapper_rebcu_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._content_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._content_rebcu_27 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalFullHeader_1c9ty_73 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalFullHeader_rebcu_73 ._contentWrapper_rebcu_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 {
   scroll-padding-top: var(--header-height);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._content_1c9ty_27 {
-  width: var(--xmlui-maxWidth-App);
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._content_rebcu_27 {
+  width: var(--xmlui-maxWidth-content-App);
   margin-inline: calc(-1 * var(--scrollbar-width));
   margin: auto;
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._contentWrapper_rebcu_27 {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._headerWrapper_1c9ty_138 > div {
-  width: var(--xmlui-maxWidth-App);
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._headerWrapper_rebcu_138 > div {
+  width: var(--xmlui-maxWidth-content-App);
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 {
   margin-inline: calc(-1 * var(--scrollbar-width));
 }
-._wrapper_1c9ty_13._scrollWholePage_1c9ty_135._verticalConstrained_1c9ty_102 ._footerWrapper_1c9ty_41 > div {
+._wrapper_rebcu_13._scrollWholePage_rebcu_135._verticalConstrained_rebcu_102 ._footerWrapper_rebcu_41 > div {
   padding-inline: var(--scrollbar-width);
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) {
   overflow: hidden;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._content_1c9ty_27 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._content_rebcu_27 {
   min-height: 0;
   height: 100%;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._contentWrapper_1c9ty_27 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._contentWrapper_rebcu_27 {
   overflow: initial;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135)._verticalConstrained_rebcu_102 ._content_rebcu_27 {
+  width: var(--xmlui-maxWidth-content-App);
+  margin: auto;
+}
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapper_rebcu_37 {
   overflow: auto;
   scroll-padding-block: var(--xmlui-scroll-padding-block-Pages);
   min-height: 0;
   height: 100%;
   scrollbar-gutter: stable both-edges;
 }
-._wrapper_1c9ty_13:not(._scrollWholePage_1c9ty_135) ._PagesWrapperInner_1c9ty_90 {
+._wrapper_rebcu_13:not(._scrollWholePage_rebcu_135) ._PagesWrapperInner_rebcu_90 {
   min-height: 100%;
   height: 0;
 }
-._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 {
+._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 {
   scrollbar-gutter: auto;
 }
-._wrapper_1c9ty_13._noScrollbarGutters_1c9ty_200 ._PagesWrapper_1c9ty_37 {
+._wrapper_rebcu_13._noScrollbarGutters_rebcu_204 ._PagesWrapper_rebcu_37 {
   scrollbar-gutter: auto;
 }
 
-._headerWrapper_1c9ty_138 {
+._headerWrapper_rebcu_138 {
   z-index: 1;
   min-height: 0;
   flex-shrink: 0;
@@ -1820,17 +1824,17 @@ See this source for details: https://css-tricks.com/line-clampin/
   box-shadow: var(--xmlui-boxShadow-header-App);
   background-color: var(--xmlui-backgroundColor-AppHeader);
 }
-._headerWrapper_1c9ty_138._sticky_1c9ty_44 {
+._headerWrapper_rebcu_138._sticky_rebcu_44 {
   position: sticky;
 }
 
-._content_1c9ty_27 {
+._content_rebcu_27 {
   display: flex;
   flex-direction: row;
   isolation: isolate;
 }
 
-._contentWrapper_1c9ty_27 {
+._contentWrapper_rebcu_27 {
   position: relative;
   min-width: 0;
   flex: 1;
@@ -1841,21 +1845,21 @@ See this source for details: https://css-tricks.com/line-clampin/
   border-left: var(--xmlui-borderLeft-content-App);
 }
 
-._navPanelWrapper_1c9ty_33 {
+._navPanelWrapper_rebcu_33 {
   display: flex;
   position: sticky;
   top: 0;
 }
-._navPanelWrapper_1c9ty_33:empty {
+._navPanelWrapper_rebcu_33:empty {
   display: none;
 }
 
-._PagesWrapper_1c9ty_37 {
+._PagesWrapper_rebcu_37 {
   flex: 1;
   isolation: isolate;
 }
 
-._PagesWrapperInner_1c9ty_90 {
+._PagesWrapperInner_rebcu_90 {
   --page-padding-left: var(--xmlui-space-4);
   --page-padding-right: var(--xmlui-space-4);
   --page-padding-top: var(--xmlui-space-5);
@@ -1873,7 +1877,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   display: flex;
   flex-direction: column;
 }
-._PagesWrapperInner_1c9ty_90 > .xmlui-page-root {
+._PagesWrapperInner_rebcu_90 > .xmlui-page-root {
   padding-top: var(--page-padding-top-override, var(--page-padding-top));
   padding-bottom: var(--page-padding-bottom-override, var(--page-padding-bottom));
   padding-right: var(--page-padding-right-override, var(--page-padding-right));
@@ -1885,7 +1889,7 @@ See this source for details: https://css-tricks.com/line-clampin/
   margin-right: calc(-1 * var(--page-padding-right));
 }
 
-._footerWrapper_1c9ty_41 {
+._footerWrapper_rebcu_41 {
   flex-shrink: 0;
 }/*
  * This file contains all CSS variables AppEngine uses for styling the UI, including individual visual components.
@@ -5622,7 +5626,10 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
  * This function allows other CSS modules to get the value of the CSS variable specified in $componentVariable.
  Optionally, you can provide a $fallbackValue to set the variable's value if that is not defined.
  */
-._markdownContent_1anzp_13 ._blockquote_1anzp_13 {
+._markdownContent_17igw_13 {
+  max-width: var(--xmlui-maxWidth-Markdown);
+}
+._markdownContent_17igw_13 ._blockquote_17igw_16 {
   position: relative;
   margin-top: var(--xmlui-marginTop-Blockquote);
   margin-bottom: var(--xmlui-marginBottom-Blockquote);
@@ -5630,7 +5637,7 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
   border-radius: var(--xmlui-borderRadius-Blockquote);
   padding-left: var(--xmlui-paddingLeft-Blockquote);
 }
-._markdownContent_1anzp_13 ._blockquote_1anzp_13::before {
+._markdownContent_17igw_13 ._blockquote_17igw_16::before {
   background-color: var(--xmlui-accentColor-Blockquote);
   position: absolute;
   top: 0;
@@ -5640,50 +5647,50 @@ button._selectTrigger_1ept5_46._valid_1ept5_37::placeholder {
   height: 100%;
   width: var(--xmlui-accentWidth-Blockquote);
 }
-._markdownContent_1anzp_13 ._blockquoteContainer_1anzp_31 {
-  padding: 0.5rem;
+._markdownContent_17igw_13 ._blockquoteContainer_17igw_34 {
+  padding: 0.5rem 0.5rem 0.1rem 0.5rem;
 }
-._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 {
+._markdownContent_17igw_13 ._admonitionBlockquote_17igw_37 {
   margin-top: var(--xmlui-marginTop-Admonition);
   margin-bottom: var(--xmlui-marginBottom-Admonition);
   background-color: var(--xmlui-backgroundColor-Admonition);
   border-radius: var(--xmlui-borderRadius-Admonition);
 }
-._markdownContent_1anzp_13 ._admonitionContainer_1anzp_40 {
+._markdownContent_17igw_13 ._admonitionContainer_17igw_43 {
   padding: 0.5rem;
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
+._markdownContent_17igw_13 ._admonitionContent_17igw_48 {
   margin-left: var(--xmlui-marginLeft-Admonition-content);
 }
-._markdownContent_1anzp_13 ._admonitionIcon_1anzp_48 {
+._markdownContent_17igw_13 ._admonitionIcon_17igw_51 {
   font-size: var(--xmlui-iconSize-Admonition);
   line-height: 1;
 }
-._markdownContent_1anzp_13 ._admonitionContent_1anzp_45 {
+._markdownContent_17igw_13 ._admonitionContent_17igw_48 {
   flex: 1;
   min-width: 0;
 }
-._markdownContent_1anzp_13 ._admonitionBlockquote_1anzp_34 ._admonitionContent_1anzp_45 [class*=text_][class*=markdown_] {
+._markdownContent_17igw_13 ._admonitionBlockquote_17igw_37 ._admonitionContent_17igw_48 [class*=text_][class*=markdown_] {
   margin-top: 0;
   margin-bottom: 0;
 }
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]),
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) {
+._markdownContent_17igw_13 li:has(> input[type=checkbox]),
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) {
   display: flex;
   align-items: flex-start;
 }
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox],
-._markdownContent_1anzp_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) > input[type=checkbox],
+._markdownContent_17igw_13 li:has(> input[type=checkbox]) > input[type=checkbox] {
   margin-right: 8px;
   margin-top: 4px;
   flex-shrink: 0;
 }
-._markdownContent_1anzp_13 > *:first-child {
+._markdownContent_17igw_13 > *:first-child {
   margin-top: 0;
 }
-._markdownContent_1anzp_13 > *:last-child {
+._markdownContent_17igw_13 > *:last-child {
   margin-bottom: 0;
 }
 

package/dist/xmlui-metadata.mjs

@@ -3090,7 +3090,7 @@ const ThemeMd = createMetadata({
   },
   opaque: true
 });
-const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
+const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
 const styles$L = {
   themeVars: themeVars$I
 };
@@ -15339,7 +15339,7 @@ const LogoMd = createMetadata({
   status: "experimental",
   description: `The \`${COMP$H}\` component represents a logo or a brand symbol. Usually, you use this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`
 });
-const themeVars$f = `'{"accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
+const themeVars$f = `'{"maxWidth-Markdown": "var(--xmlui-maxWidth-Markdown)", "accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
 const styles$g = {
   themeVars: themeVars$f
 };
@@ -15513,7 +15513,7 @@ forwardRef(function NavGroup2({
   const { level } = useContext(NavGroupContext);
   const appLayoutContext = useAppLayoutContext();
   const navPanelContext = useContext(NavPanelContext);
-  let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
+  let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
   if (navPanelContext !== null) {
     inline = navPanelContext.inDrawer;
   }

package/dist/xmlui-metadata.umd.js

@@ -3087,7 +3087,7 @@
     },
     opaque: true
   });
-  const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "maxWidth-App": "var(--xmlui-maxWidth-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
+  const themeVars$I = `'{"width-navPanel-App": "var(--xmlui-width-navPanel-App)", "boxShadow-header-App": "var(--xmlui-boxShadow-header-App)", "boxShadow-navPanel-App": "var(--xmlui-boxShadow-navPanel-App)", "backgroundColor-content-App": "var(--xmlui-backgroundColor-content-App)", "borderLeft-content-App": "var(--xmlui-borderLeft-content-App)", "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)", "backgroundColor-AppHeader": "var(--xmlui-backgroundColor-AppHeader)", "borderBottom-AppHeader": "var(--xmlui-borderBottom-AppHeader)", "scroll-padding-block-Pages": "var(--xmlui-scroll-padding-block-Pages)"}'`;
   const styles$L = {
     themeVars: themeVars$I
   };
@@ -15336,7 +15336,7 @@
     status: "experimental",
     description: `The \`${COMP$H}\` component represents a logo or a brand symbol. Usually, you use this component in the [\`AppHeader\`](./AppHeader.mdx#logotemplate).`
   });
-  const themeVars$f = `'{"accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
+  const themeVars$f = `'{"maxWidth-Markdown": "var(--xmlui-maxWidth-Markdown)", "accentColor-Blockquote": "var(--xmlui-accentColor-Blockquote)", "accentWidth-Blockquote": "var(--xmlui-accentWidth-Blockquote)", "backgroundColor-Blockquote": "var(--xmlui-backgroundColor-Blockquote)", "paddingLeft-Blockquote": "var(--xmlui-paddingLeft-Blockquote)", "borderRadius-Blockquote": "var(--xmlui-borderRadius-Blockquote)", "marginTop-Blockquote": "var(--xmlui-marginTop-Blockquote)", "marginBottom-Blockquote": "var(--xmlui-marginBottom-Blockquote)", "backgroundColor-Admonition": "var(--xmlui-backgroundColor-Admonition)", "paddingLeft-Admonition": "var(--xmlui-paddingLeft-Admonition)", "borderRadius-Admonition": "var(--xmlui-borderRadius-Admonition)", "iconSize-Admonition": "var(--xmlui-iconSize-Admonition)", "marginTop-Admonition": "var(--xmlui-marginTop-Admonition)", "marginBottom-Admonition": "var(--xmlui-marginBottom-Admonition)", "marginLeft-Admonition-content": "var(--xmlui-marginLeft-Admonition-content)", "marginTop-HtmlVideo": "var(--xmlui-marginTop-HtmlVideo)", "marginBottom-HtmlVideo": "var(--xmlui-marginBottom-HtmlVideo)"}'`;
   const styles$g = {
     themeVars: themeVars$f
   };
@@ -15510,7 +15510,7 @@
     const { level } = React.useContext(NavGroupContext);
     const appLayoutContext = useAppLayoutContext();
     const navPanelContext = React.useContext(NavPanelContext);
-    let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header";
+    let inline = (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-sticky" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-full-header" || (appLayoutContext == null ? void 0 : appLayoutContext.layout) === "vertical-constrained-width";
     if (navPanelContext !== null) {
       inline = navPanelContext.inDrawer;
     }