xmlui 0.9.37 → 0.9.38

package/dist/lib/language-server-web-worker.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start } from "./server-common-D9McswSL.mjs";
+import { m as main, s as start } from "./server-common-B1bqw3bO.mjs";
 var browser = main;
 const messageReader = new browser.BrowserMessageReader(self);
 messageReader.listen((message) => {

package/dist/lib/language-server.mjs

@@ -1,4 +1,4 @@
-import { m as main, s as start$1 } from "./server-common-D9McswSL.mjs";
+import { m as main, s as start$1 } from "./server-common-B1bqw3bO.mjs";
 var node = main;
 function start() {
   const connection = node.createConnection(node.ProposedFeatures.all);

package/dist/lib/{server-common-D9McswSL.mjs → server-common-B1bqw3bO.mjs}

@@ -10233,7 +10233,6 @@ const collectedComponentMetadata = {
     },
     "themeVars": {
       "width-navPanel-App": "var(--xmlui-width-navPanel-App)",
-      "backgroundColor-navPanel-App": "var(--xmlui-backgroundColor-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)",
@@ -10252,7 +10251,6 @@ const collectedComponentMetadata = {
     },
     "defaultThemeVars": {
       "width-navPanel-App": "$space-64",
-      "backgroundColor-navPanel-App": "$backgroundColor",
       "maxWidth-content-App": "$maxWidth-content",
       "boxShadow-header-App": "$boxShadow-spread",
       "boxShadow-navPanel-App": "$boxShadow-spread",
@@ -11857,8 +11855,7 @@ const collectedComponentMetadata = {
       "Input:outlineWidth-Switch--focus": "var(--xmlui-outlineWidth-Switch--focus)",
       "Input:outlineColor-Switch--focus": "var(--xmlui-outlineColor-Switch--focus)",
       "Input:outlineStyle-Switch--focus": "var(--xmlui-outlineStyle-Switch--focus)",
-      "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)",
-      "backgroundColor-indicator-checked-Switch": "var(--xmlui-backgroundColor-indicator-checked-Switch)"
+      "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)"
     },
     "defaultThemeVars": {
       "borderColor-checked-Checkbox-error": "$borderColor-Checkbox-error",
@@ -17581,11 +17578,6 @@ const collectedComponentMetadata = {
       "initiallyExpanded": {
         "description": "This property defines whether the group is initially expanded or collapsed."
       },
-      "enabled": {
-        "description": "This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).",
-        "valueType": "boolean",
-        "defaultValue": true
-      },
       "to": {
         "description": "This property defines an optional navigation link.",
         "valueType": "string"
@@ -17612,7 +17604,7 @@ const collectedComponentMetadata = {
       "iconVerticalCollapsed": {
         "description": "Set a custom icon to display when the navigation menu is collapsed, is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.",
         "valueType": "string",
-        "defaultValue": "chevronup"
+        "defaultValue": "chevronright"
       }
     },
     "themeVars": {
@@ -17732,20 +17724,14 @@ const collectedComponentMetadata = {
       "borderStartEndRadius-NavLink": "var(--xmlui-borderStartEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))",
       "borderEndStartRadius-NavLink": "var(--xmlui-borderEndStartRadius-NavLink, var(--xmlui-borderRadius-NavLink))",
       "borderEndEndRadius-NavLink": "var(--xmlui-borderEndEndRadius-NavLink, var(--xmlui-borderRadius-NavLink))",
-      "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)",
-      "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)",
-      "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)",
-      "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)",
-      "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)",
-      "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)",
-      "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)",
-      "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)",
-      "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)",
-      "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)",
       "backgroundColor-NavLink": "var(--xmlui-backgroundColor-NavLink)",
       "backgroundColor-NavLink--hover": "var(--xmlui-backgroundColor-NavLink--hover)",
+      "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)",
       "backgroundColor-NavLink--active": "var(--xmlui-backgroundColor-NavLink--active)",
       "backgroundColor-NavLink--pressed": "var(--xmlui-backgroundColor-NavLink--pressed)",
+      "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)",
+      "fontSize-NavLink": "var(--xmlui-fontSize-NavLink)",
+      "wordWrap-NavLink": "var(--xmlui-wordWrap-NavLink)",
       "textColor-NavLink": "var(--xmlui-textColor-NavLink)",
       "textColor-NavLink--hover": "var(--xmlui-textColor-NavLink--hover)",
       "textColor-NavLink--active": "var(--xmlui-textColor-NavLink--active)",
@@ -17753,14 +17739,20 @@ const collectedComponentMetadata = {
       "textColor-NavLink--pressed": "var(--xmlui-textColor-NavLink--pressed)",
       "textColor-NavLink--pressed--active": "var(--xmlui-textColor-NavLink--pressed--active)",
       "color-icon-NavLink": "var(--xmlui-color-icon-NavLink)",
+      "fontFamily-NavLink": "var(--xmlui-fontFamily-NavLink)",
+      "fontWeight-NavLink": "var(--xmlui-fontWeight-NavLink)",
+      "fontWeight-NavLink--pressed": "var(--xmlui-fontWeight-NavLink--pressed)",
+      "fontWeight-NavLink--active": "var(--xmlui-fontWeight-NavLink--active)",
+      "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)",
+      "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)",
       "color-indicator-NavLink": "var(--xmlui-color-indicator-NavLink)",
       "color-indicator-NavLink--hover": "var(--xmlui-color-indicator-NavLink--hover)",
       "color-indicator-NavLink--active": "var(--xmlui-color-indicator-NavLink--active)",
-      "backgroundColor-NavLink--hover--active": "var(--xmlui-backgroundColor-NavLink--hover--active)",
       "color-indicator-NavLink--pressed": "var(--xmlui-color-indicator-NavLink--pressed)",
-      "backgroundColor-NavLink--pressed--active": "var(--xmlui-backgroundColor-NavLink--pressed--active)",
-      "thickness-indicator-NavLink": "var(--xmlui-thickness-indicator-NavLink)",
-      "borderRadius-indicator-NavLink": "var(--xmlui-borderRadius-indicator-NavLink)"
+      "outlineWidth-NavLink--focus": "var(--xmlui-outlineWidth-NavLink--focus)",
+      "outlineColor-NavLink--focus": "var(--xmlui-outlineColor-NavLink--focus)",
+      "outlineStyle-NavLink--focus": "var(--xmlui-outlineStyle-NavLink--focus)",
+      "outlineOffset-NavLink--focus": "var(--xmlui-outlineOffset-NavLink--focus)"
     },
     "themeVarDescriptions": {
       "color-indicator-NavLink": "Provides the following states: `--hover`, `--active`, `--pressed`"
@@ -17846,6 +17838,8 @@ const collectedComponentMetadata = {
       "paddingTop-logo-NavPanel": "var(--xmlui-paddingTop-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))",
       "paddingBottom-logo-NavPanel": "var(--xmlui-paddingBottom-logo-NavPanel, var(--xmlui-paddingVertical-logo-NavPanel, var(--xmlui-padding-logo-NavPanel)))",
       "marginBottom-logo-NavPanel": "var(--xmlui-marginBottom-logo-NavPanel)",
+      "color-scrollbar-NavPanel": "var(--xmlui-color-scrollbar-NavPanel)",
+      "backgroundColor-scrollbar-NavPanel": "var(--xmlui-backgroundColor-scrollbar-NavPanel)",
       "maxWidth-content-App": "var(--xmlui-maxWidth-content-App)",
       "height-AppHeader": "var(--xmlui-height-AppHeader)",
       "paddingVertical-AppHeader": "var(--xmlui-paddingVertical-AppHeader)",
@@ -18419,7 +18413,6 @@ const collectedComponentMetadata = {
       "Input:borderColor-RadioGroupOption-error": "var(--xmlui-borderColor-RadioGroupOption-error)",
       "Input:borderColor-RadioGroupOption-warning": "var(--xmlui-borderColor-RadioGroupOption-warning)",
       "Input:borderColor-RadioGroupOption-success": "var(--xmlui-borderColor-RadioGroupOption-success)",
-      "Input:backgroundColor-checked-RadioGroupOption-indicator": "var(--xmlui-backgroundColor-checked-RadioGroupOption-indicator)",
       "backgroundColor-checked-RadioGroupOption-default": "var(--xmlui-backgroundColor-checked-RadioGroupOption-default)",
       "backgroundColor-checked-RadioGroupOption--disabled": "var(--xmlui-backgroundColor-checked-RadioGroupOption--disabled)",
       "backgroundColor-checked-RadioGroupOption-error": "var(--xmlui-backgroundColor-checked-RadioGroupOption-error)",
@@ -18438,8 +18431,7 @@ const collectedComponentMetadata = {
     },
     "defaultThemeVars": {
       "gap-RadioGroupOption": "$space-1_5",
-      "borderWidth-RadioGroupOption": "1px",
-      "backgroundColor-checked-RadioGroupOption-indicator": "$backgroundColor-primary",
+      "borderWidth-RadioGroupOption": "2px",
       "backgroundColor-checked-RadioGroupOption--disabled]": "$borderColor-RadioGroupOption--disabled",
       "backgroundColor-checked-RadioGroupOption-error": "$borderColor-RadioGroupOption-error",
       "backgroundColor-checked-RadioGroupOption-warning": "$borderColor-RadioGroupOption-warning",
@@ -19066,7 +19058,7 @@ const collectedComponentMetadata = {
       "cursor-resizer-vertical-Splitter": "var(--xmlui-cursor-resizer-vertical-Splitter)"
     },
     "defaultThemeVars": {
-      "backgroundColor-resizer-Splitter": "$color-surface-100",
+      "backgroundColor-resizer-Splitter": "$backgroundColor-Card",
       "thickness-resizer-Splitter": "5px",
       "cursor-resizer-horizontal-Splitter": "ew-resize",
       "cursor-resizer-vertical-Splitter": "ns-resize"
@@ -19133,7 +19125,7 @@ const collectedComponentMetadata = {
       "cursor-resizer-vertical-Splitter": "var(--xmlui-cursor-resizer-vertical-Splitter)"
     },
     "defaultThemeVars": {
-      "backgroundColor-resizer-Splitter": "$color-surface-100",
+      "backgroundColor-resizer-Splitter": "$backgroundColor-Card",
       "thickness-resizer-Splitter": "5px",
       "cursor-resizer-horizontal-Splitter": "ew-resize",
       "cursor-resizer-vertical-Splitter": "ns-resize"
@@ -19201,7 +19193,7 @@ const collectedComponentMetadata = {
       "cursor-resizer-vertical-Splitter": "var(--xmlui-cursor-resizer-vertical-Splitter)"
     },
     "defaultThemeVars": {
-      "backgroundColor-resizer-Splitter": "$color-surface-100",
+      "backgroundColor-resizer-Splitter": "$backgroundColor-Card",
       "thickness-resizer-Splitter": "5px",
       "cursor-resizer-horizontal-Splitter": "ew-resize",
       "cursor-resizer-vertical-Splitter": "ns-resize"
@@ -19733,8 +19725,7 @@ const collectedComponentMetadata = {
       "Input:outlineWidth-Switch--focus": "var(--xmlui-outlineWidth-Switch--focus)",
       "Input:outlineColor-Switch--focus": "var(--xmlui-outlineColor-Switch--focus)",
       "Input:outlineStyle-Switch--focus": "var(--xmlui-outlineStyle-Switch--focus)",
-      "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)",
-      "backgroundColor-indicator-checked-Switch": "var(--xmlui-backgroundColor-indicator-checked-Switch)"
+      "Input:outlineOffset-Switch--focus": "var(--xmlui-outlineOffset-Switch--focus)"
     },
     "defaultThemeVars": {
       "borderColor-checked-Switch-error": "$borderColor-Switch-error",
@@ -19743,11 +19734,9 @@ const collectedComponentMetadata = {
       "backgroundColor-checked-Switch-warning": "$borderColor-Switch-warning",
       "borderColor-checked-Switch-success": "$borderColor-Switch-success",
       "backgroundColor-checked-Switch-success": "$borderColor-Switch-success",
-      "backgroundColor-Switch": "$backgroundColor-primary",
-      "borderColor-Switch": "$color-surface-200",
-      "borderWidth-Switch": "1px",
-      "backgroundColor-indicator-Switch": "$color-surface-200",
-      "backgroundColor-indicator-checked-Switch": "$backgroundColor-primary",
+      "backgroundColor-Switch": "$color-surface-400",
+      "borderColor-Switch": "$color-surface-400",
+      "backgroundColor-indicator-Switch": "$backgroundColor-primary",
       "borderColor-checked-Switch": "$color-primary-500",
       "backgroundColor-checked-Switch": "$color-primary-500",
       "backgroundColor-Switch--disabled": "$color-surface-200"

package/dist/lib/xmlui.d.ts

@@ -1252,7 +1252,7 @@ declare type Message = ValueOrFunction<Renderable, Toast>;
  */
 declare type ModuleErrors = Record<string, ScriptParserErrorMessage[]>;
 
-export declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame }: NestedAppProps): JSX_2.Element;
+export declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame, }: NestedAppProps): JSX_2.Element;
 
 declare type NestedAppProps = {
     api?: any;

package/dist/lib/xmlui.mjs

@@ -1,33 +1,33 @@
-import { z, A, B, E, I, N, C, j, i, S, b, l, n, F, D, c, e, f, x, k, p, h, t, q, v, w, u, y } from "./index-qQpSddXH.mjs";
+import { y, A, B, E, I, N, z, i, h, S, b, k, l, D, C, c, e, f, w, j, p, s, t, n, q, v, u, x } from "./index-D7kFBKWN.mjs";
 import { X } from "./xmlui-serializer-CQnuXBof.mjs";
 export {
-  z as ApiInterceptorProvider,
+  y as ApiInterceptorProvider,
   A as AppRoot,
   B as Button,
   E as ErrorBoundary,
   I as Icon,
   N as NestedApp,
-  C as Spinner,
-  j as Splitter,
-  i as Stack,
+  z as Spinner,
+  i as Splitter,
+  h as Stack,
   S as StandaloneApp,
   b as StandaloneExtensionManager,
-  l as TabItem,
-  n as Tabs,
-  F as Text,
+  k as TabItem,
+  l as Tabs,
+  D as Text,
   X as XmlUiHelper,
-  D as builtInThemes,
+  C as builtInThemes,
   c as createComponentRenderer,
   e as createMetadata,
   f as d,
-  x as errReportComponent,
-  k as getColor,
+  w as errReportComponent,
+  j as getColor,
   p as parseScssVar,
-  h as startApp,
+  s as startApp,
   t as toCssVar,
-  q as useColors,
-  v as useDevTools,
-  w as useLogger,
+  n as useColors,
+  q as useDevTools,
+  v as useLogger,
   u as useTheme,
-  y as xmlUiMarkupToComponent
+  x as xmlUiMarkupToComponent
 };

package/dist/metadata/xmlui-metadata.mjs

@@ -3850,6 +3850,7 @@ const Heading = forwardRef(function Heading2({
   ellipses = defaultProps$d.ellipses,
   className,
   omitFromToc = defaultProps$d.omitFromToc,
+  showAnchor,
   ...furtherProps
 }, forwardedRef) {
   const Element2 = level == null ? void 0 : level.toLowerCase();
@@ -3892,7 +3893,15 @@ const Heading = forwardRef(function Heading2({
       ...furtherProps,
       children: [
         anchorId && /* @__PURE__ */ jsx("span", { ref: anchorRef2, id: anchorId, className: styles$y.anchorRef, "data-anchor": true }),
-        children
+        children,
+        showAnchor && anchorId && /* @__PURE__ */ jsx(Link, { to: `#${anchorId}`, "aria-hidden": "true", onClick: (event) => {
+          if (tableOfContentsContext) {
+            if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
+              event.preventDefault();
+            }
+            tableOfContentsContext.scrollToAnchor(anchorId, true);
+          }
+        }, children: "#" })
       ]
     }
   );
@@ -15169,7 +15178,7 @@ const H1Md = createMetadata({
     [`fontSize-${H1}`]: "$fontSize-large",
     [`marginTop-${H1}`]: "0",
     [`marginBottom-${H1}`]: "0",
-    [`fontSize-${H1}-markdown`]: "$fontSize-larger",
+    [`fontSize-${H1}-markdown`]: "$fontSize-large",
     [`marginTop-${H1}-markdown`]: "0",
     [`marginBottom-${H1}-markdown`]: "$space-6",
     light: {

package/dist/metadata/xmlui-metadata.umd.js

@@ -3847,6 +3847,7 @@
     ellipses = defaultProps$d.ellipses,
     className,
     omitFromToc = defaultProps$d.omitFromToc,
+    showAnchor,
     ...furtherProps
   }, forwardedRef) {
     const Element2 = level == null ? void 0 : level.toLowerCase();
@@ -3889,7 +3890,15 @@
         ...furtherProps,
         children: [
           anchorId && /* @__PURE__ */ jsxRuntime.jsx("span", { ref: anchorRef2, id: anchorId, className: styles$y.anchorRef, "data-anchor": true }),
-          children
+          children,
+          showAnchor && anchorId && /* @__PURE__ */ jsxRuntime.jsx(react.Link, { to: `#${anchorId}`, "aria-hidden": "true", onClick: (event) => {
+            if (tableOfContentsContext) {
+              if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
+                event.preventDefault();
+              }
+              tableOfContentsContext.scrollToAnchor(anchorId, true);
+            }
+          }, children: "#" })
         ]
       }
     );
@@ -15166,7 +15175,7 @@
       [`fontSize-${H1}`]: "$fontSize-large",
       [`marginTop-${H1}`]: "0",
       [`marginBottom-${H1}`]: "0",
-      [`fontSize-${H1}-markdown`]: "$fontSize-larger",
+      [`fontSize-${H1}-markdown`]: "$fontSize-large",
       [`marginTop-${H1}-markdown`]: "0",
       [`marginBottom-${H1}-markdown`]: "$space-6",
       light: {

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.37",
+    "version": "0.9.38",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -21,7 +21,7 @@
         "prepare-docs-data": "npm run build:xmlui-metadata",
         "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs",
         "export-themes": "npm run prepare-docs-data && node scripts/generate-docs/create-theme-files.mjs",
-        "gen:langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
+        "generate-langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
     },
     "dependencies": {
         "@eslint-community/regexpp": "4.10.0",
@@ -67,7 +67,7 @@
         "immer": "9.0.16",
         "lodash-es": "4.17.21",
         "memoize-one": "6.0.0",
-        "msw": "2.0.1",
+        "msw": "2.8.4",
         "oidc-client-ts": "2.1.0",
         "papaparse": "^5.5.2",
         "react": "18.2.0",
@@ -213,8 +213,8 @@
             "import": "./src/components-core/theming/_themes.scss"
         },
         "./vite-xmlui-plugin": {
-            "import": "./bin/vite-xmlui-plugin.ts",
-            "require": "./bin/vite-xmlui-plugin.ts"
+            "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
+            "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
         },
         "./language-server": {
             "import": "./src/language-server/server.ts",

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

@@ -87,7 +87,7 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
         [`fontSize-${H1}`]: "$fontSize-large",
         [`marginTop-${H1}`]: "0",
         [`marginBottom-${H1}`]: "0",
-        [`fontSize-${H1}-markdown`]: "$fontSize-larger",
+        [`fontSize-${H1}-markdown`]: "$fontSize-large",
         [`marginTop-${H1}-markdown`]: "0",
         [`marginBottom-${H1}-markdown`]: "$space-6",
         light: {

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -23,6 +23,7 @@ const Heading_module_scss_1 = __importDefault(require("./Heading.module.scss"));
 const css_utils_1 = require("../../components-core/utils/css-utils");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
 const hooks_1 = require("../../components-core/utils/hooks");
+const react_2 = require("@remix-run/react");
 exports.defaultProps = {
     level: "h1",
     ellipses: true,
@@ -30,7 +31,7 @@ exports.defaultProps = {
     maxLines: 0,
 };
 exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
-    var { uid, level = exports.defaultProps.level, children, sx, style, title, maxLines = exports.defaultProps.maxLines, preserveLinebreaks, ellipses = exports.defaultProps.ellipses, className, omitFromToc = exports.defaultProps.omitFromToc } = _a, furtherProps = __rest(_a, ["uid", "level", "children", "sx", "style", "title", "maxLines", "preserveLinebreaks", "ellipses", "className", "omitFromToc"]);
+    var { uid, level = exports.defaultProps.level, children, sx, style, title, maxLines = exports.defaultProps.maxLines, preserveLinebreaks, ellipses = exports.defaultProps.ellipses, className, omitFromToc = exports.defaultProps.omitFromToc, showAnchor } = _a, furtherProps = __rest(_a, ["uid", "level", "children", "sx", "style", "title", "maxLines", "preserveLinebreaks", "ellipses", "className", "omitFromToc", "showAnchor"]);
     const Element = level === null || level === void 0 ? void 0 : level.toLowerCase();
     const elementRef = (0, react_1.useRef)(null);
     const [anchorId, setAnchorId] = (0, react_1.useState)(null);
@@ -59,5 +60,13 @@ exports.Heading = (0, react_1.forwardRef)(function Heading(_a, forwardedRef) {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, className: Heading_module_scss_1.default.anchorRef, "data-anchor": true })), children] })));
+        }) }, furtherProps, { children: [anchorId && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, className: Heading_module_scss_1.default.anchorRef, "data-anchor": true })), children, showAnchor && anchorId && ((0, jsx_runtime_1.jsx)(react_2.Link, { to: `#${anchorId}`, "aria-hidden": "true", onClick: (event) => {
+                    // cmd/ctrl + click - open in new tab, don't prevent that
+                    if (tableOfContentsContext) {
+                        if (!event.ctrlKey && !event.metaKey && !event.metaKey) {
+                            event.preventDefault();
+                        }
+                        tableOfContentsContext.scrollToAnchor(anchorId, true);
+                    }
+                }, children: "#" }))] })));
 });

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

@@ -18,7 +18,7 @@ exports.Markdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = __importDefault(require("react"));
-const react_markdown_1 = require("react-markdown");
+const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const rehype_raw_1 = __importDefault(require("rehype-raw"));
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
@@ -50,7 +50,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    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.MarkdownHooks, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser], rehypePlugins: [rehype_raw_1.default], components: {
+    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, CodeBlockNative_1.markdownCodeBlockParser], 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 })));
@@ -281,12 +281,7 @@ function LinkAwareHeading({ children, level, showHeadingAnchors }) {
     if (!anchorId) {
         anchorId = headingToAnchorLink(extractTextNodes(headingLabel));
     }
-    const currentPath = window.location.href.replace(/(?<!\/)#.*$/, "");
-    const href = `${currentPath}#${anchorId}`;
-    return ((0, jsx_runtime_1.jsxs)(HeadingNative_1.Heading, { level: level, id: anchorId, children: [headingLabel, showHeadingAnchors && anchorId && (
-            // NOTE: Anchor is hidden from screen readers
-            // TODO: make sure this is a good idea
-            (0, jsx_runtime_1.jsx)("a", { href: href, id: anchorId, "aria-hidden": "true", children: "#" }))] }));
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: level, id: anchorId, showAnchor: showHeadingAnchors, children: headingLabel }));
 }
 // --- Helper functions
 function removeTextIndents(input) {

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

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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) {
@@ -23,14 +56,13 @@ const rx_1 = require("react-icons/rx");
 const xmlui_parser_1 = require("../../components-core/xmlui-parser");
 const ApiInterceptorProvider_1 = require("../../components-core/interception/ApiInterceptorProvider");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
-const browser_1 = require("msw/browser");
 const Tooltip_1 = require("./Tooltip");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const utils_1 = require("./utils");
 const AppContext_1 = require("../../components-core/AppContext");
 const ComponentRegistryContext_1 = require("../ComponentRegistryContext");
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, withFrame = true }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, withFrame = true, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -40,18 +72,22 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const apiWorker = (0, react_1.useMemo)(() => {
-        if (typeof document !== "undefined") {
-            return (0, browser_1.setupWorker)();
-        }
-    }, []);
+    const [apiWorker, setApiWorker] = (0, react_1.useState)(undefined);
     (0, react_1.useEffect)(() => {
-        apiWorker === null || apiWorker === void 0 ? void 0 : apiWorker.start({
-            onUnhandledRequest: "bypass",
-            quiet: true,
-        });
-        return () => apiWorker === null || apiWorker === void 0 ? void 0 : apiWorker.stop();
-    }, [apiWorker]);
+        let worker;
+        (function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const { setupWorker } = yield Promise.resolve().then(() => __importStar(require("msw/browser")));
+                worker = setupWorker();
+                worker.start({
+                    onUnhandledRequest: "bypass",
+                    quiet: true,
+                });
+                setApiWorker(worker);
+            });
+        })();
+        return () => worker === null || worker === void 0 ? void 0 : worker.stop();
+    }, []);
     // console.log("apiWorker", apiWorker);
     const mock = (0, react_1.useMemo)(() => {
         return api
@@ -134,6 +170,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         allowPlaygroundPopup,
         apiWorker,
         app,
+        componentRegistry,
         components,
         config === null || config === void 0 ? void 0 : config.appGlobals,
         config === null || config === void 0 ? void 0 : config.defaultTheme,
@@ -148,12 +185,15 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         theme.themeStyles,
         title,
         toneToApply,
+        withFrame,
     ]);
     (0, react_1.useEffect)(() => {
         return () => {
-            var _a;
-            (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.unmount();
-            contentRootRef.current = null;
+            setTimeout(() => {
+                var _a;
+                (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.unmount();
+                contentRootRef.current = null;
+            });
         };
     }, []);
     return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, style: {

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

@@ -13,7 +13,7 @@ exports.createApiInterceptorWorker = void 0;
 const browser_1 = require("msw/browser");
 const msw_1 = require("msw");
 const lodash_es_1 = require("lodash-es");
-const ApiInterceptor_1 = require("../interception/ApiInterceptor");
+const ApiInterceptor_1 = require("./ApiInterceptor");
 // Create handlers for the specified API interceptor
 function createHandlers(api) {
     const operations = api.getOperations();
@@ -40,6 +40,7 @@ const createApiInterceptorWorker = (apiInterceptorDefinition, apiWorker) => __aw
     if (!worker) {
         worker = (0, browser_1.setupWorker)();
     }
+    // https://github.com/mswjs/msw/issues/2495
     worker.use(...handlers);
     return worker;
 });

package/dist/scripts/src/components-core/loader/Loader.js

@@ -76,13 +76,13 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
     }, [pollIntervalInSeconds, refetch]);
     const prevData = (0, hooks_1.usePrevious)(data);
     const prevError = (0, hooks_1.usePrevious)(error);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         loaderInProgressChanged(isFetching);
     }, [isFetching, loaderInProgressChanged]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         loaderIsRefetchingChanged(isRefetching);
     }, [isRefetching, loaderIsRefetchingChanged]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         //console.log("isRefetching", isRefetching);
         //console.log("[Loader] useLayoutEffect status:", status);
         //console.log("[Loader] useLayoutEffect data:", data);
@@ -105,7 +105,7 @@ function Loader({ state, loader, loaderFn, queryId, pollIntervalInSeconds, regis
             loaderError(error);
         }
     }, [data, error, loaderError, loaderLoaded, onLoaded, prevData, prevError, status, isRefetching]);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         return () => {
             loaderLoaded(undefined);
         };

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

@@ -40,9 +40,10 @@ const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "",
     const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: children }) }) }) }) })] })] }));
     // --- Select the router type for the app
     const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
+    const shouldSkipClientRouter = previewMode ? false : (typeof window === "undefined" || process.env.VITE_REMIX);
     return (
     // <React.StrictMode>
-    (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [(typeof window === "undefined" || process.env.VITE_REMIX) && dynamicChildren, !(typeof window === "undefined" || process.env.VITE_REMIX) && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) })
+    (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) })
     // </React.StrictMode>
     );
 };

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

@@ -1407,7 +1407,7 @@ declare type Message = ValueOrFunction<Renderable, Toast>;
  */
 declare type ModuleErrors = Record<string, ScriptParserErrorMessage[]>;
 
-declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame }: NestedAppProps): JSX_2.Element;
+declare function NestedApp({ api, app, components, config, activeTheme, activeTone, title, height, allowPlaygroundPopup, withFrame, }: NestedAppProps): JSX_2.Element;
 
 declare type NestedAppProps = {
     api?: any;