xmlui 0.9.45 → 0.9.47

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)();
@@ -252,7 +253,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { variant: "checkbox", readOnly: disabled, value: checked }));
                 },
                 table({ children }) {
-                    return (0, jsx_runtime_1.jsx)("table", { className: HtmlTags_module_scss_1.default.htmlTable, children: children });
+                    return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.tableScrollContainer, children: (0, jsx_runtime_1.jsx)("table", { className: HtmlTags_module_scss_1.default.htmlTable, children: children }) }));
                 },
                 tr({ children }) {
                     return (0, jsx_runtime_1.jsx)("tr", { className: HtmlTags_module_scss_1.default.htmlTr, children: children });
@@ -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/Select/Select.js

@@ -63,9 +63,6 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`borderWidth-menu-${COMP}`]: "1px",
         [`borderColor-menu-${COMP}`]: "$borderColor",
-        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
-        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--active",
-        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
         [`minHeight-Input`]: "39px",
         [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
         [`fontSize-${COMP}-badge`]: "$fontSize-small",
@@ -79,6 +76,9 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
         [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
         [`textColor-${COMP}-badge`]: "$color-surface-50",
+        [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
+        [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--hover",
+        [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

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

@@ -104,10 +104,10 @@ 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",
-        [`fontSize-${COMP}-markdown`]: "$fontSize-normal",
         [`backgroundColor-${COMP}-code`]: "rgba($color-surface-100-rgb, .4)",
         [`borderColor-${COMP}-code`]: "$color-surface-100",
         [`backgroundColor-${COMP}-keyboard`]: "rgba($color-surface-100-rgb, .4)",

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -46,7 +46,7 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
+exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, onKeyDown = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
     const _id = (0, react_1.useId)();
     id = id || _id;
     const inputRef = (0, react_2.useRef)(null);
@@ -104,5 +104,5 @@ exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text",
                 [TextBox_module_scss_1.default.error]: validationStatus === "error",
                 [TextBox_module_scss_1.default.warning]: validationStatus === "warning",
                 [TextBox_module_scss_1.default.valid]: validationStatus === "valid",
-            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
+            }), tabIndex: -1, onFocus: focus, style: { gap }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: TextBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: type, className: (0, classnames_1.default)(TextBox_module_scss_1.default.input, { [TextBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: localValue, maxLength: maxLength, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: onKeyDown, ref: inputRef, readOnly: readOnly, autoFocus: autoFocus, tabIndex: enabled ? tabIndex : -1, required: required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: TextBox_module_scss_1.default.adornment })] }) }));
 });

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/themes/root.js

@@ -126,7 +126,7 @@ exports.RootThemeDefinition = {
         "color-info": "$color-info-500",
         "color-valid": "$color-success-600",
         "color-warning": "$color-warn-700",
-        "color-error": "$color-danger-600",
+        "color-error": "$color-danger-500",
         // --- Default line height values (relative to the base unit, "space-base")
         "lineHeight-none": "1",
         "lineHeight-tight": "1.25",
@@ -212,7 +212,7 @@ exports.RootThemeDefinition = {
         "borderColor-Input-default--focus": $colorSurface600,
         "borderColor-Input-default--success": $colorSuccess600,
         "borderColor-Input-default--warning": $colorWarn700,
-        "borderColor-Input-default--error": $colorDanger600,
+        "borderColor-Input-default--error": $colorDanger500,
         // --- InputLabel is a React component, so we define its default theme variables here
         "textColor-InputLabel-required": $colorDanger600,
     },

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