xmlui 0.9.79 → 0.9.80

package/dist/scripts/package.json

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

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

@@ -19,6 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
+const react_1 = require("react");
 const FormContext_1 = require("../Form/FormContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const Validations_1 = require("./Validations");
@@ -193,7 +194,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
     var _a;
     const _b = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, maxTextLength, gap } = _b, rest = __rest(_b, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "maxTextLength", "gap"]);
     //extractValue works as a memoization mechanism too (if there's nothing to resolve, it won't produce a new object every time)
-    const resolvedValidationPropsAndEvents = {
+    const resolvedValidationPropsAndEvents = (0, react_1.useMemo)(() => ({
         required: extractValue.asOptionalBoolean(required),
         requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage),
         minLength: extractValue.asOptionalNumber(minLength),
@@ -210,7 +211,25 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
         regex: extractValue.asOptionalString(regex),
         regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage),
         regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)),
-    };
+    }), [
+        required,
+        requiredInvalidMessage,
+        minLength,
+        maxLength,
+        lengthInvalidMessage,
+        lengthInvalidSeverity,
+        minValue,
+        maxValue,
+        rangeInvalidMessage,
+        rangeInvalidSeverity,
+        pattern,
+        patternInvalidMessage,
+        patternInvalidSeverity,
+        regex,
+        regexInvalidMessage,
+        regexInvalidSeverity,
+        extractValue,
+    ]);
     const nonLayoutCssProps = !layoutCss
         ? rest
         : Object.fromEntries(Object.entries(rest).filter(([key, _]) => {

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

@@ -142,7 +142,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         }
         case "number":
         case "integer": {
-            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { initialValue: initialValue, value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
             break;
         }
         // NOTE: This is a prototype for the new number field
@@ -150,7 +150,7 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         // in production.
         case "integer2":
         case "number2": {
-            formControl = ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, min: validations.minValue, max: validations.maxValue, integersOnly: type === "integer2" })));
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBox2Native_1.NumberBox2, Object.assign({}, rest, { initialValue: initialValue, value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, min: validations.minValue, max: validations.maxValue, integersOnly: type === "integer2" })));
             break;
         }
         case "switch":

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

@@ -74,16 +74,17 @@ exports.defaultProps = {
     removeIndents: true,
 };
 function PreTagComponent({ id, children, codeHighlighter }) {
+    var _a, _b;
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
-    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const appContext = (0, AppContext_1.useAppContext)();
     let _codeHighlighter = null;
     if (codeHighlighter) {
         _codeHighlighter = codeHighlighter;
     }
     else {
-        _codeHighlighter = (0, highlight_code_1.isCodeHighlighter)(appGlobals.codeHighlighter)
-            ? appGlobals.codeHighlighter
+        _codeHighlighter = (0, highlight_code_1.isCodeHighlighter)((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.codeHighlighter)
+            ? (_b = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _b === void 0 ? void 0 : _b.codeHighlighter
             : null;
     }
     const defaultCodefence = ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", children: children }) }));

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

@@ -29,11 +29,12 @@ const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
-function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader = false, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withSplashScreen, immediate }) {
+function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader = false, initiallyShowCode = false, popOutUrl, app, api, components = [], config, activeTone, activeTheme, title, height, allowPlaygroundPopup, withSplashScreen, immediate, closeButton = null, controlsWidth, }) {
+    var _a;
     const [showCode, setShowCode] = (0, react_1.useState)(initiallyShowCode);
-    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    const appContext = (0, AppContext_1.useAppContext)();
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
-    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.popOutUrl) || "https://docs.xmlui.com/#/playground");
+    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || ((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.popOutUrl) || "https://docs.xmlui.com/#/playground");
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
             standalone: {
@@ -60,18 +61,18 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
         window.open(`${safePopOutUrl}/#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, safePopOutUrl]);
     if (withFrame) {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && !splitView && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && !splitView && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [!noHeader && ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [!splitView && (0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), splitView && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, style: { width: controlsWidth }, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
                                                         [NestedApp_module_scss_1.default.show]: showCode,
                                                         [NestedApp_module_scss_1.default.hide]: !showCode,
                                                     }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
                                                         [NestedApp_module_scss_1.default.show]: !showCode,
                                                         [NestedApp_module_scss_1.default.hide]: showCode,
-                                                    }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                                    }), children: "UI" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, style: { width: controlsWidth }, children: [allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                                     openPlayground();
                                                 }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                                     setShowCode(false);
                                                     setRefreshVersion(refreshVersion + 1);
-                                                }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [(0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewMarkdown, { [NestedApp_module_scss_1.default.hidden]: !showCode }), children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { className: (0, classnames_1.default)({ [NestedApp_module_scss_1.default.hidden]: showCode }), height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion, withSplashScreen: withSplashScreen, immediate: immediate })] })] })] }));
+                                                }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" }), closeButton] })] })), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [(0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewMarkdown, { [NestedApp_module_scss_1.default.hidden]: !showCode }), children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { className: (0, classnames_1.default)({ [NestedApp_module_scss_1.default.hidden]: showCode }), height: "100%", app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion, withSplashScreen: withSplashScreen, immediate: immediate })] })] })] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!markdown && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }), (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: height, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, refreshVersion: refreshVersion, withSplashScreen: withSplashScreen, immediate: immediate })] }));
 }

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

@@ -85,5 +85,10 @@ exports.NumberBoxMd = (0, metadata_helpers_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(NumberBox_module_scss_1.default.themeVars),
 });
 exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue.asOptionalString(node.props.initialValue), step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    // --- Handle initial value as a number
+    let extractedInitialValue = extractValue(node.props.initialValue);
+    if (typeof extractedInitialValue === "string" && !isNaN(parseFloat(extractedInitialValue))) {
+        extractedInitialValue = Number(extractedInitialValue);
+    }
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { style: layoutCss, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractedInitialValue, step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
 });

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -63,6 +63,7 @@ exports.defaultProps = {
     onBlur: constants_1.noop,
 };
 exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, hasSpinBox = exports.defaultProps.hasSpinBox, step, integersOnly = exports.defaultProps.integersOnly, zeroOrPositive = exports.defaultProps.zeroOrPositive, min = zeroOrPositive ? 0 : exports.defaultProps.min, max = exports.defaultProps.max, maxLength, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, startText, startIcon, endText, endIcon, gap, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+    // --- Ensure the provided value is a number or null
     var _a;
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);

package/dist/scripts/src/components-core/ComponentViewer.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InspectorDialog_1 = require("./devtools/InspectorDialog");
+const AppWithCodeViewNative_1 = __importDefault(require("../components/NestedApp/AppWithCodeViewNative"));
+const react_1 = require("react");
+const InspectorContext_1 = require("./InspectorContext");
+const Tooltip_1 = require("../components/NestedApp/Tooltip");
+const NestedApp_module_scss_1 = __importDefault(require("../components/NestedApp/NestedApp.module.scss"));
+const ai_1 = require("react-icons/ai");
+const ComponentViewer = () => {
+    const { mockApi, setIsOpen, isOpen, inspectedNode, clickPosition, projectCompilation, sources } = (0, InspectorContext_1.useDevTools)();
+    const components = (0, react_1.useMemo)(() => {
+        if (!projectCompilation) {
+            return [];
+        }
+        return projectCompilation.components.map((component) => {
+            return component.markupSource;
+        });
+    }, [projectCompilation]);
+    const value = (0, react_1.useMemo)(() => {
+        var _a;
+        const compSrc = (_a = inspectedNode === null || inspectedNode === void 0 ? void 0 : inspectedNode.debug) === null || _a === void 0 ? void 0 : _a.source;
+        if (!compSrc) {
+            return "";
+        }
+        if (!sources) {
+            return "";
+        }
+        const { start, end, fileId } = compSrc;
+        const slicedSrc = sources[fileId].slice(start, end);
+        let dropEmptyLines = true;
+        const prunedLines = [];
+        let trimBeginCount = undefined;
+        slicedSrc.split("\n").forEach((line) => {
+            if (line.trim() === "" && dropEmptyLines) {
+                //drop empty lines from the beginning
+                return;
+            }
+            else {
+                dropEmptyLines = false;
+                prunedLines.push(line);
+                const startingWhiteSpaces = line.search(/\S|$/);
+                if (line.trim() !== "" &&
+                    (trimBeginCount === undefined || startingWhiteSpaces < trimBeginCount)) {
+                    trimBeginCount = startingWhiteSpaces;
+                }
+            }
+        });
+        return prunedLines
+            .map((line) => line.slice(trimBeginCount).replace(/inspect="true"/g, ""))
+            .join("\n");
+    }, [inspectedNode, sources]);
+    return process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
+        isOpen &&
+        inspectedNode !== null ? ((0, jsx_runtime_1.jsx)(InspectorDialog_1.InspectorDialog, { isOpen: isOpen, setIsOpen: setIsOpen, clickPosition: clickPosition, children: (0, jsx_runtime_1.jsx)(AppWithCodeViewNative_1.default, { height: "500px", allowPlaygroundPopup: true, splitView: true, controlsWidth: "120px", closeButton: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                        setIsOpen(false);
+                    }, children: (0, jsx_runtime_1.jsx)(ai_1.AiOutlineClose, {}) }), label: "Close" }), markdown: `\`\`\`xmlui
+${value}
+\`\`\``, api: mockApi, app: value, components: components }) })) : null;
+};
+exports.ComponentViewer = ComponentViewer;

package/dist/scripts/src/components-core/InspectorContext.js

@@ -16,23 +16,17 @@ const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
 const ButtonNative_1 = require("../components/Button/ButtonNative");
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
-const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
 function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
-    const { root } = (0, ThemeContext_1.useTheme)();
     const [inspectable, setInspectable] = (0, react_1.useState)({});
     const [inspectedNode, setInspectedNode] = (0, react_1.useState)(null);
     const [showCode, setShowCode] = (0, react_1.useState)(false);
-    const [devToolsSize, setDevToolsSize] = (0, react_1.useState)(0);
-    const [devToolsSide, setDevToolsSide] = (0, react_1.useState)("bottom");
     const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
     const [clickPosition, setClickPosition] = (0, react_1.useState)({
         x: 0,
         y: 0,
     });
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const devToolsEntry = componentRegistry.lookupComponentRenderer("XMLUIDevtools.DevTools");
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             sources,
@@ -61,10 +55,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             inspectedNode,
             setIsOpen: setShowCode,
             isOpen: showCode,
-            devToolsSize,
-            setDevToolsSize,
-            devToolsSide,
-            setDevToolsSide,
             devToolsEnabled: showCode,
             projectCompilation: projectCompilation,
             setInspectMode,
@@ -73,8 +63,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
             clickPosition,
         };
     }, [
-        devToolsSide,
-        devToolsSize,
         sources,
         inspectedNode,
         showCode,
@@ -85,9 +73,6 @@ function InspectorProvider({ children, sources, projectCompilation, mockApi, })
         mockApi,
     ]);
     return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
-                showCode &&
-                inspectedNode !== null &&
-                (0, react_dom_1.createPortal)(devToolsEntry === null || devToolsEntry === void 0 ? void 0 : devToolsEntry.renderer({}), root), process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
                 inspectable &&
                 Object.values(inspectable).map((item) => {
                     return ((0, jsx_runtime_1.jsx)(InspectButton, { inspectedNode: inspectedNode, setShowCode: setShowCode, setClickPosition: setClickPosition, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode, inspectMode: inspectMode }, item.inspectId + +"-" + item.key));

package/dist/scripts/src/components-core/abstractions/standalone.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components-core/devtools/InspectorDialog.js

@@ -0,0 +1,135 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
+const classnames_1 = __importDefault(require("classnames"));
+const Dialog = __importStar(require("@radix-ui/react-dialog"));
+const InspectorDialog_module_scss_1 = __importDefault(require("./InspectorDialog.module.scss"));
+const xmlui_1 = require("xmlui");
+const framer_motion_1 = require("framer-motion");
+// =====================================================================================================================
+// React component definition
+const MotionContent = framer_motion_1.motion.create(Dialog.Content);
+const overlayVariants = {
+    visible: { opacity: 1 },
+    hidden: { opacity: 0 },
+};
+const contentVariants = {
+    initial: (custom) => ({
+        opacity: 0,
+        scale: 0.2,
+        x: custom.x - window.innerWidth / 2,
+        y: custom.y - window.innerHeight / 2,
+    }),
+    animate: {
+        opacity: 1,
+        scale: 1,
+        x: 0,
+        y: 0,
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.2,
+        transition: { duration: 0.2 },
+    },
+};
+function durationToSeconds(durationString) {
+    if (!durationString) {
+        return undefined;
+    }
+    const trimmedString = durationString.trim();
+    if (trimmedString.endsWith("ms")) {
+        const milliseconds = parseFloat(trimmedString);
+        return milliseconds / 1000;
+    }
+    else if (trimmedString.endsWith("s")) {
+        return parseFloat(trimmedString);
+    }
+    else {
+        return parseFloat(trimmedString);
+    }
+}
+exports.InspectorDialog = react_1.default.forwardRef(({ children, style, isOpen, setIsOpen, clickPosition }, ref) => {
+    const { root, getThemeVar } = (0, xmlui_1.useTheme)();
+    const modalRef = (0, react_1.useRef)(null);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, modalRef) : modalRef;
+    const [rendered, setRendered] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isOpen) {
+            (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isOpen]);
+    // https://github.com/radix-ui/primitives/issues/2122#issuecomment-2140827998
+    (0, react_1.useEffect)(() => {
+        if (isOpen) {
+            // Pushing the change to the end of the call stack
+            const timer = setTimeout(() => {
+                document.body.style.pointerEvents = "";
+            }, 0);
+            return () => clearTimeout(timer);
+        }
+        else {
+            document.body.style.pointerEvents = "auto";
+        }
+    }, [isOpen]);
+    if (!root) {
+        return null;
+    }
+    const onExitComplete = () => {
+        setIsOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(Dialog.Root, { defaultOpen: false, open: isOpen, onOpenChange: setRendered, children: (0, jsx_runtime_1.jsx)(Dialog.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { onExitComplete: onExitComplete, children: rendered && ((0, jsx_runtime_1.jsxs)(Dialog.Overlay, { className: InspectorDialog_module_scss_1.default.overlay, forceMount: true, children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: InspectorDialog_module_scss_1.default.overlayBg, variants: overlayVariants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
+                                duration: 0.2,
+                                ease: [0.16, 1, 0.3, 1],
+                            } }, "overlay"), (0, jsx_runtime_1.jsx)(MotionContent, { forceMount: true, onPointerDownOutside: (event) => {
+                                if (event.target instanceof Element &&
+                                    event.target.closest("._debug-inspect-button") !== null) {
+                                    //we prevent the auto modal close on clicking the inspect button
+                                    event.preventDefault();
+                                }
+                            }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: composedRef, className: (0, classnames_1.default)(InspectorDialog_module_scss_1.default.content, InspectorDialog_module_scss_1.default.contentWrapper), variants: contentVariants, custom: { x: clickPosition.x, y: clickPosition.y }, initial: "initial", animate: "animate", exit: "exit", transition: {
+                                    duration: durationToSeconds(getThemeVar("duration-startAnimation-ModalDialog")) ||
+                                        0.8,
+                                    ease: [0.16, 1, 0.3, 1],
+                                }, style: Object.assign(Object.assign({}, style), { gap: undefined }), children: children }) })] })) }) }) }));
+});
+exports.InspectorDialog.displayName = "InspectorDialog";

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

@@ -19,6 +19,7 @@ const AppContent_1 = require("./AppContent");
 const ErrorBoundary_1 = require("./ErrorBoundary");
 const LoggerContext_1 = require("../../logging/LoggerContext");
 const LoggerInitializer_1 = require("../../logging/LoggerInitializer");
+const ComponentViewer_1 = require("../ComponentViewer");
 /**
  * This component wraps the application into other layers of (nested) components
  * that provide app functionality and services requiring unique interaction with
@@ -38,10 +39,12 @@ const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "",
     // --- provide the app functionality and services. These components are
     // --- wrapped in other components that provide the necessary environment
     // --- for the app to run.
-    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsx)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: children }) }) }) }) })] })] }));
+    const dynamicChildren = ((0, jsx_runtime_1.jsxs)(react_helmet_async_1.HelmetProvider, { children: [(0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { defaultTitle: siteName, titleTemplate: `%s | ${siteName}` }), (0, jsx_runtime_1.jsxs)(LoggerContext_1.LoggerProvider, { children: [(0, jsx_runtime_1.jsx)(LoggerInitializer_1.LoggerInitializer, {}), (0, jsx_runtime_1.jsx)(IconProvider_1.IconProvider, { children: (0, jsx_runtime_1.jsx)(ThemeProvider_1.default, { resourceMap: resourceMap, themes: contributes.themes, defaultTheme: defaultTheme, defaultTone: defaultTone, resources: resources, children: (0, jsx_runtime_1.jsx)(InspectorContext_1.InspectorProvider, { sources: sources, projectCompilation: projectCompilation, mockApi: globalProps === null || globalProps === void 0 ? void 0 : globalProps.demoMockApi, children: (0, jsx_runtime_1.jsx)(ConfirmationModalContextProvider_1.ConfirmationModalContextProvider, { children: (0, jsx_runtime_1.jsxs)(AppContent_1.AppContent, { onInit: onInit, rootContainer: node, routerBaseName: baseName, globalProps: globalProps, standalone: standalone, decorateComponentsWithTestId: decorateComponentsWithTestId, debugEnabled: debugEnabled, trackContainerHeight: trackContainerHeight, children: [(0, jsx_runtime_1.jsx)(ComponentViewer_1.ComponentViewer, {}), children] }) }) }) }) })] })] }));
     // --- Select the router type for the app
     const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
-    const shouldSkipClientRouter = previewMode ? false : (typeof window === "undefined" || process.env.VITE_REMIX);
+    const shouldSkipClientRouter = previewMode
+        ? false
+        : typeof window === "undefined" || process.env.VITE_REMIX;
     return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
 };
 exports.AppWrapper = AppWrapper;

package/dist/scripts/src/language-server/services/common/metadata-utils.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentMetadataProvider = exports.MetadataProvider = void 0;
+exports.addOnPrefix = addOnPrefix;
+const descriptorHelper_1 = require("../../../components-core/descriptorHelper");
+const xmlui_parser_1 = require("../../../parsers/xmlui-parser");
+const abstractions_1 = require("../../../components/abstractions");
+class MetadataProvider {
+    constructor(metadataCollection) {
+        this.metadataCollection = metadataCollection;
+    }
+    componentNames() {
+        return Object.keys(this.metadataCollection);
+    }
+    getComponent(componentName) {
+        const providerData = this.metadataCollection[componentName];
+        if (!providerData) {
+            return null;
+        }
+        return new ComponentMetadataProvider(providerData);
+    }
+}
+exports.MetadataProvider = MetadataProvider;
+class ComponentMetadataProvider {
+    constructor(metadata) {
+        this.metadata = metadata;
+    }
+    /**
+     * Retrieves the metadata for a given property, explicit or implicit.
+     * @param name The name of the property.
+     * @returns The metadata for the property, or `undefined` if not found.
+     */
+    getProp(name) {
+        var _a;
+        return (_a = this.metadata.props[name]) !== null && _a !== void 0 ? _a : implicitPropsMetadata[name];
+    }
+    getAttr(name) {
+        var _a, _b, _c;
+        if (xmlui_parser_1.onPrefixRegex.test(name)) {
+            const eventName = (0, xmlui_parser_1.stripOnPrefix)(name);
+            const event = (_a = this.metadata.events) === null || _a === void 0 ? void 0 : _a[eventName];
+            if (event) {
+                return event;
+            }
+        }
+        const explicitProp = (_b = this.metadata.props) === null || _b === void 0 ? void 0 : _b[name];
+        if (explicitProp) {
+            return explicitProp;
+        }
+        const api = (_c = this.metadata.apis) === null || _c === void 0 ? void 0 : _c[name];
+        if (api) {
+            return api;
+        }
+        const layout = layoutMdForKey(name);
+        if (layout) {
+            return layout;
+        }
+        return implicitPropsMetadata[name];
+    }
+    getAttrForKind({ name, kind }) {
+        switch (kind) {
+            case "api":
+                return this.metadata.apis[name];
+            case "event":
+                return this.metadata.events[name];
+            case "prop":
+                return this.metadata.props[name];
+            case "implicit":
+                return implicitPropsMetadata[name];
+            case "layout":
+                return layoutMdForKey(name);
+        }
+    }
+    getAllAttributes() {
+        var _a, _b, _c;
+        const attrNames = [];
+        for (const key of Object.keys((_a = this.metadata.props) !== null && _a !== void 0 ? _a : {})) {
+            attrNames.push({ name: key, kind: "prop" });
+        }
+        for (const key of Object.keys((_b = this.metadata.events) !== null && _b !== void 0 ? _b : {})) {
+            attrNames.push({ name: key, kind: "event" });
+        }
+        for (const key of Object.keys((_c = this.metadata.apis) !== null && _c !== void 0 ? _c : {})) {
+            attrNames.push({ name: key, kind: "api" });
+        }
+        for (const layoutKey of descriptorHelper_1.layoutOptionKeys) {
+            attrNames.push({ name: layoutKey, kind: "layout" });
+        }
+        for (const implicitPropKey of Object.keys(implicitPropsMetadata)) {
+            attrNames.push({ name: implicitPropKey, kind: "implicit" });
+        }
+        return attrNames;
+    }
+    getEvent(name) {
+        var _a;
+        return (_a = this.metadata.events) === null || _a === void 0 ? void 0 : _a[name];
+    }
+    getApi(name) {
+        var _a;
+        return (_a = this.metadata.apis) === null || _a === void 0 ? void 0 : _a[name];
+    }
+    get events() {
+        return this.metadata.events;
+    }
+    get apis() {
+        return this.metadata.apis;
+    }
+    get contextVars() {
+        return this.metadata.contextVars;
+    }
+    get allowArbitraryProps() {
+        return this.metadata.allowArbitraryProps;
+    }
+    get shortDescription() {
+        return this.metadata.shortDescription;
+    }
+    getMetadata() {
+        return this.metadata;
+    }
+}
+exports.ComponentMetadataProvider = ComponentMetadataProvider;
+function layoutMdForKey(name) {
+    const metadata = {
+        description: "Layout property. Not yet documented",
+    };
+    if (descriptorHelper_1.layoutOptionKeys.includes(name)) {
+        return metadata;
+    }
+    for (const size of abstractions_1.viewportSizeMd) {
+        const suffix = "-" + (size.value);
+        if (name.endsWith(suffix)) {
+            const nameWithoutSize = name.slice(0, -suffix.length);
+            if (descriptorHelper_1.layoutOptionKeys.includes(nameWithoutSize)) {
+                return metadata;
+            }
+        }
+    }
+    return null;
+}
+const implicitPropsMetadata = {
+    inspect: {
+        description: "Determines whether the component can be inspected or not",
+        defaultValue: false,
+        valueType: "boolean",
+    },
+    data: {
+        description: "Specifies the data source for a component. Can be a URL string (fetched automatically), a DataSource or an expression to evaluate. Changes to this property trigger UI updates once data is loaded.",
+    },
+    when: {
+        description: "Specifies a condition that must be met for the component to be displayed",
+        defaultValue: true,
+        valueType: "boolean",
+    }
+};
+function addOnPrefix(name) {
+    return "on" + name[0].toUpperCase() + name.substring(1);
+}