xmlui 0.9.74 → 0.9.76

package/dist/scripts/package.json

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

package/dist/scripts/src/components/Charts/BarChart/BarChart.js

@@ -42,28 +42,32 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
             valueType: "string",
         },
         hideX: {
-            description: "Determines whether the X-axis should be hidden. If set to \`true\`, the axis will not be rendered.",
+            description: "Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.",
             valueType: "boolean",
             defaultValue: BarChartNative_1.defaultProps.hideX,
         },
         hideY: {
-            description: "Determines whether the Y-axis should be hidden. If set to \`true\`, the axis will not be rendered.",
+            description: "Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.",
             valueType: "boolean",
             defaultValue: BarChartNative_1.defaultProps.hideY,
         },
         hideTickX: {
-            description: "Controls the visibility of the X-axis ticks. If set to \`true\`, tick labels on the X-axis will be hidden.",
+            description: "Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.",
             valueType: "boolean",
             defaultValue: BarChartNative_1.defaultProps.hideTickX,
         },
         hideTickY: {
-            description: "Controls the visibility of the Y-axis ticks. If set to \`true\`, tick labels on the Y-axis will be hidden.",
+            description: "Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.",
             valueType: "boolean",
             defaultValue: BarChartNative_1.defaultProps.hideTickY,
         },
-        tickFormatter: {
-            description: "A function that formats the axis tick labels. It receives a tick value and returns a formatted string.",
-            defaultValue: JSON.stringify(BarChartNative_1.defaultProps.tickFormatter),
+        tickFormatterX: {
+            description: "A function that formats the tick labels on the X-axis. ",
+            defaultValue: JSON.stringify(BarChartNative_1.defaultProps.tickFormatterX),
+        },
+        tickFormatterY: {
+            description: "A function that formats the tick labels on the Y-axis. ",
+            defaultValue: JSON.stringify(BarChartNative_1.defaultProps.tickFormatterY),
         },
         showLegend: {
             description: "Determines whether the legend should be displayed.",
@@ -73,6 +77,6 @@ exports.BarChartMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.barChartComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BarChartMd, ({ extractValue, node, layoutCss, lookupSyncCallback, renderChild }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { style: layoutCss, tickFormatter: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatter), data: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.data), layout: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.layout), nameKey: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.nameKey), dataKeys: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.dataKeys), stacked: extractValue.asOptionalBoolean((_f = node.props) === null || _f === void 0 ? void 0 : _f.stacked), hideX: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.hideX), hideY: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideY), hideTickX: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideTickX), hideTickY: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickY), showLegend: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.showLegend), children: renderChild(node.children) }));
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return ((0, jsx_runtime_1.jsx)(BarChartNative_1.BarChart, { style: layoutCss, tickFormatterX: lookupSyncCallback((_a = node.props) === null || _a === void 0 ? void 0 : _a.tickFormatterX), tickFormatterY: lookupSyncCallback((_b = node.props) === null || _b === void 0 ? void 0 : _b.tickFormatterY), data: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.data), layout: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.layout), nameKey: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.nameKey), dataKeys: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.dataKeys), stacked: extractValue.asOptionalBoolean((_g = node.props) === null || _g === void 0 ? void 0 : _g.stacked), hideX: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.hideX), hideY: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.hideY), hideTickX: extractValue.asOptionalBoolean((_k = node.props) === null || _k === void 0 ? void 0 : _k.hideTickX), hideTickY: extractValue.asOptionalBoolean((_l = node.props) === null || _l === void 0 ? void 0 : _l.hideTickY), showLegend: extractValue.asOptionalBoolean((_m = node.props) === null || _m === void 0 ? void 0 : _m.showLegend), children: renderChild(node.children) }));
 });

package/dist/scripts/src/components/Charts/BarChart/BarChartNative.js

@@ -49,10 +49,11 @@ exports.defaultProps = {
     hideTickY: false,
     hideX: false,
     hideY: false,
-    tickFormatter: (value) => value,
+    tickFormatterX: (value) => value,
+    tickFormatterY: (value) => value,
     showLegend: false,
 };
-function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, stacked = exports.defaultProps.stacked, dataKeys = [], hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideY = exports.defaultProps.hideY, hideX = exports.defaultProps.hideX, tickFormatter = exports.defaultProps.tickFormatter, style, children, showLegend = exports.defaultProps.showLegend, }) {
+function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, stacked = exports.defaultProps.stacked, dataKeys = [], hideTickX = exports.defaultProps.hideTickX, hideTickY = exports.defaultProps.hideTickY, hideY = exports.defaultProps.hideY, hideX = exports.defaultProps.hideX, tickFormatterX = exports.defaultProps.tickFormatterX, tickFormatterY = exports.defaultProps.tickFormatterY, style, children, showLegend = exports.defaultProps.showLegend, }) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const colorValues = (0, react_2.useMemo)(() => {
         return [
@@ -180,7 +181,7 @@ function BarChart({ data = [], layout = exports.defaultProps.layout, nameKey, st
                     height: style.height || "100%",
                     padding: 0,
                     margin: 0,
-                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { ref: containerRef, width: "100%", height: "100%", debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { style: style, accessibilityLayer: true, data: data, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tick: miniMode ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode ? undefined : tickFormatter, tick: miniMode ? false : { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatter, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
+                }, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { style: style, ref: containerRef, width: "100%", height: "100%", debounce: 100, children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { accessibilityLayer: true, data: data, layout: layout, margin: miniMode ? { left: 0, right: 0, top: 0, bottom: 0 } : chartMargin, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: true, strokeDasharray: "3 3" }), layout === "vertical" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { type: "number", axisLine: false, hide: miniMode || hideX, tickFormatter: miniMode ? undefined : tickFormatterX, tick: miniMode ? false : { fill: "currentColor", fontSize } }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { hide: miniMode || hideY, dataKey: nameKey, type: "category", interval: "equidistantPreserveStart", tickLine: false, tickFormatter: miniMode ? undefined : tickFormatterY, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize } })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: nameKey, type: "category", interval: interval, tickLine: false, angle: tickAngle, textAnchor: tickAnchor, tick: miniMode ? false : !hideTickX && { fill: "currentColor", fontSize }, tickFormatter: miniMode ? undefined : tickFormatterX, height: miniMode || hideX ? 0 : xAxisHeight, hide: miniMode || hideX }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { type: "number", axisLine: false, tick: miniMode ? false : !hideTickY && { fill: "currentColor", fontSize }, hide: miniMode || hideY, tickCount: yTickCount, tickFormatter: miniMode ? undefined : tickFormatterY, width: miniMode || hideY || hideTickY ? 0 : 40 })] })), !miniMode && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { content: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, {}) }), Object.keys(config).map((key, index) => ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { dataKey: key, fill: config[key].color, radius: stacked ? 0 : 8, stackId: stacked ? "stacked" : undefined, strokeWidth: 1 }, index))), showLegend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, { wrapperStyle: {
                                     bottom: 0,
                                     left: 0,
                                     right: 0,

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

@@ -193,7 +193,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 = extractValue({
+    const resolvedValidationPropsAndEvents = {
         required: extractValue.asOptionalBoolean(required),
         requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage),
         minLength: extractValue.asOptionalNumber(minLength),
@@ -210,7 +210,7 @@ exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
         regex: extractValue.asOptionalString(regex),
         regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage),
         regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)),
-    });
+    };
     const nonLayoutCssProps = !layoutCss
         ? rest
         : Object.fromEntries(Object.entries(rest).filter(([key, _]) => {

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

@@ -47,7 +47,6 @@ function AnimatedLogo() {
 function LazyNestedApp(_a) {
     var { immediate } = _a, restProps = __rest(_a, ["immediate"]);
     const [shouldRender, setShouldRender] = (0, react_1.useState)(immediate || false);
-    console.log("Rendering NestedApp with props:", restProps);
     (0, react_1.useEffect)(() => {
         if (!immediate) {
             (0, react_1.startTransition)(() => {

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

@@ -31,7 +31,7 @@ exports.TreeDisplayMd = (0, metadata_helpers_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(TreeDisplay_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "$color-primary-50",
+        [`backgroundColor-${COMP}`]: "$backgroundColor-CodeBlock",
         [`borderRadius-${COMP}`]: "8px",
         [`padding-${COMP}`]: "$space-4",
         [`paddingLeft-${COMP}`]: "$space-2",

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

@@ -103,7 +103,7 @@ function appendFormFieldValue({ key, value }, formData, prevKey = key) {
     }
 }
 class RestApiProxy {
-    constructor(appContext) {
+    constructor(appContext, apiInstance) {
         var _a;
         this.execute = (_a) => __awaiter(this, [_a], void 0, function* ({ abortSignal, operation, params, parseOptions, resolveBindingExpressions = false, transactionId = (0, misc_1.randomUUID)(), onProgress, }) {
             return yield this.executeOperation({
@@ -270,12 +270,13 @@ class RestApiProxy {
                 signal: abortSignal,
                 body: requestBody,
             };
+            let url = this.generateFullApiUrl(relativePath, queryParams);
             if (onUploadProgress) {
                 console.log("Falling back to axios. Reason: onUploadProgress specified");
                 const axios = (yield Promise.resolve().then(() => __importStar(require("axios")))).default;
                 try {
                     const response = yield axios.request({
-                        url: this.generateFullApiUrl(relativePath, queryParams),
+                        url: url,
                         method: options.method,
                         headers: aggregatedHeaders,
                         data: options.body,
@@ -293,7 +294,13 @@ class RestApiProxy {
                 }
             }
             else {
-                const response = yield fetch(this.generateFullApiUrl(relativePath, queryParams), options);
+                let response;
+                if (this.apiInstance && this.apiInstance.hasMockForRequest(url, options)) {
+                    response = yield this.apiInstance.executeMockedFetch(url, options);
+                }
+                else {
+                    response = yield fetch(url, options);
+                }
                 if (!response.clone().ok) {
                     throw yield this.raiseError(response);
                 }
@@ -334,6 +341,7 @@ class RestApiProxy {
         const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) || { apiUrl: "" };
         const { apiUrl, errorResponseTransform } = conf;
         this.appContext = appContext;
+        this.apiInstance = apiInstance;
         // const xsrfToken = readCookie("XSRF-TOKEN");
         const xsrfHeaders = 
         // xsrfToken

package/dist/scripts/src/components-core/action/APICall.js

@@ -176,7 +176,7 @@ function updateQueriesWithOptimisticValue(_a) {
     });
 }
 function callApi(_a, _b) {
-    return __awaiter(this, arguments, void 0, function* ({ state, appContext, lookupAction, getCurrentState }, { confirmTitle, confirmMessage, confirmButtonLabel, params = {}, onBeforeRequest, onSuccess, onError, invalidates, updates, optimisticValue, payloadType, when, getOptimisticValue, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, uid: actionUid, onProgress, 
+    return __awaiter(this, arguments, void 0, function* ({ state, appContext, lookupAction, getCurrentState, apiInstance }, { confirmTitle, confirmMessage, confirmButtonLabel, params = {}, onBeforeRequest, onSuccess, onError, invalidates, updates, optimisticValue, payloadType, when, getOptimisticValue, inProgressNotificationMessage, completedNotificationMessage, errorNotificationMessage, uid: actionUid, onProgress, 
     //operation
     headers, url, queryParams, rawBody, method, body, }, { resolveBindingExpressions } = {}) {
         const uid = typeof actionUid === "symbol" ? actionUid : Symbol(actionUid);
@@ -228,7 +228,7 @@ function callApi(_a, _b) {
             const _onProgress = lookupAction(onProgress, uid, {
                 eventName: "progress",
             });
-            const result = yield new RestApiProxy_1.default(appContext).execute({
+            const result = yield new RestApiProxy_1.default(appContext, apiInstance).execute({
                 operation,
                 params: stateContext,
                 transactionId: clientTxId,

package/dist/scripts/src/components-core/interception/ApiInterceptor.js

@@ -76,6 +76,7 @@ function initDb(apiDef) {
 }
 // An API interceptor implementation
 class ApiInterceptor {
+    // public id = crypto.randomUUID();
     constructor(apiDef) {
         this.apiDef = apiDef;
         this.backend = null;
@@ -200,5 +201,46 @@ class ApiInterceptor {
     convertRequestParams(params, operation) {
         return Object.assign(Object.assign({}, params), { pathParams: (0, request_params_1.convertRequestParamPart)(params.pathParams, operation.pathParamTypes), queryParams: (0, request_params_1.convertRequestParamPart)(params.queryParams, operation.queryParamTypes) });
     }
+    hasMockForRequest(url, options) {
+        return this.getMockForRequest(url, options) !== undefined;
+    }
+    getMockForRequest(url, options) {
+        return Object.entries(this.getOperations()).find(([operationId, operationDef]) => {
+            if ((0, msw_1.matchRequestUrl)(new URL(url, window.location.href), `${this.getApiUrl()}${operationDef.url}`, `${window.location.href}`).matches &&
+                (options.method || "get").toLowerCase() === operationDef.method.toLowerCase()) {
+                return true;
+            }
+            return false;
+        });
+    }
+    executeMockedFetch(url, options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const mockForRequest = this.getMockForRequest(url, options);
+            if (!mockForRequest) {
+                throw new Error(`No mock found for request: ${url} with options: ${JSON.stringify(options)}`);
+            }
+            const [operationId, operationDef] = mockForRequest;
+            const match = (0, msw_1.matchRequestUrl)(new URL(url, window.location.href), `${this.getApiUrl()}${operationDef.url}`, `${window.location.href}`);
+            return this.executeOperation(operationId, new Request(url, options), getCookiesAsObject(), match.params);
+        });
+    }
 }
 exports.ApiInterceptor = ApiInterceptor;
+function getCookiesAsObject() {
+    // 1. Get the cookie string
+    const cookieString = document.cookie;
+    // 2. Handle the case of no cookies
+    if (cookieString === "") {
+        return {};
+    }
+    // 3. Split into individual "key=value" pairs
+    const cookiePairs = cookieString.split('; ');
+    // 4. Use reduce to build the final object
+    const cookieObject = cookiePairs.reduce((acc, currentPair) => {
+        const [key, value] = currentPair.split('=');
+        // Decode the key and value to handle special characters
+        acc[decodeURIComponent(key)] = decodeURIComponent(value);
+        return acc;
+    }, {});
+    return cookieObject;
+}

package/dist/scripts/src/components-core/interception/ApiInterceptorProvider.js

@@ -48,13 +48,37 @@ const react_1 = require("react");
 const misc_1 = require("../utils/misc");
 const useApiInterceptorContext_1 = require("./useApiInterceptorContext");
 // This React component injects the API interceptor into the application's context
-function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, parentInterceptorContext = null, waitForApiInterceptor = false, }) {
+function ApiInterceptorProvider({ interceptor, children, parentInterceptorContext = null, waitForApiInterceptor = false, }) {
+    var _a;
     const hasParentInterceptorContext = parentInterceptorContext !== null;
     const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
     const [forceInitialize, setForceInitialize] = (0, react_1.useState)(false);
     const [interceptorWorker, setInterceptorWorker] = (0, react_1.useState)(null);
+    const [apiInstance, setApiInstance] = (0, react_1.useState)(null);
+    const useWorker = (_a = interceptor === null || interceptor === void 0 ? void 0 : interceptor.useWorker) !== null && _a !== void 0 ? _a : true;
     // --- Whenever the interceptor changes, update the provider accordingly
+    let forceInitializeParent = parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.forceInitialize;
+    let parentInterceptorWorker = parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.interceptorWorker;
+    //// if we don't use a worker, we initialize the api instance directly
     (0, react_1.useEffect)(() => {
+        if (useWorker) {
+            return;
+        }
+        if (!interceptor) {
+            return;
+        }
+        (() => __awaiter(this, void 0, void 0, function* () {
+            const { initMock } = yield Promise.resolve().then(() => __importStar(require("./initMock")));
+            const apiInstance = yield initMock(interceptor);
+            setApiInstance(apiInstance);
+            setInitialized(true);
+        }))();
+    }, [interceptor, useWorker]);
+    //// if we use a worker, we initialize the worker with the api instance
+    (0, react_1.useEffect)(() => {
+        if (!useWorker) {
+            return;
+        }
         if (!hasParentInterceptorContext) {
             if (interceptor || forceInitialize) {
                 // setInitialized(false);
@@ -63,17 +87,22 @@ function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, pa
                 (() => __awaiter(this, void 0, void 0, function* () {
                     // --- Create the worker on the fly
                     if (process.env.VITE_MOCK_ENABLED) {
-                        const { createApiInterceptorWorker } = yield Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker")));
+                        const [{ createApiInterceptorWorker }, { initMock }] = yield Promise.all([
+                            useWorker
+                                ? Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker"))) : Promise.resolve({ createApiInterceptorWorker: () => null }),
+                            Promise.resolve().then(() => __importStar(require("./initMock"))),
+                        ]);
                         if (interceptor || forceInitialize) {
-                            interceptorWorker = yield createApiInterceptorWorker(interceptor || {}, null);
+                            const apiInstance = yield initMock(interceptor || {});
+                            interceptorWorker = yield createApiInterceptorWorker(apiInstance);
                             // if the apiWorker comes from the outside, we don't handle the lifecycle here
                             const workerFileLocation = (0, misc_1.normalizePath)(process.env.VITE_MOCK_WORKER_LOCATION || "mockServiceWorker.js");
                             yield interceptorWorker.start({
                                 onUnhandledRequest: "bypass",
                                 quiet: true,
                                 serviceWorker: {
-                                    url: workerFileLocation
-                                }
+                                    url: workerFileLocation,
+                                },
                             });
                             setInterceptorWorker(interceptorWorker);
                         }
@@ -82,7 +111,7 @@ function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, pa
                 }))();
                 return () => {
                     // if the apiWorker comes from the outside, we don't handle the lifecycle here
-                    if (!(parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.interceptorWorker)) {
+                    if (!parentInterceptorWorker) {
                         interceptorWorker === null || interceptorWorker === void 0 ? void 0 : interceptorWorker.stop();
                     }
                     setInitialized(false);
@@ -93,22 +122,34 @@ function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, pa
             }
         }
         else {
-            if (interceptor) {
-                if (parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.interceptorWorker) {
-                    (() => __awaiter(this, void 0, void 0, function* () {
-                        const { createApiInterceptorWorker } = yield Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker")));
-                        yield createApiInterceptorWorker(interceptor, parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.interceptorWorker);
-                        setTimeout(() => {
-                            setInitialized(true);
-                        }, 0);
-                    }))();
-                }
-                else {
-                    parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.forceInitialize();
-                }
+            if (!interceptor) {
+                return;
+            }
+            if (parentInterceptorWorker) {
+                (() => __awaiter(this, void 0, void 0, function* () {
+                    const [{ createApiInterceptorWorker }, { initMock }] = yield Promise.all([
+                        Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker"))),
+                        Promise.resolve().then(() => __importStar(require("./initMock"))),
+                    ]);
+                    const apiInstance = yield initMock(interceptor);
+                    yield createApiInterceptorWorker(apiInstance, parentInterceptorWorker);
+                    setTimeout(() => {
+                        setInitialized(true);
+                    }, 0);
+                }))();
+            }
+            else {
+                forceInitializeParent === null || forceInitializeParent === void 0 ? void 0 : forceInitializeParent();
             }
         }
-    }, [forceInitialize, hasParentInterceptorContext, interceptor, parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.forceInitialize, parentInterceptorContext === null || parentInterceptorContext === void 0 ? void 0 : parentInterceptorContext.interceptorWorker]);
+    }, [
+        useWorker,
+        forceInitialize,
+        hasParentInterceptorContext,
+        interceptor,
+        forceInitializeParent,
+        parentInterceptorWorker,
+    ]);
     const isMocked = (0, react_1.useCallback)((url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED, [interceptor]);
     const doForceInitialize = (0, react_1.useCallback)(() => {
         setForceInitialize(true);
@@ -116,11 +157,11 @@ function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, pa
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             interceptorWorker,
+            apiInstance,
             initialized: initialized,
             forceInitialize: doForceInitialize,
             isMocked: isMocked,
         };
-    }, [interceptorWorker, initialized, doForceInitialize, isMocked]);
-    // console.log("[ApiInterceptorProvider] Initialized:", initialized, "Interceptor:", interceptor, "Has parent", hasParentInterceptorContext, "waitForApiInterceptor", waitForApiInterceptor);
+    }, [interceptorWorker, apiInstance, initialized, doForceInitialize, isMocked]);
     return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: waitForApiInterceptor && !initialized ? null : children }));
 }

package/dist/scripts/src/components-core/interception/apiInterceptorWorker.js

@@ -13,7 +13,6 @@ exports.createApiInterceptorWorker = void 0;
 const browser_1 = require("msw/browser");
 const msw_1 = require("msw");
 const lodash_es_1 = require("lodash-es");
-const ApiInterceptor_1 = require("./ApiInterceptor");
 // Create handlers for the specified API interceptor
 function createHandlers(api) {
     const operations = api.getOperations();
@@ -32,12 +31,10 @@ function createHandlers(api) {
     return handlers;
 }
 // Create the worker for the ApiInterceptorProvider
-const createApiInterceptorWorker = (apiInterceptorDefinition, apiWorker) => __awaiter(void 0, void 0, void 0, function* () {
-    const apiInstance = new ApiInterceptor_1.ApiInterceptor(apiInterceptorDefinition);
-    yield apiInstance.initialize();
+const createApiInterceptorWorker = (apiInstance, parentWorker) => __awaiter(void 0, void 0, void 0, function* () {
     const handlers = createHandlers(apiInstance);
-    let worker = apiWorker;
-    if (!worker) {
+    let worker = parentWorker;
+    if (!parentWorker) {
         worker = (0, browser_1.setupWorker)();
     }
     // https://github.com/mswjs/msw/issues/2495

package/dist/scripts/src/components-core/interception/initMock.js

@@ -0,0 +1,20 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initMock = void 0;
+const ApiInterceptor_1 = require("./ApiInterceptor");
+// Create the worker for the ApiInterceptorProvider
+const initMock = (apiInterceptorDefinition) => __awaiter(void 0, void 0, void 0, function* () {
+    const apiInstance = new ApiInterceptor_1.ApiInterceptor(apiInterceptorDefinition);
+    yield apiInstance.initialize();
+    return apiInstance;
+});
+exports.initMock = initMock;

package/dist/scripts/src/components-core/loader/DataLoader.js

@@ -27,6 +27,7 @@ const AppContext_1 = require("../AppContext");
 const hooks_1 = require("../utils/hooks");
 const IndexerContext_1 = require("../../components/App/IndexerContext");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
+const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
 function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, loaderInProgressChanged, loaderIsRefetchingChanged, loaderLoaded, loaderError, transformResult, structuralSharing = true, }) {
     const appContext = (0, AppContext_1.useAppContext)();
     const url = (0, extractParam_1.extractParam)(state, loader.props.url, appContext);
@@ -55,9 +56,10 @@ function DataLoader({ loader, state, registerComponentApi, onLoaded, onError, lo
         return null;
     }, [loader.props.nextPageSelector, loader.props.prevPageSelector]);
     const hasPaging = pagingDirection !== null;
+    const { apiInstance } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
     const api = (0, react_1.useMemo)(() => {
-        return new RestApiProxy_1.default(appContext);
-    }, [appContext]);
+        return new RestApiProxy_1.default(appContext, apiInstance);
+    }, [apiInstance, appContext]);
     const doLoad = (0, react_1.useCallback)((abortSignal, pageParams) => __awaiter(this, void 0, void 0, function* () {
         // For CSV data type, handle directly rather than using RestApiProxy
         if (loader.props.dataType === "csv") {

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

@@ -66,6 +66,7 @@ const renderChild_1 = require("./renderChild");
 const ThemeContext_1 = require("../theming/ThemeContext");
 const LoaderComponent_1 = require("../LoaderComponent");
 const constants_1 = require("../constants");
+const useApiInterceptorContext_1 = require("../interception/useApiInterceptorContext");
 // React component to display a view container and implement its behavior
 exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container({ node, componentState, dispatch: containerDispatch, parentDispatch, resolvedKey, version, setVersion, statePartChanged, registerComponentApi: containerRegisterComponentApi, parentRegisterComponentApi, layoutContextRef, parentRenderContext, memoedVarsRef, isImplicit, uidInfoRef: parentUidInfoRef, children, }, ref) {
     var _a;
@@ -106,6 +107,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
             }
         };
     }, []);
+    const { apiInstance } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
     const runCodeAsync = (0, misc_1.useEvent)((source, componentUid, options, ...eventArgs) => __awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         // --- Check if the event handler can sign its lifecycle state
@@ -136,6 +138,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
                     getCurrentState: () => stateRef.current,
                     dispatch,
                     appContext: evalAppContext,
+                    apiInstance,
                     navigate,
                     location,
                     lookupAction: (action, uid, actionOptions = {}) => {

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

@@ -660,7 +660,7 @@ function generateBaseTonesForColor(varName, theme, options = { distributeEven: f
             color200 = baseColor.lightness(baseL + lightStep * 3);
             color300 = baseColor.lightness(baseL + lightStep * 2);
             color400 = baseColor.lightness(baseL + lightStep * 1);
-            color500 = baseColor;
+            color500 = baseColor.lightness(baseL);
             color600 = baseColor.lightness(baseL - darkStep * 1);
             color700 = baseColor.lightness(baseL - darkStep * 2);
             color800 = baseColor.lightness(baseL - darkStep * 3);

package/dist/scripts/src/syntax/grammar.tmLanguage.json

@@ -223,7 +223,7 @@
             "patterns": [{ "include": "source.js" }]
         },
         "textWithBindingExpr": {
-            "patterns": [{ "include": "#entity" }, { "include": "#bindingExpr" }]
+            "patterns": [{ "include": "#entity" }, { "match": "\\\\{" }, { "include": "#bindingExpr" }]
         },
         "propOrVarTag": {
             "begin": "(</?)([a-zA-Z_][\\w\\.\\-]*?:)?((?:variable)|(?:property)|(?:prop))",

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

@@ -8,6 +8,7 @@ import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
+import { PathParams } from 'msw';
 import { QueryClient } from '@tanstack/react-query';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -15,6 +16,7 @@ import { RefObject } from 'react';
 import { Renderable } from 'react-hot-toast';
 import { Root } from 'react-dom/client';
 import { SetupWorker } from 'msw/browser';
+import { StrictRequest } from 'msw';
 import { To } from 'react-router-dom';
 import { Toast } from 'react-hot-toast';
 import { ToastOptions } from 'react-hot-toast';
@@ -25,6 +27,7 @@ declare interface ActionExecutionContext {
     state: ContainerState;
     getCurrentState: () => ContainerState;
     appContext: AppContextObject;
+    apiInstance?: ApiInterceptor;
     lookupAction: LookupAsyncFnInner;
     navigate: any;
     location: any;
@@ -36,6 +39,20 @@ declare type AlignmentOptions = (typeof alignmentOptionValues)[number];
 
 declare const alignmentOptionValues: readonly ["start", "center", "end"];
 
+declare class ApiInterceptor {
+    private readonly apiDef;
+    private backend;
+    constructor(apiDef: ApiInterceptorDefinition);
+    initialize(): Promise<void>;
+    getOperations(): Record<string, InterceptorOperationDef>;
+    getApiUrl(): string;
+    executeOperation(operationId: string, req: StrictRequest<any> | null, cookies: Record<string, string | Array<string>>, params: PathParams<string>): Promise<Response>;
+    private convertRequestParams;
+    hasMockForRequest(url: string, options: RequestInit): boolean;
+    private getMockForRequest;
+    executeMockedFetch(url: string, options: RequestInit): Promise<Response>;
+}
+
 declare type ApiInterceptorDefinition = {
     type?: string;
     config?: Record<string, any>;
@@ -47,13 +64,13 @@ declare type ApiInterceptorDefinition = {
     initialize?: string;
     operations?: Record<string, InterceptorOperationDef>;
     auth?: AuthDefinition;
+    useWorker?: boolean;
 };
 
-declare function ApiInterceptorProvider({ interceptor, children, useHashBasedRouting, parentInterceptorContext, waitForApiInterceptor, }: {
+declare function ApiInterceptorProvider({ interceptor, children, parentInterceptorContext, waitForApiInterceptor, }: {
     interceptor?: ApiInterceptorDefinition;
     children: ReactNode;
     apiWorker?: SetupWorker;
-    useHashBasedRouting?: boolean;
     parentInterceptorContext?: IApiInterceptorContext;
     waitForApiInterceptor?: boolean;
 }): JSX_2.Element;
@@ -745,6 +762,7 @@ declare interface IApiInterceptorContext {
     initialized: boolean;
     forceInitialize: () => void;
     interceptorWorker: SetupWorker | null;
+    apiInstance: ApiInterceptor | null;
 }
 
 declare interface IAppLayoutContext {
@@ -1317,7 +1335,7 @@ declare const standaloneExports: {
         [variantSpecificProps: string]: any;
         uid?: string;
         children?: default_2.ReactNode;
-        variant?: "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "var" | "inherit" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
+        variant?: "var" | "small" | "sub" | "sup" | "abbr" | "caption" | "cite" | "code" | "em" | "strong" | "title" | "inherit" | "mono" | "secondary" | "codefence" | "deleted" | "inserted" | "keyboard" | "marked" | "sample" | "subtitle" | "placeholder" | "paragraph" | "subheading" | "tableheading";
         maxLines?: number;
         preserveLinebreaks?: boolean;
         ellipses?: boolean;