xmlui 0.9.49 → 0.9.51

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.49",
+    "version": "0.9.51",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -105,7 +105,6 @@
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
         "vscode-languageserver-textdocument": "^1.0.11",
-        "xml-formatter": "^3.6.6",
         "yargs": "17.7.2",
         "xmlui-charts": "*"
     },

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.appRenderer = exports.AppMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const App_module_scss_1 = __importDefault(require("./App.module.scss"));
+const Sheet_module_scss_1 = __importDefault(require("./Sheet.module.scss"));
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
@@ -77,7 +78,8 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
     events: {
         ready: (0, ComponentDefs_1.d)(`This event fires when the \`${COMP}\` component finishes rendering on the page.`),
     },
-    themeVars: (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars),
+    themeVars: Object.assign(Object.assign({}, (0, themeVars_1.parseScssVar)(App_module_scss_1.default.themeVars)), (0, themeVars_1.parseScssVar)(Sheet_module_scss_1.default.themeVars)),
+    limitThemeVarsToComponent: true,
     themeVarDescriptions: {
         "maxWidth-content-App": "This theme variable defines the maximum width of the main content. If the main " +
             "content is broader, the engine adds margins to keep the expected maximum size.",
@@ -88,6 +90,7 @@ exports.AppMd = (0, ComponentDefs_1.createMetadata)({
             "with one of the vertical layouts.",
     },
     defaultThemeVars: {
+        "maxWidth-Drawer": "20rem",
         [`width-navPanel-${COMP}`]: "$space-64",
         [`backgroundColor-navPanel-${COMP}`]: "$backgroundColor",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",

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

@@ -46,6 +46,7 @@ exports.CheckboxMd = (0, ComponentDefs_1.createMetadata)({
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
         [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -63,6 +63,7 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
         close: (0, ComponentDefs_1.d)(`This method command closes the dropdown.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${DDMCOMP}`]: "$color-surface-raised",
         [`minWidth-${DDMCOMP}`]: "160px",
@@ -107,6 +108,7 @@ exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
         click: (0, metadata_helpers_1.dClick)(MICOMP),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${MICOMP}`]: "$backgroundColor-dropdown-item",
         [`color-${MICOMP}`]: "$textColor-primary",
@@ -155,6 +157,7 @@ exports.MenuSeparatorMd = (0, ComponentDefs_1.createMetadata)({
     description: "This component displays a separator line between menu items.",
     docFolder: DDMCOMP,
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`marginTop-${MSEP}`]: "$space-1",
         [`marginBottom-${MSEP}`]: "$space-1",

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

@@ -14,6 +14,7 @@ const COMP = "Footer";
 exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` is a component that acts as a placeholder within \`App\`.`,
     themeVars: (0, themeVars_1.parseScssVar)(Footer_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`backgroundColor-${COMP}`]: "$backgroundColor-AppHeader",
         [`verticalAlign-${COMP}`]: "center",

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

@@ -158,6 +158,13 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
     events: {
         validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
     },
+    apis: {
+        addItem: (0, ComponentDefs_1.d)("Adds a new item to the `FormItem` data where the particular form item holds " +
+            "a list. The function has a single parameter, the data to add to the `FormItem`. " +
+            "The new item is appended to the end of the list."),
+        removeItem: (0, ComponentDefs_1.d)("Removes the item specified by its index from the list held by the FormItem. " +
+            "The function has a single argument, the index to remove."),
+    },
     contextVars: {
         $value: (0, ComponentDefs_1.d)(`The context variable represents the current value of the \`${COMP}\`. It can be used in ` +
             `expressions and code snippets within the \`${COMP}\` instance.`),

package/dist/scripts/src/components/FormItem/Validations.js

@@ -76,23 +76,23 @@ class FormItemValidator {
             if (!requiredResult || requiredResult.isValid) {
                 validationResults.push(this.validateLength(), this.validateRange(), this.validatePattern(), this.validateRegex());
             }
-            validationResults = validationResults.filter(result => result !== undefined);
+            validationResults = validationResults.filter((result) => result !== undefined);
             return {
-                isValid: validationResults.find(result => !result.isValid) === undefined,
+                isValid: validationResults.find((result) => !result.isValid) === undefined,
                 validatedValue: this.value,
                 partial: this.onValidate !== undefined,
-                validations: validationResults
+                validations: validationResults,
             };
         };
         this.validate = () => __awaiter(this, void 0, void 0, function* () {
             const preValidateResult = this.preValidate();
             const constValidationResult = (yield this.validateCustom()) || [];
-            preValidateResult.validations.push(...constValidationResult.map(res => (Object.assign(Object.assign({}, res), { async: true }))));
+            preValidateResult.validations.push(...constValidationResult.map((res) => (Object.assign(Object.assign({}, res), { async: true }))));
             return {
-                isValid: preValidateResult.validations.find(result => !result.isValid) === undefined,
+                isValid: preValidateResult.validations.find((result) => !result.isValid) === undefined,
                 validatedValue: this.value,
                 partial: false,
-                validations: preValidateResult.validations
+                validations: preValidateResult.validations,
             };
         });
     }
@@ -104,36 +104,38 @@ class FormItemValidator {
         return {
             isValid: !isInputEmpty(this.value),
             invalidMessage: requiredInvalidMessage || "This field is required",
-            severity: "error"
+            severity: "error",
         };
     }
     validateLength() {
-        const { minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity = "error" } = this.validations;
+        const { minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity = "error", } = this.validations;
         if (minLength === undefined && maxLength === undefined) {
             return undefined;
         }
         if (minLength !== undefined && maxLength === undefined) {
             return {
                 isValid: isMinLengthValid(this.value, minLength),
-                invalidMessage: lengthInvalidMessage || `Input should be at least ${minLength} ${pluralize(minLength, "character")}`,
-                severity: lengthInvalidSeverity
+                invalidMessage: lengthInvalidMessage ||
+                    `Input should be at least ${minLength} ${pluralize(minLength, "character")}`,
+                severity: lengthInvalidSeverity,
             };
         }
         if (minLength === undefined && maxLength !== undefined) {
             return {
                 isValid: isMaxLengthValid(this.value, maxLength),
-                invalidMessage: lengthInvalidMessage || `Input should be up to ${maxLength} ${pluralize(maxLength, "character")}`,
-                severity: lengthInvalidSeverity
+                invalidMessage: lengthInvalidMessage ||
+                    `Input should be up to ${maxLength} ${pluralize(maxLength, "character")}`,
+                severity: lengthInvalidSeverity,
             };
         }
         return {
             isValid: isMinLengthValid(this.value, minLength) && isMaxLengthValid(this.value, maxLength),
             invalidMessage: lengthInvalidMessage || `Input length should be between ${minLength} and ${maxLength}`,
-            severity: lengthInvalidSeverity
+            severity: lengthInvalidSeverity,
         };
     }
     validateRange() {
-        const { minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity = "error" } = this.validations;
+        const { minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity = "error", } = this.validations;
         if (minValue === undefined && maxValue === undefined) {
             return undefined;
         }
@@ -141,20 +143,29 @@ class FormItemValidator {
             return {
                 isValid: isMinValueValid(this.value, minValue),
                 invalidMessage: rangeInvalidMessage || `Input should be bigger than ${minValue}`,
-                severity: rangeInvalidSeverity
+                severity: rangeInvalidSeverity,
             };
         }
         if (minValue === undefined && maxValue !== undefined) {
             return {
                 isValid: isMaxValueValid(this.value, maxValue),
                 invalidMessage: rangeInvalidMessage || `Input should be smaller than ${maxValue}`,
-                severity: rangeInvalidSeverity
+                severity: rangeInvalidSeverity,
+            };
+        }
+        if (typeof this.value === "object" && Array.isArray(this.value)) {
+            // If the value is an array, we check if all elements are within the range
+            const allValid = this.value.every((val) => isMinValueValid(val, minValue) && isMaxValueValid(val, maxValue));
+            return {
+                isValid: allValid,
+                invalidMessage: rangeInvalidMessage || `All inputs should be between ${minValue} and ${maxValue}`,
+                severity: rangeInvalidSeverity,
             };
         }
         return {
             isValid: isMinValueValid(this.value, minValue) && isMaxValueValid(this.value, maxValue),
             invalidMessage: rangeInvalidMessage || `Input should be between ${minValue} and ${maxValue}`,
-            severity: rangeInvalidSeverity
+            severity: rangeInvalidSeverity,
         };
     }
     validatePattern() {
@@ -167,13 +178,13 @@ class FormItemValidator {
                 return {
                     isValid: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.value),
                     invalidMessage: patternInvalidMessage || "Not a valid email address",
-                    severity: patternInvalidSeverity
+                    severity: patternInvalidSeverity,
                 };
             case "phone":
                 return {
                     isValid: /^[a-zA-Z0-9#*)(+.\-_&']+$/g.test(this.value),
                     invalidMessage: patternInvalidMessage || "Not a valid phone number",
-                    severity: patternInvalidSeverity
+                    severity: patternInvalidSeverity,
                 };
             case "url":
                 let url;
@@ -185,18 +196,18 @@ class FormItemValidator {
                     return {
                         isValid: false,
                         invalidMessage: "Not a valid URL",
-                        severity: patternInvalidSeverity
+                        severity: patternInvalidSeverity,
                     };
                 }
                 return {
                     isValid: true,
-                    severity: "valid"
+                    severity: "valid",
                 };
             default: {
                 console.warn("Unknown pattern provided");
                 return {
                     isValid: true,
-                    severity: "valid"
+                    severity: "valid",
                 };
             }
         }
@@ -209,7 +220,7 @@ class FormItemValidator {
         return {
             isValid: isRegexValid(this.value, regex),
             invalidMessage: regexInvalidMessage || "Input is not in the correct format",
-            severity: regexInvalidSeverity
+            severity: regexInvalidSeverity,
         };
     }
     validateCustom() {
@@ -223,8 +234,8 @@ class FormItemValidator {
                     {
                         isValid: validationFnResult,
                         invalidMessage: "Invalid input",
-                        severity: "error"
-                    }
+                        severity: "error",
+                    },
                 ];
             }
             if (!(0, lodash_es_1.isArray)(validationFnResult)) {
@@ -247,7 +258,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
         if (throttleWaitInMs !== 0) {
             return (0, misc_1.asyncThrottle)(asyncValidate, throttleWaitInMs, {
                 trailing: true,
-                leading: true
+                leading: true,
             });
         }
         return asyncValidate;
@@ -274,7 +285,7 @@ function useValidation(validations, onValidate, value, dispatch, bindTo, throttl
     }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
 }
 function useValidationDisplay(bindTo, value, validationResult, validationMode = FormContext_1.defaultValidationMode) {
-    const interactionFlags = (0, FormContext_1.useFormContextPart)(value => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
+    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
     const forceShowValidationResult = interactionFlags.forceShowValidationResult;
     const focused = interactionFlags.focused;
     const isValidLostFocus = interactionFlags.isValidLostFocus;
@@ -288,7 +299,8 @@ function useValidationDisplay(bindTo, value, validationResult, validationMode =
         if (val.isValid) {
             continue;
         }
-        if (highestValidationSeverity !== "error" && val.severity === "warning") {
+        if (highestValidationSeverity !== "error" &&
+            val.severity === "warning") {
             highestValidationSeverity = "warning";
         }
         if (val.severity === "error") {
@@ -299,7 +311,8 @@ function useValidationDisplay(bindTo, value, validationResult, validationMode =
     let isHelperTextShown = false;
     switch (validationMode) {
         case "errorLate":
-            isHelperTextShown = isDirty && (focused ? !invalidToValid && !isValidOnFocus : !isValidLostFocus);
+            isHelperTextShown =
+                isDirty && (focused ? !invalidToValid && !isValidOnFocus : !isValidLostFocus);
             break;
         case "onChanged":
             isHelperTextShown = isDirty;
@@ -317,14 +330,17 @@ function useValidationDisplay(bindTo, value, validationResult, validationMode =
     }
     return {
         isHelperTextShown,
-        validationStatus: isHelperTextShown ? highestValidationSeverity : "none"
+        validationStatus: isHelperTextShown ? highestValidationSeverity : "none",
     };
 }
 function parseSeverity(severity) {
     if (severity === undefined) {
         return undefined;
     }
-    if (severity === "error" || severity === "warning" || severity === "valid" || severity === "none") {
+    if (severity === "error" ||
+        severity === "warning" ||
+        severity === "valid" ||
+        severity === "none") {
         return severity;
     }
     return "none";
@@ -334,10 +350,10 @@ function groupInvalidValidationResultsBySeverity(validationResults) {
         error: [],
         warning: [],
         valid: [],
-        none: []
+        none: [],
     };
     Object.entries(validationResults).forEach(([field, validationResult]) => {
-        validationResult.validations.forEach(singleValidationResult => {
+        validationResult.validations.forEach((singleValidationResult) => {
             if (!singleValidationResult.isValid) {
                 ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
                 ret[singleValidationResult.severity].push(singleValidationResult);

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

@@ -57,6 +57,7 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
         omitFromToc: OMIT_FROM_TOC_DESC,
     },
     themeVars: (0, themeVars_1.parseScssVar)(Heading_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`fontFamily-${COMP}`]: "$fontFamily",
         [`textColor-${COMP}`]: "inherit",

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

@@ -40,12 +40,13 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
     },
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
-        [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}`]: "$color-primary-500",
+        [`textDecorationColor-${COMP}`]: "$color-primary-500",
         [`textColor-${COMP}--hover`]: `$color-primary-400`,
-        [`textDecorationColor-${COMP}--active`]: "$color-primary-200",
-        [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
-        [`textDecorationColor-${COMP}`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textColor-${COMP}--active`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--active`]: "$color-primary-400",
+        [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,
         [`textUnderlineOffset-${COMP}`]: "$space-1",
         [`textDecorationLine-${COMP}`]: "underline",
         [`textDecorationStyle-${COMP}`]: "solid",
@@ -54,10 +55,9 @@ exports.LinkMd = (0, ComponentDefs_1.createMetadata)({
         [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
         [`outlineOffset-${COMP}--focus`]: "$outlineOffset--focus",
         [`fontSize-${COMP}`]: "inherit",
+        [`fontWeight-${COMP}--active`]: "$fontWeight-bold",
         [`gap-icon-${COMP}`]: "$gap-tight",
         [`padding-icon-${COMP}`]: "$space-0_5",
-        [`textColor-${COMP}`]: "$color-primary-500",
-        [`textColor-${COMP}--active`]: "$color-primary-500",
     },
 });
 /**

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

@@ -65,6 +65,10 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         "accentColor-Blockquote": "$color-surface-500",
         "marginTop-HtmlLi": "$space-2_5",
         "marginBottom-HtmlLi": "$space-2_5",
+        "marginTop-Image-markdown": "$space-4",
+        "marginBottom-Image-markdown": "$space-4",
+        "marginLeft-Image-markdown": "$space-0",
+        "marginRight-Image-markdown": "$space-0",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -67,6 +67,7 @@ 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");
+const unist_util_visit_1 = require("unist-util-visit");
 function PreTagComponent({ id, children, codeHighlighter }) {
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
@@ -95,7 +96,18 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: style, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser], rehypePlugins: [rehype_raw_1.default], components: {
+    const imageInfo = (0, react_1.useRef)(new Map());
+    const getImageKey = (node) => { var _a, _b, _c, _d; return `${(_b = (_a = node === null || node === void 0 ? void 0 : node.position) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.offset}|${(_d = (_c = node === null || node === void 0 ? void 0 : node.position) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.offset}`; };
+    const markdownImgParser = () => {
+        imageInfo.current.clear();
+        return function transformer(tree) {
+            (0, unist_util_visit_1.visit)(tree, "image", visitor);
+        };
+        function visitor(node, _, parent) {
+            imageInfo.current.set(getImageKey(node), parent.type === "paragraph" && parent.children.length > 1);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: style, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, CodeBlockNative_1.markdownCodeBlockParser, markdownImgParser], rehypePlugins: [rehype_raw_1.default], components: {
                 details(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
                     return ((0, jsx_runtime_1.jsx)("details", Object.assign({ className: HtmlTags_module_scss_1.default.htmlDetails }, props, { children: children })));
@@ -106,78 +118,19 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                 },
                 img(_a) {
                     var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    console.log("img", node);
                     const src = props === null || props === void 0 ? void 0 : props.src;
                     const popOut = props === null || props === void 0 ? void 0 : props["data-popout"];
                     const alt = (props === null || props === void 0 ? void 0 : props.alt) || "";
                     // --- Determine if the image should be inline or block
-                    let isInline = false;
-                    if (node) {
-                        const nodeData = node;
-                        // --- Case 1: Image is part of a larger paragraph with other content
-                        if (nodeData.parent && nodeData.parent.type === "paragraph") {
-                            if (nodeData.parent.children && nodeData.parent.children.length > 1) {
-                                // There are siblings in this paragraph - definitely inline
-                                isInline = true;
-                            }
-                            else {
-                                // --- It's the only child in the paragraph, check if there's text before/after
-                                // --- by examining the parent of the paragraph
-                                const paragraphParent = nodeData.parent.parent;
-                                if (paragraphParent && paragraphParent.children) {
-                                    const paragraphIndex = paragraphParent.children.indexOf(nodeData.parent);
-                                    if (paragraphIndex > 0 ||
-                                        paragraphIndex < paragraphParent.children.length - 1) {
-                                        // --- There are siblings before/after this paragraph, likely inline
-                                        isInline = true;
-                                    }
-                                }
-                            }
-                        }
-                        // --- Case 2: Image is inside a blockquote or other container with text
-                        if (!isInline &&
-                            nodeData.parent &&
-                            (nodeData.parent.type === "paragraph" ||
-                                nodeData.parent.type === "blockquote" ||
-                                nodeData.parent.type === "emphasis" ||
-                                nodeData.parent.type === "strong")) {
-                            // --- Look for any parent nodes with other text content
-                            let currentParent = nodeData.parent;
-                            while (currentParent) {
-                                if (currentParent.children &&
-                                    currentParent.children.some((child) => child !== nodeData &&
-                                        ((child.type === "text" && child.value && child.value.trim().length > 0) ||
-                                            child.type !== "text"))) {
-                                    isInline = true;
-                                    break;
-                                }
-                                currentParent = currentParent.parent;
-                            }
-                        }
-                        // --- For images without context clues, use file type and size as heuristics
-                        // --- Case 3: Image looks like an icon based on filename or size
-                        if (!isInline) {
-                            // --- Check if the image is small enough to be considered an icon
-                            // --- Small images are likely icons
-                            const imgSize = (props === null || props === void 0 ? void 0 : props.width) || (props === null || props === void 0 ? void 0 : props.height);
-                            isInline = imgSize === undefined ? true : parseInt(imgSize.toString()) < 512;
-                            // Images with icon-like filenames
-                            if (src &&
-                                (src.includes("icon") ||
-                                    src.endsWith(".svg") ||
-                                    src.endsWith(".ico") ||
-                                    src.includes("badge") ||
-                                    src.includes("logo"))) {
-                                isInline = true;
-                            }
-                        }
-                    }
+                    let isInline = imageInfo.current.get(getImageKey(node));
                     // Apply styling based on whether image should be inline or block
                     const imgStyle = Object.assign(Object.assign({}, (props.style || {})), { display: isInline ? "inline" : "block" });
                     if (popOut) {
-                        return ((0, jsx_runtime_1.jsx)("a", { href: src, target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, className: HtmlTags_module_scss_1.default.htmlImage, style: imgStyle }, props, { children: children })) }));
+                        return ((0, jsx_runtime_1.jsx)("a", { href: src, target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, style: imgStyle, children: children }) }));
                     }
                     else {
-                        return ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, className: HtmlTags_module_scss_1.default.htmlImage, style: imgStyle }, props, { children: children })));
+                        return ((0, jsx_runtime_1.jsx)("img", Object.assign({ src: src, alt: alt, style: imgStyle }, props, { className: (0, classnames_1.default)({ [Markdown_module_scss_1.default.block]: !isInline }), children: children })));
                     }
                 },
                 h1({ children }) {
@@ -292,7 +245,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = true, c
                         return (0, jsx_runtime_1.jsx)(TreeDisplayNative_1.TreeDisplay, { content: content, itemHeight: 24 });
                     }
                     return null;
-                }
+                },
             }, children: children }) }));
 });
 const HorizontalRule = () => {
@@ -361,9 +314,6 @@ const Blockquote = ({ children, style }) => {
     }
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.blockquoteContainer, children: children }) }));
 };
-const UnorderedList = ({ children, style }) => {
-    return ((0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: style, children: children }));
-};
 const OrderedList = ({ children, style }) => {
     return ((0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: style, children: children }));
 };

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

@@ -19,7 +19,9 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
             `\`vertical\` and \`vertical-sticky\` layout.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
+        [`horizontalAlignment-logo-${COMP}`]: "center",
         [`backgroundColor-${COMP}`]: "$backgroundColor",
         [`border-${COMP}`]: '0px solid $borderColor',
         [`paddingHorizontal-${COMP}`]: "0",

package/dist/scripts/src/components/NavPanel/NavPanelNative.js

@@ -64,7 +64,6 @@ exports.NavPanel = (0, react_1.forwardRef)(function NavPanel({ children, style,
     const isCondensed = (_a = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _a === void 0 ? void 0 : _a.startsWith("condensed");
     const vertical = (_b = appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.layout) === null || _b === void 0 ? void 0 : _b.startsWith("vertical");
     const safeLogoContent = logoContent || renderChild(appLayoutContext === null || appLayoutContext === void 0 ? void 0 : appLayoutContext.logoContentDef);
-    // console.log(appLayoutContext);
     if (inDrawer) {
         return ((0, jsx_runtime_1.jsx)(DrawerNavPanel, { style: style, logoContent: safeLogoContent, className: className, children: children }));
     }

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

@@ -41,6 +41,7 @@ exports.SwitchMd = (0, ComponentDefs_1.createMetadata)({
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
         [`backgroundColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -56,6 +56,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`borderStyle-${COMP}`]: "solid",
         [`fontSize-${COMP}`]: "$fontSize-small",
         [`borderWidth-${COMP}`]: "$space-0",
+        [`lineHeight-${COMP}-codefence`]: "1.4",
         [`fontWeight-${COMP}-abbr`]: "$fontWeight-bold",
         [`textTransform-${COMP}-abbr`]: "uppercase",
         [`fontSize-${COMP}-secondary`]: "$fontSize-small",
@@ -117,6 +118,9 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",
         [`color-${COMP}-secondary`]: "$textColor-secondary",
+        dark: {
+            [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-400-rgb, .4)",
+        }
     },
 });
 exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextMd, ({ node, extractValue, layoutCss, renderChild }) => {

package/dist/scripts/src/parsers/xmlui-parser/transform.js

@@ -88,6 +88,7 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         if (!exports.UCRegex.test(compoundName.value)) {
             reportError("T004");
         }
+        const codeBehind = attrs.find((attr) => attr.name === "codeBehind");
         // --- Get "method" attributes
         let api;
         const apiAttrs = attrs.filter((attr) => attr.startSegment === "method");
@@ -159,6 +160,9 @@ function nodeToComponentDef(node, originalGetText, fileId) {
         if (vars) {
             nestedComponent.vars = Object.assign(Object.assign({}, nestedComponent.vars), vars);
         }
+        if (codeBehind) {
+            component.codeBehind = codeBehind.value;
+        }
         nestedComponent.debug = {
             source: {
                 start: element.start,
@@ -328,6 +332,10 @@ function nodeToComponentDef(node, originalGetText, fileId) {
                 // --- We already processed name
                 return;
             }
+            if (name === "codeBehind" && !startSegment) {
+                // --- We already processed codeBehind
+                return;
+            }
             // --- Compound components do not have any other attributable props
             if (!startSegment && name) {
                 reportError("T021", name);

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

@@ -680,6 +680,7 @@ declare type ComponentMetadata<TProps extends Record<string, ComponentPropertyMe
     themeVarDescriptions?: Record<string, string>;
     defaultThemeVars?: DefaultThemeVars;
     toneSpecificThemeVars?: Record<string, Record<string, string>>;
+    limitThemeVarsToComponent?: boolean;
     allowArbitraryProps?: boolean;
     specializedFrom?: string;
     docFolder?: string;
@@ -801,6 +802,7 @@ declare interface CompoundComponentDef extends Scriptable {
      *   belonging to the particular component definition.
      */
     debug?: Record<string, any>;
+    codeBehind?: string;
 }
 
 declare type CONDITIONAL_EXPRESSION = typeof T_CONDITIONAL_EXPRESSION;