xmlui 0.9.18 → 0.9.19

package/dist/{apiInterceptorWorker-DtInaPQ_.mjs → apiInterceptorWorker-BH8WAcl0.mjs}

@@ -12,7 +12,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _executor, _DeferredPromise_instances, decorate_fn, _a2;
 import { delay as delay$1, HttpResponse, http } from "msw";
 import { isArray, isObject as isObject$1, mapValues } from "lodash-es";
-import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-BHUXwc-L.mjs";
+import { r as runEventHandlerCode, g as getDate, d as delay, m as miscellaneousUtils, a as dateFunctions, o as orderBy, T as ThrowStatementError } from "./index-KE5HIbCX.mjs";
 import Dexie from "dexie";
 var POSITIONALS_EXP = /(%?)(%([sdijo]))/g;
 function serializePositional(positional, flag) {

package/dist/{index-BHUXwc-L.mjs → index-KE5HIbCX.mjs}

@@ -21102,14 +21102,14 @@ const spinnerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const themeVars$a = `'{"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 markdownContent = "_markdownContent_1anzp_13";
-const blockquote = "_blockquote_1anzp_13";
-const blockquoteContainer = "_blockquoteContainer_1anzp_31";
-const admonitionBlockquote = "_admonitionBlockquote_1anzp_34";
-const admonitionContainer = "_admonitionContainer_1anzp_40";
-const admonitionContent = "_admonitionContent_1anzp_45";
-const admonitionIcon = "_admonitionIcon_1anzp_48";
+const themeVars$a = `'{"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 markdownContent = "_markdownContent_17igw_13";
+const blockquote = "_blockquote_17igw_16";
+const blockquoteContainer = "_blockquoteContainer_17igw_34";
+const admonitionBlockquote = "_admonitionBlockquote_17igw_37";
+const admonitionContainer = "_admonitionContainer_17igw_43";
+const admonitionContent = "_admonitionContent_17igw_48";
+const admonitionIcon = "_admonitionIcon_17igw_51";
 const styles$l = {
   themeVars: themeVars$a,
   markdownContent,
@@ -21191,7 +21191,13 @@ const Markdown = memo(function Markdown2({
           return /* @__PURE__ */ jsx("video", { className: styles$k.htmlVideo, ...props, children: children2 });
         },
         img({ children: children2, node, ...props }) {
-          return /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 });
+          const src = props == null ? void 0 : props.src;
+          const popOut = props == null ? void 0 : props["data-popout"];
+          if (popOut) {
+            return /* @__PURE__ */ jsx("a", { href: src, target: "_blank", children: /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 }) });
+          } else {
+            return /* @__PURE__ */ jsx("img", { className: styles$k.htmlImage, ...props, children: children2 });
+          }
         },
         h1({ children: children2 }) {
           return /* @__PURE__ */ jsx(Heading, { level: "h1", children: children2 });
@@ -21239,7 +21245,7 @@ const Markdown = memo(function Markdown2({
           return /* @__PURE__ */ jsx("ul", { className: styles$k.htmlUl, ...props, children: children2 });
         },
         li({ children: children2, node, ...props }) {
-          return /* @__PURE__ */ jsx("li", { className: styles$k.htmlLi, ...props, children: children2 });
+          return /* @__PURE__ */ jsx("li", { className: styles$k.htmlLi, ...props, children: /* @__PURE__ */ jsx(Text, { children: children2 }) });
         },
         hr() {
           return /* @__PURE__ */ jsx(HorizontalRule, {});
@@ -24103,7 +24109,8 @@ const InspectorContext = createContext(null);
 function InspectorProvider({
   children,
   sources,
-  projectCompilation
+  projectCompilation,
+  mockApi
 }) {
   const { root: root2 } = useTheme();
   const [inspectable, setInspectable] = useState({});
@@ -24154,9 +24161,10 @@ function InspectorProvider({
       devToolsSide,
       setDevToolsSide,
       devToolsEnabled: showCode,
-      projectCompilation
+      projectCompilation,
+      mockApi
     };
-  }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
+  }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
   return /* @__PURE__ */ jsxs(InspectorContext.Provider, { value: contextValue2, children: [
     children,
     process.env.VITE_USER_COMPONENTS_Inspect !== "false" && showCode && inspectedNode !== null && createPortal(devToolsEntry == null ? void 0 : devToolsEntry.renderer({}), root2),
@@ -24275,7 +24283,8 @@ function useDevTools() {
     setDevToolsSize: context == null ? void 0 : context.setDevToolsSize,
     devToolsSide: context == null ? void 0 : context.devToolsSide,
     setDevToolsSide: context == null ? void 0 : context.setDevToolsSide,
-    devToolsEnabled: context == null ? void 0 : context.devToolsEnabled
+    devToolsEnabled: context == null ? void 0 : context.devToolsEnabled,
+    mockApi: context == null ? void 0 : context.mockApi
   };
 }
 function useInspector(node, uid) {
@@ -31645,7 +31654,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.9.18";
+const version = "0.9.19";
 const ApiInterceptorContext = createContext(null);
 function useApiInterceptorContext() {
   return useContext(ApiInterceptorContext);
@@ -35698,18 +35707,26 @@ const AppWrapper = ({
           defaultTheme,
           defaultTone,
           resources,
-          children: /* @__PURE__ */ jsx(InspectorProvider, { sources, projectCompilation, children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsx(
-            AppContent,
+          children: /* @__PURE__ */ jsx(
+            InspectorProvider,
             {
-              rootContainer: node,
-              routerBaseName: baseName,
-              globalProps,
-              standalone,
-              decorateComponentsWithTestId,
-              debugEnabled,
-              children
+              sources,
+              projectCompilation,
+              mockApi: globalProps.demoMockApi,
+              children: /* @__PURE__ */ jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsx(
+                AppContent,
+                {
+                  rootContainer: node,
+                  routerBaseName: baseName,
+                  globalProps,
+                  standalone,
+                  decorateComponentsWithTestId,
+                  debugEnabled,
+                  children
+                }
+              ) })
             }
-          ) }) })
+          )
         }
       ) })
     ] })
@@ -35833,7 +35850,7 @@ function ApiInterceptorProvider({
       let interceptorWorker;
       (async () => {
         if (process.env.VITE_MOCK_ENABLED) {
-          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-DtInaPQ_.mjs");
+          const { createApiInterceptorWorker } = await import("./apiInterceptorWorker-BH8WAcl0.mjs");
           if (interceptor) {
             interceptorWorker = await createApiInterceptorWorker(interceptor, apiWorker);
             if (!apiWorker) {

package/dist/index.css

@@ -6677,7 +6677,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);
@@ -6685,7 +6688,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;
@@ -6695,50 +6698,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/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-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

@@ -5626,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);
@@ -5634,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;
@@ -5644,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

@@ -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
 };

package/dist/xmlui-metadata.umd.js

@@ -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
   };

package/dist/xmlui-standalone.umd.js

@@ -6599,7 +6599,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);
@@ -6607,7 +6610,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;
@@ -6617,50 +6620,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;
 }
 
@@ -15988,7 +15991,7 @@ li .htmlOl {
       });
     }
   }
-  var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
+  var define_process_env_default$a = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.19 (built 4/25/2025)" };
   class Mutation extends Removable {
     constructor(config) {
       super();
@@ -99271,14 +99274,14 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       );
     }
   );
-  const themeVars$a = `'{"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 markdownContent = "_markdownContent_1anzp_13";
-  const blockquote$3 = "_blockquote_1anzp_13";
-  const blockquoteContainer = "_blockquoteContainer_1anzp_31";
-  const admonitionBlockquote = "_admonitionBlockquote_1anzp_34";
-  const admonitionContainer = "_admonitionContainer_1anzp_40";
-  const admonitionContent = "_admonitionContent_1anzp_45";
-  const admonitionIcon = "_admonitionIcon_1anzp_48";
+  const themeVars$a = `'{"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 markdownContent = "_markdownContent_17igw_13";
+  const blockquote$3 = "_blockquote_17igw_16";
+  const blockquoteContainer = "_blockquoteContainer_17igw_34";
+  const admonitionBlockquote = "_admonitionBlockquote_17igw_37";
+  const admonitionContainer = "_admonitionContainer_17igw_43";
+  const admonitionContent = "_admonitionContent_17igw_48";
+  const admonitionIcon = "_admonitionIcon_17igw_51";
   const styles$k = {
     themeVars: themeVars$a,
     markdownContent,
@@ -125715,7 +125718,13 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             return /* @__PURE__ */ jsxRuntimeExports.jsx("video", { className: styles$j.htmlVideo, ...props, children: children2 });
           },
           img({ children: children2, node: node2, ...props }) {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: styles$j.htmlImage, ...props, children: children2 });
+            const src = props == null ? void 0 : props.src;
+            const popOut = props == null ? void 0 : props["data-popout"];
+            if (popOut) {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: src, target: "_blank", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: styles$j.htmlImage, ...props, children: children2 }) });
+            } else {
+              return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: styles$j.htmlImage, ...props, children: children2 });
+            }
           },
           h1({ children: children2 }) {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(Heading, { level: "h1", children: children2 });
@@ -125763,7 +125772,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             return /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: styles$j.htmlUl, ...props, children: children2 });
           },
           li({ children: children2, node: node2, ...props }) {
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: styles$j.htmlLi, ...props, children: children2 });
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: styles$j.htmlLi, ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: children2 }) });
           },
           hr() {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(HorizontalRule, {});
@@ -132885,7 +132894,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   function InspectorProvider({
     children,
     sources,
-    projectCompilation
+    projectCompilation,
+    mockApi
   }) {
     const { root: root2 } = useTheme();
     const [inspectable, setInspectable] = reactExports.useState({});
@@ -132936,9 +132946,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
         devToolsSide,
         setDevToolsSide,
         devToolsEnabled: showCode,
-        projectCompilation
+        projectCompilation,
+        mockApi
       };
-    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation]);
+    }, [devToolsSide, devToolsSize, sources, inspectedNode, showCode, projectCompilation, mockApi]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(InspectorContext.Provider, { value: contextValue2, children: [
       children,
       define_process_env_default$7.VITE_USER_COMPONENTS_Inspect !== "false" && showCode && inspectedNode !== null && reactDomExports.createPortal(devToolsEntry == null ? void 0 : devToolsEntry.renderer({}), root2),
@@ -133057,7 +133068,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       setDevToolsSize: context == null ? void 0 : context.setDevToolsSize,
       devToolsSide: context == null ? void 0 : context.devToolsSide,
       setDevToolsSide: context == null ? void 0 : context.setDevToolsSide,
-      devToolsEnabled: context == null ? void 0 : context.devToolsEnabled
+      devToolsEnabled: context == null ? void 0 : context.devToolsEnabled,
+      mockApi: context == null ? void 0 : context.mockApi
     };
   }
   function useInspector(node2, uid) {
@@ -143971,7 +143983,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
       /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
     ] });
   }
-  const version = "0.9.18";
+  const version = "0.9.19";
   const ApiInterceptorContext = reactExports.createContext(null);
   function useApiInterceptorContext() {
     return reactExports.useContext(ApiInterceptorContext);
@@ -148108,18 +148120,26 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
             defaultTheme,
             defaultTone,
             resources,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(InspectorProvider, { sources, projectCompilation, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              AppContent,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              InspectorProvider,
               {
-                rootContainer: node2,
-                routerBaseName: baseName,
-                globalProps,
-                standalone,
-                decorateComponentsWithTestId,
-                debugEnabled,
-                children
+                sources,
+                projectCompilation,
+                mockApi: globalProps.demoMockApi,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConfirmationModalContextProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  AppContent,
+                  {
+                    rootContainer: node2,
+                    routerBaseName: baseName,
+                    globalProps,
+                    standalone,
+                    decorateComponentsWithTestId,
+                    debugEnabled,
+                    children
+                  }
+                ) })
               }
-            ) }) })
+            )
           }
         ) })
       ] })
@@ -148953,7 +148973,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
     ToneChangerButton: ToneChangerButtonMd,
     Tree: TreeMd
   };
-  var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
+  var define_process_env_default$2 = { VITE_XMLUI_VERSION: "0.9.19 (built 4/25/2025)" };
   const MAIN_FILE = "Main." + componentFileExtension;
   const MAIN_CODE_BEHIND_FILE = "Main." + codeBehindFileExtension;
   const CONFIG_FILE = "config.json";
@@ -153391,7 +153411,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
   function isResponseWithoutBody(status) {
     return RESPONSE_STATUS_CODES_WITHOUT_BODY.has(status);
   }
-  var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.18 (built 4/25/2025)" };
+  var define_process_env_default$1 = { NODE_ENV: "production", VITE_MOCK_ENABLED: true, VITE_MOCK_WORKER_LOCATION: "mockApi.js", VITE_USED_COMPONENTS_Pdf: "false", VITE_USED_COMPONENTS_Chart: "false", VITE_USER_COMPONENTS_XmluiCodeHightlighter: "false", VITE_USED_COMPONENTS_Tree: "false", VITE_XMLUI_VERSION: "0.9.19 (built 4/25/2025)" };
   var __defProp$7 = Object.defineProperty;
   var __export = (target2, all2) => {
     for (var name2 in all2)

package/dist/xmlui.d.ts

@@ -1932,6 +1932,7 @@ export declare function useDevTools(): {
     devToolsSide: "left" | "right" | "bottom";
     setDevToolsSide: (side: "left" | "right" | "bottom") => void;
     devToolsEnabled: boolean;
+    mockApi: any;
 };
 
 export declare const useLogger: () => LogContextType;

package/dist/xmlui.mjs

@@ -1,4 +1,4 @@
-import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-BHUXwc-L.mjs";
+import { A, B, E, I, i, h, S, b, k, l, c, e, f, j, p, s, t, n, q, v, u } from "./index-KE5HIbCX.mjs";
 export {
   A as AppRoot,
   B as Button,

package/package.json

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