xmlui 0.9.46 → 0.9.48

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

@@ -25,11 +25,14 @@ exports.IconMd = (0, ComponentDefs_1.createMetadata)({
         fallback: (0, ComponentDefs_1.d)(`This optional property provides a way to handle situations when the provided ` +
             `[icon name](#name) is not found in the registry.`),
     },
+    events: {
+        click: (0, ComponentDefs_1.d)("This event is triggered when the icon is clicked."),
+    },
     themeVars: (0, themeVars_1.parseScssVar)(Icon_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`size-${COMP}`]: "1.25em",
     },
 });
-exports.iconComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.IconMd, ({ node, extractValue, layoutCss }) => {
-    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), style: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback) }));
+exports.iconComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.IconMd, ({ node, extractValue, layoutCss, lookupEventHandler }) => {
+    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), style: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback), onClick: lookupEventHandler("click") }));
 });

package/dist/scripts/src/components/Icon/IconNative.js

@@ -25,14 +25,14 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
-    var { name, fallback, style, className, size } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size"]);
+    var { name, fallback, style, className, size, onClick } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick"]);
     const iconRenderer = useFindIconRenderer(name, fallback);
     const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
     const width = computedSize || restProps.width;
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 
         // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }) });
+        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), onClick });
     // ---
     const customIconUrl = useCustomIconUrl(name);
     if (customIconUrl) {

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,
+});

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

@@ -15,21 +15,17 @@ const IconNative_1 = require("../Icon/IconNative");
 const NavLinkNative_1 = require("../NavLink/NavLinkNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
+const react_2 = require("@remix-run/react");
+const classnames_1 = __importDefault(require("classnames"));
+const NavGroupContext_1 = require("./NavGroupContext");
 exports.defaultProps = {
     iconHorizontalExpanded: "chevronright",
     iconHorizontalCollapsed: "chevronright",
     iconVerticalExpanded: "chevrondown",
     iconVerticalCollapsed: "chevronright",
 };
-const NavGroupContext = (0, react_1.createContext)({
-    level: -1,
-    iconHorizontalCollapsed: exports.defaultProps.iconHorizontalCollapsed,
-    iconHorizontalExpanded: exports.defaultProps.iconHorizontalExpanded,
-    iconVerticalCollapsed: exports.defaultProps.iconVerticalCollapsed,
-    iconVerticalExpanded: exports.defaultProps.iconVerticalExpanded,
-});
 exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, label, icon, renderChild, to, disabled = false, initiallyExpanded, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, }, ref) {
-    const { level } = (0, react_1.useContext)(NavGroupContext);
+    const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
     let inline = (appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === "vertical" ||
@@ -53,29 +49,26 @@ exports.NavGroup = (0, react_1.forwardRef)(function NavGroup({ node, style, labe
         iconVerticalExpanded,
         level,
     ]);
-    return ((0, jsx_runtime_1.jsx)(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
+    return ((0, jsx_runtime_1.jsx)(NavGroupContext_1.NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? ((0, jsx_runtime_1.jsx)(ExpandableNavGroup, { to: to, style: style, label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, initiallyExpanded: initiallyExpanded, disabled: disabled })) : ((0, jsx_runtime_1.jsx)(DropDownNavGroup, { label: label, icon: icon, node: node, renderChild: renderChild, ref: ref, to: to, disabled: disabled })) }));
 });
 const ExpandableNavGroup = (0, react_1.forwardRef)(function ExpandableNavGroup({ style = constants_1.EMPTY_OBJECT, label, icon, renderChild, node, to, initiallyExpanded = false, disabled = false, }, ref) {
-    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext);
+    const { level, iconVerticalCollapsed, iconVerticalExpanded } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const [expanded, setExpanded] = (0, react_1.useState)(initiallyExpanded);
-    const toggleStyle = Object.assign(Object.assign({}, style), { paddingLeft: level >= 1 ? level * 2 + "em" : undefined });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), expanded &&
-                renderChild(node.children, {
-                    wrapChild: ({ node }, renderedChild) => {
-                        if (node.type === "NavLink") {
-                            const element = renderedChild;
-                            return (0, react_1.cloneElement)(element, Object.assign({}, (0, mergeProps_1.mergeProps)(renderedChild.props, {
-                                style: {
-                                    paddingLeft: (level + 1) * 2 + "em",
-                                },
-                            })));
-                        }
-                        return renderedChild;
-                    },
-                })] }));
+    const groupContentInnerRef = (0, react_1.useRef)(null);
+    const { pathname } = (0, react_2.useLocation)();
+    (0, react_1.useEffect)(() => {
+        const hasActiveNavLink = groupContentInnerRef.current.querySelector(".xmlui-navlink-active") !== null;
+        if (hasActiveNavLink) {
+            setExpanded(true);
+        }
+    }, [pathname]);
+    const toggleStyle = Object.assign(Object.assign({}, style), { "--nav-link-level": level });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(NavLinkNative_1.NavLink, { style: toggleStyle, onClick: () => setExpanded((prev) => !prev), icon: icon, to: to, disabled: disabled, children: [label, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: expanded ? iconVerticalExpanded : iconVerticalCollapsed })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavGroup_module_scss_1.default.groupContent, {
+                    [NavGroup_module_scss_1.default.expanded]: expanded,
+                }), children: (0, jsx_runtime_1.jsx)("div", { className: NavGroup_module_scss_1.default.groupContentInner, ref: groupContentInnerRef, children: renderChild(node.children) }) })] }));
 });
 const DropDownNavGroup = (0, react_1.forwardRef)(function DropDownNavGroup({ style, label, icon, renderChild, node, to, disabled = false, }, ref) {
-    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext);
+    const { level, iconHorizontalCollapsed, iconHorizontalExpanded, iconVerticalCollapsed, iconVerticalExpanded, } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     const { root } = (0, ThemeContext_1.useTheme)();
     let Wrapper = react_dropdown_menu_1.DropdownMenu;
     let Trigger = react_dropdown_menu_1.DropdownMenuTrigger;

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

@@ -24,12 +24,14 @@ const component_utils_1 = require("../component-utils");
 const AppNative_1 = require("../App/AppNative");
 const AppLayoutContext_1 = require("../App/AppLayoutContext");
 const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
+const NavGroupContext_1 = require("../NavGroup/NavGroupContext");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
+    uid, children, disabled, to, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
+    const { level } = (0, react_1.useContext)(NavGroupContext_1.NavGroupContext);
     let safeVertical = vertical;
     if (appLayoutContext && safeVertical === undefined) {
         safeVertical =
@@ -40,22 +42,26 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
             return (0, component_utils_1.createUrlWithQueryParams)(to);
         }
     }, [to]);
-    const styleObj = Object.assign(Object.assign({}, sx), style);
+    const styleObj = (0, react_1.useMemo)(() => {
+        return Object.assign({ "--nav-link-level": level + 1 }, style);
+    }, [level, style]);
     const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
         [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
         [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
     });
+    let innerContent = (0, jsx_runtime_1.jsxs)("div", { className: NavLink_module_scss_1.default.innerContent, children: [icon, children] });
     let content;
     if (disabled || !smartTo) {
-        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
+        content = ((0, jsx_runtime_1.jsx)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: innerContent })));
     }
     else {
-        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
+        content = ((0, jsx_runtime_1.jsx)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
                 [NavLink_module_scss_1.default.displayActive]: displayActive,
                 [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
-            }), children: [icon, children] })));
+                'xmlui-navlink-active': isActive || forceActive
+            }), children: innerContent })));
     }
     return content;
 });

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

@@ -126,7 +126,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         if (!contentRootRef.current && shadowRef.current) {
             contentRootRef.current = client_1.default.createRoot(shadowRef.current);
         }
-        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(`<Fragment xmlns:XMLUIExtensions="component-ns">${app}</Fragment>`);
+        let { errors, component, erroneousCompoundComponentName } = (0, xmlui_parser_1.xmlUiMarkupToComponent)(app);
         if (errors.length > 0) {
             component = (0, xmlui_parser_1.errReportComponent)(errors, "Main.xmlui", erroneousCompoundComponentName);
         }

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

@@ -104,6 +104,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`marginTop-${COMP}-tableheading`]: "$space-1",
         [`marginBottom-${COMP}-tableheading`]: "$space-4",
         [`paddingHorizontal-${COMP}-tableheading`]: "$space-1",
+        [`fontSize-${COMP}-tableheading`]: "$fontSize-H6",
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`marginTop-${COMP}-markdown`]: "$space-3",
         [`marginBottom-${COMP}-markdown`]: "$space-6",

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -12,7 +12,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const Theme_module_scss_1 = __importDefault(require("./Theme.module.scss"));
 const ThemeProvider_1 = require("../../components-core/theming/ThemeProvider");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const themeVars_1 = require("../../components-core/theming/themeVars");
 const constants_1 = require("../../components-core/constants");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
 const NotificationToast_1 = require("./NotificationToast");
@@ -47,7 +46,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         return foundTheme;
     }, [activeTheme, generatedId, id, themeTone, themeVars, themes]);
     const { themeCssVars, getResourceUrl, fontLinks, allThemeVarsWithResolvedHierarchicalVars, getThemeVar, } = (0, ThemeProvider_1.useCompiledTheme)(currentTheme, themeTone, themes, resources, resourceMap);
-    const { css, className, rangeClassName, fromClass, toClass } = (0, react_1.useMemo)(() => {
+    const { css, className } = (0, react_1.useMemo)(() => {
         const vars = Object.assign(Object.assign({}, themeCssVars), { "color-scheme": themeTone });
         // const vars = themeCssVars;
         let css = Object.entries(vars)
@@ -55,16 +54,8 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
             return key + ":" + value + ";";
         })
             .join(" ");
-        css += `font-family: var(${(0, themeVars_1.getVarKey)("fontFamily")});`;
         const className = getClassName(css);
-        const fromClass = `${className}-from`;
-        const toClass = `${className}-to`;
-        let rangeClassName;
-        if (!isRoot) {
-            rangeClassName = `${fromClass} ~ *:has(~ .${toClass})`;
-            css += `color: var(${(0, themeVars_1.getVarKey)("textColor-primary")});`;
-        }
-        else {
+        if (isRoot) {
             css += `--screenSize: 0;`;
             const maxWidthPhone = getThemeVar("maxWidth-phone");
             const maxWidthLandscapePhone = getThemeVar("maxWidth-landscape-phone");
@@ -95,29 +86,9 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         }
         return {
             className,
-            rangeClassName,
-            fromClass,
-            toClass,
             css,
         };
     }, [isRoot, themeCssVars, themeTone, getThemeVar]);
-    // useInsertionEffect(() => {
-    //   //PERF OPT IDEA: don't inject the css content that we already have
-    //   // (e.g. in Items component we inject and generate classes for all items if we use a theme for an item, but they have the same content.
-    //   // We could inject one class, and use that instead. The harder part is keeping track of them, and remove when nobody uses them)
-    //   injectCSS(`.${className} {${css}}`, className);
-    //   if (rangeClassName) {
-    //     injectCSS(`.${rangeClassName} {${css}}`, rangeClassName);
-    //   }
-    //   let injectedClassNames = [className, rangeClassName];
-    //   return () => {
-    //     injectedClassNames.forEach(injectedClassName => {
-    //       if (injectedClassName) {
-    //         cleanupCss(injectedClassName);
-    //       }
-    //     });
-    //   };
-    // }, [className, css]);
     const [themeRoot, setThemeRoot] = (0, react_1.useState)(root);
     const currentThemeContextValue = (0, react_1.useMemo)(() => {
         const themeVal = {
@@ -167,7 +138,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
         // </ThemeContext.Provider>
         );
     }
-    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${rangeClassName} {${css}}` }), (0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.from, fromClass) }), renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.to, toClass) }), root &&
+    return ((0, jsx_runtime_1.jsxs)(ThemeContext_1.ThemeContext.Provider, { value: currentThemeContextValue, children: [(0, jsx_runtime_1.jsx)("style", { children: `.${className} {${css}}` }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, Theme_module_scss_1.default.wrapper, className), children: renderChild(node.children, Object.assign(Object.assign({}, layoutContext), { themeClassName: className })) }), root &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className), ref: (el) => {
                         if (el) {
                             setThemeRoot(el);

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

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeDisplayComponentRenderer = exports.TreeDisplayMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TreeDisplay_module_scss_1 = __importDefault(require("./TreeDisplay.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const TreeDisplayNative_1 = require("./TreeDisplayNative");
+const COMP = "TreeDisplay";
+exports.TreeDisplayMd = (0, ComponentDefs_1.createMetadata)({
+    status: "stable",
+    description: `The \`${COMP}\` component displays hierarchical data in a tree structure. ` +
+        `It accepts an indented text format where each line is an entry in the tree, and ` +
+        `the number of leading spaces determines the nesting level. The component renders ` +
+        `the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
+    props: {
+        content: {
+            description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
+            valueType: "string",
+            defaultValue: TreeDisplayNative_1.defaultProps.content,
+        },
+        itemHeight: {
+            description: "The height of each tree item in pixels.",
+            valueType: "number",
+            defaultValue: 24,
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(TreeDisplay_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`backgroundColor-${COMP}`]: "$color-primary-50",
+        [`borderRadius-${COMP}`]: "8px",
+        [`padding-${COMP}`]: "$space-4",
+        [`paddingLeft-${COMP}`]: "$space-2",
+        [`fontSize-${COMP}`]: "$fontSize-default",
+        [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-${COMP}`]: "$fontFamily-monospace",
+        [`color-${COMP}`]: "$textColor-primary",
+        [`color-connect-${COMP}`]: "$color-surface-200",
+    },
+});
+exports.treeDisplayComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TreeDisplayMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(TreeDisplayNative_1.TreeDisplay, { style: layoutCss, content: extractValue.asOptionalString(node.props.content), itemHeight: extractValue.asOptionalNumber(node.props.itemHeight), children: renderChild(node.children) }));
+});

package/dist/scripts/src/components/TreeDisplay/TreeDisplayNative.js

@@ -0,0 +1,102 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeDisplay = exports.defaultProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TreeDisplay_module_scss_1 = __importDefault(require("./TreeDisplay.module.scss"));
+exports.defaultProps = {
+    content: "",
+};
+// Parse the indented text into a tree structure
+const parseTreeContent = (content) => {
+    if (!content)
+        return [];
+    const lines = content.split("\n").filter((line) => line.trim());
+    if (lines.length === 0)
+        return [];
+    const rootNodes = [];
+    const levelMap = {};
+    lines.forEach((line) => {
+        // Count leading spaces to determine level
+        const leadingSpaces = line.length - line.trimLeft().length;
+        const currentLevel = leadingSpaces;
+        const label = line.trim();
+        const node = { label, level: currentLevel, children: [] };
+        // If we're at level 0, this is a root node
+        if (currentLevel === 0) {
+            rootNodes.push(node);
+            levelMap[0] = rootNodes;
+            return;
+        }
+        // Find the nearest parent level
+        let parentLevel = currentLevel - 1;
+        while (parentLevel >= 0) {
+            if (levelMap[parentLevel] && levelMap[parentLevel].length > 0) {
+                // Get the last node at the parent level
+                const parent = levelMap[parentLevel][levelMap[parentLevel].length - 1];
+                parent.children.push(node);
+                // Initialize or update this level's map entry
+                if (!levelMap[currentLevel]) {
+                    levelMap[currentLevel] = [];
+                }
+                levelMap[currentLevel].push(node);
+                return;
+            }
+            parentLevel--;
+        }
+        // If we get here, something is wrong with the tree structure
+        // Add to root as fallback
+        rootNodes.push(node);
+    });
+    // Mark last children at each level for correct connector rendering
+    const markLastChildren = (nodes) => {
+        if (nodes.length > 0) {
+            nodes[nodes.length - 1].isLast = true;
+            nodes.forEach((node) => {
+                if (node.children.length > 0) {
+                    markLastChildren(node.children);
+                }
+            });
+        }
+    };
+    markLastChildren(rootNodes);
+    return rootNodes;
+};
+// Calculate the total height of a node and its descendants
+const calculateNodeHeight = (node, itemHeight) => {
+    if (node.children.length === 0) {
+        return itemHeight; // Single node height
+    }
+    return (itemHeight +
+        node.children.reduce((acc, child) => acc + calculateNodeHeight(child, itemHeight), 0));
+};
+// Render a node and its children with SVG line connectors
+const renderTreeNode = (node, index, itemHeight, level = 0, ancestorLines = []) => {
+    const isLast = node.isLast;
+    const isRoot = level === 0;
+    const hasChildren = node.children.length > 0;
+    const nodeHeight = hasChildren ? calculateNodeHeight(node, itemHeight) : itemHeight;
+    const halfHeight = itemHeight / 2;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TreeDisplay_module_scss_1.default.treeNode, children: [(0, jsx_runtime_1.jsxs)("div", { className: TreeDisplay_module_scss_1.default.treeNodeRow, style: { height: `${itemHeight}px` }, children: [(0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.connectorArea, style: {
+                            marginLeft: `${level * itemHeight}px`,
+                            width: `${itemHeight}px`,
+                            height: `${itemHeight}px`,
+                        }, children: (0, jsx_runtime_1.jsxs)("svg", { className: TreeDisplay_module_scss_1.default.connector, width: itemHeight, height: hasChildren ? nodeHeight : itemHeight, viewBox: `0 0 ${itemHeight} ${hasChildren ? nodeHeight : itemHeight}`, style: { position: "absolute", top: 0, left: 0 }, children: [isRoot && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: itemHeight, y2: halfHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }) })), !isRoot && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: 0, x2: halfHeight, y2: isLast ? halfHeight : itemHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }), (0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: itemHeight, y2: halfHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine })] })), !isLast && hasChildren && ((0, jsx_runtime_1.jsx)("line", { x1: halfHeight, y1: halfHeight, x2: halfHeight, y2: nodeHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine })), ancestorLines.map((shouldDraw, i) => shouldDraw && ((0, jsx_runtime_1.jsx)("line", { x1: halfHeight - (level - i) * itemHeight, y1: 0, x2: halfHeight - (level - i) * itemHeight, y2: nodeHeight, strokeWidth: "1.5", className: TreeDisplay_module_scss_1.default.connectorLine }, `ancestor-${i}`)))] }) }), (0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.treeNodeContent, style: { lineHeight: `${itemHeight}px` }, children: node.label })] }), hasChildren && ((0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.childrenContainer, children: node.children.map((child, i) => {
+                    // Create new ancestor lines array for child nodes
+                    const newAncestorLines = [...ancestorLines];
+                    while (newAncestorLines.length <= level) {
+                        newAncestorLines.push(false);
+                    }
+                    // Set current level's line status: draw if this child is not the last child
+                    newAncestorLines[level] = i !== node.children.length - 1;
+                    return renderTreeNode(child, i, itemHeight, level + 1, newAncestorLines);
+                }) }))] }, `${node.label}-${index}`));
+};
+exports.TreeDisplay = (0, react_1.forwardRef)(function TreeDisplay({ style, children, content = "", itemHeight = 24 }, forwardedRef) {
+    const contentString = (content || (children === null || children === void 0 ? void 0 : children.toString()) || "").toString();
+    const treeNodes = (0, react_1.useMemo)(() => parseTreeContent(contentString), [contentString]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.treeDisplay, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { className: TreeDisplay_module_scss_1.default.content, children: treeNodes.map((node, index) => renderTreeNode(node, index, itemHeight, 0, [])) }) }));
+});

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

@@ -198,6 +198,7 @@ const TextVariantKeys = [
     "code", // use <code>
     "codefence", // use uniquely styled <![CDATA[
     "deleted", // use <del>
+    "inherit",
     "inserted", // use <ins>
     "keyboard", // use <kbd>,
     "marked", // use <mark>
@@ -224,6 +225,7 @@ exports.TextVariantElement = {
     code: "code",
     codefence: "pre",
     deleted: "del",
+    inherit: "span",
     inserted: "ins",
     keyboard: "kbd",
     marked: "mark",
@@ -255,6 +257,10 @@ exports.variantOptionsMd = [
     },
     { value: "deleted", description: "Represents text that has been deleted" },
     { value: "em", description: "Marks text to stress emphasis" },
+    {
+        value: "inherit",
+        description: "Represents text that inherits the style from its parent element",
+    },
     {
         value: "inserted",
         description: "Represents a range of text that has been added to a document",

package/dist/scripts/src/components-core/theming/ThemeProvider.js

@@ -122,7 +122,7 @@ function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_AR
             })
                 .slice(0, themeDefChain.length - 1),
             Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, transformThemeVars_1.generateBaseSpacings)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseFontSizes)(mergedThemeVars)), (0, transformThemeVars_1.generatePaddingSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBorderSegments)(mergedThemeVars)), (0, transformThemeVars_1.generateBaseTones)(mergedThemeVars)), (0, transformThemeVars_1.generateButtonTones)(mergedThemeVars)),
-            Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
+            Object.assign(Object.assign(Object.assign(Object.assign({}, themeDefChain[themeDefChain.length - 1].themeVars), (0, transformThemeVars_1.generateTextFontSizes)(mergedThemeVars)), (_a = themeDefChain[themeDefChain.length - 1].themeVars) === null || _a === void 0 ? void 0 : _a[activeTone]), (_c = (_b = themeDefChain[themeDefChain.length - 1].tones) === null || _b === void 0 ? void 0 : _b[activeTone]) === null || _c === void 0 ? void 0 : _c.themeVars),
         ];
         return resultedTheme;
     }, [activeTone, themeDefChain]);

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -8,12 +8,14 @@ exports.resolveThemeVar = resolveThemeVar;
 exports.generateBaseTones = generateBaseTones;
 exports.generateBaseSpacings = generateBaseSpacings;
 exports.generateBaseFontSizes = generateBaseFontSizes;
+exports.generateTextFontSizes = generateTextFontSizes;
 exports.generateButtonTones = generateButtonTones;
 exports.generatePaddingSegments = generatePaddingSegments;
 exports.generateBorderSegments = generateBorderSegments;
 const color_1 = __importDefault(require("color"));
 const hvar_1 = require("../theming/hvar");
 const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
+const layout_resolver_1 = require("./layout-resolver");
 function isThemeVarName(varName) {
     return typeof varName === "string" && (varName === null || varName === void 0 ? void 0 : varName.startsWith("$"));
 }
@@ -95,6 +97,31 @@ function generateBaseFontSizes(theme) {
     ret[`fontSize-tiny`] = `${0.625 * baseNum}${baseUnit}`;
     return ret;
 }
+function generateTextFontSizes(theme) {
+    if (!theme) {
+        return {};
+    }
+    const resolvedTheme = resolveThemeVars(theme);
+    const base = resolvedTheme["fontSize-Text"];
+    if (!base || typeof base !== "string") {
+        return {};
+    }
+    // --- Get the CSS variable name of fontSize-Text-keyboard
+    const ret = {};
+    ret[`fontSize-Text-keyboard`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-sample`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-sup`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-sub`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-title`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 1.5)`;
+    ret[`fontSize-Text-subtitle`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 1.25)`;
+    ret[`fontSize-Text-small`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-placeholder`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    ret[`fontSize-Text-paragraph`] = (0, layout_resolver_1.toCssVar)("$fontSize-Text");
+    ret[`fontSize-Text-subheading`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-tableheading`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.625)`;
+    ret[`fontSize-Text-secondary`] = `calc(${(0, layout_resolver_1.toCssVar)("$fontSize-Text")} * 0.875)`;
+    return ret;
+}
 function generateButtonTones(theme) {
     if (!theme) {
         return {};

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

@@ -960,7 +960,7 @@ declare const _default: {
         [variantSpecificProps: string]: any;
         uid?: string;
         children?: default_2.ReactNode;
-        variant?: "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "var" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
+        variant?: "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "var" | "inherit" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
         maxLines?: number;
         preserveLinebreaks?: boolean;
         ellipses?: boolean;
@@ -2063,7 +2063,7 @@ declare type TextProps = {
 
 declare type TextVariant = (typeof TextVariantKeys)[number];
 
-declare const TextVariantKeys: readonly ["abbr", "cite", "code", "codefence", "deleted", "inserted", "keyboard", "marked", "sample", "sub", "sup", "var", "strong", "em", "mono", "title", "subtitle", "small", "caption", "placeholder", "paragraph", "subheading", "tableheading", "secondary"];
+declare const TextVariantKeys: readonly ["abbr", "cite", "code", "codefence", "deleted", "inherit", "inserted", "keyboard", "marked", "sample", "sub", "sup", "var", "strong", "em", "mono", "title", "subtitle", "small", "caption", "placeholder", "paragraph", "subheading", "tableheading", "secondary"];
 
 /**
  * This type represents a theme definition object. Theme files can use this object's JSON-serialized