xmlui 0.9.46 → 0.9.47

package/dist/scripts/package.json

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

package/dist/scripts/src/components/App/AppNative.js

@@ -228,7 +228,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const handleOpenChange = (0, react_1.useCallback)((open) => {
         setDrawerVisible(open);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), (0, jsx_runtime_1.jsx)(SearchContext_1.SearchContextProvider, { children: content })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsx)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: (0, jsx_runtime_1.jsxs)(SearchContext_1.SearchContextProvider, { children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), content] }) })] }));
 }
 function getAppLayoutOrientation(appLayout) {
     switch (appLayout) {

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

@@ -10,6 +10,7 @@ const TextArea_1 = require("./TextArea/TextArea");
 const NavLink_1 = require("./NavLink/NavLink");
 const Link_1 = require("./Link/Link");
 const TreeComponent_1 = require("./Tree/TreeComponent");
+const TreeDisplay_1 = require("./TreeDisplay/TreeDisplay");
 const Button_1 = require("./Button/Button");
 const Heading_1 = require("./Heading/Heading");
 const Text_1 = require("./Text/Text");
@@ -112,6 +113,9 @@ const CodeBlock_1 = require("./CodeBlock/CodeBlock");
 const dataSourcePropHolder = (0, renderers_1.createPropHolderComponent)("DataSource");
 const textNodePropHolder = (0, renderers_1.createPropHolderComponent)("TextNode");
 const textNodeCDataPropHolder = (0, renderers_1.createPropHolderComponent)("TextNodeCData");
+const APP_NS = "#app-ns";
+const CORE_NS = "#xmlui-core-ns";
+const EXTENSIONS_NS = "XMLUIExtensions";
 /**
  * This class implements the registry that holds the components available
  * in xmlui. Any component in this registry can be used in the xmlui markup.
@@ -132,7 +136,8 @@ class ComponentRegistry {
         var _a, _b, _c;
         this.extensionManager = extensionManager;
         // --- The pool of available components
-        this.pool = new Map();
+        this.pool = new Map(); // namespace -> name -> ComponentRegistryEntry;
+        this.namePool = new Map();
         // --- The pool of available theme variable names
         this.themeVars = new Set();
         // --- Default theme variable values collected from the registered components
@@ -152,33 +157,34 @@ class ComponentRegistry {
         };
         // --- Registers a renderable component using its renderer function
         this.registerCoreComponent = (component) => {
-            const coreNamespaces = ["#xmlui-core-ns", ""];
             if ("compoundComponentDef" in component) {
-                this.registerCompoundComponentRenderer(component, ...coreNamespaces);
+                this.registerCompoundComponentRenderer(component, CORE_NS);
             }
             else {
-                this.registerComponentRenderer(component, ...coreNamespaces);
+                this.registerComponentRenderer(component, CORE_NS);
             }
         };
         this.registerAppComponent = (component) => {
-            const appNamespaces = ["#app-ns", ""];
             if ("compoundComponentDef" in component) {
-                this.registerCompoundComponentRenderer(component, ...appNamespaces);
+                this.registerCompoundComponentRenderer(component, APP_NS);
             }
             else {
-                this.registerComponentRenderer(component, ...appNamespaces);
+                this.registerComponentRenderer(component, APP_NS);
             }
         };
         // --- and metadata
-        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
+        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, namespace) => {
             const component = {
                 renderer,
                 descriptor: metadata,
                 isCompoundComponent,
             };
-            namespaces.forEach((ns) => {
-                this.pool.set((ns ? ns + "." : "") + type, component);
-            });
+            const fullName = `${namespace}.${type}`;
+            if (!this.pool.has(namespace)) {
+                this.pool.set(namespace, new Map());
+            }
+            this.pool.get(namespace).set(type, component);
+            this.namePool.set(fullName, { name: type, namespace });
             if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
                 Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
             }
@@ -236,6 +242,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_Tree !== "false") {
             this.registerCoreComponent(TreeComponent_1.treeComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_TreeDisplay !== "false") {
+            this.registerCoreComponent(TreeDisplay_1.treeDisplayComponentRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
             this.registerCoreComponent(Button_1.buttonComponentRenderer);
         }
@@ -390,106 +399,208 @@ class ComponentRegistry {
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
         this.registerCoreComponent(APICall_2.apiCallRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        if (process.env.VITE_INCLUDE_HTML_COMPONENTS !== "false") {
+            this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        }
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);
@@ -519,12 +630,6 @@ class ComponentRegistry {
     get actionFunctions() {
         return this.actionFns;
     }
-    /**
-     * @returns The keys of all components registered in the component registry.
-     */
-    getRegisteredComponentKeys() {
-        return Array.from(this.pool.keys());
-    }
     /**
      * This method retrieves the registry entry of a component registered
      * with the specified key.
@@ -532,7 +637,22 @@ class ComponentRegistry {
      * @returns The component registry entry, if found; otherwise, undefined.
      */
     lookupComponentRenderer(componentName) {
-        return this.pool.get(componentName);
+        var _a, _b, _c, _d;
+        if (!componentName) {
+            return undefined;
+        }
+        // componentName without namespace, 1. core, 2. app, 3. XMLUIExtension
+        if (!componentName.includes(".")) {
+            return (((_a = this.pool.get(CORE_NS)) === null || _a === void 0 ? void 0 : _a.get(componentName)) ||
+                ((_b = this.pool.get(APP_NS)) === null || _b === void 0 ? void 0 : _b.get(componentName)) ||
+                ((_c = this.pool.get(EXTENSIONS_NS)) === null || _c === void 0 ? void 0 : _c.get(componentName)));
+        }
+        // order: componentName includes namespace, find in that pool
+        const nameInfo = this.namePool.get(componentName);
+        if (!nameInfo) {
+            return undefined;
+        }
+        return (_d = this.pool.get(nameInfo.namespace)) === null || _d === void 0 ? void 0 : _d.get(nameInfo.name);
     }
     /**
      * This method retrieves the registry entry of an action registered
@@ -579,9 +699,8 @@ class ComponentRegistry {
     getExtensionManager() {
         return this.extensionManager;
     }
-    ;
     // --- Registers a compound component using its definition and metadata
-    registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
+    registerCompoundComponentRenderer({ compoundComponentDef, metadata }, namespace) {
         const component = {
             type: compoundComponentDef.name,
             renderer: (rendererContext) => {
@@ -590,7 +709,7 @@ class ComponentRegistry {
             isCompoundComponent: true,
             metadata,
         };
-        this.registerComponentRenderer(component, ...namespaces);
+        this.registerComponentRenderer(component, namespace);
     }
     // --- Registers an action function using its definition
     registerActionFn({ actionName: functionName, actionFn }) {

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

@@ -113,6 +113,15 @@ const TransformedMarkdown = ({ children, removeIndents, style, extractValue, cod
                     (0, utils_1.convertPlaygroundPatternToMarkdown)(nextPlayground[2]) +
                     resolvedMd.slice(nextPlayground[1]);
         }
+        while (true) {
+            const nextTreeDisplay = (0, utils_1.observeTreeDisplay)(resolvedMd);
+            if (!nextTreeDisplay)
+                break;
+            resolvedMd =
+                resolvedMd.slice(0, nextTreeDisplay[0]) +
+                    (0, utils_1.convertTreeDisplayToMarkdown)(nextTreeDisplay[2]) +
+                    resolvedMd.slice(nextTreeDisplay[1]);
+        }
         resolvedMd = (0, parse_binding_expr_1.parseBindingExpression)(resolvedMd, extractValue);
         return resolvedMd;
     }, [children, extractValue]);

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

@@ -66,6 +66,7 @@ const AppContext_1 = require("../../components-core/AppContext");
 const CodeBlockNative_1 = require("../CodeBlock/CodeBlockNative");
 const classnames_1 = __importDefault(require("classnames"));
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const TreeDisplayNative_1 = require("../TreeDisplay/TreeDisplayNative");
 function PreTagComponent({ id, children, codeHighlighter }) {
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -283,6 +284,15 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     }
                     return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: nestedProps.app, config: nestedProps.config, components: nestedProps.components, api: nestedProps.api, activeTheme: nestedProps.activeTheme, activeTone: nestedProps.activeTone, title: nestedProps.title, height: nestedProps.height, allowPlaygroundPopup: true }));
                 },
+                section(_a) {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    const treeContentBase64 = props === null || props === void 0 ? void 0 : props["data-tree-content"];
+                    if (treeContentBase64 !== undefined) {
+                        const content = atob(treeContentBase64);
+                        return (0, jsx_runtime_1.jsx)(TreeDisplayNative_1.TreeDisplay, { content: content, itemHeight: 24 });
+                    }
+                    return null;
+                }
             }, children: children }) }));
 });
 const HorizontalRule = () => {

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

@@ -4,6 +4,8 @@ exports.observePlaygroundPattern = observePlaygroundPattern;
 exports.parseSegmentProps = parseSegmentProps;
 exports.parsePlaygroundPattern = parsePlaygroundPattern;
 exports.convertPlaygroundPatternToMarkdown = convertPlaygroundPatternToMarkdown;
+exports.observeTreeDisplay = observeTreeDisplay;
+exports.convertTreeDisplayToMarkdown = convertTreeDisplayToMarkdown;
 function observePlaygroundPattern(content) {
     const startPattern = "```xmlui-pg";
     const endPattern = "```";
@@ -280,3 +282,39 @@ function convertPlaygroundPatternToMarkdown(content) {
     markdownContent += '<samp data-pg-content="' + base64String + '"></samp>\n\n';
     return markdownContent;
 }
+function observeTreeDisplay(content) {
+    const startPattern = "```xmlui-tree";
+    const endPattern = "```";
+    const startIndex = content.indexOf(startPattern);
+    if (startIndex === -1) {
+        return null; // No match for the start pattern
+    }
+    // Find the end of the start pattern
+    const startContentIndex = content.indexOf("\n", startIndex);
+    if (startContentIndex === -1) {
+        return null; // Malformed pattern, no newline after start
+    }
+    // Search for the end pattern after the start content
+    let endIndex = startContentIndex;
+    while (endIndex !== -1) {
+        endIndex = content.indexOf(endPattern, endIndex + 1);
+        if (endIndex !== -1) {
+            // Check if the end pattern is not escaped
+            const precedingChar = content[endIndex - 1];
+            if (precedingChar !== "\\") {
+                return [
+                    startIndex,
+                    endIndex + endPattern.length,
+                    content.substring(startIndex, endIndex + endPattern.length),
+                ];
+            }
+        }
+    }
+    return null; // No valid end pattern found
+}
+function convertTreeDisplayToMarkdown(content) {
+    if (content.startsWith("```xmlui-tree") && content.endsWith("```")) {
+        const treeContent = content.slice("```xmlui-tree".length, content.indexOf("```", "```xmlui-tree".length)).trim();
+        return `<section data-tree-content="${btoa(treeContent)}"></section>\n\n`;
+    }
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavGroupContext = void 0;
+const react_1 = require("react");
+const NavGroupNative_1 = require("./NavGroupNative");
+exports.NavGroupContext = (0, react_1.createContext)({
+    level: -1,
+    iconHorizontalCollapsed: NavGroupNative_1.defaultProps.iconHorizontalCollapsed,
+    iconHorizontalExpanded: NavGroupNative_1.defaultProps.iconHorizontalExpanded,
+    iconVerticalCollapsed: NavGroupNative_1.defaultProps.iconVerticalCollapsed,
+    iconVerticalExpanded: NavGroupNative_1.defaultProps.iconVerticalExpanded,
+});